我的丰收码+居民社群

src/project/fengdu/AppMine/AppMine.vue

@@ -69,12 +69,6 @@ export default {
     listGroup() {
       return [
         [
-          // {
-          //   icon: "https://cdn.cunwuyun.cn/wxmp/mine/wodejiating.png",
-          //   label: "我的家庭",
-          //   path: "./myFamily",
-          //   type: 'idNumber'
-          // },
           {
             icon: "https://cdn.cunwuyun.cn/wxmp/mine/wodejiaxiang.png",
             label: "我的家乡",

src/project/fengdu/AppMine/myHarvestQR.vue

@@ -1,6 +1,25 @@
 <template>
   <div class="AppHarvestQR">
-    
+    <u-navbar :is-back="false" title="我的丰收码" title-color="#000" title-width="300" title-size="32" 
+    :background="backgroundNavbar" :title-bold="true"></u-navbar>
+    <div class="card">
+      <div class="myself">
+        <img class="avatar" src="https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png" alt="">
+        <div class="info">
+          <div class="name">百里守约</div>
+          <div class="area">百地社区</div>
+        </div>
+      </div>
+      <div class="qr">
+        <img src="https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png" alt="">
+      </div>
+
+      <div class="my-qr">我的丰收码</div>
+
+      <div class="pic">
+        <img src="./img-zhuangshi.png" alt="">
+      </div>
+    </div>
   </div>
 </template>
 
@@ -8,20 +27,90 @@
 export default {
   name: "AppHarvestQR",
   appName: '丰收码',
+  customNavigation: true,
   data() {
     return {
-
+      backgroundNavbar: {
+        background: '#FFF'
+      }
     }
   },
   methods: {
 
   },
-  onShow() {},
+  onShow() {
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 .AppHarvestQR {
+  padding: 32px;
+  box-sizing: border-box;
+  .card {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background: #FFF;
+    border-radius: 16px;
 
+    .myself {
+      padding: 72px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      .avatar {
+        width: 108px;
+        height: 108px;
+        border-radius: 16px;
+      }
+      .info {
+        width: calc(100% - 128px);
+        height: 100%;
+        .name {
+          color: #333333;
+          font-size: 34px;
+          font-weight: 500;
+          margin-top: 10px;
+        }
+        .area {
+          color: #999999;
+          font-size: 28px;
+          font-weight: 400;
+          margin-top: 10px;
+        }
+      }
+      
+    }
+
+    .qr {
+      margin: 10% auto 24px;
+      width: 542px;
+      height: 542px;
+      border-radius: 32px;
+      border: 8px solid #f6f5f8;
+      padding: 36px;
+      box-sizing: border-box;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .my-qr {
+      color: #999999;
+      font-size: 32px;
+      font-weight: 400;
+      text-align: center;
+    }
+    .pic {
+      margin-top: 10%;
+      width: 100%;
+      height: 234px;
+      img {
+        width: 100%;
+        height: 234px;
+      }
+    }
+  }
 }
 </style>

src/project/fengdu/AppVillageInfo/AppVillageInfo.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="AppVillageInfo">
+    <div class="village-info">
+      <div class="header-content">
+        <img src="https://cdn.cunwuyun.cn/dvcp/villgroup/group.png" alt="" class="group-img">
+        <div class="group-name">{{ info.areaName || '' }}</div>
+        <p>已有{{ info.peopleNum || 0 }}户居民</p>
+        <img src="https://cdn.cunwuyun.cn/dvcp/villgroup/head.png" alt="" class="banner-img">
+        <div v-if="info.codeUrl" class="qrcode-content">
+          <AiImage :src="info.codeUrl" class="qrcode-img" preview/>
+          <div>长按识别二维码或扫码入群</div>
+        </div>
+        <div v-else class="qrcode-content flex column">
+          <div>本村尚未公开居民群码</div>
+          <div>请联系管理员添加</div>
+        </div>
+      </div>
+      <!-- <div class="user-content">
+        <div class="title">联村政干</div>
+        <div class="item">
+          <img src="https://cdn.cunwuyun.cn/dvcp/villgroup/group.png" alt="" class="user-img">
+          <div class="user-info">
+            <div class="item-line20 flex-b">
+              <div>余国明<span class="item-position">（组长）</span></div>
+              <div class="item-type">在岗</div>
+            </div>
+            <div class="item-line18 flex-b">
+              <div>上街组、建新组、后街组</div>
+              <div>13617896755</div>
+            </div>
+          </div>
+        </div>
+      </div> -->
+    </div>
+  </div>
+</template>
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: "AppVillageInfo",
+  appName: "居民社群",
+  computed: {
+    ...mapState(['user'])
+  },
+  data() {
+    return {
+      info: {}
+    }
+  },
+  onShow() {
+    this.getArea().then(areaId => this.getDetail(areaId))
+  },
+  methods: {
+    getArea() {
+      return this.$instance.post(`/app/appresident/detailForWx`, null, {
+        params: {id: this.user.residentId}
+      }).then(res => {
+        if (res?.data) {
+          return res.data.resident?.currentAreaId || ""
+        }
+      })
+    },
+    getDetail(areaId) {
+      areaId && this.$instance.post(`/app/appeveryvillagecode/queryDetailByAreaId`, null, {
+        params: {areaId}
+      }).then(res => {
+        if (res?.data) {
+          this.info = res.data
+        }
+      })
+    }
+  },
+  onShareAppMessage() {
+    return {
+      title: '居民社群',
+      path: `/mods/AppVillageInfo/AppVillageInfo`
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.AppVillageInfo {
+  width: 100vw;
+  height: auto;
+  padding-top: 30px;
+  background-color: #f3f6f9;
+
+  .village-info {
+    padding-bottom: 48px;
+
+    .header-content {
+      padding: 40px 70px 56px;
+      width: 690px;
+      background: #FFF;
+      border-radius: 16px;
+      margin: 0 0 24px 30px;
+      box-sizing: border-box;
+
+      .group-img {
+        width: 92px;
+        height: 96px;
+        border-radius: 8px;
+        margin-bottom: 22px;
+      }
+
+      .group-name {
+        font-size: 36px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 50px;
+        margin-bottom: 4px;
+      }
+
+      p {
+        font-size: 24px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #999;
+        line-height: 34px;
+        margin-bottom: 38px;
+      }
+
+      .banner-img {
+        width: 100%;
+        height: 110px;
+      }
+
+      .qrcode-content {
+        width: 100%;
+        height: 592px;
+        background: #F6F9FF;
+        border-radius: 12px;
+        border: 2px solid #E6EEFF;
+        padding: 56px 66px;
+        box-sizing: border-box;
+        margin-top: -8px;
+        justify-content: center;
+
+        ::v-deep .qrcode-img {
+          width: 420px;
+          height: 420px;
+          margin-bottom: 24px;
+
+          image {
+            width: 420px;
+            height: 420px;
+          }
+        }
+
+        div {
+          font-size: 26px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 36px;
+          text-align: center;
+        }
+      }
+    }
+
+    .user-content {
+      padding: 16px 30px 64px;
+      width: 690px;
+      background: #FFF;
+      border-radius: 16px;
+      box-sizing: border-box;
+      margin-left: 30px;
+
+      .title {
+        line-height: 80px;
+        padding-left: 10px;
+        color: #333;
+        font-size: 32px;
+        font-weight: 500;
+      }
+
+      .item {
+        width: 100%;
+        padding: 28px 0 30px 0;
+        border-bottom: 2px solid #D8DDE6;
+
+        .user-img {
+          display: inline-block;
+          width: 72px;
+          height: 72px;
+          border-radius: 50%;
+          vertical-align: top;
+        }
+
+        .user-name-bg {
+          display: inline-block;
+          width: 72px;
+          height: 72px;
+          line-height: 72px;
+          text-align: center;
+          border-radius: 50%;
+          background-color: #4E8EEE;
+          color: #fff;
+          font-size: 24px;
+          vertical-align: top;
+        }
+
+        .user-info {
+          display: inline-block;
+          width: calc(100% - 72px);
+          padding-left: 16px;
+          box-sizing: border-box;
+
+          .flex-b {
+            display: flex;
+            justify-content: space-between;
+          }
+
+          .item-line20 {
+            line-height: 40px;
+            font-size: 28px;
+            color: #333;
+            margin-bottom: 8px;
+
+            .item-position {
+              color: #999;
+              font-size: 24px;
+            }
+
+            .item-type {
+              padding: 010px;
+              background: #E8EFFF;
+              color: #2266FF;
+              font-size: 24px;
+            }
+          }
+
+          .item-line18 {
+            line-height: 36px;
+            color: #666;
+            font-size: 26px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>