11

src/page/index.vue

@@ -86,7 +86,7 @@
            </div>
          </div>
          <div class="mainRightCont">
-           <div class="mainRightLine" v-for="(item,index) in childrenList" @click="childrenClick(item)">
+           <div class="mainRightLine" v-for="(item,index) in childrenList" @click="childrenClick(item,index)">
              <div class="mainRightLineImgBox">
                <img class="mainRightLineImg" :src="item.image_url.replace(/90/g, '320')" alt="">
              </div>
@@ -112,7 +112,7 @@
            </div>
          </div>
          <div class="mainRightCont">
-           <div class="mainRightLine2" v-for="(item,index) in restrainList3" @click="childrenClick(item)">
+           <div class="mainRightLine2" v-for="(item,index) in restrainList3" @click="childrenClick(item,index)">
              <div class="mainRightLineImgBox">
                <img class="mainRightLineImg" :src="item.image_url.replace(/90/g, '320')" alt="">
              </div>
@@ -135,7 +135,7 @@
            </div>
          </div>
          <div class="mainRightCont">
-           <div class="mainRightLine3" v-for="(item,index) in restrainList3" @click="childrenClick(item)">
+           <div class="mainRightLine3" v-for="(item,index) in restrainList3" @click="childrenClick(item,index)">
              <div class="mainRightLineImgBox">
                <img class="mainRightLineImg" v-if="item.image_url"  :src="item.image_url.split('').reverse().join('').replace(/09/g, '023').split('').reverse().join('')" alt="">
                 <img src="../assets/noImg.png" alt="" v-else class="mainRightLineNOImg">
@@ -152,6 +152,9 @@
    <!-- 子组件详情-->
       <div class="childrenMain" v-if="childrenShow">
          <div class="childrenMainLeft" ref="childrenMainLeft">
+           <div class="prevBox" :class="{prevBoxNo:childrenIndex==0}" @click="prev"><上一组</div>
+           <div class="nextBox" @click="next" :class="{prevBoxNo:childrenIndex==this.childrenList.length-1}" v-if="lastShow">下一组></div>
+           <div class="nextBox" @click="next" :class="{prevBoxNo:childrenIndex==this.restrainList3.length-1}" v-else>下一组></div>
             <img class="childrenImg" :src="image_info.pic_url" alt="">
          </div>
          <div class="childrenMainRight">
@@ -248,7 +251,11 @@ export default {
        oldList:'',
        navchildrenName:'',
        navfName:'',
-       navchildrenNameTitle:''
+       navchildrenNameTitle:'',
+       childrenIndex:'',
+       childrenparam:'',
+       childrentoken:'',
+       childrenTime:'',
     }
   },
   methods:{
@@ -504,6 +511,7 @@ export default {
          console.log(res.data.number);
          if(res.data.number==200||res.data.number==5212){
                this.access_time=res.data.result.access_time;
+               //this.childrenTime:'',
                console.log("约束3")
                this.restrainShow3=true;
                this.restrainList3=res.data.result.list;
@@ -522,9 +530,12 @@ export default {
 
          })
     },
-    childrenClick(item){
-      this.param=item.param;
-      this.token=item.token;
+    childrenClick(item,index){
+      //this.param=item.param;
+     // this.token=item.token;
+     this.childrenIndex=index
+      this.childrenparam=item.param;
+      this.childrentoken=item.token;
 
       this.getPartsPc();
       this.groupShow=false;
@@ -541,18 +552,59 @@ export default {
        // console.log(this.childrenHeight)
        }, 500)
 
+    },
+    prev(){
+      if(this.lastShow){
+        if(this.childrenIndex>0){
+          this.childrenIndex--
+          this.childrenparam=this.childrenList[this.childrenIndex].param;
+          this.childrentoken=this.childrenList[this.childrenIndex].token;
+          this.getPartsPc();
+        }
+      }else{
+        if(this.childrenIndex>0){
+          this.childrenIndex--
+          this.childrenparam=this.restrainList3[this.childrenIndex].param;
+          this.childrentoken=this.restrainList3[this.childrenIndex].token;
+          this.getPartsPc();
+        }
+      }
+
+
+    },
+    next(){
+      if(this.lastShow){
+        if(this.childrenList.length > this.childrenIndex){
+          this.childrenIndex++
+          this.childrenparam=this.childrenList[this.childrenIndex].param;
+          this.childrentoken=this.childrenList[this.childrenIndex].token;
+
+          this.getPartsPc();
+        }
+      }else{
+        if(this.restrainList3.length > this.childrenIndex){
+          this.childrenIndex++
+          this.childrenparam=this.restrainList3[this.childrenIndex].param;
+          this.childrentoken=this.restrainList3[this.childrenIndex].token;
+
+          this.getPartsPc();
+        }
+
+      }
+
+
     },
     getPartsPc(){
       fetchGet('/advancedEpc/getPartsPc', {
         vin:this.vin,
         access_time:this.access_time,
-        param:this.param,
-        token:this.token
+        param:this.childrenparam,
+        token:this.childrentoken
        }).then(res => {
 
          if(res.data.number==200||res.data.number==5212){
              //this.childrenList=res.data.result.list;
-             this.access_time=res.data.result.access_time;
+             //this.access_time=res.data.result.access_time;
             //  console.log(res.data.result.list.image_info)
              this.image_info=res.data.result.list.image_info[0];
 
@@ -888,6 +940,7 @@ color: #333333;padding-left: 10px;padding-right: 20px;
       align-items: center;
       justify-content: center;
       overflow: hidden;
+      position: relative;
  }
  .childrenMainRight{
    height: calc(100vh - 200px );
@@ -907,4 +960,26 @@ color: #333333;padding-left: 10px;padding-right: 20px;
    width: 100%;
    height: 100%;
  }
+ .prevBox{
+   position: absolute;top: 20px;left: 20px;
+   width: 78px;
+   height: 30px;
+   background: #F7F9F8;
+   border-radius: 4px;
+   border: 1px solid #EEEEEE;
+   text-align: center;color: #333333;font-size: 12px;line-height: 30px;
+   cursor: pointer;
+ }
+ .nextBox{
+   position: absolute;top: 20px;left: 120px;
+   width: 78px; cursor: pointer;
+   height: 30px;
+   background: #F7F9F8;
+   border-radius: 4px;
+   border: 1px solid #EEEEEE;
+   text-align: center;color: #333333;font-size: 12px;line-height: 30px;
+ }
+ .prevBoxNo{
+   opacity: 0.5;
+ }
 </style>