Dining_Hall/pages/advanceOrder/orderDetails.vue

<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="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>￥{{ (item.orderDetailList[0].dishesDetailList[0].prefPrice/100).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"></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: 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>
            {{ totalPrice }}
          </span>
        </div>

        <div>
          <u-button shape="circle" color="#FF6816" style="width: 79px; height: 28px" @click="handleOrder(1)">
            结算
          </u-button>
        </div>
      </div>
    </div>

    <u-picker
      :show="showPicker"
      :columns="columns"
      keyName="label"
      @cancel="showPicker = false"
      @confirm="confirm"
    ></u-picker>
  </view>
</template>

<script>
	import { getListElectronMobileUsableAPI,addReserveMealApi } from '@/api/advanceOrder/index.js'
export default {
  props: {},
  data() {
    return {
		canteenId:"",
		canteenName:"",
		stallId:"",
		stallName:"",
		totalPrice:0,
		orderDate:"",
		shoppingCartList:[],
      // 详情页数据
      detailData: {
        // 订单状态
        orderState: '自取外带',
        // 订单来源
        orderSource: '预订餐',
        // 餐厅名称
        canteenName: '',
        // 餐次
        canteenType: '',
        // 就餐时间
        diningTime: '',
        // 菜品
        addFood: [],
        remark: '', // 备注
        // 支付方式
        payType: '小程序二维码支付'
      },
      showPicker: false, // 是否显示选择器
      // 选择器数据
      columns: [
        [
          {
            label: '自取外带',
            value: '1'
          },
          {
            label: '堂食',
            value: '2'
          }
        ]
      ]
    }
  },
  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.getListElectronMobileUsable()
  },
  methods: {
	//（获取餐卷）
	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, '获取餐卷')
	   
	},
    confirm(e) {
      console.log('🚀 ~ confirm ~ value:', e)
      this.showPicker = false
      this.detailData.orderState = e.value[0].label
    },
	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}`
	},
	async handleOrder(){
		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": 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": "yyvwjetYVxeP1VW3vTv7nQ==",
					"consigneeName": "dsf ",
					"costModelList": [
						{
							"deliveryAmount": null,
							"deliveryName": "自取堂食",
							"deliveryType": 1,
							"packingFee": null
						}
					],
					"counterId": "",
					"deliveryAddr": "自取堂食",
					"deliveryCosts": null,
					"deliveryFee": 0,
					"deliveryType": 1,
					"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)
		const res = await addReserveMealApi(param)
		console.log(res)
		if(res.code==200){
			if(res.data.code==10000){
				
				setTimeout(()=>{
					// this.handleOrder2()
				},500)
				// uni.navigateTo({
				//   url: `/pages/advanceOrder/payResult?result=${JSON.stringify(res.data)}`
				// })
			}else{
				uni.showToast({
				  title: res.data.msg,
				  icon: 'none'
				}) 
			} 
		}else{
			uni.showToast({
			  title: res.msg,
			  icon: 'none'
			})
		}
	},
	async handleOrder2(){
		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": 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": "yyvwjetYVxeP1VW3vTv7nQ==",
					"consigneeName": "dsf ",
					"costModelList": [
						{
							"deliveryAmount": null,
							"deliveryName": "自取堂食",
							"deliveryType": 1,
							"packingFee": null
						}
					],
					"counterId": "",
					"deliveryAddr": "自取堂食",
					"deliveryCosts": null,
					"deliveryFee": 0,
					"deliveryType": 1,
					"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)
		const res = await addReserveMealApi(param)
		console.log(res)
		if(res.code==200){
			if(res.data.code==10000){
				setTimeout(()=>{
					// this.handleOrder3()
				},500)
				// uni.navigateTo({
				//   url: `/pages/advanceOrder/payResult?result=${JSON.stringify(res.data)}`
				// })
			}else{
				uni.showToast({
				  title: res.data.msg,
				  icon: 'none'
				}) 
			} 
		}else{
			uni.showToast({
			  title: res.msg,
			  icon: 'none'
			})
		}
		
	},
	async 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": "yyvwjetYVxeP1VW3vTv7nQ==",
					"consigneeName": "dsf ",
					"costModelList": [
						{
							"deliveryAmount": null,
							"deliveryName": "自取堂食",
							"deliveryType": 1,
							"packingFee": null
						}
					],
					"counterId": "",
					"deliveryAddr": "自取堂食",
					"deliveryCosts": null,
					"deliveryFee": 0,
					"deliveryType": 1,
					"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)
		const res = await addReserveMealApi(param)
		console.log(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'
				}) 
			} 
		}else{
			uni.showToast({
			  title: res.msg,
			  icon: 'none'
			})
		}
		
	},
	
	
	
	
  }
}
</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;
    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: 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>