You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
523 lines
14 KiB
523 lines
14 KiB
<template>
|
|
<!-- 我的订单 -->
|
|
<div class="user-order-list">
|
|
<div class="user-com-tab">
|
|
<span
|
|
class="item"
|
|
:class="{ on: tabCur === item.key }"
|
|
v-for="(item, index) in tabList"
|
|
:key="index"
|
|
@click="bindTab(item)"
|
|
>
|
|
{{ item.title }}
|
|
<template v-if="item.num">({{ item.num }})</template>
|
|
</span>
|
|
</div>
|
|
<div class="order-list">
|
|
<ul>
|
|
<li v-for="(item, index) in orderList" :key="index">
|
|
<div class="bd" @click="goDetail(item)">
|
|
<div class="order-txt">
|
|
<span class="sign" v-if="item.type == 2">砍价</span>
|
|
<span class="sign" v-else-if="item.type == 3">拼团</span>
|
|
<span class="sign" v-else-if="item.type == 1">秒杀</span>
|
|
订单日期: {{ item._add_time }}
|
|
<span class="ml15">{{item._status._msg}}</span>
|
|
<div v-if="item._status._type == 9" class="status">线下付款,未支付</div>
|
|
<div v-else-if="item._status._type == 0" class="status">待付款</div>
|
|
<div
|
|
v-else-if="item._status._type == 1 && (item.shipping_type == 1 || item.shipping_type == 3)"
|
|
class="status"
|
|
>
|
|
待发货
|
|
<span v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</span>
|
|
</div>
|
|
<div
|
|
v-else-if="item._status._type == 1 && (item.shipping_type == 2 || item.shipping_type == 4)"
|
|
class="status"
|
|
>
|
|
{{item.shipping_type == 2?'待核销':'待收货'}}
|
|
<span
|
|
v-if="item.refund.length"
|
|
>{{item.is_all_refund?'，退款中':'，部分退款中'}}</span>
|
|
</div>
|
|
<div v-else-if="item._status._type == 2" class="status">
|
|
待收货
|
|
<span v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</span>
|
|
</div>
|
|
<div v-else-if="item._status._type == 3" class="status">
|
|
待评价
|
|
<span v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</span>
|
|
</div>
|
|
<div v-else-if="item._status._type == 4" class="status">
|
|
已完成
|
|
<span v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</span>
|
|
</div>
|
|
<div v-else-if="item._status._type == -2" class="status">已退款</div>
|
|
<div v-else-if="item._status._type == 5 && item.status == 0" class="status">
|
|
待核销
|
|
<span v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</span>
|
|
</div>
|
|
<div v-else-if="item._status._type == 5 && item.status == 5" class="status">
|
|
部分核销
|
|
<span v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</span>
|
|
</div>
|
|
<div v-else-if="item._status._type == -1" class="status">申请退款</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="goods-item" v-for="(goods, index) in item.cartInfo" :key="index">
|
|
<div class="img-box" v-if="goods.productInfo.attrInfo">
|
|
<img :src="goods.productInfo.attrInfo.image" alt />
|
|
</div>
|
|
<div class="img-box" v-else>
|
|
<img :src="goods.productInfo.image" alt />
|
|
</div>
|
|
<div class="txtCon acea-row row-between-wrapper">
|
|
<div class="info-txt">
|
|
<div class="title line2">
|
|
<span v-if="goods.is_gift" class="font-color-red">[赠品]</span>
|
|
{{ goods.productInfo.store_name }}
|
|
</div>
|
|
<div
|
|
class="info"
|
|
v-if="goods.productInfo.attrInfo"
|
|
>{{ goods.productInfo.attrInfo.suk }}</div>
|
|
<div
|
|
v-if="goods.refund_num && item._status._type != -2"
|
|
class="return"
|
|
>{{ goods.refund_num }}件退款中</div>
|
|
</div>
|
|
<div class="cartInfo">
|
|
<div>¥{{goods.productInfo.attrInfo?goods.productInfo.attrInfo.price:goods.productInfo.price}}</div>
|
|
<div class="num">x{{ goods.cart_num }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="foot">
|
|
<p>
|
|
共{{ item.total_num || 0 }}件商品，总金额
|
|
<span>￥{{ item.pay_price }}</span>
|
|
(含运费{{ item.pay_postage }})
|
|
</p>
|
|
<div class="btn-wrapper">
|
|
<div
|
|
class="rest"
|
|
v-if="item._status._type === 0 || item._status._type === 9"
|
|
@click="cancelOrder(item, index)"
|
|
>取消订单</div>
|
|
<div class="pay" v-if="item.paid === 0" @click="goBuy(item)">立即支付</div>
|
|
<!--<div class="rest" v-if="item._status._type === 1 || item._status._type === 9"-->
|
|
<!--@click="goRefound(item)">申请退款-->
|
|
<!--</div>-->
|
|
<div
|
|
class="rest"
|
|
v-if="item._status._type === 3 || item._status._type === 4"
|
|
@click="goOrderConfirm(item.order_id)"
|
|
>再次购买</div>
|
|
<div
|
|
class="pay"
|
|
v-if="item._status._type === 3 && !item.is_reply"
|
|
@click="goDetail(item)"
|
|
>去评价</div>
|
|
<div class="pay" v-if="item._status._type === 4" @click="delOrder(item)">删除订单</div>
|
|
<div class="pay" @click="goDetail(item)">查看详情</div>
|
|
</div>
|
|
</div>
|
|
<div class="refund-icon" v-if="item._status._type === -1 || item._status._type === -2">
|
|
<img src="~assets/images/order_status_1.png" alt v-if="item.refund_status === 2" />
|
|
<img src="~assets/images/order_status_2.png" alt v-if="item.refund_status === 1" />
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="pages-box" v-if="total > 0">
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next"
|
|
@current-change="bindPageCur"
|
|
:total="total"
|
|
:current-page="page"
|
|
></el-pagination>
|
|
</div>
|
|
<div class="empty-box" v-if="orderList.length == 0">
|
|
<img src="~assets/images/noorder.png" alt />
|
|
<p>亲，暂无订单信息哟~</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "orderList",
|
|
auth: "guest",
|
|
scrollToTop: true,
|
|
data() {
|
|
return {
|
|
tabCur: "",
|
|
tabList: [
|
|
{
|
|
title: "全部订单",
|
|
key: ""
|
|
},
|
|
{
|
|
title: "待付款",
|
|
key: "0",
|
|
numberName: "unpaid_count"
|
|
},
|
|
{
|
|
title: "待发货",
|
|
key: "1",
|
|
numberName: "unshipped_count"
|
|
},
|
|
{
|
|
title: "待收货",
|
|
key: "2",
|
|
numberName: "received_count"
|
|
},
|
|
{
|
|
title: "待评论",
|
|
key: "3",
|
|
numberName: "evaluated_count"
|
|
},
|
|
{
|
|
title: "已完成",
|
|
key: "4",
|
|
numberName: "complete_count"
|
|
}
|
|
],
|
|
orderList: [],
|
|
total: 0,
|
|
page: 1,
|
|
limit: 10
|
|
};
|
|
},
|
|
fetch({ store }) {
|
|
store.commit("isHeader", true);
|
|
store.commit("isFooter", true);
|
|
},
|
|
head() {
|
|
return {
|
|
title: "我的订单-" + this.$store.state.titleCon
|
|
};
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
Promise.all([this.getList(), this.getNumber()]);
|
|
},
|
|
methods: {
|
|
// 再次购买
|
|
goOrderConfirm(orderId) {
|
|
let that = this;
|
|
that.$axios
|
|
.post("/order/again", {
|
|
uni: orderId
|
|
})
|
|
.then(res => {
|
|
that.$router.push({
|
|
path: "/order_confirm",
|
|
query: { new: 1, cartId: res.data.cateId }
|
|
});
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
//删除订单
|
|
delOrder(item) {
|
|
let that = this;
|
|
this.$confirm("确定删除该订单吗？", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning"
|
|
}).then(res => {
|
|
that.$axios
|
|
.post("/order/del", {
|
|
uni: item.order_id
|
|
})
|
|
.then(data => {
|
|
that.getList();
|
|
that.tabList.forEach((i, index) => {
|
|
if (i.key == 4) {
|
|
that.$set(
|
|
that.tabList[index],
|
|
"num",
|
|
that.tabList[index].num - 1
|
|
);
|
|
}
|
|
});
|
|
this.$message.success("删除成功");
|
|
});
|
|
});
|
|
},
|
|
// 选项卡
|
|
bindTab(item) {
|
|
this.tabCur = item.key;
|
|
this.page = 1;
|
|
this.getList();
|
|
},
|
|
// 获取订单个数
|
|
getNumber() {
|
|
this.$axios.get("order/data").then(res => {
|
|
for (var i in res.data) {
|
|
this.tabList.forEach(tab => {
|
|
if (i == tab.numberName) {
|
|
tab.num = res.data[i];
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 获取订单列表
|
|
getList() {
|
|
this.$axios
|
|
.get("pc/get_order_list", {
|
|
params: {
|
|
type: this.tabCur,
|
|
page: this.page,
|
|
limit: this.limit
|
|
}
|
|
})
|
|
.then(res => {
|
|
this.orderList = res.data.list;
|
|
this.total = res.data.count;
|
|
});
|
|
},
|
|
// 取消订单
|
|
cancelOrder(item) {
|
|
this.$confirm("确定取消该订单吗？", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning"
|
|
}).then(res => {
|
|
this.$axios
|
|
.post("order/cancel", {
|
|
id: item.order_id
|
|
})
|
|
.then(data => {
|
|
this.getList();
|
|
this.tabList.forEach((item, index) => {
|
|
if (item.key == 0) {
|
|
this.$set(
|
|
this.tabList[index],
|
|
"num",
|
|
this.tabList[index].num - 1
|
|
);
|
|
}
|
|
});
|
|
return this.$message.success(data.msg);
|
|
});
|
|
});
|
|
},
|
|
// 查看详情
|
|
goDetail(item) {
|
|
this.$router.push({
|
|
path: `/order_detail`,
|
|
query: {
|
|
orderId: item.order_id
|
|
}
|
|
});
|
|
},
|
|
// 去评价
|
|
goEvaluation(item) {
|
|
this.$router.push({
|
|
path: `/evaluation`,
|
|
query: {
|
|
unique: item.unique
|
|
}
|
|
});
|
|
},
|
|
// 去退款
|
|
goRefound(item) {
|
|
this.$router.push({
|
|
path: `/refund`,
|
|
query: {
|
|
orderId: item.order_id
|
|
}
|
|
});
|
|
},
|
|
// 去物流
|
|
goLogistics(item) {
|
|
this.$router.push({
|
|
path: `/logistics`,
|
|
query: {
|
|
orderId: item.order_id
|
|
}
|
|
});
|
|
},
|
|
// 分页点击
|
|
bindPageCur(data) {
|
|
this.page = data;
|
|
this.getList();
|
|
},
|
|
// 立即支付
|
|
goBuy(item) {
|
|
this.$router.push({
|
|
path: "/payment",
|
|
query: {
|
|
result: item.order_id
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.user-com-tab {
|
|
.item {
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
|
|
.user-order-list {
|
|
li {
|
|
position: relative;
|
|
padding: 30px 0 26px;
|
|
border-bottom: 1px solid #ececec;
|
|
.refund-icon {
|
|
position: absolute;
|
|
right: 50px;
|
|
top: 40px;
|
|
}
|
|
.bd {
|
|
padding-right: 40px;
|
|
border-bottom: 1px dashed #e1e1e1;
|
|
cursor: pointer;
|
|
|
|
.order-txt {
|
|
color: #282828;
|
|
font-size: 14px;
|
|
|
|
.sign {
|
|
border: 1px solid #e93323;
|
|
color: #e93323;
|
|
padding: 0 5px;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.status {
|
|
float: right;
|
|
color: #e93323;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin-top: 20px;
|
|
|
|
.goods-item {
|
|
display: flex;
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
|
|
.img-box {
|
|
width: 120px;
|
|
height: 120px;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.txtCon {
|
|
width: 795px;
|
|
}
|
|
|
|
.cartInfo {
|
|
font-size: 14px;
|
|
color: #999;
|
|
text-align: right;
|
|
.num {
|
|
font-size: 12px;
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
|
|
.info-txt {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 500px;
|
|
margin-left: 24px;
|
|
font-size: 14px;
|
|
.info {
|
|
font-size: 12px;
|
|
color: #aaa;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.return {
|
|
color: #e93323;
|
|
font-size: 12px;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.price {
|
|
margin-top: 15px;
|
|
color: #e93323;
|
|
}
|
|
|
|
.num {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 60%;
|
|
transform: translateY(-50%);
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.foot {
|
|
padding-top: 26px;
|
|
padding-right: 32px;
|
|
|
|
p {
|
|
text-align: right;
|
|
color: #666;
|
|
font-size: 14px;
|
|
|
|
span {
|
|
color: #e93323;
|
|
}
|
|
}
|
|
|
|
.btn-wrapper {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 20px;
|
|
|
|
div {
|
|
width: 110px;
|
|
height: 36px;
|
|
text-align: center;
|
|
line-height: 34px;
|
|
margin-left: 20px;
|
|
border: 1px solid #999999;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
cursor: pointer;
|
|
|
|
&.pay {
|
|
border-color: #e93323;
|
|
background: #e93323;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.pages-box {
|
|
margin-top: 30px;
|
|
text-align: right;
|
|
}
|
|
</style>
|