387 lines
9.8 KiB
Vue
387 lines
9.8 KiB
Vue
<template>
|
|
<view class="user-order-refund" v-if="detail.id">
|
|
<view class="fill-base mt-md ml-md mr-md pd-lg radius-34">
|
|
<view class="flex-between pb-lg b-1px-b">
|
|
<view class="flex-y-center">
|
|
<i class="iconfont icon-dianpu mr-sm"></i>
|
|
<view class="f-title c-title text-bold max-446 ellipsis">{{detail.store_info.title}}</view>
|
|
</view>
|
|
<view class="f-paragraph c-title"
|
|
:class="[{'c-warning': detail.pay_type < 3 && detail.pay_type != -1},{'c-success': detail.pay_type == 3}]">
|
|
{{statusType[detail.pay_type]}}
|
|
</view>
|
|
</view>
|
|
<block v-for="(item,index) in detail.order_goods" :key="index">
|
|
<view @tap="handerRadioChange(index)" class="item-child flex-warp"
|
|
:class="[{'mt-lg':index==0},{'mt-md':index!=0}]">
|
|
<i class="iconfont flex-y-center mr-md"
|
|
:class="[{'icon-xuanze':!item.checked},{'icon-xuanze-fill':item.checked}]"
|
|
:style="{color:item.checked ? primaryColor : ''}"></i>
|
|
<image mode="aspectFill" lazy-load class="goods-img box-shadow-mini radius-16"
|
|
:src="item.goods_cover">
|
|
</image>
|
|
<view class="flex-1 ml-lg">
|
|
<view class="f-paragraph c-title text-bold ellipsis"> {{item.goods_name}} </view>
|
|
<view class="f-caption c-title ellipsis"> {{item.spe_name}} </view>
|
|
<view class="f-caption c-warning mt-sm" v-if="item.integral_id">{{item.integral}}积分</view>
|
|
<view class="flex-y-baseline mt-sm">
|
|
<view class="flex-1 f-paragraph c-warning">¥{{item.singe_pay_price}} </view>
|
|
<view class="flex-warp" v-if="item.can_refund_num > 1">
|
|
<view class="add-remove-item flex-center">
|
|
<i @tap.stop="changeNum(index,-1)"
|
|
class="iconfont icon-remove-circle c-caption"></i>
|
|
<view class="number flex-center f-desc pl-sm pr-sm">{{item.apply_num}}
|
|
</view>
|
|
<i @tap.stop="changeNum(index,1)" class="iconfont icon-add-circle"
|
|
:style="{color:primaryColor}"></i>
|
|
</view>
|
|
</view>
|
|
<block v-else>
|
|
<view class="c-paragraph">x{{item.apply_num}}</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view class="mt-lg pt-lg pb-lg f-paragraph c-title b-1px-tb">
|
|
<view class="flex-between">
|
|
<view>商品金额</view>
|
|
<view>¥{{detail.can_refund_price}}</view>
|
|
</view>
|
|
<block v-if="detail.send_type == 2">
|
|
<view class="flex-between mt-sm">
|
|
<view class="flex-y-baseline">配送费<view class="f-icontext c-warning ml-sm">发货前全部商品退款将退还</view>
|
|
</view>
|
|
<view>¥{{detail.freight}}</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view class="mt-lg f-paragraph c-title flex-between mt-sm">
|
|
<view>合计</view>
|
|
<view class="f-title c-warning text-bold">
|
|
{{total_refund_integral?`${total_refund_integral}积分+${total_refund_price}元`:`${total_refund_price}元`}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="item-child mg-big pd-lg fill-base radius-34">
|
|
<view class="f-title c-title text-bold pb-lg">退款原因</view>
|
|
<view class="fill-body f-paragraph c-title radius-34">
|
|
<textarea v-on:input="subForm.text = subForm.text.length>200?subForm.text.substring(0,200):subForm.text"
|
|
v-model="subForm.text" class="pd-lg f-paragraph" style="width: 580rpx;" maxlength="200"
|
|
placeholder="请输入退款原因" placeholder-class="c-title" />
|
|
<view class="text-right pb-lg pr-lg">{{`${subForm.text.length}/200`}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item-child mg-big pd-lg fill-base radius-34">
|
|
<view class="f-title c-title text-bold">上传图片</view>
|
|
<view class="mt-sm">
|
|
<upload @del="imgUpload" @upload="imgUpload" :imagelist="subForm.imgs" imgtype="imgs" text="添加照片"
|
|
:imgsize="5"></upload>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="space-max-footer"></view>
|
|
|
|
<view class="refund-bottom-info fill-base fix pl-lg pr-lg">
|
|
<view class="flex-between">
|
|
<view @tap="selectAllItem" class="flex-y-center"><i class="iconfont mr-sm"
|
|
:class="[{'icon-xuanze':!selectAll},{'icon-xuanze-fill':selectAll}]"
|
|
:style="{color:selectAll?primaryColor : ''}"></i>
|
|
全选
|
|
</view>
|
|
<view class="text-right flex-center">
|
|
<view class="flex-y-center">
|
|
<view class="f-caption c-caption mr-sm">共{{total_refund_num}}件</view>
|
|
退款金额<view class="flex-y-baseline f-caption c-warning">¥<view class="f-title text-bold">
|
|
{{total_refund_price}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view @tap.stop="toSubmit" class="common-btn flex-center ml-lg f-paragraph c-base radius"
|
|
:style="{background:primaryColor}">提交申请</view>
|
|
</view>
|
|
</view>
|
|
<view class="space-safe"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapMutations
|
|
} from "vuex"
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
options: {},
|
|
detail: {},
|
|
statusType: {
|
|
'-1': '已取消',
|
|
1: '待支付',
|
|
2: '待发货',
|
|
3: '待收货',
|
|
7: '已完成',
|
|
},
|
|
total_refund_num: 0,
|
|
total_refund_integral: 0,
|
|
total_refund_price: 0,
|
|
selectAll: false,
|
|
selectAdd: false,
|
|
subForm: {
|
|
text: '',
|
|
imgs: []
|
|
},
|
|
lockTap: false
|
|
}
|
|
},
|
|
computed: mapState({
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
subColor: state => state.config.configInfo.subColor,
|
|
configInfo: state => state.config.configInfo,
|
|
}),
|
|
onLoad(options) {
|
|
this.options = options
|
|
this.initIndex()
|
|
},
|
|
onUnload() {
|
|
this.$util.back()
|
|
},
|
|
methods: {
|
|
...mapMutations(['updateOrderItem']),
|
|
async initIndex() {
|
|
let {
|
|
id
|
|
} = this.options
|
|
let data = await this.$api.shop.orderInfo({
|
|
id
|
|
})
|
|
let arr = []
|
|
let can_refund_price = 0
|
|
data.order_goods.map(item => {
|
|
item.apply_num = item.can_refund_num
|
|
if (item.apply_num == 0) return
|
|
can_refund_price += item.singe_pay_price * item.apply_num
|
|
arr.push(item)
|
|
})
|
|
data.can_refund_price = can_refund_price.toFixed(2)
|
|
data.order_goods = arr
|
|
this.detail = data
|
|
},
|
|
initRefresh() {
|
|
this.initIndex()
|
|
},
|
|
imgUpload(e) {
|
|
let {
|
|
imagelist,
|
|
imgtype
|
|
} = e;
|
|
this.subForm[imgtype] = imagelist;
|
|
},
|
|
handerRadioChange(index) {
|
|
let item = this.detail.order_goods[index];
|
|
let newChecked = !item.checked;
|
|
this.detail.order_goods[index].checked = newChecked;
|
|
this.checkIsSelectAll();
|
|
},
|
|
handerAddRadioChange() {
|
|
this.selectAdd = !this.selectAdd
|
|
this.checkIsSelectAll()
|
|
},
|
|
async changeNum(index, mod) {
|
|
let item = this.detail.order_goods[index];
|
|
let num = item.apply_num + mod;
|
|
if (num < 1) {
|
|
this.$util.showToast({
|
|
title: `此商品最少可退1件`
|
|
})
|
|
return;
|
|
}
|
|
if (num > item.can_refund_num) {
|
|
this.$util.showToast({
|
|
title: `此商品最多可退${item.can_refund_num}件`
|
|
})
|
|
return;
|
|
}
|
|
this.detail.order_goods[index].apply_num = num;
|
|
this.countPrice();
|
|
},
|
|
selectAllItem() {
|
|
this.detail.order_goods.map((item) => {
|
|
item.checked = !this.selectAll
|
|
})
|
|
this.checkIsSelectAll();
|
|
},
|
|
checkIsSelectAll() {
|
|
let list = []
|
|
this.detail.order_goods.map(item => {
|
|
list.push(item)
|
|
})
|
|
this.selectAll = list.every((item) => {
|
|
return item.checked
|
|
})
|
|
this.countPrice();
|
|
},
|
|
countPrice() {
|
|
let price = 0
|
|
let num = 0
|
|
let integral = 0
|
|
let list = []
|
|
this.detail.order_goods.map(item => {
|
|
list.push(item)
|
|
})
|
|
list.map(item => {
|
|
if (item.checked) {
|
|
num += item.apply_num
|
|
integral += item.integral * item.apply_num
|
|
price += item.singe_pay_price * item.apply_num
|
|
}
|
|
})
|
|
let {
|
|
freight,
|
|
pay_type,
|
|
all_goods_num
|
|
} = this.detail
|
|
let freight_price = all_goods_num == num && pay_type == 2 ? freight * 1 : 0
|
|
this.total_refund_num = num
|
|
this.total_refund_integral = integral
|
|
this.total_refund_price = price.toFixed(2) * 1 + freight_price
|
|
},
|
|
// 提交申请
|
|
async toSubmit() {
|
|
let {
|
|
id: order_id,
|
|
order_goods
|
|
} = this.detail
|
|
let list = []
|
|
order_goods.filter(item => {
|
|
if (item.checked) {
|
|
list.push({
|
|
id: item.id,
|
|
num: item.apply_num
|
|
})
|
|
}
|
|
})
|
|
if (list.length < 1) {
|
|
this.$util.showToast({
|
|
title: `请选择商品`,
|
|
});
|
|
return
|
|
}
|
|
let param = this.$util.deepCopy(this.subForm)
|
|
if (!param.text) {
|
|
this.$util.showToast({
|
|
title: `请输入退款原因`,
|
|
});
|
|
return
|
|
}
|
|
param.imgs = param.imgs.length > 0 ? param.imgs.map(item => {
|
|
return item.path
|
|
}) : []
|
|
param = Object.assign({}, param, {
|
|
order_id,
|
|
list
|
|
})
|
|
|
|
if (this.lockTap) return
|
|
this.lockTap = true
|
|
this.$util.showLoading()
|
|
try {
|
|
await this.$api.shop.applyOrder(param)
|
|
this.$util.hideAll()
|
|
this.$util.showToast({
|
|
title: `提交成功`,
|
|
});
|
|
this.updateOrderItem({
|
|
key: 'haveOperItem',
|
|
val: true
|
|
})
|
|
setTimeout(() => {
|
|
this.$util.back()
|
|
this.$util.goUrl({
|
|
url: 1,
|
|
openType: `navigateBack`
|
|
})
|
|
this.lockTap = false
|
|
}, 1000)
|
|
} catch (e) {
|
|
setTimeout(() => {
|
|
this.lockTap = false
|
|
this.$util.hideAll()
|
|
}, 2000)
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
.user-order-refund {
|
|
|
|
|
|
.item-child {
|
|
|
|
.icon-xuanze,
|
|
.icon-xuanze-fill {
|
|
font-size: 38rpx;
|
|
height: 130rpx;
|
|
}
|
|
|
|
.goods-img {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
}
|
|
|
|
.ellipsis {
|
|
max-width: 412rpx;
|
|
}
|
|
|
|
.goods-spe {
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
background: #F7F7F7;
|
|
}
|
|
|
|
.goods-num {
|
|
width: 200rpx;
|
|
}
|
|
|
|
|
|
.textarea-info {
|
|
background: #F7F7F7;
|
|
|
|
.input-textarea {
|
|
width: 570rpx;
|
|
height: 300rpx;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.refund-bottom-info {
|
|
bottom: 0;
|
|
min-height: 110rpx;
|
|
|
|
.iconfont {
|
|
font-size: 38rpx;
|
|
}
|
|
|
|
.text-right {
|
|
height: 110rpx;
|
|
|
|
.order {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|