daoji_h5/user/pages/order/refund.vue

437 lines
12 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>