循环中第一个li中的order_status==0得时候剩下的不可点击，第一个li中的order_status不等于0得时候剩下的可以点击

Question

循环中第一个li中的order_status==0得时候剩下的不可点击，第一个li中的order_status不等于0得时候剩下的可以点击

<ul class="top_home_ybtx_tip">
                <li class="top_home_ybtx_tips" @click="listUrl(item)" v-for="(item,key) in list" :key="item.seq_no">
                    <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" :style="{ color: item.seq_no == '1' ? (item.order_status == '0' ? defaultColor : disabledColor) : disabledColor }"></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,
    defaultColor: '#000000', // 假设默认颜色是黑色
    disabledColor: '#C8C8C8', // 禁用时的颜色
    },
    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;
                },
                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 == '0' ? '#FF3A31' : '#1AB14B';
        },
    },
});

Answer 1

我妈已经三天没打我了 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

根据你的描述，你想在循环中根据第一个li的order_status值来设置剩下的li的点击状态。可以通过在模板中使用条件表达式来达到这个目的。

修改后的代码如下：

<ul class="top_home_ybtx_tip">
  <li class="top_home_ybtx_tips" v-for="(item, key) in list" :key="item.seq_no">
    <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" :style="{ color: key === 0 ? (item.order_status === '0' ? defaultColor : disabledColor) : disabledColor }"></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>

解决方案：

1. 根据问题描述，在循环中使用的是v-for="(item, key) in list"，所以可以通过key来判断当前li是否为第一个li。
2. 在第一个li的模板中使用条件表达式来设置颜色样式：:style="{ color: key === 0 ? (item.order_status === '0' ? defaultColor : disabledColor) : disabledColor }"，如果key === 0，表示当前为第一个li，根据item.order_status的值来设置颜色样式。
3. 其他li元素的颜色样式设置为disabledColor，表示不可点击状态。
4. 使用方法itemStatusColor获取不同状态下的颜色值。

希望对你有帮助！如有其他问题，请随时追问。