我的 修改 样式调整

component/my/my.js

@@ -9,13 +9,8 @@ export const myInit = (that) => {
       keep: '我的收藏',
       collage: '我的拼团',
       wallet: '我的钱包',
-      address: ['北京海淀', '中关村', '三小'],
       schoolCity: '',
       schoolName: '',
-      playNum: 31549,
-      attentionCount: 10254,
-      point: 6317,
-      flowerNum: 56245,
       user: {}
     }
   });

component/my/my.wxml

@@ -1,24 +1,56 @@
+<wxs module="wxs">
+  function formatDate(time) {
+    var t = getDate(time); 
+    var tf = function(i){return (i < 10 ? '0' : '') + i};
+    var year = t.getFullYear();
+    var month = tf(t.getMonth() + 1);
+    var day = tf(t.getDate());
+    var hour = tf(t.getHours());
+    var minute = tf(t.getMinutes());
+    return month + '-' + day + ' ' + hour + ':' + minute;
+  }
+  function getBirthday(birthday){
+    var t = getDate(birthday); 
+    var tf = function(i){return (i < 10 ? '0' : '') + i};
+    var year = t.getFullYear();
+    var month = tf(t.getMonth() + 1);
+    var day = tf(t.getDate());
+    return year + '年' + month + '月' + day + '日';
+  }
+  module.exports.formatDate = formatDate;
+  module.exports.getBirthday = getBirthday;
+</wxs>
 <template name="my">
   <view class='mine-container'>
-    <view class='mine-center'>
-      <view class='mine-info'>
-        <view class='mine-bg'>
-          <view class='mine-avatar'>
+    <view class='follow-details'>
+      <view class='follow-info'>
+        <view class='avatar-bg'>
+          <view class='avatar-box'>
             <image class='avatar-image' src='{{ myData.user.user.avatar }}'></image>
           </view>
+          <view class='occupation-title'>{{ myData.user.user.profession }}</view>
+        </view>
+        <view class='avatar-msg'>
+          <view class='avatar-nickname'>
+            <text>{{ myData.user.user.wechatName }}</text>
+            <view class='flowers-box' wx:if='{{ myData.user.user.gender === 2 }}'>
+              <image src='../../static/image/flowers.png'></image>
+            </view>
+            <view class='flowers-box' wx:elif='{{ myData.user.user.gender === 1 }}'>
+              <image src='../../static/image/boy.png'></image>
+            </view>
+            <view wx:else class='gender-size'>未知</view>
+          </view>
+          <view class='avatar-birthday'>{{ wxs.getBirthday(myData.user.user.birthday) }}</view>
+          <view class='avatar-address'>{{ myData.user.user.schoolName }}</view>
         </view>
         <view class='mine-edit' bindtap='toMyEdit' data-title='{{ myData.title }}'>
           <view class='edit-image'>
-            <image class='edit-img' src='../../static/image/_edit.png'></image>
+            <image class='edit-img' src='../../static/image/reset.png'></image>
           </view>
-          <view class='edit-text'>修改个人资料</view>
+          <view class='edit-text'>修改</view>
         </view>
       </view>
-      <view class='mine-detail'>
-        <text class='mine-title'>{{ myData.user.user.wechatName }}</text>
-        <view class='mine-address'>{{ myData.user.user.schoolName }}</view>
-        <view class='mine-line'></view>
-      </view>
       <view class='mine-category'>
         <view class='play-count'>
           <view>{{ myData.user.playAmount || 0 }}</view>

component/my/my.wxss

@@ -1,6 +1,5 @@
 .mine-container{
   width: 750rpx;
-  height: 1116rpx;
   background: #F0F1F5;
   position: relative;
   display: flex;
@@ -10,37 +9,40 @@
   box-sizing: border-box;
 }
 
-.mine-center{
-  width: 716rpx;
-  margin: 0 auto;
+.follow-details{
+  width: 750rpx;
+  box-sizing: border-box;
+  padding: 0 15rpx;
 }
 
-.mine-info{
-  margin-top: 80rpx;
+.follow-info{
+  /* border: 1rpx solid #3DBEF9; */
+  margin-top: 20rpx;
   width: 100%;
-  height: 344rpx;
-  background: #FFFFFF;
+  height: 362rpx;
   border-radius: 20rpx;
+  background: #FFFFFF;
+  display: flex;
 }
 
-.mine-bg{
-  width: 156rpx;
-  height: 156rpx;
+.avatar-bg{
+  margin-left: 20rpx;
+  margin-top: 50rpx;
+  width: 152rpx;
+  height: 152rpx;
   background: #61CA54;
   border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 280rpx;
-  top: 18rpx;
+  position: relative;
 }
 
-.mine-avatar{
+.avatar-box{
   width: 138rpx;
   height: 138rpx;
   border-radius: 50%;
-  background: gray;
+  z-index: 300;
+  position: absolute;
+  top: 7rpx;
+  left: 7rpx;
 }
 
 .avatar-image{
@@ -49,70 +51,73 @@
   border-radius: 50%;
 }
 
-.mine-edit{
-  position: absolute;
-  top: 110rpx;
-  right: 83rpx;
-  width: 224rpx;
-  height: 46rpx;
-  border-radius: 22rpx;
-  background: #3DBEF9;
+.avatar-nickname{
+  width: 500rpx;
   display: flex;
-  align-items: center;
 }
 
-.edit-image{
-  width: 24rpx;
-  height: 36rpx;
-  margin: 0 10rpx 6rpx 20rpx;
+.avatar-address{
+  width: 500rpx;
 }
 
-.edit-img{
-  width: 100%;
-  height: 100%;
+.flowers-box{
+  width: 26rpx;
+  height: 26rpx;
+  margin-left: 10rpx;
 }
 
-.edit-text{
-  width: 144rpx;
-  height: 34rpx;
-  color: #FFFFFF;
-  font-size: 24rpx;
+.flowers-box>image{
+  width: 100%;
+  height: 100%;
 }
 
-.mine-detail{
-  width: 670rpx;
-  text-align: center;
+.occupation-title{
   position: absolute;
-  top: 180rpx;
+  left: 100rpx;
+  top: 46rpx;
+  width: 68rpx;
+  background: #61CA54;
+  border-radius: 180rpx;
+  z-index: 600;
+  line-height: 26rpx;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 18rpx;
 }
 
-.mine-title{
-  color: #000000;
+.avatar-msg{
+  margin-left: 40rpx;
+  margin-top: 50rpx;
+  width: 500rpx;
+  height: 154rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  color: #444444;
   font-size: 32rpx;
 }
 
-.mine-address{
-  color: #4C4C4C;
+.gender-size{
+  margin-left: 10rpx;
   font-size: 28rpx;
+  align-self: center;
 }
 
-.mine-line{
-  width: 674rpx;
-  height: 4rpx;
-  background: #F0F1F5;
-  margin: 37rpx 20rpx;
-}
 
 .mine-category{
-  width: 716rpx;
-  height: 120rpx;
+  box-sizing: border-box;
+  width: 674rpx;
+  padding-top: 30rpx;
+  padding-bottom: 30rpx;
+  border-top: 4rpx solid #F0F1F5;
   font-size: 28rpx;
-  font-weight: bold;
+  font-weight: 600;
+  z-index: 900;
   display: flex;
-  justify-content: space-around;
-  align-items: center;
   position: absolute;
-  top: 300rpx;
+  top: 246rpx;
+  left: 38rpx;
 }
 
 .border-right{
@@ -130,14 +135,15 @@
 }
 
 .play-count,.point-count,.follow-count,.flower-count{
- width: 25%;
- text-align: center;
+  width: 25%;
+  text-align: center;
 }
 
 .play-img{
   width: 28rpx;
   height: 26rpx;
   margin-right: 6rpx;
+  margin-bottom: 6rpx;
 }
 
 image{
@@ -161,6 +167,40 @@ image{
   color: #EE5750;
 }
 
+
+
+.mine-edit{
+  position: absolute;
+  top: 75rpx;
+  right: 36rpx;
+  width: 138rpx;
+  height: 52rpx;
+  border-radius: 26rpx;
+  background: #FF9209;
+  box-sizing: border-box;
+  padding-top: 3rpx;
+  display: flex;
+}
+
+.edit-image{
+  width: 22rpx;
+  height: 32rpx;
+  margin-left: 24rpx;
+  margin-right: 10rpx;
+}
+
+.edit-img{
+  width: 22rpx;
+  height: 32rpx;
+}
+
+.edit-text{
+  width: 144rpx;
+  height: 34rpx;
+  color: #FFFFFF;
+  font-size: 32rpx;
+}
+
 .wallet-module{
   margin-top: 30rpx;
   width:716rpx;

pages/index/index.js

@@ -162,10 +162,11 @@ Page({
   // 获取用户信息
   getUserWorksInfo: function () {
     httpRequestApi.getUserWorksInfo().success(res => {
-      console.log(res)
       this.data.myData.user = res.data.data; //直接赋值 给 myData的user对象。
       this.setData({
         myData: this.data.myData,
+      },() => {
+        console.log(this.data.myData);
       });
     }).fail(error => {
       console.log(error)

pages/user/myEdit/myEdit.wxml

@@ -45,7 +45,7 @@
         </view>
       </view>
       <view class="submit-btn">
-        <button class='btn' formType="submit">确定</button>
+        <button class='btn' formType="submit">保存</button>
       </view>
     </form>
   </view>

pages/user/myEdit/myEdit.wxss

@@ -180,10 +180,10 @@ radio .wx-radio-input.wx-radio-input-checked{
 .btn{
   font-size: 40rpx;
   color: #FFFFFF;
-  width: 436rpx;
-  line-height: 100rpx;
+  width: 464rpx;
+  line-height: 80rpx;
   border-radius: 80rpx;
-  background: #539BF0;
+  background: #FF9209;
 }
 
 

pages/user/myworks/myworks.wxml

@@ -33,12 +33,13 @@
       <view class='avatar-msg'>
         <view class='avatar-nickname'>
           <text>{{ wareCards[0].user.wechatName }}</text>
-          <view class='flowers-box' wx:if='{{ true }}'>
+          <view class='flowers-box' wx:if='{{ wareCards[0].user.gender === 2 }}'>
             <image src='../../../static/image/flowers.png'></image>
           </view>
-          <view class='flowers-box' wx:else>
+          <view class='flowers-box' wx:elif='{{ wareCards[0].user.gender === 1 }}'>
             <image src='../../../static/image/boy.png'></image>
           </view>
+          <view wx:else class='gender-size'>未知</view>
         </view>
         <view class='avatar-birthday'>{{ wxs.getBirthday(wareCards[0].user.birthday) }}</view>
         <view class='avatar-address'>{{ wareCards[0].user.schoolName }}</view>

pages/user/myworks/myworks.wxss

@@ -33,8 +33,8 @@ page{
 .avatar-bg{
   margin-left: 20rpx;
   margin-top: 50rpx;
-  width: 154rpx;
-  height: 154rpx;
+  width: 152rpx;
+  height: 152rpx;
   background: #61CA54;
   border-radius: 50%;
   position: relative;
@@ -46,8 +46,8 @@ page{
   border-radius: 50%;
   z-index: 300;
   position: absolute;
-  top: 8rpx;
-  left: 8rpx;
+  top: 7rpx;
+  left: 7rpx;
 }
 
 .avatar-image{
@@ -103,6 +103,12 @@ page{
   font-size: 32rpx;
 }
 
+.gender-size{
+  margin-left: 10rpx;
+  font-size: 28rpx;
+  align-self: center;
+}
+
 .mine-category{
   box-sizing: border-box;
   width: 674rpx;