You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
413 lines
11 KiB
413 lines
11 KiB
<template>
|
|
<view class="page-container">
|
|
<!-- 顶部背景 + 标题 -->
|
|
<view class="top-bar">
|
|
<image class="top-bar-bg" src="@/static/images/mingqi-beij@2x.png" mode="aspectFill"></image>
|
|
<view class="library-info">
|
|
<image class="avatar" src="@/static/images/logo.jpg" mode="aspectFill"></image>
|
|
<view class="library-name">葛店经济技术开发区图书馆</view>
|
|
<view class="sub-title">读者证办理</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 表单卡片 -->
|
|
<view class="form-card">
|
|
<!-- 姓名 -->
|
|
<view class="form-item">
|
|
<uni-icons class="form-icon" custom-prefix="iconfont" type="icon-xingming" size="22"></uni-icons>
|
|
<input
|
|
class="input"
|
|
placeholder="请输入真实姓名"
|
|
v-model="formData.name"
|
|
maxlength="20"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 身份证号 -->
|
|
<view class="form-item">
|
|
<uni-icons class="form-icon" custom-prefix="iconfont" type="icon-duzhezheng" size="24"></uni-icons>
|
|
<input
|
|
class="input"
|
|
placeholder="请输入18位身份证号"
|
|
v-model="formData.idCard"
|
|
maxlength="18"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 手机号 -->
|
|
<view class="form-item">
|
|
<uni-icons class="form-icon" type="phone" size="24"></uni-icons>
|
|
<input
|
|
class="input"
|
|
placeholder="请输入手机号"
|
|
v-model="formData.phone"
|
|
type="number"
|
|
maxlength="11"
|
|
/>
|
|
<button class="get-phone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
|
一键获取
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 密码 -->
|
|
<view class="form-item">
|
|
<uni-icons class="form-icon" type="locked" size="24"></uni-icons>
|
|
<input
|
|
class="input"
|
|
placeholder="请设置6-20位密码"
|
|
:password="!showPwd"
|
|
v-model="formData.password"
|
|
maxlength="20"
|
|
/>
|
|
<uni-icons
|
|
class="pwd-icon"
|
|
:type="showPwd ? 'eye' : 'eye-slash'"
|
|
size="20"
|
|
@click="togglePwd"
|
|
></uni-icons>
|
|
</view>
|
|
|
|
<!-- 确认密码 -->
|
|
<view class="form-item">
|
|
<uni-icons class="form-icon" type="locked" size="24"></uni-icons>
|
|
<input
|
|
class="input"
|
|
placeholder="请再次确认密码"
|
|
:password="!showConfirmPwd"
|
|
v-model="formData.confirmPassword"
|
|
maxlength="20"
|
|
/>
|
|
<uni-icons
|
|
class="pwd-icon"
|
|
:type="showConfirmPwd ? 'eye' : 'eye-slash'"
|
|
size="20"
|
|
@click="toggleConfirmPwd"
|
|
></uni-icons>
|
|
</view>
|
|
|
|
<!-- 提交按钮 -->
|
|
<button class="submit-btn" type="primary" @click="submit" :loading="loading">
|
|
{{ loading ? '提交中...' : '确认办理' }}
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 温馨提示 -->
|
|
<view class="tips-card">
|
|
<view class="tips-title">温馨提示</view>
|
|
<view class="tips-text">
|
|
1. 请填写真实身份信息，用于办理读者证<br>
|
|
2. 密码请牢记，用于登录和借阅查询<br>
|
|
<!-- 3. 提交后工作人员将尽快审核 -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '@/utils/config';
|
|
import { getOpenId } from '@/utils/storage';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
formData: {
|
|
name: '',
|
|
idCard: '',
|
|
phone: '',
|
|
password: '',
|
|
confirmPassword: ''
|
|
},
|
|
showPwd: false,
|
|
showConfirmPwd: false,
|
|
loading: false
|
|
};
|
|
},
|
|
|
|
onLoad() {},
|
|
|
|
methods: {
|
|
getPhoneNumber(e) {
|
|
if (e.detail.errMsg !== 'getPhoneNumber:ok') {
|
|
uni.showToast({ title: '取消授权', icon: 'none' });
|
|
return;
|
|
}
|
|
// #ifdef MP-WEIXIN
|
|
uni.login({
|
|
success: (loginRes) => {
|
|
uni.request({
|
|
url: config.baseUrl + '/api/wx/decryptPhone',
|
|
method: 'POST',
|
|
data: {
|
|
code: loginRes.code,
|
|
encryptedData: e.detail.encryptedData,
|
|
iv: e.detail.iv
|
|
},
|
|
success: (res) => {
|
|
if (res.data?.code === 200) {
|
|
this.formData.phone = res.data.data.phoneNumber || '';
|
|
} else {
|
|
uni.showToast({ title: res.data?.message || '获取失败', icon: 'none' });
|
|
}
|
|
},
|
|
fail: () => uni.showToast({ title: '获取手机号失败', icon: 'none' })
|
|
});
|
|
},
|
|
fail: () => uni.showToast({ title: '登录失败', icon: 'none' })
|
|
});
|
|
// #endif
|
|
// #ifndef MP-WEIXIN
|
|
uni.showToast({ title: '仅支持微信小程序', icon: 'none' });
|
|
// #endif
|
|
},
|
|
|
|
togglePwd() {
|
|
this.showPwd = !this.showPwd;
|
|
},
|
|
toggleConfirmPwd() {
|
|
this.showConfirmPwd = !this.showConfirmPwd;
|
|
},
|
|
|
|
// 身份证验证（支持15位和18位，自动去除空格和连字符）
|
|
validateIdCard(idCard) {
|
|
if (!idCard) return false;
|
|
|
|
// 去除空格和连字符
|
|
idCard = idCard.replace(/[\s-]/g, '');
|
|
|
|
// 15位身份证格式验证
|
|
const idCard15Reg = /^[1-9]\d{5}\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}$/;
|
|
|
|
// 18位身份证格式验证
|
|
const idCard18Reg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
|
|
|
|
// 15位身份证直接验证格式
|
|
if (idCard.length === 15) {
|
|
return idCard15Reg.test(idCard);
|
|
}
|
|
|
|
// 18位身份证需要验证格式、日期和校验码
|
|
if (idCard.length !== 18 || !idCard18Reg.test(idCard)) {
|
|
return false;
|
|
}
|
|
|
|
// 验证日期有效性（宽松模式：跳过校验码验证）
|
|
const year = +idCard.substring(6, 10);
|
|
const month = +idCard.substring(10, 12);
|
|
const day = +idCard.substring(12, 14);
|
|
const date = new Date(year, month - 1, day);
|
|
return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
|
|
},
|
|
|
|
// 手机号验证
|
|
validatePhone(phone) {
|
|
return /^1[3-9]\d{9}$/.test(phone);
|
|
},
|
|
|
|
// ✅ 【核心修复】表单验证（更严谨）
|
|
validateForm() {
|
|
const { name, idCard, phone, password, confirmPassword } = this.formData;
|
|
|
|
// 1. 姓名：必须非空且trim后有内容
|
|
if (!name || name.trim() === '') {
|
|
uni.showToast({ title: '请输入姓名', icon: 'none' });
|
|
return false;
|
|
}
|
|
|
|
// 2. 身份证：非空 + 格式正确
|
|
if (!idCard || idCard.trim() === '') {
|
|
uni.showToast({ title: '请输入身份证号', icon: 'none' });
|
|
return false;
|
|
}
|
|
if (!this.validateIdCard(idCard.trim())) {
|
|
uni.showToast({ title: '身份证号格式不正确', icon: 'none' });
|
|
return false;
|
|
}
|
|
|
|
// 3. 手机号：非空 + 格式正确
|
|
if (!phone || phone.trim() === '') {
|
|
uni.showToast({ title: '请输入手机号', icon: 'none' });
|
|
return false;
|
|
}
|
|
if (!this.validatePhone(phone.trim())) {
|
|
uni.showToast({ title: '手机号格式不正确', icon: 'none' });
|
|
return false;
|
|
}
|
|
|
|
// 4. 密码：至少6位
|
|
if (!password || password.length < 6) {
|
|
uni.showToast({ title: '密码至少6位', icon: 'none' });
|
|
return false;
|
|
}
|
|
|
|
// 5. 确认密码：必须一致
|
|
if (password !== confirmPassword) {
|
|
uni.showToast({ title: '两次密码不一致', icon: 'none' });
|
|
return false;
|
|
}
|
|
|
|
// 所有校验通过
|
|
return true;
|
|
},
|
|
|
|
async submit() {
|
|
// 防止重复点击
|
|
if (this.loading) return;
|
|
|
|
// 小程序关键：等 input 数据同步到 data
|
|
await this.$nextTick();
|
|
|
|
// 校验不通过直接 return
|
|
if (!this.validateForm()) {
|
|
return;
|
|
}
|
|
|
|
this.loading = true;
|
|
try {
|
|
const openId = await getOpenId();
|
|
if (!openId) {
|
|
uni.showToast({ title: '获取用户信息失败', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
uni.showToast({ title: '后续流程正在研发中，请稍后试用~', icon: 'none' });
|
|
setTimeout(() => uni.navigateBack(), 1500);
|
|
|
|
// 提交（trim 后再发）
|
|
// const res = await uni.request({
|
|
// url: config.baseUrl + '/api/reader/register',
|
|
// method: 'POST',
|
|
// data: {
|
|
// name: this.formData.name.trim(),
|
|
// idCard: this.formData.idCard.trim(),
|
|
// phone: this.formData.phone.trim(),
|
|
// password: this.formData.password,
|
|
// openId,
|
|
// libcode: config.LIB_CODE
|
|
// }
|
|
// });
|
|
|
|
// if (res.data?.code === 200) {
|
|
// uni.showToast({ title: '办理成功', icon: 'success' });
|
|
// setTimeout(() => uni.navigateBack(), 1500);
|
|
// } else {
|
|
// uni.showToast({ title: res.data?.message || '提交失败', icon: 'none' });
|
|
// }
|
|
} catch (err) {
|
|
console.error('提交异常', err);
|
|
uni.showToast({ title: '网络异常，请重试', icon: 'none' });
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #f5f7fa;
|
|
}
|
|
.page-container {
|
|
min-height: 100vh;
|
|
background-color: #f5f7fa;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
/* 顶部 */
|
|
.top-bar {
|
|
height: 210px;
|
|
.library-info {
|
|
position: relative;
|
|
z-index: 2;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
/* 表单卡片 */
|
|
.form-card {
|
|
margin: -30px 12px 12px;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
padding: 20px 16px;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 44px;
|
|
border-bottom: 1rpx solid #f2f3f5;
|
|
margin-bottom: 4px;
|
|
|
|
.form-icon {
|
|
font-size: 14px;
|
|
color: #01a4fe;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.pwd-icon {
|
|
color: #999;
|
|
padding: 5px;
|
|
}
|
|
|
|
.get-phone-btn {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
background-color: #01a4fe;
|
|
border-radius: 20px;
|
|
padding: 6px 10px;
|
|
border: none;
|
|
line-height: 1.2;
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 提交按钮 */
|
|
.submit-btn {
|
|
width: 100%;
|
|
height: 44px;
|
|
background-color: #01a4fe;
|
|
color: #fff;
|
|
border-radius: 22px;
|
|
font-size: 15px;
|
|
margin-top: 20px;
|
|
border: none;
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
/* 温馨提示 */
|
|
.tips-card {
|
|
margin: 0 12px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
|
|
|
.tips-title {
|
|
font-size: 13px;
|
|
color: #333;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.tips-text {
|
|
font-size: 12px;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
</style>
|