uniapp/pagesHome/account/index.vue

<template>
	<home-frame @toPath="toPath">
		<view class="main">
			<view class="one">
				<view class="one_1">
					<!-- <image src="../../static/logo.jpg" mode=""></image> -->
					<image class="image" :src="logo_url" mode="">
					</image>
				</view>
				<view class="one_2">
					<view class="name">
						{{userInfo.name}}
					</view>
					<view class="id">
						ID:{{userInfo.account_id}}
					</view>
				</view>
				<view class="one_3" v-if="!userInfo._id">
					<button size="mini">注册/登录</button>
				</view>
			</view>
			<view class="two">
				<view class="list" v-for="(item,index) in btnList" :key="index">
					<image class="image" src="../../static/logo.jpg" mode=""></image>
					<view class="name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</home-frame>
</template>

<script>
	import homeFrame from "../components/home-frame.vue";
	export default {
		components: {
			homeFrame
		},
		data() {
			return {
				// 基本信息
				basicInfo: {},
				// 用户信息
				userInfo: {},
				// 头像
				logo_url: '',
				// 功能按钮
				btnList: [ //
					{
						name: '我的喜欢'
					}, {
						name: '我的收藏'
					}, {
						name: '推广分享'
					}, {
						name: '应用中心'
					}, {
						name: '账号信息'
					}, {
						name: '退出登录'
					}
				]
			};
		},
		onLoad() {

		},
		onShow() {
			const that = this;
			that.searchBasic();
			that.search()
		},
		methods: {
			searchBasic() {
				const that = this;
				uni.getStorage({
					key: 'basicInfo',
					success: (res) => {
						let data = res.data
						that.$set(that, `basicInfo`, data);
					}
				})
			},
			search() {
				const that = this;
				let user = {
					_id: '',
					name: '自由天空',
					account_id: '123456',
					logo_url: [ //
						{
							id: "20230216100918",
							name: "头像.jpg",
							status: "success",
							uid: 1676513358695,
							uri: "/files/projectadmin/imgurl/20230216100918.jpg",
							url: "http://47.93.34.200/files/projectadmin/imgurl/20230216100918.jpg"
						}
					]
				}
				that.$set(that, `userInfo`, user);
				// 判断logo
				let logo_url = '';
				if (user.logo_url && user.logo_url.length > 0) {
					logo_url = user.logo_url[0].url
				} else {
					logo_url = that.basicInfo.logo_url[0].url
				}
				that.$set(that, `logo_url`, logo_url)

			},
			// 跳转页面
			toPath(e) {
				let url = `/${e.route}`;
				if (e.type == '0') uni.navigateTo({
					url
				})
				else if (e.type == '1') uni.redirectTo({
					url
				})
				else if (e.type == '2') uni.reLaunch({
					url
				})
				else if (e.type == '3') uni.switchTab({
					url
				})
			}
		},
	};
</script>

<style lang="scss">
	.main {
		background-color: var(--rgb000);
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 92vh;
		overflow-y: auto;

		.one {
			display: flex;
			padding: 2vw;
			margin: 0 0 10px 0;

			.one_1 {
				width: 80px;
				height: 80px;
				overflow: hidden;
				margin: 0 2vw 0 0;

				.image {
					width: 100%;
					height: 80px;
					overflow: hidden;
					border-radius: 90%;
				}
			}

			.one_2 {
				flex-grow: 1;
				color: var(--rgbfff);
				font-size: 16px;
				font-weight: bold;
				padding: 2vw 0;
				overflow: hidden;

				.name {

					font-size: 18px;
					margin: 0 0 1vw 0;
					background: linear-gradient(to bottom right, var(--rgbfa4), var(--rgbfff));
					color: transparent;
					background-clip: text;
					-webkit-background-clip: text;

				}

			}

			.one_3 {
				padding: 4vw 0;
				overflow: hidden;

				button {
					background-color: var(--rgbfa4);
					color: var(--rgbfff);
				}
			}
		}

		.two {
			display: flex;
			// justify-content: space-around;
			flex-wrap: wrap;
			padding: 0 2vw;

			.list {
				width: 22%;
				height: 74px;
				margin: 0 10px 10px 0;
				text-align: center;
				background: linear-gradient(to bottom right, var(--rgb000), var(--rgbfa4));
				border: 1px solid var(--rgb111);
				border-radius: 5px;

				.image {
					width: 20px;
					height: 20px;
					margin: 3vw 0 2vw 0;
				}

				.name {
					color: var(--rgbfff);
					font-size: 14px;
				}
			}

			.list:nth-child(4n) {
				margin: 0 0 10px 0;
			}
		}
	}
</style>