aslan-h5/src/views/Recharge/index.vue

<!-- Recharge.vue -->
<template>
  <div class="fullPage">
    <div class="bg">
      <!-- 顶部导航 -->
      <GeneralHeader
        :isHomePage="true"
        :title="$t('recharge')"
        :showHelp="true"
        :helpImg="helpImg"
        @help="popupHelp"
        color="black"
        style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
      />

      <!-- 主要内容 -->
      <div style="padding: 4%">
        <!-- 搜索栏 -->
        <div style="display: flex; gap: 20px; width: 100%">
          <!-- 输入框 -->
          <div style="flex: 1; min-width: 0; align-self: stretch">
            <input
              style="
                width: 100%;
                border: 0;
                border-radius: 8px;
                box-shadow: 0 0 2px 2px #00000020;
                padding: 10px 8px;
              "
              type="text"
              :placeholder="$t('recharge_placeholder')"
              v-model="targetUserId"
            />
          </div>

          <!-- 跳转按钮 -->
          <button
            style="
              min-width: 0;
              align-self: stretch;

              border: 0;
              border-radius: 8px;
              font-weight: 590;
              color: white;
              padding: 10px 8px;
              background-color: #c670ff;
              background: linear-gradient(to bottom, rgba(198, 112, 255, 1), rgba(119, 38, 255, 1));
              box-shadow: 0 0 1px 1px #00000020;
            "
            @click="checkUserId"
          >
            {{ $t('recharge_button') }}
          </button>
        </div>

        <!-- 功能介绍 -->
        <div style="margin-top: 16px">
          <p style="font-weight: bold">{{ $t('faq_title') }}</p>
          <div class="textContent">
            <p>{{ $t('faq_question_1') }}</p>
            <p>{{ $t('faq_how_to_check_recharge') }}</p>
            <p>{{ $t('faq_answer_label') }}</p>
            <p>{{ $t('faq_how_to_check_recharge_answer') }}</p>
          </div>
        </div>
      </div>

      <!-- 弹窗遮罩层 -->
      <maskLayer :maskLayerShow="dialogshow" @click="closedPopup">
        <div
          style="
            width: 100%;
            height: 100%;

            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <div
            style="
              width: 80%;
              padding: 8%;
              background-color: white;
              display: flex;
              flex-direction: column;
              align-items: center;
              border-radius: 20px;
            "
            @click.stop
          >
            <!-- 标题行 -->
            <div
              style="
                width: 100%;
                display: flex;
                justify-content: center;
                font-weight: 800;
                position: relative;
                padding: 5px 0;
              "
            >
              {{ $t('help') }}
              <div class="close" @click="closedPopup">x</div>
            </div>

            <!-- 内容 -->
            <div>
              <p style="font-weight: bold">{{ $t('user_recharge_instructions') }}</p>
              <div class="textContent">
                <p>{{ $t('recharge_instruction_1') }}</p>
                <p>{{ $t('recharge_instruction_2') }}</p>
                <p>{{ $t('recharge_instruction_3') }}</p>
                <p>{{ $t('recharge_instruction_4') }}</p>
              </div>
            </div>
          </div>
        </div>
      </maskLayer>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { showWarning } from '@/utils/toast.js'
import { useTargetUser } from '@/stores/rechargeTarget'

import { searchUser } from '@/api/userInfo'

import GeneralHeader from '@/components/GeneralHeader.vue'
import maskLayer from '@/components/MaskLayer.vue'

const helpImg = new URL('/src/assets/icon/help.png', import.meta.url).href
const targetUserStore = useTargetUser()
const router = useRouter()

const dialogshow = ref(false)
// 展示弹窗
const popupHelp = () => {
  dialogshow.value = true
}

// 关闭弹窗
const closedPopup = () => {
  dialogshow.value = false
}

const targetUserId = ref('')

const checkUserId = async () => {
  console.log('充值目标用户id：', targetUserId.value)

  try {
    const targetUserInfo = await searchUser(targetUserId.value)
    console.log('targetUserInfo:', targetUserInfo)
    if (targetUserInfo.status && targetUserInfo.body.id) {
      targetUserStore.setTargetUser(targetUserInfo.body) //保存目标用户信息
      router.push('/recharge-pay-way') //跳转到充值方式页面
    } else {
      // 信息提示id有误
      showWarning('User info not found')
    }
  } catch (error) {
    console.log('error:', error.response.errorMsg)
    throw error
  }
}

onMounted(() => {
  targetUserStore.clearTargetUser() //清空目标用户信息
})
</script>

<style scoped>
* {
  color: black;
}

.fullPage {
  background-color: #ffffff;
  min-height: 100vh;
  position: relative;
}

.bg {
  width: 100vw;
  min-height: 100vh;
  background-image: url(../../assets/images/secondBg.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.textContent > p {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.5);
}

input::placeholder {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.4);
}

.close {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-weight: bold;
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}

[dir='rtl'] .close {
  left: 0;
  right: auto;
}
</style>