From 02a19df35f6dc62be389106e5a06827abe99bf06 Mon Sep 17 00:00:00 2001
From: Sigo <sigo2017web@163.com>
Date: Wed, 22 Jun 2022 10:05:28 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89element=E9=87=91=E9=A2=9D=E8=BE=93=E5=85=A5=E6=A1=86?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AmountInput/index.vue          | 106 ++++++++++++++++++
 .../自定义金额输入框组件            |   0
 2 files changed, 106 insertions(+)
 create mode 100644 src/components/AmountInput/index.vue
 create mode 100644 src/components/AmountInput/自定义金额输入框组件

diff --git a/src/components/AmountInput/index.vue b/src/components/AmountInput/index.vue
new file mode 100644
index 0000000..7767cb2
--- /dev/null
+++ b/src/components/AmountInput/index.vue
@@ -0,0 +1,106 @@
+<!-- 金额输入框 -->
+<template>
+  <el-input v-model.trim="form.moneyShow" :placeholder="placeholder" @blur="handleBlur" @focus="handleFocus" @input="handleInput" @paste.native.capture.prevent="handlePaste">
+    <i slot="prefix" class="el-input__icon el-icon-coin"></i>
+  </el-input>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        moneyShow: null,
+        money: null,
+      },
+    }
+  },
+  props: {
+    placeholder: String,
+    name: String,
+  },
+  methods: {
+    // 失去焦点
+    handleBlur() {
+      let form = Object.assign({}, this.form)
+      form.moneyShow = this.$thousands(this.form.money)
+      this.form = Object.assign({}, form)
+    },
+    // 获取焦点
+    handleFocus() {
+      let form = Object.assign({}, this.form)
+      form.moneyShow = form.money
+      this.form = Object.assign({}, form)
+    },
+    // 输入时
+    handleInput(value) {
+      let amount
+      // 最后一个字符
+      let last = value.charAt(value.length - 1)
+      // 去掉最后一个字符的后的
+      let cutLast = value.substring(0, value.length - 1)
+      let form = Object.assign({}, this.form)
+      let num = /^[0-9]*$/
+      if (last) {
+        if (num.test(last) || last == '.') {
+          if (last == '.') {
+            if (cutLast.includes('.')) {
+              amount = value.substring(0, value.length - 1)
+            } else {
+              amount = value
+            }
+          } else {
+            amount = value
+          }
+        } else {
+          amount = value.substring(0, value.length - 1)
+        }
+      }
+      form.moneyShow = amount
+      form.money = amount
+      this.form = Object.assign({}, form)
+      this.$emit('amount', this.name, amount)
+    },
+    // 粘贴时
+    handlePaste(res) {
+      let amount
+      let num = /^[0-9]*$/
+      let clip = res.clipboardData.getData('Text')
+      let form = Object.assign({}, this.form)
+      if (num.test(clip)) {
+        amount = form.money + clip
+      } else if (clip.includes('.')) {
+        if (clip.split('.').length > 2) {
+          amount = form.money
+        } else {
+          if (clip.split('.').length > 0) {
+            if (num.test(clip.split('.')[0]) && num.test(clip.split('.')[1])) {
+              if (form.money.includes('.')) {
+                amount = form.money
+              } else {
+                amount = form.money + clip
+              }
+            } else {
+              amount = form.money
+            }
+          } else {
+            amount = form.money
+          }
+        }
+      } else {
+        amount = form.money
+      }
+      form.moneyShow = amount
+      form.money = amount
+      this.form = Object.assign({}, form)
+      this.$emit('amount', this.name, amount)
+    },
+    // 重置
+    reset() {
+      this.form = Object.assign({}, {})
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/src/components/AmountInput/自定义金额输入框组件 b/src/components/AmountInput/自定义金额输入框组件
new file mode 100644
index 0000000..e69de29

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 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8F=91=E5=B8=83?=
 =?UTF-8?q?=E6=A0=B7=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"
+          }
+        },
       ]
     }
   ]