From 9a139cc25da8396c1b257ccf99eb8d2fedfbc94d Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期三, 23 十月 2024 17:24:35 +0800
Subject: [PATCH] 添加校验，修改头像
---
pages/addCard/index.vue | 131 ++++++++++++++++++++++++++-----------------
1 files changed, 80 insertions(+), 51 deletions(-)
diff --git a/pages/addCard/index.vue b/pages/addCard/index.vue
index 8e0ef25..c9bb53c 100644
--- a/pages/addCard/index.vue
+++ b/pages/addCard/index.vue
@@ -21,29 +21,51 @@
}
});
}
+//校验
+const formRef = ref()
+const rules = ref({
+ waterCardNumber: {
+ rules:[
+ {required: true,errorMessage: '请输入卡号'}]
+ },
+ userName: {
+ rules:[
+ {required: true,errorMessage: '请输入姓名'},
+ {pattern:/^[\u4e00-\u9fa5\\.]+$/, errorMessage: '请输入中文或" . "符号'}
+ ]
+ },
+ userPhone: {
+ rules:[
+ {required: true,errorMessage: '请输入您的手机号'},
+ {pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确'}
+ ]
+ },
+})
async function submit(){
- await creatUserArchive(form.value).then((res) =>{
- if(res.code == 200){
- uni.showToast({
- title: '添加成功！',
- image: '../../static/images/other/success.svg',
- duration:2000
- }).then(() =>{
- uni.navigateBack()
- })
- }else if(res.code == 300){
- uni.showToast({
- title: res.msg,
- duration:2000,
- icon:'none'
- })
- }else{
- uni.showToast({
- title:'绑卡失败',
- duration:2000,
- icon:'none'
- })
- }
+ formRef.value.validate().then(async() =>{
+ await creatUserArchive(form.value).then((res) =>{
+ if(res.code == 200){
+ uni.showToast({
+ title: '添加成功！',
+ image: '../../static/images/other/success.svg',
+ duration:2000
+ }).then(() =>{
+ uni.navigateBack()
+ })
+ }else if(res.code == 300){
+ uni.showToast({
+ title: res.msg,
+ duration:2000,
+ icon:'none'
+ })
+ }else{
+ uni.showToast({
+ title:'绑卡失败',
+ duration:2000,
+ icon:'none'
+ })
+ }
+ })
})
}
onMounted(() =>{
@@ -56,6 +78,25 @@
<view class="main">
<view class="title">请填写卡及个人信息</view>
<view class="form">
+ <uni-forms ref="formRef" :model="form" :rules="rules" label-width = 100>
+ <uni-forms-item class="form-item" label="卡号：" name="waterCardNumber">
+ <view class="card-item">
+ <input v-model="form.waterCardNumber" placeholder="请输入卡号或扫描二维码" />
+ <image @click="toScan()" src="../../static/images/addCard/code.png" alt=""></image>
+ </view>
+ </uni-forms-item>
+ <uni-forms-item label="姓名：" name="userName">
+ <input v-model="form.userName" placeholder="请输入姓名" />
+ </uni-forms-item>
+ <uni-forms-item label="联系方式：" name="userPhone">
+ <input type="textarea" v-model="form.userPhone" placeholder="请输入手机号" />
+ </uni-forms-item>
+ <uni-forms-item label="备注：" name="remark">
+ <input type="textarea" v-model="form.remark" placeholder="请输入内容" />
+ </uni-forms-item>
+ </uni-forms>
+ </view>
+ <!-- <view class="form">
<view class="form-item card-item">
<text>卡号：</text>
<input v-model="form.waterCardNumber" placeholder="请输入卡号"/>
@@ -73,10 +114,10 @@
<text>备注：</text>
<input v-model="form.remark" placeholder="请输入内容"/>
</view>
- </view>
+ </view> -->
<view class="tips">
<text>1、完成实名认证，方便遗失挂失及补卡等。</text>
- <text>2、绑卡后，运营商可以看到您实名时填写的 姓名和电话。</text>
+ <text>2、绑卡后，运营商可以看到您实名时填写的姓名和电话。</text>
</view>
<view class="subBtn" @click="submit()">提交信息</view>
</view>
@@ -95,7 +136,7 @@
width:100%;
height: calc(100vh - 176rpx);
background:linear-gradient(to top,#FFFFFF,#E8EFFF);
- padding:0 32rpx 38rpx;
+ padding:0 50rpx 38rpx;
box-sizing:border-box;
.title{
width:100%;
@@ -105,38 +146,26 @@
// background: #e6e6e6;
}
.form{
- height: 700rpx;
+ height: 600rpx;
width:100%;
background: #FFFFFF;
border-radius: 24rpx;
- .form-item{
- height:100rpx;
- width:96%;
- border-bottom:1px solid rgba(226,226,226,0.6);
- display: flex;
- justify-content:space-between;
- align-items: center;
- margin: 0 auto;
- text{
- width:160rpx;
- font-weight:400;
- font-size: 32rpx;
- color: #000000;
- margin-left: 24rpx;
- // margin-right: 82rpx;
- }
- input{
- width: 450rpx;
- :deep(.uni-input-placeholder ){
- font-weight: 300;
- font-size:32rpx;
- color: #ccc;
- }
- }
+ padding:30rpx 50rpx 0;
+ box-sizing: border-box;
+ input{
+ line-height:100%;
+ height:100%;
}
.card-item{
+ display: flex;
+ justify-content: space-around;
+ height:100%;
+ align-items: center;
input{
width:375rpx;
+ margin-right:20rpx;
+ line-height:100%;
+ height:100%;
}
image{
width:44rpx;
@@ -154,7 +183,7 @@
flex-direction: column;
margin-top:56rpx;
font-weight: 300;
- font-size: 32rpx;
+ font-size:28rpx;
color: #484848;
text:first-child{
margin-bottom:28rpx;
--
Gitblit v1.9.3