first
This commit is contained in:
254
pagesOrder/tuikuan/tuikuan.vue
Normal file
254
pagesOrder/tuikuan/tuikuan.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<view class="min-page bg-gray u-p-30">
|
||||
<view class="bg-fff u-p-24 border-r-12 u-flex u-row-between">
|
||||
<view>全退</view>
|
||||
<view>
|
||||
<my-radio v-model="allTui" :disabled="option.productId=='-999'"></my-radio>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-24 u-font-24 u-font-24">
|
||||
<text class="color-red">*</text>
|
||||
<text>客座费只能全退</text>
|
||||
</view>
|
||||
<view class="bg-fff border-r-12 list u-m-t-32">
|
||||
<view class="u-flex u-row-between border-top item u-p-t-32 u-p-b-32"
|
||||
v-for="(item,index) in orderDetail.goodsList" :key="index">
|
||||
<view>
|
||||
<view>{{item.productName}}</view>
|
||||
<view class="u-m-t-10 color-999 u-font-24">{{item.productSkuName||""}}</view>
|
||||
<view class="u-m-t-10 color-999 u-font-24">最多可退×{{item.num}}</view>
|
||||
</view>
|
||||
<template v-if="option.productId=='-999'">
|
||||
<view class="u-flex">
|
||||
<view class="color-red" >￥{{item.priceAmount}}</view>
|
||||
<view class="u-flex u-m-l-32 u-col-center">
|
||||
<view class="u-m-l-28 u-m-r-28">x{{item.number}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="u-flex">
|
||||
<view class="color-red" v-if="!option.userCouponId">￥{{item.priceAmount}}</view>
|
||||
<view class="u-flex u-m-l-32 u-col-center">
|
||||
<up-icon @click="changeItem(item,-1)" :size="20" name="minus-circle"></up-icon>
|
||||
<view class="u-m-l-28 u-m-r-28">{{item.number}}</view>
|
||||
<up-icon @click="changeItem(item,1)" :color="color.ColorMain" :size="20"
|
||||
name="plus-circle-fill"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="!option.userCouponId">
|
||||
<view class="bg-fff u-m-t-32 u-p-24 border-r-12 u-flex u-row-between" >
|
||||
<view>支付金额</view>
|
||||
<view>
|
||||
{{to2(totalPrice)}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-fff u-m-t-32 u-p-24 border-r-12 u-flex u-row-between" >
|
||||
<view>退款金额</view>
|
||||
<view class="color-red">
|
||||
{{to2(tuikuanPrice)}}元
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="bg-fff u-p-24 border-r-12 u-m-t-32">
|
||||
<view>退回优惠券</view>
|
||||
<view class="u-font-24 color-999 u-m-t-16" v-if="!option.userCouponId">
|
||||
该订单未使用优惠券
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-fff u-p-24 border-r-12 u-m-t-32">
|
||||
<view>
|
||||
<text class="color-red">*</text>
|
||||
<text>退款原因</text>
|
||||
</view>
|
||||
<view class="u-m-t-24 u-flex u-flex-wrap gap-28">
|
||||
<view class="tag" @click="changeTuiKuanSel(index)" :class="{active:index==tuikuan.sel}"
|
||||
v-for="(item,index) in tuikuan.list" :key="index">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-24">
|
||||
<up-textarea placeholder="选填" v-model="note"></up-textarea>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 200rpx;"></view>
|
||||
<view class="fixed-b">
|
||||
<up-button text="确认退款" @click="tuikuanConfirm" shape="circle" type="primary" size="large"
|
||||
:color="color.ColorMain"></up-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import color from '@/commons/color.js';
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
import * as orderApi from '@/http/yskApi/order.js'
|
||||
import {hasPermission} from '@/commons/utils/hasPermission.js'
|
||||
import {
|
||||
$returnOrder
|
||||
} from '@/http/yskApi/Instead.js'
|
||||
import {
|
||||
onLoad,
|
||||
onShow,
|
||||
onHide
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
let allTui = ref(false)
|
||||
let note = ref('')
|
||||
const tuikuan = reactive({
|
||||
list: ['点错', '数量点错', '客人要求', '协商退费'],
|
||||
sel: -1
|
||||
})
|
||||
|
||||
function changeTuiKuanSel(i) {
|
||||
tuikuan.sel = i
|
||||
}
|
||||
const orderDetail = reactive({
|
||||
goodsList: [],
|
||||
info: {},
|
||||
seatFee: {
|
||||
totalAmount: 0
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => allTui.value, (newval) => {
|
||||
orderDetail.goodsList.map(v => {
|
||||
v.number = newval ? v.num : 0
|
||||
})
|
||||
})
|
||||
|
||||
const totalNumber = computed(() => {
|
||||
return orderDetail.goodsList.reduce((prve, cur) => {
|
||||
return prve + cur.num * 1
|
||||
}, 0)
|
||||
})
|
||||
const tuikuanNumber = computed(() => {
|
||||
return orderDetail.goodsList.reduce((prve, cur) => {
|
||||
return prve + cur.number * 1
|
||||
}, 0)
|
||||
})
|
||||
|
||||
const totalPrice = computed(() => {
|
||||
return orderDetail.goodsList.reduce((prve, cur) => {
|
||||
return prve + cur.priceAmount * 1
|
||||
}, 0)
|
||||
})
|
||||
const tuikuanPrice = computed(() => {
|
||||
return orderDetail.goodsList.reduce((prve, cur) => {
|
||||
const n=(cur.number/cur.num*100) * cur.priceAmount
|
||||
return prve + (n/100).toFixed(2)
|
||||
}, 0)
|
||||
})
|
||||
|
||||
|
||||
function to2(n) {
|
||||
return Number(n).toFixed(2);
|
||||
}
|
||||
|
||||
function changeItem(item, step) {
|
||||
if(item.productId=='-999'){
|
||||
return
|
||||
}
|
||||
console.log(item);
|
||||
let newval = item.number * 1 + step * 1;
|
||||
if (newval <= 0) {
|
||||
newval = 0;
|
||||
}
|
||||
if (newval >= item.num) {
|
||||
newval = item.num;
|
||||
}
|
||||
item.number = newval;
|
||||
allTui.value = totalNumber.value == tuikuanNumber.value ? true : false;
|
||||
}
|
||||
|
||||
async function tuikuanConfirm() {
|
||||
const canTuikuan=await hasPermission('允许退款')
|
||||
if(!canTuikuan){
|
||||
return infoBox.showToast('您没有退款权限')
|
||||
}
|
||||
if (tuikuanNumber.value <= 0) {
|
||||
return infoBox.showToast('退款商品数量不能为0！')
|
||||
}
|
||||
const selTag=tuikuan.list[tuikuan.sel]
|
||||
const noteResult=`${selTag?selTag:''}${note.value?(','+note.value):''}`
|
||||
if (!noteResult) {
|
||||
return infoBox.showToast('请输入或选择退款原因！')
|
||||
}
|
||||
await $returnOrder({
|
||||
"orderId": option.orderId,
|
||||
"note":noteResult,
|
||||
"orderDetails":orderDetail.goodsList.filter(v=>v.number*1).map(v=>{
|
||||
return {
|
||||
id:v.id,
|
||||
num:v.number*1
|
||||
}
|
||||
})
|
||||
})
|
||||
infoBox.showToast('退款请求提交成功')
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack({delta:1})
|
||||
},500)
|
||||
}
|
||||
const option=reactive({
|
||||
productId:'-999'
|
||||
})
|
||||
onLoad((opt) => {
|
||||
Object.assign(option,opt)
|
||||
if(opt.productId=='-999'){
|
||||
allTui.value=true
|
||||
}
|
||||
if (Array.isArray(opt)) {
|
||||
orderDetail.goodsList = opt
|
||||
} else {
|
||||
orderDetail.goodsList = [opt]
|
||||
}
|
||||
console.log(opt);
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fixed-b {
|
||||
position: fixed;
|
||||
left: 110rpx;
|
||||
right: 110rpx;
|
||||
bottom: calc(env(safe-area-inset-bottom) + 32rpx);
|
||||
/* #ifdef H5 */
|
||||
bottom: 100rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.gap-28 {
|
||||
gap: 28rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.list .item:first-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 8rpx 16rpx 6rpx 16rpx;
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 4rpx;
|
||||
|
||||
&.active {
|
||||
border-color: #E6F0FF;
|
||||
color: $my-main-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user