feat(新页面): 添加BD的增送礼物页
This commit is contained in:
hzj
parent
1a03169dac
commit
94fb8b77f2
@ -95,3 +95,41 @@ export const getBdHistoryMore = async (billBelong) => {
|
|||||||
throw error
|
throw error
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// BD 可赠送道具详情
|
||||||
|
export const getBDPropsList = async (params) => {
|
||||||
|
try {
|
||||||
|
const response = await get(
|
||||||
|
`/sys/bd/props?propsType=${params.propsType}¤cyType=${params.currencyType}`,
|
||||||
|
)
|
||||||
|
return response
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch admin center list:', error)
|
||||||
|
console.error('error:' + error.response.errorMsg)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 是否有指定道具类型的权限
|
||||||
|
export const hasSendGiftsPermission = async (propsType) => {
|
||||||
|
try {
|
||||||
|
const response = await get(`/sys/bd/own-permission?propsType=${propsType}`)
|
||||||
|
return response
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch has send gifts permission:', error)
|
||||||
|
console.error('error:' + error.response.errorMsg)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// BD 赠送道具.
|
||||||
|
export const giveProps = async (data) => {
|
||||||
|
try {
|
||||||
|
const response = await post('/sys/bd/send', data)
|
||||||
|
return response
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch give props:', error)
|
||||||
|
console.error('error:' + error.response.errorMsg)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -117,6 +117,12 @@ const router = createRouter({
|
|||||||
component: () => import('../views/BDCenter/policy.vue'),
|
component: () => import('../views/BDCenter/policy.vue'),
|
||||||
meta: { requiresAuth: true },
|
meta: { requiresAuth: true },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/bd-item-distribution',
|
||||||
|
name: 'bd-item-distribution',
|
||||||
|
component: () => import('../views/BDCenter/ItemDistribution.vue'),
|
||||||
|
meta: { requiresAuth: true },
|
||||||
|
},
|
||||||
|
|
||||||
// 金币代理页面
|
// 金币代理页面
|
||||||
{
|
{
|
||||||
|
|||||||
@ -114,6 +114,7 @@ export const ROLE_PERMISSIONS = {
|
|||||||
PAGES.EXCHANGE, // 兑换功能
|
PAGES.EXCHANGE, // 兑换功能
|
||||||
PAGES.MESSAGE, // 消息功能
|
PAGES.MESSAGE, // 消息功能
|
||||||
INVITATION_PAGES.INVITE_AGENCY, //邀请代理
|
INVITATION_PAGES.INVITE_AGENCY, //邀请代理
|
||||||
|
'/bd-item-distribution', //赠送商品页面
|
||||||
'/team-member',
|
'/team-member',
|
||||||
'/history-salary',
|
'/history-salary',
|
||||||
'/available-income', //操作收益页
|
'/available-income', //操作收益页
|
||||||
|
|||||||
392
src/views/BDCenter/ItemDistribution.vue
Normal file
392
src/views/BDCenter/ItemDistribution.vue
Normal file
@ -0,0 +1,392 @@
|
|||||||
|
<template>
|
||||||
|
<div class="fullPage">
|
||||||
|
<div class="bg">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<GeneralHeader
|
||||||
|
:showLanguageList="true"
|
||||||
|
:title="t('item_distribution')"
|
||||||
|
color="black"
|
||||||
|
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 标签 -->
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
background-color: transparent;
|
||||||
|
position: relative;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in tabList"
|
||||||
|
:key="index"
|
||||||
|
style="font-size: 1.3em; padding: 10px 0; flex: 1; text-align: center"
|
||||||
|
class="tab-item"
|
||||||
|
:class="activeIndex == index ? 'tabName-active' : 'tabName'"
|
||||||
|
ref="tabItems"
|
||||||
|
@click="setActiveTab(index)"
|
||||||
|
>
|
||||||
|
{{ t(item.name) }}
|
||||||
|
</div>
|
||||||
|
<!-- 下划线元素 -->
|
||||||
|
<div
|
||||||
|
style="width: 15px; height: 3px; background-color: #bb92ff"
|
||||||
|
:style="underlineStyle"
|
||||||
|
></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;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ t('send') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 弹窗 -->
|
||||||
|
<!-- 遮罩层 -->
|
||||||
|
<maskLayer :maskLayerShow="dialogshow" @click="closedPopup">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
padding: 20px;
|
||||||
|
background-color: white;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin: 20% 5%;
|
||||||
|
"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<img :src="selectedGoods.cover" alt="" style="width: 60%; margin: 5px 0" />
|
||||||
|
<div style="font-weight: 600; margin: 10px 0">
|
||||||
|
<span style="color: #00000080; margin-right: 10px">{{ t('validity') }}:</span>
|
||||||
|
<span style="font-weight: 700; color: #000">{{ validityPeriod }}{{ t('day') }}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
width: 90%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
:placeholder="t('enter_user_id_placeholder')"
|
||||||
|
style="
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
align-self: stretch;
|
||||||
|
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 0;
|
||||||
|
outline: none;
|
||||||
|
background-color: #f1f1f1b2;
|
||||||
|
padding: 8px;
|
||||||
|
margin-right: 4px;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 590;
|
||||||
|
"
|
||||||
|
v-model="targetUserId"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
style="
|
||||||
|
width: auto;
|
||||||
|
min-width: 0;
|
||||||
|
align-self: stretch;
|
||||||
|
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 0;
|
||||||
|
padding: 8px;
|
||||||
|
color: white;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 590;
|
||||||
|
"
|
||||||
|
:style="{ backgroundColor: confirmClick ? '#bb92ff' : '#00000080' }"
|
||||||
|
@click="sendGoods"
|
||||||
|
>
|
||||||
|
{{ t('confirm') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</maskLayer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, ref, computed } from 'vue'
|
||||||
|
import { showWarning, showSuccess } from '@/utils/toast.js'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
|
import { getBDPropsList, giveProps, hasSendGiftsPermission } from '@/api/bdCenter'
|
||||||
|
import { searchUser } from '@/api/userInfo'
|
||||||
|
|
||||||
|
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||||
|
import maskLayer from '@/components/MaskLayer.vue'
|
||||||
|
|
||||||
|
const { t, locale } = useI18n()
|
||||||
|
|
||||||
|
const tabList = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'frames',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'vehicles',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// id: 3,
|
||||||
|
// name: 'chat_box',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// id: 4,
|
||||||
|
// name: 'theme',
|
||||||
|
// },
|
||||||
|
])
|
||||||
|
|
||||||
|
const activeIndex = ref(0)
|
||||||
|
const currentTab = ref('frames') //选中名字
|
||||||
|
const tabItems = ref([]) // 存储标签DOM引用
|
||||||
|
|
||||||
|
const confirmClick = ref(true)
|
||||||
|
|
||||||
|
// 选择标签
|
||||||
|
const setActiveTab = (index) => {
|
||||||
|
if (activeIndex.value != index) {
|
||||||
|
console.log('切换标签')
|
||||||
|
productList.value = [] //置空商品列表
|
||||||
|
activeIndex.value = index
|
||||||
|
currentTab.value = tabList.value[index].name
|
||||||
|
|
||||||
|
loadProps()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算下划线样式
|
||||||
|
const underlineStyle = computed(() => {
|
||||||
|
console.log('计算属性')
|
||||||
|
|
||||||
|
// 访问 locale.value 使其成为依赖项
|
||||||
|
const currentLocale = locale.value
|
||||||
|
console.log('当前语言:', currentLocale)
|
||||||
|
|
||||||
|
if (tabItems.value.length === 0) return {} //没有这个元素
|
||||||
|
const activeTab = tabItems.value[activeIndex.value]
|
||||||
|
console.log('选中元素的左边距', activeTab.offsetLeft)
|
||||||
|
|
||||||
|
return {
|
||||||
|
position: 'absolute',
|
||||||
|
left: `${activeTab.offsetLeft + activeTab.offsetWidth / 2 - 15 / 2}px`,
|
||||||
|
bottom: '0',
|
||||||
|
transition: 'left 0.3s ease', // 平滑过渡
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const targetUserId = ref('')
|
||||||
|
|
||||||
|
// 检查是否有赠送某个栏目商品的资格
|
||||||
|
const getHasSendVIPPermission = async (propsType) => {
|
||||||
|
const response = await hasSendGiftsPermission(propsType)
|
||||||
|
console.log('response:', response)
|
||||||
|
return response.body
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendGoods = async () => {
|
||||||
|
if (confirmClick.value) {
|
||||||
|
confirmClick.value = false
|
||||||
|
|
||||||
|
console.log('赠送用户id：', targetUserId.value)
|
||||||
|
console.log('赠送商品：', selectedGoods.value)
|
||||||
|
|
||||||
|
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()
|
||||||
|
showSuccess(t('gift_delivery_successful'))
|
||||||
|
} else {
|
||||||
|
confirmClick.value = true
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
confirmClick.value = true
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log('error:', error)
|
||||||
|
// 信息提示id有误
|
||||||
|
showWarning(error.response.errorMsg)
|
||||||
|
confirmClick.value = true
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选中的标签
|
||||||
|
const getPropsType = () => {
|
||||||
|
const typeMap = {
|
||||||
|
frames: 'AVATAR_FRAME',
|
||||||
|
vehicles: 'RIDE',
|
||||||
|
chat_box: 'CHAT_BUBBLE',
|
||||||
|
theme: 'THEME',
|
||||||
|
vip: 'NOBLE_VIP',
|
||||||
|
}
|
||||||
|
return typeMap[currentTab.value]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取商品列表
|
||||||
|
const loadProps = async () => {
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
propsType: getPropsType(),
|
||||||
|
currencyType: 'GOLD',
|
||||||
|
}
|
||||||
|
const response = await getBDPropsList(params)
|
||||||
|
console.log('response:', response)
|
||||||
|
productList.value = response.body
|
||||||
|
} catch (error) {
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 虚拟商品数据
|
||||||
|
const productList = ref([])
|
||||||
|
|
||||||
|
// 选中商品
|
||||||
|
const selectedGoods = ref({})
|
||||||
|
|
||||||
|
const validityPeriod = computed(() => {
|
||||||
|
return currentTab.value == 'VIP' ? '3' : '7'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取本地图片
|
||||||
|
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 = () => {
|
||||||
|
confirmClick.value = true
|
||||||
|
selectedGoods.value = {}
|
||||||
|
targetUserId.value = ''
|
||||||
|
dialogshow.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
console.log('onMounted')
|
||||||
|
|
||||||
|
// 检查是否有赠送VIP的资格
|
||||||
|
if (getHasSendVIPPermission('NOBLE_VIP')) {
|
||||||
|
tabList.value.push({
|
||||||
|
id: 3,
|
||||||
|
name: 'vip',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (tabItems.value.length > 0) {
|
||||||
|
underlineStyle.value // 触发计算属性更新
|
||||||
|
}
|
||||||
|
loadProps()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
* {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullPage {
|
||||||
|
background-color: #ffffff;
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-image: url(../../assets/images/Azizi/secondBg.png);
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabName {
|
||||||
|
color: #00000066;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabName-active {
|
||||||
|
color: black;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 360px) {
|
||||||
|
* {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 360px) {
|
||||||
|
* {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
* {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1024px) {
|
||||||
|
* {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user