居民议事

project.config.json

@@ -0,0 +1,28 @@
+{
+  "appid": "wxaf87b420b87e2d79",
+  "compileType": "miniprogram",
+  "libVersion": "3.4.6",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "minified": true,
+    "enhance": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmRelationList": [],
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    }
+  },
+  "condition": {},
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
+}

project.private.config.json

@@ -0,0 +1,7 @@
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "epmet-wx-pa",
+  "setting": {
+    "compileHotReLoad": true
+  }
+}

src/assets/css/index.less

@@ -56,6 +56,9 @@ body #app {
   &-y{
       flex-direction: column;
   }
+  &-x{
+    flex-direction: row;
+}
   &-center1{
     justify-content: center;
   }
@@ -65,23 +68,33 @@ body #app {
   &-center3{
     align-items: flex-start;
   }
+  //
   &-mean{
     justify-content: space-around;
   }
+  //两端对齐
   &-end{
     justify-content: space-between;
   }
+  //水平轴右对齐
   &-fend{
     justify-content: flex-end;
   }
+  // 允许子元素换行
   &-wrap{
     flex-wrap: wrap;
   }
 }
+.z{
+  z-index: 5;
+}
 .m{
   &-left12{
     margin-left: 12px;
   }
+  &-left012{
+    margin-left: -5px;
+  }
   &-left18{
     margin-left: 18px;
   }
@@ -100,9 +113,13 @@ body #app {
   &-bottom5{
     margin-bottom: 5px;
   }
+  &-bottom10{
+    margin-bottom: 10px;
+  }
   &-right10{
     margin-right: 10px;
   }
+  
   &-top15{
     margin-top: 15px;
   }
@@ -131,7 +148,7 @@ body #app {
     padding: 12px;
   }
 }
-
+//固定在底部左侧。背景颜色为白色，全部窗口
 .bto_btn{
   position: fixed;
   bottom: 5px;
@@ -142,7 +159,7 @@ body #app {
   box-sizing: border-box;
   text-align: right;
 }
-
+// 相对定位
 .required{
   position: relative;
 }
@@ -217,4 +234,7 @@ body #app {
 .content{
   width: calc(100% - 20px);
   margin: 0 auto;
+}
+.back_color{
+  background: #F7F7F7;
 }

src/router/router.config.js

@@ -88,10 +88,23 @@ export const constantRouterMap = [
     name: 'activity',
     component: () => import('@/views/activity'),
     meta: { title: '社区活动', keepAlive: false }
-  },{
+  },
+  {
+    path: '/discussion',
+    name: 'discussion',
+    component: () => import('@/views/discussion'),
+    meta: { title: '社区议事', keepAlive: false }
+  },
+  {
     path: '/activityDetail',
     name: 'activityDetail',
     component: () => import('@/views/activity/detail'),
     meta: { title: '活动详情', keepAlive: false }
+  },
+  {
+    path: '/discusionDetail',
+    name: 'discusionDetail',
+    component: () => import('@/views/discussion/discusionDetail'),
+    meta: { title: '详情', keepAlive: false }
   }
 ]

src/views/discussion/discusionDetail.vue

@@ -0,0 +1,221 @@
+<template>
+    <div class='container'>
+        <div class="card flex flex-y ">
+            <div class="m-bottom5">{{ substance }}</div>
+            <div class="font-size13 gray">{{ datetime }}</div>
+            <div class="image-grid">
+                <div class="grid-item ">
+                    <img src="@/assets/images/discusion/1.png" style="width: 105px; height: 75px;">
+                </div>
+                <div class="grid-item"><img src="@/assets/images/discusion/2.png" style="width: 105px; height: 75px;">
+                </div>
+                <div class="grid-item"><img src="@/assets/images/discusion/3.png" style="width: 105px; height: 75px;">
+                </div>
+                <div class="grid-item"><img src="@/assets/images/discusion/3.png" style="width: 105px; height: 75px;">
+                </div>
+            </div>
+            <div class="flex flex-y flex-center1 flex-center2 gray back_color  m-top15">
+                <div class="flex flex-x m-top16 flex-center1 flex-center2">
+                    <div class="rectangle-container flex flex-x" >
+                        <div class="flex flex-x" >   <div class=" header_img_left"> </div>
+                        <div class="image-with-text ">
+                            <img class="support_img1" :style="{ width: support1Width }"
+                                src="@/assets/images/discusion/c-l.png" />
+                            <div class="text-overlay">支持  {{ this.supportNum }}</div>
+                        </div>
+                        <div class="header_img_right">
+                        </div></div>
+                        <div class="image-with-text z  ">
+                            <img src="@/assets/images/discusion/VS.png" class="img_33  m-left012  " alt="Your Image" />
+                            
+                        </div>
+                        <div class="flex flex-x"> <div class="footer_img_left z_img m-left012">
+                        </div>
+                        <div class="image-with-text ">
+                            <img class="support_img2" :style="{ width: oppose1Width }"
+                                src="@/assets/images/discusion/z-y.png" />
+                                <div class="text-overlay1">  {{ this.opposeNum }}  反对</div>
+                        </div>
+                        <div class="z_img">
+                            
+                        </div></div>
+                       
+                    </div>
+                </div>
+                <div class="gray  font-size13 p-12">{{ this.dataValue }}人参与</div>
+
+            </div>
+        </div>
+        <div class="bot_btn flex flex-x flex-mean m-bot50 back_color">
+            <van-button    :disabled="disableAllButtons"  round :class="supportNum ? 'support' : ''" :icon="require('@/assets/images/icons/support.png')"
+                type="info" @click="Onsupport">
+                支持
+            </van-button>
+        
+            <van-button  :disabled="disableAllButtons" round class="support" :icon="require('@/assets/images/icons/oppose.png')"
+                type="info" @click="Onoppose">
+                反对
+            </van-button>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            substance: '最近重庆南路60号院改造，很多居民反应希望 政府给楼外加保护层，冬天温度太低。',
+            datetime: '2002-01-05 12:00:00',
+            signUp: [
+                { name: "", mobile: "", remark: "" },
+
+            ],
+            detimgs: [
+                { url: '@/assets/images/icons/resi.png' }
+            ],
+            dataValue: 100,
+            support: false,
+            oppose: false,
+            supportNum: 40,
+            opposeNum: 60,
+            disableAllButtons: false
+
+        };
+
+    },
+    computed: {
+        support1() {
+            return this.supportNum / this.dataValue;
+        },
+        oppose1() {
+            return this.opposeNum / this.dataValue;
+        },
+        support1Width() {
+            return this.support1 * 225 + 'px';
+        },
+        oppose1Width() {
+            return this.oppose1 * 225 + 'px';
+        }
+    },
+    created() {
+
+    },
+    methods: {
+        handsupport() {
+            this.support = true;
+        },
+        Onsupport(){
+            console.log("1111")
+            this.supportNum++;
+            this.dataValue++;
+            this.disableAllButtons = true; // 点击后禁用所有按钮
+            console.log(this.supportNum)
+            
+        },
+        Onoppose(){
+            console.log("1111")
+            this.opposeNum++;
+            this.dataValue++;
+            this.disableAllButtons = true; // 点击后禁用所有按钮
+            console.log(this.supportNum)
+            
+        }
+
+    },
+
+}
+</script>
+
+<style lang='less' scoped>
+.image-container {
+  position: relative;
+  display: inline-block;
+}
+
+.image-grid {
+    margin-top: 20px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-flow: row;
+    /* 自动换行 */
+}
+
+.z_img {
+    width: 10px;
+    height: 35px;
+    background: url('@/assets/images/discusion/f-y.png');
+    background-size: cover;
+}
+
+.image-with-text {
+  position: relative;
+  display: inline-block;
+}
+
+.grid-item {
+    text-align: center;
+}
+
+.support {
+    background-color: #ffffff;
+    color: black;
+}
+
+.t_sup {
+    display: inline-flex;
+    position: absolute;
+}
+
+.support_img1 {
+    height: 35px;
+}
+
+.support_img2 {
+    height: 35px;
+}
+
+.header_img_left {
+    // background:"@/assets/images/discusion/1.png";
+    background: url('@/assets/images/discusion/h-l.png');
+    width: 10px;
+    height: 35px;
+    background-size: cover;
+    /* 使背景图片覆盖整个元素 */
+}
+
+.header_img_right {
+    background: url('@/assets/images/discusion/f-l.png');
+    width: 10px;
+    height: 35px;
+    background-size: cover;
+    /* 使背景图片覆盖整个元素 */
+}
+.text-overlay {
+  position: absolute;
+  bottom: 10px; /* 文字距离图片底部的距离 */
+  color: white; /* 文字颜色，可以根据需要调整 */
+  padding: 5px;
+  border-radius: 3px; /* 可选，圆角 */
+  font-size: 13px;
+  text-align: center;
+
+}
+.text-overlay1 {
+  position: absolute;
+  bottom: 10px; /* 文字距离图片底部的距离 */
+  color: white; /* 文字颜色，可以根据需要调整 */
+  padding: 5px;
+  border-radius: 3px; /* 可选，圆角 */
+  font-size: 13px;
+  text-align: center;
+  right: 0px;
+
+}
+.footer_img_left{
+    background: url('@/assets/images/discusion/h-y.png');
+    width: 10px;
+    height: 35px;
+    background-size: cover;
+}
+</style>

src/views/discussion/index.vue

@@ -0,0 +1,179 @@
+<template>
+    <div>
+        <div class="flex flex-mean" style="background-color: #FFFFFF;">
+            <van-search class=".flex flex-1" v-model="searchValue" left-icon="" shape="round" placeholder="请输入搜索关键词" />
+            <van-button round type="info" class="custom-button font-size13 m-top10 m-right12 ">查询</van-button>
+        </div>
+        <div class='container'>
+            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="communityActivity"
+                class="card" :offset="50">
+                <div class="activity_content " v-for="(item, index) in discussionList" :key="index"
+                    @click="$router.push({ path: `/discusionDetail` })">
+                    <div class="van-multi-ellipsis--l2 m-bottom10">
+                        {{ item.title }}
+                    </div>
+                    <div class="  flex flex-end">
+                        <div class=""><img src="@/assets/images/icons/resi.png" class="img_17"> 参加{{ item.content }}
+                        </div>
+                        <div><img src="@/assets/images/icons/support.png" class="img_17">支持{{ item.time }}</div>
+                        <div><img src="@/assets/images/icons/oppose.png" class="img_17">反对{{ item.content }}</div>
+                    </div>
+                </div>
+            </van-list>
+            <register-dialog v-if="showRegister" @close="showRegister = false"></register-dialog>
+
+        </div>
+    </div>
+
+
+</template>
+
+<script>
+import { communityActivity } from '@/api/home';
+import registerDialog from '@/components/registerDialog';
+
+export default {
+    data() {
+        return {
+            discussionList: [
+                { title: '最近重庆南路60号院改造，很多居民反应希望 政府给楼外加保护层，冬天温度太低。', content: '111', time: '1111', address: '1111', people: '报名人数', state: '报名状态' },
+                { title: '嘉定山社区路段维修时间比较长，耽误居民生 活，出行不便，望尽快维修。活动名称 gj gj fg gfj gf', content: '222', time: '2222', address: '222', people: '报名人数', state: '报名状态' },
+                { title: '嘉定山社区路段维修时间比较长，耽误居民生 活，出行不便，望尽快维修。活动名称 dfsg dg fg dfh fh fdj ', content: '333', time: '333', address: '333', people: '报名人数', state: '报名状态' },
+            ],
+            pageSize: 5,
+            pageNo: 1,
+            agencyId: null,
+            finished: false,
+            loading: true,
+            showRegister: false,
+            searchValue: ""
+        };
+    },
+    created() {
+        this.agencyId = this.$store.state.app.agencyId;
+        this.communityActivity();
+    },
+    methods: {
+        async communityActivity() {
+            let parm = {
+                pageSize: this.pageSize,
+                pageNo: this.pageNo++,
+                agencyId: this.agencyId,
+                activityName: "",
+                status: "",
+                typeId: "",
+                startTime: "",
+                endTime: "",
+                address: "",
+                assistingParty: ""
+            }
+            let res = await communityActivity(parm)
+            if (res) {
+                this.loading = false;
+                if (res.list.length < this.pageSize) {
+                    this.finished = true;
+                }
+                this.activityList = this.activityList.concat(res.list);
+            }
+        },
+        handelClickJump(path) {
+            if (path === 'activityDetail') {
+                if (this.$store.state.app.userInfo.mobile) {
+                    this.$router.push({ path: `/${path}` });
+                } else {
+                    this.showRegister = true;
+                }
+            }
+
+        }
+    },
+    components: { registerDialog },
+    computed: {},
+    watch: {},
+}
+</script>
+
+<style lang='less' scoped>
+.custom-button {
+    width: 60px;
+    height: 33px;
+}
+
+.activity_content {
+    padding-bottom: 10px;
+    box-sizing: border-box;
+    width: 100%;
+    border-bottom: 1px solid #EAEAEA;
+    margin-top: 14px;
+    min-height: 50px;
+
+    .img {
+        width: 231px;
+        height: 33px;
+        margin: 5px 3px 0 3px;
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+
+    .content {
+
+        width: 325px;
+        height: 40px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 16px;
+        color: #333333;
+        line-height: 23px;
+    }
+
+    .dianzan {
+        width: 325px;
+        height: 20px;
+        display: flex;
+        font-size: 13px;
+        color: #AAAAAA;
+        flex-direction: row;
+        justify-content: space-evenly;
+        align-items: center;
+
+        .img {
+            width: 14.5px;
+            height: 15px;
+        }
+    }
+
+
+}
+
+.header {}
+
+.header .input_search {
+    width: 279px;
+    height: 33px;
+    background: rgba(193, 193, 193, 0.16);
+    border-radius: 17px;
+    // flex: 1;
+    color: #333333;
+    border: none;
+    /* 取消边框 */
+    margin-left: 10px;
+}
+
+.header .btn_search {
+    width: 60px;
+    height: 33px;
+    background: #3974F6;
+    border-radius: 17px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 23px;
+    border: none;
+    /* 取消边框 */
+    margin-right: 10px;
+}
+</style>

src/views/home/index.vue

@@ -78,7 +78,7 @@
             <div class="card m-top10">
                 <div class="title">
                     <span>居民议事</span>
-                    <span>更多</span>
+                    <span @click="$router.push('/discussion')">更多</span>
                 </div>
                 <div class="activity_content flex" v-for="(item, index) in eventList">
                     <div class="flex flex-y flex1 flex-end" style="overflow: hidden;">
@@ -185,6 +185,7 @@ export default {
                 }
             } else {
                 this.$router.push({ path: `/${path}` })
+                console.log("1111"+path);
             }
         }
     },