|
...
|
...
|
@@ -2,7 +2,7 @@ |
|
|
|
<div class="layout">
|
|
|
|
<LayoutHeader class="layout-header" :show-back="true" :title="'\u200E'"></LayoutHeader>
|
|
|
|
<div class="layout-context fixscroll">
|
|
|
|
<cube-scroll :data="imageList">
|
|
|
|
<cube-scroll :data="imageList" ref="pageScroll">
|
|
|
|
<div class="slide">
|
|
|
|
<cube-slide ref="slide" :data="imageList">
|
|
|
|
<cube-slide-item v-for="(item, index) in imageList" :key="index">
|
|
...
|
...
|
@@ -11,25 +11,27 @@ |
|
|
|
</a>
|
|
|
|
</cube-slide-item>
|
|
|
|
<template slot="dots" slot-scope="props">
|
|
|
|
<span class="dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots">{{index + 1}}</span>
|
|
|
|
<div class="dot-wrap">
|
|
|
|
<span class="dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots">•</span>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</cube-slide>
|
|
|
|
<div class="qiugou" v-if="isQiugouEnabled" @click="qiugou"></div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="info">
|
|
|
|
<div class="info-basic">
|
|
|
|
<div class="info-price">
|
|
|
|
<template v-if="productDetail.least_price == null">{{'\u200E'}}</template>
|
|
|
|
<template v-else><i>¥</i>{{productDetail.least_price}}</template>
|
|
|
|
</div>
|
|
|
|
<div class="info-name">{{productDetail.product_name}}</div>
|
|
|
|
<div class="info-name"><div>{{productDetail.product_name}}</div></div>
|
|
|
|
</div>
|
|
|
|
<a class="banner" v-if="resource" :href="resource.url">
|
|
|
|
<img-size :src="sizeImg(resource.src)"/>
|
|
|
|
</a>
|
|
|
|
<div class="info">
|
|
|
|
<div class="info-list">
|
|
|
|
<div class="info-list-item" v-if="activity && activity.length !== 0" @click="showActivity">
|
|
|
|
<transition-group name="info-list" tag="div" class="info-list">
|
|
|
|
<div class="info-list-item" transtion="fade" v-if="activity && activity.length !== 0" @click="showActivity" key="promotion">
|
|
|
|
<div class="info-list-name">促销</div>
|
|
|
|
<div class="info-list-value info-promote">
|
|
|
|
<span>{{activity[0].promotionTypeStr}}</span>
|
|
...
|
...
|
@@ -40,7 +42,7 @@ |
|
|
|
<div class="info-list-name">{{desc.text}}</div>
|
|
|
|
<div class="info-list-value">{{desc.value}}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</transition-group>
|
|
|
|
<top-list v-if="topList && topList.length !== 0" :list="topList" @itemClick="gotoProduct" @allClick="gotoBrand" />
|
|
|
|
<img class="ref-img" v-lazy="prdDetailTip"/>
|
|
|
|
</div>
|
|
...
|
...
|
@@ -51,7 +53,6 @@ |
|
|
|
<product-list :list="recommend" priceKey="price"/>
|
|
|
|
</div>
|
|
|
|
</cube-scroll>
|
|
|
|
</div>
|
|
|
|
<div class="footer">
|
|
|
|
<div class="heart">
|
|
|
|
<div class="icon-fav" v-if="isFav" @click="_toggleFav(false)">
|
|
...
|
...
|
@@ -79,6 +80,9 @@ |
|
|
|
<cube-button class="sell" @click="sell">出售</cube-button>
|
|
|
|
<cube-button class="buy active" @click="buy">购买</cube-button>
|
|
|
|
</div>
|
|
|
|
<buy-sheet v-if="showBidSheet" @hidden="onBidSheet" :productId="productId"/>
|
|
|
|
<size-request-sheet v-if="showSizeRequestSheet" @hidden="onSizeRequestHidden" :productId="productId"/>
|
|
|
|
</div>
|
|
|
|
<activity-list-sheet v-if="showActivitySheet" :list="activity" @hidden="onActivitySheetHidden"/>
|
|
|
|
<size-select-sheet v-if="showSizeSelectSheet"
|
|
|
|
:list="sizeList"
|
|
...
|
...
|
@@ -88,8 +92,6 @@ |
|
|
|
@hidden="onSizeSelectSheetHidden"
|
|
|
|
@select="onSelectTradeProduct"
|
|
|
|
@add="onRequestSize"/>
|
|
|
|
<size-request-sheet v-if="showSizeRequestSheet" @hidden="onSizeRequestHidden" :productId="productId"/>
|
|
|
|
<buy-sheet v-if="showBuySheet" @hidden="onBuyHidden" :productId="productId"/>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
...
|
...
|
@@ -144,7 +146,7 @@ export default { |
|
|
|
|
|
|
|
showActivitySheet: false,
|
|
|
|
|
|
|
|
showBuySheet: false,
|
|
|
|
showBidSheet: false,
|
|
|
|
|
|
|
|
showSizeSelectSheet: false,
|
|
|
|
showSizeRequestSheet: false,
|
|
...
|
...
|
@@ -189,19 +191,45 @@ export default { |
|
|
|
// if (this.isQiugouEnabled === null) {
|
|
|
|
this.$store.dispatch('getSysConfigQiugou');
|
|
|
|
// }
|
|
|
|
|
|
|
|
// 在action-sheet显示控制与对应关闭方法
|
|
|
|
this.actionSheetCloseMap = {
|
|
|
|
showActivitySheet: 'onActivitySheetHidden',
|
|
|
|
showBidSheet: 'onBidSheet',
|
|
|
|
showSizeSelectSheet: 'onSizeSelectSheetHidden',
|
|
|
|
showSizeRequestSheet: 'onSizeRequestHidden',
|
|
|
|
};
|
|
|
|
},
|
|
|
|
activated() {
|
|
|
|
this.$refs.pageScroll && this.$refs.pageScroll.scrollTo(0, 0, 0);
|
|
|
|
this.loadData(this.productId);
|
|
|
|
},
|
|
|
|
beforeRouteUpdate(to, from ,next) {
|
|
|
|
if (this.historyBackGuard() === false) {
|
|
|
|
return next(false);
|
|
|
|
}
|
|
|
|
|
|
|
|
next();
|
|
|
|
},
|
|
|
|
beforeRouteLeave(to, from, next) {
|
|
|
|
if (this.showSizeRequestSheet) {
|
|
|
|
this.onSizeRequestHidden();
|
|
|
|
if (this.historyBackGuard() === false) {
|
|
|
|
return next(false);
|
|
|
|
}
|
|
|
|
|
|
|
|
next();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['fetchProductInfo', 'fetchBrandTop', 'fetchFav', 'toggleFav', 'updateTradeInfo', 'getSelectedTradeProduct', 'payment', 'resetSelectedSize']),
|
|
|
|
historyBackGuard() {
|
|
|
|
for (let key of Object.keys(this.actionSheetCloseMap)) {
|
|
|
|
if (this[key]) {
|
|
|
|
this[this.actionSheetCloseMap[key]]();
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return true;
|
|
|
|
},
|
|
|
|
refresh() {
|
|
|
|
this.$refs.slide.refresh();
|
|
|
|
},
|
|
...
|
...
|
@@ -210,11 +238,8 @@ export default { |
|
|
|
return getImgUrl(src, width, height);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
createLoading() {
|
|
|
|
return this.$createToast({
|
|
|
|
time: 0,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 加载商品详情数据
|
|
|
|
loadData(productId = this.productId, loading) {
|
|
|
|
loading && loading.show();
|
|
|
|
|
|
...
|
...
|
@@ -248,6 +273,8 @@ export default { |
|
|
|
|
|
|
|
return this.$yoho.auth();
|
|
|
|
},
|
|
|
|
|
|
|
|
// toggle收藏
|
|
|
|
async _toggleFav(isFav) {
|
|
|
|
const userInfo = await this.auth();
|
|
|
|
|
|
...
|
...
|
@@ -264,6 +291,8 @@ export default { |
|
|
|
}).show();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 进入商品详情
|
|
|
|
gotoProduct(product) {
|
|
|
|
this.$router.push({
|
|
|
|
name: this.$route.name,
|
|
...
|
...
|
@@ -272,6 +301,8 @@ export default { |
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 打开产品品牌或系列TOP
|
|
|
|
gotoBrand() {
|
|
|
|
this.$router.push({
|
|
|
|
name: 'BrandProductList',
|
|
...
|
...
|
@@ -280,15 +311,23 @@ export default { |
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 显示活动列表
|
|
|
|
showActivity() {
|
|
|
|
this.showActivitySheet = true;
|
|
|
|
},
|
|
|
|
|
|
|
|
// 关闭活动列表
|
|
|
|
onActivitySheetHidden() {
|
|
|
|
this.showActivitySheet = false;
|
|
|
|
},
|
|
|
|
|
|
|
|
// 选择尺寸
|
|
|
|
onSizeSelectSheetHidden() {
|
|
|
|
this.showSizeSelectSheet = false;
|
|
|
|
},
|
|
|
|
|
|
|
|
// 购买
|
|
|
|
buy() {
|
|
|
|
this.resetSelectedSize();
|
|
|
|
this.selectSizeConfig = {
|
|
...
|
...
|
@@ -298,9 +337,8 @@ export default { |
|
|
|
};
|
|
|
|
this.showSizeSelectSheet = true;
|
|
|
|
},
|
|
|
|
onBuyHidden() {
|
|
|
|
this.showBuySheet = false;
|
|
|
|
},
|
|
|
|
|
|
|
|
// 出售
|
|
|
|
async sell() {
|
|
|
|
// 出售需要实名认证
|
|
|
|
const userInfo = await this.auth(true);
|
|
...
|
...
|
@@ -317,6 +355,8 @@ export default { |
|
|
|
};
|
|
|
|
this.showSizeSelectSheet = true;
|
|
|
|
},
|
|
|
|
|
|
|
|
// 选择出售或购买
|
|
|
|
async onSelectTradeProduct(tradeProduct) {
|
|
|
|
if (this.selectSizeConfig.type === 'buy') {
|
|
|
|
//数据埋点
|
|
...
|
...
|
@@ -359,13 +399,14 @@ export default { |
|
|
|
href: 'javascript:;'
|
|
|
|
},
|
|
|
|
onConfirm: () => {
|
|
|
|
this.showSizeSelectSheet = false;
|
|
|
|
|
|
|
|
this.$router.push({
|
|
|
|
name: 'OrderList',
|
|
|
|
params: {
|
|
|
|
owner: this.selectSizeConfig.type,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
this.showSizeSelectSheet = false;
|
|
|
|
},
|
|
|
|
}).show();
|
|
|
|
}
|
|
...
|
...
|
@@ -374,21 +415,33 @@ export default { |
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.showSizeSelectSheet = false;
|
|
|
|
|
|
|
|
this.$router.push({
|
|
|
|
name: this.selectSizeConfig.dest,
|
|
|
|
query: tradeProduct
|
|
|
|
});
|
|
|
|
this.showSizeSelectSheet = false;
|
|
|
|
},
|
|
|
|
|
|
|
|
// 添加尺寸
|
|
|
|
onRequestSize() {
|
|
|
|
this.showSizeSelectSheet = false;
|
|
|
|
this.showSizeRequestSheet = true;
|
|
|
|
},
|
|
|
|
|
|
|
|
// 添加尺寸关闭
|
|
|
|
onSizeRequestHidden() {
|
|
|
|
this.showSizeRequestSheet = false;
|
|
|
|
},
|
|
|
|
|
|
|
|
// 打开求购列表
|
|
|
|
qiugou() {
|
|
|
|
this.showBuySheet = true;
|
|
|
|
this.showBidSheet = true;
|
|
|
|
},
|
|
|
|
|
|
|
|
// 购买
|
|
|
|
onBidSheet() {
|
|
|
|
this.showBidSheet = false;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
...
|
...
|
@@ -424,18 +477,28 @@ export default { |
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
/deep/ .cube-slide-dots {
|
|
|
|
margin-bottom: -2px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.dot-wrap {
|
|
|
|
padding-bottom: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.dot {
|
|
|
|
display: inline-block;
|
|
|
|
width: 8px;
|
|
|
|
height: 8px;
|
|
|
|
margin: 0 10px 2px;
|
|
|
|
border-radius: 50%;
|
|
|
|
margin: 0 10px;
|
|
|
|
background: radial-gradient(8px 8px at 50% 50%, rgba(0, 0, 0, 0.15) 50%, transparent 50%) no-repeat;
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
margin: 2px 10px 0;
|
|
|
|
width: 12px;
|
|
|
|
height: 12px;
|
|
|
|
border-radius: 50%;
|
|
|
|
background-color: #08304b;
|
|
|
|
/*margin: 2px 10px 0;*/
|
|
|
|
/*width: 12px;*/
|
|
|
|
/*height: 12px;*/
|
|
|
|
transform-origin: 50% 50%;
|
|
|
|
transform: scale(1.5);
|
|
|
|
background: radial-gradient(8px 8px at 50% 50%, rgba(0, 0, 0, 1) 50%, transparent 50%) no-repeat;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
...
|
...
|
@@ -457,7 +520,6 @@ export default { |
|
|
|
}
|
|
|
|
|
|
|
|
.banner {
|
|
|
|
padding: 20px 0 0;
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
img {
|
|
...
|
...
|
@@ -482,7 +544,7 @@ export default { |
|
|
|
span {
|
|
|
|
display: inline-block;
|
|
|
|
border: 1px solid #feabac;
|
|
|
|
color: #D0021B;
|
|
|
|
color: #d0021b;
|
|
|
|
line-height: 1.8;
|
|
|
|
margin-right: 15px;
|
|
|
|
font-size: 0.8em;
|
|
...
|
...
|
@@ -494,14 +556,16 @@ export default { |
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.info {
|
|
|
|
padding: 46px 40px 10px;
|
|
|
|
.info-basic {
|
|
|
|
padding: 46px 40px 32px;
|
|
|
|
|
|
|
|
&-price {
|
|
|
|
.info-price {
|
|
|
|
color: #d0021b;
|
|
|
|
font-size: 48px;
|
|
|
|
font-family: $num-font;
|
|
|
|
font-weight: bold;
|
|
|
|
line-height: 56px;
|
|
|
|
height: 56px;
|
|
|
|
text-align: center;
|
|
|
|
letter-spacing: 0;
|
|
|
|
|
|
...
|
...
|
@@ -512,14 +576,30 @@ export default { |
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&-name {
|
|
|
|
.info-name {
|
|
|
|
margin-top: 14px;
|
|
|
|
font-size: 28px;
|
|
|
|
color: #999;
|
|
|
|
text-align: center;
|
|
|
|
height: 64px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
div {
|
|
|
|
font-size: 28px;
|
|
|
|
line-height: 32px;
|
|
|
|
max-height: 64px;
|
|
|
|
white-space: normal;
|
|
|
|
word-break: break-all;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.info {
|
|
|
|
padding: 0 40px;
|
|
|
|
|
|
|
|
&-list {
|
|
|
|
line-height: 104px; // PM: 60 -> 52
|
|
|
|
white-space: nowrap;
|
|
...
|
...
|
@@ -547,16 +627,21 @@ export default { |
|
|
|
|
|
|
|
.ref-img {
|
|
|
|
margin-top: 40px;
|
|
|
|
width: 670px;
|
|
|
|
height: 100px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ref-img {
|
|
|
|
width: 100%;
|
|
|
|
display: block;
|
|
|
|
width: 750px;
|
|
|
|
height: 628px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.recommend {
|
|
|
|
padding-top: 20px;
|
|
|
|
background: #f5f5f5;
|
|
|
|
background-color: #f2f2f2;
|
|
|
|
background-image: linear-gradient(180deg, #fefefe 0%, #f2f2f2 320px);
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
font-size: 36px;
|
|
...
|
...
|
@@ -567,6 +652,24 @@ export default { |
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.layout-context {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cube-scroll-wrapper {
|
|
|
|
height: auto;
|
|
|
|
flex: 1 0 0;
|
|
|
|
|
|
|
|
// 当前页面上面白色背景,底部recommend的f2f2f2, scroll的moment功能会使用cube-scroll-wrapper的顶部及底部做空内容填充
|
|
|
|
background: linear-gradient(to bottom, #fff 0, #f2f2f2 100%);
|
|
|
|
|
|
|
|
// 这里覆盖cube-scroll-wrapper渐变背景
|
|
|
|
/deep/ .cube-scroll-content {
|
|
|
|
background: #fff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.footer {
|
|
|
|
display: flex;
|
|
|
|
text-align: center;
|
|
...
|
...
|
@@ -597,4 +700,18 @@ export default { |
|
|
|
flex: 0 0 6em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.info-list-item {
|
|
|
|
transition: all 0.1s;
|
|
|
|
}
|
|
|
|
|
|
|
|
.info-list-enter,
|
|
|
|
.info-list-leave-to {
|
|
|
|
opacity: 0;
|
|
|
|
transform: translateX(-30%);
|
|
|
|
}
|
|
|
|
|
|
|
|
.info-list-leave-active {
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
