1
This commit is contained in:
228
src/components/petOrder/add-service-pay-modal.vue
Normal file
228
src/components/petOrder/add-service-pay-modal.vue
Normal file
@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<select-modal @close="closeAction" title="调整服务费">
|
||||
<view class="add-pay-container">
|
||||
<view class="top-container">
|
||||
<detail-cell v-if="weightName" title="下单宠物重量区间" :content="weightName"/>
|
||||
<detail-cell title="已支付费用" :content="`¥${price}`"/>
|
||||
<!-- <detail-cell v-if="orderInfo.dikou_id" title="优惠券" :content="`-¥${diKouPrice}`"/>-->
|
||||
<!-- <detail-cell v-if="orderInfo.fuwuquan_id" title="服务券金额" :content="`¥${servicePrice}`"/>-->
|
||||
<view class="top-cell" @click.stop="selectedWeight">
|
||||
<view class="info-view">
|
||||
<text class="app-fc-main fs-30">实际宠物重量区间</text>
|
||||
<text class="app-fc-main fs-30 app-font-bold-500">{{ realWeightName }}</text>
|
||||
</view>
|
||||
<image class="right-arrow" mode="aspectFit" src="/static/images/arrow_right_black.png"/>
|
||||
</view>
|
||||
<view class="top-cell">
|
||||
<view class="info-view">
|
||||
<text v-if="needRefund" class="app-fc-main fs-30">差价退款金额</text>
|
||||
<text v-else class="app-fc-main fs-30">差价补偿金额</text>
|
||||
</view>
|
||||
<text class="fs-30 app-fc-alarm app-font-bold-500">{{needRefund ? '-' : ''}}{{ `¥${diffPrice}` }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line-view"/>
|
||||
<view class="bottom-container">
|
||||
<view class="price-container">
|
||||
<view class="price-view">
|
||||
<text class="app-fc-main fs-30 app-font-bold-500">￥</text>
|
||||
<text class="app-fc-main fs-40 app-font-bold-700">{{ diffPrice }}</text>
|
||||
</view>
|
||||
<text class="fs-24 app-fc-normal">差价补退</text>
|
||||
</view>
|
||||
<view class="submit-btn" @click.stop="paymentConfirm">
|
||||
<text v-if="needRefund" class="app-fc-white fs-30">提交</text>
|
||||
<text v-else class="app-fc-white fs-30">确认支付</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</select-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectModal from "@/components/select-modal.vue";
|
||||
import DetailCell from "@/components/petOrder/detail-cell.vue";
|
||||
|
||||
export default {
|
||||
components: { DetailCell, SelectModal },
|
||||
props: {
|
||||
orderInfo: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
newWeight: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
price() {
|
||||
return this.orderInfo.price || '';
|
||||
},
|
||||
diKouPrice() {
|
||||
return this.orderInfo.dikou_price || '';
|
||||
},
|
||||
servicePrice() {
|
||||
return +this.orderInfo.fuwuquan_price || 0;
|
||||
},
|
||||
weightName() {
|
||||
return this.orderInfo.new_weight_name || this.orderInfo?.weight_name || '';
|
||||
},
|
||||
realWeightName() {
|
||||
return this.newWeight?.weight_name || '请选择';
|
||||
},
|
||||
diffPrice() {
|
||||
if (Object.keys(this.newWeight).length > 0) {
|
||||
const newPrice = Number(this.newWeight?.price || 0);
|
||||
const orderPrice = Number(this.orderInfo?.price || 0);
|
||||
const payPrice = Number(this.orderInfo?.pay_price || 0);
|
||||
let d = Math.abs(newPrice - orderPrice);
|
||||
if (d === 0) {
|
||||
return '0'
|
||||
} else if (newPrice > orderPrice) {
|
||||
//需要补交钱
|
||||
return d.toFixed(2);
|
||||
} else {
|
||||
//退款
|
||||
if (this.orderInfo.fuwuquan_id) {
|
||||
//使用服务券
|
||||
if ((orderPrice - newPrice) >= this.servicePrice) {
|
||||
return this.servicePrice.toFixed(2);
|
||||
} else {
|
||||
return d.toFixed(2);
|
||||
}
|
||||
} else {
|
||||
if ((orderPrice - newPrice) >= payPrice) {
|
||||
return payPrice.toFixed(2);
|
||||
} else {
|
||||
return d.toFixed(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return '0';
|
||||
},
|
||||
needRefund() {
|
||||
const newPrice = Number(this.newWeight?.price || 0);
|
||||
const orderPrice = Number(this.orderInfo?.price || 0);
|
||||
return orderPrice > newPrice;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
selectedWeight() {
|
||||
this.$emit('changeWeight')
|
||||
},
|
||||
closeAction() {
|
||||
this.$emit('close');
|
||||
},
|
||||
paymentConfirm() {
|
||||
// console.log(this.orderInfo,'--')
|
||||
if (Object.keys(this.newWeight).length === 0) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请选择实际宠物重量区间'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$emit('paymentConfirm', {
|
||||
needRefund: this.needRefund,
|
||||
diffPrice:this.diffPrice,
|
||||
order_id:this.orderInfo.order_id
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.add-pay-container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.top-container {
|
||||
width: 100%;
|
||||
padding: 30rpx 40rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.top-cell {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 40rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 30rpx;
|
||||
background-color: #F9F7F9;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 12rpx;
|
||||
|
||||
.info-view {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.right-arrow {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line-view {
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background-color: #ECECEC;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
width: 100%;
|
||||
padding: 20rpx 32rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.price-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.price-view {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
flex-shrink: 0;
|
||||
width: 260rpx;
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 45rpx;
|
||||
background-color: $app_color_main;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user