登录及细节

components/navigator-back/navigator-back.vue

@@ -0,0 +1,81 @@
+<template>
+	<view class="navigatorback_container">
+		<view class="sign">
+			<view class="robot">
+				<image src="../../static/nav_robot.png" mode="aspectFit"></image>
+			</view>
+			<view class="titleText">SmartAssistant</view>
+		</view>
+		<view class="backContent">
+			<view class="back_image" @click="clickToGoback">
+				<image src="../../static/goback.png" mode="aspectFit"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			clickToGoback() {
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.navigatorback_container{
+		display: flex;
+		box-sizing: border-box;
+		flex-direction: column;
+		width: 100%;
+		// height: 105px;
+		background-color: #2A2832;
+		.sign{
+			display: flex;
+			box-sizing: border-box;
+			flex-direction: row;
+			align-items: center;
+			background: linear-gradient(to right, #303373, #C9A391);
+			.robot{
+				margin: 10px 0px;
+				flex-shrink: 0;
+				width: 48px;
+				height: 48px;
+				margin-left: 15px;
+				image{
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.titleText{
+				display: flex;
+				margin-left: 10px;
+				// height: 100%;
+				font-size: 30px;
+				font-weight: 500;
+				color: #ffffff;
+			}
+		}
+		.backContent{
+			display: flex;
+			width: 100%;
+			.back_image{
+				margin: 15px 0px;
+				margin-left: 15px;
+				width: 35px;
+				height: 25px;
+				image{
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+</style>

main.js

@@ -1,8 +1,17 @@
 import App from './App'
+import https from './utils/https.js'
+import config from './utils/config.js'
+import tools from './utils/tools.js'
+import interfaces from './utils/interfaces.js'
 
 // #ifndef VUE3
 import Vue from 'vue'
 Vue.config.productionTip = false
+Vue.prototype.request = https
+Vue.prototype.config = config
+Vue.prototype.tools = tools
+Vue.prototype.interfaces = interfaces
+
 App.mpType = 'app'
 
 try {

pages.json

@@ -19,6 +19,16 @@
 					"titleNView": false
 				}
 			}
+		},
+		{
+			"path": "pages/login/login",
+			"style": {
+				"navigationBarTitleText": "登录",
+				"disableScroll": true,
+				"app-plus": {
+					"titleNView": false
+				}
+			}
 		}
 	],
 	"globalStyle": {

pages/enter/enter-navigator.vue

@@ -9,10 +9,11 @@
 				{{ item }}
 			</view>
 		</view>
-		<view class="userInfo">
+		<view class="userState_login" v-if="is_login == false">
 			<view class="user_regist" @click="clickToRegist">注册</view>
 			<view class="user_login" @click="clickToLogin">登录</view>
 		</view>
+		<view class="userState_logout userState_login" v-else @click="clickToLogout">退出登录</view>
 	</view>
 </template>
 
@@ -21,7 +22,8 @@
 		data() {
 			return {
 				dataList: ['首页', 'AI聊天', 'AI画图'],
-				currenIndex: this.selectedIndex
+				currenIndex: this.selectedIndex,
+				is_login: false
 			}
 		},
 		props: {
@@ -31,7 +33,16 @@
 			}
 		},
 		mounted() {
+			this.is_login = this.tools.is_login()
 			this.$emit('clickToIndex', this.currenIndex)
+			
+			let self = this
+			uni.$on(this.config.notification.login_state_changed, function() {
+				self.is_login = self.tools.is_login()
+			})
+		},
+		onUnload() {
+			uni.$off(this.config.notification.login_state_changed)
 		},
 		methods:{
 			clickToItem(item, index) {
@@ -42,10 +53,38 @@
 				this.$emit('clickToIndex', index)
 			},
 			clickToRegist() {
-				
+				uni.showToast({
+					icon:'none',
+					title:'暂时无法注册',
+					duration:2000
+				})
 			},
 			clickToLogin() {
-				
+				if(this.tools.is_login()) {
+				   console.log('已登录了')
+				   return	
+				} 
+				uni.navigateTo({
+					url:'/pages/login/login'
+				})
+			},
+			clickToLogout() {
+				let self = this
+				uni.showModal({
+					title:'是否退出登录',
+					success: function(res) {
+						if(res.confirm) {
+							self.tools.request_logout(self, (success)=>{
+								if(success === true) {
+									uni.showToast({
+										title:'已退出登录',
+										duration:2000
+									})
+								}
+							})
+						}
+					}
+				})
 			}
 		}
 		
@@ -94,7 +133,7 @@
 			}
 		}
 		
-		.userInfo{
+		.userState_login{
 			position: absolute;
 			display: flex;
 			box-sizing: border-box;
@@ -107,6 +146,7 @@
 				width: 65px;
 				height: 28px;
 				border-radius: 28px;
+				font-size: 16px;
 				color: #878787;
 				background-color: #ffffff;
 				justify-content: center;
@@ -117,6 +157,7 @@
 				width: 65px;
 				height: 28px;
 				border-radius: 28px;
+				font-size: 16px;
 				color: #ffffff;
 				background-color: #4C9CF1;
 				justify-content: center;
@@ -124,5 +165,11 @@
 				margin-left: 15px;
 			}
 		}
+		.userState_logout{
+			width: 145px;
+			color: #ffffff;
+			font-size: 18px;
+			justify-content: center;
+		}
 	}
 </style>

pages/enter/enter.vue

@@ -1,9 +1,9 @@
 <template>
 	<view class="container">
 		<enterNavigator :selectedIndex="nav_current_index" @clickToIndex='homeNavigatorClick'/>
-		<home :viewTop="subviewTop" :viewHeight="subviewHeight" v-if="nav_current_index == 0" />
-		<AIChat :viewTop="subviewTop" :viewHeight="subviewHeight" v-if="nav_current_index == 1" />
-		<AIDraw :viewTop="subviewTop" :viewHeight="subviewHeight" v-if="nav_current_index == 2" />
+		<home :viewTop="subviewTop" :viewHeight="subviewHeight" v-if="nav_current_index == config.page_index.home" />
+		<AIChat :viewTop="subviewTop" :viewHeight="subviewHeight" v-if="nav_current_index == config.page_index.ai_chat" />
+		<AIDraw :viewTop="subviewTop" :viewHeight="subviewHeight" v-if="nav_current_index == config.page_index.ai_draw" />
 	</view>
 </template>
 
@@ -12,6 +12,7 @@
 	import home from '../../pages/home/home.vue'
 	import AIChat from '../../pages/AI_chat/AI_chat.vue'
 	import AIDraw from '../../pages/AI-draw/AI-draw.vue'
+	import config from '../../utils/config.js'
 	export default {
 		data() {
 			return {
@@ -22,6 +23,12 @@
 		},
 		methods: {
 			homeNavigatorClick(index) {
+				if(index == config.page_index.ai_chat ||
+				   index == config.page_index.ai_draw) {
+					if(this.tools.is_login_gotoLogin() == false) {
+						return
+					}
+				}
 				this.nav_current_index = index
 			}
 		},

pages/home/home-bottom.vue

@@ -0,0 +1,94 @@
+<template>
+	<view class="container">
+		<view class="info">
+			<view class="info_left">
+				<view class="info_left_box" v-for="(item, index) in leftList" :key="index">
+					{{ item }}
+				</view>
+			</view>
+			<view class="info_right">
+				<view class="info_right_box" v-for="(item, index) in rightList" :key="index" 
+				@click="clickToRight(index)">
+					{{ item }}
+				</view>
+			</view>
+		</view>
+		<view class="companyDescribe">xxxx网络有限公司粤ICP备18763546号-1粤公网安备3209875867489384628号</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				leftList: ["地址:广州市番禺区元岗大街1号七号小镇c栋",
+				           "邮箱:xxxxxx@163.com", 
+						   "电话:010-53647364、010-54647765"],
+				rightList:['关于我们', '服务条款', '隐私政策']
+			}
+		},	
+		methods: {
+			clickToRight(index) {
+				switch (index){
+					case 0:
+					console.log('关于我们')
+						break;
+					case 1:
+				    console.log('服务条款')
+						break;
+					case 2:
+				    console.log('隐私政策')
+						break;
+					default:
+						break;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		display: flex;
+		box-sizing: border-box;
+		flex-direction: column;
+		width: 100%;
+		height: 205px;
+		background-color: #2A2832;
+		padding: 25px 50px;
+		.info{
+			display: flex;
+			width: 100%;
+			height: 104px;
+			justify-content: space-between;
+			.info_left{
+				display: flex;
+				flex-direction: column;
+				width: 100%;
+				height: 100%;
+				margin-right: 15px;
+				.info_left_box{
+					color: #ffffff;
+					margin-top: 10px;
+				}
+			}
+			.info_right{
+				display: flex;
+				flex-direction: column;
+				width: 90px;
+				height: 100%;
+				.info_right_box{
+					color: #ffffff;
+					margin-top: 10px;
+				}
+			}
+		}
+		.companyDescribe{
+			margin-top: 32px;
+			font-size: 18px;
+			font-weight: 400;
+			text-align: center;
+			color: #49A5E9;
+		}
+	}
+</style>

pages/home/home.vue

@@ -2,12 +2,14 @@
 	<view class="container" :style="{'top': viewTop + 'px', 'height': viewHeight + 'px'}">
 		<brief />
 		<serviceTrait />
+		<bottom />
 	</view>
 </template>
 
 <script>
 	import brief from '../../pages/home/home-brief.vue'
 	import serviceTrait from '../../pages/home/home-serviceTrait.vue'
+	import bottom from '../../pages/home/home-bottom.vue'
 	export default {
 		data() {
 			return {
@@ -29,7 +31,8 @@
 		},
 		components: {
 			brief,
-			serviceTrait
+			serviceTrait,
+			bottom
 		}
 	}
 </script>

pages/login/login.vue

@@ -0,0 +1,148 @@
+<template>
+	<view class="container">
+		<navback />
+		<view class="kuang">
+			<view class="loginText">欢迎登录</view>
+			<input class="phone_input" 
+			type="text" v-model="phone_value" placeholder="手机号">
+			<view class="passwordcontent">
+				<input v-if="hidden_password" class="password_input phone_input"
+				type="password" v-model="password_value" placeholder="密码">
+				<input v-else="hidden_password" class="password_input phone_input"
+				type="text" v-model="password_value" placeholder="密码">
+				<view :class="hidden_password ?'passwordcontent_hidden':'passwordcontent_show passwordcontent_hidden'" @click="clickToPasswordIsHidden">
+					<image src="../../static/password_hidden.png" mode="aspectFit"></image>
+				</view>
+			</view>
+			<view class="loginButton" @click="clickToLogin">登录</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import navback from '../../components/navigator-back/navigator-back.vue'
+	export default {
+		data() {
+			return {
+				hidden_password: true,
+				phone_value: '',
+				password_value: '',
+			}
+		},
+		methods: {
+			clickToPasswordIsHidden() {
+				this.hidden_password = !this.hidden_password
+			},
+			clickToLogin() {
+				console.log('phone_value', this.phone_value)
+				console.log('password_value', this.password_value)
+				if(this.tools.isNull(this.phone_value)) {
+					uni.showModal({
+						title:'请输入手机号',
+						showCancel:false
+					})
+					return
+				}
+				// if(tools.isNull(this.password_value)) {
+				// 	uni.showModal({
+				// 		title:'请输入密码',
+				// 		showCancel:false
+				// 	})
+				// 	return
+				// }
+						
+				let self = this
+				this.tools.request_login(self, this.phone_value, this.password_value, (success)=>{
+					if(success === true) {
+						uni.showToast({
+							title:'登录成功',
+							duration:2000
+						})
+						uni.navigateBack()
+					}
+				})
+			}
+		},
+		components: {
+			navback
+		}
+	}
+</script>
+<style>
+	page{
+		background-color: #2A2832;
+	}
+</style>
+<style lang="scss">
+	.container{
+		display: flex;
+		box-sizing: border-box;
+		flex-direction: column;
+		width: 100%;
+		height: 100%;
+		align-items: center;
+		.kuang{
+			display: flex;
+			box-sizing: border-box;
+			flex-direction: column;
+			width: 497px;
+			border-radius: 10px;
+			border: 1px solid #32B3AA;
+			box-shadow: 0 0 15px #000000;
+			padding: 50px 37px;
+			align-items: center;
+			.loginText{
+				display: flex;
+				font-size: 24px;
+				font-weight: 500;
+				color: #C2C2C2;
+				justify-content: center;
+			}
+			.phone_input{
+				margin-top: 30px;
+				width: 100%;
+				height: 70px;
+				font-size: 22px;
+				color: #ffffff;
+				border-bottom: 1px solid #32B3AA;
+			}
+			.passwordcontent{
+				position: relative;
+				display: flex;
+				width: 100%;
+				.password_input{
+					margin-top: 40px;
+					background-color: transparent;
+				}
+				.passwordcontent_hidden{
+					position: absolute;
+					display: flex;
+					bottom: 10px;
+					right: 10px;
+					width: 30px;
+					height: 30px;
+					transition: all 0.5s;
+					image{
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.passwordcontent_show {
+					transform: rotate(-180deg);
+					transition: all 0.5s;
+				}
+			}
+			.loginButton{
+				display: flex;
+				margin-top: 80px;
+				width: 260px;
+				height: 40px;
+				border-radius: 10px;
+				color: #ffffff;
+				background-color: #32B3AA;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+	}
+</style>

utils/config.js

@@ -0,0 +1,15 @@
+const config = {
+	post:"POST",
+	get:"GET",
+	SUCCESS:"10000",
+	page_index:{
+		home:0,
+		ai_chat:1,
+		ai_draw:2,
+	},
+	notification:{
+		login_state_changed:"login_state_changed",
+	},
+	userData:"userData",
+};
+module.exports = config;

utils/https.js

@@ -0,0 +1,58 @@
+import config from '@/utils/config.js'
+
+module.exports = (param) => {
+	var url = param.url;
+	var method = param.method;
+	var header = param.header || {};
+	var data = param.data || {};
+	
+	// 请求方式: GET POST 
+	if(method){
+		method = method.toUpperCase(); // 小写转成大写
+		header = {'content-type':'application/x-www-form-urlencoded'}
+	}
+	
+	// 发起请求 加载动画
+	if(!param.hideLoading){
+		uni.showLoading({title:"加载中..."})
+	}
+	
+	// 发起网络请求
+	uni.request({
+		url: url,
+		method:method || "GET",
+		header:header,
+		data: data,
+		success: res => {
+			// console.log('success', res)
+			if(res.statusCode && res.statusCode != 200){ // api错误
+				uni.showModal({
+					content:res.statusCode + res.data
+				})
+				return;
+			}
+			if(res.data.code !== config.SUCCESS) {
+				uni.showToast({
+					icon:'none',
+					title:res.data.msg,
+					duration:2000
+				})
+			}
+			typeof param.success == "function" && param.success(res.data);
+		},
+		fail: (e) => {
+			console.log('fail', e)
+			uni.showModal({
+				content: e.errMsg,
+				showCancel:false
+			})
+			typeof param.fail == "function" && param.fail(e.data);
+		},
+		complete: () => {
+			// console.log("网络请求complete");
+			uni.hideLoading();
+			typeof param.complete == "function" && param.complete(e.data);
+			return;
+		}
+	})
+}

utils/interfaces.js

@@ -0,0 +1,8 @@
+const domain = "http://47.88.86.123:8000"; //接口域名
+const domainStatic = "http://47.88.86.123:8000"//静态域名
+
+const interfaces = {
+	// 登录
+	login: domain + "/login",
+};
+module.exports = interfaces;

utils/tools.js

@@ -0,0 +1,77 @@
+import config from '@/utils/config.js'
+import interfaces from '@/utils/interfaces.js'
+const tools = {
+	
+	// 是否登录
+	is_login() {
+		let user_data = this.get_user_info()
+		if(Object.keys(user_data).length === 0 || tools.isNull(user_data.mobile)) {
+			return false
+		}
+		return true
+	},
+	// 是否登录并进入登录界面
+	is_login_gotoLogin() {
+		if(this.is_login()) {
+			return true
+		}
+		uni.navigateTo({
+			url:'/pages/login/login'
+		})
+		return false
+	},
+	// 获取用户信息
+	/*
+	* 获取let user_data = get_user_info()
+	* 使用 user_data.mobile 即可
+	*/
+	get_user_info() {
+		return uni.getStorageSync(config.userData)||{}
+	},
+	// 设置用户信息
+	set_user_info(data) {
+		uni.setStorageSync(config.userData, data)
+	},
+	
+	// 是否null
+	isNull(obj){
+		if(obj!=null&&obj!=undefined&&obj!=''&&obj.length!=0){
+			return false;
+		}
+		return true;
+	},
+	
+	// 请求登录
+	request_login(that, mobile, password, callback) {
+		let self = that
+		self.request({
+			url: interfaces.login,
+			data:{'mobile': mobile},
+			method:config.post,
+			success:(res)=> {
+				if(res.code === config.SUCCESS) {
+					tools.set_user_info({'mobile': mobile})
+					uni.$emit(config.notification.login_state_changed)
+					callback(true)
+				} else {
+					callback(false)
+				}
+			},
+			fail:(e)=> {
+				callback(false)
+			}
+		})
+	},
+	
+	// 请求退出登录
+	request_logout(that, callback) {
+		let self = that
+		setTimeout(function() {
+			tools.set_user_info({})
+			uni.$emit(config.notification.login_state_changed)
+			callback(true)
+		}, 1000);
+	}
+	
+}
+module.exports = tools;