jp-education-student/pages/youth/mine/mine.vue

<template>
	<view>
		<view class="background">
			<view class="head" @click="toEditProfile">
				<view class="photo">
					<u-avatar class="avatar" :src="form.headImg != null ? form.headImg : '../../assets/img/head.png'" size="112">
					</u-avatar>
				</view>
				<view class="infos">
					<view class="name">
						{{form.studentName}}
					</view>
					<view class="modification">
						点击修改个人信息
					</view>
				</view>


			</view>
			<!-- <view class="class-times">
				<view class="box">
					<view class="times"> 36节 </view>
					<view class="text"> 购买课次 </view>
				</view> <u-line direction="col" color="rgba(232, 232, 232, 1)" length="80rpx" margin="auto 0"></u-line>
				<view class="box">
					<view class="times"> 4节 </view>
					<view class="text"> 赠送课次 </view>
				</view>
			</view> -->
		</view>

		<view class="option-group">
			<!-- <view class="item">
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-user-smile-line@1x.png" alt="">
					</view>
					<view class="text">
						人脸信息采集
					</view>
				</view>

				<view class="value">
					<view class="text">
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#cccccc"></u-icon>
					</view>
				</view>
			</view> -->
			<view class="item" @click="gotoUrl('pages/youth/mine/changePhoneNumber/changePhoneNumber')">
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-smartphone-line@1x(1).png" alt="">
					</view>
					<view class="text">
						绑定手机
					</view>
				</view>

				<view class="value">
					<view class="text">
						{{form.phone.slice(0,3) + '****' + form.phone.slice(-4)}}
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#cccccc"></u-icon>
					</view>
				</view>
			</view>
			<view class="item" @click="gotoUrl('pages/youth/mine/optionsList')">
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-file-edit-line@1x.png" alt="">
					</view>
					<view class="text">
						意见反馈
					</view>
				</view>

				<view class="value">
					<view class="icon">
						<u-icon name="arrow-right" color="#cccccc"></u-icon>
					</view>
				</view>
			</view>
			<!-- <view class="item">
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-customer-service-2-line@1x.png" alt="">
					</view>
					<view class="text">
						联系我们
					</view>
				</view>

				<view class="value">
					<view class="text">
						0716-8888888
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#cccccc"></u-icon>
					</view>
				</view>
			</view> -->
			<view class="item" @click="gotoUrl('pages/youth/mine/logout')">
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-spam-3-line@1x.png" alt="">
					</view>
					<view class="text">
						注销账号
					</view>
				</view>

				<view class="value">
					<view class="text">
						注销后无法恢复，请谨慎操作
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#cccccc"></u-icon>
					</view>
				</view>
			</view>

			<view class="item" @click="signOut">
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-logout-box-r-line@1x(1).png" alt="">
					</view>
					<view class="text">
						退出账号
					</view>
				</view>

				<view class="value">
					<view class="text">

					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#cccccc"></u-icon>
					</view>
				</view>
			</view>
			<u-modal v-model="show" @confirm="confirm" confirm-color="#FF3D00" :show-cancel-button="true" ref="uModal"
				:asyncClose="true" :title="title" :content="content" :content-style="{color: '#333333'}"></u-modal>

		</view>


		<YouthTabbar :current="3" ref="tabbarMain"></YouthTabbar>
	</view>
</template>

<script>
	import * as mineApi from '@/apis/youth/mine.js'
	import * as loginApi from '@/apis/login.js'
	import * as API from '@/apis/index.js'
	import YouthTabbar from '@/components/YouthTabbar.vue'

	export default {
		components: {
			YouthTabbar
		},
		data() {
			return {
				form: {
					id: '',
					headImg: '',
					nickName: '',
					phone: ''
				},
				show: false,
				title: '退出账号',
				content: '是否退出当前账号?',
			}
		},
		onReady() {
			this.getInfo();
		},
		methods: {
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					uni.hideLoading();
					this.form = response.data.nsStudentInfo;
					this.carhelp.setNsStudentId({studentId: response.data.nsStudentInfo.id});
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			signOut() {
				this.show = true;
			},
			confirm() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.logout().then((res) => {
					uni.hideLoading();
					this.show = false;
					this.carhelp.logoff()
					uni.reLaunch({
						url: '/pages/youth/login/login'
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			toEditProfile() {
				uni.navigateTo({
					url: '/pages/youth/mine/editProfile'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.background {
		height: 400rpx;
		background: linear-gradient(180.17deg, rgba(123, 217, 224, 1) 0.45%, rgba(13, 186, 199, 0) 101.25%);
	}

	.head {
		padding: 80rpx 40rpx;
		display: flex;
		align-items: center;


		.photo {
			width: 120rpx;
			height: 120rpx;
			border-radius: 100rpx;
			border: 4rpx solid rgba(255, 255, 255, 1);
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.infos {
			margin-left: 32rpx;

			.name {
				color: rgba(51, 51, 51, 1);
				font-size: 20px;
				line-height: 20px;
				font-weight: bold;
			}

			.modification {
				color: rgba(119, 119, 119, 1);
				font-size: 24rpx;
				line-height: 24rpx;
				margin-top: 16rpx;
			}
		}
	}


	.my-children {
		margin: 0 32rpx;
		padding: 32rpx 24rpx;
		border-radius: 12px;
		background: linear-gradient(90deg, rgba(13, 186, 199, 1) 0%, rgba(37, 209, 146, 1) 100%);

		.top {
			display: flex;
			justify-content: space-between;

			.text {
				color: rgba(255, 255, 255, 1);
				font-size: 18px;
			}

			.add {
				width: 120rpx;
				line-height: 28px;
				border-radius: 50px;
				background-color: rgba(255, 174, 0, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 28rpx;
				text-align: center;
			}
		}

		.children {
			margin-top: 12px;
			border-radius: 16rpx;
			background-color: rgba(255, 255, 255, 1);
			padding: 24rpx 24rpx 8rpx 24rpx;
			display: -webkit-box;

			overflow-x: auto;

			position: relative;

			.check-box {
				width: 48%;
				padding: 16rpx 40rpx 16rpx 16rpx;
				border-radius: 100rpx;
				background-color: rgba(13, 186, 199, 0.1);
				border: 1px solid rgba(13, 186, 199, 0.5);
				display: flex;
				position: relative;
				margin-right: 24rpx;
				margin-bottom: 16rpx;

				.photo {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100rpx;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
					}
				}

				@media screen and(max-width:320px) {
					.photo {
						width: 70rpx;
						height: 70rpx;
						border-radius: 999rpx;
						overflow: hidden;

						img {
							width: 100%;
							height: 100%;
							vertical-align: middle;
						}
					}
				}

				.infos {
					margin-left: 16rpx;

					.name {
						width: 96rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;
						line-height: 48rpx;
					}

					.age {
						color: rgba(119, 119, 119, 1);
						font-size: 24rpx;
						line-height: 28rpx;
					}
				}

				.radio {
					position: absolute;
					bottom: -2rpx;
					right: -40rpx;


					::v-deep.uni-radio-input {
						width: 40rpx;
						height: 40rpx;
						background-color: rgba(221, 241, 242, 1);
					}

					::v-deep.uni-radio-input-checked {
						background-color: #43C9D3 !important;
						border-color: #43C9D3 !important;
					}

				}

				::v-deep.u-radio__icon-wrap {
					background-color: rgba(221, 241, 242, 1);
				}
			}

			@media screen and(max-width:320px) {
				.check-box {
					margin-right: 16rpx;
				}
			}
		}

		.children::-webkit-scrollbar {
			display: none;
		}
	}

	.class-times {
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		padding: 40rpx 0;
		margin: 0 32rpx 24rpx;

		.box {
			width: 50%;
			text-align: center;

			.times {
				color: rgba(51, 51, 51, 1);
				font-size: 20px;
				font-weight: bold;

			}

			.text {
				color: rgba(119, 119, 119, 1);
				font-size: 14px;
				margin-top: 8px;
			}
		}
	}

	.option-group {
		margin: -80rpx 32rpx 0;
		background-color: #fff;
		border-radius: 12px;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			border-bottom: 1px solid rgba(244, 244, 244, 1);

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

				img {
					vertical-align: middle;
				}

				.text {
					margin-left: 16rpx;
					color: rgba(119, 119, 119, 1);
					font-size: 28rpx
				}
			}

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

				.icon {
					margin-left: 16rpx;
				}

				.text {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
				}
			}
		}
	}
</style>