<template>
<view>
<!--顶部导航栏-->
<view class="uni-tab-bar" style="height: 100upx;">
<scroll-view scroll-x class="uni-swiper-tab">
<view class="" style="display: flex;width: 93%;margin: 0 auto;">
<block v-for="(tabBar,index) in tabBars" :key="index">
<view class="swiper-tab-list cont1-text" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
{{tabBar.name}}
<view class="swiper-tab-line"></view>
</view>
</block>
</view>
</scroll-view>
</view>
<!--内容区-->
<view class="uni-tab-bar">
<swiper :current="tabIndex" @change="tabChange">
<swiper-item v-for="(content,index) in contentList" :key="index" >
<view class="swiper-item">
<view class="cont2 shadow bg-white">
<view class="" style="width: 95%;height: 40upx;display: flex;justify-content: space-between;margin: 0 auto;margin-bottom: 10upx;">
<text style="display: block;font-size: 32upx;font-weight: 600;">标准间(双人房)</text>
<text style="display: block;font-size: 28upx;">订单状态</text>
</view>
<view class="cont2-a flex">
<view class="cont2-a-item1">
<image src="../../static/1.png" mode="aspectFill"></image>
</view>
<view class="cont2-b">
<view class="cont2-b-item1">
<text>下单时间:2021-1-1 13:00</text>
</view>
<view class="cont2-b-item1">
<text>数量:1</text>
</view>
<view class="cont2-b-item1">
<text>总价:¥9.9</text>
</view>
<view class="cont2-b-item1">
<text>订单号:111111111111111111</text>
</view>
<view class="">
<text class="cont2-b1-item3">再来一单</text>
<text class="cont2-b1-item3">去付款</text>
</view>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabIndex: 0, //选中标签栏的序列
contentList: [
"全部",
"待付款",
"已完成",
],
tabBars:[
{
name: '全部',
id: 'guanzhu'
},
{
name: '待付款',
id: 'tuijian'
},
{
name: '已完成',
id: 'redian'
},
],
swiperHeight: 0
}
},
components:{
},
onLoad() {
},
methods: {
toggleTab(index){
console.log(index)
this.tabIndex = index
},
//滑动切换swiper
tabChange(e){
console.log(e.detail)
const tabIndex = e.detail.current
this.tabIndex = tabIndex
}
}
}
</script>
<style>
.cont1-text{
margin-right: 20upx;
font-weight: 500;
font-size: 36upx;
padding-bottom: 6upx;
}
page {
background-color: #ffffff;
}
.swiper-tab-list{
color: #969696;
font-weight: bold;
}
.uni-tab-bar .active{
color: #343434;
}
.active .swiper-tab-line{
border-bottom: 2upx solid #FDDE80;
}
.uni-swiper-tab{
padding: 20upx;
}
.cont2{
width: 93%;margin:0 auto;
border-radius: 22upx;
}
.cont2-a{
width: 100%;
height: 232upx;
justify-content: space-between;
margin-bottom: 40upx;
padding: 8upx;
}
.cont2-a-item1{
width: 36%;
height: 198upx;
}
.cont2-a-item1 image{
width: 100%;
height: 100%;
border-radius: 30upx;
}
.cont2-b{
width: 61%;
height: 232upx;
}
.cont2-b-item1{
width: 100%;
height: 43upx;
}
.cont2-b-item1 text{
/* font-size: 32upx;
font-weight: 700; */
}
.cont2-b-item2{
width: 100%;height: 114upx;margin:9upx 0 ;
}
.cont2-b-item2 rich-text{
font-size: 16upx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
.cont2-b-item3{
width: 30%;
height: 50rpx;
background-color: #FDDE80;
float: right;
border-radius: 7px;
text-align: center;
line-height: 50rpx;
margin: 0 5px 10px 0;
}
.cont2-b1-item3{
padding: 10rpx;
background-color: #FDDE80;
border-radius: 14rpx;
font-size: 24rpx;
color: #ffffff;
margin-right: 10upx;
float: right;
}
</style>