259 lines
6.8 KiB
Vue
259 lines
6.8 KiB
Vue
|
<!-- 专题栏 -->
|
|||
|
|
<template>
|
|||
|
|
<!-- #ifdef APP -->
|
|||
|
|
<view class="mobile-wall" :style="{ backgroundImage: `url(${myFileUrl+background})`,paddingTop: CustomBar+'rpx' }">
|
|||
|
|
<view class="app-top" :style="{ height: CustomBar+'rpx',
|
|||
|
|
background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifndef APP -->
|
|||
|
|
<view class="mobile-wall" :style="{ backgroundImage: `url(${myFileUrl+background})` }">
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<view class="wall-top">
|
|||
|
|
<!-- #ifdef MP -->
|
|||
|
|
<view :style="{height: `${StatusBar}px`}"></view>
|
|||
|
|
<view class="app-top" :style="{height: `${StatusBar}px`,background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})`}"></view>
|
|||
|
|
<view class="mobile-logo" :style="{height: `${CustomBarHeight}px`,backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifndef MP -->
|
|||
|
|
<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<u-icon name="arrow-left" size="40" class="back" @click="back"
|
|||
|
|
:color="topLevel===0? '#f9f9f9' : `rgba(194, 234, 4,${topLevel})`"></u-icon>
|
|||
|
|
<image :src="myFileUrl+logo"></image>
|
|||
|
|
<view style="width: 75rpx;"></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="wall-search">
|
|||
|
|
<u-search height="80" bgColor="#fff" placeholder="请输入关键字" clearabled animation v-model="form.name"
|
|||
|
|
:actionStyle="{color: '#c2ea04'}" @custom="search" @clear="search"></u-search>
|
|||
|
|
</view>
|
|||
|
|
<view class="wall-special">
|
|||
|
|
<u-section title="专栏" :subTitle="`总数 ${total}`"
|
|||
|
|
color="#cbe7fb" fontSize="34" :arrow="false" subColor="#cbe7fb" />
|
|||
|
|
<scroll-view :scroll-top="scrollTop" :scrollY="true" class="specialList"
|
|||
|
|
scroll-with-animation @scroll="scroll">
|
|||
|
|
<view class="special-list">
|
|||
|
|
<view @click="toDetail(item.id)" class="special-item" v-for="(item,index) in specialList" :key="index">
|
|||
|
|
<image :src="encodeURI(staticIp+(item.icon||'static/pixel/home/default-work.png'))"></image>
|
|||
|
|
<view class="si-text">{{ item.name }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-loadmore @loadmore="getMore" :status="isFinish" color="#a7b6b8" marginTop="30" marginBottom="20" />
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view @click="goTop">
|
|||
|
|
<u-back-top :scrollTop="oldScrollTop" zIndex="100" :iconStyle="{ color: '#fff' }"
|
|||
|
|
:customStyle="{background: 'linear-gradient(180deg, #2D3240 0%, #a7b6b8 100%)',filter: 'opacity(0.96)'}"></u-back-top>
|
|||
|
|
</view>
|
|||
|
|
<u-toast ref="uToast"></u-toast>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import configService from '@/common/config.service.js';
|
|||
|
|
export default {
|
|||
|
|
data(){
|
|||
|
|
return{
|
|||
|
|
// #ifdef MP
|
|||
|
|
// 微信小程序自定义导航栏参数
|
|||
|
|
StatusBar: this.StatusBar || 0,
|
|||
|
|
CustomBarHeight: this.Custom.height+(this.Custom.top-this.StatusBar)*2 || 0,
|
|||
|
|
// #endif
|
|||
|
|
loading: true,// 加载
|
|||
|
|
// 基础路径
|
|||
|
|
staticIp: configService.ip,
|
|||
|
|
myFileUrl: configService.fileUrl + 'pixel/my/',
|
|||
|
|
// 我的页面背景
|
|||
|
|
background: 'background.png',
|
|||
|
|
// logo图标
|
|||
|
|
logo: 'logo-new.png',
|
|||
|
|
// 顶部距离等级
|
|||
|
|
topLevel: 0,
|
|||
|
|
// 是否结束——loadmore加载更多，loading加载中，nomore无更多
|
|||
|
|
isFinish: 'nomore',
|
|||
|
|
form: {
|
|||
|
|
size: 10,
|
|||
|
|
current: 1,
|
|||
|
|
name: ''
|
|||
|
|
},
|
|||
|
|
// 总数
|
|||
|
|
total: 0,
|
|||
|
|
// 滚动顶部
|
|||
|
|
scrollTop: 0,
|
|||
|
|
oldScrollTop: 0,
|
|||
|
|
// 专题列表
|
|||
|
|
specialList: []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// #ifndef H5
|
|||
|
|
onPageScroll(e) {
|
|||
|
|
const level = e.scrollTop/60;
|
|||
|
|
if(level<=1) this.topLevel = level;
|
|||
|
|
else this.topLevel = 1;
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifdef H5
|
|||
|
|
mounted(){
|
|||
|
|
let that = this;
|
|||
|
|
window.onscroll = function () {
|
|||
|
|
//为了保证兼容性，这里取三个值，哪个有值取哪一个
|
|||
|
|
//scrollTop就是触发滚轮事件时滚轮的高度
|
|||
|
|
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
|||
|
|
const level = scrollTop/60;
|
|||
|
|
if(level<=1) that.topLevel = level;
|
|||
|
|
else that.topLevel = 1;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onHide() {
|
|||
|
|
window.onscroll = null;
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
methods:{
|
|||
|
|
// 返回
|
|||
|
|
back(){
|
|||
|
|
uni.navigateBack();
|
|||
|
|
},
|
|||
|
|
// 滚动回顶部
|
|||
|
|
goTop() {
|
|||
|
|
this.scrollTop = this.oldScrollTop;
|
|||
|
|
this.$nextTick(()=>{
|
|||
|
|
this.scrollTop = 0;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 滚动监听
|
|||
|
|
scroll(e){
|
|||
|
|
this.oldScrollTop = e.detail.scrollTop;
|
|||
|
|
},
|
|||
|
|
// 加载更多
|
|||
|
|
getMore(){
|
|||
|
|
if(this.isFinish === 'nomore') return;
|
|||
|
|
this.form.current++;
|
|||
|
|
this.getSpecialList();
|
|||
|
|
},
|
|||
|
|
// 前往推荐栏详情
|
|||
|
|
toDetail(id){
|
|||
|
|
if(id) uni.navigateTo({url: `/pages/mobile_web/wall/detail?id=${id}`})
|
|||
|
|
},
|
|||
|
|
// 获取专题列表
|
|||
|
|
async getSpecialList(){
|
|||
|
|
this.isFinish = 'loading';
|
|||
|
|
let res = await this.$api.getServices(this.form);
|
|||
|
|
if(res?.success){
|
|||
|
|
const { records, size, total, current } = res.data;
|
|||
|
|
if(current === 1) this.specialList = records;
|
|||
|
|
else this.specialList.push(...records);
|
|||
|
|
this.isFinish = size*current >= total ? 'nomore' : 'loadmore';
|
|||
|
|
this.total = total;
|
|||
|
|
}else{
|
|||
|
|
this.$refs.uToast.show({type:'error',title: "专题列表获取失败!"});
|
|||
|
|
this.isFinish = 'loadmore';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 搜索
|
|||
|
|
search(){
|
|||
|
|
this.isFinish = 'loadmore';
|
|||
|
|
this.form.current = 1;
|
|||
|
|
this.getSpecialList();
|
|||
|
|
},
|
|||
|
|
// 初始化
|
|||
|
|
init(){
|
|||
|
|
this.form = {size: 10,current: 1};
|
|||
|
|
this.getSpecialList();
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.init();
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.mobile-wall{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-size: cover;
|
|||
|
|
// #ifdef APP || MP
|
|||
|
|
.app-top{
|
|||
|
|
width: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 81;
|
|||
|
|
top: 0;
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
.wall-top{
|
|||
|
|
// #ifdef APP
|
|||
|
|
.app-top{
|
|||
|
|
width: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 81;
|
|||
|
|
top: 0;
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
.mobile-logo{
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
.back{
|
|||
|
|
margin-left: 35rpx;
|
|||
|
|
margin-top: 5rpx
|
|||
|
|
}
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 81;
|
|||
|
|
padding: 15rpx 0;
|
|||
|
|
image{
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 45rpx;
|
|||
|
|
}
|
|||
|
|
// .u-icon{
|
|||
|
|
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.wall-search{
|
|||
|
|
margin: 120rpx 40rpx 32rpx;
|
|||
|
|
}
|
|||
|
|
.wall-special{
|
|||
|
|
margin: 50rpx 40rpx 32rpx;
|
|||
|
|
background-color: rgba(160, 160, 160, 0.4);
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 40rpx 25rpx 20rpx;
|
|||
|
|
color: #f9f9f9;
|
|||
|
|
.specialList{
|
|||
|
|
margin: 30rpx 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 70vh;
|
|||
|
|
.special-list{
|
|||
|
|
display: grid;
|
|||
|
|
grid-gap: 26rpx;
|
|||
|
|
grid-template-columns: repeat(2,1fr);
|
|||
|
|
.special-item{
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: #2D3240;
|
|||
|
|
color: #a7b6b8;
|
|||
|
|
padding: 30rpx 20rpx;
|
|||
|
|
image{
|
|||
|
|
width: 210rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
}
|
|||
|
|
.si-text{
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
&:active{
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|