- 订单流程
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="goods">
|
||||
<headerNav title="商品详情"/>
|
||||
<headerNav title="商品详情"/>
|
||||
<van-swipe class="goods-swipe" :autoplay="3000">
|
||||
<van-swipe-item v-for="thumb in spu.picUrls" :key="thumb">
|
||||
<img :src="thumb" >
|
||||
<img :src="thumb">
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
@@ -14,63 +14,63 @@
|
||||
<div class="goods-title">{{ spu.name }}</div>
|
||||
<div class="goods-subtit">{{spu.sellPoint}}</div>
|
||||
</van-cell>
|
||||
|
||||
|
||||
<!--<van-cell @click="onClickShowTag" class="goods-tag" >-->
|
||||
<!--<template slot="title" style="font-size:10px;">-->
|
||||
<!--<img src="https://haitao.nos.netease.com/ba8a4c2fdaa54f82a45261293c116af61419663676663i46n3jlh10028.png"/>-->
|
||||
<!--<span >挪威品牌</span>-->
|
||||
<!--<img src="https://haitao.nosdn2.127.net/13bd59e6e29a4f06b278c586629e690d.png" />-->
|
||||
<!--<span >跨境商品</span>-->
|
||||
<!--<van-icon name="passed" color="red" />-->
|
||||
<!--<span >次日达</span>-->
|
||||
<!--<van-icon name="passed" color="red" />-->
|
||||
<!--<span >自提</span>-->
|
||||
<!--<van-icon name="passed" color="red" />-->
|
||||
<!--<span >闪电退款</span>-->
|
||||
<!--<van-icon name="passed" color="red" />-->
|
||||
<!--<span >前海保税仓</span>-->
|
||||
<!--<van-icon name="passed" color="red" />-->
|
||||
<!--<span >七天无理由退货(拆封后不支持)</span>-->
|
||||
<!--</template>-->
|
||||
<!--<template slot="title" style="font-size:10px;">-->
|
||||
<!--<img src="https://haitao.nos.netease.com/ba8a4c2fdaa54f82a45261293c116af61419663676663i46n3jlh10028.png"/>-->
|
||||
<!--<span >挪威品牌</span>-->
|
||||
<!--<img src="https://haitao.nosdn2.127.net/13bd59e6e29a4f06b278c586629e690d.png" />-->
|
||||
<!--<span >跨境商品</span>-->
|
||||
<!--<van-icon name="passed" color="red" />-->
|
||||
<!--<span >次日达</span>-->
|
||||
<!--<van-icon name="passed" color="red" />-->
|
||||
<!--<span >自提</span>-->
|
||||
<!--<van-icon name="passed" color="red" />-->
|
||||
<!--<span >闪电退款</span>-->
|
||||
<!--<van-icon name="passed" color="red" />-->
|
||||
<!--<span >前海保税仓</span>-->
|
||||
<!--<van-icon name="passed" color="red" />-->
|
||||
<!--<span >七天无理由退货(拆封后不支持)</span>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell> -->
|
||||
</van-cell-group>
|
||||
|
||||
|
||||
<!--<van-cell-group class="goods-cell-group">-->
|
||||
<!--<van-cell is-link @click="showPromotion" >-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<span style="margin-right: 10px;">领券</span>-->
|
||||
<!--<van-tag type="danger" mark style="margin-right: 5px;">满180减30</van-tag>-->
|
||||
<!--<van-tag type="danger" mark style="margin-right: 5px;">满300减100</van-tag>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!---->
|
||||
<!--<van-cell is-link @click="showPromotion" >-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<span style="margin-right: 10px;">促销</span>-->
|
||||
<!--<van-tag type="danger" style="margin-right: 5px;">多买优惠</van-tag>-->
|
||||
<!--<van-tag type="danger" style="margin-right: 5px;">满减</van-tag>-->
|
||||
<!--<van-tag type="danger" style="margin-right: 5px;">限购</van-tag>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--<van-cell is-link @click="showPromotion" >-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<span style="margin-right: 10px;">领券</span>-->
|
||||
<!--<van-tag type="danger" mark style="margin-right: 5px;">满180减30</van-tag>-->
|
||||
<!--<van-tag type="danger" mark style="margin-right: 5px;">满300减100</van-tag>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!---->
|
||||
<!--<van-cell is-link @click="showPromotion" >-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<span style="margin-right: 10px;">促销</span>-->
|
||||
<!--<van-tag type="danger" style="margin-right: 5px;">多买优惠</van-tag>-->
|
||||
<!--<van-tag type="danger" style="margin-right: 5px;">满减</van-tag>-->
|
||||
<!--<van-tag type="danger" style="margin-right: 5px;">限购</van-tag>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--</van-cell-group>-->
|
||||
|
||||
|
||||
<van-cell-group class="goods-cell-group">
|
||||
<van-cell is-link @click="showSku" >
|
||||
<van-cell is-link @click="showSku">
|
||||
<template slot="title">
|
||||
<span style="margin-right: 10px;">已选</span>
|
||||
<span>{{ formatSkuText(initialSku) }}</span>
|
||||
<span style="margin-right: 10px;">已选</span>
|
||||
<span>{{ formatSkuText(initialSku) }}</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
|
||||
</van-cell-group>
|
||||
|
||||
|
||||
<div class="goods-info">
|
||||
<p class="goods-info-title" >图文详情</p>
|
||||
<div v-html="spu.description"></div>
|
||||
<p class="goods-info-title">图文详情</p>
|
||||
<div v-html="spu.description"></div>
|
||||
</div>
|
||||
<van-goods-action>
|
||||
|
||||
|
||||
<van-goods-action-mini-btn icon="like-o" @click="sorry">
|
||||
收藏
|
||||
</van-goods-action-mini-btn>
|
||||
@@ -86,320 +86,349 @@
|
||||
</van-goods-action>
|
||||
|
||||
<!--<van-actionsheet v-model="show" title="促销" style="font-size:14px;">-->
|
||||
<!---->
|
||||
<!--<van-cell is-link @click="sorry" >-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-tag type="danger">多买优惠</van-tag>-->
|
||||
<!--<span> 满2件,总价打9折</span>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--<van-cell is-link @click="sorry" >-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-tag type="danger">满减</van-tag>-->
|
||||
<!--<span> 满100元减50元</span>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--<van-cell is-link @click="sorry" >-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-tag type="danger">限购</van-tag>-->
|
||||
<!--<span> 购买不超过5件时享受单件价¥8.00,超出数量以结算价为准</span>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!---->
|
||||
<!--<van-cell is-link @click="sorry" >-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-tag type="danger">多买优惠</van-tag>-->
|
||||
<!--<span> 满2件,总价打9折</span>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--<van-cell is-link @click="sorry" >-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-tag type="danger">满减</van-tag>-->
|
||||
<!--<span> 满100元减50元</span>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--<van-cell is-link @click="sorry" >-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-tag type="danger">限购</van-tag>-->
|
||||
<!--<span> 购买不超过5件时享受单件价¥8.00,超出数量以结算价为准</span>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--</van-actionsheet>-->
|
||||
|
||||
|
||||
<!--<van-actionsheet v-model="showTag" title="服务说明" style="font-size:14px;">-->
|
||||
<!---->
|
||||
<!--<van-cell>-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
|
||||
<!--<span >次日达</span>-->
|
||||
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">指定时间前下单,次日送达</div>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--<van-cell>-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
|
||||
<!--<span >自提</span>-->
|
||||
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">我们提供多种自提服务,包括自提点、自助提货柜、移动自提车等服务</div>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--<van-cell>-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
|
||||
<!--<span >闪电退款</span>-->
|
||||
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">签收7天内退货的,提供先退款后退货服务。</div>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--<van-cell>-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
|
||||
<!--<span >七天无理由退货(拆封后不支持)</span>-->
|
||||
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">七天无理由退货(拆封后不支持)</div>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--<van-cell>-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
|
||||
<!--<span >前海保税仓</span>-->
|
||||
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">本商品由前海保税仓发货</div>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!---->
|
||||
<!--<van-cell>-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
|
||||
<!--<span >次日达</span>-->
|
||||
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">指定时间前下单,次日送达</div>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--<van-cell>-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
|
||||
<!--<span >自提</span>-->
|
||||
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">我们提供多种自提服务,包括自提点、自助提货柜、移动自提车等服务</div>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--<van-cell>-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
|
||||
<!--<span >闪电退款</span>-->
|
||||
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">签收7天内退货的,提供先退款后退货服务。</div>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--<van-cell>-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
|
||||
<!--<span >七天无理由退货(拆封后不支持)</span>-->
|
||||
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">七天无理由退货(拆封后不支持)</div>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--<van-cell>-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
|
||||
<!--<span >前海保税仓</span>-->
|
||||
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">本商品由前海保税仓发货</div>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<!--</van-actionsheet>-->
|
||||
|
||||
<van-sku
|
||||
v-model="showBase"
|
||||
:sku="vanSku"
|
||||
:initial-sku="initialSku"
|
||||
:goods="vanSpu"
|
||||
:goods-id="spu.id"
|
||||
:hide-stock="hideStock"
|
||||
:close-on-click-overlay="closeOnClickOverlay"
|
||||
@stepper-change="stepperChange"
|
||||
@sku-selected="skuSelected"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
<!--:quota="skuData.quota"-->
|
||||
v-model="showBase"
|
||||
:sku="vanSku"
|
||||
:initial-sku="initialSku"
|
||||
:goods="vanSpu"
|
||||
:goods-id="spu.id"
|
||||
:hide-stock="hideStock"
|
||||
:close-on-click-overlay="closeOnClickOverlay"
|
||||
@stepper-change="stepperChange"
|
||||
@sku-selected="skuSelected"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
<!--:quota="skuData.quota"-->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import skuData from '../../data/sku';
|
||||
import { getProductSpuInfo } from '../../api/product';
|
||||
// import skuData from '../../data/sku';
|
||||
import {getProductSpuInfo} from '../../api/product';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
// this.skuData = skuData;
|
||||
return {
|
||||
spu: {}, // 商品信息
|
||||
vanSku: {
|
||||
tree: [], // 规格数组
|
||||
list: [], // sku 数组
|
||||
},
|
||||
// TODO 后面,要加 sku 的 title 和 picture
|
||||
vanSpu: {
|
||||
title: '',
|
||||
picture: '',
|
||||
},
|
||||
initialSku: { // 选中的 sku
|
||||
// 具体规格
|
||||
// price 价格
|
||||
// quantity 选中的数量
|
||||
},
|
||||
attrValueMap: new Map(), // 规格值的映射
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
// this.skuData = skuData;
|
||||
return {
|
||||
spu: {}, // 商品信息
|
||||
vanSku: {
|
||||
tree: [], // 规格数组
|
||||
list: [], // sku 数组
|
||||
},
|
||||
// TODO 后面,要加 sku 的 title 和 picture
|
||||
vanSpu: {
|
||||
title: '',
|
||||
picture: '',
|
||||
},
|
||||
initialSku: { // 选中的 sku
|
||||
// 具体规格
|
||||
// price 价格
|
||||
// quantity 选中的数量
|
||||
},
|
||||
attrValueMap: new Map(), // 规格值的映射
|
||||
|
||||
// show:false,
|
||||
// showTag:false,
|
||||
// goods: {
|
||||
// title: '【每日一粒益智又长高】 Lifeline Care 儿童果冻鱼油DHA维生素D3聪明长高 软糖 30粒 2件装',
|
||||
// subtitle:'【品牌直采】Q弹美味,无腥味果冻鱼油,每粒含足量鱼油DHA,帮助视网膜和大脑健康发育,让你的宝宝明眼又聪明,同时补充400国际单位维生素D3,强壮骨骼和牙齿。特含DPA,让宝宝免疫力更强,没病来扰。',
|
||||
// price: 2680,
|
||||
// market_price:9999,
|
||||
// express: '免运费',
|
||||
// remain: 19,
|
||||
// thumb: [
|
||||
// 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
|
||||
// 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
|
||||
// ],
|
||||
// info:'<p style="text-align:center;"><img src="https://haitao.nosdn2.127.net/ac19460151ee4d95a6657202bcfc653c1531470912089jjjq8ml410763.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/2a91cfad22404e5498d347672b1440301531470912182jjjq8mnq10764.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/caddd5a213de4c1cb1347c267e8275731531470912412jjjq8mu410765.jpg" ></p>',
|
||||
// },
|
||||
// show:false,
|
||||
// showTag:false,
|
||||
// goods: {
|
||||
// title: '【每日一粒益智又长高】 Lifeline Care 儿童果冻鱼油DHA维生素D3聪明长高 软糖 30粒 2件装',
|
||||
// subtitle:'【品牌直采】Q弹美味,无腥味果冻鱼油,每粒含足量鱼油DHA,帮助视网膜和大脑健康发育,让你的宝宝明眼又聪明,同时补充400国际单位维生素D3,强壮骨骼和牙齿。特含DPA,让宝宝免疫力更强,没病来扰。',
|
||||
// price: 2680,
|
||||
// market_price:9999,
|
||||
// express: '免运费',
|
||||
// remain: 19,
|
||||
// thumb: [
|
||||
// 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
|
||||
// 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
|
||||
// ],
|
||||
// info:'<p style="text-align:center;"><img src="https://haitao.nosdn2.127.net/ac19460151ee4d95a6657202bcfc653c1531470912089jjjq8ml410763.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/2a91cfad22404e5498d347672b1440301531470912182jjjq8mnq10764.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/caddd5a213de4c1cb1347c267e8275731531470912412jjjq8mu410765.jpg" ></p>',
|
||||
// },
|
||||
|
||||
showBase: false, // 是否显示 sku 坦诚
|
||||
closeOnClickOverlay: true, // 是否在点击蒙层后关闭
|
||||
hideStock: true, // 是否显示商品剩余库存
|
||||
showBase: false, // 是否显示 sku 坦诚
|
||||
closeOnClickOverlay: true, // 是否在点击蒙层后关闭
|
||||
hideStock: true, // 是否显示商品剩余库存
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatPrice(data) {
|
||||
return '¥' + (data / 100).toFixed(2);
|
||||
};
|
||||
},
|
||||
formatSkuText(data) { // 渲染已选择的 sku 的文本
|
||||
let text = '';
|
||||
for (let prop in data) {
|
||||
if (prop.indexOf('attr_') === 0) {
|
||||
text = text + this.attrValueMap.get(data[prop]) + ' ';
|
||||
methods: {
|
||||
formatPrice(data) {
|
||||
return '¥' + (data / 100).toFixed(2);
|
||||
},
|
||||
formatSkuText(data) { // 渲染已选择的 sku 的文本
|
||||
let text = '';
|
||||
for (let prop in data) {
|
||||
if (prop.indexOf('attr_') === 0) {
|
||||
text = text + this.attrValueMap.get(data[prop]) + ' ';
|
||||
}
|
||||
}
|
||||
}
|
||||
text = text + 'x ' + data.quantity + ' 件';
|
||||
return text;
|
||||
},
|
||||
text = text + 'x ' + data.quantity + ' 件';
|
||||
return text;
|
||||
},
|
||||
|
||||
stepperChange(value) { // 选择 sku 数量时
|
||||
this.initialSku.quantity = value;
|
||||
},
|
||||
skuSelected({skuValue, selectedSku, selectedSkuComb}) { // 选择 sku
|
||||
console.log(skuValue);
|
||||
console.log(selectedSku);
|
||||
console.log(selectedSkuComb);
|
||||
this.initialSku = {
|
||||
...selectedSkuComb,
|
||||
quantity: 1,
|
||||
};
|
||||
},
|
||||
|
||||
onClickCart() {
|
||||
this.$router.push('/cart');
|
||||
},
|
||||
sorry() {
|
||||
Toast('暂无后续逻辑~');
|
||||
},
|
||||
showPromotion() {
|
||||
this.show=true;
|
||||
},
|
||||
showSku() { // 展示 sku 选择
|
||||
this.showBase=true;
|
||||
},
|
||||
onClickShowTag(){
|
||||
this.showTag=true;
|
||||
},
|
||||
onBuyClicked(data) {
|
||||
this.$toast(JSON.stringify(data));
|
||||
},
|
||||
onAddCartClicked(data) {
|
||||
this.$toast(JSON.stringify(data));
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
let id = this.$route.params.id; // 商品编号
|
||||
let response = getProductSpuInfo(id);
|
||||
response.then(data => {
|
||||
// 设置 spu
|
||||
this.spu = data;
|
||||
// 初始化 vanSku
|
||||
let vanSku = {
|
||||
tree: [],
|
||||
list: [],
|
||||
};
|
||||
for (let i = 0; i < data.skus.length; i++) {
|
||||
let sku = data.skus[i];
|
||||
// list 商品 sku 信息
|
||||
let skuVO = {
|
||||
id: sku.id, // skuId,下单时后端需要
|
||||
price: sku.price, // 价格(单位分)
|
||||
stock_num: sku.quantity // 当前 sku 组合对应的库存
|
||||
stepperChange(value) { // 选择 sku 数量时
|
||||
this.initialSku.quantity = value;
|
||||
},
|
||||
skuSelected({skuValue, selectedSku, selectedSkuComb}) { // 选择 sku
|
||||
console.log(skuValue);
|
||||
console.log(selectedSku);
|
||||
console.log(selectedSkuComb);
|
||||
this.initialSku = {
|
||||
...selectedSkuComb,
|
||||
quantity: 1,
|
||||
};
|
||||
for (let j = 0; j < sku.attrs.length; j++) {
|
||||
let attr = sku.attrs[j];
|
||||
skuVO['attr_' + attr.attrId] =attr.attrValueId;
|
||||
}
|
||||
vanSku.list.push(skuVO);
|
||||
// tree 规格
|
||||
for (let j = 0; j < sku.attrs.length; j++) {
|
||||
let attr = sku.attrs[j];
|
||||
let attrVO;
|
||||
for (let k = 0; k < vanSku.tree.length; k++) {
|
||||
if (attr.attrName === vanSku.tree[k].k) {
|
||||
attrVO = vanSku.tree[k];
|
||||
break;
|
||||
},
|
||||
|
||||
onClickCart() {
|
||||
this.$router.push('/cart');
|
||||
},
|
||||
sorry() {
|
||||
Toast('暂无后续逻辑~');
|
||||
},
|
||||
showPromotion() {
|
||||
this.show = true;
|
||||
},
|
||||
showSku() { // 展示 sku 选择
|
||||
this.showBase = true;
|
||||
},
|
||||
onClickShowTag() {
|
||||
this.showTag = true;
|
||||
},
|
||||
onBuyClicked(data) {
|
||||
const { selectedNum, goodsId } = data;
|
||||
console.log(data);
|
||||
// this.$toast(JSON.stringify(data));
|
||||
this.$router.push({
|
||||
path:'/order',
|
||||
query:{
|
||||
skuId: goodsId,
|
||||
quantity: selectedNum,
|
||||
}
|
||||
});
|
||||
},
|
||||
onAddCartClicked(data) {
|
||||
this.$toast(JSON.stringify(data));
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
let id = this.$route.params.id; // 商品编号
|
||||
let response = getProductSpuInfo(id);
|
||||
response.then(data => {
|
||||
// 设置 spu
|
||||
this.spu = data;
|
||||
// 初始化 vanSku
|
||||
let vanSku = {
|
||||
tree: [],
|
||||
list: [],
|
||||
};
|
||||
for (let i = 0; i < data.skus.length; i++) {
|
||||
let sku = data.skus[i];
|
||||
// list 商品 sku 信息
|
||||
let skuVO = {
|
||||
id: sku.id, // skuId,下单时后端需要
|
||||
price: sku.price, // 价格(单位分)
|
||||
stock_num: sku.quantity // 当前 sku 组合对应的库存
|
||||
};
|
||||
for (let j = 0; j < sku.attrs.length; j++) {
|
||||
let attr = sku.attrs[j];
|
||||
skuVO['attr_' + attr.attrId] = attr.attrValueId;
|
||||
}
|
||||
vanSku.list.push(skuVO);
|
||||
// tree 规格
|
||||
for (let j = 0; j < sku.attrs.length; j++) {
|
||||
let attr = sku.attrs[j];
|
||||
let attrVO;
|
||||
for (let k = 0; k < vanSku.tree.length; k++) {
|
||||
if (attr.attrName === vanSku.tree[k].k) {
|
||||
attrVO = vanSku.tree[k];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!attrVO) { // 未找到,则初始化该规格
|
||||
attrVO = {
|
||||
k: attr.attrName, // skuKeyName:规格类目名称
|
||||
v: [],
|
||||
k_s: 'attr_' + attr.attrId,
|
||||
};
|
||||
vanSku.tree.push(attrVO);
|
||||
}
|
||||
let attrValueFound = false; // 如果规格值已经存在,则不再添加
|
||||
for (let k = 0; k < attrVO.v.length; k++) {
|
||||
if (attr.attrValueId === attrVO.v[k].id) {
|
||||
attrValueFound = true;
|
||||
break;
|
||||
if (!attrVO) { // 未找到,则初始化该规格
|
||||
attrVO = {
|
||||
k: attr.attrName, // skuKeyName:规格类目名称
|
||||
v: [],
|
||||
k_s: 'attr_' + attr.attrId,
|
||||
};
|
||||
vanSku.tree.push(attrVO);
|
||||
}
|
||||
let attrValueFound = false; // 如果规格值已经存在,则不再添加
|
||||
for (let k = 0; k < attrVO.v.length; k++) {
|
||||
if (attr.attrValueId === attrVO.v[k].id) {
|
||||
attrValueFound = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!attrValueFound) {
|
||||
attrVO.v.push({
|
||||
id: attr.attrValueId, // skuValueId:规格值 id
|
||||
name: attr.attrValueName, // skuValueName:规格值名称
|
||||
});
|
||||
}
|
||||
// 初始化 attrValueMap
|
||||
this.attrValueMap.set(attr.attrValueId, attr.attrValueName);
|
||||
}
|
||||
if (!attrValueFound) {
|
||||
attrVO.v.push({
|
||||
id: attr.attrValueId, // skuValueId:规格值 id
|
||||
name: attr.attrValueName, // skuValueName:规格值名称
|
||||
});
|
||||
}
|
||||
// 初始化 attrValueMap
|
||||
this.attrValueMap.set(attr.attrValueId, attr.attrValueName);
|
||||
}
|
||||
}
|
||||
// debugger;
|
||||
this.vanSku = vanSku;
|
||||
// 初始化
|
||||
// TODO 芋艿,需要处理下第一个有效的 sku
|
||||
this.initialSku = vanSku.list[0];
|
||||
this.initialSku.quantity = 1;
|
||||
});
|
||||
}
|
||||
};
|
||||
// debugger;
|
||||
this.vanSku = vanSku;
|
||||
// 初始化
|
||||
// TODO 芋艿,需要处理下第一个有效的 sku
|
||||
this.initialSku = vanSku.list[0];
|
||||
this.initialSku.quantity = 1;
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.goods {
|
||||
padding-bottom: 50px;
|
||||
&-swipe {
|
||||
img {
|
||||
width: 7.5rem;
|
||||
height: 7.5rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&-tag{
|
||||
font-size: 12px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
span{
|
||||
margin-right: 10px;
|
||||
}
|
||||
i{
|
||||
color: red;
|
||||
margin-right: 3px;
|
||||
}
|
||||
img{
|
||||
width: 12px;
|
||||
margin-right: 3px;
|
||||
margin-top: 6px;
|
||||
.goods {
|
||||
padding-bottom: 50px;
|
||||
|
||||
&-swipe {
|
||||
img {
|
||||
width: 7.5rem;
|
||||
height: 7.5rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
line-height: 18px;
|
||||
padding-top: 10px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
&-subtit{
|
||||
}
|
||||
|
||||
&-tag {
|
||||
font-size: 12px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: red;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 12px;
|
||||
margin-right: 3px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
line-height: 18px;
|
||||
padding-top: 10px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
&-subtit {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
&-price {
|
||||
color: #f44;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&-market-price {
|
||||
text-decoration: line-through;
|
||||
margin-left: 8px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
line-height: 21px;
|
||||
}
|
||||
&-price {
|
||||
color: #f44;font-size: 20px;
|
||||
}
|
||||
&-market-price {
|
||||
text-decoration: line-through;
|
||||
margin-left: 8px;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
&-cell-group {
|
||||
margin: 15px 0;
|
||||
.van-cell__value {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
&-info-title{
|
||||
height: 44px;line-height: 44px;text-align: center;font-size: 14px;font-weight: 700;margin: 10px;border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
&-info p{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-block-end: 0;
|
||||
margin-block-start: 0;
|
||||
display: grid;
|
||||
}
|
||||
&-info img{
|
||||
|
||||
&-cell-group {
|
||||
margin: 15px 0;
|
||||
|
||||
.van-cell__value {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&-info-title {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin: 10px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
&-info p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-block-end: 0;
|
||||
margin-block-start: 0;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
&-info img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user