pages/addCard/index.vue
@@ -3,21 +3,69 @@
import{ creatUserArchive } from '../../api/index.js'
const form = ref({
   id:JSON.parse(uni.getStorageSync('userInfo')).id,
    waterCardNumber:'',
    userName:'',
    userPhone:'',
    remark:'',
})
async function submit(){
   await creatUserArchive(form.value).then((res) =>{
      if(res.code == 200){
         uni.showToast({
            title: '绑定成功',
            image: '../../static/images/other/success.svg',
            duration:500
         })
         uni.navigateBack()
function toScan(){
   // 调用二维码扫描接口
   uni.scanCode({
      scanType: ['qrCode'],
      success: function (res) {
         console.log('条码内容:' + res.result);
         let data = res.result.split('&id=')
         form.value.waterCardNumber = data[1]
         console.log('form.value.waterCardNumber',form.value.waterCardNumber)
      }
   });
}
//校验
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(){
   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(() =>{
@@ -30,10 +78,29 @@
         <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="请输入卡号"/>
                  <image src="../../static/images/addCard/code.png" alt=""></image>
                  <image @click="toScan()" src="../../static/images/addCard/code.png" alt=""></image>
               </view>
               <view class="form-item">
                  <text>姓名:</text>
@@ -43,22 +110,14 @@
                  <text>联系方式:</text>
                  <input v-model="form.userPhone" placeholder="请输入手机号"/>
               </view>
               <!-- <view class="form-item">
                  <text>区域:</text>
                  <input v-model="form.waterCardNumber" placeholder="请选择区域"/>
               </view>
               <view class="form-item">
                  <text>地址:</text>
                  <input v-model="form.waterCardNumber" placeholder="请输入地址"/>
               </view> -->
               <view class="form-item">
                  <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>
@@ -73,32 +132,11 @@
         .content{
            width:100%;
            height:100vh;
            .navbar{
               width:100%;
               height:176rpx;
               background: linear-gradient(to bottom,#5EA1FA,#8BC1FC);
               display: flex;
               align-items: flex-end;
               padding-bottom:24rpx;
               box-sizing: border-box;
               image{
                  width:20rpx;
                  height:40rpx;
                  margin-left:32rpx;
               }
               text{
                  font-weight: 400;
                  font-size: 36rpx;
                  color: #000000;
                  margin-left: 234rpx;
               }
            }
         .main{
            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%;
@@ -108,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;
@@ -157,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;