JM-MiniApp/pages/user/setting.vue

<script setup>
	import { onLoad } from "@dcloudio/uni-app"
	// import mySwiper from "@/components/mySwiper.vue"
	import {ref,onMounted,nextTick} from "vue"
	import {useStore} from '@/store/index.js'
	import api from "@/api/index.js"
	const store = useStore()
	onLoad(() => {
		// console.log(useStore.userInfo)
		userinfo.value = JSON.parse(uni.getStorageSync('userInfo'))
		// console.log(userinfo.value)
		avatar.value = uni.getStorageSync('avatarUrl')
	})
	const userinfo = ref(null)
	const avatar = ref(null)
	// 方法
	function toDetail(type) {
		let url = ''
		switch(type) {
			case 1:
				url = '/pages/user/setting/userAgreement'
			 break;
			case 2:
				url = '/pages/user/setting/privacyPolicy'
			 break;
			case 3:
			 	url = '/pages/user/setting/phone_list'
			  break;
			case 4:
			 	url = '/pages/user/setting/aboutUs'
			  break;
			case 5: // 退出
			 	uni.showModal({
					title:"提示",
					content:"确认要退出登录吗？",
					success:async function(res) {
						if(res.confirm) { 
							store.logout()
						}
					}
				})
			  break;
			default:
			 break;
		}
		if(url) {
			uni.navigateTo({
				url
			})
		}
	}
</script>
<template>
	<view class="userInfoBox page-box page-bg-gray">
		<view class="row-box">
			<view class="rb-card" @tap="toDetail(1)">
			  <view class="rbc-content">
				  <view class="rbc-content-row rbc-content-left rbc-content-left-box">
					   <!-- <uni-icons type="person" color="gray" size="26"></uni-icons> -->
					  用户协议</view>
				  <view class="rbc-content-row rbc-content-right">
					  <uni-icons type="forward" color="gray" size="20"></uni-icons>
				  </view>
			  </view>
			</view>
			<view class="rb-card" @tap="toDetail(2)">
			  <view class="rbc-content">
				  <view class="rbc-content-row rbc-content-left rbc-content-left-box">
					   <!-- <uni-icons type="phone" color="gray" size="26"></uni-icons> -->
					  隐私政策摘要</view>
				  <view class="rbc-content-row rbc-content-right">
					  <uni-icons type="forward" color="gray" size="20"></uni-icons>
				  </view>
			  </view>
			</view>
			<view class="rb-card" @tap="toDetail(3)">
			  <view class="rbc-content">
				  <view class="rbc-content-row rbc-content-left rbc-content-left-box">
					   <!-- <uni-icons type="calendar" color="gray" size="26"></uni-icons> -->
					  个人信息手机清单</view>
				  <view class="rbc-content-row rbc-content-right">
					  <uni-icons type="forward" color="gray" size="20"></uni-icons>
				  </view>
			  </view>
			</view>
			<view class="rb-card" @tap="toDetail(4)">
			  <view class="rbc-content">
				  <view class="rbc-content-row rbc-content-left rbc-content-left-box">
					   <!-- <uni-icons type="paperplane" color="gray" size="26"></uni-icons> -->
					  关于我们</view>
				  <view class="rbc-content-row rbc-content-right">
					  <uni-icons type="forward" color="gray" size="20"></uni-icons>
				  </view>
			  </view>
			</view>
			<view class="rb-card" @tap="toDetail(5)">
			  <view class="rbc-content">
				  <view class="rbc-content-row rbc-content-left rbc-content-left-box">
					   <!-- <uni-icons type="paperplane" color="gray" size="26"></uni-icons> -->
					  退出账号</view>
				  <view class="rbc-content-row rbc-content-right">
					  <uni-icons type="forward" color="gray" size="20"></uni-icons>
				  </view>
			  </view>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.avatar-box{
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		padding: 20rpx 0;
		background: #26758d;
		image{
			width: 160rpx;
			height: 160rpx;
			background-color: white;
			border-radius: 50%;
		}
	}
	.rbc-content-right{
		display: flex;
		align-items: center;
		background: white;
		border-radius: 50%;
	}
	.rbc-content-left-box{
		uni-icons{
			margin-right: 20rpx;
		}
		display: flex;
		align-items: center;
	}
	.row-box{
		padding: 20rpx 0;
		.rb-card{
			padding: 20rpx;
			background: white;
			margin-bottom: 2rpx;
			.rbc-title{
				
			}
			.rbc-content-box{
				margin-top: 10rpx;
				.rbc-content-row{
					width: 50%;
					text-align: center;
					// padding: 40rpx 20rpx;
					// box-shadow: 10rpx 10rpx 10rpx #cdcdcd;
					border-radius: 10rpx;
				}
			}
			.rbc-content{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
	.btn-box{
		text-align: center;
		margin-top: 40rpx;
		.btn{
			display: inline-block;
			padding: 10px 20px;
			background: #e2e2e2;
			color: #26758d;
			border-radius: 10px;
			width: 50%;
		}
	}
	.userinfo-box{
		position: relative;
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background: white;
			margin-right: 20rpx;
		}
		color: white;
		background-color: #26758d;
		display: flex;
		align-items: center;
		padding: 40rpx 20rpx;
	}
	.user-box{
		background: #f6f6f6;
	}
</style>