You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
362 lines
8.9 KiB
362 lines
8.9 KiB
<template>
|
|
<view class="container">
|
|
<image class="bkg" src="~@/static/me/wave.png" mode="widthFix"></image>
|
|
|
|
<view class="wrap" v-if="step === 1">
|
|
<view class="year-picker">
|
|
<view class="year-picker__title">报考年份</view>
|
|
<u-input class="year-picker__input"
|
|
v-model="form.year"
|
|
type="select"
|
|
:height="60"
|
|
border
|
|
border-color="#b2b2b2"
|
|
:custom-style="{
|
|
color: '#6c6f70'
|
|
}"
|
|
@click="isShowTime = true"></u-input>
|
|
</view>
|
|
<view class="area-pick">
|
|
<view class="area-pick__title">所在区域</view>
|
|
<view class="area-pick__panel">
|
|
<view v-for="item in areaList" :key="item.id" class="area-item" @click="form.area_id = item.id">
|
|
{{ item.name }}
|
|
<u-icon class="area-item__tag" v-if="form.area_id === item.id " name="checkmark-circle-fill" color="#fff" :size="64" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-button
|
|
shape="circle"
|
|
ripple
|
|
:custom-style="{
|
|
'background-image': 'linear-gradient(263deg, rgba(31,142,247,0.9) 0%, rgba(17,100,247,0.9981153777569027) 78%, rgba(17,100,247,0.9999999999999999) 78%)',
|
|
height: '76rpx',
|
|
'line-height': '76rpx',
|
|
'margin-top': '110rpx',
|
|
'width': '450rpx',
|
|
'color': '#fff'
|
|
}"
|
|
@click="() => {
|
|
if (form.area_id) {
|
|
stepClick('next')
|
|
} else {
|
|
$u.toast('请选择区域')
|
|
}
|
|
}">下一步</u-button>
|
|
</view>
|
|
|
|
<view class="wrap" v-if="step === 2">
|
|
<view class="picked-data">
|
|
<view>{{ form.year }}年</view>
|
|
<view>{{ formArea }}</view>
|
|
</view>
|
|
|
|
<view class="card" style="margin-top: 28rpx;">
|
|
<view class="card__title">
|
|
<scroll-view scroll-x="true" enable-flex style="display: flex;justify-content: center;">
|
|
<view class="batch-sub">
|
|
<view class="batch-sub-item" v-for="item in currentBatchSub" :key="item.id">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="card__body">
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-picker
|
|
v-model="isShowTime"
|
|
mode="time"
|
|
:params="{
|
|
year: true,
|
|
month: false,
|
|
day: false,
|
|
hour: false,
|
|
minute: false,
|
|
second: false
|
|
}"
|
|
@confirm="e => form.year = e.year"></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
step: 1,
|
|
isShowTime: false,
|
|
areaList: [],
|
|
form: {
|
|
area_id: "",
|
|
year: new Date().getFullYear().toString(),
|
|
aspiration_id: ""
|
|
},
|
|
config: null,
|
|
|
|
currentBatchId: "",
|
|
aspiration: {},
|
|
batchSub: {}
|
|
};
|
|
},
|
|
methods: {
|
|
async getBatchSub(batchId) {
|
|
this.currentBatchId = batchId
|
|
if (this.batchSub.hasOwnProperty(batchId) && this.batchSub[batchId]) {
|
|
|
|
} else {
|
|
try {
|
|
const { batchSubs } = await this.$u.api.batchDetail({ id: batchId })
|
|
this.$set(this.batchSub, batchId, batchSubs)
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
}
|
|
},
|
|
async getConfig () {
|
|
try {
|
|
const { list } = await this.$u.api.batchIndex({
|
|
area_id: this.form.area_id,
|
|
year: this.form.year
|
|
})
|
|
if (list.length > 0) {
|
|
this.form.aspiration_id = list[0].id
|
|
|
|
this.aspiration = list[0]
|
|
this.setTitle()
|
|
if (this.aspiration.batchs[0].id) {
|
|
this.getBatchSub(this.aspiration.batchs[0].id)
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
},
|
|
stepClick(type='next') {
|
|
if (type === 'next') {
|
|
if (true) {
|
|
this.step = this.step + 1
|
|
|
|
if (this.step === 2 && !this.config) {
|
|
this.getConfig()
|
|
}
|
|
}
|
|
} else if (type === 'prev') {
|
|
if (this.step > 1) {
|
|
this.step = this.step - 1
|
|
}
|
|
}
|
|
},
|
|
setTitle() {
|
|
uni.setNavigationBarTitle({
|
|
title: `志愿模拟填报 - Step ${this.step}${ this.step !== 1 ? ('/'+(this.batches.length+1)) : '' }`
|
|
})
|
|
},
|
|
async getArea() {
|
|
try {
|
|
const res = await this.$u.api.area()
|
|
this.areaList = res.list
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
formArea() {
|
|
return this.areaList?.find(i => i.id === this.form.area_id)?.name
|
|
},
|
|
batches() {
|
|
return this.aspiration.batchs || []
|
|
},
|
|
currentBatchSub() {
|
|
console.log(33, this.batchSub, this.currentBatchId, this.batchSub[String(this.currentBatchId)])
|
|
return this.batchSub[this.currentBatchId]
|
|
}
|
|
},
|
|
watch: {
|
|
step() {
|
|
this.setTitle()
|
|
}
|
|
},
|
|
onShow() {
|
|
this.setTitle()
|
|
},
|
|
created() {
|
|
this.getArea()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
width: 100vw;
|
|
background: #eaf8fe;
|
|
|
|
.bkg {
|
|
width: 100vw;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.wrap {
|
|
z-index: 3;
|
|
position: relative;
|
|
padding-top: 40rpx;
|
|
|
|
.year-picker {
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 24rpx;
|
|
padding: 32rpx 75rpx 32rpx 60rpx;
|
|
border-radius: 20rpx;
|
|
filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208, 209, 209, 0.3));
|
|
|
|
&__title {
|
|
font-size: 30rpx;
|
|
text-transform: uppercase;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
&__input {
|
|
flex: 1;
|
|
margin-left: 32rpx;
|
|
}
|
|
}
|
|
|
|
.area-pick {
|
|
margin: 0 24rpx;
|
|
|
|
&__title {
|
|
font-size: 30rpx;
|
|
text-transform: uppercase;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
padding: 42rpx 0 38rpx 60rpx;
|
|
}
|
|
|
|
&__panel {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-gap: 22rpx 28rpx;
|
|
|
|
$colors: linear-gradient(0deg, #309cfe 0%, #58e5ff 100%),
|
|
linear-gradient(0deg, #309cfe 0%, #58e5ff 100%),
|
|
linear-gradient(0deg, #2f69fd 0%, #51bcfe 100%),
|
|
linear-gradient(0deg, #2f69fd 0%, #51bcfe 100%),
|
|
linear-gradient(0deg, #2941fc 0%, #587bff 100%),
|
|
linear-gradient(0deg, #2941fc 0%, #587bff 100%),
|
|
linear-gradient(0deg, #280bb7 0%, #5776fe 100%),
|
|
linear-gradient(0deg, #280bb7 0%, #5776fe 100%);
|
|
|
|
.area-item {
|
|
border-radius: 15rpx;
|
|
font-size: 46rpx;
|
|
text-transform: uppercase;
|
|
color: #ffffff;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
padding: 60rpx 0;
|
|
filter: drop-shadow(0 4rpx 2rpx rgba(0, 0, 0, 0.3));
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
opacity: 0.302;
|
|
width: 192rpx;
|
|
height: 192rpx;
|
|
border-radius: 96rpx;
|
|
background-image: linear-gradient(0deg, #309cfe 0%, #58c2ff 100%);
|
|
position: absolute;
|
|
top: -140rpx;
|
|
right: -38rpx;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
opacity: 0.149;
|
|
width: 192rpx;
|
|
height: 192rpx;
|
|
border-radius: 96rpx;
|
|
background-color: #b9e1fd;
|
|
position: absolute;
|
|
bottom: -148rpx;
|
|
left: -44rpx;
|
|
}
|
|
|
|
&__tag {
|
|
z-index: 4;
|
|
position: absolute;
|
|
top: 10rpx;
|
|
right: 10rpx;
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through length($colors) {
|
|
.area-item:nth-child(n + #{$i}) {
|
|
background: nth($colors, $i);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.picked-data {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 20rpx;
|
|
filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208,209,209,0.3));
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
margin: 20rpx 24rpx 0;
|
|
padding: 26rpx 160rpx;
|
|
|
|
& > view {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
text-transform: uppercase;
|
|
color: #333333;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
margin: 0 24rpx;
|
|
border-radius: 20rpx;
|
|
filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208,209,209,0.3));
|
|
background-color: #ffffff;
|
|
|
|
&__title {
|
|
background: #fbf1e8;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
padding: 30rpx 16rpx;
|
|
}
|
|
&__body {
|
|
padding: 48rpx 30rpx 70rpx 30rpx;
|
|
}
|
|
}
|
|
.batch-sub {
|
|
display: flex;
|
|
|
|
&-item {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
text-transform: uppercase;
|
|
color: #e77817;
|
|
font-weight: 500;
|
|
padding: 0 20rpx;
|
|
word-break: keep-all;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|