437 lines
12 KiB
Vue
437 lines
12 KiB
Vue
<template>
|
||
<view class="user-order-refund" v-if="detail.id">
|
||
<view class="item-child mt-md ml-lg mr-lg pd-lg fill-base radius-16">
|
||
<view class="flex-between pb-lg b-1px-b">
|
||
<view class="f-paragraph c-title max-380 ellipsis">订单号：{{detail.order_code}}</view>
|
||
<view class="f-caption text-bold"
|
||
:style="{color:detail.pay_type==2?primaryColor: detail.pay_type<6?subColor: detail.pay_type == 6 ? '#11C95E' : '#333'}">
|
||
{{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-center mt-lg"
|
||
v-if="item.can_refund_num > 0">
|
||
<i class="iconfont mr-md" :class="[{'icon-xuanze':!item.checked},{'icon-xuanze-fill':item.checked}]"
|
||
:style="{color:item.checked ? primaryColor : ''}"></i>
|
||
<view class="flex-1">
|
||
<view class="flex-warp">
|
||
<!-- #ifdef H5 -->
|
||
<view class="goods-img radius-16">
|
||
<view class="h5-image goods-img radius-16"
|
||
:style="{ backgroundImage : `url('${item.goods_cover}')`}">
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifndef H5 -->
|
||
<image mode="aspectFill" class="goods-img radius-16" :src="item.goods_cover"></image>
|
||
<!-- #endif -->
|
||
|
||
<view class="flex-1 ml-md max-380">
|
||
<view class="f-title c-title text-bold max-450 ellipsis">{{item.goods_name}}</view>
|
||
<view class="f-caption c-caption">
|
||
服务{{$t('action.attendantName')}}：{{detail.coach_info ? detail.coach_info.coach_name : '-'}}
|
||
</view>
|
||
<view class="f-caption c-caption">{{detail.start_time}}</view>
|
||
<view class="f-caption c-caption" v-if="item.material_price*1>0">
|
||
物料费：¥{{item.material_price}}
|
||
</view>
|
||
<view class="flex-between">
|
||
<view class="flex-y-baseline f-caption c-warning">¥<view class="f-title text-bold">
|
||
{{item.true_price}}
|
||
</view>
|
||
</view>
|
||
<view class="flex-warp" v-if="item.can_refund_num > 1">
|
||
<button @tap.stop="changeNum(index,-1)" class="reduce"
|
||
:style="{borderColor:primaryColor,color:primaryColor}"><i
|
||
class="iconfont icon-jian-bold"></i></button>
|
||
<button class="addreduce clear-btn">{{item.apply_num}}</button>
|
||
<button @tap.stop="changeNum(index,1)" class="add"
|
||
:style="{background:primaryColor,borderColor:primaryColor}"><i
|
||
class="iconfont icon-jia-bold"></i></button>
|
||
</view>
|
||
<view class="c-paragraph" v-else>x{{item.apply_num}}</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view class="mt-lg pt-lg pb-lg f-paragraph c-title b-1px-t"
|
||
v-if="detail.can_refund_material_price || (detail.can_refund_car_price && detail.car_price*1>0)">
|
||
<view class="flex-between">
|
||
<view>服务金额</view>
|
||
<view>¥{{detail.can_refund_price}}</view>
|
||
</view>
|
||
<view class="flex-between mt-sm" v-if="detail.can_refund_material_price">
|
||
<view>物料费</view>
|
||
<view>¥{{detail.can_refund_material_price}}</view>
|
||
</view>
|
||
<view class="flex-between mt-sm" v-if="detail.can_refund_car_price && detail.car_price*1>0">
|
||
<view class="flex-y-baseline">车费<view class="f-icontext c-warning ml-sm">
|
||
{{$t('action.attendantName')}}出发前全部服务退款将退还
|
||
</view>
|
||
</view>
|
||
<view>¥{{detail.car_price}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="pt-lg f-paragraph c-title flex-between b-1px-t">
|
||
<view>合计</view>
|
||
<view class="f-title c-warning text-bold">
|
||
{{`${can_refund_price}元`}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="item-child mt-md ml-lg mr-lg pd-lg fill-base radius-16">
|
||
<view class="flex-between pb-lg f-title c-title text-bold">退款原因</view>
|
||
<view class="textarea-info f-caption c-caption radius-16">
|
||
<textarea v-model="form.text" class="input-textarea f-paragraph pd-lg" placeholder-class="f-paragraph"
|
||
maxlength="300" placeholder="输入退款原因" />
|
||
<view class="text-right pb-lg pr-lg">{{form.text.length>300?300:form.text.length}}/300</view>
|
||
</view>
|
||
</view>
|
||
<view class="item-child mt-md ml-lg mr-lg pt-lg pl-lg pr-lg fill-base radius-16">
|
||
<view class="flex-between pb-sm f-title c-title text-bold">上传图片</view>
|
||
<view class="flex-between pt-sm">
|
||
<upload @del="imgDel" @upload="imgUpload" :imagelist="form.imgs" imgtype="imgs" imgclass="mini"
|
||
text="添加照片" :imgsize="5"></upload>
|
||
</view>
|
||
<view class="space-lg" v-if="form.imgs.length == 0"></view>
|
||
<view class="space-sm" v-else></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>
|
||
<button @tap.stop="toSubmit" class="clear-btn order"
|
||
:style="{color:'#fff',background:primaryColor,borderColor:primaryColor}">提交申请</button>
|
||
</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: this.$t('action.attendantName') + '接单',
|
||
4: this.$t('action.attendantName') + '出发',
|
||
5: this.$t('action.attendantName') + '到达',
|
||
6: '服务中',
|
||
7: '已完成',
|
||
8: '已评价',
|
||
},
|
||
total_refund_num: 0,
|
||
total_refund_price: 0,
|
||
can_refund_num: 0,
|
||
can_refund_price: 0,
|
||
selectAll: false,
|
||
selectAdd: false,
|
||
form: {
|
||
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()
|
||
},
|
||
methods: {
|
||
...mapMutations(['updateUserItem']),
|
||
async initIndex(refresh = false) {
|
||
// #ifdef H5
|
||
if (!refresh && this.$jweixin.isWechat()) {
|
||
await this.$jweixin.initJssdk();
|
||
this.$jweixin.wxReady(() => {
|
||
this.$jweixin.hideOptionMenu()
|
||
})
|
||
}
|
||
// #endif
|
||
let {
|
||
id
|
||
} = this.options
|
||
let data = await this.$api.order.orderInfo({
|
||
id
|
||
})
|
||
this.$util.setNavigationBarColor({
|
||
bg: this.primaryColor
|
||
})
|
||
|
||
let {
|
||
car_price,
|
||
can_refund_car_price = 0
|
||
} = data
|
||
|
||
let num = 0
|
||
let can_refund_price = 0
|
||
let can_refund_material_price = 0
|
||
data.order_goods.map(item => {
|
||
num += item.can_refund_num
|
||
item.apply_num = item.can_refund_num
|
||
item.checked = item.can_refund_num < 1
|
||
if (item.apply_num > 0) {
|
||
can_refund_price += item.true_price * item.apply_num
|
||
can_refund_material_price += item.material_price * item.apply_num
|
||
}
|
||
})
|
||
let total_price = (can_refund_price * 1).toFixed(2)
|
||
let material_price = (can_refund_material_price * 1).toFixed(2)
|
||
data.can_refund_price = total_price
|
||
data.can_refund_material_price = material_price
|
||
this.detail = data
|
||
this.can_refund_num = num
|
||
let car_total_price = can_refund_car_price ? car_price : 0
|
||
this.can_refund_price = (total_price * 1 + material_price * 1 + car_total_price * 1).toFixed(2)
|
||
},
|
||
initRefresh() {
|
||
this.initIndex(true)
|
||
},
|
||
imgDel(e) {
|
||
let {
|
||
imagelist,
|
||
imgtype
|
||
} = e;
|
||
this.form[imgtype] = imagelist;
|
||
},
|
||
imgUpload(e) {
|
||
let {
|
||
imagelist,
|
||
imgtype
|
||
} = e;
|
||
this.form[imgtype] = imagelist;
|
||
},
|
||
handerRadioChange(index) {
|
||
let item = this.detail.order_goods[index];
|
||
if (item.can_refund_num < 1) return
|
||
let newChecked = !item.checked;
|
||
this.detail.order_goods[index].checked = newChecked;
|
||
this.checkIsSelectAll();
|
||
},
|
||
handerAddRadioChange() {
|
||
let {
|
||
add_price
|
||
} = this.detail
|
||
if (!add_price * 1) return
|
||
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) => {
|
||
if (item.can_refund_num < 1) return
|
||
item.checked = !this.selectAll
|
||
})
|
||
this.checkIsSelectAll();
|
||
},
|
||
checkIsSelectAll() {
|
||
let list = []
|
||
this.detail.order_goods.map(item => {
|
||
if (item.can_refund_num < 1) return
|
||
list.push(item)
|
||
})
|
||
this.selectAll = list.every((item) => {
|
||
return item.checked
|
||
})
|
||
this.countPrice();
|
||
},
|
||
countPrice() {
|
||
let {
|
||
can_refund_num
|
||
} = this
|
||
let {
|
||
car_price,
|
||
can_refund_car_price = 0
|
||
} = this.detail
|
||
let price = 0
|
||
let num = 0
|
||
let list = []
|
||
this.detail.order_goods.forEach(item => {
|
||
if (item.can_refund_num < 1) return
|
||
list.push(item)
|
||
})
|
||
list.forEach((item, index) => {
|
||
if (item.checked) {
|
||
price += parseFloat(item.true_price * 1 + item.material_price * 1) * item.apply_num;
|
||
num += item.apply_num
|
||
}
|
||
})
|
||
let total_price = price.toFixed(2) * 1
|
||
this.total_refund_num = num
|
||
this.total_refund_price = can_refund_car_price && can_refund_num == num ? (total_price +
|
||
car_price * 1).toFixed(2) : total_price
|
||
},
|
||
// 提交申请
|
||
async toSubmit() {
|
||
let {
|
||
id: order_id,
|
||
order_goods,
|
||
} = this.detail
|
||
let list = []
|
||
order_goods.filter(item => {
|
||
if (item.checked) {
|
||
if (item.apply_num < 1) return
|
||
list.push({
|
||
id: item.id,
|
||
num: item.apply_num
|
||
})
|
||
}
|
||
})
|
||
if (list.length < 1) {
|
||
this.$util.showToast({
|
||
title: `请选择商品`,
|
||
});
|
||
return
|
||
}
|
||
let param = this.$util.deepCopy(this.form)
|
||
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.order.applyOrder(param)
|
||
this.$util.hideAll()
|
||
this.$util.showToast({
|
||
title: `提交成功`,
|
||
});
|
||
this.lockTap = false
|
||
setTimeout(() => {
|
||
this.$util.back()
|
||
this.$util.goUrl({
|
||
url: 1,
|
||
openType: `navigateBack`
|
||
})
|
||
}, 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;
|
||
}
|
||
|
||
.goods-img {
|
||
width: 172rpx;
|
||
height: 172rpx;
|
||
}
|
||
|
||
.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;
|
||
|
||
.iconfont {
|
||
font-size: 38rpx;
|
||
}
|
||
|
||
.text-right {
|
||
height: 110rpx;
|
||
|
||
.order {
|
||
margin-top: 0;
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |