change:代码改造
This commit is contained in:
parent
8174af4413
commit
e6e8433a20
|
|
@ -23,6 +23,7 @@ export function register(data: object) {
|
|||
data,
|
||||
});
|
||||
}
|
||||
// 登出
|
||||
export function logout(token: string) {
|
||||
return request2({
|
||||
url: "/logout",
|
||||
|
|
@ -32,6 +33,7 @@ export function logout(token: string) {
|
|||
}
|
||||
});
|
||||
}
|
||||
// 重置密码
|
||||
export function resetPassword(data: object) {
|
||||
return request2({
|
||||
url: "/password/reset",
|
||||
|
|
@ -39,9 +41,23 @@ export function resetPassword(data: object) {
|
|||
data,
|
||||
});
|
||||
}
|
||||
export function userInfo(userid: number) {
|
||||
// 用户信息
|
||||
export function userInfo() {
|
||||
return request2({
|
||||
url: `/user/${userid}`,
|
||||
url: `/UserInfo`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
// 验证码
|
||||
export function loginCode() {
|
||||
return request2({
|
||||
url: `/code`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
export function userTeam() {
|
||||
return request2({
|
||||
url: `/team`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export const phoneReg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/
|
||||
export const emilReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
|
||||
export default {
|
||||
phoneReg,
|
||||
emilReg
|
||||
}
|
||||
|
|
@ -312,7 +312,7 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
.tags-view-container {
|
||||
height: 55px;
|
||||
//height: 55px;
|
||||
align-items: self-end;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -39,4 +39,3 @@ export default createStore<RootState>({
|
|||
strict: debug,
|
||||
plugins: debug ? [createLogger(), persistent] : [persistent],
|
||||
});
|
||||
console.log(modules.user.token)
|
||||
|
|
@ -68,7 +68,7 @@ const actions = {
|
|||
// get user info after user logined
|
||||
getInfo({ commit,state }: ActionContext<userState, userState>, params: any) {
|
||||
return new Promise((resolve, reject) => {
|
||||
userInfo(params.user_info).then((res) => {
|
||||
userInfo().then((res) => {
|
||||
commit("infoChange", res.data);
|
||||
resolve(res.data);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import axios, {
|
|||
} from "axios";
|
||||
import store from "@/store";
|
||||
import { ElMessage } from "element-plus";
|
||||
const whiteList:any[] = ['/get/imgCode']
|
||||
const whiteList:any[] = ['/get/imgCode','/code']
|
||||
const service: AxiosInstance = axios.create({
|
||||
baseURL: "/workbench",
|
||||
timeout: 10000,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
v-model="Propsvisible"
|
||||
title="创建团队"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
@close="close"
|
||||
>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
||||
|
|
@ -68,18 +67,8 @@ export default defineComponent({
|
|||
emit("close", val);
|
||||
},
|
||||
});
|
||||
const handleClose = (done: () => void) => {
|
||||
ElMessageBox.confirm("你确定要离开吗?")
|
||||
.then(() => {
|
||||
done();
|
||||
})
|
||||
.catch(() => {
|
||||
// catch error
|
||||
});
|
||||
};
|
||||
return {
|
||||
close,
|
||||
handleClose,
|
||||
Propsvisible,
|
||||
form,
|
||||
rules,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-model="Propsvisible"
|
||||
title="加入团队"
|
||||
width="30%"
|
||||
@close="close"
|
||||
>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="团队id" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button type="primary" @click="entry">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, computed, unref } from "vue";
|
||||
import type { ElForm } from "element-plus";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
export default defineComponent({
|
||||
props: ["visible"],
|
||||
setup(props, { emit }) {
|
||||
const formRef = ref<InstanceType<typeof ElForm>>();
|
||||
|
||||
const form = reactive({
|
||||
name: "",
|
||||
});
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
{
|
||||
min: 3,
|
||||
max: 5,
|
||||
message: "Length should be 3 to 5",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
});
|
||||
const close = () => {
|
||||
emit("close", false);
|
||||
};
|
||||
const entry = () => {
|
||||
const formWrap = unref<any>(formRef);
|
||||
if (!formWrap) return;
|
||||
// 验证成功
|
||||
formWrap.validate((valid: boolean) => {
|
||||
console.log(valid);
|
||||
if (valid) {
|
||||
close();
|
||||
}
|
||||
});
|
||||
};
|
||||
const Propsvisible = computed({
|
||||
get: () => props.visible,
|
||||
set: (val) => {
|
||||
emit("close", val);
|
||||
},
|
||||
});
|
||||
return {
|
||||
close,
|
||||
Propsvisible,
|
||||
form,
|
||||
rules,
|
||||
entry,
|
||||
formRef
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
@ -3,10 +3,15 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="team-main">
|
||||
<span>我的团队</span>
|
||||
<el-button class="button" type="primary" text="text" @click="create(true)">
|
||||
创建/加入团队
|
||||
<span >我的团队</span>
|
||||
<div>
|
||||
<el-button style="padding: 0;height: 20px" type="primary" text="text" @click="create(true)">
|
||||
创建团队
|
||||
</el-button>
|
||||
<el-button style="padding: 0;height: 20px" type="primary" text="text" @click="create(true)">
|
||||
加入团队
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="team-teams">
|
||||
|
|
@ -28,85 +33,49 @@
|
|||
</div>
|
||||
</el-card>
|
||||
<dialogCreate :visible="createShoW.Show" @close="createShowClose" />
|
||||
<dialogJoin :visible="joinShoW.Show" @close="joinShowClose" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref } from "vue";
|
||||
import {defineComponent, onMounted, reactive, ref} from "vue";
|
||||
import dialogCreate from "./dialog-create.vue";
|
||||
import dialogJoin from "./dialog-join.vue";
|
||||
import {userTeam} from "@/api/work";
|
||||
export default defineComponent({
|
||||
components: { dialogCreate },
|
||||
components: { dialogCreate,dialogJoin },
|
||||
setup() {
|
||||
const teamList = reactive({
|
||||
teamList: [
|
||||
{
|
||||
img: "",
|
||||
name: "梦梦",
|
||||
},
|
||||
{
|
||||
img: "",
|
||||
name: "梦梦",
|
||||
},
|
||||
{
|
||||
img: "",
|
||||
name: "梦梦",
|
||||
},
|
||||
{
|
||||
img: "",
|
||||
name: "梦梦",
|
||||
},
|
||||
{
|
||||
img: "",
|
||||
name: "梦梦",
|
||||
},
|
||||
{
|
||||
img: "",
|
||||
name: "梦梦",
|
||||
},
|
||||
{
|
||||
img: "",
|
||||
name: "梦梦",
|
||||
},
|
||||
{
|
||||
img: "",
|
||||
name: "梦梦",
|
||||
},
|
||||
{
|
||||
img: "",
|
||||
name: "梦梦",
|
||||
},
|
||||
{
|
||||
img: "",
|
||||
name: "梦梦",
|
||||
},
|
||||
{
|
||||
img: "",
|
||||
name: "梦梦",
|
||||
},
|
||||
{
|
||||
img: "",
|
||||
name: "梦梦",
|
||||
},
|
||||
{
|
||||
img: "",
|
||||
name: "梦梦",
|
||||
},
|
||||
],
|
||||
teamList: [],
|
||||
});
|
||||
onMounted(()=>{
|
||||
userTeam().then(res=>{
|
||||
teamList.teamList = res.data
|
||||
})
|
||||
})
|
||||
|
||||
const createShoW = reactive({
|
||||
Show: false,
|
||||
});
|
||||
const joinShoW = reactive({
|
||||
Show: false,
|
||||
});
|
||||
const create = (Show: boolean) => {
|
||||
createShoW.Show = Show;
|
||||
};
|
||||
const createShowClose = (Show: boolean = false) => {
|
||||
create(Show);
|
||||
};
|
||||
const joinShowClose = (Show: boolean = false) => {
|
||||
joinShoW.Show = Show
|
||||
};
|
||||
return {
|
||||
teamList,
|
||||
create,
|
||||
createShowClose,
|
||||
joinShowClose,
|
||||
createShoW,
|
||||
joinShoW
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="userProject">
|
||||
<div class="userProject-user">
|
||||
<div>头像</div>
|
||||
<div>早安。工具人</div>
|
||||
<div>早安,{{ store.state.user.info.nickname }}</div>
|
||||
</div>
|
||||
<div class="userProject-project">
|
||||
<div>
|
||||
|
|
@ -34,8 +34,17 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
export default defineComponent({})
|
||||
import {defineComponent, onMounted} from 'vue'
|
||||
import {useStore} from "vuex";
|
||||
import {userTeam} from "@/api/work";
|
||||
export default defineComponent({
|
||||
setup(){
|
||||
const store = useStore();
|
||||
return {
|
||||
store
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -25,14 +25,14 @@
|
|||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<div class="">
|
||||
<div class="" style="width:100%">
|
||||
<!-- <el-button type="primary" @click="onSubmit">登录</el-button> -->
|
||||
<div v-show="!islogin">
|
||||
<el-checkbox v-model="form.agreement" />
|
||||
我已阅读并同意“铜壶协议和隐私条款”
|
||||
</div>
|
||||
<div class="form-center">
|
||||
<div v-if="islogin!" class="submit-btn" @click="onSubmit">
|
||||
<div v-if="islogin" class="submit-btn" @click="onSubmit">
|
||||
注册
|
||||
</div>
|
||||
<div v-else class="submit-btn" @click="onSubmit">
|
||||
|
|
@ -202,7 +202,6 @@ export default defineComponent({
|
|||
},
|
||||
mounted() {
|
||||
clearInterval(time)
|
||||
console.log(localStorage.getItem('endTime'))
|
||||
},
|
||||
onBeforeUnmount() {
|
||||
clearInterval(time)
|
||||
|
|
@ -273,4 +272,10 @@ img {
|
|||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sendCode{
|
||||
text-align: center;
|
||||
color: #19abdb;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -25,13 +25,13 @@
|
|||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<div class="">
|
||||
<div class="" style="width: 100%">
|
||||
<div v-show="!islogin">
|
||||
<el-checkbox v-model="form.agreement" />
|
||||
我已阅读并同意“铜壶协议和隐私条款”
|
||||
</div>
|
||||
<div class="form-center">
|
||||
<div v-if="islogin!" class="submit-btn" @click="onSubmit">
|
||||
<div v-if="islogin" class="submit-btn" @click="onSubmit">
|
||||
注册
|
||||
</div>
|
||||
<div v-else class="submit-btn" @click="onSubmit">
|
||||
|
|
@ -55,10 +55,10 @@
|
|||
<script lang="ts">
|
||||
import {reactive, defineComponent, toRefs, onBeforeMount, ref, onUnmounted, unref} from 'vue'
|
||||
import verify from './verify.png'
|
||||
import {types} from "sass";
|
||||
import {register, sendCode} from "@/api/work";
|
||||
import {ElForm, ElMessage} from "element-plus";
|
||||
import {registerUserApi} from "@/api/user";
|
||||
import {phoneReg} from "@/config/constant";
|
||||
let time:number = -9999
|
||||
export default defineComponent({
|
||||
emits:["setMssages","setState"],
|
||||
|
|
@ -86,6 +86,9 @@ export default defineComponent({
|
|||
if (!value) {
|
||||
return callback(new Error('手机号不能为空'))
|
||||
}
|
||||
if(!phoneReg.test(value)){
|
||||
return callback(new Error('手机号格式不对'))
|
||||
}
|
||||
callback()
|
||||
},
|
||||
trigger: 'blur'
|
||||
|
|
@ -95,8 +98,8 @@ export default defineComponent({
|
|||
{
|
||||
// required: true,
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
if (!value||value.length<4) {
|
||||
return callback(new Error('验证码不能为空'))
|
||||
if (!value||value.length<=4) {
|
||||
return callback(new Error('验证码格式不对'))
|
||||
}
|
||||
callback()
|
||||
},
|
||||
|
|
@ -129,7 +132,6 @@ export default defineComponent({
|
|||
// register({}).then(res=>{
|
||||
//
|
||||
// }))
|
||||
console.log(11111111)
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -156,10 +158,10 @@ export default defineComponent({
|
|||
// 发送验证码
|
||||
const sendRequest = () => {
|
||||
// 手机号校验
|
||||
if(form.phone.length<13){
|
||||
if(!phoneReg.test(form.phone)){
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: '手机号不能为空',
|
||||
message: '手机号格式不对',
|
||||
type: 'error',
|
||||
duration:3000
|
||||
})
|
||||
|
|
@ -198,7 +200,6 @@ export default defineComponent({
|
|||
},
|
||||
mounted() {
|
||||
clearInterval(time)
|
||||
console.log(localStorage.getItem('endTime'))
|
||||
},
|
||||
onBeforeUnmount() {
|
||||
clearInterval(time)
|
||||
|
|
@ -212,8 +213,6 @@ export default defineComponent({
|
|||
transition: all 1s;
|
||||
}
|
||||
.submit-btn {
|
||||
min-width: 50px;
|
||||
width: 50px;
|
||||
outline: none;
|
||||
margin: 0 auto;
|
||||
padding: 12px 30px;
|
||||
|
|
@ -271,4 +270,10 @@ img {
|
|||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sendCode{
|
||||
text-align: center;
|
||||
color: #19abdb;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,16 +10,16 @@
|
|||
:model="form"
|
||||
label-width="0px"
|
||||
>
|
||||
<el-form-item style="margin-bottom: 10px" class="app-form-center" label-width="80px" label="账号">
|
||||
<el-form-item class="app-form-center" prop="name" label-width="80px" label="账号">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
size="large"
|
||||
type="text"
|
||||
maxlength="50"
|
||||
placeholder="请输入您的邮箱"
|
||||
placeholder="邮箱/账号/手机号登录"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 10px" class="app-form-center" label="密码" label-width="80px">
|
||||
<el-form-item class="app-form-center" prop="password" label="密码" label-width="80px">
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
placeholder="请输入您的密码"
|
||||
|
|
@ -30,9 +30,9 @@
|
|||
</el-form-item>
|
||||
<el-form-item
|
||||
label="验证码"
|
||||
style="margin-bottom: 10px"
|
||||
class="app-form-center"
|
||||
label-width="80px"
|
||||
prop="verify"
|
||||
>
|
||||
<div class="verify">
|
||||
<div>
|
||||
|
|
@ -42,10 +42,10 @@
|
|||
size="large"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/api/get/imgCode" height="30px" alt="">
|
||||
<div @click="getCode" class="CodeImg">
|
||||
<img style="width: 100px;" :src="'data:image/gif;base64,'+imageCode" alt="">
|
||||
</div>
|
||||
<div>看不清</div>
|
||||
<div class="checkCode" @click="getCode">看不清</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div class="submit-btn" @click="onSubmit">
|
||||
|
|
@ -65,15 +65,16 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {reactive, defineComponent, toRefs, onBeforeMount, ref, onUnmounted, unref} from 'vue'
|
||||
import {reactive, defineComponent, toRefs, onBeforeMount, ref, onUnmounted, unref, onMounted} from 'vue'
|
||||
import verify from './verify.png'
|
||||
import {types} from "sass";
|
||||
import {register, sendCode} from "@/api/work";
|
||||
import {loginCode, register, sendCode} from "@/api/work";
|
||||
import {ElForm, ElMessage} from "element-plus";
|
||||
import {registerUserApi} from "@/api/user";
|
||||
import store from "@/store";
|
||||
import router, {addRoutes} from "@/router";
|
||||
import {RouteLocationRaw, useRoute} from "vue-router";
|
||||
import {emilReg, phoneReg} from "@/config/constant";
|
||||
let time:number = -9999
|
||||
export default defineComponent({
|
||||
emits:["setMssages","setState"],
|
||||
|
|
@ -85,6 +86,8 @@ export default defineComponent({
|
|||
},
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const imageCode = ref("")
|
||||
const type = ref("user")
|
||||
const loginRuleFormRef = ref<InstanceType<typeof ElForm>>()
|
||||
// 登录验证
|
||||
const loginRules = reactive({
|
||||
|
|
@ -118,14 +121,19 @@ export default defineComponent({
|
|||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// verify: [
|
||||
// {
|
||||
// required: true,
|
||||
// trigger: 'blur',
|
||||
// message: '请填写验证码'
|
||||
// }
|
||||
// ]
|
||||
verify: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
message: '请填写验证码'
|
||||
}
|
||||
]
|
||||
})
|
||||
const getCode = ()=>{
|
||||
loginCode().then((res:any)=>{
|
||||
imageCode.value = res
|
||||
})
|
||||
}
|
||||
// 发送验证码
|
||||
const form = reactive({
|
||||
name: 'tiantang',
|
||||
|
|
@ -135,16 +143,22 @@ export default defineComponent({
|
|||
})
|
||||
const onSubmit = () => {
|
||||
const formWrap = unref<any>(loginRuleFormRef)
|
||||
console.log(2)
|
||||
if (!formWrap) return
|
||||
console.log(1)
|
||||
if(emilReg.test(form.name)){
|
||||
type.value = 'email'
|
||||
}
|
||||
else if(phoneReg.test(form.name)){
|
||||
type.value = 'sms'
|
||||
}else{
|
||||
type.value = 'user'
|
||||
}
|
||||
// 验证成功
|
||||
formWrap.validate((valid: boolean) => {
|
||||
console.log(valid)
|
||||
if (valid) {
|
||||
store
|
||||
.dispatch("user/login", {
|
||||
type: "user",
|
||||
type: type.value,
|
||||
password: form.password,
|
||||
name: form.name,
|
||||
// code: formSubmit.register.code
|
||||
|
|
@ -164,16 +178,20 @@ export default defineComponent({
|
|||
}
|
||||
})
|
||||
}
|
||||
onMounted(()=>{
|
||||
getCode()
|
||||
})
|
||||
return {
|
||||
loginRuleFormRef,
|
||||
form,
|
||||
loginRules,
|
||||
onSubmit
|
||||
onSubmit,
|
||||
imageCode,
|
||||
getCode
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
clearInterval(time)
|
||||
console.log(localStorage.getItem('endTime'))
|
||||
},
|
||||
onBeforeUnmount() {
|
||||
clearInterval(time)
|
||||
|
|
@ -188,8 +206,6 @@ export default defineComponent({
|
|||
}
|
||||
.submit-btn {
|
||||
cursor: pointer;
|
||||
min-width: 50px;
|
||||
width: 50px;
|
||||
outline: none;
|
||||
margin: 0 auto;
|
||||
padding: 12px 30px;
|
||||
|
|
@ -257,4 +273,9 @@ img {
|
|||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
.checkCode,.CodeImg{
|
||||
color: #19abdb;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
label-width="0px"
|
||||
>
|
||||
<el-form-item
|
||||
style="margin-bottom: 10px"
|
||||
prop="nickname"
|
||||
class="app-form-center"
|
||||
label-width="80px"
|
||||
|
|
@ -22,12 +21,10 @@
|
|||
size="large"
|
||||
type="text"
|
||||
maxlength="50"
|
||||
|
||||
placeholder="请输入您的昵称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="margin-bottom: 10px"
|
||||
prop="name"
|
||||
class="app-form-center"
|
||||
label-width="80px"
|
||||
|
|
@ -42,7 +39,6 @@
|
|||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="margin-bottom: 10px"
|
||||
prop="email"
|
||||
class="app-form-center"
|
||||
label-width="80px"
|
||||
|
|
@ -57,7 +53,6 @@
|
|||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="margin-bottom: 10px"
|
||||
prop="password"
|
||||
class="app-form-center"
|
||||
label-width="80px"
|
||||
|
|
@ -72,7 +67,6 @@
|
|||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="margin-bottom: 10px"
|
||||
prop="entryPassword"
|
||||
class="app-form-center"
|
||||
label-width="80px"
|
||||
|
|
@ -89,7 +83,6 @@
|
|||
<el-form-item
|
||||
label-width="80px"
|
||||
label="验证码"
|
||||
style="margin-bottom: 10px"
|
||||
class="app-form-center"
|
||||
prop="verify"
|
||||
|
||||
|
|
@ -103,16 +96,16 @@
|
|||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/api/get/imgCode" height="30px" alt="">
|
||||
<div @click="getCode" class="CodeImg">
|
||||
<img style="width: 100px;" :src="'data:image/gif;base64,'+imageCode" alt="">
|
||||
</div>
|
||||
<div>换一张</div>
|
||||
<div class="checkCode" @click="getCode">看不清</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="agreement">
|
||||
<div class="">
|
||||
<div>
|
||||
<el-checkbox v-model="register.agreement" />
|
||||
<el-checkbox v-model="register.agreement"/>
|
||||
我已阅读并同意“铜壶协议和隐私条款”
|
||||
</div>
|
||||
<div class="submit-btn" @click="onRegister">
|
||||
|
|
@ -132,60 +125,91 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {reactive, defineComponent, toRefs, onBeforeMount, ref, onUnmounted, unref, getCurrentInstance} from 'vue'
|
||||
import {reactive, defineComponent, toRefs, onBeforeMount, ref, onUnmounted, unref, getCurrentInstance,onMounted} from 'vue'
|
||||
import verify from './verify.png'
|
||||
import {types} from "sass";
|
||||
import {register, sendCode} from "@/api/work";
|
||||
import {register, sendCode,loginCode} from "@/api/work";
|
||||
import {ElForm, ElMessage} from "element-plus";
|
||||
import {registerUserApi} from "@/api/user";
|
||||
let time:number = -9999
|
||||
|
||||
|
||||
let time: number = -9999
|
||||
export default defineComponent({
|
||||
emits:["setState","setMssages"],
|
||||
props:{
|
||||
islogin:{
|
||||
type:Boolean,
|
||||
default:()=>false
|
||||
emits: ["setState", "setMssages"],
|
||||
props: {
|
||||
islogin: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
}
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const { proxy }: any = getCurrentInstance()
|
||||
setup(props, {emit}) {
|
||||
const {proxy}: any = getCurrentInstance()
|
||||
const registerRuleFormRef = ref<InstanceType<typeof ElForm>>()
|
||||
const imageCode = ref("")
|
||||
const onRegister = () => {
|
||||
if (!register.agreement) {
|
||||
proxy.$message.error('请先勾选协议', 2000)
|
||||
ElMessage({
|
||||
duration:2000,
|
||||
showClose: true,
|
||||
message: '请先勾选协议',
|
||||
type: 'error',
|
||||
})
|
||||
return
|
||||
}
|
||||
const formWrap = unref<any>(registerRuleFormRef)
|
||||
if (!formWrap) return
|
||||
// 验证成功
|
||||
formWrap.validate((valid: boolean) => {
|
||||
console.log(valid)
|
||||
if (valid) {
|
||||
registerUserApi({
|
||||
password_1: register.password,
|
||||
password_2: register.entryPassword,
|
||||
email: register.email,
|
||||
agree: register.agreement
|
||||
agree: register.agreement,
|
||||
type:"email"
|
||||
}).then((res: any) => {
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const getCode = ()=>{
|
||||
loginCode().then((res:any)=>{
|
||||
imageCode.value = res
|
||||
})
|
||||
}
|
||||
// 注册验证
|
||||
const registerRules = reactive({
|
||||
email: [
|
||||
// { required: true, message: '邮箱不能为空', trigger: 'blur' },
|
||||
// email: [
|
||||
// // { required: true, message: '邮箱不能为空', trigger: 'blur' },
|
||||
// {
|
||||
// trigger: 'blur',
|
||||
// validator: (rule: any, value: any, callback: any) => {
|
||||
// console.log(rule, value, callback)
|
||||
//
|
||||
// if (!value) {
|
||||
// return callback(new Error('请填写您的email'))
|
||||
// }
|
||||
// callback()
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
name: [
|
||||
{ required: true, message: '用户名不能为空', trigger: 'blur' },
|
||||
{
|
||||
trigger: 'blur',
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
console.log(rule, value, callback)
|
||||
|
||||
if (!value) {
|
||||
return callback(new Error('请填写您的email'))
|
||||
}
|
||||
callback()
|
||||
min: 8,
|
||||
max: 20,
|
||||
message: '用户名在8个字符到20个字符之间',
|
||||
}
|
||||
],
|
||||
nickname: [
|
||||
{ required: true, message: '昵称不能为空', trigger: 'blur' },
|
||||
{
|
||||
trigger: 'blur',
|
||||
min: 2,
|
||||
max: 20,
|
||||
message: '昵称在8个字符到20个字符之间',
|
||||
}
|
||||
],
|
||||
password: [
|
||||
|
|
@ -202,8 +226,11 @@ export default defineComponent({
|
|||
],
|
||||
entryPassword: [
|
||||
{
|
||||
// required: true,
|
||||
required: true,
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
if(value===""||value===undefined){
|
||||
return callback(new Error('确认密码不能为空'))
|
||||
}
|
||||
if (value !== register.password) {
|
||||
return callback(new Error('两次密码不一致'))
|
||||
}
|
||||
|
|
@ -230,16 +257,20 @@ export default defineComponent({
|
|||
verify: '',
|
||||
imgVerify: null
|
||||
})
|
||||
onMounted(()=>{
|
||||
getCode()
|
||||
})
|
||||
return {
|
||||
register,
|
||||
registerRuleFormRef,
|
||||
registerRules,
|
||||
onRegister
|
||||
onRegister,
|
||||
imageCode,
|
||||
getCode
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
clearInterval(time)
|
||||
console.log(localStorage.getItem('endTime'))
|
||||
},
|
||||
onBeforeUnmount() {
|
||||
clearInterval(time)
|
||||
|
|
@ -252,6 +283,7 @@ export default defineComponent({
|
|||
width: 360px;
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
outline: none;
|
||||
margin: 0 auto;
|
||||
|
|
@ -262,13 +294,16 @@ export default defineComponent({
|
|||
color: #fff;
|
||||
background-color: var(--system-primary-color);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: var(--system-primary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.form-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.verify {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
|
@ -276,38 +311,51 @@ export default defineComponent({
|
|||
> div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
> div:first-child {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
margin-left: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> div:nth-child(3) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
transition: transform 0.9s ease-in-out;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
|
||||
.Short-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> span {
|
||||
color: #19abdb;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.el-form-item{
|
||||
|
||||
.el-form-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.register {
|
||||
text-align: center;
|
||||
color: #19abdb;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
.checkCode,.CodeImg{
|
||||
color: #19abdb;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -51,5 +51,5 @@ registerMicroApps(apps, {
|
|||
}
|
||||
]
|
||||
})
|
||||
// setDefaultMountApp('/base')
|
||||
setDefaultMountApp('/base')
|
||||
start()
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@ const microApps = [
|
|||
{
|
||||
|
||||
name: 'base',
|
||||
title: '工作台',
|
||||
title: '主平台',
|
||||
entry: process.env.VUE_APP_SUB_BASE,
|
||||
container:"#subapp-viewport",
|
||||
activeRule: '/base'
|
||||
},
|
||||
{
|
||||
name: 'workbench',
|
||||
title: '工作台2',
|
||||
title: '工作台',
|
||||
entry: process.env.VUE_APP_SUB_WORKBENCH,
|
||||
container:"#subapp-viewport",
|
||||
activeRule: '/workbench'
|
||||
|
|
|
|||
|
|
@ -32,11 +32,17 @@ module.exports = {
|
|||
// "^/mock": "/mock"
|
||||
}
|
||||
},
|
||||
// 代理配置
|
||||
// 接口代理配置
|
||||
'/workbench': {
|
||||
target: 'http://121.43.42.180:13777/',
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/workbench/, '/api')
|
||||
},
|
||||
// 静态文件代理配置
|
||||
'/base': {
|
||||
target: 'http://127.0.0.1:3000/',
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/base/, '/base')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="userProject">
|
||||
<div class="userProject-user">
|
||||
<div>头像</div>
|
||||
<div>早安。工具人</div>
|
||||
<div>早安,</div>
|
||||
</div>
|
||||
<div class="userProject-project">
|
||||
<div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue