uniapp|微信小程序 实现输入四位数 空格隔开

news2024/9/21 8:23:37

<template>
  <page-meta :page-style="cssVar"></page-meta>
  <view class="container">
    <u-navbar
      title="优惠券兑换"
      placeholder
      bgColor="#fff"
      :autoBack="true"
      :titleStyle="{
        fontFamily: 'SourceHanSansCN-Medium',
      }"
    ></u-navbar>
    <view class="main">
      <view class="image-container">
        <image class="img-item" src="@/assets/images/meituan.png" />
        <image class="img-item" src="@/assets/images/douyin.png" />
        <image class="img-item" src="@/assets/images/dazhongdianping.png" />
      </view>
      <view class="form-container">
        <view class="input-container">
          <u-input
            type="number"
            :modelValue="codeValue"
            placeholder="输入美团/抖音/大众点评券码"
            @change="valueChange"
            clearable
          />
        </view>
        <u-button
          :disable="!codeValue"
          @click="handleConfirm"
          class="form-btn"
          text="确认修改"
          :customStyle="btnStyle"
        ></u-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue';
const codeValue = ref('');

const handleConfirm = async () => {
  if (!codeValue.value) return;
  uni.showLoading({ title: '兑换中', mask: true });
  const value = codeValue.value.replace(/\s/g, '');
  const params = {
    code: value,
  };
  const { code } = await couponUserCoinCertificate(params); // 你的兑换接口
  if (code === '0') {
    uni.showToast({ title: '兑换成功' });
  }
};

const btnStyle = computed(() => {
  return { background: !codeValue.value ? '#CCCCCC' : 'var(--main-color)' };
});

// 实现空格的关键
function valueChange(e) {
  // 先移除所有空格
  var noSpacesValue = e.replace(/\s/g, '');
  // 然后每四个字符添加一个空格
  var formattedValue = noSpacesValue.replace(/(.{4})/g, '$1 ').trim();
  // 移除最后一个空格(如果存在)
  formattedValue = formattedValue.replace(/\s+$/, '');
  codeValue.value = formattedValue;
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2151810.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VScode 修改 cursor 键盘设置

vscode 中按下 ctrl K 后 ctrl s 打开键盘快捷键设置。 搜索光标 cursor 找到 cursorDown 以及对应需要修改的快捷键命令 右键 添加快捷键设置 修改即可 alt space 关闭win设置中的中英文切换 代码提示下移 selectPrevSuggestion 上移

模拟自然的本质:与IBM量子计算研究的问答

量子计算可能是计算领域的下一个重大突破&#xff0c;但它的一般概念仍然处于炒作和猜测的现状&#xff1f;它能破解所有已知的加密算法吗&#xff1f;它能设计出治愈所有疾病的新分子吗&#xff1f;它能很好地模拟过去和未来&#xff0c;以至于尼克奥弗曼能和他死去的儿子说话…

windows环境下MySQL启动失败 查看data文件夹中.err发现报错unknown variable ‘log‐bin=mysql‐bin‘

文章目录 问题解决方法 问题 今天在windows环境下配置MySQL主从同步&#xff0c;在修改my.ini文件后发现MySQL启动失败了 打开my.ini检查参数发现没有问题 [mysqld] #开启二进制日志&#xff0c;记录了所有更改数据库数据的SQL语句 log‐bin mysql‐bin #设置服务id&#x…

网络高级day01(Modbus 通信协议:Modbus TCP)

目录 1》modbus分类 1> Modbus RTU 2> Modbus ASCLL 3> Modbus TCP 2》Modbus TCP的特点 3》Modbus TCP协议 1> 报文头&#xff08;一共7个字节&#xff09; 2> 寄存器 3> 功能码 4> 数据 01H 功能码分析 05H 功能码分析 0FH 功能码分析 1》modbus…

Springboot常见问题(bean找不到)

如图错误显示userMapper bean没有找到。 解决方案&#xff1a; mapper包位置有问题&#xff1a;因为SpringBoot默认的包扫描机制会扫描启动类所在的包同级文件和子包下的文件。注解问题&#xff1a; 比如没有加mapper注解 然而无论是UserMapper所在的包位置还是Mapper注解都是…

虚拟机ens33网卡不显示inet地址(已设置NOBOOT为yes)

在虚拟机中输入ifconfig或ip addr时&#xff0c;出现如下情况&#xff1a; sudo dhclient ens33sudo ifconfig ens33依次执行上面两行&#xff0c;之后发现ens33中可以显示inet了 本虚拟机的地址就是192.168.244.131

Unity屏幕震动效果

基于Cinemachine 1、为Cinemachine设置拓展 2、选择ImpulseListener 3、为摄像机跟随的角色添加脚本 4、设置Impulse 5、选择类型 6、设置内置6DShake并调节振幅 7、运行时invoke即可

STM32F1+HAL库+FreeTOTS学习11——延时函数API

STM32F1HAL库FreeTOTS学习11——延时函数API 延时函数API1. vTaskDelay()2. vTaskDelayUntil()3. xTaskDelayUntil()相对延时和绝对延时的区别4. xTaskAbortDelay() 上一期&#xff0c;我们学习了任务相关API使用&#xff0c;这一期我们开始学习FreeRTOS延时函数的API使用 延时…

Python使用YOLOv5图像识别教程包成功-以识别桥墩缺陷详细步骤分享

前置环境资源下载 提示&#xff1a;要开外网才能下载的环境我都放在了网盘里&#xff0c;教程中用到的环境可从这里一并下载&#xff1a; https://pan.quark.cn/s/f0c36aa1ef60 1. 下载YOLOv5源码 官方地址&#xff1a;GitHub - ultralytics/yolov5: YOLOv5 &#x1f680; …

【源码+文档+调试讲解】微信小程序的投票系统

摘 要 伴随着我国社会的发展&#xff0c;人民生活质量日益提高。于是对各种需求进行规范而严格是十分有必要的&#xff0c;所以许许多多的微信小程序应运而生。此时单靠人力应对这些事务就显得有些力不从心了。所以本论文将设计一套微信小程序的投票系统&#xff0c;进行作品信…

python画图|曲线分段设置颜色基础教程

前期已经学习了大量的python画图教程&#xff0c;但颜色的设计一直是次要角色&#xff0c;今天我们就一起学习一下如何对图形分段设置颜色。 一些前期通过颜色区分图形的文章链接如下&#xff1a; python画图|极坐标下的3D surface_python 根据经纬度 海拔高度 绘制三维立体-…

AIDI工业AI视觉检测软件

AIDI工业AI视觉检测软件 AIDI2.4&#xff0c;工业AI视觉检测软件&#xff0c;全模块永久使用最高权限&#xff0c;支持8卡同时运算&#xff0c;提供远程测试

对接阿里asr和Azure asr

1&#xff1a;对接阿里asr 1.1&#xff1a;pom <dependency><groupId>com.alibaba.nls</groupId><artifactId>nls-sdk-recognizer</artifactId><version>2.2.1</version> </dependency>1.2&#xff1a;生成token package c…

同态加密明文矩阵乘密文向量优化:BSGS小步大步法

摘要 本文介绍如何使用小步大步&#xff08;Baby-Step-Giant-Step&#xff0c;BSGS&#xff09;优化RLWE同态加密的明文矩阵和密文向量的乘法。使用 n n n\times n nn明文矩阵的对角打包和BSGS&#xff0c;可以将密文旋转的次数降低为 O ( n ) O(\sqrt{n}) O(n ​). 明文运算…

3、无线通信系统的组成

通常把实现信息传输的系统称为通信系统&#xff0c;下图表示一个通信系统的基本组成。在通信系统中&#xff0c;一般要进行两种变换与反变换。在发送端&#xff0c;第一个变换是输入变换器&#xff0c;它把要传输的信号变为电信号&#xff0c;该信号一般是低频的&#xff0c;而…

数字英文验证码识别 API 对接说明

数字英文验证码识别 API 对接说明 本文将介绍一种 数字英文验证码识别 API 对接说明&#xff0c;它是基于深度学习技术&#xff0c;可用于识别变长英文数字验证码。输入验证码图像的内容&#xff0c;输出验证码结果。 接下来介绍下 数字英文验证码识别 API 的对接说明。 注册…

【d45】【Java】【力扣】206.反转链表

思路 解法1&#xff1a;适用于数字不多的 1.把节点的数&#xff0c;都放进一个arraylist中 2.调用Collections.reverse(list)方法&#xff0c;将list转置 3.再遍历list&#xff0c;逐个放入数字 代码 解法1 import java.util.ArrayList; import java.util.Collections;p…

window批处理脚本:将本地的三个文件通过SCP传输到Linux设备上

文件名send_file.bat&#xff1a; echo off setlocal:: 提示用户输入远程IP地址 set /p remoteIpAddressplease input IP::: 定义本地文件名 set "localFile1111" set "localFile2222" set "localFile3333":: 获取本地文件的完整路径 set "…

【AI视频】Runway:Gen-2 图文生视频与运动模式详解

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AI视频 | Runway 文章目录 &#x1f4af;前言&#x1f4af;仅图片生成视频方法一&#xff1a;通过Midjourney生成图片方法二&#xff1a;通过Runway预览生成图片注意点 &#x1f4af;图加文生成视频方式一&#xff1a;Midjourney…

百度飞浆Paddle OCR检测和识别【OCR数据收集、标注、数据集划分、检测识别模型训练、导出模型】

文章目录 前言一、OCR数据集采集二、OCR数据标注三、划分数据集四、数据训练五、导出模型 前言 1、我的电脑没有GPU&#xff0c;如果不使用AI Studio训练的话&#xff0c;第一遍我是按照CPU进行环境配置和训练的&#xff0c;可以参考这篇文章&#xff0c;我按着弄了一遍&#…