433 lines
11 KiB
Vue
433 lines
11 KiB
Vue
<template>
|
|
<view class="order-page">
|
|
<view class="nav" :style="{'padding-top': statusBarHeight}">
|
|
<image src="@/static/mine/fh.png" mode="" class="nav-back" @click="goBack"></image>
|
|
<view class="nav-title">我的订单</view>
|
|
<view class="nav-back"></view>
|
|
</view>
|
|
|
|
|
|
<view class="tab">
|
|
<view class="tab-item" :class="{'active':tabIndex === index}" v-for="(item,index) in tabList" :key="index" @click="tabCk(index)">
|
|
<!-- <image src="@/static/mine/tab_bottom.png" mode="" class="tab-img" v-if="tabIndex === index"></image> -->
|
|
<view class="tab-value">{{item.label}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<scroll-view class="scroll-list-view" scroll-y="true" scroll-with-animation @scrolltolower="scrolltolower">
|
|
<view v-if="list.length === 0" style="padding-top: 200rpx;">
|
|
<empty></empty>
|
|
</view>
|
|
<view class="list" v-for="(item,index) in list" :key="index" @click.stop="goDetail(item)">
|
|
<view class="list-header">
|
|
<view class="header-left">
|
|
<view class="left-title">订单编号：</view>
|
|
{{item.no}}
|
|
</view>
|
|
<view class="header-right">{{statusObj[item.status]}}({{item.type === 'MALL' ? '商城' : '盲盒'}})</view>
|
|
</view>
|
|
<view class="list-detail">
|
|
<image :src="item.productCoverResource.url" mode="aspectFill" class="detail-img"></image>
|
|
<view class="detail">
|
|
<view class="name">{{item.productName}}</view>
|
|
<view class="price-name">
|
|
<view class="old-price"><text>¥</text>{{item.amount}}</view>
|
|
<view class="num">x {{item.quantity}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="price">
|
|
|
|
<view class="new-price" v-if="item.method === 'ALIPAY' || item.method === 'WECHAT'">
|
|
<view class="new-sym">实付金额</view>
|
|
<view class="new-value">¥{{item.totalAmount}}</view>
|
|
</view>
|
|
<view class="new-price" v-if="item.method === 'POINTS'">
|
|
<view class="new-sym">实付积分</view>
|
|
<view class="new-value">{{item.points}}</view>
|
|
</view>
|
|
<view class="new-price" v-if="item.method === 'NONE'">
|
|
<view class="new-sym">无需支付</view>
|
|
</view>
|
|
</view>
|
|
<view class="list-footer" v-if="item.status === 'WAITING_FOR_RECEIPT' || item.status === 'RECEIVED' || item.status === 'COMPLETED' || item.status === 'SHIPPED'">
|
|
<!-- <view class="btn del" v-if="item.status === 'COMPLETED'">删除订单</view> -->
|
|
<view class="btn btn-active" v-if="item.status === 'WAITING_FOR_RECEIPT' || item.status === 'RECEIVED'" @click.stop="orderReceipt(item)">确认收货</view>
|
|
<view class="btn btn-active" v-if="item.status === 'COMPLETED'" @click.stop="againProduct(item)">再次购买</view>
|
|
<view class="btn del" v-if="item.status === 'WAITING_FOR_RECEIPT' || item.status === 'SHIPPED' || item.status === 'RECEIVED'" @click.stop="lookLogistics(item)">物流信息</view>
|
|
</view>
|
|
</view>
|
|
<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
|
|
</scroll-view>
|
|
<view class="dlg" v-if="openShow" @click="close">
|
|
<view class="dlg-main" @click.stop="">
|
|
<view class="popup-scroll">
|
|
<logistics :wlInfo="detailData.logistics" :img="detailData.productCoverResource.url" :name="detailData.productName" :address="address" :logisticsStatus="detailData.logisticsStatus"></logistics>
|
|
</view>
|
|
<image src="@/static/order/close.png" mode="" class="popup-close" @click.stop="close"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixins } from "@/mixins/mixins.js";
|
|
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
|
|
import { orderList,orderDetail,orderReceiptApi } from '@/API/order.js'
|
|
import logistics from '@/components/xinyu-logistics/xinyu-logistics.vue'
|
|
export default{
|
|
mixins: [myMixins],
|
|
data(){
|
|
return{
|
|
statusBarHeight,
|
|
tabList:[
|
|
{label:"全部",value:''},
|
|
{label:"待发货",value:'WAITING_FOR_SHIPMENT'},
|
|
{label:"待收货",value:'WAITING_FOR_RECEIPT'},
|
|
{label:"已完成",value:'COMPLETED'},
|
|
],
|
|
tabIndex:0,
|
|
list:[],
|
|
type:'',
|
|
page:1,
|
|
statusObj:{
|
|
"WAITING_FOR_PAYMENT":"待付款",
|
|
"WAITING_FOR_SHIPMENT":"待发货",
|
|
"SHIPPED":"已发货",
|
|
"WAITING_FOR_RECEIPT":"待收货",
|
|
"RECEIVED":"已收货",
|
|
"COMPLETED":"已完成",
|
|
"CANCELED":"已取消",
|
|
"REFUNDED":"已退款",
|
|
"RECOVERED":"已回收"
|
|
},
|
|
height:'0rpx',
|
|
total:0,
|
|
openShow:false,
|
|
detailData: {
|
|
logistics:{}
|
|
},
|
|
address:'',
|
|
}
|
|
},
|
|
components:{logistics},
|
|
onLoad(opation){
|
|
this.type = opation.type
|
|
this.tabList.forEach((item,index) => {
|
|
if(item.value === this.type){
|
|
this.tabIndex = index
|
|
}
|
|
})
|
|
this.getOrderList()
|
|
},
|
|
methods:{
|
|
goBack(){
|
|
uni.switchTab({
|
|
url:`/pages/mine/index`
|
|
})
|
|
},
|
|
orderReceipt(item){
|
|
uni.showLoading()
|
|
orderReceiptApi({id:item.id}).then(res => {
|
|
uni.hideLoading(),
|
|
this.$api.msg(res.message)
|
|
if(res.code === 200){
|
|
this.getOrderList()
|
|
}
|
|
})
|
|
},
|
|
getOrderList(){
|
|
uni.showLoading()
|
|
orderList({page:this.page,size:10,status:this.tabList[this.tabIndex].value}).then(res => {
|
|
uni.hideLoading()
|
|
this.total = res.data.total
|
|
if(this.page > 1){
|
|
this.list = [...this.list,...res.data.content]
|
|
}else{
|
|
this.list = res.data.content
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
tabCk(index){
|
|
this.page = 1
|
|
this.tabIndex = index
|
|
this.getOrderList()
|
|
},
|
|
scrolltolower(){
|
|
if(this.total == this.list.length){
|
|
return
|
|
}
|
|
this.page += 1
|
|
this.getOrderList()
|
|
},
|
|
goDetail(item){
|
|
uni.navigateTo({
|
|
url:`/pages/mine/orderStatusDetail?no=${item.no}`
|
|
})
|
|
},
|
|
againProduct(item){
|
|
uni.navigateTo({
|
|
url:`/pages/product/detail?id=${item.productId}`
|
|
})
|
|
},
|
|
close(){
|
|
this.openShow = false
|
|
},
|
|
lookLogistics(item){
|
|
this.getDetail(item.no)
|
|
},
|
|
|
|
// 获取详情
|
|
getDetail(no) {
|
|
uni.showLoading()
|
|
orderDetail(no, {
|
|
no
|
|
}).then(res => {
|
|
uni.hideLoading()
|
|
if (res.code === 200) {
|
|
this.detailData = res.data
|
|
this.address = this.detailData.receiver.address
|
|
this.openShow = true
|
|
|
|
} else {
|
|
this.$api.msg(res.message)
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
page{
|
|
background-image: url('@/static/index/bg.png');
|
|
background-size: 100%;
|
|
}
|
|
.order-page{
|
|
.nav{
|
|
z-index: 100;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 23rpx;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
.nav-back{
|
|
width: 19rpx;
|
|
height: 34rpx;
|
|
z-index: 11;
|
|
}
|
|
.nav-title{
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
.tab{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 130rpx 22rpx 30rpx 22rpx;
|
|
.tab-item{
|
|
width: 176rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
color: #999;
|
|
position: relative;
|
|
// border: 1px solid red;
|
|
.tab-value{
|
|
|
|
}
|
|
.tab-img{
|
|
position: absolute;
|
|
left: 50rpx;
|
|
bottom: 6rpx;
|
|
width: 77rpx;
|
|
height: 11rpx;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
.active{
|
|
background-image: url('@/static/mine/tab_bottom.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 60%;
|
|
background-position: bottom;
|
|
color: #000000;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.scroll-list-view{
|
|
height: calc(100vh - 200rpx);
|
|
box-sizing: border-box;
|
|
padding-bottom: 30rpx;
|
|
// padding-top: 20rpx;
|
|
|
|
.list{
|
|
width: 706rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
width: 710rpx;
|
|
margin: 0rpx 20rpx;
|
|
padding: 24rpx 44rpx 25rpx 21rpx;
|
|
margin-bottom: 20rpx;
|
|
.list-header{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.header-left{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #888888;
|
|
.left-title{}
|
|
}
|
|
.header-right{
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #F0463A;
|
|
}
|
|
}
|
|
.list-detail{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 27rpx;
|
|
.detail-img{
|
|
width: 146rpx;
|
|
height: 146rpx;
|
|
}
|
|
.detail{
|
|
width: 498rpx;
|
|
margin-left: 22rpx;
|
|
.name{
|
|
width: 478rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.price-name{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 75rpx;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
.num{
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #888888;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.price{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 25rpx;
|
|
// margin-top: 36rpx;
|
|
|
|
.old-price{
|
|
// font-size: 24rpx;
|
|
// color: #999999;
|
|
}
|
|
.new-price{
|
|
// font-weight: bold;
|
|
// font-size: 32rpx;
|
|
// color: #000000;
|
|
|
|
.new-sym{
|
|
font-weight: 500;
|
|
font-size: 22rpx;
|
|
color: #888888;
|
|
// margin-right: 10rpx;
|
|
// font-size: 24rpx;
|
|
// display: inline-block;
|
|
// margin-right: 6rpx;
|
|
}
|
|
.new-value{
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.list-footer{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin-top: 54rpx;
|
|
.btn{
|
|
width: 151rpx;
|
|
height: 62rpx;
|
|
background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
|
|
border-radius: 31rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
margin-left: 21rpx;
|
|
}
|
|
.del{
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #F0463A;
|
|
background: #fff;
|
|
border: 1px solid #F0463A;
|
|
}
|
|
.btn-active{}
|
|
}
|
|
}
|
|
.no-data{
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
padding: 10rpx 0 30rpx 0;
|
|
}
|
|
}
|
|
.dlg{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
z-index: 999;
|
|
background-color: rgba(0,0,0,0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.dlg-main{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
.popup-scroll {
|
|
width: 706rpx;
|
|
height: 900rpx;
|
|
background-color: #fff;
|
|
border-radius:20rpx;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.popup-close {
|
|
margin-top: 36rpx;
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |