From 05c8b55edab82a0ad9ad983f105d01c31ef6caa4 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Thu, 14 Jul 2022 11:51:59 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=9B=E6=9D=91=E5=85=A5=E5=BA=93,=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=AE=9A=E5=88=B6=E6=96=B9=E6=A1=88=E7=9A=84BUG?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppEnteringVillage/AppEnteringVillage.vue | 663 ++++++++++++++++++
 1 file changed, 663 insertions(+)
 create mode 100644 src/mods/conv/AppEnteringVillage/AppEnteringVillage.vue

diff --git a/src/mods/conv/AppEnteringVillage/AppEnteringVillage.vue b/src/mods/conv/AppEnteringVillage/AppEnteringVillage.vue
new file mode 100644
index 0000000..4ec16d8
--- /dev/null
+++ b/src/mods/conv/AppEnteringVillage/AppEnteringVillage.vue
@@ -0,0 +1,663 @@
+<template>
+  <div class="wrapper">
+    <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('/mods/AppVillagerInfo/AppVillagerInfo?type=0')">
+        <image src="/static/img/bcjj.png"/>
+      </div>
+      <div class="card-item" hover-class="text-hover" @click="$linkTo('/mods/AppVillagerInfo/AppVillagerInfo?type=4')">
+        <image src="/static/img/cgmy.png"/>
+      </div>
+      <div class="card-item" hover-class="text-hover"
+           @click="linkTo('/mods/AppCreditPoints/AppIntegralRanking', 'idNumber')">
+        <image src="/static/img/jfph.png"/>
+      </div>
+      <div class="card-item" hover-class="text-hover"
+           @click="linkTo('/mods/AppVillagerDiscussion/AppVillagerDiscussion', 'idNumber')">
+        <image src="/static/img/cmys.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>
+    <div class="title-wrap" v-if="activityList.length">
+      <span class="title">居民活动</span>
+      <div class="right">
+        <span class="title-more" @click="$linkTo('/mods/AppVillageActivity/AppVillageActivity')">更多活动</span>
+        <u-icon name="arrow-right" size="28" color="#999999"></u-icon>
+      </div>
+    </div>
+    <scroll-view :scroll-x="true" style="width: 100%" class="scroll-wrap" v-if="activityList.length">
+      <div
+          class="scroll-card"
+          @click="$linkTo('/mods/AppVillageActivity/ActivityDetail?id=' + item.id)"
+          hover-class="text-hover"
+          v-for="(item, index) in activityList"
+          :key="index">
+        <image :src="item.url" mode="aspectFill"/>
+        <div class="text">
+          <span>{{ item.title }}</span>
+        </div>
+      </div>
+      <AiEmpty v-if="!activityList.length"></AiEmpty>
+    </scroll-view>
+    <div class="title-wrap">
+      <span class="title">乡村相册</span>
+    </div>
+    <div class="album-list">
+      <div
+          class="album"
+          v-for="(item, index) in albumList"
+          hover-class="text-hover"
+          :key="index"
+          @click="$linkTo('/mods/AppPhotoAlbum/AppPhotoAlbum?type=' + item.type + '&name=' + item.name + '&url=' + item.coverImg)">
+        <image :src="item.coverImg"/>
+        <div class="total">共{{ item.total }}张</div>
+        <div class="desc">{{ item.name }}</div>
+      </div>
+      <AiEmpty style="width: 100%" v-if="!albumList.length"></AiEmpty>
+    </div>
+    <AiLogin ref="login"/>
+  </div>
+</template>
+<script>
+import {mapActions, mapState} from 'vuex'
+
+export default {
+  name: "AppEnteringVillage",
+  appName: "进村",
+  data() {
+    return {
+      isFixed: false,
+      statusBarHeight: 20,
+      top: 0,
+      areaName: '',
+      areaId: '',
+      $areaId: '',
+      albumList: [],
+      activityList: [],
+      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.getAlbumList()
+      this.getActiveList()
+      this.getName()
+    })
+
+    uni.$on('update', () => {
+      this.getAlbumList()
+    })
+  },
+
+  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.getActiveList()
+        this.getAlbumList()
+        this.getPublicList()
+        uni.setStorageSync('areaId', this.areaId)
+        uni.setStorageSync('areaName', this.areaName)
+      })
+    },
+
+    getAlbumList() {
+      this.$instance.post(`/app/appvillagepicturealbum/queryAlbumMenu?areaId=${this.areaId}`).then(res => {
+        if (res.code == 0) {
+          this.albumList = res.data.map(v => {
+            return {
+              ...v,
+              coverImg: `${this.$cdn}/dvcp/album/album${v.type}.png`
+            }
+          })
+        }
+      })
+    },
+
+    getActiveList() {
+      this.$instance.post(`/app/appvillageactivityinfo/listUp`, null, {
+        params: {
+          current: 1,
+          size: 6,
+          areaId: this.areaId
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.activityList = res.data.records.map(v => {
+            return {
+              ...v,
+              url: v.url ? JSON.parse(v.url)[0].url : ''
+            }
+          })
+        }
+      })
+    }
+  },
+
+  onShareAppMessage() {
+    return {
+      title: '欢迎使用数字乡村治理服务一体化平台~',
+      path: `/pages/enteringVillage/enteringVillage`
+    }
+  },
+
+  onPageScroll(params) {
+    this.isFixed = params.scrollTop > 60;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.wrapper {
+  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;
+      }
+    }
+  }
+
+  .album-list {
+    box-sizing: border-box;
+    padding: 0 32px 32px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 16px;
+
+    .album {
+      position: relative;
+      width: 218px;
+      height: 240px;
+      background: #FFFFFF;
+      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+      border-radius: 16px;
+      overflow: hidden;
+
+      image {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+      }
+
+      .total {
+        display: flex;
+        position: absolute;
+        align-items: center;
+        justify-content: center;
+        right: 8px;
+        top: 8px;
+        z-index: 2;
+        width: 74px;
+        height: 40px;
+        background: rgba(0, 0, 0, .6);
+        border-radius: 8px;
+        font-size: 22px;
+        font-weight: 400;
+        color: #FFFFFF;
+      }
+
+      .desc {
+        position: absolute;
+        bottom: 16px;
+        left: 0;
+        z-index: 2;
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        padding: 0 12px;
+        font-size: 32px;
+        text-align: center;
+        color: #FFFFFF;
+        font-weight: 600;
+        box-sizing: border-box;
+      }
+    }
+  }
+
+  ::v-deep .AiArea {
+    padding-top: 64px;
+    height: 88px;
+
+    ._img {
+      display: none;
+    }
+
+    .area-name {
+      font-size: 44px;
+      font-weight: 600;
+    }
+  }
+}
+</style>