From b60f4e957233dd9938c1ef30dc2a3e41f629b297 Mon Sep 17 00:00:00 2001
From: Sigo <sigo2017web@163.com>
Date: Wed, 22 Jun 2022 10:20:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8F=91=E5=B8=83=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E6=96=B9=E5=BC=8F=E4=B8=BAcss?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../issue/components/complete.vue             |  48 +++++
 .../discount-coupon/issue/components/edit.vue | 174 ++++++++++++++++++
 .../issue/components/template.vue             |  82 +++++++++
 src/pages/discount-coupon/issue/index.vue     | 102 +++++++++-
 src/router/index.js                           |  13 +-
 5 files changed, 413 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/discount-coupon/issue/components/complete.vue
 create mode 100644 src/pages/discount-coupon/issue/components/edit.vue
 create mode 100644 src/pages/discount-coupon/issue/components/template.vue

diff --git a/src/pages/discount-coupon/issue/components/complete.vue b/src/pages/discount-coupon/issue/components/complete.vue
new file mode 100644
index 0000000..117d49d
--- /dev/null
+++ b/src/pages/discount-coupon/issue/components/complete.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="container">
+    <div class="icon">
+      <i class="el-icon-success"></i>
+    </div>
+    <div class="title">优惠券发布成功</div>
+    <div class="btn">
+      <el-button class="sub" type="primary" size="medium" @click="GoOn">继续发布</el-button>
+      <el-button size="medium" @click="complete">完成</el-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      choose: 0,
+    }
+  },
+  methods: {
+    GoOn() {
+      this.$emit('next', 1)
+    },
+    complete() {
+      this.$router.push('/active/management')
+      this.$store.dispatch('tabsBar/delRoute', { path: '/active/issue' })
+    },
+  },
+}
+</script>
+<style scoped>
+.container {
+  margin-top: 80px;
+  text-align: center;
+}
+.container .icon {
+  font-size: 80px;
+  color: #67c23a;
+  margin-bottom: 25px;
+}
+.container .title {
+  font-size: 20px;
+  margin-bottom: 100px;
+}
+.container .btn .sub {
+  margin-right: 50px;
+}
+</style>
diff --git a/src/pages/discount-coupon/issue/components/edit.vue b/src/pages/discount-coupon/issue/components/edit.vue
new file mode 100644
index 0000000..f53c10e
--- /dev/null
+++ b/src/pages/discount-coupon/issue/components/edit.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="container">
+    <!-- 填写信息 -->
+    <el-row :gutter="20">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <el-form ref="form" :model="form" :rules="rules" label-width="auto" class="form" size="medium">
+          <el-form-item label="优惠券名称" prop="couponName">
+            <el-input v-model.trim="form.couponName" placeholder="优惠券名称"></el-input>
+          </el-form-item>
+          <el-form-item label="优惠券数量" prop="couponNumber">
+            <el-input v-model.trim="form.couponNumber" placeholder="优惠券数量"></el-input>
+          </el-form-item>
+          <el-form-item label="优惠限制" prop="serviceConditions">
+            <el-radio v-model="form.serviceConditions" :label="0">满减</el-radio>
+            <el-radio v-model="form.serviceConditions" :label="1">没有限制</el-radio>
+          </el-form-item>
+          <el-form-item label="优惠方式" prop="couponType">
+            <el-radio v-model="form.couponType" :label="0">代金券</el-radio>
+            <el-radio v-model="form.couponType" :label="1">折扣券</el-radio>
+            <el-radio v-model="form.couponType" :label="2">代扣券</el-radio>
+          </el-form-item>
+          <el-form-item label="满减金额" prop="fullReductionMoney">
+            <amount-input ref="fullReductionMoney" @amount="handleAmount" name="fullReductionMoney" placeholder="满减金额（满多少可以减）"></amount-input>
+          </el-form-item>
+          <el-form-item label="适用门店" prop="suitableStore">
+            <el-input v-model.trim="form.suitableStore" placeholder="优惠券适用的门店"></el-input>
+          </el-form-item>
+          <el-form-item label="适用项目" prop="suitableProject">
+            <el-input v-model.trim="form.suitableProject" placeholder="优惠券适用的项目"></el-input>
+          </el-form-item>
+          <el-form-item label="有效方式" prop="indateType">
+            <el-radio v-model="form.indateType" :label="0">领取后多少天</el-radio>
+            <el-radio v-model="form.indateType" :label="1">固定日期</el-radio>
+          </el-form-item>
+          <el-form-item v-show="form.indateType===0" :prop="form.indateType===0?'startDay':''">
+            <el-input v-model.trim="form.startDay" placeholder="领取后多少天生效"></el-input>
+          </el-form-item>
+          <el-form-item v-show="form.indateType===1" :prop="form.indateType===1?'endDay':''">
+            <el-input v-model.trim="form.endDay" placeholder="多少天内有效生效"></el-input>
+          </el-form-item>
+          <el-form-item label="分享提成规则" prop="shareCommissionRules">
+            <el-radio v-model="form.shareCommissionRules" :label="0">固定提成</el-radio>
+            <el-radio v-model="form.shareCommissionRules" :label="1">单据金额抽成(%)</el-radio>
+          </el-form-item>
+          <el-form-item v-show="form.shareCommissionRules===0" :prop="form.shareCommissionRules===0?'fixedAmount':''">
+            <amount-input ref="fixedAmount" @amount="handleAmount" name="fixedAmount" placeholder="固定提成(元)"></amount-input>
+          </el-form-item>
+          <el-form-item v-show="form.shareCommissionRules===1" :prop="form.shareCommissionRules===1?'orderCommission':''">
+            <amount-input ref="orderCommission" @amount="handleAmount" name="orderCommission" placeholder="单据金额抽成(%)"></amount-input>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <div class="box">
+          <el-button type="warning" @click="handleNext" size="medium">下一步</el-button>
+          <!-- <el-button type="primary" @click="handleNext" size="medium">提交</el-button> -->
+          <el-button @click="resetForm" size="medium">重置</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import AmountInput from '@/components/AmountInput/index'
+export default {
+  name: 'Form',
+  components: { AmountInput },
+  data() {
+    return {
+      form: {
+        couponNum: 1,
+      },
+      rules: {
+        couponName: [
+          { required: true, message: '请输入优惠券名称', trigger: 'blur' },
+        ],
+        couponNumber: [
+          { required: true, message: '请输入优惠券数量', trigger: 'blur' },
+        ],
+        serviceConditions: [
+          { required: true, message: '请选择优惠限制', trigger: ['blur', 'change'] },
+        ],
+        couponType: [
+          { required: true, message: '请选择优惠方式', trigger: ['blur', 'change'] },
+        ],
+
+        fullReductionMoney: [
+          { required: true, message: '请输入满减金额', trigger: 'blur' },
+          {
+            pattern: /^\d*(?:\.\d{0,2})?$/,
+            //pattern: /^1[3456789]\d{9}$/,
+            message: '最多能输入两位小数',
+            trigger: 'blur',
+          },
+        ],
+        suitableStore: [
+          { required: true, message: '请选择适用门店', trigger: ['blur', 'change'] },
+        ],
+        suitableProject: [
+          { required: true, message: '请选择适用项目', trigger: ['blur', 'change'] },
+        ],
+        indateType: [
+          { required: true, message: '请选择有效方式', trigger: ['blur', 'change'] },
+        ],
+        shareCommissionRules: [
+          { required: true, message: '请选择分享提成规则', trigger: ['blur', 'change'] },
+        ],
+        couponNum: [{ required: true, message: '优惠券数量', trigger: 'blur' }],
+        shareAmount: [
+          { required: true, message: '请输入分润', trigger: 'blur' },
+          {
+            pattern: /^\d*(?:\.\d{0,2})?$/,
+            //pattern: /^1[3456789]\d{9}$/,
+            message: '最多能输入两位小数',
+            trigger: 'blur',
+          },
+        ],
+        phone: [
+          { required: true, message: '请输入联系方式', trigger: 'blur' },
+          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
+          {
+            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
+            //pattern: /^1[3456789]\d{9}$/,
+            message: '请输入正确的手机号码',
+            trigger: 'blur',
+          },
+        ],
+        imgUrl: [{ required: true, message: '请上传活动图片', trigger: 'change' }],
+        region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
+      },
+    }
+  },
+  methods: {
+    // 下一步
+    handleNext() {
+      console.log(123);
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$emit('next', 2)
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm() {
+      this.$refs.fullReductionMoney.reset()
+      this.$refs.fixedAmount.reset()
+      this.$refs.orderCommission.reset()
+      this.$refs.form.resetFields()
+      this.$baseMessage('重置成功', 'success')
+    },
+    handleAmount(name, amount) {
+      let form = Object.assign({}, this.form)
+      form[name] = amount
+      this.form = Object.assign({}, form)
+    },
+  },
+}
+</script>
+<style scoped>
+.container .form {
+  width: 500px;
+  /* // margin: 0 auto; */
+}
+.container .box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 50px 0;
+}
+</style>
diff --git a/src/pages/discount-coupon/issue/components/template.vue b/src/pages/discount-coupon/issue/components/template.vue
new file mode 100644
index 0000000..60ea7f1
--- /dev/null
+++ b/src/pages/discount-coupon/issue/components/template.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="container">
+    <!-- 选择模板 -->
+    <el-row :gutter="20">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <div class="box">
+          <div class="box-item">
+            <div class="item" :class="choose == 1 ? 'choose' : ''" @click="handleChoose(1)"></div>
+            <div :class="choose == 1 ? 'choose' : ''">模板一</div>
+          </div>
+          <div class="box-item">
+            <div class="item" :class="choose == 2 ? 'choose' : ''" @click="handleChoose(2)"></div>
+            <div :class="choose == 2 ? 'choose' : ''">模板二</div>
+          </div>
+          <div class="box-item">
+            <div class="item" :class="choose == 3 ? 'choose' : ''" @click="handleChoose(3)"></div>
+            <div :class="choose == 3 ? 'choose' : ''">模板三</div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <div class="box">
+          <el-button type="warning" @click="handleLast" size="medium">上一步</el-button>
+          <el-button type="primary" @click="handleNext" size="medium">提交</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      choose: 0,
+    }
+  },
+  methods: {
+    handleChoose(num) {
+      this.choose = num
+    },
+    // 上一步
+    handleLast() {
+      this.$emit('next', 1)
+    },
+    // 提交
+    handleNext() {
+      this.$emit('next', 3)
+    },
+  },
+}
+</script>
+<style scoped>
+.container .box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 50px;
+  margin-bottom: 50px;
+}
+.container .box .box-item {
+  text-align: center;
+  margin-right: 80px;
+  font-weight: bold;
+  font-size: 16px;
+  color: #666666;
+}
+.container .box .box-item:last-child {
+  margin-right: 0px;
+}
+.container .box .box-item .item {
+  width: 250px;
+  height: 380px;
+  border: 3px solid #dddddd;
+  margin-bottom: 30px;
+}
+.container .box .box-item .choose {
+  color: #5470c6;
+  border-color: #5470c6;
+}
+</style>
diff --git a/src/pages/discount-coupon/issue/index.vue b/src/pages/discount-coupon/issue/index.vue
index e026138..a66addf 100644
--- a/src/pages/discount-coupon/issue/index.vue
+++ b/src/pages/discount-coupon/issue/index.vue
@@ -1,12 +1,108 @@
 <template>
-  发布
+  <div class="container">
+    <!-- 步骤 -->
+    <el-row :gutter="20">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <el-steps :active="active">
+          <el-step title="填写信息" icon="el-icon-edit"></el-step>
+          <el-step title="页面预览" icon="el-icon-thumb"></el-step>
+          <el-step title="完成发布" icon="el-icon-s-promotion"></el-step>
+        </el-steps>
+      </el-col>
+    </el-row>
+    <edit ref="edit" class="marginTop" @next="handleNext" v-if="active == 1"></edit>
+    <templates ref="templates" class="marginTop" @next="handleNext" v-if="active == 2"></templates>
+    <complete ref="complete" class="marginTop" @next="handleNext" v-if="active == 3"></complete>
+  </div>
 </template>
 
 <script>
+import Complete from './components/complete'
+import Edit from './components/edit'
+import Templates from './components/template'
 export default {
-
+  name: 'Form',
+  components: { Templates, Edit, Complete },
+  data() {
+    return {
+      active: 1,
+      form: {
+        couponNum: 1,
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          {
+            min: 3,
+            max: 5,
+            message: '长度在 3 到 5 个字符',
+            trigger: 'blur',
+          },
+        ],
+        deductionAmount: [
+          { required: true, message: '请输入抵扣金额', trigger: 'blur' },
+          {
+            pattern: /^\d*(?:\.\d{0,2})?$/,
+            //pattern: /^1[3456789]\d{9}$/,
+            message: '最多能输入两位小数',
+            trigger: 'blur',
+          },
+        ],
+        couponNum: [{ required: true, message: '优惠券数量', trigger: 'blur' }],
+        shareAmount: [
+          { required: true, message: '请输入分润', trigger: 'blur' },
+          {
+            pattern: /^\d*(?:\.\d{0,2})?$/,
+            //pattern: /^1[3456789]\d{9}$/,
+            message: '最多能输入两位小数',
+            trigger: 'blur',
+          },
+        ],
+        phone: [
+          { required: true, message: '请输入联系方式', trigger: 'blur' },
+          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
+          {
+            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
+            //pattern: /^1[3456789]\d{9}$/,
+            message: '请输入正确的手机号码',
+            trigger: 'blur',
+          },
+        ],
+        imgUrl: [{ required: true, message: '请上传活动图片', trigger: 'change' }],
+        region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
+      },
+    }
+  },
+  methods: {
+    submitForm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          alert('submit!')
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm() {
+      this.$refs.deductionAmount.reset()
+      this.$refs.shareAmount.reset()
+      this.$refs.form.resetFields()
+    },
+    handleAmount(name, amount) {
+      let form = Object.assign({}, this.form)
+      form[name] = amount
+      this.form = Object.assign({}, form)
+    },
+    // 下一步
+    handleNext(active) {
+      this.active = active
+    },
+  },
 }
 </script>
 
-<style>
+<style scoped>
+.marginTop {
+  margin-top: 30px;
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index f4bc1d4..f36631d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,8 +4,7 @@ import Layout from "../layout/layout.vue";
 Vue.use(VueRouter);
 
 const router = new VueRouter({
-  routes: [
-    {
+  routes: [{
       path: "/",
       redirect: "/login"
     },
@@ -782,7 +781,15 @@ const router = new VueRouter({
             title: "会员等级",
             index: "memberClass"
           }
-        }
+        },
+        {
+          path: "/couponIssue",
+          component: () => import("../pages/discount-coupon/issue/index.vue"),
+          meta: {
+            title: "发布",
+            index: "couponIssue"
+          }
+        },
       ]
     }
   ]