<template>
<view>
<view class="head-info">
<!-- 搜索 -->
<view class="searchContent">
<u-input v-model="searchText" placeholder="输入订单编号/收件人名字/电话商品名称"/>
<u-icon name="search" class="search"></u-icon>
<view class="filter" @click="show=true">
<image :src="$picUrl+'/static/news3/filter.png'" mode="widthFix"></image>
<text>筛选</text>
</view>
</view>
</view>
<!-- 分类列表 -->
<view class="container">
<view class="classify-list">
<view class="list" v-for="(item,index) in classList"
:class="{'action':classifyShow==index}"
@click="onClassify(item,index)"
:key="index">
<text>{{item.name}}</text>
<text class="line" v-show="classifyShow==index"></text>
</view>
</view>
</view>
<view class="shopContent">
<view class="shopItem" v-for="(item,index) in goodsList" :key="index">
<view class="orderInfo">
<text>订单号：{{item.orderNum}}</text>
<text class="statusText">{{getLable(item.status)}}</text>
</view>
<view class="shopItemInfo" v-for="(p,i) in item.children" :key="i">
<image :src="p.image"></image>
<view class="priceCon">
<text class="num">x{{p.num}}</text>
<view class="priceText">
<text style="font-size: 26upx;">¥</text>
<text>{{p.price}}</text>
</view>
</view>
</view>
<view class="totalNum">
<text>含运费¥{{item.yunfei}}</text>
<text>共计：</text>
<text>¥{{item.total}}</text>
</view>
<view class="remark">
<view class="remarkTitle">
收件人姓名 {{item.phone}}
</view>
<view class="remarkContent">
{{item.remark}}
</view>
</view>
<view class="btnGroup">
<view class="btn info" v-show="item.status==2||item.status==1">修改地址</view>
<view class="btn primary" v-show="item.status==2||item.status==1">修改价格</view>
<view class="btn primary" v-show="item.status==2">发货</view>
<view class="btn info" v-show="item.status==23">拒绝</view>
<view class="btn primary" v-show="item.status==3">同意</view>
<view class="btn info" v-show="item.status==4||item.status==6">删除订单</view>
<view class="btn info" v-show="item.status==7">转至售后</view>
<view class="btn primary" v-show="item.status==7">修改物流</view>
</view>
</view>
</view>
<u-popup v-model="show" mode="bottom" border-radius="10" :closeable="true">
<view class="filterContent">
<view class="filterTitle">
订单筛选
</view>
<view class="filterItem">
<view class="filterItemContent">
<view class="itemTitle">
下单时间
</view>
<view class="timeContainer">
<u-input v-model="startTime" type="select" @click="getTime('start')" disabled placeholder="起始时间"/>
<text>-</text>
<u-input v-model="endTime" type="select" @click="getTime('end')" disabled placeholder="终止时间"/>
</view>
</view>
<view class="filterItemContent">
<view class="itemTitle">
来源
</view>
<view class="selectContainer">
<view @click="setResourceIndex(index)" :class="sourceIndex==index?'selectItem active':'selectItem'" v-for="(item,index) in selectList" :key="item.id">
{{item.name}}
</view>
</view>
</view>
<view class="filterItemContent">
<view class="itemTitle">
支付方式
</view>
<view class="selectContainer">
<view @click="setpayIndex(index)" :class="payIndex==index?'selectItem active':'selectItem'" v-for="(item,index) in payList" :key="item.id">
{{item.name}}
</view>
</view>
</view>
</view>
<view class="btnGroup">
<view class="resetBtn">
重置
</view>
<view class="confrim">
确定
</view>
</view>
</view>
<u-picker mode="time" z-index="99999" v-model="timeShow"></u-picker>
</u-popup>
</view>
</template>
<script>
export default {
data(){
return{
searchText:'',
classifyShow: 0,
classList: [
{
id: 0,
name: '全部',
},{
id: 1,
name: '待发货',
},{
id: 2,
name: '待验收',
},{
id: 3,
name: '售后订单',
},{
id: 4,
name: '已完成',
},{
id: 5,
name: '已退款',
},{
id: 6,
name: '已删除',
},
],
goodsList:[
{
orderNum:7868867676878676876,
status:1, //待付款
total:5000,
yunfei:5,
name:'收件人姓名',
phone:'188989988900',
remark:'这里是备注',
children:[
{image:'https://www.royaum.com.cn/static/news3/filter.png',num:1,price:2500},
{image:'https://www.royaum.com.cn/static/news3/filter.png',num:1,price:2500},
]
},{
orderNum:7868867676878676876,
status:2, //待发货
total:5000,
yunfei:5,
name:'收件人姓名',
phone:'188989988900',
remark:'这里是备注',
children:[
{image:'https://www.royaum.com.cn/static/news3/filter.png',num:1,price:2500},
{image:'https://www.royaum.com.cn/static/news3/filter.png',num:1,price:2500},
]
},{
orderNum:7868867676878676876,
status:3, //待发货
total:5000,
yunfei:5,
name:'收件人姓名',
phone:'188989988900',
remark:'这里是备注',
children:[
{image:'https://www.royaum.com.cn/static/news3/filter.png',num:1,price:2500},
{image:'https://www.royaum.com.cn/static/news3/filter.png',num:1,price:2500},
]
},
],
show:false,
timeShow:false,
selectList:[
{id:1,name:'预售'},
{id:2,name:'秒杀'},
{id:3,name:'拼团'},
{id:4,name:'砍价'},
],
payList:[
{id:1,name:'微信支付'},
{id:2,name:'好友代付'},
{id:3,name:'线下支付'},
],
sourceIndex:0,
payIndex:0,
startTime:null,
endTime:null,
}
},
onReady() {
// uni.setNavigationBarTitle({
// title: '首页',
// })
// uni.setNavigationBarColor({
// frontColor: '#ffffff',
// backgroundColor: '#fe3b0f',
// })
},
onLoad() {
},
onPageScroll(e){
},
onReachBottom(){
},
methods:{
getLable(val){
let arr = this.classList.filter(item=>{
return val==item.id
})
return arr[0].name
},
onSearch(){
uni.navigateTo({url:''})
},
onClassify(item,index){
this.classifyShow = index;
},
setResourceIndex(index){
this.sourceIndex = index;
},
setpayIndex(index){
this.payIndex = index;
},
getTime(val){
console.log("ooo")
this.timeShow = true;
}
}
};
</script>
<style scoped lang="scss">
page{
background-color: #F7F8FA;
min-height:100%;
}
.head-info{
padding:22upx 20upx;
.searchContent{
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
::v-deep .uni-input-placeholder{
margin-left:90upx;
z-index:10;
}
.search{
position: absolute;
top:20upx;
left:26upx;
z-index:9;
}
::v-deep .u-input{
flex:1;
margin-right:28upx;
}
::v-deep .uni-input-input{
background: #FFFFFF;
border-radius: 30px 30px 30px 30px;
opacity: 1;
padding-left:80upx;
width:calc(100% - 80upx);
}
.filter{
display: flex;
width: 100upx;
flex-direction: column;
align-items: center;
justify-content: center;
image{
width:34upx;
height:auto;
}
text{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #616161;
}
}
}
}
.container{
background-color: #fff;
}
.classify-list{
white-space:nowrap;
width: 100%;
height: 100rpx;
overflow-x: auto;
overflow-y: hidden;
.list{
position: relative;
display:inline-block;
width: 18%;
height: 100%;
line-height: 100rpx;
text-align: center;
text{
font-size: 28rpx;
color: #3B3B3B;
}
.line{
position: absolute;
left: 50%;
bottom: 10rpx;
// width: 60%;
// height: 8rpx;
background: linear-gradient(to right,#f8f893,#fe9d00);
// border-radius: 10rpx;
transform: translate(-50%,0);
width: 60upx;
height: 8upx;
background: #FF6257;
border-radius: 29px 29px 29px 29px;
opacity: 1;
}
}
.action{
text{
font-size: 32rpx;
opacity: 1;
}
}
}
.shopContent{
.shopItem{
margin-bottom:14upx;
padding:36upx;
background-color: #fff;
.orderInfo{
display: flex;
align-items: center;
justify-content:space-between;
text{
font-size: 28upx;
color: #707070;
}
}
.shopItemInfo{
display: flex;
margin-top:40upx;
image{
width:180upx;
height:180upx;
flex-shrink: 0;
}
.priceCon{
flex:1;
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-left:40upx;
.num{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #1E1E1E;
}
.priceText{
display: flex;
align-items: center;
text{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #F21A1C;
font-weight: bold;
}
}
}
}
.totalNum{
text-align: right;
margin-top:70upx;
text:first-child{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #B7B7B7;
}
text:nth-child(2){
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
margin:0 10upx;
}
text:nth-child(3){
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #F21A1C;
}
}
.remark{
background: #F8F8F8;
border-radius: 0px 0px 0px 0px;
opacity: 1;
padding:20upx;
margin-top:20upx;
.remarkTitle{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
}
.remarkContent{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #939393;
margin-top:8upx;
}
}
.btnGroup{
display: flex;
margin-top:28upx;
flex-wrap: wrap;
justify-content: flex-end;
.btn{
width: 180upx;
height: 56upx;
background: #FFFFFF;
border-radius: 50px 50px 50px 50px;
opacity: 1;
font-size: 14px;
line-height: 56upx;
text-align: center;
margin-left:12upx;
}
.info{
border: 1px solid #9F9F9F;
color: #8B8B8B;
}
.primary{
border: 1px solid #F63116;
color: #F83F11;
}
}
}
}
.filterContent{
padding:32upx;
.filterTitle{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #303030;
text-align: center;
}
.filterItem{
.filterItemContent{
margin-top:40upx;
.itemTitle{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #303030;
margin-bottom:20upx;
}
.timeContainer{
display: flex;
align-items: center;
::v-deep .uni-input-wrapper{
background: #F3F3F3;
border-radius: 22px 22px 22px 22px;
opacity: 1;
text-align: center;
}
::v-deep .u-input__right-icon{
display: none;
}
text{
margin:16upx;
}
}
.selectContainer{
display: flex;
.selectItem{
flex:1;
margin:0 10upx;
height: 70upx;
line-height: 66upx;
text-align: center;
background: #F3F3F3;
border-radius: 22px 22px 22px 22px;
opacity: 1;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #A1A1A1;
}
.active{
border: 1px solid #F83F11;
color:#F21A1C;
background-color: #fff;
}
}
}
}
.btnGroup{
display: flex;
justify-content: center;
margin-top:100upx;
padding-bottom:60upx;
.resetBtn{
width: 216upx;
height: 70upx;
line-height: 66upx;
background: #DBDBDB;
border-radius: 22px 22px 22px 22px;
opacity: 1;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #585858;
text-align: center;
}
.confrim{
width: 216upx;
height: 70upx;
text-align: center;
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
border-radius: 50px 50px 50px 50px;
opacity: 1;
line-height: 66upx;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-left:24upx;
}
}
}
</style>