From 93bfb1c5512db9feceb16cd3084a92d4dedf615e Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期四, 19 六月 2025 19:58:23 +0800
Subject: [PATCH] 客户管理（详情）
---
manager/src/views/activity/index.vue | 1746 +++++++++++++++++++++++++++++++++++----------------------
1 files changed, 1,076 insertions(+), 670 deletions(-)
diff --git a/manager/src/views/activity/index.vue b/manager/src/views/activity/index.vue
index a285ea2..26a2c42 100644
--- a/manager/src/views/activity/index.vue
+++ b/manager/src/views/activity/index.vue
@@ -1,29 +1,30 @@
<template>
- <div>
- <card>
+ <div class="activity-management">
+ <Card>
+ <!-- 鎼滅储琛ㄥ崟 -->
<Form
ref="searchForm"
@keydown.enter.native="handleSearch"
:model="searchForm"
inline
- :label-width="70"
+ :label-width="80"
class="search-form"
>
- <Form-item label="娲诲姩鍚�" prop="activityName">
+ <FormItem label="娲诲姩鍚嶇О" prop="activityName">
<Input
type="text"
v-model="searchForm.activityName"
+ placeholder="璇疯緭鍏ユ椿鍔ㄥ悕绉�"
clearable
@on-clear="handleSearch"
- @on-change="handleSearch"
- style="width: 160px"
+ style="width: 180px"
/>
- </Form-item>
- <Form-item label="娲诲姩绫诲瀷" prop="activityType">
+ </FormItem>
+ <FormItem label="娲诲姩绫诲瀷" prop="activityType">
<Select
v-model="searchForm.activityType"
- style="width:260px"
- class="custom-select"
+ placeholder="璇烽�夋嫨娲诲姩绫诲瀷"
+ style="width: 180px"
clearable
@on-clear="handleSearch"
@on-change="handleSearch"
@@ -33,97 +34,131 @@
:value="item.value"
:key="item.id"
>
- {{ item.value }}
+ {{ item.label }}
</Option>
</Select>
- </Form-item>
- <Form-item label="娲诲姩鎶ュ悕寮�濮嬫椂闂�" prop="reportStartTime">
- <DatePicker :value="searchForm.reportStartTime"
- type="datetime" placeholder="閫夋嫨鏃ユ湡"
- @on-change="handleSearch('reportStart',$event)"
- @on-clear="handleSearch"
- ></DatePicker>
- </Form-item>
- <Form-item label="娲诲姩鎶ュ悕缁撴潫鏃堕棿" prop="reportEndTime">
- <DatePicker :value="searchForm.reportEndTime"
- type="datetime" placeholder="閫夋嫨鏃ユ湡"
- @on-clear="handleSearch"
- @on-change="handleSearch('reportEnd',$event)"></DatePicker>
- </Form-item>
-<!-- <Form-item label="鐘舵��" prop="status">-->
-<!-- <Input-->
-<!-- type="text"-->
-<!-- v-model="searchForm.status"-->
-<!-- clearable-->
-<!-- @on-clear="handleSearch"-->
-<!-- @on-change="handleSearch"-->
-<!-- style="width: 160px"-->
-<!-- />-->
-<!-- </Form-item>-->
+ </FormItem>
+ <FormItem label="鎶ュ悕寮�濮嬫椂闂�" prop="reportStartTime">
+ <DatePicker
+ :value="searchForm.reportStartTime"
+ type="datetime"
+ placeholder="閫夋嫨寮�濮嬫椂闂�"
+ style="width: 180px"
+ @on-change="handleSearch('reportStart', $event)"
+ @on-clear="handleSearch"
+ ></DatePicker>
+ </FormItem>
+ <FormItem label="鎶ュ悕缁撴潫鏃堕棿" prop="reportEndTime">
+ <DatePicker
+ :value="searchForm.reportEndTime"
+ type="datetime"
+ placeholder="閫夋嫨缁撴潫鏃堕棿"
+ style="width: 180px"
+ @on-clear="handleSearch"
+ @on-change="handleSearch('reportEnd', $event)"
+ ></DatePicker>
+ </FormItem>
<Button
@click="handleSearch"
type="primary"
icon="ios-search"
class="search-btn"
- >鎼滅储</Button
- >
+ >鎼滅储</Button>
+ <Button
+ @click="resetSearch"
+ icon="md-refresh"
+ style="margin-left: 8px"
+ >閲嶇疆</Button>
</Form>
- <Row class="operation padding-row">
- <Button @click="openAdd" type="info">娣诲姞</Button>
- <Button @click="delBatch" type="error">鎵归噺鍒犻櫎</Button>
+
+ <!-- 鎿嶄綔鎸夐挳 -->
+ <Row class="operation">
+ <Button @click="openAdd" type="primary" icon="md-add">鏂板娲诲姩</Button>
+ <Button @click="delBatch" type="error" icon="md-trash" :disabled="selectCount === 0">鎵归噺鍒犻櫎</Button>
</Row>
+ <!-- 娲诲姩琛ㄦ牸 -->
<Table
:loading="loading"
border
:columns="columns"
:data="activityList"
ref="table"
- sortable="custom"
- @on-sort-change="changeSort"
@on-selection-change="showSelect"
+ class="activity-table"
>
- <template slot-scope="{ row }" slot="url">
+ <!-- 灏侀潰灞曠ず鎻掓Ы -->
+ <template slot-scope="{ row }" slot="url">
+ <div class="media-container">
<!-- 鍥剧墖绫诲瀷 -->
- <template v-if="row.coverType === '鍥剧墖'">
- <img width="300" height="300"
- :src="row.url"
- alt="灏侀潰"
- class="thumbnail"
- @click="previewImage(row.url)"
- @error="handleImageError"
- >
+ <template v-if="row.coverType === 'image'">
+ <img
+ :src="row.url"
+ alt="娲诲姩灏侀潰"
+ class="thumbnail"
+ @click="previewImage(row.url)"
+ >
</template>
<!-- 瑙嗛绫诲瀷 -->
- <template v-else-if="row.coverType === '瑙嗛'">
- <video width="300"
- height="300"
- :src="row.url"
- class="video-player"
- controls
- @error="handleVideoError"
- ></video>
+ <template v-else-if="row.coverType === 'video'">
+ <video
+ :src="row.url"
+ class="video-player"
+ controls
+ ></video>
</template>
<!-- 鏂囧瓧绫诲瀷 -->
- <template v-else-if="row.coverType === text">
- {{ row.cover || '鏆傛棤鏂囧瓧鍐呭' }}
+ <template v-else>
+ <div class="text-cover">{{ row.cover || '鏆傛棤灏侀潰鍐呭' }}</div>
</template>
+ </div>
</template>
- <template slot-scope="{ row, index }" slot="action">
- <Button type="info" size="small" style="margin-right: 5px" @click="changeRecommend(row,row.recommend === true ? '鍙栨秷鎺ㄨ崘' : '鎺ㄨ崘')">
- {{ row.recommend === true ? '鍙栨秷鎺ㄨ崘' : '鎺ㄨ崘' }}
- </Button>
- <Button type="info" size="small" style="margin-right: 5px" @click="changeStatus(row,row.status === '宸插彂甯�' ? '涓嬫灦' : '鍙戝竷')">
- {{ row.status === '宸插彂甯�' ? '涓嬫灦' : '鍙戝竷' }}
- </Button>
- <Button type="info" size="small" style="margin-right: 5px" @click="openEdit(row)">缂栬緫鏍囩</Button>
- <Button type="error" size="small" style="margin-right: 5px" @click="delById(row)">鍒犻櫎</Button>
- <Button type="info" size="small" style="margin-right: 5px" @click="openMembersModal(row)">
- 鎶ュ悕浜哄憳鍒楄〃
- </Button>
+
+ <!-- 鎿嶄綔鎸夐挳鎻掓Ы -->
+ <template slot-scope="{ row }" slot="action">
+ <div class="action-btns">
+ <Button
+ type="primary"
+ size="small"
+ @click="changeRecommend(row, row.recommend ? '鍙栨秷鎺ㄨ崘' : '鎺ㄨ崘')"
+ :loading="row.recommendLoading"
+ >
+ {{ row.recommend ? '鍙栨秷鎺ㄨ崘' : '鎺ㄨ崘' }}
+ </Button>
+ <Button
+ type="primary"
+ size="small"
+ @click="changeStatus(row, row.publish ? '涓嬫灦' : '鍙戝竷')"
+ :loading="row.statusLoading"
+ >
+ {{ row.publish ? '涓嬫灦' : '鍙戝竷' }}
+ </Button>
+ <Button
+ type="info"
+ size="small"
+ @click="detail(row)"
+ >璇︽儏</Button>
+ <Button
+ type="info"
+ size="small"
+ @click="openEdit(row)"
+ >缂栬緫</Button>
+ <Button
+ type="error"
+ size="small"
+ @click="delById(row)"
+ >鍒犻櫎</Button>
+ <Button
+ type="success"
+ size="small"
+ @click="openMembersModal(row)"
+ >鎶ュ悕浜哄憳</Button>
+ </div>
</template>
</Table>
- <Row type="flex" justify="end" class="mt_10">
+
+ <!-- 鍒嗛〉 -->
+ <Row type="flex" justify="end" class="page-footer">
<Page
:current="searchForm.pageNumber"
:total="total"
@@ -138,68 +173,70 @@
></Page>
</Row>
-
+ <!-- 娲诲姩缂栬緫/鏂板妯℃�佹 -->
<Modal
v-model="modelShow"
:title="modelTitle"
- @close="modelClose()"
+ @on-cancel="modelClose"
width="800"
+ :mask-closable="false"
>
- <Form ref="form" :model="activityFrom" :label-width="70" :rules="rules" >
+ <Form ref="form" :model="activityFrom" :label-width="100" :rules="rules">
<Row :gutter="16">
<Col span="12">
<FormItem label="娲诲姩鍚嶇О" prop="activityName">
<Input
- type="text"
v-model="activityFrom.activityName"
+ placeholder="璇疯緭鍏ユ椿鍔ㄥ悕绉�"
clearable
- style="width: 300px"
/>
</FormItem>
</Col>
<Col span="12">
- <FormItem label="娲诲姩绫诲瀷" prop="activityType" >
+ <FormItem label="娲诲姩绫诲瀷" prop="activityType" :label-width="100">
<Select
v-model="activityFrom.activityType"
- class="custom-select"
+ placeholder="璇烽�夋嫨娲诲姩绫诲瀷"
clearable
- style="width: 100px;"
>
<Option
v-for="item in typeSelect"
:value="item.value"
:key="item.id"
>
- {{ item.value }}
+ {{ item.label }}
</Option>
</Select>
</FormItem>
</Col>
<Col span="12">
<FormItem label="鎶ュ悕鏃堕棿娈�" prop="reportTime">
- <DatePicker v-model="activityFrom.reportTime" style="width: 300px"
- :value="activityFrom.reportTime"
- @on-change="activityFrom.reportTime =$event"
- format="yyyy-MM-dd HH:mm:ss"
- type="datetimerange" placeholder="璇烽�夋嫨"></DatePicker>
+ <DatePicker
+ v-model="activityFrom.reportTime"
+ type="datetimerange"
+ format="yyyy-MM-dd HH:mm"
+ placeholder="璇烽�夋嫨鎶ュ悕鏃堕棿娈�"
+ style="width: 100%"
+ ></DatePicker>
</FormItem>
</Col>
<Col span="12">
<FormItem label="娲诲姩鏃堕棿娈�" prop="time">
- <DatePicker v-model="activityFrom.time" style="width: 300px"
- :value="activityFrom.time"
- @on-change="activityFrom.time =$event"
- format= "yyyy-MM-dd HH:mm:ss"
- type="datetimerange" placeholder="璇烽�夋嫨"></DatePicker>
+ <DatePicker
+ v-model="activityFrom.time"
+ type="datetimerange"
+ format="yyyy-MM-dd HH:mm"
+ placeholder="璇烽�夋嫨娲诲姩鏃堕棿娈�"
+ style="width: 100%"
+ ></DatePicker>
</FormItem>
</Col>
- <Col span="24">
- <FormItem label="灏侀潰" prop="cover">
+ <Col span="12">
+ <FormItem label="灏侀潰绫诲瀷" prop="coverType" :labelWidth="100">
<Select
v-model="coverType"
- class="custom-select"
- clearable
- style="width: 150px;"
+ placeholder="璇烽�夋嫨灏侀潰绫诲瀷"
+ @on-change="handleCoverTypeChange"
>
<Option
v-for="item in coverTypeOptions"
@@ -209,66 +246,86 @@
{{ item.value }}
</Option>
</Select>
- <template>
- <div v-if="coverTypeJudgment('text')">
- <template>
- <Input
- type="text"
- v-model="activityFrom.cover"
- clearable
- style="width: 300px"
- placeholder="杈撳叆鏂囨湰鎴栭�夋嫨鏂囦欢"
- />
- </template>
- </div>
- <div v-if="coverTypeJudgment('file')">
- <Upload
- :before-upload="handleBeforeUpload"
- action="">
- <Button icon="ios-cloud-upload-outline">涓婁紶</Button>
- </Upload>
- <div v-if="file !== null">
- Upload file: {{ file.name }}
- <Button type="text" @click="handleRemove" :loading="loadingStatus">
- {{ loadingStatus ? '涓婁紶涓�' : '鍒犻櫎' }}
- </Button>
- </div>
- </div>
- </template>
- </FormItem>
- </Col>
-
-
-
- <Col span="24">
- <FormItem label="娲诲姩鍐呭" prop="activityContent">
- <Input v-model="activityFrom.activityContent" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="杈撳叆" />
</FormItem>
</Col>
- </ROW>
+ <Col span="24" v-if="coverType === '杈撳叆鏂囧瓧灏侀潰'">
+ <FormItem label="灏侀潰鏂囧瓧" prop="cover">
+ <Input
+ v-model="activityFrom.cover"
+ type="textarea"
+ :rows="2"
+ placeholder="璇疯緭鍏ュ皝闈㈡枃瀛�"
+ style="width: 50%"
+ />
+ </FormItem>
+ </Col>
+ <Col span="24" v-if="coverType === '閫夋嫨鏂囦欢灏侀潰'">
+ <FormItem label="涓婁紶灏侀潰" prop="cover">
+ <Upload
+ :before-upload="handleBeforeUpload"
+ :format="['jpg','jpeg','png','gif','mp4','mov']"
+ :max-size="20480"
+ action=""
+ accept="image/*,video/*"
+ >
+ <Button icon="ios-cloud-upload-outline">涓婁紶灏侀潰鏂囦欢</Button>
+ <div class="upload-tip">鏀寔鍥剧墖鎴栬棰戞枃浠讹紝鏈�澶�20MB</div>
+ </Upload>
+ <div v-if="file" class="upload-file-info">
+ 宸查�夋枃浠�: {{ file.name }}
+ <Button type="text" @click="handleRemove">鍒犻櫎</Button>
+ </div>
+ </FormItem>
+ </Col>
+ <!-- 杩欎袱涓〃鍗曢」鍦ㄥ悓涓�Row鍐咃紝浼氭樉绀哄湪鍚屼竴琛� -->
+ <Col span="12">
+ <FormItem label="浜烘暟闄愬埗" prop="limitUserNum">
+ <InputNumber
+ v-model="activityFrom.limitUserNum"
+ :min="1"
+ placeholder="璇疯緭鍏ユ渶澶т汉鏁�"
+ style="width: 100%"
+ />
+ </FormItem>
+ </Col>
+ <Col span="12">
+ <FormItem label="娲诲姩鍦扮偣" prop="activityLocation">
+ <Input
+ v-model="activityFrom.activityLocation"
+ placeholder="璇疯緭鍏ユ椿鍔ㄥ湴鐐�"
+ />
+ </FormItem>
+ </Col>
+ <Col span="24">
+ <FormItem label="娲诲姩鍐呭锛�" prop="activityContent">
+ <editor ref="editor" @input="getReason" />
+ </FormItem>
+ </Col>
+ </Row>
</Form>
<div slot="footer">
- <Button type="text" @click="modelClose">鍙栨秷</Button>
+ <Button @click="modelClose">鍙栨秷</Button>
<Button type="primary" :loading="submitLoading" @click="saveOrUpdate">鎻愪氦</Button>
</div>
</Modal>
-
+ <!-- 鎶ュ悕浜哄憳妯℃�佹 -->
<Modal
v-model="membersModelShow"
:title="membersModelTitle"
- @close="membersModelClose()"
- width="1000">
+ @on-cancel="membersModelClose"
+ width="1000"
+ class="members-modal"
+ >
<Table
:loading="membersLoading"
border
:columns="membersColumns"
:data="membersList"
- ref="table"
- >
- </Table>
- <Row type="flex" justify="end" class="mt_10">
+ class="members-table"
+ ></Table>
+ <Row type="flex" justify="end" class="page-footer">
<Page
:current="memberForm.pageNumber"
:total="memberTotal"
@@ -284,114 +341,218 @@
</Row>
</Modal>
+ <Modal
+ v-model="infoModelShow"
+ :title="modelTitle"
+ @on-cancel="infoModelClose"
+ width="800"
+ :mask-closable="false"
+ >
+ <div class="detail-container">
+ <Row :gutter="16">
+ <Col span="12">
+ <div class="detail-item">
+ <label>娲诲姩鍚嶇О锛�</label>
+ <span>{{ activityInfo.activityName || '-' }}</span>
+ </div>
+ </Col>
+ <Col span="12">
+ <div class="detail-item">
+ <label>娲诲姩绫诲瀷锛�</label>
+ <span>{{activityInfo.activityType === 'online' ? '绾夸笂':'绾夸笅'}}</span>
+ </div>
+ </Col>
+ <Col span="12">
+ <div class="detail-item">
+ <label>鎶ュ悕鏃堕棿娈碉細</label>
+ <span>{{ activityInfo.reportStartTime }} - {{ activityInfo.reportEndTime }}</span>
+ </div>
+ </Col>
+ <Col span="12">
+ <div class="detail-item">
+ <label>娲诲姩鏃堕棿娈碉細</label>
+ <span>{{ activityInfo.startTime }} - {{ activityInfo.endTime }}</span>
+ </div>
+ </Col>
- </card>
+ <Col span="24" v-if="coverType === '杈撳叆鏂囧瓧灏侀潰'">
+ <div class="detail-item">
+ <label>灏侀潰鏂囧瓧锛�</label>
+ <span>{{ activityInfo.cover || '-' }}</span>
+ </div>
+ </Col>
+ <Col span="24" v-if="coverType === '閫夋嫨鏂囦欢灏侀潰'">
+ <div class="detail-item">
+ <label>涓婁紶灏侀潰锛�</label>
+ <span>{{ activityInfo.cover }}</span>
+ </div>
+ </Col>
+ <Col span="12">
+ <div class="detail-item">
+ <label>浜烘暟闄愬埗锛�</label>
+ <span>{{ activityInfo.limitUserNum || '鏃犻檺鍒�' }}</span>
+ </div>
+ </Col>
+ <Col span="12">
+ <div class="detail-item">
+ <label>娲诲姩鍦扮偣锛�</label>
+ <span>{{ activityInfo.activityLocation || '-' }}</span>
+ </div>
+ </Col>
+ <Col span="24">
+ <div class="detail-item">
+ <label>娲诲姩鍐呭锛�</label>
+ <div
+ class="activity-content"
+ v-html="activityInfo.activityContent || '鏃犲唴瀹�'"
+ ></div>
+ </div>
+ </Col>
+ </Row>
+ </div>
+
+ <div slot="footer">
+ <Button @click="infoModelClose">鍏抽棴</Button>
+ </div>
+ </Modal>
+
+
+ <!-- 鍥剧墖棰勮妯℃�佹 -->
+ <Modal v-model="previewVisible" title="鍥剧墖棰勮" footer-hide>
+ <img :src="previewImageUrl" style="width: 100%">
+ </Modal>
+ </Card>
</div>
</template>
+
<script>
-import JsonExcel from "vue-json-excel";
-
-import {getActivityList,addActivity,editActivity,delActivityById,activityChangeStatus,activityChangeRecommend,activityMembersPage} from "@/api/activity.js"
-import {uploadFileByLmk,delByKey,getUrl} from "@/api/common.js"
-
-
+import {
+ getActivityList,
+ addActivity,
+ editActivity,
+ delActivityById,
+ activityChangeStatus,
+ activityChangeRecommend,
+ activityMembersPage
+} from "@/api/activity.js"
+import Editor from '@/components/editor/index.vue'
+import { uploadFileByLmk, delByKey } from "@/api/common.js"
export default {
- name:"activity",
- components:{
- "download-excel": JsonExcel,
- },
- data(){
- return{
- loading: false, // 琛ㄥ崟鍔犺浇鐘舵��
- typeSelect:[
- {
- id:1,
- value:'绾夸笂'
- },
- {
- id:2,
- value:'绾夸笅'
- }
- ],
- coverTypeOptions:[
- {
- id:1,
- value: '杈撳叆鏂囧瓧灏侀潰'
- },
- {
- id:2,
- value: '閫夋嫨鏂囦欢灏侀潰'
- },
- ],
- membersLoading:false, //鍙傚姞娲诲姩浜哄憳琛ㄥ崟
- membersModelTitle:'',
- membersModelShow:false,
- membersList:[],
- membersColumns: [
- {
- type: 'selection',
- width: 60,
- align: 'center'
- },
- {
- title:'鐢ㄦ埛鍚�',
- key: 'username',
- minWidth: 60,
- tooltip: true,
- },
- {
- title:'鏄电О',
- key: 'nickName',
- minWidth: 60,
- tooltip: true,
- },
- {
- title:'鎬у埆',
- key: 'sex',
- tooltip: true,
- render: (h, params) => {
- const sexText = params.row.sex === 1 ? '鐢�' : '濂�';
- return h('span', sexText);
- }
- },
- {
- title:'鍦板潃',
- key: 'region',
- minWidth: 60,
- tooltip: true,
- },
- {
- title:'鐘舵��',
- key: 'disabled',
- tooltip: true,
- render: (h, params) => {
- const sexText = params.row.disabled === true ? '绂佺敤' : '姝ｅ父';
- return h('span', sexText);
- }
- },
- ],
- memberForm:{
- id:'',
- pageNumber: 1, // 褰撳墠椤垫暟
- pageSize: 10, // 椤甸潰澶у皬
- },
- memberTotal:0,
+ name: "ActivityManagement",
+ components: {Editor},
+ data() {
+ return {
+ infoModelShow:false,
- coverType:'',
- //鏌ヨ娲诲姩鍒楄〃璇锋眰鍙傛暟
- searchForm:{
- activityName:'',// 娲诲姩鍚嶇О
- activityType:'',// 娲诲姩绫诲瀷
- recommend:'',// 鎺ㄨ崘
- reportStartTime:'',// 娲诲姩鎶ュ悕鏃堕棿
- reportEndTime:'',// 娲诲姩缁撴潫鏃堕棿
- pageNumber: 1, // 褰撳墠椤垫暟
- pageSize: 10, // 椤甸潰澶у皬
+ loading: false,
+ membersLoading: false,
+ submitLoading: false,
+
+ // 鎼滅储琛ㄥ崟
+ searchForm: {
+ activityName: '',
+ activityType: '',
+ reportStartTime: '',
+ reportEndTime: '',
+ pageNumber: 1,
+ pageSize: 10
},
+ // 娲诲姩鍒楄〃鏁版嵁
+ activityList: [],
+ total: 0,
+ selectList: [],
+ selectCount: 0,
+ // 娲诲姩绫诲瀷閫夐」
+ typeSelect: [
+ { id: 1, value: 'online',label:'绾夸笂' },
+ { id: 2, value: 'offline',label:'绾夸笅' }
+ ],
- //娲诲姩鍒楄〃琛ㄥご
+ // 灏侀潰绫诲瀷閫夐」
+ coverTypeOptions: [
+ { id: 1, value: '杈撳叆鏂囧瓧灏侀潰' },
+ { id: 2, value: '閫夋嫨鏂囦欢灏侀潰' }
+ ],
+ coverType: '',
+ file: null,
+
+ // 娲诲姩琛ㄥ崟
+ activityFrom: {
+ id: '',
+ activityName: '',
+ activityType: '',
+ reportTime: [],
+ time: [],
+ activityContent: '',
+ cover: '',
+ coverType: '',
+ status: '',
+ reportStartTime: '',
+ reportEndTime: '',
+ startTime: '',
+ endTime: '',
+ recommend: false,
+ limitUserNum: 0,
+ activityLocation: '',
+ },
+ activityInfo: {
+ id: '',
+ activityName: '',
+ activityType: '',
+ reportTime: [],
+ time: [],
+ activityContent: '',
+ cover: '',
+ coverType: '',
+ status: '',
+ reportStartTime: '',
+ reportEndTime: '',
+ startTime: '',
+ endTime: '',
+ recommend: false,
+ limitUserNum: 0,
+ activityLocation: '',
+ },
+
+ // 琛ㄥ崟楠岃瘉瑙勫垯
+ rules: {
+ activityName: [
+ { required: true, message: '璇疯緭鍏ユ椿鍔ㄥ悕绉�', trigger: 'blur' },
+ { max: 50, message: '闀垮害涓嶈兘瓒呰繃50涓瓧绗�', trigger: 'blur' }
+ ],
+ activityType: [
+ { required: true, message: '璇烽�夋嫨娲诲姩绫诲瀷', trigger: 'change' }
+ ],
+ reportTime: [
+ { type: 'array', required: true, message: '璇烽�夋嫨鎶ュ悕鏃堕棿娈�', trigger: 'change' },
+ { validator: this.validateReportTime, trigger: 'change' }
+ ],
+ time: [
+ { type: 'array', required: true, message: '璇烽�夋嫨娲诲姩鏃堕棿娈�', trigger: 'change' },
+ { validator: this.validateActivityTime, trigger: 'change' }
+ ],
+ cover: [
+ { required: true, message: '璇疯緭鍏ュ皝闈㈠唴瀹�', trigger: 'blur' }
+ ],
+ coverType: [
+ { required: true, message: '璇烽�夋嫨灏侀潰绫诲瀷', trigger: 'blur' }
+ ],
+ limitUserNum: [
+ { required: true, type: 'number', message: '璇疯緭鍏ヤ汉鏁伴檺鍒�', trigger: 'blur' },
+ { type: 'number', min: 1, message: '浜烘暟涓嶈兘灏戜簬1浜�', trigger: 'blur' }
+ ],
+ activityLocation: [
+ { required: true, message: '璇疯緭鍏ユ椿鍔ㄥ湴鐐�', trigger: 'blur' },
+ { max: 100, message: '闀垮害涓嶈兘瓒呰繃100涓瓧绗�', trigger: 'blur' }
+ ],
+ activityContent: [
+ { required: true, message: '璇疯緭鍏ユ椿鍔ㄥ唴瀹�', trigger: 'blur' }
+ ]
+ },
+
+ // 琛ㄦ牸鍒楅厤缃�
columns: [
{
type: 'selection',
@@ -399,519 +560,764 @@
align: 'center'
},
{
- title:'娲诲姩鍚�',
+ title: '娲诲姩鍚嶇О',
key: 'activityName',
- minWidth: 60,
- tooltip: true,
+ minWidth: 120,
+ tooltip: true
},
{
- title:'娲诲姩绫诲瀷',
+ title: '娲诲姩绫诲瀷',
key: 'activityType',
- tooltip: true,
- },
- // {
- // title:'鐘舵��',
- // key: 'status',
- // tooltip: true,
- // },
- {
- title:'鎺ㄨ崘',
- key: 'recommend',
-
- tooltip: true,
+ width: 100,
+ align: 'center',
render: (h, params) => {
- const sexText = params.row.recommend === true ? '鏄�' : '鍚�';
- return h('span', sexText);
+ return h('Tag', {
+ }, params.row.activityType === 'online' ? '绾夸笂' : '绾夸笅')
}
},
{
- title:'娲诲姩鎶ュ悕寮�濮嬫椂闂�',
- key: 'reportStartTime',
- minWidth: 60,
- tooltip: true,
+ title: '鎺ㄨ崘',
+ key: 'recommend',
+ width: 80,
+ align: 'center',
+ render: (h, params) => {
+ return h('Tag', {
+ props: {
+ color: params.row.recommend ? 'green' : 'default'
+ }
+ }, params.row.recommend ? '鏄�' : '鍚�')
+ }
},
{
- title:'娲诲姩鎶ュ悕缁撴潫鏃堕棿',
- key: 'reportEndTime',
- minWidth: 60,
- tooltip: true,
+ title: '鍙戝竷',
+ key: 'publish',
+ width: 100,
+ align: 'center',
+ render: (h, params) => {
+ return h('Tag', {
+ props: {
+ color: params.row.publish ? 'green' : 'default'
+ }
+ }, params.row.publish ? '宸插彂甯�' : '鏈彂甯�')
+ }
},
{
- title:'娲诲姩寮�濮嬫椂闂�',
- key: 'reportEndTime',
- minWidth: 60,
- tooltip: true,
+ title: '鐘舵��',
+ key: 'status',
+ width: 100,
+ align: 'center',
+ render: (h, params) => {
+ const status = params.row.status;
+ const statusMap = {
+ 'noStart': { text: '鏈紑濮�', color: 'default' },
+ 'report': { text: '鎶ュ悕涓�', color: 'green' },
+ 'inProgress':{ text:'杩涜涓�',color:'cyan'},
+ 'end': { text: '宸茬粨鏉�', color: 'red' }
+ };
+ const currentStatus = statusMap[status] || { text: status, color: 'default' };
+ return h('Tag', {
+ props: {
+ color: currentStatus.color
+ }
+ }, currentStatus.text);
+ }
},
{
- title:'娲诲姩缁撴潫鏃堕棿',
- key: 'reportEndTime',
- minWidth: 60,
- tooltip: true,
+ title: '娲诲姩鏃堕棿娈�',
+ key: 'activityTimeRange',
+ width: 300,
+ render: (h, params) => {
+ return h('div', [
+ h('div', `寮�濮�: ${this.formatDate(params.row.startTime)}`),
+ h('div', `缁撴潫: ${this.formatDate(params.row.endTime)}`)
+ ])
+ }
},
{
- title:'灏侀潰',
+ title: '灏侀潰',
key: 'url',
- slot:"url",
- minWidth: 400,
- tooltip: true,
+ slot: 'url',
+ width: 150,
+ align: 'center'
},
{
- title:'灏侀潰绫诲瀷',
+ title: '灏侀潰绫诲瀷',
key: 'coverType',
- tooltip: true,
+ width: 100,
+ align: 'center',
+ render: (h, params) => {
+ const typeMap = {
+ text: '鏂囨湰',
+ video: '瑙嗛',
+ image: '鍥剧墖'
+ };
+ const text = typeMap[params.row.coverType] || params.row.coverType;
+ return h('span', text);
+ }
},
{
- title:'鏈�澶ф姤鍚嶄汉鏁伴檺鍒�',
+ title: '浜烘暟闄愬埗',
key: 'limitUserNum',
- tooltip: true,
+ width: 100,
+ align: 'center'
},
{
- title:'娲诲姩鍦扮偣',
+ title: '娲诲姩鍦扮偣',
key: 'activityLocation',
- tooltip: true,
- },
- {
- title:'娲诲姩璇︾粏鍐呭',
- key: 'activityContent',
- tooltip: true,
+ minWidth: 120,
+ tooltip: true
},
{
title: '鎿嶄綔',
- key: 'action',
slot: 'action',
- minWidth: 100,
- align: 'center'
+ width: 280,
+ align: 'center',
+ fixed: 'right'
}
-
],
- //娲诲姩鍒楄〃鏁版嵁
- activityList:[],
- total:0,
- selectCount: 0, // 宸查�夋暟閲�
- selectList: [], // 宸查�夋暟鎹垪琛�
- //娲诲姩瀵硅瘽妗�---
-
- modelShow:false,
- submitLoading:false,
- modelTitle:'',
- activityFrom:{
- id:'',
- activityName:'',
- activityType:'',
- reportTime:[],
- time:[],
- activityContent:'', // 娲诲姩鍐呭
- cover:'', //image/2025052014565362541.jpg
- coverType:'',
- status:'', //娲诲姩鐘舵��
- reportStartTime:'',
- reportEndTime:'',
- startTime:'',
- endTime:'',
- recommend:'',
-
- // 鎶ュ悕鏉′欢
- // 鎶ュ悕璐圭敤
+ // 鎶ュ悕浜哄憳鐩稿叧
+ membersModelShow: false,
+ membersModelTitle: '',
+ membersList: [],
+ memberForm: {
+ id: '',
+ pageNumber: 1,
+ pageSize: 10
},
-
- rules: {
- activityName: {required: true, message: "娲诲姩鍚嶇О", trigger: "blur"},
- activityType: {required: true, message: "娲诲姩绫诲瀷", trigger: "blur"},
- reportTime: [{type: 'array',
- required: true,
- message: "鎶ュ悕鏃ユ湡", trigger: "change"
+ memberTotal: 0,
+ membersColumns: [
+ {
+ type: 'selection',
+ width: 60,
+ align: 'center'
},
- {
- validator: (rule, value, callback) => {
- // 鑾峰彇娲诲姩鏃堕棿锛堥�氳繃闂寘璁块棶琛ㄥ崟鏁版嵁锛�
- const activityTime = this.activityFrom.time;
-
- // 瑙ｆ瀽鏃堕棿锛堝寮哄仴澹�э級
- const parseTime = (timeStr) => {
- const date = new Date(timeStr);
- return isNaN(date.getTime()) ? NaN : date.getTime();
- };
-
- const reportStart = parseTime(value[0]);
- const reportEnd = parseTime(value[1]);
- const activityStart = parseTime(activityTime[0]);
- const activityEnd = parseTime(activityTime[1]);
- // 鏍稿績楠岃瘉閫昏緫
- if (reportStart > activityStart || reportEnd > activityStart) {
- callback(new Error('鎶ュ悕鏃堕棿娈靛繀椤诲湪娲诲姩寮�濮嬫椂闂村墠'));
- } else {
- callback();
+ {
+ title: '鐢ㄦ埛鍚�',
+ key: 'username',
+ minWidth: 100
+ },
+ {
+ title: '鏄电О',
+ key: 'nickName',
+ minWidth: 100
+ },
+ {
+ title: '鎬у埆',
+ key: 'sex',
+ width: 80,
+ render: (h, params) => {
+ return h('Tag', {
+ props: {
+ color: params.row.sex === 1 ? 'blue' : 'magenta'
}
- },
- trigger: 'change'
+ }, params.row.sex === 1 ? '鐢�' : '濂�')
}
- ],
- // time: [{type: 'array',
- // required: true,
- // fields: {
- // 0: {type: 'date', required: true, message: '璇烽�夋嫨璧锋鏃ユ湡'},
- // 1: {type: 'date', required: true, message: '璇烽�夋嫨璧锋鏃ユ湡'}
- // }
- // }],
- time: [{type: 'array',
- required: true,
- message: "娲诲姩鏃ユ湡", trigger: "change"
- }],
- activityContent: {required: true, message: "娲诲姩鍐呭", trigger: "blur"},
- cover: {required: true, message: "灏侀潰", trigger: "blur"},
- },
- // 涓婁紶
- file: null,
- loadingStatus: false,
- text:'鏂囧瓧',
+ },
+ {
+ title: '鍦板尯',
+ key: 'region',
+ minWidth: 120
+ },
+ {
+ title: '鐘舵��',
+ key: 'disabled',
+ width: 100,
+ render: (h, params) => {
+ return h('Tag', {
+ props: {
+ color: params.row.disabled ? 'red' : 'green'
+ }
+ }, params.row.disabled ? '绂佺敤' : '姝ｅ父')
+ }
+ }
+ ],
+
+ // 鍥剧墖棰勮
+ previewVisible: false,
+ previewImageUrl: '',
+
+ // 妯℃�佹鎺у埗
+ modelShow: false,
+ modelTitle: ''
}
},
- mounted(){
- this.init();
+ mounted() {
+ this.init()
},
- methods:{
- activityMembersPage(){
- this.membersLoading = true;
- activityMembersPage(this.memberForm).then(res =>{
- this.membersLoading = false;
- if (res.code === 200){
- this.membersList = res.data;
- this.memberTotal = res.total;
- }
- });
+ methods: {
+ detail(row){
+ this.modelTitle = '娲诲姩璇︽儏'
+ this.infoModelShow = true
+ this.activityInfo = row
},
- openMembersModal(row){
- this.memberForm.id = row.id
- this.membersModelTitle = "鎶ュ悕浜哄憳"
- this.membersModelShow = true;
- this.activityMembersPage();
+ // 鑾峰彇瀵屾枃鏈紪杈戝櫒鐨勫唴瀹�
+ getReason(content) {
+ this.activityFrom.activityContent = content
},
- membersModelClose(){
- this.membersModelShow = false;
+ // 鍒濆鍖栨暟鎹�
+ init() {
+ this.getActivityList()
},
- changeRecommend(row,recommend){
- const form = {
- ...this.activityFrom
- };
- form.id = row.id;
- if (recommend === "鍙栨秷鎺ㄨ崘"){
- form.recommend = false
- }else if (recommend ==="鎺ㄨ崘"){
- form.recommend = true
- }
-
- activityChangeRecommend(form).then(res =>{
- if (res.code === 200){
- this.getActivityList();
- }
- })
- },
- changeStatus(row,status){
- const form = {
- ...this.activityFrom
- };
- form.id = row.id;
- if (status === "鍙戝竷"){
- form.status = "宸插彂甯�"
- }else if (status ==="涓嬫灦"){
- form.status = "宸蹭笅鏋�"
- }
-
- activityChangeStatus(form).then(res =>{
- if (res.code === 200){
- this.getActivityList();
- }
- })
- },
- coverTypeJudgment(type){
- if (this.coverType === '杈撳叆鏂囧瓧灏侀潰' && type === 'text'){
- this.activityFrom.coverType = this.text;
- return true;
- }
- if (this.coverType === '閫夋嫨鏂囦欢灏侀潰' && type === 'file'){
- return true;
- }
- return false
- },
- //鑷姩涓婁紶 false
- handleBeforeUpload (file) {
- const fileCategory = this.getFileCategory(file.type);
- console.log('鏂囦欢鍒嗙被:', fileCategory); // 杈撳嚭锛氬浘鐗�/瑙嗛/鏂囨。 绛�
- // 2. 浣犵殑鍏朵粬閫昏緫锛堝绫诲瀷楠岃瘉锛�
- if (fileCategory === '鏈煡') {
- this.$Message.error('涓嶆敮鎸佺殑鏂囦欢绫诲瀷');
- return false;
- }
- this.file = file;
- this.activityFrom.coverType = fileCategory;
- this.upload();
- return false
- },
- getFileCategory(mimeType) {
- // MIME绫诲瀷鍓嶇紑鏄犲皠琛�
- const mimeMap = {
- 'jpg' : '鍥剧墖',
- 'image': '鍥剧墖', // image/jpeg, image/png 绛�
- 'video': '瑙嗛', // video/mp4, video/quicktime 绛�
- 'audio': '闊抽', // audio/mpeg, audio/wav 绛�
- 'application': '鏂囨。' // application/pdf, application/msword 绛�
- };
-
- // 鑾峰彇绫诲瀷鍓嶇紑锛堝 image/png 鈫� image锛�
- const typePrefix = mimeType.split('/')[0];
-
- // 杩斿洖瀵瑰簲鍒嗙被鎴栨湭鐭�
- return mimeMap[typePrefix] || '鏈煡';
- },
-
- //涓婁紶鍥剧墖鎺ュ彛
- upload () {
- this.submitLoading = true;
- this.loadingStatus = true;
- const formData = new FormData()
- formData.append('file', this.file)
- uploadFileByLmk(formData).then(res =>{
- this.loadingStatus = false;
- this.submitLoading = false;
- if (res.code === 200){
- this.activityFrom.cover = res.data.fileKey;
- this.$Message.success(res.msg)
- }
- })
- },
- handleRemove(){
- this.file = null
- this.loadingStatus = true;
- delByKey(this.activityFrom.cover).then(res =>{
- this.loadingStatus = false;
- if (res.code === 200){
- this.activityFrom.cover = null;
- }
- })
-
- },
-
- // 鑾峰緱瀹㈡埛琛ㄦ牸淇℃伅
- getActivityList(){
- this.loading = true;
- getActivityList(this.searchForm).then(res =>{
- this.loading = false;
+ // 鑾峰彇娲诲姩鍒楄〃
+ getActivityList() {
+ this.loading = true
+ getActivityList(this.searchForm).then(res => {
+ this.loading = false
if (res.code === 200) {
- this.activityList = res.data;
- this.total = res.total;
+ // 涓烘瘡涓�琛屾坊鍔爈oading鐘舵��
+ this.activityList = res.data.map(item => ({
+ ...item,
+ recommendLoading: false,
+ statusLoading: false
+ }))
+ this.total = res.total
}
+ }).catch(() => {
+ this.loading = false
})
},
- init(){
- this.getActivityList();
- },
- changeSort(){
+ // 鎼滅储娲诲姩
+ handleSearch(type, value) {
+ if (type === 'reportStart') {
+ this.searchForm.reportStartTime = value
+ } else if (type === 'reportEnd') {
+ this.searchForm.reportEndTime = value
+ }
+
+ this.searchForm.pageNumber = 1
+ this.getActivityList()
},
- showSelect(){
- this.selectList = e.map(d => d.id);
- this.selectCount = e.length;
+
+ // 閲嶇疆鎼滅储
+ resetSearch() {
+ this.$refs.searchForm.resetFields()
+ this.searchForm.pageNumber = 1
+ this.getActivityList()
},
- //
- openEdit(row){
- console.log(row)
+
+ // 鏀瑰彉椤电爜
+ changePage(page) {
+ this.searchForm.pageNumber = page
+ this.getActivityList()
+ },
+
+ // 鏀瑰彉姣忛〉鏉℃暟
+ changePageSize(pageSize) {
+ this.searchForm.pageNumber = 1
+ this.searchForm.pageSize = pageSize
+ this.getActivityList()
+ },
+
+ // 琛ㄦ牸閫夋嫨鍙樺寲
+ showSelect(selection) {
+ this.selectList = selection.map(item => item.id)
+ this.selectCount = selection.length
+ },
+
+ // 鎵撳紑鏂板妯℃�佹
+ openAdd() {
+ this.modelTitle = '鏂板娲诲姩'
this.modelShow = true
- this.modelTitle = "缂栬緫娲诲姩"
-
- this.activityFrom.id = row.id;
- this.activityFrom.activityName = row.activityName;
- this.activityFrom.activityType = row.activityType;
- this.activityFrom.activityContent = row.activityContent;
- // this.activityFrom.cover = row.cover;
- //鍒ゆ柇灏侀潰绫诲瀷璧嬪�肩粰鍓嶇
- if (row.coverType === this.text){
- this.coverType = '杈撳叆鏂囧瓧灏侀潰'
- this.activityFrom.cover = row.cover
- this.activityFrom.coverType = row.coverType
- }else{
- this.coverType = '閫夋嫨鏂囦欢灏侀潰'
- this.activityFrom.cover = row.cover
- this.activityFrom.coverType = row.coverType
- }
-
- //杞崲鏍煎紡
- this.activityFrom.reportTime=
- this.formatDate(new Date(row.reportStartTime))+' - '+ this.formatDate(new Date(row.reportEndTime));
- //杞寲鏍煎紡
- this.activityFrom.time =
- this.formatDate(new Date(row.startTime))+' - '+ this.formatDate(new Date(row.endTime));
+ this.coverType = '杈撳叆鏂囧瓧灏侀潰'
+ this.file = null
+ this.$refs.form.resetFields()
+ this.activityFrom.id = ''
},
- validateDateTime(dateTimeString) {
- const dateTimeRegex = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]) ([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/;
- return dateTimeRegex.test(dateTimeString);
- },
- saveOrUpdate(){
- //鍒ゆ柇姝ｅ垯鏍煎紡 锛屽叏閮ㄨ浆鎹㈡垚鏈湴鏃堕棿 骞朵笖杞崲涓烘寚瀹氭牸寮�
- if (!this.validateDateTime(this.activityFrom.reportTime[0])){
- this.activityFrom.reportStartTime = this.formatDate(this.activityFrom.reportTime[0]);
- }else {
- this.activityFrom.reportStartTime = this.activityFrom.reportTime[0]
- }
- if (!this.validateDateTime(this.activityFrom.reportTime[1])){
- this.activityFrom.reportEndTime =this.formatDate(this.activityFrom.reportTime[1]);
- }else {
- this.activityFrom.reportEndTime = this.activityFrom.reportTime[1]
- }
- if (!this.validateDateTime(this.activityFrom.time[0])){
- this.activityFrom.startTime = this.formatDate(this.activityFrom.time[0]);
- }else {
- this.activityFrom.startTime = this.activityFrom.time[0]
- }
- if (!this.validateDateTime(this.activityFrom.time[1])){
- this.activityFrom.endTime = this.formatDate(this.activityFrom.time[1]);
- }else {
- this.activityFrom.endTime = this.activityFrom.time[1]
- }
+ // 鎵撳紑缂栬緫妯℃�佹
+ openEdit(row) {
+ this.modelTitle = '缂栬緫娲诲姩'
+ this.modelShow = true
+ this.$nextTick(() => {
+ this.$refs.form.resetFields()
+ // 濉厖琛ㄥ崟鏁版嵁
+ this.activityFrom = {
+ id: row.id,
+ activityName: row.activityName,
+ activityType: row.activityType,
+ reportTime: [
+ this.formatDate(row.reportStartTime, 'YYYY-MM-DD HH:mm:ss'),
+ this.formatDate(row.reportEndTime, 'YYYY-MM-DD HH:mm:ss')
+ ],
+ time: [
+ this.formatDate(row.startTime, 'YYYY-MM-DD HH:mm:ss'),
+ this.formatDate(row.endTime, 'YYYY-MM-DD HH:mm:ss')
+ ],
+ activityContent: row.activityContent,
+ cover: row.cover,
+ coverType: row.coverType,
+ status: row.status,
+ reportStartTime: row.reportStartTime,
+ reportEndTime: row.reportEndTime,
+ startTime: row.startTime,
+ endTime: row.endTime,
+ recommend: row.recommend,
+ limitUserNum: row.limitUserNum,
+ activityLocation: row.activityLocation
+ }
+ this.$refs.editor.setContent(this.activityFrom.activityLocation)
+ // 璁剧疆灏侀潰绫诲瀷
+ this.coverType = row.coverType === 'text' ? '杈撳叆鏂囧瓧灏侀潰' : '閫夋嫨鏂囦欢灏侀潰'
+ })
+ },
+ infoModelClose(){
+ this.infoModelShow = false
+ },
+ // 鍏抽棴妯℃�佹
+ modelClose() {
+ this.modelShow = false
+ this.file = null
+ this.submitLoading = false
+ this.handleRemove();
+ this.$refs.form.resetFields()
+ },
+
+ // 淇濆瓨鎴栨洿鏂版椿鍔�
+ saveOrUpdate() {
+ // 璁剧疆灏侀潰绫诲瀷
+ this.activityFrom.coverType = this.coverType === '杈撳叆鏂囧瓧灏侀潰' ? '鏂囧瓧' :
+ this.file ? this.getFileCategory(this.file.type) :
+ this.activityFrom.coverType
this.$refs.form.validate(valid => {
if (valid) {
this.submitLoading = true
- if (this.activityFrom.id) {
- editActivity(this.activityFrom).then(res =>{
- if (res.code === 200) {
- this.$Message.success(res.msg)
- this.modelClose();
- this.getActivityList();
- }
- })
- }else {
- addActivity(this.activityFrom).then(res => {
- if (res.code === 200) {
- this.$Message.success(res.msg)
- this.modelClose();
- this.getActivityList();
- }
- })
+ // 澶勭悊鏃堕棿鏁版嵁
+ if (this.activityFrom.reportTime && this.activityFrom.reportTime.length === 2) {
+ this.activityFrom.reportStartTime = this.formatDate(this.activityFrom.reportTime[0], 'YYYY-MM-DD HH:mm:ss')
+ this.activityFrom.reportEndTime = this.formatDate(this.activityFrom.reportTime[1], 'YYYY-MM-DD HH:mm:ss')
}
- }
- });
- },
- formatDate(date) {
- if (date !== null && date !== undefined && date !== ''){
- const year = date.getFullYear();
- const month = String(date.getMonth() + 1).padStart(2, '0'); // 琛ラ浂
- const day = String(date.getDate()).padStart(2, '0');
- const hour = String(date.getHours()).padStart(2, '0');
- const minutes = String(date.getMinutes()).padStart(2, '0');
- const second = String(date.getSeconds()).padStart(2, '0');
- return `${year}-${month}-${day} ${hour}:${minutes}:${second}`;
- }
- return null
- },
- // 鎼滅储
- handleSearch(type,$event){
- if(type === 'reportStart'){
- this.searchForm.reportStartTime = $event;
- }else if(type === 'reportEnd'){
- this.searchForm.reportEndTime = $event;
- }
- this.searchForm.pageNumber = 1;
- this.searchForm.pageSize = 10;
- this.getActivityList();
+ if (this.activityFrom.time && this.activityFrom.time.length === 2) {
+ this.activityFrom.startTime = this.formatDate(this.activityFrom.time[0], 'YYYY-MM-DD HH:mm:ss')
+ this.activityFrom.endTime = this.formatDate(this.activityFrom.time[1], 'YYYY-MM-DD HH:mm:ss')
+ }
+
+ const api = this.activityFrom.id ? editActivity : addActivity
+ api(this.activityFrom).then(res => {
+ this.submitLoading = false
+ if (res.code === 200) {
+ this.$Message.success(res.msg)
+ this.modelClose()
+ this.getActivityList()
+ }
+ }).catch(() => {
+ this.submitLoading = false
+ })
+ }
+ })
},
- // 鍏抽棴寮圭獥
- modelClose() {
- this.file = null
- this.submitLoading = false
- this.modelShow = false
- this.coverType = null
- this.$refs.form.resetFields()
- },
- openAdd(){
- this.modelTitle = "鏂板娲诲姩"
- this.modelShow = true
- },
- // 鍒犻櫎
- delById(row){
- delActivityById(row.id).then(res =>{
- if (res.code === 200){
- this.$Message.success(res.msg)
- this.getActivityList();
+
+ // 鍒犻櫎娲诲姩
+ delById(row) {
+ this.$Modal.confirm({
+ title: '纭鍒犻櫎',
+ content: `纭畾瑕佸垹闄ゆ椿鍔� "${row.activityName}" 鍚�?`,
+ onOk: () => {
+ delActivityById(row.id).then(res => {
+ if (res.code === 200) {
+ this.$Message.success(res.msg)
+ this.getActivityList()
+ }
+ })
}
})
},
// 鎵归噺鍒犻櫎
- delBatch(){
- if (this.selectCount <= 0) {
- this.$Message.warning("鎮ㄨ繕鏈�夋嫨瑕佸垹闄ょ殑鏁版嵁");
+ delBatch() {
+ if (this.selectCount === 0) {
+ this.$Message.warning('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�')
+ return
+ }
+
+ this.$Modal.confirm({
+ title: '纭鍒犻櫎',
+ content: `纭畾瑕佸垹闄ら�変腑鐨� ${this.selectCount} 鏉℃暟鎹悧?`,
+ onOk: () => {
+ delActivityBatch({ ids: this.selectList }).then(res => {
+ if (res.code === 200) {
+ this.$Message.success(res.msg)
+ this.selectList = []
+ this.selectCount = 0
+ this.getActivityList()
+ } else {
+ this.$Message.error(res.msg || '鍒犻櫎澶辫触')
+ }
+ })
+ }
+ })
+ },
+
+ // 鏀瑰彉鎺ㄨ崘鐘舵��
+ changeRecommend(row, action) {
+ row.recommendLoading = true
+ const recommend = action === '鎺ㄨ崘'
+
+ activityChangeRecommend({
+ id: row.id,
+ recommend: recommend
+ }).then(res => {
+ row.recommendLoading = false
+ if (res.code === 200) {
+ this.$Message.success(res.msg)
+ row.recommend = recommend
+ }
+ }).catch(() => {
+ row.recommendLoading = false
+ })
+ },
+
+ // 鏀瑰彉娲诲姩鐘舵��
+ changeStatus(row, action) {
+ row.statusLoading = true
+ const publish = action === '鍙戝竷'
+
+ activityChangeStatus({
+ id: row.id,
+ publish: publish
+ }).then(res => {
+ row.statusLoading = false
+ if (res.code === 200) {
+ this.$Message.success(res.msg)
+ row.publish = publish
+ }
+ }).catch(() => {
+ row.statusLoading = false
+ })
+ },
+
+ // 鎵撳紑鎶ュ悕浜哄憳妯℃�佹
+ openMembersModal(row) {
+ this.membersModelTitle = `${row.activityName} - 鎶ュ悕浜哄憳`
+ this.membersModelShow = true
+ this.memberForm.id = row.id
+ this.memberForm.pageNumber = 1
+ this.activityMembersPage()
+ },
+
+ // 鑾峰彇鎶ュ悕浜哄憳鍒楄〃
+ activityMembersPage() {
+ this.membersLoading = true
+ activityMembersPage(this.memberForm).then(res => {
+ this.membersLoading = false
+ if (res.code === 200) {
+ this.membersList = res.data
+ this.memberTotal = res.total
+ }
+ }).catch(() => {
+ this.membersLoading = false
+ })
+ },
+
+ // 鏀瑰彉鎶ュ悕浜哄憳椤电爜
+ memberChangePage(page) {
+ this.memberForm.pageNumber = page
+ this.activityMembersPage()
+ },
+
+ // 鏀瑰彉鎶ュ悕浜哄憳姣忛〉鏉℃暟
+ memberChangePageSize(pageSize) {
+ this.memberForm.pageNumber = 1
+ this.memberForm.pageSize = pageSize
+ this.activityMembersPage()
+ },
+
+ // 鍏抽棴鎶ュ悕浜哄憳妯℃�佹
+ membersModelClose() {
+ this.membersModelShow = false
+ },
+
+ // 灏侀潰绫诲瀷鍙樺寲澶勭悊
+ handleCoverTypeChange(type) {
+ if (type === '閫夋嫨鏂囦欢灏侀潰') {
+ this.activityFrom.cover = ''
+ } else {
+ this.file = null
+ }
+ },
+
+ // 鏂囦欢涓婁紶鍓嶅鐞�
+ handleBeforeUpload(file) {
+ const fileType = file.type
+ const isImage = fileType.includes('image')
+ const isVideo = fileType.includes('video')
+
+ if (!isImage && !isVideo) {
+ this.$Message.error('璇蜂笂浼犲浘鐗囨垨瑙嗛鏂囦欢')
+ return false
+ }
+
+ if (file.size > 20 * 1024 * 1024) {
+ this.$Message.error('鏂囦欢澶у皬涓嶈兘瓒呰繃20MB')
+ return false
+ }
+
+ this.file = file
+ this.uploadFile()
+ return false
+ },
+
+ // 涓婁紶鏂囦欢
+ uploadFile() {
+ if (!this.file) return
+
+ this.submitLoading = true
+ const formData = new FormData()
+ formData.append('file', this.file)
+
+ uploadFileByLmk(formData).then(res => {
+ this.submitLoading = false
+ if (res.code === 200) {
+ this.activityFrom.cover = res.data.fileKey
+ this.$Message.success('涓婁紶鎴愬姛')
+ }
+ }).catch(() => {
+ this.submitLoading = false
+ })
+ },
+
+ // 鍒犻櫎鏂囦欢
+ handleRemove() {
+ //鐐瑰嚮鍏抽棴绐楀彛鏃剁‘淇濇枃浠跺凡琚竻闄�
+ if(this.file === null){
return;
}
- this.$Modal.confirm({
- title: "纭鍒犻櫎",
- content: "鎮ㄧ‘璁よ鍒犻櫎鎵�閫夌殑 " + this.selectCount + " 鏉℃暟鎹�?",
- loading: true,
- onOk: () => {
-
+ if (!this.activityFrom.cover) {
+ this.file = null
+ return
+ }
+ delByKey(this.activityFrom.cover).then(res => {
+ if (res.code === 200) {
+ this.file = null
+ this.activityFrom.cover = ''
}
- });
+ })
},
- // 椤电爜
- changePage(v){
- this.searchForm.pageNumber = v
- this.getActivityList()
- },
- // 淇敼size
- changePageSize(v){
- this.searchForm.pageNumber = 1;
- this.searchForm.pageSize = v;
- this.getActivityList()
- },
- memberChangePage(v){
- this.memberForm.pageNumber = v
- this.activityMembersPage();
- },
- // 淇敼size
- memberChangePageSize(v){
- this.memberForm.pageNumber = 1;
- this.memberForm.pageSize = v;
- this.activityMembersPage();
- },
- handleImageError(){
+ // 棰勮鍥剧墖
+ previewImage(url) {
+ this.previewImageUrl = url
+ this.previewVisible = true
},
- handleVideoError(){
+ // 鑾峰彇鏂囦欢鍒嗙被
+ getFileCategory(mimeType) {
+ const typeMap = {
+ 'image': 'image',
+ 'video': 'video',
+ 'audio': 'audio',
+ 'application': 'application'
+ }
+
+ const typePrefix = mimeType.split('/')[0]
+ return typeMap[typePrefix] || 'unknown'
},
- previewImage(){
+ // 鏍煎紡鍖栨棩鏈�
+ formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
+ if (!date) return '';
+
+ const d = new Date(date);
+ if (isNaN(d.getTime())) return '';
+
+ const padZero = (num) => String(num).padStart(2, '0'); // 鏇村彲闈犵殑琛ラ浂鏂规硶
+
+ const year = d.getFullYear();
+ const month = padZero(d.getMonth() + 1); // 鏈堜唤 0-11 鈫� +1
+ const day = padZero(d.getDate());
+ const hours = padZero(d.getHours());
+ const minutes = padZero(d.getMinutes());
+ const seconds = padZero(d.getSeconds());
+ return format
+ .replace('YYYY', year)
+ .replace('MM', month)
+ .replace('DD', day)
+ .replace('HH', hours)
+ .replace('mm', minutes)
+ .replace('ss', seconds);
+ },
+
+ // 楠岃瘉鎶ュ悕鏃堕棿
+ validateReportTime(rule, value, callback) {
+ if (!value || value.length !== 2) {
+ callback(new Error('璇烽�夋嫨瀹屾暣鐨勬姤鍚嶆椂闂存'))
+ return
+ }
+
+ const [start, end] = value
+ if (new Date(start) >= new Date(end)) {
+ callback(new Error('鎶ュ悕缁撴潫鏃堕棿蹇呴』鏅氫簬寮�濮嬫椂闂�'))
+ return
+ }
+
+ if (this.activityFrom.time && this.activityFrom.time.length === 2) {
+ const activityStart = this.activityFrom.time[0]
+ if (new Date(end) > new Date(activityStart)) {
+ callback(new Error('鎶ュ悕缁撴潫鏃堕棿涓嶈兘鏅氫簬娲诲姩寮�濮嬫椂闂�'))
+ return
+ }
+ }
+
+ callback()
+ },
+
+ // 楠岃瘉娲诲姩鏃堕棿
+ validateActivityTime(rule, value, callback) {
+ if (!value || value.length !== 2) {
+ callback(new Error('璇烽�夋嫨瀹屾暣鐨勬椿鍔ㄦ椂闂存'))
+ return
+ }
+
+ const [start, end] = value
+ if (new Date(start) >= new Date(end)) {
+ callback(new Error('娲诲姩缁撴潫鏃堕棿蹇呴』鏅氫簬寮�濮嬫椂闂�'))
+ return
+ }
+
+ if (this.activityFrom.reportTime && this.activityFrom.reportTime.length === 2) {
+ const reportEnd = this.activityFrom.reportTime[1]
+ if (new Date(reportEnd) > new Date(start)) {
+ callback(new Error('娲诲姩寮�濮嬫椂闂村繀椤绘櫄浜庢姤鍚嶇粨鏉熸椂闂�'))
+ return
+ }
+ }
+
+ callback()
}
}
}
</script>
+
<style lang="scss" scoped>
-.export {
- margin: 10px 20px 10px 0;
-}
-.export-excel-wrapper {
- display: inline;
-}
-.order-tab {
- width: 950px;
- height: 36px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- background-color: #f0f0f0;
- padding: 0 10px;
- margin-bottom: 10px;
- div {
- text-align: center;
- padding: 4px 12px;
+.activity-management {
+ .search-form {
+ padding: 16px;
+ background: #f8f8f9;
border-radius: 4px;
- cursor: pointer;
+ margin-bottom: 16px;
+
+ .ivu-form-item {
+ margin-bottom: 16px;
+ margin-right: 16px;
+ }
+
+ .search-btn {
+ margin-left: 8px;
+ }
}
- .current {
- background-color: #ffffff;
+
+ .operation {
+ margin-bottom: 16px;
+
+ .ivu-btn {
+ margin-right: 8px;
+ }
}
+
+ .activity-table {
+ .media-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100px;
+
+ .thumbnail {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ cursor: pointer;
+ transition: all 0.3s;
+
+ &:hover {
+ transform: scale(1.05);
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+ }
+ }
+
+ .video-player {
+ max-width: 100%;
+ max-height: 100px;
+ background: #000;
+ }
+
+ .text-cover {
+ padding: 8px;
+ background: #f8f8f9;
+ border-radius: 4px;
+ max-width: 100%;
+ word-break: break-all;
+ }
+ }
+
+ .action-btns {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ .ivu-btn {
+ margin: 4px;
+ font-size: 12px;
+ padding: 2px 6px;
+ min-width: 60px;
+ }
+ }
+ }
+
+ .page-footer {
+ margin-top: 16px;
+ padding: 8px 0;
+ }
+
+ .members-modal {
+ .members-table {
+ margin-bottom: 16px;
+ }
+ }
+
+ .upload-file-info {
+ margin-top: 8px;
+ padding: 8px;
+ background: #f8f8f9;
+ border-radius: 4px;
+ }
+
+ .upload-tip {
+ font-size: 12px;
+ color: #999;
+ margin-top: 4px;
+ }
+}
+.detail-container {
+ padding: 16px;
+}
+
+.detail-item {
+ margin-bottom: 18px;
+ line-height: 1.5;
+
+ label {
+ display: inline-block;
+ width: 100px;
+ color: #666;
+ font-weight: bold;
+ vertical-align: top;
+ }
+
+ span {
+ display: inline-block;
+ width: calc(100% - 110px);
+ }
+}
+
+.activity-content {
+ border: 1px solid #dcdee2;
+ border-radius: 4px;
+ padding: 12px;
+ min-height: 100px;
+ margin-top: 8px;
}
</style>
--
Gitblit v1.8.0