feat: 更新个人信息

src/common/utils/util.js

@@ -35,63 +35,49 @@ const createName = function(name) {
 
 // 图片上传
 export const uploadImg = async function(file) {
-  uni.showLoading({
-    mask: true,
-  })
-
-  //获取阿里oss上传参数
-  const par = await api.get('/common/oss/config')
-    .then(res => {
-      return res.data
-    }).catch(err => {
-      uni.hideLoading();
-    })
-  const fileKey = par.dir + createName(file.name);
-
-  return new Promise((resolve, reject) => {
-    const uploadTask = uni.uploadFile({
-      url: par.host,
-      // header: {
-      // 	"Content-Type": 'multipart/form-data',
-      // },
-      name: 'file',
-      formData: {
-        ...par,
-        name: file.name,
-        key: fileKey
-      },
-      filePath: file.path,
-      success(res) {
-        resolve({
-          data: {
-            name: file.name,
-            url: fileKey
-          }
-        })
-      },
-
-      fail(err) {
-        reject(err)
-      },
-      complete(res) {
-        uni.hideLoading();
-      }
-    })
-    uploadTask.onProgressUpdate((res) => {
-      console.log('上传进度' + res.progress);
-      uni.showLoading({
-        title: `已上传${res.progress}%`
-      });
-      // console.log('已经上传的数据长度' + res.totalBytesSent);
-      // console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
-      // return res.progress
-      // 测试条件，取消上传任务。
-      if (res.progress == 100) {
-        // uploadTask.abort();
-        uni.hideLoading();
-      }
-    });
-  })
+	console.log(file);
+	uni.showLoading({
+		mask: true,
+	})
+	
+	// 获取oss配置
+	const par = await axios({
+		url: '/common/oss/config',
+		method: 'get'
+	}).then(res=>{
+		return res.data;
+	}).catch(err=>{
+		uni.hideLoading();
+	})
+	
+	const fileKey = par.dir + createName(file.path);
+	
+	return new Promise((resolve, reject) => {
+		uni.uploadFile({
+			url: par.host,
+			// header: {
+			// 	"Content-Type": 'multipart/form-data',
+			// },
+			name: 'file',
+			formData:{
+				...par,
+				name: file.name,
+				key: fileKey
+			},
+			filePath: file.path,
+			success(res) {
+				resolve({
+					url: fileKey
+				})
+			},
+			fail(err) {
+				reject(err)
+			},
+			complete(res) {
+				uni.hideLoading();
+			}
+		})
+	})
 }
 
 export const getArea = function(str) {

src/pages/mine/index.vue

@@ -13,13 +13,17 @@
 
       <view class="all-container">
         <view class="user-container card">
-          <view class="user">
-            <image src="@/static/common/logo.png" mode="aspectFill"></image>
-            <view class="main" v-if="isLogin">
-              <view class="name">微信用户</view>
+          <view class="user" v-if="isLogin" @tap="openInfoDialog">
+            <image :src="imageUrl + userInfo.avatar" mode="aspectFill" v-if="userInfo.avatar"></image>
+            <image src="@/static/common/logo.png" mode="aspectFill" v-else></image>
+            <view class="main">
+              <view class="name">{{userInfo.name}}</view>
               <!-- <view class="real">实名认证</view> -->
             </view>
-            <view class="main" v-else @tap="navToPage('/pages/login/indexs')">
+          </view>
+          <view class="user" v-else @tap="navToPage('/pages/login/indexs')">
+            <image src="@/static/common/logo.png" mode="aspectFill"></image>
+            <view class="main">
               <view class="name">请先登录</view>
             </view>
           </view>
@@ -77,13 +81,52 @@
         </view>
       </view>
     </zj-page-layout>
+
+    <u-popup :round="10" :show="isShowInfoDialog">
+    	<view class="info-dialog">
+    		<view class="content">
+    			<view class="title">获取您的头像和昵称</view>
+    			<view class="text">为了方便识别您的身份，请授权您的头像和昵称</view>
+    		</view>
+    		<view class="form">
+    			<view class="item">
+    				<view class="label">头像</view>
+    				<view class="value">
+    					<button open-type="chooseAvatar" @chooseavatar="chooseAvatar">
+    						<image :src="imageUrl + infoForm.avatar" v-if="infoForm.avatar"></image>
+    						<view class="empty" v-else>请选择</view>
+    					</button>
+    				</view>
+    			</view>
+    			<view class="item">
+    				<view class="label">昵称</view>
+    				<view class="value">
+    					<input
+    						type="nickname"
+    					    placeholder="请输入昵称"
+    					    border="none"
+    					    v-model="infoForm.nickname"
+    						@change="getNickname"
+    					></input>
+    				</view>
+    			</view>
+    		</view>
+    		<view class="btn">
+    			<button @tap="isShowInfoDialog = false">取消</button>
+    			<button type="primary" @tap="saveUserInfo()">提交</button>
+    		</view>
+    	</view>
+    </u-popup>
   </view>
 </template>
 
 <script>
+import { uploadImg } from '@/common/utils/util.js'
+
 export default {
   data() {
     return {
+      imageUrl: this.$imageUrl,
       refresherTriggered: false,
       userInfo: {},
 
@@ -110,6 +153,12 @@ export default {
         { name: '隐私政策', url: '/pages/mine/parse?type=2' },
         { name: '用户协议', url: '/pages/mine/parse?type=3' },
       ],
+
+      isShowInfoDialog: false, // 是否显示获取用户信息弹窗
+      infoForm: {
+      	avatar: '',
+      	nickname: '',
+      },
     }
   },
 
@@ -127,21 +176,35 @@ export default {
   },
 
   onShow() {
-    this.$getUserInfo().then(data => {
-      this.userInfo = data;
-    })
+    this.getUserInfo();
     this.getStats();
+    this.getIssueStats();
   },
 
   methods: {
     // 触发下拉刷新
     async refresherrefresh(e) {
     	this.refresherTriggered = true;
+      await this.getUserInfo();
       await this.getStats();
       await this.getIssueStats();
       this.refresherTriggered = false;
     },
 
+    // 获取用户信息
+    async getUserInfo() {
+      return new Promise((resolve, reject) => {
+        this.$api.get('/wechat/user/info', {
+          userId: this.$store.state.user.userId,
+        }).then(res => {
+          if(!res.data) return false;
+          this.userInfo = res.data;
+        }).finally(res => {
+          resolve(1);
+        })
+      })
+    },
+
     // 获取统计
     async getStats() {
       return new Promise((resolve, reject) => {
@@ -182,6 +245,45 @@ export default {
         url
       })
     },
+    
+    openInfoDialog() {
+      this.infoForm.avatar = this.userInfo.avatar || '';
+      this.infoForm.nickname = this.userInfo.name || '';
+      this.isShowInfoDialog = true;
+    },
+
+    // 选择头像
+    chooseAvatar(e) {
+      uploadImg({
+      	path: e.detail.avatarUrl,
+      	name: e.detail.avatarUrl,
+      }).then(data => {
+      	this.infoForm.avatar = data.url;
+      })
+    },
+
+    // 用户昵称审核完毕
+    getNickname(e) {
+    	this.infoForm.nickname = e.detail.value;
+    },
+
+    // 保存用户信息
+    saveUserInfo() {
+    	if(!this.infoForm.avatar) {
+    		return this.$toast('请先上传头像');
+    	}
+    	if(!this.infoForm.nickname) {
+    		return this.$toast('请先输入昵称');
+    	}
+
+    	this.$api.post('/wechat/user/update-info', {
+        avatar: this.infoForm.avatar,
+        nickName: this.infoForm.nickname,
+    	}).then(res => {
+    		this.isShowInfoDialog = false;
+    		this.getUserInfo();
+    	})
+    },
   }
 }
 </script>
@@ -324,4 +426,86 @@ export default {
   	}
   }
 }
+
+.info-dialog {
+		padding: 40rpx 40rpx 80rpx;
+		box-sizing: border-box;
+		.content {
+			.title {
+				font-size: 32rpx;
+				font-weight: 500;
+			}
+			.text {
+				font-size: 24rpx;
+				color: #999999;
+				margin-top: 20rpx;
+			}
+		}
+		.form {
+			.item {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin-top: 30rpx;
+				.label {
+					color: #666666;
+				}
+				.value {
+					button {
+						padding: 0;
+						background: none;
+						border: none;
+						&::after {
+							border: none;
+						}
+					}
+					input {
+						width: 500rpx;
+						height: 68rpx;
+						text-align: right !important;
+					}
+					image {
+						width: 88rpx;
+						height: 88rpx;
+						border-radius: 88rpx;
+						display: block;
+					}
+					.empty {
+						width: 88rpx;
+						height: 88rpx;
+						border-radius: 88rpx;
+						background: #f5f5f5;
+						text-align: center;
+						line-height: 88rpx;
+						font-size: 24rpx;
+						color: #999999;
+					}
+				}
+			}
+		}
+		.btn {
+			display: flex;
+			justify-content: center;
+			margin-top: 60rpx;
+			button::after {
+				border: none;
+			}
+			button {
+				width: 180rpx;
+				height: 70rpx;
+				line-height: 70rpx;
+				margin: 0;
+				font-size: 28rpx;
+				margin: 0 30rpx;
+				&:first-child {
+					background: #f5f5f5;
+					color: $theme-color;
+				}
+				&:last-child {
+					background: $theme-color;
+					color: #FFFFFF;
+				}
+			}
+		}
+	}
 </style>