YileUI - 购物车

简述

购物车页面，用于展示用户加入到购物车里的产品信息。

平台支持

<template>
    <view>
        <view class="cart_con">
            <view class="con" v-for="(item,index) in list" :key="index">
                <view class="title">
                    <radio color="#ff5000" :checked="item.isChecked" @click="onCheck(index)"></radio>
                    <view>
                        <text>{{item.shop_name}}</text>
                    </view>
                    <label>领劵</label>
                </view>
                <view class="product">
                    <radio color="#ff5000" :checked="item.isChecked" @click="onCheck(index)"></radio>
                    <image :src="item.image">
                    </image>
                    <view class="pcon">
                        <text>{{item.pro_name}}</text>
                        <view class="prop">{{item.prop}}</view>
                        <view class="tag"><label>库存紧张</label></view>
                        <view class="price">￥{{item.price}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="cart_btns">
            <radio color="#ff5000" :checked="isAllChecked" @click="onAllCheck"></radio>
            <label>全选</label>
            <view>
                合计:<text>￥{{price}}</text>
            </view>
            <button @click="onPay">结算</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                price: 0.00, //价格
                isAllChecked: false, //是否全选
                list: [{
                    shop_name: '回力旗舰店1',
                    image: 'http://gw.alicdn.com/bao/uploaded/i1/2412235310/O1CN01gO1HuP1p61fWIGswd_!!2412235310.jpg_300x300q90.jpg_.webp',
                    pro_name: '春秋新款老北京布鞋男单鞋男士平底一脚蹬懒人休闲运动防滑工作鞋',
                    prop: '黑灰；42',
                    tag: ["库存紧张"],
                    price: 59.00,
                    num: 1,
                    isChecked: false
                }, {
                    shop_name: '回力旗舰店2',
                    image: 'http://gw.alicdn.com/bao/uploaded/i1/2412235310/O1CN01gO1HuP1p61fWIGswd_!!2412235310.jpg_300x300q90.jpg_.webp',
                    pro_name: '春秋新款老北京布鞋男单鞋男士平底一脚蹬懒人休闲运动防滑工作鞋',
                    prop: '黑灰；42',
                    tag: ["库存紧张"],
                    price: 59.00,
                    num: 1,
                    isChecked: false
                }, {
                    shop_name: '回力旗舰店3',
                    image: 'http://gw.alicdn.com/bao/uploaded/i1/2412235310/O1CN01gO1HuP1p61fWIGswd_!!2412235310.jpg_300x300q90.jpg_.webp',
                    pro_name: '春秋新款老北京布鞋男单鞋男士平底一脚蹬懒人休闲运动防滑工作鞋',
                    prop: '黑灰；42',
                    tag: ["库存紧张"],
                    price: 59.00,
                    num: 1,
                    isChecked: false
                }]
            }
        },
        onLoad() {

        },
        methods: {
            //选择
            onCheck(index) {
                var _this = this;
                //选中状态
                if (_this.list[index].isChecked) _this.list[index].isChecked = false;
                else _this.list[index].isChecked = true;

                //计算价格
                var _price = 0;
                var _num = 0;
                for (var i = 0; i < _this.list.length; i++) {
                    if (_this.list[i].isChecked) {
                        _price += _this.list[i].price * _this.list[i].num;
                        _num++;
                    }
                }
                _this.price = _price.toFixed(2);

                //是否全选
                if (_this.list.length == _num) _this.isAllChecked = true;
                else _this.isAllChecked = false;
            },
            //全选
            onAllCheck() {
                var _this = this;

                if (_this.isAllChecked) {
                    _this.isAllChecked = false;
                    for (var i = 0; i < _this.list.length; i++) {
                        _this.list[i].isChecked = false;
                    }
                } else {
                    _this.isAllChecked = true;
                    for (var i = 0; i < _this.list.length; i++) {
                        _this.list[i].isChecked = true;
                    }
                }
            },
            //结算
            onPay() {
                var _this = this;

                //获取选中
                var _list = new Array();
                for (var i = 0; i < _this.list.length; i++) {
                    if (_this.list[i].isChecked) {
                        _list.push(_this.list[i]);
                    }
                }

                uni.showToast({
                    title: '选择了' + _list.length + '件商品',
                    icon: "none"
                });
            }
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #f8f8f8;
        padding-bottom: 120rpx;
    }

    .cart_con {
        width: 96%;
        margin: 0 2%;

        .con {
            margin-top: 20rpx;
            background-color: #fff;
            border-radius: 15rpx;
            padding: 20rpx 3%;

            .title {
                display: flex;
                flex-direction: row;
                align-items: center;
                font-size: 32rpx;
                font-weight: bold;

                radio {
                    margin-right: 10rpx;
                }

                view {
                    flex: 1;
                }

                label {
                    color: #999;
                    font-size: 30rpx;
                    font-weight: normal;
                }
            }

            .product {
                display: flex;
                flex-direction: row;
                align-items: center;
                font-size: 28rpx;
                margin-top: 25rpx;

                radio {
                    margin-right: 10rpx;
                }

                image {
                    width: 200rpx;
                    height: 200rpx;
                    border-radius: 15rpx;
                    margin-right: 15rpx;
                }

                .pcon {
                    flex: 1;

                    text {
                        display: inline-block;
                        height: 40rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-weight: bold;
                    }

                    .prop {
                        background-color: #f8f8f8;
                        color: #999;
                        display: inline-block;
                        padding: 4rpx 10rpx;
                        border-radius: 5rpx;
                        margin-top: 8rpx;
                    }

                    .tag {
                        margin-top: 6rpx;

                        label {
                            color: #ff5000;
                            border: 1px solid #ff5000;
                            border-radius: 5rpx;
                            padding: 1rpx 5rpx;
                            font-size: 20rpx;
                        }
                    }

                    .price {
                        margin-top: 10rpx;
                        color: #ff5000;
                        font-size: 30rpx;
                    }
                }
            }
        }
    }

    .cart_btns {
        position: fixed;
        bottom: 0;
        padding: 20rpx 5% 30rpx;
        background-color: #fff;
        width: 90%;
        display: flex;
        flex-direction: row;
        align-items: center;

        radio {
            margin-right: 10rpx;
        }

        label {
            color: #999;
            font-size: 28rpx;
        }

        view {
            flex: 1;
            text-align: right;
            font-size: 28rpx;

            text {
                color: #ff5000;
                font-size: 38rpx;
                font-weight: bold;
            }
        }

        button {
            background-color: #ff5000;
            color: #fff;
            font-size: 30rpx;
            width: 180rpx;
            line-height: 80rpx;
            margin-left: 15rpx;
        }
    }
</style>