jufubao-base 1.0.290-beta3 → 1.0.290

package/src/components/CusCouponChose/CusCouponChose.vue

@@ -0,0 +1,1027 @@
+<template>
+  <view class="xd-card-pay">
+    <slot></slot>
+    <xd-down-drawer
+      :show.sync="xdDownDrawer"
+      :isBodyClose="false"
+      :z-index="3000"
+    >
+      <view style="height: 80rpx; background: #fff"></view>
+      <view class="jfb-cashier-verification-pay__body">
+        <view class="column-group">
+          <view class="column-item">
+            <view class="column_label">
+              我的优惠券
+              <view
+                :style="{ color: style.$warningColor }"
+                v-if="checkedCards.length > 0"
+                class="label_sub"
+                >（已使用{{ checkedCards.length }}张优惠券）</view
+              >
+              <view
+                :style="{ marginLeft: '20rpx', color: style.$warningColor }"
+                class="label_sub"
+                v-else
+                >请勾选优惠券</view
+              >
+            </view>
+            <view class="column_value">
+              <xd-button
+                width="260rpx"
+                radius="60rpx"
+                type="primary"
+                size="small"
+                @click="xdDownDrawerNewCard = true"
+                >使用新优惠券</xd-button
+              >
+            </view>
+          </view>
+          <view class="column-item">
+            <view class="column_label">
+              仍需支付
+              <view class="label_sub">（可使用多张优惠券支付）</view>
+            </view>
+            <view class="column_value text-primary">
+              <xd-unit
+                :price="needPayPrice"
+                :isOld="false"
+                :font-size="32"
+                :icon-size="0.3"
+              ></xd-unit>
+            </view>
+          </view>
+        </view>
+        <view class="ticket_list" :key="renderChecked">
+          <view v-if="showCouponList.length" class="coupon_list">
+            <CusCouponItem
+              style="margin-bottom: 20rpx"
+              v-for="(item, i) in showCouponList"
+              :key="i"
+              :couponRadius="couponRadius"
+              :couponImageUrl="couponImageUrl"
+              :couponTitleBgColor="couponTitleBgColor"
+              :couponUseBtnPadding="couponUseBtnPadding"
+              :couponBtnRadius="couponBtnRadius"
+              :couponBtnTextStyle="couponBtnTextStyle"
+              :couponLeftBgColor="couponLeftBgColor"
+              :item="item"
+              :mainColor="mainColor"
+            >
+              <template slot="btn">
+                <div @click="handlerTicketSelect(!checkedCards.includes(item.card_number), item)">
+                  <xd-radio
+                    class="cou_btn"
+                    :disabled="item.is_valid === 'N' || item.card_point == 0"
+                    size="mini"
+                    :value="checkedCards.includes(item.card_number)"
+                  ></xd-radio>
+                </div>
+              </template>
+            </CusCouponItem>
+            <!-- <view v-if="!hasCouponList" class="no_more_card"
+              >没有更多券了，查看失效的优惠券 ></view
+            > -->
+          </view>
+          <view
+            :style="{ color: mainColor }"
+            class="ticket_add_new"
+            @click="xdDownDrawerNewCard = true"
+          >
+            <view :style="{ backgroundColor: mainColor }" class="plus_icon"
+              >+</view
+            >
+            <view>使用新优惠券</view>
+          </view>
+        </view>
+        <view style="height: 100rpx"></view>
+        <view v-if="xdDownDrawer" class="bottom_btn" :style="alert_bottom">
+          <xd-button
+            width="360rpx"
+            type="primary"
+            radius="50rpx"
+            @click="doTicketPay"
+            >确认支付</xd-button
+          >
+        </view>
+      </view>
+    </xd-down-drawer>
+    <xd-down-drawer
+      :show.sync="xdDownDrawerNewCard"
+      :z-index="3010"
+      height="580rpx"
+      @close="switchValidToken"
+    >
+      <view class="drawer_title">使用新优惠券</view>
+      <xd-form label-width="200" label-align="left" content-align="left">
+        <xd-form-item label="优惠券号码" content-align="left">
+          <view class="flex align-center">
+            <xd-form-input
+              placeholder="电子码无需输入券号"
+              v-model="cardForm.card_number"
+            />
+            <view v-if="isQrCode" class="scan_icon" @click="doScanCode">
+              <xd-font-icon icon="iconsaoma"></xd-font-icon>
+            </view>
+          </view>
+        </xd-form-item>
+        <xd-form-item label="优惠券密码" content-align="left">
+          <xd-form-input
+            placeholder="请输入优惠券密码"
+            v-model="cardForm.card_password"
+          />
+        </xd-form-item>
+        <xd-form-item label="验证码" content-align="left">
+          <view class="flex align-center">
+            <xd-form-input
+              placeholder="请输入验证码"
+              v-model="cardForm.valid_code"
+            />
+            <view
+              v-if="cardForm.valid_token"
+              class="capture"
+              @click="switchValidToken"
+            >
+              <image
+                style="width: 100%; height: 100%"
+                :src="
+                  validImageAPIUrl +
+                  '?image_width=180&image_height=80&token=' +
+                  cardForm.valid_token
+                "
+              />
+            </view>
+          </view>
+        </xd-form-item>
+      </xd-form>
+      <xd-button
+        width="360rpx"
+        type="primary"
+        radius="50rpx"
+        @click="addNewCoupon()"
+        >使用新优惠券</xd-button
+      >
+      <view :style="{ height: layoutInfo.bottom + 'rpx' }"></view>
+    </xd-down-drawer>
+  </view>
+</template>
+<script>
+/**
+ * @description 选择卡券支付 & 支持三方支付
+ * @property show                   {Boolean}         是否显示支付卡券弹窗
+ * @property layoutInfo             {Object}          XdLayout返回的布局信息
+ * @property validImageAPIUrl       {String}          图片验证码接口API地址
+ * @property jwxSDK                 {Object}          JSSDK授权对象
+ * @property price                  {Number|String}   订单总额 单位元
+ * @property getSettleListCoupons     {Function(successCallBack(cardList))}               获取支付卡券列表
+ * @property setSettleSelectCoupon    {Function(options, successCallBack, errCallBack)}   选择卡券列表
+ * @property addSettleCoupon          {Function(options, successCallBack)}                添加卡券
+ *
+ */
+import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer";
+import XdButton from "@/components/XdButton/XdButton";
+import XdUnit from "@/components/XdUnit/XdUnit";
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdRadio from "@/components/XdRadio/XdRadio";
+import XdForm from "@/components/XdForm/XdForm";
+import XdFormItem from "@/components/XdFormItem/XdFormItem";
+import XdFormInput from "@/components/XdFormInput/XdFormInput";
+import CusCouponItem from "@/components/CusCouponItem/CusCouponItem";
+import {
+  getParentsStyle, //获取页面风格单个键值值
+  getParentsStyles, //获取页面风格列表
+  isQrCode,
+} from "@/utils/xd.base";
+
+export default {
+  name: "CusCouponChose",
+  components: {
+    XdDownDrawer,
+    XdButton,
+    XdUnit,
+    XdFontIcon,
+    XdRadio,
+    XdForm,
+    XdFormItem,
+    XdFormInput,
+    CusCouponItem,
+  },
+  props: {
+    show: false,
+    layoutInfo: {},
+    validImageAPIUrl: {
+      //图片验证码 接口地址
+      type: String,
+    },
+    orderTotalPrice: {
+      //订单总额 单位元
+      type: String | Number,
+      default: "100",
+    },
+    orderNeedPayPrice: {
+      type: String | Number,
+      default: "100",
+    },
+    jwxSDK: {
+      //JSSDK授权对象
+      type: Object,
+    },
+    getSettleListCoupons: {
+      //支付卡券列表
+      type: Function,
+    },
+    setSettleSelectCoupon: {
+      //选择卡券列表
+      type: Function,
+    },
+    addSettleCoupon: {
+      //添加卡券
+      type: Function,
+    },
+    hadChoseCoupon: {
+      type: null | Array,
+    },
+    mainColor: {
+      type: String,
+    },
+    couponRadius: {
+      type: String | Number,
+      default: "16",
+    },
+    couponLeftBgColor: {
+      type: String,
+      default: "linear-gradient(180deg, #FFA852 0%, #FF5733 100%)",
+    },
+    couponImageUrl: {
+      type: Object | String,
+    },
+    couponTitleBgColor: {
+      type: String,
+      default: "rgba(255, 87, 51, 0.1)",
+    },
+    couponUseBtnPadding: {
+      type: Object,
+      default() {
+        return {
+          top: 20,
+          right: 20,
+          bottom: 10,
+          left: 20,
+        };
+      },
+    },
+    couponBtnRadius: {
+      type: String | Number,
+      default: "16",
+    },
+    couponBtnTextStyle: {
+      type: Object,
+      default() {
+        return {
+          color: "#fff",
+          bgColor: "#ff5722",
+          fontSize: "30rpx",
+          fontWeight: "normal",
+        };
+      },
+    },
+  },
+  watch: {
+    show(n, o) {
+      this.xdDownDrawer = n;
+    },
+    xdDownDrawer(n, o) {
+      console.log("xdDownDrawer value", n, o);
+      if (n) {
+        console.log(this.hadChoseCoupon,'hadChoseCoupon');
+        let checkedArr = (this.hadChoseCoupon || []).map((c) => c.card_number);
+        this.selectedCardList = this.selectedCardList.map((item) => {
+          if (!checkedArr.includes(item.card_number)) {
+            this.needPayPrice = +this.needPayPrice + item["card_use_price"];
+            this.cardPayPrice = this.cardPayPrice - item.card_use_price;
+            item["card_use_point"] = 0;
+          }
+          return item;
+        });
+      }
+      this.$emit("update:show", n);
+      this.$emit("onAlert");
+    },
+    orderTotalPrice: {
+      handler(n) {
+        this.clearChecked();
+      },
+    },
+    orderNeedPayPrice(n, o) {
+      console.log("orderNeedPayPrice", n);
+      this.needPayPrice = n;
+    },
+    xdDownDrawerNewCard(n) {
+      if (!n) {
+        this.cardForm = {
+          card_number: "",
+          card_password: "",
+          valid_code: "",
+          valid_token: this.$xdUniHelper.randomChar(20),
+        };
+      }
+    },
+  },
+  data() {
+    return {
+      xdDownDrawer: false,
+      xdDownDrawerNewCard: false,
+      channel_provider_id: "",
+      cardList: [], //展示
+      selectedCardList: [],
+      needPayPrice: 0,
+      cardPayPrice: 0,
+      cardForm: {
+        //添加新卡券表单
+        card_number: "",
+        card_password: "",
+        valid_code: "", //验证码正文
+        valid_token: "", //验证码token
+      },
+      renderChecked: "renderChecked",
+
+      total_price: "",
+      style: {},
+      isQrCode: false,
+      hasCouponList: false,
+    };
+  },
+  computed: {
+    showCouponList() {
+      //筛选出不存在于cardList的数据
+      let otherCardList = this.selectedCardList.filter((item) => {
+        let cur = this.cardList.find(
+          (ii) => ii.card_number == item.card_number
+        );
+        return !cur;
+      });
+      //合并selectedCardList数据到对应的cardList
+      let combineList = this.cardList.map((item) => {
+        let cur = this.selectedCardList.find(
+          (ii) => ii.card_number == item.card_number
+        );
+        if (cur) return Object.assign(item, cur);
+        return item;
+      });
+      return combineList.concat(otherCardList);
+    },
+    checkedCards() {
+      return this.showCouponList
+        .filter((item) => item.card_use_point > 0)
+        .map((item) => item.card_number);
+    },
+    //提交是的selectedCardList, 由于取消选中不走接口 & 避免取消隐藏
+    submitCardList() {
+      return this.selectedCardList.filter((item) => item.card_use_point > 0);
+    },
+    alert_bottom() {
+      return this.fixedStyle({ paddingBottom: 24, zIndex: 110 });
+    },
+  },
+  async created() {
+    this.isQrCode = isQrCode(this);
+    this.switchValidToken();
+    this.style = await getParentsStyles(this.$parent);
+    console.log(this.mainColor, "this.$parent");
+    this.handleInit();
+  },
+  methods: {
+    handleInit() {
+      this.total_price = this.$xdUniHelper.multiplyFloatNumber(
+        this.orderTotalPrice,
+        100
+      );
+      this.needPayPrice = this.total_price;
+      this.getList();
+      this.selectedCardList = this.selectedCardList.map((item) => {
+        item["card_use_point"] = 0;
+        return item;
+      });
+    },
+    clearChecked() {
+      console.log("xdCardPayChose", this.orderTotalPrice);
+      this.total_price = this.$xdUniHelper.multiplyFloatNumber(
+        this.orderTotalPrice,
+        100
+      );
+      this.needPayPrice = this.total_price;
+      this.cardPayPrice = 0;
+      this.selectedCardList = this.selectedCardList.map((item) => {
+        item["card_use_point"] = 0;
+        return item;
+      });
+      this.doTicketPay();
+    },
+    divideFloatNumber(num) {
+      return this.$xdUniHelper.divisionFloatNumber(num, 100);
+    },
+    fixedStyle(options = {}, type = "bottom") {
+      let paddingBottom = options.paddingBottom || options.height || 0;
+      if (options.paddingBottom) delete options.paddingBottom;
+      if (options.height) delete options.height;
+      let obj = Object.assign(
+        {},
+        {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 100,
+        },
+        options
+      );
+      let style = "position: fixed";
+      style = `${style};left:${obj.left}rpx`;
+      style = `${style};right:${obj.right}rpx`;
+      style = `${style};z-index:${obj.zIndex}`;
+      if (type === "bottom") {
+        let padding =
+          (this.layoutInfo.bottomHeight +
+            this.layoutInfo.footerHeight +
+            paddingBottom) *
+          this.$rpxNum;
+        style = `${style}; padding-bottom:calc(${padding}px + constant(safe-area-inset-bottom));`;
+        style = `${style}; padding-bottom:calc(${padding}px + env(safe-area-inset-bottom));`;
+        style = `${style};bottom:0;`;
+      }
+      if (type === "top") {
+        style = `${style};top:${obj.top}rpx`;
+      }
+      return style;
+    },
+    getTimeFormat(time) {
+      let date = null;
+      if (time == +time) {
+        if ((time + "").length <= 10) date = new Date(+time * 1000);
+        else date = new Date(+time);
+        return (
+          date.getFullYear() +
+          "-" +
+          (date.getMonth() + 1) +
+          "-" +
+          date.getDate()
+        );
+      }
+      return time;
+    },
+    getList() {
+      let callThis = this;
+      // #ifdef MP
+      callThis = this.$parent;
+      // #endif
+      //获取卡券列表
+      callThis.getSettleListCoupons((cardList) => {
+        this.$xdLog.setARMSInfo(
+          this.filterMGinfo(cardList),
+          "init_binded_list"
+        );
+        this.cardList = cardList;
+      });
+    },
+    //选卡弹出项
+    useCardPop(data) {
+      return new Promise((resolve, reject) => {
+        this.$xdConfirm({
+          title: '提示',
+          content: data.pop_message,
+          confirmText: data.confirm_text,
+          cancelText: data.cancel_text,
+          width: '85%',
+          isTitle: true,
+          success: (res) => {
+            if (res.confirm) {
+              resolve(2);
+            } else if (res.cancel) {
+              if(data.pop_type == 'confirm'){
+                resolve();
+              }else{
+                resolve(3);
+              }
+            }
+          },
+          fail: function (res) {
+            reject(res);
+          }
+        });
+      });
+    },
+
+    //选择卡券
+    handlerTicketSelect(flat, ticket, options) {
+      if (flat) {
+        //选择卡券，重新调用接口获取 selectedCardList, neePayPrice
+        const { submitCardList, total_price } = this;
+        let callThis = this;
+        // #ifdef MP
+        callThis = this.$parent;
+        // #endif
+        this.$xdShowLoading({});
+        callThis.setSettleSelectCoupon(
+          {
+            total_price,
+            card_number: ticket.card_number,
+            selected_card_list_json: JSON.stringify(submitCardList),
+            ...options,
+          },
+          (res) => {
+            let resOptions = JSON.parse(JSON.stringify(res));
+            if (resOptions["selected_card_list1"])
+              delete resOptions["selected_card_list1"];
+            if (resOptions["selected_card_list"]) {
+              resOptions["selected_card_list"] = this.filterMGinfo(
+                resOptions["selected_card_list"]
+              );
+            }
+            this.$xdLog.setARMSInfo(
+              {
+                card_number: ticket.card_number,
+                selected_card_list_json: this.filterMGinfo(submitCardList),
+                ...options,
+                res: resOptions,
+              },
+              "select_binded_card"
+            );
+            this.$xdHideLoading();
+            const {
+              selected_card_list,
+              need_pay_price,
+              is_need_pop,
+              card_total_use_price,
+            } = res;
+            if (is_need_pop) {
+              this.useCardPop(res)
+                .then((select_content) => {
+                  if (select_content) {
+                    this.handlerTicketSelect(true, ticket, { select_content });
+                  } else {
+                    this.handlerTicketSelect(false, ticket);
+                  }
+                })
+                .catch(() => {});
+            } else {
+              this.selectedCardList = selected_card_list;
+              this.needPayPrice = need_pay_price;
+              this.cardPayPrice = card_total_use_price;
+              this.renderChecked = Date.now();
+            }
+          },
+          (err) => {
+            this.$xdHideLoading();
+            this.renderChecked = Date.now();
+          }
+        );
+      } else {
+        this.$xdLog.setARMSInfo(
+          {
+            ticket: this.filterMGinfo(ticket),
+            ...options,
+          },
+          "cancel_card"
+        );
+        //不走接口， selectedCardList不是真实选中的
+        this.selectedCardList = this.selectedCardList.map((item) => {
+          if (item.card_number == ticket.card_number) {
+            this.needPayPrice = +this.needPayPrice + item["card_use_price"];
+            item["card_use_price"] = 0;
+            item["card_use_point"] = 0;
+          }
+          return item;
+        });
+        if (ticket.is_new) {
+          this.cardList = this.cardList.filter(
+            (item) => item.card_number != ticket.card_number
+          );
+          this.selectedCardList = this.selectedCardList.filter(
+            (item) => item.card_number != ticket.card_number
+          );
+        }
+        this.cardPayPrice = this.cardPayPrice - ticket.card_use_price;
+        this.renderChecked = Date.now();
+      }
+    },
+
+    filterMGinfo(list) {
+      //深拷贝
+      if (
+        this.$xdUniHelper.checkVarType(list) === "object" ||
+        this.$xdUniHelper.checkVarType(list) === "array"
+      ) {
+        list = JSON.parse(JSON.stringify(list));
+      }
+      //object
+      if (this.$xdUniHelper.checkVarType(list) === "object") {
+        if (list.card_use_certificate)
+          list.card_use_certificate =
+            list.card_use_certificate.substr(0, 2) +
+            "********" +
+            list.card_use_certificate.substr(-3);
+        if (list.card_cert)
+          list.card_cert =
+            list.card_cert.substr(0, 2) +
+            "********" +
+            list.card_cert.substr(-3);
+        if (list.card_password)
+          list.card_password =
+            list.card_password.substr(0, 2) +
+            "********" +
+            list.card_password.substr(-3);
+        return list;
+      }
+
+      //array
+      return list.map((item) => {
+        if (item.card_use_certificate)
+          item.card_use_certificate =
+            item.card_use_certificate.substr(0, 2) +
+            "********" +
+            item.card_use_certificate.substr(-3);
+        if (item.card_cert)
+          item.card_cert =
+            item.card_cert.substr(0, 2) +
+            "********" +
+            item.card_cert.substr(-3);
+        if (item.card_password)
+          item.card_password =
+            item.card_password.substr(0, 2) +
+            "********" +
+            item.card_password.substr(-4);
+        return item;
+      });
+    },
+
+    //添加新卡券
+    addNewCoupon(options = {}) {
+      const { cardForm, total_price, submitCardList } = this;
+      let err_tip = "";
+      if (!cardForm.card_qrcode) {
+        if (!cardForm.valid_code) err_tip = "验证码不能为空";
+        else if (!cardForm.card_number && !cardForm.card_password)
+          err_tip = "优惠券和密码不能为空";
+      }
+      if (err_tip) {
+        return this.$xdAlert({
+          content: err_tip,
+          time: 2500,
+          isClose: false,
+          zIndex: 5000
+        });
+      }
+      let callThis = this;
+      // #ifdef MP
+      callThis = this.$parent;
+      // #endif
+      this.$xdShowLoading({});
+      callThis.addSettleCoupon(
+        {
+          ...cardForm,
+          selected_card_list_json: JSON.stringify(submitCardList),
+          total_price,
+          ...options,
+        },
+        (res) => {
+          let resOptions = JSON.parse(JSON.stringify(res));
+          resOptions.selected_card_list = this.filterMGinfo(
+            resOptions.selected_card_list
+          );
+          this.$xdLog.setARMSInfo(
+            {
+              ...options,
+              total_price,
+              cardForm: {
+                ...cardForm,
+                card_password: cardForm.card_password
+                  ? cardForm.card_password.substr(0, 2) +
+                    "********" +
+                    cardForm.card_password.substr(-3)
+                  : "",
+              },
+              selected_card_list_json: this.filterMGinfo(submitCardList),
+              res: resOptions,
+            },
+            "add_card"
+          );
+          this.$xdHideLoading();
+
+          //成功回调
+          let {
+            selected_card_list = [],
+            need_pay_price,
+            is_need_pop,
+            card_total_use_price,
+          } = res;
+
+          if (is_need_pop) {
+            this.useCardPop(res)
+              .then((select_content) => {
+                if (select_content) this.addNewCoupon({ select_content });
+                // this.handlerTicketSelect(true, cardForm.card_number, {select_content})
+              })
+              .catch((e) => {
+                console.error(e);
+              });
+            return;
+          } else {
+            // filterCard 去重后的卡券
+            let r_cards = this.cardList.map((item) => item.card_number);
+            let filterCard = selected_card_list.filter(
+              (item) => !r_cards.includes(item.card_number)
+            );
+            //重合的卡券列表
+            let repeatCardList = selected_card_list.filter((item) =>
+              r_cards.includes(item.card_number)
+            );
+
+            if (repeatCardList.length > 0) {
+              for (let i = 0; i < repeatCardList.length; i++) {
+                let repeatCard = repeatCardList[i];
+                //重复的以前的卡数据
+                let oldCard = this.cardList.find(
+                  (item) => item.card_number == repeatCard.card_number
+                );
+                //自动选中当前重合的卡券
+                if (
+                  this.selectedCardList.findIndex(
+                    (item) => item.card_number == repeatCard.card_number
+                  ) == -1
+                ) {
+                  this.selectedCardList.push({ ...oldCard, ...repeatCard });
+                } else {
+                  this.selectedCardList = this.selectedCardList.map((item) => {
+                    if (item.card_number == repeatCard.card_number) {
+                      item = { ...oldCard, ...repeatCard };
+                    }
+                    return item;
+                  });
+                }
+              }
+            }
+
+            selected_card_list = filterCard.map((item) => {
+              item["is_new"] = true;
+              return item;
+            });
+            this.cardList = selected_card_list.concat(this.cardList);
+            this.selectedCardList = selected_card_list.concat(
+              this.selectedCardList
+            );
+            this.needPayPrice = need_pay_price;
+            this.cardPayPrice = card_total_use_price;
+          }
+          this.xdDownDrawerNewCard = false;
+          this.renderChecked = Date.now();
+          //清空cardForm
+          this.cardForm = {
+            card_number: "",
+            card_password: "",
+            valid_code: "",
+          };
+          this.switchValidToken();
+        },
+        (err) => {
+          this.$xdHideLoading();
+          this.switchValidToken();
+        }
+      );
+    },
+    //确认支付
+    async doTicketPay() {
+      const { cardPayPrice, submitCardList, needPayPrice } = this;
+      let postData = {
+        cardPayPrice: cardPayPrice,
+        selectedCardList: submitCardList,
+        needPayPrice: needPayPrice,
+      };
+      this.$emit("onChose", postData);
+    },
+    //刷新图片验证码
+    switchValidToken() {
+      let valid_token = this.$xdUniHelper.randomChar(20);
+      this.$set(this.cardForm, "valid_token", valid_token);
+    },
+    //扫码
+    doScanCode() {
+      // #ifdef H5
+      this.jwxSDK.scanQRCode({
+        needResult: 1,
+        success: (res) => {
+          // this.$set(this.cardForm, 'card_number', res.resultStr)
+          this.$set(this.cardForm, "card_qrcode", res.resultStr);
+          this.addNewCoupon();
+        },
+      });
+      // #endif
+      // #ifdef MP
+      uni.scanCode({
+        success: (res) => {
+          console.log("scanCode", res);
+          // this.$set(this.cardForm, 'card_number', res.result)
+          this.$set(this.cardForm, "card_qrcode", res.result);
+          this.addNewCoupon();
+        },
+      });
+      // #endif
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.xd-card-pay {
+  .text-gray {
+    color: #999999;
+  }
+  .text-primary {
+    color: #fe7a63;
+  }
+  .flex {
+    display: flex;
+  }
+  .align-center {
+    align-items: center;
+  }
+  .drawer_title {
+    line-height: 100rpx;
+    text-align: center;
+    font-size: 32rpx;
+  }
+  .scan_icon {
+    width: 32rpx;
+    height: 32rpx;
+  }
+  .capture {
+    width: 180rpx;
+    height: 80rpx;
+    background: #ddd;
+  }
+}
+.coupon_list {
+  ::v-deep .xd-coupon_item {
+    margin: var(--card-list-margin) 0;
+  }
+}
+.cou_btn {
+  position: absolute;
+  padding: 10rpx 30rpx;
+  border-radius: 12rpx;
+  right: 20rpx;
+  bottom: 20rpx;
+}
+.no_more_card {
+  text-align: center;
+  padding: 20rpx 0;
+  color: #cccccc;
+  font-size: 28rpx;
+}
+.jfb-cashier-verification-pay {
+  &__body {
+    padding-bottom: 150rpx;
+    max-height: 70vh;
+    overflow: auto;
+    .column-group {
+      .column-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid rgba(238, 238, 238, 1);
+        padding: 30rpx 50rpx;
+
+        .column_label {
+          display: flex;
+          align-items: center;
+          font-size: 28rpx;
+        }
+        .column_value {
+          display: flex;
+          align-items: center;
+          font-size: 24rpx;
+          .xd-coins {
+            margin-left: 8rpx;
+          }
+        }
+        .label_sub {
+          font-size: 18rpx;
+          color: #999999;
+        }
+      }
+    }
+
+    .ticket_list {
+      padding: 40rpx;
+      .ticket_add_new {
+        width: 690rpx;
+        height: 220rpx;
+        border-radius: 10rpx;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
+        margin: 30rpx auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: 24rpx;
+
+        .plus_icon {
+          color: #ffffff;
+          border-radius: 20rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 48rpx;
+          width: 80rpx;
+          height: 80rpx;
+          margin-bottom: 20rpx;
+        }
+      }
+      .ticket_item {
+        width: 690rpx;
+        border-radius: 10rpx;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
+        margin: 30rpx auto;
+        padding: 30rpx 0 20rpx;
+        ._header {
+          display: flex;
+          justify-content: space-between;
+          padding: 0rpx 30rpx;
+          font-size: 28rpx;
+        }
+        ._cont {
+          display: flex;
+          font-size: 18rpx;
+          padding: 24rpx 30rpx;
+          border-bottom: 1px solid rgba(242, 242, 242, 1);
+          color: #777777;
+        }
+        ._footer {
+          display: flex;
+          justify-content: space-between;
+          padding: 24rpx 30rpx 12rpx;
+          font-size: 24rpx;
+          ._item {
+            display: flex;
+            align-items: center;
+          }
+        }
+        .orther_pay {
+          display: inline-block;
+          background: #f5f5f5;
+          font-size: 24rpx;
+          font-weight: 400;
+          border-radius: 8rpx;
+          color: #999999;
+          padding: 8rpx 20rpx;
+          margin: 16rpx 0 0 30rpx;
+        }
+      }
+    }
+
+    .remain_pay {
+      .remain_header {
+        display: flex;
+        justify-content: space-between;
+        padding: 30rpx 50rpx 0;
+        color: #999999;
+        font-size: 24rpx;
+      }
+      .pay_item {
+        display: flex;
+        align-items: center;
+        width: 700rpx;
+        height: 120rpx;
+        border-radius: 10rpx;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
+        padding: 24rpx 35rpx;
+        box-sizing: border-box;
+        margin: 30rpx auto;
+        font-size: 28rpx;
+
+        .icon {
+          width: 64rpx;
+          height: 64rpx;
+          border-radius: 32rpx;
+          // background: #DDD;
+          margin-right: 30rpx;
+        }
+        .pay_name {
+          flex: 1;
+        }
+      }
+    }
+    .bottom_btn {
+      position: fixed;
+      width: 100%;
+      padding: 24rpx 0;
+      background: #ffffff;
+      box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.1);
+      transition: 500ms all;
+      padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+      padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
+    }
+  }
+}
+</style>