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

package/package.json

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

package/src/components/XdCardPay/XdCardPay.vue

@@ -0,0 +1,547 @@
+<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="xdDownDrawer"
+          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"
+      @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>
+    </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)}                添加卡券
+ * @property createSettleOrder      {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);
+    },
+  },
+  created(){
+    this.total_price = this.$xdUniHelper.multiplyFloatNumber(this.price, 100);
+    this.needPayPrice = this.total_price;
+    this.switchValidToken();
+    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,
+      }, (res) => {
+        //成功回调
+        let {selected_card_list=[], need_pay_price} = res;
+        this.cardList = selected_card_list.concat(this.cardList);
+        this.selectedCardList = selected_card_list.concat(this.selectedCardList);
+        this.needPayPrice = need_pay_price;
+        this.switchValidToken();
+        this.xdDownDrawerNewCard = false;
+        this.renderChecked = Date.now();
+      }, (err) => {
+        this.switchValidToken();
+      })
+    },
+    //确认支付
+    doTicketPay(){
+      const { total_price, submitCardList, needPayPrice } = this;
+      let postData = {
+        total_price,
+        selected_card_list_json: JSON.stringify(submitCardList),
+        need_pay_price: needPayPrice
+      };
+      this.createSettleOrder(postData, (order) => {
+        this.$emit("onCreateOrder", {need_pay_price: needPayPrice, ...order});  //支付完成，触发
+      })
+    },
+    //刷新图片验证码
+    switchValidToken(){
+      let valid_token = this.$xdUniHelper.randomChar(20);
+      this.$set(this.cardForm, "valid_token", valid_token);
+    },
+    //扫码
+    doScanCode(){
+      this.jwxSDK.scanQRCode({
+        needResult: 1,
+        success: res => {
+          this.$set(this.cardForm, 'card_number', res.resultStr)
+        }
+      })
+    },
+  }
+}
+</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/components/XdCoins/XdCoins.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="xd-coins" @click="handleClick" :style="getStyle">
-    <view class="xd-coins__bg"></view>
+    <view class="xd-coins__bg" :style="{backgroundImage: 'url('+ icon +')'}"></view>
   </view>
 </template>
 
@@ -14,6 +14,11 @@
    * @event {Function} click|tap    点击元宝事件
    */
 
+  import {
+    getParentsStyle,
+  } from '@/utils/xd.base';
+  import {mapState} from 'vuex';
+
   export default {
     name: "XdCoins",
     props:{
@@ -29,10 +34,12 @@
     data(){
       return {
         height: 92,
-        width: 120
+        width: 120,
+        icon: '',
       }
     },
     computed:{
+      ...mapState(['webUnitIcon']),
       getStyle(){
         let size = this.size;
         if (this.$xdUniHelper.checkVarType(size) === 'string') {
@@ -45,8 +52,25 @@
         if (size < 0.1) size = 0.1;
         if (size > 1.5) size = 1.5;
         return `height:${this.height * size}rpx; width: ${this.width * size}rpx;`;
+      },
+    },
+    created(){
+      //brand中获取
+      let brandIncon = null;
+      if (getApp().globalData.$xd && getApp().globalData.$xd.brandInfo['unit_icon']) {
+        brandIncon = getApp().globalData.$xd.brandInfo['unit_icon'];
+      }
+  
+      //项目配置中获取
+      let projectIcon;
+      if (this.webUnitIcon) {
+        projectIcon = this.webUnitIcon;
       }
+  
+      this.icon = projectIcon || brandIncon;
     },
+    
+    
     methods:{
       handleClick(e){
         this.$emit('click',e);

package/src/components/XdContentXss/XdContentXss.vue

@@ -1,9 +1,9 @@
 <template>
   <!-- #ifdef MP-WEIXIN  -->
-  <view class="xd-content-xss" v-if="vhtml" v-html="vhtml"></view>
+  <view class="xd-content-xss" :style="{fontSize: fontSizes + 'rpx', lineHeight: fontSizes * 1.8}" v-if="vhtml" v-html="vhtml"></view>
   <!-- #endif -->
   <!-- #ifdef H5  -->
-  <view class="xd-content-xss" v-if="vhtml" v-html="vhtml"></view>
+  <view class="xd-content-xss" :style="{fontSize: fontSizes + 'rpx', lineHeight: fontSizes * 1.8 + 'rpx'}" v-if="vhtml" v-html="vhtml"></view>
   <!-- #endif -->
   <!-- #ifndef MP-WEIXIN || H5 -->
   <xd-mp-html v-if="vhtml" :content="vhtml"></xd-mp-html>
@@ -25,6 +25,10 @@
       html: {
         type: String | null,
         default: null
+      },
+      fontSizes: {
+        type: String | Number,
+        default: 24
       }
     },
     data(){