结合关注公众号

src/api/weixin/index.js

@@ -28,3 +28,25 @@ export function getQrCode(data) {
     responseType: "blob"
   });
 }
+// 通过后台过去公众号图片
+export function getJavaQrCode(data) {
+  return service({
+    url: "/api" + "/platformCoupon/thePublic",
+    method: "post",
+    responseType: "blob"
+  });
+}
+// 通过后台获取用户扫描的openid
+export function getJavaOpenid(data) {
+  return service({
+    url: "/api" + "/platformCoupon/openid",
+    method: "post",
+  });
+}
+// 清除后台获取的openid
+export function doDeleteJavaOpenid(data) {
+  return service({
+    url: "/api" + "/platformCoupon/gcopenid",
+    method: "post",
+  });
+}

src/main.js

@@ -41,7 +41,8 @@ Vue.use(animated);
 Vue.use(vueEsign);
 
 import {
-  thousands
+  thousands,
+  parseTime
 } from '@/utils/index.js'
 // 引入高精度精算
 import {
@@ -49,6 +50,7 @@ import {
 } from 'decimal.js'
 // 全局定义
 Vue.prototype.$Decimal = Decimal
+Vue.prototype.$parseTime = parseTime
 
 import Vue from "vue";
 import Router from "vue-router";

src/pages/discount-coupon/issue/components/edit.vue

@@ -101,6 +101,8 @@
     </el-row>
     <Store ref="Store" @call-back-store="callBackStore"></Store>
     <Project ref="Project" @call-back-project="callBackProject"></Project>
+    <!-- <QrCode ref="QrCode"></QrCode> -->
+
   </div>
 </template>
 
@@ -110,10 +112,10 @@ import Tencent from './Tencent'
 import Store from '@/components/mulStore/index'
 import Project from '@/components/mulProject/index'
 import { partten } from "@/utils/partten/index.js";
-import { getAccessToken, getTicket, getQrCode } from "@/api/weixin/index.js";
+import QrCode from "./qrCode";
 export default {
   name: 'Form',
-  components: { ActiveImg, Tencent, Store, Project },
+  components: { ActiveImg, Tencent, Store, Project, QrCode },
   data() {
     return {
       form: {
@@ -184,36 +186,14 @@ export default {
     }
   },
   created() {
-    this.fetchAccessToken()
+    // this.fetchAccessToken()
   },
   methods: {
-    // ============================== 查询 ============================== //
+
-    // 获取微信公众号access_token
-    fetchAccessToken() {
-      getAccessToken().then(res => {
-        console.log('access_token', res);
-        if (res.expires_in == 7200) {
-          this.fetchTicket(res.access_token)
-        }
-      })
-    },
-    // 根据微信公众号access_token获取ticket
-    fetchTicket(data) {
-      getTicket(data, { "expire_seconds": 1800, "action_name": "QR_SCENE", "action_info": { "scene": { "scene_id": 1800 } } }).then(res => {
-        console.log('ticket', res);
-        this.fetchQrCode(res.ticket)
-      })
-    },
-    // 通过ticket换取二维码
-    fetchQrCode(data) {
-      getQrCode(data).then(res => {
-        console.log('QrCode', window.URL.createObjectURL(res));
-        this.qrCode = window.URL.createObjectURL(res)
-      })
-    },
     // ============================== 操作 ============================== //
     // 编辑
     handleData(row) {
+      console.log('row', row);
       // 判断传过来的值中时候有id来判断当前是新增的还是编辑的数据，有id的为编辑数据
       if (row.id) {
         // 从管理页面过来useStoreList和projectList空所以取的是useStores和useProjects中的值，如果是从预览页面，即步骤2过来的就直接取useStoreList和projectList中的值
@@ -223,6 +203,9 @@ export default {
         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]);
+
+      }
+      if (row.imageUrl) {
         // 展示图片，因为一开始展示页面，当前页面的子组件也是刚加载无法立马使用this.$refs获取，需要用this.$nextTick来过度一下
         this.$nextTick(function () {
           this.$refs.activeImg.show(row.imageUrl)

src/pages/discount-coupon/issue/components/qrCode.vue

@@ -0,0 +1,126 @@
+<template>
+  <el-dialog title="公众号二维码" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="400px" @close="close" v-dialogDrag>
+    <div class="box" style="width: 400px; height: 400px;  background-color: #FFF;">
+      <el-image style="width: 100%; height: 100%" :src="qrCode" fit="fill" v-if="codeNumber===1"></el-image>
+      <div class="img" v-if="codeNumber===2||codeNumber===3">
+        <img style="width:100px; height: 100px;" src="../../../../../image/check.png" fit="fill" v-if="codeNumber===2&&openid"></img>
+        <img style="width:100px; height: 100px;" src="../../../../../image/close.png" fit="fill" v-if="codeNumber===3"></img>
+        <div class="title">{{codeNumber===2?'扫码关注成功':'二维码失效'}}</div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+var getOpenid = null;
+import { getAccessToken, getTicket, getQrCode, getJavaQrCode, getJavaOpenid, doDeleteJavaOpenid } from "@/api/weixin/index.js";
+export default {
+  name: 'qrCode',
+  data() {
+    return {
+      qrCode: '',
+      openid: '',
+      dialogFormVisible: false,
+      codeNumber: 1//1为刚打开弹窗，2为扫码成功/关注成功，3为超时
+    }
+  },
+  created() {
+    // this.fetchJavaQrCode()
+  },
+  methods: {
+    // ============================ 弹窗 ============================ //
+    show(row) {
+      let that = this
+      this.codeNumber = 1
+      this.openid = ''
+      this.dialogFormVisible = true
+      this.handleDeleteJavaOpenid()
+      setTimeout(() => {
+        that.codeNumber = 3
+      }, 600000);
+    },
+    close() {
+      this.qrCode = ''
+      this.openid = ''
+      this.dialogFormVisible = false
+    },
+    // ============================== 查询 ============================== //
+    // 通过后台获取公众号图片
+    fetchJavaQrCode() {
+      let that = this
+      getJavaQrCode().then(res => {
+        this.qrCode = window.URL.createObjectURL(res)
+        getOpenid = setInterval(() => {
+          that.fetchJavaOpenid()
+        }, 5000);
+      })
+    },
+    // 通过后台获取用户扫描的openid
+    fetchJavaOpenid() {
+      getJavaOpenid().then(res => {
+        if (res.data[0]) {
+          this.codeNumber = 2
+          this.openid = res.data[0]
+          this.$emit('call-back-qrCode', res.data[0]);
+          clearInterval(getOpenid)
+        }
+      })
+    },
+    // 清除后台获取的openid
+    handleDeleteJavaOpenid() {
+      doDeleteJavaOpenid().then(res => {
+        if (res.code == '000000') {
+          this.fetchJavaQrCode()
+        }
+      })
+    },
+    // 获取微信公众号access_token
+    // fetchAccessToken() {
+    //   getAccessToken().then(res => {
+    //     if (res.expires_in == 7200) {
+    //       this.fetchTicket(res.access_token)
+    //     }
+    //   })
+    // },
+    // 根据微信公众号access_token获取ticket
+    // fetchTicket(data) {
+    //   getTicket(data, { "expire_seconds": 1800, "action_name": "QR_SCENE", "action_info": { "scene": { "scene_id": 1800 } } }).then(res => {
+    //     this.fetchQrCode(res.ticket)
+    //   })
+    // },
+    // 通过ticket换取二维码
+    // fetchQrCode(data) {
+    //   getQrCode(data).then(res => {
+    //     this.qrCode = window.URL.createObjectURL(res)
+    //   })
+    // },
+  },
+}
+</script>
+<style>
+.el-dialog .el-dialog__body {
+  padding: 0 !important;
+}
+</style>
+<style scoped>
+.box {
+  position: relative;
+}
+.img {
+  position: absolute;
+  top: 27px;
+  left: 27px;
+  width: 346px;
+  height: 346px;
+  background-color: #808080;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.title {
+  font-size: 28px;
+  color: #fff;
+  margin-top: 30px;
+}
+</style>

src/pages/discount-coupon/issue/components/styles/template.css

@@ -25,6 +25,7 @@
   /* margin-bottom: 30px; */
   padding: 13px;
   background-color: #f8f8f8;
+  overflow-y: auto;
 }
 .container .box .box-item > .item .image {
   height: 250px;
@@ -61,11 +62,41 @@
   margin-bottom: 10px;
 }
 .container .box .box-item > .item .tips .tips_msg .tips_msg_item {
-  color: #000;
+  line-height: 20px;
-  line-height: 18px;
   display: flex;
 }
-.container .box .box-item > .item .tips .tips_msg .tips_msg_item .bot {
+.container
+  .box
+  .box-item
+  > .item
+  .tips
+  .tips_msg
+  .tips_msg_item
+  .tips_msg_item_title {
+  width: 64px;
+  color: #666;
+}
+.container
+  .box
+  .box-item
+  > .item
+  .tips
+  .tips_msg
+  .tips_msg_item
+  .tips_msg_item_content {
+  width: 210px;
+}
+.tips .tips_msg .tips_msg_item .tips_msg_item_titles {
+  width: 30px;
+}
+.tips .tips_msg .tips_msg_item .tips_msg_item_titles .bot {
+  width: 8px;
+  height: 8px;
+  background-color: #fc9c24;
+  margin-top: 6px;
+  border-radius: 50%;
+}
+/* .container .box .box-item > .item .tips .tips_msg .tips_msg_item .bot {
   width: 25px;
   padding-top: 6px;
 }
@@ -75,4 +106,4 @@
   border-radius: 50%;
   background-color: #fc9c24;
   line-height: 18px;
-}
+} */

src/pages/discount-coupon/issue/components/template.vue

@@ -14,13 +14,67 @@
                 <div class="item">分享</div>
               </div>
               <div class="tips">
-                <div class="tips_title">风险提示</div>
+                <div class="tips_title">优惠规则！</div>
                 <div class="tips_msg">
+                  <!-- 优惠金额 -->
                   <div class="tips_msg_item">
-                    <div class="bot">
+                    <div class="tips_msg_item_title">优惠金额：</div>
-                      <div></div>
+                    <div class="tips_msg_item_content" v-if="form.couponType===0">
+                      {{form.serviceConditions===0?`满${form.fullReductionMoney}元减${form.fullKimsMoney}元`:`${form.fullKimsMoney}元无门槛代金券`}}
+                    </div>
+                    <div class="tips_msg_item_content" v-if="form.couponType===1">
+                      {{form.serviceConditions===0?`消费单据满${form.fullReductionMoney}元打${form.fullDiscountMoney}%折扣`:`${form.fullDiscountMoney}无门槛折扣券`}}
+                    </div>
+                    <div class="tips_msg_item_content" v-if="form.couponType===2">直接免单</div>
+                  </div>
+                  <!-- 分润金额 -->
+                  <div class="tips_msg_item">
+                    <div class="tips_msg_item_title">分润金额：</div>
+                    <div class="tips_msg_item_content" v-if="form.shareCommissionRules===0">
+                      每一位领取人消费后可获得{{form.fixedAmount}}元分润，可提现至微信</div>
+                    <div class="tips_msg_item_content" v-if="form.shareCommissionRules===1">
+                      每一位领取人消费后可获得消费单据的{{form.orderCommission}}%分润，可提现至微信</div>
+                  </div>
+                  <!-- 有效日期 -->
+                  <div class="tips_msg_item">
+                    <div class="tips_msg_item_title">有效日期：</div>
+                    <div class="tips_msg_item_content" v-if="form.indateType===1">
+                      {{date.startDate}} 至 {{date.endDate}}
+                    </div>
+                    <div class="tips_msg_item_content" v-if="form.indateType===0">
+                      领取后{{form.startDay}}天生效,生效后{{form.endDay}}天内有效</div>
+                  </div>
+                  <!-- 适用门店 -->
+                  <div class="tips_msg_item">
+                    <div class="tips_msg_item_title">适用门店：</div>
+                    <div class="tips_msg_item_content">{{form.suitableStore===0?'所有门店':storeList}}
+                    </div>
+                  </div>
+                  <!-- 适用项目 -->
+                  <div class="tips_msg_item">
+                    <div class="tips_msg_item_title">适用项目：</div>
+                    <div class="tips_msg_item_content">{{form.suitableProject===0?'所有项目':projectList}}
                     </div>
-                    <div class="tips_msg_item_content">请先点击领取优惠券后再分享，否则分享出去的优惠券领取人消费后的分润不属于您！</div>
+                  </div>
+                </div>
+              </div>
+              <div class="tips">
+                <div class="tips_title">风险提示！</div>
+                <div class="tips_msg">
+                  <div class="tips_msg_item">
+                    <div class="tips_msg_item_titles">
+                      <div class="bot"></div>
+                    </div>
+                    <div class="tips_msg_item_contents" v-if="form.shareCommissionRules===0">
+                      分享被领取后，且优惠券被领取人消费了，即可获得{{form.fixedAmount}}元分润金额，并且可提现到微信</div>
+                    <div class="tips_msg_item_contents" v-if="form.shareCommissionRules===1">
+                      分享被领取后，且优惠券被领取人消费了，即可获得消费单据的{{form.orderCommission}}%分润金额，并且可提现到微信</div>
+                  </div>
+                  <div class="tips_msg_item">
+                    <div class="tips_msg_item_titles">
+                      <div class="bot"></div>
+                    </div>
+                    <div class="tips_msg_item_contents">需要先领取优惠券后再分享，这样其他扔领取了您分享的优惠券并消费后才会获得分润，否则无法获得分润</div>
                   </div>
                 </div>
               </div>
@@ -37,23 +91,37 @@
         </div>
       </el-col>
     </el-row>
+    <QrCode ref="QrCode" @call-back-qrCode="callBackQrCode"></QrCode>
   </div>
 </template>
 <script>
 import { doAdd, doEdit } from "@/api/discount-coupon/management.js";
 import Bus from "../../../bus";
+import QrCode from "./qrCode";
 export default {
+  components: { QrCode },
   data() {
     return {
       imageUrl: '',
-      form: {}
+      form: {},
+      date: {},
+      storeList: [],
+      projectList: [],
     }
   },
   methods: {
     // 切换步骤时传过来的数据
     handleData(form) {
-      console.log('form', form);
       this.imageUrl = form.imageUrl
+      this.date.startDate = this.$parseTime(form.startDate, '{y}-{m}-{d}')
+      this.date.endDate = this.$parseTime(form.endDate, '{y}-{m}-{d}')
+      if (form.suitableStore === 1) {
+        this.storeList = form.useStoreList.map(item => item.storeName).toString()
+        console.log('useStoreList', this.useStoreList);
+      }
+      if (form.suitableProject === 1) {
+        this.projectList = form.projectList.map(item => item.projectName).toString()
+      }
       this.form = Object.assign({}, form);
     },
     // 上一步
@@ -62,6 +130,7 @@ export default {
     },
     // 提交
     async handleSubmit() {
+      if (this.form.openId) {
         let form = Object.assign({}, this.form);
         for (let key in form) {
           // format写法会将null类型强行转化成字符串的‘null’，传到后台，后台会报错，所以需要删掉值为null的字段
@@ -74,8 +143,12 @@ export default {
           }
         }
         // 后台接受只要门店编码数组和项目ID数组，map遍历数组分别提取storeNum和projectId的数组
+        if (form.suitableStore === 1) {
           form.useStoreList = form.useStoreList.map(item => item.storeNum);
+        }
+        if (form.suitableProject === 1) {
           form.projectList = form.projectList.map(item => item.projectId);
+        }
         // 创建一个空对象实例
         let format = new FormData()
         // 遍历对象将对象中的所有字段和值添加到新的空对象实例中
@@ -91,6 +164,9 @@ export default {
           let { code, message } = await doAdd(format)
           this.callBack(code, message)
         }
+      } else {
+        this.$refs.QrCode.show()
+      }
     },
     callBack(code, message) {
       if (code == '000000') {
@@ -107,6 +183,12 @@ export default {
           type: 'error'
         });
       }
+    },
+    // ================================== 关注公众号后返回openid ================================== //
+    callBackQrCode(openid) {
+      let form = Object.assign({}, this.form);
+      form.openId = openid
+      this.form = Object.assign({}, form);
     }
   },
 }

src/pages/discount-coupon/management/index.vue

@@ -27,6 +27,13 @@
           <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>
           <el-tag effect="dark" type="danger" v-if="row.state===12">退款中</el-tag>
+          <el-tag effect="dark" type="success" v-if="row.state===5">打款待审</el-tag>
+          <el-tag effect="dark" type="success" v-if="row.state===6">通过</el-tag>
+          <el-tag effect="dark" type="danger" v-if="row.state===11">不通过</el-tag>
+          <el-tag type="danger" v-if="row.state===7">反审核</el-tag>
+          <el-tag effect="dark" type="success" v-if="row.state===8">已发布</el-tag>
+          <el-tag effect="dark" type="warning" v-if="row.state===9">已回收</el-tag>
+          <el-tag effect="dark" type="success" v-if="row.state===10">已关闭</el-tag>
         </template>
       </el-table-column>
       <el-table-column show-overflow-tooltip align="center" min-width="130" prop="couponName" label="优惠券名称"></el-table-column>