|
|
@@ -1,230 +1,262 @@
|
|
|
<template>
|
|
|
- <view class="editData">
|
|
|
- <u-cell-group>
|
|
|
- <u-cell size="large" title="头像" value="头像" isLink url="" @click="onClickAvatar" />
|
|
|
- <u-cell
|
|
|
- size="large"
|
|
|
- @click="onClickUserName(userName, '用户名')"
|
|
|
- title="用户名"
|
|
|
- :value="userName"
|
|
|
- isLink
|
|
|
- url=""
|
|
|
- />
|
|
|
- <u-cell
|
|
|
- size="large"
|
|
|
- @click="onClickNickName(NickName, '昵称')"
|
|
|
- title="昵称"
|
|
|
- :value="NickName"
|
|
|
- isLink
|
|
|
- url=""
|
|
|
- />
|
|
|
-
|
|
|
- <u-cell size="large" @click="onClickGender" title="性别" :value="gender" isLink url="" />
|
|
|
- <u-cell size="large" title="生日" :value="birthday" isLink @click="openDatePicker" />
|
|
|
- <u-cell
|
|
|
- size="large"
|
|
|
- @click="onClickLocation"
|
|
|
- title="常用地"
|
|
|
- :value="location"
|
|
|
- isLink
|
|
|
- url=""
|
|
|
- />
|
|
|
- <u-cell size="large" title="个人介绍" :value="introduction" isLink @click="openInputBox" />
|
|
|
- </u-cell-group>
|
|
|
-
|
|
|
- <!-- 用户协议弹框 -->
|
|
|
- <personInfoEdit
|
|
|
- v-if="show"
|
|
|
- :value="value"
|
|
|
- :title="title"
|
|
|
- :show="show"
|
|
|
- @confirm="confirm"
|
|
|
- @cancel="cancel"
|
|
|
- >
|
|
|
- <u--input
|
|
|
- style="border: 0.2rpx solid #ccc; border-color: #007bff"
|
|
|
- v-model="value"
|
|
|
- @change="change"
|
|
|
- >
|
|
|
- </u--input>
|
|
|
- </personInfoEdit>
|
|
|
+ <view class="ccontainer">
|
|
|
+ <view class="item-box">
|
|
|
+ <view class="item-left"> 头像 : </view>
|
|
|
+ <view class="item-right flex-end">
|
|
|
+ <image @click="handlerUploadImg" class="img" :src="queryParams.avatar ? queryParams.avatar : require('@/static/QR57a.jpg')"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <view class="item-left"> 昵称 : </view>
|
|
|
+ <view class="item-right">
|
|
|
+ <u--input placeholder="请输入内容" border="none" v-model="queryParams.nickname"></u--input>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <view class="item-left"> 性别 : </view>
|
|
|
+ <view class="item-right">
|
|
|
+ <view class="sex-item">
|
|
|
+ <view class="item" v-for=" (item,index) of sexList" :class="current == index ? 'act-sex' : ''" :key="index"
|
|
|
+ @click="handlerSelectGender(item)"> {{ item.name }} </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <view class="item-left"> 生日 : </view>
|
|
|
+ <view class="item-right right-time-box" @click="timeShow = true">
|
|
|
+ <view class="time-left" :class="queryParams.birthday ? '' : 'gray-color'">
|
|
|
+ {{ queryParams.birthday ? queryParams.birthday : '请选择您的生日' }}
|
|
|
+ </view>
|
|
|
+ <view class="time-right">
|
|
|
+ <u-icon name="arrow-right"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-datetime-picker :show="timeShow" v-model="time_value" mode="date" @cancel='timeShow = false'
|
|
|
+ @confirm='confirmTime'></u-datetime-picker>
|
|
|
+
|
|
|
+ <view class="btn-box">
|
|
|
+ <button class="btn" @click="handlerSubmitBtn">提交</button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import personInfoEdit from '@/components/personInfoEdit/personInfoEdit.vue';
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- personInfoEdit,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- show: '',
|
|
|
- value: '',
|
|
|
- userName: 'yizhiyang', //默认用户名
|
|
|
- NickName: '易只烊', //默认昵称
|
|
|
- gender: '女', // 默认性别为女
|
|
|
- birthday: '2000-03-01', //默认生日
|
|
|
- location: '贵阳', //默认常用的
|
|
|
- introduction: '内容', // 默认个人介绍内容
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- // 点击头像
|
|
|
- async onClickAvatar() {
|
|
|
- try {
|
|
|
- const res = await uni.showActionSheet({
|
|
|
- itemList: ['拍照', '从相册选择'],
|
|
|
+ import {
|
|
|
+ editUserInfo,
|
|
|
+ maintainUserInfo
|
|
|
+ } from "@/api/client/mine.js"
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ queryParams: {
|
|
|
+ avatar: '../../static/logo.png', // 头像
|
|
|
+ gender: '', //性别
|
|
|
+ birthday: '', //生日
|
|
|
+ nickname: '', //昵称
|
|
|
+ },
|
|
|
+ time_value: '',
|
|
|
+ timeShow: false,
|
|
|
+ sexList: [{
|
|
|
+ id: 0,
|
|
|
+ name: '男',
|
|
|
+ type:'MALE'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: '女',
|
|
|
+ type:'FEMALE'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ current: 0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.handlerInitUserMessage()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handlerInitUserMessage() {
|
|
|
+ maintainUserInfo().then(res => {
|
|
|
+ this.queryParams.avatar = res.data.avatar;
|
|
|
+ this.queryParams.gender = res.data.gender;
|
|
|
+ this.queryParams.birthday = res.data.birthday;
|
|
|
+ this.queryParams.nickname = res.data.nickname;
|
|
|
});
|
|
|
+ },
|
|
|
+ // 选择性别
|
|
|
+ handlerSelectGender(item) {
|
|
|
+ this.current = item.id
|
|
|
+ },
|
|
|
+ // 选择时间
|
|
|
+ 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
|
|
|
|
|
|
- if (res.tapIndex === 0) {
|
|
|
- // 用户选择拍照
|
|
|
- this.takePhoto();
|
|
|
- } else if (res.tapIndex === 1) {
|
|
|
- // 用户选择从相册选择
|
|
|
- this.chooseImage();
|
|
|
+ },
|
|
|
+ // 上传头像
|
|
|
+ async handlerUploadImg() {
|
|
|
+ try {
|
|
|
+ const res = await uni.showActionSheet({
|
|
|
+ itemList: ['拍照', '从相册选择'],
|
|
|
+ });
|
|
|
+
|
|
|
+ if (res.tapIndex === 0) {
|
|
|
+ // 用户选择拍照
|
|
|
+ this.takePhoto();
|
|
|
+ } else if (res.tapIndex === 1) {
|
|
|
+ // 用户选择从相册选择
|
|
|
+ this.chooseImage();
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error);
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
- console.error(error);
|
|
|
+ },
|
|
|
+ // 拍照
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 上传头像
|
|
|
+ uploadAvatar(filePath) {
|
|
|
+ // 在这里实现上传头像的逻辑，将filePath作为参数传入
|
|
|
+ this.queryParams.avatar = filePath;
|
|
|
+ this.$forceUpdate(); // 手动触发组件的重新渲染
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击提交按钮
|
|
|
+ handlerSubmitBtn() {
|
|
|
+ this.queryParams.gender = this.sexList[this.current].type
|
|
|
+ editUserInfo(this.queryParams).then(res=>{
|
|
|
+ if(res.code == 200){
|
|
|
+ uni.showToast({
|
|
|
+ title:'修改成功',
|
|
|
+ icon:'none'
|
|
|
+ })
|
|
|
+ setTimeout(()=>{
|
|
|
+ uni.navigateBack(-1)
|
|
|
+ },1500)
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ title:res.msg,
|
|
|
+ icon:'none'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
|
|
|
- // 拍照
|
|
|
- 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);
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .ccontainer {
|
|
|
+ padding: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
|
- // 上传头像
|
|
|
- uploadAvatar(filePath) {
|
|
|
- // 在这里实现上传头像的逻辑，将filePath作为参数传入
|
|
|
+ .item-box {
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx;
|
|
|
+ box-shadow: 0 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- this.user_info.avatar = newImagePath;
|
|
|
- this.$forceUpdate(); // 手动触发组件的重新渲染
|
|
|
- },
|
|
|
+ .item-left {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ width: 13%;
|
|
|
+ }
|
|
|
|
|
|
- //点击用户名哪一行
|
|
|
- onClickUserName(userName, value) {
|
|
|
- this.uservalue = userName; //把行最后的值给value
|
|
|
- this.title = `编辑${value}`; //弹框标题
|
|
|
- this.show = true; //打开弹框
|
|
|
- },
|
|
|
+ .item-right {
|
|
|
+ width: 87%;
|
|
|
|
|
|
- //点击弹框确认
|
|
|
- confirm() {
|
|
|
- this.userName = this.value;
|
|
|
- this.show = false;
|
|
|
- },
|
|
|
- //点击昵称
|
|
|
- onClickNickName(NickName, value) {
|
|
|
- this.nickvalue = NickName; //把行最后的值给value
|
|
|
- this.title = `编辑${value}`; //弹框标题
|
|
|
- this.show = true; //打开弹框
|
|
|
- },
|
|
|
- //点击弹框确认
|
|
|
- confirm() {
|
|
|
- this.NickName = this.value;
|
|
|
- this.show = false;
|
|
|
- },
|
|
|
- // 点击性别
|
|
|
- onClickGender() {
|
|
|
- uni.showActionSheet({
|
|
|
- itemList: ['男', '女'],
|
|
|
- success: res => {
|
|
|
- if (res.tapIndex === 0) {
|
|
|
- this.gender = '男';
|
|
|
- } else if (res.tapIndex === 1) {
|
|
|
- this.gender = '女';
|
|
|
+ .img {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sex-item {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
}
|
|
|
- },
|
|
|
- fail: error => {
|
|
|
- console.error(error);
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- // 点击生日
|
|
|
- openDatePicker() {
|
|
|
- uni.showDatePicker({
|
|
|
- start: '1900-01-01',
|
|
|
- end: '2200-12-31',
|
|
|
- currentDate: this.birthday,
|
|
|
- success: res => {
|
|
|
- if (res.errMsg === 'showDatePicker:ok') {
|
|
|
- const selectedDate = res.dateString;
|
|
|
- this.birthday = selectedDate; // 将选择的日期赋值给 birthday
|
|
|
+
|
|
|
+ .act-sex {
|
|
|
+ border: 2rpx solid #5992BB;
|
|
|
+ background-color: #5992BB;
|
|
|
+ color: #fff !important;
|
|
|
}
|
|
|
- },
|
|
|
- fail: error => {
|
|
|
- console.error(error);
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- // 点击常用地
|
|
|
- onClickLocation() {
|
|
|
- uni.showActionSheet({
|
|
|
- itemList: ['北京', '上海', '广州', '深圳'],
|
|
|
- success: res => {
|
|
|
- const selectedLocation = ['北京', '上海', '广州', '深圳'][res.tapIndex];
|
|
|
- this.location = selectedLocation; // 将选择的地点赋值给 location
|
|
|
- },
|
|
|
- fail: error => {
|
|
|
- console.error(error);
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- // 点击个人介绍
|
|
|
- openInputBox() {
|
|
|
- this.title = '编辑个人介绍'; // 设置弹框标题
|
|
|
- this.value = this.introduction; // 将当前介绍内容赋值给输入框的值
|
|
|
- this.show = true; // 打开弹框
|
|
|
- },
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- // 点击弹框确认
|
|
|
- confirm() {
|
|
|
- this.introduction = this.value; // 将输入框中的内容赋值给个人介绍
|
|
|
- this.show = false; // 关闭弹框
|
|
|
- },
|
|
|
- //点击弹框取消
|
|
|
- cancel() {
|
|
|
- this.show = false;
|
|
|
- },
|
|
|
+ .right-time-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
|
|
|
- //监听input框输入
|
|
|
- change(value) {
|
|
|
- this.value = value;
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
+ .flex-end {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-.editData {
|
|
|
- height: 100vh;
|
|
|
-}
|
|
|
+ .btn-box {
|
|
|
+ margin-top: 100rpx;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(to right, #e8cbc0, #636fa4);
|
|
|
+ box-shadow: 0 5rpx 15rpx 0 rgba(99, 111, 164, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .gray-color {
|
|
|
+ color: #D2D5DB;
|
|
|
+ }
|
|
|
</style>
|
