登录

pages/Mine/Mine.vue

@@ -1,20 +1,88 @@
 <template>
-	<div>
-	  <button @click="openConversationList">打开会话列表</button>
-	  <button @click="openContact">打开联系人</button>
-	</div>
-  </template>
-  <script>
-  export default {
-	methods: {
-	  // 打开会话列表
-	  openConversationList() {
-		uni.navigateTo({ url: '/TUIKit/components/TUIConversation/index' });
-	  },
-	  // 打开联系人
-	  openContact() {
-		uni.navigateTo({ url: '/TUIKit/components/TUIContact/index' });
-	  },
+  <view class="container">
+    <view class="PersonalInformation">
+      <view class="header">
+        <image :src="userinfo.headerIcon" mode="scaleToFill" class="headerIcon" />
+      </view>
+      <view>
+        <view class="name">{{ userinfo.nickName }}</view>
+      </view>
+      <view class="Settings" @click="goSetting">
+	  <image class="SettingsIcon" src="../../static/Settings.png" mode="scaleToFill"/>
+	  </view>
+    </view>
+  </view>
+  <view class="tabBar">
+    <tabBar></tabBar>
+  </view>
+</template>
+
+<script>
+import tabBar from "../../components/tabBar/tabBar";
+export default {
+  data() {
+    return {
+      userinfo: {},
+    };
+  },
+  onShow() {
+	uni.getStorage({
+      key: "userinfo",
+      success: (res) => {
+        this.userinfo = res.data;
+        console.log(this.userinfo);
+      },
+    });
+  },
+  methods: {
+    goSetting() {
+		uni.navigateTo({
+			url: '/pages/Setting/Setting'
+		});
 	},
-  };
-  </script>
+  },
+  components: {
+    tabBar,
+  },
+};
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background: linear-gradient(to bottom, #11cb2a6e, #2574fc6d);
+}
+.PersonalInformation {
+  margin-top: 200rpx;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.header {
+  margin-left: 50rpx;
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+}
+.headerIcon {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+}
+.name {
+  margin-left: 30rpx;
+}
+.Settings {
+  margin-left: 370rpx;
+  width: 50rpx;
+  height: 50rpx;
+}
+.SettingsIcon {
+  width: 50rpx;
+  height: 50rpx;
+}
+</style>