新增设置功能

components/creditCard.vue

@@ -66,7 +66,7 @@
 			</view>
 		</view>
 		<view class="publisher-box" v-if="isLogin && data.creditNo">
-			广州市住房和城乡建设委员会&nbsp;制
+			广州市住房和城乡建设委员会&nbsp;&nbsp;制
 		</view>
 	</view>
 </template>

pages.json

@@ -492,6 +492,66 @@
 					"titleNView": false
 				}
 			}
+		},
+		{
+			"path" : "pages/setting/setting",
+			"style" : {
+				"navigationBarTitleText": "设置",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": false
+				}
+			}
+		},
+		{
+			"path" : "pages/setting/updateTel/updateTel",
+			"style" : {
+				"navigationBarTitleText": "更换绑定手机号",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": false
+				}
+			}
+		},
+		{
+			"path" : "pages/setting/updatePwd/updatePwd",
+			"style" : {
+				"navigationBarTitleText": "修改密码",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": false
+				}
+			}
+		},
+		{
+			"path" : "pages/setting/infoExport/infoExport",
+			"style" : {
+				"navigationBarTitleText": "个人信息副本导出",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": false
+				}
+			}
+		},
+		{
+			"path" : "pages/setting/removeInfo/removeInfo",
+			"style" : {
+				"navigationBarTitleText": "删除个人信息",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": false
+				}
+			}
+		},
+		{
+			"path" : "pages/setting/cancelAccount/cancelAccount",
+			"style" : {
+				"navigationBarTitleText": "注销账号",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": false
+				}
+			}
 		}
 	],
 	"globalStyle": {

pages/personalCenter/personalCenter.vue

@@ -142,6 +142,17 @@
 					<view class="iconfont icon-chevron-right"></view>
 				</view>
 			</view>
+			<view class="menu-item-box" @click="onSheZhi()" v-if="false">
+				<view class="icon-box">
+					<view class="iconfont icon-shezhi"></view>
+				</view>
+				<view class="content-box">
+					设置
+				</view>
+				<view class="suffix-box">
+					<view class="iconfont icon-chevron-right"></view>
+				</view>
+			</view>
 			<view class="menu-item-box" @click="onLogout()">
 				<view class="icon-box">
 					<view class="iconfont icon-shezhi"></view>
@@ -397,6 +408,12 @@
 			url: '/pages/contactUs/contactUs'
 		})
 	}
+	// 点击-设置
+	function onSheZhi() {
+		uni.navigateTo({
+			url: '/pages/setting/setting'
+		})
+	}
 	// 点击-退出登录
 	function onLogout() {
 		if (!isLogin.value) {

pages/setting/cancelAccount/cancelAccount.vue

@@ -0,0 +1,99 @@
+<template>
+	<view class="container">
+		<view class="desc-box">
+			请您注意，注销申请一经提交，则无法撤销，请谨慎选择！
+		</view>
+		<view class="form-box">
+			<u-form :model="formData.form" ref="formRef" label-width="120" :label-style="{fontWeight: 'bold', fontSize: '26rpx'}">
+				<u-form-item prop="phone">
+					<view class="input-code">
+						<view class="input">
+							<u-input v-model="formData.form.phone" :border="true" type="text" placeholder="请输入绑定手机号"/>
+						</view>
+						<view class="btn">
+							<text class="form-item-text" @click="getCode">{{tips}}</text>
+						</view>
+					</view>
+				</u-form-item>
+				<u-form-item prop="code">
+					<u-input v-model="formData.form.code" :border="true"  type="text" placeholder="请输入验证码"/>
+				</u-form-item>
+			</u-form>
+		</view>
+		<view class="bottom-box">
+			<u-button type="primary" shape="circle" @click="onSubmit">确定注销</u-button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref, reactive } from 'vue'
+	import { onLoad, onReady } from '@dcloudio/uni-app'
+	
+	const formRef = ref()
+	const formData = reactive({
+		form: {
+			email: null
+		},
+		rules: {
+			email: [
+				{ 
+					required: true, 
+					message: '请输入电子邮箱', 
+					// 可以单个或者同时写两个触发验证方式 
+					trigger: 'blur',
+				}
+			]
+		},
+	})
+	const tips = ref('获取验证码') // 59秒重新获取
+	
+	function onSubmit() {
+		formRef.value.validate((valid) => {
+			if (valid) {
+				// 提交
+			}
+		})
+	}
+	
+	onReady(() => {
+		formRef.value.setRules(formData.rules)
+	})
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-bg-color;
+		padding: 20rpx;
+		
+		.desc-box {
+			text-indent: 2em;
+			line-height: 60rpx;
+			padding: 20rpx 0;
+			margin-bottom: 20rpx;
+		}
+		
+		.form-box {
+			padding: 20rpx 0;
+			
+			.input-code {
+				display: flex;
+				align-items: center;
+				gap: 20rpx;
+				.input {
+					width: 70%;
+				}
+				.btn {
+					width: 30%;
+					text-align: center;
+				}
+			}
+		}
+		.bottom-box {
+			margin-top: 50rpx;
+			padding: 0 50rpx;
+		}
+	}
+</style>

pages/setting/infoExport/infoExport.vue

@@ -0,0 +1,97 @@
+<template>
+	<view class="container">
+		<view class="desc-box">
+			请输入个人邮箱，个人信息副本将于5个工作日内完成导出，结果将发送至您的个人邮箱，每日限提交一次
+		</view>
+		<view class="form-box">
+			<u-form :model="formData.form" ref="formRef" label-width="120" :label-style="{fontWeight: 'bold', fontSize: '26rpx'}">
+				<u-form-item prop="email">
+					<u-input v-model="formData.form.email" :border="true"  type="text" placeholder="请输入电子邮箱"/>
+				</u-form-item>
+			</u-form>
+		</view>
+		<view class="bottom-box">
+			<u-button type="primary" shape="circle" @click="onSubmit">提交</u-button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref, reactive } from 'vue'
+	import { onLoad, onReady } from '@dcloudio/uni-app'
+	
+	const formRef = ref()
+	const formData = reactive({
+		form: {
+			phone: null,
+			code: null
+		},
+		rules: {
+			phone: [
+				{ 
+					required: true, 
+					message: '请输入绑定手机号', 
+					// 可以单个或者同时写两个触发验证方式 
+					trigger: 'blur',
+				}
+			],
+			code: [
+				{ 
+					required: true, 
+					message: '请输入验证码', 
+					// 可以单个或者同时写两个触发验证方式 
+					trigger: 'blur',
+				}
+			],
+		}
+	})
+	
+	function onSubmit() {
+		formRef.value.validate((valid) => {
+			if (valid) {
+				// 提交
+			}
+		})
+	}
+	
+	onReady(() => {
+		formRef.value.setRules(formData.rules)
+	})
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-bg-color;
+		padding: 20rpx;
+		
+		.desc-box {
+			text-indent: 2em;
+			line-height: 60rpx;
+			padding: 20rpx 0;
+			margin-bottom: 20rpx;
+		}
+		
+		.form-box {
+			padding: 20rpx 0;
+			
+			.input-code {
+				display: flex;
+				align-items: center;
+				gap: 20rpx;
+				.input {
+					width: 70%;
+				}
+				.btn {
+					width: 30%;
+					text-align: center;
+				}
+			}
+		}
+		.bottom-box {
+			margin-top: 50rpx;
+			padding: 0 50rpx;
+		}
+	}
+</style>

pages/setting/removeInfo/removeInfo.vue

@@ -0,0 +1,86 @@
+<template>
+	<view class="container">
+		<view class="desc-box">
+			请您勾选需要删除的内容，本小程序将在15个工作日内处理完毕您的申请
+		</view>
+		<view class="form-box">
+			<u-checkbox-group @change="checkboxGroupChange" shape="circle" wrap>
+				<u-checkbox
+					v-model="item.checked" 
+					v-for="(item, index) in checkOption" :key="index" 
+					:name="item.name"
+				>{{item.name}}</u-checkbox>
+			</u-checkbox-group>
+		</view>
+		<view class="bottom-box">
+			<u-button type="primary" shape="circle" @click="onSubmit">提交</u-button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref, reactive } from 'vue'
+	import { onLoad, onReady } from '@dcloudio/uni-app'
+	
+	const checkOption = ref([
+		{
+			name: '浏览记录',
+			checked: false,
+			disabled: false
+		},
+		{
+			name: '收藏',
+			checked: false,
+			disabled: false
+		},
+		{
+			name: '评论',
+			checked: false,
+			disabled: false
+		}
+	])
+	
+	function checkboxGroupChange() {
+		
+	}
+	
+	function onSubmit() {
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-bg-color;
+		padding: 20rpx;
+		
+		.desc-box {
+			text-indent: 2em;
+			line-height: 60rpx;
+			padding: 20rpx 0;
+			margin-bottom: 20rpx;
+		}
+		
+		.form-box {
+			padding: 20rpx 0;
+			
+			.input-code {
+				display: flex;
+				align-items: center;
+				gap: 20rpx;
+				.input {
+					width: 70%;
+				}
+				.btn {
+					width: 30%;
+					text-align: center;
+				}
+			}
+		}
+		.bottom-box {
+			margin-top: 50rpx;
+			padding: 0 50rpx;
+		}
+	}
+</style>

pages/setting/setting.vue

@@ -0,0 +1,107 @@
+<template>
+	<view class="container">
+		<view class="menu-item-box" @click="onUpdateTel">
+			<view class="lebal-box">
+				手机号 123xxxxxx4567
+			</view>
+			<view class="suffix-box">
+				<view class="desc">
+					更换绑定手机号
+				</view>
+				<view class="iconfont icon-chevron-right"></view>
+			</view>
+		</view>
+		<view class="menu-item-box" @click="onUpdatePwd">
+			<view class="lebal-box">
+				修改密码
+			</view>
+			<view class="suffix-box">
+				<view class="iconfont icon-chevron-right"></view>
+			</view>
+		</view>
+		<view class="menu-item-box" @click="onInfoExport">
+			<view class="lebal-box">
+				个人信息副本导出
+			</view>
+			<view class="suffix-box">
+				<view class="iconfont icon-chevron-right"></view>
+			</view>
+		</view>
+		<view class="menu-item-box" @click="onRemoveInfo">
+			<view class="lebal-box">
+				删除个人信息
+			</view>
+			<view class="suffix-box">
+				<view class="iconfont icon-chevron-right"></view>
+			</view>
+		</view>
+		<view class="menu-item-box" @click="onCancelAccount">
+			<view class="lebal-box">
+				账号注销
+			</view>
+			<view class="suffix-box">
+				<view class="iconfont icon-chevron-right"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	function onUpdateTel() {
+		uni.navigateTo({
+			url: '/pages/setting/updateTel/updateTel'
+		})
+	}
+	function onUpdatePwd() {
+		uni.navigateTo({
+			url: '/pages/setting/updatePwd/updatePwd'
+		})
+	}
+	function onInfoExport() {
+		uni.navigateTo({
+			url: '/pages/setting/infoExport/infoExport'
+		})
+	}
+	function onRemoveInfo() {
+		uni.navigateTo({
+			url: '/pages/setting/removeInfo/removeInfo'
+		})
+	}
+	function onCancelAccount() {
+		uni.navigateTo({
+			url: '/pages/setting/cancelAccount/cancelAccount'
+		})
+	}
+</script>
+
+<style lang="scss" scoped>
+.container {
+	height: 100vh;
+	width: 100vw;
+	padding: 0 20rpx;
+	padding-top: 20rpx;
+	background-color: $uni-bg-color;
+	.menu-item-box {
+		padding: 20rpx 30rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background-color: #fff;
+		margin-bottom: 50rpx;
+		border: 1px solid #E3E3E3;
+		border-radius: 10px;
+		.lebal-box {
+			width: 60%;
+		}
+		.suffix-box {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			text-align: end;
+		}
+		&:active {
+			background: #e0e0e0; /* 按下的背景色 */
+		}
+	}
+}
+</style>

pages/setting/updatePwd/updatePwd.vue

@@ -0,0 +1,110 @@
+<template>
+	<view class="container">
+		<view class="form-box">
+			<u-form :model="formData.form" ref="formRef" label-width="120" :label-style="{fontWeight: 'bold', fontSize: '26rpx'}">
+				<u-form-item prop="phone">
+					<view class="input-code">
+						<view class="input">
+							<u-input v-model="formData.form.phone" :border="true" type="text" placeholder="请输入绑定手机号"/>
+						</view>
+						<view class="btn">
+							<text class="form-item-text" @click="getCode">{{tips}}</text>
+						</view>
+					</view>
+				</u-form-item>
+				<u-form-item prop="code">
+					<u-input v-model="formData.form.code" :border="true"  type="text" placeholder="请输入验证码"/>
+				</u-form-item>
+				<u-form-item prop="password">
+					<u-input v-model="formData.form.password" :border="true"  type="text" placeholder="请输入新密码"/>
+				</u-form-item>
+			</u-form>
+		</view>
+		<view class="bottom-box">
+			<u-button type="primary" shape="circle" @click="onSubmit">立即修改并登录</u-button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref, reactive } from 'vue'
+	import { onLoad, onReady } from '@dcloudio/uni-app'
+	
+	const formRef = ref()
+	const formData = reactive({
+		form: {
+			phone: null,
+			code: null,
+			password: null
+		},
+		rules: {
+			phone: [
+				{ 
+					required: true, 
+					message: '请输入更换绑定手机号', 
+					// 可以单个或者同时写两个触发验证方式 
+					trigger: 'blur',
+				}
+			],
+			code: [
+				{ 
+					required: true, 
+					message: '请输入验证码', 
+					// 可以单个或者同时写两个触发验证方式 
+					trigger: 'blur',
+				}
+			],
+			password: [
+				{ 
+					required: true, 
+					message: '请输入新密码', 
+					// 可以单个或者同时写两个触发验证方式 
+					trigger: 'blur',
+				}
+			],
+		}
+	})
+	const tips = ref('获取验证码') // 59秒重新获取
+	
+	function onSubmit() {
+		formRef.value.validate((valid) => {
+			if (valid) {
+				// 提交
+			}
+		})
+	}
+	
+	onReady(() => {
+		formRef.value.setRules(formData.rules)
+	})
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-bg-color;
+		padding: 20rpx;
+		
+		.form-box {
+			padding: 20rpx 0;
+			
+			.input-code {
+				display: flex;
+				align-items: center;
+				gap: 20rpx;
+				.input {
+					width: 70%;
+				}
+				.btn {
+					width: 30%;
+					text-align: center;
+				}
+			}
+		}
+		.bottom-box {
+			margin-top: 50rpx;
+			padding: 0 50rpx;
+		}
+	}
+</style>

pages/setting/updateTel/updateTel.vue

@@ -0,0 +1,98 @@
+<template>
+	<view class="container">
+		<view class="form-box">
+			<u-form :model="formData.form" ref="formRef" label-width="120" :label-style="{fontWeight: 'bold', fontSize: '26rpx'}">
+				<u-form-item prop="phone">
+					<u-input v-model="formData.form.phone" :border="true"  type="text" placeholder="请输入更换绑定手机号"/>
+				</u-form-item>
+				<u-form-item prop="code">
+					<view class="input-code">
+						<view class="input">
+							<u-input v-model="formData.form.code" :border="true" type="text" placeholder="请输入验证码"/>
+						</view>
+						<view class="btn">
+							<text class="form-item-text" @click="getCode">{{tips}}</text>
+						</view>
+					</view>
+				</u-form-item>
+			</u-form>
+		</view>
+		<view class="bottom-box">
+			<u-button type="primary" shape="circle" @click="onSubmit">立即更换并登录</u-button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref, reactive } from 'vue'
+	import { onLoad, onReady } from '@dcloudio/uni-app'
+	
+	const formRef = ref()
+	const formData = reactive({
+		form: {
+			phone: null,
+			code: null
+		},
+		rules: {
+			phone: [
+				{ 
+					required: true, 
+					message: '请输入更换绑定手机号', 
+					// 可以单个或者同时写两个触发验证方式 
+					trigger: 'blur',
+				}
+			],
+			code: [
+				{ 
+					required: true, 
+					message: '请输入验证码', 
+					// 可以单个或者同时写两个触发验证方式 
+					trigger: 'blur',
+				}
+			],
+		}
+	})
+	const tips = ref('获取验证码') // 59秒重新获取
+	
+	function onSubmit() {
+		formRef.value.validate((valid) => {
+			if (valid) {
+				// 提交
+			}
+		})
+	}
+	
+	onReady(() => {
+		formRef.value.setRules(formData.rules)
+	})
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-bg-color;
+		padding: 20rpx;
+		
+		.form-box {
+			padding: 20rpx 0;
+			
+			.input-code {
+				display: flex;
+				align-items: center;
+				gap: 20rpx;
+				.input {
+					width: 70%;
+				}
+				.btn {
+					width: 30%;
+					text-align: center;
+				}
+			}
+		}
+		.bottom-box {
+			margin-top: 50rpx;
+			padding: 0 50rpx;
+		}
+	}
+</style>