购物车cart

<template>
    <view class="content">
        <view class="cart" v-for="(item,index) in list" :key="index" @longpress="del(index)">
            <u-checkbox-group>
                <u-checkbox v-model="item.checked"></u-checkbox>
            </u-checkbox-group>
            <image :src="item.url" mode="aspectFit"></image>
            <view class="detail">
                <view class="">{{item.name}}</view>
                <view class="">单价：￥{{item.price}}</view>
                <view class="xiaoji">小计：￥{{item.price*item.number}}</view>
            </view>
            <u-number-box v-model="item.number" :min="1"></u-number-box>
        </view>
        总价:￥{{total.toFixed(2)}}
        <button type="warn">结算</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list:[
                    {name:'小白鞋',url:'/static/shoe.jpg',price:120,number:1,checked:true},
                    {name:'收纳盒',url:'/static/shounahe.jpg',price:80,number:2,checked:false},
                    {name:'白兔奶糖',url:'/static/sol.jpg',price:10,number:5,checked:false},
                    ]
            }
        },
        computed:{
            total(){
                var sum=0
                for(var i in this.list){
                    var item=this.list[i]
                    if(item.checked){
                        sum+=item.price*item.number
                    }
                }
                return sum
            }
        },
        methods: {
            del(id){
                var that=this
                uni.showModal({
                    title:'提示',
                    content:'确认删除'+this.list[id].name+'吗?',
                    success:function(res){
                        if(res.confirm){
                            that.list.splice(id,1)
                        }else if(res.cancel){
                            return
                        }
                    }
                })
            }
        }
    }
</script>

<style>
    .cart{
        display: flex;
        margin: 10px;
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }
    .cart image{
        width: 200px;
        height: 200px;
        margin: 0 10px;
    }
    
    .detail{
        display: flex;
        flex-direction: column;
        flex:1;
    }
    .detail view:nth-child(2){
        display: flex;
        flex: 1;
        align-items: center;
    }
    .xiaoji{
        color: orange;
    }
</style>