jufubao-base 1.0.237-beta1 → 1.0.237-beta4

package/src/components/JfbBaseConsumpCode/JfbBaseConsumpCode.vue

@@ -0,0 +1,961 @@
+<template>
+  <view class="jfb-base-consump-code" @click="handleEditxSelect" :class="{ editx : isEditx && active }">
+    <!--#ifdef H5-->
+    <view class="jfb-base-consump-code__edit" :class="{ editx : isEditx && active }" v-if="isEditx && active">
+      <view class="jfb-base-consump-code__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-consump-code__body" :style="{
+      minHeight: layoutInfo.bodyMinHeightRpx + 'rpx',
+      background: 'url(https://img.js.design/assets/img/678f560988986af5661c2876.png#a3be067970d2c78a56d08024581a9ca0)',
+      backgroundSize: '100% 100%'
+    }">
+      <view class="content-box">
+        <view class="logo-box">
+          <image :src="userInfo['head_url']" class="logo"></image>
+        </view>
+        <view v-if="isFlow">
+          <view @click="handleToShop" class="shop">
+            <view>{{shopName}}</view>
+            <XdFontIcon size="20" icon="iconxiangyou_xian"></XdFontIcon>
+          </view>
+          <view class="verification-item">
+            <view class="verification-item-label">提货标签</view>
+            <view class="verification-item-tags">
+              <view :style="{color:tag_id===item.value?mainColor:'',borderColor: tag_id===item.value?mainColor:''}"
+                v-for="(item,index) in settle_tag_list" :key="index" @click="handlerTagRadio(item)">{{item.label}}
+              </view>
+            </view>
+            <view class="nodata" v-if="settle_tag_list_status">结算标签为空，请联系店员设置后重试</view>
+          </view>
+          <view class="verification-item">
+            <view class="verification-item-label">提货点数</view>
+            <view class="verification-item-input">
+              <input v-model="total_price" @input="(value)=>handlerPrice(value)" type="text">
+              <xd-number v-if="curTag.is_static_price" class="xd-number" :min="1" :max="999" v-model="num"
+                @change="handleNumberChange"></xd-number>
+              <view :style="{color:mainColor}" class="tip">*提货点数请咨询店员，提货成功后无法退换</view>
+            </view>
+          </view>
+          <XdButton v-if="btnDisabled" style="margin-top: 200rpx" width="260rpx" type="primary" disabled>下一步</XdButton>
+          <XdButton v-else style="margin-top: 200rpx" width="260rpx" type="primary" @click="toPayOrder">下一步</XdButton>
+        </view>
+        <view v-else>
+          <view v-if="!showMask">
+            <view @click="handleToShop" class="shop">
+              <view>{{shopName}}</view>
+              <XdFontIcon size="20" icon="iconxiangyou_xian"></XdFontIcon>
+            </view>
+            <image mode="aspectFit" class="bar-code" :src="barcode_url">
+            </image>
+            <view class="bar-code-text">{{barCode}}</view>
+            <image mode="aspectFit" class="qrcode" :src="code_url">
+            </image>
+            <view class="code-refresh">{{expiration_sec_str}}后自动更新</view>
+            <view class="vip" v-if="plusDiscount">
+              <view class="vip-title">
+                <view class="vip-title-left">PLUS会员专享</view>
+                <view class="vip-title-right">
+                  <text>{{plusDiscount/1000}}</text>折
+                </view>
+              </view>
+              <view class="vip-open" @click="handleToOpen">
+                <xd-font-icon color="#FCBF28" size="20" icon="iconPLUShuiyuan"></xd-font-icon>
+                <text>立即开通</text>
+                <xd-font-icon size="20" icon="iconxiangyou_xian"></xd-font-icon>
+              </view>
+            </view>
+          </view>
+          <view class="mask-box" v-else>
+            <view class="mask">
+              <view class="mask-title">{{tip}}</view>
+              <!-- <view class="mask-open">
+                PLUS会员专享 <span :style="{color:mainColor,marginLeft:'8rpx'}">8</span>折 <span @click="handleToOpen"
+                  :style="{color:mainColor,marginLeft:'15rpx'}">立即开通</span>
+              </view> -->
+            </view>
+          </view>
+        </view>
+
+      </view>
+    </view>
+    <XdDialog :show.sync="showDialog" :showClose="false" :showTitle="false">
+      <view class="dialog-title" slot="title">门店确认</view>
+      <view class="dialog-content">
+        <view>当前门店：<span :style="{color:mainColor}">{{shopName}}</span></view>
+        <view>请确认您是否在当前门店中</view>
+      </view>
+      <view class="dialog-btns" slot="btn">
+        <XdButton @click="handleToShop" bgColor="#EEEEEE" color="#888888" size="small" type="info">更换门店</XdButton>
+        <XdButton @click="handleConfirm" size="small" type="primary">确认</XdButton>
+      </view>
+    </XdDialog>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdDialog from "@/components/XdDailog/XdDailog";
+  import XdButton from "@/components/XdButton/XdButton";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseConsumpCodeMixin from "./JfbBaseConsumpCodeMixin";
+  import getServiceUrl from "@/common/getServiceUrl";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  import { mapState } from 'vuex';
+
+  export default {
+    name: "JfbBaseConsumpCode",
+    components: {
+      XdFontIcon,
+      XdDialog,
+      XdButton
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbBaseConsumpCodeMixin
+    ],
+    data() {
+      return {
+        openPath: "",
+        shopPath: "",
+        successPath: "",
+        cashPayPath: "",
+        showDialog: false,
+        showMask: true,
+        shop_id: '',
+        secondTimer: null,
+        expiration_sec: '',
+        code_url: '',
+        barcode_url: '',
+        barCode: '',
+        statusTimer: null,
+        validTimer: null,
+        payChannels: [],
+        channel_provider_id: "",
+        options: {},
+        canEdit: true,
+        settle_tag_list: [],
+        settle_tag_list_status: false,
+        tag_id: "",
+        price: "",
+        total_price: "",
+        num: 1,
+        tip: '',
+        shopName: '',
+        isFlow: false,
+        xnamespace: '',
+        plusDiscount: 0,
+        userInfo: {}
+      }
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+      stateLocation(n, o) {
+        if (JSON.stringify(n) === JSON.stringify(o)) return;
+        this.onJfbLoad(this.options)
+      }
+    },
+    computed: {
+      ...mapState({
+        stateCity: state => state.cityLocation.city,
+        stateLocation: state => state.cityLocation.location || {},
+        brandInfo: state => state.brandInfo,
+      }),
+      expiration_sec_str() {
+        //秒数转 x分x秒
+        let second = this.expiration_sec;
+        if (second < 60) {
+          return second + "秒";
+        }
+        let min = parseInt(second / 60);
+        let sec = second % 60;
+        return `${min}分${sec}秒`;
+      },
+      curTag() {
+        return this.settle_tag_list.find(item => item.value === this.tag_id) || {}
+      },
+      curTagPrice() {
+        const curTag = this.curTag;
+        if (this.$xdUniHelper.isEmpty(curTag)) return 0;
+        if (curTag.is_static_price) {
+          return curTag.price_yuan;
+        } else {
+          return this.total_price;
+        }
+      },
+      btnDisabled() {
+        return this.total_price === '' || !this.tag_id;
+      }
+    },
+    created() {
+      this.init(this.container);
+    },
+    methods: {
+      async onJfbLoad(options) {
+        this.xnamespace = this.projectAttr.business_code
+        this.getUserInfo()
+        this.options = options
+        if (!this.isPreview) {
+          if (Object.keys(this.stateLocation).length === 0) {
+            this.tip = '为了给您提供更好的服务需要获取您的位置信息'
+            this.showMask = true;
+            this.showDialog = false;
+            return
+          }
+        }
+        if (!this.options.shop_id) {
+          jfbRootExec("getConsumpShopList", {
+            vm: this,
+            data: {
+              city_code: this.stateCity.city_code,
+              consume_mode: 'SELL',
+              latitude: this.stateLocation.latitude + '',
+              longitude: this.stateLocation.longitude + '',
+            },
+          }).then(res => {
+            if (res && res.list.length > 0) {
+              this.shop_id = res.list[0].shop_id;
+              this.shopName = res.list[0].resource_shop_name;
+              this.showMask = true;
+              this.showDialog = true;
+            } else {
+              this.tip = '您的附近暂时没有支持的店铺'
+              this.showDialog = false;
+            }
+          })
+        } else {
+          this.shop_id = this.options.shop_id;
+          this.p_getAsyncStep();
+        }
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.openPath = getContainerPropsValue(
+          container,
+          "content.openPath",
+          { value: "" }
+        ).value;
+        this.shopPath = getContainerPropsValue(
+          container,
+          "content.shopPath",
+          { value: "" }
+        ).value;
+        this.successPath = getContainerPropsValue(
+          container,
+          "content.successPath",
+          { value: "" }
+        ).value;
+        this.cashPayPath = getContainerPropsValue(container, 'content.cash_pay_path', { value: "" }
+        ).value;
+      },
+      getUserInfo() {
+        jfbRootExec("getConsumpBaseUserInfo", {
+          vm: this,
+          data: {},
+        }).then(res => {
+          this.userInfo = res || {};
+        })
+      },
+      async p_getAsyncStep() {
+        await this.p_getQuickPayQRCode();
+        if (!this.isFlow) {
+          this.p_getQRCodeStatus();
+          this.p_getListUserPayChannel();
+        }
+      },
+      p_getListUserPayChannel() {
+        const { pay_channels } = this.projectAttr;
+        jfbRootExec("getConsumpListUserPayChannel", {
+          vm: this,
+          data: {
+            providers: pay_channels && pay_channels.join(","),
+          },
+        }).then((res) => {
+          console.log("p_getListUserPayChannel", res);
+          this.payChannels = res.list;
+          this.channel_provider_id = res.list[0].channel_provider_id;
+        });
+      },
+      p_getQuickPayQRCode() {
+        return new Promise((resolve, reject) => {
+          this.$xdShowLoading({});
+          jfbRootExec("getConsumpCode", {
+            vm: this,
+            data: {
+              shop_id: this.shop_id,
+              temp_order_id: this.temp_order_id,
+            }
+          }).then(res => {
+            this.$xdHideLoading();
+            this.plusDiscount = res.plus_discount
+            if (res.is_st_flow === 'Y') {
+              //水牌
+              this.isFlow = true
+              this.shopName = res.shop_name;
+              this.getSettleTagList()
+            } else {
+              // 消费码
+              this.temp_order_id = res.temp_order_id;
+              let code_url = this.brandInfo['api_host'] + res.code_url;
+              let barcode_url = this.brandInfo['api_host'] + res.barcode_url;
+              if (this.isPreview) code_url = res.code_url;
+              if (this.isPreview) barcode_url = res.barcode_url;
+              this.code_url = code_url;
+              this.barcode_url = barcode_url;
+              this.barCode = res.payment_code
+              this.expiration_sec = res.expiration_sec;
+              this.showMask = false;
+              this.shopName = res.shop_name;
+              clearInterval(this.secondTimer);
+              this.secondTimer = setInterval(() => {
+                this.expiration_sec--;
+                if (this.expiration_sec <= 0) {
+                  clearInterval(this.secondTimer);
+                  this.p_getQuickPayQRCode();
+                }
+              }, 1000);
+              resolve();
+            }
+
+          }).catch(err => {
+            console.error(err);
+            reject(err);
+          })
+        })
+      },
+      p_getQRCodeStatus() {
+        jfbRootExec("getConsumpCodeScanStatus", {
+          vm: this,
+          data: {
+            temp_order_id: this.temp_order_id,
+            shop_id: this.shop_id
+          }
+        }).then(res => {
+          //P处理中 Y成功 E 失败
+          if (res.status === 'P') {
+            if (!this.isPreview) {
+              if (this.statusTimer) clearTimeout(this.statusTimer);
+              this.statusTimer = setTimeout(() => {
+                this.p_getQRCodeStatus();
+              }, 2000);
+            }
+          } else if (res.status === 'Y') {
+            //订单下单有效时间 秒
+            this.orderSeconds = res.seconds;
+            if (this.orderSeconds > 0) {
+              this.validTimer = setInterval(() => {
+                this.orderSeconds--;
+                if (this.orderSeconds <= 0) {
+                  this.handlerOderFail();
+                }
+
+              }, 1000)
+            }
+            this.p_createOrder();
+          } else if (res.status === 'E') {
+            this.$xdAlert({
+              content: res.message,
+              time: 1500,
+              isClose: false,
+              zIndex: 5000
+            });
+          }
+        })
+      },
+      p_createOrder() {
+        jfbRootExec("batchConsumpUseCardCreated", {
+          vm: this,
+          data: {
+            temp_order_id: this.temp_order_id,
+            business_code: this.xnamespace,
+          }
+        }).then(res => {
+          this.request_order_id = res.request_order_id;
+          this.p_getOrderStatus();
+        }).catch(err => {
+          this.handlerOderFail();
+        })
+      },
+      p_getOrderStatus() {
+        jfbRootExec("getConsumpAsyncSubmitStatus", {
+          vm: this,
+          data: {
+            request_order_id: this.request_order_id
+          }
+        }).then(res => {
+          let { hand_status, hand_status_msg, order_id, pay_order_id, need_pay_price } = res;
+
+          if (hand_status === 'U') {
+            this.orderTimer = setTimeout(() => {
+              this.p_getOrderStatus();
+            }, 2000)
+          } else if (hand_status === 'S') {  //成功
+            if (parseFloat(need_pay_price) > 0) {//补差
+              this.handleThirdPay(pay_order_id, order_id);
+            } else {//订单成功
+              this.$xdUniHelper.redirectTo({
+                url: this.successPath + `?order_id=${order_id}`
+              })
+            }
+          } else if (hand_status === 'F') {
+            this.handlerOderFail();
+            this.$xdAlert({
+              content: hand_status_msg || '支付失败',
+              time: 3000,
+              isClose: false,
+              zIndex: 5000
+            });
+          }
+        })
+      },
+      openTemplatePay(paySignData, cb) {
+        const { timeStamp, ...otherData } = paySignData;
+        otherData["timestamp"] = timeStamp;
+        // #ifdef H5
+        this.jwxSDK.chooseWXPay({
+          ...otherData,
+          success: (res) => {
+            this.$xdLog.setARMSInfo({ options: this.options, res }, 'pay_success');
+            uni.showToast({
+              title: "支付成功",
+            });
+            cb(res);
+          },
+          cancel: () => {
+            this.onRefreshPage();
+            this.$xdLog.setARMSInfo(this.options, 'cancel_pay');
+            uni.showToast({
+              title: "取消支付",
+            });
+          },
+          fail: (error) => {
+            this.onRefreshPage();
+            if (typeof error === 'string') error = { error: error }
+            if (window['jwxJfbSDKParams']) error = Object.assign(error, paySignData, window['jwxJfbSDKParams'])
+            this.$xdLog.setARMSError(error)
+            uni.showToast({
+              title: "支付失败",
+            });
+          },
+        });
+        // #endif
+        // #ifdef MP
+        wx.requestPayment({
+          ...paySignData,
+          success: (res) => {
+            this.$xdLog.setARMSInfo({ options: this.options, res }, 'pay_success');
+            uni.showToast({
+              title: "支付成功",
+              icon: "none",
+            });
+            cb(res);
+          },
+          fail: (err) => {
+            this.onRefreshPage();
+            this.$xdLog.setARMSError({
+              options: this.options,
+              error: JSON.stringify(err)
+            });
+            uni.showToast({
+              title: "支付失败",
+              icon: "none",
+            });
+          },
+        });
+        // #endif
+      },
+      onRefreshPage() {
+        this.temp_order_id = "";
+        if (this.validTimer) clearInterval(this.validTimer)
+        this.p_getAsyncStep();
+      },
+      getSettleTagList() {
+        this.$xdShowLoading({});
+
+        jfbRootExec("getConsumpSettleMainInfo", {
+          vm: this,
+          data: {
+            shop_id: this.shop_id,
+          }
+        }).then(res => {
+          this.$xdHideLoading();
+          const { settle_tag_list } = res;
+          this.settle_tag_list = settle_tag_list;
+          if (settle_tag_list.length > 0) {
+            this.handlerTagRadio(settle_tag_list[0]);
+            this.settle_tag_list_status = false;
+          }
+          else this.settle_tag_list_status = true;
+        }).catch(err => {
+          this.$xdHideLoading();
+          this.$xdLog.catch(error)
+        })
+      },
+      toPayOrder(options = {}) {
+        let { tag_id, total_price, curTag, num = 1, shop_id } = this;
+        let err_tip = "";
+        if (!curTag.is_static_price) this.price = total_price;
+        if (curTag.is_static_price) {
+          if (total_price > 10000) {
+            err_tip = '金额不能超过10000'
+          }
+        }
+        let price = this.price;
+        if (!price) err_tip = "请填写正确的提货金额";
+        if (!tag_id) err_tip = "请选择结算标签";
+        if (err_tip) {
+          uni.showToast({
+            title: err_tip,
+            icon: 'none'
+          });
+          return false;
+        }
+        if (this.total_price == 0) {
+          uni.showToast(
+            {
+              title: '核销金额不能为0',
+              icon: 'none'
+            }
+          )
+          return
+        }
+        jfbRootExec("addConsumpCashierTempOrderData", {
+          vm: this,
+          data: {
+            shop_id: this.shop_id,
+            settle_tag_id: this.tag_id,
+            num: this.num,
+            settle_tag_price: this.curTagPrice,
+            total_price: this.total_price,
+            ...options
+          }
+        })
+          .then(res => {
+            if (res.confirm_notice) {
+              return this.useCardPop(res).then(data => {
+                if (data == 2) {
+                  this.toPayOrder({
+                    is_ignore_unique_check: "Y"
+                  })
+                }
+              })
+            } else {
+              this.price = "";
+              let params = {
+                ...this.options,
+                price: price,
+                num: num,
+                tag: tag_id,
+                shop_id: shop_id,
+                cart_order_id: res.cart_order_id
+              };
+              params = this.$xdUniHelper.jsonToParams(params)
+              this.$xdUniHelper.navigateTo({
+                url: this.cashPayPath + `?${params}`
+              })
+            }
+          })
+          .catch(error => {
+            console.error(error);
+          })
+      },
+      //选卡弹出项
+      useCardPop(data) {
+        return new Promise((resolve, reject) => {
+          uni.showModal({
+            title: '提示',
+            content: data.msg,
+            // confirmText: data.confirm_text,
+            // cancelText: data.cancel_text,
+            success: function (res) {
+              if (res.confirm) {
+                resolve(2);
+              } else if (res.cancel) {
+                resolve();
+              }
+            },
+            fail: function (res) {
+              reject(res);
+            }
+          });
+        })
+      },
+      handlerPrice(e) {
+        this.$nextTick(() => {
+          this.total_price = e.detail.value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1');
+          if (this.total_price > 10000) {
+            this.total_price = 10000
+            uni.showToast(
+              {
+                title: '核销金额不能超过10000',
+                icon: 'none'
+              }
+            )
+          }
+        })
+      },
+      handleThirdPay(pay_order_id, main_order_id) {
+        let { login_providers = [] } = this.projectAttr;
+        let data = {
+          order_id: pay_order_id,
+          channel_provider_id: this.channel_provider_id,
+          login_providers: login_providers.join(","),
+        };
+        //设置支付成功页面地址
+        if (!this.$configProject.isPreview) {
+          data['pay_success_url'] = '';
+          // #ifdef H5
+          data['pay_success_url'] = `${window.location.protocol}//${window.location.host}/${this.projectAttr.deploy_dir}`;
+          // #endif
+          data['pay_success_url'] += this.successPath + `?order_id=${main_order_id}`;
+        }
+
+        jfbRootExec("setConsumpThirdPlace", {
+          vm: this,
+          data,
+        })
+          .then((res) => {
+            this.$xdHideLoading();
+            const { channel_data } = res;
+            const paySignData = JSON.parse(Base64.decode(channel_data));
+            this.openTemplatePay(paySignData, (ps) => {
+              jfbRootExec("updateConsumpPay", {
+                vm: this,
+                data: {
+                  main_order_id: main_order_id,
+                },
+              })
+                .then((res) => {
+                  this.$xdUniHelper.redirectTo({
+                    url: this.successPath + `?order_id=${main_order_id}`
+                  });
+                })
+                .catch(error => {
+                  this.$xdLog.setARMSCustomError('update_loading_fail', { options: this.options, error });
+                });
+            })
+          });
+      },
+      //订单失效
+      handlerOderFail() {
+        console.warn("handlerOderFail");
+        this.temp_order_id = "";
+        clearInterval(this.validTimer);
+        clearTimeout(this.orderTimer);
+        clearInterval(this.secondTimer);
+      },
+      handleToShop() {
+        this.$xdUniHelper.navigateTo({
+          url: this.shopPath
+        });
+      },
+      handleToOpen() {
+        this.$xdUniHelper.navigateTo({
+          url: this.openPath
+        });
+      },
+      handleConfirm() {
+        this.showDialog = false;
+        this.p_getAsyncStep();
+      },
+      handlerTagRadio(item) {
+        this.tag_id = item.value;
+        this.canEdit = !item.is_static_price;
+        this.num = 1;
+        if (item.is_static_price) {
+          this.total_price = item.price_yuan
+          this.price = item.price_yuan
+        } else {
+          this.total_price = "";
+          this.price = "";
+        }
+      },
+      handleNumberChange(num) {
+        let curTag = this.curTag;
+        this.total_price = this.$xdUniHelper.multiplyFloatNumber(curTag.price_yuan, num);
+      },
+      onJfbUnload(options) {
+        console.log('event.onJfbUnload', options)
+        if (this.secondTimer) clearInterval(this.secondTimer);
+        if (this.statusTimer) clearTimeout(this.statusTimer);
+        if (this.orderTimer) clearTimeout(this.orderTimer);
+      },
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+        if (this.secondTimer) clearInterval(this.secondTimer);
+        if (this.statusTimer) clearTimeout(this.statusTimer);
+        if (this.orderTimer) clearTimeout(this.orderTimer);
+      },
+      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)
+        if (this.secondTimer) clearInterval(this.secondTimer);
+        if (this.statusTimer) clearTimeout(this.statusTimer);
+        if (this.orderTimer) clearTimeout(this.orderTimer);
+      },
+      onJfbUpdate(...data) {
+        console.log('event.onJfbUpdate', data)
+      },
+      onJfbCustomEvent(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseConsumpCodeLess.less";
+
+  .jfb-base-consump-code {
+    &__body {
+      .content-box {
+        margin: 158rpx 30rpx 0 30rpx;
+        background-color: #fff;
+        padding: 81rpx 32rpx 32rpx 32rpx;
+        border-radius: 24rpx;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .logo-box {
+          width: 154rpx;
+          height: 154rpx;
+          background-color: #fff;
+          position: absolute;
+          top: -100rpx;
+          left: 50%;
+          transform: translate(-50%, 0);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 50%;
+
+          .logo {
+            width: 144rpx;
+            height: 144rpx;
+            border-radius: 50%;
+          }
+        }
+
+      }
+
+      .shop {
+        border: 2rpx solid #E6E6E6;
+        padding: 30rpx 40rpx;
+        border-radius: 24rpx;
+        color: #fff;
+        font-size: 26rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 520rpx;
+        background: linear-gradient(135deg, #2D2824 0%, #625344 100%);
+        ;
+      }
+
+      .bar-code {
+        height: 120rpx;
+        width: 600rpx;
+        margin: 38rpx 0 0 0;
+
+        &-text {
+          color: #999999;
+          font-size: 24rpx;
+          text-align: center;
+        }
+      }
+
+      .qrcode {
+        width: 272rpx;
+        height: 272rpx;
+        margin: 54rpx auto 18rpx auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+      }
+
+      .code-refresh {
+        color: #999;
+        font-size: 24rpx;
+        margin-bottom: 36rpx;
+        border-bottom: 2rpx dashed #E5E5E5;
+        width: 95%;
+        text-align: center;
+        padding-bottom: 36rpx;
+      }
+
+      .vip {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+
+        &-title {
+          display: flex;
+          align-items: center;
+          padding-left: 20rpx;
+
+          &-left {
+            background: linear-gradient(90deg, #665646 0%, #473D34 52.05%, #2B2623 100%);
+            color: #EFD5C3;
+            font-size: 22rpx;
+            border-radius: 74rpx 0rpx 0rpx 74rpx;
+            padding: 18rpx 18rpx 18rpx 22rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+
+          &-right {
+            background: linear-gradient(270deg, #FCD6B8 0%, #FCEDD7 100%);
+            border-radius: 0px 80rpx 80rpx 0px;
+            padding: 5rpx 32rpx;
+            font-size: 22rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &>text {
+              color: #D10300;
+              font-weight: 700;
+              font-size: 43rpx;
+              margin-right: 5rpx;
+            }
+          }
+        }
+
+        &-open {
+          display: flex;
+          color: #86541E;
+          font-size: 28rpx;
+          align-items: center;
+
+          &>text {
+            margin: 0 8rpx;
+          }
+        }
+      }
+
+      .mask-box {
+        margin: 0 auto;
+
+        .mask {
+          width: 660rpx;
+          height: 640rpx;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          background: url('https://img-b.jufubao.cn/uploads/20250407/11e6e600ab4395c44d42489bc7b25034.jpg') no-repeat;
+          background-size: 100% 100%;
+
+          &-title {
+            font-size: 26rpx;
+            color: #666666;
+            margin-bottom: 48rpx;
+            width: 300rpx;
+            text-align: center;
+          }
+
+          &-open {
+            font-size: 28rpx;
+          }
+        }
+      }
+
+      .verification {
+        &-item {
+          display: flex;
+          margin-top: 60rpx;
+
+          &-label {
+            color: #999999;
+            font-size: 30rpx;
+            margin-right: 64rpx;
+          }
+
+          &-tags {
+            display: flex;
+            align-items: flex-start;
+
+            &>view {
+              margin-right: 32rpx;
+              font-size: 28rpx;
+              border-radius: 12rpx;
+              padding: 16rpx 24rpx;
+              border: 2rpx solid #EEEEEE;
+              color: #CCCCCC;
+            }
+
+          }
+
+          &-input {
+            display: flex;
+            flex-direction: column;
+            text-align: center;
+            font-size: 28rpx;
+
+            &>input {
+              border-radius: 10rpx;
+              border: 2rpx solid #EEEEEE;
+              padding: 20rpx 24rpx;
+            }
+
+            .tip {
+              font-size: 18rpx;
+              margin-top: 12rpx;
+            }
+          }
+        }
+      }
+
+      .nodata {
+        color: #f00;
+        line-height: unit(68, rpx);
+        font-size: unit(28, rpx);
+      }
+    }
+
+    .dialog-title {
+      color: #333;
+      font-size: 32rpx;
+    }
+
+    .dialog-content {
+      padding-bottom: 30rpx;
+      border-bottom: 2rpx dashed #E5E5E5;
+      font-size: 26rpx;
+      color: #999999;
+
+      &>view:first-child {
+        margin-bottom: 10rpx;
+      }
+    }
+
+    .dialog-btns {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+
+    }
+  }
+</style>