zkthink
5 years ago
26 changed files with 4811 additions and 27 deletions
@ -0,0 +1,14 @@ |
|||||||
|
import axiosApi from './AxiosApi.js' |
||||||
|
|
||||||
|
const apiList = { |
||||||
|
addPromotion: `/authority/promotion` |
||||||
|
} |
||||||
|
export default { |
||||||
|
addPromotion(data) { |
||||||
|
return axiosApi({ |
||||||
|
method: 'POST', |
||||||
|
url: apiList.addPromotion, |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,114 @@ |
|||||||
|
<template> |
||||||
|
<div class="full-size"> |
||||||
|
<div |
||||||
|
ref="myEchart" |
||||||
|
class="full-size" |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import echarts from 'echarts' |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
chartData: { |
||||||
|
type: Object, |
||||||
|
default: () => {} |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
chartData: { |
||||||
|
deep: true, |
||||||
|
handler (newVal) { |
||||||
|
this.chartData = newVal |
||||||
|
this.draw() |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.draw() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
draw () { |
||||||
|
const myEchart = echarts.init(this.$refs.myEchart, 'light') |
||||||
|
const o = this.chartData |
||||||
|
// y轴设置 |
||||||
|
const y = Object.assign( |
||||||
|
{}, |
||||||
|
{ |
||||||
|
name: '金额/万元', |
||||||
|
nameLocation: 'end', |
||||||
|
nameTextStyle: { |
||||||
|
color: '#999999', |
||||||
|
fontSize: 14, |
||||||
|
padding: [0, 10, -5, 0] |
||||||
|
|
||||||
|
}, |
||||||
|
type: 'value', |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: 'rgba(163,167,174,0.5)', |
||||||
|
type: 'dotted' |
||||||
|
} |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: '#E0E5EB' |
||||||
|
} |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
color: '#999999', |
||||||
|
fontSize: 14 |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
} |
||||||
|
}, |
||||||
|
o.yAxis |
||||||
|
) |
||||||
|
const option = { |
||||||
|
// 图标的位置 |
||||||
|
grid: { |
||||||
|
top: '15%', |
||||||
|
bottom: '15%', |
||||||
|
left: '10%' |
||||||
|
}, |
||||||
|
// x轴 |
||||||
|
xAxis: { |
||||||
|
name: '时间', |
||||||
|
nameLocation: 'end', |
||||||
|
nameTextStyle: { |
||||||
|
color: '#999999', |
||||||
|
fontSize: 14, |
||||||
|
padding: [0, 0, 0, -10] |
||||||
|
|
||||||
|
}, |
||||||
|
data: o.xData, |
||||||
|
axisLabel: { |
||||||
|
color: '#999999', |
||||||
|
fontSize: 14 |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: '#E0E5EB' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// y轴 |
||||||
|
yAxis: y, |
||||||
|
// 柱状图和线状图数据展示 |
||||||
|
series: o.series |
||||||
|
} |
||||||
|
myEchart.setOption(option) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
<template> |
||||||
|
<div class="full-size"> |
||||||
|
<div |
||||||
|
ref="myEchart" |
||||||
|
class="full-size" |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import echarts from 'echarts' |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
chartData: { |
||||||
|
type: Object, |
||||||
|
default: () => {} |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
chartData: { |
||||||
|
deep: true, |
||||||
|
handler (newVal) { |
||||||
|
this.chartData = newVal |
||||||
|
this.draw() |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.draw() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
draw () { |
||||||
|
const myEchart = echarts.init(this.$refs.myEchart, 'light') |
||||||
|
const o = this.chartData |
||||||
|
|
||||||
|
const option = { |
||||||
|
color: ['#3A68F2', '#DEDEDE'], |
||||||
|
series: [ |
||||||
|
Object.assign({}, { |
||||||
|
type: 'pie', |
||||||
|
radius: ['45%', '60%'], |
||||||
|
center: ['50%', '55%'], |
||||||
|
label: { |
||||||
|
normal: { |
||||||
|
show: true, |
||||||
|
formatter: function (p) { |
||||||
|
// const t = o.lineBreak ? '\n' : ' ' |
||||||
|
// ${p.value + o.unit} |
||||||
|
return `{a|${p.name}}{b| ${p.percent}%}` |
||||||
|
}, |
||||||
|
rich: { |
||||||
|
a: { |
||||||
|
color: '#666666', |
||||||
|
fontSize: 16 |
||||||
|
}, |
||||||
|
b: { |
||||||
|
color: '#666666', |
||||||
|
fontSize: 16 |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}, o.series), |
||||||
|
o.firstSeries || '' |
||||||
|
] |
||||||
|
} |
||||||
|
myEchart.setOption(option) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,225 @@ |
|||||||
|
<template> |
||||||
|
<div ref="usermap" class="full-size"></div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import map from './geo' |
||||||
|
import echarts from 'echarts' |
||||||
|
import 'echarts/lib/chart/map' |
||||||
|
import 'echarts/lib/component/geo' |
||||||
|
import 'echarts/map/js/china' |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
mapdata: { type: Array, default: () => [] } |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
seriesData: { |
||||||
|
seriesData: [{ name: '南海诸岛', value: 0, itemStyle: { normal: { opacity: 0, label: { show: false }}}}], |
||||||
|
minMaxData: { |
||||||
|
min: 0, |
||||||
|
max: 1000 |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
mapdata: { |
||||||
|
handler(newVal) { |
||||||
|
if (newVal.length !== 0) { |
||||||
|
this.seriesData = map.getCityGeo(newVal) |
||||||
|
console.log(newVal, 1212) |
||||||
|
} else { |
||||||
|
this.seriesData = { |
||||||
|
seriesData: [], |
||||||
|
minMaxData: { min: 0, max: 0 } |
||||||
|
} |
||||||
|
} |
||||||
|
this.userMap() |
||||||
|
}, |
||||||
|
deep: true |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.userMap() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
userMap() { |
||||||
|
// const mychart = this.$echarts.init(document.getElementById('user-map')); |
||||||
|
const mychart = echarts.init(this.$refs.usermap) |
||||||
|
// const d = this.seriesData |
||||||
|
const d = map.getCityGeo(this.mapdata) |
||||||
|
// const fontColor = '#bbb'; |
||||||
|
// const visualMapColor = ['#ff0030', '#fe00f5', '#fbff04', '#48fe00', '#02fffe']; |
||||||
|
const option = { |
||||||
|
// title: { |
||||||
|
// left: '5%', |
||||||
|
// top: '6%', |
||||||
|
// text: '登录情况分布', |
||||||
|
// textStyle: { |
||||||
|
// color: '#fff', |
||||||
|
// fontSize: '18', |
||||||
|
// fontWeight: '400' |
||||||
|
// } |
||||||
|
// }, |
||||||
|
animation: true, |
||||||
|
animationDuration: 1000, |
||||||
|
animationEasing: 'cubicInOut', |
||||||
|
animationDurationUpdate: 1000, |
||||||
|
animationEasingUpdate: 'cubicInOut', |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: (params) => { |
||||||
|
let value = params.value |
||||||
|
if (value instanceof Array) value = params.value[2] |
||||||
|
return `${params.name}总登录次数: ${value}次` |
||||||
|
}, |
||||||
|
extraCssText: 'width:150px;height:30px;' |
||||||
|
}, |
||||||
|
// legend: { |
||||||
|
// orient: 'vertical', |
||||||
|
// y: 'bottom', |
||||||
|
// x: 'right', |
||||||
|
// data: ['访问次数'], |
||||||
|
// textStyle: { |
||||||
|
// color: '#FFFFFF' |
||||||
|
// } |
||||||
|
// }, |
||||||
|
visualMap: [ |
||||||
|
// { |
||||||
|
// show: false, |
||||||
|
// min: this.seriesData.minMaxData.min, |
||||||
|
// max: this.seriesData.minMaxData.max, |
||||||
|
// color: visualMapColor, |
||||||
|
// dimension: 0, |
||||||
|
// seriesIndex: 2 |
||||||
|
// }, |
||||||
|
{ |
||||||
|
// min: this.seriesData.minMaxData.min, |
||||||
|
// max: this.seriesData.minMaxData.max, |
||||||
|
// text: ['高', '低'], |
||||||
|
// calculable: true, |
||||||
|
// itemWidth: 10, |
||||||
|
// itemHeight: 100, |
||||||
|
// color: visualMapColor, |
||||||
|
// textStyle: { |
||||||
|
// color: fontColor |
||||||
|
// }, |
||||||
|
// itemSymbol: 'circle', |
||||||
|
// seriesIndex: [0, 1] |
||||||
|
min: d.minMaxData.min, |
||||||
|
max: d.minMaxData.max, |
||||||
|
calculable: true, |
||||||
|
type: 'piecewise', |
||||||
|
itemWidth: 8, |
||||||
|
itemHeight: 8, |
||||||
|
inRange: { |
||||||
|
color: ['#50a3ba', '#eac736', '#d94e5d'] |
||||||
|
}, |
||||||
|
textStyle: { |
||||||
|
color: '#fff', |
||||||
|
fontSize: 10 |
||||||
|
}, |
||||||
|
orient: 'horizontal', |
||||||
|
left: '50%', |
||||||
|
itemGap: 5, |
||||||
|
textGap: 5, |
||||||
|
seriesIndex: [0, 1], |
||||||
|
formatter(a, b) { |
||||||
|
const fn = function (v) { |
||||||
|
if (v > 999) { |
||||||
|
return `${(v / 1000).toFixed(1)}k` |
||||||
|
} |
||||||
|
if (v > 9 && v < 1000) { |
||||||
|
return Math.floor(v / 10) * 10 |
||||||
|
} |
||||||
|
return parseInt(v, 0) |
||||||
|
} |
||||||
|
return fn(b) |
||||||
|
} |
||||||
|
}], |
||||||
|
geo: [{ |
||||||
|
map: 'china', |
||||||
|
roam: true, |
||||||
|
scaleLimit: { min: 1, max: 3 }, |
||||||
|
z: 1, |
||||||
|
zoom: 1, |
||||||
|
label: { |
||||||
|
emphasis: { |
||||||
|
show: false |
||||||
|
} |
||||||
|
}, |
||||||
|
// right: '40%', |
||||||
|
// left: '5%', |
||||||
|
// top: '10%', |
||||||
|
// bottom: '10%', |
||||||
|
itemStyle: { |
||||||
|
color: { |
||||||
|
type: 'linear', |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [{ |
||||||
|
offset: 0, color: 'red' // 0% 处的颜色 |
||||||
|
}, { |
||||||
|
offset: 1, color: 'blue' // 100% 处的颜色 |
||||||
|
}], |
||||||
|
globalCoord: false // 缺省为 false |
||||||
|
}, |
||||||
|
borderWidth: 1, |
||||||
|
shadowBlur: 8, |
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.3)', |
||||||
|
areaColor: '#0040b6', // '#0E0930' |
||||||
|
borderColor: '#84a3dd' |
||||||
|
}, |
||||||
|
emphasis: { |
||||||
|
show: true, |
||||||
|
// areaColor: '#3369D9', |
||||||
|
// opacity: 0.2 |
||||||
|
itemStyle: { |
||||||
|
areaColor: '#034fdb' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
], |
||||||
|
grid: { |
||||||
|
right: '40%' |
||||||
|
// top: 100, |
||||||
|
// bottom: 40, |
||||||
|
// width: '28%' |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '访问次数', |
||||||
|
type: 'scatter', |
||||||
|
coordinateSystem: 'geo', |
||||||
|
data: d.seriesData, |
||||||
|
// symbolSize: (val) => { |
||||||
|
// return Math.max(val[2] / 200, 8); |
||||||
|
// }, |
||||||
|
symbolSize: 10, |
||||||
|
label: { |
||||||
|
normal: { |
||||||
|
formatter: '{b}', |
||||||
|
position: 'right', |
||||||
|
show: false |
||||||
|
}, |
||||||
|
emphasis: { |
||||||
|
show: true |
||||||
|
} |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
normal: { |
||||||
|
color: 'rgba(7,58,249,1)' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
mychart.setOption(option, true) |
||||||
|
window.addEventListener('resize', () => { mychart.resize() }) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
@ -0,0 +1,110 @@ |
|||||||
|
<template> |
||||||
|
<div class="full-size"> |
||||||
|
<div |
||||||
|
ref="myEchart" |
||||||
|
class="full-size" |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import echarts from 'echarts' |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
chartData: { |
||||||
|
type: Object, |
||||||
|
default: () => {} |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
chartData: { |
||||||
|
deep: true, |
||||||
|
handler (newVal) { |
||||||
|
this.chartData = newVal |
||||||
|
this.draw() |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.draw() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
draw () { |
||||||
|
const myEchart = echarts.init(this.$refs.myEchart, 'light') |
||||||
|
const o = this.chartData |
||||||
|
const data = o.series.data |
||||||
|
let sum = 0 |
||||||
|
const obj = {} |
||||||
|
data.forEach(item => { |
||||||
|
obj[item.name] = item.value |
||||||
|
sum += item.value |
||||||
|
}) |
||||||
|
const option = { |
||||||
|
color: ['#3AA0FF', '#35CACA', '#4FCB74', '#FAD337', '#F1627B', '#965DE4'], |
||||||
|
legend: { |
||||||
|
orient: 'vertical', |
||||||
|
y: 'center', |
||||||
|
left: '52%', |
||||||
|
formatter(name) { |
||||||
|
const text = Number(obj[name]) === 0 ? '0' : `${(parseFloat(obj[name] / sum) * 100).toFixed(2)}%` |
||||||
|
return '{b|' + name + '} ' + '{a|' + text + '}' + `¥${obj[name]}` |
||||||
|
}, |
||||||
|
itemGap: 25, |
||||||
|
textStyle: { |
||||||
|
rich: { |
||||||
|
b: { |
||||||
|
align: 'left', |
||||||
|
fontSize: 16, |
||||||
|
width: 120 |
||||||
|
|
||||||
|
}, |
||||||
|
a: { |
||||||
|
align: 'left', |
||||||
|
fontSize: 16, |
||||||
|
width: 100 |
||||||
|
} |
||||||
|
}, |
||||||
|
fontSize: 16, |
||||||
|
color: '#666666', |
||||||
|
textAlign: 'right' |
||||||
|
} |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
Object.assign({}, { |
||||||
|
type: 'pie', |
||||||
|
radius: ['45%', '60%'], |
||||||
|
center: ['26%', '55%'], |
||||||
|
label: { |
||||||
|
normal: { |
||||||
|
show: false, |
||||||
|
formatter: function (p) { |
||||||
|
const t = o.lineBreak ? '\n' : ' ' |
||||||
|
return `{a|${p.name + t}}{b|${p.value + o.unit} ${p.percent}%}` |
||||||
|
}, |
||||||
|
rich: { |
||||||
|
a: { |
||||||
|
color: '#fff', |
||||||
|
fontSize: 16 |
||||||
|
}, |
||||||
|
b: { |
||||||
|
color: '#A4B5DA', |
||||||
|
fontSize: 16 |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}, o.series), |
||||||
|
o.firstSeries || '' |
||||||
|
] |
||||||
|
} |
||||||
|
myEchart.setOption(option) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<h1>保证金</h1> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='less' scoped></style> |
||||||
|
|
||||||
@ -0,0 +1,306 @@ |
|||||||
|
<template> |
||||||
|
<div class="edit_add_page"> |
||||||
|
<div class="content"> |
||||||
|
<div class="title"> |
||||||
|
活动列表/报名 |
||||||
|
<div class="btn_list"> |
||||||
|
<span @click="cancel">取消</span> |
||||||
|
<span @click="save">保存</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form ref="form" :model="form" label-width="100px"> |
||||||
|
<h2>基础信息</h2> |
||||||
|
<el-form-item label="活动名称:"> |
||||||
|
<el-input v-model="form.name" placeholder="请输入活动名称" /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="活动介绍:"> |
||||||
|
<el-input v-model="form.description" type="textarea" placeholder="请输入活动介绍" /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="活动时间:"> |
||||||
|
<el-date-picker |
||||||
|
v-model="date1" |
||||||
|
type="datetimerange" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="开始时间" |
||||||
|
end-placeholder="结束时间" |
||||||
|
value-format="yyyy-MM-dd HH:mm" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="起止时间:"> |
||||||
|
<el-date-picker |
||||||
|
v-model="date2" |
||||||
|
type="datetimerange" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="开始时间" |
||||||
|
end-placeholder="结束时间" |
||||||
|
value-format="yyyy-MM-dd HH:mm" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="活动保证金:"> |
||||||
|
<el-radio-group v-model="form.isNeedSecurityDeposit"> |
||||||
|
<el-radio :label="1">需要</el-radio> |
||||||
|
<el-radio :label="2">不需要</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item v-if="form.isNeedSecurityDeposit===1" label="保证金金额:"> |
||||||
|
<el-input v-model="form.securityDeposit" placeholder="请输入活动保证金金额" /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="活动标签"> |
||||||
|
<el-input v-model="form.tag" placeholder="请输入活动标签" /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<h2>优惠规则</h2> |
||||||
|
<el-form-item label="优惠方式:"> |
||||||
|
<el-radio-group v-model="form.promotionType" @change="selectDiscount"> |
||||||
|
<el-radio :label="1">满减</el-radio> |
||||||
|
<el-radio :label="2">优惠券</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="优惠方案:"> |
||||||
|
<el-radio-group v-model="form.promotionPlan" @change="selectPreScheme"> |
||||||
|
<el-radio :label="1" :disabled="form.promotionType ===2">叠加优惠</el-radio> |
||||||
|
<el-radio :label="2">阶梯优惠</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item v-for="(item,index) in list" :key="index"> |
||||||
|
<el-col :span="10"> |
||||||
|
每满 |
||||||
|
<el-input v-model="item.fullAmount" style="width: 80%;" /> |
||||||
|
</el-col> |
||||||
|
<el-col :span="10"> |
||||||
|
减 |
||||||
|
<el-input v-model="item.discountAmount" style="width: 80%;" /> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item v-if="form.promotionPlan===2"> |
||||||
|
<el-button type="primary" @click="add">添加层级</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<div class="photo"> |
||||||
|
<el-upload |
||||||
|
class="avatar-uploader" |
||||||
|
:headers="headers" |
||||||
|
:data="dataObj" |
||||||
|
action="/api/authority/file/upload" |
||||||
|
:show-file-list="false" |
||||||
|
:on-success="handleAvatarSuccess" |
||||||
|
:disabled="type" |
||||||
|
> |
||||||
|
<img |
||||||
|
v-if="form.image" |
||||||
|
:src="form.image" class="avatar" |
||||||
|
width="80" |
||||||
|
height="80" |
||||||
|
/> |
||||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
||||||
|
<el-button size="small" type="primary">点击上传</el-button> |
||||||
|
</el-upload> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import db from '@/utils/localstorage' |
||||||
|
import Marketing from '@/api/Marketing' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: { |
||||||
|
name: '', |
||||||
|
description: '', |
||||||
|
isNeedSecurityDeposit: 2, |
||||||
|
securityDeposit: '', |
||||||
|
tag: '', |
||||||
|
promotionType: 1, |
||||||
|
promotionPlan: 1, |
||||||
|
image: '' |
||||||
|
|
||||||
|
}, |
||||||
|
list: [ |
||||||
|
{ fullAmount: '', discountAmount: '' } |
||||||
|
], |
||||||
|
date1: [], |
||||||
|
date2: [], |
||||||
|
type: false, |
||||||
|
headers: { |
||||||
|
Authorization: '' |
||||||
|
}, |
||||||
|
dataObj: { |
||||||
|
folderId: 1 |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.headers.token = 'Bearer ' + db.get('TOKEN', '') |
||||||
|
this.headers.tenant = 'MDAwMA==' |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
selectDiscount(v) { |
||||||
|
if (v === 2) { |
||||||
|
this.form.promotionPlan = 2 |
||||||
|
} |
||||||
|
}, |
||||||
|
selectPreScheme(v) { |
||||||
|
if (v === 1) { |
||||||
|
this.list = [ |
||||||
|
{ fullAmount: '', discountAmount: '' } |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
add() { |
||||||
|
if (this.form.promotionPlan === 2) { |
||||||
|
this.list.push({ fullAmount: '', discountAmount: '' }) |
||||||
|
} |
||||||
|
}, |
||||||
|
cancel() { |
||||||
|
this.$router.go(-1) |
||||||
|
}, |
||||||
|
save() { |
||||||
|
const vm = this |
||||||
|
Object.assign(vm.form, { activityStartTime: vm.date1[0] || '', activityEndTime: vm.date1[1] || '', applyStartTime: vm.date2[0] || '', applyEndTime: vm.date2[1] || '', promotionDetail: vm.list }) |
||||||
|
Marketing.addPromotion(vm.form).then(res => { |
||||||
|
const r = res.data |
||||||
|
if (r.code === 0) { |
||||||
|
this.$message({ |
||||||
|
message: '新增成功', |
||||||
|
type: 'success' |
||||||
|
}) |
||||||
|
vm.reset() |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleAvatarSuccess (response) { |
||||||
|
const { url } = response.data |
||||||
|
this.form.image = url |
||||||
|
}, |
||||||
|
reset() { |
||||||
|
this.form = { |
||||||
|
name: '', |
||||||
|
description: '', |
||||||
|
isNeedSecurityDeposit: 2, |
||||||
|
securityDeposit: '', |
||||||
|
tag: '', |
||||||
|
promotionType: 1, |
||||||
|
promotionPlan: 1, |
||||||
|
image: '', |
||||||
|
promotionDetail: '', |
||||||
|
activityStartTime: '', |
||||||
|
activityEndTime: '', |
||||||
|
applyStartTime: '', |
||||||
|
applyEndTime: '' |
||||||
|
} |
||||||
|
this.list = [ |
||||||
|
{ fullAmount: '', discountAmount: '' } |
||||||
|
] |
||||||
|
this.date1 = [] |
||||||
|
this.date2 = [] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='less' scoped> |
||||||
|
.edit_add_page { |
||||||
|
padding: 20px; |
||||||
|
h2 { |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
position: relative; |
||||||
|
&::before { |
||||||
|
content: ''; |
||||||
|
height: 24px; |
||||||
|
width: 4px; |
||||||
|
background-color: #3A68F2; |
||||||
|
position: absolute; |
||||||
|
left: -10px; |
||||||
|
top: 2px; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
.content { |
||||||
|
background-color: #fff; |
||||||
|
padding: 0 50px 20px; |
||||||
|
overflow: hidden; |
||||||
|
.title { |
||||||
|
height: 100px; |
||||||
|
line-height: 100px;; |
||||||
|
font-size:24px; |
||||||
|
position: relative; |
||||||
|
border-bottom: 1px solid #E0E5EB; |
||||||
|
.btn_list { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
height: 50px; |
||||||
|
span { |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
width: 100px; |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
text-align: center; |
||||||
|
display: inline-block; |
||||||
|
font-size: 16px; |
||||||
|
border-radius:4px; |
||||||
|
box-sizing: border-box; |
||||||
|
&:hover { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
&:nth-child(1) { |
||||||
|
background:rgba(255,255,255,1); |
||||||
|
order:1px solid rgba(224,229,235,1); |
||||||
|
margin-right: 20px; |
||||||
|
border:1px solid rgba(224,229,235,1); |
||||||
|
} |
||||||
|
&:nth-child(2) { |
||||||
|
background:rgba(58,104,242,1); |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.el-form { |
||||||
|
.el-form-item { |
||||||
|
label.el-form-item__label { |
||||||
|
font-size:16px !important; |
||||||
|
color: red !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.photo { |
||||||
|
padding:70px 100px; |
||||||
|
.avatar-uploader { |
||||||
|
width: 180px; |
||||||
|
.el-icon-plus, img { |
||||||
|
width: 180px; |
||||||
|
height: 180px; |
||||||
|
line-height: 180px; |
||||||
|
border: 1px #bbb solid; |
||||||
|
border-radius:4px 4px 0px 4px; |
||||||
|
margin-bottom: 10px; |
||||||
|
text-align: center |
||||||
|
} |
||||||
|
img { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,87 @@ |
|||||||
|
<template> |
||||||
|
<div class="goods_page"> |
||||||
|
<el-table |
||||||
|
:data="tableData.records" |
||||||
|
border |
||||||
|
style="width: 100%" |
||||||
|
> |
||||||
|
<el-table-column |
||||||
|
prop="value1" |
||||||
|
label="动态" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value2" |
||||||
|
label="时间" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value3" |
||||||
|
label="操作人" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value4" |
||||||
|
label="其它信息" |
||||||
|
/> |
||||||
|
</el-table> |
||||||
|
<pagination |
||||||
|
v-show="tableData.total > 0" |
||||||
|
:limit.sync="formParams.size" |
||||||
|
:page.sync="formParams.current" |
||||||
|
:total="Number(tableData.total)" |
||||||
|
@pagination="fetch" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Pagination from '@/components/Pagination' |
||||||
|
|
||||||
|
export default { |
||||||
|
components: { |
||||||
|
Pagination |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
formParams: { |
||||||
|
size: 10, |
||||||
|
current: 1 |
||||||
|
}, |
||||||
|
tableData: { |
||||||
|
records: [ |
||||||
|
{ value1: '报名', value2: '2020-06-20 17:54', value3: '飞猪旗舰店', value4: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈' } |
||||||
|
], |
||||||
|
total: 1 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
fetch() { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='less' scoped> |
||||||
|
.goods_page { |
||||||
|
.product-img { |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .el-table { |
||||||
|
th { |
||||||
|
background: #EEF3FF; |
||||||
|
color:#333333; |
||||||
|
font-size:16px; |
||||||
|
font-weight: 400; |
||||||
|
border-color: #E0E5EB; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
td { |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
color: #666666; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,112 @@ |
|||||||
|
<template> |
||||||
|
<div class="goods_page"> |
||||||
|
<el-table |
||||||
|
:data="tableData.records" |
||||||
|
border |
||||||
|
style="width: 100%" |
||||||
|
> |
||||||
|
<el-table-column |
||||||
|
label="产品主图" |
||||||
|
> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<img |
||||||
|
class="product-img" |
||||||
|
height="90" |
||||||
|
width="90" |
||||||
|
:src="scope.row.value1" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
prop="value2" |
||||||
|
label="产品名称" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value3" |
||||||
|
label="产品id" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value4" |
||||||
|
label="售价 (元)" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value5" |
||||||
|
label="原价 (元)" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value6" |
||||||
|
label="库存 (件)" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value7" |
||||||
|
label="累计销量 (件)" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value8" |
||||||
|
label="上架状态" |
||||||
|
/> |
||||||
|
</el-table> |
||||||
|
<pagination |
||||||
|
v-show="tableData.total > 0" |
||||||
|
:limit.sync="formParams.size" |
||||||
|
:page.sync="formParams.current" |
||||||
|
:total="Number(tableData.total)" |
||||||
|
@pagination="fetch" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Pagination from '@/components/Pagination' |
||||||
|
|
||||||
|
export default { |
||||||
|
components: { |
||||||
|
Pagination |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
formParams: { |
||||||
|
size: 10, |
||||||
|
current: 1 |
||||||
|
}, |
||||||
|
tableData: { |
||||||
|
records: [ |
||||||
|
{ value1: 'http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/06/3453cdcc-640d-4f97-afe1-f1bffdf61bc1.jpg', value2: 'BB霜', |
||||||
|
value3: '231243544', value4: '99.9', value5: '169', value6: '888', value7: '19877', value8: '上架' } |
||||||
|
], |
||||||
|
total: 1 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
fetch() { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='less' scoped> |
||||||
|
.goods_page { |
||||||
|
.product-img { |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .el-table { |
||||||
|
th { |
||||||
|
background: #EEF3FF; |
||||||
|
color:#333333; |
||||||
|
font-size:16px; |
||||||
|
font-weight: 400; |
||||||
|
border-color: #E0E5EB; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
td { |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
color: #666666; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
<template> |
||||||
|
<div class="marketing_details"> |
||||||
|
<div class="content"> |
||||||
|
<el-tabs @tab-click="selectItem"> |
||||||
|
<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.name" :name="item.id" /> |
||||||
|
</el-tabs> |
||||||
|
<div class="components"> |
||||||
|
<component :is="compoentsName" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import info from './info' |
||||||
|
import shop from './shop' |
||||||
|
import marketData from './marketData' |
||||||
|
export default { |
||||||
|
components: { info, shop, marketData }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tabList: [ |
||||||
|
{ name: '活动信息', id: 'info' }, |
||||||
|
{ name: '参与店铺', id: 'shop' }, |
||||||
|
{ name: '活动数据', id: 'marketData' } |
||||||
|
], |
||||||
|
compoentsName: 'info' |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
selectItem(v) { |
||||||
|
this.compoentsName = v.name |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='less' scoped> |
||||||
|
.marketing_details { |
||||||
|
background: #fff; |
||||||
|
.content { |
||||||
|
padding:20px 20px; |
||||||
|
.components { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,129 @@ |
|||||||
|
<template> |
||||||
|
<div class="info-page"> |
||||||
|
<h2>基础信息</h2> |
||||||
|
<div class="info"> |
||||||
|
<ul> |
||||||
|
<li v-for="(item, index) in list" :key="index"> |
||||||
|
<p>{{ item.name }}</p> |
||||||
|
<p> |
||||||
|
<span> |
||||||
|
{{ item.value }} |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<div class="image"> |
||||||
|
<img :src="img" alt="" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<h2>优惠规则</h2> |
||||||
|
<div class="rule"> |
||||||
|
<ul> |
||||||
|
<li v-for="(item, index) in list1" :key="index"> |
||||||
|
<p>{{ item.name }}</p> |
||||||
|
<p>{{ item.value }}</p> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<p></p> |
||||||
|
<p>每满500减50</p> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
list: [ |
||||||
|
{ name: '活动名称:', value: '满减活动' }, |
||||||
|
{ name: '活动介绍:', value: '满减活动满减活动满减活动满减活动满减活动满减活动满减活动满减活动满减活减活动满减活动满减活动满减活动满减活动满减活动' }, |
||||||
|
{ name: '报名时间:', value: '2020-09-21 15:00 — 2020-11-23 15:00' }, |
||||||
|
{ name: '起止时间:', value: '2020-09-21 15:00 — 2020-11-23 15:00' }, |
||||||
|
{ name: '活动保证金:', value: '需要' }, |
||||||
|
{ name: '保证金金额:', value: '2000' }, |
||||||
|
{ name: '活动标签:', value: '618活动' } |
||||||
|
], |
||||||
|
list1: [ |
||||||
|
{ name: '优惠方式:', value: '满减' }, |
||||||
|
{ name: '优惠方案:', value: '叠加优惠' } |
||||||
|
], |
||||||
|
img: 'http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/06/3453cdcc-640d-4f97-afe1-f1bffdf61bc1.jpg' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='less' scoped> |
||||||
|
.info-page { |
||||||
|
h2 { |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
position: relative; |
||||||
|
&::before { |
||||||
|
content: ''; |
||||||
|
height: 24px; |
||||||
|
width: 4px; |
||||||
|
background-color: #3A68F2; |
||||||
|
position: absolute; |
||||||
|
left: -10px; |
||||||
|
top: 2px; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
padding: 50px 100px; |
||||||
|
.info, .rule { |
||||||
|
ul { |
||||||
|
width: 45%; |
||||||
|
list-style: none; |
||||||
|
overflow: hidden; |
||||||
|
li { |
||||||
|
p { |
||||||
|
float: left; |
||||||
|
font-size: 16px; |
||||||
|
&:nth-child(1) { |
||||||
|
width: 100px; |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
&:nth-child(2) { |
||||||
|
width: calc(100% - 120px); |
||||||
|
color: #666666; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.info { |
||||||
|
overflow: hidden; |
||||||
|
ul { |
||||||
|
float: left; |
||||||
|
li { |
||||||
|
&:last-child { |
||||||
|
p { |
||||||
|
&:nth-child(2) { |
||||||
|
span { |
||||||
|
color:#fff; |
||||||
|
display: inline-block; |
||||||
|
padding: 1px 5px; |
||||||
|
background-color: #FF7911; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.image { |
||||||
|
width: 50%; |
||||||
|
height: 100%; |
||||||
|
padding-left: 50px; |
||||||
|
float: left; |
||||||
|
img { |
||||||
|
width: 180px; |
||||||
|
height: 180px; |
||||||
|
border-radius:4px 4px 0px 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,443 @@ |
|||||||
|
<template> |
||||||
|
<div class="market_data_page"> |
||||||
|
<div class="data_list"> |
||||||
|
<ul> |
||||||
|
<li v-for="(item,index) in dataList" :key="index"> |
||||||
|
<p>{{ item.value }}</p> |
||||||
|
<p>{{ item.name }} <i class="el-icon-warning-outline" :title="item.tips"></i></p> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="visit_data"> |
||||||
|
<div class="item_box"> |
||||||
|
<p class="echart_title">访问分布情况</p> |
||||||
|
<map-chart :mapdata="mapData" /> |
||||||
|
</div> |
||||||
|
<div class="item_box"> |
||||||
|
<div class="item_box-chart"> |
||||||
|
<p class="echart_title">访问占比</p> |
||||||
|
<div class="chart_box"><cake :chart-data="cakeData" /></div> |
||||||
|
<div class="chart_box"><cake :chart-data="cakeData" /></div> |
||||||
|
</div> |
||||||
|
<div class="item_box-chart"> |
||||||
|
<p class="echart_title">终端分布</p> |
||||||
|
<div class="chart_box"><cake :chart-data="cakeData" /></div> |
||||||
|
<div class="chart_box"><cake :chart-data="cakeData" /></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="tendency_data"> |
||||||
|
<div class="item_box"> |
||||||
|
<p class="echart_title">趋势图</p> |
||||||
|
<el-tabs @tab-click="selectItem"> |
||||||
|
<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.name" :name="item.id" /> |
||||||
|
</el-tabs> |
||||||
|
<bar :chart-data="tendencyData" style="height: calc(100% - 54px)" /> |
||||||
|
</div> |
||||||
|
<div class="item_box"> |
||||||
|
<p class="title"> |
||||||
|
商家成交排行榜 |
||||||
|
<span>成交额/元</span> |
||||||
|
</p> |
||||||
|
<ul> |
||||||
|
<li v-for="(item,index) in rankList" :key="index"> |
||||||
|
<p> |
||||||
|
<span>{{ index + 1 }}</span> |
||||||
|
</p> |
||||||
|
<p>{{ item.name }}</p> |
||||||
|
<p>{{ item.value }}</p> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="sale_data"> |
||||||
|
<div class="item_box"> |
||||||
|
<p class="echart_title">销售类别分类</p> |
||||||
|
<pie :chart-data="saleData" /> |
||||||
|
</div> |
||||||
|
<div class="item_box"> |
||||||
|
<p class="title"> |
||||||
|
畅销商品排行榜 |
||||||
|
<span>售卖数/个</span> |
||||||
|
</p> |
||||||
|
<ul> |
||||||
|
<li v-for="(item,index) in rankList" :key="index"> |
||||||
|
<p> |
||||||
|
<span>{{ index + 1 }}</span> |
||||||
|
</p> |
||||||
|
<p>{{ item.name }}</p> |
||||||
|
<p>{{ item.value }}</p> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="merchants_detail"> |
||||||
|
<p> |
||||||
|
商家数据明细 |
||||||
|
<span>导出</span> |
||||||
|
</p> |
||||||
|
<el-table |
||||||
|
:data="tableData.records" |
||||||
|
border |
||||||
|
style="width: 100%" |
||||||
|
> |
||||||
|
<el-table-column |
||||||
|
prop="value1" |
||||||
|
label="店铺名称" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value2" |
||||||
|
label="店铺编码" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value3" |
||||||
|
label="参与商品数 (件)" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value4" |
||||||
|
label="访客数 (人)" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value5" |
||||||
|
label="订单数 (笔)" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value6" |
||||||
|
label="成交客户数 (笔)" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value7" |
||||||
|
label="客单件 (元)" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="value8" |
||||||
|
label="成交总额 (元)" |
||||||
|
/> |
||||||
|
</el-table> |
||||||
|
<pagination |
||||||
|
v-show="tableData.total > 0" |
||||||
|
:limit.sync="formParams.size" |
||||||
|
:page.sync="formParams.current" |
||||||
|
:total="Number(tableData.total)" |
||||||
|
@pagination="fetch" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Pagination from '@/components/Pagination' |
||||||
|
import bar from '@/components/marketEchart/bar' |
||||||
|
import pie from '@/components/marketEchart/pie' |
||||||
|
import echarts from 'echarts' |
||||||
|
import mapChart from '@/components/marketEchart/map' |
||||||
|
import cake from '@/components/marketEchart/cake' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
Pagination, |
||||||
|
bar, |
||||||
|
pie, |
||||||
|
cake, |
||||||
|
mapChart |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
dataList: [ |
||||||
|
{ name: '成交总额(元)', value: '12454323', tips: '活动开始之后参与活动的商品总成交额' }, |
||||||
|
{ name: '支付订单数(笔)', value: '3450', tips: '活动期间活动商品带来的支付成功订单数，不包括退款订单' }, |
||||||
|
{ name: '支付客户数(人)', value: '3450', tips: '对活动商品进行支付的客户数' }, |
||||||
|
{ name: '参与商家数(家)', value: '3450', tips: '本活动报名成功的商家数量' }, |
||||||
|
{ name: '参与商品数(件)', value: '4322', tips: '本活动报名中的商家所有的活动商品数，不按最小SKU算' } |
||||||
|
|
||||||
|
], |
||||||
|
rankList: [ |
||||||
|
{ name: '阿里巴巴小店', value: '12321,3232' }, |
||||||
|
{ name: '阿里巴巴小店', value: '12321,3232' }, |
||||||
|
{ name: '阿里巴巴小店', value: '12321,3232' }, |
||||||
|
{ name: '阿里巴巴小店', value: '12321,3232' }, |
||||||
|
{ name: '阿里巴巴小店', value: '12321,3232' }, |
||||||
|
{ name: '阿里巴巴小店', value: '12321,3232' }, |
||||||
|
{ name: '阿里巴巴小店', value: '12321,3232' }, |
||||||
|
{ name: '阿里巴巴小店', value: '12321,3232' }, |
||||||
|
{ name: '阿里巴巴小店', value: '12321,3232' }, |
||||||
|
{ name: '阿里巴巴小店', value: '12321,3232' } |
||||||
|
|
||||||
|
], |
||||||
|
tabList: [ |
||||||
|
{ name: '销售额', id: 'sale' }, |
||||||
|
{ name: '访问量', id: 'visit' } |
||||||
|
], |
||||||
|
tendencyData: { |
||||||
|
xData: ['2/1', '2/2', '2/3', '2/4', '2/5', '2/6', '2/7', '2/8', '2/9', '2/10', '2/11', '2/12'], |
||||||
|
series: { |
||||||
|
type: 'bar', |
||||||
|
itemStyle: { |
||||||
|
normal: { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||||
|
offset: 0, |
||||||
|
color: '#74D6FF' |
||||||
|
}, { |
||||||
|
offset: 1, |
||||||
|
color: '#3A68F1' |
||||||
|
}]) |
||||||
|
} |
||||||
|
}, |
||||||
|
label: { |
||||||
|
normal: { |
||||||
|
show: true, |
||||||
|
position: 'top', |
||||||
|
color: '#fff', |
||||||
|
formatter: function (p) { |
||||||
|
return p.value || '' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
data: [100, 200, 80, 400, 680, 270, 700, 950, 567, 675, 234, 567], |
||||||
|
barMaxWidth: '20px' |
||||||
|
} |
||||||
|
}, |
||||||
|
saleData: { |
||||||
|
series: { |
||||||
|
data: [ |
||||||
|
{ name: '家用电器', value: 4544 }, |
||||||
|
{ name: '食用酒水', value: 4544 }, |
||||||
|
{ name: '个护健康', value: 4544 }, |
||||||
|
{ name: '服饰箱包', value: 4544 }, |
||||||
|
{ name: '母婴产品', value: 4544 }, |
||||||
|
{ name: '其它', value: 4544 } |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
cakeData: { |
||||||
|
series: { |
||||||
|
data: [ |
||||||
|
{ name: '湖北省', value: 75 }, |
||||||
|
{ name: '广东省', value: 20 } |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
mapData: [{ fProvince: "北京", fCity: '北京', fVisitCount: 199 }], |
||||||
|
formParams: { |
||||||
|
size: 10, |
||||||
|
current: 1 |
||||||
|
}, |
||||||
|
tableData: { |
||||||
|
records: [ |
||||||
|
{ value1: '艾莉小店', value2: 'MG239', value3: '66', value4: '66', value5: '66', value6: '66', value7: 323.2, value8: '324234.09' } |
||||||
|
], |
||||||
|
total: 1 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
fetch() { |
||||||
|
|
||||||
|
}, |
||||||
|
selectItem(v) { |
||||||
|
console.log(v.name) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='less' scoped> |
||||||
|
.market_data_page { |
||||||
|
.data_list { |
||||||
|
box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15); |
||||||
|
border-radius:4px; |
||||||
|
ul { |
||||||
|
height: 140px; |
||||||
|
overflow: hidden; |
||||||
|
list-style: none; |
||||||
|
li { |
||||||
|
float: left; |
||||||
|
width: 20%; |
||||||
|
text-align: center; |
||||||
|
p { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
i { |
||||||
|
color: red; |
||||||
|
} |
||||||
|
&:nth-child(1) { |
||||||
|
font-size:40px; |
||||||
|
color:rgba(255,173,17,1); |
||||||
|
font-weight: 600; |
||||||
|
line-height: 100px; |
||||||
|
} |
||||||
|
&:nth-child(2) { |
||||||
|
font-size:18px; |
||||||
|
color:rgba(51,51,51,1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.visit_data { |
||||||
|
overflow: hidden; |
||||||
|
.item_box { |
||||||
|
position: relative; |
||||||
|
height: 520px; |
||||||
|
width: calc(50% - 10px); |
||||||
|
margin: 10px 0; |
||||||
|
float: left; |
||||||
|
box-sizing: border-box; |
||||||
|
border-radius:4px; |
||||||
|
&:nth-child(1) { |
||||||
|
margin-right: 20px; |
||||||
|
border-left: 1px solid rgba(51,51,51,0.15); |
||||||
|
box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15); |
||||||
|
} |
||||||
|
&:nth-child(2) { |
||||||
|
.item_box-chart { |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
height: calc(50% - 10px); |
||||||
|
margin-bottom: 20px; |
||||||
|
box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15); |
||||||
|
border-right: 1px solid rgba(51,51,51,0.15); |
||||||
|
.chart_box { |
||||||
|
width: 50%; |
||||||
|
height: 100%; |
||||||
|
float: left; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.tendency_data, .sale_data { |
||||||
|
overflow: hidden; |
||||||
|
.item_box { |
||||||
|
position: relative; |
||||||
|
float: left; |
||||||
|
height: 520px; |
||||||
|
margin: 10px 0; |
||||||
|
box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15); |
||||||
|
border-radius:4px; |
||||||
|
box-sizing: border-box; |
||||||
|
&:nth-child(1) { |
||||||
|
width: calc(60% - 20px); |
||||||
|
margin-right: 20px; |
||||||
|
border-left: 1px solid rgba(51,51,51,0.15); |
||||||
|
} |
||||||
|
&:nth-child(2) { |
||||||
|
width: 40%; |
||||||
|
border-right: 1px solid rgba(51,51,51,0.15); |
||||||
|
padding: 20px; |
||||||
|
p.title { |
||||||
|
font-size:18px; |
||||||
|
color: #333333; |
||||||
|
span { |
||||||
|
font-size:16px; |
||||||
|
float: right; |
||||||
|
} |
||||||
|
} |
||||||
|
ul { |
||||||
|
li { |
||||||
|
display: flex; |
||||||
|
p { |
||||||
|
flex: 2; |
||||||
|
margin: 0; |
||||||
|
margin-bottom: 20px; |
||||||
|
&:nth-child(1) { |
||||||
|
span { |
||||||
|
display: inline-block; |
||||||
|
width:26px; |
||||||
|
height:26px; |
||||||
|
line-height: 26px; |
||||||
|
text-align: center; |
||||||
|
background:rgba(221,221,221,1); |
||||||
|
border-radius:50%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
&:nth-child(2) { |
||||||
|
flex: 7; |
||||||
|
} |
||||||
|
&:nth-child(3) { |
||||||
|
flex: 5; |
||||||
|
} |
||||||
|
} |
||||||
|
&:nth-child(-n + 3) { |
||||||
|
p { |
||||||
|
&:nth-child(1) { |
||||||
|
span { |
||||||
|
background:rgba(255,121,17,1); |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tendency_data { |
||||||
|
.item_box { |
||||||
|
&:nth-child(1) { |
||||||
|
padding: 50px 80px 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.merchants_detail { |
||||||
|
margin: 10px 0; |
||||||
|
padding: 10px; |
||||||
|
box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15); |
||||||
|
min-height: 100px; |
||||||
|
border-radius:4px; |
||||||
|
p { |
||||||
|
font-size:18px; |
||||||
|
color: #333333; |
||||||
|
line-height: 38px; |
||||||
|
height:38px; |
||||||
|
span { |
||||||
|
display: inline-block; |
||||||
|
float: right; |
||||||
|
color: #fff; |
||||||
|
text-align: center; |
||||||
|
width:60px; |
||||||
|
height:38px; |
||||||
|
font-size:14px; |
||||||
|
background:rgba(58,104,241,1); |
||||||
|
border-radius:4px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .el-table { |
||||||
|
th { |
||||||
|
background: #EEF3FF; |
||||||
|
color:#333333; |
||||||
|
font-size:16px; |
||||||
|
font-weight: 400; |
||||||
|
border-color: #E0E5EB; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
td { |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
color: #666666; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.echart_title { |
||||||
|
font-size:18px; |
||||||
|
position: absolute; |
||||||
|
top: 30px; |
||||||
|
left: 20px; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .el-tabs { |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,228 @@ |
|||||||
|
<template> |
||||||
|
<div class="shop_page"> |
||||||
|
<div class="toolbar"> |
||||||
|
<el-form |
||||||
|
:inline="true" |
||||||
|
:model="formParams" |
||||||
|
> |
||||||
|
<el-form-item label="店铺名称"> |
||||||
|
<el-input v-model="formParams.name" size="mini" /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="店铺编码"> |
||||||
|
<el-input v-model="formParams.code" size="mini" /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="审核状态"> |
||||||
|
<el-select |
||||||
|
v-model="formParams.status" |
||||||
|
size="mini" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="(item, index) in statusList" |
||||||
|
:key="index" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
size="mini" |
||||||
|
@click="query" |
||||||
|
> |
||||||
|
查询 |
||||||
|
</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="content_table"> |
||||||
|
<div class="table"> |
||||||
|
<el-table |
||||||
|
:data="tableData.records" |
||||||
|
border |
||||||
|
style="width: 100%" |
||||||
|
> |
||||||
|
<el-table-column |
||||||
|
prop="name" |
||||||
|
label="店铺名称" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="status" |
||||||
|
label="店铺编码" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="type" |
||||||
|
label="参与商品数" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="custom" |
||||||
|
label="审核次数" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="goods" |
||||||
|
label="审核状态" |
||||||
|
/> |
||||||
|
<el-table-column label="操作"> |
||||||
|
<template |
||||||
|
slot-scope="scope" |
||||||
|
> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="details(scope.row)" |
||||||
|
> |
||||||
|
查看商品 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="records(scope.row)" |
||||||
|
> |
||||||
|
审核记录 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="handle(scope.row)" |
||||||
|
> |
||||||
|
处理 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="quit(scope.row)" |
||||||
|
> |
||||||
|
清退 |
||||||
|
</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
<pagination |
||||||
|
v-show="tableData.total > 0" |
||||||
|
:limit.sync="formParams.size" |
||||||
|
:page.sync="formParams.current" |
||||||
|
:total="Number(tableData.total)" |
||||||
|
@pagination="fetch" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<Dialog |
||||||
|
:title="dialog.title" |
||||||
|
:visible.sync="dialog.visible" |
||||||
|
:fullscreen="!true" |
||||||
|
width="55%" |
||||||
|
> |
||||||
|
<goods v-if="dialog.type===1" /> |
||||||
|
<audit-log v-if="dialog.type===2" /> |
||||||
|
</Dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Pagination from '@/components/Pagination' |
||||||
|
import goods from './component/goods' |
||||||
|
import auditLog from './component/auditLog' |
||||||
|
import { Dialog } from 'element-ui' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
Pagination, |
||||||
|
goods, |
||||||
|
Dialog, |
||||||
|
auditLog |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
formParams: { |
||||||
|
name: '', |
||||||
|
code: '', |
||||||
|
status: '', |
||||||
|
size: 10, |
||||||
|
current: 1 |
||||||
|
}, |
||||||
|
statusList: [ |
||||||
|
{ label: '全部', value: '' }, |
||||||
|
{ label: '待审核', value: '1' }, |
||||||
|
{ label: '审核不通过', value: '2' }, |
||||||
|
{ label: '审核通过', value: '3' } |
||||||
|
], |
||||||
|
tableData: { |
||||||
|
records: [ |
||||||
|
{ name: '阿里小店', status: 'N95', type: '23', custom: 12, goods: '待审核' } |
||||||
|
], |
||||||
|
total: 1 |
||||||
|
}, |
||||||
|
dialog: {} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
fetch() { |
||||||
|
|
||||||
|
}, |
||||||
|
query() { |
||||||
|
|
||||||
|
}, |
||||||
|
details() { |
||||||
|
this.dialog = { |
||||||
|
title: '活动商品', |
||||||
|
visible: true, |
||||||
|
type: 1 |
||||||
|
} |
||||||
|
}, |
||||||
|
records() { |
||||||
|
this.dialog = { |
||||||
|
title: '审核记录', |
||||||
|
visible: true, |
||||||
|
type: 2 |
||||||
|
} |
||||||
|
}, |
||||||
|
handle() { |
||||||
|
|
||||||
|
}, |
||||||
|
quit() { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='less' scoped> |
||||||
|
.shop_page { |
||||||
|
.content_table { |
||||||
|
.table { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .el-table { |
||||||
|
th { |
||||||
|
background: #EEF3FF; |
||||||
|
color:#333333; |
||||||
|
font-size:16px; |
||||||
|
font-weight: 400; |
||||||
|
border-color: #E0E5EB; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
td { |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
color: #666666; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .el-dialog__wrapper { |
||||||
|
.el-dialog__header { |
||||||
|
height: 70px; |
||||||
|
background-color: #3A68F2; |
||||||
|
.el-dialog__title { |
||||||
|
font-size:24px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,221 @@ |
|||||||
|
<template> |
||||||
|
<div class="marketing_page"> |
||||||
|
<div class="content"> |
||||||
|
<div class="toolbar"> |
||||||
|
<el-form |
||||||
|
:inline="true" |
||||||
|
:model="formParams" |
||||||
|
> |
||||||
|
<el-form-item label="活动名称"> |
||||||
|
<el-input v-model="formParams.name" size="mini" /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="活动状态"> |
||||||
|
<el-select |
||||||
|
v-model="formParams.status" |
||||||
|
size="mini" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="(item, index) in statusList" |
||||||
|
:key="index" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="营销方式"> |
||||||
|
<el-select |
||||||
|
v-model="formParams.type" |
||||||
|
size="mini" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="(item, index) in typeList" |
||||||
|
:key="index" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
|
||||||
|
<el-form-item> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
size="mini" |
||||||
|
@click="query" |
||||||
|
> |
||||||
|
查询 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
size="mini" |
||||||
|
@click="add" |
||||||
|
> |
||||||
|
新建活动 |
||||||
|
</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="content_table"> |
||||||
|
<div class="table"> |
||||||
|
<el-table |
||||||
|
:data="tableData.records" |
||||||
|
border |
||||||
|
style="width: 100%" |
||||||
|
> |
||||||
|
<el-table-column |
||||||
|
prop="name" |
||||||
|
label="活动名称" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="status" |
||||||
|
label="活动状态" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="type" |
||||||
|
label="营销方式" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="custom" |
||||||
|
label="商家数" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="goods" |
||||||
|
label="商品数量" |
||||||
|
/> |
||||||
|
<el-table-column label="操作"> |
||||||
|
<template |
||||||
|
slot-scope="scope" |
||||||
|
> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="details(scope.row)" |
||||||
|
> |
||||||
|
详情 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="edit(scope.row)" |
||||||
|
> |
||||||
|
编辑 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="stop(scope.row)" |
||||||
|
> |
||||||
|
结束 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="deletes(scope.row)" |
||||||
|
> |
||||||
|
删除 |
||||||
|
</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
<pagination |
||||||
|
v-show="tableData.total > 0" |
||||||
|
:limit.sync="formParams.size" |
||||||
|
:page.sync="formParams.current" |
||||||
|
:total="Number(tableData.total)" |
||||||
|
@pagination="fetch" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Pagination from '@/components/Pagination' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
Pagination |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
formParams: { |
||||||
|
name: '', |
||||||
|
status: '', |
||||||
|
type: '', |
||||||
|
size: 10, |
||||||
|
current: 1 |
||||||
|
}, |
||||||
|
statusList: [ |
||||||
|
{ label: '全部', value: '' }, |
||||||
|
{ label: '报名进行中', value: 1 }, |
||||||
|
{ label: '报名未开始', value: 2 }, |
||||||
|
{ label: '活动进行中', value: 3 }, |
||||||
|
{ label: '活动已结束', value: 4 }, |
||||||
|
{ label: '活动待开始', value: 5 } |
||||||
|
], |
||||||
|
typeList: [ |
||||||
|
{ label: '全部', value: '' }, |
||||||
|
{ label: '满减', value: 1 }, |
||||||
|
{ label: '优惠券', value: 2 } |
||||||
|
], |
||||||
|
tableData: { |
||||||
|
records: [ |
||||||
|
{ name: '618大促', status: '报名状态中', type: '满减', custom: 12, goods: 15 } |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
query() {}, |
||||||
|
add() { |
||||||
|
this.$router.push({ path: '/marketing/add' }) |
||||||
|
}, |
||||||
|
details() { |
||||||
|
this.$router.push({ path: '/marketing/details' }) |
||||||
|
}, |
||||||
|
edit() { |
||||||
|
|
||||||
|
}, |
||||||
|
stop() { |
||||||
|
|
||||||
|
}, |
||||||
|
deletes() { |
||||||
|
|
||||||
|
}, |
||||||
|
fetch() {} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='less' scoped> |
||||||
|
|
||||||
|
.marketing_page { |
||||||
|
padding: 10px 20px; |
||||||
|
box-sizing: border-box; |
||||||
|
.content { |
||||||
|
background-color: #fff; |
||||||
|
.toolbar { |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .el-table { |
||||||
|
th { |
||||||
|
background: #EEF3FF; |
||||||
|
color:#333333; |
||||||
|
font-size:16px; |
||||||
|
font-weight: 400; |
||||||
|
border-color: #E0E5EB; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
td { |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
color: #666666; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
Loading…
Reference in new issue