251 lines
4.6 KiB
Vue
251 lines
4.6 KiB
Vue
<!-- 历史订单列表-->
|
||
|
||
<template>
|
||
<view class="content">
|
||
<view class="top-icon" >
|
||
<view class="h-text" @click="getback()">返回</view>
|
||
<view class="s-input">
|
||
<uni-icons type="search" color=" #999999" size="16"></uni-icons>
|
||
<input type="text" placeholder="搜索我的订单">
|
||
</view>
|
||
<view class="h-text">搜索</view>
|
||
</view>
|
||
<view class="top-tap">
|
||
<view class="tap-box" :class="{'cc' : gindex == index }" v-for="(item,index) in arrtap" :key="index" @click="getindex(index)">
|
||
<view style="margin-bottom: 4px;">{{item.text}}</view>
|
||
<view class="gang" v-if="index == gindex"></view>
|
||
</view>
|
||
</view>
|
||
<view class="dil">
|
||
<view class="ques" v-if="arrbox== '' ">
|
||
<image src="../../static/quesheng.png" mode=""></image>
|
||
</view>
|
||
|
||
<view class="d-box" v-for="(item,index) in arrbox " :key="index">
|
||
<view class="d-y-top">搭电</view>
|
||
<view class="t-right">
|
||
<view class="bq" v-if="item.id == 1">
|
||
<text>待支付</text>
|
||
</view>
|
||
<view class="bq2" v-if="item.id == 2">
|
||
<text>待评价</text>
|
||
</view>
|
||
</view>
|
||
<view class="d-left">
|
||
<text>目的地</text>
|
||
</view>
|
||
<view class="t-left">
|
||
<text>订单编号：121212</text>
|
||
</view>
|
||
<view class="x-left">
|
||
<view class="">下单时间：2023-07-15</view>
|
||
<view class="hong">￥65</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view style="width: 100%; height: 60px;"></view>
|
||
</view>
|
||
|
||
<tabBar></tabBar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import tabBar from'../../components/tabBar/tabBar.vue'
|
||
import request from '../../utils/request';
|
||
export default{
|
||
data(){
|
||
return{
|
||
gindex:0,
|
||
arrtap:[
|
||
{text:'全部'},
|
||
{text:'救援中'},
|
||
{text:'待支付'},
|
||
{text:'待取车'},
|
||
{text:'待评价'},
|
||
],
|
||
arrbox:[
|
||
// {text:'待支付',id:1},
|
||
// {text:'待评价',id:2},
|
||
|
||
]
|
||
}
|
||
},
|
||
components:{
|
||
tabBar,
|
||
},
|
||
methods:{
|
||
getback(){
|
||
uni.navigateBack({
|
||
delta:1,
|
||
})
|
||
},
|
||
getindex(index){
|
||
this.gindex = index
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content{
|
||
width: 100%;
|
||
height: calc(100vh);
|
||
background-color: #F6F6F6;
|
||
box-sizing: border-box;
|
||
padding-top: 45px;
|
||
}
|
||
.top-icon{
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
|
||
padding: 5px 14px;
|
||
background: white;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
}
|
||
.dil{
|
||
background-color: #F6F6F6;
|
||
box-sizing: border-box;
|
||
padding: 15px 12px;
|
||
}
|
||
.h-text{
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
.s-input{
|
||
width: 78%;
|
||
height: 30px;
|
||
background: #F3F3F3;
|
||
border-radius: 50px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0px 10px;
|
||
input{
|
||
margin-left: 5px;
|
||
width: 80%;
|
||
font-size: 14px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.top-tap{
|
||
width: 100%;
|
||
background: white;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding-top: 5px;
|
||
}
|
||
.tap-box{
|
||
width: 20%;
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
text-align: center;
|
||
}
|
||
.gang{
|
||
width: 80%;
|
||
height: 5px;
|
||
margin: 0 auto;
|
||
border-radius: 12px;
|
||
background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
|
||
}
|
||
.d-box{
|
||
width: 100%;
|
||
// height: 100px;
|
||
background: white;
|
||
border-radius: 10px;
|
||
margin-bottom: 15px;
|
||
box-sizing: border-box;
|
||
padding: 8px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.d-y-top{
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 0px;
|
||
width: 40px;
|
||
height: 20px;
|
||
border-radius: 0px 0px 6px 0px;
|
||
background-color: #339DFF;
|
||
color: white;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
}
|
||
.t-right{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
.bq{
|
||
width: 55px;
|
||
height: 20px;
|
||
background: #FFD7D7;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: #FF4C4C;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.bq2{
|
||
width: 55px;
|
||
height: 20px;
|
||
background: #CDE2FF;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: #3289FF;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.d-left{
|
||
margin-left: 10px;
|
||
display: flex;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #666666;
|
||
margin-bottom: 10px;
|
||
}
|
||
.t-left{
|
||
margin-left: 10px;
|
||
display: flex;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-bottom: 5px;
|
||
}
|
||
.x-left{
|
||
margin-left: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
.cc{
|
||
font-weight: bold;
|
||
}
|
||
.hong{
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #F85021;
|
||
}
|
||
.ques{
|
||
margin: 0px auto;
|
||
margin-top: 40px;
|
||
width: 80%;
|
||
image{
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style> |