动静态tab

This commit is contained in:
shijingjing
2022-03-10 19:21:11 +08:00
parent d9cd37f3cb
commit a733919cc5

View File

@@ -21,8 +21,9 @@
<div class="line"></div> <div class="line"></div>
<!-- tab栏 --> <!-- tab栏 -->
<div class="tab-list"> <div class="tab-list">
<div v-for="(item, index) in data.resident.tsrqInfos" :key="index" :class="tabIndex == index ? 'tab-item active' : 'tab-item' " @click="tabIndex=index"> <div v-for="(item, index) in tabList" :key="index" :class="tabIndex == index ? 'tab-item active' : 'tab-item' " @click="tabIndex=index">
<img :src="tabIndex == index ? item.activeIcon : item.icon" alt=""> <img :src="tabIndex == index ? item.activeIcon : item.icon" alt="" v-if="index==0">
<img :src="tabIndex == index ? './components/img/tsrq@2x.png' : './components/img/tsrq备份@2x.png'" alt="" v-else>
<p>{{item.name}}</p> <p>{{item.name}}</p>
</div> </div>
</div> </div>
@@ -139,32 +140,23 @@ export default {
return { return {
id: '', id: '',
data: [], data: [],
tabList: [ tabList: [],
{ // {
icon: require('./components/img/icon1n@2x.png'), // icon: require('./components/img/icon1n@2x.png'),
activeIcon: require('./components/img/icon1h@2x.png'), // activeIcon: require('./components/img/icon1h@2x.png'),
name: '基本信息', // name: '基本信息',
}, // },
{ // {
icon: require('./components/img/tsrq@2x.png'), // icon: require('./components/img/tsrq@2x.png'),
activeIcon: require('./components/img/tsrq备份@2x.png'), // activeIcon: require('./components/img/tsrq备份@2x.png'),
name: '残疾人员', // name: '残疾人员',
}, // },
{
icon: require('./components/img/tsrq@2x.png'),
activeIcon: require('./components/img/tsrq备份@2x.png'),
name: '精神病人',
},
{
icon: require('./components/img/tsrq@2x.png'),
activeIcon: require('./components/img/tsrq备份@2x.png'),
name: '吸毒人员',
},
],
tabIndex: 0, tabIndex: 0,
} }
}, },
computed: {}, computed: {
},
watch: {}, watch: {},
onLoad(o) { onLoad(o) {
this.id = o.id this.id = o.id
@@ -180,6 +172,21 @@ export default {
this.$http.post(`/app/appresident/detail?id=${this.id}`).then((res) => { this.$http.post(`/app/appresident/detail?id=${this.id}`).then((res) => {
if (res.code == 0) { if (res.code == 0) {
this.data = res.data this.data = res.data
if (res.data.resident.tsrqInfos) {
this.tabList = res.data.resident.tsrqInfos
let info = {
icon: require('./components/img/icon1n@2x.png'),
activeIcon: require('./components/img/icon1h@2x.png'),
name: '基本信息',
}
this.tabList.unshift(info)
} else {
this.tabList =[{
icon: require('./components/img/icon1n@2x.png'),
activeIcon: require('./components/img/icon1h@2x.png'),
name: '基本信息',
}]
}
} }
}) })
}, },