feat: 初始化
This commit is contained in:
George
35
pages/news/detail.scss
Normal file
35
pages/news/detail.scss
Normal file
@ -0,0 +1,35 @@
|
||||
.container {
|
||||
padding: 0 40upx 16px;
|
||||
.title {
|
||||
margin: 14px 0 15px;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 40upx;
|
||||
column-gap: 20upx;
|
||||
margin-top: 40upx;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
.news-desc {
|
||||
width: 100%;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
font-size: 24upx;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 18upx;
|
||||
height: 18upx;
|
||||
margin-right: 15upx;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
94
pages/news/detail.vue
Normal file
94
pages/news/detail.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<NavBar />
|
||||
<view class="container">
|
||||
<view class="title">
|
||||
<PageTitle :title="$t('menu.news')" />
|
||||
</view>
|
||||
<Spin v-show="loading" />
|
||||
<view class="content" v-if="detail">
|
||||
<view class="news-title">{{ detail.title }}</view>
|
||||
<view class="news-desc">
|
||||
<image class="icon" src="/static/clock.svg"></image>
|
||||
<text>{{ detail.release_time }}</text>
|
||||
</view>
|
||||
<view class="news-content" v-html="detail.content"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { getNewsDetail } from '@/services/news';
|
||||
// #ifndef H5
|
||||
import * as cheerio from 'cheerio';
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: undefined,
|
||||
detail: undefined,
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleImages(htmlContent) {
|
||||
// #ifdef H5
|
||||
var parser = new DOMParser();
|
||||
var doc = parser.parseFromString(htmlContent, 'text/html');
|
||||
var images = doc.getElementsByTagName('img');
|
||||
Array.from(images).forEach(function(img) {
|
||||
var width = img.getAttribute("width");
|
||||
if (!isNaN(parseFloat(width)) && parseFloat(width) > 200) {
|
||||
img.setAttribute('width', '100%');
|
||||
img.setAttribute('height', 'auto');
|
||||
}
|
||||
});
|
||||
return doc.documentElement.innerHTML;
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
const $ = cheerio.load(htmlContent);
|
||||
const images = $('img')
|
||||
Array.from(images).forEach(function(img) {
|
||||
var width = $(img).attr('width')
|
||||
if (!isNaN(parseFloat(width)) && parseFloat(width) > 200) {
|
||||
$(img).attr('width', '100%');
|
||||
$(img).attr('height', 'auto');
|
||||
}
|
||||
})
|
||||
return $.html();
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const { id } = options;
|
||||
this.id = id;
|
||||
this.loading = true;
|
||||
getNewsDetail({ id })
|
||||
.then((resp) => {
|
||||
if (resp.code == 0) {
|
||||
if (resp.data.content) {
|
||||
resp.data.content = this.handleImages(resp.data.content)
|
||||
}
|
||||
this.detail = resp.data;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './detail.scss';
|
||||
</style>
|
||||
<style>
|
||||
.news-content {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
119
pages/news/index.scss
Normal file
119
pages/news/index.scss
Normal file
@ -0,0 +1,119 @@
|
||||
.container {
|
||||
padding: 0 40upx 16px;
|
||||
.title {
|
||||
margin: 14px 0 15px;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 40upx;
|
||||
margin-top: 40upx;
|
||||
}
|
||||
|
||||
.news-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 40upx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-news {
|
||||
width: 100%;
|
||||
box-shadow: -1px 0px 5px 1px rgba(0, 0, 0, 0.15);
|
||||
cursor: pointer;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 378upx;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 36upx 40upx;
|
||||
|
||||
.news-title {
|
||||
font-size: 36upx;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
margin-bottom: 36upx;
|
||||
}
|
||||
|
||||
.news-footer {
|
||||
width: 100%;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
font-size: 24upx;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 18upx;
|
||||
height: 18upx;
|
||||
margin-right: 15upx;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.news-item {
|
||||
width: 325upx;
|
||||
height: 354upx;
|
||||
box-shadow: -1px 0px 5px 1px rgba(0, 0, 0, 0.15);
|
||||
cursor: pointer;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 184upx;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 30upx 20upx 24upx;
|
||||
min-height: 170upx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.news-title {
|
||||
font-size: 36upx;
|
||||
font-weight: 500;
|
||||
margin-bottom: auto;
|
||||
font-size: 28upx;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
.news-footer {
|
||||
width: 100%;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
font-size: 24upx;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 18upx;
|
||||
height: 18upx;
|
||||
margin-right: 15upx;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uni-ellipsis-2 {
|
||||
/* #ifndef APP-NVUE */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 2;
|
||||
text-overflow: ellipsis;
|
||||
/* #endif */
|
||||
}
|
||||
112
pages/news/index.vue
Normal file
112
pages/news/index.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<NavBar />
|
||||
<view class="container">
|
||||
<view class="title">
|
||||
<PageTitle :title="$t('menu.news')" />
|
||||
</view>
|
||||
<view class="content">
|
||||
<Spin v-show="loading1" />
|
||||
<view v-if="newsList && newsList.length" class="top-news" @click="goDetail(newsList[0].id)">
|
||||
<image class="img" mode="aspectFill" :src="newsList[0].img_url"></image>
|
||||
<view class="info">
|
||||
<view class="news-title uni-ellipsis-2">{{ newsList[0].title }}</view>
|
||||
<view class="news-footer">
|
||||
<image class="icon" src="/static/clock.svg"></image>
|
||||
<text>{{ newsList[0].release_time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="news-list">
|
||||
<template v-for="(item, index) in newsList">
|
||||
<view v-if="index > 0" class="news-item" @click="goDetail(item.id)">
|
||||
<image class="img" mode="aspectFill" :src="item.img_url"></image>
|
||||
<view class="info">
|
||||
<view class="news-title uni-ellipsis-2">{{ item.title }}</view>
|
||||
<view class="news-footer">
|
||||
<image class="icon" src="/static/clock.svg"></image>
|
||||
<text>{{ item.release_time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<uni-load-more v-if="newsList && newsList.length" :status="loadStatus"></uni-load-more>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryNewsList } from '@/services/news';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchFormData: {
|
||||
curr_page: 1,
|
||||
page_size: 21
|
||||
},
|
||||
loading: false,
|
||||
loading1: false,
|
||||
total: 0,
|
||||
newsList: [],
|
||||
hasMore: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
loadStatus() {
|
||||
if (this.loading) {
|
||||
return 'loading';
|
||||
}
|
||||
if (this.newsList && this.newsList.length) {
|
||||
if (this.newsList.length < this.total) {
|
||||
return 'more';
|
||||
}
|
||||
}
|
||||
return 'no-more';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getListData() {
|
||||
this.loading1 = true;
|
||||
const res = await queryNewsList(this.searchFormData);
|
||||
if (res && res.code === 0) {
|
||||
this.total = res.data.totalRecords;
|
||||
this.newsList = res.data.records;
|
||||
this.searchFormData.curr_page = this.newsList && this.total > this.newsList.length ? 2 : 1;
|
||||
this.hasMore = this.newsList && this.total > this.newsList.length;
|
||||
}
|
||||
this.loading1 = false;
|
||||
},
|
||||
goDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/news/detail?id=' + id
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getListData();
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.loading || !this.hasMore) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
queryNewsList(this.searchFormData)
|
||||
.then((res) => {
|
||||
if (res && res.code === 0) {
|
||||
this.total = res.data.totalRecords;
|
||||
this.newsList = [...this.newsList, ...res.data.records];
|
||||
this.searchFormData.curr_page = this.total > this.newsList.length ? this.searchFormData.curr_page + 1 : this.searchFormData.curr_page;
|
||||
this.hasMore = this.total > this.newsList.length;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user