问题描述
点击id为1 的ItemA 却跳转到id为2的itemB。
问题解决
内层循环的key使用id,而不是index。此时的index无法区分开数据
<view class="item_j hand" v-for="(itemJ,index) in item.children" :key="itemJ.id" @click="go2Detail(itemJ)">
<!-- 讲座转载 -->
<template>
<view class="lectureShare">
<!-- 选项卡 -->
<view class="tabs">
<view class="wCen">
<view v-for="(tab,idx) in listPlatformDict" :key="idx" class="tab" @click="change(tab.value)" :class="{active:tab.value==current}">
{{tab.label}}
</view>
</view>
</view>
<!-- 内容区 1 -->
<view class="content">
<!-- 列表数据 -->
<view class="wCen" v-if="list&&list.length>0">
<view class="list">
<view class="item" v-for="(item,idx) in list" :key="idx">
<view class="item_t">
<view class="dot"></view>
{{item.date}}
</view>
<view class="item_list">
<view class="item_j hand" v-for="(itemJ) in item.children" :key="itemJ.id" @click="go2Detail(itemJ)">
<view class="item_c">
{{platform(itemJ)}}
</view>
<view class="item_r">
<view class="item_r_t">
{{itemJ.title}}
</view>
<view class="item_r_t">
{{itemJ.id}}
</view>
<view class="item_r_date">
{{parseDateTime(itemJ.lectureTime)}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<v-noData ref="nodata" v-else></v-noData>
</view>
</view>
</template>
<script>
import util from '@/utils/util'
export default {
computed: {
platform() {
return v => {
if (!v) return
return this.dictNameByList(this.listPlatformDict, v.platform)
}
},
parseDate() {
return (v) => {
if (!v) return
return util.parseTime(v, '{yyyy}.{mm}.{dd}')
}
},
parseDateTime() {
return (v) => {
if (!v) return
return util.parseTime(v, '{yyyy}.{mm}.{dd} {hh}~{ii}')
}
},
},
data() {
return {
current: 0,
list: [],
loading: true,
status: 'loadmore',
total: 0,
count: 0,
form: {
// 根据讲座创建时间进行倒叙排序
pageNum: 1,
pageSize: 400,
platform:''
},
listPlatformDict: [],
listDate: [], //日期
}
},
onLoad(options) {
this.getDictFun()
this.getList()
},
methods: {
change(val) {
this.current = val
this.form.platform=val
this.update()
},
go2Detail(item){
console.log(item.title,item.id)
// this.nav(`/pages/lectureShareDetail/index?id=${item.id}`)
},
update() {
this.list = []
this.form.pageNum = 1
this.getList()
},
getIndex(v) {
let index = this.listDate.findIndex(e => {
return e === util.parseTime(v.lectureTime, '{yyyy}.{mm}.{dd}')
});
return index == -1 ? 0 : index;
},
getList() {
this.loading = true;
if (this.form.pageNum === 1) {
this.toTop();
}
this.$api.common.listNews(this.form).then(res => {
if (res && res.code == 200) {
if (res.rows && res.rows.length > 0) {
let list = res.rows
let dateList = list.map(item => {
return util.parseTime(item.lectureTime, '{yyyy}.{mm}.{dd}')
})
this.listDate = Array.from(new Set(dateList)).sort(func)
this.list=this.listDate.map(item =>{
return{
date:item,
children:[]
}
})
list.map(row => {
this.list[this.getIndex(row)]['children'].push(row)
})
this.count += res.rows.length;
console.log(this.list)
}
this.total = res.total;
// // 数据全部加载完成
if (this.count >= this.total) {
this.status = 'nomore';
} else {
this.status = 'loading';
}
}
function func(a, b) {
return new Date(b).getTime() - new Date(a).getTime()
}
}).finally(() => {
// 加载状态结束
this.loading = false
})
},
// 获取字典数据
async getDictFun() {
const result = await this.getDicts('platform');
let list = result[0]
list.unshift({
label: '全部',
value: '0'
})
this.listPlatformDict = list
},
},
}
</script>
<style lang="scss" scoped>
.lectureShare {
min-height: 100vh;
padding-top: 4rpx;
// 选项卡
.tabs {
margin-bottom: 40rpx;
border-bottom: #E6E6E6 solid 1px;
padding: 20rpx 0 10rpx;
.wCen {
display: flex;
align-items: center;
}
.tab {
$h: 34rpx;
font-size: 34rpx;
color: #333;
cursor: pointer;
position: relative;
&:not(:last-child) {
margin-right: 40rpx;
}
&::after {
content: '';
display: block;
width: 50rpx;
height: 8rpx;
border-radius: 4rpx;
left: 50%;
bottom: -12rpx;
position: absolute;
margin-left: -25rpx;
}
&.active {
font-weight: bold;
font-size: 36rpx;
&::after {
background: linear-gradient(90deg, #43BE84 0%, #20894D 100%);
}
}
}
}
.content {}
// 列表项
.list {
.item {
margin-bottom: 50rpx;
// 顶部时间标题
&_t {
margin-bottom: 40rpx;
display: flex;
align-items: center;
padding-left: 50rpx;
height: 30px;
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 30rpx;
.dot {
position: relative;
left: -30rpx;
&::before,
&::after {
content: '';
display: block;
position: absolute;
border-radius: 50%;
left: 50%;
top: 50%;
}
&::before {
$w: 32rpx;
width: $w;
height: $w;
background: #333333;
margin-top: -$w/2;
margin-left: -$w/2;
}
&::after {
width: 20rpx;
height: 20rpx;
background: #20894D;
margin-top: -10rpx;
margin-left: -10rpx;
}
}
}
&_list {
border-left: 2rpx solid #333;
margin-left: 15rpx;
}
// 第二层循环
&_j {
display: flex;
margin-bottom: 30rpx;
border:1px solid #f00;
}
&_c {
flex: 0 0 130rpx;
width: 130rpx;
height: 64rpx;
line-height: 64rpx;
border-radius: 12rpx;
text-align: center;
border: 2rpx solid #E5E5E5;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #9E9E9E;
margin-left: 30rpx;
}
&_r {
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
&_t {
height: 26rpx;
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 26rpx;
letter-spacing: 1px;
margin-bottom: 12rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 500rpx;
}
&_date {
height: 26rpx;
font-size: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 26rpx;
}
}
}
}
}
</style>