作者 陈虹瑞

11

... ... @@ -39,6 +39,13 @@ export const seteditActivityInfo = (data) => {
data
})
}
// 删除
export const delidshuju = (id) => {
return request({
url: `/my/myActivity/deleteActivity?id=${id}`,
method: 'get'
})
}
// 导入excel
export const setreadExcel = (data) => {
return request({
... ...
... ... @@ -29,7 +29,7 @@ export function piechart () {
},
xAxis: { type: 'category' },
yAxis: { gridIndex: 0 },
grid: { top: '55%' },
grid: { right: '25%' },
series: [
{
type: 'line',
... ... @@ -59,7 +59,7 @@ export function piechart () {
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
center: ['90%', '55%'],
emphasis: {
focus: 'self'
},
... ...
import * as echarts from 'echarts'
export function piechart () {
export function piechart2 () {
const chartDom = document.getElementById('pie2')
const myChart = echarts.init(chartDom)
let option
... ... @@ -29,7 +29,9 @@ export function piechart () {
},
xAxis: { type: 'category' },
yAxis: { gridIndex: 0 },
grid: { top: '55%' },
// grid: { top: '55%' },
grid: { right: '25%' },
series: [
{
type: 'line',
... ... @@ -59,7 +61,9 @@ export function piechart () {
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
// center: ['50%', '25%'],
center: ['90%', '55%'],
emphasis: {
focus: 'self'
},
... ...
... ... @@ -27,16 +27,16 @@
v-if="$store.state.user.allstatelist"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:columns="columns"
:data-source="$store.state.user.allstatelist"
:data-source="datalist"
bordered
>
<img slot="coverPreview" slot-scope="text, record" :src=record.coverPreview v-show="record.coverPreview" class="imghome"/>
<div slot="operation" class="op-a">
<a href="#">发布</a>
<a href="#">编辑</a>
<a href="#">删除</a>
<a href="#">详情</a>
<div slot="operation" slot-scope="text, record" class="op-a">
<a href="#" @click="clickafn(record.id,0)">发布</a>
<a href="#" @click="clickafn(record.id,1)">编辑</a>
<a href="#" @click="clickafn(record.id,2)">删除</a>
<a href="#" @click="clickafn(record.id,3)">详情</a>
</div>
</a-table>
</div>
... ... @@ -56,7 +56,8 @@
</template>
<script>
import { ADDactivity } from '@/api/parameterconfiguration'
import { ADDactivity, queryList, delidshuju } from '@/api/parameterconfiguration'
const columns = [
{
title: '预览图',
... ... @@ -92,19 +93,30 @@ const columns = [
},
{
title: '状态',
dataIndex: 'address3',
dataIndex: 'state',
align: 'center',
width: 100
width: 100,
customRender: function (row) {
if (row === 0) return '介绍'
if (row === 1) return '打卡'
if (row === 2) return '抽奖'
}
},
{
title: '活动时间',
dataIndex: 'activityStartTime',
align: 'center',
width: 150
width: 150,
customRender: function (row) {
if (row === 0) return '未发布'
if (row === 1) return '未开始'
if (row === 2) return '进行中'
if (row === 3) return '已结束'
}
},
{
title: '操作',
dataIndex: 'address5',
dataIndex: 'id',
align: 'center',
scopedSlots: { customRender: 'operation' },
width: 150
... ... @@ -121,15 +133,29 @@ export default {
columns,
selectedRowKeys: [], // Check here to configure the default column
loading: false,
// 模板类型
type: { 0: '抽奖', 1: '打卡', 2: '介绍' }
// 全部数据
datalist: []
}
},
created () {
this.$store.dispatch('user/getallstatelist')
// this.$store.dispatch('user/getallstatelist')
this.getallshuju()
},
methods: {
// 点击操作按钮
async clickafn (id, i) {
console.log(id, i)
// 删除
if (i === 2) {
await delidshuju(id)
this.getallshuju()
}
},
async getallshuju () {
const { data: res } = await queryList({})
console.log(res, '获取到全部数据')
this.datalist = res.data
},
onChange (e) {
console.log(`checked = ${e.target.value}`)
},
... ...
... ... @@ -99,6 +99,7 @@ export default {
.xiang-top {
padding: 20px;
background-color: #fff;
border-radius: 5px;
display: flex;
justify-content: space-between;
width: 100%;
... ... @@ -147,6 +148,7 @@ export default {
.xiang-bottom {
margin-top:30px;
background-color: #fff;
border-radius: 5px;
padding: 20px;
.bottom-nav {
display: flex;
... ... @@ -185,6 +187,28 @@ export default {
// echart
.echart-tu {
display: flex;
flex-direction: column;
margin-top: 20px;
background-color: #fff;
border-radius: 5px;
padding: 20px;
.echart-nav {
display: flex;
justify-content:space-between;
align-items: center;
.nav-rignt {
display: flex;
align-items: center;
.time {
width: 500px;
display: flex;
align-items: center;
}
p {
margin: 0 20px;
}
}
}
}
}
</style>
... ...
... ... @@ -48,22 +48,313 @@
<!-- <div id="main" ></div> -->
<div id="main" style="width: 100%;height:400px;"></div>
</div>
</div>
<!-- 渠道来源 -->
<div class="echart-tu">
<div class="echart-nav">
<h1>渠道来源</h1>
<div class="nav-rignt">
<div class="time">
<a-date-picker style="width: 100%" />
<span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
-
</span>
<a-date-picker style="width: 100%" />
</div>
<p>2022-3-4 00:00:00更因</p>
<a-button> 导出数据</a-button>
</div>
</div>
<div id="pie" style="width: 100%;height:400px;"></div>
<!-- <div id="main" style="width: 50%;height:400px;"></div> -->
</div>
<!-- 渠道开卡数 -->
<div class="echart-kaika">
<div class="echart-nav">
<h1>渠道开卡数</h1>
<div class="nav-rignt">
<div class="time">
<a-date-picker style="width: 100%" />
<span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
-
</span>
<a-date-picker style="width: 100%" />
</div>
<p>2022-3-4 00:00:00更因</p>
<a-button> 导出数据</a-button>
</div>
</div>
<div id="pie2" style="width: 100%;height:400px;"></div>
<!-- <div id="main" style="width: 50%;height:400px;"></div> -->
</div>
<!-- 奖项信息 -->
<div class="table-prize">
<div class="xinxi">
<div class="prize-nav">
<h1>奖项信息</h1>
<div>
<a-button>导入核销信息</a-button>
<a-button>导出中奖信息</a-button>
</div>
</div>
<div class="prizeta">
<a-table :columns="columns" :data-source="data" :bordered="true" :pagination="false">
</a-table>
</div>
</div>
<div class="qingdan">
<div class="prize-nav">
<h1>中奖人员清单</h1>
<!-- 奖项名称 -->
<div class="nav-div">
<span>奖项名称</span>
<div>
<a-select default-value="lucy" style="width: 120px" @change="handleChange">
<a-select-option value="jack">
Jack
</a-select-option>
<a-select-option value="lucy">
Lucy
</a-select-option>
<a-select-option value="disabled" disabled>
Disabled
</a-select-option>
<a-select-option value="Yiminghe">
yiminghe
</a-select-option>
</a-select>
</div>
</div>
<!-- 奖项等级 -->
<div class="nav-div">
<span>奖项等级</span>
<div>
<a-select default-value="lucy" style="width: 120px" @change="handleChange">
<a-select-option value="jack">
Jack
</a-select-option>
<a-select-option value="lucy">
Lucy
</a-select-option>
<a-select-option value="disabled" disabled>
Disabled
</a-select-option>
<a-select-option value="Yiminghe">
yiminghe
</a-select-option>
</a-select>
</div>
</div>
<!-- 核销状态 -->
<div class="nav-div">
<span>核销状态</span>
<div>
<a-select default-value="lucy" style="width: 120px" @change="handleChange">
<a-select-option value="jack">
Jack
</a-select-option>
<a-select-option value="lucy">
Lucy
</a-select-option>
<a-select-option value="disabled" disabled>
Disabled
</a-select-option>
<a-select-option value="Yiminghe">
yiminghe
</a-select-option>
</a-select>
</div>
</div>
<!-- 查询 -->
<div class="nav-div">
<span>查询</span>
<div>
<a-select default-value="jack" style="width: 80px" @change="handleChange">
<a-select-option value="jack">
手机
</a-select-option>
<a-select-option value="lucy">
省份证
</a-select-option>
<a-select-option value="disabled" disabled>
Disabled
</a-select-option>
<a-select-option value="Yiminghe">
yiminghe
</a-select-option>
</a-select>
<a-input placeholder="请输入" style="width: 150px"/>
</div>
</div>
<div>
<a-button>导出人员明细</a-button>
</div>
</div>
<div class="prizeta">
<a-table :columns="detailedlist" :data-source="data" :bordered="true" >
<div slot="operation" class="op-a">
<a href="#">中奖人员信息</a>
<a href="#">兑换码</a>
</div>
</a-table>
</div>
</div>
</div>
</div>
</template>
<script>
import { chart } from '@/utils/ECharts/LineDiagram'
import { piechart } from '@/utils/ECharts/Piechart'
import { piechart2 } from '@/utils/ECharts/piechart2'
// 奖项信息
const columns = [
{
title: '奖项名称',
dataIndex: 'jiang',
key: 'name',
align: 'center',
slots: { title: 'customTitle' },
scopedSlots: { customRender: 'name' }
},
{
title: '奖项等级',
dataIndex: 'age',
key: 'age',
align: 'center'
},
{
title: '奖项设置数量',
dataIndex: 'address',
align: 'center',
key: 'address'
},
{
title: '奖项中奖率',
key: 'tags',
align: 'center',
dataIndex: 'tags',
scopedSlots: { customRender: 'tags' }
},
{
title: '已中奖',
key: 'action',
align: 'center',
scopedSlots: { customRender: 'action' }
},
{
title: '剩余',
key: 'action',
align: 'center',
scopedSlots: { customRender: 'action' }
},
{
title: '核销数量',
key: 'action',
align: 'center',
scopedSlots: { customRender: 'operation' }
}
]
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer']
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser']
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher']
}
]
// 中奖清单
const detailedlist = [
{
title: '用户ID',
dataIndex: 'jiang',
key: 'name',
align: 'center',
width: 100
},
{
title: '微信名',
dataIndex: 'age',
key: 'age',
align: 'center'
},
{
title: '姓名',
dataIndex: 'address',
align: 'center',
key: 'address',
width: 150
},
{
title: '联系方式',
key: 'tags',
align: 'center',
dataIndex: 'tags',
width: 300
},
{
title: '中奖名称',
key: 'action',
align: 'center',
scopedSlots: { customRender: 'action' }
},
{
title: '奖项等级',
key: 'action',
align: 'center',
scopedSlots: { customRender: 'action' }
},
{
title: '中将数量',
key: 'action',
align: 'center',
scopedSlots: { customRender: 'action' }
},
{
title: '核销状态',
key: 'action',
align: 'center',
scopedSlots: { customRender: 'action' }
},
{
title: '操作',
key: 'action',
align: 'center',
scopedSlots: { customRender: 'operation' }
}
]
export default {
name: 'NormalHuod',
data () {
return {
data,
columns,
// 中奖清单
detailedlist
}
},
mounted () {
chart()
piechart()
piechart2()
}
}
</script>
... ... @@ -77,6 +368,7 @@ export default {
.xiang-top {
padding: 20px;
background-color: #fff;
border-radius: 5px;
display: flex;
justify-content: space-between;
width: 100%;
... ... @@ -125,10 +417,12 @@ export default {
.xiang-bottom {
margin-top:30px;
background-color: #fff;
border-radius: 5px;
padding: 20px;
.bottom-nav {
display: flex;
justify-content:space-between;
align-items: center;
.nav-rignt {
display: flex;
align-items: center;
... ... @@ -159,6 +453,92 @@ export default {
}
}
}
// echart
.echart-tu {
display: flex;
flex-direction: column;
margin-top: 20px;
background-color: #fff;
border-radius: 5px;
padding: 20px;
.echart-nav {
display: flex;
justify-content:space-between;
align-items: center;
.nav-rignt {
display: flex;
align-items: center;
.time {
width: 500px;
display: flex;
align-items: center;
}
p {
margin: 0 20px;
}
}
}
}
// echart2
.echart-kaika {
display: flex;
flex-direction: column;
margin-top: 20px;
background-color: #fff;
border-radius: 5px;
padding: 20px;
.echart-nav {
display: flex;
justify-content:space-between;
align-items: center;
.nav-rignt {
display: flex;
align-items: center;
.time {
width: 500px;
display: flex;
align-items: center;
}
p {
margin: 0 20px;
}
}
}
}
// 奖项信息
.table-prize {
margin-top: 20px;
background-color: #fff;
border-radius: 5px;
padding: 20px;
.xinxi {
.prize-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
}
.qingdan {
.prize-nav {
display: flex;
justify-content: space-between;
align-items: center;
.nav-div {
display: flex;
align-items: center;
span {
margin-right: 5px;
}
}
}
}
}
}
//
.op-a {
a{
margin: 0 5px;
}
}
</style>
... ...
... ... @@ -76,6 +76,7 @@ export default {
.xiang-top {
padding: 20px;
background-color: #fff;
border-radius: 5px;
display: flex;
justify-content: space-between;
width: 100%;
... ... @@ -124,6 +125,7 @@ export default {
.xiang-bottom {
margin-top:30px;
background-color: #fff;
border-radius: 5px;
padding: 20px;
.bottom-nav {
display: flex;
... ...
... ... @@ -4,40 +4,45 @@
<!-- <div class="cdd" @click="clickfn" style="width:50px;height: 40px;">新建活动</div>
<div class="cdd" @click="clickdef" style="width:50px;height: 40px;">获取所有页面数据</div> -->
<a-radio-group default-value="a" button-style="solid" @change="changecli" size="small">
<a-radio-group :default-value="ifshowye" button-style="solid" @change="changecli" size="small">
<a-radio-button value="a">
普通页面
</a-radio-button>
<a-radio-button value="b">
<a-radio-button value="c">
打卡页面
</a-radio-button>
<a-radio-button value="c">
<a-radio-button value="b">
抽奖页面
</a-radio-button>
</a-radio-group>
</div>
<!-- 汇总普通 -->
<!-- <Normalhuod /> -->
<Normalhuod v-if="ifshowye==='a'"/>
<!-- 汇总抽奖 -->
<!-- <LuckDraw /> -->
<LuckDraw v-if="ifshowye==='c'"/>
<!-- 汇总打卡 -->
<Activitypunchpage />
<Activitypunchpage v-if="ifshowye==='b'"/>
</div>
</template>
<script>
// import Normalhuod from './Normalhuod'
import Normalhuod from './Normalhuod'
import { ADDactivity } from '@/api/parameterconfiguration'
// import LuckDraw from '@/views/LuckDraw'
import LuckDraw from './LuckDraw'
import Activitypunchpage from './Activitypunchpage'
export default {
name: 'NormalHuod',
components: {
// Normalhuod
// LuckDraw
Normalhuod,
LuckDraw,
Activitypunchpage
},
data () {
return {
ifshowye: 'a'
}
},
methods: {
async xinjian () {
const res = await ADDactivity({ activityType: 1 })
... ... @@ -51,9 +56,9 @@ export default {
},
changecli (val) {
console.log(val)
if (val.target.value === 'a') { this.$router.push('/main') }
if (val.target.value === 'b') { this.$router.push('/Activitypunchpage') }
if (val.target.value === 'c') { this.$router.push('/') }
if (val.target.value === 'a') { this.ifshowye = 'a' }
if (val.target.value === 'b') { this.ifshowye = 'c' }
if (val.target.value === 'c') { this.ifshowye = 'b' }
}
}
... ...