From 7c9cfff3ccfea23c3094c64c29551536258c095b Mon Sep 17 00:00:00 2001 From: renjianbo <18691577328@163.com> Date: Sun, 7 Jun 2026 12:11:59 +0800 Subject: [PATCH] feat: redesign my page with balance card, auth badge, and menu grid MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- coupon/pages/my/my.js | 146 +++++++++++------------------ coupon/pages/my/my.wxml | 116 +++++++++++++---------- coupon/pages/my/my.wxss | 198 +++++++++++++++++++++++++--------------- 3 files changed, 242 insertions(+), 218 deletions(-) diff --git a/coupon/pages/my/my.js b/coupon/pages/my/my.js index fe3a277..25b8121 100644 --- a/coupon/pages/my/my.js +++ b/coupon/pages/my/my.js @@ -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' - }) - }, - -}) \ No newline at end of file + // 关于 + goAbout() { + wx.navigateTo({ url: '/pages/guanyu/guanyu' }) + } +}) diff --git a/coupon/pages/my/my.wxml b/coupon/pages/my/my.wxml index f3480b7..6701486 100644 --- a/coupon/pages/my/my.wxml +++ b/coupon/pages/my/my.wxml @@ -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;" /> - - - - - - - - - - - {{phone}} - - - - - + - - - - - 关于 - - - - + + + + + + + + + + + {{authName}} + {{phone}} + + + {{isAuth ? '已认证' : '未认证'}} + - - - - - - 登录获取更多信息~ - + + + 账户余额(元) + {{balance}} + 点击查看明细 > + + + + + + + 我的钱包 + + + + + + + 我的订单 + + + + + + + 联系客服 + + + + + + + 关于 + + + + + + + + + + + 登录获取更多服务 + + + diff --git a/coupon/pages/my/my.wxss b/coupon/pages/my/my.wxss index fee95aa..1c5a345 100644 --- a/coupon/pages/my/my.wxss +++ b/coupon/pages/my/my.wxss @@ -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; -} \ No newline at end of file +.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; +}