From e8746fe5bb553c17e0052958d9c39a5e2bc6f6a1 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期二, 15 七月 2025 14:58:32 +0800
Subject: [PATCH] 商家端活动申请
---
manager/src/views/activity/index.vue | 2369 ++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 1,692 insertions(+), 677 deletions(-)
diff --git a/manager/src/views/activity/index.vue b/manager/src/views/activity/index.vue
index a285ea2..9043862 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,155 @@
: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="audit">
+ <Select
+ v-model="searchForm.audit"
+ placeholder="璇烽�夋嫨瀹℃牳鎯呭喌"
+ style="width: 180px"
+ clearable
+ @on-clear="handleSearch"
+ @on-change="handleSearch"
+ >
+ <Option
+ v-for="item in auditSelect"
+ :value="item.value"
+ :key="item.id"
+ >
+ {{ item.label }}
+ </Option>
+ </Select>
+ </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>
+ <Button
+ type="success"
+ size="small"
+ :disabled="row.auditStatus !== 0"
+ @click="openAuditModal(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 +197,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 +270,109 @@
{{ 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" v-if="activityFrom.activityType === 'offline'">
+ <FormItem label="娲诲姩鍦扮偣" prop="activityLocation" >
+ <Input
+ v-model="activityFrom.activityLocation"
+ placeholder="璇疯緭鍏ユ椿鍔ㄥ湴鐐�"
+ />
+ </FormItem>
+ </Col>
+ <Col span="24">
+ <FormItem label="娲诲姩鍐呭锛�" prop="activityContent">
+
+ <!-- 鍩轰簬elementUi鐨勪笂浼犵粍浠� el-upload begin-->
+ <Upload
+ :show-upload-list="false"
+ ref="upload"
+ style="display: none"
+ :before-upload="handleUploadEdit"
+ :format="['jpg','jpeg','png','gif','mp4','mov']"
+ :max-size="20480"
+ action=""
+ accept="image/*,video/*"
+ >
+ </Upload>
+ <!-- 鍩轰簬elementUi鐨勪笂浼犵粍浠� el-upload end-->
+ <quill-editor
+ v-model="activityFrom.activityContent"
+ ref="QuillEditor"
+ class="editor"
+ :options="editorOption"
+ @blur="onEditorBlur($event)"
+ @focus="onEditorFocus($event)"
+ @ready="onEditorReady($event)"
+ >
+ </quill-editor>
+ </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 +388,414 @@
</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="auditModelShow"
+ :title="modelTitle"
+ @on-cancel="closeAuditModel"
+ 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>
+
+ <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 || '鏃犲唴瀹�'"
+ ref="鈥渁ctivityHTMLContent"
+ ></div>
+ </div>
+ </Col>
+ <Col span="24">
+ <Form :model="auditForm" :rules="auditRules" ref="auditForm" class="audit-form">
+ <FormItem label="瀹℃牳缁撴灉锛�" prop="audit">
+ <RadioGroup v-model="auditForm.audit">
+ <Radio label="1">閫氳繃</Radio>
+ <Radio label="2">鏈�氳繃</Radio>
+ </RadioGroup>
+ </FormItem>
+ <FormItem label="瀹℃牳澶囨敞锛�" prop="remarks">
+ <Input
+ v-model="auditForm.remarks"
+ type="textarea"
+ :rows="4"
+ placeholder="璇疯緭鍏ュ鏍稿娉紙閫夊～锛�"
+ :disabled="!auditForm.audit"
+ />
+ </FormItem>
+ </Form>
+ </Col>
+ </Row>
+ </div>
+
+ <!-- 瀹℃牳琛ㄥ崟 -->
+
+
+ <div slot="footer">
+ <Button @click="closeAuditModel">鍏抽棴</Button>
+ <Button
+ type="primary"
+ @click="handleAuditSubmit(activityInfo.id)"
+ :disabled="!auditForm.audit"
+ >鎻愪氦瀹℃牳</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,
+ delActivityBatch,
+ activityChangeStatus,
+ activityChangeRecommend,
+ activityMembersPage,
+ auditActivity
+} from "@/api/activity.js"
+import { uploadFileByLmk, delByKey } from "@/api/common.js"
-import {getActivityList,addActivity,editActivity,delActivityById,activityChangeStatus,activityChangeRecommend,activityMembersPage} from "@/api/activity.js"
-import {uploadFileByLmk,delByKey,getUrl} from "@/api/common.js"
+import { quillEditor } from 'vue-quill-editor'
+import 'quill/dist/quill.core.css';
+import 'quill/dist/quill.snow.css';
+import 'quill/dist/quill.bubble.css';
+import * as Quill from 'quill' //寮曞叆缂栬緫鍣�
+import VideoBlot from './video.js';
+
+const toolbarOptions = [
+ ['bold', 'italic', 'underline', 'strike'], // 鍔犵矖锛屾枩浣擄紝涓嬪垝绾匡紝鍒犻櫎绾�
+ ['blockquote', 'code-block'], //寮曠敤锛屼唬鐮佸潡
+ [{ 'header': 1 }, { 'header': 2 }], // 鍑犵骇鏍囬
+ [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 鏈夊簭鍒楄〃锛屾棤搴忓垪琛�
+ [{ 'script': 'sub' }, { 'script': 'super' }], // 涓嬭鏍囷紝涓婅鏍�
+ [{ 'indent': '-1' }, { 'indent': '+1' }], // 缂╄繘
+ [{ 'direction': 'rtl' }], // 鏂囧瓧杈撳叆鏂瑰悜
+ [{ 'size': ['small', false, 'large', 'huge'] }], // 瀛椾綋澶у皬
+ [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 鏍囬
+ [{ 'color': [] }, { 'background': [] }], // 棰滆壊閫夋嫨
+ // [{ 'font': [] }], // 瀛椾綋
+ [{ 'align': [] }], // 灞呬腑
+ ['clean'], // 娓呴櫎鏍峰紡,
+ ['link'],
+ ['myUploadBtn'],
+]
+
+// toolbar鏍囬
+const titleConfig = [
+ { Choice: '.ql-insertMetric', title: '璺宠浆閰嶇疆' },
+ { Choice: '.ql-bold', title: '鍔犵矖' },
+ { Choice: '.ql-italic', title: '鏂滀綋' },
+ { Choice: '.ql-underline', title: '涓嬪垝绾�' },
+ { Choice: '.ql-header', title: '娈佃惤鏍煎紡' },
+ { Choice: '.ql-strike', title: '鍒犻櫎绾�' },
+ { Choice: '.ql-blockquote', title: '鍧楀紩鐢�' },
+ { Choice: '.ql-code', title: '鎻掑叆浠ｇ爜' },
+ { Choice: '.ql-code-block', title: '鎻掑叆浠ｇ爜娈�' },
+ { Choice: '.ql-font', title: '瀛椾綋' },
+ { Choice: '.ql-size', title: '瀛椾綋澶у皬' },
+ { Choice: '.ql-list[value="ordered"]', title: '缂栧彿鍒楄〃' },
+ { Choice: '.ql-list[value="bullet"]', title: '椤圭洰鍒楄〃' },
+ { Choice: '.ql-direction', title: '鏂囨湰鏂瑰悜' },
+ { Choice: '.ql-header[value="1"]', title: 'h1' },
+ { Choice: '.ql-header[value="2"]', title: 'h2' },
+ { Choice: '.ql-align', title: '瀵归綈鏂瑰紡' },
+ { Choice: '.ql-color', title: '瀛椾綋棰滆壊' },
+ { Choice: '.ql-background', title: '鑳屾櫙棰滆壊' },
+ { Choice: '.ql-image', title: '鍥惧儚' },
+ { Choice: '.ql-video', title: '瑙嗛' },
+ { Choice: '.ql-link', title: '娣诲姞閾炬帴' },
+ { Choice: '.ql-formula', title: '鎻掑叆鍏紡' },
+ { Choice: '.ql-clean', title: '娓呴櫎瀛椾綋鏍煎紡' },
+ { Choice: '.ql-script[value="sub"]', title: '涓嬫爣' },
+ { Choice: '.ql-script[value="super"]', title: '涓婃爣' },
+ { Choice: '.ql-indent[value="-1"]', title: '鍚戝乏缂╄繘' },
+ { Choice: '.ql-indent[value="+1"]', title: '鍚戝彸缂╄繘' },
+ { Choice: '.ql-header .ql-picker-label', title: '鏍囬澶у皬' },
+ { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '鏍囬涓�' },
+ { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '鏍囬浜�' },
+ { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '鏍囬涓�' },
+ { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '鏍囬鍥�' },
+ { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '鏍囬浜�' },
+ { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '鏍囬鍏�' },
+ { Choice: '.ql-header .ql-picker-item:last-child', title: '鏍囧噯' },
+ { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '灏忓彿' },
+ { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '澶у彿' },
+ { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '瓒呭ぇ鍙�' },
+ { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '鏍囧噯' },
+ { Choice: '.ql-align .ql-picker-item:first-child', title: '灞呭乏瀵归綈' },
+ { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '灞呬腑瀵归綈' },
+ { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '灞呭彸瀵归綈' },
+ { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '涓ょ瀵归綈' }
+]
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, // 椤甸潰澶у皬
+ name: "ActivityManagement",
+ components: { quillEditor},
+ data() {
+ return {
+ auditForm: {
+ activityId: '',
+ audit: null,
+ remarks: ''
},
- memberTotal:0,
+ auditRules: {
+ audit: [
+ {required: true, message: '璇烽�夋嫨瀹℃牳缁撴灉', trigger: 'change'}
+ ]
+ },
+ infoModelShow: false,
+ auditModelShow: false,
- coverType:'',
- //鏌ヨ娲诲姩鍒楄〃璇锋眰鍙傛暟
- searchForm:{
- activityName:'',// 娲诲姩鍚嶇О
- activityType:'',// 娲诲姩绫诲瀷
- recommend:'',// 鎺ㄨ崘
- reportStartTime:'',// 娲诲姩鎶ュ悕鏃堕棿
- reportEndTime:'',// 娲诲姩缁撴潫鏃堕棿
- pageNumber: 1, // 褰撳墠椤垫暟
- pageSize: 10, // 椤甸潰澶у皬
+ loading: false,
+ membersLoading: false,
+ submitLoading: false,
+
+ // 鎼滅储琛ㄥ崟
+ searchForm: {
+ audit: '',
+ 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: '绾夸笅'}
+ ],
+ auditSelect: [
+ {id: 1, value: '1', label: '宸插鏍�'},
+ {id: 2, value: '0', 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: false, message: '璇疯緭鍏ユ椿鍔ㄥ唴瀹�', trigger: 'blur'}
+ ]
+ },
+
+ // 琛ㄦ牸鍒楅厤缃�
columns: [
{
type: 'selection',
@@ -399,519 +803,1130 @@
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: 'auditStatus',
+ width: 100,
+ align: 'center',
+ render: (h, params) => {
+ const status = params.row.auditStatus;
+ let tagText, tagColor;
+
+ // 鏍规嵁鐘舵�佽缃枃妗堝拰棰滆壊
+ switch (status) {
+ case 0:
+ tagText = '瀹℃牳涓�';
+ tagColor = 'orange'; // 姗欒壊琛ㄧず杩涜涓�
+ break;
+ case 1:
+ tagText = '宸插鏍�';
+ tagColor = 'green'; // 缁胯壊琛ㄧず閫氳繃
+ break;
+ case 2:
+ tagText = '鏈�氳繃';
+ tagColor = 'red'; // 绾㈣壊琛ㄧず鎷掔粷
+ break;
+ default:
+ tagText = '鏈煡鐘舵��';
+ tagColor = 'default'; // 榛樿鐏拌壊
+ }
+
+ return h('Tag', {
+ props: {
+ color: tagColor,
+ },
+ }, tagText);
+ },
},
{
- 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:'灏侀潰',
+ title: '娲诲姩鎶ュ悕鏃堕棿娈�',
+ key: 'activityReportTimeRange',
+ width: 300,
+ render: (h, params) => {
+ return h('div', [
+ h('div', `寮�濮�: ${this.formatDate(params.row.reportStartTime)}`),
+ h('div', `缁撴潫: ${this.formatDate(params.row.reportEndTime)}`)
+ ])
+ }
+ },
+ {
+ 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: '灏侀潰',
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 ? 'green' : 'red' //true 姝ｅ父 false琚鐢�
+ }
+ }, params.row.disabled ? '姝ｅ父' : '绂佺敤')
+ }
+ }
+ ],
+
+ // 鍥剧墖棰勮
+ previewVisible: false,
+ previewImageUrl: '',
+
+ // 妯℃�佹鎺у埗
+ modelShow: false,
+ modelTitle: '',
+
+ //缂栬緫鍣ㄩ厤缃�
+ // 瀵屾枃鏈紪杈戝櫒閰嶇疆
+ Quill:'',
+ defaultValue: '',
+ editorOption: {
+ placeholder: '璇峰湪杩欓噷杈撳叆',
+ theme: 'snow', //涓婚 snow/bubble
+ modules: {
+ history: {
+ delay: 1000,
+ maxStack: 50,
+ userOnly: false
+ },
+ toolbar: {
+ container: toolbarOptions,
+ handlers: {
+ myUploadBtn: this.myMethod,
+ }
+ }
+ }
+ }
+
}
},
- mounted(){
- this.init();
+ // 鍦ㄧ粍浠跺垱寤哄墠娉ㄥ唽
+ beforeCreate() {
+ Quill.register(VideoBlot, true);
},
- 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;
- }
- });
+ mounted() {
+ //鍒濆鍖�
+ this.Quill=this.$refs.QuillEditor.quill
+ this.init()
+ this.initTitle()
+ this.initButton();
+ },
+ methods: {
+ myMethod(){
+ this.$refs.upload.handleClick();
},
- openMembersModal(row){
- this.memberForm.id = row.id
- this.membersModelTitle = "鎶ュ悕浜哄憳"
- this.membersModelShow = true;
- this.activityMembersPage();
- },
- membersModelClose(){
- this.membersModelShow = false;
+ initButton(){
+ const editorButton = document.querySelector('.ql-myUploadBtn')
+ editorButton.innerHTML = '<svg t="1751966766109" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1530" fill="currentColor" style="width: 1em; height: 1em; vertical-align: middle;"><path d="M1024 693.248q0 25.6-8.704 48.128t-24.576 40.448-36.864 30.208-45.568 16.384l1.024 1.024-17.408 0-4.096 0-4.096 0-675.84 0q-5.12 1.024-16.384 1.024-39.936 0-74.752-15.36t-60.928-41.472-40.96-60.928-14.848-74.752 14.848-74.752 40.96-60.928 60.928-41.472 74.752-15.36l1.024 0q-1.024-8.192-1.024-15.36l0-16.384q0-72.704 27.648-137.216t75.776-112.128 112.128-75.264 136.704-27.648 137.216 27.648 112.64 75.264 75.776 112.128 27.648 137.216q0 37.888-8.192 74.24t-22.528 69.12q5.12-1.024 10.752-1.536t10.752-0.512q27.648 0 52.736 10.752t43.52 29.696 29.184 44.032 10.752 53.76zM665.6 571.392q20.48 0 26.624-4.608t-8.192-22.016q-14.336-18.432-31.744-48.128t-36.352-60.416-38.4-57.344-37.888-38.912q-18.432-13.312-27.136-14.336t-25.088 12.288q-18.432 15.36-35.84 38.912t-35.328 50.176-35.84 52.224-36.352 45.056q-18.432 18.432-13.312 32.768t25.6 14.336l16.384 0q9.216 0 19.968 0.512t20.992 0.512l17.408 0q14.336 1.024 18.432 9.728t4.096 24.064q0 17.408-0.512 30.72t-0.512 25.6-0.512 25.6-0.512 30.72q0 7.168 1.536 15.36t5.632 15.36 12.288 11.776 21.504 4.608l23.552 0q9.216 0 27.648 1.024 24.576 0 28.16-12.288t3.584-38.912q0-23.552 0.512-42.496t0.512-51.712q0-23.552 4.608-36.352t19.968-12.8q11.264 0 32.256-0.512t32.256-0.512z" p-id="1531"></path></svg>'
},
- changeRecommend(row,recommend){
- const form = {
- ...this.activityFrom
- };
- form.id = row.id;
- if (recommend === "鍙栨秷鎺ㄨ崘"){
- form.recommend = false
- }else if (recommend ==="鎺ㄨ崘"){
- form.recommend = true
+ initTitle() {
+ document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
+ for (let item of titleConfig) {
+ let tip = document.querySelector('.quill-editor ' + item.Choice)
+ if (!tip) continue
+ tip.setAttribute('title', item.title)
}
-
- 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();
- }
- })
+ // 澶卞幓鐒︾偣
+ onEditorBlur(editor) {
},
- coverTypeJudgment(type){
- if (this.coverType === '杈撳叆鏂囧瓧灏侀潰' && type === 'text'){
- this.activityFrom.coverType = this.text;
- return true;
- }
- if (this.coverType === '閫夋嫨鏂囦欢灏侀潰' && type === 'file'){
- return true;
- }
+
+ // 鑾峰緱鐒︾偣
+ onEditorFocus(editor) {
+
+ },
+
+ // 寮�濮�
+ onEditorReady(editor) {
+ },
+ handleUploadEdit(file){
+ const fileType = file.type
+ const isImage = fileType.includes('image')
+ const isVideo = fileType.includes('video')
+
+ if (!isImage && !isVideo) {
+ this.$Message.error('璇蜂笂浼犲浘鐗囨垨瑙嗛鏂囦欢')
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();
+ }
+
+ if (file.size > 20 * 1024 * 1024) {
+ this.$Message.error('鏂囦欢澶у皬涓嶈兘瓒呰繃20MB')
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];
+ this.file = file
+ this.uploadFile2()
+ return false
+ },
+// 涓婁紶鏂囦欢
+ uploadFile2() {
+ if (!this.file) return
- // 杩斿洖瀵瑰簲鍒嗙被鎴栨湭鐭�
- return mimeMap[typePrefix] || '鏈煡';
- },
+ this.submitLoading = true
+ const formData = new FormData()
+ formData.append('file', this.file)
+ uploadFileByLmk(formData).then(res => {
+ this.submitLoading = false
+ if (res.code === 200) {
+ let url = res.data.url;
+ let fileKey = res.data.fileKey;
+ let fileType = this.getFileType(this.file);
- //涓婁紶鍥剧墖鎺ュ彛
- 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)
+ const range = this.Quill.getSelection();
+ const index = range ? range.index : this.Quill.getLength();
+
+
+ if (fileType === 'video') {
+ this.Quill.insertEmbed(index, 'video', {
+ url:url,
+ controls:'controls',
+ width:'100%',
+ height:'auto'
+ });
+ } else if (fileType === 'image') {
+ this.Quill.insertEmbed(index, "image", url);
+ } else {
+ // 濡傛灉涓嶆槸鍥剧墖鎴栬棰戯紝鍙互澶勭悊鍏朵粬绫诲瀷鎴栫粰鍑烘彁绀�
+ this.$Message.warning('涓嶆敮鎸佺殑鏂囦欢绫诲瀷');
+ return;
}
- })
+ console.log(this.activityFrom.activityContent)
+ this.Quill.setSelection(index + 1);
+ this.$Message.success('涓婁紶鎴愬姛')
+ }
+ }).catch(() => {
+ this.submitLoading = false
+ })
+ },
+ getFileType(file) {
+ // 鑾峰彇鏂囦欢绫诲瀷鎴栨墿灞曞悕
+ let type, extension;
+
+ if (file instanceof File) {
+ // 濡傛灉鏄疐ile瀵硅薄
+ type = file.type;
+ const name = file.name.toLowerCase();
+ extension = name.substring(name.lastIndexOf('.') + 1);
+ } else if (typeof file === 'string') {
+ // 濡傛灉鏄瓧绗︿覆锛堟枃浠跺悕鎴朥RL锛�
+ const name = file.toLowerCase();
+ extension = name.substring(name.lastIndexOf('.') + 1);
+
+ // 灏濊瘯浠嶶RL涓彁鍙朚IME绫诲瀷锛堝鏋滄湁锛�
+ const mimeMatch = file.match(/^data:(.+?);/);
+ if (mimeMatch) {
+ type = mimeMatch[1];
+ }
+ } else {
+ return 'unknown';
+ }
+
+ // 甯歌鍥剧墖鍜岃棰戠殑MIME绫诲瀷
+ const imageTypes = [
+ 'image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/bmp', 'image/svg+xml'
+ ];
+
+ const videoTypes = [
+ 'video/mp4', 'video/webm', 'video/ogg', 'video/quicktime', 'video/x-msvideo', 'video/x-matroska'
+ ];
+
+ // 妫�鏌IME绫诲瀷
+ if (type) {
+ if (imageTypes.includes(type)) return 'image';
+ if (videoTypes.includes(type)) return 'video';
+ }
+
+ // 甯歌鍥剧墖鍜岃棰戠殑鎵╁睍鍚�
+ const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'];
+ const videoExtensions = ['mp4', 'webm', 'ogg', 'mov', 'avi', 'mkv'];
+
+ // 妫�鏌ユ枃浠舵墿灞曞悕
+ if (extension) {
+ if (imageExtensions.includes(extension)) return 'image';
+ if (videoExtensions.includes(extension)) return 'video';
+ }
+
+ return 'unknown';
},
- handleRemove(){
- this.file = null
- this.loadingStatus = true;
- delByKey(this.activityFrom.cover).then(res =>{
- this.loadingStatus = false;
- if (res.code === 200){
- this.activityFrom.cover = null;
+
+ handleAuditSubmit(activityId) {
+ console.log(this.auditForm)
+ this.$refs.auditForm.validate(valid => {
+ if (valid) {
+ const form = {
+ activityId: activityId,
+ audit: this.auditForm.audit,
+ remarks: this.auditForm.remarks,
+ }
+ // 鎻愪氦鏃� auditForm.audit 宸茬粡鏄暟瀛楃被鍨嬶紙0 鎴� 1锛�
+ auditActivity(form).then(res => {
+ if (res.code === 200) {
+ // 涓烘瘡涓�琛屾坊鍔爈oading鐘舵��
+ this.$Message.success(res.msg);
+ this.getActivityList();
+ this.closeAuditModel();
}
})
-
- },
-
- // 鑾峰緱瀹㈡埛琛ㄦ牸淇℃伅
- getActivityList(){
- this.loading = true;
- getActivityList(this.searchForm).then(res =>{
- this.loading = false;
- if (res.code === 200) {
- this.activityList = res.data;
- this.total = res.total;
- }
- })
- },
- init(){
- this.getActivityList();
- },
- changeSort(){
-
- },
- showSelect(){
- this.selectList = e.map(d => d.id);
- this.selectCount = e.length;
- },
- //
- openEdit(row){
- console.log(row)
- 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));
+
+ },
+ openAuditModal(row) {
+ this.modelTitle = '娲诲姩瀹℃牳'
+ this.auditModelShow = true
+ this.activityInfo = row
+ },
+ closeAuditModel() {
+ this.$refs.auditForm.resetFields();
+ this.auditModelShow = false
+ },
+ escapeStringHTML(str) {
+ if (!str) return str;
+ str = str.replace(/</g, '<');
+ str = str.replace(/>/g, '>');
+ return str;
},
- 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]
- }
+ // 鎻愪氦
+ detail(row) {
+ this.modelTitle = '娲诲姩璇︽儏'
+ this.infoModelShow = true
+ this.activityInfo = row
+ this.activityInfo.activityContent = this.escapeStringHTML(this.activityInfo.activityContent);
+ this.$nextTick(() => {
+ this.processVideos();
+ });
- 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();
- }
- })
-
- }
- }
+ },
+ processVideos() {
+ const videos = this.$el.querySelectorAll('video');
+ videos.forEach(video => {
+ // 纭繚瑙嗛鍏冪礌鏈夊繀瑕佺殑灞炴��
+ video.setAttribute('controls', '');
+ video.setAttribute('playsinline', ''); // 閽堝绉诲姩绔�
+ video.load();
});
- },
- 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}`;
+ },
+ // 鑾峰彇瀵屾枃鏈紪杈戝櫒鐨勫唴瀹�
+ // 鍒濆鍖栨暟鎹�
+ init() {
+ this.getActivityList()
+ },
+
+ // 鑾峰彇娲诲姩鍒楄〃
+ getActivityList() {
+ this.loading = true
+ getActivityList(this.searchForm).then(res => {
+ this.loading = false
+ if (res.code === 200) {
+ // 涓烘瘡涓�琛屾坊鍔爈oading鐘舵��
+ this.activityList = res.data.map(item => ({
+ ...item,
+ recommendLoading: false,
+ statusLoading: false
+ }))
+ this.total = res.total
}
- return null
- },
- // 鎼滅储
- handleSearch(type,$event){
- if(type === 'reportStart'){
- this.searchForm.reportStartTime = $event;
- }else if(type === 'reportEnd'){
- this.searchForm.reportEndTime = $event;
- }
+ }).catch(() => {
+ this.loading = false
+ })
+ },
- this.searchForm.pageNumber = 1;
- this.searchForm.pageSize = 10;
- this.getActivityList();
- },
- // 鍏抽棴寮圭獥
- 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();
- }
- })
- },
-
- // 鎵归噺鍒犻櫎
- delBatch(){
- if (this.selectCount <= 0) {
- this.$Message.warning("鎮ㄨ繕鏈�夋嫨瑕佸垹闄ょ殑鏁版嵁");
- return;
- }
- this.$Modal.confirm({
- title: "纭鍒犻櫎",
- content: "鎮ㄧ‘璁よ鍒犻櫎鎵�閫夌殑 " + this.selectCount + " 鏉℃暟鎹�?",
- loading: true,
- onOk: () => {
-
- }
- });
- },
- // 椤电爜
- 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(){
-
- },
- handleVideoError(){
-
- },
- previewImage(){
-
+ // 鎼滅储娲诲姩
+ handleSearch(type, value) {
+ if (type === 'reportStart') {
+ this.searchForm.reportStartTime = value
+ } else if (type === 'reportEnd') {
+ this.searchForm.reportEndTime = value
}
- }
+
+ this.searchForm.pageNumber = 1
+ this.getActivityList()
+ },
+
+ // 閲嶇疆鎼滅储
+ resetSearch() {
+ this.$refs.searchForm.resetFields()
+ this.searchForm.pageNumber = 1
+ this.getActivityList()
+ },
+
+ // 鏀瑰彉椤电爜
+ 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.coverType = '杈撳叆鏂囧瓧灏侀潰'
+ this.file = null
+ this.$refs.form.resetFields()
+ this.activityFrom.id = ''
+ },
+
+ // 鎵撳紑缂栬緫妯℃�佹
+ openEdit(row) {
+ this.modelTitle = '缂栬緫娲诲姩'
+ this.modelShow = true
+ this.$nextTick(() => {
+ this.$refs.form.resetFields()
+ console.log(row)
+ // 濉厖琛ㄥ崟鏁版嵁
+ 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.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 === '杈撳叆鏂囧瓧灏侀潰' ? 'text' :
+ this.file ? this.getFileCategory(this.file.type) :
+ this.activityFrom.coverType
+
+ this.$refs.form.validate(valid => {
+ if (valid) {
+ this.submitLoading = true
+
+ // 澶勭悊鏃堕棿鏁版嵁
+ 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')
+ }
+
+ 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
+ })
+ }
+ })
+ },
+
+ // 鍒犻櫎娲诲姩
+ delById(row) {
+ this.$Modal.confirm({
+ title: '纭鍒犻櫎',
+ content: `纭畾瑕佸垹闄ゆ椿鍔� "${row.activityName}" 鍚�?`,
+ onOk: () => {
+ //TODO 鍏堝垽鏂椿鍔ㄦ槸鍚﹀彂甯冿紝鍙戝竷鍒欓渶瑕佸厛涓嬫灦
+
+ delActivityById(row.id).then(res => {
+ if (res.code === 200) {
+ this.$Message.success(res.msg)
+ this.getActivityList()
+ }
+ })
+ }
+ })
+ },
+
+ // 鎵归噺鍒犻櫎
+ delBatch() {
+ //TODO 鍏堝垽鏂椿鍔ㄦ槸鍚﹀彂甯冿紝鍙戝竷鍒欓渶瑕佸厛涓嬫灦
+ if (this.selectCount === 0) {
+ this.$Message.warning('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�')
+ return
+ }
+
+ this.$Modal.confirm({
+ title: '纭鍒犻櫎',
+ content: `纭畾瑕佸垹闄ら�変腑鐨� ${this.selectCount} 鏉℃暟鎹悧?`,
+ onOk: () => {
+ delActivityBatch(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) {
+ //鍒ゆ柇鏄惁瀛樺湪瀹℃牳璁板綍
+ if (row.audit === null) {
+ this.$Message.error("鍙戝竷鍓嶈鍏堝鏍�!")
+ return
+ }
+
+ 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;
+ }
+ if (!this.activityFrom.cover) {
+ this.file = null
+ return
+ }
+ delByKey(this.activityFrom.cover).then(res => {
+ if (res.code === 200) {
+ this.file = null
+ this.activityFrom.cover = ''
+ }
+ })
+ },
+
+ // 棰勮鍥剧墖
+ previewImage(url) {
+ this.previewImageUrl = url
+ this.previewVisible = true
+ },
+
+ // 鑾峰彇鏂囦欢鍒嗙被
+ getFileCategory(mimeType) {
+ const typeMap = {
+ 'image': 'image',
+ 'video': 'video',
+ 'audio': 'audio',
+ 'application': 'application'
+ }
+
+ const typePrefix = mimeType.split('/')[0]
+ return typeMap[typePrefix] || 'unknown'
+ },
+
+ // 鏍煎紡鍖栨棩鏈�
+ 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;
+.quill-editor {
+
}
-.export-excel-wrapper {
- display: inline;
+
+.ql-editor .ql-video {
+ width: 50%;
+ height: auto; /* 鏍规嵁浣犵殑闇�姹傝皟鏁撮珮搴� */
+ max-width: 100%;
}
-.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;
+}
+/*
+ 鏂囧瓧澶у皬
+*/
+.ql-snow .ql-picker.ql-size{
+ width: 70px; // 鑿滃崟鏍忓崰姣斿搴�
+}
+/*
+ 瀛椾綋
+*/
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
+ content: "榛戜綋";
+ font-family: "SimHei";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
+ content: "寰蒋闆呴粦";
+ font-family: "Microsoft YaHei";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
+ content: "妤蜂綋";
+ font-family: "KaiTi";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
+ content: "浠垮畫";
+ font-family: "FangSong";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
+ content: "Arial";
+ font-family: "Arial";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
+ content: "Times New Roman";
+ font-family: "Times New Roman";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
+ content: "sans-serif";
+ font-family: "sans-serif";
+}
+
+.ql-font-SimSun {
+ font-family: "SimSun";
+}
+
+.ql-font-SimHei {
+ font-family: "SimHei";
+}
+
+.ql-font-Microsoft-YaHei {
+ font-family: "Microsoft YaHei";
+}
+
+.ql-font-KaiTi {
+ font-family: "KaiTi";
+}
+
+.ql-font-FangSong {
+ font-family: "FangSong";
+}
+
+.ql-font-Arial {
+ font-family: "Arial";
+}
+
+.ql-font-Times-New-Roman {
+ font-family: "Times New Roman";
+}
+
+.ql-font-sans-serif {
+ font-family: "sans-serif";
}
</style>
--
Gitblit v1.8.0