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" @tap="chooseImage"></image></view>
					<view class="info-text flex-column jcsa">
						<view class="info-top flex aic">
							<view class="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">初级</view>
							</view>
						</view>
						<view class="phone">13630639549</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">
						<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">
            <view class="safe-area-inset-bottom">
                <view class="login-out">退出登录</view>
            </view>
		</u-popup>
	</view>
</template>

<script>
	import {
		toRpx
	} from '@/utils/calculate.js'
	import defaultConfig from '@/config/default.js'

	export default {
		components: {},
		computed: {
			statusBarHeight() {
				return this.$store.state.info.systemInfo?.statusBarHeight
			},
		},
		data() {
			return {
				show:false,
				bannerImage: defaultConfig.ossImgUrl + '/retail/my/img_myBgc.png',
				avatar: '../../static/image/img_touxiang.png',
				navBarHeight: uni.getStorageSync('navBarHeight')
			}
		},
		onLoad() {

		},

		methods: {
			toAccount(){
				uni.navigateTo({
					url: '/pages/accountRecharge/index'
				})
			},
			chooseImage() {
				var that = this;
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function (res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						that.avatar  =  res.tempFilePaths[0];
					}
				});
			},
			logOut(){
				this.show = true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = 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;

		}
	}
</style>