<template>
<div id="body" class="application" v-show="show" v-cloak>
<div class="applicationForm">
<div class="essentialInformation">
<ul>
<li>
<div class="agencyNamjian fr">
<img src="../assets/img/xiala.png" width="100%" height="100%" />
</div>
<div class="agencyName agencyJantou">
<span class="plaseCity" v-show="plaseCityShow" v-text="plaseProvinceText"></span>
<select v-model='provinceSelect' @change ="cityChange(1)">
<option v-for="(item,index) in application.province" :key="index" :value="item.id" v-text="item.title"></option>
</select>
</div>
</li>
<li>
<div class="agencyNamjian fr">
<img src="../assets/img/xiala.png" width="100%" height="100%" />
</div>
<div class="agencyName agencyJantou">
<span class="plaseCity" v-show="plaseCityShow" v-text="plaseCityText"></span>
<select v-model="citySelect" @change="cityChange(2)">
<option v-for="(item,index) in city" :key="index" :value="item.id" v-text="item.title"></option>
</select>
</div>
</li>
<li>
<div class="agencyNamjian fr ">
<img src="../assets/img/xiala.png" width="100%" height="100%" />
</div>
<div class="agencyName agencyJantou noBorder">
<span class="plaseCity" v-show="plaseCityShow" v-text="plaseCountyText"></span>
<select v-model="countySelect">
<option v-for="(item,index) in county" :key="index" :value="item.id" v-text="item.title"></option>
</select>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'application',
data () {
return {
show: false,
application: {
province: [],
city: {},
county: {}
},
city: [],
county: [],
provinceSelect: '',
citySelect: '',
countySelect: '',
tishi: false,
tishiTxt: '',
plaseCityShow: true,
plaseCityText: '请子选择城市',
plaseProvinceText: '请选择城市',
plaseCountyText: '请选择(区)县'
}
},
methods: {
verify: function () {
let thisObj = this
this.$chaos.setTitle('报名表单')
this.$chaos.verify(function () {
thisObj.$chaos.ajax({
data: {
pid: '0'
},
slient: true,
userinfo: true,
url: 'get_address_by_pid',
callback: function (type, res) {
if (type !== 'success') {
return
}
if (res.status) {
thisObj.application.province = res.info.region_list
thisObj.show = true
} else {
thisObj.$vux.toast.show({
text: res.msg,
type: 'text',
position: 'bottom'
})
}
}
})
thisObj.$chaos.ajax({
slient: true,
userinfo: true,
url: 'user_is_sign',
callback: function (type, res) {
if (type !== 'success') {
return
}
if (res.status) {
let userInfo = thisObj.$chaos.getUserInfo()
if (userInfo.user_info.is_sign === 1) {
window.location.href = '#/CourseList'
} else {
userInfo.user_info.is_buy_course = 1
thisObj.$chaos.setUserInfo(userInfo)
}
} else {
thisObj.$vux.toast.show({
text: res.msg,
type: 'text',
position: 'bottom'
})
}
}
})
}, false)
},
cityChange: function (type) {
let thisObj = this
if (type === 1) {
if (thisObj.provinceSelect === '' || typeof thisObj.provinceSelect === 'undefined') {
return
}
if (typeof thisObj.application.city[thisObj.provinceSelect] === 'undefined') {
thisObj.plaseCityShow = false
thisObj.$chaos.ajax({
data: {
pid: thisObj.provinceSelect
},
slient: true,
userinfo: true,
url: 'Attend/get_address_by_pid',
callback: function (type, res) {
if (type !== 'success') {
return
}
if (res.status) {
thisObj.application.city[thisObj.provinceSelect] = res.info.region_list
thisObj.city = res.info.region_list
thisObj.citySelect = thisObj.city[0]['id']
} else {
thisObj.$vux.toast.show({
text: res.msg,
type: 'text',
position: 'bottom'
})
}
}
})
} else {
thisObj.city = thisObj.application.city[thisObj.provinceSelect]
thisObj.citySelect = thisObj.city[0]['id']
}
} else {
if (thisObj.city === '' || typeof thisObj.city === 'undefined') {
return
} else {
if (typeof thisObj.application.county[thisObj.city] === 'undefined') {
thisObj.$chaos.ajax({
data: {
pid: thisObj.citySelect
},
slient: true,
userinfo: true,
url: 'Attend/get_address_by_pid',
callback: function (type, res) {
if (type !== 'success') {
return
}
if (res.status) {
thisObj.application.county[thisObj.citySelect] = res.info.region_list
thisObj.county = res.info.region_list
thisObj.countySelect = thisObj.county[0]['id']
} else {
thisObj.$vux.toast.show({
text: res.msg,
type: 'text',
position: 'bottom'
})
}
}
})
} else {
thisObj.county = thisObj.application.county[thisObj.citySelect]
thisObj.countySelect = thisObj.county[0]['id']
}
}
}
}
},
created: function () {
this.verify()
},
watch: {
'$route': 'verify'
}
}
</script>
<style scoped>
[v-cloak] {
display: none;
}
.plaseCity{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
line-height: 55px;
text-indent: 10px;
}
.essentialInformation, .importaInformation {
background: #FFFFFF;
}
.essentialInformation {
margin: 10px 0;
}
.essentialInformation ul, .importaInformation ul {
margin: 0 15px;
}
.agencyNameImg {
width: 20px;
height: 20px;
line-height: 4.3;
}
.fl {
float: left;
}
.noBorder {
border: 0;
}
.essentialInformation:after {
content: '';
display: block;
clear: both;
}
.agencyNamjian {
width: 11px;
height: 8px;
line-height: 4.3;
}
.agencyJantou {
padding-right: 40px;
position: relative;
}
.agencyName {
margin-left: 30px;
border-bottom: 1px solid #cccccc;
line-height: 3.8
}
.essentialInformation input, .essentialInformation select {
width: 100%;
text-indent: 10px;
border: 0;
-webkit-appearance: none;
background: transparent;
}
.essentialInformation select {
height: 55px;
position: relative;
z-index: 0;
}
.agencyBut {
margin-top: 100px;
}
.squadButton {
text-align: center;
color: #fff;
background: #fbac36;
margin: 0 30px;
line-height: 2.5;
font-size: 16px;
box-shadow: 0px 1px 5px #ccc;
}
.agencyBut {
margin-top: 100px;
}
</style>
