<view>
<!-- 上侧部分 -->
  <view class="top-view">
  <!-- 用户信息开始 -->
    <view class="user">
    <!-- 头像开始 -->
      <view class="row">
        <image class="avatar" wx:if="{{userInfo}}" src="{{userInfo.avatarUrl}}"></image>
        <image class="avatar" wx:else="{{userInfo}}" src="/static/men.jpg"></image>
      </view>
    <!-- 头像结束 -->

    <!-- 用户名称开始 -->
      <view class="name" wx:if="{{userInfo}}">
        <view bindtap="onClickLogout">{{userInfo.nickName}}</view>
      </view>
      <view class="name" wx:else="{{userInfo}}">
          <navigator url="/pages/auth/auth">登录</navigator>
          |
          <navigator url="/pages/auth/auth">注册</navigator>
      </view>
    <!-- 用户名称结束 -->
    <!-- 个人主页开始 -->
     <view class="site">查看个人主页</view>
     <!-- 个人主页结束 -->
    </view>
     <!-- 关注 粉丝 赞与收藏开始 -->
    <view class="numbers">
      <view class="row">
        <text>0</text>
        <text>关注</text>
      </view>
      <view class="row">
        <text>0</text>
        <text>粉丝</text>
      </view>
      <view class="row">
        <text>0</text>
        <text>赞与收藏</text>
      </view>
      <view class="row">
        <text>0</text>
        <text>好友动态</text>
      </view>
    </view>

  <!-- 关注 粉丝 赞与收藏结束 -->
  <!-- 用户信息结束 -->
  </view>
</view> 

<!-- 待支付开始 -->
<view class="middle-view">
  <view class="item">
    <image src="/static/images/icon/transaction_order1_icon_show.png"></image>
    <text>待支付</text>
  </view>
    <view class="item">
    <image src="/static/images/icon/transaction_order2_icon_show.png"></image>
    <text>待支付</text>
  </view>
    <view class="item">
    <image src="/static/images/icon/transaction_order3_icon_show.png"></image>
    <text>待支付</text>
  </view>
    <view class="item">
    <image src="/static/images/icon/transaction_order4_icon_show.png"></image>
    <text>待支付</text>
  </view>
</view>
<!-- 待支付结束 -->

<!-- 钱包 优惠券 开始 -->
<view class="function-view">
  <view class="item">
    <view class="left">我的钱包</view> 
      <view class="right">
        <text>¥20</text>
        <image class="go-icon" src=\'/static/images/icon/to_icon_show_small.png\'></image>
      </view>
  </view>
  <view class="item">
      <view class="left">我的优惠券</view>
      <view class="right">
        <text>暂无课用</text>
        <image class="go-icon" src=\'/static/images/icon/to_icon_show_small.png\'></image>
      </view>
    </view>
    <view class="item">
      <view class="left">领劵中心</view>
      <view class="right">
        <text>你的福利都在这里</text>
        <image class="go-icon" src=\'/static/images/icon/to_icon_show_small.png\'></image>
      </view>
    </view>
</view>
<!-- 钱包 优惠券 结束 -->

<!-- 官方微信客服开始 -->
  <view class="contact-view">
    <button open-type="contact">
      <image src="/static/images/icon/wechat_contact_icon_show.png"></image>
    </button>
    <button bindtap="onClickCall">
      <image src="/static/images/icon/phone_contact_icon_show.png"></image>
    </button>
  </view>
  <!-- 官方微信客服结束 -->

/* 顶部样式 开始 */
.top-view{
  background-color: #01ccb6;
  color: white;
  padding: 40rpx;
}
.top-view .user{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.top-view .user .row{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.top-view .user .avatar{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.top-view .user .name{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 200rpx;
}
.top-view .site{
  background-color: rgba(0, 0, 0, 0.16);
  padding: 20rpx;
  border-top-left-radius: 32rpx;
  border-bottom-left-radius: 32rpx;
}
.top-view .numbers{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 28rpx;
  padding: 40rpx;
  padding-bottom: 0rpx;
}
.top-view .numbers .row{
   display: flex;
  flex-direction: column;
  align-items: center;
}
.middle-view{
  padding: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 25rpx;
  border-bottom: 18rpx solid #f5f5f5;
}
/* 顶部样式 结束 */
/* 待支付 样式 开始*/
.middle-view{
  padding: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 25rpx;
  border-bottom: 18rpx solid #f5f5f5;
}

.middle-view .item{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.middle-view .item image{
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 20rpx;
}
/* 待支付 样式 结束*/
/*  钱包 优惠券 开始  */
.function-view{
  padding: 40rpx;
  font-size: 28rpx;
}

.function-view .item{
  padding: 30rpx 0;
  border-bottom: 1px solid #efefef;
  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.function-view .item .right{
  color: #8c8c8c;
}
.function-view .item .go-icon{
  margin: 0 20rpx;
  width: 16rpx;
  height: 16rpx;
}
/*  钱包 优惠券 结束  */
/*  官方微信客服开始  */
.contact-view{
  padding: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.contact-view button {
  background-color: transparent;
  border: 0;
  padding: 0;
}
.contact-view button::after{
  border: 0;
}
.contact-view  image{
  width: 204rpx;
  height: 66rpx;
}
  /*  官方微信客服结束  */

<!--pages/auth/auth.wxml-->
<view class="logo">
  <image src=\'/static/girl.jpg\'></image>
  <text>交流交易社区</text>
</view>

<view class="form">
  <view class="row-group">
    <text>手机</text>
    <input placeholder="请填写手机号码" placeholder-class=\'txt\' maxlength=\'11\' value="{{phone}}" bindinput="bindPhoneInput" />
  </view>

   <view class="row-group">
    <text>验证码</text>
    <input placeholder="请填写验证码" placeholder-class=\'txt\' maxlength=\'4\' value="{{code}}" bindinput="bindCodeInput" />
    <view class="code" bindtap="onClickCheckCode">获取验证码</view>
  </view>

  <view>
    <button class="submit"  open-type="getUserInfo" bindgetuserinfo="onClickSubmit">登录 | 注册</button>
  </view>
</view>

/* pages/auth/auth.wxss */
.logo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo image{
  margin-top: 140rpx;
  width: 216rpx;
  height: 200rpx;
}
.form{
  padding: 40rpx;
}
.form .row-group{
  padding: 20rpx 0;
  position: relative;
  border-bottom: 1rpx solid #ddd;
}

.form .row-group text{
  font-size: 28rpx;
  padding:10rpx 0;
}

.form .row-group input{
  padding: 10rpx 0;
}

.form .row-group .txt{
  color: #ccc;
}

.form .row-group .code{
  position: absolute;
  right: 0;
  bottom: 26rpx;
  z-index: 2;

  width: 206rpx;
  height: 60rpx;
  border: 2rpx solid #00c8b6;
  border-radius: 12rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #00c8b6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form .submit{
  margin-top: 80rpx;
  color: #fff;
  border: 2rpx solid #00c8b6;
  background-color: #00c8b6;
  font-size: 32rpx;
  font-weight: bold;
}