jufubao-base 1.0.289-beta2 → 1.0.290-beta1

package/src/components/CusShops/CusShops.vue

@@ -1,518 +0,0 @@
-
-<template>
-  <view :style="[{'--main-color': mainColor,'--sub-main-color': subMainColor}]">
-    <view class="shopping-ske" v-if="dataList ===null">null</view>
-    <view
-      class="shopping"
-      v-else-if="dataList.length > 0"
-      :style="[cusStyle['box']||{}]"
-    >
-      <view
-        class="shopping-list"
-        v-for="item in dataList"
-        :key="item[compMK.id]"
-        :style="[cusStyle['item']||{}]"
-        @click="handleClick(item, 'handleToDetail', 'DL')"
-      >
-        <!--图片区域-->
-        <view class="shopping-img" v-if="image" :style="[cusStyle['image']||{}]">
-          <image v-if="item.errorStatus" :src="errorImage" :alt="item[compMK.name]"></image>
-          <image v-else :src="item[compMK.image]" :alt="item[compMK.name]" mode="aspectFit" @error="handleError(item)"></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]"
-                v-html="item[compMK.distance]"
-                :style="[cusStyle['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="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" v-html="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 :style="[compTagsStyle]" v-if="item[compMK.mode].includes('SELL')">支持核销</view>
-                <view :style="[compTagsStyle]" v-if="item[compMK.mode].includes('SEAT')">在线选座</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-if="item[compMK.mode].includes('SELL')">
-                <view
-                  v-if="item[compMK.defType] === 'WB' && compEntry.scan === true"
-                  class="change_btn"
-                  @click.stop="handleClick(item, 'handleToScan', item[compMK.defType])"
-                >{{ compNames.scan }}</view>
-                <view
-                  v-else-if="item[compMK.defType] === 'QP' && compEntry.takeGoods === true"
-                  class="change_btn"
-                  @click.stop="handleClick(item,'handleToEasyPay',item[compMK.defType])"
-                >{{ compNames.takeGoods }}</view>
-                <view
-                  v-else-if="item[compMK.defType] === 'JHD' && compEntry.jhd === true"
-                  class="change_btn"
-                  @click.stop="handleClick(item,'handleToExchange',item[compMK.defType])"
-                >{{ compNames.jhd }}</view>
-              </template>
-              <template v-if="item[compMK.mode].includes('SEAT') && compEntry.buyTicket === true">
-                <view
-                  class="change_btn"
-                  @click.stop="handleClick(item,'toSchedulePath','SEAT')"
-                >{{ compNames.buyTicket}}</view>
-              </template>
-              <template v-if="item[compMK.mode].includes('CODE') && compEntry.code === true">
-                <view
-                  class="change_btn code"
-                  @click.stop="handleClick(item,'toCodePath','CODE')"
-                >{{ compNames.code}}</view>
-              </template>
-            </view>
-            <!--按钮-->
-          </view>
-        </view>
-        <!--信息区域-->
-      </view>
-    </view>
-    <view class="shopping-empty" v-else-if="dataList.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
-      default(){
-        return {}
-      }
-    },
-    mapKeys:{
-      type:Object,
-      default(){
-        return {}
-      }
-    },
-    entry:{
-      type:Object,
-      default(){
-        return {}
-      }
-    }
-  },
-  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',
-        name: 'resource_shop_name', //店铺名字
-        distance: 'distance', //距离
-        address:'address', //店铺地址
-        image:'shop_icon', //店铺图片
-        discount : 'discount_ratio', //折扣
-        price:'price', //价格
-        mode:'consume_mode',//标签类型[]
-        defType:'default_consume_type',
-      },
-
-      //自定义名称
-      defName:{
-        jhd: "聚好兑",  //聚好兑名称
-        scan: "扫一扫", //扫一扫名称
-        takeGoods: "展快捷码", //展快捷码名称
-        buyTicket: "去购票", //去购票名称
-        code:'电子码' //电子码名字
-      },
-
-      defEntry:{
-        jhd: false,  //聚好兑名称
-        scan: false, //扫一扫名称
-        takeGoods: false, //展快捷码名称
-        buyTicket: false, //去购票名称
-        code:false //电子码名字
-      },
-
-      //按钮功能
-      buttons:[],
-    }
-  },
-  computed:{
-    dataList(){
-      if(this.list === null) return null;
-      else if(this.$xdUniHelper.checkVarType(this.list) === 'array'){
-        return  this.$xdUniHelper.cloneDeep(this.list);
-      }
-      return []
-    },
-
-    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);
-    },
-  },
-  watch:{
-    layout(val){
-      this.layoutParse(val)
-    },
-    content(val){
-      this.contentParse(val)
-    },
-  },
-  created() {
-    $vm = this;
-    this.layoutParse(this.layout);
-    this.contentParse(this.content);
-  },
-  methods:{
-    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 funcName {string}  操作方法名字
-     * @param type {string} 类型
-     */
-    handleClick(item, funcName, type) {
-      this.$emit('on-event', {item,funcName,type});
-    }
-  }
-}
-
-</script>
-<style scoped lang="less">
-  .shopping {
-    &-list {
-      background-color: #fff;
-      padding: 20rpx;
-      margin-top: 20rpx;
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-
-      &:first-child {
-        margin-top: 0;
-      }
-    }
-    &-img {
-      width: 200rpx;
-      height: 200rpx;
-      margin-right: 20rpx;
-      flex-shrink: 0;
-
-      & > image {
-        width: 200rpx;
-        height: 200rpx;
-      }
-    }
-
-    &-cont {
-      flex: 1;
-      display: flex;
-      flex-wrap: wrap;
-      align-content: space-between;
-      min-height: 200rpx;
-      justify-items: flex-end;
-
-      &.noImage {
-        min-height: 0;
-
-        & .shopping-btn {
-          margin-top: 32rpx;
-        }
-      }
-
-      & > * {
-       width: 100%;
-        flex-shrink: 0;
-      }
-    }
-
-    &-name {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      & .name {
-        font-size: 32rpx;
-        font-weight: 400;
-        line-height: 40rpx;
-        .uni-cut(1,40);
-        flex: 1;
-        color: #333;
-      }
-
-      & .distance {
-        margin-left: 20rpx;
-        font-size: 24rpx;
-        color: #999;
-      }
-    }
-
-    &-info {
-      & .tags-info {
-        margin-top: 16rpx;
-        &-tag {
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-          font-size: 24rpx;
-          color: #999;
-        }
-      }
-    }
-
-    &-address {
-      margin-top: 16rpx;
-      font-size: 24rpx;
-      color: #999;
-      line-height: 32rpx;
-      .uni-max-cut(2,64);
-
-      &.one {
-        .uni-max-cut(1,32);
-      }
-    }
-
-    &-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 {
-        & > view {
-          font-size: 24rpx;
-          height: 42rpx;
-          line-height: 42rpx;
-          border-radius: 12rpx;
-          padding: 0 16rpx;
-        }
-
-      }
-
-      & .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>