新增我的页面

src/pages/member/member.vue

@@ -1,5 +1,83 @@
 <template>
-    <app-layout headerBackgroundColor="#f00" textColor="light"> </app-layout>
+    <app-layout
+        headerBackgroundColor="#F6F6F6"
+        backgroundColor="#F6F6F6"
+        textColor="dark"
+        title="我的"
+        minHeight="calc(100vh - 100rpx)"
+    >
+        <view class="member-header">
+            <view class="headimg">
+                <image class="img-src" :src="info.headimg" mode="aspectFill" />
+            </view>
+            <view class="member-desc">
+                <text class="nickname">{{ info.nickname }}</text>
+                <view class="mobile">
+                    <text class="text">{{ info.mobile }}</text>
+                </view>
+            </view>
+        </view>
+        <view class="menu-container">
+            <view class="menu-group">
+                <view class="menu-item" @click="addressPage">
+                    <view class="title-icon">
+                        <text class="iconfont icon-dingwei"></text>
+                    </view>
+                    <view class="title limit-line clamp-1">我的地址</view>
+                    <text class="iconfont icon-jinru more"></text>
+                </view>
+                <view class="menu-item">
+                    <view class="title-icon">
+                        <text class="iconfont icon-tousu"></text>
+                    </view>
+                    <view class="title limit-line clamp-1">意见投诉</view>
+                    <text class="iconfont icon-jinru more"></text>
+                </view>
+                <view class="menu-item">
+                    <view class="title-icon">
+                        <text class="iconfont icon-kefufill"></text>
+                    </view>
+                    <view class="title limit-line clamp-1">联系客服</view>
+                    <text class="iconfont icon-jinru more"></text>
+                </view>
+                <view class="menu-item">
+                    <view class="title-icon">
+                        <text
+                            class="
+                                iconfont
+                                icon-shezhixitongshezhigongnengshezhishuxing
+                            "
+                        ></text>
+                    </view>
+                    <view class="title limit-line clamp-1">设置</view>
+                    <text class="iconfont icon-jinru more"></text>
+                </view>
+            </view>
+            <view class="menu-group">
+                <view class="menu-item">
+                    <view class="title-icon">
+                        <text class="iconfont icon-dingwei"></text>
+                    </view>
+                    <view class="title limit-line clamp-1">我是师傅</view>
+                    <text class="iconfont icon-jinru more"></text>
+                </view>
+                <view class="menu-item">
+                    <view class="title-icon">
+                        <text class="iconfont icon-cailiaogongcheng"></text>
+                    </view>
+                    <view class="title limit-line clamp-1">工程安装</view>
+                    <text class="iconfont icon-jinru more"></text>
+                </view>
+                <view class="menu-item">
+                    <view class="title-icon">
+                        <text class="iconfont icon-qiye"></text>
+                    </view>
+                    <view class="title limit-line clamp-1">企业安装合作</view>
+                    <text class="iconfont icon-jinru more"></text>
+                </view>
+            </view>
+        </view>
+    </app-layout>
 </template>
 
 <script>
@@ -8,7 +86,13 @@ import { mapState } from "vuex";
 export default {
     name: "member",
     data() {
-        return {};
+        return {
+            info: {
+                nickname: "微信用户",
+                mobile: "131****6080",
+                headimg: require("@/static/temp/member/1.png"),
+            },
+        };
     },
     components: {
         AppLayout,
@@ -23,9 +107,104 @@ export default {
     onReady() {},
     onReachBottom() {},
     onPullDownRefresh() {},
-    methods: {},
+    methods: {
+        addressPage() {
+            uni.navigateTo({
+                url: "/pages/address/address?openType=list",
+            });
+        },
+    },
 };
 </script>
 
 <style lang="less" scoped>
+.member-header {
+    width: 100%;
+    height: 286rpx;
+    background-color: #8c9bec;
+    padding: 74rpx 40rpx 0 40rpx;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    .headimg {
+        width: 110rpx;
+        height: 110rpx;
+        .img-src {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .member-desc {
+        width: 560rpx;
+        height: 110rpx;
+        box-sizing: border-box;
+        padding-left: 40rpx;
+        .nickname {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #ffffff;
+            letter-spacing: 1rpx;
+            line-height: 30rp;
+        }
+    }
+    .mobile {
+        width: 100%;
+        margin-top: 20rpx;
+        .text {
+            font-size: 36rpx;
+            font-weight: bold;
+            line-height: 36rpx;
+            letter-spacing: 1rpx;
+            color: #ffffff;
+        }
+    }
+}
+.menu-container {
+    position: relative;
+    top: -72rpx;
+    width: 670rpx;
+    margin: 0 auto;
+    .menu-group {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 30rpx 0;
+        background-color: #ffffff;
+        margin-bottom: 30rpx;
+    }
+}
+.menu-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 30rpx;
+    line-height: 40rpx;
+    .title-icon {
+        width: 40rpx;
+        height: 40rpx;
+        line-height: 40rpx;
+        text-align: left;
+    }
+    .iconfont {
+        color: #8c9bec;
+        font-size: 38rpx;
+    }
+    .title {
+        width: 530rpx;
+        box-sizing: border-box;
+        font-size: 30rpx;
+        color: #000000;
+        padding-left: 20rpx;
+    }
+    .more {
+        position: absolute;
+        right: 30rpx;
+        top: 30rpx;
+    }
+    .iconfont.icon-cailiaogongcheng,
+    .iconfont.icon-qiye {
+        font-size: 30rpx;
+    }
+}
 </style>