leromro-mini/pages_mine/pages/setupUser/index.vue

<template>
	<view>
		<view class="wrapper" @click="handlePersonalInfo">
			<text class="text">个人信息</text>
			<up-icon name="arrow-right" class="icon"></up-icon>
			<up-divider></up-divider>
		</view>
		<view class="wrapper">
			<text class="text">绑定</text>
			<up-icon name="arrow-right" class="icon"></up-icon>
			<up-divider></up-divider>
		</view>
		<view class="wrapper" @click="handlServiceAddress">
			<text class="text">被服务地址</text>
			<up-icon name="arrow-right" class="icon"></up-icon>
			<up-divider></up-divider>
		</view>
		<view class="wrapper" @click="logoOut">
			<text class="text">退出登陆</text>
			<up-icon name="arrow-right" class="icon"></up-icon>
			<up-divider></up-divider>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
import { showConfirm } from '@/utils/common'
import store from '@/store'
	const handlServiceAddress = () => {
		uni.navigateTo({
			url: '/pages_mine/pages/setupUser/Address'
		})
}

const handlePersonalInfo = () => {
	uni.navigateTo({
		url: '/pages_mine/pages/setupUser/personalInfo'
	})
}

const logoOut = () => {
	showConfirm('确认退出登陆吗？').then((res) => {
        if (res.confirm) {
            store.dispatch('LogOut').then((res) => {
                uni.reLaunch({
                    url: '/pages/index',
                })
            })
        }
    })
}
</script>

<style scoped>
	.wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 32rpx;
	}

	.text {
		flex: 1;
		/* 文字占据剩余空间 */
		font-size: 28rpx;
		color: #333;
	}

	.icon {
		margin-left: 16rpx;
		/* 图标与文字的间距 */
		color: #999;
		/* 图标颜色 */
		font-size: 28rpx;
		/* 与文字大小匹配 */
	}

	/* 分隔线样式调整 */
	.up-divider {
		margin: 0 32rpx;
		/* 与内容对齐 */
	}
</style>