简柏林 / thingskit-app · Commits

Commit 4e1d21ac2440047c27d714993b93f9e129ec22b4

Authored by caozhenrui
1 parent ee49f204

fix: 修复个人资料表单验证

Inline Side-by-side
Showing 1 changed file with 261 additions and 227 deletions
@@ -3,61 +3,52 @@ @@ -3,61 +3,52 @@
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 <public-module></public-module> 4 <public-module></public-module>
5 <view @click="upAvatar" class="u-flex set-main"> 5 <view @click="upAvatar" class="u-flex set-main">
6 - <view class="main-image"><image class="image" :src="avatar || '../../static/logo.png'"></image></view>  
7 - <view class="main-right-image"><image class="image" src="../../static/arrow-right.png"></image></view> 6 + <view class="main-image">
  7 + <image class="image" :src="avatar || '../../static/logo.png'"></image>
  8 + </view>
  9 + <view class="main-right-image">
  10 + <image class="image" src="../../static/arrow-right.png"></image>
  11 + </view>
8 </view> 12 </view>
9 <view class="u-m-t-20 basic-text"><text class="text">基本资料</text></view> 13 <view class="u-m-t-20 basic-text"><text class="text">基本资料</text></view>
10 <view class="basic-main"> 14 <view class="basic-main">
11 - <u--form labelPosition="left" :model="myInfoModel">  
12 - <u-form-item labelWidth="80px" label="真实姓名" prop="userInfo.realName" borderBottom ref="item1">  
13 - <u--input placeholder="请输入真实姓名" v-model="myInfoModel.userInfo.realName" border="none"></u--input> 15 + <u--form labelPosition="left" :model="myInfoModel" ref="myForm">
  16 + <u-form-item labelWidth="80px" label="真实姓名" prop="realName" borderBottom ref="item1">
  17 + <u--input placeholder="请输入真实姓名" v-model="myInfoModel.realName" border="none"></u--input>
14 </u-form-item> 18 </u-form-item>
15 - <u-form-item labelWidth="80px" label="手机号码" prop="userInfo.phoneNumber" borderBottom ref="item1">  
16 - <u--input placeholder="请输入手机号码" v-model="myInfoModel.userInfo.phoneNumber" border="none"></u--input> 19 + <u-form-item labelWidth="80px" label="手机号码" prop="phoneNumber" borderBottom ref="item1">
  20 + <u--input placeholder="请输入手机号码" v-model="myInfoModel.phoneNumber" border="none"></u--input>
17 </u-form-item> 21 </u-form-item>
18 - <u-form-item labelWidth="80px" label="用户账号 " prop="userInfo.username" borderBottom ref="item1">  
19 - <u--input disabled placeholder="请输入用户账号 " v-model="myInfoModel.userInfo.username" border="none"></u--input> 22 + <u-form-item class="userName" labelWidth="80px" label="用户账号" prop="username" borderBottom ref="item1">
  23 + <u--input disabled placeholder="请输入用户账号 " v-model="myInfoModel.username" border="none">
  24 + </u--input>
20 </u-form-item> 25 </u-form-item>
21 - <u-form-item labelWidth="80px" label="邮箱地址" prop="userInfo.email" borderBottom ref="item1">  
22 - <u--input placeholder="请输入邮箱地址" v-model="myInfoModel.userInfo.email" border="none"></u--input> 26 + <u-form-item labelWidth="80px" label="邮箱地址" prop="email" borderBottom ref="item1">
  27 + <u--input placeholder="请输入邮箱地址" v-model="myInfoModel.email" border="none"></u--input>
23 </u-form-item> 28 </u-form-item>
24 - <u-form-item  
25 - @click=" 29 + <u-form-item @click="
26 showDate = true; 30 showDate = true;
27 hideKeyboard(); 31 hideKeyboard();
28 - "  
29 - labelWidth="80px"  
30 - label="有效期"  
31 - prop="userInfo.accountExpireTime"  
32 - ref="item1"  
33 - >  
34 - <u--input v-model="myInfoModel.userInfo.accountExpireTime" placeholder="请选择有效期" border="none"></u--input>  
35 - <u-datetime-picker  
36 - :formatter="formatter"  
37 - :show="showDate"  
38 - :value="datetime"  
39 - mode="dateTime"  
40 - closeOnClickOverlay  
41 - @confirm="dateConfirm"  
42 - @cancel="dateClose"  
43 - @close="dateClose"  
44 - ></u-datetime-picker> 32 + " labelWidth="80px" label="有效期" prop="accountExpireTime" ref="item1">
  33 + <u--input v-model="myInfoModel.accountExpireTime" placeholder="请选择有效期" border="none">
  34 + </u--input>
  35 + <u-datetime-picker :formatter="formatter" :show="showDate" :value="datetime" mode="dateTime"
  36 + closeOnClickOverlay @confirm="dateConfirm" @cancel="dateClose" @close="dateClose">
  37 + </u-datetime-picker>
45 </u-form-item> 38 </u-form-item>
46 </u--form> 39 </u--form>
47 </view> 40 </view>
48 <view class="basic-bottom u-flex"> 41 <view class="basic-bottom u-flex">
49 <view class="item" v-if="info.data.isThirdLoginAndNoDind && isJudgeBindBtn"> 42 <view class="item" v-if="info.data.isThirdLoginAndNoDind && isJudgeBindBtn">
50 - <button class="submit" size="default" @click="clearAccountFunc" :style="{ background: InfoColor }"><text class="un-bind-text">解绑</text></button> 43 + <button class="submit" size="default" @click="clearAccountFunc" :style="{ background: InfoColor }"><text
  44 + class="un-bind-text">解绑</text></button>
51 </view> 45 </view>
52 - <view  
53 - class="item"  
54 - style="margin-right: 60rpx;"  
55 - :style="[ 46 + <view class="item" style="margin-right: 60rpx;" :style="[
56 { position: info.data.isThirdLoginAndNoDind && isJudgeBindBtn ? '' : 'relative' }, 47 { position: info.data.isThirdLoginAndNoDind && isJudgeBindBtn ? '' : 'relative' },
57 { right: info.data.isThirdLoginAndNoDind && isJudgeBindBtn ? '' : '-190rpx' } 48 { right: info.data.isThirdLoginAndNoDind && isJudgeBindBtn ? '' : '-190rpx' }
58 - ]"  
59 - >  
60 - <button class="submit" size="default" @click="onSubmitFunc" :style="{ background: PrimaryColor }"><text class="un-bind-text">确认</text></button> 49 + ]">
  50 + <button class="submit" size="default" @click="onSubmitFunc" :style="{ background: PrimaryColor }"><text
  51 + class="un-bind-text">确认</text></button>
61 </view> 52 </view>
62 </view> 53 </view>
63 <!-- #ifdef MP --> 54 <!-- #ifdef MP -->
@@ -78,214 +69,257 @@ @@ -78,214 +69,257 @@
78 </template> 69 </template>
79 70
80 <script> 71 <script>
81 -import { mapMutations } from 'vuex';  
82 -import baseUrl from '@/config/baseUrl.js';  
83 -import { mapState } from 'vuex'; 72 + import {
  73 + mapMutations
  74 + } from 'vuex';
  75 + import baseUrl from '@/config/baseUrl.js';
  76 + import {
  77 + mapState
  78 + } from 'vuex';
  79 +
  80 + export default {
  81 +
  82 + data() {
  83 + return {
  84 + showBind: false,
  85 + PrimaryColor: '#377DFF', //主题色
  86 + InfoColor: '#00C9A7', //主题色
  87 + myInfoModel: {
84 88
85 -export default {  
86 - data() {  
87 - return {  
88 - showBind: false,  
89 - PrimaryColor: '#377DFF', //主题色  
90 - InfoColor: '#00C9A7', //主题色  
91 - myInfoModel: {  
92 - userInfo: {  
93 realName: '', 89 realName: '',
94 phoneNumber: '', 90 phoneNumber: '',
95 username: '', 91 username: '',
96 email: '', 92 email: '',
97 accountExpireTime: '' 93 accountExpireTime: ''
98 - }  
99 - },  
100 - showDate: false,  
101 - dateTime: Number(new Date()),  
102 - avatar: '',  
103 - id: '',  
104 - info: {},  
105 - openIds: '',  
106 - isUpdatePersonOrLoginInfo: false,  
107 - isJudgeBindBtn: true  
108 - };  
109 - },  
110 - onLoad(e) {  
111 - if (e.data !== null) {  
112 - let params = JSON.parse(e.data);  
113 - this.info = params;  
114 - this.myInfoModel.userInfo.realName = params.data.realName;  
115 - this.myInfoModel.userInfo.phoneNumber = params.data.phoneNumber;  
116 - this.myInfoModel.userInfo.username = params.data.username;  
117 - this.myInfoModel.userInfo.email = params.data.email;  
118 - this.myInfoModel.userInfo.accountExpireTime = params.data.accountExpireTime;  
119 - this.avatar = params.data.avatar == undefined ? '../../static/logo.png' : params.data.avatar;  
120 - this.id = params.data.userId;  
121 - }  
122 - },  
123 - onShow() {  
124 - let getOpenId = getApp().globalData.openId;  
125 - if (getOpenId) {  
126 - this.openIds = getOpenId;  
127 - console.log('OPenid', this.openIds);  
128 - }  
129 - },  
130 - computed: {  
131 - ...mapState(['userInfo'])  
132 - },  
133 - methods: {  
134 - ...mapMutations(['setUserInfo']),  
135 - confrimBind(e) {  
136 - if (e) {  
137 - //解绑  
138 - let httpData = {  
139 - appUserId: e.data?.userId,  
140 - thirdUserId: e.data?.thirdUserId == null ? this.openIds : e.data?.thirdUserId  
141 - };  
142 - uni.$u.http.delete('/yt/third', httpData).then(res => {  
143 - if (res) {  
144 - uni.showToast({  
145 - title: '解绑成功'  
146 - });  
147 - this.showBind = false;  
148 - this.isJudgeBindBtn = false;  
149 - } else {  
150 - uni.showToast({  
151 - title: '解绑失败'  
152 - });  
153 - this.showBind = false;  
154 - }  
155 - }); 94 +
  95 + },
  96 +
  97 + rules: {
  98 + phoneNumber: [{
  99 + required: true,
  100 + message: "请输入正确的手机号码",
  101 + trigger: "change",
  102 + }, {
  103 + pattern: /^1[0-9]{10}$/,
  104 + message: "请输入正确的手机号码"
  105 + }
  106 +
  107 + ],
  108 + email: [{
  109 + required: true,
  110 + message: "请输入正确的邮箱号",
  111 + trigger: "change",
  112 + }, {
  113 + pattern: /^[0-9a-zA-Z]+@(([0-9a-zA-Z]+)[.])+[a-z]{2,4}$/,
  114 + message: "请输入正确的邮箱号"
  115 + }
  116 +
  117 + ],
  118 +
  119 + },
  120 + showDate: false,
  121 + dateTime: Number(new Date()),
  122 + avatar: '',
  123 + id: '',
  124 + info: {},
  125 + openIds: '',
  126 + isUpdatePersonOrLoginInfo: false,
  127 + isJudgeBindBtn: true
  128 + };
  129 + },
  130 + onReady() {
  131 + this.$refs.myForm.setRules(this.rules)
  132 + },
  133 + onLoad(e) {
  134 + console.log(e);
  135 + if (e.data !== null) {
  136 + let params = JSON.parse(e.data);
  137 + this.info = params;
  138 + this.myInfoModel.realName = params.data.realName;
  139 + this.myInfoModel.phoneNumber = params.data.phoneNumber;
  140 + this.myInfoModel.username = params.data.username;
  141 + this.myInfoModel.email = params.data.email;
  142 + this.myInfoModel.accountExpireTime = params.data.accountExpireTime;
  143 + this.avatar = params.data.avatar == undefined ? '../../static/logo.png' : params.data.avatar;
  144 + this.id = params.data.userId;
156 } 145 }
157 }, 146 },
158 - clearAccountFunc() {  
159 - this.showBind = true; 147 + onShow() {
  148 + let getOpenId = getApp().globalData.openId;
  149 + if (getOpenId) {
  150 + this.openIds = getOpenId;
  151 + console.log('OPenid', this.openIds);
  152 + }
160 }, 153 },
161 - // 修改头像  
162 - async upAvatar() {  
163 - let token;  
164 - token = this.userInfo.isToken || uni.getStorageSync('userInfo').isToken || undefined;  
165 - // #ifdef H5  
166 - token = window.sessionStorage.getItem('userInfo').isToken;  
167 - // #endif  
168 - if (!token) return uni.$u.toast('请登录后上传图片');  
169 - uni.chooseImage({  
170 - count: 1,  
171 - sourceType: ['camera', 'album'],  
172 - success: res => {  
173 - const tempFilePaths = res.tempFilePaths;  
174 - //限制上传的图片大小不超过5M  
175 - let resSize = res.tempFiles[0].size;  
176 - if (resSize > 5242880) {  
177 - uni.showToast({  
178 - title: '上传的图片大小不能超过5M',  
179 - icon: 'none',  
180 - duration: 2000,  
181 - mask: true  
182 - });  
183 - return;  
184 - }  
185 - //获取图片扩展名  
186 - const fileTxt = res.tempFilePaths[0].split('.').pop();  
187 - const judgeType = fileTxt == 'jpg' || fileTxt == 'jpeg' || fileTxt == 'png';  
188 - if (!judgeType) {  
189 - uni.showToast({  
190 - title: '请上传指定图片类型（jpg、jpeg、png）',  
191 - icon: 'none',  
192 - duration: 2000,  
193 - mask: true  
194 - });  
195 - return;  
196 - }  
197 - uni.uploadFile({  
198 - url: `${baseUrl.baseUrl}/yt/oss/upload`,  
199 - filePath: tempFilePaths[0],  
200 - name: 'file',  
201 - header: {  
202 - 'content-type': 'multipart/form-data',  
203 - Authorization: 'Bearer ' + token  
204 - },  
205 - formData: {},  
206 - success: res => {  
207 - let objImage = JSON.parse(res.data);  
208 - this.avatar = objImage.fileStaticUri;  
209 - uni.$u.toast('头像上传成功'); 154 + computed: {
  155 + ...mapState(['userInfo'])
  156 + },
  157 + methods: {
  158 + ...mapMutations(['setUserInfo']),
  159 + confrimBind(e) {
  160 + if (e) {
  161 + //解绑
  162 + let httpData = {
  163 + appUserId: e.data?.userId,
  164 + thirdUserId: e.data?.thirdUserId == null ? this.openIds : e.data?.thirdUserId
  165 + };
  166 + uni.$u.http.delete('/yt/third', httpData).then(res => {
  167 + if (res) {
  168 + uni.showToast({
  169 + title: '解绑成功'
  170 + });
  171 + this.showBind = false;
  172 + this.isJudgeBindBtn = false;
  173 + } else {
  174 + uni.showToast({
  175 + title: '解绑失败'
  176 + });
  177 + this.showBind = false;
210 } 178 }
211 }); 179 });
212 } 180 }
213 - });  
214 - },  
215 - onSubmitFunc() {  
216 - let httpData = {  
217 - avatar: this.avatar,  
218 - email: this.myInfoModel.userInfo.email,  
219 - id: this.id,  
220 - phoneNumber: this.myInfoModel.userInfo.phoneNumber,  
221 - realName: this.myInfoModel.userInfo.realName  
222 - };  
223 - uni.$u.http  
224 - .put('/yt/user/center', httpData)  
225 - .then(res => {  
226 - if (res) {  
227 - this.setUserInfo(res);  
228 - uni.showToast({  
229 - title: '更新个人资料成功~',  
230 - icon: 'none'  
231 - });  
232 - setTimeout(() => {  
233 - uni.navigateBack({  
234 - delta: 1 181 + },
  182 + clearAccountFunc() {
  183 + this.showBind = true;
  184 + },
  185 + // 修改头像
  186 + async upAvatar() {
  187 + let token;
  188 + token = this.userInfo.isToken || uni.getStorageSync('userInfo').isToken || undefined;
  189 + // #ifdef H5
  190 + token = window.sessionStorage.getItem('userInfo').isToken;
  191 + // #endif
  192 + if (!token) return uni.$u.toast('请登录后上传图片');
  193 + uni.chooseImage({
  194 + count: 1,
  195 + sourceType: ['camera', 'album'],
  196 + success: res => {
  197 + const tempFilePaths = res.tempFilePaths;
  198 + //限制上传的图片大小不超过5M
  199 + let resSize = res.tempFiles[0].size;
  200 + if (resSize > 5242880) {
  201 + uni.showToast({
  202 + title: '上传的图片大小不能超过5M',
  203 + icon: 'none',
  204 + duration: 2000,
  205 + mask: true
235 }); 206 });
236 - }, 500); 207 + return;
  208 + }
  209 + //获取图片扩展名
  210 + const fileTxt = res.tempFilePaths[0].split('.').pop();
  211 + const judgeType = fileTxt == 'jpg' || fileTxt == 'jpeg' || fileTxt == 'png';
  212 + if (!judgeType) {
  213 + uni.showToast({
  214 + title: '请上传指定图片类型（jpg、jpeg、png）',
  215 + icon: 'none',
  216 + duration: 2000,
  217 + mask: true
  218 + });
  219 + return;
  220 + }
  221 + uni.uploadFile({
  222 + url: `${baseUrl.baseUrl}/yt/oss/upload`,
  223 + filePath: tempFilePaths[0],
  224 + name: 'file',
  225 + header: {
  226 + 'content-type': 'multipart/form-data',
  227 + Authorization: 'Bearer ' + token
  228 + },
  229 + formData: {},
  230 + success: res => {
  231 + let objImage = JSON.parse(res.data);
  232 + this.avatar = objImage.fileStaticUri;
  233 + uni.$u.toast('头像上传成功');
  234 + }
  235 + });
237 } 236 }
238 - })  
239 - .catch(e => {  
240 - uni.$u.toast(e.data.message);  
241 }); 237 });
242 - },  
243 - dateClose() {  
244 - this.showDate = false;  
245 - },  
246 - dateConfirm(e) {  
247 - this.showDate = false;  
248 - this.myInfoModel.userInfo.accountExpireTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');  
249 - },  
250 - //格式化日期  
251 - formatter(type, value) {  
252 - if (type === 'year') {  
253 - return `${value}年`;  
254 - }  
255 - if (type === 'month') {  
256 - return `${value}月`;  
257 - }  
258 - if (type === 'day') {  
259 - return `${value}日`;  
260 - }  
261 - if (type === 'hour') {  
262 - return `${value}时`;  
263 - }  
264 - if (type === 'minute') {  
265 - return `${value}分`; 238 + },
  239 + onSubmitFunc() {
  240 + let httpData = {
  241 + avatar: this.avatar,
  242 + email: this.myInfoModel.email,
  243 + id: this.id,
  244 + phoneNumber: this.myInfoModel.phoneNumber,
  245 + realName: this.myInfoModel.realName
  246 + };
  247 + this.$refs.myForm.validate().then(res => {
  248 + uni.$u.http
  249 + .put('/yt/user/center', httpData)
  250 + .then(res => {
  251 + if (res) {
  252 + this.setUserInfo(res);
  253 + uni.showToast({
  254 + title: '更新个人资料成功~',
  255 + icon: 'none'
  256 + });
  257 + setTimeout(() => {
  258 + uni.navigateBack({
  259 + delta: 1
  260 + });
  261 + }, 500);
  262 + }
  263 + }).catch(e => {
  264 + uni.$u.toast(e.data.message);
  265 + });
  266 + }).catch(errors => {
  267 + uni.$u.toast('校验失败')
  268 + })
  269 +
  270 + },
  271 + dateClose() {
  272 + this.showDate = false;
  273 + },
  274 + dateConfirm(e) {
  275 + this.showDate = false;
  276 + this.myInfoModel.userInfo.accountExpireTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
  277 + },
  278 + //格式化日期
  279 + formatter(type, value) {
  280 + if (type === 'year') {
  281 + return `${value}年`;
  282 + }
  283 + if (type === 'month') {
  284 + return `${value}月`;
  285 + }
  286 + if (type === 'day') {
  287 + return `${value}日`;
  288 + }
  289 + if (type === 'hour') {
  290 + return `${value}时`;
  291 + }
  292 + if (type === 'minute') {
  293 + return `${value}分`;
  294 + }
  295 + return value;
  296 + },
  297 + //隐藏输入框
  298 + hideKeyboard() {
  299 + uni.hideKeyboard();
266 } 300 }
267 - return value;  
268 - },  
269 - //隐藏输入框  
270 - hideKeyboard() {  
271 - uni.hideKeyboard();  
272 } 301 }
273 - }  
274 -}; 302 + };
275 </script> 303 </script>
276 304
277 <style lang="scss" scoped> 305 <style lang="scss" scoped>
278 -@import './static/set.scss';  
279 -/deep/ .u-line {  
280 - width: 662rpx !important;  
281 -}  
282 -/deep/ .u-form-item {  
283 - height: 100rpx !important;  
284 -}  
285 -/deep/ .u-form-item:nth-child(3) {  
286 - .u-form-item__body {  
287 - background: #f5f7fa !important;  
288 - width: 663rpx !important ; 306 + .userName{
  307 + background-color: green;
  308 + }
  309 + @import './static/set.scss';
  310 +
  311 + /deep/ .u-line {
  312 + width: 662rpx !important;
  313 + }
  314 +
  315 + /deep/ .u-form-item {
  316 + height: 100rpx !important;
  317 + }
  318 +
  319 + /deep/ .u-form-item:nth-child(3) {
  320 + .u-form-item__body {
  321 + background: #f5f7fa !important;
  322 + width: 663rpx !important;
  323 + }
289 } 324 }
290 -}  
291 </style> 325 </style>