From 604bd0a696f070bddfbc74c9ec16beac4a041c66 Mon Sep 17 00:00:00 2001
From: chenkun <3289431190@qq.com>
Date: Fri, 13 Sep 2024 01:53:31 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E5=AF=86=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/bottom/bottomBtn.vue                    |  48 ++-
 pages.json                                         |   3 +
 pages/index/center.vue                             |  10 +-
 .../auth/loginAndRegisterAndForgetPassword.vue     | 401 +++++++++++++++++++++
 pages_order/order/refundsOrExchange.vue            |   7 +-
 static/image/center/11.svg                         |   1 +
 6 files changed, 444 insertions(+), 26 deletions(-)
 create mode 100644 pages_order/auth/loginAndRegisterAndForgetPassword.vue
 create mode 100644 static/image/center/11.svg

diff --git a/components/bottom/bottomBtn.vue b/components/bottom/bottomBtn.vue
index 8d1b9f5..eb9ddf1 100644
--- a/components/bottom/bottomBtn.vue
+++ b/components/bottom/bottomBtn.vue
@@ -1,7 +1,13 @@
 <template>
-	<view class="container" @click="$emit('confirm')">
-		<button 
-		:style="{
+	<view @click="$emit('confirm')" :style="{ 
+      position: 'fixed', 
+      display: 'flex', 
+      justifyContent: 'center', 
+      alignItems: 'center', 
+      width: '100vw', 
+      bottom: bottom  
+    }">
+		<button :style="{
 			     color: color,
 			     backgroundColor: backgroundColor,
 			     fontSize: fontSize,
@@ -24,23 +30,26 @@
 				default: '#FFFFFF' // 设置默认背景颜色
 			},
 			fontSize: {
-				default: '14px' // 设置默认字体大小
+				default: '36rpx' // 设置默认字体大小
 			},
 			text: {
 				default: '按钮' // 设置默认文本内容
 			},
 			width: {
-				default: '100px' // 设置默认宽度
+				default: '150rpx' // 设置默认宽度
 			},
 			height: {
-				default: '200rpx' // 设置默认高度
+				default: '60rpx' // 设置默认高度
 			},
 			borderRadius: {
-				default: '20rpx' // 设置默认高度
+				default: '40rpx' // 设置默认高度
 			},
-			
+			bottom: {
+				default: '40rpx' // 设置默认距离底部高度
+			},
+
 		},
- 
+
 		data() {
 			return {
 
@@ -53,17 +62,16 @@
 </script>
 
 <style scoped lang="less">
-	.container {
-		position: fixed;
-		bottom: 50rpx;
-		display: flex;
-		justify-content: center;
-		/* 水平居中 */
-		align-items: center;
-		/* 垂直居中 */
-		width: 100%;
-		/* 使容器宽度覆盖整个屏幕 */
-	}
+	// .container {
+	// 	position: fixed;
+	// 	display: flex;
+	// 	justify-content: center;
+	// 	/* 水平居中 */
+	// 	align-items: center;
+	// 	/* 垂直居中 */
+	// 	width: 100%;
+	// 	/* 使容器宽度覆盖整个屏幕 */
+	// }
 
 	button {
 		display: flex;
diff --git a/pages.json b/pages.json
index 4fce5ac..42e5874 100644
--- a/pages.json
+++ b/pages.json
@@ -61,6 +61,9 @@
 			},
 			{
 				"path": "auth/wxUserInfo"
+			},
+			{
+				"path": "auth/loginAndRegisterAndForgetPassword"
 			}
 		]
 	}],
diff --git a/pages/index/center.vue b/pages/index/center.vue
index 916d00a..037fe9c 100644
--- a/pages/index/center.vue
+++ b/pages/index/center.vue
@@ -82,12 +82,12 @@
 						<text class="grid-text">订单管理</text>
 					</uv-grid-item>
 
-					<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+1)">
+					<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+0)">
 						<image class="image" src="/static/image/center/5.png" mode=""></image>
 						<text class="grid-text">换货</text>
 					</uv-grid-item>
 
-					<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+0)">
+					<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+1)">
 						<image class="image" src="/static/image/center/7.png" mode=""></image>
 						<text class="grid-text">退货</text>
 					</uv-grid-item>
@@ -111,7 +111,8 @@
 						<text class="grid-text">租赁车</text>
 					</uv-grid-item>
 
-					<uv-grid-item>
+					<uv-grid-item
+						@click="$utils.navigateTo('/pages_order/auth/loginAndRegisterAndForgetPassword?index='+2)">
 						<image class="image" src="/static/image/center/7.png" mode=""></image>
 						<text class="grid-text">申请成为水洗店</text>
 					</uv-grid-item>
@@ -162,8 +163,9 @@
 					height: '60rpx',
 					background: '#FFF',
 					color: '#000000',
-					fontSize: '34px',
+					fontSize: '36rpx',
 					borderRadius: '40rpx', //圆角
+
 					// nvue中必须是下方的写法
 					'border-top-right-radius': '40rpx',
 					'border-bottom-left-radius': '40rpx',
diff --git a/pages_order/auth/loginAndRegisterAndForgetPassword.vue b/pages_order/auth/loginAndRegisterAndForgetPassword.vue
new file mode 100644
index 0000000..a9fbf75
--- /dev/null
+++ b/pages_order/auth/loginAndRegisterAndForgetPassword.vue
@@ -0,0 +1,401 @@
+<template>
+	<view class="refundsOrExchange">
+		<navbar :title="titleList[titleIndex]" leftClick @leftClick="$utils.navigateBack" />
+
+		<view class="frame">
+			<!-- 登录和注册 -->
+			<view class="loginRegister" v-if='titleIndex!=2'>
+				<!-- 标题 -->
+				<view class="title">{{title}}</view>
+
+				<!-- 头像 -->
+				<view class="userIamge">
+					<view>
+						<img src="../../static/image/center/11.svg" alt="" style="width: 100%;height: 100%;">
+					</view>
+				</view>
+
+				<!-- 用户名&密码&隐私条款 -->
+				<view class="form">
+					<view>
+						<uv-input v-model="form.userName" placeholder="请输入手机号/用户/邮箱" border="surround" shape='circle'
+							clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
+					</view>
+					<view>
+						<uv-input v-model="form.password" password placeholder="请输入密码" border="surround" shape='circle'
+							clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
+					</view>
+					<view>
+						<uv-checkbox-group v-model="form.checkboxValue" shape="circle">
+							<view class="content">
+								<view style="display: flex;">
+									<uv-checkbox size="30rpx" :name="1"></uv-checkbox>
+									请你阅读并同意我们的<span style="color: #fd5100">《隐私条款》</span>和<span
+										style="color: #fd5100">《服务协议》</span>
+								</view>
+							</view>
+						</uv-checkbox-group>
+					</view>
+
+				</view>
+
+				<!-- 按钮 -->
+				<view class="btn">
+					<button class='a'>{{btnText}}</button>
+				</view>
+
+				<!-- tab -->
+				<view class="bottomTab">
+					<span :class="titleIndex==0 ? 'tabbarItemActive' : 'tabbarItemNoActive'"
+						@click='changePage(0)'>注册账号</span>
+					<span style="color: #9c9fa4">|</span>
+					<span :class="titleIndex==1 ? 'tabbarItemActive' : 'tabbarItemNoActive'"
+						@click='changePage(1)'>账号登录</span>
+					<span style="color: #9c9fa4">|</span>
+					<span :class="titleIndex==2 ? 'tabbarItemActive' : 'tabbarItemNoActive'"
+						@click='changePage(2)'>忘记密码</span>
+				</view>
+
+			</view>
+
+			<!-- 忘记密码 -->
+			<view class='forgetPassword' v-if='titleIndex==2'>
+				<!-- 标题 -->
+				<view class="title">{{title}}</view>
+
+				<!-- 表单 -->
+				<view class="form1">
+					<view class="userName">
+						<uv-input v-model="form1.userName" placeholder="请输入手机号/用户/邮箱" border="surround" shape='circle'
+							clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
+					</view>
+					<view class="code">
+						<view class="left">
+							<uv-input v-model="form1.code" placeholder="请输入验证码" border="surround" shape='circle'
+								clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
+						</view>
+						<view class="right">
+							<view>
+								<uv-toast ref="toast"></uv-toast>
+								<uv-code :seconds="seconds" @end="end" @start="start" ref="code"
+									@change="codeChange"></uv-code>
+								<uv-button @tap="getCode" iconSize='10rpx' color='#fd5100'
+									shape='circle'>{{tips}}</uv-button>
+							</view>
+						</view>
+					</view>
+					<view class="password1">
+						<uv-input v-model="form1.password1" placeholder="设置您的新密码(6到50个字符)" password clearable
+							border="surround" shape='circle' :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
+					</view>
+					<view class="password2">
+						<uv-input v-model="form1.password2" placeholder="重新确认密码" password clearable border="surround"
+							shape='circle' :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
+					</view>
+				</view>
+
+				<!-- 按钮 -->
+				<view class="btn">
+					<button class='a'>{{btnText}}</button>
+				</view>
+
+				<!-- tab -->
+				<view class="bottomTab">
+					<span :class="titleIndex==0 ? 'tabbarItemActive' : 'tabbarItemNoActive'"
+						@click='changePage(0)'>注册账号</span>
+					<span style="color: #9c9fa4">|</span>
+					<span :class="titleIndex==1 ? 'tabbarItemActive' : 'tabbarItemNoActive'"
+						@click='changePage(1)'>账号登录</span>
+					<span style="color: #9c9fa4">|</span>
+					<span :class="titleIndex==2 ? 'tabbarItemActive' : 'tabbarItemNoActive'"
+						@click='changePage(2)'>忘记密码</span>
+				</view>
+			</view>
+		</view>
+
+
+
+	</view>
+</template>
+
+<script>
+	import bottomBtn from "../../components/bottom/bottomBtn.vue"
+	export default {
+		components: {
+			bottomBtn
+		},
+		onLoad(option) {
+			this.titleIndex = option.index
+			this.title = option.index == 0 ? '注册' : option.index == 1 ? '登录' : '忘记密码'
+			this.btnText = option.index == 0 ? '注册' : option.index == 1 ? '登录' : '重置密码'
+		},
+		data() {
+			return {
+				titleIndex: 0,
+				titleList: ['注册账号', '账号密码登录', '重置密码'],
+				checkboxValue: ['apple'],
+				form: {
+					userName: '',
+					password: '',
+					checkboxValue: 'apple',
+				},
+				form1: {
+					userName: '',
+					code: '',
+					password1: '',
+					password2: '',
+				},
+
+				bottomBtnStyle: {
+					color: '#FFF',
+					backgroundColor: '#fd5100',
+					fontSize: '34rpx',
+
+					width: '400rpx',
+					height: '80rpx',
+					borderRadius: '100rpx',
+					bottom: '42%'
+				},
+				title: "", //标题
+				btnText: "", //按钮文字,
+				tips: '获取验证码',
+				seconds: 60,
+			}
+		},
+		methods: {
+
+			// 切换页面
+			changePage(index) {
+				this.titleIndex = index
+				this.title = index == 0 ? '注册' : index == 1 ? '登录' : '忘记密码'
+				this.btnText = index == 0 ? '注册' : index == 1 ? '登录' : '重置密码'
+			},
+
+			confirm() {
+
+			},
+			codeChange(text) {
+				this.tips = text;
+			},
+			getCode() {
+				if (this.$refs.code.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					setTimeout(() => {
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						uni.$uv.toast('验证码已发送');
+						// 通知验证码组件内部开始倒计时
+						this.$refs.code.start();
+					}, 2000);
+				} else {
+					uni.$uv.toast('请勿重复发送');
+				}
+			},
+			end() {
+				// uni.$uv.toast('倒计时结束');
+			},
+			start() {
+				// uni.$uv.toast('倒计时开始');
+			}
+		}
+	}
+</script>
+
+
+<style lang="scss" scoped>
+	* {
+		box-sizing: border-box;
+	}
+
+	.refundsOrExchange {
+		background-color: #FFF;
+		height: 100vh;
+
+		.frame {
+			background-color: #FFF;
+
+			.loginRegister {
+				display: flex;
+				flex-direction: column;
+				gap: 40rpx;
+
+				.title {
+					display: flex;
+					justify-content: center;
+					align-items: flex-end;
+					height: 10vh;
+					color: #000;
+					font-size: 40rpx;
+					font-weight: 700;
+				}
+
+				.userIamge {
+					display: flex;
+					justify-content: center;
+					height: 10vh;
+
+					>view:nth-of-type(1) {
+						width: 25%;
+						height: 100%;
+						border-radius: 50%;
+						overflow: hidden;
+					}
+				}
+
+				.form {
+					height: 12vh;
+
+					>view:nth-of-type(1) {
+						padding: 20rpx 100rpx;
+					}
+
+					>view:nth-of-type(2) {
+						padding: 0 100rpx;
+					}
+
+					>view:nth-of-type(3) {
+						display: flex;
+						padding: 30rpx 100rpx 0 100rpx;
+						font-size: 22rpx
+					}
+				}
+
+
+				.btn {
+					// height: 5vh;
+					display: flex;
+					justify-content: center;
+					margin: 50rpx 0 0 0;
+
+					.a {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						width: 70%;
+						height: 80rpx;
+						color: #FFF;
+						background-color: #fd5100;
+						border: 1px solid red;
+						border-radius: 100rpx;
+						font-size: 30rpx;
+					}
+				}
+
+
+
+				.bottomTab {
+					display: flex;
+					justify-content: space-between;
+					height: 10vh;
+					padding: 0 80rpx;
+
+					.tabbarItemActive {
+						color: #fd5100;
+					}
+
+					.tabbarItemNoActive {
+						color: #9c9fa4;
+					}
+				}
+
+			}
+
+			.forgetPassword {
+				padding: 100rpx 40rpx 0 40rpx;
+
+				.title {
+					display: flex;
+					justify-content: center;
+					align-items: flex-end;
+					height: 10vh;
+					color: #000;
+					font-size: 40rpx;
+					font-weight: 700;
+				}
+
+				.form1 {
+					display: flex;
+					flex-direction: column;
+					gap: 30rpx;
+					margin-top: 20rpx;
+					padding: 20rpx 80rpx;
+
+					.userName {
+						// padding: 20rpx 100	rpx;
+					}
+
+					.code {
+						display: flex;
+						width: 100%;
+
+						.left {
+							width: 55%;
+						}
+
+						.right {
+							width: 45%;
+							height: 100%;
+
+							>view:nth-of-type(1) {
+								display: flex;
+								justify-content: center;
+								align-items: center;
+								width: 100%;
+							}
+						}
+					}
+
+					.password1 {}
+
+					.password2 {}
+
+				}
+
+				.btn {
+					// height: 5vh;
+					display: flex;
+					justify-content: center;
+					margin: 30rpx 0 0 0;
+
+					.a {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						width: 70%;
+						height: 80rpx;
+						color: #FFF;
+						background-color: #fd5100;
+						border: 1px solid red;
+						border-radius: 100rpx;
+						font-size: 30rpx;
+
+					}
+				}
+
+
+				.bottomTab {
+					display: flex;
+					justify-content: space-between;
+					margin: 50rpx 0 0 0;
+					padding: 0 80rpx;
+
+					.tabbarItemActive {
+						color: #fd5100;
+					}
+
+					.tabbarItemNoActive {
+						color: #9c9fa4;
+					}
+				}
+
+
+
+			}
+		}
+
+
+	}
+</style>
\ No newline at end of file
diff --git a/pages_order/order/refundsOrExchange.vue b/pages_order/order/refundsOrExchange.vue
index efaf375..3bce4d8 100644
--- a/pages_order/order/refundsOrExchange.vue
+++ b/pages_order/order/refundsOrExchange.vue
@@ -78,7 +78,9 @@
     <!-- 底部按钮 -->
     <bottomBtn @confirm='confirm()' :color='bottomBtnStyle.color' :backgroundColor='bottomBtnStyle.backgroundColor'
                :fontSize='bottomBtnStyle.fontSize' :text='bottomBtnStyle.text' :width="bottomBtnStyle.width"
-               :height="bottomBtnStyle.height" :borderRadius='bottomBtnStyle.borderRadius'>
+               :height="bottomBtnStyle.height" :borderRadius='bottomBtnStyle.borderRadius'
+			   :bottom='bottomBtnStyle.bottom'
+			   >
     </bottomBtn>
 
     <!--商品选择-->
@@ -115,7 +117,8 @@ export default {
         text: '提交申请',
         width: '400rpx',
         height: '80rpx',
-        borderRadius: '100rpx'
+        borderRadius: '100rpx',
+        bottom: '40rpx'
       },
       commodityList: [
         {
diff --git a/static/image/center/11.svg b/static/image/center/11.svg
new file mode 100644
index 0000000..99950a8
--- /dev/null
+++ b/static/image/center/11.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726157567630" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6220" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M513.536 628.6336c101.6832 0 280.8832 38.7072 310.8864 193.7408 77.5168-77.5168 124.928-185.9584 124.928-305.0496 0-241.152-194.6624-435.8144-435.8144-435.8144S77.7216 277.0944 77.7216 517.2224c0 119.0912 47.4112 227.6352 124.928 306.0736 30.0032-154.9312 209.2032-194.6624 310.8864-194.6624z m0-439.7056c112.3328 0 204.3904 91.0336 204.3904 204.3904 0 112.3328-91.0336 204.3904-204.3904 204.3904a203.776 203.776 0 0 1-204.3904-204.3904c0.1024-112.4352 92.0576-204.3904 204.3904-204.3904z m0 0" fill="#cdcdcd" p-id="6221"></path><path d="M515.4816 1006.8992c-65.8432 0-129.8432-12.9024-189.952-38.4-58.1632-24.576-110.2848-59.8016-155.136-104.5504A485.56032 485.56032 0 0 1 65.8432 708.8128c-25.6-60.2112-38.5024-124.1088-38.5024-189.952 0-65.8432 12.9024-129.8432 38.4-189.952 24.576-58.1632 59.8016-110.2848 104.5504-155.136 44.8512-44.8512 96.9728-79.9744 155.136-104.5504C385.6384 43.6224 449.536 30.72 515.4816 30.72c65.8432 0 129.8432 12.9024 189.952 38.4 58.1632 24.576 110.2848 59.8016 155.136 104.5504 44.8512 44.8512 79.9744 96.9728 104.5504 155.136C990.6176 389.0176 1003.52 452.9152 1003.52 518.8608c0 65.8432-12.9024 129.8432-38.4 189.952-24.576 58.1632-59.8016 110.2848-104.5504 155.136a485.56032 485.56032 0 0 1-155.136 104.5504 484.39296 484.39296 0 0 1-189.952 38.4z m0-936.8576c-60.6208 0-119.3984 11.8784-174.6944 35.2256a447.76448 447.76448 0 0 0-142.6432 96.1536A444.42624 444.42624 0 0 0 101.9904 344.064a446.70976 446.70976 0 0 0-35.2256 174.6944c0 60.6208 11.8784 119.3984 35.2256 174.6944 22.6304 53.4528 54.9888 101.4784 96.1536 142.6432 41.1648 41.2672 89.1904 73.6256 142.6432 96.1536 55.296 23.3472 114.0736 35.2256 174.6944 35.2256 60.6208 0 119.3984-11.8784 174.6944-35.2256 53.4528-22.6304 101.4784-54.9888 142.6432-96.1536 41.2672-41.1648 73.6256-89.1904 96.1536-142.6432 23.3472-55.296 35.2256-114.0736 35.2256-174.6944 0-60.6208-11.8784-119.3984-35.2256-174.6944a447.76448 447.76448 0 0 0-96.1536-142.6432 444.42624 444.42624 0 0 0-142.6432-96.1536 447.44704 447.44704 0 0 0-174.6944-35.2256z m0 0" fill="#cdcdcd" p-id="6222"></path></svg>
\ No newline at end of file