微信小程序开发教程：一步步教你实现短视频去水印功能之个人中心篇

点击登陆
{{userName}}
{{freeCount}} 次今日免费次数
{{totalCount}} 次共为您解析次数
```
3. 在第一章中，我们已经封装了请求方法和登录逻辑，这里可以直接复<a href="https://www.cyeor.com/tag/%e7%94%a8" target="_blank">用。首先在 `data` 中定义两个变量：
```javascript
data: {
freeCount: 0,
totalCount: 0
}
```
4. 在没有用户信息时，页面会显示“点击登陆”按钮，并绑定登录方法：
```html
点击登陆
{{userName}}
```
5. 在 `methods` 中实现登录逻辑，并添加提示信息：
```javascript
login() {
if (wx.getStorageSync('token') !== '') {
wx.showToast({
title: '未授权，登录失败',
icon: 'none'
});
return;
}
wx.showToast({
title: "正在登录",
icon: "loading"
});
// 执行登录
this.$login().then(res => {
this.setData({
userName: res.data.userName,
freeCount: res.data.freeCount
});
wx.hideToast();
});
}
```
6. 在 `data` 中增加 `userName` 和 `freeCount` 两个参数，并将默认值设置为 `--`：
```javascript
data: {
userName: '--',
freeCount: '--',
totalCount: 0
}
```
7. 在 `onLoad` 阶段获取每日免费解析次数和总解析次数：
```javascript
onLoad() {
if (wx.getStorageSync('token')) {
this.setData({
userName: wx.getStorageSync('userName'),
freeCount: wx.getStorageSync('freeCount')
});
}
// 获取每日剩余免费解析次数
this.getFreeCount();
// 获取当前用户总解析次数
this.getTotalCount();
}
```
8. 实现 `getFreeCount` 和 `getTotalCount` 方法：
```javascript
getFreeCount() {
let date = new Date().toLocaleDateString();
let count = wx.getStorageSync('freeCount');
if (count != date) {
wx.setStorageSync('freeCount', date);
wx.setStorageSync('freeCount', 10);
return 10;
} else {
return wx.getStorageSync('freeCount');
}
}
getTotalCount() {
wx.request({
url: 'https://example.com/api/totalCount',
success: res => {
this.setData({
totalCount: res.data.totalCount
});
}
});
}
```
二、修改菜单
在菜单部分，我们只保留几个有用的菜单项：
1. 解析记录查询
2. 联系客服
3. 分享
4. 赞赏支持
代码示例：