| | |
| | | <Button |
| | | type="primary" |
| | | size="small" |
| | | @click="changeStatus(row, row.enableStatus === 'on' ? '关闭' : '开启')" |
| | | @click="publishPrizeActivity(row)" |
| | | :loading="row.statusLoading" |
| | | > |
| | | {{row.enableStatus === 'on' ? '关闭' : '开启'}} |
| | | {{row.enableStatus === 'ON' ? '关闭' : '开启'}} |
| | | </Button> |
| | | <Button |
| | | type="info" |
| | |
| | | <Button |
| | | type="info" |
| | | size="small" |
| | | :disabled="!row.canSet" |
| | | @click="setPrize(row)" |
| | | >奖品设置</Button> |
| | | <Button |
| | | type="info" |
| | | size="small" |
| | | @click="openEdit(row)" |
| | | >编辑</Button> |
| | | <Button |
| | | type="error" |
| | | size="small" |
| | | @click="delById(row)" |
| | | >删除</Button> |
| | | :disabled="row.popup" |
| | | @click="setPopup(row)" |
| | | > |
| | | 弹窗活动 |
| | | </Button> |
| | | <!-- <Button--> |
| | | <!-- type="info"--> |
| | | <!-- size="small"--> |
| | | <!-- @click="openEdit(row)"--> |
| | | <!-- >编辑</Button>--> |
| | | <!-- <Button--> |
| | | <!-- type="error"--> |
| | | <!-- size="small"--> |
| | | <!-- @click="delById(row)"--> |
| | | <!-- >删除</Button>--> |
| | | |
| | | </div> |
| | | </template> |
| | |
| | | <Col span="24"> |
| | | <FormItem label="活动图片:" prop="activityImg"> |
| | | <Upload |
| | | v-if="!imgTempUrl" |
| | | :before-upload="(file) => handleBeforeUpload(file, 'content')" |
| | | :format="['jpg','jpeg','png','gif']" |
| | | :max-size="20480" |
| | |
| | | accept="image/*" |
| | | > |
| | | <Button icon="ios-cloud-upload-outline">上传封面图片</Button> |
| | | <div class="upload-tip">支持图片,最大20MB</div> |
| | | </Upload> |
| | | <div v-if="activityImg" class="upload-file-info"> |
| | | <p>已选文件: {{ activityImg.name }}</p> |
| | | <img :src="activityImg.activityImgUrl" alt="活动图片" style="max-width: 100%; max-height: 200px;"> |
| | | <div v-else class="upload-file-info"> |
| | | <img :src="imgTempUrl" alt="活动图片" class="preview-image-limit"> |
| | | <Button type="text" @click="handleRemove('content')">删除</Button> |
| | | </div> |
| | | |
| | |
| | | <Col span="24"> |
| | | <FormItem label="活动封面:" prop="activityCover"> |
| | | <Upload |
| | | v-if="!coverTempUrl" |
| | | :before-upload="(file) => handleBeforeUpload(file, 'cover')" |
| | | :format="['jpg','jpeg','png','gif']" |
| | | :max-size="20480" |
| | |
| | | accept="image/*" |
| | | > |
| | | <Button icon="ios-cloud-upload-outline">上传封面图片</Button> |
| | | <div class="upload-tip">支持图片,最大20MB</div> |
| | | </Upload> |
| | | <div v-if="activityCover" class="upload-file-info"> |
| | | <p>已选文件: {{ activityCover.name }}</p> |
| | | <img :src="activityCover.activityCoverUrl" alt="活动图片" style="max-width: 100%; max-height: 200px;"> |
| | | <div v-else class="upload-file-info"> |
| | | <img :src="coverTempUrl" alt="活动图片" class="preview-image-limit"> |
| | | <Button type="text" @click="handleRemove('cover')">删除</Button> |
| | | </div> |
| | | |
| | |
| | | <Col span="24"> |
| | | <div class="detail-item"> |
| | | <label>活动状态:</label> |
| | | <Tag :color="detailData.enableStatus === 'on' ? 'success' : 'default'"> |
| | | {{ detailData.enableStatus === 'on' ? '已启用' : '未启用' }} |
| | | <Tag :color="detailData.enableStatus === 'ON' ? 'success' : 'default'"> |
| | | {{ detailData.enableStatus === 'ON' ? '已启用' : '未启用' }} |
| | | </Tag> |
| | | </div> |
| | | </Col> |
| | | <Col span="24"> |
| | | <div class="detail-item"> |
| | | <label>活动图片:</label> |
| | | <div v-if="detailData.activityImg" class="detail-image"> |
| | | <img :src="detailData.activityImg" alt="活动图片" style="max-width: 100%; max-height: 200px;"> |
| | | <div v-if="detailData.activityImgUrl" class="detail-image"> |
| | | <img :src="detailData.activityImgUrl" alt="活动图片" class="preview-image-limit"> |
| | | </div> |
| | | <span v-else>-</span> |
| | | </div> |
| | |
| | | <Col span="24"> |
| | | <div class="detail-item"> |
| | | <label>活动封面:</label> |
| | | <div v-if="detailData.activityCover" class="detail-image"> |
| | | <div v-if="detailData.activityCoverUrl" class="detail-image"> |
| | | <img |
| | | :src="detailData.activityCover" alt="活动封面" |
| | | style="max-width: 100%; max-height: 200px;" |
| | | :src="detailData.activityCoverUrl" alt="活动封面" |
| | | class="preview-image-limit" |
| | | > |
| | | </div> |
| | | <span v-else>-</span> |
| | |
| | | <Col span="24"> |
| | | <div class="detail-item"> |
| | | <label>奖品:</label> |
| | | <div style="width: 100%; overflow-y: auto; padding-bottom: 8px; box-sizing: border-box;height: 150px"> |
| | | <div v-if="detailData.prizes && detailData.prizes.length > 0" class="prize-list"> |
| | | <div v-for="(prize, index) in detailData.prizes" :key="index" class="prize-item"> |
| | | <div class="prize-header"> |
| | | <span class="prize-name">{{ prize.prizeName }}</span> |
| | | <Tag v-if="prize.prizeType"> |
| | | {{ replaceText(prize.prizeType) }} |
| | | </Tag> |
| | | </div> |
| | | <div class="prize-content"> |
| | | <p v-if="prize.prizeContent">{{ prize.prizeContent }}</p> |
| | | <Row :gutter="16" class="prize-info"> |
| | | <Col span="12"> |
| | | <span>总数: {{ prize.prizeNum}}</span> |
| | | </Col> |
| | | <Col span="12"> |
| | | <span>剩余: |
| | | <span> |
| | | {{ prize.remainNum }} |
| | | </span> |
| | | </span> |
| | | </Col> |
| | | <Col span="12"> |
| | | <span>概率: {{ prize.prizeProbability}}%</span> |
| | | </Col> |
| | | </Row> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-else class="no-prize"> |
| | | <span>暂无奖品信息</span> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | </Col> |
| | | </Row> |
| | | </div> |
| | | |
| | | </Modal> |
| | | |
| | | <Modal |
| | | v-model="prizeSettingShow" |
| | | title="奖品设置" |
| | | @on-cancel="prizeSettingModelClose" |
| | | width="1200" |
| | | :mask-closable="false"> |
| | | <!-- 奖品部分 --> |
| | | |
| | | |
| | | <Form ref="activityPrizeForm" :label-width="100" > |
| | | <Col span="24"> |
| | | <FormItem label="奖品列表:"> |
| | | <Table |
| | | :loading="prizeLoading" |
| | | border |
| | | :columns="prizeColumns" |
| | | :data="prizeList" |
| | | ref="table" |
| | | class="prize-table" |
| | | > |
| | | <template slot-scope="{ row }" slot="prizeCoverUrl"> |
| | | <img |
| | | :src="row.prizeCoverUrl" |
| | | alt="奖品封面" |
| | | class="thumbnail" |
| | | > |
| | | </template> |
| | | <template slot-scope="{ row }" slot="action"> |
| | | <Button |
| | | @click="choicePrize(row)" |
| | | :disabled="isPrizeChosen(row.id)" |
| | | type="primary" |
| | | icon="md-add" |
| | | > |
| | | {{ isPrizeChosen(row.id) ? '已添加' : '添加' }} |
| | | </Button> |
| | | </template> |
| | | </Table> |
| | | <Row type="flex" justify="end" class="page-footer"> |
| | | <Page |
| | | :current="prizeSearchForm.pageNumber" |
| | | :total="prizeTotal" |
| | | :page-size="prizeSearchForm.pageSize" |
| | | @on-change="prizeChangePage" |
| | | @on-page-size-change="prizeChangePageSize" |
| | | :page-size-opts="[10, 20, 50]" |
| | | size="small" |
| | | show-total |
| | | show-elevator |
| | | show-sizer |
| | | ></Page> |
| | | </Row> |
| | | </FormItem> |
| | | </Col> |
| | | <Col span="24"> |
| | | <FormItem label="已选奖品:"> |
| | | <!-- 遍历已选奖品,并可以设置数量等属性 --> |
| | | <Table |
| | | :data="choiceData" |
| | | :columns="choiceColumns" |
| | | border |
| | | style="margin-top: 10px;" |
| | | :loading="choiceLoading" |
| | | > |
| | | <!-- 奖品图片 slot --> |
| | | <template slot-scope="{ row }" slot="prizeCoverUrl"> |
| | | <img :src="row.prizeCoverUrl" alt="奖品封面" style="width: 50px; height: 50px; object-fit: cover;"> |
| | | </template> |
| | | <!-- 数量 slot --> |
| | | <template slot-scope="{ row, index }" slot="maxPreDay"> |
| | | <InputNumber |
| | | v-model="row.maxPreDay" |
| | | :min="1" |
| | | :max="999999" |
| | | placeholder="请输入每日最大中奖数" |
| | | style="width: 100%" |
| | | @on-change="(val) => handleMaxPreDayChange(val, index)" |
| | | ></InputNumber> |
| | | </template> |
| | | <template slot-scope="{ row, index }" slot="prizeNum"> |
| | | <InputNumber |
| | | v-model="row.prizeNum" |
| | | :min="1" |
| | | :max="999999" |
| | | placeholder="数量" |
| | | style="width: 100%" |
| | | @on-change="(val) => handlePrizeNumChange(val, index)" |
| | | ></InputNumber> |
| | | </template> |
| | | |
| | | <!-- 概率 slot --> |
| | | <template slot-scope="{ row, index }" slot="prizeProbability"> |
| | | <Input |
| | | v-model="row.prizeProbability" |
| | | placeholder="0.01" |
| | | style="width: 100%" |
| | | @on-blur="(e) => handleProbabilityInput(e, index)" |
| | | @on-enter="(e) => handleProbabilityInput(e, index)" |
| | | ></Input> |
| | | </template> |
| | | |
| | | <!-- 操作 slot --> |
| | | <template slot-scope="{ row, index }" slot="action"> |
| | | <Button type="error" size="small" icon="md-close" @click="removePrize(index)">移除</Button> |
| | | </template> |
| | | </Table> |
| | | <!-- 如果没有选择任何奖品时的提示 --> |
| | | <div v-if="choiceData.length === 0" style="text-align: center; color: #999; padding: 20px;"> |
| | | 尚未选择任何奖品 |
| | | </div> |
| | | |
| | | </FormItem> |
| | | </Col> |
| | | </Form> |
| | | <div slot="footer"> |
| | | <Button @click="prizeSettingModelClose">取消</Button> |
| | | <Button type="primary" :loading="choiceSubmitLoading" @click="choiceSubmit">提交</Button> |
| | | </div> |
| | | </Modal> |
| | | |
| | | </Card> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | getPage as getPrizePage |
| | | } from '@/api/prize.js' |
| | | import { |
| | | getPage, |
| | | detail, |
| | | edit, |
| | | add, |
| | | del |
| | | del, |
| | | addActivityRefPrizeList, |
| | | getActivityRefPrizeByActivityId, |
| | | publishPrizeActivity, |
| | | popup |
| | | } from '@/api/activity-prize.js' |
| | | import {delByKey, uploadFileByLmk} from "../../api/common"; |
| | | |
| | |
| | | |
| | | data() { |
| | | return { |
| | | //奖品设置弹窗 |
| | | choiceLoading:false, |
| | | choiceSubmitLoading:false, |
| | | prizeTotal:0, |
| | | choiceData:[], |
| | | choiceColumns:[ |
| | | { |
| | | title: '奖品图片', |
| | | slot: 'prizeCoverUrl', |
| | | width: 80, |
| | | align: 'center' |
| | | }, |
| | | { |
| | | title: '奖品名称', |
| | | key: 'prizeName', |
| | | minWidth: 120 |
| | | }, |
| | | { |
| | | title: '奖品类型', |
| | | slot: 'prizeType', |
| | | width: 100, |
| | | render: (h, params) => { |
| | | if (params.row.prizeType === "coupon") { |
| | | return h("Tag", {props: {color: "red"}}, "优惠券"); |
| | | } else { |
| | | return h("Tag", {props: {color: "purple"}}, "未知"); |
| | | } |
| | | } |
| | | }, |
| | | { |
| | | title: '每日最大中奖数', |
| | | slot: 'maxPreDay', |
| | | width: 120 |
| | | }, |
| | | { |
| | | title: '数量', |
| | | slot: 'prizeNum', |
| | | width: 120 |
| | | }, |
| | | { |
| | | title: '中将概率不能为空', |
| | | slot: 'prizeProbability', |
| | | width: 120 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | slot: 'action', |
| | | width: 80, |
| | | align: 'center' |
| | | } |
| | | ], |
| | | |
| | | prizeLoading:false, |
| | | prizeList:[], |
| | | prizeSettingShow:false, |
| | | prizeColumns:[ |
| | | { |
| | | title: '奖品封面', |
| | | key: 'prizeCoverUrl', |
| | | slot:'prizeCoverUrl', |
| | | align: 'center', |
| | | minWidth: 100, |
| | | }, |
| | | { |
| | | title: '奖品名称', |
| | | key: 'prizeName', |
| | | minWidth: 100, |
| | | }, |
| | | { |
| | | title: '奖品类型', |
| | | key: 'prizeType', |
| | | minWidth: 100, |
| | | render: (h, params) => { |
| | | if (params.row.prizeType === "coupon") { |
| | | return h("Tag", {props: {color: "red"}}, "优惠券"); |
| | | } else { |
| | | return h("Tag", {props: {color: "purple"}}, "未知"); |
| | | } |
| | | } |
| | | }, |
| | | { |
| | | title: '奖品内容', |
| | | key: 'prizeContent', |
| | | minWidth: 100, |
| | | }, |
| | | { |
| | | title: '奖品描述', |
| | | key: 'prizeDes', |
| | | minWidth: 100, |
| | | }, |
| | | { |
| | | title:'操作', |
| | | slot: 'action', |
| | | width: 200, |
| | | align:'center', |
| | | fixed:'right' |
| | | } |
| | | ], |
| | | activityPrizeId:null, |
| | | prizeSearchForm:{ |
| | | prizeName:'', |
| | | prizeType:'', |
| | | pageSize:10, |
| | | pageNumber:1, |
| | | }, |
| | | |
| | | infoModalShow:false, |
| | | detailData: {}, |
| | | modelShow:false, |
| | |
| | | prizeNum:0, |
| | | activityImg:'', |
| | | activityCover:'', |
| | | enableStatus:'off' |
| | | enableStatus:'' |
| | | }, |
| | | loading:false, |
| | | columns:[ |
| | |
| | | render: (h, params) => { |
| | | return h('Tag', { |
| | | props: { |
| | | color: params.row.enableStatus === 'on' ? 'green' : 'default' |
| | | color: params.row.enableStatus === 'ON' ? 'green' : 'default' |
| | | } |
| | | }, params.row.enableStatus === 'on' ? '开启' : '关闭') |
| | | }, params.row.enableStatus === 'ON' ? '开启' : '关闭') |
| | | } |
| | | }, |
| | | { |
| | |
| | | activityName:'', |
| | | endTime:'', |
| | | beginTime:'', |
| | | |
| | | }, |
| | | submitLoading:false, |
| | | activityCover:null, |
| | | activityImg:null, |
| | | |
| | | coverTempUrl:null, |
| | | imgTempUrl:null, |
| | | |
| | | } |
| | | }, |
| | | // 在组件创建前注册 |
| | |
| | | this.init(); |
| | | }, |
| | | methods: { |
| | | setPopup(row){ |
| | | popup(row.id).then(res =>{ |
| | | if (res.code === 200){ |
| | | this.$Message.success(res.msg) |
| | | this.getPage() |
| | | }else { |
| | | this.$Message.error(res.msg) |
| | | } |
| | | }) |
| | | }, |
| | | handleProbabilityInput(event, index) { |
| | | const inputValue = event.target.value; |
| | | let numericValue = parseFloat(inputValue); |
| | | |
| | | if (isNaN(numericValue)) { |
| | | this.choiceData[index].prizeProbabilityDisplay = '0.01'; |
| | | this.choiceData[index].prizeProbability = 0.01; |
| | | this.$Message.warning('请输入有效的数字'); |
| | | return; |
| | | } |
| | | |
| | | // 限制范围 |
| | | if (numericValue < 0.01) { |
| | | numericValue = 0.01; |
| | | this.$Message.warning('中奖概率不能小于0.01'); |
| | | } else if (numericValue > 100) { |
| | | numericValue = 100; |
| | | this.$Message.warning('中奖概率不能大于100'); |
| | | } |
| | | |
| | | // 保持2位小数 |
| | | const fixedValue = parseFloat(numericValue.toFixed(2)); |
| | | this.choiceData[index].prizeProbabilityDisplay = fixedValue.toString(); |
| | | this.choiceData[index].prizeProbability = fixedValue; |
| | | |
| | | // 更新后端字段 |
| | | this.choiceData[index].probability = (fixedValue / 100).toFixed(4); |
| | | }, |
| | | choiceSubmit(){ |
| | | addActivityRefPrizeList(this.activityPrizeId,this.choiceData).then(res =>{ |
| | | if (res.code === 200){ |
| | | this.$Message.success(res.msg) |
| | | this.prizeSettingModelClose() |
| | | }else{ |
| | | this.$Message.error(res.msg) |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | // 格式化奖品类型 |
| | | replaceText(type) { |
| | | if (type === "coupon") { |
| | | return "优惠券"; |
| | | } |
| | | return type; // 如果不是目标词,返回原文本 |
| | | }, |
| | | |
| | | // 数量变化处理 |
| | | handlePrizeNumChange(value, index) { |
| | | if (value === null || value < 1) { |
| | | this.choiceData[index].prizeNum = 1; |
| | | this.$Message.warning('数量不能小于1'); |
| | | } else { |
| | | this.choiceData[index].prizeNum = value; |
| | | } |
| | | }, |
| | | // 数量变化处理 |
| | | handleMaxPreDayChange(value, index) { |
| | | if (value === null || value < 1) { |
| | | this.choiceData[index].maxPreDay = 1; |
| | | this.$Message.warning('数量不能小于1'); |
| | | } else { |
| | | this.choiceData[index].maxPreDay = value; |
| | | } |
| | | }, |
| | | |
| | | // 移除已选奖品 |
| | | removePrize(index) { |
| | | this.choiceData.splice(index, 1); |
| | | this.$Message.info('已移除奖品'); |
| | | }, |
| | | // 检查奖品是否已被选择 |
| | | isPrizeChosen(prizeId) { |
| | | return this.choiceData.some(item => item.prizeId === prizeId); |
| | | }, |
| | | choicePrize(row){ |
| | | //判断数组长度 |
| | | if(this.choiceData.length >= 5){ |
| | | this.$Message.warning("最多添加5个奖品") |
| | | return; |
| | | } |
| | | console.log(row.prizeId) |
| | | if (this.isPrizeChosen(row.id)){ |
| | | |
| | | this.$Message.warning("已添加") |
| | | return; |
| | | } |
| | | this.choiceLoading = true; |
| | | |
| | | const prizeToAdd = { |
| | | prizeCoverUrl:row.prizeCoverUrl, |
| | | prizeType: row.prizeType, |
| | | prizeName: row.prizeName, |
| | | prizeNum: 1, // 默认数量为1 |
| | | maxPreDay:1, |
| | | prizeProbability:0.01, |
| | | prizeId:row.id, |
| | | prizeContent:row.prizeContent |
| | | // 可以添加其他扩展属性,如: |
| | | // sort: this.choiceData.length + 1 // 排序 |
| | | }; |
| | | this.choiceData.push(prizeToAdd); |
| | | this.choiceLoading = false; |
| | | this.$Message.success('添加成功!'); |
| | | |
| | | }, |
| | | getPrizeList(){ |
| | | this.prizeLoading = true; |
| | | getPrizePage(this.prizeSearchForm).then(res =>{ |
| | | this.prizeLoading = false; |
| | | if (res.code === 200){ |
| | | this.prizeList = res.data; |
| | | this.prizeTotal = res.total |
| | | }else { |
| | | this.$Message.error(res.msg) |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | //规则 |
| | | validateBeginTime(rule, value, callback) { |
| | | console.log("触发验证") |
| | | // 校验必填 |
| | |
| | | } |
| | | callback(); // 验证通过 |
| | | }, |
| | | |
| | | //奖品设置 |
| | | setPrize(row){ |
| | | //判断是否启动,若启动则,无法编辑 |
| | | if("ON" === row.enableStatus){ |
| | | this.$Message.error("抽奖已开启,不能编辑!") |
| | | return |
| | | } |
| | | //判断是否已有奖品有的话不让设置 |
| | | this.activityPrizeId = row.id; |
| | | this.getPrizeList(); |
| | | this.prizeSettingShow = true; |
| | | |
| | | this.choiceLoading = true; |
| | | getActivityRefPrizeByActivityId(row.id).then(res =>{ |
| | | this.choiceLoading = false; |
| | | if (res.code === 200){ |
| | | res.data.forEach(item =>{ |
| | | item.id =null; |
| | | }) |
| | | this.choiceData = res.data |
| | | } |
| | | |
| | | }) |
| | | |
| | | }, |
| | | prizeSettingModelClose(){ |
| | | this.activityPrizeId = null; |
| | | this.prizeSettingShow = false; |
| | | this.choiceData = []; |
| | | }, |
| | | //文本转换 |
| | | formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') { |
| | | if (!date) return ''; |
| | | |
| | |
| | | this.getPage() |
| | | }, |
| | | handleBeforeUpload(file,type){ |
| | | if ("content" === type){ |
| | | this.activityImg = file |
| | | if("content" === type){ |
| | | this.activityImg = file; |
| | | this.imgTempUrl = URL.createObjectURL(file); |
| | | return false; |
| | | }else if ("cover" === type){ |
| | | this.activityCover = file; |
| | | this.coverTempUrl = URL.createObjectURL(file); |
| | | return false; |
| | | } |
| | | }, |
| | | // 删除文件 |
| | | handleRemove(type) { |
| | | if ('content' === type){ |
| | | this.activityImg = null; |
| | | this.imgTempUrl = null; |
| | | |
| | | }else if ('cover' === type){ |
| | | this.activityCover = null; |
| | | this.coverTempUrl = null; |
| | | } |
| | | }, |
| | | |
| | | async uploadFileByLmk(){ |
| | | if (this.activityImg){ |
| | | this.submitLoading = true |
| | | const formData = new FormData() |
| | | formData.append('file', this.activityImg) |
| | | |
| | | uploadFileByLmk(formData).then(res => { |
| | | await uploadFileByLmk(formData).then(res => { |
| | | this.submitLoading = false |
| | | if (res.code === 200) { |
| | | this.activityFrom.activityImg = res.data.fileKey; |
| | | this.activityImg.activityImgUrl = res.data.url; |
| | | this.$Message.success('上传成功') |
| | | // this.$Message.success('上传成功') |
| | | }else{ |
| | | this.$Message.error(res.msg) |
| | | // this.$Message.error(res.msg) |
| | | } |
| | | }).catch(() => { |
| | | this.submitLoading = false |
| | | }) |
| | | }else if ("cover" === type){ |
| | | this.activityCover = file |
| | | } |
| | | if (this.activityCover){ |
| | | this.submitLoading = true |
| | | const formData = new FormData() |
| | | formData.append('file', this.activityCover) |
| | | |
| | | uploadFileByLmk(formData).then(res => { |
| | | await uploadFileByLmk(formData).then(res => { |
| | | this.submitLoading = false |
| | | if (res.code === 200) { |
| | | this.activityFrom.activityCover = res.data.fileKey |
| | | this.activityCover.activityCoverUrl = res.data.url; |
| | | this.$Message.success('上传成功') |
| | | // this.$Message.success('上传成功') |
| | | }else{ |
| | | this.$Message.error(res.msg) |
| | | // this.$Message.error(res.msg) |
| | | } |
| | | }).catch(() => { |
| | | this.submitLoading = false |
| | | }) |
| | | } |
| | | |
| | | |
| | | }, |
| | | // 删除文件 |
| | | handleRemove(type) { |
| | | if ("content" === type){ |
| | | //点击关闭窗口时确保文件已被清除 |
| | | if (this.activityImg === null) { |
| | | return; |
| | | } |
| | | if (!this.activityFrom.activityImg) { |
| | | this.activityImg = null |
| | | return |
| | | } |
| | | delByKey(this.activityFrom.activityImg).then(res => { |
| | | if (res.code === 200) { |
| | | this.activityImg = null |
| | | this.activityFrom.activityImg = '' |
| | | }else{ |
| | | this.$Message.error(res.msg) |
| | | } |
| | | }) |
| | | }else if ("cover" === type){ |
| | | if (this.activityCover === null) { |
| | | return; |
| | | } |
| | | if (!this.activityFrom.activityCover) { |
| | | this.activityCover = null |
| | | return |
| | | } |
| | | delByKey(this.activityFrom.activityCover).then(res => { |
| | | if (res.code === 200) { |
| | | this.activityCover = null |
| | | this.activityFrom.activityCover = '' |
| | | }else{ |
| | | this.$Message.error(res.msg) |
| | | } |
| | | }) |
| | | async saveOrUpdate(){ |
| | | if (this.activityFrom.maxPrize < this.activityFrom.prizeNum){ |
| | | this.$Message.error("初始化次数因小于或等于最大抽奖次数") |
| | | return |
| | | } |
| | | await this.uploadFileByLmk(); |
| | | |
| | | |
| | | |
| | | }, |
| | | saveOrUpdate(){ |
| | | const submitData = { |
| | | ...this.activityFrom, |
| | | beginTime: this.formatDate(this.activityFrom.beginTime, 'YYYY-MM-DD HH:mm:ss'), |
| | |
| | | this.submitLoading = false |
| | | if (res.code === 200) { |
| | | this.$Message.success(res.msg) |
| | | this.modelClose() |
| | | this.modelShow = false; |
| | | this.getPage() |
| | | }else{ |
| | | this.$Message.error(res.msg) |
| | |
| | | modelClose(){ |
| | | this.modelShow = false |
| | | this.submitLoading = false |
| | | this.handleRemove("content"); |
| | | this.handleRemove("cover"); |
| | | this.$refs.form.resetFields() |
| | | }, |
| | | getPage(){ |
| | |
| | | this.loading = false; |
| | | if (res.code === 200){ |
| | | this.activityList = res.data; |
| | | this.total = res.total; |
| | | }else { |
| | | this.$Message.error(res.msg) |
| | | } |
| | |
| | | detail(row){ |
| | | this.infoModalShow = true; |
| | | this.detailData = {...row}; |
| | | getActivityRefPrizeByActivityId(row.id).then(res=>{ |
| | | if (res.code ===200){ |
| | | this.$set(this.detailData,'prizes', res.data); |
| | | } |
| | | }) |
| | | console.log(this.detailData) |
| | | |
| | | }, |
| | | openEdit(row){ |
| | | this.modelShow = true; |
| | | this.modelTitle = "编辑活动"; |
| | | this.activityFrom= { |
| | | id:row.id, |
| | | activityName:row.activityName, |
| | | activityDes:row.activityDes, |
| | | beginTime:this.formatDate(row.beginTime, 'YYYY-MM-DD HH:mm:ss'), |
| | | endTime: this.formatDate(row.endTime, 'YYYY-MM-DD HH:mm:ss'), |
| | | maxPrize:row.maxPrize, |
| | | prizeNum:row.prizeNum, |
| | | activityImg:row.activityImg, |
| | | activityCover:row.activityCover, |
| | | enableStatus:row.enableStatus, |
| | | } |
| | | }, |
| | | // openEdit(row){ |
| | | // if("ON" === row.enableStatus){ |
| | | // this.$Message.error("抽奖已开启,不能编辑!") |
| | | // return |
| | | // } |
| | | // this.modelShow = true; |
| | | // this.modelTitle = "编辑活动"; |
| | | // this.activityFrom= { |
| | | // id:row.id, |
| | | // activityName:row.activityName, |
| | | // activityDes:row.activityDes, |
| | | // beginTime:this.formatDate(row.beginTime, 'YYYY-MM-DD HH:mm:ss'), |
| | | // endTime: this.formatDate(row.endTime, 'YYYY-MM-DD HH:mm:ss'), |
| | | // maxPrize:row.maxPrize, |
| | | // prizeNum:row.prizeNum, |
| | | // activityImg:row.activityImg, |
| | | // activityCover:row.activityCover, |
| | | // enableStatus:row.enableStatus, |
| | | // } |
| | | // this.coverTempUrl = row.activityCoverUrl; |
| | | // this.imgTempUrl = row.activityImgUrl; |
| | | // |
| | | // }, |
| | | |
| | | handleSearch(type,value){ |
| | | if (type === 'beginTime') { |
| | |
| | | this.getPage() |
| | | }, |
| | | openAdd(){ |
| | | this.$refs.form.resetFields() |
| | | this.activityFrom.id = null; |
| | | this.modelShow = true; |
| | | this.modelTitle = "新增活动"; |
| | | this.coverTempUrl = null; |
| | | this.prizeCover=null; |
| | | this.prizeImg = null; |
| | | this.imgTempUrl = null; |
| | | }, |
| | | delById(row){ |
| | | del(row.id).then(res=>{ |
| | | if (res.code === 200){ |
| | | this.$Message.success(res.msg) |
| | | }else { |
| | | this.$Message.error(res.msg) |
| | | } |
| | | this.getPage() |
| | | }) |
| | | }, |
| | | // delById(row){ |
| | | // if("ON" === row.enableStatus){ |
| | | // this.$Message.error("抽奖已开启,无法删除!") |
| | | // return |
| | | // } |
| | | // //若关联商品不让删 |
| | | // del(row.id).then(res=>{ |
| | | // if (res.code === 200){ |
| | | // this.$Message.success(res.msg) |
| | | // }else { |
| | | // this.$Message.error(res.msg) |
| | | // } |
| | | // this.getPage() |
| | | // }) |
| | | // }, |
| | | // 获取富文本编辑器的内容 |
| | | // 初始化数据 |
| | | init() { |
| | |
| | | this.searchForm.pageNumber = page |
| | | this.getPage() |
| | | }, |
| | | changeStatus(){ |
| | | |
| | | prizeChangePage(){ |
| | | this.prizeSearchForm.pageNumber = 1 |
| | | this.prizeSearchForm.pageSize = pageSize |
| | | this.getPrizeList() |
| | | }, |
| | | prizeChangePageSize(){ |
| | | this.prizeSearchForm.pageNumber = page |
| | | this.getPrizeList() |
| | | }, |
| | | async publishPrizeActivity(row){ |
| | | await publishPrizeActivity(row.id).then(res =>{ |
| | | if (res.code === 200){ |
| | | this.$Message.success(res.msg) |
| | | }else{ |
| | | this.$Message.error(res.msg) |
| | | } |
| | | }) |
| | | await this.getPage() |
| | | }, |
| | | |
| | | }, |
| | |
| | | } |
| | | } |
| | | .activity-table { |
| | | .media-container { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 100px; |
| | | |
| | | .thumbnail { |
| | | max-width: 100%; |
| | | max-height: 100%; |
| | |
| | | box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); |
| | | } |
| | | } |
| | | .action-btns { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | justify-content: center; |
| | | |
| | | .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; |
| | | .ivu-btn { |
| | | margin: 4px; |
| | | font-size: 12px; |
| | | padding: 2px 6px; |
| | | min-width: 60px; |
| | | } |
| | | } |
| | | } |
| | | .prize-table { |
| | | .thumbnail { |
| | | max-width: 100px; |
| | | max-height: 100px; |
| | | 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); |
| | | } |
| | | } |
| | | |
| | | .action-btns { |
| | | display: flex; |
| | |
| | | } |
| | | } |
| | | } |
| | | .preview-image-limit{ |
| | | max-width: 100%; |
| | | max-height: 200px; |
| | | object-fit: contain; |
| | | border-radius: 4px; |
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
| | | display: block; |
| | | } |
| | | //详情商品样式 |
| | | .prize-list { |
| | | margin-top: 10px; |
| | | max-height: 300px; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .prize-item { |
| | | padding: 12px; |
| | | border: 1px solid #e8eaec; |
| | | border-radius: 4px; |
| | | margin-bottom: 10px; |
| | | background: #f8f9fa; |
| | | } |
| | | .prize-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .prize-name { |
| | | font-weight: bold; |
| | | color: #17233d; |
| | | } |
| | | |
| | | .prize-content { |
| | | font-size: 13px; |
| | | } |
| | | |
| | | .prize-info { |
| | | margin-top: 8px; |
| | | color: #808695; |
| | | } |
| | | |
| | | </style> |