Megghy/vtsuru.live
1
0
Fork 0
mirror of https://github.com/Megghy/vtsuru.live.git synced 2025-12-07 02:46:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

update point views

Browse Source
This commit is contained in:
Megghy
2024-02-18 19:57:28 +08:00
parent 144f24b004
commit 535c2d7516
13 changed files with 715 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/BiliAuthView.vue
View File

@@ -117,7 +117,7 @@ onMounted(async () => {
<template>
<NFlex justify="center" align="center" style="height: 100vh">
<NCard embedded style="margin: 20px">
<NCard embedded style="margin: 20px; max-width: 1100px">
<template #header> Bilibili 身份验证 </template>
<NFlex :wrap="false">
<NSteps :current="currentStep + 1" vertical style="max-width: 300px">
@@ -134,7 +134,14 @@ onMounted(async () => {
<NInput :value="startModel?.code" :allow-input="() => false" />
<NButton @click="copyCode"> 复制认证码 </NButton>
</NInputGroup>
<NButton type="primary" tag="a" :href="'https://live.bilibili.com/' + startModel?.targetRoomId" target="_blank"> 前往直播间 </NButton>
<NButton
type="primary"
tag="a"
:href="'https://live.bilibili.com/' + startModel?.targetRoomId"
target="_blank"
>
前往直播间
</NButton>
</template>
<NAlert v-else type="error">
认证超时
@@ -169,10 +176,16 @@ onMounted(async () => {
</template>
<template v-else-if="currentStep == 2">
<NFlex justify="center" align="center" vertical style="width: 100%">
<NAlert type="success"> 你已完成验证! 请妥善保存你的登陆链接, 请勿让其他人获取. 丢失后可以再次通过认证流程获得 </NAlert>
<NAlert type="success">
你已完成验证! 请妥善保存你的登陆链接, 请勿让其他人获取. 丢失后可以再次通过认证流程获得
</NAlert>
<NText> 你的登陆链接为: </NText>
<NInputGroup>
<NInput :value="`https://vtsuru.live/bili-user?auth=${biliToken}`" type="textarea" :allow-input="() => false" />
<NInput
:value="`https://vtsuru.live/bili-user?auth=${biliToken}`"
type="textarea"
:allow-input="() => false"
/>
<NButton @click="copyCode" type="info" style="height: 100%"> 复制登陆链接 </NButton>
</NInputGroup>
<NFlex>

35
src/views/IndexView.vue
View File

@@ -1,6 +1,14 @@
<script setup lang="ts">
import vtb from '@/svgs/ic_vtuber.svg'
import { Lottery24Filled, MoneyOff24Filled, MoreHorizontal24Filled, TabletSpeaker24Filled, VehicleShip24Filled, VideoAdd20Filled } from '@vicons/fluent'
import {
BookCoins20Filled,
Lottery24Filled,
MoneyOff24Filled,
MoreHorizontal24Filled,
TabletSpeaker24Filled,
VehicleShip24Filled,
VideoAdd20Filled,
} from '@vicons/fluent'
import { AnalyticsSharp, Calendar, Chatbox, ListCircle, MusicalNote } from '@vicons/ionicons5'
import { useWindowSize } from '@vueuse/core'
import { NButton, NDivider, NGradientText, NGrid, NGridItem, NIcon, NSpace, NText } from 'naive-ui'
@@ -13,6 +21,11 @@ const functions = [
desc: '能够记录并查询上舰和SC记录',
icon: VehicleShip24Filled,
},
{
name: '积分兑换 (将于3月11日上线',
desc: '通过上舰, Superchat, 赠送礼物等操作可以获取积分, 并通过积分兑换虚拟或者实体礼物',
icon: BookCoins20Filled,
},
{
name: '日程表',
desc: '提供多种样式的日程表',
@@ -110,7 +123,15 @@ const iconColor = 'white'
<NSpace justify="center">
<NButton type="primary" size="large" @click="$router.push({ name: 'manage-index' })"> 开始使用 </NButton>
<NButton size="large" @click="$router.push('/user/Megghy')"> 展示 </NButton>
<NButton size="large" tag="a" href="https://play-live.bilibili.com/details/1698742711771" target="_blank" color="#ff778f"> 幻星平台 </NButton>
<NButton
size="large"
tag="a"
href="https://play-live.bilibili.com/details/1698742711771"
target="_blank"
color="#ff778f"
>
幻星平台
</NButton>
<NButton type="info" size="large" @click="$router.push({ name: 'about' })"> 关于 </NButton>
</NSpace>
</NSpace>
@@ -130,7 +151,15 @@ const iconColor = 'white'
<NSpace style="position: absolute; bottom: 0; margin: 0 auto; width: 100vw" justify="center">
<span style="color: white">
BY
<NButton tag="a" href="https://space.bilibili.com/10021741" target="_blank" text style="color: rgb(215, 245, 230)"> Megghy </NButton>
<NButton
tag="a"
href="https://space.bilibili.com/10021741"
target="_blank"
text
style="color: rgb(215, 245, 230)"
>
Megghy
</NButton>
</span>
</NSpace>
</div>

18
src/views/ManageLayout.vue
View File

@@ -7,6 +7,7 @@ import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
import { ACCOUNT_API_URL } from '@/data/constants'
import { useMusicRequestProvider } from '@/store/useMusicRequest'
import {
BookCoins20Filled,
CalendarClock24Filled,
Chat24Filled,
Info24Filled,
@@ -112,6 +113,21 @@ const menuOptions = [
disabled: accountInfo.value?.isEmailVerified == false,
icon: renderIcon(VehicleShip24Filled),
},
{
label: () =>
h(
RouterLink,
{
to: {
name: 'manage-point',
},
},
{ default: () => '积分和礼物' },
),
key: 'manage-point',
disabled: accountInfo.value?.isEmailVerified == false,
icon: renderIcon(BookCoins20Filled),
},
{
label: () =>
h(
@@ -501,7 +517,7 @@ onMounted(() => {
反馈
</NTooltip>
</NSpace>
<NButton v-if="false" @click="gotoAuthPage()" type="info" secondary>
<NButton v-if="accountInfo.biliUserAuthInfo" @click="gotoAuthPage()" type="info" secondary>
<template #icon>
<NIcon :component="BrowsersOutline" />
</template>

94
src/views/ViewerLayout.vue
View File

@@ -1,11 +1,12 @@
<!-- eslint-disable vue/component-name-in-template-casing -->
<script setup lang="ts">
import { isDarkMode } from '@/Utils'
import { NavigateToNewTab, isDarkMode } from '@/Utils'
import { useAccount } from '@/api/account'
import { FunctionTypes, ThemeType, UserInfo } from '@/api/api-models'
import { useUser } from '@/api/user'
import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
import { FETCH_API } from '@/data/constants'
import { useAuthStore } from '@/store/useAuthStore'
import { CalendarClock24Filled, Wallet24Filled } from '@vicons/fluent'
import { Chatbox, Home, Moon, MusicalNote, Sunny } from '@vicons/ionicons5'
import { useElementSize, useStorage } from '@vueuse/core'
@@ -28,6 +29,7 @@ import {
NSpin,
NSwitch,
NText,
useMessage,
} from 'naive-ui'
import { computed, h, onMounted, ref } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
@@ -41,6 +43,8 @@ const themeType = useStorage('Settings.Theme', ThemeType.Auto)
const userInfo = ref<UserInfo>()
const biliUserInfo = ref()
const accountInfo = useAccount()
const useAuth = useAuthStore()
const message = useMessage()
const notfount = ref(false)
@@ -53,16 +57,28 @@ function renderIcon(icon: unknown) {
}
const menuOptions = ref<MenuOption[]>()
async function RequestBiliUserData() {
await fetch(FETCH_API + `https://account.bilibili.com/api/member/getCardByMid?mid=${userInfo.value?.biliId}`).then(async (respone) => {
let data = await respone.json()
if (data.code == 0) {
biliUserInfo.value = data.card
} else {
throw new Error('Bili User API Error: ' + data.message)
}
})
await fetch(FETCH_API + `https://account.bilibili.com/api/member/getCardByMid?mid=${userInfo.value?.biliId}`).then(
async (respone) => {
let data = await respone.json()
if (data.code == 0) {
biliUserInfo.value = data.card
} else {
throw new Error('Bili User API Error: ' + data.message)
}
},
)
}
function gotoAuthPage() {
if (!accountInfo.value?.biliUserAuthInfo) {
message.error('你尚未进行 Bilibili 认证, 请前往面板进行认证和绑定')
return
}
useAuthStore()
.setCurrentAuth(accountInfo.value?.biliUserAuthInfo.token)
.then(() => {
NavigateToNewTab('/bili-user')
})
}
onMounted(async () => {
userInfo.value = await useUser(id.value?.toString())
if (!userInfo.value) {
@@ -161,7 +177,12 @@ onMounted(async () => {
<NPageHeader :subtitle="($route.meta.title as string) ?? ''" style="margin-top: 6px">
<template #extra>
<NSpace align="center">
<NSwitch :default-value="!isDarkMode()" @update:value="(value: string & number & boolean) => (themeType = value ? ThemeType.Light : ThemeType.Dark)">
<NSwitch
:default-value="!isDarkMode()"
@update:value="
(value: string & number & boolean) => (themeType = value ? ThemeType.Light : ThemeType.Dark)
"
>
<template #checked>
<NIcon :component="Sunny" />
</template>
@@ -170,10 +191,35 @@ onMounted(async () => {
</template>
</NSwitch>
<template v-if="accountInfo">
<NButton style="right: 0px; position: relative" type="primary" @click="$router.push({ name: 'manage-index' })" size="small"> 个人中心 </NButton>
<NSpace>
<NButton
v-if="useAuth.isAuthed || accountInfo.biliUserAuthInfo"
style="right: 0px; position: relative"
type="primary"
@click="gotoAuthPage"
size="small"
secondary
>
认证用户中心
</NButton>
<NButton
style="right: 0px; position: relative"
type="primary"
@click="$router.push({ name: 'manage-index' })"
size="small"
>
个人中心
</NButton>
</NSpace>
</template>
<template v-else>
<NButton style="right: 0px; position: relative" type="primary" @click="registerAndLoginModalVisiable = true"> 注册 / 登陆 </NButton>
<NButton
style="right: 0px; position: relative"
type="primary"
@click="registerAndLoginModalVisiable = true"
>
注册 / 登陆
</NButton>
</template>
</NSpace>
</template>
@@ -185,7 +231,16 @@ onMounted(async () => {
</NPageHeader>
</NLayoutHeader>
<NLayout has-sider style="height: calc(100vh - 50px)">
<NLayoutSider ref="sider" show-trigger default-collapsed collapse-mode="width" :collapsed-width="64" :width="180" :native-scrollbar="false" style="height: 100%">
<NLayoutSider
ref="sider"
show-trigger
default-collapsed
collapse-mode="width"
:collapsed-width="64"
:width="180"
:native-scrollbar="false"
style="height: 100%"
>
<Transition>
<div v-if="biliUserInfo" style="margin-top: 8px">
<NSpace vertical justify="center" align="center">
@@ -194,7 +249,9 @@ onMounted(async () => {
:img-props="{ referrerpolicy: 'no-referrer' }"
round
bordered
:style="{ boxShadow: isDarkMode() ? 'rgb(195 192 192 / 35%) 0px 0px 8px' : '0 2px 3px rgba(0, 0, 0, 0.1)' }"
:style="{
boxShadow: isDarkMode() ? 'rgb(195 192 192 / 35%) 0px 0px 8px' : '0 2px 3px rgba(0, 0, 0, 0.1)',
}"
/>
<NEllipsis v-if="width > 100" style="max-width: 100%">
<NText strong>
@@ -204,7 +261,12 @@ onMounted(async () => {
</NSpace>
</div>
</Transition>
<NMenu :default-value="$route.name?.toString()" :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
<NMenu
:default-value="$route.name?.toString()"
:collapsed-width="64"
:collapsed-icon-size="22"
:options="menuOptions"
/>
<NSpace v-if="width > 150" justify="center" align="center" vertical>
<NText depth="3">
有更多功能建议请

70
src/views/manage/DashboardView.vue
View File

@@ -266,10 +266,13 @@ onUnmounted(() => {
<template>
<NSpace justify="center" align="center" vertical style="width: 100%">
<NAlert type="info">
当前本站正在测试为粉丝数大于 1000 或至少拥有一位舰长的主播直接从服务端记录并储存弹幕数据, 不过并不清楚B站的风控策略, 此功能不一定会长期启用
当前本站正在测试为粉丝数大于 1000 或至少拥有一位舰长的主播直接从服务端记录并储存弹幕数据,
不过并不清楚B站的风控策略, 此功能不一定会长期启用
<br />
在我们被限制连接之前满足以上条件的主播无需部署
<NButton tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank" type="primary" text> VtsuruEventFetcher </NButton>
<NButton tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank" type="primary" text>
VtsuruEventFetcher
</NButton>
即可使用相关功能 (如记录上舰和SC, 直播场记录等) 😊
</NAlert>
<NCard embedded style="width: 100%">
@@ -296,7 +299,14 @@ onUnmounted(() => {
<template v-else>
<NTag type="error" size="small"> 未认证 </NTag>
</template>
<NButton v-if="accountInfo?.isEmailVerified" type="warning" size="tiny" @click="resetEmailModalVisiable = true"> 修改邮箱 </NButton>
<NButton
v-if="accountInfo?.isEmailVerified"
type="warning"
size="tiny"
@click="resetEmailModalVisiable = true"
>
修改邮箱
</NButton>
</NSpace>
</NCard>
<NCard size="small">
@@ -305,13 +315,28 @@ onUnmounted(() => {
<NText style="color: var(--primary-color)">
<NSpace :size="5" align="center">
已认证 | {{ accountInfo?.biliId }}
<NTag v-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Active" type="success" size="small" :bordered="false">
<NTag
v-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Active"
type="success"
size="small"
:bordered="false"
>
身份码: 有效
</NTag>
<NTag v-else-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Inactive" type="error" size="small" :bordered="false">
<NTag
v-else-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Inactive"
type="error"
size="small"
:bordered="false"
>
身份码: 需更新
</NTag>
<NTag v-else-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Notfound" type="warning" size="small" :bordered="false">
<NTag
v-else-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Notfound"
type="warning"
size="small"
:bordered="false"
>
身份码: 需绑定
<NTooltip>
<template #trigger>
@@ -332,7 +357,7 @@ onUnmounted(() => {
</NEllipsis>
<template v-else>
<NTag type="error" size="small">
未认证
未绑定
<NTooltip>
<template #trigger>
<NIcon :component="Info24Filled" />
@@ -344,7 +369,7 @@ onUnmounted(() => {
<NButton size="small" @click="bindBiliCodeModalVisiable = true" type="info"> 进行绑定 </NButton>
</template>
</NCard>
<NCard size="small" v-if="false">
<NCard size="small">
用户 Bilibili 账户:
<NEllipsis v-if="accountInfo?.biliUserAuthInfo" style="max-width: 100%">
<NText style="color: var(--primary-color)">
@@ -370,7 +395,7 @@ onUnmounted(() => {
</NTooltip>
</NTag>
<NDivider vertical />
<NButton size="small" @click="bindBiliAuthModalVisiable = true" type="info"> 进行绑定 </NButton>
<NButton size="small" @click="bindBiliAuthModalVisiable = true" type="info"> 进行认证 </NButton>
</template>
</NCard>
<EventFetcherStatusCard />
@@ -428,7 +453,12 @@ onUnmounted(() => {
<NButton @click="resetName" type="warning" :loading="isLoading"> 确定修改 </NButton>
</template>
</NModal>
<NModal v-model:show="bindBiliCodeModalVisiable" preset="card" title="绑定/更新身份码" style="width: 400px; max-width: 90%">
<NModal
v-model:show="bindBiliCodeModalVisiable"
preset="card"
title="绑定/更新身份码"
style="width: 400px; max-width: 90%"
>
<NSpace vertical>
<NInputGroup>
<NInput v-model:value="biliCode" placeholder="身份码" />
@@ -448,13 +478,25 @@ onUnmounted(() => {
</NInputGroup>
</NSpace>
<template #footer>
<NButton @click="accountInfo?.isBiliVerified ? ChangeBili() : BindBili()" type="success" :loading="!token || isLoading"> 确定 </NButton>
<NButton
@click="accountInfo?.isBiliVerified ? ChangeBili() : BindBili()"
type="success"
:loading="!token || isLoading"
>
确定
</NButton>
</template>
</NModal>
<NModal v-model:show="bindBiliAuthModalVisiable" preset="card" title="绑定用户账户" style="width: 700px; max-width: 90%">
<NModal
v-model:show="bindBiliAuthModalVisiable"
preset="card"
title="绑定用户账户"
style="width: 700px; max-width: 90%"
>
<NSpace vertical>
<NAlert title="获取认证链接" type="info">
因为部分功能如积分兑换等也需要对没有注册本站账户的用户开放, 所以需要现在另一个页面获取认证链接, 然后再回到这里绑定
因为部分功能如积分兑换等也需要对没有注册本站账户的用户开放, 所以需要现在另一个页面获取认证链接,
然后再回到这里绑定
</NAlert>
<NInputGroup>
<NInput v-model:value="biliAuthText" placeholder="认证链接, 或者 Token" />
@@ -466,7 +508,7 @@ onUnmounted(() => {
<Question24Regular />
</NIcon>
</template>
前往获取
前往认证
</NButton>
</template>
直接粘贴认证完成后给出的类似

14
src/views/manage/HistoryView.vue
View File

@@ -318,14 +318,12 @@ function getOptions() {
},
data: chartData.hourlyCounts,
itemStyle: {
normal: {
color: function (data: any) {
if (completeTimeSeries[data.dataIndex].change) {
return '#18a058'
} else {
return '#5470C6'
}
},
color: function (data: any) {
if (completeTimeSeries[data.dataIndex].change) {
return '#18a058'
} else {
return '#5470C6'
}
},
},
},

156
src/views/manage/point/PointManage.vue
View File

@@ -1,7 +1,14 @@
<script setup lang="ts">
import { getBase64, getImageUploadModel } from '@/Utils'
import { DisableFunction, EnableFunction, useAccount } from '@/api/account'
import { ResponsePointGoodModel, FunctionTypes, PointGoodsModel, GoodsTypes, GoodsStatus, TagInfo } from '@/api/api-models'
import {
ResponsePointGoodModel,
FunctionTypes,
PointGoodsModel,
GoodsTypes,
GoodsStatus,
TagInfo,
} from '@/api/api-models'
import { QueryGetAPI, QueryPostAPI } from '@/api/query'
import PointGoodsItem from '@/components/manage/PointGoodsItem.vue'
import { FILE_BASE_URL, POINT_API_URL } from '@/data/constants'
@@ -49,6 +56,7 @@ import { cloneFnJSON } from '@vueuse/core'
import { useAuthStore } from '@/store/useAuthStore'
import PointSettings from './PointSettings.vue'
import { useRouteHash } from '@vueuse/router'
import EventFetcherStatusCard from '@/components/EventFetcherStatusCard.vue'
const message = useMessage()
const accountInfo = useAccount()
@@ -60,7 +68,7 @@ const realHash = useRouteHash('goods', {
})
const hash = computed({
get() {
return realHash.value?.slice(1) ?? ''
return realHash.value?.startsWith('#') ? realHash.value.slice(1) : realHash.value || 'goods'
},
set(val) {
realHash.value = '#' + val
@@ -77,7 +85,9 @@ const defaultGoodsModel = {
} as PointGoodsModel,
fileList: [],
} as { goods: PointGoodsModel; fileList: UploadFileInfo[] }
const currentGoodsModel = ref<{ goods: PointGoodsModel; fileList: UploadFileInfo[] }>(JSON.parse(JSON.stringify(defaultGoodsModel)))
const currentGoodsModel = ref<{ goods: PointGoodsModel; fileList: UploadFileInfo[] }>(
JSON.parse(JSON.stringify(defaultGoodsModel)),
)
const showAddGoodsModal = ref(false)
@@ -93,6 +103,10 @@ const rules = {
required: true,
message: '请输入礼物价格',
},
'goods.type': {
required: true,
message: '请选择是虚拟礼物或实物',
},
content: {
required: true,
message: '请输入虚拟礼物的具体内容',
@@ -102,10 +116,11 @@ const rules = {
},
privacy: {
required: true,
message: '需要阅读并同意本站隐私政策',
message: '需要阅读并同意本站隐私协议',
validator: (rule: FormItemRule, value: boolean) => {
return (
(currentGoodsModel.value.goods.type != GoodsTypes.Physical && currentGoodsModel.value.goods.collectUrl != undefined) ||
(currentGoodsModel.value.goods.type != GoodsTypes.Physical &&
currentGoodsModel.value.goods.collectUrl != undefined) ||
isAllowedPrivacyPolicy.value
)
},
@@ -114,7 +129,22 @@ const rules = {
required: true,
message: '需要输入最大购买数量',
validator: (rule: FormItemRule, value: number) => {
return currentGoodsModel.value.goods.type != GoodsTypes.Physical || (currentGoodsModel.value.goods.maxBuyCount ?? 0) > 0
return (
currentGoodsModel.value.goods.type != GoodsTypes.Physical ||
(currentGoodsModel.value.goods.maxBuyCount ?? 0) > 0
)
},
},
'goods.url': {
required: true,
message: '请输入收集收货地址的链接',
validator: (rule: FormItemRule, value: string) => {
try {
new URL(value)
return true
} catch (err) {
return false
}
},
},
}
@@ -179,6 +209,7 @@ async function updateGoods(e: MouseEvent) {
if (currentGoodsModel.value.fileList.length > 0) {
currentGoodsModel.value.goods.cover = await getImageUploadModel(currentGoodsModel.value.fileList)
}
console.log(currentGoodsModel.value.goods)
await QueryPostAPI<ResponsePointGoodModel>(POINT_API_URL + 'update-goods', currentGoodsModel.value.goods)
.then((data) => {
if (data.code == 200) {
@@ -220,7 +251,7 @@ function onUpdateClick(item: ResponsePointGoodModel) {
currentGoodsModel.value = {
goods: {
...item,
count: item.count ?? 0,
count: item.count,
cover: undefined,
},
fileList: item.cover
@@ -313,23 +344,40 @@ function resetGoods() {
}
function responseGoodsToModel(goods: ResponsePointGoodModel) {}
onMounted(() => {
if (!hash.value) {
hash.value = 'goods'
}
})
onMounted(() => {})
</script>
<template>
<NAlert type="info">
启用积分系统
<NSwitch :value="accountInfo?.settings.enableFunctions.includes(FunctionTypes.Point)" @update:value="setFunctionEnable" />
<br />
<NText depth="3">
此功能需要部署
<NButton text type="primary" tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank"> VtsuruEventFetcher </NButton>
</NText>
</NAlert>
<NFlex style="width: 100%">
<NAlert type="info" style="min-width: 400px">
启用
<NButton text type="primary" tag="a" href="https://www.yuque.com/megghy/dez70g/ohulp2torghlqqn8" target="_blank">
积分系统
</NButton>
<NDivider vertical />
<NSwitch
:value="accountInfo?.settings.enableFunctions.includes(FunctionTypes.Point)"
@update:value="setFunctionEnable"
/>
<br />
<NText depth="3">
此功能需要部署
<NButton
text
type="primary"
tag="a"
href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p"
target="_blank"
>
VtsuruEventFetcher
</NButton>
, 否则将无法记录各种事件
</NText>
</NAlert>
<EventFetcherStatusCard style="flex: 1" />
</NFlex>
<br />
<NAlert type="success"> 此功能将于 3月11日 官方启用 OpenId 后正式上线 </NAlert>
<NDivider />
<NTabs animated v-model:value="hash">
<NTabPane name="goods" tab="礼物">
@@ -337,13 +385,17 @@ onMounted(() => {
<NButton type="primary" @click="onModalOpen"> 添加礼物 </NButton>
</NFlex>
<NDivider />
<NGrid cols="1 500:2 700:3 1000:4 1200:5" :x-gap="12" :y-gap="8">
<NEmpty v-if="goods.filter((g) => g.status != GoodsStatus.Discontinued).length == 0" description="暂无礼物" />
<NGrid v-else cols="1 500:2 700:3 1000:4 1200:5" :x-gap="12" :y-gap="8">
<NGridItem v-for="item in goods.filter((g) => g.status != GoodsStatus.Discontinued)" :key="item.id">
<PointGoodsItem :goods="item">
<template #footer>
<span> 价格: {{ item.price }} </span>
<NFlex>
<NButton type="info" size="small" @click="onUpdateClick(item)"> 修改 </NButton>
<NButton type="warning" size="small" @click="onSetShelfClick(item, GoodsStatus.Discontinued)"> 下架 </NButton>
<NButton type="warning" size="small" @click="onSetShelfClick(item, GoodsStatus.Discontinued)">
下架
</NButton>
<NButton type="error" size="small" @click="onDeleteClick(item)"> 删除 </NButton>
</NFlex>
</template>
@@ -351,11 +403,15 @@ onMounted(() => {
</NGridItem>
</NGrid>
<NDivider>已下架</NDivider>
<NEmpty v-if="goods.filter((g) => g.status == GoodsStatus.Discontinued).length == 0" description="暂无已下架的物品" />
<NEmpty
v-if="goods.filter((g) => g.status == GoodsStatus.Discontinued).length == 0"
description="暂无已下架的礼物"
/>
<NGrid v-else cols="1 500:2 700:3 1000:4 1200:5" :x-gap="12" :y-gap="8">
<NGridItem v-for="item in goods.filter((g) => g.status == GoodsStatus.Discontinued)" :key="item.id">
<PointGoodsItem :goods="item">
<template #footer>
<span> 价格: {{ item.price }} </span>
<NFlex>
<NButton type="info" size="small" @click="onUpdateClick(item)"> 修改 </NButton>
<NButton type="success" size="small" @click="onSetShelfClick(item, GoodsStatus.Normal)"> 上架 </NButton>
@@ -396,20 +452,25 @@ onMounted(() => {
</NFormItem>
<NFormItem path="goods.count" label="库存">
<NCheckbox
:checked="currentGoodsModel.goods.count && currentGoodsModel.goods.count < 0"
@update:checked="(v) => (currentGoodsModel.goods.count = v ? -1 : 100)"
:checked="!currentGoodsModel.goods.count"
@update:checked="(v) => (currentGoodsModel.goods.count = v ? undefined : 100)"
>
不限
</NCheckbox>
<NInputNumber
v-if="currentGoodsModel.goods.count > -1"
v-if="currentGoodsModel.goods.count"
v-model:value="currentGoodsModel.goods.count"
placeholder="可选, 礼物库存"
style="max-width: 120px"
/>
</NFormItem>
<NFormItem path="goods.description" label="描述">
<NInput v-model:value="currentGoodsModel.goods.description" placeholder="可选, 礼物描述" maxlength="500" type="textarea" />
<NInput
v-model:value="currentGoodsModel.goods.description"
placeholder="可选, 礼物描述"
maxlength="500"
type="textarea"
/>
</NFormItem>
<NFormItem path="goods.tags" label="标签">
<NSelect
@@ -446,12 +507,16 @@ onMounted(() => {
</NFormItem>
<template v-if="currentGoodsModel.goods.type == GoodsTypes.Physical">
<NFormItem path="settings" label="选项">
<NCheckbox v-model:checked="currentGoodsModel.goods.isAllowRebuy">允许重复购买</NCheckbox>
<NCheckbox v-model:checked="currentGoodsModel.goods.isAllowRebuy">允许重复兑换</NCheckbox>
</NFormItem>
<NFormItem path="goods.maxBuyCount" label="最大购买数量">
<NInputNumber v-model:value="currentGoodsModel.goods.maxBuyCount" placeholder="必填, 最大购买数量" min="1" />
<NFormItem path="goods.maxBuyCount" label="最大兑换数量">
<NInputNumber
v-model:value="currentGoodsModel.goods.maxBuyCount"
placeholder="必填, 最大兑换数量"
min="1"
/>
</NFormItem>
<NFormItem path="goods.collectUrl" label="收货地址">
<NFormItem path="address" label="收货地址">
<NFlex vertical>
<NRadioGroup
:value="currentGoodsModel.goods.collectUrl == undefined ? 0 : 1"
@@ -471,15 +536,21 @@ onMounted(() => {
</NFlex>
</NFormItem>
<template v-if="currentGoodsModel.goods.collectUrl != undefined">
<NFormItem path="goods.url" label="收集链接">
<NFormItem path="goods.collectUrl" label="收集链接">
<NFlex vertical style="width: 100%">
<NInput v-model:value="currentGoodsModel.goods.collectUrl" placeholder="用于给用户填写自己收货地址的表格的分享链接" maxlength="300" />
<NCheckbox v-model:checked="currentGoodsModel.goods.embedCollectUrl"> 尝试将收集链接嵌入到网页中 </NCheckbox>
<NInput
v-model:value="currentGoodsModel.goods.collectUrl"
placeholder="用于给用户填写自己收货地址的表格的分享链接"
maxlength="300"
/>
<NCheckbox v-model:checked="currentGoodsModel.goods.embedCollectUrl">
尝试将收集链接嵌入到网页中
</NCheckbox>
</NFlex>
</NFormItem>
</template>
<template v-else>
<NFormItem path="privacy" label="隐私策略" required>
<NFormItem path="privacy" label="隐私协议" required>
<NCheckbox v-model:checked="isAllowedPrivacyPolicy"> 同意本站隐私协议 </NCheckbox>
</NFormItem>
</template>
@@ -495,10 +566,19 @@ onMounted(() => {
虚拟礼物的具体内容, 网盘链接什么之类的
</NTooltip>
</template>
<NInput v-model:value="currentGoodsModel.goods.content" type="textarea" placeholder="写这里咯" maxlength="10000" show-count clearable />
<NInput
v-model:value="currentGoodsModel.goods.content"
type="textarea"
placeholder="写这里咯"
maxlength="10000"
show-count
clearable
/>
</NFormItem>
</template>
<NButton @click="updateGoods" type="primary" :loading="isUpdating"> {{ currentGoodsModel.goods.id ? '修改' : '创建' }} </NButton>
<NButton @click="updateGoods" type="primary" :loading="isUpdating">
{{ currentGoodsModel.goods.id ? '修改' : '创建' }}
</NButton>
</NForm>
</NScrollbar>
</NModal>

52
src/views/pointViews/PointGoodsView.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import { NavigateToNewTab } from '@/Utils'
import { useAccount } from '@/api/account'
import {
AddressInfo,
GoodsTypes,
@@ -18,6 +20,7 @@ import {
NCard,
NDataTable,
NDivider,
NEmpty,
NFlex,
NForm,
NFormItem,
@@ -48,8 +51,10 @@ const props = defineProps<{
userInfo: UserInfo
biliInfo: any
}>()
const router = useRouter()
const useAuth = useAuthStore()
const accountInfo = useAccount()
const isLoading = ref(false)
const message = useMessage()
const dialog = useDialog()
@@ -96,7 +101,11 @@ function getTooltip(goods: ResponsePointGoodModel) {
async function buyGoods() {
if (buyCount.value < 1) {
message.error('兑换数量不能小于1')
} else if (!selectedAddress.value && currentGoods.value?.type == GoodsTypes.Physical) {
} else if (
!selectedAddress.value &&
currentGoods.value?.type == GoodsTypes.Physical &&
!currentGoods.value.collectUrl
) {
message.error('请选择收货地址')
} else if (!Number.isInteger(buyCount.value)) {
message.error('兑换数量必须为整数')
@@ -117,7 +126,7 @@ async function buyGoods() {
positiveText: '前往查看',
negativeText: '我知道了',
onPositiveClick: () => {
useRouter().push({ name: 'PointOrderView', params: { id: data.data.id } })
router.push({ name: 'bili-user', hash: '#orders' })
},
onNegativeClick: () => {
showBuyModal.value = false
@@ -161,6 +170,17 @@ const renderOption = ({ node, option }: { node: any; option: SelectOption }) =>
() => h(AddressDisplay, { address: biliAuth.value.address?.find((a) => a.id == option.value) }),
)
}
function gotoAuthPage() {
if (!accountInfo.value?.biliUserAuthInfo) {
message.error('你尚未进行 Bilibili 认证, 请前往面板进行认证和绑定')
return
}
useAuthStore()
.setCurrentAuth(accountInfo.value?.biliUserAuthInfo.token)
.then(() => {
NavigateToNewTab('/bili-user')
})
}
onMounted(async () => {
if (props.userInfo && useAuth.isAuthed) {
@@ -186,13 +206,17 @@ onMounted(async () => {
立即认证
</NButton>
</NAlert>
<NCard v-else>
<NCard v-else style="max-width: 600px" embedded hoverable>
<template #header> 你好, {{ useAuth.biliAuth.name }} </template>
<template #header-extra>
<NButton type="info" @click="gotoAuthPage" secondary size="small"> 前往认证用户中心 </NButton>
</template>
<NText> 你在 {{ userInfo.extra?.streamerInfo?.name ?? userInfo.name }} 的直播间的积分为 {{ currentPoint }} </NText>
</NCard>
<NDivider />
<NSpin :show="isLoading">
<NGrid cols="1 500:2 700:3 1000:4 1200:5" x-gap="12" y-gap="8">
<NEmpty v-if="goods.length == 0"> 暂无礼物 </NEmpty>
<NGrid v-else cols="1 500:2 700:3 1000:4 1200:5" x-gap="12" y-gap="8">
<NGridItem v-for="item in goods" :key="item.id">
<PointGoodsItem :goods="item">
<template #footer>
@@ -235,9 +259,23 @@ onMounted(async () => {
<NDivider> 选项 </NDivider>
<NForm>
<NFormItem label="兑换数量" required
><NInputNumber v-model:value="buyCount" :min="1" style="max-width: 120px" step="1" :precision="0" />
><NInputNumber
v-model:value="buyCount"
:min="1"
:max="currentGoods.maxBuyCount ?? 100000"
style="max-width: 120px"
step="1"
:precision="0"
/>
</NFormItem>
<NFormItem label="收货地址" required>
<NFormItem
v-if="
currentGoods.type == GoodsTypes.Physical &&
(currentGoods.collectUrl == null || currentGoods.collectUrl == undefined)
"
label="收货地址"
required
>
<NSelect
v-model:show="showAddressSelect"
:value="selectedAddress?.id"
@@ -246,6 +284,8 @@ onMounted(async () => {
:render-option="renderOption"
placeholder="请选择地址"
/>
&nbsp;
<NButton size="small" type="info" tag="a" href="/bili-user#settings" target="_blank"> 管理收货地址 </NButton>
</NFormItem>
</NForm>
</template>

22
src/views/pointViews/PointUserLayout.vue
View File

@@ -28,7 +28,7 @@ import PointUserHistoryView from './PointUserHistoryView.vue'
import PointUserSettings from './PointUserSettings.vue'
import { useRouteHash } from '@vueuse/router'
import PointOrderView from './PointOrderView.vue'
import { useRoute } from 'vue-router'
import { useRoute, useRouter } from 'vue-router'
const useAuth = useAuthStore()
const message = useMessage()
@@ -43,6 +43,7 @@ const hash = computed({
realHash.value = '#' + val
},
})
const router = useRouter()
const biliAuth = computed(() => useAuth.biliAuth)
const isLoading = ref(false)
@@ -58,12 +59,23 @@ const pointColumn = [
key: 'points',
},
{
title: '详情',
title: '更多',
key: 'action',
render: (row: { owner: UserInfo; points: number }) => {
return h(NButton, {
onClick: () => {},
})
return h(NFlex, {}, () => [
h(
NButton,
{
onClick: () => {
router.push({ name: 'user-goods', params: { id: row.owner.name } })
},
size: 'small',
secondary: true,
type: 'info',
},
() => '查看礼物',
),
])
},
},
]