aslan-h5/src/views/Recharge.vue

<!-- Recharge.vue -->
<template>
  <div class="fullPage">
    <div class="bg">
      <!-- 顶部 -->
      <MobileHeader title="Recharge" showHelp="true" @help="popupHelp" />

      <!-- 内容 -->
      <div style="padding: 4%">
        <!-- 输入框 -->
        <div style="display: flex; gap: 20px; width: 100%">
          <input
            style="
              flex: 1;
              border: 0;
              border-radius: 8px;
              box-shadow: 0 0 2px 2px #00000020;
              padding: 10px 8px;
            "
            type="text"
            placeholder="Please enter your Likei's lD"
            v-model="targetUserId"
          />
          <button
            style="
              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"
          >
            Recharge
          </button>
        </div>

        <!-- 功能介绍 -->
        <div style="margin-top: 16px">
          <p style="font-weight: bold">Frequently asked question:</p>
          <div class="textContent">
            <p>1.Question:</p>
            <p>How to check whether the account recharge amounthasbeen received.</p>
            <p>Ask:</p>
            <p>
              Firstly, open Likei, enter the 'My' page, click on theWallet' page, and select the
              recharge record in theupper right corner.
            </p>
          </div>
        </div>
      </div>

      <!-- 弹窗 -->
      <!-- 遮罩层 -->
      <div
        style="
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 9999;
          background-color: #00000080;
          display: flex;
          justify-content: center;
          align-items: center;
        "
        v-show="dialogshow"
        @click="closedPopup"
      >
        <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;
              font-size: 16px;
              position: relative;
              padding: 5px 0;
            "
          >
            Help
            <div
              style="
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
                font-weight: bold;
              "
              @click="closedPopup"
            >
              x
            </div>
          </div>

          <!-- 内容 -->
          <div>
            <p style="font-weight: bold">User recharge instructions:</p>
            <div class="textContent">
              <p>
                1、Before recharging,the user needs toprovide the correct Likei lD to complete
                thisrecharge.
              </p>
              <p>
                2、After the coin seller recharges, therecharged coins will be directly sent to
                thecoin seller account.
              </p>
              <p>
                3、How to obtain an lD for an account:(1)In Likei open the 'My' page.(2)You can
                confrm the account lD at the topof the page.
              </p>
              <p>
                4、lf the lD account you enter is a coinseller account, the coin will be sent to
                thecoin seller center of that account.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import MobileHeader from '../components/MobileHeader.vue'
import { ref } from 'vue'
import { searchUser } from '@/api/userInfo'
import { showWarning } from '@/utils/toast.js'
import { useRouter } from 'vue-router'
import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'

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) {
      router.push({
        path: '/recharge-freight-agent',
        query: {
          targetUserId: targetUserId.value,
          isFreightAgent: targetUserInfo.body.isFreightAgent,
        },
      })
    } else {
      // 信息提示id有误
      showWarning('User info not found')
    }
  } catch (error) {
    console.log('error:', error.response.errorMsg)
    throw error
  }
}
</script>

<style scoped>
* {
  color: black;
  font-family: 'SF Pro';
}

.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);
}
</style>