jufubao-base 1.0.233-beta1 → 1.0.233-beta2

package/package.json

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

package/src/components/JfbBaseCardGive/Attr.js

@@ -68,10 +68,10 @@ export default {
         defaultValue: data.shareDownloadImage || null, //默认图片对象
         groupKey: "style",
         slot: true, //按钮是否使用slot
-        oneWidth: 200, //单个图片显示宽度
-        oneHeight: 200, //单个图片显示高度
+        oneWidth: 218, //单个图片显示宽度
+        oneHeight: 323, //单个图片显示高度
         elinputClassName: 'input40',
-        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.',
+        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.建议尺寸：654*968px.',
         type: ['jpg', 'png', 'jpeg'],
         styleType: 'one', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传
         uploadType: 'aliyun', //''=>API服务上传  qiniu=>七牛云OSS上传  aliyun=> 阿里云OSS上传

package/src/components/JfbBaseCardGive/JfbBaseCardGive.vue

@@ -153,9 +153,10 @@
       <view class="share_card_dialog" v-show="showShareCard">
         <view class="share_modal" @click="showShareCard=false"></view>
         <view class="share_content">
-          <canvas canvas-id="shareCanvas" id="shareCanvas" style="width: 654rpx; height: 968rpx;" ></canvas>
+          <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>
@@ -197,6 +198,7 @@ export default {
       showShareDialog: true,
       imageCache: {},
       showShareCard: false,
+      canvasUrl: "",
     };
   },
   computed: {
@@ -224,19 +226,30 @@ export default {
     async onJfbLoad(options) {
       this.card_number = options.card_number;
       await this.getDetail();
-      console.log("rpxNum", this.$rpxNum)
-      setTimeout(()=>{
-        this.toSetShareImg('123123123123123');
-      },1000)
+
+      
     },
-    async toSetShareImg(url){
+    async 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();
+      // }
+      let url = `123`;
       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=${123123123123123}`
+      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();
     },
@@ -273,6 +286,9 @@ export default {
                 return this.info.business_codes.includes(item.business_code);
               });
           }
+          setTimeout(() => {
+            this.toSetShareImg()
+          }, 300);
         })
         .catch((err) => {
           this.$xdHideLoading({});
@@ -362,8 +378,21 @@ 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.toSetShareImg(share)
       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({
@@ -392,6 +421,10 @@ export default {
   &__body {
     padding: 28rpx;
     color: #333;
+    .renderCanvas{
+      position: fixed;
+      bottom: -999999px;
+    }
     .share_card_dialog{
       .share_modal{
         width: 100vh;
@@ -408,6 +441,11 @@ export default {
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
+        .share_img{
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
       }
     }
     .qrcode_card {

package/src/components/JfbBasePosterType/Attr.js

@@ -37,6 +37,8 @@ export default {
     //图片高度= 上下内边距 + 单个内容高度*行数 + 指示器高度
     //图片宽度= 750 - 左右外边距
     let outWidth = 750;
+    if(!params.margin) params.margin = {};
+    if(!params.contentPadding) params.contentPadding = {};
     let marginLeft = params.margin.left || 0;
     let marginRight = params.margin.right || 0;
     let paddingLeft = params.contentPadding.left || 0;

package/src/components/JfbBasePosterType/JfbBasePosterType.vue

@@ -82,6 +82,7 @@
         contentPadding:{},
         bgColor:'rgba(0,0,0,0)',
         bgRadius: 0,
+        bgImage: "",
       }
     },
 		computed: {
@@ -192,6 +193,7 @@
           margin: this.getMarginAndPadding(this.margin, 0),
           padding:this.getMarginAndPadding(this.contentPadding, 0),
           backgroundColor: this.bgColor,
+          backgroundImage: this.bgImage ? `url(${getServiceUrl(this.bgImage)})` : '',
           borderRadius: this.bgRadius + 'rpx'
         }
       }
@@ -273,6 +275,7 @@
 
         //样式设置
         this.bgColor = getContainerPropsValue(container, 'content.bgColor','rgba(0,0,0,0)');
+        this.bgImage = getServiceUrl(getContainerPropsValue(container, 'content.bgImage', {url: ""}).url)
         this.bgRadius = getContainerPropsValue(container, 'content.bgRadius', '0');
         this.contentPadding = getContainerPropsValue(container, 'content.contentPadding', {});
         this.margin = getContainerPropsValue(container, 'content.margin', {});
@@ -327,6 +330,7 @@
         justify-content: center;
         align-items: center;
         display: flex;
+        background-size: cover;
       }
 
     }