185 lines
3.3 KiB
Vue
185 lines
3.3 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="container">
|
|
<headers :titles="titles"><u-icon name="arrow-left" color="#fff" size="22"></u-icon></headers>
|
|
<view class="tablist">
|
|
<view class="tabbox" v-for="(item,index) in tablist" :key="index" @click="getindex(index)">
|
|
<view class="">{{item}}</view>
|
|
<view class="gang" v-if="tabindex == index"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="box_" v-for="item in 7" :key="index">
|
|
<view class="b-bx">
|
|
<view class="title_">京博加油站</view>
|
|
<view class="zt-size">待支付</view>
|
|
</view>
|
|
<view class="centne">
|
|
<view class="touxiang"></view>
|
|
<view class="right-centne">
|
|
<view class="h_">订单号:0000000000</view>
|
|
<view class="h_">油号:95#</view>
|
|
<view class="h_">升数:50L</view>
|
|
<view class="h_">下单时间:2024-05-11 14:50</view>
|
|
<view class="b-bx">
|
|
<view class="">应付:￥400.00</view>
|
|
<view class="">优惠:￥0.00</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="end-box">实付:￥400.00</view>
|
|
</view>
|
|
<view style="width: 100%; height: 20px; "></view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import headers from '../../components/header/headers.vue'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
titles: "订单列表",
|
|
tabindex: 0,
|
|
tablist: [
|
|
"全部",
|
|
"待支付",
|
|
"已完成",
|
|
"已取消",
|
|
]
|
|
|
|
}
|
|
},
|
|
onShow() {
|
|
// this.actList = ["1", "1", "1", "1", "1", ]
|
|
// this.status = "nomore" 底部刷新结束
|
|
},
|
|
onPullDownRefresh() {
|
|
console.log("刷新");
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
onReachBottom() {
|
|
// this.show = true
|
|
setTimeout(() => {
|
|
console.log("加载执行");
|
|
}, 2000)
|
|
},
|
|
components: {
|
|
headers
|
|
},
|
|
methods: {
|
|
getindex(index) {
|
|
this.tabindex == index
|
|
},
|
|
goback() {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
background: #f8f8f8;
|
|
// background: linear-gradient(180deg, #B2D2FC 0%, #B2D2FC 14%, rgba(255, 255, 255, 0.84) 24%, rgba(255, 255, 255, 0.84) 100%);
|
|
height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
background: #f8f8f8;
|
|
box-sizing: border-box;
|
|
padding-top: 88px;
|
|
}
|
|
|
|
.img-box {
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.tablist {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
.tabbox {
|
|
width: 25%;
|
|
height: 40px;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.gang {
|
|
width: 36px;
|
|
height: 2px;
|
|
background: #0864E9;
|
|
margin: 5px auto;
|
|
}
|
|
|
|
.box_ {
|
|
width: 95%;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
margin: 15px auto;
|
|
|
|
}
|
|
|
|
.b-bx {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.title_ {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
}
|
|
|
|
.zt-size {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
color: #FD504E;
|
|
}
|
|
|
|
.centne {
|
|
display: flex;
|
|
}
|
|
|
|
.touxiang {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
background: #D9D9D9;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.right-centne {
|
|
width: 70%;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.h_ {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.end-box {
|
|
width: 100%;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
color: #0864E9;
|
|
}
|
|
</style> |