换皮test第一版

2025-08-06 11:46:08 +08:00 · 2025-08-06 11:46:08 +08:00 · 7678831bab
commit 7678831bab
parent e595b5eb29
8 changed files with 479 additions and 38 deletions
--- a/api/article/article.js
+++ b/api/article/article.js
@ -4,7 +4,6 @@ import request from '@/utils/request'
 * 获取条款和隐私政策
 * @param {Object} params - 查询参数
 * @param {string} params.type - 类型 5:服务条款 6:隐私条款
- * @param {string} params.appId - 应用ID
 * @param {string} params.status - 状态
 * @returns {Promise} 返回条款数据
 */
@ -13,7 +12,6 @@ export function getArticleByType(params = {}) {
    url: '/app/article/listByType',
    method: 'GET',
    params: {
-      appId: 1,
      status: 1,
      ...params
    }
@ -23,14 +21,16 @@ export function getArticleByType(params = {}) {
 /**
 * 根据ID获取文章详情
 * @param {string} id - 文章ID
+ * @param {Object} params - 查询参数
 * @returns {Promise} 返回文章详情数据
 */
-export function getArticleById(id) {
+export function getArticleById(id, params = {}) {
  return request({
    url: '/app/article/byId',
    method: 'GET',
    params: {
-      id: id
+      id: id,
+      ...params
    }
  })
 }
@ -44,7 +44,6 @@ export function getServiceTerms() {
    url: '/app/article/listByType',
    method: 'GET',
    params: {
-      appId: 1,
      status: 1,
      type: '5'
    }
@ -60,9 +59,21 @@ export function getPrivacyPolicy() {
    url: '/app/article/listByType',
    method: 'GET',
    params: {
-      appId: 1,
      status: 1,
      type: '6'
    }
  })
+}
+
+/**
+ * 获取古刹巡礼数据
+ * @param {Object} params - 查询参数
+ * @returns {Promise} 返回古刹巡礼列表数据
+ */
+export function getTempleTours(params = {}) {
+  return request({
+    url: '/app/article/tours',
+    method: 'GET',
+    params
+  })
 } 
--- a/enum/common.js
+++ b/enum/common.js
@ -6,6 +6,7 @@ export const CommonEnum = {
    BASE_COLOR:"#FAF8F3", //基调颜色
    SEARCH: "https://api.ccttiot.com/image-1753769500465.png", //通用搜索图标
    TILE: "https://api.ccttiot.com/image-1753750309203.png", //瓦片图片
+    BOTTOM_TILES:"https://api.ccttiot.com/image-1754446176001.png",//底部瓦片组
    FILTER: "https://api.ccttiot.com/image-1753954149098.png", //筛选图标
    REFRESH:"https://api.ccttiot.com/%E5%AE%B9%E5%99%A8-1754011714179.png", //刷新图标
    NAV_ARROW:"https://api.ccttiot.com/image-1754127104177.png", //导航箭头
@ -17,5 +18,6 @@ export const CommonEnum = {
    Refresh:'https://api.ccttiot.com/image-1754377032112.png',//刷新
    LotusMeditation:'https://api.ccttiot.com/image-1754377169541.png',//莲坐禅心

+
 };
 export default CommonEnum;
--- a/enum/navigationDataTest.json
+++ b/enum/navigationDataTest.json
@ -0,0 +1,69 @@
+{
+  "pageConfig": {
+    "background": {
+      "img": "https://api.ccttiot.com/d3fc4e36469b1d36c146dd184d35b1a3-1754289616988.jpg"
+    },
+    "announcement": {
+      "icon": "https://api.ccttiot.com/smartmeter/img/static/uIm0UpcFxyLwYpwCIVcg",
+      "text": "8月15号官网小程序正式开通，大家可以保持小程序联系我们！"
+    },
+    "topIcons": {
+      "leftIcon": {
+        "hidden": true,
+        "img": "https://api.ccttiot.com/smartmeter/img/static/uEC23p8oHigfvliOKvkL"
+      },
+      "rightIcon": {
+        "img": "https://api.ccttiot.com/smartmeter/img/static/u0xTi5R31GxYwd7WxRhy"
+      },
+      "bottomIcon": {
+        "img": "https://api.ccttiot.com/image-1753692152175.png"
+      }
+    }
+  },
+  "navigationItems": [
+    {
+      "id": "institutionalStructure",
+      "img": "https://api.ccttiot.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC-1754276936716.png",
+      "title": "关于我们",
+      "subtitle": "TEMPLE INSTITUTIONAL STRUCTURE",
+      "aid": "32"
+    },
+    {
+      "id": "monk",
+      "img": "https://api.ccttiot.com/%E6%8B%9B%E5%95%86%E7%AE%A1%E7%90%86-1754277068498.png",
+      "title": "合作",
+      "subtitle": "VENERABLE MONK IN THE TEMPLE",
+      "aid": "33"
+    },
+    {
+      "id": "monk",
+      "img": "https://api.ccttiot.com/%E6%95%85%E9%9A%9C%E7%94%B3%E6%8A%A5-1754277110761.png",
+      "title": "故障申报",
+      "subtitle": "VENERABLE MONK IN THE TEMPLE",
+      "aid": "34"
+    },
+    {
+      "id": "monk",
+      "img": "https://api.ccttiot.com/%E8%81%94%E7%B3%BB%E6%88%91%E4%BB%AC-1754277149148.png",
+      "title": "联系我们",
+      "subtitle": "VENERABLE MONK IN THE TEMPLE",
+      "aid": "35"
+    }
+  ],
+  "bottomSection": {
+    "openingTime": {
+      "title": "开放时间",
+      "time": "08:00~18:00",
+      "decorationImg": "https://api.ccttiot.com/smartmeter/img/static/ugNHTwXFgOT8JGofruez"
+    },
+    "prayerSection": {
+      "backgroundImg": "https://api.ccttiot.com/smartmeter/img/static/ucPuJT9zaH3VSoWzGwSE",
+      "title": "日行千里",
+      "prayerButton": {
+        "icon": "https://api.ccttiot.com/smartmeter/img/static/u9muibj6c472a87zd6tp",
+        "title": "在线学习",
+        "subtitle": "ONLINE PRAYER"
+      }
+    }
+  }
+}
--- a/pages/ancient/ancient.vue
+++ b/pages/ancient/ancient.vue
@ -1,36 +1,71 @@
 <template>
  <view class="page">
-    <custom-navbar title="基础页面" />
+    <custom-navbar title="古刹巡礼" />
    <tile-grid/>
-    <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
-      <!-- 状态展示 -->
-      <status-display
-          v-if="loading"
-          type="loading"
-          loading-text="加载中..."
-      />
-      <!-- 页面内容将在这里添加 -->
-    </view>
+    <scroll-view 
+      class="scroll-container" 
+      scroll-y="true"
+      refresher-enabled="true"
+      :refresher-triggered="refreshing"
+      @refresherrefresh="onRefresh"
+    >
+      <view class="header" :style="{ backgroundColor: '#ffffff' }">
+        <!-- 状态展示 -->
+        <status-display
+            v-if="loading && templeList.length === 0"
+            type="loading"
+            loading-text="加载中..."
+        />
+        
+        <!-- 错误状态 -->
+        <view v-else-if="error" class="error-container">
+          <view class="error-text">{{ error }}</view>
+          <button class="retry-button" @click="loadPageData">重新加载</button>
+        </view>
+        
+        <!-- 古刹列表 -->
+        <view v-else class="temple-list">
+          <view v-if="templeList.length === 0" class="no-data">
+            暂无古刹数据
+          </view>
+          <ancient-item
+            v-for="(temple, index) in templeList"
+            :key="temple.id"
+            :title="temple.title"
+            :description="temple.description"
+            :image-url="temple.imageUrl"
+            :button-text="temple.buttonText"
+            @click="handleTempleClick(temple)"
+            class="temple-card"
+          />
+        </view>
+      </view>
+    </scroll-view>

+    <view class="bottom">
+      <image :src="CommonEnum.BOTTOM_TILES" mode="aspectFit" class="files"></image>
+    </view>
  </view>
 </template>

 <script>
-import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
-import TileGrid from "../../components/tile-grid/tile-grid.vue";
 import CommonEnum from "../../enum/common";
 import StatusDisplay from "../../components/status-display/status-display.vue";
+import AncientItem from "./commponts/ancientItem.vue";
+import { getTempleTours } from "../../api/article/article.js";

 export default {
  components: {
-    CustomNavbar,
-    TileGrid,
-    StatusDisplay
+    StatusDisplay,
+    'ancient-item': AncientItem
  },
  data() {
    return {
      CommonEnum,
-      loading: false
+      loading: false,
+      templeList: [],
+      refreshing: false, // 新增：控制下拉刷新的状态
+      error: null // 新增：错误状态
    }
  },
  onLoad() {
@ -41,26 +76,81 @@ export default {
    // 加载页面数据
    async loadPageData() {
      this.loading = true
+      this.error = null // 清除之前的错误
      try {
-        // TODO: 调用页面数据API
-        // const response = await getPageData()
-        // 模拟加载
-        setTimeout(() => {
-          this.loading = false
-        }, 1000)
+        const response = await getTempleTours()
+        if (response.code === 200 && response.data) {
+          // 转换数据格式以适配组件
+          this.templeList = response.data
+            .filter(item => item.coverUrl) // 只显示有封面的项目
+            .map(item => ({
+              id: item.id || Math.random().toString(36).substr(2, 9),
+              title: item.title || '未知古刹',
+              description: item.subtitle || '暂无描述',
+              imageUrl: item.coverUrl,
+              buttonText: '了解详情',
+              detail: item.content || '',
+              templeName: item.templeName
+            }))
+        } else {
+          console.error('获取古刹数据失败:', response.msg)
+          this.error = response.msg || '获取数据失败'
+          uni.showToast({
+            title: this.error,
+            icon: 'none',
+            duration: 2000
+          })
+        }
      } catch (error) {
        console.error('获取页面数据失败:', error)
+        this.error = '网络请求失败'
+        uni.showToast({
+          title: this.error,
+          icon: 'none',
+          duration: 2000
+        })
+      } finally {
        this.loading = false
      }
+    },
+    
+    // 处理古刹点击事件
+    handleTempleClick(temple) {
+      console.log('点击了古刹:', temple.title)
+      // 这里可以跳转到详情页面
+      uni.showToast({
+        title: `查看${temple.title}详情`,
+        icon: 'none',
+        duration: 2000
+      })
+      
+      // 示例：跳转到详情页面
+      // uni.navigateTo({
+      //   url: `/pages/ancient/detail?id=${temple.id}&title=${temple.title}`
+      // })
+    },
+
+    // 下拉刷新
+    async onRefresh() {
+      this.refreshing = true;
+      await this.loadPageData();
+      this.refreshing = false;
    }
  }
 }
 </script>

 <style lang="scss" scoped>
-page {
+.page {
  background: #F5F0E7;
 }
+
+.scroll-container {
+  height: 100vh; /* 确保scroll-view占满屏幕高度 */
+  display: flex;
+  flex-direction: column;
+}
+
 .header {
  width: 100%;
  min-height: 100vh;
@ -69,5 +159,71 @@ page {
  flex-direction: column;
  padding: 0 15rpx;
  padding-bottom: 40rpx;
+  box-sizing: border-box;
+}
+
+.temple-list {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+  padding: 20rpx 0;
+}
+
+.temple-card {
+  width: 100%;
+  margin-bottom: 20rpx;
+}
+
+.no-data {
+  text-align: center;
+  padding: 40rpx;
+  color: #999;
+  font-size: 28rpx;
+}
+
+.error-container {
+  text-align: center;
+  padding: 40rpx;
+  color: #f00;
+  font-size: 28rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20rpx;
+}
+
+.retry-button {
+  background-color: #007bff;
+  color: #fff;
+  padding: 10rpx 20rpx;
+  border-radius: 8rpx;
+  font-size: 32rpx;
+  line-height: 1;
+}
+
+.bottom {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%; // 确保占满宽度
+  z-index: 10; // 防止被内容覆盖
+  .files {
+    width: 100%; // 图片宽度适配容器
+    height: 80rpx; // 根据设计图调整高度
+    object-fit: cover; // 保持图片比例
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .temple-list {
+    gap: 15rpx;
+    padding: 15rpx 0;
+  }
+  
+  .temple-card {
+    margin-bottom: 15rpx;
+  }
 }
 </style>
--- a/pages/ancient/commponts/ancientItem.vue
+++ b/pages/ancient/commponts/ancientItem.vue
@ -0,0 +1,163 @@
+<script>
+export default {
+  name: "ancientItem",
+  props: {
+    title: {
+      type: String,
+      default: "万佛塔"
+    },
+    description: {
+      type: String,
+      default: "万佛塔始建于2016年"
+    },
+    imageUrl: {
+      type: String,
+      default: ""
+    },
+    buttonText: {
+      type: String,
+      default: "了解详情"
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<template>
+  <view class="ancient-card" @click="handleClick">
+    <view class="card-background">
+      <image 
+        v-if="imageUrl" 
+        :src="imageUrl" 
+        :alt="title"
+        class="background-image"
+        mode="aspectFill"
+      />
+      <view v-else class="placeholder-background"></view>
+    </view>
+    
+    <view class="card-content">
+      <text class="card-title">{{ title }}</text>
+      <text class="card-description">{{ description }}</text>
+      <view class="card-button">
+        <text>{{ buttonText }}</text>
+        <view class="arrow-icon">
+          <text class="arrow-text">→</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.ancient-card {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+  height: 280px;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.card-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  
+  .background-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    filter: blur(8px);
+  }
+  
+  .placeholder-background {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    filter: blur(8px);
+  }
+}
+
+.card-content {
+  position: relative;
+  z-index: 2;
+  height: 100%;
+  padding: 32px 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0.05) 100%
+  );
+  backdrop-filter: blur(10px);
+}
+
+.card-title {
+  color: white;
+  font-size: 28px;
+  font-weight: 600;
+  margin: 0 0 12px 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  line-height: 1.2;
+}
+
+.card-description {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 16px;
+  margin: 0 0 24px 0;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  line-height: 1.4;
+}
+
+.card-button {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 25px;
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  backdrop-filter: blur(10px);
+}
+
+.arrow-icon {
+  margin-left: 8px;
+}
+
+.arrow-text {
+  font-size: 16px;
+  color: white;
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .ancient-card {
+    max-width: 100%;
+    height: 240px;
+  }
+  
+  .card-content {
+    padding: 24px 20px;
+  }
+  
+  .card-title {
+    font-size: 24px;
+  }
+  
+  .card-description {
+    font-size: 14px;
+  }
+}
+</style>
--- a/pages/basePage/basePage.vue
+++ b/pages/basePage/basePage.vue
@ -54,7 +54,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-page {
+.page {
  background: #F5F0E7;
 }
 .header {
--- a/pages/nearbystores/index.vue
+++ b/pages/nearbystores/index.vue
@ -44,7 +44,7 @@
            <view 
              class="li" 
              v-for="(item, index) in navigationItems"
-              :key="item.aid"
+              :key="index"
              @click="navigateToPage(item, index)"
            >
              <image :src="item.img" mode=""></image>
@ -373,7 +373,6 @@ import { getArticleById } from "../../api/article/article.js";
 				try {
 					console.log('导航项信息:', item);
 					console.log('导航项索引:', index);
-
 					// 优先使用page字段进行路由跳转
 					if (item.page) {
 						console.log('使用page字段进行路由跳转:', item.page);
--- a/utils/request.js
+++ b/utils/request.js
@ -1,5 +1,5 @@
 // 统一请求工具
-import { getTempToken, shouldUseTempToken } from '@/config/dev.js'
+import { getTempToken, shouldUseTempToken, getAppId } from '@/config/dev.js'
 import { 
  showLoading, 
  hideLoading, 
@ -18,12 +18,15 @@ import {
 const ENV_CONFIG = {
  develop: { // 开发环境
    baseUrl: 'http://192.168.2.136:4501',
+    appId: 1 // TODO: 根据实际后端配置调整
  },
  trial: { // 体验版
    baseUrl: 'https://testlu.chuangtewl.com/prod-api',
+    appId: 1 // TODO: 根据实际后端配置调整
  },
  release: { // 正式版
    baseUrl: 'https://testlu.chuangtewl.com/prod-api',
+    appId: 1 // TODO: 根据实际后端配置调整
  }
 }

@ -32,10 +35,19 @@ const getCurrentConfig = () => {
  try {
    const { envVersion } = wx.getAccountInfoSync().miniProgram
    console.log('当前环境:', envVersion)
-    return ENV_CONFIG[envVersion] || ENV_CONFIG.release // 默认正式环境
+    const envConfig = ENV_CONFIG[envVersion] || ENV_CONFIG.release
+    // 确保配置对象包含所有必要属性
+    return {
+      baseUrl: envConfig.baseUrl,
+      appId: envConfig.appId || 1 // 确保appId有默认值
+    }
  } catch (error) {
    console.warn('获取环境失败，默认使用正式环境:', error)
-    return ENV_CONFIG.release
+    const fallbackConfig = ENV_CONFIG.release
+    return {
+      baseUrl: fallbackConfig.baseUrl,
+      appId: fallbackConfig.appId || 1 // 确保appId有默认值
+    }
  }
 }

@ -230,11 +242,27 @@ export function request(options = {}) {
    
    // 处理请求参数
    if (options.params && Object.keys(options.params).length > 0) {
-      requestOptions.data = options.params
+      requestOptions.data = { ...options.params }
+    } else if (options.data && Object.keys(options.data).length > 0) {
+      requestOptions.data = { ...options.data }
+    } else {
+      // 如果既没有params也没有data，初始化为空对象
+      requestOptions.data = {}
    }
    
-    if (options.data && Object.keys(options.data).length > 0) {
-      requestOptions.data = options.data
+    // 自动添加appId到所有请求参数中（除非明确指定不添加）
+    try {
+      if (!options.noAppId && requestOptions.data && !requestOptions.data.appId) {
+        const appId = getCurrentAppId()
+        requestOptions.data.appId = appId
+        console.log('自动添加appId:', appId, '到请求:', requestOptions.url)
+      }
+    } catch (error) {
+      console.error('添加appId时出错:', error)
+      // 确保即使出错也有appId
+      if (requestOptions.data) {
+        requestOptions.data.appId = 1
+      }
    }
    
    // 发起请求
@ -318,6 +346,19 @@ export function del(url, options = {}) {
  })
 }

+/**
+ * 获取当前环境的appId
+ * @returns {number} 当前环境的appId
+ */
+export function getCurrentAppId() {
+  try {
+    return config.appId || getAppId() || 1
+  } catch (error) {
+    console.error('获取appId失败，使用默认值:', error)
+    return 1
+  }
+}
+
 /**
 * 设置请求配置
 * @param {Object} newConfig - 新的配置