jufubao-base 1.0.169-beta1 → 1.0.169-beta11

package/src/components/JfbBaseTfkSearch/ContentProduct.vue

@@ -0,0 +1,308 @@
+<template>
+  <view class="prodcut" :class="{tow: cell === 2, one: cell === 1}" @click="handleDetail()">
+    <view
+      class="prodcut-image"
+      :style="{
+        marginRight: (cell === 1 ? (outSpacing + 'rpx'):0),
+        width: (cell === 1 ? '200rpx': '100%'),
+        height: (cell === 1 ? '200rpx': (height + 'rpx')),
+        backgroundColor: '#f8f8f8',
+        borderRadius: borderRadius + 'rpx',
+      }"
+    >
+      <image :src="imageUrl" :alt="item['product_name']" mode="aspectFit"></image>
+    </view>
+    <view class="prodcut-content" :style="{marginTop:cell === 1? 0: (outSpacing + 'rpx') }">
+      <view class="prodcut-content-info">
+        <view class="name" v-html="cusName" :class="{showOne: isOne}"></view>
+        <view class="brand" v-if="productConfig.is_show_brand==='Y'" :style="{color:brandColor}">{{item['brand_name']}}</view>
+        <view class="tags" v-if="productConfig.isShowTag === 'Y'">
+          <view
+            v-for="tag in tagsList"
+            :key="tag"
+            :style="{background:tagObjColor[tag]}"
+          >{{tagObj[tag]}}</view>
+        </view>
+      </view>
+      <view class="prodcut-content-btn" v-if="isBtn">
+        <view :class="{onePrice: cell === 1}">
+          <view v-if="productConfig.isPrice === 'Y'">
+            <xd-unit
+              :price="(item['promo_price'] || item['sale_price'])"
+              :isOld="false"
+              :iconSize="0.3"
+              :fontSize="36"
+            />
+          </view>
+          <view
+            v-if="productConfig.isShowDiscount==='Y' && checkDiscountPrice"
+            :style="{color:oldPriceColor}" class="oldPrice">
+            <xd-unit
+              :price="dividePrice"
+              :iconSize="0.21"
+              :fontSize="24"
+              delete-line
+              is-gray
+            />
+          </view>
+        </view>
+        <view>
+          <view @click.stop="handleDetail()" v-if="productConfig.isAddCart === 'Y'">
+            <xd-font-icon
+              icon="icongouwuche-01"
+              :color="color"
+              size="40"
+            ></xd-font-icon>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import handleKeyword from "./handleKeyword";
+import getServiceUrl from "@/common/getServiceUrl";
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon.vue";
+import XdUnit from "@/components/XdUnit/XdUnit.vue";
+
+export default {
+  name: "ContentProduct",
+  components:{
+    XdFontIcon,
+    XdUnit
+  },
+  props:{
+    keyword:{
+      type:String,
+      default:'北京'
+    },
+
+    height:{
+      type:Number|String,
+      default:"auto",
+    },
+
+    item:Object,
+    outSpacing: {
+      type: Number|String,
+      default: 20
+    },
+    color:{
+      type:String,
+      default:'red',
+    },
+    brandColor:{
+      type: String,
+      default: '#999'
+    },
+    oldPriceColor: {
+      type: String,
+      default: '#999'
+    },
+    borderRadius:{
+      type: String,
+      default: '10'
+    },
+    cell:{
+      type: Number|String,
+      required: true
+    },
+    productConfig:{
+      type:Object|null,
+      default: null
+    },
+  },
+  computed:{
+    cusName(){
+      return handleKeyword(this, this.item['product_name'] || this.item['list_title'], this.keyword)
+    },
+    imageUrl(){
+      return getServiceUrl(this.item['thumb'])
+    },
+    isOne(){
+      let status = false;
+      if(this.cell === 1) status = false
+      return status
+    },
+    isBtn(){
+      return this.productConfig.isPrice === 'Y' || this.productConfig.isAddCart === 'Y'
+    },
+    dividePrice() {
+      return this.$xdUniHelper.divisionFloatNumber(this.item.market_price, 100);
+    },
+
+    checkDiscountPrice() {
+      if(this.productConfig.isPrice === 'N') return  false
+      if (this.productConfig.isShowDiscount === 'Y') {
+        let price = Number(this.item.market_price) - Number(this.item.sale_price);
+        return this.$xdUniHelper.divisionFloatNumber(price,100) > Number(this.productConfig.differ);
+      }
+      return false
+    },
+
+    tagsList(){
+      if(this.productConfig.showActivityPrice === 'N') {
+        return this.item['market_tags'].filter(tag=>{
+          return tag !== 'flashsale';
+        })
+      }
+      else return this.item['market_tags'];
+    },
+  },
+  data(){
+    return {
+      tagObj: null,
+      tagObjColor: null
+    }
+  },
+  created() {
+    this.tagObj = this.$colorConfig.productTags;
+    this.tagObjColor = this.$colorConfig.productTagsColor;
+  },
+  methods:{
+    handleDetail(){
+      this.$emit('on-product-detail', this.item);
+    }
+  }
+}
+</script>
+
+
+
+<style scoped lang="less">
+  .prodcut {
+    &.one {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      min-height: 200rpx;
+
+      .prodcut-image {
+        flex-shrink: 0;
+      }
+
+      .prodcut-content {
+        flex: 1;
+        min-height: 200rpx;
+        display: flex;
+        justify-content: flex-start;
+        flex-flow: wrap;
+        align-content: space-between;
+      }
+    }
+
+    &.tow {
+      .prodcut-image {
+        width: 100%;
+      }
+
+    }
+
+    &-image {
+      overflow: hidden;
+      & > image {
+        max-height: 100%;
+        max-width: 100%;
+      }
+    }
+
+    &-content {
+      &-info {
+
+      }
+
+      &-btn {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .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 {
+            height: 40rpx;
+            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;
+        }
+      }
+
+      & .name {
+        font-size: 30rpx;
+        font-weight: 400;
+        margin-bottom: 10rpx;
+        line-height: 40rpx;
+        .uni-max-cut(2,80);
+
+        &.showOne {
+          .uni-max-cut(1,40);
+        }
+      }
+
+      & .brand {
+        font-size: 22rpx;
+        line-height: 30rpx;
+        margin-bottom: 10rpx;
+        .uni-max-cut(1,30);
+
+      }
+
+      .tags {
+        display: flex;
+        justify-content: flex-start;
+        align-content: flex-start;
+        margin-bottom: 10rpx;
+        flex-flow: wrap;
+
+        & > view {
+          padding: 0 14rpx;
+          height: 32rpx;
+          line-height: 31rpx;
+          font-size: 20rpx;
+          color:#fff;
+          border-radius: 16rpx;
+          margin-right: 10rpx;
+
+          &:last-child {
+            margin-right: 0;
+          }
+          &:nth-child(4),&:nth-child(5),&:nth-child(6){
+            margin-top: 8rpx;
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/JfbBaseTfkSearch/ContentShop.vue

@@ -0,0 +1,184 @@
+<template>
+  <view  class="content-item" @click="handleDetail(item)">
+    <view class="content-item-image" :style="{marginRight:outSpacing+'rpx',borderRadius:borderRadius+'rpx'}">
+      <image :src="imageUrl" :alt="item['resource_shop_name']"></image>
+    </view>
+    <view class="content-item-cont">
+      <view class="title">
+        <view :class="{one:isSupportJhd}" v-html="name"></view>
+        <view :style="{marginLeft: item['distance'] ? '10rpx': 0,color: color}">{{item['distance']}}</view>
+      </view>
+      <view class="bottom">
+        <view class="address">
+          <view><xd-font-icon icon="icondizhitubiao" size="30"></xd-font-icon></view>
+          <view>{{getAddress}}</view>
+        </view>
+        <view class="phone">
+          <view><xd-font-icon icon="icondianhuatubiao" size="26"></xd-font-icon></view>
+          <view>{{item['phone']}}</view>
+        </view>
+        <view class="eChange" v-if="isSupportJhd">
+          <view><xd-button @click.stop="handleJhd(item)" type="primary" size="mini">去兑换</xd-button></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+
+<script>
+
+import getServiceUrl from "@/common/getServiceUrl";
+import handleKeyword from "./handleKeyword";
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon.vue";
+import XdButton from "@/components/XdButton/XdButton.vue";
+
+export default {
+  name: "ContentShop",
+  props:{
+    keyword:{
+      type:String,
+      default:'',
+    },
+    isEchange:{
+      type:String,
+      default:'N'
+    },
+    item:Object,
+    outSpacing: {
+      type: Number|String,
+      default: 20
+    },
+    borderRadius:{
+      type: String,
+      default: '10'
+    },
+    color: {
+      type: String,
+      default: ''
+    },
+  },
+  components:{
+    XdFontIcon,
+    XdButton
+  },
+  computed:{
+    imageUrl(){
+      return getServiceUrl(this.item.shop_icon)
+    },
+    name(){
+      return handleKeyword(this, this.item.resource_shop_name,this.keyword)
+    },
+    isSupportJhd(){
+      return this.isEchange === 'Y' && this.item.is_support_jhd
+    },
+    getAddress() {
+      let sy = `${this.item.province_name}${this.item.city_name}${this.item.area_name}${this.item.street_name}`;
+      return `${sy}${this.item.address}`;
+    },
+  },
+  created() {
+    // console.log(this.item)
+    // debugger
+  },
+  methods:{
+    handleJhd(item){
+      this.$emit('on-shop-jhd',item);
+    },
+    handleDetail(item){
+      this.$emit('on-shop-detail',item);
+    }
+  },
+}
+</script>
+
+
+<style scoped lang="less">
+  .content-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 200rpx;
+
+    &-image {
+      width: 200rpx;
+      height: 200rpx;
+      flex-shrink: 0;
+      overflow: hidden;
+
+      & > image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &-cont {
+      flex: 1;
+      height: 100%;
+
+      & .title {
+        margin-bottom: 10rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        & > view:first-child {
+          font-size: 30rpx;
+          font-weight: 500;
+          .uni-max-cut(2,80);
+          line-height: 40rpx;
+
+          &.one {
+            .uni-max-cut(1,40);
+          }
+        }
+
+        & > view:last-child {
+          flex-shrink: 0;
+          font-size: 22rpx;
+          line-height: 40rpx;
+        }
+
+
+      }
+
+      .address,.phone {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        font-size: 22rpx;
+        color: #999;
+
+        & > view:first-child {
+          width: 40rpx;
+          height: 40rpx;
+          margin-right: 10rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-shrink: 0;
+        }
+
+      }
+
+      .address {
+        margin-bottom: 6rpx;
+        & > view:last-child {
+          .uni-max-cut(2,60);
+          line-height: 30rpx;
+        }
+
+      }
+
+      .eChange {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        & > view {
+          width: 140rpx;
+        }
+      }
+
+    }
+  }
+</style>

package/src/components/JfbBaseTfkSearch/CusAttr.js

@@ -0,0 +1,213 @@
+'use strict';
+export default (data)=>{
+  return [
+    {
+      ele: 'title',
+      label: '商品搜索相关设置',
+      size: 'small',
+      groupKey:'content',
+    },
+    {
+      label: '是否展示品牌:',
+      ele: 'xd-radio',
+      valueKey: 'is_show_brand',
+      value: data['is_show_brand'] || 'N',
+      placeholder: '请选择是否展示品牌',
+      multiple: false,
+      className: 'input80',
+      groupKey:'content',
+      list: [
+        {label: '是', value: 'Y'},
+        {label: '否', value: 'N'},
+      ]
+    },
+    {
+      label: "可否直接加入购物车",
+      ele: "xd-radio",
+      valueKey: "isAddCart",
+      groupKey:'content',
+      value: data['isAddCart'] || 'Y',
+      list: [
+        {label: "是", value: 'Y'},
+        {label: "否", value: 'N'}
+      ]
+    },
+    {
+      label: '是否显示价格:',
+      ele: 'xd-radio',
+      groupKey:'content',
+      valueKey: 'isPrice',
+      value: data['isPrice'] || 'Y',
+      placeholder: '请选择是否显示价格',
+      multiple: false,
+      className: 'input80',
+      list: [
+        {label: '是', value: 'Y'},
+        {label: '否', value: 'N'},
+      ]
+    },
+    data['isPrice']==='Y'&&{
+      label: '是否展示原价:',
+      ele: 'xd-radio',
+      groupKey:'content',
+      valueKey: 'isShowDiscount',
+      value: data['isShowDiscount'] || "Y",
+      rules: [
+        {required: true, message: '请选择', trigger: ['blur', 'change']}
+      ],
+      list: [
+        {"label": "显示", "value": "Y"},
+        {"label": "隐藏", "value": "N"},
+      ]
+    },
+    data['isShowDiscount']==='Y'&&{
+      label: '市场价减去售价大于多少展示:',
+      ele: 'el-input',
+      type: 'number',
+      valueKey: 'differ',
+      value: data['differ'] || '',
+      groupKey:'content',
+      placeholder: '价差',
+      className: 'input80',
+    },
+    data['isPrice']==='Y'&&{
+      label: '是否标明活动价:',
+      ele: 'xd-radio',
+      valueKey: 'showActivityPrice',
+      value: data['showActivityPrice'] || 'N',
+      placeholder: '请选择是否标明活动价',
+      groupKey:'content',
+      multiple: false,
+      className: 'input80',
+      list: [
+        {label: '是', value: 'Y'},
+        {label: '否', value: 'N'},
+      ]
+    },
+    {
+      label: '是否显示标签:',
+      ele: 'xd-radio',
+      valueKey: "isShowTag",
+      value: data['isShowTag'] || 'N',
+      groupKey:'content',
+      list: [
+        {label: '是', value: 'Y'},
+        {label: '否', value: 'N'},
+      ]
+    },
+
+    {
+      ele: 'title',
+      label: '列表样式设置',
+      size: 'small',
+      groupKey:'style',
+    },
+    {
+      label: '商品的品牌文字颜色:',
+      ele: 'xd-color',
+      valueKey: 'brandColor',
+      value: data['brandColor'] || '',
+      placeholder: '请选择商品的品牌文字颜色',
+      classNmae: 'input80',
+      groupKey:'style',
+    },
+
+    {
+      label: '填充设置:',
+      ele: 'xd-margin-padding',
+      groupKey:'style',
+      valueKey: 'contMargin',
+      value: data['contMargin'] || null,
+      setting: {
+        type: 'margin',
+      },
+      inline: false,
+      notice: '填充设置，单位：<span style="color: red">像素</span>。默认值：<span style="color: red">20</span> 像素',
+    },
+    {
+      label: '背景颜色:',
+      ele: 'xd-color',
+      valueKey: 'contBgColor',
+      value: data['contBgColor'] || '',
+      placeholder: '请选择背景颜色',
+      classNmae: 'input80',
+      groupKey:'style',
+      inline: false,
+      notice:'背景颜色值建议使用相对浅色系色值',
+    },
+    {
+      label: '当前投影设置:',
+      ele: 'xd-shadow',
+      groupKey:'style',
+      valueKey: 'contShadow',
+      value: data['contShadow'] || '',
+      setting: {
+        selected: 'N',
+      },
+      handleCustom({action, data}) {
+        XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
+          .then(res => {
+            data.cb(res.list)
+          })
+          .catch(error => {
+            console.error(error);
+            data.cb([])
+          });
+      },
+    },
+    {
+      label: '当前边框设置:',
+      ele: 'xd-border',
+      groupKey:'style',
+      valueKey: 'contBorder',
+      value: data['contBorder'] || '',
+      setting: {
+        selected:'N'
+      },
+    },
+    {
+      label: '圆角设置:',
+      ele: 'xd-site-select-list',
+      valueKey: 'contRradius',
+      value: data['contRradius'] || '10',
+      groupKey:'style',
+      placeholder: '请选择内容圆角设置',
+      multiple: false,
+      className: 'input80',
+      handleCustom({action, data}) {
+        XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
+          .then(res => {
+            data.cb(res.list)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
+    {
+      ele: 'title',
+      label: '图片样式设置',
+      size: 'small',
+      groupKey:'style',
+    },
+    {
+      label: '圆角设置:',
+      ele: 'xd-site-select-list',
+      valueKey: 'imgRradius',
+      value: data['imgRradius'] || '10',
+      groupKey:'style',
+      placeholder: '请选择内容圆角设置',
+      multiple: false,
+      className: 'input80',
+      handleCustom({action, data}) {
+        XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
+          .then(res => {
+            data.cb(res.list)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
+  ]
+}