Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
88a5d542 by simon
Options

Merge branch 'master' of 120.27.44.69:dev/pingan-life-index-pro

2 parents e4b1fe00 0125693b
Expand all
Inline Side-by-side
Showing 25 changed files with 924 additions and 71 deletions
1 NODE_ENV = 'sandbox' 1 NODE_ENV = 'sandbox'
2 VUE_APP_TITLE = 'sandbox' 2 VUE_APP_TITLE = 'sandbox'
3 REQUEST_DOMAIN= 'https://ow.go.qudone.com'
4 RSA_PUBLIC_KEY = 'B5FE03847F02046C47292AF0FF2DE88977241483DD40C123046EB39CBE4C48167B120096CFF12CD16559322884A3C56FA92B07B89AB51FC8C91A75127622151DDD730DFF1F993D5A290CEAC0BBA7FC88285D8994ACBAFF50101EDE9A0925AD5DFFAFE96D53C370E9C5B37DF2F871F81C4D7CA6B7EC37FF459C07975AD9A74A95'
5 RSA_KEY_INDEX = '10001'
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
18 </noscript> 18 </noscript>
19 <div id="app"></div> 19 <div id="app"></div>
20 <!-- built files will be auto injected --> 20 <!-- built files will be auto injected -->
21 <script src="./js/unionrsa.js"></script>
21 </body> 22 </body>
22 23
23 </html> 24 </html>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div id="app"> 2 <div id="app">
3 <v-header></v-header> 3 <v-header></v-header>
4 <main ref="container" class="main-container"> 4 <main ref="container" class="main-container">
5 <router-view/> 5 <router-view />
6 </main> 6 </main>
7 <v-footer></v-footer> 7 <v-footer></v-footer>
8 </div> 8 </div>
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
11 11
12 <script> 12 <script>
13 import { mapGetters, mapActions, mapState } from "vuex"; 13 import { mapGetters, mapActions, mapState } from "vuex";
14 import { getCookie } from "@utils/utils.js";
14 import VHeader from "@components/home/header/header.vue"; 15 import VHeader from "@components/home/header/header.vue";
15 import VFooter from "@components/home/footer/footer.vue"; 16 import VFooter from "@components/home/footer/footer.vue";
16 var UA = require("ua-device"); 17 var UA = require("ua-device");
...@@ -36,6 +37,15 @@ export default { ...@@ -36,6 +37,15 @@ export default {
36 let deviceType = output.device.type; 37 let deviceType = output.device.type;
37 let isMobile = deviceType == "mobile"; 38 let isMobile = deviceType == "mobile";
38 this.$store.commit("IS_MOBILE", isMobile); 39 this.$store.commit("IS_MOBILE", isMobile);
40
41 //
42 let userInfoStr = decodeURIComponent(getCookie("_user_profile"));
43 if (userInfoStr) {
44 try {
45 let userInfo = JSON.parse(decodeURIComponent(userInfoStr));
46 this.$store.commit("SET_USER_INFO", userInfo);
47 } catch (e) {}
48 }
39 } 49 }
40 }; 50 };
41 </script> 51 </script>
...@@ -44,7 +54,7 @@ export default { ...@@ -44,7 +54,7 @@ export default {
44 @import "@/styles/_support"; 54 @import "@/styles/_support";
45 55
46 html { 56 html {
47 font-family: "Microsoft YaHei","Arial"; 57 font-family: "Microsoft YaHei", "Arial";
48 font-size: 12px; 58 font-size: 12px;
49 word-spacing: 1px; 59 word-spacing: 1px;
50 word-break: break-word; 60 word-break: break-word;
......
1 module.exports = { 1 module.exports = {
2 testListGet: '/xxx/xxx/list' 2 logout : "/pingan_hklife_webapi/logout",
3 // 是否显示图形验证码接口
4 stdIsShowImageVcode : "/pingan_hklife_webapi/auth/stdIsShowImageVcode",
5 // 刷新图形验证码接口
6 stdRefreshVcode : "/pingan_hklife_webapi/auth/stdRefreshVcode",
7 // OTP发送接口
8 stdSendOTP : "/pingan_hklife_webapi/auth/stdSendOTP",
9 // OTP验证与验重接口
10 stdValidateOTPandRepeat : "/pingan_hklife_webapi/auth/stdValidateOTPandRepeat",
11 // 注册手机号验重接口
12 gsRegCheck : "/pingan_hklife_webapi/auth/gsRegCheck",
13 // 账户整合登录接口
14 gsLogin : "/pingan_hklife_webapi/auth/gsLogin",
15 // 注册接口
16 stdRegister : "/pingan_hklife_webapi/auth/stdRegister",
17 // 找回密码定位用户信息
18 gsLocateUserV2 : "/pingan_hklife_webapi/auth/gsLocateUserV2",
19 // 账户整合忘记密码重置用户密码
20 gsResetPwd : "/pingan_hklife_webapi/auth/gsResetPwd",
21 // 账户整合修改密码接口
22 gsModifyPwd : "/pingan_hklife_webapi/auth/gsModifyPwd",
23 // 短信验证码登录
24 otpLogin : "/pingan_hklife_webapi/otpLogin",
25
3 } 26 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -11,10 +11,7 @@ function Toast(msg) { ...@@ -11,10 +11,7 @@ function Toast(msg) {
11 // axios.defaults.baseURL = "" 11 // axios.defaults.baseURL = ""
12 12
13 // 服务器地址 13 // 服务器地址
14 let base = "https://ow.go.qudone.com"; 14 let base = process.env.REQUEST_DOMAIN || "http://localhost:9101";
15 if (location.href.indexOf("//k.wxpai.cn") > 0) {
16 base = "https://api.k.wxpai.cn/bizproxy"
17 }
18 // let base = COM.baseUrl; 15 // let base = COM.baseUrl;
19 16
20 // 请求拦截器 17 // 请求拦截器
......
...@@ -15,21 +15,25 @@ module.exports = { ...@@ -15,21 +15,25 @@ module.exports = {
15 list: [{ 15 list: [{
16 name: "register", 16 name: "register",
17 path: "/register", 17 path: "/register",
18 type : "noAuth",
18 value: "" 19 value: ""
19 }, { 20 }, {
20 name: "login", 21 name: "login",
21 path: "/login", 22 path: "/login",
23 type : "noAuth",
22 value: "" 24 value: ""
23 }, 25 },
24 { 26 {
25 name: "modify password", 27 name: "modify password",
26 path: "", 28 path: "",
29 type : "auth",
27 value: "" 30 value: ""
28 }, 31 },
29 { 32 {
30 name: "logout", 33 name: "logout",
31 path: "", 34 path: "",
32 value: "" 35 type : "auth",
36 value: "logout"
33 }, 37 },
34 ] 38 ]
35 }, 39 },
...@@ -133,6 +137,18 @@ module.exports = { ...@@ -133,6 +137,18 @@ module.exports = {
133 verifyCodeGet: "獲取驗證碼", 137 verifyCodeGet: "獲取驗證碼",
134 }, 138 },
135 register: { 139 register: {
140 mobileOptions: [{
141 type: "hk",
142 name: "香港手機號",
143 placeHolder: "請輸入8位手機號碼",
144 areaCode: "+852"
145 }, {
146 type: "zh",
147 name: "大陸手機號",
148 placeHolder: "請輸入11位手機號碼",
149 areaCode: "+86"
150 }],
151 coutTips : "{second}秒後重新獲取",
136 title: "歡迎註冊一賬通", 152 title: "歡迎註冊一賬通",
137 title2: "請設置新的密碼", 153 title2: "請設置新的密碼",
138 mobilePlaceholder: "请输入8位手机号码", 154 mobilePlaceholder: "请输入8位手机号码",
......
...@@ -15,23 +15,26 @@ module.exports = { ...@@ -15,23 +15,26 @@ module.exports = {
15 list: [{ 15 list: [{
16 name: "註冊", 16 name: "註冊",
17 path: "/register", 17 path: "/register",
18 type: "noAuth",
18 value: "" 19 value: ""
19 }, { 20 }, {
20 name: "登入", 21 name: "登入",
21 path: "/login", 22 path: "/login",
23 type: "noAuth",
22 value: "" 24 value: ""
23 }, 25 },
24 { 26 {
25 name: "修改密碼", 27 name: "修改密碼",
26 path: "", 28 path: "",
29 type: "auth",
27 value: "" 30 value: ""
28 }, 31 },
29 { 32 {
30 name: "登出", 33 name: "登出",
31 path: "", 34 path: "",
32 value: "" 35 type: "auth",
33 }, 36 value: "logout"
34 ] 37 }]
35 }, 38 },
36 navList: [{ 39 navList: [{
37 name: "產品介紹", 40 name: "產品介紹",
...@@ -133,6 +136,18 @@ module.exports = { ...@@ -133,6 +136,18 @@ module.exports = {
133 verifyCodeGet: "獲取驗證碼", 136 verifyCodeGet: "獲取驗證碼",
134 }, 137 },
135 register: { 138 register: {
139 mobileOptions: [{
140 type: "hk",
141 name: "香港手機號",
142 placeHolder: "請輸入8位手機號碼",
143 areaCode: "+852"
144 }, {
145 type: "zh",
146 name: "大陸手機號",
147 placeHolder: "請輸入11位手機號碼",
148 areaCode: "+86"
149 }],
150 coutTips : "{second}秒後重新獲取",
136 title: "歡迎註冊一賬通", 151 title: "歡迎註冊一賬通",
137 title2: "請設置新的密碼", 152 title2: "請設置新的密碼",
138 mobilePlaceholder: "請輸入8位手機號碼", 153 mobilePlaceholder: "請輸入8位手機號碼",
......
...@@ -15,23 +15,26 @@ module.exports = { ...@@ -15,23 +15,26 @@ module.exports = {
15 list: [{ 15 list: [{
16 name: "注册", 16 name: "注册",
17 path: "/register", 17 path: "/register",
18 type: "noAuth",
18 value: "" 19 value: ""
19 }, { 20 }, {
20 name: "登陆", 21 name: "登陆",
21 path: "/login", 22 path: "/login",
23 type: "noAuth",
22 value: "" 24 value: ""
23 }, 25 },
24 { 26 {
25 name: "修改密码", 27 name: "修改密码",
26 path: "", 28 path: "",
29 type: "auth",
27 value: "" 30 value: ""
28 }, 31 },
29 { 32 {
30 name: "登出", 33 name: "登出",
31 path: "", 34 path: "",
32 value: "" 35 type: "auth",
33 }, 36 value: "logout"
34 ] 37 }]
35 }, 38 },
36 navList: [{ 39 navList: [{
37 name: "产品介绍", 40 name: "产品介绍",
...@@ -133,6 +136,18 @@ module.exports = { ...@@ -133,6 +136,18 @@ module.exports = {
133 verifyCodeGet: "获取验证码", 136 verifyCodeGet: "获取验证码",
134 }, 137 },
135 register: { 138 register: {
139 mobileOptions: [{
140 type: "hk",
141 name: "香港手机号",
142 placeHolder: "请输入8位手机号码",
143 areaCode: "+852"
144 }, {
145 type: "zh",
146 name: "大陆手机号",
147 placeHolder: "请输入11位手机号码",
148 areaCode: "+86"
149 }],
150 coutTips : "{second}秒后重新获取",
136 title: "欢迎注册一账通", 151 title: "欢迎注册一账通",
137 title2: "请设置新的密码", 152 title2: "请设置新的密码",
138 mobilePlaceholder: "请输入8位手机号码", 153 mobilePlaceholder: "请输入8位手机号码",
......
...@@ -2,6 +2,9 @@ import { ...@@ -2,6 +2,9 @@ import {
2 mapState 2 mapState
3 } from 'vuex' 3 } from 'vuex'
4 4
5 import api from '@/api/api'
6 import { httpPost } from '@/api/fetch-api.js'
7
5 export default { 8 export default {
6 name: "DropDownList", 9 name: "DropDownList",
7 data() { 10 data() {
...@@ -13,25 +16,25 @@ export default { ...@@ -13,25 +16,25 @@ export default {
13 props: { 16 props: {
14 type: { 17 type: {
15 type: String, 18 type: String,
16 default () { 19 default() {
17 return "nav"; 20 return "nav";
18 } 21 }
19 }, 22 },
20 dataObj: { 23 dataObj: {
21 type: Object, 24 type: Object,
22 default () { 25 default() {
23 return {}; 26 return {};
24 } 27 }
25 }, 28 },
26 dataList: { 29 dataList: {
27 type: Array, 30 type: Array,
28 default () { 31 default() {
29 return []; 32 return [];
30 } 33 }
31 }, 34 },
32 labelProperty: { 35 labelProperty: {
33 type: String, 36 type: String,
34 default () { 37 default() {
35 return "name"; 38 return "name";
36 } 39 }
37 } 40 }
...@@ -81,16 +84,32 @@ export default { ...@@ -81,16 +84,32 @@ export default {
81 this.sTitle = curData.name; 84 this.sTitle = curData.name;
82 window.location.reload(); 85 window.location.reload();
83 } else { 86 } else {
87 // console.log("curData.value == =", curData.value)
88 if (curData.value == "logout") {
89 // this.$store.commit("SET_USER_INFO", null);
90 this._loginHandler();
91 } else {
84 // 不是的话，跳转页面 92 // 不是的话，跳转页面
85 this.$router.push({ 93 this.$router.push({
86 path: curData.path 94 path: curData.path
87 }) 95 })
88 } 96 }
97 }
89 // console.log("name:", this.dataList[index].name); 98 // console.log("name:", this.dataList[index].name);
90 // this.$emit("change", { 99 // this.$emit("change", {
91 // index: index, 100 // index: index,
92 // value: this.dataList[index] 101 // value: this.dataList[index]
93 // }); 102 // });
103 },
104 _loginHandler() {
105 httpPost({ url: api.logout }).then(() => {
106 this.$store.commit("SET_USER_INFO", null);
107 this._showLogoutTip();
108 });
109 },
110 _showLogoutTip() {
111 // 登出后的提示
112 alert("登出成功");
94 } 113 }
95 }, 114 },
96 computed: { 115 computed: {
......
...@@ -57,6 +57,13 @@ ...@@ -57,6 +57,13 @@
57 justify-content: center; 57 justify-content: center;
58 color: #ffffff; 58 color: #ffffff;
59 59
60 span {
61 max-width: 4.25rem ;/* 51/12 */
62 overflow: hidden;
63 white-space: nowrap;
64 text-overflow: ellipsis;
65 }
66
60 .icon-img { 67 .icon-img {
61 margin: 0 .5rem; 68 margin: 0 .5rem;
62 } 69 }
......
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
4 <!-- 登陆下拉样式 --> 4 <!-- 登陆下拉样式 -->
5 <template v-if="type=='login'"> 5 <template v-if="type=='login'">
6 <div class="user"> 6 <div class="user">
7 <img class="icon-img" src="@/assets/images/home/icon-user.png"> {{dataObj.name}} 7 <img class="icon-img" src="@/assets/images/home/icon-user.png">
8 <span>{{dataObj.name}}</span>
8 </div> 9 </div>
9 </template> 10 </template>
10 <!-- 其他下拉样式 --> 11 <!-- 其他下拉样式 -->
......
...@@ -46,7 +46,8 @@ export default { ...@@ -46,7 +46,8 @@ export default {
46 }, 46 },
47 computed: { 47 computed: {
48 ...mapState({ 48 ...mapState({
49 isSmallScreen: state => state.isSmallScreen 49 isSmallScreen: state => state.isSmallScreen,
50 userInfo: state => state.userInfo
50 }) 51 })
51 }, 52 },
52 methods: { 53 methods: {
...@@ -65,10 +66,33 @@ export default { ...@@ -65,10 +66,33 @@ export default {
65 }, 66 },
66 initData() { 67 initData() {
67 let i18n = this.$i18n.messages[this.$i18n.locale] || {}; 68 let i18n = this.$i18n.messages[this.$i18n.locale] || {};
68 this.loginData = i18n.nav.loginData; 69 // this.loginData = i18n.nav.loginData;
70 this._buildLoginMenu();
69 this.navList = i18n.nav.navList; 71 this.navList = i18n.nav.navList;
70 let curLang = getObjByListKeyValue(this.$i18n.locale, "value", this.langData.list) 72 let curLang = getObjByListKeyValue(this.$i18n.locale, "value", this.langData.list)
71 this.langData.name = curLang.name; 73 this.langData.name = curLang.name;
74 },
75 _buildLoginMenu() {
76 // 构建登录页
77 let i18n = this.$i18n.messages[this.$i18n.locale] || {};
78 let menuData = JSON.parse(JSON.stringify(i18n.nav.loginData));
79 let list = [];
80 if (this.userInfo && this.userInfo.name) {
81 menuData.name = this.userInfo.name;
82 menuData.list.forEach(element => {
83 if (element.type == "auth") {
84 list.push(element);
85 }
86 });
87 } else {
88 menuData.list.forEach(element => {
89 if (element.type == "noAuth") {
90 list.push(element);
91 }
92 });
93 }
94 menuData.list = list;
95 this.$set(this, 'loginData', menuData);
72 } 96 }
73 }, 97 },
74 mounted() { 98 mounted() {
...@@ -78,6 +102,11 @@ export default { ...@@ -78,6 +102,11 @@ export default {
78 self.checkIsSmallScreen(); 102 self.checkIsSmallScreen();
79 } 103 }
80 }, 104 },
105 watch: {
106 userInfo(val) {
107 this._buildLoginMenu();
108 }
109 },
81 created() { 110 created() {
82 this.initData(); 111 this.initData();
83 }, 112 },
......
...@@ -7,7 +7,7 @@ import store from './store/index'; ...@@ -7,7 +7,7 @@ import store from './store/index';
7 import VueAwesomeSwiper from 'vue-awesome-swiper' 7 import VueAwesomeSwiper from 'vue-awesome-swiper'
8 // require styles 8 // require styles
9 import 'swiper/dist/css/swiper.css' 9 import 'swiper/dist/css/swiper.css'
10 Vue.use(VueAwesomeSwiper, /* { default global options } */ ) 10 Vue.use(VueAwesomeSwiper)
11 11
12 12
13 import Mock from './mock' 13 import Mock from './mock'
......
1
2 import { mapGetters, mapActions, mapState } from "vuex";
3
1 import api from '@/api/api' 4 import api from '@/api/api'
2 import { 5 import {
3 httpGet, 6 httpGet,
4 httpPost 7 httpPost
5 } from '@/api/fetch-api.js' 8 } from '@/api/fetch-api.js'
6 9
10 let PK = 'B5FE03847F02046C47292AF0FF2DE88977241483DD40C123046EB39CBE4C48167B120096CFF12CD16559322884A3C56FA92B07B89AB51FC8C91A75127622151DDD730DFF1F993D5A290CEAC0BBA7FC88285D8994ACBAFF50101EDE9A0925AD5DFFAFE96D53C370E9C5B37DF2F871F81C4D7CA6B7EC37FF459C07975AD9A74A95';
11 let E = '10001';
12
7 export default { 13 export default {
8 data() { 14 data() {
9 return { 15 return {
10 key: 'value', 16 key: 'value',
11 type: 1, // 1:帐密登陆 2:OTP登陆 17 type: 1, // 1:帐密登陆 2:OTP登陆,
18 values: {
19 // 返回的token，串连整个流程，后台安全校验使用
20 token: "",
21 deviceId: "",
22 vcodeuuid: "",
23 token: "",
24 deviceId: "",
25 imageBase64: "",
26 password: "",
27 passwordRepeat: ""
28 },
29 times: {
30 interval: 0, // 索引
31 remain: 0, // 剩余时间
32 tip: "" // 显示的文字
33 },
34 loginForm: {
35 // userId: "18334783910",
36 // password: "qweqwe123"
37 userId: "",
38 password: "",
39
40 imageValue: "",
41 mobileNo: "",
42 otp: ""
43 },
44 loginCheck: {
45 showImageCode: false,
46 agreeProtocol: false
47 },
48 PK: process.env.RSA_PUBLIC_KEY || PK,
49 E: process.env.RSA_KEY_INDEX || E,
12 } 50 }
13 }, 51 },
14 components: {}, 52 components: {},
15 computed: { 53 computed: {
54 ...mapState({
55 userInfo: state => state.userInfo
56 }),
16 locale() { 57 locale() {
17 return this.$i18n.locale || 'tc'; 58 return this.$i18n.locale || 'tc';
18 }, 59 },
...@@ -43,8 +84,254 @@ export default { ...@@ -43,8 +84,254 @@ export default {
43 onLoginTypeHandler(val) { 84 onLoginTypeHandler(val) {
44 this.type = val; 85 this.type = val;
45 }, 86 },
46 initData() {} 87 initData() { },
88 handlerIsShowImageVcode() {
89 return new Promise((resolve, reject) => {
90 httpPost({
91 url: api.stdIsShowImageVcode,
92 data: {
93 deviceId: this.values.deviceId,
94 userId: this.loginForm.userId
95 }
96 }).then(response => {
97 // 判断是否显示图形验证码
98 if (this._handlerIsShowImageVcodeResponse(response)) {
99 resolve(response);
100 }
101 })
102 });
103 },
104 _handlerIsShowImageVcodeResponse(response) {
105 if (response.returnCode == "0" && response.data.isShowVcode == "N") {
106 return true;
107 }
108 this.values.token = response.data.token;
109 return false;
110 },
111 handlerRefreshVcode() {
112 // 刷新图形二维码
113 },
114 handlerLogin() {
115 this.refreshDeviceId();
116 if (!this.loginCheck.agreeProtocol) {
117 this._showAgreeProtocalTips();
118 return;
119 }
120 if (this.type == 1) {
121 this._passwordLogin();
122 } else {
123 this._otpLogin();
124 }
125 },
126 _passwordLogin() {
127 // 刷新图形二维码
128 this.handlerIsShowImageVcode().then(() => {
129 httpPost({
130 url: api.gsLogin,
131 data: {
132 deviceId: this.values.deviceId,
133 loginName: this.loginForm.userId,
134 loginPwd: this._passwordEncrypt(this.loginForm.password)
135 }
136 }).then(response => {
137 this._handlerLoginResponse(response);
138 })
139 });
140 },
141 // 处理登录结果
142 _handlerLoginResponse(response) {
143 // let res = response.content;
144 if (response.returnCode == 0 || response.resultCode == "0") {
145 this.$store.commit("SET_USER_INFO", response.data);
146 this._redirectTo();
147 } else {
148 let msg = response.returnMsg;
149 this._showLoginErrorMessage(msg);
150 }
151 },
152 _showAgreeProtocalTips() {
153 alert("请同意《平安一账通会员服务协议》");
154 },
155 _showLoginErrorMessage(message) {
156 alert(message);
157 },
158 _redirectTo() {
159 let path = this.$route.query.callback || "/index";
160 this.$router.push({
161 path: path
162 });
163 },
164 _otpLogin() {
165 this._checkOptParams().then(() => {
166 let data = {
167 mobileNo: this.loginForm.mobileNo,
168 token: this.values.token,
169 otp: this.loginForm.otp,
170 deviceId: this.refreshDeviceId()
171 };
172 httpPost({
173 url: api.otpLogin,
174 data: data
175 }).then(response => {
176 this._handlerLoginResponse(response);
177 });
178 });
179 },
180 _checkOptParams() {
181 return new Promise((resolve, reject) => {
182 this._checkMobileLegal().then(() => {
183 if (!this.loginForm.otp) {
184 this._showOtpEmptyTips();
185 return;
186 }
187 if (!this.values.token) {
188 this._showGetOptTips();
189 return;
190 }
191 resolve();
192 });
193 })
194 },
195 _showGetOptTips() {
196 alert('请先获取短信验证码');
197 },
198 _showImageValueTip() {
199 alert("请输入图片验证码")
200 },
201 _showOtpEmptyTips() {
202 alert('请输入短信验证码');
203 },
204 handlerStdSendOTP() {
205 // 发送短信验证码
206 this._checkMobileLegal().then(() => {
207 if (this.times.remain > 0) {
208 return;
209 }
210 if (this.values.vcodeuuid && !this.loginForm.imageValue) {
211 this._showImageValueTip();
212 return;
213 }
214 this._handlerIsShowImageVcode().then(() => {
215 this._startStdSendOTP();
216 this._startTimeClick();
217 });
218 });
219 },
220 handlerRefreshImageValue() {
221 httpPost({
222 url: api.stdRefreshVcode,
223 data: {
224 vcodeuuid: this.values.vcodeuuid
225 }
226 }).then(response => {
227 this.values.imageBase64 = response.data.image;
228 })
229 },
230 _checkMobileLegal() {
231 // 检测手机号是否正确
232 return new Promise((resolve, reject) => {
233 let mobile = this.loginForm.mobileNo;
234 if (mobile.length != 8 && mobile.length != 11) {
235 this._showMobileNoIllegalTip()
236 return;
237 }
238 resolve(true);
239 });
240 },
241 _handlerIsShowImageVcode() {
242 return new Promise((resolve, reject) => {
243 // 如果这个值不为空，标识出现了图片验证码，不需要重新询问是否需要图像验证码了
244 if (this.values.vcodeuuid) {
245 resolve();
246 return;
247 }
248 httpPost({
249 url: api.stdIsShowImageVcode,
250 data: {
251 deviceId: this.values.deviceId,
252 userId: this.loginForm.mobileNo
253 }
254 }).then(response => {
255 // 判断是否显示图形验证码
256 if (response.returnCode == "0") {
257 this.values.token = response.data.token;
258 if (response.data.isShowVcode == "N") {
259 // if (!this.values.vcodeuuid) {
260 // this.loginCheck.showImageCode = true;
261 // this.values.vcodeuuid = "123456";
262 // return;
263 // }
264 this.values.vcodeuuid = null;
265 resolve(response);
266 } else {
267 // image 值：
268 this.loginCheck.showImageCode = true;
269 this.values.vcodeuuid = response.data.vcodeuuid;
270 this.values.imageBase64 = response.data.image;
271 }
272 }
273 return false;
274 })
275 });
276 },
277 _showMobileNoIllegalTip() {
278 alert("手机号不正确");
279 },
280 _startStdSendOTP() {
281 // 正式发送OTP信号
282 let data = {
283 mobileNo: this.loginForm.mobileNo,
284 token: this.values.token,
285 signFactor: new Date().getTime(),
286 scene: "otpLogin",
287 deviceId: this.refreshDeviceId()
288 }
289 if (this.values.vcodeuuid) {
290 data["vcodeuuid"] = this.values.vcodeuuid;
291 data["imageValue"] = this.loginForm.imageValue;
292 }
293 httpPost({ url: api.stdSendOTP, data: data });
294 },
295 _startTimeClick() {
296 this.times.remain = 120;
297 let _this = this;
298 let i18n = this.$i18n.messages[this.$i18n.locale] || {};
299 let msg = i18n.register.coutTips;
300 _this.times.tip = msg.replace("{second}", _this.times.remain);
301 this.times.interval = setInterval(function () {
302 if (_this.times.remain <= 0) {
303 clearInterval(_this.times.interval);
304 _this.times.interval = 0;
305 _this.times.remain = 0;
306 return;
307 }
308 _this.times.remain--;
309 _this.times.tip = msg.replace("{second}", _this.times.remain);
310 _this.$set(_this, 'times', _this.times);
311 }, 1000);
312 },
313 refreshDeviceId() {
314 if (!this.values.deviceId) {
315 this.values.deviceId = (Math.random() + "").substring(2)
316 }
317 return this.values.deviceId
318 },
319 _passwordEncrypt(rawPwd) {
320 let rsa = new RSAKey();
321 rsa.setPublic(this.PK, this.E);
322 let res = rsa.encrypt(rawPwd);
323 if (res == null) return rawPwd;
324 return res;
325 }
326 },
327 watch: {
328 type() {
329 this.loginCheck.showImageCode = false;
330 }
331 },
332 mounted() {
333 // console.log("PK === ", this.PK)
334 // console.log("E === ", this.E)
47 }, 335 },
48 mounted() {}, 336 created() { }
49 created() {}
50 } 337 }
......
...@@ -124,6 +124,15 @@ ...@@ -124,6 +124,15 @@
124 justify-content: space-between; 124 justify-content: space-between;
125 flex-wrap: wrap; 125 flex-wrap: wrap;
126 126
127 .vcode {
128 background-color: transparent !important;
129 padding: 0 !important;
130 overflow: hidden;
131 img {
132 width: 100%;
133 height: 100%;
134 }
135 }
127 136
128 &-item { 137 &-item {
129 position: relative; 138 position: relative;
...@@ -160,6 +169,8 @@ ...@@ -160,6 +169,8 @@
160 border-radius: 3.5rem; 169 border-radius: 3.5rem;
161 padding: 0 1.75rem; 170 padding: 0 1.75rem;
162 flex: 1; 171 flex: 1;
172 font-size: 1.166667rem; /* 14/12 */
173 letter-spacing: .1rem;/* 1.2/12 */
163 } 174 }
164 175
165 // 长文本 176 // 长文本
...@@ -187,6 +198,7 @@ ...@@ -187,6 +198,7 @@
187 color: #4c4948; 198 color: #4c4948;
188 } 199 }
189 200
201
190 // 框内按钮 202 // 框内按钮
191 .ipt2 { 203 .ipt2 {
192 display: flex; 204 display: flex;
...@@ -202,13 +214,12 @@ ...@@ -202,13 +214,12 @@
202 color: #f05a23; 214 color: #f05a23;
203 text-decoration: underline; 215 text-decoration: underline;
204 } 216 }
205 }
206
207
208
209 217
218 .veri-btn-default {
219 color: #aaaaaa;
220 }
221 }
210 } 222 }
211
212 } 223 }
213 } 224 }
214 225
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
24 <img src="@/assets/images/login/icon-login-user.png"> {{$t('login.account')}} 24 <img src="@/assets/images/login/icon-login-user.png"> {{$t('login.account')}}
25 </div> 25 </div>
26 <div class="ipt-wrap"> 26 <div class="ipt-wrap">
27 <input :placeholder="$t('login.accountPlaceholder')" class="ipt" type="text"> 27 <input v-model="loginForm.userId" :placeholder="$t('login.accountPlaceholder')" class="ipt" type="text">
28 </div> 28 </div>
29 </div> 29 </div>
30 <div class="pure-u-1 form-item"> 30 <div class="pure-u-1 form-item">
...@@ -32,21 +32,25 @@ ...@@ -32,21 +32,25 @@
32 <img src="@/assets/images/login/icon-login-password.png"> {{$t('login.password')}} 32 <img src="@/assets/images/login/icon-login-password.png"> {{$t('login.password')}}
33 </div> 33 </div>
34 <div class="ipt-wrap"> 34 <div class="ipt-wrap">
35 <input :placeholder="$t('login.passwordPlaceholder')" class="ipt" type="text"> 35 <input v-model="loginForm.password" :placeholder="$t('login.passwordPlaceholder')" class="ipt" type="password">
36 </div> 36 </div>
37 </div> 37 </div>
38 <div class="pure-u-1 form-item"> 38 <div class="pure-u-1 form-item" v-if="type == 1 && loginCheck.showImageCode">
39 <div class="ipt-wrap"> 39 <div class="ipt-wrap">
40 <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" type="text"> 40 <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" type="text" v-model="loginForm.imageValue">
41 <div class="ipt verify-btn pointer">5136</div> 41 <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue">
42 <img :src="values.imageBase64">
43 </div>
42 </div> 44 </div>
43 </div> 45 </div>
44 </div> 46 </div>
45 <div class="login-protocol"> 47 <div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol" >
46 <img @click="onCheckHandler()" class="check pointer" src="@/assets/images/login/login-check.png"> {{$t('login.agree')}} 48 <img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
49 <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png">
50 {{$t('login.agree')}}
47 <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span> 51 <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
48 </div> 52 </div>
49 <div @click="onSubmitHandler()" class="login-submit pointer">{{$t('login.login')}}</div> 53 <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
50 <div class="login-func"> 54 <div class="login-func">
51 <div @click="onRegisterHandler()" class="login-func-btn pointer">{{$t('login.register')}}</div> 55 <div @click="onRegisterHandler()" class="login-func-btn pointer">{{$t('login.register')}}</div>
52 <div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div> 56 <div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div>
...@@ -71,7 +75,15 @@ ...@@ -71,7 +75,15 @@
71 <img src="@/assets/images/login/icon-login-phone.png"> {{$t('login.mobile')}} 75 <img src="@/assets/images/login/icon-login-phone.png"> {{$t('login.mobile')}}
72 </div> 76 </div>
73 <div class="ipt-wrap"> 77 <div class="ipt-wrap">
74 <input :placeholder="$t('login.mobilePlaceholder')" class="ipt" type="text"> 78 <input :placeholder="$t('login.mobilePlaceholder')" class="ipt" type="text" v-model="loginForm.mobileNo">
79 </div>
80 </div>
81 <div class="pure-u-1 form-item" v-if="type == 2 && loginCheck.showImageCode">
82 <div class="ipt-wrap">
83 <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" type="text" v-model="loginForm.imageValue">
84 <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue">
85 <img :src="values.imageBase64">
86 </div>
75 </div> 87 </div>
76 </div> 88 </div>
77 <div class="pure-u-1 form-item"> 89 <div class="pure-u-1 form-item">
...@@ -80,17 +92,20 @@ ...@@ -80,17 +92,20 @@
80 </div> 92 </div>
81 <div class="ipt-wrap"> 93 <div class="ipt-wrap">
82 <div class="ipt ipt2"> 94 <div class="ipt ipt2">
83 <input :placeholder="$t('login.verifyCodePlaceholder')" class="ipt-code" type="text"> 95 <input :placeholder="$t('login.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="loginForm.otp">
84 <div class="veri-btn pointer"> {{$t('login.verifyCodeGet')}}</div> 96 <div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP" >{{$t('register.verifyCodeGet')}}</div>
97 <div v-else class="veri-btn-default">{{times.tip}}</div>
85 </div> 98 </div>
86 </div> 99 </div>
87 </div> 100 </div>
88 </div> 101 </div>
89 <div class="login-protocol"> 102 <div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol" >
90 <img @click="onCheckHandler()" class="check pointer" src="@/assets/images/login/login-check.png"> {{$t('login.agree')}} 103 <img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
104 <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png">
105 {{$t('login.agree')}}
91 <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span> 106 <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
92 </div> 107 </div>
93 <div @click="onSubmitHandler()" class="login-submit pointer">{{$t('login.login')}}</div> 108 <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
94 <div class="login-func"> 109 <div class="login-func">
95 <div @click="onRegisterHandler()" class="login-func-btn pointer">{{$t('login.register')}}</div> 110 <div @click="onRegisterHandler()" class="login-func-btn pointer">{{$t('login.register')}}</div>
96 <div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div> 111 <div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div>
......
...@@ -4,11 +4,43 @@ import { ...@@ -4,11 +4,43 @@ import {
4 httpPost 4 httpPost
5 } from '@/api/fetch-api.js' 5 } from '@/api/fetch-api.js'
6 6
7 let PK = 'B5FE03847F02046C47292AF0FF2DE88977241483DD40C123046EB39CBE4C48167B120096CFF12CD16559322884A3C56FA92B07B89AB51FC8C91A75127622151DDD730DFF1F993D5A290CEAC0BBA7FC88285D8994ACBAFF50101EDE9A0925AD5DFFAFE96D53C370E9C5B37DF2F871F81C4D7CA6B7EC37FF459C07975AD9A74A95';
8 let E = '10001';
9
7 export default { 10 export default {
8 data() { 11 data() {
9 return { 12 return {
10 key: 'value', 13 key: 'value',
11 type: 1, // 1:手机验证 2:输入密码 14 type: 1, // 1:手机验证 2:输入密码
15 mobileNoType: "hk",// 选择的手机好类型
16 mobileTip: {},
17 mobileOptions: [],
18
19 registerCheck: {
20 showImageCode: false,
21 agreeProtocol: false
22 },
23 values: {
24 // 返回的token，串连整个流程，后台安全校验使用
25 vcodeuuid: "",
26 token: "",
27 deviceId: "",
28 imageBase64: "",
29 password: "",
30 passwordRepeat: ""
31 },
32 registerForm: {
33 imageValue: "",
34 mobileNo: "",
35 otp: ""
36 },
37 times: {
38 interval: 0, // 索引
39 remain: 0, // 剩余时间
40 tip: "" // 显示的文字
41 },
42 PK: process.env.RSA_PUBLIC_KEY || PK,
43 E: process.env.RSA_KEY_INDEX || E,
12 } 44 }
13 }, 45 },
14 components: {}, 46 components: {},
...@@ -21,19 +53,324 @@ export default { ...@@ -21,19 +53,324 @@ export default {
21 } 53 }
22 }, 54 },
23 methods: { 55 methods: {
24 onCheckHandler() {
25
26 },
27 onProtocolHandler() { 56 onProtocolHandler() {
28 this.$router.push({ 57 this.$router.push({
29 path: "/protocol" 58 path: "/protocol"
30 }) 59 })
31 }, 60 },
61 handlerStdSendOTP() {
62 // 发送短信验证码
63 this._checkMobileLegal().then(() => {
64 if (this.times.remain > 0) {
65 return;
66 }
67 if (this.values.vcodeuuid && !this.registerForm.imageValue) {
68 this._showImageValueTip();
69 return;
70 }
71 this._handlerIsShowImageVcode().then(() => {
72 this._startStdSendOTP();
73 this._startTimeClick();
74 });
75 });
76 },
77 _checkMobileLegal() {
78 // 检测手机号是否正确
79 return new Promise((resolve, reject) => {
80 let mobile = this.registerForm.mobileNo;
81 if (this.mobileNoType == "hk") {
82 if (mobile.length != 8) {
83 this._showMobileNoIllegalTip()
84 return;
85 }
86 } else {
87 if (mobile.length != 11) {
88 this._showMobileNoIllegalTip()
89 return;
90 }
91 }
92 resolve(true);
93 });
94 },
95 _handlerIsShowImageVcode() {
96 return new Promise((resolve, reject) => {
97
98 // 如果这个值不为空，标识出现了图片验证码，不需要重新询问是否需要图像验证码了
99 if (this.values.vcodeuuid) {
100 resolve();
101 return;
102 }
103
104 httpPost({
105 url: api.stdIsShowImageVcode,
106 data: {
107 deviceId: this.values.deviceId,
108 userId: this.registerForm.mobileNo
109 }
110 }).then(response => {
111 // 判断是否显示图形验证码
112 if (response.returnCode == "0") {
113 this.values.token = response.data.token;
114 if (response.data.isShowVcode == "N") {
115 // 测试代码
116 // if (!this.values.vcodeuuid) {
117 // this.registerCheck.showImageCode = true;
118 // this.values.vcodeuuid = "123456";
119 // return;
120 // }
121 this.values.vcodeuuid = null;
122 resolve(response);
123 } else {
124 // image 值：
125 this.registerCheck.showImageCode = true;
126 this.values.vcodeuuid = response.data.vcodeuuid;
127 this.values.imageBase64 = response.data.image;
128 }
129 }
130 return false;
131 })
132 });
133 },
134 _showMobileNoIllegalTip() {
135 alert("手机号不正确");
136 },
137 _startStdSendOTP() {
138 // 正式发送OTP信号
139 let data = {
140 mobileNo: this.registerForm.mobileNo,
141 token: this.values.token,
142 signFactor: new Date().getTime(),
143 scene: "register",
144 }
145 if (this.values.vcodeuuid) {
146 data["vcodeuuid"] = this.values.vcodeuuid;
147 data["imageValue"] = this.registerForm.imageValue;
148 }
149 httpPost({ url: api.stdSendOTP, data: data });
150 },
151 _startTimeClick() {
152 this.times.remain = 120;
153 let _this = this;
154 let i18n = this.$i18n.messages[this.$i18n.locale] || {};
155 let msg = i18n.register.coutTips;
156 _this.times.tip = msg.replace("{second}", _this.times.remain);
157 this.times.interval = setInterval(function () {
158 if (_this.times.remain <= 0) {
159 clearInterval(_this.times.interval);
160 _this.times.interval = 0;
161 _this.times.remain = 0;
162 return;
163 }
164 _this.times.remain--;
165 _this.times.tip = msg.replace("{second}", _this.times.remain);
166 _this.$set(_this, 'times', _this.times);
167 }, 1000);
168 },
32 onSubmitHandler() { 169 onSubmitHandler() {
170 // this.type = 2;
171 this._checkParams().then(() => {
172 this._regCheck().then(() => {
173 // 验证短信验证码
174 this._validateOTPandRepeat().then(() => {
33 this.type = 2; 175 this.type = 2;
176 });
177 });
178 });
179 },
180 _validateOTPandRepeat() {
181 return new Promise((resolve, reject) => {
182 let data = {
183 mobileNo: this.registerForm.mobileNo,
184 token: this.values.token,
185 signFactor: new Date().getTime(),
186 otp: this.registerForm.opt
187 };
188 httpPost({
189 url: api.stdValidateOTPandRepeat,
190 data: data
191 }).then(response => {
192 if (response.returnCode != "0") {
193 this._showCheckOTPErrTip(response.returnMsg);
194 // TODO 测试代码
195 // resolve();
196 } else {
197 // this.type = 2;
198 resolve();
199 }
200 })
201 });
202 },
203 _regCheck() {
204 // 检测手机号注册情况
205 return new Promise((resolve, reject) => {
206 let data = {
207 mobileNo: this.registerForm.mobileNo,
208 };
209 httpPost({
210 url: api.gsRegCheck,
211 data: data
212 }).then(response => {
213 if (response.returnCode == "0") {
214 if (response.data.mobileStatus == "N") {
215 resolve();
216 } else {
217 // 重复注册
218 this._showDuplicateRegistrationTip();
219 }
220 } else {
221 // 错误提示
222 this._showCheckOTPErrTip(response.returnMsg);
223 }
224 })
225 });
226 },
227 _checkParams() {
228 return new Promise((resolve, reject) => {
229 if (!this.registerCheck.agreeProtocol) {
230 this._showAgreeProtocolTip();
231 return;
232 }
233 if (!this.values.token) {
234 this._showTokenTip();
235 return;
236 }
237 if (this.values.vcodeuuid && !this.registerForm.imageValue) {
238 this._showImageValueTip();
239 return;
240 }
241 if (!this.registerForm.opt) {
242 this._showOTPTip();
243 return;
244 }
245 this._checkMobileLegal().then(() => {
246 resolve();
247 })
248 });
249 },
250
251 _showAgreeProtocolTip() {
252 alert("请同意协议")
253 },
254 _showOTPTip() {
255 alert("请填写短信验证码")
256 },
257 _showTokenTip() {
258 alert("请先请求短信验证码")
259 },
260 _showDuplicateRegistrationTip() {
261 alert("手机号已经被注册，请使用其他手机号重新注册")
262 },
263 _showImageValueTip() {
264 alert("请输入图片验证码")
265 },
266 _showCheckOTPErrTip(msg) {
267 alert(msg);
34 }, 268 },
35 onRegisterHandler() { 269 onRegisterHandler() {
270 this._checkPassword().then(() => {
271 let data = {
272 token: this.values.token,
273 mobileNo: this.registerForm.mobileNo,
274 loginPwd: this._passwordEncrypt(this.values.password)
275 };
276 httpPost({
277 url: api.stdRegister,
278 data: data
279 }).then(response => {
280 if (response.returnCode != 0) {
281 this._showRegisterFailure(response);
282 this.type = 1;
283 } else {
284 this._showSuccessMessage();
285 this.$router.push({
286 path: "/login"
287 });
288 }
289 })
290 });
291 },
292 _checkPassword() {
293 return new Promise((resolve, reject) => {
294 let password = this.values.password;
295 if (password.length < 8) {
296 this._showPasswordLenthNotEnouth();
297 return;
298 }
299 // 匹配字母
300 let m1 = /([a-z])+/.test(password);
301 let m2 = /([A-Z])+/.test(password);
302 // 匹配数字
303 let m3 = /([0-9])+/.test(password);
304 // 匹配特殊字符
305 let m4 = /[^a-zA-Z0-9]+/.test(password);
306 console.log(m1, m2, m3, m4)
307 if ((m1 | m2) & m3 & m4) {
308 if (password != this.values.passwordRepeat) {
309 this._showPasswordNotTheSameTips();
310 } else {
311 resolve();
312 }
313 } else {
314 this._showPasswordComplexityTips();
315 }
316 });
317 },
318 _showPasswordLenthNotEnouth() {
319 alert("密码长度不能少于8位")
320 },
321 _showPasswordComplexityTips() {
322 alert("密码必须同时包含数字、字母、特殊字符")
323 },
324 _showPasswordNotTheSameTips() {
325 alert("两次输入的密码不一致")
326 },
327 _showRegisterFailure(response) {
328 if ("COMMON_ERROR_052" == response.returnCode) {
329 this._resetRegisterParam();
330 this.handlerRefreshImageVcode();
331 alert("验证码过期，请重新申请验证码");
332 } else {
333 this._resetAllParams();
334 alert("注册失败，请联系工作人员");
335 }
336 },
337 _resetAllParams() {
338 this.values.vcodeuuid = "";
339 this.values.token = "";
340 this.values.imageBase64 = "";
341 this.values.password = "";
342 this.values.passwordRepeat = "";
36 343
344 this.registerForm.imageValue = "";
345 this.registerForm.mobileNo = "";
346 this.registerForm.otp = "";
347
348 this.times.interval = "";
349 this.times.remain = "";
350 this.times.tip = "";
351 },
352 _resetRegisterParam() {
353 this.values.token = "";
354 this.registerForm.otp = "";
355 this.times.interval = "";
356 this.times.remain = "";
357 this.times.tip = "";
358 },
359 handlerRefreshImageVcode() {
360 if (this.values.vcodeuuid) {
361 let data = {
362 vcodeuuid: this.values.vcodeuuid
363 }
364 httpPost({
365 url: api.stdRefreshVcode,
366 data: data
367 }).then(response => {
368 this.$set(this.values, 'imageBase64', response.data.image);
369 })
370 }
371 },
372 _showSuccessMessage() {
373 alert("注册成功")
37 }, 374 },
38 onForgetHandler() { 375 onForgetHandler() {
39 376
...@@ -41,8 +378,31 @@ export default { ...@@ -41,8 +378,31 @@ export default {
41 onLoginTypeHandler(val) { 378 onLoginTypeHandler(val) {
42 379
43 }, 380 },
44 initData() {} 381 _passwordEncrypt(rawPwd) {
382 let rsa = new RSAKey();
383 rsa.setPublic(this.PK, this.E);
384 let res = rsa.encrypt(rawPwd);
385 if (res == null) return rawPwd;
386 return res;
45 }, 387 },
46 mounted() {}, 388 initData() {
47 created() {} 389 let i18n = this.$i18n.messages[this.$i18n.locale] || {};
390 let mobileOptions = JSON.parse(JSON.stringify(i18n.register.mobileOptions));
391 this.mobileOptions = mobileOptions;
392 this.mobileTip = this.mobileOptions[0];
393 }
394 },
395 mounted() { },
396 watch: {
397 mobileNoType() {
398 this.mobileOptions.forEach(element => {
399 if (element.type == this.mobileNoType) {
400 this.$set(this, 'mobileTip', element);
401 }
402 })
403 }
404 },
405 created() {
406 this.initData();
407 }
48 } 408 }
......
...@@ -120,6 +120,20 @@ ...@@ -120,6 +120,20 @@
120 justify-content: space-between; 120 justify-content: space-between;
121 flex-wrap: wrap; 121 flex-wrap: wrap;
122 122
123 .vcode {
124 background-color: transparent !important;
125 padding: 0 !important;
126 overflow: hidden;
127 img {
128 width: 100%;
129 height: 100%;
130 }
131 }
132
133 input {
134 font-size: 1.166667rem; /* 14/12 */
135 letter-spacing: .1rem;/* 1.2/12 */
136 }
123 137
124 &-item { 138 &-item {
125 position: relative; 139 position: relative;
...@@ -206,6 +220,9 @@ ...@@ -206,6 +220,9 @@
206 color: #f05a23; 220 color: #f05a23;
207 text-decoration: underline; 221 text-decoration: underline;
208 } 222 }
223 .veri-btn-default {
224 color: #aaaaaa;
225 }
209 } 226 }
210 227
211 } 228 }
......
...@@ -16,36 +16,44 @@ ...@@ -16,36 +16,44 @@
16 <div class="pure-u-1 form-item"> 16 <div class="pure-u-1 form-item">
17 <div class="ipt-wrap"> 17 <div class="ipt-wrap">
18 <img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt=""> 18 <img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
19 <select class="ipt"> 19 <select class="ipt" v-model="mobileNoType">
20 <template v-if="locale == 'zh'"> 20 <option v-for="(item,index) in mobileOptions" :key="index" :value="item.type">{{item.name}}</option>
21 <option>香港手机号</option>
22 </template>
23 <template v-else>
24 <option>香港手機號</option>
25 </template>
26 </select> 21 </select>
27 </div> 22 </div>
28 </div> 23 </div>
29 <div class="pure-u-1 form-item"> 24 <div class="pure-u-1 form-item">
30 <div class="ipt-wrap"> 25 <div class="ipt-wrap">
31 <div class="ipt ipt2"> 26 <div class="ipt ipt2">
32 <div class="region-tel">+852</div> 27 <div class="region-tel">{{mobileTip.areaCode}}</div>
33 <input :placeholder="$t('register.mobilePlaceholder')" class="ipt-tel" type="text"> 28 <input :placeholder="mobileTip.placeHolder" class="ipt-tel" type="text" v-model="registerForm.mobileNo">
29 </div>
30 </div>
31 </div>
32
33 <div class="pure-u-1 form-item" v-if="registerCheck.showImageCode">
34 <div class="ipt-wrap">
35 <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" type="text" v-model="registerForm.imageValue">
36 <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageVcode">
37 <img :src="values.imageBase64">
34 </div> 38 </div>
35 </div> 39 </div>
36 </div> 40 </div>
37 <div class="pure-u-1 form-item"> 41 <div class="pure-u-1 form-item">
38 <div class="ipt-wrap"> 42 <div class="ipt-wrap">
39 <div class="ipt ipt2"> 43 <div class="ipt ipt2">
40 <input :placeholder="$t('register.verifyCodePlaceholder')" class="ipt-code" type="text"> 44 <input :placeholder="$t('register.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="registerForm.opt">
41 <div class="veri-btn pointer">{{$t('register.verifyCodeGet')}}</div> 45 <div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP" >{{$t('register.verifyCodeGet')}}</div>
46 <div v-else class="veri-btn-default">{{times.tip}}</div>
42 </div> 47 </div>
43 </div> 48 </div>
44 </div> 49 </div>
45 </div> 50 </div>
46 <div class="login-protocol"> 51
47 <img @click="onCheckHandler()" class="check pointer" src="@/assets/images/login/login-check.png">{{$t('register.agree')}} 52 <div class="login-protocol pointer" @click="registerCheck.agreeProtocol = !registerCheck.agreeProtocol" >
48 <span @click="onProtocolHandler()" class="protocol pointer">{{$t('register.protocol')}}</span> 53 <img v-if="!registerCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
54 <img v-if="registerCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png">
55 {{$t('login.agree')}}
56 <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
49 </div> 57 </div>
50 <div @click="onSubmitHandler()" class="login-submit pointer">{{$t('register.register')}}</div> 58 <div @click="onSubmitHandler()" class="login-submit pointer">{{$t('register.register')}}</div>
51 </div> 59 </div>
...@@ -57,7 +65,7 @@ ...@@ -57,7 +65,7 @@
57 <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}} 65 <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}}
58 </div> 66 </div>
59 <div class="ipt-wrap"> 67 <div class="ipt-wrap">
60 <input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" type="text"> 68 <input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" type="password" v-model="values.password">
61 </div> 69 </div>
62 </div> 70 </div>
63 <div class="pure-u-1 form-item"> 71 <div class="pure-u-1 form-item">
...@@ -65,11 +73,11 @@ ...@@ -65,11 +73,11 @@
65 <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPasswordSure')}} 73 <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPasswordSure')}}
66 </div> 74 </div>
67 <div class="ipt-wrap"> 75 <div class="ipt-wrap">
68 <input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" type="text"> 76 <input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" type="password" v-model="values.passwordRepeat">
69 </div> 77 </div>
70 </div> 78 </div>
71 </div> 79 </div>
72 <div @click="onSubmitHandler()" class="login-submit pointer">{{$t('register.sure')}}</div> 80 <div @click="onRegisterHandler()" class="login-submit pointer">{{$t('register.sure')}}</div>
73 </div> 81 </div>
74 </div> 82 </div>
75 </div> 83 </div>
......
1 import { setCookie, getCookie } from '@/utils/utils.js'
2 import { stat } from 'fs';
3
1 export function INCREMENT(state) { 4 export function INCREMENT(state) {
2 state.counter++ 5 state.counter++
3 } 6 }
...@@ -9,3 +12,13 @@ export function IS_MOBILE(state, bool) { ...@@ -9,3 +12,13 @@ export function IS_MOBILE(state, bool) {
9 export function IS_SMALL_SCREEN(state, bool) { 12 export function IS_SMALL_SCREEN(state, bool) {
10 state.isSmallScreen = bool 13 state.isSmallScreen = bool
11 } 14 }
15
16 export function SET_USER_INFO(state, val) {
17 if (val) {
18 setCookie("_user_profile", encodeURIComponent(JSON.stringify(val)), 7200);
19 state.userInfo = val;
20 } else {
21 setCookie("_user_profile", "", 1);
22 state.userInfo = null;
23 }
24 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,4 +2,10 @@ export default { ...@@ -2,4 +2,10 @@ export default {
2 counter: 2, // 例子 2 counter: 2, // 例子
3 isMobile: false, //是否手机访问 3 isMobile: false, //是否手机访问
4 isSmallScreen: false, // 是否小屏幕 (PC时，小屏幕机导航栏会改变)) 4 isSmallScreen: false, // 是否小屏幕 (PC时，小屏幕机导航栏会改变))
5
6 userInfo : {
7 sid : "",
8 name : "",
9 hadFullInfo: ""
10 }
5 } 11 }
......
...@@ -40,10 +40,10 @@ export function getCookie(name) { ...@@ -40,10 +40,10 @@ export function getCookie(name) {
40 } 40 }
41 41
42 //设置cookie 42 //设置cookie
43 export function setCookie(c_name, value, expiredays) { 43 export function setCookie(c_name, value, second) {
44 var exdate = new Date(); 44 var exdate = new Date();
45 exdate.setDate(exdate.getDate() + expiredays); 45 exdate.setTime(exdate.getTime() + second * 1000);
46 document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()); 46 document.cookie = c_name + "=" + escape(value) + ((second == null) ? "" : ";expires=" + exdate.toGMTString());
47 }; 47 };
48 48
49 //删除cookie 49 //删除cookie
......