|
@@ -5,8 +5,15 @@
|
|
|
<div class="form-list">
|
|
|
<div class="form-item">
|
|
|
<div class="item-label">姓名</div>
|
|
|
- <el-input v-model="form.actualName" class="item-right" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model.trim="form.actualName" class="item-right" placeholder="请输入中文"></el-input>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="warning" v-show="formItemShow[0]">
|
|
|
+ <img :src="warning" alt="">
|
|
|
+ <div class="warning-text">请填写姓名</div>
|
|
|
+ </div>
|
|
|
+ <div class="holder" v-show="!formItemShow[0]"></div>
|
|
|
+
|
|
|
<div class="form-item">
|
|
|
<div class="item-label">性别</div>
|
|
|
<el-select v-model="form.sex" placeholder="请选择">
|
|
@@ -14,10 +21,25 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="warning" v-show="formItemShow[1]">
|
|
|
+ <img :src="warning" alt="">
|
|
|
+ <div class="warning-text">请选择性别</div>
|
|
|
+ </div>
|
|
|
+ <div class="holder" v-show="!formItemShow[1]"></div>
|
|
|
+
|
|
|
<div class="form-item">
|
|
|
- <div class="item-label">年龄</div>
|
|
|
- <el-input v-model="form.age" class="item-right" placeholder="请输入"></el-input>
|
|
|
+ <div class="item-label">生日</div>
|
|
|
+ <el-date-picker v-model="form.birthday" prefix-icon="none" type="date" placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="warning" v-show="formItemShow[2]">
|
|
|
+ <img :src="warning" alt="">
|
|
|
+ <div class="warning-text">请填写年龄</div>
|
|
|
</div>
|
|
|
+ <div class="holder" v-show="!formItemShow[2]"></div>
|
|
|
+
|
|
|
<div class="form-item">
|
|
|
<div class="item-label">区域</div>
|
|
|
<el-select v-model="form.area" placeholder="请选择">
|
|
@@ -25,6 +47,13 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="warning" v-show="formItemShow[3]">
|
|
|
+ <img :src="warning" alt="">
|
|
|
+ <div class="warning-text">请选择区域</div>
|
|
|
+ </div>
|
|
|
+ <div class="holder" v-show="!formItemShow[3]"></div>
|
|
|
+
|
|
|
<div class="form-item">
|
|
|
<div class="item-label">学校</div>
|
|
|
<el-select v-model="form.school" filterable placeholder="请选择">
|
|
@@ -33,22 +62,34 @@
|
|
|
</el-select>
|
|
|
</div>
|
|
|
|
|
|
- <div class="warning">
|
|
|
+ <div class="warning" v-show="formItemShow[4]">
|
|
|
<img :src="warning" alt="">
|
|
|
<div class="warning-text">请填写学校完整名称</div>
|
|
|
</div>
|
|
|
+ <div class="holder" v-show="!formItemShow[4]"></div>
|
|
|
+
|
|
|
+ <div class="form-item" v-show="schoolList.some(item => item.value === form.school) && schoolList.find(item => item.value === form.school).label.includes('其他')">
|
|
|
+ <div class="item-label">其他</div>
|
|
|
+ <el-input v-model.trim="form.other" class="item-right" placeholder="请输入学校名称"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="holder" v-show="schoolList.some(item => item.value === form.school) && schoolList.find(item => item.value === form.school).label.includes('其他')"></div>
|
|
|
|
|
|
<div class="form-item">
|
|
|
<div class="item-label">年级</div>
|
|
|
- <el-input v-model="form.grade" class="item-right" placeholder="请输入"></el-input>
|
|
|
+ <el-select v-model="form.grade" placeholder="请选择">
|
|
|
+ <el-option v-for="item in gradeList" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
- <div class="form-item">
|
|
|
- <div class="item-label">其他</div>
|
|
|
- <el-input v-model="form.other" class="item-right" placeholder="请输入"></el-input>
|
|
|
+
|
|
|
+ <div class="warning" v-show="formItemShow[5]">
|
|
|
+ <img :src="warning" alt="">
|
|
|
+ <div class="warning-text">请选择年级</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="confim-button" @click="submit">Start Now !</div>
|
|
|
</div>
|
|
|
+ <div class="confim-button" @click="submit">Start Now !</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -58,16 +99,71 @@ export default {
|
|
|
return {
|
|
|
bg: require('../../public/img/info/bg.png'),
|
|
|
warning: require('../../public/img/info/warning.png'),
|
|
|
- form: {},
|
|
|
+ form: {
|
|
|
+ sex: 1,
|
|
|
+ school: ''
|
|
|
+ },
|
|
|
sexList: [{
|
|
|
label: '男',
|
|
|
- vaule: 1
|
|
|
+ value: 1
|
|
|
}, {
|
|
|
label: '女',
|
|
|
value: 2
|
|
|
}],
|
|
|
schoolList: [],
|
|
|
- areaList: []
|
|
|
+ areaList: [],
|
|
|
+ gradeList: [{
|
|
|
+ label: '一年级',
|
|
|
+ value: '一年级'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '二年级',
|
|
|
+ value: '二年级'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '三年级',
|
|
|
+ value: '三年级'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '四年级',
|
|
|
+ value: '四年级'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '五年级',
|
|
|
+ value: '五年级'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '六年级',
|
|
|
+ value: '六年级'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '七年级',
|
|
|
+ value: '七年级'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '八年级',
|
|
|
+ value: '八年级'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '九年级',
|
|
|
+ value: '九年级'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '高一',
|
|
|
+ value: '高一'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '高二',
|
|
|
+ value: '高二'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '高三',
|
|
|
+ value: '高三'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ formItemList: ['actualName', 'sex', 'birthday', 'area', 'school', 'grade'],
|
|
|
+ formItemShow: [false, false, false, false, false, false],
|
|
|
+ user: JSON.parse(localStorage.getItem('user')) || {}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -85,7 +181,11 @@ export default {
|
|
|
id: val
|
|
|
}
|
|
|
}).then(r => {
|
|
|
- this.schoolList = r.list.map(item => ({
|
|
|
+ let list = r.list
|
|
|
+ let index = list.findIndex(item => item.schoolName.includes('其他'))
|
|
|
+ let obj = list.splice(index, 1)
|
|
|
+ list.push(obj[0])
|
|
|
+ this.schoolList = list.map(item => ({
|
|
|
label: item.schoolName,
|
|
|
value: item.id
|
|
|
}))
|
|
@@ -93,21 +193,82 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
submit (e) {
|
|
|
- // let {actualName,age,area,grade,other,school} = this.data.form
|
|
|
- // let id = wx.getStorageSync('id')
|
|
|
- // imine.updateUser({reqdata:{actualName,age,area,grade,other,school,id}},r => {
|
|
|
- this.$router.push({
|
|
|
- name: 'contest'
|
|
|
+ let {
|
|
|
+ actualName,
|
|
|
+ sex,
|
|
|
+ birthday,
|
|
|
+ area,
|
|
|
+ grade,
|
|
|
+ other,
|
|
|
+ school
|
|
|
+ } = this.form
|
|
|
+ console.log(this.form)
|
|
|
+ this.formItemShow = this.formItemList.map(item => !this.form[item])
|
|
|
+ if (!actualName || !birthday || !area || !grade || !school || !sex) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$api.post('/user/updateUser', {
|
|
|
+ reqdata: {
|
|
|
+ actualName,
|
|
|
+ sex,
|
|
|
+ birthday: this.$utils.formatYMD(birthday),
|
|
|
+ area,
|
|
|
+ grade,
|
|
|
+ other,
|
|
|
+ school,
|
|
|
+ id: this.user.id
|
|
|
+ }
|
|
|
+ }).then(() => {
|
|
|
+ this.$api.post('/user/queryUserById', {
|
|
|
+ reqdata: {
|
|
|
+ id: this.user.id
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ let loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: 'Loading',
|
|
|
+ spinner: 'el-icon-loading',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ })
|
|
|
+ localStorage.setItem('user', JSON.stringify(res.object))
|
|
|
+ let time = setTimeout(() => {
|
|
|
+ location.reload()
|
|
|
+ loading.close()
|
|
|
+ clearTimeout(time)
|
|
|
+ }, 500)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ login () {
|
|
|
+ this.$api.get('/weChat/pc/login').then(res => {
|
|
|
+ location.href = res.object
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getUserInfo () {
|
|
|
+ let {
|
|
|
+ code,
|
|
|
+ state
|
|
|
+ } = this.$route.query
|
|
|
+ this.$api.get(`/weChat/callback/pc?code=${code}&state=${state}`).then(res => {
|
|
|
+ localStorage.setItem('user', JSON.stringify(res.object))
|
|
|
+ let time = setTimeout(() => {
|
|
|
+ location.href = location.origin + location.pathname
|
|
|
+ clearTimeout(time)
|
|
|
+ }, 500)
|
|
|
})
|
|
|
- // })
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
+ let user = localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))
|
|
|
+ user || this.login()
|
|
|
this.getareaList()
|
|
|
},
|
|
|
watch: {
|
|
|
'form.area' (val) {
|
|
|
this.getSchoolList(val)
|
|
|
+ },
|
|
|
+ 'form.actualName' (val) {
|
|
|
+ this.form.actualName = val.replace(/[^\u4E00-\u9FA5]/g, '')
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -117,6 +278,7 @@ export default {
|
|
|
.el-input__inner {
|
|
|
border: none;
|
|
|
width: 340px !important;
|
|
|
+ padding-left: 15px !important;
|
|
|
}
|
|
|
|
|
|
.el-input {
|
|
@@ -138,24 +300,24 @@ export default {
|
|
|
position: relative;
|
|
|
z-index: 9;
|
|
|
display: flex;
|
|
|
- // justify-content: center;
|
|
|
+ height: 700px;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
flex-direction: column;
|
|
|
padding-bottom: 20px;
|
|
|
+ padding-top: 300px;
|
|
|
|
|
|
.form-list {
|
|
|
- padding-top: 400px;
|
|
|
- margin-bottom: 90px;
|
|
|
|
|
|
.warning {
|
|
|
width: 440px;
|
|
|
display: flex;
|
|
|
- margin-left: 24px;
|
|
|
- margin-bottom: 20px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ padding-left: 20px;
|
|
|
|
|
|
- image {
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
+ >image {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
}
|
|
|
|
|
|
&-text {
|
|
@@ -174,7 +336,7 @@ export default {
|
|
|
border-radius: 100px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- margin-bottom: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
.item-label {
|
|
|
|
|
@@ -191,15 +353,21 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .confim-button {
|
|
|
- background-image: linear-gradient(to right, #6247FF, #57A8EF);
|
|
|
- width: 330px;
|
|
|
- height: 65px;
|
|
|
- border-radius: 60px;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 65px;
|
|
|
- font-size: 24px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.confim-button {
|
|
|
+ background-image: linear-gradient(to right, #6247FF, #57A8EF);
|
|
|
+ width: 330px;
|
|
|
+ height: 65px;
|
|
|
+ margin: 20px auto;
|
|
|
+ border-radius: 60px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 65px;
|
|
|
+ font-size: 24px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.holder {
|
|
|
+ height: 24px;
|
|
|
}
|
|
|
</style>
|