smqjh-refuel/src/pages/refuelDetaile/index.vue

<script setup lang="ts">
import type { CouponInfoAppVo, GasStationDetailVO } from '@/api/globals'
import router from '@/router'

definePage({ name: 'refuelDetaile', islogin: false, style: { navigationBarTitleText: '加油站详情', navigationStyle: 'custom' } })
const StaticUrl = import.meta.env.VITE_STATIC_BASE_URL
const showModel = ref(false)
const storeDetail = ref<GasStationDetailVO>()
const dklist = ref<CouponInfoAppVo[]>([])
const clickItem = ref<CouponInfoAppVo>()
onLoad(async (options: any) => {
  await getData(options.id)
})

async function getData(storeId: string) {
  const res = await Apis.general.post_smqjh_pms_app_api_v1_product_oil_querystoredetail({ data: { storeId, lat: useUserStore().lat, lon: useUserStore().lng } })
  storeDetail.value = res.data
  const { data } = await Apis.app.get_smqjh_system_app_api_coupon_findlist()
  dklist.value = data || []
}
function handleShowMap() {
  console.log('show map')
  uni.openLocation({
    latitude: useUserStore().lat,
    longitude: useUserStore().lng,
    success() {
      console.log('success')
    },
  })
}
function handleExchange(item: CouponInfoAppVo) {
  console.log('exchange', item)
  if (item.receiveSign)
    return
  if ((Number(item.inventoryActual)) === 0)
    return
  clickItem.value = item
  showModel.value = true
}
function handleKf() {
  useUserStore().handleCommonWx('pages/my/index', '')
}
</script>

<template>
  <template v-if="storeDetail">
    <view class="p24rpx">
      <view class="h336rpx">
        <wd-swiper :list="storeDetail.storePicList" height="336rpx" />
      </view>
      <view class="mt20rpx h160rpx flex items-center justify-between rounded-16rpx bg-white bg-cover bg-center px24rpx" :style="{ backgroundImage: `url(${StaticUrl}/djk-shop-nav-bg.png)` }">
        <view>
          <view class="flex items-center text-36rpx font-semibold">
            {{ storeDetail.storeName }}
          </view>
          <view class="mt20rpx text-#aaa">
            {{ storeDetail.address }}
          </view>
        </view>
        <view class="flex flex-shrink-0 items-center">
          <view class="mr40rpx flex flex-col items-center justify-center" @click="handleShowMap">
            <image
              :src="`${StaticUrl}/djk-shop-dh.png`"
              class="h40rpx w40rpx"
            />
            <view class="mt20rpx text-28rpx">
              导航
            </view>
          </view>
          <view class="flex flex-col items-center justify-center" @click="handleKf">
            <image
              :src="`${StaticUrl}/smqjh-jy-kf.png`"
              class="h40rpx w40rpx"
            />
            <view class="mt20rpx text-28rpx">
              客服
            </view>
          </view>
        </view>
      </view>
      <view v-if="dklist" class="mt20rpx rounded-16rpx bg-white px24rpx py28rpx">
        <view class="flex items-center">
          <template v-if="!storeDetail.allowanceClientScheme">
            <wd-icon name="check-circle-filled" size="22px" color="#52C41A" />
            <view class="ml20rpx text-28rpx font-semibold">
              本站可用抵扣券
            </view>
          </template>
          <template v-else>
            <wd-icon name="close-circle-filled" size="22px" color="#FF4D3A" />
            <view class="ml20rpx text-28rpx font-semibold">
              本站暂无抵扣券
            </view>
          </template>
        </view>
        <view v-if="!storeDetail.allowanceClientScheme" class="mt24rpx flex overflow-x-scroll">
          <view v-for="item in dklist" :key="item.id" :class="[Number(item.inventoryActual) === 0 || item.receiveSign ? 'bg-#F0F0F0' : 'jf-box']" class="mr16rpx flex-shrink-0 rounded-16rpx p20rpx">
            <view class="text-center text-36rpx font-semibold" :class="[Number(item.inventoryActual) === 0 || item.receiveSign ? 'text-#aaa' : 'text-#FF4D3A']">
              <text class="text-20rpx">
                ￥
              </text> {{ item.discountMoney }}
            </view>
            <view class="my8rpx text-center" :class="[Number(item.inventoryActual) === 0 || item.receiveSign ? 'text-#aaa' : '']">
              {{ item.amountMoney && item.amountMoney > 0 ? `满${item.amountMoney}减${item.discountMoney}` : `无门槛使用` }}
            </view>
            <view class="rounded-26rpx px24rpx py6rpx text-center" :class="[Number(item.inventoryActual) === 0 || item.receiveSign ? 'bg-#E6E6E6 text-#aaa' : 'bg-#FF4A39 text-white']" @click="handleExchange(item)">
              {{ !item.receiveSign ? Number(item.inventoryActual) === 0 ? '已兑完' : '积分兑换' : '已兑换' }}
            </view>
          </view>
        </view>
      </view>
      <view v-for="item in storeDetail.itemInfoList" :key="item.itemId" class="mt20rpx rounded-16rpx bg-white px24rpx py28rpx">
        <view class="flex items-center justify-between">
          <view class="text-32rpx font-semibold">
            {{ item.itemName }}
          </view>
          <view class="text-36rpx text-#FF4D3A">
            <text class="text-20rpx">
              平台价：
            </text> ￥{{ item.vipPriceShow }}/L
          </view>
        </view>
        <view class="text-end text-#aaa">
          国标价：￥{{ item.cityPriceShow }}/L 门店价：￥{{ item.storePriceShow }}L
        </view>
        <!-- <view class="mt18rpx text-#aaa">
          (加油满200原可享前10升优惠价格)
        </view> -->
        <view class="mt20rpx">
          枪号：{{ item.gunNos?.join(', ') }}
        </view>
      </view>
      <view class="h200rpx" />
    </view>
    <FixedLayout>
      <wd-button block size="large" @click="router.push({ name: 'confimOrder', params: { storeId: String(storeDetail.storeId) } })">
        立即加油
      </wd-button>
    </FixedLayout>
    <IntegralPopup v-model="showModel" :coupon-id="String(clickItem?.id)" />
  </template>
</template>

<style lang="scss" scoped>
.jf-box{
  background: linear-gradient( 180deg, #FFC2BC 0%, rgba(255,238,238,0.16) 57.27%, #FFEFEF 100%);
}
</style>