批发商品展示

components/m-buy/goods.vue

@@ -1,29 +1,18 @@
 <template>
 	<div class="wrapper">
-    <u-popup
+		<u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode"
-      class="popup"
+			:border-radius="setup.radius" @close="closeMask()">
-      v-model="buyMask"
-      :height="setup.height"
-      closeable
-      :mode="setup.mode"
-      :border-radius="setup.radius"
-      @close="closeMask()"
-    >
 			<!-- 商品 -->
 			<view class="goods-box bottom">
 				<view class="goods-header">
 					<view class="goods-img">
-            <u-image
+						<u-image width="200rpx" border-radius="20" class="uimage" height="200rpx"
-              width="200rpx"
+							:src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"></u-image>
-              border-radius="20"
-              class="uimage"
-              height="200rpx"
-              :src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"
-            ></u-image>
 					</view>
 					<view class="goods-skus">
 						<!-- 有活动商品价格 -->
-            <view class="goods-price" v-if="goodsDetail.promotionPrice && ((isGroup && buyType === 'PINTUAN') || !isGroup)">
+						<view class="goods-price"
+							v-if="goodsDetail.promotionPrice && ((isGroup && buyType === 'PINTUAN') || !isGroup)">
 							<span v-if="goodsDetail.promotionPrice && !pointDetail">
 								￥
 								<span class="goods-price-promotionShow goods-price-bigshow">{{
@@ -46,7 +35,24 @@
 							</div>
 						</view>
 						<!-- 正常商品的价格 -->
-            <view class="goods-price" v-else>
+						<view v-else>
+							
+							<!-- 批发价格 -->
+							<div class='price-row flex' v-if="wholesaleList.length">
+								<div class='goods-price' v-for="(item,index) in wholesaleList" :key="index">
+									<span>
+										￥
+										<span class="goods-price-bigshow">{{
+									    formatPrice(item.price)[0]
+									  }}</span>
+										.{{ formatPrice(item.price)[1] }}
+									</span>
+									<span class='wholesale-item'>
+										{{item.num}}{{goodsDetail.goodsUnit}}
+									</span>
+								</div>
+							</div>
+							<div class="goods-price" v-else>
 								<span>
 									￥
 									<span class="goods-price-bigshow">{{
@@ -54,6 +60,7 @@
 							  }}</span>
 									.{{ formatPrice(goodsDetail.price)[1] }}
 								</span>
+							</div>
 						</view>
 						<view class="goods-check-skus">
 							已选
@@ -62,66 +69,46 @@
 								<span>，{{ num }}个</span>
 							</span>
 						</view>
+						<view class="goods-check-skus">
+							库存
+							<span class="goods-check-skus-name">
+								<span>{{ goodsDetail.quantity }}</span>
+							</span>
+						</view>
 					</view>
 				</view>
 				<!-- 商品信息 -->
 				<scroll-view class="goods-skus-box" :scroll-y="true">
 					<!-- 规格 -->
-          <view
+					<view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
-            class="goods-skus-view"
-            :key="specIndex"
-            v-for="(spec, specIndex) in formatList"
-          >
 						<view class="skus-view-list">
 							<view class="view-class-title">{{ spec.name }}</view>
 
 							<!-- 正常逻辑 循环出sku -->
-              <view
+							<view v-if="!parentOrder" :class="{ active: spec_val.value == currentSelceted[specIndex] }"
-                v-if="!parentOrder"
+								class="skus-view-item" v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
-                :class="{ active: spec_val.value == currentSelceted[specIndex] }"
+								@click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}
-                class="skus-view-item"
-                v-for="(spec_val, spec_index) in spec.values"
-                :key="spec_index"
-                @click="handleClickSpec(spec, specIndex, spec_val)"
-                >{{ spec_val.value }}
 							</view>
 
 							<!-- 拼团购买，仅筛选出当前拼团类型商品 -->
-              <view
+							<view v-if="parentOrder && spec_val.skuId == goodsDetail.id"
-                v-if="parentOrder && spec_val.skuId == goodsDetail.id"
+								:class="{ active: spec_val.value == currentSelceted[specIndex] }" class="skus-view-item"
-                :class="{ active: spec_val.value == currentSelceted[specIndex] }"
+								v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
-                class="skus-view-item"
+								@click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}
-                v-for="(spec_val, spec_index) in spec.values"
-                :key="spec_index"
-                @click="handleClickSpec(spec, specIndex, spec_val)"
-                >{{ spec_val.value }}
 							</view>
 						</view>
 					</view>
 					<!-- 数量 -->
 					<view class="goods-skus-number">
 						<view class="view-class-title">数量</view>
-            <u-number-box
+						
-              :bg-color="numberBox.bgColor"
+						<u-input style='text-align: right;' v-model="num" type="number"  />
-              :max="200"
-              :color="numberBox.color"
-              :input-width="numberBox.width"
-              :input-height="numberBox.height"
-              :size="numberBox.size"
-              :min="1"
-              v-model="num"
-            >
-            </u-number-box>
 					</view>
 				</scroll-view>
 				<!-- 按钮 -->
 				<view class="btns">
-          <view
+					<view class="box-btn card" v-if="buyType != 'PINTUAN' && goodsDetail.goodsType != 'VIRTUAL_GOODS'"
-            class="box-btn card"
+						@click="addToCartOrBuy('cart')">加入购物车</view>
-            v-if="buyType != 'PINTUAN' && goodsDetail.goodsType != 'VIRTUAL_GOODS'"
-            @click="addToCartOrBuy('cart')"
-            >加入购物车</view
-          >
 					<view class="box-btn buy" @click="addToCartOrBuy('buy')">立即购买</view>
 				</view>
 			</view>
@@ -137,14 +124,7 @@ export default {
 			return {
 				setup,
 				num: 1,
-      // 步进器的大小尺寸单位是 rpx
+				
-      numberBox: {
-        width: "50",
-        height: "50",
-        size: "22",
-        color: "#333",
-        bgColor: "#fff",
-      },
 				selectName: "", //选中商品的昵称
 				selectSkuList: "", //选中商铺sku,
 				selectedSpecImg: "", //选中的图片路径
@@ -154,9 +134,14 @@ export default {
 				currentSelceted: [],
 				skuList: "",
 				isClose: false, //是否可以点击遮罩关闭
+				
 			};
 		},
 		props: {
+			wholesaleList:{
+				type: null,
+				default: false,
+			},
 			buyMask: {
 				type: Boolean,
 				default: false,
@@ -186,7 +171,23 @@ export default {
 				type: null,
 			},
 		},
+		computed: {
+			wholesalePrice(key){
+				return this.wholesaleList.length ? this.wholesaleList.map(item=>{ return item.price }) :[]
+			},
+			wholesaleNum(key){
+				return this.wholesaleList.length ? this.wholesaleList.map(item=>{ return item.num }) :[]
+			}
+		},
 		watch: {
+			num(val){
+				if(val){
+					if(val > this.goodsDetail.quantity){
+						console.log(val)
+						this.val = this.goodsDetail.quantity
+					}
+				}
+			},
 			buyType: {
 				handler(val) {
 					if (val) {
@@ -398,7 +399,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 	@import "./popup.scss";
+	.price-row{
+		text-align: center;
 		
+	}
 	.buy {
 		background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
 		box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
@@ -419,6 +423,7 @@ export default {
 	.goods-skus-number {
 		justify-content: space-between;
 		display: flex;
+		text-align: right
 	}
 
 	/deep/ .uni-scroll-view {
@@ -464,6 +469,11 @@ export default {
 			}
 		}
 	}
+	.wholesale-item{
+		color: #999 !important;
+		font-size: 24rpx;
+		margin:0 20rpx;
+	}
 
 	.goods-header {
 		height: 200rpx;
@@ -483,8 +493,13 @@ export default {
 	.goods-price {
 		color: $price-color;
 		line-height: 80rpx;
-  display: flex;
+		>* {
+			color: $price-color;
+			line-height: 80rpx;
+	
 		}
+	}
+
 	.promotion-box {
 		line-height: 1;
 		display: flex;
@@ -492,22 +507,28 @@ export default {
 		text-decoration: line-through;
 		color: #999;
 		margin-left: 10rpx;
+
 		/deep/ span {
 			font-size: 30rpx;
 		}
 	}
+
 	.promotion {
 		font-size: 30rpx;
 	}
+
 	.goods-price-promotionShow {
 		font-size: 48rpx;
 	}
+
 	.goods-check-skus {
 		font-size: 24rpx;
 		color: #999;
+
 		>.goods-check-skus-name {
 			margin-left: 4rpx;
 		}
+
 		>span {
 			color: #333;
 		}

pages/navigation/search/searchPage.vue

@@ -152,12 +152,16 @@
                 </view>
 
                 <div class="promotion" @click="navigateToDetailPage(item)">
+									<div v-if="item.content.salesModel == 'WHOLESALE'">
+										<span>批</span>
+									</div>
                   <div v-for="(promotionItem,promotionIndex) in  getPromotion(item)" :key="promotionIndex">
                     <span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
                     <span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
                     <span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
                   </div>
                 </div>
+                
                 <div class="count-config" @click="navigateToDetailPage(item)">
                   <span>已售 {{ item.content.buyCount || "0" }}</span>
                   <span>{{ item.content.commentNum || "0" }}条评论</span>

pages/product/goods.vue

@@ -348,6 +348,7 @@
           :id="productId"
           v-if="goodsDetail.id"
           :pointDetail="pointDetail"
+					:wholesaleList="wholesaleList"
           @handleClickSku="selectSku"
           :buyMask="buyMask"
         />
@@ -523,6 +524,7 @@ export default {
 
       routerVal: "",
       IMLink: "", // IM地址
+			wholesaleList:[]
     };
   },
 
@@ -661,6 +663,7 @@ export default {
       }
       /**商品信息以及规格信息存储 */
       this.goodsDetail = response.data.result.data;
+      this.wholesaleList = response.data.result.wholesaleList;
       this.goodsSpec = response.data.result.specs;
       this.PromotionList = response.data.result.promotionMap;
       this.goodsParams = response.data.result.goodsParamsDTOList || [];

pages/tabbar/cart/cartList.vue

@@ -74,6 +74,7 @@
               </p>
               <!-- 规格 -->
               <p class="sp-type">{{skuItem.goodsSku.simpleSpecs}}</p>
+              <p class="sp-type" v-if="skuItem.goodsSku.salesModel == 'WHOLESALE'">批发商品</p>
               <p class="sp-number">
                 <view class="sp-price">
                   <div class="default-color" :class="{'main-color':Object.keys(skuItem.promotionMap).length ==0  }">