Skip to content

Y
yudao-cloud
提交 a019ac27 authored 作者: YunaiV's avatar YunaiV
浏览文件
操作

前端 mobile ：商品 H5

上级 cfd9d770
显示空白字符变更
内嵌 并排
正在显示 包含 234 行增加 和 145 行删除
mobile-web/src/api/product.js
浏览文件 @ a019ac27
...@@ -21,3 +21,13 @@ export function getProductSpuPage(cid, pageNo, pageSize) { ...@@ -21,3 +21,13 @@ export function getProductSpuPage(cid, pageNo, pageSize) {
} }
}); });
} }
export function getProductSpuInfo(id) {
return request({
url: 'product-api/users/spu/info',
method: 'get',
params: {
id,
}
});
}
\ No newline at end of file
mobile-web/src/page/product/detail.vue
浏览文件 @ a019ac27
...@@ -2,63 +2,64 @@ ...@@ -2,63 +2,64 @@
<div class="goods"> <div class="goods">
<headerNav title="商品详情"/> <headerNav title="商品详情"/>
<van-swipe class="goods-swipe" :autoplay="3000"> <van-swipe class="goods-swipe" :autoplay="3000">
<van-swipe-item v-for="thumb in goods.thumb" :key="thumb"> <van-swipe-item v-for="thumb in spu.picUrls" :key="thumb">
<img :src="thumb" > <img :src="thumb" >
</van-swipe-item> </van-swipe-item>
</van-swipe> </van-swipe>
<van-cell-group> <van-cell-group>
<van-cell> <van-cell>
<span class="goods-price">{{ formatPrice(goods.price) }}</span> <span class="goods-price">{{ formatPrice(initialSku.price) }}</span>
<span class="goods-market-price">{{ formatPrice(goods.market_price) }}</span> <!--<span class="goods-market-price">{{ formatPrice(goods.market_price) }}</span>-->
<div class="goods-title">{{ goods.title }}</div> <div class="goods-title">{{ spu.name }}</div>
<div class="goods-subtit">{{goods.subtitle}}</div> <div class="goods-subtit">{{spu.sellPoint}}</div>
</van-cell> </van-cell>
<van-cell @click="onClickShowTag" class="goods-tag" > <!--<van-cell @click="onClickShowTag" class="goods-tag" >-->
<template slot="title" style="font-size:10px;"> <!--<template slot="title" style="font-size:10px;">-->
<img src="https://haitao.nos.netease.com/ba8a4c2fdaa54f82a45261293c116af61419663676663i46n3jlh10028.png"/> <!--<img src="https://haitao.nos.netease.com/ba8a4c2fdaa54f82a45261293c116af61419663676663i46n3jlh10028.png"/>-->
<span >挪威品牌</span> <!--<span >挪威品牌</span>-->
<img src="https://haitao.nosdn2.127.net/13bd59e6e29a4f06b278c586629e690d.png" /> <!--<img src="https://haitao.nosdn2.127.net/13bd59e6e29a4f06b278c586629e690d.png" />-->
<span >跨境商品</span> <!--<span >跨境商品</span>-->
<van-icon name="passed" color="red" /> <!--<van-icon name="passed" color="red" />-->
<span >次日达</span> <!--<span >次日达</span>-->
<van-icon name="passed" color="red" /> <!--<van-icon name="passed" color="red" />-->
<span >自提</span> <!--<span >自提</span>-->
<van-icon name="passed" color="red" /> <!--<van-icon name="passed" color="red" />-->
<span >闪电退款</span> <!--<span >闪电退款</span>-->
<van-icon name="passed" color="red" /> <!--<van-icon name="passed" color="red" />-->
<span >前海保税仓</span> <!--<span >前海保税仓</span>-->
<van-icon name="passed" color="red" /> <!--<van-icon name="passed" color="red" />-->
<span >七天无理由退货（拆封后不支持）</span> <!--<span >七天无理由退货（拆封后不支持）</span>-->
</template> <!--</template>-->
</van-cell> <!--</van-cell> -->
</van-cell-group> </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" > <!--<van-cell-group class="goods-cell-group">-->
<template slot="title"> <!--<van-cell is-link @click="showPromotion" >-->
<span style="margin-right: 10px;">促销</span> <!--<template slot="title">-->
<van-tag type="danger" style="margin-right: 5px;">多买优惠</van-tag> <!--<span style="margin-right: 10px;">领券</span>-->
<van-tag type="danger" style="margin-right: 5px;">满减</van-tag> <!--<van-tag type="danger" mark style="margin-right: 5px;">满180减30</van-tag>-->
<van-tag type="danger" style="margin-right: 5px;">限购</van-tag> <!--<van-tag type="danger" mark style="margin-right: 5px;">满300减100</van-tag>-->
</template> <!--</template>-->
</van-cell> <!--</van-cell>-->
</van-cell-group> <!---->
<!--<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-group class="goods-cell-group">
<van-cell is-link @click="showSku" > <van-cell is-link @click="showSku" >
<template slot="title"> <template slot="title">
<span style="margin-right: 10px;">已选</span> <span style="margin-right: 10px;">已选</span>
<span >10件装</span> <span>{{ formatSkuText(initialSku) }}</span>
</template> </template>
</van-cell> </van-cell>
...@@ -66,7 +67,7 @@ ...@@ -66,7 +67,7 @@
<div class="goods-info"> <div class="goods-info">
<p class="goods-info-title" >图文详情</p> <p class="goods-info-title" >图文详情</p>
<div v-html="goods.info"></div> <div v-html="spu.description"></div>
</div> </div>
<van-goods-action> <van-goods-action>
...@@ -83,88 +84,89 @@ ...@@ -83,88 +84,89 @@
立即购买 立即购买
</van-goods-action-big-btn> </van-goods-action-big-btn>
</van-goods-action> </van-goods-action>
<van-actionsheet v-model="show" title="促销" style="font-size:14px;">
<van-cell is-link @click="sorry" > <!--<van-actionsheet v-model="show" title="促销" style="font-size:14px;">-->
<template slot="title"> <!---->
<van-tag type="danger">多买优惠</van-tag> <!--<van-cell is-link @click="sorry" >-->
<span> 满2件，总价打9折</span> <!--<template slot="title">-->
</template> <!--<van-tag type="danger">多买优惠</van-tag>-->
</van-cell> <!--<span> 满2件，总价打9折</span>-->
<van-cell is-link @click="sorry" > <!--</template>-->
<template slot="title"> <!--</van-cell>-->
<van-tag type="danger">满减</van-tag> <!--<van-cell is-link @click="sorry" >-->
<span> 满100元减50元</span> <!--<template slot="title">-->
</template> <!--<van-tag type="danger">满减</van-tag>-->
</van-cell> <!--<span> 满100元减50元</span>-->
<van-cell is-link @click="sorry" > <!--</template>-->
<template slot="title"> <!--</van-cell>-->
<van-tag type="danger">限购</van-tag> <!--<van-cell is-link @click="sorry" >-->
<span> 购买不超过5件时享受单件价￥8.00，超出数量以结算价为准</span> <!--<template slot="title">-->
</template> <!--<van-tag type="danger">限购</van-tag>-->
</van-cell> <!--<span> 购买不超过5件时享受单件价￥8.00，超出数量以结算价为准</span>-->
</van-actionsheet> <!--</template>-->
<!--</van-cell>-->
<!--</van-actionsheet>-->
<van-actionsheet v-model="showTag" title="服务说明" style="font-size:14px;"> <!--<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-actionsheet>-->
<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 <van-sku
v-model="showBase" v-model="showBase"
:sku="skuData.sku" :sku="vanSku"
:goods="skuData.goods_info" :initial-sku="initialSku"
:goods-id="skuData.goods_id" :goods="vanSpu"
:hide-stock="skuData.sku.hide_stock" :goods-id="spu.id"
:quota="skuData.quota" :hide-stock="hideStock"
:quota-used="skuData.quota_used"
reset-stepper-on-hide
reset-selected-sku-on-hide
disable-stepper-input
:close-on-click-overlay="closeOnClickOverlay" :close-on-click-overlay="closeOnClickOverlay"
:message-config="messageConfig" @stepper-change="stepperChange"
:custom-sku-validator="customSkuValidator" @sku-selected="skuSelected"
@buy-clicked="onBuyClicked" @buy-clicked="onBuyClicked"
@add-cart="onAddCartClicked" @add-cart="onAddCartClicked"
/> />
<!--:quota="skuData.quota"-->
</div> </div>
</template> </template>
<script> <script>
import skuData from '../../data/sku'; import skuData from '../../data/sku';
import { getProductSpuInfo } from '../../api/product';
export default { export default {
components: { components: {
...@@ -172,6 +174,23 @@ export default { ...@@ -172,6 +174,23 @@ export default {
data() { data() {
this.skuData = skuData; this.skuData = skuData;
return { return {
spu: {}, // 商品信息
vanSku: {
tree: [], // 规格数组
list: [], // sku 数组
},
// TODO 后面，要加 sku 的 title 和 picture
vanSpu: {
title: '',
picture: '',
},
initialSku: { // 选中的 sku
// 具体规格
// price 价格
// quantity 选中的数量
},
attrValueMap: new Map(), // 规格值的映射
show:false, show:false,
showTag:false, showTag:false,
goods: { goods: {
...@@ -187,47 +206,40 @@ export default { ...@@ -187,47 +206,40 @@ export default {
], ],
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>', 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, showBase: false, // 是否显示 sku 坦诚
showCustom: false, closeOnClickOverlay: true, // 是否在点击蒙层后关闭
showStepper: false, hideStock: true, // 是否显示商品剩余库存
closeOnClickOverlay: true,
initialSku: { };
s1: '30349',
s2: '1193'
}, },
customSkuValidator: (component) => { methods: {
return '请选择xxx'; formatPrice(data) {
return '¥' + (data / 100).toFixed(2);
}, },
customStepperConfig: { formatSkuText(data) { // 渲染已选择的 sku 的文本
quotaText: '单次限购100件', let text = '';
stockFormatter: (stock) => `剩余${stock}间`, for (let prop in data) {
handleOverLimit: (data) => { if (prop.indexOf('attr_') === 0) {
const { action, limitType, quota } = data; text = text + this.attrValueMap.get(data[prop]) + ' ';
if (action === 'minus') {
this.$toast('至少选择一件商品');
} else if (action === 'plus') {
if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
this.$toast(`限购${quota}件`);
} else {
this.$toast('库存不够了~~');
}
} }
} }
text = text + 'x ' + data.quantity + ' 件';
return text;
}, },
messageConfig: {
uploadImg: (file, img) => { stepperChange(value) { // 选择 sku 数量时
return new Promise(resolve => { this.initialSku.quantity = value;
setTimeout(() => resolve(img), 1000);
});
}, },
uploadMaxSize: 3 skuSelected({skuValue, selectedSku, selectedSkuComb}) { // 选择 sku
} console.log(skuValue);
console.log(selectedSku);
console.log(selectedSkuComb);
this.initialSku = {
...selectedSkuComb,
quantity: 1,
}; };
}, },
methods: {
formatPrice(data) {
return '¥' + (data / 100).toFixed(2);
},
onClickCart() { onClickCart() {
this.$router.push('/cart'); this.$router.push('/cart');
}, },
...@@ -237,7 +249,7 @@ export default { ...@@ -237,7 +249,7 @@ export default {
showPromotion() { showPromotion() {
this.show=true; this.show=true;
}, },
showSku(){ showSku() { // 展示 sku 选择
this.showBase=true; this.showBase=true;
}, },
onClickShowTag(){ onClickShowTag(){
...@@ -249,7 +261,73 @@ export default { ...@@ -249,7 +261,73 @@ export default {
onAddCartClicked(data) { onAddCartClicked(data) {
this.$toast(JSON.stringify(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 (!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;
});
} }
}; };
</script> </script>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论