energy-front/pages/home/updatepassword.vue

<template>
	<view class="normal-login-container">
		<headerTopsTips></headerTopsTips>
		<uni-nav-bar left-icon="left" :title="title_change" backgroundColor="#e6eafa" @clickLeft="handlegoback" />
		<!-- <view class="logo-content">
			<text class="title">{{title_change}}</text>
		</view> -->
		<view class="login-form-content">
			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model="loginForm.password" class="input" type="number" :placeholder="type_placeholder"
					maxlength="11" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="loginForm.code" class="input" placeholder="请输入验证码" maxlength="20" />
				<view :class="iscode == false? 'getCode': 'getCode dis_code' " @click="handleCode">
					{{getCodes}}
				</view>
			</view>

			<view class="action-btn">
				<button @click="handlelogin_pass" class="login-btn cu-btn block lg">确认修改</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import headerTopsTips from '@/pages/components/header_tops_tips.vue'
	import {
		baseUrl,
		apiPath
	} from '@/sheep/config';
	import sheep from '@/sheep';
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// import loginApi from '@/sheep/api/login/login';
	const loginForm = ref({
		code: '',
		password: ''
	})
	const title_change = ref('修改绑定手机号')
	const type_placeholder = ref('请输入新手机号')
	const getCodes = ref('获取验证码')
	const iscode = ref(false)
	const phone = ref('')
	const type_options = ref(1)
	onLoad((options) => {
		let str = JSON.parse(options.date)
		console.log(options, 'options')
		type_options.value = options.type
		phone.value = str.mobile
		if (options.type == 2) {
			title_change.value = '修改密码'
			type_placeholder.value = '请输入新密码'
		}
	})


	function handlelogin_pass() {
		if (type_options.value == 1) {
			uni.request({
				url: `${baseUrl + apiPath}/member/user/update-mobile`,
				method: 'PUT',
				data: {
					"code": loginForm.value.code,
					"mobile": loginForm.value.password
				},
				header: {
					'tenant-id': 1, //自定义请求头信息
					"Authorization": uni.getStorageSync('token')
				},
				success: (res) => {
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'success',
							title: '修改成功'
						})
						uni.removeStorageSync('token')
						uni.reLaunch({
							url: '/pages/subpackages/login'
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'error'
						})
						uni.navigateBack()
					}
				},
				fail: (error) => {
					console.log(error, 'error')
				}
			});
		} else {
			uni.request({
				url: `${baseUrl + apiPath}/member/user/update-password`,
				method: 'PUT',
				data: {
					"code": loginForm.value.code,
					"password": loginForm.value.password
				},
				header: {
					'tenant-id': 1, //自定义请求头信息
					"Authorization": uni.getStorageSync('token')
				},
				success: (res) => {
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'success',
							title: '修改成功'
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'error'
						})
						uni.navigateBack()
					}
				},
				fail: (error) => {
					console.log(error, 'error')
				}
			});
		}

	}

	function handleCode() {
		// console.log(loginForm.value.username,'loginform')
		if (iscode.value == false && loginForm.value.phone != '') {
			uni.request({
				url: `${baseUrl + apiPath}/member/auth/send-sms-code`, //仅为示例，并非真实接口地址。
				method: 'POST',
				data: {
					"mobile": type_options.value == 1 ? loginForm.value.password : phone.value,
					"scene": type_options.value == 1 ? '2' : '3'
				},

				header: {
					'tenant-id': 1, //自定义请求头信息
					"Authorization": uni.getStorageSync('token')
				},
				success: (res) => {
					// console.log(res, 'res')
					if (res.data.code == 0) {
						iscode.value = true
						let num = 10
						const timer = setInterval(() => {
							num--
							getCodes.value = num + 's'
							if (num == 0) {
								clearInterval(timer)
								getCodes.value = '获取验证码'
								iscode.value = false
							}
						}, 1000)
					} else {
						uni.showToast({
							icon: 'error',
							title: res.data.msg
						})
					}
				}
			});
		}
	}
	// 
	function handlegoback() {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.getCode {
		font-size: 12px;
		width: 300rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: #2caeff;
		// border-top-right-radius: 45rpx;
		// border-bottom-right-radius: 45rpx;
		// border-radius: 45rpx;
		color: #fff;
	}

	.dis_code {
		background: #ccc !important;
	}

	.normal-login-container {
		width: 100%;
		background: #f6f6f6;
		height: 100vh;

		.logo-content {
			width: 100%;
			font-size: 12px;
			// text-align: center;
			padding-top: 15%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			// image {
			// 	border-radius: 4px;
			// }
			.imgs_bg {
				width: 100rpx;
				height: 100rpx;
				background: #b5b5b5;
			}

			.title {
				width: 80%;
				margin: 15rpx auto;
				font-size: 14px;
				text-align: center;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 0 auto;
			// margin-top: 15%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #fff;
				height: 90rpx;
				// border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 20px;
				line-height: 45px;
				background: #333;
				font-size: 14px;
				color: #fff;
			}

			.xieyi {
				color: #333;
				margin-top: 20px;

				>text {
					font-size: 12px;
				}
			}
		}

		.easyinput {
			width: 100%;
		}
	}

	.login-code-img {
		height: 45px;
	}
</style>