aslan-h5/src/views/RechargeStandard.vue

<template>
  <div class="fullPage">
    <!-- 上区域 -->
    <div
      style="
        width: 100vw;
        height: 40vh;
        background-image: url(/src/assets/images/rechargeBg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
      "
    >
      <!-- 顶部 -->
      <MobileHeader title="Recharge">
        <template v-slot:extraFunction>
          <div style="display: flex; align-items: center; position: relative">
            <img src="../assets/icon/listBt.png" style="width: 1.2rem" alt="" @click="listBt" />
            <transition name="slide-fade">
              <div
                style="
                  position: absolute;
                  right: 0;
                  top: 100%;
                  padding: 10px;
                  display: flex;
                  flex-direction: column;
                  width: max-content;
                  background-color: rgba(255, 255, 255, 0.1);
                  border-radius: 10px;
                  margin-top: 5px;
                  backdrop-filter: blur(8px);
                "
                v-show="visibleList"
                class="extraList"
              >
                <div
                  style="padding: 8px; opacity: 0.5"
                  v-for="(item, index) in switchList"
                  :key="index"
                >
                  {{ item }}
                </div>
              </div>
            </transition>
          </div>
        </template>
      </MobileHeader>

      <!-- 余额展示 -->
      <div style="flex: 1; display: flex; justify-content: center; align-items: center">
        <img src="/src/assets/icon/coin.png" alt="" style="width: 32px" />
        <div style="margin-left: 10px; font-weight: 500">999999</div>
      </div>
    </div>

    <!-- 圆角修饰 -->
    <div
      style="
        background-color: white;
        margin-top: -10px;
        height: 11px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      "
    ></div>

    <!-- 主要展示 -->
    <div style="padding: 10px; display: flex; flex-direction: column; align-items: center">
      <!-- 商品展示 -->
      <div style="width: 100%; display: flex; flex-direction: column; gap: 20px">
        <div
          v-for="(goods, index) in coinGoodsList"
          :key="index"
          style="
            width: 100%;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 0 3px 0.5px #00000050;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
          "
          @click="selectGoods(index)"
          :class="[selectedIndex == index ? 'selectedGoods' : 'notSelectedGoods']"
        >
          <!-- 数量 -->
          <div style="display: flex; align-items: center">
            <img :src="getImageUrl(goods.cover)" alt="" style="width: 32px; margin-right: 8px" />
            <div style="font-weight: 500">{{ goods.amount }}</div>
          </div>
          <!-- 价格 -->
          <div style="font-weight: 500; line-height: 32px">${{ goods.price }}</div>
        </div>
      </div>

      <!-- 充值按钮 -->
      <button
        style="
          width: 70%;
          margin: 32px 0;
          padding: 10px;
          border-radius: 32px;
          border: 0;
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
        "
        :class="[selectedIndex != -1 ? 'selectedBt' : 'notSelectedBt']"
      >
        Recharge
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import MobileHeader from "../components/MobileHeader.vue";

const switchList = ref(["Gold List", "Recharge List"]);
const visibleList = ref(false);
const listBt = () => {
  visibleList.value = !visibleList.value;
};

const coinGoodsList = ref([
  {
    cover: "/src/assets/icon/coin.png",
    amount: 10000,
    price: 0.99,
  },
  {
    cover: "/src/assets/icon/coinMore.png",
    amount: 50000,
    price: 4.99,
  },
]);

const getImageUrl = (imgUrl) => {
  return new URL(imgUrl, import.meta.url).href;
};

const selectedIndex = ref(-1); //选中商品下标
const selectedGoods = ref({}); //选中商品

const selectGoods = (index) => {
  if (selectedIndex.value != index) {
    selectedIndex.value = index;
    selectedGoods.value = coinGoodsList.value[index];

    console.log("选中下标:", selectedIndex.value);
    console.log("选中商品:", coinGoodsList.value[index]);
  } else {
    selectedIndex.value = -1;
    selectedGoods.value = {};
  }
};
</script>

<style scoped>
.fullPage {
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}

/* 未选中状态 */
.notSelectedGoods {
  border: 1px solid transparent;
}

/* 选中状态 */
.selectedGoods {
  background-color: rgba(187, 146, 255, 1);
  /* border: 1px solid rgba(119, 38, 255, 1); */
  border: 1px solid rgba(119, 38, 255, 1);
}

/* 未选中状态 */
.notSelectedBt {
  background-color: white;
  color: rgba(0, 0, 0, 0.4);
}

/* 选中状态 */
.selectedBt {
  background: linear-gradient(to bottom, rgba(198, 112, 255, 0.7), rgba(119, 38, 255, 0.7));
  color: white;
}

.extraList > div:not(:last-child) {
  border-bottom: 0.1px solid black;
}
</style>