buddhism/pages/test/monk-detail-test.vue

<template>
  <view class="monk-detail-test-page">
    <view class="test-section">
      <text class="section-title">高僧详情API测试</text>
      <input v-model="monkId" placeholder="请输入高僧ID" class="input-field" />
      <button @click="testMonkDetail" class="test-btn">测试高僧详情API</button>
      <button @click="testMonkList" class="test-btn">测试高僧列表API</button>
    </view>

    <view class="result-section">
      <text class="section-title">测试结果</text>
      <text class="result-text">{{ testResult }}</text>
    </view>
  </view>
</template>

<script>
  import { getMonkDetail, getMonkList } from '@/api/monk/monkDetail.js'

  export default {
    data() {
      return {
        testResult: '',
        monkId: '1', // 默认测试ID
      }
    },
    methods: {
      async testMonkDetail() {
        try {
          this.testResult = '正在测试高僧详情API...'
          const result = await getMonkDetail(this.monkId)
          this.testResult = `高僧详情API测试成功:\n${JSON.stringify(result, null, 2)}`
        } catch (error) {
          this.testResult = `高僧详情API测试失败: ${error.message}`
        }
      },

      async testMonkList() {
        try {
          this.testResult = '正在测试高僧列表API...'
          const result = await getMonkList({ name: '' })
          this.testResult = `高僧列表API测试成功:\n${JSON.stringify(result, null, 2)}`
        } catch (error) {
          this.testResult = `高僧列表API测试失败: ${error.message}`
        }
      },
    },
  }
</script>

<style lang="scss">
  .monk-detail-test-page {
    padding: 40rpx;
  }

  .test-section {
    margin-bottom: 40rpx;
  }

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
  }

  .input-field {
    width: 100%;
    height: 80rpx;
    border: 1px solid #ccc;
    border-radius: 10rpx;
    padding: 0 20rpx;
    margin-bottom: 20rpx;
  }

  .test-btn {
    margin: 20rpx 0;
    padding: 20rpx;
    background-color: #007aff;
    color: white;
    border-radius: 10rpx;
  }

  .result-section {
    margin-top: 40rpx;
  }

  .result-text {
    font-size: 24rpx;
    color: #666;
    word-break: break-all;
    white-space: pre-wrap;
  }
</style>