建制创建-动态页面

api/institutionalStructure.js

@@ -0,0 +1,76 @@
+// 建制相关API
+import { request } from '@/utils/request'
+
+/**
+ * 获取建制数据列表
+ * @param {Object} params - 查询参数
+ * @param {number} params.pageNum - 页码
+ * @param {number} params.pageSize - 每页数量
+ * @param {string} params.orderByColumn - 排序字段
+ * @param {string} params.isAsc - 排序方式
+ * @returns {Promise} 返回建制数据
+ */
+export function getInstitutionalList(params = {}) {
+  const defaultParams = {
+    pageNum: 1,
+    pageSize: 10,
+    orderByColumn: 'createTime',
+    isAsc: 'descending'
+  }
+  
+  return request({
+    url: '/app/formed/listFormed',
+    method: 'GET',
+    params: { ...defaultParams, ...params }
+  })
+}
+
+/**
+ * 获取建制详情
+ * @param {string} id - 建制项目ID
+ * @returns {Promise} 返回建制详情
+ */
+export function getInstitutionalDetail(id) {
+  return request({
+    url: `/app/formed/getFormed/${id}`,
+    method: 'GET'
+  })
+}
+
+/**
+ * 创建建制项目
+ * @param {Object} data - 项目数据
+ * @returns {Promise} 返回创建结果
+ */
+export function createInstitutional(data) {
+  return request({
+    url: '/app/formed/createFormed',
+    method: 'POST',
+    data
+  })
+}
+
+/**
+ * 更新建制项目
+ * @param {Object} data - 项目数据
+ * @returns {Promise} 返回更新结果
+ */
+export function updateInstitutional(data) {
+  return request({
+    url: '/app/formed/updateFormed',
+    method: 'PUT',
+    data
+  })
+}
+
+/**
+ * 删除建制项目
+ * @param {string} id - 项目ID
+ * @returns {Promise} 返回删除结果
+ */
+export function deleteInstitutional(id) {
+  return request({
+    url: `/app/formed/deleteFormed/${id}`,
+    method: 'DELETE'
+  })
+} 

pages.json

@@ -61,6 +61,15 @@
 			"enablePullDownRefresh": false,
 			"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/walkInto/walkInto",
+			"style" : 
+			{
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
 		}
 	],
 

pages/institutionalStructure/institutionalStructure.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page">
-    <u-navbar title="建制" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
+    <u-navbar title="建制" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#695347'
-              title-size='36' height='36' id="navbar">
+              title-size='36' height='50' :title-style="{ fontWeight: 2000 }" id="navbar">
     </u-navbar>
     <view class="tile">
       <view class="tile-item" v-for="(item, index) in 10" :key="index">
@@ -9,46 +9,41 @@
       </view>
     </view>
     <view class="container">
-	    <view class="data">
+      <!-- 加载状态 -->
-			<view class="row">
+      <view v-if="loading" class="loading">
-
+        <text>加载中...</text>
-				<view>左上</view>
-				<view>右上</view>
-			</view>
-			<view class="row">
-				<view>左下</view>
-				<view>右下</view>
-			</view>
-	    </view>
-      <view class="data">
-      	<view class="row">
-
-      		<view>左上</view>
-      		<view>右上</view>
-      	</view>
-      	<view class="row">
-      		<view>左下</view>
-      		<view>右下</view>
-      	</view>
       </view>
-	  <view class="data">
+      
-	  	<view class="row">
+      <!-- 空数据提示 -->
+      <view v-else-if="institutionalData.length === 0" class="empty">
+        <text>暂无数据</text>
+      </view>
+      
+      <!-- 数据列表 -->
+      <view v-else class="data" v-for="(item, index) in institutionalData" :key="index">
+        <view class="row">
+          <view class="topLeft">{{ item.topLeft || '暂无数据' }}</view>
+          <view>{{ item.topRight || '暂无数据' }}</view>
+        </view>
+        <view class="row">
+          <view class="subRow">
+            <view>{{ item.bottomLeft || '暂无数据' }}</view>
+            <view >{{ item.bottomRight || '暂无数据' }}</view>
+          </view>
+          <view>
+            <view class="bottomRight">查看详细</view>
+          </view>
 
-	  		<view>左上</view>
+        </view>
-	  		<view>右上</view>
+      </view>
-	  	</view>
-	  	<view class="row">
-	  		<view>左下</view>
-	  		<view>右下</view>
-	  	</view>
-	  </view>
     </view>
-
+	
   </view>
 </template>
 
 <script>
 import { tilesImageEnum } from '@/enum/institutionalStructure.js';
+import { getInstitutionalList } from '@/api/institutionalStructure.js';
 
 export default {
   data() {
@@ -56,14 +51,109 @@ export default {
       bgc: {
         backgroundColor: "#F5F0E7",
       },
-      tilesImageEnum
+      tilesImageEnum,
+      // 动态数据数组
+      institutionalData: [],
+      // 加载状态
+      loading: false,
+      pageNum: 1,
+      pageSize: 10,
+      hasMore: true // 是否还有更多数据
     }
   },
   onLoad() {
-
+    // 页面加载时获取数据
+    this.getInstitutionalData()
   },
   methods: {
-
+    // 获取建制数据
+    async getInstitutionalData(isLoadMore = false) {
+      this.loading = true
+      try {
+        if (isLoadMore) {
+          this.pageNum++
+        } else {
+          this.pageNum = 1
+        }
+        
+        // 调用API
+        const response = await getInstitutionalList({
+          pageNum: this.pageNum,
+          pageSize: this.pageSize
+        })
+        
+        if (response.code === 200) {
+          // 将后端数据转换为前端需要的格式
+          const newData = response.rows.map(item => ({
+            topLeft: this.formatTopLeft(item.startYear, item.proName),
+            topRight: this.getStatusText(item.state),
+            bottomLeft: `建造金额：${this.formatAmount(item.totalAmount)}`,
+            bottomRight: `捐赠人数：${item.donorCount}人`
+          })) || []
+          
+          if (isLoadMore) {
+            this.institutionalData = [...this.institutionalData, ...newData]
+          } else {
+            this.institutionalData = newData
+          }
+          
+          // 判断是否还有更多数据
+          this.hasMore = response.rows.length === this.pageSize
+        } else {
+          uni.showToast({
+            title: response.msg || '获取数据失败',
+            icon: 'none'
+          })
+        }
+      } catch (error) {
+        console.error('获取建制数据失败:', error)
+        uni.showToast({
+          title: '网络错误',
+          icon: 'none'
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+    
+    // 格式化金额
+    formatAmount(amount) {
+      if (!amount) return '不详'
+      if (amount >= 100000000) {
+        return `${(amount / 100000000).toFixed(1)}亿`
+      } else if (amount >= 10000) {
+        return `${(amount / 10000).toFixed(1)}万`
+      } else {
+        return `${amount.toLocaleString()}`
+      }
+    },
+    
+    // 格式化左上角内容
+    formatTopLeft(year, projectName) {
+      if (!year || !projectName) return '暂无数据'
+      return `${year}年 ${projectName}`
+    },
+    
+    // 获取状态文本
+    getStatusText(state) {
+      switch (state) {
+        case '1':
+          return '规划'
+        case '2':
+          return '进行中'
+        case '3':
+          return '已完成'
+        case '4':
+          return '已取消'
+        default:
+          return '未知状态'
+      }
+    },
+    
+    // 刷新数据
+    refreshData() {
+      this.getInstitutionalData()
+    }
   }
 }
 </script>
@@ -74,12 +164,13 @@ page {
 }
 .container {
   width: 100%;
-  height: 100%;
+  min-height: 100vh;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   background-color: #FFFBF5;
   padding: 0 11rpx;
+  padding-bottom: 40rpx;
 }
 .tile {
   display: flex;
@@ -120,4 +211,29 @@ page {
 	align-items: center;
 	padding: 0 20rpx;
 }
+.subRow{
+  display: flex;
+}
+.subRow view{
+  padding-right: 20px;
+  font-size: 18px;
+}
+.topLeft{
+  font-size: 21px;
+  font-weight: 1000;
+  color: #522510;
+}
+.bottomRight{
+  font-size: 18px;
+  font-weight: 1000;
+  color: #522510;
+}
+.loading, .empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #999;
+  font-size: 28rpx;
+  background-color: #FFFBF5;
+}
 </style>

pages/walkInto/walkInto.vue

@@ -0,0 +1,43 @@
+<template>
+  <view class="page">
+    <u-navbar title="走进平山" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
+              title-size='36' height='36' id="navbar">
+    </u-navbar>
+    <view class="container">
+      <view>111</view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      bgc: {
+        backgroundColor: "#F5F0E7",
+      },
+    }
+  },
+  onLoad() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss">
+page {
+  background: #F5F0E7;
+}
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: #FFFBF5;
+}
+</style>

utils/request.js

@@ -0,0 +1,151 @@
+// 统一请求工具
+import { getTempToken, shouldUseTempToken } from '@/config/dev.js'
+
+const BASE_URL = 'http://192.168.2.7:4501'
+
+/**
+ * 统一请求方法
+ * @param {Object} options - 请求配置
+ * @param {string} options.url - 请求地址
+ * @param {string} options.method - 请求方法
+ * @param {Object} options.params - 查询参数
+ * @param {Object} options.data - 请求体数据
+ * @param {Object} options.header - 请求头
+ * @returns {Promise} 返回请求结果
+ */
+export function request(options = {}) {
+  return new Promise((resolve, reject) => {
+    // 获取token，优先使用本地存储的token，如果没有则使用临时token
+    const localToken = uni.getStorageSync('token')
+    let token = localToken
+    
+    // 如果本地没有token且启用了临时token，则使用临时token
+    if (!token && shouldUseTempToken()) {
+      token = getTempToken()
+      console.log('使用临时token进行开发测试')
+    }
+    
+    // 构建请求配置
+    const requestOptions = {
+      url: BASE_URL + options.url,
+      method: options.method || 'GET',
+      header: {
+        'Content-Type': 'application/json',
+        ...options.header
+      },
+      success: (res) => {
+        // 请求成功处理
+        if (res.statusCode === 200) {
+          resolve(res.data)
+        } else if (res.statusCode === 401) {
+          // 认证失败
+          uni.showToast({
+            title: '登录已过期，请重新登录',
+            icon: 'none'
+          })
+          setTimeout(() => {
+            uni.navigateTo({
+              url: '/pages/login/login'
+            })
+          }, 1500)
+          reject(new Error('认证失败'))
+        } else {
+          // 其他错误
+          uni.showToast({
+            title: res.data?.msg || '请求失败',
+            icon: 'none'
+          })
+          reject(new Error(res.data?.msg || '请求失败'))
+        }
+      },
+      fail: (err) => {
+        // 请求失败处理
+        console.error('请求失败:', err)
+        uni.showToast({
+          title: '网络错误',
+          icon: 'none'
+        })
+        reject(err)
+      }
+    }
+    
+    // 添加token到请求头
+    if (token) {
+      requestOptions.header.Authorization = token
+    }
+    
+    // 添加参数
+    if (options.params) {
+      requestOptions.data = options.params
+    }
+    
+    if (options.data) {
+      requestOptions.data = options.data
+    }
+    
+    // 发起请求
+    uni.request(requestOptions)
+  })
+}
+
+/**
+ * GET请求
+ * @param {string} url - 请求地址
+ * @param {Object} params - 查询参数
+ * @param {Object} header - 请求头
+ * @returns {Promise} 返回请求结果
+ */
+export function get(url, params = {}, header = {}) {
+  return request({
+    url,
+    method: 'GET',
+    params,
+    header
+  })
+}
+
+/**
+ * POST请求
+ * @param {string} url - 请求地址
+ * @param {Object} data - 请求体数据
+ * @param {Object} header - 请求头
+ * @returns {Promise} 返回请求结果
+ */
+export function post(url, data = {}, header = {}) {
+  return request({
+    url,
+    method: 'POST',
+    data,
+    header
+  })
+}
+
+/**
+ * PUT请求
+ * @param {string} url - 请求地址
+ * @param {Object} data - 请求体数据
+ * @param {Object} header - 请求头
+ * @returns {Promise} 返回请求结果
+ */
+export function put(url, data = {}, header = {}) {
+  return request({
+    url,
+    method: 'PUT',
+    data,
+    header
+  })
+}
+
+/**
+ * DELETE请求
+ * @param {string} url - 请求地址
+ * @param {Object} header - 请求头
+ * @returns {Promise} 返回请求结果
+ */
+export function del(url, header = {}) {
+  return request({
+    url,
+    method: 'DELETE',
+    header
+  })
+}