mobile/src/pages/station/detail.vue

<template>
  <ay-container :cusStyle="{ padding: 0 }">
    <swiper
      class="swiper nmb-spac"
      circular
      :indicator-dots="pics.length > 1"
      :autoplay="true"
      :interval="3000"
    >
      <swiper-item v-for="(p, i) in pics" :key="i">
        <image mode="aspectFill" :src="p.picPath" />
      </swiper-item>
    </swiper>
    <div class="infos">
      <div class="font-bold b-fz mb-spac">
        {{ func.convert.nullView(data.detail.gasstationName) }}
      </div>
      <div class="center justify-between mb-spac">
        <div class="flex-1">
          <div class="center justify-start mb-spacd2">
            <uni-icons type="location-filled" size="16" class="mr-spacd4" />
            {{ func.convert.nullView(stationInfo.distance) }}km |
            {{ func.convert.nullView(data.detail.address) }}
          </div>
          <ayb-phone :phone="data.detail.mobile" :center="false"></ayb-phone>
        </div>
        <div
          class="text-center p-color"
          :class="{ 'gray-color': !stationInfo.longitude }"
          @click="methods.openLocation"
        >
          <uni-icons type="paperplane-filled" color="" size="24" />
          <div>导航</div>
        </div>
      </div>
      <div class="chunk childs-fcjb-mbd2">
        <div>
          <div class="font-bold bs-fz">今日平台价</div>
          <div class="gray-color">价格仅供参考，以当天实际为准</div>
        </div>
        <div class="mt-spac">
          <div class="lng bs-fz">LNG</div>
          <div>
            <span class="font-bold mr-spacd2 price-color bs-fz">
              {{ stationInfo.actualPrice }}
            </span>
            <span class="s-fz price">元/公斤</span>
          </div>
        </div>
      </div>
      <div class="chunk">
        <div class="font-bold bs-fz mb-spacd2">简介</div>
        <div class="">{{ func.convert.nullView(data.detail.introduce) }}</div>
      </div>
      <div class="chunk childs-fcjb-mbd2">
        <div>
          <span>加注机数量</span>
          <div>{{ func.convert.nullView(data.detail.fillingMachineNum) }}</div>
        </div>
        <div>
          <span>收银员数量</span>
          <div>{{ func.convert.nullView(data.detail.cashierNum) }}</div>
        </div>
      </div>
    </div>
  </ay-container>
</template>

<script lang="ts" setup>
import defstation from '@img/defstation.png'
const data = reactive({
  detail: {} as DerIStationDetail,
  stationInfo: null as GasstationVO对象,
})

const methods = {
  openLocation() {
    func.native.openLocation({
      latitude: Number(stationInfo.value.latitude),
      longitude: Number(stationInfo.value.longitude),
      name: stationInfo.value.nickName,
      address: stationInfo.value.address,
    })
  },
}
const params = computed(() => {
  return store.curPage.pageConfig.params as GasstationVO对象
})
const stationInfo = computed(() => {
  return data.stationInfo || params.value
})
const pics = computed(() => {
  let rv = []
  if (data.detail.orgPics?.length > 0) {
    rv = data.detail.orgPics.map((m) => {
      return {
        picPath: ay.getResourceUrl(m.picPath),
      }
    })
  } else {
    rv.push({ picPath: defstation })
  }
  return rv
})

ay.entrance(async (args) => {
  webapi.user.find_3({ gasstationId: params.value.gasstationId }).then((res) => {
    data.detail = res
  })
  if (!Object.hasOwn(params.value, 'distance')) {
    const location = await func.native.getLocation()
    data.stationInfo = await webapi.strategy.find_for_mini({
      gasstationId: params.value.gasstationId,
      longitude: location.longitude.toString(),
      latitude: location.latitude.toString(),
    })
  }
})
</script>

<style lang="scss" scoped>
.swiper {
  height: 488rpx;
}
::v-deep .wx-swiper-dots-horizontal,
::v-deep .uni-swiper-dots-horizontal {
  margin-bottom: $p-spac;
}
.infos {
  position: relative;
  padding: $p-spac;
  background-color: $bg-color;
  border-radius: $p-spac;
}
.lng {
  padding: $p-spacd4 $p-spacd2;
  color: $p-recolor;
  background-color: #00c48c;
  border-radius: $p-spacd4;
}
</style>