feat(删除无用页面): 标准充值页
This commit is contained in:
hzj
parent
5fb1d81f2b
commit
9f382fc9bb
@ -173,12 +173,6 @@ const router = createRouter({
|
||||
component: () => import('../views/Recharge.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
path: '/recharge-standard',
|
||||
name: 'recharge-standard',
|
||||
component: () => import('../views/RechargeStandard.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
path: '/recharge-freight-agent',
|
||||
name: 'recharge-freight-agent',
|
||||
|
||||
@ -31,7 +31,6 @@ export const PAGES = {
|
||||
NOT_APP: '/not_app',
|
||||
LOADING: '/loading',
|
||||
ADMIN_CENTER: '/admin-center',
|
||||
RECHARGE_STANDARD: '/recharge-standard',
|
||||
PAY_RESULT: '/pay-result',
|
||||
MAP: '/map',
|
||||
}
|
||||
@ -70,7 +69,6 @@ export const ROLE_PERMISSIONS = {
|
||||
PAGES.MESSAGE, // 消息功能
|
||||
PAGES.PERSONAL_SALARY, // 个人薪资查看
|
||||
PAGES.AGENCY_SETTING, // 主播设置
|
||||
PAGES.RECHARGE_STANDARD, //普通转账功能
|
||||
'/team-member',
|
||||
'/information-details',
|
||||
'/history-salary',
|
||||
@ -85,7 +83,6 @@ export const ROLE_PERMISSIONS = {
|
||||
PAGES.TRANSFER, // 转账功能
|
||||
PAGES.EXCHANGE, // 兑换功能
|
||||
PAGES.MESSAGE, // 消息功能
|
||||
PAGES.RECHARGE_STANDARD, //普通转账功能
|
||||
'/invite-agency', //邀请代理
|
||||
'/team-member',
|
||||
'/history-salary',
|
||||
@ -118,7 +115,6 @@ export const ROLE_PERMISSIONS = {
|
||||
PAGES.MESSAGE, // 消息功能
|
||||
PAGES.PERSONAL_SALARY, // 个人薪资查看
|
||||
PAGES.HOST_SETTING, // 主播设置
|
||||
PAGES.RECHARGE_STANDARD, //普通转账功能
|
||||
'/information-details',
|
||||
'/history-salary',
|
||||
'/platform-salary',
|
||||
@ -130,7 +126,6 @@ export const ROLE_PERMISSIONS = {
|
||||
[USER_ROLES.ADMIN]: [
|
||||
PAGES.ADMIN_CENTER, //管理员中心
|
||||
'/item-distribution', //赠送商品页面
|
||||
PAGES.RECHARGE_STANDARD, //普通转账功能
|
||||
],
|
||||
|
||||
// Guest (访客/申请者)
|
||||
|
||||
@ -1,203 +0,0 @@
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<!-- 上区域 -->
|
||||
<div
|
||||
style="
|
||||
width: 100vw;
|
||||
height: 40vh;
|
||||
background-image: url(/src/assets/images/rechargeBg.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
"
|
||||
>
|
||||
<!-- 顶部 -->
|
||||
<MobileHeader title="Recharge">
|
||||
<template v-slot:extraFunction>
|
||||
<div style="display: flex; align-items: center; position: relative">
|
||||
<img src="../assets/icon/listBt.png" style="width: 1.2rem" alt="" @click="listBt" />
|
||||
<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; opacity: 0.5"
|
||||
v-for="(item, index) in switchList"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
</MobileHeader>
|
||||
|
||||
<!-- 余额展示 -->
|
||||
<div style="flex: 1; display: flex; justify-content: center; align-items: center">
|
||||
<img src="/src/assets/icon/coin.png" alt="" style="width: 32px" />
|
||||
<div style="margin-left: 10px; font-weight: 500">999999</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 圆角修饰 -->
|
||||
<div
|
||||
style="
|
||||
background-color: white;
|
||||
margin-top: -10px;
|
||||
height: 11px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
"
|
||||
></div>
|
||||
|
||||
<!-- 主要展示 -->
|
||||
<div style="padding: 10px; display: flex; flex-direction: column; align-items: center">
|
||||
<!-- 商品展示 -->
|
||||
<div style="width: 100%; display: flex; flex-direction: column; gap: 20px">
|
||||
<div
|
||||
v-for="(goods, index) in coinGoodsList"
|
||||
:key="index"
|
||||
style="
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 3px 0.5px #00000050;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
"
|
||||
@click="selectGoods(index)"
|
||||
:class="[selectedIndex == index ? 'selectedGoods' : 'notSelectedGoods']"
|
||||
>
|
||||
<!-- 数量 -->
|
||||
<div style="display: flex; align-items: center">
|
||||
<img :src="getImageUrl(goods.cover)" alt="" style="width: 32px; margin-right: 8px" />
|
||||
<div style="font-weight: 500">{{ goods.amount }}</div>
|
||||
</div>
|
||||
<!-- 价格 -->
|
||||
<div style="font-weight: 500; line-height: 32px">${{ goods.price }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 充值按钮 -->
|
||||
<button
|
||||
style="
|
||||
width: 70%;
|
||||
margin: 32px 0;
|
||||
padding: 10px;
|
||||
border-radius: 32px;
|
||||
border: 0;
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
|
||||
"
|
||||
:class="[selectedIndex != -1 ? 'selectedBt' : 'notSelectedBt']"
|
||||
>
|
||||
Recharge
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import MobileHeader from "../components/MobileHeader.vue";
|
||||
|
||||
const switchList = ref(["Gold List", "Recharge List"]);
|
||||
const visibleList = ref(false);
|
||||
const listBt = () => {
|
||||
visibleList.value = !visibleList.value;
|
||||
};
|
||||
|
||||
const coinGoodsList = ref([
|
||||
{
|
||||
cover: "/src/assets/icon/coin.png",
|
||||
amount: 10000,
|
||||
price: 0.99,
|
||||
},
|
||||
{
|
||||
cover: "/src/assets/icon/coinMore.png",
|
||||
amount: 50000,
|
||||
price: 4.99,
|
||||
},
|
||||
]);
|
||||
|
||||
const getImageUrl = (imgUrl) => {
|
||||
return new URL(imgUrl, import.meta.url).href;
|
||||
};
|
||||
|
||||
const selectedIndex = ref(-1); //选中商品下标
|
||||
const selectedGoods = ref({}); //选中商品
|
||||
|
||||
const selectGoods = (index) => {
|
||||
if (selectedIndex.value != index) {
|
||||
selectedIndex.value = index;
|
||||
selectedGoods.value = coinGoodsList.value[index];
|
||||
|
||||
console.log("选中下标:", selectedIndex.value);
|
||||
console.log("选中商品:", coinGoodsList.value[index]);
|
||||
} else {
|
||||
selectedIndex.value = -1;
|
||||
selectedGoods.value = {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fullPage {
|
||||
}
|
||||
|
||||
.slide-fade-enter-active {
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
|
||||
}
|
||||
.slide-fade-enter-from,
|
||||
.slide-fade-leave-to {
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 未选中状态 */
|
||||
.notSelectedGoods {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* 选中状态 */
|
||||
.selectedGoods {
|
||||
background-color: rgba(187, 146, 255, 1);
|
||||
/* border: 1px solid rgba(119, 38, 255, 1); */
|
||||
border: 1px solid rgba(119, 38, 255, 1);
|
||||
}
|
||||
|
||||
/* 未选中状态 */
|
||||
.notSelectedBt {
|
||||
background-color: white;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* 选中状态 */
|
||||
.selectedBt {
|
||||
background: linear-gradient(to bottom, rgba(198, 112, 255, 0.7), rgba(119, 38, 255, 0.7));
|
||||
color: white;
|
||||
}
|
||||
|
||||
.extraList > div:not(:last-child) {
|
||||
border-bottom: 0.1px solid black;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user