营销活动列表

src/views/marketing/components/detailFile.vue

+<template>
+  <div class="app-container">
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisibl"
+      width="60%"
+      :before-close="dialog"
+    >
+      <el-form ref="form" :model="form" label-width="80px">
+        <span class="description">客户基本信息</span>
+        <div class="customer">
+          <el-form-item label="联系人" class="customer-lab">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话" class="customer-lab">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item label="订单标题" class="customer-lab">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item label="联系人" class="customer-lab">
+            <el-date-picker
+              v-model="value1"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+              class="customer-lab-icke"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="维修地址" class="customer-lab">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+        </div>
+
+      </el-form>
+      <el-button @click="dialog">取消</el-button>
+      <el-button type="primary" @click="onSubmit">保存添加</el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import comvideo from "./video.vue";
+
+export default {
+  name: "modify",
+  components: {
+    comvideo,
+  },
+  props: {
+    dialogVisibl: {
+      type: Boolean,
+    },
+    title: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      width: "30%",
+      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+      srcList: [
+        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
+        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
+      ],
+      value1: "",
+      form: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+    };
+  },
+  created() {},
+  methods: {
+    dialog() {
+      this.$emit("diaisibl");
+    },
+    onSubmit() {
+      this.$emit("onSubmit");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.description {
+  font-size: 25px;
+  margin-top: 10px;
+}
+
+.customer {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 20px;
+
+  &-lab {
+    width: 33%;
+
+    &-icke {
+      width: 100%;
+    }
+  }
+}
+
+.imgdiv {
+  margin-top: 20px;
+  display: flex;
+  flex-wrap: wrap;
+
+  &-img {
+    width: 120px;
+  }
+}
+</style>

src/views/marketing/index.vue

+<template>
+  <div class="app-container">
+    <el-form ref="queryForm" size="small" :inline="true" label-width="94px">
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleAdd"
+          >添加优惠券</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column type="index" width="50" label="序号" align="center">
+      </el-table-column>
+      <el-table-column
+        prop="city"
+        label="券类型"
+        :show-overflow-tooltip="true"
+        align="center"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="优惠内容"
+        :show-overflow-tooltip="true"
+        align="center"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="province"
+        label="使用门槛"
+        :show-overflow-tooltip="true"
+        align="center"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="date"
+        label="生效时间"
+        :show-overflow-tooltip="true"
+        align="center"
+      >
+      </el-table-column>
+
+      <el-table-column
+        prop="date"
+        label="失效时间"
+        :show-overflow-tooltip="true"
+        align="center"
+      >
+      </el-table-column>
+      <el-table-column label="操作" width="150" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="modify(scope.row, '1')"
+            >修改</el-button
+          >
+          <el-button type="text" size="small" @click="modify(scope.row, '1')"
+            >删除</el-button
+          >
+          <el-button type="text" size="small" @click="modify(scope.row, '2')"
+            >详情</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "orderform",
+  data() {
+    return {
+      dialogVisible: false,
+      dialogVi: false,
+      control: "0",
+      total: 5,
+      title: "修改订单",
+      queryParams: {
+        pageNum: 0,
+        pageSize: 10,
+      },
+      value: "",
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
+      // 预览参数
+      preview: {
+        open: false,
+        title: "代码预览",
+        data: {},
+        activeName: "domain.java",
+      },
+    };
+  },
+  created() {},
+  methods: {
+    // 页码切换
+    getList() {},
+    // 修改详情
+    modify(sta, val) {
+      if (val == "1") {
+        this.title = "修改订单";
+      } else {
+        this.title = "订单详情";
+      }
+      this.dialogVi = true;
+    },
+    // 其他 弹窗关闭
+    visivie() {
+      this.dialogVisible = false;
+    },
+    // 详情 修改 弹窗关闭
+    diaisibl() {
+      this.dialogVi = false;
+    },
+    // 详情 修改 确认修改
+    onSubmit() {
+      this.dialogVi = false;
+    },
+  },
+};
+</script>