jufubao-mall 2.0.32 → 2.0.34

package/src/components/CusTab/CusTab.vue

@@ -1,36 +1,49 @@
 <template>
 	<view
 		class="xd-tab"
+    v-if="eleID"
 		:class="{noBorder: noBorder}"
 		:style="{background:bgColor}"
 	>
+
 		<scroll-view
       class="tab-scroll"
       scroll-x
       :scroll-with-animation="scrollWithAnimation"
       :scroll-into-view="toView"
+      :id="eleID"
       :style="{
         width: 'calc(100% - '+ getSettingWidth + 'px)',
         height: height + 'rpx'
       }"
-
+      @scroll="handleScroll"
     >
 			<view class="tab-scroll__box">
 				<view
           :id="`tab-scroll__index-${index}`"
           v-for="(item, index) in list"
           :key="index"
-          :style="{color: activeIndex === index? (actColor||styleMainColor): color, height: height + 'rpx'}"
+          :style="{
+            color: activeIndex === index? (actColor||styleMainColor): color,
+            height: height + 'rpx',
+            width: (getItemWidth(item) + (index===0?spacing:0)) + 'rpx',
+            margin: (actBgcColor || bgcColor)? 0:`0 0 0 ${spacing}rpx`
+          }"
           class="tab-scroll__item"
-          :class="{active:activeIndex === index}"
+          :class="{active:activeIndex === index,'desc': xAbsolute === 'none' && item.subName}"
 				  @click="clickTab(item, index)"
         >
           <view
 						:style="[{
+              width: getItemWidth(item) + 'rpx',
 							fontWeight: activeIndex === index? actFontWeight: fontWeight,
 							fontSize: (activeIndex === index ? actFontSize : fontSize) + 'rpx',
 							height:(xAbsolute === 'none' && item.subName)?(height/2 + 'rpx'):(height + 'rpx'),
-							lineHeight:(xAbsolute === 'none' && item.subName)?(height/2 + 'rpx'):(height + 'rpx')
+							lineHeight:(xAbsolute === 'none' && item.subName)?(height/2 + 'rpx'):(height + 'rpx'),
+							backgroundColor: activeIndex === index?actBgcColor:bgcColor,
+							borderRadius: (actBgcColor||bgcColor)? '30rpx':0,
+							padding: (actBgcColor||bgcColor) ? '0 16rpx':0,
+							marginLeft: index === 0? `${spacing}rpx`: 0
 						}]">{{item.name}}</view>
           <view
             class="xAbsolute"
@@ -38,6 +51,7 @@
 						:style="[
               footerStyleComp,
 						  {backgroundColor: activeIndex === index? (actColor||styleMainColor): ''},
+						  {left: `calc(50% + ${index === 0 ? `${spacing/2}rpx`: '0rpx'})`}
 						 ]"
           >
             <view
@@ -49,11 +63,33 @@
           <view
             v-if="xAbsolute === 'none' && item.subName"
             class="none"
-            :style="[activeIndex === index?subActNameComp:subNameComp]"
+            :style="[
+              activeIndex === index?subActNameComp:subNameComp,
+              {marginLeft: index === 0? `${spacing}rpx`: 0},
+              {maxWidth: getItemWidth(item) + 'rpx'}
+            ]"
           >{{item.subName}}</view>
+          <view
+            class="xAbsolute triangle"
+            v-if="xAbsolute === 'triangle' && activeIndex === index"
+            :style="[{left: `calc(50% + ${index === 0 ? '24rpx': '0rpx'})`}]"
+          >
+            <xd-font-icon icon="iconrepository-xialaxuanxiangup" size="22" :color="actColor||styleMainColor"></xd-font-icon>
+          </view>
+          <view
+            class="xAbsolute center"
+            v-if="xAbsolute === 'center' &&  activeIndex === index"
+            :style="[
+              {background: activeIndex === index? (actColor||styleMainColor): color},
+              {left: `calc(50% + ${index === 0 ? `${spacing/2}rpx`: '0rpx'})`}
+            ]"
+          ></view>
         </view>
 			</view>
 		</scroll-view>
+    <view class="center" v-if="xAbsolute === 'center'">
+      <view :style="{left:left, background: styleMainColor}"></view>
+    </view>
 		<view
       class="tab-icons"
       @click="handleClickSetting"
@@ -90,6 +126,10 @@
           return {}
         },
       },
+      spacing:{
+        type: Number,
+        default: 40
+      },
       settingWidth: {
         type: Number,
         default: 70
@@ -148,6 +188,14 @@
         type: Number | String, //rpx
         default: 500
       },
+      bgcColor: {
+        type: String,
+        default: ''
+      },
+      actBgcColor: {
+        type: String,
+        default: ''
+      },
       height: {
         type: Number | String, //rpx
         default: 90
@@ -159,10 +207,11 @@
       actColor: {
         type: String,
         default: ''
-      }
+      },
     },
     data() {
       return {
+        eleID:null,
         activeIndex: 0,
         toView: null,
         styleMainColor: '', //插件主题风格样式
@@ -174,6 +223,11 @@
 
         xAbsolute: 'absolute',//绝对定位｜无
         styleSolid: 'Y',
+        itemWidth: 0,
+
+        //居中处理
+        left:0,
+        boxWidth:0
       };
     },
 
@@ -185,19 +239,17 @@
         return 0;
       },
       footerStyleComp(){
-        //circle/line/none/trigon/desc
         let temp = {};
         temp['bottom'] = this.lineBottom + 'rpx';
         if(this.styleType === 'line') {
           temp['height'] = this.styleHeight + 'rpx';
-          temp['left'] = this.styleLong;
-          temp['right'] = this.styleLong;
+          temp['width'] = '64rpx';
+          temp['transform'] = 'translateX(-50%)';
           temp['borderRadius'] = this.styleRadius;
         }
         if(this.styleType === 'circle'){
           temp['height'] = this.styleHeight + 'rpx';
           temp['width'] = this.styleHeight + 'rpx';
-          temp['left'] = '50%';
           temp['marginLeft'] = -this.styleHeight/2 + 'rpx'
           temp['borderRadius'] = this.styleRadius;
         }
@@ -211,7 +263,6 @@
         temp['backgroundColor'] = '#fff';
         if(this.styleType === 'circle'){
           temp['borderRadius'] = '50%';
-
         }
         return temp
       },
@@ -251,6 +302,7 @@
       },
     },
     async created() {
+      this.eleID = `tab-${this.$xdUniHelper.randomChar(5)}`;
       this.initStyle();
       this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
 		},
@@ -270,6 +322,14 @@
           this.toView = `tab-scroll__index-${this.tabIndex}`;
           this.$emit('onInit', this.list[this.activeIndex], this.activeIndex);
 				}
+
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select(`#${this.eleID }`)
+          .boundingClientRect((data) => {
+            this.boxWidth = data.width;
+          })
+          .exec();
       });
     },
 
@@ -278,10 +338,19 @@
         let arr = this.footerStyle.split('-');
         this.styleType = arr[0];
         this.xAbsolute = 'absolute';
+
         if(this.styleType === 'desc') {
           this.xAbsolute = 'none';
         }
 
+        if(this.styleType === 'center') {
+          this.xAbsolute = 'center';
+        }
+
+        if(this.styleType === 'triangle') {
+          this.xAbsolute = 'triangle';
+        }
+
         //圆与三角
         if(arr.length === 3) {
           this.styleHeight = this.styleWidth =  Number(arr[1])
@@ -293,14 +362,25 @@
 
         //线
         if(arr.length === 4) {
-          this.styleHeight = arr[2];
-          this.styleRadius = arr[1] + 'rpx';
+          this.styleHeight = 6;
+          this.styleRadius = 4 + 'rpx';
           if(arr[3] === 'l') this.styleLong = '20rpx'
           else this.styleLong = '35%'
         }
 
       },
 
+      getItemWidth(item){
+        let maxFontSize = Math.max(parseInt(this.actFontSize),parseInt(this.fontSize))
+        let nameWidth =  item.name.length * maxFontSize;
+        let actFontSize = Math.max(parseInt(this.subNameStyle['actFontSize']||24),parseInt(this.subNameStyle['fontSize']||24))
+        let subNameWidth = this.xAbsolute==='none' ? (item.subName.length * actFontSize): 0;
+        if(this.actBgcColor || this.bgcColor) {
+          nameWidth += 16*2
+        }
+        return Math.max(nameWidth,subNameWidth);
+      },
+
 			clickTab(item, index) {
 				this.activeIndex = index;
         this.toView = `tab-scroll__index-${this.activeIndex}`;
@@ -309,6 +389,14 @@
       handleClickSetting(){
 			  this.$emit('onSetting');
       },
+
+      handleScroll({detail}){
+        if(this.xAbsolute === 'center'){
+          let maxScrollW = detail.scrollWidth - this.boxWidth;
+          this.left = ((detail.scrollLeft* 30 * this.$rpxNum)/ maxScrollW) + 'px';
+        }
+
+      }
 		}
 	}
 </script>
@@ -322,10 +410,30 @@
     flex-wrap: wrap;
     overflow: hidden;
     padding: 0;
-    height: unit(100, rpx);
+    position: relative;
 		&.noBorder {
 			border-bottom: 1px #f5f5f5 solid;
 		}
+    & > .center {
+      position: absolute;
+      height: 8rpx;
+      left: 50%;
+      bottom: 8rpx;
+      width: 80rpx;
+      margin-left: -40rpx;
+      border-radius: 5rpx;
+      background-color: #ccc;
+      overflow: hidden;
+      &> view {
+        position: absolute;
+        top:0;
+        bottom: 0;
+        width: 50rpx;
+        border-radius: 5rpx;
+        height: 8rpx;
+        background-color: #ccc;
+      }
+    }
 
 		.tab-scroll {
 			.tab-scroll__box {
@@ -335,19 +443,29 @@
 				box-sizing: border-box;
 
 				.tab-scroll__item {
+          position: relative;
 					flex-shrink: 0;
-					padding: 0 unit(20, rpx);
+					padding: 0;
 					color: #333;
 					font-size: unit(30, rpx);
 					height: unit(100, rpx);
-          position: relative;
 					display: flex;
 					align-items: center;
 					align-content: center;
           flex-flow: column;
+          text-align: center;
+          &:first-child {
+            margin-left: 0!important;
+          }
+
+          &.desc {
+            justify-content: center;
+            min-width: 3.5rem;
+          }
+
 
 
-					&.active {
+          &.active {
 						color: @xd-base-color;
 					}
 
@@ -358,15 +476,34 @@
             display: flex;
             justify-content: center;
             align-items: center;
+            line-height: 1.1rem;
+
+            &.triangle {
+              bottom: unit(0,rpx);
+              transform: translateX(-50%);
+            }
+
+            &.center {
+              position: absolute;
+              bottom: 22rpx;
+              width: 70rpx;
+              height: 10rpx;
+              opacity: .25;
+              border-radius:40%;
+              z-index: 0;
+              transform: translateX(-50%);
+            }
           }
 
           & > view.none {
-            padding: 0 10rpx;
+            padding:0;
+            text-align: center;
             color:#000;
-            border-radius:20rpx;
-            font-size: 20rpx;
-            line-height: 1.2rem;
-            margin-top: 4rpx;
+            border-radius:18rpx;
+            width: 100%;
+            font-size: 24rpx;
+            line-height: 36rpx;
+            height: 36rpx;
           }
 				}
 			}

package/src/components/CusVipList/CusVipList.vue

@@ -0,0 +1,169 @@
+<template>
+  <view class="vip-list_wrap">
+    <view class="vip_cards-header">
+      <xd-font-icon icon="iconPLUShuiyuan" :size="24" color="#FCBF28"></xd-font-icon>
+      <view class="vip_title">开通会员，本单可省
+        <text class="vip_title-price"> {{$xdUniHelper.divisionFloatNumber(plus_saving_money, 100)}}</text>
+         <!-- <xd-unit :price="plus_saving_money" :isOld="false" :fontSize="24" :iconSize="0.3" style="margin-left: 8rpx;"></xd-unit> -->
+      </view>
+    </view>
+    <view class="vip_cards-body">
+      <view class="vip_card_list">
+        <view class="vip_item" :class="{active: vipCardId==item.vip_card_id}"
+          v-for="item in list" :key="item.vip_card_id"
+          @click="handleChoseVipCard(item)"
+        >
+          <view class="vip_name">{{ item.product_name }}</view>
+          <view class="vip_img">
+            <image :src="item.vip_card_icon"></image>
+          </view>
+          <view class="vip_price">{{ $xdUniHelper.divisionFloatNumber(item.sale_price, 100) }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdUnit from "@/components/XdUnit/XdUnit"
+  import getServiceUrl from "@/common/getServiceUrl"
+  export default {
+    components: {
+      XdFontIcon,
+      XdUnit
+    },
+    props: {
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      vip_card_id: {
+        type: Number,
+        default: 0
+      },
+      plus_saving_money: {
+        type: Number,
+        default: 0
+      }
+    },
+    watch: {
+      vip_card_id(val){
+        this.vipCardId = val;
+      },
+      list(val){
+        this.uiList = val.map(item => {
+          item.vip_card_icon = getServiceUrl(item.vip_card_icon, 'size2');
+          return item;
+        });
+      }
+    },
+    data(){
+      return {
+        vipCardId: "",
+        uiList: []
+      }
+    },
+    created(){
+      this.vipCardId = this.vip_card_id;
+      this.uiList = this.list.map(item => {
+        item.vip_card_icon = getServiceUrl(item.vip_card_icon, 'size2');
+        return item;
+      });
+    },
+    methods: {
+      handleChoseVipCard(item){
+        if(this.vipCardId === item.vip_card_id){
+          this.vipCardId = "";
+        }else{
+          this.vipCardId = item.vip_card_id;
+        }
+        this.$emit("choseVipCard", this.vipCardId);
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .vip-list_wrap{
+    padding: 24rpx 0;
+    background-color: #FFFFFF;
+    .vip_cards-header{
+      padding: 0 40rpx 24rpx;
+      display: flex;
+      align-items: center;
+      border-bottom: 2rpx solid #F6F6F6;
+      .vip_title{
+        color: #86541E;
+        font-size: 24rpx;
+        font-weight: 400;
+        margin-left: 8rpx;
+        display: flex;
+        align-items: center;
+        &-price{
+          color: #FF5A39;
+          font-weight: bold;
+          margin-left: 8rpx;
+        }
+      }
+    }
+    .vip_cards-body{
+      padding: 24rpx 0 0;
+
+      .vip_card_list{
+        width: 100%;
+        overflow: auto;
+        white-space: nowrap;
+        padding: 0 20rpx;
+        box-sizing: border-box;
+
+        .vip_item{
+          width: 160rpx;
+          height: 160rpx;
+          border: 4rpx solid #EEEEEE;
+          background-color: #EEEEEE;
+          border-radius: 24rpx;
+          box-sizing: border-box;
+          display: inline-flex;
+          flex-direction: column;
+          align-items: center;
+          margin: 0 18rpx;
+          padding: 16rpx 0;
+          color: #999999;
+          filter: grayscale(1);
+          &.active{
+            color: #AB6900;
+            border-color: #AB6900;
+            background-color: #FFF8ED;
+            filter: grayscale(0);
+          }
+
+          .vip_name{
+            line-height: 1;
+            font-size: 16rpx;
+            font-weight: 500;
+          }
+          .vip_img{
+            width: 120rpx;
+            height: 60rpx;
+            border-radius: 7rpx;
+            margin: 8rpx 0;
+            display: inline-block;
+            box-sizing: border-box;
+            image{
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .vip_price{
+            line-height: 1;
+            font-size: 36rpx;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/JfbMallConfirm/Api.js

@@ -240,7 +240,7 @@ module.exports = [
     disabled: true
   },
   {
-    mapFnName: "getPayMethod",
+    mapFnName: "getMallPayMethod",
     title: "订单支付-获取支付列表",
     path: "/pay/v1/wallet/list-user-available-pay-method",
     isRule: false,