活动使用功能

src/pages/activity/ActivityManager.vue

@@ -12,7 +12,7 @@
 							</div>
 						</div>
 						<div class="operateItem">
-							<div @click="disPlayUseTable">使用</div>
+							<div @click="disPlayUseTable(item.id)">使用</div>
 							<div @click="dispalyAddActivity(item.id)">配置</div>
 						</div>
 					</div>
@@ -36,7 +36,7 @@
 import Img from '../../assets/logo.png'
 import useTable from './useTable'
 import addActivity from './addActivity'
-import ActivityManager from "../../services/ActivityManager/ActivityManager";
+import ActivityManager from "../../services/ActivityManager/ActivityManager"
 export default {
 	name: "ActivityManager",
 	components: {
@@ -63,12 +63,14 @@ export default {
 					that.activityList = data.data.results
 			})
 		},
-		disPlayUseTable() {
+		disPlayUseTable(id) {
+			// store.commit('SET_ID', id.toString())
+			// console.log(store.getters.id)
 			this.useModal = true
 		},
-		dispalyAddActivity(val) {
+		dispalyAddActivity(id) {
 			this.addActivityModal = true
-			this.id = val.toString()
+			this.id = id.toString()
 		},
 		dispalyuseModal(displayModalFlag, isCancle) {
 			this.useModal = displayModalFlag

src/pages/activity/ActivityPlan.vue

@@ -1,10 +1,167 @@
 <template>
-    <div>活动计划</div>
+    <div>
+      <Form ref="formValidate" :model="formValidate" :label-width="80">
+        <Row>
+          <i-col span="6">
+            <FormItem label="零售公司" prop="">
+              <Select v-model="formValidate.companyData" filterable placeholder="全部" clearable>
+                <Option v-for="(item,index) in companyList" :key="index" :value="item.value">{{ item.label }}</Option>
+              </Select>
+            </FormItem>
+          </i-col>
+          <i-col span="6">
+            <FormItem label="店铺" prop="">
+              <Select v-model="formValidate.shopData" filterable placeholder="全部" clearable>
+                <Option v-for="(item,index) in shopList" :key="index" :value="item.value">{{ item.label }}</Option>
+              </Select>
+            </FormItem>
+          </i-col>
+          <i-col span="4">
+            <FormItem label="活动状态" prop="">
+              <Select v-model="formValidate.activityStatus">
+                <Option v-for="(item,index) in activityStatusList" :key="index" :value="item.value">{{ item.label }}</Option>
+              </Select>
+            </FormItem>
+          </i-col>
+          <i-col span="7">
+            <FormItem label="选择日期" prop="">
+              <Date-picker :value="formValidate.date" type="daterange" placement="bottom-end" placeholder="选择日期区间"></Date-picker>
+            </FormItem>
+          </i-col>
+          <i-col span="1">
+            <Button type="primary" @click="searchTable">查询</Button>
+          </i-col>
+        </Row>
+        <Row style="margin-top:50px">
+          <Table border :columns="columns1" :data="activityData"></Table>
+        </Row>
+      </Form>
+    </div>
 </template>
 
 <script>
+import ActivityManager from "../../services/ActivityManager/ActivityManager";
 export default {
-        name: "ActivityPlan"
+  name: "ActivityPlan",
+  inject: ['setMenuName'],
+  data() {
+    return {
+      companyList: [],
+      shopList: [],
+      activityStatus: '进行中',
+      formValidate: {
+        date: '',
+        companyData: '',
+        shopData: '',
+        activityStatus: '进行中',
+      },
+      activityData:[{
+        activityStatus: '进行中'
+      },{
+        activityStatus: '已结束'
+      }],
+      activityStatusList: [{
+        label: '全部',
+        value: '全部'
+      },{
+        label: '进行中',
+        value: '进行中'
+      },{
+        label: '未开始',
+        value: '未开始'
+      },{
+        label: '已结束',
+        value: '已结束'
+      }],
+      columns1: [{
+                    type: 'index',
+                    width: 60,
+                    align: 'center'
+                },
+                {
+                    title: '活动名称',
+                    key: 'activityName'
+                },
+                {
+                    title: '活动类型',
+                    key: 'activityStyle'
+                },
+                {
+                    title: '活动时间',
+                    key: 'activityDate'
+                },
+                {
+                    title: '零售公司',
+                    key: 'company'
+                },
+                {
+                    title: '店铺',
+                    key: 'shop'
+                },
+                {
+                    title: '添加好友数',
+                    key: 'addFriendNum'
+                },
+                {
+                    title: '参与活动客户数',
+                    key: 'joinActivityClientNum'
+                },
+                {
+                    title: '活动码',
+                    key: 'activityCode'
+                },
+                {
+                    title: '活动状态',
+                    key: 'activityStatus'
+                },
+                {
+                    title: '操作',
+                    key: 'action',
+                    render () {
+                        return `<Button type="text" size="small">终止</Button><Button type="text" size="small">修改</Button>`;
+                    }
+                }]
+    }
+  },
+  mounted() {
+    this.setMenuName("活动管理", "活动计划")
+    this.getCompanyInfo()
+    this.getShopInfo()
+  },
+  methods: {
+    getCompanyInfo() {
+      let that = this
+      let data = {
+        userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
+      }
+			ActivityManager.getCompany(data, function (data) {
+          that.companyList = []
+          data.data.results.forEach(element => {
+            that.companyList.push({
+              label: element.name,
+              value: element.id
+            })
+          });
+			})
+    },
+    getShopInfo() {
+      let that = this
+      let data = {
+        userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
+      }
+			ActivityManager.getShop(data, function (data) {
+        that.shopList = []
+          data.data.results.forEach(element => {
+            that.shopList.push({
+              label: element.name,
+              value: element.id
+            })
+          });
+			})
+    },
+    searchTable() {
+    }
+  }
 }
 </script>
 

src/pages/activity/useActivityStepThree.vue

@@ -1,48 +1,66 @@
 <template>
   <div style="padding: 0 40px;">
     <div class="selectClass">
-      <Radio v-model="allSelect">全选</Radio>
+      <Checkbox v-model="allSelect" @on-change="isSelectAllCompany">全选</Checkbox>
       <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 :class="isSelect[index] == true ? 'tagColorClass' : ''" class="tagClass" @click="selectTag(item,index)" v-for="(item, index) in shopList" :key="index" >{{item.label}}</div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import ActivityManager from "../../services/ActivityManager/ActivityManager"
 export default {
   name: "useActivityStepThree",
   data() {
 		return {
       allSelect: false,
-      companyList: [{
+      shopList: [],
-        name: '111'
-      },{
-        name: '111'
-      },{
-        name: '111'
-      },{
-        name: '111'
-      },{
-        name: '111'
-      },{
-        name: '111'
-      },{
-        name: '111'
-      }],
       isSelect:[],
       selectValue: []
 		}
   },
 	mounted() {
-    this.companyList.forEach(element => {
+    this.getShopInfo()
-      this.isSelect.push('')
-      this.selectValue.push('')
-    });
   },
   methods: {
+    getShopInfo() {
+      let that = this
+      let data = {
+        userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
+      }
+			ActivityManager.getShop(data, function (data) {
+          that.shopList = []
+          data.data.results.forEach(element => {
+            that.isSelect.push('')
+            that.selectValue.push('')
+            that.shopList.push({
+              label: element.name,
+              value: element.id
+            })
+          });
+			})
+    },
+    isSelectAllCompany() {
+      if(this.allSelect === true) {
+        this.isSelect.forEach((element,index) => {
+          this.isSelect.splice(index,1,true)
+        })
+        this.shopList.forEach((element,index) => {
+          this.selectValue.splice(index,1,element.id)
+        })
+      } else {
+        this.isSelect.forEach((element,index) => {
+          this.isSelect.splice(index,1,'')
+        })
+        this.shopList.forEach((element,index) => {
+          this.selectValue.splice(index,1,'')
+        })
+      }
+    },
     selectTag(value,index) {
       this.isSelect.splice(index,1,!this.isSelect[index])
       if(this.isSelect[index] === true) {

src/pages/activity/useActivityStepTwo.vue

@@ -1,45 +1,73 @@
 <template>
   <div style="padding: 0 40px;">
     <div class="selectClass">
-      <Radio v-model="allSelect">全选</Radio>
+      <Checkbox v-model="allSelect" @on-change="isSelectAllCompany">全选</Checkbox>
       <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 :class="isSelect[index] == true ? 'tagColorClass' : ''" class="tagClass" @click="selectTag(item,index)" v-for="(item, index) in companyList" :key="index" >{{item.label}}</div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import ActivityManager from "../../services/ActivityManager/ActivityManager"
 export default {
   name: "useActivityStepTwo",
   data() {
 		return {
       allSelect: false,
-      companyList: [{
+      companyList: [],
-        name: '111'
+      isSelect:[],
-      },{
+      selectValue: []
-        name: '111'
-      },{
-        name: '111'
-      },{
-        name: '111'
-      },{
-        name: '111'
-      },{
-        name: '111'
-      },{
-        name: '111'
-      }],
-      companyColorIndex: -1
 		}
   },
 	mounted() {
+    this.getCompanyInfo()
   },
   methods: {
-    selectTag(val) {
+    getCompanyInfo() {
-      this.companyColorIndex = val
+      let that = this
+      let data = {
+        userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
+      }
+			ActivityManager.getCompany(data, function (data) {
+          that.companyList = []
+          data.data.results.forEach(element => {
+            that.isSelect.push('')
+            that.selectValue.push('')
+            that.companyList.push({
+              label: element.name,
+              value: element.id
+            })
+          });
+			})
+    },
+    isSelectAllCompany() {
+      if(this.allSelect === true) {
+        this.isSelect.forEach((element,index) => {
+          this.isSelect.splice(index,1,true)
+        })
+        this.companyList.forEach((element,index) => {
+          this.selectValue.splice(index,1,element.id)
+        })
+      } else {
+        this.isSelect.forEach((element,index) => {
+          this.isSelect.splice(index,1,'')
+        })
+        this.companyList.forEach((element,index) => {
+          this.selectValue.splice(index,1,'')
+        })
+      }
+    },
+    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, '')
+      }
     }
   }
 }

src/pages/activity/useTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal v-model="useModal" @on-cancel="cancel" width="1000">
+  <Modal v-model="displayUseModal" @on-cancel="cancel" width="1000">
     <Steps style="padding: 40px;" :current="currentStep">
       <Step title="基本信息" content=""></Step>
       <Step title="选择零售公司" content=""></Step>
@@ -34,6 +34,7 @@ export default {
 		return {
       currentStep: 0,
       modal_loading: false,
+      displayUseModal: false
 		}
   },
   props: {
@@ -41,7 +42,7 @@ export default {
   },
   watch: {
     useModal(val) {
-      this.useModal = val
+      this.displayUseModal = val
     }
   },
 	mounted() {
@@ -50,6 +51,7 @@ export default {
   methods: {
     cancel() {
       this.$emit("dispalyuseModal", false, false)
+      this.currentStep = 0
     },
     next() {
       this.currentStep = this.currentStep + 1
@@ -58,7 +60,7 @@ export default {
       this.currentStep = this.currentStep - 1
     },
     finish() {
-
+      this.currentStep = 0
     }
   }
 }

src/services/ActivityManager/ActivityManager.js

@@ -37,9 +37,25 @@ export function uploadImg(params, call) {
   return http.post('/upload',params).then(call)
 }
 
+/**
+ * 获取零售公司
+ */
+export function getCompany(params, call) {
+  return http.get('/retail/company',params).then(call)
+}
+
+/**
+ * 获取店铺
+ */
+export function getShop(params, call) {
+  return http.post('poi/store/user/shop',params).then(call)
+}
+
 export default {
   getActivityList,
   addOreditActivity,
   getActivityInfo,
-  uploadImg
+  uploadImg,
+  getCompany,
+  getShop
 }

src/store/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import home from './modules/home'
+import activity from './modules/activity'
 import createLogger from 'vuex/dist/logger'
 
 Vue.use(Vuex)
@@ -8,7 +9,8 @@ const debug = true
 
 export default new Vuex.Store({
   modules: {
-    home
+    home,
+    activity
   },
   plugins: debug ? [createLogger()] : []
 })

src/store/modules/activity.js

@@ -0,0 +1,19 @@
+import * as types from './mutation-type'
+const activity = {
+  state: {
+    id: ''
+  },
+  mutations: {
+    [types.SET_ID](state, id) {
+      state.id = id
+    }
+  },
+  actions: {},
+  getters: {
+    id: state => {
+      return state.id
+    }
+  }
+
+}
+export default activity

src/store/modules/home.js

@@ -1,4 +1,4 @@
-import * as types from '../mutation-type'
+import * as types from './mutation-type'
 const home = {
   state: {
     number: 1

src/store/modules/mutation-type.js

@@ -1 +1,2 @@
 export const SET_NUM = 'SET_NUM'
+export const SET_ID = 'SET_ID'