jufubao-mall 2.0.35-beta9 → 2.0.35-beta91

package/src/components/JfbMallShopVip/CusShops.vue

@@ -0,0 +1,591 @@
+
+<template>
+  <view :style="[{'--main-color': mainColor,'--sub-main-color': subMainColor},activeComp]">
+    <view class="shopping-ske" v-if="dataShopList ===null">null</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']||{}]" v-html="item[compMK.name]"></view>
+              <view
+                class="distance"
+                v-if="distance && distanceStyle === 'title' && item[compMK.distance]"
+                :style="[cusStyle['distance']||{}]"
+              >{{item[compMK.distance]}}</view>
+              <view class="priceAndDiscount" v-if="distanceStyle === 'button'">
+                <view class="price" v-if="price && item[compMK.price]">
+                  <text>{{item[compMK.price]|filterPrice}}</text>
+                  <text>起</text>
+                </view>
+                <view class="discount" v-if="discount && item[compMK.discount]">
+                  <text>{{item[compMK.discount]|filterDiscount}}</text>
+                  <text>折</text>
+                </view>
+              </view>
+            </view>
+            <view class="shopping-info">
+              <view
+                class="shopping-address"
+                :class="{one: tagPos === 'info'}"
+                v-if="address"
+                v-html="item[compMK.address]"
+              ></view>
+              <view class="tags-info" v-if="tagPos === 'info'">
+                <view class="tags-info-tag">
+                  <xd-font-icon icon="iconduihuan" color="#43CF7C" size="28" style="margin-right: 8rpx;"></xd-font-icon>
+                  <text>支持到店使用</text>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="shopping-btn">
+            <!--v3-->
+            <view class="distance" v-if="distance && distanceStyle === 'button' && 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>
+            <!--v3-->
+            <!--v2-->
+            <view v-if="tagPos === 'info'">
+              <view class="priceAndDiscount">
+                <view class="price" v-if="price && item[compMK.price]">
+                  <text>{{item[compMK.price]|filterPrice}}</text>
+                  <text>起</text>
+                </view>
+                <view class="discount" v-if="discount && item[compMK.discount]">
+                  <text>{{item[compMK.discount]|filterDiscount}}</text>
+                  <text>折</text>
+                </view>
+              </view>
+            </view>
+            <!--v2-->
+            <!--v1-->
+            <template v-if="tagPos === 'btn'">
+              <view v-if="!isShowBtn" class="tags">
+                <view v-for="it in item[compMK.mode]" :key="it" :style="[compTagsStyle]">{{item[compMK.modeName]|filterMode(it)}}</view>
+              </view>
+              <view class="priceAndDiscount">
+                <view class="price" v-if="price && item[compMK.price]">
+                  <text>{{item[compMK.price]|filterPrice}}</text>
+                  <text>起</text>
+                </view>
+                <view class="discount" v-if="discount && item[compMK.discount]">
+                  <text>{{item[compMK.discount]|filterDiscount}}</text>
+                  <text>折</text>
+                </view>
+              </view>
+            </template>
+            <!--v1-->
+            <!--按钮-->
+            <view class="buttons" v-if="isShowBtn && isBtn">
+              <!-- CV:店员核销（小蜜蜂）；WB:用户扫水牌；CR:收银机；POS:POS机；JHD:聚好兑; QP：快捷支付；MC电影去购买-->
+              <template v-for="it in item[compMK.mode]">
+                <view
+                  v-if="compEntry[mapCodeKeys[it]] === true"
+                  class="change_btn"
+                  @click.stop="handleClick(item, it)"
+                >{{ compNames[mapCodeKeys[it]]}}</view>
+              </template>
+            </view>
+            <!--按钮-->
+          </view>
+        </view>
+        <!--信息区域-->
+      </view>
+    </view>
+    <view class="shopping-empty" v-else-if="dataShopList.length === 0"></view>
+  </view>
+
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon.vue";
+import Color from "color";
+let $vm = null;
+
+export default {
+  name:'CusShops',
+  components:{
+    XdFontIcon
+  },
+  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', 'discount','price']
+      }
+    },
+    isShowBtn:{
+      type:Boolean,
+      default: false,
+    },
+    mainColor:{
+      type: String,
+      required: true
+    },
+    subMainColor:{
+      type: String,
+      required: true
+    },
+    names:{
+      type: Object,
+      //jhd,scan,takeGoods,buyTicket,code，hdSelf
+      default(){
+        return {}
+      }
+    },
+    mapKeys:{
+      type:Object,
+      default(){
+        return {}
+      }
+    },
+    entry:{
+      type:Object,
+      default(){
+        return {}
+      }
+    },
+    selectId:{
+      type:String,
+      default:''
+    }
+  },
+  data(){
+    return {
+      distanceStyle:'title',//title:标题后面  button: 操作按钮左侧
+      tagPos: 'info', //info=>信息下方  btn: 操作按钮左侧
+      errorImage:'https://img0.jufubao.cn/common/empty/shop.png?v1=1',
+
+      //内容区状态
+      image: false,
+      address:true,
+      distance: false,
+      price: false,
+      discount: 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',//标签类型[]
+        modeName:'consume_mode_name',//服务类型名称{CODE:NAME}
+        defType:'default_consume_type',
+      },
+      modeName:{
+        CODE:'电子码',
+        SELL:'支持核销',
+        SEAT:'在线选座',
+        TRAVEL:'在线订票',
+        HDSELF:'到店自取'
+      },
+
+      mapCodeKeys:{
+        CODE:'code',
+        SELL: 'cashier',
+        SEAT:'buyTicket',
+        TRAVEL:'travel',
+        HDSELF:'hdSelf'
+      },
+
+      //自定义名称
+      defName:{
+        cashier:'去买单',
+        buyTicket: "去购票", //在选选座
+        code:'电子码', //电子码名字
+        hdSelf:'到店自取', //到店自取名字
+        travel: '去购票 ', //旅游订票
+      },
+
+      defEntry:{
+        cashier:false, //支持核销
+        buyTicket: false, //去购票名称
+        code:false, //电子码名字
+        hdSelf:false, //电子码名字
+        travel: false, //旅游订票
+      },
+
+      //按钮功能
+      buttons:[],
+
+      dataShopList:null,
+    }
+  },
+  computed:{
+    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}`
+      }
+    },
+
+    compTagsStyle(){
+      let textColor = `rgba(${Color(this.mainColor).alpha(0.1).array().join(',')})`;
+      return {
+        backgroundColor: textColor,
+        color: this.mainColor,
+      }
+    },
+
+    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
+    }
+  },
+  filters:{
+    filterPrice(val){
+      if(typeof val === 'string') val = Number(val)
+      return $vm.$xdUniHelper.divisionFloatNumber(val,100);
+    },
+    filterDiscount(val){
+      if(typeof val === 'string') val = Number(val)
+      return $vm.$xdUniHelper.divisionFloatNumber(val,1000);
+    },
+    filterMode(value, code){
+      if(!value) return $vm.modeName[code];
+      return value[code];
+    }
+  },
+  watch:{
+    layout(val){
+      this.layoutParse(val)
+    },
+    content(val){
+      this.contentParse(val)
+    },
+    list(){
+      this.initData();
+    },
+  },
+  created() {
+    $vm = this;
+    this.layoutParse(this.layout);
+    this.contentParse(this.content);
+    this.initData();
+  },
+  methods:{
+    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=>{
+          item[this.compMK['mode']] = item[this.compMK['mode']].filter(it=>{
+            return this.mapCodeKeys[it];
+          });
+          item['is_detail_to_btn'] = this.isShowBtn && item[this.compMK['mode']].length === 1;
+          if(item['errorStatus'] === undefined) item['errorStatus'] = false;
+          return item
+        });
+      }
+      else this.dataShopList = [];
+    },
+    handleError(item){
+      item.errorStatus = true;
+    },
+    layoutParse(value){
+      let distanceStyle = 'title';
+      let tagPos = '';
+
+      //布局1
+      if(['v1'].includes(value)) {
+        tagPos = 'btn'
+      }
+
+      //布局2
+      if(['v2'].includes(value)) {
+        tagPos = 'info'
+      }
+
+      //电影模式
+      if(['v3'].includes(value)) {
+        distanceStyle = 'button';
+      }
+      this.tagPos = tagPos;
+      this.distanceStyle  = distanceStyle;
+    },
+    contentParse(value){
+      this.image = value.includes('image')
+      this.address = value.includes('address')
+      this.distance = value.includes('distance')
+      //价格和折扣只有在v1，v2线上
+      this.price = value.includes('price')
+      this.discount = value.includes('discount')
+    },
+
+    /**
+     * @description 事件操作
+     * @param item {Object}  数据对象
+     * @param type {string} 类型
+     */
+    handleClick(item, type) {
+      //当只有一个服务器点击详情直接进入服务
+      if(item.is_detail_to_btn === true) type = item[this.compMK['mode']][0]
+      this.$emit('on-event', {item,type});
+    }
+  }
+}
+
+</script>
+<style scoped lang="less">
+.shopping {
+  &-list {
+    background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &.active {
+      background-color: var(--xd-bgColor)!important;
+      border: var(--xd-border)!important;
+    }
+  }
+  &-img {
+    width: 200rpx;
+    height: 200rpx;
+    margin-right: 16rpx;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    & > image {
+      width: 200rpx;
+      height: 200rpx;
+    }
+  }
+
+  &-cont {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: space-between;
+    min-height: 200rpx;
+    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 {
+    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;
+    }
+  }
+
+  &-info {
+    & .tags-info {
+      margin-top: 16rpx;
+      display: flex;
+      flex-flow: wrap;
+      justify-content: flex-start;
+      &-tag {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: 24rpx;
+        color: #999;
+        flex-shrink: 0;
+        margin-top: 10rpx;
+
+        width: 45%;
+        margin-right: 10%;
+        &:nth-child(2n) {
+          margin-right: 0;
+        }
+
+        &:nth-child(1), &:nth-child(2) {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+  &-address {
+    margin-top: 16rpx;
+    font-size: 24rpx;
+    color: #999;
+    line-height: 1.5em;
+    word-wrap: break-word;
+    word-break: break-all;
+    .uni-max-cut(2,72);
+
+    &.one {
+      .uni-max-cut(1,36);
+    }
+  }
+
+  &-btn {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 16rpx;
+
+    & .distance {
+      display: flex;
+      justify-items: flex-start;
+      flex-shrink: 0;
+      font-size: 24rpx;
+      color: #999;
+    }
+
+    & .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;
+      & .change_btn{
+        padding: 0 16rpx;
+        height: 48rpx;
+        line-height: 48rpx;
+        border-radius: 24rpx;
+        background-color: var(--main-color);
+        font-size: 24rpx;
+        flex-shrink: 0;
+        color: #fff;
+        & + .change_btn{
+          margin-left: 10rpx;
+        }
+
+        &.code  {
+          background-color: var(--sub-main-color);
+        }
+      }
+    }
+  }
+
+  & .priceAndDiscount{
+    & > .price, & > .discount {
+      font-size: 24rpx;
+      & > text {
+        &:first-child {
+          color: rgb(255, 44, 24)
+        }
+        &:last-child {
+          color: #999;
+          margin-left: 4rpx;
+        }
+      }
+
+    }
+  }
+}
+</style>