diff --git a/src/assets/img/baidu.png b/src/assets/img/baidu.png new file mode 100644 index 0000000..e09bfd0 Binary files /dev/null and b/src/assets/img/baidu.png differ diff --git a/src/assets/img/bilibili.png b/src/assets/img/bilibili.png new file mode 100644 index 0000000..8938255 Binary files /dev/null and b/src/assets/img/bilibili.png differ diff --git a/src/assets/img/blibli.png b/src/assets/img/blibli.png new file mode 100644 index 0000000..5ae4a90 Binary files /dev/null and b/src/assets/img/blibli.png differ diff --git a/src/assets/img/douying.png b/src/assets/img/douying.png new file mode 100644 index 0000000..2876e3a Binary files /dev/null and b/src/assets/img/douying.png differ diff --git a/src/assets/img/login.png b/src/assets/img/login.png new file mode 100644 index 0000000..3e12279 Binary files /dev/null and b/src/assets/img/login.png differ diff --git a/src/assets/img/toutiao.png b/src/assets/img/toutiao.png new file mode 100644 index 0000000..c5405e2 Binary files /dev/null and b/src/assets/img/toutiao.png differ diff --git a/src/assets/img/toutiaosearch.png b/src/assets/img/toutiaosearch.png new file mode 100644 index 0000000..08ee288 Binary files /dev/null and b/src/assets/img/toutiaosearch.png differ diff --git a/src/assets/img/weibo.png b/src/assets/img/weibo.png new file mode 100644 index 0000000..8ab2dbe Binary files /dev/null and b/src/assets/img/weibo.png differ diff --git a/src/assets/img/zhihu.png b/src/assets/img/zhihu.png new file mode 100644 index 0000000..c10a6b5 Binary files /dev/null and b/src/assets/img/zhihu.png differ diff --git a/src/components/home/HomeHeader.vue b/src/components/home/HomeHeader.vue index 2780560..a4a4fc5 100644 --- a/src/components/home/HomeHeader.vue +++ b/src/components/home/HomeHeader.vue @@ -6,30 +6,24 @@ v-if="tabList.length>0" :key="item.index" :to="item.path">{{ item.libel }} - - - - - -
3 - - - +
+ +
+ +
+
+ +
+ +
+
- - - -
登录 - + - + @@ -138,7 +132,7 @@ placeholder="确认密码" auto-complete="new-password" > - + @@ -155,7 +149,7 @@ auto-complete="false" style="" > - + 获取验证码 ({{ sendTime }}s) @@ -164,10 +158,11 @@ @@ -175,27 +170,27 @@ 找回密码 - + -
- + 获取验证码 ({{ sendTime }}s) @@ -203,12 +198,12 @@ - + @@ -224,15 +219,16 @@ placeholder="确认密码" auto-complete="new-password" > - + @@ -245,6 +241,7 @@ import $ from 'jquery' import Vue from "vue"; import axios from "axios"; +import {mapMutations} from "vuex"; export default { name: "HomeHeader", components: {}, @@ -265,8 +262,8 @@ export default { timer: null, codeUrl: 'http://localhost:8080/verifyCode', loginForm: { - username: null, - password: null, + userLogin: null, + userPassword: null, code: null, remember: null }, @@ -278,17 +275,17 @@ export default { repassword: null, }, repasswordForm: { - email: null, - captcha: null, - password: null, + userEmail: null, + activeCode: null, + userPassword: null, repassword: null, }, rules: { - username: [ + userLogin: [ // required：规则，o：失去焦点触发 {required: true, message: "请输入用户名", trigger: "blur"}, ], - password: [{required: true, message: "请输入密码", trigger: "blur"}], + userPassword: [{required: true, message: "请输入密码", trigger: "blur"}], code: [{required: true, message: "请输入验证码", trigger: "blur"}], }, registerRules: { @@ -301,27 +298,32 @@ export default { activeCode: [{required: true, message: "请输入验证码", trigger: "blur"}], }, repasswordRelus: { - email: [{required: true, message: "请输入邮箱", trigger: "blur"}], - password: [{required: true, message: "请输入密码", trigger: "blur"}], + userEmail: [{required: true, message: "请输入邮箱", trigger: "blur"}], + userPassword: [{required: true, message: "请输入密码", trigger: "blur"}], repassword: [{required: true, message: "请输入确认密码", trigger: "blur"}], activeCode: [{required: true, message: "请输入验证码", trigger: "blur"}], - } + }, + userToken: '' } }, mounted() { this.toggleActive(); this.reacherBarFun(); + this.changeImg(); }, created() { }, computed: {}, methods: { + ...mapMutations(['changeLogin']), //切换到找回密码 toRePassword() { this.TabsValue = '3'; }, - + closeLoginDialog() { + this.loginDialogVisible=false; + }, // 打开登陆注册 openLoginDialog() { this.loginDialogVisible = true; @@ -354,26 +356,54 @@ export default { this.icon = "el-icon-lock"; } }, + // 显示确认密码 + showRePass() { + if (this.passwordVisible === "text") { + this.passwordVisible = "password"; + //更换图标 + this.icon = "el-icon-view"; + } else { + this.passwordVisible = "text"; + this.icon = "el-icon-lock"; + } + }, // 登录提交 - submitLoginForm() { + submitLoginForm(formName) { + let _this=this; this.$refs[formName].validate((valid) => { if (valid) { axios({ method: 'get', url: '/api/login', - params: this.registerFrom + params: this.loginForm }).then(function (res) { - console.log(res); - Vue.prototype.$notify({ - title: '成功', - message: ('i', {style: 'color: teal'}, res.data), - type: 'success', - offset: 0 - }); + if(res.data.code!==200){ + Vue.prototype.$notify.error({ + title: '错误', + message: res.data.msg, + offset: 0 + }); + }else{ + Vue.prototype.$notify({ + title: '成功', + message: ('i', {style: 'color: teal'}, "登录成功！"), + type: 'success', + offset: 0 + }); + _this.$store.state.isLogin='1'; + // _this.userToken = 'Bearer ' + res.data.token; + _this.userToken = res.data.token; + _this.changeLogin({ Authorization: _this.userToken }); + _this.closeLoginDialog(); + setTimeout(()=>{ + window.location.reload(); + },2000) + } + }).catch((error)=>{ Vue.prototype.$notify.error({ title: '错误', - message: error, + message: error===null?'':error, offset: 0 }); }) @@ -396,7 +426,7 @@ export default { url: '/api/register', params: this.registerFrom }).then(function (res) { - console.log(res); + // console.log(res); Vue.prototype.$notify({ title: '成功', message: ('i', {style: 'color: teal'}, res.data), @@ -426,13 +456,64 @@ export default { } }) }, + // 找回密码 + submitRePasswordForm(formName){ + let _this=this; + this.$refs[formName].validate((valid) => { + if (valid) { + if (this.repasswordForm.userPassword===this.repasswordForm.repassword){ + axios({ + method: 'post', + url: '/api/findThePassword', + params: this.repasswordForm + }).then(function (res) { + if(res.data.msg==="重置成功"){ + Vue.prototype.$notify({ + title: '成功', + message: ('i', {style: 'color: teal'}, res.data.msg), + type: 'success', + offset: 0 + }); + _this.TabsValue='1'; + }else{ + Vue.prototype.$notify({ + title: '成功', + message: ('i', {style: 'color: teal'}, res.data.msg), + type: 'success', + offset: 0 + }); + } + + }).catch((error)=>{ + Vue.prototype.$notify.error({ + title: '错误', + message: error, + offset: 0 + }); + }) + }else { + Vue.prototype.$notify.error({ + title: '错误', + message: "密码不一致", + offset: 0 + }); + } + }else { + Vue.prototype.$notify.error({ + title: '错误', + message: "请填写完整信息！", + offset: 0 + }); + } + }) + }, //重置 resetForm(formName) { this.$refs[formName].resetFields(); }, // 发送邮箱验证码 - sendEmail() { - var _this=this; + sendRegisterEmail() { + let _this=this; if (this.registerFrom.userEmail !== null) { axios({ method: 'get', @@ -476,6 +557,57 @@ export default { } }, + // 发送邮箱验证码 + sendRePasswordEmail() { + let _this=this; + if (this.repasswordForm.userEmail !== null) { + axios({ + method: 'get', + url: '/api/sendActiveCode', + params: this.repasswordForm + }).then(function (res) { + Vue.prototype.$notify({ + title: '成功', + message: ('i', {style: 'color: teal'}, res.data), + type: 'success', + offset: 0 + }); + const TIME_COUNT = 60; // 更改倒计时时间 + if (!_this.timer) { + _this.sendTime = TIME_COUNT; + _this.showTime = false; + _this.timer = setInterval(() => { + if (_this.sendTime > 0 && _this.sendTime <= TIME_COUNT) { + _this.sendTime--; + } else { + _this.showTime = true; + clearInterval(_this.timer); // 清除定时器 + _this.timer = null; + } + }, 1000); + } + }).catch((error)=>{ + Vue.prototype.$notify.error({ + title: '错误', + message: error, + offset: 0 + }); + }) + + }else { + Vue.prototype.$notify.error({ + title: '错误', + message: '请填写邮箱！', + offset: 0 + }); + } + + }, + changeImg(){ + setTimeout(()=>{ + this.codeUrl = "http://localhost:8080/verifyCode?" + new Date().getTime(); + },30000) + }, //点击图片更换验证码 resetImg() { this.codeUrl = "http://localhost:8080/verifyCode?" + new Date().getTime(); @@ -498,6 +630,58 @@ export default { .el-dialog__header { display: none; } +.login{ + font-weight: bold; + font-size: 25px; + color: var(--theme-color); +} +.login-div{ + border-radius: 50px; + width: 32px; + height: 32px; + margin-left: 20px; + display: flex; + align-items: center; + justify-content: center; +} +.login-div:hover{ + border: 2px solid var(--theme-color); + cursor: pointer; +} +.upload{ + font-size: 25px; + font-weight: bold; + color: var(--theme-color); - +} +.upload-div{ + border-radius: 50px; + width: 32px; + height: 32px; + margin-left: 20px; + display: flex; + align-items: center; + justify-content: center; +} +.upload-div:hover{ + border: 2px solid var(--theme-color); + cursor: pointer; +} +.notice{ + font-size: 25px; + font-weight: bold; + color: var(--theme-color); +} +.notice-div{ + border-radius: 50px; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; +} +.notice-div:hover{ + border: 2px solid var(--theme-color); + cursor: pointer; +} diff --git a/src/components/hotNews/HotNews.vue b/src/components/hotNews/HotNews.vue index e763399..b041243 100644 --- a/src/components/hotNews/HotNews.vue +++ b/src/components/hotNews/HotNews.vue @@ -1,36 +1,229 @@ \ No newline at end of file diff --git a/src/components/hotNews/NewsCard.vue b/src/components/hotNews/NewsCard.vue index 1a75c21..a68b255 100644 --- a/src/components/hotNews/NewsCard.vue +++ b/src/components/hotNews/NewsCard.vue @@ -1,44 +1,23 @@