update point views

This commit is contained in:
2024-02-18 19:57:28 +08:00
parent 144f24b004
commit 535c2d7516
13 changed files with 715 additions and 135 deletions

View File

@@ -551,6 +551,8 @@ export interface ResponsePointGoodModel {
type: GoodsTypes type: GoodsTypes
isAllowRebuy: boolean isAllowRebuy: boolean
maxBuyCount?: number maxBuyCount?: number
collectUrl?: string
embedCollectUrl?: boolean
} }
export interface ImageUploadModel { export interface ImageUploadModel {
existImages: string[] existImages: string[]
@@ -559,7 +561,7 @@ export interface ImageUploadModel {
export interface PointGoodsModel { export interface PointGoodsModel {
id?: number id?: number
name: string name: string
count: number count?: number
price: number price: number
tags: string[] tags: string[]
cover?: ImageUploadModel cover?: ImageUploadModel
@@ -630,6 +632,9 @@ export interface ResponsePointOrder2UserModel {
goods: ResponsePointGoodModel goods: ResponsePointGoodModel
status: PointOrderStatus status: PointOrderStatus
createAt: number createAt: number
trackingNumber?: string
expressCompany?: string
} }
export enum PointOrderStatus { export enum PointOrderStatus {
Pending, // 订单正在等待处理 Pending, // 订单正在等待处理

View File

@@ -8,7 +8,7 @@ const accountInfo = useAccount()
const status = computed(() => { const status = computed(() => {
if (!accountInfo.value) return 'error' if (!accountInfo.value) return 'error'
if (accountInfo.value.eventFetcherOnline == true) { if (accountInfo.value.eventFetcherOnline == true || accountInfo.value.isServerFetcherOnline == true) {
if (accountInfo.value.eventFetcherStatus) { if (accountInfo.value.eventFetcherStatus) {
return 'warning' return 'warning'
} else if (Object.keys(accountInfo.value.eventFetcherStatusV3 ?? {}).length > 0) { } else if (Object.keys(accountInfo.value.eventFetcherStatusV3 ?? {}).length > 0) {
@@ -34,19 +34,29 @@ const status = computed(() => {
<br /> <br />
事件上传到本站后允许按照自定义范围进行查询, 并导出为 CSV 之类的表格 事件上传到本站后允许按照自定义范围进行查询, 并导出为 CSV 之类的表格
<br /> <br />
<NButton type="info" size="small" tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank"> 关于 EVENT-FETCHER </NButton> <NButton
type="info"
size="small"
tag="a"
href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p"
target="_blank"
>
关于 EVENT-FETCHER
</NButton>
</NTooltip> </NTooltip>
</template> </template>
<NTooltip v-if="status != 'info'"> <template v-if="status != 'info' && !accountInfo?.isServerFetcherOnline">
<template #trigger> <NTooltip>
<NTag size="small" :color="{ borderColor: 'white', textColor: 'white', color: '#4b6159' }"> <template #trigger>
<NIcon :component="FlashCheckmark16Filled" /> <NTag size="small" :color="{ borderColor: 'white', textColor: 'white', color: '#4b6159' }">
{{ accountInfo?.eventFetcherVersion ?? '未知' }} <NIcon :component="FlashCheckmark16Filled" />
</NTag> {{ accountInfo?.eventFetcherVersion ?? '未知' }}
</template> </NTag>
你所使用的版本 </template>
</NTooltip> 你所使用的版本
<NDivider vertical/> </NTooltip>
<NDivider vertical />
</template>
<NTag :type="status"> <NTag :type="status">
<template v-if="accountInfo?.eventFetcherOnline == true && accountInfo?.eventFetcherStatus"> <template v-if="accountInfo?.eventFetcherOnline == true && accountInfo?.eventFetcherStatus">
此版本已过期, 请更新 此版本已过期, 请更新
@@ -54,26 +64,40 @@ const status = computed(() => {
<template #trigger> <template #trigger>
<NButton type="warning" size="tiny"> 关于 </NButton> <NButton type="warning" size="tiny"> 关于 </NButton>
</template> </template>
Node.js 版已不再更新, 如果是 Docker 的话请切换至 ghcr.io/megghy/vtsurueventfetcher.net, 其他环境请下载 https://github.com/Megghy/VtsuruEventFetcher.Net/releases/latest Node.js 版已不再更新, 如果是 Docker 的话请切换至 ghcr.io/megghy/vtsurueventfetcher.net, 其他环境请下载
https://github.com/Megghy/VtsuruEventFetcher.Net/releases/latest
</NTooltip> </NTooltip>
</template> </template>
<template v-else> <template v-else>
<template v-if="status == 'success'"> <template v-if="status == 'success'">
运行中 | 今日已接收 <NText>
{{ accountInfo?.isServerFetcherOnline ? '正在由本站提供监听服务' : '运行中' }}
</NText>
| 今日已接收
<NText color="white" strong> <NText color="white" strong>
{{ accountInfo?.eventFetcherTodayReceive }} {{ accountInfo?.eventFetcherTodayReceive }}
</NText> </NText>
</template> </template>
<template v-else-if="status == 'warning'"> <template v-else-if="status == 'warning'">
<template v-if="accountInfo?.eventFetcherStatusV3"> 异常: {{ Object.values(accountInfo.eventFetcherStatusV3).join('; ') }} </template> <template v-if="accountInfo?.eventFetcherStatusV3">
异常: {{ Object.values(accountInfo.eventFetcherStatusV3).join('; ') }}
</template>
</template> </template>
<template v-else-if="status == 'info'"> 未连接 </template> <template v-else-if="status == 'info'"> 未连接 </template>
</template> </template>
</NTag> </NTag>
<template v-if="accountInfo?.eventFetcherOnline != true"> <template v-if="accountInfo?.eventFetcherOnline != true">
<NDivider vertical /> <NDivider vertical />
<NButton type="info" size="small" tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank"> 关于 EVENT-FETCHER </NButton> <NButton
type="info"
size="tiny"
tag="a"
href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p"
target="_blank"
>
关于 EVENT-FETCHER
</NButton>
</template> </template>
</NAlert> </NAlert>
</template> </template>

View File

@@ -1,12 +1,28 @@
<script setup lang="ts"> <script setup lang="ts">
import { DataTableColumns, NDataTable, NDivider, NFlex, NTag, NText, NTime, NTooltip } from 'naive-ui' import {
import { h } from 'vue' DataTableColumns,
import { EventDataTypes, PointFrom, ResponsePointHisrotyModel } from '@/api/api-models' NButton,
NDataTable,
NDivider,
NFlex,
NInput,
NModal,
NTag,
NText,
NTime,
NTooltip,
} from 'naive-ui'
import { h, ref } from 'vue'
import { EventDataTypes, PointFrom, ResponsePointGoodModel, ResponsePointHisrotyModel } from '@/api/api-models'
import PointGoodsItem from './PointGoodsItem.vue'
const props = defineProps<{ const props = defineProps<{
histories: ResponsePointHisrotyModel[] histories: ResponsePointHisrotyModel[]
}>() }>()
const showGoodsModal = ref(false)
const currentGoods = ref<ResponsePointGoodModel>()
const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [
{ {
title: '时间', title: '时间',
@@ -23,7 +39,11 @@ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [
title: '积分变动', title: '积分变动',
key: 'point', key: 'point',
render: (row: ResponsePointHisrotyModel) => { render: (row: ResponsePointHisrotyModel) => {
return h(NText, { style: { color: row.from === PointFrom.Use ? 'red' : 'green' } }, () => (row.from === PointFrom.Use ? '' : '+') + row.point) return h(
NText,
{ style: { color: row.from === PointFrom.Use ? 'red' : 'green' } },
() => (row.from === PointFrom.Use ? '' : '+') + row.point,
)
}, },
}, },
{ {
@@ -38,7 +58,7 @@ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [
value: PointFrom.Danmaku, value: PointFrom.Danmaku,
}, },
{ {
label: '手动', label: '主播赠予',
value: PointFrom.Manual, value: PointFrom.Manual,
}, },
{ {
@@ -52,7 +72,7 @@ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [
case PointFrom.Danmaku: case PointFrom.Danmaku:
return h(NTag, { type: 'info', bordered: false, size: 'small' }, () => '直播间') return h(NTag, { type: 'info', bordered: false, size: 'small' }, () => '直播间')
case PointFrom.Manual: case PointFrom.Manual:
return h(NTag, { type: 'success', bordered: false, size: 'small' }, () => '手动') return h(NTag, { type: 'success', bordered: false, size: 'small' }, () => '主播赠予')
case PointFrom.Use: case PointFrom.Use:
return h(NTag, { type: 'warning', bordered: false, size: 'small' }, () => '使用') return h(NTag, { type: 'warning', bordered: false, size: 'small' }, () => '使用')
} }
@@ -71,33 +91,52 @@ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [
case EventDataTypes.Guard: case EventDataTypes.Guard:
return h(NFlex, { justify: 'center', align: 'center' }, () => [ return h(NFlex, { justify: 'center', align: 'center' }, () => [
h(NTag, { type: 'info', size: 'small' }, () => '上舰'), h(NTag, { type: 'info', size: 'small' }, () => '上舰'),
h(NDivider, { vertical: true, style: { margin: '0' } }),
row.extra?.msg, row.extra?.msg,
]) ])
case EventDataTypes.Gift: case EventDataTypes.Gift:
return h(NFlex, { justify: 'center' }, () => [ return h(NFlex, { justify: 'center' }, () => [
h(NTag, { type: 'info', size: 'small', style: { margin: '0' } }, () => '礼物'), h(NTag, { type: 'info', size: 'small', style: { margin: '0' } }, () => '礼物'),
h(NDivider, { vertical: true }),
row.extra?.msg, row.extra?.msg,
]) ])
case EventDataTypes.SC: case EventDataTypes.SC:
return h(NFlex, { justify: 'center' }, () => [ return h(NFlex, { justify: 'center' }, () => [
h(NTag, { type: 'info', size: 'small', style: { margin: '0' } }, () => 'SC'), h(NTag, { type: 'info', size: 'small', style: { margin: '0' } }, () => 'SC'),
h(NDivider, { vertical: true }),
row.extra?.price, row.extra?.price,
]) ])
} }
case PointFrom.Manual: case PointFrom.Manual:
return h(NFlex, { align: 'center' }, () => [ return h(NFlex, { align: 'center' }, () => [
h(NTag, { type: 'info', size: 'small', style: { margin: '0' } }, () => '备注'), h(NTag, { type: 'info', size: 'small', style: { margin: '0' } }, () => '来自'),
h(NDivider, { vertical: true }), h(
h(NText, { depth: 3 }, () => row.extra ?? h(NText, { italic: true, depth: '3' }, () => '未提供')), NButton,
{
tag: 'a',
href: '/user/' + row.extra.user?.name,
target: '_blank',
text: true,
type: 'info',
secondary: true,
},
() => row.extra.user?.name,
),
h(NTag, { type: 'info', size: 'small', style: { margin: '0' }, bordered: false }, () => '备注'),
h(NText, {}, () => row.extra.reason ?? h(NText, { italic: true, depth: '3' }, () => '未提供')),
]) ])
case PointFrom.Use: case PointFrom.Use:
return h(NFlex, { align: 'center' }, () => [ return h(NFlex, { align: 'center' }, () => [
h(NTag, { type: 'success', size: 'small', style: { margin: '0' }, strong: true }, () => '购买'), h(NTag, { type: 'success', size: 'small', style: { margin: '0' }, strong: true }, () => '兑换'),
h(NDivider, { vertical: true }), h(
row.extra, NButton,
{
text: true,
type: 'info',
onClick: () => {
currentGoods.value = row.extra
showGoodsModal.value = true
},
},
() => row.extra?.name,
),
]) ])
} }
}, },
@@ -112,4 +151,11 @@ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [
:pagination="{ showSizePicker: true, pageSizes: [10, 25, 50, 100], defaultPageSize: 10, size: 'small' }" :pagination="{ showSizePicker: true, pageSizes: [10, 25, 50, 100], defaultPageSize: 10, size: 'small' }"
> >
</NDataTable> </NDataTable>
<NModal v-model:show="showGoodsModal" preset="card" title="礼物详情 (快照)" style="max-width: 400px; height: auto">
<PointGoodsItem :goods="currentGoods" />
<template v-if="currentGoods?.content">
<NDivider> 礼物内容 </NDivider>
<NInput :value="currentGoods?.content" type="textarea" readonly placeholder="无内容" />
</template>
</NModal>
</template> </template>

View File

@@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { import {
GoodsStatus,
GoodsTypes, GoodsTypes,
PointOrderStatus, PointOrderStatus,
ResponsePointGoodModel, ResponsePointGoodModel,
@@ -8,6 +9,8 @@ import {
} from '@/api/api-models' } from '@/api/api-models'
import { import {
DataTableColumns, DataTableColumns,
DataTableRowKey,
NAutoComplete,
NButton, NButton,
NCard, NCard,
NDataTable, NDataTable,
@@ -15,17 +18,25 @@ import {
NFlex, NFlex,
NIcon, NIcon,
NInput, NInput,
NInputGroup,
NInputGroupLabel,
NModal, NModal,
NScrollbar, NScrollbar,
NStep,
NSteps,
NTag, NTag,
NText, NText,
NTime, NTime,
NTooltip, NTooltip,
useDialog,
useMessage,
} from 'naive-ui' } from 'naive-ui'
import { computed, h, ref, watch } from 'vue' import { computed, h, onMounted, ref, watch } from 'vue'
import AddressDisplay from './AddressDisplay.vue' import AddressDisplay from './AddressDisplay.vue'
import PointGoodsItem from './PointGoodsItem.vue' import PointGoodsItem from './PointGoodsItem.vue'
import { Info24Filled } from '@vicons/fluent' import { Info24Filled } from '@vicons/fluent'
import { QueryPostAPI } from '@/api/query'
import { POINT_API_URL } from '@/data/constants'
const props = defineProps<{ const props = defineProps<{
order: ResponsePointOrder2UserModel[] | ResponsePointOrder2OwnerModel[] order: ResponsePointOrder2UserModel[] | ResponsePointOrder2OwnerModel[]
@@ -33,6 +44,9 @@ const props = defineProps<{
goods?: ResponsePointGoodModel[] goods?: ResponsePointGoodModel[]
loading?: boolean loading?: boolean
}>() }>()
const message = useMessage()
const dialog = useDialog()
const isLoading = ref(false) const isLoading = ref(false)
watch( watch(
() => props.loading, () => props.loading,
@@ -46,6 +60,7 @@ const orderAsUser = computed(() => {
const orderAsOwner = computed(() => { const orderAsOwner = computed(() => {
return props.order as ResponsePointOrder2OwnerModel[] return props.order as ResponsePointOrder2OwnerModel[]
}) })
const selectedItem = ref<DataTableRowKey[]>()
const showDetailModal = ref(false) const showDetailModal = ref(false)
const orderDetail = ref<ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel>() const orderDetail = ref<ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel>()
@@ -55,8 +70,32 @@ const currentGoods = computed(() => {
//@ts-ignore //@ts-ignore
else return props.goods.find((g) => g.id == orderDetail.value.goodsId) else return props.goods.find((g) => g.id == orderDetail.value.goodsId)
}) })
const expressOptions = computed(() => {
if (!orderAsOwner.value) return []
return orderAsOwner.value.map((o) => ({
label: o.expressCompany,
value: o.expressCompany,
}))
})
const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel> = [ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel> = [
{
type: 'selection',
disabled: () => props.type == 'user',
options: [
'all',
'none',
{
label: '选中未发货的',
key: 'f2',
onSelect: (pageData) => {
selectedItem.value = pageData.filter((row) => row.status == PointOrderStatus.Pending).map((row) => row.id)
console.log(selectedItem.value)
},
},
],
},
{ {
title: '订单号', title: '订单号',
key: 'id', key: 'id',
@@ -72,17 +111,36 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
{ {
title: '使用积分', title: '使用积分',
key: 'point', key: 'point',
sorter: 'default',
}, },
{ {
title: '订单状态', title: '订单状态',
key: 'status', key: 'status',
sorter: 'default', filter: (filterOptionValue: unknown, row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
return row.status == filterOptionValue
},
filterOptions: [
{
label: '等待发货',
value: PointOrderStatus.Pending,
},
{
label: '已发货',
value: PointOrderStatus.Shipped,
},
{
label: '已完成',
value: PointOrderStatus.Completed,
},
],
render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => { render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
switch (row.status) { switch (row.status) {
case PointOrderStatus.Pending: case PointOrderStatus.Pending:
return h(NTag, { size: 'small' }, () => '等待发货') return h(NTag, { size: 'small' }, () => '等待发货')
case PointOrderStatus.Shipped: case PointOrderStatus.Shipped:
return h(NTag, { size: 'small', type: 'info' }, () => '已发货') return h(NTag, { size: 'small', type: row.expressCompany ? 'info' : 'warning', bordered: false }, () =>
row.expressCompany ? '已发货 | 已填写单号' : '已发货 | 未填写单号',
)
case PointOrderStatus.Completed: case PointOrderStatus.Completed:
return h(NTag, { size: 'small', type: 'success' }, () => '已完成') return h(NTag, { size: 'small', type: 'success' }, () => '已完成')
} }
@@ -114,10 +172,45 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
title: '地址', title: '地址',
key: 'address', key: 'address',
render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => { render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
const collectUrl =
row.instanceOf == 'user' ? row.goods.collectUrl : props.goods?.find((g) => g.id == row.goodsId)?.collectUrl
if (row.type == GoodsTypes.Physical) { if (row.type == GoodsTypes.Physical) {
return h(AddressDisplay, { address: row.address }) return collectUrl
? h(NButton, { tag: 'a', href: collectUrl, target: '_blank', text: true, type: 'info' }, () =>
h(NText, { italic: true }, () => '通过站外链接收集'),
)
: h(AddressDisplay, { address: row.address })
} else { } else {
return h(NText, { depth: 3 }, () => '无需发货') return h(NText, { depth: 3, italic: true }, () => '无需发货')
}
},
},
{
title: '快递信息',
key: 'express',
render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
if (row.type == GoodsTypes.Physical) {
return row.trackingNumber
? h(
NFlex,
{
depth: 3,
},
() => [
h(
NTag,
{
size: 'tiny',
bordered: false,
},
() => row.expressCompany,
),
h(NText, { depth: 3 }, () => row.trackingNumber),
],
)
: h(NText, { depth: 3, italic: true }, () => '尚未发货')
} else {
return h(NText, { depth: 3, italic: true }, () => '无需发货')
} }
}, },
}, },
@@ -140,10 +233,73 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
}, },
}, },
] ]
function onChangeStatus(id: number, status: PointOrderStatus) {
dialog.info({
title: '提示',
content: '确认修改订单状态?',
positiveText: '确认',
negativeText: '取消',
onPositiveClick: () => {
updateStatus([id], status)
},
})
}
async function updateStatus(id: number[], status: PointOrderStatus) {
try {
const data = await QueryPostAPI(POINT_API_URL + 'update-orders-status', {
ids: id,
status,
})
if (data.code == 200) {
message.success('操作成功')
props.order?.forEach((row) => {
if (id.includes(row.id)) {
row.status = status
}
})
} else {
message.error('操作失败: ' + data.message)
}
} catch (err) {
message.error('操作失败: ' + err)
console.log(err)
}
}
async function updateExpress(item: ResponsePointOrder2OwnerModel) {
if (!item.trackingNumber || !item.expressCompany) {
message.error('请填写快递单号和快递公司')
return
}
try {
isLoading.value = true
const data = await QueryPostAPI(POINT_API_URL + 'update-order-express', {
id: item.id,
trackingNumber: item.trackingNumber,
expressCompany: item.expressCompany,
})
if (data.code == 200) {
message.success('操作成功')
} else {
message.error('操作失败: ' + data.message)
}
} catch (err) {
message.error('操作失败: ' + err)
console.log(err)
}
isLoading.value = false
}
onMounted(() => {
props.order?.forEach((row) => {
row.instanceOf = props.type
})
})
</script> </script>
<template> <template>
<NDataTable <NDataTable
v-model:checked-row-keys="selectedItem"
:row-key="(row) => row.id"
:loading="isLoading" :loading="isLoading"
:columns="orderColumn" :columns="orderColumn"
:data="order" :data="order"
@@ -159,9 +315,9 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
> >
<NScrollbar style="max-height: 80vh"> <NScrollbar style="max-height: 80vh">
<div style="width: 97%"> <div style="width: 97%">
<template v-if="type == 'user'"> <template v-if="orderDetail.instanceOf == 'user'">
<NDivider style="margin-top: 0"> <NDivider style="margin-top: 0">
商品快照 礼物快照
<NTooltip> <NTooltip>
<template #trigger> <template #trigger>
<NIcon :component="Info24Filled" /> <NIcon :component="Info24Filled" />
@@ -176,8 +332,65 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
<NDivider> 虚拟礼物内容 </NDivider> <NDivider> 虚拟礼物内容 </NDivider>
<NInput :value="currentGoods?.content" type="textarea" readonly placeholder="无内容" /> <NInput :value="currentGoods?.content" type="textarea" readonly placeholder="无内容" />
</template> </template>
<template
v-if="
orderDetail.type == GoodsTypes.Physical &&
orderDetail.status == PointOrderStatus.Pending &&
orderDetail.goods.embedCollectUrl &&
orderDetail.goods.collectUrl
"
>
<NDivider> 填写收货地址 </NDivider>
<NButton tag="a" :href="orderDetail.goods.collectUrl" target="_blank" type="info">
在新窗口中打开地址填写表格
</NButton>
<br />
<iframe
height="1200"
width="800"
:src="orderDetail.goods.collectUrl"
frameborder="0"
allowfullscreen
sandbox="allow-same-origin allow-scripts allow-modals allow-downloads allow-forms allow-popups"
></iframe>
</template>
</template>
<template v-else-if="orderDetail.instanceOf == 'owner'">
<NDivider> 设置订单状态 </NDivider>
<NFlex justify="center" style="width: 100%">
<NSteps
:current="orderDetail.status + 1"
size="small"
@update:current="(c) => onChangeStatus(orderDetail?.id ?? -1, c - 1)"
>
<NStep title="等待中" description="等待主播发货" :disabled="orderDetail.status >= 0" />
<NStep title="已发货" description="已经发货了" :disabled="orderDetail.status >= 1" />
<NStep title="已完成" description="就是已完成" :disabled="orderDetail.status >= 2" />
</NSteps>
</NFlex>
<template v-if="orderDetail.status == PointOrderStatus.Shipped && orderDetail.instanceOf == 'owner'">
<NDivider> 快递 </NDivider>
<NFlex vertical>
<NAutoComplete
v-model:value="orderDetail.expressCompany"
placeholder="快递公司"
:options="expressOptions"
style="max-width: 100px"
/>
<NInputGroup>
<NInputGroupLabel> 快递单号 </NInputGroupLabel>
<NInput
v-model:value="orderDetail.trackingNumber"
placeholder="就是快递单号"
style="max-width: 200px"
/>
</NInputGroup>
<NButton type="primary" @click="updateExpress(orderDetail)" style="width: 120px" :loading="isLoading">
更新快递信息
</NButton>
</NFlex>
</template>
</template> </template>
<template v-else-if="type == 'owner'"> </template>
</div> </div>
</NScrollbar> </NScrollbar>
</NModal> </NModal>

View File

@@ -117,7 +117,7 @@ onMounted(async () => {
<template> <template>
<NFlex justify="center" align="center" style="height: 100vh"> <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> <template #header> Bilibili 身份验证 </template>
<NFlex :wrap="false"> <NFlex :wrap="false">
<NSteps :current="currentStep + 1" vertical style="max-width: 300px"> <NSteps :current="currentStep + 1" vertical style="max-width: 300px">
@@ -134,7 +134,14 @@ onMounted(async () => {
<NInput :value="startModel?.code" :allow-input="() => false" /> <NInput :value="startModel?.code" :allow-input="() => false" />
<NButton @click="copyCode"> 复制认证码 </NButton> <NButton @click="copyCode"> 复制认证码 </NButton>
</NInputGroup> </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> </template>
<NAlert v-else type="error"> <NAlert v-else type="error">
认证超时 认证超时
@@ -169,10 +176,16 @@ onMounted(async () => {
</template> </template>
<template v-else-if="currentStep == 2"> <template v-else-if="currentStep == 2">
<NFlex justify="center" align="center" vertical style="width: 100%"> <NFlex justify="center" align="center" vertical style="width: 100%">
<NAlert type="success"> 你已完成验证! 请妥善保存你的登陆链接, 请勿让其他人获取. 丢失后可以再次通过认证流程获得 </NAlert> <NAlert type="success">
你已完成验证! 请妥善保存你的登陆链接, 请勿让其他人获取. 丢失后可以再次通过认证流程获得
</NAlert>
<NText> 你的登陆链接为: </NText> <NText> 你的登陆链接为: </NText>
<NInputGroup> <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> <NButton @click="copyCode" type="info" style="height: 100%"> 复制登陆链接 </NButton>
</NInputGroup> </NInputGroup>
<NFlex> <NFlex>

View File

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

View File

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

View File

@@ -1,11 +1,12 @@
<!-- eslint-disable vue/component-name-in-template-casing --> <!-- eslint-disable vue/component-name-in-template-casing -->
<script setup lang="ts"> <script setup lang="ts">
import { isDarkMode } from '@/Utils' import { NavigateToNewTab, isDarkMode } from '@/Utils'
import { useAccount } from '@/api/account' import { useAccount } from '@/api/account'
import { FunctionTypes, ThemeType, UserInfo } from '@/api/api-models' import { FunctionTypes, ThemeType, UserInfo } from '@/api/api-models'
import { useUser } from '@/api/user' import { useUser } from '@/api/user'
import RegisterAndLogin from '@/components/RegisterAndLogin.vue' import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
import { FETCH_API } from '@/data/constants' import { FETCH_API } from '@/data/constants'
import { useAuthStore } from '@/store/useAuthStore'
import { CalendarClock24Filled, Wallet24Filled } from '@vicons/fluent' import { CalendarClock24Filled, Wallet24Filled } from '@vicons/fluent'
import { Chatbox, Home, Moon, MusicalNote, Sunny } from '@vicons/ionicons5' import { Chatbox, Home, Moon, MusicalNote, Sunny } from '@vicons/ionicons5'
import { useElementSize, useStorage } from '@vueuse/core' import { useElementSize, useStorage } from '@vueuse/core'
@@ -28,6 +29,7 @@ import {
NSpin, NSpin,
NSwitch, NSwitch,
NText, NText,
useMessage,
} from 'naive-ui' } from 'naive-ui'
import { computed, h, onMounted, ref } from 'vue' import { computed, h, onMounted, ref } from 'vue'
import { RouterLink, useRoute } from 'vue-router' import { RouterLink, useRoute } from 'vue-router'
@@ -41,6 +43,8 @@ const themeType = useStorage('Settings.Theme', ThemeType.Auto)
const userInfo = ref<UserInfo>() const userInfo = ref<UserInfo>()
const biliUserInfo = ref() const biliUserInfo = ref()
const accountInfo = useAccount() const accountInfo = useAccount()
const useAuth = useAuthStore()
const message = useMessage()
const notfount = ref(false) const notfount = ref(false)
@@ -53,16 +57,28 @@ function renderIcon(icon: unknown) {
} }
const menuOptions = ref<MenuOption[]>() const menuOptions = ref<MenuOption[]>()
async function RequestBiliUserData() { async function RequestBiliUserData() {
await fetch(FETCH_API + `https://account.bilibili.com/api/member/getCardByMid?mid=${userInfo.value?.biliId}`).then(async (respone) => { await fetch(FETCH_API + `https://account.bilibili.com/api/member/getCardByMid?mid=${userInfo.value?.biliId}`).then(
let data = await respone.json() async (respone) => {
if (data.code == 0) { let data = await respone.json()
biliUserInfo.value = data.card if (data.code == 0) {
} else { biliUserInfo.value = data.card
throw new Error('Bili User API Error: ' + data.message) } 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 () => { onMounted(async () => {
userInfo.value = await useUser(id.value?.toString()) userInfo.value = await useUser(id.value?.toString())
if (!userInfo.value) { if (!userInfo.value) {
@@ -161,7 +177,12 @@ onMounted(async () => {
<NPageHeader :subtitle="($route.meta.title as string) ?? ''" style="margin-top: 6px"> <NPageHeader :subtitle="($route.meta.title as string) ?? ''" style="margin-top: 6px">
<template #extra> <template #extra>
<NSpace align="center"> <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> <template #checked>
<NIcon :component="Sunny" /> <NIcon :component="Sunny" />
</template> </template>
@@ -170,10 +191,35 @@ onMounted(async () => {
</template> </template>
</NSwitch> </NSwitch>
<template v-if="accountInfo"> <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>
<template v-else> <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> </template>
</NSpace> </NSpace>
</template> </template>
@@ -185,7 +231,16 @@ onMounted(async () => {
</NPageHeader> </NPageHeader>
</NLayoutHeader> </NLayoutHeader>
<NLayout has-sider style="height: calc(100vh - 50px)"> <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> <Transition>
<div v-if="biliUserInfo" style="margin-top: 8px"> <div v-if="biliUserInfo" style="margin-top: 8px">
<NSpace vertical justify="center" align="center"> <NSpace vertical justify="center" align="center">
@@ -194,7 +249,9 @@ onMounted(async () => {
:img-props="{ referrerpolicy: 'no-referrer' }" :img-props="{ referrerpolicy: 'no-referrer' }"
round round
bordered 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%"> <NEllipsis v-if="width > 100" style="max-width: 100%">
<NText strong> <NText strong>
@@ -204,7 +261,12 @@ onMounted(async () => {
</NSpace> </NSpace>
</div> </div>
</Transition> </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> <NSpace v-if="width > 150" justify="center" align="center" vertical>
<NText depth="3"> <NText depth="3">
有更多功能建议请 有更多功能建议请

View File

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

View File

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

View File

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

View File

@@ -1,4 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { NavigateToNewTab } from '@/Utils'
import { useAccount } from '@/api/account'
import { import {
AddressInfo, AddressInfo,
GoodsTypes, GoodsTypes,
@@ -18,6 +20,7 @@ import {
NCard, NCard,
NDataTable, NDataTable,
NDivider, NDivider,
NEmpty,
NFlex, NFlex,
NForm, NForm,
NFormItem, NFormItem,
@@ -48,8 +51,10 @@ const props = defineProps<{
userInfo: UserInfo userInfo: UserInfo
biliInfo: any biliInfo: any
}>() }>()
const router = useRouter()
const useAuth = useAuthStore() const useAuth = useAuthStore()
const accountInfo = useAccount()
const isLoading = ref(false) const isLoading = ref(false)
const message = useMessage() const message = useMessage()
const dialog = useDialog() const dialog = useDialog()
@@ -96,7 +101,11 @@ function getTooltip(goods: ResponsePointGoodModel) {
async function buyGoods() { async function buyGoods() {
if (buyCount.value < 1) { if (buyCount.value < 1) {
message.error('兑换数量不能小于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('请选择收货地址') message.error('请选择收货地址')
} else if (!Number.isInteger(buyCount.value)) { } else if (!Number.isInteger(buyCount.value)) {
message.error('兑换数量必须为整数') message.error('兑换数量必须为整数')
@@ -117,7 +126,7 @@ async function buyGoods() {
positiveText: '前往查看', positiveText: '前往查看',
negativeText: '我知道了', negativeText: '我知道了',
onPositiveClick: () => { onPositiveClick: () => {
useRouter().push({ name: 'PointOrderView', params: { id: data.data.id } }) router.push({ name: 'bili-user', hash: '#orders' })
}, },
onNegativeClick: () => { onNegativeClick: () => {
showBuyModal.value = false 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) }), () => 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 () => { onMounted(async () => {
if (props.userInfo && useAuth.isAuthed) { if (props.userInfo && useAuth.isAuthed) {
@@ -186,13 +206,17 @@ onMounted(async () => {
立即认证 立即认证
</NButton> </NButton>
</NAlert> </NAlert>
<NCard v-else> <NCard v-else style="max-width: 600px" embedded hoverable>
<template #header> 你好, {{ useAuth.biliAuth.name }} </template> <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> <NText> 你在 {{ userInfo.extra?.streamerInfo?.name ?? userInfo.name }} 的直播间的积分为 {{ currentPoint }} </NText>
</NCard> </NCard>
<NDivider /> <NDivider />
<NSpin :show="isLoading"> <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"> <NGridItem v-for="item in goods" :key="item.id">
<PointGoodsItem :goods="item"> <PointGoodsItem :goods="item">
<template #footer> <template #footer>
@@ -235,9 +259,23 @@ onMounted(async () => {
<NDivider> 选项 </NDivider> <NDivider> 选项 </NDivider>
<NForm> <NForm>
<NFormItem label="兑换数量" required <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>
<NFormItem label="收货地址" required> <NFormItem
v-if="
currentGoods.type == GoodsTypes.Physical &&
(currentGoods.collectUrl == null || currentGoods.collectUrl == undefined)
"
label="收货地址"
required
>
<NSelect <NSelect
v-model:show="showAddressSelect" v-model:show="showAddressSelect"
:value="selectedAddress?.id" :value="selectedAddress?.id"
@@ -246,6 +284,8 @@ onMounted(async () => {
:render-option="renderOption" :render-option="renderOption"
placeholder="请选择地址" placeholder="请选择地址"
/> />
&nbsp;
<NButton size="small" type="info" tag="a" href="/bili-user#settings" target="_blank"> 管理收货地址 </NButton>
</NFormItem> </NFormItem>
</NForm> </NForm>
</template> </template>

View File

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