【类 型】：factor
【原 因】： 【过 程】："收银台" 页面ui重置 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
parent
44a4d393c6
commit
f4c5104fa9
26
App.vue
26
App.vue
@ -3,8 +3,10 @@
|
||||
// 数据初始化
|
||||
onLaunch: function(options) {
|
||||
//从二维码获取站点id 商铺id
|
||||
this.$store.commit('setShopId', options.query.s);
|
||||
this.$store.commit('setSiteId', options.query.z);
|
||||
// this.$store.commit('setShopId', options.query.s);
|
||||
// this.$store.commit('setSiteId', options.query.z);
|
||||
this.$store.commit('setShopId', '2dc23dcfecc05fb1');
|
||||
this.$store.commit('setSiteId', '13');
|
||||
//异步加载商铺信息
|
||||
this.$store.dispatch('fetchShopCon')
|
||||
//异步加载站点列表
|
||||
@ -55,6 +57,19 @@
|
||||
float: right;
|
||||
}
|
||||
|
||||
.fc {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fr {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.checkBox {
|
||||
weight: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.ls {
|
||||
background-color: #007aff;
|
||||
}
|
||||
@ -163,14 +178,17 @@
|
||||
.flex4 {
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
//阴影
|
||||
.boxshadow {
|
||||
box-shadow: 0px 4rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
//边框
|
||||
.border {
|
||||
border: 1rpx solid $uni-border-color;
|
||||
}
|
||||
|
||||
//粗边框
|
||||
.border4 {
|
||||
border: 4rpx solid $uni-border-color;
|
||||
@ -187,12 +205,14 @@
|
||||
.borderno {
|
||||
border: none;
|
||||
}
|
||||
|
||||
//下边框 实线
|
||||
.borderB {
|
||||
border-bottom: 1rpx solid $uni-border-color;
|
||||
}
|
||||
|
||||
//下边框 虚线
|
||||
.borderBDas{
|
||||
.borderBDas {
|
||||
border-bottom: 1rpx dashed $uni-border-color;
|
||||
}
|
||||
|
||||
|
||||
@ -37,8 +37,7 @@
|
||||
+{{priceDifference(sku.id) | formatPrice}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="border rad-c m-r-12" :class="isSel(sku.id)?'border-m bg-m':''"
|
||||
style="width: 40rpx;height: 40rpx;">
|
||||
<view class="border rad-c m-r-12 checkBox" :class="isSel(sku.id)?'border-m bg-m':''">
|
||||
<u-icon name="checkbox-mark" size="40rpx" color="#fff" v-if="isSel(sku.id)"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -6,9 +6,25 @@
|
||||
<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<!-- 价格 -->
|
||||
<view>{{fullPrice | formatPrice}}</view>
|
||||
<button @click="pay" type="primary" style="margin-top:200rpx;">确认支付</button>
|
||||
<!-- 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>
|
||||
|
||||
@ -16,24 +32,46 @@
|
||||
import {
|
||||
formatPrice
|
||||
} from '@/utils/index.js'
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
order_sn: '', //订单号
|
||||
fullPrice: 0,//总价格 包括附加费用
|
||||
fullPrice: 0, //总价格 包括附加费用
|
||||
order_time: 0, //订单创建时间
|
||||
countdown: '', // 用于显示倒计时
|
||||
timer: null ,// 存储计时器
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.order_sn = options.order_sn; // 从提交订单页面传递过来的订单号
|
||||
this.fullPrice = Number(options.fullPrice); // 从提交订单页面传递过来的订单号
|
||||
this.$store.dispatch('fetchOrderList')
|
||||
this.order_sn = options.order_sn // 从提交订单页面传递过来的订单号
|
||||
this.fullPrice = Number(options.fullPrice) // 从提交订单页面传递过来的订单号
|
||||
setInterval(() => {
|
||||
this.countdown = Date.now() / 1000;
|
||||
}, 1000)
|
||||
},
|
||||
computed(){
|
||||
|
||||
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() {
|
||||
@ -48,7 +86,7 @@
|
||||
if (res.data.status === 1) {
|
||||
// 调用微信支付接口
|
||||
this.requestPayment(res.data.payMsg);
|
||||
}else{
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '支付失败',
|
||||
icon: 'error'
|
||||
@ -66,7 +104,7 @@
|
||||
signType: payMsg.signType,
|
||||
paySign: payMsg.paySign,
|
||||
success: (res) => {
|
||||
if(res.status===1){
|
||||
if (res.status === 1) {
|
||||
uni.showToast({
|
||||
title: '支付成功',
|
||||
icon: 'success'
|
||||
@ -82,10 +120,28 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
destroyed() {
|
||||
// 在组件销毁前清除定时器
|
||||
// this.clearInterval()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss" scoped>
|
||||
.priceBox {
|
||||
font-size: 72rpx;
|
||||
margin-top: 140rpx;
|
||||
}
|
||||
|
||||
.butBox {
|
||||
margin-bottom: 72rpx;
|
||||
}
|
||||
|
||||
.bodyBox {
|
||||
height: calc(100vh - 176rpx);
|
||||
;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user