<template> <div> <div id="prefect_box"> <img class="bg" src="@/assets/msg.png" alt=""> <div class="content"> <div class="item"> <input type="text" placeholder="请输入您的姓名" v-model="studentName"> </div> <div class="item" @click="showUserTypeSelect=true" style="width:48%;display:inline-flex;margin-right:4%;"> <p :class="!userType?'nodata':''">{{userType?userType:'当前阶段'}}</p> <img src="@/assets/more.png" alt=""> </div> <div class="item" @click="handleYear" style="width:48%;display:inline-flex;"> <p :class="!year||yearDisable?'nodata':''">{{year?year:'入学年份'}}</p> <img src="@/assets/more.png" alt=""> </div> <div class="item" @click="showAreaSelect=true"> <p :class="!area?'nodata':''">{{area?area:'请选择地区'}}</p> <img src="@/assets/more.png" alt=""> </div> <div class="item"> <form action="/" style="width:100%;"> <van-search v-model="searchSchool" placeholder="请输入学校关键字" @search="handleSchool" /> </form> </div> <p class="school_select" v-if="school">已选择学校:{{school}}</p> <button class="submit" @click="submit">完成</button> </div> </div> <van-popup v-model="showUserTypeSelect" round position="bottom" get-container="body" :safe-area-inset-bottom="true"> <van-picker title="当前阶段" show-toolbar :columns="userTypeArr" value-key="label" @cancel="showUserTypeSelect = false" @confirm="selectUserTypeOver" /> </van-popup> <van-popup v-model="showYearSelect" round position="bottom" get-container="body" :safe-area-inset-bottom="true"> <van-picker title="入学年份" show-toolbar :columns="yearArr" value-key="label" @cancel="showYearSelect = false" @confirm="selectYearOver" /> </van-popup> <van-popup v-model="showAreaSelect" round position="bottom" get-container="body" :safe-area-inset-bottom="true"> <van-area title="地区" :area-list="areaList" @cancel="showAreaSelect = false" @confirm="selectAreaOver" /> </van-popup> <van-popup v-model="showSchoolSelect" round position="bottom" get-container="body" :safe-area-inset-bottom="true"> <van-picker title="学校" show-toolbar :columns="schoolList" :loading="schoolListLoading" @cancel="showSchoolSelect = false" @confirm="selectSchoolOver" /> </van-popup> </div> </template> <script> export default { // props: [ // "phone", // "id", // "publicName" // ], data () { return { studentName: '', year: '',//入学年份 yearDisable: false, showYearSelect: false, yearArr: [], userType: '', userTypeVal: '',//所处阶段1-小学 2-初中 3-高中 showUserTypeSelect: false, userTypeArr: [{ label: '小学', value: 1 }, { label: '初中', value: 2 }, { label: '高中', value: 3 }], area: '', areaCode: '', showAreaSelect: false, areaList: [], searchSchool: '', school: '', schoolId: '', showSchoolSelect: false, schoolListLoading: false, schoolList: [], appId: '', userInfo: {} } }, mounted () { let userInfo = sessionStorage.getItem('userInfo') this.userInfo = userInfo ? JSON.parse(userInfo) : userInfo; this.studentName = this.userInfo?.studentName; if (sessionStorage.getItem('publicName') == 'SXYX') { this.appId = 'wx1305e88d2bc74073' } else if (sessionStorage.getItem('publicName')== 'XST') { this.appId = 'wx1c630c8773c482f1' } this.initYearArr() this.GetSysAreaList() }, methods: { // 初始化入学年份选项 initYearArr () { // 页面创建时执行 let year = new Date().getFullYear(), Month = new Date().getMonth() + 1, yearArr = []; if (Month > 8) { // 如果月份大于8,那么当年的学年的高考年份要+1,如果月份小于7,那么当前的年份就是今年高考的年份 year = year } for (let index = year; index > year - 6; index--) { yearArr.push({ value: index, label: index }) } this.yearArr = yearArr }, selectYearOver (value) { this.year = value.label; this.showYearSelect = false; }, handleYear () { if (!this.yearDisable) { this.showYearSelect = true; } }, selectUserTypeOver (value) { this.userType = value.label; this.userTypeVal = value.value; this.showUserTypeSelect = false; }, // 获取地区列表 GetSysAreaList () { this.http.GetSysAreaList({ areaCode: 33 }).then((res) => { if (res.success) { let data = res.data; let obj = { province_list: { 330000: '浙江省' }, city_list: {}, county_list: {} }; if (data) { data.forEach((n, i) => { obj.city_list[n.area_code + '00'] = n.area_name; if (n.areaList.length > 0) { n.areaList.forEach((k, j) => { obj.county_list[k.area_code] = k.area_name; }) } }); this.areaList = obj; } } else { this.$toast.fail(res.message) } }) }, selectAreaOver (value) { let data = value; var city = data[1].code; city = city.substring(0, city.length - 2); // console.log(city) this.area = data[0].name + ',' + data[1].name + ',' + data[2].name; this.areaCode = [data[0].code, city, data[2].code]; this.quCode = data[2].code; this.school = '', this.schoolId = '', this.showAreaSelect = false }, // 点击选择学校 handleSchool () { if (!this.searchSchool) { this.$toast('请输入学校关键字'); return; } this.showSchoolSelect = true; this.GetHighSchoolList(); }, // 通过地区获取学校 GetHighSchoolList () { this.schoolListLoading = true; this.yxAxios.get(`${this.yanxueUrl}/api/SchoolManage/GetAllSchoolList?schoolName=${this.searchSchool}`).then((res) => { if (res.data.data) { let data = res.data.data; let arr = []; if (data) { data.forEach((n, i) => { let obj = {}; obj.text = n.schoolName; obj.id = n.id; arr.push(obj); }); this.schoolList = arr; this.schoolListLoading = false } } else { this.schoolListLoading = false this.$toast.fail(res.data.message) } }) }, selectSchoolOver (value) { console.log(value) this.school = value.text; this.schoolId = value.id; this.showSchoolSelect = false; }, submit () { if (!this.studentName) { this.$toast('请输入姓名'); } else if (!this.userType) { this.$toast('请选择阶段'); } else if (!this.year) { this.$toast('请选择入学年份'); } else if (!this.area) { this.$toast('请选择地区'); } else if (!this.school) { this.$toast('请选择学校'); } else { let postData = { id: this.userInfo.id, userName: this.studentName, mobile: this.userInfo.phone, province: this.area.split(',')[0],//省份 city: this.area.split(',')[1],//城市 area: this.area.split(',')[2],//地区 schoolName: this.school,//学校名称 enrollYear: this.year,//入学年份 userType: this.userTypeVal,//1-小学 2-初中 3-高中 } this.$toast.loading({ message: '加载中', duration: 0, forbidClick: true }) this.yxAxios.post(`${this.proxyUrl}/prod/api/wx/${this.appId}/updateUserInfo`, postData).then((res) => { this.$toast.clear() if (res.data.code == 200) { this.$toast.success(res.data?.message) this.$emit('complete') this.$emit('hidePrefectBox') } else { this.$toast.fail(res.message) } this.getUserInfoff() }) } }, // 获取用户信息 getUserInfoff () { this.$toast.loading({ message: '加载中...', duration: 0, forbidClick: true }) this.yxAxios.get(`${this.proxyUrl}/prod/api/wx/${this.appId}/getUserInfo?unionId=${sessionStorage.getItem('unionId')}`).then((res) => { this.$toast.clear() if (res.data.code == 200) { sessionStorage.setItem('userInfo', JSON.stringify(res.data.data)) } else { this.$toast.fail(res.data.message) } this.$router.push({ name: 'ServiceXST' }) }) }, } } </script> <style lang="scss" scoped> #prefect_box { width: 638px; height: 836px; background: #ffffff; border-radius: 24px; position: relative; margin:auto; .bg { width: 100%; position: absolute; top: 0; left: 0; } .content { width: 100%; box-sizing: border-box; padding: 0 40px; position: absolute; top: 236px; left: 0; .item { width: 558px; height: 72px; border-radius: 36px; background: #f7f7f7; box-sizing: border-box; font-size: 28px; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; p { color: #333333; &.nodata { color: #999999; } } img { width: 40px; } input { width: 100%; background: transparent; border: 0; color: #333333; padding: 0; &::-webkit-input-placeholder { color: #999999; } } } .school_select { font-size: 28px; padding: 0 32px; margin-bottom: 28px; } .submit { width: 294px; height: 72px; border: 0; background: linear-gradient(135deg, #99c2ff 0%, #1f59ff 100%); box-shadow: 0px 4px 8px 0px rgba(189, 189, 189, 0.5), 0px 8px 12px 0px rgba(87, 137, 255, 0.5); border-radius: 34px; font-size: 34px; color: #ffffff; margin: 0 auto; display: block; } } } /deep/.van-search { background: transparent; padding: 0; width: 100%; } /deep/.van-search__content { padding: 0; } </style>