smqjh-refuel/src/components/integralPopup.vue

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

const props = defineProps<{ couponId: string }>()
const show = defineModel({ default: false })
const couponInfo = ref<CouponExchangeVo>()

async function getCouponInfo() {
  const res = await Apis.app.get_smqjh_system_app_api_coupon_exchangeinfo({ params: { couponId: props.couponId } })
  couponInfo.value = res.data
}
watch(show, () => {
  if (show.value) {
    getCouponInfo()
  }
})
</script>

<template>
  <Zpopup v-model="show" bg="#fff">
    <view v-if="couponInfo" class="px24rpx py28rpx">
      <view class="text-center text-32rpx font-semibold">
        积分兑换
      </view>
      <view class="mt20rpx flex items-center">
        <view class="jf-box mr16rpx flex-shrink-0 rounded-16rpx p20rpx">
          <view class="text-center text-48rpx text-#FF4D3A font-semibold">
            ￥ {{ couponInfo.discountMoney }}
          </view>
          <view class="my8rpx text-center">
            {{ couponInfo.promotionType === 1 ? `满${couponInfo.amountMoney}减${couponInfo.discountMoney}` : `立减${couponInfo.discountMoney}` }}
          </view>
        </view>
        <view class="ml20rpx">
          <view class="text-32rpx font-semibold">
            兑换需{{ couponInfo.pointsMoney }}积分
          </view>
          <view class="text-#aaa">
            <view class="mt10rpx">
              已兑换：{{ couponInfo.inventoryActual }}/{{ couponInfo.inventoryTotal }}
            </view>
            <view class="mt10rpx">
              兑换期截至： {{ couponInfo.couponEndTime }}
            </view>
            <view class="mt10rpx">
              使用有效期：兑换后{{ couponInfo.expirationDate }}天有效
            </view>
          </view>
        </view>
      </view>
      <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
      <view class="text-28rpx font-semibold">
        使用规则：
      </view>
      <view class="text-#aaa">
        <view class="mt20rpx">
          ·订单满20元可用
        </view>
        <view class="mt20rpx">
          ·每单限用1张，不与其他优惠同享
        </view>
        <view class="mt20rpx">
          ·兑换成功后，不可再逆兑换成积分
        </view>
      </view>
      <view class="mt24rpx text-28rpx font-semibold">
        适用油站：
      </view>
      <view class="text-#aaa">
        <view class="mt20rpx flex items-center">
          <wd-icon name="check-circle-filled" size="30rpx" color="#52C41A" class="mr10rpx" /> 全部合作油站
        </view>
        <view class="mt20rpx flex items-center">
          <wd-icon name="close-circle-filled" size="30rpx" color="#FF4A39" class="mr10rpx" /> 部分特殊油站不可用
        </view>
      </view>
    </view>
    <FixedLayout>
      <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
      <view class="box-border w-full flex items-center justify-end gap20rpx px24rpx">
        <wd-button type="info" @click="show = false">
          取消
        </wd-button>
        <wd-button @click="useUserStore().handleExchange(couponInfo)">
          确认兑换
        </wd-button>
      </view>
    </FixedLayout>
  </Zpopup>
</template>

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