beizhu

src/components/music.vue

   methods: {
     autoplay() {
       document.removeEventListener(this.trigger, this.autoplay, false)
-
-      if (this.playing === 'off') {
-        this.play()
-      }
+      this.play()
     },
 
     play() {
     width: 0.35rem;
     height: 0.35rem;
     border-radius: 50%;
-    z-index: 130;
+    z-index: 10;
 
     .on {
       animation: rotate 3s linear infinite;

src/views/vote/detail.vue

     <div class="ContextbBox">
       <span class="personnumber">NO.{{detail.MemberId}}</span>
       <span class="votelist" @click="tolist">投票列表</span>
-      <img :src="detail.Photo">
+      <img :src="detail.Photo + '?x-oss-process=style/compress-rotate'">
       <div class="detailinformation">
         <div class="nameinformation">
           <span class="information">{{detail.Name}}</span>
     this.memberid = this.$route.params.memberid;
     this.getActivity({
       actid: this.actid,
-    }).then((act) => {
+    }).then((act) => {      
+      let hash = window.location.hash
+      if (hash.indexOf('/detail') < 0) {
+        hash = `#/detail/${this.actid}/${this.memberid}`
+      }
+
       wxsdk(
         { url: window.encodeURIComponent(`${window.location.origin}${window.location.pathname}`) },
         {
           title: act.ShareTitle,
           desc: act.ShareDesc,
-          link: `${window.location.origin}${window.location.pathname}${window.location.hash}`,
+          link: `${window.location.origin}${window.location.pathname}${hash}`,
           thu_image: act.ShareIcon,
         }
       )

src/views/vote/list.vue

 <template>
-  <div class="context" :style="{backgroundImage: 'url(' + (coverImgUrl ?BgImage:BgImg) + ')'}">
-      <img :class="signupBtn?BannerImage1:BannerImage2" :src="activity.Banner">
-      <div :class="IsOk?onscroll1:onscroll2">
-        <div :class="isOK?searchs:searchb">
-          <input placeholder="输入编号或姓名" v-model="q" @keyup.enter="search">
-          <img class="IconSearch" :src="IconSearch" @click="search">
-        </div>
+  <div :class="'context theme'+theme">
+    <!-- <img :src="banner">  -->
+    <img :class="signupBtn?BannerImage1:BannerImage2" :src="activity.Banner">
+    <div :class="IsOk?onscroll1:onscroll2">
+      <div :class="isOK?searchs:searchb">
+        <input placeholder="输入编号或姓名" v-model="q" @focus="showBtn = false" @blur="showBtn = true">
+        <img class="IconSearch" :src="IconSearch" @click="search">
       </div>
+    </div>
     <img class="informationimg" :src="activity.Desc">
     <span class="box"></span>
     <div class="VoteList">
             <span :class="{ [`theme${theme}`]: true, 'active': active }">最新上传</span>
           </div>
           <!-- <pull-to :bottom-load-method="loadNewList"> -->
-            <van-list
-              v-model="loading"
-              :finished="finished"
-              finished-text="没有更多了"
-              @load="loadNewList"
-            >
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="loadNewList"
+          >
             <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
+                  :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2"
+                  @click="gotovotingdetails(item.MemberId)"
+                >
+                  <img :src="item.Photo + '?x-oss-process=style/compress-rotate'">
                 </div>
                 <span :class="signupBtn?ballot1:ballot2">NO.{{item.MemberId}}</span>
                 <span class="ActivePersonnelName">{{item.Name}}</span>
                 </div>
               </div>
             </div>
-          <!-- </pull-to> -->
-            </van-list>
+            <!-- </pull-to> -->
+          </van-list>
         </van-tab>
         <van-tab title="TOP50">
           <div slot="title">
             <span :class="{ [`theme${theme}`]: true, 'active': !active }">Top50</span>
           </div>
-            <!-- <pull-to :bottom-load-method="loadTopList"> -->
-            <van-list
-              v-model="loading"
-              :finished="finished"
-              finished-text="没有更多了"
-              @load="loadTopList"
-            >
-              <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>
+          <!-- <pull-to :bottom-load-method="loadTopList"> -->
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="loadTopList"
+          >
+            <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 + '?x-oss-process=style/compress-rotate'">
+                </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-list>
-            <!-- </pull-to> -->
+            </div>
+          </van-list>
+          <!-- </pull-to> -->
         </van-tab>
       </van-tabs>
     </div>
-    <div class="btn">
-    <button :class="signupBtn?'signupBtnOne':'signupBtnTwo'" @click="signup">{{ myID > 0 ? '我的上传' : '我要报名'}}</button>
+    <div class="btn" v-show="showBtn">
+      <button
+        :class="signupBtn?'signupBtnOne':'signupBtnTwo'"
+        @click="signup"
+      >{{ myID > 0 ? '我的上传' : '我要报名'}}</button>
     </div>
     <toast v-if="show" :url="activity.AfterVote" @close="close" @confirmbtn="tolink"></toast>
   </div>
 import { createNamespacedHelpers } from "vuex";
 import wxsdk from "../../util/share.js";
 import toast from "../../components/toast.vue";
-import BgImg from "../../assets/bgimg.jpg";
-import BgImage from "../../assets/yttjbg.png";
+// import BgImg from "../../assets/bgimg.jpg";
+// import BgImage from "../../assets/yttjbg.png";
 
 const {
   mapState: mapactivityState,
       active: true,
       temp: true,
       signupBtn: true,
-      BannerImage1:'BannerImage1',
-      BannerImage2:'BannerImage2',
+      BannerImage1: "BannerImage1",
+      BannerImage2: "BannerImage2",
       signupBtnOne: "signupBtnOne",
       signupBtnTwo: "signupBtnTwo",
       VoteBtn1: "VoteBtn1",
       onscroll2: "onscroll2",
       ActivePersonnelBox1: "ActivePersonnelBox1",
       ActivePersonnelBox2: "ActivePersonnelBox2",
-      BgImg,
-      BgImage,
+      // BgImg,
+      // BgImage,
       IconSearch:
         "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_search.png",
       tab: "",
       show: false,
       pageSize: 10,
       loaddingData: false,
+      showBtn: true
     };
   },
   components: {
-    toast,
+    toast
     // PullTo
   },
   mounted() {
       user: x => x.user,
       theme: x => x.theme,
       myprofile: x => x.myprofile,
-      myID: s => (s.myprofile.filter(x => x.ActivityId === (s.activity || {}).ActivityId)[0] || {}).MemberId
-    }),
+      myID: s =>
+        (
+          s.myprofile.filter(
+            x => x.ActivityId === (s.activity || {}).ActivityId
+          )[0] || {}
+        ).MemberId
+    })
   },
   created() {
     this.pageSize = this.$store.state.pageSize;
     this.getActivity({
       actid: this.actid
     }).then(act => {
+      let hash = window.location.hash;
+      if (hash.indexOf("/vote") < 0) {
+        hash = `#/vote/${this.actid}`;
+      }
+
       wxsdk(
         {
           url: window.encodeURIComponent(
         {
           title: act.ShareTitle,
           desc: act.ShareDesc,
-          link: `${window.location.origin}${window.location.pathname}${
-            window.location.hash
-          }`,
+          link: `${window.location.origin}${window.location.pathname}${hash}`,
           thu_image: act.ShareIcon
         }
       );
 
-      console.log('------>', this.activity, this.myprofile, this.myID)
+      console.log("------>", this.activity, this.myprofile, this.myID);
     });
     // this.getMine({
     //   actid: this.actid,
       "getMine"
     ]),
     handleScroll() {
+      this.showBtn = true;
+
       // 页面滚动距顶部距离
       var scrollTop =
         window.pageYOffset ||
         document.documentElement.scrollTop ||
         document.body.scrollTop;
-        if(this.$route.params.actid==1){
-if (scrollTop >= 198) {
-        this.IsOk = false;
-      } else {
-        this.IsOk = true;
-      }
-        }else if(this.$route.params.actid==2){
-if (scrollTop >= 168) {
+
+      if (scrollTop >= 240) {
         this.IsOk = false;
       } else {
         this.IsOk = true;
       }
-        }
-
-        console.log(this.$route.params.actid)
     },
     newlist() {
       return this.getList({
     },
     Vote(memberid) {
       // this.$dialog.confirm({ message: "确定投票给当前用户?" }).then(() => {
-        this.vote({
-          actid: this.actid,
-          memberid: memberid,
-          openid: this.user
-        }).then(() => {
-          if (this.activity.AfterVote) {
-            this.$dialog
-              .alert({ title: "投票成功", message: "恭喜您获得一次抽奖机会!" })
-              .then(() => {
-                window.location.href = this.activity.AfterVote;
-              });
-          } else {
-            this.$dialog.alert({ message: "投票成功" });
-          }
-        });
+      this.vote({
+        actid: this.actid,
+        memberid: memberid,
+        openid: this.user
+      }).then(() => {
+        if (this.activity.AfterVote) {
+          this.$dialog
+            .alert({ title: "投票成功", message: "恭喜您获得一次抽奖机会!" })
+            .then(() => {
+              window.location.href = this.activity.AfterVote;
+            });
+        } else {
+          this.$dialog.alert({ message: "投票成功" });
+        }
+      });
       // });
     },
     loadNewList(loaded) {
       if (this.loaddingData) {
-        return
+        return;
       }
 
-      this.loaddingData = true
+      this.loaddingData = true;
       this.newlist().then(res => {
-        console.log(res.length, this.pageSize)
+        console.log(res.length, this.pageSize);
 
         if ((res || []).length >= this.pageSize) {
           this.newpage += 1;
         }
 
         this.loading = false;
-        this.loaddingData = false
-        loaded && loaded('done')
+        this.loaddingData = false;
+        loaded && loaded("done");
       });
     },
     loadTopList(loaded) {
       if (this.loaddingData) {
-        return
+        return;
       }
 
       this.toplist().then(res => {
         }
 
         this.loading = false;
-        this.loaddingData = false
-        loaded && loaded('done')
+        this.loaddingData = false;
+        loaded && loaded("done");
       });
     },
     signup() {
       window.location.href = this.info.AfterVote;
     },
     search() {
-      this.newpage = 1
-      this.toppage = 1
+      this.newpage = 1;
+      this.toppage = 1;
+      this.showBtn = true;
 
       this.newlist();
       this.toplist();
 
 
 <style lang="scss" scoped>
+.theme1 {
+  background: rgba(209, 220, 228, 1);
+}
+.theme2 {
+  background: linear-gradient(#9c7e70, #70544b);
+}
 .context {
   width: 100%;
   display: flex;
   .BannerImage1 {
     width: 100%;
     max-height: 10rem;
-    margin-bottom: 0.3rem;
+    margin-bottom: 0.8rem;
   }
   .BannerImage2 {
-    width: 100%;
+    width: 92.5%;
     max-height: 10rem;
-    margin-bottom: 0.3rem;
+    margin: 0.6rem 0 1.4rem 0;
   }
   .onscroll1 {
     width: 90%;
     height: 0.44rem;
     position: absolute;
-    top:1.98rem;
+    top: 2.4rem;
     left: calc(3.1%);
     z-index: 120;
 
     width: 93%;
     height: 0.44rem;
     position: absolute;
-    top: 1.98rem;
+    top: 2.4rem;
     left: calc(3.1%);
     z-index: 120;
 
       font-size: 0.16rem;
       font-weight: bolder;
       color: rgba(255, 255, 255, 1);
-      background: rgba(173,145,129,0.62);
+      background: rgba(173, 145, 129, 0.62);
       line-height: 0.22rem;
       border-radius: 0.06rem;
       text-align: center;
       padding: 0.09rem 0;
 
       &.active {
-        background: rgba(126,100,86,1);
+        background: rgba(126, 100, 86, 1);
       }
     }
 
-
     .LatestUpload {
       width: 90%;
       display: flex;
           }
         }
 
-         .ActivePersonnelBox2 {
+        .ActivePersonnelBox2 {
           width: 90%;
           height: 1.83rem;
           border-radius: 0.15rem;
           margin-bottom: 0.11rem;
-          border: 0.04rem solid rgba(126,100,86,1);
+          border: 0.04rem solid rgba(126, 100, 86, 1);
 
           img {
             width: 100%;
         .ballot2 {
           position: absolute;
           top: 0;
-          background: rgba(126,100,86,1);
+          background: rgba(126, 100, 86, 1);
           border-radius: 0 0 0.08rem 0.08rem;
           padding: 0.02rem 0.12rem;
           font-size: 0.14rem;
           width: 56%;
           height: 0.23rem;
           border-radius: 0.25rem;
-          background-color: rgba(126,100,86,1);
+          background-color: rgba(126, 100, 86, 1);
           border: none;
           font-size: 0.14rem;
           font-weight: bolder;
     }
   }
 
-  .btn{
-        width: 100%;
+  .btn {
+    width: 100%;
     height: 0.6rem;
     display: flex;
     justify-content: center;
     align-items: center;
-    background: rgba(255,255,255,1);
+    background: rgba(255, 255, 255, 1);
     position: fixed;
     bottom: 0;
     left: 0;
     z-index: 100;
 
-  .signupBtnOne {
-    width: 91%;
-    height: 0.5rem;
-    border-radius: 0.25rem;
-    background: rgba(166, 184, 201, 1);
-    border: none;
-    font-size: 0.2rem;
-    font-weight: bold;
-    color: rgba(255, 255, 255, 1);
-    line-height: 0.28rem;
-    // position: fixed;
-    // bottom: 0.19rem;
-    // left: calc(4.25%);
-    // z-index: 100;
-  }
-  .signupBtnTwo {
-    width: 91%;
-    height: 0.5rem;
-    border-radius: 0.25rem;
-    background: rgba(173, 145, 129, 1);
-    border: none;
-    font-size: 0.2rem;
-    font-weight: bold;
-    color: rgba(255, 255, 255, 1);
-    line-height: 0.28rem;
-    // position: fixed;
-    // bottom: 0.19rem;
-    // left: calc(4.25%);
-    // z-index: 100;
-  }
-
+    .signupBtnOne {
+      width: 91%;
+      height: 0.5rem;
+      border-radius: 0.25rem;
+      background: rgba(166, 184, 201, 1);
+      border: none;
+      font-size: 0.2rem;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 1);
+      line-height: 0.28rem;
+      // position: fixed;
+      // bottom: 0.19rem;
+      // left: calc(4.25%);
+      // z-index: 100;
+    }
+    .signupBtnTwo {
+      width: 91%;
+      height: 0.5rem;
+      border-radius: 0.25rem;
+      background: rgba(173, 145, 129, 1);
+      border: none;
+      font-size: 0.2rem;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 1);
+      line-height: 0.28rem;
+      // position: fixed;
+      // bottom: 0.19rem;
+      // left: calc(4.25%);
+      // z-index: 100;
+    }
   }
-
 }
 
 .theme1 {
   // background-image: url('../../assets/bgimg.jpg');
-   background: rgba(209,220,228,1);
-   }
-   .theme2 {
+  background: rgba(209, 220, 228, 1);
+}
+.theme2 {
   // background-image: url('../../assets/bgimg.jpg');
-    background: linear-gradient(#97796c,#705443);
-   }
+  background: linear-gradient(#97796c, #705443);
+}
 </style>