You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
355 lines
8.1 KiB
355 lines
8.1 KiB
<template>
|
|
<view class="wrap">
|
|
<view class="navBarBox" :class="{'hasbg':isScroll}" :style="{height:navBarBoxHeight+'px'}">
|
|
<!-- 状态栏占位 -->
|
|
<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
|
|
<!-- 真正的导航栏内容 -->
|
|
<view class="navBar" :style="{'height':navBarHeight+'px','line-height':navBarHeight+'px'}">
|
|
<view>斜塘街道基层党员冬训</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<!-- <privacy-popup ref="privacyComponent" @agree-privacy="onAgreePrivacy"
|
|
@reject-privacy="onRejectPrivacy"></privacy-popup> -->
|
|
<!-- #endif -->
|
|
<view class="topbg">
|
|
<image class="topbg" :src="require('@/static/index-top.png')"></image>
|
|
</view>
|
|
<view :style="{'margin-top':bannerTop+'rpx'}">
|
|
<image class="banner" src="https://vr.langye.net/images/index-banner.png"></image>
|
|
</view>
|
|
<view class="content-content">
|
|
<view class="icons">
|
|
<block v-for="(item,index) in iconList">
|
|
<image v-if="index<3" :src="item.src" @click="toMenu(item.id)"></image>
|
|
</block>
|
|
</view>
|
|
<view class="icons icons-out">
|
|
<image v-for="item in iconOutList" :src="item.src" @click="toMenuOut(item.url)"></image>
|
|
</view>
|
|
</view>
|
|
<image class="menus-title" :src="require('@/static/index-title.png')"></image>
|
|
<view class="menus-list">
|
|
<view class="menus-list-item" v-for="item in menuList" @click="toDetail(item.id)">
|
|
<image class="menus-list-img" :src="item.poster?item.poster:replaceImg"></image>
|
|
<view class="menus-list-title">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="hasNomore" class="hasNomore">————没有更多了————</view>
|
|
</view>
|
|
<tabbar :current-page="0"></tabbar>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import tabbar from "../../components/tabbar/tabbar.vue"
|
|
import {
|
|
isNull,
|
|
shareInfo
|
|
} from '@/common/util.js'
|
|
import PrivacyPopup from '@/components/privacy-popup/privacy-popup.vue';
|
|
|
|
export default {
|
|
components: {
|
|
tabbar,
|
|
PrivacyPopup
|
|
},
|
|
data() {
|
|
return {
|
|
navBarBoxHeight: 0,
|
|
navBarTop: 0,
|
|
bannerTop: 0,
|
|
navBarHeight: 0,
|
|
isScroll: false,
|
|
|
|
iconList: [{
|
|
id: 6,
|
|
src: require("@/static/index-icon1.png"),
|
|
title: '课件汇编'
|
|
}, {
|
|
id: 12,
|
|
src: require("@/static/index-icon2.png"),
|
|
title: '理“响”微讲“塘”'
|
|
}, {
|
|
id: 13,
|
|
src: require("@/static/index-icon3.png"),
|
|
title: '学习动态'
|
|
}, {
|
|
id: 11,
|
|
src: '',
|
|
title: '学习新思想'
|
|
}],
|
|
iconOutList: [{
|
|
url: "https://vr.langye.net/h5xtdk/",
|
|
src: require("@/static/index-icon4.png"),
|
|
title: "党员冬训walk行"
|
|
}, {
|
|
url: "https://vr.langye.net/h5xtdt/",
|
|
src: require("@/static/index-icon5.png"),
|
|
title: '百步芳草 与理同行'
|
|
}],
|
|
replaceImg: require("@/static/index-img.png"),
|
|
menuList: [],
|
|
currentPage: 1,
|
|
hasNomore: false,
|
|
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return shareInfo
|
|
},
|
|
onShareTimeline(){
|
|
return shareInfo
|
|
},
|
|
onLoad() {
|
|
|
|
const MenuButton = uni.getMenuButtonBoundingClientRect()
|
|
this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
|
|
this.navBarHeight = MenuButton.height
|
|
this.navBarBoxHeight = this.navBarTop + this.navBarHeight + 10
|
|
this.bannerTop = this.navBarBoxHeight * 2 - 360
|
|
// this.getMenu()
|
|
if (isNull(this.vuex_token)) {
|
|
this.getToken()
|
|
} else {
|
|
this.getMenuList(11, (this.currentPage))
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
onPageScroll(e) {
|
|
var that = this;
|
|
if (e.scrollTop > (this.navBarTop / 2)) {
|
|
that.isScroll = true;
|
|
} else {
|
|
that.isScroll = false;
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
if (true)
|
|
this.getMenuList(11, (this.currentPage + 1))
|
|
},
|
|
methods: {
|
|
onAgreePrivacy() {
|
|
// 用户同意隐私政策
|
|
// 在这里添加您想要执行的代码
|
|
console.log('User agreed to the privacy policy');
|
|
this.getToken()
|
|
},
|
|
onRejectPrivacy() {
|
|
// 用户拒绝隐私政策
|
|
// 在这里添加您想要执行的代码
|
|
console.log('User rejected the privacy policy');
|
|
},
|
|
toMenu(id) {
|
|
if (id) {
|
|
uni.navigateTo({
|
|
url: '/pages/menu/menu?id=' + id
|
|
})
|
|
}
|
|
},
|
|
toMenuOut(url) {
|
|
if (url) {
|
|
uni.navigateTo({
|
|
url: '/packages/h5/h5?url=' + url
|
|
})
|
|
}
|
|
},
|
|
toDetail(id) {
|
|
if (id) {
|
|
uni.navigateTo({
|
|
url: '/pages/detail/detail?id=' + id + '&menuTitle=学习新思想'
|
|
})
|
|
}
|
|
},
|
|
async getToken() {
|
|
await uni.login({
|
|
provider: 'weixin',
|
|
success: (res) => {
|
|
this.$u.api.login({
|
|
code: res.code
|
|
}).then(res => {
|
|
this.$u.vuex('vuex_token', res.token)
|
|
this.$u.api.user().then(res => {
|
|
this.$u.vuex('vuex_user', res)
|
|
this.getMenuList(11, this.currentPage)
|
|
})
|
|
}).catch(err=>{
|
|
console.log('login-error:',JSON.stringify(err))
|
|
})
|
|
},
|
|
fail: (res) => {
|
|
console.log("errtoken", JSON.stringify(res))
|
|
}
|
|
});
|
|
},
|
|
async getMenu() {
|
|
const res = await this.$u.api.baseFormIndex({
|
|
page: 1,
|
|
page_size: 9999,
|
|
table_name: 'study_columns',
|
|
})
|
|
const parArr = res.data.filter(item => item.pid === 0)
|
|
parArr.map(item => {
|
|
this.menuList.map(m => {
|
|
if (item.title === m.title) {
|
|
m.id = parArr.id
|
|
}
|
|
})
|
|
})
|
|
},
|
|
async getMenuList(id, currentPage) {
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
})
|
|
let that = this
|
|
const res = await this.$u.api.getAudios({
|
|
study_column_id: id,
|
|
page: currentPage
|
|
})
|
|
|
|
if (res.data.length === 0 && currentPage > 0) {
|
|
uni.stopPullDownRefresh(); // 服务器总条数 < 每页条数, 会将第一页的条数重新返回
|
|
// 已加载到最后一页
|
|
that.hasNomore = true
|
|
uni.showToast({
|
|
title: '没有更多了',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
if (currentPage == 1) {
|
|
that.menuList = res.data;
|
|
} else {
|
|
that.menuList.push(...res.data);
|
|
}
|
|
|
|
that.currentPage = currentPage;
|
|
uni.hideLoading()
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.wrap {
|
|
.navBarBox {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
padding: 0 20rpx;
|
|
|
|
.navBar {
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
text-align: left;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.hasbg {
|
|
background: linear-gradient(to right, #da212d, #f96666);
|
|
}
|
|
|
|
.content {
|
|
padding-bottom: 180rpx;
|
|
|
|
.topbg {
|
|
width: 100%;
|
|
height: 360rpx;
|
|
}
|
|
|
|
.banner {
|
|
width: 98%;
|
|
height: 383rpx;
|
|
margin: 0 auto;
|
|
display: block;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
&-content {
|
|
padding: 0 20rpx;
|
|
|
|
.icons {
|
|
margin: 24rpx 0;
|
|
margin-top: 12rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
image {
|
|
width: 238rpx;
|
|
height: 283rpx;
|
|
}
|
|
}
|
|
|
|
.icons-out {
|
|
margin: 0;
|
|
|
|
image {
|
|
width: 360rpx;
|
|
height: 195rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menus-title {
|
|
width: 100%;
|
|
height: 85rpx;
|
|
margin-top: 48rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.menus-list {
|
|
padding: 0 30rpx;
|
|
|
|
&-item {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
padding: 25rpx;
|
|
box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.2);
|
|
border-radius: 25rpx;
|
|
margin-bottom: 24rpx;
|
|
// box-shadow: ;
|
|
|
|
}
|
|
|
|
&-img {
|
|
width: 196rpx;
|
|
height: 129rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
&-title {
|
|
color: #333;
|
|
font-size: 32rpx;
|
|
width: 450rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.hasNomore {
|
|
text-align: center;
|
|
color: #a4a4a4;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
}
|
|
|
|
// background: url(@/static/index-top.png) no-repeat top left;
|
|
// background-size: 100% 100%;
|
|
// width:100%;
|
|
// height:360rpx;
|
|
}
|
|
</style> |