jufubao-base 1.0.169-beta2 → 1.0.169-beta21

package/src/components/JfbBaseTfkSearch/CusAttr.js

@@ -0,0 +1,213 @@
+'use strict';
+export default (data)=>{
+  return [
+    {
+      ele: 'title',
+      label: '商品搜索相关设置',
+      size: 'small',
+      groupKey:'content',
+    },
+    {
+      label: '是否展示品牌:',
+      ele: 'xd-radio',
+      valueKey: 'is_show_brand',
+      value: data['is_show_brand'] || 'N',
+      placeholder: '请选择是否展示品牌',
+      multiple: false,
+      className: 'input80',
+      groupKey:'content',
+      list: [
+        {label: '是', value: 'Y'},
+        {label: '否', value: 'N'},
+      ]
+    },
+    {
+      label: "可否直接加入购物车",
+      ele: "xd-radio",
+      valueKey: "isAddCart",
+      groupKey:'content',
+      value: data['isAddCart'] || 'Y',
+      list: [
+        {label: "是", value: 'Y'},
+        {label: "否", value: 'N'}
+      ]
+    },
+    {
+      label: '是否显示价格:',
+      ele: 'xd-radio',
+      groupKey:'content',
+      valueKey: 'isPrice',
+      value: data['isPrice'] || 'Y',
+      placeholder: '请选择是否显示价格',
+      multiple: false,
+      className: 'input80',
+      list: [
+        {label: '是', value: 'Y'},
+        {label: '否', value: 'N'},
+      ]
+    },
+    data['isPrice']==='Y'&&{
+      label: '是否展示原价:',
+      ele: 'xd-radio',
+      groupKey:'content',
+      valueKey: 'isShowDiscount',
+      value: data['isShowDiscount'] || "Y",
+      rules: [
+        {required: true, message: '请选择', trigger: ['blur', 'change']}
+      ],
+      list: [
+        {"label": "显示", "value": "Y"},
+        {"label": "隐藏", "value": "N"},
+      ]
+    },
+    data['isShowDiscount']==='Y'&&{
+      label: '市场价减去售价大于多少展示:',
+      ele: 'el-input',
+      type: 'number',
+      valueKey: 'differ',
+      value: data['differ'] || '',
+      groupKey:'content',
+      placeholder: '价差',
+      className: 'input80',
+    },
+    data['isPrice']==='Y'&&{
+      label: '是否标明活动价:',
+      ele: 'xd-radio',
+      valueKey: 'showActivityPrice',
+      value: data['showActivityPrice'] || 'N',
+      placeholder: '请选择是否标明活动价',
+      groupKey:'content',
+      multiple: false,
+      className: 'input80',
+      list: [
+        {label: '是', value: 'Y'},
+        {label: '否', value: 'N'},
+      ]
+    },
+    {
+      label: '是否显示标签:',
+      ele: 'xd-radio',
+      valueKey: "isShowTag",
+      value: data['isShowTag'] || 'N',
+      groupKey:'content',
+      list: [
+        {label: '是', value: 'Y'},
+        {label: '否', value: 'N'},
+      ]
+    },
+
+    {
+      ele: 'title',
+      label: '列表样式设置',
+      size: 'small',
+      groupKey:'style',
+    },
+    {
+      label: '商品的品牌文字颜色:',
+      ele: 'xd-color',
+      valueKey: 'brandColor',
+      value: data['brandColor'] || '',
+      placeholder: '请选择商品的品牌文字颜色',
+      classNmae: 'input80',
+      groupKey:'style',
+    },
+
+    {
+      label: '填充设置:',
+      ele: 'xd-margin-padding',
+      groupKey:'style',
+      valueKey: 'contMargin',
+      value: data['contMargin'] || null,
+      setting: {
+        type: 'margin',
+      },
+      inline: false,
+      notice: '填充设置，单位：<span style="color: red">像素</span>。默认值：<span style="color: red">20</span> 像素',
+    },
+    {
+      label: '背景颜色:',
+      ele: 'xd-color',
+      valueKey: 'contBgColor',
+      value: data['contBgColor'] || '',
+      placeholder: '请选择背景颜色',
+      classNmae: 'input80',
+      groupKey:'style',
+      inline: false,
+      notice:'背景颜色值建议使用相对浅色系色值',
+    },
+    {
+      label: '当前投影设置:',
+      ele: 'xd-shadow',
+      groupKey:'style',
+      valueKey: 'contShadow',
+      value: data['contShadow'] || '',
+      setting: {
+        selected: 'N',
+      },
+      handleCustom({action, data}) {
+        XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
+          .then(res => {
+            data.cb(res.list)
+          })
+          .catch(error => {
+            console.error(error);
+            data.cb([])
+          });
+      },
+    },
+    {
+      label: '当前边框设置:',
+      ele: 'xd-border',
+      groupKey:'style',
+      valueKey: 'contBorder',
+      value: data['contBorder'] || '',
+      setting: {
+        selected:'N'
+      },
+    },
+    {
+      label: '圆角设置:',
+      ele: 'xd-site-select-list',
+      valueKey: 'contRradius',
+      value: data['contRradius'] || '10',
+      groupKey:'style',
+      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',
+      groupKey:'style',
+    },
+    {
+      label: '圆角设置:',
+      ele: 'xd-site-select-list',
+      valueKey: 'imgRradius',
+      value: data['imgRradius'] || '10',
+      groupKey:'style',
+      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);
+          });
+      },
+    },
+  ]
+}

package/src/components/JfbBaseTfkSearch/CustomList.vue

@@ -0,0 +1,453 @@
+<template>
+  <view class="custom-list" v-if="parentStatus">
+    <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:listItemStyle.outSpacing + 'rpx',
+            padding:contMarginComp,
+            borderRadius:listItemStyle.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="productConfig !== null && type_code === 'product'"
+            :product-config="productConfig"
+            :out-spacing="listItemStyle.outSpacing"
+            :height="outItemProduct"
+          ></skeleton-product>
+          <skeleton-shop v-if="type_code === 'shop'" :out-spacing="listItemStyle.outSpacing"></skeleton-shop>
+          <skeleton-film v-if="type_code === 'film'" :out-spacing="listItemStyle.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.cuid"
+          :style="{
+            marginBottom:listItemStyle.outSpacing + 'rpx',
+            padding:contMarginComp,
+            borderRadius:listItemStyle.contRradius+ 'rpx',
+            border: listItemStyle.contBorder,
+            boxShadow:listItemStyle.contShadow,
+            width: (type_code === 'product' && type_other === 2) ? (outItemProduct + 'rpx'): 'auto',
+            height: heightRpx,
+            backgroundColor: listItemStyle.contBgColor
+          }"
+        >
+          <content-film
+            type="hot"
+            v-if="type_code === 'film'"
+            style="width: 100%; height: 100%"
+            :keyword="keyword"
+            :item="item"
+            :out-spacing="listItemStyle.outSpacing"
+            :color="listItemStyle.mainColor"
+            :border-radius="listItemStyle.imgRradius"
+            @on-film-detail="handleFilmDetail"
+            @on-buy="handleBuy"
+          ></content-film>
+          <content-cinema
+            v-if="type_code === 'cinema'"
+            style="width: 100%;height: 100%"
+            type="list"
+            :keyword="keyword"
+            :item="item"
+            :out-spacing="listItemStyle.outSpacing"
+            :color="{SEAT:listItemStyle.mainColor,CODE:listItemStyle.subMainColor,SELL:listItemStyle.successColor}"
+            :border-radius="listItemStyle.imgRradius"
+            @on-schedule="handleSchedule"
+            @on-cashier-detail="handleCashierDetail"
+            @on-code-detail="handleCodeDetail"
+          ></content-cinema>
+          <content-shop
+            v-if="type_code === 'shop'"
+            style="width: 100%; height: 100%"
+            :keyword="keyword"
+            :out-spacing="listItemStyle.outSpacing"
+            :item="item"
+            :color="listItemStyle.mainColor"
+            :border-radius="listItemStyle.imgRradius"
+            :is-echange="'Y' || listItemStyle.isShowExchange"
+            @on-shop-jhd="handleShopJhd"
+            @on-shop-detail="handleShopDetail"
+          ></content-shop>
+          <content-product
+            v-if="productConfig !== null && type_code === 'product'"
+            style="width: 100%; height: 100%"
+            :keyword="keyword"
+            :product-config="productConfig"
+            :out-spacing="listItemStyle.outSpacing"
+            :item="item"
+            :brand-color="listItemStyle.brandColor"
+            :color="listItemStyle.mainColor"
+            :border-radius="listItemStyle.imgRradius"
+            :cell="type_other"
+            @on-product-detail="handleProductDetail"
+          ></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.cuid"
+            :style="{
+              marginBottom:listItemStyle.outSpacing + 'rpx',
+              padding:contMarginComp,
+              borderRadius:listItemStyle.contRradius+ 'rpx',
+              border: listItemStyle.contBorder,
+              boxShadow:listItemStyle.contShadow,
+              width: (type_code === 'product' && type_other === 2) ? (outItemProduct + 'rpx'): 'auto',
+              height: heightRpx,
+              backgroundColor: listItemStyle.contBgColor
+            }"
+          >
+            <content-product
+
+              v-if="productConfig !== null"
+              style="width: 100%; height: 100%"
+              :keyword="keyword"
+              :product-config="productConfig"
+              :out-spacing="listItemStyle.outSpacing"
+              :item="item"
+              :height="outItemProduct"
+              :color="listItemStyle.mainColor"
+              :brand-color="listItemStyle.brandColor"
+              :border-radius="listItemStyle.imgRradius"
+              :cell="type_other"
+              @on-product-detail="handleProductDetail"
+            ></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:'',
+    },
+    listItemStyle:{
+      type:Object|null,
+      default:null,
+    },
+    productConfig:{
+      type:Object|null,
+      default:null,
+    },
+    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(){
+      if(this.getParent === null) return 0
+      let str = `${this.getParent().checkValue(this.listItemStyle.contMargin.top, 20)}rpx`;
+      str = `${str} ${this.getParent().checkValue(this.listItemStyle.contMargin.right, 20)}rpx`;
+      str = `${str} ${this.getParent().checkValue(this.listItemStyle.contMargin.bottom, 20)}rpx`;
+      str = `${str} ${this.getParent().checkValue(this.listItemStyle.contMargin.left, 20)}rpx`;
+      return str
+    },
+    outItemProduct(){
+      if(this.getParent === null) return 0
+      //获取每列元素最大宽度
+      let num = (750 - 3 * Number(this.listItemStyle.outSpacing))/2;
+      num = num - this.getParent().checkValue(this.listItemStyle.contMargin.right, 20) - this.getParent().checkValue(this.listItemStyle.contMargin.left, 20);
+      return num - this.listItemStyle.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 {
+      /**@type Function|null**/
+      getParent: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.handleClear();
+      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];
+      if(this.type_code === 'product'){
+        this.type_other = Number(tabs[3]);
+        if(this.type_other === 2) this.skeletonCount = 6
+        else this.skeletonCount = 6
+      }
+      else {
+        this.skeletonCount = 6;
+        this.type_other = null
+      }
+      this.search_range =  tabs[0]
+      this.is_open_city = tabs[2];
+    },
+
+    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', (getParent)=>{
+        this.getParent = getParent;
+        this.parentStatus = true;
+      })
+    },
+
+    onCusReachBottom(){
+      if(this.dataList === null || !this.page_token) return false;
+      this.getList();
+    },
+
+    //重新加载数据
+    onCusReloadList(params ={}){
+      this.handleClear();
+      this.getList();
+    },
+
+    getList(){
+      let time = new Date().getTime();
+
+      //无关键字不搜索
+      if(this.keyword === '') {
+        return;
+      }
+      //this.$xdShowLoading({});
+      this.$emit('on-list', {
+        params:this.getParams,
+        cb:(res)=>{
+          console.log(new Date().getTime()-time);
+          //无数据处理
+          if(res === null){
+            this.hasNoData = true;
+            this.dataList = [];
+            this.page_token = '1'
+            this.$xdHideLoading();
+            return
+          }
+
+          //正常数据处理
+          this.dataConfig = res;
+
+          //整理为统一ID
+          res.items = res.items.map((item,index)=>{
+            item.cuid = `${this.$xdUniHelper.randomChar(5)}_${item.product_id || item.resource_shop_id || item.cinema_id || item.film_id}`
+            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.$nextTick(()=>{
+            setTimeout(()=>{
+              this.$xdHideLoading();
+            },300)
+          })
+        }
+      })
+    },
+
+    //影片
+    handleFilmDetail(film){
+      this.getParent().handleFilmDetail(film, this.dataConfig)
+    },
+    handleBuy(film){
+      this.getParent().handleBuy(film, this.dataConfig)
+    },
+
+    //影院
+    handleSchedule(cinema){
+      this.getParent().handleSchedule(cinema, this.dataConfig)
+    },
+    handleCashierDetail(cinema){
+      this.getParent().handleCashierDetail(cinema, this.dataConfig)
+    },
+    handleCodeDetail(cinema){
+      this.getParent().handleCodeDetail(cinema, this.dataConfig)
+    },
+
+    //门店
+    handleShopJhd(shop){
+      this.getParent().handleShopJhd(shop, this.dataConfig)
+    },
+    handleShopDetail(shop){
+      this.getParent().handleShopDetail(shop, this.dataConfig)
+    },
+
+    //商品
+    handleProductDetail(product){
+      this.getParent().handleProductDetail(product, this.dataConfig)
+    },
+
+  }
+}
+</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>