<template>
  <view class="xd-card-pay">
    <slot></slot>
    <xd-down-drawer :show.sync="xdDownDrawer" :isBodyClose="false"
      :z-index="3000">
      <view class="card_chose_title">使用票券</view>
      <view class="jfb-cashier-verification-pay__body" style="background-color: #F8F8F8;">
        <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.$mainColor}" class="label_sub" v-else>请勾选票券</view>
            </view>
            <view v-if="bindCard==='1'" class="column_value">
              <xd-button
                width="200rpx"
                radius="60rpx"
                type="primary"
                size="small"
                :cusStyle="{
                  borderRadius: '16rpx',
                  backgroundColor: '#FFFFFF',
                  color: style.$mainColor,
                  border: '1px solid ' + style.$mainColor,
                  padding: 0
                }"
                @click="xdDownDrawerNewCard=true"
              >使用新票券</xd-button>
            </view>
          </view>
          <view v-if="is_not_show_price !== 'Y'" 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="28"
                :icon-size="0.3"
              ></xd-unit>
            </view>
          </view>

        </view>
        <view
          class="ticket_list"
          :key="renderChecked"
        >
          <view
            class="ticket_item"
            v-for="ticket in showCardList"
            :key="ticket.card_number"
            @click="handlerTicketSelect(!checkedCards.includes(ticket.card_number), ticket)"
          >
            <view class="_header">
              <view class="flex align-center">
                <xd-font-icon
                  style="margin-right: 8rpx;"
                  icon="iconkaquan"
                  color="#ffc65d"
                  size="32"
                ></xd-font-icon>
                <text>{{ticket.card_type_name}}</text>
              </view>
              <view v-if="ticket.is_login === 'Y'">
                <view class="login_card" :style="{color: style.$mainColor, backgroundColor: $mainBgColor}">已登录</view>
              </view>
              <xd-radio
                :disabled="cardIsDisabled(ticket)"
                size="mini"
                :isClickEvent="false"
                :value="checkedCards.includes(ticket.card_number)"
              ></xd-radio>
            </view>
            <view class="_cont">
              <view style="margin-right: 30rpx;">ID：{{ticket.show_card_number || ticket.card_number}}</view>
              <view>有效期至：{{getTimeFormat(ticket.end_time)}}</view>
            </view>
            <view class="_footer">
              <view class="_item">
                <text>剩余：</text>
                <xd-unit
                  :price="ticket.card_point"
                  :isOld="false"
                  :font-size="28"
                  :icon-size="0.3"
                  :unit="ticket.unit || ''"
                ></xd-unit>
              </view>
              <view
                v-if="ticket.card_use_point"
                class="_item text-primary"
              >
                <text style="color: #333333;">使用：</text>
                <xd-unit
                  :price="ticket.card_use_point"
                  :isOld="false"
                  :font-size="24"
                  :icon-size="0.3"
                  :unit="ticket.unit || ''"
                ></xd-unit>
                <view v-if="ticket['card_discount_use_point'] > 0" class="discount">已优惠:{{ticket['card_discount_use_point']}}</view>
              </view>
            </view>
            <view
              v-if="ticket.is_show_other_card_point === 'Y'"
              class="orther_pay"
            >购买其他物品可抵：{{ divideFloatNumber(ticket.other_card_point) }}{{ ticket.unit }}</view>
          </view>

          <view v-if="bindCard==='1'" class="ticket_add_new" @click="xdDownDrawerNewCard=true">
            <view 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="670rpx"
            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="180"
        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="addNewCard()"
      >使用新票券</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 getSettleListCards     {Function(successCallBack(cardList))}               获取支付卡券列表
 * @property setSettleSelectCard    {Function(options, successCallBack, errCallBack)}   选择卡券列表
 * @property addSettleCard          {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"
const Color = require('color');
import {
  getParentsStyle, //获取页面风格单个键值值
  getParentsStyles, //获取页面风格列表
  isQrCode
} from '@/utils/xd.base';

export default {
  name: "XdCardPayChose",
  components: {
    XdDownDrawer,
    XdButton,
    XdUnit,
    XdFontIcon,
    XdRadio,
    XdForm,
    XdFormItem,
    XdFormInput
  },
  props: {
    show: false,
    layoutInfo: {},
    validImageAPIUrl: {  //图片验证码 接口地址
      type: String,
    },
    selected_wallet_list: {
      type: Array,
      default: () => ([])
    },
    orderTotalPrice: {  //订单总额 单位元
      type: String|Number,
      default: "100"
    },
    orderNeedPayPrice:{
      type: String | Number,
      default: "100"
    },
    jwxSDK: { //JSSDK授权对象
      type: Object,
    },
    getSettleListCards: { //支付卡券列表
      type: Function
    },
    setSettleSelectCard: {  //选择卡券列表
      type: Function
    },
    addSettleCard: {  //添加卡券
      type: Function
    },
    hadChoseCard: {
      type: null | Array,
    },

    is_not_show_price: {
      type: String,
      default: ""
    },
    bindCard: {
      type: String,
      default: '1'
    }
  },
  watch: {
    show(n, o){
      this.xdDownDrawer = n;
    },
    xdDownDrawer(n, o){
      console.log('xdDownDrawer value', n, o);
      if(n){
        console.log(this.hadChoseCard);
        let checkedArr = (this.hadChoseCard || []).map(c => c.card_number);
        this.cardList = this.cardList.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;
            item['card_use_price'] = 0;
          }else{
            let curCard = this.hadChoseCard.find(c => c.card_number == item.card_number);
            item['card_use_point'] = curCard.card_use_point;
            item['card_use_price'] = curCard.card_use_price;
          }
          return item;
        })
        this.selectedCardList = this.cardList.filter((item) => {
          return item["card_use_point"] > 0;
        });
        this.cardPayPrice = this.selectedCardList.reduce((total, item) => {
          return total + item.card_use_price;
        }, 0);
        this.needPayPrice = this.orderNeedPayPrice;

      }
      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,
      cardPayPoint: 0,
      cardForm: { //添加新卡券表单
        card_number: "",
        card_password: "",
        valid_code: "",   //验证码正文
        valid_token: "",  //验证码token
      },
      renderChecked: "renderChecked",
      lastUseUnit: "",  //#10564 选择卡后，判断是否改为“x次”

      total_price: "",
      style: {},
      $mainBgColor: "",
      isQrCode: false,
    }
  },
  computed: {
    showCardList(){
      //筛选出不存在于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).map(item=>{
        if(item['card_discount_use_point'] > 0) {
          item['card_discount_use_point'] = this.$xdUniHelper.divisionFloatNumber(item['card_discount_use_point'],100)
        }
        return item;
      });
    },
    checkedCards(){
      return this.showCardList.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.style,'this.style');
    this.$mainBgColor = Color(this.style.$mainColor).alpha(0.2).toString();
    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.cardPayPoint = 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;
    },
    cardIsDisabled(ticket){
      return ticket.is_valid === 'N' || ticket.card_point == 0
    },
    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.getSettleListCards(async (cardList) => {
        this.$xdLog.setARMSInfo(this.filterMGinfo(cardList), 'init_binded_list');
        this.cardList = cardList;

        //如果有自动选中,则自动选中卡片，并且调用选卡接口，
        let autoCardList = cardList.filter(item => item.is_auto_use === 'Y');
        if(autoCardList.length > 0){
          await this.autoUseCard(autoCardList, 0);
        }
        this.$emit("onInit", cardList);
      })
    },
    async autoUseCard(tickets, i){
      let ticket = tickets[i];
      if(!ticket) return Promise.resolve();
      await this.handlerTicketSelect(true, ticket, {});
      this.doTicketPay();
      if(this.needPayPrice <= 0) return Promise.resolve();;
      return this.autoUseCard(tickets, i + 1);
    },
    //选卡弹出项
    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(this.cardIsDisabled(ticket)) return Promise.reject('卡片禁用');

      return new Promise((resolve, reject) => {
        if(flat){ //选择卡券，重新调用接口获取 selectedCardList, neePayPrice
          const {submitCardList, total_price} = this;
          let callThis = this;
          // #ifdef MP
          callThis = this.$parent;
          // #endif
          this.$xdShowLoading({})
          callThis.setSettleSelectCard({
            total_price,
            card_number: ticket.card_number,
            selected_card_list_json: JSON.stringify(submitCardList),
            selected_wallet_list_json: JSON.stringify(this.selected_wallet_list),
            ...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, card_total_use_point} = 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.cardPayPoint = card_total_use_point;
              this.lastUseUnit = ticket.unit == '次' ? '次' : "";
              this.renderChecked = Date.now();
            }
            resolve();
          }, (err) => {
            this.$xdHideLoading();
            this.renderChecked = Date.now();
            reject(err);
          })
        }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);
          }
          // #ifdef MP
          if(ticket.card_use_price) this.cardPayPrice = this.cardPayPrice - ticket.card_use_price;
          if(ticket.card_use_point) this.cardPayPoint = this.cardPayPoint - ticket.card_use_point;
          // #endif
          // #ifdef H5
          this.cardPayPrice = this.cardPayPrice - ticket.card_use_price;
          this.cardPayPoint = this.cardPayPoint - ticket.card_use_point;
          // #endif

          this.renderChecked = Date.now();
          resolve();
        }
      })
    },

    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
      });
    },

    //添加新卡券
    addNewCard(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.addSettleCard({
        ...cardForm,
        selected_card_list_json: JSON.stringify(submitCardList),
        total_price,
        ...options
      }, (res) => {
        let resOptions = JSON.parse(JSON.stringify(res));
        let oldSelectCardList = res.selected_card_list;
        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, card_total_use_point} = res;

        if(is_need_pop){
          this.useCardPop(res).then((select_content) => {
            if(select_content) this.addNewCard({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.cardPayPoint = card_total_use_point;

          //当前添加的卡信息
          let currAddCard = this.selectedCardList.find(item => item.card_number == cardForm.card_number);
          if(!currAddCard){
            currAddCard = oldSelectCardList[0];
          }
          this.lastUseUnit = currAddCard.unit == '次' ? '次' : "";
        }
        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, lastUseUnit, cardPayPoint } = this;

      let postData = {
        cardPayPrice: cardPayPrice,
        cardPayPoint: cardPayPoint,
        selectedCardList: JSON.parse(JSON.stringify(submitCardList)),
        needPayPrice: needPayPrice,
        unit: lastUseUnit
      };
      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.addNewCard();
        }
      })
      // #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.addNewCard();
        }
      })
      // #endif
    },
  }
}
</script>

<style lang="less" scoped>

  .xd-card-pay{
    .text-gray{
      color: #999999;
    }
    .card_chose_title{
      height: 100rpx;
      font-size: 32rpx;
      background-color: #F8F8F8;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .text-primary{
      color: #FE7A63;
      position: relative;

      & > .discount {
        position: absolute;
        left:0;
        right:0;
        bottom:-20rpx;
        height: 20rpx;
        font-size: 20rpx;
        line-height: 20rpx;
        color: #aaa;
      }
    }
    .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;
    }
  }
  .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;
          padding: 26rpx 40rpx;

          .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: 24rpx;
            color: #999999;
          }
        }
      }

      .ticket_list{
        .ticket_add_new{
          width: 710rpx;
          height: 88rpx;
          border-radius: 10rpx;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
          margin: 20rpx auto;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          color: #CCCCCC;

          .plus_icon{
            background-color: #CCCCCC;
            color: #FFFFFF;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            width: 40rpx;
            height: 40rpx;
            margin-right: 24rpx;
          }
        }
        .ticket_item{
          width: 710rpx;
          border-radius: 10rpx;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
          margin: 20rpx auto;
          padding: 30rpx 0 20rpx;

          ::v-deep .xd-radio__body{
            border-radius: 8rpx !important;
          }
          ._header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0rpx 30rpx;
            font-size: 28rpx;
            color: #333333;
            font-weight: 500;
            .login_card{
              padding: 8rpx 20rpx;
              border-radius: 8px;
              font-size: 28rpx;
            }
          }
          ._cont{
            display: flex;
            font-size: 28rpx;
            padding: 24rpx 30rpx;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            color: #666666;
            font-weight: 400;
          }
          ._footer{
            display: flex;
            justify-content: space-between;
            padding: 24rpx 30rpx 12rpx;
            font-size: 28rpx;
            color: #333333;
            ._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-top: 24rpx;
        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>
