car-wash-front/src/pages-user/wallet/recharge.vue

<template>
  <view class="page">
    <view class="recharge">
      <view v-for="(recharge,idx) in state.configList" :key="idx"
            @click="handleRechargeClick(recharge,idx)"
            class="recharge-item" :class="idx===state.chosenIdx?'active':''">
        <view class="recharge-item_amt">{{ (recharge.rechargeAmount/100).toFixed(2) }}</view>
        <view class="recharge-item_grant" v-if="recharge.grantsAmount>0">
          <uv-icon name="gift" :color="idx===state.chosenIdx?'#19A497':'#2b2b2b'"></uv-icon>
          {{ (recharge.grantsAmount/100).toFixed(2) }}元
        </view>
      </view>
    </view>
    <view class="recharge-pay">
      <uv-button type="primary" iconColor="white" color="#19A497" text="充值" @click="debounceConfirm"></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";

const initState = () => ({
  configList: [],
  chosenIdx: -1
})

const state = reactive(initState())

onShow(() => {
  loadRechargeConfig();
})

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

const handleRechargeClick = (recharge: any, idx: number) => {
  state.chosenIdx = 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}).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) {
        console.log(res)
        uni.redirectTo({
          url:'/pages-user/user/index'
        })
      },
      fail: function (e)  {
        console.error(e)
      },
    });
    // #endif
    // #ifndef MP-WEIXIN
    uni.showToast({title: '目前仅支持微信支付'})
    // #endif
  });
}


</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  width: 100%;
  background-color: #fff;
}

.recharge {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  align-items: start;
  align-content: center;

  &-item {
    display: flex;
    flex-direction: column;
    width: 200rpx;
    height: 100rpx;
    background-color: #eeefff;
    margin: 20rpx auto;
    padding: 10rpx;
    border-radius: 10rpx;

    &_amt {
      font-size: 20px;
      font-weight: 600;
    }

    &_grant {
      font-size: 12px;
      margin-top: 10rpx;
      display: inline-flex;
    }
  }
}


.active {
  border-radius: 10rpx solid $uni-color-primary;

  .recharge-item {
    &_amt {
      color: $uni-color-primary;
    }

    &_grant {
      color: $uni-color-primary;
    }
  }
}

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

</style>