From ad876a6fea2df6e2a831d4c9d95cf724855610f4 Mon Sep 17 00:00:00 2001 From: Liuyi <candymxq888@outlook.com> Date: 星期六, 14 十二月 2024 16:43:35 +0800 Subject: [PATCH] 修复用户微信扫码进入小程序无法跳转及登录问题,修改会员卡解绑接口 --- pages/addCard/index.vue | 162 +++++++++++++++++++++++++++++++---------------------- 1 files changed, 94 insertions(+), 68 deletions(-) diff --git a/pages/addCard/index.vue b/pages/addCard/index.vue index a9d81c4..c9bb53c 100644 --- a/pages/addCard/index.vue +++ b/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; -- Gitblit v1.9.3