jufubao-mall 2.0.35-beta3 → 2.0.35-beta4

package/src/components/JfbMallShopVip/CusShops.vue

@@ -1,591 +0,0 @@
-
-<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>