|
|
<template>
|
|
|
<page-meta
|
|
|
:page-style="`overflow:${
|
|
|
isShowRecommend
|
|
|
? 'hidden'
|
|
|
: 'visible'
|
|
|
};`"
|
|
|
></page-meta>
|
|
|
<view class="container safe-area-inset-bottom">
|
|
|
<image class="bkg" src="~@/static/me/wave.png" mode="widthFix"></image>
|
|
|
|
|
|
<view class="wrap">
|
|
|
<view class="card">
|
|
|
<u-form :model="form" ref="uForm" label-width="auto">
|
|
|
<u-form-item label="学生姓名" prop="name">
|
|
|
<u-input v-model="form.name" placeholder="请输入" input-align="right" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="性别" prop="sex">
|
|
|
<u-input type="select" v-model="form.sex" placeholder="请选择" input-align="right" @click="isShowSex = true"/>
|
|
|
</u-form-item>
|
|
|
<u-form-item label="中考年份" required prop="year">
|
|
|
<u-input type="select" v-model="form.year" placeholder="请选择" input-align="right" @click="isShowYear = true" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="民族" prop="nationality">
|
|
|
<u-input v-model="form.nationality" placeholder="请输入" input-align="right" />
|
|
|
</u-form-item>
|
|
|
<!-- <u-form-item label="所在城市" required prop="city">-->
|
|
|
<!-- <u-input type="select" v-model="form.city" placeholder="请选择" input-align="right" @click="regionType = 'city',isShowRegion = true" />-->
|
|
|
<!-- </u-form-item>-->
|
|
|
<u-form-item label="所在县区" required prop="area_id">
|
|
|
<u-input type="select" :value="formArea" placeholder="请选择" input-align="right" @click="isShowAreaSelect = true" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="所在学校" prop="school_id">
|
|
|
<u-input type="select" :value="form.school_name" placeholder="请输入" input-align="right" @click="isShowSchoolSelect = true" />
|
|
|
</u-form-item>
|
|
|
</u-form>
|
|
|
</view>
|
|
|
|
|
|
<view class="card">
|
|
|
<view class="card__title">成绩</view>
|
|
|
|
|
|
<view class="score">
|
|
|
<view class="score-row">
|
|
|
<view class="score-row__text">估分成绩：</view>
|
|
|
<u-input v-model="form.anticipate_score" style="width: 280rpx;" placeholder="输入估分成绩" input-align="center" border border-color="#e0e0e0" :height="50" :clearable="false"></u-input>
|
|
|
</view>
|
|
|
|
|
|
<view class="score-row">
|
|
|
<view class="score-row__text">成绩稳定性：</view>
|
|
|
|
|
|
<view class="my-radio-group">
|
|
|
<view class="my-radio" :class="form.is_stable ? 'my-radio--checked' : ''" @click="form.is_stable = 1">是</view>
|
|
|
<view class="my-radio" :class="!form.is_stable ? 'my-radio--checked' : ''" @click="form.is_stable = 0">否</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="score-row">
|
|
|
<view class="score-row__text">是否为裸分：</view>
|
|
|
|
|
|
<view class="my-radio-group">
|
|
|
<view class="my-radio" :class="form.is_bare ? 'my-radio--checked' : ''" @click="form.is_bare = 1">是</view>
|
|
|
<view class="my-radio" :class="!form.is_bare ? 'my-radio--checked' : ''" @click="form.is_bare = 0">否</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<u-button
|
|
|
shape="circle"
|
|
|
:custom-style="{
|
|
|
background: 'linear-gradient(to right, #2e63ef, #4186f2)',
|
|
|
height: '76rpx',
|
|
|
'line-height': '76rpx',
|
|
|
'color': '#fff',
|
|
|
'font-size': '33rpx',
|
|
|
'letter-spacing': '5rpx',
|
|
|
'width': '450rpx',
|
|
|
'margin': '130rpx auto 0'
|
|
|
}"
|
|
|
@click="submit">保存</u-button>
|
|
|
</view>
|
|
|
|
|
|
<u-select v-model="isShowSex" :list="sexList" @confirm="e => form.sex = e[0].value"></u-select>
|
|
|
<u-picker
|
|
|
mode="time"
|
|
|
v-model="isShowYear"
|
|
|
:params="{
|
|
|
year: true,
|
|
|
month: false,
|
|
|
day: false,
|
|
|
hour: false,
|
|
|
minute: false,
|
|
|
second: false
|
|
|
}"
|
|
|
@confirm="e => form.year = e.year"></u-picker>
|
|
|
<!-- <u-picker-->
|
|
|
<!-- mode="region"-->
|
|
|
<!-- v-model="isShowRegion"-->
|
|
|
<!-- :default-region="defaultRegion"-->
|
|
|
<!-- :params="regionParams"-->
|
|
|
<!-- @confirm="regionPick"></u-picker>-->
|
|
|
<u-select v-model="isShowSchoolSelect" mode="mutil-column-auto" :list="schoolList" @confirm="schoolListConfirm"></u-select>
|
|
|
|
|
|
<u-select v-model="isShowAreaSelect"
|
|
|
:list="areaList"
|
|
|
@confirm="areaConfirm"></u-select>
|
|
|
|
|
|
<u-popup v-model="isShowRecommend" border-radius="10" mode="bottom" safe-area-inset-bottom length="90%" closeable :custom-style="{ 'background': '#eaf9fe' }">
|
|
|
<view>
|
|
|
<view class="recommend-panel" v-for="(value, key) in {top:'冲',steady:'稳',safeguard:'保'}" :key="key">
|
|
|
<view class="recommend-panel__title">
|
|
|
“{{ value }}”推荐学校
|
|
|
</view>
|
|
|
|
|
|
<view class="recommend-panel__content">
|
|
|
<view class="list">
|
|
|
<view
|
|
|
class="list-item"
|
|
|
v-for="i in recommends[key]"
|
|
|
:key="i.id"
|
|
|
@click="$u.route({
|
|
|
url: '/package_sub/pages/SchoolDetail/SchoolDetail',
|
|
|
params: {
|
|
|
id: i.id
|
|
|
}
|
|
|
})">
|
|
|
<view class="left">
|
|
|
<image mode="aspectFill" class="list-item__img" :src="(i.icon && i.icon.url) ? i.icon.url : vuex_default_icon"></image>
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<view class="list-item__title">
|
|
|
<text>{{ i.name }}</text>
|
|
|
<u-icon name="arrow-right" color="#333" :size="30"></u-icon>
|
|
|
</view>
|
|
|
<view class="list-item__tags">
|
|
|
<view class="list-item__tags--area">
|
|
|
{{ schoolArea(i.area_id) }}
|
|
|
</view>
|
|
|
<view class="list-item__tags--type" v-for="(tag, index1) in i.type" :key="index1">
|
|
|
{{ tag }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="list-item__info">
|
|
|
办学性质：{{ i.nature === 1 ? '公办' : (i.nature === 2 ? '民办' : '-') }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<u-button
|
|
|
shape="circle"
|
|
|
:custom-style="{
|
|
|
background: 'linear-gradient(to right, #2e63ef, #4186f2)',
|
|
|
height: '76rpx',
|
|
|
'line-height': '76rpx',
|
|
|
'color': '#fff',
|
|
|
'font-size': '33rpx',
|
|
|
'letter-spacing': '5rpx',
|
|
|
'width': '450rpx',
|
|
|
'margin': '60rpx auto 0'
|
|
|
}"
|
|
|
@click="">去模拟填报</u-button>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
regionType: 'city',
|
|
|
isShowRegion: false,
|
|
|
isShowYear: false,
|
|
|
isShowSex: false,
|
|
|
sexList: [
|
|
|
{
|
|
|
value: '男',
|
|
|
label: '男'
|
|
|
},
|
|
|
{
|
|
|
value: '女',
|
|
|
label: '女'
|
|
|
},
|
|
|
{
|
|
|
value: '保密',
|
|
|
label: '保密'
|
|
|
}
|
|
|
],
|
|
|
form: {
|
|
|
area_id: "",
|
|
|
year: "",
|
|
|
name: "",
|
|
|
sex: "",
|
|
|
nationality: "",
|
|
|
city: "",
|
|
|
school_id: "",
|
|
|
school_name: "",
|
|
|
anticipate_score: "",
|
|
|
is_stable: 1,
|
|
|
is_bare: 1
|
|
|
},
|
|
|
rules: {
|
|
|
area_id: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: '请选择县区'
|
|
|
}
|
|
|
],
|
|
|
},
|
|
|
|
|
|
isShowAreaSelect: false,
|
|
|
areaList: [],
|
|
|
isShowSchoolSelect: false,
|
|
|
schoolList: [],
|
|
|
|
|
|
recommends: {
|
|
|
top: [],
|
|
|
steady: [],
|
|
|
safeguard: []
|
|
|
},
|
|
|
isShowRecommend: false,
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
vuex_user: {
|
|
|
handler: function (newVal) {
|
|
|
const keys = new Map([
|
|
|
['middle_exam_year', 'year'],
|
|
|
['name', 'name'],
|
|
|
['sex', 'sex'],
|
|
|
['nationality', 'nationality']
|
|
|
])
|
|
|
Array.from(keys.keys()).forEach(key => {
|
|
|
if (newVal[key]) {
|
|
|
this.form[keys.get(key)] = newVal[key]
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
immediate: true
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
formArea() {
|
|
|
return this.areaList.find(i => i.value === this.form.area_id)?.label
|
|
|
},
|
|
|
regionParams() {
|
|
|
return this.regionType === 'city' ? {
|
|
|
province: true,
|
|
|
city: true,
|
|
|
area: false,
|
|
|
} : {
|
|
|
province: false,
|
|
|
city: false,
|
|
|
area: true,
|
|
|
}
|
|
|
},
|
|
|
defaultRegion() {
|
|
|
if (this.regionType === 'area') {
|
|
|
return [this.form.province,this.form.city]
|
|
|
}
|
|
|
},
|
|
|
schoolArea() {
|
|
|
return function (areaId) {
|
|
|
return this.areaList.find(i => i.value === areaId)?.label
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
areaConfirm(e) {
|
|
|
if (e[0]) {
|
|
|
this.form.area_id = e[0].value
|
|
|
}
|
|
|
},
|
|
|
async getArea() {
|
|
|
try {
|
|
|
const res = await this.$u.api.area()
|
|
|
this.areaList = res.list?.map(i => ({ label: i.name, value: i.id }))
|
|
|
} catch (err) {
|
|
|
console.error(err)
|
|
|
}
|
|
|
},
|
|
|
schoolListConfirm(e) {
|
|
|
if (e[1]) {
|
|
|
const { extra, label } = e[1]
|
|
|
this.form.school_id = extra
|
|
|
this.form.school_name = label
|
|
|
}
|
|
|
},
|
|
|
async getSchools() {
|
|
|
try {
|
|
|
const { list } = await this.$u.api.schoolList({
|
|
|
page: 1,
|
|
|
page_size: 9999
|
|
|
})
|
|
|
this.schoolList = this.areaList.map(area => ({
|
|
|
id: area.value,
|
|
|
value: area.value,
|
|
|
label: area.label,
|
|
|
children: list.data.filter(school => school.area_id === area.value)?.map(i => ({
|
|
|
value: i.code,
|
|
|
label: i.name,
|
|
|
extra: i.id
|
|
|
}))
|
|
|
}))
|
|
|
} catch (err) {
|
|
|
console.error(err)
|
|
|
}
|
|
|
},
|
|
|
|
|
|
regionPick(e) {
|
|
|
if (e.hasOwnProperty('province')) {
|
|
|
this.form.province = e.province?.label
|
|
|
}
|
|
|
if (e.hasOwnProperty('city')) {
|
|
|
this.form.city = e.city?.label
|
|
|
}
|
|
|
if (e.hasOwnProperty('area')) {
|
|
|
this.form.area = e.area?.label
|
|
|
}
|
|
|
},
|
|
|
|
|
|
submit () {
|
|
|
this.$refs['uForm'].validate(valid => {
|
|
|
if (valid) {
|
|
|
try {
|
|
|
this.$u.api.recommendForm(this.form).then(async res => {
|
|
|
console.log(res)
|
|
|
uni.showToast({
|
|
|
title: '提交成功',
|
|
|
icon: 'none',
|
|
|
duration: 1000
|
|
|
})
|
|
|
const { model } = res
|
|
|
this.recommends = model?.recommends
|
|
|
this.isShowRecommend = true
|
|
|
})
|
|
|
} catch (err) {
|
|
|
console.error(err)
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
onReady() {
|
|
|
this.$refs.uForm.setRules(this.rules)
|
|
|
},
|
|
|
created() {
|
|
|
this.getArea().then(_ => this.getSchools())
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.u-drawer-bottom {
|
|
|
background: #eaf9fe !important;
|
|
|
}
|
|
|
.container {
|
|
|
position: relative;
|
|
|
min-height: 100vh;
|
|
|
width: 100vw;
|
|
|
background: #eaf8fe;
|
|
|
|
|
|
.wrap {
|
|
|
z-index: 3;
|
|
|
position: relative;
|
|
|
padding-top: 3.6vh;
|
|
|
|
|
|
.card {
|
|
|
margin: 20rpx 24rpx 0;
|
|
|
border-radius: 20rpx;
|
|
|
filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208,209,209,0.3));
|
|
|
background-color: #ffffff;
|
|
|
padding: 32rpx 36rpx 40rpx 40rpx;
|
|
|
|
|
|
&__title {
|
|
|
display: inline-block;
|
|
|
font-size: 30rpx;
|
|
|
text-transform: uppercase;
|
|
|
color: #333333;
|
|
|
font-weight: 500;
|
|
|
padding: 0 10rpx;
|
|
|
z-index: 3;
|
|
|
position: relative;
|
|
|
|
|
|
&::after {
|
|
|
content: '';
|
|
|
background: linear-gradient(to right, #2e63ef, #4187f2);
|
|
|
height: 6rpx;
|
|
|
border-radius: 4rpx;
|
|
|
z-index: 0;
|
|
|
position: absolute;
|
|
|
bottom: 4rpx;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.score {
|
|
|
margin-top: 38rpx;
|
|
|
|
|
|
&-row {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
&__text {
|
|
|
flex-basis: 170rpx;
|
|
|
font-size: 28rpx;
|
|
|
text-transform: uppercase;
|
|
|
color: #333333;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.score-row + .score-row {
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.bkg {
|
|
|
width: 100vw;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
.my-radio-group {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
|
|
|
.my-radio {
|
|
|
width: 131rpx;
|
|
|
height: 48rpx;
|
|
|
border-radius: 24rpx;
|
|
|
font-size: 24rpx;
|
|
|
line-height: 48rpx;
|
|
|
text-transform: uppercase;
|
|
|
color: #000000;
|
|
|
background-color: #e4e9f0;
|
|
|
text-align: center;
|
|
|
transition: all .2s;
|
|
|
|
|
|
&--checked {
|
|
|
background-color: #1165f8;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
.my-radio + .my-radio {
|
|
|
margin-left: 18rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.recommend-panel {
|
|
|
padding: 0 24rpx;
|
|
|
|
|
|
&__title {
|
|
|
font-size: 36rpx;
|
|
|
text-transform: uppercase;
|
|
|
color: #333333;
|
|
|
font-weight: bold;
|
|
|
padding: 44rpx 0;
|
|
|
}
|
|
|
&__content {
|
|
|
.list {
|
|
|
|
|
|
&-item {
|
|
|
padding: 24rpx 28rpx 24rpx 32rpx;
|
|
|
border-radius: 20rpx;
|
|
|
filter: drop-shadow(-2.179px 3.355px 2.5px rgba(208,209,209,0.3));
|
|
|
background-color: #ffffff;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
.left {
|
|
|
.list-item__img {
|
|
|
border-radius: 100%;
|
|
|
height: 150rpx;
|
|
|
width: 150rpx;
|
|
|
}
|
|
|
}
|
|
|
.right {
|
|
|
flex: 1;
|
|
|
margin-left: 34rpx;
|
|
|
|
|
|
.list-item__title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
text {
|
|
|
max-width: 300rpx;
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
font-size: 30rpx;
|
|
|
color: #333333;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
.list-item__tags {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
padding-top: 20rpx;
|
|
|
|
|
|
&--area {
|
|
|
color: #1a95da;
|
|
|
font-size: 24rpx;
|
|
|
border-radius: 20rpx;
|
|
|
background-color: rgba(26, 149, 218, 0.2);
|
|
|
padding: 8rpx 18rpx;
|
|
|
}
|
|
|
&--type {
|
|
|
color: #dd9447;
|
|
|
font-size: 24rpx;
|
|
|
border-radius: 20rpx;
|
|
|
background-color: rgba(233, 144, 50, 0.2);
|
|
|
padding: 6rpx 18rpx;
|
|
|
}
|
|
|
& > view + view {
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
.list-item__info {
|
|
|
padding-top: 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
text-transform: uppercase;
|
|
|
color: rgba(51, 51, 51, 0.8);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.list-item + .list-item {
|
|
|
margin-top: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
