feat(新页面): 添加BD的增送礼物页
This commit is contained in:
hzj
parent
1a03169dac
commit
94fb8b77f2
@ -95,3 +95,41 @@ export const getBdHistoryMore = async (billBelong) => {
|
||||
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'),
|
||||
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.MESSAGE, // 消息功能
|
||||
INVITATION_PAGES.INVITE_AGENCY, //邀请代理
|
||||
'/bd-item-distribution', //赠送商品页面
|
||||
'/team-member',
|
||||
'/history-salary',
|
||||
'/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