JP4-8-MyLesson前台前端（三）

Java道经 - 项目 - MyLesson - 前台前端（三）

S05. 导航栏 - 我的

心法：本模块包含用户登录页面（账号登录和手机号验证码登录两种），用户注册页面和用户面板。

用户面板：用户面板是导航页面，当用户点击底部导航栏 “我的” 按钮时进行展示，但该页面需要检测用户的登录状态：

• 若用户未登录：提示 “请先登录”，然后跳转到登录页面。
• 若用户已登录：展示该用户的基本信息。

登录页面：两个登录页面均为非导航页面，无法通过小程序底部的导航栏直接进入，开发时建议在 onLoad() 函数中调用 util 工具中的 isLogin() 方法，该方法检测到用户未登录时，会自动跳入登录页面。

注册页面：注册页面也是非导航页面，无法通过小程序底部的导航栏直接进入，只能通过登录页面的链接点击进入。

E01. 用户面板

心法：用户面板页面用于展示当前登录的用户的信息，部分信息允许直接点击进行修改。

页面要素（自上而下）	描述
基础用户信息	在前端获取并展示当前登录用户的头像（点击可修改），昵称，年龄，星座和省份等
我的课程按钮	跳转到当前用户所购买的全部课程列表的页面
我的订单按钮	跳转到当前用户所购买的全部订单列表的页面
我的收藏按钮	跳转到当前用户所收藏的全部课程列表的页面
我的账号按钮	跳转到当前用户账号相关信息的页面
信息修改列表	在前端获取并展示用户的部分信息，点击均可跳转到对应的修改页面
退出登录按钮	跳转到通过账号密码登录的页面

图示如下：

武技：开发用户面板页面。

1. 开发 pages/user/user.json 文件：

{"usingComponents": {"van-divider": "@vant/weapp/divider/index","van-image": "@vant/weapp/image/index","van-grid": "@vant/weapp/grid/index","van-grid-item": "@vant/weapp/grid-item/index","van-row": "@vant/weapp/row/index","van-col": "@vant/weapp/col/index","van-tag": "@vant/weapp/tag/index","van-button": "@vant/weapp/button/index","van-cell-group": "@vant/weapp/cell-group/index","van-cell": "@vant/weapp/cell/index","van-uploader": "@vant/weapp/uploader/index"}
}

2. 开发 pages/user/user.wxml 文件：

<scroll-view><view class="user-head"><van-row><van-col class="avatar-col" wx:if="{{user['avatar']}}" span="8"><van-uploader file-list="{{avatarFile}}" bind:after-read="uploadAvatar"max-count="1" accept="image" deletable="{{false}}"><van-image src="{{MINIO_AVATAR}}{{user['avatar']}}"width="100" height="100" fit="cover" round/></van-uploader></van-col><van-col class="nickname-col" span="16"><view>{{user['nickname']}}</view><view><van-tag size="medium" mark type="primary">{{user['age']}}岁</van-tag><van-tag size="medium" mark type="danger">{{user['zodiac']}}</van-tag><van-tag size="medium" mark type="warning">{{user['province']}}</van-tag></view></van-col></van-row></view><view class="operation-btn"><van-grid gutter="20rpx"><van-grid-item text="我的课程" url="/pages/user/video/video"icon="video" link-type="navigateTo"/><van-grid-item text="我的订单" url="/pages/user/order/order"icon="shop-o" link-type="navigateTo"/><van-grid-item text="我的收藏" url="/pages/user/follow/follow"icon="star" link-type="navigateTo"/><van-grid-item text="我的账号" url="/pages/user/account/account"icon="user" link-type="navigateTo"/></van-grid></view><view class="user-body"><van-cell-group><van-cell title="昵称" value="{{user['nickname']}}" url="{{ NICKNAME_UPDATE_URL + user['nickname']}}"title-width="70px" is-link link-type="navigateTo"/><van-cell title="性别" value="{{user['gender'] === 2 ? '保密': user['gender'] === 1 ? '男': '女'}}" url="{{ GENDER_UPDATE_URL + user['gender']}}"title-width="70px" is-link link-type="navigateTo"/><van-cell title="年龄" value="{{user['age']}}" url="{{ AGE_UPDATE_URL + user['age']}}"title-width="70px" is-link link-type="navigateTo"/><van-cell title="星座" value="{{user['zodiac']}}" url="{{ ZODIAC_UPDATE_URL + user['zodiac']}}"title-width="70px" is-link link-type="navigateTo"/><van-cell title="省份" value="{{user['province']}}" url="{{ PROVINCE_UPDATE_URL + user['province']}}"title-width="70px" is-link link-type="navigateTo"/><van-cell title="邮箱" value="{{user['email']}}" url="{{ EMAIL_UPDATE_URL + user['email']}}"title-width="70px" is-link link-type="navigateTo"/><van-cell title="描述" value="{{user['info']}}" url="{{ INFO_UPDATE_URL + user['info']}}"title-width="70px" is-link link-type="navigateTo"/><van-cell title="真实姓名" value="{{user['realname']}}" title-width="70px"/><van-cell title="身份证号" value="{{user['idcard']}}" title-width="70px"/><van-cell title="手机号码" value="{{user['phone']}}" title-width="70px"/></van-cell-group></view><view class="user-foot"><van-button bind:tap="logout" block type="danger">退出登录</van-button></view>
</scroll-view>

3. 开发 pages/user/user.scss 文件：

@import "app";.user-head {margin-top: 40rpx; // 外边距.nickname-col {text-align: left; // 文本居左line-height: 80rpx; // 行高}.van-tag {margin-right: 10rpx; // 外边距}
}.operation-btn {margin: 40rpx 20rpx; // 外边距.van-grid-item__content {background: $black; // 背景颜色border: 1rpx solid $yellow; // 边框颜色box-sizing: border-box; // 盒子模型color: $yellow; // 字体颜色border-radius: 5rpx; // 边框圆角}.van-grid-item__text {font-size: 25rpx; // 字体大小color: $white; // 字体颜色}
}.user-body {margin-top: 50rpx; // 上外边距.van-cell {background-color: $bg-gray; // 背景色text-align: left; // 左对齐.van-cell__title {color: $white; // 字体颜色letter-spacing: 5rpx; // 字间距}.van-cell__value {color: $yellow; // 字体颜色}}.van-cell-tips {text-align: left; // 左对齐font-size: small; // 小号color: $gray; // 字体颜色margin: 50rpx 0 20rpx 20rpx; // 外边距}
}.user-foot {padding: 0 30rpx 200rpx; // 内边距.van-button {margin-top: 30rpx; // 外边距border-radius: 15rpx; // 边框圆角}
}

4. 开发 pages/user/user.js 文件：

import api from '../../utils/api.js';
import util from '../../utils/util.js';
import constant from '../../utils/const.js';Page({data: {user: null,MINIO_AVATAR: constant.MINIO_AVATAR,avatarFile: [],NICKNAME_UPDATE_URL: '/pages/user/update-nickname/update-nickname?nickname=',GENDER_UPDATE_URL: '/pages/user/update-gender/update-gender?gender=',AGE_UPDATE_URL: '/pages/user/update-age/update-age?age=',ZODIAC_UPDATE_URL: '/pages/user/update-zodiac/update-zodiac?zodiac=',PROVINCE_UPDATE_URL: '/pages/user/update-province/update-province?province=',EMAIL_UPDATE_URL: '/pages/user/update-email/update-email?email=',INFO_UPDATE_URL: '/pages/user/update-info/update-info?info='},// 获取个人信息getInfo: function () {let that = this;let url = '/select/' + wx.getStorageSync("user").id;api.get('user', url).then(res => {that.setData({'user': res});}).catch(err => console.log(err));},// 上传用户头像uploadAvatar(ev) {const {file} = ev.detail;// 检查文件类型if (file.type !== 'image') {util.error('图片格式有误');return false;}// 检查文件大小if (file.size > 500 * 1024) {util.error('图片过大');return false;}// 上传文件wx.uploadFile({url: constant.UPLOAD_AVATAR_URL + wx.getStorageSync("user").id,filePath: file.url,name: 'avatarFile',header: {'Content-Type': 'multipart/form-data','token': wx.getStorageSync('token')},success: (res) => {this.setData({avatarFile: res});util.success('上传成功');util.tab('/pages/user/user');},fail: (err) => console.log(err)});},// 退出登录logout: function () {util.confirm('即将退出登录，确认吗？', () => {wx.removeStorageSync('token');wx.removeStorageSync('user');util.page('/pages/login/login-by-account/login-by-account', false);});},// 加载函数onLoad: function () {if (util.isLogin()) {this.getInfo();}this.getTabBar().setData({"activeTab": 3});},
});

1. 修改昵称

心法：当点击用户面板修改列表中的用户昵称后，会跳转到本页面。

页面要素（自上而下）	描述
昵称输入框	采集新昵称
确认修改按钮	向后台请求修改昵称，提交输入框数据

图示如下：

武技：开发修改昵称页面。

1. 开发 pages/user/update-nickname/update-nickname.json 文件：

{"usingComponents": {"van-field": "@vant/weapp/field/index","van-button": "@vant/weapp/button/index"}
}

2. 开发 pages/user/update-nickname/update-nickname.wxml 文件：

<view class="update-nickname-board"><van-field label="昵称" model:value="{{ nickname }}"custom-class="field" right-icon="eye-o" placeholder="请输入昵称" border="{{ false }}"/><van-button bind:tap="updateNickname" custom-class="submit-btn" type="info" block>确认修改</van-button>
</view>

3. 开发 pages/user/update-nickname/update-nickname.scss 文件：

@import "app";.update-nickname-board {padding: 20rpx; // 内边距.field {margin: 20rpx auto; // 外边距border-radius: 15rpx; // 圆角background-color: $bg-gray; // 背景颜色border: 3rpx solid $black; // 边框color: $white; // 文字颜色text-align: left; // 左对齐}.van-field__label {color: $yellow; // 字体颜色}.van-field__control {color: $white; // 文字颜色}.submit-btn {font-size: large; // 字号border-radius: 15rpx; // 圆角}
}

4. 开发 pages/user/update-nickname/update-nickname.js 文件：

import api from "../../../utils/api.js";
import util from "../../../utils/util.js";
import constant from "../../../utils/const.js";Page({data: {nickname: ''},// 修改昵称updateNickname: function () {let nickname = this.data.nickname;// 检验昵称if (!constant.RULE.NICKNAME[0]['pattern'].test(nickname)) {util.tip(constant.RULE.NICKNAME[0]['message']);return;}// 发送请求修改昵称let loginUser = wx.getStorageSync('user');loginUser['nickname'] = nickname;api.put('user', '/update', loginUser).then(res => {util.success('修改成功');// 刷新本地存储的用户信息wx.setStorageSync('user', loginUser);// 0.5秒后切换到 "我的" 选项卡setTimeout(() => util.tab('/pages/user/user'), 500);}).catch(err => console.error(err));},// 加载函数onLoad: function (options) {this.setData({'nickname': options['nickname']});}
});

2. 修改性别

心法：当点击用户面板修改列表中的用户性别后，会跳转到本页面。

页面要素（自上而下）	描述
性别下拉框	采集新性别
确认按钮	向后台请求修改性别，提交输入框数据

图示如下：

武技：开发修改性别页面。

1. 开发 pages/user/update-gender/update-gender.json 文件：

{"usingComponents": {"van-picker": "@vant/weapp/picker/index"}
}

2. 开发 pages/user/update-gender/update-gender.wxml 文件：

<view class="update-gender-board"><van-picker wx:if="{{currentGenderIdx}}"columns="{{ genderArrays }}"default-index="{{ currentGenderIdx }}"bind:change="onChange"bind:cancel="onCancel"bind:confirm="updateGender"show-toolbartitle="重新选择性别"/>
</view>

3. 开发 pages/user/update-gender/update-gender.scss 文件：

@import "app";.update-gender-board {padding: 20rpx; // 内边距.van-picker {background-color: $bg-gray; // 背景颜色border: none; // 边框border-radius: 8px; // 圆角}.van-picker__cancel {color: $white; // 取消按钮颜色}.van-picker__confirm {color: $yellow; // 确认按钮颜色}.van-picker__mask {background-image: none; // 遮罩背景图片}.van-picker-column__item {color: $white; // 选项颜色}.van-picker-column__item--selected {color: $yellow; // 选中选项颜色}
}

4. 开发 pages/user/update-gender/update-gender.js 文件：

import api from "../../../utils/api.js";
import util from "../../../utils/util.js";Page({data: {currentGenderIdx: null,gender: '',genderArrays: ['我是女孩', '我是男孩', '我不告诉你'],},// 点击改变时触发onChange(event) {this.setData({'gender': event.detail.value});},// 点击取消时触发onCancel: function () {util.tab('/pages/user/user');},// 修改性别updateGender: function () {// 检验性别if (this.data.currentGenderIdx == null) {util.tip('请选择性别！');return;}// 发送请求修改性别let loginUser = wx.getStorageSync('user');loginUser['gender'] = this.data.genderArrays.indexOf(this.data.gender);api.put('user', '/update', loginUser).then(res => {util.success('修改成功');// 刷新本地存储的用户信息wx.setStorageSync('user', loginUser);// 0.5秒后切换到 "我的" 选项卡setTimeout(() => util.tab('/pages/user/user'), 500);}).catch(err => console.log(err));},// 加载函数onLoad: function (options) {this.setData({'currentGenderIdx': options['gender']});}
});

3. 修改年龄

心法：当点击用户面板修改列表中的用户年龄后，会跳转到本页面。

页面要素（自上而下）	描述
年龄输入框	采集新年龄
确认修改按钮	向后台请求修改年龄，提交输入框数据

图示如下：

武技：开发修改年龄页面。

1. 开发 pages/user/update-age/update-age.js 文件：

{"usingComponents": {"van-field": "@vant/weapp/field/index","van-button": "@vant/weapp/button/index"}
}

2. 开发 pages/user/update-age/update-age.wxml 文件：

<view class="update-age-board"><van-field label="年龄" model:value="{{ age }}" type="number"custom-class="field" right-icon="eye-o" placeholder="请输入年龄" border="{{ false }}"/><van-button custom-class="submit-btn" bind:tap="updateAge" type="info" block>确认修改</van-button>
</view>

3. 开发 pages/user/update-age/update-age.scss 文件：

@import "app";.update-age-board {padding: 20rpx; // 内边距.field {margin: 20rpx auto; // 外边距border-radius: 15rpx; // 圆角background-color: $bg-gray; // 背景颜色border: 3rpx solid $black; // 边框color: $white; // 字体颜色text-align: left; // 左对齐}.van-field__label {color: $yellow; // 字体颜色}.van-field__control {color: $white; // 字体颜色}.submit-btn {font-size: large; // 字体大小border-radius: 15rpx; // 圆角}
}

4. 开发 pages/user/update-age/update-age.js 文件：

import api from "../../../utils/api.js";
import util from "../../../utils/util.js";Page({data: {age: null},// 修改年龄updateAge: function () {let age = this.data.age;// 检验年龄if (age < 18 || age > 80) {util.tip('年龄必须在18~80之间');return;}// 发送请求修改年龄let loginUser = wx.getStorageSync('user');loginUser['age'] = age;api.put('user', '/update', loginUser).then(res => {util.success('修改成功');// 刷新本地存储的用户信息wx.setStorageSync('user', loginUser);// 0.5秒后切换到 "我的" 选项卡setTimeout(() => util.tab('/pages/user/user'), 500);}).catch(err => console.log(err));},// 加载函数onLoad: function (options) {this.setData({'age': options['age']});}
});

4. 修改星座

心法：当点击用户面板修改列表中的用户星座后，会跳转到本页面。

页面要素（自上而下）	描述
星座下拉框	采集新星座
确认修改按钮	向后台请求修改星座，提交输入框数据

图示如下：

武技：开发修改星座页面。

1. 开发 pages/user/update-zodiac/update-zodiac.json 文件：

{"usingComponents": {"van-picker": "@vant/weapp/picker/index"}
}

2. 开发 pages/user/update-zodiac/update-zodiac.wxml 文件：

<view class="update-zodiac-board"><van-picker wx:if="{{currentZodiacIdx}}"columns="{{ zodiacOptions }}"default-index="{{ currentZodiacIdx }}"bind:change="onChange"bind:cancel="onCancel"bind:confirm="updateZodiac"show-toolbartitle="重新选择星座"/>
</view>

3. 开发 pages/user/update-zodiac/update-zodiac.scss 文件：

@import "app";.update-zodiac-board {padding: 20rpx; // 内边距.van-picker {background-color: $bg-gray; // 背景颜色border: none; // 边框border-radius: 8px; // 圆角}.van-picker__cancel {color: $white; // 取消按钮颜色}.van-picker__confirm {color: $yellow; // 确认按钮颜色}.van-picker__mask {background-image: none; // 遮罩层背景图片}.van-picker-column__item {color: $white; // 选项颜色}.van-picker-column__item--selected {color: $yellow; // 选中选项颜色}
}

4. 开发 pages/user/update-zodiac/update-zodiac.js 文件：

import api from "../../../utils/api.js";
import util from "../../../utils/util.js";
import constant from "../../../utils/const.js";Page({data: {currentZodiacIdx: null,zodiac: '',zodiacOptions: constant.ZODIAC_OPTIONS},// 点击改变时触发onChange(event) {this.setData({'zodiac': event.detail.value});},// 点击取消时触发onCancel: function () {util.tab('/pages/user/user');},// 点击确认时触发updateZodiac: function () {let zodiac = this.data.zodiac;// 发送请求修改星座（星座只要前3个中文字）let loginUser = wx.getStorageSync('user');loginUser['zodiac'] = zodiac.substring(0, 3);api.put('user', '/update', loginUser).then(res => {util.success('修改成功');// 刷新本地存储的用户信息wx.setStorageSync('user', loginUser);// 0.5秒后切换到 "我的" 选项卡setTimeout(() => util.tab('/pages/user/user'), 500);}).catch(err => util.error('修改失败', err));},// 加载函数onLoad: function (options) {this.setData({'zodiac': options['zodiac']});this.setData({'currentZodiacIdx': this.data.zodiacOptions.indexOf(options['zodiac'])});}
});

5. 修改省份

心法：当点击用户面板修改列表中的用户省份后，会跳转到本页面。

页面要素（自上而下）	描述
省份下拉框	采集新省份
确认修改按钮	向后台请求修改省份，提交输入框数据

图示如下：

武技：开发修改省份页面。

1. 开发 pages/user/update-province/update-province.json 文件：

{"usingComponents": {"van-tree-select": "@vant/weapp/tree-select/index","van-button": "@vant/weapp/button/index"}
}

2. 开发 pages/user/update-province/update-province.wxml 文件：

<view class="update-province-board"><van-tree-select items="{{ provinceOptions }}"main-active-index="{{ mainActiveIndex }}"active-id="{{ activeId }}"bind:click-nav="onClickNav"bind:click-item="onClickItem"main-item-class="main-item-class"main-active-class="main-active-class"content-item-class="content-item-class"content-active-class="content-active-class"/><van-button class="submit-btn" bind:tap="updateProvince" custom-class="submit-btn" type="info" block>确认修改</van-button>
</view>

3. 开发 pages/user/update-province/update-province.scss 文件：

@import "app";.update-province-board {padding: 20rpx; // 内边距.van-tree-select__nav,.van-tree-select__content {background-color: $bg-gray; // 背景颜色color: $white; // 字体颜色border: 3rpx solid $black; // 边框margin: 20rpx; // 外边距}.main-item-class,.content-item-class {background-color: $bg-gray; // 背景颜色color: $white; // 字体颜色}.main-active-class,.content-active-class {color: $yellow; // 选中状态的字体颜色}.submit-btn {margin-top: 20rpx; // 调整按钮的上边距font-size: large; // 字体大小border-radius: 15rpx; // 圆角半径}
}

4. 开发 pages/user/update-province/update-province.js 文件：

import api from "../../../utils/api.js";
import util from "../../../utils/util.js";
import constant from "../../../utils/const.js";Page({data: {province: '',mainActiveIndex: 0,activeId: null,provinceOptions: constant.PROVINCE_OPTIONS},// 点击左侧导航栏时触发onClickNav({detail = {}}) {this.setData({mainActiveIndex: detail.index || 0});},// 点击右侧选项时触发onClickItem({detail = {}}) {const activeId = this.data.activeId === detail.id ? null : detail.id;const activeText = this.data.province === detail.text ? null : detail.text;this.setData({activeId, province: activeText});},// 修改省份updateProvince: function () {let province = this.data.province;// 发送请求修改省份let loginUser = wx.getStorageSync('user');loginUser['province'] = province;api.put('user', '/update', loginUser).then(res => {util.success('修改成功');// 刷新本地存储的用户信息wx.setStorageSync('user', loginUser);// 0.5秒后切换到 "我的" 选项卡setTimeout(() => util.tab('/pages/user/user'), 500);}).catch(err => console.log(err));},// 加载函数onLoad: function (options) {let province = options['province'];this.data.provinceOptions.forEach(parent => {parent.children.forEach(child => {if (child.id === province) {this.setData({'mainActiveIndex': parent.id});}});});this.setData({'province': options['province'],'activeId': options['province']});}
});

6. 修改邮箱

心法：当点击用户面板修改列表中的用户邮箱后，会跳转到本页面。

页面要素（自上而下）	描述
邮箱输入框	采集新邮箱
确认修改按钮	向后台请求修改邮箱，提交输入框数据

图示如下：

武技：开发修改邮箱页面。

1. 开发 pages/user/update-email/update-email.json 文件：

{"usingComponents": {"van-field": "@vant/weapp/field/index","van-button": "@vant/weapp/button/index"}
}

2. 开发 pages/user/update-email/update-email.wxml 文件：

<view class="update-email-board"><van-field label="电子邮箱" model:value="{{ email }}"custom-class="field" right-icon="eye-o" placeholder="请输入电子邮箱" border="{{ false }}"/><van-button bind:tap="updateEmail" custom-class="submit-btn" type="info" block>确认修改</van-button>
</view>

3. 开发 pages/user/update-email/update-email.scss 文件：

@import "app";.update-email-board {padding: 20rpx; // 内边距.field {margin: 20rpx auto; // 外边距border-radius: 15rpx; // 圆角background-color: $bg-gray; // 背景颜色border: 3rpx solid $black; // 边框color: $white;}.van-field__label {color: $yellow; // 字体颜色}.van-field__control {color: $white; // 字体颜色}.submit-btn {font-size: large; // 字体大小border-radius: 15rpx; // 圆角}
}

4. 开发 pages/user/update-email/update-email.js 文件：

import api from "../../../utils/api.js";
import util from "../../../utils/util.js";
import constant from "../../../utils/const.js";Page({data: {email: ''},// 修改电子邮箱updateEmail: function () {let email = this.data.email;// 检验电子邮箱if (!constant.RULE.EMAIL[0]['pattern'].test(email)) {util.tip(constant.RULE.EMAIL[0]['message']);return;}// 发送请求修改电子邮箱let loginUser = wx.getStorageSync('user');loginUser['email'] = email;api.put('user', '/update', loginUser).then(res => {util.success('修改成功');// 刷新本地存储的用户信息wx.setStorageSync('user', loginUser);// 0.5秒后切换到 "我的" 选项卡setTimeout(() => util.tab('/pages/user/user'), 500);}).catch(err => console.error(err));},// 加载函数onLoad: function (options) {this.setData({'email': options['email']});}
});

7. 修改描述

心法：当点击用户面板修改列表中的用户描述后，会跳转到本页面。

页面要素（自上而下）	描述
描述输入框	采集新描述
确认修改按钮	向后台请求修改描述，提交输入框数据

图示如下：

武技：开发修改邮箱页面。

1. 开发 pages/user/update-info/update-info.json 文件：

{"usingComponents": {"van-field": "@vant/weapp/field/index","van-button": "@vant/weapp/button/index"}
}

2. 开发 pages/user/update-info/update-info.wxml 文件：

<view class="update-info-board"><van-field value="{{ info }}" bindinput="changeInfo" type="textarea"custom-class="field" maxlength="{{500}}" show-word-limit="{{true}}" autosize border="{{false}}" placeholder="请输入描述信息"/><van-button bind:tap="updateInfo" custom-class="submit-btn" type="info" block>确认修改</van-button>
</view>

3. 开发 pages/user/update-info/update-info.scss 文件：

@import "app";.update-info-board {padding: 20rpx; // 内边距.field {margin: 20rpx auto; // 外边距border-radius: 15rpx; // 圆角background-color: $bg-gray; // 背景色border: 3rpx solid $black; // 边框color: $white; // 字体颜色}.van-field__control {color: $white; // 字体颜色height: 150px !important;;}.submit-btn {font-size: large; // 字体大小border-radius: 15rpx; // 圆角}
}

4. 开发 pages/user/update-info/update-info.js 文件：

import api from "../../../utils/api.js";
import util from "../../../utils/util.js";
import constant from "../../../utils/const.js";Page({data: {info: ''},// 当信息内容改变时触发changeInfo: function (ev) {this.setData({'info': ev.detail});},// 修改描述updateInfo: function () {let info = this.data.info;// 检验描述if (!constant.RULE.INFO[0]['pattern'].test(info)) {util.tip(constant.RULE.INFO[0]['message']);return;}// 发送请求修改描述let loginUser = wx.getStorageSync('user');loginUser['info'] = info;api.put('user', '/update', loginUser).then(res => {util.success('修改成功');// 刷新本地存储的用户信息wx.setStorageSync('user', loginUser);// 0.5秒后切换到 "我的" 选项卡setTimeout(() => util.tab('/pages/user/user'), 500);}).catch(err => console.error(err));},// 加载函数onLoad: function (options) {this.setData({'info': options['info']});}
});

E02. 我的账号

心法：当点击用户面板我的账号按钮后，会跳转到本页面。

页面要素（自上而下）	描述
登录账号	展示当前用户的账号
登录密码	展示当前用户的密码（加密）
创建日期	展示当前账号的首次创建日期（格式经过处理）
修改日期	展示当前账号的最后修改日期（格式经过处理）
修改密码按钮	跳转到修改密码页面
注销账号按钮	向后台请求注销账号

图示如下：

武技：开发我的账号页面。

1. 开发 pages/user/account/account.json 文件：

{"usingComponents": {"van-divider": "@vant/weapp/divider/index","van-cell-group": "@vant/weapp/cell-group/index","van-cell": "@vant/weapp/cell/index","van-button": "@vant/weapp/button/index"}
}

2. 开发 pages/user/account/account.wxml 文件：

<view class="account-body"><van-cell-group><van-cell title="登录账号" value="{{user['username']}}" title-width="70px"/><van-cell title="登录密码" value="*******" title-width="70px" /><van-cell title="创建日期" value="{{user['created']}}" title-width="70px"/><van-cell title="修改日期" value="{{user['updated']}}" title-width="70px"/></van-cell-group>
</view>
<view class="account-foot"><van-button bind:tap="updatePassword" block type="warning">修改密码</van-button><van-button bind:tap="remove" block type="danger">注销账号</van-button>
</view>

3. 开发 pages/user/account/account.scss 文件：

@import "app";.account-body {margin-top: 50rpx; // 上外边距.van-cell {background-color: $bg-gray; // 背景色text-align: left; // 左对齐.van-cell__title {color: $white; // 字体颜色letter-spacing: 5rpx; // 字间距}.van-cell__value {color: $yellow; // 字体颜色}}
}.account-foot {padding: 0 30rpx 200rpx; // 内边距.van-button {margin-top: 30rpx; // 外边距border-radius: 15rpx; // 边框圆角}
}

4. 开发 pages/user/account/account.js 文件：

import api from '../../../utils/api.js';
import util from '../../../utils/util.js';
import constant from '../../../utils/const.js';Page({data: {user: null,},// 获取个人信息getInfo: function () {let that = this;let url = '/select/' + wx.getStorageSync("user").id;api.get('user', url).then(res => {res['updated'] = util.dateFormat(res['updated']);res['created'] = util.dateFormat(res['created']);that.setData({'user': res});}).catch(err => console.error(err));},// 注销账号remove: function () {util.confirm('即将注销账号，确认吗？', () => {let url = '/delete/' + wx.getStorageSync("user").id;api.del('user', url).then(res => {util.success('注销成功');util.page('/pages/login/login-by-account/login-by-account', false);}).catch(err => console.log(err));});},// 修改密码updatePassword: function () {util.page('/pages/user/account/update-password/update-password', false);},onLoad: function (options) {if (util.isLogin()) {this.getInfo();}}
});

1. 修改密码

心法：当用户在我的界面中点击密码后，会跳转到本页面。

页面要素（自上而下）	描述
登录账号	展示当前用户的账号
登录密码	展示当前用户的密码（加密）
创建日期	展示当前账号的首次创建日期（格式经过处理）
修改日期	展示当前账号的最后修改日期（格式经过处理）
修改密码按钮	跳转到修改密码页面
注销账号按钮	向后台请求注销账号

图示如下：

武技：开发修改密码页面。

1. 开发 pages/user/account/update-password/update-password.json 文件：

{"usingComponents": {"van-field": "@vant/weapp/field/index","van-button": "@vant/weapp/button/index"}
}

2. 开发 pages/user/personal/update-password/update-password.wxml 文件：

<view class="update-password-board"><van-field label="旧密码" model:value="{{ oldPassword }}" type="password"custom-class="field" right-icon="eye-o" placeholder="请输入旧密码" required border="{{ false }}"/><van-field label="新密码" model:value="{{ newPassword }}" type="password"custom-class="field" right-icon="eye-o" placeholder="请输入新密码" required border="{{ false }}"/><van-field label="确认新密码" model:value="{{ rePassword }}" type="password"custom-class="field" right-icon="eye-o" placeholder="请确认新密码" required border="{{ false }}"/><van-button custom-class="submit-btn" bind:tap="updatePassword" type="info" block>确认修改</van-button>
</view>

3. 开发 pages/user/personal/update-password/update-password.scss 文件：

@import "app";.update-password-board {padding: 20rpx; // 内边距.field {margin: 20rpx auto; // 外边距border-radius: 15rpx; // 圆角background-color: $bg-gray; // 背景颜色border: 3rpx solid $black; // 边框color: $white; // 字体颜色text-align: left; // 左对齐}.van-field__label {color: $yellow; // 字体颜色}.van-field__control {color: $white; // 字体颜色}.submit-btn {font-size: large; // 字体大小border-radius: 15rpx; // 圆角}
}

4. 开发 pages/user/personal/update-password/update-password.js 文件：

import api from "../../../../utils/api.js";
import util from "../../../../utils/util.js";
import constant from "../../../../utils/const.js";Page({data: {oldPassword: '',newPassword: '',rePassword: ''},// 修改密码updatePassword: function () {let oldPassword = this.data.oldPassword;let newPassword = this.data.newPassword;let rePassword = this.data.rePassword;// 新密码和原密码不能一致if (newPassword === oldPassword) {util.tip('新密码和原密码不能一致');return;}// 检验两次密码是否一致if (newPassword !== rePassword) {util.tip('两次密码不一致');return;}// 检验旧密码if (!constant.RULE.PASSWORD[0]['pattern'].test(oldPassword)) {util.tip(constant.RULE.PASSWORD[0]['message']);return;}// 检验新密码if (!constant.RULE.PASSWORD[0]['pattern'].test(newPassword)) {util.tip(constant.RULE.PASSWORD[0]['message']);return;}// 发送请求修改密码let param = {oldPassword, newPassword, id: wx.getStorageSync("user").id};api.put('user', '/updatePassword', param).then(res => {util.success('修改成功');// 0.5秒后切换到登录页面setTimeout(() => util.page('/pages/login/login-by-account/login-by-account', false), 500);}).catch(err => util.tip(err));},// 加载函数onLoad: function (options) {}
});

Java道经 - 项目 - MyLesson - 前台前端（三）