繁依Fanyi0

这个屌丝很懒，什么也没留下！

热门标签

uni-app开发小程序,笔记记录7 加入购物车_小程序加入购物车代码

作者：繁依Fanyi0 | 2024-05-01 04:57:15

踩

小程序加入购物车代码

学习地址
零基础玩转微信小程序：黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)
uniapp - 黑马优购笔记地址

知识点
1 使用vuex
1 创建 store 文件夹
2 创建 store.js
在这里插入图片描述

// 1. 导入 Vue 和 Vuex
// import Vue from 'vue'  vue3 不需要
import Vuex from 'vuex'

// 2. 将 Vuex 安装为 Vue 的插件 vue3 不需要
// Vue.use(Vuex)

// 3. 创建 Store 的实例对象
const store = new Vuex.Store({
  // TODO：挂载 store 模块
  modules: {},
})

// 4. 向外共享 Store 的实例对象
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在 main.js 中导入 store 实例对象并挂载到 Vue 的实例上：

// 1. 导入 store 的实例对象
import store from './store/store.js'

// 省略其它代码...

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  // 2. 将 store 挂载到 Vue 实例上
  app.use(store)
  return {
    app
  }
}
// #endif

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

创建购物车的 store 模块
在这里插入图片描述

export default {
  // 为当前模块开启命名空间
  namespaced: true,

  // 模块的 state 数据
  state: () => ({
    // 购物车的数组，用来存储购物车中每个商品的信息对象
    // 每个商品的信息对象，都包含如下 6 个属性：
    // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
    cart: [],
  }),

  // 模块的 mutations 方法
  mutations: {},

  // 模块的 getters 属性
  getters: {},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在 store/store.js 模块中，导入并挂载购物车的 vuex 模块，示例代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
// 1. 导入购物车的 vuex 模块
import moduleCart from './cart.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  // TODO：挂载 store 模块
  modules: {
    // 2. 挂载购物车的 vuex 模块，模块内成员的访问路径被调整为 m_cart，例如：
    //    购物车模块中 cart 数组的访问路径是 m_cart/cart
    m_cart: moduleCart,
  },
})

export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在 store/store.js 模块中，导入并挂载购物车的 vuex 模块，示例代码如下：

// 1. 导入 Vue 和 Vuex
// import Vue from 'vue'  vue3 不需要
import Vuex from 'vuex'

// 1 导入购物车的vuex模块
import moduleCart from './cart.js' 

// 2. 将 Vuex 安装为 Vue 的插件 vue3 不需要
// Vue.use(Vuex)


// 3. 创建 Store 的实例对象
const store = new Vuex.Store({
  // TODO：挂载 store 模块
    modules: {
      // 2. 挂载购物车的 vuex 模块，模块内成员的访问路径被调整为 m_cart，例如：
      //    购物车模块中 cart 数组的访问路径是 m_cart/cart
      m_cart: moduleCart,
    },
})

// 4. 向外共享 Store 的实例对象
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在 goods_detail.vue 页面中，修改标签中的代码如下：

// 从 vuex 中按需导出 mapState 辅助方法
import { mapState } from 'vuex'

export default {
  computed: {
    // 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算属性来使用
    // ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2'])
    ...mapState('m_cart', ['cart']),
  },
  // 省略其它代码...
}
1
2
3
4
5
6
7
8
9
10
11

注意：今后无论映射 mutations 方法，还是 getters 属性，还是 state 中的数据，都需要指定模块的名称，才能进行映射。
1

使用测试

  <!-- 运费 -->
 <view class="yf">快递：免运费 -- {{cart.length}}</view>
1
2

在这里插入图片描述

二加入购物车
1 设置购物车添加方法

mutations: {
    
    addToCart(state , goods){
      const findResult = state.cart.find((x)=> x.goods_id === goods.goods_id)
      
      if(!findResult){
        state.cart.push(goods)
      }else{
        findResult.goods_count += 1
      }
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12

2 在需要的页面导入

import { mapMutations} from 'vuex'
1

methods: {
    ...mapMutations('m_cart',['addToCart']),    
}
1
2
3

3 加入购物车

	buttonClick(e){
        console.log(e)
        if (e.content.text === '加入购物车') {
            // 切换到购物车页面
            const goods = {
              goods_id : this.goods_info.goods_id, 
              goods_name : this.goods_info.goods_name,
              goods_price : this.goods_info.goods_price,
              goods_count:1,
              goods_small_logo : this.goods_info.goods_small_logo,
              goods_state : true
            }
            
            this.addToCart(goods)
          }
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4 计算购物车添加的数量

 total(state){
      let c = 0 
      state.cart.forEach(goods => c+= goods.goods_count)
      return c
    }
1
2
3
4
5

5 展示购物车的数量

import { mapGetters} from 'vuex'
1

 computed:{
      // 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算属性来使用
          // ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2'])
  
      ...mapGetters('m_cart',['total']),
    },
1
2
3
4
5
6

    watch:{
      // 不会在首次初始完调用
      // total(newVal){
      //   const findResult = this.options.find((item)=> item.text === '购物车')
      //   if(findResult){
      //     findResult.info= newVal
      //   }
      // }
      total:{
        handler(newVal){
          const findResult = this.options.find((item)=> item.text === '购物车')
          if(findResult){
            findResult.info= newVal
          }
        },
        // immediate  属性用来声明此侦听器,是否在页面初次加载完毕后立即调用
        immediate : true 
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

6 持久化存储购物车中的商品

 	saveToStorage(state){
      uni.setStorageSync('cart',JSON.stringify(state.cart))
    }
1
2
3

addToCart(state , goods){
      const findResult = state.cart.find((x)=> x.goods_id === goods.goods_id)
      
      if(!findResult){
        state.cart.push(goods)
      }else{
        findResult.goods_count += 1
      }
      
      this.commit('m_cart/saveToStorage')
    },
1
2
3
4
5
6
7
8
9
10
11

7 修改购物车初始化的数据

 // 模块的 state 数据
  state: () => ({
    // 购物车的数组，用来存储购物车中每个商品的信息对象
    // 每个商品的信息对象，都包含如下 6 个属性：
    // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
    cart: JSON.parse(uni.getStorageSync('cart') || '[]'),
  }),
1
2
3
4
5
6
7

8 动态为 tabBar 页面设置数字徽标

import { mapGetters } from 'vuex'
1

 computed:{
    ...mapGetters('m_cart',['total']),
  },
1
2
3

  onShow(){
    this.setBadge()
  },
1
2
3

methods:{
    setBadge(){
      uni.setTabBarBadge({
        index:2,
        text:this.total +''
      })
    }
  }
1
2
3
4
5
6
7
8

9 将设置 tabBar 徽标的代码抽离为 mixins

import { mapGetters } from 'vuex'
export default{
  computed:{
    ...mapGetters('m_cart',['total']),
  },
  onShow(){
    this.setBadge()
  },
  methods:{
    setBadge(){
      uni.setTabBarBadge({
        index:2,
        text:this.total +''
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这里插入图片描述

 import badgeMix from '@/mixins/tabbar-badge.js'
  
  export default {
    mixins : [badgeMix],
	....
}
1
2
3
4
5
6

源码
store.js

// 1. 导入 Vue 和 Vuex
// import Vue from 'vue'  vue3 不需要
import Vuex from 'vuex'

// 1 导入购物车的vuex模块
import moduleCart from './cart.js' 

// 2. 将 Vuex 安装为 Vue 的插件 vue3 不需要
// Vue.use(Vuex)


// 3. 创建 Store 的实例对象
const store = new Vuex.Store({
  // TODO：挂载 store 模块
    modules: {
      // 2. 挂载购物车的 vuex 模块，模块内成员的访问路径被调整为 m_cart，例如：
      //    购物车模块中 cart 数组的访问路径是 m_cart/cart
      m_cart: moduleCart,
    },
})

// 4. 向外共享 Store 的实例对象 //
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

cart.js

export default {
  // 为当前模块开启命名空间
  namespaced: true,

  // 模块的 state 数据
  state: () => ({
    // 购物车的数组，用来存储购物车中每个商品的信息对象
    // 每个商品的信息对象，都包含如下 6 个属性：
    // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
    cart: JSON.parse(uni.getStorageSync('cart') || '[]'),
  }),

  // 模块的 mutations 方法
  mutations: {
    
    addToCart(state , goods){
      const findResult = state.cart.find((x)=> x.goods_id === goods.goods_id)
      
      if(!findResult){
        state.cart.push(goods)
      }else{
        findResult.goods_count += 1
      }
      
      this.commit('m_cart/saveToStorage')
    },
    saveToStorage(state){
      uni.setStorageSync('cart',JSON.stringify(state.cart))
    }
    
  },

  // 模块的 getters 属性
  getters: {
    total(state){
      let c = 0 
      state.cart.forEach(goods => c+= goods.goods_count)
      return c
    }
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

main.js

import App from './App'
// 1. 导入 store 的实例对象
import store from './store/store.js'

import { $http } from '@escook/request-miniprogram'

uni.$http = $http

$http.baseUrl = 'https://www.uinav.com'

$http.beforeRequest = function(options){
  uni.showLoading({
    title:'数据加载中....'
  })
}

$http.afterRequest = function(){
  uni.hideLoading()
}

uni.$showMsg = function(title = '数据加载失败!' , duration = 1500){
  
  uni.showToast({
    title,
    duration,
    icon:"none",
  })
}



// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  // 2. 将 store 挂载到 Vue 实例上//
  app.use(store)
  return {
    app
  }
}
// #endif

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

goods_details.vue

<template>
  <view>

    <view class="layout" v-if="goods_info.goods_name">

      <view class="topLayout">
        <view class="topBannerLayout">
          <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
            <swiper-item v-for="(item , index) in goods_info.pics" :key="index">
        
              <image :src="item.pics_big" @click="preview(index)"></image>
            </swiper-item>
          </swiper>
        
        </view>
        
        <view class="centerInfoLayout">
          <!-- 商品信息区域 -->
          <view class="goods-info-box">
            <!-- 商品价格 -->
            <view class="price">￥{{goods_info.goods_price}}</view>
            <!-- 信息主体区域 -->
            <view class="goods-info-body">
              <!-- 商品名称 -->
              <view class="goods-name">{{goods_info.goods_name}}</view>
              <!-- 收藏 -->
              <view class="favi">
                <uni-icons type="star" size="18" color="gray"></uni-icons>
                <text>收藏</text>
              </view>
            </view>
           <!-- 运费 -->
           <view class="yf">快递：免运费  </view>
          </view>
        </view>
        
        <view class="bottomTuwenLayout">
          <rich-text :nodes="goods_info.goods_introduce"></rich-text>
        </view>
      </view>
      <view class="goods_nav">
        <uni-goods-nav  :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
          @buttonClick="buttonClick" />
      </view>
    </view>
  </view>
</template>

<script>
  // 从 vuex 中按需导出 mapState 辅助方法
  import { mapState ,mapMutations ,mapGetters} from 'vuex'
  
  
  export default {
    computed:{
      // 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算属性来使用
          // ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2'])
      ...mapState('m_cart',['cart']),
      ...mapGetters('m_cart',['total']),
    },
    watch:{
      // 不会在首次初始完调用
      // total(newVal){
      //   const findResult = this.options.find((item)=> item.text === '购物车')
      //   if(findResult){
      //     findResult.info= newVal
      //   }
      // }
      total:{
        handler(newVal){
          const findResult = this.options.find((item)=> item.text === '购物车')
          if(findResult){
            findResult.info= newVal
          }
        },
        // immediate  属性用来声明此侦听器,是否在页面初次加载完毕后立即调用
        immediate : true 
      }
    },
    data() {
      return {
        goods_info: {},
        options: [{
          icon: 'chat',
          text: '客服'
        }, {
          icon: 'cart',
          text: '购物车',
          info: 0
        }],
        buttonGroup: [{
            text: '加入购物车',
            backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
            color: '#fff'
          },
          {
            text: '立即购买',
            backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
            color: '#fff'
          }
        ],
      };
    },
    onLoad(options) {
      const goods_id = options.goods_id
      this.getGoodsDetail(goods_id)
    },
    methods: {
      ...mapMutations('m_cart',['addToCart']),    
      
      async getGoodsDetail(goods_id) {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/detail', {
          goods_id
        })
        if (res.meta.status !== 200) return uni.$showMsg()
        // 为 data 中的数据赋值
        res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ')
          .replace(/webp/g, 'jpg')

        this.goods_info = res.message

        console.log(this.goods_info)
      },
      preview(index){
        uni.previewImage({
            // 预览时，默认显示图片的索引
            current: index,
            // 所有图片 url 地址的数组
            urls: this.goods_info.pics.map(x => x.pics_big)
          })
      },
      onClick(e){
        console.log(e)
        if (e.content.text === '购物车') {
            // 切换到购物车页面
            uni.switchTab({
              url: '/pages/cart/cart'
            })
          }
      },
      buttonClick(e){
        console.log(e)
        if (e.content.text === '加入购物车') {
            // 切换到购物车页面
            const goods = {
              goods_id : this.goods_info.goods_id, 
              goods_name : this.goods_info.goods_name,
              goods_price : this.goods_info.goods_price,
              goods_count:1,
              goods_small_logo : this.goods_info.goods_small_logo,
              goods_state : true
            }
            
            this.addToCart(goods)
            
          }
      }
    }
  }
</script>

<style lang="scss">
  .topBannerLayout {
    width: 750rpx;
    height: 750rpx;

    swiper {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }

  }

  // 商品信息区域的样式
  .goods-info-box {
    padding: 10px;
    padding-right: 0;

    .price {
      color: #c00000;
      font-size: 18px;
      margin: 10px 0;
    }

    .goods-info-body {
      display: flex;
      justify-content: space-between;

      .goods-name {
        font-size: 13px;
        padding-right: 10px;
      }

      // 收藏区域
      .favi {
        width: 120px;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-left: 1px solid #efefef;
        color: gray;
      }
    }

    // 运费
    .yf {
      margin: 10px 0;
      font-size: 12px;
      color: gray;
    }
  }
  
  .topLayout{
   padding-bottom: 50px;
  }
  
  .layout{
  }

  .goods_nav {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/517108