<template> <div> <div class="addchild_group" v-if="step==1"> <img class="bg" src="@/assets/home/bg2.png" alt=""> <p class="title">选择学校</p> <p class="des">请选择你关注的学校</p> <div class="content"> <!-- <div class="name">选择学校</div> --> <div class="item"> <input type="text" placeholder="请选择学校" readonly v-model="school"> <button type="info" class="btn" @click="chooseSchool">选择学校</button> </div> <button class="submit" @click="submit">确定</button> </div> </div> <van-popup v-model="chooseSchoolisShow" round get-container="body" :safe-area-inset-bottom="true"> <div v-if="chooseSchoolisShow"> <chooseSchool v-model="chooseSchoolisShow" @schoolData='schoolData'></chooseSchool> </div> </van-popup> </div> </template> <script> import chooseSchool from '@/views/Home/component/chooseSchool' export default { components: { chooseSchool }, data () { return { step: 1, phone: '', codeText: '获取验证码',//获取验证码按钮文字 code: '',//验证码 studentName: '', userInfo: {}, appid:'wx1305e88d2bc74073', searchSchool: '', school: '', schoolId: '', chooseSchoolisShow: false } }, mounted () { let userInfo = localStorage.getItem('userInfo') this.userInfo = JSON.parse(userInfo); }, methods: { submit () { if (!this.school) { this.$toast('请选择学校'); } else { let postData = { userNum: this.userInfo.centerNo, contactsName: this.userInfo.nickName, contactsMobile: this.userInfo.phone, loginMobile: this.userInfo.phone, schoolName: this.school, contactsType: this.userInfo.userType, } this.$toast.loading({ message: '加载中', duration: 0, forbidClick: true }) console.log(postData) this.yxAxios.post(`${this.proxyUrl}/user/info/addContacts`, postData).then((res) => { this.$toast.clear() if (res.data.code == 200) { this.$toast.success('关注成功') this.$emit('closeAdd') this.getUserInfoXST() } else { this.$toast.fail(res.message) } }) } }, //选择学校 chooseSchool () { // this.$router.push({name: 'chooseSchool'}) this.chooseSchoolisShow = true }, schoolData (val) { this.school = val.text; this.schoolId = val.id; }, // 获取用户信息 getUserInfoXST () { this.$toast.loading({ message: '加载中...', duration: 0, forbidClick: true }) this.yxAxios.get(`${this.baseUrl}/prod/api/wx/${this.appid}/getUserInfo?unionId=${localStorage.getItem('unionId')}`).then((res) => { this.$toast.clear() if (res.data.code == 200) { localStorage.setItem('userInfo', JSON.stringify(res.data.data)) if(res.data.data.schoolNames || res.data.data.schoolNames == [] || res.data.data.schoolNames == 'null') { localStorage.setItem('schoolNames',JSON.stringify(res.data.data.schoolNames)) this.$store.commit('changeSchool', res.data.data.schoolNames) if(!localStorage.getItem('schoolNamesChoose')) { localStorage.setItem('schoolNamesChoose',res.data.data.schoolNames[0]) } }else { localStorage.setItem('schoolNames',[]) this.$store.commit('changeSchool', []) } } }) }, }, } </script> <style lang="scss" scoped> .addchild_group { width: 638px; // height: 836px; height: 496px; background: #ffffff; border-radius: 24px; position: relative; .bg { width: 100%; position: absolute; top: 0; left: 0; } .title { position: relative; width: 100%; padding-top: 70px; padding-bottom: 8px; text-align: center; font-size: 34px; font-weight: bold; color: #0857ff; } .des { position: relative; width: 100%; box-sizing: border-box; padding: 0 15%; text-align: center; font-size: 24px; color: #6596ff; } .content { width: 100%; box-sizing: border-box; padding: 0 40px; position: absolute; top: 236px; left: 0; .name { width: 558px; height: 50px; font-size: 28px; color: #000; padding-left: 20px; box-sizing: border-box; } .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; } } .btn { width: 240px; height: 55px; float: right; font-size: 28px; background: linear-gradient(135deg, #cdf8cf 0%, #8af36f 100%); box-shadow: 0px 4px 8px 0px rgba(189, 189, 189, 0.5), 0px 8px 12px 0px rgba(89, 199, 171, 0.5); border-radius: 34px; border: transparent; color: #333333; } } .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: 55px auto 0; display: block; } } .child_content { position: relative; margin-top: 40px; .child_box { height: 500px; overflow: auto; padding-left: 100px; .child_item { position: relative; margin-bottom: 50px; p { font-size: 28px; padding: 8px 0; span { display: inline-block; width: 140px; margin-right: 28px; color: #999; } } .checkbox { position: absolute; top: 115px; right: 20px; } } } .submit { width: 438px; height: 78px; background: #3385ff; border-radius: 37px; border-radius: 39px; border: 0; font-size: 34px; color: #ffffff; margin: 0 auto; display: block; } } .phone_content { width: 100%; position: absolute; top: 180px; left: 0; box-sizing: border-box; padding: 40px; .item { border-bottom: 1px solid #e2e2e2; margin-bottom: 30px; } .phone_title { font-size: 34px; font-weight: bold; margin-bottom: 28px; } .flex { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .code { border: 0; background: transparent; font-size: 28px; margin-bottom: 32px; width: 100%; } .phone { width: 50%; margin: 0; } .getcode { color: #5789ff; font-size: 28px; padding: 10px; } .submit { width: 438px; height: 78px; background: #3385ff; border-radius: 37px; border-radius: 39px; border: 0; font-size: 34px; color: #ffffff; margin: 0 auto; margin-top: 120px; display: block; } } } /deep/.van-search { background: transparent; padding: 0; width: 100%; } /deep/.van-search__content { padding: 0; } .schoolBoxF { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; background-color: #fff; } </style>