微信小程序商项目(篇9)用户页面实现
程序员文章站
2022-07-01 16:23:38
用户背景区域 {{userInfo.user....
用户背景区域
<!-- 背景 -->
<block wx:if="{{userInfo.userInfo}}">
<view class="myBackground" >
<image mode="widthFix" class="headPic" src="{{userInfo.userInfo.avatarUrl}}" />
<view class="userName" >{{userInfo.userInfo.nickName}}</view>
</view>
</block>
<block wx:else>
<view class="noBackground">
<button class="loginBtn" type="primary" plain="{{true}}" bindtap="getQuan">登录</button>
</view>
</block>
收藏区域
<view class="collect">
<view class="collect1">
<view>0</view>
<view class="collectBottom">收藏的店铺</view>
</view>
<view class="collect2">
<view>0</view>
<view class="collectBottom"> 收藏的商品</view>
</view>
<view class="collect3">
<view>0</view>
<view class="collectBottom">关注的商品</view>
</view>
<view class="collect4">
<view>0</view>
<view class="collectBottom">我的足迹</view>
</view>
</view>
订单区域
<view class="orderTitle">我的订单</view>
<view class="myOrder">
<view class="myOrderTop">全部订单</view>
<view class="myOrderTop">待付款</view>
<view class="myOrderTop">待收货</view>
<view class="myOrderTop">退款/退货</view>
</view>
其他
<view class="item">收货地址管理</view>
<view class="item">联系客服</view>
<view class="item"> 意见反馈</view>
<view class="item">关于我们</view>
获取用户信息
onShow: function () {
wx.login({
timeout:10000,
success: (result)=>{
// console.log(result)
wx.setStorageSync("token", result.code);
},
fail: ()=>{},
complete: ()=>{}
});
const userInfo=wx.getStorageSync("userInfo");
// console.log(userInfo)
this.setData({
userInfo:userInfo
})
}
去登录页面
getQuan(){
wx.navigateTo({
url: '/pages/login/login'
});
}
登录页面
<button type="primary"
plain="{{true}}" class="loginBtn"
open-type="getUserInfo"
bindgetuserinfo="getQuan">授权</button>
getQuan(e){
console.log(e)
const userInfo=e.detail
wx.setStorage({
key: 'userInfo',
data: userInfo
});
wx.navigateBack({
delta: 1
});
}
本文地址:https://blog.csdn.net/weixin_40119412/article/details/108568612
上一篇: 食用山药怎么吃有营养
下一篇: android MVP 简单DEMO