基于php微信小程序购物商城 校园二手商品 图书鲜花商城 毕业设计（4）用户首页会员中心

效果图

wxml代码

<!--头部信息--> <view class='toubu'> <view class='toubu-zuo'> <open-data type="userAvatarUrl" class="toubu-zuo-touxiang"></open-data> </view> <view class='toubu-you'> <view class='toubu-you-txt1'> <open-data type="userNickName"></open-data> </view> <view class='toubu-you-txt2'> 等级：{{str_u_flid}} 会员 </view> <view class='toubu-you-txt3'> 用户：{{str_u_name}} </view> </view> </view> <navigator url='/pages/huiyuan/dingdan/dingdan_list' class='caidan'> <image class='caidan-icon' src='/img/sys01.png'></image> <text class='caidan-text'>我的订单</text> <image class='caidan-arrow' src='/img/right.png'></image> </navigator> <navigator url='/pages/huiyuan/dizhi/dizhi_list' class='caidan'> <image class='caidan-icon' src='/img/sys02.png'></image> <text class='caidan-text'>收货地址管理</text> <image class='caidan-arrow' src='/img/right.png'></image> </navigator> <navigator url='/pages/huiyuan/shoucang/sc_list' class='caidan'> <image class='caidan-icon' src='/img/sys03.png'></image> <text class='caidan-text'>我的收藏</text> <image class='caidan-arrow' src='/img/right.png'></image> </navigator> <navigator url='/pages/index/index' open-type='switchTab' class='caidan'> <image class='caidan-icon' src='/img/sys04.png'></image> <text class='caidan-text'>回到首页</text> <image class='caidan-arrow' src='/img/right.png'></image> </navigator> <view class='caidan' bindtap='tuichu'> <image class='caidan-icon' src='/img/sys04.png'></image> <text class='caidan-text'>退出登录</text> <image class='caidan-arrow' src='/img/right.png'></image> </view> <view class='sys_caidan'> <navigator class='sys_caidan_xiangmu' url='/pages/index/index' open-type='switchTab'> <image src='/images/a-on.png' class='sys_caidan_xiangmu_img'></image> <view class='sys_caidan_xiangmu_txt sys_caidan_xiangmu_xuanzhong'>首页</view> </navigator> <navigator class='sys_caidan_xiangmu' url='/pages/fenlei/index' open-type='switchTab'> <image src='/images/b-off.png' class='sys_caidan_xiangmu_img'></image> <view class='sys_caidan_xiangmu_txt'>分类</view> </navigator> <navigator class='sys_caidan_xiangmu' url='/pages/huiyuan/gouwuche/che_list' open-type='switchTab'> <image src='/images/c-off.png' class='sys_caidan_xiangmu_img'></image> <view class='sys_caidan_xiangmu_txt'>购物车</view> </navigator> <navigator class='sys_caidan_xiangmu' url='/pages/huiyuan/index' open-type='switchTab'> <image src='/images/d-off.png' class='sys_caidan_xiangmu_img'></image> <view class='sys_caidan_xiangmu_txt'>会员</view> </navigator> </view>

wxss代码

/*头部信息*/ .toubu { display: flex; margin: 1px; padding: 10px; background-color: crimson; } .toubu-zuo {} .toubu-zuo-touxiang { width: 80px; height: 80px; border-radius: 50%; border: 2px solid white; box-shadow: 3px 3px 10px gainsboro; display: block; overflow: hidden; } .toubu-you { padding-left: 10px; } .toubu-you-txt1 { color: white; } .toubu-you-txt2 { background-color: darkorange; color: white; margin: 5px 0px; padding: 5px; } .toubu-you-txt3 { color: white; } .caidan{ display: flex; padding: 10px; border-top: 1px solid gainsboro; border-bottom: 1px solid gainsboro; margin-top: 10px; } .caidan-icon{ width: 20px; height: 20px; } .caidan-text{ flex-grow: 1; margin-left: 10px; } .caidan-arrow{ width: 16px; height: 16px; }

js代码

//获取应用实例 var app = getApp() // pages/huiyuan/index2.js Page({ /** * 页面的初始数据 */ data: { str_u_name:"", str_u_flid:"" }, //退出登录：清除缓存 tuichu:function(){ wx.clearStorage() //wx.switchTab({ // url: '/pages/huiyuan/index', //}) wx.reLaunch({ url: '/pages/huiyuan/index', }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this wx.getStorage({ key: 'u_login', success: function (res) { wx.getStorage({ key: 'u_name', success: function (res) { that.setData({ str_u_name: res.data }) }, }) wx.getStorage({ key: 'u_flid', success: function (res) { //that.setData({ str_u_flid: res.data }) //读取会员类型 wx.request({ url: app.myapp.php + '/wx_huiyuan_fenlei_byid.php', //php版 data:{ cs_flid:res.data }, success: function (res2) { that.setData({ str_u_flid: res2.data }) } }) }, }) }, }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { var that = this wx.getStorage({ key: 'u_login', success: function (res) { wx.getStorage({ key: 'u_name', success: function (res) { that.setData({ str_u_name: res.data }) }, }) }, }) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })