wepy vue 小程序购物车实现方案

悠悠 2023-02-13 14:45 16阅读 0赞

## wepy vue 小程序购物车实现方案 ##

### 目录 ###

*   *  wepy vue 小程序购物车实现方案
     *   *  需求：购物车功能
         *  实现结果：如下图
         *  实现：两种方法
         *   *  简单介绍第1种：
             *  简单介绍第2种：
         *  代码：商品页和购物车页面
         *  代码：搜索页面

### 需求：购物车功能 ###

超市添加购物车，可在购物车、搜索页和商品页中添加删除

### 实现结果：如下图 ###

【效果图中数据都是模拟数据】  
![在这里插入图片描述][20200529170635434.gif]

### 实现：两种方法 ###

#### 简单介绍第1种： ####

每次添加删除都会遍历一遍购物车的数据（添加删除麻烦），这种方法购物车数据和商品数据结构一致。

let goodsList= [
    	{ goodsId: '123', goodsName: '苹果', goodsNumber: 0},
    	{ goodsId: '124', goodsName: '香蕉', goodsNumber: 0},
    	{ goodsId: '125', goodsName: '桃子', goodsNumber: 0}
    ];
    let cartList= []
    function addGoods(g, index) { 
        g.goodsNumber++
        filterGoods(g)
    }
    // 遍历商品列表
    function filterGoods(indexGoods){ 
        let isHave = false
        cartList.forEach((cartGoods, index) => { 
          if (cartGoods.goodsId == indexGoods.goodsId) { 
            // 如果减小到0 删除
            if (indexGoods.goodsNumber < 1) { 
              cartList.splice(index, 1)
            } else { 
              cartGoods.goodsNumber = indexGoods.goodsNumber
            }
            isHave = true
          }
        })
        if (!isHave) { 
          cartList.push(indexGoods)
        }
        isHave = false
    }
    // 模拟点击添加事件
    addGoods(goodsList[0], 0);
    addGoods(goodsList[1], 1);
    addGoods(goodsList[1], 1);
    
    console.log(cartList)
    /* [ {goodsId: "123", goodsName: "苹果", goodsNumber: 1} {goodsId: "124", goodsName: "香蕉", goodsNumber: 2} ] */

#### 简单介绍第2种： ####

还想到一种方法就是通过对象的方式将商品数据添加到购物车（无需进行遍历，添加删除方便）

let goodsList= [
    	{ goodsId: '123', goodsName: '苹果', goodsNumber: 0},
    	{ goodsId: '124', goodsName: '香蕉', goodsNumber: 0},
    	{ goodsId: '125', goodsName: '桃子', goodsNumber: 0}
    ];
    let cartList={ }
    function addGoods(aGoods){ 
        if (!!cartList[aGoods.goodsId]){ 
            // 购物车已存在
            cartList[aGoods.goodsId].goodsNumber++
        } else { 
            cartList[aGoods.goodsId] = aGoods
            cartList[aGoods.goodsId].goodsNumber++
        }
    }
    // 模拟点击添加事件
    addGoods(goodsList[0]);
    addGoods(goodsList[1]);
    
    console.log(cartList)
    /** cartList { 123: {goodsId: "123", goodsName: "苹果", goodsNumber: 1} 124: {goodsId: "124", goodsName: "香蕉", goodsNumber: 1} } */
    // 提交时，使用Object.values()方法，提取数据
    /** Object.values(cartList) [ {goodsId: "123", goodsName: "苹果", goodsNumber: "1"} {goodsId: "124", goodsName: "香蕉", goodsNumber: "1"} ] */

--------------------

分割 ------- 下面为所有代码

--------------------

### 代码：商品页和购物车页面 ###

下面代码包括 商品页和购物车页面

<style lang="less"> .goods-class{ display: flex; flex-direction: column; justify-content: space-between; .search { display: flex; flex-direction: row; height: 90rpx; background: #fff; align-items: center; border-bottom: 1px solid rgba(153, 153, 153, 0.5); box-sizing: border-box; .searchItem { display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 64rpx; background: #f4f4f4; color: #999999; font-size: 14px; flex-direction: row; border-radius: 50rpx; margin-right: 20rpx; margin-left: 20rpx; padding: 0 30rpx; image { height: 42rpx; width: 42rpx; align-self: center; margin-left: 10rpx; margin-right: 20rpx; } } } .select-cont{ position: absolute; bottom: 80rpx; top: 90rpx; left: 0; right: 0; .type-list{ float: left; width: 160rpx; height: 100%; background: #f4f4f4; overflow-y: auto; .goodsItem{ font-size: 14px; font-weight: 500; height: 120rpx; line-height: 120rpx; box-sizing: border-box; width: 100%; text-align: center; position: relative; color: #999999; } .currentGoods{ background: #fff; color: #333333; position: relative; font-weight: bold; } } .goods-list{ height: 100%; box-sizing: border-box; .top-tab-bar{ display: flex; background: #f4f4f4; font-size: 12px; padding: 0 10rpx; white-space: nowrap; overflow-x: auto; .good-t{ padding: 15rpx; color: #999999; } .good-t-c{ color: #333333; font-weight: bold; } } .good-bottom{ height: 100%; box-sizing: border-box; overflow-y: auto; padding-bottom: 70rpx; padding-top: 20rpx; .null-goods-tips{ color: #999999; text-align: center; padding-top: 30rpx; font-size: 14px; } .good-cont{ display: flex; justify-content: space-between; padding: 0 30rpx; height: 150rpx; margin-bottom: 20rpx; .left-cont{ display: flex; width: 100%; .goods-pic{ width: 150rpx; height: 150rpx; } .goods-detail{ padding-left: 40rpx; font-size: 12px; width: 100%; .goods-name{ height: 100rpx; line-height: 30rpx; } .goods-act{ height: 50rpx; display: flex; justify-content: space-between; .right-btn{ display: flex; width: 140rpx; justify-content: flex-end; .number-text{ width: 50rpx; text-align: center;font-size: 26rpx} .add-btn{ height: 40rpx;width: 40rpx} } } } } } } } } .bottom-cont{ border-top: 1px solid rgba(153, 153, 153, 0.5); height: 80rpx; line-height: 80rpx; position: fixed; bottom: 0; width: 100%; z-index: 66; background: #ffffff; .bottom-left{ width: 75%; height: 80rpx; float: left; .cart-img{ height: 85rpx; width: 85rpx; position: absolute; top: -25rpx; left: 25rpx; } .goods-num{ height: 30rpx; width: 30rpx; line-height: 30rpx; text-align: center; position: absolute; top: -20rpx; left: 80rpx; background: #3c783c; color: #ffffff; border-radius: 15rpx; font-size: 22rpx; } .cart-tips{ margin-left: 140rpx; float: left; font-size: 26rpx; color: #999999; } .cart-tips-money{ color: #000; font-size: 28rpx; display: flex; .money-tips{ font-size: 10px; color: #aaaaaa; padding-left: 10rpx; } } } .cart-btn{ float: right; width: 180rpx; text-align: center; background: #47B353; color: #ffffff; } } } .cart-title-cont{ display: flex; justify-content: space-between; align-items: center; height: 80rpx; padding: 0 30rpx; .cart-title{ } .cart-clear{ color: #999999; font-size: 12px; display: flex; align-items: center; .clear-icon{ width: 16px; height: 16px; margin-right: 10rpx; } } } .cart-cont{ background-color: #f5f5f5; height: 620rpx; overflow: hidden; .cart-cont-t{ overflow: auto; height: 100%; padding: 20rpx; box-sizing: border-box; .good-cont{ display: flex; justify-content: space-between; align-items: center; padding: 20rpx 30rpx; margin-bottom: 20rpx; height: 120rpx; background-color: white; .left-cont{ display: flex; width: 100%; .goods-pic{ width: 120rpx; height: 120rpx; } .goods-detail{ padding-left: 40rpx; font-size: 12px; width: 100%; .goods-name{ height: 80rpx; line-height: 40rpx; } .goods-act{ height: 40rpx; display: flex; justify-content: space-between; .right-btn{ display: flex; width: 140rpx; justify-content: flex-end; .number-text{ width: 50rpx; text-align: center;font-size: 26rpx} .add-btn{ height: 40rpx;width: 40rpx} } } } } } } .null-tips{ color: #999999; text-align: center; } } </style>
    <template>
      <view class="goods-class">
        <wxs module="filters" src="../utils/utils.wxs"></wxs>
        <view class="search">
          <view class="searchItem" @tap="toSearch">
            <image src="../static/icon/icon-search.png" />
            搜索商品
          </view>
        </view>
        <view class="select-cont">
          <view class="type-list">
            <view class="goodsItem" v-for="item in category1Type" :key="item.category1Id" :class="{ 'currentGoods': currentCategory1Id === item.category1Id}" @tap="selectCategory1Type(item)" >{
       {item.category1Name}}</view>
          </view>
          <view class="goods-list">
            <view class="top-tab-bar">
              <view class="good-t" :class="{ 'good-t-c': currentCategory2Type == ''}" @tap="selectCategory2Type('')" >全部</view>
              <view class="good-t" v-for="s in category2Type" :key="s.category2Id" :class="{ 'good-t-c': currentCategory2Type === s.category2Id}" @tap="selectCategory2Type(s.category2Id)" >{
       {s.category2Name}}</view>
            </view>
            <view class="good-bottom">
              <view v-if="goodsList.length == 0" class="null-goods-tips">
                暂无商品
              </view>
              <view v-else>
                <view v-for="(g, index) in goodsList" :key="g.goodsId" class="good-cont" >
                  <view class="left-cont">
                    <view><image class="goods-pic" src="../static/img80.png"/></view>
                    <view class="goods-detail">
                      <view class="goods-name">{
       {g.goodsName}}</view>
                      <view class="goods-act">
                        <view class="goods-price">￥{
       {filters.toFix(g.goodsPrice)}}</view>
                        <view class="right-btn">
                          <image class="add-btn" v-if="g.goodsNum > 0" src="../static/icon/icon-decrease.png" @tap="decreaseGoods(g, index)"/>
                          <view class="number-text" v-if="g.goodsNum > 0">{
       {g.goodsNum || 0}}</view>
                          <image class="add-btn" src="../static/icon/icon-add.png" @tap="addGoods(g, index)"/>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="bottom-cont">
          <view @tap="cartPicker = !cartPicker" class="bottom-left">
            <image class="cart-img" v-show="totalGoodsNum === 0" src="../static/icon/icon-cart.png"/>
            <image class="cart-img" v-show="totalGoodsNum > 0" src="../static/icon/icon-cart-ed.png"/>
            <view class="goods-num" v-show="totalGoodsNum > 0">{
       {totalGoodsNum}}</view>
            <view class="cart-tips" v-if="totalGoodsNum === 0">购物车是空的</view>
            <view class="cart-tips cart-tips-money" v-if="totalGoodsNum > 0">￥{
       {filters.toFix(totalMoney)}}<view class="money-tips">(总价不满69需配送费5元)</view></view>
          </view>
          <view class="cart-btn" @tap="toPay">去结算</view>
        </view>
        <picker v-if="cartPicker" @closePop="cartPicker = false">
          <view class="cart-title-cont">
            <view class="cart-title">已选商品</view>
            <view class="cart-clear" @tap="clearAllCart"><image src="../static/icon/icon-clearall.png" class="clear-icon"/>清空</view>
          </view>
          <view class="cart-cont">
            <view class="cart-cont-t" v-if="totalGoodsNum > 0">
              <view v-for="(g, index) in goodsList" :key="g.goodsId" class="good-cont" v-if="g.goodsNum > 0" >
                <view class="left-cont">
                  <view><image class="goods-pic" src="../static/img80.png"/></view>
                  <view class="goods-detail">
                    <view class="goods-name">{
       {g.goodsName}}</view>
                    <view class="goods-act">
                      <view class="goods-price">￥{
       {filters.toFix(g.goodsPrice)}}</view>
                      <view class="right-btn">
                        <image class="add-btn" v-if="g.goodsNum > 0" src="../static/icon/icon-decrease.png" @tap="decreaseGoods(g, index)"/>
                        <view class="number-text" v-if="g.goodsNum > 0">{
       {g.goodsNum || 0}}</view>
                        <image class="add-btn" src="../static/icon/icon-add.png" @tap="addGoods(g, index)"/>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="cart-cont-t null-tips" v-if="totalGoodsNum < 1">购物车为空</view>
          </view>
        </picker>
      </view>
    </template>
    
    <script> import wepy from '@wepy/core' import store from '../store'; import { mapState, mapActions } from '@wepy/x'; import Api from '../utils/api' wepy.page({ store, data: { // 一级 category1Type: [], // 当前一级菜单 currentCategory1Id: '', goodsList: [ { goodsId: '12301', goodsPrice: 12.20, goodsName: '苹果', goodsNum: 0}, { goodsId: '12302', goodsPrice: 10.01, goodsName: '梨1', goodsNum: 0}, { goodsId: '12303', goodsPrice: 10.01, goodsName: '葡0', goodsNum: 0}, { goodsId: '12304', goodsPrice: 10.01, goodsName: '梨2', goodsNum: 0}, { goodsId: '12305', goodsPrice: 10.01, goodsName: '梨3', goodsNum: 0}, { goodsId: '12306', goodsPrice: 10.01, goodsName: '梨4', goodsNum: 0}, { goodsId: '12307', goodsPrice: 10.01, goodsName: '梨5', goodsNum: 0}, { goodsId: '12308', goodsPrice: 10.01, goodsName: '梨6', goodsNum: 0}, { goodsId: '12309', goodsPrice: 10.01, goodsName: '梨7', goodsNum: 0}, { goodsId: '12310', goodsPrice: 10.01, goodsName: '梨8', goodsNum: 0}, { goodsId: '12311', goodsPrice: 2.00, goodsName: '香蕉', goodsNum: 0} ], //二级菜单 category2Type: [], currentCategory2Type: '', totalMoney: 0, totalGoodsNum: 0, cartPicker: false, aShopCartList: [] }, computed: { ...mapState(['shopCartList']) }, methods: { // 一级菜单 selectCategory1Type(item) { console.log(item); this.currentCategory1Id = item.category1Id this.currentCategory2Id = '' this.apiGetGoodsList() // 赋值二级菜单 if (item.children){ this.category2Type = item.children } else { this.category2Type = [] } }, // 改变二级菜单 selectCategory2Type(category2Id = '') { this.currentCategory2Type = category2Id this.apiGetGoodsList() }, addGoods (g, index) { this.goodsList[index].goodsNum++ this.totalGoodsNum++ this.totalMoney += g.goodsPrice let good = g good.goodsNum++ this.filterGoods(good) }, decreaseGoods (g, index) { this.goodsList[index].goodsNum--; this.totalGoodsNum-- this.totalMoney -= g.goodsPrice let good = g good.goodsNum-- this.filterGoods(good) }, // 遍历数据 提交购物车 filterGoods(indexGoods) { let isHave = false this.aShopCartList.forEach((cartGoods, index) => { if (cartGoods.goodsId == indexGoods.goodsId) { if (indexGoods.goodsNum < 1) { this.aShopCartList.splice(index, 1) } else { cartGoods.goodsNum = indexGoods.goodsNum } isHave = true } }) if (!isHave) { this.aShopCartList.push(indexGoods) } isHave = false this.$store.dispatch('handleShopCartList', { shopCartList: this.aShopCartList}) this.$store.dispatch('handleTotalMoney', this.totalMoney) }, // 去支付 toPay() { if (this.totalGoodsNum < 1) { wx.showToast({ title: '购物车为空', icon: 'none', duration: 2000 }) } else { wx.navigateTo({ url: 'commitOrder' }) } }, // 跳转搜索页面 toSearch() { wx.navigateTo({ url: 'search' }) }, // 清空购物车 clearAllCart () { this.goodsList.forEach(g => { g.goodsNum = 0 }) this.totalGoodsNum = 0 this.totalMoney = 0 this.$store.dispatch('handleShopCartList', { shopCartList: []}) this.$store.dispatch('handleTotalMoney', 0) this.cartPicker = false }, // 获取商品种类 apiGetcategoryList () { Api.getCategoryList({ }).then(res => { let d = res.data console.log(d); if (d.code == 0) { this.category1Type = d.data.list this.currentCategory1Id = this.category1Type[0].category1Id this.category2Type = d.data.list[0].children this.currentCategory2Id = '' wx.hideLoading() this.apiGetGoodsList() } }) }, // 获取商品列表 apiGetGoodsList(category1Id = this.currentCategory1Id, category2Id = this.currentCategory2Type){ Api.getGoodsList({ query: { category1Id: category1Id, category2Id: category2Id } }).then(res => { console.log(res); // this.goodsList = res.data.data.list // this.filterCartList() }) }, // 遍历购物车数据，显示商品列表数量 filterCartList () { // 初始化购物车数据 总金额 this.totalMoney = 0 this.totalGoodsNum = 0 if(this.shopCartList.length > 0) { this.aShopCartList = this.shopCartList this.shopCartList.map(cartGoods => { this.totalGoodsNum += cartGoods.goodsNum this.totalMoney += cartGoods.goodsPrice * cartGoods.goodsNum this.goodsList.forEach(goods => { if (cartGoods.goodsId == goods.goodsId) { goods.goodsNum = cartGoods.goodsNum } }) }) this.$store.dispatch('handleTotalMoney', this.totalMoney) } } }, onShow() { this.filterCartList() }, created() { // 获取商品分类列表 wx.showLoading({ title: '加载中', mask: true }) this.apiGetcategoryList() wx.showShareMenu({ withShareTicket: true }) } }) </script>
    <config>
      {
        navigationBarTitleText: '商品分类',
        enablePullDownRefresh: false,
        disableScroll: true,
        usingComponents: {
          picker: '../components/picker'
        }
      }
    </config>

### 代码：搜索页面 ###

<style lang="less"> .search { display: flex; flex-direction: row; height: 98rpx; background: #fff; align-items: center; .searchItem { display: flex; width: 100%; background: #f6f6f6; flex-direction: row; border-radius: 40rpx; margin-right: 20rpx; margin-left: 20rpx; padding: 15rpx; image { height: 42rpx; width: 42rpx; align-self: center; margin-left: 10rpx; margin-right: 20rpx; } input { flex: 1; font-size: 30rpx; } } } .tag-title{ font-size: 30rpx; padding: 30rpx 30rpx 0; color: #999999; } .tag-cont{ padding: 0 30rpx; display: flex; flex-wrap: wrap; color: #999999; .tag-v{ padding: 5rpx 20rpx; margin: 20rpx 20rpx 0 0; background-color: #f6f6f6; border-radius: 30rpx; } } .search-good-list{ .good-cont{ display: flex; justify-content: space-between; align-items: center; padding: 20rpx; height: 100rpx; .left-cont{ display: flex; .goods-pic{ width: 100rpx; height: 100rpx; } .goods-detail{ padding-left: 40rpx; font-size: 26rpx; line-height: 50rpx; } } .right-btn{ display: flex; width: 160rpx; justify-content: flex-end; .number-text{ width: 50rpx; text-align: center;font-size: 26rpx} .add-btn{ height: 42rpx;width: 42rpx} } } } .no-good-list{ text-align: center; margin: 20rpx; color: #999999; } </style>
    <template>
      <view>
        <wxs module="filters" src="../utils/utils.wxs"></wxs>
        <view class="search">
          <view class="searchItem">
            <image src="../static/icon/icon-search.png" />
            <input placeholder="搜索商品" auto-focus v-model="keyword" @confirm="toSearch(keyword)"/>
          </view>
        </view>
        <view class="tag-title" v-if="showTags">热门搜索</view>
        <view class="tag-cont" v-if="showTags">
          <view class="tag-v" v-for="tag in tags" :key="tag" @tap="toSearch(tag)" >{
       {tag}}</view>
        </view>
        <view class="search-good-list" v-if="!showTags && goodsList.length > 0">
          <view v-for="(g, index) in goodsList" :key="g.goodsId" class="good-cont" >
            <view class="left-cont">
              <image class="goods-pic" src="../static/img80.png"/>
              <view class="goods-detail">
                <view>{
       {g.goodsName}}</view>
                <view>￥{
       {filters.toFix(g.goodsPrice)}}</view>
              </view>
            </view>
            <view class="right-btn">
              <image class="add-btn" v-if="g.goodsNum > 0" src="../static/icon/icon-decrease.png" @tap="decreaseGoods(g, index)"/>
              <view class="number-text" v-if="g.goodsNum > 0">{
       {g.goodsNum || 0}}</view>
              <image class="add-btn" src="../static/icon/icon-add.png" @tap="addGoods(g, index)"/>
            </view>
          </view>
        </view>
        <view class="no-good-list" v-if="!showTags && goodsList.length == 0">
          无数据
        </view>
      </view>
    </template>
    <script> import wepy from '@wepy/core' import store from '../store'; import { mapState } from '@wepy/x'; wepy.page({ store, computed: { ...mapState(['shopCartList']) }, data: { keyword: '', tags: ['苹果', '方便面', '酸奶', '雪糕', '纯牛奶', '梨'], goodsList: [ { goodsId: '12301', goodsPrice: 12.20, goodsName: '苹果', goodsNum: 0}, { goodsId: '12302', goodsPrice: 10.01, goodsName: '梨', goodsNum: 0}, { goodsId: '12303', goodsPrice: 10.01, goodsName: '葡萄', goodsNum: 0}, { goodsId: '12304', goodsPrice: 10.01, goodsName: '梨', goodsNum: 0} ], showTags: true, totalMoney: 0, aShopCartList: [] }, methods: { toSearch(k){ this.keyword = k; this.aShopCartList = [] this.showTags = false // 请求搜索接口 - 如果length>0 遍历购物车 this.filterCartList() }, addGoods (g, index) { this.goodsList[index].goodsNum++ this.totalMoney += g.goodsPrice let good = g good.goodsNum++ this.filterGoods(good) }, decreaseGoods (g, index) { this.goodsList[index].goodsNum--; this.totalMoney -= g.goodsPrice let good = g good.goodsNum-- this.filterGoods(good) }, // 遍历数据 提交购物车 filterGoods(indexGoods) { let isHave = false this.aShopCartList.forEach((cartGoods, index) => { if (cartGoods.goodsId == indexGoods.goodsId) { if (indexGoods.goodsNum < 1) { this.aShopCartList.splice(index, 1) } else { cartGoods.goodsNum = indexGoods.goodsNum } isHave = true } }) if (!isHave) { this.aShopCartList.push(indexGoods) } isHave = false this.$store.dispatch('handleShopCartList', { shopCartList: this.aShopCartList}) this.$store.dispatch('handleTotalMoney', this.totalMoney) }, // 遍历购物车数据，显示商品列表数量 filterCartList () { // 初始化购物车数据 总金额 if(this.shopCartList.length > 0) { this.aShopCartList = this.shopCartList this.shopCartList.map(cartGoods => { this.goodsList.forEach(goods => { if (cartGoods.goodsId == goods.goodsId) { goods.goodsNum = cartGoods.goodsNum } }) }) this.$store.dispatch('handleTotalMoney', this.totalMoney) } } }, onLoad (query) { // 请求热搜接口 } }) </script>
    <config>
      {
        navigationBarTitleText: '搜索',
        enablePullDownRefresh: false
      }
    </config>

[20200529170635434.gif]: https://img-blog.csdnimg.cn/20200529170635434.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序购物车实现

前言以往的购物车，基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像，接下来就看看小程序可以怎样实现购物车功能。需求 !...

ゞ浴缸里的玫瑰/ 2024年04月18日 19:56/ 0 赞/ 111 阅读

相关 12.小程序-购物车

数据库连表查询 json-server 连接数据中的表 localhost:3000/carts?_expand=good --> 当前购物车商品的详情信

- 日理万妓/ 2023年02月17日 11:10/ 0 赞/ 48 阅读

相关 wepy vue 小程序购物车实现方案

wepy vue 小程序购物车实现方案目录 wepy vue 小程序购物车实现方案需求：购物车功能实现结

悠悠/ 2023年02月13日 14:45/ 0 赞/ 17 阅读

相关 vue+antd实现购物车

使用：vue框架+antd第三方组件 <template> <div class="shopping-card"> <div c

- 日理万妓/ 2022年12月27日 02:19/ 0 赞/ 428 阅读

相关小程序购物车的实现

wxml:  <block wx:for="{ {list}}" wx:key="index">

深藏阁楼爱情的钟/ 2022年10月27日 13:48/ 0 赞/ 252 阅读

相关微信小程序实现购物车功能

在我的GitHub上有校园二手交易微信小程序的源码，这里面包含了购物车的功能，GitHub地址：[https://github.com/zhuyuzhu/Secondhand

比眉伴天荒/ 2022年05月14日 13:23/ 0 赞/ 451 阅读

相关 vue 实现购物车

![在这里插入图片描述][20181216124512128.png] <template> <div> <div class="shop

一时失言乱红尘/ 2022年04月04日 09:47/ 0 赞/ 469 阅读

相关 Python购物车小程序

问题描述：商店有一系列商品，给出购买序列，然后输入你的金额，然后选择要购买的商品序号或是退出，如果持续购买余额不足则提醒用户余额不足，然后如果用户退出则打印用户购买的商品列

柔情只为你懂/ 2022年03月15日 13:54/ 0 赞/ 346 阅读

相关 vue 简单购物车实现

购物车数据来源与store <template> <div class="home"> <table class="table1"> <tr> <th>序号

Love The Way You Lie/ 2021年11月14日 11:56/ 0 赞/ 488 阅读

相关 vue基础小案例——购物车

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8

秒速五厘米/ 2021年10月26日 13:32/ 0 赞/ 456 阅读