第一个版本

src/packages/content/pages/usage-guide.vue

@@ -1,19 +1,51 @@
 <template>
   <view class="page">
-    <image
-      class="guide-image"
-      src="https://hn12301.oss-cn-shenzhen.aliyuncs.com/hn12301/%E5%9B%BE%E7%89%87%E6%96%87%E5%AD%97%E6%9B%BF%E6%8D%A2.png"
-      mode="widthFix"
-    />
+    <view v-if="loading" class="loading">
+      <text class="loading-text">加载中...</text>
+    </view>
+    <image v-if="imageUrl" class="guide-image" :src="imageUrl" mode="widthFix" />
   </view>
 </template>
 
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { post } from '../../../api/request'
+import type { BannerItem } from '../../../api/types'
+
+const imageUrl = ref('')
+const loading = ref(true)
+
+onMounted(async () => {
+  try {
+    const data = await post<BannerItem[]>('/mp-api/mpContent/queryList', { channel: 'aspx', type: 'GUIDE' })
+    if (data && data.length > 0) {
+      imageUrl.value = data[0].imageUrl || ''
+    }
+  } catch {
+    // 静默失败
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
   background: $color-card;
 }
 
+.loading {
+  display: flex;
+  justify-content: center;
+  padding: 80rpx 0;
+}
+
+.loading-text {
+  font-size: $font-size-sm;
+  color: $uv-tips-color;
+}
+
 .guide-image {
   width: 100%;
   display: block;