更新

App.vue

@@ -1,161 +1,153 @@
 <script>
-	import {
-		mapState,
-		mapMutations
-	} from 'vuex'
-
-	export default {
-		onLaunch: function() {
-			let uniIdToken = uni.getStorageSync('uniIdToken')
-			if (uniIdToken) {
-				this.login(uni.getStorageSync('username'))
-			}
-			console.log('App Launch');
-		},
-		onShow: function() {
-			console.log('App Show');
-		},
-		onHide: function() {
-			console.log('App Hide');
-		},
-		methods: {
-			...mapMutations(['login']),
-		}
-	}
+import { mapState, mapMutations } from 'vuex';
+
+export default {
+	onLaunch: function() {
+		console.log('App Launch');
+	},
+	onShow: function() {
+		console.log('App Show');
+	},
+	onHide: function() {
+		console.log('App Hide');
+	}
+};
 </script>
 
-<style lang="less">
-	/*每个页面公共css uParse为优化版本*/
-	@import './common/app.css';
-	/* #ifndef APP-NVUE */
-	@import './components/uni/uParse/src/wxParse.css';
-	/* #endif */
-	/* 头条小程序需要把 iconfont 样式放到组件外 */
-	@import "components/m-icon/m-icon.css";
-
-	/*每个页面公共css */
-	page {
-		min-height: 100%;
-		display: flex;
-		font-size: 16px;
-	}
-
-	/* #ifdef MP-BAIDU */
-	page {
-		width: 100%;
-		height: 100%;
-		display: block;
-	}
-
-	swan-template {
-		width: 100%;
-		min-height: 100%;
-		display: flex;
-	}
-
-	/* 原生组件模式下需要注意组件外部样式 */
-	custom-component {
-		width: 100%;
-		min-height: 100%;
-		display: flex;
-	}
-
-	/* #endif */
-
-	/* #ifdef MP-ALIPAY */
-	page {
-		min-height: 100vh;
-	}
-
-	/* #endif */
-
-	/* 原生组件模式下需要注意组件外部样式 */
-	m-input {
-		width: 100%;
-		/* min-height: 100%; */
-		display: flex;
-		flex: 1;
-	}
-	
-	.tui-swiper-item {
-		.uni-scroll-view {
-		position: absolute;
-		}
-	}
-	
-	.uni-picker-container {
-		z-index: 10000;
-	}
-
-	.content {
-		display: flex;
-		flex: 1;
-		flex-direction: column;
-		background-color: #efeff4;
-		padding: 10px;
-	}
-
-	.input-group {
-		margin-top: 20px;
-		position: relative;
-	}
-
-	.input-group::before {
-		position: absolute;
-		right: 0;
-		top: 0;
-		left: 0;
-		height: 1px;
-		content: '';
-		-webkit-transform: scaleY(.5);
-		transform: scaleY(.5);
-		background-color: #c8c7cc;
-	}
-
-	.input-group::after {
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		height: 1px;
-		content: '';
-		-webkit-transform: scaleY(.5);
-		transform: scaleY(.5);
-		background-color: #c8c7cc;
-	}
-
-	.input-row {
-		display: flex;
-		flex-direction: row;
-		position: relative;
-		font-size: 18px;
-		line-height: 40px;
-		background-color: #FFFFFF;
-	}
-
-	.input-row .title {
-		width: 100px;
-		padding-left: 15px;
-	}
-
-	.input-row.border::after {
+<style lang="scss">
+@import './common/app.css';
+/* 头条小程序需要把 iconfont 样式放到组件外 */
+@import 'components/m-icon/m-icon.css';
+
+@font-face {
+	font-family: 'iconfont';
+	src: url('https://at.alicdn.com/t/font_920828_nk2k2hhgl8.ttf') format('truetype');
+}
+.icon {
+	font-family: iconfont;
+}
+
+/*每个页面公共css */
+page {
+	min-height: 100%;
+}
+
+/* #ifdef MP-BAIDU */
+page {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+swan-template {
+	width: 100%;
+	min-height: 100%;
+	display: flex;
+}
+
+/* 原生组件模式下需要注意组件外部样式 */
+custom-component {
+	width: 100%;
+	min-height: 100%;
+	display: flex;
+}
+
+/* #endif */
+
+/* #ifdef MP-ALIPAY */
+page {
+	min-height: 100vh;
+}
+
+/* #endif */
+
+/* 原生组件模式下需要注意组件外部样式 */
+m-input {
+	width: 100%;
+	/* min-height: 100%; */
+	display: flex;
+	flex: 1;
+}
+
+.tui-swiper-item {
+	.uni-scroll-view {
 		position: absolute;
-		right: 0;
-		bottom: 0;
-		left: 8px;
-		height: 1px;
-		content: '';
-		-webkit-transform: scaleY(.5);
-		transform: scaleY(.5);
-		background-color: #c8c7cc;
-	}
-
-	.btn-row {
-		margin-top: 10px;
-		padding: 10px;
-	}
-
-	button.primary {
-		background-color: #0faeff;
 	}
+}
+
+.uni-picker-container {
+	z-index: 10000;
+}
+
+.content {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	background-color: #efeff4;
+	padding: 10px;
+}
+
+.input-group {
+	margin-top: 20px;
+	position: relative;
+}
+
+.input-group::before {
+	position: absolute;
+	right: 0;
+	top: 0;
+	left: 0;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	background-color: #c8c7cc;
+}
+
+.input-group::after {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	background-color: #c8c7cc;
+}
+
+.input-row {
+	display: flex;
+	flex-direction: row;
+	position: relative;
+	font-size: 18px;
+	line-height: 40px;
+	background-color: #ffffff;
+}
+
+.input-row .title {
+	width: 100px;
+	padding-left: 15px;
+}
+
+.input-row.border::after {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 8px;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	background-color: #c8c7cc;
+}
+
+.btn-row {
+	margin-top: 10px;
+	padding: 10px;
+}
+
+button.primary {
+	background-color: #0faeff;
+}
 </style>

common/app.css

@@ -1,10 +1,5 @@
 /*app.wxss*/
 /* #ifndef APP-NVUE */
-page {
-	background-color: #fafafa;
-	font-size: 32rpx;
-}
-
 ::-webkit-scrollbar {
 	width: 0 !important;
 	height: 0 !important;
@@ -104,3 +99,121 @@ button::after {
 }
 
 /* #endif */
+
+
+/*每个页面公共css */
+
+
+/* 原生组件模式下需要注意组件外部样式 */
+m-input {
+	width: 100%;
+	/* min-height: 100%; */
+	display: flex;
+	flex: 1;
+}
+
+.tui-swiper-item {
+	.uni-scroll-view {
+		position: absolute;
+	}
+}
+
+.uni-picker-container {
+	z-index: 10000;
+}
+
+.content {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	background-color: #efeff4;
+	padding: 10px;
+}
+
+.input-group {
+	margin-top: 20px;
+	position: relative;
+}
+
+.input-group::before {
+	position: absolute;
+	right: 0;
+	top: 0;
+	left: 0;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	background-color: #c8c7cc;
+}
+
+.input-group::after {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	background-color: #c8c7cc;
+}
+
+.input-row {
+	display: flex;
+	flex-direction: row;
+	position: relative;
+	font-size: 18px;
+	line-height: 40px;
+	background-color: #ffffff;
+}
+
+.input-row .title {
+	width: 100px;
+	padding-left: 15px;
+}
+
+.input-row.border::after {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 8px;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	background-color: #c8c7cc;
+}
+
+.btn-row {
+	margin-top: 10px;
+	padding: 10px;
+}
+
+button.primary {
+	background-color: #0faeff;
+}
+/* 分割线 */
+.divider {
+	text-align: center;
+	position: relative;
+	padding: 15px;
+}
+
+.divider view:before,
+.divider view:after {
+	position: absolute;
+	background: #ccc;
+	content: '';
+	height: 1px;
+	top: 50%;
+	width: 100px;
+}
+
+.divider view:before {
+	left: 10px;
+}
+
+.divider view:after {
+	right: 10px;
+}

common/graceChecker.js

@@ -0,0 +1,104 @@
+/**
+数据验证（表单验证）
+来自 grace.hcoder.net 
+作者 hcoder 深海
+*/
+module.exports = {
+	error:'',
+	check : function (data, rule){
+		for(var i = 0; i < rule.length; i++){
+			if (!rule[i].checkType){return true;}
+			if (!rule[i].name) {return true;}
+			if (!rule[i].errorMsg) {return true;}
+			if (!data[rule[i].name]) {this.error = rule[i].errorMsg; return false;}
+			switch (rule[i].checkType){
+				case 'string':
+					var reg = new RegExp('^.{' + rule[i].checkRule + '}$');
+					if(!reg.test(data[rule[i].name])) {this.error = rule[i].errorMsg; return false;}
+				break;
+				case 'int':
+					var reg = new RegExp('^(-[1-9]|[1-9])[0-9]{' + rule[i].checkRule + '}$');
+					if(!reg.test(data[rule[i].name])) {this.error = rule[i].errorMsg; return false;}
+					break;
+				break;
+				case 'between':
+					if (!this.isNumber(data[rule[i].name])){
+						this.error = rule[i].errorMsg;
+						return false;
+					}
+					var minMax = rule[i].checkRule.split(',');
+					minMax[0] = Number(minMax[0]);
+					minMax[1] = Number(minMax[1]);
+					if (data[rule[i].name] > minMax[1] || data[rule[i].name] < minMax[0]) {
+						this.error = rule[i].errorMsg;
+						return false;
+					}
+				break;
+				case 'betweenD':
+					var reg = /^-?[1-9][0-9]?$/;
+					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
+					var minMax = rule[i].checkRule.split(',');
+					minMax[0] = Number(minMax[0]);
+					minMax[1] = Number(minMax[1]);
+					if (data[rule[i].name] > minMax[1] || data[rule[i].name] < minMax[0]) {
+						this.error = rule[i].errorMsg;
+						return false;
+					}
+				break;
+				case 'betweenF': 
+					var reg = /^-?[0-9][0-9]?.+[0-9]+$/;
+					if (!reg.test(data[rule[i].name])){this.error = rule[i].errorMsg; return false;}
+					var minMax = rule[i].checkRule.split(',');
+					minMax[0] = Number(minMax[0]);
+					minMax[1] = Number(minMax[1]);
+					if (data[rule[i].name] > minMax[1] || data[rule[i].name] < minMax[0]) {
+						this.error = rule[i].errorMsg;
+						return false;
+					}
+				break;
+				case 'same':
+					if (data[rule[i].name] != rule[i].checkRule) { this.error = rule[i].errorMsg; return false;}
+				break;
+				case 'notsame':
+					if (data[rule[i].name] == rule[i].checkRule) { this.error = rule[i].errorMsg; return false; }
+				break;
+				case 'email':
+					var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
+					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
+				break;
+				case 'phoneno':
+					var reg = /^1[0-9]{10,10}$/;
+					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
+				break;
+				case 'id':
+					var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
+					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
+				break;
+				case 'zipcode':
+					var reg = /^[0-9]{6}$/;
+					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
+				break;
+				case 'reg':
+					var reg = new RegExp(rule[i].checkRule);
+					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
+				break;
+				case 'in':
+					if(rule[i].checkRule.indexOf(data[rule[i].name]) == -1){
+						this.error = rule[i].errorMsg; return false;
+					}
+				break;
+				case 'notnull':
+					if(data[rule[i].name] == null|| data[rule[i].name].length < 1){this.error = rule[i].errorMsg; return false;}
+				break;
+				case 'editor':
+					if(data[rule[i].name] == null||data[rule[i].name] ==='<p wx:nodeid=\"85\"><br></p>'||data[rule[i].name] ==='<p><br></p>'|| data[rule[i].name].length < 1|| data[rule[i].name].length===undefined){this.error = rule[i].errorMsg; return false;}
+				break;
+			}
+		}
+		return true;
+	},
+	isNumber : function (checkVal){
+		var reg = /^-?[1-9][0-9]?.?[0-9]*$/;
+		return reg.test(checkVal);
+	}
+}

common/http.js

@@ -0,0 +1,70 @@
+const ip = 'http://192.168.1.42:8686';
+//const ip = 'http://114.215.150.32';
+/**
+ * 全部接口
+ */
+const urls = {
+	ip: ip,
+	login: ip + '/app/login', //app登陆
+	captchaSend: ip + '/app/captchaSend', //发送短信验证码
+}
+/**
+ * 封装的请求
+ */
+const request = (opt) => {
+	opt = opt || {};
+	opt.url = opt.url || '';
+	opt.data = opt.data || null;
+	opt.method = opt.method || 'GET';
+	opt.header = opt.header || {
+		"Content-Type": "application/json;charset=UTF-8",
+		"Authorization": getUser().token || ''
+
+	};
+	opt.loading = opt.loading || 'true';
+	opt.success = opt.success || function() {};
+	console.log("**************************************参数调式***************************************************");
+	console.log("token:" + getUser().token)
+	console.log("请求地址:" + opt.url + " 请求参数:" + JSON.stringify(opt.data));
+	console.log("************************************************************************************************");
+	if (opt.loading == 'true') {
+		uni.showLoading({
+			title: '正在加载'
+		});
+	}
+	uni.request({
+		url: opt.url,
+		data: opt.data,
+		method: opt.method,
+		header: opt.header,
+		dataType: 'json',
+		success: function(res) {
+			setTimeout(() => {
+				uni.hideLoading();
+			}, 500)
+			if (res.data.code === 500) {
+				uni.showModal({
+					content: res.data.msg,
+					showCancel: false
+				});
+				return;
+			}
+			opt.success(res);
+		},
+		fail: function(e) {
+			uni.hideLoading();
+			uni.showModal({
+				content: '服务异常，请稍后重试',
+				showCancel: false
+			})
+		}
+	})
+}
+const getUser = () => {
+	return uni.getStorageSync('user');
+}
+module.exports = {
+	urls,
+	request,
+	getUser
+};

common/httpRequest.js

@@ -1,204 +0,0 @@
-/**
- * 常用方法封装 请求，文件上传等
- * @author echo. 
- **/
-
-const tui = {
-	//接口地址
-	interfaceUrl: function() {
-		return 'https://www.thorui.cn'
-		//return 'https://test.thorui.cn'
-		//return 'https://uat.thorui.cn'
-		// return 'https://prod.thorui.cn'
-	},
-	toast: function(text, duration, success) {
-		uni.showToast({
-			title: text || "出错啦~",
-			icon: success ? 'success' : 'none',
-			duration: duration || 2000
-		})
-	},
-	modal: function(title, content, showCancel, callback, confirmColor, confirmText) {
-		uni.showModal({
-			title: title || '提示',
-			content: content,
-			showCancel: showCancel,
-			cancelColor: "#555",
-			confirmColor: confirmColor || "#C74547",
-			confirmText: confirmText || "确定",
-			success(res) {
-				if (res.confirm) {
-					callback && callback(true)
-				} else {
-					callback && callback(false)
-				}
-			}
-		})
-	},
-	isAndroid: function() {
-		const res = uni.getSystemInfoSync();
-		return res.platform.toLocaleLowerCase() == "android"
-	},
-	isPhoneX: function() {
-		const res = uni.getSystemInfoSync();
-		let iphonex = false;
-		let models=['iphonex','iphonexr','iphonexsmax','iphone11','iphone11pro','iphone11promax']
-		const model=res.model.replace(/\s/g,"").toLowerCase()
-		if (models.includes(model)) {
-			iphonex = true;
-		}
-		return iphonex;
-	},
-	constNum: function() {
-		let time = 0;
-		// #ifdef APP-PLUS
-		time = this.isAndroid() ? 300 : 0;
-		// #endif
-		return time
-	},
-	delayed: null,
-	/**
-	 * 请求数据处理
-	 * @param string url 请求地址
-	 * @param string method 请求方式
-	 *  GET or POST
-	 * @param {*} postData 请求参数
-	 * @param bool isDelay 是否延迟显示loading
-	 * @param bool isForm 数据格式
-	 *  true: 'application/x-www-form-urlencoded'
-	 *  false:'application/json'
-	 * @param bool hideLoading 是否隐藏loading
-	 *  true: 隐藏
-	 *  false:显示
-	 */
-	request: function(url, method, postData, isDelay, isForm, hideLoading) {
-		//接口请求
-		let loadding = false;
-		tui.delayed && uni.hideLoading();
-		clearTimeout(tui.delayed);
-		tui.delayed = null;
-		if (!hideLoading) {
-			tui.delayed = setTimeout(() => {
-				uni.showLoading({
-					mask: true,
-					title: '请稍候...',
-					success(res) {
-						loadding = true
-					}
-				})
-			}, isDelay ? 1000 : 0)
-		}
-
-		return new Promise((resolve, reject) => {
-			uni.request({
-				url: tui.interfaceUrl() + url,
-				data: postData,
-				header: {
-					'content-type': isForm ? 'application/x-www-form-urlencoded' : 'application/json',
-					'Authorization': tui.getToken()
-				},
-				method: method, //'GET','POST'
-				dataType: 'json',
-				success: (res) => {
-					clearTimeout(tui.delayed)
-					tui.delayed = null;
-					if (loadding && !hideLoading) {
-						uni.hideLoading()
-					}
-					// if (res.data && res.data.code == 1) {
-					// 	uni.clearStorageSync()
-					// 	tui.modal("登录信息已失效，请重新登录", false, () => {
-					// 		//store.commit("logout") 登录页面执行
-					// 		uni.redirectTo({
-					// 			url: '/pages/common/login/login'
-					// 		})
-					// 	})
-					// 	return
-					// }
-					resolve(res.data)
-				},
-				fail: (res) => {
-					clearTimeout(tui.delayed)
-					tui.delayed = null;
-					tui.toast("网络不给力，请稍后再试~")
-					reject(res)
-				}
-			})
-		})
-	},
-	/**
-	 * 上传文件
-	 * @param string url 请求地址
-	 * @param string src 文件路径
-	 */
-	uploadFile: function(url, src) {
-		uni.showLoading({
-			title: '请稍候...'
-		})
-		return new Promise((resolve, reject) => {
-			const uploadTask = uni.uploadFile({
-				url: tui.interfaceUrl() + url,
-				filePath: src,
-				name: 'imageFile',
-				header: {
-					'Authorization': tui.getToken()
-				},
-				formData: {
-					// sizeArrayText:""
-				},
-				success: function(res) {
-					uni.hideLoading()
-					let d = JSON.parse(res.data.replace(/\ufeff/g, "") || "{}")
-					if (d.code % 100 == 0) {
-						//返回图片地址
-						let fileObj = d.data;
-						resolve(fileObj)
-					} else {
-						that.toast(res.msg);
-					}
-				},
-				fail: function(res) {
-					reject(res)
-					that.toast(res.msg);
-				}
-			})
-		})
-	},
-	tuiJsonp: function(url, callback, callbackname) {
-		// #ifdef H5
-		window[callbackname] = callback;
-		let tuiScript = document.createElement("script");
-		tuiScript.src = url;
-		tuiScript.type = "text/javascript";
-		document.head.appendChild(tuiScript);
-		document.head.removeChild(tuiScript);
-		// #endif
-	},
-	//设置用户信息
-	setUserInfo: function(mobile, token) {
-		//uni.setStorageSync("thorui_token", token)
-		uni.setStorageSync("thorui_mobile", mobile)
-	},
-	//获取token
-	getToken() {
-		return uni.getStorageSync("thorui_token")
-	},
-	//判断是否登录
-	isLogin: function() {
-		return uni.getStorageSync("thorui_mobile") ? true : false
-	},
-	//跳转页面，校验登录状态
-	href(url, isVerify) {
-		if (isVerify && !tui.isLogin()) {
-			uni.navigateTo({
-				url: '/pages/common/login/login'
-			})
-		} else {
-			uni.navigateTo({
-				url: url
-			});
-		}
-	}
-}
-
-export default tui

main.js

@@ -1,12 +1,34 @@
 import Vue from 'vue'
 import App from './App'
+import http from './common/http.js'
+import verify from './common/graceChecker.js' //数据验证
 
 import store from './store'
 
 Vue.config.productionTip = false
 
+Vue.prototype.$http = http;
+Vue.prototype.$verify = verify;
+
 Vue.prototype.$store = store
 
+/**
+ * 获取用户信息
+ */
+Vue.prototype.$getUser = function() {
+	return uni.getStorageSync('user');
+}
+/**
+ * 判断是否登陆
+ */
+Vue.prototype.$hasLogin = () => {
+	if (uni.getStorageSync('user') === '' || uni.getStorageSync('user') === null) {
+		return false
+	} else {
+		return true
+	}
+}
+
 App.mpType = 'app'
 
 const app = new Vue({

pages.json

@@ -24,7 +24,14 @@
 			"style": {
 				"navigationBarTitleText": "详情"
 			}
-		}, {
+		},
+		{
+			"path": "pages/login/login",
+			"style": {
+				"navigationBarTitleText": "登录"
+			}
+		},
+		{
 			"path": "pages/main/join/join",
 			"style": {
 				"navigationBarTitleText": "加入家族"
@@ -376,11 +383,6 @@
 				"navigationBarTitleText": "商品详情"
 			}
 		}, {
-			"path": "pages/login/login",
-			"style": {
-				"navigationBarTitleText": "登录"
-			}
-		}, {
 			"path": "pages/reg/reg",
 			"style": {
 				"navigationBarTitleText": "注册"
@@ -437,7 +439,7 @@
 	},
 	"globalStyle": {
 		"navigationBarTextStyle": "white",
-		"navigationBarBackgroundColor": "white",
+		"navigationBarBackgroundColor": "#c74547",
 		"backgroundColor": "#efefef"
 	}
 }

pages/login/login.vue

@@ -1,423 +1,144 @@
 <template>
-	<view class="content">
-		
-		
-
-		<view style="margin-top: 300rpx;">
-				<view class="input-group">
-					<view class="input-row">
-						<text class="title"><tui-icon name="mobile" :size="22"></tui-icon></text>
-						<m-input class="m-input" type="text" clearable focus v-model="mobile" placeholder="请输入手机号码"></m-input>
-					</view>
-					<view class="input-row" style="margin-top: 10px;">
-						<text class="title"><tui-icon name="shield" :size="22"></tui-icon></text>
-						<m-input type="text" v-model="code" placeholder="请输入验证码"></m-input>
-						<tui-button type="black" disabled margin="15rpx 15rpx 15rpx 15rpx" plain shape="rightAngle" width="130rpx" height="50rpx" :size="24" @click="sendSmsCode">{{codeDuration ? codeDuration + 's' : '发送验证码' }}</tui-button>
-					</view>
-				</view>
-				<view class="btn-row">
-					<tui-button type="warning" @tap="bindLogin">登录</tui-button>
-				</view>
-
-				<view class="oauth-row" v-if="hasProvider" v-bind:style="{top: positionTop + 'px'}">
-					<view class="oauth-image" v-for="provider in providerList" :key="provider.value">
-						<image :src="provider.image" @tap="oauth(provider.value)"></image>
-						<!-- #ifdef MP-WEIXIN -->
-						<button v-if="!isDevtools" open-type="getUserInfo" @getuserinfo="getUserInfo"></button>
-						<!-- #endif -->
-					</view>
-				</view>	
+	<view>
+		<view class="login">
+			<image src="../../static/images/logo.jpg" class="logo"></image>
+			<view class="item">
+				<text class="icon">&#xe6c9;</text>
+				<input type="number" placeholder="输入手机号" v-model="item.mobile" />
+			</view>
+			<view class="item">
+				<text class="icon">&#xe7a1;</text>
+				<input type="number" placeholder="输入短信验证码" v-model="item.captcha" />
+				<text class="code" @click="captchaSend()">{{ msg }}</text>
+			</view>
+			<button type="warn" @click="login()">登陆</button>
+			<view class="divider"><view>第三方登陆</view></view>
+			<view class="third">
+				<view class="weixin"><text class="icon">&#xe622;</text></view>
+			</view>
 		</view>
-
-		
 	</view>
 </template>
 
 <script>
-	import service from '@/service.js';
-	import tuiIcon from "@/components/thorui/tui-icon/tui-icon"
-	import tuiButton from "@/components/thorui/tui-button/tui-button"
-	
-	import {
-		mapState,
-		mapMutations
-	} from 'vuex'
-	import mInput from '@/components/m-input.vue'
-
-	export default {
-		components: {
-			mInput,
-			tuiButton,
-			tuiIcon
-		},
-		data() {
-			return {
-				loginType: 0,
-				loginTypeList: ['密码登录', '免密登录'],
-				mobile: '',
-				code: '',
-				providerList: [],
-				hasProvider: false,
-				username: '',
-				password: '',
-				positionTop: 0,
-				isDevtools: false,
-				codeDuration: 0
+export default {
+	data() {
+		return {
+			item: {},
+			msg: '获取短信',
+			flag: true,
+			time: 60
+		};
+	},
+	methods: {
+		//发送验证码
+		captchaSend() {
+			if (!this.flag) {
+				return;
 			}
-		},
-		computed: mapState(['forcedLogin']),
-		methods: {
-			...mapMutations(['login']),
-			initProvider() {
-				const filters = ['weixin', 'qq', 'sinaweibo'];
-				uni.getProvider({
-					service: 'oauth',
-					success: (res) => {
-						if (res.provider && res.provider.length) {
-							for (let i = 0; i < res.provider.length; i++) {
-								if (~filters.indexOf(res.provider[i])) {
-									this.providerList.push({
-										value: res.provider[i],
-										image: '../../static/img/' + res.provider[i] + '.png'
-									});
-								}
-							}
-							this.hasProvider = true;
-						}
-					},
-					fail: (err) => {
-						console.error('获取服务供应商失败：' + JSON.stringify(err));
-					}
-				});
-			},
-			initPosition() {
-				/**
-				 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
-				 * 反向使用 top 进行定位，可以避免此问题。
-				 */
-				this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
-			},
-			sendSmsCode() {
-				if(this.codeDuration) {
-					uni.showModal({
-						content: `请在${this.codeDuration}秒后重试`,
-						showCancel: false
-					})
-				}
-				if (!/^1\d{10}$/.test(this.mobile)) {
-					uni.showModal({
-						content: '手机号码填写错误',
-						showCancel: false
-					})
-					return
-				}
-				uniCloud.callFunction({
-					name: 'user-center',
-					data: {
-						action: 'sendSmsCode',
-						params: {
-							mobile: this.mobile
-						}
-					},
-					success: (e) => {
-						if (e.result.code == 0) {
-							uni.showModal({
-								content: '验证码发送成功，请注意查收',
-								showCancel: false
-							})
-							this.codeDuration = 60
-							this.codeInterVal = setInterval(() => {
-								this.codeDuration--
-								if (this.codeDuration === 0) {
-									if (this.codeInterVal) {
-										clearInterval(this.codeInterVal)
-										this.codeInterVal = null
-									}
-								}
-							}, 1000)
-						} else {
-							uni.showModal({
-								content: '验证码发送失败：' + e.result.msg,
-								showCancel: false
-							})
-						}
-
-					},
-					fail(e) {
-						uni.showModal({
-							content: '验证码发送失败',
-							showCancel: false
-						})
-					}
-				})
-			},
-			loginByPwd() {
-				/**
-				 * 客户端对账号信息进行一些必要的校验。
-				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
-				 */
-				if (this.username.length < 3) {
-					uni.showToast({
-						icon: 'none',
-						title: '账号最短为 3 个字符'
-					});
-					return;
-				}
-				if (this.password.length < 6) {
-					uni.showToast({
-						icon: 'none',
-						title: '密码最短为 6 个字符'
-					});
-					return;
-				}
-				const data = {
-					username: this.username,
-					password: this.password
-				};
-				let _self = this;
-
-				uniCloud.callFunction({
-					name: 'user-center',
-					data: {
-						action: 'login',
-						params: data
-					},
-					success: (e) => {
-
-						console.log('login success', e);
-
-						if (e.result.code == 0) {
-							uni.setStorageSync('uniIdToken', e.result.token)
-							uni.setStorageSync('username', e.result.username)
-							uni.setStorageSync('login_type', 'online')
-							_self.toMain(_self.username);
-						} else {
-							uni.showModal({
-								content: e.result.msg,
-								showCancel: false
-							})
-							console.log('登录失败', e);
-						}
-
-					},
-					fail(e) {
-						uni.showModal({
-							content: JSON.stringify(e),
-							showCancel: false
-						})
-					}
-				})
-			},
-			loginBySms() {
-				if (!/^1\d{10}$/.test(this.mobile)) {
-					uni.showModal({
-						content: '手机号码填写错误',
-						showCancel: false
-					})
-					return
-				}
-				if (!/^\d{6}$/.test(this.code)) {
-					uni.showModal({
-						title: '验证码为6位纯数字',
-						showCancel: false
-					});
-					return;
-				}
-				let _self = this;
-
-				uniCloud.callFunction({
-					name: 'user-center',
-					data: {
-						action: 'loginBySms',
-						params: {
-							mobile: this.mobile,
-							code: this.code
-						}
-					},
-					success: (e) => {
-
-						console.log('login success', e);
-
-						if (e.result.code == 0) {
-							const username = e.result.username || '新用户'
-							uni.setStorageSync('uniIdToken', e.result.token)
-							uni.setStorageSync('username', username)
-							uni.setStorageSync('login_type', 'online')
-							_self.toMain(username);
+			this.$http.request({
+				url: this.$http.urls.captchaSend,
+				data: { mobile: this.item.mobile, type: 2 },
+				success: res => {
+					uni.showToast({ title: '发送成功' });
+					//一分钟倒计时
+					var countdown = setInterval(() => {
+						this.time--;
+						if (this.time == 0) {
+							this.flag = true;
+							this.msg = '获取短信';
+							this.time = 60;
+							clearInterval(countdown);
 						} else {
-							uni.showModal({
-								content: e.result.msg,
-								showCancel: false
-							})
-							console.log('登录失败', e);
+							this.flag = false;
+							this.msg = '重新获取(' + this.time + ')';
 						}
-
-					},
-					fail(e) {
-						uni.showModal({
-							content: JSON.stringify(e),
-							showCancel: false
-						})
-					}
-				})
-			},
-			bindLogin() {
-				switch (this.loginType) {
-					case 0:
-						this.loginByPwd()
-						break;
-					case 1:
-						this.loginBySms()
-						break;
-					default:
-						break;
+					}, 1000);
 				}
-			},
-			oauth(value) {
-				console.log('三方登录只演示登录api能力，暂未关联云端数据');
-				uni.login({
-					provider: value,
-					success: (res) => {
-						uni.getUserInfo({
-							provider: value,
-							success: (infoRes) => {
-								/**
-								 * 实际开发中，获取用户信息后，需要将信息上报至服务端。
-								 * 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。
-								 */
-								this.loginLocal(infoRes.userInfo.nickName);
-							},
-							fail() {
-								uni.showToast({
-									icon: 'none',
-									title: '登陆失败'
-								});
-							}
-						});
-					},
-					fail: (err) => {
-						console.error('授权登录失败：' + JSON.stringify(err));
-					}
-				});
-			},
-			getUserInfo({
-				detail
-			}) {
-				console.log('三方登录只演示登录api能力，暂未关联云端数据');
-				if (detail.userInfo) {
-					this.loginLocal(detail.userInfo.nickName);
-				} else {
-					uni.showToast({
-						icon: 'none',
-						title: '登陆失败'
-					});
-				}
-			},
-			loginLocal(nickName) {
-				uni.setStorageSync('login_type', 'local')
-				uni.setStorageSync('username', nickName)
-				this.toMain(nickName);
-			},
-			toMain(userName) {
-				this.login(userName);
-				/**
-				 * 强制登录时使用reLaunch方式跳转过来
-				 * 返回首页也使用reLaunch方式
-				 */
-				if (this.forcedLogin) {
-					uni.reLaunch({
-						url: '../main/main',
-					});
-				} else {
+			});
+		},
+		//登陆
+		login() {
+			//数据校验
+			let rule = [{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' }, { name: 'captcha', checkType: 'notnull', errorMsg: '输入短信验证码' }];
+			let checkRes = this.$verify.check(this.item, rule);
+			if (!checkRes) {
+				uni.showToast({ title: this.$verify.error, icon: 'none' });
+				return;
+			}
+			this.$http.request({
+				url: this.$http.urls.login,
+				data:this.item,
+				success: res => {
+					uni.showToast({ title: '登陆成功' });
+					uni.setStorageSync('user', res.data.data.user);
+					uni.$emit('update');
 					uni.navigateBack();
 				}
-
-			}
-		},
-		onReady() {
-			this.initPosition();
-			this.initProvider();
-			// #ifdef MP-WEIXIN
-			this.isDevtools = uni.getSystemInfoSync().platform === 'devtools';
-			// #endif
+			});
 		}
 	}
+};
 </script>
 
-<style>
-	.content {
-		background-color: #C74547;
-	}
-	.login-type {
-		display: flex;
-		justify-content: center;
-	}
-
-	.login-type-btn {
-		line-height: 30px;
-		margin: 0px 15px;
-	}
-
-	.login-type-btn.act {
-		color: #C74547;
-		border-bottom: solid 1px #C74547;
-	}
-
-	.input-row .title {
-		width: auto;
-		padding-left: 30rpx;
-	}
-
-	.send-code-btn {
-		text-align: center;
-		color: #a3a3a3;
-		font-size: 20rpx;
-		border: solid 1px #a3a3a3;
-	}
-
-	.action-row {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
+<style lang="scss">
+page {
+	background-color: $theme-color;
+	text-align: center;
+}
+.login {
+	padding: 15px;
+	.logo {
+		width: 150px;
+		height: 150px;
 	}
-
-	.action-row navigator {
-		color: #C74547;
-		padding: 0 10px;
-	}
-
-	.oauth-row {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
+	.item {
+		background-color: white;
+		padding: 15px;
+		margin-top: 15px;
+		border-radius: 3px;
+		overflow: hidden;
+		text-align: left;
+		font-size: 14px;
+		.icon {
+			float: left;
+			font-size: 24px;
+		}
+		input {
+			float: left;
+			padding-left: 10px;
+			width: 50%;
+		}
+		.code {
+			float: right;
+			color: #565656;
+		}
 	}
-
-	.oauth-image {
-		position: relative;
-		width: 50px;
-		height: 50px;
-		border: 1px solid #dddddd;
-		border-radius: 50px;
-		margin: 0 20px;
-		background-color: #ffffff;
+	button {
+		margin-top: 36px;
+		width: 85%;
+		background-color: #ebb827;
+		color: white;
 	}
-
-	.oauth-image image {
-		width: 30px;
-		height: 30px;
-		margin: 10px;
+	.divider {
+		color: white;
+		font-size: 13px;
+		margin-top: 76px;
 	}
-
-	.oauth-image button {
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		opacity: 0;
+	.third {
+		margin-top: 20px;
+		.weixin {
+			width: 50px;
+			height: 50px;
+			margin: 0 auto;
+			border: 1px solid white;
+			border-radius: 50%;
+			color: white;
+			.icon {
+				font-size: 33px;
+				line-height: 50px;
+			}
+		}
 	}
+}
 </style>

pages/main/main.vue

@@ -40,7 +40,7 @@
 				<tui-button height="72rpx" :size="28" shape="circle" @click="handleClick3">保存</tui-button>
 			</view>
 		</tui-modal>
-		<view v-if="hasLogin" class="hello">
+		<view class="hello">
 			<view id="moments">
 				<view class="home-pic">
 					<view class="home-pic-base">
@@ -192,17 +192,6 @@
 				<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
 			</view>
 		</view>
-		<view v-if="!hasLogin" style="padding: 0 20rpx;">
-			<view class="title">
-				您好 游客,你还未登录。
-			</view>
-			<view class="ul">
-				<view>这是传承云个人族友圈,如需查看请登录</view>
-				<view style="margin-top: 20rpx;">
-					<tui-button type="warning" @tap="loginurl">点击登录</tui-button>
-				</view>
-			</view>
-		</view>
 	</view>
 </template>
 
@@ -284,6 +273,9 @@
 			});
 		
 		},
+		onReady() {
+			uni.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: '#c74547' });
+		},
 		onLoad() {
 			uni.getSystemInfo({ //获取设备信息
 				success: (res) => {

pages/news/list.vue

@@ -8,13 +8,6 @@
 				<view class="title">【本溪历史的今天】7月29日</view>
 				<view class="desc">我们每天会分享一则咱们本溪历史上今天发生过的一些有意义的事情，希望大家能够喜欢，不足之处也欢迎各位留言补充</view>
 			</view>
-			<view class="item">
-				<view class="time"><text>2020.7.29</text><text class="views">269人看过</text>
-				</view>
-				<image src="../../static/images/news/20201009233729.png"></image>
-				<view class="title">【本溪历史的今天】7月29日</view>
-				<view class="desc">我们每天会分享一则咱们本溪历史上今天发生过的一些有意义的事情，希望大家能够喜欢，不足之处也欢迎各位留言补充</view>
-			</view>
 		</view>
 	</view>
 </template>

uni.scss

@@ -1,7 +1,5 @@
-/**
- * scss预处理 内置的常用样式变量
- * 后期项目会考虑使用scss
-*/
+/* 主题颜色变量 */
+$theme-color: #c74547;
 
 /* 颜色变量 */