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="handleTopBoxClick">
				<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 || '0' }}</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="">客服电话：18050125110</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)
		// 	})
		// },
		handleTopBoxClick() {
			// 检查登录状态
			this.user = this.$common.userInfo();
			if (!this.user || typeof this.user === 'undefined' || this.user === '' || this.user === null) {
				// 未登录，跳转到登录页面
				this.$common.toLogin();
			} else {
				// 已登录，显示修改资料弹窗
				this.modifyShow = true;
			}
		},
		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() {
			if (this.wxnickname == '' || this.wxnickname == undefined) {
				this.$common.errorToShow('请输入昵称');
			} else {
				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>