hookehuyr

联调用户相关页面接口

......@@ -34,6 +34,7 @@ declare module 'vue' {
HagerMore: typeof import('./src/components/hagerMore.vue')['default']
HagerService: typeof import('./src/components/common/hagerService.vue')['default']
Navbar: typeof import('./src/components/navbar.vue')['default']
Privacy: typeof import('./src/components/privacy.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SlideComp: typeof import('./src/components/slideComp.vue')['default']
......
/*
* @Date: 2024-09-26 13:36:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-24 10:26:13
* @LastEditTime: 2024-10-25 14:01:25
* @FilePath: /hager/src/api/hager.js
* @Description: 文件描述
*/
......@@ -17,6 +17,12 @@ const Api = {
PRODUCT_SEARCH: '/srv/?a=cate&type=product_search',
SOLUTION: '/srv/?a=cate&type=solution',
FOOTER: '/srv/?a=footer',
REGISTER: '/srv/?a=user&type=register',
LOGIN: '/srv/?a=user&type=login',
GET_USER: '/srv/?a=user&type=get_user',
EDIT_USER: '/srv/?a=user&type=edit_user',
GET_CODE: '/srv/?a=user&type=get_code',
EDIT_PASSWORD: '/srv/?a=user&type=edit_password',
};
export const honorAPI = (params) => fn(fetch.get(Api.HONOR, params));
......@@ -36,3 +42,10 @@ export const getProductSearchAPI = (params) => fn(fetch.get(Api.PRODUCT_SEARCH,
export const getSolutionListAPI = (params) => fn(fetch.get(Api.SOLUTION, params));
export const getFooterAPI = (params) => fn(fetch.get(Api.FOOTER, params));
export const registerAPI = (params) => fn(fetch.post(Api.REGISTER, params));
export const loginAPI = (params) => fn(fetch.post(Api.LOGIN, params));
export const getUserInfoAPI = (params) => fn(fetch.get(Api.GET_USER, params));
export const editUserInfoAPI = (params) => fn(fetch.post(Api.EDIT_USER, params));
export const getCodeAPI = (params) => fn(fetch.post(Api.GET_CODE, params));
export const editPasswordAPI = (params) => fn(fetch.post(Api.EDIT_PASSWORD, params));
......
<!--
* @Date: 2024-10-20 09:59:52
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-21 18:21:31
* @LastEditTime: 2024-10-25 15:55:42
* @FilePath: /hager/src/components/common/hagerInput.vue
* @Description: 文件描述
-->
......@@ -18,12 +18,12 @@
<script>
import mixin from 'common/mixin';
import { Message } from 'element-ui';
import { getCodeAPI } from "@/api/hager.js";
export default {
mixins: [mixin.init],
props: {
value: {
type: String,
default: ''
},
placeholder: {
......@@ -60,6 +60,8 @@ export default {
return 'https://cdn.ipadbiz.cn/hager/icon/input/%E9%82%AE%E7%AE%B1@2x.png';
case 'pwd':
return 'https://cdn.ipadbiz.cn/hager/icon/input/%E5%AF%86%E7%A0%81@2x.png';
case 'code':
return 'https://cdn.ipadbiz.cn/hager/icon/%E9%AA%8C%E8%AF%81%E7%A0%81@2x.png';
case 'username':
return 'https://cdn.ipadbiz.cn/hager/icon/input/%E5%A7%93%E5%90%8D@2x.png';
case 'tel':
......@@ -80,16 +82,8 @@ export default {
// 使用 $emit 触发 input 事件,传递新的输入值
this.$emit('input', event.target.value);
},
resetPwd () {
if (!this.email) {
Message({
showClose: true,
message: '邮箱地址不能为空',
type: 'warning'
});
} else {
}
async resetPwd () {
this.$emit('send', this.value);
}
}
}
......
<!--
* @Date: 2024-10-18 18:00:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-22 18:19:58
* @LastEditTime: 2024-10-25 13:52:46
* @FilePath: /hager/src/views/user/info.vue
* @Description: 文件描述
-->
......@@ -10,7 +10,7 @@
<div class="input-title">我的信息</div>
<div style="padding: 1rem 1.5rem 1rem 1rem;">
<hagerInput type="email" :disable="status !== 'edit'" required v-model="email" placeholder="请输入注册邮箱地址" />
<hagerInput type="pwd" :disable="status !== 'edit'" required v-model="pwd" placeholder="请输入登录密码" />
<!-- <hagerInput type="pwd" :disable="status !== 'edit'" required v-model="pwd" placeholder="请输入登录密码" /> -->
<hagerInput type="username" :disable="status !== 'edit'" v-model="username" placeholder="请输入姓名" />
<hagerInput type="tel" :disable="status !== 'edit'" v-model="tel" placeholder="请输入联系电话" />
<hagerInput type="corp" :disable="status !== 'edit'" v-model="corp" placeholder="请输入公司名称" />
......@@ -19,7 +19,7 @@
<div class="info-footer">
<div v-if="status !== 'edit'" class="submit-btn" @click="onHandle">修改信息</div>
<div v-else class="edit-box">
<div class="cancel btn" @click="status=''">取消</div>
<div class="cancel btn" @click="onCancel">取消</div>
<div class="confirm btn" @click="onSubmit">确定</div>
</div>
<div class="info-subsidiary">
......@@ -27,9 +27,7 @@
</div>
</div>
<el-dialog title="隐私政策" :visible.sync="dialogVisible">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quos quis iste alias! Necessitatibus veniam eum dolor dolorem enim officiis aspernatur neque, quidem tempore officia non optio eveniet aliquid minus!
</div>
<privacy></privacy>
</el-dialog>
<el-drawer
......@@ -37,7 +35,7 @@
size="100%"
:visible.sync="drawer"
:direction="direction">
<span>我来啦!</span>
<privacy></privacy>
</el-drawer>
</div>
</template>
......@@ -46,37 +44,82 @@
import mixin from 'common/mixin';
import hagerInput from '@/components/common/hagerInput.vue';
import $ from 'jquery';
import privacy from '@/components/privacy.vue';
import { getUserInfoAPI, editUserInfoAPI } from "@/api/hager.js";
import { MessageBox, Message } from 'element-ui';
export default {
mixins: [mixin.init],
data () {
return {
email: 'hr.communication@hager.com',
pwd: 'hager123',
username: '王二虎',
tel: '15650569910',
corp: '海格电气集团',
department: '研发部产品经理',
email: '',
pwd: '',
username: '',
tel: '',
corp: '',
department: '',
status: '',
dialogVisible: false,
drawer: false,
direction: 'rtl',
}
},
mounted () {
async mounted () {
if ($('#router-view').outerHeight() < $('.user-box').height()) {
$('#router-view').height($('.user-box').outerHeight())
}
// 获取用户信息
this.getUserInfo();
},
methods: {
async getUserInfo () {
const { code, data } = await getUserInfoAPI();
if (code === 1) { // 已登录
this.email = data.email;
this.username = data.username;
this.tel = data.mobile;
this.corp = data.company;
this.department = data.department;
}
},
onHandle () {
this.status = 'edit';
},
onSubmit () {
console.log('提交');
setTimeout(() => {
async onSubmit () {
if (!this.email) {
Message({
type: 'error',
message: '邮箱地址不能空'
});
return;
}
// 检验邮箱地址有效性
if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)) {
Message({
type: 'error',
message: '邮箱地址格式不正确'
});
return;
}
const { code, msg } = await editUserInfoAPI({
email: this.email,
username: this.username,
mobile: this.tel,
company: this.corp,
department: this.department
});
if (code) {
Message({
type: 'success',
message: msg
});
this.status = '';
}, 1000);
}
},
onCancel () {
this.status = '';
// 获取用户信息
this.getUserInfo();
},
openPrivacy () {
if (this.is_xs) {
......
<!--
* @Date: 2024-10-18 18:00:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-22 17:58:47
* @LastEditTime: 2024-10-25 13:49:38
* @FilePath: /hager/src/views/user/login.vue
* @Description: 文件描述
-->
......@@ -14,7 +14,7 @@
<!-- TODO: 记住密码和忘记密码业务显示的问题? -->
<div class="pwd-box">
<!-- <div><el-checkbox v-model="checked">记住密码</el-checkbox></div> -->
<div><span @click="goToReset">忘记密码?</span></div>
<div><span @click="goToReset">忘记/修改密码?</span></div>
</div>
</div>
<div class="login-footer">
......@@ -30,6 +30,8 @@
import mixin from 'common/mixin';
import hagerInput from '@/components/common/hagerInput.vue';
import $ from 'jquery';
import { loginAPI } from '@/api/hager';
import { MessageBox, Message } from 'element-ui';
export default {
mixins: [mixin.init],
......@@ -46,8 +48,37 @@ export default {
}
},
methods: {
onSubmit () {
console.warn();
async onSubmit () {
if (!this.email) {
Message({
type: 'error',
message: '邮箱地址不能空'
});
return;
}
// 检验邮箱地址有效性
if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)) {
Message({
type: 'error',
message: '邮箱地址格式不正确'
});
return;
}
if (!this.pwd) {
Message({
type: 'error',
message: '登录密码不能空'
});
return;
}
const { code, msg } = await loginAPI({ email: this.email, password: this.pwd });
if (code) {
Message({
type: 'success',
message: msg
});
this.$router.push('/');
}
},
goToRegister () {
this.$router.push('/user/register');
......
<!--
* @Date: 2024-10-18 18:00:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-22 18:14:41
* @LastEditTime: 2024-10-25 13:37:44
* @FilePath: /hager/src/views/user/register.vue
* @Description: 文件描述
-->
......@@ -24,9 +24,7 @@
</div>
</div>
<el-dialog title="隐私政策" :visible.sync="dialogVisible">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quos quis iste alias! Necessitatibus veniam eum dolor dolorem enim officiis aspernatur neque, quidem tempore officia non optio eveniet aliquid minus!
</div>
<privacy></privacy>
</el-dialog>
<el-drawer
......@@ -34,7 +32,7 @@
size="100%"
:visible.sync="drawer"
:direction="direction">
<span>我来啦!</span>
<privacy></privacy>
</el-drawer>
</div>
</template>
......@@ -43,6 +41,9 @@
import mixin from 'common/mixin';
import hagerInput from '@/components/common/hagerInput.vue';
import $ from 'jquery';
import { registerAPI } from '@/api/hager';
import { MessageBox, Message } from 'element-ui';
import privacy from '@/components/privacy.vue';
export default {
mixins: [mixin.init],
......@@ -65,8 +66,37 @@ export default {
}
},
methods: {
onSubmit () {
console.warn();
async onSubmit () {
if (!this.email) {
Message({
type: 'error',
message: '邮箱地址不能空'
});
return;
}
// 检验邮箱地址有效性
if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)) {
Message({
type: 'error',
message: '邮箱地址格式不正确'
});
return;
}
if (!this.pwd) {
Message({
type: 'error',
message: '登录密码不能空'
});
return;
}
const { code, msg } = await registerAPI({ email: this.email, password: this.pwd, username: this.username, mobile: this.tel, company: this.corp, department: this.department });
if (code) {
Message({
type: 'success',
message: msg
});
this.goToLogin()
}
},
goToLogin () {
this.$router.push('/user/login');
......
<!--
* @Date: 2024-10-18 18:00:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-21 10:53:15
* @LastEditTime: 2024-10-25 16:00:00
* @FilePath: /hager/src/views/user/reset.vue
* @Description: 文件描述
-->
......@@ -9,8 +9,8 @@
<div class="hager-reset-page">
<div class="input-title">密码重置</div>
<div style="padding: 1rem 1.5rem 1rem 1rem;">
<hagerInput type="email" required reset v-model="email" placeholder="请输入邮箱地址" />
<hagerInput type="pwd" required v-model="sms" placeholder="请输入验证码" />
<hagerInput type="email" required reset @send="onSend" v-model="email" placeholder="请输入邮箱地址" />
<hagerInput type="code" required v-model="sms" placeholder="请输入验证码" />
<hagerInput type="pwd" required v-model="pwd" placeholder="请输入登录密码" />
</div>
<div class="reset-footer">
......@@ -25,8 +25,9 @@
<script>
import mixin from 'common/mixin';
import hagerInput from '@/components/common/hagerInput.vue';
import { Message } from 'element-ui';
import $ from 'jquery';
import { getCodeAPI, editPasswordAPI } from "@/api/hager.js";
import { MessageBox, Message, Loading } from 'element-ui';
export default {
mixins: [mixin.init],
......@@ -35,7 +36,8 @@ export default {
email: '',
pwd: '',
sms: '',
checked: false
checked: false,
fullscreenLoading: false
}
},
mounted () {
......@@ -44,12 +46,77 @@ export default {
}
},
methods: {
onSubmit () {
Message({
showClose: true,
message: '重置成功',
type: 'success'
});
async onSend (val) {
if (!val) {
Message({
type: 'error',
message: '邮箱地址不能空'
});
return;
}
if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val)) { // 检验邮箱地址有效性
Message({
type: 'error',
message: '邮箱地址格式不正确'
});
return;
}
let loadingInstance = Loading.service({ fullscreen: true, background: 'rgba(0, 0, 0, 0.3)' });
const { code, msg } = await getCodeAPI({ email: val });
if (code) {
Message({
type: 'success',
message: '发送成功'
});
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close();
});
} else {
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close();
});
}
},
async onSubmit () {
if (!this.email) {
Message({
type: 'error',
message: '邮箱地址不能空'
});
return;
}
// 检验邮箱地址有效性
if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)) {
Message({
type: 'error',
message: '邮箱地址格式不正确'
});
return;
}
if (!this.sms) {
Message({
type: 'error',
message: '验证码不能空'
});
return;
}
if (!this.pwd) {
Message({
type: 'error',
message: '登录密码不能空'
});
return;
}
const { code, msg } = await editPasswordAPI({ email: this.email, password: this.pwd, code: this.sms });
if (code) {
Message({
showClose: true,
message: '重置成功',
type: 'success'
});
this.$router.push('/user/login');
}
},
goBack () {
this.$router.go(-1);
......