nursing-home-app/src/pages/facility/facilityDetail/index.vue

<template>
  <view class="facility-facilityDetail">
    <wd-swiper :autoplay="false" :list="state.photoList" :indicator="{ type: 'fraction' }"
      indicatorPosition="bottom-right" @click="onClickSwiper(state.photoList)" />
    <view class="facility-facilityDetail-content">
      <view class="facility-facilityDetail-content-title">
        {{ state.info.title }}
      </view>
      <view class="facility-facilityDetail-content-text">
        {{ state.info.description }}
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { apis } from '@/apis';

interface State {
  id: string,
  photoList: string[],
  info: {
    title: string,// 标题
    description: string,// 描述
  },
};

const state = reactive<State>({
  id: '',
  photoList: [],
  info: {
    title: '',
    description: '',
  },
});

const api = {
  // 获取设施详情
  fetchFacilityDetail: async () => {
    try {
      const res = await apis.fetchFacilityDetail(state.id);
      const data = res.data;
      const photoList = data.sysimg.map((item: any) => item.url);
      state.photoList = photoList;
      state.info = {
        title: data.facilitiesTitle,
        description: data.facilitiesDesc,
      }
    } catch (error: any) {
      uni.showToast({
        icon: 'none',
        mask: true,
        duration: 2000,
        title: error.msg,
      });
    }
  },
}

const init = async () => {
  uni.showLoading({
    title: '加载中',
  });
  // 获取设施详情
  await api.fetchFacilityDetail();
  uni.hideLoading();
};

onLoad((options) => {
  const data = options as { id: string };
  state.id = data.id;
  init();
});

// 点击轮播
const onClickSwiper = (list: string[]) => {
  uni.previewImage({
    urls: list,
  });
}
</script>

<style lang="scss" scoped>
.facility-facilityDetail {
  :deep(.wd-swiper__track) {
    border-radius: 0;
  }

  &-content {
    padding: 0 20rpx;
    background: #FFFFFF;

    &-title {
      font-weight: bold;
      margin: 20rpx 0;
    }

    &-text {
      color: #101010;
    }
  }
}
</style>