sszdot
f4c5104fa9
【原 因】： 【过 程】："收银台" 页面ui重置 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
147 lines
3.7 KiB
Vue
147 lines
3.7 KiB
Vue
<template>
|
||
<view>
|
||
<!-- topbar -->
|
||
<u-navbar title="收银台" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
|
||
<view class="u-nav-slot" slot="left">
|
||
<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
|
||
</view>
|
||
</u-navbar>
|
||
<!-- body -->
|
||
<view class="flex column msb bodyBox">
|
||
<view>
|
||
<view class="priceBox fb flex mc">¥{{fullPrice | formatPrice}}</view>
|
||
<view class="fcb fz24 flex mc">支付剩余时间 {{ countdown }}</view>
|
||
<view class="flex msb mac rad8 bg-w m-l-24 m-r-24 m-t-24 p-24">
|
||
<view class="flex mac">
|
||
<u--image src="/static/icons/wxPayLogo.svg" width="75rpx" height="60rpx" />
|
||
<view class="fz36 m-l-24">微信支付</view>
|
||
</view>
|
||
<view class="flex border rad-c border-m bg-m checkBox">
|
||
<u-icon name="checkbox-mark" size="40rpx" color="#fff"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view @click="pay" class="butBox fci bg-m rad8 fb fz36 flex mc p-24 m-l-24 m-r-24">确认支付</view>
|
||
<!-- <button @click="pay" type="primary">确认支付</button> -->
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
formatPrice
|
||
} from '@/utils/index.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
order_sn: '', //订单号
|
||
fullPrice: 0, //总价格 包括附加费用
|
||
order_time: 0, //订单创建时间
|
||
countdown: '', // 用于显示倒计时
|
||
timer: null ,// 存储计时器
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.$store.dispatch('fetchOrderList')
|
||
this.order_sn = options.order_sn // 从提交订单页面传递过来的订单号
|
||
this.fullPrice = Number(options.fullPrice) // 从提交订单页面传递过来的订单号
|
||
setInterval(() => {
|
||
this.countdown = Date.now() / 1000;
|
||
}, 1000)
|
||
},
|
||
computed: {
|
||
//订单详情
|
||
orderShow() {
|
||
if (this.$store.state.orderList && this.$store.state.orderList.length > 0) {
|
||
// 使用 find 查找匹配的订单，若没有找到返回 null
|
||
return this.$store.state.orderList.find((item) => item.order_sn === this.order_sn) || null;
|
||
}
|
||
return null; // 如果 orderList 为空或未定义，返回 null
|
||
},
|
||
},
|
||
filters: {
|
||
formatPrice, //格式化价格
|
||
},
|
||
watch: {
|
||
'orderShow': {
|
||
handler(newVal, oldVal) {
|
||
this.order_time = Number(newVal.order_time)
|
||
},
|
||
deep: true // 如果需要深度监视对象或数组的变化，则需要设置为true
|
||
}
|
||
},
|
||
methods: {
|
||
// 支付方法
|
||
pay() {
|
||
uni.$u.http.post('/Api/Pay/pay', {
|
||
order_sn: this.order_sn
|
||
}, {
|
||
header: {
|
||
'Token': this.$store.state.userInfo.token,
|
||
'Content-Type': 'application/x-www-form-urlencoded'
|
||
}
|
||
}).then((res) => {
|
||
if (res.data.status === 1) {
|
||
// 调用微信支付接口
|
||
this.requestPayment(res.data.payMsg);
|
||
} else {
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
icon: 'error'
|
||
});
|
||
console.error(res.data.msg)
|
||
}
|
||
})
|
||
},
|
||
// 调用微信支付接口
|
||
requestPayment(payMsg) {
|
||
uni.requestPayment({
|
||
timeStamp: payMsg.timeStamp,
|
||
nonceStr: payMsg.nonceStr,
|
||
package: payMsg.package,
|
||
signType: payMsg.signType,
|
||
paySign: payMsg.paySign,
|
||
success: (res) => {
|
||
if (res.status === 1) {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
icon: 'error'
|
||
});
|
||
console.error(err)
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
},
|
||
destroyed() {
|
||
// 在组件销毁前清除定时器
|
||
// this.clearInterval()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.priceBox {
|
||
font-size: 72rpx;
|
||
margin-top: 140rpx;
|
||
}
|
||
|
||
.butBox {
|
||
margin-bottom: 72rpx;
|
||
}
|
||
|
||
.bodyBox {
|
||
height: calc(100vh - 176rpx);
|
||
;
|
||
}
|
||
</style> |