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