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

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

definePage({ name: 'confimOrder', islogin: true, style: { navigationBarTitleText: '下单', navigationStyle: 'custom' } })
const showModel = ref(false)
const refuelNumber = ref()
const refuelGun = ref()
const showModelJf = ref(false)
const selectDk = ref()
const storeDetail = ref<GasStationDetailVO>()
const isSelect = ref(false)
const refuelMoney = ref(null)
const showModelReful = ref(false)
const { lat, lng } = storeToRefs(useUserStore())
const ThreePrice = ref<QueryCalPriceResponse>()
onLoad(async (options: any) => {
  await getData(options.storeId)
})

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
  refuelNumber.value = res.data?.itemInfoList ? res.data?.itemInfoList[0].itemId : null
}

const refuelGunList = computed(() => {
  return storeDetail.value?.itemInfoList ? storeDetail.value?.itemInfoList.find(item => item.itemId === refuelNumber.value)?.gunNos : []
})
const priceData = computed(() => {
  return storeDetail.value?.itemInfoList ? storeDetail.value?.itemInfoList.find(item => item.itemId === refuelNumber.value) : null
})
function handlePay() {
  if (!refuelGun.value) {
    return useGlobalToast().show('请选择油枪')
  }
  if (!refuelMoney.value) {
    return useGlobalToast().show('请输入加油金额')
  }
  if (Number(storeDetail.value?.distanceShow) > 1) {
    useGlobalMessage().confirm({
      title: '提示',
      msg: '您距离加油站过远,请在油站附近下单',
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      success: async () => {
        const { data } = await Apis.general.post_smqjh_pms_app_api_v1_product_oil_querydistancefence({ data: { lat: lat.value, lon: lng.value } })
        if (data?.isClosest) {
          showModelReful.value = true
        }
        else {
          goPay()
        }
      },
    })
  }
  else {
    goPay()
  }
  console.log('handlePay')
}
async function handleBlur() {
  // if (Number(refuelMoney.value) < 10) {
  //   return useGlobalToast().show('最小金额为10元')
  // }
  if (!storeDetail.value)
    return
  const nams = storeDetail.value?.itemInfoList?.find(item => item.itemId === refuelNumber.value)?.itemName
  const { data } = await Apis.general.post_smqjh_pms_api_v1_refueling_querycalprice({ data: {
    storeId: storeDetail.value?.storeId as string,
    itemName: nams as string,
    amount: Number(refuelMoney.value) * 100,
    openChannel: 0,
    outUserId: '',
    mobile: '',
  } })
  ThreePrice.value = data
  console.log(data)
}
async function goPay() {
  uni.showLoading({ mask: true })
  try {
    const res = await Apis.general.post_smqjh_oms_api_v1_oil_order_createorder({ data: {
      lat: lat.value,
      lon: lng.value,
      itemId: refuelNumber.value,
      gunNo: refuelGun.value,
      originalAmount: Number(ThreePrice.value?.totalPrice),
      paymentAmount: Number(ThreePrice.value?.realPrice),
      promotionAmount: Number(ThreePrice.value?.promotionAmount),
      litre: Number(ThreePrice.value?.litre),
      serviceFee: Number(ThreePrice.value?.serviceFee),
      totalPrice: Number(ThreePrice.value?.totalPrice),
      vipPrice: Number(priceData.value?.vipPrice),
      cityPrice: Number(priceData.value?.cityPrice),
      storePrice: Number(priceData.value?.storePrice),
      storeId: storeDetail.value?.storeId,
      itemName: priceData.value?.itemName,
    } })
    uni.hideLoading()
    // #ifdef H5
    window.location.href = `${res.data}&redirectUrl=https://smqjh.admin.zswlgz.com/h5/#/pages/transition/index`
    // #endif
  }
  catch {
    uni.hideLoading()
  }
}
</script>

<template>
  <view v-if="storeDetail">
    <view class="p24rpx">
      <view class="rounded-16rpx bg-white px24rpx py28rpx">
        <view class="text-36rpx font-semibold">
          {{ storeDetail?.storeName }}
        </view>
        <view class="mt20rpx text-#aaa">
          {{ storeDetail?.address }}
        </view>
        <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
        <view class="flex items-center justify-between">
          <view class="text-#ff4d3a font-semibold">
            平台价
          </view>
          <view class="text-#aaa">
            门店价：￥{{ priceData?.storePriceShow || 0 }}/L
          </view>
        </view>
        <view class="mt16rpx flex items-center justify-between">
          <view class="text-32rpx text-#ff4d3a font-semibold">
            ￥{{ priceData?.vipPriceShow || 0 }}/L
          </view>
          <view class="text-#aaa">
            国标价：￥{{ priceData?.cityPriceShow || 0 }}/L
          </view>
        </view>
      </view>
      <view class="mt20rpx rounded-16rpx bg-white px24rpx py28rpx">
        <view class="text-28rpx font-semibold">
          选择油号/油枪
        </view>
        <view class="mt24rpx flex items-center" @click="showModel = true">
          <view class="relative w47% rounded-8rpx px24rpx py20rpx" :class="[refuelNumber ? 'bg-#F6FFDF border border-#9ED605 border-solid text-#9ED605' : 'bg-#F9F9F9']">
            <view class="text-center text-28rpx font-semibold">
              {{ refuelNumber ? storeDetail.itemInfoList?.find(item => item.itemId === refuelNumber)?.itemName : '请选择油号' }}
            </view>
            <view class="absolute right-24rpx top-50% h32rpx w32rpx -transform-translate-y-50%">
              <wd-icon name="arrow-down" size="32rpx" />
            </view>
          </view>
          <view class="relative ml18rpx w47% rounded-8rpx px24rpx py20rpx" :class="[isSelect && refuelGun ? 'bg-#F6FFDF border border-#9ED605 border-solid text-#9ED605' : 'bg-#F9F9F9']">
            <view class="text-center text-28rpx font-semibold">
              {{ isSelect && refuelGun ? refuelGun : '请选择油枪' }}
            </view>
            <view class="absolute right-24rpx top-50% h32rpx w32rpx -transform-translate-y-50%">
              <wd-icon name="arrow-down" size="32rpx" />
            </view>
          </view>
        </view>
      </view>
      <view class="mt20rpx rounded-16rpx bg-white px24rpx py28rpx">
        <view class="text-28rpx font-semibold">
          加油金额
        </view>
        <view class="mt20rpx bg-#F9F9F9 px24rpx py20rpx">
          <input v-model="refuelMoney" type="digit" class="w-full" placeholder="请输入加油金额，优惠价格计算" @blur="handleBlur">
        </view>
        <view class="mt20rpx text-#ff4d3a">
          最小金额10元
        </view>
      </view>
      <view class="mt20rpx rounded-16rpx bg-white px24rpx py28rpx">
        <view class="flex items-center">
          <view class="mr20rpx text-28rpx font-semibold">
            抵扣券
          </view>
          <wd-button size="small">
            去兑换
          </wd-button>
        </view>
        <view class="mt24rpx flex items-center justify-between rounded-8rpx bg-#F9F9F9 px24rpx py20rpx" @click="showModelJf = true">
          <view class="text-28rpx text-#aaa">
            暂无抵扣券
          </view>
          <wd-icon name="arrow-down" size="32rpx" color="#aaa" />
        </view>
        <view class="mt16rpx">
          已选：满200元可抵扣100元（最优）
        </view>
        <view class="mt16rpx">
          抵扣金额：-￥100
        </view>
        <template v-if="ThreePrice && refuelMoney">
          <view class="mb20rpx mt24rpx text-32rpx font-semibold">
            价格明细
          </view>
          <view class="flex items-center justify-between text-28rpx">
            <view class="text-#aaa">
              加油金额
            </view>
            <view>￥{{ refuelMoney || 0 }}</view>
          </view>
          <view class="mt20rpx flex items-center justify-between text-28rpx">
            <view class="text-#aaa">
              抵扣券
            </view>
            <view>-￥100</view>
          </view>
          <view class="mt20rpx flex items-center justify-between text-28rpx">
            <view class="text-#aaa">
              服务费
            </view>
            <view>+￥{{ ThreePrice.promotionAmount ? ThreePrice.promotionAmount / 100 : 0 }}</view>
          </view>

          <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
          <view class="flex items-center justify-between text-28rpx">
            <view class="text-#aaa">
              实付金额
            </view>
            <view class="text-#ff4d3a font-semibold">
              ￥{{ ThreePrice?.realPrice ? ThreePrice?.realPrice / 100 : 0 }}
            </view>
          </view>
        </template>
      </view>
    </view>
    <view class="h200rpx" />
    <Zpopup v-model="showModel" bg="#fff">
      <view class="px24rpx py28rpx">
        <view class="text-center text-32rpx font-semibold">
          选择油号油枪
        </view>
        <view class="mb20rpx text-32rpx font-semibold">
          油号
        </view>
        <wd-radio-group v-model="refuelNumber" shape="button">
          <view class="flex flex-wrap items-center gap-20rpx">
            <wd-radio v-for="item in storeDetail?.itemInfoList" :key="item.itemId" :value="String(item.itemId)">
              {{ item.itemName }}
            </wd-radio>
          </view>
        </wd-radio-group>
        <view v-if="refuelGunList" class="mb20rpx mt20rpx text-32rpx font-semibold">
          油枪
        </view>
        <wd-radio-group v-model="refuelGun" shape="button">
          <scroll-view scroll-y class="h400rpx pb40rpx">
            <view class="grid grid-cols-5 gap-20rpx">
              <view v-for="item in refuelGunList" :key="item">
                <wd-radio :value="String(item)">
                  {{ item }}
                </wd-radio>
              </view>
            </view>
          </scroll-view>
        </wd-radio-group>
      </view>
      <template #footer>
        <view class="text-center text-28rpx text-#ff4d3a">
          请与加油员确认油枪号
        </view>
        <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
        <wd-button block size="large" @click="showModel = false, isSelect = true">
          确认
        </wd-button>
      </template>
    </Zpopup>
    <Zpopup v-model="showModelJf" bg="#fff">
      <view class="px24rpx py28rpx">
        <view class="mb24rpx text-center text-32rpx font-semibold">
          选择抵扣券
        </view>
        <wd-radio-group v-model="selectDk" shape="dot">
          <view class="flex items-center justify-between">
            <view class="text-28rpx">
              不使用抵扣券
            </view>
            <wd-radio :value="1" />
          </view>
          <view class="mt24rpx">
            <view class="text-28rpx">
              自动推荐
            </view>
            <view class="relative mt20rpx box-border h144rpx flex items-center justify-between rounded-16rpx bg-[rgba(255,77,58,0.1)] px28rpx py24rpx">
              <view class="flex-1">
                <view class="flex items-center">
                  <view class="text-40rpx text-#ff4d3a font-semibold">
                    <text class="text-24rpx">
                      ￥
                    </text> 100
                  </view>
                  <view class="ml20rpx text-32rpx font-semibold">
                    满200元可用
                  </view>
                </view>
                <view class="mt24rpx flex items-center text-#aaa">
                  <view class="text-center text-20rpx">
                    可抵扣
                  </view>
                  <view class="ml20rpx text-24rpx font-semibold">
                    有效期：2022-01-01至2022-01-01
                  </view>
                </view>
              </view>
              <view class="h-full w134rpx flex items-center justify-center border-l-2rpx border-l-#FF4D3A border-l-dashed">
                <wd-radio :value="1" />
              </view>
              <view class="absolute right-150rpx h30rpx w30rpx rounded-full bg-white -top-10rpx" />
              <view class="absolute right-150rpx h30rpx w30rpx rounded-full bg-white -bottom-10rpx" />
            </view>
          </view>
        </wd-radio-group>
      </view>
      <view class="h200rpx" />
      <template #footer>
        <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
        <wd-button block size="large">
          确认选择
        </wd-button>
      </template>
    </Zpopup>
    <FixedLayout>
      <view :class="[ThreePrice && refuelMoney && 'justify-between flex items-center']">
        <view v-if="ThreePrice && refuelMoney" class="text-32rpx text-#FF4A39 font-semibold">
          <text class="text-24rpx">
            ￥
          </text><text>{{ ThreePrice?.realPrice ? ThreePrice?.realPrice / 100 : 0 }}</text>
        </view>
        <wd-button block size="large" @click="handlePay">
          立即支付
        </wd-button>
      </view>
    </FixedLayout>
    <Zpopup v-model="showModelReful" bg="#fff">
      <view class="px24rpx py28rpx">
        <view class="mb24rpx text-center text-32rpx font-semibold">
          请确认
        </view>
        <view>您当前位置最近的油站是</view>
      </view>
      <view class="h200rpx" />
      <template #footer>
        <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
        <view class="flex items-center justify-between pb20rpx">
          <wd-button type="info" block size="large">
            取消
          </wd-button>
          <wd-button block size="large">
            继续
          </wd-button>
        </view>
      </template>
    </Zpopup>
  </view>
</template>

<style lang="scss" scoped>
:deep(.wd-radio){
  margin-top: 0 !important;
}
</style>