beizhu

src/App.vue

@@ -1,34 +1,32 @@
 <template>
   <div id="app" v-if="showPage">
     <router-view/>
-    <music :url="activity.Music"> </music>
+    <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");
+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 () {
+  data() {
     return {
-      showPage: true,
-    }
+      showPage: true
+    };
   },
   components: {
-    music,
+    music
   },
   computed: {
     ...mapactivityState({
-      activity: s => s.activity || {},
+      activity: s => s.activity || {}
     })
   },
-  created () {
+  created() {
     // if (location.search && this.toolClass.UrlSearch(location.search).code) {
     //   this.code = this.toolClass.UrlSearch(location.search).code
     //   let oldCode = localStorage.getItem('code')
@@ -44,12 +42,11 @@ export default {
     // } else {
     //   this.toolClass.getCode('wx32e2e8c81f66070e')
     // }
-
   },
   methods: {
-    ...mapIndexActions(['user'])
+    ...mapIndexActions(["user"])
   }
-}
+};
 </script>
 
 

src/store/vote.js

@@ -11,24 +11,24 @@ export default {
     list: [],
   },
   mutations: {
-    updateActivity (state, data) {
+    updateActivity(state, data) {
       state.activity = data || {}
     },
-    updateUser (state, data) {
+    updateUser(state, data) {
       state.user = data
     },
-    updateDetail (state, data) {
+    updateDetail(state, data) {
       state.detail = data || {}
     },
-    updateList (state, data) {
+    updateList(state, data) {
       state.list = data || []
     },
-    updateTopList (state, data) {
+    updateTopList(state, data) {
       state.toplist = data || []
     },
   },
   actions: {
-    getActivity ({ commit }, {actid}) {
+    getActivity({ commit }, { actid }) {
       return new Promise((resolve, reject) => {
         ajax({
           ...api.voteing.info,
@@ -41,7 +41,7 @@ export default {
         }).catch(reject)
       })
     },
-    getMember ({ commit }, payload) {
+    getMember({ commit }, payload) {
       return new Promise((resolve, reject) => {
         ajax({
           ...api.voteing.detail,
@@ -55,7 +55,7 @@ export default {
         }).catch(reject)
       })
     },
-    vote (m, payload) {
+    vote(m, payload) {
       return new Promise((resolve, reject) => {
         ajax({
           ...api.voteing.vote,
@@ -71,7 +71,7 @@ export default {
         }).catch(reject)
       })
     },
-    voteMember ({ commit }, payload) {
+    voteMember({ commit }, payload) {
       return new Promise((resolve, reject) => {
         ajax({
           ...api.voteing.registe,
@@ -87,7 +87,7 @@ export default {
         }).catch(reject)
       })
     },
-    getUser ({ commit }, { code }) {
+    getUser({ commit }, { code }) {
       return new Promise((resolve, reject) => {
         ajax({
           ...api.voteing.user,
@@ -100,7 +100,7 @@ export default {
         }).catch(reject)
       })
     },
-    getList ({ commit }, payload) {
+    getList({ commit }, payload) {
       return new Promise((resolve, reject) => {
         ajax({
           ...api.voteing.list,
@@ -114,7 +114,7 @@ export default {
         }).catch(reject)
       })
     },
-    getTopList ({ commit }, payload) {
+    getTopList({ commit }, payload) {
       return new Promise((resolve, reject) => {
         ajax({
           ...api.voteing.list,

src/views/vote/index.vue

@@ -17,16 +17,16 @@ export default {
   data() {
     return {
       enter: true,
-      classone: 'classone',
-      classtwo: 'classtwo',
+      classone: "classone",
+      classtwo: "classtwo",
       actid: this.$route.query.actid
     };
   },
   created() {
     if (this.$route.query.actid == 1) {
-      this.enter =true;
+      this.enter = true;
     } else if (this.$route.query.actid == 2) {
-      this.enter =false;
+      this.enter = false;
     }
     this.getActivity({
       actid: this.actid

src/views/vote/list.vue

@@ -176,6 +176,22 @@ export default {
       }
     },
 
+       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);
+    },
+
     ...mapactivityActions(["getList", "getTopList", "getActivity", "vote"]),
     newlist() {
       this.getList({

src/views/vote/signup.vue

@@ -13,75 +13,92 @@
         <span :class="desc?desc1:desc2">寄语</span>
       </div>
       <div class="input_content" v-if="writeword">
-        <textarea id="textArea" @input="messageWrite" maxlength="200" v-model="postData.message" class="content_txt" ></textarea>
+        <textarea
+          id="textArea"
+          @input="messageWrite"
+          maxlength="200"
+          v-model="postData.message"
+          class="content_txt"
+        ></textarea>
         <span class="number">
           <span id="textNum">{{messagenum}}</span>
-          <span class="totalnum" >/200</span>
+          <span class="totalnum">/200</span>
         </span>
       </div>
       <div class="ContactInformation">
-          <img :src="img?yttjphone:yjsphone"/>
-          <span :class="desc?desc1:desc2">联系方式</span>
+        <img :src="img?yttjphone:yjsphone">
+        <span :class="desc?desc1:desc2">联系方式</span>
       </div>
       <div :class="desc?inputbox1:inputbox2">
-        <input placeholder="输入手机号" v-model="postData.phone"/>
+        <input placeholder="输入手机号" v-model="postData.phone">
       </div>
-      
+
       <div :class="desc?inputbox1:inputbox2">
-        <input placeholder="输入姓名" v-model="postData.name"/>
-      </div>  
+        <input placeholder="输入姓名" v-model="postData.name">
+      </div>
       <div :class="desc?textareabox1:textareabox2" v-if="address">
-      <textarea class="addressarea" placeholder="所在社区" ></textarea>
+        <textarea class="addressarea" placeholder="所在社区"></textarea>
       </div>
       <div class="btn">
-          <button :class="desc?SubmitBtn1:SubmitBtn2" @click="SubmitBtn">提交</button>
+        <button :class="desc?SubmitBtn1:SubmitBtn2" @click="SubmitBtn">提交</button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { createNamespacedHelpers } from 'vuex';
+import { createNamespacedHelpers } from "vuex";
 import BgImg from "../../assets/bgimg.jpg";
 import BgImage from "../../assets/yttjbg.png";
-const {mapState: mapVoteState, mapActions: mapVoteActions} = createNamespacedHelpers('vote')
+const {
+  mapState: mapVoteState,
+  mapActions: mapVoteActions
+} = createNamespacedHelpers("vote");
 export default {
-  name: 'signup',
+  name: "signup",
   data() {
     return {
-      writeword:false,
-      address:false,
-      desc:true,
-      desc1:'desc1',
-      desc2:'desc2',
-      inputbox1:'inputbox1',
-      inputbox2:'inputbox2',
-      textareabox1:'textareabox1',
-      textareabox2:'textareabox2',
-      SubmitBtn1:'SubmitBtn1',
-      SubmitBtn2:'SubmitBtn2',
+      writeword: false,
+      address: false,
+      desc: true,
+      desc1: "desc1",
+      desc2: "desc2",
+      inputbox1: "inputbox1",
+      inputbox2: "inputbox2",
+      textareabox1: "textareabox1",
+      textareabox2: "textareabox2",
+      SubmitBtn1: "SubmitBtn1",
+      SubmitBtn2: "SubmitBtn2",
       coverImgUrl: true,
       BgImg,
       BgImage,
-      img:true,
+      img: true,
       isLoading: false,
-      uploadimg1: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/uploadimg.png',
-      uploadimg2: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjsuploadimg.png',
-      yttjlove:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_love.png',
-      yttjpen:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_pen.png',
-      yttjphone:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_phone.png',
-      yjslove:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_love.png',
-      yjspen:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_pen.png',
-      yjsphone:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_phone.png',
+      uploadimg1:
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/uploadimg.png",
+      uploadimg2:
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjsuploadimg.png",
+      yttjlove:
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_love.png",
+      yttjpen:
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_pen.png",
+      yttjphone:
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_phone.png",
+      yjslove:
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_love.png",
+      yjspen:
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_pen.png",
+      yjsphone:
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_phone.png",
       messagenum: 0,
       postData: {
-        photo: '',
-        phone: '',
-        name: '',
-        addr: '',
-        message: '',
+        photo: "",
+        phone: "",
+        name: "",
+        addr: "",
+        message: ""
       },
-      actid: '',
+      actid: ""
     };
   },
   computed: {
@@ -89,67 +106,68 @@ export default {
       user: x => x.user
     })
   },
-  created () {
-    this.actid = this.$route.params.actid
-    if(this.actid==1){
+  created() {
+    this.actid = this.$route.params.actid;
+    if (this.actid == 1) {
       this.coverImgUrl = true;
-      this.img=true;
-      this.address=false;
-      this.writeword=true;
-      this.desc=true;
-    }else if(this.actid==2){
+      this.img = true;
+      this.address = false;
+      this.writeword = true;
+      this.desc = true;
+    } else if (this.actid == 2) {
       this.coverImgUrl = false;
-      this.img=false;
-      this.address=true;
-      this.writeword=false;
-      this.desc=false;
+      this.img = false;
+      this.address = true;
+      this.writeword = false;
+      this.desc = false;
     }
-    if(this.$route.params.actid != '') {
-      this.actid = this.$route.params.actid
+    if (this.$route.params.actid != "") {
+      this.actid = this.$route.params.actid;
     } else {
-      alert("不存在对应的活动信息！")
+      alert("不存在对应的活动信息！");
     }
   },
   methods: {
-    ...mapVoteActions([
-      'voteMember',
-    ]),
-    onRead (file) {
+    ...mapVoteActions(["voteMember"]),
+    onRead(file) {
       console.log(file);
-      let that = this
-      this.isLoading = true
+      let that = this;
+      this.isLoading = true;
       let reader = new FileReader();
       reader.readAsDataURL(file.file);
-      reader.onload = function (e) {
+      reader.onload = function(e) {
         let data = e.target.result;
         //加载图片获取图片真实宽度和高度
         let image = new Image();
         image.src = data;
-        image.onload = function () {
-          that.toolClass.upload(file).then((res) => {
-            that.uploadimg = res.result.url
-            that.postData.photo = res.result.url
-          }).catch(() => {
-            that.isLoading = false
-          })
+        image.onload = function() {
+          that.toolClass
+            .upload(file)
+            .then(res => {
+              that.uploadimg = res.result.url;
+              that.postData.photo = res.result.url;
+            })
+            .catch(() => {
+              that.isLoading = false;
+            });
         };
       };
     },
-    messageWrite () {
-      this.messagenum = this.postData.message.length
+    messageWrite() {
+      this.messagenum = this.postData.message.length;
     },
-    SubmitBtn () {
+    SubmitBtn() {
       this.voteMember({
         actid: this.actid,
         openid: this.user,
-        ...this.postData,
-      }).then((res) => {
+        ...this.postData
+      }).then(res => {
         this.$router.push({
           path: `/detail/${this.actid}/${res.MemberId}`
-        })
-      })
-    },
-  },
+        });
+      });
+    }
+  }
 };
 </script>
 
@@ -157,7 +175,7 @@ export default {
 .context {
   width: 100%;
   height: 100%;
-  background-color: rgba(209,220,228,1);
+  background-color: rgba(209, 220, 228, 1);
   display: flex;
   justify-content: center;
 
@@ -182,7 +200,7 @@ export default {
         font-size: 0.16rem;
         font-family: PingFangSC-Medium;
         font-weight: bolder;
-        color:rgba(112,125,138,1);
+        color: rgba(112, 125, 138, 1);
         line-height: 0.22rem;
         padding-left: 0.03rem;
       }
@@ -190,7 +208,7 @@ export default {
         font-size: 0.16rem;
         font-family: PingFangSC-Medium;
         font-weight: bolder;
-        color:rgba(112,84,75,1);
+        color: rgba(112, 84, 75, 1);
         line-height: 0.22rem;
         padding-left: 0.03rem;
       }
@@ -211,11 +229,11 @@ export default {
         width: 0.22rem;
         height: 0.2rem;
       }
-     .desc1 {
+      .desc1 {
         font-size: 0.16rem;
         font-family: PingFangSC-Medium;
         font-weight: bolder;
-        color:rgba(112,125,138,1);
+        color: rgba(112, 125, 138, 1);
         line-height: 0.22rem;
         padding-left: 0.03rem;
       }
@@ -223,7 +241,7 @@ export default {
         font-size: 0.16rem;
         font-family: PingFangSC-Medium;
         font-weight: bolder;
-        color:rgba(112,84,75,1);
+        color: rgba(112, 84, 75, 1);
         line-height: 0.22rem;
         padding-left: 0.03rem;
       }
@@ -242,49 +260,49 @@ export default {
         border: none;
         font-size: 0.16rem;
         font-weight: bold;
-        background:rgba(220,229,236,0.63);
+        background: rgba(220, 229, 236, 0.63);
         line-height: 0.22rem;
         border-radius: 0.06rem;
-        font-weight:bold;
-color:rgba(112,125,138,1);
+        font-weight: bold;
+        color: rgba(112, 125, 138, 1);
       }
       .number {
         position: absolute;
         bottom: 0;
         right: -0.1rem;
 
-        #textNum{
-color:#707D8A;
-font-size:0.14rem;
-font-family:PingFangSC-Medium;
-font-weight:bolder;
-line-height:0.2rem;
+        #textNum {
+          color: #707d8a;
+          font-size: 0.14rem;
+          font-family: PingFangSC-Medium;
+          font-weight: bolder;
+          line-height: 0.2rem;
         }
 
-        .totalnum{
-color:#B8C2CB;
-font-size:0.14rem;
-font-family:PingFangSC-Medium;
-font-weight:bolder;
-line-height:0.2rem;
+        .totalnum {
+          color: #b8c2cb;
+          font-size: 0.14rem;
+          font-family: PingFangSC-Medium;
+          font-weight: bolder;
+          line-height: 0.2rem;
         }
       }
     }
 
-    .ContactInformation{
-        display: flex;
+    .ContactInformation {
+      display: flex;
       flex-direction: row;
       padding: 0.15rem 0 0.08rem 0.1rem;
 
-      img{
-          width: 0.22rem;
+      img {
+        width: 0.22rem;
         height: 0.2rem;
       }
-     .desc1 {
+      .desc1 {
         font-size: 0.16rem;
         font-family: PingFangSC-Medium;
         font-weight: bolder;
-        color:rgba(112,125,138,1);
+        color: rgba(112, 125, 138, 1);
         line-height: 0.22rem;
         padding-left: 0.03rem;
       }
@@ -292,140 +310,137 @@ line-height:0.2rem;
         font-size: 0.16rem;
         font-family: PingFangSC-Medium;
         font-weight: bolder;
-        color:rgba(112,84,75,1);
+        color: rgba(112, 84, 75, 1);
         line-height: 0.22rem;
         padding-left: 0.03rem;
       }
     }
 
-    .inputbox1{
-width: 84%;
-    height: 0.4rem;
-    background-color: rgba(220, 229, 236, 0.63);
-    margin-left: calc(8%);
-    margin-bottom: 0.08rem;
-    border-radius: 0.06rem;
-   input{
-            width: 100%;
-    height: 100%;
-    background-color: rgba(255, 255, 255, 0);
-    text-indent: 0.12rem;
-    }
+    .inputbox1 {
+      width: 84%;
+      height: 0.4rem;
+      background-color: rgba(220, 229, 236, 0.63);
+      margin-left: calc(8%);
+      margin-bottom: 0.08rem;
+      border-radius: 0.06rem;
+      input {
+        width: 100%;
+        height: 100%;
+        background-color: rgba(255, 255, 255, 0);
+        text-indent: 0.12rem;
+      }
 
-    input::-webkit-input-placeholder {
-     font-size:0.16rem;
-font-family:PingFangSC-Medium;
-font-weight:bolder;
-color:rgba(117,132,146,0.4);
-line-height:0.22rem;
-    }
+      input::-webkit-input-placeholder {
+        font-size: 0.16rem;
+        font-family: PingFangSC-Medium;
+        font-weight: bolder;
+        color: rgba(117, 132, 146, 0.4);
+        line-height: 0.22rem;
+      }
     }
 
-       .inputbox2{
-width: 84%;
-    height: 0.4rem;
-    background-color: rgba(232,224,220,1);
-    margin-left: calc(8%);
-    margin-bottom: 0.08rem;
-    border-radius: 0.06rem;
-   input{
-            width: 100%;
-    height: 100%;
-    background-color: rgba(255, 255, 255, 0);
-    text-indent: 0.12rem;
-    }
+    .inputbox2 {
+      width: 84%;
+      height: 0.4rem;
+      background-color: rgba(232, 224, 220, 1);
+      margin-left: calc(8%);
+      margin-bottom: 0.08rem;
+      border-radius: 0.06rem;
+      input {
+        width: 100%;
+        height: 100%;
+        background-color: rgba(255, 255, 255, 0);
+        text-indent: 0.12rem;
+      }
 
-    input::-webkit-input-placeholder {
-     font-size:0.16rem;
-font-family:PingFangSC-Medium;
-font-weight:bolder;
-color:rgba(139,116,102,0.4);
-line-height:0.22rem;
-    }
+      input::-webkit-input-placeholder {
+        font-size: 0.16rem;
+        font-family: PingFangSC-Medium;
+        font-weight: bolder;
+        color: rgba(139, 116, 102, 0.4);
+        line-height: 0.22rem;
+      }
     }
- .textareabox1{
- width: 84%;
-        height: 0.8rem;
-        background-color:rgba(220,229,236,0.63);
-border-radius:0.06rem;
- margin-left: calc(8%);
-   .addressarea{
-         width: 100%;
+    .textareabox1 {
+      width: 84%;
+      height: 0.8rem;
+      background-color: rgba(220, 229, 236, 0.63);
+      border-radius: 0.06rem;
+      margin-left: calc(8%);
+      .addressarea {
+        width: 100%;
         height: 100%;
         margin-top: 0.08rem;
         background-color: rgba(255, 255, 255, 0);
- text-indent: 0.12rem;
-    }
-     textarea::-webkit-input-placeholder {
-     font-size:0.16rem;
-font-family:PingFangSC-Medium;
-font-weight:bolder;
-color:rgba(112,125,138,0.4);
-line-height:0.22rem;
+        text-indent: 0.12rem;
+      }
+      textarea::-webkit-input-placeholder {
+        font-size: 0.16rem;
+        font-family: PingFangSC-Medium;
+        font-weight: bolder;
+        color: rgba(112, 125, 138, 0.4);
+        line-height: 0.22rem;
+      }
     }
- }
 
- .textareabox2{
- width: 84%;
-        height: 0.8rem;
-        background-color: rgba(232,224,220,1);
-border-radius:0.06rem;
- margin-left: calc(8%);
-   .addressarea{
-         width: 100%;
+    .textareabox2 {
+      width: 84%;
+      height: 0.8rem;
+      background-color: rgba(232, 224, 220, 1);
+      border-radius: 0.06rem;
+      margin-left: calc(8%);
+      .addressarea {
+        width: 100%;
         height: 100%;
         margin-top: 0.08rem;
         background-color: rgba(255, 255, 255, 0);
- text-indent: 0.12rem;
-    }
-     textarea::-webkit-input-placeholder {
-     font-size:0.16rem;
-font-family:PingFangSC-Medium;
-font-weight:bolder;
-color:rgba(139,116,102,0.4);
-line-height:0.22rem;
+        text-indent: 0.12rem;
+      }
+      textarea::-webkit-input-placeholder {
+        font-size: 0.16rem;
+        font-family: PingFangSC-Medium;
+        font-weight: bolder;
+        color: rgba(139, 116, 102, 0.4);
+        line-height: 0.22rem;
+      }
     }
- }
 
- 
-.btn{
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-        position: absolute;
-    left: 0;
-    bottom: 1rem;
+    .btn {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      left: 0;
+      bottom: 1rem;
 
-       .SubmitBtn1{
+      .SubmitBtn1 {
         width: 44%;
-    height: 0.5rem;
-    border-radius: 0.23rem;
-   background:rgba(166,184,201,1);
-box-shadow:0px 2px 10px 0px rgba(207,217,227,1);
-    border: none;
-    font-size: 0.2rem;
-    font-family: PingFangSC-Medium;
-    font-weight: bolder;
-    color: rgba(255, 255, 255, 1);
-    line-height: 0.28rem;
-    }
-    .SubmitBtn2{
-             width: 44%;
-    height: 0.5rem;
-    border-radius: 0.23rem;
- background:rgba(173,145,129,1);
-box-shadow:0px 2px 10px 0px rgba(120,108,101,0.46);
-    border: none;
-    font-size: 0.2rem;
-    font-family: PingFangSC-Medium;
-    font-weight: bolder;
-    color: rgba(255, 255, 255, 1);
-    line-height: 0.28rem;
+        height: 0.5rem;
+        border-radius: 0.23rem;
+        background: rgba(166, 184, 201, 1);
+        box-shadow: 0px 2px 10px 0px rgba(207, 217, 227, 1);
+        border: none;
+        font-size: 0.2rem;
+        font-family: PingFangSC-Medium;
+        font-weight: bolder;
+        color: rgba(255, 255, 255, 1);
+        line-height: 0.28rem;
+      }
+      .SubmitBtn2 {
+        width: 44%;
+        height: 0.5rem;
+        border-radius: 0.23rem;
+        background: rgba(173, 145, 129, 1);
+        box-shadow: 0px 2px 10px 0px rgba(120, 108, 101, 0.46);
+        border: none;
+        font-size: 0.2rem;
+        font-family: PingFangSC-Medium;
+        font-weight: bolder;
+        color: rgba(255, 255, 255, 1);
+        line-height: 0.28rem;
+      }
     }
-
-}
- 
   }
 }
 </style>