Skip to content

C
corporateCulture-qd
Commit ea5de822 by lijiabin
Options

【需求 20331】 feat: 完善后台管理页面优化菜单等、完成前后台限时竞拍相关功能

parent 2a7fbb51
Showing with 1600 additions and 1994 deletions
src/views/auction/components/exchangeContent.tsx 0 → 100644
/**
* 确认兑换商品的弹窗内容
*/
import { ShopGoodsTypeEnum, regionListOptions } from '@/constants'
import type { BackendShopItemDto, ExchangeGoodsParams } from '@/api'
import type { SetupContext } from 'vue'
type ExchangeContentProps = {
item: BackendShopItemDto
modelValue: ExchangeGoodsParams
}
type ExchangeContentEvents = {
'update:modelValue'(data: ExchangeGoodsParams): void
}
export default function ExchangeContent(
{ item, modelValue }: ExchangeContentProps,
context: SetupContext<ExchangeContentEvents>,
) {
return (
<div class="exchange-content py-6 px-4">
{/* 商品图片区域 */}
<div class="flex justify-center mb-8">
<div class="relative">
<div class="w-32 h-32 bg-gradient-to-br from-orange-100 to-pink-100 rounded-3xl flex items-center justify-center shadow-lg">
<div class="w-20 h-20 bg-white rounded-lg flex items-center justify-center shadow-sm">
<img src={item.imageUrl} alt={item.name} class="w-16 h-16 object-contain" />
</div>
</div>
<div class="absolute -top-2 -right-2 w-7 h-7 bg-blue-500 rounded-full flex items-center justify-center shadow-md">
<span class="text-white text-sm font-medium">{item.stock}</span>
</div>
</div>
</div>
{/* 商品信息 */}
<div class="space-y-3 mb-8">
<div class="flex items-center gap-3 px-4">
<div class="w-1.5 h-1.5 bg-gray-400 rounded-full flex-shrink-0"></div>
<span class="text-gray-600 text-sm min-w-12">名称：</span>
<span class="font-medium text-gray-900 flex-1">{item.name}</span>
</div>
<div class="flex items-center gap-3 px-4">
<div class="w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0"></div>
<span class="text-gray-600 text-sm min-w-12">积分：</span>
<span class="font-semibold text-orange-500 text-lg">{item.price}YA币</span>
</div>
</div>
{/* 办公点选择和数量 */}
{item.itemType === ShopGoodsTypeEnum.REAL_GOODS && (
<div class=" rounded-lg px-5 mx-2 space-y-4">
{/* 办公点选择 */}
<div>
<label class="text-gray-700 text-sm font-medium mb-2 block">办公点</label>
<el-select
modelValue={modelValue.deliveryInfo}
onUpdate:modelValue={(value: string) =>
context.emit('update:modelValue', { ...modelValue, deliveryInfo: value })
}
placeholder="请选择办公点"
class="w-full"
>
{regionListOptions.map((office) => (
<el-option key={office.value} label={office.label} value={office.value} />
))}
</el-select>
</div>
{/* 数量选择 */}
<div>
<label class="text-gray-700 text-sm font-medium mb-2 block">选择数量</label>
<el-input-number
min={1}
max={item.stock}
modelValue={modelValue.num}
onUpdate:modelValue={(value: number) =>
context.emit('update:modelValue', { ...modelValue, num: value })
}
class="w-full"
controls-position="right"
/>
</div>
</div>
)}
</div>
)
}
ExchangeContent.props = {
item: {
type: Object as PropType<BackendShopItemDto>,
required: true,
},
modelValue: {
type: Object as PropType<ExchangeGoodsParams>,
required: true,
},
}
ExchangeContent.emits = {
'update:modelValue': (value: ExchangeGoodsParams) => value,
}
src/views/auction/components/exchangeGoodsRecordDilaog.vue 0 → 100644
<template>
<el-dialog
v-model="visible"
title="商品领取记录"
width="1100px"
class="exchange-record-dialog"
align-center
destroy-on-close
>
<div class="px-6 py-4">
<!-- 搜索筛选区域 - 优化布局 -->
<div class="mb-4 flex items-center gap-3 justify-end">
<div class="w-750px flex items-center gap-3">
<el-select v-model="searchParams.itemType" placeholder="选择商品类型" clearable>
<el-option label="亚声实物" :value="ShopGoodsTypeEnum.REAL_GOODS" />
<el-option label="虚拟装饰" :value="ShopGoodsTypeEnum.VIRTUAL_GOODS" />
</el-select>
<el-date-picker
v-model="timeRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="x"
clearable
style="width: 700px"
/>
<el-button type="primary" @click="refresh" style="width: 80px"> 搜索 </el-button>
</div>
</div>
<!-- 表格 - 调整列宽 -->
<el-table :data="list" stripe height="420" class="w-full">
<el-table-column prop="itemName" label="名称" min-width="140" show-overflow-tooltip />
<el-table-column prop="itemType" label="商品类型" width="100" align="center">
<template #default="scope">
{{ scope.row.itemType === ShopGoodsTypeEnum.REAL_GOODS ? '亚声实物' : '虚拟装饰' }}
</template>
</el-table-column>
<!-- <el-table-column prop="price" label="商品单价" width="100" align="center" /> -->
<el-table-column prop="num" label="兑换数量" width="100" align="center" />
<el-table-column label="扣除YA币" width="110" align="center">
<template #default="scope">
<span class="text-red-500 font-semibold"> -{{ scope.row.price }} </span>
</template>
</el-table-column>
<el-table-column
prop="deliveryInfo"
label="收货地址"
min-width="160"
show-overflow-tooltip
/>
<el-table-column prop="createTime" label="领取时间" width="200">
<template #default="scope">
{{ dayjs(scope.row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
</el-table>
<!-- 分页 - 优化对齐 -->
<div class="flex justify-end mt-4">
<el-pagination
v-model:current-page="searchParams.current"
:page-size="searchParams.size"
@current-change="goToPage"
:total="total"
layout="total, prev, pager, next"
small
/>
</div>
</div>
</el-dialog>
</template>
<script setup lang="ts">
import { usePageSearch } from '@/hooks'
import { getExchangeGoodsRecordList } from '@/api'
import dayjs from 'dayjs'
import { ShopGoodsTypeEnum } from '@/constants'
const { total, searchParams, refresh, goToPage, list } = usePageSearch(getExchangeGoodsRecordList, {
immediate: false,
})
const timeRange = computed({
get() {
if (!searchParams.value.receiveTimeStart || !searchParams.value.receiveTimeEnd) {
return []
} else {
return [searchParams.value.receiveTimeStart * 1000, searchParams.value.receiveTimeEnd * 1000]
}
},
set(value) {
console.log(value)
if (!value) {
searchParams.value.receiveTimeStart = 0
searchParams.value.receiveTimeEnd = 0
} else {
searchParams.value.receiveTimeStart = value[0]! / 1000
searchParams.value.receiveTimeEnd = value[1]! / 1000
}
},
})
const visible = shallowRef(false)
const open = () => {
visible.value = true
refresh()
}
defineExpose({
open,
})
</script>
<style scoped></style>
src/views/auction/components/exchangeYabiRecordDilaog.vue 0 → 100644
<template>
<el-dialog
v-model="visible"
title="YA币收支记录"
width="1100px"
class="exchange-record-dialog"
align-center
destroy-on-close
>
<div class="px-6 py-4">
<!-- 搜索筛选区域 - 优化布局 -->
<div class="mb-4 flex items-center gap-3 justify-end">
<div class="w-750px flex items-center gap-3">
<!-- <el-select v-model="searchParams.type" placeholder="选择商品类型" clearable>
<el-option label="亚声实物" :value="ShopGoodsTypeEnum.REAL_GOODS" />
<el-option label="虚拟装饰" :value="ShopGoodsTypeEnum.VIRTUAL_GOODS" />
</el-select> -->
<el-date-picker
v-model="timeRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="x"
clearable
style="width: 700px"
/>
<el-button type="primary" @click="onSearch" style="width: 80px"> 搜索 </el-button>
</div>
</div>
<!-- 表格 - 调整列宽 -->
<el-table :data="list" stripe height="420" class="w-full">
<el-table-column prop="remark" label="名称" min-width="140" show-overflow-tooltip />
<el-table-column prop="itemType" label="YA币" width="100" align="center">
<template #default="scope">
<span
class="font-semibold"
:class="{ 'text-red-500': !scope.row.isIncr, 'text-green-500': scope.row.isIncr }"
>
<!-- {{ scope.row.isIncr ? '+' : '-' }} -->
{{ scope.row.scoreAyabi }}
</span>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="时间" width="300">
<template #default="scope">
{{ dayjs(scope.row.createdAt * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
</el-table>
<!-- 分页 - 优化对齐 -->
<div class="flex justify-end mt-4">
<el-pagination
v-model:current-page="searchParams.current"
:page-size="searchParams.size"
@current-change="goToPage"
:total="total"
layout="total, prev, pager, next"
small
/>
</div>
</div>
</el-dialog>
</template>
<script setup lang="ts">
import { usePageSearch } from '@/hooks'
import { getExchangeYabiRecordList } from '@/api'
import dayjs from 'dayjs'
const { total, searchParams, refresh, goToPage, list } = usePageSearch(getExchangeYabiRecordList, {
immediate: false,
})
const timeRange = computed({
get() {
if (!searchParams.value.startTime || !searchParams.value.endTime) {
return []
} else {
return [searchParams.value.startTime * 1000, searchParams.value.endTime * 1000]
}
},
set(value) {
if (!value) {
searchParams.value.startTime = undefined
searchParams.value.endTime = undefined
} else {
searchParams.value.startTime = value[0]! / 1000
searchParams.value.endTime = value[1]! / 1000
}
},
})
const visible = shallowRef(false)
const open = () => {
visible.value = true
refresh()
}
const onSearch = () => {
refresh()
}
defineExpose({
open,
})
</script>
<style scoped></style>
src/views/auction/index.vue 0 → 100644
<script setup lang="tsx">
import dayjs from 'dayjs'
import { usePageSearch } from '@/hooks'
import { AuctionStatusEnum } from '@/constants'
import { getAuctionList, getUserAuctionCount, getAuctionDetail, participateAuction } from '@/api'
import ExchangeGoodsRecordDialog from './components/exchangeGoodsRecordDilaog.vue'
import ExchangeYabiRecordDialog from './components/exchangeYabiRecordDilaog.vue'
import type { AuctionItemDto } from '@/api'
import { useYaBiStore } from '@/stores'
import { storeToRefs } from 'pinia'
const yabiStore = useYaBiStore()
const { yabiData } = storeToRefs(yabiStore)
const tabs = [
{ label: '全部', value: undefined },
{ label: '预告中', value: AuctionStatusEnum.PUBLISHED },
{ label: '竞拍中', value: AuctionStatusEnum.AUCTIONING },
{ label: '竞拍成功', value: AuctionStatusEnum.AUCTION_SUCCESS },
{ label: '已流拍', value: AuctionStatusEnum.AUCTION_FAILED },
]
let timer: NodeJS.Timeout | null = null
const { list, goToPage, changePageSize, searchParams, total, refresh } = usePageSearch(
getAuctionList,
{
defaultParams: {
status: undefined,
},
formatList(list) {
return list.map((item) => {
item.remainingTime = getCountdown(item.endTime)
return item
})
},
success(list) {
if (timer) clearInterval(timer)
timer = setInterval(() => {
list.value.forEach((item) => {
item.remainingTime = getCountdown(item.endTime)
})
}, 1000)
},
},
)
const exchangeGoodsRecordDialogRef = useTemplateRef('exchangeGoodsRecordDialogRef')
const exchangeYabiRecordDialogRef = useTemplateRef('exchangeYabiRecordDialogRef')
const getCountdown = (targetTimestamp: number) => {
let diff = dayjs.unix(targetTimestamp).diff(dayjs(), 'second')
if (diff <= 0) {
return '0天 00:00:00'
}
const days = Math.floor(diff / 86400)
diff %= 86400
const hours = Math.floor(diff / 3600)
diff %= 3600
const minutes = Math.floor(diff / 60)
const seconds = diff % 60
return `${days}天 ${String(hours).padStart(2, '0')}时${String(minutes).padStart(2, '0')}分${String(seconds).padStart(2, '0')}秒`
}
const onChangeStatus = (status: AuctionStatusEnum | undefined) => {
searchParams.value.status = status
refresh()
}
const onOpenExchangeYabiRecordDialog = () => {
exchangeYabiRecordDialogRef.value?.open()
}
// 根据状态计算角标样式 (从之前的 AuctionPage.vue 复制)
const getBadgeClass = (status: AuctionStatusEnum) => {
switch (status) {
case AuctionStatusEnum.PUBLISHED:
return 'bg-amber-100 text-amber-700'
case AuctionStatusEnum.AUCTION_FAILED:
return 'bg-gray-100 text-gray-500'
case AuctionStatusEnum.AUCTIONING:
default:
return 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white'
}
}
const onBid = async (item: AuctionItemDto) => {
const isOver = await getUserAuctionCount(item.id)
if (!isOver)
return ElMessageBox.confirm(`您已达到竞拍次数限制${item.bidLimit}次，不可再参与竞拍`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
showCancelButton: false,
showConfirmButton: false,
})
const { data } = await getAuctionDetail(item.id)
console.log(data, 'data')
const val = ref(0)
ElMessageBox.confirm('确定参与竞拍吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
message: () => (
<div class="space-y-12px text-gray-700">
{/* 作品名称 */}
<div class="text-16px font-600 text-gray-900">{item.name}</div>
{/* 规则说明 */}
<div class="text-12px leading-18px text-gray-500 bg-gray-50 rounded-6px p-10px">
竞拍后将暂时扣除您出价的 YA 币，若您的出价被超越，YA 币将自动退回
</div>
{/* 当前竞拍信息 */}
<div class="space-y-6px">
{data.currentPrice ? (
<div class="flex items-center justify-between">
<span class="text-gray-500">当前最高出价</span>
<span class="text-orange-500 font-600">{data.currentPrice} YA币</span>
</div>
) : (
<div class="text-gray-500">当前暂未有人出价</div>
)}
<div class="flex items-center justify-between">
<span class="text-gray-500">单人出价上限</span>
<span class="text-gray-700">{item.bidLimit} 次</span>
</div>
</div>
{/* 出价输入 */}
<div class="space-y-6px flex items-center justify-between">
<div class="text-gray-500">您的出价</div>
<el-input-number
v-model={val.value}
controls-position="right"
class="w-50%!"
placeholder="请输入 YA 币数量"
/>
</div>
{/* 余额提示 */}
<div class="flex items-center justify-end text-12px text-gray-500 rounded-6px p-8px">
<span>当前可用 {yabiData.value.currentValue} YA币</span>
</div>
</div>
),
showCancelButton: true,
showConfirmButton: true,
beforeClose: async (action, instance, done) => {
if (action !== 'confirm') {
done()
} else {
if (val.value > yabiData.value.currentValue) return ElMessage.error('您的YA币余额不足')
if (val.value < data.minIncrement + (data.currentPrice || data.startingPrice))
return ElMessage.error('出价必须大于等于前最高出价+最低加价幅度')
instance.confirmButtonLoading = true
instance.confirmButtonText = 'Loading...'
try {
await participateAuction(item.id, val.value)
refresh()
yabiStore.fetchYaBiData()
done()
} catch (error) {
console.log(error)
refresh()
} finally {
instance.confirmButtonLoading = false
instance.confirmButtonText = '确定'
}
}
},
})
}
</script>
<template>
<div>
<div class="flex gap-6">
<div class="flex-3/4 min-w-0">
<div class="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-white/60">
<div class="flex items-center gap-3 mb-6">
<div
class="w-1.5 h-7 bg-gradient-to-b from-[--un-gradient-from] to-[--un-gradient-to] rounded-full shadow-sm"
style="--un-gradient-from: #8b5cf6; --un-gradient-to: #6366f1"
></div>
<h2 class="text-xl font-bold text-gray-800">限时竞拍</h2>
</div>
<div class="flex gap-3 text-sm mb-3 items-center flex-wrap">
<span class="text-gray-600 font-medium">商品名称：</span>
<el-input
size="default"
class="w-70"
v-model="searchParams.name"
placeholder="请输入商品名称"
/>
<el-button class="rounded-lg" size="default" type="primary" @click="refresh"
>搜索</el-button
>
</div>
<div class="flex gap-3 text-sm mb-6 items-center flex-wrap">
<span class="text-gray-600 font-medium">状态：</span>
<button
v-for="item in tabs"
:key="item.value"
class="cursor-pointer px-3 py-1.5 text-sm transition-all relative"
@click="onChangeStatus(item.value)"
:class="{
'text-indigo-600 font-medium': searchParams.status === item.value,
'text-gray-600 hover:text-gray-900': searchParams.status !== item.value,
}"
>
{{ item.label }}
<span
v-if="searchParams.status === item.value"
class="absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-b from-[--un-gradient-from] to-[--un-gradient-to]"
style="--un-gradient-from: #8b5cf6; --un-gradient-to: #6366f1"
></span>
</button>
</div>
<template v-if="list.length">
<!-- 卡片网格 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6">
<div
v-for="item in list"
:key="item.id"
class="card group relative bg-white rounded-xl overflow-hidden border-2 border-solid border-transparent shadow-lg hover:border-blue-500 hover:shadow-xl transition-all duration-300 cursor-pointer transform hover:-translate-y-1"
:class="{ 'filter-grayscale-30': item.status === AuctionStatusEnum.AUCTION_FAILED }"
>
<!-- 状态角标 -->
<div
class="absolute top-2 left-2 z-2 text-xs font-semibold px-2.5 py-1 rounded-full tracking-wide"
:class="getBadgeClass(item.status)"
>
{{ tabs.find((option) => option.value === item.status)?.label }}
</div>
<!-- 图片容器 -->
<div
class="card-img-wrap w-full aspect-6/5 bg-gradient-to-br from-blue-50 to-purple-50 flex items-center justify-center relative overflow-hidden"
>
<img
:src="item.imageUrl"
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
/>
<!-- 悬浮层 -->
<!-- <div
class="absolute inset-0 bg-black/0 group-hover:bg-black/15 transition-all duration-300 flex items-center justify-center opacity-0 group-hover:opacity-100"
>
<span
class="bg-white px-4 py-2 rounded-full text-sm font-medium text-blue-600 shadow-md transition-all duration-300"
>
查看详情
</span>
</div> -->
</div>
<!-- 内容区 -->
<div class="card-body p-5 flex flex-col gap-2">
<!-- 标题 -->
<h3 class="text-[15px] font-semibold text-gray-900 leading-snug line-clamp-1">
{{ item.name }}
</h3>
<!-- 描述 -->
<p class="text-xs text-gray-500 leading-relaxed line-clamp-1">
<el-popover :content="item.description" placement="top-start" width="300">
<template #reference>
{{ item.description }}
</template>
</el-popover>
</p>
<!-- 规格 -->
<div class="flex items-center gap-1 text-xs text-gray-600">
<span class="text-gray-400">规格</span>
<span class="text-gray-700 font-medium">{{ item.specification }}</span>
</div>
<!-- 剩余时间（单独一行，重要） -->
<div
class="text-xs text-gray-500 mt-1"
:style="{
opacity: item.status === AuctionStatusEnum.AUCTIONING ? 1 : 0,
}"
>
⏱ 拍卖剩余：{{ item.remainingTime }}
</div>
<!-- 底部价格 + 按钮 -->
<div class="flex items-end justify-between gap-2">
<div class="flex flex-col">
<div class="flex items-baseline gap-1">
<span class="text-xs text-gray-400">起拍</span>
<span class="text-lg font-bold text-red-500">
{{ item.startingPrice }}
</span>
<span class="text-xs text-gray-500">YA币</span>
</div>
<div class="text-xs text-gray-400">
最低加价
<span class="text-gray-600 font-medium">{{ item.minIncrement }}</span> YA币
</div>
</div>
<el-button
v-if="item.status === AuctionStatusEnum.AUCTIONING"
type="primary"
size="small"
class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white border-none px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-all"
@click.stop="onBid(item)"
>
参与竞拍
</el-button>
</div>
</div>
</div>
</div>
<div class="flex justify-end mt-4">
<div class="bg-gray-50 rounded-xl shadow-sm border border-gray-200 p-2">
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:total="total"
@current-change="goToPage"
@size-change="changePageSize"
/>
</div>
</div>
</template>
<div v-else class="flex justify-center items-center py-12">
<el-empty description="暂无" />
</div>
</div>
</div>
<!-- 右侧：信息面板 -->
<div class="flex-1/4 space-y-6">
<!-- YA币信息卡片 -->
<div
class="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-white/60 sticky top-[52px]"
>
<div class="text-center mb-6">
<div class="text-gray-500 text-sm mb-2">当前YA币</div>
<div
class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 text-5xl font-bold"
>
{{ yabiData.currentValue }}
</div>
</div>
<!-- 操作按钮 -->
<div class="space-y-3 mb-6">
<button
class="cursor-pointer w-full px-4 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:scale-[1.02] transition-all duration-300"
@click="onOpenExchangeYabiRecordDialog"
>
YA币收支记录
</button>
<!-- <button
class="cursor-pointer w-full px-4 py-3 bg-white text-gray-700 rounded-xl text-sm font-medium border border-gray-200 hover:border-blue-400 hover:shadow-md transition-all duration-300"
@click="onOpenExchangeGoodsRecordDialog"
>
商品领取列表
</button> -->
</div>
<!-- 温馨提示 -->
<!-- <div class="bg-amber-50 border border-amber-200/60 rounded-xl p-4">
<div class="flex items-start gap-2">
<svg
class="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
<div class="text-sm text-gray-700">
<div class="font-medium mb-1">温馨提示</div>
<p class="text-xs leading-relaxed">
实物商品兑换后，请耐心等待各地人才发展部伙伴统一发放安排
</p>
</div>
</div>
</div> -->
<!-- <div class="mt-6 pt-6 border-t border-gray-100 space-y-3">
<div class="flex justify-between items-center text-sm">
<span class="text-gray-500">实物商品</span>
<span class="font-medium text-gray-700">{{ total }} 件</span>
</div>
</div> -->
</div>
</div>
</div>
<ExchangeGoodsRecordDialog ref="exchangeGoodsRecordDialogRef" />
<ExchangeYabiRecordDialog ref="exchangeYabiRecordDialogRef" />
</div>
</template>
<style scoped>
/* 已结束卡片置灰 */
.card.filter-grayscale-30 {
filter: grayscale(30%);
}
/* 图片光圈装饰 (UnoCSS 复杂渐变伪元素不易直接实现，保留为 scoped CSS) */
.card-img-wrap::before {
content: '';
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease;
z-index: 0; /* 确保在图片下方 */
}
/* 悬浮时光圈放大效果 */
.card:hover .card-img-wrap::before {
transform: translate(-50%, -50%) scale(1.1);
}
.bid-btn.el-button.is-disabled {
--el-button-bg-color: #d1d5db !important; /* gray-300 */
--el-button-text-color: #6b7280 !important; /* gray-500 */
background: #d1d5db !important; /* fallback */
color: #6b7280 !important; /* fallback */
box-shadow: none !important;
cursor: not-allowed !important;
transform: none !important;
}
.bid-btn.el-button.is-disabled:hover {
transform: none !important;
box-shadow: none !important;
background: #d1d5db !important;
color: #6b7280 !important;
}
</style>
src/views/backend/carousel/index.vue
......@@ -359,14 +359,9 @@ onMounted(() => {
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
flex-shrink: 0;
.add-btn {
margin-left: auto;
}
}
// 表格区域
.table-section {
flex: 1;
......
src/views/backend/caseManage/index.vue
......@@ -3,7 +3,6 @@
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<div class="flex-1 flex gap-2">
<el-input
v-model="searchParams.title"
placeholder="请输入栏目标题"
......@@ -14,7 +13,7 @@
<el-select
v-model="searchParams.isAudit"
placeholder="请选择审核状态"
class="search-select"
class="search-select mx-12px"
clearable
>
<el-option
......@@ -29,7 +28,7 @@
<el-select
v-model="searchParams.isUse"
placeholder="请选择发布状态"
class="search-select"
class="search-select mr-12px"
clearable
>
<el-option
......@@ -39,21 +38,16 @@
:value="item.value"
/>
</el-select>
<div>
<el-button type="primary" @click="refresh">
<el-icon><IEpSearch /></el-icon>
搜索</el-button
>
<el-button @click="reset">重置</el-button>
</div>
</div>
<div class="flex justify-end">
<UploadExcel :api="importCaseExcel" @success="refresh" @error="handleError" />
<ImportExcelBtn :api="importCaseExcel" @success="refresh" @error="handleError" />
<el-button type="primary" @click="handleBatchPublish"> 批量发布/隐藏 </el-button>
<el-button type="danger" @click="handleBatchDelete"> 批量删除 </el-button>
</div>
</div>
<!-- 表格区域 -->
<div class="table-section">
......@@ -297,7 +291,7 @@ import {
AuditStatusEnum,
UsageStatusEnum,
} from '@/constants'
import UploadExcel from '@/components/common/UploadExcel/index.vue'
import ImportExcelBtn from '@/components/common/ImportExcelBtn/index.vue'
import dayjs from 'dayjs'
import ErrorListDialog from './components/errorListDialog.vue'
import EditDialog from './components/editDialog.vue'
......@@ -397,8 +391,9 @@ const handleError = (list: BackendCaseListItemDto[]) => {
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
flex-shrink: 0;
gap: 12px 0;
.search-select {
width: 200px;
......
src/views/backend/columnSettings/index.vue deleted 100644 → 0
<!-- views/backend/official/index.vue -->
<template>
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<div class="flex-1 flex gap-2">
<el-input
v-model="searchParams.title"
placeholder="请输入栏目标题"
class="w-200px"
clearable
></el-input>
<el-select
v-model="searchParams.status"
placeholder="请选择发布状态"
class="search-select"
clearable
>
<el-option label="发布" :value="1" />
<el-option label="隐藏" :value="0" />
</el-select>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button @click="reset">重置</el-button>
</div>
<div class="flex justify-end">
<el-button type="primary" @click="handleAdd">
<el-icon><Plus /></el-icon>
新增
</el-button>
<el-button type="primary" @click="handleBatchPublish"> 批量发布/隐藏 </el-button>
<el-button type="danger" @click="handleBatchDelete"> 批量删除 </el-button>
</div>
</div>
<!-- 表格区域 -->
<div class="table-section">
<!-- 表格 -->
<div class="table-wrapper">
<el-table
v-loading="loading"
:data="list"
height="100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="sort" label="栏目顺序" width="180"> </el-table-column>
<el-table-column prop="title" label="栏目名称" min-width="200" />
<el-table-column prop="postCount" label="栏目帖子数量" min-width="200" />
<el-table-column prop="color" label="颜色" width="300">
<template #default="{ row }">
<div class="color-cell">
<div class="color-block" :style="{ backgroundColor: row.color }" />
<span class="color-text">{{ row.color }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="createUserId" label="创建人" min-width="200" />
<el-table-column prop="createTime" label="创建时间" min-width="200">
<template #default="{ row }">
{{ dayjs(row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column prop="status" label="状态" min-width="200">
<template #default="{ row }">
<el-switch
:model-value="row.status"
:active-value="1"
:inactive-value="0"
@change="handleStatusChange(row)"
/>
</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="pagination-wrapper">
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:total="total"
:page-sizes="[10, 20, 30]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="changePageSize"
@current-change="goToPage"
/>
</div>
</div>
<!-- 新增/编辑对话框 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="500px"
:close-on-click-modal="false"
>
<el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
<el-form-item label="标题" prop="title">
<el-input v-model="form.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item label="颜色" prop="color">
<el-color-picker v-model="form.color" />
<span class="color-value">{{ form.color }}</span>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" :min="0" :max="100" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">
<el-icon class="btn-icon"><Upload /></el-icon>
保存
</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { Search, Plus, Upload } from '@element-plus/icons-vue'
import { usePageSearch, useResetData } from '@/hooks'
import { listOfCultureColumn, addOrUpdateColumn, deleteColumn, hideColumn } from '@/api/backend'
import type { FormInstance, FormRules } from 'element-plus'
import type { BackendColumnListItemDto, AddOrUpdateColumnDto } from '@/api/backend'
import dayjs from 'dayjs'
const { loading, list, total, reset, goToPage, changePageSize, refresh, searchParams, search } =
usePageSearch(listOfCultureColumn, {
defaultParams: {
type: 'column',
},
})
// 对话框
const dialogVisible = ref(false)
const dialogTitle = computed(() => (form.value.id ? '编辑标签' : '新增标签'))
const formRef = ref<FormInstance>()
// 表单数据
const [form, resetForm] = useResetData<AddOrUpdateColumnDto>({
title: '',
color: '#000000',
id: undefined,
sort: 0,
type: 'column',
})
// 表单验证规则
const formRules: FormRules = {
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
color: [{ required: true, message: '请选择颜色', trigger: 'change' }],
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
}
// 新增
const handleAdd = () => {
resetForm()
dialogVisible.value = true
}
// 编辑
const handleEdit = (row: BackendColumnListItemDto) => {
resetForm()
form.value = {
title: row.title,
color: row.color,
id: row.id,
sort: row.sort,
type: 'column',
}
dialogVisible.value = true
}
// 状态改变
const handleStatusChange = async (row: BackendColumnListItemDto) => {
await hideColumn([row.id])
refresh()
}
// 删除
const handleDelete = async (row: BackendColumnListItemDto) => {
try {
await ElMessageBox.confirm(`确定要删除标签"${row.title}"吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
await deleteColumn([row.id])
ElMessage.success('删除成功')
refresh()
} catch (error) {
if (error !== 'cancel') {
ElMessage.error('删除失败')
}
}
}
// 提交表单
const handleSubmit = async () => {
if (!formRef.value) return
try {
await formRef.value.validate()
if (form.value.id) {
await addOrUpdateColumn(form.value)
} else {
await addOrUpdateColumn(form.value)
}
ElMessage.success(form.value.id ? '编辑成功' : '新增成功')
dialogVisible.value = false
if (form.value.id) {
search()
} else {
refresh()
}
} catch (error) {
console.error('表单验证失败:', error)
}
}
const selectedRows = ref<BackendColumnListItemDto[]>([])
// 选择
const handleSelectionChange = (selection: BackendColumnListItemDto[]) => {
selectedRows.value = selection
}
// 批量发布/隐藏
const handleBatchPublish = async () => {
await hideColumn(selectedRows.value.map((item) => item.id))
refresh()
selectedRows.value = []
ElMessage.success('发布/隐藏成功')
}
// 批量删除
const handleBatchDelete = async () => {
await deleteColumn(selectedRows.value.map((item) => item.id))
refresh()
selectedRows.value = []
ElMessage.success('删除成功')
}
</script>
<style scoped lang="scss">
.official-tag-page {
height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
// 搜索区域
.search-section {
background: #fff;
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-shrink: 0;
.search-select {
width: 200px;
}
}
// 表格区域
.table-section {
flex: 1;
background: #fff;
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
min-height: 0;
}
.table-wrapper {
flex: 1;
min-height: 0;
.color-cell {
display: flex;
align-items: center;
gap: 12px;
.color-block {
width: 100%;
height: 36px;
border-radius: 4px;
border: 1px solid #e5e7eb;
flex: 1;
}
.color-text {
color: #fff;
font-size: 14px;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
padding-top: 16px;
flex-shrink: 0;
}
// 对话框内的颜色显示
.color-value {
margin-left: 12px;
color: #606266;
font-family: monospace;
}
.btn-icon {
margin-right: 4px;
}
</style>
src/views/backend/columnsMenu/columnManage/index.vue
......@@ -3,7 +3,6 @@
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<div class="flex-1 flex gap-2">
<el-input
v-model="searchParams.title"
placeholder="请输入栏目标题"
......@@ -14,7 +13,7 @@
<el-select
v-model="searchParams.status"
placeholder="请选择发布状态"
class="search-select"
class="search-select mx-12px"
clearable
>
<el-option label="发布" :value="1" />
......@@ -22,9 +21,7 @@
</el-select>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button @click="reset">重置</el-button>
</div>
<div class="flex justify-end">
<el-button type="primary" @click="handleAdd">
<el-icon><Plus /></el-icon>
新增
......@@ -32,7 +29,6 @@
<el-button type="primary" @click="handleBatchPublish"> 批量发布/隐藏 </el-button>
<el-button type="danger" @click="handleBatchDelete"> 批量删除 </el-button>
</div>
</div>
<!-- 表格区域 -->
<div class="table-section">
......@@ -271,7 +267,8 @@ const handleBatchDelete = async () => {
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
gap: 12px 0;
flex-shrink: 0;
.search-select {
......
src/views/backend/columnsMenu/interviewManage/index.vue
......@@ -3,36 +3,38 @@
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<div class="flex-1 flex gap-2">
<el-input
v-model="searchParams.title"
placeholder="请输入栏目标题"
class="w-200px"
clearable
></el-input>
<el-select
v-model="searchParams.status"
placeholder="请选择发布状态"
class="search-select"
class="search-select mx-12px"
clearable
>
<el-option label="发布" :value="1" />
<el-option label="隐藏" :value="0" />
</el-select>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button type="primary" @click="refresh">
<el-icon><IEpSearch /></el-icon>
搜索
</el-button>
<el-button type="primary" @click="refresh">
<el-icon><Search /></el-icon>
搜索
</el-button>
<el-button @click="reset">重置</el-button>
</div>
<div class="flex justify-end">
<el-button type="primary" @click="handleAdd">
<el-icon><Plus /></el-icon>
<el-icon><IEpPlus /></el-icon>
新增
</el-button>
<el-button type="primary" @click="handleBatchPublish"> 批量发布/隐藏 </el-button>
<el-button type="danger" @click="handleBatchDelete"> 批量删除 </el-button>
</div>
</div>
<!-- 表格区域 -->
<div class="table-section">
......@@ -120,7 +122,7 @@
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">
<el-icon class="btn-icon"><Upload /></el-icon>
<el-icon class="btn-icon"><IEpUpload /></el-icon>
保存
</el-button>
</template>
......@@ -129,7 +131,7 @@
</template>
<script setup lang="ts">
import { Search, Plus, Upload } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
import { usePageSearch, useResetData } from '@/hooks'
import { listOfCultureColumn, addOrUpdateColumn, deleteColumn, hideColumn } from '@/api/backend'
import type { FormInstance, FormRules } from 'element-plus'
......@@ -271,7 +273,8 @@ const handleBatchDelete = async () => {
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
gap: 12px 0;
flex-shrink: 0;
.search-select {
......
src/views/backend/columnsMenu/videoManage/index.vue
......@@ -2,7 +2,6 @@
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<div class="flex-1 flex gap-2">
<el-input
v-model="searchParams.title"
placeholder="请输入栏目标题"
......@@ -13,7 +12,7 @@
<el-select
v-model="searchParams.status"
placeholder="请选择发布状态"
class="search-select"
class="search-select mx-12px"
clearable
>
<el-option label="发布" :value="1" />
......@@ -21,9 +20,7 @@
</el-select>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button @click="reset">重置</el-button>
</div>
<div class="flex justify-end">
<el-button type="primary" @click="handleAdd">
<el-icon><Plus /></el-icon>
新增
......@@ -31,7 +28,6 @@
<el-button type="primary" @click="handleBatchPublish"> 批量发布/隐藏 </el-button>
<el-button type="danger" @click="handleBatchDelete"> 批量删除 </el-button>
</div>
</div>
<!-- 表格区域 -->
<div class="table-section">
......@@ -270,7 +266,8 @@ const handleBatchDelete = async () => {
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
gap: 12px 0;
flex-shrink: 0;
.search-select {
......
src/views/backend/contentsMenu/columnManage/index.vue
......@@ -112,14 +112,14 @@ const handleShowContent = (row: ArticleItemDto) => {
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<div class="flex-1 flex gap-2">
<el-input v-model="searchParams.title" placeholder="请输入标题" class="w-200px"></el-input>
<div>
<el-input
v-model="searchParams.title"
placeholder="请输入标题"
class="w-200px mr-12px"
></el-input>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button @click="reset">重置</el-button>
</div>
</div>
</div>
<!-- 表格区域 -->
<div class="table-section">
......@@ -251,7 +251,8 @@ const handleShowContent = (row: ArticleItemDto) => {
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
gap: 12px 0;
flex-shrink: 0;
.search-select {
......
src/views/backend/contentsMenu/interviewManage/index.vue
......@@ -112,14 +112,14 @@ const handleShowContent = (row: ArticleItemDto) => {
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<div class="flex-1 flex gap-2">
<el-input v-model="searchParams.title" placeholder="请输入标题" class="w-200px"></el-input>
<div>
<el-input
v-model="searchParams.title"
placeholder="请输入标题"
class="w-200px mr-12px"
></el-input>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button @click="reset">重置</el-button>
</div>
</div>
</div>
<!-- 表格区域 -->
<div class="table-section">
......@@ -251,7 +251,8 @@ const handleShowContent = (row: ArticleItemDto) => {
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
gap: 12px 0;
flex-shrink: 0;
.search-select {
......
src/views/backend/contentsMenu/questionManage/index.vue
......@@ -112,14 +112,14 @@ const handleSelectionChange = (selection: BackendColumnListItemDto[]) => {
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<div class="flex-1 flex gap-2">
<el-input v-model="searchParams.title" placeholder="请输入标题" class="w-200px"></el-input>
<div>
<el-input
v-model="searchParams.title"
placeholder="请输入标题"
class="w-200px mr-12px"
></el-input>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button @click="reset">重置</el-button>
</div>
</div>
</div>
<!-- 表格区域 -->
<div class="table-section">
......@@ -259,7 +259,8 @@ const handleSelectionChange = (selection: BackendColumnListItemDto[]) => {
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
gap: 12px 0;
flex-shrink: 0;
.search-select {
......
src/views/backend/contentsMenu/videoManage/index.vue
......@@ -102,14 +102,14 @@ const handleSelectionChange = (selection: BackendColumnListItemDto[]) => {
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<div class="flex-1 flex gap-2">
<el-input v-model="searchParams.title" placeholder="请输入标题" class="w-200px"></el-input>
<div>
<el-input
v-model="searchParams.title"
placeholder="请输入标题"
class="w-200px mr-12px"
></el-input>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button @click="reset">重置</el-button>
</div>
</div>
</div>
<!-- 表格区域 -->
<div class="table-section">
......@@ -252,7 +252,8 @@ const handleSelectionChange = (selection: BackendColumnListItemDto[]) => {
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
gap: 12px 0;
flex-shrink: 0;
.search-select {
......
src/views/backend/goodsDistribution/index.vue
......@@ -2,7 +2,6 @@
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<div class="flex-1 flex gap-2">
<el-input
v-model="searchParams.itemName"
placeholder="请输入商品名称"
......@@ -12,7 +11,7 @@
<el-select
v-model="searchParams.status"
placeholder="请选择发布状态"
class="search-select"
class="search-select mx-12px"
clearable
>
<el-option label="待发货" :value="0" />
......@@ -29,9 +28,17 @@
<el-option label="大转盘" :value="2" />
<el-option label="每日抽奖" :value="3" />
</el-select>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button type="primary" @click="refresh" class="ml-12px">
<el-icon><IEpSearch /></el-icon>
搜索
</el-button>
<el-button @click="reset">重置</el-button>
</div>
<ExportExcelBtn
:api="exportShopItemList"
:searchParams="searchParams"
:columns="columns"
fileName="商品分发数据"
/>
</div>
<!-- 表格区域 -->
......@@ -74,7 +81,9 @@
<el-table-column prop="issueTime" label="发放时间" min-width="200">
<template #default="{ row }">
{{ dayjs(row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
{{
row.issueTime ? dayjs(row.issueTime * 1000).format('YYYY-MM-DD HH:mm:ss') : '未发货'
}}
</template>
</el-table-column>
<el-table-column prop="status" label="发放状态" min-width="200">
......@@ -82,7 +91,7 @@
{{ row.status === 0 ? '待发货' : row.status === 1 ? '已发货' : '已取消' }}
</template>
</el-table-column>
<el-table-column prop="showName" label="发放人备注" min-width="200" />
<el-table-column prop="memo" label="发放人备注" min-width="200" />
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button v-if="row.status === 0" type="primary" link @click="handleIssue(row)">
......@@ -140,7 +149,7 @@
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">
<el-icon class="btn-icon"><Upload /></el-icon>
<el-icon class="btn-icon"><IEpUpload /></el-icon>
保存
</el-button>
</template>
......@@ -149,21 +158,90 @@
</template>
<script setup lang="ts">
import { Search, Upload } from '@element-plus/icons-vue'
import { usePageSearch, useResetData } from '@/hooks'
import { addOrUpdateColumn, getBackendExchangeList, issueProduct } from '@/api/backend'
import {
addOrUpdateColumn,
getBackendExchangeList,
issueProduct,
exportShopItemList,
} from '@/api/backend'
import type { FormInstance, FormRules } from 'element-plus'
import type { BackendColumnListItemDto, AddOrUpdateColumnDto } from '@/api/backend'
import type {
BackendColumnListItemDto,
AddOrUpdateColumnDto,
BackendShopItemDto,
} from '@/api/backend'
import dayjs from 'dayjs'
import { ArticleTypeEnum } from '@/constants'
import ExportExcelBtn from '@/components/common/ExportExcelBtn/index.vue'
import type { ExportColumn } from '@/utils'
const { loading, list, total, reset, goToPage, changePageSize, refresh, searchParams, search } =
usePageSearch(getBackendExchangeList, {
defaultParams: {
type: ArticleTypeEnum.VIDEO,
},
defaultParams: {},
})
const columns: ExportColumn<BackendShopItemDto>[] = [
{
title: '商品名称',
key: 'itemName',
},
{
title: '图片',
key: 'imageUrl',
},
{
title: '来源',
key: 'source',
formatter: (value) => {
return value === 1 ? '商城' : value === 2 ? '大转盘' : '每日抽奖'
},
},
{
title: '兑换数量',
key: 'num',
},
{
title: '兑换时间',
key: 'createTime',
formatter: (value) => {
return dayjs((value as number) * 1000).format('YYYY-MM-DD HH:mm:ss')
},
},
{
title: '兑换人',
key: 'userName',
},
{
title: '发放人',
key: 'issuerName',
},
{
title: '发放备注',
key: 'memo',
},
{
title: '发放时间',
key: 'issueTime',
formatter: (value) => {
return value ? dayjs((value as number) * 1000).format('YYYY-MM-DD HH:mm:ss') : '未发货'
},
},
{
title: '发放状态',
key: 'status',
formatter: (value) => {
return value === 0 ? '待发货' : value === 1 ? '已发货' : '已取消'
},
},
{
title: '发放人备注',
key: 'memo',
},
]
// 对话框
const dialogVisible = ref(false)
const dialogTitle = computed(() => (form.value.id ? '编辑标签' : '新增标签'))
......@@ -261,7 +339,8 @@ const handleSelectionChange = (selection: BackendColumnListItemDto[]) => {
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
gap: 12px 0;
flex-shrink: 0;
.search-select {
......
src/views/backend/goodsManage/index.vue deleted 100644 → 0
<template>
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<div class="flex-1 flex gap-2">
<el-input
v-model="searchParams.name"
placeholder="请输入商品名称"
class="w-200px"
></el-input>
<el-select
v-model="searchParams.itemType"
placeholder="请选择商品类型"
class="search-select"
clearable
>
<el-option label="实物" :value="ShopGoodsTypeEnum.REAL_GOODS" />
<el-option label="虚拟" :value="ShopGoodsTypeEnum.VIRTUAL_GOODS" />
</el-select>
<el-select
v-model="searchParams.region"
placeholder="请选择上架地区"
class="search-select"
clearable
>
<el-option
v-for="item in regionListOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select
v-model="searchParams.enable"
placeholder="是否展示在前台"
class="search-select"
clearable
>
<el-option label="是" :value="BooleanFlag.YES" />
<el-option label="否" :value="BooleanFlag.NO" />
</el-select>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button @click="reset">重置</el-button>
</div>
<div class="flex justify-end">
<el-button type="primary" @click="handleAdd">
<el-icon><Plus /></el-icon>
新增
</el-button>
</div>
</div>
<!-- 表格区域 -->
<div class="table-section">
<!-- 表格 -->
<div class="table-wrapper">
<el-table
v-loading="loading"
:data="list"
height="100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="sortOrder" label="商品排序" min-width="200" />
<el-table-column prop="name" label="商品名称" min-width="200" />
<el-table-column prop="itemTypeName" label="商品类型" min-width="200" />
<el-table-column prop="description" label="商品描述" min-width="200" />
<el-table-column prop="imageUrl" label="图片" width="300">
<template #default="{ row }">
<el-image
:preview-teleported="true"
:src="row.imageUrl"
class="w-20 h-20 object-cover"
:preview-src-list="[row.imageUrl]"
/>
</template>
</el-table-column>
<el-table-column prop="region" label="上架地区" min-width="200"> </el-table-column>
<el-table-column prop="stock" label="库存数量" min-width="200"> </el-table-column>
<el-table-column prop="price" label="兑换所需YA币" min-width="200"> </el-table-column>
<el-table-column prop="showName" label="创建人" min-width="200" />
<el-table-column prop="createTime" label="创建时间" min-width="200">
<template #default="{ row }">
{{ dayjs(row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column prop="enable" label="是否展示在前台" min-width="200">
<template #default="{ row }">
<el-switch
:active-value="1"
:inactive-value="0"
active-text="是"
inactive-text="否"
:model-value="row.enable"
@change="handleEnableChange(row)"
/>
</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="pagination-wrapper">
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:total="total"
:page-sizes="[10, 20, 30]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="changePageSize"
@current-change="goToPage"
/>
</div>
</div>
<!-- 新增/编辑对话框 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="500px"
:close-on-click-modal="false"
>
<el-form ref="formRef" :model="form" :rules="formRules" label-width="auto">
<el-form-item label="商品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入商品名称" />
</el-form-item>
<el-form-item label="商品类型" prop="itemType">
<el-select v-model="form.itemType" placeholder="请选择商品类型">
<el-option label="实物" :value="ShopGoodsTypeEnum.REAL_GOODS" />
<el-option label="虚拟" :value="ShopGoodsTypeEnum.VIRTUAL_GOODS" />
</el-select>
</el-form-item>
<el-form-item label="商品描述" prop="description">
<el-input type="textarea" v-model="form.description" placeholder="请输入商品描述" />
</el-form-item>
<el-form-item label="图片" prop="imageUrl">
<UploadFile v-model="form.imageUrl" :limit="1" />
</el-form-item>
<el-form-item label="上架地区" prop="region">
<el-select v-model="form.region" placeholder="请选择上架地区">
<el-option
v-for="item in regionListOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="兑换所需YA币" prop="price">
<el-input-number v-model="form.price" placeholder="请输入" :min="0" />
</el-form-item>
<el-form-item label="库存数量" prop="stock">
<el-input-number v-model="form.stock" placeholder="请输入" :min="0" />
</el-form-item>
<el-form-item label="排序" prop="sortOrder">
<el-input-number v-model="form.sortOrder" placeholder="请输入" :min="0" />
</el-form-item>
<el-form-item label="是否展示在前台" prop="enable">
<el-switch
v-model="form.enable"
:active-value="1"
:inactive-value="0"
active-text="是"
inactive-text="否"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">
<el-icon class="btn-icon"><Upload /></el-icon>
保存
</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { Search, Plus, Upload } from '@element-plus/icons-vue'
import { usePageSearch, useResetData } from '@/hooks'
import { getShopItemList, addOrUpdateShopItem, deleteShopItem } from '@/api/backend'
import type { FormInstance, FormRules } from 'element-plus'
import type { BackendColumnListItemDto } from '@/api/backend'
import dayjs from 'dayjs'
import { BooleanFlag, ShopGoodsTypeEnum, regionListOptions } from '@/constants'
import UploadFile from '@/components/common/UploadFile/index.vue'
import type { BackendShopItemDto } from '@/api/backend'
const { loading, list, total, reset, goToPage, changePageSize, refresh, searchParams, search } =
usePageSearch(getShopItemList)
// 对话框
const dialogVisible = ref(false)
const dialogTitle = computed(() => (form.value.id ? '编辑标签' : '新增标签'))
const formRef = ref<FormInstance>()
// 表单数据
const [form, resetForm] = useResetData<BackendShopItemDto>({
id: undefined,
sort: 0,
enable: 1,
imageUrl: '',
itemType: ShopGoodsTypeEnum.REAL_GOODS,
name: '',
price: 0,
region: '',
stock: 0,
sortOrder: 0,
description: '',
})
// 表单验证规则
const formRules: FormRules = {
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
color: [{ required: true, message: '请选择颜色', trigger: 'change' }],
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
}
// 新增
const handleAdd = () => {
resetForm()
dialogVisible.value = true
}
// 编辑
const handleEdit = (row: BackendColumnListItemDto) => {
resetForm()
form.value = {
...row,
}
dialogVisible.value = true
}
// 删除
const handleDelete = async (row: BackendColumnListItemDto) => {
try {
await ElMessageBox.confirm(`确定要删除商品"${row.name}"吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
await deleteShopItem(row.id)
refresh()
ElMessage.success('删除成功')
refresh()
} catch (error) {
if (error !== 'cancel') {
ElMessage.error('删除失败')
}
}
}
// 提交表单
const handleSubmit = async () => {
if (!formRef.value) return
try {
await formRef.value.validate()
if (form.value.id) {
await addOrUpdateShopItem(form.value)
} else {
await addOrUpdateShopItem(form.value)
}
ElMessage.success(form.value.id ? '编辑成功' : '新增成功')
dialogVisible.value = false
if (form.value.id) {
search()
} else {
refresh()
}
} catch (error) {
console.error('表单验证失败:', error)
}
}
const selectedRows = ref<BackendColumnListItemDto[]>([])
// 选择
const handleSelectionChange = (selection: BackendColumnListItemDto[]) => {
selectedRows.value = selection
}
const handleEnableChange = async (row: BackendColumnListItemDto) => {
console.log(row)
await addOrUpdateShopItem({
id: row.id,
enable: row.enable === BooleanFlag.YES ? BooleanFlag.NO : BooleanFlag.YES,
})
ElMessage.success('修改成功')
refresh()
}
</script>
<style scoped lang="scss">
.official-tag-page {
height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
// 搜索区域
.search-section {
background: #fff;
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-shrink: 0;
.search-select {
width: 200px;
}
}
// 表格区域
.table-section {
flex: 1;
background: #fff;
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
min-height: 0;
}
.table-wrapper {
flex: 1;
min-height: 0;
.color-cell {
display: flex;
align-items: center;
gap: 12px;
.color-block {
width: 100%;
height: 36px;
border-radius: 4px;
border: 1px solid #e5e7eb;
flex: 1;
}
.color-text {
color: #fff;
font-size: 14px;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
padding-top: 16px;
flex-shrink: 0;
}
// 对话框内的颜色显示
.color-value {
margin-left: 12px;
color: #606266;
font-family: monospace;
}
.btn-icon {
margin-right: 4px;
}
</style>
src/views/backend/index.vue
......@@ -21,8 +21,8 @@ export default defineComponent(() => {
// { path: '/backend/videoSettings', title: '视频——栏目管理' },
// { path: '/backend/videoManage', title: '视频管理' },
{ path: '/backend/caseManage', title: 'YAYA案例库管理' },
{ path: '/backend/goodsManage', title: '积分商城——商品配置' },
{ path: '/backend/goodsDistribution', title: '积分商城——商品分发' },
// { path: '/backend/goodsManage', title: '积分商城——商品配置' },
{ path: '/backend/goodsDistribution', title: '商品分发' },
// 内容管理
{
path: '/backend/contentsMenu',
......
src/views/backend/manager/index.vue deleted 100644 → 0
<!-- views/backend/topic-target/index.vue -->
<template>
<div class="topic-target-page">
<!-- 搜索栏 -->
<div class="search-section">
<el-input
v-model="searchForm.name"
placeholder="请输入栏目板块"
class="search-input"
clearable
/>
<el-select v-model="searchForm.status" placeholder="请选择" class="search-select" clearable>
<el-option label="全部" value="" />
<el-option label="已发布" value="published" />
<el-option label="未发布" value="unpublished" />
</el-select>
<el-button type="primary" @click="handleSearch">搜索</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
<!-- 表格区域 -->
<div class="table-section">
<!-- 操作按钮 -->
<div class="action-bar">
<el-button type="primary" @click="handleAdd">新增</el-button>
<el-button @click="handleBatchPublish">批量发布/隐藏</el-button>
<el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
</div>
<!-- 表格 -->
<div class="table-wrapper">
<el-table
v-loading="loading"
:data="tableData"
height="100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="order" label="栏目顺序" width="100" />
<el-table-column prop="name" label="栏目名称" min-width="150" />
<el-table-column prop="color" label="颜色" width="150">
<template #default="{ row }">
<div class="color-cell">
<div class="color-block" :style="{ backgroundColor: row.color }" />
<span>{{ row.color }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="count" label="栏目标签数量" width="120" />
<el-table-column prop="createTime" label="创建时间" width="180" />
<el-table-column prop="creator" label="创建人" width="180" />
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-switch
v-model="row.published"
active-text="发布"
inactive-text="隐藏"
@change="handleStatusChange(row)"
/>
</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="pagination-wrapper">
<el-pagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.size"
:total="pagination.total"
:page-sizes="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</div>
</div>
<!-- 新增/编辑对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
<el-form-item label="栏目名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入栏目名称" />
</el-form-item>
<el-form-item label="颜色" prop="color">
<el-color-picker v-model="formData.color" />
</el-form-item>
<el-form-item label="顺序" prop="order">
<el-input-number v-model="formData.order" :min="0" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
interface SearchForm {
name: string
status: string
}
interface TableRow {
id: number
order: number
name: string
color: string
count: number
createTime: string
creator: string
published: boolean
}
interface FormData {
id?: number
name: string
color: string
order: number
}
interface Pagination {
page: number
size: number
total: number
}
// 搜索表单
const searchForm = reactive<SearchForm>({
name: '',
status: '',
})
// 表格数据
const loading = ref(false)
const tableData = ref<TableRow[]>([])
const selectedRows = ref<TableRow[]>([])
// 分页
const pagination = reactive<Pagination>({
page: 1,
size: 20,
total: 0,
})
// 对话框
const dialogVisible = ref(false)
const dialogType = ref<'add' | 'edit'>('add')
const formRef = ref<FormInstance>()
const formData = reactive<FormData>({
name: '',
color: '#88FFCB',
order: 0,
})
const dialogTitle = computed(() => {
return dialogType.value === 'add' ? '新增栏目' : '编辑栏目'
})
const formRules: FormRules = {
name: [{ required: true, message: '请输入栏目名称', trigger: 'blur' }],
color: [{ required: true, message: '请选择颜色', trigger: 'change' }],
order: [{ required: true, message: '请输入顺序', trigger: 'blur' }],
}
// 搜索
const handleSearch = () => {
pagination.page = 1
fetchData()
}
// 重置
const handleReset = () => {
searchForm.name = ''
searchForm.status = ''
handleSearch()
}
// 新增
const handleAdd = () => {
dialogType.value = 'add'
Object.assign(formData, {
name: '',
color: '#88FFCB',
order: 0,
})
dialogVisible.value = true
}
// 编辑
const handleEdit = (row: TableRow) => {
dialogType.value = 'edit'
Object.assign(formData, {
id: row.id,
name: row.name,
color: row.color,
order: row.order,
})
dialogVisible.value = true
}
// 删除
const handleDelete = async (row: TableRow) => {
try {
await ElMessageBox.confirm('确定要删除该栏目吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
// TODO: 调用删除接口
ElMessage.success('删除成功')
fetchData()
} catch {
// 取消删除
}
}
// 批量删除
const handleBatchDelete = async () => {
if (selectedRows.value.length === 0) {
ElMessage.warning('请选择要删除的数据')
return
}
try {
await ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 条数据吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
// TODO: 调用批量删除接口
ElMessage.success('删除成功')
fetchData()
} catch {
// 取消删除
}
}
// 批量发布/隐藏
const handleBatchPublish = () => {
if (selectedRows.value.length === 0) {
ElMessage.warning('请选择要操作的数据')
return
}
// TODO: 调用批量发布接口
ElMessage.success('操作成功')
fetchData()
}
// 状态切换
const handleStatusChange = (row: TableRow) => {
// TODO: 调用状态更新接口
ElMessage.success(row.published ? '已发布' : '已隐藏')
}
// 表格选择
const handleSelectionChange = (rows: TableRow[]) => {
selectedRows.value = rows
}
// 提交表单
const handleSubmit = async () => {
if (!formRef.value) return
await formRef.value.validate((valid) => {
if (valid) {
// TODO: 调用新增/编辑接口
ElMessage.success(dialogType.value === 'add' ? '新增成功' : '编辑成功')
dialogVisible.value = false
fetchData()
}
})
}
// 分页变化
const handlePageChange = (page: number) => {
pagination.page = page
fetchData()
}
const handleSizeChange = (size: number) => {
pagination.size = size
pagination.page = 1
fetchData()
}
// 获取数据
const fetchData = async () => {
loading.value = true
try {
// TODO: 调用接口获取数据
// 模拟数据
tableData.value = [
{
id: 123,
order: 123,
name: '专栏标签5',
color: '#88FFCB',
count: 1,
createTime: '2025-11-20 14:15:07',
creator: '178126911664085000',
published: true,
},
{
id: 8,
order: 8,
name: '专栏标签4',
color: '#9878FF',
count: 1,
createTime: '2025-11-20 14:14:49',
creator: '178126911664085000',
published: true,
},
{
id: 0,
order: 0,
name: '专栏标签3',
color: '#f0fdf4',
count: 4,
createTime: '2025-11-10 18:05:37',
creator: '178126911664085000',
published: true,
},
{
id: 11,
order: 11,
name: '专栏标签2',
color: '#fdf2f8',
count: 0,
createTime: '2025-11-10 17:46:40',
creator: '178126911664085000',
published: true,
},
{
id: 3,
order: 3,
name: '专栏标签1',
color: '#eff6ff',
count: 3,
createTime: '2025-11-10 17:46:30',
creator: '178126911664085000',
published: true,
},
]
pagination.total = 5
} catch (error) {
ElMessage.error('获取数据失败')
} finally {
loading.value = false
}
}
onMounted(() => {
fetchData()
})
</script>
<style scoped lang="scss">
.topic-target-page {
height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
// 搜索区域
.search-section {
background: #fff;
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-shrink: 0;
.search-input {
width: 240px;
}
.search-select {
width: 160px;
}
}
// 表格区域 - 占满剩余高度
.table-section {
flex: 1;
background: #fff;
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
min-height: 0; // 重要:允许flex子元素收缩
}
.action-bar {
display: flex;
gap: 12px;
margin-bottom: 16px;
flex-shrink: 0;
}
// 表格包裹器 - 自适应高度
.table-wrapper {
flex: 1;
min-height: 0; // 重要:允许flex子元素收缩
.color-cell {
display: flex;
align-items: center;
gap: 8px;
.color-block {
width: 24px;
height: 24px;
border-radius: 4px;
border: 1px solid #e5e7eb;
}
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
padding-top: 16px;
flex-shrink: 0;
}
</style>
src/views/backend/settingsMenu/auctionManage/components/auctionRecordDialog.vue 0 → 100644
<template>
<el-dialog v-model="visible" title="竞拍记录" width="50%">
<el-table :data="list" style="width: 100%">
<el-table-column prop="userName" label="竞拍人" />
<el-table-column prop="bidTime" label="竞拍时间">
<template #default="{ row }">
{{ dayjs.unix(row.bidTime).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column prop="bidPrice" label="竞拍价格">
<template #default="{ row }"> {{ row.bidPrice }} YA币 </template>
</el-table-column>
</el-table>
<div class="flex justify-end mt-3">
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:total="total"
@size-change="changePageSize"
@current-change="goToPage"
layout="total, sizes, prev, pager, next, jumper"
/>
</div>
</el-dialog>
</template>
<script setup lang="ts">
import { usePageSearch } from '@/hooks'
import { getAuctionRecord } from '@/api/backend'
import dayjs from 'dayjs'
const visible = ref(false)
const { list, total, goToPage, changePageSize, searchParams, search } = usePageSearch(
getAuctionRecord,
{
immediate: false,
},
)
const open = (id: number) => {
searchParams.value.id = id
search()
visible.value = true
}
defineExpose({
open,
})
</script>
src/views/backend/settingsMenu/auctionManage/index.vue 0 → 100644
<template>
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<el-input
v-model="searchParams.name"
placeholder="请输入竞拍名称"
clearable
class="w-200px mr-12px"
></el-input>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button @click="reset">重置</el-button>
<el-button type="primary" @click="handleAdd">
<el-icon><Plus /></el-icon>
新增
</el-button>
<el-button type="primary" @click="handleBatchShow" :disabled="selectedRows.length === 0">
批量修改展示竞拍
</el-button>
<el-button type="danger" @click="handleBatchDelete" :disabled="selectedRows.length === 0">
批量删除
</el-button>
</div>
<!-- 表格区域 -->
<div class="table-section">
<!-- 表格 -->
<div class="table-wrapper">
<el-table
v-loading="loading"
:data="list"
height="100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="createUserName" label="发布人" width="100" />
<el-table-column prop="createdAt" label="发布时间" width="200">
<template #default="{ row }">
{{ dayjs(row.createdAt * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column prop="name" label="名称" width="200" />
<el-table-column prop="imageUrl" label="图片" width="150">
<template #default="{ row }">
<el-image
v-if="row.imageUrl"
:preview-teleported="true"
:src="row.imageUrl"
class="w-20 h-20 object-cover"
:preview-src-list="[row.imageUrl]"
/>
<span v-else>暂无图片</span>
</template>
</el-table-column>
<el-table-column
prop="description"
label="介绍内容"
width="200"
:ellipsis="true"
:show-overflow-tooltip="{
placement: 'top',
popperClass: 'max-w-300',
}"
>
</el-table-column>
<el-table-column prop="quantity" label="数量" width="100"> </el-table-column>
<el-table-column prop="specification" label="规格" width="100"> </el-table-column>
<el-table-column prop="startingPrice" label="起拍价" width="100" />
<el-table-column prop="minIncrement" label="最低加价幅度" width="150" />
<el-table-column prop="currentPrice" label="当前出价" width="150" />
<el-table-column prop="bidLimit" label="竞拍次数上限" width="150" />
<el-table-column prop="startTime" label="竞拍时间" width="320">
<template #default="{ row }">
{{ dayjs(row.startTime * 1000).format('YYYY-MM-DD HH:mm:ss') }} ~
{{ dayjs(row.endTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column prop="statusDesc" label="展示竞拍" width="100">
<template #default="{ row }">
{{ row.isDisplay === 1 ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column prop="showName" label="竞拍状态" width="100">
<template #default="{ row }">
{{
// 未展示的时候不展示竞拍状态
row.isDisplay === 0
? ''
: auctionStatusListOptions.find((item) => item.value === row.status)?.label
}}
</template>
</el-table-column>
<el-table-column label="操作" width="180" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
<el-button type="primary" link @click="handleAuctionRecord(row)">竞拍记录</el-button>
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="pagination-wrapper">
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:total="total"
:page-sizes="[10, 20, 30]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="changePageSize"
@current-change="goToPage"
/>
</div>
</div>
<!-- 新增/编辑对话框 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="510px"
top="5vh"
:close-on-click-modal="false"
>
<el-scrollbar height="650px" class="pr-4">
<el-form ref="formRef" :model="form" :rules="formRules" label-width="auto">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称（最多25个字符）" maxlength="25" />
</el-form-item>
<el-form-item label="图片" prop="imageUrl">
<UploadFile v-model="form.imageUrl" :limit="1" />
</el-form-item>
<el-form-item label="介绍内容" prop="description">
<el-input v-model="form.description" type="textarea" placeholder="请输入介绍内容" />
</el-form-item>
<el-form-item label="数量" prop="quantity">
<el-input-number
class="w-60%!"
v-model="form.quantity"
:min="1"
controls-position="right"
/>
</el-form-item>
<el-form-item label="规格" prop="specification">
<el-input
v-model="form.specification"
placeholder="请输入规格（最多4个字符）"
maxlength="4"
/>
</el-form-item>
<el-form-item label="起拍价" prop="startingPrice">
<el-input-number
class="w-60%!"
v-model="form.startingPrice"
:min="1"
controls-position="right"
/>
</el-form-item>
<el-form-item label="最低加价幅度" prop="minIncrement">
<el-input-number
class="w-60%!"
v-model="form.minIncrement"
:min="1"
controls-position="right"
/>
</el-form-item>
<el-form-item label="竞拍次数上限" prop="bidLimit">
<el-input-number
class="w-60%!"
v-model="form.bidLimit"
:min="1"
controls-position="right"
/>
</el-form-item>
<el-form-item label="竞拍时间" prop="startTime">
<el-date-picker
v-model="dateRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
value-format="X"
/>
</el-form-item>
<el-form-item label="展示竞拍" prop="isDisplay">
<el-switch
v-model="form.isDisplay"
:active-value="1"
:inactive-value="0"
active-text="是"
inactive-text="否"
/>
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">
<el-icon class="btn-icon"><Upload /></el-icon>
保存
</el-button>
</template>
</el-dialog>
<AuctionRecordDialog ref="auctionRecordDialogRef" />
</div>
</template>
<script setup lang="tsx">
import { Search, Plus, Upload } from '@element-plus/icons-vue'
import { usePageSearch, useResetData } from '@/hooks'
import {
getBackendAuctionList,
addOrUpdateAuctionItem,
deleteAuction,
batchUpdateShowAuction,
} from '@/api/backend'
import type { FormInstance, FormRules } from 'element-plus'
import type { BackendAuctionListItemDto, BackendAddOrUpdateAuctionItemDto } from '@/api/backend'
import { auctionStatusListOptions } from '@/constants'
import UploadFile from '@/components/common/UploadFile/index.vue'
import AuctionRecordDialog from './components/auctionRecordDialog.vue'
import dayjs from 'dayjs'
const { loading, list, total, reset, goToPage, changePageSize, refresh, searchParams, search } =
usePageSearch(getBackendAuctionList)
const auctionRecordDialogRef = ref<InstanceType<typeof AuctionRecordDialog>>()
// 对话框
const dialogVisible = ref(false)
const dialogTitle = computed(() => (form.value.id ? '编辑标签' : '新增标签'))
const formRef = ref<FormInstance>()
// 表单数据
const [form, resetForm] = useResetData<BackendAddOrUpdateAuctionItemDto>({
id: undefined,
imageUrl: '',
name: '',
description: '',
quantity: 1,
specification: '',
startingPrice: 0,
minIncrement: 0,
bidLimit: 0,
isDisplay: 0,
startTime: '',
endTime: '',
})
// 表单验证规则
const formRules: FormRules = {
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
description: [{ required: true, message: '请输入介绍内容', trigger: 'blur' }],
quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
specification: [{ required: true, message: '请输入规格', trigger: 'blur' }],
startingPrice: [{ required: true, message: '请输入起拍价', trigger: 'blur' }],
minIncrement: [{ required: true, message: '请输入最低加价幅度', trigger: 'blur' }],
bidLimit: [{ required: true, message: '请输入竞拍次数上限', trigger: 'blur' }],
startTime: [{ required: true, message: '请选择竞拍时间', trigger: 'change' }],
isDisplay: [{ required: true, message: '请选择是否展示在前台', trigger: 'blur' }],
imageUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
}
const dateRange = computed({
get() {
if (form.value.startTime && form.value.endTime) {
return [form.value.startTime, form.value.endTime]
}
return []
},
set(value) {
if (value) {
form.value.startTime = value[0] || ''
form.value.endTime = value[1] || ''
} else {
form.value.startTime = ''
form.value.endTime = ''
}
},
})
const submitLoading = ref(false)
// 新增
const handleAdd = () => {
resetForm()
dialogVisible.value = true
}
// 编辑
const handleEdit = (row: BackendAddOrUpdateAuctionItemDto) => {
resetForm()
form.value = {
...row,
}
dialogVisible.value = true
}
// 删除
const handleDelete = async (row: BackendAuctionListItemDto) => {
try {
await ElMessageBox.confirm(`确定要删除竞拍物品"${row.name}"吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
await deleteAuction([row.id])
refresh()
ElMessage.success('删除成功')
refresh()
} catch (error) {
if (error !== 'cancel') {
ElMessage.error('删除失败')
}
}
}
// 提交表单
const handleSubmit = async () => {
if (!formRef.value) return
try {
submitLoading.value = true
await formRef.value.validate()
if (form.value.id) {
await addOrUpdateAuctionItem(form.value)
} else {
await addOrUpdateAuctionItem(form.value)
}
ElMessage.success(form.value.id ? '编辑成功' : '新增成功')
dialogVisible.value = false
if (form.value.id) {
search()
} else {
refresh()
}
} catch (error) {
console.error('表单验证失败:', error)
} finally {
submitLoading.value = false
}
}
const handleBatchShow = async () => {
const show = ref(1)
await ElMessageBox({
title: '是否展示竞拍',
message: () => (
<el-radio-group v-model={show.value}>
<el-radio value={1}>是</el-radio>
<el-radio value={0}>否</el-radio>
</el-radio-group>
),
showCancelButton: true,
async beforeClose(action, instance, done) {
if (action === 'confirm') {
instance.confirmButtonLoading = true
try {
await batchUpdateShowAuction({
idList: selectedRows.value.map((item) => item.id),
isDisplay: show.value,
})
ElMessage.success('批量修改展示竞拍成功')
refresh()
done()
} catch (error) {
console.error(error)
} finally {
instance.confirmButtonLoading = false
}
} else {
done()
}
},
})
}
const handleBatchDelete = async () => {
await ElMessageBox.confirm('确定要删除这些竞拍物品吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
await deleteAuction(selectedRows.value.map((item) => item.id))
refresh()
ElMessage.success('删除成功')
}
const selectedRows = ref<BackendAuctionListItemDto[]>([])
// 选择
const handleSelectionChange = (selection: BackendAuctionListItemDto[]) => {
selectedRows.value = selection
}
const handleAuctionRecord = async (row: BackendAuctionListItemDto) => {
auctionRecordDialogRef.value?.open(row.id)
}
</script>
<style scoped lang="scss">
.official-tag-page {
height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
// 搜索区域
.search-section {
background: #fff;
border-radius: 8px;
padding: 20px;
display: flex;
flex-wrap: wrap;
gap: 12px 0;
flex-shrink: 0;
.search-select {
width: 200px;
}
}
// 表格区域
.table-section {
flex: 1;
background: #fff;
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
min-height: 0;
}
.table-wrapper {
flex: 1;
min-height: 0;
.color-cell {
display: flex;
align-items: center;
gap: 12px;
.color-block {
width: 100%;
height: 36px;
border-radius: 4px;
border: 1px solid #e5e7eb;
flex: 1;
}
.color-text {
color: #fff;
font-size: 14px;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
padding-top: 16px;
flex-shrink: 0;
}
// 对话框内的颜色显示
.color-value {
margin-left: 12px;
color: #606266;
font-family: monospace;
}
.btn-icon {
margin-right: 4px;
}
</style>
src/views/backend/settingsMenu/goodsManage/index.vue
......@@ -2,17 +2,12 @@
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<div class="flex-1 flex gap-2">
<el-input
v-model="searchParams.name"
placeholder="请输入商品名称"
class="w-200px"
></el-input>
<el-input v-model="searchParams.name" placeholder="请输入商品名称" class="w-200px"></el-input>
<el-select
v-model="searchParams.itemType"
placeholder="请选择商品类型"
class="search-select"
class="search-select mx-12px"
clearable
>
<el-option label="实物" :value="ShopGoodsTypeEnum.REAL_GOODS" />
......@@ -34,23 +29,23 @@
<el-select
v-model="searchParams.enable"
placeholder="是否展示在前台"
class="search-select"
class="search-select mx-12px"
clearable
>
<el-option label="是" :value="BooleanFlag.YES" />
<el-option label="否" :value="BooleanFlag.NO" />
</el-select>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button type="primary" @click="refresh">
<el-icon><IEpSearch /></el-icon>
搜索
</el-button>
<el-button @click="reset">重置</el-button>
</div>
<div class="flex justify-end">
<el-button type="primary" @click="handleAdd">
<el-icon><Plus /></el-icon>
<el-icon><IEpPlus /></el-icon>
新增
</el-button>
</div>
</div>
<!-- 表格区域 -->
<div class="table-section">
......@@ -182,7 +177,7 @@
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">
<el-icon class="btn-icon"><Upload /></el-icon>
<el-icon class="btn-icon"><IEpUpload /></el-icon>
保存
</el-button>
</template>
......@@ -191,7 +186,6 @@
</template>
<script setup lang="ts">
import { Search, Plus, Upload } from '@element-plus/icons-vue'
import { usePageSearch, useResetData } from '@/hooks'
import { getShopItemList, addOrUpdateShopItem, deleteShopItem } from '@/api/backend'
import type { FormInstance, FormRules } from 'element-plus'
......@@ -322,7 +316,8 @@ const handleEnableChange = async (row: BackendColumnListItemDto) => {
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
gap: 12px 0;
flex-shrink: 0;
.search-select {
......
src/views/backend/tags/index.vue
......@@ -13,12 +13,14 @@
<el-option label="年度主推关键词" value="year_recommend" />
<el-option label="关联场景" value="related_scenarios" />
</el-select>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button type="primary" @click="refresh" class="ml-12px">
<el-icon><IEpSearch /></el-icon>
搜索
</el-button>
<el-button @click="reset">重置</el-button>
<el-button type="primary" class="add-btn" @click="handleAdd">
<el-icon><Plus /></el-icon>
<el-button type="primary" @click="handleAdd">
<el-icon><IEpPlus /></el-icon>
新增
</el-button>
</div>
......@@ -108,7 +110,9 @@
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">
<el-icon class="btn-icon"><Upload /></el-icon>
<el-icon class="btn-icon"
><el-icon><IEpUpload /></el-icon
></el-icon>
保存
</el-button>
</template>
......@@ -117,7 +121,6 @@
</template>
<script setup lang="ts">
import { Search, Plus, Upload } from '@element-plus/icons-vue'
import { usePageSearch, useResetData } from '@/hooks'
import { getTagList, addOrUpdateTag, deleteTag } from '@/api/backend'
import type { FormInstance, FormRules } from 'element-plus'
......@@ -228,16 +231,12 @@ const handleSubmit = async () => {
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
flex-shrink: 0;
gap: 12px 0;
.search-select {
width: 200px;
}
.add-btn {
margin-left: auto;
}
}
// 表格区域
......
src/views/backend/videoManage/index.vue deleted 100644 → 0
<template>
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<div class="flex-1 flex gap-2">
<el-input
v-model="searchParams.title"
placeholder="请输入栏目标题"
class="w-200px"
></el-input>
<el-select
v-model="searchParams.status"
placeholder="请选择发布状态"
class="search-select"
clearable
>
<el-option label="发布" :value="1" />
<el-option label="隐藏" :value="0" />
</el-select>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button @click="reset">重置</el-button>
</div>
<!-- <div class="flex justify-end">
<el-button type="primary" @click="handleAdd">
<el-icon><Plus /></el-icon>
新增
</el-button>
<el-button type="primary" @click="handleBatchPublish"> 批量发布/隐藏 </el-button>
<el-button type="danger" @click="handleBatchDelete"> 批量删除 </el-button>
</div> -->
</div>
<!-- 表格区域 -->
<div class="table-section">
<!-- 表格 -->
<div class="table-wrapper">
<el-table
v-loading="loading"
:data="list"
height="100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="title" label="视频标题" min-width="200" />
<el-table-column prop="content" label="视频简介" min-width="200" />
<el-table-column prop="faceUrl" label="视频封面" width="300">
<template #default="{ row }">
<el-image
:preview-teleported="true"
:src="row.faceUrl"
class="w-20 h-20 object-cover"
:preview-src-list="[row.faceUrl]"
/>
</template>
</el-table-column>
<el-table-column prop="videoUrl" label="视频地址" min-width="200">
<template #default="{ row }">
<el-link type="primary" :href="row.videoUrl" target="_blank" :underline="false">
{{ row.videoUrl }}
</el-link>
</template>
</el-table-column>
<el-table-column prop="releaseStatus" label="标签" min-width="200">
<template #default="{ row }">
<el-tag
v-for="tag in row.tagNameList"
:key="tag.tagId"
type="primary"
class="mr-2! mb-2!"
>
{{ tag }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="status" label="是否置顶" min-width="200">
<template #default="{ row }">
<el-switch
:model-value="row.isRecommend"
:active-value="1"
:inactive-value="0"
@change="handleIsRecommendChange(row)"
/>
</template>
</el-table-column>
<el-table-column prop="showName" label="创建人" min-width="200" />
<el-table-column prop="createTime" label="创建时间" min-width="200">
<template #default="{ row }">
{{ dayjs(row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<!-- <el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column> -->
</el-table>
</div>
<!-- 分页 -->
<div class="pagination-wrapper">
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:total="total"
:page-sizes="[10, 20, 30]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="changePageSize"
@current-change="goToPage"
/>
</div>
</div>
<!-- 新增/编辑对话框 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="500px"
:close-on-click-modal="false"
>
<el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
<el-form-item label="标题" prop="title">
<el-input v-model="form.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item label="颜色" prop="color">
<el-color-picker v-model="form.color" />
<span class="color-value">{{ form.color }}</span>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" :min="0" :max="100" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">
<el-icon class="btn-icon"><Upload /></el-icon>
保存
</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { Search, Upload } from '@element-plus/icons-vue'
import { usePageSearch, useResetData } from '@/hooks'
import { addOrUpdateColumn, deleteColumn, hideColumn } from '@/api/backend'
import { getArticleList, updateArticleRecommendAndSort } from '@/api'
import type { FormInstance, FormRules } from 'element-plus'
import type { BackendColumnListItemDto, AddOrUpdateColumnDto } from '@/api/backend'
import dayjs from 'dayjs'
import { ArticleTypeEnum } from '@/constants'
const { loading, list, total, reset, goToPage, changePageSize, refresh, searchParams, search } =
usePageSearch(getArticleList, {
defaultParams: {
type: ArticleTypeEnum.VIDEO,
},
})
// 对话框
const dialogVisible = ref(false)
const dialogTitle = computed(() => (form.value.id ? '编辑标签' : '新增标签'))
const formRef = ref<FormInstance>()
// 表单数据
const [form, resetForm] = useResetData<AddOrUpdateColumnDto>({
title: '',
color: '#000000',
id: undefined,
sort: 0,
type: 'column',
})
// 表单验证规则
const formRules: FormRules = {
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
color: [{ required: true, message: '请选择颜色', trigger: 'change' }],
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
}
// 新增
const handleAdd = () => {
resetForm()
dialogVisible.value = true
}
// 编辑
const handleEdit = (row: BackendColumnListItemDto) => {
resetForm()
form.value = {
title: row.title,
color: row.color,
id: row.id,
sort: row.sort,
type: 'column',
}
dialogVisible.value = true
}
// 是否置顶改变
const handleIsRecommendChange = async (row: ArticleItemDto) => {
await updateArticleRecommendAndSort(row.id)
ElMessage.success('修改成功')
refresh()
}
// 删除
const handleDelete = async (row: BackendColumnListItemDto) => {
try {
await ElMessageBox.confirm(`确定要删除标签"${row.title}"吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
await deleteColumn([row.id])
ElMessage.success('删除成功')
refresh()
} catch (error) {
if (error !== 'cancel') {
ElMessage.error('删除失败')
}
}
}
// 提交表单
const handleSubmit = async () => {
if (!formRef.value) return
try {
await formRef.value.validate()
if (form.value.id) {
await addOrUpdateColumn(form.value)
} else {
await addOrUpdateColumn(form.value)
}
ElMessage.success(form.value.id ? '编辑成功' : '新增成功')
dialogVisible.value = false
if (form.value.id) {
search()
} else {
refresh()
}
} catch (error) {
console.error('表单验证失败:', error)
}
}
const selectedRows = ref<BackendColumnListItemDto[]>([])
// 选择
const handleSelectionChange = (selection: BackendColumnListItemDto[]) => {
selectedRows.value = selection
}
// 批量发布/隐藏
const handleBatchPublish = async () => {
await hideColumn(selectedRows.value.map((item) => item.id))
refresh()
selectedRows.value = []
ElMessage.success('发布/隐藏成功')
}
// 批量删除
const handleBatchDelete = async () => {
await deleteColumn(selectedRows.value.map((item) => item.id))
refresh()
selectedRows.value = []
ElMessage.success('删除成功')
}
</script>
<style scoped lang="scss">
.official-tag-page {
height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
// 搜索区域
.search-section {
background: #fff;
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-shrink: 0;
.search-select {
width: 200px;
}
}
// 表格区域
.table-section {
flex: 1;
background: #fff;
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
min-height: 0;
}
.table-wrapper {
flex: 1;
min-height: 0;
.color-cell {
display: flex;
align-items: center;
gap: 12px;
.color-block {
width: 100%;
height: 36px;
border-radius: 4px;
border: 1px solid #e5e7eb;
flex: 1;
}
.color-text {
color: #fff;
font-size: 14px;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
padding-top: 16px;
flex-shrink: 0;
}
// 对话框内的颜色显示
.color-value {
margin-left: 12px;
color: #606266;
font-family: monospace;
}
.btn-icon {
margin-right: 4px;
}
</style>
src/views/backend/videoSettings/index.vue deleted 100644 → 0
<template>
<div class="official-tag-page">
<!-- 搜索栏 -->
<div class="search-section">
<div class="flex-1 flex gap-2">
<el-input
v-model="searchParams.title"
placeholder="请输入栏目标题"
class="w-200px"
clearable
></el-input>
<el-select
v-model="searchParams.status"
placeholder="请选择发布状态"
class="search-select"
clearable
>
<el-option label="发布" :value="1" />
<el-option label="隐藏" :value="0" />
</el-select>
<el-button type="primary" :icon="Search" @click="refresh">搜索</el-button>
<el-button @click="reset">重置</el-button>
</div>
<div class="flex justify-end">
<el-button type="primary" @click="handleAdd">
<el-icon><Plus /></el-icon>
新增
</el-button>
<el-button type="primary" @click="handleBatchPublish"> 批量发布/隐藏 </el-button>
<el-button type="danger" @click="handleBatchDelete"> 批量删除 </el-button>
</div>
</div>
<!-- 表格区域 -->
<div class="table-section">
<!-- 表格 -->
<div class="table-wrapper">
<el-table
v-loading="loading"
:data="list"
height="100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="sort" label="栏目顺序" width="180"> </el-table-column>
<el-table-column prop="title" label="栏目名称" min-width="200" />
<el-table-column prop="postCount" label="栏目帖子数量" min-width="200" />
<el-table-column prop="color" label="颜色" width="300">
<template #default="{ row }">
<div class="color-cell">
<div class="color-block" :style="{ backgroundColor: row.color }" />
<span class="color-text">{{ row.color }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="createUserId" label="创建人" min-width="200" />
<el-table-column prop="createTime" label="创建时间" min-width="200">
<template #default="{ row }">
{{ dayjs(row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column prop="status" label="状态" min-width="200">
<template #default="{ row }">
<el-switch
:model-value="row.status"
:active-value="1"
:inactive-value="0"
@change="handleStatusChange(row)"
/>
</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="pagination-wrapper">
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:total="total"
:page-sizes="[10, 20, 30]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="changePageSize"
@current-change="goToPage"
/>
</div>
</div>
<!-- 新增/编辑对话框 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="500px"
:close-on-click-modal="false"
>
<el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
<el-form-item label="标题" prop="title">
<el-input v-model="form.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item label="颜色" prop="color">
<el-color-picker v-model="form.color" />
<span class="color-value">{{ form.color }}</span>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" :min="0" :max="100" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">
<el-icon class="btn-icon"><Upload /></el-icon>
保存
</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { Search, Plus, Upload } from '@element-plus/icons-vue'
import { usePageSearch, useResetData } from '@/hooks'
import { listOfCultureColumn, addOrUpdateColumn, deleteColumn, hideColumn } from '@/api/backend'
import type { FormInstance, FormRules } from 'element-plus'
import type { BackendColumnListItemDto, AddOrUpdateColumnDto } from '@/api/backend'
import dayjs from 'dayjs'
const { loading, list, total, reset, goToPage, changePageSize, refresh, searchParams, search } =
usePageSearch(listOfCultureColumn, {
defaultParams: {
type: 'video',
},
})
// 对话框
const dialogVisible = ref(false)
const dialogTitle = computed(() => (form.value.id ? '编辑标签' : '新增标签'))
const formRef = ref<FormInstance>()
// 表单数据
const [form, resetForm] = useResetData<AddOrUpdateColumnDto>({
title: '',
color: '#000000',
id: undefined,
sort: 0,
type: 'video',
})
// 表单验证规则
const formRules: FormRules = {
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
color: [{ required: true, message: '请选择颜色', trigger: 'change' }],
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
}
// 新增
const handleAdd = () => {
resetForm()
dialogVisible.value = true
}
// 编辑
const handleEdit = (row: BackendColumnListItemDto) => {
resetForm()
form.value = {
title: row.title,
color: row.color,
id: row.id,
sort: row.sort,
type: 'video',
}
dialogVisible.value = true
}
// 状态改变
const handleStatusChange = async (row: BackendColumnListItemDto) => {
await hideColumn([row.id])
refresh()
}
// 删除
const handleDelete = async (row: BackendColumnListItemDto) => {
try {
await ElMessageBox.confirm(`确定要删除标签"${row.title}"吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
await deleteColumn([row.id])
ElMessage.success('删除成功')
refresh()
} catch (error) {
if (error !== 'cancel') {
ElMessage.error('删除失败')
}
}
}
// 提交表单
const handleSubmit = async () => {
if (!formRef.value) return
try {
await formRef.value.validate()
if (form.value.id) {
await addOrUpdateColumn(form.value)
} else {
await addOrUpdateColumn(form.value)
}
ElMessage.success(form.value.id ? '编辑成功' : '新增成功')
dialogVisible.value = false
if (form.value.id) {
search()
} else {
refresh()
}
} catch (error) {
console.error('表单验证失败:', error)
}
}
const selectedRows = ref<BackendColumnListItemDto[]>([])
// 选择
const handleSelectionChange = (selection: BackendColumnListItemDto[]) => {
selectedRows.value = selection
}
// 批量发布/隐藏
const handleBatchPublish = async () => {
await hideColumn(selectedRows.value.map((item) => item.id))
refresh()
selectedRows.value = []
ElMessage.success('发布/隐藏成功')
}
// 批量删除
const handleBatchDelete = async () => {
await deleteColumn(selectedRows.value.map((item) => item.id))
refresh()
selectedRows.value = []
ElMessage.success('删除成功')
}
</script>
<style scoped lang="scss">
.official-tag-page {
height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
// 搜索区域
.search-section {
background: #fff;
border-radius: 8px;
padding: 20px;
display: flex;
gap: 12px;
flex-shrink: 0;
.search-select {
width: 200px;
}
}
// 表格区域
.table-section {
flex: 1;
background: #fff;
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
min-height: 0;
}
.table-wrapper {
flex: 1;
min-height: 0;
.color-cell {
display: flex;
align-items: center;
gap: 12px;
.color-block {
width: 100%;
height: 36px;
border-radius: 4px;
border: 1px solid #e5e7eb;
flex: 1;
}
.color-text {
color: #fff;
font-size: 14px;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
padding-top: 16px;
flex-shrink: 0;
}
// 对话框内的颜色显示
.color-value {
margin-left: 12px;
color: #606266;
font-family: monospace;
}
.btn-icon {
margin-right: 4px;
}
</style>
src/views/userPage/components/selfActivity.vue 0 → 100644
<template>
<div class="flex-1 flex flex-col" v-loading="loading">
<div class="flex-1 p-4 pt-1">
<div class="relative">
<el-tabs v-model="searchParams.type" @tab-change="toggleTab">
<el-tab-pane
v-for="tab in activityTypeListOptions"
:key="tab.value"
:label="tab.label"
:name="tab.value"
/>
</el-tabs>
<div class="absolute right-0 top-2.5 z-1000">
<el-icon
size="15"
class="cursor-pointer hover:rotate-180 transition-all duration-300"
@click="refresh"
><IEpRefresh
/></el-icon>
</div>
</div>
<!-- 加一行提示 -->
<div class="flex justify-end">
<p class="text-gray-500 text-sm mb-1 flex items-center gap-1">
<el-icon><IEpInfoFilled /></el-icon>
页面仅展示竞拍成功的记录
</p>
</div>
<div v-if="!list.length" class="flex flex-col items-center justify-center h-64">
<div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
<el-icon class="text-2xl text-gray-300"><IEpDocument /></el-icon>
</div>
<div class="text-gray-500 text-lg mb-2">暂无内容</div>
</div>
<div v-else class="space-y-4">
<el-table height="500" :data="list" stripe border>
<el-table-column prop="name" label="名称" />
<el-table-column prop="startingPrice" label="起拍价" />
<el-table-column prop="bidPrice" label="支出YA币" />
</el-table>
</div>
</div>
<div
v-if="list.length"
class="flex items-center justify-end px-6 py-4 border-t border-gray-200"
>
<div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2">
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
@size-change="changePageSize"
@current-change="goToPage"
:page-sizes="[10, 20, 30, 40]"
layout="prev, pager, next, jumper, total"
:total="total"
class="custom-pagination"
/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { getSelfAuctionRecord } from '@/api'
import { usePageSearch } from '@/hooks'
import { activityTypeListOptions } from '@/constants/options'
import { ActivityTypeEnum } from '@/constants/enums'
import type { TabPaneName } from 'element-plus'
const toggleTab = (key: TabPaneName) => {
searchParams.value.type = key as ActivityTypeEnum
refresh()
}
const { list, loading, searchParams, total, refresh, goToPage, changePageSize } = usePageSearch(
getSelfAuctionRecord,
{
defaultParams: {
type: activityTypeListOptions[0]!.value,
},
immediate: false,
},
)
onActivated(() => {
searchParams.value.type = activityTypeListOptions[0]!.value
refresh()
})
defineExpose({
refresh: () => {
searchParams.value.type = activityTypeListOptions[0]!.value
refresh()
},
})
</script>
src/views/userPage/index.vue
......@@ -365,7 +365,7 @@ const handleSwitchAccount = async () => {
cutEmail: selectedEmail.value,
})
console.log(data)
sessionStorage.clear()
localStorage.clear()
await userStore.getUserInfoByCode({
code: data,
isCodeLogin: 1,
......@@ -386,7 +386,6 @@ const handleSwitchAccount = async () => {
}
const handleBackUser = () => {
sessionStorage.clear()
wxLogin(route.fullPath)
}
......@@ -402,7 +401,7 @@ const handleClearCache = async () => {
userId: userInfo.value.userId,
})
// 清理sessionStorage
sessionStorage.clear()
localStorage.clear()
await userStore.getUserInfoByCode({
code: data,
isCodeLogin: 1,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment