简柏林 / 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 3 <!-- 公共组件-每个页面必须引入 -->
4 4 <public-module></public-module>
5 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 12 </view>
9 13 <view class="u-m-t-20 basic-text"><text class="text">基本资料</text></view>
10 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 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 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 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 28 </u-form-item>
24   - <u-form-item
25   - @click="
  29 + <u-form-item @click="
26 30 showDate = true;
27 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 38 </u-form-item>
46 39 </u--form>
47 40 </view>
48 41 <view class="basic-bottom u-flex">
49 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 45 </view>
52   - <view
53   - class="item"
54   - style="margin-right: 60rpx;"
55   - :style="[
  46 + <view class="item" style="margin-right: 60rpx;" :style="[
56 47 { position: info.data.isThirdLoginAndNoDind && isJudgeBindBtn ? '' : 'relative' },
57 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 52 </view>
62 53 </view>
63 54 <!-- #ifdef MP -->
... ... @@ -78,214 +69,257 @@
78 69 </template>
79 70
80 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 89 realName: '',
94 90 phoneNumber: '',
95 91 username: '',
96 92 email: '',
97 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 303 </script>
276 304
277 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 325 </style>
... ...