Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 f6ee7c68 作者: 方治民
操作

fix: 修复错误使用 img 标签渲染图片引起 APP 打包后图片无法显示的问题

上级 f4f824b0
正在显示 包含 108 行增加 和 108 行删除
src/pages/chanxiao/chanxiao.vue
......@@ -274,13 +274,13 @@
@click="Navigate.to(channel.link)"
>
<view class="channel-list-left">
<img class="channel-imgLeft" :src="channel.iconLeft" />
<image class="channel-imgLeft" :src="channel.iconLeft" />
</view>
<view class="channel-list-center">
<img
<image
class="channel-imgCenter"
:style="
channel.icon.indexOf('菜鲜宜') > 0 ? 'width: 100rpx; height: 40rpx' : ''
channel.icon.indexOf('caixianyi') > 0 ? 'width: 100rpx; height: 40rpx' : ''
"
:src="channel.icon"
/>
......
src/pages/knowledgeVideo/detail.vue
......@@ -13,7 +13,7 @@
!isNull(detail) ? '时间: ' + dayjs(detail?.publishDate).format('YYYY年MM月DD日') : ''
}}</text>
<view class="mr-1">
<img v-show="detail?.viewCount" class="mr-1" src="/static/images/news/views.png" />
<image v-show="detail?.viewCount" class="mr-1" src="/static/images/news/views.png" />
<text>{{ detail?.viewCount }}</text>
</view>
</view>
......
src/pages/knowledgeVideo/index.vue
......@@ -11,7 +11,7 @@
<view class="text-25 mt-1 mb-2">{{ item.title }}</view>
<view class="flex justify-between text-25 color-#686868">
<view class="mr-1">
<img class="mr-1" src="/static/images/news/views.png" />
<image class="mr-1" src="/static/images/news/views.png" />
<text>{{ item.viewCount }}</text>
</view>
<text>{{ dayjs(item.publishDate).format('MM-DD') }}</text>
......
src/pages/mine/index.vue
......@@ -235,7 +235,7 @@
<view class="px-6 pt-4">
<view class="w-full h-130rpx pl-3 border-rd-lg bg-#fff flex justify-between items-center">
<view class="w-40% flex flex-row">
<img src="/static/images/codefun/shield.png" />
<image src="/static/images/codefun/shield.png" class="w-100 h-100" />
<view class="color-#FFAA1E text-50 line-height-loose">726</view>
</view>
<view class="w-60%">
......
src/pages/news/detail.vue
<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="/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 dayjs from 'dayjs'
import * as newsApi from '@/api/model/news'
import { isNull } from '@/utils/is'
import dayjs from 'dayjs'
interface Detail {
id: number
......@@ -64,14 +22,14 @@
const detail = ref<Detail | null>(null)
const getInfo = async (id: string) => {
async function getInfo(id: string) {
await newsApi.getDetail({ id }).then((res) => {
detail.value = res
addViewCount(id)
})
}
const addViewCount = async (id: string) => {
async function addViewCount(id: string) {
newsApi.addViewCount({ id })
}
......@@ -79,3 +37,45 @@
await getInfo(options.id)
})
</script>
<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 flex-center">
<image v-show="detail?.viewCount" class="mr-1 w-30 h-26" 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></video>
</view>
<view v-show="content.type === 'PARAGRAPH'" style="text-indent: 2rem">
<text>{{ content.content }}</text>
</view>
<view v-show="content.type === 'IMAGE'">
<image 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>
src/pages/news/index.vue
<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 ? '/static/images/news/news-active.png' : '/static/images/news/news.png'" />
热点新闻
</view>
<view class="tag" :class="infoType === 1 ? 'active' : ''" @click="switchNavigate(1)">
<img :src="infoType === 1 ? '/static/images/news/policy-active.png' : '/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="/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'
......@@ -82,7 +32,7 @@
const infoType = ref(0)
const navigateName = ref(['热点新闻', '农业政策'])
const getNewsList = async (params) => {
async function getNewsList(params) {
if (model.loading) return
model.loading = true
NewsApi.getList(params).then((res) => {
......@@ -102,22 +52,22 @@
})
model.loading = false
}
const getPolicyList = async () => {}
async function getPolicyList() {}
const switchNavigate = (type: number) => {
function switchNavigate(type: number) {
infoType.value = type
uni.setNavigationBarTitle({
title: navigateName.value[type],
})
}
const toNewsDetail = (news) => {
function toNewsDetail(news) {
uni.navigateTo({
url: '/pages/news/detail?id=' + news.id,
url: `/pages/news/detail?id=${news.id}`,
})
}
const resetData = () => {
function resetData() {
model.params.pageNo = 1
model.hasMore = true
model.loading = false
......@@ -143,6 +93,56 @@
})
</script>
<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)">
<image :src="infoType === 0 ? '/static/images/news/news-active.png' : '/static/images/news/news.png'" />
热点新闻
</view>
<view class="tag" :class="infoType === 1 ? 'active' : ''" @click="switchNavigate(1)">
<image :src="infoType === 1 ? '/static/images/news/policy-active.png' : '/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">
<image class="mr-1" src="/static/images/news/views.png" />
<text>{{ news.viewCount }}</text>
</view>
</view>
</view>
<view v-show="news.image" class="w-30% h-full">
<image 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>
<style lang="less" scoped>
.tag-box {
display: flex;
......
src/pages/shouye/shouye.vue
......@@ -716,7 +716,7 @@
}}</view>
</view>
<view v-show="news.image" class="w-30% h-150">
<img class="w-full h-full border-rd" :src="news.image" />
<image class="w-full h-full border-rd" :src="news.image" />
</view>
</view>
</view>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论