VAVABUY/pages/bank/recharge.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar fixed border title="充值">
        <template #right>
          <navMenu :options="{ icon: 'icon-home', text: '主页' }" />
          <view class="nav_right" @click.stop="handleTo">
            <trans _t="记录" />
          </view>
        </template>
      </Navbar>
      <view class="content">
        <view>
          <view class="recharge_top">
            <view class="label">
              <trans _t="余额" />
            </view>
            <view class="value"
              >{{ symbol.symbol }} <text>{{ Moneyhtml(userInfo.money) }}</text>
            </view>
          </view>
          <view class="recharge_money">
            <view class="money">
              <view class="label">
                <trans _t="充值金额" />
              </view>
              <view class="value">
                <text class="currency">{{ symbol.symbol }}</text>
                <Input
                  shape="square"
                  v-model="money"
                  :placeholder="t('请输入金额')"
                />
              </view>
            </view>
            <view class="money_list">
              <view
                class="_list"
                :class="money == item ? 'active' : ''"
                v-for="(item, index) in moneyList"
                :key="index"
                @click="listActive(item)"
              >
                <text>{{ symbol.symbol }} </text>{{ item }}
              </view>
            </view>
          </view>
        </view>
        <!-- <view class="bank_list">
          <view class="label">
            <trans _t="选择充值方式" />
          </view>
          <view class="value">
            <view
              class="_list_"
              v-for="(item, index) in bankList"
              :key="index"
              @click="paySubmit(item)"
            >
              <view class="_list_left">
                <view class="bank_title">{{ item.title }}</view>
                <view class="desc">{{ item.desc }}</view>
              </view>
              <i class="icon-font icon-left"></i>
            </view>
          </view>
        </view> -->
        <view class="footer" @click="paySubmit">
          <trans _t="充值" />
        </view>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import { computed, ref, onMounted } from "vue";
import Navbar from "@/components/navbar";
import navMenu from "@/components/nav_menu";
import { useSystemStore, useUserStore } from "@/store";
import Input from "@/components/input";
import { t } from "@/locale";
import { PAY_LISTS, PAY_SUBMIT } from "@/api";
import { openUrl, Toast, Moneyhtml } from "@/utils";

const useUser = useUserStore();
const useSystem = useSystemStore();
const money = ref("");
const moneyList = [500, 1000, 2000, 3000];
const bankList = ref([]);

const currency = computed(() => useSystem.getCurrency);
const symbol = computed(() => useSystem.getSymbol);
const userInfo = computed(() => useUser.getuserInfo);

const listActive = (item) => {
  if (money.value == item) return (money.value = "");
  money.value = item;
};

const handleTo = () => {
  uni.navigateTo({ url: "/pages/bank/recharge_list" });
};

const getPayList = async () => {
  try {
    const res = await PAY_LISTS();
    const bankData = res.data;
    let arr = [];
    bankData.forEach((item) => {
      if (item.lists.length) {
        arr = [...arr, ...item.lists];
      }
    });
    bankList.value = arr;
  } catch (error) {}
};

const paySubmit = async () => {
  if (!money.value) return Toast(t("请输入金额"));
  let recharge_money = money.value;
  if (symbol.value.code != "CNY") {
    recharge_money = (Number(money.value) * Number(symbol.value.rate)).toFixed(
      2
    );
  }
  try {
    const res = await PAY_SUBMIT({
      money: recharge_money,
    });
    uni.navigateTo({
      url: `/pages/shop/payment?oid=${res.data.orderid}&type=recharge`,
    });
  } catch (error) {
    if (error.ret) {
      uni.navigateTo({
        url: `/pages/shop/payment?oid=${error.data.orderid}&type=recharge`,
      });
    } else {
      Toast(error.msg);
    }
  }
};

onMounted(() => {
  useUser.getUserInfo();
  getPayList();
});
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);

  .nav_right {
    color: var(--text);
    .size(28rpx);
    margin-left: 16rpx;
  }

  .content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24rpx;
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
    .recharge_top {
      background-color: var(--light);
      border-radius: 16rpx;
      padding: 24rpx;
      .size(28rpx);
      .flex_position(space-between);
      column-gap: 24rpx;

      .value {
        .size(40rpx);

        text {
          margin-left: 6rpx;
        }
      }
    }

    .recharge_money {
      margin-top: 24rpx;
      background-color: var(--light);
      padding: 24rpx;
      border-radius: 16rpx;

      .money {
        .label {
          color: var(--text);
          .size(28rpx);
          font-weight: 700;
        }

        .value {
          margin-top: 24rpx;
          .ver();

          .currency {
            // .size();
            // color: var(--text-02);
            margin-right: 18rpx;
          }
        }
      }

      .money_list {
        margin-top: 24rpx;
        .flex();
        gap: 24rpx;
        background-color: var(--light);

        ._list {
          height: 76rpx;
          padding: 8rpx;
          background-color: var(--light);
          color: var(--text);
          border: 1px solid var(--black);
          border-radius: 8rpx;
          .flex_center();
          flex: 1;
          .size(28rpx);
        }

        .active {
          background-color: var(--black);
          color: var(--light);
        }
      }
    }

    .bank_list {
      margin-top: 24rpx;
      background-color: var(--light);
      padding: 24rpx;
      border-radius: 16rpx;

      .label {
        color: var(--text);
        .size(28rpx);
        font-weight: 700;
      }

      .value {
        ._list_ {
          .flex_position(space-between);
          padding: 20rpx 0;
          border-bottom: 1px solid var(--borderColor);

          ._list_left {
            .bank_title {
              .size(28rpx);
              color: var(--text);
            }

            .desc {
              color: var(--text-01);
              margin-top: 16rpx;
              .size(24rpx);
            }
          }

          .icon-left {
            color: var(--text-01);
            .size();
            transform: rotate(180deg);
          }

          &:last-child {
            border-bottom: none;
          }
        }
      }
    }

    .footer {
      padding: 0 24rpx 24rpx;
      background-color: var(--black);
      color: var(--light);
      padding: 16rpx 30rpx;
      height: 96rpx;
      .flex_center();
      border-radius: 16rpx;
      font-weight: 700;
      .size(28rpx);
    }
  }
}
</style>