新增弹窗列表

src/components/taskPage/IceCream/IceCreamTask.vue

@@ -182,7 +182,9 @@
       </div>
     </div>
     <!-- 我的奖券 -->
-    <myTicket v-show="myTicketShow" @closeMyWindow="closeMyWindow" name='Ticket'/>
+    <myTicket v-show="myTicketShow" @closeMyWindow="closeMyWindow" @openList="openList" name='Ticket'/>
+    <!-- 奖券列表 -->
+    <ticketList v-show="ticketShow" :ticketId='ticketId' @closeMyWindow="closeMyWindow" />
     <!-- 活动说明 -->
     <description v-show="descriptionShow" :data="info" @closeMyWindow="closeMyWindow" name='Active'/>
     <!-- 全家桶 -->
@@ -196,19 +198,23 @@ import myTicket from './myTicket'
 import description from './description'
 import allHome from './allHome'
 import raffleTickets from './raffleTickets'
+import ticketList from './ticketList'
 export default {
   components: {
     myTicket,
     description,
     allHome,
-    raffleTickets
+    raffleTickets,
+    ticketList
   },
   data(){
     return{
+      ticketId: 0,
       myTicketShow: false,
       descriptionShow: false,
       allHomeShow: false,
       raffleTicketsShow: true,
+      ticketShow: false,
       info: '瓜分现金作为本次获得的爆点，吸引用户。能领到抽奖券的用户，肯定是已经交过客人，大部分会是交过10个人以上的用户，小概率会有人没有交到10个人的，所以看看能不能做0.88+8.8+18.8+68.8+288的现金红包（68的设定30个以内，288设定1个），其它都是小红包的，交客数量最多的前三随机获得288，前50随机获得68，其他人获得小红包。',
       list: [
         {
@@ -234,6 +240,11 @@ export default {
       ]
     }
   },methods:{
+    openList: function (id) {
+      this.ticketId = id
+      this.myTicketShow = false
+      this.ticketShow = true
+    },
     openLayer: function (obj) {
       if (obj.id === 2) {
         this.myTicketShow = true;
@@ -248,6 +259,9 @@ export default {
         this.allHomeShow = false
       } else if (val === 'raffleTickets') {
         this.raffleTicketsShow = false
+      } else if (val === 'ticket') {
+        this.ticketShow = false
+        this.myTicketShow = true
       }
     }
   },mounted(){

src/components/taskPage/IceCream/myTicket.vue

@@ -71,7 +71,7 @@
           <div class="item_img">
             <img :src="item.src" alt="">
           </div>
-          <span class="item_name">{{item.name}}</span>
+          <span class="item_name" @click="openList(item.id)">{{item.name}}</span>
         </div>
       </div>
       <div @mouseover="closeShow = 1" @mouseout="closeShow = 2" class="myTicket_close" @click="close">
@@ -123,6 +123,9 @@ export default {
   },methods:{
     close: function () {
       this.$emit('closeMyWindow', 'Ticket')
+    },
+    openList: function (id) {
+      this.$emit('openList', id)
     }
   },mounted(){
 

src/components/taskPage/IceCream/ticketList.vue

+<style>
+.ticketList{
+  width: 100%;
+  height: 100%;
+  background:rgba(0, 0, 0, .5);
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2018;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ticketList .ticketList_bg{
+  height: 538px;
+  width: 300px;
+  background: url('../../../assets/img/task/quanlist.png');
+  background-size: 100% 100%;
+  position: relative;
+}
+.ticketList .ticketList_close{
+  position: absolute;
+  right: -10px;
+  top: -10px;
+  cursor: pointer;
+}
+.ticketList .ticketList_close img{ 
+  width:36px;
+  height:37px;
+}
+.ticketList .ticketList_box{
+  padding: 10px;
+}
+.ticketList .ticketList_tit{
+  width:280px;
+  height:85px;
+  background:rgba(255,255,255,.68);
+  border-top-left-radius:21px;
+  border-top-right-radius:21px;
+}
+.ticketList .ticketList_tit .top_btn{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 52px;
+  padding: 4px 8px 0;
+  border-bottom:2px dashed rgba(255,148,21,1);
+}
+.ticketList .ticketList_tit .top_btn img{
+  width:127px;
+  height:40px;
+  cursor: pointer;
+}
+.ticketList .el-checkbox__inner{
+  border-radius: 50%;
+}
+</style>
+<template>
+  <div class="ticketList">
+    <div class="ticketList_bg">
+      <div class="ticketList_box">
+        <div class="ticketList_tit">
+          <div class="top_btn">
+            <div>
+              <img v-if="activeNav === 1" src="../../../assets/img/task/weishiyong2.png" alt="">
+              <img v-else @click="activeNav = 1" src="../../../assets/img/task/weishiyong.png" alt="">
+            </div>
+            <div>
+              <img v-if="activeNav === 2" src="../../../assets/img/task/yishiyong2.png" alt="">
+              <img v-else @click="activeNav = 2" src="../../../assets/img/task/yishiyong.png" alt="">
+            </div>
+          </div>
+          <div>
+            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+            <span>合并</span>
+          </div>
+        </div>
+        <div>
+          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <div @mouseover="closeShow = 1" @mouseout="closeShow = 2" class="ticketList_close" @click="close">
+        <img v-if="closeShow === 2" src="../../../assets/img/task/close.png" alt="">
+        <img v-else src="../../../assets/img/task/close2.png" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const cityOptions = ['上海', '北京', '广州', '深圳'];
+export default {
+  props: ['id'],
+  data() {
+    return{
+      closeShow: 1,
+      activeNav: 1,
+      heckAll: false,
+      checkedCities: ['上海', '北京'],
+      cities: cityOptions,
+      isIndeterminate: true
+    }
+  },methods:{
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? cityOptions : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+    },
+    close: function () {
+      this.$emit('closeMyWindow', 'ticket')
+    },
+  },mounted(){
+
+  }
+}
+</script>