|
|
|
<template>
|
|
|
|
<action-sheet @hidden="onActivitySheetHidden" ref="popup">
|
|
|
|
<action-sheet @hidden="onHidden" ref="popup">
|
|
|
|
<div class="size-select-sheet">
|
|
|
|
<div class="select-info">
|
|
|
|
<img-size class="title-thumbnail" :src="imageList[0] && imageList[0].image_url" :width="70" :height="70"/>
|
|
|
|
<div class="product">
|
|
|
|
<div>¥{{product.least_price||''}}</div>
|
|
|
|
<div>{{goods_name}}<template v-if="goods_name && sizeName">, </template>{{sizeName}}</div>
|
|
|
|
<div class="select-size" v-if="type === 'size'">
|
|
|
|
<div class="selected-info">
|
|
|
|
<img-size class="title-thumbnail" :src="imageList[0] && imageList[0].image_url" :width="70" :height="70"/>
|
|
|
|
<div class="product">
|
|
|
|
<div>¥{{product.least_price||''}}</div>
|
|
|
|
<div>
|
|
|
|
{{goods_name}}
|
|
|
|
<template v-if="goods_name && sizeName">,</template>
|
|
|
|
{{sizeName}}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<size-list class="select-content size-list" :list="list" :addSize="canAddSize" :selected="selectedSize"
|
|
|
|
@select="onSelectSize"
|
|
|
|
@add="onAdd"></size-list>
|
|
|
|
</div>
|
|
|
|
<div class="size-select-list" >
|
|
|
|
<cube-scroll ref="sizeselectScroll">
|
|
|
|
<ul>
|
|
|
|
<li v-for="(info, idx) in viewList"
|
|
|
|
:key="idx"
|
|
|
|
@click="toggle(info)"
|
|
|
|
:class="{selected: collection[info.size_id], disabled: !info.available}">
|
|
|
|
<div class="size-item">
|
|
|
|
<div class="size">
|
|
|
|
<div class="size-info"><span>{{info.name}}</span><span v-if="info.subName">{{info.subName}}</span></div>
|
|
|
|
<div class="size-price">¥{{info.price}}</div>
|
|
|
|
<div class="select-type" v-else>
|
|
|
|
<div class="info">
|
|
|
|
<div class="back" @click="goBack"></div>
|
|
|
|
<h2>请选择出售方式</h2>
|
|
|
|
<div class="sub-title">
|
|
|
|
{{goods_name}}
|
|
|
|
<template v-if="goods_name && sizeName">,</template>
|
|
|
|
{{sizeName}}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="select-content type-list">
|
|
|
|
<cube-scroll>
|
|
|
|
<div class="type-wrap" @click="selectType">
|
|
|
|
<div class="trade-type">
|
|
|
|
<div class="title">
|
|
|
|
<div class="type">现货</div>
|
|
|
|
<div class="desc">现货好价, 36小时发货</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="add-new">
|
|
|
|
<div class="size-item" @click="add">
|
|
|
|
<div class="size">
|
|
|
|
<div class="size-info"><i class="cubeic-close"></i></div>
|
|
|
|
<div class="size-price">添加尺码</div>
|
|
|
|
<div class="price">
|
|
|
|
¥{{selectedSize.least_price}}
|
|
|
|
<i class="cubeic-arrow"></i>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</cube-scroll>
|
|
|
|
</div>
|
|
|
|
</cube-scroll>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</action-sheet>
|
|
...
|
...
|
@@ -39,9 +50,14 @@ |
|
|
|
|
|
|
|
<script>
|
|
|
|
import { Scroll } from 'cube-ui';
|
|
|
|
import { sortby, get } from 'lodash';
|
|
|
|
import { get } from 'lodash';
|
|
|
|
import { createNamespacedHelpers } from 'vuex';
|
|
|
|
|
|
|
|
import ActionSheet from './action-sheet';
|
|
|
|
import ImgSize from '../../../components/img-size';
|
|
|
|
import SizeList from './size-list';
|
|
|
|
|
|
|
|
const { mapActions, mapGetters } = createNamespacedHelpers('product');
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'SizeSelectSheet',
|
|
...
|
...
|
@@ -57,224 +73,175 @@ export default { |
|
|
|
product: { // 获取productId, goods_name
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
multiple: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
SizeList,
|
|
|
|
ImgSize,
|
|
|
|
'cube-scroll': Scroll,
|
|
|
|
'action-sheet': ActionSheet,
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
selected: {},
|
|
|
|
collection: {
|
|
|
|
|
|
|
|
},
|
|
|
|
selectedType: {},
|
|
|
|
type: 'size',
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
viewList() {
|
|
|
|
if (!this.list || this.list.length === 0) {
|
|
|
|
return this.list || [];
|
|
|
|
}
|
|
|
|
|
|
|
|
const list = sortby(this.list, 'order_by').reverse();
|
|
|
|
|
|
|
|
return list.map(info => {
|
|
|
|
let price;
|
|
|
|
|
|
|
|
if (info.least_price > 0) {
|
|
|
|
price = `¥${info.least_price}`;
|
|
|
|
} else {
|
|
|
|
price = '-';
|
|
|
|
}
|
|
|
|
|
|
|
|
const name = info.size_name.split(/\s+/);
|
|
|
|
|
|
|
|
return {
|
|
|
|
size_id: info.size_id,
|
|
|
|
name: name[0],
|
|
|
|
subName: name[1],
|
|
|
|
price,
|
|
|
|
available: info.storage_num > 0 && price !== '-',
|
|
|
|
};
|
|
|
|
});
|
|
|
|
},
|
|
|
|
...mapGetters(['selectedSize']),
|
|
|
|
goods_name() {
|
|
|
|
return get(this.product, 'goods_list[0].goods_name', '');
|
|
|
|
},
|
|
|
|
sizeName() {
|
|
|
|
if (this.selected && this.selected.name) {
|
|
|
|
return this.selected.name + '码';
|
|
|
|
if (this.selectedSize && this.selectedSize.name) {
|
|
|
|
return this.selectedSize.name + '码';
|
|
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
|
|
},
|
|
|
|
canAddSize() {
|
|
|
|
return get(this.product, 'goods_list[0].canAddSize', false);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.$refs.popup.show(() => {
|
|
|
|
this.$refs.sizeselectScroll.refresh();
|
|
|
|
});
|
|
|
|
this.$refs.popup.show();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
onActivitySheetHidden() {
|
|
|
|
...mapActions(['updateTradeInfo']),
|
|
|
|
onHidden() {
|
|
|
|
this.$emit('hidden');
|
|
|
|
},
|
|
|
|
toggle(info) {
|
|
|
|
if (!info.available) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (!this.multiple) {
|
|
|
|
if (this.collection[info.size_id]) {
|
|
|
|
this.collection = {};
|
|
|
|
this.selected = null;
|
|
|
|
} else {
|
|
|
|
this.collection = {[info.size_id]: info};
|
|
|
|
this.selected = info;
|
|
|
|
}
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.collection[info.size_id]) {
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
|
|
const {[info.size_id]: tmp, ...remain} = this.collection;
|
|
|
|
|
|
|
|
this.collection = remain;
|
|
|
|
} else {
|
|
|
|
this.collection = {...this.collection, [info.size_id]: info};
|
|
|
|
}
|
|
|
|
onSelectSize({selected: sizeInfo}) {
|
|
|
|
this.updateTradeInfo({
|
|
|
|
productId: this.product.product_id,
|
|
|
|
sizeInfo,
|
|
|
|
}).then(() => {
|
|
|
|
this.type = 'type';
|
|
|
|
});
|
|
|
|
},
|
|
|
|
add() {
|
|
|
|
onAdd() {
|
|
|
|
this.$emit('add');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
goBack() {
|
|
|
|
this.type = 'size';
|
|
|
|
},
|
|
|
|
selectType() {
|
|
|
|
this.updateTradeInfo({
|
|
|
|
productId: this.product.product_id,
|
|
|
|
tradeTypeInfo: {tradeTypeId: 1},
|
|
|
|
}).then((data) => {
|
|
|
|
this.$emit('select', data);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
@import "../product-detail";
|
|
|
|
|
|
|
|
.size-select-sheet {
|
|
|
|
.select-size, .select-type {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
max-height: 60vh;
|
|
|
|
}
|
|
|
|
|
|
|
|
.size-select-list {
|
|
|
|
flex: 1;
|
|
|
|
overflow: auto;
|
|
|
|
padding: 20px;
|
|
|
|
|
|
|
|
ul {
|
|
|
|
padding-bottom: 1px;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
height: 60vh;
|
|
|
|
padding: 0 40px;
|
|
|
|
}
|
|
|
|
|
|
|
|
li {
|
|
|
|
box-sizing: border-box;
|
|
|
|
width: 25%;
|
|
|
|
float: left;
|
|
|
|
border: 1px solid #999;
|
|
|
|
margin-right: -1px;
|
|
|
|
margin-bottom: -1px;
|
|
|
|
&.selected {
|
|
|
|
background: $primary-color;
|
|
|
|
.selected-info {
|
|
|
|
display: flex;
|
|
|
|
padding: 20px 0;
|
|
|
|
|
|
|
|
.size-info {
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
.product {
|
|
|
|
margin-left: 40px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: space-evenly;
|
|
|
|
|
|
|
|
.size-price {
|
|
|
|
color: $sub-color;
|
|
|
|
div {
|
|
|
|
font-size: 24px;
|
|
|
|
color: #999;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.disabled {
|
|
|
|
.size-info,
|
|
|
|
.size-price {
|
|
|
|
color: #ccc;
|
|
|
|
div:first-child {
|
|
|
|
font-size: 32px;
|
|
|
|
color: #000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.size-item {
|
|
|
|
height: 0;
|
|
|
|
padding-bottom: 100%;
|
|
|
|
position: relative;
|
|
|
|
.title-thumbnail {
|
|
|
|
width: 140px;
|
|
|
|
height: 140px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.size {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
.select-content {
|
|
|
|
flex: 1;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.size-info {
|
|
|
|
color: #000;
|
|
|
|
font-weight: bold;
|
|
|
|
font-size: 1.5em;
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
vertical-align: baseline;
|
|
|
|
.select-type {
|
|
|
|
overflow: scroll;
|
|
|
|
|
|
|
|
span:last-child {
|
|
|
|
font-size: 0.6em;
|
|
|
|
.info {
|
|
|
|
position: relative;
|
|
|
|
padding: 20px 40px 40px;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
span + span {
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
|
|
.back {
|
|
|
|
position: absolute;
|
|
|
|
top: 20px;
|
|
|
|
left: 0px;
|
|
|
|
width: 48px;
|
|
|
|
height: 48px;
|
|
|
|
background: url(~statics/image/order/back@3x.png) no-repeat;
|
|
|
|
background-size: cover;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.size-price {
|
|
|
|
color: #aaa;
|
|
|
|
font-size: 0.9em;
|
|
|
|
margin-top: 5px;
|
|
|
|
}
|
|
|
|
.add-new {
|
|
|
|
color: #999;
|
|
|
|
.cubeic-close {
|
|
|
|
display: inline-block;
|
|
|
|
transform: rotate(45deg);
|
|
|
|
font-weight: bold;
|
|
|
|
color: #333;
|
|
|
|
font-size: 1.2em;
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
font-size: 32px;
|
|
|
|
}
|
|
|
|
.size-price {
|
|
|
|
font-size: 0.8em;
|
|
|
|
|
|
|
|
.sub-title {
|
|
|
|
font-size: 24px;
|
|
|
|
color: #ccc;
|
|
|
|
line-height: 1.8;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.title-thumbnail {
|
|
|
|
width: 140px;
|
|
|
|
height: 140px;
|
|
|
|
}
|
|
|
|
.select-info {
|
|
|
|
|
|
|
|
.trade-type {
|
|
|
|
background: $primary-color;
|
|
|
|
display: flex;
|
|
|
|
.product {
|
|
|
|
line-height: 34px;
|
|
|
|
margin-left: 40px;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
color: #fff;
|
|
|
|
font-size: 32px;
|
|
|
|
padding: 40px;
|
|
|
|
margin-bottom: 40px;
|
|
|
|
|
|
|
|
.title {
|
|
|
|
line-height: 1.8;
|
|
|
|
}
|
|
|
|
|
|
|
|
.desc {
|
|
|
|
font-size: 24px;
|
|
|
|
color: #999;
|
|
|
|
}
|
|
|
|
|
|
|
|
.price {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: space-evenly;
|
|
|
|
div {
|
|
|
|
font-size: 24px;
|
|
|
|
align-items: center;
|
|
|
|
color: $sub-color;
|
|
|
|
|
|
|
|
i {
|
|
|
|
display: inline-block;
|
|
|
|
margin-left: 5px;
|
|
|
|
color: #999;
|
|
|
|
}
|
|
|
|
div:first-child {
|
|
|
|
font-size: 32px;
|
|
|
|
color: #000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.type-wrap {
|
|
|
|
overflow: scroll;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
