你好,我是Qiuner. 为记录自己编程学习过程和帮助别人少走弯路而写博客 这是我的 github https://github.com/Qiuner ⭐️ gitee https://gitee.com/Qiuner 🌹 如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^) 想看更多 那就点个关注吧 我会尽力带来有趣的内容 😎
静态导入的代码有问题 需要修改
// src/pagesMember/settings/settings.vue
<navigator url="/pagesMember/address/address" hover-class="none" class="item arrow">
数据回显
eslint-disable
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>
<button @tap="onDeleteCart(item.skuId)" class="button delete-button">删除</button>
<button @tap="($event) => onDeleteCart(item.skuId)" class="button delete-button">
这两种方式在功能上是等效的,它们都会在按钮被点击时触发
onDeleteCart
方法并传递相应的参数item.skuId
。然而,它们的写法略有不同:
<button @tap="onDeleteCart(item.skuId)" class="button delete-button">删除</button>
:这是一种直接绑定事件处理函数的方式。当按钮被点击时,会直接调用 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 }}) 登录后可查看购物车中的商品 去登录