admin/rlz
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign my page with balance card, auth badge, and menu grid

Browse Source 
- Add loadUserInfo() calling /system/user/getAppUserInfo for user profile
- Show real-name verification badge (已认证/未认证)
- Show balance card with amount from API
- Add menu: 我的钱包, 我的订单, 联系客服, 关于
- Clean up dead code and unused lifecycle hooks
- Refresh user info on every onShow when logged in

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
renjianbo
2026-06-07 12:11:59 +08:00
parent ade42d9b27
commit 7c9cfff3cc
3 changed files with 242 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
coupon/pages/my/my.js
View File

@@ -4,37 +4,61 @@ const { request } = require('../../utils/request')
Page({
data: {
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName'),
phone: wx.getStorageSync('phone'),
uidFlag: wx.getStorageSync('uidFlag'),
status: '',
code: '',
height: '',
logging: false
logging: false,
// 用户信息
userInfo: null,
balance: '0.00',
isAuth: false,
authName: ''
},
onLoad: function (options) {
onLoad: function () {
this.setData(getApp().getNavBarHeight());
},
onShow: function () {
// 仅在未登录时获取 code
if (!this.data.uidFlag) {
this.getLogin()
} else {
this.loadUserInfo()
}
},
// 登录
// 微信登录获取 code
getLogin() {
var that = this;
wx.login({
success: res => {
app.globalData.code = res.code
that.setData({ code: res.code })
this.setData({ code: res.code })
}
})
},
// 拉取用户信息（含实名状态、余额）
async loadUserInfo() {
try {
var res = await request({
url: '/system/user/getAppUserInfo',
method: 'GET',
loading: false,
showError: false
})
if (res.code === 200 && res.data) {
var d = res.data;
this.setData({
userInfo: d,
balance: d.yue || '0.00',
isAuth: d.attestation === '1',
authName: d.name || ''
});
// 同步头像/昵称到缓存
if (d.nickName) wx.setStorageSync('nickName', d.nickName);
}
} catch (e) {}
},
// 获取电话号码并登录
async getPhoneNumber(e) {
if (this.data.logging) return
@@ -67,8 +91,10 @@ Page({
wx.showToast({ title: '登录成功', icon: 'success' })
// 同步登录信息到服务端（失败不影响登录）
// 同步登录信息
this.syncLogin()
// 拉取用户信息
this.loadUserInfo()
// 返回上一页，若无法返回则到首页
var pages = getCurrentPages()
@@ -77,7 +103,6 @@ Page({
} else {
wx.switchTab({ url: '/pages/index/index' })
}
} catch (e) {
this.setData({ logging: false })
}
@@ -98,92 +123,23 @@ Page({
})
},
getUserBaseInfo: function () {
var that = this;
request({
url: '/getUserToken',
method: 'GET',
data: { phonenumber: this.data.phone },
loading: false
}).then(resp => {
if (resp.code === 200 || resp.erro === 0) {
that.setData({ infor: resp.infor })
}
}).catch(function() {})
// 我的钱包
goWallet() {
wx.navigateTo({ url: '/pages/wodeqianbao/qianbao' })
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// 我的订单
goOrders() {
wx.switchTab({ url: '/pages/order/order' })
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
// 联系客服
callService() {
wx.makePhoneCall({ phoneNumber: '4001234567' })
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
shoucang() {
wx.navigateTo({
url: '/pages/myshoucang/myshoucang_index?' + "type=" + "1",
})
},
pintuan() {
wx.navigateTo({
// url: '/pages/myshoucang/myshoucang_index?'+"type="+"2",
url: '/pages/order/order',
})
},
kanjia() {
// wx.navigateTo({
// url: '/pages/myshoucang/myshoucang_index?'+"type="+"3",
// })
wx.showToast({
title: '暂无开放',
icon: 'none'
});
},
qianbao() {
wx.navigateTo({
url: '/pages/wodeqianbao/qianbao'
})
},
guanyu() {
wx.navigateTo({
url: '/pages/guanyu/guanyu'
})
},
})
// 关于
goAbout() {
wx.navigateTo({ url: '/pages/guanyu/guanyu' })
}
})

116
coupon/pages/my/my.wxml
View File

@@ -4,60 +4,78 @@
right-text=""
bind:click-left="onClickLeft"
bind:click-right="onClickRight"
style=" position: fixed;left: 0;top: 0;width: 100%;z-index: 2;"
style="position:fixed;left:0;top:0;width:100%;z-index:2;"
/>
<view style="margin-top: {{height}}px;">
<view wx:if="{{uidFlag}}">
<view class="content">
<view class="userinfo-avatar" bindtap="bindViewTap">
<open-data type="userAvatarUrl"></open-data>
</view>
<view class="content_right">
<navigator>
<open-data type="userNickName"></open-data>
</navigator>
<view>{{phone}}</view>
</view>
</view>
<!-- <view class="substance" bindtap="shoucang">
<view style="display:flex">
<image src="/pages/image/colleme.png" style="width:34rpx;height:34rpx;"></image>
<view class="price">我的关注</view>
</view>
<view>
<image src="/pages/image/right1.png" style="width:15rpx;height:28rpx"></image>
</view>
</view> -->
<!-- <view class="substance" bindtap="pintuan">
<view style="display:flex">
<image src="/pages/image/Collage.png" style="width:34rpx;height:34rpx;"></image>
<view class="price">我的订单</view>
</view>
<view>
<image src="/pages/image/right1.png" style="width:15rpx;height:28rpx"></image>
</view>
</view> -->
<view style="margin-top:{{height}}px;">
<view class="substance" bindtap="guanyu">
<view style="display:flex">
<van-icon style="width:34rpx;height:34rpx;" name="info-o" />
<view class="price">关于</view>
</view>
<view>
<image src="/pages/image/right1.png" style="width:15rpx;height:28rpx"></image>
</view>
<!-- 已登录 -->
<view wx:if="{{uidFlag}}">
<!-- 用户信息头部 -->
<view class="header">
<view class="userinfo-avatar">
<open-data type="userAvatarUrl"></open-data>
</view>
<view class="header-info">
<view class="header-name-row">
<open-data type="userNickName"></open-data>
<view wx:if="{{authName}}" class="auth-name">{{authName}}</view>
</view>
<view class="header-phone">{{phone}}</view>
</view>
<view class="auth-badge {{isAuth ? 'auth-ok' : 'auth-no'}}" bindtap="goAuth">
{{isAuth ? '已认证' : '未认证'}}
</view>
</view>
<view class="content" wx:else>
<image class="userinfo-avatar" src="../image/userimg.png" mode="widthFix"></image>
<view class="content_right">
<!-- <navigator url="/pages/login/login">点击登录</navigator> -->
<button class="phone" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">点击登录</button>
<view>登录获取更多信息~</view>
</view>
<!-- 余额卡片 -->
<view class="balance-card" bindtap="goWallet">
<view class="balance-label">账户余额（元）</view>
<view class="balance-amount">{{balance}}</view>
<view class="balance-hint">点击查看明细 ></view>
</view>
<!-- 功能菜单 -->
<view class="menu-section">
<!-- 我的钱包 -->
<view class="menu-item" bindtap="goWallet">
<image class="menu-icon" src="/pages/image/income.png" mode="aspectFit"></image>
<text class="menu-text">我的钱包</text>
<image class="menu-arrow" src="/pages/image/right1.png" mode="aspectFit"></image>
</view>
<!-- 我的订单 -->
<view class="menu-item" bindtap="goOrders">
<image class="menu-icon" src="/pages/image/dingdan.png" mode="aspectFit"></image>
<text class="menu-text">我的订单</text>
<image class="menu-arrow" src="/pages/image/right1.png" mode="aspectFit"></image>
</view>
<!-- 联系客服 -->
<view class="menu-item" bindtap="callService">
<image class="menu-icon" src="/pages/image/phone.png" mode="aspectFit"></image>
<text class="menu-text">联系客服</text>
<image class="menu-arrow" src="/pages/image/right1.png" mode="aspectFit"></image>
</view>
<!-- 关于 -->
<view class="menu-item" bindtap="goAbout">
<image class="menu-icon" src="/pages/image/my.png" mode="aspectFit"></image>
<text class="menu-text">关于</text>
<image class="menu-arrow" src="/pages/image/right1.png" mode="aspectFit"></image>
</view>
</view>
</view>
<!-- 未登录 -->
<view class="header" wx:else>
<image class="userinfo-avatar" src="../image/userimg.png" mode="aspectFit"></image>
<view class="header-info">
<button class="login-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
点击登录
</button>
<view class="header-phone">登录获取更多服务</view>
</view>
</view>
</view>

198
coupon/pages/my/my.wxss
View File

@@ -1,93 +1,143 @@
.content {
display: flex;
flex-direction: row;
padding: 80rpx;
padding-bottom: 48rpx;
align-items: center;
}
.content image {
width: 120rpx;
margin-right: 20rpx;
}
.content_right view:last-child {
color: #A0A5B5;
font-size: 24rpx;
margin-top: 10rpx;
/* 用户信息头部 */
.header {
display: flex;
flex-direction: row;
align-items: center;
padding: 60rpx 40rpx 40rpx 40rpx;
background: #fff;
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
width: 128rpx;
height: 128rpx;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.content_right button {
text-align: left;
padding: 0;
background: none;
color: #333333;
font-size: 34rpx;
font-weight: 800;
.header-info {
flex: 1;
margin-left: 24rpx;
}
.balance {
width: 688rpx;
height: 149rpx;
margin: 0 31rpx;
display: flex;
justify-content: space-between;
.header-name-row {
display: flex;
align-items: center;
}
.balance .money {
margin: 28rpx;
.header-name-row navigator,
.header-name-row open-data {
font-size: 34rpx;
font-weight: 800;
color: #333;
}
.money view:nth-child(1) {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 400;
line-height: 36rpx;
color: #929292;
.auth-name {
font-size: 26rpx;
color: #666;
margin-left: 16rpx;
}
.money view:nth-child(2) {
font-size: 40rpx;
font-weight: 400;
line-height: 36rpx;
color: #333333;
margin-top: 15rpx;
.header-phone {
font-size: 24rpx;
color: #A0A5B5;
margin-top: 10rpx;
}
.balance .btn {
width: 131rpx;
height: 58rpx;
background: #FF4C00;
opacity: 1;
border-radius: 85rpx;
font-size: 26rpx;
text-align: center;
font-family: PingFang SC;
line-height: 58rpx;
color: #FFFFFF;
margin: 46rpx 24rpx;
/* 实名认证徽章 */
.auth-badge {
font-size: 22rpx;
padding: 6rpx 20rpx;
border-radius: 24rpx;
flex-shrink: 0;
}
.substance {
display: flex;
/* margin-top: 53rpx; */
justify-content: space-between;
margin: 53rpx 24rpx 57rpx 31rpx;
.auth-ok {
background: #E8F5E9;
color: #4CAF50;
}
.price {
font-size: 26rpx;
font-family: PingFang SC;
line-height: 34rpx;
color: #333333;
opacity: 1;
margin-left: 20rpx;
}
.auth-no {
background: #FFF3E0;
color: #FF9800;
}
/* 余额卡片 */
.balance-card {
margin: 24rpx 32rpx;
padding: 32rpx;
border-radius: 16rpx;
background: linear-gradient(135deg, #FF8F1F, #FF6A6A);
color: #fff;
}
.balance-label {
font-size: 24rpx;
opacity: 0.85;
}
.balance-amount {
font-size: 56rpx;
font-weight: 800;
margin: 12rpx 0 8rpx 0;
letter-spacing: 2rpx;
}
.balance-hint {
font-size: 22rpx;
opacity: 0.7;
}
/* 功能菜单 */
.menu-section {
margin: 24rpx 32rpx;
background: #fff;
border-radius: 16rpx;
overflow: hidden;
}
.menu-item {
display: flex;
align-items: center;
padding: 28rpx 32rpx;
border-bottom: 1rpx solid #F5F5F5;
}
.menu-item:last-child {
border-bottom: none;
}
.menu-icon {
width: 36rpx;
height: 36rpx;
flex-shrink: 0;
}
.menu-text {
flex: 1;
font-size: 28rpx;
color: #333;
margin-left: 24rpx;
}
.menu-arrow {
width: 14rpx;
height: 26rpx;
flex-shrink: 0;
}
/* 登录按钮 */
.login-btn {
text-align: left;
padding: 0;
background: none;
color: #333;
font-size: 34rpx;
font-weight: 800;
border: none;
line-height: 1.4;
}
.login-btn::after {
border: none;
}