小程序店铺级别购物车，选中非选中逻辑(VUE写法)

最新推荐文章于 2022-12-21 14:13:24 发布
最新推荐文章于 2022-12-21 14:13:24 发布
阅读量482 收藏 2
点赞数 1
分类专栏： 小程序 文章标签： 前端 小程序 购物车
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42816550/article/details/107079051
版权

效果图:
在这里插入图片描述
代码：

<!-- 
 * @description 购物车-列表
 * @author yxf
 * @date 2020-07-01
 * @version 1.0.0
 * @lastModifiedBy yxf
 * @lastModifiedTime 2020-07-01
-->
<template>
    <div class="wrap">
        <view class="list">
            <view class="list_item" v-for="(item,index) in list" :key="index">
                <view class="list_item_t flex">
                    <view class="checkbox" style="margin:0 30rpx" @click="checkAllGoods(item)">
                        <image
                            v-if="item.checkAll"
                            src="/static/images/car-checked.png"
                            mode="widthFix"
                        />
                        <image v-else src="/static/images/pay-unchecked.png" mode="widthFix" />
                        <!-- <image src="/static/images/pay-lock.png " mode="widthFix" /> -->
                    </view>
                    <view>{{item.shopName}}店铺1111A</view>
                </view>
                <view
                    class="list_item_act"
                >{{item.startTime}} - {{item.endTime}} {{item.activityName}}本店商品满100元减20元</view>
                <view v-for="(item2,index2) in item.goods" :key="index2">
                    <view class="list_item_goods">
                        <view class="checkbox list_item_goods_l" @click="checkGoods(item2,item)">
                            <image
                                v-if="item2.checked"
                                src="/static/images/car-checked.png"
                                mode="widthFix"
                            />
                            <image v-else src="/static/images/pay-unchecked.png" mode="widthFix" />
                            <!-- <image src="/static/images/pay-lock.png" mode="widthFix" /> -->
                        </view>
                        <view class="list_item_goods_c">
                            <!-- <image
                                src="http://jz.uat1.rscloud.com/img/logo.3c167510.png"
                                mode="widthFix"
                            /> -->
                        </view>
                        <view class="list_item_goods_r">
                            <view class="list_item_goods_rt">{{item2.prodName}}商品</view>
                            <view class="list_item_goods_rc">{{item2.specsValue}}150/80/xs</view>
                            <view class="list_item_goods_rb">￥{{item2.price}}</view>
                        </view>
                        <view class="u-number-box">
                            <u-number-box
                                :disabled-input="true"
                                :min="1"
                                :max="999999"
                                v-model="item2.goodsNum"
                                @minus="(val,obj)=>delNum(val,item2)"
                                @plus="(val,obj)=>addNum(val,item2)"
                            ></u-number-box>
                        </view>
                    </view>
                    <view class="list_item_goods_b">
                        <text>配送方式</text>
                        <text>支持自提</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="footer">
            <view class="checkbox" @click="checkAllShops">
                <image
                    style="margin:0 30rpx"
                    v-if="allCheck"
                    src="/static/images/car-checked.png"
                    mode="widthFix"
                />
                <image
                    style="margin:0 30rpx"
                    v-else
                    src="/static/images/pay-unchecked.png"
                    mode="widthFix"
                />
                <text>全选</text>
                <!-- <image src="/static/images/pay-lock.png" mode="widthFix" />-->
            </view>
            <view>
                <text>
                    合计:
                    <text style="color:#EA5205;font-weight:bold">￥{{totalMoney}}</text>
                </text>
                <button class="submit_btn">提交订单</button>
            </view>
        </view>
    </div>
</template>

<script>
import uNumberBox from '@/components/uview/u-number-box'
/**
 * 参数说明
 * @property  {String} shopName 店铺名称
 * @property  {String} startTime 活动开始时间
 * @property  {String} endTime 活动结束时间
 * @property  {String} activityName  活动名称
 * @property  {Array}  goods  商品列表
 * @property  {Number} distributeWay 配送方式 1：自提 2： 快递
 * @property  {Number} goodsId 商品ID
 * @property  {String} prodName 商品名称
 * @property  {String} skuImageUrl 商品图片
 * @property  {Number} goodsNum  商品数量
 * @property  {String} goodsSku  商品sku
 * @property  {Number} id ID
 * @property  {Number} price 价格
 * @property  {String} specsValue 规格
 * @property  {Number} status 状态  1:正常;2:无效
 * @property  {String} endTime 活动结束时间
 * @property  {String} endTime 活动结束时间
 * @event {Function} delNum 减少商品数量
 * @event {Function} addNum 增加商品数量
 *
 */
export default {
    components: { uNumberBox },
    data() {
        return {
            // allCheck: false,
            list: [
                {
                    shopName: '',
                    startTime: '',
                    endTime: '',
                    activityName: '',
                    checkAll: false,
                    goods: [
                        {
                            skuImageUrl: '',
                            prodName: 'a',
                            specsValue: '',
                            price: 10,
                            goodsNum: 1,
                            distributeWay: '',
                            checked: false
                        },
                        {
                            skuImageUrl: '',
                            prodName: '',
                            specsValue: '',
                            price: 20,
                            goodsNum: 2,
                            distributeWay: '',
                            checked: false
                        }
                    ]
                },
                {
                    shopName: '',
                    startTime: '',
                    endTime: '',
                    activityName: '',
                    checkAll: false,
                    goods: [
                        {
                            skuImageUrl: '',
                            prodName: 'a',
                            specsValue: '',
                            price: 30,
                            goodsNum: 3,
                            distributeWay: '',
                            checked: false
                        },
                        {
                            skuImageUrl: '',
                            prodName: '',
                            specsValue: '',
                            price: 40,
                            goodsNum: 4,
                            distributeWay: '',
                            checked: false
                        }
                    ]
                }
            ]
        }
    },
    created() {
        this.getData()
    },
    computed: {
        allCheck: {
            get: function() {
                return this.list.every(e => e.checkAll) //是否选中所有店铺
            },
            set: function(params) {
                this.list.map(item => (item.checkAll = params))
            }
        },
        totalMoney: function() {
            let sum = 0
            if (this.list.length) {
                this.list.map(item => {
                    if (item.goods.length) {
                        item.goods.map(item2 => {
                            if (item2.checked) {
                                sum += item2.goodsNum * item2.price
                            }
                        })
                    }
                })
            } else {
                sum = 0
            }
            return sum
        }
    },
    methods: {
        delNum(val, item) {
            console.log(val)
            console.log(item)
        },
        addNum(val, item) {
            console.log(val)
            console.log(item)
        },
        getData() {
            // if (this.list.length) {
            //     this.list.map(item => {
            //         item.checkAll = false;
            //         if (item.goods.length) {
            //             item.goods.map(item2 => item2.checked = false)
            //         }
            //     }
            // }
        },
        //选中店铺下的所有商品
        checkAllGoods(item) {
            item.checkAll = !item.checkAll
            item.goods.forEach(item2 => {
                item2.checked = item.checkAll
            })
        },
        //选中所有店铺和商品
        checkAllShops() {
            this.allCheck = !this.allCheck
            this.list.map(item => {
                item.checkAll = this.allCheck
                item.goods.map(item2 => (item2.checked = this.allCheck))
            })
        },
        //选中某个商品
        checkGoods(item2, item) {
            item2.checked = !item2.checked
            let isCheckAllGoods = item.goods.every(e => e.checked) //是否选中该店铺下的全部商品
            item.checkAll = isCheckAllGoods ? true : false
        }
    }
}
</script>

<style lang="less" scoped>
.wrap {
    background: #f7f7f7;
}
.list {
    overflow: hidden;
    padding-bottom: 150rpx;
}
.list_item {
    background: #fff;
    margin-top: 20rpx;
    .list_item_t {
        display: flex;
        padding: 30rpx 0 20rpx;
    }
    .list_item_act {
        margin: 0 30rpx 0 96rpx;
        background: rgba(153, 117, 243, 0.1);
        color: #9975f3;
        border-radius: 12rpx;
        font-size: 24rpx;
        padding: 10rpx;
    }
    .list_item_goods {
        height: 220rpx;
        display: flex;
        align-items: center;
        margin: 0 30rpx;
        position: relative;
        .u-number-box {
            position: absolute;
            right: 0;
            bottom: 30rpx;
        }
        .list_item_goods_l {
            flex-shrink: 0;
            image {
                margin: 30rpx 30rpx 30rpx 0;
            }
        }
        .list_item_goods_c {
            background: #efefef;
            border-radius: 12rpx;
            width: 160rpx;
            height: 160rpx;
            line-height: 160rpx;
            flex-shrink: 0;
            text-align: center;
            image {
                width: 90%;
                vertical-align: middle;
            }
        }
        .list_item_goods_r {
            margin-left: 20rpx;
            .list_item_goods_rt {
                .line_2;
                font-size: 30rpx;
                font-weight: 400;
                line-height: 42rpx;
                height: 100rpx;
            }
            .list_item_goods_rc {
                font-size: 24rpx;
                color: #999;
            }
            .list_item_goods_rb {
                font-size: 28rpx;
                color: #ea5205;
                font-weight: bold;
            }
        }
    }
    .list_item_goods_b {
        margin: 0 30rpx;
        padding: 0 0 20rpx 60rpx;
        display: flex;
        justify-content: space-between;
        border-bottom: 2rpx solid #f1f1f1;
        text {
            font-size: 24rpx;
            color: #999;
        }
    }
}

.checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    image {
        width: 36rpx;
        height: 36rpx;
    }
}
.footer {
    width: 100%;
    height: 140rpx;
    background: #fff;
    position: fixed;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f3f3f3;
    .submit_btn {
        display: inline-block;
        vertical-align: middle;
        width: 240rpx;
        height: 88rpx;
        background: linear-gradient(144deg, rgba(179, 116, 248, 1) 0%, rgba(109, 120, 238, 1) 100%);
        border-radius: 44px;
        color: #fff;
        margin-left: 15rpx;
    }
}

//一行
.line_1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
//两行
.line_2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>>

图片素材:
在这里插入图片描述
在这里插入图片描述

uNumberBox 步进器组件：https://download.csdn.net/download/qq_42816550/12569264

渣渣枫!
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uni-app实战商城类app和小程序
03-07
适用人群具备Html+Css+Javascript基础知识和Vuejs基础知识。课程概述本季度为uni-app实战项目第2季度，将实战商城类app和小程序，其中会包括发布到安卓端app，iOS端app、微信小程序，另外还会涉及Weex（nvue），Vuex模块化管理，商城支付模块等。课程大纲见以下图！
微信小程序之 优惠券选择
gyueh的博客
05-18 5336
需求：进入优惠券选择页面，默认一个也不选择，在进行选择的时候只能选中一个。 wxml部分代码如下： <view class="page"> <view class="page__bd"> <radio-group bindchange="radioChange"> <label wx:for="{{items}}" wx:key="{{item.value}}"> <view class="wehx-card_box wehx-t
uniapp商城实战之uView UI框架前端极速开发
07-25
<p> <img src="https://img-blog.csdnimg.cn/c315e4094a894ba693a2d69c90db4032.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAb25lbmVzc3h5,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="实战商城app之uView框架前端极速开发课程" /> </p>
学习使用vue实现规格选择实例（一）
Yanfengting的博客
03-12 2534
本文对两个类似的项目进行分析 池剑锋源地址：http://chijianfeng.com/web/Vue/163.html 图 写规格的逻辑， 定义一个数组把选中的值存储起来。 定义一个对象存储要匹配的数据。 把选中的值与存储的数据进行遍历查找与之匹配的值的库存，若库存为0按钮为灰色不能选择。 selectArr: [], //存放被选中的值 shopItemInfo: {}, //存放要和选...
uni-app类似淘宝选择商品多规格(库存判断)
七十多岁的人了、
10-24 2966
uniapp商品规格选择
微信小程序商城小程序端基于vue、elementui
06-02
基于vue、element ui 的轻量级、前后端分离小程序 为中小企业打造一个完整、易于维护的开源的电商系统 采用现阶段流行技术实现 可作为自己小程序的参考demo
基于Java+Springboot+Vue的医院预约挂号小程序
10-26
基于Java+Springboot+Vue的医院预约挂号小程序 本系统前后端分离带小程序 - 小程序： 预约挂号，就诊充值，充值记录，医生排班，挂号记录，就诊人信息，我的收藏，我的评价。 - 管理后台： 预约挂号信息管理，科室...
基于Vue和微信小程序的租房小程序设计源码
最新发布
04-03
本设计源码提供了一个基于Vue和微信小程序的租房小程序。项目包含1474个文件，主要使用JavaScript、微信小程序、Vue、HTML和CSS编程语言。文件类型包括388个PNG图片文件、304个JavaScript脚本文件、183个JSON配置...
vue treeselect获取当前选中项的label实例
10-14
主要介绍了vue treeselect获取当前选中项的label实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ios-仿淘宝购物车.zip
07-11
下载地址: https://github.com/zhao560/tb
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
10-15
主要介绍了微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能,本文通过截图实例代码给大家介绍的非常详细，需要的朋友可以参考下
微信小程序实战篇之购物车的实现代码示例
08-28
本篇文章主要介绍了微信小程序实战篇之购物车的实现代码示例，详细的介绍了购物车的功能实现，具有一定的参考价值，有兴趣的可以了解一下
购物车案例小总结
weixin_60885570的博客
09-02 2460
单选框需要使用来包裹住单个的对于项目中的购物车,以及微信小程序购物车逻辑的总结。使用的checkbox表单组件。
vue商品规格选择
ADLF
09-20 2461
<template> <div id='vmsimulatedDATA' class='productBox'> <div class='productConten'> <div class='product-delcom' v-for='(ProductItem,n) in simulatedDATA.specificati...
uni、uview自定义步进器、购物车加减
努力、拼搏、奋进
11-22 1842
uni、uview自定义步进器、购物车加减
使用uview编写购物车界面代码
qq_41460077的博客
01-20 2951
我俨然越来越像前端了！现在在学uniapp跨端框架，试着用uview编写了一下购物车界面代码，然后恰恰uview模板中又没有提供这个界面的前端代码，所以分享出来，有需要的可以拿，不客气~ 实现效果 废话不说直接上代码！因为本人比较懒，所以css直接写标签里了，没有抽取出来，感觉改起来也方便~嘻嘻 <template> <view> <view class="u-m-l-30 u-m-t-30"> <u-checkbox-group :wr.
uni-app微信公众号（2）——商铺展示、商品详情、购物车
徐小硕—心之所向，素履以往
10-29 2809
唔...因为这个公众号做的是关于一个墓园的公众号（~_~）,所以有很多东西，都涉及到一些“不太好”的东西，所以大家看的时候，还挺谅解~ 接下来做了一个商品展示，购物车展示，加入购物车等功能，如图所示 （1）商铺展示页面 商铺展示页，借鉴了uView组件中的垂直分类 垂直分类uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://www.uviewui.com/layout/menu.html代码里面也都有，大家可以下载下来看一下.
微信小程序 — tag标签设置选中效果和未选样式
棒怡情的专栏
12-21 2219
微信小程序，设置标签默认效果和选中效果样式设置。
uniapp 小程序使用watch ,请用vue3写法
06-02
下面是在uniapp小程序中使用Vue3的watch的示例代码： 1. 在组件或页面的setup函数中定义要监听的属性，例如： ``` import { ref, watch } from 'vue' export default { setup() { const message = ref('') ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值