jufubao-base 1.0.135 → 1.0.136

package/src/components/JfbBaseConList/JfbBaseConList.vue

@@ -16,92 +16,102 @@
       <view class="jfb-base-con-list__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-con-list__body" v-if="done" :style="{
-      backgroundImage: `url(${background})`,
-      backgroundSize: '100%',
-      backgroundRepeat: 'no-repeat',
-      minHeight: `${layoutInfo.bodyMinHeightRpx}rpx`,
-    }">
+    <view class="jfb-base-con-list__body">
       <view
-        v-if="couponList&&couponList.length > 0"
+        v-if="done"
+        :style="{
+          backgroundImage: `url(${background})`,
+          backgroundSize: '100%',
+          backgroundRepeat: 'no-repeat',
+          minHeight: `${layoutInfo.bodyMinHeightRpx}rpx`,
+         }"
       >
-        <view class="jfb-base-con-list__body-content">
-          <view class="jfb-base-con-list__body-content-header">
-            <view class="jfb-base-con-list__body-content-header-left">
-              <view :style="{ backgroundColor: '#FF4D4A' }"></view>
-              <view>赠送优惠券</view>
-            </view>
-            <view
-              :style="{ color: '#FA2125', backgroundColor: contentBackground }"
-              class="jfb-base-con-list__body-content-header-right"
-              @click="showRule = true"
-            >
-              <text>领券规则</text>
-              <xd-font-icon size="20" icon="iconxiangyou_xian"></xd-font-icon>
-            </view>
-          </view>
-          <view v-if="can_take === 'Y' && has_times === 'Y'" class="jfb-base-con-list__body-content-list">
-            <view v-for="(item, index) in couponList" :key="index">
+        <view v-if="couponList&&couponList.length > 0" >
+          <view class="jfb-base-con-list__body-content">
+            <view class="jfb-base-con-list__body-content-header">
+              <view class="jfb-base-con-list__body-content-header-left">
+                <view :style="{ backgroundColor: '#FF4D4A' }"></view>
+                <view>赠送优惠券</view>
+              </view>
               <view
-                class="jfb-base-con-list__body-content-list-item"
-                :class="'status_' + item.can_take_num"
-                :style="{
-                  backgroundColor: item.can_take_num==='Y'||item.can_take_num==='P'? contentBackground:'#F3F3F3',
-                }"
+                :style="{ color: '#FA2125', backgroundColor: contentBackground }"
+                class="jfb-base-con-list__body-content-header-right"
+                @click="showRule = true"
               >
-                <view class="item_head">
-                  <image class="t_icon" mode="widthFix" :src="item.headIcon"></image>
-                  <view>{{  item.prize_type }}</view>
-                </view>
-                <view class="item_sub">{{ item.prize_name }}</view>
-                <xd-font-icon
-                  size="100"
+                <text>领券规则</text>
+                <xd-font-icon size="20" icon="iconxiangyou_xian"></xd-font-icon>
+              </view>
+            </view>
+            <view v-if="can_take === 'Y' && has_times === 'Y'" class="jfb-base-con-list__body-content-list">
+              <view v-for="(item, index) in couponList" :key="index">
+                <view
+                  class="jfb-base-con-list__body-content-list-item"
+                  :class="'status_' + item.can_take_num"
                   :style="{
-                    color: item.iconColor,
-                    position: 'absolute',
-                    right: '0rpx',
-                    top: '0rpx',
+                    backgroundColor: item.can_take_num==='Y'||item.can_take_num==='P'? contentBackground:'#F3F3F3',
                   }"
-                  :icon="item.icon"
-                ></xd-font-icon>
-                <view class="btn_wrap">
-                  <xd-button
-                    size="small"
-                    :disabled="item.can_take_num !=='Y' && item.remain_card_count == 0"
-                    @click="getCoupont(item)"
-                    type="primary"
-                    style="width: 170rpx;height: 60rpx;"
-                    :style="item.btn"
-                    :color="item.infoColor"
-                  >{{ item.btn_txt }}</xd-button>
+                >
+                  <view class="item_head">
+                    <image class="t_icon" mode="widthFix" :src="item.headIcon" ></image>
+                    <view>{{  item.prize_type }}</view>
+                  </view>
+                  <view class="item_sub">{{ item.prize_name }}</view>
+                  <xd-font-icon
+                    size="100"
+                    :style="{
+                      color: item.iconColor,
+                      position: 'absolute',
+                      right: '0rpx',
+                      top: '0rpx',
+                    }"
+                    :icon="item.icon"
+                  ></xd-font-icon>
+                  <view class="btn_wrap">
+                    <xd-button
+                      size="small"
+                      :disabled="item.can_take_num !=='Y' && item.remain_card_count == 0"
+                      @click="getCoupont(item)"
+                      type="primary"
+                      style="width: 170rpx;height: 60rpx;"
+                      :style="item.btn"
+                      :color="item.infoColor"
+                    >{{ item.btn_txt }}</xd-button>
+                  </view>
                 </view>
               </view>
             </view>
+            <view v-else class="jfb-base-con-list__body-content-list" style="padding-bottom: 60rpx;">
+              <image mode="widthFix" :src="used_up_url"></image>
+            </view>
           </view>
-          <view v-else class="jfb-base-con-list__body-content-list" style="padding-bottom: 60rpx;">
-            <image mode="widthFix" :src="used_up_url"></image>
+          <view class="jfb-base-con-list__body-content-foot" @click="toCoupon" >
+            <view
+              :style="{
+              padding:outPadding,
+              border:border,
+              borderRadius:radius + 'rpx',
+              color: btnTextColor,
+              backgroundColor: btnBgColor,
+              boxShadow:shadow
+            }">查看已领票券</view>
           </view>
         </view>
-        <view class="jfb-base-con-list__body-content-foot"
-          @click="toCoupon"
-          >查看已领票券</view
+        <view
+          v-else
+          class="empty_data"
         >
+          <image :src="emptyBg"></image>
+          {{ message }}
+        </view>
+        <xd-dailog
+          :cancel="false"
+          :confirm="false"
+          title="活动规则说明"
+          :show.sync="showRule"
+        >
+          <xd-content-xss style="text-align:left" :html="notice"></xd-content-xss>
+        </xd-dailog>
       </view>
-      <view
-        v-else
-        class="empty_data"
-      >
-        <image :src="emptyBg"></image>
-        {{ message }}
-      </view>
-      <xd-dailog
-        :cancel="false"
-        :confirm="false"
-        title="活动规则说明"
-        :show.sync="showRule"
-      >
-        <xd-content-xss style="text-align:left" :html="notice"></xd-content-xss>
-      </xd-dailog>
     </view>
   </view>
 </template>
@@ -154,8 +164,21 @@ export default {
       message: "",
       options: {},
       next_url: "",
-
       collectedPath: "",
+
+      //按钮设置
+      btnBgColor:'',
+      btnTextColor:'',
+      padding:{},
+      radius: 0,
+      //边框
+      is_border:'N',
+      is_border_c:'',
+      is_border_w:'',
+      //投影
+      is_shadow: 'Y',
+      is_shadow_bg: 0,
+      is_shadow_w: 0,
     };
   },
   computed: {
@@ -163,6 +186,21 @@ export default {
     emptyBg() {
       return this.getNoData();
     },
+    outPadding() {
+      let str = `${this.checkValue(this.padding.top, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.padding.right, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.padding.bottom, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.padding.left, 0)}rpx`;
+      return str
+    },
+    border() {
+      if (this.is_border === 'Y') return `${this.is_border_w}rpx solid ${this.is_border_c}`;
+      else return '0';
+    },
+    shadow(){
+      if(this.is_shadow === 'Y') return  `0 0 ${this.is_shadow_w}rpx ${this.is_shadow_bg}`;
+      else return '0 0 0 rgba(0,0,0,0)';
+    },
   },
   watch: {
     container(value) {
@@ -182,7 +220,21 @@ export default {
       this.contentBackground = '#FFF8F8';
       this.iconColor = '#FF4D4A';
       this.collectedPath = getContainerPropsValue(value, "content.collectedPath", {value: ''}).value;
+
+      this.padding = getContainerPropsValue(value, "content.padding", {});
+      this.btnBgColor = getContainerPropsValue(value, "content.btnBgColor", 'rgba(0,0,0,0)');
+      this.btnTextColor = getContainerPropsValue(value, "content.btnTextColor", '#666');
+      this.radius = getContainerPropsValue(value, "content.radius", '0');
+
+      this.is_border = getContainerPropsValue(value, "content.is_border", 'N');
+      this.is_border_c = getContainerPropsValue(value, "content.is_border_c", '#e5e5e5');
+      this.is_border_w = getContainerPropsValue(value, "content.is_border_w", 1);
+
+      this.is_shadow = getContainerPropsValue(value, 'content.is_shadow', 'N');
+      this.is_shadow_bg = getContainerPropsValue(value, 'content.is_shadow_bg', '#fff');
+      this.is_shadow_w = getContainerPropsValue(value, 'content.is_shadow_w', '10');
     },
+
     getList() {
       jfbRootExec("getCouponList", {
         vm: this,
@@ -199,7 +251,7 @@ export default {
           this.can_take = res.can_take;
           this.has_times = res.has_times;
           this.next_url = res.next_url;
-          
+
           this.couponList =
             res.list &&
             res.list.length > 0 &&
@@ -267,11 +319,13 @@ export default {
           console.log(err, "err");
         });
     },
+
     toCoupon(){
       this.$xdUniHelper.navigateTo({
         url: this.next_url || this.collectedPath,
       });
     },
+
     getCoupont(item) {
       if(item.can_take_num === "Y") {
         this.toCoupon();
@@ -309,6 +363,7 @@ export default {
           console.log(err, "err");
         });
     },
+
     getResult() {
       jfbRootExec("getCouponResult", {
         vm: this,
@@ -368,25 +423,7 @@ export default {
           console.log(err, "err");
         });
     },
-    // getContent() {
-    //   jfbRootExec("getListBaseNewsContentCoupon", {
-    //     vm: this,
-    //     data: {
-    //       page_id: this.pageAttr["page_id"], //页面ID
-    //       container_id: this.containerId, //组件ID
-    //       limit: 1,
-    //     },
-    //   })
-    //     .then((res) => {
-    //       console.log(res, "ajajajajaj");
-    //       if (res.list&&res.list.length > 0) {
-    //         this.notice = res.list[0].content;
-    //       }
-    //     })
-    //     .catch((error) => {
-    //       console.error(error);
-    //     });
-    // },
+
     onJfbLoad(options) {
       console.log(this.pageBusinessCode, "pageNamespace");
       this.options = options;
@@ -428,11 +465,14 @@ export default {
 
 .jfb-base-con-list {
   &__body {
-    position: relative;
-    overflow-y: auto;
-    padding-top: 220rpx;
-    box-sizing: border-box;
-    background-color: #FAFAFA;
+    & > view {
+      position: relative;
+      overflow-y: auto;
+      padding-top: 220rpx;
+      box-sizing: border-box;
+      background-color: #FAFAFA;
+    }
+
     .empty_data {
       text-align: center;
       color: #999999;
@@ -446,6 +486,7 @@ export default {
         height: unit(400, rpx);
       }
     }
+
     &-content {
       border-radius: unit(20, rpx);
       background: #fff;
@@ -503,16 +544,18 @@ export default {
             right: 30rpx;
             bottom: 40rpx;
           }
-        
+
           .item_head{
             display: flex;
             align-items: center;
             font-size: 40rpx;
             color: #000000;
             font-weight: 500;
+
             .t_icon{
               width: 44rpx;
               margin-right: 20rpx;
+              max-height: 80rpx;
             }
           }
           .item_sub{
@@ -521,44 +564,18 @@ export default {
             font-size: 36rpx;
             font-weight: 400;
           }
-          // &-left {
-          //   display: flex;
-          //   &-info {
-          //     padding: unit(20, rpx) unit(36, rpx);
-          //     & > view:first-child {
-          //       font-size: unit(44, rpx);
-          //       font-weight: 500;
-          //       margin-bottom: unit(36, rpx);
-          //     }
-          //     & > view:nth-child(2) {
-          //       font-size: unit(28, rpx);
-          //       color: #fff;
-          //     }
-          //   }
-          // }
-          // &-right {
-          //   margin-left: unit(24, rpx);
-          //   flex: 1;
-          //   &-name {
-          //     font-size: unit(40, rpx);
-          //     color: #000;
-          //     display: flex;
-          //     align-items: center;
-          //     justify-content: space-between;
-          //   }
-          //   &-num {
-          //     margin-top: unit(40, rpx);
-          //     display: flex;
-          //     justify-content: space-between;
-          //   }
-          // }
+
         }
       }
       &-foot {
-        color: #a6a6a6;
-        font-size: unit(24, rpx);
-        text-align: center;
         margin: unit(40, rpx) 0;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        flex-flow: column;
+        & > view {
+          flex-shrink: 0;
+        }
       }
     }
   }

package/src/components/JfbBaseConList/JfbBaseConListLess.less

@@ -13,9 +13,7 @@
 
 //start
 .jfb-base-con-list {
-  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(50, rpx);
 
   &__body{
       position: relative;
@@ -23,21 +21,22 @@
       z-index: 2
   }
 
-  &.editx {
+  &.editx,&.editx:hover {
     position: relative;
-    border: 1px dashed blue;
-    box-sizing: border-box;
-    z-index: 3
-
-  }
-
-  &:hover {
-    border: 1px dashed blue;
-  }
+    min-height: unit(100, rpx);
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
 
-  &.noBorder {
-    border-color: rgba(0,0,0,0);
-    border-width: 0;
   }
 
 
@@ -72,9 +71,9 @@
 
 /**notPreview**/
 .jfb-base-con-list {
-  &:before {
-    content: " ";
-    display: table;
-  }
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
 }
 /**endNotPreview**/

package/src/components/JfbBaseConPhone/JfbBaseConPhoneLess.less

@@ -13,9 +13,7 @@
 
 //start
 .jfb-base-con-phone {
-  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(50, rpx);
 
   &__body{
       position: relative;
@@ -23,21 +21,22 @@
       z-index: 2
   }
 
-  &.editx {
+  &.editx,&.editx:hover {
     position: relative;
-    border: 1px dashed blue;
-    box-sizing: border-box;
-    z-index: 3
-
-  }
-
-  &:hover {
-    border: 1px dashed blue;
-  }
+    min-height: unit(100, rpx);
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
 
-  &.noBorder {
-    border-color: rgba(0,0,0,0);
-    border-width: 0;
   }
 
 
@@ -72,9 +71,9 @@
 
 /**notPreview**/
 .jfb-base-con-phone {
-  &:before {
-    content: " ";
-    display: table;
-  }
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
 }
 /**endNotPreview**/

package/src/components/JfbBaseEntry/Attr.js

@@ -8,25 +8,11 @@ export default {
   content: (data) => {
     return [
       {
-        label: '背景颜色:', //label
-        ele: 'xd-color', //package 名称
-        valueKey: 'bgcolor', //form[valueKey]
-        value: data.bgcolor || '', //v-model
-        placeholder: '请输入占位框背景颜色',
-        classNmae: 'input80', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
-        rules: [
-          {
-            required: true,
-            message: '请输入占位框背景颜色',
-            trigger: 'blur'
-          },
-        ]
-      },
-      {
-        label: '每行显示数量', //label
-        ele: 'xd-radio', //package 名称
-        valueKey: 'rowNum', //form[valueKey]
-        value: data.rowNum || 1, //v-model
+        label: '每行显示数量',
+        ele: 'xd-radio',
+        valueKey: 'rowNum',
+        groupKey: 'content',
+        value: data.rowNum || 1,
         rules: [
           {required: true, message: '请选择', trigger: ['blur', 'change']}
         ],
@@ -36,14 +22,40 @@ export default {
           {"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",
-        value: data.paddingInput || '20',
+        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> 像素',
+      },
     ].filter(i=>i)
   },
   advanced: [