Authored by lea guo

订单:状态管理调用参数补全 review buy qiujun

<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>
... ...
<template>
<div class="change-bid-price-wrapper">
<p class="price-item">
<span>我的求购价:</span>
<span>¥{{ goodsInfo.goodPrice }}</span>
</p>
<p class="price-item">
<span>当前最高求购价:</span>
<span>¥{{ goodsInfo.bidHighestPrice }}</span>
</p>
<p v-if="goodsInfo.leastPrice" class="price-item">
<span>最低现货价:</span>
<span>¥{{ goodsInfo.leastPrice }}</span>
</p>
<InputUfo
type="number"
placeholder="定价需以9结尾 例如1999"
:maxlength="8"
:class="errorTip ? 'ipt-number show-error' : 'ipt-number'"
v-model="chgPrice"
>
<span class="prepend" slot="prepend">¥</span>
</InputUfo>
<p class="error-tip">{{ errorTip }}</p>
<p
:class="
i === computePriceList.length - 1
? 'promotion-list-item last'
: 'promotion-list-item'
"
v-for="(priceInfo, i) in computePriceList"
:key="i"
>
<span>{{ priceInfo.promotion }}:</span>
<span>{{ priceInfo.promotionAmount }}</span>
</p>
<p class="tip">Tip: 调整求购价成功后,当前的求购将被关闭</p>
</div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
import InputUfo from "../price-change/components/input-ufo";
import { debounce } from "lodash";
const { mapActions } = createNamespacedHelpers("order/orderList");
export default {
components: { InputUfo },
props: {
computePriceInfo: {
type: Object,
default: () => ({})
},
goodsInfo: {
type: Object,
default: () => ({})
},
orderCode: {
type: Number,
default: 0
},
onChangePrice: {
type: Function,
default: () => {}
}
},
data() {
return {
chgPrice: "",
errorTip: "",
computePrice: null
};
},
computed: {
computePriceList() {
const priceInfo = this.computePrice || this.computePriceInfo;
return priceInfo.promotionFormulaList.filter(
({ promotion }) => promotion === "运费" || promotion === "实付金额"
);
}
},
mounted() {
// debounce防抖动,输入数字后延迟500毫秒提交
this.inputChange = debounce(this.onChange.bind(this), 500);
},
methods: {
...mapActions(["computeChangePrice"]),
async onChange(price) {
if (this.checkPrice(price)) {
const res = await this.computeChangePrice({
price,
orderCode: this.orderCode
});
if (typeof res === "string") {
this.errorTip = res;
this.onChangePrice(0);
} else {
this.computePrice = res;
this.onChangePrice(price);
}
} else {
this.onChangePrice(0);
}
},
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 (+price === +this.goodsInfo.goodPrice) {
this.errorTip = "前后价格没有变化";
} else {
this.errorTip = "";
valid = true;
}
return valid;
}
},
watch: {
chgPrice(newVal) {
this.inputChange(newVal);
}
}
};
</script>
<style lang="scss" scoped>
.change-bid-price-wrapper {
font-size: 12*2px;
color: #000;
padding: 0 38px;
letter-spacing: 0;
.ipt-number {
margin: 30px 0;
&.show-error {
margin-bottom: 0;
}
}
.error-tip {
color: #d0021b;
}
.promotion-list-item {
display: flex;
justify-content: space-between;
align-items: center;
color: #999;
&.last {
color: #000;
}
}
.tip {
color: #999;
margin-top: 40px;
}
}
</style>
... ... @@ -3,7 +3,6 @@
import { orderActionsMap, ownType } from 'constants/order-constants';
import { createNamespacedHelpers } from 'vuex';
import DialogConfirmInfo from '../components/dialog-confirm-info';
import DialogChangeBidPrice from '../components/dialog-change-bid-price';
const { mapActions, mapMutations } = createNamespacedHelpers('order/orderList');
... ... @@ -88,7 +87,7 @@ export default {
if (isDetail) {
this.fetchOrderDetail(this.$route.params);
} else {
this.resetData();
this.resetData(this.$route.params);
this.fetchData(this.$route.params);
}
}
... ... @@ -166,7 +165,7 @@ export default {
if (isDetail) {
this.fetchOrderDetail(this.$route.params);
} else {
this.resetData();
this.resetData(this.$route.params);
this.fetchData(this.$route.params);
}
}
... ... @@ -184,6 +183,7 @@ export default {
});
let isStr = false;
if (typeof computePriceInfo === 'string') {
isStr = true;
this.$createToast({
... ... @@ -191,29 +191,28 @@ export default {
txt: computePriceInfo,
mask: true,
}).show();
// return;
return;
}
let that = this;
this.$createChangeBidPriceDialog({
computePriceInfo: isStr ? {"promotionFormulaList":[]} : computePriceInfo,
computePriceInfo: isStr
? { promotionFormulaList: [] }
: computePriceInfo,
goodsInfo,
orderCode,
onCloseAction() {
},
onConfirmAction: async(price) => {
onCloseAction() {},
onConfirmAction: async price => {
const { isOk, errMsg = '' } = await that.confirmChangePrice({
price: price,
orderCode,
});
if (isOk) {
if (isDetail) {
that.$router.back();
// that.fetchOrderDetail(this.$route.params);
} else {
that.resetData();
that.resetData(this.$route.params);
that.fetchData(this.$route.params);
}
} else {
... ... @@ -224,7 +223,7 @@ export default {
});
}
}
}
},
}).show();
break;
}
... ...
... ... @@ -96,7 +96,7 @@ export default {
...mapActions(["fetchEntryOrderList", "fetchNotEntryOrderList"]),
...mapMutations(["resetData"]),
onRefresh() {
this.resetData();
this.resetData(this.$route.params);
this.fetchData();
},
fetchData() {
... ...
<template>
<layout-app :title="$route.params.owner === 'sell' ? '我的出售' : '我的订单'"
class="list-page">
<status-nav :status="status" :owner="owner" @select="onStatusChange"/>
<layout-app
:title="$route.params.owner === 'sell' ? '我的出售' : '我的订单'"
class="list-page"
>
<status-nav :status="status" :owner="owner" @select="onStatusChange" />
<div class="content-wrapper">
<scroll
@pulling-up="fetchData"
... ... @@ -67,7 +69,7 @@ import CountDown from "../components/count-down";
import orderActionMixin from "../mixin/order-action";
import orderInSaleActionMixin from "../mixin/order-in-sale-action";
import {orderStatusKey} from "constants/order-constants";
import { orderStatusKey } from "constants/order-constants";
const STORE_PATH = "order/orderList";
... ... @@ -90,10 +92,10 @@ export default {
},
props: {
owner: String,
status: Number,
status: Number
},
computed: {
...mapState(['orderListByType']),
...mapState(["orderListByType"]),
orderStatus() {
return this.orderListByType[orderStatusKey(this.owner, this.status)];
},
... ... @@ -103,11 +105,13 @@ export default {
options() {
const options = {
pullUpLoad: this.orderStatus.pullUpLoad,
bounce: !this.orderStatus.isShowEmpty,
bounce: !this.orderStatus.isShowEmpty
};
if (this.$refs.scroll && this.$refs.scroll.scroll) {
options.pullDownRefresh = this.isShowEmpty ? false : {txt: '更新成功'};
options.pullDownRefresh = this.isShowEmpty
? false
: { txt: "更新成功" };
}
return options;
... ... @@ -116,10 +120,10 @@ export default {
// 获取订单数据
asyncData({ store, router }) {
const {owner, status} = router.params;
const { owner, status } = router.params;
store.commit(`${STORE_PATH}/resetData`, {owner, status});
return store.dispatch(`${STORE_PATH}/fetchOrderList`, {owner, status});
store.commit(`${STORE_PATH}/resetData`, { owner, status });
return store.dispatch(`${STORE_PATH}/fetchOrderList`, { owner, status });
},
methods: {
...mapActions(["fetchOrderList", "confirmReceipt"]),
... ... @@ -127,13 +131,13 @@ export default {
fetchData() {
this.fetchOrderList({
owner: this.owner,
status: this.status,
status: this.status
});
},
onRefresh() {
this.resetData({
owner: this.owner,
status: this.status,
status: this.status
});
this.fetchData();
},
... ... @@ -152,11 +156,11 @@ export default {
name: this.$route.name,
params: {
owner: this.owner,
status,
},
status
}
});
},
},
}
}
};
</script>
<style lang="scss" scoped>
... ...
... ... @@ -3,7 +3,7 @@ import {
sellerOrderStatusList,
orderStatusKey,
ownType,
} from "constants/order-constants";
} from 'constants/order-constants';
function initialOrderState() {
return {
... ... @@ -20,7 +20,10 @@ function initialOrderState() {
const initialState = () => {
const orderListByType = {};
[[ownType.BUY, buyerOrderStatusList], [ownType.SELL, sellerOrderStatusList]].forEach(statusInfo => {
[
[ownType.BUY, buyerOrderStatusList],
[ownType.SELL, sellerOrderStatusList],
].forEach(statusInfo => {
statusInfo[1].forEach(orderStatus => {
const key = orderStatusKey(statusInfo[0], orderStatus.value);
... ... @@ -42,7 +45,7 @@ export default function() {
namespaced: true,
state: initialState,
mutations: {
setOrderList(state, {res, owner, status}) {
setOrderList(state, { res, owner, status }) {
let { page, pagetotal, data = [] } = res;
const orderState = state.orderListByType[orderStatusKey(owner, status)];
... ... @@ -56,7 +59,7 @@ export default function() {
orderState.pullUpLoad = false;
}
},
filterOrderList(state, {orderCode, owner, status}) {
filterOrderList(state, { orderCode, owner, status }) {
const orderState = state.orderListByType[orderStatusKey(owner, status)];
orderState.orderList = orderState.orderList.filter(
... ... @@ -70,7 +73,7 @@ export default function() {
setRouteParamStatus(state, status = 1) {
state.routeParamStatus = +status;
},
resetPartialData(state, {owner, status}) {
resetPartialData(state, { owner, status }) {
Object.assign(state.orderListByType[orderStatusKey(owner, status)], {
page: 1,
orderList: [],
... ... @@ -78,7 +81,7 @@ export default function() {
pullUpLoad: true,
});
},
resetData(state, {owner, status}) {
resetData(state, { owner, status } = {}) {
const orderListState = initialOrderState();
state.orderListByType[orderStatusKey(owner, status)] = orderListState;
... ... @@ -94,7 +97,7 @@ export default function() {
* }
* r
*/
async fetchOrderList({commit, state}, { owner, status }) {
async fetchOrderList({ commit, state }, { owner, status }) {
const { page } = state.orderListByType[orderStatusKey(owner, status)];
const res = await this.$api.get('/api/order/list', {
... ... @@ -104,7 +107,7 @@ export default function() {
});
if (res.code === 200) {
commit('setOrderList', { res: res.data, owner, status});
commit('setOrderList', { res: res.data, owner, status });
}
},
... ... @@ -125,7 +128,7 @@ export default function() {
// data 为true时删除成功
if (code === 200) {
if (data) {
commit('filterOrderList', {orderCode, owner, status});
commit('filterOrderList', { orderCode, owner, status });
}
}
return data;
... ... @@ -199,7 +202,7 @@ export default function() {
});
if (res.code === 200) {
return { errMsg: '', isOk: true , bidData: res.data};
return { errMsg: '', isOk: true, bidData: res.data };
} else {
return { errMsg: res.message, isOk: false };
}
... ...