dvcp_v2_wechat_app/src/mods/AppVillager/AppVillager.vue

<template>
  <div class="Page" v-if="showPage">
    <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" @click="show = true">{{ TopicName }}</div>

        <u-select v-model="show" :list="$dict.getDict('villagerCircleTopic')" value-name="dictValue" label-name="dictName" @confirm="conTopic"></u-select>
      </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 data" :key="index" @click="toDetail(item)">
          <div class="cardTop">
            <img :src="item.avatarUrl || user.avatarUrl" alt="" />

            <div class="rightTop">
              <div class="leftStaus">
                <span class="names">{{ item.createUserName || user.realName }}</span>

                <span class="titless">
                  <span v-if="item.topic" class="topics"> {{ $dict.getLabel('villagerCircleTopic', item.topic) }} |</span>
                  <span> {{ item.createTime }}</span>
                </span>
              </div>

              <div class="statusDele">
                <div class="status status0" :class="item.auditStatus == 0 ? 'status0' : item.auditStatus == 1 ? 'status1' : 'status2'" v-if="tabIndex0 == 3">{{ $dict.getLabel('auditStatus', item.status) }}</div>

                <!-- <div class="statusRight">
                  <div class="dels" @click.stop="toAdd(item)">编辑</div>
                  <div class="dels" @click.stop=";(delShow = true), (deleId = item.id)">删除</div>
                </div> -->

                <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/4.png" alt="" @click.stop=";(delAndEdit = true), (editId = item.id), (deleId = item.id), (statDisabled = item.status)" class="dels" />
              </div>
            </div>
          </div>

          <div class="tabCurrent0" v-if="tabCurrent1 != 1">
            <div class="cardConts">{{ item.content }}</div>

            <div class="cardImg" v-if="item.pictures">
              <img :src="items.url" alt="" v-for="(items, i) in item.pictures" :key="i" @click.stop="previewImage(item.pictures, items.url)" />
            </div>

            <div class="cardBot">
              <div class="icons">
                <u-icon name="map-fill"></u-icon>
                <span>{{ item.gpsDesc }}</span>
              </div>

              <div class="icones" v-if="tabIndex0 != 3">
                <div class="img1">
                  <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/1.png" alt="" class="img11" />
                </div>

                <div class="rightFlex">
                  <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/2.png" alt="" class="img2" />

                  <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/3.png" alt="" class="img3" @click.stop="like(item)" v-if="item.upFlag == 0" />
                  <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/33.png" alt="" class="img3" @click.stop="like(item)" v-if="item.upFlag == 1" />
                </div>
              </div>
            </div>
          </div>

          <div class="tabCurrent11" v-if="tabIndex0 == 3 && tabCurrent1 == 1">
            <div class="cardsConts">{{ item.content }}</div>

            <div class="reply">
              <span class="toReply">回复的话题 ：</span>
              <span class="contens">{{ item.villagerCircleInfo.content }}</span>
            </div>

            <div class="nopass" v-if="item.status == 2">
              <span>未通过理由：</span>
              <span>{{ item.auditOpinion }}</span>
            </div>
          </div>
        </div>
      </div>

      <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
    </div>

    <img class="addBtn" src="https://cdn.cunwuyun.cn/dvcp/AppVillager/icon111.png" alt="" v-if="tabIndex0 == 3 && tabCurrent1 == 1" @click.native="toAdd()" />

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

    <u-mask :show="delAndEdit" @click=";(delAndEdit = false), (statDisabled = '')">
      <div class="warp">
        <div class="rect" @tap.stop="toAdd(0)">编辑</div>
        <div class="rect" @tap.stop=";(delAndEdit = false), (delShow = true)">删除</div>
      </div>
    </u-mask>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'AppVillager',
  appName: '村民圈',
  components: {},
  props: {},
  data() {
    return {
      showPage: false,
      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,
      show: false,
      TopicValue: '0',
      TopicName: '美丽庭院',
      flag: false,
      delAndEdit: false,
      editId: '',
      statDisabled: '',
    }
  },
  computed: { ...mapState(['user']) },
  watch: {},
  onLoad() {
    this.$dict.load('villagerCircleTopic', 'auditStatus').then(() => {
      this.getList()
    })
  },
  onShow() {
    uni.$on('updateList', () => {
      this.getList()
    })
  },
  methods: {
    getList() {
      this.$instance
        .post(this.tabIndex0 == 3 ? '/app/appvillagercircleinfo/list-xcxme' : '/app/appvillagercircleinfo/list-xcx', null, {
          params: {
            size: 6,
            current: this.current,
            topic: this.tabIndex0 != 3 ? this.TopicValue : '',
            status: this.tabIndex0 == 3 && this.indexTab2 == 0 ? '' : this.tabIndex0 == 3 && this.indexTab2 == 1 ? 1 : this.tabIndex0 == 3 && this.indexTab2 == 2 ? 2 : this.tabIndex0 == 3 && this.indexTab2 == 3 ? 0 : '',

            areaId: this.tabIndex0 != 3 ? this.user.areaId : '',
            listType: this.tabIndex0 == 3 && this.tabCurrent1 == 0 ? '0' : this.tabIndex0 == 3 && this.tabCurrent1 == 1 ? '1' : this.tabIndex0 == 0 ? '0' : this.tabIndex0 == 1 ? '1' : this.tabIndex0 == 2 ? '2' : '',
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
          }
        })
        .finally(() => {
          this.showPage = true
        })
    },

    init() {
      this.data = []
      this.current = 1
      this.getList()
    },

    change(index) {
      this.tabIndex0 = index
      this.init()
    },

    changetabIndex(e) {
      this.tabCurrent1 = e
      this.$nextTick(() => {
        this.indexTab2 = 0
        this.init()
      })
    },

    hander(i) {
      this.indexTab2 = i
      this.$nextTick(() => {
        this.init()
      })
    },

    toDetail(item) {
      this.$linkTo(`./detail?id=${item.id}&avatarUrl=${item.avatarUrl ? item.avatarUrl : ''}&tabCurrent1=${this.tabCurrent1}`)
    },

    toAdd(index) {
      if (this.statDisabled == 0 && index == 0) {
        this.delAndEdit = false
        return this.$u.toast('该数据未审核')
      }

      this.delAndEdit = false
      if (index == 0) {
        this.$linkTo(`./add?id=${this.editId}`)
      } else {
        this.$linkTo(`./add`)
      }
    },

    confirmDel() {
      this.$instance
        .post(this.tabIndex0 == 3 && this.tabCurrent1 == 1 ? '/app/appvillagercirclecomment/delete' : '/app/appvillagercircleinfo/delete', null, {
          params: {
            ids: this.deleId,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.deleShow = false
            this.modalShow = false
            this.deleId = ''
            this.statDisabled = ''
            this.$u.toast('删除成功')
            this.init()
          }
        })
        .catch((e) => {
          this.$u.toast(e)
        })
    },

    conTopic(e) {
      this.TopicValue = e[0].value
      this.TopicName = e[0].label
      this.$nextTick(() => {
        this.init()
      })
    },

    previewImage(images, img) {
      uni.previewImage({
        urls: images.map((v) => v.url),
        current: img,
      })
    },

    like(item) {
      if (this.flag) return

      this.flag = true
      this.$instance
        .post(`/app/appvillagercircleinfo/up?id=${item.id}`)
        .then((res) => {
          if (res.code === 0) {
            this.$u.toast(item.upFlag == 0 ? '点赞成功' : '取消点赞成功')
            this.init()
            setTimeout(() => {
              this.flag = false
            }, 600)
          }
        })
        .catch((err) => {
          this.$u.toast(err)
          this.flag = false
        })
    },

    toDel() {},
  },
  onReachBottom() {
    this.current = this.current + 1
    this.getList()
  },
}
</script>

<style scoped lang="scss">
.Page {
  height: 100%;
  background: #fff;
  .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 16px 32px 16px;
    background: #fff;
    border-radius: 32px 32px 0px 0px;
    margin-top: -30px;
    overflow: hidden;

    .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;
                .topics {
                  margin-right: 8px;
                }
              }
            }

            .statusDele {
              display: flex;
              align-items: center;
              .status {
                font-size: 28px;
              }
              .status0 {
                color: #42d784;
              }
              .status1 {
                color: #ff4466;
              }
              .status2 {
                color: #ff883c;
              }
              .statusRight {
                display: flex;
                flex-direction: column;
                align-items: center;
                .dels {
                  position: relative;
                  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-top: 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);
  }

  ::v-deep .u-mask {
    .warp {
      position: absolute;
      top: 251px;
      right: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 45%;
      height: 22%;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
      border-radius: 5%;
      .rect {
        height: 50%;
        width: 100%;
        text-align: center;
        line-height: 4;
        background: #fff;
      }
    }
  }
}
</style>