订单详情、订单结算
This commit is contained in:
parent
daa4d702dd
commit
aa7bb484df
24
pages.json
24
pages.json
|
|
@ -161,12 +161,12 @@
|
|||
"navigationBarTitleText": "个人二维码"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/weeklyMenu/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "一周菜谱"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/weeklyMenu/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "一周菜谱"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/advanceOrder/index",
|
||||
"style": {
|
||||
|
|
@ -215,6 +215,18 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "档口选择"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/work/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/advanceOrder/orderDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单结算"
|
||||
}
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
</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>
|
||||
|
|
@ -426,6 +426,29 @@ export default {
|
|||
})
|
||||
this.handleTotalPrice()
|
||||
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)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
</div>
|
||||
<div style="color: rgba(15, 39, 75, 0.8)">就餐时间：{{ item.orderTime }}</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">
|
||||
<u-image :src="goods.goodsDishesImgUrl" width="80px" height="80px" />
|
||||
<div>{{ goods.goodsDishesName }}</div>
|
||||
|
|
@ -397,6 +397,13 @@ export default {
|
|||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
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 |
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue