【愚公系列】2022年11月uniapp专题优购电商个人中心页面

个人中心的信息复杂度与产品本身有关。体系越庞大的产品&＃xff0c;对应个人中心页面需要承载的内容越多&＃xff0c;结构势必复杂。

一般平台型电商的个人中心页面必须涵盖&＃xff1a;用户基础信息、全局性操作&＃xff08;设置&＃xff09;、关键数据记录、购买激励&＃xff08;会员、红包&＃xff09;、核心业务&＃xff08;订单信息&＃xff09;、工具集合&＃xff08;工具箱&＃xff09;等。

<template><view class&＃61;"my-container"><my-login v-if&＃61;"!token"></my-login><my-userinfo v-else></my-userinfo></view>
</template><script>import badgeMix from &＃39;&＃64;/mixins/tabbar-badge.js&＃39;import { mapState } from &＃39;vuex&＃39;export default {mixins: [badgeMix],data() {return {};},computed: {...mapState(&＃39;m_user&＃39;, [&＃39;token&＃39;])}}
</script><style lang&＃61;"scss">page,.my-container {height: 100%;}
</style>

<template><view class&＃61;"login-container"><uni-icons type&＃61;"contact-filled" size&＃61;"100" color&＃61;"#AFAFAF"></uni-icons><button type&＃61;"primary" class&＃61;"btn-login" open-type&＃61;"getUserInfo" &＃64;getuserinfo&＃61;"getUserInfo">一键登录</button><text class&＃61;"tips-text">登录后尽享更多权益</text></view>
</template><script>import { mapMutations, mapState } from &＃39;vuex&＃39;export default {data() {return {};},computed: {...mapState(&＃39;m_user&＃39;, [&＃39;redirectInfo&＃39;])},methods: {...mapMutations(&＃39;m_user&＃39;, [&＃39;updateUserInfo&＃39;, &＃39;updateToken&＃39;, &＃39;updateRedirectInfo&＃39;]),// 用户授权之后&＃xff0c;获取用户的基本信息getUserInfo(e) {console.log(e)if (e.detail.errMsg &＃61;&＃61;&＃61; &＃39;getUserInfo:fail auth deny&＃39;) return uni.$showMsg(&＃39;您取消了登录授权&＃xff01;&＃39;)console.log(e.detail.userInfo)this.updateUserInfo(e.detail.userInfo)this.getToken(e.detail)},async getToken(info) {// 获取 code 对应的值const [err, res] &＃61; await uni.login().catch(err &＃61;> err)if (err || res.errMsg !&＃61;&＃61; &＃39;login:ok&＃39;) return uni.$showMsg(&＃39;登录失败&＃xff01;&＃39;)// 准备参数const query &＃61; {code: res.code,encryptedData: info.encryptedData,iv: info.iv,rawData: info.rawData,signature: info.signature}const { data: loginResult } &＃61; await uni.$http.post(&＃39;/api/public/v1/users/wxlogin&＃39;, query)if (loginResult.meta.status !&＃61;&＃61; 200) return uni.$showMsg(&＃39;登录失败&＃xff01;&＃39;)// 直接把 token 保存到 vuex 中this.updateToken(loginResult.message.token)this.navigateBack()},navigateBack() {if (this.redirectInfo && this.redirectInfo.openType &＃61;&＃61;&＃61; &＃39;switchTab&＃39;) {uni.switchTab({url: this.redirectInfo.from,complete: () &＃61;> {this.updateRedirectInfo(null)}})}}}}
</script><style lang&＃61;"scss">.login-container {height: 750rpx;background-color: #F8F8F8;display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;overflow: hidden;&::after {content: &＃39; &＃39;;display: block;width: 100%;height: 40px;background-color: white;position: absolute;bottom: 0;left: 0;border-radius: 100%;transform: translateY(50%);}.btn-login {width: 90%;border-radius: 100px;margin: 15px 0;background-color: #C00000;}.tips-text {font-size: 12px;color: gray;}}
</style>

<template><view class&＃61;"my-userinfo-container"><!-- 头像和昵称区域 --><view class&＃61;"top-box"><image :src&＃61;"userinfo.avatarUrl" class&＃61;"avatar"></image><view class&＃61;"nickname">{{userinfo.nickName}}</view></view><!-- 面板区域 --><view class&＃61;"panel-list"><!-- 第1个面板 --><view class&＃61;"panel"><view class&＃61;"panel-body"><view class&＃61;"panel-item"><text>8</text><text>收藏的店铺</text></view><view class&＃61;"panel-item"><text>14</text><text>收藏的商品</text></view><view class&＃61;"panel-item"><text>18</text><text>关注的商品</text></view><view class&＃61;"panel-item"><text>84</text><text>足迹</text></view></view></view><!-- 第2个面板 --><view class&＃61;"panel"><view class&＃61;"panel-title">我的订单</view><view class&＃61;"panel-body"><view class&＃61;"panel-item"><image src&＃61;"/static/my-icons/icon1.png" class&＃61;"icon"></image><text>待付款</text></view><view class&＃61;"panel-item"><image src&＃61;"/static/my-icons/icon2.png" class&＃61;"icon"></image><text>待收货</text></view><view class&＃61;"panel-item"><image src&＃61;"/static/my-icons/icon3.png" class&＃61;"icon"></image><text>退款/退货</text></view><view class&＃61;"panel-item"><image src&＃61;"/static/my-icons/icon4.png" class&＃61;"icon"></image><text>全部订单</text></view></view></view><!-- 第3个面板 --><view class&＃61;"panel"><view class&＃61;"panel-list-item"><text>收货地址</text><uni-icons type&＃61;"arrowright" size&＃61;"15"></uni-icons></view><view class&＃61;"panel-list-item"><text>联系客服</text><uni-icons type&＃61;"arrowright" size&＃61;"15"></uni-icons></view><view class&＃61;"panel-list-item" &＃64;click&＃61;"logout"><text>退出登录</text><uni-icons type&＃61;"arrowright" size&＃61;"15"></uni-icons></view></view></view></view>
</template><script>import { mapState, mapMutations } from &＃39;vuex&＃39;export default {data() {return {};},computed: {...mapState(&＃39;m_user&＃39;, [&＃39;userinfo&＃39;])},methods: {...mapMutations(&＃39;m_user&＃39;, [&＃39;updateAddress&＃39;, &＃39;updateUserInfo&＃39;, &＃39;updateToken&＃39;]),async logout() {const [err, succ] &＃61; await uni.showModal({title: &＃39;提示&＃39;,content: &＃39;确认退出登录吗&＃xff1f;&＃39;}).catch(err &＃61;> err)if (succ && succ.confirm) {this.updateAddress({})this.updateUserInfo({})this.updateToken(&＃39;&＃39;)}}}}
</script><style lang&＃61;"scss">.my-userinfo-container {height: 100%;background-color: #F4F4F4;.top-box {height: 400rpx;background-color: #C00000;display: flex;justify-content: center;align-items: center;flex-direction: column;.avatar {width: 90px;height: 90px;border-radius: 45px;border: 2px solid #FFF;box-shadow: 0 1px 5px black;}.nickname {font-size: 16px;color: #FFF;font-weight: bold;margin-top: 10px;}}}.panel-list {padding: 0 10px;position: relative;top: -10px;.panel {background-color: white;border-radius: 3px;margin-bottom: 8px;.panel-title {line-height: 45px;padding-left: 10px;font-size: 15px;border-bottom: 1px solid #F4F4F4;}.panel-body {display: flex;justify-content: space-around;.panel-item {display: flex;flex-direction: column;align-items: center;justify-content: space-around;padding: 10px 0;font-size: 13px;.icon {width: 35px;height: 35px;}}}}}.panel-list-item {display: flex;justify-content: space-between;align-items: center;font-size: 15px;padding: 0 10px;line-height: 45px;}
</style>