冗余文件清理
This commit is contained in:
WindowBird
parent
00054594d9
commit
5a340d574b
|
|
@ -1,110 +0,0 @@
|
|||
# 往生殿功能使用说明
|
||||
|
||||
## 功能概述
|
||||
|
||||
往生殿页面展示往生者信息，支持动态数据加载、搜索功能和下拉刷新。
|
||||
|
||||
## 主要功能
|
||||
|
||||
### 1. 动态数据加载
|
||||
|
||||
- 页面加载时自动获取往生殿详情和往生者列表
|
||||
- 支持从路由参数获取往生殿ID
|
||||
- 完善的加载状态和错误处理
|
||||
|
||||
### 2. 往生殿信息显示
|
||||
|
||||
- **往生殿名称**: 动态显示从API获取的往生殿名称
|
||||
- **联系人信息**: 动态显示联系人和联系电话
|
||||
- **地址信息**: 动态显示往生殿地址
|
||||
|
||||
### 3. 往生者信息展示
|
||||
|
||||
- 显示往生者的尊称和姓名
|
||||
- 显示出生日期（年月日）
|
||||
- 显示逝世日期（年月日），如果数据为空则显示"吉"或"吉利"
|
||||
|
||||
### 4. 搜索功能
|
||||
|
||||
- 支持按姓名或分区搜索往生者
|
||||
- 实时更新搜索结果
|
||||
- 支持清空搜索条件
|
||||
|
||||
### 5. 下拉刷新
|
||||
|
||||
- 支持下拉刷新数据
|
||||
- 同时刷新往生殿详情和往生者列表
|
||||
- 显示刷新成功/失败提示
|
||||
|
||||
## API接口
|
||||
|
||||
### 获取往生殿详情
|
||||
|
||||
- **接口**: `/app/memorial/{id}`
|
||||
- **方法**: GET
|
||||
- **参数**: `id` - 往生殿ID
|
||||
- **响应示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"msg": "操作成功",
|
||||
"code": 200,
|
||||
"data": {
|
||||
"id": "16",
|
||||
"name": "牌位名字",
|
||||
"contactPhone": "13768722834",
|
||||
"contactName": "黄绍春",
|
||||
"address": "广西壮族自治区南宁市西乡塘区"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 获取往生者列表
|
||||
|
||||
- **接口**: `/app/deceased/list`
|
||||
- **方法**: GET
|
||||
- **参数**:
|
||||
- `memorialId`: 往生殿ID
|
||||
- `pageNum`: 页码（可选）
|
||||
- `pageSize`: 每页数量（可选）
|
||||
- `keyword`: 搜索关键词（可选）
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 1. 页面跳转
|
||||
|
||||
```javascript
|
||||
// 跳转到往生殿页面
|
||||
uni.navigateTo({
|
||||
url: `/pages/memorial/memorialHall?id=16`,
|
||||
})
|
||||
```
|
||||
|
||||
### 2. 数据刷新
|
||||
|
||||
- 下拉页面即可刷新数据
|
||||
- 或调用 `refreshData()` 方法
|
||||
|
||||
### 3. 搜索功能
|
||||
|
||||
- 在搜索框中输入姓名或分区关键词
|
||||
- 点击搜索按钮或按回车键进行搜索
|
||||
|
||||
## 错误处理
|
||||
|
||||
- 网络请求失败时显示友好提示
|
||||
- API返回错误时显示具体错误信息
|
||||
- 数据为空时显示"暂无往生者信息"
|
||||
|
||||
## 样式特性
|
||||
|
||||
- 响应式设计，适配不同屏幕尺寸
|
||||
- 加载状态和空数据状态的友好提示
|
||||
- 统一的视觉风格和交互体验
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 确保网络连接正常
|
||||
2. 往生殿ID必须有效
|
||||
3. 搜索功能需要后端支持
|
||||
4. 下拉刷新功能需要页面配置支持
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
# 往生殿页面跳转功能测试
|
||||
|
||||
## 功能描述
|
||||
|
||||
从memorial页面点击"供奉"按钮后，跳转到memorialHall页面，并传递往生殿ID进行页面渲染。memorialHall页面具有固定容器高度和可滚动的内容区域。
|
||||
|
||||
## 跳转流程
|
||||
|
||||
### 1. 起始页面：memorial.vue
|
||||
|
||||
- **路径**: `/pages/memorial/memorial`
|
||||
- **功能**: 往生殿列表页面
|
||||
- **触发方式**: 点击底部"供奉"按钮
|
||||
|
||||
### 2. 目标页面：memorialHall.vue
|
||||
|
||||
- **路径**: `/pages/memorial/memorialHall`
|
||||
- **功能**: 往生大殿详情页面
|
||||
- **接收参数**: `id` - 往生殿ID
|
||||
- **特色功能**: 固定容器高度，内容区域可滚动
|
||||
|
||||
## 实现细节
|
||||
|
||||
### memorial.vue 中的跳转逻辑
|
||||
|
||||
```javascript
|
||||
// 提交供奉 - 跳转到往生大殿页面
|
||||
submitPrayer()
|
||||
{
|
||||
console.log('提交供奉，跳转到往生大殿页面，ID:', this.memorialId)
|
||||
|
||||
// 跳转到往生大殿页面，传递往生殿ID
|
||||
uni.navigateTo({
|
||||
url: `/pages/memorial/memorialHall?id=${this.memorialId}`,
|
||||
success: () => {
|
||||
console.log('跳转成功')
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('跳转失败:', error)
|
||||
uni.showToast({
|
||||
title: '页面跳转失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### memorialHall.vue 中的参数接收和滚动功能
|
||||
|
||||
```javascript
|
||||
onLoad(options)
|
||||
{
|
||||
console.log('memorialHall页面接收到的参数:', options)
|
||||
// 从路由参数获取往生殿ID
|
||||
if (options.id) {
|
||||
this.selectedUnitId = options.id
|
||||
console.log('区域ID:', this.selectedUnitId)
|
||||
} else {
|
||||
console.warn('未接收到区域ID，使用默认ID:', this.selectedUnitId)
|
||||
}
|
||||
this.initPage()
|
||||
}
|
||||
,
|
||||
|
||||
// 滚动事件处理
|
||||
onScroll(e)
|
||||
{
|
||||
console.log('滚动位置:', e.detail.scrollTop)
|
||||
this.scrollTop = e.detail.scrollTop
|
||||
}
|
||||
```
|
||||
|
||||
## 测试步骤
|
||||
|
||||
### 1. 进入memorial页面
|
||||
|
||||
```javascript
|
||||
// 可以通过以下方式进入memorial页面
|
||||
uni.navigateTo({
|
||||
url: '/pages/memorial/memorial?id=16',
|
||||
})
|
||||
```
|
||||
|
||||
### 2. 点击供奉按钮
|
||||
|
||||
- 在memorial页面底部找到"供奉"按钮
|
||||
- 点击按钮触发跳转
|
||||
|
||||
### 3. 验证跳转结果
|
||||
|
||||
- 页面应该跳转到memorialHall页面
|
||||
- 控制台应该显示接收到的参数
|
||||
- 页面应该根据传递的ID加载对应的往生殿信息
|
||||
- 内容区域应该可以垂直滚动
|
||||
|
||||
### 4. 测试滚动功能
|
||||
|
||||
- 当往生者列表内容超出容器高度时，可以上下滚动查看
|
||||
- 滚动时控制台会显示滚动位置信息
|
||||
- 容器高度保持固定，不会随内容变化
|
||||
|
||||
## 预期结果
|
||||
|
||||
### 成功跳转时：
|
||||
|
||||
1. 页面从memorial跳转到memorialHall
|
||||
2. 控制台显示：
|
||||
```
|
||||
memorialHall页面接收到的参数: {id: "16"}
|
||||
设置往生殿ID: 16
|
||||
往生殿页面初始化，ID: 16
|
||||
```
|
||||
3. memorialHall页面根据ID加载对应的往生殿详情和往生者列表
|
||||
|
||||
### 跳转失败时：
|
||||
|
||||
1. 显示错误提示："页面跳转失败"
|
||||
2. 控制台显示具体错误信息
|
||||
|
||||
## 调试信息
|
||||
|
||||
### 控制台日志
|
||||
|
||||
- `memorialHall页面接收到的参数:` - 显示接收到的所有参数
|
||||
- `区域ID:` - 显示设置的往生殿ID
|
||||
- `往生大殿页面初始化，ID:` - 显示页面初始化时的ID
|
||||
- `往生殿详情响应:` - 显示API响应数据
|
||||
- `往生者列表数据:` - 显示往生者列表数据
|
||||
- `滚动位置:` - 显示当前滚动位置
|
||||
|
||||
### 网络请求
|
||||
|
||||
- `GET /app/memorial/{id}` - 获取往生殿详情
|
||||
- `GET /app/deceased/list` - 获取往生者列表
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **ID传递**: 确保memorial页面的memorialId变量有正确的值
|
||||
2. **页面配置**: 确保pages.json中两个页面都已正确配置
|
||||
3. **API接口**: 确保后端API接口正常工作
|
||||
4. **网络连接**: 确保网络连接正常，能够访问API
|
||||
|
||||
## 错误排查
|
||||
|
||||
### 常见问题：
|
||||
|
||||
1. **页面跳转失败**: 检查pages.json配置
|
||||
2. **ID未传递**: 检查memorial页面的memorialId变量
|
||||
3. **数据加载失败**: 检查API接口和网络连接
|
||||
4. **页面显示异常**: 检查memorialHall页面的模板和样式
|
||||
|
||||
### 调试方法：
|
||||
|
||||
1. 查看控制台日志
|
||||
2. 检查网络请求
|
||||
3. 验证API响应数据
|
||||
4. 检查页面参数传递
|
||||
|
|
@ -1,160 +0,0 @@
|
|||
# 古刹巡礼详情页面使用说明
|
||||
|
||||
## 新增API接口
|
||||
|
||||
### 1. 获取巡礼详情 - `/app/article/tourById`
|
||||
|
||||
**接口地址：** `GET /app/article/tourById`
|
||||
|
||||
**请求参数：**
|
||||
|
||||
- `id` (string): 巡礼ID
|
||||
|
||||
**返回数据：**
|
||||
|
||||
```json
|
||||
{
|
||||
"msg": "操作成功",
|
||||
"code": 200,
|
||||
"data": {
|
||||
"title": "寒山寺",
|
||||
"content": "<p>内容内容内容...</p>",
|
||||
"createTime": "2025-07-21 17:33:32",
|
||||
"coverUrl": "https://example.com/image.jpg"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 获取相关文章 - `/app/article/relevant`
|
||||
|
||||
**接口地址：** `GET /app/article/relevant`
|
||||
|
||||
**请求参数：**
|
||||
|
||||
- `articleId` (string): 当前文章ID
|
||||
|
||||
**返回数据：**
|
||||
|
||||
```json
|
||||
{
|
||||
"msg": "操作成功",
|
||||
"code": 200,
|
||||
"data": [
|
||||
{
|
||||
"id": "25",
|
||||
"title": "我是标题",
|
||||
"subtitle": "我是副标题",
|
||||
"createTime": "2025-07-21 17:33:32"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 页面功能
|
||||
|
||||
### 主要特性
|
||||
|
||||
1. **文章详情展示**
|
||||
- 显示文章标题
|
||||
- 显示创建时间
|
||||
- 显示封面图片
|
||||
- 支持HTML内容渲染
|
||||
|
||||
2. **相关阅读推荐**
|
||||
- 显示相关文章列表
|
||||
- 支持点击跳转到相关文章（通过文章ID）
|
||||
- 显示文章标题、副标题和时间
|
||||
- 自动获取文章ID用于跳转
|
||||
|
||||
3. **响应式设计**
|
||||
- 适配不同屏幕尺寸
|
||||
- 现代化的卡片式布局
|
||||
- 优雅的加载状态
|
||||
|
||||
### 使用方法
|
||||
|
||||
#### 1. 页面跳转
|
||||
|
||||
```javascript
|
||||
// 跳转到指定巡礼详情页
|
||||
uni.navigateTo({
|
||||
url: `/pages/ancient/ancientTourById?id=24`,
|
||||
})
|
||||
```
|
||||
|
||||
#### 2. 获取数据
|
||||
|
||||
```javascript
|
||||
import { getTourById, getRelevantArticles } from '@/api/article/article.js'
|
||||
|
||||
// 获取巡礼详情
|
||||
const tourDetail = await getTourById('24')
|
||||
|
||||
// 获取相关文章
|
||||
const relevantArticles = await getRelevantArticles('24')
|
||||
```
|
||||
|
||||
### 页面结构
|
||||
|
||||
```
|
||||
页面布局：
|
||||
├── 自定义导航栏
|
||||
├── 测试按钮（开发时显示）
|
||||
├── 文章头部信息
|
||||
│ ├── 文章标题
|
||||
│ └── 创建时间
|
||||
├── 封面图片
|
||||
├── 文章内容
|
||||
│ └── HTML内容渲染
|
||||
└── 相关阅读区域
|
||||
├── 区域标题
|
||||
└── 相关文章列表
|
||||
├── 文章标题
|
||||
├── 副标题
|
||||
├── 创建时间
|
||||
└── 文章ID（用于跳转）
|
||||
```
|
||||
|
||||
### 样式特点
|
||||
|
||||
1. **卡片式设计**
|
||||
- 白色背景卡片
|
||||
- 圆角边框
|
||||
- 阴影效果
|
||||
|
||||
2. **颜色搭配**
|
||||
- 主色调：白色背景
|
||||
- 文字颜色：深灰色
|
||||
- 辅助色：浅灰色
|
||||
|
||||
3. **交互效果**
|
||||
- 点击反馈
|
||||
- 平滑过渡动画
|
||||
- 加载状态提示
|
||||
|
||||
### 开发说明
|
||||
|
||||
1. **API接口已添加到 `api/article/article.js`**
|
||||
2. **页面路径：`pages/ancient/ancientTourById.vue`**
|
||||
3. **支持参数传递：通过 `options.id` 获取巡礼ID，默认为24**
|
||||
4. **测试功能：页面包含测试按钮，方便开发调试**
|
||||
5. **相关文章跳转：自动获取文章ID，支持无限级跳转**
|
||||
|
||||
### 注意事项
|
||||
|
||||
1. **HTML内容安全**
|
||||
- 使用 `rich-text` 组件渲染HTML
|
||||
- 添加基本样式确保显示效果
|
||||
|
||||
2. **错误处理**
|
||||
- API调用失败时显示友好提示
|
||||
- 相关文章获取失败不影响主页面
|
||||
|
||||
3. **性能优化**
|
||||
- 使用计算属性处理HTML内容
|
||||
- 合理的时间格式化处理
|
||||
|
||||
4. **用户体验**
|
||||
- 加载状态提示
|
||||
- 点击反馈效果
|
||||
- 响应式布局适配
|
||||
57
pages.json
57
pages.json
|
|
@ -17,27 +17,6 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页",
|
||||
"navigationBarBackgroundColor": "#3996FD",
|
||||
"navigationBarTextStyle": "#FFFFFF",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/tj",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/myorder/index",
|
||||
"style": {
|
||||
|
|
@ -253,42 +232,14 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"path" : "webView/webView",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
"path": "webView/webView",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
"custom": false,
|
||||
"color": "#7C7C7C",
|
||||
"selectedColor": "#48893B",
|
||||
"borderStyle": "white",
|
||||
"backgroundColor": "#ffffff",
|
||||
"list": [
|
||||
{
|
||||
"selectedIconPath": "/static/tabbar/oneactive.png",
|
||||
"iconPath": "/static/tabbar/one.png",
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "预约"
|
||||
},
|
||||
{
|
||||
"selectedIconPath": "/static/tabbar/twoactive.png",
|
||||
"iconPath": "/static/tabbar/two.png",
|
||||
"pagePath": "pages/tj",
|
||||
"text": "订单"
|
||||
},
|
||||
{
|
||||
"selectedIconPath": "/static/tabbar/thractive.png",
|
||||
"iconPath": "/static/tabbar/thr.png",
|
||||
"pagePath": "pages/my",
|
||||
"text": "我的"
|
||||
}
|
||||
]
|
||||
},
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar
|
||||
:is-back="false"
|
||||
title="首页"
|
||||
:border-bottom="false"
|
||||
back-icon-color="000"
|
||||
:background="bgc"
|
||||
title-color="#fff"
|
||||
title-size="36"
|
||||
height="36"
|
||||
id="navbar"
|
||||
>
|
||||
</u-navbar>
|
||||
<image
|
||||
class="bj"
|
||||
src="https://api.ccttiot.com/smartmeter/img/static/uFwwZa2fwduQIMXcnGEa"
|
||||
mode=""
|
||||
></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: '#8883f0',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
.bj {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
35
pages/my.vue
35
pages/my.vue
|
|
@ -1,35 +0,0 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar
|
||||
:is-back="false"
|
||||
title="首页"
|
||||
:border-bottom="false"
|
||||
back-icon-color="000"
|
||||
:background="bgc"
|
||||
title-color="#fff"
|
||||
title-size="36"
|
||||
height="36"
|
||||
id="navbar"
|
||||
>
|
||||
</u-navbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: '#8883f0',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
35
pages/tj.vue
35
pages/tj.vue
|
|
@ -1,35 +0,0 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar
|
||||
:is-back="false"
|
||||
title="首页"
|
||||
:border-bottom="false"
|
||||
back-icon-color="000"
|
||||
:background="bgc"
|
||||
title-color="#fff"
|
||||
title-size="36"
|
||||
height="36"
|
||||
id="navbar"
|
||||
>
|
||||
</u-navbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: '#8883f0',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user