Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 c4259475 作者: 吴佳伟
操作

feat: 热门产地行情换成热点新闻

上级 8953e752
正在显示 包含 331 行增加 和 87 行删除
src/api/model/news.ts 0 → 100644
// 上传请求
import { otherHttp } from '/@/utils/http/axios'
enum Api {
list = '/news/list',
detail = '/news/detail',
viewCount = '/news/viewCount',
}
/**
* @description: 获取列表
*/
export function getList(params) {
return otherHttp.get({ url: Api.list, params })
}
/**
* @description: 获取详情
*/
export function getDetail(params) {
return otherHttp.get({ url: Api.detail, params })
}
/**
* @description: 记录浏览次数
*/
export function addViewCount(params) {
return otherHttp.post({
url: Api.viewCount,
params,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
src/pages.json
......@@ -474,6 +474,18 @@
"bounce": "none"
}
}
},
{
"path": "pages/news/index",
"style": {
"navigationBarTitleText": "热点新闻"
}
},
{
"path": "pages/news/detail",
"style": {
"navigationBarTitleText": "新闻内容"
}
}
],
"easycom": {
......
src/pages/news/detail.vue 0 → 100644
<template>
<view class="p-3" style="font-family: '思源黑体'; font-weight: 400;">
<view class="flex flex-col justify-between mt-1 mb-6">
<view class="text-35 color-#333333 text-center mb-3">{{ detail?.title }}</view>
<view class="flex flex-col text-25 color-#686868">
<view class="flex flex-row justify-between">
<text>{{ detail?.editor }}</text>
<text class="ml-5">{{ detail?.source }}</text>
</view>
<view class="flex flex-row justify-between">
<text>{{
!isNull(detail) ? '时间: ' + dayjs(detail?.publishDate).format('YYYY年MM月DD日') : ''
}}</text>
<view class="mr-1">
<img v-show="detail?.viewCount" class="mr-1" src="/src/static/images/news/views.png" />
<text>{{ detail?.viewCount }}</text>
</view>
</view>
</view>
</view>
<view class="w-full text-28">
<view v-for="(content, index) in detail?.contentBlocks" :key="index" class="mb-1">
<view v-show="content.type === 'VIDEO'">
<video class="w-full" :src="content.url ? content.url : ''" controls />
</view>
<view v-show="content.type === 'PARAGRAPH'" style="text-indent: 2rem;">
<text>{{ content.content }}</text>
</view>
<view v-show="content.type === 'IMAGE'">
<img class="w-full" :src="content.url ? content.url : ''" />
<text v-show="content.caption" class="w-full text-25 color-#686868 text-center" style="display: inline-block;">{{ content.caption }}</text>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import * as newsApi from '@/api/model/news'
import { isNull } from '@/utils/is'
import dayjs from 'dayjs'
interface Detail {
id: number
title: string
editor: string
source: string
publishDate: string
contentBlocks: ContentBlock[]
viewCount: number
}
interface ContentBlock {
type: 'VIDEO' | 'PARAGRAPH' | 'IMAGE'
url?: string
content?: string
caption: string
}
const detail = ref<Detail | null>(null)
const getInfo = async (id: string) => {
await newsApi.getDetail({ id }).then((res) => {
detail.value = res
addViewCount(id)
})
}
const addViewCount = async (id: string) => {
newsApi.addViewCount({ id })
}
onLoad(async (options) => {
await getInfo(options.id)
})
</script>
src/pages/news/index.vue 0 → 100644
<template>
<view class="w-full h-95vh p-2 bg-#E6F5E8">
<!-- <view class="tag-box">
<view class="tag" :class="infoType === 0 ? 'active' : ''" @click="switchNavigate(0)">
<img :src="infoType === 0 ? '/src/static/images/news/news-active.png' : '/src/static/images/news/news.png'" />
热点新闻
</view>
<view class="tag" :class="infoType === 1 ? 'active' : ''" @click="switchNavigate(1)">
<img :src="infoType === 1 ? '/src/static/images/news/policy-active.png' : '/src/static/images/news/policy.png'" />
农业政策
</view>
</view> -->
<!-- 列表 -->
<scroll-view class="w-full h-full" style="font-family: '思源黑体'; font-weight: 400;" scroll-y @scrolltolower="getNewsList(model.params)" :show-scrollbar="false">
<view
v-for="news in newsList"
:key="news.id"
class="w-full flex flex-row justify-around p-2 bg-#fff border-rd-lg mb-2 h-150"
@click="toNewsDetail(news)"
>
<view class="flex flex-col justify-between" :class="news.image ? 'w-70%' : 'w-full'">
<view class="text-28 color-#333333">{{ news.title }}</view>
<view class="flex flex-row justify-between text-25 color-#686868">
<text>{{ news.publishDate }}</text>
<view class="mr-1">
<img class="mr-1" src="/src/static/images/news/views.png" />
<text>{{ news.viewCount }}</text>
</view>
</view>
</view>
<view v-show="news.image" class="w-30% h-full">
<img class="w-full h-full border-rd" :src="news.image" />
</view>
</view>
<!-- 加载状态 -->
<view class="loading-status">
<text v-if="model.loading">加载中...</text>
<text v-else-if="!model.hasMore">没有更多数据了</text>
<text v-else>上拉加载更多</text>
</view>
</scroll-view>
</view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import * as NewsApi from '@/api/model/news'
interface News {
id: number
title: string
editor: string
source: string
publishDate: string
image: string
viewCount: number
}
interface Policy {
id: number
title: string
timestamp: string
views: number
}
const model = reactive({
params: {
pageNo: 1,
pageSize: 10,
}, // 分页参数
hasMore: true, // 是否还有更多数据
loading: false, // 是否正在加载
})
const newsList = ref<News[]>([])
const policyList = ref<Policy[]>([])
const infoType = ref(0)
const navigateName = ref(['热点新闻', '农业政策'])
const getNewsList = async (params) => {
if (model.loading) return
model.loading = true
NewsApi.getList(params).then((res) => {
if (res.records.length > 0) {
const { records } = res
if (model.params.pageNo === 1) {
newsList.value = records
} else {
newsList.value = [...newsList.value, ...records]
}
model.hasMore = records.length === model.params.pageSize
model.params.pageNo++
} else {
model.hasMore = false
}
})
model.loading = false
}
const getPolicyList = async () => {}
const switchNavigate = (type: number) => {
infoType.value = type
uni.setNavigationBarTitle({
title: navigateName.value[type],
})
}
const toNewsDetail = (news) => {
uni.navigateTo({
url: '/pages/news/detail?id=' + news.id,
})
}
const resetData = () => {
model.params.pageNo = 1
model.hasMore = true
model.loading = false
newsList.value = []
}
onPullDownRefresh(() => {
resetData()
getNewsList(model.params)
})
// onReachBottom(() => {
// if (model.hasMore) {
// getNewsList(model.params)
// }
// })
onShow(() => {
resetData()
switchNavigate(0)
getNewsList(model.params)
getPolicyList()
})
</script>
<style lang="less" scoped>
.tag-box {
display: flex;
justify-content: space-around;
align-items: center;
.tag {
width: 45%;
height: 2.2rem;
border-radius: 1rem;
background-color: #fff;
color: #333;
text-align: center;
line-height: 2.2rem;
}
}
.active {
background-color: #5db66f !important;
color: #fff !important;
}
.loading-status {
text-align: center;
padding: 20rpx;
color: #999;
font-size: 28rpx;
}
</style>
src/pages/shouye/shouye.vue
......@@ -9,6 +9,7 @@
import { useDictStore } from '@/store/modules/dict'
import Navigate from '@/utils/page/navigate'
import * as AreaDict from '@/utils/dict/area'
import { getList } from '@/api/model/news'
const dictStore = useDictStore()
const model = reactive({
......@@ -134,8 +135,8 @@
getServiceItems()
// 查询天气信息
getWarningInfo()
// 查询热门产地行情
getProductMarketList()
// 获取热点新闻
getNews()
// 服务展示窗
getServiceStatsList()
// 农技课堂
......@@ -222,20 +223,12 @@
// 其他服务
serviceItems: [],
// 预警信息
warnings: [],
// 新闻资讯
newsItems: [],
// 农产品行情
productMarket: {
title: '热门产地行情',
// updateTime: '08-30日更新',
products: [
// { id: 1, name: '晚稻13号', price: '¥4120', change: '+1.2%', isUp: true },
// { id: 2, name: '晚稻9号', price: '¥3211', change: '+1.2%', isUp: true },
// { id: 3, name: '晚稻11号', price: '¥2120', change: '-1.2%', isUp: false },
],
},
// 服务展示窗
serviceStats: [
// {
......@@ -316,25 +309,7 @@
pageData.weather.warning = res[0].criteria
})
}
function getProductMarketList() {
HomeAPI.productMarketList({
status: 1,
}).then((res) => {
const { records } = res
console.log(res)
pageData.productMarket.products = records
pageData.productMarket.products.forEach((item: any) => {
switch (item.tendency) {
case 1:
item.isUp = true
break
case 2:
item.isUp = false
break
}
})
})
}
function getServiceStatsList() {
HomeAPI.serviceStatsList({
status: 1,
......@@ -356,6 +331,13 @@
function getWarning() {
HomeAPI.warning().then((res) => {
const { records } = res
pageData.warnings = records
})
}
function getNews() {
getList({ pageNo: 1, pageSize: 2}).then((res) => {
const { records } = res
pageData.newsItems = records
})
}
......@@ -404,12 +386,6 @@
}
}
// 农产品关注点击事件
function onProductFollowClick(product: any) {
console.log('点击关注农产品:', product)
// 在这里添加具体的关注逻辑
}
// 查看更多农技课堂
function onViewMoreClass() {
console.log('查看全部农技课堂')
......@@ -499,6 +475,17 @@
showCancel: false,
})
}
function toNewsList() {
uni.navigateTo({
url: '/pages/news/index',
})
}
function toNewsDetail(item) {
uni.navigateTo({
url: '/pages/news/detail?id=' + item.id,
})
}
onHide(() => {
// 停止所有其他视频的播放（只暂停，不重置位置）
......@@ -675,7 +662,7 @@
>
<swiper-item
id="scroll-view-content"
v-for="item of pageData.newsItems"
v-for="item of pageData.warnings"
:key="item.id"
class="codefun-flex-col"
@click="onClickWarning(item)"
......@@ -709,59 +696,25 @@
<view class="codefun-self-end section_7" />
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-baseline group_12">
<text class="font_6">{{ pageData.productMarket.title }}</text>
<!-- <text class="font_7 text_22">{{ pageData.productMarket.updateTime }}</text> -->
<text class="font_6">热点新闻</text>
<text class="text-28 font-extralight color-#5DB66F mr-4" @click="toNewsList">
更多<fui-icon name="right" size="30" color="#5DB66F"/>
</text>
</view>
<view class="codefun-flex-row equal-division section_8">
<view class="codefun-flex-col equal-division bg-#fff border-rd-lg">
<view
v-for="(product, index) in pageData.productMarket.products"
:key="product.id"
class="codefun-flex-col group_13"
:class="{
group_17: index === 0,
group_39: index === 1,
group_21: index === 2,
}"
>
<view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-center codefun-relative group_1"
>
<text class="font_8 text_23">{{ product.name }}</text>
<text class="font_9 text_23" :class="`pos${index > 0 ? `_${index + 1}` : ''}`"
>￥{{ product.current_price }}</text
v-for="news in pageData.newsItems"
:key="news.id"
class="w-full h-110 flex flex-row justify-around p-2"
@click="toNewsDetail(news)"
>
<view class="w-70% flex flex-col justify-between" :class="news.image ? 'w-70%' : 'w-full'">
<view class="text-25 color-#333333">{{ news.title }}</view>
<view class="text-25 color-#686868">{{ dayjs(news.publishDate).format('YYYY年MM月DD日') }}</view>
</view>
<view
class="codefun-flex-row codefun-items-center codefun-self-stretch"
:class="{
section_10: product.isUp,
section_11: !product.isUp,
}"
>
<image
class="codefun-shrink-0 image_14"
:src="
product.isUp
? '/static/images/codefun/c6f953be58ac3e9752ab9475a2a53c14.png'
: '/static/images/codefun/c7e797cc626699dcc8999a72145e9f8b.png'
"
/>
<text
class="font_10 ml-3"
:class="{
text_25: product.isUp,
text_24: !product.isUp,
text_26: !product.isUp,
}"
>
{{ `${product.percent}%` }}
</text>
<view v-show="news.image" class="w-30% h-150">
<img class="w-full h-full border-rd" :src="news.image" />
</view>
<!-- <view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_6"
@click="onProductFollowClick(product)">
<text class="font_11">点击关注</text>
</view> -->
</view>
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-baseline group_15">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论