订单详情、订单结算

This commit is contained in:
binbin_pan 2025-01-10 17:39:14 +08:00
parent daa4d702dd
commit aa7bb484df
8 changed files with 1969 additions and 8 deletions

View File

@ -215,6 +215,18 @@
"style": { "style": {
"navigationBarTitleText": "档口选择" "navigationBarTitleText": "档口选择"
} }
},
{
"path": "pages/work/details",
"style": {
"navigationBarTitleText": "订单详情"
}
},
{
"path": "pages/advanceOrder/orderDetails",
"style": {
"navigationBarTitleText": "订单结算"
}
} }
], ],
"tabBar": { "tabBar": {

View File

@ -79,7 +79,7 @@
</div> </div>
<div> <div>
<u-button shape="circle" color="#FF6816" style="width: 79px; height: 28px" @click="">结算</u-button> <u-button shape="circle" color="#FF6816" style="width: 79px; height: 28px" @click="handleOrder">结算</u-button>
</div> </div>
</div> </div>
</div> </div>
@ -426,6 +426,29 @@ export default {
}) })
this.handleTotalPrice() this.handleTotalPrice()
this.showModal = false this.showModal = false
},
//
handleOrder() {
console.log('结算')
//
if (this.totalPrice == 0) {
uni.showToast({
title: '请添加菜品',
icon: 'none'
})
return
}
const params = {
canteenName: this.canteenName, //
canteenType: this.canteenType, //
totalPrice: this.totalPrice, //
diningTime: this.newDate2, //
addFood: this.addFood //
}
//
uni.navigateTo({
url: '/pages/advanceOrder/orderDetails?params=' + JSON.stringify(params)
})
} }
} }
} }

View File

@ -0,0 +1,236 @@
<template>
<view class="page">
<h3>配送方式</h3>
<div class="appraise" @click="showPicker = true">
<div>{{ detailData.orderState }}</div>
<div class="flex appraise-right">
<u-icon name="arrow-right" size="12" />
</div>
</div>
<div class="cont">
<div class="top-source m-8">订单来源: {{ detailData.orderSource }}</div>
<div class="flex justify-between m-8">
<div class="flex align-center">
<div>{{ detailData.canteenName }}</div>
<div class="tag">{{ detailData.canteenType }}</div>
</div>
<div>就餐日期: {{ detailData.diningTime }}</div>
</div>
<div class="img-cont m-8">
<div class="img-list m-8" v-for="(item, index) in detailData.addFood" :key="index">
<div class="flex align-center">
<u-image :src="item.imageUrl" width="80px" height="80px" />
<div class="name-num">
<div style="margin-bottom: 10px">{{ item.mealName }}</div>
<div>x{{ item.restrictNum }}</div>
</div>
</div>
<div>{{ item.salePrice }}</div>
</div>
</div>
<div class="flex justify-between m-8 bt">
配送费
<div>{{ detailData.deliveryFee }}</div>
</div>
<div class="flex justify-between m-8 bt">
包装费
<div>{{ detailData.packingFee }}</div>
</div>
<div class="flex justify-between align-center m-8 bt">
备注
<u-input v-model="detailData.remark" placeholder="请填写备注信息" border="none" inputAlign="right"></u-input>
</div>
<u-line />
<div class="flex justify-between m-8 realAmount">
小计
<div>{{ detailData.realAmount || 12 }}</div>
</div>
</div>
<div class="order">
<div class="m-8 bt" style="font-weight: 800">支付方式</div>
<div class="flex justify-between align-center m-8">
<div class="flex justify-between align-center">
<u-icon name="/static/images/remaining-sum.png" size="36" />
<div style="margin-left: 10px">
<div>钱包支付</div>
<div style="font-size: 12px; color: rgba(15, 39, 75, 0.6)">推荐使用</div>
</div>
</div>
<u-icon name="/static/images/active-circle.png" size="20" />
</div>
</div>
<div style="height: 60px"></div>
<div class="shop-car">
<div class="car-cont">
<div class="flex align-center">
<span class="money">
<span style="font-size: 13px">实付款</span>
{{ detailData.totalPrice }}
</span>
</div>
<div>
<u-button shape="circle" color="#FF6816" style="width: 79px; height: 28px" @click="handleOrder">
结算
</u-button>
</div>
</div>
</div>
<u-picker
:show="showPicker"
:columns="columns"
keyName="label"
@cancel="showPicker = false"
@confirm="confirm"
></u-picker>
</view>
</template>
<script>
export default {
props: {},
data() {
return {
//
detailData: {
//
orderState: '堂食',
//
orderSource: '设备下线消费',
//
canteenName: '',
//
canteenType: '',
//
diningTime: '',
//
addFood: [],
remark: '', //
//
payType: '小程序二维码支付'
},
showPicker: false, //
//
columns: [
[
{
label: '自取外带',
value: '1'
},
{
label: '堂食',
value: '2'
}
]
]
}
},
onLoad(opt) {
opt = JSON.parse(opt.params)
this.detailData = {
...this.detailData,
...opt
}
},
methods: {
confirm(e) {
console.log('🚀 ~ confirm ~ value:', e)
this.showPicker = false
this.detailData.orderState = e.value[0].label
},
}
}
</script>
<style lang="scss" scoped>
.page {
background: #f9fbff;
padding: 16px;
min-height: 100vh;
color: #0f274b;
}
.appraise {
display: flex;
justify-content: space-between;
font-size: 13px;
margin: 8px 0 20px;
.appraise-right {
color: #ff6816;
}
}
.m-8 {
margin: 0 8px;
}
.bt {
margin-bottom: 16px;
}
.cont {
background: #fff;
border-radius: 8px;
padding: 8px 0;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
.top-source {
font-weight: 800;
margin-bottom: 12px;
}
.tag {
margin-left: 5px;
width: 32px;
border-radius: 1px 1px 1px 1px;
border: 1px solid #ff6816;
color: #ff6816;
display: flex;
justify-content: center;
align-items: center;
}
.img-cont {
margin: 20px 0;
.img-list {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
.name-num {
margin-left: 10px;
}
}
}
.realAmount {
margin-top: 16px;
font-size: 16px;
font-weight: 800;
}
}
.order {
margin-top: 16px;
padding: 8px 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.shop-car {
height: 60px;
background: #fff;
box-shadow: 0px -1px 4px 0px rgba(0, 102, 204, 0.1);
position: fixed;
bottom: 0;
left: 0;
width: 100%;
.car-cont {
margin: 15px 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
.money {
margin-left: 8px;
font-weight: 600;
font-size: 18px;
color: #0f274b;
}
}
}
</style>

246
pages/work/details.vue Normal file
View File

@ -0,0 +1,246 @@
<template>
<view class="page">
<h3>{{ detailData.orderState }}</h3>
<div class="appraise">
<div>您对本单满意吗?</div>
<div class="flex appraise-right">
去评价
<u-icon name="arrow-right" size="12" />
</div>
</div>
<div class="cont">
<div class="top-source m-8">订单来源: {{ detailData.orderSource }}</div>
<div class="flex justify-between m-8">
<div class="flex align-center">
<div>{{ detailData.canteenName }}</div>
<div class="tag">{{ detailData.intervalName }}</div>
</div>
<div>就餐日期: {{ detailData.diningTime }}</div>
</div>
<div class="img-cont m-8">
<div class="img-list m-8" v-for="(item, index) in detailData.dishes" :key="index">
<div class="flex align-center">
<u-image :src="item.imgUrl" width="80px" height="80px" />
<div class="name-num">
<div style="margin-bottom: 10px">{{ item.name }}</div>
<div>x{{ item.num }}</div>
</div>
</div>
<div>{{ item.price }}</div>
</div>
</div>
<div class="flex justify-between m-8 bt">
配送费
<div>{{ detailData.deliveryFee }}</div>
</div>
<div class="flex justify-between m-8 bt">
包装费
<div>{{ detailData.packingFee }}</div>
</div>
<div class="flex justify-between m-8 bt">
餐券金额
<div>{{ detailData.mealTicketAmount }}</div>
</div>
<div class="flex justify-between m-8 bt">
优惠金额
<div>{{ detailData.discountAmount }}</div>
</div>
<u-line />
<div class="flex justify-between m-8 realAmount">
实付金额
<div>{{ detailData.realAmount }}</div>
</div>
</div>
<div class="order">
<div class="m-8">订单二维码</div>
<div class="qrcode">
<canvas id="qrcode" canvas-id="qrcode" style="width: 175px; height: 175px"/>
</div>
<template >
</template>
<div class="flex justify-center">流水号: {{ detailData.serialNumber }}</div>
<u-line style="margin: 20px 0;" />
<div class="flex justify-between m-8 bt">
订单编号
<div>{{ detailData.orderNumber }}</div>
</div>
<div class="flex justify-between m-8 bt">
创建时间
<div>{{ detailData.createTime }}</div>
</div>
<div class="flex justify-between m-8 bt">
支付时间
<div>{{ detailData.payTime }}</div>
</div>
<div class="flex justify-between m-8">
支付方式
<div>{{ detailData.payType }}</div>
</div>
</div>
</view>
</template>
<script>
import uqrCode from '@/utils/uqrcode'
export default {
data() {
return {
//
detailData: {
//
orderState: '订单已完成',
//
orderSource: '设备下线消费',
//
canteenName: '宏远工业园/本周菜谱',
//
intervalName: '午餐',
//
diningTime: '2024-08-12',
//
dishes: [
{
name: '苹果',
imgUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg',
price: 10,
num: 1
},
{
name: '香蕉',
imgUrl: 'https://img.yzcdn.cn/vant/banana.jpg',
price: 5,
num: 2
},
{
name: '橘子',
imgUrl: 'https://img.yzcdn.cn/vant/orange.jpg',
price: 8,
num: 1
}
],
//
deliveryFee: '免配送费',
//
packingFee: '免包装费',
//
mealTicketAmount: '27',
//
discountAmount: '0.7',
//
realAmount: '9.3',
//
qrCode: '',
//
serialNumber: '361',
//
orderNumber: '397944984700981249',
//
createTime: '2025-01-05 06:57:08',
//
payTime: '2025-01-03 22:56:23',
//
payType: '小程序二维码支付'
}
}
},
onLoad() {
this.generate('1223321312')
},
methods: {
//
generate(e) {
console.log('🚀 ~ generate ~ e:', e)
uqrCode.make({
canvasId: 'qrcode',
componentInstance: this,
text: e, //
size: 175,
margin: 0,
backgroundColor: '#ffffff',
foregroundColor: '#000000',
fileType: 'jpg',
errorCorrectLevel: uqrCode.errorCorrectLevel.H,
success: res => {
// this.imgCode = res // base64
console.log('🚀 ~ generate ~ res:', res)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.page {
background: #f9fbff;
padding: 16px;
min-height: 100vh;
color: #0f274b;
}
.appraise {
display: flex;
justify-content: space-between;
font-size: 13px;
margin: 8px 0 20px;
.appraise-right {
color: #ff6816;
}
}
.m-8 {
margin: 0 8px;
}
.bt {
margin-bottom: 16px;
}
.cont {
background: #fff;
border-radius: 8px;
padding: 8px 0;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
.top-source {
font-weight: 800;
margin-bottom: 12px;
}
.tag {
margin-left: 5px;
width: 32px;
border-radius: 1px 1px 1px 1px;
border: 1px solid #ff6816;
color: #ff6816;
display: flex;
justify-content: center;
align-items: center;
}
.img-cont {
margin: 20px 0;
.img-list {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
.name-num {
margin-left: 10px;
}
}
}
.realAmount {
margin-top: 16px;
font-size: 16px;
font-weight: 800;
}
}
.order {
margin-top: 16px;
padding: 8px 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
.qrcode{
display: flex;
justify-content: center;
align-items: center;
margin: 28px 0 12px;
}
}
</style>

View File

@ -38,7 +38,7 @@
</div> </div>
<div style="color: rgba(15, 39, 75, 0.8)">就餐时间{{ item.orderTime }}</div> <div style="color: rgba(15, 39, 75, 0.8)">就餐时间{{ item.orderTime }}</div>
</div> </div>
<div class="img-cont"> <div class="img-cont" @click="goDetail(item)">
<div class="img" v-for="(goods, index) in item.detailList" :key="index"> <div class="img" v-for="(goods, index) in item.detailList" :key="index">
<u-image :src="goods.goodsDishesImgUrl" width="80px" height="80px" /> <u-image :src="goods.goodsDishesImgUrl" width="80px" height="80px" />
<div>{{ goods.goodsDishesName }}</div> <div>{{ goods.goodsDishesName }}</div>
@ -397,6 +397,13 @@ export default {
const month = String(date.getMonth() + 1).padStart(2, '0') const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0') const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}` return `${year}-${month}-${day}`
},
//
goDetail(item) {
console.log('跳转订单详情', item)
uni.navigateTo({
url: `/pages/work/details?params=${JSON.stringify(item)}`
})
} }
} }
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 736 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 899 B

1437
utils/uqrcode.js Normal file

File diff suppressed because it is too large Load Diff