个人中心

pages/user/info.vue

@@ -1,25 +1,59 @@
 <template>
     <view class="info">
-        <view class="head">
+        <view class="head" @click="showImage=true">
             <image></image>
             <text>更换头像</text>
         </view>
         <view class="item">
-            <text></text>
-            <text></text>
+            <text class="title">用户名</text>
+            <text class="value">兽兽</text>
         </view>
+		<view class="item">
+            <text class="title">个性签名</text>
+            <text class="value">变瘦变高变有钱</text>
+        </view>
+		<view class="password" @click="updatePwd">
+			<text>修改密码</text>
+			<image src="/static/image/user/1.png"></image>
+		</view>
+		<u-popup v-model="showImage" mode="bottom">
+			<view class="image-popup">
+				<view @click="chooseImage('camera')">拍摄新照片</view>
+				<view @click="chooseImage('album')">从相册选取</view>
+			</view>
+		</u-popup>
     </view>
 </template>
 <script>
 export default {
-    name:"info"    
+    name:"info",
+	data() {
+		return {
+			showImage: false
+		}
+	},
+	methods: {
+		chooseImage(sourceType) {
+			uni.chooseImage({
+				count: 1,
+				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+				sourceType: [sourceType],
+				success: function (res) {
+					console.log(JSON.stringify(res.tempFilePaths));
+				}
+			});
+		},
+		updatePwd() {
+			uni.navigateTo({
+				url: '/pages/user/updatePassword'
+			});
+		}
+	},
 }
 </script>
 <style lang="scss" scoped>
-image{
-    background-color: #0f0;
-}
 .info{
+	min-height: calc(100vh - var(--window-top));
     background: #ececec;
     .head{
         height: 202rpx;
@@ -28,10 +62,12 @@ image{
         align-items: center;
         justify-content: center;
         background-color: #fff;
+		margin-bottom: 2rpx;
         >image{
             width: 120rpx;
             height: 120rpx;
             border-radius: 50%;
+			background-color: #0f0;
         }
         >text{
             font-size: 24rpx;
@@ -40,6 +76,52 @@ image{
         }
         margin-bottom: 2rpx;
     }
-
+	.item {
+		display: flex;
+		align-items: center;
+		height: 98rpx;
+		background: rgba(255,255,255,1);
+		padding: 0 30rpx;
+		margin-bottom: 2rpx;
+		.title {
+			width: 120rpx;
+			font-size: 30rpx;
+			color: rgba(51,51,51,1);
+			margin-right: 120rpx;
+		}
+		.value {
+			font-size: 30rpx;
+			color: rgba(101,101,101,1);
+		}
+	}
+	.password {
+		margin-top: 20rpx;
+		padding: 0 30rpx;
+		height: 98rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background: rgba(255,255,255,1);
+		> text {
+			font-size: 30rpx;
+			color: rgba(51,51,51,1);
+		}
+		> image {
+			width: 11rpx;
+			height: 22rpx;
+		}
+	}
+	.image-popup {
+		padding: 0 30rpx;
+		> view {
+			font-size:　28rpx;
+			color: rgba(51,51,51,1);
+			line-height: 98rpx;
+			text-align: center;
+			&:first-child {
+				border-bottom: 2rpx solid #EBEBEB;
+			}
+		}
+	}
 }
 </style>