创建盲票组新增券包奖品

src/views/business/ticket/components/AwardsList.vue

@@ -33,6 +33,7 @@
               <template slot-scope="scope">
                 <div v-if="scope.row.prizeType == 'goods'">商品</div>
                 <div v-if="scope.row.prizeType == 'coupon'">券</div>
+                <div v-if="scope.row.prizeType == 'coupon_pkg'">券包</div>
                 <div v-if="scope.row.prizeType == 'coin'">盲豆</div>
               </template>
             </el-table-column>
@@ -81,6 +82,7 @@
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item command="goods">商品</el-dropdown-item>
               <el-dropdown-item command="coupon">券</el-dropdown-item>
+              <el-dropdown-item command="coupon_pkg">券包</el-dropdown-item>
               <el-dropdown-item command="coin">盲豆</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
@@ -182,13 +184,6 @@ export default {
     // 选择奖品种类
     handleCommand(e, index) {
       this.prizeIndex = index;
-      if (e == "goods") {
-        this.goodsTableVisible = true;
-      } else if (e == "coupon") {
-        this.couponTableVisible = true;
-      } else if (e == "coin") {
-        this.coinTableVisible = true;
-      }
       this.$emit('handleCommand', e)
     },
     

src/views/business/ticket/components/CouponPkgAdd.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <el-dialog
+      title="添加券包奖品"
+      width="1000px"
+      :visible.sync="dialogVisible"
+      :before-close="close"
+    >
+      <div class="dialog-search">
+        <div>券名称：</div>
+        <el-input
+          v-model="title"
+          placeholder="请输入券包名称"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="getCouponList"
+        />
+        <div class="ge"></div>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="getCouponList"
+          >查询</el-button
+        >
+      </div>
+      <el-table
+        v-loading="loading"
+        :data="couponList"
+        @selection-change="handleSelectionCouponPkg"
+        class="el-table"
+      >
+        <el-table-column
+          type="selection"
+          width="55"
+          align="center"
+          fixed="left"
+        />
+        <el-table-column label="券包编号" prop="id" />
+        <el-table-column label="券包名称" prop="title" min-width="85" />
+        <el-table-column label="优惠券数量" prop="couponNum" />
+        <el-table-column label="总面值" min-width="85">
+          <template slot-scope="scope">
+            <div>￥{{ $numberFormat(scope.row.facePrice) }}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="couponPkgTotal > 0"
+        :total="couponPkgTotal"
+        :page.sync="pageParams.pageNum"
+        :limit.sync="pageParams.pageSize"
+        @pagination="getCouponList"
+      />
+      <div class="dialog-btn">
+        <el-button size="small" @click="close"> 取 消 </el-button>
+        <div class="ge"></div>
+        <el-button type="primary" size="small" @click="confirmCouponPkg">
+          确 认
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { publicFileGetUrl } from "@/api/common";
+import { getCouponList } from "@/api/business/couponPkg";
+export default {
+  name: "CouponAdd",
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      title: "", // 券包名称
+      couponList: [], // 券包列表
+      couponPkgTotal: 0, // 券包总数
+      selectCouponPkgList: [], // 选中券包
+      pageParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+    };
+  },
+  created() {
+    this.getCouponList();
+  },
+  methods: {
+    // 券包列表
+    getCouponList() {
+      this.loading = true;
+      getCouponList(
+        "pageNum=" +
+          this.pageParams.pageNum +
+          "&pageSize=" +
+          this.pageParams.pageSize +
+          "&",
+        { title: this.title, status: 1 }
+      ).then((res) => {
+        this.couponList = res.rows
+        this.couponPkgTotal = res.total;
+        this.loading = false;
+      });
+    },
+
+    // 选中券包
+    handleSelectionCouponPkg(e) {
+      this.selectCouponPkgList = e.map((item) => {
+        return {
+          prizeType: "coupon_pkg",
+          // quantity: 1,
+          id: item.id,
+          picUrl: publicFileGetUrl + item.picUrl,
+          title: item.title,
+          sortWeight: 100
+        };
+      });
+    },
+
+    // 确认选中券包
+    confirmCouponPkg() {
+      this.$emit("confirmCouponPkg", this.selectCouponPkgList);
+    },
+
+    close() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.dialog-search {
+  display: flex;
+  line-height: 32px;
+  margin-bottom: 20px;
+  .ge {
+    width: 40px;
+  }
+}
+.dialog-btn {
+  display: flex;
+  align-content: center;
+  justify-content: flex-end;
+  padding: 40px 0 0;
+  .ge {
+    width: 40px;
+  }
+}
+</style>

src/views/business/ticket/create.vue

@@ -145,6 +145,8 @@
     <goods-add :dialog-visible="goodsTableVisible" @close="close" @confirmGoods="confirmGoods" v-if="goodsTableVisible" />
     <!-- 添加券 -->
     <coupon-add :dialog-visible="couponTableVisible" @close="close" @confirmCoupon="confirmCoupon" v-if="couponTableVisible" />
+    <!-- 添加券包 -->
+    <coupon-pkg-add :dialog-visible="couponPkgTableVisible" @close="close" @confirmCouponPkg="confirmCouponPkg" v-if="couponPkgTableVisible" />
     <!-- 添加盲豆 -->
     <coin-add :dialog-visible="coinTableVisible" @close="close" @confirmCoin="confirmCoin" v-if="coinTableVisible" />
   </div>
@@ -158,6 +160,7 @@ import { accMul, accDiv } from "@/utils/util";
 import AwardsList from "./components/AwardsList"
 import GoodsAdd from "./components/GoodsAdd"
 import CouponAdd from "./components/CouponAdd"
+import CouponPkgAdd from "./components/CouponPkgAdd"
 import CoinAdd from "./components/CoinAdd"
 export default {
   name: "TicketCreate",
@@ -166,6 +169,7 @@ export default {
     AwardsList,
     GoodsAdd,
     CouponAdd,
+    CouponPkgAdd,
     CoinAdd,
   },
   data() {
@@ -266,6 +270,7 @@ export default {
       goodsTableVisible: false, // 添加商品弹框
       couponTitle: "", // 券名称
       couponTableVisible: false, // 添加卡券弹框
+      couponPkgTableVisible: false, // 添加券包弹框
       coinTableVisible: false, // 添加盲豆弹框
       pageParams: {
         pageNum: 1,
@@ -379,7 +384,7 @@ export default {
             item.prizeList = item.prizeList.map((ele) => {
               return {
                 ...ele,
-                refId: ele.goodsId || ele.couponId,
+                refId: ele.goodsId || ele.couponId || ele.id,
                 prizeType: ele.prizeType,
                 quantity: ele.quantity,
                 value: Number(ele.coinValue),
@@ -416,7 +421,6 @@ export default {
             background: "rgba(0, 0, 0, 0.4)",
           });
 
-
           request(data)
             .then((res) => {
               loading.close();
@@ -440,6 +444,7 @@ export default {
     close() {
       this.goodsTableVisible = false;
       this.couponTableVisible = false;
+      this.couponPkgTableVisible = false;
       this.coinTableVisible = false;
     },
 
@@ -449,6 +454,8 @@ export default {
         this.goodsTableVisible = true;
       } else if (e == "coupon") {
         this.couponTableVisible = true;
+      } else if (e == "coupon_pkg") {
+        this.couponPkgTableVisible = true;
       } else if (e == "coin") {
         this.coinTableVisible = true;
       }
@@ -464,6 +471,11 @@ export default {
       this.$refs.awards.add(1, arr)
     },
 
+    // 确认选中券包
+    confirmCouponPkg(arr) {;
+      this.$refs.awards.add(1, arr)
+    },
+
     // 确认输入盲豆
     confirmCoin(obj) {
       this.$refs.awards.add(2, obj)

src/views/business/ticket/detail.vue

@@ -82,6 +82,7 @@
               <template slot-scope="{ row }">
                 <div v-if="row.prizeType.value == 'goods'">商品</div>
                 <div v-if="row.prizeType.value == 'coupon'">券</div>
+                <div v-if="row.prizeType.value == 'coupon_pkg'">券包</div>
                 <div v-if="row.prizeType.value == 'coin'">盲豆</div>
               </template>
             </el-table-column>