【金秋打卡】第6天 全新升级，基于Vue3新标准，打造后台综合解决方案 第六讲

课程名称： 全新升级，基于Vue3新标准，打造后台综合解决方案

课程章节： vue3 + element plus 综合实现解决方案与个人中心页面实现

主讲老师： Sunday

课程内容：

今天学习的内容包括：

开发个人中心页面

课程收获：

6.1 心得：

// pages/userHome/userHome.js

var config = require("../../utils/config.js");
var app = getApp();
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
    userInfo: {},
		isLogin: false
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {

	},

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function () {

	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function () {
    this.loadData();
	},
  loadData: function () {
    var that = this;
    app.getOpenId(function (openid) {
      if (openid) {
        config.httpGet(app.getUrl('api/BiddMemberCenter/GetUser'), {
          openId: openid,
          userkey: ""
        }, function (res) {
          if (res.result) {
            res.data.Photo = app.globalData.wxUserInfo.headImage ? app.globalData.wxUserInfo.headImage : res.data.Photo;
            that.setData({
              isLogin: true,
              userInfo: res.data
            });
            wx.setStorageSync('userInfo', res.data);
          }
        });


      } else {
        that.setData({
          isLogin: false
        });
      }
    }, "userhome");

  },
	bindUserTap: function (e) {
		var url = e.currentTarget.dataset.url;
		if (!this.data.isLogin) {
		  url = '../login/login';
		}
		wx.navigateTo({
		  url: url
		})
	},

	  goLogin: function () {
		wx.navigateTo({
		  url: '../login/login'
		})
	  },

	  exitLoginout: function () {
		var that = this;
		wx.showModal({
		  title: '提示',
		  content: '确定退出登录吗？',
		  success: function (res) {
			if (res.confirm) {
			  wx.removeStorageSync('wxOpenId');
			  wx.removeStorageSync("userInfo");
			  app.globalData.wxUserInfo = null;
			  app.globalData.openId = "";
			  that.setData({
				isLogin: false
			  });
			}
		  }
		})
	  },
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function () {

	},

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function () {

	},

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function () {

	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () {

	},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function () {

	}
})

/* pages/userHome/userHome.wxss */

.user_info {
	display: flex;
	align-items: center;
	width: 686rpx;
	margin: 0 auto 47rpx auto;
	line-height: 1;
}

.user_info image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin-right: 26rpx;
}

.login,
.user_name {
	color: #2E2E2E;
	font-size: 44rpx;
	margin-bottom: 21rpx;
}

.welcome {
	font-size: 24rpx;
	color: #C4C4C4;
}

.coupon {
	width: 686rpx;
	height: 240rpx;
	background: #FFFFFF;
	border: 2rpx solid #C8C8C8;
	border-radius: 12rpx;
	margin: 0 auto;
}

.coupon_title {
	display: flex;
	justify-content: space-between;
	margin: 30rpx 52rpx 16rpx 30rpx;
}

.coupon_package {
	font-size: 30rpx;
	color: #2E2E2E;
}

.view_all {
	font-size: 26rpx;
	color: #C4C4C4;
}

.coupon_list {
	display: flex;
	justify-content: space-around;
}

.coupon_detail {
	text-align: center;
	font-size: 26rpx;
	color: #C4C4C4;
	line-height: 1;
}

.coupon_detail image {
	width: 88rpx;
	height: 88rpx;
	margin-bottom: 12rpx;
}

.list{
	width: 686rpx;
	height: 88rpx;
	background: #FFFFFF;
	border: 2rpx solid #C8C8C8;
	border-radius: 12rpx;
	margin: 16rpx auto 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.contact {
	width: 686rpx;
	padding: 0;
	height: 88rpx;
	background: #FFFFFF;
	border: 2rpx solid #C8C8C8;
	border-radius: 12rpx;
	margin: 16rpx auto 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.list {
	width: 686rpx;
	height: 88rpx;
	background: #FFFFFF;
	border: 2rpx solid #C8C8C8;
	border-radius: 12rpx;
	margin: 16rpx auto 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.list_left {
	display: flex;
	align-items: center;
	margin-left: 30rpx;
	font-size: 30rpx;
	color: #2E2E2E;
	line-height: 1;
}

.list_icon {
	width: 30rpx;
	height: 30rpx;
	margin-right: 18rpx;
}

.jump {
	width: 14rpx;
	height: 26rpx;
	margin-right: 30rpx;
}