<template> <div class="home"> <div class="infomation"> <div class="top"> <div> <img class="head" :src="headImgUrl?headImgUrl:defaultHead" alt=""> <div class="right"> <!-- <p class="name">{{nicknameUser}}</p> --> <div class="name"><span>{{nicknameUser}}</span> <div class="school" v-show="schoolNamesChoose" @click="changeSchool">{{schoolNamesChoose}}<img src="@/assets/Travel/change.png" /></div> </div> <p class="phone">{{userInfo.phone}}</p> </div> </div> <HomeScan></HomeScan> </div> </div> <HomeOrder></HomeOrder> <div class="function"> <div class="item" @click="handleMyCard"> <div class="left"> <van-icon class="icon" name="discount" /> <span>我的优惠券</span> </div> <van-icon name="arrow" /> </div> <!-- <div class="item" @click="handleMyInfo"> <div class="left"> <van-icon class="icon" name="user-circle-o" /> <span>个人信息</span> </div> <van-icon name="arrow" /> </div> --> <div class="item" @click="handelElder"> <div class="left"> <van-icon class="icon" name="friends-o" /> <span>长辈版</span> </div> <p> {{isElder?'已开启':'未开启'}} <van-icon name="arrow" /> </p> </div> </div> <HomeChildList v-if="showChildList"></HomeChildList> <!-- <div class="cardPic" v-show='isShow'> <div class="boxPic" @click="isShow = false"> <img style="width:100%;height:100%" src="../assets/coupon.png" /> </div> </div> --> <tabbar4 active="center"></tabbar4> </div> </template> <script> import HomeChildList from '@/views/Home/component/HomeChildList' import HomeOrder from '@/views/Home/component/HomeOrder' import HomeScan from '@/views/Home/component/HomeScan' import Tabbar4 from '@/component/Tabbar4' export default { data () { return { centerNo: '', userInfo: { openId: '', headImg: '', nickName: '', phone: '', roleType: '', time: '', year: '', studentName: '', school: '', }, nicknameUser: '', headImgUrl: '', defaultHead: require('@/assets/head.png'), isShow: false, isElder: false, showChildList: false, showSchool: false, schoolNamesChoose: '' } }, mounted () { const isElder = localStorage.getItem('isElder') if (isElder) { this.isElder = true } this.schoolNamesChoose = localStorage.getItem('schoolNamesChoose') ? localStorage.getItem('schoolNamesChoose') : '' this.centerNo = localStorage.getItem('centerNo'); this.getUserInfo() this.againRZ() }, computed: { schoolNames () { return this.$store.state.schoolName } }, methods: { // 研学码 handleYanxue () { this.$router.push({ name: 'YanxueCode' }) }, // 我的订单 handleOrder () { this.$router.push({ name: 'ServiceOrderXST' }) }, // 集团认证 handleGroup () { this.$toast('暂未开放,敬请期待!'); }, // 我的优惠券 handleMyCard () { this.$router.push({ name: 'CardBoxXST' }) }, // 个人信息 handleMyInfo () { this.$router.push({ name: 'HomeUserInfo' }) }, // 合伙人中心 handlePartner () { this.$toast('暂未开放,敬请期待!'); // this.$router.push({ name: 'Partner' }) }, // 点击长辈版 handelElder () { if (this.isElder) { this.$dialog.confirm({ title: '长辈版', message: '超大字号,看的更清楚,长辈版,专为长辈设计', confirmButtonColor: '#ee0a24', confirmButtonText: '关闭长辈版模式' }) .then(() => { // on confirm this.isElder = false localStorage.removeItem('isElder') this.$emit('setElder', false) }) .catch(() => { // on cancel }); } else { this.$dialog.confirm({ title: '长辈版', message: '超大字号,看的更清楚,长辈版,专为长辈设计', confirmButtonColor: '#3385FF', confirmButtonText: '开启长辈版模式' }) .then(() => { // on confirm this.isElder = true localStorage.setItem('isElder', 1) this.$emit('setElder', true) }) .catch(() => { // on cancel }); } }, // 获取用户信息 getUserInfo () { this.mgop({ api: 'mgop.sz.hswsy.getPortalUserByNum', // 必须 host: 'https://mapi.zjzwfw.gov.cn/', dataType: 'JSON', type: 'GET', appKey: 'fuxgnukl+2001895516+edccpx', // 必须 headers: { // 'isTestUrl': '1' }, data: { "userNum": this.centerNo }, onSuccess: res => { console.log('getUserInfo', res) if (res.data.code == 200) { let userInfo = res.data.data.userInfo; this.userInfo = userInfo; localStorage.setItem('userInfo', JSON.stringify(userInfo)) if (userInfo.schoolNames || userInfo.schoolNames == [] || userInfo.schoolNames == 'null') { localStorage.setItem('schoolNames', JSON.stringify(userInfo.schoolNames)) this.$store.commit('changeSchool', userInfo.schoolNames) if (!localStorage.getItem('schoolNamesChoose')) { localStorage.setItem('schoolNamesChoose', userInfo.schoolNames[0]) this.schoolNamesChoose = userInfo.schoolNames[0] } } else { localStorage.setItem('schoolNames', []) this.$store.commit('changeSchool', []) } } this.showChildList = true }, onFail: err => { console.log('err', err) } }); }, formatterTime (time) { if (time) { return time.split(' ')[0] } else { return '' } }, complete () { this.getUserInfo() }, //切换学校 changeSchool () { this.$router.push({ name: 'schoolFollow' }) }, //集团回调关闭页面 closeJT () { this.showSchool = false this.getUserInfo() }, //查看是否有集团认证 getRZ () { // this.showSchool = true this.$router.push({ name: 'schoolAttestation' }) }, //回跳重新认证 againRZ () { let backRZ = localStorage.getItem('backRZ') if (backRZ == 'true') { this.showSchool = true localStorage.setItem('backRZ', false) } } }, components: { Tabbar4, HomeChildList, HomeOrder, HomeScan }, } </script> <style lang="scss" scoped> .home { width: 100%; min-height: 100%; background: #f8f8f8; padding-bottom: 196px; .infomation { width: 100%; height: 320px; background: url("~@/assets/home/bg_kq.png"); background-size: 100%; background-position: center; .top { display: flex; align-items: center; justify-content: space-between; padding: 40px 28px; > div { display: flex; } .head { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; } .right { height: 96px; margin-left: 24px; color: #fff; .name { font-size: 33px; font-weight: bold; width: 100%; margin-bottom: 15px; display: flex; .school { max-width: 400px; border-radius: 30px; font-size: 26px; font-weight: normal; margin-left: 20px; padding: 0 20px; box-sizing: border-box; background-color: #d82b2b; display: flex; align-items: center; img { width: 30px; height: 30px; margin-left: 5px; } } } .phone { font-size: 26px; } } } } .function { background: #ffffff; border-radius: 12px; margin: 24px; .item { margin: 0 32px; height: 96px; display: flex; align-items: center; justify-content: space-between; font-size: 34px; &:not(:first-of-type) { border-top: 1px solid #e2e2e2; } .left { display: flex; align-items: center; .icon { font-size: 40px; margin-right: 20px; } span { font-size: 30px; } } .pic { display: flex; align-items: center; margin-right: 5px; span { font-size: 27px; color: #333333; } img { width: 30px; height: 30px; margin-right: 5px; } } } } } .boxPic { width: 85vw; height: 115vw; margin: 10vh 7.5vw; position: absolute; top: 0; z-index: 99; } .cardPic { position: absolute; top: 0; width: 100vw; height: 100vh; background: #0000008a; z-index: 99; } </style> <style lang="scss"> .elder { .home { .infomation .top .right { .name { font-size: 44px; } .phone { font-size: 44px; } } .function .item .left span { font-size: 40px; } } } </style>