Authored by zhangwenxue

商品详情: 添加窗口同步关闭事件

... ... @@ -69,6 +69,7 @@ export default {
}
},
hide() {
this.$emit('hide');
this.isVisible = false;
},
maskClick() {
... ...
<template>
<action-sheet @hidden="onHidden" ref="popup">
<action-sheet @hidden="onHidden" @hide="onHide" ref="popup">
<div class="activity-sheet">
<h3>活动详情</h3>
<div class="list" >
<cube-scroll ref="activityListScroll" :data="list">
<ul>
<li v-for="(item, idx) in list" :key="idx">
<div class="activityName"><span>{{item.promotionTypeStr}}</span> {{item.activityName}}</div>
<div class="activity-name"><span>{{item.promotionTypeStr}}</span> {{item.activityName}}</div>
<div class="sub">{{item.startTimeStr}}-{{item.endTimeStr}}</div>
</li>
</ul>
... ... @@ -41,6 +41,9 @@ export default {
onHidden() {
this.$emit('hidden');
},
onHide() {
this.$emit('hide');
},
}
};
</script>
... ... @@ -89,7 +92,7 @@ export default {
border-bottom: 1px solid #ccc;
}
.activityName {
.activity-name {
font-size: 28px;
font-weight: bold;
}
... ...
<template>
<action-sheet position="right" ref="popup"
@hidden="onHidden"
@hide="onHide"
@shown="onShown"
:panelStyle="{background: 'transparent', paddingLeft: '20%'}"
:hasBorderRadius="false"
... ... @@ -98,6 +99,9 @@ export default {
onHidden() {
this.$emit('hidden');
},
onHide() {
this.$emit('hide');
},
onShown() {
// refresh list
if (this.$refs.scroll) {
... ...
<template>
<action-sheet @hidden="onHidden" @shown="onShown" position="right" ref="popup" :full="true">
<action-sheet @hidden="onHidden" @hide="onHide" @shown="onShown" position="right" ref="popup" :full="true">
<div class="buy-sheet">
<div class="header">
<div class="back-wrapper flex" @touchend="onBack">
... ... @@ -77,6 +77,9 @@ export default {
onHidden() {
this.$emit('hidden');
},
onHide() {
this.$emit('hide');
},
onShown() {
if (this.$refs.sizeList) {
this.$refs.sizeList.refreshScroll();
... ...
<template>
<action-sheet @hidden="onHidden" @shown="onShown" ref="popup">
<action-sheet @hidden="onHidden" @hide="onHide" @shown="onShown" ref="popup">
<div class="size-select-sheet">
<div class="select-size">
<div class="title" @click="hide">{{config.title}}<i class="cubeic-close"></i></div>
... ... @@ -148,6 +148,9 @@ export default {
onHidden() {
this.$emit('hidden');
},
onHide() {
this.$emit('hide');
},
onShown() {
if (this.$refs.sizeList) {
this.$refs.sizeList.refreshScroll();
... ...
... ... @@ -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">
<cube-scroll ref="pageScroll">
<div class="slide">
<cube-slide ref="slide" :data="imageList">
<cube-slide-item v-for="(item, index) in imageList" :key="index">
... ... @@ -80,16 +80,16 @@
<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>
... ... @@ -194,20 +194,25 @@ 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);
this.loadData(this.productId);
this.refresh();
},
beforeRouteUpdate(to, from ,next) {
if (this.historyBackGuard() === false) {
... ... @@ -236,7 +241,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) {
... ... @@ -312,12 +317,12 @@ export default {
},
// 关闭活动列表
onActivitySheetHidden() {
onActivitySheetHide() {
this.showActivitySheet = false;
},
// 选择尺寸
onSizeSelectSheetHidden() {
onSizeSelectSheetHide() {
this.showSizeSelectSheet = false;
},
... ... @@ -424,7 +429,7 @@ export default {
},
// 添加尺寸关闭
onSizeRequestHidden() {
onSizeRequestHide() {
this.showSizeRequestSheet = false;
},
... ... @@ -434,7 +439,7 @@ export default {
},
// 购买
onBidSheet() {
onBidSheetHide() {
this.showBidSheet = false;
},
},
... ... @@ -576,7 +581,7 @@ export default {
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
overflow: Hide;
div {
font-size: 28px;
... ...