完善个人资料修改

pages/my/profile.vue

@@ -1,29 +1,29 @@
 <template>
 	<view>
-		<view class="u-m-t-34">
+		<view class="u-m-t-34" @tap="chooseAvatar">
 			<view class="row-center">
-				<u-avatar :src="cloudPath + 'img/icon_avatar.png'" mode="square" size="142"></u-avatar>
+				<u-avatar :src="userInfo.avatar ? userInfo.avatar : cloudPath + 'img/icon_avatar_empty2.png'" size="142"></u-avatar>
 			</view>
 			<view class="nr text-default u-text-center u-m-t-16">
 				点击更换头像
 			</view>
 		</view>
 		
-		<view class=" u-m-l-62 u-m-r-62">
-			<view class="nr row-between u-col-center u-m-t-48">
-				<view>昵称</view>
+		<view class="u-m-l-62 u-m-r-62">
+			<view class="nr row-between u-col-center u-m-t-48" @tap="changeName">
+				<view style="width: 100rpx;">昵称</view>
 				<view class="flex1 u-m-l-80 row u-row-between u-col-center">
-					<view>杨阳洋</view>
+					<view>{{userInfo.nickname || ''}}</view>
 					<view>
 						<u-image :src="cloudPath + 'img/icon_arrow_right.png'" width="44" height="44"></u-image>
 					</view>
 				</view>
 			</view>
 			
-			<view class="nr row-between u-col-center u-m-t-48">
-				<view>手机号</view>
+			<view class="nr row-between u-col-center u-m-t-48" @tap="changeMobile">
+				<view style="width: 100rpx;">手机号</view>
 				<view class="flex1 u-m-l-80 row u-row-between u-col-center">
-					<view>{{formatPhone()}}</view>
+					<view>{{formatPhone(userInfo.mobile)}}</view>
 					<view>
 						<u-image :src="cloudPath + 'img/icon_arrow_right.png'" width="44" height="44"></u-image>
 					</view>
@@ -32,24 +32,183 @@
 		</view>
 		
 		<view class="fixed left-0 right-0 save">
-			<u-button @click="mpLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">保存</u-button>
+			<u-button @click="save" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">保存</u-button>
 		</view>
+		
+		<!-- 昵称修改组件 -->
+		<u-popup
+		    v-model="nickname.showPopup"
+		    mode="center"
+		    border-radius="16"
+		>
+			<view class="bg-white br16 w-full" style="width: 70vw;">
+				<view class="u-p-32">
+					<view class="title xl u-text-center bold-500">修改用户名</view>
+					<view>
+						<u-form :model="nickname" ref="nicknameForm">
+							<u-form-item label="昵称" :border-bottom="false">
+								<u-input v-model="nickname.value" value="请输入新的昵称"/>
+							</u-form-item>
+							<u-button @click="confirmChangeNickeName" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">确定</u-button>
+						</u-form>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+		
+		<mobile-login v-model="mobile.showPopup" @close="mobile.showPopup = false" :hideCancleBtn="false" @update="updateMobile"/>
 	</view>
 </template>
 
 <script>
+	import { changeUserMobile, getUserInfo, setUserInfo, setWechatInfo } from '@/api/user'
+	import { uploadFile, isWeixinClient, trottle } from '@/utils/tools'
+	import { mapState, mapGetters } from 'vuex'
+	const FieldType = {
+		NONE: '',
+	    NICKNAME: 'nickname',
+	    AVATAR: 'avatar',
+	    MOBILE: 'mobile'
+	}
+	
 	export default {
 		data() {
 			return {
-				
+				fieldType: FieldType.NONE,
+				userInfo: {},
+				nickname: {
+					value: '',
+					showPopup: false
+				},
+				mobile: {
+					showPopup: false,
+				}
 			}
 		},
+		onUnload() {
+		    uni.$off('uAvatarCropper')
+		},
+		
+		onLoad(){
+			this.getUserInfo()
+			uni.$on('uAvatarCropper', (path) => {
+			    this.uploadImage(path)
+			})
+		},
 		
 		methods: {
-			formatPhone() {
-				const phone = '15005837859'
-				return phone.substring(0, 3) + '****' + phone.substring(7);
+			// 修改头像
+			chooseAvatar() {
+				this.fieldType = FieldType.AVATAR
+				uni.$u.route({
+				    // 关于此路径，请见下方"注意事项"
+				    url: '/components/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
+				    // 内部已设置以下默认参数值，可不传这些参数
+				    params: {
+				        // 输出图片宽度，高等于宽，单位px
+				        destWidth: 300,
+				        // 裁剪框宽度，高等于宽，单位px
+				        rectWidth: 300,
+				        // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
+				        fileType: 'jpg'
+				    }
+				})
+			},
+			
+			// 修改昵称
+			changeName() {
+			    this.fieldType = FieldType.NICKNAME
+			    this.nickname.value = ''
+				this.nickname.showPopup = true
+			},
+			
+			// 确认修改昵称
+			async confirmChangeNickeName() {
+				if (!this.nickname.value) {
+					return this.$toast({
+					    title: '请输入新的昵称'
+					})
+				}
+				
+				await this.setUserInfo(this.nickname.value)
+				this.nickname.showPopup = false
+			},
+			
+			// 修改手机号
+			changeMobile() {
+				this.fieldType = FieldType.MOBILE
+				this.mobile.showPopup = true
+			},
+			
+			// 更新手机号码
+			async updateMobile(e) {
+				if (!e.mobile) {
+					return this.$toast({
+					    title: '请授权获取您的手机号'
+					})
+				}
+				
+				await this.setUserInfo(e.mobile)
+				this.nickname.showPopup = false
+			},
+			
+			// 上传头像
+			uploadImage(path) {
+			    uni.showLoading({
+			        title: '正在上传中...',
+			        mask: true
+			    })
+			    uploadFile(path).then((res) => {
+					uni.hideLoading()
+					this.setUserInfo(res.url)
+				}).catch(() => {
+					uni.hideLoading()
+					this.$toast({title: '上传失败'})
+				})
+			},
+			
+			// 修改个人信息
+			async setUserInfo(value) {
+				const res = await setUserInfo({
+					field: this.fieldType,
+					value: value
+				})
+				if (res.code == 1) {
+					this.$toast({
+						title: res.msg
+					})
+					
+					this.getUserInfo()
+				}
+			},
+			
+			// 获取个人信息
+			getUserInfo() {
+			    getUserInfo().then((res) => {
+			        if (res.code == 1) {
+			            this.userInfo = res.data
+			        }
+			    })
+			},
+			
+			// 格式化手机号
+			formatPhone(p) {
+				if (p) {
+					return p.substring(0, 3) + '****' + p.substring(7)
+				}
+				
+				return ''
+			},
+			
+			save() {
+				uni.switchTab({
+					url: '/pages/my/my'
+				})
 			}
+		},
+		computed: {
+			...mapState(['token']),
+			...mapGetters(['appConfig'])
 		}
 	}
 </script>