第二阶段每日汇报20230504
小程序端实现了程序代码的优化,把每一个前端展示的控件独立出来,使的展示界面是由许多的部分空间组成的,从而减少了误删的操作,同时大大提高了代码的复用性。
这是my-settle.vue,他用来展示在购物车界面的底部展示框。
<template> <!-- 最外层的容器 --> <view class="my-settle-container"> <!-- 全选区域 --> <label class="radio" @click="changeAllState"> <radio color="#C00000" :checked="isFullCheck" /><text>全选</text> </label> <!-- 合计区域 --> <view class="amount-box"> 合计:<text class="amount">¥{{checkedGoodsAmount}}</text> </view> <!-- 结算按钮 --> <view class="btn-settle" @click="settlement" bindtap='buttonTap'>结算({{checkedCount}})</view> </view> </template> <script> // 1. 按需导入 mapMutations 辅助函数 import { mapGetters, mapMutations, mapState } from 'vuex' export default { computed: { // 1. 将 total 映射到当前组件中 ...mapGetters('m_cart', ['checkedCount', 'total', 'checkedGoodsAmount']), // token 是用户登录成功之后的 token 字符串 ...mapState('m_user', ['token']), // 2. 是否全选 isFullCheck() { return this.total === this.checkedCount }, }, data() { return { // 倒计时的秒数 seconds: 3, // 定时器的 Id timer: null, modalHidden: true }; }, methods: { ...mapMutations('m_cart', ['updateAllGoodsState']), // 把 m_user 模块中的 updateRedirectInfo 方法映射到当前页面中使用 ...mapMutations('m_user', ['updateRedirectInfo']), // label 的点击事件处理函数 changeAllState() { // 修改购物车中所有商品的选中状态 // !this.isFullCheck 表示:当前全选按钮的状态取反之后,就是最新的勾选状态 this.updateAllGoodsState(!this.isFullCheck) }, // 点击了结算按钮 settlement() { // 1. 先判断是否勾选了要结算的商品 if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品!') // 2. 最后判断用户是否登录了,如果没有登录,则调用 delayNavigate() 进行倒计时的导航跳转 // if (!this.token) return uni.$showMsg('请先登录!') if (!this.token) return this.delayNavigate() uni.showModal({ title: '微信二维码支付', content: '确定删除?', cancelText: "取消", // 取消按钮的文字 confirmText: "确认", // 确认按钮的文字 showCancel: true, // 是否显示取消按钮,默认为 true confirmColor: '#f55850', cancelColor: '#39B54A', success: (res) => { if(res.confirm) { console.log('comfirm') //点击确定之后执行的代码 } else { console.log('cancel') //点击取消之后执行的代码 } } }) }, // 展示倒计时的提示消息 showTips(n) { // 调用 uni.showToast() 方法,展示提示消息 uni.showToast({ // 不展示任何图标 icon: 'none', // 提示的消息 title: '请登录后再结算!' + n + ' 秒后自动跳转到登录页', // 为页面添加透明遮罩,防止点击穿透 mask: true, // 1.5 秒后自动消失 duration: 1500 }) }, // 延迟导航到 my 页面 delayNavigate() { // 把 data 中的秒数重置成 3 秒 this.seconds = 3 this.showTips(this.seconds) // 1. 将定时器的 Id 存储到 timer 中 this.timer = setInterval(() => { this.seconds-- // 2. 判断秒数是否 <= 0 if (this.seconds <= 0) { // 2.1 清除定时器 clearInterval(this.timer) // 2.2 跳转到 my 页面 uni.switchTab({ url: '/pages/my/my', // 页面跳转成功之后的回调函数 success: () => { // 调用 vuex 的 updateRedirectInfo 方法,把跳转信息存储到 Store 中 this.updateRedirectInfo({ // 跳转的方式 openType: 'switchTab', // 从哪个页面跳转过去的 from: '/pages/cart/cart' }) } }) // 2.3 终止后续代码的运行(当秒数为 0 时,不再展示 toast 提示消息) return } this.showTips(this.seconds) }, 1000) }, buttonTap: function() { this.setData({ modalHidden: false }) }, /** * 点击取消 */ modalCandel: function() { // do something this.setData({ modalHidden: true }) }, /** * 点击确认 */ modalConfirm: function() { // do something this.setData({ modalHidden: true }) } } } </script> <style lang="scss"> .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; } } </style>
实现效果: