新增活动页面

src/App.vue

@@ -59,7 +59,7 @@ export default {
 
 <style>
 @import './assets/global/font.css';
-@import '//at.alicdn.com/t/font_863923_wzxnabnk91k.css';
+@import '//at.alicdn.com/t/font_863923_qlcuzib5xj.css';
 @import './assets/global/global.css';
 body,html{
   padding: 0px;

src/components/newPersonalCenter/integral/model/commodity.vue

@@ -77,7 +77,7 @@
 <template>
   <el-row class="commodity">
     <el-col :span="10" class="com_BigDiv">
-      <div class="info" v-if="index==0" v-for="(item,index) in message">
+      <div class="info" v-if="index==0" v-for="(item,index) in message" :key="index">
         <div>
           <img class="com_bigImg" :src="getImgUrl(message[0].Images)" alt>
         </div>
@@ -87,7 +87,7 @@
     </el-col>
     <el-col :span="14">
       <el-row>
-        <el-col :span="8"  class="small" v-if="index>0&&index<4" v-for="(item,index) in message">
+        <el-col :span="8"  class="small" v-if="index>0&&index<4" v-for="(item,index) in message" :key="index">
           <div @click="goDetail(item.Id)">
             <div class="r_item_img_box">
               <img :src="getImgUrl(item.Images)" alt>
@@ -98,7 +98,7 @@
         </el-col>
       </el-row>
       <el-row>
-        <el-col :span="12" class="medium f" v-if="index>3" v-for="(item,index) in message">
+        <el-col :span="12" class="medium f" v-if="index>3" v-for="(item,index) in message" :key="index">
           <div @click="goDetail(item.Id)">
             <div class="r_item_btmBox">
               <img :src="getImgUrl(item.Images)" alt>

src/components/newPersonalCenter/integral/model/integralHomeV2.vue

@@ -176,7 +176,7 @@
         </el-col>
       </el-row>
       <!-- class -->
-      <el-row class="class" v-for="item in dataList">
+      <el-row class="class" v-for="(item, index) in dataList" :key="index">
         <el-row class="tit">
           <div>
             <!-- <img src="../../../../assets/img/ps/jifenhot.png" alt=""> -->

src/components/taskPage/IceCream/IceCreamTask.vue

@@ -4,33 +4,34 @@
   height: 100%;
   background: url('../../../assets/img/task/task_home1.png');
   background-size: 100% 100%;
-  min-height: 768px;
+  /* min-height: 768px; */
   /* min-height: 868px; */
   overflow: hidden;
 }
 .IceCreamTask .duihuanBtn{
-  width: 76px;
-  height: 81px;
+  width: 107px;
+  height: 114px;
   background: url('../../../assets/img/task/task_home7.png');
   background-size: 100% 100%;
   position: absolute;
-  right: 129px;
-  bottom: -71px;
+  left: 156px;
+  bottom: -88px;
   cursor: pointer;
 }
 .IceCreamTask .right_box{
   position: absolute;
-  right: 150px;
+  right: 0;
   top: 7.5%;
-  width: 152px;
+  width: 215px;
   text-align: center;
   z-index: 20;
 }
 .IceCreamTask .IceCreamTask_main{
-  width: 1280px;
+  width: 1197px;
   height: 100%;
   margin: 0 auto;
   position: relative;
+  /* margin-left: 20.83% */
 }
 .IceCreamTask .IceCreamTask_main .right_box>div{
   display: flex;
@@ -49,173 +50,258 @@
   display: inline-block;
   margin-top: 10px;
   cursor: pointer;
-  width: 85px;
-  height: 94px;
+  width: 120px;
+  height: 132px;
 }
 .IceCreamTask .IceCreamTask_main .home_tit{
   text-align: center;
   padding-top: 60px;
   position: relative;
+  z-index: 2;
 }
 .IceCreamTask .IceCreamTask_main .home_tit img{
-  width: 610px;
+
 }
 .IceCreamTask .IceCreamTask_main .home_tit p{
-  font-size: 16px;
+  font-size: 24px;
   font-family: 'PingFangR';
   font-weight: bold;
   color: rgba(254,30,12,1);
   position: absolute;
-  bottom: 23px;
+  bottom: 26px;
   width: 100%;
 }
 .IceCreamTask .bottom_box{
   display: flex;
   /* padding: 0 150px; */
   position: absolute;
-  bottom: 45px;
-  left: 91px;
+  bottom: 21px;
   align-items: flex-end;
+  width: 100%;
+  margin-left: 20.83%;
 }
 .IceCreamTask .bottom_box>div>img{
-  width: 100%;
+  /* width: 100%; */
 }
 .IceCreamTask .bottom_box .left{
-  width: 188px;
-  height: 274px;
+  width: 348px;
+  height: 579px;
   background: url('../../../assets/img/task/bg.png');
   background-size: 100% 100%;
   position: relative;
   bottom: 0;
-  left: 17%;
-  padding: 63px 30px;
+  padding: 86px 37px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  box-sizing: border-box;
 }
 .IceCreamTask .bottom_box .left .caomei{
-  width: 180px;
-  height: 54px;
+  width: 253px;
+  height: 76px;
   position: absolute;
   bottom: 10px;
-  left: 36px;
-  bottom: -7px;
+  left: 50px;
+  bottom: -9px;
+  z-index: 1;
 }
 .IceCreamTask .bottom_box .center{
-  width: 218px;
-  height: 296px;
+  width: 306px;
   margin-left: 58px;
   position: relative;
-  bottom: 11px;
-  left: 17%
+  bottom: 40px;
 }
 .IceCreamTask .bottom_box .binggao{
-  width: 115px;
-  height: 88px; 
+  width: 162px;
   position: absolute;
-  bottom: -23px;
-  left: -97px;
+  bottom: -47px;
+  left: -121px;
 }
 .IceCreamTask .bottom_box .right{
-  width: 332px;
-  height: 253px;
-  margin-left: 13px;
+  height: 356px;
   position: relative;
-  bottom: 56px;
-  left: 40px;
-  left: 21%;
+  bottom: 81px;
+  left: 15px;
 }
 .IceCreamTask .bottom_box .left .left_item{
-  width: 90px;
+  width: 125px;
   text-align: center;
   margin-bottom: 20px;
   text-align: center;
+  position: relative;
+  z-index: 2;
 }
 .IceCreamTask .bottom_box .left .left_item>div>img{
-  width: 90px;
+  width: 125px;
 }
 .IceCreamTask .bottom_box .left .left_item>img{
   width: 84px;
   cursor: pointer;
 }
+.hoverBank_btn{
+  cursor: pointer;
+  position: absolute;
+  left: -210px;
+  top: 60px;
+}
 </style>
 <template>
   <el-row class="IceCreamTask">
-    <div class="IceCreamTask_main">
-      <!-- 上面标题 -->
-      <div class="home_tit">
-        <img src="../../../assets/img/task/home_tit.png" alt="">
-        <p>活动时间：6月21日~8月21日</p>
-      </div>
-      <!-- 右边积分什么的 -->
-      <div class="right_box">
-        <div>
-          <img src="../../../assets/img/task/task_home3.png" alt="">
-          <p>当前积分：1500</p>
-        </div>
-        <img @click="descriptionShow = true" src="../../../assets/img/task/task_home5.png" alt="">
-        <img src="../../../assets/img/task/task_home8.png" alt="">
-        <img src="../../../assets/img/task/task_home6.png" alt="">
-      </div>
-      <!-- 底部一坨 -->
-      <div class="bottom_box">
-        <!-- 分类 -->
-        <div class="left">
-          <div class="left_item" v-for="item in list" @click="openLayer(item)">
+    <template>
+      <template v-if="!smallWindow">
+        <div class="IceCreamTask_main" >
+          <!-- 返回首页 -->
+          <router-link to='heel' class="hoverBank_btn">
+            <img v-if="hoverBank === 1" @mouseover="hoverBank = 2"  src="../../../assets/img/task/fanhuishouye1.png" alt="">
+            <img v-else @mouseout="hoverBank = 1" src="../../../assets/img/task/fanhuishouye.png" alt="">
+          </router-link>
+          <!-- 上面标题 -->
+          <div class="home_tit">
+            <img src="../../../assets/img/task/home_tit.png" alt="" :style="{height: Calculation ? `${height / 1080 * 482}px` : `${482 * zoom}px`}">
+            <p :style="{fontSize: `${24 * zoom}px`}">活动时间：{{beginTime[1]}}月{{beginTime[2]}}日~{{endTime[1]}}月{{endTime[2]}}日</p>
+          </div>
+          <!-- 右边积分什么的 -->
+          <div class="right_box" :style="{zoom: zoom}">
             <div>
-              <img :src="item.src" alt="">
+              <img src="../../../assets/img/task/task_home3.png" alt="">
+              <p>当前积分：1500</p>
             </div>
-            <img src="../../../assets/img/task/task_home2.png" alt="">
+            <img @click="descriptionShow = true" src="../../../assets/img/task/task_home5.png" alt="">
+            <img @click="signCalendarShow = true" src="../../../assets/img/task/task_home8.png" alt="">
+            <img src="../../../assets/img/task/task_home6.png" alt="">
+          </div>
+        </div>
+        <!-- 底部一坨 -->
+        <div class="bottom_box" >
+          <!-- 分类 -->
+          <div class="left" :style="{height: Calculation ? `${height / 1080 * 578}px` : `${578 * zoom}px`}">
+            <div class="left_item" v-for="item in list" @click="openLayer(item)">
+              <div>
+                <img :src="item.src" alt="">
+              </div>
+              <img src="../../../assets/img/task/task_home2.png" alt="">
+            </div>
+            <img class="caomei" src="../../../assets/img/task/caomei.png" alt="">
+          </div>
+          <!-- 就是那一只大象 -->
+          <div class="center">
+            <img :style="{height: Calculation ? `${height / 1080 * 386}px` :  `${386 * zoom}px`}" src="../../../assets/img/task/daxiang.png" alt="">
+            <img class="binggao" src="../../../assets/img/task/bingqiling.png" alt="">
+          </div>
+          <!-- 兑换商店 -->
+          <div class="right" :style="{height: Calculation ? `${height / 1080 * 356}px` :  `${356 * zoom}px`}">
+            <img :style="{height: Calculation ? `${height / 1080 * 356}px` :  `${356 * zoom}px`}" src="../../../assets/img/task/shangcehng.png" alt="">
+            <div :style="{height: Calculation ? `${height / 1080 * 114}px` :  `${114 * zoom}px`,width: Calculation ? `${width / 1960 * 107}px` :  `${107 * zoom}px`}" class="duihuanBtn"></div>
           </div>
-          <img class="caomei" src="../../../assets/img/task/caomei.png" alt="">
         </div>
-        <!-- 大象 -->
-        <div class="center">
-          <img src="../../../assets/img/task/daxiang.png" alt="">
-          <img class="binggao" src="../../../assets/img/task/bingqiling.png" alt="">
+      </template>
+      <template v-else>
+        <div class="IceCreamTask_main" >
+          <!-- 上面标题 -->
+          <div class="home_tit">
+            <img src="../../../assets/img/task/home_tit.png" alt="" :style="{height: Calculation ? `${height / 1080 * 482}px` : `${482 * zoom}px`}">
+            <p :style="{fontSize: `${24 * zoom}px`,bottom: '17px'}">{{beginTime[1]}}月{{beginTime[2]}}日~{{endTime[1]}}月{{endTime[2]}}日</p>
+          </div>
+          <!-- 右边积分什么的 -->
+          <div class="right_box" :style="{zoom: zoom}">
+            <div>
+              <img src="../../../assets/img/task/task_home3.png" alt="">
+              <p>当前积分：1500</p>
+            </div>
+            <img @click="descriptionShow = true" src="../../../assets/img/task/task_home5.png" alt="">
+            <img @click="signCalendarShow = true" src="../../../assets/img/task/task_home8.png" alt="">
+            <img src="../../../assets/img/task/task_home6.png" alt="">
+          </div>
         </div>
-        <!-- 兑换商店 -->
-        <div class="right">
-          <img src="../../../assets/img/task/shangcehng.png" alt="">
-          <div class="duihuanBtn"></div>
+        <!-- 底部一坨 -->
+        <div class="bottom_box" :style="{zoom: zoom, marginLeft: '22.33%',bottom: '32px'}">
+          <!-- 分类 -->
+          <div class="left" >
+            <div class="left_item" v-for="item in list" @click="openLayer(item)">
+              <div>
+                <img :src="item.src" alt="">
+              </div>
+              <img src="../../../assets/img/task/task_home2.png" alt="">
+            </div>
+            <img class="caomei" src="../../../assets/img/task/caomei.png" alt="">
+          </div>
+          <!-- 大象 -->
+          <div class="center">
+            <img  src="../../../assets/img/task/daxiang.png" alt="">
+            <img class="binggao" src="../../../assets/img/task/bingqiling.png" alt="">
+          </div>
+          <!-- 兑换商店 -->
+          <div class="right" >
+            <img  src="../../../assets/img/task/shangcehng.png" alt="">
+            <div class="duihuanBtn"></div>
+          </div>
         </div>
-      </div>
-    </div>
+      </template>
+    </template>
     <!-- 我的奖券 -->
-    <myTicket v-show="myTicketShow" @closeMyWindow="closeMyWindow" @openList="openList" name='Ticket'/>
+    <myTicket v-show="myTicketShow" @closeMyWindow="closeMyWindow" @openList="openList" :zoom="zoom" name='Ticket'/>
     <!-- 奖券列表 -->
-    <ticketList v-show="ticketShow" :ticketId='ticketId' @closeMyWindow="closeMyWindow" />
+    <ticketList v-show="ticketShow" :ticketId='ticketId' @closeMyWindow="closeMyWindow" :zoom="zoom" />
     <!-- 活动说明 -->
-    <description v-show="descriptionShow" :data="info" @closeMyWindow="closeMyWindow" name='Active'/>
+    <description v-show="descriptionShow" :data="info" @closeMyWindow="closeMyWindow" :zoom="zoom" name='Active'/>
     <!-- 全家桶 -->
-    <allHome v-show="allHomeShow" :data="info" @closeMyWindow="closeMyWindow" name='allHome'/>
+    <allHome v-show="allHomeShow" @closeMyWindow="closeMyWindow" name='allHome'/>
     <!-- 抽奖券 -->
-    <raffleTickets v-show="raffleTicketsShow" :data="info" @closeMyWindow="closeMyWindow" name='raffleTickets'/>
+    <raffleTickets v-show="raffleTicketsShow" @closeMyWindow="closeMyWindow" name='raffleTickets'/>
+    <!-- 我的兑换 -->
+    <myExchange v-show="myExchangeShow" @closeMyWindow="closeMyWindow" :zoom="zoom" name='myExchange'/>
+    <!-- 我的任务 -->
+    <myAssignment v-show="myAssignmentShow" @closeMyWindow="closeMyWindow" :zoom="zoom" name='myAssignment'/>
+    <!-- 签到 -->
+    <signCalendar v-show="signCalendarShow" @closeMyWindow="closeMyWindow" :zoom="zoom" name='signCalendar'/>
+    <!-- 我的冰淇淋 -->
+    <myIceCream v-show="IceCreamShow" @closeMyWindow="closeMyWindow" :zoom="zoom" name='myIceCream'/>
   </el-row>
 </template>
 <script>
 import myTicket from './myTicket'
+import myExchange from './myExchange'
+import myAssignment from './assignment'
 import description from './description'
 import allHome from './allHome'
 import raffleTickets from './raffleTickets'
 import ticketList from './ticketList'
+import signCalendar from './signCalendar'
+import myIceCream from './myIceCream'
 export default {
   components: {
     myTicket,
     description,
     allHome,
     raffleTickets,
-    ticketList
+    ticketList,
+    myExchange,
+    myAssignment,
+    signCalendar,
+    myIceCream
   },
   data(){
     return{
+      zoom: 1,
       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，其他人获得小红包。',
+      Calculation: false,
+      myExchangeShow: false,
+      myAssignmentShow: false,
+      signCalendarShow: false,
+      smallWindow: false,
+      IceCreamShow: false,
+      height: 0,
+      width: 0,
+      userInfo: {},
+      beginTime: '',
+      endTime: '',
+      info: '',
+      hoverBank: 1,
       list: [
         {
           id: 0,
@@ -248,6 +334,12 @@ export default {
     openLayer: function (obj) {
       if (obj.id === 2) {
         this.myTicketShow = true;
+      } else if (obj.id === 4) {
+        this.myExchangeShow = true;
+      } else if (obj.id === 0) {
+        this.myAssignmentShow = true;
+      } else if (obj.id === 1) {
+        this.IceCreamShow = true;
       }
     },
     closeMyWindow: function (val) {
@@ -262,10 +354,76 @@ export default {
       } else if (val === 'ticket') {
         this.ticketShow = false
         this.myTicketShow = true
+      } else if (val === 'Exchange') {
+        this.myExchangeShow = false 
+      } else if (val === 'myAssignment') {
+        this.myAssignmentShow = false 
+      } else if (val === 'signCalendar') {
+        this.signCalendarShow = false 
+      } else if (val === 'myIceCream') {
+        this.IceCreamShow = false 
       }
+    },
+    //初始化任务
+    initTask: function (){
+      let msg = {
+        customerId: this.userInfo.customerId,
+        activityId: 1
+      };
+      this.apiJavaPost(
+        "/api/mactivity/initTask",
+        msg,
+        res => {
+          if (res.data.resultCode == 1) {
+             
+          } else {
+            this.Error(res.data.message);
+          }
+        },
+        null
+      );
+    },
+    //获取活动信息
+    getActivity: function (){
+      let msg = {
+        id: null,
+        link: this.$route.name
+      };
+      this.apiJavaPost(
+        "/api/mactivity/getActivity",
+        msg,
+        res => {
+          if (res.data.resultCode == 1) {
+            let data = res.data.data
+            this.beginTime = data.beginTime.split('T')[0].split('-')
+            this.endTime = data.endTime.split('T')[0].split('-')
+            this.info = data.remark
+          } else {
+            this.Error(res.data.message);
+          }
+        },
+        null
+      );
     }
   },mounted(){
-
+    // 获取活动信息
+    this.getActivity()
+  },created(){
+    this.userInfo = JSON.parse(localStorage.userInfo)
+    //初始化任务
+    this.initTask()
+    let Height = window.innerHeight
+    let Width = window.innerWidth
+    let oHeight = window.outerHeight
+    let oWidth = window.outerWidth
+    this.height = Height
+    this.width = Width
+    this.Calculation = Width/Height - 1.77 > 0.02 ? true : false
+    console.log(Height, Width, oHeight, oWidth,Width/Height, this.Calculation, Width/Height - 1.77)
+    if (oWidth < 1920) {
+      this.smallWindow = true
+    }
+    this.zoom = Math.round((Height/1080) * 100) / 100
   }
 }
 </script>

src/components/taskPage/IceCream/assignment.vue

+<style>
+.assignment {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2018;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.assignment .assignment_bg {
+  height: 718px;
+  width: 872px;
+  background: url("../../../assets/img/task/renwu_bg.png");
+  background-size: 100% 100%;
+  position: relative;
+}
+.assignment .assignment_close {
+  position: absolute;
+  top: 145px;
+  right: -10px;
+  cursor: pointer;
+}
+.assignment .assignment_box {
+  margin-top: 258px;
+  height: 405px;
+  padding: 0 0 0 85px;
+  overflow: auto;
+  margin-right: 85px;
+}
+.assignment .assignment_box::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 14px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 47px;
+}
+.assignment .assignment_box::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 4px;
+  background: rgba(255, 197, 21, 1);
+}
+.assignment .assignment_box::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  border-radius: 4px;
+  background: rgba(204, 68, 39, 1);
+}
+.assignment .assignment_box .assignment_item {
+  margin: 0 25px 5px 0;
+  padding: 7px 16px;
+  display: flex;
+  align-items: center;
+  background-color: rgba(255, 231, 85, 1);
+  background-image: -webkit-linear-gradient(#ffe34d, #ffc208);
+  background-image: linear-gradient(#ffe34d, #ffc208);
+  border-radius: 8px;
+}
+.assignment .assignment_box .assignment_item .item_img {
+  width: 83px;
+  height: 83px;
+  margin-right: 14px;
+  background: url("../../../assets/img/task/renwu_left_bg.png");
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.assignment .assignment_box .assignment_item .item_info {
+  margin-right: 36px;
+}
+.assignment .assignment_box .assignment_item .item_info ._name {
+  font-size: 32px;
+  font-family: "PingFangR";
+  font-weight: bold;
+  color: rgba(255, 255, 255, 1);
+  -webkit-text-stroke: 2px rgba(185, 51, 0, 1);
+  min-width: 350px;
+  max-width: 350px;
+  overflow: hidden;
+}
+.assignment .assignment_box .assignment_item .item_info ._info {
+  font-size: 16px;
+  font-family: "PingFangR";
+  font-weight: bold;
+  color: rgba(180, 64, 47, 1);
+}
+.assignment .assignment_box .assignment_item .item_btn img {
+  display: block;
+  cursor: pointer;
+}
+.assignment .assignment_box .assignment_item .item_btn ._gray {
+  background-color: #CCCCCC;
+  color: white;
+  display: inline-block;
+  width: 148px;
+  height: 58px;
+  line-height: 58px;
+  text-align: center;
+  font-size: 28px;
+  font-family: "PingFangR";
+  font-weight: bold;
+  color: rgba(255, 255, 255, 1);
+  border-radius: 17px
+}
+.assignment .assignment_box .assignment_item .item_btn ._gray._green{
+  background-color: #5FBF8D;
+}
+</style>
+<template>
+  <div class="assignment">
+    <div class="assignment_bg" :style="{zoom: zoom}">
+      <ul class="assignment_box">
+        <li class="assignment_item" v-for="(item, index) in dataList">
+          <div class="item_img">
+            <img src="../../../assets/img/task/bingqiling1.png" alt>
+          </div>
+          <div class="item_info">
+            <p class="_name">{{item.taskName}}</p>
+            <p class="_info">{{item.awardMaterials}}</p>
+          </div>
+          <div class="item_btn">
+            <img v-if="item.taskStatus === 0" src="../../../assets/img/task/renwu_qu.png" alt>
+            <span class="_gray _green" v-else-if="item.taskStatus === 1">已完成</span>
+            <span class="_gray" v-else>未完成</span>
+          </div>
+        </li>
+      </ul>
+      <div
+        @mouseover="closeShow = 1"
+        @mouseout="closeShow = 2"
+        class="assignment_close"
+        @click="close"
+      >
+        <img v-if="closeShow === 2" src="../../../assets/img/task/renwu_close.png" alt>
+        <img v-else src="../../../assets/img/task/renwu_close.png" alt>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["zoom"],
+  data() {
+    return {
+      closeShow: 2,
+      dataList: [],
+    };
+  },
+  methods: {
+    getTask: function(customerId) {
+      let msg = {
+        customerId: customerId,
+        activityId: 1
+      };
+      this.apiJavaPost(
+        "/api/mactivity/getTask",
+        msg,
+        res => {
+          if (res.data.resultCode == 1) {
+            let data = res.data.data
+            this.dataList = data;
+          } else {
+            this.Error(res.data.message);
+          }
+        },
+        null
+      );
+    },
+    close: function() {
+      this.$emit("closeMyWindow", "myAssignment");
+    }
+  },
+  mounted() {
+    let userInfo = JSON.parse(localStorage.userInfo)
+    this.getTask(userInfo.customerId);
+  }
+};
+</script>

src/components/taskPage/IceCream/description.vue

@@ -12,19 +12,20 @@
   justify-content: center;
 }
 .description .description_bg{
-  height: 397px;
-  width: 337px;
+  height: 558px;
+  width: 474px;
   background: url('../../../assets/img/task/des_bg.png');
   background-size: 100% 100%;
   position: relative;
 }
 .description_info{
-  font-size: 12px;
-  color: #494949;
-  padding: 180px 60px  0 60px;
+  padding: 251px 89px 0 89px;
+  font-weight: bold;
+  font-size: 14px;
+  font-family: 'PingFangR';
 }
 .description_info p{
-  max-height: 132px;
+  max-height: 186px;
   overflow: auto;
 }
 .description_info p::-webkit-scrollbar{
@@ -45,11 +46,13 @@
 }
 .description_close{
   text-align: center;
-  padding-top: 30px;
+  position: absolute;
+  width: 100%;
+  bottom: 25px;
 }
 .description_close img{
-  width: 137px;
-  height: 35px;
+  width: 192px;
+  height: 49px;
   cursor: pointer;
 }
 .description_bg>img{
@@ -63,7 +66,7 @@
 </style>
 <template>
   <div class="description">
-    <div class="description_bg">
+    <div class="description_bg" :style="{zoom: zoom}">
       <div class="description_info">
         <p>{{data}}</p>
       </div>
@@ -79,7 +82,7 @@
 </template>
 <script>
 export default {
-  props:['data'],
+  props:['data', 'zoom'],
   data(){
     return{
       closeShow: 2

src/components/taskPage/IceCream/myExchange.vue

+<style scoped>
+.myExchange{
+  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;
+}
+.myExchange .myExchange_bg{
+  height: 727px;
+  width: 935px;
+  background: url('../../../assets/img/task/duihuan_bg.png');
+  background-size: 100% 100%;
+  position: relative;
+}
+.myExchange .myExchange_box{
+  padding: 202px 65px 55px 65px;
+  display: flex;
+  /* justify-content: space-between; */
+  flex-wrap: wrap;
+}
+.myExchange .myExchange_box .item{
+  width: 198px;
+  height: 220px;
+  background: url('../../../assets/img/task/duihuan_small_bg.png');
+  background-size: 100% 100%;
+  margin-bottom: 30px;
+  text-align: center;
+  position: relative;
+}
+.myExchange .myExchange_box .item .item_img{
+  height: 139px;
+  max-width: 70%;
+  margin: 20px auto 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.myExchange .myExchange_box .item .item_img img{
+  max-height: 139px;
+  max-width: 70%;
+}
+.myExchange .myExchange_box .item .item_name{
+  font-size: 16px;
+  color: rgba(72, 17, 0, 1);
+  width: 125px;
+  height: 33px;
+  background:rgba(255,204,0,1);
+  box-shadow: 0px 2px 7px 0px rgba(255,114,0,0.5);
+  border-radius: 16px;
+  display: inline-block;
+  line-height: 33px;
+  cursor: pointer;
+  transition: all linear .5s;
+}
+.myExchange .myExchange_box .item .item_name:hover{
+  background:rgb(239, 194, 18);
+}
+.myExchange .myExchange_close{
+  position: absolute;
+  right: 0;
+  top: 135px;
+  cursor: pointer;
+}
+.myExchange .myExchange_box .item .right_number{
+  display: inline-block;
+  width:39px;
+  height:39px;
+  background:rgba(255,86,86,1);
+  border-radius:50%;
+  text-align: center;
+  line-height: 39px;
+  font-weight:500;
+  color:rgba(255,255,255,1);
+  font-size: 20px;
+  font-family: 'PingFangR';
+  position: absolute;
+  right: 5px;
+}
+</style>
+<template>
+  <div class="myExchange">
+    <div class="myExchange_bg" :style="{zoom: zoom}">
+      <div class="myExchange_box">
+        <div class="item" v-for="(item, index) in list">
+          <span class="right_number">x1</span>
+          <div class="item_img">
+            <img :src="item.src" alt="">
+          </div>
+          <span class="item_name">{{item.name}}</span>
+        </div>
+      </div>
+      <div @mouseover="closeShow = 1" @mouseout="closeShow = 2" class="myExchange_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>
+export default {
+  props: ['zoom'],
+  data(){
+    return{
+      closeShow: 2,
+      list: [
+        {
+          id: 0,
+          name: '签证',
+          src: require('../../../assets/img/task/img1.png'),
+        },
+        {
+          id: 1,
+          name: '特价机票',
+          src: require('../../../assets/img/task/img2.png'),
+        },
+        {
+          id: 2,
+          name: '跟团游',
+          src: require('../../../assets/img/task/img3.png'),
+        },
+        {
+          id: 3,
+          name: '当地游',
+          src: require('../../../assets/img/task/img4.png'),
+        },
+        {
+          id: 4,
+          name: '自由行',
+          src: require('../../../assets/img/task/img5.png'),
+        },
+        {
+          id: 5,
+          name: '抽奖券',
+          src: require('../../../assets/img/task/img6.png'),
+        }
+      ]
+    }
+  },methods:{
+    close: function () {
+      this.$emit('closeMyWindow', 'Exchange')
+    },
+  },mounted(){
+
+  }
+
+}
+</script>

src/components/taskPage/IceCream/myIceCream.vue

+<style scoped>
+.myIceCream{
+  width: 100%;
+  height: 100%;
+  background:rgba(0, 0, 0, .5);
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.myIceCream .myIceCream_bg{
+  height: 546px;
+  width: 925px;
+  background: url('../../../assets/img/task/ice/ice_bg.png');
+  background-size: 100% 100%;
+  position: relative;
+}
+.myIceCream_close{
+  position: absolute;
+  right: -15px;
+  top: -15px;
+  cursor: pointer;
+  width: 51px;
+}
+.myIceCream .container{
+  padding: 25px 19px;
+  position: relative;
+  height: 100%;
+  box-sizing: border-box;
+}
+.myIceCream .container .tittle .no_active{
+  cursor: pointer;
+}
+.myIceCream .container .tittle{
+  width: 875px;
+  padding-left: 30px;
+  position: absolute;
+  top: -82px;
+  z-index: 1;
+}
+.myIceCream .container .shatansan{
+  position: absolute;
+  left: 0;
+  top: -42px;
+  z-index: 2;
+}
+.myIceCream .container .myice{
+  padding: 40px 0;
+}
+.myIceCream .container .myIceCream_left_nav li{
+  width: 124px;
+  height: 68px;
+  margin-bottom: 25px;
+}
+.myIceCream .container .myIceCream_left_nav li div{
+  width: 124px;
+  height: 68px;
+  cursor: pointer;
+  position: relative;
+}
+.myIceCream .container .myIceCream_left_nav li div img{
+  position: absolute;
+  right: 0;
+  top: -30px;
+  zoom: .28;
+}
+.myIceCream .container .myIceCream_left_nav li div span,.allHome .allHome_left .quanjiatong span{
+  position: absolute;
+  right: -13px;
+  top: 10px;
+  width: 20px;
+  height: 20px;
+  background:rgba(255,86,86,1);
+  box-shadow:2px 0px 1px 0px rgba(0, 0, 0, 0.35), 0px 3px 3px 0px rgba(255,237,188,0.49);
+  border-radius: 50%;
+  font-size: 14px;
+  font-family: 'PingFangR';
+  font-weight: bold;
+  color: rgba(255,255,255,1);
+  text-align: center;
+}
+.myIceCream_center div._pro{
+  width: 340px;
+  height: 340px;
+  margin: 0 auto;
+  background: url('../../../assets/img/task/ice/qipao.png');
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.myIceCream_center div._pro img{
+  zoom: .8
+}
+.myIceCream_center div._btn{
+  text-align: center;
+  margin-top: -25px;
+  margin-bottom: 18px;
+}
+.myIceCream_center div._btn img{
+  display: inline-block;
+  height: 50px;
+  cursor: pointer;
+}
+.myIceCream_center div._need{
+  width: 245px;
+  text-align: center;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.myIceCream_center div._need ._need_item{
+  width: 50px;
+  height: 50px;
+  background:rgba(255,204,0,1);
+  box-shadow:1px 1px 0px 0px rgba(142,80,0,0.65), 3px 1px 5px 0px rgba(255,120,0,0.5);
+  border-radius:10px;
+  box-sizing: border-box;
+  padding-top: 5px;
+  position: relative;
+}
+.myIceCream_center div._need ._need_item>div{
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+}
+.myIceCream_center div._need ._need_item ._need_item_count{
+  width: 16px;
+  height: 16px;
+  color: white;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 16px;
+  position: absolute;
+  right: -5px;
+  top: -5px;
+  background-color: #ff5656;
+}
+.myIceCream_center div._need ._need_item img{
+  zoom: .3;
+}
+.myIceCream_center div._need ._need_item ._need_item_name{
+  height: 15px;
+  background-color: #FF9600;
+  line-height: 13px;
+  margin-top: 8px;
+}
+.myIceCream_center div._need ._need_item span{
+  font-size: 12px;
+  color: white;
+}
+.myIceCream_center div._need ._jiasuan{
+  width:16px;
+  height:16px;
+  background:rgba(255,148,21,1);
+  border-radius:50%;
+  display: inline-block;
+  text-align: center;
+  color: white;
+  font-size: 12px;
+}
+.myIceCream_right>div,.allHome_right>div{
+  width: 355px;
+  height: 438px;
+  background: url('../../../assets/img/task/ice/cailiaobao.png');
+  background-size: 100% 100%;
+  box-sizing: border-box;
+  padding: 130px 60px 100px;
+  position: relative;
+}
+.myIceCream_right .myIceCream_right_item,.allHome_right .myIceCream_right_item{
+  position: relative;
+  width:92px;
+  height:91px;
+  margin: 0 10px 10px 10px;
+  float: left;
+}
+.myIceCream_right .myIceCream_right_item ._box,.allHome_right .myIceCream_right_item ._box{
+  width:92px;
+  height:91px;
+  background:radial-gradient(circle,rgba(255,207,10,1) 0%,rgba(255,227,111,1) 100%);
+  box-shadow:1px 1px 0px 0px rgba(142,80,0,0.65), 2px 3px 5px 0px rgba(255,120,0,0.5);
+  border-radius:10px;
+  float: left;
+  text-align: center;
+  box-sizing: border-box;
+  padding-top: 10px;
+  overflow: hidden;
+}
+.allHome_right .myIceCream_right_item ._box{
+  width: 100px;
+}
+.myIceCream_right .myIceCream_right_item ._right_item_img_box,.allHome_right .myIceCream_right_item ._right_item_img_box{
+  min-height: 57px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+.myIceCream_right .myIceCream_right_item ._right_item_img_box img,.allHome_right .myIceCream_right_item ._right_item_img_box img{
+  max-height: 57px;
+}
+.myIceCream_right .myIceCream_right_item ._right_item_name,.allHome_right .myIceCream_right_item ._right_item_name{
+  background-color: #FF9600;
+  color: white;
+  border-radius:10px;
+  width: 100px;
+  margin-left: -5px;
+  margin-top: 2px;
+}
+.allHome_right .myIceCream_right_item ._right_item_name{
+  width: 110px;
+}
+.allHome_right .myIceCream_right_item ._right_item_name span{
+  font-size: 12px;
+  zoom: .7;
+}
+.myIceCream_right .icecar{
+  margin-left: 40px
+}
+.myIceCream_right .myIceCream_right_item ._number,.allHome_right .myIceCream_right_item ._number{
+  position: absolute;
+  right: -8px;
+  top: -5px;
+  min-width: 20px;
+  height: 20px;
+  background:rgba(255,86,86,1);
+  box-shadow:2px 0px 1px 0px rgba(0, 0, 0, 0.35), 0px 3px 3px 0px rgba(255,237,188,0.49);
+  border-radius: 50%;
+  font-size: 14px;
+  font-family: 'PingFangR';
+  font-weight: bold;
+  color: rgba(255,255,255,1);
+  text-align: center;
+  line-height: 20px;
+}
+.myIceCream .container .allHome{
+  padding: 30px 0 40px 0;
+  box-sizing: border-box;
+  height: 100%;
+}
+.myIceCream .container .allHome .el-col{
+  position: relative;
+  height: 100%;
+}
+.myIceCream .container .allHome .allHome_left img.daxiang{
+  padding: 40px 0;
+  box-sizing: border-box;
+  height: 100%;
+  position: absolute;
+  bottom: -45px;
+  left: 3px;
+}
+.myIceCream .container .allHome .allHome_left .quanjiatong{
+  position: absolute;
+  top: -12px;
+}
+.myIceCream .container .allHome .myIceCream_center ._pro{
+  width: 400px;
+  height: 400px;
+  margin-top: -20px;
+}
+.myIceCream .container .allHome .myIceCream_center ._pro{
+  zoom: 1
+}
+.myIceCream .container .allHome .myIceCream_center ._btn{
+  margin-left: 20px;
+}
+.allHome_right .icecar{
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+}
+.allHome_right>div{
+  height: 462px;
+}
+</style>
+<template>
+  <div class="myIceCream">
+    <div class="myIceCream_bg" :style="{zoom: zoom}">
+      <div class="container clearfix">
+        <img class="shatansan" src="../../../assets/img/task/ice/shatansan.png" alt="">
+        <el-row class="tittle">
+          <el-col :span="1">&nbsp;</el-col>
+          <el-col :span="10" class="my_ice">
+            <img v-if="activeIce === 1" src="../../../assets/img/task/ice/wd_at.png" alt="">
+            <img class="no_active" v-else @click="activeIce = 1" src="../../../assets/img/task/ice/wd_nt.png" alt="">
+          </el-col>
+          <el-col :span="1">&nbsp;</el-col>
+          <el-col :span="10" class="home_ice">
+            <img v-if="activeIce === 2" src="../../../assets/img/task/ice/qjt_at.png" alt="">
+            <img class="no_active" v-else @click="activeIce = 2" src="../../../assets/img/task/ice/qjt_nt.png" alt="">
+          </el-col>
+           <el-col :span="1">&nbsp;</el-col>
+        </el-row>
+        <template>
+          <el-row v-if="activeIce === 1" class="myice">
+            <template v-if="iceDate.length > 0">
+              <el-col :span="4">
+                <ul class="myIceCream_left_nav">
+                  <li v-for="(item, index) in iceDate" :key="index">
+                    <div :style="{background: 'url('+item.bgImg+')',backgroundSize: '100% 100%'}" @click="FilterMaterial(index)">
+                      <!-- <template v-if="item.Amount > 0" > -->
+                        <img :src="item.img" alt="">
+                        <span>{{`x${item.Amount}`}}</span>
+                      <!-- </template>
+                      <template v-else>
+                        <img :src="item.imgNo" alt="">
+                      </template> -->
+                    </div>
+                  </li>
+                </ul>
+              </el-col>
+              <el-col :span="10" class="myIceCream_center">
+                <div class="_pro">
+                  <img :src="iceDate[Synthesis].img" alt="">
+                </div>
+                <div class="_btn">
+                  <img src="../../../assets/img/task/ice/hecheng_btn.png" @click="setFuseMaterial()" alt="">
+                </div>
+                <div class="_need"> 
+                  <template v-for="(item, index) in SeasoningList">
+                    <div class="_need_item">
+                      <span class="_need_item_count">{{item.needCount}}</span>
+                      <div>
+                        <div>
+                          <img :src="item.img" alt="">
+                        </div>
+                        <div class="_need_item_name">
+                          <span>{{item.name}}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <span class="_jiasuan" v-if="index !== SeasoningList.length-1">X</span>
+                  </template>
+                </div>
+              </el-col>
+              <el-col :span="10" class="myIceCream_right">
+                <div class="clearfix">
+                  <template v-for="(item, index) in SeasoningList">
+                    <div class="myIceCream_right_item" >
+                      <span class="_number" v-if="item.Amount > 1">{{`x${item.Amount}`}}</span>
+                      <div class="_box" :style="{background: item.Amount > 1 ? 'radial-gradient(circle,rgba(255,207,10,1) 0%,rgba(255,227,111,1) 100%)' : '#A4A4A4',boxShadow: item.Amount > 1 ? '1px 1px 0px 0px rgba(142,80,0,0.65), 2px 3px 5px 0px rgba(255,120,0,0.5)' : 'none'}">
+                        <div class="_right_item_img_box">
+                          <img :src="item.img" :style="{filter: item.Amount > 1 ? '' : 'grayscale(100%)'}" alt="">
+                        </div>
+                        <div class="_right_item_name" :style="{background: item.Amount > 1 ? '#FF9600' : '#cccccc'}">
+                          <span>{{item.name}}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                  <img class="icecar" src="../../../assets/img/task/ice/icecar.png" alt="">
+                </div>
+              </el-col>
+            </template>
+          </el-row>
+          <el-row v-else class="allHome">
+            <el-col :span="4" class="allHome_left">
+              <div class="quanjiatong">
+                <span>{{`x${UserFamilyInventory.Amount}`}}</span>
+                <img src="../../../assets/img/task/ice/bql_06.png" alt="">
+              </div>
+              <img class="daxiang" src="../../../assets/img/task/ice/daxiang.png" alt="">
+            </el-col>
+            <el-col :span="10" class="myIceCream_center">
+              <div class="_pro">
+                <img src="../../../assets/img/task/ice/allhome.png" alt="">
+              </div>
+              <div class="_btn">
+                <img src="../../../assets/img/task/ice/hecheng_btn.png" @click="setFuseMaterial('all')" alt="">
+              </div>
+            </el-col>
+            <el-col :span="10" class="allHome_right">
+              <div class="clearfix">
+                <template v-for="(item, index) in iceDate">
+                  <div class="myIceCream_right_item" >
+                    <span class="_number" v-if="item.Amount > 0">{{`x${item.Amount}`}}</span>
+                    <div class="_box" :style="{background: item.Amount > 0 ? 'radial-gradient(circle,rgba(255,207,10,1) 0%,rgba(255,227,111,1) 100%)' : '#A4A4A4',boxShadow: item.Amount > 0 ? '1px 1px 0px 0px rgba(142,80,0,0.65), 2px 3px 5px 0px rgba(255,120,0,0.5)' : 'none'}">
+                      <div class="_right_item_img_box">
+                        <img :src="item.img" :style="{filter: item.Amount > 0 ? '' : 'grayscale(100%)'}" alt="">
+                      </div>
+                      <div class="_right_item_name" :style="{background: item.Amount > 0 ? '#FF9600' : '#cccccc'}">
+                        <span>{{item.MaterialName}}</span>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+                <img class="icecar" src="../../../assets/img/task/ice/icecar.png" alt="">
+              </div>
+            </el-col>
+          </el-row>
+        </template>
+      </div>
+      <div @mouseover="closeShow = 1" @mouseout="closeShow = 2" class="myIceCream_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>
+export default {
+  props:['data', 'zoom'],
+  data(){
+    return{
+      closeShow: 2,
+      activeIce: 1,
+      iceDate: [],
+      userInfo: {},
+      Synthesis: 0,
+      userSeasoning: [],
+      SeasoningList: [],
+      UserFamilyInventory: {},
+    }
+  },methods:{
+    //获取全家桶
+    getUserFamilyInventory: function () {
+      let msg = {
+        customerId: this.userInfo.customerId,
+        activityId: 1
+      };
+      this.apiJavaPost(
+        "/api/mactivity/getUserFamilyInventory",
+        msg,
+        res => {
+          if (res.data.resultCode == 1) {
+            let data = res.data.data
+            this.UserFamilyInventory = data[0]
+          } else {
+            this.Error(res.data.message);
+          }
+        },
+        null
+      );
+    },
+    //合成
+    setFuseMaterial: function (type) {
+      let msg = {
+        targetId: type ? this.UserFamilyInventory.MaterialsId : this.iceDate[this.Synthesis].MaterialsId,
+        customerId: this.userInfo.customerId,
+      }
+      this.apiJavaPost(
+        "/api/mactivity/setFuseMaterial",
+        msg,
+        res => {
+          if (res.data.resultCode == 1) {
+            this.$message.success('合成成功！')
+            if (type) {
+              this.getUserFamilyInventory()
+            }
+            this.getUserCreamsInventory()
+          } else {
+            this.Error(res.data.message);
+          }
+        },
+        null
+      );
+    },
+    // 根据选中 筛选对应的材料数据
+    FilterMaterial: function (index) {
+      this.Synthesis = index
+      // let ids = []
+      // console.log(this.iceDate[index].compounds)
+      // for(let i = 0; i < this.iceDate[index].compounds.length; i++) {
+      //   ids.push(this.iceDate[index].compounds[i].soureceMaterials)
+      // }
+      let SeasoningList = [];
+      for(let i = 0; i < this.iceDate[index].compounds.length; i++) {
+        for(let o = 0; o < this.userSeasoning.length; o++) {
+          if (this.iceDate[index].compounds[i].soureceMaterials === this.userSeasoning[o].MaterialsId) {
+            let obj = this.iceDate[index].compounds[i]
+            obj.img = this.userSeasoning[o].src
+            obj.name = this.userSeasoning[o].MaterialName
+            obj.Amount = this.userSeasoning[o].Amount
+            SeasoningList.push(obj)
+            break
+          }
+        }
+      }
+      this.SeasoningList = SeasoningList
+    },
+    // 获取用户所有材料列表
+    getUserMaterialsInventory: function () {
+      let msg = {
+        customerId: this.userInfo.customerId,
+        activityId: 1
+      };
+      this.apiJavaPost(
+        "/api/mactivity/getUserMaterialsInventory",
+        msg,
+        res => {
+          if (res.data.resultCode == 1) {
+            let data = res.data.data
+            let list = []
+            data.forEach(x => {
+              let obj = x
+              if (x.MaterialName === '牛奶') {
+                x.src = require('../../../assets/img/task/ice/niunai.png')
+              } else if (x.MaterialName === '糖') {
+                x.src = require('../../../assets/img/task/ice/tangg.png')
+              } else if (x.MaterialName === '蛋黄') {
+                x.src = require('../../../assets/img/task/ice/danhuang.png')
+              } else if (x.MaterialName === '酸奶') {
+                x.src = require('../../../assets/img/task/ice/suannai.png')
+              } else if (x.MaterialName === '草莓') {
+                x.src = require('../../../assets/img/task/ice/caomei.png')
+              } else if (x.MaterialName === '葡萄干') {
+                x.src = require('../../../assets/img/task/ice/putaogan.png')
+              } else if (x.MaterialName === '巧克力') {
+                x.src = require('../../../assets/img/task/ice/qiaokeli.png')
+              } else if (x.MaterialName === '礼盒') {
+                x.src = require('../../../assets/img/task/ice/lihe.png')
+              }
+              list.push(obj)
+            })
+            this.userSeasoning = list
+            this.FilterMaterial(0)
+          } else {
+            this.Error(res.data.message);
+          }
+        },
+        null
+      );
+    },
+    // 获取冰淇淋
+    getUserCreamsInventory: function () {
+      let msg = {
+        customerId: this.userInfo.customerId,
+        activityId: 1
+      };
+      this.apiJavaPost(
+        "/api/mactivity/getUserCreamsInventory",
+        msg,
+        res => {
+          if (res.data.resultCode == 1) {
+            let data = res.data.data
+            let list = []
+            data.forEach(x => {
+              if (x.MaterialType === 1) {
+                let obj = x
+                if (x.MaterialName === '蒙牛冰淇淋') {
+                  x.bgImg = require('../../../assets/img/task/ice/img-5.png')
+                  x.img = require('../../../assets/img/task/ice/bql_05.png')
+                  x.imgNo = require('../../../assets/img/task/ice/bql_05n.png')
+                } else if (x.MaterialName === 'DQ冰淇淋') {
+                  x.bgImg = require('../../../assets/img/task/ice/img-4.png')
+                  x.img = require('../../../assets/img/task/ice/bql_04.png')
+                  x.imgNo = require('../../../assets/img/task/ice/bql_04n.png')
+                } else if (x.MaterialName === '明治冰淇淋') {
+                  x.bgImg = require('../../../assets/img/task/ice/img-3.png')
+                  x.img = require('../../../assets/img/task/ice/bql_03.png')
+                  x.imgNo = require('../../../assets/img/task/ice/bql_03n.png')
+                } else if (x.MaterialName === '和路雪冰淇淋') {
+                  x.bgImg = require('../../../assets/img/task/ice/img-2.png')
+                  x.img = require('../../../assets/img/task/ice/bql_02.png')
+                  x.imgNo = require('../../../assets/img/task/ice/bql_02n.png')
+                } else if (x.MaterialName === '哈根达斯冰淇淋') {
+                  x.bgImg = require('../../../assets/img/task/ice/img-1.png')
+                  x.img = require('../../../assets/img/task/ice/bql_01.png')
+                  x.imgNo = require('../../../assets/img/task/ice/bql_01n.png')
+                }
+                list.push(obj)
+              }
+            });
+            this.iceDate = list
+            this.getUserMaterialsInventory()
+          } else {
+            this.Error(res.data.message);
+          }
+        },
+        null
+      );
+    },
+    close: function () {
+      this.$emit('closeMyWindow', 'myIceCream')
+    }
+  },mounted(){
+    this.userInfo = JSON.parse(localStorage.userInfo)
+    this.getUserCreamsInventory()
+    this.getUserFamilyInventory()
+  }
+}
+</script>

src/components/taskPage/IceCream/myTicket.vue

@@ -65,7 +65,7 @@
 </style>
 <template>
   <div class="myTicket">
-    <div class="myTicket_bg">
+    <div class="myTicket_bg" :style="{zoom: zoom}">
       <div class="myTicket_box">
         <div class="item" v-for="(item, index) in list">
           <div class="item_img">
@@ -84,6 +84,7 @@
 
 <script>
 export default {
+  props: ['zoom'],
   data(){
     return{
       closeShow: 2,

src/components/taskPage/IceCream/raffleTickets.vue

@@ -46,7 +46,7 @@
   font-family: 'PingFangR';
   position: absolute;
   left: 166px;
-  top: 167px;
+  top: 203px;
   text-align: center;
 }
 .raffleTickets .tips .small{
@@ -64,10 +64,6 @@
           <p>抽奖券</p>
           <p class="small">仅限于（2019年8月21日 21：）“  狂欢夜·瓜分百万现金  ”活动中使用</p>
         </div>
-        <div @mouseover="closeShow = 1" @mouseout="closeShow = 2" class="raffleTickets_close">
-          <img  @click="close" v-if="closeShow === 2" src="../../../assets/img/task/quan_lq.png" alt="">
-          <img  @click="close" v-else src="../../../assets/img/task/quan_lq1.png" alt="">
-        </div>
       </div>
       <img @click="close" src="../../../assets/img/task/des_close.png" alt="">
     </div>
@@ -78,7 +74,6 @@ export default {
   props:['data'],
   data(){
     return{
-      closeShow: 2
     }
   },methods:{
     close: function () {

src/components/taskPage/IceCream/signCalendar.vue

+<style>
+.signCalendar{
+  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;
+}
+.signCalendar .signCalendar_bg{
+  min-height: 666px;
+  width: 498px;
+  background: url('../../../assets/img/task/qiandao_bg.png');
+  background-size: 100% 100%;
+  position: relative;
+  box-sizing: border-box;
+  padding: 156px 67px 108px 13px;
+}
+.signCalendar .signCalendar_bg>img{
+  position: absolute;
+  right: -40px;
+  top: 66px;
+  cursor: pointer;
+  width: 38px;
+  height: 38px;
+}
+.signCalendar .signCalendar_bg .signCalendar_tit{
+  text-align: center;
+  color: #FFFFFF;
+}
+.signCalendar .signCalendar_bg .signCalendar_tit .el-icon{
+  cursor: pointer;
+}
+.signCalendar .signCalendar_bg .signCalendar_tit span{
+  padding: 0 60px;
+  font-weight:800;
+  font-family: 'PingFangR'
+}
+.signCalendar .signCalendar_box{
+  padding: 26px 25px;
+}
+.signCalendar .signCalendar_box .signCalendar_box_tit{
+  padding: 0 15px;
+  font-size: 20px;
+  font-weight: 600;
+  font-family: 'PingFangR';
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 30px;
+  background:rgba(255,167,72,1);
+  border-radius:15px;
+  color: white;
+}
+.signCalendar .monthDayList{
+  padding: 10px 0;
+}
+.signCalendar .monthDayList .dayList {
+  position: relative;
+  float: left;
+  width: 42px;
+  height: 48px;
+  border: none;
+  font-size: 12px;
+  text-align: center;
+  box-sizing: border-box;
+  margin: 5px;
+}
+.signCalendar .monthDayList .dayList.behind{
+  background-color: #FFF5B9 !important;
+}
+.signCalendar .monthDayList .dayList.behind div{
+  color: #FF8400 !important;
+  border-color: #FF8400 !important;
+}
+.signCalendar .monthDayList .dayList div{
+  height: 23px;
+  width: 23px;
+  border-radius: 50%;
+  margin: 0 auto;
+  border: 1px solid #FFFFFF;
+  color: #FFFFFF;
+  margin-top: 2px;
+  line-height: 23px;
+}
+.signCalendar .monthDayList .dayList p{
+  background:rgba(255,132,0,1);
+  font-size: 12px;
+  color: white;
+  margin: 0 auto;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+.signCalendar .monthDayList .yiqiandao{
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background:rgba(255,76,76,1);
+  color: white;
+  line-height: 16px;
+  position: absolute;
+  right: -5px;
+  top: -5px;
+}
+</style>
+<template>
+  <div class="signCalendar">
+    <div class="signCalendar_bg" :style="{zoom: zoom}">
+      <p class="signCalendar_tit"><i class="el-icon el-icon-caret-left"></i> <span>2019年6月</span> <i class="el-icon el-icon-caret-right"></i></p>
+      <div class="signCalendar_box">
+        <div class="signCalendar_box_tit">
+          <span v-for="(item, index) in week" :key="index">{{item}}</span>
+        </div>
+        <div class="monthDayList clearfix">
+          <div v-for="(item,index) in daysData" class="dayList" :style="{backgroundColor: item.day !== ' ' ? '#CCCCCC' : '', cursor: item.cup ? 'pointer' : ''}" :class="{behind: item.day!==' ' && currentDay < item.day}" :key="index"  >
+            <span v-if="item.qian" class="yiqiandao el-icon-check"></span>
+            <div v-if="item.day">
+              <span class="iconfont icon-caidan_wujiaoxingkong" v-if="!item.today"></span>
+              <span v-else>签</span>
+            </div>
+            <p>{{item.day}}</p>
+          </div>
+        </div>
+      </div>
+      <img class="__close" @click="close" src="../../../assets/img/task/des_close.png" alt="">
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['zoom'],
+  data(){
+    return{
+      week: ['日','一','二','三','四','五','六'],
+      DaysInMonth: [],
+      daysData: [],
+      currentMonth: 0,
+      currentYear: 0,
+      currentDay: 0,
+    }
+  },methods:{
+    getYearMonthDay(){
+      let date = new Date();
+      let newDate = date.getFullYear()+"-"+((date.getMonth()+1) < 9 ? '0' + (date.getMonth()+1) : date.getMonth()+1) + "-" + (date.getDate() < 9 ? '0' + date.getDate() : date.getDate() );
+      let currentYear = newDate.substring(0,4); //当前年份
+      let currentMonth = newDate.substring(5,7); //当前月份
+      let newDay = date.getDate(); //当前天
+			let strDate = date.getDate();
+			let strMonth = (date.getMonth()+1).toString();
+			// alert(typeof strMonth)
+		//判断是否是闰年
+			if (this.isleapYears(currentYear)) { 
+				this.DaysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+			}else{
+				this.DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+			}
+			let monthDay = this.DaysInMonth[Number(currentMonth)-1];//当前月的天数			
+			let daysData = [];
+			//给数据源赋值
+			for (var i = 0 ;i < Number(monthDay) ;i++) {
+				var priceDict = {
+          'day': i+1,
+          'price': 0,
+          'today': i+1 === newDay ? true : false,
+          'cup': (this.currentYear === currentYear && this.currentMonth === currentMonth && this.currentDay === i+1) ? true : false,
+          'qian': i+1 < this.currentDay ? true : false
+        };
+				daysData.push(priceDict);
+			}
+			this.daysData = daysData;
+			var currentDay = `${currentYear}-${currentMonth}-01`;
+			var dateObject = new Date(currentDay);
+      var firstDay = dateObject.getDay();//得到每个月1号是周几
+			if (firstDay > 0) {
+				var firstDayData = [];
+				for (var i=0; i< firstDay;i++) {
+					var dict = {'day':' ',price:'','dis':true};
+					firstDayData.push(dict);
+				}
+				this.daysData = firstDayData.concat(daysData);
+			}else{
+				this.daysData = daysData;
+			}
+		},		
+		isleapYears(year){
+			if (((year % 4)==0) && ((year % 100)!=0) || ((year % 400)==0)) { 
+				return true;
+			} else{				
+				return false;
+			}
+		},
+    close: function () {
+      this.$emit('closeMyWindow', 'signCalendar')
+    }
+  },mounted(){
+    let date = new Date();
+    let newDate = date.getFullYear()+"-"+((date.getMonth()+1) < 9 ? '0' + (date.getMonth()+1) : date.getMonth()+1) + "-" + (date.getDate() < 9 ? '0' + date.getDate() : date.getDate() );
+    this.currentYear = newDate.substring(0,4);
+    this.currentMonth = newDate.substring(5,7);
+    this.currentDay = date.getDate(); //当前天
+    this.getYearMonthDay()
+  }
+}
+</script>

src/components/taskPage/IceCream/ticketList.vue

@@ -12,8 +12,8 @@
   justify-content: center;
 }
 .ticketList .ticketList_bg{
-  height: 538px;
-  width: 300px;
+  min-height: 756px;
+  width: 422px;
   background: url('../../../assets/img/task/quanlist.png');
   background-size: 100% 100%;
   position: relative;
@@ -29,35 +29,185 @@
   height:37px;
 }
 .ticketList .ticketList_box{
-  padding: 10px;
+  padding: 17px 15px;
 }
 .ticketList .ticketList_tit{
-  width:280px;
-  height:85px;
-  background:rgba(255,255,255,.68);
-  border-top-left-radius:21px;
-  border-top-right-radius:21px;
+  width: 392px;
+  /* 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);
+  padding: 15px 15px 5px;
+  
 }
 .ticketList .ticketList_tit .top_btn img{
-  width:127px;
-  height:40px;
+  width: 178px;
+  height: 56px;
   cursor: pointer;
 }
+.ticketList .ticketList_tit .hebing_nav{
+  border-top:2px dashed rgba(255,148,21,1);
+}
+.ticketList .ticketList_tit .hebing_nav .hebing{
+  width:64px;
+  height:20px;
+  display: inline-block;
+  background-color: RGBA(154, 154, 154, 1);
+  text-align: center;
+  line-height: 20px;
+  color: white;
+  border-radius: 16px;
+  cursor: pointer;
+  font-size: 12px;
+}
+.ticketList .ticketList_tit .hebing_nav .hebing.hebing2{
+  background-color: #ff5656;
+}
+.ticketList .ticketList_tit .hebing_nav {
+  display: flex;
+  align-items: center;
+  padding: 4px 6px;
+  padding-right: 15px;
+  justify-content: space-between;
+}
 .ticketList .el-checkbox__inner{
   border-radius: 50%;
 }
+.ticketList .el-checkbox-group .el-checkbox{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 10px 20px 5px;
+}
+.ticketList .el-checkbox__input.is-checked .el-checkbox__inner{
+  background-color: white;
+  border-color: rgba(255, 86, 86, 1);
+} 
+.ticketList .el-checkbox__input.is-indeterminate .el-checkbox__inner{
+  background-color: #ff5656;
+  border-color: #ff5656;
+}
+.ticketList .el-checkbox__input.is-checked+.el-checkbox__label {
+  color: #ff5656;
+}
+.ticketList .el-checkbox__inner:hover {
+  border-color: #ff5656;
+}
+.ticketList .container{
+  height: 550px;
+  overflow: auto;
+}
+.ticketList .container::-webkit-scrollbar{
+  /*滚动条整体样式*/
+  width: 13px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
+}
+.ticketList .container::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 4px; 
+  background: rgba(255, 224, 100, 1);
+}
+.ticketList .container::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/ 
+  border-radius: 4px;
+  background: rgba(31, 168, 176, 1);
+}
+.ticketList .container .item{
+  width: 316px;
+  height: 102px;
+  background:rgba(255,255,255,1);
+  border-radius:14px;
+  position: relative;
+  overflow: hidden;
+}
+.ticketList .container2 .item{
+  position: relative;
+  margin: 20px auto;
+  overflow: hidden;
+}
+.ticketList .bottom_btn{
+  text-align: center;
+  padding: 8px ;
+}
+.ticketList .bottom_btn img{
+  width: 185px;
+  height: 64px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+.ticketList .item .el-row{
+  height: 100%;
+  display: flex;
+}
+.ticketList .item .el-row .left{
+  background:rgba(255,136,136,1);
+  color: white;
+  height: calc(100% - 32px);
+  display: flex;
+  align-items: flex-end;
+  padding: 16px 6px
+}
+.ticketList .item .el-row .left .num{
+  font-size: 88px;
+  font-family: 'PingFangR';
+  font-weight: bold;
+  margin-bottom: -26px;
+  position: relative;
+}
+.ticketList .item .el-row .left .num span{
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  position: absolute;
+  right: 1px;
+  top: 37px;
+  background-color: #ff8888;
+  border-radius: 50%;
+}
+.ticketList .item .el-row .right {
+  padding: 11px 20px;
+  line-height: 25px;
+}
+.ticketList .item .el-row .right ._name{
+  font-size:28px;
+  font-family: 'PingFangR';
+  font-weight:bold;
+  color:rgba(63,63,63,1);
+}
+.ticketList .item .el-row .right ._type{
+  font-size: 22px;
+  color:rgba(63,63,63,1);
+  margin-top: 3px;
+}
+.ticketList .item .el-row .right ._btn{
+  display: inline-block;
+  width: 110px;
+  text-align: center;
+  font-size: 20px;
+  color: white;
+  background:rgba(255,86,86,1);
+  margin-top: 3px;
+  cursor: pointer;
+}
+.ticketList .el-checkbox__inner::after{
+  border: 1px solid #ff5656;
+  border-left: 0;
+  border-top: 0;
+}
 </style>
 <template>
   <div class="ticketList">
-    <div class="ticketList_bg">
+    <div class="ticketList_bg" :style="{zoom: zoom}">
       <div class="ticketList_box">
         <div class="ticketList_tit">
           <div class="top_btn">
@@ -70,16 +220,45 @@
               <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 v-if="activeNav === 1" class="hebing_nav">
+            <template>
+              <el-checkbox v-if="hebing === 2" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+              <span v-else>&nbsp;</span>
+            </template>
+            <span @click="hebing = hebing===1 ? 2 : 1, checkedCities=[]" :class="{'hebing2': hebing===1}" class="hebing">合并</span>
           </div>
         </div>
-        <div>
+        <div class="container" v-if="activeNav === 1 && hebing === 2">
           <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
-            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
+            <el-checkbox v-for="city in cities" :label="city" :key="city">
+              <div class="item">
+                
+              </div>
+            </el-checkbox>
           </el-checkbox-group>
         </div>
+        <div class="container container2" v-else>
+          <div class="item" v-for="city in cities" :label="city" :key="city">
+            <el-row>
+              <el-col :span="10">
+                <div class="left">
+                  ￥<span class="num">20<span>元</span></span>
+                </div>
+              </el-col>
+              <el-col :span="14">
+                <div class="right">
+                  <p class="_name">签证</p>
+                  <p class="_type">现金抵用券</p>
+                  <span class="_btn">立即使用</span>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+        <div @mouseover="hebingBtn = 1" @mouseout="hebingBtn = 2" class="bottom_btn">
+          <img v-if="hebingBtn === 2" src="../../../assets/img/task/hebing.png" alt="">
+          <img v-else src="../../../assets/img/task/hebing1.png" alt="">
+        </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="">
@@ -89,17 +268,19 @@
   </div>
 </template>
 <script>
-const cityOptions = ['上海', '北京', '广州', '深圳'];
+const cityOptions = ['上海', '北京', '广州', '深圳', '成都'];
 export default {
-  props: ['id'],
+  props: ['id', 'zoom'],
   data() {
     return{
       closeShow: 1,
       activeNav: 1,
-      heckAll: false,
-      checkedCities: ['上海', '北京'],
+      checkAll: false,
+      checkedCities: [],
       cities: cityOptions,
-      isIndeterminate: true
+      isIndeterminate: true,
+      hebing: 1,
+      hebingBtn: 1,
     }
   },methods:{
     handleCheckAllChange(val) {

src/plugins/index.js

@@ -31,7 +31,7 @@ export default {
                     DomainUrl: domainUrl,
                     //常用提交数据URL 
                     PostUrl: domainUrl + "/api/common/post",
-                    javaUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('viitto') !== -1 ? (locationName.indexOf('oytour') !== -1 ? "http://efficient.oytour.com" : "http://47.96.12.235:9001") : "http://192.168.2.215:9000",
+                    javaUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('viitto') !== -1 ? (locationName.indexOf('oytour') !== -1 ? "http://efficient.oytour.com" : "http://47.96.12.235:9001") : "http://192.168.2.106:9000",
                     ViittoFileUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('viitto') !== -1 ? "http://imgfile.oytour.com" : 'http://192.168.2.214:8130',
                     UploadUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('viitto') !== -1 ? "http://upload.oytour.com" : "http://192.168.2.214:8120",
                     LocalFileStreamDownLoadUrl: domainUrl + "/api/file/GetFileFromWebApi",