ShenhaiH5/src/pages/parkInfo.vue

<template>
  <view>
    <u-swiper :list="parkInfo.images" :height="400" border-radius="0"></u-swiper>
    <view class="park-info-container">
      <view class="park-info-wrapper">
        <view class="info-title">基本信息</view>
        <view class="info-item">
          <view class="info-item-left">服务区类型</view>
          <view class="info-item-value">{{ parkInfo.cate ? ['', '服务区', '停车区'][parkInfo.cate] : '' }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">地区</view>
          <view class="info-item-value"> {{ parkInfo.provinceName }} {{ parkInfo.cityName }} {{ parkInfo.districtName || '' }} </view>
        </view>
        <view class="info-item">
          <view class="info-item-left">负责人</view>
          <view class="info-item-value">{{ parkInfo.leader }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">联系方式</view>
          <view class="info-item-value">{{ parkInfo.mobile }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">服务区级别</view>
          <view class="info-item-value">{{ parkInfo.level ? handleMate(parkInfo.level, levelList) : '' }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">排序</view>
          <view class="info-item-value">{{ parkInfo.sort }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">占地面积</view>
          <view class="info-item-value">{{ parkInfo.area }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">地址</view>
          <view class="info-item-value">{{ parkInfo.address }}</view>
        </view>
        <!-- <view class="info-item">
          <view class="info-item-left">服务区图片</view>
          <view class="info-item-value">
            <view v-for="(item, index) in parkInfo.images" :key="index">
              <image :src="item" mode="aspectFill" style="width: 200rpx; height: 80rpx" @click="previewImage(parkInfo.images, index)" />
            </view>
          </view>
        </view> -->
        <view class="info-item" style="align-items: flex-start">
          <view class="info-item-left">服务区介绍</view>
          <view class="info-item-value">{{ parkInfo.points }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left"></view>
          <view class="info-item-value"></view>
        </view>
      </view>
      <view class="park-info-wrapper">
        <view class="info-title">详情信息</view>
        <u-parse :html="parkInfo.introduce"></u-parse>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getParkInfo } from '@/api/home'
import { getDictTypeApi } from '@/api/system'

const id = ref('')
onLoad((options) => {
  id.value = options?.id || '2001933922038382593'
  getParkInfoFn()
  getLevelListFn()
})

const parkInfo = ref<any>({})
const getParkInfoFn = async () => {
  const res = await getParkInfo(id.value)
  if (res.code === 200) {
    if (res.data) {
      parkInfo.value = res.data
      // 图片处理
      parkInfo.value.images = parkInfo.value.images.map((item: { filePath: string }) => item.filePath)
      // 标题处理
      uni.setNavigationBarTitle({
        title: parkInfo.value.name || ''
      })
    }
  }
}

// 获取服务区级别
const levelList = ref<any>([])
const getLevelListFn = async () => {
  const res = await getDictTypeApi('space_park_level')
  if (res.code === 200) {
    if (res.data) {
      levelList.value = res.data
    }
  }
}

// 数组数据匹配
const handleMate = (data: any, list: any[]) => {
  const value = list.filter((item: { id: any; value: any; dictValue: string }) => {
    return item.id === data || item.value === data || item.dictValue === String(data)
  })
  if (value && value.length) {
    return value[0].name || value[0].label || value[0].dictLabel
  }
}

// 图片预览功能
const previewImage = (pics: string[], currentIndex: number) => {
  // 将图片路径转换为完整路径
  const fullImageList = pics.map((pic) => pic)

  // 调用uni的图片预览API
  uni.previewImage({
    current: fullImageList[currentIndex], // 当前显示图片的http链接
    urls: fullImageList, // 需要预览的图片http链接列表
    loop: true // 是否可循环预览
  })
}
</script>

<style scoped lang="scss">
.park-info-container {
  box-sizing: border-box;
  padding: 24rpx;
  .park-info-wrapper {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 14rpx;
    margin-bottom: 24rpx;
    .info-title {
      font-size: 32rpx;
      color: #1d2129;
      font-weight: bold;
      margin-bottom: 24rpx;
    }
    .info-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #e5e8ed;
      padding: 24rpx 0;
      &:first-child {
        padding-top: 0;
      }
      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      .info-item-left {
        font-size: 28rpx;
        color: #1d2129;
        width: 200rpx;
      }
      .info-item-value {
        flex: 1;
        font-size: 28rpx;
        color: #737880;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>