我的

src/pages.json

@@ -15,7 +15,7 @@
 	}, {
 		"path": "pages/my/my",
 		"style": {
-			"navigationStyle": "custom"
+			"navigationBarTitleText": "我的"
 		}
 	}],
 	"subPackages": [{

src/pages/my/my.vue

@@ -4,10 +4,80 @@
  * @Author: dream
  * @Date: 2021-03-25 15:56:03
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 10:25:20
+ * @LastEditTime: 2021-03-31 17:08:17
 -->
 <template>
-	<view>my</view>
+	<view class="my-main">
+    <view class="user-info u-flex">
+      <image class="head-img" :src="userInfo.headUrl || '../../static/common/icon_qs_tx.png'" />
+      <view class="u-flex-1 u-m-l-16 u-m-t-4">
+        <view class="u-font-40 u-line-56 text-weight-500">我的名字</view>
+        <view class="desc-color u-flex">
+          个人资料
+          <view class="u-m-l-4 enter-icon iph-icon-enter "></view>
+        </view>
+      </view>
+    </view>
+    <view class="my-order-area iph-bg-fff">
+      <view class="area-title">我的订单</view>
+      <view class="u-m-t-32 u-p-b-32 u-flex u-row-around">
+        <view class="order-item">
+          <image class="item-img" src="~@/static/common/btn_my_dfk.png" />
+          <text class="u-m-t-12 u-font-24 u-line-34">待支付</text>
+        </view>
+        <view class="order-item">
+          <image class="item-img" src="~@/static/common/icon_my_zzz.png" />
+          <text class="u-m-t-12 u-font-24 u-line-34">进行中</text>
+          <u-badge :count="2" :offset="[-16, -4]" size="mini" color="#ffffff" bgColor="#FE5128"></u-badge>
+        </view>
+        <view class="order-item">
+          <image class="item-img" src="~@/static/common/icon_my_ywc.png" />
+          <text class="u-m-t-12 u-font-24 u-line-34">已完成</text>
+        </view>
+        <view class="order-item">
+          <image class="item-img" src="~@/static/common/icon_my_yqx.png" />
+          <text class="u-m-t-12 u-font-24 u-line-34">已取消</text>
+        </view>
+      </view>
+    </view>
+    <view class="my-use-area iph-bg-fff">
+      <view class="area-title">常用功能</view>
+      <view class="u-m-t-32 u-flex u-row-around">
+        <view class="order-item">
+          <image class="item-img" src="~@/static/common/icon_tj_sfd.png" />
+          <text class="u-m-t-8 u-font-22 u-line-32">收费单</text>
+        </view>
+        <view class="order-item">
+          <image class="item-img" src="~@/static/common/icon_tj_tfd.png" />
+          <text class="u-m-t-8 u-font-22 u-line-32">退费单</text>
+        </view>
+        <view class="order-item">
+          <image class="item-img" src="~@/static/common/icon_tj_zd.png" />
+          <text class="u-m-t-8 u-font-22 u-line-32">账单</text>
+        </view>
+        <view class="order-item">
+          <image class="item-img" src="~@/static/common/icon_tj_dfh.png" />
+          <text class="u-m-t-8 u-font-22 u-line-32">待发货</text>
+        </view>
+      </view>
+      <view class="u-m-t-32 u-p-b-40 u-flex u-row-around">
+        <view class="order-item">
+          <image class="item-img" src="~@/static/common/icon_tj_dsh.png" />
+          <text class="u-m-t-8 u-font-22 u-line-32">待收货</text>
+          <u-badge :count="2" :offset="[-12, 12]" size="mini" color="#ffffff" bgColor="#FE5128"></u-badge>
+        </view>
+        <view class="order-item">
+          <image class="item-img" src="~@/static/common/icon_tj_ysh.png" />
+          <text class="u-m-t-8 u-font-22 u-line-32">已收货</text>
+        </view>
+        <view class="order-item">
+          <image class="item-img" src="~@/static/common/icon_tj_kf.png" />
+          <text class="u-m-t-8 u-font-22 u-line-32">售后</text>
+        </view>
+        <view class="order-item"></view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
@@ -15,7 +85,9 @@ export default {
   name: 'my',
   data () {
     return {
-
+      userInfo: {
+        headUrl: 'https://img2.woyaogexing.com/2021/03/31/862b9deb36de46abb7b6289d9c053c83!400x400.jpeg'
+      }
     }
   },
   onLoad () {
@@ -28,5 +100,66 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.my-main {
+  .user-info {
+    padding: 32px;
+    background: linear-gradient(180deg, #FFFFFF 0%, #F4F5F6 100%);
+    .head-img {
+      width: 112px;
+      height: 112px;
+      border-radius: 56px;
+    }
+    .enter-icon {
+      width: 20px;
+      height: 20px;
+    }
+    .desc-color {
+      color: $iph-desc-text;
+    }
+  }
+  .my-order-area {
+    margin: 16px 24px;
+    border-radius: 8px;
+    .area-title {
+      padding: 24px 24px 0 24px;
+      line-height: 40px;
+      font-size: 28px;
+      font-weight: 500;
+      color: $iph-prompt-text;
+    }
+    .order-item {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 72px;
+      .item-img {
+        width: 50px;
+        height: 50px;
+      }
+    }
+  }
+  .my-use-area {
+    margin: 0 24px;
+    border-radius: 8px;
+    .area-title {
+      padding: 24px 24px 0 24px;
+      line-height: 40px;
+      font-size: 28px;
+      font-weight: 500;
+      color: $iph-prompt-text;
+    }
+    .order-item {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 88px;
+      .item-img {
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
+}
 </style>

src/uni.scss

@@ -37,6 +37,9 @@ $iph-btn-disabel-bg: #999999;
   font-size: 44px;
 }
 
+.u-line-32 {
+  line-height: 32px;
+}
 .u-line-34 {
   line-height: 34px;
 }
@@ -55,6 +58,9 @@ $iph-btn-disabel-bg: #999999;
 .u-line-50 {
   line-height: 50px;
 }
+.u-line-56 {
+  line-height: 56px;
+}
 .u-line-60 {
   line-height: 60px;
 }