jufubao-movie 1.0.67 → 1.0.68-beta1

package/src/components/JfbMovieLineCinema/JfbMovieLineCinema.vue

@@ -13,17 +13,21 @@
       :class="{ editx: isEditx && active }"
       v-if="isEditx && active && !noBorder"
     >
-      <view class="jfb-movie-line-cinema__edit-icon"@click.stop="delEdit">
-        <xd-font-icon icon="iconshanchu-01" color="#fff" size="30"></xd-font-icon>
+      <view class="jfb-movie-line-cinema__edit-icon" @click.stop="delEdit">
+        <xd-font-icon
+          icon="iconshanchu-01"
+          color="#fff"
+          size="30"
+        ></xd-font-icon>
       </view>
     </view>
     <!-- #endif -->
     <view
       class="jfb-movie-line-cinema__body"
-      :style="{minHeight: layoutInfo.bodyMinHeight}"
+      :style="{ minHeight: layoutInfo.bodyMinHeight }"
       v-if="loading"
     >
-      <view class="cinema_header" :style="{top: layoutInfo.top + 'rpx'}">
+      <view class="cinema_header" :style="{ top: layoutInfo.top + 'rpx' }">
         <view class="addr_point">
           <xd-city-show
             city-location-type="baidu"
@@ -83,66 +87,40 @@
           <view>
             <view class="item_addr"></view>
           </view>
-          <view style="display: flex;justify-content: space-between; align-items: center; margin-top: 24rpx;">
+          <view
+            style="
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-top: 24rpx;
+            "
+          >
             <view class="item_dist"></view>
-            <view style="display: flex;">
+            <view style="display: flex">
               <view class="cinema_item-btn"></view>
             </view>
           </view>
         </view>
       </view>
       <template v-else>
-        <view v-if="filterCinemaList.length" class="cinema_list">
-          <view
-            class="cinema_item"
-            v-for="item in filterCinemaList"
-            :key="item.cinema_id"
-            @click="toChooseSchedule(item)"
-          >
-            <view class="item_main">
-              <view class="item_name">{{ item.cinema_name }}</view>
-            </view>
-            <view>
-              <view class="item_addr">{{ item.address }}</view>
-            </view>
-            <view
-              style="
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                margin-top: 24rpx;
-              "
-            >
-              <view class="item_dist">
-                <xd-font-icon icon="icondizhi" size="32" style="margin-right: 30rpx;"></xd-font-icon>
-                {{ item.distance }}</view
-              >
-              <!-- seat_index code_index -->
-              <view style="display: flex;">
-                <view
-                  v-if="is_show_sell === 'Y' && item.sell_index > -1"
-                  :style="{background: mainColor}"
-                  class="cinema_item-btn"
-                  @click.stop="toSellPath(item)">{{ sellName }}</view>
-                <view
-                  v-if="item.code_index > -1"
-                  :style="{background: mainColor, marginLeft: '20rpx'}"
-                  class="cinema_item-btn"
-                  @click.stop="toCodePath(item)">电子码</view>
-                <view
-                  v-if="item.seat_index > -1"
-                  :style="{background: mainColor, marginLeft: '20rpx'}"
-                  class="cinema_item-btn"
-                  @click.stop="toSchedulePath(item)">在线选座</view>
-              </view>
-            </view>
-          </view>
-        </view>
-        <view v-else class="cinema_list">
-          <view class="empty_cinema">暂无影院数据</view>
+        <view v-if="initAttr" :style="[contStyleComp]">
+          <cus-shops
+            :layout="shopListStyle"
+            :select-id="selectIds"
+            :is-show-btn="fastEntryStatus"
+            :content="cusContent"
+            :cus-style="cusStyle"
+            :list="filterCinemaList"
+            :main-color="mainColor"
+            :sub-main-color="subMainColor"
+            :names="cusNames"
+            :entry="cusEntry"
+            :is-auto-jump="isAutoJump"
+            :mapKeys="mapKeys"
+            @on-event="handleToEvent"
+          ></cus-shops>
         </view>
       </template>
-
     </view>
   </view>
 </template>
@@ -156,8 +134,9 @@ import JfbMovieLineCinemaMixin from "./JfbMovieLineCinemaMixin";
 import componentsMixins from "@/mixins/componentsMixins";
 import extsMixins from "@/mixins/extsMixins";
 import XdCityShow from "@/components/XdCityShowApi/XdCityShowApi";
-import { getContainerPropsValue } from "@/utils/xd.base";
+import { getContainerPropsValue, gCPVal } from "@/utils/xd.base";
 import { mapState } from "vuex";
+import CusShops from "@/components/CusShops/CusShops.vue";
 export default {
   name: "JfbMovieLineCinema",
   components: {
@@ -165,6 +144,7 @@ export default {
     XdFormInput,
     XdSwiper,
     XdCityShow,
+    CusShops,
   },
   mixins: [componentsMixins, extsMixins, JfbMovieLineCinemaMixin],
   data() {
@@ -184,14 +164,35 @@ export default {
       loadingList: true,
 
       //面板
-      is_show_sell: "",
-      sellName: "",
-      sellPath: "",
-      scheduleChoosePath: "",
+      scanPath: "", //扫一扫
+      jhdPath: "", //聚好兑
+      qpPath: "", //快捷码      scheduleChoosePath: "",
       codeChoosePath: "",
       choseCityPath: "",
-      sort_consume_mode: '',
+      sort_consume_mode: "",
       loading: false, //是否已经加载完成
+
+      shopListStyle: "v3", //门店风格
+      cusContent: [], //显示内容
+      fastEntryStatus: false,
+      cusNames: {}, //按钮名称
+      cusEntry: {}, //入口状态
+      isAutoJump: [],
+      mapKeys: {
+        id: "cinema_id",
+        brand_id: "brand_id", //品牌ID
+        shop_id: "cinema_id", //整理前的门店ID
+        name: "cinema_name", //店铺名字
+        distance: "distance", //距离
+        address: "address", //店铺地址
+        image: "shop_icon", //店铺图片
+        mode: "cinema_type", //标签类型[]
+      },
+      //style
+      bodyPadding: {},
+      contentBgColor: "rgba(0,0,0,0)",
+      cusStyle: {}, //门店样式设置
+      initAttr: false, //状态完成
     };
   },
   computed: {
@@ -199,27 +200,50 @@ export default {
       stateCity: (state) => state.cityLocation.city,
       stateLocation: (state) => state.cityLocation.location || {},
     }),
-    filterCinemaList(){
-      let keywordFilterList = this.cinema_name ? this.cinemaList.filter(item => item.cinema_name.indexOf(this.cinema_name) > -1) : this.cinemaList;
-      if(this.subIndex == 0){
+    filterCinemaList() {
+      let keywordFilterList = this.cinema_name
+        ? this.cinemaList.filter(
+            (item) => item.cinema_name.indexOf(this.cinema_name) > -1
+          )
+        : this.cinemaList;
+      if (this.subIndex == 0) {
         return keywordFilterList;
-      }else{
+      } else {
         let area_code = this.citySubs[this.subIndex].value;
-        return keywordFilterList.filter(item => item.area_code == area_code)
+        return keywordFilterList.filter((item) => item.area_code == area_code);
       }
       // return this.cinemaList.filter(item => item.cinema_name.indexOf(this.cinema_name) > -1 || item.address.indexOf(this.cinema_name) > -1)
     },
     listMarginTop() {
       return {
         // marginTop: (this.layoutInfo.top + 20) + "rpx"
-        marginTop: '100rpx'
-      }
+        marginTop: "100rpx",
+      };
+    },
+    selectIds() {
+      let id = "";
+      if (!id && this.resource_shop_id) id = this.cinema_id;
+      if (!id && this.brand_id) id = this.brand_id;
+      if (!id && this.shop_id) id = this.cinema_id;
+      return id;
+    },
+    contStyleComp() {
+      let height = this.layoutInfo.bodyMinHeightRpx - 80;
+      //大于一个标签显示标签
+      //if(this.titleList.length > 1) height = height - 100;
+      //if(this.mapIsExtend) height = height - 400;
+      height = height - this.getPMValue(this.bodyPadding, "TB", 0);
+      return {
+        minHeight: height + "rpx",
+        padding: this.getMarginAndPadding(this.bodyPadding, 0),
+        backgroundColor: this.contentBgColor,
+      };
     },
   },
   watch: {
-    container(value,oldValue) {
-      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
-      if (this.$configProject['isPreview']) this.init(value)
+    container(value, oldValue) {
+      if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject["isPreview"]) this.init(value);
     },
     stateCity(n, o) {
       if (n && JSON.stringify(n) != JSON.stringify(o)) {
@@ -228,8 +252,7 @@ export default {
         this.getList();
       }
     },
-    cinemaList(n){
-    }
+    cinemaList(n) {},
   },
   created() {
     this.init(this.container);
@@ -244,49 +267,219 @@ export default {
      * @param container {object} 业务组件对象自己
      */
     init(container) {
-      this.scheduleChoosePath = getContainerPropsValue(
+      //content
+      this.sort_consume_mode = gCPVal(container, "sort_consume_mode", "");
+      //内容显示
+      let cusContent = [];
+      if (gCPVal(container, "showStoreAddress", "Y") === "Y")
+        cusContent.push("address"); //门店地址
+      if (gCPVal(container, "showStoreDistance", "Y") === "Y")
+        cusContent.push("distance"); //地址
+      this.cusContent = cusContent;
+      this.fastEntryStatus = gCPVal(container, "fastEntryStatus", "N") === "Y";
+      let cusNames = {},
+        cusEntry = {};
+      let fastEntry = gCPVal(container, "fastEntry", []).filter((item) => {
+        return item.check === true;
+      });
+      if (this.fastEntryStatus) {
+        for (let i = 0; i < fastEntry.length; i++) {
+          if (fastEntry[i].input)
+            cusNames[fastEntry[i].value] = fastEntry[i].input;
+          cusEntry[fastEntry[i].value] = fastEntry[i].check;
+        }
+      }
+      this.cusNames = cusNames;
+      this.cusEntry = cusEntry;
+      //style
+      this.shopListStyle = gCPVal(container, "shopListStyle", "v3");
+      let sValue = `{"cardItemSpace":16,"margin":{"bottom":16,"left":0,"right":0,"top":16},"backgroundColor":"rgba(245, 245, 245, 1)"}`;
+      let shopStyle = this.getRelationStatus(container,'shopStyle', {  cardItemSpaceStatus:['cardItemSpace'],bodyPaddingStatus:['bodyPadding']}, sValue);
+      this.bodyPadding = gCPVal(container,'bodyPadding', [{ bottom:0,left:16, right:16,top:16}], {sKey:'bodyPaddingStatus',fields:['bodyPadding'],cusFields: ['shopStyle','margin',shopStyle],isPMR: true});
+      this.contentBgColor = gCPVal(container, "contentBgColor", "#f8f8f8", {
+        sKey: "contentBgColorStatus",
+        fields: ["contentBgColor"],
+      });
+      let cardItemSpace = gCPVal(container, "cardItemSpace", [16, 20], {
+        sKey: "cardItemSpaceStatus",
+        fields: ["cardItemSpace"],
+        cusFields: ["shopStyle", "cardItemSpace", shopStyle],
+      });
+      let cardItemRadius =
+        gCPVal(
+          container,
+          "cardItemRadius",
+          [sValue === shopStyle ? 0 : this.gStyleValue.radius, 0],
+          { sKey: "cardItemRadiusStatus", fields: ["listItemRadius"] }
+        ) || 0;
+      let cardItemShadow = gCPVal(
         container,
-        "content.schedule_choose_path",
-        { value: "" }
-      ).value;
-      this.codeChoosePath = getContainerPropsValue(
+        "cardItemShadow",
+        [this.gStyleValue.shadow, { color: "", width: "0" }],
+        { isShadow: true }
+      );
+      let cardItemBorder = gCPVal(
         container,
-        "content.codeChoosePath",
-        { value: "" }
-      ).value;
-      this.choseCityPath = getContainerPropsValue(
+        "cardItemBorder",
+        [
+          { color: "#f8f8f8", width: 0, style: "solid" },
+          { color: "#f8f8f8", width: 0, style: "solid" },
+        ],
+        { isBorder: true }
+      );
+      let distanceColor = gCPVal(container, "distanceColor", "#999", {
+        sKey: "distanceColorStatus",
+        fields: ["distanceColor"],
+      });
+      let cardItemBgColor = gCPVal(container, "cardItemBgColor", "", {
+        sKey: "cardItemBgColorStatus",
+        fields: ["cardItemBgColor"],
+      });
+      let itemPadding = gCPVal(
         container,
-        "content.choseCityPath",
-        { value: "" }
-      ).value;
-      this.sellPath = getContainerPropsValue(container, "content.sellPath", {value: ""}).value;
-      this.sort_consume_mode = getContainerPropsValue(container, 'content.sort_consume_mode', '');
-      this.is_show_sell = getContainerPropsValue(container, 'content.is_show_sell', '');
-      this.sellName = getContainerPropsValue(container, 'content.sellName', '到店使用');
+        "itemPadding",
+        [{ top: 16, left: 16, right: 16, bottom: 16 }, 20],
+        { sKey: "itemPaddingStatus", fields: ["itemPadding"], isPMR: true }
+      );
+      this.cusStyle = {
+        item: {
+          "margin-bottom": `${cardItemSpace}rpx`,
+          "border-radius": cardItemRadius + "rpx",
+          "box-shadow": cardItemShadow,
+          border: cardItemBorder,
+          backgroundColor: cardItemBgColor,
+          padding: this.getMarginAndPadding(itemPadding, 0),
+        },
+        distance: {
+          color: distanceColor,
+        },
+      };
+
+      this.scheduleChoosePath = gCPVal(container, "scheduleChoosePath", {
+        value: "",
+      }).value;
+      this.codeChoosePath = gCPVal(container, "codeChoosePath", {
+        value: "",
+      }).value;
+      this.choseCityPath = gCPVal(container, "choseCityPath", {
+        value: "",
+      }).value;
+      this.scanPath = gCPVal(container, "cscanPath", { value: "" }).value;
+      this.jhdPath = gCPVal(container, "jhdPath", { value: "" }).value;
+      this.qpPath = gCPVal(container, "qpPath", { value: "" }).value;
+      this.initAttr = true;
     },
     toChooseSchedule(item) {
-      if(item.seat_index > -1) this.toSchedulePath(item);
-      else if(item.code_index > -1) this.toCodePath(item);
+      if (item.seat_index > -1) this.toSchedulePath(item);
+      else if (item.code_index > -1) this.toCodePath(item);
     },
-    toCodePath(item){
+    toCodePath(item) {
       this.$xdUniHelper.navigateTo({
         url: this.codeChoosePath + `?cinema_id=${item.cinema_id}`,
       });
     },
-    toSellPath(item){
+    toSellPath(item) {
       let params = {
-        'x-params': Base64.encodeURI(`shop_id:${item.cinema_id}`),
-      }
+        "x-params": Base64.encodeURI(`shop_id:${item.cinema_id}`),
+      };
       let options = this.$xdUniHelper.jsonToParams(params);
       this.$xdUniHelper.navigateTo({
         url: this.sellPath + `?${options}`,
       });
     },
-    toSchedulePath(item){
+    toSchedulePath(item) {
       this.$xdUniHelper.navigateTo({
         url: this.scheduleChoosePath + `?cinema_id=${item.cinema_id}`,
       });
     },
+    //==evnet===
+    handleToEvent({ item, type }) {
+      let url = "";
+      let parmas = [];
+
+      //扫一扫
+      if (type === "WB") url = this.scanPath;
+      //聚好兑
+      if (type === "JHD") url = this.jhdPath;
+      //快捷码
+      if (type === "QP") url = this.qpPath;
+      //在线选择
+      if (type === "SEAT") {
+        if (this.seatPath) url = this.seatPath;
+        else {
+          type = "DL";
+          url = this.shopInfoPath;
+        }
+      }
+      //小时达
+      if (type === "HDSELF") {
+        if (this.hdSelfPath) url = this.hdSelfPath;
+        else {
+          type = "DL";
+          url = this.shopInfoPath;
+        }
+      }
+      //旅游购票
+      if (type === "TRAVEL") {
+        if (this.travelfPath) url = this.travelfPath;
+        else {
+          type = "DL";
+          url = this.shopInfoPath;
+        }
+      }
+
+      if (item.resource_shop_id)
+        parmas.push(`resource_shop_id=${item.resource_shop_id}`);
+      if (item.brand_id) parmas.push(`brand_id=${item.brand_id}`);
+      if (item.consume_mode)
+        parmas.push(`consume_mode=${item.consume_mode.join(",")}`);
+      if (item.shop_id) parmas.push(`shop_id=${item.shop_id}`);
+
+      //详情增加扩张参数
+      if (item.exts_params) parmas.push(`exts_params=${item.exts_params}`);
+
+      //详情增加扩张参数
+      if (["DL", "JHD", "QP"].includes(type)) {
+        parmas.push(
+          `resource_shop=${Base64.encodeURI(
+            JSON.stringify({
+              shop_id: item.shop_id,
+              resource_shop_id: item.resource_shop_id,
+            })
+          )}`
+        );
+      }
+
+      //在线选择,电子码传惨处理
+      if (["SEAT", "CODE"].includes(type))
+        parmas = [`cinema_id=${item.resource_shop_id}`];
+      if (["TRAVEL"].includes(type))
+        parmas = [`shop_id=${item.resource_shop_id}`];
+      if (["WB"].includes(type))
+        parmas = [`x-params=${Base64.encodeURI(`shop_id:${item.shop_id}`)}`];
+      if (["JHD"].includes(type)) {
+        parmas.push(`x-jfb-os=jhd`);
+        parmas.push(this.$xdUniHelper.jsonToParams(this.options));
+      }
+      if (["JHD", "QP"].includes(type)) {
+        parmas.push(`xnamespace=${this.xnamespace}`);
+        parmas.push(`x-params=${Base64.encodeURI(`shop_id:${item.shop_id}`)}`);
+      }
+
+      //预览模式
+      if (this.$configProject["isPreview"]) {
+        console.warn(`uri=>${url}?${parmas.join("&")}`);
+        return;
+      }
+
+      if (!url) throw new Error(`${type} => 未设置访问地址`);
+
+      //普通跳转
+      this.$xdUniHelper.navigateTo({
+        url: `${url}?${parmas.join("&")}`,
+      });
+    },
+    //==evnet===
 
     getList() {
       const { city, location, citySubs, subIndex, cinema_name } = this;
@@ -307,24 +500,18 @@ export default {
         this.$xdHideLoading();
         const { list, next_page_token, area_list } = res;
 
-        this.cinemaList = list.map(item => {
-          let sell_index = item.cinema_type.findIndex(ii => ii == 'SELL'); //线下核销
-          let seat_index = item.cinema_type.findIndex(ii => ii == 'SEAT');  //在线选座
-          let code_index = item.cinema_type.findIndex(ii => ii == 'CODE');  //电子码
-          item['sell_index'] = sell_index;
-          item['code_index'] = code_index;
-          item['seat_index'] = seat_index;
-          return item;
-        });
+        this.cinemaList = list;
         this.page_token = next_page_token;
-        let citySubs = area_list.map(item => {
+        let citySubs = area_list.map((item) => {
           return {
             label: item.area_name,
             value: item.area_code,
-            count: item.cinema_count
-          }
-        })
-        this.citySubs = [{ label: "全城", value: "", count: "" }].concat(citySubs);
+            count: item.cinema_count,
+          };
+        });
+        this.citySubs = [{ label: "全城", value: "", count: "" }].concat(
+          citySubs
+        );
       });
     },
     /**城市定位**********************/
@@ -381,11 +568,13 @@ export default {
       this.subIndex = i;
     },
 
-
     handleCityChange() {
-      this.$xdUniHelper.navigateTo({
-        url: this.choseCityPath,
-      }, true);
+      this.$xdUniHelper.navigateTo(
+        {
+          url: this.choseCityPath,
+        },
+        true
+      );
     },
 
     handleGetCitySub(city_code) {
@@ -423,7 +612,7 @@ export default {
     flex-direction: column;
     .cinema_header {
       &-mask {
-        height: unit(108, rpx)
+        height: unit(108, rpx);
       }
       display: flex;
       align-items: center;
@@ -504,18 +693,18 @@ export default {
       padding: unit(24, rpx);
       flex: 1;
       overflow: auto;
-      &.skeleton-wrap{
-        .cinema_item{
-          .item_name{
+      &.skeleton-wrap {
+        .cinema_item {
+          .item_name {
             .skeleton-item(100%, 62rpx);
           }
-          .item_addr{
+          .item_addr {
             .skeleton-item(300rpx);
           }
-          .item_dist{
+          .item_dist {
             .skeleton-item(100rpx);
           }
-          .cinema_item-btn{
+          .cinema_item-btn {
             .skeleton-item(160rpx, 50rpx, 50rpx);
           }
         }

package/src/components/JfbMovieLineCinema/Mock.js

@@ -22,7 +22,20 @@ module.exports = {
         show_cinema_type_name: "在线选座",
         brand_name: "",
         area_code: "2809",
-        area_name: "通州区"
+        area_name: "通州区",
+        "consume_options": [{
+          "consume_mode": "CODE",
+          "desc": "电子码",
+          "icon": "iconduihuan"
+        }, {
+          "consume_mode": "SEAT",
+          "desc": "在线选座",
+          "icon": "iconxuanze"
+        }, {
+          "consume_mode": "SELL",
+          "desc": "线下核销",
+          "icon": "iconduihuan"
+        }]
       },
       {
         cinema_id: 6785091,
@@ -43,7 +56,20 @@ module.exports = {
         show_cinema_type_name: "在线选座",
         brand_name: "",
         area_code: "2810",
-        area_name: "大兴区"
+        area_name: "大兴区",
+        "consume_options": [{
+          "consume_mode": "CODE",
+          "desc": "电子码",
+          "icon": "iconduihuan"
+        }, {
+          "consume_mode": "SEAT",
+          "desc": "在线选座",
+          "icon": "iconxuanze"
+        }, {
+          "consume_mode": "SELL",
+          "desc": "线下核销",
+          "icon": "iconduihuan"
+        }]
       },
       {
         cinema_id: 6771491,