jufubao-base 1.0.235-beta2 → 1.0.236-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.235-beta2",
+  "version": "1.0.236-beta1",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",

package/src/components/JfbBaseCard/Attr.js

@@ -274,6 +274,17 @@ export default {
         inline: false,
         notice: '当未设置文案时，页面默认展示为"<span style="color:red">购买新卡</span>"，建议不超过<span style="color:red">4</span>个汉字'
       },
+      {
+        label: "优惠券是否单独展示:",
+        ele: 'xd-radio',
+        valueKey: 'show_coupon_tab',
+        groupKey: 'content',
+        value: data.show_coupon_tab || 'N',
+        list: [
+          { label: "是", value: "Y" },
+          { label: "否", value: "N" }
+        ],
+      },
       {
         ele: 'title',
         label: '登录样式设置',

package/src/components/JfbBaseCard/JfbBaseCard.vue

@@ -16,7 +16,11 @@
       <view class="jfb-base-card__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view :style="{paddingTop: bindCard!=='1'?'35rpx':'55rpx'}" class="jfb-base-card__body">
+    <view :style="{
+      paddingTop: bindCard!=='1'?'35rpx':'55rpx',
+      '--main-color': mainColor,
+      '--main-alpha-color': mainSubBorderColor
+    }" class="jfb-base-card__body">
       <view v-if="bindCard==='1'" class="jfb-base-card__body-cut">
         <template v-if="isQrCode">
           <view
@@ -101,22 +105,25 @@
       </view>
       <!--notice end-->
       <view class="jfb-base-card__body-tab">
-        <view
-          @click="tabIndex = 1"
-          :style="{
-            color: tabIndex === 1 ? '#fff' : '#B8B7BE',
-            background: tabIndex === 1 ? mainColor : '#fff',
-          }"
-        >已绑定票券</view>
-        <view
-          v-if="changeList.length > 0"
-          @click="tabIndex = 2"
-          :style="{
-            color: tabIndex === 2 ? '#fff' : '#B8B7BE',
-            background: tabIndex === 2 ? mainColor : '#fff',
-          }"
-        >可转换票券</view>
-        <view class="debuger" v-if="cardList.length === 0" @click="openDebugger(true)" style="opacity: 0">debuger</view>
+        <view v-if="show_coupon_tab==='Y'" class="show_type_tab">
+          <view class="type_item" :class="{active: show_type==='normal'}" @click="switchShowType('normal')">已绑定票券</view>
+          <view class="type_item" :class="{active: show_type==='coupon'}" @click="switchShowType('coupon')">优惠券</view>
+        </view>
+        <view class="tab_index_wrap">
+          <view
+            @click="tabIndex = 1"
+            class="tab_item"
+            :class="{sub: show_coupon_tab==='Y', active: tabIndex===1}"
+          >{{ show_coupon_tab==='Y' ? '可用票券' : '已绑定票券' }}</view>
+          <view
+            v-if="changeList.length > 0"
+            @click="tabIndex = 2"
+            class="tab_item"
+            :class="{sub: show_coupon_tab==='Y', active: tabIndex===2}"
+          >可转换票券</view>
+          <view class="debuger" v-if="cardList.length === 0" @click="openDebugger(true)" style="opacity: 0">debuger</view>
+        </view>
+        
       </view>
       <view
         class="jfb-base-card__body-tips"
@@ -343,6 +350,7 @@ export default {
   },
   data() {
     return {
+      show_type: "normal",  //normal正常票券;coupon 满减券
       options: {},
       inCallbackUrlOrg:'',//是否带有回调地址
       mainBorderColor:'',
@@ -396,6 +404,7 @@ export default {
       showDisabled: 'Y',
 
       dialogEvent: false,
+      show_coupon_tab: "N",
       // is_show_change: false,
       popup: "https://img.zcool.cn/community/01784158abe781a801219c77e981ee.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100",
       buy_name: '',
@@ -460,6 +469,7 @@ export default {
       this.isShowBuy = getContainerPropsValue(container, "content.isShowBuy", "N");
       this.buy_name = getContainerPropsValue(container, "content.buy_name", "购买新卡");      
       this.buy_new_url = getContainerPropsValue(container,"content.buy_new_url",{value: ""}).value;
+      this.show_coupon_tab = getContainerPropsValue(container, "content.show_coupon_tab", "N");
     },
 
     handleToLink(path) {
@@ -468,7 +478,10 @@ export default {
         url: path,
       });
     },
-
+    switchShowType(show_type) {
+      this.show_type = show_type;
+      this.getCardList(this.options);
+    },
     getContent() {
       jfbRootExec("getListBaseNewsContent", {
         vm: this,
@@ -631,6 +644,9 @@ export default {
       if(options['jfb_business_code']) {
         params['card_business_code'] = options['jfb_business_code'];
       }
+      if(this.show_coupon_tab === 'Y'){
+        params.show_type = this.show_type;
+      }
       this.$xdShowLoading({});
       jfbRootExec("getListCardBind", {
         vm: this,
@@ -741,6 +757,30 @@ export default {
     padding: unit(55, rpx) unit(35, rpx);
     color: #333;
 
+    .show_type_tab{
+      display: flex;
+      align-items: center;
+      margin-bottom: 24rpx;
+      .type_item{
+        padding: unit(5, rpx) unit(22, rpx);
+        text-align: center;
+        line-height: unit(60, rpx);
+        border-radius: unit(60, rpx);
+        color: #B8B7BE;
+        & + .type_item{
+          margin-left: unit(30, rpx);
+        }
+        &.active{
+          background-color: var(--main-color);
+          color: #FFFFFF;
+        }
+      }
+    }
+    .tab_index_wrap{
+      display: flex;
+      align-items: center;
+    }
+
     &-empty {
       color: #888;
       font-size: unit(24,rpx);
@@ -889,12 +929,13 @@ export default {
 
     &-tab {
       display: flex;
-      align-items: center;
+      flex-direction: column;
+      align-items: flex-start;
       font-size: unit(28, rpx);
       margin-bottom: unit(46, rpx);
       margin-top: unit(46, rpx);
 
-      & > view {
+      .tab_item {
         // width: unit(214, rpx);
         // height: unit(60, rpx);
         padding: unit(5, rpx) unit(22, rpx);
@@ -902,6 +943,22 @@ export default {
         line-height: unit(60, rpx);
         margin-right: unit(30, rpx);
         border-radius: unit(60, rpx);
+        color: #B8B7BE;
+        background: #FFFFFF;
+        &.active{
+          color: #FFFFFF;
+          background-color: var(--main-color);
+        }
+        &.sub{
+          border-radius: unit(8, rpx);
+          line-height: unit(40, rpx);
+          color: #FFFFFF;
+          background-color: #B8B7BE;
+          &.active{
+            color: var(--main-color);
+            background-color: var(--main-alpha-color);
+          }
+        }
       }
     }
 

package/src/components/JfbBaseCardGive/Api.js

@@ -39,4 +39,17 @@ module.exports = [
     },
     disabled: true,
   },
+  {
+    mapFnName: "generateQrCode",
+    title: "生成二维码",
+    path: "/common/v1/image/qrcode",
+    isRule: false,
+    params: {
+      code_content: ['二维码内容', 'String', true],
+      size: ['二维码大小', 'Number', true],
+      margin: ['二维码边距', 'Number', true]
+    },
+    isConsole: true,
+    disabled: true
+  }
 ];

package/src/components/JfbBaseCardGive/Attr.js

@@ -38,7 +38,7 @@ export default {
         ]
       },
       {
-        label: '分享图片:', //label
+        label: '分享图片(适用于小程序):', //label
         ele: 'xd-upload', //package 名称
         valueKey: 'shareImage', //form[valueKey]
         value: data.shareImage || null, //v-model
@@ -60,6 +60,29 @@ export default {
           { required: true, message: '请上传图片', trigger: ['blur', 'change'] },
         ]
       },
+      {
+        label: '分享图片(适用于下载保存):', //label
+        ele: 'xd-upload', //package 名称
+        valueKey: 'shareDownloadImage', //form[valueKey]
+        value: data.shareDownloadImage || null, //v-model
+        defaultValue: data.shareDownloadImage || null, //默认图片对象
+        groupKey: "style",
+        slot: true, //按钮是否使用slot
+        oneWidth: 218, //单个图片显示宽度
+        oneHeight: 323, //单个图片显示高度
+        elinputClassName: 'input40',
+        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.建议尺寸：654*968px.',
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传
+        uploadType: 'aliyun', //''=>API服务上传  qiniu=>七牛云OSS上传  aliyun=> 阿里云OSS上传
+        size: 5, //5M
+        action: 'aliyun',
+        sort: true, //当上传图片列表时候，是否启用排序
+        maxlen: 100, //当上传图片列表时候，最大数量数量
+        rules: [
+          { required: true, message: '请上传图片', trigger: ['blur', 'change'] },
+        ]
+      },
     ].filter(i=>i)
   },
   advanced: [],

package/src/components/JfbBaseCardGive/JfbBaseCardGive.vue

@@ -130,9 +130,13 @@
           </button>
           <!-- #endif -->
           <!-- #ifdef H5 -->
-          <xd-button @click="handleShare" width="360rpx" type="primary"
-            >通知微信好友</xd-button
-          >
+          <view style="display: flex;align-items: center;justify-content: space-between;">
+            <xd-button @click="handleShare" width="260rpx" type="primary" size="small"
+              >通知微信好友</xd-button>
+            <xd-button @click="handleShare" width="260rpx" type="primary" size="small"
+              >查看分享图片</xd-button>
+          </view>
+          
           <!-- #endif -->
         </view>
       </xd-dailog>
@@ -149,6 +153,13 @@
           >
         </view>
       </xd-dailog>
+      <view class="share_card_dialog" v-show="showShareCard">
+        <view class="share_modal" @click="showShareCard=false"></view>
+        <view class="share_content">
+          <image :src="canvasUrl" v-if="canvasUrl" class="share_img"  style="width: 654rpx; height: 968rpx;"></image>
+        </view>
+      </view>
+      <canvas class="renderCanvas" canvas-id="shareCanvas" id="shareCanvas" style="width: 654rpx; height: 968rpx;" ></canvas>
     </view>
   </view>
 </template>
@@ -183,13 +194,21 @@ export default {
       get_url: null,
       back_url: null,
       shareImage: "",
+      shareDownloadImage: "",
       isPreview: false,
       errMsg: "",
       resultDialog: false,
+      showShareDialog: true,
+      imageCache: {},
+      showShareCard: false,
+      canvasUrl: "",
     };
   },
   computed: {
     ...mapState(["shareInfo"]),
+    ...mapState({
+      brandInfo: state => state.brandInfo
+    }),
     prod_bottom() {
       return this.fixedStyle({ height: 0, zIndex: 111 });
     },
@@ -211,6 +230,20 @@ export default {
       this.card_number = options.card_number;
       await this.getDetail();
     },
+    toSetShareImg(){
+      if(this.info.transfer_record && this.info.transfer_record.transfer_auth_code){
+        let url = `${document.location.origin}/${this.projectAttr.deploy_dir}${this.get_url}?transfer_auth_code=${this.info.transfer_record.transfer_auth_code}`;
+        let ctx = uni.createCanvasContext("shareCanvas");
+        console.log(ctx);
+        ctx.save();
+        ctx.drawImage(this.shareDownloadImage, 0, 0, 654*this.$rpxNum, 968*this.$rpxNum);
+        ctx.restore();
+
+        let qrImg = this.brandInfo['api_host'] + `/common/v1/image/qrcode?code_content=${url}`
+        ctx.drawImage(qrImg, 200*this.$rpxNum, 500*this.$rpxNum, 250*this.$rpxNum, 250*this.$rpxNum);
+        ctx.draw();
+      }
+    },
     getDetail() {
       this.$xdShowLoading({});
       jfbRootExec("getBaseByIdCardDetailGive", {
@@ -244,6 +277,9 @@ export default {
                 return this.info.business_codes.includes(item.business_code);
               });
           }
+          setTimeout(() => {
+            this.toSetShareImg()
+          }, 300);
         })
         .catch((err) => {
           this.$xdHideLoading({});
@@ -266,6 +302,7 @@ export default {
         "content.shareImage",
         { url: "" }
       ).url;
+      this.shareDownloadImage = getServiceUrl(getContainerPropsValue(container, 'content.shareDownloadImage', { url: '' }).url);
     },
     handleCancel() {
       this.resultDialog = false;
@@ -331,8 +368,22 @@ export default {
     },
     handleShare() {
       //#ifdef H5
-      let share = `${document.location.origin}/${this.projectAttr.deploy_dir}${this.get_url}?transfer_auth_code=${this.info.transfer_record.transfer_auth_code}`;
-      this.copy(share);
+      this.dialogShow = false;
+      this.showShareCard = true;
+      if(this.canvasUrl) return;
+      this.$nextTick(() => {
+        uni.canvasToTempFilePath({
+          canvasId: "shareCanvas",
+          success: (res) => {
+            this.canvasUrl = res.tempFilePath;
+            console.log(res, 'canvasUrl');
+          },
+          fail: (err) => {
+            this.$xdHideLoading({});
+            console.log(err);
+          },
+        })
+      })
       // #endif
       // #ifdef MP-WEIXIN
       this.setShareInfo({
@@ -361,6 +412,35 @@ export default {
   &__body {
     padding: 28rpx;
     color: #333;
+    .renderCanvas{
+      position: fixed;
+      bottom: -999999px;
+    }
+    .share_card_dialog{
+      .share_modal{
+        width: 100vh;
+        height: 100vh;
+        position: fixed;
+        top: 0;
+        left: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 112;
+      }
+      .share_content{
+        width: 654rpx;
+        height: 968rpx;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 113;
+        .share_img{
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+      }
+    }
     .qrcode_card {
       position: relative;
       border-radius: unit(16, rpx);

package/src/components/JfbBaseCardV2/Attr.js

@@ -67,6 +67,17 @@ export default {
         inline: false,
         notice: '当未设置文案时，页面默认展示为"<span style="color:red">购买新卡</span>"，建议不超过<span style="color:red">4</span>个汉字'
       },
+      {
+        label: "优惠券是否单独展示:",
+        ele: 'xd-radio',
+        valueKey: 'show_coupon_tab',
+        groupKey: 'content',
+        value: data.show_coupon_tab || 'N',
+        list: [
+          { label: "是", value: "Y" },
+          { label: "否", value: "N" }
+        ],
+      },
       {
         label: '填充设置:',
         ele: 'xd-margin-padding',

package/src/components/JfbBaseCardV2/JfbBaseCardV2.vue

@@ -13,7 +13,9 @@
       <view class="jfb-base-card-v2__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-card-v2__body">
+    <view class="jfb-base-card-v2__body" :style="{
+      '--main-color': mainColor,
+    }">
       <view v-if="loadingCardList">
         <view
           class="jfb-base-card__body-card skeleton-card"
@@ -49,6 +51,12 @@
           class="jfb-base-card__body-card"
           :style="{padding: marginUi}"
         >
+          <view class="card_filter">
+            <view v-if="show_coupon_tab==='Y'" class="show_type_tab">
+              <view class="type_item" :class="{active: show_type==='normal'}" @click="switchShowType('normal')">已绑定票券</view>
+              <view class="type_item" :class="{active: show_type==='coupon'}" @click="switchShowType('coupon')">优惠券</view>
+            </view>
+          </view>
           <view v-if="cardList&&cardList.length>0">
             <view
               v-for="(item, index) in cardList"
@@ -153,12 +161,15 @@
     ],
     data() {
       return {
+        options: {},
         cardList: [],
         inCallback: "",
         mainBorderColor:'',
         mainSubBorderColor:'',
+        show_type: "normal",
 
         //面板
+        show_coupon_tab: "N",
         cardInfoPath: "", //卡券详情
         cardBindPath: "",
         orderListPath: "",
@@ -205,6 +216,7 @@
     },
     methods: {
       onJfbLoad(options) {
+        this.options = options;
         let { inCallback } = options;
         if(!inCallback) this.$storage.remove("inCallback"); //作为入口
         else {
@@ -219,24 +231,7 @@
           }
         }
         this.inCallback = inCallback || this.settings.index;
-
-
-        let params = {is_all: 'Y'};
-        if (options['jfb_business_code']) {
-          params['card_business_code'] = options['jfb_business_code'];
-        }
-
-        jfbRootExec("getListCardBind", {
-          vm: this,
-          data: params,
-        }).then((res) => {
-          this.loadingCardList = false;
-          this.cardList = res.list.map((item) => {
-            item['card_point'] = this.$xdUniHelper.divisionFloatNumber(item.card_point,100);
-            item['other_card_point'] = this.$xdUniHelper.divisionFloatNumber(item.other_card_point,100);
-            return item;
-          }).filter((item) => item["is_valid"] === "Y");
-        })
+        this.getList();
       },
 
       /**
@@ -255,9 +250,33 @@
         this.isShowBuy = getContainerPropsValue(container, "content.isShowBuy", "N");
         this.buy_name = getContainerPropsValue(container, "content.buy_name", "购买新卡");
         this.buy_new_url = getContainerPropsValue(container,"content.buy_new_url",{value: ""}).value;
-
+        this.show_coupon_tab = getContainerPropsValue(container, "content.show_coupon_tab", "N");
       },
+      getList(){
+        let options = this.options;
+        let params = {is_all: 'Y'};
+        if (options['jfb_business_code']) {
+          params['card_business_code'] = options['jfb_business_code'];
+        }
+        if(this.show_coupon_tab === 'Y'){
+          params.show_type = this.show_type;
+        }
 
+        jfbRootExec("getListCardBind", {
+          vm: this,
+          data: params,
+        }).then((res) => {
+          this.loadingCardList = false;
+          this.cardList = res.list.map((item) => {
+            item['card_point'] = this.$xdUniHelper.divisionFloatNumber(item.card_point,100);
+            item['other_card_point'] = this.$xdUniHelper.divisionFloatNumber(item.other_card_point,100);
+            return item;
+          }).filter((item) => item["is_valid"] === "Y");
+        })
+      },
+      switchShowType(type){
+        this.show_type = type;
+      },
       handleBindLogin(item){
         this.$xdShowLoading({});
         jfbRootExec("loginCardBind", {
@@ -324,6 +343,25 @@
 
   .jfb-base-card-v2 {
     &__body{
+      .show_type_tab{
+        display: flex;
+        align-items: center;
+        margin-bottom: 24rpx;
+        .type_item{
+          padding: unit(5, rpx) unit(22, rpx);
+          text-align: center;
+          line-height: unit(60, rpx);
+          border-radius: unit(60, rpx);
+          color: #B8B7BE;
+          & + .type_item{
+            margin-left: unit(30, rpx);
+          }
+          &.active{
+            background-color: var(--main-color);
+            color: #FFFFFF;
+          }
+        }
+      }
       .bottom_fix{
         position: fixed;
         right: 0;

package/src/components/JfbBaseCardV3/Attr.js

@@ -54,6 +54,17 @@ export default {
         inline: false,
         notice: '当未设置文案时，页面默认展示为"<span style="color:red">购买新卡</span>"，建议不超过<span style="color:red">4</span>个汉字'
       },
+      {
+        label: "优惠券是否单独展示:",
+        ele: 'xd-radio',
+        valueKey: 'show_coupon_tab',
+        groupKey: 'content',
+        value: data.show_coupon_tab || 'N',
+        list: [
+          { label: "是", value: "Y" },
+          { label: "否", value: "N" }
+        ],
+      },
       {
         label: '绑定新票券地址:',
         ele: 'xd-select-pages-path',