charge-front/src/pages-user/wallet-recharge/wallet-recharge.vue

<template>
  <view class="pl-30 pr-30">
    <view class="pay">
      <view class="title pt-30 pb-30">充值金额</view>
      <view class="flex-wrap">
        <view
          :class="[
            'option',
            'flex-center',
            `option-${index === payOption && !payValue ? 'active' : ''}`,
          ]"
          v-for="(item, index) in payOptions"
          :key="index"
          @click="changeOption(index)"
        >
          <view
            class="tag fs-24 color-fff fw-500"
            v-if="payOptionsDiscount[index]"
            >{{ payOptionsDiscount[index] }}</view
          >
          {{ item }}
        </view>
      </view>
      <view v-if="payOptionsDiscountDay[payOption]" class="flex-align-center">
        <view class="fs-30 color-666"
          >折扣优惠有效期{{ payOptionsDiscountDay[payOption] }}天</view
        >
        <view class="ml-12 color-primary fs-30" @click="toDesc">
          <text>详细规则</text>
          <text class="fs-24 ml-6">>></text>
        </view>
      </view>
      <view class="title pt-60 pb-30">自定义金额</view>
      <style-input
        :value="payValue > 0 ? payValue : ''"
        title="金额"
        type="digit"
        @input="input"
      />
    </view>
  </view>

  <style-bottom-view>
    <view class="pl-60 pr-60 pb-20">
      <style-button size="small" type="primary" @click="confirm"
        >充值</style-button
      >
    </view>
  </style-bottom-view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { fetchProfile, insertMoney } from "../../api/user";
import { onLoad } from "@dcloudio/uni-app";
import { to } from "@/utils/navigate";
const balance = ref(0);
const payOption = ref(0);
const payOptions = ref([30, 50, 100, 200, 500, 1000]);
const payOptionsDiscount = ref(["", "", "", "", "", ""]);
const payOptionsDiscountDay = ref([0, 0, 0, 0, 0, 0]);
const payValue = ref(0);
const activityId = ref();
const input = (e: any) => {
  payValue.value = e.value;
};
const changeOption = (index: number) => {
  payValue.value = 0;
  payOption.value = index;
};
const confirm = () => {
  if (payValue.value && !/^[0-9]*(\.\d{1,2})?$/.test(`${payValue.value}`)) {
    uni.showModal({
      title: "温馨提示",
      content: "请输入正确的金额",
      showCancel: false,
      confirmColor: "#347DFF",
    });
    return;
  }
  const params = payValue.value
    ? Number(payValue.value)
    : payOptions.value[payOption.value];
  if (params > 10000 || params <= 0) {
    uni.showModal({
      title: "温馨提示",
      content: "每次最大充值金额10000，请修改金额",
      showCancel: false,
      confirmColor: "#347DFF",
    });
    return;
  }
  uni.showLoading({
    title: "加载中",
  });
  insertMoney(params)
    .then(() => {
      return fetchProfile();
    })
    .then((res) => {
      payValue.value = 0;
      balance.value = res.balance;
      uni.hideLoading();
      uni.showToast({
        title: "已支付",
        icon: "success",
      });
      to("/pages-user/wallet/wallet");
    })
    .catch((err) => {
      if (/cancel/.test(err.errMsg)) {
        return;
      }
      uni.showModal({
        content: `${err.errMsg},请重试`,
      });
    });
};
const toDesc = () => {
  to(`/pages-common/activity/activity?id=${activityId.value}&back=1`);
};
onLoad(() => {
  fetchProfile().then((res) => {
    // console.log(res);
    balance.value = res.balance;
    if (res && res.activityList && res.activityList.length) {
      res.activityList[0].rechargeRightsList.forEach((item: any) => {
        const val = Number((Number(item.amountMin) / 100).toFixed(2));
        const fi = payOptions.value.findIndex((o) => o === val);
        if (fi >= 0) {
          payOptionsDiscount.value[fi] = item.rightsDesc;
          payOptionsDiscountDay.value[fi] = item.validity;
        }
      });
      activityId.value = res.activityList[0].id;
    }
  });
});
</script>

<style lang="scss">
.pay {
  .title {
    font-weight: 500;
    font-size: 32rpx;
    color: #000;
  }

  .option {
    position: relative;
    width: 214rpx;
    height: 140rpx;
    background: var(--color-sec);
    border-radius: 10rpx;
    margin-left: 20rpx;
    margin-bottom: 20rpx;
    font-size: 36rpx;
    color: #000;
    font-weight: 500;
    overflow: hidden;
    &:nth-child(3n + 1) {
      margin-left: 0;
    }
    .tag {
      position: absolute;
      top: 0px;
      right: 0px;
      border-radius: 30rpx 0px 0px 30rpx;
      box-sizing: content-box;
      padding: 2rpx 10rpx;
      background: linear-gradient(90deg, #f366ff 0%, #5e98ff 100%);
      white-space: nowrap;
    }
  }
  .option-active {
    background-color: var(--color-primary);
    color: #fff;
  }
}
</style>