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>
|
||||
<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
|
||||
style="
|
||||
@ -36,112 +42,116 @@
|
||||
></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="
|
||||
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>
|
||||
<!-- 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="../assets/icon/coin.png" alt="" style="width: 36px; border-radius: 50%" />
|
||||
<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>
|
||||
</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: 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.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
|
||||
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"
|
||||
>
|
||||
<!-- agency列表 -->
|
||||
<div style="padding: 10px" v-show="activeIndex == 1">
|
||||
<div
|
||||
style="
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 4px 0 #00000066;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease-out;
|
||||
"
|
||||
@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">7day</span>
|
||||
<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)">${{ rechargeDetail.total }}</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)">
|
||||
${{ rechargeDetail.lastMonth }}
|
||||
</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;
|
||||
background-color: #bb92ff;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 590;
|
||||
"
|
||||
@click="sendGoods"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</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="../assets/icon/coin.png" 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.id }}</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)">${{ 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>
|
||||
@ -153,39 +163,31 @@ import { onMounted, ref, computed } from "vue";
|
||||
import { getAdminCenterList, giveProps } from "@/api/itemDistribution";
|
||||
import { searchUser } from "@/api/userInfo";
|
||||
import { showError, showWarning, showInfo, showSuccess } from "@/utils/toast.js";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const tabList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "Frames",
|
||||
name: "BD",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Vehicles",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Chat Box",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Theme",
|
||||
name: "Recharge Agency",
|
||||
},
|
||||
]);
|
||||
|
||||
const activeIndex = ref(0);
|
||||
const currentTab = ref("Frames"); //选中名字
|
||||
const tabItems = ref([]); // 存储标签DOM引用
|
||||
|
||||
// 选择标签
|
||||
const setActiveTab = (index) => {
|
||||
if (activeIndex.value != index) {
|
||||
console.log("切换标签");
|
||||
productList.value = []; //置空商品列表
|
||||
activeIndex.value = index;
|
||||
currentTab.value = tabList.value[index].name;
|
||||
|
||||
loadProps();
|
||||
selectedBDIndex.value = -1;
|
||||
selectedAgencyIndex.value = -1;
|
||||
}
|
||||
};
|
||||
|
||||
@ -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 () => {
|
||||
console.log("赠送用户id：", targetUserId.value);
|
||||
console.log("赠送商品：", selectedGoods.value);
|
||||
const selectedAgencyIndex = ref(-1); //选中的agency用户下标
|
||||
const showAgencyInfo = (index) => {
|
||||
selectedAgencyIndex.value = selectedAgencyIndex.value != index ? index : -1;
|
||||
}; //选中的agency用户
|
||||
|
||||
try {
|
||||
const targetUserInfo = await searchUser(targetUserId.value);
|
||||
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 send = async () => {
|
||||
router.push({ path: "/item-distribution" });
|
||||
};
|
||||
|
||||
// 选中的标签
|
||||
const getPropsType = () => {
|
||||
const typeMap = {
|
||||
Frames: "AVATAR_FRAME",
|
||||
Vehicles: "RIDE",
|
||||
"Chat Box": "CHAT_BUBBLE",
|
||||
Theme: "THEME",
|
||||
};
|
||||
return typeMap[currentTab.value];
|
||||
};
|
||||
const BDList = ref([
|
||||
{
|
||||
name: "BD1",
|
||||
id: "123",
|
||||
host: "111",
|
||||
agency: "222",
|
||||
},
|
||||
{
|
||||
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 loadProps = async () => {
|
||||
try {
|
||||
const params = {
|
||||
propsType: getPropsType(),
|
||||
currencyType: "GOLD",
|
||||
};
|
||||
const response = await getAdminCenterList(params);
|
||||
console.log("response:", response);
|
||||
productList.value = response.body;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
const rechargeDetail = ref({
|
||||
total: "123456",
|
||||
lastMonth: "12345",
|
||||
}); //代理消费金额
|
||||
|
||||
onMounted(() => {
|
||||
console.log("onMounted");
|
||||
@ -264,34 +261,7 @@ onMounted(() => {
|
||||
if (tabItems.value.length > 0) {
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
@ -304,7 +274,21 @@ const closedPopup = () => {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.tab-item .active {
|
||||
color: #3498db; /* 激活态文字颜色 */
|
||||
.info-fade-enter-from,
|
||||
.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>
|
||||
|
||||
@ -303,8 +303,4 @@ const closedPopup = () => {
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.tab-item .active {
|
||||
color: #3498db; /* 激活态文字颜色 */
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user