184 lines
6.3 KiB
Vue
184 lines
6.3 KiB
Vue
<template>
|
||
<!-- 报价/客户支付模态框 -->
|
||
<view class="cu-modal" :class="show?'show':''">
|
||
<view class="cu-dialog">
|
||
<view class="cu-bar bg-white justify-end solid-bottom">
|
||
<view class="content">上门报价与加单</view>
|
||
<view class="action" data-modal="showNewServPriceOnlineModal" @click="hideModal">
|
||
<text class="cuIcon-close text-red"></text>
|
||
</view>
|
||
</view>
|
||
<view class="padding padding-lr-xl bg-white text-left">
|
||
<view class="text-lg">上门后新增的报价</view>
|
||
<radio-group class="padding-tb-sm">
|
||
<view class="padding-tb-sm" @click="changePayAction(0)">
|
||
<radio style="transform:scale(0.7)" class="main-color" :checked="payAction === 0"></radio>
|
||
<text class="margin-left">无报价，直接拍照完单</text>
|
||
</view>
|
||
<view class="padding-tb-sm flex justify-start align-start" @click="changePayAction(1)">
|
||
<radio style="transform:scale(0.7)" class="main-color" :checked="payAction === 1"></radio>
|
||
<view class="margin-left">
|
||
<view>上门有加单，请客户支付</view>
|
||
<view class="flex justify-start margin-top-sm align-center">
|
||
<text>加单总额：</text>
|
||
<input class="radius-input inline-input" type="digit" v-model="newPriceForA1"></input>
|
||
<text class="margin-left-xs">元</text>
|
||
<view class="cu-btn line-main-color sm margin-left" v-if="priceObj && priceObj.type == 1"
|
||
@click="changeOrderPrice(newPriceForA1)">修改报价</view>
|
||
<view class="cu-btn line-main-color sm margin-left" v-else
|
||
@click="changeOrderPrice(newPriceForA1)">确认报价</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="padding-tb-sm flex justify-start align-start" @click="changePayAction(2)">
|
||
<radio style="transform:scale(0.7)" class="main-color" :checked="payAction === 2"></radio>
|
||
<view class="margin-left">
|
||
<view>上门报价类，给下单方报价</view>
|
||
<view class="flex justify-start margin-top-sm align-center">
|
||
<text>报价总额：</text>
|
||
<input class="radius-input inline-input" type="digit" v-model="newPriceForA2"></input>
|
||
<text class="margin-left-xs">元</text>
|
||
<view class="cu-btn line-main-color sm margin-left" v-if="priceObj && priceObj.type == 2"
|
||
@click="changeOrderPrice(newPriceForA2)">修改报价</view>
|
||
<view class="cu-btn line-main-color sm margin-left" v-else
|
||
@click="changeOrderPrice(newPriceForA2)">确认报价</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</radio-group>
|
||
<view class="margin-top-sm">
|
||
<textarea style="width: 100%; height: 200rpx;" class="solid radius text-left padding-sm"
|
||
v-model="remark" maxlength="-1"
|
||
placeholder="报价额需符合双方约定，并把关键内容附上。如保内维修XX含配件XXX等，分别XX元。如约定下单方寄配件，则订单内“申请配件发起”。"></textarea>
|
||
</view>
|
||
</view>
|
||
<view class="cu-bar bg-white solid-top">
|
||
<view class="action margin-0 flex-sub text-black" data-modal="showNewServPriceOnlineModal"
|
||
@click="hideModal">退出/再次上门</view>
|
||
<view class="action margin-0 flex-sub text-main-color solid-left" v-if="(priceObj && priceObj.payStatus === 0) || data.payStatus === 0"
|
||
data-modal="showPayQrcodeModal" @tap="makePayQrcode($event)">请客户支付</view>
|
||
<view class="action margin-0 flex-sub text-main-color solid-left"
|
||
data-modal="showNewServPriceOnlineModal" @tap="hideModal" @click="goFinishOrder" v-else>去完单</view>
|
||
</view>
|
||
</view>
|
||
<pay-qrcode ref="payQrcode" :show="showPayQrcodeModal" :data="data" @finishQrPay="finishQrPay"></pay-qrcode>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import payQrcode from '@/pages/order-manage/modal/pay-qrcode.vue';
|
||
|
||
export default {
|
||
nama: 'new-serv-price',
|
||
components: {
|
||
payQrcode
|
||
},
|
||
props: {
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
data: {
|
||
type: Object,
|
||
default: {}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
priceObj: null,
|
||
payAction: 0,
|
||
newPriceForA2: null,
|
||
newPriceForA1: null,
|
||
newPrice: null,
|
||
showPayQrcodeModal: false,
|
||
remark: ""
|
||
}
|
||
},
|
||
methods: {
|
||
init(priceObj) {
|
||
if (!priceObj || priceObj.payStatus == 1) {
|
||
return;
|
||
}
|
||
this.priceObj = priceObj;
|
||
if (priceObj && priceObj.type) {
|
||
this.remark = priceObj.remark;
|
||
this.payAction = priceObj.type;
|
||
let money = priceObj.changeMoney;
|
||
if (this.payAction === 1) {
|
||
this.newPriceForA1 = money;
|
||
} else if (this.payAction === 2) {
|
||
this.newPriceForA2 = money;
|
||
}
|
||
}
|
||
},
|
||
resetData() {
|
||
this.payAction = 0;
|
||
this.newPrice = null;
|
||
this.newPriceForA2 = null;
|
||
this.newPriceForA1 = null;
|
||
this.priceObj = null;
|
||
this.remark = "";
|
||
},
|
||
hideModal(e) {
|
||
this.resetData();
|
||
uni.$emit(this.$globalFun.HIDE_MODAL, e);
|
||
},
|
||
async resetPriceChangedInfo() {
|
||
let res = await this.$request.getChangeOrderPrice(this.data);
|
||
if (res && res.code === 0) {
|
||
this.resetData();
|
||
this.init(res.data);
|
||
}
|
||
},
|
||
changePayAction(payAction) {
|
||
this.payAction = payAction;
|
||
},
|
||
async changeOrderPrice(newPrice) {
|
||
if (this.payAction != this.priceObj.type) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '你有加价未付款，请客户支付后再加或在原加价上增加金额！',
|
||
duration: 4500
|
||
})
|
||
return;
|
||
}
|
||
|
||
let res = await this.$request.changeOrderPrice({
|
||
orderDetailId: this.data.orderDetailId,
|
||
changeMoney: newPrice,
|
||
type: this.payAction,
|
||
remark: this.remark
|
||
});
|
||
if (res && res.code === 0) {
|
||
this.resetPriceChangedInfo();
|
||
uni.showToast({
|
||
icon: 'success',
|
||
title: '修改成功',
|
||
duration: 1000
|
||
})
|
||
}
|
||
},
|
||
async makePayQrcode(e) {
|
||
let res = await this.$request.priceAddedQrPay(this.data);
|
||
if (res && res.code === 0) {
|
||
this.showPayQrcodeModal = true;
|
||
this.$refs.payQrcode.showQrcode(res.data.expend.qrcode_url);
|
||
}
|
||
},
|
||
finishQrPay(e) {
|
||
this.showPayQrcodeModal = false;
|
||
this.resetPriceChangedInfo();
|
||
},
|
||
goFinishOrder() {
|
||
this.$emit('finishOrder', this.data);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.inline-input {
|
||
flex-basis: 25%;
|
||
}
|
||
</style>
|