WenWuGuanJia/pages/user/index.vue

<template>
	<view class="box">
		<u-navbar :placeholder="true" bgColor="rgba(255,255,255,0.0)" :leftIconSize="0"></u-navbar>

		<view class="bg_box">
			<view class="top_box" @click="modifyShow = true">
				<view class="img_box" style="display: flex">
					<image class="img" :src="mainBodyUserInfo.avatar? mainBodyUserInfo.avatar:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'"></image>

					<view class="">
						<view v-if="mainBodyUserInfo.nickname=='微信用户'" class="name">{{ mainBodyUserInfo.nickname}}{{mainBodyUserInfo.id}}</view>
						<view v-else class="name">{{ mainBodyUserInfo.nickname}}</view>
						<view class="" style="display: flex;align-items: center;">
							<view style="margin-left: 32rpx; font-size: 28rpx; color: rgba(68, 68, 68, 0.6)">总积分:{{mainBodyUserInfo.score}}</view>
							<view style="margin-left: 32rpx; font-size: 28rpx; color: rgba(68, 68, 68, 0.6)">id:{{mainBodyUserInfo.id}}</view>
						</view>
					</view>
				</view>
				<view class=""> 
					<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
				</view>
			</view>
		</view> 

		<!--  -->
		<view class="btm_box">
			<view class="item" @click="myList(index)" v-for="(item, index) in items" :key="item.index">
				<view class="" style="display: flex">
					<image style="width: 48rpx; height: 48rpx" :src="item.img"></image>
					<view class="item_tit">{{ item.title }}</view>
				</view>
				<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
			</view>

			<button style="border: node; background-color: transparent" open-type="contact" plain="true">
				<view class="item">
					<view class="" style="display: flex">
						<image style="width: 48rpx; height: 48rpx" src="/static/img/icon_u2.png"></image>
						<text class="item_tit">联系客服</text>
					</view>
					<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
				</view>
			</button>
			<view style="width: 90%; margin: auto; margin-top: 240rpx; text-align: center; font-size: 26rpx; color: #abaab2">
				<view class="">客服电话：18649931391</view>
			</view>
		</view>

		<u-modal :show="modifyShow" title="修改昵称和头像" @close="modifyShow = false" :showCancelButton="true" @cancel="modifyShow = false" @confirm="isOk">
			<view class="slot-content" style="text-align: center">
				<view>
					<text>点击以下头像获取微信默认头像</text>
					<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image style="width: 150rpx; height: 150rpx; margin-top: 20rpx" :src="mainBodyUserInfo.avatar? mainBodyUserInfo.avatar:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'"></image>
					</button>
				</view>
				<view style="margin-top: 20rpx">
					<input class="ipt" @change="blurname" v-model="wxnickname" type="nickname" placeholder="请输入昵称" />
					
				</view>
				<view style="margin-top: 40rpx">
					<input placeholder="请输入邮箱(非必填)" border="surround" v-model="mailbox"></input>
				</view>
			</view>
		</u-modal>
	</view>
</template>
<script>
var _token = '';
var _this;
import { baseUrl, baseApiUrl } from '@/config/config.js';
export default {
	data() {
		return {
			modifyShow: false /*修改资料  */,
			face: '',
			mainBodyUserInfo: {
				nickname: '',
				avatar: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
			},
			avatarUrl: '',
			wxnickname: '',
			mailbox:"",/*邮箱  */
			getFace: false,
			userdata: {
				friendsLists: [],
				friendsTotal: 0,
				user: {
					score: '0',
					exp: '0'
				}
			},
			items: [
				{
					title: '积分商城',
					img: '/static/img/icon_u5.png',
					path: '/answer_pages/gift/index'
				},
				{
					title: '我的投稿',
					img: '/static/img/icon_u1.png',
					path: '/user_fenbao/myTouGao/myTouGao'
				},
				{
					title: '积分日志',
					img: '/static/img/icon_u1.png',
					path: '/user_fenbao/rongYu/JiFen'
				},
				{
					title: '学习记录',
					img: '/static/img/icon_u3.png',
					path: '/pages/user/learn'
				},
				{
					title: '我的荣誉',
					img: '/static/img/icon_u4.png',
					path: '/user_fenbao/rongYu/rongYu'
				},
				{
					title: '我的活动',
					img: '/static/img/icon_u5.png',
					path: '/user_fenbao/huoDong/huoDong'
				}
			]
		};
	},
	onShow() {
		/* 调用userInfo()从本地获取用户信息 */
		this.user = this.$common.userInfo();
		
		if (this.user && this.user.nickname.indexOf('微信') >= 0) { 
			this.getFace = true;
		}
	},
	onLoad(option) {
		/* 来到我的页面判断用户是否登录 */
		_this = this;
		this.user = this.$common.userInfo();
		this.mainBodyUserInfo= this.$db.get('mainBodyUserInfo');
		// console.log(this.user);
		if (this.user === 'undefined' || this.user === '' || this.user === [] || this.user === null) {
			/* 跳转到登录页 */
			this.$common.toLogin();
		} else {
			/* 刷新 */
			this.$api.refreshUser(
				{
					main_body_id: 1,
				
				},
				(val) => {
					console.log(val, 999);
					if (val.code == 401) {
						this.$common.navigateTo('/pages/user/login');
						return;
					}
					this.user = val.data.user;
					// this.avatarUrl = this.user.avatar;
					this.auth = val.data.auth;
					this.$db.set('user', val.data.user);
					this.$db.set('auth', val.data.auth);
					 _this.$db.set('mainBodyUserInfo',val.data.mainBodyUserInfo);
					 this.mainBodyUserInfo= this.$db.get('mainBodyUserInfo');
				}
			);
			
		}
		// this.getMainBodyUser()
	},

	methods: {
// getMainBodyUser(){

// 	this.$api.getMainBodyUser({main_body_id:1,main_body_user_id:this.mainBodyUserInfo.},function(res){
// 		console.log(res,78787878)
// 	})
// },
		myList(i) {
			uni.navigateTo({
				url: this.items[i].path
			});
		},
		// 获取头像
		onChooseAvatar(e) {
			this.mainBodyUserInfo.avatar=e.detail.avatarUrl
			// this.avatarUrl = e.detail.avatarUrl;
		},
		// 获取昵称
		blurname(e) {
			this.wxnickname = e.detail.value;
			this.mainBodyUserInfo.nickname = e.detail.value;
		},
	isOk() {
	    this.modifyShow = false;
	    let userToken = '';
	    let auth = this.$db.get('auth');
	    userToken = auth.token;
	
	    // 准备formData，无论filePath是否存在都添加
	    let formData = {
	        nickname: this.wxnickname
	    };
	    
	    // 如果有图片路径，则准备上传
	    let uploadPromise = Promise.resolve();
	    if (this.mainBodyUserInfo.avatar) {
	        uploadPromise = new Promise((resolve, reject) => {
	            uni.uploadFile({
	                url: this.$config.baseUrl + 'api/common/upload?token=' + userToken,
	                filePath: this.mainBodyUserInfo.avatar,
	                fileType: 'image',
	                name: 'file',
	                headers: {
	                    Accept: 'application/json',
	                    'Content-Type': 'multipart/form-data'
	                },
	                formData: formData,
	                success: (uploadFileRes) => {
	                    var dataimg = JSON.parse(uploadFileRes.data);
	                    formData.avatar = dataimg.data.fullurl; // 若上传成功，更新formData中的avatar
	                    resolve(); // 成功后调用resolve
	                },
	                fail: (err) => {
	                    console.error('图片上传失败', err);
	                    reject(err); // 失败后调用reject，但后续操作仍会执行
	                },
	                complete: () => {
	                    // 无论成功还是失败，都继续执行编辑用户信息的API调用
	                    _this.$api.editMainBodyUser({
	                        avatar: formData.avatar || '', // 确保有值，即使上传失败也尝试提交
	                        main_body_id: 1,
	                        main_body_user_id: this.mainBodyUserInfo.id,
	                        nickname: this.wxnickname
	                    }, (data) => { 
	                        _this.$common.successToShow('修改成功');                
	                        if (formData.avatar) {
	                            // 只有上传成功才更新
	                            _this.mainBodyUserInfo.avatar = formData.avatar;
	                        }
	                        _this.mainBodyUserInfo.nickname = _this.wxnickname;
	                        _this.$db.set('mainBodyUserInfo', _this.mainBodyUserInfo);
	                        console.log(_this.mainBodyUserInfo,56456456);
	                    });
	                }
	            });
	        });
	    }
	
	  
	}
	// isOk() {
			
	// 		this.modifyShow = false;
	// 		let userToken = '';
	// 		let auth = this.$db.get('auth');
	// 		userToken = auth.token;
	// 		uni.uploadFile({
	// 			url: this.$config.baseUrl + 'api/common/upload?token=' + userToken,
	// 			filePath: this.mainBodyUserInfo.avatar,
	// 			fileType: 'image',
	// 			name: 'file',
	// 			headers: {
	// 				Accept: 'application/json',
	// 				'Content-Type': 'multipart/form-data'
	// 			},
	// 			formData: { nickname: this.wxnickname },
	// 			success: (uploadFileRes) => {
	// 				console.log(9999)
	// 				// console.log(JSON.parse(uploadFileRes.data), 6666);
	// 				var dataimg = JSON.parse(uploadFileRes.data);
	// 				// console.log(dataimg.data.fullurl, 6666);
	// 				_this.$api.editMainBodyUser( 
	// 					{
	// 						avatar: dataimg.data.fullurl,
	// 						main_body_id: 1,
	// 						main_body_user_id: this.mainBodyUserInfo.id,
	// 						nickname: this.wxnickname
	// 					},
	// 					(data) => { 
	// 						_this.$common.successToShow('修改成功');				
	// 						_this.mainBodyUserInfo.avatar =dataimg.data.fullurl;
	// 						_this.mainBodyUserInfo.nickname = _this.wxnickname;
	// 						_this.$db.set('mainBodyUserInfo', _this.mainBodyUserInfo);
	// 						console.log(_this.mainBodyUserInfo,56456456)
	// 					}
	// 				);
	// 			}
	// 		});   
	// 	}
	
		
	}
};
</script>
<style>
.box {
	/* height: 100%; */

	/* background-color: #f3e2c8; */
}
button {
	border: none !important;
	border: transparent !important;
	padding: 0 !important;
}
.bg_box {
	width: 100%;
	height: 800rpx;
	position: relative;
	top: -182rpx;
	background: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/user_bg.png') no-repeat;
	background-size: 100% 100%;
}
.top_box {
	width: 90%;
	height: 450rpx;
	margin-left: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.img {
	width: 108rpx;
	height: 108rpx;
	border: 4rpx solid #af7e44;
	border-radius: 50%;
}
.img_box {
	display: flex;
	align-items: center;
}
.name {
	font-size: 44rpx;
	margin-left: 30rpx;
	line-height: 60rpx;
	color: #444444;
}

.btm_box {
	margin-top: -620rpx;
	width: 750rpx;
	height: 100vh;
	position: relative;
	padding: 40rpx;
	z-index: 2;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	background-color: #fff9e9;
}

.item {
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.item_tit {
	margin-left: 20rpx;
	font-size: 32rpx;
	 
	font-weight: 900;
	line-height: 48rpx;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
</style>