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