li中第一个订单为未完成的时候,后面的li中的jtdtitle是灰色的并且不能点击,当第一个订单为已完成的的时候,后面的li才可以点击并且jtdtitle变成原来的颜色
原来是这么写的但是,每次都是未定义
mounted() {
var listItems = document.querySelectorAll('.top_home_ybtx_tips');
if (listItems.length > 0) {
var firstItem = listItems[0];
if (firstItem.hasAttribute('data-jtdtitlesp')) {
var firstItemStatus = firstItem.getAttribute('data-jtdtitlesp');
for (var i = 1; i < listItems.length; i++) {
var span = listItems[i].querySelector('span.jtdtitle');
if (span) {
if (firstItemStatus === '未完成') {
span.style.color = '#C8C8C8';
listItems[i].style.pointerEvents = 'none'; // 阻止点击事件
} else if (firstItemStatus === '已完成') {
span.style.color = ''; // 移除之前可能设置的颜色
listItems[i].style.pointerEvents = 'auto'; // 恢复点击事件
}
}
}
}
}
},
原代码
<ul class="top_home_ybtx_tip">
<li class="top_home_ybtx_tips" @click="listUrl(key)" v-for="(item,key) in list" :key="item.seq_no" :data-jtdtitlesp="item.order_status=='0' ? '未完成' : '已完成'">
<img src="" alt="" class="jtdimg">
<div class="top_home_ybtx_div">
<p class="top_home_ybtx_divp">
<span style="margin-right: 1.5rem;" class="jtdtitle"></span>
<span class="jtdtitlesp" :style="{ color: itemStatusColor(item.order_status) }">{{item.order_status=='0' ? '未完成' : '已完成'}}</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: [],
family_count: 0,
},
mounted() {
this.loading_query();
},
methods: {
loading_query() {
$("#loadingToast").show();
var fadata = {
"seed_no": seed_no,
"openid": openid_gv,
};
$.ajax({
type: "post",
url: vcommonurl + "v1/family/list/query",
timeout: 30000,
data: JSON.stringify(fadata),
dataType: 'json',
contentType: "application/json",
success: (data) => {
this.family_count = data.family_count;
this.list = data.family;
updateList();
},
complete: function (XMLHttpRequest, status) {
if (status == 'timeout') {
$('#loadingToast').hide();
hxui.toast("服务器繁忙,请稍后再试!");
}
},
error: function (xhr, errorType, error) {
$("#loadingToast").hide();
hxui.toast("服务器繁忙,请稍后再试!");
}
});
},
listUrl(key) {
plankey = key + 1
console.log('序号', plankey)
this.navigateToPlan();
},
navigateToPlan() {
if (isFamilyPlan = "是") {
// is_family=1为家庭单
planUrl += "&is_family=1" + "&seq_no=" + plankey;
}
window.location.href = planUrl;
console.log('链接', window.location.href)
},
itemStatusColor(status) {
// 根据状态返回不同的颜色
return status == '未完成' ? '#1AB14B' : '#FF3A31';
},
},
});