warm_man/pages/Feed/leave.vue

<template>
  <view class="body-background"></view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#ffffff"
  ></u-navbar>
  <view class="app-wallpaper">
    <mz-sticky type="sticky">
      <view class="leave-tab">

        <u-tabs
            :list="listItem"
            u-sticky
            lineWidth="40"
            lineHeight="4"
            :inactiveStyle="{color:'#AFB5BE'}"
            :activeStyle="{color:'#F47210'}"
            lineColor="#F47210"
            :custom-style="{margin:'auto',width:'100%'}"
            :scrollable="false"
            :current="current"
            @change="tabsChange"
        ></u-tabs>
      </view>
    </mz-sticky>

    <view class="leave-content">
      <view class="leave-item" v-for="item in lists">
        <view class="ask row">
          <view class="icon">
            <u-text text="建议：" size="32" color="#178AF2" line-height="50rpx" custom-style="white-space:nowrap;"></u-text>
          </view>
          <view class="body col">
            <view class="name">
              <u-text line-height="50" :text="item.street + ' ' + item.community" size="32" color="#020b18"></u-text>
            </view>
            <view class="content">
              <u-text line-height="50" :text="item.remark" size="28" color="#020b18"></u-text>
            </view>
            <view class="row" v-if="item.path?.length > 0 &&(typeof item.path === 'object')">
<!--              <u-album multipleSize="170rpx" space="16rpx" :urls="item.path" key-name="url" custom-style="border-radius:8rpx;"></u-album>-->
              <view class="col-4" style="padding:8rpx" v-for="row in item.path">
                <u-image @click="showBigImage(row.url)" radius="8rpx" :src="row.url" width="155rpx" height="155rpx" mode="aspectFill"></u-image>
              </view>
            </view>
          </view>
        </view>
        <view class="answer row" v-if="item.status === 2">
          <view class="row">
            <u-text text="结果答复" size="32" color="#0EAF4E" line-height="50rpx"></u-text>
          </view>
        </view>
        <view class="row" style="padding-bottom:30rpx;">
          <view class="icon">
            <u-text text="占位：" size="32" color="transparent" line-height="50rpx" custom-style="white-space:nowrap;"></u-text>
          </view>
          <view class="body col">
            <view class="content">
<!--              状态：1=未回答,2=已回答-->
              <u-text v-if="item.status === 2" line-height="50" size="28" color="#020b18" :text="item.reply"></u-text>

              <view class="row" v-if="item.status === 2 && item.reply_path?.length > 0">
                <view class="col-4" style="padding:8rpx" v-for="row in item.reply_path">
                  <u-image @click="showBigImage(row.url)" radius="8rpx" :src="row.url" width="155rpx" height="155rpx" mode="aspectFill"></u-image>
                </view>
<!--                <u-album multipleSize="170rpx" space="16rpx" :urls="item.reply_path" key-name="url" custom-style="border-radius:8rpx;"></u-album>-->
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :custom-style="{display:'flex'}" :status="status" fontSize="28"
                marginBottom="30" marginTop="30" @loadmore="getUserLeave()"/>
  </view>
  <u-overlay :show="imageShow" @click="imageShow = false">
    <view class="" style="display:flex;align-items: center;justify-content:center;width:100%;height:100vh;">
      <u-image mode="widthFix" :src="imageUrl" height="auto" width="100vw"></u-image>
    </view>
  </u-overlay>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';
import {goodsOrder, orderLogistics, roomOrder, tabCount} from "@/api/user";
import {userLeave} from "@/api/other";
import {goodsList} from "@/api/shop";
import {feedList} from "../../api/other";

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      imageUrl:'',
      imageShow:false,
      userInfo:{},
      listItem:[
        {name:'全部建议',id:''},
        {name:'已回复',id:2},
        {name:'未回复',id:1},
      ],
      listAdvisor:[
        {name:'我的提问',id:1},
        {name:'提问我的',id:2},
      ],
      tabCheck:'room',
      title: '社区留言板',
      loading: true,
      staticImage: {
        bg: imghost + '/BG.png',
        newIcon: imghost + '/new-icon.png',
        shopThumb: imghost + '/new-1.png',
        ask:imghost+ '/ask.png',
        answer:imghost+ '/answer.png',
      },
      pages:{
        page:1,
        limit:10,
        status:'',
      },
      lists:[],
      status:'loadmore',
      current:0,
    }
  },
  onLoad() {

  },
  onReady() {

  },
  computed: {
    api() {
      return api
    }

  },
  methods: {
    showBigImage(imgUrl) {
      this.imageUrl = imgUrl;
      this.imageShow = true;
    },
    tabsAdvisorChange(e){
      this.pages.user_type = e.id;
      this.getUserLeave(true);
    },
    tabsChange(e){
      this.tabCheck = e.id
      this.pages.status = e.id
      this.getUserLeave(true);
    },
    getUserLeave(clear = false){
      if (clear) {
        this.status = 'loadmore'
        this.pages.page = 1;
        // this.pages.status = '';
        this.lists = [];
      }
      if (this.status === 'nomore') {
        return false;
      }
      feedList(this.pages).then(res => {
        this.lists.push.apply(this.lists, res.data);
        if (res.data.length === 0) {
          this.status = 'nomore'
        }
      })
      this.pages.page++;
    },
  },
  onReachBottom() {
    this.getUserLeave();
  },
  onPageScroll(res) {

  },
  mounted() {
    this.getUserLeave();
    this.userInfo = uni.getStorageSync('user');
  },
  created() {

  }
}
</script>

<style lang="scss">
@import './components/leave.scss';
::v-deep .u-tabs__wrapper__nav__line{
  left:24rpx;
}
</style>