登录

App.vue

@@ -22,13 +22,13 @@
 	
 	//全局页面背景色
 	page{
-		background-color: #f7f7f7;
+		// background-color: #f7f7f7;
 	}
 	
 	// 点击时背景灰色
-	.hover-class{
-		background-color: #f7f7f7!important;
-	}
+	// .hover-class{
+	// 	background-color: #f7f7f7!important;
+	// }
 	//底部安全距离
 	.bottom-safety{
 		padding-bottom: constant(safe-area-inset-bottom);

apis/api.js

@@ -1,9 +1,15 @@
 import ajax from '../utils/request.js'
 
+const netServe =  {
+	doLogin(data) { return ajax.postForm('/api/doLogin', data)}, 
+	// doRefister(data) { return ajax.postJson('/sp-home/AppUser/register', data) }
+	// doRefister: (params = {}) => ajax.postJson('/sp-home/AppUser/register', params),
+}
+
 
 export default {
     doLogin(data) {
-        return ajax.postForm('/api/doLogin', data)
+        return ajax.postForm('/sp-admin/app/AppUser/login', data)
     },
-
+	// netServe
 }

package-lock.json

@@ -1,11 +0,0 @@
-{
-  "requires": true,
-  "lockfileVersion": 1,
-  "dependencies": {
-    "uview-ui": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-2.0.19.tgz",
-      "integrity": "sha512-ddZiaP7R9wsUxMzAuhuXgh5OswgCm2lKuulTqjnRXFr0uUWsgL1iBifU3GbOwpwP0LtTHKJOo9rYv1LP0WXmzA=="
-    }
-  }
-}

pages.json

@@ -1,21 +1,68 @@
 {
-  "easycom": {
-    "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
-  },
-  "pages": [
-    {
-      "path": "pages/login/login",
-      "style": {
-        "navigationBarTitleText": ""
-        //登录
-        //"navigationStyle":"custom"
-      }
-    }
-  ],
-  "globalStyle": {
-    "navigationBarTextStyle": "white",
-    "navigationBarTitleText": "uni-app",
-    "navigationBarBackgroundColor": "#0080ff",
-    "backgroundColor": "#F8F8F8"
-  }
-}
+	"easycom": {
+		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
+	},
+	"pages": [{
+			"path": "pages/login/login",
+			"style": {
+				"navigationBarTitleText": ""
+				//登录
+				//"navigationStyle":"custom"
+			}
+		}, {
+			"path": "pages/login/chooseRole",
+			"style": {
+				"navigationBarTitleText": "选择角色",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/login/register",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}
+
+	    ,{
+            "path" : "pages/personal/personal",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
+	"globalStyle": {
+		"navigationBarTextStyle": "white",
+		"navigationBarTitleText": "uni-app",
+		"navigationBarBackgroundColor": "#fff",
+		"backgroundColor": "#F8F8F8"
+	},
+	"tabBar": {
+		"color": "#7A7E83",
+		"selectedColor": "#3cc51f",
+		"borderStyle": "black",
+		"backgroundColor": "#ffffff",
+		"list": [{
+			"pagePath": "pages/index/index",
+			"iconPath": "static/image/icon_component.png",
+			"selectedIconPath": "static/image/icon_component_HL.png",
+			"text": "首页"
+		}, {
+			"pagePath": "pages/personal/personal",
+			"iconPath": "static/image/icon_API.png",
+			"selectedIconPath": "static/image/icon_API_HL.png",
+			"text": "我的"
+		}]
+	}
+}

pages/index/index.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/login/chooseRole.vue

@@ -0,0 +1,112 @@
+<template>
+	<view class="u-page">
+		<navigation-bar title="选择角色" background-color="#fff" front-color="#000000" />
+		<u-list>
+			<u-list-item v-for="(item, index) in roles" :key="index" >
+				<!-- #fff7f7 -->
+				<!-- <u-row customStyle="marginBottom:10px;backgroundColor: '#fff7f7';height: '200px'"> -->
+				<u-row @click="choose(item)" :class="index==current? 'active-custom-style':'custom-style'">
+					<u-col span="8">
+						<view class="r-role">
+							{{item.name}}
+						</view>
+					</u-col>
+					<u-col span="4">
+						<view class="l-role">
+							<u-image :showLoading="true" :src="item.src" width="110px" height="142px" radius="10px"></u-image>
+						</view>
+					</u-col>
+				</u-row>
+			</u-list-item>
+		</u-list>
+		<u-button type="error" shape="circle" text="下一步" @click="next()"></u-button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				roles: [{
+						id: 1,
+						name: "我是边民",
+						src: require("@/static/images/role/bm.png")
+					},
+					{
+						id: 2,
+						name: "我是经销商",
+						src: require("@/static/images/role/jxs.png")
+					},
+					{
+						id: 3,
+						name: "我是外籍商户",
+						src: require("@/static/images/role/wjsh.png")
+					},
+					{
+						id: 4,
+						name: "我是司机",
+						src: require("@/static/images/role/sj.png")
+					},
+				],
+				// customStyle: {
+				// 	marginBottom: '10px',
+				// 	backgroundColor: '#fff7f7',
+				// 	height: '200px'
+				// }
+				current: 1,
+			}
+		},
+		methods: {
+			choose(data) {
+				console.log("选择角色");
+				console.log(data);
+				for (let i = 0; i < this.roles.length; i++) {
+					if (this.roles[i].name === data.name) {
+						this.current = i;
+					}
+				}
+			},
+			next(){
+				uni.navigateTo({
+					url:"/pages/index/index"
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		padding: 0 30px;
+	}
+
+	.custom-style {
+		margin-bottom: 10px;
+		background-color: #fff7f7;
+		height: 145px;
+		border-radius: 10px;
+	}
+	
+	.active-custom-style {
+		margin-bottom: 10px;
+		background-color: #fff7f7;
+		height: 145px;
+		border-radius: 10px;
+		border: #f83d3d 1px solid;
+	}
+	
+
+	.r-role {
+		font-size: 34px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.l-role {
+		// margin-left: 10px;
+		// position: absolute;
+		// right: 10px;
+		// bottom: 10px;
+	}
+</style>

pages/login/login.vue

@@ -1,101 +1,167 @@
 <template>
-  <view>
-    <view class="l-topbox">
-      <text>欢迎登录</text>
-    </view>
-    <view class="box">
+	<view>
+		<view class="remain">
+			<h1>欢迎回来</h1>
+			<view class="wel">请登录您的账号</view>
+		</view>
+		<view class="form">
+			<u-form :model="form" ref="uForm" label-width="100px" label-position="top">
+				<u-form-item label="手机号" prop="phone">
+					<view class="form-input">
+						<u-input v-model="form.phone" type="number" border="surround" maxlength='11'
+							placeholder='请输入手机号码' :clearable='false' />
+					</view>
+				</u-form-item>
+				<u-form-item label="密码" prop="password">
+					<view class="form-input">
+						<u-input v-model="form.password" type="password" placeholder='请输入密码' :clearable='false' />
+					</view>
+				</u-form-item>
+			</u-form>
+			<view style="font-size: 13px;">忘记密码？</view>
+			<view class="btn">
+				<view style="margin-bottom: 10px;">
+					<u-radio-group v-model="value" :wrap="true">
+						<u-radio :label="radioLabel"></u-radio>
+					</u-radio-group>
+				</view>
+				<view>
+					<u-button type="error" shape="circle" text="登录" @click="submit()"></u-button>
+				</view>
+				<view class="tip" @click="toRegister()">还没有账号？马上注册</view>
+			</view>
 
-      <view class="item">
-        <view class="l">手机号：</view>
-        <view class="r">
-          <u-input v-model="form.key" placeholder="请输入手机号"/>
-        </view>
-      </view>
-      <view class="item">
-        <view class="l">密码：</view>
-        <view class="r">
-          <u-input v-model="form.password" placeholder="请输入密码" type="password"/>
-        </view>
-      </view>
-    </view>
-    <view class="common-btn" @click="loginFn">确认登录</view>
-  </view>
+		</view>
+	</view>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      sliderVerifyFLag: false, //滑块验证
-      form: {
-        key: '',
-        password: ''
-      }
-    }
-  },
-  methods: {
-    loginFn() {
-      if (!this.form.key) {
-        this.$common.toast('请输入登录名');
-        return;
-      }
-      if (!this.form.password) {
-        this.$common.toast('请输入密码');
-        return;
-      }
-      let openid = uni.getStorageSync('openid');
-      if (!openid) {
-        openid = uni.getStorageSync('login_openid');
-      }
-      this.form.openid = openid
-      this.$api.doLogin(this.form).then(resp => {
-        let data = resp.data;
-		
-      })
-    },
-
-  }
-}
+	export default {
+		data() {
+			return {
+				sliderVerifyFLag: false, //滑块验证
+				form: {
+					phone: '',
+					password: ''
+				},
+				rules: {
+					phone: [{
+							required: true,
+							message: '请输入手机号',
+							trigger: 'blur,change'
+						},
+						{
+							// 自定义验证函数，见上说明
+							validator: (rule, value, callback) => {
+								// 上面有说，返回true表示校验通过，返回false表示不通过
+								// uni.$u.test.mobile()就是返回true或者false的
+								return uni.$u.test.mobile(value);
+							},
+							message: '手机号码不正确',
+							// 触发器可以同时用blur和change
+							trigger: ['change', 'blur'],
+						}
+					],
+					password: [{
+						required: true,
+						message: '请输入密码',
+						trigger: 'blur,change'
+					}]
+				},
+				radioLabel: "登录同意《用户协议》和《隐私政策》",
+				value: '',
+			}
+		},
+		onReady() {
+			this.$refs.uForm.setRules(this.rules);
+		},
+		methods: {
+			loginFn() {
+				if (!this.form.key) {
+					this.$common.toast('请输入登录名');
+					return;
+				}
+				if (!this.form.password) {
+					this.$common.toast('请输入密码');
+					return;
+				}
+				let openid = uni.getStorageSync('openid');
+				if (!openid) {
+					openid = uni.getStorageSync('login_openid');
+				}
+				this.form.openid = openid
+				this.$api.doLogin(this.form).then(resp => {
+					let data = resp.data;
+				})
+			},
+			submit() {
+				
+				this.$refs.uForm.validate().then(res => {
+					this.$api.doLogin(this.form).then(resp => {
+						console.log(resp)
+						let data = resp.data;
+						if(resp.code==200){
+							let data = resp.data;
+							uni.$u.toast('登录成功，欢迎你'+data.appUser.name)
+							localStorage.setItem('token',data.tokenInfo.tokenValue)
+							uni.navigateTo({
+								url: '/pages/login/chooseRole'
+							});
+						}
+					})
+				}).catch(errors => {
+					uni.$u.toast('校验失败')
+				})
+			},
+			radioChange() {
+				console.log("1111")
+			},
+			toRegister() {
+				uni.navigateTo({
+					url: '/pages/login/register'
+				});
+			}
+		}
+	}
 </script>
 
 <style lang="scss">
-page {
-  background-color: #fff;
-}
+	page {
+		background-color: #fff;
+		padding: 30px;
+	}
+
+	.remain {
+		margin: 40px 50px 0;
+		text-align: center;
+	}
+
+	.wel {
+		margin-top: 10px;
+	}
 
-.l-topbox {
-  //background-color: #0080ff;
-  height: 400rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  //border-radius: 0 0 30rpx 30rpx;
-  margin-bottom: 50rpx;
-  background-image: url(../../static/login-bg.png);
-  background-size: 100% 100%;
+	.form {
+		// margin: 0 30px;
+		height: 200px;
+		// display: flex;
+		// align-items: center;
+		// justify-content: center;
+	}
 
-  text {
-    font-size: 50rpx;
-    font-weight: bold;
-    color: #fff;
-  }
-}
+	.form-input {
+		width: 100%;
+		background-color: #E8E8E8;
+		border-radius: 5px;
+		margin-top: 5px;
+	}
 
-@import '@/common/common.scss';
-.box {
-  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
-  background-color: #fff;
-  box-sizing: border-box;
-  margin: 60rpx;
-  margin-top: -150rpx;
-  width: auto;
-  border-radius: 10rpx;
-}
+	.btn {
+		margin: 25px 10px;
+	}
 
-.common-btn {
-  margin: 100rpx 60rpx;
-  width: auto;
-  height: 98rpx;
-  box-shadow: 0 30rpx 30rpx -15rpx rgba(0, 128, 255, 0.2);
-}
-</style>
+	.tip {
+		margin-top: 30px;
+		text-align: center;
+		font-size: 14px;
+	}
+</style>

pages/login/register.vue

@@ -0,0 +1,210 @@
+<template>
+	<view>
+		<navigation-bar background-color="#fff" front-color="#000000" />
+		<view class="remain">
+			<h1>欢迎注册</h1>
+			<view class="wel">请注册您的账号</view>
+		</view>
+		<view class="form">
+			<u-form :model="form" ref="uForm" label-width="100px" label-position="top">
+				<u-form-item label="手机号" prop="phone">
+					<view class="form-input">
+						<u-input v-model="form.phone" type="number" border="surround" maxlength='11'
+							placeholder='请输入手机号码' :clearable='false' />
+					</view>
+				</u-form-item>
+				<u-form-item label="选择你的身份" prop="type">
+					<view class="form-input" @click="show=true" >
+						<u-input v-model="form.type" type="text"
+							placeholder='请选择你的身份' :clearable='false' disabled />
+					<u-picker :show="show" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker>
+					</view>
+				</u-form-item>
+				<u-form-item label="验证码" prop="smsCode">
+					<view class="form-input">
+						<view class="u-demo-block__content">
+							<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
+							<!-- #ifndef APP-NVUE -->
+							<u-input placeholder="请输入验证码">
+								<!-- #endif -->
+								<!-- #ifdef APP-NVUE -->
+								<u--input placeholder="请输入验证码">
+									<!-- #endif -->
+									<template slot="suffix">
+										<u-code ref="uCode" @change="codeChange" seconds="20"
+											changeText="X秒重新获取哈哈哈"></u-code>
+										<u-button @tap="getCode" :text="tips" type="error" size="mini"></u-button>
+									</template>
+									<!-- #ifndef APP-NVUE -->
+							</u-input>
+							<!-- #endif -->
+							<!-- #ifdef APP-NVUE -->
+							</u--input>
+							<!-- #endif -->
+						</view>
+					</view>
+				</u-form-item>
+				<u-form-item label="密码" prop="password">
+					<view class="form-input">
+						<u-input v-model="form.password" type="password" placeholder='请输入密码' :clearable='false' />
+					</view>
+				</u-form-item>
+				<u-form-item label="确认密码" prop="rePassword">
+					<view class="form-input">
+						<u-input v-model="form.rePassword" type="password" placeholder='请输入密码' :clearable='false' />
+					</view>
+				</u-form-item>
+			</u-form>
+			<view style="font-size: 13px;">忘记密码？</view>
+			<view class="btn">
+				<view style="margin-bottom: 10px;">
+					<u-radio-group v-model="value" :wrap="true">
+						<u-radio :label="radioLabel"></u-radio>
+					</u-radio-group>
+				</view>
+				<view>
+					<u-button type="error" shape="circle" text="注册" @click="submit()"></u-button>
+				</view>
+				<view class="tip" @click="toLogin()">已有账号，去登录</view>
+			</view>
+
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				form: {
+					phone: '',
+					smsCode: '',
+					password: '',
+					type: '',
+					nickName:'',
+					rePassword: '',
+				},
+				rules: {
+					phone: [{
+							required: true,
+							message: '请输入手机号',
+							trigger: 'blur,change'
+						},
+						{
+							validator: (rule, value, callback) => {
+								return uni.$u.test.mobile(value);
+							},
+							message: '手机号码不正确',
+							trigger: ['change', 'blur'],
+						}
+					],
+					password: [{
+						required: true,
+						message: '请输入密码',
+						trigger: 'blur,change'
+					}]
+				},
+				radioLabel: "登录同意《用户协议》和《隐私政策》",
+				tips: '获取验证码',
+				value: '',
+				columns: [
+					// ['边民', '经销商', '外籍商户','司机']
+					[1,2,3,4]
+				],
+				show: false
+			}
+		},
+		onReady() {
+			this.$refs.uForm.setRules(this.rules);
+		},
+		methods: {
+			getCode() {
+				if (this.$refs.uCode.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					setTimeout(() => {
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						uni.$u.toast('验证码已发送');
+						// 通知验证码组件内部开始倒计时
+						this.$refs.uCode.start();
+					}, 2000);
+				} else {
+					uni.$u.toast('倒计时结束后再发送');
+				}
+			},
+			submit() {
+				this.$refs.uForm.validate().then(res => {
+					this.$api.doRefister(this.form).then(res => {
+						console.log(res)
+						if(res.code==200){
+							uni.$u.toast('注册成功')
+							uni.navigateTo({
+								url: '/pages/login/login'
+							});
+						}
+					}).catch(err => {
+						console.log(err)
+					})
+				}).catch(errors => {
+					uni.$u.toast('注册失败')
+				})
+			},
+			radioChange() {
+				console.log("1111")
+			},
+			toLogin() {
+				uni.navigateTo({
+					url: '/pages/login/login'
+				});
+			},
+			changeHandler(e){
+				console.log(e)
+				this.form.type=e.value[0]
+			},
+			confirm(e) {
+				// console.log(e)
+				this.show=false
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #fff;
+		padding: 30px;
+	}
+
+	.remain {
+		margin: 50px 100px 0;
+		text-align: center;
+	}
+
+	.wel {
+		margin-top: 10px;
+	}
+
+	.form {
+		height: 200px;
+	}
+
+	.form-input {
+		width: 100%;
+		background-color: #E8E8E8;
+		border-radius: 5px;
+		margin-top: 5px;
+	}
+
+	.btn {
+		margin: 25px 10px;
+	}
+
+	.tip {
+		margin-top: 30px;
+		text-align: center;
+		font-size: 14px;
+	}
+</style>

pages/personal/personal.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

utils/request.js

@@ -1,4 +1,5 @@
-const server = 'http://127.0.0.1:8080';
+// const server = 'http://127.0.0.1:8080';
+const server = 'http://192.168.88.34:8080';
 
 
 
@@ -42,6 +43,7 @@ function postForm(url, data) {
 			'satoken': uni.getStorageSync('token')
 		}
 	}).then(data => {
+		console.log(url)
 		common.hidingLoading();
 		var [err, res] = data
 		if (err) {