微信小程序--优购商城项目（8）

已于 2022-10-11 20:39:17 修改
阅读量1.3k 收藏 2
点赞数
分类专栏： 微信小程序开发 文章标签： 微信小程序
于 2022-04-15 07:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljn1046016768/article/details/124062892
版权

文章目录

前言

基于 uni-app 开发的微信小程序商城项目

  • 备用接口地址：https://api-hmugo-web.itheima.net

九、购物车页面

1、商品列表区域

（1）渲染购物车商品列表的标题区域

  1. 定义如下的 UI 结构：
<!-- 购物车商品列表的标题区域 -->
<view class="cart-title">
  <!-- 左侧的图标 -->
  <uni-icons type="shop" size="18"></uni-icons>
  <!-- 描述文本 -->
  <text class="cart-title-text">购物车</text>
</view>
  1. 美化样式：
.cart-title {
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 5px;
  border-bottom: 1px solid #efefef;
  .cart-title-text {
    margin-left: 10px;
  }
}

（2）渲染商品列表区域的基本结构

  1. 通过 mapState 辅助函数，将 Store 中的 cart 数组映射到当前页面中使用：
import badgeMix from '@/mixins/tabbar-badge.js'
// 按需导入 mapState 这个辅助函数
import { mapState } from 'vuex'

export default {
  mixins: [badgeMix],
  computed: {
    // 将 m_cart 模块中的 cart 数组映射到当前页面中使用
    ...mapState('m_cart', ['cart']),
  },
  data() {
    return {}
  },
}
  1. 在 UI 结构中，通过 v-for 指令循环渲染自定义的 my-goods 组件：
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
  <my-goods :goods="goods"></my-goods>
</block>
<br/>

（3） 为 my-goods 组件封装 radio 勾选状态

  1. 打开 my-goods.vue 组件的源代码，为商品的左侧图片区域添加 radio 组件：
<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
  <radio checked color="#C00000"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>
  1. 给类名为 goods-item-left 的 view 组件添加样式，实现 radio 组件和 image 组件的左右布局：
.goods-item-left {
  margin-right: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .goods-pic {
    width: 100px;
    height: 100px;
    display: block;
  }
}
  1. 封装名称为 showRadio 的 props 属性，来控制当前组件中是否显示 radio 组件：
export default {
  // 定义 props 属性，用来接收外界传递到当前组件的数据
  props: {
    // 商品的信息对象
    goods: {
      type: Object,
      default: {},
    },
    // 是否展示图片左侧的 radio
    showRadio: {
      type: Boolean,
      // 如果外界没有指定 show-radio 属性的值，则默认不展示 radio 组件
      default: false,
    },
  },
}
  1. 使用 v-if 指令控制 radio 组件的按需展示：
<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
  <!-- 使用 v-if 指令控制 radio 组件的显示与隐藏 -->
  <radio checked color="#C00000" v-if="showRadio"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>
  1. 在 cart.vue 页面中的商品列表区域，指定 :show-radio=“true” 属性，从而显示 radio 组件：
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
  <my-goods :goods="goods" :show-radio="true"></my-goods>
</block>
  1. 修改 my-goods.vue 组件，动态为 radio 绑定选中状态：
<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
  <!-- 存储在购物车中的商品，包含 goods_state 属性，表示商品的勾选状态 -->
  <radio :checked="goods.goods_state" color="#C00000" v-if="showRadio"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>

（4）为 my-goods 组件封装 radio-change 事件

  1. 当用户点击 radio 组件，希望修改当前商品的勾选状态，此时用户可以为 my-goods 组件绑定 @radio-change 事件，从而获取当前商品的 goods_id 和 goods_state：
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
  <!-- 在 radioChangeHandler 事件处理函数中，通过事件对象 e，得到商品的 goods_id 和 goods_state -->
  <my-goods :goods="goods" :show-radio="true" @radio-change="radioChangeHandler"></my-goods>
</block>
定义 radioChangeHandler 事件处理函数如下：

methods: {
  // 商品的勾选状态发生了变化
  radioChangeHandler(e) {
    console.log(e) // 输出得到的数据 -> {goods_id: 395, goods_state: false}
  }
}
  1. 在 my-goods.vue 组件中，为 radio 组件绑定 @click 事件处理函数如下：
<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
  <radio :checked="goods.goods_state" color="#C00000" v-if="showRadio" @click="radioClickHandler"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>
  1. 在 my-goods.vue 组件的 methods 节点中，定义 radioClickHandler 事件处理函数：
methods: {
  // radio 组件的点击事件处理函数
  radioClickHandler() {
    // 通过 this.$emit() 触发外界通过 @ 绑定的 radio-change 事件，
    // 同时把商品的 Id 和 勾选状态 作为参数传递给 radio-change 事件处理函数
    this.$emit('radio-change', {
      // 商品的 Id
      goods_id: this.goods.goods_id,
      // 商品最新的勾选状态
      goods_state: !this.goods.goods_state
    })
  }
}

（5）修改购物车中商品的勾选状态

  1. 在 store/cart.js 模块中，声明如下的 mutations 方法，用来修改对应商品的勾选状态：
// 更新购物车中商品的勾选状态
updateGoodsState(state, goods) {
  // 根据 goods_id 查询购物车中对应商品的信息对象
  const findResult = state.cart.find(x => x.goods_id === goods.goods_id)

  // 有对应的商品信息对象
  if (findResult) {
    // 更新对应商品的勾选状态
    findResult.goods_state = goods.goods_state
    // 持久化存储到本地
    this.commit('m_cart/saveToStorage')
  }
}
  1. 在 cart.vue 页面中，导入 mapMutations 这个辅助函数，从而将需要的 mutations 方法映射到当前页面中使用：
import badgeMix from '@/mixins/tabbar-badge.js'
import { mapState, mapMutations } from 'vuex'

export default {
  mixins: [badgeMix],
  computed: {
    ...mapState('m_cart', ['cart']),
  },
  data() {
    return {}
  },
  methods: {
    ...mapMutations('m_cart', ['updateGoodsState']),
    // 商品的勾选状态发生了变化
    radioChangeHandler(e) {
      this.updateGoodsState(e)
    },
  },
}

（6）为 my-goods 组件封装 NumberBox

  1. 修改 my-goods.vue 组件的源代码，在类名为 goods-info-box 的 view 组件内部渲染 NumberBox 组件的基本结构：
<view class="goods-info-box">
  <!-- 商品价格 -->
  <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
  <!-- 商品数量 -->
  <uni-number-box :min="1"></uni-number-box>
</view>
  1. 美化页面的结构：
.goods-item-right {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;

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

  .goods-info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .goods-price {
    font-size: 16px;
    color: #c00000;
  }
}
  1. 在 my-goods.vue 组件中，动态为 NumberBox 组件绑定商品的数量值：
<view class="goods-info-box">
  <!-- 商品价格 -->
  <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
  <!-- 商品数量 -->
  <uni-number-box :min="1" :value="goods.goods_count"></uni-number-box>
</view>
  1. 在 my-goods.vue 组件中，封装名称为 showNum 的 props 属性，来控制当前组件中是否显示 NumberBox 组件：
export default {
  // 定义 props 属性，用来接收外界传递到当前组件的数据
  props: {
    // 商品的信息对象
    goods: {
      type: Object,
      defaul: {},
    },
    // 是否展示图片左侧的 radio
    showRadio: {
      type: Boolean,
      // 如果外界没有指定 show-radio 属性的值，则默认不展示 radio 组件
      default: false,
    },
    // 是否展示价格右侧的 NumberBox 组件
    showNum: {
      type: Boolean,
      default: false,
    },
  },
}
  1. 在 my-goods.vue 组件中，使用 v-if 指令控制 NumberBox 组件的按需展示：
<view class="goods-info-box">
  <!-- 商品价格 -->
  <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
  <!-- 商品数量 -->
  <uni-number-box :min="1" :value="goods.goods_count" @change="numChangeHandler" v-if="showNum"></uni-number-box>
</view>

6.在 cart.vue 页面中的商品列表区域，指定 :show-num=“true” 属性，从而显示 NumberBox 组件：

<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
  <my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler"></my-goods>
</block>

（7）为 my-goods 组件封装 num-change 事件

  1. 当用户修改了 NumberBox 的值以后，希望将最新的商品数量更新到购物车中，此时用户可以为 my-goods 组件绑定 @num-change 事件，从而获取当前商品的 goods_id 和 goods_count：
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
  <my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler" @num-change="numberChangeHandler"></my-goods>
</block>

定义 numberChangeHandler 事件处理函数如下：

// 商品的数量发生了变化
numberChangeHandler(e) {
  console.log(e)
}
  1. 在 my-goods.vue 组件中，为 uni-number-box 组件绑定 @change 事件处理函数如下：
<view class="goods-info-box">
  <!-- 商品价格 -->
  <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
  <!-- 商品数量 -->
  <uni-number-box :min="1" :value="goods.goods_count" @change="numChangeHandler"></uni-number-box>
</view>
  1. 在 my-goods.vue 组件的 methods 节点中，定义 numChangeHandler 事件处理函数：
methods: {
  // NumberBox 组件的 change 事件处理函数
  numChangeHandler(val) {
    // 通过 this.$emit() 触发外界通过 @ 绑定的 num-change 事件
    this.$emit('num-change', {
      // 商品的 Id
      goods_id: this.goods.goods_id,
      // 商品的最新数量
      goods_count: +val
    })
  }
}

（8） 解决 NumberBox 数据不合法的问题

问题说明：当用户在 NumberBox 中输入字母等非法字符之后，会导致 NumberBox 数据紊乱的问题

  1. 打开项目根目录中 components/uni-number-box/uni-number-box.vue 组件，修改 methods 节点中的 _onBlur 函数如下：
_onBlur(event) {
  // 官方的代码没有进行数值转换，用户输入的 value 值可能是非法字符：
  // let value = event.detail.value;

  // 将用户输入的内容转化为整数
  let value = parseInt(event.detail.value);

  if (!value) {
    // 如果转化之后的结果为 NaN，则给定默认值为 1
    this.inputValue = 1;
    return;
  }

  // 省略其它代码...
}
  1. 修改完毕之后，用户输入小数会被转化为整数，用户输入非法字符会被替换为默认值 1

（9）完善 NumberBox 的 inputValue 侦听器

问题说明：在用户每次输入内容之后，都会触发 inputValue 侦听器，从而调用 this.$emit(“change”, newVal) 方法。这种做法可能会把不合法的内容传递出去！

  1. 打开项目根目录中 components/uni-number-box/uni-number-box.vue 组件，修改 watch 节点中的 inputValue 侦听器如下：
inputValue(newVal, oldVal) {
  // 官方提供的 if 判断条件，在用户每次输入内容时，都会调用 this.$emit("change", newVal)
  // if (+newVal !== +oldVal) {

  // 新旧内容不同 && 新值内容合法 && 新值中不包含小数点
  if (+newVal !== +oldVal && Number(newVal) && String(newVal).indexOf('.') === -1) {
    this.$emit("change", newVal);
  }
}
  1. 修改完毕之后，NumberBox 组件只会把合法的、且不包含小数点的新值传递出去

（10）修改购物车中商品的数量

  1. 在 store/cart.js 模块中，声明如下的 mutations 方法，用来修改对应商品的数量：
// 更新购物车中商品的数量
updateGoodsCount(state, goods) {
  // 根据 goods_id 查询购物车中对应商品的信息对象
  const findResult = state.cart.find(x => x.goods_id === goods.goods_id)

  if(findResult) {
    // 更新对应商品的数量
    findResult.goods_count = goods.goods_count
    // 持久化存储到本地
    this.commit('m_cart/saveToStorage')
  }
}
  1. 在 cart.vue 页面中，通过 mapMutations 这个辅助函数，将需要的 mutations 方法映射到当前页面中使用：
import badgeMix from '@/mixins/tabbar-badge.js'
import { mapState, mapMutations } from 'vuex'

export default {
  mixins: [badgeMix],
  computed: {
    ...mapState('m_cart', ['cart']),
  },
  data() {
    return {}
  },
  methods: {
    ...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount']),
    // 商品的勾选状态发生了变化
    radioChangeHandler(e) {
      this.updateGoodsState(e)
    },
    // 商品的数量发生了变化
    numberChangeHandler(e) {
      this.updateGoodsCount(e)
    },
  },
}

（11）渲染滑动删除的 UI 效果

  1. 改造 cart.vue 页面的 UI 结构，将商品列表区域的结构修改如下（可以使用 uSwipeAction 代码块快速生成基本的 UI 结构）：
<!-- 商品列表区域 -->
<!-- uni-swipe-action 是最外层包裹性质的容器 -->
<uni-swipe-action>
  <block v-for="(goods, i) in cart" :key="i">
    <!-- uni-swipe-action-item 可以为其子节点提供滑动操作的效果。需要通过 options 属性来指定操作按钮的配置信息 -->
    <uni-swipe-action-item :options="options" @click="swipeActionClickHandler(goods)">
      <my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler" @num-change="numberChangeHandler"></my-goods>
    </uni-swipe-action-item>
  </block>
</uni-swipe-action>
  1. 在 data 节点中声明 options 数组，用来定义操作按钮的配置信息：
data() {
  return {
    options: [{
      text: '删除', // 显示的文本内容
      style: {
        backgroundColor: '#C00000' // 按钮的背景颜色
      }
    }]
  }
}
  1. 在 methods 中声明 uni-swipe-action-item 组件的 @click 事件处理函数：
// 点击了滑动操作按钮
swipeActionClickHandler(goods) {
  console.log(goods)
}

4.美化 my-goods.vue 组件的样式：

.goods-item {
  // 让 goods-item 项占满整个屏幕的宽度
  width: 750rpx;
  // 设置盒模型为 border-box
  box-sizing: border-box;
  display: flex;
  padding: 10px 5px;
  border-bottom: 1px solid #f0f0f0;
}

（12）实现滑动删除的功能

  1. 在 store/cart.js 模块的 mutations 节点中声明如下的方法，从而根据商品的 Id 从购物车中移除对应的商品：
// 根据 Id 从购物车中删除对应的商品信息
removeGoodsById(state, goods_id) {
  // 调用数组的 filter 方法进行过滤
  state.cart = state.cart.filter(x => x.goods_id !== goods_id)
  // 持久化存储到本地
  this.commit('m_cart/saveToStorage')
}
  1. 在 cart.vue 页面中，使用 mapMutations 辅助函数，把需要的方法映射到当前页面中使用：
methods: {
  ...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']),
  // 商品的勾选状态发生了变化
  radioChangeHandler(e) {
    this.updateGoodsState(e)
  },
  // 商品的数量发生了变化
  numberChangeHandler(e) {
    this.updateGoodsCount(e)
  },
  // 点击了滑动操作按钮
  swipeActionClickHandler(goods) {
    this.removeGoodsById(goods.goods_id)
  }
}

2、收货地址区域

（1）创建收货地址组件

  1. 在 components 目录上鼠标右键，选择 新建组件，并填写组件相关的信息：
  2. 渲染收货地址组件的基本结构：
<view>

  <!-- 选择收货地址的盒子 -->
  <view class="address-choose-box">
    <button type="primary" size="mini" class="btnChooseAddress">请选择收货地址+</button>
  </view>

  <!-- 渲染收货信息的盒子 -->
  <view class="address-info-box">
    <view class="row1">
      <view class="row1-left">
        <view class="username">收货人：<text>escook</text></view>
      </view>
      <view class="row1-right">
        <view class="phone">电话：<text>138XXXX5555</text></view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>
    <view class="row2">
      <view class="row2-left">收货地址：</view>
      <view class="row2-right">河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx </view>
    </view>
  </view>

  <!-- 底部的边框线 -->
  <image src="/static/cart_border@2x.png" class="address-border"></image>
</view>
  1. 美化收货地址组件的样式：
// 底部边框线的样式
.address-border {
  display: block;
  width: 100%;
  height: 5px;
}

// 选择收货地址的盒子
.address-choose-box {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 渲染收货信息的盒子
.address-info-box {
  font-size: 12px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5px;

  // 第一行
  .row1 {
    display: flex;
    justify-content: space-between;

    .row1-right {
      display: flex;
      align-items: center;

      .phone {
        margin-right: 5px;
      }
    }
  }

  // 第二行
  .row2 {
    display: flex;
    align-items: center;
    margin-top: 10px;

    .row2-left {
      white-space: nowrap;
    }
  }
}

（2）实现收货地址区域的按需展示

  1. 在 data 中定义收货地址的信息对象：
export default {
  data() {
    return {
      // 收货地址
      address: {},
    }
  },
}
  1. 使用 v-if 和 v-else 实现按需展示：
<!-- 选择收货地址的盒子 -->
<view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
  <button type="primary" size="mini" class="btnChooseAddress">请选择收货地址+</button>
</view>

<!-- 渲染收货信息的盒子 -->
<view class="address-info-box" v-else>
  <!-- 省略其它代码 -->
</view>

（3）实现选择收货地址的功能

  1. 为 请选择收货地址+ 的 button 按钮绑定点击事件处理函数：
<!-- 选择收货地址的盒子 -->
<view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
  <button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">请选择收货地址+</button>
</view>
  1. 定义 chooseAddress 事件处理函数，调用小程序提供的 chooseAddress() API 实现选择收货地址的功能：
methods: {
  // 选择收货地址
  async chooseAddress() {
    // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
    //    返回值是一个数组：第 1 项为错误对象；第 2 项为成功之后的收货地址对象
    const [err, succ] = await uni.chooseAddress().catch(err => err)

    // 2. 用户成功的选择了收货地址
    if (err === null && succ.errMsg === 'chooseAddress:ok') {
      // 为 data 里面的收货地址对象赋值
      this.address = succ
    }
  }
}
  1. 定义收货详细地址的计算属性：
computed: {
  // 收货详细地址的计算属性
  addstr() {
    if (!this.address.provinceName) return ''

    // 拼接 省，市，区，详细地址 的字符串并返回给用户
    return this.address.provinceName + this.address.cityName + this.address.countyName + this.address.detailInfo
  }
}
  1. 渲染收货地址区域的数据：
<!-- 渲染收货信息的盒子 -->
<view class="address-info-box" v-else>
  <view class="row1">
    <view class="row1-left">
      <view class="username">收货人：<text>{{address.userName}}</text></view>
    </view>
    <view class="row1-right">
      <view class="phone">电话：<text>{{address.telNumber}}</text></view>
      <uni-icons type="arrowright" size="16"></uni-icons>
    </view>
  </view>
  <view class="row2">
    <view class="row2-left">收货地址：</view>
    <view class="row2-right">{{addstr}}</view>
  </view>
</view>

（4） 将 address 信息存储到 vuex 中

  1. 在 store 目录中，创建用户相关的 vuex 模块，命名为 user.js：
export default {
  // 开启命名空间
  namespaced: true,

  // state 数据
  state: () => ({
    // 收货地址
    address: {},
  }),

  // 方法
  mutations: {
    // 更新收货地址
    updateAddress(state, address) {
      state.address = address
    },
  },

  // 数据包装器
  getters: {},
}
  1. 在 store/store.js 模块中，导入并挂载 user.js 模块：
// 1. 导入 Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 导入购物车的 vuex 模块
import moduleCart from './cart.js'
// 导入用户的 vuex 模块
import moduleUser from './user.js'

// 2. 将 Vuex 安装为 Vue 的插件
Vue.use(Vuex)

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

// 4. 向外共享 Store 的实例对象
export default store
  1. 改造 address.vue 组件中的代码，使用 vuex 提供的 address 计算属性 替代 data 中定义的本地 address 对象：
// 1. 按需导入 mapState 和 mapMutations 这两个辅助函数
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      // 2.1 注释掉下面的 address 对象，使用 2.2 中的代码替代之
      // address: {}
    }
  },
  methods: {
    // 3.1 把 m_user 模块中的 updateAddress 函数映射到当前组件
    ...mapMutations('m_user', ['updateAddress']),
    // 选择收货地址
    async chooseAddress() {
      const [err, succ] = await uni.chooseAddress().catch((err) => err)

      // 用户成功的选择了收货地址
      if (err === null && succ.errMsg === 'chooseAddress:ok') {
        // 3.2 把下面这行代码注释掉，使用 3.3 中的代码替代之
        // this.address = succ

        // 3.3 调用 Store 中提供的 updateAddress 方法，将 address 保存到 Store 里面
        this.updateAddress(succ)
      }
    },
  },
  computed: {
    // 2.2 把 m_user 模块中的 address 对象映射当前组件中使用，代替 data 中 address 对象
    ...mapState('m_user', ['address']),
    // 收货详细地址的计算属性
    addstr() {
      if (!this.address.provinceName) return ''

      // 拼接 省，市，区，详细地址 的字符串并返回给用户
      return this.address.provinceName + this.address.cityName + this.address.countyName + this.address.detailInfo
    },
  },
}

（5）将 Store 中的 address 持久化存储到本地

修改 store/user.js 模块中的代码如下：

export default {
  // 开启命名空间
  namespaced: true,

  // state 数据
  state: () => ({
    // 3. 读取本地的收货地址数据，初始化 address 对象
    address: JSON.parse(uni.getStorageSync('address') || '{}'),
  }),

  // 方法
  mutations: {
    // 更新收货地址
    updateAddress(state, address) {
      state.address = address

      // 2. 通过 this.commit() 方法，调用 m_user 模块下的 saveAddressToStorage 方法将 address 对象持久化存储到本地
      this.commit('m_user/saveAddressToStorage')
    },
    // 1. 定义将 address 持久化存储到本地 mutations 方法
    saveAddressToStorage(state) {
      uni.setStorageSync('address', JSON.stringify(state.address))
    },
  },

  // 数据包装器
  getters: {},
}

（6）将 addstr 抽离为 getters

目的：为了提高代码的复用性，可以把收货的详细地址抽离为 getters，方便在多个页面和组件之间实现复用

  1. 剪切 my-address.vue 组件中的 addstr 计算属性的代码，粘贴到 user.js 模块中，作为一个 getters 节点：
// 数据包装器
getters: {
  // 收货详细地址的计算属性
  addstr(state) {
    if (!state.address.provinceName) return ''

    // 拼接 省，市，区，详细地址 的字符串并返回给用户
    return state.address.provinceName + state.address.cityName + state.address.countyName + state.address.detailInfo
  }
}
  1. 改造 my-address.vue 组件中的代码，通过 mapGetters 辅助函数，将 m_user 模块中的 addstr 映射到当前组件中使用：
// 按需导入 mapGetters 辅助函数
import { mapState, mapMutations, mapGetters } from 'vuex'

export default {
  // 省略其它代码
  computed: {
    ...mapState('m_user', ['address']),
    // 将 m_user 模块中的 addstr 映射到当前组件中使用
    ...mapGetters('m_user', ['addstr']),
  },
}

（7）重新选择收货地址

  1. 为 class 类名为 address-info-box 的盒子绑定 click 事件处理函数如下：
<!-- 渲染收货信息的盒子 -->
<view class="address-info-box" v-else @click="chooseAddress">
  <!-- 省略其它代码 -->
</view>

3、结算区域

（1）把结算区域封装为组件

  1. 在 components 目录中，新建 my-settle 结算组件：
  2. 初始化 my-settle 组件的基本结构和样式：
<template>
  <!-- 最外层的容器 -->
  <view class="my-settle-container">
    结算组件
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style lang="scss">
.my-settle-container {
  /* 底部固定定位 */
  position: fixed;
  bottom: 0;
  left: 0;
  /* 设置宽高和背景色 */
  width: 100%;
  height: 50px;
  background-color: cyan;
}
</style>
  1. 在 cart.vue 页面中使用自定义的 my-settle 组件，并美化页面样式，防止页面底部被覆盖：
<template>
  <view class="cart-container">
    <!-- 使用自定义的 address 组件 -->

    <!-- 购物车商品列表的标题区域 -->

    <!-- 商品列表区域 -->

    <!-- 结算区域 -->
    <my-settle></my-settle>
  </view>
</template>

<style lang="scss">
.cart-container {
  padding-bottom: 50px;
}
</style>

（2）渲染结算区域的结构和样式

  1. 定义如下的 UI 结构：
<!-- 最外层的容器 -->
<view class="my-settle-container">
  <!-- 全选区域 -->
  <label class="radio">
    <radio color="#C00000" :checked="true" /><text>全选</text>
  </label>

  <!-- 合计区域 -->
  <view class="amount-box">
    合计:<text class="amount">￥1234.00</text>
  </view>

  <!-- 结算按钮 -->
  <view class="btn-settle">结算(0)</view>
</view>
  1. 美化样式：
.my-settle-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  // 将背景色从 cyan 改为 white
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  font-size: 14px;

  .radio {
    display: flex;
    align-items: center;
  }

  .amount {
    color: #c00000;
  }

  .btn-settle {
    height: 50px;
    min-width: 100px;
    background-color: #c00000;
    color: white;
    line-height: 50px;
    text-align: center;
    padding: 0 10px;
  }
}

（3）动态渲染已勾选商品的总数量

  1. 在 store/cart.js 模块中，定义一个名称为 checkedCount 的 getters，用来统计已勾选商品的总数量：
// 勾选的商品的总数量
checkedCount(state) {
  // 先使用 filter 方法，从购物车中过滤器已勾选的商品
  // 再使用 reduce 方法，将已勾选的商品总数量进行累加
  // reduce() 的返回值就是已勾选的商品的总数量
  return state.cart.filter(x => x.goods_state).reduce((total, item) => total += item.goods_count, 0)
}
  1. 在 my-settle 组件中，通过 mapGetters 辅助函数，将需要的 getters 映射到当前组件中使用：
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('m_cart', ['checkedCount']),
  },
  data() {
    return {}
  },
}
  1. 将 checkedCount 的值渲染到页面中：
<!-- 结算按钮 -->
<view class="btn-settle">结算({{checkedCount}})</view>

（4）动态渲染全选按钮的选中状态

  1. 使用 mapGetters 辅助函数，将商品的总数量映射到当前组件中使用，并定义一个叫做 isFullCheck 的计算属性：
import { mapGetters } from 'vuex'

export default {
  computed: {
    // 1. 将 total 映射到当前组件中
    ...mapGetters('m_cart', ['checkedCount', 'total']),
    // 2. 是否全选
    isFullCheck() {
      return this.total === this.checkedCount
    },
  },
  data() {
    return {}
  },
}
  1. 为 radio 组件动态绑定 checked 属性的值：
<!-- 全选区域 -->
<label class="radio">
  <radio color="#C00000" :checked="isFullCheck" /><text>全选</text>
</label>

（5）实现商品的全选/反选功能

  1. 在 store/cart.js 模块中，定义一个叫做 updateAllGoodsState 的 mutations 方法，用来修改所有商品的勾选状态：
// 更新所有商品的勾选状态
updateAllGoodsState(state, newState) {
  // 循环更新购物车中每件商品的勾选状态
  state.cart.forEach(x => x.goods_state = newState)
  // 持久化存储到本地
  this.commit('m_cart/saveToStorage')
}
  1. 在 my-settle 组件中，通过 mapMutations 辅助函数，将需要的 mutations 方法映射到当前组件中使用：
// 1. 按需导入 mapMutations 辅助函数
import { mapGetters, mapMutations } from 'vuex'

export default {
  // 省略其它代码
  methods: {
    // 2. 使用 mapMutations 辅助函数，把 m_cart 模块提供的 updateAllGoodsState 方法映射到当前组件中使用
    ...mapMutations('m_cart', ['updateAllGoodsState']),
  },
}
  1. 为 UI 中的 label 组件绑定 click 事件处理函数：
<!-- 全选区域 -->
<label class="radio" @click="changeAllState">
  <radio color="#C00000" :checked="isFullCheck" /><text>全选</text>
</label>
在 my-settle 组件的 methods 节点中，声明 changeAllState 事件处理函数：

methods: {
  ...mapMutations('m_cart', ['updateAllGoodsState']),
  // label 的点击事件处理函数
  changeAllState() {
    // 修改购物车中所有商品的选中状态
    // !this.isFullCheck 表示：当前全选按钮的状态取反之后，就是最新的勾选状态
    this.updateAllGoodsState(!this.isFullCheck)
  }
}

（6）动态渲染已勾选商品的总价格

  1. 在 store/cart.js 模块中，定义一个叫做 checkedGoodsAmount 的 getters，用来统计已勾选商品的总价格：
// 已勾选的商品的总价
checkedGoodsAmount(state) {
  // 先使用 filter 方法，从购物车中过滤器已勾选的商品
  // 再使用 reduce 方法，将已勾选的商品数量 * 单价之后，进行累加
  // reduce() 的返回值就是已勾选的商品的总价
  // 最后调用 toFixed(2) 方法，保留两位小数
  return state.cart.filter(x => x.goods_state)
                   .reduce((total, item) => total += item.goods_count * item.goods_price, 0)
                   .toFixed(2)
}
  1. 在 my-settle 组件中，使用 mapGetters 辅助函数，把需要的 checkedGoodsAmount 映射到当前组件中使用：
...mapGetters('m_cart', ['total', 'checkedCount', 'checkedGoodsAmount'])
  1. 在组件的 UI 结构中，渲染已勾选的商品的总价：
<!-- 合计区域 -->
<view class="amount-box">
  合计:<text class="amount">￥{{checkedGoodsAmount}}</text>
</view>

（7）动态计算购物车徽标的数值

  1. 问题说明：当修改购物车中商品的数量之后，tabBar 上的数字徽标不会自动更新。

  2. 解决方案：改造 mixins/tabbar-badge.js 中的代码，使用 watch 侦听器，监听 total 总数量的变化，从而动态为 tabBar 的徽标赋值：

import { mapGetters } from 'vuex'

// 导出一个 mixin 对象
export default {
  computed: {
    ...mapGetters('m_cart', ['total']),
  },
  watch: {
    // 监听 total 值的变化
    total() {
      // 调用 methods 中的 setBadge 方法，重新为 tabBar 的数字徽章赋值
      this.setBadge()
    },
  },
  onShow() {
    // 在页面刚展示的时候，设置数字徽标
    this.setBadge()
  },
  methods: {
    setBadge() {
      // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
      uni.setTabBarBadge({
        index: 2,
        text: this.total + '', // 注意：text 的值必须是字符串，不能是数字
      })
    },
  },
}

（8）渲染购物车为空时的页面结构

  1. 将 资料 目录中的 cart_empty@2x.png 图片复制到项目的 /static/ 目录中

  2. 改造 cart.vue 页面的 UI 结构，使用 v-if 和 v-else 控制购物车区域和空白购物车区域的按需展示：

<template>
  <view class="cart-container" v-if="cart.length !== 0">

    <!-- 使用自定义的 address 组件 -->

    <!-- 购物车商品列表的标题区域 -->

    <!-- 商品列表区域 -->

    <!-- 结算区域 -->

  </view>

  <!-- 空白购物车区域 -->
  <view class="empty-cart" v-else>
    <image src="/static/cart_empty@2x.png" class="empty-img"></image>
    <text class="tip-text">空空如也~</text>
  </view>
</template>
  1. 美化空白购物车区域的样式：
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150px;

  .empty-img {
    width: 90px;
    height: 90px;
  }

  .tip-text {
    font-size: 12px;
    color: gray;
    margin-top: 15px;
  }
}

4、分支的合并与提交

  1. 将 cart 分支进行本地提交：
git add .
git commit -m "完成了购物车的开发"
  1. 将本地的 cart 分支推送到码云：
git push -u origin cart
  1. 将本地 cart 分支中的代码合并到 master 分支：
git checkout master
git merge cart
git push
  1. 删除本地的 cart 分支：
git branch -d cart

绿箭柠檬茶
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ZZ-Shop：原生微信小程序项目-优购商城
02-18
ZZ店 项目简介：该商城是基于原生微信小程序来实现的。已完成功能： 登录授权 商品添加进购物车，购物车删除商品 展示个人中心，首页，商品详情 搜索商品 收藏商品 订单查询 接口在此： : 截图如下： 首页： 商品分类： 有商品时的购物车： 无商品时的购物车： 购物车（删除商品）： 登录后的个人中心： 没有登录的个人中心： 搜索商品页面： 商品详情页面： 商品列表页面： 订单查询页面： 商品收藏页面：
uniapp微信小程序实现《优购商城项目》
qq_64102392的博客
06-14 3801
对于跨平台开发来说，节约成本是最主要的目的，相比较其他框架，觉得uniapp上手的成本是比较低的。
商城小程序项目实现监控的可观测性最佳实践
观测云的博客
03-26 255
微信小程序是一种轻量级的应用程序，用户可以在微信内直接使用，无需下载安装。它具有独立的开发框架和生态系统，支持丰富的功能和交互，包括社交、购物、服务等。
uniapp微信小程序项目-优购商城
热门推荐
zy_lalala的博客
12-12 1万+
uniapp 微信小程序 项目 优购商城
微信小程序--优购商城项目（4）
ljn1046016768的博客
04-11 1130
搜索页面功能
微信小程序--优购商城项目（2）
ljn1046016768的博客
04-09 2673
首页功能
微信小程序期末大作业-精品优购商城
07-16
微信小程序期末大作业-精品优购商城（免积分下载），导入即可运行，有轮播图，各种商品标签，底部导航栏，包含首页，分类，购物车，个人中心四个导航；详细情况请看我的文章介绍。
一个原生微信小程序项目-优购商城源码分享，适合毕业设计，个人开发学习，大作业
06-19
一个原生微信小程序项目-优购商城源码分享 项目简介： 该商城是基于原生微信小程序来实现的。 已完成功能： 登录授权 商品添加进购物车、购物车删除商品 展示个人中心、首页、商品详情 搜索商品 收藏商品 订单查询...
407-微信小程序-优购.zip
05-23
玖月优购是一款体验版微信小程序，其中包含的功能有用户的登录，商品主页的展示，商品分类，商品收藏，联系客服，商品分享，添加购物车，添加收货地址等等
微信小程序项目源码-优购电商小程序的设计与实现+ssm框架+论文.rar
最新发布
04-15
微信小程序项目源码-优购电商小程序的设计与实现+SSM框架+论文.rar，是一个集成了SSM（Spring、SpringMVC、MyBatis）框架的电商小程序项目。本项目旨在提供一个功能完善、易于扩展的电商平台，以满足用户的购物需求...
微信小程序--优购商城项目（7）
ljn1046016768的博客
04-14 1298
加入购物车
uni-app实现购物商城的微信小程序，优秀毕业设计源代码，小白必看！
04-08
本项目拥有首页、搜索页、商品列表页、商品详情页、购物车、登录支付等主要功能。涵盖了分包、vuex、组件化开发等核心技术点的使用。 uni-app 是一个使用 Vue.js 开发所有前端应用的框架。uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：模板丰富、完善的智能提示、一键运行。components ：uni-app组件目录。pages：uni-app组件目录。static：存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此。main.js：Vue初始化入口文件。App.vue：应用配置，用来配置小程序的全局样式、生命周期函数等。manifest.json：配置应用名称、appid、logo、版本等打包信息。pages.json：配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息。
基于微信小程序的优购电商小程序
qq_61827376的博客
07-08 172
随着社会的发展，社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。本文以实际运用为开发背景，运用软件工程原理和开发方法，它主要是采用java语言技术和mysql数据库来完成对系统的设计。整个开发过程首先对优购电商小程序进行需求分析，得出优购电商小程序主要功能。接着对优购电商小程序进行总体设计和详细设计。总体设计主要包括小程序功能设计、小程序总体结构设计、小程序数据结构设计和小程序安全设计等；
实战项目-微信购物商城小程序+【源码+数据库+文档】
BYSJLG的博客
08-25 2156
实战项目-微信购物商城小程序+【源码+数据库+文档】
微信小程序商城项目实战(第一篇:项目搭建与首页)
Jiangxun9390的博客
06-22 242
这样别的页面就可以使用该组件了,不过使用前记得要配置组件…此处icon用了阿里巴巴的矢量库，可自行选择性下载。使用searchinput搜索框组件时需要配置…用于ajax请求接口,封装成方法…
uni-app:购物车页面--收货地址区域
薛定谔的猫
03-17 2428
在 目录上鼠标右键，选择 ，并填写组件相关的信息：渲染收货地址组件的基本结构： 美化收货地址组件的样式： 在 data 中定义收货地址的信息对象： 使用 和 实现按需展示： 实现选择收货地址的功能为 的 按钮绑定点击事件处理函数： 定义 事件处理函数，调用小程序提供的 API 实现选择收货地址的功能： chooseAddress() 方法 解决方案uni-app项目 在项目根目录中找到 manifest.json 文件，在左侧导航栏选择源码视图，找到mp-
微信小程序--优购商城项目（6）
ljn1046016768的博客
04-13 1483
商品详情页
购物车（二）-收货地址——计算属性-组合地址-es6中推出的``方式拼接字符串 & wx.chooseAddress()调用
weixin_44867717的博客
10-27 433
购物车-收货地址——计算属性-组合地址-es6中推出的``方式拼接字符串 & wx.chooseAddress()调用 收货地址 基本布局 <!-- 地址信息的展示 --> <div class="cart-top" v-if='address'> <div class="receive"> <div class="name">收货人: 张三</div> <div class="phonen-number"&g
微信小程序 v-for
07-25
微信小程序中，v-for 是Vue.js框架中常用的一个指令，用于循环渲染元素列表。在微信小程序中，由于没有直接支持Vue.js的模板语法，所以v-for 指令无法直接使用。 不过，你可以使用wx:for="{{array}}"和wx:for-item="{{item}}"以及wx:for-index="{{index}}"来实现类似的功能。这些指令可以在wxml模板中使用，例如： ```html <view wx:for="{{array}}" wx:for-item="item" wx:for-index="index"> <text>{{index}}: {{item}}</text> </view> ``` 这段代码会根据数组 array 的长度，循环渲染多个 view 元素，并显示索引和对应的元素值。 需要注意的是，由于微信小程序的限制，v-for 指令在渲染大量元素时可能会影响性能，请确保列表不会过长。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

绿箭柠檬茶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值