From ef37c59e055a990ce247b265b27d3fcef430a243 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期五, 15 八月 2025 10:19:18 +0800
Subject: [PATCH] first submit
---
src/views/login/register.vue | 533 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 533 insertions(+), 0 deletions(-)
diff --git a/src/views/login/register.vue b/src/views/login/register.vue
new file mode 100644
index 0000000..6b19e1e
--- /dev/null
+++ b/src/views/login/register.vue
@@ -0,0 +1,533 @@
+<template>
+ <div class="registerPage">
+ <div class="registerContent">
+ <div class="registerBox">
+ <div class="registerForm">
+ <h1>娉ㄥ唽閫氳璇�</h1>
+ <div class="formItem flex">
+ <el-select placeholder="璇烽�夋嫨" v-model="registerForm.region">
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ <el-input
+ placeholder="璇疯緭鍏ユ墜鏈哄彿"
+ class="ml10"
+ clearable
+ v-model="registerForm.phoneNumber"
+ ></el-input>
+ </div>
+ <div class="formItem flex">
+ <el-input
+ placeholder="璇疯緭鍏ュ浘褰㈤獙璇佺爜"
+ class="flex1"
+ v-model="registerForm.imgCode"
+ ></el-input>
+ <div class="imgCode ml10">
+ <img :src="imgCode" alt="" @click="getImgCapcha" />
+ </div>
+ </div>
+ <div class="formItem flex">
+ <el-input
+ placeholder="璇疯緭鍏ョ煭淇￠獙璇佺爜"
+ class="flex1"
+ v-model="registerForm.verificationCode"
+ ></el-input>
+ <el-button
+ class="ml10"
+ style="width: 140px"
+ @click="getVerifyCode"
+ :disabled="countDown != 0"
+ >{{
+ countDown == 0 ? "鑾峰彇鐭俊楠岃瘉鐮�" : "楠岃瘉鐮�(" + countDown + "s)"
+ }}</el-button
+ >
+ </div>
+ <!-- 鎵嬫満鍙锋敞鍐屼笉闇�瑕佸～鍐欑敤鎴峰悕锛屽厛娉ㄩ噴 -->
+ <!-- <div class="formItem flex">
+ <span>鐢ㄦ埛鍚�</span>
+ <el-input
+ v-model="registerForm.username"
+ placeholder="鐢ㄦ埛鍚嶉暱搴�3-64涓瓧绗︼紝鐢卞瓧姣嶃�佹暟瀛楃粍鎴�"
+ clearable
+ ></el-input>
+ </div>
+ <div class="formItem">
+ <p class="tips">鐢ㄦ埛鍚嶇О涓�鏃︽敞鍐屾垚鍔熶笉鍙慨鏀�</p>
+ </div> -->
+ <div class="formItem">
+ <el-input
+ v-model="registerForm.password"
+ type="password"
+ show-password
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ ></el-input>
+ </div>
+ <div class="formItem">
+ <el-input
+ v-model="registerForm.passwordAgain"
+ type="password"
+ show-password
+ placeholder="纭瀵嗙爜"
+ ></el-input>
+ </div>
+ <div class="formItem">
+ <p class="tips">璇峰皢瀵嗙爜璁剧疆涓�8-16浣嶏紝涓斾笉鏀寔绾暟瀛�</p>
+ </div>
+ <div class="formItem">
+ <el-button
+ class="registerBtn"
+ :class="{ isActive: registerForm.accept }"
+ :disabled="!registerForm.accept"
+ :loading="registerBtnLoading"
+ @click="registerFun"
+ >娉ㄥ唽</el-button
+ >
+ </div>
+ <div class="termsBox">
+ <el-checkbox class="termsCheckBox" v-model="registerForm.accept">
+ </el-checkbox>
+ <span>鎴戞帴鍙楀苟鍚屾剰</span>
+ <span class="terms" @click="getClauseData(1)">銆婄敤鎴锋湇鍔℃潯娆俱��</span>
+ <span>鍜�</span>
+ <span class="terms" @click="getClauseData(0)">銆婇殣绉佹斂绛栥��</span>
+ </div>
+ </div>
+ <div class="tipBox">
+ <p>
+ 宸叉湁璐﹀彿锛岃鐐瑰嚮杩欓噷
+ <span class="toLogin" @click="toLogin()">鐩存帴鐧诲綍</span>
+ </p>
+ <p>浣跨敤绗笁鏂硅处鍙风櫥褰�</p>
+ <p>
+ <img
+ @click="toWxLogin()"
+ src="@/assets/images/login/weChartIcon.png"
+ alt
+ />
+ </p>
+ </div>
+ </div>
+ </div>
+ <!-- 寮规 -->
+ <el-dialog
+ title="銆婄敤鎴锋湇鍔℃潯娆俱��"
+ :visible.sync="dialogVisibleUserService"
+ :close-on-click-modal="false"
+ width="40%"
+ >
+ <div class="protocolBox" v-html="userProtocolTxt"></div>
+
+ <span slot="footer" class="dialog-footer">
+ <!-- <el-button @click="dialogVisible = false">鍙� 娑�</el-button> -->
+ <el-button
+ type="primary"
+ class="btn"
+ @click="dialogVisibleUserService = false"
+ >纭� 瀹�</el-button
+ >
+ </span>
+ </el-dialog>
+ <el-dialog
+ title="銆婇殣绉佹斂绛栨潯娆俱��"
+ :visible.sync="dialogVisibleprivacyPolicy"
+ :close-on-click-modal="false"
+ width="40%"
+ >
+ <div class="protocolBox" v-html="privacyPolicyTxt"></div>
+
+ <span slot="footer" class="dialog-footer">
+ <!-- <el-button @click="dialogVisible = false">鍙� 娑�</el-button> -->
+ <el-button
+ type="primary"
+ class="btn"
+ @click="dialogVisibleUserService = false"
+ >纭� 瀹�</el-button
+ >
+ </span>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "register",
+ data() {
+ return {
+ dialogVisibleprivacyPolicy:false,
+ //鐢ㄦ埛鍗忚dialog
+ dialogVisibleUserService: false,
+ //鐢ㄦ埛鍗忚
+ userProtocolTxt:"",
+ //鍗忚寮规title
+ dialogTitle:"",
+ //闅愮鏀跨瓥鏉℃
+ privacyPolicyTxt:"",
+ //褰撳墠鏉℃瀵屾枃鏈�
+ currentProtocolTxt:"",
+ clauseDialog: {
+ title: "",
+ open: false,
+ },
+ clauseData: "",
+ registerBtnLoading: false,
+ options: [
+ {
+ value: "涓浗+86",
+ label: "涓浗+86",
+ },
+ ],
+ registerForm: {
+ region: "涓浗+86",
+ phoneNumber: "",
+ imgCode: "",
+ username: "",
+ verificationCode: "",
+ password: "",
+ passwordAgain: "",
+ accept: true,
+ },
+ countDown: 0,
+ imgCode: "",
+ };
+ },
+ mounted() {
+ this.showTips();
+ this.getImgCapcha();
+ this.getProtocol();
+ },
+ methods: {
+ showTips() {
+ this.$confirm(
+ "濡傛灉鎮ㄥ凡浣跨敤杩囦腑鍥藉啘涓氬ぇ瀛﹀嚭鐗堢ぞ鍏紬鍙锋牱涔︾敵璇锋湇鍔★紝璇蜂娇鐢ㄥ井淇℃壂鐮佺櫥褰曪紒",
+ "娓╅Θ鎻愮ず",
+ {
+ confirmButtonText: "鍘诲井淇℃壂鐮佺櫥褰�",
+ cancelButtonText: "缁х画娉ㄥ唽鍏ㄦ柊璐﹀彿",
+ type: "warning",
+ }
+ )
+ .then(() => {
+ this.toWxLogin();
+ })
+ .catch(() => {});
+ },
+ getImgCapcha() {
+ this.MG.identity.getImgCode().then((res) => {
+ this.imgCode = "data:image/png;base64," + res;
+ });
+ },
+ // 鑾峰彇楠岃瘉鐮�(娉ㄥ唽)
+ getVerifyCode() {
+ if (!this.config.reg_tel.test(this.registerForm.phoneNumber)) {
+ this.$message({
+ message: "璇疯緭鍏ユ纭牸寮忕殑鎵嬫満鍙凤紒",
+ type: "error",
+ });
+ return false;
+ } else if (
+ this.registerForm.imgCode == "" ||
+ this.registerForm.imgCode.length != 4
+ ) {
+ this.$message({
+ message: "璇疯緭鍏ユ纭牸寮忕殑鍥惧舰楠岃瘉鐮�",
+ type: "error",
+ });
+ return false;
+ } else {
+ this.MG.identity
+ .getPhoneCode({
+ phoneNumber: this.registerForm.phoneNumber,
+ imageCaptcha: this.registerForm.imgCode,
+ appRefCode: this.config.appRefCode,
+ })
+ .then((res) => {
+ if (res == "楠岃瘉鐮佸彂閫佹垚鍔�") {
+ this.$message({
+ message: res,
+ type: "success",
+ });
+ this.getSecond(60);
+ } else {
+ this.$message({
+ message: res,
+ type: "error",
+ });
+ this.getImgCapcha();
+ }
+ });
+ }
+ },
+ //楠岃瘉鐮佸�掕鏃�
+ getSecond(time) {
+ if (!this.timer) {
+ this.countDown = time;
+ this.timer = setInterval(() => {
+ this.countDown--;
+ if (this.countDown == 0) {
+ clearInterval(this.timer);
+ this.timer = null;
+ }
+ }, 1000);
+ }
+ },
+ // 缁戝畾鎵嬫満鍙峰脊妗�-缁戝畾鎸夐挳-鍑芥暟
+ registerFun() {
+ if (this.registerForm.phoneNumber == "") {
+ this.$message({
+ message: "鎵嬫満鍙蜂笉鑳戒负绌�",
+ type: "error",
+ });
+ return false;
+ }
+ if (this.registerForm.verificationCode == "") {
+ this.$message({
+ message: "鐭俊楠岃瘉鐮佷笉鑳戒负绌�",
+ type: "error",
+ });
+ return false;
+ }
+ if (this.registerForm.password == "") {
+ this.$message({
+ message: "瀵嗙爜涓嶈兘涓虹┖",
+ type: "error",
+ });
+ return false;
+ }
+ if (this.registerForm.password != this.registerForm.passwordAgain) {
+ this.$message({
+ message: "涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�",
+ type: "error",
+ });
+ return false;
+ }
+ let pwdreg =
+ // eslint-disable-next-line
+ /^(?![A-Za-z]+$)(?![0-9]+$)(?![_!@#$%^&*`~()\-+=<>?:,./;'\|\\\{\}\[\]]+$)[a-zA-Z0-9_!@#$%^&*`~()\-+=<>?:,./;'\|\\\{\}\[\]]{8,32}$/;
+ if (!this.config.reg_tel.test(this.registerForm.phoneNumber)) {
+ this.$message({
+ message: "璇疯緭鍏ユ纭牸寮忕殑鎵嬫満鍙凤紒",
+ type: "error",
+ });
+ } else if (!pwdreg.test(this.registerForm.password)) {
+ this.$message({
+ message:
+ "瀵嗙爜闀垮害8-32涓瓧绗︼紝蹇呴』鐢卞瓧姣嶃�佹暟瀛椼�佺鍙凤紙-*/+_.~!@#$%^&*鍙婃嫭鍙凤級涓ょ鍙婁互涓婄粍鍚堬紒",
+ type: "error",
+ });
+ return false;
+ } else {
+ this.registerBtnLoading = true;
+ this.MG.identity
+ .registerAppUserWithPhone({
+ appRefCode: this.config.appRefCode,
+ phoneNumber: this.registerForm.phoneNumber,
+ phoneCaptcha: this.registerForm.verificationCode,
+ passWord: this.registerForm.password,
+ })
+ .then((res) => {
+ this.registerBtnLoading = false;
+ if (res) {
+ this.$confirm("娉ㄥ唽鎴愬姛锛�", {
+ confirmButtonText: "鍘荤櫥褰�",
+ cancelButtonText: "鍙栨秷",
+ type: "success",
+ })
+ .then(() => {
+ this.$router.push({
+ path: "/login",
+ });
+ })
+ .catch(() => {});
+ }
+ })
+ .catch((e) => {
+ this.$message({
+ message: e.response.data.msg,
+ type: "error",
+ });
+ this.registerBtnLoading = false;
+ });
+ }
+ },
+ //鑾峰彇鐢ㄦ埛鍗忚
+ getProtocol() {
+ var that = this;
+ that.MG.resource
+ .getItem({
+ path: "caupress_protocol",
+ fields: {
+ caupress_content: [],
+ },
+ })
+ .then((res) => {
+ console.log(res);
+ try {
+ const data = res.datas.find(
+ (e) => e.refCode == "caupress_userRegistrationAgreement"
+ );
+ this.userProtocolTxt = data ? data.caupress_content : "鏆傛棤鍗忚";
+ const privacy = res.datas.find(
+ (e) => e.refCode == "caupress_privacyPolicy"
+ );
+ this.privacyPolicyTxt = privacy ? privacy.caupress_content : "鏆傛棤鍗忚";
+
+ } catch (error) {
+ this.protocolTxt = "鏆傛棤鍗忚";
+ }
+ });
+ },
+ getClauseData(type) {
+ console.log(type);
+ if(type == 1){
+ this.dialogVisibleUserService = true
+
+ }else{
+ this.dialogVisibleprivacyPolicy = true
+
+ }
+
+ },
+ toLogin() {
+ this.$router.push({
+ path: "/login",
+ });
+ },
+ toWxLogin() {
+ this.$router.push({
+ path: "/login",
+ query: {
+ from: "weChatLogin",
+ },
+ });
+ },
+ },
+};
+</script>
+<style lang="less" scoped>
+@import "@/assets/css/theme.less";
+.registerPage {
+ width: 100%;
+ height: 100%;
+ background-image: url("@/assets/images/login/pageBg.png");
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ position: relative;
+ padding: 50px 0;
+ .registerContent {
+ width: 1200px;
+ background: #fff;
+ margin: 0 auto;
+ padding-bottom: 36px;
+ box-shadow: 0 0 66px 0 hsl(0deg 0% 67% / 35%);
+ display: flex;
+ justify-content: center;
+ .registerBox {
+ display: flex;
+ align-items: center;
+ .registerForm {
+ width: 420px;
+ box-sizing: border-box;
+ padding: 20px;
+ margin: 20px;
+ margin-left: 100px;
+ h1 {
+ font-size: 18px;
+ color: @color;
+ text-align: center;
+ margin-bottom: 30px;
+ }
+ .formItem {
+ margin-bottom: 10px;
+ .imgCode {
+ width: 140px;
+ height: 40px;
+ img {
+ width: 100%;
+ height: 100%;
+ background: #efefef;
+ }
+ }
+ span {
+ display: inline-block;
+ width: 80px;
+ text-align: left;
+ line-height: 40px;
+ }
+ .tips {
+ font-size: 12px;
+ margin: 0 0 10px 0;
+ color: #666;
+ }
+ .registerBtn {
+ width: 100%;
+ background: #b1b6bd;
+ color: #fff;
+ cursor: not-allowed;
+ margin-top: 15px;
+ &.isActive {
+ background: @color;
+ cursor: pointer;
+ }
+ }
+ }
+ .termsBox {
+ line-height: 20px;
+ .termsCheckBox {
+ vertical-align: text-bottom;
+ margin-right: 8px;
+ }
+ span {
+ vertical-align: middle;
+ }
+ .terms {
+ color: @color;
+ cursor: pointer;
+ }
+ }
+ }
+ .tipBox {
+ padding-left: 30px;
+ border-left: 1px solid #ddd;
+ .toLogin {
+ color: @color;
+ cursor: pointer;
+ }
+ p {
+ margin-bottom: 15px;
+ }
+ img {
+ width: 30px;
+ height: 30px;
+ margin-left: 50px;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+}
+.ml10 {
+ margin-left: 10px;
+}
+
+.clauseBox {
+ height: 500px;
+}
+.protocolBox {
+ text-align: left;
+ line-height: 23px;
+ z-index: 1;
+ height: 500px;
+ overflow-y: auto;
+ margin-top: -20px;
+ box-sizing: border-box;
+ padding: 10px;
+}
+.el-dialog__footer button {
+ margin-right: 43%;
+ margin-top: 10px;
+}
+</style>
--
Gitblit v1.9.1