完成创建盲票组

src/api/business/ticket.js

@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+// 盲票列表
+export function getTicketList(urlParams, data) {
+    return request({
+      url: '/api/v1/mp/admin/ticket/box/list',
+      method: 'post',
+      data,
+      urlParams
+    })
+  }
+
+// 创建盲票组
+export function ticketBoxCreate(data) {
+    return request({
+      url: '/api/v1/mp/admin/ticket/box/create',
+      method: 'post',
+      data
+    })
+  }

src/views/business/ticket/create.vue

@@ -125,18 +125,25 @@
               </template>
             </el-table-column>
             <el-table-column label="奖品名称" prop="title" />
-            <el-table-column label="奖品类型" prop="storeName">
-              <template slot-scope="scope"> </template>
+            <el-table-column label="奖品类型">
+              <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 == 'coin'">盲豆</div>
+              </template>
             </el-table-column>
             <el-table-column label="奖品数量" prop="storeName">
               <template slot-scope="scope">
-                <el-input-number
-                  v-model="num"
-                  controls-position="right"
-                  @change="handleChange"
-                  :min="1"
-                  size="small"
-                ></el-input-number>
+                <div>
+                  <el-input-number
+                    v-model="scope.row.quantity"
+                    controls-position="right"
+                    @change="handleChange($event, index)"
+                    :min="1"
+                    :max="100"
+                    size="small"
+                  ></el-input-number>
+                </div>
               </template>
             </el-table-column>
             <el-table-column label="操作" align="center">
@@ -184,19 +191,19 @@
       <div class="dialog-search">
         <div>商品名称：</div>
         <el-input
-          v-model="name"
+          v-model="goodsTitle"
           placeholder="请输入盲票组名称"
           clearable
           size="small"
           style="width: 240px"
-          @keyup.enter.native="handleQuery"
+          @keyup.enter.native="handleQueryGoods"
         />
         <div class="ge"></div>
         <el-button
           type="primary"
           icon="el-icon-search"
           size="mini"
-          @click="handleQuery"
+          @click="handleQueryGoods"
           >查询</el-button
         >
       </div>
@@ -215,19 +222,21 @@
         <el-table-column label="商品ID" prop="goodsId" />
         <el-table-column label="商品图片">
           <template slot-scope="scope">
-            <el-image
-              style="width: 100px; height: 100px"
-              :src="scope.row.picUrl"
-              :preview-src-list="[scope.row.picUrl]"
-            >
-            </el-image>
+            <div>
+              <el-image
+                style="width: 100px; height: 100px"
+                :src="scope.row.picUrl"
+                :preview-src-list="[scope.row.picUrl]"
+              >
+              </el-image>
+            </div>
           </template>
         </el-table-column>
         <el-table-column label="商品名称" prop="title" min-width="85" />
 
         <el-table-column label="商品价格" min-width="85">
           <template slot-scope="scope">
-            ￥{{ $numberFormat(scope.row.exchangePrice) }}
+            <div>￥{{ $numberFormat(scope.row.exchangePrice) }}</div>
           </template>
         </el-table-column>
         <el-table-column label="商品库存" prop="quantity" width="80" />
@@ -247,17 +256,130 @@
         </el-button>
       </div>
     </el-dialog>
+    <!-- 添加卡券 -->
+    <el-dialog
+      title="添加代金券奖品"
+      width="1000px"
+      :visible.sync="couponTableVisible"
+      :before-close="close"
+    >
+      <div class="dialog-search">
+        <div>代金券名称：</div>
+        <el-input
+          v-model="couponTitle"
+          placeholder="请输入代金券名称"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQueryCoupon"
+        />
+        <div class="ge"></div>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQueryCoupon"
+          >查询</el-button
+        >
+      </div>
+      <el-table
+        v-loading="loading"
+        :data="couponList"
+        @selection-change="handleSelectionCoupon"
+        class="el-table"
+      >
+        <el-table-column
+          type="selection"
+          width="55"
+          align="center"
+          fixed="left"
+        />
+        <el-table-column label="代金券ID" prop="couponId" />
+        <el-table-column label="代金券图片">
+          <template slot-scope="scope">
+            <div>
+              <el-image
+                style="width: 100px; height: 100px"
+                :src="scope.row.picUrl"
+                :preview-src-list="[scope.row.picUrl]"
+              >
+              </el-image>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="代金券名称" prop="title" min-width="85" />
+        <el-table-column label="代金券类型" min-width="85">
+          <template slot-scope="scope">
+            <div>{{ scope.row.type.desc }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="代金券价格" min-width="85">
+          <template slot-scope="scope">
+            <div>￥{{ $numberFormat(scope.row.discount) }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="有效期限" min-width="85">
+          <template slot-scope="scope">
+            <div>{{ scope.row.useArea.desc }}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="couponTotal > 0"
+        :total="couponTotal"
+        :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="confirmCoupon">
+          确 认
+        </el-button>
+      </div>
+    </el-dialog>
+    <!-- 添加盲豆 -->
+    <el-dialog
+      title="添加盲豆奖品"
+      :visible.sync="coinTableVisible"
+      :before-close="close"
+    >
+      <el-form
+        :model="coinForm"
+        :rules="coinRules"
+        ref="coinForm"
+        label-width="100px"
+      >
+        <el-form-item label="盲豆数量" prop="quantity">
+          <el-input
+            v-model="coinForm.quantity"
+            size="small"
+            placeholder="请输入盲豆数量"
+          />
+        </el-form-item>
+      </el-form>
+      <div class="dialog-btn">
+        <el-button size="small" @click="close"> 取 消 </el-button>
+        <div class="ge"></div>
+        <el-button type="primary" size="small" @click="confirmCoin">
+          确 认
+        </el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
 import { getGoodsList } from "@/api/business/goods";
+import { getCouponList } from "@/api/business/coupon";
+import { ticketBoxCreate } from "@/api/business/ticket";
 import { publicFileGetUrl } from "@/api/common";
+import { accMul } from "@/utils/util";
 export default {
   name: "TicketCreate",
   data() {
     return {
       loading: false,
-      picture: [],
       form: {
         type: "online", //盲票类型
         title: "", // 盲票名称
@@ -337,9 +459,6 @@ export default {
           },
         ],
       },
-      input: 0,
-      num: 1,
-      list: [],
       // 奖级列表
       awardsList: [
         {
@@ -376,12 +495,30 @@ export default {
 
       prizeIndex: null, // 奖级下标
 
+      goodsTitle: "", // 商品名称
       goodsTableVisible: false, // 添加商品弹框
       goodsList: [], // 商品列表
-      goodsTotal: 10, // 商品总数
-      selectGoodsList: [],
+      goodsTotal: 0, // 商品总数
+      selectGoodsList: [], // 选中商品
 
-      name: "",
+      couponTitle: "", // 代金券名称
+      couponTableVisible: false, // 添加卡券弹框
+      couponList: [], // 卡券列表
+      couponTotal: 0, // 卡券总数
+      selectCouponList: [], // 选中卡券
+
+      coinTableVisible: false, // 添加盲豆弹框
+      coinForm: { quantity: "" },
+      coinRules: {
+        quantity: [
+          { required: true, message: "请输入数量", trigger: "blur" },
+          {
+            pattern: /^([1-9]\d*)$/,
+            message: "请输入合法的数字",
+            trigger: ["blur", "change"],
+          },
+        ],
+      },
 
       pageParams: {
         pageNum: 1,
@@ -391,9 +528,11 @@ export default {
   },
   created() {
     this.getGoodsList();
+    this.getCouponList();
   },
   methods: {
-    getGoodsList() {
+    // 商品列表
+    getGoodsList(title) {
       this.loading = true;
       getGoodsList(
         "pageNum=" +
@@ -401,9 +540,8 @@ export default {
           "&pageSize=" +
           this.pageParams.pageSize +
           "&",
-        {}
+        { title: title }
       ).then((res) => {
-        console.log(res);
         this.goodsList = res.rows.map((item) => {
           return {
             ...item,
@@ -412,74 +550,149 @@ export default {
         });
         this.goodsTotal = res.total;
         this.loading = false;
-        console.log("this.goodsList", this.goodsList);
       });
     },
-    confirm() {},
-    submitForm() {
-      this.awardsList.forEach(item => {
-        item.prizeList = item.prizeList.map(ele=>{
+
+    // 卡券列表
+    getCouponList(title) {
+      this.loading = true;
+      getCouponList(
+        "pageNum=" +
+          this.pageParams.pageNum +
+          "&pageSize=" +
+          this.pageParams.pageSize +
+          "&",
+        { title: title }
+      ).then((res) => {
+        this.couponList = res.rows.map((item) => {
           return {
-            ...ele,
-            refId: ele.goodsId,
-            prizeType: ele.prizeType,
-          }
-        })
+            ...item,
+            type: JSON.parse(item.type),
+            useArea: JSON.parse(item.useArea),
+            picUrl: publicFileGetUrl + item.picUrl,
+          };
+        });
+        this.couponTotal = res.total;
+        this.loading = false;
       });
-
-      console.log('this.awardsList', this.awardsList)
-      // this.$refs["form"].validate((valid) => {
-      //   if (valid) {
-      //     console.log(this.form);
-      //   } else {
-      //     console.log("error submit!!");
-      //     return false;
-      //   }
-      // });
     },
-    resetForm(formName) {
-      this.$refs[formName].resetFields();
+
+    // 保存
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          let prizeIndex = this.awardsList.findIndex(item=>{
+            return !item.prizeList.length
+          })
+          // 判断没有设置奖品的奖级
+          if(prizeIndex != -1){
+            this.$message.error(`请设置${ this.awardsList[prizeIndex].name }的奖品！`);
+            return
+          }
+          this.awardsList.forEach((item) => {
+            item.prizeList = item.prizeList.map((ele) => {
+              return {
+                // ...ele,
+                refId: ele.goodsId || ele.couponId,
+                prizeType: ele.prizeType,
+                quantity: ele.quantity,
+                value: Number(ele.coinValue),
+              };
+            });
+          });
+          let data = {
+            ...this.form,
+            picUrl: this.form.picUrl[0].fileName,
+            facePrice: accMul(this.form.facePrice, 100),
+            salePrice: accMul(this.form.salePrice, 100),
+            pkgSalePrice: accMul(this.form.pkgSalePrice, 100),
+            awardsList: this.awardsList,
+          };
+          const loading = this.$loading({
+            lock: true,
+            text: "保存中",
+            spinner: "el-icon-loading",
+            background: "rgba(0, 0, 0, 0.4)",
+          });
+          ticketBoxCreate(data).then((res) => {
+            if(res.code == 0){
+              this.msgSuccess('保存成功')
+              this.$store.dispatch('tagsView/delView', this.$route)
+              this.$router.go(-1)
+              loading.close();
+            }
+          });
+        } else {
+          return false;
+        }
+      });
     },
 
+    // 添加图片
     pictureSelect(data) {
       this.form.picUrl = data;
     },
 
-    handleChange() {},
+    // 改变奖品数量
+    handleChange(e, index) {
+      this.prizeIndex = index;
+      this.$forceUpdate();
+      this.getQuantity();
+    },
 
     // 奖级商品删除
     handleDel(e, item) {
-      console.log(e);
-      console.log("item", item);
-      let list = item.prizeList
-      list.splice(0, 1)
-      console.log('list', list)
-      this.$set(item, 'prizeList', list)
+      let list = item.prizeList;
+      list.splice(0, 1);
+      this.$set(item, "prizeList", list);
     },
 
     // 关闭弹框
     close() {
       this.goodsTableVisible = false;
+      this.couponTableVisible = false;
+      this.coinTableVisible = false;
+      this.coinForm.quantity = "";
     },
 
     // 添加奖品种类
     handleCommand(e, index) {
-      console.log("e", e);
-      console.log("index", index);
       this.prizeIndex = index;
-      // this.$set(item, "prizeList", this.goodsList);
-      this.goodsTableVisible = true;
+      if (e == "goods") {
+        this.goodsTableVisible = true;
+      } else if (e == "coupon") {
+        this.couponTableVisible = true;
+      } else if (e == "coin") {
+        this.coinTableVisible = true;
+      }
     },
 
-    handleQuery() {},
+    // 查询商品
+    handleQueryGoods() {
+      this.getGoodsList(this.goodsTitle);
+    },
+
+    // 查询代金券
+    handleQueryCoupon() {
+      this.getCouponList(this.couponTitle);
+    },
 
     // 选中商品
     handleSelectionGoods(e) {
-      console.log("选中商品", e);
       this.selectGoodsList = e;
-      this.selectGoodsList.forEach(item=>{
-        item.prizeType = 'goods'
-      })
+      this.selectGoodsList.forEach((item) => {
+        item.prizeType = "goods";
+        item.quantity = 1;
+      });
+    },
+
+    // 选中卡券
+    handleSelectionCoupon(e) {
+      this.selectCouponList = e;
+      this.selectCouponList.forEach((item) => {
+        item.prizeType = "coupon";
+        item.quantity = 1;
+      });
     },
 
     // 确认选中商品
@@ -487,13 +700,50 @@ export default {
       this.awardsList[this.prizeIndex].prizeList = this.awardsList[
         this.prizeIndex
       ].prizeList.concat(this.selectGoodsList);
+      this.getQuantity();
       this.getGoodsList();
       this.close();
     },
+
+    // 确认选中卡券
+    confirmCoupon() {
+      this.awardsList[this.prizeIndex].prizeList = this.awardsList[
+        this.prizeIndex
+      ].prizeList.concat(this.selectCouponList);
+      this.getQuantity();
+      this.getCouponList();
+      this.close();
+    },
+
+    // 确认输入盲豆
+    confirmCoin() {
+      let coin = {
+        prizeType: "coin",
+        quantity: 1,
+        title: `盲豆 x${this.coinForm.quantity}`,
+        picUrl: publicFileGetUrl + "md.jpeg",
+        coinValue: this.coinForm.quantity,
+      };
+      this.$refs["coinForm"].validate((valid) => {
+        if (valid) {
+          this.awardsList[this.prizeIndex].prizeList.push(coin);
+          this.getQuantity();
+          this.close();
+        } else {
+          return false;
+        }
+      });
+    },
+
+    // 计算奖级数量
+    getQuantity() {
+      let num = 0;
+      this.awardsList[this.prizeIndex].prizeList.forEach((item) => {
+        num += item.quantity;
+      });
+      this.awardsList[this.prizeIndex].quantity = num;
+    },
   },
-  components: {},
-  mounted() {},
-  destroyed() {},
 };
 </script>
 <style lang="scss" scoped>

src/views/business/ticket/index.vue

@@ -92,32 +92,26 @@
         align="center"
         fixed="left"
       />
-      <el-table-column
-        label="盲票组ID"
-        prop="id"
-        min-width="80"
-      ></el-table-column>
+      <el-table-column label="盲票组ID" prop="boxId" min-width="80" />
       <el-table-column label="盲票图片" prop="storeName" min-width="100">
         <template slot-scope="scope">
-          <el-image
-            style="width: 100px; height: 100px"
-            :src="scope.row.url"
-            :preview-src-list="[scope.row.url]"
-          >
-          </el-image>
+          <div>
+            <el-image
+              style="width: 100px; height: 100px"
+              :src="scope.row.picUrl"
+              :preview-src-list="[scope.row.picUrl]"
+            />
+          </div>
         </template>
       </el-table-column>
-      <el-table-column label="盲票组名称" prop="name" min-width="85" />
-
+      <el-table-column label="盲票组名称" prop="title" min-width="85" />
       <el-table-column label="盲票组面值" prop="billType" min-width="85">
         <template slot-scope="scope">
-          {{ $numberFormat(scope.row.money) }}
+          <div>￥{{ $numberFormat(scope.row.facePrice) }}</div>
         </template>
       </el-table-column>
-      <el-table-column label="盲票总数" prop="num" width="80">
-      </el-table-column>
-      <el-table-column label="已售张数" prop="sNum" min-width="80">
-      </el-table-column>
+      <el-table-column label="盲票总数" prop="quantity" width="80" />
+      <el-table-column label="已售张数" prop="saleQty" min-width="80" />
       <el-table-column label="盲票类型" prop="realAmt" min-width="80">
         <template slot-scope="scope">
           {{ scope.row.type == 1 ? "线下" : "线上" }}
@@ -125,14 +119,13 @@
       </el-table-column>
       <el-table-column label="采购单价" prop="status" min-width="80">
         <template slot-scope="scope">
-          {{ $numberFormat(scope.row.amt) }}
+          <div>￥{{ $numberFormat(scope.row.pkgSalePrice) }}</div>
         </template>
       </el-table-column>
-      <el-table-column label="已采购数量" prop="aNum" min-width="80">
-      </el-table-column>
+      <el-table-column label="已采购数量" prop="salePkgQty" min-width="80" />
       <el-table-column label="状态" prop="status" min-width="80">
         <template slot-scope="scope">
-          {{ scope.row.state == 1 ? "已上架" : "已下架" }}
+          {{ scope.row.status.desc }}
         </template>
       </el-table-column>
 
@@ -144,6 +137,18 @@
         min-width="150"
         fixed="right"
       >
+        <template>
+          <div>
+            <el-button
+              size="mini"
+              type="text"
+              disabled
+              @click="handleDetail(scope.row)"
+              v-hasPermi="['']"
+              >查看</el-button
+            >
+          </div>
+        </template>
       </el-table-column>
     </el-table>
 
@@ -157,6 +162,8 @@
   </div>
 </template>
 <script>
+import { getTicketList } from "@/api/business/ticket";
+import { publicFileGetUrl } from "@/api/common";
 export default {
   name: "Ticket",
   data() {
@@ -176,25 +183,40 @@ export default {
       ticketStateArr: [],
       // 总条数
       total: 10,
-      list: [
-        {
-          id: "01",
-          url: "https://cdn.uviewui.com/uview/album/1.jpg",
-          name: "盲票1",
-          money: 1000,
-          num: 200,
-          sNum: 100,
-          type: 1,
-          amt: 5000,
-          aNum: 20,
-          state: 1,
-        },
-      ],
+      list: [],
     };
   },
+  created() {
+    this.getList();
+  },
   methods: {
     // 盲票组列表
-    getList() {},
+    getList() {
+      this.loading = true;
+      getTicketList(
+        "pageNum=" +
+          this.pageParams.pageNum +
+          "&pageSize=" +
+          this.pageParams.pageSize +
+          "&",
+        this.queryParams
+      )
+        .then((res) => {
+          this.loading = false;
+          if (res.code == 0) {
+            res.rows.forEach((item) => {
+              let picUrlArr = item.picUrl.split(",");
+              item.picUrl = publicFileGetUrl + picUrlArr[0];
+              item.status = JSON.parse(item.status);
+            });
+            this.total = res.total;
+            this.list = res.rows;
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
     // 搜索
     handleQuery() {},
     // 重置
@@ -205,6 +227,10 @@ export default {
     },
     // 表格多选
     handleSelectionChange() {},
+
+    handleDetail(){
+
+    },
   },
   components: {},
   mounted() {},
@@ -212,5 +238,4 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-
 </style>