teambuy-front/pages/index/oldCart.vue

<template>
    <view class="page">
        <navbar />

        <view class="user">
            <uv-checkbox-group shape="circle" v-model="checkboxValue">

                <uv-swipe-action>
                    <view v-for="(item, index) in list" :key="item.id">
                        <view style="margin-top: 20rpx;"></view>
                        <uv-swipe-action-item @click="e => deleteCart(e, item)" :options="options">
                            <view class="item">
                                <view class="checkbox">
                                    <uv-checkbox :name="item.id" activeColor="#eb3300" size="40rpx"
                                        icon-size="35rpx"></uv-checkbox>
                                </view>

                                <image class="image" :src="item.image &&
                                    item.image.split(',')[0]" mode=""></image>

                                <view class="info">
                                    <view class="title">
                                        <view class="">
                                            {{ item.title }}
                                        </view>
                                    </view>
                                    <view class="unit">
                                        规格：{{ item.sku }}
                                        <!-- <uv-icon name="arrow-down"></uv-icon> -->
                                    </view>

                                    <view style="display: flex;
									justify-content: space-between;
									align-items: center;">
                                        <view class="price">
                                            ￥<text>{{ item.price }}</text>元
                                        </view>

                                        <view class="">
                                            <uv-number-box v-model="item.num"
                                                @change="e => valChange(item, e)"></uv-number-box>
                                        </view>
                                    </view>

                                </view>
                            </view>
                        </uv-swipe-action-item>
                    </view>
                </uv-swipe-action>
            </uv-checkbox-group>

            <uv-empty v-if="list.length == 0" text="空空如也" textSize="30rpx" iconSize="200rpx" icon="list"></uv-empty>

            <view class="action">
                <view class="icon">
                    <image src="/static/image/cart/1.png" mode=""></image>
                    <view class="num">
                        {{ checkboxValue.length }}
                    </view>
                </view>
                <view class="price">
                    <view class="count">
                        合计
                        <view class="">
                            ￥<text>{{ totalPrice }}</text>
                        </view>
                    </view>
                    <view class="text">
                        共{{ checkboxValue.length }}件，已享受更低优惠
                    </view>
                </view>
                <view class="btn" @click="submit">
                    去结算
                </view>
            </view>
        </view>

        <tabber select="cart" />
    </view>
</template>

<script>
import tabber from '@/components/base/tabbar.vue'
import mixinsList from '@/mixins/list.js'
export default {
    mixins: [mixinsList],
    components: {
        tabber,
    },
    data() {
        return {
            value: 0,
            checkboxValue: [],
            options: [
                {
                    text: '删除',
                    style: {
                        backgroundColor: '#f40'
                    }
                },
            ],
            mixinsListApi: 'getCartPageList',
        }
    },
    computed: {
        totalPrice() {
            if (!this.checkboxValue.length) {
                return 0
            }
            let price = 0
            this.list.forEach(n => {
                if (this.checkboxValue.includes(n.id)) {
                    price += n.price * n.num
                }
            })
            return price
        },
    },
    methods: {
        valChange(item, e) {
            this.$api('updateCartNum', {
                id: item.id,
                num: e.value,
            })
        },
        // 立即下单
        submit() {
            if (this.checkboxValue.length == 0) {
                uni.showToast({
                    title: '请选择商品',
                    icon: 'none',
                })
                return
            }

            let arr = []

            this.list.forEach(n => {
                if (this.checkboxValue.includes(n.id)) {
                    arr.push(n)
                }
            })

            this.$store.commit('setPayOrderProduct', arr)

            this.$utils.navigateTo('/pages_order/order/createOrder')
        },
        deleteCart(e, item) {
            this.$api('deleteCart', {
                ids: item.id
            }, res => {
                this.getData()
            })
        },
    }
}
</script>

<style scoped lang="scss">
.page {
    padding-bottom: 200rpx;

    /deep/ .uv-swipe-action {
        width: 100%;
    }
}

.user {
    .item {
        background-color: #fff;
        display: flex;
        padding: 30rpx;

        .checkbox {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .image {
            width: 200rpx;
            height: 200rpx;
            border-radius: 20rpx;
        }

        .info {
            flex: 1;

            .title {
                display: flex;
                padding: 10rpx 20rpx;
                justify-content: space-between;

            }

            .unit {
                font-size: 24rpx;
                padding: 10rpx 20rpx;
                color: #717171;
                display: flex;
                align-items: center;
            }

            .price {
                color: $uni-color;
                font-size: 28rpx;
                padding: 10rpx 20rpx;

                text {
                    font-size: 36rpx;
                    font-weight: 900;
                }
            }
        }
    }

    .action {
        width: 700rpx;
        position: fixed;
        bottom: 220rpx;
        left: 25rpx;
        background-color: #fff;
        height: 100rpx;
        border-radius: 50rpx;
        box-shadow: 0 0 6rpx 6rpx #00000010;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        z-index: 999;

        .icon {
            position: relative;
            width: 80rpx;
            height: 80rpx;
            margin: 0 20rpx;

            image {
                width: 80rpx;
                height: 80rpx;
            }

            .num {
                position: absolute;
                right: 10rpx;
                top: 0rpx;
                background-color: $uni-color;
                color: #fff;
                font-size: 18rpx;
                border-radius: 50%;
                height: 30rpx;
                width: 30rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .price {
            .count {
                display: flex;
                font-size: 26rpx;
                align-items: center;

                view {
                    color: $uni-color;
                    margin-left: 10rpx;

                    text {
                        font-size: 32rpx;
                        font-weight: 900;
                    }
                }
            }

            .text {
                font-size: 20rpx;
                color: #717171;
            }
        }

        .btn {
            margin-left: auto;
            background-color: $uni-color;
            height: 100%;
            padding: 0 50rpx;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>