发送优惠券备注信息

src/pages/coupon/index.vue

@@ -10,19 +10,8 @@
       ></el-input>
       <div class="search-button" @click="getUserList">搜索</div>
       <div class="coupon">选择优惠券</div>
-      <el-select
-        class="coupon-select"
-        v-model="coupon"
-        size="mini"
-        filterable
-        placeholder="选择优惠券"
-      >
-        <el-option
-          v-for="item in couponList"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id"
-        ></el-option>
+      <el-select class="coupon-select" v-model="coupon" size="mini" filterable placeholder="选择优惠券">
+        <el-option v-for="item in couponList" :key="item.id" :label="item.name" :value="item.id"></el-option>
       </el-select>
       <div class="num-tips">数量</div>
       <div class="coupon-num">
@@ -30,9 +19,7 @@
         <div class="num">{{ couponNum }}</div>
         <div class="add" @click="couponNum++">+</div>
       </div>
-      <div class="send-coupon" style="margin-left: 39px" @click="sendCoupon">
-        发送
-      </div>
+      <div class="send-coupon" style="margin-left: 39px" @click="sendCoupon">发送</div>
     </div>
     <div class="user-list">
       <el-table
@@ -52,26 +39,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column
-          prop="id"
-          label="用户ID"
-          width="120"
-        ></el-table-column>
-        <el-table-column
-          prop="nickname"
-          label="昵称"
-          width="120"
-        ></el-table-column>
-        <el-table-column
-          prop="mobile"
-          label="联系电话"
-          show-overflow-tooltip
-        ></el-table-column>
-        <el-table-column
-          prop="create_time"
-          label="注册时间"
-          show-overflow-tooltip
-        ></el-table-column>
+        <el-table-column prop="id" label="用户ID" width="120"></el-table-column>
+        <el-table-column prop="nickname" label="昵称" width="120"></el-table-column>
+        <el-table-column prop="mobile" label="联系电话" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="create_time" label="注册时间" show-overflow-tooltip></el-table-column>
       </el-table>
 
       <div class="pagin">
@@ -85,14 +56,33 @@
         ></el-pagination>
       </div>
     </div>
+    <!-- 发送优惠券 -->
+    <minePop :show="isCouponPop">
+      <div class="CouponPop">
+        <div class="image" @click="isCouponPop=false">
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+            alt
+          />
+        </div>
+        <div class="title">发送优惠券</div>
+        <div class="couponRemark">
+          <div class="one">备注信息:</div>
+          <el-input v-model.trim="couponRemark"></el-input>
+        </div>
+        <div class="radio">
+          <button class="affirmBtn" @click="checkCoupon">确定</button>
+        </div>
+      </div>
+    </minePop>
   </div>
 </template>
 
 <script>
 import api from "../../server/home";
-
+import minePop from "../../components/minePupop/index.vue";
 export default {
-  components: {},
+  components: { minePop },
   data() {
     return {
       searckItem: "",
@@ -104,6 +94,8 @@ export default {
       currentPage1: 1,
       total: 0,
       limit: 10,
+      isCouponPop: false, //发送优惠券开关
+      couponRemark: "" //发送优惠券备注信息
     };
   },
   computed: {},
@@ -115,8 +107,8 @@ export default {
       this.$router.push({
         path: "/customerMan/details",
         query: {
-          id: row.id,
-        },
+          id: row.id
+        }
       });
     },
     reduceNum() {
@@ -127,6 +119,10 @@ export default {
     },
     // 发送优惠券
     sendCoupon() {
+      this.isCouponPop = true;
+    },
+    // 确认发送优惠券
+    checkCoupon() {
       let selectIds = "";
       for (let i = 0; i < this.multipleSelection.length; i++) {
         selectIds = selectIds + "," + this.multipleSelection[i].id;
@@ -135,28 +131,29 @@ export default {
         id: this.coupon,
         user_ids: selectIds.substring(1, selectIds.length),
         num: this.couponNum,
+        remark:this.couponRemark
       };
-      api.sendCoupon(params).then((res) => {
+      api.sendCoupon(params).then(res => {
         if (res.code == 200) {
+          this.isCouponPop = false
           this.$message({
             message: "发送成功",
-            type: "success",
+            type: "success"
           });
         }
       });
     },
-
     // 获取订单列表
     getUserList() {
       let params = {
         page: this.currentPage1,
         limit: this.limit,
-        keywords: this.searckItem,
+        keywords: this.searckItem
       };
-      api.getUserList(params).then((res) => {
+      api.getUserList(params).then(res => {
         if (res.code == 200) {
           // 将用户手机号中间四位变成****
-          res.data.list.map((item) => {
+          res.data.list.map(item => {
             item.mobile =
               item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
           });
@@ -170,9 +167,9 @@ export default {
     getCouponInfo() {
       let params = {
         page: this.currentPage1,
-        limit: 100,
+        limit: 100
       };
-      api.getCouponInfo(params).then((res) => {
+      api.getCouponInfo(params).then(res => {
         if (res.code == 200) {
           this.couponList = res.data.list;
         }
@@ -184,7 +181,7 @@ export default {
       this.getUserList();
     },
 
-    handleSizeChange(val) {},
+    handleSizeChange(val) {}
   },
 
   created() {
@@ -192,7 +189,7 @@ export default {
     this.getCouponInfo();
   },
 
-  mounted() {},
+  mounted() {}
 };
 </script>
 
@@ -290,5 +287,61 @@ export default {
       border-bottom: none;
     }
   }
+  // 发送优惠券弹窗
+  // 核销优惠券
+  .CouponPop {
+    width: 440px;
+    height: 230px;
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 15px;
+    .image {
+      height: 30px;
+      width: 30px;
+      img {
+        width: 100%;
+      }
+    }
+    .title {
+      text-align: center;
+      font-weight: 700;
+      font-size: 16px;
+      margin-bottom: 30px;
+    }
+    .couponRemark {
+      display: flex;
+      align-items: center;
+      .one {
+        margin-right: 22px;
+        font-weight: 600;
+        width: 90px;
+      }
+      .el-input {
+        width: 300px;
+        /deep/.el-input__inner:focus {
+          // el-input输入时设置边框颜色
+          border: #fa7d22 1px solid;
+        }
+      }
+    }
+    .radio {
+      width: 100%;
+      display: flex;
+      justify-content: space-evenly;
+      button {
+        width: 176px;
+        height: 28px;
+        border-radius: 14px;
+        background-color: #fff;
+        border: none;
+        margin-top: 50px;
+      }
+      .affirmBtn {
+        background-color: #fa7d22;
+        color: #fff;
+        margin-left: 15px;
+      }
+    }
+  }
 }
 </style>