提交提示

css/task.css

@@ -212,7 +212,7 @@ img{
 /* 冰淇淋 */
 .bingqilingBox_bg{
   width: 94%;
-  min-height: 43.05rem;
+  height: 45rem;
   background: url("../images/task/ice/bg.png");
   background-size: 100% 100%;
   position: relative;
@@ -242,18 +242,30 @@ img{
   height: 5rem;
   z-index: 4;
 }
-.ice_box{
+.ice_box .row{
   width: 100%; 
   margin-top: 4rem;
 }
-.ice_box ul{
+.ice_box .row ul{
   /* width: 8rem; */
    
 }
-.ice_box li {
+.ice_box .row ul li {
   width: 100%;
+  position: relative;
+}
+.ice_box .row ul li .riight_tag{
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 50%;
+  background-color: rgba(255,86,86,1);
+  font-size: .6rem;
+  color: white;
+  position: absolute;
+  right: -.6rem;
+  top: .4rem;
 }
-.ice_box li img{
+.ice_box .row ul li img{
   width: 100%;
 }
 .hechengwu{ 
@@ -279,6 +291,56 @@ img{
 .wo_hecheng_btn img{
   height: 3.5rem;
 }
+.cailiao_item{
+  position: relative;
+}
+.cailiao_item .cailiao_item_tag{
+  width: 1.1rem;
+  height: 1.1rem;
+  border-radius: 50%;
+  background-color: rgba(255,86,86,1);
+  font-size: .6rem;
+  color: white;
+  position: absolute;
+  right: -.4rem;
+  top: -.2rem;
+  text-align: center;
+  line-height: 1.1rem;
+}
+.wodecailiao_ice{
+  width: 28rem;
+  height: 17.35rem;
+  background: url("../images/task/ice/caoliao_bg.png");
+  background-size: 100% 100%;
+  padding: 9rem 2rem 0 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.wodecailiao_ice_item{
+  position: relative;
+}
+.wodecailiao_ice_item .wodecailiao_ice_item_tag{
+  min-width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 50%;
+  background-color: rgba(255,86,86,1);
+  font-size: .6rem;
+  color: white;
+  position: absolute;
+  right: -.6rem;
+  top: .4rem;  
+}
+.no_Amount{
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+  filter: grayscale(100%);
+  filter: gray;
+
+}
+
 /* .说明 */
 
 .huodongshuoming_bg{
@@ -324,4 +386,29 @@ img{
   right: 1rem;
   top: -2rem;
   width: 3rem;
+}
+
+
+
+/* 提示 */
+#tips{
+  width: 100%; 
+  background: rgba(0, 0, 0, 0);
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2020;
+  justify-content: center;
+  padding-top: 2rem;
+  bottom: 0;
+  text-align: center;
+}
+#tips #tips_message{
+  padding: 1rem 3rem;
+  font-size: 1rem;
+  color: white;
+  background: rgba(0, 0, 0, .5);
+  border-radius: 2rem;
+  margin-top: 20rem;
+  display: inline-block;
 }
\ No newline at end of file

html/invesDetails.html

@@ -135,7 +135,7 @@
           $("#StartDateStr").text(data.obj.StartDateStr)
           $("#LeaderName").text(data.obj.LeaderName ? data.obj.LeaderName : '')
           $("#BranchName").text(data.obj.ContactName.split('(')[0])
-          $("#ContactName").text(data.obj.ContactName)
+          $("#ContactName").text(data.obj.ContactName.split('(')[1].split(')')[0])
           $("#name").text(name)
           $("#phone").text(phone)
           $("#day").text(data.surverList[0].CreateDate.split('T')[0].replace(/-/g,'.'))

html/task/home.html

@@ -141,48 +141,29 @@
           <img src="../../images/task/ice/tit_quan_a.png" alt="">
         </div>
       </div>
-      <div class="ice_box clearfix row">
-        <ul class="col-xs-4">
-          <li>
-            <img src="../../images/task/ice/ice_1.png" alt="">
-          </li>
-          <li>
-            <img src="../../images/task/ice/ice_2.png" alt="">
-          </li>
-          <li>
-            <img src="../../images/task/ice/ice_3.png" alt="">
-          </li>
-          <li>
-            <img src="../../images/task/ice/ice_4.png" alt="">
-          </li>
-          <li>
-            <img src="../../images/task/ice/ice_5.png" alt="">
-          </li>
-        </ul>
-        <div class="hechengwu col-xs-8">
-          <div class="yuan">
-            <img src="../../images/task/ice/big_ice_1.png" alt="">
-          </div>
-          <div class="wo_hecheng_btn">
-            <img src="../../images/task/ice/hecheng.png" alt="">
-          </div>
-          <div class="cailiao_box">
-            <div>
-              <img src="../../images/task/ice/c_danhuang.png" alt="">
+      <div class="ice_box">
+        <div class=" clearfix row">
+          <ul class="col-xs-4" id="iceList">
+  
+          </ul>
+          <div class="hechengwu col-xs-8">
+            <div class="yuan">
+              <img id="bigIce" src="../../images/task/ice/big_ice_1.png" alt="">
             </div>
-            <span class="cheng">X</span>
-            <div>
-              <img src="../../images/task/ice/c_danhuang.png" alt="">
+            <div class="wo_hecheng_btn" onclick="setFuseMaterial()">
+              <img src="../../images/task/ice/hecheng.png" alt="">
             </div>
-            <span class="cheng">X</span>
-            <div>
-              <img src="../../images/task/ice/c_danhuang.png" alt="">
+            <div class="cailiao_box" id="cailiao_box">
+              
             </div>
           </div>
         </div>
+        <div class="wodecailiao_ice" id="wodecailiao_ice">
+          
+        </div>
       </div>
       <div class="quan_box">
-
+        
       </div>
     </div>
   </div>
@@ -221,6 +202,9 @@
     <div class="wodeduihuanBox_bg">
 
     </div>
+  </div>
+  <div id="tips" class="none">
+    <span id="tips_message"></span>
   </div>
 	<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
 	<script type="text/javascript" src="../../js/md5.js"></script>
@@ -230,7 +214,7 @@
 	<script type="text/javascript" src="../../js/bts/bootstrap.min.js"></script> 
 	<script type="text/javascript" src="../../js/autosize.js"></script>
   <script> 
-    let TaskHistory = [], IceList = [], UserMaterials = [], activityId = 1, customerId = 1549, taskId = 26;
+    let TaskHistory = [], IceList = [], UserMaterials = [], userIceList = [], activityId = 1, customerId = 1549, taskId = 26, iceIndex = 0;
     // let url = 'http://efficient.oytour.com/'
     let url = getApiUrl().urlJava
     // 获取签到记录
@@ -270,10 +254,10 @@
         async: false,
         success: function (res) {
           if (res.resultCode === 1) {
-            let data = res.data.data
+            let data = res.data
             for(let i = 0; i < data.length; i++) {
               if (data[i].MaterialName === '牛奶') {
-                data[i].src = '../../images/task/ice/c_tang.png'
+                data[i].src = '../../images/task/ice/c_niunai.png'
               } else if (data[i].MaterialName === '糖') {
                 data[i].src = '../../images/task/ice/c_tang.png'
               } else if (data[i].MaterialName === '蛋黄') {
@@ -312,8 +296,38 @@
         async: false,
         success: function (res) {
           if (res.resultCode === 1) {
-            IceList = res.data.data
-            console.log(data)
+            IceList = res.data
+            for (let i = 0; i < IceList.length; i++) {
+              if (IceList[i].MaterialName.indexOf('蒙牛') !== -1) {
+                IceList[i].src = '../../images/task/ice/big_ice_4.png'
+                IceList[i].bgSrc = '../../images/task/ice/ice_4.png'
+              } else if (IceList[i].MaterialName.indexOf('DQ') !== -1) {
+                IceList[i].src = '../../images/task/ice/big_ice_3.png'
+                IceList[i].bgSrc = '../../images/task/ice/ice_3.png'
+              } else if (IceList[i].MaterialName.indexOf('明治') !== -1) {
+                IceList[i].src = '../../images/task/ice/big_ice_2.png'
+                IceList[i].bgSrc = '../../images/task/ice/ice_2.png'
+              } else if (IceList[i].MaterialName.indexOf('和路雪') !== -1) {
+                IceList[i].src = '../../images/task/ice/big_ice_1.png'
+                IceList[i].bgSrc = '../../images/task/ice/ice_1.png'
+              } else if (IceList[i].MaterialName.indexOf('哈根达斯') !== -1) {
+                IceList[i].src = '../../images/task/ice/big_ice_5.png'
+                IceList[i].bgSrc = '../../images/task/ice/ice_5.png'
+              }
+              for (let o =0; o < IceList[i].compounds.length; o++) {
+                for (let y = 0; y < data.length; y++) {
+                 if (IceList[i].compounds[o].soureceMaterials === data[y].MaterialsId){
+                  IceList[i].compounds[o].src = data[y].src
+                  IceList[i].compounds[o].name = data[y].MaterialName
+                  IceList[i].compounds[o].Amount = data[y].Amount
+                  break;
+                 }
+                }
+              }
+            }
+            userIceList = IceList
+            // 渲染数据
+            createIceBoxCotent()
           }
         },
         error: function (res) {
@@ -321,6 +335,79 @@
         }
       })
     }
+    // 渲染冰糕数据方法
+    function createIceBoxCotent() {
+      let html = ''
+      for(let i =0; i < userIceList.length; i++){
+        html += `<li onclick="switchIce(${i})">
+            <img src="${userIceList[i].bgSrc}" alt="">
+            <div class="riight_tag">x${userIceList[i].Amount}</div>
+          </li>`
+      }
+      switchIce(0)
+      $("#iceList").html(html)
+    }
+    // 切换冰糕
+    function switchIce(index){
+      iceIndex = index;
+      let html = "", caiLiaoHtml = "";
+      $("#bigIce").attr('src', userIceList[index].src)
+      for(let i = 0; i < userIceList[index].compounds.length; i++) {
+        html += `<div class="cailiao_item">
+          <img src="${userIceList[index].compounds[i].src}" alt="">
+          <div class="cailiao_item_tag">${userIceList[index].compounds[i].needCount}</div>
+        </div>`
+        if (i !== userIceList[index].compounds.length-1) {
+          html += `<span class="cheng">X</span>`
+        }
+        if (userIceList[index].compounds[i].Amount > 1) {
+          caiLiaoHtml += `<div class="wodecailiao_ice_item">
+              <img class="" src="${userIceList[index].compounds[i].src}" alt="">
+              <div class="wodecailiao_ice_item_tag">x${userIceList[index].compounds[i].Amount}</div>
+            </div>
+          `
+        } else {
+          caiLiaoHtml += `<div class="wodecailiao_ice_item">
+              <img class="no_Amount" src="${userIceList[index].compounds[i].src}" alt=""> 
+            </div>
+          `
+        }
+      }
+      $("#cailiao_box").html(html)
+      $("#wodecailiao_ice").html(caiLiaoHtml)
+    }
+    //合成
+    function setFuseMaterial (type) {
+      console.log(userIceList[iceIndex])
+      let msg = {
+        targetId: type ? this.UserFamilyInventory.MaterialsId : userIceList[iceIndex].MaterialsId,
+        customerId: customerId,
+      }
+      $.ajax({
+        type: "POST",
+        url: `${url}api/mactivity/setFuseMaterial`,
+        contentType: "application/json",
+        data: getJavaData(msg),
+        async: false,
+        success: function (res) {
+          if (res.resultCode === 1) {
+            console.log(res.data)
+          } else {
+            showTips(res.message)
+          }
+        },
+        error: function (res) {
+          
+        }
+      })
+    }
+    function showTips(message) {
+      $('#tips').show()
+      $('#tips_message').html(message)
+      setTimeout(()=>{
+        $('#tips').hide()
+      }, 1000)
+    }
     getUserMaterials()
     // 打开弹窗
     function showBox(id){
@@ -340,6 +427,12 @@
       $('.'+id2).hide()
       $('.'+showD).show()
       $('.'+hideID).hide()
+      console.log(id)
+      if (id === 'quan_box') {
+        $('.bingqilingBox_bg').css('height','52rem')
+      } else {
+        $('.bingqilingBox_bg').css('height','45rem')
+      }
     }
 	</script>
 </body>