alhj/pages/bsinessadmin/setpassword.vue

<template>
	<view class="content">
		<view class="headbox">
			<view class="numbercat">账号 CD45555</view>
		</view>
		<view class="acountbox" >
			<view class="inacount">
				<text class="acoutitle">原密码</text>
				<input type="text" v-model="form.oldPassword" class="checkword" placeholder="至少6位数的字母数字组合的密码"
					placeholder-style="font-size:30rpx;color:#BEBDBB" password="true"/>
			</view>
			<view class="inacount">
				<text class="acoutitle">密码</text>
				<input type="text" v-model="form.newPassword" class="checkword" placeholder="至少6位数的字母数字组合的密码"
					placeholder-style="font-size:30rpx;color:#BEBDBB" password="true"/>
			</view>
			<view class="inacount">
				<text class="acoutitle">确认密码</text>
				<input type="text" v-model="form.password" class="checkword" placeholder="至少6位数的字母数字组合的密码"
					placeholder-style="font-size:30rpx;color:#BEBDBB" password="true"/>
			</view>
			<view class=" fonas">
				<text>*密码必须是6-16位的英文字母、数字组合</text>
				<text @click="forgetPwd" style="color: #D8AB5A;">忘记原密码？</text>
			</view>
		<view class="logininbtn" @click="suerChange">
			<text>确认修改</text>
		</view>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="center">
			<view class="forgetbox">
				<!-- <view class="ciclebg">
					<image src="../../static/img/forpwdbg.png" mode="aspectFill"></image>
				</view> -->
				<view class="keybox">
					<image src="../../static/img/foricon.png" mode="aspectFill"></image>
				</view>
				<text class="keytitle">忘记密码</text>
				<text class="remindtitle">请电联系管理员，进行密码确定</text>
				<view class="surebtn" @click="close()">好的</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				form: {
					oldPassword:'',
					newPassword:'',
					password:''
				},
			}
		},
		onLoad(o) {
			if (o.checked) {
				this.checked = o.checked
			}
		},
		methods: {
			close() {
				this.show = false
			},
			suerChange(){
				if(this.form.oldPassword.length==0){
					this.$toast("请输入至少6位数的字母数字组合的密码")
					return
				}
				if(this.form.newPassword.length<6){
					this.$toast("请输入至少6位数的字母数字组合的密码")
					return
				}
				if(this.form.password.length<6){
					this.$toast("请输入至少6位数的字母数字组合的密码")
					return
				}
				if(this.form.newPassword!=this.form.password){
					this.$toast("两次密码输入不一样")
					return
				}
				uni.showLoading()
				let form=this.form
				delete form.password
				uni.$u.http.post('/api/Supplier/password',form, {
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()
					this.form={
						oldPassword:'',
						newPassword:'',
						password:''
					}
					this.$toast("修改成功")
				}).catch((err) => {
					console.log(err)
					uni.hideLoading()
					this.$toast(err.msg)
				})
			},
			forgetPwd(){
				this.show = true
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.fonas{
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		padding-top: 20rpx;
	}
	.headbox {
		display: flex;
		justify-content: center;
		margin: 60rpx auto;
		.numbercat{
			padding: 15rpx 20rpx;
			border-radius: 50rpx;
			background-color: #FFF8E5;
			color: #1F242A;
			font-size: 28rpx;
		}
	}

	.acountbox {
		.upmsg{
			margin-top: 20rpx;
			background-color: #F6F6F6;
			width: 690rpx;
			height: 399rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.uppic{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 500rpx;
			height: 250rpx;
			background-image: url("@/static/img/upuer.png");
			background-size: 100%;
		}
		.inacount {
			flex: 1;
			display: flex;
			padding: 35rpx 20rpx;
			box-sizing: border-box;
			// width: 606rpx;
			margin-top: 40rpx;
			background-color: #F6F6F6;
			border-radius: 20rpx;
			font-size: 30rpx;
			color: #1F242A;

			input {
				width: 460rpx;
			}
		}

		.acoutitle {
			font-weight: 600;
		}

		.checkword {
			padding-left: 20rpx;
			color: #1F242A;
			font-size: 30rpx;
		}
	}

	.logininbtn {
		margin-top: 140rpx;
		// width: 606rpx;
		box-sizing: border-box;
		flex: 1;
		border-radius: 20rpx;
		border: 1rpx solid #BEBDBB;
		height: 100rpx;
		text-align: center;
		color: #BEBDBB;
		line-height: 100rpx;
		margin-bottom: 100rpx;
	}

	.acountall {
		display: flex;
		justify-content: flex-end;
		margin-top: 30rpx;
		font-size: 24rpx;
	}

	.checkag {
		margin-top: 200rpx;
		font-size: 28rpx;
		margin-bottom: 150rpx;
	}
	.forgetbox{
		width: 600rpx;
		height: 600rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		background-image: url("@/static/img/forpwdbg.png") ;
		background-repeat: no-repeat;
		background-position: right 0 top 0;
		background-size:367rpx 225rpx;
		.ciclebg{
			position: relative;
			right: 0;
			top: 0;
			width: 367rpx;
			height: 225rpx;
			
		}
		.keybox{
			margin-top: 84rpx;
			width: 196rpx;
			height: 161rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.keytitle{
			color: #1F242A;
			padding-top: 50rpx;
			font-size: 36rpx;
			font-weight: 600;
		}
		.remindtitle{
			color: #68625B;
			font-size: 28rpx;
			padding-top: 30rpx;
		}
		.surebtn{
			width: 314rpx;
			height: 84rpx;
			line-height: 84rpx;
			border-radius: 43rpx;
			background: linear-gradient(to right,#FFE1AD,#D8AB5A);
			color: #412900;
			margin-top: 86rpx;
			text-align: center;
		}
	}
	
</style>