feat(管理员中心): 用户展示页样式及基本功能完成
This commit is contained in:
hzj
parent
6064ef60d6
commit
52422793f5
BIN
src/assets/icon/arrow.png
Normal file
BIN
src/assets/icon/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 694 B |
@ -1,6 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="fullPage">
|
<div class="fullPage">
|
||||||
<MobileHeader title="Admin Center" />
|
<MobileHeader title="Admin Center">
|
||||||
|
<template v-slot:extraFunction>
|
||||||
|
<div style="color: rgba(187, 146, 255, 1) !important; font-weight: 600" @click="send">
|
||||||
|
Send
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</MobileHeader>
|
||||||
<!-- 标签 -->
|
<!-- 标签 -->
|
||||||
<div
|
<div
|
||||||
style="
|
style="
|
||||||
@ -36,112 +42,116 @@
|
|||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 商品列表 -->
|
<!-- BD列表 -->
|
||||||
<div
|
<div style="padding: 10px" v-show="activeIndex == 0">
|
||||||
style="
|
<div
|
||||||
width: 100%;
|
v-for="(info, BDIndex) in BDList"
|
||||||
display: grid;
|
:key="BDIndex"
|
||||||
grid-template-columns: repeat(2, 1fr);
|
style="
|
||||||
gap: 12px;
|
box-shadow: 0 0 4px 0 #00000066;
|
||||||
padding: 15px;
|
padding: 10px;
|
||||||
"
|
border-radius: 10px;
|
||||||
>
|
margin-bottom: 10px;
|
||||||
<div v-for="(product, index) in productList" :key="index" @click="showSendDialog(product)">
|
transition: all 0.3s ease-out;
|
||||||
<div
|
"
|
||||||
style="
|
@click="showUserInfo(BDIndex)"
|
||||||
background-color: white;
|
>
|
||||||
border-radius: 10px;
|
<!-- 基本信息 -->
|
||||||
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
|
<div style="display: flex; justify-content: space-between">
|
||||||
display: flex;
|
<div style="display: flex; align-items: center">
|
||||||
flex-direction: column;
|
<img src="../assets/icon/coin.png" alt="" style="width: 36px; border-radius: 50%" />
|
||||||
align-items: center;
|
<div style="margin-left: 8px">
|
||||||
"
|
<div style="font-weight: 700">{{ info.name }}</div>
|
||||||
>
|
<div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">ID:{{ info.id }}</div>
|
||||||
<img :src="product.cover" alt="虚拟商品" style="width: 60%; margin: 10px 0" />
|
</div>
|
||||||
<button
|
</div>
|
||||||
style="
|
<div style="display: flex; align-items: center">
|
||||||
background-color: #bb92ff;
|
<img
|
||||||
color: white;
|
src="../assets/icon/arrow.png"
|
||||||
margin-bottom: 10px;
|
alt=""
|
||||||
border: 0;
|
style="width: 24px; transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)"
|
||||||
border-radius: 20px;
|
:class="{ rotated: BDIndex == selectedBDIndex }"
|
||||||
padding: 5px 10px;
|
/>
|
||||||
"
|
</div>
|
||||||
>
|
|
||||||
Send
|
|
||||||
</button>
|
|
||||||
</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.host }}</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.agency }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 弹窗 -->
|
<!-- agency列表 -->
|
||||||
<!-- 遮罩层 -->
|
<div style="padding: 10px" v-show="activeIndex == 1">
|
||||||
<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;
|
box-shadow: 0 0 4px 0 #00000066;
|
||||||
background-color: white;
|
padding: 10px;
|
||||||
display: flex;
|
border-radius: 10px;
|
||||||
flex-direction: column;
|
margin-bottom: 10px;
|
||||||
align-items: center;
|
transition: all 0.3s ease-out;
|
||||||
border-radius: 20px;
|
|
||||||
"
|
"
|
||||||
@click.stop
|
|
||||||
>
|
>
|
||||||
<img :src="selectedGoods.cover" alt="" style="width: 60%; margin: 5px 0" />
|
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge for the month:</div>
|
||||||
<div style="font-weight: 600; font-size: 16px; margin: 10px 0">
|
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">${{ rechargeDetail.total }}</div>
|
||||||
<span style="color: #00000080; margin-right: 10px">Validity:</span>
|
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge last month:</div>
|
||||||
<span style="font-weight: 700">7day</span>
|
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
||||||
|
${{ rechargeDetail.lastMonth }}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</div>
|
||||||
<input
|
<div
|
||||||
type="text"
|
v-for="(agency, aIndex) in agencyList"
|
||||||
placeholder="Enter user ID"
|
:key="aIndex"
|
||||||
style="
|
style="
|
||||||
height: 36px;
|
box-shadow: 0 0 4px 0 #00000066;
|
||||||
width: 171px;
|
padding: 10px;
|
||||||
border-radius: 8px;
|
border-radius: 10px;
|
||||||
border: 0;
|
margin-bottom: 10px;
|
||||||
background-color: #f1f1f1b2;
|
transition: all 0.3s ease-out;
|
||||||
padding: 8px;
|
"
|
||||||
margin-right: 4px;
|
@click="showAgencyInfo(aIndex)"
|
||||||
font-size: 14px;
|
>
|
||||||
font-weight: 590;
|
<!-- 基本信息 -->
|
||||||
"
|
<div style="display: flex; justify-content: space-between">
|
||||||
v-model="targetUserId"
|
<div style="display: flex; align-items: center">
|
||||||
/>
|
<img src="../assets/icon/coin.png" alt="" style="width: 36px; border-radius: 50%" />
|
||||||
<button
|
<div style="margin-left: 8px">
|
||||||
style="
|
<div style="font-weight: 700">{{ agency.name }}</div>
|
||||||
height: 36px;
|
<div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">ID:{{ agency.id }}</div>
|
||||||
width: 72px;
|
</div>
|
||||||
border-radius: 8px;
|
</div>
|
||||||
border: 0;
|
<div style="display: flex; align-items: center">
|
||||||
padding: 8px;
|
<img
|
||||||
background-color: #bb92ff;
|
src="../assets/icon/arrow.png"
|
||||||
color: white;
|
alt=""
|
||||||
font-size: 14px;
|
style="width: 24px; transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)"
|
||||||
font-weight: 590;
|
:class="{ rotated: aIndex == selectedAgencyIndex }"
|
||||||
"
|
/>
|
||||||
@click="sendGoods"
|
</div>
|
||||||
>
|
|
||||||
Confirm
|
|
||||||
</button>
|
|
||||||
</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)">${{ agency.thisMonth }}</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)">${{ agency.lastMonth }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -153,39 +163,31 @@ import { onMounted, ref, computed } from "vue";
|
|||||||
import { getAdminCenterList, giveProps } from "@/api/itemDistribution";
|
import { getAdminCenterList, giveProps } from "@/api/itemDistribution";
|
||||||
import { searchUser } from "@/api/userInfo";
|
import { searchUser } from "@/api/userInfo";
|
||||||
import { showError, showWarning, showInfo, showSuccess } from "@/utils/toast.js";
|
import { showError, showWarning, showInfo, showSuccess } from "@/utils/toast.js";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
const tabList = ref([
|
const tabList = ref([
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
name: "Frames",
|
name: "BD",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
name: "Vehicles",
|
name: "Recharge Agency",
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: "Chat Box",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: "Theme",
|
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const activeIndex = ref(0);
|
const activeIndex = ref(0);
|
||||||
const currentTab = ref("Frames"); //选中名字
|
|
||||||
const tabItems = ref([]); // 存储标签DOM引用
|
const tabItems = ref([]); // 存储标签DOM引用
|
||||||
|
|
||||||
// 选择标签
|
// 选择标签
|
||||||
const setActiveTab = (index) => {
|
const setActiveTab = (index) => {
|
||||||
if (activeIndex.value != index) {
|
if (activeIndex.value != index) {
|
||||||
console.log("切换标签");
|
console.log("切换标签");
|
||||||
productList.value = []; //置空商品列表
|
|
||||||
activeIndex.value = index;
|
activeIndex.value = index;
|
||||||
currentTab.value = tabList.value[index].name;
|
selectedBDIndex.value = -1;
|
||||||
|
selectedAgencyIndex.value = -1;
|
||||||
loadProps();
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -205,58 +207,53 @@ const underlineStyle = computed(() => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
const targetUserId = ref("");
|
const selectedBDIndex = ref(-1); //选中的BD用户下标
|
||||||
|
const showUserInfo = (index) => {
|
||||||
|
selectedBDIndex.value = selectedBDIndex.value != index ? index : -1;
|
||||||
|
}; //选中的BD用户
|
||||||
|
|
||||||
const sendGoods = async () => {
|
const selectedAgencyIndex = ref(-1); //选中的agency用户下标
|
||||||
console.log("赠送用户id：", targetUserId.value);
|
const showAgencyInfo = (index) => {
|
||||||
console.log("赠送商品：", selectedGoods.value);
|
selectedAgencyIndex.value = selectedAgencyIndex.value != index ? index : -1;
|
||||||
|
}; //选中的agency用户
|
||||||
|
|
||||||
try {
|
const send = async () => {
|
||||||
const targetUserInfo = await searchUser(targetUserId.value);
|
router.push({ path: "/item-distribution" });
|
||||||
console.log("targetUserInfo:", targetUserInfo);
|
|
||||||
if (targetUserInfo.status && targetUserInfo.body) {
|
|
||||||
const data = {
|
|
||||||
propsId: selectedGoods.value.id,
|
|
||||||
acceptUserId: targetUserInfo.body.id,
|
|
||||||
};
|
|
||||||
const res = await giveProps(data);
|
|
||||||
if (res.errorCode == 0 && res.status) {
|
|
||||||
closedPopup();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log("error:", error);
|
|
||||||
// 信息提示id有误
|
|
||||||
showWarning("User info not found");
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 选中的标签
|
const BDList = ref([
|
||||||
const getPropsType = () => {
|
{
|
||||||
const typeMap = {
|
name: "BD1",
|
||||||
Frames: "AVATAR_FRAME",
|
id: "123",
|
||||||
Vehicles: "RIDE",
|
host: "111",
|
||||||
"Chat Box": "CHAT_BUBBLE",
|
agency: "222",
|
||||||
Theme: "THEME",
|
},
|
||||||
};
|
{
|
||||||
return typeMap[currentTab.value];
|
name: "BD2",
|
||||||
};
|
id: "456",
|
||||||
|
host: "333",
|
||||||
|
agency: "444",
|
||||||
|
},
|
||||||
|
]); // BD列表
|
||||||
|
const agencyList = ref([
|
||||||
|
{
|
||||||
|
name: "agency1",
|
||||||
|
id: "666",
|
||||||
|
thisMonth: "112",
|
||||||
|
lastMonth: "223",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "agency2",
|
||||||
|
id: "777",
|
||||||
|
thisMonth: "334",
|
||||||
|
lastMonth: "445",
|
||||||
|
},
|
||||||
|
]); // 代理列表
|
||||||
|
|
||||||
// 获取商品列表
|
const rechargeDetail = ref({
|
||||||
const loadProps = async () => {
|
total: "123456",
|
||||||
try {
|
lastMonth: "12345",
|
||||||
const params = {
|
}); //代理消费金额
|
||||||
propsType: getPropsType(),
|
|
||||||
currencyType: "GOLD",
|
|
||||||
};
|
|
||||||
const response = await getAdminCenterList(params);
|
|
||||||
console.log("response:", response);
|
|
||||||
productList.value = response.body;
|
|
||||||
} catch (error) {
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
console.log("onMounted");
|
console.log("onMounted");
|
||||||
@ -264,34 +261,7 @@ onMounted(() => {
|
|||||||
if (tabItems.value.length > 0) {
|
if (tabItems.value.length > 0) {
|
||||||
underlineStyle.value; // 触发计算属性更新
|
underlineStyle.value; // 触发计算属性更新
|
||||||
}
|
}
|
||||||
loadProps();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 虚拟商品数据
|
|
||||||
const productList = ref([]);
|
|
||||||
|
|
||||||
// 选中商品
|
|
||||||
const selectedGoods = ref({});
|
|
||||||
|
|
||||||
// 获取本地图片
|
|
||||||
const getImageUrl = (imgUrl) => {
|
|
||||||
return new URL(imgUrl, import.meta.url).href;
|
|
||||||
};
|
|
||||||
|
|
||||||
const dialogshow = ref(false);
|
|
||||||
// 展示弹窗
|
|
||||||
const showSendDialog = (product) => {
|
|
||||||
console.log("product:", product);
|
|
||||||
selectedGoods.value = product;
|
|
||||||
dialogshow.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 关闭弹窗
|
|
||||||
const closedPopup = () => {
|
|
||||||
selectedGoods.value = {};
|
|
||||||
targetUserId.value = "";
|
|
||||||
dialogshow.value = false;
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -304,7 +274,21 @@ const closedPopup = () => {
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-item .active {
|
.info-fade-enter-from,
|
||||||
color: #3498db; /* 激活态文字颜色 */
|
.info-fade-leave-to {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-fade-enter-active {
|
||||||
|
transition: all 0.5s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-fade-leave-active {
|
||||||
|
transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotated {
|
||||||
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -303,8 +303,4 @@ const closedPopup = () => {
|
|||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-item .active {
|
|
||||||
color: #3498db; /* 激活态文字颜色 */
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user