350

pages/user/selfInfo/InfoItem.vue

@@ -42,18 +42,23 @@
 <style lang="scss" scoped>
 	.info_item {
 		@include btwBox();
-		height: 82rpx;
+		min-height: 82rpx;
 		padding: 0 44rpx;
 		color: $uni-text-color;
 		// border-bottom: 1px solid rgba(153,153,153,0.3);
 		position: relative;
-
+		.left_label{
+			width: 6em;
+		}
 		.right_value {
+			flex: 1;
 			@include vCenterBox();
+			justify-content: flex-end;
 
 			.content {
 				font-size: 28rpx;
 				color: #999;
+				
 			}
 
 			.u-icon {

pages/user/selfInfo/change_bio.vue

@@ -0,0 +1,80 @@
+<template>
+	<view>
+		<u-navbar
+			title="个性签名"
+			placeholder
+			:autoBack="true"
+		>
+			<view class="u-nav-slot" slot="right">
+				<u-button type="primary" @click="save">保存</u-button>
+			</view>
+		</u-navbar>
+		<u--textarea 
+			count 
+			confirmType="done" 
+			focus 
+			autoHeight 
+			height="500"
+			maxlength="100" 
+			border="none" 
+			:adjustPosition="false"
+			class="textarea"
+			placeholder="个性签名"
+			v-model="bio"
+			>
+		</u--textarea>
+	</view>
+</template>
+
+<script>
+	import {mapGetters} from "vuex";
+	import {businessInfoUpdate} from "@/api/login";
+	export default {
+		computed: {
+			...mapGetters([
+				"storeSelfInfo"
+			])
+		},
+		data() {
+			return {
+				bio:"",
+			}
+		},
+		onLoad() {
+			this.bio = this.storeSelfInfo.bio||"";
+		},
+		methods: {
+			back(){
+				uni.navigateBack();
+			},
+			save(){
+				console.log(this.bio);
+				businessInfoUpdate({
+					userID: this.storeSelfInfo.userID,
+					bio:this.bio,
+				}).then(res=>{
+					this.$store.commit("user/SET_SELF_INFO",{
+						...this.storeSelfInfo,
+						bio:this.bio,
+					});
+					uni.navigateBack();
+				}).catch(e=>{
+					uni.showToast({
+						title: "保存失败",
+						icon: "none"
+					});
+				});
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.textarea{
+	}
+	.u-nav-slot{
+		.u-button{
+			height: 60rpx;
+		}
+	}
+</style>

pages/user/selfInfo/index.vue

@@ -2,20 +2,25 @@
 	<view class="page_container">
 		<custom-nav-bar title="个人资料" />
 
-		<view class="info_wrap">
-			<info-item :loading="loadingState.faceURL" @click="updateAvatar" title="头像">
-				<my-avatar :src="selfInfo.faceURL" :desc="selfInfo.nickname" size="30" slot="value" />
-			</info-item>
-			<info-item @click="updateNickname" title="姓名" :content="selfInfo.nickname" />
-			<info-item :loading="loadingState.gender" @click="updateGender" title="性别" :content="getGender" />
-			<info-item :loading="loadingState.birth" @click="() => (showDatePicker = true)" title="生日"
-				:content="getBirth" />
-		</view>
+		<uni-list class="info_wrap">
+			<uni-list-item :loading="loadingState.faceURL" @click="updateAvatar" title="头像" clickable showArrow >
+				<my-avatar :src="selfInfo.faceURL" :desc="selfInfo.nickname" size="30" slot="footer" />
+			</uni-list-item>
+			<uni-list-item @click="updateNickname" title="姓名" :rightText="selfInfo.nickname" clickable showArrow />
+			<uni-list-item :loading="loadingState.gender" @click="updateGender" title="性别" :rightText="getGender" clickable showArrow />
+			<uni-list-item :loading="loadingState.birth" @click="() => (showDatePicker = true)" title="生日"
+				:rightText="getBirth" clickable showArrow />
+		</uni-list>
 
-		<view class="info_wrap">
-			<info-item :showArrow="false" title="手机号码" :content="selfInfo.mobile || '-'" />
-			<info-item :showArrow="false" title="邮箱" :content="selfInfo.email || '-'" />
-		</view>
+		<uni-list class="info_wrap">
+			<uni-list-item title="手机号码" :rightText="selfInfo.mobile || '-'"/>
+			<uni-list-item title="邮箱" :rightText="selfInfo.email || '-'" />
+		</uni-list>
+		<uni-list class="info_wrap">
+			<uni-list-item title="个性签名" @click="changeBio" clickable showArrow>
+				<u--text slot="footer" color="#999" :text="selfInfo.bio" :lines="2" wordWrap="anywhere"></u--text>
+			</uni-list-item>
+		</uni-list>
 
 		<u-datetime-picker :minDate="0" :maxDate="nowDate" :show="showDatePicker" @confirm="confirmDate"
 			@cancel="() => (showDatePicker = false)" v-model="selfInfo.birth" mode="date" />
@@ -169,10 +174,14 @@
 			},
 			confirmDate({value}) {
 				this.loadingState.birth = true;
-				console.log(this.$store.getters.storeSelfInfo.faceURL);
 				this.updateSelfInfo({birth: value,},"birth",);
 				this.showDatePicker = false;
 			},
+			changeBio(){
+				uni.navigateTo({
+					url: `/pages/user/selfInfo/change_bio`,
+				});
+			}
 		},
 	};
 </script>