gxd-uni-library-editx 1.0.59 → 1.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gxd-uni-library-editx",
-  "version": "1.0.59",
+  "version": "1.0.60",
   "private": false,
   "description": "聚福宝基础插件专用库",
   "main": "index.js",

package/src/components/XdCardPayChose/XdCardPayChose.vue

@@ -0,0 +1,790 @@
+<template>
+  <view class="xd-card-pay">
+    <slot></slot>
+    <xd-down-drawer :show.sync="xdDownDrawer"
+      :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="220rpx"
+                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
+            class="ticket_item"
+            v-for="ticket in showCardList"
+            :key="ticket.card_number"
+          >
+            <view class="_header">
+              <view class="flex align-center">
+                <xd-font-icon
+                  style="margin-right: 8rpx;"
+                  icon="iconkaquan"
+                  color="#ffc65d"
+                  size="32"
+                ></xd-font-icon>
+                {{ticket.card_type_name}}
+              </view>
+              <xd-radio
+                :disabled="ticket.is_valid === 'N' || ticket.card_point == 0"
+                size="mini"
+                @change="flat => handlerTicketSelect(flat, ticket)"
+                :value="checkedCards.includes(ticket.card_number)"
+              ></xd-radio>
+            </view>
+            <view class="_cont">
+              <view style="margin-right: 30rpx;">ID：{{ticket.card_number}}</view>
+              <view>有效期至：{{getTimeFormat(ticket.end_time)}}</view>
+            </view>
+            <view class="_footer">
+              <view class="_item"> 剩余：<xd-unit
+                  :price="ticket.card_point"
+                  :isOld="false"
+                  :font-size="24"
+                  :icon-size="0.3"
+                  :unit="ticket.unit || ''"
+                ></xd-unit>
+              </view>
+              <view
+                v-if="ticket.card_use_point"
+                class="_item text-primary"
+              >
+                使用：<xd-unit
+                  :price="ticket.card_use_point"
+                  :isOld="false"
+                  :font-size="24"
+                  :icon-size="0.3"
+                  :unit="ticket.unit || ''"
+                ></xd-unit>
+              </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>
+        <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="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
+              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"
+import {
+    getParentsStyle, //获取页面风格单个键值值
+    getParentsStyles //获取页面风格列表
+  } from '@/utils/xd.base';
+
+export default {
+  name: "XdCardPay",
+  components: {
+    XdDownDrawer,
+    XdButton,
+    XdUnit,
+    XdFontIcon,
+    XdRadio,
+    XdForm,
+    XdFormItem,
+    XdFormInput
+  },
+  props: {
+    show: false,
+    layoutInfo: {},
+    validImageAPIUrl: {  //图片验证码 接口地址
+      type: String,
+    },
+    selected_wallet_list: {
+      type: Array,
+      default: () => ([])
+    },
+    price: {  //订单总额 单位元
+      type: String|Number,
+      default: "100"
+    },
+    jwxSDK: { //JSSDK授权对象
+      type: Object,
+    },
+    getSettleListCards: { //支付卡券列表
+      type: Function
+    },
+    setSettleSelectCard: {  //选择卡券列表
+      type: Function
+    },
+    addSettleCard: {  //添加卡券
+      type: Function
+    },
+  },
+  watch: {
+    show(n, o){
+      this.xdDownDrawer = n;
+    },
+    xdDownDrawer(n){
+      this.$emit('update:show', n);
+    },
+    price: {
+      handler(n){
+        this.needPayPrice = this.$xdUniHelper.multiplyFloatNumber(n, 100);
+      },
+      immediate: true
+    },
+    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: {}
+    }
+  },
+  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);
+    },
+    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.switchValidToken();
+    this.style = await getParentsStyles(this.$parent);
+    console.log(this.style,'this.style');
+    this.handleInit();
+  },
+  methods: {
+    handleInit(){
+      this.total_price = this.$xdUniHelper.multiplyFloatNumber(this.price, 100);
+      this.needPayPrice = this.total_price;
+      this.getList();
+      this.selectedCardList = this.selectedCardList.map(item => {
+        item['card_use_point'] = 0;
+        return item;
+      })
+    },
+    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(){
+      //获取卡券列表
+      this.getSettleListCards((cardList) => {
+        this.$xdLog.setARMSInfo(this.filterMGinfo(cardList), 'init_binded_list');
+        this.cardList = cardList;
+      })
+    },
+    //选卡弹出项
+    useCardPop(data){
+      return new Promise((resolve, reject) => {
+        uni.showModal({
+          title: '提示',
+          content: data.pop_message,
+          confirmText: data.confirm_text,
+          cancelText: data.cancel_text,
+          success: function (res) {
+            if (res.confirm) {
+              resolve(2);
+            } else if (res.cancel) {
+              // reject("取消支付");
+              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.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} = 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
+      });
+    },
+    
+    //添加新卡券
+    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 uni.showToast({
+          title: err_tip,
+          icon: "none"
+        })
+      }
+      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));
+        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} = 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.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.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;
+    }
+    .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;
+    }
+  }
+  .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{
+        .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>

package/src/components/XdConfirm/XdConfirm.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="xd-input-confirm" @touchmove.stop.prevent :style="{zIndex:confirm.zIndex}" v-if="show">
-    <view class="xd-input-confirm__mask"></view>
+    <view class="xd-input-confirm__mask" @click.stop="handleMaskClose"></view>
     <view
       class="xd-input-confirm__body"
       :style="{
@@ -197,6 +197,12 @@
           this.onClose()
         }
       },
+
+      handleMaskClose(){
+        if(this.$configProject && this.$configProject['isPreview']) {
+          this.close();
+        }
+      }
     }
   }
 </script>

package/src/components/XdWalletChose/XdWalletChose.vue

@@ -0,0 +1,238 @@
+<template>
+  <view class="xd-wallet-chose">
+    <xd-down-drawer :show.sync="xdDownDrawer">
+      <view class="title" >请选择{{showName}}</view>
+      <view class="wallet_body">
+        <view class="wallet_total">
+          <view class="_title">剩余{{showName}}</view>
+          <view class="_money">{{totalAmount/100}}</view>
+        </view>
+        <view class="wallet_list" :key="renderChecked">
+          <view class="wallet_item" v-for="(item, i) in showWalletList" :key="i">
+            <view class="label">
+              <view class="label_tit">{{item.wallet_name}}</view>
+              <view>{{item.amount/100}}</view>
+            </view>
+            <view class="value">
+              <view class="val_sub" v-if="item.wallet_use_price > 0">本单<text class="red">已减{{item.wallet_use_price/100}}</text></view>
+              <xd-radio
+                :value="item.wallet_use_price > 0"
+                @change="flag => handleChange(flag, item)"
+              ></xd-radio>
+            </view>
+          </view>
+        </view>
+        <view style="height: 100rpx;"></view>
+        <view
+          v-show="xdDownDrawer"
+          class="bottom_btn"
+          :style="alert_bottom"
+        >
+          <xd-button width="360rpx" type="primary" radius="50rpx" @click="handleChose">确认支付</xd-button>
+        </view>
+      </view>
+    </xd-down-drawer>
+  </view>
+</template>
+<script>
+  import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer"
+  import XdRadio from "@/components/XdRadio/XdRadio"
+  import XdButton from "@/components/XdButton/XdButton"
+  export default {
+    name: "XdWalletChose",
+    components: {
+      XdDownDrawer,
+      XdRadio,
+      XdButton
+    },
+    props: {
+      show: {
+        type: Boolean,
+        default: false
+      },
+      layoutInfo: {},
+      getUserWalletList: {
+        type: Function
+      },
+      useBindedWallet: {
+        type: Function
+      }
+    },
+    watch: {
+      show(n, o){
+        this.xdDownDrawer = n;
+      },
+      xdDownDrawer(n){
+        this.$emit('update:show', n);
+      },
+    },
+    computed: {
+      showWalletList(){
+        let combineList = this.walletList.map(item => {
+          let cur = this.selectedWalletList.find(ii => ii.wallet_virtual_number == item.wallet_virtual_number);
+          if(cur) return Object.assign(item, cur);
+          return item;
+        })
+        return combineList;
+      },
+      alert_bottom(){
+        return this.fixedStyle({paddingBottom: 24, zIndex: 110})
+      },
+    },
+    data(){
+      return {
+        xdDownDrawer: false,
+        walletList: [],
+        selectedWalletList: [],
+        showName: "",
+        totalAmount: "",
+        needPayPrice: "",
+        walletPayPrice: "",
+        renderChecked: "renderChecked"
+      }
+    },
+    created(){
+      this.getUserWalletList((res) => {
+        console.log("getUserWalletList", res.walletList);
+        this.walletList = res.list.map(item => {
+          item.checked = false;
+          return item;
+        });
+        this.showName = res.show_name;
+        this.totalAmount = res.total_amount
+      })
+    },
+    methods: {
+      handleChose(){
+        let data = {
+          walletPayPrice: this.walletPayPrice,
+          selectedWalletList: this.selectedWalletList,
+          needPayPrice: this.needPayPrice
+        }
+        this.$emit("onChose", data)
+      },
+      handleChange(flag, row){
+        console.log(flag);
+        console.log(this.walletList);
+        if(flag){
+          this.$xdShowLoading({})
+          this.useBindedWallet({
+            wallet_type: row.wallet_type,
+            selected_wallet_list_json: JSON.stringify(this.selectedWalletList),
+          }, (res) => {
+            this.$xdHideLoading();
+            console.log("selected_wallet_list", res)
+            let selected_wallet_list = res.selected_wallet_list;
+            this.selectedWalletList = selected_wallet_list;
+            this.needPayPrice = res.need_pay_price;
+            this.walletPayPrice = res.wallet_total_use_price;
+            this.renderChecked = Date.now();
+          }, (err) => {
+            this.$xdHideLoading();
+            this.renderChecked = Date.now();
+          });
+        }else{
+          this.selectedWalletList = this.selectedWalletList.filter(item => {
+            return item.wallet_virtual_number != row.wallet_virtual_number
+          })
+          this.walletPayPrice = this.walletPayPrice - row.wallet_use_price;
+          this.$set(row, "wallet_use_price",  0);
+        }
+      },
+      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;
+      },
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .xd-wallet-chose{
+    .title{
+      height: 100rpx; 
+      line-height: 100rpx;
+      background:#FFF;
+      text-align: center;
+      font-size: 28rpx;
+      color: #666666;
+      border-bottom: 1px solid #F2F2F2;
+    }
+    .wallet_body{
+      padding-bottom: 150rpx;
+      max-height: 70vh;
+      overflow: auto;
+      .wallet_total{
+        padding: 32rpx 48rpx;
+        border-bottom: 1px solid #F2F2F2;
+        ._title{
+          color: #333333;
+          font-size: 24rpx;
+          font-weight: 400;
+        }
+        ._money{
+          color: #333333;
+          font-size: 64rpx;
+          font-weight: 500;
+        }
+      }
+      .wallet_list{
+        .wallet_item{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 32rpx 48rpx;
+          font-size: 26rpx;
+          color: #666666;
+          .label{
+            display: flex;
+            align-items: center;
+            .label_tit{
+              margin-right: 16rpx;
+            }
+          }
+          .value{
+            display: flex;
+            align-items: center;
+            .val_sub{
+              color: #999999;
+              margin-right: 24rpx;
+              .red{
+                color: #FF7070;
+              }
+            }
+          }
+        }
+      }
+
+      .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>