Dining_Hall/pages/work/details.vue

<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>