活动池功能
parent
72ed974353
commit
06eacf09e7
File diff suppressed because it is too large
Load Diff
@ -1,13 +1,128 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>活动管理</div>
|
<div class="activityManager">
|
||||||
|
<Row>
|
||||||
|
<i-col class="activityListClass" v-for="(item, index) in activityList" :key="index" span="7" offset="1">
|
||||||
|
<Card>
|
||||||
|
<div class="operateAndThemeItem">
|
||||||
|
<div class="ThemeItem">
|
||||||
|
<img class="img" :src="item.img">
|
||||||
|
<div class="tipItem">
|
||||||
|
<span>{{item.name}}</span>
|
||||||
|
<span>{{item.description}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="operateItem">
|
||||||
|
<div @click="disPlayUseTable">使用</div>
|
||||||
|
<div @click="dispalyAddActivity(item.id)">配置</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</i-col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<i-col span="7" offset="1">
|
||||||
|
<div @click="dispalyAddActivity('')" class="addactivity">
|
||||||
|
<span>+</span>
|
||||||
|
<span>添加活动</span>
|
||||||
|
</div>
|
||||||
|
</i-col>
|
||||||
|
</Row>
|
||||||
|
<useTable @dispalyuseModal="dispalyuseModal" :useModal="useModal"></useTable>
|
||||||
|
<addActivity @dispalyAddActivityModal="dispalyAddActivityModal" :addActivityModal="addActivityModal" :id="id"></addActivity>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
import Img from '../../assets/logo.png'
|
||||||
name: "ActivityManager"
|
import useTable from './useTable'
|
||||||
}
|
import addActivity from './addActivity'
|
||||||
|
import ActivityManager from "../../services/ActivityManager/ActivityManager";
|
||||||
|
export default {
|
||||||
|
name: "ActivityManager",
|
||||||
|
components: {
|
||||||
|
useTable,
|
||||||
|
addActivity
|
||||||
|
},
|
||||||
|
inject: ['setMenuName'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
useModal: false,
|
||||||
|
addActivityModal: false,
|
||||||
|
activityList: [],
|
||||||
|
id: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setMenuName("活动管理", "活动池")
|
||||||
|
this.getActivityTable()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getActivityTable() {
|
||||||
|
let that = this
|
||||||
|
ActivityManager.getActivityList({}, function (data) {
|
||||||
|
that.activityList = data.data.results
|
||||||
|
})
|
||||||
|
},
|
||||||
|
disPlayUseTable() {
|
||||||
|
this.useModal = true
|
||||||
|
},
|
||||||
|
dispalyAddActivity(val) {
|
||||||
|
this.addActivityModal = true
|
||||||
|
this.id = val.toString()
|
||||||
|
},
|
||||||
|
dispalyuseModal(displayModalFlag, isCancle) {
|
||||||
|
this.useModal = displayModalFlag
|
||||||
|
if(isCancle === true) {
|
||||||
|
this.getActivityTable()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dispalyAddActivityModal(displayModalFlag, isCancle) {
|
||||||
|
this.addActivityModal = displayModalFlag
|
||||||
|
if(isCancle === true) {
|
||||||
|
this.getActivityTable()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.operateAndThemeItem {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.img {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
.operateItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: #6ac1d1;
|
||||||
|
width: 20%;
|
||||||
|
text-align: right;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.ThemeItem {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
.tipItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
||||||
|
.activityListClass {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
.addactivity{
|
||||||
|
height: 300px;
|
||||||
|
border: 1px dashed;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 300px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,220 @@
|
|||||||
|
<template>
|
||||||
|
<Modal v-model="dispalyModal" width="1000" :mask-closable="false" @on-cancel="cancel">
|
||||||
|
<p slot="header" style="color:#f60;text-align:left">
|
||||||
|
<span>配置活动</span>
|
||||||
|
</p>
|
||||||
|
<div>基本配置</div>
|
||||||
|
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||||
|
<Row>
|
||||||
|
<i-col style="text-align: left;" span="8">
|
||||||
|
<FormItem label="" prop="uploadImg">
|
||||||
|
<!-- <Upload
|
||||||
|
type="select"
|
||||||
|
:on-success="uploadImgSuccess"
|
||||||
|
:show-upload-list="false"
|
||||||
|
:before-upload="handleBeforeUpload"
|
||||||
|
action="//jsonplaceholder.typicode.com/posts/">
|
||||||
|
<div style="padding: 20px 0;">
|
||||||
|
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
|
||||||
|
<p>上传活动图片</p>
|
||||||
|
</div>
|
||||||
|
</Upload> -->
|
||||||
|
<Upload
|
||||||
|
ref='upload'
|
||||||
|
:show-upload-list="false"
|
||||||
|
:on-success="uploadImgSuccess"
|
||||||
|
:format="['jpg','jpeg','png']"
|
||||||
|
:max-size="2048"
|
||||||
|
:before-upload="handleBeforeUpload"
|
||||||
|
multiple
|
||||||
|
type="drag"
|
||||||
|
action=""
|
||||||
|
style="display: inline-block;">
|
||||||
|
<div style="width: 200px;height:200px;line-height: 200px;">
|
||||||
|
<span>请上传图片</span>
|
||||||
|
</div>
|
||||||
|
</Upload>
|
||||||
|
</FormItem>
|
||||||
|
</i-col>
|
||||||
|
<i-col span="15" offset="1">
|
||||||
|
<FormItem label="活动名称" prop="activityName">
|
||||||
|
<i-input type="text" v-model="formValidate.activityName" placeholder="请输入活动名称"></i-input>
|
||||||
|
</FormItem>
|
||||||
|
<Form-item label="活动描述" prop="activityDsc">
|
||||||
|
<i-input v-model="formValidate.activityDsc" type="textarea" :autosize="{minRows: 3}" placeholder="请输入活动描述"></i-input>
|
||||||
|
</Form-item>
|
||||||
|
<FormItem label="APPID" prop="appId">
|
||||||
|
<i-input type="text" v-model="formValidate.appId" placeholder="请输入appid"></i-input>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="URI" prop="uri">
|
||||||
|
<i-input type="text" v-model="formValidate.uri" placeholder="请输入URI"></i-input>
|
||||||
|
</FormItem>
|
||||||
|
</i-col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
<div class="topic">活动类型</div>
|
||||||
|
<Row class="inputItem" v-for="(item, index) in inputActivityList" :key="index">
|
||||||
|
<i-col :span="2">
|
||||||
|
类型{{index+1}}
|
||||||
|
</i-col>
|
||||||
|
<i-col :span="20">
|
||||||
|
<i-input class="inputClass" type="text" v-model="item.value1" placeholder=""></i-input>
|
||||||
|
<i-input class="inputClass" type="text" style="margin-left: 20px" v-model="item.value2" placeholder=""></i-input>
|
||||||
|
<Button style="margin-left: 20px" type="error" @click="delActivityInput(index)">删除</Button>
|
||||||
|
</i-col>
|
||||||
|
</Row>
|
||||||
|
<Button style="margin-top: 10px" type="primary" @click="addActivityInput">+添加活动类型</Button>
|
||||||
|
<div style="text-align: center;" slot="footer">
|
||||||
|
<Button type="primary" size="large" shape="circle" :loading="modal_loading" @click="next">保存</Button>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import ActivityManager from "../../services/ActivityManager/ActivityManager";
|
||||||
|
export default {
|
||||||
|
name: "addActivity",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dispalyModal: false,
|
||||||
|
currentStep: 0,
|
||||||
|
modal_loading: false,
|
||||||
|
inputActivityList: [],
|
||||||
|
imageName: '212',
|
||||||
|
formValidate: {
|
||||||
|
activityName: '',
|
||||||
|
activityDsc: '',
|
||||||
|
appId: '',
|
||||||
|
uri: ''
|
||||||
|
},
|
||||||
|
ruleValidate: {
|
||||||
|
activityName: [
|
||||||
|
{ required: true, message: '活动名称不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
activityDsc: [
|
||||||
|
{ required: true, message: '活动描述不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
appId: [
|
||||||
|
{ required: true, message: 'appId不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
uri: [
|
||||||
|
{ required: true, message: 'URI不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
// uploadImg: [
|
||||||
|
// { required: true, message: '请上传活动图片', trigger: 'blur' }
|
||||||
|
// ]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
addActivityModal: Boolean,
|
||||||
|
id: String
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
addActivityModal(val) {
|
||||||
|
this.dispalyModal = val
|
||||||
|
if(val === true && this.id) {
|
||||||
|
this.getActivityData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addActivityInput() {
|
||||||
|
this.inputActivityList.push({
|
||||||
|
value1: '',
|
||||||
|
value2: ''
|
||||||
|
})
|
||||||
|
},
|
||||||
|
delActivityInput(index) {
|
||||||
|
this.inputActivityList.splice(index,1)
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
this.inputActivityList = []
|
||||||
|
this.formValidate.appId = ''
|
||||||
|
this.formValidate.activityDsc = ''
|
||||||
|
this.formValidate.activityName = ''
|
||||||
|
this.formValidate.uri = ''
|
||||||
|
this.dispalyModal = false
|
||||||
|
this.$emit("dispalyAddActivityModal", false, false)
|
||||||
|
},
|
||||||
|
getActivityData() {
|
||||||
|
let that = this
|
||||||
|
let data = {
|
||||||
|
id: that.id
|
||||||
|
}
|
||||||
|
ActivityManager.getActivityInfo(data, function (data) {
|
||||||
|
that.inputActivityList = []
|
||||||
|
that.formValidate.appId = data.data.results.appId
|
||||||
|
that.formValidate.activityDsc = data.data.results.description
|
||||||
|
that.formValidate.activityName = data.data.results.name
|
||||||
|
that.formValidate.uri = data.data.results.uri
|
||||||
|
data.data.results.params.forEach(item => {
|
||||||
|
that.inputActivityList.push({
|
||||||
|
value1: item.name,
|
||||||
|
value2: item.description
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
uploadImgSuccess(res, file) {
|
||||||
|
debugger
|
||||||
|
this.imageName = file.name
|
||||||
|
},
|
||||||
|
handleBeforeUpload(res, file) {
|
||||||
|
let data = new FormData()
|
||||||
|
data.append('file', res.name)
|
||||||
|
ActivityManager.uploadImg(data, function (data) {
|
||||||
|
})
|
||||||
|
},
|
||||||
|
next() {
|
||||||
|
let that = this
|
||||||
|
this.$refs["formValidate"].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
let param = []
|
||||||
|
that.inputActivityList.forEach(element => {
|
||||||
|
param.push({
|
||||||
|
defaultVal: element.value1,
|
||||||
|
description: that.formValidate.activityDsc,
|
||||||
|
key: element.value2,
|
||||||
|
name: 1,
|
||||||
|
type: 2,
|
||||||
|
id: that.id
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// param = JSON.stringify(param)
|
||||||
|
let data = {
|
||||||
|
appId: that.formValidate.appId,
|
||||||
|
image: that.imageName,
|
||||||
|
name: that.formValidate.activityName,
|
||||||
|
uri: that.formValidate.uri,
|
||||||
|
params: param,
|
||||||
|
isGetActivityInfo: true,
|
||||||
|
description: that.formValidate.activityDsc,
|
||||||
|
id: that.id
|
||||||
|
}
|
||||||
|
ActivityManager.addOreditActivity(data, function (data) {
|
||||||
|
console.log(data)
|
||||||
|
that.addActivityModal = false
|
||||||
|
that.$emit("dispalyAddActivityModal", false, true)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
that.$Message.error('表单验证失败!');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.inputClass{
|
||||||
|
width: 1000px;
|
||||||
|
}
|
||||||
|
.inputItem{
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
.topic{
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
<template>
|
||||||
|
<div style="padding: 0 40px;">
|
||||||
|
<Form ref="formValidate" :model="formValidate" :label-width="80">
|
||||||
|
<Row>
|
||||||
|
<i-col span="15" offset="2">
|
||||||
|
<FormItem label="活动名称" prop="activityName">
|
||||||
|
<div>{{formValidate.activityName}}</div>
|
||||||
|
</FormItem>
|
||||||
|
<Form-item label="活动时间" prop="activityDate">
|
||||||
|
<div>{{formValidate.activityDate}}</div>
|
||||||
|
</Form-item>
|
||||||
|
<FormItem label="活动类型" prop="activityStyle">
|
||||||
|
<div>{{formValidate.activityStyle}}</div>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="活动范围" prop="activityRange">
|
||||||
|
<div>
|
||||||
|
<span>{{formValidate.activityRange}}</span>
|
||||||
|
<span class="mr10">{{formValidate.activityCompanyNum}}家店铺</span>
|
||||||
|
<Button class="mr10" type="primary" @click="isDisplay">{{operate}}</Button>
|
||||||
|
</div>
|
||||||
|
<div v-if="displayActivityShopFlag==true" class="activityShopClass">
|
||||||
|
<div class="mr10" v-for="(item, index) in formValidate.activityShop" :key="index">
|
||||||
|
<Tag class="tagClass" color="blue">{{item.name}}</Tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FormItem>
|
||||||
|
</i-col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "useActivityStepFoure",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formValidate: {
|
||||||
|
activityName: '红包活动',
|
||||||
|
activityDate: "2020/05/20-2020/0522",
|
||||||
|
activityStyle: '5元红包',
|
||||||
|
activityRange: '上海分公司',
|
||||||
|
activityCompanyNum: '35',
|
||||||
|
activityShop: [{
|
||||||
|
name: '店铺1'
|
||||||
|
},{
|
||||||
|
name: '店铺1'
|
||||||
|
},{
|
||||||
|
name: '店铺1'
|
||||||
|
},{
|
||||||
|
name: '店铺1'
|
||||||
|
},{
|
||||||
|
name: '店铺1'
|
||||||
|
},{
|
||||||
|
name: '店铺1'
|
||||||
|
},{
|
||||||
|
name: '店铺1'
|
||||||
|
},{
|
||||||
|
name: '店铺1'
|
||||||
|
},{
|
||||||
|
name: '店铺1'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
operate: '收起',
|
||||||
|
displayActivityShopFlag: false
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isDisplay() {
|
||||||
|
if(this.operate === '展开') {
|
||||||
|
this.operate = '收起'
|
||||||
|
this.displayActivityShopFlag = false
|
||||||
|
} else {
|
||||||
|
this.operate = '展开'
|
||||||
|
this.displayActivityShopFlag = true
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.activityShopClass {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.mr10 {
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
.tagClass {
|
||||||
|
width: 360px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||||
|
<Row>
|
||||||
|
<i-col span="15" offset="2">
|
||||||
|
<FormItem label="活动名称" prop="activityName">
|
||||||
|
<div>{{formValidate.activityName}}</div>
|
||||||
|
</FormItem>
|
||||||
|
<div class="dateClass">
|
||||||
|
<Form-item label="活动时间" prop="activityStartDate">
|
||||||
|
<Date-picker :value="formValidate.activityStartDate" format="yyyy-MM-dd" placeholder="请选择开始日期" style="width: 200px"></Date-picker>
|
||||||
|
</Form-item>
|
||||||
|
<div class="text">至</div>
|
||||||
|
<Form-item label="" prop="activityEndDate">
|
||||||
|
<Date-picker :value="formValidate.activityEndDate" format="yyyy-MM-dd" placeholder="请选择结束日期" style="width: 200px"></Date-picker>
|
||||||
|
</Form-item>
|
||||||
|
</div>
|
||||||
|
<FormItem label="活动类型" prop="activityStyle">
|
||||||
|
<div v-for="(item, index) in formValidate.activityStyle" :key="index">
|
||||||
|
<i-input disabled type="text" v-model="item.tips" placeholder=""></i-input>
|
||||||
|
</div>
|
||||||
|
</FormItem>
|
||||||
|
</i-col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "useActivityStepOne",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formValidate: {
|
||||||
|
activityName: '红吧',
|
||||||
|
activityStartDate: '',
|
||||||
|
activityEndDate: '',
|
||||||
|
activityStyle: [{
|
||||||
|
tips: '11',
|
||||||
|
},{
|
||||||
|
tips: '11',
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
ruleValidate: {
|
||||||
|
activityName: [
|
||||||
|
{ required: true, message: '活动名称不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
activityStartDate: [
|
||||||
|
{ required: true, message: '开始时间不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
activityEndDate: [
|
||||||
|
{ required: true, message: '结束时间不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
activityStyle: [
|
||||||
|
{ required: true, message: '', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dateClass {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
position: relative;
|
||||||
|
left: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
<template>
|
||||||
|
<div style="padding: 0 40px;">
|
||||||
|
<div class="selectClass">
|
||||||
|
<Radio v-model="allSelect">全选</Radio>
|
||||||
|
<i-input icon="search" placeholder="请输入店铺名称或编码" style="width: 250px"></i-input>
|
||||||
|
</div>
|
||||||
|
<div class="companyTable">
|
||||||
|
<div class="companyListClass">
|
||||||
|
<div :class="isSelect[index] == true ? 'tagColorClass' : ''" class="tagClass" @click="selectTag(item,index)" v-for="(item, index) in companyList" :key="index" >{{item.name}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "useActivityStepThree",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
allSelect: false,
|
||||||
|
companyList: [{
|
||||||
|
name: '111'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
}],
|
||||||
|
isSelect:[],
|
||||||
|
selectValue: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.companyList.forEach(element => {
|
||||||
|
this.isSelect.push('')
|
||||||
|
this.selectValue.push('')
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectTag(value,index) {
|
||||||
|
this.isSelect.splice(index,1,!this.isSelect[index])
|
||||||
|
if(this.isSelect[index] === true) {
|
||||||
|
this.selectValue.splice(index, 1, value.id)
|
||||||
|
} else if(this.isSelect[index] === false) {
|
||||||
|
this.selectValue.splice(index, 1, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.selectClass {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.companyTable {
|
||||||
|
width: 3150px;
|
||||||
|
height: 1000px;
|
||||||
|
border: 1px solid;
|
||||||
|
margin-top: 40px;
|
||||||
|
padding: 40px;
|
||||||
|
overflow:scroll;
|
||||||
|
}
|
||||||
|
.companyListClass {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.tagClass {
|
||||||
|
width: 31%;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
height: 120px;
|
||||||
|
line-height: 120px;
|
||||||
|
border: 1px solid #e3e8ee!important;
|
||||||
|
color: #657180!important;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
.tagColorClass {
|
||||||
|
background: #6ac1d1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<div style="padding: 0 40px;">
|
||||||
|
<div class="selectClass">
|
||||||
|
<Radio v-model="allSelect">全选</Radio>
|
||||||
|
<i-input icon="search" placeholder="请输入零售公司名称或编码" style="width: 250px"></i-input>
|
||||||
|
</div>
|
||||||
|
<div class="companyTable">
|
||||||
|
<div class="companyListClass">
|
||||||
|
<div :class="companyColorIndex == index ? 'tagColorClass' : ''" class="tagClass" @click="selectTag(index)" v-for="(item, index) in companyList" :key="index" >{{item.name}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "useActivityStepTwo",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
allSelect: false,
|
||||||
|
companyList: [{
|
||||||
|
name: '111'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
}],
|
||||||
|
companyColorIndex: -1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectTag(val) {
|
||||||
|
this.companyColorIndex = val
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.selectClass {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.companyTable {
|
||||||
|
width: 3150px;
|
||||||
|
height: 1000px;
|
||||||
|
border: 1px solid;
|
||||||
|
margin-top: 40px;
|
||||||
|
padding: 40px;
|
||||||
|
overflow:scroll;
|
||||||
|
}
|
||||||
|
.companyListClass {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.tagClass {
|
||||||
|
width: 31%;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
height: 120px;
|
||||||
|
line-height: 120px;
|
||||||
|
border: 1px solid #e3e8ee!important;
|
||||||
|
color: #657180!important;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
.tagColorClass {
|
||||||
|
background: #6ac1d1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
<template>
|
||||||
|
<Modal v-model="useModal" @on-cancel="cancel" width="1000">
|
||||||
|
<Steps style="padding: 40px;" :current="currentStep">
|
||||||
|
<Step title="基本信息" content=""></Step>
|
||||||
|
<Step title="选择零售公司" content=""></Step>
|
||||||
|
<Step title="选择店铺" content=""></Step>
|
||||||
|
<Step title="确认信息" content=""></Step>
|
||||||
|
</Steps>
|
||||||
|
<useActivityStepOne v-if="currentStep==0"></useActivityStepOne>
|
||||||
|
<useActivityStepTwo v-if="currentStep==1"></useActivityStepTwo>
|
||||||
|
<useActivityStepThree v-if="currentStep==2"></useActivityStepThree>
|
||||||
|
<useActivityStepFoure v-if="currentStep==3"></useActivityStepFoure>
|
||||||
|
<div slot="footer">
|
||||||
|
<Button v-if="currentStep!==0" type="primary" shape="circle" :loading="modal_loading" @click="back">上一步</Button>
|
||||||
|
<Button v-if="currentStep!==3" type="primary" shape="circle" :loading="modal_loading" @click="next">下一步</Button>
|
||||||
|
<Button v-if="currentStep==3" type="primary" shape="circle" :loading="modal_loading" @click="finish">完成</Button>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import useActivityStepOne from './useActivityStepOne'
|
||||||
|
import useActivityStepTwo from './useActivityStepTwo'
|
||||||
|
import useActivityStepThree from './useActivityStepThree'
|
||||||
|
import useActivityStepFoure from './useActivityStepFoure'
|
||||||
|
export default {
|
||||||
|
name: "useTable",
|
||||||
|
components: {
|
||||||
|
useActivityStepOne,
|
||||||
|
useActivityStepTwo,
|
||||||
|
useActivityStepThree,
|
||||||
|
useActivityStepFoure
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentStep: 0,
|
||||||
|
modal_loading: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
useModal: Boolean
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
useModal(val) {
|
||||||
|
this.useModal = val
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
console.log(this.useModal)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
cancel() {
|
||||||
|
this.$emit("dispalyuseModal", false, false)
|
||||||
|
},
|
||||||
|
next() {
|
||||||
|
this.currentStep = this.currentStep + 1
|
||||||
|
},
|
||||||
|
back() {
|
||||||
|
this.currentStep = this.currentStep - 1
|
||||||
|
},
|
||||||
|
finish() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
/**
|
||||||
|
* 登录 server层
|
||||||
|
* @author yuankai
|
||||||
|
* @date 2020/05/19
|
||||||
|
*/
|
||||||
|
|
||||||
|
import http from '../CommonHttp'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 活动池列表
|
||||||
|
* @param params 参数
|
||||||
|
* @param call 成功的回调
|
||||||
|
* @returns {Promise<any>} 返回Promise对象
|
||||||
|
*/
|
||||||
|
export function getActivityList(params, call) {
|
||||||
|
return http.get('/activity/schedule/list/all', params).then(call)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增或修改活动池
|
||||||
|
*/
|
||||||
|
export function addOreditActivity(params, call) {
|
||||||
|
return http.post('/activity/schedule/save',params).then(call)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取活动池详情
|
||||||
|
*/
|
||||||
|
export function getActivityInfo(params, call) {
|
||||||
|
return http.get('/activity/schedule/detail',params).then(call)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 上传图片
|
||||||
|
*/
|
||||||
|
export function uploadImg(params, call) {
|
||||||
|
return http.post('/upload',params).then(call)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
getActivityList,
|
||||||
|
addOreditActivity,
|
||||||
|
getActivityInfo,
|
||||||
|
uploadImg
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue