jufubao-movie 1.0.29 → 1.0.30-beta2

package/src/components/JfbMovieCodeChoose/Attr.js

@@ -9,13 +9,13 @@ export default {
         ele: 'xd-margin-padding',
         valueKey: 'margin',
         value: data['margin'] || null,
-        disabled: false,
+        groupKey:'style',
         setting: {
           type: 'margin',
         },
         placeholder: '请设置外边距',
         inline: false,
-        notice: '设置外边距，<span style="color: red">单位：像素</span>。默认值：0像素',
+        notice: '设置外边距，单位：<span style="color: red">像素</span>。默认值：<span style="color: red">20</span>像素',
       },
       {
         label: '间距:',
@@ -25,11 +25,16 @@ export default {
         value: data.padding || '',
         placeholder: '请输入间距',
         className: 'input80',
+        groupKey:'style',
+        inline: false,
+        notice: '设置列表之间间距，单位：<span style="color: red">像素</span>。默认值：<span style="color: red">20</span>像素',
       },
+
       {
         ele: 'title',
         label: '门店详情配置',
-        size: 'small', //default/mini/small
+        size: 'small',
+        groupKey:'style',
       },
       {
         label: '背景颜色:',
@@ -38,11 +43,35 @@ export default {
         value: data['backgroundColor'] || null,
         placeholder: '请选择背景颜色',
         classNmae: 'input80',
+        groupKey:'style',
       },
       {
-        ele: 'title',
-        label: '投影设置',
-        size: 'small', //default/mini/small
+        label: '文字颜色:',
+        ele: 'xd-color',
+        valueKey: 'textColor',
+        value: data['textColor'] || null,
+        placeholder: '请选择背景颜色',
+        classNmae: 'input80',
+        groupKey:'style',
+      },
+      {
+        label: '内容圆角设置:',
+        ele: 'xd-site-select-list',
+        valueKey: 'radius',
+        value: data['radius'] || '',
+        placeholder: '请选择内容圆角设置',
+        multiple: false,
+        className: 'input80',
+        groupKey:'style',
+        handleCustom({action, data}) {
+          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+            });
+        },
       },
       {
         label: '是否有投影:',
@@ -52,6 +81,7 @@ export default {
         placeholder: '请选择是否投影',
         multiple: false,
         className: 'input80',
+        groupKey:'style',
         list: [
           {label: '是', value: 'Y'},
           {label: '否', value: 'N'},
@@ -64,6 +94,7 @@ export default {
         value: data['is_shadow_bg'] || '',
         placeholder: '请选择投影颜色',
         classNmae: 'input80',
+        groupKey:'style',
       },
       data['is_shadow'] === 'Y' && {
         label: '投影范围:',
@@ -71,6 +102,7 @@ export default {
         valueKey: 'is_shadow_w',
         value: data['is_shadow_w'] || '10',
         placeholder: '请选择投影范围',
+        groupKey:'style',
         multiple: false,
         className: 'input80',
         handleCustom({action, data}) {
@@ -86,11 +118,6 @@ export default {
             });
         },
       },
-      {
-        ele: 'title',
-        label: '边框设置',
-        size: 'small', //default/mini/small
-      },
       {
         label: '是否有边框:',
         ele: 'xd-radio',
@@ -98,6 +125,7 @@ export default {
         value: data['is_border'] || 'N',
         placeholder: '请选择是否有边框',
         multiple: false,
+        groupKey:'style',
         className: 'input80',
         list: [
           {label: '是', value: 'Y'},
@@ -111,24 +139,52 @@ export default {
         value: data['is_border_c'] || '',
         placeholder: '请选择边框颜色',
         classNmae: 'input80',
+        groupKey:'style',
       },
       data['is_border'] === 'Y' && {
         label: '边框大小:',
         ele: 'el-input',
         type: 'number',
+        groupKey:'style',
         valueKey: 'is_border_w',
         value: data['is_border_w'] || '',
         placeholder: '请输入边框颜色',
         className: 'input80',
       },
+
+      {
+        ele: 'title',
+        label: '商品列表配置',
+        size: 'small',
+        groupKey:'style',
+      },
+      {
+        label: '背景颜色:',
+        ele: 'xd-color',
+        valueKey: 'listBackgroundColor',
+        value: data['listBackgroundColor'] || null,
+        placeholder: '请选择背景颜色',
+        classNmae: 'input80',
+        groupKey:'style',
+      },
+      {
+        label: '文字颜色:',
+        ele: 'xd-color',
+        valueKey: 'listTextColor',
+        value: data['listTextColor'] || null,
+        placeholder: '请选择背景颜色',
+        classNmae: 'input80',
+        groupKey:'style',
+      },
       {
         label: '内容圆角设置:',
         ele: 'xd-site-select-list',
-        valueKey: 'radius',
-        value: data['radius'] || '',
+        valueKey: 'listRadius',
+        value: data['listRadius'] || '',
         placeholder: '请选择内容圆角设置',
         multiple: false,
         className: 'input80',
+        groupKey:'style',
         handleCustom({action, data}) {
           XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
             .then(res => {
@@ -139,24 +195,6 @@ export default {
             });
         },
       },
-      {
-        ele: 'title',
-        label: '商品列表配置',
-        size: 'small', //default/mini/small
-      },
-      {
-        label: '背景颜色:',
-        ele: 'xd-color',
-        valueKey: 'listBackgroundColor',
-        value: data['listBackgroundColor'] || null,
-        placeholder: '请选择背景颜色',
-        classNmae: 'input80',
-      },
-      {
-        ele: 'title',
-        label: '投影设置',
-        size: 'small', //default/mini/small
-      },
       {
         label: '是否有投影:',
         ele: 'xd-radio',
@@ -164,26 +202,29 @@ export default {
         value: data['list_is_shadow'] || 'N',
         placeholder: '请选择是否投影',
         multiple: false,
+        groupKey:'style',
         className: 'input80',
         list: [
           {label: '是', value: 'Y'},
           {label: '否', value: 'N'},
         ]
       },
-      data['is_shadow'] === 'Y' && {
+      data['list_is_shadow'] === 'Y' && {
         label: '投影颜色:',
         ele: 'xd-color',
         valueKey: 'list_is_shadow_bg',
         value: data['list_is_shadow_bg'] || '',
         placeholder: '请选择投影颜色',
         classNmae: 'input80',
+        groupKey:'style',
       },
-      data['is_shadow'] === 'Y' && {
+      data['list_is_shadow'] === 'Y' && {
         label: '投影范围:',
         ele: 'xd-site-select-list',
         valueKey: 'list_is_shadow_w',
         value: data['list_is_shadow_w'] || '10',
         placeholder: '请选择投影范围',
+        groupKey:'style',
         multiple: false,
         className: 'input80',
         handleCustom({action, data}) {
@@ -199,11 +240,6 @@ export default {
             });
         },
       },
-      {
-        ele: 'title',
-        label: '边框设置',
-        size: 'small', //default/mini/small
-      },
       {
         label: '是否有边框:',
         ele: 'xd-radio',
@@ -211,63 +247,43 @@ export default {
         value: data['list_is_border'] || 'N',
         placeholder: '请选择是否有边框',
         multiple: false,
+        groupKey:'style',
         className: 'input80',
         list: [
           {label: '是', value: 'Y'},
           {label: '否', value: 'N'},
         ]
       },
-      data['is_border'] === 'Y' && {
+      data['list_is_border'] === 'Y' && {
         label: '边框颜色:',
         ele: 'xd-color',
         valueKey: 'list_is_border_c',
         value: data['list_is_border_c'] || '',
         placeholder: '请选择边框颜色',
+        groupKey:'style',
         classNmae: 'input80',
       },
-      data['is_border'] === 'Y' && {
+      data['list_is_border'] === 'Y' && {
         label: '边框大小:',
         ele: 'el-input',
+        groupKey:'style',
         type: 'number',
         valueKey: 'list_is_border_w',
         value: data['list_is_border_w'] || '',
         placeholder: '请输入边框颜色',
         className: 'input80',
       },
+
       {
-        label: '内容圆角设置:',
-        ele: 'xd-site-select-list',
-        valueKey: 'listRadius',
-        value: data['listRadius'] || '',
-        placeholder: '请选择内容圆角设置',
-        multiple: false,
-        className: 'input80',
-        handleCustom({action, data}) {
-          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
-            .then(res => {
-              data.cb(res.list)
-            })
-            .catch(error => {
-              console.error(error);
-            });
-        },
-      },
-      {
-        ele: 'title',
-        label: '其他',
-        size: 'small', //default/mini/small
-      },
-      {
-        label: '商品详情路径:', //label
-        ele: 'xd-select-pages-path', //package 名称
-        valueKey: 'detailPath', //form[valueKey]
+        label: '商品详情路径:',
+        ele: 'xd-select-pages-path',
+        valueKey: 'detailPath',
         placeholder: '请选择商品详情路径',
         value: data['detailPath'] || null,
+        groupKey:'advanced',
         setting: {
           router: XdBus.getParentApi('getPagesTree'),
-  
         },
-        inline: false,
       },
     ].filter(i=>i)
   },

package/src/components/JfbMovieCodeChoose/JfbMovieCodeChoose.vue

@@ -31,31 +31,23 @@
           borderRadius: radius + 'rpx',
           boxShadow: shadowBox,
           marginBottom: padding + 'rpx',
+          padding: outMargin
         }"
       >
         <view class="jfb-movie-code-choose__body-info-name">
           <image :src="cinemaInfo.cinema_logo"></image>
           <view>
-            <view class="jfb-movie-code-choose__body-info-name-name">{{
-              cinemaInfo.cinema_name
-            }}</view>
-            <view class="jfb-movie-code-choose__body-info-name-distance">{{
-              cinemaInfo.distance
-            }}</view>
+            <view class="jfb-movie-code-choose__body-info-name-name" :style="{color: textColor}">{{cinemaInfo.cinema_name }}</view>
+            <view class="jfb-movie-code-choose__body-info-name-distance" :style="{color:subTextColor}">{{cinemaInfo.distance }}</view>
           </view>
         </view>
-        <view
-          class="jfb-movie-code-choose__body-info-detail"
-          v-html="cinemaInfo.about"
-        >
+        <view class="jfb-movie-code-choose__body-info-detail" v-html="cinemaInfo.about">
         </view>
-        <view style="border: 0.5px solid #eee; margin-top: 40rpx"></view>
+        <view :style="{margin:(padding + 'rpx 0'),height: '1px', backgroundColor: textLineColor}"></view>
         <view class="jfb-movie-code-choose__body-info-shop">
           <view style="align-items: center;" class="jfb-movie-code-choose__body-info-shop-item">
-            <view>门店电话</view>
-            <view>
-              {{ cinemaInfo.phone }}
-            </view>
+            <view :style="{color:subTextColor}">门店电话</view>
+            <view :style="{color: textColor}">{{ cinemaInfo.phone }}</view>
             <xd-font-icon
               @click="handleCall"
               width="48"
@@ -65,10 +57,8 @@
             ></xd-font-icon>
           </view>
           <view style="padding: 24rpx 0 0 0;" class="jfb-movie-code-choose__body-info-shop-item">
-            <view>门店地址</view>
-            <view>
-              {{ cinemaInfo.address }}
-            </view>
+            <view :style="{color:subTextColor}">门店地址</view>
+            <view :style="{color: textColor}">{{ cinemaInfo.address }}</view>
           </view>
         </view>
       </view>
@@ -77,6 +67,7 @@
           border: listBorderBox,
           borderRadius: listRadius + 'rpx',
           boxShadow: listShadowBox,
+          padding: outMargin
         }">
         <view class="jfb-movie-code-choose__body-product-title">
           <xd-font-icon
@@ -85,8 +76,9 @@
             height="44"
             :color="mainColor"
           ></xd-font-icon>
-          <view>商品名</view>
+          <view :style="{color:listTextColor}">商品名</view>
         </view>
+        <view :style="{margin:(padding + 'rpx 0'),height: '1px', backgroundColor: subListTextColor}"></view>
         <view class="jfb-movie-code-choose__body-product-list">
           <view
             class="jfb-movie-code-choose__body-product-list-item"
@@ -96,8 +88,7 @@
           >
             <image :src="item.thumb"></image>
             <view class="jfb-movie-code-choose__body-product-list-item-info">
-              <view>{{ item.list_title }}</view>
-              <!--              <view>商品信息补充要求说明</view>-->
+              <view :style="{color:listTextColor}">{{ item.list_title }}</view>
               <xd-unit :price="item.sale_price"></xd-unit>
             </view>
             <view class="btn">
@@ -121,6 +112,7 @@ import extsMixins from "@/mixins/extsMixins";
 import { getContainerPropsValue } from "@/utils/xd.base";
 import { mapState } from "vuex";
 import getServiceUrl from "@/common/getServiceUrl";
+import Color from "color";
 
 export default {
   name: "JfbMovieCodeChoose",
@@ -137,18 +129,19 @@ export default {
       productList: [],
       detailPath: "",
       //其他
-      margin: {
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-      },
+      margin: {top: 0, left: 0, right: 0, bottom: 0,},
       //基础
       radius: 0,
       backgroundColor: "",
       padding: 0,
       listRadius: 0,
       listBackgroundColor: "",
+      textColor:'',
+      subTextColor:'',
+      textLineColor:'',
+      listTextColor:'',
+      subListTextColor:'',
+      listTextLineColor:'',
 
       //投影
       is_shadow: "Y",
@@ -168,8 +161,9 @@ export default {
     };
   },
   watch: {
-    container(value) {
-      this.init(value);
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
     },
   },
   computed: {
@@ -215,93 +209,33 @@ export default {
      * @param container {object} 业务组件对象自己
      */
     init(container) {
-      this.detailPath = getContainerPropsValue(
-        container,
-        "content.detailPath",
-        { value: "" }
-      ).value;
-      this.margin = getContainerPropsValue(container, "content.margin", {
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-      });
+      this.detailPath = getContainerPropsValue(container, "content.detailPath", { value: "" }).value;
+      this.margin = getContainerPropsValue(container, "content.margin", {top: 0, left: 0, right: 0, bottom: 0,});
       this.padding = getContainerPropsValue(container, "content.padding", 20);
-      this.radius = getContainerPropsValue(container, "content.radius", 0);
-      this.backgroundColor = getContainerPropsValue(
-        container,
-        "content.backgroundColor",
-        "#f8f8f8"
-      );
-      this.is_shadow = getContainerPropsValue(
-        container,
-        "content.is_shadow",
-        "N"
-      );
-      this.is_shadow_bg = getContainerPropsValue(
-        container,
-        "content.is_shadow_bg",
-        "#fff"
-      );
-      this.is_shadow_w = getContainerPropsValue(
-        container,
-        "content.is_shadow_w",
-        "10"
-      );
 
-      this.is_border = getContainerPropsValue(
-        container,
-        "content.is_border",
-        "N"
-      );
-      this.is_border_c = getContainerPropsValue(
-        container,
-        "content.is_border_c",
-        "#fff"
-      );
-      this.is_border_w = getContainerPropsValue(
-        container,
-        "content.is_border_w",
-        2
-      );
+      this.radius = getContainerPropsValue(container, "content.radius", 0);
+      this.backgroundColor = getContainerPropsValue(container, "content.backgroundColor", "#f8f8f8");
+      this.is_shadow = getContainerPropsValue(container, "content.is_shadow", "N");
+      this.is_shadow_bg = getContainerPropsValue(container, "content.is_shadow_bg", "#fff");
+      this.is_shadow_w = getContainerPropsValue(container, "content.is_shadow_w", "10");
+      this.is_border = getContainerPropsValue(container, "content.is_border", "N");
+      this.is_border_c = getContainerPropsValue(container, "content.is_border_c", "#fff");
+      this.is_border_w = getContainerPropsValue(container, "content.is_border_w", 2);
+      this.textColor = getContainerPropsValue(container, "content.textColor", '#333');
+      this.textLineColor =  Color(this.backgroundColor).lighten(0.2).toString();
+      this.subTextColor = Color(this.textColor).alpha(.6).toString();
 
       this.listRadius = getContainerPropsValue(container, "content.listRadius", 0);
-      this.listBackgroundColor = getContainerPropsValue(
-        container,
-        "content.listBackgroundColor",
-        "#f8f8f8"
-      );
-      this.list_is_shadow = getContainerPropsValue(
-        container,
-        "content.list_is_shadow",
-        "N"
-      );
-      this.list_is_shadow_bg = getContainerPropsValue(
-        container,
-        "content.list_is_shadow_bg",
-        "#fff"
-      );
-      this.list_is_shadow_w = getContainerPropsValue(
-        container,
-        "content.list_is_shadow_w",
-        "10"
-      );
-
-      this.list_is_border = getContainerPropsValue(
-        container,
-        "content.list_is_border",
-        "N"
-      );
-      this.list_is_border_c = getContainerPropsValue(
-        container,
-        "content.list_is_border_c",
-        "#fff"
-      );
-      this.list_is_border_w = getContainerPropsValue(
-        container,
-        "content.list_is_border_w",
-        2
-      );
+      this.listTextColor = getContainerPropsValue(container, "content.listTextColor", '#333');
+      this.subListTextColor = Color(this.listTextColor).alpha(.6).toString();
+      this.listBackgroundColor = getContainerPropsValue(container, "content.listBackgroundColor", "#f8f8f8");
+      this.subListTextColor =  Color(this.listBackgroundColor).lighten(0.2).toString();
+      this.list_is_shadow = getContainerPropsValue(container, "content.list_is_shadow", "N");
+      this.list_is_shadow_bg = getContainerPropsValue(container, "content.list_is_shadow_bg", "#fff");
+      this.list_is_shadow_w = getContainerPropsValue(container, "content.list_is_shadow_w", "10");
+      this.list_is_border = getContainerPropsValue(container, "content.list_is_border", "N");
+      this.list_is_border_c = getContainerPropsValue(container, "content.list_is_border_c", "#fff");
+      this.list_is_border_w = getContainerPropsValue(container, "content.list_is_border_w", 2);
     },
 
     p_getCinemaInfo() {
@@ -317,7 +251,7 @@ export default {
         })
           .then((res) => {
             const { cinema_data } = res;
-            
+
             cinema_data['cinema_logo'] = getServiceUrl(cinema_data.cinema_logo);
             this.cinemaInfo = cinema_data;
             resolve();
@@ -384,7 +318,6 @@ export default {
 .jfb-movie-code-choose {
   &__body {
     &-info {
-      padding: unit(40,rpx);
       &-name {
         display: flex;
         align-items: center;
@@ -441,7 +374,6 @@ export default {
     &-product {
       border-radius: unit(20, rpx);
       background: #ffffff;
-      padding: unit(40, rpx);
 
       &-title {
         display: flex;
@@ -460,7 +392,9 @@ export default {
           display: flex;
           justify-content: space-between;
           margin-bottom: unit(40, rpx);
-          
+          &:last-child {
+            margin-bottom: 0;
+          }
 
           image {
             width: unit(144, rpx);
@@ -486,7 +420,7 @@ export default {
               font-size: unit(24, rpx);
             }
           }
-          
+
           & .btn {
             height: unit(144, rpx);
             flex-shrink: 0;

package/src/components/JfbMovieCodeChoose/JfbMovieCodeChooseLess.less

@@ -13,9 +13,7 @@
 
 //start
 .jfb-movie-code-choose {
-  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(100, 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-movie-code-choose {
-  &:before {
-    content: " ";
-    display: table;
-  }
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
 }
 /**endNotPreview**/