1.1
This commit is contained in:
zkthink
+1
-1
@@ -51,7 +51,7 @@
|
|||||||
"dragula": "^3.7.2",
|
"dragula": "^3.7.2",
|
||||||
"driver.js": "0.9.5",
|
"driver.js": "0.9.5",
|
||||||
"dropzone": "5.5.1",
|
"dropzone": "5.5.1",
|
||||||
"echarts": "4.2.1",
|
"echarts": "^4.2.1",
|
||||||
"element-ui": "2.12.0",
|
"element-ui": "2.12.0",
|
||||||
"file-saver": "2.0.1",
|
"file-saver": "2.0.1",
|
||||||
"fuse.js": "3.4.4",
|
"fuse.js": "3.4.4",
|
||||||
|
|||||||
@@ -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
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -52,11 +52,11 @@
|
|||||||
placeholder="请输入生效日期"
|
placeholder="请输入生效日期"
|
||||||
/>
|
/>
|
||||||
</form-item>
|
</form-item>
|
||||||
<form-item label="生效时限" prop="expireLimitYear">
|
<form-item label="生效时限(年)" prop="expireLimitYear">
|
||||||
<Input
|
<Input
|
||||||
v-model="formParams.expireLimitYear"
|
v-model="formParams.expireLimitYear"
|
||||||
size="medium"
|
size="medium"
|
||||||
placeholder="请输入生效日期"
|
placeholder="请输入生效时限"
|
||||||
maxlength="4"
|
maxlength="4"
|
||||||
show-word-limit
|
show-word-limit
|
||||||
clearable
|
clearable
|
||||||
@@ -234,19 +234,20 @@ export default {
|
|||||||
this.$refs.addForm && this.$refs.addForm.resetFields()
|
this.$refs.addForm && this.$refs.addForm.resetFields()
|
||||||
},
|
},
|
||||||
async addManagement() {
|
async addManagement() {
|
||||||
this.addLoading = true
|
const vm = this
|
||||||
const res = await Management.addTenant(this.formParams).then(() => {
|
vm.addLoading = true
|
||||||
this.addLoading = false
|
Management.addTenant(vm.formParams).then((res) => {
|
||||||
})
|
vm.addLoading = false
|
||||||
const resData = res.data
|
// const resData = res.data
|
||||||
this.addLoading = false
|
vm.addLoading = false
|
||||||
if (resData.code === 0) {
|
// if (resData.code === 0) {
|
||||||
this.resetForm()
|
vm.resetForm()
|
||||||
this.$message({
|
vm.$message({
|
||||||
message: '创建成功！',
|
message: '创建成功！',
|
||||||
type: 'success'
|
type: 'success'
|
||||||
})
|
})
|
||||||
}
|
// }
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
+59
-4
@@ -71,13 +71,68 @@ const constRouter = [
|
|||||||
component: resolve => require(['@/views/dashboard/index'], resolve),
|
component: resolve => require(['@/views/dashboard/index'], resolve),
|
||||||
name: 'Dashboard',
|
name: 'Dashboard',
|
||||||
meta: { title: 'dashboard', icon: 'dashboard', affix: true }
|
meta: { title: 'dashboard', icon: 'dashboard', affix: true }
|
||||||
|
}
|
||||||
|
// {
|
||||||
|
// path: '/cash',
|
||||||
|
// name: '提现申请',
|
||||||
|
// component: () => import('@/views/cash/index'),
|
||||||
|
// meta: { title: '提现申请', affix: true }
|
||||||
|
// }
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/cash',
|
path: '/marketing',
|
||||||
name: '提现申请',
|
component: Layout,
|
||||||
component: () => import('@/views/cash/index'),
|
name: '营销活动',
|
||||||
meta: { title: '提现申请', affix: true }
|
children: [
|
||||||
|
{
|
||||||
|
path: '/marketing',
|
||||||
|
component: () => import('@/views/marketing/index'),
|
||||||
|
meta: {
|
||||||
|
title: '营销活动',
|
||||||
|
affix: true
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/marketing/add',
|
||||||
|
component: () => import('@/views/marketing/add/index'),
|
||||||
|
meta: {
|
||||||
|
title: '新建活动',
|
||||||
|
affix: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/marketing/details',
|
||||||
|
component: () => import('@/views/marketing/details/index'),
|
||||||
|
meta: {
|
||||||
|
title: '活动详情',
|
||||||
|
affix: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/finance',
|
||||||
|
component: Layout,
|
||||||
|
name: '财务',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/finance/cash',
|
||||||
|
component: () => import('@/views/finance/cash/index'),
|
||||||
|
meta: {
|
||||||
|
title: '提现申请',
|
||||||
|
affix: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/finance/cash-deposit',
|
||||||
|
component: () => import('@/views/finance/cash-deposit/index'),
|
||||||
|
meta: {
|
||||||
|
title: '保证金',
|
||||||
|
affix: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -50,12 +50,37 @@ export default {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/cash',
|
path: '/marketing',
|
||||||
|
name: '营销活动',
|
||||||
|
meta: {
|
||||||
|
title: '营销活动',
|
||||||
|
icon: 'el-icon-s-ticket'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/finance',
|
||||||
|
meta: {
|
||||||
|
title: '财务',
|
||||||
|
icon: 'el-icon-coin'
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/finance/cash',
|
||||||
name: '提现申请',
|
name: '提现申请',
|
||||||
meta: {
|
meta: {
|
||||||
title: '提现申请',
|
title: '提现申请',
|
||||||
icon: 'el-icon-s-finance'
|
icon: 'el-icon-s-finance'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/finance/cash-deposit',
|
||||||
|
name: '保证金',
|
||||||
|
meta: {
|
||||||
|
title: '保证金',
|
||||||
|
icon: 'el-icon-s-finance'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -76,7 +76,7 @@ const initPublic = [
|
|||||||
isCustom: false
|
isCustom: false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
console.log(initPublic)
|
// console.log(initPublic)
|
||||||
export default {
|
export default {
|
||||||
namespaced: true,
|
namespaced: true,
|
||||||
state: {
|
state: {
|
||||||
|
|||||||
@@ -327,3 +327,8 @@ aside {
|
|||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.full-size {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
@@ -7,7 +7,8 @@ import 'nprogress/nprogress.css'
|
|||||||
|
|
||||||
const service = axios.create({
|
const service = axios.create({
|
||||||
baseURL: process.env.VUE_APP_BASE_API,
|
baseURL: process.env.VUE_APP_BASE_API,
|
||||||
timeout: 10000,
|
// timeout: 10000,
|
||||||
|
timeout: 30000,
|
||||||
responseType: 'json',
|
responseType: 'json',
|
||||||
validateStatus (status) {
|
validateStatus (status) {
|
||||||
return status === 200
|
return status === 200
|
||||||
@@ -16,7 +17,8 @@ const service = axios.create({
|
|||||||
|
|
||||||
const refresh_service = axios.create({
|
const refresh_service = axios.create({
|
||||||
baseURL: process.env.VUE_APP_BASE_API,
|
baseURL: process.env.VUE_APP_BASE_API,
|
||||||
timeout: 10000,
|
// timeout: 10000,
|
||||||
|
timeout: 30000,
|
||||||
responseType: 'json',
|
responseType: 'json',
|
||||||
validateStatus (status) {
|
validateStatus (status) {
|
||||||
return status === 200
|
return status === 200
|
||||||
|
|||||||
@@ -0,0 +1,18 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>保证金</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang='less' scoped></style>
|
||||||
|
|
||||||
@@ -1,6 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<el-form ref="loginForm" :model="loginForm" :rules="rules" autocomplete="off" class="login-form" label-position="left">
|
<el-form
|
||||||
|
ref="loginForm" :model="loginForm" :rules="rules"
|
||||||
|
autocomplete="off"
|
||||||
|
class="login-form" label-position="left"
|
||||||
|
>
|
||||||
<div class="title-container">
|
<div class="title-container">
|
||||||
<h3 class="title">{{ $t('login.title') }}平台登录</h3>
|
<h3 class="title">{{ $t('login.title') }}平台登录</h3>
|
||||||
<!-- <lang-select class="set-language" /> -->
|
<!-- <lang-select class="set-language" /> -->
|
||||||
@@ -44,7 +48,7 @@
|
|||||||
@keyup.enter.native="handleLogin"
|
@keyup.enter.native="handleLogin"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<img :src="imageCode" alt="codeImage" class="code-image" @click="getCodeImage">
|
<img :src="imageCode" alt="codeImage" class="code-image" @click="getCodeImage" />
|
||||||
<el-button :loading="loading" style="width:100%;margin-bottom:14px;" type="primary" @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button>
|
<el-button :loading="loading" style="width:100%;margin-bottom:14px;" type="primary" @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button>
|
||||||
</span>
|
</span>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|||||||
@@ -53,7 +53,6 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
closeDialog() {
|
closeDialog() {
|
||||||
console.log(111)
|
|
||||||
this.dialogVisible = false
|
this.dialogVisible = false
|
||||||
},
|
},
|
||||||
query(params) {
|
query(params) {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
Reference in New Issue
Block a user