1. mine and setting ui build success

i18n/en.js

@@ -6,6 +6,7 @@ const en = {
   "update_tips": "Update Tips",
   "update_now": "Update Now",
   "downloading": "Downloading...",
+	"checkUpdate": "Check Update",
 
   "pageErrTips": "Tips",
   "pageErrDesc": "Internal Error，Please Click Back",

i18n/zh.js

@@ -6,6 +6,7 @@ const cn = {
   "update_tips": "发现新版本",
   "update_now": "立即更新",
   "downloading": "正在后台下载...",
+	"checkUpdate": "检查更新",
 
   "pageErrTips": "操作提示",
   "pageErrDesc": "当前网络不稳定，点击屏幕返回",

pages.json

@@ -17,6 +17,12 @@
 			"style": {
 				"navigationBarTitleText": "开发者工具"
 			}
+		},
+		{
+			"path": "pages/mine/setting",
+			"style": {
+				"navigationBarTitleText": "设置"
+			}
 		}
 	],
 	"globalStyle": {

pages/mine/index.vue

@@ -1,34 +1,120 @@
 <template>
-	<view>
-		<text> {{ $t('me') }} </text>
-		<button class="u-button--primary" type="default" @click="back">back</button>
+	<view class="mine">
+		
+		<view class="mine-content" style="background:url('/static/login/login_top_backgroud.png') no-repeat; background-size: 100%;">
+			
+			<!-- 用户信息 -->
+			<view class="mine-card cu-card padding radius shadow bg-white">
+				<view class="cu-chat">
+					<view class="cu-avatar xl round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view>
+					<text class="text-bold text-xl"> {{ userInfo.name }} </text>
+				</view>
+				<view class="cu-bar justify-around" style="width: 100%;">
+					<view class="cu-bar">
+						<image src="../../static/mine/phone.png" style="width: 20px;height: 20px;"></image>
+						<text class="text-sm"> {{ userInfo.mobile }} </text>
+					</view>
+					<view class="cu-bar">
+						<image src="../../static/mine/email.png" style="width: 20px;height: 20px;"></image>
+						<text class="text-sm"> {{ userInfo.email }} </text>
+					</view>
+				</view>
+			</view>
+			
+			<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>
+		
+		<!-- <button class="u-button--primary" type="default" @click="back">back</button> -->
 	</view>
 </template>
 
 <script>
+	import { mapState, mapMutations } from 'vuex'  
 	export default {
 		data() {
 			return {
-				
+				mineItems: [
+					[
+						{'image': '../../static/mine/city.png','title': 'city','detail': '成都', 'url': ''},
+						{'image': '../../static/mine/location.png','title': 'campus','detail': '成都', 'url': ''},
+						{'image': '../../static/mine/department.png','title': 'department', 'detail': '成都', 'url': ''}
+					],
+					[
+						{'image': '../../static/mine/city.png','title': 'city','detail': '成都', 'url': ''},
+						{'image': '../../static/mine/location.png','title': 'campus','detail': '成都', 'url': ''},
+						{'image': '../../static/mine/department.png','title': 'department', 'detail': '成都', 'url': ''}
+					],
+					[
+						{'image': '../../static/mine/city.png','title': 'city','detail': '成都', 'url': ''},
+						{'image': '../../static/mine/location.png','title': 'campus','detail': '成都', 'url': ''},
+						{'image': '../../static/mine/department.png','title': 'department', 'detail': '成都', 'url': ''}
+					],
+					[
+						{'image': '../../static/mine/student_old.png','title': 'referralList', 'detail': '', 'url': ''},
+						{'image': '../../static/mine/student_pain.png','title': 'renewList', 'detail': '', 'url': ''},
+						{'image': '../../static/mine/referral.png','title': 'auditList', 'detail': '', 'url': ''}
+					],
+					[
+						{'image': '../../static/mine/setting.png','title': 'setting', 'detail': '', 'url': '../mine/setting'},
+					],
+				]
 			};
 		},
 		name: 'tabbar-mine',
 		computed: {
-			
+			...mapState(['userInfo'])
 		},
 		props: {
 			
 		},
 		methods: {
-			back() {
+			/// 列表跳转
+			itemDidClick(item) {
+				if (!item.url) return
 				uni.navigateTo({
-					url:'../login/index',
-					animationType:'fade-in'
+					url: item.url
 				})
 			}
 		}
 	}
 </script>
 
-<style>
-</style>
+
+<style lang="scss">
+	.mine {
+		width: 100%;
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		.mine-content {
+			padding: 80px 20px 70px;
+			.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>

pages/mine/setting.vue

@@ -0,0 +1,108 @@
+<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: {
+			
+		},
+		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)
+					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>

store/store.js

@@ -31,7 +31,8 @@ const store = new Vuex.Store({
 		setUserName: (state, value) => state.username = value,
 		setPassword: (state, value) => state.password = value,
 		setUserInfo: (state, value) => state.userInfo = value,
-		setLocale: (state, value) => state.locale = value
+		setLocale: (state, value) => state.locale = value,
+		clearUserInfo: (state) => state.userInfo = {}
   },
 	/// 仓库中的计算属性
 	getters: {},