[本时生活h5端]

pages/oil/setPassword.vue

@@ -0,0 +1,169 @@
+<template>
+    <view class="content">
+		<view class="campus-header">
+			<view class="logo">
+				<image src="@/static/img/campusLogin_logo.png" mode="aspectFill"></image>
+				<view class="title">设置新密码</view>
+			</view>
+			<image class="cover" src="@/static/img/campusLogin_back_01.png" mode="aspectFill"></image>
+		</view>
+        <view class="campus-cont">
+            <form @submit="forgetlogin">
+				<view class="campus-inputs">
+				    <input class="campus-form-input" type="password" placeholder="设置新的登录密码" name="password"></input>
+				</view>
+				<view class="campus-inputs">
+				    <input class="campus-form-input" type="password" placeholder="确认新的登录密码" name="newpassword"></input>
+				</view>
+				<button class="campus-form-btn" form-type="submit">找回</button>
+            </form>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { passSetup } from '@/apis/interfaces/auth'
+    export default {
+        data() {
+            return {
+            }
+        },
+        methods: {
+            // 立即登录
+            forgetlogin(e){
+                let newPass  = e.detail.value.newpassword || '',
+					password = e.detail.value.password || ''
+				
+				passSetup({
+					password: password,
+					password_confirmation: newPass
+				}).then(res => {
+					uni.showToast({
+						title: "密码重置成功",
+						icon : 'none'
+					})
+					uni.reLaunch({
+					    url: '/pages/oil/index'
+					})
+				}).catch(err =>{
+					uni.showToast({
+						title: err.message,
+						icon : 'none'
+					})
+				})
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+	.content{
+		min-height: 100vh;
+		background-image: linear-gradient(to top right, #cbaf7f, #fcf4cb);
+	}
+	.campus-cont{
+		padding: 40rpx 60rpx;
+		.campus-inputs{
+			position: relative;
+			padding-left: 30rpx;
+			padding-right: 30rpx;
+			background-image: linear-gradient(to right, #575a85, #252f4b);
+			height: 90rpx;
+			line-height: 90rpx;
+			border-radius: 45rpx;
+			margin-bottom: 30rpx;
+			&.inputs-code{
+				padding-right: 280rpx;
+				.campus-form-code{
+					width: 260rpx;
+					position: absolute;
+					top: 0;
+					right: 0;
+					padding: 0;
+					margin: 0;
+					background-color: transparent;
+					font-size: 30rpx;
+					height: 90rpx;
+					line-height: 90rpx;
+					color: white;
+					&::after{
+						border: none;
+					}
+					&[disabled]{
+						color: rgba($color: white, $alpha: .5);
+					}
+				}
+			}
+		}
+		.campus-form-icon{
+			position: absolute;
+			left: 26rpx;
+			top: 26rpx;
+			width: 38rpx;
+			height: 38rpx;
+		}
+		.campus-form-input{
+			height: 90rpx;
+			color: white;
+			font-size: 32rpx;
+		}
+		
+		.resPassword{
+			text-align: right;
+			font-size: 28rpx;
+		}
+		
+		.campus-form-btn{
+			margin-top: 100rpx;
+			width: 100%;
+			height: 90rpx;
+			line-height: 90rpx;
+			padding: 0;
+			border-radius: 45rpx;
+			background-image: linear-gradient(to right, #575a85, #252f4b);
+			font-size: 32rpx;
+			color: white;
+		}
+		.login-box{
+			display: flex;
+			justify-content: space-between;
+			font-size: 30rpx;
+			margin-top: 100rpx;
+			view{
+				color: #28314e;
+			}
+		}
+	}
+	.campus-header{
+		width: 100%;
+		padding-top: 70%;
+		position: relative;
+		.cover{
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 1;
+		}
+		.logo{
+			position: absolute;
+			bottom: 80rpx;
+			width: 100%;
+			z-index: 2;
+			text-align: center;
+			image{
+				margin-top: 20%;
+				width: 160rpx;
+				height: 160rpx;
+				vertical-align: top;
+				margin-bottom: 30rpx;
+			}
+			.title{
+				font-weight: bold;
+				color: white;
+				font-size: 40rpx;
+			}
+		}
+	}
+</style>