jufubao-base 1.0.311-beta1 → 1.0.311-beta101

package/src/components/JfbBaseCardDetailEntry/JfbBaseCardDetailEntry.vue

@@ -108,49 +108,6 @@
         </view>
       </view>
     </view>
-  <xd-down-drawer
-    :show.sync="showDialog"
-    height="50vh"
-  >
-    <template>
-      <view class="top_title">请务必先关联，否则影响此卡使用</view>
-      <view class="method_item">
-        <view class="method_item_top">
-          <view class="method_title">方法一</view>
-          <view>复制文本，打开支付宝APP</view>
-        </view>
-        <view class="method_item_bottom">
-          <view class="method_item_bottom_left">吱口令：{{share_code}}</view>
-          <view class="method_item_bottom_right" @click="copy(share_code)">复制吱口令</view>
-        </view>
-      </view>
-      <view class="method_item">
-        <view class="method_item_top">
-          <view class="method_title">方法二</view>
-          <view>复制链接，在默认浏览器打开</view>
-        </view>
-        <view class="method_item_bottom">
-          <view class="method_item_bottom_left">{{sign_url}}</view>
-          <view class="method_item_bottom_right" @click="copy(sign_url)">复制链接</view>
-        </view>
-      </view>
-      <view class="method_item">
-        <view class="method_item_top">
-          <view class="method_title">方法三</view>
-          <view>保存图片，使用支付宝APP扫码</view>
-        </view>
-        <view class="method_item_bottom code_img">
-          <view>打开支付宝APP，点击扫一扫直接扫码或点击相册中保存图片</view>
-          <view class="code_box">
-            <view class="qr_code">
-              <image mode="aspectFit" :src="sign_url_qrcode"></image>
-            </view>
-            <view>长按保存二维码</view>
-          </view>
-        </view>
-      </view>
-    </template>
-  </xd-down-drawer>
   </view>
 </template>
 
@@ -169,7 +126,6 @@ import XdPwPay from "./XdPwPay";
 import XdEditPwd from "./XdEditPwd";
 import XdUnit from "@/components/XdUnit/XdUnit";
 import XdButton from '@/components/XdButton/XdButton'
-import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer"
 import {parsePath} from "@/utils/linkUrl";
 export default {
   name: "JfbBaseCardDetailEntry",
@@ -178,8 +134,7 @@ export default {
     XdPwPay,
     XdEditPwd,
     XdUnit,
-    XdButton,
-    XdDownDrawer,
+    XdButton
   },
   mixins: [
     componentsMixins,extsMixins,JfbBaseCardDetailEntryMixin,colorCardMixins,
@@ -221,13 +176,7 @@ export default {
       isBrandLogo: false,
       isShowUnbind: false, //是否启动绑定按钮
       headerBg: {},
-      give_url: "",
-      collect_phone_url: "",//收集手机号地址
-      showDialog:false,
-      sign_url:'',
-      share_code:'',
-      sign_url_qrcode:'',
-      toCollectPhoneUrl:'',
+      give_url: ""
     };
   },
   watch: {
@@ -244,15 +193,6 @@ export default {
     },
   },
   created() {
-    // ifDef小程序拼接问题
-    let url = this.$xdUniHelper.parseURL();
-    // #ifdef MP-WEIXIN
-    this.toCollectPhoneUrl = url.relative
-    // #endif
-    // #ifdef H5
-    this.toCollectPhoneUrl = '@site_domain@'+''+url.relative
-    // #endif
-    console.log(this.toCollectPhoneUrl,encodeURIComponent(this.toCollectPhoneUrl),'this.toCollectPhoneUrl')
     this.init(this.container)
   },
   methods: {
@@ -288,8 +228,6 @@ export default {
       this.backUrl = getContainerPropsValue(container,  "content.back_url", { value: "" }).value;
       this.shift_url = getContainerPropsValue(container,  "content.shift_url", { value: "" }).value;
       this.give_url = getContainerPropsValue(container,  "content.give_url", { value: "" }).value;
-      this.collect_phone_url = getContainerPropsValue(container,  "content.collect_phone_url", { value: "" }).value;
-      console.log(this.collect_phone_url,'collect_phone_url')
       //'wechat_mini_program|default'
       this.entryGroupId = getContainerPropsValue(container,"content.entryGroupId","default");
     },
@@ -341,19 +279,6 @@ export default {
           this.show = false;
           console.log(this.getCardThemes(res.card_type_name),'this.getCardThemes(res.card_type_name)');
           this.headerBg = this.getCardThemes(res.card_type_name);
-          //支付宝弹框
-          if(res.enterprise_info&&res.enterprise_info.is_need_activate==='Y'){
-            this.share_code = res.enterprise_info.share_code;
-            this.sign_url = res.enterprise_info.sign_url;
-            this.sign_url_qrcode = res.enterprise_info.sign_url_qrcode;
-            if(res.enterprise_info.is_need_collect_phone_number==='Y'){
-              let url = `${this.collect_phone_url}?callback_url=${encodeURIComponent(this.toCollectPhoneUrl)}`
-              this.$xdUniHelper.navigateTo({
-                url:url,
-              });
-            }
-            this.showDialog = true;
-          }
         })
         .catch((err) => {
           // this.$refs["pwPay"].clearPwd();
@@ -633,26 +558,6 @@ export default {
         clearTimeout(this.refrushTimeer);
       }
     },
-    /**
-     *@description 复制功能
-     * @param  text
-     */
-    copy(text) {
-      // #ifdef H5
-      this.$copyText(text).then((res) => {
-        this.$xdAlert({ content: "复制成功" });
-      });
-      // #endif
-      // #ifndef H5
-      uni.setClipboardData({
-        data: text,
-        showToast: false,
-        success: () => {
-          //this.$xdAlert({ content: "复制成功" });
-        },
-      });
-      // #endif
-    },
   },
 };
 </script>
@@ -1103,71 +1008,5 @@ export default {
 
     }
   }
-  .method_item{
-    padding: unit(32, rpx);
-    border-bottom: 1px solid #F8F8F8;
-    color: #333333;
-    font-size: unit(28,rpx);
-    &_top{
-      display: flex;
-      align-items: center;
-    }
-    &_bottom{
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      margin-top: unit(16, rpx);
-      height: unit(32,rpx);
-      line-height: unit(32,rpx);
-      font-size: unit(24,rpx);
-      color: #666666;
-      &_right{
-        min-width: unit(180,rpx);
-        text-align: right;
-        color: #FF8D1A;
-      }
-      &_left{
-        color: #666666;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-    .code_img{
-      height: auto!important;
-    }
-
-  }
-  .method_title{
-    color: #fff;
-    background-color: #FF8D1A;
-    width: unit(120,rpx);
-    height: unit(50,rpx);
-    line-height: unit(50,rpx);
-    border-radius: unit(25,rpx);
-    text-align: center;
-    margin-right: unit(20,rpx);
-    font-size: unit(24,rpx);
-  }
-  .top_title{
-    height: unit(100,rpx);
-    text-align: center;
-    line-height:unit(100,rpx);
-    color:#333333;
-    font-size:unit(32,rpx);
-    border-bottom: 1px solid #F8F8F8;
-  }
-  .code_box{
-    text-align: center;
-    .qr_code{
-      width: unit(168,rpx);
-      height: unit(168,rpx);
-      image{
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-  
 }
 </style>

package/src/components/JfbBaseEntry/Attr.js

@@ -1,83 +1,16 @@
 'use strict';
+import content from "./cusAttr/content";
+import style from "./cusAttr/style";
 
 /**
  * @description 当表单组件中有联动操作时候，使用方法进行返回
  */
 export default {
   style: [],
-  content: (data) => {
+  content: (data, gValue, gColor, oldData={}) => {
     return [
-      {
-        label: '选择综合入口类型:',
-        ele: 'xd-site-select-list',
-        valueKey: 'entryType',
-        value: data['entryType'],
-        placeholder: '请选择综合入口类型',
-        multiple: false,
-        groupKey:'content',
-        className: 'input50',
-        rules: [
-          {required: true, message: '请选择综合入口类型', trigger: ['blur', 'change']}
-        ],
-        handleCustom({action, data}) {
-          XdBus.getParentApi('getEntryGroupOption')({key: Date.now()})
-            .then(res => {
-              data.cb(res.list)
-            })
-            .catch(error => {
-              console.error(error);
-            });
-        },
-      },
-      {
-        label: '每行显示数量',
-        ele: 'xd-radio',
-        valueKey: 'rowNum',
-        groupKey: 'content',
-        value: data.rowNum || 1,
-        rules: [
-          {required: true, message: '请选择', trigger: ['blur', 'change']}
-        ],
-        list: [
-          {"label": "一行一列", "value": 1},
-          {"label": "一行二列", "value": 2},
-          {"label": "一行三列", "value": 3},
-        ]
-      },
-      {
-        label: '背景颜色:',
-        ele: 'xd-color',
-        valueKey: 'bgcolor',
-        value: data.bgcolor || '',
-        groupKey: 'style',
-        placeholder: '请输入背景颜色',
-        classNmae: 'input80',
-      },
-      {
-        label: '间隔边距',
-        ele: 'el-input',
-        type: 'number',
-        valueKey: "paddingInput",
-        groupKey: 'style',
-        value: data.paddingInput || '',
-        placeholder: '请输入间隔边距',
-        inline: false,
-        className:'input60',
-        notice: '设置间隔边距，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
-      },
-      {
-        label: '边距设置:',
-        ele: 'xd-margin-padding',
-        valueKey: 'margin',
-        groupKey:'style',
-        value: data.margin || null,
-        setting: {
-          type: 'margin',
-        },
-        placeholder: '请设置边距设置',
-        inline: false,
-        notice: '设置边距设置，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">0</span> 像素',
-      },
+      ...content(data, gValue, gColor, oldData),
+      ...style(data, gValue, gColor, oldData),
     ].filter(i=>i)
   },
   advanced: [

package/src/components/JfbBaseEntry/JfbBaseEntry.vue

@@ -13,30 +13,40 @@
       <view class="jfb-base-entry__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-entry__body" :style="bodyStyle">
-      <view :style="{ margin:marginUi}">
-        <view v-if="loadingList" class="entry_list skeleton-wrap" :style="entryStyle">
-          <view v-for="i in 5" :key="i"
+    <view class="jfb-base-entry__body">
+      <view class="x-line"></view>
+      <view :style="[contStyleComp]">
+        <view
+          v-if="entryList === null"
+          class="entry_list skeleton-wrap"
+          :class="{rowNum1: rowNum ===1,rowNum2: rowNum ===2,rowNum3: rowNum ===3}"
+        >
+          <view
+            v-for="i in 5"
+            :key="i"
             :class="'row_num_'+rowNum"
             class="entry_item"
+            :style="[entryItemSkeStyleComp]"
           >
-            <image v-if="rowNum == 1" style="height: 260rpx;"/>
-            <image v-if="rowNum == 2" style="height: 200rpx;"/>
-            <image v-if="rowNum == 3" style="height: 150rpx;"/>
           </view>
         </view>
-        <view v-else class="entry_list" :style="entryStyle">
+        <view
+          v-else
+          class="entry_list"
+          :class="{rowNum1: rowNum ===1,rowNum2: rowNum ===2,rowNum3: rowNum ===3}"
+        >
           <view
+            :style="[entryItemStyleComp]"
             v-if="entryList.length > 0"
             v-for="(item,i) in entryList"
             :key="i"
             class="entry_item"
-            :class="'row_num_'+rowNum"
+            :class="'row_num_'+ rowNum"
             @click="toLink(item)"
           >
-            <image v-if="rowNum == 1" :src="item.image_url" mode="widthFix"/>
-            <image v-if="rowNum == 2" :src="item.image_url2" mode="widthFix"/>
-            <image v-if="rowNum == 3" :src="item.image_url3" mode="widthFix"/>
+            <image v-if="rowNum === 1" :src="item.image_url" mode="widthFix"/>
+            <image v-if="rowNum === 2" :src="item.image_url2" mode="widthFix"/>
+            <image v-if="rowNum === 3" :src="item.image_url3" mode="widthFix"/>
           </view>
           <xd-no-data
             icon-type="empty"
@@ -53,7 +63,7 @@
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseEntryMixin from "./JfbBaseEntryMixin";
-  import { getContainerPropsValue } from "@/utils/xd.base";
+  import { gCPVal } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
   import getServiceUrl from "@/common/getServiceUrl";
@@ -70,61 +80,147 @@
     ],
     data() {
       return {
-        entryList: [],
-        bgcolor: "",
-        rowNum: 1,
-        paddingInput: 20,
-        loadingList: true,
-        margin: {},
+        closeMask: true,
+        entryList: null,
+        height: 0,
+        width: 0,
+
+        //content
+        rowNum: 1, //列数
         entryType: '',
+
+        //style
+        radius:0,
+        bgcolor: "", //背景色
+        bgImage:{}, //背景图
+        paddingInput: 20, //间距
+        margin: {}, //边距
+        contRadius:0,//圆角
+        padding:{},//填充
       }
     },
     computed: {
       ...mapState(['brandInfo']),
-      bodyStyle(){
-        return this.styleObjectToString({
+      contStyleComp(){
+        let marginTB = this.getPMValue(this.margin, 'TB', 0);
+        let paddingTB = this.getPMValue(this.padding, 'TB', 0);
+        let bodyMinHeight = this.layoutInfo.bodyMinHeightRpx - (marginTB + paddingTB)
+        let url = {};
+        if(this.bgImage && this.bgImage.url) {
+          url = {
+            backgroundImage: `url(${getServiceUrl(this.bgImage.url)})`,
+            backgroundSize: '100%',
+            backgroundRepeat: 'repeat-y',
+            backgroundPosition: 'top center'
+          }
+        }
+        return {
           backgroundColor: this.bgcolor,
-          minHeight: this.layoutInfo.bodyMinHeight,
-        })
+          minHeight: bodyMinHeight + 'rpx',
+          margin: this.getMarginAndPadding(this.margin, 0),
+          padding: this.getMarginAndPadding(this.padding, 0),
+          borderRadius: this.radius + 'rpx',
+          ...url
+        }
       },
-      entryStyle(){
-        return this.styleObjectToString({
-          gridTemplateColumns: `repeat(${this.rowNum}, 1fr)`,
-          gap: this.paddingInput + 'rpx',
-          padding: this.paddingInput + 'rpx'
-        })
+      getWidthComp(){
+        let marginRL = this.getPMValue(this.margin, 'RL', 0);
+        let paddingRL = this.getPMValue(this.padding, 'RL', 0);
+        return (750 - (Number(this.paddingInput)*(this.rowNum-1) + marginRL + paddingRL)) / this.rowNum
+      },
+      getMarginRight(){
+        let marginRight = 0;
+        if([2,3].includes(this.rowNum)) marginRight = this.paddingInput + 'rpx';
+        return marginRight
       },
-      marginUi(){
-        let str = `${this.checkValue(this.margin.top, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.right, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.bottom, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.left, 0)}rpx`;
-        return str
+      entryItemSkeStyleComp(){
+        let width = this.getWidthComp
+        let height = '260rpx';
+        if([2,3].includes(this.rowNum)) height = '300rpx';
+        return {
+          borderRadius: this.contRadius + 'rpx',
+          marginTop: this.paddingInput + 'rpx',
+          marginRight: this.getMarginRight,
+          height,
+          width: width + 'rpx'
+        }
+      },
+      entryItemStyleComp(){
+        let width = this.getWidthComp
+        return {
+          borderRadius: this.contRadius + 'rpx',
+          marginTop: this.paddingInput + 'rpx',
+          width: width + 'rpx',
+          marginRight: this.getMarginRight,
+          height: width * this.height/this.width  + 'rpx',
+          overflow: 'hidden'
+        }
       }
     },
     watch: {
       container(value,oldValue) {
         if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
-        if (this.$configProject['isPreview']) this.init(value)
+        if (this.$configProject['isPreview']) {
+          this.init(value);
+          this.onJfbLoad()
+        }
       },
     },
     created() {
       this.init(this.container);
     },
     methods: {
-      onJfbLoad(options) {
+      onJfbLoad() {
         this.getEntrySetting();
       },
+
+      getImageInfo(entryList){
+        return new Promise((resolve,reject)=>{
+          let heightAll = 0,widthAll = 0, counter = 0, allCouter = 0;
+          let len = entryList.length;
+          entryList.map(item=>{
+            let imgUrl = item['image_url'];
+            if(this.rowNum === 2) imgUrl = item['image_url2'];
+            if(this.rowNum === 3) imgUrl = item['image_url3'];
+            uni.getImageInfo({
+              src:imgUrl,
+              success:({width,height})=>{
+                heightAll += height;
+                widthAll += width;
+                allCouter++;
+                counter++;
+                if(len === allCouter){
+                  resolve({height:heightAll/counter, width: widthAll/counter})
+                }
+              },fail:()=>{
+                allCouter++;
+                if(len === allCouter){
+                  resolve({height:heightAll/counter, width: widthAll/counter})
+                }
+              }
+            })
+          })
+        })
+      },
+
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
-        this.rowNum = getContainerPropsValue(container, 'content.rowNum', 1);
-        this.paddingInput = getContainerPropsValue(container, 'content.paddingInput', 20);
-        this.margin = getContainerPropsValue(container, 'content.margin', {});
-        this.entryType = getContainerPropsValue(container, 'content.entryType', 'default');
+
+        //content
+        this.rowNum = gCPVal(container, 'rowNum', 1);
+        this.entryType = gCPVal(container, 'entryType', 'default');
+
+        //style
+        this.bgcolor = gCPVal(container, 'bgcolor', 'rgba(0,0,0,0)',{sKey:'bgStatus',fields:['bgcolor','bgImage']});
+        this.bgImage = gCPVal(container, 'bgImage', {},{sKey:'bgStatus',fields:['bgcolor','bgImage']});
+        this.paddingInput = gCPVal(container, 'paddingInput', [16,20], {sKey:'paddingInputStatus',fields:['paddingInput'] });
+        this.margin = gCPVal(container, 'margin', 0, {sKey: 'marginStatus',fields:['margin'], isPMR: true});
+        this.padding = gCPVal(container, 'padding', 0, {sKey: 'paddingStatus',fields:['padding'], isPMR: true});
+        this.contRadius = gCPVal(container, 'contRadius', [this.gStyleValue.radius,0],{sKey: 'contRadiusStatus', fields: ['contRadius']})||0;
+        this.radius = gCPVal(container, 'radius', [this.gStyleValue.radius,0],{sKey: 'radiusStatus', fields: ['radius']})||0;
       },
 
       getCardPath(custom_redirect_data = {}){
@@ -152,6 +248,7 @@
         else return null;
         //#endif
       },
+
       getEntrySetting(){
         this.$xdShowLoading({});
         jfbRootExec("getEntrySetting", {
@@ -159,8 +256,7 @@
           data: {
             group_id:this.entryType || 'default'
           }
-        }).then(res => {
-          this.loadingList = false;
+        }).then(async (res) => {
           this.$xdHideLoading();
           let isH5FilterEntryList = [];
           let isMpFilterEntryList = [];
@@ -226,6 +322,11 @@
               return item;
             });
 
+          //获取平均高度
+          let {width, height} = await this.getImageInfo(entryList);
+          this.width = width;
+          this.height = height;
+
           //#ifdef MP-WEIXIN
           console.warn(`微信小程序端被过滤的入口列表：${JSON.stringify(isMpFilterEntryList.map(item=> `${item.redirect_data.appType}:${item.entry_name}:${item.redirect_data['frontPath']}`),null,2)}`)
           //#endif
@@ -239,15 +340,18 @@
             this.toLink(entryList[0]);
             return
           }
+
           //无数据提示
           if(res.list.length === 0) {
             this.$xdAlert({content: '当前票券暂无支持服务'})
             return;
           }
+
           //复制
-          this.entryList = entryList;
+          this.entryList = entryList || [];
         })
       },
+
       toLink(item){
         let path = "";
         try{
@@ -271,11 +375,43 @@
 
 <style scoped lang="less">
   @import "./JfbBaseEntryLess.less";
-
+//:class="{rowNum1: rowNum ===1,rowNum2: rowNum ===2,rowNum3: rowNum ===3}"
   .jfb-base-entry {
     &__body{
       .entry_list{
-        display: grid;
+        &.rowNum1 {
+          & >view:first-child {
+            margin-top: 0!important;
+          }
+        }
+        &.rowNum2,&.rowNum3 {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-flow: wrap;
+        }
+
+        &.rowNum2 {
+          & > view:nth-child(1),& > view:nth-child(2) {
+            margin-top: 0!important;
+          }
+        }
+
+        &.rowNum2 > view:nth-child(2n) {
+          margin-right: 0!important;
+        }
+
+        &.rowNum3 > view:nth-child(3n) {
+          margin-right: 0!important;
+        }
+        &.rowNum3 {
+          & > view:nth-child(1),
+          & > view:nth-child(2),
+          & > view:nth-child(3) {
+            margin-top: 0!important;
+          }
+        }
+
         &.skeleton-wrap{
           .entry_item{
             .skeleton-item(100%, auto);