bsdgy-front/src/pages/shop/IncreaseWelcomeEdit.vue

<template>
  <div class>
    <Row>
      <i-col :span="12">
        <Form ref="welcomeForm" :model="welcome" :rules="welcomeRules">
          <FormItem label="欢迎语内容" prop="content">
            <i-input
              v-model="welcome.content"
              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="2">标题 {{ index + 1 }}</i-col>
              <i-col :span="4">
                <i-input class="inputClass" type="text" disabled v-model="item.key"></i-input>
              </i-col>
              <i-col style="line-height: 32px" :span="2">APPID {{ index + 1 }}</i-col>
              <i-col :span="4">
                <i-input class="inputClass" type="text" disabled v-model="item.defaultVal"></i-input>
              </i-col>
              <i-col style="line-height: 32px" :span="2">URI {{ index + 1 }}</i-col>
              <i-col :span="3">
                <i-input class="inputClass" type="text" disabled v-model="item.description"></i-input>
              </i-col>
              <i-col style="line-height: 32px" :span="2">MediaId{{ index + 1 }}</i-col>
              <i-col :span="3">
                <i-input class="inputClass" type="text" disabled v-model="item.limitLower"></i-input>
              </i-col>
            </div>
            <div v-else-if="item.type == 2">
              <i-col style="line-height: 32px" :span="4">标题 {{ index + 1 }}</i-col>
              <i-col :span="8">
                <i-input class="inputClass" type="text" disabled v-model="item.description"></i-input>
              </i-col>
              <i-col style="line-height: 32px" :span="4">URL {{ index + 1 }}</i-col>
              <i-col :span="8">
                <i-input class="inputClass" type="text" disabled v-model="item.defaultVal"></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
              @click="showStores"
              v-if="welcome.stores.length > 0"
            >{{ welcome.stores[0].name }}等{{ welcome.stores.length }}家店铺</span>
            <Button
              type="text"
              v-if="welcome.stores.length <= 0"
              @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"
            :on-exceeded-size="onExceededSize"
            :before-upload="handleBeforeUpload"
            multiple
            type="drag"
            action
            style="width: 100%;"
          >
            <div style="width: 100%;">
              <Button long type="primary">{{imageUploading ? "上传中..." : "图片"}}</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.title" type="text" placeholder="请输入网页标题"></i-input>
        </FormItem>
        <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="标题" prop="key">
          <i-input v-model="miniForm.key" type="text" placeholder="请输入标题"></i-input>
        </FormItem>
        <FormItem label="APPID" prop="appid">
          <i-input v-model="miniForm.appid" type="text" placeholder="请输入appid"></i-input>
        </FormItem>
        <FormItem label="URI" prop="uri">
          <i-input v-model="miniForm.uri" type="text" placeholder="请输入URl"></i-input>
        </FormItem>
        <FormItem label="封面图">
          <Upload
            ref="upload"
            :show-upload-list="false"
            :on-success="miniUploadImgSuccess"
            :format="['jpg', 'jpeg', 'png']"
            :max-size="2048"
            :before-upload="handleBeforeUploadMini"
            multiple
            type="drag"
            action
            style="display: inline-block;"
          >
            <div style="width: 200px;height:200px;line-height: 200px;border:1px dashed #dedede">
              <span v-if="!miniForm.limitUpper">请上传图片</span>
              <img
                v-if="miniForm.limitUpper"
                :src="`/kiisoo-ic` + miniForm.limitUpper"
                alt
                style="width: 100%; height: auto"
              />
            </div>
          </Upload>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="cancelMini">取消</Button>
        <Button type="primary" @click="okMini">确定</Button>
      </div>
    </Modal>
    <selectStoreStep :isModify="id>0" @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";
import ActivityManager from "../../services/ActivityManager/ActivityManager";
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,
      imageUploading: false,
      welcome: {
        content: "",
        params: [],
        company: [],
        stores: [],
        categoryCode: "welcome",
        id: null
      },
      welcomeRules: {
        content: [
          { 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" }
        ],
        title: [{ required: true, message: "请输入url", trigger: "blur" }]
      },
      webForm: { url: "", title: "" },
      miniFormRules: {
        appid: [{ required: true, message: "请输入url", trigger: "blur" }],
        uri: [{ required: true, message: "请输入url", trigger: "blur" }],
        key: [{ required: true, message: "请输入url", trigger: "blur" }]
      },
      miniForm: { appid: "", uri: "", limitLower: "", limitUpper: "", key: "" }
    };
  },
  watch: {
    welcome: {
      handler() {
        store.commit("SET_useData", {
          ...store.getters.useData,
          ...this.welcome
        });
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.id = this.$route.query.id;
    // store.commit("SET_useData", { ...store.getters.useData, ...this.welcome });
    console.log(this.$route);
    if (this.id) {
      this.getDetail(this.id);
    }
  },
  components: {
    selectStoreStep
  },
  methods: {
    doShow() {
      this.showStoreCheck = false;
      this.welcome = store.getters.useData;
    },
    onExceededSize() {
      console.log("失败");
    },
    getDetail(instanceId) {
      let _this = this;
      ActivityManager.instanceDetail(
        {
          instanceId
        },
        res => {
          _this.welcome = res.data.results;
          store.commit("SET_useData", {
            ...store.getters.useData,
            ...this.welcome
          });
        }
      );
    },
    showStores() {
      console.log({ ...store.getters.useData, ...this.welcome });
      store.commit("SET_useData", {
        ...this.welcome,
        ...store.getters.useData
      });
      this.showStoreCheck = true;
    },
    uploadImgSuccess(res, file) {},
    miniUploadImgSuccess(res, file) {},
    cancelWeb() {
      this.showWeb = false;
    },
    doShowWeb() {
      this.showWeb = true;
      this.webForm = { url: "", title: "" };
    },
    doShowMini() {
      this.showMini = true;
      this.miniForm = {
        appid: "",
        uri: "",
        limitLower: "",
        limitUpper: "",
        key: ""
      };
    },
    cancelMini() {
      this.showMini = false;
    },
    okWeb() {
      let _this = this;
      this.$refs["webForm"].validate(valid => {
        if (valid) {
          _this.welcome.params.push({
            attr: 2,
            defaultVal: this.webForm.url,
            description: this.webForm.title,
            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: 2,
            defaultVal: this.miniForm.appid,
            description: this.miniForm.uri,
            isRequired: 1,
            key: "mini",
            limitLower: this.miniForm.limitLower,
            limitUpper: this.miniForm.limitUpper,
            name: "小程序消息",
            type: 3
          });
          this.showMini = false;
          this.showMessageTypes = false;
        }
      });
    },
    delActivityInput(index) {
      this.welcome.params.splice(index, 1);
      this.$forceUpdate();
    },
    handleBeforeUploadMini(res) {
      const me = this;
      let data = new FormData();
      data.append("file", res);
      data.append("needMediaId", "true");
      console.log(data);
      this.imageUploading = true;
      axios({
        method: "post",
        url: "/upload",
        data: data,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      }).then(function(res) {
        me.imageUploading = false;
        if (res.data.success) {
          // me.formValidate.logo = res.data.results;
          me.miniForm.limitLower = res.data.results.mediaId;
          me.miniForm.limitUpper = res.data.results.localPath;
          me.showMessageTypes = false;
        }
      });
      return false;
    },
    handleBeforeUpload(res) {
      const me = this;
      let data = new FormData();
      data.append("file", res);
      data.append("needMediaId", "true");
      console.log(data);
      this.imageUploading = true;
      axios({
        method: "post",
        url: "/upload",
        data: data,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      }).then(function(res) {
        me.imageUploading = false;
        if (res.data.success) {
          // me.formValidate.logo = res.data.results;
          me.welcome.params.push({
            attr: 2,
            defaultVal: res.data.results.mediaId,
            description: res.data.results.localPath,
            isRequired: 1,
            key: "image",
            limitLower: null,
            limitUpper: null,
            name: "图片",
            type: 1
          });
          me.showMessageTypes = false;
        }
      });
      return false;
    },
    submit() {
      let _this = this;
      if (this.welcome.stores.length <= 0) {
        _this.$Message.error("请至少选择一个店铺");
        return false;
      }
      this.$refs["welcomeForm"].validate(valid => {
        if (valid) {
          let data = _this.welcome;
          data.isGetActivityInfo = true;
          axios({
            method: "post",
            url: "/activity/instance/saveWelcome",
            data: data,
            headers: {
              "Content-Type": "applications/json"
            }
          }).then(res => {
            _this.$router.push("/shop/increase/welcome/list");
          });
        }
      });
    }
  }
};
</script>

<style scope>
.ivu-upload-drag {
  border: none !important;
}
</style>