467 lines
11 KiB
Vue
467 lines
11 KiB
Vue
<template>
|
||
<view class="bg-gray min-page u-p-30 u-font-28">
|
||
<view class="u-p-t-60 u-p-b-60 u-text-center">
|
||
<view class="u-font-32 ">
|
||
<text class="price-fuhao">￥</text>
|
||
<text class="font-bold price">{{discount.currentPrice?discount.currentPrice:order.amount}}</text>
|
||
</view>
|
||
<view class="u-m-t-10 color-999 old-price">
|
||
<text class="">￥</text>
|
||
<text class=" ">{{order.amount}}</text>
|
||
</view>
|
||
<view class="u-m-t-10 u-flex u-row-center color-main">
|
||
<view @click="discountShow">修改</view>
|
||
</view>
|
||
</view>
|
||
<view class="content bg-fff border-r-12">
|
||
<view class=" u-p-t-30 u-p-l-26 u-p-r-26 card top u-m-t-30">
|
||
<view class="u-flex u-p-l-24 u-p-r-24 border-bottom-dashed u-row-between u-p-b-30">
|
||
<view>优惠券</view>
|
||
<view class="color-999 u-flex u-col-center">
|
||
<text>选择优惠券</text>
|
||
<view class="u-flex u-col-center">
|
||
<uni-icons type="right" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-flex u-p-l-24 u-p-r-24 border-bottom u-row-between u-p-t-30 u-p-b-30"
|
||
v-if="discount.price&&discount.currentPrice!=order.amount">
|
||
<view>服务员改价</view>
|
||
<view class=" u-flex u-col-center">
|
||
<text style="color: rgb(255, 95, 46);">-￥{{to2(order.amount- discount.currentPrice)}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bg-fff border-r-12 ">
|
||
<view class="u-p-t-30 u-p-l-50 u-p-r-50 card bottom">
|
||
<my-tabs :list="pays.list" v-model="pays.selIndex"></my-tabs>
|
||
<template v-if="pays.selIndex==0">
|
||
<view class="list">
|
||
<view class="item" @click="changePayType(index,item)"
|
||
v-for="(item,index) in pays.payTypes.list" :key="index">
|
||
<view class="u-flex u-row-between u-p-t-30 u-p-b-30 border-bottom">
|
||
<view class="u-flex">
|
||
<image class="icon" :src="item.icon" mode=""></image>
|
||
<text class="u-m-l-10 no-wrap">{{item.payName}}</text>
|
||
</view>
|
||
<view class="u-flex color-999 u-font-24">
|
||
<view class="u-m-r-20" v-if="item.payType=='vipPay'">
|
||
<view>
|
||
<text>会员：</text>
|
||
<text class="u-m-r-4">{{user.telephone||user.nickName}}</text>
|
||
</view>
|
||
<view>
|
||
<text>余额：</text>
|
||
<text>￥{{user.amount||'0'}}</text>
|
||
</view>
|
||
</view>
|
||
<my-radio @click="changePayType(index,item)"
|
||
:modelValue="index==pays.payTypes.selIndex">
|
||
</my-radio>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-m-t-60 u-p-b-30">
|
||
<my-button @click="payOrderClick">确认付款</my-button>
|
||
</view>
|
||
</template>
|
||
<template v-if="pays.selIndex==1">
|
||
<view class="u-font-32 u-m-t-40 u-text-center">请让顾客使用微信/支付宝扫码</view>
|
||
<view class="u-flex u-row-center u-m-t-40">
|
||
<up-qrcode cid="code" :size="140" :val="payCodeUrl"></up-qrcode>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
<!-- 二维码支付扫码 -->
|
||
<template v-if="pays.selIndex==1">
|
||
<view class="card border-bottom top u-m-t-32">
|
||
|
||
</view>
|
||
<view class="bg-fff card bottom border-r-12 u-p-32">
|
||
<view class="font-bold u-font-32 u-text-center">
|
||
￥{{discount.currentPrice?discount.currentPrice: order.amount}}</view>
|
||
<view class="u-flex u-row-center u-m-t-24">
|
||
<template v-if="order.status=='unpaid'">
|
||
<up-loading-icon size="14" text="等待支付"></up-loading-icon>
|
||
</template>
|
||
<template v-if="order.status=='closed'">
|
||
<view class="u-flex pay-success">
|
||
<up-icon color="#5CBB6F" name="checkmark-circle-fill"></up-icon>
|
||
<view class="u-m-l-6">支付成功</view>
|
||
</view>
|
||
</template>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
|
||
|
||
<edit-discount @confirm="editDiscountConfirm" title="优惠金额" :ref="setModel" name="editMoney"
|
||
:price="order.amount"></edit-discount>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
reactive,
|
||
onMounted,
|
||
watch,
|
||
ref,
|
||
onBeforeUnmount
|
||
} from 'vue';
|
||
import {
|
||
onLoad,
|
||
onBackPress,onShow
|
||
} from '@dcloudio/uni-app'
|
||
import go from '@/commons/utils/go.js'
|
||
import * as Api from '@/http/yskApi/Instead.js'
|
||
import {
|
||
queryAllShopUser
|
||
} from '@/http/yskApi/shop-user.js'
|
||
import {hasPermission} from '@/commons/utils/hasPermission.js'
|
||
import * as orderApi from '@/http/yskApi/order.js'
|
||
import infoBox from '@/commons/utils/infoBox.js'
|
||
import editDiscount from '@/components/my-components/edit-discount.vue'
|
||
async function discountShow(){
|
||
const bol=await hasPermission('yun_xu_da_zhe')
|
||
if(bol){
|
||
showModel('editMoney',true)
|
||
}
|
||
}
|
||
let option = {isNowPay:false}
|
||
let payFinish=ref(false)
|
||
onBackPress(() => {
|
||
uni.$emit('orderDetail:update')
|
||
console.log('onBackPress');
|
||
// uni.$emit('update:createOrderIndex')
|
||
// if (option.isNowPay&&!payFinish.value) {
|
||
// infoBox.showToast('先付费模式，请先结算订单')
|
||
// return true
|
||
// }
|
||
// return false
|
||
})
|
||
let payStatus = ref(null) //loading success
|
||
|
||
let timer = null
|
||
|
||
let user = ref({
|
||
amount: 0
|
||
});
|
||
|
||
function clear() {
|
||
clearInterval(timer)
|
||
timer = null
|
||
}
|
||
|
||
function to2(n) {
|
||
if (!n) {
|
||
return ''
|
||
}
|
||
return n.toFixed(2)
|
||
}
|
||
const pays = reactive({
|
||
list: ['扫码收款', '二维码收款'],
|
||
selIndex: 0,
|
||
payTypes: {
|
||
list: [],
|
||
selIndex: 0
|
||
}
|
||
})
|
||
|
||
function chooseUser() {
|
||
go.to('PAGES_CHOOSE_USER')
|
||
}
|
||
//更新选择用户
|
||
function setUser(par) {
|
||
console.log(option);
|
||
const submitPar = {
|
||
tableId: order.tableId,
|
||
masterId: order.masterId,
|
||
vipUserId: user.value.id ? user.value.id : '',
|
||
orderId:order.id,
|
||
type: user.value.id ? 0 : 1 //0 设置 1 取消
|
||
}
|
||
Object.assign(submitPar, par)
|
||
return Api.$setUser(submitPar)
|
||
}
|
||
function watchChooseuser() {
|
||
uni.$off('choose-user')
|
||
uni.$on('choose-user', (data) => {
|
||
console.log(data);
|
||
setUser({
|
||
vipUserId: data.id ? data.id : '',
|
||
type: data.id ? 0 : 1 //0 设置 1 取消
|
||
}).then(res=>{
|
||
user.value = data
|
||
order.memberId=data.id
|
||
init()
|
||
})
|
||
})
|
||
}
|
||
onShow(()=>{
|
||
watchChooseuser()
|
||
})
|
||
|
||
watch(() => pays.selIndex, (newval) => {
|
||
clearInterval(timer)
|
||
if (newval) {
|
||
timer = setInterval(() => {
|
||
orderApi.tbOrderInfoDetail(order.orderId).then(res => {
|
||
order.status = res.status
|
||
if (res.status == 'closed') {
|
||
paySuccess()
|
||
}
|
||
})
|
||
}, 2000)
|
||
} else {
|
||
|
||
}
|
||
})
|
||
|
||
const models = new Map();
|
||
|
||
function setModel(el) {
|
||
if (el && el.$attrs['name']) {
|
||
models.set(el.$attrs['name'], el);
|
||
}
|
||
}
|
||
|
||
function showModel(key) {
|
||
const model = models.get(key)
|
||
model && model.open()
|
||
}
|
||
|
||
//打折相关数据
|
||
const discount = reactive({
|
||
|
||
})
|
||
|
||
function editDiscountConfirm(form) {
|
||
console.log(form);
|
||
Object.assign(discount, form)
|
||
getPayUrl()
|
||
}
|
||
async function getPayType() {
|
||
const payTypeList = await Api.$getPayType()
|
||
pays.payTypes.list = payTypeList
|
||
}
|
||
|
||
function changePayType(i, item) {
|
||
pays.payTypes.selIndex = i
|
||
if (item.payType == 'vipPay' ) {
|
||
chooseUser()
|
||
}
|
||
}
|
||
//支付成功回调
|
||
function paySuccess() {
|
||
infoBox.showToast('支付成功')
|
||
setTimeout(() => {
|
||
// uni.$emit('orderDetail:update')
|
||
payFinish.value=true
|
||
uni.$emit('get:table')
|
||
uni.$emit('update:orderDetail')
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}, 500)
|
||
}
|
||
|
||
function payOrderClick() {
|
||
const payType = pays.payTypes.list[pays.payTypes.selIndex].payType
|
||
console.log(payType);
|
||
if (payType == 'scanCode' || payType == 'deposit') {
|
||
return saomaPay()
|
||
}
|
||
payOrder()
|
||
}
|
||
async function payOrder() {
|
||
const payType = pays.payTypes.list[pays.payTypes.selIndex].payType
|
||
if (payType == 'vipPay' && user.value.amount * 1 < order.amount * 1) {
|
||
infoBox.showToast('余额不足')
|
||
return
|
||
}
|
||
await Api.$payOrder({
|
||
tableId: order.tableId,
|
||
masterId: order.masterId,
|
||
orderId: order.id || order.orderId,
|
||
payType,
|
||
vipUserId: order.memberId,
|
||
discount: 1,
|
||
code: ''
|
||
})
|
||
paySuccess()
|
||
}
|
||
|
||
onMounted(() => {
|
||
getPayType()
|
||
})
|
||
const order = reactive({
|
||
amount: 0
|
||
})
|
||
|
||
|
||
|
||
function saomaPay() {
|
||
const item = pays.payTypes.list[pays.payTypes.selIndex]
|
||
uni.scanCode({
|
||
onlyFromCamera: true,
|
||
success: function(res) {
|
||
console.log('条码类型：' + res.scanType);
|
||
console.log('条码内容：' + res.result);
|
||
Api.$payOrder({
|
||
"orderId": order.orderId, // 订单id
|
||
"payType": item.payType, //
|
||
"discount": order.discount,
|
||
"code": res.result
|
||
}).then(res => {
|
||
console.log(res);
|
||
paySuccess()
|
||
})
|
||
}
|
||
});
|
||
}
|
||
watch(() => pays.payTypes.selIndex, (newval) => {
|
||
// const item = pays.payTypes.list[newval]
|
||
// if (item.payType == "vipPay") {
|
||
// return
|
||
// }
|
||
// if (item.payType == "deposit") {
|
||
// //储值卡支付
|
||
// return saomaPay('deposit')
|
||
// }
|
||
// if (item.payType == "scanCode") {
|
||
// //扫码支付
|
||
// return saomaPay('scanCode')
|
||
// }
|
||
})
|
||
let payCodeUrl = ref('')
|
||
async function init() {
|
||
const orderRes = await orderApi.tbOrderInfoDetail(order.orderId)
|
||
Object.assign(order, orderRes)
|
||
if (orderRes.memberId) {
|
||
queryAllShopUser({
|
||
id: orderRes.memberId
|
||
}).then(res => {
|
||
if(res.content[0]){
|
||
user.value =res.content[0]
|
||
}
|
||
})
|
||
}
|
||
getPayUrl()
|
||
}
|
||
|
||
function getPayUrl() {
|
||
orderApi.$getOrderPayUrl({
|
||
orderId: order.id,
|
||
payAmount: discount.currentPrice ? discount.currentPrice : order.amount
|
||
}).then(res => {
|
||
payCodeUrl.value = res
|
||
})
|
||
}
|
||
onLoad(async (opt) => {
|
||
console.log(opt);
|
||
option = opt
|
||
Object.assign(order, opt)
|
||
const payTypeList = await Api.$getPayType()
|
||
pays.payTypes.list = payTypeList
|
||
init()
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
clear()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.box-shadow {
|
||
box-shadow: 0 0 5px #E5E5E5;
|
||
}
|
||
|
||
.pay-success {
|
||
color: #5CBB6F;
|
||
}
|
||
|
||
.icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.border-bottom-dashed {
|
||
border-bottom: 1px dashed #bbb;
|
||
}
|
||
|
||
.border-bottom {
|
||
border-color: rgb(240, 240, 240);
|
||
}
|
||
|
||
.list {
|
||
.item:last-child {
|
||
.border-bottom {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.old-price {
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.price-fuhao {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.price {
|
||
font-size: 32px;
|
||
}
|
||
|
||
$dotSize: 20rpx;
|
||
$position: calc($dotSize / (-2));
|
||
|
||
.card {
|
||
position: relative;
|
||
|
||
&::after,
|
||
&:before {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
background-color: #F9F9F9;
|
||
width: $dotSize;
|
||
height: $dotSize;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
&.top {
|
||
&::after {
|
||
right: $position;
|
||
bottom: $position;
|
||
}
|
||
|
||
&:before {
|
||
left: $position;
|
||
bottom: $position;
|
||
}
|
||
}
|
||
|
||
&.bottom {
|
||
&::after {
|
||
right: $position;
|
||
top: $position;
|
||
}
|
||
|
||
&:before {
|
||
left: $position;
|
||
top: $position;
|
||
}
|
||
}
|
||
}
|
||
</style> |