|
|
|
<template>
|
|
|
|
<Modal v-model="visiable" sure-text="调整售价" cancel-text="取消" :loading="postLoading"
|
|
|
|
class="modal" :transfer="true" @on-sure="onSure" @on-cancel="onCancel"
|
|
|
|
>
|
|
|
|
<div class="change-price-modal">
|
|
|
|
<p class="modal-title">{{leastPriceMsg}}</p>
|
|
|
|
<InputUfo type="number" placeholder="定价需以9结尾 例如1999" :maxlength="8" class="ipt-number" v-model="chgPrice">
|
|
|
|
<span class="prepend" slot="prepend">￥</span>
|
|
|
|
</InputUfo>
|
|
|
|
<p class="tips" v-show="errorTip">{{errorTip}}</p>
|
|
|
|
<p class="price-line">
|
|
|
|
<span class="title">平台费用：</span>
|
|
|
|
<span class="price">{{platformFee}}</span>
|
|
|
|
</p>
|
|
|
|
<p class="price-line">
|
|
|
|
<span class="title">银行转账费用：</span>
|
|
|
|
<span class="price">{{bankTransferFee}}</span>
|
|
|
|
</p>
|
|
|
|
<p class="price-line total">
|
|
|
|
<span class="title">实际收入：</span>
|
|
|
|
<span class="price">{{income}}</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</Modal>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Modal from './modal';
|
|
|
|
import InputUfo from './input-ufo';
|
|
|
|
import {debounce, get} from 'lodash';
|
|
|
|
import {createNamespacedHelpers} from 'vuex';
|
|
|
|
|
|
|
|
const {mapState, mapActions} = createNamespacedHelpers('order/priceChange');
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'modalPrice',
|
|
|
|
components: {Modal, InputUfo},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
visiable: false,
|
|
|
|
skc: {},
|
|
|
|
platformFee: '-￥0', // 平台费用
|
|
|
|
bankTransferFee: '-￥0', // 银行转账费用
|
|
|
|
income: '￥0', // 收入
|
|
|
|
errorTip: '',
|
|
|
|
chgPrice: '',
|
|
|
|
calced: false,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
// debounce防抖动,输入数字后延迟500毫秒提交
|
|
|
|
this.inputChange = debounce(this.onChange.bind(this), 500);
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
chgPrice(newVal) {
|
|
|
|
this.calced = false;
|
|
|
|
this.platformFee = '-￥0';
|
|
|
|
this.bankTransferFee = '-￥0';
|
|
|
|
this.income = '￥0';
|
|
|
|
this.inputChange(newVal);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState(['fetchingChangePrice']),
|
|
|
|
leastPriceMsg() {
|
|
|
|
if (this.skc.leastPrice) {
|
|
|
|
return `当前${this.skc.sizeName}码最低售价: ¥${this.skc.leastPrice}`;
|
|
|
|
} else if (this.skc.suggestMinPrice && this.skc.suggestMaxPrice) {
|
|
|
|
return `当前${this.skc.sizeName}码建议售价: ¥${this.skc.suggestMinPrice} - ¥${this.skc.suggestMaxPrice}`;
|
|
|
|
}
|
|
|
|
|
|
|
|
return `当前${this.skc.sizeName}码最低售价: ￥-`;
|
|
|
|
},
|
|
|
|
postLoading() {
|
|
|
|
console.log(this.fetchingChangePrice, this.calced);
|
|
|
|
return this.fetchingChangePrice || !this.calced;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['postCalcPrice']),
|
|
|
|
resetPrices() {
|
|
|
|
this.prices = [];
|
|
|
|
},
|
|
|
|
show({skc, product}) {
|
|
|
|
this.chgPrice = '';
|
|
|
|
this.errorTip = '';
|
|
|
|
this.prices = [];
|
|
|
|
this.skc = skc;
|
|
|
|
this.product = product;
|
|
|
|
this.visiable = true;
|
|
|
|
this.calced = false;
|
|
|
|
},
|
|
|
|
hide() {
|
|
|
|
this.skc = {};
|
|
|
|
this.product = {};
|
|
|
|
this.visiable = false;
|
|
|
|
},
|
|
|
|
onChange(price) {
|
|
|
|
if (!this.visiable) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (this.checkPrice(price)) {
|
|
|
|
this.calcPrice(price);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
async calcPrice(price) {
|
|
|
|
const result = await this.postCalcPrice({
|
|
|
|
product_id: this.product.productId,
|
|
|
|
storage_id: this.skc.storageId,
|
|
|
|
new_price: price,
|
|
|
|
old_price: this.skc.price,
|
|
|
|
num: this.skc.storageNum,
|
|
|
|
skupType: this.skc.attributes
|
|
|
|
});
|
|
|
|
|
|
|
|
if (result && result.code === 200) {
|
|
|
|
this.platformFee = get(result, 'data.platformFee.amount', '');
|
|
|
|
this.bankTransferFee = get(result, 'data.bankTransferFee', '');
|
|
|
|
this.income = get(result, 'data.income', '');
|
|
|
|
this.calced = true;
|
|
|
|
} else {
|
|
|
|
if (result.message) {
|
|
|
|
this.errorTip = result.message;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$createToast({
|
|
|
|
txt: result.message,
|
|
|
|
type: 'warn',
|
|
|
|
}).show();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
checkPrice(price) {
|
|
|
|
let valid = false;
|
|
|
|
|
|
|
|
if (!price) {
|
|
|
|
this.errorTip = '没有价格';
|
|
|
|
return false;
|
|
|
|
} else if (!/^\d+$/.test(price)) {
|
|
|
|
this.errorTip = '价格只能为正整数';
|
|
|
|
} else if (!/9$/.test(price)) {
|
|
|
|
this.errorTip = '出售价格必须以9结尾';
|
|
|
|
} else if (this.skc.minPrice && price < this.skc.minPrice) {
|
|
|
|
this.errorTip = '您的出价过低';
|
|
|
|
} else if (this.skc.maxPrice && price > this.skc.maxPrice) {
|
|
|
|
this.errorTip = '您的出价格过高';
|
|
|
|
} else if (+price === this.skc.price) {
|
|
|
|
this.errorTip = '前后价格没有变化';
|
|
|
|
} else if (this.skc.suggestMaxPrice && price > this.skc.suggestMaxPrice) {
|
|
|
|
this.errorTip = '超出建议价将被限制展示，建议下调至合理价格区间';
|
|
|
|
valid = true;
|
|
|
|
} else if (this.skc.leastPrice && price > this.skc.leastPrice) {
|
|
|
|
this.errorTip = '您的出价高于最低售价';
|
|
|
|
valid = true;
|
|
|
|
} else {
|
|
|
|
this.errorTip = '';
|
|
|
|
valid = true;
|
|
|
|
}
|
|
|
|
return valid;
|
|
|
|
},
|
|
|
|
onSure() {
|
|
|
|
if (!this.checkPrice(this.chgPrice)) {
|
|
|
|
this.$createToast({
|
|
|
|
txt: this.errorTip,
|
|
|
|
type: 'warn',
|
|
|
|
}).show();
|
|
|
|
} else {
|
|
|
|
this.$emit('on-change-price', {skc: this.skc, price: this.chgPrice});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onInput(val) {
|
|
|
|
this.$emit('input', val);
|
|
|
|
},
|
|
|
|
onCancel() {}
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.change-price-modal {
|
|
|
|
.tips {
|
|
|
|
color: #d0021b;
|
|
|
|
font-size: 24px;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.price-line {
|
|
|
|
margin-bottom: 20px;
|
|
|
|
color: #999;
|
|
|
|
font-size: 24px;
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
.title {
|
|
|
|
width: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.price {
|
|
|
|
width: 50%;
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.total {
|
|
|
|
color: #000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ipt-number {
|
|
|
|
/deep/ .prepend {
|
|
|
|
width: 40px;
|
|
|
|
margin-left: 20px;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.modal-title {
|
|
|
|
line-height: 100px;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
