i2-school-employee-uniapp/pages/mine/setting.vue

<template>
	<view class="padding-lr">
		<view v-for="(section,i) in mineItems" :key="i">
			<u-gap height="15"/>
			<view class="cu-card padding radius shadow bg-white">
				<view class="cu-bar justify-between align-center" v-for="(item,index) in section" :key="index" @click="itemDidClick(item)">
					<view class="cu-bar">
						<image :src="item.image" style="width: 30px;height: 30px;"></image>
						<text class="text-bold padding-sm"> {{ $t(item.title) }} </text>
					</view>
					<text v-if="item.detail"> {{ item.detail }} </text>
					<text v-else class="lg text-gray cuIcon-right"></text>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'  
	export default {
		data() {
			return {
				mineItems: [
					[
						{'index': 0, 'image': '/static/mine/modify_psw.png','title': 'changePassword', 'url': ''},
						{'index': 1, 'image': '/static/mine/about.png','title': 'aboutUs', 'url': ''},
						{'index': 2, 'image': '/static/mine/fk_edit.png','title': 'mineFeedback', 'url': ''}
					],
					[
						{'index': 3, 'image': '/static/mine/student_old.png','title': 'checkUpdate', 'url': ''},
					],
					[
						{'index': 4, 'image': '/static/mine/language.png','title': 'switchLanguage', 'url': ''},
					],
					[
						{'index': 5, 'image': '/static/mine/logout.png','title': 'logOut', 'url': '../login/index'},
					],
				]
			};
		},
		name: 'tabbar-mine',
		computed: {
			...mapState(['userInfo'])
		},
		props: {
			
		},
		mounted() {

		},
		methods: {
			/// 列表跳转
			itemDidClick(item) {
				switch (item.index) {
					case 5:
						this.$store.commit('clearUserInfo')
						uni.navigateTo({
							url:'../login/index',
							animationType:'fade-in'
						})
					break
					case 4:
						let locale = this.$i18n.locale
						locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'
						this.$store.commit('setLocale', this.$i18n.locale)
						uni.setNavigationBarTitle({ title:this.$i18n.t('setting') })
					break
					default: break
				}
			}
		}
	}
</script>


<style lang="scss">
	.mine {
		width: 100%;
		position: absolute;
		display: flex;
		flex-direction: column;
		height: 100%;
		.mine-top {
			width: 100%;
			.mine-bg {
				width: 100%;
				height: 55vw;
			}
		}
		.mine-content {
			position: absolute;
			top: 20vw;
			width: 90%;
			left: 5%;
			.mine-card{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.user-card-top {
					position: absolute;
					top: 0;
					left: 0;
					align-self: flex-start;
					width: 40px;
					height: 20px;
				}
			}
		}
	}
</style>