retail-app/pages/my/index.vue

<template>
	<view class="my" :style="{background:'url('+ bannerImage +')'}">
		<view><nav-bar title="none" icon="none" background="transparent" border-color="transparent" ></nav-bar></view>
		<view class="content">
			<view class="news flex jcsb">
				<view class="info flex">
					<view style="width:128rpx;height:128rpx"><image class="img" :src="avatar || defaultAvatar" @tap="checkImage"></image></view>
					<view class="info-text flex-column jcsa">
						<view class="info-top flex aic">
							<view class="name">{{name}}</view>
							<view class="level flex aic">
								<re-image imgSrc="/retail/main/ic_chuji.png" width="54" height="60"></re-image>
								<view class="level-text">{{lvName}}</view>
							</view>
						</view>
						<view class="phone">{{username}}</view>
					</view>
				</view>
				<view class="right" @click="logOut"><re-image imgSrc="/retail/my/ic_more.png" width="24" height="24" class="more"></re-image></view>
			</view>
			<view class="menu">
				<view class="menu-item item-one">
					<view class="item-left flex aic jcsb" @click="toAccount">
						<view class="flex aic">
							<re-image imgSrc="/retail/my/ic_jilu.png" width="48" height="48"></re-image>
							<text>账户充值记录</text>
						</view>
						<re-image imgSrc="/retail/my/ic_more.png" width="24" height="24"></re-image>
					</view>
				</view>
				<view class="menu-item">
					<view class="item-left flex aic jcsb" @click="contact">
						<view class="flex aic">
							<re-image imgSrc="/retail/my/ic_kefu.png" width="48" height="48"></re-image>
							<text>联系客服</text>
						</view>
						<re-image imgSrc="/retail/my/ic_more.png" width="24" height="24"></re-image>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open" safeAreaInsetBottom :round="8">
            <view class="safe-area-inset-bottom">
                <view class="login-out" @click="outLogin">退出登录</view>
            </view>
		</u-popup>
		<u-popup :show="isContact" mode="center" @close="close" @open="open" :round="10">
			<view class="kefu">
				<view class="tips">
					<p>长按或截图保存微信二维码</p>
					<p>添加好友即可联系客服</p>
				</view>
				<image class="contact" :src='kefuImg' @longpress="saveImage"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { toRpx } from '@/utils/calculate.js'
	import defaultConfig from '@/config/default.js'
	import config from '@/config'
	import { changeAvatar } from '@/apis/main'
	import { getUserInfo } from '@/apis/user'
	export default {
		components: {},
		computed: {
			statusBarHeight() {
				return this.$store.state.info.systemInfo?.statusBarHeight
			},
		},
		data() {
			return {
				show:false,
				isContact: false,
				bannerImage: defaultConfig.ossImgUrl + '/retail/my/img_myBgc.png',
				kefuImg: defaultConfig.ossImgUrl + '/retail/my/wxCon.jpg',
				defaultAvatar: '../../static/image/img_touxiang.png',
				navBarHeight: uni.getStorageSync('navBarHeight'),
				lvName: '',
				avatar: '',
				name:'',
				username:'',
				accessToken:''
			}
		},
		onShow() {
			this.getInfo()
		},

		methods: {
			saveImage(e){
				// 获取图片的路径
				const imagePath = e.currentTarget.src;
				// 使用uni.saveImageToPhotosAlbum保存图片到系统相册
				uni.saveImageToPhotosAlbum({
					filePath: imagePath,
					success() {
						uni.showToast({
							title: '图片保存成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail(err) {
						console.log('保存失败：', err);
						uni.showToast({
							title: '图片保存失败',
							icon: 'none'
						});
					}
				});
				
			},

			outLogin(){
				uni.removeStorageSync('accessToken')
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('name')
				uni.redirectTo({
					url: '/pages/login/index'
				})
			},
			// 跳转充值记录
			toAccount(){
				uni.navigateTo({
					url: '/pages/accountRecharge/index'
				})
			},
			// 联系客服
			contact(){
				this.isContact = true
			},

			// 获取用户信息
			async getInfo(){
				const userInfo = await getUserInfo()
				if(userInfo){
					const { avatar,name,lvName,username } = userInfo
					this.avatar = avatar
					this.name = name
					this.lvName = lvName
					this.username = username
				}
			},

			// 切换头像
			checkImage() {
				var that = this;
				that.accessToken = uni.getStorageSync('accessToken')
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function (res) {
						// that.avatar  =  res.tempFilePaths[0];
						uni.uploadFile({
							url: `${config.baseUrl}/api/file/upload/FileV3`,
							filePath: res.tempFilePaths[0],
							header:{
								// 'Content-Type': 'multipart/form-data',
								'accessToken': that.accessToken
							},
							formData: {
								user: 'test',
							},
							success: (res) => {
								// console.log(res,'res');
								let data = JSON.parse(res.data)
								that.upAvatar(data.data)
								// setTimeout(() => {
								// 	resolve(data.data)
								// }, 1000)
							}
						})
					},
					fail:err => {
						console.error('选择图片失败',err)
					}
				});
			},


			// uploadFilePromise(url) {
			// 	return new Promise((resolve, reject) => {
			// 		let a = uni.uploadFile({
			// 			url: `${config.baseUrl}/api/file/upload/FileV3`,
			// 			filePath: url,
			// 			name: 'file',
			// 			header:{
			// 				'Content-Type': 'multipart/form-data',
			// 				'accessToken':uni.setStorageSync('accessToken')
			// 			},
			// 			formData: {
			// 				user: 'test',
			// 			},
						
			// 			success: (res) => {
			// 				console.log(res,'res');
			// 				let data = JSON.parse(res.data)
			// 				setTimeout(() => {
			// 					resolve(data.data)
			// 				}, 1000)
			// 			}
			// 		});
			// 	})
			// },
			// 更换头像
			async upAvatar(avatar) {
				uni.showLoading()
				await changeAvatar({avatar:avatar})
				uni.hideLoading()
				uni.setStorageSync('avatar',avatar)
				this.avatar = avatar
				uni.showToast({
					title:'更换成功'
				})
			},
			logOut(){
				this.show = true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				this.isContact = false
				// console.log('close');
			}
		},
		mounted() {

		},
	}
</script>

<style lang="scss" scoped>
	.my {
		background-repeat: no-repeat !important;
		background-size: contain !important;
		// background-position: top;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		.content{
			padding: 0 32rpx;
			.news {
				.info {
					.img{
						flex-shrink: 0;
						width: 128rpx;
						height: 128rpx;
						border-radius: 8rpx;
					}
					.info-text {
						margin: 8rpx 0 20rpx 36rpx;
						.info-top {
							.name {
								font-weight: 500;
								font-size: 32rpx;
								color: #363531;
							}

							.level {
								margin-left: 12rpx;

								.level-text {
									width: 105.9rpx;
									height: 47rpx;
									padding: 0 16rpx 0 26rpx;
									background: linear-gradient(130deg, #FFB873 0%, #FEC287 0%, #E69349 100%);
									border-radius: 0rpx 18rpx 18rpx 0rpx;
									font-weight: 500;
									font-size: 24rpx;
									color: #FFFFFF;
									line-height: 47rpx;
									margin-left: -16rpx;
									// text-align: left;
								}
							}
						}

					}

					.phone {
						font-weight: 400;
						font-size: 28rpx;
						color: #363531;
					}
				}
				.right{
					flex: 1;
					display: flex;
					justify-content: flex-end;
					.more{
						
						margin-top: 26rpx;
					}
				}

				.news-total {
					margin-top: 44rpx;

					.item-num {
						font-weight: bold;
						font-size: 40rpx;
						color: #363531;
					}

					.orange {
						color: #FF6400;
					}

					.item-text {
						font-weight: 400;
						font-size: 28rpx;
						color: #9598A6;
					}
				}

			}
			.menu{
				margin-top: 32rpx;
				background: #fff;
				border-radius: 16rpx;
				.menu-item{
					padding: 32rpx 28rpx 32rpx 24rpx;
					.item-left{
						text{
							margin-left: 20rpx;
						}
					}
				}
				.item-one{
					border-bottom: 2rpx solid #F0F2F4;
				}
			}
		}
		.login-out{
			text-align: center;
			margin: 40rpx 0;
		}
		.kefu{
			padding: 40rpx 0;
			.contact{
				flex-shrink: 0;
				object-fit: contain;
			}
			.tips {
				margin-top: 40rpx;
				// position: fixed;
				// top: 30rem;
				// left: 0;
				// width: 100%;
				text-align: center;
				font-size: 32rpx;
				p{
					margin-bottom: 20rpx;
				}
			}
		}
		
	}
</style>