在线办证

1 month ago · 5acb6614ff
4 changed files with 441 additions and 0 deletions
--- a/pages.json
+++ b/pages.json
@ -29,6 +29,12 @@
 		"style": {
 			"navigationBarTitleText": "借阅清单"
 		}
+	},
+	{
+		"path": "pages/register/register",
+		"style": {
+			"navigationBarTitleText": "在线办证"
+		}
 	}
  ],
 	"globalStyle": {
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@ -97,6 +97,12 @@
            </view>
            <view class="menu-label">个人中心</view>
          </view>
+           <view class="menu-item" @click="goRegister">
+            <view class="menu-icon">
+              <uni-icons custom-prefix="iconfont" type="icon-yonghuxinxi-gerenxinxi" size="20"></uni-icons>
+            </view>
+            <view class="menu-label">在线办证</view>
+          </view>
        </view>
      </swiper-item>
    </swiper>
@ -470,6 +476,11 @@ export default {
        });
      });
    },
+    goRegister() {
+      uni.navigateTo({
+        url: '/pages/register/register'
+      });
+    }
  }
 }
 </script>
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@ -42,6 +42,9 @@
      温馨提示：<br />
      1、密码默认为 <text style="color:#e74c3c">身份证后6位</text>，如果身份证号最后一位为“X”，“X”需要大写;
    </view>
+
+
+    <button class="register-btn" type="primary" @click="goRegister">在线办证</button>
  </view>
 </template>

@ -253,6 +256,14 @@ export default {
        uni.hideLoading();
        uni.showToast({ title: err || '绑定失败', icon: 'none' });
      }
+    },
+    /**
+     * 跳转到在线办证页面
+     */
+    goRegister() {
+      uni.navigateTo({
+        url: '/pages/register/register'
+      });
    }
  }
 };
@ -351,4 +362,12 @@ export default {
    margin-right: 10px;
  }
 }
+
+.register-btn {
+  position: fixed;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - 40px);
+}
 </style>
--- a/pages/register/register.vue
+++ b/pages/register/register.vue
@ -0,0 +1,405 @@
+<template>
+  <view style="background-color: #fff; height: calc(100vh);">
+    <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>
+    </view>
+
+    <!-- 表单区域 -->
+    <view class="form-box">
+      <!-- 姓名 -->
+      <view class="form-item">
+        <uni-icons class="form-icon" custom-prefix="iconfont" type="icon-user" size="24"></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-shenfen" size="24"></uni-icons>
+        <input 
+          class="input" 
+          placeholder="请输入身份证号" 
+          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="请输入密码" 
+          :password="!showPwd" 
+          v-model="formData.password"
+          maxlength="20"
+        />
+        <uni-icons 
+          class="pwd-icon" 
+          :type="showPwd ? 'eye-slash' : 'eye'" 
+          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-slash' : 'eye'" 
+          size="20"
+          @click="toggleConfirmPwd"
+        ></uni-icons>
+      </view>
+
+      <!-- 提交按钮 -->
+      <button class="submit-btn" type="primary" @click="submit" :loading="loading">
+        {{ loading ? '提交中...' : '提交办证' }}
+      </button>
+    </view>
+
+    <!-- 温馨提示 -->
+    <!-- <view class="tips">
+      <text class="tips-title">温馨提示：</text>
+      <view class="tips-content">
+        <text>1、请确保填写的信息真实准确</text>
+        <text>2、密码建议设置为6-20位数字和字母组合</text>
+        <text>3、提交后工作人员将在1-3个工作日内审核</text>
+      </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
+      // 获取 login code
+      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 && 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;
+    },
+
+    /**
+     * 验证身份证号
+     */
+    validateIdCard(idCard) {
+      const reg = /^[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]$/;
+      return reg.test(idCard);
+    },
+
+    /**
+     * 验证手机号
+     */
+    validatePhone(phone) {
+      const reg = /^1[3-9]\d{9}$/;
+      return reg.test(phone);
+    },
+
+    /**
+     * 表单验证
+     */
+    validateForm() {
+      const { name, idCard, phone, password, confirmPassword } = this.formData;
+
+      if (!name || name.trim().length === 0) {
+        uni.showToast({ title: '请输入姓名', icon: 'none' });
+        return false;
+      }
+
+      if (!idCard || idCard.trim().length === 0) {
+        uni.showToast({ title: '请输入身份证号', icon: 'none' });
+        return false;
+      }
+
+      if (!this.validateIdCard(idCard)) {
+        uni.showToast({ title: '身份证号格式不正确', icon: 'none' });
+        return false;
+      }
+
+      if (!phone || phone.trim().length === 0) {
+        uni.showToast({ title: '请输入手机号', icon: 'none' });
+        return false;
+      }
+
+      if (!this.validatePhone(phone)) {
+        uni.showToast({ title: '手机号格式不正确', icon: 'none' });
+        return false;
+      }
+
+      if (!password || password.length < 6) {
+        uni.showToast({ title: '密码至少需要6位', icon: 'none' });
+        return false;
+      }
+
+      if (password !== confirmPassword) {
+        uni.showToast({ title: '两次输入的密码不一致', icon: 'none' });
+        return false;
+      }
+
+      return true;
+    },
+
+    /**
+     * 提交表单
+     */
+    async submit() {
+      if (!this.validateForm()) {
+        return;
+      }
+
+      this.loading = true;
+
+      try {
+        const openId = await getOpenId();
+        if (!openId) {
+          uni.showToast({ title: '获取用户信息失败', icon: 'none' });
+          this.loading = false;
+          return;
+        }
+
+        const res = await uni.request({
+          url: config.baseUrl + '/api/reader/register',
+          method: 'POST',
+          data: {
+            name: this.formData.name,
+            idCard: this.formData.idCard,
+            phone: this.formData.phone,
+            password: this.formData.password,
+            openId: openId,
+            libcode: config.LIB_CODE
+          }
+        });
+
+        if (res.data && res.data.code === 200) {
+          uni.showToast({ title: '提交成功', icon: 'success' });
+          setTimeout(() => {
+            uni.navigateBack();
+          }, 1500);
+        } else {
+          uni.showToast({ title: res.data?.message || '提交失败', icon: 'none' });
+        }
+      } catch (error) {
+        console.error('注册失败:', error);
+        uni.showToast({ title: '提交失败', icon: 'none' });
+      } finally {
+        this.loading = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.top-bar {
+  position: relative;
+  width: 100%;
+  height: 180px;
+  
+  .top-bar-bg {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .page-title {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    font-size: 28px;
+    font-weight: bold;
+    color: #fff;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.form-box {
+  padding: 20px 15px;
+}
+.form-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 44px;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 10px;
+  
+  .form-icon {
+    margin-right: 12px;
+    color: #01a4fe;
+  }
+  
+  .input {
+    flex: 1;
+    height: 100%;
+    font-size: 14px;
+    color: #333;
+  }
+  
+  .pwd-icon {
+    margin-left: 10px;
+    color: #999;
+  }
+  
+  .get-phone-btn {
+    background-color: #01a4fe;
+    color: #fff;
+    font-size: 12px;
+    border-radius: 20px;
+    border: none;
+  }
+}
+
+.submit-btn {
+  width: 100%;
+  height: 48px;
+  background-color: #01a4fe;
+  color: #fff;
+  border-radius: 24px;
+  font-size: 16px;
+  margin-top: 20px;
+  border: none;
+  
+  &::after {
+    border: none;
+  }
+}
+
+.tips {
+  padding: 15px;
+  background-color: #fff;
+  margin: 0 15px;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  
+  .tips-title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #333;
+    display: block;
+    margin-bottom: 8px;
+  }
+  
+  .tips-content {
+    text {
+      display: block;
+      font-size: 13px;
+      color: #999;
+      line-height: 1.8;
+    }
+  }
+}
+</style>