beizhu

src/views/vote/list.vue

@@ -12,48 +12,58 @@
     <span class="box"></span>
     <div class="VoteListBox">
       <div class="VoteList">
-        <van-tabs type="card">
-          <van-tab title="最新上传">
-            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-              <div class="LatestUpload">
-                <div class="LatestUploadList" v-for="(item,index) in newList" :key="index">
-                  <div
-                    :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2"
-                    @click="gotovotingdetails(item.MemberId)"
-                  >
-                    <img :src="item.Photo">
-                  </div>
-                  <span :class="signupBtn?ballot1:ballot2">NO.{{item.MemberId}}</span>
-                  <span class="ActivePersonnelName">{{item.Name}}</span>
-                  <button :class="signupBtn?VoteBtn1:VoteBtn2" @click="Vote(item.MemberId)">投TA一票</button>
-                  <div class="VoteNumber">
-                    <span>已获投票数：</span>
-                    <p>{{item.Vote}}票</p>
-                  </div>
-                </div>
+        <div class="sortlist1" v-if="first">
+          <span :class="active?newly1:newly2" @click="qh(true)">最新上传</span>
+          <span :class="active?newly2:newly1" @click="qh(false)">TOP50</span>
+        </div>
+        <div class="sortlist2" v-if="second">
+          <span :class="active?newlyone:newlytwo" @click="qh(true)">最新上传</span>
+          <span :class="active?newlytwo:newlyone" @click="qh(false)">TOP50</span>
+        </div>
+        <!-- <van-tabs type="card">
+        <van-tab title="最新上传">-->
+        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+          <div class="LatestUpload" v-if="temp">
+            <div class="LatestUploadList" v-for="(item,index) in newList" :key="index">
+              <div
+                :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2"
+                @click="gotovotingdetails(item.MemberId)"
+              >
+                <img :src="item.Photo">
               </div>
-            </van-list>
-          </van-tab>
-          <van-tab title="TOP50">
-            <div class="LatestUpload">
-              <div class="LatestUploadList" v-for="(item,index) in topList" :key="index">
-                <div
-                  :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2"
-                  @click="gotovotingdetails(item.MemberId)"
-                >
-                  <img :src="item.Photo">
-                </div>
-                <span :class="signupBtn?ballot1:ballot2">NO.{{item.MemberId}}</span>
-                <span class="ActivePersonnelName">{{item.Name}}</span>
-                <button :class="signupBtn?VoteBtn1:VoteBtn2" @click="Vote(item.MemberId)">投TA一票</button>
-                <div class="VoteNumber">
-                  <span>已获投票数：</span>
-                  <p>{{item.Vote}}票</p>
-                </div>
+              <span :class="signupBtn?ballot1:ballot2">NO.{{item.MemberId}}</span>
+              <span class="ActivePersonnelName">{{item.Name}}</span>
+              <button :class="signupBtn?VoteBtn1:VoteBtn2" @click="Vote(item.MemberId)">投TA一票</button>
+              <div class="VoteNumber">
+                <span>已获投票数：</span>
+                <p>{{item.Vote}}票</p>
               </div>
             </div>
-          </van-tab>
-        </van-tabs>
+          </div>
+        </van-list>
+        <!-- </van-tab> -->
+        <!-- <van-tab title="TOP50"> -->
+           <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+        <div class="LatestUpload" v-if="!temp">
+          <div class="LatestUploadList" v-for="(item,index) in topList" :key="index">
+            <div
+              :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2"
+              @click="gotovotingdetails(item.MemberId)"
+            >
+              <img :src="item.Photo">
+            </div>
+            <span :class="signupBtn?ballot1:ballot2">NO.{{item.MemberId}}</span>
+            <span class="ActivePersonnelName">{{item.Name}}</span>
+            <button :class="signupBtn?VoteBtn1:VoteBtn2" @click="Vote(item.MemberId)">投TA一票</button>
+            <div class="VoteNumber">
+              <span>已获投票数：</span>
+              <p>{{item.Vote}}票</p>
+            </div>
+          </div>
+        </div>
+        </van-list>
+        <!-- </van-tab>
+        </van-tabs>-->
       </div>
     </div>
     <button :class="signupBtn?'signupBtnOne':'signupBtnTwo'" @click="signup">我要报名</button>
@@ -77,6 +87,15 @@ export default {
   data() {
     return {
       // AudioPlay: ''
+      first:false,
+      second:false,
+      active:true,
+      isactive:true,
+      newly1:'newly1',
+      newly2:'newly2',
+      newlyone:'newlyone',
+      newlytwo:'newlytwo',
+      temp: true,
       signupBtn: true,
       signupBtnOne: "signupBtnOne",
       signupBtnTwo: "signupBtnTwo",
@@ -86,11 +105,11 @@ export default {
       ballot2: "ballot2",
       coverImgUrl: true,
       isOK: true,
-      IsOk:true,
+      IsOk: true,
       searchs: "searchs",
       searchb: "searchb",
-      onscroll1:'onscroll1',
-      onscroll2:'onscroll2',
+      onscroll1: "onscroll1",
+      onscroll2: "onscroll2",
       ActivePersonnelBox1: "ActivePersonnelBox1",
       ActivePersonnelBox2: "ActivePersonnelBox2",
       BgImg,
@@ -129,10 +148,12 @@ export default {
       this.coverImgUrl = true;
       this.signupBtn = true;
       this.isOK = true;
+      this.first=true;
     } else if (this.actid == 2) {
       this.coverImgUrl = false;
       this.signupBtn = false;
       this.isOK = false;
+      this.second=true;
     }
     this.getActivity({
       actid: this.actid
@@ -141,6 +162,16 @@ export default {
     this.toplist();
   },
   methods: {
+    qh(t) {
+      this.temp = t;
+      if(t==true){
+         this.active=true;
+         this.isactive=true;
+      }else{
+        this.active=false;
+        this.isactive=false;
+      }
+    },
     handleScroll() {
       // 页面滚动距顶部距离
       var scrollTop =
@@ -191,21 +222,21 @@ export default {
         this.topList = toplist;
       });
     },
-    onLoad() {
-      // 异步更新数据
-      setTimeout(() => {
-        for (let i = 0; i < 10; i++) {
-          this.list.push(this.list.length + 1);
-        }
-        // 加载状态结束
-        this.loading = false;
-
-        // 数据全部加载完成
-        if (this.list.length >= 40) {
-          this.finished = true;
-        }
-      }, 2000);
-    },
+    // onLoad() {
+    //   // 异步更新数据
+    //   setTimeout(() => {
+    //     for (let i = 0; i < 10; i++) {
+    //       this.list.push(this.list.length + 1);
+    //     }
+    //     // 加载状态结束
+    //     this.loading = false;
+
+    //     // 数据全部加载完成
+    //     if (this.list.length >= 40) {
+    //       this.finished = true;
+    //     }
+    //   }, 2000);
+    // },
     signup() {
       this.$router.push({
         path: `/vote/signup/${this.actid}`
@@ -231,6 +262,9 @@ export default {
 </script>
 
 <style>
+.van-list {
+  width: 100%;
+}
 .van-tabs--card {
   width: 100%;
 }
@@ -329,7 +363,7 @@ export default {
     }
   }
 
- .onscroll2 {
+  .onscroll2 {
     width: 90%;
     height: 0.44rem;
     position: fixed;
@@ -487,6 +521,73 @@ export default {
     .VoteList {
       margin: 0.26rem 0;
       width: 90%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .sortlist1 {
+        width: 94%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+           .newly1 {
+        width: 47.5%;
+        font-size: 0.16rem;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 1);
+        line-height: 0.22rem;
+        background: rgba(166, 184, 201, 1);
+        border-radius: 0.06rem;
+        text-align: center;
+        padding: 0.09rem 0;
+      }
+      .newly2{
+         width: 47.5%;
+        font-size: 0.16rem;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 1);
+        line-height: 0.22rem;
+        background: rgba(217,226,233,1);
+        border-radius: 0.06rem;
+        text-align: center;
+        padding: 0.09rem 0;
+      }
+      }
+
+         .sortlist2 {
+        width: 94%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+           .newlyone {
+        width: 47.5%;
+        font-size: 0.16rem;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 1);
+        line-height: 0.22rem;
+        background: rgba(126,100,86,1);
+        border-radius: 0.06rem;
+        text-align: center;
+        padding: 0.09rem 0;
+      }
+      .newlytwo{
+         width: 47.5%;
+        font-size: 0.16rem;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 1);
+        line-height: 0.22rem;
+        background: rgba(173,145,129,0.62);
+        border-radius: 0.06rem;
+        text-align: center;
+        padding: 0.09rem 0;
+      }
+      }
 
       .LatestUpload {
         width: 100%;