From 7c223091032c8f17ef3f2bb938ac68431556c0ae Mon Sep 17 00:00:00 2001
From: zhenghuang <236220500@qq.com>
Date: Thu, 28 May 2020 17:58:07 +0800
Subject: [PATCH] 1

---
 src/pages/activity/addActivity.vue          |   3 +
 src/pages/activity/selectStoreStep.vue      | 130 ++++++++
 src/pages/activity/useActivityStepThree.vue |  61 ++--
 src/pages/activity/useTable.vue             |   4 +
 src/pages/shop/IncreaseWelcomeEdit.vue      | 323 +++++++++++++++++++-
 src/pages/shop/IncreaseWelcomeList.vue      |   2 +-
 src/store/modules/activity.js               |  36 +--
 src/utils/Common.js                         |  18 ++
 8 files changed, 530 insertions(+), 47 deletions(-)
 create mode 100644 src/pages/activity/selectStoreStep.vue

diff --git a/src/pages/activity/addActivity.vue b/src/pages/activity/addActivity.vue
index 0642da9..bd57e97 100644
--- a/src/pages/activity/addActivity.vue
+++ b/src/pages/activity/addActivity.vue
@@ -253,6 +253,7 @@ export default {
         if (that.formValidate.params.hasOwnProperty(key)) {
           const element = that.formValidate.params[key];
           if (element.name.length <= 0) {
+            that.modal_loading = false;
             that.$Message.error(`请输入类型${i}的活动类型名称!`);
             return false;
           }
@@ -267,6 +268,8 @@ export default {
         if (valid) {
           // param = JSON.stringify(param)
           let data = { ...that.formValidate, isGetActivityInfo: true };
+          data.categoryId = 0;
+          data.categoryCode = "promotion";
           ActivityManager.addOreditActivity(data, function (data) {
             that.addActivityModal = false;
             that.formValidate = {};
diff --git a/src/pages/activity/selectStoreStep.vue b/src/pages/activity/selectStoreStep.vue
new file mode 100644
index 0000000..7aec19e
--- /dev/null
+++ b/src/pages/activity/selectStoreStep.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="use_box">
+    <Modal :scrollable="false"
+           v-model="showUse"
+           title="使用活动"
+           @on-cancel="cancel"
+           :loading="true"
+           width="70%">
+      <Steps style="padding: 40px;"
+             :current="currentStep">
+        <Step :title="isModify ? '修改零售公司' : '选择零售公司'"
+              content></Step>
+        <Step :title="isModify ? '修改店铺' : '选择店铺'"
+              content></Step>
+      </Steps>
+      <useActivityStepTwo :schedule="schedule"
+                          :isModify="isModify"
+                          v-if="currentStep == 0"></useActivityStepTwo>
+      <useActivityStepThree :schedule="schedule"
+                            :isModify="isModify"
+                            v-if="currentStep == 1"></useActivityStepThree>
+      <div slot="footer">
+        <Button v-if="currentStep !== 0"
+                type="primary"
+                shape="circle"
+                :loading="modal_loading"
+                @click="back">上一步</Button>
+        <Button v-if="currentStep !== 1"
+                type="primary"
+                shape="circle"
+                :loading="modal_loading"
+                @click="next">下一步</Button>
+        <Button v-if="currentStep == 1"
+                type="primary"
+                shape="circle"
+                :loading="modal_loading"
+                @click="finish">完成</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script>
+import useActivityStepOne from "./useActivityStepOne";
+import useActivityStepTwo from "./useActivityStepTwo";
+import useActivityStepThree from "./useActivityStepThree";
+import useActivityStepFoure from "./useActivityStepFoure";
+import ActivityManager from "../../services/ActivityManager/ActivityManager";
+import store from "../../store/index";
+import { formatDate } from '../../utils/Common';
+export default {
+  name: "useTable",
+  components: {
+    useActivityStepOne,
+    useActivityStepTwo,
+    useActivityStepThree,
+    useActivityStepFoure,
+  },
+  data () {
+    return {
+      currentStep: 0,
+      modal_loading: false,
+      showUse: false,
+    };
+  },
+  props: {
+    id: String,
+    schedule: Object,
+    show: Boolean,
+    isModify: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    show () {
+      this.showUse = this.show;
+    },
+    schedule () {
+      store.getters.useData.scheduleId = this.schedule.id;
+    },
+  },
+  mounted () { },
+  methods: {
+    cancel () {
+      this.currentStep = 0;
+    },
+    cancel () {
+      store.commit("RSET_useData");
+      this.$emit("doShow", false);
+      this.modal_loading = false;
+      this.showUse = false;
+      this.currentStep = 0;
+    },
+    next () {
+      let data = store.getters.useData;
+      if (this.currentStep === 0) {
+        if (!data.company || data.company.length === 0) {
+          this.$Message.error("请至少选择1家公司");
+          return;
+        }
+      }
+      if (this.currentStep === 2) {
+        if (!data.stores || data.stores.length === 1) {
+          this.$Message.error("请至少选择1家店铺");
+          return;
+        }
+      }
+      if (typeof data.beginTime == "object") {
+        data.beginTime = formatDate(data.beginTime);
+      }
+      if (typeof data.endTime == "object") {
+        data.endTime = formatDate(data.endTime);
+      }
+      console.log("data", data)
+      store.commit("SET_useData", data);
+      this.currentStep = this.currentStep + 1;
+    },
+    back () {
+      this.currentStep = this.currentStep - 1;
+    },
+    finish () {
+      let that = this;
+      this.modal_loading = true;
+      that.$emit("doShow", false);
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/src/pages/activity/useActivityStepThree.vue b/src/pages/activity/useActivityStepThree.vue
index 6a304ef..264748d 100644
--- a/src/pages/activity/useActivityStepThree.vue
+++ b/src/pages/activity/useActivityStepThree.vue
@@ -1,35 +1,45 @@
 <template>
   <div style="padding: 0 40px;">
     <div class="selectClass">
-      <Checkbox
-        :indeterminate="indeterminate"
-        :value="allSelect"
-        @click.prevent.native="handleCheckAll"
-      >&nbsp;&nbsp;&nbsp;全选</Checkbox>
-      <i-input icon="search" @on-change="doSearch" placeholder="请输入店铺名称" style="width: 250px"></i-input>
+      <Checkbox :indeterminate="indeterminate"
+                :value="allSelect"
+                @click.prevent.native="handleCheckAll">&nbsp;&nbsp;&nbsp;全选</Checkbox>
+      <i-input icon="search"
+               @on-change="doSearch"
+               placeholder="请输入店铺名称"
+               style="width: 250px"></i-input>
     </div>
     <div class="companyTable">
       <div class="companyListClass">
         <Row :gutter="10">
-          <div v-if="loading" style="padding: 50px 0" class="loading">
+          <div v-if="loading"
+               style="padding: 50px 0"
+               class="loading">
             <Spin fix>加载中...</Spin>
           </div>
-          <CheckboxGroup size="large" @on-change="onChange" v-model="isSelect">
-            <i-col
-              span="8"
-              v-if="!item.hide && index < block"
-              :key="index"
-              v-for="(item, index) in shopList"
-            >
-              <Checkbox size="large" :label="item.value" border>
+          <CheckboxGroup size="large"
+                         @on-change="onChange"
+                         v-model="isSelect">
+            <i-col span="8"
+                   v-if="!item.hide && index < block"
+                   :key="index"
+                   v-for="(item, index) in shopList">
+              <Checkbox size="large"
+                        :label="item.value"
+                        border>
                 <span :title="item.label">{{ item.label.substr(0, 18) }}</span>
               </Checkbox>
             </i-col>
           </CheckboxGroup>
         </Row>
       </div>
-      <Spin size="large" fix v-if="loading"></Spin>
-      <Button type="info" long v-if="block < orginShopList.length" @click="loadMore">加载更多</Button>
+      <Spin size="large"
+            fix
+            v-if="loading"></Spin>
+      <Button type="info"
+              long
+              v-if="block < orginShopList.length"
+              @click="loadMore">加载更多</Button>
     </div>
   </div>
 </template>
@@ -38,7 +48,7 @@ import ActivityManager from "../../services/ActivityManager/ActivityManager";
 import store from "../../store/index";
 export default {
   name: "useActivityStepThree",
-  data() {
+  data () {
     return {
       indeterminate: false,
       allSelect: false,
@@ -56,7 +66,7 @@ export default {
   props: {
     isModify: Boolean
   },
-  mounted() {
+  mounted () {
     this.getShopInfo();
     let _this = this;
     if (store.getters.useData.stores) {
@@ -66,7 +76,7 @@ export default {
     }
   },
   methods: {
-    handleCheckAll() {
+    handleCheckAll () {
       let _this = this;
       if (this.indeterminate) {
         this.allSelect = false;
@@ -94,13 +104,14 @@ export default {
         }
       });
     },
-    doSearch(e) {
+    doSearch (e) {
       const keyword = e.target.value;
       let that = this;
       that.block = 50;
       that.shopList = that.orginShopList;
       if (keyword.length > 0) {
         that.shopList = that._.filter(that.shopList, item => {
+          console.log(item.label, keyword)
           return item.label.indexOf(keyword) >= 0;
         });
       } else {
@@ -108,7 +119,7 @@ export default {
       }
       this.isSelect = this._.filter(this.isSelect, item => item);
     },
-    onChange(data) {
+    onChange (data) {
       let _this = this;
       data = this._.filter(data, item => item);
       if (data.length === this.shopListData.length) {
@@ -131,10 +142,10 @@ export default {
         }
       });
     },
-    loadMore() {
+    loadMore () {
       this.block += 50;
     },
-    getShopInfo() {
+    getShopInfo () {
       let that = this;
       let companyIds = [];
       this.companys.forEach(item => {
@@ -149,7 +160,7 @@ export default {
         data.scheduleId = null;
       }
       that.loading = true;
-      ActivityManager.getShop(data, function(data) {
+      ActivityManager.getShop(data, function (data) {
         that.shopList = [];
         that.shopListData = data.data.results;
         if (store.getters.useData.stores.length == that.shopListData.length) {
diff --git a/src/pages/activity/useTable.vue b/src/pages/activity/useTable.vue
index b195c82..96eb9f7 100644
--- a/src/pages/activity/useTable.vue
+++ b/src/pages/activity/useTable.vue
@@ -78,6 +78,10 @@ export default {
     isModify: {
       type: Boolean,
       default: false
+    },
+    beginStep: {
+      type: Number,
+      default: 1
     }
   },
   watch: {
diff --git a/src/pages/shop/IncreaseWelcomeEdit.vue b/src/pages/shop/IncreaseWelcomeEdit.vue
index b5d23ee..8eae524 100644
--- a/src/pages/shop/IncreaseWelcomeEdit.vue
+++ b/src/pages/shop/IncreaseWelcomeEdit.vue
@@ -1,21 +1,336 @@
 <template>
   <div class="">
-
+    <Row>
+      <i-col :span="12">
+        <Form ref="welcomeForm"
+              :model="welcome"
+              :rules="welcomeRules">
+          <FormItem label="欢迎语内容"
+                    prop="description">
+            <i-input v-model="welcome.description"
+                     type="textarea"
+                     style="height: 220px"
+                     :autosize="{minRows: 10,maxRows: 10}"
+                     placeholder="请输入欢迎语内容,最多100个字"></i-input>
+          </FormItem>
+          <Row style="margin-bottom: 10px"
+               :gutter="10"
+               class="inputItem"
+               v-for="(item, index) in welcome.params"
+               :key="index">
+            <div v-if="item.type == 3">
+              <i-col style="line-height: 32px"
+                     :span="4"> APPID {{ index + 1 }} </i-col>
+              <i-col :span="6">
+                <i-input class="inputClass"
+                         type="text"
+                         disabled
+                         v-model="item.defaultVal"></i-input>
+              </i-col>
+              <i-col style="line-height: 32px"
+                     :span="4"> URI {{ index + 1 }} </i-col>
+              <i-col :span="6">
+                <i-input class="inputClass"
+                         type="text"
+                         disabled
+                         v-model="item.description"></i-input>
+              </i-col>
+            </div>
+            <div v-else>
+              <i-col style="line-height: 32px"
+                     :span="4"> {{item.name}}{{ index + 1 }} </i-col>
+              <i-col :span="16">
+                <i-input class="inputClass"
+                         type="text"
+                         disabled
+                         v-model="item.defaultVal"></i-input>
+              </i-col>
+            </div>
+            <i-col :span="4">
+              <Button type="error"
+                      @click="delActivityInput(index)">删除</Button>
+            </i-col>
+          </Row>
+          <FormItem>
+            <Button type="text"
+                    @click="() => showMessageTypes = true"
+                    icon="md-add">添加图片/网页/小程序消息</Button>
+          </FormItem>
+          <FormItem label="配置范围: ">
+            <span v-if="welcome.stores.length > 0">
+              {{welcome.stores[0].name}}等{{welcome.stores.length}}家店铺
+            </span>
+            <Button type="text"
+                    @click="showStores"
+                    icon="md-add">全部店铺</Button>
+          </FormItem>
+          <FormItem>
+            <Button type="primary"
+                    long
+                    @click="submit">确定</Button>
+          </FormItem>
+        </Form>
+      </i-col>
+    </Row>
+    <Modal v-model="showMessageTypes"
+           title="添加图片/网页/小程序消息"
+           :footer-hide="true">
+      <Row :gutter="24">
+        <i-col :span="8">
+          <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="width: 100%;">
+            <div style="width: 100%;">
+              <Button long
+                      type="primary">图片</Button>
+            </div>
+          </Upload>
+        </i-col>
+        <i-col :span="8">
+          <Button long
+                  @click="doShowWeb"
+                  type="primary">网页</Button></i-col>
+        <i-col :span="8">
+          <Button long
+                  @click="doShowMini"
+                  type="primary">小程序</Button></i-col>
+      </Row>
+    </Modal>
+    <Modal v-model="showWeb"
+           title="添加网页消息"
+           :loading="true">
+      <Form ref="webForm"
+            :model="webForm"
+            :rules="webFormRules">
+        <FormItem label="添加网页消息"
+                  prop="url">
+          <i-input v-model="webForm.url"
+                   type="text"
+                   placeholder="以http或https开头"></i-input>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="primary"
+                @click="cancelWeb">取消</Button>
+        <Button type="primary"
+                @click="okWeb">确定</Button>
+      </div>
+    </Modal>
+    <Modal v-model="showMini"
+           title="添加小程序消息"
+           :loading="true">
+      <Form ref="miniForm"
+            :model="miniForm"
+            :rules="miniFormRules">
+        <FormItem label="APPID"
+                  prop="appid">
+          <i-input v-model="miniForm.appid"
+                   type="text"
+                   placeholder="请输入appid"></i-input>
+        </FormItem>
+        <FormItem label="APPID"
+                  prop="uri">
+          <i-input v-model="miniForm.uri"
+                   type="text"
+                   placeholder="请输入URl"></i-input>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="primary"
+                @click="cancelMini">取消</Button>
+        <Button type="primary"
+                @click="okMini">确定</Button>
+      </div>
+    </Modal>
+    <selectStoreStep @doShow="doShow"
+                     :schedule="welcome"
+                     :show="showStoreCheck"></selectStoreStep>
   </div>
 </template>
 
 <script type="text/javascript">
+import axios from "axios";
+import { isURL } from '../../utils/Common';
+import store from "../../store"
+import selectStoreStep from '../activity/selectStoreStep';
+const validateUrl = (rule, value, callback) => {
+  const is = isURL(value)
+  if (is) {
+    callback();
+  } else {
+    callback(new Error('URL非法,请以http或https开头'));
+  }
+};
 export default {
   data () {
     return {
-
+      showStoreCheck: false,
+      showWeb: false,
+      showMini: false,
+      id: 0,
+      showMessageTypes: false,
+      welcome: {
+        description: "",
+        params: [],
+        companys: [],
+        name: "欢迎语",
+        stores: []
+      },
+      welcomeRules: {
+        description: [
+          { required: true, message: "请输入欢迎语内容", trigger: "blur" },
+          { type: 'string', max: 100, message: '欢迎语最长100个字符', trigger: 'blur' },]
+      },
+      webFormRules: {
+        url: [
+          { required: true, message: "请输入url", trigger: "blur" },
+          { validator: validateUrl, trigger: 'blur' }]
+      },
+      webForm: { url: "" },
+      miniFormRules: {
+        appid: [
+          { required: true, message: "请输入url", trigger: "blur" },],
+        uri: [
+          { required: true, message: "请输入url", trigger: "blur" },]
+      },
+      miniForm: { appid: "", uri: "" }
     }
   },
+  created () {
+    this.id = this.$route.query.id
+  },
   components: {
+    selectStoreStep
+  },
+  methods: {
+    doShow () {
+      this.showStoreCheck = false
+      this.welcome = store.getters.useData
+    },
+    showStores () {
+      store.commit("SET_useData", { ...store.getters.useData, ...this.welcome })
+      this.showStoreCheck = true;
+    },
+    uploadImgSuccess (res, file) {
 
-  }
+    },
+    cancelWeb () {
+      this.showWeb = false;
+    },
+    doShowWeb () {
+      this.showWeb = true;
+      this.webForm = { url: "" };
+    },
+    doShowMini () {
+      this.showMini = true;
+      this.miniForm = {
+        appid: "", uri: ""
+      };
+    },
+    cancelMini () {
+      this.showMini = false;
+    },
+    okWeb () {
+      let _this = this;
+      this.$refs["webForm"].validate((valid) => {
+        if (valid) {
+          _this.welcome.params.push({
+            attr: "url",
+            defaultVal: this.webForm.url,
+            description: this.webForm.url,
+            isRequired: 1,
+            key: "url",
+            limitLower: null,
+            limitUpper: null,
+            name: "网页",
+            type: 2
+          });
+          this.showWeb = false;
+          this.showMessageTypes = false;
+        }
+      })
+    },
+    okMini () {
+      let _this = this;
+      this.$refs["miniForm"].validate((valid) => {
+        if (valid) {
+          _this.welcome.params.push({
+            attr: "mini",
+            defaultVal: this.miniForm.appid,
+            description: this.miniForm.uri,
+            isRequired: 1,
+            key: "mini",
+            limitLower: null,
+            limitUpper: null,
+            name: "小程序消息",
+            type: 3
+          });
+          this.showMini = false;
+          this.showMessageTypes = false;
+        }
+      })
+    },
+    delActivityInput (index) {
+      this.welcome.params.splice(index, 1);
+      this.$forceUpdate();
+    },
+    handleBeforeUpload (res) {
+      const me = this;
+      let data = new FormData();
+      data.append("file", res);
+      axios({
+        method: "post",
+        url: "/upload",
+        data: data,
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      }).then(function (res) {
+        if (res.data.success) {
+          // me.formValidate.logo = res.data.results;
+          me.welcome.params.push({
+            attr: "image",
+            defaultVal: res.data.results,
+            description: res.data.results,
+            isRequired: 1,
+            key: "image",
+            limitLower: null,
+            limitUpper: null,
+            name: "图片",
+            type: 1
+          });
+          me.showMessageTypes = false;
+        }
+      });
+      return false;
+    },
+    submit () {
+      let _this = this;
+      if (this.welcome.params.length <= 0) {
+        _this.$Message.error("请添加图片/网页/小程序消息");
+      }
+      if (this.welcome.stores.length <= 0) {
+        _this.$Message.error("请至少选择一个店铺");
+      }
+      this.$refs["welcomeForm"].validate((valid) => {
+        if (valid) {
+          console.log(_this.welcome)
+        }
+      })
+    }
+  },
 }
 </script>
 
-<style lang="scss" scoped>
+<style scope>
+.ivu-upload-drag {
+  border: none !important;
+}
 </style>
diff --git a/src/pages/shop/IncreaseWelcomeList.vue b/src/pages/shop/IncreaseWelcomeList.vue
index fbb5e42..5867173 100644
--- a/src/pages/shop/IncreaseWelcomeList.vue
+++ b/src/pages/shop/IncreaseWelcomeList.vue
@@ -100,7 +100,7 @@ export default {
     },
     // 新增或修改
     handleEdit (row) {
-      this.$router.push({ path: "/shop/increase/welcome/edit", query: row.id })
+      this.$router.push({ path: "/shop/increase/welcome/edit", params: { id: row.id } })
     },
     // 删除
     handleDelete (row) {
diff --git a/src/store/modules/activity.js b/src/store/modules/activity.js
index cac4cc5..d63db8a 100644
--- a/src/store/modules/activity.js
+++ b/src/store/modules/activity.js
@@ -1,54 +1,56 @@
-import * as types from "./mutation-type";
+import * as types from './mutation-type'
 const activity = {
   state: {
     useData: {
-      beginTime: "",
-      endTime: "",
+      beginTime: '',
+      endTime: '',
       id: null,
-      name: "",
+      name: '',
       params: [],
       scheduleId: null,
+      categoryId: 0,
+      categoryCode: 'promotion',
       stores: [],
       company: [],
     },
     useModal: false,
-    id: "",
+    id: '',
     store: [],
   },
   mutations: {
     [types.SET_useData](state, useData) {
-      state.useData = useData;
+      state.useData = useData
     },
     [types.RSET_useData](state) {
       state.useData = {
-        beginTime: "",
-        endTime: "",
+        beginTime: '',
+        endTime: '',
         id: null,
-        name: "",
+        name: '',
         params: [],
         scheduleId: null,
         stores: [],
         company: [],
-      };
+      }
     },
     [types.SET_useModal](state, useModal) {
-      state.useModal = useModal;
+      state.useModal = useModal
     },
     [types.SET_ID](state, id) {
-      state.id = id;
+      state.id = id
     },
   },
   actions: {},
   getters: {
     useData: (state) => {
-      return state.useData;
+      return state.useData
     },
     useModal: (state) => {
-      return state.useModal;
+      return state.useModal
     },
     id: (state) => {
-      return state.id;
+      return state.id
     },
   },
-};
-export default activity;
+}
+export default activity
diff --git a/src/utils/Common.js b/src/utils/Common.js
index 4e8a214..17bb576 100644
--- a/src/utils/Common.js
+++ b/src/utils/Common.js
@@ -28,7 +28,25 @@ export function formatDate(dt) {
   return year + '-' + month + '-' + day
 }
 
+export function isURL(str_url) {
+  // 验证url
+  var strRegex =
+    '^((https|http)?://)' +
+    "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + // ftp的user@
+    '(([0-9]{1,3}.){3}[0-9]{1,3}' + // IP形式的URL- 199.194.52.184
+    '|' + // 允许IP和DOMAIN（域名）
+    "([0-9a-z_!~*'()-]+.)*" + // 域名- www.
+    '([0-9a-z][0-9a-z-]{0,61})?[0-9a-z].' + // 二级域名
+    '[a-z]{2,6})' + // first level domain- .com or .museum
+    '(:[0-9]{1,4})?' + // 端口- :80
+    '((/?)|' + // a slash isn't required if there is no file name
+    "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$"
+  var re = new RegExp(strRegex)
+  return re.test(str_url)
+}
+
 export default {
   goToLogin,
   formatDate,
+  isURL,
 }