city-gather/src/subPack-charge/chargeStart/chargeStart.vue

<script setup lang="ts">
import router from '@/router'
import { StaticUrl } from '@/config'

const { statusBarHeight, MenuButtonHeight, opcity } = storeToRefs(useSysStore())
const { userInfo } = storeToRefs(useUserStore())
definePage({
  name: 'charge-start',
  islogin: true,
  style: {
    navigationBarTitleText: '启动终端',
    navigationStyle: 'custom',
  },
})
const connectorCode = ref()
onLoad((options: any) => {
  connectorCode.value = options.connectorCode
})

onMounted(() => {
  opcity.value = 0
  getConnectorDetail()
})

onPageScroll((e) => {
  const calculatedOpacity = e.scrollTop / 100
  opcity.value = Math.min(1, Math.max(0.1, calculatedOpacity))
})

const connectorDetailInfo = ref<Api.chargeConnectorDetail>()
async function getConnectorDetail() {
  const res = await Apis.charge.connectorDetail({ data: { connectorCode: connectorCode.value } })
  connectorDetailInfo.value = res.data
}

const fromData = ref<Api.invokeChargeList>({
  equipmentId: 0,
  stationId: 0,
  connectorId: '',
  consigneeName: userInfo.value?.nickName,
  consigneeMobile: userInfo.value?.mobile,
})
async function launchCharge() {
  // router.push({ name: 'chargeing' })
  // return
  fromData.value.equipmentId = connectorDetailInfo.value?.equipmentId
  fromData.value.stationId = connectorDetailInfo.value?.stationId
  fromData.value.connectorId = connectorDetailInfo.value?.connectorCode
  const res = await Apis.charge.invokeCharge({ data: fromData.value })
  if (res.code === '00000') {
    router.push({ name: 'chargeing', params: { orderNo: res.data } })
  }
}
</script>

<template>
  <view class="charge-start-page min-h-screen bg-[linear-gradient(180deg,#F5FEDD_0%,#FCFFF3_22.46%,#FAFCFB_27.26%,#FBFDFC_45.2%,#FBFCFB_68.94%,#FBFCFB_100%)]">
    <wd-navbar
      title="启动终端" :custom-style="`background-color: rgba(226, 255, 145, ${opcity})`" :bordered="false"
      :z-index="999" safe-area-inset-top left-arrow fixed @click-left="router.back()"
    />
    <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" />
    <view>
      <view class="h-486rpx w-648rpx">
        <image
          class="h-full w-full"
          :src="`${StaticUrl}/start-charge.png`"
        />
      </view>
      <view class="mt-94rpx flex items-center justify-center">
        <view class="w-182rpx text-center">
          <view class="text-28rpx text-#AAA">
            电流A
          </view>
          <view class="mt-24rpx text-32rpx font-800">
            {{ connectorDetailInfo?.current }}
          </view>
        </view>
        <view class="h-40rpx w-2rpx bg-#DEDEDE" />
        <view class="w-182rpx text-center">
          <view class="text-28rpx text-#AAA">
            电压V
          </view>
          <view class="mt-24rpx text-32rpx font-800">
            {{ connectorDetailInfo?.currentVoltage || '0' }}
          </view>
        </view>
        <view class="h-40rpx w-2rpx bg-#DEDEDE" />
        <view class="w-182rpx text-center">
          <view class="text-28rpx text-#AAA">
            功率KW
          </view>
          <view class="mt-24rpx text-32rpx font-800">
            {{ connectorDetailInfo?.power }}
          </view>
        </view>
      </view>
      <view class="mt-40rpx px24rpx">
        <view class="flex items-center justify-between">
          <view class="text-28rpx font-bold">
            当前电价
          </view>
          <view class="flex items-center">
            <text class="text-30rpx text-#FC5A5A font-bold">
              {{ connectorDetailInfo?.currentPrice }}元
            </text>
            <text class="text-28rpx text-#AAA">
              /度
            </text>
          </view>
        </view>
        <view class="mt-20rpx flex items-center justify-between">
          <view class="text-28rpx font-bold">
            当前时段
          </view>
          <view class="text-28rpx text-#AAA">
            {{ connectorDetailInfo?.currentPeriodDesc }}
          </view>
        </view>
        <view class="mt-20rpx flex items-center justify-between">
          <view class="text-28rpx font-bold">
            停车参考
          </view>
          <view class="text-28rpx text-#AAA">
            {{ connectorDetailInfo?.parkingTips || '--' }}
          </view>
        </view>
        <view class="mt-28rpx text-24rpx text-#AAA">
          账单信息可能会有所延迟，具体以实际结算为准
        </view>
      </view>
    </view>
    <view class="fixed bottom-66rpx left-24rpx h-100rpx w-702rpx rounded-16rpx bg-[linear-gradient(90deg,#DBFC81_0%,#9ED605_100%)] text-center text-28rpx font-800 line-height-[100rpx] shadow-[inset_0rpx_6rpx_20rpx_2rpx_#FFFFFF]" @click="launchCharge">
      启动终端充电
    </view>
  </view>
</template>

<style lang="scss" scoped></style>