diff --git a/buyer/src/components/goodsDetail/ShowGoods.vue b/buyer/src/components/goodsDetail/ShowGoods.vue index cc916800..7b844042 100644 --- a/buyer/src/components/goodsDetail/ShowGoods.vue +++ b/buyer/src/components/goodsDetail/ShowGoods.vue @@ -76,7 +76,6 @@
-
@@ -84,14 +83,23 @@ 价     格
-
{{ - item | unitPrice("¥") - }}
+
+ {{ item | unitPrice("¥") }} +
起 批 量
-
{{item}}{{skuDetail.goodsUnit}}
- +
+ {{ item }}{{ skuDetail.goodsUnit }} +
@@ -106,24 +114,47 @@ -
-

+

+

优 惠 券 - - 满{{ item.consumeThreshold }}减{{ item.price }} - 满{{ item.consumeThreshold }}打{{ - item.couponDiscount - }}折 + + 满{{ item.consumeThreshold }}减{{ item.price }} + 满{{ item.consumeThreshold }}打{{ + item.couponDiscount + }}折 + + +

@@ -285,7 +316,7 @@ export default { detail: { handler(val) { this.skuDetail = val.data; - this.wholesaleList = val.wholesaleList + this.wholesaleList = val.wholesaleList; this.swiperGoodsImg(); }, deep: true, @@ -294,7 +325,7 @@ export default { }, data() { return { - wholesaleList:[], + wholesaleList: [], count: 1, // 商品数量 imgIndex: 0, // 展示图片下标 currentSelceted: [], // 当前商品sku @@ -313,17 +344,24 @@ export default { loading: false, // 立即购买loading loading1: false, // 加入购物车loading isCollected: false, // 是否收藏 - }; }, components: { PicZoom, Promotion }, computed: { - wholesalePrice(key){ - return this.wholesaleList.length ? this.wholesaleList.map(item=>{ return item.price }) :[] + 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; + }) + : []; }, - wholesaleNum(key){ - return this.wholesaleList.length ? this.wholesaleList.map(item=>{ return item.num }) :[] - } }, methods: { select(index, value) { @@ -519,23 +557,22 @@ export default { width: 175px; margin-left: 30px; } -.flex{ +.flex { display: flex; } .inventory { padding-left: 4px; } - .wrapper { @include white_background_color(); } -.item-num{ - text-align:center; +.item-num { + text-align: center; width: 100px; } -.item-price-num{ +.item-price-num { font-size: 16px; color: #666; } @@ -647,14 +684,65 @@ export default { margin-left: 5px; } +.item-price-coupon-row { + display: flex; + align-items: center; + margin: 5px 0px; +} + +.Ellipsis { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; //控制显示几行 + -webkit-box-orient: vertical; //webbox方向 +} + +.dropdown { + position: relative; + display: inline-block; + cursor: pointer; + z-index: 999; +} + +.dropdown .item-coupon { + display: flex; + align-content: center; + align-items: center; + color: $theme_color; + margin: 5px 0; + font-size: 12px; + background-color: #ffdedf; + border: 1px dotted $theme_color; + cursor: pointer; + + span { + padding: 3px; + } +} +.dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + padding: 12px 16px; +} +.dropdown:hover .dropdown-content { + display: block; +} + .item-coupon { margin-right: 5px; - padding: 3px; + padding: 0 5px; color: $theme_color; font-size: 12px; background-color: #ffdedf; border: 1px dotted $theme_color; cursor: pointer; + + span { + padding: 3px; + } } .item-promotion { margin-right: 5px; @@ -663,8 +751,17 @@ export default { font-size: 12px; border: 1px solid $theme_color; } + +.item-price-right { + display: flex; + align-content: center; + align-items: center; +} + .item-remarks-sum { - padding-left: 8px; + width: 70px; + text-align: center; + padding: 0 10px; border-left: 1px solid $border_color; }