gxd-uni-library-editx 1.0.7 → 1.0.8-beta2

package/package.json

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

package/src/components/XdCardPay/XdCardPay.vue

@@ -0,0 +1,635 @@
+<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>
+            <view class="column_value text-gray">
+              <xd-unit
+                :price="total_price"
+                :isOld="false"
+                :font-size="24"
+                :icon-size="0.3"
+              ></xd-unit>
+            </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="24"
+                :icon-size="0.3"
+              ></xd-unit>
+            </view>
+          </view>
+          <view class="column-item">
+            <view class="column_label">
+              我的票券
+              <view class="label_sub">（已使用{{checkedCards.length}}张票券）</view>
+            </view>
+            <view class="column_value">
+              <xd-button
+                width="220rpx"
+                radius="60rpx"
+                type="primary"
+                size="small"
+                @click="xdDownDrawerNewCard=true"
+              >使用新票券</xd-button>
+            </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
+                size="mini"
+                @change="flat => handlerTicketSelect(flat, ticket.card_number)"
+                :value="checkedCards.includes(ticket.card_number)"
+              ></xd-radio>
+            </view>
+            <view class="_cont">
+              <view style="margin-right: 30rpx;">ID：{{ticket.card_number}}</view>
+              <view>有效期至：{{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"
+                ></xd-unit>
+              </view>
+              <view
+                v-if="ticket.card_use_price"
+                class="_item text-primary"
+              >
+                使用：<xd-unit
+                  :price="ticket.card_use_price"
+                  :isOld="false"
+                  :font-size="24"
+                  :icon-size="0.3"
+                ></xd-unit>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view
+          v-if="needPayPrice>0"
+          class="remain_pay"
+        >
+          <view class="remain_header">
+            <view>选择以下支付方式</view>
+            <view class="flex align-center text-primary">
+              <view style="margin-right:8rpx;">继续支付</view>
+              <xd-unit
+                :price="needPayPrice"
+                :is-show-icon="false"
+                unit="元"
+                :isOld="false"
+                :font-size="24"
+                :icon-size="0.3"
+              ></xd-unit>
+            </view>
+          </view>
+          <view class="pay_list">
+            <view
+              v-for="item in payChannels"
+              :key="item.channel_provider_id"
+              class="pay_item"
+            >
+              <view class="icon">
+                <xd-font-icon
+                  v-if="item.channel_code =='wxpay'"
+                  icon="iconwx"
+                  size="64"
+                  color="#25bc46"
+                ></xd-font-icon>
+              </view>
+              <view class="pay_name">{{item.channel_provider_name}}</view>
+              <xd-radio
+                @change="flat => handlerPayCheck(item.channel_provider_id, flat)"
+                :value="channel_provider_id==item.channel_provider_id"
+              ></xd-radio>
+            </view>
+          </view>
+        </view>
+        <view
+          class="bottom_btn"
+          :style="{bottom: layoutInfo.bottom+'rpx', opacity: this.show?'1':'0'}"
+        >
+          <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"
+    >
+      <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>
+    </xd-down-drawer>
+  </view>
+</template>
+<script>
+/**
+ * @description 选择卡券支付 & 支持三方支付
+ * @property show                   {Boolean}         是否显示支付卡券弹窗
+ * @property layoutInfo             {Object}          XdLayout返回的布局信息
+ * @property validImageAPIUrl       {String}          图片验证码接口API地址
+ * @property jwxSDK                 {Object}          JSSDK授权对象
+ * @property payChannels            {Array}           三方支付列表
+ * @property price                  {Number|String}   订单总额 单位元
+ * @property getSettleListCards     {Function(successCallBack(cardList))}               获取支付卡券列表
+ * @property setSettleSelectCard    {Function(options, successCallBack, errCallBack)}   选择卡券列表
+ * @property addSettleCard          {Function(options, successCallBack)}                添加卡券
+ * @property createSettleOrder      {Function(options, successCallBack)}                创建订单
+ * @property setThirdPlace          {Function(options, successCallBack)}                获取三方支付签名
+ *
+ * @event {Function} onCreateOrder 订单创建完成触发函数
+ */
+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"
+
+export default {
+  name: "XdCardPay",
+  components: {
+    XdDownDrawer,
+    XdButton,
+    XdUnit,
+    XdFontIcon,
+    XdRadio,
+    XdForm,
+    XdFormItem,
+    XdFormInput
+  },
+  props: {
+    show: false,
+    layoutInfo: {},
+    validImageAPIUrl: {  //图片验证码 接口地址
+      type: String,
+    },
+    price: {  //订单总额 单位元
+      type: String|Number,
+      default: "100"
+    },
+    jwxSDK: { //JSSDK授权对象
+      type: Object,
+    },
+    payChannels: {  //三方支付列表
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    getSettleListCards: { //支付卡券列表
+      type: Function
+    },
+    setSettleSelectCard: {  //选择卡券列表
+      type: Function
+    },
+    addSettleCard: {  //添加卡券
+      type: Function
+    },
+    createSettleOrder: {  //创建订单
+      type: Function
+    },
+    setThirdPlace: {  //获取三方支付签名参数
+      type: Function
+    }
+  },
+  watch: {
+    show(n, o){
+      this.xdDownDrawer = n;
+    },
+    xdDownDrawer(n){
+      this.$emit('update:show', n);
+    }
+  },
+  data(){
+    return {
+      xdDownDrawer: false,
+      xdDownDrawerNewCard: false,
+      channel_provider_id: "",
+      cardList: [
+        {
+          "card_number":"101001000005193",
+          "card_type_name":"聚福宝福卡测试蛋糕",
+          "end_time":"2024-10-31",
+          "card_point":100000000,
+          "is_bind_card":true
+        },
+      ],   //展示
+      selectedCardList: [],
+      needPayPrice: 0,
+      cardForm: { //添加新卡券表单
+        card_number: "",
+        card_password: "",
+        valid_code: "",   //验证码正文
+        valid_token: "",  //验证码token
+      },
+      renderChecked: "renderChecked",
+
+      total_price: "",
+    }
+  },
+  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_price > 0).map(item => item.card_number);
+    },
+    //提交是的selectedCardList, 由于取消选中不走接口 & 避免取消隐藏
+    submitCardList(){
+      return this.selectedCardList.filter(item => item.card_use_price > 0);
+    },
+    curPayChannel(){
+      return this.payChannels.find(item => item.channel_provider_id === this.channel_provider_id);
+    }
+  },
+  created(){
+    this.total_price = this.$xdUniHelper.multiplyFloatNumber(this.price, 100);
+    this.needPayPrice = this.total_price;
+
+    this.getList();
+  },
+  methods: {
+    getList(){
+      //获取卡券列表
+      this.getSettleListCards((cardList) => {
+        this.cardList = cardList;
+      })
+    },
+    //选择卡券
+    handlerTicketSelect(flat, card_number){
+      if(flat){ //选择卡券，重新调用接口获取 selectedCardList, neePayPrice
+        const {submitCardList, total_price} = this;
+        this.setSettleSelectCard({
+          total_price,
+          card_number,
+          selected_card_list_json: JSON.stringify(submitCardList)
+        }, (res) => {
+          const {selected_card_list, need_pay_price} = res;
+          this.selectedCardList = selected_card_list;
+          this.needPayPrice = need_pay_price;
+          this.renderChecked = Date.now();
+        }, (err) => {
+          this.renderChecked = Date.now();
+        })
+      }else{
+        //不走接口， selectedCardList不是真实选中的
+        this.selectedCardList = this.selectedCardList.map(item => {
+          if(item.card_number === card_number){
+            this.needPayPrice = +this.needPayPrice + item['card_use_price']
+            item['card_use_price'] = 0;
+          }
+          return item;
+        });
+        this.renderChecked = Date.now();
+      }
+
+    },
+    //添加新卡券
+    addNewCard(){
+      const { cardForm, total_price, submitCardList } = this;
+      this.addSettleCard({
+        ...cardForm,
+        selected_card_list_json: JSON.stringify(submitCardList),
+        total_price,
+      }, () => {
+        //成功回调
+        this.getList();
+      })
+    },
+    //确认支付
+    doTicketPay(){
+      const { total_price, submitCardList, needPayPrice } = this;
+    
+      if(+needPayPrice > 0 && !this.channel_provider_id){
+        uni.showToast({
+          title: "请选择继续支付方式",
+          icon: "none"
+        });
+        return false;
+      }
+      let postData = {
+        total_price,
+        selected_card_list_json: JSON.stringify(submitCardList),
+        need_pay_price: needPayPrice
+      };
+
+      this.createSettleOrder(postData, (order) => {
+        if(+needPayPrice > 0){
+          this.doThirdPay(order);
+        }else{
+          this.$emit("onCreateOrder", order);  //支付完成，触发
+        }
+      })
+    },
+    //扫码
+    doScanCode(){
+      this.jwxSDK.scanQRCode({
+        needResult: 1,
+        success: res => {
+          console.log(res);
+          this.$set(this.cardForm, 'card_number', res.resultStr)
+        }
+      })
+    },
+    //第三方支付签名获取
+    doThirdPay(order){
+      const { channel_provider_id } = this;
+      this.setThirdPlace({order_id: order.fms_order_id,channel_provider_id}, (res) => {
+        const { channel_data } = res;
+        const paySignData = JSON.parse(Base64.decode(channel_data));
+        this.openTemplatePay(paySignData, ps => {
+          this.$emit("onCreateOrder", order);  //支付完成，触发
+        });
+      })
+    },
+    //唤醒三方平台支付
+    openTemplatePay(paySignData, cb){
+      // #ifdef H5
+      this.jwxSDK.chooseWXPay({
+        ...paySignData,
+        success: (res) => {
+          console.log('pay success', res);
+          uni.showToast({
+            title: "支付成功",
+            icon: "none"
+          })
+          cb(res);
+        },
+        cancel: () => {
+          uni.showToast({
+            title: "取消支付",
+            icon: "none"
+          })
+        },
+        fail: err => {
+          uni.showToast({
+            title: "支付失败",
+            icon: "none"
+          })
+          console.log('pay fail', err);
+        }
+      })
+      // #endif
+
+      // #ifndef H5
+        console.log("未支持唤醒三方支付");
+      // #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;
+            }
+          }
+        }
+      }
+
+      .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);
+        opacity: 0;
+        transition: 500ms all;
+      }
+    }
+  }
+</style>

package/src/utils/helper.js

@@ -820,6 +820,14 @@ class Helpers {
       }
     }
 
+    //#ifdef H5
+    if(window['$configProject'] && window['$configProject'].isPreview) {
+      if(obj['url'].indexOf('/preview/index/index') === -1) {
+        alert(`点击链接跳转地址：${obj['url']}`);
+      }
+    }
+    // #endif
+
     if (isH5) {
       window.location.href = obj['url'];
     } else {

package/src/utils/xd.event.js

@@ -36,7 +36,7 @@ export function jfbRootExec(fnName, params) {
   ) {
     console.log(`调用方法名字:${fnName}，返回值:`, params.vm.$root.mocks[fnName]);
     return new Promise((resolve) => {
-      resolve(params.vm.$root.mocks[fnName]);
+      resolve(JSON.parse(JSON.stringify(params.vm.$root.mocks[fnName])));
     });
   }
   //#endif

package/src/utils/xd.frame.js

@@ -91,7 +91,6 @@ class xdFrame {
    * @param attr {String} 属性名字
    */
   getParentData(attr) {
-    console.log('getParentData',)
     if (window.parent['$boardData']) {
       return this.getParent()['$boardData'][attr];
     } else return [];

package/src/utils/xdh5log.js

@@ -212,7 +212,6 @@ class Logs {
 
   checkMessage(error){
     console.error(error);
-    throw error;
     let errorStr = error;
     if(Object.prototype.toString.call(error) === '[object Error]') {
       errorStr = JSON.stringify(runtime().getErrorInfo(error));