jufubao-takeorder 1.0.1

package/src/components/CusShops/CusShops.vue

@@ -0,0 +1,717 @@
+
+<template>
+  <view :style="[{'--main-color': mainColor,'--sub-main-color': subMainColor},activeComp]">
+    <view class="shopping-ske-box" v-if="dataShopList ===null">
+      <view
+        class="shopping-ske-item"
+        v-for="item in skeNumComp"
+        :key="item"
+        :style="[cusStyle['item']||{}]"
+      >
+        <view class="shopping-ske-image" v-if="image">
+          <view></view>
+        </view>
+        <view class="shopping-ske-cont">
+          <view class="shopping-ske-name"></view>
+          <view class="shopping-ske-address">
+            <view class="address" v-if="address"></view>
+            <view class="shopping-ske-v2" v-if="layout === 'v2'">
+              <view>
+                <view class="ske1"></view>
+                <view class="ske2"></view>
+                <view class="ske3"></view>
+                <view class="ske4"></view>
+              </view>
+              <view>
+                <view class="ske1"></view>
+                <view class="ske2"></view>
+                <view class="ske3"></view>
+              </view>
+            </view>
+          </view>
+          <view class="shopping-ske-v3" v-if="layout === 'v3'">
+            <view></view>
+            <view>
+              <view></view>
+              <view></view>
+            </view>
+
+          </view>
+        </view>
+      </view>
+    </view>
+    <view
+      class="shopping"
+      v-else-if="dataShopList.length > 0"
+      :style="[cusStyle['box']||{}]"
+    >
+      <view
+        class="shopping-list"
+        v-for="(item) in dataShopList"
+        :key="item[compMK.id]"
+        :id="`shop_item_${item[compMK.id]}`"
+        :class="{active: [
+          item[compMK.id].toString(),
+          item[compMK.shop_id].toString()
+        ].includes(selectId)}"
+        :style="[cusStyle['item']||{}]"
+        @click="handleClick(item, 'DL')"
+      >
+        <!--图片区域-->
+        <view class="shopping-img" v-if="image" :style="[cusStyle['image']||{}]">
+          <image v-if="!item.errorStatus" :src="item[compMK.image]" :alt="item[compMK.name]" mode="aspectFit" @error="handleError(item)"></image>
+          <image v-if="item.errorStatus" :src="errorImage" :alt="item[compMK.name]"></image>
+        </view>
+        <!--图片区域-->
+        <!--信息区域-->
+        <view class="shopping-cont" :class="{noImage: !image}">
+          <view class="shopping-cont-nameInfo">
+            <view class="shopping-name">
+              <view class="name" :style="[cusStyle['name']||{}]">{{item[compMK.name]}}</view>
+            </view>
+            <view class="shopping-info">
+              <view
+                :class="{'shopping-address-v2':  layout === 'v2'}"
+                class="shopping-address"
+                v-if="address || distance"
+              >
+                <view class="address one" v-if="address && item[compMK.address]">{{item[compMK.address]}}</view>
+                <view class="distance" v-if="distance && layout === 'v2' && item[compMK.distance]">{{item[compMK.distance]}}</view>
+              </view>
+              <view class="tags-info" v-if="layout === 'v2' && isBtn">
+                <view
+                  class="tags-info-item"
+                  v-for="btn in item[compMK.options]"
+                  :key="btn['consume_mode']"
+                >
+                  <view class="tags-info-icon"><xd-font-icon :icon="btn.icon" size="32" :color="iconThemeStyle[btn.icon]"></xd-font-icon></view>
+                  <view class="tags-info-price" v-if="price && btn.show_prices && btn.show_prices.length > 0">
+                    <cus-price
+                      type="normal"
+                      :isPlus="isPlus"
+                      :icon-size=".20"
+                      text-font-size="22"
+                      :showPrice="btn.show_prices"
+                    ></cus-price>
+                  </view>
+                  <view class="tags-info-desc">{{btn.desc}}</view>
+                  <view
+                    class="tags-info-btn"
+                    v-if="btn['consume_mode'] !== 'CODE'"
+                    @click.stop="handleClick(item, btn['consume_mode'])"
+                  ><view>{{btn['consume_mode']|filterName}}</view></view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="shopping-btn" v-if="layout === 'v3'">
+            <!--v3-->
+            <view class="distance" v-show="distance && item[compMK.distance]" >
+              <xd-font-icon :style="[cusStyle['distance']||{}]" icon="icondizhi" size="26"></xd-font-icon>
+              <text :style="[cusStyle['distance']||{}]" style="margin-left: 10rpx" >{{item[compMK.distance]}}</text>
+            </view>
+            <view class="buttons" v-if="isBtn">
+              <view
+                v-for="btn in item[compMK.options]"
+                :key="btn['consume_mode']"
+                class="change_btn"
+                @click.stop="handleClick(item, btn['consume_mode'])"
+              >
+                <view>{{btn['consume_mode']|filterName}}</view>
+              </view>
+            </view>
+            <!--v3-->
+          </view>
+        </view>
+        <!--信息区域-->
+      </view>
+    </view>
+    <view class="shopping-empty" v-else-if="dataShopList.length === 0">
+      <xd-no-data :scale-size="2" icon-type="shop">暂无门店信息</xd-no-data>
+    </view>
+  </view>
+
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon.vue";
+import Color from "color";
+import CusPrice from "@/components/CusPrice/CusPrice.vue";
+import XdNoData from "@/components/XdNoData/XdNoData.vue";
+import getServiceUrl from "@/common/getServiceUrl";
+let $vm = null;
+
+export default {
+  name:'CusShops',
+  components:{
+    CusPrice,
+    XdFontIcon,
+    XdNoData
+  },
+  props:{
+    list: {
+      type: Array|null,
+      default(){
+        return []
+      }
+    },
+    cusStyle:{
+      type: Object,
+      // image,item,box,name,distance
+      default(){
+        return {}
+      }
+    },
+    layout:{
+      type: String,
+      required: true
+    },
+    content:{
+      type: Array|null,
+      default(){
+        return ['image', 'address', 'distance','price']
+      }
+    },
+    isShowBtn:{
+      type:Boolean,
+      default: false,
+    },
+    mainColor:{
+      type: String,
+      required: true
+    },
+    subMainColor:{
+      type: String,
+      required: true
+    },
+    names:{
+      type: Object,
+      //jhd,wb,qp,seat,code，hdself，travel
+      default(){
+        return {}
+      }
+    },
+    mapKeys:{
+      type:Object,
+      default(){
+        return {}
+      }
+    },
+    //jhd,wb,qp,seat,code，hdself，travel
+    entry:{
+      type:Object,
+      default(){
+        return {}
+      }
+    },
+    selectId:{
+      type:String,
+      default:''
+    },
+    //是否智能识别一个按钮模式
+    isAutoJump:{
+      type:Array,
+      default(){
+        return []
+      },
+    },
+  },
+  data(){
+    return {
+      errorImage:'https://img0.jufubao.cn/common/empty/shop.png?v1=1',
+
+      //内容区状态
+      image: false,
+      address:false,
+      distance: false,
+      price: false,
+      isPlus:false,
+
+      //数据键值map关系
+      defMapKeys:{
+        id: 'resource_shop_id',
+        brand_id: 'brand_id',//品牌ID
+        shop_id:'shop_id',//整理前的门店ID
+        name: 'resource_shop_name', //店铺名字
+        distance: 'distance', //距离
+        address:'address', //店铺地址
+        image:'shop_icon', //店铺图片
+        discount : 'discount_ratio', //折扣
+        price:'price', //价格
+        mode:'consume_mode',//标签类型[]
+        options:'consume_options',
+      },
+
+      //自定义名称
+      defName:{
+        jhd:'聚好兑', //聚好兑
+        wb:'扫一扫', //扫一扫
+        qp:'去提货', //快捷码
+        seat: "去订票", //在选选座
+        code:'电子码', //电子码名字
+        hdself:'去下单', //到店自取名字
+        travel: '去订票 ', //旅游订票
+      },
+
+      defEntry:{
+        jhd:false, //聚好兑
+        wb:false, //扫一扫
+        qp:false, //快捷码
+        seat: false, //在选选座
+        code:false, //电子码
+        hdself:false, //到店自取
+        travel: false, //旅游订票
+      },
+
+
+      dataShopList:null,
+
+      iconThemeStyle:{}
+    }
+  },
+  computed:{
+    skeNumComp(){
+      return this.layout === 'v2'?5: 6;
+    },
+    activeComp(){
+      let border = `rgba(${Color(this.mainColor).alpha(0.6).array().join(',')})`;
+      let bgColor= `rgba(${Color(this.mainColor).alpha(.05).array().join(',')})`;
+      return {
+        '--xd-bgColor': bgColor,
+        '--xd-border': `1px solid ${border}`
+      }
+    },
+
+    compNames(){
+      return Object.assign({},this.defName,this.$xdUniHelper.cloneDeep(this.names))
+    },
+
+    compMK(){
+      return Object.assign({},this.defMapKeys,this.$xdUniHelper.cloneDeep(this.mapKeys))
+    },
+    compEntry(){
+      return Object.assign({},this.defEntry,this.$xdUniHelper.cloneDeep(this.entry))
+    },
+
+    isBtn(){
+      let flag = false;
+      Object.keys(this.compEntry).map(key=>{
+        if(this.compEntry[key] === true) flag = true;
+      });
+      return flag && this.isShowBtn
+    }
+  },
+  filters:{
+    filterName(val){
+      return $vm.compNames[val.toLocaleLowerCase()];
+    },
+  },
+  watch:{
+    content(val){
+      this.contentParse(val)
+    },
+    list(){
+      this.initData();
+    },
+    compMK(){
+      this.initData();
+    },
+    compEntry(){
+      this.initData();
+    }
+  },
+  created() {
+    $vm = this;
+    this.contentParse(this.content);
+    this.initData();
+    this.iconThemeStyle = {
+      iconduihuan: '#43CF7C',
+      iconquan: '#FF8D1A',
+      icongou: '#FF5733',
+      iconzuo: '#3091FF',
+      iconpiao1: '#3091FF'
+    }
+  },
+  methods:{
+    filterNotSupportCode(options){
+      let supportCode = ['seat','hdself','travel','code','jhd','wb','qp'];
+      return options.filter(it=>{
+        return supportCode.includes(it.consume_mode.toLocaleLowerCase()); //过滤不支持的按钮
+      }).filter(it=>{
+        return this.entry[it.consume_mode.toLocaleLowerCase()] //过滤未开启按钮设置
+      });
+    },
+    checkOneCodeDetailJumpCode(item){
+      //未开启智能识别功能并且没有返回options字段
+      if(this.isAutoJump.length === 0 ||
+        item[this.compMK['options']] === undefined ||
+        item[this.compMK['options']].length === 0
+      ) return false
+
+
+      //按钮数量大于1一条不处理
+      let options = item[this.compMK['options']];
+      if(options.length > 1)  return false;
+
+      //智能识别
+      let filterCode = ['seat','hdself','travel'];
+      return filterCode.includes(options[0].consume_mode.toLocaleLowerCase())
+    },
+    initData(){
+      if(this.list === null) this.dataShopList = null;
+      else if(this.$xdUniHelper.checkVarType(this.list) === 'array'){
+        this.dataShopList =  this.$xdUniHelper.cloneDeep(this.list).map((item,index)=>{
+
+          //过滤不支持的按钮
+          if(item[this.compMK['options']] && item[this.compMK['options']].length > 0) {
+            item[this.compMK['options']] = this.filterNotSupportCode(item[this.compMK['options']])
+          }
+          else item[this.compMK['options']] = [];
+
+          item[this.compMK['image']] = getServiceUrl(item[this.compMK['image']], 'size2')
+          //是否智能识别一个按钮模式
+          item['isOneCodeDetailJumpCode'] = this.checkOneCodeDetailJumpCode(item);
+
+          if(item['errorStatus'] === undefined) item['errorStatus'] = false;
+          return item
+        });
+      }
+      else this.dataShopList = [];
+    },
+    handleError(item){
+      item.errorStatus = true;
+    },
+    contentParse(value){
+      this.image = value.includes('image')
+      this.address = value.includes('address')
+      this.distance = value.includes('distance')
+      this.price = value.includes('price')
+    },
+
+    /**
+     * @description 事件操作
+     * @param item {Object}  数据对象
+     * @param type {string} 类型
+     */
+    handleClick(item, type) {
+      //当只有一个服务器点击详情直接进入服务
+      if(item['isOneCodeDetailJumpCode'] === true) type = item[this.compMK['mode']][0]
+      this.$emit('on-event', {item,type});
+    }
+  }
+}
+
+</script>
+<style scoped lang="less">
+  .shopping {
+    &-list,&-ske-item {
+      background-color: #fff;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0!important;
+      }
+
+      &.active {
+        background-color: var(--xd-bgColor)!important;
+        border: var(--xd-border)!important;
+      }
+    }
+    &-img,&-ske-image {
+      width: 160rpx;
+      height: 160rpx;
+      margin-right: 16rpx;
+      flex-shrink: 0;
+      overflow: hidden;
+
+      & > image {
+        width: 160rpx;
+        height: 160rpx;
+      }
+    }
+
+    &-ske-image{
+      .skeleton-item(160rpx, 160rpx)
+    }
+
+    &-cont,&-ske-cont {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: space-between;
+      min-height: 160rpx;
+      justify-items: flex-end;
+
+
+      // #ifdef MP-WEIXIN
+      &-nameInfo {
+        width: 100%;
+      }
+
+      & > .shopping-btn {
+        width: 100%;
+      }
+      // #endif
+
+
+      &.noImage {
+        min-height: 0;
+        align-content: normal;
+        display: block;
+
+        & .shopping-btn {
+          margin-top: 16rpx;
+        }
+      }
+
+      & > * {
+       width: 100%;
+        flex-shrink: 0;
+      }
+    }
+
+    &-name,&-ske-name {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      & .name {
+        font-size: 32rpx;
+        font-weight: 400;
+        line-height: 1.5;
+        .uni-cut(1,48);
+        flex: 1;
+        color: #333;
+        word-wrap: break-word;
+        word-break: break-all;
+      }
+
+      & .distance {
+        margin-left: 20rpx;
+        font-size: 24rpx;
+        color: #999;
+      }
+    }
+
+    &-ske-name {
+      .skeleton-item(80%, 50rpx)
+    }
+
+    &-ske-address {
+      margin-top: 10rpx;
+      & .address {
+        .skeleton-item(100%, 36rpx)
+      }
+    }
+
+    &-ske-v2 {
+      & > view {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        & > view {
+          margin-top: 10rpx;
+          margin-right: 10rpx;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+
+        & > .ske1 {
+          .skeleton-item(36rpx, 36rpx);
+          flex-shrink: 0;
+        }
+        & > .ske2 {
+          .skeleton-item(80rpx, 36rpx);
+          flex-shrink: 0;
+        }
+        & > .ske3 {
+          .skeleton-item(60%, 36rpx);
+          flex: 1;
+        }
+        & > .ske4 {
+          .skeleton-item(80rpx, 36rpx);
+          flex-shrink: 0;
+        }
+      }
+    }
+
+    &-ske-v3 {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      margin-top: 10rpx;
+
+      & > view:first-child {
+        .skeleton-item(100rpx, 26rpx);
+      }
+
+      & > view {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        view {
+          .skeleton-item(120rpx, 50rpx);
+          margin-left: 10rpx;
+        }
+
+      }
+    }
+
+    &-info {
+      & .tags-info {
+        margin-top: 8rpx;
+
+        &-item {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          min-height: 64rpx;
+
+          & > view {
+            margin-right: 10rpx;
+            font-size: 24rpx;
+            flex-shrink: 0;
+
+            &.tags-info-desc {
+              color: #999;
+              flex: 1;
+              .uni-cut(1,32);
+            }
+          }
+        }
+
+        &-btn {
+          height: 64rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding-left: 40rpx;
+          margin-right: 0!important;
+          & > view {
+            height: 48rpx;
+            padding: 0 16rpx;
+            line-height: 48rpx;
+            background-color: var(--g-theme-mainColor);
+            color: #fff;
+            border-radius: 24rpx;
+          }
+
+        }
+      }
+    }
+
+    &-address {
+      margin-top: 16rpx;
+
+      &-v2 {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        & > view.distance {
+          flex-shrink: 0;
+          margin-left: 20rpx;
+          font-size: 24rpx;
+          color: #999;
+        }
+      }
+      & > view.address {
+        font-size: 24rpx;
+        color: #999;
+        line-height: 1.5em;
+        word-wrap: break-word;
+        word-break: break-all;
+        .uni-max-cut(2,72);
+        flex: 1;
+
+        &.one {
+          .uni-max-cut(1,36);
+        }
+      }
+
+    }
+
+    &-btn {
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-end;
+      height: 64rpx;
+      margin-top: 10rpx;
+
+      & .distance {
+        display: flex;
+        justify-items: flex-start;
+        flex-shrink: 0;
+        font-size: 24rpx;
+        color: #999;
+        margin-bottom: 12rpx;
+      }
+
+      & .tags {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        & > view {
+          font-size: 24rpx;
+          height: 42rpx;
+          line-height: 42rpx;
+          border-radius: 12rpx;
+          padding: 0 16rpx;
+          margin-right: 16rpx;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+
+      }
+
+      & .buttons {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        flex: 1;
+        height: 64rpx;
+
+        & .change_btn{
+          height: 48rpx;
+          padding-top: 16rpx;
+          padding-left: 16rpx;
+          padding-bottom: 16rpx;
+
+          & > view {
+            padding: 0 16rpx;
+            height: 48rpx;
+            line-height: 48rpx;
+            border-radius: 24rpx;
+            background-color: var(--main-color);
+            font-size: 24rpx;
+            flex-shrink: 0;
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    & .priceAndDiscount{
+      & > .price, & > .discount {
+        font-size: 24rpx;
+        & > text {
+          &:first-child {
+            color: rgb(255, 44, 24)
+          }
+          &:last-child {
+            color: #999;
+            margin-left: 4rpx;
+          }
+        }
+
+      }
+    }
+  }
+</style>