fix(样式): 修复屏幕高度不够时，背景图截断的问题
This commit is contained in:
hzj
parent
737ff22320
commit
66f4ff209c
@ -1,171 +1,180 @@
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<MobileHeader title="Admin Center" :isHomePage="true">
|
||||
<template v-slot:extraFunction>
|
||||
<div style="color: rgba(187, 146, 255, 1) !important; font-weight: 600" @click="send">
|
||||
Send
|
||||
</div>
|
||||
</template>
|
||||
</MobileHeader>
|
||||
<!-- 标签 -->
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
style="font-size: 18px; padding: 10px 0; flex: 1; text-align: center"
|
||||
class="tab-item"
|
||||
:class="activeIndex == index ? 'tabName-active' : 'tabName'"
|
||||
ref="tabItems"
|
||||
@click="setActiveTab(index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<!-- 下划线元素 -->
|
||||
<div
|
||||
style="width: 15px; height: 3px; background-color: #bb92ff"
|
||||
:style="underlineStyle"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- BD列表 -->
|
||||
<div style="padding: 10px" v-show="activeIndex == 0">
|
||||
<div
|
||||
v-for="(info, BDIndex) in BDList"
|
||||
:key="BDIndex"
|
||||
style="
|
||||
box-shadow: 0 0 4px 0 #00000066;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease-out;
|
||||
"
|
||||
@click="showUserInfo(BDIndex)"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img
|
||||
:src="info.userProfile.userAvatar"
|
||||
alt="../assets/icon/coin.png"
|
||||
style="width: 36px; height: 36px; border-radius: 50%"
|
||||
/>
|
||||
<div style="margin-left: 8px">
|
||||
<div style="font-weight: 700">{{ info.userProfile.userNickname }}</div>
|
||||
<div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
|
||||
ID:{{ info.userProfile.account }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg">
|
||||
<MobileHeader title="Admin Center" :isHomePage="true">
|
||||
<template v-slot:extraFunction>
|
||||
<div style="color: rgba(187, 146, 255, 1) !important; font-weight: 600" @click="send">
|
||||
Send
|
||||
</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<img
|
||||
src="../assets/icon/arrow.png"
|
||||
alt=""
|
||||
style="width: 24px; transition: transform 0.5s"
|
||||
:class="{ rotated: BDIndex == selectedBDIndex }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 展示信息 -->
|
||||
<transition name="info-fade">
|
||||
<div style="display: flex" v-show="BDIndex == selectedBDIndex">
|
||||
<div style="flex: 1">
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Host</div>
|
||||
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
||||
{{ info.allAnchorCount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Agency</div>
|
||||
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
||||
{{ info.agentCount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<!-- 触发加载功能 -->
|
||||
<div ref="BDloadmore" v-if="showBDLoading"></div>
|
||||
</div>
|
||||
|
||||
<!-- agency列表 -->
|
||||
<div style="padding: 10px" v-show="activeIndex == 1">
|
||||
</template>
|
||||
</MobileHeader>
|
||||
<!-- 标签 -->
|
||||
<div
|
||||
style="
|
||||
box-shadow: 0 0 4px 0 #00000066;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease-out;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
"
|
||||
>
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge for the month:</div>
|
||||
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
||||
${{ totalRechargeDetail[0]?.totalAmount || 0 }}
|
||||
</div>
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge last month:</div>
|
||||
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
||||
${{ totalRechargeDetail[1]?.totalAmount || 0 }}
|
||||
<div
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
style="font-size: 18px; padding: 10px 0; flex: 1; text-align: center"
|
||||
class="tab-item"
|
||||
:class="activeIndex == index ? 'tabName-active' : 'tabName'"
|
||||
ref="tabItems"
|
||||
@click="setActiveTab(index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<!-- 下划线元素 -->
|
||||
<div
|
||||
style="width: 15px; height: 3px; background-color: #bb92ff"
|
||||
:style="underlineStyle"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(agency, aIndex) in agencyList"
|
||||
:key="aIndex"
|
||||
style="
|
||||
box-shadow: 0 0 4px 0 #00000066;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease-out;
|
||||
"
|
||||
@click="showAgencyInfo(aIndex)"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img :src="agency.userAvatar" alt="" style="width: 36px; border-radius: 50%" />
|
||||
<div style="margin-left: 8px">
|
||||
<div style="font-weight: 700">{{ agency.name }}</div>
|
||||
<div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">ID:{{ agency.account }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<img
|
||||
src="../assets/icon/arrow.png"
|
||||
alt=""
|
||||
style="width: 24px; transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)"
|
||||
:class="{ rotated: aIndex == selectedAgencyIndex }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 展示信息 -->
|
||||
<transition name="info-fade">
|
||||
<div style="display: flex" v-show="aIndex == selectedAgencyIndex">
|
||||
<div style="flex: 1">
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">This month:</div>
|
||||
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
||||
${{ formatPrice(agency.thisMonth) || 0 }}
|
||||
<!-- BD列表 -->
|
||||
<div style="padding: 10px" v-show="activeIndex == 0">
|
||||
<div
|
||||
v-for="(info, BDIndex) in BDList"
|
||||
:key="BDIndex"
|
||||
style="
|
||||
box-shadow: 0 0 4px 0 #00000066;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease-out;
|
||||
"
|
||||
@click="showUserInfo(BDIndex)"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img
|
||||
:src="info.userProfile.userAvatar"
|
||||
alt="../assets/icon/coin.png"
|
||||
style="width: 36px; height: 36px; border-radius: 50%"
|
||||
/>
|
||||
<div style="margin-left: 8px">
|
||||
<div style="font-weight: 700">{{ info.userProfile.userNickname }}</div>
|
||||
<div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
|
||||
ID:{{ info.userProfile.account }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Last month:</div>
|
||||
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
||||
${{ formatPrice(agency.lastMonth) || 0 }}
|
||||
</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<img
|
||||
src="../assets/icon/arrow.png"
|
||||
alt=""
|
||||
style="width: 24px; transition: transform 0.5s"
|
||||
:class="{ rotated: BDIndex == selectedBDIndex }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 展示信息 -->
|
||||
<transition name="info-fade">
|
||||
<div style="display: flex" v-show="BDIndex == selectedBDIndex">
|
||||
<div style="flex: 1">
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Host</div>
|
||||
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
||||
{{ info.allAnchorCount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Agency</div>
|
||||
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
||||
{{ info.agentCount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<!-- 触发加载功能 -->
|
||||
<div ref="BDloadmore" v-if="showBDLoading"></div>
|
||||
</div>
|
||||
|
||||
<!-- agency列表 -->
|
||||
<div style="padding: 10px" v-show="activeIndex == 1">
|
||||
<div
|
||||
style="
|
||||
box-shadow: 0 0 4px 0 #00000066;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease-out;
|
||||
"
|
||||
>
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">
|
||||
Total recharge for the month:
|
||||
</div>
|
||||
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
||||
${{ totalRechargeDetail[0]?.totalAmount || 0 }}
|
||||
</div>
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge last month:</div>
|
||||
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
||||
${{ totalRechargeDetail[1]?.totalAmount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(agency, aIndex) in agencyList"
|
||||
:key="aIndex"
|
||||
style="
|
||||
box-shadow: 0 0 4px 0 #00000066;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease-out;
|
||||
"
|
||||
@click="showAgencyInfo(aIndex)"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img :src="agency.userAvatar" alt="" style="width: 36px; border-radius: 50%" />
|
||||
<div style="margin-left: 8px">
|
||||
<div style="font-weight: 700">{{ agency.name }}</div>
|
||||
<div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
|
||||
ID:{{ agency.account }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<img
|
||||
src="../assets/icon/arrow.png"
|
||||
alt=""
|
||||
style="
|
||||
width: 24px;
|
||||
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
||||
"
|
||||
:class="{ rotated: aIndex == selectedAgencyIndex }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 展示信息 -->
|
||||
<transition name="info-fade">
|
||||
<div style="display: flex" v-show="aIndex == selectedAgencyIndex">
|
||||
<div style="flex: 1">
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">This month:</div>
|
||||
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
||||
${{ formatPrice(agency.thisMonth) || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Last month:</div>
|
||||
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
||||
${{ formatPrice(agency.lastMonth) || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<!-- 触发加载功能 -->
|
||||
<div ref="Agloadmore" v-if="showAgLoading"></div>
|
||||
</div>
|
||||
<!-- 触发加载功能 -->
|
||||
<div ref="Agloadmore" v-if="showAgLoading"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -346,6 +355,21 @@ const formatPrice = (value) => {
|
||||
<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;
|
||||
}
|
||||
|
||||
.tabName {
|
||||
@ -357,15 +381,6 @@ const formatPrice = (value) => {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 添加页面样式 */
|
||||
.fullPage {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-image: url(../assets/images/secondBg.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.info-fade-enter-from,
|
||||
.info-fade-leave-to {
|
||||
transform: translateY(-10px);
|
||||
|
||||
@ -1,139 +1,141 @@
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<MobileHeader title="Item Distribution" />
|
||||
<!-- 标签 -->
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
"
|
||||
>
|
||||
<div class="bg">
|
||||
<MobileHeader title="Item Distribution" />
|
||||
<!-- 标签 -->
|
||||
<div
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
style="font-size: 18px; padding: 10px 0; flex: 1; text-align: center"
|
||||
class="tab-item"
|
||||
:class="activeIndex == index ? 'tabName-active' : 'tabName'"
|
||||
ref="tabItems"
|
||||
@click="setActiveTab(index)"
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
"
|
||||
>
|
||||
{{ item.name }}
|
||||
<div
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
style="font-size: 18px; padding: 10px 0; flex: 1; text-align: center"
|
||||
class="tab-item"
|
||||
:class="activeIndex == index ? 'tabName-active' : 'tabName'"
|
||||
ref="tabItems"
|
||||
@click="setActiveTab(index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<!-- 下划线元素 -->
|
||||
<div
|
||||
style="width: 15px; height: 3px; background-color: #bb92ff"
|
||||
:style="underlineStyle"
|
||||
></div>
|
||||
</div>
|
||||
<!-- 下划线元素 -->
|
||||
<div
|
||||
style="width: 15px; height: 3px; background-color: #bb92ff"
|
||||
:style="underlineStyle"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
padding: 15px;
|
||||
"
|
||||
>
|
||||
<div v-for="(product, index) in productList" :key="index" @click="showSendDialog(product)">
|
||||
<!-- 商品列表 -->
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
padding: 15px;
|
||||
"
|
||||
>
|
||||
<div v-for="(product, index) in productList" :key="index" @click="showSendDialog(product)">
|
||||
<div
|
||||
style="
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img :src="product.cover" alt="虚拟商品" style="width: 60%; margin: 10px 0" />
|
||||
<button
|
||||
style="
|
||||
background-color: #bb92ff;
|
||||
color: white;
|
||||
margin-bottom: 10px;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
padding: 5px 10px;
|
||||
"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</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="
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 20px;
|
||||
"
|
||||
@click.stop
|
||||
>
|
||||
<img :src="product.cover" alt="虚拟商品" style="width: 60%; margin: 10px 0" />
|
||||
<button
|
||||
style="
|
||||
background-color: #bb92ff;
|
||||
color: white;
|
||||
margin-bottom: 10px;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
padding: 5px 10px;
|
||||
"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</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="
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 20px;
|
||||
"
|
||||
@click.stop
|
||||
>
|
||||
<img :src="selectedGoods.cover" alt="" style="width: 60%; margin: 5px 0" />
|
||||
<div style="font-weight: 600; font-size: 16px; margin: 10px 0">
|
||||
<span style="color: #00000080; margin-right: 10px">Validity:</span>
|
||||
<span style="font-weight: 700; color: #000">{{ validityPeriod }}day</span>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter user ID"
|
||||
style="
|
||||
height: 36px;
|
||||
width: 171px;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
background-color: #f1f1f1b2;
|
||||
padding: 8px;
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 590;
|
||||
"
|
||||
v-model="targetUserId"
|
||||
/>
|
||||
<button
|
||||
style="
|
||||
height: 36px;
|
||||
width: 72px;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
padding: 8px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 590;
|
||||
"
|
||||
:style="{ backgroundColor: confirmClick ? '#bb92ff' : '#00000080' }"
|
||||
@click="sendGoods"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<img :src="selectedGoods.cover" alt="" style="width: 60%; margin: 5px 0" />
|
||||
<div style="font-weight: 600; font-size: 16px; margin: 10px 0">
|
||||
<span style="color: #00000080; margin-right: 10px">Validity:</span>
|
||||
<span style="font-weight: 700; color: #000">{{ validityPeriod }}day</span>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter user ID"
|
||||
style="
|
||||
height: 36px;
|
||||
width: 171px;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
background-color: #f1f1f1b2;
|
||||
padding: 8px;
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 590;
|
||||
"
|
||||
v-model="targetUserId"
|
||||
/>
|
||||
<button
|
||||
style="
|
||||
height: 36px;
|
||||
width: 72px;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
padding: 8px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 590;
|
||||
"
|
||||
:style="{ backgroundColor: confirmClick ? '#bb92ff' : '#00000080' }"
|
||||
@click="sendGoods"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -321,12 +323,22 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加页面样式 */
|
||||
* {
|
||||
color: black;
|
||||
font-family: 'SF Pro';
|
||||
}
|
||||
|
||||
.fullPage {
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
background-image: url(../assets/images/secondBg.png);
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
@ -1,134 +1,136 @@
|
||||
<!-- Recharge.vue -->
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<!-- 顶部 -->
|
||||
<MobileHeader title="Recharge" showHelp="true" @help="popupHelp" />
|
||||
<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
|
||||
<!-- 内容 -->
|
||||
<div style="padding: 4%">
|
||||
<!-- 输入框 -->
|
||||
<div style="display: flex; gap: 20px; width: 100%">
|
||||
<input
|
||||
style="
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
font-weight: bold;
|
||||
flex: 1;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 2px 2px #00000020;
|
||||
padding: 10px 8px;
|
||||
"
|
||||
@click="closedPopup"
|
||||
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"
|
||||
>
|
||||
x
|
||||
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>
|
||||
<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
|
||||
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>
|
||||
@ -187,13 +189,20 @@ const checkUserId = async () => {
|
||||
<style scoped>
|
||||
* {
|
||||
color: black;
|
||||
font-family: 'SF Pro';
|
||||
}
|
||||
|
||||
.fullPage {
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
background-image: url(../assets/images/secondBg.png);
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
@ -1,137 +1,149 @@
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<!-- 顶部 -->
|
||||
<MobileHeader title="Recharge">
|
||||
<template v-slot:extraFunction>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
color: rgba(187, 146, 255, 1) !important;
|
||||
"
|
||||
@click="listBt"
|
||||
>
|
||||
<div style="font-weight: bold">{{ selectedLanguage.type }}</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"
|
||||
>
|
||||
{{ item.type }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
</MobileHeader>
|
||||
|
||||
<div style="padding: 10px">
|
||||
<!-- 头部展示图 -->
|
||||
<img src="../assets/images/firstRechargeBonus.png" 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 }}
|
||||
<img src="../assets/icon/sellerTab.png" alt="" style="height: 20px; margin-left: 5px" />
|
||||
</div>
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">ID:{{ userProfile.id }}</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 class="bg">
|
||||
<!-- 顶部 -->
|
||||
<MobileHeader title="Recharge">
|
||||
<template v-slot:extraFunction>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 4px 0 #00000050;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
color: rgba(187, 146, 255, 1) !important;
|
||||
"
|
||||
@click="setChannelName(channelItem.channel.channelName)"
|
||||
@click="listBt"
|
||||
>
|
||||
<img :src="channelItem.channel.channelIcon" alt="" style="width: 10%; margin: 10px" />
|
||||
<div style="font-weight: 500">{{ channelItem.channel.channelName }}</div>
|
||||
<div style="font-weight: bold">{{ selectedLanguage.type }}</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"
|
||||
>
|
||||
{{ item.type }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
</MobileHeader>
|
||||
|
||||
<!-- 支付商品 -->
|
||||
<div
|
||||
<div style="padding: 10px">
|
||||
<!-- 头部展示图 -->
|
||||
<img src="../assets/images/firstRechargeBonus.png" 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="
|
||||
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;
|
||||
width: 10%;
|
||||
margin: 10px;
|
||||
border-radius: 50%;
|
||||
aspect-ratio: 1/1;
|
||||
object-fit: cover;
|
||||
"
|
||||
v-if="selectedChannelName == channelItem.channel.channelName"
|
||||
>
|
||||
/>
|
||||
<div style="">
|
||||
<div style="font-weight: 700; display: flex; align-items: center">
|
||||
{{ userProfile.userNickname }}
|
||||
<img
|
||||
src="../assets/icon/sellerTab.png"
|
||||
alt=""
|
||||
style="height: 20px; margin-left: 5px"
|
||||
/>
|
||||
</div>
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">ID:{{ userProfile.id }}</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="
|
||||
width: 100%;
|
||||
display: flex;
|
||||
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)"
|
||||
@click="setChannelName(channelItem.channel.channelName)"
|
||||
>
|
||||
<img src="../assets/icon/coin.png" alt="" style="width: 30%" />
|
||||
<div>{{ goods.content }}</div>
|
||||
<div>${{ goods.amountUsd }}</div>
|
||||
<img :src="channelItem.channel.channelIcon" alt="" style="width: 10%; margin: 10px" />
|
||||
<div style="font-weight: 500">{{ channelItem.channel.channelName }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 支付商品 -->
|
||||
<div
|
||||
style="
|
||||
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;
|
||||
"
|
||||
v-if="selectedChannelName == channelItem.channel.channelName"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -279,13 +291,20 @@ watch(selectedCountry, (New, Old) => {
|
||||
<style scoped>
|
||||
* {
|
||||
color: black;
|
||||
font-family: 'SF Pro';
|
||||
}
|
||||
|
||||
.fullPage {
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
background-image: url(../assets/images/secondBg.png);
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
@ -1,70 +1,72 @@
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<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%" />
|
||||
</div>
|
||||
</template>
|
||||
</MobileHeader>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div style="padding: 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="
|
||||
margin: 10px 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 4px 0 #00000050;
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(country, cIndex) in countries.countries"
|
||||
:key="cIndex"
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
"
|
||||
@click="selectC(gIndex, cIndex, country)"
|
||||
>
|
||||
<div style="display: flex; align-items: center">
|
||||
<img
|
||||
:src="country.country.nationalFlag"
|
||||
alt=""
|
||||
style="height: 16px; margin-right: 10px"
|
||||
/>
|
||||
{{ country.countryName }}
|
||||
<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%" />
|
||||
</div>
|
||||
</template>
|
||||
</MobileHeader>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div style="padding: 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="
|
||||
margin: 10px 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 4px 0 #00000050;
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(country, cIndex) in countries.countries"
|
||||
:key="cIndex"
|
||||
style="
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
"
|
||||
@click="selectC(gIndex, cIndex, country)"
|
||||
>
|
||||
<div style="display: flex; align-items: center">
|
||||
<img
|
||||
:src="country.country.nationalFlag"
|
||||
alt=""
|
||||
style="height: 16px; margin-right: 10px"
|
||||
/>
|
||||
{{ country.countryName }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||
border-radius: 50%;
|
||||
background-color: rgba(187, 146, 255, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
v-if="groupIndex == gIndex && countryIndex == cIndex"
|
||||
></div>
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(187, 146, 255, 1);
|
||||
"
|
||||
v-if="groupIndex == gIndex && countryIndex == cIndex"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,78 +76,89 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import MobileHeader from "../components/MobileHeader.vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useCountryStore } from "@/stores/country";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import MobileHeader from '../components/MobileHeader.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useCountryStore } from '@/stores/country'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
const route = useRoute();
|
||||
const route = useRoute()
|
||||
|
||||
const countryStore = useCountryStore();
|
||||
const { list: countryList, selectedCountry } = storeToRefs(countryStore); //国家信息
|
||||
const countryStore = useCountryStore()
|
||||
const { list: countryList, selectedCountry } = storeToRefs(countryStore) //国家信息
|
||||
|
||||
const groupIndex = ref(-1); //选中的首字母区域
|
||||
const countryIndex = ref(-1); //选中区域的第几个
|
||||
const groupIndex = ref(-1) //选中的首字母区域
|
||||
const countryIndex = ref(-1) //选中区域的第几个
|
||||
|
||||
const selectC = (gIndex, cIndex, country) => {
|
||||
groupIndex.value = gIndex;
|
||||
countryIndex.value = cIndex;
|
||||
countryStore.setCountry(country);
|
||||
}; //选择国家
|
||||
groupIndex.value = gIndex
|
||||
countryIndex.value = cIndex
|
||||
countryStore.setCountry(country)
|
||||
} //选择国家
|
||||
|
||||
const groupedCountries = computed(() => {
|
||||
const groups = {};
|
||||
const groups = {}
|
||||
countryList.value.forEach((item) => {
|
||||
let firstLetter = item.countryName.charAt(0)?.toUpperCase() || "#"; //获取首字母转大写
|
||||
const normalizedLetter = /[A-Z]/.test(firstLetter) ? firstLetter : "#"; //处理特殊字符
|
||||
let firstLetter = item.countryName.charAt(0)?.toUpperCase() || '#' //获取首字母转大写
|
||||
const normalizedLetter = /[A-Z]/.test(firstLetter) ? firstLetter : '#' //处理特殊字符
|
||||
|
||||
if (!groups.hasOwnProperty(normalizedLetter)) {
|
||||
groups[normalizedLetter] = [];
|
||||
groups[normalizedLetter] = []
|
||||
}
|
||||
groups[normalizedLetter].push(item);
|
||||
});
|
||||
groups[normalizedLetter].push(item)
|
||||
})
|
||||
|
||||
let resCountryList = Object.keys(groups)
|
||||
.sort()
|
||||
.map((letter) => ({
|
||||
letter,
|
||||
countries: groups[letter].sort((a, b) => a.countryName.localeCompare(b.countryName)),
|
||||
}));
|
||||
}))
|
||||
|
||||
let firstLetter = selectedCountry.value.countryName.charAt(0)?.toUpperCase() || "#"; //当前选中的国家的首字母
|
||||
let firstLetter = selectedCountry.value.countryName.charAt(0)?.toUpperCase() || '#' //当前选中的国家的首字母
|
||||
resCountryList.forEach((resitem, gIndex) => {
|
||||
if (resitem.letter == firstLetter) {
|
||||
resitem.countries.forEach((citem, cIndex) => {
|
||||
if (citem.countryName == selectedCountry.value.countryName) {
|
||||
groupIndex.value = gIndex;
|
||||
countryIndex.value = cIndex;
|
||||
groupIndex.value = gIndex
|
||||
countryIndex.value = cIndex
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
return resCountryList;
|
||||
});
|
||||
return resCountryList
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const countryListStr = sessionStorage.getItem("countryList");
|
||||
selectedCountry.value = sessionStorage.getItem("selectedCountry");
|
||||
const countryListStr = sessionStorage.getItem('countryList')
|
||||
selectedCountry.value = sessionStorage.getItem('selectedCountry')
|
||||
if (countryListStr) {
|
||||
countryList.value = JSON.parse(countryListStr);
|
||||
countryList.value = JSON.parse(countryListStr)
|
||||
|
||||
// 可选：清除临时存储
|
||||
// sessionStorage.removeItem('tempCountryList');
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
color: black;
|
||||
font-family: 'SF Pro';
|
||||
}
|
||||
|
||||
.fullPage {
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
background-image: url(../assets/images/secondBg.png);
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user