微信答题程序案例

谁践踏了优雅 2021-07-24 19:59 440阅读 0赞

Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        page:'startPage',
        currentTimu: { },
        currentNum: 0,
        timuList:[],
        score:0,
        styleArr: ['optionsItem', 'optionsItem', 'optionsItem','optionsItem'],
        isAnswer:false,
        data:{ },
        peopleList:[]
      },
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: async function (options) { 
    
          let res=await this.getTimu();
    
          this.setData({ 
            timuList:res.data,
            currentTimu: res.data[0]
          })
      },
      //随机获取10道题目
      async getTimu(){ 
        let randomNum=parseInt(Math.random()*16000)
        let db=wx.cloud.database();
        //skip设置偏移数量
        let res = await db.collection('timu').skip(randomNum).limit(10).get();  
        console.log(res);
        return res;
    
      },
      
      goGaming(){ 
        this.setData({ 
          page:'gamingPage'
        })
      },
      async chooseEvent(event){ 
        console.log(event);
        //获取点击选项值
        let num=event.currentTarget.dataset.num;
        //如果已经点击,则不能继续点击
      if(this.data.isAnswer){ 
        return;
      }
        //判断正确
        if(num==this.data.currentTimu.answer){ 
          let score=this.data.score;
          let arr=this.data.styleArr;
          arr[num-1] ='optionsItem success'
          this.setData({ 
            styleArr:arr,
            score:score+10,
            isAnswer:true
          })
          //如果正确,跳转下一题
          if (this.data.currentNum==0)
          { 
            //如果已经答对十到,重新获取10道题目
            let res=await this.getTimu();
              console.log(res);
            
            setTimeout(()=>{ 
              this.setData({ 
                currentNum: 0,
                isAnswer: false,
                timuList: res.data,
                currentTimu: res.data[0],
                styleArr: ['optionsItem', 'optionsItem', 'optionsItem', 'optionsItem']
              })
            },1000)
           
          }else{ 
    
            let curNum=this.data.currentNum;
            curNum=curNum+1;
            setTimeout(()=>{ 
              this.setData({ 
              currentTimu:this.data.timuList[curNum],
              currentNum:curNum,
              styleArr: ['optionsItem', 'optionsItem', 'optionsItem', 'optionsItem'],
              isAnswer:false
              })
    
            },1000)
          }
    
        }else{ 
          //判断错误
          let arr = this.data.styleArr;
          arr[num-1] = 'optionsItem fail'
          arr[this.data.currentTimu.answer-1] ='optionsItem success'
          this.setData({ 
            styleArr: arr,
            isAnswer:true
          })
    
          let that=this;
          //如果错误,去到结束页
          setTimeout(()=>{ 
            this.setData({ 
              page:'endPage',
              isAnswer:false
            })
            //获取用户信息来排名
    
            wx.getUserInfo({ 
              success:function(res){ 
                console.log(res);
                //获取用户信息并添加分数
                let data=res.userInfo;
                data.score=that.data.score;
                //上传到数据库
                let db=wx.cloud.database();
                db.collection('range').add({ 
                  data:data,
                  //获取排名情况
                  success:function(res){ 
                    that.getRange();
                  }
                })
              },
              fail(){ 
                console.log('err');
              }
            })
          },2000)
    
        }
        //题目变化
    
      
    
      },
      //继续答题,重新请求10个数据
      async again(){ 
        let res = await this.getTimu();
    
    
        this.setData({ 
          page: 'gamingPage',
          score:0,
          styleArr: ['optionsItem', 'optionsItem', 'optionsItem', 'optionsItem'],
          timuList: res.data,
          currentTimu: res.data[0]
        })
      },
      async getRange(){ 
        let db=wx.cloud.database();
        //文档中的数据库sort排序
        let arr = await db.collection('range').aggregate().sort({ 
          score:-1
        }).end();
    
        //数组去重
        let brr=[],flag=0;
    
        for (let i = 0; i < arr.list.length; i++) { 
          for (let j = i - 1; j >= 0; j--) { 
            if (arr.list[i].nickName== arr.list[j].nickName) { 
              //如果相等,取最大值
              if (arr.list[i].score < arr.list[j].score)
              { 
                arr.list[i].score = arr.list[j].score
              }
              flag = 1;
            }
          }
          if (flag != 1) { 
    
            brr.push(arr.list[i]);
          }
          flag = 0;
        }
    
        console.log(brr);
        console.log(arr);
    
        this.setData({ 
          peopleList:brr
        })
        
    
    
      }
    })

html：

<view class='page startPage' wx:if='{ {page=="startPage"}}'>
    <button open-type='getUserInfo' type='primary'bindtap='goGaming' class='b1'>开始答题</button>
    
    </view>
    
    <view class='page gamingPage' wx:if='{ {page=="gamingPage"}}'>
      <view class='title'>{ { currentTimu.quiz}}</view>
      <view class='options'>
        <view class='optionsItem' wx:for='{ {currentTimu.options}}' wx:key='index' data-num='{ {index+1}}' bindtap='chooseEvent'
        class="{ { styleArr[index]}}"
        >
          { { index+1}}、{ { item}}
        </view>
    
      </view>
    
    </view>
    <view class='page endPage' wx:if='{ {page=="endPage"}}'>
      <view class='score2'>
        您的得分:<text class='escore'>{ { score}}</text>
      </view>
        <button type='primary' bindtap='again' class='b2'>
           继续答题
        </button>
      <view class='range'>
        <view class='dj'>顶尖排行榜</view>
        <view class='rangeList'>
          <view class='rangeItem' wx:for='{ {peopleList}}'>
            <view class='rangeIndex'>
              { { index+1}}
            </view>
            <view class='header'>
              <image src='{ {item.avatarUrl}}'></image>
            </view>
            <view class='nickName'>
              { { item.nickName}}
            </view>
            <view class='score'>
              { { item.score}}
            </view>
          </view>
        </view>
      </view>
    
    
    </view>