pull

src/App.vue

@@ -1,19 +1,33 @@
 <template>
   <div id="app" v-if="showPage">
     <router-view/>
+    <music :url="activity.Music"> </music>
   </div>
 </template>
 
 <script>
 import './assets/css/reset.css'
 import { createNamespacedHelpers } from 'vuex'
+import music from './components/music.vue'
 const { mapActions: mapIndexActions } = createNamespacedHelpers('vote')
+const {
+  mapState: mapactivityState,
+} = createNamespacedHelpers("vote");
+
 export default {
   data () {
     return {
-      showPage: true
+      showPage: true,
     }
   },
+  components: {
+    music,
+  },
+  computed: {
+    ...mapactivityState({
+      activity: s => s.activity || {},
+    })
+  },
   created () {
     // if (location.search && this.toolClass.UrlSearch(location.search).code) {
     //   this.code = this.toolClass.UrlSearch(location.search).code
@@ -30,6 +44,7 @@ export default {
     // } else {
     //   this.toolClass.getCode('wx32e2e8c81f66070e')
     // }
+
   },
   methods: {
     ...mapIndexActions(['user'])
@@ -42,6 +57,6 @@ export default {
 #app {
   width: 100%;
   height: 100%;
-  position: relative;
+  // position: relative;
 }
 </style>

src/assets/css/theme.scss

@@ -0,0 +1,8 @@
+/* 改变主题色变量 */
+$--background: rgba(220,229,236,1);
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+/*按钮颜色*/
+$btn_fastener:rgba(166,184,201,1);
+$input_box:rgba(201,214,224,1);
+

src/components/music.vue

@@ -1,53 +1,28 @@
 <template>
-    <div class="MusicComponents" >
-        <div class="musicbox">
-    <!-- 播放 -->
-     <div class="play" v-if="audioPlayShow" @click="audioState">
-      <img :src="MusicOn"/>
-    </div>
-    <!-- 暂停-->
-    <div class="play" v-else>
-      <img :src="MusicOff" @click="audioState">
-    </div>
-
-    <audio ref="player" :src="audioHttp"></audio>
-        </div>
-
+    <div class="musicbox">
+      <!-- 播放 -->
+      <div class="play" v-if="audioPlayShow" @click="audioState">
+        <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_open.png">
+        <!-- <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_music_open.png"> -->
+      </div>
+      <!-- 暂停-->
+      <div class="play" v-else @click="audioState">
+        <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png" >
+         <!-- <img v-if="this.$route.query.actid===2" src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png" > -->
+      </div>
+      <audio ref="player" :src="url" autoplay preload loop="loop"></audio>
     </div>
 </template>
 <script>
-import MusicOn from "../common/icon/yinyueon.png";
-import MusicOff from "../common/icon/yinyueoff.png";
 export default {
-     data() {
+  name:'music',
+  props:['url'],
+  data() {
     return {
-      MusicOn,
-      MusicOff,
       audioPlayShow: true,
-      cTime: "00:00", // 已播放时间
-      dTime: "00:00", // 总播放时间
-      audioHttp: "http://up.mcyt.net/?down/46426.mp3" // 音频链接
     };
   },
-   mounted() {
-    const music = this.$refs.player; // 音频所在对象
-    music.addEventListener("canplay", () => {
-      const musicTime = music.duration; // 获得音频时长
-      const branch = Math.floor(musicTime / 60); // 计算音频分钟
-      const second = Math.ceil(musicTime % 60); // 计算音频秒
-      if (branch < 10 && second < 10) {
-        // 四种情况判断音频总时间
-        this.dTime = `0${branch}:0${second}`;
-      } else if (branch < 10) {
-        this.dTime = `0${branch}:${second}`;
-      } else if (second < 10) {
-        this.dTime = `${branch}:0${second}`;
-      } else {
-        this.dTime = `${branch}:${second}`;
-      }
-    });
-  },
-    methods: {
+  methods: {
     // 点击播放暂停按钮时间
     audioState() {
       this.audioPlayShow = !this.audioPlayShow; // 更改播放暂停按钮状态
@@ -59,35 +34,28 @@ export default {
       }
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-.MusicComponents{
-    position: relative;
-    height: 100%;
-    width: 100%;
-
-    .musicbox{
-        position: absolute;
-        top:1.27rem;
-        right:0.09rem;
-        width: 0.24rem;
-        height: 0.24rem;
-        border-radius: 50%;
-
-        .play{
-            width: 100%;
-            height: 100%;
-
-            img{
-                width:100%;
-                height: 100%;
-            }
-        }
+  .musicbox {
+    position: fixed;
+    top: 1.27rem;
+    right: 0.09rem;
+    width: 0.24rem;
+    height: 0.24rem;
+    border-radius: 50%;
+
+    .play {
+      width: 100%;
+      height: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
     }
-   
-}
+  }
 </style>
 
 

src/util/share.js

@@ -46,34 +46,6 @@ function wxsdk (params, config) {
     }).catch((err) => {
       reject(err)
     })
-
-    // axios.post(api.share.share.url + '?url=' + params.url)
-    //   .then(function (res) {
-    //     let result = JSON.parse(res.data)
-    //     wx.config({
-    //       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
-    //       appId: result.appId, // 必填，公众号的唯一标识
-    //       timestamp: result.timestamp, // 必填，生成签名的时间戳
-    //       nonceStr: result.noncestr, // 必填，生成签名的随机串
-    //       signature: result.signature, // 必填，签名，见附录1
-    //       jsApiList: [
-    //         'onMenuShareTimeline',
-    //         'onMenuShareAppMessage',
-    //         'onMenuShareQQ',
-    //         'onMenuShareWeibo',
-    //         'onMenuShareQZone',
-    //         'openLocation'
-    //       ]
-    //     })
-    //     wx.ready(function () {
-    //       wx.onMenuShareTimeline(shareData)
-    //       wx.onMenuShareAppMessage(shareData)
-    //       // resolve()
-    //     })
-    //   })
-    //   .catch(function (error) {
-    //     console.log(error)
-    //   })
   })
 }
 

src/views/vote/index.vue

@@ -54,19 +54,19 @@ export default {
     height: 100%;
   }
   .EnterActivity {
-    position: absolute;
-    top: 5.86rem;
-    left: 0.45rem;
     width: 75%;
     height: 0.5rem;
     border-radius: 0.25rem;
-    background-color: rgba(166,184,201,1);
+    background: #a6b8c9;
     border: none;
     font-size: 0.2rem;
     font-family: PingFangSC-Medium;
     font-weight: bold;
-    color: rgba(255, 255, 255, 1);
+    color: white;
     line-height: 0.28rem;
+    position: fixed;
+    bottom: 0.4rem;
+    left:calc(12.5%);
   }
 }
 </style>

src/views/vote/list.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="context">
     <img class="BannerImage" :src="activity.Banner">
-    <div class="search">
+    <div :class="isOK?searchs:searchb">
       <input placeholder="输入编号或姓名" v-model="q">
       <img class="IconSearch" :src="IconSearch" @click="search">
       <!-- <i class="iconfont icon-sousuo3 IconSearch"></i> -->
@@ -74,22 +74,29 @@ export default {
   name: "lotterylist",
   data() {
     return {
-      // AudioPlay: '',
-      IconSearch: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_search.png',
-      tab:'',
-      q:'',
+      // AudioPlay: ''
+      isOK:true,
+      searchs:'searchs',
+      searchb:'searchb',
+      IconSearch:
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_search.png",
+      tab: "",
+      q: "",
       loading: false,
       finished: false,
-      actid: '',
+      actid: "",
       newpage: 1,
       toppage: 1,
       show: false,
-      refreshing: false,
       pageSize: 10,
     };
   },
   components: {
-    toast,
+    toast
+  },
+  mounted() {
+    window.addEventListener("scroll", this.handleScroll, true);
+    // 监听（绑定）滚轮 滚动事件
   },
   computed: {
     ...mapactivityState({
@@ -139,41 +146,67 @@ export default {
       'vote',
       'getMine',
     ]),
+    handleScroll() {
+      // 页面滚动距顶部距离
+      var scrollTop =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop;
+         window.console.log(scrollTop);
+         if(scrollTop>=280){
+          this.isOK =false;
+        }else {
+          this.isOK=true;
+        }
+
+      var scroll = scrollTop - this.i;
+      this.i = scrollTop;
+     
+      // if (scroll < 0) {
+      //   this.isFixed =false;
+      //   console.log("up");
+      // } else {
+      //    if(this.i>=280){
+      //     this.isFixed =true;
+      //   }
+      //   console.log("down");
+      // }
+    },
     newlist() {
       return this.getList({
         actid: this.actid,
         page: this.newpage,
-        q: this.q,
-      })
+        q: this.q
+      });
     },
     toplist() {
       return this.getTopList({
         actid: this.actid,
         page: this.toppage,
-        q: this.q,
-      })
+        q: this.q
+      });
     },
     Vote(memberid) {
       this.vote({
         actid: this.actid,
         memberid: memberid,
-        openid: this.user,
+        openid: this.user
       }).then(() => {
         const newlist = this.newList.map(x => {
           if (x.MemberId == memberid) {
-            x.Vote = x.Vote + 1
+            x.Vote = x.Vote + 1;
           }
-          return x
-        })
-        this.newList  = newlist
+          return x;
+        });
+        this.newList = newlist;
         const toplist = this.topList.map(x => {
           if (x.MemberId == memberid) {
-            x.Vote = x.Vote + 1
+            x.Vote = x.Vote + 1;
           }
-          return x
-        })
-        this.topList = toplist
-      })
+          return x;
+        });
+        this.topList = toplist;
+      });
     },
     loadNewList() {
       this.newlist().then((res) => {
@@ -199,24 +232,24 @@ export default {
     },
     signup() {
       this.$router.push({
-        path: `/vote/signup/${this.actid}`,
+        path: `/vote/signup/${this.actid}`
       });
     },
     gotovotingdetails(memberid) {
       this.$router.push({
         path: `/detail/${this.actid}/${memberid}`
-      })
+      });
     },
     close() {
-      this.show = false
+      this.show = false;
     },
     tolink() {
-      window.location.href = this.info.AfterVote
+      window.location.href = this.info.AfterVote;
     },
     search() {
-      this.newlist()
-      this.toplist()
-    },
+      this.newlist();
+      this.toplist();
+    }
   }
 };
 </script>
@@ -232,7 +265,7 @@ export default {
 }
 .van-tabs__wrap {
   width: 100%;
-  z-index: 1;
+  z-index: 0;
 }
 .van-tabs__nav--card .van-tab.van-tab--active {
   background-color: rgba(166, 184, 201, 1);
@@ -273,11 +306,48 @@ export default {
 
   .BannerImage {
     width: 100%;
-    height: 2rem;
-    margin-bottom: 0.2rem;
+    height: 3.4rem;
   }
+.searchb{
+  width: 93%;
+    height: 0.44rem;
+    background-color: rgba(201, 214, 224, 1);
+    border-radius: 6px;
+    border: 0.01rem solid rgba(255, 255, 255, 1);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: calc(3.1%);
 
-  .search {
+    input {
+      // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
+      background-color: rgba(255, 255, 255, 0);
+      color: rgba(255, 255, 255, 1);
+      font-size: 0.16rem;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      line-height: 0.22rem;
+      width: 5rem;
+      text-indent: 0.1rem;
+    }
+    input::-webkit-input-placeholder {
+      color: rgba(255, 255, 255, 1);
+      font-size: 0.16rem;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      line-height: 0.22rem;
+    }
+    .IconSearch {
+      width: 0.2rem;
+      height: 0.2rem;
+      margin-right: 0.1rem;
+    }
+
+}
+  .searchs {
     width: 93%;
     height: 0.44rem;
     background-color: rgba(201, 214, 224, 1);
@@ -287,7 +357,9 @@ export default {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 0.19rem;
+    position: absolute;
+    top: 2.8rem;
+    left: calc(3.1%);
 
     input {
       // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
@@ -312,20 +384,17 @@ export default {
       width: 0.2rem;
       height: 0.2rem;
       margin-right: 0.1rem;
-      //   font-size: 0.3rem !important;
-      //   color: rgba(255, 255, 255, 1) !important;
-      //   padding-right: 0.1rem;
     }
   }
   .informationimg {
     width: 97%;
     height: 6.24rem;
-    margin: 0 0.1rem 0.35rem 0;
   }
 
   .box {
     width: 89%;
     height: 0.12rem;
+    margin-top: 0.35rem;
     background-color: rgba(255, 255, 255, 0.29);
     border-radius: 0.06rem 0.06rem 0 0;
   }
@@ -447,7 +516,9 @@ export default {
     font-weight: bold;
     color: rgba(255, 255, 255, 1);
     line-height: 0.28rem;
-    margin-bottom: 0.19rem;
+    position: fixed;
+    bottom: 0.19rem;
+    left: calc(4.25%);
   }
 }
 </style>

src/views/vote/signup.vue

@@ -25,7 +25,7 @@
       </div>
       <input placeholder="输入手机号" v-model="postData.phone"/>
       <input placeholder="输入姓名" v-model="postData.name"/>
-      <!-- <textarea class="addressarea" placeholder="所在社区"></textarea> -->
+      <!-- <textarea class="addressarea" placeholder="所在社区" ></textarea> -->
       <div class="btn">
           <button class="SubmitBtn" @click="SubmitBtn">提交</button>
       </div>
@@ -70,6 +70,7 @@ export default {
       'voteMember',
     ]),
     onRead (file) {
+      console.log(file);
       let that = this
       this.isLoading = true
       let reader = new FileReader();
@@ -120,7 +121,7 @@ export default {
     height: 5.85rem;
     border-radius: 0.06rem;
     background-color: rgba(255, 255, 255, 1);
-    margin-top: 0.7rem;
+    margin-top: 0.12rem;
 
     .uploadimg {
       display: flex;
@@ -247,7 +248,7 @@ line-height:0.22rem;
     .addressarea{
          width: 84%;
         height: 0.8rem;
-        background-color:rgba(255,241,241,1);;
+        background-color:rgba(220,229,236,0.63);
 border-radius:0.06rem;
 padding: 0.02rem 0.1rem;
     margin: 0 0 2% 5%;