|
...
|
...
|
@@ -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" ref="pageScroll">
|
|
|
|
<div class="cube-scroll-wrapper" ref="pageScroll">
|
|
|
|
<div class="slide">
|
|
|
|
<cube-slide ref="slide" :data="imageList">
|
|
|
|
<cube-slide-item v-for="(item, index) in imageList" :key="index">
|
|
...
|
...
|
@@ -12,7 +12,7 @@ |
|
|
|
</cube-slide-item>
|
|
|
|
<template slot="dots" slot-scope="props">
|
|
|
|
<div class="dot-wrap">
|
|
|
|
<span class="dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots">•</span>
|
|
|
|
<span class="cube-dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots">•</span>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</cube-slide>
|
|
...
|
...
|
@@ -31,14 +31,14 @@ |
|
|
|
</a>
|
|
|
|
<div class="info">
|
|
|
|
<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-item" transtion="fade" v-if="activity && activity.length !== 0" @click="showActivity" key="促销">
|
|
|
|
<div class="info-list-name">促销</div>
|
|
|
|
<div class="info-list-value info-promote">
|
|
|
|
<span>{{activity[0].promotionTypeStr}}</span>
|
|
|
|
<i class="cubeic-arrow"></i>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="info-list-item" v-for="(desc, index) in productDec" :key="index">
|
|
|
|
<div class="info-list-item" v-for="desc in productDec" :key="desc.text">
|
|
|
|
<div class="info-list-name">{{desc.text}}</div>
|
|
|
|
<div class="info-list-value">{{desc.value}}</div>
|
|
|
|
</div>
|
|
...
|
...
|
@@ -52,7 +52,7 @@ |
|
|
|
<div class="recommend" v-if="recommend"><h2>相关推荐</h2>
|
|
|
|
<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)">
|
|
...
|
...
|
@@ -80,23 +80,23 @@ |
|
|
|
<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"/>
|
|
|
|
<buy-sheet v-if="showBidSheet" @hide="onBidSheetHide" :productId="productId"/>
|
|
|
|
<size-request-sheet v-if="showSizeRequestSheet" @hide="onSizeRequestHide" :productId="productId"/>
|
|
|
|
</div>
|
|
|
|
<activity-list-sheet v-if="showActivitySheet" :list="activity" @hidden="onActivitySheetHidden"/>
|
|
|
|
<activity-list-sheet v-if="showActivitySheet" :list="activity" @hide="onActivitySheetHide"/>
|
|
|
|
<size-select-sheet v-if="showSizeSelectSheet"
|
|
|
|
:list="sizeList"
|
|
|
|
:product="productDetail"
|
|
|
|
:image-list="imageList"
|
|
|
|
:config="selectSizeConfig"
|
|
|
|
@hidden="onSizeSelectSheetHidden"
|
|
|
|
@hide="onSizeSelectSheetHide"
|
|
|
|
@select="onSelectTradeProduct"
|
|
|
|
@add="onRequestSize"/>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { Button, Slide, Scroll, Popup } from 'cube-ui';
|
|
|
|
import { Button, Slide, Popup } from 'cube-ui';
|
|
|
|
import { get } from 'lodash';
|
|
|
|
import { createNamespacedHelpers, mapGetters } from 'vuex';
|
|
|
|
|
|
...
|
...
|
@@ -131,7 +131,6 @@ export default { |
|
|
|
'cube-button': Button,
|
|
|
|
'cube-slide': Slide,
|
|
|
|
'cube-slide-item': Slide.Item,
|
|
|
|
'cube-scroll': Scroll,
|
|
|
|
'cube-popup': Popup,
|
|
|
|
},
|
|
|
|
props: {
|
|
...
|
...
|
@@ -194,15 +193,28 @@ export default { |
|
|
|
|
|
|
|
// 在action-sheet显示控制与对应关闭方法
|
|
|
|
this.actionSheetCloseMap = {
|
|
|
|
showActivitySheet: 'onActivitySheetHidden',
|
|
|
|
showBidSheet: 'onBidSheet',
|
|
|
|
showSizeSelectSheet: 'onSizeSelectSheetHidden',
|
|
|
|
showSizeRequestSheet: 'onSizeRequestHidden',
|
|
|
|
showActivitySheet: 'onActivitySheetHide',
|
|
|
|
showBidSheet: 'onBidSheetHide',
|
|
|
|
showSizeSelectSheet: 'onSizeSelectSheetHide',
|
|
|
|
showSizeRequestSheet: 'onSizeRequestHide',
|
|
|
|
};
|
|
|
|
},
|
|
|
|
asyncData({store, router}) {
|
|
|
|
const productId = parseInt(router.params.productId, 10);
|
|
|
|
|
|
|
|
if (isNaN(productId)) {
|
|
|
|
throw new Error('无效的商品ID');
|
|
|
|
}
|
|
|
|
|
|
|
|
return store.dispatch('product/fetchProductInfo', {productId});
|
|
|
|
},
|
|
|
|
activated() {
|
|
|
|
this.$refs.pageScroll && this.$refs.pageScroll.scrollTo(0, 0, 0);
|
|
|
|
if (this.$refs.pageScroll) {
|
|
|
|
this.$refs.pageScroll.scrollTop = 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.loadData(this.productId);
|
|
|
|
this.refresh();
|
|
|
|
},
|
|
|
|
beforeRouteUpdate(to, from ,next) {
|
|
|
|
if (this.historyBackGuard() === false) {
|
|
...
|
...
|
@@ -231,7 +243,7 @@ export default { |
|
|
|
return true;
|
|
|
|
},
|
|
|
|
refresh() {
|
|
|
|
this.$refs.slide.refresh();
|
|
|
|
this.$refs.slide && this.$refs.slide.refresh && this.$refs.slide.refresh();
|
|
|
|
},
|
|
|
|
sizeImg(src, width = 360, height = 72) {
|
|
|
|
if (src) {
|
|
...
|
...
|
@@ -240,20 +252,9 @@ export default { |
|
|
|
},
|
|
|
|
|
|
|
|
// 加载商品详情数据
|
|
|
|
loadData(productId = this.productId, loading) {
|
|
|
|
loading && loading.show();
|
|
|
|
|
|
|
|
loadData(productId = this.productId) {
|
|
|
|
this.fetchBrandTop({productId});
|
|
|
|
this.fetchFav({productId});
|
|
|
|
|
|
|
|
return this.fetchProductInfo({productId}).then(() => {
|
|
|
|
loading && loading.hide();
|
|
|
|
setTimeout(() => {
|
|
|
|
this.refresh();
|
|
|
|
}, 200);
|
|
|
|
}).catch(() => {
|
|
|
|
loading && loading.hide();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
...
|
...
|
@@ -318,12 +319,12 @@ export default { |
|
|
|
},
|
|
|
|
|
|
|
|
// 关闭活动列表
|
|
|
|
onActivitySheetHidden() {
|
|
|
|
onActivitySheetHide() {
|
|
|
|
this.showActivitySheet = false;
|
|
|
|
},
|
|
|
|
|
|
|
|
// 选择尺寸
|
|
|
|
onSizeSelectSheetHidden() {
|
|
|
|
onSizeSelectSheetHide() {
|
|
|
|
this.showSizeSelectSheet = false;
|
|
|
|
},
|
|
|
|
|
|
...
|
...
|
@@ -430,7 +431,7 @@ export default { |
|
|
|
},
|
|
|
|
|
|
|
|
// 添加尺寸关闭
|
|
|
|
onSizeRequestHidden() {
|
|
|
|
onSizeRequestHide() {
|
|
|
|
this.showSizeRequestSheet = false;
|
|
|
|
},
|
|
|
|
|
|
...
|
...
|
@@ -440,7 +441,7 @@ export default { |
|
|
|
},
|
|
|
|
|
|
|
|
// 购买
|
|
|
|
onBidSheet() {
|
|
|
|
onBidSheetHide() {
|
|
|
|
this.showBidSheet = false;
|
|
|
|
},
|
|
|
|
},
|
|
...
|
...
|
@@ -485,20 +486,17 @@ export default { |
|
|
|
padding-bottom: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.dot {
|
|
|
|
.cube-dot {
|
|
|
|
display: inline-block;
|
|
|
|
width: 8px;
|
|
|
|
height: 8px;
|
|
|
|
width: 6px;
|
|
|
|
height: 6px;
|
|
|
|
margin: 0 10px;
|
|
|
|
background: radial-gradient(8px 8px at 50% 50%, rgba(0, 0, 0, 0.15) 50%, transparent 50%) no-repeat;
|
|
|
|
|
|
|
|
background: rgba(0, 0, 0, 0.15);
|
|
|
|
border-radius: 50%;
|
|
|
|
&.active {
|
|
|
|
/*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;
|
|
|
|
transform: scale(1.3333);
|
|
|
|
background: rgba(0, 0, 0, 1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
...
|
...
|
@@ -585,7 +583,7 @@ export default { |
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
overflow: hidden;
|
|
|
|
overflow: Hide;
|
|
|
|
|
|
|
|
div {
|
|
|
|
font-size: 28px;
|
|
...
|
...
|
@@ -658,16 +656,8 @@ export default { |
|
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
overflow: scroll;
|
|
|
|
}
|
|
|
|
|
|
|
|
.footer {
|
...
|
...
|
|
