黑马程序员uni-app 小兔鲜儿 项目及bug记录（下） Day 5（有作业）

黑马程序员uni-app 小兔鲜儿 项目及bug记录（下） Day 5

• 可在微信小程序端的控制台里通过输入 getCurrenPages( ) 打印未被销毁的页面们
• 同理 也可在控制台输入很多东西 来便于开发和调试

Day 5

地址模块

• 静态导入的代码有问题 需要修改

  // src/pagesMember/settings/settings.vue
        
  <navigator url="/pagesMember/address/address" hover-class="none" class="item arrow">
  
  

• 修改地址这里传递了要修改哪个地址的id 于是在子组件进行接收 然后进行判断

• 这里的代码没有什么好说的 和前面的代码高度重复 相关文档也有代码 就不贴了

• 下面是一个Vue的基本解释

为什么会有ev.detail.value而不是ev.value

• 因为这是vue的事件对象，每一个事件处理函数都有一个事件处理对象叫 event 或叫ev
• 这个事件对象将数据放在了detail里面

地址列表渲染

• 使用onShow解决只有在页面加载的时候才刷新问题

修改地址模块

数据回显

使用uniapp校验表单

第一步 定义校验规则

• 以上为表单的数据和字段

• 后面的errorMessage是标签

第二步 更改原本的标签

• 收货地址删除

SKU模块

• SKU发明就是为了解决商品有没有货的问题

• 使用这个注释解决es校验

eslint-disable

• https://ext.dcloud.net.cn/plugin?id=2848

SKU模块大bug

• 本bug会导致后面都无法运行 在购物车种可以正常弹出 但后面点击商品详情缺不能正常显示

• 换成这个就好了

      if (val > this.max) {
        val = this.max
      } else if (val < this.min) {
        val = this.min
      }

• 下面是健全的代码

<!-- 步进器 -->
<template>
  <view class="vk-data-input-number-box">
    <view
      class="u-icon-minus"
      :class="{ 'u-icon-disabled': disabled || inputVal <= min }"
      :style="{
        background: bgColor,
        height: inputHeight + 'rpx',
        color: color,
        fontSize: size + 'rpx',
        minHeight: '1.4em',
      }"
      @click="emptyClick"
      @touchstart.prevent="btnTouchStart('minus')"
      @touchend.stop.prevent="clearTimer"
    >
      <view :style="'font-size:' + (Number(size) + 10) + 'rpx'" class="num-btn">－</view>
    </view>
    <input
      v-model="inputVal"
      :disabled="disabledInput || disabled"
      :cursor-spacing="getCursorSpacing"
      :class="{ 'u-input-disabled': disabled }"
      class="u-number-input"
      type="number"
      :style="{
        color: color,
        fontSize: size + 'rpx',
        background: bgColor,
        height: inputHeight + 'rpx',
        width: inputWidth + 'rpx',
      }"
      @blur="onBlur"
      @click="showInput = true"
    />
    <view
      class="u-icon-plus"
      :class="{ 'u-icon-disabled': disabled || inputVal >= max }"
      :style="{
        background: bgColor,
        height: inputHeight + 'rpx',
        color: color,
        fontSize: size + 'rpx',
        minHeight: '1.4em',
      }"
      @click="emptyClick"
      @touchstart.prevent="btnTouchStart('plus')"
      @touchend.stop.prevent="clearTimer"
    >
      <view :style="'font-size:' + (Number(size) + 10) + 'rpx'" class="num-btn">＋</view>
    </view>
  </view>
</template>
<script>
/* eslint-disable */

/**
 * numberBox 步进器（此为uview组件改造）
 * @description 该组件一般用于商城购物选择物品数量的场景。注意：该输入框只能输入大于或等于0的整数，不支持小数输入
 * @tutorial https://www.uviewui.com/components/numberBox.html
 * @property {Number} value 输入框初始值（默认1）
 * @property {String} bg-color 输入框和按钮的背景颜色（默认#F2F3F5）
 * @property {Number} min 用户可输入的最小值（默认0）
 * @property {Number} max 用户可输入的最大值（默认99999）
 * @property {Number} step 步长，每次加或减的值（默认1）
 * @property {Number} stepFirst 步进值，首次增加或最后减的值(默认step值和一致）
 * @property {Boolean} disabled 是否禁用操作，禁用后无法加减或手动修改输入框的值（默认false）
 * @property {Boolean} disabled-input 是否禁止输入框手动输入值（默认false）
 * @property {Boolean} positive-integer 是否只能输入正整数（默认true）
 * @property {String | Number} size 输入框文字和按钮字体大小，单位rpx（默认26）
 * @property {String} color 输入框文字和加减按钮图标的颜色（默认#323233）
 * @property {String | Number} input-width 输入框宽度，单位rpx（默认80）
 * @property {String | Number} input-height 输入框和按钮的高度，单位rpx（默认50）
 * @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框
 * @property {Boolean} long-press 是否开启长按连续递增或递减(默认true)
 * @property {String | Number} press-time 开启长按触发后，每触发一次需要多久，单位ms(默认250)
 * @property {String | Number} cursor-spacing 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认200）
 * @event {Function} change 输入框内容发生变化时触发，对象形式
 * @event {Function} blur 输入框失去焦点时触发，对象形式
 * @event {Function} minus 点击减少按钮时触发(按钮可点击情况下)，对象形式
 * @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)，对象形式
 * @example <vk-data-input-number-box :min="1" :max="100"></vk-data-input-number-box>
 */
export default {
  name: 'vk-data-input-number-box',
  emits: ['update:modelValue', 'input', 'change', 'blur', 'plus', 'minus'],
  props: {
    // 预显示的数字
    value: {
      type: Number,
      default: 1,
    },
    modelValue: {
      type: Number,
      default: 1,
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: '#FFFFFF',
    },
    // 最小值
    min: {
      type: Number,
      default: 0,
    },
    // 最大值
    max: {
      type: Number,
      default: 99999,
    },
    // 步进值，每次加或减的值
    step: {
      type: Number,
      default: 1,
    },
    // 步进值，首次增加或最后减的值
    stepFirst: {
      type: Number,
      default: 0,
    },
    // 是否只能输入 step 的倍数
    stepStrictly: {
      type: Boolean,
      default: false,
    },
    // 是否禁用加减操作
    disabled: {
      type: Boolean,
      default: false,
    },
    // input的字体大小，单位rpx
    size: {
      type: [Number, String],
      default: 26,
    },
    // 加减图标的颜色
    color: {
      type: String,
      default: '#323233',
    },
    // input宽度，单位rpx
    inputWidth: {
      type: [Number, String],
      default: 80,
    },
    // input高度，单位rpx
    inputHeight: {
      type: [Number, String],
      default: 50,
    },
    // index索引，用于列表中使用，让用户知道是哪个numberbox发生了变化，一般使用for循环出来的index值即可
    index: {
      type: [Number, String],
      default: '',
    },
    // 是否禁用输入框，与disabled作用于输入框时，为OR的关系，即想要禁用输入框，又可以加减的话
    // 设置disabled为false，disabledInput为true即可
    disabledInput: {
      type: Boolean,
      default: false,
    },
    // 输入框于键盘之间的距离
    cursorSpacing: {
      type: [Number, String],
      default: 100,
    },
    // 是否开启长按连续递增或递减
    longPress: {
      type: Boolean,
      default: true,
    },
    // 开启长按触发后，每触发一次需要多久
    pressTime: {
      type: [Number, String],
      default: 250,
    },
    // 是否只能输入大于或等于0的整数(正整数)
    positiveInteger: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    valueCom(v1, v2) {
      // 只有value的改变是来自外部的时候，才去同步inputVal的值，否则会造成循环错误
      if (!this.changeFromInner) {
        this.inputVal = v1
        // 因为inputVal变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
        // 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
        // 将changeFromInner设置为false
        this.$nextTick(function () {
          this.changeFromInner = false
        })
      }
    },
    inputVal(v1, v2) {
      // 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
      if (v1 == '') return
      let value = 0
      // 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
      let tmp = this.isNumber(v1)
      if (tmp && v1 >= this.min && v1 <= this.max) value = v1
      else value = v2
      // 判断是否只能输入大于等于0的整数
      if (this.positiveInteger) {
        // 小于0，或者带有小数点，
        if (v1 < 0 || String(v1).indexOf('.') !== -1) {
          value = v2
          // 双向绑定input的值，必须要使用$nextTick修改显示的值
          this.$nextTick(() => {
            this.inputVal = v2
          })
        }
      }
      // 发出change事件
      this.handleChange(value, 'change')
    },
    min(v1) {
      if (v1 !== undefined && v1 != '' && this.valueCom < v1) {
        this.$emit('input', v1)
        this.$emit('update:modelValue', v1)
      }
    },
    max(v1) {
      if (v1 !== undefined && v1 != '' && this.valueCom > v1) {
        this.$emit('input', v1)
        this.$emit('update:modelValue', v1)
      }
    },
  },
  data() {
    return {
      inputVal: 1, // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
      timer: null, // 用作长按的定时器
      changeFromInner: false, // 值发生变化，是来自内部还是外部
      innerChangeTimer: null, // 内部定时器
      showInput: false,
    }
  },
  created() {
    this.inputVal = Number(this.valueCom)
  },
  computed: {
    valueCom() {
      // #ifndef VUE3
      return this.value
      // #endif

      // #ifdef VUE3
      return this.modelValue
      // #endif
    },
    getCursorSpacing() {
      // 先将值转为px单位，再转为数值
      return Number(uni.upx2px(this.cursorSpacing))
    },
  },
  methods: {
    // 空点击事件，主要用于解决PC端H5由于无click事件导致触摸位置不准确的问题
    emptyClick() {},
    // 触摸事件开始
    btnTouchStart(callback) {
      // 先执行一遍方法，否则会造成松开手时，就执行了clearTimer，导致无法实现功能
      this[callback]()
      // 如果没开启长按功能，直接返回
      if (!this.longPress) return
      clearInterval(this.timer) //再次清空定时器，防止重复注册定时器
      this.timer = null
      this.timer = setInterval(() => {
        // 执行加或减函数
        this[callback]()
      }, this.pressTime)
    },
    // 清除定时器
    clearTimer() {
      this.$nextTick(() => {
        clearInterval(this.timer)
        this.timer = null
      })
    },
    // 减
    minus() {
      this.computeVal('minus')
    },
    // 加
    plus() {
      this.computeVal('plus')
    },
    // 为了保证小数相加减出现精度溢出的问题
    calcPlus(num1, num2) {
      let baseNum, baseNum1, baseNum2
      try {
        baseNum1 = num1.toString().split('.')[1].length
      } catch (e) {
        baseNum1 = 0
      }
      try {
        baseNum2 = num2.toString().split('.')[1].length
      } catch (e) {
        baseNum2 = 0
      }
      baseNum = Math.pow(10, Math.max(baseNum1, baseNum2))
      let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2 //精度
      return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision)
    },
    // 为了保证小数相加减出现精度溢出的问题
    calcMinus(num1, num2) {
      let baseNum, baseNum1, baseNum2
      try {
        baseNum1 = num1.toString().split('.')[1].length
      } catch (e) {
        baseNum1 = 0
      }
      try {
        baseNum2 = num2.toString().split('.')[1].length
      } catch (e) {
        baseNum2 = 0
      }
      baseNum = Math.pow(10, Math.max(baseNum1, baseNum2))
      let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2
      return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision)
    },
    computeVal(type) {
      uni.hideKeyboard()
      if (this.disabled) return
      let value = 0
      // 新增stepFirst开始
      // 减
      if (type === 'minus') {
        if (this.stepFirst > 0 && this.inputVal == this.stepFirst) {
          value = this.min
        } else {
          value = this.calcMinus(this.inputVal, this.step)
        }
      } else if (type === 'plus') {
        if (this.stepFirst > 0 && this.inputVal < this.stepFirst) {
          value = this.stepFirst
        } else {
          value = this.calcPlus(this.inputVal, this.step)
        }
      }
      if (this.stepStrictly) {
        let strictly = value % this.step
        if (strictly > 0) {
          value -= strictly
        }
      }
      if (value > this.max) {
        value = this.max
      } else if (value < this.min) {
        value = this.min
      }
      // 新增stepFirst结束
      this.inputVal = value
      this.handleChange(value, type)
    },
    // 处理用户手动输入的情况
    onBlur(event) {
      let val = 0
      let value = event.detail.value
      // 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
      // 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
      if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min
      val = +value

      // 新增stepFirst开始
      if (this.stepFirst > 0 && this.inputVal < this.stepFirst && this.inputVal > 0) {
        val = this.stepFirst
      }
      // 新增stepFirst结束
      if (this.stepStrictly) {
        let strictly = val % this.step
        if (strictly > 0) {
          val -= strictly
        }
      }
       if (val > this.max) {
        val = this.max
      } else if (val < this.min) {
        val = this.min
      }

      this.$nextTick(() => {
        this.inputVal = val
      })
      this.handleChange(val, 'blur')
    },
    handleChange(value, type) {
      if (this.disabled) return
      // 清除定时器，避免造成混乱
      if (this.innerChangeTimer) {
        clearTimeout(this.innerChangeTimer)
        this.innerChangeTimer = null
      }
      // 发出input事件，修改通过v-model绑定的值，达到双向绑定的效果
      this.changeFromInner = true
      // 一定时间内，清除changeFromInner标记，否则内部值改变后
      // 外部通过程序修改value值，将会无效
      this.innerChangeTimer = setTimeout(() => {
        this.changeFromInner = false
      }, 150)
      this.$emit('input', Number(value))
      this.$emit('update:modelValue', Number(value))
      this.$emit(type, {
        // 转为Number类型
        value: Number(value),
        index: this.index,
      })
    },
    /**
     * 验证十进制数字
     */
    isNumber(value) {
      return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)
    },
  },
}
</script>

<style lang="scss" scoped>
.vk-data-input-number-box {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

.u-number-input {
  position: relative;
  text-align: center;
  padding: 0;
  margin: 0rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #f4f4f4;
  border-left: 0;
  border-right: 0;
  box-sizing: border-box;
}

.u-icon-plus,
.u-icon-minus {
  width: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2rpx solid #f4f4f4;
  box-sizing: border-box;
}

.u-icon-plus {
  border-radius: 0 8rpx 8rpx 0;
}

.u-icon-minus {
  border-radius: 8rpx 0 0 8rpx;
}

.u-icon-disabled {
  color: #c8c9cc !important;
  background-color: #f2f3f5 !important;
}

.u-input-disabled {
  color: #c8c9cc !important;
  background-color: #f2f3f5 !important;
}
.num-btn {
  font-weight: 550;
  line-height: 50rpx;
}
</style>

打开弹窗设置按钮

• 其实就是这个SKU组件自己规定的写法

购物车模块 有最终代码

列表渲染

购物车下面的猜你喜欢分页加载

• 要做的事情其实很简单 前面已经将函数封装好了 因此只需要再使用猜你喜欢的地方调用函数就好了

$event

 <button @tap="onDeleteCart(item.skuId)" class="button delete-button">删除</button>
       
<button @tap="($event) => onDeleteCart(item.skuId)" class="button delete-button">

这两种方式在功能上是等效的，它们都会在按钮被点击时触发 onDeleteCart 方法并传递相应的参数 item.skuId。然而，它们的写法略有不同：

1. <button @tap="onDeleteCart(item.skuId)" class="button delete-button">删除</button>：这是一种直接绑定事件处理函数的方式。当按钮被点击时，会直接调用 onDeleteCart 方法，并将 item.skuId 作为参数传递给该方法。
2. <button @tap="($event) => onDeleteCart(item.skuId)" class="button delete-button">删除</button>：这是一种使用箭头函数的方式。它创建了一个匿名函数，这个函数接收一个参数 $event，然后调用 onDeleteCart 方法并传递 item.skuId 作为参数。

• 除此之外最明显的区别应该是使用箭头函数可以在调用函数前 添加使用逻辑

<button @tap="($event) => {
  if (confirm('确定要删除吗？')) {
    onDeleteCart(item.skuId)
  }
}" class="button delete-button">删除</button>

两个购物车页面

作业

购物车二 猜你喜欢分页加载 答案

const { guessRef, onScrolltolower } = useGuessList()
 <scroll-view
    scroll-y
    class="scroll-view"
    @scrolltolower="onScrolltolower"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >

底部工具栏安全区适配

• 不知道我写的是不是对的

<script setup lang="ts">
// 获取会员store
import {
  getMemberCartAPI,
  deleteMemberCartAPI,
  putMemberCartBySkuIdAPI,
  putMemberCartSelectedAPI,
} from '@/services/cart'
import { useMemberStore } from '@/stores'
import type { CartItem } from '@/types/cart'
import { onShow } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import { useGuessList } from '@/composables/index'
import type { InputNumberBoxEvent } from '@/components/vk-data-input-number-box/vk-data-input-number-box'

// 获取会员Store
const memberStore = useMemberStore()

// 获取购物车数据
const cartList = ref<CartItem[]>([])
const getMemberCartData = async () => {
  const res = await getMemberCartAPI()
  cartList.value = res.result
}

const { guessRef, onScrolltolower } = useGuessList()

// 点击删除 按钮
const onDeleteCart = (skuId: string) => {
  //弹窗二次
  uni.showModal({
    content: '是否删除',
    success: async (res) => {
      if (res.confirm) {
        // 删除后再查询数据
        await deleteMemberCartAPI({ ids: [skuId] })
        getMemberCartData()
      }
    },
  })
}

// 初始化调用: 页面显示触发
onShow(() => {
  // 用户已登录才允许调用
  if (memberStore.profile) {
    getMemberCartData()
  }
})

// 修改商品数量
const onChangeCount = (ev: InputNumberBoxEvent) => {
  putMemberCartBySkuIdAPI(ev.index, { count: ev.value })
}

// 修改选中状态-单品修改
const onChangeSelected = (item: CartItem) => {
  // 前端数据更新-是否选中取反
  item.selected = !item.selected
  // 后端数据更新
  putMemberCartBySkuIdAPI(item.skuId, { selected: item.selected })
}

// 计算全选状态
const isSelectedAll = computed(() => {
  return cartList.value.length && cartList.value.every((v) => v.selected)
})

// 修改选中状态-全选修改
const onChangeSelectedAll = () => {
  // 全选状态取反
  const _isSelectedAll = !isSelectedAll.value
  // 前端数据更新
  cartList.value.forEach((item) => {
    item.selected = _isSelectedAll
  })
  // 后端数据更新
  putMemberCartSelectedAPI({ selected: _isSelectedAll })
}

// 计算选中单品列表
const selectedCartList = computed(() => {
  return cartList.value.filter((v) => v.selected)
})

// 计算选中总件数
const selectedCartListCount = computed(() => {
  return selectedCartList.value.reduce((sum, item) => sum + item.count, 0)
})

// 计算选中总金额
const selectedCartListMoney = computed(() => {
  return selectedCartList.value
    .reduce((sum, item) => sum + item.count * item.nowPrice, 0)
    .toFixed(2)
})

// 结算按钮
const gotoPayment = () => {
  if (selectedCartListCount.value === 0) {
    return uni.showToast({
      icon: 'none',
      title: '请选择商品',
    })
  }
  // 跳转到结算页
  uni.navigateTo({ url: '/pagesOrder/create/create' })
}

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<template>
  <scroll-view
    scroll-y
    class="scroll-view"
    @scrolltolower="onScrolltolower"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <!-- 已登录: 显示购物车 -->
    <template v-if="memberStore.profile">
      <!-- 购物车列表 -->
      <view class="cart-list" v-if="cartList.length">
        <!-- 优惠提示 -->
        <view class="tips">
          <text class="label">满减</text>
          <text class="desc">满1件, 即可享受9折优惠</text>
        </view>
        <!-- 滑动操作分区 -->
        <uni-swipe-action>
          <!-- 滑动操作项 -->
          <uni-swipe-action-item v-for="item in cartList" :key="item.skuId" class="cart-swipe">
            <!-- 商品信息 -->
            <view class="goods">
              <!-- 选中状态 -->
              <text
                @tap="onChangeSelected(item)"
                class="checkbox"
                :class="{ checked: item.selected }"
              >
              </text>
              <navigator
                :url="`/pages/goods/goods?id=${item.id}`"
                hover-class="none"
                class="navigator"
              >
                <image mode="aspectFill" class="picture" :src="item.picture"></image>
                <view class="meta">
                  <view class="name ellipsis">{{ item.name }}</view>
                  <view class="attrsText ellipsis">{{ item.attrsText }}</view>
                  <view class="price">{{ item.price }}</view>
                </view>
              </navigator>
              <!-- 商品数量 -->
              <view class="count">
                <!-- 商品数量 -->
                <view class="count">
                  <vk-data-input-number-box
                    v-model="item.count"
                    :min="1"
                    :max="item.stock"
                    :index="item.skuId"
                    @change="onChangeCount"
                  />
                </view>
              </view>
            </view>
            <!-- 右侧删除按钮 -->
            <template #right>
              <view class="cart-swipe-right">
                <button @tap="($event) => onDeleteCart(item.skuId)" class="button delete-button">
                  删除
                </button>
              </view>
            </template>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
      <!-- 购物车空状态 -->
      <view class="cart-blank" v-else>
        <image src="/static/images/blank_cart.png" class="image" />
        <text class="text">购物车还是空的，快来挑选好货吧</text>
        <navigator open-type="switchTab" url="/pages/index/index" hover-class="none">
          <button class="button">去首页看看</button>
        </navigator>
      </view>
      <!-- 吸底工具栏 -->
      <view class="toolbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
        <text @tap="onChangeSelectedAll" class="all" :class="{ checked: isSelectedAll }">全选</text>
        <text class="text">合计:</text>
        <text class="amount"> {{ selectedCartListMoney }}</text>
        <view class="button-grounp">
          <view
            class="button payment-button"
            :class="{ disabled: selectedCartListCount === 0 }"
            @tap="gotoPayment"
          >
            去结算({{ selectedCartListCount }})
          </view>
        </view>
      </view>
    </template>
    <!-- 未登录: 提示登录 -->
    <view class="login-blank" v-else>
      <text class="text">登录后可查看购物车中的商品</text>
      <navigator url="/pages/login/login" hover-class="none">
        <button class="button">去登录</button>
      </navigator>
    </view>
    <!-- 猜你喜欢 -->
    <XtxGuess ref="guessRef"></XtxGuess>
    <!-- 底部占位空盒子 -->
    <view class="toolbar-height"></view>
  </scroll-view>
</template>

nChangeSelectedAll" class=“all” :class=“{ checked: isSelectedAll }”>全选
合计:
{{ selectedCartListMoney }}

<view
class=“button payment-button”
:class=“{ disabled: selectedCartListCount === 0 }”
@tap=“gotoPayment”
>
去结算({{ selectedCartListCount }})






登录后可查看购物车中的商品

去登录