From 55ee7bd313c7d8030ce8c547b18ad5f19507afd2 Mon Sep 17 00:00:00 2001
From: 石广澎 <shiguangpeng@163.com>
Date: 星期日, 30 十一月 2025 16:12:37 +0800
Subject: [PATCH] feat(pay): 新增会员充值和次卡购买页面
---
components/input-number/input-number.vue | 171 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 171 insertions(+), 0 deletions(-)
diff --git a/components/input-number/input-number.vue b/components/input-number/input-number.vue
new file mode 100644
index 0000000..837e849
--- /dev/null
+++ b/components/input-number/input-number.vue
@@ -0,0 +1,171 @@
+<template>
+ <view class="count-box" :class="status ? 'count-box-light' : 'count-box-gray'">
+
+ <view class="count-less count-pub" :class="[myValue <= min ? 'light' : '']" @tap.stop="less"></view>
+ <view class="u-rela u-flex u-col-center">
+ <view class="plc">{{myValue}}</view>
+ <input type="number" v-model="myValue" @focus="onFocus" @blur="onBlue" class="count-input" />
+ </view>
+
+ <view class="count-add count-pub" :class="[myValue >= max ? 'light' : '']" @tap.stop="add"></view>
+ </view>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ myValue: 0,
+ status: false
+ }
+ },
+ props: {
+ // 璁℃暟鍣ㄤ腑鐨勫��
+ value: {
+ type: Number,
+ default: 0
+ },
+ max: {
+ type: Number,
+ default: 10000
+ },
+ min: {
+ type: Number,
+ default: 0
+ },
+ type: {
+ type: String,
+ default: 'small'
+ }
+ },
+ created() {
+ this.myValue = this.value
+ },
+ watch: {
+ value(val) {
+ this.myValue = val
+ }
+ },
+ methods: {
+ onBlue() {
+ if (+this.myValue >= this.max) {
+ this.myValue = this.max
+ this.status = false
+ } else if (+this.myValue <= this.min) {
+ this.myValue = this.min
+ this.status = false
+ } else {
+ this.status = true
+ this.myValue = +this.myValue
+ }
+ if (!isNaN(this.myValue)) {
+ this.$emit('handleCount', this.myValue)
+ } else {
+ this.$emit('handleCount', 0)
+ }
+
+ },
+ onFocus() {
+ this.status = true
+ },
+ add() {
+ if (this.myValue >= this.max) {
+ this.status = false
+ this.myValue = this.max
+ uni.showToast({
+ title: "宸茶秴杩囨渶澶хН鍒�",
+ icon: "none"
+ })
+ this.myValue = this.max
+ } else {
+ this.status = true
+ this.myValue++
+ }
+ this.$emit('handleCount', this.myValue)
+ },
+ less() {
+ if (this.myValue <= this.min) {
+ this.status = false
+ this.myValue = this.min
+ uni.showToast({
+ title: "涓嶈兘鍐嶅皯浜�",
+ icon: "none"
+ })
+ this.myValue = this.min
+ } else {
+ this.status = true
+ this.myValue--
+ }
+ this.$emit('handleCount', this.myValue)
+ }
+ }
+ }
+</script>
+<style lang="less" scoped>
+ .gray {
+ color: #555555;
+ }
+
+ .light {
+ color: #C8C7CC;
+ }
+
+ .count-box {
+ display: flex;
+ align-items: center;
+ height: 60rpx;
+ }
+
+ .count-pub {
+ width: 42rpx;
+ height: 42rpx;
+ }
+
+ .count-less {
+ left: 0;
+ width: 42rpx;
+ height: 42rpx;
+ background: url(../../static/cart/icon_less.png) no-repeat;
+ background-size: 42rpx;
+ }
+
+ .count-add {
+ right: 0;
+ width: 42rpx;
+ height: 42rpx;
+ background: url(../../static/cart/icon_add.png) no-repeat;
+ background-size: 42rpx;
+ }
+
+ .count-less.light {
+ background: url(../../static/cart/icon_lessLight.png) no-repeat;
+ background-size: 42rpx;
+ }
+
+ .count-add.light {
+ background: url(../../static/cart/icon_addLight.png) no-repeat;
+ background-size: 42rpx;
+ }
+
+ .count-input {
+ position: absolute;
+ width: 100%;
+ height: 42rpx;
+ line-height: 42rpx;
+ padding: 0 10rpx;
+ box-sizing: border-box;
+ color: #333;
+ font-size: 30rpx;
+ text-align: center;
+ }
+
+ .plc {
+ height: 42rpx;
+ line-height: 1;
+ text-align: center;
+ min-width: 70rpx;
+ font-size: 30rpx;
+ padding: 0 12rpx;
+ visibility: hidden;
+ }
+</style>
--
Gitblit v1.9.1