关于login接口,大家可以看官方文档,相信大家程序也都已经写好了这个接口
// pages/login/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
showNameChange(){
this.setData({
"name_change":1
})
},
nameChange(e){
if (!e.detail.value.nickname) {
wx.showToast({
title: '请输入昵称',
icon:"none"
})
return
}
//输入昵称值
this.setData({
"member.nickname":e.detail.value.nickname,
"name_change":0
})
},
onChooseAvatar(e) {
const { avatarUrl } = e.detail
this.setData({
"member.avatar":avatarUrl,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.login({
success: (res) => {
code = res.code;
},
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
index.wxml
<view class="flex-row space-x-27 group">
<view style="position: relative;">
<image class="image_4" style="border-radius: 50%;" src="{{member.avatar||'/static/noface.png'}}" />
<button style="width: 40rpx;height: 40rpx;padding: 0;line-height: 0;position: absolute;right: 0;bottom: 0;"
open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" style="width: 100%;height: 100%;" src="/static/notification.png"></image>
</button>
</view>
<view class="flex-col items-start space-y-21 group_2">
<form bindsubmit="nameChange">
<view style="display: flex;align-items: flex-end;" wx:if="{{!name_change}}">
<text class="text">{{member.nickname||'未更新用户信息'}}</text>
<image bindtap="showNameChange" style="width: 60rpx;height: 20rpx;margin-left: 20rpx;"
src="/static/header-style2.png"></image>
</view>
<block wx:else>
<view style="display: flex;align-items: flex-end;">
<input style="max-width: 200rpx;" type="nickname" name="nickname" placeholder="请输入昵称" />
<button style="background: red;color: #fff;font-size: 20rpx;margin-left: 20rpx;"
form-type="submit">确认</button>
</view>
</block>
</form>
</view>
</view>
index.wxss
page {
width: 100vw;
height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
}
view,
image,
text {
box-sizing: border-box;
flex-shrink: 0;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex-col {
display: flex;
flex-direction: column;
}
.justify-start {
justify-content: flex-start;
}
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-evenly {
justify-content: space-evenly;
}
.justify-around {
justify-content: space-around;
}
.justify-between {
justify-content: space-between;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.page {
border-color: #ff5555;
}
.fui-copyright-group {
text-align: center;
padding: 20rpx 24rpx;
color: #cecece;
}
.fui-copyright-group image {
width: 60rpx;
height: 60rpx;
vertical-align: middle;
margin-right: 10rpx;
}
.fui-copyright2-group {
text-align: center;
padding: 10rpx 24rpx 0;
color: #cecece;
}
.fui-copyright2-group image {
width: 60rpx;
height: 60rpx;
}
.notification {
width: 15px;
height: 15px;
vertical-align: middle;
margin: 0px 0px 6px 5px;
border-left: 1px solid #efefef;
padding-left: 10rpx;
}
.member-head {
height: 260rpx;
background: transparent;
padding-top: 40rpx;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
}
.headinfo.style-2 {
padding: 40rpx;
background: #fe5455;
border: none;
}
.member .headinfo .setbtn {
height: 60rpx;
width: 60rpx;
position: absolute;
top: 8rpx;
right: 10rpx;
font-size: 48rpx;
color: #fff;
line-height: 48rpx;
text-align: center;
}
.member .headinfo.style-2 .face {
height: 160rpx;
width: 160rpx;
border-radius: 160rpx;
float: left;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-shrink: 0;
-webkit-box-lines: single;
-moz-box-lines: single;
flex-wrap: nowrap;
box-sizing: border-box;
-webkit-box-align: center;
align-items: center;
}
.member .headinfo.style-2 .face image {
height: 160rpx;
width: 160rpx;
border-radius: 160rpx;
display: block;
}
.member .headinfo.style-2 .face.radius,.member .headinfo.style-2 .face.radius image {
border-radius: 20rpx;
}
.member .headinfo.style-2 .inner {
height: auto;
position: relative;
width: 100%;
overflow: hidden;
box-sizing: border-box;
display: block;
padding-left: 20rpx;
color: #fff;
}
.member .headinfo.style-2 .inner .name {
font-size: 36rpx;
line-height: 40rpx;
}
.member .headinfo.style-2 .inner .level,.member .headinfo.style-2 .inner .credit {
font-size: 28rpx;
line-height: 36rpx;
}
.member .headinfo.style-2 .inner text {
color: #fef31f;
}
.headinfo {
position: relative;
height: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.headinfo .icon-style2 {
display: inline-block;
width: 230rpx;
height: 72rpx;
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: 999;
}
.headinfo .icon-style2 image {
width: 100%;
height: 100%;
}
.member-head .setting {
height: 48rpx;
width: 48rpx;
overflow: hidden;
position: absolute;
top: 10rpx;
right: 18rpx;
background: none;
border: 0;
padding: 0;
}
.member-head .setting:after {
display: none;
}
.member-head .setting image {
height: 40rpx;
width: 40rpx;
vertical-align: top;
}
.member-head .child {
width: 30%;
text-align: center;
}
.member-head .child.userinfo {
width: 40%;
color: #fff;
padding-top: 20rpx;
}
.member-head .child.userinfo .avatar {
height: 96rpx;
width: 96rpx;
background: #fff;
margin: auto;
border-radius: 96rpx;
border: 4rpx solid #fff;
}
.member-head .child.userinfo .avatar image {
height: 96rpx;
width: 96rpx;
border-radius: 96rpx;
display: block;
}
.member-head .child.userinfo .avatar.radius image,.member-head .child.userinfo .avatar.radius {
border-radius: 20rpx;
}
.member-head .child.userinfo .avatar.radius image,.member-head .child.userinfo .avatar.radius {
border-radius: 20rpx;
}
.member-head .child.userinfo .nickname {
height: 40rpx;
padding-top: 8rpx;
font-size: 24rpx;
color: inherit;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.member-head .child.userinfo .level {
font-size: 24rpx;
color: inherit;
text-align: center;
}
.member-head .child .title {
padding-top: 48rpx;
font-size: 28rpx;
color: #fff;
text-align: center;
}
.member-head .child .number {
font-size: 28rpx;
color: #fef31f;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.member-head .child .btn {
width: 104rpx;
height: 40rpx;
padding: 0;
margin: 8rpx auto 0;
color: #fff;
font-size: 24rpx;
line-height: 38rpx;
text-align: center;
border-radius: 40rpx;
border: 2rpx solid #fff;
}
.facebtn {
width: 104rpx;
height: 40rpx;
padding: 0;
margin: 8rpx 0 0;
color: #fff;
font-size: 24rpx;
line-height: 38rpx;
text-align: center;
border-radius: 40rpx;
border: 2rpx solid #fff;
}
.fui-cell-group .fui-cell .fui-cell-remark {
color: #999;
text-align: right;
font-size: 26rpx;
margin-right: 8rpx;
}
.contact {
background: red;
}
.member_header {
position: absolute;
width: 280rpx;
height: 120rpx;
background: #ff5555;
z-index: 80;
border-radius: 50%;
bottom: 0;
left: 50%;
margin-left: -160rpx;
overflow: hidden;
transform: scale(10,10);
transform-origin: center bottom;
border: 2px solid #ff5555;
}
.cp-member1{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0%;
z-index: 80;
border-radius: 0 200rpx 200rpx 0;
}
.fui-cell-group:nth-of-type(1) {
margin-top: 0;
}
.fui-icon-group .fui-icon-col .icox {
color: #aaa;
font-size: 48rpx;
margin-top: 14rpx;
}
.fui-cell-group .fui-cell .fui-cell-text {
line-height: 1;
}
.fui-cell-tip {
padding-top: 0;
padding-bottom: 24rpx;
}
.member .fui-icon-group .fui-icon-col .icox {
font-size: 60rpx;
line-height: 70rpx;
}
.fui-cell-group .fui-cell .fui-cell-icon .icox {
font-size: 38rpx;
}
.fui-cell-group .fui-cell .fui-cell-icon {
margin-right: 20rpx;
}
.banner-ul {
padding: 28rpx 20rpx;
overflow: hidden;
}
.banner-ul .banner-li:first-child {
margin-left: 0;
}
.banner-ul .banner-li {
border: 4rpx solid #77cd44;
position: relative;
overflow: hidden;
width: 320rpx;
border-radius: 8rpx;
text-align: center;
margin-left: 10rpx;
float: left;
}
.banner-ul .banner-li view {
width: 200rpx;
height: 66rpx;
position: absolute;
top: 0;
left: 0;
background: #77cd44;
transform: rotate(-25deg);
transform-origin: left bottom;
}
.banner-ul .banner-li span {
position: absolute;
top: 4rpx;
left: 4rpx;
font-size: 20rpx;
color: #fff;
}
.banner-ul .banner-li image {
margin: 16rpx 0 16rpx;
width: 42rpx;
height: 42rpx;
vertical-align: middle;
border-radius: 50%;
}
.banner-ul .banner-li p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 28rpx;
padding: 0 28rpx;
line-height: 1;
padding-bottom: 16rpx;
display: block;
}
.banner-ul .banner-li-blue {
border: 4rpx solid #68bfe7;
}
.banner-ul .banner-li-blue view {
background: #68bfe7;
}
.banner-ul.style2 view {
background: #77cd44;
border: 0;
padding: 2px;
}
.banner-ul.style2 .banner-li-blue view {
background: #68bfe7;
}
.banner-ul.style2 view span {
width: 40px;
height: 18px;
transform: rotate(0deg);
background: rgba(0,0,0,0.3);
position: absolute;
left: 0;
top: 8px;
}
.banner-ul.style2 view span {
width: 40px;
height: 18px;
line-height: 18px;
text-align: center;
top: 8px;
left: 0;
}
.banner-ul.style2 .banner-li-blue {
background: #68bfe7;
}
.model {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
position: fixed;
top: 0;
left: 0;
z-index: 199;
display: none;
}
.model .inner {
width: 624rpx;
height: 600rpx;
background: #fff;
border-radius: 8rpx;
margin: 260rpx auto;
overflow: hidden;
}
.model .inner .title {
font-size: 36rpx;
color: #000;
line-height: 100rpx;
text-align: center;
font-weight: 600;
margin-top: 20rpx;
}
.model .inner .image {
text-align: center;
margin-top: 20rpx;
}
.model .inner image {
width: 342rpx;
height: 202rpx;
}
.model .inner .subtitle {
margin-top: 50rpx;
padding: 0 80rpx;
color: #888;
font-size: 26rpx;
line-height: 40rpx;
}
.model-btns {
border-top: 1rpx solid #ebebeb;
height: 100rpx;
margin-top: 28rpx;
display: flex;
text-align: center;
font-size: 30rpx;
color: #000;
line-height: 100rpx;
}
.model-btns .cancel {
width: 50%;
position: relative;
}
.model-btns .cancel:after {
content: " ";
position: absolute;
top: -1rpx;
right: 0;
width: 1px;
height: 210rpx;
border-right: 1px solid #ebebeb;
color: #ebebeb;
transform-origin: 0 0;
transform: scaleY(0.5);
}
.model-btns .confirm {
width: 50%;
color: #50b33c;
}
.fui-icon-group .fui-icon-col {
width: 20%;
}
.fui-icon-group .fui-icon-col.cycle:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
bottom: 0;
width: 1rpx;
color: #d9d9d9;
border-left: 1rpx solid #d9d9d9;
transform: scaleY(0.5);
}
.member_card {
position: absolute;
z-index: 99;
left: 26rpx;
bottom: 0;
display: flex;
width: 698rpx;
height: 96rpx;
margin: 0 auto 0;
line-height: 96rpx;
border-radius: 15rpx;
font-size: 30rpx;
box-sizing: border-box;
padding: 0 30rpx;
color: #fff;
align-items: center;
background: linear-gradient(to right,#c1a167,#e9d5aa);
}
.member_card .icon {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
.member_card .title {
flex: 1;
line-height: 1;
}
.member_card .card-num {
min-width: 136rpx;
opacity: 0.8;
font-size: 26rpx;
text-align: right;
line-height: 1;
}
.cover-img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 22rpx;
z-index: 999;
width: 100%;
}
.order-badge{
background: red none repeat scroll 0 0;
border-radius: 20rpx;
color: white;
font-size: 28rpx;
height: 36rpx;
right: 36rpx;
line-height: 36rpx;
min-width: 36rpx;
position: absolute;
top: 0rpx;
text-align: center;
vertical-align: top;
z-index: 100;
padding: 0;
}
.page {
/* padding-bottom: 1071.14rpx; */
/* background-color: #ffffff; */
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
position: relative;
}
.image_3 {
width: 100vw;
height: 669.22rpx;
}
.image_5 {
width: 100vw;
height: 387.97rpx;
position: absolute;
right: 0;
top: 383.98rpx;
}
.image {
width: 100vw;
height: 522.61rpx;
position: absolute;
left: 0;
top: 0;
}
.section {
background-color: #f5f5f5b3;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
}
.image_2 {
width: 750rpx;
height: 161.57rpx;
}
.group {
margin-top: 65.82rpx;
padding: 0 37.9rpx;
}
.space-x-27 > view:not(:first-child),
.space-x-27 > text:not(:first-child),
.space-x-27 > image:not(:first-child) {
margin-left: 26.93rpx;
}
.image_4 {
width: 129.65rpx;
height: 129.65rpx;
}
.group_2 {
flex: 1 1 auto;
align-self: center;
}
.space-y-21 > view:not(:first-child),
.space-y-21 > text:not(:first-child),
.space-y-21 > image:not(:first-child) {
margin-top: 20.94rpx;
}
.text {
color: #000000;
font-size: 29.92rpx;
font-family: PingFang;
line-height: 28.92rpx;
}
.text-wrapper {
padding: 6.98rpx 0;
filter: drop-shadow(0px 3.99rpx #ffc5c426);
border-radius: 17.45rpx;
background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6351ee71fe65f70012e497d0/16663139570422398045.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 128.66rpx;
}
.text_2 {
color: #ed3e30;
font-size: 21.94rpx;
font-family: PingFang;
line-height: 21.94rpx;
}
.group_3 {
margin-top: 55.85rpx;
}
.equal-division {
padding: 0 12.97rpx;
}
.space-x-14 > view:not(:first-child),
.space-x-14 > text:not(:first-child),
.space-x-14 > image:not(:first-child) {
margin-left: 13.96rpx;
}
.equal-division-item {
flex: 1 1 240.86rpx;
padding: 11.97rpx 17.95rpx;
}
.space-y-28 > view:not(:first-child),
.space-y-28 > text:not(:first-child),
.space-y-28 > image:not(:first-child) {
margin-top: 27.93rpx;
}
.font_1 {
font-size: 23.94rpx;
font-family: PingFang;
line-height: 22.94rpx;
color: #333333;
}
.font_2 {
font-size: 39.89rpx;
font-family: PingFang;
letter-spacing: -1.99rpx;
line-height: 29.92rpx;
color: #282a2b;
}
.text_3 {
align-self: flex-end;
line-height: 30.92rpx;
}
.space-y-30 > view:not(:first-child),
.space-y-30 > text:not(:first-child),
.space-y-30 > image:not(:first-child) {
margin-top: 29.92rpx;
}
.text_4 {
margin-right: 59.84rpx;
align-self: flex-end;
}
.space-y-25 > view:not(:first-child),
.space-y-25 > text:not(:first-child),
.space-y-25 > image:not(:first-child) {
margin-top: 24.93rpx;
}
.image_6 {
/* margin-right: 90.76rpx;
align-self: flex-end;
letter-spacing: -1.99rpx; */
width: 38.9rpx;
height: 38.9rpx;
}
.group_4 {
padding: 0 33.91rpx;
}
.view {
margin-top: 45.88rpx;
}
.space-x-10 > view:not(:first-child),
.space-x-10 > text:not(:first-child),
.space-x-10 > image:not(:first-child) {
margin-left: 9.97rpx;
}
.section_2 {
background-image: linear-gradient(10deg, #ec3121 0%, #ffc9c9 100%);
border-radius: 5.49rpx 3.49rpx 4.49rpx 4.49rpx;
width: 8.98rpx;
height: 31.91rpx;
}
.font_3 {
font-size: 35.9rpx;
font-family: PingFang;
line-height: 33.91rpx;
color: #000000;
}
.section_3 {
margin: 32.91rpx 30.92rpx 0;
padding: 52.86rpx 0 49.87rpx;
background-color: #ffffff;
border-radius: 11.97rpx;
}
.space-x-24 > view:not(:first-child),
.space-x-24 > text:not(:first-child),
.space-x-24 > image:not(:first-child) {
/* margin-left: 23.94rpx; */
}
.equal-division-item_2 {
flex: 1 1 155.09rpx;
padding: 9.97rpx 29.92rpx;
}
.space-y-26 > view:not(:first-child),
.space-y-26 > text:not(:first-child),
.space-y-26 > image:not(:first-child) {
margin-top: 25.93rpx;
}
.image_7 {
width: 47.87rpx;
height: 47.87rpx;
}
.font_4 {
font-size: 23.94rpx;
font-family: PingFang;
line-height: 22.94rpx;
color: #595959;
}
.group_5 {
margin-top: 59.84rpx;
padding: 0 30.92rpx;
}
.space-y-31 > view:not(:first-child),
.space-y-31 > text:not(:first-child),
.space-y-31 > image:not(:first-child) {
margin-top: 30.92rpx;
}
.group_6 {
padding: 0 2.99rpx;
}
.space-x-11 > view:not(:first-child),
.space-x-11 > text:not(:first-child),
.space-x-11 > image:not(:first-child) {
margin-left: 10.97rpx;
}
.space-x-30 > view:not(:first-child),
.space-x-30 > text:not(:first-child),
.space-x-30 > image:not(:first-child) {
margin-left: 29.92rpx;
}
.equal-division-item_3 {
flex: 1 1 329.12rpx;
border-radius: 11.97rpx;
width: 329.12rpx;
height: 159.57rpx;
}
.group_7 {
margin-top: 60.84rpx;
}
.space-y-34 > view:not(:first-child),
.space-y-34 > text:not(:first-child),
.space-y-34 > image:not(:first-child) {
margin-top: 33.91rpx;
}
.space-y-32 > view:not(:first-child),
.space-y-32 > text:not(:first-child),
.space-y-32 > image:not(:first-child) {
margin-top: 31.91rpx;
}
.grid {
margin: 0 30.92rpx;
padding: 32.91rpx 0 30.92rpx;
background-color: #ffffff;
border-radius: 11.97rpx;
height: 343.09rpx;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.grid-item {
padding: 25.93rpx 0;
}
.space-y-18 > view:not(:first-child),
.space-y-18 > text:not(:first-child),
.space-y-18 > image:not(:first-child) {
margin-top: 17.95rpx;
}
.equal-division_2 {
padding: 0 7.98rpx;
background-color: #ffffff;
}
.space-x-6 > view:not(:first-child),
.space-x-6 > text:not(:first-child),
.space-x-6 > image:not(:first-child) {
margin-left: 5.98rpx;
}
.equal-division-item_4 {
flex: 1 1 183.01rpx;
padding: 8.98rpx 21.94rpx;
}
.space-y-10 > view:not(:first-child),
.space-y-10 > text:not(:first-child),
.space-y-10 > image:not(:first-child) {
margin-top: 9.97rpx;
}
.font_5 {
font-size: 19.95rpx;
font-family: PingFang;
line-height: 18.95rpx;
color: #595959;
}
.text_5 {
color: #ec3121;
}
/* -- flex弹性布局 -- */
.flex {
display: flex;
}
.basis-xs {
flex-basis: 20%;
}
.basis-sm {
flex-basis: 40%;
}
.basis-df {
flex-basis: 50%;
}
.basis-lg {
flex-basis: 60%;
}
.basis-xl {
flex-basis: 80%;
}
.flex-sub {
flex: 1;
}
.flex-twice {
flex: 2;
}
.flex-treble {
flex: 3;
}
.flex-direction {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.align-start {
align-items: flex-start;
}
.align-end {
align-items: flex-end;
}
.align-center {
align-items: center;
}
.align-stretch {
align-items: stretch;
}
.self-start {
align-self: flex-start;
}
.self-center {
align-self: flex-center;
}
.self-end {
align-self: flex-end;
}
.self-stretch {
align-self: stretch;
}
.align-stretch {
align-items: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}