jufubao-base 1.0.169-beta4 → 1.0.169-beta5

package/src/components/JfbBaseTfkSearch/CusAttr.js

@@ -0,0 +1,201 @@
+'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-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',
+    },
+    {
+      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,229 @@
+<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',
+            border:$parentVm.contBorder,
+            boxShadow:$parentVm.contShadow,
+            backgroundColor:$parentVm.contBgColor,
+            width: (type_code === 'product' && type_other === 2) ? (outItemProduct + 'rpx'): 'auto',
+          }"
+        >
+          <skeleton-product
+            :cell="type_other"
+            v-if="type_code === 'product'"
+            :product-config="productConfig"
+          ></skeleton-product>
+          <skeleton-shop v-if="type_code === 'show'" :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></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";
+
+export default {
+  name: "CustomList",
+  components: {
+    SkeletonProduct,
+    SkeletonCinema,
+    SkeletonFilm,
+    SkeletonShop
+  },
+  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.is_open_city ==='Y' && this.stateCity && this.stateCity.city_code) {
+        params['city_code'] = this.stateCity.city_code;
+      }
+
+      //设置经纬度
+      if(this.type_code === 'shop' || this.type_code === 'cinema') {
+        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
+    },
+    productConfig(){
+      if(this.$parentVm === null) {
+        return null
+      }
+      return {
+        is_show_brand: this.$parentVm.is_show_brand,
+
+      }
+    }
+  },
+  data(){
+    return {
+      $parentVm:null,
+      parentStatus: false,
+      skeletonCount: 10,
+
+      page_token:'1',
+      page_size: 20,
+
+      //参数
+      type_code:'',
+      search_range:'',
+      type_other:null,
+      is_open_city:'N',
+
+
+      //列表数据
+      dataList: null,
+      timer:null,
+      config: {},
+    }
+  },
+
+  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 = 20
+      }
+      else this.type_other = null
+    },
+
+    handleClear(){
+      this.page_token = '1';
+      this.dataList = 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(){
+      this.$xdShowLoading({});
+      this.$emit('on-list', {
+        params:this.getParams,
+        cb:(res)=>{
+          this.$xdHideLoading();
+        }
+      })
+    }
+  }
+}
+</script>
+
+
+
+<style scoped lang="less">
+  .productBoxCell2 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-flow: wrap;
+  }
+  .productItemCell2 {
+
+  }
+</style>

package/src/components/JfbBaseTfkSearch/JfbBaseTfkSearch.vue

@@ -14,7 +14,17 @@
     </view>
     <!-- #endif -->
     <view class="jfb-base-tfk-search__body">
-      <view>测试插件( {{containerId}} )</view>
+      <view class="x-line"></view>
+      <view class="tfk-search" :style="{padding: outSpacing + 'rpx'}">
+        <view>测试插件( {{containerId}} )</view>
+        <custom-list
+          :tab-id="tabId"
+          :keyword="keyword"
+          ref="customList"
+          @on-parent-vm="handleParentVm"
+          @on-list="handleList"
+        ></custom-list>
+      </view>
     </view>
   </view>
 </template>
@@ -26,34 +36,60 @@
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
+  import listMixins from "./listMixins";
+  import CustomList from "./CustomList.vue";
+  import search from './search';
+
   export default {
     name: "JfbBaseTfkSearch",
     components: {
+      CustomList,
       XdFontIcon
     },
     mixins: [
-      componentsMixins, extsMixins, JfbBaseTfkSearchMixin
+      componentsMixins, extsMixins, JfbBaseTfkSearchMixin,listMixins
     ],
     data() {
       return {
+        hideMask: true,
+        tabId: '1@product@Y@1',
+        keyword: '',
+        options:{},
+
 
-        //todo
+        //公共样式
+        outSpacing:20,
       }
     },
     watch: {
       container(value, oldValue) {
         if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
-        if (this.$configProject['isPreview']) this.init(value)
+        if (this.$configProject['isPreview']){
+          this.cusInit(value)
+          this.init(value);
+        }
       },
     },
     created() {
+      this.cusInit(this.container);
       this.init(this.container);
-
-      //todo
     },
+
     methods: {
-      onJfbLoad(options) {
+      /**
+       * @description 获取数据列表
+       * @param params
+       * @param cb {Function}
+       */
+      handleList({params, cb}){
+        let time = this.$xdUniHelper.random(8,20) * 100;
+        setTimeout(()=>{
+          cb(search)
+        }, time)
+      },
 
+      onJfbLoad(options) {
+        this.options = options;
         // jfbRootExec('baiduUserLogin', {
 
         //   vm: this,//   data: {
@@ -69,17 +105,13 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
-
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
+        this.outSpacing =  getContainerPropsValue(container, 'content.outSpacing', '20');
       },
+
       onJfbScroll(options) {
         console.log('event.onJfbScroll', options)
       },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
-      },
+
       onJfbShow(options) {
         console.log('event.onJfbShow', options)
       },

package/src/components/JfbBaseTfkSearch/SkeletonCinema.vue

@@ -0,0 +1,46 @@
+<template>
+  <view class="skeleton-wrap-item">
+    <view class="title skeleton-item"></view>
+    <view class="address skeleton-item"></view>
+    <view class="bottom">
+      <view class="local skeleton-item"></view>
+      <view class="btn skeleton-item"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "SkeletonCinema"
+}
+</script>
+
+<style scoped lang="less">
+.skeleton-wrap-item {
+  height: 220rpx;
+  display: block;
+
+  & > .title {
+    .skeleton-item(100%, 60rpx);
+    margin-bottom: 20rpx;
+  }
+  & > .address {
+    .skeleton-item(100%, 40rpx);
+    margin-bottom: 20rpx;
+  }
+  & > .bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 30rpx;
+
+    & > .local {
+      .skeleton-item(120rpx, 30rpx);
+    }
+    & > .btn {
+      .skeleton-item(150rpx, 60rpx);
+    }
+  }
+}
+</style>
+

package/src/components/JfbBaseTfkSearch/SkeletonFilm.vue

@@ -0,0 +1,109 @@
+<template>
+  <view class="skeleton-wrap-item">
+    <view class="skeleton-wrap-item-image skeleton-item" :style="{marginRight:outSpacing + 'rpx'}"></view>
+    <view class="skeleton-wrap-item-title">
+      <view class="title skeleton-item"></view>
+      <view class="type skeleton-item"></view>
+      <view class="director skeleton-item"></view>
+      <view class="star skeleton-item"></view>
+    </view>
+    <view class="skeleton-wrap-item-btn skeleton-item" :style="{marginLeft:outSpacing + 'rpx'}">
+      <view class="score skeleton-item"></view>
+      <view class="btn skeleton-item"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "SkeletonFilm",
+  props:{
+    outSpacing:{
+      type: Number|String,
+      default:20
+    }
+  }
+}
+</script>
+
+
+
+<style scoped lang="less">
+.skeleton-wrap-item {
+  height: 240rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  //影片列表骨架
+  &-image {
+    .skeleton-item(160rpx, 240rpx);
+    flex-shrink: 0;
+    margin-right: 20rpx;
+  }
+
+  &-title {
+    flex: 1;
+
+    .title {
+      .skeleton-item(100%, 50rpx);
+      margin-bottom: 20rpx;
+    }
+
+    .director,.star,.type  {
+      .skeleton-item(100%, 40rpx);
+      margin-bottom: 10rpx;
+    }
+  }
+
+  &-btn {
+    display: flex;
+    align-content: space-between;
+    align-items: flex-end;
+    justify-content: flex-end;
+    flex-flow: wrap;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 10rpx 0;
+    width: 130rpx;
+    flex-shrink: 0;
+
+    & > .score {
+      .skeleton-item(100rpx, 40rpx);
+    }
+    & > .btn {
+      .skeleton-item(130rpx, 60rpx);
+    }
+  }
+
+  &:last-child {
+    margin-bottom: 0!important;
+  }
+
+  //影院列表骨架
+  &.list {
+    display: block;
+  }
+  & > .title {
+    .skeleton-item(100%, 60rpx);
+    margin-bottom: 20rpx;
+  }
+  & > .address {
+    .skeleton-item(100%, 40rpx);
+    margin-bottom: 20rpx;
+  }
+  & > .bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 30rpx;
+
+    & > .local {
+      .skeleton-item(120rpx, 30rpx);
+    }
+    & > .btn {
+      .skeleton-item(150rpx, 70rpx);
+    }
+  }
+}
+</style>