购物车单选-多选及计算总金额

最新推荐文章于 2024-11-01 10:18:14 发布

九帅羽

最新推荐文章于 2024-11-01 10:18:14 发布

阅读量97

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_38007556/article/details/138186817

版权

<div>
    <div class="isAll">
        <div class="label">暂不使用</div>
         <div class="radioImg" :class="{ active: activeTab == 1 } @click="radioAll"></div>
     </div>
     <div class="cont">
          <div class="list" v-for="(item,index) in list" :key="index">
               <div class="label">{{ item.accountName }},可抵扣<span>{{ item.balance }}</span>元</div>
                <div class="radioImg" @click="choice(item,index)" :class="{active : item.choice == true}"></div>
      </div>
   </div>
</div>

全选

const radioAll = () => {
            state.activeTab = !state.activeTab
            state.choicelist =state.list.filter(item => item.choice)
            if (state.choicelist.length != state.list.length){
                state.activeTab = true
                state.list.forEach(item => item.choice = true)
                state.allPrice = sumPrices(state.list);
            } else {
                state.allPrice = 0
                state.activeTab = false
                state.list.forEach(item =>item.choice = false)
            }

            console.log(state.allPrice)
        }

单选

const choice = (item,index) => {
            item.choice =!item.choice
            state.choicelist = state.list.filter(item => item.choice)
            state.choicelist.length == state.list.length ? state.activeTab = true : state.activeTab = false
            state.choicelist.forEach(item =>{
                if(item.choice == true){
                    return state.allPrice = parseFloat(item.balance)
                }
            })
            console.log(state.allPrice)
        }