跟据题目的完成度判断月亮亮的个数

<template>
	
  <view>
    <u-tabs :list="list" is-scroll :current="current" @change="change"></u-tabs>

    <view class="card" v-for="(item,index) in textPaperList" :key="item.id">
      <view class="cards">
			<view class="top">
				<view class="left">
					<u-icon :name="item.icon" color="#2979ff" size="28" v-if="item.children.length"   @click="onchange(index,item)"></u-icon>
					<u-icon name="minus-circle" color="#2979ff" size="28"v-if="item.children.length==0" ></u-icon>
				     <p>{{item.categoryName}}</p>
			    </view>
				<view class="icon"  @click="beginExamBtn(item, true)">
				<u-icon name="arrow-right" color="#2979ff" size="28" ></u-icon>
				</view>
            </view>
		 	<span class="photo" v-for="item2 in item.imageList">
		 	 <image :src="item2.src"  mode="" style="width:10px;height:10px"></image>
			</span>
			<span>{{item.completedCount}}/</span><span>{{item.favoriteCount}}</span>	 
      </view>
    <view class="card" v-for="(items,indexs) in item.children" :key="indexs" v-if="item.icon=='arrow-down'">
    	<view class="cards" >
    	  		<view class="top">
    	  			<view class="left">
    	  				<u-icon name="minus-circle" color="#2979ff" size="28" ></u-icon>
    	  			     <p>{{items.categoryName}}</p>
    	  		    </view>
					<view class="icon" @click="beginExamBtn(items, false)">
						<u-icon name="arrow-right" color="#2979ff" size="28" ></u-icon>
					</view>
    	          </view>
    	  	 <view class="bottom">
		 	<span class="photo" v-for="item2 in items.imageList">
		 	 <image :src="item2.src"  mode="" style="width:10px;height:10px"></image>
			</span>
    	  		<span>{{items.completedCount}}/</span><span>{{items.favoriteCount}}</span>
    	  	 </view>
    	    </view>
    	  
    	  </view>
    	</view>
    </view>
	</view>
	
    
</template>

<script>
import {subjectPageApi } from "@/api/answer.js";
import{paperPageList}from"@/api/exercise.js"
export default ({
  data () {
    return {
		indes:null,
	  name:'arrow-up',
      list: [],
		current: 0,
      textPaperList: [], // 学科试卷
    CategoryName:'',

	  paper: {
        paperType: 1,
        subjectId: null,
        pageIndex: 1,
        pageSize: 100,
        paperMark: 0
      },
    }
  },
  onLoad() {
	this.subjectList()
	
	
  },
  mounted() { 
    
  },
  methods: {
	 
	  onchange(index,item){
		  
		 let name =item.icon
		 console.log(index)
		 item.icon = name=='arrow-up'?'arrow-down':'arrow-up'
		 
		   
	  },
	  
	  // 学科导航
	  async subjectList() {
	  	console.log("学科导航");
	    const res = await subjectPageApi({level:1,pageIndex:1,pageSize:100})
			for (let s of res.list) {
			s['icon']=''
			s['icon']='arrow-up'
			}
		
	    this.list = res.list
	  },
    // 学科切换
    async change(index) {
      this.current = index;
      this.paper.subjectId = this.list[index].id
	  const res = await paperPageList(this.paper.subjectId)
	  for (let s of res) {
		   s['icon']=''
		  s['icon']='arrow-up'
	  }
	  // console.log(res,"++++++++++")
	  this.textPaperList = res
	  let sum = 0;
	  this.textPaperList.forEach(item => {
		  //给每一个父级添加一个imageList数组，月亮由遍历这个数组产生
		  var imageList = [
		  		  {
		  			  src: "/static/images/moom.png",
		  		  },
		  		  {
		  			  src: "/static/images/moom.png",
		  		  },
		  		  {
		  			  src: "/static/images/moom.png",
		  		  },
		  		  {
		  			  src: "/static/images/moom.png",
		  		  },
		  		  {
		  			  src: "/static/images/moom.png",
		  		  }
		  ] 
		//对题目的完成度进行判断 赋值sum
			const percentageProblems = item.percentageProblems
		   if(percentageProblems == 0){
		   			  sum = 0
		   }else if( 0 <percentageProblems <= 20 ){
		   			  sum = 1
		   }else if(20 < percentageProblems <= 40 ){
		   			  sum = 2
		   }else if(40< percentageProblems <= 60 ){
		   			  sum = 3
		   }else if(60 < percentageProblems <= 80 ){
		   			  sum = 4
		   }else if(percentageProblems == 100){
		   			  sum = 5
		   }
		   //跟据题目的完成度进行月亮的亮与暗
		 imageList.forEach((img,index)=>{
			if(index < sum){
				img.src = "/static/images/moomlight.png"
			}
		  })
		  //拷贝 imageList的值进行改变
		  Object.assign(item,{imageList:imageList})
		  
		  item.children.forEach(chImg=>{
			  var imageList = [
			   		  {
			   			  src: "/static/images/moom.png",
			   		  },
			   		  {
			   			  src: "/static/images/moom.png",
			   		  },
			   		  {
			   			  src: "/static/images/moom.png",
			   		  },
			   		  {
			   			  src: "/static/images/moom.png",
			   		  },
			   		  {
			   			  src: "/static/images/moom.png",
			   		  }
			   ]
			   const percentageProblems = chImg.percentageProblems
			   
			   if(percentageProblems == 0){
			   			  sum = 0
			   }else if( 0 <percentageProblems <= 20 ){
			   			  sum = 1
			   }else if(20 < percentageProblems <= 40 ){
			   			  sum = 2
			   }else if(40< percentageProblems <= 60 ){
			   			  sum = 3
			   }else if(60 < percentageProblems <= 80 ){
			   			  sum = 4
			   }else if(percentageProblems == 100){
			   			  sum = 5
			   }
			  imageList.forEach((img,index)=>{
			  			if(index < sum){
			  				img.src = "/static/images/moomlight.png"
			  			}
			   })
			   Object.assign(chImg,{imageList:imageList})
			   
			  
		   })
		  
		  
	  })
	  
	  // console.log('  this.textPaperList',  this.textPaperList)
	  //判断题目完成
    },
   
   //开始答题
  beginExamBtn(list, aIf) {
	  // if(list.percentageProblems==100){
		 //  uni.showToast({
		 //         title: "此模块题目全部完成",
		 //       })
			//    return;
	  // }
	  if (aIf) {
	    console.log("list", list );
		if(list.children.length!==0){
			for (const item of list.children) {		
			    if (item.percentageProblems !== 100) {
			      uni.navigateTo({
			        url: '/pages/exercises/exam_begin/exam_begin?id=' + item.examPaperId
			      });
			      console.log('666', item.percentageProblems);
				  return;
			    }else{
					uni.navigateTo({
					  url: '/pages/exercises/exam_begin/exam_begin?id=' + item.examPaperId
					});
					break;
				}
			}
			
			  // uni.showToast({
			  //        title: "此模块题目全部完成",
			  //      })
			}else{
				
				uni.navigateTo({
				  url: '/pages/exercises/exam_begin/exam_begin?id=' + list.examPaperId
				});
			}
		}else{
			
			uni.navigateTo({
			  url: '/pages/exercises/exam_begin/exam_begin?id=' + list.examPaperId
			});
		}
	    
	 
  }
	
  }
})
</script>

<style lang="less" scoped>
  .card {
    padding: 10px;

    .cards {
		height: 80px;
      background-color: #fff;
      padding: 10px;
      border-radius: 10px;
    .top{
		padding-top: 18px;
		display: flex;
		justify-content: space-between;
		// .icon{
		// 	width: 28px;
		// 	height: 28px;
		// 	border-radius: 28px;
		// 	background-color:#017BFF 19%;
		// }
		.left{
			display: flex;
			margin-left: 12px;
			p{
				margin-left: 5px;
			}
		}
	}
	.bottom{
		margin-left:40px;
	}
    }
  }
</style>