Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 44838cff by fanx
Options

代码提价

1 parent 00e93d33
Inline Side-by-side
Showing 39 changed files with 968 additions and 219 deletions
src/App.vue
<template> <template>
<div id="app"> <div id="app">
<router-view/> <keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div> </div>
</template> </template>
<script>
import Touch from '@/components/Touch'
export default {
mounted() {
new Touch('#app', { filter: [] })
}
}
</script>
src/assets/css/common.less
@import "variable"; @import "variable";
* { * {
padding : 0; padding: 0;
margin : 0; margin: 0;
box-sizing : border-box; box-sizing: border-box;
touch-action : auto; touch-action: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
font-family : "苹方黑体-准-简", "PingFangSC-Regular", "PingFang SC", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft Jhenghei", sans-serif; font-family: "苹方黑体-准-简", "PingFangSC-Regular", "PingFang SC", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft Jhenghei", sans-serif;
} }
html, html,
body { body {
// height:100vh; height: 100vh;
//min-height: 100%; width: 100vw;
height : 100vh; margin: 0;
width : 100vw; padding: 0;
margin : 0;
padding : 0;
//font-weight:300;
} }
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
...@@ -56,7 +53,7 @@ body { ...@@ -56,7 +53,7 @@ body {
.product_footer { .product_footer {
//bottom:calc(env(safe-area-inset-bottom) + 10px) !important; //bottom:calc(env(safe-area-inset-bottom) + 10px) !important;
padding-bottom: calc(env(safe-area-inset-bottom) / 1.5) !important; padding-bottom: calc(env(safe-area-inset-bottom) / 1.5) !important;
padding-top : 15px !important; padding-top: 15px !important;
} }
.header { .header {
...@@ -67,15 +64,10 @@ body { ...@@ -67,15 +64,10 @@ body {
::-webkit-scrollbar { ::-webkit-scrollbar {
// 直接复制黏贴到样式页.css，完美解决 // 直接复制黏贴到样式页.css，完美解决
display : none; display: none;
/* background-color:transparent; */ /* background-color:transparent; */
} }
.pay {
height: 100vh;
width : 100vw;
}
#app { #app {
height: 100vh; height: 100vh;
} }
...@@ -95,9 +87,9 @@ html { ...@@ -95,9 +87,9 @@ html {
//iconfont start //iconfont start
.icon { .icon {
width : 1.2em; width: 1.2em;
height : 1.2em; height: 1.2em;
fill : currentColor; fill: currentColor;
overflow: hidden; overflow: hidden;
} }
...@@ -109,12 +101,12 @@ html { ...@@ -109,12 +101,12 @@ html {
.van-tabs__line { .van-tabs__line {
background-color: @theme; background-color: @theme;
bottom : 10px; bottom: 10px;
} }
.van-button--default { .van-button--default {
background-color: @headerBg; background-color: @headerBg;
color : #fff; color: #fff;
} }
.van-tab--active { .van-tab--active {
...@@ -144,18 +136,18 @@ html { ...@@ -144,18 +136,18 @@ html {
// vant Dialog 按钮背景色 和 字体颜色 // vant Dialog 按钮背景色 和 字体颜色
.van-dialog__cancel { .van-dialog__cancel {
background: #fff; background: #fff;
color : #545454; color: #545454;
} }
.van-dialog__confirm { .van-dialog__confirm {
background: #fff; background: #fff;
color : #5594E5; color: #5594E5;
} }
//vant nav //vant nav
.van-tabs__nav--line { .van-tabs__nav--line {
padding-bottom: 5px; padding-bottom: 5px;
box-sizing : border-box; box-sizing: border-box;
} }
// 清除浮动 // 清除浮动
...@@ -164,8 +156,8 @@ html { ...@@ -164,8 +156,8 @@ html {
&:before, &:before,
&:after { &:after {
display : block; display: block;
content : ""; content: "";
line-height: 0; line-height: 0;
} }
...@@ -178,27 +170,27 @@ html { ...@@ -178,27 +170,27 @@ html {
position: relative; position: relative;
&::before { &::before {
content : ""; content: "";
background-color: #999; background-color: #999;
height : 4px; height: 4px;
transform : scale(1, 0.3); transform: scale(1, 0.3);
width : 100px; width: 100px;
position : absolute; position: absolute;
top : 50%; top: 50%;
margin-top : -3px; margin-top: -3px;
left : 120px; left: 120px;
} }
&::after { &::after {
content : ""; content: "";
background-color: #999; background-color: #999;
height : 4px; height: 4px;
transform : scale(1, 0.3); transform: scale(1, 0.3);
width : 100px; width: 100px;
position : absolute; position: absolute;
top : 50%; top: 50%;
margin-top : -3px; margin-top: -3px;
right : 120px; right: 120px;
} }
} }
...@@ -229,27 +221,31 @@ input { ...@@ -229,27 +221,31 @@ input {
.nafmii-head-bg1 { .nafmii-head-bg1 {
background : url("~@/assets/icon/bg_login.png") no-repeat !important; background: url("~@/assets/icon/bg_login.png") no-repeat !important;
background-size : 100% !important; background-size: 100% !important;
background-position: center center; background-position: center center;
} }
.nafmii-head-bg1-2 { .nafmii-head-bg1-2 {
background : url("~@/assets/icon/bg_login_2.png") no-repeat !important; background: url("~@/assets/icon/bg_login_2.png") no-repeat !important;
background-size : 100% !important; background-size: 100% !important;
background-position: center center; background-position: center center;
} }
.nafmii-head-bg2 { .nafmii-head-bg2 {
background : url("~@/assets/icon/bg_mine.png") no-repeat !important; background: url("~@/assets/icon/bg_mine.png") no-repeat !important;
background-size : 100% !important; background-size: 100% !important;
background-position: center center; background-position: center center;
} }
.nafmii-head-bg3 { .nafmii-head-bg3 {
background : url("~@/assets/icon/bg_common.png") no-repeat !important; background: url("~@/assets/icon/bg_common.png") no-repeat !important;
background-size : 100% !important; background-size: 100% !important;
background-position: center center; background-position: center center;
} }
.nafmii-head-bg4 { .nafmii-head-bg4 {
background : url("~@/assets/icon/bg_member.png") no-repeat !important; background: url("~@/assets/icon/bg_member.png") no-repeat !important;
background-size : 100% !important; background-size: 100% !important;
background-position: center center; background-position: center center;
} }
\ No newline at end of file \ No newline at end of file
src/assets/css/sprite.less
.icon-sprite { display: inline-block; background-image: url(../images/sprite.png); background-size: 1676px 1292px; } .icon-sprite { display: inline-block; background-image: url(../images/sprite.png); background-size: 1676px 1292px; }
.icon-bg-common { width: 828px; height: 360px; background-position: -848px -526px; } .icon-bg-common { width: 828px; height: 360px; background-position: -848px -526px; }
.icon-bg-login-2 { width: 828px; height: 506px; background-position: 0px 0px; }
.icon-bg-login { width: 828px; height: 412px; background-position: -848px 0px; } .icon-bg-login { width: 828px; height: 412px; background-position: -848px 0px; }
.icon-bg-member { width: 828px; height: 406px; background-position: 0px -526px; } .icon-bg-member { width: 828px; height: 406px; background-position: 0px -526px; }
.icon-bg-mine { width: 828px; height: 340px; background-position: 0px -952px; } .icon-bg-mine { width: 828px; height: 340px; background-position: 0px -952px; }
.icon-email { width: 36px; height: 36px; background-position: -848px -432px; } .icon-email { width: 36px; height: 36px; background-position: -848px -432px; }
.icon-icon-arrow-right { width: 10px; height: 18px; background-position: -1280px -432px; } .icon-icon-arrow-right { width: 10px; height: 18px; background-position: -848px -488px; }
.icon-icon-classify { width: 30px; height: 30px; background-position: -1180px -432px; } .icon-icon-classify { width: 30px; height: 30px; background-position: -1572px -432px; }
.icon-icon-clock { width: 30px; height: 30px; background-position: -1230px -432px; } .icon-icon-clock { width: 30px; height: 30px; background-position: -1622px -432px; }
.icon-logo { width: 224px; height: 224px; background-position: -848px -952px; } .icon-logo { width: 224px; height: 224px; background-position: -848px -952px; }
.icon-password { width: 36px; height: 36px; background-position: -904px -432px; } .icon-password { width: 36px; height: 36px; background-position: -904px -432px; }
.icon-tel { width: 36px; height: 36px; background-position: -960px -432px; } .icon-tel { width: 36px; height: 36px; background-position: -960px -432px; }
.icon-user-question { width: 32px; height: 36px; background-position: -1128px -432px; } .icon-user-question { width: 32px; height: 36px; background-position: -1520px -432px; }
.icon-user { width: 36px; height: 36px; background-position: -1016px -432px; } .icon-user { width: 36px; height: 36px; background-position: -1016px -432px; }
.icon-verification { width: 36px; height: 36px; background-position: -1072px -432px; } .icon-verification { width: 36px; height: 36px; background-position: -1072px -432px; }
.icon-wechat { width: 80px; height: 78px; background-position: -1092px -952px; }
.icon-bg-login-2 { width: 828px; height: 506px; background-position: 0px 0px; }
\ No newline at end of file \ No newline at end of file
.icon-wechat { width: 80px; height: 78px; background-position: -1374px -952px; }
.icon-center-question { width: 36px; height: 36px; background-position: -1128px -432px; }
.icon-center-message { width: 36px; height: 36px; background-position: -1184px -432px; }
.icon-center-study { width: 36px; height: 36px; background-position: -1240px -432px; }
.icon-center-feedback { width: 36px; height: 36px; background-position: -1296px -432px; }
.icon-center-collect { width: 36px; height: 36px; background-position: -1352px -432px; }
.icon-center-setting { width: 36px; height: 36px; background-position: -1408px -432px; }
.icon-center-about { width: 36px; height: 36px; background-position: -1464px -432px; }
.icon-photo-default { width: 124px; height: 124px; background-position: -1092px -952px; }
.icon-logo-2 { width: 118px; height: 112px; background-position: -1236px -952px; }
\ No newline at end of file \ No newline at end of file
src/assets/images/sprite.png
src/assets/images/sprite.png

599 KB | W: | H:

src/assets/images/sprite.png

628 KB | W: | H:

src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Touch.js 0 → 100644
/**
* @name 下拉刷新
* @template new Touch("#app",{option}).then()
* @param {arguments[0]} String 非必填(建议填如id)，下拉动态负载，默认body
* @param {option} Object 非必填
* @param {lazy} Number {lazy:100} 下拉响应惰性值默认 100
* @param {time} Number {time:1000} 数据防抖惰性值默认 1000
* @returns then Function xxx.then(arg=>arg) //下拉刷新后回掉
* @name vue页面注入
* @template { methods: {$$onTouch }}
*/
import Vue, { callHook } from "vue";
let setT, $event = new Vue();
class Touch {
constructor(id, opt = {}) {
this.main();
this.createElement(id);
this.generators = new Set();
this.next = null;
this.status = {};
this.opt = Object.assign({
lazy: 200,//下拉取惰性
time: 1000,//数据防抖动值
filter: []
}, opt)
return this;
}
main() {
this.options = {
start: 0,
move: 0,
end: 0,
isTrue: false,//是否拖动到有效值
}
}
then(fun) {
this.generators.add(fun);
return this;
}
createElement(id) {
const doc = (document.documentElement || document.body);
this.self = id ? document.querySelector(id) : doc;
this.parent = this.self == doc ? this.self : this.self.parentNode;
this.element = document.createElement("div");
Object.assign(this.element.style, {
"textAlign": "center", "height": "0", "transform": "translateY(50%)", "position": "fixed",
"top": "0", "left": "0", "width": "100%", "zIndex": "1", "overflow": "hidden"
})
this.arrow = document.createElement("span");
Object.assign(this.arrow.style, {
display: "inline-block",
borderRadius: "50%",
border: "#c00 solid 2px",
borderTop: "none",
width: "50px",
height: "50px",
transform: "translate3d(0,0,0),rotate(0deg)",
})
this.element.appendChild(this.arrow);
let first = this.parent.children[0];
this.parent.insertBefore(this.element, first);
this.addEvent();
}
//事件绑定
addEvent() {
window.addEventListener("touchstart", this.touchstart.bind(this), false);
window.addEventListener("touchmove", this.touchmove.bind(this), false);
window.addEventListener("touchend", this.touchend.bind(this), false)
}
scrollEvent(event) { }
touchstart(event) {
this.touchend();
let { pageX, pageY } = event.targetTouches[0];
if (this.parent.scrollTop <= 0) {
Object.assign(this.options, {
start: pageY,
touchs: true
})
}
}
touchmove(event) {
let { pageX, pageY } = event.targetTouches[0];
let path = location.hash.replace("#", "");
let check = this.opt.filter.filter(item => {
if (item.length > path.length) {
return item.includes(path)
} else {
return path.includes(item)
}
}).length;
if (!this.options.touchs || check) {
this.options.isTrue = false;
return
}
this.options.move = pageY;
let height = pageY - this.options.start;
if (height < 0) {
this.options.isTrue = false;
this.touchend();
return
}
if (height > this.opt.lazy) {
let _height = height - this.opt.lazy;
this.options.isTrue = true;
this.setTransform(_height);
}
//指针归位
this.next = this.generators.values();
}
touchend(event) {
this.setTransform(0); //位置复位
if (setT) { clearTimeout(setT) }
setT = setTimeout(() => {
if (
event && //用户事件
this.options.isTrue //有效拖动
) {
this.runNext(); //执行回掉
}
}, this.opt.time);
//复位
Object.assign(this.options, {
start: 0,
move: 0,
end: 0,
touchs: false
})
}
runNext(item = this.next, ...res) {
this.options.isTrue = false;
let next = item.next();
if (!next.done) {
let fun = next.value(res); //执行
if (/Promise/ig.test(Object.prototype.toString.call(fun))) {
fun.then((params) => {
this.runNext(item, params);
});//处理promise
} else {
this.runNext(item, fun);//处理普通事件
}
} else {
$event.$emit("$$onTouch", res);//发送事件给组件
//指针归位
this.next = this.generators.values();
}
}
setTransform(height) {
Object.assign(this.self.style, {
transform: height > 0 ? `translateY(${height}px)` : "none"
})
Object.assign(this.element.style, {
height: height >= 100 ? "100px" : "0.1px"
// height:height+"px"
})
Object.assign(this.arrow.style, {
transform: `rotate(${height}deg)`
})
}
}
const listeners = {}
$event.$on("$$onTouch", (arg) => {
for (const key in listeners) {
listeners[key](arg)
}
})
export function install(vue, options) {
vue.mixin({
mounted() {
this.refreshInit && (listeners[this._uid] = this.refreshInit)
},
activated() {
this.refreshInit && (listeners[this._uid] = this.refreshInit)
},
destroyed() {
delete listeners[this._uid]
},
deactivated() {
delete listeners[this._uid]
},
})
}
Vue.use(install)
export default Touch;
src/i18n/lang/button/index.js
const buttonEn = { const buttonEn = {
ok: 'Ok', // 确定 button: {
cancel: 'Cancel', // 取消 ok: 'Ok',
reset: 'Reset', // 重置 cancel: 'Cancel',
login: 'Login', // 登录 reset: 'Reset',
login: 'Login',
logout: 'Logout',
clickWrong: 'Cancel',
okUnbinding: 'Ok',
clear: 'Clear'
}
} }
const buttonZn = { const buttonZn = {
button: {
ok: '确定', ok: '确定',
cancel: '取消', cancel: '取消',
reset: '重置', reset: '重置',
login: '登录', login: '登录',
logout: '退出登录',
clickWrong: '点错了',
okUnbinding: '确定解除',
clear: '清空'
}
} }
export default { export default {
buttonEn, buttonEn,
......
src/i18n/lang/feedback/index.js 0 → 100644
const feedbackEn = {
feedback: {
question: 'Question And FeedBack',
images: 'Image（Not Required，Provide a screenshot of the problem）',
tip: 'Tip: upload images support PNG / jpeg, the size of images is less than 1m, and the number of images is up to four',
}
}
const feedbackZh = {
feedback: {
question: '问题和意见',
images: '图片（选填，提供问题截图）',
tip: '提示：上传图片支持png/jpeg，图片大小1M以内，图片数量最多4张',
}
}
export default {
feedbackEn,
feedbackZh
};
\ No newline at end of file \ No newline at end of file
src/i18n/lang/index.js
...@@ -6,6 +6,7 @@ import toast from './toast/index' ...@@ -6,6 +6,7 @@ import toast from './toast/index'
// 单独页面模块 // 单独页面模块
import title from './title/index' import title from './title/index'
import user from './user/index' import user from './user/index'
import feedback from './feedback/index'
const messages = { const messages = {
en: { en: {
...@@ -16,6 +17,7 @@ const messages = { ...@@ -16,6 +17,7 @@ const messages = {
...title.titleEn, ...title.titleEn,
...user.userEn, ...user.userEn,
...feedback.feedbackEn,
}, },
zh: { zh: {
...@@ -26,6 +28,7 @@ const messages = { ...@@ -26,6 +28,7 @@ const messages = {
...title.titleZn, ...title.titleZn,
...user.userZh, ...user.userZh,
...feedback.feedbackZh,
} }
} }
......
src/i18n/lang/toast/index.js
const toastEn = { const toastEn = {
toast: {
userName: 'please input username', userName: 'please input username',
phone: 'pleace input correct phone format', phone: 'pleace input correct phone format',
email: 'pleace input correct email format', email: 'pleace input correct email format',
tip: 'Tip',
tipMessage: 'After you unbind wechat, you will not be able to use wechat to log in quickly. Are you sure you want to unbind it',
verification: 'please input verification code',
unbindingSuccess: 'Finish!',
resetSuccess: 'Reset Successful'
}
} }
const toastZn = { const toastZn = {
toast: {
userName: '请输入用户名', userName: '请输入用户名',
phone: '请输入正确的手机格式', phone: '请输入正确的手机格式',
email: '请输入正确的邮箱格式', email: '请输入正确的邮箱格式',
tip: '友情提示',
tipMessage: '解除微信绑定后，将无法使用微信快速登录，你确定解除吗？',
verification: '请输入验证码',
unbindingSuccess: '解绑成功！',
resetSuccess: '重置成功！'
}
} }
export default { export default {
toastEn, toastEn,
......
src/i18n/lang/user/index.js
...@@ -17,6 +17,15 @@ const userEn = { ...@@ -17,6 +17,15 @@ const userEn = {
birthday: 'BirthDay', birthday: 'BirthDay',
email: 'Email', email: 'Email',
company: 'Company' company: 'Company'
},
center: {
message: 'Message',
collect: 'Collection',
study: 'Study',
question: 'Question',
feedBack: 'FeedBack',
about: 'About',
setting: 'Setting',
} }
} }
...@@ -39,6 +48,15 @@ const userZh = { ...@@ -39,6 +48,15 @@ const userZh = {
birthday: '出生日', birthday: '出生日',
email: '邮箱', email: '邮箱',
company: '单位' company: '单位'
},
center: {
message: '我的消息',
collect: '我的收藏',
study: '我的学习',
question: '常见问题',
feedBack: '意见反馈',
about: '关于协会',
setting: '设置',
} }
} }
export default { export default {
......
src/router/modules/user.js
...@@ -3,7 +3,8 @@ const userRouter = [ ...@@ -3,7 +3,8 @@ const userRouter = [
path: '/user/login/phone', path: '/user/login/phone',
name: 'LoginPhone', name: 'LoginPhone',
meta: { meta: {
title: '登录' title: '登录',
isLogin: false
}, },
component: () => import(/* webpackChunkName: "loginPhone" */ '@/views/user/loginPhone.vue') // 手机号登录 component: () => import(/* webpackChunkName: "loginPhone" */ '@/views/user/loginPhone.vue') // 手机号登录
}, },
...@@ -11,7 +12,8 @@ const userRouter = [ ...@@ -11,7 +12,8 @@ const userRouter = [
path: '/user/login/username', path: '/user/login/username',
name: 'LoginUserName', name: 'LoginUserName',
meta: { meta: {
title: '登录' title: '登录',
isLogin: false
}, },
component: () => import(/* webpackChunkName: "login" */ '@/views/user/loginUserName.vue') // 账号密码登录 component: () => import(/* webpackChunkName: "login" */ '@/views/user/loginUserName.vue') // 账号密码登录
}, },
...@@ -19,7 +21,8 @@ const userRouter = [ ...@@ -19,7 +21,8 @@ const userRouter = [
path: '/user/register', path: '/user/register',
name: 'Register', name: 'Register',
meta: { meta: {
title: '注册' title: '注册',
isLogin: false
}, },
component: () => import(/* webpackChunkName: "register" */ '@/views/user/register.vue') // 注册 component: () => import(/* webpackChunkName: "register" */ '@/views/user/register.vue') // 注册
}, },
...@@ -27,23 +30,44 @@ const userRouter = [ ...@@ -27,23 +30,44 @@ const userRouter = [
path: '/user/findPassword', path: '/user/findPassword',
name: 'FindPassword', name: 'FindPassword',
meta: { meta: {
title: '' title: '',
isLogin: false
}, },
component: () => import(/* webpackChunkName: "findPassword" */ '@/views/user/findPassword.vue') // 手机号找回密码 邮箱找回密码 component: () => import(/* webpackChunkName: "findPassword" */ '@/views/user/findPassword.vue') // 手机号找回密码 邮箱找回密码
}, },
{ {
path: '/user/setPassword',
name: 'SetPassword',
meta: {
title: '设置密码',
isLogin: false
},
component: () => import(/* webpackChunkName: "center" */ '@/views/user/setPassword.vue') // 设置密码
},
{
path: '/user/resetPassword', path: '/user/resetPassword',
name: 'ResetPassword', name: 'ResetPassword',
meta: { meta: {
title: '重置密码' title: '重置密码',
isLogin: false
}, },
component: () => import(/* webpackChunkName: "center" */ '@/views/user/resetPassword.vue') // 重置密码 component: () => import(/* webpackChunkName: "center" */ '@/views/user/resetPassword.vue') // 重置密码
}, },
{ {
path: '/user/sendVerification',
name: 'SendVerification',
meta: {
title: '',
isLogin: true
},
component: () => import(/* webpackChunkName: "center" */ '@/views/user/setting/sendVerification.vue') // 重置密码或者解除绑定 输入验证码页面
},
{
path: '/user/center', path: '/user/center',
name: 'Center', name: 'Center',
meta: { meta: {
title: '个人中心' title: '个人中心',
isLogin: false
}, },
component: () => import(/* webpackChunkName: "center" */ '@/views/user/center.vue') // 个人中心 component: () => import(/* webpackChunkName: "center" */ '@/views/user/center.vue') // 个人中心
}, },
...@@ -51,7 +75,8 @@ const userRouter = [ ...@@ -51,7 +75,8 @@ const userRouter = [
path: '/user/message', path: '/user/message',
name: 'Message', name: 'Message',
meta: { meta: {
title: '我的消息' title: '我的消息',
isLogin: true
}, },
component: () => import(/* webpackChunkName: "message" */ '@/views/user/message/list.vue') // 消息 component: () => import(/* webpackChunkName: "message" */ '@/views/user/message/list.vue') // 消息
}, },
...@@ -59,15 +84,17 @@ const userRouter = [ ...@@ -59,15 +84,17 @@ const userRouter = [
path: '/user/collect', path: '/user/collect',
name: 'Collect', name: 'Collect',
meta: { meta: {
title: '我的收藏' title: '我的收藏',
isLogin: true
}, },
component: () => import(/* webpackChunkName: "collect" */ '@/views/user/collect.vue') // 我的收藏 component: () => import(/* webpackChunkName: "collect" */ '@/views/user/collect/index.vue') // 我的收藏
}, },
{ {
path: '/user/study', path: '/user/study',
name: 'Study', name: 'Study',
meta: { meta: {
title: '我的学习' title: '我的学习',
isLogin: true
}, },
component: () => import(/* webpackChunkName: "study" */ '@/views/user/study.vue') // 我到学习 component: () => import(/* webpackChunkName: "study" */ '@/views/user/study.vue') // 我到学习
}, },
...@@ -75,7 +102,8 @@ const userRouter = [ ...@@ -75,7 +102,8 @@ const userRouter = [
path: '/user/question', path: '/user/question',
name: 'Question', name: 'Question',
meta: { meta: {
title: '常见问题' title: '常见问题',
isLogin: false
}, },
component: () => import(/* webpackChunkName: "question" */ '@/views/user/question/list.vue') // 常见问题列表 component: () => import(/* webpackChunkName: "question" */ '@/views/user/question/list.vue') // 常见问题列表
}, },
...@@ -83,7 +111,8 @@ const userRouter = [ ...@@ -83,7 +111,8 @@ const userRouter = [
path: '/user/questionDetail', path: '/user/questionDetail',
name: 'QuestionDetail', name: 'QuestionDetail',
meta: { meta: {
title: '常见问题' title: '常见问题',
isLogin: false
}, },
component: () => import(/* webpackChunkName: "questionDetail" */ '@/views/user/question/detail.vue') // 常见问题详情 component: () => import(/* webpackChunkName: "questionDetail" */ '@/views/user/question/detail.vue') // 常见问题详情
}, },
...@@ -91,15 +120,17 @@ const userRouter = [ ...@@ -91,15 +120,17 @@ const userRouter = [
path: '/user/feedback', path: '/user/feedback',
name: 'FeedBack', name: 'FeedBack',
meta: { meta: {
title: '意见反馈' title: '意见反馈',
isLogin: true
}, },
component: () => import(/* webpackChunkName: "feedback" */ '@/views/user/feedback.vue') // 意见反馈 component: () => import(/* webpackChunkName: "feedback" */ '@/views/user/feedback/index.vue') // 意见反馈
}, },
{ {
path: '/user/about', path: '/user/about',
name: 'About', name: 'About',
meta: { meta: {
title: '关于协会' title: '关于协会',
isLogin: false
}, },
component: () => import(/* webpackChunkName: "about" */ '@/views/user/about.vue') // 关于协会 component: () => import(/* webpackChunkName: "about" */ '@/views/user/about.vue') // 关于协会
}, },
...@@ -107,7 +138,8 @@ const userRouter = [ ...@@ -107,7 +138,8 @@ const userRouter = [
path: '/user/setting', path: '/user/setting',
name: 'Setting', name: 'Setting',
meta: { meta: {
title: '设置' title: '设置',
isLogin: true
}, },
component: () => import(/* webpackChunkName: "setting" */ '@/views/user/setting/index.vue') // 设置 component: () => import(/* webpackChunkName: "setting" */ '@/views/user/setting/index.vue') // 设置
}, },
...@@ -115,7 +147,8 @@ const userRouter = [ ...@@ -115,7 +147,8 @@ const userRouter = [
path: '/user/privacy', path: '/user/privacy',
name: 'Privacy', name: 'Privacy',
meta: { meta: {
title: '隐私协议' title: '隐私协议',
isLogin: false
}, },
component: () => import(/* webpackChunkName: "privacy" */ '@/views/user/privacy.vue') // 隐私协议 component: () => import(/* webpackChunkName: "privacy" */ '@/views/user/privacy.vue') // 隐私协议
}, },
...@@ -123,7 +156,8 @@ const userRouter = [ ...@@ -123,7 +156,8 @@ const userRouter = [
path: '/user/service', path: '/user/service',
name: 'Service', name: 'Service',
meta: { meta: {
title: '服务协议' title: '服务协议',
isLogin: false
}, },
component: () => import(/* webpackChunkName: "service" */ '@/views/user/service.vue') // 服务协议 component: () => import(/* webpackChunkName: "service" */ '@/views/user/service.vue') // 服务协议
}, },
...@@ -131,7 +165,8 @@ const userRouter = [ ...@@ -131,7 +165,8 @@ const userRouter = [
path: '/user/person', path: '/user/person',
name: 'Person', name: 'Person',
meta: { meta: {
title: '个人信息' title: '个人信息',
isLogin: true
}, },
component: () => import(/* webpackChunkName: "person" */ '@/views/user/person/index.vue') // 个人信息 component: () => import(/* webpackChunkName: "person" */ '@/views/user/person/index.vue') // 个人信息
}, },
...@@ -139,7 +174,8 @@ const userRouter = [ ...@@ -139,7 +174,8 @@ const userRouter = [
path: '/user/commonEdit', path: '/user/commonEdit',
name: 'CommonEdit', name: 'CommonEdit',
meta: { meta: {
title: '' title: '',
isLogin: true
}, },
component: () => import(/* webpackChunkName: "commonEdit" */ '@/views/user/person/commonEdit.vue') // 个人信息 component: () => import(/* webpackChunkName: "commonEdit" */ '@/views/user/person/commonEdit.vue') // 个人信息
}, },
......
src/store/modules/user.js
export default { export default {
namespaced: true, namespaced: true,
state: { state: {
userId: '1' userId: ''
}, },
mutations: { mutations: {
MStoreUserId(state, data) { MStoreUserId(state, data) {
...@@ -15,7 +15,8 @@ export default { ...@@ -15,7 +15,8 @@ export default {
}, },
getters: { getters: {
// 是否登录 // 是否登录
GIsLogin(state) { GIsLogin: (state) => {
// console.log('state', state.userId)
return state.userId ? true : false return state.userId ? true : false
} }
} }
......
src/utils/vant-ui.js
...@@ -21,7 +21,8 @@ import { ...@@ -21,7 +21,8 @@ import {
Picker, Picker,
Popup, Popup,
Swipe, Swipe,
SwipeItem SwipeItem,
Uploader
} from 'vant' } from 'vant'
import NafmHeader from '@/components/NafmHeader' import NafmHeader from '@/components/NafmHeader'
...@@ -31,7 +32,7 @@ import FooterBottom from '@/components/FooterBottom' ...@@ -31,7 +32,7 @@ import FooterBottom from '@/components/FooterBottom'
[NafmHeader, FooterBottom].forEach(item => Vue.component(item.name, item)); [NafmHeader, FooterBottom].forEach(item => Vue.component(item.name, item));
// 默认vant组件 // 默认vant组件
[Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Form, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button, Step, Steps, Checkbox, Picker, Popup, Swipe, SwipeItem].forEach(item => Vue.use(item)) [Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Form, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button, Step, Steps, Checkbox, Picker, Popup, Swipe, SwipeItem, Uploader].forEach(item => Vue.use(item))
// 先预制，后期做统一调整 // 先预制，后期做统一调整
Object.assign(window, { Object.assign(window, {
......
src/views/user/about.vue
<template> <template>
<div> <div class="about_container">
<NafmHeader/> <NafmHeader navClass="nafmii-head-bg3" :title="$t('title.privacyPolicy')" />
关于协会 <div class="about_content">
<img :src="logoIcon" alt="">
<h3>中国银行间市场交易商协会</h3>
<div class="version">Version 2.1</div>
<p>
中国银行间市场交易商协会是由市场参与者自愿组成的，包括银行间债券市场、同业拆借市场、外汇市场、票据市场和黄金市场在内的银行间市场的自律组织，会址设在北京。协会英文名称为National Association of Financial Market Institutional
Investors,缩写为NAFMII。协会经国务院同意、民政部批准于2007年9月3日成立，为全国性的非营利性社会团体法人，其业务主管部门为中国人民银行。协会会员包括单位会员和个人会员，银行间债券市场、拆借市场、外汇市场、票据市场和黄金市场的参与者、中介机构及相关领域的从业人员和专家学者均可自愿申请成为协会会员。协会单位会员将涵盖政策性银行、商业银行、信用社、保险公司、证券公司、信托公司、投资基金、财务公司、信用.评级公司、大中型工商企业等各类金融机构和非金融机构。
</p>
</div>
</div> </div>
</template> </template>
<script>
export default {
name: 'About',
data() {
return {
logoIcon: require('@/assets/icon/logo_2.png')
}
}
}
</script>
<style lang="less" scoped>
.about_container {
background: #fff;
height: 100vh;
}
.about_content {
display: flex;
flex-direction: column;
align-items: center;
img {
width: 59px;
height: 56px;
margin-top: 30px;
}
h3 {
color: #333;
font-size: 16px;
margin-top: 15px;
}
.version {
color: #666;
font-size: 14px;
margin-top: 3px;
}
p {
width: 384px;
text-align: justify;
line-height: 27px;
color: #666;
font-size: 15px;
margin-top: 20px;
}
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/user/center.vue
<template> <template>
<div class="user_center"> <div class="user_center ">
<NafmHeader navClass="nafmii-head-bg2" :leftArrow="false">
<div class="header"> <div class="header">
<div class="header_left"></div> <div class="header_left">
<img :src="headerIcon">
</div>
<div class="header_right" @click="jumpPersonPage"> <div class="header_right" @click="jumpPersonPage">
<div class="right_txt"> <div class="right_txt" v-if="GIsLogin">
<div class="nick">凝视你的目光</div> <div class="nick">凝视你的目光</div>
<div class="phone">183****8924</div> <div class="phone">183****8924</div>
</div> </div>
<div class="right_txt" v-else>
<div class="nick">立即登录</div>
<div class="phone">登录后可了解更多信息</div>
</div>
<div class="iconfont iconright"></div> <div class="iconfont iconright"></div>
</div> </div>
</div> </div>
</NafmHeader>
<div class="center_menu_list"> <div class="center_menu_list">
<van-cell title="我的消息" center is-link to="/user/message" :icon="imgList.user" value-class="right_content"> <van-cell :title="$t('center.message')" center is-link to="/user/message" :icon="icon.message" value-class="right_content">
<template #default> <template #default>
<div class="dot" v-if="GIsLogin"></div> <div class="dot" v-if="GIsLogin"></div>
</template> </template>
</van-cell> </van-cell>
<van-cell title="我的收藏" center is-link to="/user/collect" :icon="imgList.user" /> <van-cell :title="$t('center.collect')" center is-link to="/user/collect" :icon="icon.collect" />
<van-cell title="我的学习" center is-link @click="jumpStudyPage" :icon="imgList.user" value-class="right_content" /> <van-cell :title="$t('center.study')" center is-link @click="jumpStudyPage" :icon="icon.study" value-class="right_content" />
<van-cell title="常见问题" center is-link to="/user/question" :icon="imgList.user" /> <van-cell :title="$t('center.question')" center is-link to="/user/question" :icon="icon.question" />
<van-cell title="意见反馈" center is-link to="/user/feedback" :icon="imgList.user" /> <van-cell :title="$t('center.feedBack')" center is-link to="/user/feedback" :icon="icon.feedback" />
<van-cell title="关于协会" center is-link to="/user/about" :icon="imgList.user" value-class="right_content"> <van-cell :title="$t('center.about')" center is-link to="/user/about" :icon="icon.about" value-class="right_content">
<template #default> <template #default>
<div v-if="GIsLogin">版本2.1</div> <div v-if="GIsLogin">版本2.1</div>
</template> </template>
</van-cell> </van-cell>
<van-cell title="设置" center is-link to="/user/setting" :icon="imgList.user" /> <van-cell :title="$t('center.setting')" center is-link to="/user/setting" :icon="icon.setting" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
name: 'Center', name: 'Center',
data() { data() {
return { return {
imgList: { headerIcon: require('@/assets/icon/photo_default.png'),
user: require('@/assets/icon/user_question.png') icon: {
}, message: require('@/assets/icon/center_message.png'),
menuList: [ collect: require('@/assets/icon/center_collect.png'),
{ study: require('@/assets/icon/center_study.png'),
icon: require('@/assets/icon/user_question.png'), question: require('@/assets/icon/center_question.png'),
title: '我的收藏', feedback: require('@/assets/icon/center_feedback.png'),
url: '/user/collect' about: require('@/assets/icon/center_about.png'),
}, setting: require('@/assets/icon/center_setting.png'),
{
icon: require('@/assets/icon/user_question.png'),
title: '我的学习',
url: '/user/message'
}, },
{
icon: require('@/assets/icon/user_question.png'),
title: '我的浏览',
url: '/message'
},
{
icon: require('@/assets/icon/user_question.png'),
title: '常见问题',
url: '/collect'
},
{
icon: require('@/assets/icon/user_question.png'),
title: '关于协会',
url: '/user/about'
},
{
icon: require('@/assets/icon/user_question.png'),
title: '设置',
url: '/user/setting'
},
]
} }
}, },
computed: {
...mapGetters('user', ['GIsLogin'])
},
methods: { methods: {
// 跳转到我到学习页面 // 跳转到我到学习页面
jumpStudyPage() { jumpStudyPage() {
}, },
// 跳转到 个人设置中心 // 跳转到 个人设置中心
jumpPersonPage(){ jumpPersonPage() {
this.$router.push({ this.$router.push({
path:'/user/person' path: '/user/person'
}) })
} }
}, },
computed: {
...mapGetters('user', ['GIsLogin'])
}
} }
</script> </script>
<style lang="less"> <style lang="less">
...@@ -96,18 +79,25 @@ export default { ...@@ -96,18 +79,25 @@ export default {
background-color: #fafafa; background-color: #fafafa;
height: 100vh; height: 100vh;
} }
.nav_content_container {
position: relative;
z-index: 999;
}
.header { .header {
background: @theme; padding: 35px 0;
padding: 60px 25px; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.header_left { .header_left {
background: red; width: 62px;
width: 120px; height: 62pxpx;
height: 120px;
border-radius: 50%; border-radius: 50%;
margin-right: 30px; margin-right: 12px;
img {
width: 100%;
}
} }
.header_right { .header_right {
display: flex; display: flex;
...@@ -115,8 +105,12 @@ export default { ...@@ -115,8 +105,12 @@ export default {
align-items: center; align-items: center;
flex: 1; flex: 1;
color: @colorfff; color: @colorfff;
.nick {
font-size: 19px;
}
.phone { .phone {
margin-top: 10px; margin-top: 3px;
font-size: 14px;
} }
} }
} }
...@@ -128,8 +122,8 @@ export default { ...@@ -128,8 +122,8 @@ export default {
justify-content: flex-end; justify-content: flex-end;
} }
.dot { .dot {
width: 15px; width: 8px;
height: 15px; height: 8px;
background: #ff4038; background: #ff4038;
border-radius: 50%; border-radius: 50%;
} }
...@@ -137,29 +131,4 @@ export default { ...@@ -137,29 +131,4 @@ export default {
.van-cell:not(:last-child)::after { .van-cell:not(:last-child)::after {
right: 16px; right: 16px;
} }
// .center_menu_list {
// padding: 0 25px;
// .li {
// display: flex;
// justify-content: space-between;
// align-items: center;
// border-bottom: 1px solid #ccc;
// height: 95px;
// .menu_left {
// color: #333;
// display: flex;
// justify-content: space-between;
// align-items: center;
// img {
// margin-right: 20px;
// width: 35px;
// height: 35px;
// }
// }
// .menu_right {
// color: #ccc;
// }
// }
// }
</style> </style>
\ No newline at end of file \ No newline at end of file
src/views/user/collect.vue deleted 100644 → 0
<template>
<div>
<NafmHeader/>
</div>
</template>
\ No newline at end of file \ No newline at end of file
src/views/user/collect/index.vue 0 → 100644
<template>
<div>
<NafmHeader navClass="nafmii-head-bg3" :title="$t('title.collect')">
<template #right>
<div @click="handleClear">{{$t('button.clear')}}</div>
</template>
</NafmHeader>
</div>
</template>
<script>
export default {
name: 'Collect',
data() {
return {
}
},
methods: {
// 清空收藏
handleClear() {
Dialog.confirm({
title: this.$t('toast.tip'),
message: this.$t('toast.tipMessage'),
cancelButtonText: this.$t('button.clickWrong'),
cancelButtonColor: '#206CB3',
confirmButtonText: this.$t('button.okUnbinding'),
confirmButtonColor: '#999999'
})
.then(() => {
// todo
})
.catch(() => {
});
}
}
}
</script>
\ No newline at end of file \ No newline at end of file
src/views/user/feedback.vue deleted 100644 → 0
<template>
<div>
<NafmHeader/>
建议反馈
</div>
</template>
\ No newline at end of file \ No newline at end of file
src/views/user/feedback/index.vue 0 → 100644
<template>
<div class="feedback_container">
<NafmHeader navClass="nafmii-head-bg3" :title="$t('title.feedBack')" />
<div class="feedback_content">
<h3>{{$t('feedback.question')}}</h3>
<van-field v-model="content" rows="4" autosize label="" clearable type="textarea" maxlength="200" placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助" show-word-limit />
<h3>{{$t('feedback.images')}}</h3>
<div class="upload_content">
<van-uploader v-model="fileList" multiple :max-count="4" accept="image/*" :max-size="1024 * 1024" @oversize="onOversize" />
</div>
<div class="tip">{{$t('feedback.tip')}}</div>
<div class="login_btn" :class="{loginActive:isBothValue}" @click="handleSubmit">提交</div>
</div>
</div>
</template>
<script>
export default {
name: 'FeedBack',
data() {
return {
content: '',
fileList: [
{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
],
}
},
computed: {
isBothValue() {
if (this.content) {
return true
} else {
return false
}
},
},
methods: {
// 超出1M提示
onOversize(file) {
console.log(file);
Toast('文件大小不能超过 1M');
},
// 提交
handleSubmit() {
}
}
}
</script>
<style lang="less" scoped>
.feedback_content {
display: flex;
flex-direction: column;
margin: 0px auto;
width: 384px;
h3 {
display: flex;
height: 50px;
align-items: center;
font-size: 16px;
color: #333;
}
/deep/ .van-field {
box-shadow: 0px 0px 5px #ddd;
border-radius: 10px;
}
.upload_content {
box-shadow: 0px 0px 5px #ddd;
border-radius: 10px;
padding: 10px 10px 5px;
}
.tip {
color: #999;
font-size: 12px;
margin-top: 10px;
}
/deep/ .van-uploader__preview-image {
width: 82px;
height: 82px;
}
/deep/ .van-uploader__upload {
width: 82px;
height: 82px;
}
.login_btn {
width: 340px;
margin: 80px auto 0;
border-radius: 5px;
text-align: center;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 16px;
background-image: linear-gradient(to right, #25a3df, #106abc);
opacity: 0.3;
}
.loginActive {
opacity: 1;
}
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/user/findPassword.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="login_container"> <div class="login_container">
<img src="@/assets/icon/bg_login_2.png" /> <img src="@/assets/icon/bg_login_2.png" />
<div class="login_box"> <div class="login_box">
<NafmHeader navClass="nafmii-head-bg1" :title="title" bgColor="transparent" /> <NafmHeader navClass="nafmii-head-bg1" :title="title" />
</div> </div>
<div class="login_content"> <div class="login_content">
<div class="login_form_box"> <div class="login_form_box">
...@@ -99,7 +99,10 @@ export default { ...@@ -99,7 +99,10 @@ export default {
} }
this.$router.push({ this.$router.push({
path: '/user/resetPassword' path: '/user/resetPassword',
query: {
source: 'login'
}
}) })
} }
} }
......
src/views/user/loginPhone.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<img src="@/assets/icon/bg_login_2.png" /> <img src="@/assets/icon/bg_login_2.png" />
<div class="login_box"> <div class="login_box">
<NafmHeader navClass="nafmii-head-bg1" bgColor="transparent" /> <NafmHeader navClass="nafmii-head-bg1" />
</div> </div>
<div class="login_content"> <div class="login_content">
......
src/views/user/loginUserName.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="login_container"> <div class="login_container">
<img src="@/assets/icon/bg_login_2.png" /> <img src="@/assets/icon/bg_login_2.png" />
<div class="login_box"> <div class="login_box">
<NafmHeader navClass="nafmii-head-bg1" bgColor="transparent" /> <NafmHeader navClass="nafmii-head-bg1" />
</div> </div>
<div class="login_content"> <div class="login_content">
<LoginTabs :type="2" /> <LoginTabs :type="2" />
......
src/views/user/message/list.vue
<template> <template>
<div class="message_list"> <div class="message_list">
消息列表 <NafmHeader navClass="nafmii-head-bg3" />
</div> </div>
</template> </template>
\ No newline at end of file \ No newline at end of file
src/views/user/privacy.vue
<template> <template>
<div class="privacy_container"> <div class="privacy_container">
<NafmHeader /> <NafmHeader navClass="nafmii-head-bg3" :title="$t('title.privacyPolicy')" />
</div> </div>
</template> </template>
\ No newline at end of file \ No newline at end of file
src/views/user/register.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="register_container"> <div class="register_container">
<img src="@/assets/icon/bg_login_2.png" /> <img src="@/assets/icon/bg_login_2.png" />
<div class="login_box"> <div class="login_box">
<NafmHeader navClass="nafmii-head-bg1" :title="title" bgColor="transparent" /> <NafmHeader navClass="nafmii-head-bg1" />
</div> </div>
</div> </div>
</template> </template>
...@@ -13,6 +13,9 @@ export default { ...@@ -13,6 +13,9 @@ export default {
data() { data() {
return {} return {}
}, },
mounted(){
// this.
},
methods: {} methods: {}
} }
</script> </script>
\ No newline at end of file \ No newline at end of file
src/views/user/resetPassword.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="login_container"> <div class="login_container">
<img src="@/assets/icon/bg_login_2.png" /> <img src="@/assets/icon/bg_login_2.png" />
<div class="login_box"> <div class="login_box">
<NafmHeader navClass="nafmii-head-bg1" :title="title" bgColor="transparent" /> <NafmHeader navClass="nafmii-head-bg1" />
</div> </div>
<div class="login_content"> <div class="login_content">
<div class="login_form_box"> <div class="login_form_box">
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
</div> </div>
</template> </template>
<script> <script>
import { removeLocalStorage } from '@/utils/LocalStorage'
export default { export default {
name: 'Login', name: 'Login',
components: {}, components: {},
...@@ -51,6 +52,30 @@ export default { ...@@ -51,6 +52,30 @@ export default {
return return
} }
/**
* 1.当source:phomeEmail
* 如果是通过 手机号码和邮箱找回 来进行重置密码的话 那么清除用户信息 跳转到登录页面
* 2.当source:login
* 如果是在我的--设置--重置密码 来进行重置密码的话 那么清除用户信息 跳转到我到为登录状态
*/
const { source } = this.$route.query;
// 清空用户信息
removeLocalStorage('user')
Toast(this.$t('toast.resetSuccess'))
if (source == 'mine') {
this.$router.push({
path: '/user/center'
})
} else {
this.$router.push({
path: '/user/login/username'
})
}
// todo 请求接口 // todo 请求接口
console.log(1) console.log(1)
}, },
......
src/views/user/service.vue
<template> <template>
<div class="service_container"> <div class="service_container">
<NafmHeader /> <NafmHeader navClass="nafmii-head-bg3" :title="$t('title.serviceAgreement')" />
</div> </div>
</template> </template>
\ No newline at end of file \ No newline at end of file
src/views/user/setPassword.vue 0 → 100644
<template>
<div class="login_container">
<img src="@/assets/icon/bg_login_2.png" />
<div class="login_box">
<NafmHeader navClass="nafmii-head-bg1" />
</div>
<div class="login_content">
<div class="login_form_box">
<div class="login_form">
<van-field v-model.trim="password" clearable type="password" maxlength="16" :left-icon="passwordIcon" placeholder="请输入6-16位密码" />
<van-field v-model.trim="aginPassword" clearable type="password" maxlength="16" :left-icon="passwordIcon" placeholder="再次输入6-16位密码" />
<div class="login_btn" :class="{loginActive:isBothValue}" @click="handleReset">重 置</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { removeLocalStorage } from '@/utils/LocalStorage'
export default {
name: 'Login',
components: {},
data() {
return {
password: "",
aginPassword: "",
passwordIcon: require('@/assets/icon/password.png'),
}
},
computed: {
isBothValue() {
if (this.password && this.aginPassword) {
return true
} else {
return false
}
},
},
methods: {
// 登录操作
handleReset() {
if (!this.password) {
Toast('请输入密码')
return
}
if (!this.aginPassword) {
Toast('请再次输入密码')
return
}
if (this.password != this.aginPassword) {
Toast('两次输入的密码不一致')
return
}
/**
* 1.当source:phomeEmail
* 如果是通过 手机号码和邮箱找回 来进行重置密码的话 那么清除用户信息 跳转到登录页面
* 2.当source:login
* 如果是在我的--设置--重置密码 来进行重置密码的话 那么清除用户信息 跳转到我到为登录状态
*/
const { source } = this.$route.query;
// 清空用户信息
removeLocalStorage('user')
Toast(this.$t('toast.resetSuccess'))
if (source == 'mine') {
this.$router.push({
path: '/user/center'
})
} else {
this.$router.push({
path: '/user/login/username'
})
}
// todo 请求接口
console.log(1)
},
}
}
</script>
<style lang="less" scoped>
@import "./less/login.less";
</style>
\ No newline at end of file \ No newline at end of file
src/views/user/setting/index.vue
<template> <template>
<div class="setting_container"> <div class="setting_container">
<NafmHeader navClass="nafmii-head-bg3" /> <NafmHeader navClass="nafmii-head-bg3" :title="$t('title.setting')" />
<div class="setting_list"> <div class="setting_list">
<!-- <!--
<van-cell :title="$t('setting.newMsgTip')" center value-class="right_content"> <van-cell :title="$t('setting.newMsgTip')" center value-class="right_content">
...@@ -14,12 +14,12 @@ ...@@ -14,12 +14,12 @@
{{$t("lang")}} {{$t("lang")}}
</template> </template>
</van-cell> </van-cell>
<van-cell :title="$t('setting.bindWechat')" center is-link @click="unbundling" value-class="right_content"> <van-cell :title="$t('setting.bindWechat')" center is-link @click="jumpMessagePage('wechat')" value-class="right_content">
<template #default> <template #default>
含笑一过 含笑一过
</template> </template>
</van-cell> </van-cell>
<van-cell :title="$t('setting.resetPassword')" center is-link @click="jumpResetPage" value-class="right_content" /> <van-cell :title="$t('setting.resetPassword')" center is-link @click="jumpMessagePage('reset')" value-class="right_content" />
<!-- <!--
<van-cell title="指纹ID解锁" center value-class="right_content"> <van-cell title="指纹ID解锁" center value-class="right_content">
<template #default> <template #default>
...@@ -38,13 +38,13 @@ ...@@ -38,13 +38,13 @@
<van-cell :title="$t('setting.serviceAgreement')" center is-link @click="jumpServicePage" value-class="right_content" /> <van-cell :title="$t('setting.serviceAgreement')" center is-link @click="jumpServicePage" value-class="right_content" />
</div> </div>
<van-button type="primary" plain color="#a4a4a4" class="logout_btn">退出登录</van-button> <van-button type="primary" plain color="#a4a4a4" class="logout_btn" @click="handleLogout">{{$t('button.logout')}}</van-button>
<van-action-sheet v-model="showZhEn" :actions="actions" cancel-text="取消" close-on-click-action @cancel="controllZhEn(false)" @select="changeLang" /> <van-action-sheet v-model="showZhEn" :actions="actions" :cancel-text="$t('button.cancel')" close-on-click-action @cancel="controllZhEn(false)" @select="changeLang" />
</div> </div>
</template> </template>
<script> <script>
import { setLocalStorage } from '@/utils/LocalStorage' import { setLocalStorage, getLocalStorage, removeLocalStorage } from '@/utils/LocalStorage'
export default { export default {
name: 'Setting', name: 'Setting',
data() { data() {
...@@ -61,7 +61,7 @@ export default { ...@@ -61,7 +61,7 @@ export default {
computed: { computed: {
// 中英文切换 切换 tab // 中英文切换 切换 tab
actions() { actions() {
return [{ name: this.$t('setting.chinese'), key: 'zh' }, { name: this.$t('setting.english'), key: 'en' }] // 中英文切换选项 return [{ name: '中文', key: 'zh' }, { name: 'English', key: 'en' }] // 中英文切换选项
} }
}, },
methods: { methods: {
...@@ -75,37 +75,53 @@ export default { ...@@ -75,37 +75,53 @@ export default {
}, },
// 切换语言 // 切换语言
changeLang(value) { changeLang(value) {
console.log('val', value.key)
setLocalStorage('lang', value.key) setLocalStorage('lang', value.key)
this.$i18n.locale = value.key this.$i18n.locale = value.key
}, },
// 解绑微信/重置密码
jumpMessagePage(type) {
const phone = getLocalStorage('phone') || '18311098924'; //todo
if (type == 'wechat') {
// 解绑微信 // 解绑微信
unbundling() {
Dialog.confirm({ Dialog.confirm({
title: '友情提示', title: this.$t('toast.tip'),
message: '解除微信绑定后，将无法使用微信快速登录，你确定解除吗？', message: this.$t('toast.tipMessage'),
cancelButtonText: '点错了', cancelButtonText: this.$t('button.clickWrong'),
// cancelButtonColor: '', cancelButtonColor: '#206CB3',
confirmButtonText: '确定解除', confirmButtonText: this.$t('button.okUnbinding'),
// confirmButtonColor:'' confirmButtonColor: '#999999'
}) })
.then(() => { .then(() => {
// on confirm 调取后端接口 this.$router.push({
Toast('解绑成功'); name: 'SendVerification',
query: {
phone,
type
}
})
}) })
.catch(() => { .catch(() => {
// on cancel
}); });
}, } else {
// 跳转到 重制密码页面 // 重置密码
jumpResetPage() { this.$router.push({
name: 'SendVerification',
query: {
phone,
type
}
})
}
}, },
// 更改 指纹ID状态 // 更改 指纹ID状态
changeFingerprintStatus() { changeFingerprintStatus() {
this.fingerprintChecked = !this.fingerprintChecked this.fingerprintChecked = !this.fingerprintChecked
}, },
// 触发下啦刷新
refreshInit() {
console.log('__', this.fingerprintChecked);
},
// 更改 面容ID状态 // 更改 面容ID状态
changeFaceIdStatus() { changeFaceIdStatus() {
this.faceIdChecked = !this.faceIdChecked this.faceIdChecked = !this.faceIdChecked
...@@ -122,6 +138,14 @@ export default { ...@@ -122,6 +138,14 @@ export default {
path: '/user/service' path: '/user/service'
}) })
}, },
// 退出登录
handleLogout() {
// 清空用户信息
removeLocalStorage('user')
this.$router.push({
path: '/user/center'
})
}
} }
} }
</script> </script>
......
src/views/user/setting/sendVerification.vue 0 → 100644
<template>
<div class="verification_container">
<NafmHeader navClass="nafmii-head-bg3" />
<div class="verification">
<h2>输入短信验证码</h2>
<p>已经向您的手机<span>{{shortPhone}}</span>发送验证码</p>
<van-field v-model.trim="password" clearable label="" type="tel" maxlength="6" placeholder="请输入验证码">
<template #button>
<SendVerificationCode :phone="phone" :data="objParams" />
</template>
</van-field>
<div class="login_btn" :class="{loginActive:isBothValue}" @click="handleFinish">{{type=='wechat'?'完 成':'下一步'}}</div>
</div>
</div>
</template>
<script>
import SendVerificationCode from '@/components/SendVerificationCode'
export default {
name: 'SendVerification',
components: {
SendVerificationCode
},
data() {
return {
phone: '',
shortPhone: '',
password: '',
objParams: {
type: 'phone'
},
type: ''
}
},
computed: {
isBothValue() {
if (this.password) {
return true
} else {
return false
}
}
},
mounted() {
const { phone, type } = this.$route.query;
this.type = type
this.phone = phone
if (this.phone) {
const phoneArr = this.phone.split('');
this.shortPhone = phoneArr.splice(7, 11).join("")
}
},
methods: {
handleFinish() {
const { type } = this.$route.query
if (!this.password) {
Toast(this.$t('toast.verification'))
return
}
if (type == 'wechat') {
// todo wechat api
Toast(this.$t('toast.unbindingSuccess'))
this.$router.push({
path: '/user/setting'
})
} else {
// 重置密码
this.$router.push({
path: '/user/resetPassword',
query: {
source: 'mine'
}
})
}
}
}
}
</script>
<style lang="less" scoped>
.verification {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 384px;
margin: 0 auto;
h2 {
font-size: 24px;
color: #333;
margin-top: 16px;
}
p {
font-size: 12px;
color: #333;
margin-top: 8px;
margin-bottom: 50px;
span {
color: #106abc;
}
}
}
.login_btn {
width: 100%;
border-radius: 5px;
text-align: center;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 16px;
margin-top: 40px;
background-image: linear-gradient(to right, #25a3df, #106abc);
opacity: 0.3;
}
.loginActive {
opacity: 1;
}
/deep/ .van-cell:not(:last-child)::after {
border-bottom: 1px solid #efefef;
}
/deep/ .van-cell {
padding-right: 0 !important;
padding-left: 0 !important;
border-bottom: 1px solid #ebedf0;
}
/deep/ .van-cell:not(:last-child)::after {
border: none;
}
</style>
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!