AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

uniapp——商城购物车联动效果

2023-04-22 227
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 商城购物车联动效果

1、制作头部

552d9714568749c2a3cf298cb2d1dfe4.png

<!-- #ifdef MP -->
  <search-slot>
    <view class="left" slot="left">
    </view>
    <view class="center" slot="center">
    购物车
    </view>
    <view class="right" slot="right" A>
    <view v-if="isEdit">编辑</view>
    <view v-else>完成</view>
    </view>
  </search-slot>
  <!-- #endif -->

样式

.left {
    width: 100rpx;
    align-items: center;
    text-align: center;
  }
  .center {
    flex: 1;
    text-align: center;
  }
  .right {
    width: 100rpx;
    text-align: center;
  align-items: center;
  }

2、点击按钮完成和编辑进行切换

5cf03a71e47646b280a6086a2cc83428.pngc422f291e3af4de28b41462175053f14.png

给按钮传一个点击事件进行判断即可 

data() {
    return {
    isEdit:true,
    }
  },
    tab(){
    this.isEdit = !this.isEdit
    }

3、编辑底部合计部分随着编辑一同显示

91fabb97ac724a58abb34d6a93d62b78.png

e78cccb43a0a4b6e80d58757e5c2e79c.png

<template v-if="isEdit">
    <view class="d-flex a-center position-fixed left-0 right-0 bottom-0 ju border-top border-light-secondary a-stretch"
    style="height: 100rpx;z-index: 100;">
    <label class="radio d-flex a-center j-center flex-shrink" style="width: 120rpx;">
      <radio color="#FD6801" ></radio>
    </label>
    <view class="flex-1 d-flex a-center j-center font-md">
      合计 <p-price>{{totalPrice}}</p-price>
    </view>
    <view class="flex-1 d-flex a-center j-center main-bg-color text-white font-md" hover-class="main-bg-hover-color">
      结算
    </view>
    </view>
  </template>

微信小程序中的hover-class属性

微信小程序中，可以用 hover-class 属性来指定元素的点击态效果。但是在在使用中要注意，大部分组件是不支持该属性的。

目前支持 hover-class 属性的组件有三个：view、button、navigator。

4、在完成页面中显示底部样式

0f98342c2875412ebf577e28054b5ccb.png

<template v-else>
    <view class="d-flex a-center position-fixed left-0 right-0 bottom-0 ju border-top border-light-secondary a-stretch"
    style="height: 100rpx;z-index: 100;">
    <label class="radio d-flex a-center j-center flex-shrink" style="width: 120rpx;" >
      <radio  color="#FD6801" ></radio>
    </label>
    <view class="flex-1 d-flex a-center j-center font-md main-bg-color text-white">
      移入收藏
    </view>
    <view 
      class="flex-1 d-flex a-center j-center bg-danger text-white font-md" 
      hover-class="main-bg-hover-color"
     >
      删除
    </view>
    </view>
  </template>

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在

#ifndef：if not defined 除了某平台均存在

%PLATFORM%：平台名称

条件编译写法 说明

#ifdef APP-PLUS

需条件编译的代码

#endif

仅出现在 App 平台下的代码

#ifndef H5

需条件编译的代码

#endif

除了 H5 平台，其它平台均存在的代码

#ifdef H5 || MP-WEIXIN

需条件编译的代码

#endif

在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）

%PLATFORM% 可取值如下：

值 生效条件

VUE3 HBuilderX 3.2.0+ 详情

APP-PLUS App

APP-PLUS-NVUE或APP-NVUE App nvue

H5 H5

MP-WEIXIN 微信小程序

MP-ALIPAY 支付宝小程序

MP-BAIDU 百度小程序

MP-TOUTIAO 字节跳动小程序

MP-LARK 飞书小程序

MP-QQ QQ小程序

MP-KUAISHOU 快手小程序

MP-360 360小程序

MP 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序

QUICKAPP-WEBVIEW 快应用通用(包含联盟、华为)

QUICKAPP-WEBVIEW-UNION 快应用联盟

QUICKAPP-WEBVIEW-HUAWEI 快应用华为

基本样式完成后接下来用vuex来写数据

uniapp中自带vuex所以无需再安装，直接调用即可

创建一个store文件夹里面存放index.js，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import cart from './modules/cart.js'
let store = new Vuex.Store({
  modules:{
  cart
  }
})
export default store

在main.js中引入

f525aab2b46a4cafaf871ada63b03e1f.png

在store文件夹中再新建一个modules文件里面包裹一个cart.js

state中填入list列表

list: [ {
    checked: false,
    id: 11,
    title: "商品标题111",
    cover: "/static/images/demo/list/1.jpg",
    // 选中商品属性
    attrs: [{
      title: "颜色",
      selected: 0,
      list: [{
        name: '火焰红',
      },
      {
        name: '炭黑',
      },
      {
        name: '冰川兰',
      }
      ]
    },
    {
      title: "容量",
      selected: 0,
      list: [{
        name: '64GB',
      },
      {
        name: '128GB',
      },
      ]
    },
    {
      title: "套餐",
      selected: 0,
      list: [{
        name: '标配',
      },
      {
        name: '套餐一',
      },
      {
        name: '套餐二',
      }
      ]
    },
    ],
    pprice: 336,
    num: 1,
    minnum: 1,
    maxnum: 10, // 该商品最大商品数，跟库存有关
  },
  {
    checked: false,
    id: 12,
    title: "商品222",
    cover: "/static/images/demo/list/1.jpg",
    // 选中商品属性
    attrs: [{
      title: "颜色",
      selected: 0,
      list: [{
        name: '火焰红',
      },
      {
        name: '炭黑',
      },
      {
        name: '冰川兰',
      }
      ]
    },
    {
      title: "容量",
      selected: 0,
      list: [{
        name: '64GB',
      },
      {
        name: '128GB',
      },
      ]
    },
    {
      title: "套餐",
      selected: 0,
      list: [{
        name: '标配',
      },
      {
        name: '套餐一',
      },
      {
        name: '套餐二',
      }
      ]
    },
    ],
    pprice: 200,
    num: 1,
    minnum: 1,
    maxnum: 10, // 该商品最大商品数，跟库存有关
  },
  {
    checked: false,
    id: 13,
    title: "商品标题333",
    cover: "/static/images/demo/list/1.jpg",
    // 选中商品属性
    attrs: [{
      title: "颜色",
      selected: 0,
      list: [{
        name: '火焰红',
      },
      {
        name: '炭黑',
      },
      {
        name: '冰川兰',
      }
      ]
    },
    {
      title: "容量",
      selected: 0,
      list: [{
        name: '64GB',
      },
      {
        name: '128GB',
      },
      ]
    },
    {
      title: "套餐",
      selected: 0,
      list: [{
        name: '标配',
      },
      {
        name: '套餐一',
      },
      {
        name: '套餐二',
      }
      ]
    },
    ],
    pprice: 100,
    num: 2,
    minnum: 1,
    maxnum: 10, // 该商品最大商品数，跟库存有关
  } 
  ],
  selectedAll:[]//储存选中数据

也可以单独这么写：

// 页面路径：store/index.js 
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex); //vue的插件机制
//Vuex.Store 构造器选项
const store = new Vuex.Store({
  state: {
  list: [{
    checked: false, //按钮状态
    id: 11, // id用来区分每个不同的按钮
    title: "商品标题111",
    cover: "/static/images/demo/list/1.jpg",
    // 选中商品属性
    attrs: [{
      title: "颜色",
      selected: 0, // 选中的第几个，默认从0开始
      list: [{
        name: '火焰红',
        },
        {
        name: '炭黑',
        },
        {
        name: '冰川兰',
        }
      ]
      },
      {
      title: "容量",
      selected: 0,
      list: [{
        name: '64GB',
        },
        {
        name: '128GB',
        },
      ]
      },
      {
      title: "套餐",
      selected: 0, //选中状态
      list: [{
        name: '标配',
        },
        {
        name: '套餐一',
        },
        {
        name: '套餐二',
        }
      ]
      },
    ],
    pprice: 336, //商品价格
    num: 1, // 初始值
    minnum: 1, // 按钮最大值
    maxnum: 10, // 该商品最大商品数，跟库存有关
    },
    {
    checked: false,
    id: 12,
    title: "商品222",
    cover: "/static/images/demo/list/1.jpg",
    // 选中商品属性
    attrs: [{
      title: "颜色",
      selected: 0,
      list: [{
        name: '火焰红',
        },
        {
        name: '炭黑',
        },
        {
        name: '冰川兰',
        }
      ]
      },
      {
      title: "容量",
      selected: 0,
      list: [{
        name: '64GB',
        },
        {
        name: '128GB',
        },
      ]
      },
      {
      title: "套餐",
      selected: 0,
      list: [{
        name: '标配',
        },
        {
        name: '套餐一',
        },
        {
        name: '套餐二',
        }
      ]
      },
    ],
    pprice: 200,
    num: 1,
    minnum: 1,
    maxnum: 10, // 该商品最大商品数，跟库存有关
    },
    {
    checked: false,
    id: 13,
    title: "商品标题333",
    cover: "/static/images/demo/list/1.jpg",
    // 选中商品属性
    attrs: [{
      title: "颜色",
      selected: 0,
      list: [{
        name: '火焰红',
        },
        {
        name: '炭黑',
        },
        {
        name: '冰川兰',
        }
      ]
      },
      {
      title: "容量",
      selected: 0,
      list: [{
        name: '64GB',
        },
        {
        name: '128GB',
        },
      ]
      },
      {
      title: "套餐",
      selected: 0,
      list: [{
        name: '标配',
        },
        {
        name: '套餐一',
        },
        {
        name: '套餐二',
        }
      ]
      },
    ],
    pprice: 100,
    num: 2,
    minnum: 1,
    maxnum: 5, // 该商品最大商品数，跟库存有关
    }
  ],
  selectedAll: [] //储存选中数据
  },
  getters: {
  // 购物车为空时出现购物车图标
  disSelect(state) {
    return state.list.length === 0;
  },
  //全部选中
  checkedAll(state) {
    return state.list.length === state.selectedAll.length
  },
  //计算总价
  totalPrice(state) {
    let total = 0
    state.list.forEach(v => {
    /* if(state.selectedAll.indexOf(v.id)!=-1){
      total += v.pprice * v.num
    } */
    console.log(v.num);
    if (v.checked) {
      total += v.pprice * v.num
    }
    })
    return total
  },
  //合计按钮不可用状态
  disabled(state) {
    if (state.list.length === 0) {
    state.list.checked = false
    return true
    }
  }
  },
  mutations: {
  //单选按钮
  selectItem(state, index) {
    var id = state.list[index].id
    var i = state.selectedAll.indexOf(id)
    if (i > -1) {
    // 取消当前商品选中状态
    state.list[index].checked = false
    // 移除选中列表中的当前商品
    return state.selectedAll.splice(i, 1)
    }
    // 选中
    state.list[index].checked = true
    state.selectedAll.push(id)
    console.log(state.selectedAll);
  },
  //全选
  selectAll(state) {
    state.selectedAll = []
    state.list.map(v => {
    v.checked = true
    state.selectedAll.push(v.id)
    })
    /* state.selectedAll = state.list.map(v=>{
        v.checked = true
      return v.id
      }) */
  },
  //全不选
  noselectAll(state) {
    state.list.map(v => {
    v.checked = false
    })
    state.selectedAll = []
  },
  //删除商品
  delgoods(state) {
    uni.showModal({
    content: '您确定要删除吗',
    success: () => {
      // commit('delgoods')
      state.list = state.list.filter(v => {
      console.log(state.selectedAll.indexOf(v.id) === -1);
      return state.selectedAll.indexOf(v.id) === -1
      })
      state.selectedAll = [] //清空id
    },
    fail: (err) => {
      console.log(err);
    }
    })
  }
  },
  actions: {
  doselectAll({
    getters,
    commit
  }) {
    // 传getters中的状态，如果全选按钮是开启的那么就返回全不选，否则就在跳回全选
    getters.checkedAll ? commit('noselectAll') : commit('selectAll')
  },
  }
})
export default store

数据基本完成，完成后再写个购物车为空的页面，如果没有获取到数据，那么购物车就显示空

<template v-if="disSelect">
    <view class="py-5 d-flex a-center j-center bg-white">
    <view class="iconfont icon-gouwuche text-light-muted" style="font-size: 50rpx;"></view>
    <text class="text-light-muted mx-2">购物车还是为空</text>
    <view class="px-2 py-1 border border-light-secondary rounded" hover-class="bg-light-secondary">
      去逛逛
    </view>
    </view>
  </template>

用计算属性引入

getters: {
  // 购物车为空时出现暂无数据购物车图标
  disSelect(state){
    return state.list.length === 0
  }
  },

在页面用计算属性让其显示list列表

computed: {
    ...mapState({
    list: (state) => state.list
    }),
    // 在这里引入
    ...mapGetters(['disSelect'])
  }

464f855c15014b43826b477a56a9cc1a.png

0cc6097c9e264282a0a04c146a28d741.png

46260df2be024e17ac11c0658c0f6a24.png

d89e5318ef604cf2a67a48e9c7896723.png

879ccdf8208f4314b3fde591ebd3e106.png

全部选中：

54e85485c0e3448fb763e433e7c3f94f.png

ea2fb6d9affe4a7ba4ce6d9df4a96b42.png

4eb16657c2344077ae55da394b655f71.png

计算总价：

9553ea3881a34b7dac5e98ea2eea0c2f.png

508d6394bdbf46f1afa749ce4587d3c1.png

按钮出现不可选中状态

1ea43b2f880d4a54a365125eae3f77d4.png

bd0be6cf67fe4cf79f6fc6e6096d7ce2.png

6eb7afc4d951463fbe03298831eba8bb.png

单选按钮

957a353bbb544c65ac34013ac1aaaf8d.png

cb7a1efe2ea846b89af8884f481454c6.png

dbf2f6286e6546d69de92b2810b35aa5.png

全选

905d3e48b4dc42cabe64f26da7d7b0f5.png

全不选

720de1d82c2b4682985c2aba476be4f1.png

删除

611f0d5f197849bbb890af1040da3449.png

e265341a2fee4968b1db89c1d7afaf94.png

b17e31d5858e474b84f9678c2f2e7f85.png

异步接收方法

5f858d9b8f2e467ba858f6f87cad0ab0.png

7669bec06e674f49b7efa10a49b08af6.png

82007003ddf14db39df451044bbae975.png

文章标签：
移动开发
小程序
SouthernWind
目录
相关文章
diygwcom
|
2月前
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
diygwcom
53 1
diygwcom
|
2月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
diygwcom
31 0
八音盒coding
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的“涛宝”大学生二手物品交易商城的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的“涛宝”大学生二手物品交易商城的详细设计和实现(源码+lw+部署文档+讲解等)
八音盒coding
176 3
八音盒coding
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的我爱我家”地方特色农产品商城的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的我爱我家”地方特色农产品商城的详细设计和实现(源码+lw+部署文档+讲解等)
八音盒coding
58 2
八音盒coding
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物店商城小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物店商城小程序的详细设计和实现(源码+lw+部署文档+讲解等)
八音盒coding
174 1
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的智能小程序商城附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的智能小程序商城附带文章源码部署视频讲解等
wishCoding
33 3
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的华为数码商城交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的华为数码商城交易平台附带文章源码部署视频讲解等
wishCoding
32 2
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的农产品商城附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的农产品商城附带文章源码部署视频讲解等
wishCoding
29 1
疯狂的猿
|
5月前
|
移动开发 前端开发 应用服务中间件
挂售转卖竞拍商城系统源码/竞拍系统/转拍闪拍系统/后端PHP+前端UNiapp源码
挂售转卖竞拍商城系统源码/竞拍系统/转拍闪拍系统/后端PHP+前端UNiapp源码 亲测可用
疯狂的猿
130 1
八音盒coding
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的微信小程序线上教育商城的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信小程序线上教育商城的详细设计和实现(源码+lw+部署文档+讲解等)
八音盒coding
60 1

热门文章

最新文章

  • 1
    【笔记01】在 uniapp 安装 uview-ui
  • 2
    UniApp 解决 Error: Cannot find module ‘webpack/lib/RuleSet‘
  • 3
    小程序-uniApp：区域滚动、下拉刷新、上拉加载更多
  • 4
    uniapp生成钉钉小程序梳理（整理）
  • 5
    uniapp,小程序或APP的底部弹出的滚动选择组件picker，三级联动，选择地址。
  • 6
    uniapp android 打包报错：Execution failed for task ‘:app:checkReleaseDuplicateClasses‘.
  • 7
    uniapp使用Vue3挂载函数到全局
  • 8
    uniapp checkbox 怎么判断是否选中
  • 9
    uniapp中的uview组件库丰富的Form 表单用法
  • 10
    uniapp组件库中Collapse 折叠面板 的使用方法
  • 1
    【Uniapp 专栏】从案例看 Uniapp 在物联网应用中的运用
    353
  • 2
    【Uniapp 专栏】Uniapp 打造的音乐类应用案例剖析
    110
  • 3
    【Uniapp 专栏】通过 Uniapp 构建移动办公应用案例分享
    148
  • 4
    【Uniapp 专栏】Uniapp 在社交应用开发中的案例研究
    113
  • 5
    【Uniapp 专栏】基于 Uniapp 的电商应用开发案例解析
    202
  • 6
    【Uniapp 专栏】Uniapp 与后端接口对接的实战要点
    669
  • 7
    【Uniapp 专栏】在 Uniapp 中实现复杂交互的实战技巧
    121
  • 8
    【Uniapp 专栏】Uniapp 项目中路由管理的实战经验分享
    255
  • 9
    【Uniapp 专栏】实用的 Uniapp 性能优化实战策略
    297
  • 10
    【Uniapp 专栏】Uniapp 开发实战：打造高效页面布局技巧
    379

    • 相关课程

    更多
  • 实时数据应用：实现淘宝母婴订单实时查询和可视化

    • 相关电子书

    更多
  • 爆款App小咖秀产品服务端架构设计分享
  • 爆款APP小咖秀产品服务端架构设计分享
  • 《淘宝推荐业务介绍》

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 快速搭建移动端可视化看板
  • 实现淘宝母婴订单实时查询和实时大屏
  • 收银台的场景化界面实践
  • 使用EDA架构部署在线外卖订单系统
  • 小试牛刀，一键部署电商商城
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月