小程序对接finish

longz

2026-04-27 25df88d0ab9d7444ed1d162b9efa1259ac2f6f66

 yuyueMiniProgram/src/pages/aboutUs/index.vue

@@ -1,25 +1,64 @@
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { fetchSystemSettings } from '@/api/systemSettings'

definePage({
  name: 'aboutUs',
  layout: 'default',
  style: {
    navigationBarTitleText: '关于我们',
    navigationBarTitleText: '内容详情',
    navigationBarBackgroundColor: '#FFFFFF',
    navigationBarTextStyle: 'black',
  },
})

const pageTitle = ref('内容详情')
const settingCode = ref('CONTENT_ABOUT_US_HTML')
const loading = ref(false)
const htmlContent = ref('')

async function loadContent() {
  loading.value = true
  try {
    const result = await fetchSystemSettings(settingCode.value)
    htmlContent.value = result[settingCode.value] || ''
  }
  catch (error) {
    htmlContent.value = ''
    uni.showToast({
      title: error instanceof Error ? error.message : '加载内容失败',
      icon: 'none',
    })
  }
  finally {
    loading.value = false
  }
}

onLoad((query) => {
  pageTitle.value = typeof query?.title === 'string' && query.title ? decodeURIComponent(query.title) : '内容详情'
  settingCode.value = typeof query?.code === 'string' && query.code ? query.code : 'CONTENT_ABOUT_US_HTML'
  uni.setNavigationBarTitle({
    title: pageTitle.value,
  })
  void loadContent()
})
</script>

<template>
  <view class="min-h-screen bg-white px-[48rpx] py-[32rpx] box-border">
    <text class="text-[#676767] text-[24rpx] leading-[40rpx]">
      确认入园承诺，内容后台配置(小程序显示5秒倒计时后才能进行下一步)
      确认入园承诺，内容后台配置(小程序显示5秒倒，计时后才能进行下一步)确认入园承诺，内容后台配置(小程序显示5秒倒计时后才能进行下一步)确认入园承诺，内容后台配置(小程序显示5秒倒计时后才能进行下一步)
      确认入园承诺，内容后台配置(小程序显示5秒倒计时后才能进行下一步)
      确认入园承诺，内容后台配置(小程序显示5秒倒，计时后才能进行下一步)确认入园承诺，内容后台配置(小程序显示5秒倒，计时后才能进行下一步)确认入园承诺，内容后台配置(小程序显示5秒倒，计时后才能进行下一步)
    </text>
  <view class="min-h-screen bg-white px-[32rpx] py-[24rpx] box-border">
    <view v-if="loading" class="min-h-[320rpx] flex items-center justify-center text-[28rpx] text-[#999999]">
      加载中...
    </view>
    <view v-else-if="!htmlContent" class="min-h-[320rpx] flex items-center justify-center text-[28rpx] text-[#999999]">
      暂无内容
    </view>
    <rich-text v-else class="html-content text-[26rpx] leading-[44rpx] text-[#333333]" :nodes="htmlContent" />
  </view>
</template>

<style scoped>
</style>
.html-content {
  word-break: break-word;
}
</style>