xiaoyou-h5/pages/mine/my_info.vue

<template>
	<view class="info">
		<view class="name_wrap" @click="to_name">
			<view class="star">
				*
			</view>
			<view class="left">
				<view class="top">
					<text>基础信息</text>
					<image src="../../static/images/edit.png" mode=""></image>
				</view>
				<view class="bootom">
					<text class="empty" v-if="vuex_user.name==''">您还未填写~</text>
					<text>{{vuex_user.name}} · {{vuex_user.class}}</text>
				</view>
			</view>
			<view class="img">
				<image :src="vuex_user.headimg" mode=""></image>
			</view>
		</view>
		<view class="other" @click="to_study">
			<view class="other_top">
				<text>学籍信息</text>
				<image src="../../static/images/edit.png" mode=""></image>
			</view>
			<view class="other_bootom">
				<!-- <text class="empty" v-if="vuex_user.major == ''">您还未填写~</text> -->
				<text>{{vuex_user.major == ''?'您还未填写~':vuex_user.major}}</text>
			</view>
		</view>
		<view class="other" @click="to_honour">
			<view class="other_top">
				<text>您的个人研究方向</text>
				<image src="../../static/images/edit.png" mode=""></image>
			</view>
			<view class="other_bootom">
				<!-- <text class="empty" v-if="vuex_user.study == ''">您还未填写~</text> -->
				<text>{{vuex_user.study == ''?'您还未填写~':vuex_user.study}}</text>
			</view>
		</view>
		<view class="other" @click="to_job">
			<view class="other_top">
				<text>{{vuex_user.work_units||vuex_user.work_units==null?'目前所在单位及职位':vuex_user.work_units}}</text>
				<image src="../../static/images/edit.png" mode=""></image>
			</view>
			<view class="other_bootom">
				<!-- <text class="empty" v-if="vuex_user.work_units == ''">您还未填写~</text> -->
				<text>{{vuex_user.work_units||vuex_user.work_units==null?'您还未填写~':vuex_user.work_units == ''?'':vuex_user.work_position}}</text>
			</view>
		</view>

		<!-- 	<view class="is_tel">
			<text>是否公开联系方式</text>
			<u-switch v-model="checked"></u-switch>
		</view> -->
		<!-- <VueEditor /> -->
		<!-- 		<view class="read">
			<u-radio-group v-model="agree">
				<u-radio shape="square" name="agree">
					阅读并同意
					<text>《校友信息互联公约》</text>
				</u-radio>
			</u-radio-group>
		</view>
		<button type="default">确认</button> -->
	</view>
</template>

<script>
	// import { VueEditor, Quill } from "vue2-editor";
	export default {
		// components:{
		// 	VueEditor
		// },
		data() {
			return {
				checked: false,
				agree: ''
			}
		},
		onLoad() {
			console.log(this.vuex_user.work_units == null,'vuex_user.work_units')
		},
		methods: {
			
			//switch变化时触发
			change(status) {
				// console.log(status);
			},
			to_name() {
				uni.navigateTo({
					url: 'name_edit'
				})
			},
			to_job() {
				uni.navigateTo({
					url: 'job_edit'
				})
			},
			to_class() {
				uni.navigateTo({
					url: 'class_edit'
				})
			},
			to_honour() {
				uni.navigateTo({
					url: 'honour_edit'
				})
			},
			to_study() {
				uni.navigateTo({
					url: 'my_study'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info {
		padding: 0 16px;

		.name_wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30px;
			position: relative;
			padding-left: 10px;

			.star {
				position: absolute;
				top: 0px;
				left: 0;
				color: red;
			}

			.left {
				width: 80%;
				.top {
					text {
						font-size: 16px;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 20px;
						color: #282828;
					}

					image {
						width: 12px;
						height: 12px;
						margin-left: 25px;
					}
				}
				.bootom {
					margin-top: 6px;
					font-size: 13px;
					font-family: PingFang HK;
					font-weight: 400;
					line-height: 20px;
					color: #696969;
					opacity: 0.63;
					text{
						width: 100%;
						display: block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				
			}

			.img {
				flex-shrink: 0;
				width: 43px;
				height: 43px;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 8px;

				image {
					width: 43px;
					height: 43px;
				}
			}
		}
		

		.other {
			margin-top: 30px;

			.other_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 6px;
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #282828;

				image {
					width: 12px;
					height: 12px;
					margin-right: 8px;
				}
			}

			.other_bootom {
				margin-top: 6px;
				font-size: 13px;
				font-family: PingFang HK;
				font-weight: 400;
				line-height: 20px;
				color: #696969;
				opacity: 0.63;
				margin-left: 10px;
				text{
					width: 100%;
					display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.is_tel {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 20px;
			color: #282828;
			margin-top: 80px;
		}

		.read {
			margin-top: 90px;
			font-size: 14px;
			font-family: PingFang HK;
			color: #282828;

			text {
				font-weight: 400;
				line-height: 20px;
				color: #674023;
			}
		}

		button {
			margin-top: 10px;
			height: 55px;
			line-height: 55px;
			background: #D5D8DB;
			opacity: 1;
			border-radius: 12px;

			&::after {
				border: none;
			}
		}
	}
</style>