jufubao-base 1.0.169-beta1 → 1.0.169-beta11

package/src/components/JfbBaseTfkSearch/CustomList.vue

@@ -0,0 +1,402 @@
+<template>
+  <view class="custom-list">
+    <view v-if="dataList === null">
+      <view :class="{productBoxCell2: type_other === 2 }">
+        <view
+          v-for="item in skeletonCount"
+          class="skeleton-wrap"
+          :class="{productItemCell2: type_other === 2 }"
+          :key="item"
+          :style="{
+            marginBottom:$parentVm.outSpacing + 'rpx',
+            padding:contMarginComp,
+            borderRadius:$parentVm.contRradius+ 'rpx',
+            boxShadow:'0 0 10rpx rgba(0,0,0,0.1)',
+            width: (type_code === 'product' && type_other === 2) ? (outItemProduct + 'rpx'): 'auto',
+          }"
+        >
+          <skeleton-product
+            :cell="type_other"
+            v-if="$parentVm.productConfig !== null && type_code === 'product'"
+            :product-config="$parentVm.productConfig"
+            :out-spacing="$parentVm.outSpacing"
+            :height="outItemProduct"
+          ></skeleton-product>
+          <skeleton-shop v-if="type_code === 'shop'" :out-spacing="$parentVm.outSpacing"></skeleton-shop>
+          <skeleton-film v-if="type_code === 'film'" :out-spacing="$parentVm.outSpacing"></skeleton-film>
+          <skeleton-cinema v-if="type_code === 'cinema'"></skeleton-cinema>
+        </view>
+      </view>
+    </view>
+    <view class="custom-list-data" v-else>
+      <template v-if="type_other !== 2">
+        <view
+          v-for="item in dataList"
+          :key="item.id"
+          :style="{
+          marginBottom:$parentVm.outSpacing + 'rpx',
+          padding:contMarginComp,
+          borderRadius:$parentVm.contRradius+ 'rpx',
+          border: $parentVm.contBorder,
+          boxShadow:$parentVm.contShadow,
+          width: (type_code === 'product' && type_other === 2) ? (outItemProduct + 'rpx'): 'auto',
+          height: heightRpx,
+          backgroundColor: $parentVm.contBgColor
+        }">
+          <content-film
+            type="hot"
+            v-if="type_code === 'film'"
+            style="width: 100%; height: 100%"
+            :keyword="keyword"
+            :item="item"
+            :out-spacing="$parentVm.outSpacing"
+            :color="$parentVm.mainColor"
+            :border-radius="$parentVm.imgRradius"
+            @on-film-detail="(film_id)=>{$parentVm.handleFilmDetail(film_id, dataConfig)}"
+            @on-buy="(film_id)=>{$parentVm.handleBuy(film_id, dataConfig)}"
+          ></content-film>
+          <content-cinema
+            v-if="type_code === 'cinema'"
+            style="width: 100%;height: 100%"
+            type="list"
+            :keyword="keyword"
+            :item="item"
+            :out-spacing="$parentVm.outSpacing"
+            :color="{SEAT:$parentVm.mainColor,CODE:$parentVm.subMainColor,SELL:$parentVm.successColor}"
+            :border-radius="$parentVm.imgRradius"
+            @on-schedule="(cinema)=>{$parentVm.handleSchedule(cinema,dataConfig)}"
+            @on-cashier-detail="(cinema)=>{$parentVm.handleCashierDetail(cinema,dataConfig)}"
+            @on-code-detail="(cinema)=>{$parentVm.handleCodeDetail(cinema,dataConfig)}"
+          ></content-cinema>
+          <content-shop
+            v-if="type_code === 'shop'"
+            style="width: 100%; height: 100%"
+            :keyword="keyword"
+            :out-spacing="$parentVm.outSpacing"
+            :item="item"
+            :color="$parentVm.mainColor"
+            :border-radius="$parentVm.imgRradius"
+            :is-echange="'Y' || $parentVm.isShowExchange"
+            @on-shop-jhd="(shop)=>{$parentVm.handleShopJhd(shop,dataConfig)}"
+            @on-shop-detail="(shop)=>{$parentVm.handleShopDetail(shop,dataConfig)}"
+          ></content-shop>
+          <content-product
+            v-if="$parentVm.productConfig !== null && type_code === 'product'"
+            style="width: 100%; height: 100%"
+            :product-config="$parentVm.productConfig"
+            :out-spacing="$parentVm.outSpacing"
+            :item="item"
+            :brand-color="$parentVm.brandColor"
+            :color="$parentVm.mainColor"
+            :border-radius="$parentVm.imgRradius"
+            :cell="type_other"
+            @on-product-detail="(product)=>{$parentVm.handleProductDetail(product,dataConfig)}"
+          ></content-product>
+        </view>
+      </template>
+      <view v-else class="productBox2">
+        <view v-for="(value, listKey) in productTowList" :key="listKey">
+          <view
+            v-if="productTowList[listKey] !== null"
+            v-for="item in productTowList[listKey]"
+            :key="item.id"
+            :style="{
+              marginBottom:$parentVm.outSpacing + 'rpx',
+              padding:contMarginComp,
+              borderRadius:$parentVm.contRradius+ 'rpx',
+              border: $parentVm.contBorder,
+              boxShadow:$parentVm.contShadow,
+              width: (type_code === 'product' && type_other === 2) ? (outItemProduct + 'rpx'): 'auto',
+              height: heightRpx,
+              backgroundColor: $parentVm.contBgColor
+            }"
+          >
+            <content-product
+              v-if="$parentVm.productConfig !== null"
+              style="width: 100%; height: 100%"
+              :product-config="$parentVm.productConfig"
+              :out-spacing="$parentVm.outSpacing"
+              :item="item"
+              :height="outItemProduct"
+              :color="$parentVm.mainColor"
+              :brand-color="$parentVm.brandColor"
+              :border-radius="$parentVm.imgRradius"
+              :cell="type_other"
+              @on-product-detail="(product)=>{$parentVm.handleProductDetail(product,dataConfig)}"
+            ></content-product>
+          </view>
+        </view>
+      </view>
+
+    </view>
+  </view>
+</template>
+
+<script>
+import {mapState} from "vuex";
+import SkeletonFilm from "./SkeletonFilm.vue";
+import SkeletonCinema from "./SkeletonCinema.vue";
+import SkeletonShop from "./SkeletonShop.vue";
+import SkeletonProduct from "./SkeletonProduct.vue";
+import ContentFilm from "./ContentFilm.vue";
+import ContentCinema from "./ContentCinema.vue";
+import ContentShop from "./ContentShop.vue";
+import ContentProduct from "./ContentProduct.vue";
+
+export default {
+  name: "CustomList",
+  components: {
+    ContentProduct,
+    SkeletonProduct,
+    SkeletonCinema,
+    SkeletonFilm,
+    SkeletonShop,
+    ContentFilm,
+    ContentCinema,
+    ContentShop,
+  },
+  props:{
+    keyword:{
+      type:String,
+      default:'',
+    },
+    tabId:{
+      type:String,
+      required:true
+    }
+  },
+
+  computed:{
+    ...mapState({
+      stateCity: state => state.cityLocation.city,
+      stateLocation: (state) => state.cityLocation.location || {},
+    }),
+    getParams(){
+      let params  = {
+        search_range: this.search_range,
+        page_token: this.page_token,
+        page_size: this.page_size,
+      };
+
+      //关键字
+      if(this.keyword) params['keyword'] = this.keyword;
+
+      //设置城市
+      if(this.stateCity && this.stateCity.city_code) {
+        params['city_code'] = this.stateCity.city_code;
+      }
+
+      //设置经纬度
+      if(this.stateLocation &&
+        (this.stateLocation.latitude && this.stateLocation.longitude)
+      ){
+        params['latitude'] = this.stateLocation.latitude;
+        params['longitude'] = this.stateLocation.longitude;
+      }
+
+      return params
+    },
+    contMarginComp(){
+      let str = `${this.$parentVm.checkValue(this.$parentVm.contMargin.top, 20)}rpx`;
+      str = `${str} ${this.$parentVm.checkValue(this.$parentVm.contMargin.right, 20)}rpx`;
+      str = `${str} ${this.$parentVm.checkValue(this.$parentVm.contMargin.bottom, 20)}rpx`;
+      str = `${str} ${this.$parentVm.checkValue(this.$parentVm.contMargin.left, 20)}rpx`;
+      return str
+    },
+    outItemProduct(){
+      //获取每列元素最大宽度
+      let num = (750 - 3 * Number(this.$parentVm.outSpacing))/2;
+      num = num - this.$parentVm.checkValue(this.$parentVm.contMargin.right, 20) - this.$parentVm.checkValue(this.$parentVm.contMargin.left, 20);
+      return num - this.$parentVm.contBorderWidth * 2
+    },
+    heightRpx(){
+      let h = 'auto'
+      if(this.type_code === 'film') h = '240rpx'
+      if(this.type_code === 'cinema') h = 'auto';
+      if(this.type_code === 'shop') h = '200rpx';
+      return h;
+    }
+  },
+  data(){
+    return {
+      $parentVm:null,
+      parentStatus: false,
+      skeletonCount: 6,
+      hasNoData: false,
+
+      page_token:'1',
+      page_size: 20,
+
+      //参数
+      type_code:'',
+      search_range:'',
+      type_other:null,
+      is_open_city:'N',
+
+
+      //列表数据
+      dataList: null,
+      timer:null,
+      dataConfig: null,
+
+
+      //商品两列功能
+      productTowList:{
+        left:null,
+        right:null,
+      },
+    }
+  },
+
+  watch:{
+    keyword(){
+      if(this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+      this.timer = setTimeout(()=>{
+        this.onCusReloadList();
+      },500)
+    },
+    tabId(){
+      this.parseTab()
+      this.onCusReloadList();
+    },
+
+    stateCity(n, o){
+      if(n && JSON.stringify(n) !== JSON.stringify(o)){
+        this.onCusReloadList()
+      }
+    },
+  },
+
+  created() {
+    this.getParentMV();
+    this.parseTab();
+    this.onCusReloadList();
+  },
+
+  methods:{
+
+    parseTab(){
+      let tabs = this.tabId.split('@');
+      this.type_code = tabs[1];
+      this.search_range =  tabs[0]
+      this.is_open_city = tabs[2];
+      if(this.type_code === 'product'){
+        this.type_other = Number(tabs[3]);
+        if(this.type_other === 2) this.skeletonCount = 12
+        else this.skeletonCount = 6
+      }
+      else {
+        this.skeletonCount = 6;
+        this.type_other = null
+      }
+    },
+
+    handleClear(){
+      this.is_open_city = 'N';
+      this.dataConfig = null;
+      this.page_token = '1';
+      this.dataList = null;
+      this.productTowList = {
+        left:null,
+        right:null,
+      }
+    },
+
+    getParentMV(){
+      this.$emit('on-parent-vm', ($vm)=>{
+        this.$parentVm = $vm;
+        this.parentStatus = true;
+      })
+    },
+
+    onCusReachBottom(){
+      if(!this.page_token) return false;
+      this.getList();
+    },
+
+    //重新加载数据
+    onCusReloadList(params ={}){
+      this.handleClear();
+      this.getList();
+    },
+
+
+    getList(){
+      //无关键字不搜索
+      if(this.keyword === '') {
+        return;
+      }
+      //this.$xdShowLoading({});
+      this.$emit('on-list', {
+        params:this.getParams,
+        cb:(res)=>{
+
+          //无数据处理
+          if(res === null){
+            this.hasNoData = true;
+            this.dataList = [];
+            this.page_token = ''
+            this.$xdHideLoading();
+            return
+          }
+
+          //正常数据处理
+          this.dataConfig = res;
+
+          //整理为统一ID
+          res.items = res.items.map((item,index)=>{
+            if(!item.id){
+              item.id = item.product_id || item.resource_shop_id || item.cinema_id
+            }
+            //item.list_title = `${index} - ${ item.list_title}`
+            return item;
+          })
+
+          //商品模式并且为两列功能
+          if(this.type_code === 'product' && this.type_other === 2){
+            let right = [], left=[];
+            res.items.map((item,index) =>{
+              item.testiIndex = index
+              if(index%2===0) left.push(item);
+              else right.push(item);
+            })
+            this.productTowList = {
+              left:(this.productTowList.left ||[]).concat(left),
+              right:(this.productTowList.right ||[]).concat(right)
+            };
+          }
+          this.dataList = (this.dataList||[]).concat(res.items);
+          this.page_token = res.next_page_token
+          this.hasNoData = false;
+          this.$xdHideLoading();
+        }
+      })
+    }
+  }
+}
+</script>
+
+
+
+<style scoped lang="less">
+  .productBoxCell2 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-flow: wrap;
+  }
+  .productItemCell2 {
+
+  }
+
+  .productBox2 {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-flow: wrap;
+  }
+
+</style>