第一个列表项(li)的jtdtitlesp为"未完成"时,所有后续列表项中的的颜色为 灰色,并且这些列表项不可点击。而当第一个列表项的jtdtitlesp为"已完成"时,后续列表项中的颜色恢复正常,并且这些列表项可点击。
<ul class="top_home_ybtx_tip">
<li class="top_home_ybtx_tips" @click="listUrl(index)" v-for="(item,key) in list" :key="index" :class="{ 'disabled': index > 0 && isFirstItemCompleted }">
<img src="" alt="" class="jtdimg">
<div class="top_home_ybtx_div">
<p class="top_home_ybtx_divp">
<span style="margin-right: 3rem;" class="jtdtitle" :style="titleColor(index)"></span>
<span class="jtdtitlesp" :style="{ color: itemStatusColor(item.jtdtitlesp) }">{{item.jtdtitlesp}}</span>
</p>
<p class="top_home_ybtx_divps">
<span>被保险人:<i>{{item.insured_name}}</i></span>
<span style="margin-left: 1rem;">保费:<i>{{item.total_premium}}</i>元</span>
</p>
</div>
</li>
</ul>
var vm = new Vue({
el: '#top_home',
data: {
// list: [],
list: [
// 假设这是从后端获取的数据
{
jtdtitlesp: '未完成',
insured_name: '张三',
total_premium: '10000',
},
{
jtdtitlesp: '未完成',
insured_name: '张四',
total_premium: '15000',
},
{
jtdtitlesp: '未完成',
insured_name: '发过的',
total_premium: '250000',
},
],
firstItemStatus: '' // 用来存储第一个列表项的状态
},
mounted: function () {
// 在组件挂载后设置第一个列表项的状态
this.firstItemStatus = this.list[0].jtdtitlesp;
},
computed: {
// 可以添加一个计算属性来简化第一个项目的状态检查
isFirstItemCompleted() {
return this.firstItemStatus == '已完成';
}
},
methods: {
listUrl(index) {
// 如果第一个项目已完成且当前不是第一个项目,则阻止点击
if (this.isFirstItemCompleted && index != 0) {
return;
}
this.navigateToPlan();
},
navigateToPlan() {
// 假设commonurl_front和filurls是外部定义的变量或常量
window.location.href = commonurl_front + filurls + "/plan.html" + location.search;
},
itemStatusColor(status) {
// 根据状态返回不同的颜色
return status == '未完成' ? '#FF3A31' : '#1AB14B';
},
titleColor(index) {
// 根据第一个列表项的状态返回不同的颜色
return index > 0 && this.isFirstItemCompleted ? '#C8C8C8' : '';
}
},
});