jufubao-base 1.0.169-beta1 → 1.0.169-beta11

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,153 @@
+'use strict';
+import { getContainerPropsValue } from "@/utils/xd.base";
+
+export default {
+  data(){
+    return {
+      isShowExchange:'N',
+
+      contMargin:{},
+      contRradius:'10',
+      contShadow:'',
+      contBorder:'',
+      contBgColor:'',
+      contBorderWidth: 0,
+
+      imgRradius:'10',
+
+      productConfig:null,
+    }
+  },
+  created(){
+
+  },
+  methods:{
+
+    cusInit(container){
+      this.isShowExchange = getContainerPropsValue(container, 'content.isShowExchange', 'N');
+
+      //商品相关
+      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');
+      this.productConfig = {is_show_brand,isPrice,isShowTag,isShowDiscount,isAddCart,differ,showActivityPrice}
+
+      this.brandColor = getContainerPropsValue(container, 'content.brandColor', '#aaa');
+
+      //内容
+      this.contMargin =  getContainerPropsValue(container, 'content.contMargin', {});
+      this.contRradius =  getContainerPropsValue(container, 'content.contRradius', '10');
+      this.contShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.contShadow', {}))
+      this.contBorder = this.getXdBorder({width:2,color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.contBorder', {}));
+      this.contBgColor = getContainerPropsValue(container, 'content.contBgColor', '#fff');
+      this.contObjBorder = getContainerPropsValue(container, 'content.contBorder', {});
+      if(this.contObjBorder && this.contObjBorder.type === 'Y') {
+        if(this.contObjBorder.value && this.contObjBorder.value.width) {
+          this.contBorderWidth = Number(this.contObjBorder.value.width);
+        }
+        else this.contBorderWidth = 2;
+      }
+
+      //图片
+      this.imgRradius = getContainerPropsValue(container, 'content.imgRradius', '10');
+
+    },
+
+
+    //通信相关================
+    handleParentVm(cb){
+      cb(this)
+    },
+
+    onJfbReachBottom(options) {
+      console.log('event.onJfbReachBottom', options)
+      this.$refs['customList']['onCusReachBottom'](options)
+
+    },
+
+    onCusReload() {
+      console.log('event.onCusReload', this.options)
+      this.$refs['customList']['onCusReloadList'](this.options)
+    },
+    //通信相关================
+
+    //cinema/film/shop/product
+
+    //影片列表事件
+    handleFilmDetail(film_id,film){
+      // console.warn(`toFilmInfo(影片详情).${film_id}`)
+      // if(!this.fimeDetailPath) {
+      //   console.error('未配置链接');
+      //   return;
+      // }
+      // if( this.isPreview) return;
+      // this.$xdUniHelper.navigateTo({
+      //   url: this.fimeDetailPath + `?film_id=${film_id}`
+      // })
+    },
+    handleBuy(film_id,film){
+      // console.warn(`toBuyChooseCinema(选择影院).${film_id}`)
+      // if(!this.buyPath) {
+      //   console.error('未配置链接');
+      //   return;
+      // }
+      // if( this.isPreview) return;
+      // this.$xdUniHelper.navigateTo({
+      //   url: this.buyPath + `?film_id=${film_id}`
+      // })
+    },
+    //影片列表事件
+
+    //影院列表事件
+    handleSchedule(item, cinema){
+      // console.warn(`handleSchedule(选择排期).${item.cinema_id}`)
+      // if(!this.onlinePath) {
+      //   console.error('未配置链接');
+      //   return;
+      // }
+      // if( this.isPreview) return;
+      // this.$xdUniHelper.navigateTo({
+      //   url: this.onlinePath + `?cinema_id=${item.cinema_id}`,
+      // });
+    },
+    handleCodeDetail(item, cinema){
+      // console.warn(`handleCodeDetail(选择电子码列表).${item.cinema_id}`)
+      // if(!this.codePath) {
+      //   console.error('未配置链接');
+      //   return;
+      // }
+      // if( this.isPreview) return;
+      // this.$xdUniHelper.navigateTo({
+      //   url: this.codePath + `?cinema_id=${item.cinema_id}`,
+      // });
+    },
+    handleCashierDetail(item, cinema){
+      //todo
+    },
+    //影院列表事件
+
+    //门店列表事件
+    handleShopJhd(item, shop){
+       debugger
+    },
+    handleShopDetail(item, shop){
+      debugger
+    },
+    //门店列表事件
+
+    //商品链接事件
+    handleProductDetail(item, product){
+      let url = this.checkUrlIsValid(product.detail_redirect_data)
+      if(product.detail_redirect_data) {
+
+      }
+      debugger
+    }
+    //商品链接事件
+  },
+}
+