Browse Source

登录和tabbar

qukaidi 4 years ago
parent
commit
bc7e9f267b
7 changed files with 177 additions and 43 deletions
  1. 38 19
      pages.json
  2. 6 6
      pages/home/index.vue
  3. 57 0
      pages/login/index.vue
  4. 29 2
      pages/me/index.vue
  5. 29 2
      pages/msg/index.vue
  6. BIN
      static/sailun/login_bg.png
  7. 18 14
      store/index.js

+ 38 - 19
pages.json

@@ -16,7 +16,7 @@
 		    "path" : "pages/home/index",
 		    "style" :                                                                                    
 		    {
-		        "navigationBarTitleText": ""
+		        "navigationBarTitleText": "首页"
 		    }
 		    
 		},
@@ -25,7 +25,7 @@
 		    "path" : "pages/msg/index",
 		    "style" :                                                                                    
 		    {
-		        "navigationBarTitleText": ""
+		        "navigationBarTitleText": "消息"
 		    }
 		    
 		},
@@ -34,7 +34,16 @@
 		    "path" : "pages/me/index",
 		    "style" :                                                                                    
 		    {
-		        "navigationBarTitleText": ""
+		        "navigationBarTitleText": "我的"
+		    }
+		    
+		},
+		//登录
+		{
+		    "path" : "pages/login/index",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "登录"
 		    }
 		    
 		},
@@ -867,27 +876,37 @@
 		"backgroundColor": "#FFFFFF"
 	},
 	"tabBar": {
-		"color": "#909399",
-		"selectedColor": "#303133",
-		"backgroundColor": "#FFFFFF",
-		"borderStyle": "black",
+		// "color": "#909399",
+		// "selectedColor": "#303133",
+		// "backgroundColor": "#FFFFFF",
+		// "borderStyle": "black",
+		// "list": [{
+		// 		"pagePath": "pages/example/components",
+		// 		"iconPath": "static/uview/example/component.png",
+		// 		"selectedIconPath": "static/uview/example/component_select.png",
+		// 		"text": "组件"
+		// 	},
+		// 	{
+		// 		"pagePath": "pages/example/js",
+		// 		"iconPath": "static/uview/example/js.png",
+		// 		"selectedIconPath": "static/uview/example/js_select.png",
+		// 		"text": "工具"
+		// 	},
+		// 	{
+		// 		"pagePath": "pages/example/template",
+		// 		"iconPath": "static/uview/example/template.png",
+		// 		"selectedIconPath": "static/uview/example/template_select.png",
+		// 		"text": "模板"
+		// 	}
+		// ]
 		"list": [{
-				"pagePath": "pages/example/components",
-				"iconPath": "static/uview/example/component.png",
-				"selectedIconPath": "static/uview/example/component_select.png",
-				"text": "组件"
+				"pagePath": "pages/home/index"
 			},
 			{
-				"pagePath": "pages/example/js",
-				"iconPath": "static/uview/example/js.png",
-				"selectedIconPath": "static/uview/example/js_select.png",
-				"text": "工具"
+				"pagePath": "pages/msg/index"
 			},
 			{
-				"pagePath": "pages/example/template",
-				"iconPath": "static/uview/example/template.png",
-				"selectedIconPath": "static/uview/example/template_select.png",
-				"text": "模板"
+				"pagePath": "pages/me/index"
 			}
 		]
 	}

+ 6 - 6
pages/home/index.vue

@@ -1,10 +1,9 @@
 <template>
 	<view>
 		<view class="u-page">
-			1
 		</view>
 		<!-- 与包裹页面所有内容的元素u-page同级,且在它的下方 -->
-		<u-tabbar v-model="current" :list="list" :mid-button="true"></u-tabbar>
+		<u-tabbar v-model="current" :list="list"></u-tabbar>
 	</view>
 </template>
 
@@ -16,23 +15,24 @@
 						iconPath: "home",
 						selectedIconPath: "home-fill",
 						text: '首页',
-						count: 2,
 						customIcon: false,
+						pagePath: '/pages/home/index'
 					},
 					{
-						iconPath: "home",
-						selectedIconPath: "home-fill",
+						iconPath: "chat",
+						selectedIconPath: "chat-fill",
 						text: '消息',
 						count: 2,
 						isDot: false,
 						customIcon: false,
+						pagePath: '/pages/msg/index'
 					},
 					{
 						iconPath: "account",
 						selectedIconPath: "account-fill",
 						text: '我的',
-
 						customIcon: false,
+						pagePath: '/pages/me/index'
 					},
 				],
 				current: 0

+ 57 - 0
pages/login/index.vue

@@ -0,0 +1,57 @@
+<template>
+	<view>
+		<u-image src="../../static/sailun/login_bg.png" mode="widthFix"></u-image>
+		<view class="content">
+			<u-card padding="50" :head-border-bottom="false" :show-head="false" :show-foot="false">
+				<view slot="body">
+					<u-field v-model="tel" icon="phone-fill" placeholder="请填写手机号">
+					</u-field>
+					<u-field v-model="code" icon="lock-fill" placeholder="请填写验证码">
+					</u-field>
+				</view>
+			</u-card>
+			<button @tap="submit" :style="[inputStyle]" class="getCaptcha">获取短信验证码</button>
+			<view class="alternative">
+				<view class="password">密码登录</view>
+				<view class="issue">遇到问题</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tel: '',
+				code:''
+			}
+		},
+		computed: {
+			inputStyle() {
+				let style = {};
+				if (this.tel) {
+					style.color = "#fff";
+					style.backgroundColor = this.$u.color['warning'];
+				}
+				return style;
+			}
+		},
+		methods: {
+			submit() {
+				if (this.$u.test.mobile(this.tel)) {
+					this.$u.route({
+						url: 'pages/template/login/code'
+					})
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		position: relative;
+		top: -300rpx;
+	}
+</style>

+ 29 - 2
pages/me/index.vue

@@ -1,6 +1,9 @@
 <template>
 	<view>
-		
+		<view class="u-page">
+		</view>
+		<!-- 与包裹页面所有内容的元素u-page同级,且在它的下方 -->
+		<u-tabbar v-model="current" :list="list"></u-tabbar>
 	</view>
 </template>
 
@@ -8,7 +11,31 @@
 	export default {
 		data() {
 			return {
-				
+				list: [{
+						iconPath: "home",
+						selectedIconPath: "home-fill",
+						text: '首页',
+						customIcon: false,
+						pagePath: '/pages/home/index'
+					},
+					{
+						iconPath: "chat",
+						selectedIconPath: "chat-fill",
+						text: '消息',
+						count: 2,
+						isDot: false,
+						customIcon: false,
+						pagePath: '/pages/msg/index'
+					},
+					{
+						iconPath: "account",
+						selectedIconPath: "account-fill",
+						text: '我的',
+						customIcon: false,
+						pagePath: '/pages/me/index'
+					},
+				],
+				current: 2
 			};
 		}
 	}

+ 29 - 2
pages/msg/index.vue

@@ -1,6 +1,9 @@
 <template>
 	<view>
-		
+		<view class="u-page">
+		</view>
+		<!-- 与包裹页面所有内容的元素u-page同级,且在它的下方 -->
+		<u-tabbar v-model="current" :list="list"></u-tabbar>
 	</view>
 </template>
 
@@ -8,7 +11,31 @@
 	export default {
 		data() {
 			return {
-				
+				list: [{
+						iconPath: "home",
+						selectedIconPath: "home-fill",
+						text: '首页',
+						customIcon: false,
+						pagePath: '/pages/home/index'
+					},
+					{
+						iconPath: "chat",
+						selectedIconPath: "chat-fill",
+						text: '消息',
+						count: 2,
+						isDot: false,
+						customIcon: false,
+						pagePath: '/pages/msg/index'
+					},
+					{
+						iconPath: "account",
+						selectedIconPath: "account-fill",
+						text: '我的',
+						customIcon: false,
+						pagePath: '/pages/me/index'
+					},
+				],
+				current: 1
 			};
 		}
 	}

BIN
static/sailun/login_bg.png


+ 18 - 14
store/index.js

@@ -38,24 +38,28 @@ const store = new Vuex.Store({
 		vuex_demo: '绛紫',
 		// 自定义tabbar数据
 		vuex_tabbar: [{
-				iconPath: "/static/uview/example/component.png",
-				selectedIconPath: "/static/uview/example/component_select.png",
-				text: '组件',
-				pagePath: '/pages/example/components'
+				iconPath: "home",
+				selectedIconPath: "home-fill",
+				text: '首页',
+				customIcon: false,
+				pagePath: '/pages/home/index'
 			},
 			{
-				iconPath: "/static/uview/example/js.png",
-				selectedIconPath: "/static/uview/example/js_select.png",
-				text: '工具',
-				midButton: true,
-				pagePath: '/pages/example/js'
+				iconPath: "chat",
+				selectedIconPath: "chat-fill",
+				text: '消息',
+				count: 2,
+				isDot: false,
+				customIcon: false,
+				pagePath: '/pages/msg/index'
 			},
 			{
-				iconPath: "/static/uview/example/template.png",
-				selectedIconPath: "/static/uview/example/template_select.png",
-				text: '模板',
-				pagePath: '/pages/example/template'
-			}
+				iconPath: "account",
+				selectedIconPath: "account-fill",
+				text: '我的',
+				customIcon: false,
+				pagePath: '/pages/me/index'
+			},
 		]
 	},
 	mutations: {