| | |
| | | } |
| | | }); |
| | | } |
| | | //校验 |
| | | 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(() =>{ |
| | |
| | | <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="请输入卡号"/> |
| | |
| | | <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> |
| | |
| | | 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%; |
| | |
| | | // 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; |
| | |
| | | flex-direction: column; |
| | | margin-top:56rpx; |
| | | font-weight: 300; |
| | | font-size: 32rpx; |
| | | font-size:28rpx; |
| | | color: #484848; |
| | | text:first-child{ |
| | | margin-bottom:28rpx; |