创建盲票组代码优化

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

@@ -0,0 +1,236 @@
+<template>
+  <div>
+    <div class="prize" v-for="(item, index) in awardsList" :key="index">
+        <div class="prize-top">
+          <div>奖级名称：{{ item.name }}</div>
+          <div>奖级：{{ item.sort }}</div>
+          <div>
+            奖级数量：
+            <el-input-number
+              v-model="item.quantity"
+              controls-position="right"
+              @change="handleChangeAll($event, item)"
+              :min="0"
+              size="small"
+            ></el-input-number>
+          </div>
+        </div>
+        <div class="prize-table">
+          <el-table :data="item.prizeList" class="el-table">
+            <el-table-column label="奖品图片">
+              <template slot-scope="scope">
+                <el-image
+                  style="width: 70px; height: 70px"
+                  :src="scope.row.picUrl"
+                  :preview-src-list="[scope.row.picUrl]"
+                >
+                </el-image>
+              </template>
+            </el-table-column>
+            <el-table-column label="奖品名称" prop="title" />
+            <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">
+                <div>
+                  <el-input-number
+                    v-model="scope.row.quantity"
+                    controls-position="right"
+                    @change="handleChange($event, index)"
+                    :min="1"
+                    size="small"
+                  ></el-input-number>
+                </div>
+              </template>
+            </el-table-column> -->
+            <el-table-column label="操作" align="center">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  @click="handleDel(scope.$index, item)"
+                  >删除</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="prize-btn">
+          <el-dropdown @command="handleCommand($event, index)">
+            <el-button type="primary" size="small">
+              添加奖品<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <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="coin">盲豆</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "AwardList",
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      prizeIndex: null, // 奖级下标
+      // 奖级列表
+      awardsList: [
+        {
+          name: "永恒",
+          sort: 1,
+          quantity: 0,
+          prizeList: [],
+        },
+        {
+          name: "王者",
+          sort: 2,
+          quantity: 0,
+          prizeList: [],
+        },
+        {
+          name: "星耀",
+          sort: 3,
+          quantity: 0,
+          prizeList: [],
+        },
+        {
+          name: "铂金",
+          sort: 4,
+          quantity: 0,
+          prizeList: [],
+        },
+        {
+          name: "钻石",
+          sort: 5,
+          quantity: 0,
+          prizeList: [],
+        },
+        {
+          name: "至尊",
+          sort: 6,
+          quantity: 0,
+          prizeList: [],
+        },
+        {
+          name: "传说",
+          sort: 7,
+          quantity: 0,
+          prizeList: [],
+        },
+        {
+          name: "史诗",
+          sort: 8,
+          quantity: 0,
+          prizeList: [],
+        },
+        {
+          name: "稀有",
+          sort: 9,
+          quantity: 0,
+          prizeList: [],
+        },
+        {
+          name: "尊贵",
+          sort: 10,
+          quantity: 0,
+          prizeList: [],
+        },
+      ],
+    };
+  },
+  methods: {
+    // 添加奖品
+    add(type, item) {
+      if(type == 1) {
+        this.awardsList[this.prizeIndex].prizeList = this.awardsList[this.prizeIndex].prizeList.concat(item);
+      } else if (type == 2) {
+        this.awardsList[this.prizeIndex].prizeList.push(item);
+      }
+      this.$emit('input', this.awardsList)
+      this.$emit('close')
+    },
+
+    // 选择奖品种类
+    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)
+    },
+    // 改变奖级数量
+    handleChangeAll(e, item) {
+      this.$set(item, "quantity", e);
+      this.$forceUpdate();
+      // this.getQuantity();
+    },
+
+    // 改变奖品数量
+    handleChange(e, index) {
+      this.prizeIndex = index;
+      this.$forceUpdate();
+      // this.getQuantity();
+    },
+
+    // 奖级商品删除
+    handleDel(index, item) {
+      this.prizeIndex = item.sort - 1;
+      let list = item.prizeList;
+      list.splice(index, 1);
+      this.$set(item, "prizeList", list);
+      // this.getQuantity();
+    },
+
+    // 计算奖级数量
+    getQuantity() {
+      let num = 0;
+      this.awardsList[this.prizeIndex].prizeList.forEach((item) => {
+        num += item.quantity;
+      });
+      this.awardsList[this.prizeIndex].quantity = num;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.prize {
+  width: 1000px;
+  margin-bottom: 50px;
+  background: #f9f9f9;
+  border: 1px solid #bbbbbb;
+  font-size: 14px;
+  &-top {
+    padding: 10px 20px;
+    margin-bottom: 10px;
+    display: flex;
+    align-content: center;
+    justify-content: space-around;
+    border-bottom: 1px solid #bbbbbb;
+    div {
+      line-height: 36px;
+    }
+  }
+  &-btn {
+    border-top: 1px solid #bbbbbb;
+    padding: 10px;
+  }
+}
+</style>

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

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <el-dialog
+      title="添加盲豆奖品"
+      :visible.sync="dialogVisible"
+      :before-close="close"
+      width="500px"
+    >
+      <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="请输入盲豆数量"
+            style="width: 200px"
+          />
+        </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 { publicFileGetUrl } from "@/api/common";
+export default {
+  name: "CoinAdd",
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      coinForm: { quantity: "" },
+      coinRules: {
+        quantity: [
+          { required: true, message: "请输入数量", trigger: "blur" },
+          {
+            pattern: /^([1-9]\d*)$/,
+            message: "请输入合法的数字",
+            trigger: ["blur", "change"],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 确认输入盲豆
+    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.$emit("confirmCoin", coin);
+        } else {
+          return false;
+        }
+      });
+    },
+    close() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.dialog-btn {
+  display: flex;
+  align-content: center;
+  justify-content: flex-end;
+  padding: 40px 0 0;
+  .ge {
+    width: 40px;
+  }
+}
+</style>

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

@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <el-dialog
+      title="添加券奖品"
+      width="1000px"
+      :visible.sync="dialogVisible"
+      :before-close="close"
+    >
+      <div class="dialog-search">
+        <div>券名称：</div>
+        <el-input
+          v-model="couponTitle"
+          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="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>
+  </div>
+</template>
+<script>
+import { publicFileGetUrl } from "@/api/common";
+import { getCouponList } from "@/api/business/coupon";
+export default {
+  name: "CouponAdd",
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      couponTitle: "", // 券名称
+      couponList: [], // 卡券列表
+      couponTotal: 0, // 卡券总数
+      selectCouponList: [], // 选中卡券
+      pageParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+    };
+  },
+  created() {
+    this.getCouponList();
+  },
+  methods: {
+    // 卡券列表
+    getCouponList() {
+      this.loading = true;
+      getCouponList(
+        "pageNum=" +
+          this.pageParams.pageNum +
+          "&pageSize=" +
+          this.pageParams.pageSize +
+          "&",
+        { title: this.couponTitle, status: "on" }
+      ).then((res) => {
+        this.couponList = res.rows.map((item) => {
+          return {
+            ...item,
+            type: JSON.parse(item.type),
+            useArea: JSON.parse(item.useArea),
+            picUrl: publicFileGetUrl + item.picUrl,
+          };
+        });
+        this.couponTotal = res.total;
+        this.loading = false;
+      });
+    },
+
+    // 选中卡券
+    handleSelectionCoupon(e) {
+      this.selectCouponList = e.map((item) => {
+        return {
+          prizeType: "coupon",
+          // quantity: 1,
+          couponId: item.couponId,
+          picUrl: item.picUrl,
+          title: item.title,
+        };
+      });
+    },
+
+    // 确认选中卡券
+    confirmCoupon() {
+      this.$emit("confirmCoupon", this.selectCouponList);
+    },
+
+    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/components/GoodsAdd.vue

@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <el-dialog
+      title="添加实物奖品"
+      width="1000px"
+      :visible.sync="dialogVisible"
+      :before-close="close"
+    >
+      <div class="dialog-search">
+        <div>商品名称：</div>
+        <el-input
+          v-model="goodsTitle"
+          placeholder="请输入商品名称"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="getGoodsList()"
+        />
+        <div class="ge"></div>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="getGoodsList()"
+          >查询</el-button
+        >
+      </div>
+      <el-table
+        v-loading="loading"
+        :data="goodsList"
+        @selection-change="handleSelectionGoods"
+        class="el-table"
+      >
+        <el-table-column
+          type="selection"
+          width="55"
+          align="center"
+          fixed="left"
+        />
+        <el-table-column label="商品ID" prop="goodsId" />
+        <el-table-column label="商品图片">
+          <template slot-scope="{ row }">
+            <div v-if="row.picUrl">
+              <el-image
+                style="width: 100px; height: 100px"
+                :src="row.picUrl.split(',')[0]"
+                :preview-src-list="row.picUrl.split(',')"
+              >
+              </el-image>
+            </div>
+            <p v-else>-</p>
+          </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>￥{{ $numberFormat(scope.row.value) }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品库存" prop="quantity" width="80" />
+      </el-table>
+      <pagination
+        v-show="goodsTotal > 0"
+        :total="goodsTotal"
+        :page.sync="pageParams.pageNum"
+        :limit.sync="pageParams.pageSize"
+        @pagination="getGoodsList"
+      />
+      <div class="dialog-btn">
+        <el-button size="small" @click="close"> 取 消 </el-button>
+        <div class="ge"></div>
+        <el-button type="primary" size="small" @click="confirmGoods">
+          确 认
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { publicFileGetUrl } from "@/api/common";
+import { getGoodsList } from "@/api/business/goods";
+export default {
+  name: "GoodsAdd",
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      goodsTitle: "", // 商品名称
+      goodsList: [], // 商品列表
+      goodsTotal: 0, // 商品总数
+      selectGoodsList: [], // 选中商品
+      pageParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+    };
+  },
+  created() {
+    this.getGoodsList();
+  },
+  methods: {
+    // 商品列表
+    getGoodsList() {
+      this.loading = true;
+      getGoodsList(
+        "pageNum=" +
+          this.pageParams.pageNum +
+          "&pageSize=" +
+          this.pageParams.pageSize +
+          "&",
+        { title: this.goodsTitle, status: "on" }
+      ).then((res) => {
+        this.goodsList = res.rows.map((item) => {
+          return {
+            ...item,
+            picUrl: publicFileGetUrl + item.picUrl.split(",")[0],
+          };
+        });
+        this.goodsTotal = res.total;
+        this.loading = false;
+      });
+    },
+
+    // 选中商品
+    handleSelectionGoods(e) {
+      this.selectGoodsList = e.map((item) => {
+        return {
+          prizeType: "goods",
+          // quantity: 1,
+          goodsId: item.goodsId,
+          picUrl: item.picUrl,
+          title: item.title,
+        };
+      });
+    },
+
+    // 确认选中商品
+    confirmGoods() {
+      this.$emit("confirmGoods", this.selectGoodsList);
+    },
+
+    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

@@ -21,11 +21,9 @@
           </el-form-item>
           <el-form-item label="图片" prop="picUrl">
             <image-upload
+              v-model="ticketPicUrl"
               :limit="1"
               :file-size="0.2"
-              :value="form.picUrl"
-              :is-public="true"
-              @input="pictureSelect"
             />
           </el-form-item>
           <div class="tip">
@@ -102,79 +100,9 @@
       </div>
       <div class="base-info-title">奖级设置</div>
       <!-- 奖级设置 -->
-      <div class="prize" v-for="(item, index) in awardsList" :key="index">
-        <div class="prize-top">
-          <div>奖级名称：{{ item.name }}</div>
-          <div>奖级：{{ item.sort }}</div>
-          <div>
-            奖级数量：
-            <el-input-number
-              v-model="item.quantity"
-              controls-position="right"
-              @change="handleChangeAll($event, item)"
-              :min="0"
-              size="small"
-            ></el-input-number>
-          </div>
-        </div>
-        <div class="prize-table">
-          <el-table :data="item.prizeList" class="el-table">
-            <el-table-column label="奖品图片">
-              <template slot-scope="scope">
-                <el-image
-                  style="width: 70px; height: 70px"
-                  :src="scope.row.picUrl"
-                  :preview-src-list="[scope.row.picUrl]"
-                >
-                </el-image>
-              </template>
-            </el-table-column>
-            <el-table-column label="奖品名称" prop="title" />
-            <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">
-                <div>
-                  <el-input-number
-                    v-model="scope.row.quantity"
-                    controls-position="right"
-                    @change="handleChange($event, index)"
-                    :min="1"
-                    size="small"
-                  ></el-input-number>
-                </div>
-              </template>
-            </el-table-column> -->
-            <el-table-column label="操作" align="center">
-              <template slot-scope="scope">
-                <el-button
-                  size="mini"
-                  type="text"
-                  @click="handleDel(scope.$index, item)"
-                  >删除</el-button
-                >
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-        <div class="prize-btn">
-          <el-dropdown @command="handleCommand($event, index)">
-            <el-button type="primary" size="small">
-              添加奖品<i class="el-icon-arrow-down el-icon--right"></i>
-            </el-button>
-            <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="coin">盲豆</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </div>
-      </div>
+
+      <!-- 奖级列表 -->
+      <awards-list ref="awards" v-model="awardsList" @handleCommand="handleCommand" @close="close" />
       <!-- 保存 -->
       <div class="save-btn">
         <el-button size="small" @click="back"> 取 消 </el-button>
@@ -186,213 +114,37 @@
     </div>
 
     <!-- 添加商品 -->
-    <el-dialog
-      title="添加实物奖品"
-      width="1000px"
-      :visible.sync="goodsTableVisible"
-      :before-close="close"
-    >
-      <div class="dialog-search">
-        <div>商品名称：</div>
-        <el-input
-          v-model="goodsTitle"
-          placeholder="请输入商品名称"
-          clearable
-          size="small"
-          style="width: 240px"
-          @keyup.enter.native="handleQueryGoods"
-        />
-        <div class="ge"></div>
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          size="mini"
-          @click="handleQueryGoods"
-          >查询</el-button
-        >
-      </div>
-      <el-table
-        v-loading="loading"
-        :data="goodsList"
-        @selection-change="handleSelectionGoods"
-        class="el-table"
-      >
-        <el-table-column
-          type="selection"
-          width="55"
-          align="center"
-          fixed="left"
-        />
-        <el-table-column label="商品ID" prop="goodsId" />
-        <el-table-column label="商品图片">
-          <template slot-scope="{ row }">
-            <div v-if="row.picUrl">
-              <el-image
-                style="width: 100px; height: 100px"
-                :src="row.picUrl.split(',')[0]"
-                :preview-src-list="row.picUrl.split(',')"
-              >
-              </el-image>
-            </div>
-            <p v-else>-</p>
-          </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>￥{{ $numberFormat(scope.row.value) }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column label="商品库存" prop="quantity" width="80" />
-      </el-table>
-      <pagination
-        v-show="goodsTotal > 0"
-        :total="goodsTotal"
-        :page.sync="pageParams.pageNum"
-        :limit.sync="pageParams.pageSize"
-        @pagination="getGoodsList"
-      />
-      <div class="dialog-btn">
-        <el-button size="small" @click="close"> 取 消 </el-button>
-        <div class="ge"></div>
-        <el-button type="primary" size="small" @click="confirmGoods">
-          确 认
-        </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>
+    <goods-add :dialog-visible="goodsTableVisible" @close="close" @confirmGoods="confirmGoods" v-if="goodsTableVisible" />
+    <!-- 添加券 -->
+    <coupon-add :dialog-visible="couponTableVisible" @close="close" @confirmCoupon="confirmCoupon" v-if="couponTableVisible" />
     <!-- 添加盲豆 -->
-    <el-dialog
-      title="添加盲豆奖品"
-      :visible.sync="coinTableVisible"
-      :before-close="close"
-      width="500px"
-    >
-      <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="请输入盲豆数量"
-            style="width: 200px"
-          />
-        </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>
+    <coin-add :dialog-visible="coinTableVisible" @close="close" @confirmCoin="confirmCoin" v-if="coinTableVisible" /> 
   </div>
 </template>
 <script>
 import CustomFieldsMixin from "@/mixins/CustomFields";
-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";
+import AwardsList from "./components/AwardsList"
+import GoodsAdd from "./components/GoodsAdd"
+import CouponAdd from "./components/CouponAdd"
+import CoinAdd from "./components/CoinAdd"
 export default {
   name: "TicketCreate",
   mixins: [CustomFieldsMixin],
+  components: {
+    AwardsList,
+    GoodsAdd,
+    CouponAdd,
+    CoinAdd,
+  },
   data() {
     return {
       loading: false,
       form: {
         type: "online", //盲票类型
         title: "", // 盲票名称
-        picUrl: [], // 图片
+        picUrl: "", // 图片
         facePrice: "", // 面值
         salePrice: "", // 售价
         quantity: "", // 数量
@@ -409,7 +161,6 @@ export default {
         ],
         picUrl: [
           {
-            type: "array",
             required: true,
             message: "请上传盲票图片",
             trigger: "change",
@@ -468,154 +219,35 @@ export default {
           },
         ],
       },
-      // 奖级列表
-      awardsList: [
-        {
-          name: "永恒",
-          sort: 1,
-          quantity: 0,
-          prizeList: [],
-        },
-        {
-          name: "王者",
-          sort: 2,
-          quantity: 0,
-          prizeList: [],
-        },
-        {
-          name: "星耀",
-          sort: 3,
-          quantity: 0,
-          prizeList: [],
-        },
-        {
-          name: "铂金",
-          sort: 4,
-          quantity: 0,
-          prizeList: [],
-        },
-        {
-          name: "钻石",
-          sort: 5,
-          quantity: 0,
-          prizeList: [],
-        },
-        {
-          name: "至尊",
-          sort: 6,
-          quantity: 0,
-          prizeList: [],
-        },
-        {
-          name: "传说",
-          sort: 7,
-          quantity: 0,
-          prizeList: [],
-        },
-        {
-          name: "史诗",
-          sort: 8,
-          quantity: 0,
-          prizeList: [],
-        },
-        {
-          name: "稀有",
-          sort: 9,
-          quantity: 0,
-          prizeList: [],
-        },
-        {
-          name: "尊贵",
-          sort: 10,
-          quantity: 0,
-          prizeList: [],
-        },
-      ],
-
-      prizeIndex: null, // 奖级下标
 
-      goodsTitle: "", // 商品名称
+      // 奖级列表
+      awardsList: [],
       goodsTableVisible: false, // 添加商品弹框
-      goodsList: [], // 商品列表
-      goodsTotal: 0, // 商品总数
-      selectGoodsList: [], // 选中商品
-
       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,
         pageSize: 10,
       },
     };
   },
-  created() {
-    this.getGoodsList();
-    this.getCouponList();
+  computed: {
+    ticketPicUrl: {
+      get() {
+        return this.form.picUrl ? this.form.picUrl.split(',').map(item => {
+          return {
+            fileName: item
+          }
+        }) : []
+      },
+      set(val) {
+        console.log('val', val)
+        this.$set(this.form, 'picUrl', val.map(item => { return item.fileName }).toString())
+      }
+    }
   },
   methods: {
-    // 商品列表
-    getGoodsList() {
-      this.loading = true;
-      getGoodsList(
-        "pageNum=" +
-          this.pageParams.pageNum +
-          "&pageSize=" +
-          this.pageParams.pageSize +
-          "&",
-        { title: this.goodsTitle, status: "on" }
-      ).then((res) => {
-        this.goodsList = res.rows.map((item) => {
-          return {
-            ...item,
-            picUrl: publicFileGetUrl + item.picUrl.split(',')[0],
-          };
-        });
-        this.goodsTotal = res.total;
-        this.loading = false;
-      });
-    },
-
-    // 卡券列表
-    getCouponList() {
-      this.loading = true;
-      getCouponList(
-        "pageNum=" +
-          this.pageParams.pageNum +
-          "&pageSize=" +
-          this.pageParams.pageSize +
-          "&",
-        { title: this.couponTitle, status: "on" }
-      ).then((res) => {
-        this.couponList = res.rows.map((item) => {
-          return {
-            ...item,
-            type: JSON.parse(item.type),
-            useArea: JSON.parse(item.useArea),
-            picUrl: publicFileGetUrl + item.picUrl,
-          };
-        });
-        this.couponTotal = res.total;
-        this.loading = false;
-      });
-    },
-
     // 保存
     submitForm() {
       const subForm = this.$refs["form"];
@@ -685,7 +317,6 @@ export default {
 
           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),
@@ -718,45 +349,15 @@ export default {
       });
     },
 
-    // 添加图片
-    pictureSelect(data) {
-      this.form.picUrl = data;
-    },
-
-    // 改变奖级数量
-    handleChangeAll(e, item) {
-      this.$set(item, "quantity", e);
-      this.$forceUpdate();
-      // this.getQuantity();
-    },
-
-    // 改变奖品数量
-    handleChange(e, index) {
-      this.prizeIndex = index;
-      this.$forceUpdate();
-      // this.getQuantity();
-    },
-
-    // 奖级商品删除
-    handleDel(index, item) {
-      this.prizeIndex = item.sort - 1;
-      let list = item.prizeList;
-      list.splice(index, 1);
-      this.$set(item, "prizeList", list);
-      // this.getQuantity();
-    },
-
     // 关闭弹框
     close() {
       this.goodsTableVisible = false;
       this.couponTableVisible = false;
       this.coinTableVisible = false;
-      this.coinForm.quantity = "";
     },
 
     // 添加奖品种类
-    handleCommand(e, index) {
-      this.prizeIndex = index;
+    handleCommand(e) {
       if (e == "goods") {
         this.goodsTableVisible = true;
       } else if (e == "coupon") {
@@ -766,89 +367,19 @@ export default {
       }
     },
 
-    // 查询商品
-    handleQueryGoods() {
-      this.getGoodsList();
-    },
-
-    // 查询券
-    handleQueryCoupon() {
-      this.getCouponList();
-    },
-
-    // 选中商品
-    handleSelectionGoods(e) {
-      this.selectGoodsList = e.map((item) => {
-        return {
-          prizeType: "goods",
-          // quantity: 1,
-          goodsId: item.goodsId,
-          picUrl: item.picUrl,
-          title: item.title,
-        };
-      });
-    },
-
-    // 选中卡券
-    handleSelectionCoupon(e) {
-      this.selectCouponList = e.map((item) => {
-        return {
-          prizeType: "coupon",
-          // quantity: 1,
-          couponId: item.couponId,
-          picUrl: item.picUrl,
-          title: item.title,
-        };
-      });
-    },
-
     // 确认选中商品
-    confirmGoods() {
-      this.awardsList[this.prizeIndex].prizeList = this.awardsList[
-        this.prizeIndex
-      ].prizeList.concat(this.selectGoodsList);
-      // this.getQuantity();
-      this.getGoodsList();
-      this.close();
+    confirmGoods(arr) {
+      this.$refs.awards.add(1, arr)
     },
 
     // 确认选中卡券
-    confirmCoupon() {
-      this.awardsList[this.prizeIndex].prizeList = this.awardsList[
-        this.prizeIndex
-      ].prizeList.concat(this.selectCouponList);
-      // this.getQuantity();
-      this.getCouponList();
-      this.close();
+    confirmCoupon(arr) {;
+      this.$refs.awards.add(1, arr)
     },
 
     // 确认输入盲豆
-    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;
+    confirmCoin(obj) {
+      this.$refs.awards.add(2, obj)
     },
 
     // 取消