268 行
11 KiB
HTML
268 行
11 KiB
HTML
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
|
||
<style>
|
||
|
||
.shopro-reset-button {
|
||
margin-right: 20px;
|
||
}
|
||
|
||
#activityIndex {
|
||
background: #fff;
|
||
padding: 0 20px 30px;
|
||
font-size: 14px;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 500;
|
||
color: #444;
|
||
}
|
||
|
||
.activity-title {
|
||
height: 50px;
|
||
line-height: 50px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.activity-tips {
|
||
padding: 16px;
|
||
border-radius: 5px;
|
||
background-color: #F1EBFA;
|
||
position: relative;
|
||
margin-bottom: 20px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.activity-tips-close {
|
||
color: #7536D0;
|
||
position: absolute;
|
||
top: 16px;
|
||
right: 16px;
|
||
}
|
||
|
||
.activity-screen {
|
||
flex-wrap: wrap;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.activity-screen-condition {
|
||
flex: 1;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.activity-screen-button {
|
||
flex-shrink: 0;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.activity-screen-condition-item {
|
||
margin: 0 28px 20px 0;
|
||
}
|
||
|
||
.activity-screen-condition-label {
|
||
margin-right: 14px;
|
||
flex-shrink: 0;
|
||
font-size: 12px;
|
||
color: #444;
|
||
}
|
||
|
||
.activity-screen-condition-content {
|
||
width: 176px;
|
||
}
|
||
|
||
.activity-screen-condition-content-time {
|
||
width: 400px;
|
||
}
|
||
|
||
.activity-table-button-left {
|
||
flex: 1;
|
||
}
|
||
|
||
.activity-table-button-right {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.activity-table-container {
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.activity-table-goods-image {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
border: 1px solid #e6e6e6;
|
||
}
|
||
|
||
.table-operation {
|
||
cursor: pointer;
|
||
color: #7536D0;
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.table-operation-delete {
|
||
color: #F54747;
|
||
margin-right: 0px;
|
||
}
|
||
|
||
.table-operation:hover {
|
||
color: #7536D0;
|
||
}
|
||
|
||
.table-operation-delete:hover {
|
||
color: #F54747;
|
||
}
|
||
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
||
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
|
||
<div id="activityIndex" v-cloak>
|
||
<div class="activity-title">营销活动</div>
|
||
<div class="activity-tips" v-if="tipCloseFlag">
|
||
<p><strong>活动说明</strong></p>
|
||
<p>
|
||
1、为确保活动的可靠性，请务必配置 Redis
|
||
<!-- <a class="tip-a" href="https://doc.fastadmin.net/shopro" target="_blank">查看文档</a>-->
|
||
</p>
|
||
<p>2、活动订单自动关闭时间 是为当前活动订单专门设置的超时未支付自动关闭时间，如果未设置，将使用系统订单自动关闭时间</p>
|
||
<p>3、活动自动关闭时间 是当前活动结束后多长时间自动关闭，关闭的活动请在历史活动查看</p>
|
||
<p>4、每人限购 不设置或者设置为 0 将不限制购买数量</p>
|
||
<i class="el-icon-close activity-tips-close" @click="activityTipsClose"></i>
|
||
</div>
|
||
<div class="activity-screen display-flex">
|
||
<div class="activity-screen-condition display-flex">
|
||
<div class="activity-screen-condition-item display-flex">
|
||
<div class="activity-screen-condition-label">
|
||
活动名称
|
||
</div>
|
||
<div class="activity-screen-condition-content">
|
||
<el-input size="small" v-model="searchForm.title" placeholder="请输入活动名称"></el-input>
|
||
</div>
|
||
</div>
|
||
<div class="activity-screen-condition-item display-flex">
|
||
<div class="activity-screen-condition-label">
|
||
活动类型
|
||
</div>
|
||
<div class="activity-screen-condition-content">
|
||
<el-select class="select-item" size="small" v-model="searchForm.type" placeholder="请选择">
|
||
<el-option v-for="item in activityOptions" :key="item.type" :label="item.name"
|
||
:value="item.type">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="activity-screen-condition-item display-flex">
|
||
<div class="activity-screen-condition-label">
|
||
活动状态
|
||
</div>
|
||
<div class="activity-screen-condition-content">
|
||
<el-select class="select-item" size="small" v-model="searchForm.status" placeholder="请选择">
|
||
<el-option v-for="item in statusOptins" :key="item.type" :label="item.name"
|
||
:value="item.type">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="activity-screen-condition-item display-flex">
|
||
<div class="activity-screen-condition-label">
|
||
活动时间
|
||
</div>
|
||
<div class="activity-screen-condition-content activity-screen-condition-content-time">
|
||
<el-date-picker v-model="searchForm.activitytime" type="datetimerange" size="small"
|
||
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
|
||
format="yyyy-MM-dd HH:mm:ss">
|
||
</el-date-picker>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="activity-screen-button display-flex">
|
||
<div class="shopro-button shopro-reset-button" @click="screenEmpty">重置</div>
|
||
<div class="shopro-button shopro-screen-button" @click="getActivityData(0,10)">筛选</div>
|
||
</div>
|
||
</div>
|
||
<div class="activity-table-button display-flex">
|
||
<div class="activity-table-button-left display-flex">
|
||
<div class="shopro-button shopro-refresh-button" @click="getActivityData()"><i class="el-icon-refresh"></i></div>
|
||
<div class="shopro-add-button" @click="activityAdd">
|
||
<i class="el-icon-plus margin-right-5"></i>新建活动
|
||
</div>
|
||
</div>
|
||
<div class="activity-table-button-right">
|
||
<div class="recycle-btn" @click="activityRecyclebin">历史活动</div>
|
||
</div>
|
||
</div>
|
||
<div class="activity-table-container">
|
||
<el-table :data="activityData" style="width: 100%" border>
|
||
<el-table-column prop="id" label="ID" width="80">
|
||
</el-table-column>
|
||
<el-table-column prop="title" label="活动名称" width="160">
|
||
</el-table-column>
|
||
<el-table-column prop="goods_ids" label="商品组" min-width="200">
|
||
<template slot-scope="scope">
|
||
<div v-if="scope.row.goods.length>0" class="display-flex shopro-container-scrollbar" style="overflow: auto;">
|
||
<div v-for="(ite,gindex) in scope.row.goods">
|
||
<el-popover placement="bottom" trigger="hover" width="240">
|
||
<div class="popover-container">
|
||
<div class="display-flex" style="align-items: flex-start;">
|
||
<div class="display-flex">
|
||
<div class="popover-tip">商品ID</div>：
|
||
</div>
|
||
<div>{{ite.id}}</div>
|
||
</div>
|
||
<div class="display-flex" style="align-items: flex-start;">
|
||
<div class="display-flex" style="flex-shrink: 0;">
|
||
<div class="popover-tip">商品标题</div>：
|
||
</div>
|
||
<div>{{ite.title}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="activity-table-goods-image" slot="reference"
|
||
:style="{marginRight:gindex!=scope.row.goods.length-1?'6px':''}">
|
||
<el-image :src="Fast.api.cdnurl(ite.image)" fit="contain">
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
</div>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
<div v-else style="line-height: 36px;">全部商品</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="type_text" label="类型" width="160">
|
||
</el-table-column>
|
||
<el-table-column prop="num" label="抢购名额" width="160">
|
||
</el-table-column>
|
||
<el-table-column prop="status_text" label="状态" width="160">
|
||
</el-table-column>
|
||
<el-table-column prop="starttime_text" label="开始时间" width="200">
|
||
</el-table-column>
|
||
<el-table-column prop="endtime_text" label="结束时间" width="200">
|
||
</el-table-column>
|
||
<el-table-column prop="createtime" label="创建时间" width="200">
|
||
<template slot-scope="scope">
|
||
<span>{{moment(scope.row.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="richtext_id" label="活动说明" width="80">
|
||
</el-table-column>
|
||
<el-table-column fixed="right" label="操作" width="140">
|
||
<template slot-scope="scope">
|
||
<span class="table-operation" @click="activityView(scope.row)">查看
|
||
</span>
|
||
<span v-if="scope.row.status=='nostart' || scope.row.status=='ing'" class="table-operation"
|
||
@click="activityEdit(scope.row)">编辑</span>
|
||
<span class="table-operation table-operation-delete" @click="activityDelete(scope.row)">删除</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="shopro-pagination-container">
|
||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
|
||
:page-sizes="[10, 20, 30, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
|
||
:total="totalPage">
|
||
</el-pagination>
|
||
</div>
|
||
</div> |