批量价格显示的样式

buyer/src/components/goodsDetail/ShowGoods.vue

@@ -7,8 +7,18 @@
         <div class="item-detail-big-img">
           <pic-zoom :url="imgList[imgIndex].url" :scale="2"></pic-zoom>
         </div>
-        <div v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'" style="margin-top:10px;rgb(153, 149, 149);">实物商品</div>
+        <div
-        <div v-else-if="skuDetail.goodsType == 'VIRTUAL_GOODS'" style="margin-top:10px;rgb(153, 149, 149);">虚拟商品</div>
+          v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'"
+          style="margin-top:10px;rgb(153, 149, 149);"
+        >
+          实物商品
+        </div>
+        <div
+          v-else-if="skuDetail.goodsType == 'VIRTUAL_GOODS'"
+          style="margin-top:10px;rgb(153, 149, 149);"
+        >
+          虚拟商品
+        </div>
         <div class="item-detail-img-row">
           <div
             class="item-detail-img-small"
@@ -22,9 +32,10 @@
 
         <div class="goodsConfig mt_10">
           <span @click="collect"
-            ><Icon type="ios-heart" :color="isCollected ? '#ed3f14' : '#666'" />{{
+            ><Icon
-              isCollected ? "已收藏" : "收藏"
+              type="ios-heart"
-            }}</span
+              :color="isCollected ? '#ed3f14' : '#666'"
+            />{{ isCollected ? "已收藏" : "收藏" }}</span
           >
         </div>
       </div>
@@ -46,9 +57,11 @@
         <!-- 商品详细 价格、优惠券、促销 -->
         <div class="item-detail-price-row">
           <div class="item-price-left">
-            
             <!-- 秒杀价格 -->
-            <div class="item-price-row" v-if="skuDetail.promotionPrice && promotionMap['SECKILL']">
+            <div
+              class="item-price-row"
+              v-if="skuDetail.promotionPrice && promotionMap['SECKILL']"
+            >
               <p>
                 <span class="item-price-title" v-if="promotionMap['SECKILL']"
                   >秒 &nbsp;杀&nbsp;价</span
@@ -63,10 +76,34 @@
             </div>
             <!-- 商品原价 -->
             <div class="item-price-row" v-else>
-              <p>
+              <!-- 普通价格 -->
-                <span class="item-price-title">价 &nbsp;&nbsp;&nbsp;&nbsp;格</span>
+              <div>
-                <span class="item-price">{{ skuDetail.price | unitPrice("￥") }}</span>
+                <span class="item-price-title"
-              </p>
+                  >价 &nbsp;&nbsp;&nbsp;&nbsp;格</span
+                >
+                <span class="item-price">{{
+                  skuDetail.price | unitPrice("￥")
+                }}</span>
+              </div>
+              <!-- 批发价格 -->
+              <div>
+                <div class="flex">
+                  <div class="item-price-title">
+                    价 &nbsp;&nbsp;&nbsp;&nbsp;格
+                  </div>
+                  <div class="item-price item-num">{{
+                    skuDetail.price | unitPrice("￥")
+                  }}</div>
+                  <div class="item-price item-num">{{
+                    skuDetail.price | unitPrice("￥")
+                  }}</div>
+                </div>
+                <div class="flex">
+                  <div class="item-price-title">起 批 量</div>
+                  <div class="item-num item-price-num">20-39</div>
+                  <div class="item-num item-price-num">40-90</div>
+                </div>
+              </div>
             </div>
             <!-- 优惠券展示 -->
             <div class="item-price-row" v-if="promotionMap['COUPON'].length">
@@ -82,7 +119,9 @@
                     >满{{ item.consumeThreshold }}减{{ item.price }}</span
                   >
                   <span v-if="item.couponType == 'DISCOUNT'"
-                    >满{{ item.consumeThreshold }}打{{ item.couponDiscount }}折</span
+                    >满{{ item.consumeThreshold }}打{{
+                      item.couponDiscount
+                    }}折</span
                   >
                 </span>
               </p>
@@ -90,7 +129,9 @@
             <!-- 满减展示 -->
             <div class="item-price-row" v-if="promotionMap['FULL_DISCOUNT']">
               <p>
-                <span class="item-price-title">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
+                <span class="item-price-title"
+                  >促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span
+                >
                 <span class="item-promotion">满减</span>
                 <span
                   class="item-desc-pintuan"
@@ -101,7 +142,10 @@
                 >
                 <span
                   class="item-desc-pintuan"
-                  v-if="promotionMap['FULL_DISCOUNT'].fullRate && promotionMap['FULL_DISCOUNT'].fullRateFlag"
+                  v-if="
+                    promotionMap['FULL_DISCOUNT'].fullRate &&
+                    promotionMap['FULL_DISCOUNT'].fullRateFlag
+                  "
                   >满{{ promotionMap["FULL_DISCOUNT"].fullMoney }}元，立享{{
                     promotionMap["FULL_DISCOUNT"].fullRate
                   }}折</span
@@ -113,23 +157,34 @@
             <div class="item-remarks-sum">
               <p>累计评价</p>
               <p>
-                <span class="item-remarks-num">{{ skuDetail.commentNum || 0 }} 条</span>
+                <span class="item-remarks-num"
+                  >{{ skuDetail.commentNum || 0 }} 条</span
+                >
               </p>
             </div>
           </div>
         </div>
         <!-- 选择颜色 -->
-        <div class="item-select" v-for="(sku, index) in formatList" :key="sku.name">
+        <div
+          class="item-select"
+          v-for="(sku, index) in formatList"
+          :key="sku.name"
+        >
           <div class="item-select-title">
             <p>{{ sku.name }}</p>
           </div>
           <div class="item-select-column">
-            <div class="item-select-row" v-for="item in sku.values" :key="item.value">
+            <div
+              class="item-select-row"
+              v-for="item in sku.values"
+              :key="item.value"
+            >
               <div
                 class="item-select-box"
                 @click="select(index, item.value)"
                 :class="{
-                  'item-select-box-active': item.value === currentSelceted[index],
+                  'item-select-box-active':
+                    item.value === currentSelceted[index],
                 }"
               >
                 <div class="item-select-intro">
@@ -158,7 +213,9 @@
           </div>
           <div
             class="item-select"
-            v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS' && skuDetail.weight !== 0"
+            v-if="
+              skuDetail.goodsType !== 'VIRTUAL_GOODS' && skuDetail.weight !== 0
+            "
           >
             <div class="item-select-title">
               <p>重量</p>
@@ -224,13 +281,25 @@ export default {
       default: null,
     },
   },
+  watch: {
+    detail: {
+      handler(val) {
+        this.skuDetail = val.data;
+        this.swiperGoodsImg();
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   data() {
     return {
       count: 1, // 商品数量
       imgIndex: 0, // 展示图片下标
       currentSelceted: [], // 当前商品sku
       imgList: [{ url: "" }], // 商品图片列表
-      skuDetail: this.detail.data, // sku详情
+      skuDetail: {
+        specList: [],
+      }, // sku详情
       goodsSpecList: this.detail.specs, // 商品spec
       promotionMap: {
         // 活动状态
@@ -262,9 +331,9 @@ export default {
           return i;
         }
       });
-      this.$router.push({
+      this.$emit("handleClickSku", {
-        path: "/goodsDetail",
+        skuId: selectedSkuId.skuId,
-        query: { skuId: selectedSkuId.skuId, goodsId: this.skuDetail.goodsId },
+        goodsId: this.skuDetail.goodsId,
       });
     },
 
@@ -307,7 +376,10 @@ export default {
         .then((res) => {
           this.loading1 = false;
           if (res.success) {
-            this.$router.push({ path: "/pay", query: { way: params.cartType } });
+            this.$router.push({
+              path: "/pay",
+              query: { way: params.cartType },
+            });
           } else {
             this.$Message.warning(res.message);
           }
@@ -405,6 +477,13 @@ export default {
         }
       }
     },
+    swiperGoodsImg() {
+      this.skuDetail.specList.forEach((e) => {
+        if (e.specName === "images") {
+          this.imgList = e.specImage;
+        }
+      });
+    },
   },
   mounted() {
     // 用户登录才会判断是否收藏
@@ -415,11 +494,7 @@ export default {
         }
       });
     }
-    this.detail.data.specList.forEach((e) => {
+
-      if (e.specName === "images") {
-        this.imgList = e.specImage;
-      }
-    });
     this.formatSku(this.goodsSpecList);
     this.promotion();
     document.title = this.skuDetail.goodsName;
@@ -433,57 +508,25 @@ export default {
   width: 175px;
   margin-left: 30px;
 }
+.flex{
+  display: flex;
+}
 .inventory {
   padding-left: 4px;
 }
 
-.global_color {
-  text-align: center;
-}
-
-.see-Img {
-  width: 100%;
-  height: 175px;
-}
-
-.see-Item {
-  > p {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.Report {
-  color: $theme_color !important;
-}
 
 .wrapper {
   @include white_background_color();
 }
-.item-sale-flex {
+
-  width: 29%;
+.item-num{
-  padding: 0 3%;
+  text-align:center;
+  width: 100px;
 }
-.item-sale {
+.item-price-num{
-  margin: 10px 0;
+  font-size: 16px;
-  > h3 {
+  color: #666;
-    width: 13%;
-    text-align: center;
-    font-size: 20px;
-    line-height: 60px;
-    box-sizing: border-box;
-    border-right: 1px solid $border_color;
-  }
-  height: 60px;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  width: 1200px;
-  margin: 0 auto;
-  margin-bottom: 10px;
-  border: 1px solid $border_color;
-  background: #f7f7f7;
 }
 
 .item-detail-show {

buyer/src/pages/GoodsDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="background:#fff;">
+  <div style="background: #fff">
     <BaseHeader></BaseHeader>
     <Search></Search>
     <drawer></drawer>
@@ -8,25 +8,39 @@
       <div class="shop-nav-container">
         <Breadcrumb>
           <BreadcrumbItem to="/">首页</BreadcrumbItem>
-          <BreadcrumbItem v-for="(item, index) in categoryBar" :to="goGoodsList(index)" target="_blank" :key="index">
+          <BreadcrumbItem
+            v-for="(item, index) in categoryBar"
+            :to="goGoodsList(index)"
+            target="_blank"
+            :key="index"
+          >
             {{ item.name }}
           </BreadcrumbItem>
         </Breadcrumb>
         <div class="store-collect">
           <span class="mr_10" v-if="goodsMsg.data">
-
+            <router-link :to="'Merchant?id=' + goodsMsg.data.storeId">{{
-            <router-link :to="'Merchant?id=' + goodsMsg.data.storeId">{{ goodsMsg.data.storeName }}</router-link>
+              goodsMsg.data.storeName
+            }}</router-link>
           </span>
           <span @click="collect">
-            <Icon type="ios-heart" :color="storeCollected ? '#ed3f14' : '#666'" />
+            <Icon
-            {{storeCollected ? '已收藏店铺' : '收藏店铺'}}
+              type="ios-heart"
+              :color="storeCollected ? '#ed3f14' : '#666'"
+            />
+            {{ storeCollected ? "已收藏店铺" : "收藏店铺" }}
           </span>
           <span class="ml_10" @click="IMService()">联系客服</span>
         </div>
       </div>
     </div>
+
     <!-- 商品信息展示 -->
-    <ShowGoods v-if="goodsMsg.data" :detail="goodsMsg"></ShowGoods>
+    <ShowGoods
+      @handleClickSku="targetClickSku"
+      v-if="goodsMsg.data"
+      :detail="goodsMsg"
+    ></ShowGoods>
     <!-- 商品详细展示 -->
     <ShowGoodsDetail v-if="goodsMsg.data" :detail="goodsMsg"></ShowGoodsDetail>
 
@@ -73,13 +87,19 @@ export default {
     // 跳转im客服
     async IMService() {
       // 获取访问Token
-      let accessToken = Storage.getItem('accessToken');
+      let accessToken = Storage.getItem("accessToken");
       await this.getIMDetailMethods();
       if (!accessToken) {
         this.$Message.error("请登录后再联系客服");
         return;
       }
-      window.open(this.IMLink + "?token=" + accessToken + "&id=" + this.goodsMsg.data.storeId);
+      window.open(
+        this.IMLink +
+          "?token=" +
+          accessToken +
+          "&id=" +
+          this.goodsMsg.data.storeId
+      );
     },
     // 获取im信息
     async getIMDetailMethods() {
@@ -88,10 +108,18 @@ export default {
         this.IMLink = res.result;
       }
     },
+    // 点击规格
+    targetClickSku(val) {
+      // {skuId,goodId}
+      console.log("%c 规格信息", "color:green");
+      console.log(val);
+      this.getGoodsDetail(val);
+    },
     // 获取商品详情
-    getGoodsDetail() {
+    getGoodsDetail(val) {
       this.isLoading = true;
-      const params = this.$route.query;
+      const params = val || this.$route.query;
+
       // 分销员id
       let distributionId =
         params && params.distributionId
@@ -128,7 +156,7 @@ export default {
               });
             });
             this.categoryBar = cateArr;
-            this.goodsMsg = res.result;
+            this.$set(this, "goodsMsg", res.result);
             // 判断是否收藏
             if (this.Cookies.getItem("userInfo")) {
               isCollection("STORE", this.goodsMsg.data.storeId).then((res) => {
@@ -137,18 +165,20 @@ export default {
                 }
               });
             }
-            // 获取店铺信息
+            if (!this.storeMsg) {
-            getDetailById(this.goodsMsg.data.storeId).then((res) => {
+              // 获取店铺信息
-              if (res.success) {
+              getDetailById(this.goodsMsg.data.storeId).then((res) => {
-                this.storeMsg = res.result;
+                if (res.success) {
-              }
+                  this.storeMsg = res.result;
-            });
+                }
+              });
+            }
           } else {
             this.$Message.error(res.message);
             this.$router.push("/");
           }
         })
-        .catch(() => {
+        .catch((e) => {
           this.$router.push("/");
         });
     },
@@ -179,11 +209,7 @@ export default {
       }
     },
   },
-  watch: {
+  watch: {},
-    "$route.query.skuId": function (val) {
-      location.reload();
-    },
-  },
   components: {
     Search,
     ShopHeader,