You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
330 lines
7.8 KiB
330 lines
7.8 KiB
1 week ago
|
<template>
|
||
|
|
<!-- 商家订单列表 -->
|
||
|
|
<view class="page1">
|
||
|
|
<view class="title">
|
||
|
|
<view class="title-sreach">
|
||
|
|
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
|
||
|
|
<uni-icons type="left" size="28"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
|
||
|
|
商家订单
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="title-tab">
|
||
|
|
<scroll-view class="status-scroll-view" scroll-x enable-flex :show-scrollbar="false"
|
||
|
|
:scroll-with-animation="true">
|
||
|
|
<view class="status-list">
|
||
|
|
<view v-for="(item, index) in statusList" :key="index" class="status-item"
|
||
|
|
:class="{ 'active': currentIndex == item.value }" @click="handleStatusClick(item.value,item.value)">
|
||
|
|
<text class="status-text">{{ item.name }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
<view class="box1" @tap="goDetail(item.id)" v-for="(item,index) in orderList" :key="index">
|
||
|
|
<view style="display: flex;height: 50rpx;border-bottom: 1px solid #eee;">
|
||
|
|
<view>
|
||
|
|
{{'#' + item.numberCode}}
|
||
|
|
</view>
|
||
|
|
<view style="flex: 1;display: flex;padding-left: 20rpx;">
|
||
|
|
{{item.createTime | formatISOTime}}
|
||
|
|
<!-- <text>已退款</text> -->
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
{{item.status == 0?'待支付':item.status == 1?' 待成团':item.status == 2?'待消费':item.status == 3?'待接单':item.status == 4?'待取货':item.status == 5?'待送达':item.status == 6?'已完成':item.status == 7?'待退款':item.status == 8?'已退款':item.status == 9?'已取消':item.status == 11?'售后中':item.status == 12?'已售后':""}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view style="height: 120rpx;padding-top: 20rpx;">
|
||
|
|
<view style="height: 50rpx;line-height: 50rpx;font-size: 28rpx;font-weight: 700;display: flex;">
|
||
|
|
商品 <text>共<text>{{item.goodsNum}}</text>件</text> <text style="color: red;flex: 1;text-align: right;">已出餐</text>
|
||
|
|
</view>
|
||
|
|
<view style="display: flex;" v-for="(item1,index1) in item.goodsList" :key="index">
|
||
|
|
<view style="flex: 1;">
|
||
|
|
{{item1.productName}}
|
||
|
|
</view>
|
||
|
|
<view style="width: 100rpx;">
|
||
|
|
{{'X' + item1.quantity}}
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
{{'￥'+ item1.price}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
loadStatus: 'more',
|
||
|
|
searchForm:{
|
||
|
|
pageNum:1,
|
||
|
|
pageSize:10,
|
||
|
|
shopName:'',
|
||
|
|
searchStatus:10,
|
||
|
|
shopId:uni.getStorageSync('shopId'),
|
||
|
|
regionId:JSON.parse(uni.getStorageSync('area')).id
|
||
|
|
},
|
||
|
|
totalPages: 1,
|
||
|
|
orderList:[],
|
||
|
|
currentIndex: 10,
|
||
|
|
menuButtonInfo: {},
|
||
|
|
statusList: [{
|
||
|
|
name: '全部',
|
||
|
|
value: 10,
|
||
|
|
checked: true
|
||
|
|
},{
|
||
|
|
name: '待支付',
|
||
|
|
value: 0,
|
||
|
|
checked: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '待成团',
|
||
|
|
value: 1,
|
||
|
|
checked: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '待消费',
|
||
|
|
value: 2,
|
||
|
|
checked: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '待接单',
|
||
|
|
value: 3,
|
||
|
|
checked: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '待取货',
|
||
|
|
value: 4,
|
||
|
|
checked: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '待送达',
|
||
|
|
value: 5,
|
||
|
|
checked: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '已完成',
|
||
|
|
value: 6,
|
||
|
|
checked: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '待退款',
|
||
|
|
value: 7,
|
||
|
|
checked: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '已退款',
|
||
|
|
value: 8,
|
||
|
|
checked: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '已取消',
|
||
|
|
value: 9,
|
||
|
|
checked: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '售后中',
|
||
|
|
value: 11,
|
||
|
|
checked: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '已售后',
|
||
|
|
value: 12,
|
||
|
|
checked: false
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onReachBottom() {
|
||
|
|
if (this.searchForm.pageNum >= this.totalPages) return;
|
||
|
|
// this.status = 'loading';
|
||
|
|
this.searchForm.pageNum++;
|
||
|
|
this.getOrderList();
|
||
|
|
},
|
||
|
|
filters:{
|
||
|
|
formatISOTime(isoString) {
|
||
|
|
const date = new Date(isoString);
|
||
|
|
const year = date.getFullYear();
|
||
|
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||
|
|
const day = date.getDate().toString().padStart(2, '0');
|
||
|
|
const hours = date.getHours().toString().padStart(2, '0');
|
||
|
|
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||
|
|
const seconds = date.getSeconds().toString().padStart(2, '0');
|
||
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
if(option.index){
|
||
|
|
this.searchForm.searchStatus = option.index
|
||
|
|
this.currentIndex = option.index
|
||
|
|
}
|
||
|
|
this.getList()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getList(){
|
||
|
|
this.loadStatus = 'loading'
|
||
|
|
let that = this
|
||
|
|
that.tui.request("/mall/order/page", "POST", this.searchForm, false, false).then((res) => {
|
||
|
|
that.loadStatus = 'nomore';
|
||
|
|
if (res.code == 200) {
|
||
|
|
if (that.searchForm.pageNum == 1) {
|
||
|
|
that.orderList = res.result.records;
|
||
|
|
} else {
|
||
|
|
that.orderList = [...that.orderList, ...res.result.records]
|
||
|
|
}
|
||
|
|
for(let i=0;i<that.orderList.length;i++){
|
||
|
|
that.orderList[i].goodsNum = 0
|
||
|
|
for(let m=0;m<that.orderList[i].goodsList.length;m++){
|
||
|
|
that.orderList[i].goodsNum += that.orderList[i].goodsList[m].quantity
|
||
|
|
}
|
||
|
|
}
|
||
|
|
that.totalPages = res.result.pages; // pages = 总页数
|
||
|
|
that.$forceUpdate();
|
||
|
|
} else {
|
||
|
|
that.tui.toast(res.message);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
uni.hideLoading();
|
||
|
|
}).catch((res) => {});
|
||
|
|
},
|
||
|
|
goDetail(id){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/package2/shop/orderDetail?id=' + id
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleStatusClick(index,value) {
|
||
|
|
if (this.currentIndex === index) return;
|
||
|
|
this.currentIndex = index;
|
||
|
|
this.searchForm.searchStatus = value
|
||
|
|
this.getList()
|
||
|
|
},
|
||
|
|
back() {
|
||
|
|
uni.navigateBack()
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
page {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
font-size: 24rpx;
|
||
|
|
background: #F5F8F5;
|
||
|
|
color: #00231C;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page1 {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
font-size: 24rpx;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
|
||
|
|
width: 100%;
|
||
|
|
height: 20%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-sreach {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
height: 200rpx;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back-btn {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-name {
|
||
|
|
padding-top: 110rpx;
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: 700;
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-tab {
|
||
|
|
display: flex;
|
||
|
|
margin: -120rpx auto 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-scroll-view {
|
||
|
|
width: 100%;
|
||
|
|
white-space: nowrap;
|
||
|
|
/* 辅助滚动，与 flex 配合确保不换行 */
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-list {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 0;
|
||
|
|
/* 可根据设计添加左右留白，但会影响“一排5个”精准计算，故留白为0 */
|
||
|
|
min-height: 88rpx;
|
||
|
|
/* 保证内部项撑开高度 */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 每个状态项：宽度为屏幕宽度的1/5，保证一行正好显示5个，超出滚动 */
|
||
|
|
.status-item {
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 20vw;
|
||
|
|
/* 关键：屏幕宽度的1/5，正好一排5个 */
|
||
|
|
text-align: center;
|
||
|
|
padding: 20rpx 0;
|
||
|
|
position: relative;
|
||
|
|
box-sizing: border-box;
|
||
|
|
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
|
|
/* 点击反馈 */
|
||
|
|
-webkit-tap-highlight-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-text {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #666666;
|
||
|
|
font-weight: normal;
|
||
|
|
line-height: 1.4;
|
||
|
|
transition: color 0.2s, font-weight 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 激活状态样式 */
|
||
|
|
.status-item.active .status-text {
|
||
|
|
color: #ff6b35;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 激活指示条（下划线） */
|
||
|
|
.status-item.active::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
width: 40rpx;
|
||
|
|
height: 4rpx;
|
||
|
|
background-color: #ff6b35;
|
||
|
|
border-radius: 2rpx;
|
||
|
|
transition: width 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box1 {
|
||
|
|
width: 95%;
|
||
|
|
margin: 20rpx auto;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
padding: 20rpx;
|
||
|
|
}
|
||
|
|
</style>
|