ymwl
liudan
1 year ago
parent
25b9307e88
commit
d2b53131b2
@ -0,0 +1,287 @@ |
||||
<template> |
||||
<view class="page"> |
||||
|
||||
<view class="totalContent"> |
||||
<view class="totalitem"> |
||||
<view class="price"> |
||||
<text>￥</text> |
||||
<text class="num">{{info.total_fans_order_amount}}</text> |
||||
</view> |
||||
<view class="descText"> |
||||
订单总金额 |
||||
</view> |
||||
</view> |
||||
<view class="totalitem" style="border-left:1px solid #fff;"> |
||||
<view class="price"> |
||||
|
||||
<text class="num">{{info.today_fans_order_num}}</text> |
||||
</view> |
||||
<view class="descText"> |
||||
订单数 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- --> |
||||
<view class="order-list"> |
||||
<view class="list" v-for="(item,index) in tableData" :key="index"> |
||||
<view class="title-status"> |
||||
<view class="title"> |
||||
<text>订单号：{{item.order_sn}}</text> |
||||
</view> |
||||
<view class="status"> |
||||
<text>{{item.status==0?'付款确认':item.status==1?'收款确认':item.status==3?'投诉':''}}</text> |
||||
</view> |
||||
</view> |
||||
<view class="goods-list"> |
||||
<view class="goods"> |
||||
<view class="thumb"> |
||||
<image :src="item.order_goods[0]?item.order_goods[0].goods_image:''" mode=""></image> |
||||
</view> |
||||
<view class="item"> |
||||
<view class="goods-name"> |
||||
<text class="two-omit">{{item.order_goods[0]?item.order_goods[0].goods_name:''}}</text> |
||||
</view> |
||||
<view class="priceBox"> |
||||
<view class="goods-price"> |
||||
<text class="min">￥{{item.order_goods[0]?item.order_goods[0].goods_price:''}}</text> |
||||
</view> |
||||
<view class="yongjin"> |
||||
佣金：￥{{item.commission_amount}} |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="status-btn"> |
||||
<view class="btn"> |
||||
<text>归属人：{{item.seller.nickname}}</text> |
||||
</view> |
||||
<view class="btn"> |
||||
<text>购买人：{{item.seller.nickname}}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="empty" v-show="tableData.length==0"> |
||||
<image src="../../static/image/mescroll-empty.png" mode="widthFix"></image> |
||||
<view class="emptyText"> |
||||
暂无数据 |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getUserFansOrderStatistic,getUserFansOrderList} from '@/common/api.js' |
||||
export default { |
||||
data() { |
||||
return { |
||||
info:{ |
||||
today_fans_order_num:0, |
||||
total_fans_order_amount:0 |
||||
}, |
||||
page:1, |
||||
limit:10, |
||||
tableData:[], |
||||
total:0, |
||||
}; |
||||
}, |
||||
methods:{ |
||||
getInfo(){ |
||||
getUserFansOrderStatistic().then(res=>{ |
||||
this.info = Object.assign({},this.info,res.data) |
||||
|
||||
}) |
||||
}, |
||||
getList(val){ |
||||
let params={ |
||||
page:this.page, |
||||
limit:this.limit, |
||||
} |
||||
getUserFansOrderList(params).then(res=>{ |
||||
|
||||
if(val){ |
||||
this.tableData.push(...res.data.data) |
||||
}else{ |
||||
this.tableData = res.data.data; |
||||
this.total = res.data.total |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
}, |
||||
onReachBottom() { |
||||
if(this.tableData.length<this.total){ |
||||
this.page++; |
||||
this.getList('over') |
||||
} |
||||
|
||||
}, |
||||
mounted(){ |
||||
this.getInfo() |
||||
this.getList() |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.page{ |
||||
padding-bottom:30rpx; |
||||
} |
||||
.totalContent{ |
||||
|
||||
height: 160rpx; |
||||
background: url('../../static/image/total-bg.png'); |
||||
background-size: cover; |
||||
background-repeat: no-repeat; |
||||
border-radius: 6px; |
||||
overflow: hidden; |
||||
position: relative; |
||||
// width:94%; |
||||
// margin:20rpx auto 0 auto; |
||||
display: flex; |
||||
padding:40rpx 0; |
||||
margin:20rpx 24rpx; |
||||
.totalitem{ |
||||
flex:1; |
||||
text-align: center; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
.price{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
text{ |
||||
font-size: 30rpx; |
||||
color:#fff; |
||||
} |
||||
.num{ |
||||
font-size: 48rpx; |
||||
} |
||||
} |
||||
.descText{ |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
color:#fff; |
||||
} |
||||
} |
||||
} |
||||
.empty{ |
||||
text-align: center; |
||||
image{ |
||||
width:50%; |
||||
height:auto |
||||
} |
||||
.emptyText{ |
||||
text-align: center; |
||||
margin-top:20rpx; |
||||
color:#aaa; |
||||
} |
||||
} |
||||
/* 订单列表 */ |
||||
.order-list{ |
||||
margin: 10px 12px; |
||||
.list{ |
||||
padding: 0 24rpx; |
||||
background-color: #FFFFFF; |
||||
border-radius: 20rpx; |
||||
margin-bottom: 20rpx; |
||||
.title-status{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding:20rpx 0; |
||||
.title{ |
||||
display: flex; |
||||
align-items: center; |
||||
// padding:10rpx 0; |
||||
text{ |
||||
font-size: 26rpx; |
||||
color: gray; |
||||
} |
||||
} |
||||
.status{ |
||||
display: flex; |
||||
align-items: center; |
||||
text{ |
||||
font-size: 26rpx; |
||||
color: $base; |
||||
} |
||||
} |
||||
} |
||||
.goods-list{ |
||||
.goods{ |
||||
display: flex; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 170rpx; |
||||
.thumb{ |
||||
display: flex; |
||||
align-items: center; |
||||
width: 30%; |
||||
height: 100%; |
||||
image{ |
||||
width: 160rpx; |
||||
height: 160rpx; |
||||
border-radius: 10rpx; |
||||
} |
||||
} |
||||
.item{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-direction: column; |
||||
padding: 10rpx 0; |
||||
height: 100%; |
||||
margin-left:20rpx; |
||||
width: 100%; |
||||
.goods-name{ |
||||
text{ |
||||
font-size: 26rpx; |
||||
color: #9f751f; |
||||
} |
||||
} |
||||
.priceBox{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
.goods-price{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
text{ |
||||
color: #222222; |
||||
} |
||||
.min{ |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
} |
||||
.yongjin{ |
||||
color:$base |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.status-btn{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
// height: 80rpx; |
||||
border-top:1px solid #eaeaea; |
||||
.btn{ |
||||
padding: 15rpx 0rpx; |
||||
text{ |
||||
font-size: 26rpx; |
||||
color: gray; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,316 @@ |
||||
<template> |
||||
<view class="page"> |
||||
<!-- 订单tab --> |
||||
<view class="order-tab"> |
||||
<view class="tab" :class="{'action':status==-1}" @click="onOrderTab(-1)"> |
||||
<text>我的仓库</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<view class="tab" :class="{'action':status==0}" @click="onOrderTab(0)"> |
||||
<text>付款确认</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<view class="tab" :class="{'action':status==1}" @click="onOrderTab(1)"> |
||||
<text>收款确认</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<view class="tab" :class="{'action':status==3}" @click="onOrderTab(3)"> |
||||
<text>投诉订单</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<view class="tab" :class="{'action':status==4}" @click="onOrderTab(4)"> |
||||
<text>发货状态</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
</view> |
||||
<!-- 订单列表 --> |
||||
<view class="order-list"> |
||||
<view v-if="tableData.length>0"> |
||||
<view class="list" v-for="(item,index) in tableData" @click="onOrderList" :key="index"> |
||||
<view class="title-status"> |
||||
<view class="title"> |
||||
<text>订单号：{{item.order_sn}}</text> |
||||
</view> |
||||
<view class="status"> |
||||
<text>{{item.status==0?'待支付':item.status==1?'待确认':item.status==2?'已完成':item.status==3?'已投诉':item.status==4?'待发货':item.status==5?'待收货':item.status==-1?'已取消':''}}</text> |
||||
</view> |
||||
</view> |
||||
<view class="goods-list"> |
||||
<view class="cangku"> |
||||
所属仓库：{{item.warehouse?item.warehouse.title:'-'}} |
||||
</view> |
||||
<view class="goods"> |
||||
<view class="thumb"> |
||||
<image :src="item.order_goods[0]?item.order_goods[0].goods_image:''" mode=""></image> |
||||
</view> |
||||
<view class="item"> |
||||
<view class="goods-name"> |
||||
<text class="two-omit">{{item.order_goods[0]?item.order_goods[0].goods_name:''}}</text> |
||||
</view> |
||||
<view class="goods-price"> |
||||
<text class="min">￥{{item.order_goods[0]?item.order_goods[0].goods_price:''}}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="status-btn" v-show="item.status==0"> |
||||
|
||||
<view class="btnGroup"> |
||||
<view class="btn">投诉</view> |
||||
<view class="btn">确认收款</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="empty" v-else> |
||||
<image src="../../static/image/empty.png" mode="widthFix"></image> |
||||
<view class="emptyText"> |
||||
暂无数据 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getSellerOrderList} from '@/common/api.js' |
||||
export default { |
||||
data() { |
||||
return { |
||||
page:1, |
||||
limit:10, |
||||
status:null, |
||||
tableData:[], |
||||
total:0, |
||||
}; |
||||
}, |
||||
onLoad(params) { |
||||
this.status = params.type; |
||||
this.getList() |
||||
}, |
||||
methods:{ |
||||
getList(val){ |
||||
let params={ |
||||
page:this.page, |
||||
limit:this.limit, |
||||
status:this.status==-1?'':this.status |
||||
} |
||||
getSellerOrderList({...params,custom: { auth: true }}).then(res=>{ |
||||
if(val){ |
||||
this.tableData.push(...res.data.data) |
||||
}else{ |
||||
this.tableData = res.data.data; |
||||
this.total = res.data.total |
||||
} |
||||
}) |
||||
}, |
||||
/** |
||||
* 订单tab点击 |
||||
*/ |
||||
onOrderTab(type){ |
||||
this.status = type; |
||||
this.getList() |
||||
}, |
||||
/** |
||||
* 订单列表点击 |
||||
*/ |
||||
onOrderList(){ |
||||
uni.navigateTo({ |
||||
url: '/pages/OrderDetails/OrderDetails', |
||||
}) |
||||
}, |
||||
}, |
||||
onReachBottom() { |
||||
if(this.tableData.length<this.total){ |
||||
this.page++; |
||||
this.getList('over') |
||||
} |
||||
|
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.page{ |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #f6f6f6; |
||||
} |
||||
|
||||
/* 订单tab */ |
||||
.order-tab{ |
||||
position: fixed; |
||||
left: 0; |
||||
top: 88rpx; |
||||
/* #ifdef APP-PLUS */ |
||||
top: calc(50rpx + var(--status-bar-height)); |
||||
/* #endif */ |
||||
z-index: 10; |
||||
display: flex; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 90rpx; |
||||
background: rgb(35, 96, 48); |
||||
.tab{ |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 20%; |
||||
height: 80%; |
||||
text{ |
||||
font-size: 26rpx; |
||||
color: #4D9A5E; |
||||
} |
||||
} |
||||
.action{ |
||||
text{ |
||||
color: #fff; |
||||
font-weight: bold; |
||||
} |
||||
.line{ |
||||
position: absolute; |
||||
left: 50%; |
||||
bottom: 0; |
||||
width: 60rpx; |
||||
height: 6rpx; |
||||
background: #fff; |
||||
border-radius:3px; |
||||
transform: translate(-50%,0); |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* 订单列表 */ |
||||
.order-list{ |
||||
margin:0 24rpx; |
||||
margin-top:110rpx; |
||||
/* #ifdef APP-PLUS */ |
||||
margin-top: calc(170rpx + var(--status-bar-height)); |
||||
/* #endif */ |
||||
.list{ |
||||
padding: 0 4%; |
||||
min-height: 390rpx; |
||||
background-color: #FFFFFF; |
||||
border-radius: 20rpx; |
||||
margin-bottom: 20rpx; |
||||
.title-status{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
height: 80rpx; |
||||
border-bottom: 1px solid #eaeaee; |
||||
.title{ |
||||
display: flex; |
||||
align-items: center; |
||||
text{ |
||||
font-size: 26rpx; |
||||
color: gray; |
||||
} |
||||
} |
||||
.status{ |
||||
display: flex; |
||||
align-items: center; |
||||
text{ |
||||
font-size: 26rpx; |
||||
color: $base; |
||||
} |
||||
|
||||
} |
||||
} |
||||
.goods-list{ |
||||
width: 100%; |
||||
.cangku{ |
||||
text-align: left; |
||||
color:gray; |
||||
padding:10rpx 0 0 0; |
||||
} |
||||
.goods{ |
||||
display: flex; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 180rpx; |
||||
.thumb{ |
||||
display: flex; |
||||
align-items: center; |
||||
width: 30%; |
||||
height: 100%; |
||||
image{ |
||||
width: 160rpx; |
||||
height: 160rpx; |
||||
border-radius: 10rpx; |
||||
} |
||||
} |
||||
.item{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
margin-left:20rpx; |
||||
width: 100%; |
||||
height: 100%; |
||||
.goods-name{ |
||||
text{ |
||||
font-size: 26rpx; |
||||
color: #555555; |
||||
} |
||||
} |
||||
.goods-price{ |
||||
display: flex; |
||||
align-items: center; |
||||
text{ |
||||
color: $base; |
||||
} |
||||
.min{ |
||||
font-size: 26rpx; |
||||
} |
||||
.max{ |
||||
font-size: 34rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
.status-btn{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
.btnGroup{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
.btn{ |
||||
background-color: $base; |
||||
padding: 10rpx 10rpx; |
||||
border-radius: 10rpx; |
||||
font-size: 24rpx; |
||||
color: #ffffff; |
||||
text-align: center; |
||||
margin-left:10rpx; |
||||
|
||||
} |
||||
|
||||
} |
||||
.empty{ |
||||
text-align: center; |
||||
margin-top:30%; |
||||
image{ |
||||
width:40%; |
||||
height:auto; |
||||
} |
||||
.emptyText{ |
||||
text-align: center; |
||||
font-size: 26rpx; |
||||
color:gray; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue