zhapp/pages/my/my.vue

<template>
	<view class="page">

		<view class="header dis f-c ">
			<view class="person dis a-start j-s " @click="checkInfo">
				<view class="dis ">
					<view class="avatar">
						<image
							:src=" userInfo.sysUser && userInfo.sysUser.headSculpture ? userInfo.sysUser.headSculpture : '/static/image/avatar.png'"
							mode="">
						</image>
					</view>
					<view class="relatedInfo dis f-c " v-if="userInfo.sysUser">
						<view class="title dis a-c mb-1">
							<text>{{ this.userInfo.sysUser.name }}</text>
							<image src="/static/image/my/tag1.png" mode=""></image>
							<image src="/static/image/my/tag2.png" mode=""></image>
						</view>
						<text>{{ this.userInfo.sysUser.deptName || '暂无机构' }}</text>
					</view>
				</view>
				<image class="edit mt-1 mr-1" src="/static/icon/my/icon9.png" mode=""></image>
			</view>
			<view class="walletContent mt-2" @click="walletBalance">
				<view class="title">
					<text>我的钱包</text>
				</view>
				<view class="balance dis j-s a-c" v-if="walletInfo">
					<view class="item dis f-c a-c">
						<text>余额(元)</text>
						<text>{{ walletInfo.walletBalanceRemoveWithdraw || 0 }}</text>
					</view>
					<u-line length="35" color="#EEEEEE" direction="col" :hairline="false"></u-line>
					<view class="item dis f-c a-c">
						<text>提现中(元)</text>
						<text>{{ walletInfo.withdrawingBalance || 0  }}</text>
					</view>
					<u-line length="35" color="#EEEEEE" direction="col" :hairline="false"></u-line>
					<view class="item dis f-c a-c">
						<text>积分</text>
						<text>{{ walletInfo.integral || 0  }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 占位 -->
		<view class="placeholder"></view>
		<view class="p-3" style="padding-bottom: 50px;">
			<!-- 业绩 -->
			<view class="myPerformance dis f-c a-c">
				<text class="title">我的业绩</text>
				<view class="totalPremium dis f-c a-c j-end">
					<text>签单保费(元)</text>
					<text>{{ walletInfo.signPremium || 0  }}</text>
					<view class="tag"></view>
					<view class="tag2"></view>
				</view>
				<view class="Details dis a-c j-s">
					<view class="item">
						<text>{{ walletInfo.orderCount || 0 }}</text>
						<text>车险订单(笔)</text>
					</view>
					<view class="item">
						<text>{{ walletInfo.totalIncome || 0 }}</text>
						<text>累计收入(元)</text>
					</view>
					<view class="item">
						<text>{{ walletInfo.totalInviteCount || 0 }}</text>
						<text>累计邀请(人)</text>
					</view>
				</view>
			</view>
			<!-- 工具 -->
			<view class="myTools mt-2">
				<view class="toolsItem dis f-c a-c j-c" v-for="(item, index) in ToolsList" :key="index"
					@click="toolClick(item)">
					<image :src="item.icon" mode=""></image>
					<text>{{ item.text }}</text>
				</view>
			</view>
			<view class=" mt-2 ">
				<uni-Cell :celllist="celllist" round="20rpx">
					<template #customContent="{ item }">
						<view v-if="item.title == '新版本'" class="dis a-c  customContent">
							<template v-if="hasUpdate">
								<view class="newtag dis a-c j-c">
									New
								</view>
								<text style="font-size: 28rpx;color: #666;">{{ version || '1.0.0' }}</text>
							</template>
						</view>
					</template>
				</uni-Cell>
			</view>
		</view>
		<!-- app版本更新组件-->
		<app-update ref="app_update" @status="updateStatus"></app-update>
	</view>
</template>

<script>
	import appUpdate from "@/components/yzhua006-update/app-update.vue"; //app更新组件
	import {
		mapState,
		mapMutations
	} from "vuex"
	import store from '@/store';

	export default {
		components: {
			appUpdate,
		},
		data() {
			return {
				version: "", //版本
				dateShow: false,
				hasUpdate: false, //有无更新
				ToolsList: [{
						text: "邀请码",
						url: "/pages/tool/invitationCode",
						icon: "/static/icon/my/icon1.png",
					},
					{
						text: "分销中心",
						url: "/pages/tool/distributionCenter",
						icon: "/static/icon/my/icon2.png",
					},
					{
						text: "订单管理",
						url: "",
						icon: "/static/icon/my/icon3.png",
					},
					{
						text: "保单查询",
						url: "",
						icon: "/static/icon/my/icon4.png",
					},
					{
						text: "自主报案",
						url: "/pages/tool/selfReport",
						icon: "/static/icon/my/icon5.png",
					},
					{
						text: "海报管理",
						url: "/pages/tool/poster",
						icon: "/static/icon/my/icon6.png",
					},
					{
						text: "佣金测算",
						url: "",
						icon: "/static/icon/my/icon7.png",
					},
					{
						text: "帮助与客服",
						url: "/pages/tool/helpAndSupport",
						icon: "/static/icon/my/icon8.png",
					},

				],
				celllist: [{
						title: "设置",
						icon: "/static/icon/my/icon10.png",
						useSlot: false, //是否插槽，
						url: "/pages/set/set",
						clickType: 'navigate',
					},
					{
						title: "新版本",
						icon: "/static/icon/my/icon11.png",
						useSlot: true,
						url: "/pages/quote/quoteInfo",
						clickType: 'checkVersion',

					}, {
						title: "关于我们",
						icon: "/static/icon/my/icon12.png",
						useSlot: false,
						url: "/pages/set/aboutSet",
						clickType: 'navigate',
					}
				],
				walletInfo: {},
			}
		},
		async onLoad() {

			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
				this.version = widgetInfo.version;
			})
			setTimeout(() => {
				this.$refs.app_update.update(); //调用子组件检查更新方法
			}, 500)
			// #endif
		},
		onShow() {
			this.getUserInfo();
			this.userPerformance();
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			updateStatus(item) {
				this.hasUpdate = item;
			},
			//我的业绩
			async userPerformance() {
				let res = await this.$http.get('/userAccount/userWallet'); //获取钱包信息
				if (res.code == '200') {
					this.walletInfo = res.data;
				}
			},
			async getUserInfo() {
				let res = await this.$http.get('/appUser/userInfoGet'); //获取人员信息
				if (res.code == '200') {
					store.commit('setUserModules', { //用户信息
						title: 'userInfo',
						data: {
							sysUser: {
								...res.data
							}
						}
					})
				}
			},
			//个人信息
			checkInfo() {
				uni.navigateTo({
					url: '/pages/my/userInfo'
				})
			},
			//工具跳转
			toolClick(item) {
				uni.navigateTo({
					url: item.url,
				})
			},
			//跳转钱包
			walletBalance() {
				uni.navigateTo({
					url: '/pages/wallet/myWallet?info=' + JSON.stringify(this.walletInfo)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F8F8F8;
		height: 100%;
	}

	.header {
		width: 100%;
		height: 420rpx;
		background: white;
		background-image: url('../../static/image/my/bg1.png');
		background-size: 100% 100%;
		aspect-ratio: 25 / 14;
		padding: 176rpx 30rpx 0;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;

		//头部信息
		.person {
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 4rpx solid #fff;
				margin-left: 7rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;

				}
			}

			.relatedInfo {
				color: #1F1F1F;
				margin-left: 25rpx;

				.title {
					font-size: 36rpx;
					font-weight: bold;

					image:nth-child(2) {
						width: 95rpx;
						height: 40rpx;
						margin: 0 10rpx;
					}

					image:nth-child(3) {
						width: 62rpx;
						height: 26rpx;
					}
				}

				>text {
					font-size: 22rpx;
				}
			}

			.edit {
				width: 30rpx;
				height: 30rpx;
			}
		}

		//钱包
		.walletContent {
			width: 100%;
			height: 207rpx;
			position: relative;

			.title {
				width: 180rpx;
				height: 105rpx;
				padding: 13rpx 24rpx;
				box-sizing: border-box;
				color: #333;
				font-size: 32rpx;
				position: relative;
				border-top-left-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
				background: #FDE935;
				border-top: 2rpx solid #fff;
				border-left: 2rpx solid #fff;

				&::after {
					content: "";
					position: absolute;
					top: 1px;
					right: -48px;
					height: 100%;
					width: 50px;
					z-index: 2;
					background-color: #FDE935;
					clip-path: path("M0 0 C12.5 0 10.5 25 25 50 L0 50 Z");
					// clip-path: path("M0 0 C17.5 0 13.5 25 25 50 L0 50 Z");

				}
			}

			.balance {
				position: absolute;
				top: 66rpx;
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				z-index: 2;
				background: linear-gradient(to left,
						#fff 60%,
						rgba(255, 255, 255, 0.7) 70%);
				border-radius: 20rpx;
				border: 2rpx solid #FFFFFF;
				backdrop-filter: blur(30rpx);

				/* 背景模糊 */
				.item {
					width: 32%;

					text:first-child {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 10rpx;
					}

					text:last-child {
						color: #333;
						font-size: 36rpx;
						font-weight: bold;
					}

				}
			}

		}
	}

	.placeholder {
		width: 100%;
		height: 420rpx;
	}

	//我的业绩
	.myPerformance {
		width: 100%;
		margin-top: 72rpx;
		background: linear-gradient(180deg, rgba(253, 233, 53, 0.05) 0%, rgba(253, 233, 53, 0) 100%), #FFFFFF;
		border-radius: 20rpx;
		padding: 72rpx 30rpx 20rpx;
		box-sizing: border-box;
		position: relative;

		.title {
			position: absolute;
			top: 27rpx;
			left: 20rpx;
			font-size: 32rpx;
			color: #333;
		}

		.totalPremium {
			position: relative;
			width: 390rpx;
			height: 180rpx;
			background: transparent;
			padding: 0 62rpx;
			box-sizing: border-box;

			>text:nth-child(1) {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 8rpx;
			}

			>text:nth-child(2) {
				font-size: 50rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 8rpx;
			}

			.tag {
				content: "";
				position: absolute;
				bottom: -7rpx;
				left: 0;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background: rgba(253, 233, 53, 0.4);
			}

			.tag2 {
				content: "";
				position: absolute;
				bottom: -7rpx;
				right: 0;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background-color: rgba(253, 233, 53, 0.4);
			}
		}

		.totalPremium::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 7px solid rgba(253, 233, 53, 0.5);
			border-radius: 195rpx 195rpx 0 0;
			box-sizing: border-box;
			border-bottom: transparent;


		}



		.Details {
			width: 100%;
			height: 152rpx;
			background-image: url('../../static/image/my/bg2.png');
			background-size: 100% 100%;
			padding: 48rpx 30rpx 20rpx;
			box-sizing: border-box;

			.item {
				width: 33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				text:first-child {
					font-size: 36rpx;
					color: #333;
					font-weight: bold;
					margin-bottom: 6rpx;
				}

				text:last-child {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}

	//工具
	.myTools {
		padding: 35rpx 30rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 20rpx;
		display: grid;
		/* 启用网格布局 */
		grid-template-columns: repeat(4, 1fr);
		/* 3 列，每列等宽 */
		grid-template-rows: auto;
		/* 行高自适应 */
		row-gap: 40rpx;
		/* 只设置行间距（上下） */
		column-gap: 10px;
		/* 列间距设为 0（可选） */

		/* 网格间距 */
		.toolsItem {
			image {
				width: 58rpx;
				height: 58rpx;
				margin-bottom: 6rpx;
			}

			text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	.customContent {
		.newtag {
			width: auto;
			height: 100%;
			padding: 5rpx 12rpx;
			box-sizing: border-box;
			background: #FF4545;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-size: 18rpx;
			color: #fff;
			margin-right: 18rpx;
		}
	}
</style>