dvcp_v2_wechat_app/src/mods/AppVillager/AppVillager.vue

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

    <div class="top">
      <div class="tabIndex012" v-if="tabIndex != 3">
        <div class="tags">美丽庭院</div>

        <div class="tags">美丽庭院</div>

        <div class="tags">美丽庭院</div>
      </div>

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

      <div class="indexTab" v-if="tabIndex == 3">
        <div class="tags" v-for="(e, i) in itemList" :key="i" :class="indexTab == 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="status status0" v-if="tabIndex == 3">审核中</div>
            </div>
          </div>

          <div class="tabCurrent0" v-if="tabIndex != 3 || tabCurrent == 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="tabIndex != 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="tabCurrent1" v-if="tabIndex == 3 && tabCurrent == 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="tabIndex == 3 && tabCurrent == 1">
      <div class="addBtn iconfont iconfont-iconfangda" @tap.stop="toAdd()"></div>
    </AiFixedBtn>
  </div>
</template>

<script>
export default {
  name: 'AppVillager',
  appName: '村民圈',
  components: {},
  props: {},
  data() {
    return {
      tabs: [
        {
          name: '本村',
        },
        {
          name: '本镇',
        },
        {
          name: '本县',
        },
        {
          name: '我参与的',
        },
      ],
      tabIndex: 0,
      tabList: [
        {
          name: '我的话题',
        },
        {
          name: '我的评论',
        },
      ],
      tabCurrent: 0,
      data: [{ value: 0, title: '弃捐勿复道，努力加餐饭' }],
      itemList: [
        {
          name: '全部',
          indexTab: 0,
        },
        {
          name: '已通过',
          indexTab: 1,
        },
        {
          name: '未通过',
          indexTab: 2,
        },
        {
          name: '审核中',
          indexTab: 3,
        },
      ],
      indexTab: 0,
    }
  },
  computed: {},
  watch: {},
  onLoad() {},
  onShow() {
    uni.$on('updateList', () => {
      this.getList()
    })
  },
  methods: {
    change(index) {
      // this.data = []
      this.tabIndex = index
      this.current = 1
      // this.getList()
    },

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

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

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

    toAdd() {
      this.$linkTo(`./add`)
    },
  },
}
</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;
      .tags {
        padding: 8px 32px;
        background: #ffffff;
        border-radius: 32px;
        margin-left: 16px;
        border: 1px solid #4181ff;
      }
    }

    .indexTab {
      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;
              }
            }
            .status {
              font-size: 28px;
            }
            .status0 {
              color: #42d784;
            }
            .status1 {
              color: #ff4466;
            }
            .status2 {
              color: #ff883c;
            }
          }
        }

        .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;
                }
              }
            }
          }
        }

        .tabCurrent1 {
          .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%;
      }
    }
  }
}
</style>