feat：初始化拓客端

pages.json

@@ -5,18 +5,69 @@
 	},
 
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "首页",
+				"enablePullDownRefresh": false
+			}
+		},
+		{
+			"path" : "pages/my/my",
+			"style" :
+			{
+				"navigationBarTitleText" : "个人中心",
+				"navigationBarBackgroundColor": "#F7F7F7",
+				"backgroundColor": "#F7F7F7",
+				"enablePullDownRefresh" : false
+			}
+		},
+		{
+			"path" : "pages/forgetPassword/forgetPassword",
+			"style" :
+			{
+				"navigationBarTitleText" : "找回密码",
+				"enablePullDownRefresh" : false
+			}
+		},	{
+			"path": "pages/login/login",
+			"style": {
+				"navigationBarTitleText" : "登录",
+				"enablePullDownRefresh": false
+			}
+		},
+		{
+			"path" : "pages/register/register",
+			"style" :
+			{
+				"navigationBarTitleText" : "注册",
+				"enablePullDownRefresh" : false
 			}
 		}
 	],
+	"tabBar": {
+		"color": "#999999",
+		"selectedColor": "#333333",
+		"borderStyle": "white",
+		"backgroundColor": "#ffffff",
+		"list": [{
+			"pagePath": "pages/index/index",
+			"iconPath": "static/tabBarImg/dianzan.png",
+			"selectedIconPath": "static/tabBarImg/dianzan_cur.png",
+			"text": "首页"
+		}, {
+			"pagePath": "pages/my/my",
+			"iconPath": "static/tabBarImg/me.png",
+			"selectedIconPath": "static/tabBarImg/me_cur.png",
+			"text": "我的"
+		}]
+	},
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
+		//		"navigationBarTitleText": "加载中",
+		"navigationBarBackgroundColor": "#FFE05C",
+		"backgroundColor": "#FFE05C"
 	},
 	"uniIdRouter": {}
 }

pages/forgetPassword/forgetPassword.vue

@@ -0,0 +1,137 @@
+<template>
+	<view class="page">
+		<view :style="{'marginTop':'10rpx'}">
+			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
+
+				<u-form-item :labelWidth="80" label="手机号：" prop="username" ref="item1">
+					<u--input v-model="form.username"  placeholder="请输入手机号"></u--input>
+				</u-form-item>
+
+				<u-form-item :labelWidth="80" label="验证码：" prop="code" ref="item1">
+					<view class="inputCode">
+						<u--input v-model="form.code"  placeholder="请输入验证码" ></u--input>
+					</view>
+					<u-button slot="right" @tap="getCode" :text="tips" type="success" size="small" :disabled="disabled1"></u-button>
+				</u-form-item>
+
+				<u-form-item :labelWidth="80" label="新密码：" prop="newPassword" ref="item1">
+					<u--input v-model="form.newPassword" placeholder="请输入新密码" type="password"></u--input>
+				</u-form-item>
+
+				<u-form-item :labelWidth="80" label="确认密码：" prop="againPassword" ref="item1">
+					<u--input v-model="form.againPassword" placeholder="再次确认新密码" type="password"></u--input>
+				</u-form-item>
+
+			</u--form>
+
+			<view :style="{'marginTop':'100rpx'}">
+				<button class="customStyle"  @click="retrievePassword">提交</button>
+			</view>
+		</view>
+		<u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true" @end="disabled1 = false"></u-code>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				tips:'',
+				form:{
+					username:'',
+					code:'',
+					newPassword:'',
+					againPassword:''
+				},
+				rules: {
+					'username': {
+						type: 'string',
+						required: true,
+						min:11,
+						max: 11,
+						pattern:this.$phonePattern,
+						message: '请输入正确的电话号码',
+						trigger: ['blur', 'change']
+					},
+					'code': {
+						type: 'string',
+						required: true,
+						min:4,
+						max: 6,
+						message: '请输入验证码',
+						trigger: ['blur', 'change']
+					},
+					'newPassword': {
+						type: 'string',
+						min:6,
+						max: 16,
+						required: true,
+						message: '请输入6-18位密码',
+						trigger: ['blur', 'change']
+					},
+					'againPassword': {
+						type: 'string',
+						min:6,
+						max: 16,
+						required: true,
+						message: '请输入6-18位密码',
+						trigger: ['blur', 'change']
+					}
+				},
+			}
+		},
+		methods: {
+			retrievePassword(){
+				this.$refs.uForm.validate().then(res => {
+					this.$api.login.retrievePassword(this.form).then(res=>{
+						uni.showToast({
+							icon: 'success',
+							duration: 2000,
+							title: '修改成功，即将跳转登录页'
+						});
+						setTimeout(()=>{
+							this.logout()
+						},2000)
+
+					})
+				})
+			},
+			logout(){
+				this.$api.login.logout().then(res=>{
+					uni.clearStorageSync();
+					uni.navigateTo({
+						url:'/pages/login/login'
+					})
+				})
+			},
+			back(){
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+			codeChange(text) {
+				this.tips = text;
+			},
+			getCode() {
+				if (this.$refs.uCode.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					this.$api.service.getSmsCode({phonenumber: this.form.username}).then(res=>{
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						uni.$u.toast('验证码已发送');
+						// 通知验证码组件内部开始倒计时
+						this.$refs.uCode.start();
+					})
+				} else {
+					uni.$u.toast('倒计时结束后再发送');
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './index.rpx.css';
+</style>

pages/forgetPassword/index.rpx.css

@@ -0,0 +1,24 @@
+.page {
+	height: 100vh;
+	background-color: #f7f7f7;
+	padding: 0 32rpx;
+}
+.updatePasswordButton{
+	text-align: center;
+	background: #4cd964;
+	line-height: 80rpx;
+	border-radius: 10rpx;
+	color: #FFFFFF;
+	margin-top: 100rpx;
+}
+.customStyle{
+	background: #fff05c;
+	border: #fff05c;
+	border-radius: 10rpx;
+}
+.customStyle::after{
+	border: none;
+}
+.inputCode{
+	width: 350rpx;
+}

pages/index/index.vue

@@ -1,9 +1,6 @@
 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+	<view class="page">
+
 	</view>
 </template>
 
@@ -23,30 +20,6 @@
 	}
 </script>
 
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
+<style scoped lang="scss">
+	@import './index.rpx.css';
 </style>

pages/login/index.rpx.css

@@ -0,0 +1,57 @@
+.page {
+	padding: 0 56rpx;
+}
+.logTitle{
+	margin-top: 34rpx;
+}
+.log {
+	width: 320rpx;
+	height: 244rpx;
+	margin-top: 80rpx;
+}
+
+.welcome {
+	font-size: 40rpx;
+	font-weight: 600;
+	color: #333333;
+	line-height: 60rpx;
+}
+
+.form {
+	padding: 0 20rpx;
+	margin-top: 60rpx;
+}
+
+.formItem {
+	margin-top: 50rpx;
+}
+.forgetPassword{
+	font-size: 28rpx;
+	font-family: PingFangSC, PingFang SC;
+	font-weight: 400;
+	color: #999999;
+	line-height: 60rpx;
+	margin-top: 32rpx;
+	text-align: right;
+}
+
+.loginButton {
+	background: #FFE05C;
+	height: 90rpx;
+	border-radius: 45rpx;
+	text-align: center;
+	line-height: 90rpx;
+	font-size: 28rpx;
+	margin-top: 32rpx;
+}
+.register {
+	margin-top: 24rpx;
+	padding: 0 24rpx;
+}
+.register text{
+	background: #F7F7F7;
+	padding: 10rpx;
+	color: #007aff;
+	border-radius: 10rpx;
+}
+

pages/login/login.vue

@@ -0,0 +1,138 @@
+<template>
+	<view class="page">
+		<view class="logTitle">
+			<view class="welcome">
+				<text>HI，您好！</text>
+			</view>
+			<view class="welcome">
+				<text>欢迎登录娇骄儿拓客端</text>
+			</view>
+			<view class="flex-row justify-center">
+				<image src="../../static/logo.png" class="log"></image>
+			</view>
+		</view>
+
+		<view class="form">
+			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
+				<view class="formItem">
+					<u-form-item label="账号" prop="username" borderBottom ref="item1">
+						<u--input v-model="form.username" placeholder="请输入账号" border="none"></u--input>
+					</u-form-item>
+				</view>
+
+				<view class="formItem">
+					<u-form-item label="密码" prop="password" borderBottom ref="item1">
+						<u--input v-model="form.password" placeholder="请输入密码" border="none" type="password"></u--input>
+					</u-form-item>
+				</view>
+
+				<view class="forgetPassword flex-row justify-between ">
+					<view>
+						<checkbox-group @change="checkboxChange">
+							<checkbox :checked="savePassword"  color="#FFCC33" :style="{'transform':'scale(0.8)'}"/>
+							<text>记住账号密码</text>
+						</checkbox-group>
+					</view>
+					<view>
+						<text @click="forgetPassword">忘记密码?</text>
+					</view>
+				</view>
+
+				<view class="loginButton" @click="login">
+					<text>登录</text>
+				</view>
+
+			</u--form>
+
+		</view>
+		<view class="flex-row justify-end  register">
+			<text @click="goRegister">去注册-></text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+	export default {
+		data() {
+			return {
+				savePassword:false,
+				form: {
+					username: '',
+					password: ''
+				},
+				rules: {
+					'username': {
+						type: 'string',
+						required: true,
+						min: 11,
+						max: 11,
+						pattern:this.$phonePattern,
+						message: '请输入正确的电话号码',
+						trigger: ['blur', 'change']
+					},
+					'password': {
+						type: 'string',
+						required: true,
+						min: 6,
+						max: 18,
+						message: '请输入6-18位密码',
+						trigger: ['blur', 'change']
+					}
+				}
+
+			}
+		},
+		onShow(){
+			this.form.username = uni.getStorageSync('username')
+			this.form.password = uni.getStorageSync('password')
+			this.savePassword = uni.getStorageSync('savePassword')
+		},
+		methods: {
+
+			goRegister(){
+				uni.navigateTo({
+					url:'/pages/register/register'
+				})
+			},
+
+			forgetPassword(){
+				uni.navigateTo({
+					url:'/pages/forgetPassword/forgetPassword'
+				})
+			},
+			checkboxChange(e){
+				this.savePassword = !this.savePassword
+				console.log(this.savePassword)
+			},
+
+			login() {
+				this.$refs.uForm.validate().then(res => {
+
+					if (this.savePassword){
+						uni.setStorageSync('savePassword', this.savePassword)
+						uni.setStorageSync('username', this.form.username)
+						uni.setStorageSync('password', this.form.password)
+					}else {
+						uni.setStorageSync('savePassword', this.savePassword)
+						uni.removeStorageSync('username');
+						uni.removeStorageSync('password');
+					}
+
+					this.$api.login.techLogin(this.form).then(res => {
+						uni.setStorageSync('accessToken', res.data.data.access_token)
+						uni.removeStorageSync('storeId');
+						uni.removeStorageSync('storeName');
+						uni.switchTab({
+							url: "/pages/index/index"
+						})
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './index.rpx.css';
+</style>

pages/my/index.rpx.css

@@ -0,0 +1,33 @@
+.page {
+	background: #f7f7f7;
+	padding: 50rpx 32rpx;
+}
+
+.avatar{
+	width: 100rpx;
+	height: 100rpx;
+	padding: 4rpx;
+	border-radius: 8rpx;
+	background: white;
+}
+.avatar image{
+	width: 100rpx;
+	height: 100rpx;
+}
+.useMsg{
+	margin-left: 24rpx;
+}
+.name{
+	font-size: 28rpx;
+	font-weight: bold;
+}
+.tag{
+	font-size: 20rpx;
+	background: #4cd964;
+	margin-left: 24rpx;
+	padding: 2rpx 10rpx;
+	border-radius: 10rpx;
+}
+.phone{
+	font-size: 24rpx;
+}

pages/my/my.vue

@@ -0,0 +1,35 @@
+<template>
+	<view class="page">
+		<view class="flex-row use">
+			<view class="avatar">
+				<image :src="'/static/logo.png'"></image>
+			</view>
+			<view class="flex-col justify-around useMsg">
+				<view class="flex-row">
+					<text class="name">张辉</text>
+					<view class="tag">拓客经理</view>
+				</view>
+				<view>
+					<text class="phone">电话：17365000111</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './index.rpx.css';
+</style>

pages/register/index.rpx.css

@@ -0,0 +1,32 @@
+.page {
+	height: 100vh;
+	padding: 0 32rpx;
+}
+.updatePasswordButton{
+	text-align: center;
+	background: #4cd964;
+	line-height: 80rpx;
+	border-radius: 10rpx;
+	color: #FFFFFF;
+	margin-top: 100rpx;
+}
+.customStyle{
+	background: #fff05c;
+	border: #fff05c;
+	border-radius: 10rpx;
+}
+.customStyle::after{
+	border: none;
+}
+.inputCode{
+	width: 350rpx;
+}
+.register {
+	margin-top: 24rpx;
+}
+.register text{
+	background: #F7F7F7;
+	padding: 10rpx;
+	color: #007aff;
+	border-radius: 10rpx;
+}

pages/register/register.vue

@@ -0,0 +1,206 @@
+<template>
+	<view class="page">
+		<view :style="{'marginTop':'10rpx'}">
+			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
+				<u-form-item :labelWidth="80" label="姓名：" borderBottom prop="name" ref="item1">
+					<u--input v-model="form.username"  placeholder="请输入姓名" border="none"></u--input>
+				</u-form-item>
+
+				<u-form-item :labelWidth="80" label="性别：" borderBottom prop="sex" ref="item1" @click="showSex = true">
+					<u--input v-model="form.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"></u--input>
+					<u-icon slot="right" name="arrow-right"></u-icon>
+				</u-form-item>
+
+				<u-form-item :labelWidth="80" label="生日：" borderBottom prop="sex" ref="item1" @click="showBirthday = true">
+					<u--input v-model="form.sex" disabled disabledColor="#ffffff" placeholder="请选择生日" border="none"></u--input>
+					<u-icon slot="right" name="arrow-right"></u-icon>
+				</u-form-item>
+
+				<u-form-item :labelWidth="80" label="手机号：" borderBottom prop="username" ref="item1">
+					<u--input v-model="form.username"  placeholder="请输入手机号" border="none"></u--input>
+				</u-form-item>
+
+				<u-form-item :labelWidth="80" label="验证码：" borderBottom prop="code" ref="item1">
+					<view class="inputCode">
+						<u--input v-model="form.code"  placeholder="请输入验证码" border="none"></u--input>
+					</view>
+					<u-button slot="right" @tap="getCode" :text="tips" type="success" size="small" :disabled="disabled1"></u-button>
+				</u-form-item>
+
+				<u-form-item :labelWidth="80" label="密码：" borderBottom prop="newPassword" ref="item1">
+					<u--input v-model="form.newPassword" placeholder="请输入密码" type="password" border="none"></u--input>
+				</u-form-item>
+
+				<u-form-item :labelWidth="80" label="确认密码：" borderBottom prop="againPassword" ref="item1">
+					<u--input v-model="form.againPassword" placeholder="再次确认密码" type="password" border="none"></u--input>
+				</u-form-item>
+
+			</u--form>
+
+			<view :style="{'marginTop':'100rpx'}">
+				<button class="customStyle"  @click="retrievePassword">提交</button>
+			</view>
+
+			<view class="flex-row justify-end  register">
+				<text @click="gologin">去登录-></text>
+			</view>
+
+		</view>
+		<u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true" @end="disabled1 = false"></u-code>
+		<u-action-sheet
+				:show="showSex"
+				:actions="actions"
+				title="请选择性别"
+				@close="showSex = false"
+				@select="sexSelect">
+		</u-action-sheet>
+		<u-datetime-picker
+				:show="showBirthday"
+				:value="birthday"
+				mode="date"
+				closeOnClickOverlay
+				@confirm="birthdayConfirm"
+				@cancel="birthdayClose"
+				@close="birthdayClose"
+		></u-datetime-picker>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				showBirthday:false,
+				showSex:false,
+				birthday: Number(new Date()),
+				actions: [{
+					name: '男',
+					value:'1'
+					},
+					{
+						name: '女',
+						value:'0'
+					},{
+						name: '保密',
+						value:'2'
+					}
+				],
+				tips:'',
+				form:{
+					username:'',
+					code:'',
+					newPassword:'',
+					againPassword:''
+				},
+				rules: {
+					'username': {
+						type: 'string',
+						required: true,
+						min:11,
+						max: 11,
+						pattern:this.$phonePattern,
+						message: '请输入正确的电话号码',
+						trigger: ['blur', 'change']
+					},
+					'code': {
+						type: 'string',
+						required: true,
+						min:4,
+						max: 6,
+						message: '请输入验证码',
+						trigger: ['blur', 'change']
+					},
+					'newPassword': {
+						type: 'string',
+						min:6,
+						max: 16,
+						required: true,
+						message: '请输入6-18位密码',
+						trigger: ['blur', 'change']
+					},
+					'againPassword': {
+						type: 'string',
+						min:6,
+						max: 16,
+						required: true,
+						message: '请输入6-18位密码',
+						trigger: ['blur', 'change']
+					}
+				},
+			}
+		},
+		methods: {
+			gologin(){
+				uni.navigateTo({
+					url:'/pages/login/login'
+				})
+			},
+
+			birthdayClose() {
+				this.showBirthday = false
+				// this.$refs.form1.validateField('userInfo.birthday')
+			},
+			birthdayConfirm(e) {
+				console.log(e)
+				this.showBirthday = false
+				this.form.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
+				// this.$refs.form1.validateField('userInfo.birthday')
+			},
+
+			sexSelect(e) {
+				console.log(e)
+			},
+			retrievePassword(){
+				this.$refs.uForm.validate().then(res => {
+					this.$api.login.retrievePassword(this.form).then(res=>{
+						uni.showToast({
+							icon: 'success',
+							duration: 2000,
+							title: '修改成功，即将跳转登录页'
+						});
+						setTimeout(()=>{
+							this.logout()
+						},2000)
+
+					})
+				})
+			},
+			logout(){
+				this.$api.login.logout().then(res=>{
+					uni.clearStorageSync();
+					uni.navigateTo({
+						url:'/pages/login/login'
+					})
+				})
+			},
+			back(){
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+			codeChange(text) {
+				this.tips = text;
+			},
+			getCode() {
+				if (this.$refs.uCode.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					this.$api.service.getSmsCode({phonenumber: this.form.username}).then(res=>{
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						uni.$u.toast('验证码已发送');
+						// 通知验证码组件内部开始倒计时
+						this.$refs.uCode.start();
+					})
+				} else {
+					uni.$u.toast('倒计时结束后再发送');
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './index.rpx.css';
+</style>