|
|
@@ -14,80 +14,82 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<img v-if="carousel && carousel.length > 0" :src="carousel[carouselIndex]" alt="" class="carousel-img" />
|
|
|
- <div class="head-right flex-column-between">
|
|
|
- <div>
|
|
|
- <div class="right-title">{{ dataInfo.itemName || '' }}</div>
|
|
|
- <div class="right-num">商品库存 {{ dataInfo.stock || 0 }}套</div>
|
|
|
- <div class="right-price flex-row-between">
|
|
|
- <div class="flex-row-start">
|
|
|
- <div class="price1">
|
|
|
- <span>¥</span>
|
|
|
- <span style="font-size: 24px">{{ dataInfo.standardPrice || 0 }}</span>
|
|
|
+ <el-affix :offset="0">
|
|
|
+ <div class="head-right flex-column-between">
|
|
|
+ <div>
|
|
|
+ <div class="right-title">{{ dataInfo.itemName || '' }}</div>
|
|
|
+ <div class="right-num">商品库存 {{ dataInfo.stock || 0 }}套</div>
|
|
|
+ <div class="right-price flex-row-between">
|
|
|
+ <div class="flex-row-start">
|
|
|
+ <div class="price1">
|
|
|
+ <span>¥</span>
|
|
|
+ <span style="font-size: 24px">{{ dataInfo.standardPrice || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="price2">平台价</div>
|
|
|
+ <div class="price3">
|
|
|
+ <span>¥</span>
|
|
|
+ <span style="font-size: 16px">{{ dataInfo.midRangePrice || 0 }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="price2">平台价</div>
|
|
|
- <div class="price3">
|
|
|
- <span>¥</span>
|
|
|
- <span style="font-size: 16px">{{ dataInfo.midRangePrice || 0 }}</span>
|
|
|
+ <div class="right-collect flex-row-start" @click="editCollection">
|
|
|
+ <el-icon v-if="collection" :size="16" color="#e7000b"><StarFilled /></el-icon>
|
|
|
+ <el-icon v-else class="icon-star" :size="16"><Star /></el-icon>
|
|
|
+ <!-- <img src="@/assets/images/dark.svg" alt="" /> -->
|
|
|
+ <span>{{ collection ? '已收藏' : '收藏' }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="right-collect flex-row-start" @click="editCollection">
|
|
|
- <el-icon v-if="collection" :size="16" color="#e7000b"><StarFilled /></el-icon>
|
|
|
- <el-icon v-else class="icon-star" :size="16"><Star /></el-icon>
|
|
|
- <!-- <img src="@/assets/images/dark.svg" alt="" /> -->
|
|
|
- <span>{{ collection ? '已收藏' : '收藏' }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="address flex-row-start">
|
|
|
- <img class="address-img" src="@/assets/images/item1.png" alt="" />
|
|
|
- <div style="margin-right: 10px">配送至</div>
|
|
|
- <el-cascader v-model="regionCodes" :options="regionData as any" :placeholder="'请选择省/市/区'" style="width: 260px" />
|
|
|
- <!-- <el-icon color="#000000" size="15">
|
|
|
+ <div class="address flex-row-start">
|
|
|
+ <img class="address-img" src="@/assets/images/item1.png" alt="" />
|
|
|
+ <div style="margin-right: 10px">配送至</div>
|
|
|
+ <el-cascader v-model="regionCodes" :options="regionData as any" :placeholder="'请选择省/市/区'" style="width: 260px" />
|
|
|
+ <!-- <el-icon color="#000000" size="15">
|
|
|
<ArrowDown />
|
|
|
</el-icon> -->
|
|
|
- </div>
|
|
|
- <div class="specs-bos">
|
|
|
- <div class="specs-list">
|
|
|
- <div>商品编号</div>
|
|
|
- <div class="specs-item hig">
|
|
|
- {{ dataInfo.productNo }}
|
|
|
- </div>
|
|
|
- <div class="specs-box"></div>
|
|
|
</div>
|
|
|
- <div class="specs-list">
|
|
|
- <div>单位</div>
|
|
|
- <div class="specs-item hig">
|
|
|
- {{ dataInfo.unitName }}
|
|
|
+ <div class="specs-bos">
|
|
|
+ <div class="specs-list">
|
|
|
+ <div>商品编号</div>
|
|
|
+ <div class="specs-item hig">
|
|
|
+ {{ dataInfo.productNo }}
|
|
|
+ </div>
|
|
|
+ <div class="specs-box"></div>
|
|
|
</div>
|
|
|
- <div class="specs-box"></div>
|
|
|
- </div>
|
|
|
- <div class="specs-list">
|
|
|
- <div>规格型号</div>
|
|
|
- <div class="specs-item hig">
|
|
|
- {{ dataInfo.specification }}
|
|
|
+ <div class="specs-list">
|
|
|
+ <div>单位</div>
|
|
|
+ <div class="specs-item hig">
|
|
|
+ {{ dataInfo.unitName }}
|
|
|
+ </div>
|
|
|
+ <div class="specs-box"></div>
|
|
|
+ </div>
|
|
|
+ <div class="specs-list">
|
|
|
+ <div>规格型号</div>
|
|
|
+ <div class="specs-item hig">
|
|
|
+ {{ dataInfo.specification }}
|
|
|
+ </div>
|
|
|
+ <div class="specs-box"></div>
|
|
|
+ </div>
|
|
|
+ <div class="specs-list">
|
|
|
+ <div>UPC(69)条码</div>
|
|
|
+ <div class="specs-item hig">
|
|
|
+ {{ dataInfo.upcBarcode }}
|
|
|
+ </div>
|
|
|
+ <div class="specs-box"></div>
|
|
|
</div>
|
|
|
- <div class="specs-box"></div>
|
|
|
</div>
|
|
|
- <div class="specs-list">
|
|
|
- <div>UPC(69)条码</div>
|
|
|
- <div class="specs-item hig">
|
|
|
- {{ dataInfo.upcBarcode }}
|
|
|
+ <div class="number-bos">
|
|
|
+ <div>数量</div>
|
|
|
+ <div class="flex-row-start number-box">
|
|
|
+ <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
|
|
|
+ <div style="margin-left: 10px">本产品限购2件</div>
|
|
|
</div>
|
|
|
- <div class="specs-box"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="number-bos">
|
|
|
- <div>数量</div>
|
|
|
- <div class="flex-row-start number-box">
|
|
|
- <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
|
|
|
- <div style="margin-left: 10px">本产品限购2件</div>
|
|
|
- </div>
|
|
|
+ <div class="bnt-bos flex-row-start">
|
|
|
+ <div @click="onCart">加入购物车</div>
|
|
|
+ <!-- <div>立即购买</div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="bnt-bos flex-row-start">
|
|
|
- <div @click="onCart">加入购物车</div>
|
|
|
- <!-- <div>立即购买</div> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </el-affix>
|
|
|
</div>
|
|
|
<div class="nav-bos flex-row-start">
|
|
|
<div @click="onNav(index)" v-for="(item, index) in navList" :key="index" :class="navIndex == index ? 'hig' : ''">{{ item.title }}</div>
|
|
|
@@ -307,7 +309,6 @@ const onCart = () => {
|
|
|
});
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
.shop-pages {
|
|
|
width: 1200px;
|
|
|
@@ -525,6 +526,9 @@ const onCart = () => {
|
|
|
.pcDetail {
|
|
|
width: 696px;
|
|
|
margin-top: 20px;
|
|
|
+ :deep(img) {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.service {
|
chenying2100