chelvc-custom/src/pages/tabbar/community/index.vue

<template>
  <view>
    <u-search :showAction="true" actionText="取消"/>
    <!-- tab表格 -->
    <!-- <u-tabs v-if="isAllReply" :list="list" :is-scroll="false" :current="current" @change="change" /> -->
    <u-tabs :list="list" lineWidth="40" lineColor="#5992bb" :is-scroll="false" :current="current" @change="change"
      :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)',
      }"
      :inactiveStyle="{
        color: '#606266',
        transform: 'scale(1)',
      }"
      itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
    />
    <view>
      <view class="album">
        <view class="album__avatar">
          <image src="/static/uview/common/logo.png" style="width: 32px; height: 32px"></image>
        </view>
        <view class="album__content">
          <u--text :text="niackName" bold size="17"></u--text>
          <u--text
            margin="0 0 8px 0"
            style="padding-top: 7px"
            text="全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水"
          >
          </u--text>
          <u-album :urls="urls2"></u-album>
        </view>
      </view>
      <view class="reply-info">
        <view class="reply-left">
          <u-icon name="red-packet" size="30px"></u-icon>
          <u--text :text="followNum" size="22px"></u--text>
        </view>
        <view class="reply-right">
          <u-icon name="thumb-up-fill" size="30px"></u-icon>
          <u-icon name="chat-fill" size="30px" @click="allReply"></u-icon>
          <u-icon name="share-fill" size="30px"></u-icon>
        </view>
      </view>
    </view>
    <view v-if="showAllCom">
      <view class="all-comments">
        <view>
          <u--text size="15px" text="全部评论"> </u--text>
        </view>
        <view class="comment-order">
          <u-subsection fontSize="15px" :list="subsectionList" :current="subsectionListCurrent" @change="changeCom"></u-subsection>
        </view>
      </view>
      <view class="album">
        <view class="album__avatar">
          <image src="/static/logo.png" style="width: 32px; height: 32px"></image>
        </view>
        <view class="album__content">
          <u--text :text="niackName" bold size="17"></u--text>
          <u--text
            margin="0 0 8px 0"
            style="padding-top: 9px"
            text="全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水"
          >
          </u--text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [{ name: '关注' }, { name: '推荐' }],
      current: 0,
      subsectionListCurrent: 0,
      subsectionList: ['最新', '推荐'],
      isAllReply: true,
      showAllCom: false,
      searching: false,
      isSearch: true,
      followNum: 111111,
      urls2: [
        'https://cdn.uviewui.com/uview/album/1.jpg',
        'https://cdn.uviewui.com/uview/album/2.jpg',
        'https://cdn.uviewui.com/uview/album/3.jpg',
        'https://cdn.uviewui.com/uview/album/4.jpg',
        'https://cdn.uviewui.com/uview/album/5.jpg',
        'https://cdn.uviewui.com/uview/album/6.jpg',
        'https://cdn.uviewui.com/uview/album/7.jpg',
        'https://cdn.uviewui.com/uview/album/8.jpg',
        'https://cdn.uviewui.com/uview/album/9.jpg',
        'https://cdn.uviewui.com/uview/album/10.jpg',
      ],
      niackName: '昵称昵称昵称',
      followInfo: '昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称',
      keyword: '123',
      searchCon: '',
      src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
    };
  },
  methods: {
    change(index) {
      this.current = index;
    },
    backTop() {
      this.isAllReply = true;
      this.showAllCom = true;
    },
    searchTop() {
      // this.isSearch = false;
      // this.searching = true;
      uni.navigateTo({
        url: '/client/CommunitySearch/index',
      });
    },
    allReply() {
      uni.navigateTo({
        url: '/client/allComments/index',
      });
    },
    changeCom(index) {
      this.subsectionListCurrent = index;
    },
    getFocus() {},
    cancelSearch() {
      this.isSearch = true;
      this.searching = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.top-nav {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

.nav-left {
  display: flex;
}

.left-text {
  font-size: 15px;
  padding-top: 22%;
  padding-left: 5px;
}

.album {
  display: flex;
}

.album__avatar {
  padding: 5px;
  border-radius: 3px;
}

.album__content {
  margin-left: 10px;
  flex: 1;
}

.reply-info {
  margin-top: 15px;
  margin-left: 15px;
  display: flex;
  justify-content: space-between;
}

.reply-left {
  display: flex;
}

.reply-right {
  display: flex;
}

.all-comments {
  margin: 15px 0 10px 12px;
  display: flex;
  justify-content: space-between;
}

.comment-order {
  width: 100px;
}

.comment-order .u-subsection__item {
  display: flex;
  justify-content: center;
}

.comment-order .u-subsection--button {
  border: 0.2px solid;
  border-radius: 55px;
}
.search-content {
  display: flex;
}
.search-tags {
  display: flex;
  justify-content: space-around;
}
</style>