jufubao-base 1.0.169-beta4 → 1.0.169-beta6

package/src/components/JfbBaseTfkSearch/CustomList.vue

@@ -0,0 +1,221 @@
+<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="$parentVm.productConfig !== null && type_code === 'product'"
+            :product-config="$parentVm.productConfig"
+            :out-spacing="$parentVm.outSpacing"
+          ></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
+    },
+  },
+  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>

package/src/components/JfbBaseTfkSearch/SkeletonProduct.vue

@@ -0,0 +1,166 @@
+<template>
+  <view class="skeleton-wrap-item" :class="{display: cell===1}">
+    <template v-if="cell===1">
+      <view class="image skeleton-item" :style="{marginRight:outSpacing + 'rpx'}"></view>
+      <view class="content">
+        <view class="top">
+          <view class="title skeleton-item"></view>
+          <view class="brand skeleton-item"></view>
+          <view class="tags skeleton-item"></view>
+        </view>
+        <view class="bottom">
+          <view class="price skeleton-item"></view>
+          <view class="orgPrice skeleton-item"></view>
+          <view class="cart skeleton-item"></view>
+        </view>
+      </view>
+    </template>
+    <template v-if="cell===2">
+
+    </template>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "SkeletonProduct",
+  props:{
+    outSpacing:{
+      type: Number|String,
+      default:20
+    },
+    cell:{
+      type: Number|String,
+      required: true
+    },
+    productConfig:{
+      type:Object|null,
+      default: null
+    },
+  }
+}
+</script>
+
+
+
+<style scoped lang="less">
+.skeleton-wrap-item {
+  min-height: 200rpx;
+
+  &.display {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-content: space-between;
+
+    & .image {
+      .skeleton-item(200rpx, 200rpx);
+    }
+
+    & .content {
+      flex: 1;
+      min-height: 200rpx;
+
+      .top {
+        height: 140rpx;
+
+        & .title {
+          .skeleton-item(100%, 60rpx);
+        }
+      }
+      .bottom {
+        display: flex;
+        justify-content: flex-start;
+        align-content: center;
+        align-items: center;
+        width: 100%;
+        height: 60rpx;
+
+        & .price {
+          flex-shrink: 0;
+          .skeleton-item(100rpx, 35rpx);
+        }
+
+        & .orgPrice {
+          flex-shrink: 0;
+          margin-left: 20rpx;
+          .skeleton-item(130rpx, 20rpx);
+        }
+      }
+    }
+  }
+
+
+
+  //影片列表骨架
+  &-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>