phone_uni/pages/mine/index.vue

<template>
	<view class="content">
		<custom-layout ref="layout" :showBottom="true" :back="{show:false}" title="我的" :show-page-bottom="false"
			v-model="dataList" :showLoadingNomore="false" @layoutquery="onQueryList">
			<template #content>
				<view class="mine_top mt10">
					<view class="mine_top_left">
						<up-avatar :src="userImage" size="120rpx"></up-avatar>
						<view class="mine_t_l_text">清风灼月lqy</view>
					</view>
					<view class="mine_top_right">
						<view class="mine_t_r_t">积分</view>
						<view class="mine_t_r_c mt6 mb8">119</view>
						<view class="mine_t_r_b" @click="onRecharge">充值</view>
					</view>
				</view>
				<view class="mine_order">
					<view class="mine_order_box pb16">
						<view class="flx-justify-between p10 pt20 pb20">
							<view class=" flx-align-center">
								<view class="section_icon mr10"></view>
								<text class="section_text">我的订单</text>
							</view>
							<uni-icons type="right" size="20"></uni-icons>
						</view>
						<view class="mine_order_list" :width="nvueWidth">
							<view class="mine_order_list_item" v-for="(item,index) in orderList" :key="index">
								<view class="order_item_icon" :style="`background-image:url(${item.icon})`"></view>
								<text class="order_item_text mt10">{{item.name}}</text>
							</view>
						</view>
					</view>

				</view>
				<view class="mine_nav mt10">
					<view class="mine_nav_box">
						<view class="flx-justify-between pt10 pl10 pr10">
							<view class="flx-align-center">
								<view class="section_icon mr10"></view>
								<text class="section_text">小印工具箱</text>
							</view>
						</view>
						<view class="mine_nav_box_item pb10 pl20 pr20">
							<view class="flx-justify-between pt14 pb14"
								:class="index < toolList.length - 1 ?'border_bottom':''"
								v-for="(item,index) in toolList" :key="index">
								<text class="nav_box_title">{{item.name}}</text>
								<uni-icons type="right" size="20"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</template>
		</custom-layout>
	</view>



</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app";
	// 引入组件
	import order1 from '~@/static/images/order1.png'
	import order2 from '@/static/images/order2.png'
	import order3 from '@/static/images/order3.png'
	import order4 from '@/static/images/order4.png'
	const userImage = 'https://img.js.design/assets/img/65b211c3cdb6ea326421fd30.png'

	// 定义变量内容
	const orderList = reactive([{
			id: '1',
			name: '待支付',
			icon: order1
		},
		{
			id: '2',
			name: '待打印',
			icon: order2
		},
		{
			id: '3',
			name: '待配送',
			icon: order3
		},
		{
			id: '4',
			name: '已完成',
			icon: order4
		},
	])
	const toolList = reactive([{
			id: '1',
			name: '我的设计',
			icon: order1
		},
		{
			id: '2',
			name: '我的贴纸',
			icon: order2
		},
		{
			id: '3',
			name: '我的分享',
			icon: order3
		},
		{
			id: '4',
			name: '邀请好友',
			icon: order4
		},
	])
	// 跳转充值页面
	const onRecharge = () => {
		uni.navigateTo({
			url: '/pages/mine/recharge',
		})
	}

	// 业务列表
	const dataList = ref([{}])
	const num = ref(1)
	const layout = ref()
	const onQueryList = (event) => {
		const {
			pageNo,
			pageSize
		} = event
		if (pageNo > 1) {
			if (num.value < 2) {
				num.value++
				layout.value.complete(dataList.value);
			} else {
				layout.value.complete([]);
			}
		} else {
			num.value = 2
			layout.value.complete(dataList.value);
		}
	}
	// 生命中期
	onMounted(() => {
		console.log('onMounted生命周期')
	})
</script>

<style lang="scss" scoped>
	.mine_top {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		box-sizing: border-box;

		.mine_top_left {
			display: flex;
			align-items: center;

			.mine_t_l {
				width: 120rpx;
				height: 120rpx;
			}

			.mine_t_l_text {
				font-size: 36rpx;
				font-weight: 600;
				letter-spacing: 0rpx;
				line-height: 47.74rpx;
				color: rgba(59, 59, 59, 1);
				text-align: left;
				vertical-align: top;
				margin-left: 30rpx;
			}
		}

		.mine_top_right {
			display: flex;
			flex-direction: column;
			align-items: center;

			.mine_t_r_t {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 31.82rpx;
				color: rgba(59, 59, 59, 1);
			}

			.mine_t_r_c {
				font-size: 36rpx;
				font-weight: 600;
				color: rgba(59, 59, 59, 1);
			}

			.mine_t_r_b {
				width: 80rpx;
				height: 46rpx;
				opacity: 1;
				border-radius: 348rpx;
				background: rgba(120, 245, 199, 1);
				text-align: center;
				font-size: 24rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 46rpx;
				color: rgba(6, 97, 91, 1);
			}
		}
	}

	.section_text {
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 0rpx;
		line-height: 42.44rpx;
		color: rgba(59, 59, 59, 1);
	}

	.mine_order {
		padding: 0 30rpx;
		box-sizing: border-box;

		.mine_order_box {
			background-color: #fff;
			border-radius: 10rpx;

			.mine_order_list {
				display: flex;
				width: 100%;

				.mine_order_list_item {
					width: calc(100% / 4);
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.order_item_icon {
						width: 56rpx;
						height: 56rpx;
						background-size: 100% 100%;
					}

					.order_item_text {
						font-size: 26rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 30.48rpx;
						color: rgba(59, 59, 59, 1);
						text-align: center;
					}
				}
			}
		}


	}

	.mine_nav {
		padding: 0 30rpx;
		box-sizing: border-box;

		.mine_nav_box {
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;

			.mine_nav_box_item {
				.nav_box_title {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(59, 59, 59, 1);
					padding-left: 20rpx;
					box-sizing: border-box;
				}
			}

		}
	}
</style>