|
|
@ -1,12 +1,13 @@ |
|
|
|
<template> |
|
|
|
<view class="content"> |
|
|
|
<view class="navbar"> |
|
|
|
<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view> |
|
|
|
<view v-for="(item, index) in navList" :key="index" class="nav-item" |
|
|
|
:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab"> |
|
|
|
<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex"> |
|
|
|
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData"> |
|
|
|
<scroll-view class="list-scroll-content" scroll-y> |
|
|
|
<!-- 空白页 --> |
|
|
|
<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty> |
|
|
|
|
|
|
@ -15,60 +16,83 @@ |
|
|
|
<view class="i-top b-b"> |
|
|
|
<text class="time" @click="navToDetailPage(item)">{{ item.createTime }}</text> |
|
|
|
<!-- <text class="state" :style="{ color: item.stateTipColor }" @click="navToDetailPage(item)">{{ item.id }}</text> --> |
|
|
|
<text class="state" :style="{ color: item.stateTipColor }" @click="navToDetailPage(item)">{{ item.stateTip }}</text> |
|
|
|
<text v-if="item.status === 12" class="del-btn yticon icon-iconfontshanchu1" @click="deleteOrder(index)"></text> |
|
|
|
<text class="state" :style="{ color: item.stateTipColor }" |
|
|
|
@click="navToDetailPage(item)">{{ item.stateTip }}</text> |
|
|
|
<text v-if="item.status === 12" class="del-btn yticon icon-iconfontshanchu1" |
|
|
|
@click="deleteOrder(index)"></text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<scroll-view v-if="item.orderItemList.length > 1" class="goods-box" scroll-y> |
|
|
|
<view v-for="(goodsItem, goodsIndex) in item.orderItemList" :key="goodsIndex" class="goods-item"> |
|
|
|
<img class="goods-img" :src="goodsItem.productPic" @click="navToDetailPage(item)" mode="aspectFill" /> |
|
|
|
<view v-for="(goodsItem, goodsIndex) in item.orderItemList" :key="goodsIndex" |
|
|
|
class="goods-item"> |
|
|
|
<img class="goods-img" :src="goodsItem.productPic" @click="navToDetailPage(item)" |
|
|
|
mode="aspectFill" /> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
<view v-if="item.orderItemList.length === 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.orderItemList" :key="goodsIndex"> |
|
|
|
<view v-if="item.orderItemList.length === 1" class="goods-box-single" |
|
|
|
v-for="(goodsItem, goodsIndex) in item.orderItemList" :key="goodsIndex"> |
|
|
|
<img class="goods-img" :src="goodsItem.productPic" mode="aspectFill" /> |
|
|
|
<view class="right" @click="navToDetailPage(item)"> |
|
|
|
<text class="title clamp">{{ goodsItem.productName }}</text> |
|
|
|
<text class="attr-box">{{ goodsItem.productAttr }} x {{ goodsItem.productQuantity }}</text> |
|
|
|
<text class="price">{{ goodsItem.productPrice }}</text><br/> |
|
|
|
<!-- <text class="title clamp" v-if="item.status === 5">{{ item.deliveryCompany }}:{{ item.deliverySn }}</text> |
|
|
|
<text class="title clamp" v-if="item.status === 3">{{ item.deliveryCompany }}:{{ item.deliverySn }}</text> --> |
|
|
|
</view> |
|
|
|
<view class="num_price"> |
|
|
|
<text class="attr-box">x {{ goodsItem.productQuantity }}</text> |
|
|
|
<text class="price">{{ goodsItem.productPrice }}</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view style="display: flex;flex-direction: row;margin-right: 13px;margin-bottom: 10px;"> |
|
|
|
<!-- <image v-if="item.status === 5||item.status === 3" style="width: 20px;height: 20px;" |
|
|
|
src="/static/temp//orderId.png"></image> --> |
|
|
|
<text style="margin-left: 5px;color: #c1c1c1;font-size: 13px;" |
|
|
|
v-if="item.status === 5||item.status === 3">{{item.deliveryCompany}}:</text> |
|
|
|
<text style="margin-left: 5px;color: #c1c1c1;font-size: 13px;" |
|
|
|
v-if="item.status === 5||item.status === 3">{{ item.deliverySn }}</text> |
|
|
|
<view class="price-box"> |
|
|
|
共 |
|
|
|
<text class="num">{{ item.orderItemList.length }}</text> |
|
|
|
件商品 实付款 |
|
|
|
<text class="price">{{ item.payAmount }}</text> |
|
|
|
</view> |
|
|
|
<view class="action-box b-t"> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="action-box b-t" v-if="item.status==12||item.status==3"> |
|
|
|
<!-- <text class="state" :style="{ color: item.stateTipColor }" v-if="item.orderType == 1">正常订单</text> |
|
|
|
<text class="state" :style="{ color: item.stateTipColor }" v-if="item.orderType == 6">秒杀订单</text> |
|
|
|
<text class="state" :style="{ color: item.stateTipColor }" v-else-if="item.orderType == 2">拼团订单</text> |
|
|
|
<text class="state" :style="{ color: item.stateTipColor }" v-else-if="item.orderType == 3">团购订单</text> |
|
|
|
<text class="state" :style="{ color: item.stateTipColor }" v-else-if="item.orderType == 4">砍价订单</text> |
|
|
|
<text class="state" :style="{ color: item.stateTipColor }" v-else-if="item.orderType == 5">积分订单</text> |
|
|
|
<text class="state" :style="{ color: item.stateTipColor }" v-else-if="item.orderType == 5">积分订单</text> --> |
|
|
|
<button v-if="item.status == 12" class="action-btn" @click="cancelOrder(item)">取消订单</button> |
|
|
|
<button v-if="item.status == 12" class="action-btn recom" @click="payOrder(item)">立即支付</button> |
|
|
|
<button v-if="item.status == 12" class="action-btn recom" |
|
|
|
@click="payOrder(item)">立即支付</button> |
|
|
|
<!-- <button v-if="item.status > 2 && item.status < 10" class="action-btn recom" @click="lookLogistics(item.id)">物流追踪</button> --> |
|
|
|
<button v-if="item.status < 5" class="action-btn recom" @click="applyRefund(item.id)">申请售后</button> |
|
|
|
<button v-if="item.status == 3" class="action-btn recom" @click="confimDelivery(item)">确认收货</button> |
|
|
|
<!-- <button v-if="item.status < 5" class="action-btn recom" @click="applyRefund(item.id)">申请售后</button> --> |
|
|
|
<button v-if="item.status == 3" class="action-btn recom" |
|
|
|
@click="confimDelivery(item)">确认收货</button> |
|
|
|
<!-- <button class="action-btn recom" hover-class="btn-hover" v-if="item.status === 4" @click="toEvaluate(item.id)">立即评价</button> --> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<uni-load-more :status="loadingType"></uni-load-more> |
|
|
|
|
|
|
|
</scroll-view> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
<uni-load-more :status="loadingType"></uni-load-more> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapState } from 'vuex'; |
|
|
|
import { |
|
|
|
mapState |
|
|
|
} from 'vuex'; |
|
|
|
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue'; |
|
|
|
import Api from '@/common/api'; |
|
|
|
import uniLoadMore from '@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue'; |
|
|
|
import empty from '@/components/empty'; |
|
|
|
import { formatDate } from '@/common/date'; |
|
|
|
import { |
|
|
|
formatDate |
|
|
|
} from '@/common/date'; |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
mallplusCopyright, |
|
|
@ -79,39 +103,37 @@ export default { |
|
|
|
return { |
|
|
|
tabCurrentIndex: 0, |
|
|
|
pageNum: 1, |
|
|
|
orderList: [], |
|
|
|
headerPosition: 'fixed', |
|
|
|
headerTop: '0px', |
|
|
|
loadingType: 'loading', //加载更多状态 |
|
|
|
navList: [ |
|
|
|
{ |
|
|
|
loadingType: 'more', //加载更多状态 |
|
|
|
navList: [{ |
|
|
|
status: 0, |
|
|
|
text: '全部', |
|
|
|
loadingType: 'loading', |
|
|
|
loadingType: 'more', |
|
|
|
orderList: [] |
|
|
|
}, |
|
|
|
{ |
|
|
|
status: 12, |
|
|
|
text: '待付款', |
|
|
|
loadingType: 'loading', |
|
|
|
loadingType: 'more', |
|
|
|
orderList: [] |
|
|
|
}, |
|
|
|
{ |
|
|
|
status: 2, |
|
|
|
text: '待发货', |
|
|
|
loadingType: 'loading', |
|
|
|
loadingType: 'more', |
|
|
|
orderList: [] |
|
|
|
}, |
|
|
|
{ |
|
|
|
status: 3, |
|
|
|
text: '已发货', |
|
|
|
loadingType: 'loading', |
|
|
|
loadingType: 'more', |
|
|
|
orderList: [] |
|
|
|
}, |
|
|
|
{ |
|
|
|
status: 5, |
|
|
|
text: '已完成', |
|
|
|
loadingType: 'loading', |
|
|
|
loadingType: 'more', |
|
|
|
orderList: [] |
|
|
|
} |
|
|
|
] |
|
|
@ -139,11 +161,22 @@ export default { |
|
|
|
onPullDownRefresh() { |
|
|
|
this.pageNum = 1; |
|
|
|
this.loadData('refresh'); |
|
|
|
setTimeout(function() { |
|
|
|
uni.stopPullDownRefresh(); |
|
|
|
}, 2000); |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
this.pageNum = 1; |
|
|
|
this.loadData('refresh'); |
|
|
|
setTimeout(function() { |
|
|
|
uni.stopPullDownRefresh(); |
|
|
|
}, 2000); |
|
|
|
}, |
|
|
|
//加载更多 |
|
|
|
onReachBottom() { |
|
|
|
this.pageNum = this.pageNum + 1; |
|
|
|
this.loadData('refresh'); |
|
|
|
this.loadData(); |
|
|
|
|
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState(['hasLogin', 'userInfo']) |
|
|
@ -159,6 +192,15 @@ export default { |
|
|
|
}, |
|
|
|
//获取订单列表 |
|
|
|
async loadData(type = 'add', loading) { |
|
|
|
//没有更多直接返回 |
|
|
|
if (type === 'add') { |
|
|
|
if (this.loadingType === 'nomore') { |
|
|
|
return; |
|
|
|
} |
|
|
|
this.loadingType = 'loading'; |
|
|
|
} else { |
|
|
|
this.loadingType = 'more'; |
|
|
|
} |
|
|
|
//这里是将订单挂载到tab列表下 |
|
|
|
let index = this.tabCurrentIndex; |
|
|
|
let navItem = this.navList[index]; |
|
|
@ -166,12 +208,16 @@ export default { |
|
|
|
let status = navItem.status; |
|
|
|
let url; |
|
|
|
|
|
|
|
let params = { pageNum: this.pageNum, status: status }; |
|
|
|
let params = { |
|
|
|
pageNum: this.pageNum, |
|
|
|
status: status |
|
|
|
}; |
|
|
|
console.log("params:------" + JSON.stringify(params)) |
|
|
|
let data = await Api.apiCall('get', Api.order.orderList, params); |
|
|
|
console.log("data:------" + data) |
|
|
|
let goodsList = data.records; |
|
|
|
let goodsListJson = JSON.stringify(goodsList) |
|
|
|
console.log("goodsList:"+goodsListJson) |
|
|
|
// console.log("goodsList:" + goodsListJson) |
|
|
|
let orderList = goodsList.filter(item => { |
|
|
|
//添加不同状态下订单的表现形式 |
|
|
|
item = Object.assign(item, this.orderStateExp(item.status)); |
|
|
@ -185,13 +231,15 @@ export default { |
|
|
|
}); |
|
|
|
|
|
|
|
if (type === 'refresh') { |
|
|
|
this.orderList = []; |
|
|
|
navItem.orderList = []; |
|
|
|
} |
|
|
|
this.orderList = this.orderList.concat(orderList); |
|
|
|
console.log("this.orderList.length======:"+this.orderList.length) |
|
|
|
navItem.orderList = navItem.orderList.concat(orderList); |
|
|
|
console.log("data.total======:" + data.total) |
|
|
|
console.log("length======:" + navItem.orderList.length) |
|
|
|
//判断是否还有下一页,有是more 没有是nomore(测试数据判断大于20就没有了) |
|
|
|
this.loadingType = this.orderList.length >= data.total ? 'nomore' : 'loading'; |
|
|
|
this.loadingType = navItem.orderList.length >= data.total ? 'nomore' : 'more'; |
|
|
|
console.log("type======:" + type) |
|
|
|
console.log("loadingType======:" + this.loadingType) |
|
|
|
if (type === 'refresh') { |
|
|
|
if (loading == 1) { |
|
|
|
uni.hideLoading(); |
|
|
@ -200,12 +248,6 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
navItem.orderList = []; |
|
|
|
console.log(orderList) |
|
|
|
orderList.forEach(item => { |
|
|
|
console.log("item-----:"+item) |
|
|
|
navItem.orderList.push(item); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
//swiper 切换 |
|
|
@ -239,19 +281,23 @@ export default { |
|
|
|
}, |
|
|
|
//取消订单 |
|
|
|
async cancelOrder(item) { |
|
|
|
let params = { orderId: item.id }; |
|
|
|
let params = { |
|
|
|
orderId: item.id |
|
|
|
}; |
|
|
|
let data = await Api.apiCall('post', Api.order.closeOrder, params); |
|
|
|
console.log(data) |
|
|
|
if (data) { |
|
|
|
this.$api.msg(data); |
|
|
|
this.pageNum = 1; |
|
|
|
this.loadData('refresh'); |
|
|
|
this.tabCurrentIndex = 4; |
|
|
|
this.tabCurrentIndex = 1; |
|
|
|
} |
|
|
|
}, |
|
|
|
//订单确认收货 |
|
|
|
async confimDelivery(item) { |
|
|
|
let params = { id: item.id }; |
|
|
|
let params = { |
|
|
|
id: item.id |
|
|
|
}; |
|
|
|
let data = await Api.apiCall('post', Api.order.confimDelivery, params); |
|
|
|
console.log(data); |
|
|
|
if (data) { |
|
|
@ -272,7 +318,9 @@ export default { |
|
|
|
|
|
|
|
//订单申请退款 |
|
|
|
async applyRefund1(item) { |
|
|
|
let params = { id: item.id }; |
|
|
|
let params = { |
|
|
|
id: item.id |
|
|
|
}; |
|
|
|
let data = await Api.apiCall('post', Api.order.applyRefund, params); |
|
|
|
if (data) { |
|
|
|
console.log(data); |
|
|
@ -291,15 +339,10 @@ export default { |
|
|
|
orderStateExp(value) { |
|
|
|
let stateTip = '', |
|
|
|
stateTipColor = '#fa436a'; |
|
|
|
if (value === 12) { |
|
|
|
stateTipColor = '#909399'; |
|
|
|
stateTip = '待付款'; |
|
|
|
} |
|
|
|
if (value === 1) { |
|
|
|
stateTipColor = '#909399'; |
|
|
|
stateTip = '支付成功,没有回掉'; |
|
|
|
} |
|
|
|
if (value === 2) { |
|
|
|
} else if (value === 2) { |
|
|
|
stateTip = '待发货'; |
|
|
|
} else if (value === 3) { |
|
|
|
stateTip = '待收货'; |
|
|
@ -314,6 +357,9 @@ export default { |
|
|
|
stateTip = ' 维权已完成'; |
|
|
|
} else if (value === 8) { |
|
|
|
stateTip = '待分享'; |
|
|
|
} else if (value === 12) { |
|
|
|
stateTipColor = '#909399'; |
|
|
|
stateTip = '待付款'; |
|
|
|
} else if (value === 13) { |
|
|
|
stateTip = '申请退款'; |
|
|
|
} else if (value === 14) { |
|
|
@ -322,13 +368,14 @@ export default { |
|
|
|
stateTip = '已关闭'; |
|
|
|
} else if (value === 16) { |
|
|
|
stateTip = '无效订单'; |
|
|
|
} else if (value === 18) { |
|
|
|
stateTip = '拼团下单'; |
|
|
|
} else { |
|
|
|
stateTip = '待付款'; |
|
|
|
} |
|
|
|
|
|
|
|
return { stateTip, stateTipColor }; |
|
|
|
return { |
|
|
|
stateTip, |
|
|
|
stateTipColor |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
dateFormat(time) { |
|
|
@ -352,6 +399,7 @@ page, |
|
|
|
.swiper-box { |
|
|
|
height: calc(100% - 40px); |
|
|
|
} |
|
|
|
|
|
|
|
.list-scroll-content { |
|
|
|
height: 100%; |
|
|
|
} |
|
|
@ -364,6 +412,7 @@ page, |
|
|
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06); |
|
|
|
position: relative; |
|
|
|
z-index: 10; |
|
|
|
|
|
|
|
.nav-item { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
@ -373,8 +422,10 @@ page, |
|
|
|
font-size: 15px; |
|
|
|
color: $font-color-dark; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&.current { |
|
|
|
color: $base-color; |
|
|
|
|
|
|
|
&:after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
@ -392,12 +443,14 @@ page, |
|
|
|
.uni-swiper-item { |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.order-item { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
padding-left: 30upx; |
|
|
|
background: #fff; |
|
|
|
margin-top: 16upx; |
|
|
|
|
|
|
|
.i-top { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
@ -406,17 +459,21 @@ page, |
|
|
|
font-size: $font-base; |
|
|
|
color: $font-color-dark; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.time { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.state { |
|
|
|
color: $base-color; |
|
|
|
} |
|
|
|
|
|
|
|
.del-btn { |
|
|
|
padding: 10upx 0 10upx 36upx; |
|
|
|
font-size: $font-lg; |
|
|
|
color: $font-color-light; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&:after { |
|
|
|
content: ''; |
|
|
|
width: 0; |
|
|
@ -429,51 +486,67 @@ page, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 多条商品 */ |
|
|
|
.goods-box { |
|
|
|
height: 160upx; |
|
|
|
padding: 20upx 0; |
|
|
|
white-space: nowrap; |
|
|
|
|
|
|
|
.goods-item { |
|
|
|
width: 120upx; |
|
|
|
height: 120upx; |
|
|
|
display: inline-block; |
|
|
|
margin-right: 24upx; |
|
|
|
} |
|
|
|
|
|
|
|
.goods-img { |
|
|
|
display: block; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 单条商品 */ |
|
|
|
.goods-box-single { |
|
|
|
display: flex; |
|
|
|
padding: 20upx 0; |
|
|
|
|
|
|
|
.goods-img { |
|
|
|
display: block; |
|
|
|
width: 120upx; |
|
|
|
height: 120upx; |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
padding: 0 30upx 0 24upx; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: $font-base + 2upx; |
|
|
|
color: $font-color-dark; |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.num_price { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: space-between; |
|
|
|
margin-top: 5px; |
|
|
|
|
|
|
|
.attr-box { |
|
|
|
flex: 1; |
|
|
|
font-size: $font-sm + 2upx; |
|
|
|
color: $font-color-light; |
|
|
|
padding: 10upx 12upx; |
|
|
|
margin: 0 2upx 0 8upx; |
|
|
|
} |
|
|
|
|
|
|
|
.price { |
|
|
|
font-size: $font-base + 2upx; |
|
|
|
color: $font-color-dark; |
|
|
|
|
|
|
|
&:before { |
|
|
|
content: '¥'; |
|
|
|
font-size: $font-sm; |
|
|
@ -481,22 +554,28 @@ page, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.price-box { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
align-items: baseline; |
|
|
|
padding: 20upx 30upx; |
|
|
|
font-size: $font-sm + 2upx; |
|
|
|
color: $font-color-light; |
|
|
|
|
|
|
|
.num { |
|
|
|
margin: 0 8upx; |
|
|
|
color: $font-color-dark; |
|
|
|
} |
|
|
|
|
|
|
|
.price { |
|
|
|
font-size: $font-lg; |
|
|
|
color: $font-color-dark; |
|
|
|
|
|
|
|
&:before { |
|
|
|
content: '¥'; |
|
|
|
font-size: $font-sm; |
|
|
@ -504,6 +583,7 @@ page, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.action-box { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
@ -512,6 +592,7 @@ page, |
|
|
|
position: relative; |
|
|
|
padding-right: 30upx; |
|
|
|
} |
|
|
|
|
|
|
|
.action-btn { |
|
|
|
width: 160upx; |
|
|
|
height: 60upx; |
|
|
@ -524,12 +605,15 @@ page, |
|
|
|
color: $font-color-dark; |
|
|
|
background: #fff; |
|
|
|
border-radius: 100px; |
|
|
|
|
|
|
|
&:after { |
|
|
|
border-radius: 100px; |
|
|
|
} |
|
|
|
|
|
|
|
&.recom { |
|
|
|
background: #fff9f9; |
|
|
|
color: $base-color; |
|
|
|
|
|
|
|
&:after { |
|
|
|
border-color: #f7bcc8; |
|
|
|
} |
|
|
|