jufubao-base 1.0.169-beta2 → 1.0.169-beta21

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,246 @@
+<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" v-if="productConfig.is_show_brand==='Y'"></view>
+          <view class="tags">
+            <view  class="skeleton-item" v-if="productConfig.showActivityPrice==='Y'"></view>
+            <template v-if="productConfig.isShowTag==='Y'">
+              <view class="skeleton-item"></view>
+              <view class="skeleton-item"></view>
+              <view class="skeleton-item"></view>
+            </template>
+          </view>
+        </view>
+        <view class="bottom">
+          <view class="price skeleton-item" v-if="productConfig.isPrice==='Y'"></view>
+          <view class="orgPrice skeleton-item" v-if="productConfig.isPrice==='Y' && productConfig.isShowDiscount === 'Y'"></view>
+          <view class="cart">
+            <view class="skeleton-item" v-if="productConfig.isAddCart === 'Y'"></view>
+          </view>
+        </view>
+      </view>
+    </template>
+    <template v-if="cell===2">
+      <view class="image2 skeleton-item" :style="{marginBottom:outSpacing + 'rpx', height: height + 'rpx'}"></view>
+      <view class="content2">
+        <view class="top">
+          <view class="title skeleton-item"></view>
+          <view class="brand skeleton-item" v-if="productConfig.is_show_brand==='Y'"></view>
+          <view class="tags">
+            <view  class="skeleton-item" v-if="productConfig.showActivityPrice==='Y'"></view>
+            <template v-if="productConfig.isShowTag==='Y'">
+              <view class="skeleton-item"></view>
+              <view class="skeleton-item"></view>
+              <view class="skeleton-item"></view>
+            </template>
+          </view>
+        </view>
+        <view class="bottom">
+          <view class="price skeleton-item" v-if="productConfig.isPrice==='Y'"></view>
+          <view class="orgPrice skeleton-item" v-if="productConfig.isPrice==='Y' && productConfig.isShowDiscount === 'Y'"></view>
+          <view class="cart">
+            <view class="skeleton-item" v-if="productConfig.isAddCart === 'Y'"></view>
+          </view>
+        </view>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "SkeletonProduct",
+  props:{
+    outSpacing:{
+      type: Number|String,
+      default:20
+    },
+    cell:{
+      type: Number|String,
+      required: true
+    },
+    height:{
+      type: Number|String,
+      default:''
+    },
+    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);
+
+        }
+
+        & .brand {
+          margin-top: 10rpx;
+          .skeleton-item(70%, 25rpx);
+        }
+
+        .tags {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-flow: wrap;
+          margin-top: 10rpx;
+
+          & > view {
+            .skeleton-item(80rpx, 30rpx);
+            margin-left: 10rpx;
+            &:first-child {
+              margin-left: 0;
+              width: 120rpx;
+            }
+          }
+        }
+      }
+
+      .bottom {
+        display: flex;
+        justify-content: flex-end;
+        align-content: center;
+        align-items: center;
+        width: 100%;
+        height: 40rpx;
+        margin-top: 20rpx;
+
+        & .price {
+          flex-shrink: 0;
+          .skeleton-item(120rpx, 35rpx);
+        }
+
+        & .orgPrice {
+          flex-shrink: 0;
+          margin-left: 20rpx;
+          .skeleton-item(130rpx, 20rpx);
+        }
+
+        & .cart {
+          flex: 1;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          & > view {
+            .skeleton-item(40rpx, 40rpx);
+          }
+        }
+      }
+    }
+  }
+
+  & .image2 {
+    .skeleton-item();
+  }
+
+  & .content2 {
+    flex: 1;
+
+    .top {
+      min-height: 140rpx;
+
+      & .title {
+        .skeleton-item(100%, 60rpx);
+
+      }
+
+      & .brand {
+        margin-top: 10rpx;
+        .skeleton-item(70%, 25rpx);
+      }
+
+      .tags {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-flow: wrap;
+        margin-top: 10rpx;
+
+
+        & > view {
+          .skeleton-item(80rpx, 30rpx);
+          margin-right: 10rpx;
+
+          &:first-child {
+            margin-right: 0;
+            width: 120rpx;
+          }
+
+          &:nth-child(4) {
+            margin-top: 10rpx;
+          }
+          &:nth-child(5) {
+            margin-top: 10rpx;
+          }
+          &:nth-child(6) {
+            margin-top: 10rpx;
+          }
+        }
+      }
+    }
+
+    .bottom {
+      display: flex;
+      justify-content: flex-end;
+      align-content: center;
+      align-items: center;
+      width: 100%;
+      height: 40rpx;
+      margin-top: 20rpx;
+
+      & .price {
+        flex-shrink: 0;
+        .skeleton-item(100rpx, 35rpx);
+      }
+
+      & .orgPrice {
+        flex-shrink: 0;
+        margin-left: 20rpx;
+        .skeleton-item(100rpx, 20rpx);
+      }
+
+      & .cart {
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        & > view {
+          .skeleton-item(40rpx, 40rpx);
+        }
+      }
+    }
+  }
+
+}
+</style>

package/src/components/JfbBaseTfkSearch/SkeletonShop.vue

@@ -0,0 +1,81 @@
+<template>
+  <view class="skeleton-wrap-item">
+    <view class="image  skeleton-item" :style="{marginRight: outSpacing + 'rpx'}"></view>
+    <view class="content">
+      <view class="title">
+        <view class="title-left skeleton-item"></view>
+        <view class="title-right skeleton-item"></view>
+      </view>
+      <view class="address skeleton-item"></view>
+      <view class="phone skeleton-item"></view>
+      <view class="btn">
+        <view class="skeleton-item"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "SkeletonShop",
+  props:{
+    outSpacing:{
+      type: Number|String,
+      default:20
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.skeleton-wrap-item {
+  height: 200rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  & > .image {
+    .skeleton-item(200rpx, 200rpx);
+    flex-shrink: 0;
+  }
+
+  .content {
+    height: 100%;
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20rpx;
+
+      &-left {
+        flex: 1;
+        margin-right: 20rpx;
+        .skeleton-item(100%, 40rpx);
+      }
+      &-right {
+        flex-shrink: 0;
+        .skeleton-item(100rpx, 30rpx);
+      }
+    }
+
+    flex: 1;
+    .address {
+      margin-bottom: 10rpx;
+      .skeleton-item(100%, 30rpx);
+    }
+    .phone {
+      margin-bottom: 10rpx;
+      .skeleton-item(100%, 30rpx);
+    }
+    .btn {
+      display: flex;
+      justify-content: flex-end;
+
+      .skeleton-item {
+        .skeleton-item(100rpx, 50rpx)
+      }
+    }
+  }
+}
+</style>

package/src/components/JfbBaseTfkSearch/handleKeyword.js

@@ -0,0 +1,24 @@
+'use strict';
+
+export default ($vm, str , keyword='', options={})=>{
+  if(keyword === '') return  str;
+  try {
+    let __option = {
+      tag: 'text',
+      color: 'red',
+      weight: '500',
+    };
+    if ($vm.$xdUniHelper.checkVarType(keyword) === 'array') {
+      keyword = keyword.join('|');
+    } else if ($vm.$xdUniHelper.checkVarType(keyword) === 'string') {
+      keyword = keyword.trim();
+    }
+    let opt = Object.assign({}, __option, options);
+    let reg = new RegExp(`(${keyword})`, 'ig');
+    return str.replace(reg, `<${opt.tag} style="color:${opt.color};font-weight: ${opt.weight}">$1</${opt.tag}>`);
+  } catch (e) {
+    console.error(e)
+    return str;
+  }
+}
+

package/src/components/JfbBaseTfkSearch/listMixins.js

@@ -0,0 +1,187 @@
+'use strict';
+import { getContainerPropsValue } from "@/utils/xd.base";
+
+export default {
+  data(){
+    return {
+      listItemStyle:null,
+      productConfig:null,
+    }
+  },
+  created(){
+
+  },
+  methods:{
+
+    cusInit(container){
+
+      //商品相关
+      let is_show_brand = getContainerPropsValue(container, 'content.is_show_brand', 'N');
+      let isPrice = getContainerPropsValue(container, 'content.isPrice', "Y");
+      let isShowTag = getContainerPropsValue(container, 'content.isShowTag', "Y");
+      let isShowDiscount = getContainerPropsValue(container, 'content.isShowDiscount', "Y");
+      let isAddCart = getContainerPropsValue(container, 'content.isAddCart', "Y");
+      let differ = getContainerPropsValue(container, 'content.differ', 1);
+      let showActivityPrice = getContainerPropsValue(container, 'content.showActivityPrice', 'N');
+      let isShowExchange = getContainerPropsValue(container, 'content.isShowExchange', 'N');
+      this.productConfig = {is_show_brand, isPrice, isShowTag, isShowDiscount, isAddCart, differ, showActivityPrice, isShowExchange};
+
+      //内容
+      let brandColor = getContainerPropsValue(container, 'content.brandColor', '#aaa');
+      let imgRradius = getContainerPropsValue(container, 'content.imgRradius', '10');
+      let contMargin =  getContainerPropsValue(container, 'content.contMargin', {});
+      let contRradius =  getContainerPropsValue(container, 'content.contRradius', '10');
+      let contShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.contShadow', {}))
+      let contBorder = this.getXdBorder({width:2,color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.contBorder', {}));
+      let contBgColor =  getContainerPropsValue(container, 'content.contBgColor', '#fff');
+      let contObjBorder = getContainerPropsValue(container, 'content.contBorder', {});
+      let contBorderWidth = 0
+      if(contObjBorder && contObjBorder.type === 'Y') {
+        if(contObjBorder.value && contObjBorder.value.width) {
+          contBorderWidth = Number(contObjBorder.value.width);
+        }
+        else contBorderWidth = 2;
+      }
+      this.listItemStyle = {
+        outSpacing: this.outSpacing,
+        mainColor: this.mainColor,
+        subMainColor: this.subMainColor,
+        successColor: this.successColor,
+        brandColor,imgRradius,contMargin,contRradius,contShadow,contBorder,contBgColor,contObjBorder,contBorderWidth}
+    },
+
+    filtersResData(res){
+      let list = res.list.filter(item=>{
+        return item.items.length > 0
+      });
+      if(res.list.length  === list.length) return res;
+      let tabs = list.map(item=>{
+        return {
+          label: item.name,
+          value: item.tab
+        }
+      });
+      return {...res, list, tabs}
+    },
+
+
+    //通信相关================
+    handleParentVm(cb){
+      cb(this.emitParent.options.getParent)
+    },
+
+    onJfbReachBottom(options) {
+      if(this.tabId !== "all") {
+        this.$refs['customList']['onCusReachBottom'](options)
+      }
+    },
+
+    onCusReload() {
+      this.$refs['customList']['onCusReloadList'](this.options)
+    },
+    //通信相关================
+
+    //cinema/film/shop/product
+
+    //影片列表事件
+    handleFilmDetail(item,film){
+      console.warn(`handleFilmDetail(影片详情).${item.film_id}`)
+      this.checkUrlError(item, film,(url)=>{
+        url = url + `?film_id=${item.film_id}`;
+        console.warn(`handleFilmDetail.url:${url}`)
+        this.toLink(url)
+      },'detail1_redirect_data');
+    },
+    handleBuy(item,film){
+      console.warn(`handleBuy(购买详情).${item.film_id}`)
+      this.checkUrlError(item, film,(url)=>{
+        url = url + `?film_id=${item.film_id}`;
+        console.warn(`handleBuy.url:${url}`)
+        this.toLink(url)
+      });
+    },
+    //影片列表事件
+
+    //影院列表事件
+    handleSchedule(item, cinema){
+      console.warn(`handleSchedule(去排期页面).${item.cinema_id}`);
+      this.checkUrlError(item, cinema,(url)=>{
+        url = url + `?cinema_id=${item.cinema_id}`;
+        console.warn(`handleSchedule.url:${url}`)
+        this.toLink(url)
+      });
+    },
+    handleCodeDetail(item, cinema){
+      console.warn(`handleCodeDetail(电子列表).${item.cinema_id}`);
+      this.checkUrlError(item, cinema,(url)=>{
+        url = url + `?cinema_id=${item.cinema_id}`;
+        console.warn(`handleSchedule.url:${url}`)
+        this.toLink(url)
+      },'detail1_redirect_data');
+    },
+    handleCashierDetail(item, cinema){
+      //todo
+    },
+    //影院列表事件
+
+    //门店列表事件
+    handleShopJhd(item, shop){
+      console.warn(`handleShopJhd(去核销).${item.resource_shop_name}`)
+      this.checkUrlError(item, shop,(url)=>{
+        let params = {
+          'x-params':Base64.encodeURI(`shop_id:${item.shop_id}`),
+          'x-jfb-os':'jhd',
+        }
+        params = this.$xdUniHelper.jsonToParams(params);
+        url = url + `?${params}`;
+        console.warn(`handleShopJhd.url:${url}`)
+        this.toLink(url)
+      },'detail1_redirect_data');
+    },
+    handleShopDetail(item, shop){
+      console.warn(`handleShopDetail(店铺详情).${item.resource_shop_name}`)
+      this.checkUrlError(item, shop,(url)=>{
+        url = url + `?resource_shop_id=${item.resource_shop_id}`;
+        if(item['exts_params']) {
+          url = url + `&exts_params=${item['exts_params']}`
+        }
+        console.warn(`handleShopDetail.url:${url}`)
+        this.toLink(url)
+      });
+    },
+    //门店列表事件
+
+    //商品链接事件
+    handleProductDetail(item, product){
+      console.warn(`handleProductDetail(商品详情).${item.product_id}`)
+      this.checkUrlError(item, product,(url)=>{
+        url = url + `?product_id=${item.product_id}`;
+        console.warn(`handleProductDetail.url:${url}`)
+        this.toLink(url)
+      });
+    },
+    //商品链接事件
+
+    //检查错误跳转
+    checkUrlError(item, config, cb , key='detail_redirect_data'){
+      if(!config[key]) {
+        console.error('未配置链接');
+        return false;
+      }
+      if( this.isPreview) return false;
+      let url = this.checkUrlIsValid(config[key]);
+      if(url === null) {
+        console.error('配置链接格式错误');
+        console.warn(`配置链接：${config[key]}`);
+        return false;
+      }
+      cb(url)
+    },
+
+    //跳转页面
+    toLink(url) {
+      this.$xdUniHelper.navigateTo({url});
+    }
+  },
+}
+