557 lines
14 KiB
Vue
557 lines
14 KiB
Vue
<template>
|
|
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
|
<view class="page">
|
|
<div class="cont" style="margin-bottom: 15px;padding: 10px;">
|
|
<h4>配送方式</h4>
|
|
<div class="appraise" @click="showPicker = true">
|
|
<div>{{ detailData.deliveryName }}</div>
|
|
<div class="flex appraise-right">
|
|
<u-icon name="arrow-right" size="12" />
|
|
</div>
|
|
</div>
|
|
<div class="appraise" @click="openCounter" v-if="detailData.deliveryType==3||detailData.deliveryType==4">
|
|
<div>{{ detailData.counterName }}</div>
|
|
<div class="flex appraise-right">
|
|
<u-icon name="arrow-right" size="12" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cont">
|
|
<div class="flex justify-between m-8">
|
|
<div class="top-source m-8">订单类型: 预订餐</div>
|
|
<div>就餐日期: {{ shoppingCartList[0].orderDate }}</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between m-8">
|
|
<div class="flex align-center">
|
|
<div>{{ canteenName }}/{{stallName}}</div>
|
|
<div class="tag">{{ shoppingCartList[0].mealtimeName }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="img-cont m-8">
|
|
<div class="img-list m-8" v-for="(item, index) in shoppingCartList" :key="index">
|
|
<div class="flex align-center">
|
|
<u-image :src="item.orderDetailList[0].goodsDishesImgUrl" width="80px" height="80px" />
|
|
<div class="name-num">
|
|
<div style="margin-bottom: 10px">{{ item.goodsDishesName }}</div>
|
|
<div>x{{ item.quantity }}</div>
|
|
</div>
|
|
</div>
|
|
<div>￥{{ (Number(item.orderDetailList[0].dishesDetailList[0].prefPrice/100)*(item.quantity)).toFixed(2) }}</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" maxlength="20"></u-input>
|
|
</div>
|
|
<u-line />
|
|
<div class="flex justify-between m-8 realAmount">
|
|
小计
|
|
<div>￥{{ totalPrice }}</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: 24rpx; color: rgba(15, 39, 75, 0.6)">余额：￥{{ (walletBal/100).toFixed(2) }}</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>
|
|
{{ totalPrice }}
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
<u-button shape="circle" color="#FF6816" style="width: 100px; height: 28px;font-size: 28rpx;" @click="handleOrder()">
|
|
提交订单
|
|
</u-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<u-picker
|
|
:show="showPicker"
|
|
:columns="columns"
|
|
keyName="deliveryName"
|
|
@cancel="showPicker = false"
|
|
@confirm="confirm"
|
|
></u-picker>
|
|
<u-picker
|
|
:show="showPicker2"
|
|
:columns="columns2"
|
|
keyName="mchName"
|
|
@cancel="showPicker2 = false"
|
|
@confirm="confirm2"
|
|
></u-picker>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getWalletBalanceAPI } from '@/api/index/index'
|
|
import { getListElectronMobileUsableAPI,addReserveMealApi,getCounterBypageApi } from '@/api/advanceOrder/index.js'
|
|
|
|
export default {
|
|
props: {},
|
|
data() {
|
|
return {
|
|
fontValue:uni.getStorageSync('fontSize') || 8,
|
|
canteenId:"",
|
|
canteenName:"",
|
|
stallId:"",
|
|
stallName:"",
|
|
totalPrice:0,
|
|
orderDate:"",
|
|
shoppingCartList:[],
|
|
// 详情页数据
|
|
detailData: {
|
|
deliveryAmount:'',
|
|
packingFee:'',
|
|
deliveryName: '自取堂食',
|
|
deliveryType:'1',
|
|
counterId:"",
|
|
counterName:"",
|
|
remark: '', // 备注
|
|
},
|
|
walletBal: 0 ,// 钱包余额
|
|
sumbitStatus:false,
|
|
showPicker: false, // 是否显示选择器
|
|
showPicker2: false, // 是否显示选择器
|
|
// 选择器数据
|
|
columns: [
|
|
[
|
|
{
|
|
deliveryName: '自取堂食',
|
|
deliveryType: '1'
|
|
},
|
|
{
|
|
deliveryName: '取餐柜配送',
|
|
deliveryType: '3'
|
|
},
|
|
{
|
|
deliveryName: '生鲜柜配送',
|
|
deliveryType: '4'
|
|
}
|
|
]
|
|
],
|
|
columns2:[]
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.canteenId = options.canteenId
|
|
this.canteenName = options.canteenName
|
|
this.stallId = options.stallId
|
|
this.stallName = options.stallName
|
|
this.totalPrice = Number(options.totalPrice).toFixed(2)
|
|
this.orderDate = options.orderDate;
|
|
this.shoppingCartList=JSON.parse(options.carList)
|
|
console.log(this.shoppingCartList)
|
|
this.columns[0] = this.shoppingCartList[0].costModelList
|
|
this.getListElectronMobileUsable()
|
|
this.getWalletBalanceData()
|
|
},
|
|
methods: {
|
|
// 获取钱包余额
|
|
async getWalletBalanceData(custId) {
|
|
let param = {
|
|
"custId": uni.getStorageSync('custId'),
|
|
"openid": uni.getStorageSync('openId'),
|
|
"sourceType": "1"
|
|
}
|
|
const { data: res } = await getWalletBalanceAPI(param)
|
|
this.walletBal = res.accBalTotal
|
|
// console.log(res, '余额信息--')
|
|
},
|
|
//（获取餐卷）
|
|
async getListElectronMobileUsable(){
|
|
let param = {
|
|
"custId":uni.getStorageSync('custId'),
|
|
"canteenIdSet":[this.canteenId],
|
|
"shopstallIdSet":[this.stallId],
|
|
"intervalIdSet":[this.shoppingCartList[0].mealtimeType]
|
|
}
|
|
const res = await getListElectronMobileUsableAPI(param)
|
|
console.log(res, '获取餐卷')
|
|
|
|
},
|
|
openCounter(){
|
|
console.log(this.columns2)
|
|
this.showPicker2=true
|
|
},
|
|
//（获取）
|
|
async getCounterBypage(){
|
|
let param = {
|
|
"content":26,
|
|
}
|
|
this.detailData.counterName='请选择取餐柜'
|
|
if(this.detailData.deliveryType==4){
|
|
param.content=72;
|
|
this.detailData.counterName='请选择生鲜柜'
|
|
}
|
|
const res = await getCounterBypageApi(param)
|
|
console.log(res, '获取餐柜')
|
|
this.columns2=[[]]
|
|
this.detailData.counterId=""
|
|
if(res.length>0){
|
|
res.forEach(item=>{
|
|
let obj = {
|
|
machineId:item.machineId,
|
|
mchName:item.mchName
|
|
}
|
|
this.columns2[0].push(obj)
|
|
})
|
|
}
|
|
|
|
},
|
|
confirm(e) {
|
|
console.log('?? ~ confirm ~ value:', e)
|
|
this.showPicker = false
|
|
this.detailData.deliveryName = e.value[0].deliveryName
|
|
this.detailData.deliveryType = e.value[0].deliveryType
|
|
this.getCounterBypage()
|
|
},
|
|
confirm2(e) {
|
|
console.log('?? ~ confirm ~ value:', e)
|
|
this.showPicker2 = false
|
|
this.detailData.counterName = e.value[0].mchName
|
|
this.detailData.counterId = e.value[0].machineId
|
|
|
|
},
|
|
getNowFormatDate() {
|
|
let date = new Date()
|
|
let year = date.getFullYear()
|
|
let month = (date.getMonth() + 1).toString().padStart(2, '0')
|
|
let day = date.getDate().toString().padStart(2, '0')
|
|
let hours = date.getHours().toString().padStart(2, '0');
|
|
let minutes = date.getMinutes().toString().padStart(2, '0');
|
|
let seconds = date.getSeconds().toString().padStart(2, '0');
|
|
return `${year}-${month}-${day}`
|
|
},
|
|
handleOrder(){
|
|
if(!this.sumbitStatus){
|
|
this.sumbitStatus = true
|
|
let orderDetailList = []
|
|
this.shoppingCartList.forEach(item=>{
|
|
orderDetailList.push(item.orderDetailList[0])
|
|
})
|
|
if(this.detailData.deliveryType==3||this.detailData.deliveryType==4){
|
|
if(this.detailData.counterId==""){
|
|
uni.showToast({
|
|
title: '请选择餐柜！',
|
|
icon: 'none'
|
|
})
|
|
this.sumbitStatus = false
|
|
return false
|
|
}
|
|
}
|
|
let param={
|
|
"amount": this.totalPrice*100,
|
|
"couponId": "",
|
|
"custId": uni.getStorageSync('custId'),
|
|
"ifTrial": 1,
|
|
"ordTime": this.getNowFormatDate(),
|
|
// "ordTime": "2025-02-20 13:57:21",
|
|
"payType": 1,
|
|
"reserveMealList":[
|
|
{
|
|
"canteenId": this.canteenId,
|
|
"canteenName": this.canteenName,
|
|
"stallId": this.stallId,
|
|
"stallName": this.stallName,
|
|
"consigneeMobile": "",
|
|
"consigneeName": "",
|
|
"costModelList": this.shoppingCartList[0].costModelList,
|
|
"counterId": this.detailData.counterId,
|
|
"deliveryAddr": this.detailData.deliveryName,
|
|
"deliveryCosts": null,
|
|
"deliveryFee": 0,
|
|
"deliveryType": this.detailData.deliveryType,
|
|
"mealtimeName": this.shoppingCartList[0].mealtimeName,
|
|
"mealtimeType": this.shoppingCartList[0].mealtimeType,
|
|
"orderDate": this.orderDate,
|
|
"orderDetailList": orderDetailList,
|
|
"packingFee": null,
|
|
"payableAmount": this.totalPrice*100,
|
|
"payType": 1,
|
|
"placeOrdMobile": "",
|
|
"placeOrdName": "",
|
|
"remark": this.detailData.remark,
|
|
"sxresult":[],
|
|
"takeList":[],
|
|
}
|
|
]
|
|
}
|
|
console.log(param)
|
|
addReserveMealApi(param).then((res)=>{
|
|
if(res.code==200){
|
|
if(res.data.code==10000){
|
|
this.handleOrder2(res.data.orderList)
|
|
}else{
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
this.sumbitStatus = false
|
|
}
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
this.sumbitStatus = false
|
|
}
|
|
}).catch(()=>{
|
|
this.sumbitStatus = false
|
|
})
|
|
}
|
|
},
|
|
handleOrder2(orderList){
|
|
let param={
|
|
"amount": this.totalPrice*100,
|
|
"couponId": "",
|
|
"custId": uni.getStorageSync('custId'),
|
|
"ifTrial": 1,
|
|
"ordTime": this.getNowFormatDate(),
|
|
// "ordTime": "2025-02-20 13:57:21",
|
|
"payType": 1,
|
|
"reserveMealList":[
|
|
{
|
|
"canteenId": this.canteenId,
|
|
"canteenName": this.canteenName,
|
|
"stallId": this.stallId,
|
|
"stallName": this.stallName,
|
|
"consigneeMobile": "",
|
|
"consigneeName": "",
|
|
"costModelList": this.shoppingCartList[0].costModelList,
|
|
"counterId": "",
|
|
"deliveryAddr": this.detailData.deliveryAddr,
|
|
"deliveryCosts": null,
|
|
"deliveryFee": 0,
|
|
"deliveryType": this.detailData.deliveryType,
|
|
"mealtimeName": this.shoppingCartList[0].mealtimeName,
|
|
"mealtimeType": this.shoppingCartList[0].mealtimeType,
|
|
"orderDate": this.orderDate,
|
|
"orderDetailList": orderList[0].orderDetailList,
|
|
"packingFee": null,
|
|
"payableAmount": this.totalPrice*100,
|
|
"payType": 1,
|
|
"placeOrdMobile": "",
|
|
"placeOrdName": "",
|
|
"remark": this.detailData.remark,
|
|
"sxresult":[],
|
|
"takeList":[],
|
|
}
|
|
]
|
|
}
|
|
// const res = await addReserveMealApi(param)
|
|
addReserveMealApi(param).then((res)=>{
|
|
if(res.code==200){
|
|
if(res.data.code==10000){
|
|
this.handleOrder3()
|
|
}else{
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
this.sumbitStatus = false
|
|
}
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
this.sumbitStatus = false
|
|
}
|
|
}).catch(()=>{
|
|
this.sumbitStatus = false
|
|
})
|
|
|
|
},
|
|
handleOrder3(){
|
|
let orderDetailList = []
|
|
console.log(this.shoppingCartList)
|
|
this.shoppingCartList.forEach(item=>{
|
|
orderDetailList.push(item.orderDetailList[0])
|
|
})
|
|
let param={
|
|
"amount": this.totalPrice*100,
|
|
"couponId": "",
|
|
"custId": uni.getStorageSync('custId'),
|
|
"ifTrial": 2,
|
|
"ordTime": this.getNowFormatDate(),
|
|
// "ordTime": "2025-02-20 13:57:21",
|
|
"payType": 1,
|
|
"reserveMealList":[
|
|
{
|
|
"canteenId": this.canteenId,
|
|
"canteenName": this.canteenName,
|
|
"stallId": this.stallId,
|
|
"stallName": this.stallName,
|
|
"consigneeMobile": "",
|
|
"consigneeName": "",
|
|
"costModelList": this.shoppingCartList[0].costModelList,
|
|
"counterId": "",
|
|
"deliveryAddr": this.detailData.deliveryAddr,
|
|
"deliveryCosts": null,
|
|
"deliveryFee": 0,
|
|
"deliveryType": this.detailData.deliveryType,
|
|
"mealtimeName": this.shoppingCartList[0].mealtimeName,
|
|
"mealtimeType": this.shoppingCartList[0].mealtimeType,
|
|
"orderDate": this.orderDate,
|
|
"orderDetailList": orderDetailList,
|
|
"packingFee": null,
|
|
"payableAmount": this.totalPrice*100,
|
|
"payType": 1,
|
|
"placeOrdMobile": "",
|
|
"placeOrdName": "",
|
|
"remark": this.detailData.remark,
|
|
"sxresult":[],
|
|
"takeList":[],
|
|
}
|
|
]
|
|
}
|
|
|
|
addReserveMealApi(param).then((res)=>{
|
|
if(res.code==200){
|
|
if(res.data.code==10000){
|
|
uni.navigateTo({
|
|
url: `/pages/advanceOrder/payResult?result=${JSON.stringify(res.data)}`
|
|
})
|
|
}else{
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
this.sumbitStatus = false
|
|
}
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
this.sumbitStatus = false
|
|
}
|
|
}).catch(()=>{
|
|
this.sumbitStatus = false
|
|
})
|
|
},
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
background: #f9fbff;
|
|
padding: 16px;
|
|
min-height: 100vh;
|
|
color: #0f274b;
|
|
}
|
|
.appraise {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 26rpx;
|
|
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;
|
|
min-width: 40px;
|
|
border-radius: 1px 1px 1px 1px;
|
|
border: 1px solid #ff6816;
|
|
color: #ff6816;
|
|
display: flex;
|
|
font-size: 20rpx;
|
|
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: 32rpx;
|
|
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: 36rpx;
|
|
color: #0f274b;
|
|
}
|
|
}
|
|
}
|
|
</style>
|