提示文案从接口获取

hookehuyr
Commit 25cbe201adb077c9fa3bb360157df7afca7e5ada 25cbe201 1 parent 2960a576
Showing 3 changed files with 77 additions and 41 deletions
src/api/index.js
src/pages/detail/index.vue
src/pages/index/index.vue
--- a/src/api/index.js
View file @25cbe20
+++ b/src/api/index.js
View file @25cbe20
 /*
  * @Date: 2023-12-22 10:29:37
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-05-21 20:51:57
+ * @LastEditTime: 2024-06-06 09:31:34
  * @FilePath: /meihuaApp/src/api/index.js
  * @Description: 文件描述
  */
@@ -21,7 +21,7 @@ const Api = {
   PAY: '/srv/?a=pay',
   PAY_CHECK: '/srv/?a=pay_check',
   ORDER_SUCCESS: '/srv/?a=room_data&t=order_success',
-  TMP_SYS_PARAM: '/srv/?a=get_item&item_title=参数名称',
+  TMP_SYS_PARAM: '/srv/?a=get_item',
 }
 /**
--- a/src/pages/detail/index.vue
View file @25cbe20
+++ b/src/pages/detail/index.vue
View file @25cbe20
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-05-28 17:52:48
+ * @LastEditTime: 2024-06-06 10:11:42
  * @FilePath: /meihuaApp/src/pages/detail/index.vue
  * @Description: 房间详情页面
 -->
@@ -52,7 +52,8 @@
             <view class="notice-content">
               <view>
                 <view class="title">入住须知</view>
-                <view class="content">1、本味山居三面环水，为了您的安全，请远离水边，禁止戏水、垂钓、游泳、奔跑等。如有违反，自行承担后果。</view>
+                <view v-html="state.roomInNote " class="taro_html"></view>
+                <!-- <view class="content">1、本味山居三面环水，为了您的安全，请远离水边，禁止戏水、垂钓、游泳、奔跑等。如有违反，自行承担后果。</view>
                 <view class="content">2、为了防范火灾，禁止携带火种上岛，全岛禁烟。如需使用壁炉，请和工作人员联系，做到人走火息。</view>
                 <view class="content">3、本味山居周边有野生动物出没，为了安全，禁止进入山居经营范围外的区域。夜间照明范围有限，慎勿外出行走。如有违反，自行承担后果。</view>
                 <view class="content">4、山居远离喧嚣，倡导舒缓本味生活，禁止携带荤食、含酒精饮品、宠物，勿穿吊带、短裤、短裙、凉鞋、拖鞋等暴露衣装。</view>
@@ -64,7 +65,7 @@
                 <view class="content">9、取消或变更请及时联系我们。</view>
                 <view class="content">若入住前一天取消，扣除50%费用作为违约金。</view>
                 <view class="content">若入住当天取消，扣除100%费用。</view>
-                <view class="content mb-1">此须知为入住本味山居之前提，请预订前仔细阅读。若有预订，视为同意上述须知。</view>
+                <view class="content mb-1">此须知为入住本味山居之前提，请预订前仔细阅读。若有预订，视为同意上述须知。</view> -->
               </view>
               <nut-row :gutter="10">
@@ -82,10 +83,11 @@
 <script setup>
 import Taro from '@tarojs/taro'
+import '@tarojs/taro/html.css'
 import { ref, computed, reactive, onMounted } from "vue";
 import calendarSelect from '@/components/calendarSelect.vue'
 import { getCurrentPageParam } from "@/utils/weapp";
-import { getRoomAPI, showMyInfoAPI } from '@/api/index'
+import { getRoomAPI, showMyInfoAPI, tmpSysParamAPI } from '@/api/index'
 /**
  * 获取日期星期几
@@ -197,6 +199,7 @@ const state = reactive({
   imgData: [],
   roomInfo: {},
   phone: '',
+  roomInNote: ''
 });
 onMounted(async () => {
@@ -229,6 +232,11 @@ onMounted(async () => {
       return el
     }
   }
+  // 获取入住须知
+  const { code, data } = await tmpSysParamAPI({ item_title: '梅花岛入住须知' });
+  if (code) {
+    state.roomInNote = data.description.replace(/\r\n/g, '<br />')
+  }
 });
 // TODO: 在预定房之前弹出须知，预订者要同意须知
--- a/src/pages/index/index.vue
View file @25cbe20
+++ b/src/pages/index/index.vue
View file @25cbe20
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-05-29 09:48:54
+ * @LastEditTime: 2024-06-06 10:18:12
  * @FilePath: /meihuaApp/src/pages/index/index.vue
  * @Description: 首页
 -->
@@ -46,23 +46,29 @@
           <view class="notice-content">
             <view v-if="notice_type === 1">
               <view class="title">本味掠影</view>
-              <view v-html="html1"></view>
+              <!-- <view v-html="html1"></view> -->
-              <view class="content mb-1">4、静心服务：健身气功八段锦，湖景茶室、咖啡室，可参与甘露别院静心茶会、别院巡礼等活动（该项看时间因缘）。</view>
+              <view v-html="html_data" class="taro_html"></view>
+              <view class="mb-1"></view>
+              <!-- <view class="content mb-1">4、静心服务：健身气功八段锦，湖景茶室、咖啡室，可参与甘露别院静心茶会、别院巡礼等活动（该项看时间因缘）。</view> -->
             </view>
             <view v-if="notice_type === 2">
               <view class="title">入住须知</view>
-              <view v-html="html2"></view>
+              <view v-html="html_data" class="taro_html"></view>
-              <view class="content mb-1">此须知为入住本味山居之前提，请预订前仔细阅读。若有预订，视为同意上述须知。</view>
+              <view class="mb-1"></view>
+              <!-- <view v-html="html2"></view> -->
+              <!-- <view class="content mb-1">此须知为入住本味山居之前提，请预订前仔细阅读。若有预订，视为同意上述须知。</view> -->
             </view>
             <view v-if="notice_type === 3">
               <view class="title">配套设施</view>
-              <view class="content">1、24小时热水供应，部分房间有空调、吊扇，部分区域Wi-Fi。</view>
+              <view v-html="html_data" class="taro_html"></view>
+              <view class="mb-1"></view>
+              <!-- <view class="content">1、24小时热水供应，部分房间有空调、吊扇，部分区域Wi-Fi。</view>
               <view class="content">2、独栋配有茶室、客厅、书房，部分独栋配有独立厨房、餐厅和院子。</view>
               <view class="content">3、独栋二楼配有景观天窗。</view>
               <view class="content">4、设有公共洗衣房（部分独栋配独立洗衣房）。</view>
               <view class="content">5、公共区域有湖景餐厅、湖景咖啡屋。</view>
               <view class="content">6、房内配有烧水壶、茶具、台灯、吹风机、衣架、拖鞋、洗发水、沐浴露。</view>
-              <view class="content mb-1">7、岛上环保需要，牙膏、牙刷、毛巾、浴巾等私人用品请自带。</view>
+              <view class="content mb-1">7、岛上环保需要，牙膏、牙刷、毛巾、浴巾等私人用品请自带。</view> -->
             </view>
           </view>
@@ -77,13 +83,14 @@
 <script setup>
 import Taro from '@tarojs/taro'
+import '@tarojs/taro/html.css'
 import { IconFont } from '@nutui/icons-vue-taro';
 import { ref } from 'vue';
 import roomCard from '@/components/roomCard.vue'
 // import arrowDownImg from '@/assets/images/arrow-down.png'
 import navBar from '@/components/navBar.vue'
 import { useDidShow } from '@tarojs/taro'
-import { getListAPI } from '@/api/index'
+import { getListAPI, tmpSysParamAPI } from '@/api/index'
 // TAG: 模拟onShow事件
 useDidShow(() => {
@@ -199,6 +206,7 @@ export default {
       notice_type: 1,
       html1: '',
       html2: '',
+      html_data: '',
     };
   },
   methods: {
@@ -233,40 +241,60 @@ export default {
     onArrowDown () {
       this.scrollTop = this.indexCoverHeight; // 调整滚动控件高度
     },
+    formattedContent(text) {
+      return text.replace(/\r\n/g, '<br />');
+    },
     async onShowNotice (type) { // 显示须知
       this.show_notice = true;
       this.notice_type = type;
+      let item_title= '';
+      switch (type) {
+        case 1:
+        item_title = '梅花岛本味掠影'
+          break;
+        case 2:
+        item_title = '梅花岛入住须知'
+          break;
+        case 3:
+        item_title = '梅花岛配套设施'
+          break;
+      }
+      const { code, data } = await tmpSysParamAPI({ item_title });
+      if (code) {
+        this.html_data = this.formattedContent(data.description)
+      }
       // 处理须知滚动，无法处理问题
-      const html1 = `
+      // const html1 = `
-        <view class="content" style="text-indent: 2rem;">外象多变，本心至简。人生百味，归本味。</view>
+      //   <view class="content" style="text-indent: 2rem;">外象多变，本心至简。人生百味，归本味。</view>
-        <view class="content" style="text-indent: 2rem;">梅花岛本味山居，位于福建省三明市泰宁世界地质公园、世界自然遗产地核心景区大金湖中心。2022年动工，将岛上23幢夯土、砖彻或全木结构的旧民居进行适当修复，成为中国旧乡村改造为禅意民宿的优秀样板。山中景色四时不同，十里平湖美丽如画，空气清新，泉水清洌，可以感受大自然的静谧祥和，享受水天相接、与天地融为一体的自在惬意，完全地放松、放空、放下。</view>
+      //   <view class="content" style="text-indent: 2rem;">梅花岛本味山居，位于福建省三明市泰宁世界地质公园、世界自然遗产地核心景区大金湖中心。2022年动工，将岛上23幢夯土、砖彻或全木结构的旧民居进行适当修复，成为中国旧乡村改造为禅意民宿的优秀样板。山中景色四时不同，十里平湖美丽如画，空气清新，泉水清洌，可以感受大自然的静谧祥和，享受水天相接、与天地融为一体的自在惬意，完全地放松、放空、放下。</view>
-        <view class="content" style="text-indent: 2rem;">聆听安静，安顿身心，静候您。</view>
+      //   <view class="content" style="text-indent: 2rem;">聆听安静，安顿身心，静候您。</view>
-        <view class="content" style="text-indent: 2rem; font-weight: bold;">特色：</view>
+      //   <view class="content" style="text-indent: 2rem; font-weight: bold;">特色：</view>
-        <view class="content">1、提供三餐天然纯净素食（不含五辛）。</view>
+      //   <view class="content">1、提供三餐天然纯净素食（不含五辛）。</view>
-        <view class="content">2、古早作息方式，日出而作，日落而息。</view>
+      //   <view class="content">2、古早作息方式，日出而作，日落而息。</view>
-        <view class="content">3、正念、静心、慢生活。</view>
+      //   <view class="content">3、正念、静心、慢生活。</view>
-      `;
+      // `;
-      const html2 = `
+      // const html2 = `
-        <view class="content">1、本味山居三面环水，为了您的安全，请远离水边，禁止戏水、垂钓、游泳、奔跑等。如有违反，自行承担后果。</view>
+      //   <view class="content">1、本味山居三面环水，为了您的安全，请远离水边，禁止戏水、垂钓、游泳、奔跑等。如有违反，自行承担后果。</view>
-        <view class="content">2、为了防范火灾，禁止携带火种上岛，全岛禁烟。如需使用壁炉，请和工作人员联系，做到人走火息。</view>
+      //   <view class="content">2、为了防范火灾，禁止携带火种上岛，全岛禁烟。如需使用壁炉，请和工作人员联系，做到人走火息。</view>
-        <view class="content">3、本味山居周边有野生动物出没，为了安全，禁止进入山居经营范围外的区域。夜间照明范围有限，慎勿外出行走。如有违反，自行承担后果。</view>
+      //   <view class="content">3、本味山居周边有野生动物出没，为了安全，禁止进入山居经营范围外的区域。夜间照明范围有限，慎勿外出行走。如有违反，自行承担后果。</view>
-        <view class="content">4、山居远离喧嚣，倡导舒缓本味生活，禁止携带荤食、含酒精饮品、宠物，勿穿吊带、短裤、短裙、凉鞋、拖鞋等暴露衣装。</view>
+      //   <view class="content">4、山居远离喧嚣，倡导舒缓本味生活，禁止携带荤食、含酒精饮品、宠物，勿穿吊带、短裤、短裙、凉鞋、拖鞋等暴露衣装。</view>
-        <view class="content">5、山居统一安排渡船上岛，为保证湖内通行安全，禁止私自雇船进出岛。如有违反，视为当天取消预订，山居不予办理入住。</view>
+      //   <view class="content">5、山居统一安排渡船上岛，为保证湖内通行安全，禁止私自雇船进出岛。如有违反，视为当天取消预订，山居不予办理入住。</view>
-        <view class="content">6、岛内自然生态茂盛，蚊虫较多，尽量穿着长衣长裤、平底鞋。房间内备有风油精，如果出现过敏等严重症状，请及时和工作人员联系。</view>
+      //   <view class="content">6、岛内自然生态茂盛，蚊虫较多，尽量穿着长衣长裤、平底鞋。房间内备有风油精，如果出现过敏等严重症状，请及时和工作人员联系。</view>
-        <view class="content">7、客服回复时间：8:00-10:50；14:30-17:00。</view>
+      //   <view class="content">7、客服回复时间：8:00-10:50；14:30-17:00。</view>
-        <view class="content">上岛渡船班次：上午：8:00；9:30；10:20；下午：14:30；16:30。</view>
+      //   <view class="content">上岛渡船班次：上午：8:00；9:30；10:20；下午：14:30；16:30。</view>
-        <view class="content">8、入住人员需年满18周岁。</view>
+      //   <view class="content">8、入住人员需年满18周岁。</view>
-        <view class="content">9、取消或变更请及时联系我们。</view>
+      //   <view class="content">9、取消或变更请及时联系我们。</view>
-        <view class="content">若入住前一天取消，扣除50%费用作为违约金。</view>
+      //   <view class="content">若入住前一天取消，扣除50%费用作为违约金。</view>
-        <view class="content">若入住当天取消，扣除100%费用。</view>
+      //   <view class="content">若入住当天取消，扣除100%费用。</view>
-      `;
+      // `;
-      this.html1 = html1;
+      // this.html1 = html1;
-      this.html2 = html2;
+      // this.html2 = html2;
     },
     onCloseNotice () { // 关闭须知
       this.show_notice = false;
-      this.html1 = '';
+      // this.html1 = '';
-      this.html2 = '';
+      // this.html2 = '';
+      this.html_data = '';
     }
   },
   onPageScroll ({ scrollTop }) {