car-wash-java/car-wash-mp/src/pages-user/wallet/recharge.vue

<template>
  <uv-navbar leftIcon="arrow-left" @leftClick="handleLeftClick" title="充值" bg-color="#C6171E" color="white"></uv-navbar>
  <view class="container">
    <view class="title">请选择充值金额</view>
    <view class="amount-list">
      <view
          v-for="(item, index) in state.configList"
          :key="index"
          :class="['amount-item', { 'active': state.chosenIdx === index }]"
          @click="handleRechargeClick(item,index)"
      >
        <view class="amount-text">{{ (item.rechargeAmount/100).toFixed(0) }}元</view>
        <view v-if="item.grantsAmount > 0" class="gift-tag">
          <uv-icon name="gift" size="12"></uv-icon>
          {{ (item.grantsAmount/100).toFixed(0) }}元
        </view>
      </view>
    </view>

    <view class="selected-info" v-if="state.chosenIdx > -1">
      <view class="selected-text">已选择：<span class="selected-amount">¥{{ (state.configList[state.chosenIdx].rechargeAmount/100).toFixed(2) }}</span></view>
      <view v-if="state.rechargeItem.grantsAmount>0" class="gift-info">
        <uv-icon name="gift" size="18"></uv-icon>
        <span class="gift-amount">赠送¥{{(state.rechargeItem.grantsAmount/100).toFixed(2)}}</span>
      </view>
    </view>
    
    <view class="recharge-pay">
      <uv-button type="primary" shape="circle" iconColor="white" color="#C6171E" text="立即充值" @click="debounceConfirm" :disabled="state.chosenIdx < 0"></uv-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {onHide, onLoad, onShow} from "@dcloudio/uni-app";
import {debounce} from "@/utils/common";
import {get, post,body} from "@/utils/https";

// <uv-navbar leftIcon="arrow-left" title="充值" @leftClick="handleLeftClick"></uv-navbar>
//
const initState = () => ({
  configList: [],
  chosenIdx: -1,
  stationId:'000',
  rechargeItem:{
    grantsAmount:0
  }
})

const state = reactive(initState())


onLoad((options:any)=>{
  if(options.stationId){
    state.stationId = options.stationId;
  }
})

onShow(() => {
  loadRechargeConfig();

})

onHide(() => {
  Object.assign(state, initState());
})

const handleLeftClick = () => {
  uni.navigateBack()
}
const handleRechargeClick = (recharge: any, idx: number) => {
  state.chosenIdx = idx;
  state.rechargeItem = state.configList[idx]
}

const loadRechargeConfig = () => {
  get(`/common/rechargeConfig`).then((res: any) => {
    state.configList = res;
  })
}

const debounceConfirm = debounce(() => {
  confirm();
}, 500)

const confirm = () => {
  if (state.chosenIdx < 0) {
    return;
  }
  uni.showLoading({
    title: "",
  });

  let recharge = state.configList[state.chosenIdx]
  get("/payment/wxPay", {rechargeConfigId:recharge.id,stationId:state.stationId}).then((res: any) => {
    // #ifdef MP-WEIXIN
    wx.requestPayment({
      timeStamp: `${res.timeStamp}`,
      nonceStr: res.nonceStr,
      package: res.packageVal,
      signType: res.signType,
      paySign: res.paySign,
      success:function (res: any) {
        uni.showToast({
          title:'充值完成',
          icon:'success'
        })
        getApp<any>().globalData.refresh =true;
        setTimeout(()=>{
          uni.switchTab({
            url:'/pages/user/index'
          })
        },500)

      },
      fail: function (e)  {
      },
    });
    // #endif
    // #ifndef MP-WEIXIN
    uni.showToast({title: '目前仅支持微信支付'})
    // #endif
  });
}


</script>

<style scoped lang="scss">
.container {
  padding: 40rpx 20rpx;
  margin-top: 90px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 90px);
  background-color: $uni-bg-color-page;
  box-sizing: border-box;
}

.title {
  font-size: 28rpx;
  text-align: center;
  margin-bottom: 40rpx;
  font-weight: 600;
  color: $uni-text-color;
}

.amount-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-bottom: 40rpx;
  width: 100%;
  box-sizing: border-box;
}

.amount-item {
  background-color: white;
  padding: 32rpx 0;
  text-align: center;
  border: 2px solid $uni-border-color;
  border-radius: 14rpx;
  font-size: 30rpx;
  font-weight: 600;
  color: $uni-text-color;
  position: relative;
  transition: all 0.15s ease;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.amount-item:active {
  transform: scale(0.95);
}

.amount-item.active {
  background-color: #C6171E;
  color: white;
  border-color: #C6171E;
  box-shadow: 0 4rpx 12rpx rgba(198, 23, 30, 0.3);
}

.amount-text {
  font-size: 28rpx;
  font-weight: 600;
}

.gift-tag {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background-color: #E84545;
  color: white;
  font-size: 18rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  gap: 4rpx;
  animation: giftPulse 2s infinite;
  box-shadow: 0 2rpx 6rpx rgba(232, 69, 69, 0.3);
}

@keyframes giftPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.selected-info {
  background-color: white;
  padding: 30rpx;
  border-radius: 12rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.selected-text {
  font-size: 26rpx;
  color: $uni-text-color-secondary;
  margin-bottom: 10rpx;
}

.selected-amount {
  font-size: 32rpx;
  font-weight: 600;
  color: #C6171E;
}

.gift-info {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 24rpx;
  color: #E84545;
}

.gift-amount {
  font-weight: 600;
}

.recharge-pay {
  width: calc(100vw - 60rpx);
  position: fixed;
  bottom: 40rpx;
  left: 30rpx;
}

</style>