feat(删除无用页面): 标准充值页
This commit is contained in:
hzj
parent
5fb1d81f2b
commit
9f382fc9bb
@ -173,12 +173,6 @@ const router = createRouter({
|
|||||||
component: () => import('../views/Recharge.vue'),
|
component: () => import('../views/Recharge.vue'),
|
||||||
meta: { requiresAuth: true },
|
meta: { requiresAuth: true },
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/recharge-standard',
|
|
||||||
name: 'recharge-standard',
|
|
||||||
component: () => import('../views/RechargeStandard.vue'),
|
|
||||||
meta: { requiresAuth: true },
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/recharge-freight-agent',
|
path: '/recharge-freight-agent',
|
||||||
name: 'recharge-freight-agent',
|
name: 'recharge-freight-agent',
|
||||||
|
|||||||
@ -31,7 +31,6 @@ export const PAGES = {
|
|||||||
NOT_APP: '/not_app',
|
NOT_APP: '/not_app',
|
||||||
LOADING: '/loading',
|
LOADING: '/loading',
|
||||||
ADMIN_CENTER: '/admin-center',
|
ADMIN_CENTER: '/admin-center',
|
||||||
RECHARGE_STANDARD: '/recharge-standard',
|
|
||||||
PAY_RESULT: '/pay-result',
|
PAY_RESULT: '/pay-result',
|
||||||
MAP: '/map',
|
MAP: '/map',
|
||||||
}
|
}
|
||||||
@ -70,7 +69,6 @@ export const ROLE_PERMISSIONS = {
|
|||||||
PAGES.MESSAGE, // 消息功能
|
PAGES.MESSAGE, // 消息功能
|
||||||
PAGES.PERSONAL_SALARY, // 个人薪资查看
|
PAGES.PERSONAL_SALARY, // 个人薪资查看
|
||||||
PAGES.AGENCY_SETTING, // 主播设置
|
PAGES.AGENCY_SETTING, // 主播设置
|
||||||
PAGES.RECHARGE_STANDARD, //普通转账功能
|
|
||||||
'/team-member',
|
'/team-member',
|
||||||
'/information-details',
|
'/information-details',
|
||||||
'/history-salary',
|
'/history-salary',
|
||||||
@ -85,7 +83,6 @@ export const ROLE_PERMISSIONS = {
|
|||||||
PAGES.TRANSFER, // 转账功能
|
PAGES.TRANSFER, // 转账功能
|
||||||
PAGES.EXCHANGE, // 兑换功能
|
PAGES.EXCHANGE, // 兑换功能
|
||||||
PAGES.MESSAGE, // 消息功能
|
PAGES.MESSAGE, // 消息功能
|
||||||
PAGES.RECHARGE_STANDARD, //普通转账功能
|
|
||||||
'/invite-agency', //邀请代理
|
'/invite-agency', //邀请代理
|
||||||
'/team-member',
|
'/team-member',
|
||||||
'/history-salary',
|
'/history-salary',
|
||||||
@ -118,7 +115,6 @@ export const ROLE_PERMISSIONS = {
|
|||||||
PAGES.MESSAGE, // 消息功能
|
PAGES.MESSAGE, // 消息功能
|
||||||
PAGES.PERSONAL_SALARY, // 个人薪资查看
|
PAGES.PERSONAL_SALARY, // 个人薪资查看
|
||||||
PAGES.HOST_SETTING, // 主播设置
|
PAGES.HOST_SETTING, // 主播设置
|
||||||
PAGES.RECHARGE_STANDARD, //普通转账功能
|
|
||||||
'/information-details',
|
'/information-details',
|
||||||
'/history-salary',
|
'/history-salary',
|
||||||
'/platform-salary',
|
'/platform-salary',
|
||||||
@ -130,7 +126,6 @@ export const ROLE_PERMISSIONS = {
|
|||||||
[USER_ROLES.ADMIN]: [
|
[USER_ROLES.ADMIN]: [
|
||||||
PAGES.ADMIN_CENTER, //管理员中心
|
PAGES.ADMIN_CENTER, //管理员中心
|
||||||
'/item-distribution', //赠送商品页面
|
'/item-distribution', //赠送商品页面
|
||||||
PAGES.RECHARGE_STANDARD, //普通转账功能
|
|
||||||
],
|
],
|
||||||
|
|
||||||
// Guest (访客/申请者)
|
// 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