327 lines
7.3 KiB
Vue
327 lines
7.3 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)">
|
||
{{item.label}}
|
||
<image src="@/static/mine/tab_bottom.png" mode="" class="tab-img" v-if="tabIndex === index"></image>
|
||
</view>
|
||
</view>
|
||
<view class="list"></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">
|
||
{{priceTypeObj[item.type]}}
|
||
</view>
|
||
<view class="header-right">{{statusObj[item.status]}}</view>
|
||
</view>
|
||
<view class="list-detail">
|
||
<image :src="item.coverResource.url" mode="aspectFill" class="detail-img"></image>
|
||
<view class="detail">
|
||
<view class="name">{{item.name}}</view>
|
||
<view class="price-name">
|
||
<view class="old-price"><text>¥</text>{{item.totalAmount}}</view>
|
||
<view class="num"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myMixins } from "@/mixins/mixins.js";
|
||
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
|
||
import { boxOrderListApi } from '@/API/index.js'
|
||
export default{
|
||
mixins: [myMixins],
|
||
data(){
|
||
return{
|
||
statusBarHeight,
|
||
priceTypeObj: {
|
||
SINGLE: "一发入魂",
|
||
TRIPLE: "三连抽",
|
||
PENTA: "五连抽"
|
||
},
|
||
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
|
||
}
|
||
},
|
||
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`
|
||
})
|
||
},
|
||
getOrderList(){
|
||
uni.showLoading()
|
||
boxOrderListApi({page:this.page,size:10}).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}`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
.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-img{
|
||
position: absolute;
|
||
left: 50rpx;
|
||
bottom: 6rpx;
|
||
width: 77rpx;
|
||
height: 11rpx;
|
||
}
|
||
}
|
||
.active{
|
||
color: #000000;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.scroll-list-view{
|
||
height: 100vh;
|
||
padding-top: 130rpx;
|
||
box-sizing: border-box;
|
||
padding-bottom: 30rpx;
|
||
// padding-top: 20rpx;
|
||
|
||
.list{
|
||
width: 706rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
</style> |