设置 修改我的信息

src/pages/client/clientUser/mine/setting/personInfo - 副本.vue

@@ -1,152 +0,0 @@
-<template>
-  <view class="root">
-    <view class="content-box">
-      <u-cell-group>
-        <u-cell title="头像" @click="handlerUploadImg" isLink>
-          <template slot="value">
-            <u-avatar shape="square" size="60" :src="userInfo.avatar" @click.stop="viewAvatar(userInfo.avatar)"></u-avatar>
-          </template>
-        </u-cell>
-        <u-cell title="昵称" isLink>
-          <template slot="value" >
-            <u-input inputAlign="right" :border="false" v-model="userInfo.nickname" />
-          </template>
-        </u-cell>
-        <u-cell title="性别" isLink>
-          <template slot="value">
-            <u-radio-group v-model="userInfo.gender">
-              <u-radio v-for="item in sexList" :key="item.type" :label="item.text" :name="item.type" />
-            </u-radio-group>
-          </template>
-        </u-cell>
-      </u-cell-group>
-    </view>
-    <view class="btn-box">
-      <u-button type="primary" shape="circle" @click="handlerSubmitBtn">确认</u-button>
-    </view>
-  </view>
-</template>
-
-<script>
-import { uploadFile } from "@/utils/upload"
-  export default {
-    data() {
-      return {
-        userInfo:{
-          userId:'',
-          avatar:'',
-          gender:'',
-          nickname:''
-        },
-        time_value: '',
-        timeShow: false,
-        sexList: [{
-            id: 0,
-            text: '男',
-            type:'MALE'
-          },
-          {
-            id: 1,
-            text: '女',
-            type:'FEMALE'
-          }
-        ],
-        current: 0,
-      }
-    },
-    mounted(){
-      this.userInfo.userId = this.$store.getters.userId
-      this.userInfo.avatar = this.$store.getters.avatar
-      this.userInfo.gender = this.$store.getters.gender
-      this.userInfo.nickname = this.$store.getters.nickname
-    },
-    methods: {
-      viewAvatar(url){
-        uni.previewImage({
-          urls:[url]
-        })
-      },
-      // 选择性别
-      handlerSelectGender(item) {
-        this.current = item.id
-      },
-      // 上传头像
-      async handlerUploadImg() {
-        const res = await uni.showActionSheet({
-          itemList: ['拍照', '从相册选择'],
-        });
-        if (res.tapIndex === 0) {
-          // 用户选择拍照
-          this.takePhoto();
-        } else if (res.tapIndex === 1) {
-          // 用户选择从相册选择
-          this.chooseImage();
-        }
-      },
-      // 拍照
-      takePhoto() {
-        uni.chooseImage({
-          sourceType: ['camera'],
-          count: 1,
-          success: res => {
-            const tempFilePaths = res.tempFilePaths;
-            this.uploadAvatar(tempFilePaths[0]);
-          },
-          fail: error => {
-            console.error(error);
-          },
-        });
-      },
-      //从相册中选择
-      chooseImage() {
-        uni.chooseImage({
-          sourceType: ['album'],
-          count: 1,
-          success: res => {
-            const tempFilePaths = res.tempFilePaths;
-            this.uploadAvatar(tempFilePaths[0]);
-          },
-          fail: error => {
-            console.error(error);
-          },
-        });
-      },
-      // 上传头像
-      async uploadAvatar(filePath) {
-        // 在这里实现上传头像的逻辑，将filePath作为参数传入
-        const res = await uploadFile(filePath)
-        if(res.statusCode === 200 && res.data){
-          const resp = JSON.parse(res.data)
-          this.userInfo.avatar = resp.data.url
-        }
-      },
-
-      // 点击提交按钮
-      handlerSubmitBtn() {
-        this.$store.dispatch('UpdateUserInfo',this.userInfo).then(res=>{
-          setTimeout(()=>{
-            uni.navigateBack(-1)
-          },1500)
-        })
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-.root{
-  background-color: #f3f3f3;
-  height: calc(100vh -  env(safe-area-inset-top));
-  position: relative;
-  .content-box{
-    background-color: #fff;
-  }
-  .btn-box{
-    position: absolute;
-    bottom: 0;
-    padding: 32rpx 16rpx;
-    box-sizing: border-box;
-    width: 100%;
-  }
-}
-</style>

src/pages/client/clientUser/mine/setting/personInfo.vue

@@ -3,7 +3,7 @@
 		<view class="item-box">
 			<view class="item-left"> 头像 : </view>
 			<view class="item-right flex-end">
-				<image @click="handlerUploadImg" class="img" :src="queryParams.avatar"></image>
+				<image @click="handlerUploadImg" class="img" :src="uoloadImg"></image>
 			</view>
 		</view>
 		<view class="item-box">
@@ -34,7 +34,7 @@
 		</view>
 
 		<u-datetime-picker :show="timeShow" v-model="time_value" mode="date" @cancel='timeShow = false'
-			@confirm='confirmTime'></u-datetime-picker>
+			@confirm='confirmTime' :minDate="0" :maxDate='maxDataTime'></u-datetime-picker>
 
 		<view class="btn-box">
 			<button class="btn" @click="handlerSubmitBtn">提交</button>
@@ -44,6 +44,7 @@
 
 <script>
 	import { getUserInfo } from '@/api/user';
+  import { uploadFile } from "@/utils/upload"
 	export default {
 		data() {
 			return {
@@ -57,26 +58,36 @@
 				timeShow: false,
 				sexList: [{
 						id: 0,
-						name: '男'
+						name: '男',
+            type:'MALE'
 					},
 					{
 						id: 1,
-						name: '女'
-					},
-					{
-						id: 2,
-						name: '沃尔玛塑料袋'
+						name: '女',
+            type:'FEMALE'
 					}
 				],
-				current: 0
+				current: 0,
+        uoloadImg:'',
+        maxDataTime:0
 			}
 		},
 		mounted(){
+      this.maxDataTime = new Date().getTime()
 			getUserInfo().then(res=>{
-				console.log("@@@res",res)
-				this.queryParams.avatar = res.data.avatar
-				this.queryParams.nickname = res.data.nickname
-				// this.queryParams.gender = res.data.gender
+        let { avatar , nickname , gender } = res.data
+        this.uoloadImg = avatar
+				this.queryParams.avatar = avatar
+				this.queryParams.nickname = nickname
+        if(gender){
+          for(let key in gender){
+            this.sexList.map(rs=>{
+              if(key == rs.type){
+                this.current = rs.id
+              }
+            })
+          }
+        }
 			})
 		},
 		methods: {
@@ -86,19 +97,8 @@
 			},
 			// 选择时间
 			confirmTime(e) {
-				this.timeShow = false
-				let time = new Date(e.value)
-				let year = time.getFullYear()
-				let month = time.getMonth() + 1
-				let date = time.getDate()
-				if (month < 10) {
-					month = '0' + month
-				}
-				if (date < 10) {
-					date = '0' + date
-				}
-				this.queryParams.birthday = year + '-' + month + '-' + date
-
+        this.queryParams.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
+        this.timeShow = false
 			},
 			// 上传头像
 			async handlerUploadImg() {
@@ -106,42 +106,23 @@
 					const res = await uni.showActionSheet({
 						itemList: ['拍照', '从相册选择'],
 					});
-
 					if (res.tapIndex === 0) {
 						// 用户选择拍照
-						this.takePhoto();
+						this.takeOrChoosePhoto(0);
 					} else if (res.tapIndex === 1) {
 						// 用户选择从相册选择
-						this.chooseImage();
+						this.takeOrChoosePhoto(1);
 					}
 				} catch (error) {
-					console.error(error);
 				}
 			},
 			// 拍照
-			takePhoto() {
-			  uni.chooseImage({
-			    sourceType: ['camera'],
-			    count: 9,
-			    success: res => {
-			      const tempFilePaths = res.tempFilePaths;
-				  console.log('@@@@tempFilePaths',tempFilePaths);
-			      // 调用上传图片的方法
-			      this.uploadAvatar(tempFilePaths[0]);
-			    },
-			    fail: error => {
-			      console.error(error);
-			    },
-			  });
-			},
-			//从相册中选择
-			chooseImage() {
+			takeOrChoosePhoto(idx) {
 			  uni.chooseImage({
-			    sourceType: ['album'],
-			    count: 9,
+			    sourceType: idx == 0 ? ['camera'] : ['album'],
+			    count: 1,
 			    success: res => {
 			      const tempFilePaths = res.tempFilePaths;
-				  console.log('@@@@tempFilePaths',tempFilePaths);
 			      // 调用上传图片的方法
 			      this.uploadAvatar(tempFilePaths[0]);
 			    },
@@ -152,15 +133,21 @@
 			},
 			// 上传头像
 			uploadAvatar(filePath) {
-			  // 在这里实现上传头像的逻辑，将filePath作为参数传入
-			  this.queryParams.avatar = filePath;
+        this.uoloadImg = filePath
+        uploadFile(filePath).then(res=>{
+          this.queryParams.avatar = JSON.parse(res.data).data.url;
+        })
 			  this.$forceUpdate(); // 手动触发组件的重新渲染
 			},
-			
+
 			// 点击提交按钮
 			handlerSubmitBtn() {
-				this.queryParams.gender = this.sexList[this.current].name
-				console.log('@@@@queryParams', this.queryParams);
+				this.queryParams.gender = this.sexList[this.current].type
+        this.$store.dispatch('UpdateUserInfo',this.queryParams).then(res=>{
+          setTimeout(()=>{
+            uni.navigateBack(-1)
+          },1500)
+        })
 			}
 		}
 	}
@@ -241,4 +228,4 @@
 	.gray-color {
 		color: #D2D5DB;
 	}
-</style>
+</style>