Antecedentes: si la aplicación Ruoyi en el terminal móvil no tiene contenido de notificación, este artículo desarrolla la lista de notificaciones y los detalles y la parte frontal de la interfaz basada en uview2, sin cambiar el contenido de la parte trasera.
1. Introducir la referencia uview2.0
Ruoyi terminal móvil Ruoyi-App——introducir el proyecto de desarrollo uview2.0
2. Crear una nueva página de lista de notificaciones
Cree un nuevo directorio de proyecto como "whalesystem" en las páginas del directorio raíz de RuoYi-App-master, luego cree un nuevo directorio de avisos en el sistema de ballenas y cree una nueva página list_notice.vue
<template>
<view class="page-notification">
<view>
<u-search placeholder="请输入查询内容" v-model="params.noticeTitle" height="60rpx" @search="searchData" @custom="searchData"></u-search>
</view>
<view>
<u-list v-if="noticeList.length > 0" @scrolltolower="scrolltolower" >
<u-list-item v-for="(item, index) in noticeList" :key="index" class="notice-item" >
<view @click="navTo(item)">
<view><text style="color: #606266;"></text><text>{
{item.noticeTitle}}</text></view>
<view class="article-meta">
<span>{
{item.noticeId}}</span><span>{
{item.createBy}}</span> <span style="font-size: 26rpx;color: #999999;padding-left: 10px;">{
{item.createTime}}</span></text>
</view>
</view>
</u-list-item>
</u-list>
<u-empty v-else></u-empty>
<!-- 触底显示加载状态 -->
<uni-load-more :status="status"> </uni-load-more>
</view>
</view>
</template>
<script>
import { getNoticelist } from "@/api/notice/notice"
export default {
data() {
return {
params: {
pageNum: 0,
pageSize: 20,
title: ''
},
noticeList: [],
total:0,
status: "more",
};
},
onLoad() {
this.params.pageNum = 1
this.getNoticeData();
},
methods: {
getNoticeData(){
this.status="loading"
const app = this
getNoticelist(app.params).then(res => {
this.noticeList = this.noticeList.concat(res.rows);
this.total=res.total
if (res.code == '200' || res.code == '401')
this.$modal.msgSuccess(res.code)
});
this.status="more"
},
// 查询按钮动作
searchData () {
this.params.pageNum = 1
this.total=0
this.noticeList = []
this.getNoticeData();
},
// 滚动分页加载数据
scrolltolower ()
{
console.log("scrolltolower=="+this.params.pageNum+"==="+this.params.pageSize+"==="+this.total)
if(this.params.pageNum * this.params.pageSize >= this.total)
{
this.status="noMore"
this.$modal.msgSuccess('scrolltolower没有更多数据了')
}
else
{
this.$modal.msgSuccess('scroll=getNoticeData')
this.params.pageNum += 1;
this.getNoticeData();
}
},
navTo(row) {
let noticeId = 0;
if (row != 0) {
noticeId = row.noticeId
}
this.$tab.navigateTo('/pages/feedback/list_notice/notice?noticeId='+noticeId)
}
}
};
</script>
<style lang="scss">
.notice-item {
padding: 15rpx 0;
}
page {
background-color: #ffffff;
}
.article-meta {
padding: 10rpx 10rpx 10rpx;
color: #999999;
border-bottom: 0.5px solid #ededed;
}
.page-notification{
padding: 40rpx;
height: calc(100vh - 88rpx);
overflow: hidden;
.u-list{
height: calc(100vh - 268rpx)!important;
}
}
</style>
3. Nueva interfaz de detalles de anuncios de notificaciones
Cree una nueva página de Notice.vue en el directorio de notificaciones.
<template>
<view class="wrap">
<view class="article-title">{
{notice.noticeTitle}}</view>
<view class="article-meta">
<span>{
{notice.createBy}}</span> <span style="font-size: 26rpx;color: #999999;padding-left: 10px;">{
{notice.createTime}}</span></text>
</view>
<view class="article-content">
<u-parse :content="notice.noticeContent"></u-parse>
</view>
<view class="article-foot"></view>
</view>
</template>
<script>
import { getNoticeData } from "@/api/notice/notice"
export default {
data() {
return {
noticeId: undefined,
notice : {},
};
},
onLoad(option) {
// 获取设备信息
const app = this
app.noticeId = option.noticeId;
getNoticeData(app.noticeId).then(res => {
console.log(res.data)
app.notice = res.data
})
},
methods: {
}
};
</script>
<style lang="scss">
page {
background-color: #ffffff;
}
.article-title {
font-size: 35rpx;
font-weight: 400;
text-align: left;
padding-bottom: 10rpx;
font-weight: bold;
margin: 30rpx 30rpx 0;
color: #333333;
}
.article-meta {
padding: 10rpx 30rpx 30rpx;
color: #999999;
border-bottom: 1px solid #ededed;
}
.article-content {
padding: 30rpx 30rpx 0rpx;
font-size: 30rpx;
}
.article-foot{
padding:0 30rpx 20rpx;
font-size: 26rpx;
color: #999999;
}
</style>4. Agregar API
Cree un nuevo directorio de notificaciones en el directorio api del directorio raíz de RuoYi-App-master y cree un nuevo Notice.js
import request from '@/utils/request'
// 查询所有通知公告
export function getNoticelist(data) {
return request({
url: '/system/notice/list',
method: 'get',
data: data
})
}
// 查询通知公告详情
export function getNoticeData(noticeId) {
return request({
url: '/system/notice/'+noticeId,
method: 'get'
})
}
5. Agregar configuración de enrutamiento
Enrutamiento en el archivo pages.json en el directorio raíz RuoYi-App-master, agregue lo siguiente
{
"path": "pages/whalesystem/notice/list_notice",
"style": {
"navigationBarTitleText": "通知公告"
}
}
,
{
"path": "pages/whalesystem/notice/notice",
"style": {
"navigationBarTitleText": "公告内容"
}
}6. El código de backend no cambia
El código de fondo corresponde a list() y getInfo() bajo SysNoticeController
/**
* 获取通知公告列表
*/
@PreAuthorize("@ss.hasPermi('system:notice:list')")
@GetMapping("/list")
public TableDataInfo list(SysNotice notice)
{
startPage();
List<SysNotice> list = noticeService.selectNoticeList(notice);
return getDataTable(list);
}
/**
* 根据通知公告编号获取详细信息
*/
@PreAuthorize("@ss.hasPermi('system:notice:query')")
@GetMapping(value = "/{noticeId}")
public AjaxResult getInfo(@PathVariable Long noticeId)
{
return AjaxResult.success(noticeService.selectNoticeById(noticeId));
}7. Y ejecuta de la siguiente manera
Se muestra el boletín de notificación, pero no se puede mostrar la imagen del contenido del boletín.
8. Modifique la vista del código fuente de manifest.json de la siguiente manera para resolver el problema de la vista previa de la imagen en archivos de texto enriquecido
Sin esta configuración, la ruta de la imagen de vista previa es /dev-api/profile/upload/2022/11/11/list1_1
Después de completar la configuración de la siguiente manera, ¡asegúrese de volver a compilar! ! ! ! ! ! !
"devServer" : {
"port" : 9090,
"https" : false,
"disableHostCheck" : true, //设置跳过host检查
"proxy" : {
"/dev-api" : {
"target" : "http://127.0.0.1:8080", //目标接口域名
"changeOrigin" : true, //是否跨域
"secure" : false, // 设置支持https协议的代理
"pathRewrite":{"^/dev-api":""}
}
}Una vez completada la configuración, ¡asegúrese de volver a compilar! ! ! ! ! ! !
Tenga en cuenta que la dirección de destino es la dirección 8080 del backend, y /dev-api también está escrito en pathRewrite
Ejemplo:
http://localhost:9092/dev-api/profile/upload/2023/01/11/222.png
Proxy convertido a
http://127.0.0.1:8080/profileupload/2023/01/11/222.png
9. Después de compilar y volver a ejecutar el anuncio, el resultado es el siguiente y la pantalla es normal
La dirección del análisis de la imagen es la siguiente.
10 Este artículo se desplaza hacia arriba y hacia abajo en el lado móvil usando scrolltolower
// 滚动分页加载数据
scrolltolower ()
{
console.log("scrolltolower=="+this.params.pageNum+"==="+this.params.pageSize+"==="+this.total)
if(this.params.pageNum * this.params.pageSize >= this.total)
{
this.status="noMore"
this.$modal.msgSuccess('scrolltolower没有更多数据了')
}
else
{
this.$modal.msgSuccess('scroll=getNoticeData')
this.params.pageNum += 1;
this.getNoticeData();
}
},11. Si desea ejecutarlo en un pequeño programa o aplicación, consulte el siguiente artículo