dvcp_v2_wechat_app/src/mods/AppVillager/AppVillager.vue

<template>
  <div class="Page">
    <u-tabs class="u-tabs1" :list="tabs" :is-scroll="false" :current="tabIndex0" @change="change" bg-color="#197df0" style="width: 50%" active-color="#FFF;" inactive-color="#FFF"></u-tabs>

    <div class="top">
      <div class="tabIndex012" v-if="tabIndex0 != 3">
        <div class="tags" v-for="(items, i) in $dict.getDict('villagerCircleTopic')" :key="i">{{ items.dictName }}</div>
      </div>

      <u-tabs class="u-tabs2" :list="tabList" :is-scroll="false" :current="tabCurrent1" @change="changetabIndex" bg-color="#fff" active-color="#333;" inactive-color="#999" v-if="tabIndex0 == 3"></u-tabs>

      <div class="indexTab22" v-if="tabIndex0 == 3">
        <div class="tags" v-for="(e, i) in itemList" :key="i" :class="indexTab2 == i ? 'active' : 'noactive'" @click="hander(i)">{{ e.name }}</div>
      </div>
    </div>

    <div class="middle">
      <div class="datas" v-if="data.length">
        <div class="card" v-for="(item, index) in 3" :key="index" @click="toDetail(item)">
          <div class="cardTop">
            <img src="../../static/workOnline/icon3@2x.png" alt="" />

            <div class="rightTop">
              <div class="leftStaus">
                <span class="names">雷洋</span>

                <span class="titless">美丽庭院 | 2020-10-28 12</span>
              </div>

              <!-- :style="{ class: item.auditStatus == 0 ? 'status0' : item.auditStatus == 1 ? 'status1' : 'status2' }"  -->
              <div class="statusDele">
                <div class="status status0" v-if="tabIndex0 == 3">审核中</div>

                <div class="dels" @click.stop="toAdd(item)">编辑</div>
                <div class="dels" @click.stop=";(delShow = true), (deleId = item.id)">删除</div>
                <!-- <img src="../../static/AppVillager/4.png" alt="" @click.stop="delShow = true" class="dels" /> -->
              </div>
            </div>
          </div>

          <div class="tabCurrent0" v-if="tabIndex0 != 3 || tabCurrent1 == 0">
            <div class="cardConts">⾦秋穿上⽑⾐，漫步森林，在阳光下呼吸伸展，⾃在安逸的天⼈。也许是兰天名字的由来吧。</div>

            <div class="cardImg">
              <img src="../../static/workOnline/icon3@2x.png" alt="" v-for="(items, i) in 4" :key="i" />
            </div>

            <div class="cardBot">
              <div class="icons">
                <u-icon name="map-fill"></u-icon>
                <span>东湖生态旅游风景区听涛景区</span>
              </div>

              <div class="icones" v-if="tabIndex0 != 3">
                <div class="img1">
                  <img src="../../static/AppVillager/1.png" alt="" class="img11" />
                </div>

                <div class="rightFlex">
                  <img src="../../static/AppVillager/2.png" alt="" class="img2" />
                  <img src="../../static/AppVillager/3.png" alt="" class="img3" />
                </div>
              </div>
            </div>
          </div>

          <div class="tabCurrent11" v-if="tabIndex0 == 3 && tabCurrent1 == 1">
            <div class="cardsConts">针不戳！</div>

            <div class="reply">
              <span class="toReply">回复的话</span>
              <span class="contens"></span>
            </div>

            <div class="nopass">
              <span>未通过理由：</span>
              <span>请勿带情绪进行评论</span>
            </div>
          </div>
        </div>
      </div>
      <AiEmpty description="暂无数据" class="emptyWrap"></AiEmpty>
    </div>

    <!-- <AiFixedBtn v-if="tabIndex0 == 3 && tabCurrent1 == 1" @click.native="toAdd()">
      <div class="addBtn iconfont iconfont-iconfangda">发起审核</div>
    </AiFixedBtn> -->
    <div class="addBtn" v-if="tabIndex0 == 3 && tabCurrent1 == 1" @click.native="toAdd()">发起审核</div>

    <u-modal v-model="delShow" content="确定删除该数据" :mask-close-able="true" @confirm="confirmDel"></u-modal>
  </div>
</template>

<script>
export default {
  name: 'AppVillager',
  appName: '村民圈',
  components: {},
  props: {},
  data() {
    return {
      tabs: [
        {
          name: '本村',
        },
        {
          name: '本镇',
        },
        {
          name: '本县',
        },
        {
          name: '我参与的',
        },
      ],
      tabIndex0: 0,
      tabList: [
        {
          name: '我的话题',
        },
        {
          name: '我的评论',
        },
      ],
      tabCurrent1: 0,
      data: [{ value: 0, title: '弃捐勿复道，努力加餐饭' }],
      itemList: [
        {
          name: '全部',
          indexTab2: 0,
        },
        {
          name: '已通过',
          indexTab2: 1,
        },
        {
          name: '未通过',
          indexTab2: 2,
        },
        {
          name: '审核中',
          indexTab2: 3,
        },
      ],
      indexTab2: 0,
      delShow: false,
      current: 1,
    }
  },
  computed: {},
  watch: {},
  onLoad() {
    this.$dict.load('villagerCircleTopic').then(() => {
      // this.getList()
    })
  },
  onShow() {
    uni.$on('updateList', () => {
      this.getList()
    })
  },
  methods: {
    getList() {
      this.$instance
        .post('/app/appvillagerintegraldeclare/list', null, {
          params: {
            size: 6,
            current: this.current,
            residentId: this.user.residentId,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
          }
        })
    },

    change(index) {
      // this.data = []
      this.tabIndex0 = index
      this.current = 1
      // this.getList()
    },

    changetabIndex(e) {
      this.tabCurrent1 = e
    },

    hander(i) {
      this.indexTab2 = i
    },

    toDetail(item) {
      this.$linkTo(`./detail?id=${item.id}`)
    },

    toAdd(item) {
      if (item) {
        this.$linkTo(`./add?id=${item.id}`)
      } else {
        this.$linkTo(`./add`)
      }
    },

    confirmDel() {
      this.$instance
        .post(`/app/appvillagercircleinfo/delete?ids=${this.deleId}`)
        .then((res) => {
          if (res?.data) {
            this.deleShow = false
            this.modalShow = false
            this.deleId = ''
            this.getDetail()
          }
        })
        .catch((e) => {
          this.$hideLoading()
          this.$u.toast(e)
        })
    },
  },
  onReachBottom() {
    this.current = this.current + 1
    this.getList()
  },
}
</script>

<style scoped lang="scss">
.Page {
  .active {
    color: #4181ff !important;
    border: 1px solid #4181ff !important;
  }

  .noactive {
    color: #666;
    border: 1px solid #ddd;
  }

  ::v-deep .u-tabs1 {
    .u-tabs {
      padding-top: 32px;
      padding-bottom: 60px;
      padding-right: 300px;
      width: 100%;
      background: #197df0;
    }
  }

  .top {
    padding: 0 0 32px 16px;
    background: #fff;
    border-radius: 32px 32px 0px 0px;
    margin-top: -30px;
    .tabIndex012 {
      padding-top: 32px;
      display: flex;
      flex-wrap: wrap;
      .tags {
        padding: 8px 32px;
        background: #ffffff;
        border-radius: 32px;
        margin-left: 16px;
        border: 1px solid #4181ff;
      }
      .tags:nth-child(n + 4) {
        margin-top: 10px;
      }
    }

    .indexTab22 {
      padding-top: 32px;
      display: flex;
      .tags {
        padding: 8px 32px;
        background: #ffffff;
        border-radius: 32px;
        margin-left: 16px;
        border: 1px solid #ddd;
      }
    }

    ::v-deep .u-tabs2 {
      .u-tabs {
        padding: 0 !important;
      }
    }
  }

  .middle {
    padding: 0 32px;
    background: #fff;
    .datas {
      .card {
        padding: 32px 0 48px 0;
        box-shadow: inset 0px -1px 0px 0px #dddddd;
        .cardTop {
          display: flex;
          img {
            width: 96px;
            height: 96px;
            border-radius: 50%;
          }
          .rightTop {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            .leftStaus {
              display: flex;
              flex-direction: column;
              margin-left: 16px;
              .names {
                font-size: 32px;
                font-weight: 500;
              }
              .titless {
                font-size: 26px;
                color: #6e727a;
                margin-top: 6px;
              }
            }

            .statusDele {
              display: flex;
              align-items: center;
              .status {
                font-size: 28px;
              }
              .status0 {
                color: #42d784;
              }
              .status1 {
                color: #ff4466;
              }
              .status2 {
                color: #ff883c;
              }
              .dels {
                margin-left: 20px;
                width: 68px;
                height: 68px;
              }
            }
          }
        }

        .tabCurrent0 {
          .cardConts {
            margin-top: 24px;
            font-size: 32px;
          }

          .cardImg {
            margin-top: 24px;
            img {
              width: 226px;
              height: 226px;
              margin-right: 4px;
            }
            img:nth-child(3n + 0) {
              margin-right: 0;
            }
          }

          .cardBot {
            margin-top: 24px;
            .icons {
              padding: 8px 32px 8px 16px;
              background: #eff1f3;
              border-radius: 28px;
            }
            .icones {
              display: flex;
              justify-content: space-between;
              margin-top: 24px;
              .img1 {
                width: 60%;
                .img11 {
                  width: 48px;
                  height: 48px;
                }
              }
              .rightFlex {
                display: flex;
                justify-content: space-between;
                width: 27%;
                .img2,
                .img3 {
                  width: 48px;
                  height: 48px;
                }
              }
            }
          }
        }

        .tabCurrent11 {
          .cardsConts {
            margin-top: 24px;
            font-size: 32px;
          }

          .reply {
            padding: 24px;
            background: #f3f6f9;
            border-radius: 16px;
            margin: 24px;
            .toReply {
              font-size: 26px;
              color: #999999;
            }
            .contens {
              color: #333;
            }
          }

          .nopass {
            padding: 24px;
            margin-top: 24px;
            background: #fff5f7;
            border-radius: 16px;
            font-size: 26px;
            color: #ff4466;
          }
        }
      }
    }
  }

  .AiFixedBtn {
    .movableArea {
      .addBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 96px;
        height: 96px;
        flex-shrink: 0;
        background: #fff;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        font-size: 28px;
        color: #1365dd;
        border-radius: 50%;
      }
    }
  }

  .addBtn {
    position: fixed;
    right: 5%;
    bottom: 15%;
    width: 96px;
    height: 96px;
    line-height: 96px;
    text-align: center;
    font-size: 24px;
    color: #1365dd;
    border-radius: 50%;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  }
}
</style>