From d1cf8db0b07b239e02c7f67fc7cf41b66fd522fe Mon Sep 17 00:00:00 2001
From: Sigo <sigo2017web@163.com>
Date: Mon, 27 Jun 2022 15:18:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E5=B8=83=E5=B7=AE=E4=BF=9D=E8=AF=81?=
 =?UTF-8?q?=E9=87=91=E8=AE=A1=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/discount-coupon/management.js         |  8 ++
 .../issue/components/activeImg.vue            | 12 ++-
 .../issue/components/complete.vue             |  8 +-
 .../discount-coupon/issue/components/edit.vue | 47 ++++++++--
 .../discount-coupon/issue/components/pay.vue  | 92 +++++++++++++++++++
 .../issue/components/template.vue             | 36 ++++++--
 src/pages/discount-coupon/issue/index.vue     | 43 ++++++++-
 .../discount-coupon/management/index.vue      | 29 ++++--
 src/router/index.js                           |  2 +
 src/utils/rem.js                              |  2 +-
 10 files changed, 243 insertions(+), 36 deletions(-)
 create mode 100644 src/pages/discount-coupon/issue/components/pay.vue

diff --git a/src/api/discount-coupon/management.js b/src/api/discount-coupon/management.js
index f9c6386..1c9bd0d 100644
--- a/src/api/discount-coupon/management.js
+++ b/src/api/discount-coupon/management.js
@@ -10,6 +10,14 @@ export function getList(params) {
     params
   });
 }
+// 发布
+export function doAdd(data) {
+  return service({
+    url: "/platformCoupon/add",
+    method: "post",
+    data
+  });
+}
 // 编辑
 export function doEdit(data) {
   return service({
diff --git a/src/pages/discount-coupon/issue/components/activeImg.vue b/src/pages/discount-coupon/issue/components/activeImg.vue
index 7cbd5b8..4e9b481 100644
--- a/src/pages/discount-coupon/issue/components/activeImg.vue
+++ b/src/pages/discount-coupon/issue/components/activeImg.vue
@@ -8,15 +8,17 @@
 export default {
   data() {
     return {
-      imageUrl: ''
+      imageUrl: ''//图片路径
     };
   },
   methods: {
+    show(url) {
+      this.imageUrl = url
+    },
+    // 选择图片后形成图片访问路径和将文件流传给edit.vue
     handleChange(file, fileList) {
-      this.imageUrl = URL.createObjectURL(file.raw);
-      this.$emit('active-img', file.raw);
-      // console.log('file', file);
-      console.log('fileList', fileList);
+      this.imageUrl = URL.createObjectURL(file.raw);//形成虚拟文件访问路径
+      this.$emit('active-img', file.raw);//raw要上传的文件流
     },
     // 发布后清除选择的文件
     handleClear() {
diff --git a/src/pages/discount-coupon/issue/components/complete.vue b/src/pages/discount-coupon/issue/components/complete.vue
index 0e4a038..e59fc3e 100644
--- a/src/pages/discount-coupon/issue/components/complete.vue
+++ b/src/pages/discount-coupon/issue/components/complete.vue
@@ -12,13 +12,15 @@
   </div>
 </template>
 <script>
+import Bus from "../../../bus";
 export default {
   data() {
     return {}
   },
   methods: {
     GoOn() {
-      this.$emit('next', 1)
+      this.$emit('next', 1, null)
+      Bus.$emit('issueComplete')
     },
     complete() {
       this.$router.push('/active/management')
@@ -45,7 +47,7 @@ export default {
   font-size: 20px;
   margin-bottom: 100px;
 }
-.container .btn .sub {
+/* .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
index 859edc8..7c4ea39 100644
--- a/src/pages/discount-coupon/issue/components/edit.vue
+++ b/src/pages/discount-coupon/issue/components/edit.vue
@@ -8,7 +8,7 @@
             <el-input v-model.trim="form.couponName" placeholder="优惠券名称"></el-input>
           </el-form-item>
           <el-form-item label="优惠券数量" prop="couponNumber">
-            <el-input-number v-model="form.couponNumber" :min="1" :precision="0" label="优惠券数量" style="width:100%"></el-input-number>
+            <el-input-number v-model="form.couponNumber" :min="1" :precision="0" label="优惠券数量" style="width:100%" @change="handleCalculate"></el-input-number>
           </el-form-item>
           <el-form-item label="优惠方式" prop="couponType">
             <el-radio-group v-model="form.couponType" @change="handleChange($event===0?['fullKimsMoney']:$event===1?['fullDiscountMoney']:false)">
@@ -75,10 +75,13 @@
             </el-radio-group>
           </el-form-item>
           <el-form-item v-if="form.shareCommissionRules===0" prop="fixedAmount">
-            <el-input-number class="hideBtn" v-model="form.fixedAmount" :min="1" :precision="2" placeholder="固定提成(元)"></el-input-number>
+            <el-input-number class="hideBtn" v-model="form.fixedAmount" :min="1" :precision="2" placeholder="固定提成(元)" @change="handleCalculate"></el-input-number>
           </el-form-item>
           <el-form-item v-if="form.shareCommissionRules===1" prop="orderCommission">
-            <el-input-number class="hideBtn" v-model="form.orderCommission" :min="1" :max="100" :precision="0" placeholder="单据金额抽成(%)"></el-input-number>
+            <el-input-number class="hideBtn" v-model="form.orderCommission" :min="1" :max="100" :precision="0" placeholder="单据金额抽成(%)" @change="handleCalculate"></el-input-number>
+          </el-form-item>
+          <el-form-item label="保证金">
+            <el-input v-model.trim="form.guaranteeMoney" placeholder="保证金(自动生成)" readonly></el-input>
           </el-form-item>
           <el-form-item label="活动图片" prop="imageUrl">
             <active-img ref="activeImg" @active-img="handleImage"></active-img>
@@ -104,6 +107,7 @@
 import ActiveImg from './activeImg'
 import Store from '@/components/mulStore/index'
 import Project from '@/components/mulProject/index'
+import { partten } from "@/utils/partten/index.js";
 export default {
   name: 'Form',
   components: { ActiveImg, Store, Project },
@@ -170,19 +174,35 @@ export default {
           { required: true, message: '请输入单据金额抽成(%', trigger: 'blur' },
         ],
         imageUrl: [{ required: true, message: '请上传活动图片', trigger: ['blur', 'change'] }],
+        guaranteeMoney: [{ required: true, message: '请输入保证金', trigger: ['blur', 'change'] }],
       },
     }
   },
   methods: {
     // ============================== 操作 ============================== //
+    // 编辑
+    handleData(row) {
+      // 判断传过来的值中时候有id来判断当前是新增的还是编辑的数据，有id的为编辑数据
+      if (row.id) {
+        // 从管理页面过来useStoreList和projectList空所以取的是useStores和useProjects中的值，如果是从预览页面，即步骤2过来的就直接取useStoreList和projectList中的值
+        row.useStoreList = row.useStoreList ? row.useStoreList : Array.from(row.useStores);
+        row.projectList = row.projectList ? row.projectList : Array.from(row.useProjects);
+        // 因为是编辑，所以需要将图片的链接拼接出来，将之前上传的图片展示出来,但是如果已经选了其它图片就直接使用当前的imageUrl路径
+        row.imageUrl = row.imageUrl ? row.imageUrl : partten.imagePath + row.fileLists[0].filePath + '/' + row.fileLists[0].fileName
+        // 因为后台需要的是一个拆开的两个时间不是一个时间数组，element的时间组件获取的值时时间数组所以需要自定义一个fixDate值来接受，新增提交时拆开，现在编辑需要重新将两个值组合回一个时间数组
+        row.fixDate = Array.from([row.startDate, row.endDate]);
+        // 展示图片，因为一开始展示页面，当前页面的子组件也是刚加载无法立马使用this.$refs获取，需要用this.$nextTick来过度一下
+        this.$nextTick(function () {
+          this.$refs.activeImg.show(row.imageUrl)
+        });
+      }
+      this.form = Object.assign({}, row);
+    },
     // 下一步
     handleNext() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          let form = Object.assign({}, this.form);
-          delete form.fixDate
-          delete form.imageUrl
-          this.$emit('next', 2, form)
+          this.$emit('next', 2, this.form)
         } else {
           return false
         }
@@ -215,7 +235,7 @@ export default {
     handleImage(file) {
       let form = Object.assign({}, this.form);
       form.multipartFile = file
-      form.imageUrl = true
+      form.imageUrl = URL.createObjectURL(file)
       this.form = Object.assign({}, form);
       this.$nextTick(function () {
         this.$refs.form.validateField(['imageUrl'])
@@ -250,6 +270,17 @@ export default {
       this.$nextTick(function () {
         this.$refs.form.validateField(['projectList'])
       });
+    },
+    // 计算保证金
+    handleCalculate() {
+      let form = Object.assign({}, this.form);
+      // 固定提成方式：保证金(guaranteeMoney) = 优惠券数量(couponNumber) * 固定提成（元）(fixedAmount)
+      // 单据金额抽成：保证金(guaranteeMoney) = 当前默认10000元
+      if (form.shareCommissionRules === 0) {
+        if (form.couponNumber && form.fixedAmount) {
+          // form.guaranteeMoney =
+        }
+      }
     }
   },
 }
diff --git a/src/pages/discount-coupon/issue/components/pay.vue b/src/pages/discount-coupon/issue/components/pay.vue
new file mode 100644
index 0000000..e1ff347
--- /dev/null
+++ b/src/pages/discount-coupon/issue/components/pay.vue
@@ -0,0 +1,92 @@
+<template>
+  <el-dialog title="打款" :visible.sync="dialogFormVisible" width="500px" @close="close" :close-on-click-modal="false" v-dialogDrag>
+    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="保证金">
+        <el-input v-model.trim="form.guaranteeMoney" readonly></el-input>
+      </el-form-item>
+      <el-form-item label="打款回执" prop="">
+        <el-upload class="avatar-uploader" :limit="10" ref="upload" action="#" :show-file-list="false" :auto-upload="false" :on-change="handleChange">
+          <img v-if="imageUrl" :src="imageUrl" class="avatar">
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'pay',
+  data() {
+    return {
+      imageUrl: '',//图片链接
+      form: {},
+      dialogFormVisible: false//弹窗显示
+    }
+  },
+  created() { },
+  methods: {
+    // ============================ 弹窗 ============================ //
+    // 显示弹窗
+    show() {
+      this.dialogFormVisible = true
+    },
+    // 关闭弹窗
+    close() {
+      this.dialogFormVisible = false
+    },
+
+    // ============================ 操作 ============================ //
+    // 选择图片后形成图片访问路径和将文件流传给edit.vue
+    handleChange(file, fileList) {
+      this.imageUrl = URL.createObjectURL(file.raw);//形成虚拟文件访问路径
+      this.$emit('active-img', file.raw);//raw要上传的文件流
+    },
+    // 发布后清除选择的文件
+    handleClear() {
+      this.$refs.upload.clearFiles();
+    },
+    // 保存
+    save() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+
+        } else {
+          return false
+        }
+      })
+    },
+  },
+}
+</script>
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  background-color: #fff;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 150px;
+  height: 150px;
+  line-height: 150px;
+  text-align: center;
+}
+.avatar {
+  width: 150px;
+  height: 150px;
+  display: block;
+}
+</style>
diff --git a/src/pages/discount-coupon/issue/components/template.vue b/src/pages/discount-coupon/issue/components/template.vue
index b90b309..56f6cef 100644
--- a/src/pages/discount-coupon/issue/components/template.vue
+++ b/src/pages/discount-coupon/issue/components/template.vue
@@ -41,7 +41,7 @@
   </div>
 </template>
 <script>
-import { doAdd } from "@/api/discount-coupon/issue.js";
+import { doAdd, doEdit } from "@/api/discount-coupon/management.js";
 export default {
   data() {
     return {
@@ -53,39 +53,61 @@ export default {
     // 切换步骤时传过来的数据
     handleData(form) {
       this.form = Object.assign({}, form);
-      console.log('form', form);
     },
     handleChoose(num) {
       this.choose = num
     },
     // 上一步
     handleLast() {
-      this.$emit('next', 1)
+      this.$emit('next', 1, this.form)
     },
     // 提交
     async handleSubmit() {
       let form = Object.assign({}, this.form);
+      for (let key in form) {
+        // format写法会将null类型强行转化成字符串的‘null’，传到后台，后台会报错，所以需要删掉值为null的字段
+        if (form[key] !== 0 && !form[key]) {
+          delete form[key]
+        }
+        // 前面两个值是我续购拿来用作form校验的，后台是不需要，所以要删掉，否则传过去后台会报错，后面三个数组无法用format传值，会自动被编译成字符串，例：[object object]，后台无法识别，所以需要删掉
+        if (key == 'fixDate' || key == 'imageUrl' || key == 'useStores' || key == 'useProjects' || key == 'fileLists') {
+          delete form[key]
+        }
+      }
+      // 后台接受只要门店编码数组和项目ID数组，map遍历数组分别提取storeNum和projectId的数组
       form.useStoreList = form.useStoreList.map(item => item.storeNum);
       form.projectList = form.projectList.map(item => item.projectId);
+      // 创建一个空对象实例
       let format = new FormData()
+      // 遍历对象将对象中的所有字段和值添加到新的空对象实例中
       Object.keys(form).map(key => {
         format.append(key, form[key])
       })
-      let { code } = await doAdd(format)
+      if (form.id) {
+        // 编辑
+        let { code, message } = await doEdit(format)
+        this.callBack(code, message)
+      } else {
+        // 发布
+        let { code, message } = await doAdd(format)
+        this.callBack(code, message)
+      }
+    },
+    callBack(code, message) {
       if (code == '000000') {
         this.$message({
-          message: '发布成功',
+          message: message,
           type: 'success'
         });
         this.$emit('next', 3)
       }
       if (code == '010000') {
         this.$message({
-          message: '发布失败',
+          message: message,
           type: 'error'
         });
       }
-    },
+    }
   },
 }
 </script>
diff --git a/src/pages/discount-coupon/issue/index.vue b/src/pages/discount-coupon/issue/index.vue
index a04f8ec..2fc5a4f 100644
--- a/src/pages/discount-coupon/issue/index.vue
+++ b/src/pages/discount-coupon/issue/index.vue
@@ -20,6 +20,8 @@
 import Complete from './components/complete'
 import Edit from './components/edit'
 import Templates from './components/template'
+import Bus from "../../bus";
+
 export default {
   name: 'Form',
   components: { Templates, Edit, Complete },
@@ -30,19 +32,52 @@ export default {
     }
   },
   created() {
-
+    if (this.$route.params.id) {
+      this.$nextTick(function () {
+        this.$refs.edit.handleData(this.$route.params)
+      });
+    } else {
+      this.$nextTick(function () {
+        this.$refs.edit.handleData({
+          couponNumber: 1,
+          useStoreList: [],
+          projectList: [],
+        })
+      });
+    }
+  },
+  watch: {
+    $route(to, from) {
+      if (to.fullPath == '/couponIssue' && to.params.id) {
+        this.$nextTick(function () {
+          this.$refs.edit.handleData(to.params)
+        });
+      } else {
+        this.$nextTick(function () {
+          this.$refs.edit.handleData({
+            couponNumber: 1,
+            useStoreList: [],
+            projectList: [],
+          })
+        });
+      }
+    }
   },
   methods: {
     // 下一步/上一步
+    // active=1为填写信息，active=2为预览，active=3为完成
     handleNext(active, form) {
       this.active = active
+      this.form = Object.assign({}, form);
+      // 判断active的值，看目前需要 调用哪个组件的ref值，1=edit，2=templates，3=complete
       let activeName = active == 1 ? 'edit' : active == 2 ? 'templates' : 'complete'
-      if (activeName == 'templates') {
+      // 为了让填写信息和预览这两个步骤来回穿梭而不影响值，将form值来回传递
+      if (activeName == 'templates' || (activeName == 'edit' && this.form)) {
         this.$nextTick(function () {
-          this.$refs[activeName].handleData(form)
+          this.$refs[activeName].handleData(this.form)
         });
       }
-      if (active === 1) {
+      if (active === 1 && !this.form) {
         // 发布后清除选择的文件
         this.$nextTick(function () {
           this.$refs.edit.handleClear()
diff --git a/src/pages/discount-coupon/management/index.vue b/src/pages/discount-coupon/management/index.vue
index 60e76f6..8d4303f 100644
--- a/src/pages/discount-coupon/management/index.vue
+++ b/src/pages/discount-coupon/management/index.vue
@@ -25,6 +25,7 @@
           <el-tag effect="dark" type="danger" v-if="row.state===2">回收</el-tag>
           <el-tag effect="dark" type="success" v-if="row.state===3">审核</el-tag>
           <el-tag effect="dark" type="warning" v-if="row.state===4">反审核</el-tag>
+          <el-tag effect="dark" type="danger" v-if="row.state===11">审核失败</el-tag>
         </template>
       </el-table-column>
       <el-table-column show-overflow-tooltip align="center" min-width="130" prop="couponName" label="优惠券名称"></el-table-column>
@@ -71,22 +72,24 @@
           {{row.shareCommissionRules===0?'固定提成(元)':row.shareCommissionRules===1?'单据金额抽成(%)':''}}
         </template>
       </el-table-column>
-      <el-table-column show-overflow-tooltip align="center" min-width="130" prop="fixedAmount" label="固定提成(元)" sortable></el-table-column>
-      <el-table-column show-overflow-tooltip align="center" min-width="130" prop="orderCommission" label="单据金额抽成(%)"></el-table-column>
-      <el-table-column show-overflow-tooltip align="center" min-width="130" prop="imageUrl" label="活动图片">
+      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="fixedAmount" label="固定提成(元)"></el-table-column>
+      <el-table-column show-overflow-tooltip align="center" min-width="120" prop="orderCommission" label="单据金额抽成(%)"></el-table-column>
+      <el-table-column show-overflow-tooltip align="center" min-width="120" prop="guaranteeMoney" label="保证金" sortable></el-table-column>
+      <el-table-column show-overflow-tooltip align="center" min-width="80" prop="imageUrl" label="活动图片">
         <template #default="{row}">
-          <el-image v-if="row.fileLists.length>0" style="width: 30px; height: 30px" :src="imgPath+row.fileLists[0].filePath+'/'+row.fileLists[0].fileName" :preview-src-list="[imgPath+row.fileLists[0].filePath+'/'+row.fileLists[0].fileName]">
+          <el-image style="width: 30px; height: 30px" :src="imgPath+row.fileLists[0].filePath+'/'+row.fileLists[0].fileName" :preview-src-list="[imgPath+row.fileLists[0].filePath+'/'+row.fileLists[0].fileName]">
           </el-image>
         </template>
       </el-table-column>
-      <el-table-column align="center" min-width="400" label="操作">
+      <el-table-column align="center" min-width="440" label="操作">
         <template #default="{ row, $index }">
-          <el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="primary" size="mini" :disabled="row.state!==0&&row.state!=2&&row.state!=4" @click="handleEdit(row)">编辑</el-button>
           <el-button type="info" size="mini" :disabled="row.state!==0&&row.state!=2&&row.state!=4" @click="handleAudit(row,1)">送审</el-button>
           <el-button type="danger" size="mini" :disabled="row.state!=1" @click="handleAudit(row,2)">回收</el-button>
           <el-button type="success" size="mini" :disabled="row.state!=1" @click="handleAudit(row,3)">审核</el-button>
           <el-button type="warning" size="mini" :disabled="row.state!=3" @click="handleAudit(row,4)">反审核</el-button>
-          <el-button type="primary" size="mini" @click="handleRemit(row,5)">打款</el-button>
+          <el-button type="primary" size="mini" :disabled="row.state!=3" @click="handleRemit(row,5)">打款</el-button>
+          <el-button type="danger" size="mini" :disabled="row.state!=3" @click="handleRemit(row,5)">退款</el-button>
           <!-- <el-button type="primary" size="mini">增量</el-button>
           <el-button type="warning" size="mini">作废</el-button>
           <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button> -->
@@ -102,6 +105,8 @@
 import Verification from './components/verification';
 import { getList, doDelete, doAudit } from "@/api/discount-coupon/management.js";
 import { partten } from "@/utils/partten/index.js";
+import Bus from "../../bus";
+
 export default {
   name: 'management',
   components: { Verification },
@@ -125,6 +130,10 @@ export default {
   created() {
     this.imgPath = partten.imagePath
     this.fetchData()
+    // 发布、编辑完成
+    Bus.$on("issueComplete", () => {
+      this.fetchData()
+    });
   },
   methods: {
     // ========================== 查询 ========================== //
@@ -156,7 +165,8 @@ export default {
     // ========================== 其它 ========================== //
     // 编辑
     handleEdit(row) {
-      this.$router.push({ path: '/couponIssue', params: row })
+      // Bus.$emit("/couponIssue", row)
+      this.$router.push({ name: 'CouponIssue', params: row })
     },
     // 查询所有领取人
     handleGoter(row) {
@@ -177,6 +187,9 @@ export default {
         this.$message.success(state === 1 ? '送审成功' : state === 2 ? '回收成功' : state === 3 ? '审核成功' : state === 4 ? '反审核成功' : message)
         this.fetchData()
       }
+      if (code == '010000') {
+        this.$message.error(message)
+      }
     },
     // 打款
     handleRemit() { },
diff --git a/src/router/index.js b/src/router/index.js
index 7896caf..b5b0931 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -784,6 +784,7 @@ const router = new VueRouter({
         },
         {
           path: "/couponIssue",
+          name: "CouponIssue",
           component: () => import("../pages/discount-coupon/issue/index.vue"),
           meta: {
             title: "发布",
@@ -792,6 +793,7 @@ const router = new VueRouter({
         },
         {
           path: "/couponMane",
+          name: "CouponMane",
           component: () => import("../pages/discount-coupon/management/index.vue"),
           meta: {
             title: "管理",
diff --git a/src/utils/rem.js b/src/utils/rem.js
index 0bf4332..c6bbc5c 100644
--- a/src/utils/rem.js
+++ b/src/utils/rem.js
@@ -12,6 +12,6 @@ function setRem() {
 // 初始化
 setRem();
 // 改变窗口大小时重新设置 rem
-window.onresize = function() {
+window.onresize = function () {
   setRem();
 };