<template>
|
<view>
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="订单列表" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
<view class="orderWrap">
|
<view class="coreshop-padding-10">
|
<u-subsection :list="tabs" :current="current" @change="onClickItem" mode="button"></u-subsection>
|
</view>
|
<block v-if="listData.length > 0">
|
<view class="orderList" v-for="(order, orderIndex) in listData" :key="orderIndex">
|
<view class="coreshop-flex coreshop-justify-between coreshop-align-center" @click="goOrderDetail(order.orderId)">
|
<view class="coreshop-flex coreshop-align-center">
|
<u-icon name="home" :size="20" color="rgb(94,94,94)"></u-icon>
|
<view class="coreshop-margin-left-5 coreshop-margin-right-5 coreshop-font-15 coreshop-font-weight-bold">订单号 : {{order.orderId}}</view>
|
<u-icon name="arrow-right" color="rgb(203,203,203)" :size="15"></u-icon>
|
</view>
|
<view>{{ order.orderStatusName }}</view>
|
</view>
|
<view class="item" v-for="(goods, indexGoods) in order.items" :key="indexGoods">
|
<view class="left">
|
<u--image :showLoading="true" :src="goods.imageUrl" width="80px" height="80px" mode="aspectFill"></u--image>
|
</view>
|
<view class="content">
|
<view class="title u-line-2">{{goods.name}}</view>
|
<view class="type">{{goods.addon}}</view>
|
<view class="delivery-time">下单时间：{{ $u.timeFormat(goods.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
|
</view>
|
<view class="right">
|
<view class="price">
|
￥{{ goods.price }}
|
</view>
|
<view class="number">x{{ goods.nums }}</view>
|
</view>
|
</view>
|
<view class="total">
|
共{{ order.items.length }}件商品 合计:
|
<text class="total-price">
|
￥{{ order.orderAmount }}
|
</text>
|
</view>
|
<view class="bottom">
|
<view class="more">
|
<u-tag :text="order.typeText" mode="light" />
|
</view>
|
<view class="coreshop-flex">
|
<view class='logistics coreshop-btn' @click="goOrderDetail(order.orderId)">查看详情</view>
|
<view class='coreshop-btn exchange' v-if="order.status === 1 && order.payStatus === 1" @click="goToPay(order.orderId)">立即支付</view>
|
<view class='coreshop-btn exchange' v-if="order.status === 1 && order.payStatus >= 2 && order.shipStatus >= 3 && order.confirmStatus === 1" @click="tackDelivery(current,orderIndex)">确认收货</view>
|
<view class='evaluate coreshop-btn' v-if="order.status === 1 && order.payStatus >= 2 && order.shipStatus >= 3 && order.confirmStatus >= 2 && order.isComment === false" @click="toEvaluate(order.orderId)">立即评价</view>
|
</view>
|
</view>
|
</view>
|
<u-loadmore :status="loadStatus"></u-loadmore>
|
</block>
|
|
|
<!-- 无数据时默认显示 -->
|
<view class="coreshop-emptybox" v-else>
|
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="您还没有相关类别的订单" mode="list"></u-empty>
|
<navigator class="coreshop-btn" url="/pages/category/index/index" open-type="switchTab">随便逛逛</navigator>
|
</view>
|
|
|
</view>
|
</view>
|
|
|
</template>
|
<script>
|
|
export default {
|
|
data() {
|
return {
|
tabs: ['全部', '待付款', '待发货', '待收货', '待评价'],
|
items: ['未使用', '已使用', '已失效'],
|
current: 0,
|
page: 1,
|
limit: 10,
|
listData: [],
|
loadStatus: 'loadmore',
|
iconType: 'flower',
|
loadText: {
|
loadmore: '轻轻上拉',
|
loading: '努力加载中',
|
nomore: '实在没有了'
|
},
|
status: [0, 1, 2, 3, 4],// 订单状态 0全部 1待付款 2待发货 3待收货 4待评价
|
}
|
},
|
onLoad: function (option) {
|
var currentIndex = option.swiperCurrentIndexId;
|
if (currentIndex) {
|
this.current = currentIndex;
|
}
|
this.getOrders();
|
},
|
onReachBottom() {
|
if (this.loadStatus === 'loadmore') {
|
this.getOrders();
|
}
|
},
|
onShow() {
|
// #ifdef MP-ALIPAY || MP-TOUTIAO
|
let orderUserShip = this.$db.get('orderUserShip', true);
|
if (orderUserShip) {
|
this.isReload = orderUserShip;
|
this.$db.del('orderUserShip', true);
|
}
|
let orderUserEvaluate = this.$db.get('orderUserEvaluate', true);
|
if (orderUserEvaluate) {
|
this.isReload = orderUserEvaluate;
|
this.$db.del('orderUserEvaluate', true);
|
}
|
// #endif
|
},
|
methods: {
|
// tab点击切换
|
onClickItem(index) {
|
if (this.current !== index) {
|
this.current = index;
|
this.page = 1;
|
this.listData = [];
|
this.getOrders();
|
}
|
},
|
//获取列表
|
getOrders() {
|
this.loadStatus = 'loading'
|
let data = {
|
page: this.page,
|
limit: this.limit,
|
status: this.current
|
}
|
this.$u.api.orderList(data).then(res => {
|
if (res.status) {
|
res.data.list = this.formatOrderStatus(res.data.list);
|
let newList = this.listData.concat(res.data.list);
|
this.listData = newList;
|
|
if (res.data.count > this.listData.length) {
|
this.page++
|
this.loadStatus = 'loadmore'
|
} else {
|
this.loadStatus = 'nomore'
|
}
|
} else {
|
this.$u.toast(res.msg);
|
}
|
});
|
},
|
removeorder: function (oid) {
|
//console.log(oid);
|
uni.showModal({
|
title: '确认提醒',
|
content: '您确定要移除订单 [ ' + oid + ' ] 吗？',
|
success: function (e) {
|
if (e.confirm) {
|
//自行完善删除代码
|
}
|
}
|
});
|
},
|
// 确认收货
|
tackDelivery(index, orderIndex) {
|
let _this = this;
|
this.$common.modelShow('提示', '确认执行收货操作吗?', () => {
|
let data = {
|
id: _this.listData[orderIndex].orderId
|
}
|
_this.$u.api.confirmOrder(data).then(res => {
|
if (res.status) {
|
_this.$refs.uToast.show({
|
message: '确认收货成功', type: 'success', complete: function () {
|
if (this.tab !== 0) {
|
_this.listData.splice(orderIndex, 1)
|
} else {
|
_this.getOrders();
|
}
|
}
|
})
|
} else {
|
_this.$u.toast(res.msg)
|
}
|
})
|
})
|
},
|
// 订单状态统一在这处理
|
formatOrderStatus(orderList) {
|
orderList.forEach(item => {
|
switch (item.status) {
|
case 1:
|
if (item.payStatus === 1) {
|
this.$set(item, 'orderStatusName', '待付款')
|
} else if (item.payStatus >= 2 && item.shipStatus === 1) {
|
this.$set(item, 'orderStatusName', '待发货')
|
} else if (item.payStatus >= 2 && item.shipStatus === 2) {
|
this.$set(item, 'orderStatusName', '部分发货')
|
} else if (item.payStatus >= 2 && item.shipStatus >= 3 && item.confirmStatus === 1) {
|
this.$set(item, 'orderStatusName', '已发货')
|
} else if (item.payStatus >= 2 && item.shipStatus >= 3 && item.confirmStatus >= 2 && item.isComment === false) {
|
this.$set(item, 'orderStatusName', '待评价')
|
} else if (item.payStatus >= 2 && item.shipStatus >= 3 && item.confirmStatus >= 2 && item.isComment === true) {
|
this.$set(item, 'orderStatusName', '已评价')
|
}
|
break
|
case 2:
|
this.$set(item, 'orderStatusName', '已完成')
|
break
|
case 3:
|
this.$set(item, 'orderStatusName', '已取消')
|
break
|
}
|
});
|
for (let i in orderList) {
|
for (let j in orderList[i].items) {
|
orderList[i].items[j].promotionList = JSON.parse(orderList[i].items[j].promotionList);
|
}
|
}
|
return orderList
|
}
|
},
|
}
|
</script>
|
|
|
<style lang="scss">
|
</style>
|
