|
|
@@ -1,81 +1,81 @@
|
|
|
<script setup lang="ts">
|
|
|
- import { ref, computed } from 'vue';
|
|
|
- import {router} from '../router'
|
|
|
- import {userRegister} from "../api/user.ts";
|
|
|
-
|
|
|
-
|
|
|
- const name = ref('')
|
|
|
- const identity = ref('')
|
|
|
- const tel = ref('')
|
|
|
- const address = ref('')
|
|
|
- const password = ref('')
|
|
|
- const confirmPassword = ref('')
|
|
|
-
|
|
|
-
|
|
|
- // const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
|
- const chinaMobileRegex = /^1(3[0-9]|4[579]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[189])\d{8}$/;
|
|
|
-
|
|
|
- const hasTelInput = computed(() => tel.value != '');
|
|
|
- const hasPasswordInput = computed(() => password.value != '');
|
|
|
- const hasConfirmPasswordInput = computed(() => confirmPassword.value != '');
|
|
|
- const hasAddressInput = computed(() => address.value != '');
|
|
|
- const hasIdentityChosen = computed(() => identity.value != '')
|
|
|
-
|
|
|
-
|
|
|
- const telLegal = computed(() => chinaMobileRegex.test(tel.value));
|
|
|
- const isPasswordIdentical = computed(() => password.value == confirmPassword.value);
|
|
|
-
|
|
|
-
|
|
|
- const registerDisabled = computed(() => {
|
|
|
- return !(telLegal.value && hasPasswordInput.value && isPasswordIdentical.value && hasAddressInput.value && hasIdentityChosen.value)
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- async function handleRegister() {
|
|
|
- const payload = {
|
|
|
- role: identity.value,
|
|
|
- name: name.value,
|
|
|
- phone: tel.value,
|
|
|
- password: password.value,
|
|
|
- address: address.value,
|
|
|
- createTime: new Date().getTime()
|
|
|
- }
|
|
|
-
|
|
|
- userRegister(payload)
|
|
|
- .then(() => {
|
|
|
- ElMessageBox.alert(
|
|
|
- `${name.value}，感谢您的注册！`,
|
|
|
- '注册成功',
|
|
|
- {
|
|
|
- customClass: "customDialog",
|
|
|
- confirmButtonText: '跳转到登录',
|
|
|
- type: "success",
|
|
|
- showClose: false,
|
|
|
- roundButton: true,
|
|
|
- center: true
|
|
|
- }
|
|
|
- ).then(() => {
|
|
|
- // 跳转去登录
|
|
|
- router.push({ path: "/login" })
|
|
|
- })
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e)
|
|
|
- ElMessageBox.alert(
|
|
|
- e.message,
|
|
|
- '错误提示',
|
|
|
- {
|
|
|
- customClass: "customDialog",
|
|
|
- confirmButtonText: '好的',
|
|
|
- type: "error",
|
|
|
- showClose: false,
|
|
|
- roundButton: true,
|
|
|
- center: true
|
|
|
- }
|
|
|
- )
|
|
|
- })
|
|
|
+import {ref, computed} from 'vue';
|
|
|
+import {router} from '../router'
|
|
|
+import {userRegister} from "../api/user.ts";
|
|
|
+
|
|
|
+
|
|
|
+const name = ref('')
|
|
|
+const identity = ref('')
|
|
|
+const tel = ref('')
|
|
|
+const address = ref('')
|
|
|
+const password = ref('')
|
|
|
+const confirmPassword = ref('')
|
|
|
+
|
|
|
+
|
|
|
+// const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
|
+const chinaMobileRegex = /^1(3[0-9]|4[579]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[189])\d{8}$/;
|
|
|
+
|
|
|
+const hasTelInput = computed(() => tel.value != '');
|
|
|
+const hasPasswordInput = computed(() => password.value != '');
|
|
|
+const hasConfirmPasswordInput = computed(() => confirmPassword.value != '');
|
|
|
+const hasAddressInput = computed(() => address.value != '');
|
|
|
+const hasIdentityChosen = computed(() => identity.value != '')
|
|
|
+
|
|
|
+
|
|
|
+const telLegal = computed(() => chinaMobileRegex.test(tel.value));
|
|
|
+const isPasswordIdentical = computed(() => password.value == confirmPassword.value);
|
|
|
+
|
|
|
+
|
|
|
+const registerDisabled = computed(() => {
|
|
|
+ return !(telLegal.value && hasPasswordInput.value && isPasswordIdentical.value && hasAddressInput.value && hasIdentityChosen.value)
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+async function handleRegister() {
|
|
|
+ const payload = {
|
|
|
+ role: identity.value,
|
|
|
+ name: name.value,
|
|
|
+ phone: tel.value,
|
|
|
+ password: password.value,
|
|
|
+ address: address.value,
|
|
|
+ createTime: new Date().getTime()
|
|
|
}
|
|
|
|
|
|
+ userRegister(payload)
|
|
|
+ .then(() => {
|
|
|
+ ElMessageBox.alert(
|
|
|
+ `${name.value}，感谢您的注册！`,
|
|
|
+ '注册成功',
|
|
|
+ {
|
|
|
+ customClass: "customDialog",
|
|
|
+ confirmButtonText: '跳转到登录',
|
|
|
+ type: "success",
|
|
|
+ showClose: false,
|
|
|
+ roundButton: true,
|
|
|
+ center: true
|
|
|
+ }
|
|
|
+ ).then(() => {
|
|
|
+ // 跳转去登录
|
|
|
+ router.push({path: "/login"})
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e)
|
|
|
+ ElMessageBox.alert(
|
|
|
+ e.message,
|
|
|
+ '错误提示',
|
|
|
+ {
|
|
|
+ customClass: "customDialog",
|
|
|
+ confirmButtonText: '好的',
|
|
|
+ type: "error",
|
|
|
+ showClose: false,
|
|
|
+ roundButton: true,
|
|
|
+ center: true
|
|
|
+ }
|
|
|
+ )
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
</script>
|
|
|
|
|
|
@@ -99,8 +99,8 @@
|
|
|
<el-form-item>
|
|
|
<label for="name">昵称</label>
|
|
|
<el-input id="name"
|
|
|
- v-model="name"
|
|
|
- placeholder="请输入昵称" />
|
|
|
+ v-model="name"
|
|
|
+ placeholder="请输入昵称"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
|
|
|
@@ -110,11 +110,11 @@
|
|
|
<el-form-item>
|
|
|
<label for="identity">身份</label>
|
|
|
<el-select id="identity"
|
|
|
- v-model="identity"
|
|
|
- >
|
|
|
- <el-option disabled value="" selected>请选择</el-option>
|
|
|
- <el-option value="CUSTOMER">顾客</el-option>
|
|
|
- <el-option value="STAFF">商家</el-option>
|
|
|
+ v-model="identity"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option value="CUSTOMER" label="顾客"/>
|
|
|
+ <el-option value="STAFF" label="商家"/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
@@ -136,8 +136,8 @@
|
|
|
</label>
|
|
|
|
|
|
<el-input id="tel"
|
|
|
- v-model="tel" :class="{'error-warn-input' :(hasTelInput && !telLegal)}"
|
|
|
- placeholder="请输入手机号" />
|
|
|
+ v-model="tel" :class="{'error-warn-input' :(hasTelInput && !telLegal)}"
|
|
|
+ placeholder="请输入手机号"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
|
|
|
@@ -151,21 +151,19 @@
|
|
|
</label>
|
|
|
|
|
|
<el-input id="address"
|
|
|
- v-model="address"
|
|
|
- placeholder="请输入地址" />
|
|
|
+ v-model="address"
|
|
|
+ placeholder="请输入地址"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
-
|
|
|
-
|
|
|
<el-form-item>
|
|
|
<label for="password">密码</label>
|
|
|
<el-input type="password" id="password"
|
|
|
- v-model="password"
|
|
|
- placeholder="••••••••" />
|
|
|
+ v-model="password"
|
|
|
+ placeholder="••••••••"/>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
@@ -174,31 +172,32 @@
|
|
|
<label v-else>确认密码</label>
|
|
|
|
|
|
<el-input type="password" id="confirm-password"
|
|
|
- v-model="confirmPassword" :class="{'error-warn-input' :(hasConfirmPasswordInput && !isPasswordIdentical)}"
|
|
|
- placeholder="••••••••" />
|
|
|
+ v-model="confirmPassword"
|
|
|
+ :class="{'error-warn-input' :(hasConfirmPasswordInput && !isPasswordIdentical)}"
|
|
|
+ placeholder="••••••••"/>
|
|
|
</el-form-item>
|
|
|
|
|
|
-<!-- <el-form-item class="flex items-start">-->
|
|
|
+ <!-- <el-form-item class="flex items-start">-->
|
|
|
|
|
|
-<!-- <div class="flex items-center h-5">-->
|
|
|
-<!-- <input id="terms" aria-describedby="terms" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300"-->
|
|
|
-<!-- required>-->
|
|
|
-<!-- </div>-->
|
|
|
+ <!-- <div class="flex items-center h-5">-->
|
|
|
+ <!-- <input id="terms" aria-describedby="terms" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300"-->
|
|
|
+ <!-- required>-->
|
|
|
+ <!-- </div>-->
|
|
|
|
|
|
-<!-- <div class="ml-3 text-sm">-->
|
|
|
-<!-- <label for="terms" class="font-light text-gray-500">-->
|
|
|
-<!-- 我接受-->
|
|
|
-<!-- <a class="font-medium text-primary-600 hover:underline dark:text-primary-500" href="#">恶魔的条款</a>-->
|
|
|
-<!-- </label>-->
|
|
|
-<!-- </div>-->
|
|
|
+ <!-- <div class="ml-3 text-sm">-->
|
|
|
+ <!-- <label for="terms" class="font-light text-gray-500">-->
|
|
|
+ <!-- 我接受-->
|
|
|
+ <!-- <a class="font-medium text-primary-600 hover:underline dark:text-primary-500" href="#">恶魔的条款</a>-->
|
|
|
+ <!-- </label>-->
|
|
|
+ <!-- </div>-->
|
|
|
|
|
|
-<!-- </el-form-item>-->
|
|
|
+ <!-- </el-form-item>-->
|
|
|
|
|
|
|
|
|
<span class="button-group">
|
|
|
<el-button @click.prevent="handleRegister"
|
|
|
- :disabled="registerDisabled"
|
|
|
- type="primary">
|
|
|
+ :disabled="registerDisabled"
|
|
|
+ type="primary">
|
|
|
创建账户
|
|
|
</el-button>
|
|
|
|
chillqi