348 lines
11 KiB
Vue
348 lines
11 KiB
Vue
<template>
|
||
<div class="my-order" ref="container">
|
||
<div class="header bg-color-red">
|
||
<div class="picTxt acea-row row-between-wrapper">
|
||
<div class="text">
|
||
<div class="name">订单信息</div>
|
||
<div>
|
||
累计订单：{{ orderData.orderCount || 0 }} 总消费：￥{{
|
||
orderData.sumPrice || 0
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav acea-row row-around">
|
||
<div class="item" :class="{ on: type === 0 }" @click="changeType(0)">
|
||
<div>待付款</div>
|
||
<div class="num">{{ orderData.unpaidCount || 0 }}</div>
|
||
</div>
|
||
<div class="item" :class="{ on: type === 1 }" @click="changeType(1)">
|
||
<div>待发货</div>
|
||
<div class="num">{{ orderData.unshippedCount || 0 }}</div>
|
||
</div>
|
||
<div class="item" :class="{ on: type === 2 }" @click="changeType(2)">
|
||
<div>待收货</div>
|
||
<div class="num">{{ orderData.receivedCount || 0 }}</div>
|
||
</div>
|
||
<div class="item" :class="{ on: type === 3 }" @click="changeType(3)">
|
||
<div>待评价</div>
|
||
<div class="num">{{ orderData.evaluatedCount || 0 }}</div>
|
||
</div>
|
||
<div class="item" :class="{ on: type === 4 }" @click="changeType(4)">
|
||
<div>已完成</div>
|
||
<div class="num">{{ orderData.completeCount || 0 }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="list">
|
||
<div class="item" v-for="(order,orderListIndex) in orderList" :key="orderListIndex">
|
||
<div class="title acea-row row-between-wrapper">
|
||
<div class="acea-row row-middle">
|
||
<span
|
||
class="sign cart-color acea-row row-center-wrapper"
|
||
v-if="order.combinationId > 0"
|
||
>拼团</span>
|
||
<span class="sign cart-color acea-row row-center-wrapper" v-if="order.seckillId > 0">秒杀</span>
|
||
<span class="sign cart-color acea-row row-center-wrapper" v-if="order.bargainId > 0">砍价</span>
|
||
<data-format :data="order.addTime"></data-format>
|
||
</div>
|
||
<div class="font-color-red">{{ getStatus(order) }}</div>
|
||
</div>
|
||
<div
|
||
@click="$yrouter.push({ path: '/pages/order/OrderDetails/index',query:{id:order.orderId} })"
|
||
>
|
||
<div
|
||
class="item-info acea-row row-between row-top"
|
||
v-for="(cart,cartInfoIndex) in order.cartInfo"
|
||
:key="cartInfoIndex"
|
||
>
|
||
<div class="pictrue">
|
||
<img
|
||
:src="cart.productInfo.image"
|
||
@click.stop="
|
||
$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:cart.productInfo.id} })
|
||
"
|
||
v-if="cart.combinationId === 0 && cart.bargainId === 0 &&cart.seckillId === 0"
|
||
/>
|
||
<img
|
||
:src="cart.productInfo.image"
|
||
@click.stop="
|
||
$yrouter.push({
|
||
path: '/pages/activity/GroupDetails/index',query:{id:cart.combinationId}
|
||
})
|
||
"
|
||
v-else-if="cart.combinationId > 0"
|
||
/>
|
||
<img
|
||
:src="cart.productInfo.image"
|
||
@click.stop="
|
||
$yrouter.push({
|
||
path: '/pages/activity/DargainDetails/index',query:{id:cart.bargainId}
|
||
})
|
||
"
|
||
v-else-if="cart.bargainId > 0"
|
||
/>
|
||
<img
|
||
:src="cart.productInfo.image"
|
||
@click.stop="
|
||
$yrouter.push({
|
||
path: '/pages/activity/SeckillDetails/index',query:{id:cart.seckillId}
|
||
})
|
||
"
|
||
v-else-if="cart.seckillId > 0"
|
||
/>
|
||
</div>
|
||
<div class="text acea-row row-between">
|
||
<div class="name line2">{{ cart.productInfo.storeName }}</div>
|
||
<div class="money">
|
||
<div>
|
||
￥{{
|
||
cart.productInfo.attrInfo
|
||
? cart.productInfo.attrInfo.price
|
||
: cart.productInfo.price
|
||
}}
|
||
</div>
|
||
<div>x{{ cart.cartNum }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="totalPrice">
|
||
共{{ order.cartInfo.length || 0 }}件商品，总金额
|
||
<span
|
||
class="money font-color-red"
|
||
>￥{{ order.payPrice }}</span>
|
||
</div>
|
||
<div class="bottom acea-row row-right row-middle">
|
||
<template v-if="order._status._type == 0">
|
||
<div class="bnt cancelBnt" @click="cancelOrder(order)">取消订单</div>
|
||
<div
|
||
class="bnt bg-color-red"
|
||
@click="$yrouter.push({ path: '/pages/order/OrderDetails/index',query:{id:order.orderId} })"
|
||
>立即付款</div>
|
||
</template>
|
||
<template v-if="order._status._type == 1 || order._status._type == 9">
|
||
<div
|
||
class="bnt bg-color-red"
|
||
@click="$yrouter.push({ path: '/pages/order/OrderDetails/index',query:{id:order.orderId} })"
|
||
>查看详情</div>
|
||
</template>
|
||
<template v-if="order._status._type == 2">
|
||
<div
|
||
class="bnt default"
|
||
@click="
|
||
$yrouter.push({ path: '/pages/order/Logistics/index',query:{id:order.orderId}})
|
||
"
|
||
>查看物流</div>
|
||
<div class="bnt bg-color-red" @click="takeOrder(order)">确认收货</div>
|
||
</template>
|
||
<template v-if="order._status._type == 3">
|
||
<!--<div-->
|
||
<!--class="bnt default"-->
|
||
<!--@click="-->
|
||
<!--$yrouter.push({ path: '/pages/order/Logistics/index',query:{id:order.orderId}})-->
|
||
<!--"-->
|
||
<!--v-if="order.deliveryType == 'express'"-->
|
||
<!-->-->
|
||
<!--查看物流-->
|
||
<!--</div>-->
|
||
<div
|
||
class="bnt bg-color-red"
|
||
@click="$yrouter.push({ path: '/pages/order/OrderDetails/index',query:{id:order.orderId} })"
|
||
>去评价</div>
|
||
</template>
|
||
<template v-if="order._status._type === 4">
|
||
<div
|
||
class="bnt bg-color-red"
|
||
@click="$yrouter.push({ path: '/pages/order/OrderDetails/index',query:{id:order.orderId} })"
|
||
>查看订单</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="noCart" v-if="orderList.length === 0 && page > 1">
|
||
<div class="pictrue">
|
||
<img :src="$VUE_APP_RESOURCES_URL+'/images/noOrder.png'" />
|
||
</div>
|
||
</div>
|
||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||
<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getOrderData, getOrderList } from "@/api/order";
|
||
import {
|
||
cancelOrderHandle,
|
||
payOrderHandle,
|
||
takeOrderHandle
|
||
} from "@/libs/order";
|
||
import Loading from "@/components/Loading";
|
||
import Payment from "@/components/Payment";
|
||
import DataFormat from "@/components/DataFormat";
|
||
import { mapGetters } from "vuex";
|
||
import { isWeixin, dataFormat } from "@/utils";
|
||
|
||
const STATUS = [
|
||
"待付款",
|
||
"待发货",
|
||
"待收货",
|
||
"待评价",
|
||
"已完成",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"待付款"
|
||
];
|
||
|
||
const NAME = "MyOrder";
|
||
|
||
export default {
|
||
name: NAME,
|
||
data() {
|
||
return {
|
||
offlinePayStatus: 2,
|
||
orderData: {},
|
||
type: "",
|
||
page: 1,
|
||
limit: 20,
|
||
loaded: false,
|
||
loading: false,
|
||
orderList: [],
|
||
pay: false,
|
||
payType: ["yue", "weixin"],
|
||
from: isWeixin() ? "weixin" : "weixinh5"
|
||
};
|
||
},
|
||
components: {
|
||
Loading,
|
||
Payment,
|
||
DataFormat
|
||
},
|
||
computed: mapGetters(["userInfo"]),
|
||
watch: {
|
||
$yroute(n) {
|
||
if (n.name === NAME) {
|
||
const type = parseInt(this.$yroute.query.type) || 0;
|
||
if (this.type !== type) {
|
||
this.changeType(type);
|
||
}
|
||
this.getOrderData();
|
||
}
|
||
},
|
||
type() {}
|
||
},
|
||
methods: {
|
||
dataFormat,
|
||
setOfflinePayStatus: function(status) {
|
||
var that = this;
|
||
that.offlinePayStatus = status;
|
||
if (status === 1) {
|
||
if (that.payType.indexOf("offline") < 0) {
|
||
that.payType.push("offline");
|
||
}
|
||
}
|
||
},
|
||
getOrderData() {
|
||
getOrderData().then(res => {
|
||
this.orderData = res.data;
|
||
});
|
||
},
|
||
takeOrder(order) {
|
||
takeOrderHandle(order.orderId).finally(() => {
|
||
this.reload();
|
||
this.getOrderData();
|
||
});
|
||
},
|
||
reload() {
|
||
this.changeType(this.type);
|
||
},
|
||
changeType(type) {
|
||
this.type = type;
|
||
this.orderList = [];
|
||
this.page = 1;
|
||
this.loaded = false;
|
||
this.loading = false;
|
||
this.getOrderList();
|
||
},
|
||
getOrderList() {
|
||
if (this.loading || this.loaded) return;
|
||
this.loading = true;
|
||
const { page, limit, type } = this;
|
||
getOrderList({
|
||
page,
|
||
limit,
|
||
type
|
||
}).then(res => {
|
||
this.orderList = this.orderList.concat(res.data);
|
||
this.page++;
|
||
this.loaded = res.data.length < this.limit;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
getStatus(order) {
|
||
return STATUS[order._status._type];
|
||
},
|
||
cancelOrder(order) {
|
||
cancelOrderHandle(order.orderId)
|
||
.then(() => {
|
||
this.getOrderData();
|
||
this.orderList.splice(this.orderList.indexOf(order), 1);
|
||
})
|
||
.catch(() => {
|
||
this.reload();
|
||
});
|
||
},
|
||
paymentTap: function(order) {
|
||
var that = this;
|
||
if (
|
||
!(order.combinationId > 0 || order.bargainId > 0 || order.seckillId > 0)
|
||
) {
|
||
that.setOfflinePayStatus(order.offlinePayStatus);
|
||
}
|
||
this.pay = true;
|
||
this.toPay = type => {
|
||
payOrderHandle(order.orderId, type, that.from)
|
||
.then(() => {
|
||
const type = parseInt(this.$yroute.query.type) || 0;
|
||
that.changeType(type);
|
||
that.getOrderData();
|
||
})
|
||
.catch(() => {
|
||
const type = parseInt(that.$yroute.query.type) || 0;
|
||
that.changeType(type);
|
||
that.getOrderData();
|
||
});
|
||
};
|
||
},
|
||
toPay() {}
|
||
},
|
||
mounted() {
|
||
this.type = parseInt(this.$yroute.query.type) || 0;
|
||
this.getOrderData();
|
||
this.getOrderList();
|
||
},
|
||
onReachBottom() {
|
||
!this.loading && this.getOrderList();
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.noCart {
|
||
margin-top: 0.17rem;
|
||
padding-top: 0.1rem;
|
||
}
|
||
|
||
.noCart .pictrue {
|
||
width: 4rem;
|
||
height: 3rem;
|
||
margin: 0.7rem auto 0.5rem auto;
|
||
}
|
||
|
||
.noCart .pictrue img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|