jufubao-takeorder 1.0.1

package/src/components/CusProduct/CusProduct.vue

@@ -0,0 +1,763 @@
+<template>
+  <view
+    class="product"
+    :class="{
+      two: cell >= 2 ,
+      one: (cell === 1 && columnOneLayout === 'H'),
+      oneV: (cell === 1 && columnOneLayout === 'V')
+    }"
+    @click="handleDetail()"
+  >
+    <view
+      class="product-image"
+      :style="{
+        marginRight: (cell === 1 ? (cellSpacing + 'rpx'):0),
+        marginBottom:  (cell === 1&& columnOneLayout ==='H' ? 0: (cellSpacing + 'rpx')),
+        width: (cell === 1 ? '240rpx': '100%'),
+        height: (cell === 1 && columnOneLayout ==='H' ? '240rpx': (height + 'rpx')),
+        backgroundColor: '#f8f8f8',
+        borderRadius: imageRadius + 'rpx',
+      }"
+    >
+      <image v-if="errorStatus" :src="errorImage" :alt="item['product_name']" ></image>
+      <image v-if="!errorStatus" :src="imageUrl" :alt="item['product_name']" @error="handleError(item)"></image>
+      <xd-product-status :status="item['status']"></xd-product-status>
+      <view class="tagL" :style="[imgLs.length?imgLs[0]['css']:{},{top:imageRadius + 'rpx'}]" v-if="imgLs.length">{{imgLs[0].label}}</view>
+      <view class="tagR" :style="[imgRs.length?imgRs[0]['css']:{},{top:imageRadius + 'rpx'}]" v-if="imgRs.length">{{imgRs[0].label}}</view>
+    </view>
+    <view class="product-content">
+      <view class="product-content-info">
+        <view
+          v-if="cell === 3"
+          class="name showThree"
+          :style="[nameFontComp,cutStringComp]"
+        >
+          <view class="nameTags" v-if="beTitles.length > 0">
+            <view :key="beTitle.label" :style="[beTitle.css,cusTagComp]" v-for="beTitle in beTitles">{{beTitle.label}}</view>
+          </view>
+          <view class="nameCont" :style="{fontSize:columnOneLayout !=='H'?'32rpx': '28rpx'}">{{cusName}}</view>
+        </view>
+        <view
+          v-else
+          class="name"
+          :style="[nameFontComp,cutStringComp]"
+          :class="{showOne: isOne}"
+        >
+          <view class="nameTags" :style="{verticalAlign:columnOneLayout ==='V'?'middle':'top'}" v-if="beTitles.length > 0">
+            <view :key="beTitle.label" :style="[beTitle.css,cusTagComp]" v-for="beTitle in beTitles">{{beTitle.label}}</view>
+          </view>
+          <view class="nameCont" :style="{fontSize:columnOneLayout !=='H'?'32rpx': '28rpx'}">{{cusName}}</view>
+        </view>
+        <view class="brandBox" v-if="productConfig.is_show_brand==='Y' || params.length > 0">
+          <view
+            class="brand"
+            v-if="productConfig.is_show_brand==='Y'"
+            :style="[brandStyle]"
+          >{{item['brand_name']}}</view>
+          <template v-for="(param,pIndex) in params">
+            <view v-if="productConfig.is_show_brand==='Y' || pIndex >= 1" class="brand" :style="[param.css,{padding: '0 6rpx',fontSize: '20rpx'}]">|</view>
+            <view class="brand" :style="[param.css]">{{param.label}}</view>
+          </template>
+        </view>
+        <view
+          v-if="tags.length > 0"
+          class="tags"
+          :class="{showTwo:!isOne, showThree: cell === 3}"
+          :style="[showThreeTagsStyle]"
+        >
+          <view
+            v-for="(tag,index) in tags"
+            :key="index"
+            class="_tag"
+            :style="[tag.css]"
+          >{{tag.label}}</view>
+        </view>
+      </view>
+      <view class="product-content-btn" v-if="isBtn" :class="{twoThree: isBtnHasMarginTop}">
+        <view :class="{onePrice: onePrice, showThree: isPriceTwoRow }">
+          <CusPrice v-if="productConfig.isPrice === 'Y'" :type="priceType" :isPlus="isPlus" :key="priceKey" :showPrice="showPriceComp"></CusPrice>
+        </view>
+        <view
+          :class="{'cart-btn-auto': !isIcon}"
+          :style="{height:cartSize+'rpx', width: cartSize + 'rpx',position:'absolute',right:0,bottom:0,zIndex: 300}"
+          v-if="isShowCart && colorComp"
+        >
+          <view @click.stop="handleDetail('Y')">
+            <xd-font-icon
+              v-if="isIcon"
+              :icon="cartIcon"
+              :color="colorComp"
+              :size="cartSize"
+            ></xd-font-icon>
+            <view v-else :style="[{color: colorComp},iconStyleComp,cartTextSize]" class="cart-btn">{{productConfig.cartName}}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import getServiceUrl from "@/common/getServiceUrl";
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon.vue";
+import XdProductStatus from "@/components/XdProductStatus/XdProductStatus";
+import XdUnit from "@/components/XdUnit/XdUnit.vue";
+import Color from "color";
+import CusPrice from '@/components/CusPrice/CusPrice.vue'
+import {getParentsStyles} from "@/utils/xd.base";
+import mpLoadingGVarMixins from "@/mixins/mpLoadingGVarMixins";
+
+export default {
+  name: "CusProduct",
+  components:{
+    XdFontIcon,
+    XdUnit,
+    XdProductStatus,
+    CusPrice
+  },
+  mixins:[mpLoadingGVarMixins],
+  props:{
+    keyword:{
+      type:String,
+      default:''
+    },
+    //一列（水平/垂直）布局
+    columnOneLayout:{
+      type:String,
+      default:'H'
+    },
+    nameFont: {
+      type:Object,
+      default(){
+        return {}
+      }
+    },
+
+    height:{
+      type:Number|String,
+      default:"auto",
+    },
+
+    item:Object,
+    cellSpacing: {
+      type: Number|String,
+      default: 20
+    },
+    color:{
+      type:String,
+      default:'',
+    },
+    brandColor:{
+      type: String|Object,
+      default: '#999'
+    },
+    oldPriceColor: {
+      type: String,
+      default: '#999'
+    },
+    imageRadius:{
+      type: String|Number,
+      default: '10'
+    },
+    cell:{
+      type: Number|String,
+      required: true
+    },
+    productConfig:{
+      type:Object|null,
+      default: null
+    },
+    isPlus: {
+      type: Boolean,
+      default: false
+    },
+  },
+  computed:{
+    cutStringComp(){
+      return this.$root.getCutString(this.cell === 3?1:2, this.columnOneLayout !=='H'?32: 28)
+    },
+    nameFontComp(){
+      if(this.$xdUniHelper.isEmpty(this.nameFont)) return {
+        color: '#333',
+        fontWeight: '500',
+
+      };
+      return {
+        color:  this.nameFont.color || '#333',
+        fontWeight: this.nameFont.fontWeight || '500',
+      }
+    },
+    isBtnHasMarginTop(){
+      return !(this.tags.length > 0 || (this.productConfig.is_show_brand === 'Y' || this.params.length > 0));
+    },
+    showPriceComp(){
+      if(this.$configProject['isPreview']) {
+        if(this.isPlus) return this.item['show_prices'];
+        else {
+          return this.item['show_prices'].map(it=>{
+            if(it.p > 1000000)  it.p = Math.floor(this.$xdUniHelper.divisionFloatNumber(it.p, 10));
+            return it
+          })
+        }
+      }
+      else return this.item['show_prices']
+    },
+    isShowCart(){
+      if(this.productConfig.isAddCart === 'N') return false;
+      else if(this.productConfig.isAddCart === 'Y') {
+        return !(this.cell === 3 && this.isPlus);
+      }else {
+        return false
+      }
+    },
+    cusTagComp(){
+      //debugger
+      if(this.cell === 1 && this.columnOneLayout !== 'H') {
+        return {
+          padding: '0 16rpx',
+          borderRadius: '12rpx',
+          fontSize: '28rpx',
+        }
+      }
+      return {
+        padding: '0 16rpx',
+      }
+    },
+    cartSize(){
+      let size = '52'
+      if(this.cell === 1) {
+        if(this.columnOneLayout === 'H') size = '52'
+        else  size = '64'
+      }
+      if(this.cell === 3) size = '40'
+      return size
+    },
+    cartTextSize(){
+      let size = '24rpx'
+      let lh = '44rpx'
+      let padding = '0 16rpx 0rpx';
+
+      if(this.cell === 1) {
+        if(this.columnOneLayout === 'H'){
+          lh = '44rpx'
+          size = '24rpx'
+          padding = '0 20rpx 0'
+        }
+        else {
+          size = '32rpx'
+          lh = '64rpx'
+          padding = '0 32rpx 0'
+        }
+      }
+      return {
+        fontSize:size,
+        lineHeight: lh,
+        padding,
+      }
+    },
+    brandStyle(){
+      if(typeof this.brandColor === 'string') return {color:this.brandColor}
+      else {
+        let isBgColor = true;
+        let isBorColor = true;
+
+        if(!this.brandColor.bgColor ||
+          (this.brandColor.bgColor && Color(this.brandColor.bgColor).toString() === 'rgba(0, 0, 0, 0)')
+        ) isBgColor = false;
+        if(!this.brandColor.borderColor ||
+          (this.brandColor.borderColor && Color(this.brandColor.borderColor).toString() === 'rgba(0, 0, 0, 0)')
+        ) isBorColor = false;
+
+        let padding = '0';
+        let bgColor = 'rgb(0, 0, 0, 0)';
+        let border = '0';
+        let borderRadius = 0
+        let marginTop = 0;
+        if(isBgColor || isBorColor){
+          padding = '0 10rpx';
+          borderRadius = '10rpx'
+          if(isBgColor) bgColor = this.brandColor.bgColor;
+          if(isBorColor){
+            border = `2rpx solid ${this.brandColor.borderColor}`;
+          }
+        }
+        return {
+          border: border,
+          backgroundColor: bgColor,
+          color: this.brandColor.color,
+          padding,
+          borderRadius,
+          marginTop
+        }
+      }
+    },
+    isPriceTwoRow(){
+      if(this.cell === 3) {
+        if(this.productConfig.isPrice === 'N') return false;
+        else if(this.productConfig.isShowDiscount === 'N') return false
+        return true;
+      }
+      return false
+    },
+    onePrice(){
+      if(this.cell === 1) return true;
+      if(this.cell === 3) return false;
+      if(this.cell === 2) return false;
+    },
+    cusName(){
+      return this.item['product_name'] || this.item['list_title']
+    },
+    imageUrl(){
+      if(!this.item['thumb']) return getServiceUrl('/common/empty/product.png?v1=1','size4')
+      return getServiceUrl(this.item['thumb'], 'size4')
+    },
+    isOne(){
+      let status = false;
+      if(this.cell === 1 && this.columnOneLayout ==='H') status = false
+      return status
+    },
+    isBtn(){
+      return this.productConfig.isPrice === 'Y' || this.productConfig.isAddCart === 'Y'
+    },
+    dividePrice() {
+      return this.$xdUniHelper.divisionFloatNumber(this.item.market_price, 100);
+    },
+    colorComp(){
+      return this.color || this.mainColor
+    },
+    showThreeTagsStyle() {
+      if(this.cell === 3) {
+        return {height:'40rpx'}
+      }
+      return {}
+    },
+    priceType(){
+      if(this.cell === 3) return 'three'
+      if(this.cell === 2) return 'two'
+      if(this.cell === 1) return 'one'
+    },
+    cartIcon(){
+      return this.productConfig.cartIcon || 'icongouwuche-01';
+    },
+    isIcon(){
+      return this.cartIcon.indexOf('btn_cart') === -1
+    },
+    iconStyleComp(){
+      if(this.isIcon === false){
+        let css = this.cartIcon.split('_')[1];
+        let bgColor ='#fff', border = 0, radius = 0, color = this.color || this.m;
+        switch (css) {
+          case 'cartFPlain':
+            border = `1px solid ${color}`;
+            break;
+          case 'cartFFull':
+            color = '#fff'
+            bgColor = this.color;
+            break;
+          case 'cartCPlain':
+            border = `1px solid ${color}`;
+            radius = '22rpx';
+            if(this.cell === 1 && this.columnOneLayout !== 'H')  radius = '32rpx';
+            break;
+          case 'cartCFull':
+            color = '#fff'
+            bgColor = this.color;
+            radius = '22rpx';
+            if(this.cell === 1 && this.columnOneLayout !== 'H')  radius = '32rpx';
+            break;
+          default:
+            break;
+        }
+        return {
+          color: color,
+          backgroundColor: bgColor,
+          border,
+          borderRadius:radius,
+        }
+      }
+      return {}
+    },
+  },
+  watch:{
+    item(){
+      this.tags = [];
+      this.beTitles = [];
+      this.imgRs = [];
+      this.imgLs = [];
+      this.params = [];
+      this.handleTagsInit();
+    },
+    showPriceComp() {
+      this.priceKey = new Date().getTime();
+    }
+  },
+  data(){
+    return {
+      tagObj: null,
+      tagObjColor: null,
+      errorStatus: false,
+      errorImage:'',
+      tags:[],
+      beTitles:[],
+      imgRs:[],
+      imgLs:[],
+      params:[],
+      mainColor: '',
+      priceKey: 'priceKey'
+    }
+  },
+  async created() {
+    let style = await getParentsStyles(this.$parent);
+    this.mainColor = style.$mainColor;
+    this.tagObj = this.$colorConfig.productTags;
+    this.tagObjColor = this.$colorConfig.productTagsColor;
+    this.errorImage = getServiceUrl('/common/empty/product.png?v1=1','size4');
+    this.handleTagsInit();
+  },
+  methods:{
+    handleTagsInit(){
+      if(this.item.tags && this.item.tags.length > 0) {
+        this.item.tags.map(it=>{
+          if(it['style']){
+            let flag = this.$colorConfig['tagStyle'][it['style']];
+            if(flag.radius) {
+              it.css = this.btnStyleComp(flag,flag.radius);
+            }
+            else it.css = this.btnStyleComp(flag);
+          }
+          else {
+            it.css = this.btnStyleComp(this.$colorConfig['tagStyle']['GR4']);
+          }
+          if(it.pos === 'tag') this.tags.push(it);
+          else if(it.pos === 'beTitle') this.beTitles.push(it);
+          else if(it.pos === 'imgR') this.imgRs.push(it);
+          else if(it.pos === 'imgL') this.imgLs.push(it);
+          else if(it.pos === 'param') this.params.push(it);
+          else this.tags.push(it);
+        })
+      }
+    },
+    handleError(item){
+      this.errorStatus = true;
+    },
+    handleDetail(type='N'){
+      this.$emit('on-product-detail', {isCart:type,...this.item});
+    },
+    btnStyleComp({style, color, bgColor}, cusRadius='8rpx'){
+      let c = '',bgc = '', border = 0, radius = 0, padding='0 10rpx';
+      if(style) {
+        switch (style) {
+          case 'css1':
+            c = color || '#999';
+            padding = 0;
+            break;
+          case 'css2':
+            c = color || '#999';
+            bgc = bgColor;
+            radius = cusRadius;
+            break;
+          case 'css3':
+            c = color || '#999';
+            bgc = bgColor;
+            break;
+          case 'css4':
+            c = color ||'#999';
+            bgc = bgColor ||'#fff';
+            radius = cusRadius;
+            border = `1px solid rgba(${Color(c).alpha(0.3).array().join(',')})`;
+            break;
+          case 'css5':
+            c = color ||'#999';
+            bgc = bgColor ||'#fff';
+            radius = '0';
+            border = `1px solid rgba(${Color(c).alpha(0.3).array().join(',')})`;
+            break;
+          case 'css6':
+            c = color ||'#999';
+            bgc = bgColor || '#fff';
+            radius = cusRadius;
+            border = `1px solid ${c}`
+            break;
+          case 'css7':
+            c = color ||'#999';
+            bgc = bgColor || '#fff';
+            radius = '0';
+            border = `1px solid ${c}`
+            break;
+          case 'css8':
+            c = color||'#fff';
+            bgc = bgColor;
+            radius = cusRadius;
+            break;
+          case 'css9':
+            c = color||'#fff';
+            bgc = bgColor;
+            break;
+          case 'cssL':
+            c = color;
+            bgc = bgColor;
+            radius = `0 ${cusRadius} ${cusRadius} 0`;
+            padding = '0 20rpx 0 10rpx'
+            break;
+          case 'cssR':
+            c = color;
+            bgc = bgColor;
+            radius = `${cusRadius} 0 0 ${cusRadius}`;
+            padding = '0 10rpx 0 20rpx'
+            break;
+          default:
+            c = color ||'#999'
+            padding = 0;
+            break;
+        }
+        return {
+          color: c,
+          backgroundColor: bgc,
+          border,
+          borderRadius:radius,
+          padding
+        }
+      }
+      else return {}
+    },
+  }
+}
+</script>
+
+
+
+<style scoped lang="less">
+.product {
+
+  &.oneV {
+    .product-image {
+      flex-shrink: 0;
+      position: relative;
+      width: 100%!important;
+    }
+
+    .product-content {
+    }
+  }
+
+  &.one {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    .product-image {
+      flex-shrink: 0;
+      position: relative;
+    }
+
+    .product-content {
+      flex: 1;
+      min-height: 240rpx;
+      display: flex;
+      justify-content: flex-start;
+      flex-flow: wrap;
+      align-content: space-between;
+    }
+  }
+
+  &.two {
+    .product-image {
+      width: 100%;
+      display: flex;
+      flex-shrink: 0;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      & > image {
+        height: 100%;
+        width: 100%;
+      }
+    }
+
+  }
+
+  &-image {
+    overflow: hidden;
+    & > image {
+      height: 100%;
+      width: 100%;
+    }
+
+    & .tagL {
+      position: absolute;
+      left: 0;
+      font-size: 20rpx;
+      line-height: 40rpx;
+    }
+
+    & .tagR {
+      position: absolute;
+      right: 0;
+      font-size: 20rpx;
+      line-height: 40rpx;
+    }
+  }
+
+  &-content {
+    overflow: hidden;
+    &-info {
+
+    }
+
+    &-btn {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+
+      &.twoThree {
+        margin-top: 18rpx;
+      }
+
+      & .showThree {
+        height: 72rpx;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-flow: wrap;
+        & > view {
+          width: 100%;
+          flex-shrink: 0;
+        }
+      }
+
+      .onePrice {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        & > view:nth-child(2) {
+          margin-left: 20rpx;
+        }
+      }
+
+      & > view:first-child {
+        flex: 1;
+        & > view:first-child {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          overflow: hidden;
+        }
+        & > view:nth-child(2) {
+          line-height: 30rpx;
+        }
+      }
+
+
+
+      & > view:nth-child(2) {
+        flex-shrink: 0;
+        width: 40rpx;
+        height: 40rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+      }
+
+      .oldPrice {
+        margin-left: 6rpx;
+      }
+
+      & .cart-btn-auto {
+        width: auto!important;
+      }
+    }
+
+    & .name {
+      margin-bottom: 10rpx;
+
+      & .nameTags {
+        display: inline-block;
+        vertical-align: top;
+
+        & > view {
+          display: inline-block;
+          vertical-align: top;
+          font-size: 22rpx;
+          margin-right: 10rpx;
+        }
+      }
+
+      & .nameCont {
+        line-height: 1.5;
+        display: inline;
+      }
+
+      &.showThree {
+        .uni-max-cut(1,40);
+        margin-bottom: 10rpx;
+      }
+      &.showOne {
+        .uni-max-cut(1,40);
+      }
+    }
+
+
+
+    & .brandBox {
+      width: 100%;
+      margin-bottom: 16rpx;
+      font-size: 24rpx;
+      .uni-max-cut(1,40);
+      box-sizing: border-box;
+
+      & > view {
+        height: 36rpx;
+        display: inline-block;
+        vertical-align: middle;
+        line-height: 36rpx;
+        box-sizing: border-box;
+        overflow: hidden;
+      }
+
+
+    }
+
+    & .tags {
+      display: flex;
+      justify-content: flex-start;
+      align-content: flex-start;
+      flex-flow: wrap;
+      width: 100%;
+
+      &.showThree {
+        overflow: hidden;
+        max-height: 40rpx;
+      }
+
+      &.showTwo {
+        & > view{
+          margin-bottom: 8rpx;
+        }
+      }
+
+      & > view {
+        padding: 0 16rpx;
+        line-height: 34rpx;
+        font-size: 20rpx;
+        color:#fff;
+        margin-right: 10rpx;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+      }
+    }
+
+    & .cart-btn {
+      padding: 0 .5rem;
+      box-sizing: border-box;
+    }
+
+  }
+}
+</style>