|
|
<template><!--求购用调价对话框-->
|
|
|
<template>
|
|
|
<!--求购用调价对话框-->
|
|
|
<div class="dialog-wrapper" :class="[visible ? 'show' : '']">
|
|
|
<div :class="['change-bid-price-wrapper', visible ? 'anim' : '']">
|
|
|
<div class="change-bid-price-container">
|
...
|
...
|
@@ -6,7 +7,7 @@ |
|
|
<span>我的求购价:</span>
|
|
|
<span>¥{{ goodsInfo.goodPrice }}</span>
|
|
|
</p>
|
|
|
<p class="price-item">
|
|
|
<p v-if="goodsInfo.bidHighestPrice" class="price-item">
|
|
|
<span>现货最高求购价:</span>
|
|
|
<span>¥{{ goodsInfo.bidHighestPrice.toFixed(2) }}</span>
|
|
|
</p>
|
...
|
...
|
@@ -18,7 +19,10 @@ |
|
|
type="number"
|
|
|
placeholder="定价需以9结尾 例如1999"
|
|
|
:maxlength="8"
|
|
|
:class="[errorTip ? 'ipt-number show-error' : 'ipt-number', 'ufo-font']"
|
|
|
:class="[
|
|
|
errorTip ? 'ipt-number show-error' : 'ipt-number',
|
|
|
'ufo-font'
|
|
|
]"
|
|
|
v-model="chgPrice"
|
|
|
>
|
|
|
<span class="prepend" slot="prepend">¥</span>
|
...
|
...
|
@@ -26,10 +30,10 @@ |
|
|
<p class="error-tip">{{ errorTip }}</p>
|
|
|
<p
|
|
|
:class="
|
|
|
i === computePriceList.length - 1
|
|
|
? 'promotion-list-item last'
|
|
|
: 'promotion-list-item'
|
|
|
"
|
|
|
i === computePriceList.length - 1
|
|
|
? 'promotion-list-item last'
|
|
|
: 'promotion-list-item'
|
|
|
"
|
|
|
v-for="(priceInfo, i) in computePriceList"
|
|
|
:key="i"
|
|
|
>
|
...
|
...
|
@@ -45,18 +49,17 @@ |
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { createNamespacedHelpers } from 'vuex';
|
|
|
import InputUfo from './input-ufo';
|
|
|
import { debounce } from 'lodash';
|
|
|
import { createNamespacedHelpers } from "vuex";
|
|
|
import InputUfo from "./input-ufo";
|
|
|
import { debounce } from "lodash";
|
|
|
|
|
|
const { mapActions } = createNamespacedHelpers('order/orderList');
|
|
|
const { mapActions } = createNamespacedHelpers("order/orderList");
|
|
|
|
|
|
export default {
|
|
|
name: 'change-bid-price-dialog',
|
|
|
name: "change-bid-price-dialog",
|
|
|
components: { InputUfo },
|
|
|
props: {
|
|
|
computePriceInfo: {
|
...
|
...
|
@@ -75,8 +78,8 @@ export default { |
|
|
data() {
|
|
|
return {
|
|
|
visible: false,
|
|
|
chgPrice: '',
|
|
|
errorTip: '',
|
|
|
chgPrice: "",
|
|
|
errorTip: "",
|
|
|
computePrice: null,
|
|
|
calced: false
|
|
|
};
|
...
|
...
|
@@ -97,14 +100,15 @@ export default { |
|
|
},
|
|
|
methods: {
|
|
|
...mapActions(["computeChangePrice"]),
|
|
|
async onChange(price) { // 预先算费
|
|
|
async onChange(price) {
|
|
|
// 预先算费
|
|
|
if (this.checkPrice(price)) {
|
|
|
const res = await this.computeChangePrice({
|
|
|
price,
|
|
|
orderCode: this.orderCode
|
|
|
});
|
|
|
|
|
|
if (typeof res === 'string') {
|
|
|
if (typeof res === "string") {
|
|
|
this.errorTip = res;
|
|
|
this.calced = false;
|
|
|
} else {
|
...
|
...
|
@@ -125,16 +129,16 @@ export default { |
|
|
let valid = false;
|
|
|
|
|
|
if (!price) {
|
|
|
this.errorTip = '没有价格';
|
|
|
this.errorTip = "没有价格";
|
|
|
return false;
|
|
|
} else if (!/^\d+$/.test(price)) {
|
|
|
this.errorTip = '价格只能为正整数';
|
|
|
this.errorTip = "价格只能为正整数";
|
|
|
} else if (!/9$/.test(price)) {
|
|
|
this.errorTip = '出售价格必须以9结尾';
|
|
|
this.errorTip = "出售价格必须以9结尾";
|
|
|
} else if (+price === +this.goodsInfo.goodPrice) {
|
|
|
this.errorTip = '前后价格没有变化';
|
|
|
this.errorTip = "前后价格没有变化";
|
|
|
} else {
|
|
|
this.errorTip = '';
|
|
|
this.errorTip = "";
|
|
|
valid = true;
|
|
|
}
|
|
|
return valid;
|
...
|
...
|
@@ -142,7 +146,7 @@ export default { |
|
|
closeAction() {
|
|
|
this.hide();
|
|
|
this.clearData();
|
|
|
this.$emit('closeAction');
|
|
|
this.$emit("closeAction");
|
|
|
},
|
|
|
confirmAction() {
|
|
|
if (this.calced) {
|
...
|
...
|
@@ -150,17 +154,14 @@ export default { |
|
|
|
|
|
this.hide();
|
|
|
this.clearData();
|
|
|
this.$emit('confirmAction', price);
|
|
|
this.$emit("confirmAction", price);
|
|
|
}
|
|
|
|
|
|
},
|
|
|
clearData() {
|
|
|
this.chgPrice = '';
|
|
|
this.errorTip = '',
|
|
|
this.computePrice = null;
|
|
|
this.chgPrice = "";
|
|
|
(this.errorTip = ""), (this.computePrice = null);
|
|
|
this.calced = false;
|
|
|
}
|
|
|
|
|
|
},
|
|
|
watch: {
|
|
|
chgPrice(newVal) {
|
...
|
...
|
@@ -172,114 +173,114 @@ export default { |
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.dialog-wrapper {
|
|
|
position: fixed;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
z-index: 99;
|
|
|
display: none;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
.dialog-wrapper {
|
|
|
position: fixed;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
z-index: 99;
|
|
|
display: none;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
&.show {
|
|
|
display: flex;
|
|
|
}
|
|
|
&.show {
|
|
|
display: flex;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.change-bid-price-wrapper {
|
|
|
position: absolute;
|
|
|
width: 600px;
|
|
|
background-color: #fff;
|
|
|
transform: scale(0.9);
|
|
|
.change-bid-price-wrapper {
|
|
|
position: absolute;
|
|
|
width: 600px;
|
|
|
background-color: #fff;
|
|
|
transform: scale(0.9);
|
|
|
|
|
|
&.anim {
|
|
|
animation: animateDialog 0.5s cubic-bezier(0.03,1.58,0.79,0.96) forwards;
|
|
|
}
|
|
|
&.anim {
|
|
|
animation: animateDialog 0.5s cubic-bezier(0.03, 1.58, 0.79, 0.96) forwards;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.change-bid-price-container {
|
|
|
background-color: #fff;
|
|
|
font-size: 24px;
|
|
|
color: #000;
|
|
|
padding: 60px 38px 0 38px;
|
|
|
letter-spacing: 0;
|
|
|
|
|
|
.price-item {
|
|
|
font-size: 24px;
|
|
|
line-height: 34px;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.change-bid-price-container {
|
|
|
background-color: #fff;
|
|
|
font-size: 24px;
|
|
|
color: #000;
|
|
|
padding: 60px 38px 0 38px;
|
|
|
letter-spacing: 0;
|
|
|
|
|
|
.ipt-number {
|
|
|
margin: 30px 0;
|
|
|
.price-item {
|
|
|
font-size: 24px;
|
|
|
line-height: 34px;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
/deep/ .prepend {
|
|
|
width: 40px;
|
|
|
margin-left: 20px;
|
|
|
text-align: left;
|
|
|
}
|
|
|
.ipt-number {
|
|
|
margin: 30px 0;
|
|
|
|
|
|
&.show-error {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
/deep/ .prepend {
|
|
|
width: 40px;
|
|
|
margin-left: 20px;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.error-tip {
|
|
|
color: #d0021b;
|
|
|
margin-bottom: 10px;
|
|
|
&.show-error {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.promotion-list-item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
color: #999;
|
|
|
margin-bottom: 10px;
|
|
|
font-size: 24px;
|
|
|
.error-tip {
|
|
|
color: #d0021b;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
&.last {
|
|
|
color: #000;
|
|
|
}
|
|
|
}
|
|
|
.promotion-list-item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
color: #999;
|
|
|
margin-bottom: 10px;
|
|
|
font-size: 24px;
|
|
|
|
|
|
.tip {
|
|
|
color: #999;
|
|
|
margin: 40px auto;
|
|
|
font-size: 24px;
|
|
|
&.last {
|
|
|
color: #000;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.buttons-container {
|
|
|
width: 100%;
|
|
|
height: 100px;
|
|
|
display: flex;
|
|
|
border-top: 1px solid #f0f0f0;
|
|
|
.tip {
|
|
|
color: #999;
|
|
|
margin: 40px auto;
|
|
|
font-size: 24px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
text-align: center;
|
|
|
line-height: 100px;
|
|
|
font-size: 32px;
|
|
|
border: none;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
.buttons-container {
|
|
|
width: 100%;
|
|
|
height: 100px;
|
|
|
display: flex;
|
|
|
border-top: 1px solid #f0f0f0;
|
|
|
|
|
|
button + button {
|
|
|
border-left: 1px solid #f0f0f0;
|
|
|
}
|
|
|
button {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
text-align: center;
|
|
|
line-height: 100px;
|
|
|
font-size: 32px;
|
|
|
border: none;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
|
|
|
@keyframes animateDialog {
|
|
|
0% {
|
|
|
transform: scale(0.9);
|
|
|
}
|
|
|
button + button {
|
|
|
border-left: 1px solid #f0f0f0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
transform: scale(1);
|
|
|
}
|
|
|
@keyframes animateDialog {
|
|
|
0% {
|
|
|
transform: scale(0.9);
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
transform: scale(1);
|
|
|
}
|
|
|
}
|
|
|
</style> |
...
|
...
|
|