小程序产品库完成

src/mods/party/AppThreeSessions/vote.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="page">
+    <img src="https://cdn.cunwuyun.cn/guangdong/h5/bg@2x.png" alt="" class="bg-img">
+    <div class="title">会议投票</div>
+    <div class="content">
+      <img src="https://cdn.cunwuyun.cn/guangdong/h5/dh@2x.png" alt="">
+      <div>投票主题</div>
+      <p v-html="info.voteTopic"></p>
+    </div>
+    <div class="footer">
+      <div class="bg-gray" v-if="info.myVote">已投票</div>
+      <div class="bg-pink" @click="voteSubmit(0)" v-if="!info.myVote">不同意</div>
+      <div class="bg-red" @click="voteSubmit(1)" v-if="!info.myVote">同意观点</div>
+    </div>
+  </div>
+</template>
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  computed: {
+    ...mapState(['user']),
+  },
+  data() {
+    return {
+      id: '',
+      info: {},
+    };
+  },
+  onLoad(options) {
+    this.id = options.id
+    this.getDetailInfo()
+  },
+  methods: {
+    voteSubmit(myVote) {
+      this.$instance.post(`/app/appthreemeetinguser/voteMeetting?meetingId=${this.id}&myVote=${myVote}&userId=${this.user.partyId}`).then((res) => {
+        if (res.code == 0) {
+          this.$toast('投票成功')
+          this.getDetailInfo()
+        }
+      }).catch((err) => {
+        this.$toast(err)
+      })
+    },
+    getDetailInfo() {
+      this.$instance.post(`/app/appthreemeetinginfo/queryDetailById?id=${this.id}&partyId=${this.user.partyId}`, null, {}).then(res => {
+        if (res.data) {
+          this.info = res.data
+        }
+      })
+    },
+  },
+};
+</script>
+<style lang="scss" scope>
+@import "../../../common/common.css";
+
+.page {
+  background-color: #F3F6F9;
+  position: relative;
+  width: 100%;
+  overflow-x: hidden;
+
+  .bg-img {
+    width: 100%;
+    height: 340px;
+  }
+
+  .title {
+    width: 100%;
+    height: 60px;
+    font-size: 44px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFF;
+    line-height: 60px;
+    position: absolute;
+    top: 50px;
+    left: 290px;
+  }
+
+  .content {
+    position: absolute;
+    top: 210px;
+    left: 20px;
+    width: 710px;
+    background: #FFF;
+    border-radius: 24px;
+    padding: 100px 32px 172px;
+    box-sizing: border-box;
+
+    img {
+      position: absolute;
+      top: -60px;
+      left: 310px;
+      width: 120px;
+      height: 120px;
+    }
+
+    div {
+      font-size: 32px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333;
+      line-height: 44px;
+      margin-bottom: 36px;
+    }
+
+    p {
+      font-size: 28px;
+      color: #333;
+      line-height: 40px;
+    }
+  }
+
+  .footer {
+    display: flex;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+
+    div {
+      flex: 1;
+      text-align: center;
+      height: 112px;
+      line-height: 112px;
+    }
+
+    .bg-gray {
+      font-size: 36px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #999;
+      background: #EAE9E9;
+    }
+
+    .bg-pink {
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #D73D3D;
+      background: #FFE4DD;
+    }
+
+    .bg-red {
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #fff;
+      background: #FE5A49;
+    }
+  }
+}
+</style>