hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(充值页面): 取消给任何用户充值，更改为只为自己充值，删除上一个搜索页面

Browse Source
This commit is contained in:
hzj 2025-12-08 18:37:05 +08:00
parent 7a2c79d717
commit bcd41d133a
8 changed files with 361 additions and 497 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/firstRechargeBonus.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 581 KiB

6
src/router/index.js
View File

@ -158,12 +158,6 @@ const router = createRouter({
{
path: '/recharge',
name: 'recharge',
component: () => import('../views/Recharge/Recharge.vue'),
meta: { requiresAuth: true },
},
{
path: '/recharge-freight-agent',
name: 'recharge-freight-agent',
component: () => import('../views/Recharge/RechargeFreightAgent.vue'),
meta: { requiresAuth: true },
},

14
src/stores/country.js
View File

@ -1,16 +1,16 @@
import { defineStore } from "pinia";
import { defineStore } from 'pinia'
export const useCountryStore = defineStore("country", {
export const useCountryStore = defineStore('country', {
state: () => ({
list: [],
selectedCountry: {},
list: [], //国家列表
selectedCountry: {}, //选中的国家
}),
actions: {
setCountryList(data) {
this.list = data;
this.list = data
},
setCountry(country) {
this.selectedCountry = country;
this.selectedCountry = country
},
},
});
})

2
src/utils/permissionManager.js
View File

@ -76,7 +76,6 @@ export const ROLE_PERMISSIONS = {
...RANKING_PAGES, //排行榜
...ACTIVITIES, //活动页面
'/recharge',
'/recharge-freight-agent',
'/recharge-agency-recruit', //充值代理介绍页面
'/search-payee', //搜索收款人
'/cash-out', // 提现页面
@ -128,7 +127,6 @@ export const ROLE_PERMISSIONS = {
PAGES.COIN_SELLER, // 主页面
'/seller-records',
'/coin-seller-search',
'/recharge-freight-agent',
],
// Agency (代理商)

1
src/utils/routeGuard.js
View File

@ -424,7 +424,6 @@ class RouteGuard {
'/404', // 404页面
'/error', // 通用错误页面
'/recharge',
'/recharge-freight-agent',
'/recharge-agency-recruit', //充值代理介绍页面
'/pay-result',
'/search-payee', //搜索收款人

223
src/views/Recharge/Recharge.vue
View File

@ -1,223 +0,0 @@
<!-- Recharge.vue -->
<template>
<div class="fullPage">
<div class="bg">
<!-- 顶部 -->
<MobileHeader title="Recharge" showHelp="true" isHomePage="true" @help="popupHelp" />
<!-- 内容 -->
<div style="padding: 4%">
<!-- 输入框 -->
<div style="display: flex; gap: 20px; width: 100%">
<div style="flex: 1">
<input
style="
width: 100%;
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"
/>
</div>
<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 { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showWarning } from '@/utils/toast.js'
import { searchUser } from '@/api/userInfo'
import MobileHeader from '@/components/MobileHeader.vue'
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,
isSuperFreightAgent: targetUserInfo.body?.isSuperFreightAgent || false,
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>

542
src/views/Recharge/RechargeFreightAgent.vue
View File

@ -1,152 +1,185 @@
<template>
<div class="fullPage">
<div class="bg">
<!-- 顶部 -->
<MobileHeader title="Recharge">
<template v-slot:extraFunction>
<div
style="
display: flex;
align-items: center;
position: relative;
color: rgba(187, 146, 255, 1) !important;
"
@click="showLang"
>
<div style="font-weight: bold">{{ selectedLanguage.value }}</div>
<!-- <div
style="margin-left: 5px; transition: transform 0.5s"
:class="{ rotated: visibleList }"
>
>
</div> -->
<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; color: white !important; font-weight: 590"
v-for="(item, index) in languageList"
:key="index"
@click="selectLang(item)"
>
{{ item.value }}
</div>
</div>
</transition>
</div>
</template>
</MobileHeader>
<!-- 顶部导航 -->
<GeneralHeader
:isHomePage="true"
:showLanguageList="true"
title="Recharge"
:backImg="imgUrl"
color="black"
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
/>
<div style="padding: 10px">
<!-- 主要内容 -->
<div style="padding: 10px; display: flex; flex-direction: column; gap: 8px">
<!-- 头部展示图 -->
<img src="../../assets/images/firstRechargeBonus.png" alt="" style="width: 100%" />
<img :src="imageUrl('headImg')" alt="" style="width: 100%" />
<div style="font-weight: 600; margin-bottom: 10px">Recharge ID：</div>
<!-- 个人信息 -->
<div
style="
display: flex;
border-radius: 8px;
box-shadow: 0 0 4px 0 #00000050;
align-items: center;
"
>
<img
:src="userProfile.userAvatar"
alt=""
style="
width: 10%;
margin: 10px;
border-radius: 50%;
aspect-ratio: 1/1;
object-fit: cover;
"
/>
<div style="">
<div style="font-weight: 700; display: flex; align-items: center">
{{ userProfile.userNickname }}
<!-- 个人信息模块 -->
<div style="display: flex; flex-direction: column; gap: 8px">
<!-- 标题 -->
<div style="display: flex; justify-content: space-between; align-items: center">
<div style="font-weight: 600">My Information:</div>
<div style="min-width: 0; width: 1.5em">
<img
src="../../assets/icon/identity/coinSeller.png"
src="../../assets/icon/help.png"
alt=""
style="height: 20px; margin-left: 5px"
v-if="isFreightAgent"
style="display: block; width: 100%; object-fit: cover"
/>
</div>
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">
ID:{{ userProfile.account }}
</div>
<!-- 个人信息 -->
<div
style="
min-width: 0;
padding: 10px;
border-radius: 8px;
box-shadow: 0 0 4px 0 #00000050;
display: flex;
align-items: center;
gap: 4px;
"
>
<!-- 头像 -->
<img
:src="userInfo.userAvatar || ''"
alt=""
style="
width: 3em;
min-width: 0;
border-radius: 50%;
aspect-ratio: 1/1;
object-fit: cover;
"
@error="handleAvatarImageError"
/>
<!-- 基本信息 -->
<div style="flex: 1; min-width: 0">
<div style="display: flex; align-items: center; gap: 4px">
<div
style="
font-weight: 700;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
{{ userInfo.userNickname }}
</div>
<img
v-if="isFreightAgent"
src="../../assets/icon/identity/coinSeller.png"
alt=""
style="
display: block;
width: auto;
min-width: 0;
height: 1.5em;
object-fit: contain;
flex-shrink: 0;
"
/>
</div>
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">
ID:{{ userInfo.account }}
</div>
</div>
</div>
</div>
<!-- 当前选择国家 -->
<div style="width: 100%; display: flex; justify-content: space-between; margin: 10px 0">
<div style="font-weight: 600">Select a country：</div>
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)" @click="goMap">
<img src="../../assets/icon/Vector.png" alt="" style="width: 10px" />
{{ selectedCountry.countryName }}
</div>
</div>
<!-- 支付渠道 -->
<div v-if="channels.length != 0">
<div v-for="(channelItem, index) in channels" :key="index">
<!-- 支付类型 -->
<!-- 商品展示模块 -->
<div style="display: flex; flex-direction: column; gap: 8px">
<!-- 当前选择国家 -->
<div style="width: 100%; display: flex; justify-content: space-between">
<div style="font-weight: 600">Select a country：</div>
<div
style="
padding: 4px;
border-radius: 4px;
background: #7726ff;
box-shadow: 0 1px 18px 2px #f2d9ff inset, 0 1px 4px 2px #f2d9ff inset;
display: flex;
border-radius: 8px;
box-shadow: 0 0 4px 0 #00000050;
justify-content: center;
align-items: center;
gap: 4px;
"
@click="setChannelName(channelItem.channel.channelName)"
@click="goMap"
>
<img :src="channelItem.channel.channelIcon" alt="" style="width: 10%; margin: 10px" />
<div style="font-weight: 500">{{ channelItem.channel.channelName }}</div>
</div>
<!-- 国旗 -->
<img
:src="selectedCountry.country?.nationalFlag"
alt=""
style="display: block; width: 1.5em; object-fit: contain"
/>
<!-- 支付商品 -->
<!-- 国家名字 -->
<div style="font-size: 0.8em; font-weight: 500; color: #fff">
{{ selectedCountry.countryName }}
</div>
</div>
</div>
<!-- 支付渠道 -->
<div v-if="channels.length != 0" style="display: flex; flex-direction: column; gap: 12px">
<div
v-for="(channelItem, index) in channels"
:key="index"
style="
padding: 10px;
border-radius: 8px;
box-shadow: 0 0 4px 0 #00000050;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 10px;
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 8px;
"
>
<div
style="
width: 100%;
border-radius: 8px;
box-shadow: 0 0 4px 0 #00000050;
display: flex;
flex-direction: column;
align-items: center;
"
v-for="(goods, index) in commodityList"
:key="index"
@click="goPay(channelItem, goods)"
>
<img src="../../assets/icon/coin.png" alt="" style="width: 30%" />
<div>{{ goods.content }}</div>
<div>${{ goods.amountUsd }}</div>
<!-- 支付类型 -->
<div style="display: flex; align-items: center; gap: 8px">
<img :src="channelItem.channel.channelIcon" style="display: block; width: 2.5em" />
<div style="font-weight: 500">{{ channelItem.channel.channelName }}</div>
</div>
<!-- 支付商品 -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px">
<div
style="
padding: 8px;
width: 100%;
border-radius: 8px;
box-shadow: 0 0 4px 0 #00000050;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
"
v-for="(goods, index) in commodityList"
:key="index"
@click="goPay(channelItem, goods)"
>
<img
src="../../assets/icon/coin.png"
alt=""
style="display: block; width: 3em; object-fit: cover"
/>
<div style="font-size: 0.9em; font-weight: 500; color: #373232">
{{ goods.content }}
</div>
<div style="font-size: 1em; font-weight: 500; color: #131111">
${{ goods.amountUsd }}
</div>
</div>
</div>
</div>
</div>
@ -157,97 +190,69 @@
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import router from '@/router'
import { useI18n } from 'vue-i18n'
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { connectToApp } from '@/utils/appConnector.js'
import { goAirwallex } from '@/utils/payment'
import { showWarning } from '@/utils/toast.js'
import { useCountryStore } from '@/stores/country'
import { storeToRefs } from 'pinia'
import { handleAvatarImageError } from '@/utils/imageHandler.js'
import { getPngUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/imagePreloader.js'
import { searchPayRechargeUser } from '@/api/userInfo'
import { getMemberProfile } from '@/api/wallet'
import { searchUser, searchPayRechargeUser } from '@/api/userInfo'
import { getPayAplication, getAppCommodityCard, payPlaceAnOrderRecharge } from '@/api/pay'
import MobileHeader from '@/components/MobileHeader.vue'
import GeneralHeader from '@/components/GeneralHeader.vue'
const { t, locale } = useI18n()
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Recharge/', filename)
const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
const countryStore = useCountryStore()
const route = useRoute()
const languageList = ref([
{
type: 'en',
value: 'English',
},
{
type: 'ar',
value: 'اللغة العربية',
},
])
const selectedLanguage = ref({
type: 'en',
value: 'English',
})
const visibleList = ref(false) //语言列表显示
//语言列表显示
const showLang = () => {
visibleList.value = !visibleList.value
}
const selectLang = (item) => {
selectedLanguage.value = item
localStorage.setItem('lang', item)
}
// 监听语言变化并设置文档方向
watch(locale, (newLocale) => {
setDocumentDirection(newLocale)
})
const router = useRouter()
const applicationId = ref('1963531459019739137')
const userProfile = ref({}) //用户信息
const type = ref('') //用户身份
const isFreightAgent = ref(false)
const userInfo = ref({}) //用户信息
const type = ref(route.params.type || '') //用户身份
const isFreightAgent = ref(route.query.isFreightAgent === 'true')
const isSuperFreightAgent = ref(route.query.isSuperFreightAgent === 'true')
const regionId = ref('') //区域id
const { list: countryList, selectedCountry } = storeToRefs(countryStore) //国家信息
const { selectedCountry } = storeToRefs(countryStore) //国家信息
const channels = ref([]) //支付渠道
const selectedChannelName = ref('') //选中的支付渠道
const commodityList = ref([]) //商品列表
const selectedCommodity = ref({}) //选中的商品
// 前往地图页
const goMap = () => {
router.push({ path: '/map' })
}
// 点击商品支付
const goPay = async (item, commodity) => {
selectedCommodity.value = commodity
let payData = {
applicationId: applicationId.value,
payCountryId: selectedCountry.value.id,
goodsId: commodity.id,
userId: userProfile.value.id,
userId: userInfo.value.id,
channelCode: item.channel.channelCode,
}
console.log('payData:', payData)
const payRes = await payPlaceAnOrderRecharge(payData)
const body = payRes.body
if (!body) {
const payRes = await payPlaceAnOrderRecharge(payData) // 下单充值
if (!payRes.body) {
console.log('Payment not available, please contact administrator!!!')
return
}
if (body.factoryCode === 'AIRWALLEX') {
if (payRes.body.factoryCode === 'AIRWALLEX') {
// 拉起对应的h5支付页
goAirwallex({
result: body,
result: payRes.body,
props: {
logoUrl: that.sysOriginLog,
successUrl: `${location.origin}/#/pay-result?redirect=recharge&appType=${type.value}&appId=${applicationId.value}&appStatus=0`,
@ -261,68 +266,117 @@ const goPay = async (item, commodity) => {
},
})
}
if (body.requestUrl) {
location.href = decodeURIComponent(body.requestUrl)
if (payRes.body.requestUrl) {
location.href = decodeURIComponent(payRes.body.requestUrl)
}
}
//获取用户信息
const getUserInfo = async () => {
const resUserInfo = await getMemberProfile()
if (resUserInfo.status && resUserInfo.body) {
userInfo.value = resUserInfo.body
}
}
// 选中支付渠道
const setChannelName = (channelName) => {
selectedChannelName.value = selectedChannelName.value != channelName ? channelName : ''
// 检查身份
const checkAccount = async () => {
console.log('充值目标用户account：', userInfo.value.account)
try {
const targetUserInfo = await searchUser(userInfo.value.account)
console.log('targetUserInfo:', targetUserInfo)
if (targetUserInfo.status && targetUserInfo.body.id) {
isSuperFreightAgent.value = targetUserInfo.body?.isSuperFreightAgent
isFreightAgent.value = targetUserInfo.body?.isFreightAgent
}
} catch (error) {
console.log('error:', error.response.errorMsg)
throw error
}
}
// 获取appCode
const getAppCode = async () => {
const PayAplication = await getPayAplication(applicationId.value)
return PayAplication.body.appCode
}
// 获取支付渠道和商品列表
const getPayAplicationAndCommodity = async () => {
let appCommodityCardParams = {
applicationId: applicationId.value,
payCountryId: selectedCountry.value.id,
regionId: regionId.value,
type: isSuperFreightAgent.value
? 'FREIGHT_GOLD_SUPER'
: isFreightAgent.value
? 'FREIGHT_GOLD'
: 'GOLD',
}
const appCommodityCard = await getAppCommodityCard(appCommodityCardParams)
commodityList.value = appCommodityCard.body.commodity
if (appCommodityCard.body.channels) {
channels.value = appCommodityCard.body.channels
}
}
// 获取用户信息和国家列表
const getUserInfoAndCountry = async () => {
let appCode = await getAppCode()
if (appCode) {
let params = {
sysOrigin: appCode,
account: userInfo.value.account,
type: isSuperFreightAgent.value
? 'FREIGHT_GOLD_SUPER'
: isFreightAgent.value
? 'FREIGHT_GOLD'
: 'GOLD',
}
const countryAndRegionInfo = await searchPayRechargeUser(params)
if (
countryAndRegionInfo.body &&
countryAndRegionInfo.body.regionId &&
countryAndRegionInfo.body.countryList.length != 0
) {
countryStore.setCountryList(countryAndRegionInfo.body.countryList) // 存储国家列表
// 设置默认国家
if (JSON.stringify(selectedCountry.value) == '{}') {
countryStore.setCountry(countryAndRegionInfo.body.countryList[0])
}
regionId.value = countryAndRegionInfo.body.regionId //区域id
}
}
}
// 数据初始化
const init = async () => {
await getUserInfoAndCountry() // 获取用户信息和国家列表
await getPayAplicationAndCommodity() // 获取支付渠道和商品列表
}
// 使用工具函数连接APP
const connectToAppHandler = () => {
connectToApp(async () => {
// 连接成功回调
await getUserInfo() //获取用户信息
await checkAccount() // 检查身份
await init() // 数据初始化
})
}
// 预加载关键图片
const preloadCriticalImages = () => {
const criticalImages = [imageUrl('headImg')]
preloadImages(criticalImages)
}
onMounted(async () => {
type.value = route.params.type || 'GOLD'
isFreightAgent.value = route.query.isFreightAgent === 'true'
const PayAplication = await getPayAplication(applicationId.value)
console.log('PayAplication:', PayAplication)
if (PayAplication.body && PayAplication.body.appCode) {
let params = {
sysOrigin: PayAplication.body.appCode,
account: route.query.targetUserId,
type:
route.query.isSuperFreightAgent === 'true'
? 'FREIGHT_GOLD_SUPER'
: route.query.isFreightAgent === 'true'
? 'FREIGHT_GOLD'
: 'GOLD',
}
const userInfo = await searchPayRechargeUser(params)
if (userInfo.body && userInfo.body.regionId && userInfo.body.countryList.length != 0) {
userProfile.value = { ...userInfo.body.userProfile, type: 'GOLD' }
countryStore.setCountryList(userInfo.body.countryList)
if (JSON.stringify(selectedCountry.value) == '{}') {
countryStore.setCountry(userInfo.body.countryList[0])
}
regionId.value = userInfo.body.regionId
let appCommodityCardParams = {
applicationId: applicationId.value,
payCountryId: selectedCountry.value.id,
regionId: userInfo.body.regionId,
type:
route.query.isSuperFreightAgent === 'true'
? 'FREIGHT_GOLD_SUPER'
: route.query.isFreightAgent === 'true'
? 'FREIGHT_GOLD'
: 'GOLD',
}
const appCommodityCard = await getAppCommodityCard(appCommodityCardParams)
console.log('appCommodityCard:', appCommodityCard)
commodityList.value = appCommodityCard.body.commodity
if (appCommodityCard.body.channels) {
channels.value = appCommodityCard.body.channels
}
}
}
})
watch(selectedCountry, (New, Old) => {
console.log(`新值：${New.id},旧值：${Old.id}`)
preloadCriticalImages() // 预加载关键图片
connectToAppHandler()
})
</script>
@ -375,4 +429,28 @@ watch(selectedCountry, (New, Old) => {
.rotated {
transform: rotate(90deg);
}
@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;
}
}
</style>

70
src/views/Recharge/map.vue
View File

@ -1,49 +1,41 @@
<template>
<div class="fullPage">
<div class="bg">
<div>
<!-- 顶部 -->
<MobileHeader title="Country&Region">
<!-- <template v-slot:extraFunction>
<div style="display: flex; justify-content: center; align-items: center; width: 10%">
<img src="../assets/icon/selected.png" alt="" style="width: 100%" @click="confirm" />
</div>
</template> -->
</MobileHeader>
</div>
<!-- 顶部导航 -->
<GeneralHeader
title="Select Country"
:backImg="imgUrl"
color="black"
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
/>
<!-- 内容 -->
<div style="padding: 10px">
<div style="padding: 10px; display: grid; gap: 10px">
<div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">Select your country</div>
<div v-for="(countries, gIndex) in groupedCountries" :key="gIndex">
<div style="font-weight: 400; color: rgba(0, 0, 0, 0.4)">{{ countries.letter }}</div>
<div style="font-weight: 400; color: rgba(0, 0, 0, 0.4); margin-bottom: 10px">
{{ countries.letter }}
</div>
<div
style="
margin: 10px 0;
border-radius: 12px;
box-shadow: 0 0 4px 0 #00000050;
padding: 10px;
background-color: white;
display: grid;
gap: 10px;
"
>
<div
v-for="(country, cIndex) in countries.countries"
:key="cIndex"
style="
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
"
style="display: flex; justify-content: space-between; align-items: center"
@click="selectC(gIndex, cIndex, country)"
>
<div style="display: flex; align-items: center">
<img
:src="country.country.nationalFlag"
alt=""
style="height: 16px; margin-right: 10px"
/>
<div style="display: flex; align-items: center; gap: 10px">
<img :src="country.country.nationalFlag" alt="" style="height: 16px" />
{{ country.countryName }}
</div>
<div
@ -81,7 +73,9 @@ import { useRouter } from 'vue-router'
import { useCountryStore } from '@/stores/country'
import MobileHeader from '@/components/MobileHeader.vue'
import GeneralHeader from '@/components/GeneralHeader.vue'
const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
const router = useRouter()
const countryStore = useCountryStore()
@ -162,4 +156,28 @@ const confirm = () => {
background-size: 100% auto;
background-repeat: no-repeat;
}
@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;
}
}
</style>