jufubao-takeorder 1.0.2-beta2 → 1.0.2-beta4

package/src/components/JfbTakeorderOrderDetail/JfbTakeorderOrderDetail.vue

@@ -0,0 +1,845 @@
+<template>
+  <view
+    class="jfb-takeorder-order-detail"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-takeorder-order-detail__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-takeorder-order-detail__edit-icon" @click.stop="delEdit">
+        <xd-font-icon icon="iconshanchu-01" color="#fff" size="30"></xd-font-icon>
+      </view>
+    </view>
+    <!-- #endif -->
+    <!-- 待上报状态倒计时横幅 -->
+    <view 
+      v-if="status==='daishangbao' && !isOrderCountdownEnd" 
+      class="jfb-takeorder-order-detail__countdown-banner"
+      :style="{backgroundColor: mainColor}"
+    >
+      <xd-font-icon icon="iconshijian-01" color="#fff" size="36"></xd-font-icon>
+      <view class="jfb-takeorder-order-detail__countdown-text">
+        订单剩余完成时间: {{ formatCountdownTime(orderCountdownSeconds) }}
+      </view>
+    </view>
+    <view class="jfb-takeorder-order-detail__body">
+      <Products :info="info" :status="status"></Products>
+      <view v-if="status!=='daishangbao'" class="wrap">
+        <view class="other-info-item" v-if="step===1||step===3">
+          <view>市场原价（仅供参考）</view>
+          <view :style="{color:mainColor}"><text>¥ </text>145</view>
+        </view>
+        <view class="other-info-item">
+          <view>商品总数</view>
+          <view style="display:flex;align-items: center;"><xd-font-icon size="28" icon="iconguanbi"></xd-font-icon>9</view>
+        </view>
+        <view class="other-info-item" v-if="step===1||step===3">
+          <view>报价人数</view>
+          <view>78人</view>
+        </view>
+        <view class="other-info-item" v-if="step===1||step===3">
+          <view>报价倒计时</view>
+          <view :style="{color:mainColor}">{{ !isCountdownEnd?formatTime(remainingSeconds):'报价结束' }}</view>
+        </view>
+        <view class="other-info-item" v-if="step===2">
+          <view>您的报价</view>
+          <view :style="{color:mainColor}"><text>¥ </text>145</view>
+        </view>
+        <view class="other-info-item" v-if="step===2">
+          <view>预计结算</view>
+          <view :style="{color:mainColor}"><text>¥ </text>145</view>
+        </view>
+      </view>
+      <view v-else class="wrap">
+        <view class="other-info-item">
+          <view>订单编号</view>
+          <view>HJKYUYYU7878</view>
+        </view>
+        <view class="other-info-item">
+          <view>商品总数</view>
+          <view style="display:flex;align-items: center;"><xd-font-icon size="28" icon="iconguanbi"></xd-font-icon>9</view>
+        </view>
+        <view class="other-info-item">
+          <view>订购电话</view>
+          <view>18888888888</view>
+        </view>
+        <view class="other-info-item">
+          <view>订单结算价</view>
+          <view :style="{color:mainColor}"><text>¥ </text>145</view>
+        </view>
+      </view>
+      <view class="wrap" v-if="!isCountdownEnd&&step!==2&&status!=='daishangbao'">
+        <view class="quote-title">订单报价</view>
+        <view class="quote-input">
+          <view class="quote-input-unit">¥</view>
+          <input :disabled="quoteDisabled" v-model="quotePrice" placeholder="请输入单张报价金额" />
+        </view>
+        <view class="quote-advice">建议报价：<text :style="{color:mainColor}">¥16.96 ～ ¥36.96</text></view>
+      </view>
+      <view v-if="status!=='daishangbao'" class="wrap" style="padding: 24rpx 32rpx">
+        <XdContentXss v-if="notice" :html="notice"></XdContentXss>
+      </view>
+      <view class="wrap upload">
+        <view class="voucher">
+          <view class="voucher-item">
+            <view class="voucher-item-image">
+              <image />
+              <view>凭证图</view>
+            </view>
+            <view class="voucher-item-info">
+              <view class="voucher-item-info-number">
+                <text class="voucher-item-info-label">凭证号</text>
+                <view>202101020200110</view>
+              </view>
+              <view class="voucher-item-info-qrcode">
+                <text class="voucher-item-info-label">二维码</text>
+                <image></image>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view style="display: flex;justify-content: center;">
+          <xd-upload 
+            @onDone="handleUploadDone"
+            selectType="image"
+            :selectSource="['album']"
+            ossType="private"
+            borderWidth="2rpx" 
+            borderRadius="4rpx"
+            :backgroundColor="uploadBackground" 
+            :borderColor="mainColor" 
+            borderStyle="solid"
+            width="654" 
+            height="88">
+            <view :style="{color:mainColor}">上传凭证</view>
+          </xd-upload>
+        </view>
+        <view class="upload-notice">
+          <text>请务必按真实报单并仔细校对取餐码正确无误，</text>
+          <text :style="{color:mainColor}">取餐码错误或未上报真实取餐码造成客诉产生损失将由您承担！</text>
+        </view>
+      </view>
+      <view v-if="!isCountdownEnd" :style="{ height: '100rpx'  }"></view>
+      <view v-if="!isCountdownEnd&&status!=='daishangbao'" class="fixe_bottom" :style="prod_bottom">
+        <XdButton
+          v-if="step===1"
+          width="680rpx"
+          @click="toConfirmQuote"
+          size="small"
+          type="primary"
+          >确认报价</XdButton
+        >
+        <XdButton
+          v-if="step===2"
+          width="320rpx"
+          @click="step=1"
+          size="small"
+          :cusStyle="[btnStyle]"
+          >再想想</XdButton
+        >
+        <XdButton
+          v-if="step===2"
+          width="320rpx"
+          @click="handleSubmitQuote"
+          size="small"
+          type="primary"
+          >提交报价</XdButton
+        >
+        <XdButton
+          v-if="step===3"
+          width="320rpx"
+          @click="showCancelDialog=true"
+          size="small"
+          :cusStyle="[btnStyle]"
+          >取消报价</XdButton
+        >
+        <XdButton
+          v-if="step===3"
+          width="320rpx"
+          @click="showEditQuoteDialog=true"
+          size="small"
+          type="primary"
+          >修改报价</XdButton
+        >
+      </view>
+      <view v-if="status==='daishangbao'" class="fixe_bottom" :style="prod_bottom">
+        <XdButton
+          width="320rpx"
+          @click="showCancelDialog=true"
+          size="small"
+          :cusStyle="[btnStyle]"
+          >放弃订单</XdButton
+        >
+        <XdButton
+          width="320rpx"
+          @click="showEditQuoteDialog=true"
+          size="small"
+          type="primary"
+          >上报订单</XdButton
+        >
+      </view>
+       <!-- <XdDailog 
+        :showClose="false"
+        :show.sync="showConfirmDialog" >
+          <template slot="title">
+            <view class="dialog-title">确认报价</view>
+          </template>
+          <view class="confirm-info">
+            <view class="confirm-info-item">
+              <view class="confirm-info-item-label">购买名称：</view>
+              <view class="confirm-info-item-value">畅享套餐</view>
+            </view>
+            <view class="confirm-info-item">
+              <view class="confirm-info-item-label">购买数量：</view>
+              <view class="confirm-info-item-value">2</view>
+            </view>
+            <view class="confirm-info-item">
+              <view class="confirm-info-item-label">您的报价：</view>
+              <view class="confirm-info-item-value">¥35.11</view>
+            </view>
+            <view class="confirm-info-item">
+              <view class="confirm-info-item-label">预计结算：</view>
+              <view class="confirm-info-item-value">¥70.22</view>
+            </view>
+          </view>
+          <view :style="{ color: mainColor,textAlign: 'center',fontSize:'24rpx'}">因各平台市场价有出入，建议报价前自主核实价格，避免因价格出入问题弃单被扣分!</view>
+          <template slot="btn">
+            <XdButton 
+              width="180rpx"
+              size="small" 
+              type="default"
+              bgColor="#EEE"
+              color="#999"
+              @click="showConfirmDialog = false"
+            >取消</XdButton>
+            <XdButton 
+              width="180rpx"
+              size="small" 
+              type="primary" 
+              @click="handleConfirmQuote"
+            >确定</XdButton>
+          </template>
+        </XdDailog> -->
+        <XdDailog width="70%" :showClose="false" :show.sync="showMsgDialog">
+          <template slot="title">
+            <view class="dialog-title">{{ msgTitle }}</view>
+          </template>
+          <view>{{ msg }}</view>
+          <template slot="btn">
+            <XdButton 
+              width="180rpx"
+              size="small" 
+              type="primary" 
+              @click="showMsgDialog = false"
+            >确定</XdButton>
+          </template>
+        </XdDailog>
+        <XdDailog width="70%" :showClose="false" :show.sync="showCancelDialog">
+          <template slot="title">
+            <view class="dialog-title">提示</view>
+          </template>
+          <view>是否确认取消报价</view>
+          <template slot="btn">
+            <XdButton 
+              width="180rpx"
+              size="small" 
+              bgColor="#EEE"
+              color="#999"
+              type="primary"
+              @click="showCancelDialog = false"
+            >取消</XdButton>
+            <XdButton 
+              width="180rpx"
+              size="small" 
+              type="primary" 
+              @click="handleCancelQuote"
+            >确定</XdButton>
+          </template>
+        </XdDailog>
+        <CusEditQuote 
+          v-if="showEditQuoteDialog"
+          :mainColor="mainColor"
+          :info="info"
+          @close="showEditQuoteDialog=false"
+          @confirm="handleConfirmEditQuote"
+        ></CusEditQuote>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdContentXss from "@/components/XdContentXss/XdContentXss";
+  import XdDailog from "@/components/XdDailog/XdDailog";
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdUpload from "@/components/XdUpload/XdUpload";
+  import Products from './components/products.vue'
+  import CusEditQuote from "./components/CusEditQuote.vue";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbTakeorderOrderDetailMixin from "./JfbTakeorderOrderDetailMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  const Color = require("color");
+
+  export default {
+    name: "JfbTakeorderOrderDetail",
+    components: {
+      XdFontIcon,
+      XdContentXss,
+      XdDailog,
+      XdButton,
+      Products,
+      CusEditQuote,
+      XdUpload
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbTakeorderOrderDetailMixin
+    ],
+    data() {
+      return {
+        info: {
+            id: 1,
+            num: 15,
+            people: 30,
+            remainingTime: 10,
+            shop_name: "味多美(北京西单大悦城店)",
+            brand_name: "味多美",
+            city: "北京市",
+            products: [
+              {
+                product_thumb:
+                  "https://img.js.design/assets/img/68b554c9c3a1ea02642d7d2f.png#afa2b9b9d50bcd2f1394619ecc488a99",
+                product_name:
+                  "贝欧宝 BIOBOR贝欧宝维生素C+叶黄素酯软糖118g多重营养3D小熊造型糖果Q弹维生素C+叶黄素酯软糖",
+                product_sku: "118g",
+                minPrice: 132,
+                maxPrice: 1232,
+                num: 15,
+              },
+              {
+                product_thumb:
+                  "https://img.js.design/assets/img/68b554c9c3a1ea02642d7d2f.png#afa2b9b9d50bcd2f1394619ecc488a99",
+                product_name:
+                  "贝欧宝 BIOBOR贝欧宝维生素C+叶黄素酯软糖118g多重营养3D小熊造型糖果Q弹维生素C+叶黄素酯软糖",
+                product_sku: "450g",
+                minPrice: 456,
+                maxPrice: 1546,
+                num: 16,
+              },
+            ],
+            market_price: 4000,
+            minPrice: 456,
+            maxPrice: 1546,
+            order_status: 1,
+        },
+        notice: '',
+        // 报价倒计时是否结束
+        isCountdownEnd: false,
+        // 报价倒计时定时器标识（用于清除定时器）
+        countdownTimer: null,
+        // 报价倒计时剩余秒数
+        remainingSeconds: 20,
+        // 待上报订单倒计时是否结束
+        isOrderCountdownEnd: false,
+        // 待上报订单倒计时定时器标识
+        orderCountdownTimer: null,
+        // 待上报订单倒计时剩余秒数
+        orderCountdownSeconds: 600,
+        quotePrice: '',
+        closeMask: true,
+        showConfirmDialog: false,
+        quoteDisabled: false,
+        showMsgDialog: false,
+        step: 1,
+        showCancelDialog: false,
+        msg: "",
+        msgTitle: "",
+        showEditQuoteDialog: false,
+        status: 'daishangbao',
+        uploadBackground: ""
+      }
+    },
+    computed: {
+      prod_bottom() {
+        return this.fixedStyle({ height: 0, zIndex: 111 });
+      },
+      btnStyle() {
+        return {
+          color: this.mainColor,
+          border: `1px solid ${this.mainColor}`,
+        };
+      },
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+      status(newVal) {
+        // 当状态变为待上报时，启动10分钟倒计时
+        if (newVal === 'daishangbao') {
+          this.orderCountdownSeconds = 600; // 10分钟 = 600秒
+          this.isOrderCountdownEnd = false;
+          this.startOrderCountdown();
+        } else {
+          // 其他状态时清除待上报订单倒计时
+          this.clearOrderCountdown();
+        }
+      },
+    },
+    created() {
+      this.init(this.container);
+
+      //todo
+    },
+    methods: {
+      onJfbLoad(options) {
+        this.getContent()
+        // 如果是待上报状态，启动10分钟倒计时
+        if (this.status === 'daishangbao') {
+          this.orderCountdownSeconds = 600; // 10分钟 = 600秒
+          this.isOrderCountdownEnd = false;
+          this.startOrderCountdown();
+        }
+      },
+      getContent() {
+        jfbRootExec("getListBaseNewsContent", {
+          vm: this,
+          data: {
+            page_id: this.pageAttr["page_id"], //页面ID
+            container_id: this.containerId, //组件ID
+            limit: 1,
+          },
+        })
+          .then((res) => {
+            if (res.list.length > 0) {
+              if (res.list && res.list.length > 0) {
+                this.notice = this.$xdUniHelper.filterHtml(res.list[0].content);
+              }
+            }
+          })
+          .catch((error) => {
+            console.error(error);
+          });
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.uploadBackground = Color(this.mainColor).alpha(0.15).toString();
+        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+
+        //this.height = getContainerPropsValue(container, 'content.height', 10);
+      },
+      toConfirmQuote() {
+        if (!this.quotePrice) {
+          this.$xdAlert({ content: "请输入报价" });
+          return 
+        }
+        this.step=2
+      },
+      handleSubmitQuote() {
+        // this.showConfirmDialog = false;
+        this.step=3
+        this.quoteDisabled = true;
+        
+      },
+      handleCancelQuote() {
+        //请求接口，判断是否可以取消报价
+        this.msg = '报价已结束'
+        this.msgTitle = '提示'
+        this.showCancelDialog = false
+        this.showMsgDialog = true
+      },
+      handleConfirmEditQuote() {
+        //调用接口 
+        // 上报订单时停止待上报订单倒计时
+        if (this.status === 'daishangbao') {
+          this.clearOrderCountdown();
+          this.isOrderCountdownEnd = true;
+        }
+      },
+      startCountdown() {
+        // 先清除可能存在的旧定时器，防止重复计时
+        this.clearCountdown();
+
+        // 创建每秒执行的定时器
+        this.countdownTimer = setInterval(() => {
+          if (this.remainingSeconds > 0) {
+            // 剩余秒数减1
+            this.remainingSeconds--;
+          } else {
+            // 倒计时结束：清除定时器 + 标记结束状态
+            this.clearCountdown();
+            this.isCountdownEnd = true;
+            console.log("报价倒计时结束");
+          }
+        }, 1000);
+      },
+      /**
+       * 启动待上报订单倒计时
+       */
+      startOrderCountdown() {
+        // 先清除可能存在的旧定时器，防止重复计时
+        this.clearOrderCountdown();
+
+        // 创建每秒执行的定时器
+        this.orderCountdownTimer = setInterval(() => {
+          if (this.orderCountdownSeconds > 0) {
+            // 剩余秒数减1
+            this.orderCountdownSeconds--;
+          } else {
+            // 倒计时结束：清除定时器 + 标记结束状态
+            this.clearOrderCountdown();
+            this.isOrderCountdownEnd = true;
+            // 倒计时结束自动放弃订单
+            this.handleAutoCancelOrder();
+            console.log("待上报订单倒计时结束");
+          }
+        }, 1000);
+      },
+      /**
+       * 格式化秒数为 分:秒 格式（比如 60秒 → 01:00，5秒 → 00:05）
+       * @param {Number} seconds 待格式化的秒数
+       * @returns {String} 格式化后的时间字符串
+       */
+      formatTime(seconds) {
+        // 计算分钟
+        const minutes = Math.floor(seconds / 60);
+        // 计算剩余秒数
+        const secs = seconds % 60;
+        // 补零处理（确保两位数显示）
+        const formatMinutes = minutes.toString().padStart(2, "0");
+        const formatSecs = secs.toString().padStart(2, "0");
+        return `${formatMinutes}:${formatSecs}`;
+      },
+      /**
+       * 格式化秒数为 XX分XX秒 格式（用于待上报状态倒计时显示）
+       * @param {Number} seconds 待格式化的秒数
+       * @returns {String} 格式化后的时间字符串，如 "02分59秒"
+       */
+      formatCountdownTime(seconds) {
+        // 计算分钟
+        const minutes = Math.floor(seconds / 60);
+        // 计算剩余秒数
+        const secs = seconds % 60;
+        // 补零处理（确保两位数显示）
+        const formatMinutes = minutes.toString().padStart(2, "0");
+        const formatSecs = secs.toString().padStart(2, "0");
+        return `${formatMinutes}分${formatSecs}秒`;
+      },
+      /**
+       * 倒计时结束时自动放弃订单
+       */
+      handleAutoCancelOrder() {
+        // 自动放弃订单的逻辑
+        this.msg = '订单已自动放弃，倒计时结束前未进行操作';
+        this.msgTitle = '提示';
+        this.showMsgDialog = true;
+        // 这里可以调用放弃订单的接口
+        // TODO: 调用放弃订单接口
+      },
+      /**
+       * 清除报价倒计时定时器
+       */
+      clearCountdown() {
+        if (this.countdownTimer) {
+          clearInterval(this.countdownTimer);
+          this.countdownTimer = null;
+        }
+      },
+      /**
+       * 清除待上报订单倒计时定时器
+       */
+      clearOrderCountdown() {
+        if (this.orderCountdownTimer) {
+          clearInterval(this.orderCountdownTimer);
+          this.orderCountdownTimer = null;
+        }
+      },
+      handleUploadDone(files) {
+        console.log('event.handleUploadDone', files);
+      },
+      onJfbScroll(options) {
+        console.log('event.onJfbScroll', options)
+      },
+      onJfbReachBottom(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+      onJfbShow(options) {
+        console.log('event.onJfbShow', options)
+      },
+      onJfbHide(options) {
+        console.log('event.onJfbHide', options)
+      },
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+      },
+      onJfbUpdate(...data) {
+        console.log('event.onJfbUpdate', data)
+      },
+      onJfbCustomEvent(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+      onJfbUnload(){
+        this.clearCountdown();
+        this.clearOrderCountdown();
+      }
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbTakeorderOrderDetailLess.less";
+
+  .jfb-takeorder-order-detail {
+    &__countdown-banner {
+      display: flex;
+      align-items: center;
+      padding: 24rpx 32rpx;
+      margin: 16rpx 16rpx 0 16rpx;
+      border-radius: 16rpx 16rpx 0 0;
+      background: #E5010E;
+      & > xd-font-icon {
+        margin-right: 16rpx;
+      }
+    }
+    &__countdown-text {
+      color: #fff;
+      font-size: 28rpx;
+      flex: 1;
+    }
+    &__body{
+      .wrap{
+        background: #fff;
+        margin: 16rpx;
+        border-radius: 16rpx;
+      }
+      .order-info{
+        &-title {
+          display: flex;
+          justify-content: space-between;
+          padding: 24rpx 32rpx;
+          border-bottom: 1px solid #f4f4f4;
+          &-left {
+            display: flex;
+            align-items: center;
+          }
+          &-right {
+            font-weight: 500;
+          }
+        }
+        &-product {
+          display: flex;
+          padding: 16rpx 32rpx;
+          border-bottom: 1px solid #f4f4f4;
+          & > image {
+            width: 180rpx;
+            height: 180rpx;
+            flex-shrink: 0;
+            border: 10rpx;
+          }
+          &-info {
+            margin-left: 24rpx;
+            &-name {
+              .uni-max-cut(2,80);
+              margin-bottom: 10rpx;
+            }
+            &-sku {
+              font-size: 24rpx;
+              color: #999;
+            }
+            &-price {
+              margin-top: 10rpx;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              &-left {
+                color: #ff2c18;
+                font-size: 32rpx;
+                font-weight: 500;
+                & > text {
+                  font-size: 24rpx;
+                  margin-right: 10rpx;
+                }
+                .range {
+                  margin: 0 10rpx;
+                }
+              }
+              &-right {
+                color: #999;
+                display: flex;
+                align-items: baseline;
+                & > view {
+                  margin-left: 10rpx;
+                }
+              }
+            }
+          }
+        }
+      }
+      .other-info-item {
+        display: flex;
+        justify-content: space-between;
+        padding: 20rpx 32rpx;
+        color: #333;
+        font-size: 28rpx;
+        border-bottom: 2rpx solid #f8f8f8;
+      }
+      .quote {
+        &-title {
+          font-size: 28rpx;
+          color: #333;
+          padding: 24rpx 0 24rpx 32rpx;
+        }
+        &-input {
+          position: relative;
+          padding: 0 32rpx 24rpx 32rpx;
+          &-unit {
+            position: absolute;
+            left: 55rpx;
+            top: 50%;
+            transform: translateY(-80%);
+            font-size: 28rpx;
+            color: #333;
+            font-weight: 700;
+          }
+          &>input {
+            background:#F8F8F8;
+            font-size: 28rpx;
+            padding: 20rpx 46rpx 20rpx 60rpx;
+            border-radius: 16rpx;
+          }
+        }
+        &-advice{
+          font-size: 24rpx;
+          color: #666666;
+          padding: 0 0 24rpx 32rpx;
+        }
+      }
+      .fixe_bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        height: unit(100, rpx);
+        padding: 0 unit(40, rpx);
+        flex-flow: nowrap;
+        background: #fff;
+        box-shadow: 0 0 unit(16, rpx) rgba(0, 0, 0, 0.05);
+        .flex_l {
+          display: flex;
+          align-items: center;
+          font-size: unit(32, rpx);
+        }
+
+        & > view {
+          flex: 1;
+          padding: 0 unit(15, rpx);
+        }
+      }
+      .dialog-title{
+        color: #666666;
+        font-size: 28rpx;
+      }
+      .confirm-info {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 32rpx;
+
+        &-item {
+          display: flex;
+          justify-content: center;
+          margin-bottom: 16rpx;
+          font-size: 28rpx;
+          color: #333;
+          &-label {
+            width: 140rpx;
+            flex-shrink: 0;
+          }
+          &-value{
+            margin-left: 48rpx;
+            width: 120rpx;
+            flex: 1;
+            flex-wrap: wrap;
+            display: flex;
+            justify-content: flex-start;
+          }
+        }
+      }
+      .upload-title {
+        border-radius: 4rpx;
+        background: #E5010E;
+        border: 1px solid #E5010E;
+        padding: 24rpx 0;
+        text-align: center;
+      }
+      .upload {
+        padding: 24rpx 32rpx;
+      }
+      .upload-notice {
+        color: #999999;
+        font-size: 24rpx;
+        margin-top: 24rpx;
+      }
+      .voucher {
+        &-item {
+          display: flex;
+          margin-bottom: 26rpx;
+          &-image {
+            flex-shrink: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            & > image {
+              width: 180rpx;
+              height: 180rpx;
+              border-radius: 4rpx;
+            }
+            & > view {
+              color: #666;
+              font-size: 24rpx;
+            }
+          }
+          &-info {
+            &-label {
+              color: #666;
+              font-size: 24rpx;
+              margin-right: 24rpx;
+            }
+            &-number {
+              display: flex;
+              align-items: center;
+              margin-bottom: 24rpx;
+              & > view {
+                font-size: 28rpx;
+                color: #999;
+                background: #f8f8f8;
+                padding: 20rpx;
+                border-radius: 16rpx;
+              }
+            }
+            &-qrcode {
+              display: flex;
+              align-items: flex-start;
+              & > image {
+                width: 120rpx;
+                height: 120rpx;
+                border-radius: 4rpx;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>