<template> <div id="serviceKQ"> <div v-show="tabName=='ZZY'"> <div class="container" style="top:0"> <van-swipe class="service_swipe" :loop="true" :show-indicators="false"> <!-- <van-swipe-item @click="handleBanner"> --> <van-swipe-item> <img style="width:100vw" src="@/assets/service/banner3.jpg" alt=""> </van-swipe-item> </van-swipe> <img class="card_zzy" src="../../assets/service/card_zzy.png" alt="" @click="handleMyCard"> <img class="order_btn" src="../../assets/service/order.png" alt="" @click="handleMyOrder"> <ServiceListFour :list="campList" :notab="false"></ServiceListFour> </div> </div> <div v-show="tabName=='KQ'"> <div class="swipeDiv"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe-item> <img src="../../assets/keqiao/kq_main1.png" style="width:100%;height:100%"/> </van-swipe-item> <van-swipe-item> <img src="../../assets/keqiao/kq_main1.png" style="width:100%;height:100%"/> </van-swipe-item> </van-swipe> </div> <div class="container" style="margin-bottom:10"> <!-- 顶部搜索、扫一扫、个人中心 --> <van-sticky> <div class="top_tool"> <van-search class="search" v-model="search" shape="round" background="transparent" placeholder="搜索活动、研学旅行、服务" @search="onSearch"/> </div> <div class="redLink">轻纺城小学红色网上游主题教育馆</div> </van-sticky> <div class="tabsCard"> <van-tabs v-model="active" sticky offset-top="24vw" z-index='100' :ellipsis="false" :before-change="beforeChange"> <van-tab title="革命遗址"> <ServiceListThird :list="uniList" :notab="true"></ServiceListThird> </van-tab> <van-tab title="文化传承"> <ServiceListThird :list="weekList" :notab="true"></ServiceListThird> </van-tab> <van-tab title="红色军旅"> <ServiceListThird :list="cityList" :notab="true"></ServiceListThird> </van-tab> <van-tab title="乡村振新"> <ServiceListThird :list="selectList" :notab="true"></ServiceListThird> </van-tab> <van-tab title="大好河山"> <ServiceListThird :list="riverList" :notab="true"></ServiceListThird> </van-tab> </van-tabs> </div> </div> </div> <Tabbar4 :active="tabName"></Tabbar4> <!-- <screen :reload="false"></screen> --> </div> </template> <script> import Tabbar4 from '@/component/Tabbar4' import ServiceList from '@/views/Service/component/ServiceList.vue' import ServiceListSecond from '@/views/Service/component/ServiceListSecond.vue' import ServiceListThird from '@/views/Service/component/ServiceListThird.vue' import ServiceListFour from '@/views/Service/component/ServiceListFour.vue' import Screen from '@/views/Service/component/Screen.vue' export default { props:[ 'centerNo' ], data () { return { search: '', defaultHead: require('@/assets/head.png'), top_tab_active: 0, active: 1, uniList: [], weekList:[], cityList: [], selectList: [], riverList: [], tabName: 'KQ', campList: [], } }, watch: { $route: { immediate: true, handler () { // 设置tabbar状态 this.tabName = this.$route.query.showTab || 'KQ' document.title = this.$route.query.showTab == 'ZZY' ? '周周营': '柯桥研学' } } }, mounted () { console.log('base mounted') this.initService() }, activated () { console.log('base activated') this.initService() }, computed: { schoolName() { if(!sessionStorage.getItem('userInfo')) return {schoolName: ''} console.log(JSON.parse(sessionStorage.getItem('userInfo')).schoolName) return JSON.parse(sessionStorage.getItem('userInfo')).schoolName } }, methods: { initService(){ this.getUniList() this.getWeekList() this.getCityList() this.getSelectList() this.getRiverList() this.getCampList() }, // 革命遗址 getUniList () { this.$toast.loading() this.yxAxios.post(`${this.yanxueUrl}/api/StudiesWap/SpecialCourse/List`, { "userId": this.centerNo, "businessTypeId": "BQ0001", "productTypeId": "BQ0001", "province": "", "city": "", "area": "", "channelCode": "", "searchType": 5 }).then((res) => { this.$toast.clear() // console.log(res.data.data) let uniList = res.data.data; // let uniList = [...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data]; for (let i in uniList) { uniList[i].course_labels = uniList[i].course_labels?.split(','); if (uniList[i].startDate) { uniList[i].week = this.formatWeek(this.Moment(uniList[i].startDate).format('d')); uniList[i].startDate = this.Moment(uniList[i].startDate).format('YYYY.M.D'); uniList[i].endDate = this.Moment(uniList[i].endDate).format('YYYY.M.D'); } } this.uniList = uniList }) }, // 文化传承 getWeekList () { this.yxAxios.post(`${this.yanxueUrl}/api/StudiesWap/SpecialCourse/List`, { "userId": this.centerNo, "businessTypeId": "BQ0001", "productTypeId": "BQ0002", "province": "", "city": "", "area": "", "channelCode": "", "searchType": 5 }).then((res) => { let weekList = res.data.data; // let weekList = [...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data]; for (let i in weekList) { weekList[i].course_labels = weekList[i].course_labels?.split(','); if (weekList[i].startDate) { weekList[i].week = this.formatWeek(this.Moment(weekList[i].startDate).format('d')); weekList[i].startDate = this.Moment(weekList[i].startDate).format('YYYY.M.D'); weekList[i].endDate = this.Moment(weekList[i].endDate).format('YYYY.M.D'); } } this.weekList = weekList }) }, // 红色军旅 getCityList () { this.yxAxios.post(`${this.yanxueUrl}/api/StudiesWap/SpecialCourse/List`, { "userId": this.centerNo, "businessTypeId": "BQ0001", "productTypeId": "BQ0003", "province": "", "city": "", "area": "", "channelCode": "", "searchType": 5 }).then((res) => { let cityList = res.data.data; // let cityList = [...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data]; for (let i in cityList) { cityList[i].course_labels = cityList[i].course_labels?.split(','); if (cityList[i].startDate) { cityList[i].week = this.formatWeek(this.Moment(cityList[i].startDate).format('d')); cityList[i].startDate = this.Moment(cityList[i].startDate).format('YYYY.M.D'); cityList[i].endDate = this.Moment(cityList[i].endDate).format('YYYY.M.D'); } } this.cityList = cityList }) }, // 乡村振新 getSelectList () { this.yxAxios.post(`${this.yanxueUrl}/api/StudiesWap/SpecialCourse/List`, { "userId": this.centerNo, "businessTypeId": "BQ0001", "productTypeId": "BQ0004", "province": "", "city": "", "area": "", "channelCode": "", "searchType": 5 }).then((res) => { let selectList = res.data.data; // let selectList = [...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data]; for (let i in selectList) { selectList[i].course_labels = selectList[i].course_labels?.split(','); if (selectList[i].startDate) { selectList[i].week = this.formatWeek(this.Moment(selectList[i].startDate).format('d')); selectList[i].startDate = this.Moment(selectList[i].startDate).format('YYYY.M.D'); selectList[i].endDate = this.Moment(selectList[i].endDate).format('YYYY.M.D'); } } this.selectList = selectList }) }, // 大好河山 getRiverList () { this.yxAxios.post(`${this.yanxueUrl}/api/StudiesWap/SpecialCourse/List`, { "userId": this.centerNo, "businessTypeId": "BQ0001", "productTypeId": "BQ0005", "province": "", "city": "", "area": "", "channelCode": "", "searchType": 5 }).then((res) => { let riverList = res.data.data; for (let i in riverList) { riverList[i].course_labels = riverList[i].course_labels?.split(','); if (riverList[i].startDate) { riverList[i].week = this.formatWeek(this.Moment(riverList[i].startDate).format('d')); riverList[i].startDate = this.Moment(riverList[i].startDate).format('YYYY.M.D'); riverList[i].endDate = this.Moment(riverList[i].endDate).format('YYYY.M.D'); } } this.riverList = riverList }) }, // 每周一营 6 getCampList () { this.yxAxios.post(`${this.yanxueUrl}/api/StudiesWap/SpecialCourse/List`, { "userId": this.centerNo, "businessTypeId": "JY0004", "productTypeId": "ZZY001", "province": "", "city": "", "area": "", "channelCode": "GZH002", "searchType": 6 }).then((res) => { let campList = res.data.data; // let campList = [...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data]; for (let i in campList) { campList[i].course_labels = campList[i].course_labels?.split(','); if (campList[i].startDate) { campList[i].week = this.formatWeek(this.Moment(campList[i].startDate).format('d')); campList[i].startDate = this.Moment(campList[i].startDate).format('YYYY.M.D'); campList[i].endDate = this.Moment(campList[i].endDate).format('YYYY.M.D'); } } this.campList = campList }) }, beforeChange (index) { // if (index != 0 && index != 1 && index != 2) { // this.$toast('暂未开放,敬请期待!') // return false // } return true }, onSearch () { this.$toast('暂未开放,敬请期待!') }, // 我的订单 handleMyOrder(){ let isLogin = this.checkLogin() if (!isLogin) return; this.$router.push({ name: 'ServiceOrderPublic' }) }, // 我的优惠券 handleMyCard(){ let isLogin = this.checkLogin() if (!isLogin) return; this.$router.push({ name: 'ServiceCardBoxPublic' }) }, // 个人信息 handleMyClass(){ this.$router.push({ name: 'privateXST' }) }, // 判断是否已登录 checkLogin () { if (process.env.NODE_ENV != "production") return true; const userInfo = JSON.parse(sessionStorage.getItem('userInfo')) if (!userInfo?.phone) { sessionStorage.setItem('prePage', 'Service' + this.publicName); sessionStorage.setItem('prePageQuery', JSON.stringify({ showTab:this.$route.query.showTab })); this.$router.push({ name: 'LoginPublic', query: { publicName: this.publicName } }) return false; } return true; }, formatWeek(week){ return week == 1 ? '周一' : week == 2 ? '周二' : week == 3 ? '周三' : week == 4 ? '周四' : week == 5 ? '周五' : week == 6 ? '周六' : week == 0 ? '周日' : ''; }, // 点击轮播 handleBanner () { location.href = 'https://mp.weixin.qq.com/s/a4N3xr2nXZ-aG3OEakv-Dg' }, }, components: { Tabbar4, ServiceList, Screen, ServiceListSecond, ServiceListThird, ServiceListFour } } </script> <style lang="scss" scoped> #serviceKQ { width: 100%; height: 100%; background: #f8f8f8; overflow: hidden; .swipeDiv { // height: 400px; height: 60vw; width: 100%; } .container { height: 100%; position: absolute; // top: 410px; top: 60vw; background: #f6f7fa; background-image: url("../../assets/keqiao/kq_white.png"); // background-image: url("../../assets/service/bg.png"); background-size: 100%; background-repeat: no-repeat; // border-radius: 50px; .redLink { height: 10vw; font-size: 4vw; display: flex; align-items: center; justify-content: center; color: #fff; // background-color: aquamarine; background-image: linear-gradient(to right, rgba(255,0,0,0), #FF696A, rgba(255,0,0,0)); background-color: #fff; } .tabsCard { width: 100vw; } .top_tool { display: flex; align-items: center; // justify-content: center; justify-content: space-between; padding: 20px 24px; box-sizing: border-box; height: 108px; background-color: #fff; .logo { width: 82px; } .search { padding: 0; width: 100%; // width: 400px; } .scan { width: 44px; } .head { width: 60px; } .top_tab { width: 366px; border-radius: 33px; overflow: hidden; span { display: inline-block; width: 50%; line-height: 66px; text-align: center; font-size: 28px; color: #f3f3f3; background: rgba(255, 255, 255, 0.24); &.active { // color: #fff; color:black; background: rgba(255, 255, 255, 0.21); } } } } .service_swipe { img { width: 100%; } } .card_zzy { display: block; width: 704px; margin: 0 auto; margin-top: 20px; } .order_btn { width: 160px; position: fixed; bottom: 200px; right: 20px; z-index: 99; } } /deep/.van-search__content { background: rgba(255, 255, 255, 0.36); .van-cell { // color: #fff; color: black; } .van-field__control { // color: #fff; color: black; &::-webkit-input-placeholder { // color: #fff; color: #909399; } } } /deep/.van-tabs__wrap { box-shadow: 0 10px 10px rgba(238, 238, 238, 0.295); height: 88px; } /deep/.van-tabs__nav { background: transparent; } /deep/.van-tab { // color: #fff; color: black; font-size: 28px; background-color: #fff; } /deep/.van-tab--active { // color: #fff; color: black; font-size: 32px; font-weight: bold; } /deep/.van-tabs__line { width: 48px; height: 6px; // background: #ffffff; background: black; border-radius: 10px 10px 0px 0px; } .tab_img { width: 146px; transition: 0.3s linear; } .van-tab--active { .tab_img { transform: scale(1.2); } } .fixed_btn{ position: fixed; bottom: 20vw; right: 0; span{ display: block; width: 200px; text-align: center; line-height: 60px; font-size: 30px; background: rgb(100, 200, 250); border-top-left-radius: 30px; border-bottom-left-radius: 30px; margin-bottom: 30px; } } } .my-swipe .van-swipe-item { color: #fff; height: 60vw; font-size: 20px; // line-height: 400px; // line-height: 60vw; text-align: center; background-color: #39a9ed; } </style>