简柏林 / thingskit-app · Commits

Commit f42f0c98924a7b323760a180b14df11d6e2fa1de

Authored by fengwotao
1 parent 79e8156f

perf: app 优化登录页代码

Inline Side-by-side
Showing 6 changed files with 353 additions and 389 deletions
@@ -156,7 +156,7 @@ @@ -156,7 +156,7 @@
156 { 156 {
157 "path": "other/code", 157 "path": "other/code",
158 "style": { 158 "style": {
159 - "navigationBarTitleText": "验证码登录" 159 + "navigationBarTitleText": "手机验证码登录"
160 } 160 }
161 }, 161 },
162 { 162 {
@@ -4,193 +4,252 @@ const DATE_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss"; @@ -4,193 +4,252 @@ const DATE_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
4 4
5 /** 5 /**
6 登录密码正则验证 6 登录密码正则验证
7 - 最短8位，最长16位  
8 - 必须包含1个数字  
9 - 必须包含1个小写字母  
10 - 必须包含1个大写字母 7 + 最短8位，最长16位
  8 + 必须包含1个数字
  9 + 必须包含1个小写字母
  10 + 必须包含1个大写字母
11 必须包含1个特殊字符 11 必须包含1个特殊字符
12 */ 12 */
13 -export const loginPasswordReg =/^.*(?=.{6,16})(?=.*\d)(?=.*[A-Z]{1,})(?=.*[a-z]{1,})(?=.*[_!@#$%^&*?\(\)]).*$/; 13 +export const loginPasswordReg = /^.*(?=.{6,16})(?=.*\d)(?=.*[A-Z]{1,})(?=.*[a-z]{1,})(?=.*[_!@#$%^&*?\(\)]).*$/;
14 14
15 //手机号中间4位为* 15 //手机号中间4位为*
16 -Vue.filter("phone", function (val) {  
17 - var tel = val;  
18 - tel = "" + tel;  
19 - var telShort = tel.replace(tel.substring(3, 7), "****");  
20 - return telShort; 16 +Vue.filter("phone", function(val) {
  17 + var tel = val;
  18 + tel = "" + tel;
  19 + var telShort = tel.replace(tel.substring(3, 7), "****");
  20 + return telShort;
21 }); 21 });
22 //获取系统信息、判断ipX安全距离 22 //获取系统信息、判断ipX安全距离
23 -export const getTabbarHeight = function () {  
24 - var systemInfo = uni.getSystemInfoSync();  
25 - var data = {  
26 - ...systemInfo,  
27 - tabbarH: 50, //tabbar高度--单位px  
28 - tabbarPaddingB: 0, //tabbar底部安全距离高度--单位px  
29 - device: systemInfo.system.indexOf("iOS") != -1 ? "iOS" : "Android", //苹果或者安卓设备  
30 - };  
31 - let modelArr = [  
32 - "10,3",  
33 - "10,6",  
34 - "X",  
35 - "XR",  
36 - "XS",  
37 - "11",  
38 - "12",  
39 - "13",  
40 - "14",  
41 - "15",  
42 - "16",  
43 - ];  
44 - let model = systemInfo.model;  
45 - model &&  
46 - modelArr.forEach((item) => {  
47 - //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom  
48 - if (  
49 - model.indexOf(item) != -1 &&  
50 - (model.indexOf("iPhone") != -1 || model.indexOf("iphone") != -1)  
51 - ) {  
52 - data.tabbarH = 70;  
53 - data.tabbarPaddingB = 20;  
54 - }  
55 - });  
56 - return data; 23 +export const getTabbarHeight = function() {
  24 + var systemInfo = uni.getSystemInfoSync();
  25 + var data = {
  26 + ...systemInfo,
  27 + tabbarH: 50, //tabbar高度--单位px
  28 + tabbarPaddingB: 0, //tabbar底部安全距离高度--单位px
  29 + device: systemInfo.system.indexOf("iOS") != -1 ? "iOS" : "Android", //苹果或者安卓设备
  30 + };
  31 + let modelArr = [
  32 + "10,3",
  33 + "10,6",
  34 + "X",
  35 + "XR",
  36 + "XS",
  37 + "11",
  38 + "12",
  39 + "13",
  40 + "14",
  41 + "15",
  42 + "16",
  43 + ];
  44 + let model = systemInfo.model;
  45 + model &&
  46 + modelArr.forEach((item) => {
  47 + //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
  48 + if (
  49 + model.indexOf(item) != -1 &&
  50 + (model.indexOf("iPhone") != -1 || model.indexOf("iphone") != -1)
  51 + ) {
  52 + data.tabbarH = 70;
  53 + data.tabbarPaddingB = 20;
  54 + }
  55 + });
  56 + return data;
57 }; 57 };
58 58
59 // px转upx 59 // px转upx
60 -export const px2upx = function (n) {  
61 - return n / (uni.upx2px(n) / n); 60 +export const px2upx = function(n) {
  61 + return n / (uni.upx2px(n) / n);
62 }; 62 };
63 63
64 // 小程序获取定位权限判断 64 // 小程序获取定位权限判断
65 // isOpenSetting 默认false:不检验授权，true:检验授权后获取地址 65 // isOpenSetting 默认false:不检验授权，true:检验授权后获取地址
66 function getMpLocation(successCallback, errCallback, isOpenSetting) { 66 function getMpLocation(successCallback, errCallback, isOpenSetting) {
67 - uni.getSetting({  
68 - success: (res) => {  
69 - if (res.authSetting["scope.userLocation"] || !isOpenSetting) {  
70 - uni.getLocation({  
71 - // #ifndef MP-ALIPAY  
72 - type: "gcj02",  
73 - // #endif  
74 - success(res) {  
75 - console.log("successCallback");  
76 - successCallback(res);  
77 - },  
78 - fail(err) {  
79 - console.log("位置信息错误", err);  
80 - errCallback("位置信息获取失败");  
81 - },  
82 - });  
83 - } else {  
84 - errCallback("“位置信息”未授权");  
85 - isOpenSetting &&  
86 - uni.showModal({  
87 - title: "提示",  
88 - content: "请先在设置页面打开“位置信息”使用权限",  
89 - confirmText: "去设置",  
90 - cancelText: "再逛会",  
91 - success: (res) => {  
92 - if (res.confirm) {  
93 - uni.openSetting();  
94 - }  
95 - },  
96 - });  
97 - }  
98 - },  
99 - }); 67 + uni.getSetting({
  68 + success: (res) => {
  69 + if (res.authSetting["scope.userLocation"] || !isOpenSetting) {
  70 + uni.getLocation({
  71 + // #ifndef MP-ALIPAY
  72 + type: "gcj02",
  73 + // #endif
  74 + success(res) {
  75 + console.log("successCallback");
  76 + successCallback(res);
  77 + },
  78 + fail(err) {
  79 + console.log("位置信息错误", err);
  80 + errCallback("位置信息获取失败");
  81 + },
  82 + });
  83 + } else {
  84 + errCallback("“位置信息”未授权");
  85 + isOpenSetting &&
  86 + uni.showModal({
  87 + title: "提示",
  88 + content: "请先在设置页面打开“位置信息”使用权限",
  89 + confirmText: "去设置",
  90 + cancelText: "再逛会",
  91 + success: (res) => {
  92 + if (res.confirm) {
  93 + uni.openSetting();
  94 + }
  95 + },
  96 + });
  97 + }
  98 + },
  99 + });
100 } 100 }
101 // 获取地址信息 101 // 获取地址信息
102 let locationAuthorize = true; 102 let locationAuthorize = true;
103 -export const getAppLatLon = function (  
104 - successCallback,  
105 - errCallback,  
106 - isOpenSetting 103 +export const getAppLatLon = function(
  104 + successCallback,
  105 + errCallback,
  106 + isOpenSetting
107 ) { 107 ) {
108 - const _this = this;  
109 - // #ifdef MP-WEIXIN  
110 - if (locationAuthorize && isOpenSetting) {  
111 - uni.authorize({  
112 - scope: "scope.userLocation",  
113 - success: () => {  
114 - getMpLocation(successCallback, errCallback, isOpenSetting);  
115 - locationAuthorize = false;  
116 - },  
117 - fail: () => {  
118 - locationAuthorize = false;  
119 - },  
120 - });  
121 - } else {  
122 - getMpLocation(successCallback, errCallback, isOpenSetting);  
123 - }  
124 - // #endif  
125 - // #ifdef MP-ALIPAY  
126 - getMpLocation(successCallback, errCallback, false);  
127 - // #endif  
128 - // #ifdef H5  
129 - uni.getLocation({  
130 - type: "gcj02",  
131 - success(res) {  
132 - console.log("successCallback");  
133 - successCallback(res);  
134 - },  
135 - fail(err) {  
136 - console.log("位置信息错误", err);  
137 - errCallback("位置信息获取失败");  
138 - },  
139 - });  
140 - // #endif 108 + const _this = this;
  109 + // #ifdef MP-WEIXIN
  110 + if (locationAuthorize && isOpenSetting) {
  111 + uni.authorize({
  112 + scope: "scope.userLocation",
  113 + success: () => {
  114 + getMpLocation(successCallback, errCallback, isOpenSetting);
  115 + locationAuthorize = false;
  116 + },
  117 + fail: () => {
  118 + locationAuthorize = false;
  119 + },
  120 + });
  121 + } else {
  122 + getMpLocation(successCallback, errCallback, isOpenSetting);
  123 + }
  124 + // #endif
  125 + // #ifdef MP-ALIPAY
  126 + getMpLocation(successCallback, errCallback, false);
  127 + // #endif
  128 + // #ifdef H5
  129 + uni.getLocation({
  130 + type: "gcj02",
  131 + success(res) {
  132 + console.log("successCallback");
  133 + successCallback(res);
  134 + },
  135 + fail(err) {
  136 + console.log("位置信息错误", err);
  137 + errCallback("位置信息获取失败");
  138 + },
  139 + });
  140 + // #endif
141 }; 141 };
142 142
143 export function formatToDate(date = undefined, format = DATE_TIME_FORMAT) { 143 export function formatToDate(date = undefined, format = DATE_TIME_FORMAT) {
144 - return moment(date).format(format); 144 + return moment(date).format(format);
145 } 145 }
146 146
147 //封装uniapp跳转 navigateTo 147 //封装uniapp跳转 navigateTo
148 -export const useNavigateTo = (path,param)=>{ 148 +export const useNavigateTo = (path, param) => {
149 if (!path) return 149 if (!path) return
150 - if(param){ 150 + if (param) {
151 uni.navigateTo({ 151 uni.navigateTo({
152 url: path + encodeURIComponent(JSON.stringify(param)) 152 url: path + encodeURIComponent(JSON.stringify(param))
153 }); 153 });
154 - }else{ 154 + } else {
155 uni.navigateTo({ 155 uni.navigateTo({
156 - url:path 156 + url: path
157 }); 157 });
158 } 158 }
159 } 159 }
160 160
161 //封装uniapp跳转 reLaunch 161 //封装uniapp跳转 reLaunch
162 -export const useReLaunch = (url)=>{  
163 - uni.reLaunch({url}); 162 +export const useReLaunch = (url) => {
  163 + uni.reLaunch({
  164 + url
  165 + });
  166 +}
  167 +
  168 +//封装uniapp showToast
  169 +export const useShowToast = (title, duration = 0, mask = false) => {
  170 + return new Promise((resolve, reject) => {
  171 + uni.showToast({
  172 + title: title,
  173 + icon: 'none',
  174 + duration,
  175 + mask,
  176 + success: (res) => {
  177 + resolve(res);
  178 + },
  179 + fail: (err) => {
  180 + reject(err);
  181 + }
  182 + })
  183 + })
  184 +}
  185 +
  186 +//封装uniapp showModal
  187 +export const useShowModal = (content, title = "提示", confirmText) => {
  188 + return new Promise((resolve, reject) => {
  189 + uni.showModal({
  190 + title,
  191 + content: content,
  192 + confirmText,
  193 + success: (res) => {
  194 + resolve(res);
  195 + },
  196 + fail: (err) => {
  197 + reject(err);
  198 + }
  199 + })
  200 + })
  201 +}
  202 +
  203 +//封装uniapp uni.uploadFile
  204 +export const useUploadFile = (url, filePath, name = "file", formData, header) => {
  205 + return new Promise(function(resolve, reject) {
  206 + uni.uploadFile({
  207 + url, //请求接口地址
  208 + filePath, //文件地址
  209 + name,
  210 + formData,
  211 + header,
  212 + success(res) {
  213 + resolve(res);
  214 + },
  215 + fail(err) {
  216 + reject(res);
  217 + }
  218 + })
  219 + })
164 } 220 }
165 221
166 -//封装uniapp showToast  
167 -export const useShowToast=(title)=>{  
168 - return new Promise((resolve,reject)=>{  
169 - uni.showToast({  
170 - title: title,  
171 - icon: 'none',  
172 - success :(res) =>{  
173 - resolve(res);  
174 - },  
175 - fail:(err)=>{  
176 - reject(err);  
177 - }  
178 - })  
179 - }) 222 +//封装uniapp uniapp.chooseImage
  223 +export const useChooseImage = (data) => {
  224 + return new Promise((resolve, reject) => {
  225 + uni.chooseImage({
  226 + count: data.count || 1, //默认1
  227 + sizeType: data.sizeType || ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  228 + sourceType: data.sourceType || ['album', 'camera'], //从相册选择
  229 + success: function(res) {
  230 + resolve(res.tempFiles);
  231 + },
  232 + fail: err => {
  233 + reject({
  234 + errMsg: err.errMsg,
  235 + errCode: err.errCode,
  236 + statusCode: 0,
  237 + });
  238 + }
  239 + });
  240 + });
180 } 241 }
181 242
182 -//封装uniapp showModal  
183 -export const useShowModal=(content)=>{  
184 - return new Promise((resolve,reject)=>{  
185 - uni.showModal({  
186 - title: '提示',  
187 - content: content,  
188 - success :(res) =>{  
189 - resolve(res);  
190 - },  
191 - fail:(err)=>{  
192 - reject(err);  
193 - }  
194 - })  
195 - })  
196 -} 243 +//文件上传校验
  244 +export const useFileValidate = (file, fileSize) => {
  245 + if (file.size > fileSize) {
  246 + useShowToast('上传的图片大小不能超过5M', 2000, true)
  247 + throw Error("上传的图片大小不能超过5M")
  248 + }
  249 + const fileTxt = file.path.split('.').pop();
  250 + const fileTypeList = ['jpg', 'jpeg', 'png']
  251 + if (!fileTypeList.includes(fileTxt)) {
  252 + useShowToast('请上传指定图片类型（jpg、jpeg、png）', 2000, true)
  253 + throw Error("请上传指定图片类型（jpg、jpeg、png）")
  254 + }
  255 +}
@@ -62,15 +62,15 @@ export default { @@ -62,15 +62,15 @@ export default {
62 }, 62 },
63 //获取验证码 63 //获取验证码
64 async getVerifyCode() { 64 async getVerifyCode() {
  65 + const phoneRegular = /^1\d{10}$/;
65 if (this.readonly) { 66 if (this.readonly) {
66 useShowToast('验证码已发送~') 67 useShowToast('验证码已发送~')
67 } 68 }
68 if (!this.loginForm.phone) { 69 if (!this.loginForm.phone) {
69 - useShowToast('请输入手机号~') 70 + return useShowToast('请输入手机号~')
70 } 71 }
71 - const phoneRegular = /^1\d{10}$/;  
72 if (!phoneRegular.test(this.loginForm.phone)) { 72 if (!phoneRegular.test(this.loginForm.phone)) {
73 - useShowToast('手机号格式不正确~') 73 + return useShowToast('手机号格式不正确~')
74 } 74 }
75 // 获取验证码接口 75 // 获取验证码接口
76 const res = await api.loginApi.postPhoneCodeApi(this.loginForm.phone) 76 const res = await api.loginApi.postPhoneCodeApi(this.loginForm.phone)
@@ -2,44 +2,40 @@ @@ -2,44 +2,40 @@
2 <view class="find-password-page"> 2 <view class="find-password-page">
3 <public-module></public-module> 3 <public-module></public-module>
4 <view class="top u-flex"> 4 <view class="top u-flex">
5 - <view @click="showPhone" :style="{ color: !nextStatus ? '#0079fe' : '' }" class="item">1.验证手机号码</view>  
6 - <view :style="{ color: !nextStatus ? '' : '#0079fe' }" class="item">2.设置新密码</view> 5 + <view @click="showPhone" :style="{ color: phoneNumberColor }" class="item">1.验证手机号码</view>
  6 + <view :style="{ color: passwordColor }" class="item">2.设置新密码</view>
7 </view> 7 </view>
8 - <view v-if="!nextStatus" style="margin-top: 40rpx;" class="f__login">  
9 - <view class="loginPhone"> 8 + <view v-if="!nextStatus" class="login-body">
  9 + <view class="login-phone">
10 <view class="form-row"> 10 <view class="form-row">
11 - <u-input v-model="phone" type="number" placeholder="请输入手机号码" border="bottom" /> 11 + <u-input v-model="forgetForm.phone" type="number" placeholder="请输入手机号码" border="bottom" />
12 </view> 12 </view>
13 <view class="form-row"> 13 <view class="form-row">
14 - <u-input type="number" v-model="vCode" placeholder="请输入验证码" border="bottom"> 14 + <u-input type="number" v-model="forgetForm.verifyCode" placeholder="请输入验证码" border="bottom">
15 <template slot="suffix"> 15 <template slot="suffix">
16 - <view @click="getVcode" class="getvcode">{{ codeText }}</view> 16 + <view @click="getVerifyCode" class="verify-code">{{ codeText }}</view>
17 </template> 17 </template>
18 </u-input> 18 </u-input>
19 </view> 19 </view>
20 <button class="submit" size="default" @click="onNextSubmit"><text style="color:#fff">下一步</text></button> 20 <button class="submit" size="default" @click="onNextSubmit"><text style="color:#fff">下一步</text></button>
21 </view> 21 </view>
22 </view> 22 </view>
23 - <view v-else style="margin-top: 40rpx;" class="f__login">  
24 - <view class="loginPhone"> 23 + <view v-else class="login-body">
  24 + <view class="login-phone">
25 <view class="form-row u-flex"> 25 <view class="form-row u-flex">
26 - <u-input v-model="password" :password="showPasswordF" placeholder="请设置6-20位新的登录密码" border="bottom"> 26 + <u-input v-model="forgetForm.password" :password="showPassword" placeholder="请设置6-20位新的登录密码" border="bottom">
27 <template slot="suffix"> 27 <template slot="suffix">
28 <view @click="showPasswordMode" style="padding: 10rpx"> 28 <view @click="showPasswordMode" style="padding: 10rpx">
29 - <u-icon width="18" height="14" :name="  
30 - showPasswordF ? '/static/eye-hide.png' : '/static/eye.png'  
31 - "></u-icon> 29 + <u-icon width="18" height="14" :name="passwordModeIcon"></u-icon>
32 </view> 30 </view>
33 </template> 31 </template>
34 </u-input> 32 </u-input>
35 </view> 33 </view>
36 <view class="form-row u-flex"> 34 <view class="form-row u-flex">
37 - <u-input v-model="rePassword" :password="showPasswordS" placeholder="请再次输入新的登录密码" border="bottom"> 35 + <u-input v-model="forgetForm.repeatPassword" :password="showPasswordRepeat" placeholder="请再次输入新的登录密码" border="bottom">
38 <template slot="suffix"> 36 <template slot="suffix">
39 - <view @click="showPasswordModeS" style="padding: 10rpx">  
40 - <u-icon width="18" height="14" :name="  
41 - showPasswordS ? '/static/eye-hide.png' : '/static/eye.png'  
42 - "></u-icon> 37 + <view @click="showPasswordModeRepeat" style="padding: 10rpx">
  38 + <u-icon width="18" height="14" :name="passwordModeRepeatIcon"></u-icon>
43 </view> 39 </view>
44 </template> 40 </template>
45 </u-input> 41 </u-input>
@@ -53,25 +49,42 @@ @@ -53,25 +49,42 @@
53 <script> 49 <script>
54 import api from '@/api/index.js' 50 import api from '@/api/index.js'
55 import { loginPasswordReg } from '@/plugins/utils.js' 51 import { loginPasswordReg } from '@/plugins/utils.js'
  52 + import { useShowToast,useShowModal,useReLaunch } from '@/plugins/utils.js'
56 53
57 var clear; 54 var clear;
58 export default { 55 export default {
59 data() { 56 data() {
60 return { 57 return {
  58 + forgetForm:{
  59 + phone: '',
  60 + verifyCode: '',
  61 + password: '',
  62 + repeatPassword: '',
  63 + },
61 readonly: false, 64 readonly: false,
62 codeText: '发送验证码', 65 codeText: '发送验证码',
63 - phone: '', //号码  
64 - vCode: '', //验证码  
65 nextStatus: false, 66 nextStatus: false,
66 - password: '',  
67 - rePassword: '',  
68 - showPasswordF: true,  
69 - showPasswordS: true 67 + showPassword: true,
  68 + showPasswordRepeat: true
70 }; 69 };
71 }, 70 },
  71 + computed:{
  72 + phoneNumberColor(){
  73 + return !this.nextStatus ? '#0079fe' : ''
  74 + },
  75 + passwordColor(){
  76 + return !this.nextStatus ? '' : '#0079fe'
  77 + },
  78 + passwordModeIcon(){
  79 + return this.showPassword ? '/static/eye-hide.png' : '/static/eye.png'
  80 + },
  81 + passwordModeRepeatIcon(){
  82 + return this.showPasswordRepeat ? '/static/eye-hide.png' : '/static/eye.png'
  83 + }
  84 + },
72 methods: { 85 methods: {
73 //验证码按钮文字状态 86 //验证码按钮文字状态
74 - getCodeState() { 87 + verifyCodeCountDown() {
75 const _this = this; 88 const _this = this;
76 this.readonly = true; 89 this.readonly = true;
77 this.codeText = '60s后重新获取'; 90 this.codeText = '60s后重新获取';
@@ -87,114 +100,60 @@ @@ -87,114 +100,60 @@
87 }, 1000); 100 }, 1000);
88 }, 101 },
89 //获取验证码 102 //获取验证码
90 - getVcode() { 103 + getVerifyCode() {
  104 + const phoneRegular = /^1\d{10}$/;
91 if (this.readonly) { 105 if (this.readonly) {
92 - uni.showToast({  
93 - title: '验证码已发送~',  
94 - icon: 'none'  
95 - });  
96 - return; 106 + useShowToast('验证码已发送~')
97 } 107 }
98 - if (this.phone == '') {  
99 - uni.showToast({  
100 - title: '请输入手机号~',  
101 - icon: 'none'  
102 - });  
103 - return; 108 + console.log(this.forgetForm.phone);
  109 + if (!this.forgetForm.phone) {
  110 + return useShowToast('请输入手机号~')
104 } 111 }
105 - const phoneRegular = /^1\d{10}$/;  
106 - if (!phoneRegular.test(this.phone)) {  
107 - uni.showToast({  
108 - title: '手机号格式不正确~',  
109 - icon: 'none'  
110 - });  
111 - return; 112 + if (!phoneRegular.test(this.forgetForm.phone)) {
  113 + return useShowToast('手机号格式不正确~')
112 } 114 }
113 - let httpData = {};  
114 - // 获取验证码接口  
115 - api.loginApi.postCodeApi(this.phone) 115 + api.loginApi.postCodeApi(this.forgetForm.phone)
116 .then(res => { 116 .then(res => {
117 - this.getCodeState(); //开始倒计时 117 + this.verifyCodeCountDown(); //开始倒计时
118 }) 118 })
119 - .catch(err => {  
120 - uni.showToast({  
121 - title: err.data.msg,  
122 - icon: 'none'  
123 - });  
124 - });  
125 }, 119 },
126 onNextSubmit() { 120 onNextSubmit() {
127 const phoneRegular = /^1\d{10}$/; 121 const phoneRegular = /^1\d{10}$/;
128 - if (this.phone == '') {  
129 - uni.showToast({  
130 - title: '请输入手机号码~',  
131 - icon: 'none'  
132 - });  
133 - return;  
134 - } else if (!phoneRegular.test(this.phone)) {  
135 - uni.showToast({  
136 - title: '手机号格式不正确~',  
137 - icon: 'none'  
138 - });  
139 - return;  
140 - }  
141 - if (this.vCode == '') {  
142 - uni.showToast({  
143 - title: '请输入验证码~',  
144 - icon: 'none'  
145 - });  
146 - return;  
147 - } else if (!/^\d{6}$/.test(this.vCode)) {  
148 - uni.showToast({  
149 - title: '验证码格式不正确~',  
150 - icon: 'none'  
151 - });  
152 - return;  
153 - } 122 + const verifyCodeReg=/^\d{6}$/;
  123 + const validateValue = Object.values(this.forgetForm)
  124 + if(!validateValue[0]) return uni.$u.toast("请输入手机号码~");
  125 + if(!validateValue[1]) return uni.$u.toast("请输入验证码~");
  126 + if(!phoneRegular.test(validateValue[0])) return uni.$u.toast("手机号格式不正确~");
  127 + if(!verifyCodeReg.test(validateValue[1])) return uni.$u.toast("验证码格式不正确~");
154 this.nextStatus = true; 128 this.nextStatus = true;
155 }, 129 },
156 showPhone() { 130 showPhone() {
157 this.nextStatus = false; 131 this.nextStatus = false;
158 }, 132 },
159 onSubmit() { 133 onSubmit() {
160 - if (this.password == '' && this.rePassword == '') {  
161 - uni.showToast({  
162 - title: '请输入密码~',  
163 - icon: 'none'  
164 - });  
165 - return;  
166 - } else if (!loginPasswordReg.test(this.password) && !loginPasswordReg.test(this.rePassword)) {  
167 - //uni.showToast，字数过长，会造成手机上显示不完全，官方bug，采用uni.showModal  
168 - uni.showModal({  
169 - title: '提示',  
170 - content: '密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~',  
171 - showCancel: false  
172 - });  
173 - return;  
174 - }  
175 - if (this.password !== this.rePassword) return uni.$u.toast('两次输入密码不一致'); 134 + const validateValue = Object.values(this.forgetForm)
  135 + if(!validateValue[2]) return uni.$u.toast("请输入密码~");
  136 + if(!validateValue[3]) return uni.$u.toast("请输入密码~");
  137 + if(!loginPasswordReg.test(validateValue[2])) return useShowModal('密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~')
  138 + if(!loginPasswordReg.test(validateValue[3])) return useShowModal('密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~')
  139 + if (validateValue[2] !== validateValue[3]) return uni.$u.toast('两次输入密码不一致');
176 let httpData = { 140 let httpData = {
177 - password: this.password,  
178 - phoneNumber: this.phone,  
179 - userId: this.vCode 141 + password: this.forgetForm.password,
  142 + phoneNumber: this.forgetForm.phone,
  143 + userId: this.forgetForm.verifyCode
180 }; 144 };
181 - const res = api.loginApi.postResetCodeApi(this.phone, httpData) 145 + const res = api.loginApi.postResetCodeApi(this.forgetForm.phone, httpData)
182 if (res) { 146 if (res) {
183 - uni.showToast({  
184 - title: '重置密码成功~',  
185 - icon: 'none'  
186 - }).then(res => {  
187 - uni.reLaunch({  
188 - url: '/publicLoginSubPage/public/login'  
189 - }); 147 + useShowToast( '重置密码成功~').then(res => {
  148 + useReLaunch('/publicLoginSubPage/public/login')
190 }); 149 });
191 } 150 }
192 }, 151 },
193 showPasswordMode() { 152 showPasswordMode() {
194 - this.showPasswordF = !this.showPasswordF; 153 + this.showPassword = !this.showPassword;
195 }, 154 },
196 - showPasswordModeS() {  
197 - this.showPasswordS = !this.showPasswordS; 155 + showPasswordModeRepeat() {
  156 + this.showPasswordRepeat = !this.showPasswordRepeat;
198 } 157 }
199 } 158 }
200 }; 159 };
@@ -5,42 +5,41 @@ @@ -5,42 +5,41 @@
5 <!-- #ifdef MP-WEIXIN --> 5 <!-- #ifdef MP-WEIXIN -->
6 <view @click="upAvatar" class="u-flex set-main"> 6 <view @click="upAvatar" class="u-flex set-main">
7 <view class="main-image"> 7 <view class="main-image">
8 - <image class="image" :src="avatar || '../../static/logo.png'"></image> 8 + <image class="image" :src="uploadImage"></image>
9 </view> 9 </view>
10 <view class="main-right-image"> 10 <view class="main-right-image">
11 - <image class="image" src="../../static/arrow-right.png"></image> 11 + <image class="image" src="/static/arrow-right.png"></image>
12 </view> 12 </view>
13 </view> 13 </view>
14 <!-- #endif --> 14 <!-- #endif -->
15 <!-- #ifdef APP-PLUS --> 15 <!-- #ifdef APP-PLUS -->
  16 + <!-- 这里上传写两道的原因是，如果是app端，则兼容打开相机拍照上传 -->
16 <view @click="upAppAvatar" class="u-flex set-main"> 17 <view @click="upAppAvatar" class="u-flex set-main">
17 <view class="main-image"> 18 <view class="main-image">
18 - <image class="image" :src="avatar || '../../static/logo.png'"></image> 19 + <image class="image" :src="uploadImage"></image>
19 </view> 20 </view>
20 <view class="main-right-image"> 21 <view class="main-right-image">
21 - <image class="image" src="../../static/arrow-right.png"></image> 22 + <image class="image" src="/static/arrow-right.png"></image>
22 </view> 23 </view>
23 </view> 24 </view>
24 <!-- #endif --> 25 <!-- #endif -->
25 <view class="u-m-t-20 basic-text"><text class="text">基本资料</text></view> 26 <view class="u-m-t-20 basic-text"><text class="text">基本资料</text></view>
26 <view class="basic-main"> 27 <view class="basic-main">
27 <u--form labelPosition="left" :model="myInfoModel" ref="myForm"> 28 <u--form labelPosition="left" :model="myInfoModel" ref="myForm">
28 - <u-form-item labelWidth="80px" label="真实姓名" prop="realName" borderBottom ref="item1"> 29 + <u-form-item labelWidth="80px" label="真实姓名" prop="realName" borderBottom>
29 <u--input placeholder="请输入真实姓名" v-model="myInfoModel.realName" border="none"></u--input> 30 <u--input placeholder="请输入真实姓名" v-model="myInfoModel.realName" border="none"></u--input>
30 </u-form-item> 31 </u-form-item>
31 - <u-form-item labelWidth="80px" label="手机号码" prop="phoneNumber" borderBottom ref="item1"> 32 + <u-form-item labelWidth="80px" label="手机号码" prop="phoneNumber" borderBottom>
32 <u--input placeholder="请输入手机号码" v-model="myInfoModel.phoneNumber" border="none"></u--input> 33 <u--input placeholder="请输入手机号码" v-model="myInfoModel.phoneNumber" border="none"></u--input>
33 </u-form-item> 34 </u-form-item>
34 - <u-form-item labelWidth="80px" label="用户账号" prop="username" borderBottom ref="item1"> 35 + <u-form-item labelWidth="80px" label="用户账号" prop="username" borderBottom>
35 <u--input disabled placeholder="请输入用户账号 " v-model="myInfoModel.username" border="none"></u--input> 36 <u--input disabled placeholder="请输入用户账号 " v-model="myInfoModel.username" border="none"></u--input>
36 </u-form-item> 37 </u-form-item>
37 - <u-form-item labelWidth="80px" label="邮箱地址" prop="email" borderBottom ref="item1"> 38 + <u-form-item labelWidth="80px" label="邮箱地址" prop="email" borderBottom>
38 <u--input placeholder="请输入邮箱地址" v-model="myInfoModel.email" border="none"></u--input> 39 <u--input placeholder="请输入邮箱地址" v-model="myInfoModel.email" border="none"></u--input>
39 </u-form-item> 40 </u-form-item>
40 - <u-form-item @click="  
41 - showDate = true;  
42 - hideKeyboard();  
43 - " labelWidth="80px" label="有效期" prop="accountExpireTime" ref="item1"> 41 + <u-form-item @click="showDate = true;hideKeyboard();" labelWidth="80px" label="有效期"
  42 + prop="accountExpireTime">
44 <u--input v-model="myInfoModel.accountExpireTime" placeholder="请选择有效期" border="none"></u--input> 43 <u--input v-model="myInfoModel.accountExpireTime" placeholder="请选择有效期" border="none"></u--input>
45 <u-datetime-picker :formatter="formatter" :show="showDate" :value="datetime" mode="dateTime" 44 <u-datetime-picker :formatter="formatter" :show="showDate" :value="datetime" mode="dateTime"
46 closeOnClickOverlay @confirm="dateConfirm" @cancel="dateClose" @close="dateClose"> 45 closeOnClickOverlay @confirm="dateConfirm" @cancel="dateClose" @close="dateClose">
@@ -61,7 +60,7 @@ @@ -61,7 +60,7 @@
61 class="un-bind-text">确认</text></button> 60 class="un-bind-text">确认</text></button>
62 </view> 61 </view>
63 </view> 62 </view>
64 - <!-- #ifdef MP --> 63 + <!-- #ifdef MP-WEIXIN -->
65 <view class="u-m-t-40"><text style="visibility: hidden;">#</text></view> 64 <view class="u-m-t-40"><text style="visibility: hidden;">#</text></view>
66 <!-- #endif --> 65 <!-- #endif -->
67 <!-- 解绑账号 --> 66 <!-- 解绑账号 -->
@@ -90,6 +89,12 @@ @@ -90,6 +89,12 @@
90 } from 'vuex'; 89 } from 'vuex';
91 import api from '@/api/index.js' 90 import api from '@/api/index.js'
92 import permission from '@/js_sdk/wa-permission/permission.js' 91 import permission from '@/js_sdk/wa-permission/permission.js'
  92 + import {
  93 + useShowModal,
  94 + useUploadFile,
  95 + useChooseImage,
  96 + useFileValidate
  97 + } from '@/plugins/utils.js'
93 98
94 export default { 99 export default {
95 data() { 100 data() {
@@ -114,7 +119,6 @@ @@ -114,7 +119,6 @@
114 email: '', 119 email: '',
115 accountExpireTime: '' 120 accountExpireTime: ''
116 }, 121 },
117 -  
118 rules: { 122 rules: {
119 phoneNumber: [{ 123 phoneNumber: [{
120 required: true, 124 required: true,
@@ -154,13 +158,9 @@ @@ -154,13 +158,9 @@
154 onLoad(e) { 158 onLoad(e) {
155 if (e.data !== null) { 159 if (e.data !== null) {
156 let params = JSON.parse(e.data); 160 let params = JSON.parse(e.data);
  161 + for (let i in this.myInfoModel) Reflect.set(this.myInfoModel, i, params.data[i])
157 this.info = params; 162 this.info = params;
158 - this.myInfoModel.realName = params.data.realName;  
159 - this.myInfoModel.phoneNumber = params.data.phoneNumber;  
160 - this.myInfoModel.username = params.data.username;  
161 - this.myInfoModel.email = params.data.email;  
162 - this.myInfoModel.accountExpireTime = params.data.accountExpireTime;  
163 - this.avatar = params.data.avatar == undefined ? '../../static/logo.png' : params.data.avatar; 163 + this.avatar = params.data.avatar == undefined ? '/static/logo.png' : params.data.avatar;
164 this.id = params.data.userId; 164 this.id = params.data.userId;
165 } 165 }
166 }, 166 },
@@ -168,24 +168,22 @@ @@ -168,24 +168,22 @@
168 let getOpenId = getApp().globalData.openId; 168 let getOpenId = getApp().globalData.openId;
169 if (getOpenId) { 169 if (getOpenId) {
170 this.openIds = getOpenId; 170 this.openIds = getOpenId;
171 - console.log('OPenid', this.openIds);  
172 } 171 }
173 }, 172 },
174 computed: { 173 computed: {
175 - ...mapState(['userInfo']) 174 + uploadImage() {
  175 + return this.avatar || '/static/logo.png'
  176 + }
176 }, 177 },
177 methods: { 178 methods: {
  179 + ...mapState(['userInfo']),
  180 + ...mapMutations(['setUserInfo', 'emptyUserInfo']),
178 modify() { 181 modify() {
179 - uni.showModal({  
180 - title: '需要下列权限才可以正常使用',  
181 - content: this.modify_content,  
182 - confirmText: '前往开启',  
183 - success: function(res) {  
184 - if (res.confirm) {  
185 - permission.gotoAppPermissionSetting(); //动态修改权限  
186 - } 182 + useShowModal(this.modify_content, '需要下列权限才可以正常使用', '前往开启').then((res) => {
  183 + if (res.confirm) {
  184 + permission.gotoAppPermissionSetting(); //动态修改权限
187 } 185 }
188 - }); 186 + })
189 }, 187 },
190 async requestAndroidPermission(permissionID, e) { 188 async requestAndroidPermission(permissionID, e) {
191 let resp = await permission.requestAndroidPermission(permissionID, e); 189 let resp = await permission.requestAndroidPermission(permissionID, e);
@@ -193,14 +191,14 @@ @@ -193,14 +191,14 @@
193 this.modify(); 191 this.modify();
194 } else if (resp == 1) { 192 } else if (resp == 1) {
195 if (e == 1) { 193 if (e == 1) {
196 - this.chooseImage1() 194 + this.nativeCameraChooseFile()
197 } else { 195 } else {
198 - this.chooseImage2() 196 + this.chooseLocalAlbum()
199 } 197 }
200 } 198 }
201 }, 199 },
202 - ...mapMutations(['setUserInfo', 'emptyUserInfo']),  
203 - chooseImage1() { 200 + //使用相机上传
  201 + nativeCameraChooseFile() {
204 let token; 202 let token;
205 token = this.userInfo.isToken || uni.getStorageSync('userInfo').isToken || undefined; 203 token = this.userInfo.isToken || uni.getStorageSync('userInfo').isToken || undefined;
206 // #ifdef H5 204 // #ifdef H5
@@ -213,32 +211,26 @@ @@ -213,32 +211,26 @@
213 cmr.captureImage( 211 cmr.captureImage(
214 (path) => { 212 (path) => {
215 this.showSelectType = false 213 this.showSelectType = false
216 - uni.uploadFile({  
217 - url: `${baseUrl.baseUrl}/yt/oss/upload`,  
218 - filePath: path,  
219 - name: 'file',  
220 - header: { 214 + useUploadFile(`${baseUrl.baseUrl}/yt/oss/upload`, path, 'file', {}, {
221 'content-type': 'multipart/form-data', 215 'content-type': 'multipart/form-data',
222 Authorization: 'Bearer ' + token 216 Authorization: 'Bearer ' + token
223 - },  
224 - formData: {},  
225 - success: res => { 217 + })
  218 + .then(res => {
226 let objImage = JSON.parse(res.data); 219 let objImage = JSON.parse(res.data);
227 this.avatar = objImage.fileStaticUri; 220 this.avatar = objImage.fileStaticUri;
228 uni.$u.toast('头像上传成功'); 221 uni.$u.toast('头像上传成功');
229 - }  
230 - }); 222 + })
231 }, 223 },
232 function(error) { 224 function(error) {
233 - console.log('Capture image failed: ' + error.message); 225 + uni.$u.toast('Capture image failed: ' + error.message);
234 }, { 226 }, {
235 resolution: res, 227 resolution: res,
236 format: fmt 228 format: fmt
237 } 229 }
238 ); 230 );
239 }, 231 },
240 - //选择相册  
241 - chooseImage2() { 232 + //选择相册上传
  233 + chooseLocalAlbum() {
242 let token; 234 let token;
243 token = this.userInfo.isToken || uni.getStorageSync('userInfo').isToken || undefined; 235 token = this.userInfo.isToken || uni.getStorageSync('userInfo').isToken || undefined;
244 // #ifdef H5 236 // #ifdef H5
@@ -247,26 +239,19 @@ @@ -247,26 +239,19 @@
247 if (!token) return uni.$u.toast('请登录后上传图片'); 239 if (!token) return uni.$u.toast('请登录后上传图片');
248 plus.gallery.pick( 240 plus.gallery.pick(
249 (path) => { 241 (path) => {
250 - console.log(path)  
251 this.showSelectType = false 242 this.showSelectType = false
252 - uni.uploadFile({  
253 - url: `${baseUrl.baseUrl}/yt/oss/upload`,  
254 - filePath: path,  
255 - name: 'file',  
256 - header: { 243 + useUploadFile(`${baseUrl.baseUrl}/yt/oss/upload`, path, 'file', {}, {
257 'content-type': 'multipart/form-data', 244 'content-type': 'multipart/form-data',
258 Authorization: 'Bearer ' + token 245 Authorization: 'Bearer ' + token
259 - },  
260 - formData: {},  
261 - success: res => { 246 + })
  247 + .then(res => {
262 let objImage = JSON.parse(res.data); 248 let objImage = JSON.parse(res.data);
263 this.avatar = objImage.fileStaticUri; 249 this.avatar = objImage.fileStaticUri;
264 uni.$u.toast('头像上传成功'); 250 uni.$u.toast('头像上传成功');
265 - }  
266 - }); 251 + })
267 }, 252 },
268 function(e) { 253 function(e) {
269 - console.log('取消选择图片'); 254 + uni.$u.toast('您取消选择图片');
270 }, { 255 }, {
271 filter: 'image' 256 filter: 'image'
272 } 257 }
@@ -281,9 +266,7 @@ @@ -281,9 +266,7 @@
281 }; 266 };
282 api.loginApi.deleteBindApi(httpData).then(res => { 267 api.loginApi.deleteBindApi(httpData).then(res => {
283 if (res) { 268 if (res) {
284 - uni.showToast({  
285 - title: '解绑成功'  
286 - }); 269 + uni.$u.toast('解绑成功');
287 this.showBind = false; 270 this.showBind = false;
288 this.isJudgeBindBtn = false; 271 this.isJudgeBindBtn = false;
289 uni.reLaunch({ 272 uni.reLaunch({
@@ -291,9 +274,7 @@ @@ -291,9 +274,7 @@
291 }); 274 });
292 this.emptyUserInfo(); 275 this.emptyUserInfo();
293 } else { 276 } else {
294 - uni.showToast({  
295 - title: '解绑失败'  
296 - }); 277 + uni.$u.toast('解绑失败');
297 this.showBind = false; 278 this.showBind = false;
298 } 279 }
299 }); 280 });
@@ -334,52 +315,22 @@ @@ -334,52 +315,22 @@
334 token = window.sessionStorage.getItem('userInfo').isToken; 315 token = window.sessionStorage.getItem('userInfo').isToken;
335 // #endif 316 // #endif
336 if (!token) return uni.$u.toast('请登录后上传图片'); 317 if (!token) return uni.$u.toast('请登录后上传图片');
337 - uni.chooseImage({ 318 + useChooseImage({
338 count: 1, 319 count: 1,
339 sizeType: ['compressed'], 320 sizeType: ['compressed'],
340 - sourceType: ['camera', 'album'],  
341 - success: res => {  
342 - const tempFilePaths = res.tempFilePaths;  
343 - //限制上传的图片大小不超过5M  
344 - let resSize = res.tempFiles[0].size;  
345 - if (resSize > 5242880) {  
346 - uni.showToast({  
347 - title: '上传的图片大小不能超过5M',  
348 - icon: 'none',  
349 - duration: 2000,  
350 - mask: true  
351 - });  
352 - return;  
353 - }  
354 - //获取图片扩展名  
355 - const fileTxt = res.tempFilePaths[0].split('.').pop();  
356 - const judgeType = fileTxt == 'jpg' || fileTxt == 'jpeg' || fileTxt == 'png';  
357 - if (!judgeType) {  
358 - uni.showToast({  
359 - title: '请上传指定图片类型（jpg、jpeg、png）',  
360 - icon: 'none',  
361 - duration: 2000,  
362 - mask: true  
363 - });  
364 - return;  
365 - }  
366 - uni.uploadFile({  
367 - url: `${baseUrl.baseUrl}/yt/oss/upload`,  
368 - filePath: tempFilePaths[0],  
369 - name: 'file',  
370 - header: {  
371 - 'content-type': 'multipart/form-data',  
372 - Authorization: 'Bearer ' + token  
373 - },  
374 - formData: {},  
375 - success: res => {  
376 - let objImage = JSON.parse(res.data);  
377 - this.avatar = objImage.fileStaticUri;  
378 - uni.$u.toast('头像上传成功');  
379 - }  
380 - });  
381 - },  
382 - }); 321 + sourceType: ['camera', 'album']
  322 + }).then((res) => {
  323 + useFileValidate(res[0], 5242880)
  324 + useUploadFile(`${baseUrl.baseUrl}/yt/oss/upload`, res[0].path, 'file', {}, {
  325 + 'content-type': 'multipart/form-data',
  326 + Authorization: 'Bearer ' + token
  327 + })
  328 + .then(res => {
  329 + let objImage = JSON.parse(res.data);
  330 + this.avatar = objImage.fileStaticUri;
  331 + uni.$u.toast('头像上传成功');
  332 + })
  333 + })
383 }, 334 },
384 onSubmitFunc() { 335 onSubmitFunc() {
385 let httpData = { 336 let httpData = {
@@ -395,15 +346,10 @@ @@ -395,15 +346,10 @@
395 const resp = await api.loginApi.postPersonalInfoApi(httpData) 346 const resp = await api.loginApi.postPersonalInfoApi(httpData)
396 if (res) { 347 if (res) {
397 this.setUserInfo(resp); 348 this.setUserInfo(resp);
398 - uni.showToast({  
399 - title: '更新个人资料成功~',  
400 - icon: 'none' 349 + uni.navigateBack({
  350 + delta: 1
401 }); 351 });
402 - setTimeout(() => {  
403 - uni.navigateBack({  
404 - delta: 1  
405 - });  
406 - }, 500); 352 + uni.$u.toast('更新个人资料成功~');
407 } 353 }
408 }) 354 })
409 .catch(errors => { 355 .catch(errors => {
@@ -417,7 +363,6 @@ @@ -417,7 +363,6 @@
417 this.showDate = false; 363 this.showDate = false;
418 this.myInfoModel.userInfo.accountExpireTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss'); 364 this.myInfoModel.userInfo.accountExpireTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
419 }, 365 },
420 - //格式化日期  
421 formatter(type, value) { 366 formatter(type, value) {
422 if (type === 'year') { 367 if (type === 'year') {
423 return `${value}年`; 368 return `${value}年`;
@@ -465,4 +410,4 @@ @@ -465,4 +410,4 @@
465 width: 663rpx !important; 410 width: 663rpx !important;
466 } 411 }
467 } 412 }
468 -</style> 413 +</style>
@@ -19,12 +19,13 @@ @@ -19,12 +19,13 @@
19 } 19 }
20 } 20 }
21 21
22 -.f__login { 22 +.login-body {
  23 + margin-top: 40rpx;
23 padding: 0 30rpx; 24 padding: 0 30rpx;
24 - .loginPhone { 25 + .login-phone {
25 .form-row { 26 .form-row {
26 margin-top: 30rpx; 27 margin-top: 30rpx;
27 - .getvcode { 28 + .verify-code {
28 font-family: PingFangSC-Regular, PingFang SC; 29 font-family: PingFangSC-Regular, PingFang SC;
29 font-weight: 400; 30 font-weight: 400;
30 font-size: 14px; 31 font-size: 14px;