第二阶段每日汇报20230504

小程序端实现了程序代码的优化，把每一个前端展示的控件独立出来，使的展示界面是由许多的部分空间组成的，从而减少了误删的操作，同时大大提高了代码的复用性。

这是my-settle.vue，他用来展示在购物车界面的底部展示框。

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

<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>