简柏林 / 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 156 {
157 157 "path": "other/code",
158 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 4
5 5 /**
6 6 登录密码正则验证
7   - 最短8位，最长16位
8   - 必须包含1个数字
9   - 必须包含1个小写字母
10   - 必须包含1个大写字母
  7 + 最短8位，最长16位
  8 + 必须包含1个数字
  9 + 必须包含1个小写字母
  10 + 必须包含1个大写字母
11 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 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 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 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 65 // isOpenSetting 默认false:不检验授权，true:检验授权后获取地址
66 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 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 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 147 //封装uniapp跳转 navigateTo
148   -export const useNavigateTo = (path,param)=>{
  148 +export const useNavigateTo = (path, param) => {
149 149 if (!path) return
150   - if(param){
  150 + if (param) {
151 151 uni.navigateTo({
152 152 url: path + encodeURIComponent(JSON.stringify(param))
153 153 });
154   - }else{
  154 + } else {
155 155 uni.navigateTo({
156   - url:path
  156 + url: path
157 157 });
158 158 }
159 159 }
160 160
161 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 +}
\ No newline at end of file
... ...
... ... @@ -62,15 +62,15 @@ export default {
62 62 },
63 63 //获取验证码
64 64 async getVerifyCode() {
  65 + const phoneRegular = /^1\d{10}$/;
65 66 if (this.readonly) {
66 67 useShowToast('验证码已发送~')
67 68 }
68 69 if (!this.loginForm.phone) {
69   - useShowToast('请输入手机号~')
  70 + return useShowToast('请输入手机号~')
70 71 }
71   - const phoneRegular = /^1\d{10}$/;
72 72 if (!phoneRegular.test(this.loginForm.phone)) {
73   - useShowToast('手机号格式不正确~')
  73 + return useShowToast('手机号格式不正确~')
74 74 }
75 75 // 获取验证码接口
76 76 const res = await api.loginApi.postPhoneCodeApi(this.loginForm.phone)
... ...
... ... @@ -2,44 +2,40 @@
2 2 <view class="find-password-page">
3 3 <public-module></public-module>
4 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 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 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 12 </view>
13 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 15 <template slot="suffix">
16   - <view @click="getVcode" class="getvcode">{{ codeText }}</view>
  16 + <view @click="getVerifyCode" class="verify-code">{{ codeText }}</view>
17 17 </template>
18 18 </u-input>
19 19 </view>
20 20 <button class="submit" size="default" @click="onNextSubmit"><text style="color:#fff">下一步</text></button>
21 21 </view>
22 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 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 27 <template slot="suffix">
28 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 30 </view>
33 31 </template>
34 32 </u-input>
35 33 </view>
36 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 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 39 </view>
44 40 </template>
45 41 </u-input>
... ... @@ -53,25 +49,42 @@
53 49 <script>
54 50 import api from '@/api/index.js'
55 51 import { loginPasswordReg } from '@/plugins/utils.js'
  52 + import { useShowToast,useShowModal,useReLaunch } from '@/plugins/utils.js'
56 53
57 54 var clear;
58 55 export default {
59 56 data() {
60 57 return {
  58 + forgetForm:{
  59 + phone: '',
  60 + verifyCode: '',
  61 + password: '',
  62 + repeatPassword: '',
  63 + },
61 64 readonly: false,
62 65 codeText: '发送验证码',
63   - phone: '', //号码
64   - vCode: '', //验证码
65 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 85 methods: {
73 86 //验证码按钮文字状态
74   - getCodeState() {
  87 + verifyCodeCountDown() {
75 88 const _this = this;
76 89 this.readonly = true;
77 90 this.codeText = '60s后重新获取';
... ... @@ -87,114 +100,60 @@
87 100 }, 1000);
88 101 },
89 102 //获取验证码
90   - getVcode() {
  103 + getVerifyCode() {
  104 + const phoneRegular = /^1\d{10}$/;
91 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 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 120 onNextSubmit() {
127 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 128 this.nextStatus = true;
155 129 },
156 130 showPhone() {
157 131 this.nextStatus = false;
158 132 },
159 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 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 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 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 5 <!-- #ifdef MP-WEIXIN -->
6 6 <view @click="upAvatar" class="u-flex set-main">
7 7 <view class="main-image">
8   - <image class="image" :src="avatar || '../../static/logo.png'"></image>
  8 + <image class="image" :src="uploadImage"></image>
9 9 </view>
10 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 12 </view>
13 13 </view>
14 14 <!-- #endif -->
15 15 <!-- #ifdef APP-PLUS -->
  16 + <!-- 这里上传写两道的原因是，如果是app端，则兼容打开相机拍照上传 -->
16 17 <view @click="upAppAvatar" class="u-flex set-main">
17 18 <view class="main-image">
18   - <image class="image" :src="avatar || '../../static/logo.png'"></image>
  19 + <image class="image" :src="uploadImage"></image>
19 20 </view>
20 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 23 </view>
23 24 </view>
24 25 <!-- #endif -->
25 26 <view class="u-m-t-20 basic-text"><text class="text">基本资料</text></view>
26 27 <view class="basic-main">
27 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 30 <u--input placeholder="请输入真实姓名" v-model="myInfoModel.realName" border="none"></u--input>
30 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 33 <u--input placeholder="请输入手机号码" v-model="myInfoModel.phoneNumber" border="none"></u--input>
33 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 36 <u--input disabled placeholder="请输入用户账号 " v-model="myInfoModel.username" border="none"></u--input>
36 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 39 <u--input placeholder="请输入邮箱地址" v-model="myInfoModel.email" border="none"></u--input>
39 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 43 <u--input v-model="myInfoModel.accountExpireTime" placeholder="请选择有效期" border="none"></u--input>
45 44 <u-datetime-picker :formatter="formatter" :show="showDate" :value="datetime" mode="dateTime"
46 45 closeOnClickOverlay @confirm="dateConfirm" @cancel="dateClose" @close="dateClose">
... ... @@ -61,7 +60,7 @@
61 60 class="un-bind-text">确认</text></button>
62 61 </view>
63 62 </view>
64   - <!-- #ifdef MP -->
  63 + <!-- #ifdef MP-WEIXIN -->
65 64 <view class="u-m-t-40"><text style="visibility: hidden;">#</text></view>
66 65 <!-- #endif -->
67 66 <!-- 解绑账号 -->
... ... @@ -90,6 +89,12 @@
90 89 } from 'vuex';
91 90 import api from '@/api/index.js'
92 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 99 export default {
95 100 data() {
... ... @@ -114,7 +119,6 @@
114 119 email: '',
115 120 accountExpireTime: ''
116 121 },
117   -
118 122 rules: {
119 123 phoneNumber: [{
120 124 required: true,
... ... @@ -154,13 +158,9 @@
154 158 onLoad(e) {
155 159 if (e.data !== null) {
156 160 let params = JSON.parse(e.data);
  161 + for (let i in this.myInfoModel) Reflect.set(this.myInfoModel, i, params.data[i])
157 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 164 this.id = params.data.userId;
165 165 }
166 166 },
... ... @@ -168,24 +168,22 @@
168 168 let getOpenId = getApp().globalData.openId;
169 169 if (getOpenId) {
170 170 this.openIds = getOpenId;
171   - console.log('OPenid', this.openIds);
172 171 }
173 172 },
174 173 computed: {
175   - ...mapState(['userInfo'])
  174 + uploadImage() {
  175 + return this.avatar || '/static/logo.png'
  176 + }
176 177 },
177 178 methods: {
  179 + ...mapState(['userInfo']),
  180 + ...mapMutations(['setUserInfo', 'emptyUserInfo']),
178 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 188 async requestAndroidPermission(permissionID, e) {
191 189 let resp = await permission.requestAndroidPermission(permissionID, e);
... ... @@ -193,14 +191,14 @@
193 191 this.modify();
194 192 } else if (resp == 1) {
195 193 if (e == 1) {
196   - this.chooseImage1()
  194 + this.nativeCameraChooseFile()
197 195 } else {
198   - this.chooseImage2()
  196 + this.chooseLocalAlbum()
199 197 }
200 198 }
201 199 },
202   - ...mapMutations(['setUserInfo', 'emptyUserInfo']),
203   - chooseImage1() {
  200 + //使用相机上传
  201 + nativeCameraChooseFile() {
204 202 let token;
205 203 token = this.userInfo.isToken || uni.getStorageSync('userInfo').isToken || undefined;
206 204 // #ifdef H5
... ... @@ -213,32 +211,26 @@
213 211 cmr.captureImage(
214 212 (path) => {
215 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 215 'content-type': 'multipart/form-data',
222 216 Authorization: 'Bearer ' + token
223   - },
224   - formData: {},
225   - success: res => {
  217 + })
  218 + .then(res => {
226 219 let objImage = JSON.parse(res.data);
227 220 this.avatar = objImage.fileStaticUri;
228 221 uni.$u.toast('头像上传成功');
229   - }
230   - });
  222 + })
231 223 },
232 224 function(error) {
233   - console.log('Capture image failed: ' + error.message);
  225 + uni.$u.toast('Capture image failed: ' + error.message);
234 226 }, {
235 227 resolution: res,
236 228 format: fmt
237 229 }
238 230 );
239 231 },
240   - //选择相册
241   - chooseImage2() {
  232 + //选择相册上传
  233 + chooseLocalAlbum() {
242 234 let token;
243 235 token = this.userInfo.isToken || uni.getStorageSync('userInfo').isToken || undefined;
244 236 // #ifdef H5
... ... @@ -247,26 +239,19 @@
247 239 if (!token) return uni.$u.toast('请登录后上传图片');
248 240 plus.gallery.pick(
249 241 (path) => {
250   - console.log(path)
251 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 244 'content-type': 'multipart/form-data',
258 245 Authorization: 'Bearer ' + token
259   - },
260   - formData: {},
261   - success: res => {
  246 + })
  247 + .then(res => {
262 248 let objImage = JSON.parse(res.data);
263 249 this.avatar = objImage.fileStaticUri;
264 250 uni.$u.toast('头像上传成功');
265   - }
266   - });
  251 + })
267 252 },
268 253 function(e) {
269   - console.log('取消选择图片');
  254 + uni.$u.toast('您取消选择图片');
270 255 }, {
271 256 filter: 'image'
272 257 }
... ... @@ -281,9 +266,7 @@
281 266 };
282 267 api.loginApi.deleteBindApi(httpData).then(res => {
283 268 if (res) {
284   - uni.showToast({
285   - title: '解绑成功'
286   - });
  269 + uni.$u.toast('解绑成功');
287 270 this.showBind = false;
288 271 this.isJudgeBindBtn = false;
289 272 uni.reLaunch({
... ... @@ -291,9 +274,7 @@
291 274 });
292 275 this.emptyUserInfo();
293 276 } else {
294   - uni.showToast({
295   - title: '解绑失败'
296   - });
  277 + uni.$u.toast('解绑失败');
297 278 this.showBind = false;
298 279 }
299 280 });
... ... @@ -334,52 +315,22 @@
334 315 token = window.sessionStorage.getItem('userInfo').isToken;
335 316 // #endif
336 317 if (!token) return uni.$u.toast('请登录后上传图片');
337   - uni.chooseImage({
  318 + useChooseImage({
338 319 count: 1,
339 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 335 onSubmitFunc() {
385 336 let httpData = {
... ... @@ -395,15 +346,10 @@
395 346 const resp = await api.loginApi.postPersonalInfoApi(httpData)
396 347 if (res) {
397 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 355 .catch(errors => {
... ... @@ -417,7 +363,6 @@
417 363 this.showDate = false;
418 364 this.myInfoModel.userInfo.accountExpireTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
419 365 },
420   - //格式化日期
421 366 formatter(type, value) {
422 367 if (type === 'year') {
423 368 return `${value}年`;
... ... @@ -465,4 +410,4 @@
465 410 width: 663rpx !important;
466 411 }
467 412 }
468   -</style>
  413 +</style>
\ No newline at end of file
... ...
... ... @@ -19,12 +19,13 @@
19 19 }
20 20 }
21 21
22   -.f__login {
  22 +.login-body {
  23 + margin-top: 40rpx;
23 24 padding: 0 30rpx;
24   - .loginPhone {
  25 + .login-phone {
25 26 .form-row {
26 27 margin-top: 30rpx;
27   - .getvcode {
  28 + .verify-code {
28 29 font-family: PingFangSC-Regular, PingFang SC;
29 30 font-weight: 400;
30 31 font-size: 14px;
... ...