平昌党建-社区

src/project/pingchang/AppPartyEnteringCommunity/AppCommunityInfo.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="AppCommunityInfo" v-if="pageShow">
+    <h2>{{ info.title }}</h2>
+    <div class="info-info">
+      <span>{{ info.areaName }}</span>
+      <span>{{ info.createDate }}</span>
+    </div>
+    <image class="banner" @click="preview(banner)" v-if="banner" mode="widthFix" :src="banner"/>
+    <div class="rich-content">
+      <u-parse :html="info.content"></u-parse>
+    </div>
+    <AiEmpty v-if="!info.title"></AiEmpty>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AppCommunityInfo",
+  appName: "社区简介",
+  data() {
+    return {
+      pageShow: false,
+      info: {},
+      banner: ''
+    }
+  },
+
+  onLoad(query) {
+    if (query.type !== '0') {
+      uni.setNavigationBarTitle({
+        title: query.type == 4 ? '社区公约' : '党员阵地'
+      })
+    }
+
+    this.$loading()
+    this.getInfo(query.type)
+  },
+
+  methods: {
+    getInfo(type) {
+      this.$instance.post(`/app/appcountrysidetourism/queryDetailByAreaIdForWX?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
+        if (res.code === 0 && res.data) {
+          this.info = res.data
+          this.banner = res.data.thumbUrl ? JSON.parse(res.data.thumbUrl)[0].url : ''
+        }
+
+        this.$nextTick(() => {
+          this.pageShow = true
+        })
+      })
+    },
+
+    preview(url) {
+      uni.previewImage({
+        urls: [url],
+        current: url
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppCommunityInfo {
+  min-height: 100vh;
+  padding: 0 32px 40px;
+  box-sizing: border-box;
+  background-color: #fff;
+
+  .banner {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+
+  h2 {
+    line-height: 1.3;
+    padding: 32px 0 16px;
+    font-size: 48px;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .info-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+
+    span {
+      color: #999999;
+      font-size: 30px;
+
+      &:last-child {
+        margin-left: 32px;
+      }
+    }
+  }
+
+  ::v-deep.emptyWrap {
+    width: 100%;
+  }
+}
+</style>

src/project/pingchang/AppPartyEnteringCommunity/AppPartyEnteringCommunity.vue

@@ -0,0 +1,524 @@
+<template>
+  <div class="AppPartyEnteringCommunity">
+    <div class="header" :class="[isFixed ? 'header-active' : '']">
+      <div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
+      <div class="nav-bar">
+        <h2>进村</h2>
+      </div>
+    </div>
+    <header>
+      <image src="/static/img/top-bg.png"/>
+      <div>
+        <AiAreaPicker :selectRoot="false" ref="area" :value="areaId" :name.sync="areaName" :areaId="$areaId"
+                      @input="areaSelect">
+          <div class="ai-area__wrapper">
+            <span class="label" v-if="areaName">{{ areaName }}</span>
+            <span v-else>请选择</span>
+            <image src="/static/img/area-bottom.png"/>
+          </div>
+        </AiAreaPicker>
+        <div class="welcome">欢迎进入{{ areaName }}</div>
+        <div class="tag" v-if="user.homeArea === areaId">我的家乡</div>
+        <div class="tag1" @click="updateUserInfo" v-if="!user.homeArea && token">设为家乡</div>
+      </div>
+    </header>
+    <div class="card">
+      <div class="card-item" hover-class="text-hover" @click="$linkTo('./AppCommunityInfo?type=0')">
+        <image src="https://cdn.cunwuyun.cn/pingchang/sqjj.png"/>
+      </div>
+      <div class="card-item" hover-class="text-hover" @click="$linkTo('./AppCommunityInfo?type=4')">
+        <image src="https://cdn.cunwuyun.cn/pingchang/sqgy.png"/>
+      </div>
+      <div class="card-item" hover-class="text-hover"
+           @click="linkTo('/mods/AppCreditPoints/AppIntegralRanking', 'idNumber')">
+        <image src="https://cdn.cunwuyun.cn/pingchang/dyzd.png"/>
+      </div>
+      <div class="card-item" hover-class="text-hover"
+           @click="linkTo('/mods/AppVillagerDiscussion/AppVillagerDiscussion', 'idNumber')">
+        <image src="https://cdn.cunwuyun.cn/pingchang/jmys.png"/>
+      </div>
+    </div>
+    <!-- <div class="banner" @click="linkTo('/mods/AppCreditPoints/AppCpSupermarket', 'idNumber')">
+      <image src="/static/img/jf-banner.png" class="banner"/>
+    </div> -->
+    <tempalte v-if="publicList.length">
+      <div class="title-wrap">
+        <span class="title">三务公开</span>
+        <div class="right" hover-class="text-hover"
+             @click="$linkTo(`/mods/AppContent/AppContent?names=三务公开&areaId=${areaId}`)">
+          <span class="title-more">更多专题</span>
+          <u-icon name="arrow-right" size="28" color="#999999"></u-icon>
+        </div>
+      </div>
+      <div class="list-news">
+        <div class="news-wrap" v-for="(item,index) in publicList" :key="index"
+             @click="$linkTo('/mods/AppContent/contentDetail?id='+ item.id)">
+          <div class="news-title">{{ item.title }}</div>
+          <div class="news-bottom">
+            <div class="tag">{{ item.categoryName }}</div>
+            <div class="date">{{ item.createTime ? item.createTime.split(' ')[0] : '' }}</div>
+            <div class="view">
+              <em>{{ item.viewCount }}</em>
+              人看过
+            </div>
+          </div>
+        </div>
+      </div>
+    </tempalte>
+    <AiLogin ref="login"/>
+  </div>
+</template>
+<script>
+import {mapActions, mapState} from 'vuex'
+
+export default {
+  name: "AppPartyEnteringCommunity",
+  appName: "党建社区",
+  customNavigation: true,
+  data() {
+    return {
+      isFixed: false,
+      statusBarHeight: 20,
+      top: 0,
+      areaName: '',
+      areaId: '',
+      $areaId: '',
+      publicList: [],
+      moduleId: "",
+      isInit: false
+    }
+  },
+
+  onLoad() {
+    this.areaId = this.$mp.query.areaId || this.$areaId
+    this.areaName = this.$mp.query.areaName || this.$areaName
+    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+    this.autoLogin()
+
+    this.$nextTick(() => {
+      this.getName()
+    })
+  },
+
+  computed: {
+    ...mapState(['user', 'token'])
+  },
+
+  onShow() {
+    this.$nextTick(() => {
+      this.token && this.getUserInfo()
+    })
+
+    if (this.user.homeArea) {
+      if (!this.isInit) {
+        this.areaId = this.user.homeArea
+        this.areaName = this.user.homeName
+        uni.setStorageSync('areaId', this.user.homeArea)
+        uni.setStorageSync('areaName', this.user.homeName)
+        this.isInit = true
+      }
+    } else if (!this.isInit && !this.user.homeArea) {
+      setTimeout(() => {
+        this.$dialog.alert({
+          content: '请选择您的家乡'
+        }).then(() => {
+          this.$refs.area?.handleJump()
+          this.isInit = true
+        })
+      }, 600)
+    }
+  },
+
+  methods: {
+    ...mapActions(['autoLogin', 'getUserInfo']),
+    getName() {
+      this.$instance.post("/app/appcontentmoduleinfo/listByNames", null, {
+        params: {names: "三务公开"}
+      }).then(res => {
+        if (res.data && res.data.length) {
+          this.moduleId = res.data[0]["id"];
+          this.getPublicList();
+        }
+      })
+    },
+
+    updateUserInfo() {
+      if (this.areaId.endsWith('000')) {
+        this.$dialog.alert({
+          content: '请选择村'
+        }).then(() => {
+        })
+
+        return false
+      }
+
+      this.$instance.post("/app/appwechatuser/updateById", {
+        id: this.user.id,
+        homeArea: this.areaId,
+        homeName: this.areaName
+      }).then(res => {
+        if (res.code === 0) {
+          this.getUserInfo()
+        }
+      })
+    },
+
+    getPublicList() {
+      this.$instance.post("/app/appcontentinfo/list", null, {
+        params: {moduleId: this.moduleId, size: 3, areaId: this.areaId}
+      }).then(res => {
+        if (res?.data) {
+          this.publicList = res.data.records;
+        }
+      })
+    },
+
+    linkTo(url, type) {
+      if (type) {
+        if (this.token) {
+          if (type === 'idNumber') {
+            if (!this.user.residentId) {
+              this.$linkTo('/mods/AppAuth/AppAuth')
+            } else {
+              this.$linkTo(url)
+            }
+          }
+        } else {
+          this.$refs.login.show()
+        }
+      } else {
+        this.$linkTo(url)
+      }
+    },
+
+    areaSelect(v) {
+      this.areaId = v
+      this.isMore = false
+      this.current = 0
+      this.newsList = []
+
+      this.$nextTick(() => {
+        this.getPublicList()
+        uni.setStorageSync('areaId', this.areaId)
+        uni.setStorageSync('areaName', this.areaName)
+      })
+    },
+  },
+
+  onShareAppMessage() {
+    return {
+      title: '欢迎使用数字乡村治理服务一体化平台~',
+      path: `/pages/AppEnteringCommunity/AppEnteringCommunity`
+    }
+  },
+
+  onPageScroll(params) {
+    this.isFixed = params.scrollTop > 60;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.AppPartyEnteringCommunity {
+  min-height: 100%;
+  background: #F3F6F9;
+
+  ::v-deep .emptyImg {
+    margin-top: 0 !important;
+  }
+
+  .header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 0;
+    width: 100%;
+    opacity: 0;
+    transition: all 0.2s ease;
+
+    &.header-active {
+      z-index: 1111;
+      opacity: 1;
+      background: #4181FF;
+    }
+
+    .nav-bar {
+      position: relative;
+      height: 88px;
+      line-height: 88px;
+      color: #fff;
+      font-size: 32px;
+      text-align: center;
+    }
+  }
+
+  & > header {
+    position: relative;
+    height: 656px;
+    box-sizing: border-box;
+    padding-left: 32px;
+
+    & > div {
+      position: relative;
+      z-index: 11;
+    }
+
+    .ai-area__wrapper {
+      display: flex;
+      align-items: center;
+      padding-top: 100px;
+
+      span {
+        margin-right: 16px;
+        color: #FFFFFF;
+        font-size: 44px;
+      }
+
+      image {
+        width: 16px;
+        height: 8px;
+      }
+    }
+
+    & > image {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      width: 100%;
+      height: 656px;
+    }
+
+    .welcome {
+      font-size: 28px;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 40px;
+      margin-top: 20px;
+    }
+
+    .tag {
+      width: 120px;
+      height: 44px;
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 22px;
+      font-weight: 400;
+      color: #c0cae0;
+      margin-top: 16px;
+    }
+
+    .tag1 {
+      width: 120px;
+      height: 44px;
+      border: 1px solid #c0cae0;
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 22px;
+      font-weight: 400;
+      color: #c0cae0;
+      margin-top: 16px;
+    }
+  }
+
+  .card {
+    position: relative;
+    z-index: 1;
+    background: #FFFFFF;
+    border-radius: 32px 32px 0 0;
+    margin-top: -336px;
+    box-sizing: border-box;
+    padding: 32px 32px 0 32px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .card-item {
+      width: 332px;
+      height: 160px;
+      margin-bottom: 32px;
+      border-radius: 16px;
+
+      image {
+        width: 332px;
+        height: 160px;
+      }
+    }
+  }
+
+  .banner {
+    position: relative;
+    z-index: 2;
+    height: 200px;
+    background: linear-gradient(180deg, #FFFFFF 0%, #F3F6F9 100%);
+
+    image {
+      display: block;
+      width: 692px;
+      height: 200px;
+      margin: 0 auto;
+    }
+  }
+
+  .title-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 48px 32px 32px;
+
+    .title {
+      font-size: 44px;
+      font-weight: 600;
+      color: #333333;
+    }
+
+    .right {
+
+      .title-more {
+        font-size: 28px;
+        font-weight: 400;
+        line-height: 40px;
+        color: #999999;
+      }
+    }
+  }
+
+  .list-news {
+    box-sizing: border-box;
+    padding: 0 32px;
+
+    .news-wrap {
+      height: 186px;
+      background: #FFFFFF;
+      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+      border-radius: 16px;
+      box-sizing: border-box;
+      padding: 32px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      margin-bottom: 24px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .news-title {
+        font-size: 36px;
+        font-weight: 600;
+        color: #333333;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .news-bottom {
+        display: flex;
+        align-items: center;
+
+        .tag {
+          width: 144px;
+          height: 48px;
+          background: #EEEEEE;
+          border-radius: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 28px;
+          font-weight: 400;
+          color: #999999;
+        }
+
+        .date {
+          font-size: 28px;
+          font-weight: 400;
+          color: #999999;
+          margin-left: 16px;
+        }
+
+        .view {
+          font-size: 28px;
+          font-weight: 400;
+          color: #999999;
+          margin-left: auto;
+          display: flex;
+          align-items: center;
+
+          & > em {
+            color: #4181FF;
+            font-style: normal;
+          }
+        }
+      }
+    }
+  }
+
+  .scroll-wrap {
+    box-sizing: border-box;
+    padding: 0 32px;
+    width: 100%;
+    white-space: nowrap;
+
+    .scroll-card {
+      display: inline-block;
+      width: 400px;
+      height: 332px;
+      background: #FFFFFF;
+      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+      border-radius: 16px;
+      margin-right: 32px;
+      font-size: 0;
+
+      & > image {
+        width: 400px;
+        height: 240px;
+        border-radius: 16px 16px 0 0;
+      }
+
+      .text {
+        height: calc(100% - 240px);
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 0 32px;
+
+        & > span {
+          font-size: 32px;
+          font-weight: 600;
+          color: #333333;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  ::v-deep .AiArea {
+    padding-top: 64px;
+    height: 88px;
+
+    ._img {
+      display: none;
+    }
+
+    .area-name {
+      font-size: 44px;
+      font-weight: 600;
+    }
+  }
+}
+</style>