微信答题程序案例

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：

<!--miniprogram/dati/dati.wxml-->
<view class='page startPage' wx:if='{{page=="startPage"}}'>
<button open-type='getUserInfo' type='primary'bindtap='goGaming' class='b1'>开始答题</button>
<!-- <button  bindgetuserinfo="bindGetUserInfo" class="zan-btn zan-btn--primary">授权登录</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>