180 lines
3.3 KiB
Vue
180 lines
3.3 KiB
Vue
<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> |