|
|
|
<template>
|
|
|
|
<LayoutApp class="ufo-font" :class="classes">
|
|
|
|
<ScrollView ref="scroll" :observe-dom="false" :pull-up-load="true" :pull-down-refresh="true" @pullingUp="onPullingUp" @pullingDown="onPullingDown">
|
|
|
|
<ScrollView ref="scroll" :observe-dom="false" :pull-up-load="true" @pullingUp="onPullingUp">
|
|
|
|
<div class="order-page">
|
|
|
|
<div class="title">{{productInfo.statuStr}}</div>
|
|
|
|
<div class="title">出售中</div>
|
|
|
|
<div class="product">
|
|
|
|
<ImgSize class="pro-img" :src="productInfo.goodsImg"></ImgSize>
|
|
|
|
<ImgSize class="pro-img" :src="productInfo.imageUrl" :width="200" :height="200"></ImgSize>
|
|
|
|
<div class="pro-info">
|
|
|
|
<p class="pro-name">{{productInfo.productName}}</p>
|
|
|
|
<p class="stock-info">{{productInfo.sizeNum}}个尺码，{{productInfo.storageNum}}个商品库存</p>
|
|
|
|
<p class="stock-info">{{productInfo.colorName}}，{{productInfo.sizeNum}}个尺码，{{productInfo.storageNum}}个商品库存</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="arrival">
|
|
|
|
<p class="arrival-time"><i class="iconfont icon-info"></i><span>尺码列表左滑选择 不卖了 ，下架当前尺码商品</span></p>
|
|
|
|
<p class="arrival-time">
|
|
|
|
<i class="iconfont icon-info"></i>
|
|
|
|
<span>尺码列表左滑选择 不卖了 ，下架当前尺码商品</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<ProductList :skcs="sizes"></ProductList>
|
|
|
|
<ProductList
|
|
|
|
:skcs="skcs"
|
|
|
|
@on-change-price="onChangePrice"
|
|
|
|
@on-no-sale="onNoSale"
|
|
|
|
></ProductList>
|
|
|
|
</div>
|
|
|
|
</ScrollView>
|
|
|
|
<ModalPrice
|
|
|
|
v-if="modalLoad"
|
|
|
|
ref="modalPrice"
|
|
|
|
@on-change-price="onChangePriceSure">
|
|
|
|
</ModalPrice>
|
|
|
|
<ModalUnstock
|
|
|
|
v-if="modalLoad"
|
|
|
|
ref="modalUnstock"
|
|
|
|
@on-no-sale="onNoSaleSure">
|
|
|
|
</ModalUnstock>
|
|
|
|
</LayoutApp>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import ModalPrice from './components/modal-price';
|
|
|
|
import ModalUnstock from './components/modal-unstock';
|
|
|
|
import ImgSize from 'components/img-size';
|
|
|
|
import {Button} from 'cube-ui';
|
|
|
|
import ScrollView from 'components/scroll-view';
|
|
...
|
...
|
@@ -28,51 +47,94 @@ import Vue from 'vue'; |
|
|
|
import {Toast} from 'cube-ui';
|
|
|
|
import {createNamespacedHelpers} from 'vuex';
|
|
|
|
|
|
|
|
import {Style} from 'cube-ui';
|
|
|
|
|
|
|
|
Vue.use(Toast);
|
|
|
|
|
|
|
|
const {mapState} = createNamespacedHelpers('ufo/order');
|
|
|
|
const {mapState, mapActions} = createNamespacedHelpers('ufo/order');
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'OrderPage',
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
tick: 1,
|
|
|
|
classes: {},
|
|
|
|
page: 1,
|
|
|
|
modalLoad: false,
|
|
|
|
showModalPrice: false,
|
|
|
|
showModalUnstock: false,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.modalLoad = true;
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState(['orderInfo']),
|
|
|
|
productInfo() {
|
|
|
|
return this.orderInfo.productInfo || {};
|
|
|
|
},
|
|
|
|
sizes() {
|
|
|
|
return this.orderInfo.data || [];
|
|
|
|
}
|
|
|
|
...mapState(['productInfo', 'skcs']),
|
|
|
|
},
|
|
|
|
asyncData({store, router}) {
|
|
|
|
return store.dispatch('ufo/order/fetchProduct', {orderId: router.params.orderId});
|
|
|
|
return store.dispatch('ufo/order/fetchProduct', {productId: router.params.orderId});
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['fetchProduct', 'postChangePrice', 'postNoSale']),
|
|
|
|
onPullingUp() {
|
|
|
|
setTimeout(() => {
|
|
|
|
this.$refs.scroll.forceUpdate();
|
|
|
|
}, 500);
|
|
|
|
this.fetchProduct({
|
|
|
|
productId: this.$route.params.orderId,
|
|
|
|
page: this.page + 1
|
|
|
|
});
|
|
|
|
this.$refs.scroll.forceUpdate();
|
|
|
|
},
|
|
|
|
onPullingDown() {
|
|
|
|
setTimeout(() => {
|
|
|
|
this.$refs.scroll.forceUpdate();
|
|
|
|
}, 500);
|
|
|
|
onChangePrice(skc) {
|
|
|
|
this.$refs.modalPrice.show({skc, product: this.productInfo});
|
|
|
|
},
|
|
|
|
onClick() {
|
|
|
|
this.showModalUnstock = true;
|
|
|
|
onNoSale(productInfo) {
|
|
|
|
this.$refs.modalUnstock.show(productInfo);
|
|
|
|
},
|
|
|
|
async onChangePriceSure({skc, price}) {
|
|
|
|
const result = await this.postChangePrice({
|
|
|
|
product_id: this.productInfo.productId,
|
|
|
|
storage_id: skc.storageId,
|
|
|
|
new_price: price,
|
|
|
|
old_price: skc.goodPrice,
|
|
|
|
num: skc.storageNum
|
|
|
|
});
|
|
|
|
|
|
|
|
if (result && result.code === 200) {
|
|
|
|
this.$refs.modalPrice.hide();
|
|
|
|
this.$createToast({
|
|
|
|
txt: '调价成功',
|
|
|
|
type: 'success',
|
|
|
|
zIndex: 1000
|
|
|
|
}).show();
|
|
|
|
} else {
|
|
|
|
this.$createToast({
|
|
|
|
txt: result.message || '调价失败',
|
|
|
|
type: 'warn',
|
|
|
|
zIndex: 1000
|
|
|
|
}).show();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
async onNoSaleSure({skc, price}) {
|
|
|
|
const result = await this.postNoSale({
|
|
|
|
product_id: this.productInfo.productId,
|
|
|
|
storage_id: skc.storageId,
|
|
|
|
new_price: price,
|
|
|
|
old_price: skc.goodPrice,
|
|
|
|
num: skc.storageNum
|
|
|
|
});
|
|
|
|
|
|
|
|
if (result.code === 200) {
|
|
|
|
this.$refs.modalUnstock.hide();
|
|
|
|
this.$createToast({
|
|
|
|
txt: '下架成功',
|
|
|
|
type: 'correct'
|
|
|
|
}).show();
|
|
|
|
} else {
|
|
|
|
this.$createToast({
|
|
|
|
txt: result.message || '下架失败',
|
|
|
|
type: 'warn',
|
|
|
|
zIndex: 1000
|
|
|
|
}).show();
|
|
|
|
}
|
|
|
|
this.slideSkc = {};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
components: {Button, ScrollView, ProductList, ImgSize}
|
|
|
|
components: {Button, ScrollView, ProductList, ImgSize, ModalPrice, ModalUnstock}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
...
|
...
|
|
