[盘债计算器]

pages/index/perfect.vue

@@ -0,0 +1,180 @@
+<template>
+	<view class="content">
+		<image class="indexTop" src="/static/index_top.png" mode="scaleToFill"></image>
+		<view class="indexTips">
+			<view class="indexTips-name">完善个人信息</view>
+			<view class="indexTips-text">请您填写的以下内容</view>
+		</view>
+		<view class="indexCont">
+			<view class="indexCont-white">
+				<view class="item">
+					<view class="item-label">
+						<view class="item-label-name">
+							姓名：
+						</view>
+						<input class="item-label-text" type="text" v-model="name" placeholder="输入您的姓名" maxlength="4" />
+					</view>
+					<view class="item-label">
+						<view class="item-label-name">
+							手机号：
+						</view>
+						<input class="item-label-text" type="text" v-model="tel" placeholder="输入您的手机号" maxlength="11" />
+					</view>
+				</view>
+			</view>
+			
+			<view class="return" @click="submitTo" v-if="enjoin">提交信息</view>
+			<view class="return active" v-else>提交信息...</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { Info } from '@/apis/interfaces/index'
+	export default {
+		data() {
+			return {
+				name  : '',
+				tel   : '',
+				enjoin: true
+			}
+		},
+		created() {
+			
+		},
+		
+		methods: {
+			submitTo() {
+				Info({
+					mobileNo: this.tel,
+					nickname: this.name
+				}).then(res => {
+					this.enjoin = false
+					uni.showToast({
+						title: res,
+						icon: "none" 
+					})
+					this.$store.commit('setPassInfo', true)
+					
+					// 跳转首页
+					setTimeout(()=>{
+						uni.navigateTo({
+							url: '/pages/index/index'
+						})
+					},3000)
+				}).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon: "none" 
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.indexTop {
+		width: 100%;
+		height: 440rpx;
+	}
+	
+	.indexTips {
+		position: absolute;
+		top: 0;
+		left: 0;
+		padding: 60rpx 40rpx 0;
+		box-sizing: border-box;
+		color: #fff;
+	}
+	
+	.indexTips-name {
+		font-weight: 600;
+		font-size: 44rpx;
+	}
+	
+	.indexTips-text {
+		margin-top: 20rpx;
+		font-size: 28rpx;
+	}
+	
+	.indexCont {
+		width: 100%;
+		padding: 30rpx;
+		box-sizing: border-box;
+		position: absolute;
+		margin-top: 240rpx;
+		top: 0;
+		left: 0;
+	}
+	
+	.indexCont-white {
+		height: 100%;
+		background: white;
+		border-radius: 20rpx;
+		padding: 50rpx;
+		box-sizing: border-box;
+		margin-bottom: 30rpx;
+		position: relative;
+	}
+	.indexCont-white::after,
+	.indexCont-white::before {
+		position: absolute;
+		content: '';
+		background-color: rgba(255, 255, 255, .4);
+		left: 20rpx;
+		border-radius: 20rpx 20rpx 0 0;
+	}
+	.indexCont-white::after {
+		z-index: 2;
+		width: calc(100% - 40rpx);
+		left: 20rpx;
+		top: -25rpx;
+		height: 25px;
+	}
+	.indexCont-white::before {
+		z-index: 1;
+		width: calc(100% - 80rpx);
+		left: 40rpx;
+		top: -50rpx;
+		height: 50rpx;
+	}
+	
+	.item-label {
+		margin-bottom: 60rpx;
+	}
+	
+	.item-label:last-child {
+		margin-bottom: 0;
+	}
+	
+	.item-label-name {
+		font-weight: 600;
+		margin-bottom: 30rpx;
+	}
+	
+	.item-label-text {
+		background-color: #f7faff;
+		border-radius: 15rpx;
+		height: 90rpx;
+		line-height: 90rpx;
+		padding: 0 30rpx;
+	}
+	
+	.return {
+		margin-top: 90rpx;
+		width: 100%;
+		background-color: #fff;
+		border-radius: 80rpx;
+		line-height: 88rpx;
+		text-align: center;
+		color: #0c58d2;
+		border: 2rpx solid #0c58d2;
+	}
+	
+	.return.active {
+		border-color: #999;
+		color: #999;
+	}
+	
+</style>