实现上面两个页面

第一个页面

 

 

  1. <view>
  2. <!-- 上侧部分 -->
  3.   <view class="top-view">
  4.   <!-- 用户信息开始 -->
  5.     <view class="user">
  6.     <!-- 头像开始 -->
  7.       <view class="row">
  8.         <image class="avatar" wx:if="{{userInfo}}" src="{{userInfo.avatarUrl}}"></image>
  9.         <image class="avatar" wx:else="{{userInfo}}" src="/static/men.jpg"></image>
  10.       </view>
  11.     <!-- 头像结束 -->
  12.  
  13.     <!-- 用户名称开始 -->
  14.       <view class="name" wx:if="{{userInfo}}">
  15.         <view bindtap="onClickLogout">{{userInfo.nickName}}</view>
  16.       </view>
  17.       <view class="name" wx:else="{{userInfo}}">
  18.           <navigator url="/pages/auth/auth">登录</navigator>
  19.           |
  20.           <navigator url="/pages/auth/auth">注册</navigator>
  21.       </view>
  22.     <!-- 用户名称结束 -->
  23.     <!-- 个人主页开始 -->
  24.      <view class="site">查看个人主页</view>
  25.      <!-- 个人主页结束 -->
  26.     </view>
  27.      <!-- 关注 粉丝 赞与收藏开始 -->
  28.     <view class="numbers">
  29.       <view class="row">
  30.         <text>0</text>
  31.         <text>关注</text>
  32.       </view>
  33.       <view class="row">
  34.         <text>0</text>
  35.         <text>粉丝</text>
  36.       </view>
  37.       <view class="row">
  38.         <text>0</text>
  39.         <text>赞与收藏</text>
  40.       </view>
  41.       <view class="row">
  42.         <text>0</text>
  43.         <text>好友动态</text>
  44.       </view>
  45.     </view>
  46.  
  47.   <!-- 关注 粉丝 赞与收藏结束 -->
  48.   <!-- 用户信息结束 -->
  49.   </view>
  50. </view> 
  51.  
  52. <!-- 待支付开始 -->
  53. <view class="middle-view">
  54.   <view class="item">
  55.     <image src="/static/images/icon/transaction_order1_icon_show.png"></image>
  56.     <text>待支付</text>
  57.   </view>
  58.     <view class="item">
  59.     <image src="/static/images/icon/transaction_order2_icon_show.png"></image>
  60.     <text>待支付</text>
  61.   </view>
  62.     <view class="item">
  63.     <image src="/static/images/icon/transaction_order3_icon_show.png"></image>
  64.     <text>待支付</text>
  65.   </view>
  66.     <view class="item">
  67.     <image src="/static/images/icon/transaction_order4_icon_show.png"></image>
  68.     <text>待支付</text>
  69.   </view>
  70. </view>
  71. <!-- 待支付结束 -->
  72.  
  73. <!-- 钱包 优惠券 开始 -->
  74. <view class="function-view">
  75.   <view class="item">
  76.     <view class="left">我的钱包</view> 
  77.       <view class="right">
  78.         <text>¥20</text>
  79.         <image class="go-icon" src=\'/static/images/icon/to_icon_show_small.png\'></image>
  80.       </view>
  81.   </view>
  82.   <view class="item">
  83.       <view class="left">我的优惠券</view>
  84.       <view class="right">
  85.         <text>暂无课用</text>
  86.         <image class="go-icon" src=\'/static/images/icon/to_icon_show_small.png\'></image>
  87.       </view>
  88.     </view>
  89.     <view class="item">
  90.       <view class="left">领劵中心</view>
  91.       <view class="right">
  92.         <text>你的福利都在这里</text>
  93.         <image class="go-icon" src=\'/static/images/icon/to_icon_show_small.png\'></image>
  94.       </view>
  95.     </view>
  96. </view>
  97. <!-- 钱包 优惠券 结束 -->
  98.  
  99. <!-- 官方微信客服开始 -->
  100.   <view class="contact-view">
  101.     <button open-type="contact">
  102.       <image src="/static/images/icon/wechat_contact_icon_show.png"></image>
  103.     </button>
  104.     <button bindtap="onClickCall">
  105.       <image src="/static/images/icon/phone_contact_icon_show.png"></image>
  106.     </button>
  107.   </view>
  108.   <!-- 官方微信客服结束 -->

个人主页页面 wxml 

  1. /* 顶部样式 开始 */
  2. .top-view{
  3.   background-color: #01ccb6;
  4.   color: white;
  5.   padding: 40rpx;
  6. }
  7. .top-view .user{
  8.   display: flex;
  9.   flex-direction: row;
  10.   justify-content: space-between;
  11.   align-items: center;
  12. }
  13. .top-view .user .row{
  14.   display: flex;
  15.   flex-direction: row;
  16.   justify-content: flex-start;
  17.   align-items: center;
  18. }
  19. .top-view .user .avatar{
  20.   width: 100rpx;
  21.   height: 100rpx;
  22.   border-radius: 50%;
  23. }
  24. .top-view .user .name{
  25.   display: flex;
  26.   flex-direction: row;
  27.   justify-content: space-around;
  28.   width: 200rpx;
  29. }
  30. .top-view .site{
  31.   background-color: rgba(0, 0, 0, 0.16);
  32.   padding: 20rpx;
  33.   border-top-left-radius: 32rpx;
  34.   border-bottom-left-radius: 32rpx;
  35. }
  36. .top-view .numbers{
  37.   display: flex;
  38.   flex-direction: row;
  39.   justify-content: space-between;
  40.   font-size: 28rpx;
  41.   padding: 40rpx;
  42.   padding-bottom: 0rpx;
  43. }
  44. .top-view .numbers .row{
  45.    display: flex;
  46.   flex-direction: column;
  47.   align-items: center;
  48. }
  49. .middle-view{
  50.   padding: 40rpx;
  51.   display: flex;
  52.   flex-direction: row;
  53.   justify-content: space-between;
  54.   font-size: 25rpx;
  55.   border-bottom: 18rpx solid #f5f5f5;
  56. }
  57. /* 顶部样式 结束 */
  58. /* 待支付 样式 开始*/
  59. .middle-view{
  60.   padding: 40rpx;
  61.   display: flex;
  62.   flex-direction: row;
  63.   justify-content: space-between;
  64.   font-size: 25rpx;
  65.   border-bottom: 18rpx solid #f5f5f5;
  66. }
  68. .middle-view .item{
  69.   display: flex;
  70.   flex-direction: column;
  71.   align-items: center;
  72. }
  73. .middle-view .item image{
  74.   width: 50rpx;
  75.   height: 50rpx;
  76.   margin-bottom: 20rpx;
  77. }
  78. /* 待支付 样式 结束*/
  79. /*  钱包 优惠券 开始  */
  80. .function-view{
  81.   padding: 40rpx;
  82.   font-size: 28rpx;
  83. }
  85. .function-view .item{
  86.   padding: 30rpx 0;
  87.   border-bottom: 1px solid #efefef;
  88.   
  89.   display: flex;
  90.   flex-direction: row;
  91.   justify-content: space-between;
  92. }
  94. .function-view .item .right{
  95.   color: #8c8c8c;
  96. }
  97. .function-view .item .go-icon{
  98.   margin: 0 20rpx;
  99.   width: 16rpx;
  100.   height: 16rpx;
  101. }
  102. /*  钱包 优惠券 结束  */
  103. /*  官方微信客服开始  */
  104. .contact-view{
  105.   padding: 40rpx;
  106.   display: flex;
  107.   flex-direction: row;
  108.   justify-content: space-around;
  109. }
  111. .contact-view button {
  112.   background-color: transparent;
  113.   border: 0;
  114.   padding: 0;
  115. }
  116. .contact-view button::after{
  117.   border: 0;
  118. }
  119. .contact-view  image{
  120.   width: 204rpx;
  121.   height: 66rpx;
  122. }
  123.   /*  官方微信客服结束  */

个人主页页面 wxss

第二个页面

 

 

  1. <!--pages/auth/auth.wxml-->
  2. <view class="logo">
  3.   <image src=\'/static/girl.jpg\'></image>
  4.   <text>交流交易社区</text>
  5. </view>
  6.  
  7. <view class="form">
  8.   <view class="row-group">
  9.     <text>手机</text>
  10.     <input placeholder="请填写手机号码" placeholder-class=\'txt\' maxlength=\'11\' value="{{phone}}" bindinput="bindPhoneInput" />
  11.   </view>
  12.  
  13.    <view class="row-group">
  14.     <text>验证码</text>
  15.     <input placeholder="请填写验证码" placeholder-class=\'txt\' maxlength=\'4\' value="{{code}}" bindinput="bindCodeInput" />
  16.     <view class="code" bindtap="onClickCheckCode">获取验证码</view>
  17.   </view>
  18.  
  19.   <view>
  20.     <button class="submit"  open-type="getUserInfo" bindgetuserinfo="onClickSubmit">登录 | 注册</button>
  21.   </view>
  22. </view>

登陆页面 wxml 

  1. /* pages/auth/auth.wxss */
  2. .logo{
  3.   display: flex;
  4.   flex-direction: column;
  5.   align-items: center;
  6. }
  7. .logo image{
  8.   margin-top: 140rpx;
  9.   width: 216rpx;
  10.   height: 200rpx;
  11. }
  12. .form{
  13.   padding: 40rpx;
  14. }
  15. .form .row-group{
  16.   padding: 20rpx 0;
  17.   position: relative;
  18.   border-bottom: 1rpx solid #ddd;
  19. }
  21. .form .row-group text{
  22.   font-size: 28rpx;
  23.   padding:10rpx 0;
  24. }
  26. .form .row-group input{
  27.   padding: 10rpx 0;
  28. }
  30. .form .row-group .txt{
  31.   color: #ccc;
  32. }
  34. .form .row-group .code{
  35.   position: absolute;
  36.   right: 0;
  37.   bottom: 26rpx;
  38.   z-index: 2;
  40.   width: 206rpx;
  41.   height: 60rpx;
  42.   border: 2rpx solid #00c8b6;
  43.   border-radius: 12rpx;
  44.   font-size: 26rpx;
  45.   font-weight: 400;
  46.   color: #00c8b6;
  47.   display: flex;
  48.   align-items: center;
  49.   justify-content: center;
  50. }
  52. .form .submit{
  53.   margin-top: 80rpx;
  54.   color: #fff;
  55.   border: 2rpx solid #00c8b6;
  56.   background-color: #00c8b6;
  57.   font-size: 32rpx;
  58.   font-weight: bold;
  59. }

登陆页面 wxss

 js代码

 

版权声明：本文为a438842265原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/a438842265/p/12364204.html