<template> <view> <!-- //分类 --> <view class="backcorfff width100"> <QSTabs ref="tabs" :tabs="tabs" animationMode="line2" :current="current" @change="change" activeColor="#089bf5" lineColor="#089bf5" swiperWidth="750"> </QSTabs> </view> <!-- 多状态内容 --> <view class="mart15 width100"> <view class="width94 backcorfff border-r mart15" v-for="(item,index) in merlist" :key="index" @click="jumpstoredes"> <view class="notes" style="border-bottom: 0px;"> <image src="../../../static/img/store/store7.png" mode="widthFix" class="iconw40"></image> <view class="width65 margle"> <view class="font14 fcor333">155832658692</view> <view class="font12 fcor999">2021-12-15 09:30:21</view> </view> <view class="otstatucs font14">审核失败</view> </view> <view class="conts" style="border-bottom: 0px;"> <image src="../../../static/img/store/store8.png" mode="widthFix" class="iconw"></image> <view class="margle10 font14 fcor999">155242424242</view> </view> <view class="conts" style="border-bottom: 0px;"> <image src="../../../static/img/store/store9.png" mode="widthFix" class="iconw"></image> <view class="margle10 font14 fcor999">155242424242</view> </view> <view class="conts" style="border-bottom: 0px;"> <image src="../../../static/img/store/store10.png" mode="widthFix" class="iconw"></image> <view class="margle10 font14 fcor999 width90p">方式方式的方式的房东说发地方身份史蒂夫是房东说身份是发</view> </view> </view> </view> <view class="width100 height60"></view> </view> </template> <script> import QSTabs from '../../../components/QS-tabs/QS-tabs.vue'; export default { components: { QSTabs }, data() { return { merlist: [1, 2, 3, 4, 5, 6], tabs: ["待审核", "驳回", "通过"], current: 0, // tabs默认值 } }, onLoad() {}, methods: { //筛选 change(index) { this.$refs.tabs.setFinishCurrent(index); this.current = index; }, //跳转门店详情 jumpstoredes() { if (this.current == 0) { uni.navigateTo({ url: '../addStore/addStore' }) return; } uni.navigateTo({ url: '../store-details/store-details' }) } } } </script> <style lang="scss"> page { background-color: #f6f6f6; } .notes { width: calc(100% - 40upx); display: flex; align-items: center; padding: 20upx 0 20upx 20upx; } .conts { width: calc(100% - 60rpx); display: flex; align-items: center; padding: 0 30rpx 10rpx 30rpx; } //正常状态 .statucs { background-color: #e9f9e5; color: #84b878; text-align: center; padding: 2px 5px; } //其他状态 .otstatucs { background-color: #fbeee4; color: #db8c73; text-align: center; padding: 2px 5px; } </style>