jufubao-base 1.0.290-beta2 → 1.0.290

package/src/components/CusShops/CusShops.vue

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