<template> <div id="growUp"> <div class="head"> <img class="head_img" src="@/assets/grow_up/head.png" alt="" /> <div class="mask"> <p class="title">研学圈</p> <div class="grow_up_btn_box"> <div class="btn" @click="handleTrip"> <van-icon class="icon" name="photo-o" /> <span>行程相册</span> </div> <div class="line">|</div> <div class="btn" @click="handleRecord"> <van-icon class="icon" name="notes-o" /> <span>成长记录</span> </div> </div> </div> </div> <div class="tabsCard ignore" :class="tabOpen ? 'open' : ''"> <p class="title ignore">筛选</p> <van-tabs v-model="active" :ellipsis="false" ref="tabs" color="#4092FF" @change="tabChange"> <van-tab :title="item.name" v-for="(item, index) in tabList" :key="index"> </van-tab> </van-tabs> <div class="tab_toggle ignore" @click="tabOpen = !tabOpen"> <van-icon class="icon" name="arrow-down" /> </div> </div> <div class="item_box"> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="growthContentList"> <div class="item" v-for="(item, index) in dataList" :key="index" @click="handleDetail(item)"> <div class="top"> <img class="user_img" :src="item.headImg ? item.headImg : defaultHead" alt="" /> <p class="title"> {{ item.userName }}<span v-if="item.level">{{ item.level }}</span> </p> <p class="time">{{ item.createTime }}</p> </div> <div class="content" :class="item.contentOpen ? 'open' : ''"> <span class="tag" v-for="(item2, index2) in item.contentTagList" :key="index2">#{{ item2.name }}</span> <span v-html="item.content"></span> </div> <p class="read_more" v-if="item.content.length > 90" @click.stop="item.contentOpen = !item.contentOpen"> {{ item.contentOpen ? '收起全文' : '阅读全文' }} </p> <div class="course_link" @click.stop="handleCourse(item.classNo)" v-if="item.pname"> <div class="img_box"> <img class="course_img" :src="item.pimg" alt="" /> <img class="mask" src="@/assets/grow_up/link.png" alt="" /> </div> <p class="title">{{ item.pname }}</p> </div> <ImgBox :imgArr="item.newPhoths" :itemIndex="index" @handlePhoto="handlePhoto"></ImgBox> <div class="action_bar"> <div> <div class="btn" @click.stop="handleThumb(index)"> <van-icon class="icon" :class="item.isThumb ? 'active' : ''" name="good-job-o" /> <span>{{ item.thumbNum }}</span> </div> <div class="btn"> <van-icon class="icon" name="comment-o" /> <span>{{ item.commentNum }}</span> </div> </div> <div class="btn del_btn" v-if="userInfo.centerNo == item.centerNo" @click.stop="handleDel(item)"> <van-icon class="icon" name="delete-o" /> </div> </div> </div> </van-list> </div> <div class="edit_box" @click="handleRelease"> <van-icon class="icon" name="edit" /> </div> <tabbar3 active="growup"></tabbar3> <van-image-preview v-model="showPreview" :images="previewArr" :start-position="startPosition" @change="previewChange"> </van-image-preview> </div> </template> <script> import Tabbar3 from '@/views_qyx/component/c_Tabbar3' import ImgBox from './c_ImgBox.vue' export default { data() { return { //1-精选 2-全部 3-必看 4-学校 5-标签 tabList: [ { name: '精选', type: 1, }, { name: '全部', type: 2, }, { name: '必看我的', type: 3, }, ], dataList: [], active: '', pageNum: 1, pageSize: 5, loading: false, finished: false, defaultHead: require('@/assets/head.png'), tabOpen: false, showPreview: false, startPosition: 0, previewIndex: 0, previewArr: [], unionId: '', } }, mounted() { this.$toast.loading({ message: '加载中...', duration: 0, forbidClick: true, }) localStorage.setItem('prePage', 'GrowUp') this.unionId = localStorage.getItem('unionId') this.getUserInfo() // 获取并设置学校 let schoolNames = localStorage.getItem('schoolNames') if (schoolNames) { let schoolNamesArr = JSON.parse(schoolNames) let tabList = this.tabList for (let i in schoolNamesArr) { tabList.push({ name: schoolNamesArr[i].schoolName, type: 4, }) } this.tabList = tabList } // this.getGrowthTagList()//获取并设置标签 // // 设置当前选项卡默认位置 // let growUpType = localStorage.getItem('growUpType'); // if (growUpType) { // this.active = Number(growUpType) // } }, methods: { // 获取并设置标签 getGrowthTagList() { this.http .getGrowthTagList({ status: 0, }) .then((res) => { console.log('标签:', res) if (res.code == 200) { let tabList = this.tabList let tagList = res.rows for (let i in tagList) { tabList.push({ name: tagList[i].name, id: tagList[i].id, type: 5, }) } this.tabList = tabList // 设置当前选项卡默认位置 let growUpType = localStorage.getItem('growUpType') if (growUpType) { this.active = Number(growUpType) } this.growthContentList() this.setWxShare() } else { this.$toast(res.message) } }) }, // tab切换 tabChange(item) { console.log('tab切换:') this.pageNum = 1 this.dataList = [] this.finished = false this.tabOpen = false localStorage.setItem('growUpType', this.active) this.growthContentList() }, // 获取列表 growthContentList() { const userInfo = JSON.parse(localStorage.getItem('userInfo')) if (this.pageNum == 1) { this.$toast.loading({ message: '加载中...', duration: 0, forbidClick: true, }) } this.loading = true let type = this.tabList[this.active].type this.http .growthContentList({ centerNo: this.userInfo.centerNo, //当前用户中台编号 schoolName: type == 4 ? this.tabList[this.active].name : '', //type=4 学校名称 tagId: type == 5 ? this.tabList[this.active].id : '', //type=5 标签id type: type, //1-精选 2-全部 3-必看 4-学校 5-标签 pageNum: this.pageNum, pageSize: this.pageSize, }) .then((res) => { this.$toast.clear() console.log('列表:', res) if (res.code == 200) { this.loading = false if (res.total < this.pageNum * this.pageSize) { this.finished = true } else { this.pageNum++ } let dataList = res.rows for (let i in dataList) { dataList[i].content = dataList[i].content.replace('\n', '<br>') dataList[i].newPhoths = [] for (let j in dataList[i].photos) { dataList[i].newPhoths.push(dataList[i].photos[j].img) } dataList[i].contentOpen = false dataList[i].showDel = false } if (this.pageNum == 1) { this.dataList = dataList } else { this.dataList = this.dataList.concat(dataList) } } else { this.$toast(res.message) } }) }, // 点击照片 handlePhoto(dayIndex, index) { this.previewArr = this.dataList[dayIndex].newPhoths this.startPosition = index this.previewIndex = index this.showPreview = true }, // 预览图切换 previewChange(index) { this.previewIndex = index }, // 点击点赞按钮 handleThumb(index) { if (this.dataList[index].isThumb == 1) { this.growthContentCancelThumb(index) } else { this.growthContentThumb(index) } }, // 点赞 growthContentThumb(index) { let dataList = this.dataList this.http .growthContentThumb({ centerNo: this.userInfo.centerNo, //当前用户中台编号 contentId: dataList[index].id, }) .then((res) => { console.log('点赞结果:', res) if (res.code == 200) { dataList[index].isThumb = 1 dataList[index].thumbNum++ this.dataList = dataList } else { this.$toast(res.message) } }) }, // 取消点赞 growthContentCancelThumb(index) { let dataList = this.dataList this.http .growthContentCancelThumb({ centerNo: this.userInfo.centerNo, //当前用户中台编号 contentId: dataList[index].id, }) .then((res) => { console.log('取消点赞结果:', res) if (res.code == 200) { dataList[index].isThumb = 0 dataList[index].thumbNum-- this.dataList = dataList } else { this.$toast(res.message) } }) }, // 行程相册 handleTrip() { this.$router.push('GrowUpTrip') }, // 成长记录 handleRecord() { this.$router.push('GrowUpRecord') }, // 进入详情页 handleDetail(item) { this.$router.push({ name: 'GrowUpDetail', query: { id: item.id, type: item.type } }) }, // 点击课程 handleCourse(classNo) { this.$router.push({ name: 'ServiceAbroadDetail', query: { courseId: classNo } }) }, // 点击发布 handleRelease() { this.$router.push('GrowUpRelease') }, // 删除动态 handleDel(item) { this.$dialog .confirm({ title: '操作', message: '确认删除', }) .then(() => { this.http .getGrowthContentRemove({ centerNo: this.userInfo.centerNo, id: item.id, }) .then((res) => { if (res.code == 200) { this.$toast('删除成功') this.pageNum = 1 this.dataList = [] this.finished = false this.growthContentList() } else { this.$toast(res.message) } }) }) .catch(() => {}) }, // 获取用户信息 getUserInfo() { let userInfo = localStorage.getItem('userInfo') if (userInfo) { userInfo = JSON.parse(userInfo) this.userInfo = userInfo this.getGrowthTagList() //获取并设置标签 } else { this.$toast.loading({ message: '加载中...', duration: 0, forbidClick: true, }) this.yxAxios.get(`${this.proxyUrl}/api/wx/wx1c630c8773c482f1/getUserInfo?unionId=${this.unionId}`).then((res) => { this.$toast.clear() if (res.data.code == 200) { this.userInfo = res.data.data // this.showData = true this.getGrowthTagList() //获取并设置标签 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', JSON.stringify(res.data.data.schoolNames[0])) } } else { localStorage.setItem('schoolNames', []) this.$store.commit('changeSchool', []) } } else { console.log('getUserInfo失败') this.getGrowthTagList() //获取并设置标签 } }) } }, setWxShare() { // 设置分享 this.$emit('getWxConfig', { title: '成长印记', // 分享标题 desc: '', // 分享描述 link: `https://payment.myjxt.com/center/#/GrowUp`, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: 'https://payment.myjxt.com/share_qxy.png', // 分享图标 }) }, }, components: { Tabbar3, ImgBox, }, } </script> <style lang="scss"> #growUp { min-height: 100%; box-sizing: border-box; background: rgb(245, 246, 250); padding-bottom: 140px; .head { width: 100%; position: relative; .head_img { width: 100%; } .mask { width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0) 20%, #10387f); position: absolute; top: 0; left: 0%; .title { font-size: 40px; color: #fff; font-weight: bold; margin-top: 164px; line-height: 56px; margin-left: 36px; } .grow_up_btn_box { display: flex; align-items: center; font-size: 24px; margin-top: 34px; margin-left: 36px; .btn { display: flex; align-items: center; color: #fff; .icon { font-size: 40px; color: #635ff1; margin-right: 14px; } } .line { font-size: 24px; color: #608ac4; margin-left: 14px; margin-right: 26px; } } } } .tabsCard.ignore { width: 100vw; height: 44px; position: relative; z-index: 1; .title.ignore { display: none; } .tab_toggle.ignore { width: 44px; height: 44px; background: #fff; position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; .icon { font-size: 20px; transition: 0.3s ease; } } .van-tabs { height: 44px; } .van-tab { font-size: 3.733vw; line-height: 44px; justify-content: flex-start; } .van-tabs__wrap { width: calc(100% - 44px); } &.open { .title.ignore { display: block; font-size: 14px; color: #646566; background: #fff; padding: 6px 44px 0 10px; } .tab_toggle.ignore { .icon { transform: rotate(180deg); } } .van-tab { display: inline-block; line-height: 24px; padding: 5px 0; margin-right: 10px; } .van-tab--active { font-weight: bold; } .van-tab__text { padding: 4px 8px; background: #eee; border-radius: 4px; } .van-tabs__wrap { width: 100%; height: auto; } .van-tabs__nav { display: block; padding: 6px 0 10px 10px; } .van-tabs__line { display: none; } } } .item_box { .item { padding: 40px 24px; background: #fff; &:not(:last-of-type) { margin-bottom: 16px; } .top { .user_img { width: 74px; height: 74px; border-radius: 5px; overflow: hidden; float: left; margin-right: 14px; } .title { font-size: 28px; color: #999; span { display: inline-block; font-size: 20px; color: #4092ff; border: 1px solid #4092ff; border-radius: 6px; padding: 4px 6px; margin-left: 8px; } } .time { font-size: 24px; color: #999; } } .content { font-size: 28px; margin-top: 24px; line-height: 50px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; &.open { display: block; } .tag { color: #4092ff; margin-right: 10px; } } .read_more { display: inline-block; padding: 10px 0; color: #999; font-size: 30px; } .course_link { width: 100%; background: #eff1f4; border-radius: 18px; margin-top: 20px; display: flex; align-items: center; .img_box { width: 146px; height: 146px; border-radius: 18px; overflow: hidden; position: relative; margin-right: 26px; flex-shrink: 0; .course_img { height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } } .title { font-size: 28px; margin-right: 26px; } } .action_bar { margin-top: 30px; display: flex; justify-content: space-between; .btn { font-size: 24px; display: inline-flex; align-items: center; margin-right: 28px; .icon { font-size: 40px; margin-right: 8px; } .active { color: red; } } .del_btn { margin-right: 0; } } } } .edit_box { width: 106px; height: 106px; border-radius: 50%; background: #3074ff; position: fixed; bottom: 200px; right: 24px; display: flex; align-items: center; justify-content: center; .icon { font-size: 60px; color: #fff; } } } </style>