warm_man/pages/Line/components/ListPage/index.vue

<template>
  <u-row>
    <u-col>
      <view class="card-container border-box">
        <view class="card-item border-box" v-for="(item,index) in lists">
          <view class="card-main border-box">
            <view class="background-view blue"></view>
            <view class="title-group row">
              <view class="label">提交时间</view>
              <view class="content">{{item.create_time}}</view>
              <view class="status" :class="item.status === 1 ?'blue':'green'">{{ item.status === 1 ?'待办结':'已办结' }}</view>
            </view>
            <view class="main-hr"></view>
            <view class="body-group border-box">
              <view class="body-item row">
                <view class="label">事件类型</view>
                <view class="content">{{item.clue_type}}</view>
              </view>
              <view class="body-item row">
                <view class="label">事件地址</view>
                <view class="content col">
                  <u-text
                      :text="item.address"
                      size="28"
                      color="#020B18"
                      custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; "></u-text>

                </view>
              </view>
              <view class="body-item row">
                <view class="label">文字说明</view>
                <view class="content">{{item.describe}}</view>
              </view>
              <view class="body-item row image" v-if="item.images || item.video">
                <view class="label">图片视频</view>
                <view class="content row">
                    <view class="content-img col-6" v-for="itemImg in item.images" v-if="item.images">
                      <u-image v-show="itemImg" :src="itemImg" :lazy-load="true" width="100%" height="180" mode="widthFix"></u-image>
                    </view>
                    <view class="content-img col-6" v-if="item.video">
                      <u-image v-show="item.video" :src="item.video" :lazy-load="true" width="100%" height="180" mode="widthFix"></u-image>
                    </view>
                </view>
              </view>
            </view>
          </view>
          <view class="card-ext">
            <view class="card-main border-box" v-if="item.handle_time">
              <view class="body-group border-box">
                <view class="body-item row">
                  <view class="label">处理时间</view>
                  <view class="content">{{item.handle_time}}</view>
                </view>
                <view class="body-item row">
                  <view class="label">处理部门</view>
                  <view class="content">{{item.handle_department}}</view>
                </view>
                <view class="body-item row">
                  <view class="label">丰行侠暖新币</view>
                  <view class="content orange">{{ item.coin_number }}币</view>
                </view>
                <view class="body-item row image">
                  <view class="label">图片视频</view>
                  <view class="content">
                    {{item.handle_res}}
                  </view>
<!--                  <view class="content row">-->
<!--                    <view class="content-img col-6">-->
<!--                      <u-image :src="item.video" :lazy-load="true" width="100%" height="180" mode="widthFix"></u-image>-->
<!--                    </view>-->
<!--                    <view class="content-img col-6">-->
<!--                      <u-image :src="item.video" :lazy-load="true" width="100%" height="180" mode="widthFix"></u-image>-->
<!--                    </view>-->
<!--                  </view>-->
                </view>
              </view>
            </view>
          </view>
        </view>
        <u-loadmore :status="status" fontSize="28" marginBottom="50" marginTop="30" @loadmore="getLineList()"/>
      </view>
    </u-col>
  </u-row>
  <u-datetime-picker
      :show="startShow"
      v-model="pages.starttime"
      @cancel="startShow = false"
      @close="startShow = false"
      @confirm="selectStart"
      mode="date"
  ></u-datetime-picker>
  <u-datetime-picker
      :show="endShow"
      v-model="pages.endtime"
      @cancel="endShow = false"
      @close="endShow = false"
      @confirm="selectEnd"
      mode="date"
  ></u-datetime-picker>
  <u-picker :show="typeShow"
            :columns="[columns]"
            keyName="name"
            @close="typeShow = false"
            @cancel="typeShow = false"
            @confirm="selectType"></u-picker>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import api from '@/utils/functions.js';
import MzCard from "@/components/MzCard/index.vue";
import {lineList, lineType} from "@/api/line";
import {userLineList} from "@/api/user";


export default {
  components:{
    MzCard
  },
  name:'lineLists',
  props:{
    isUserList:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      columns:[],
      typeShow:false,
      startShow:false,
      endShow:false,
      status: 'loadmore',
      page:1,
      lists: [],
      title: '暖新人',
      loading: true,
      pages:{
        page:1,
        limit:10,
        clue_type_id:'',
        status:'',
        starttime:'',
        endtime:'',
      }
    }
  },
  onLoad() {

  },
  onReady() {
    let that = this;
    let info = uni.createSelectorQuery().in(this).select('.foot-button');
    info.boundingClientRect(function (data) {
      that.size.height = data.height;
    }).exec(function (res) {});
  },
  methods: {
    //获取线索类型
    getLineType(){
      lineType({}).then((res) => {
        this.columns = res.data;
      })
    },
    checkboxClick(index){
      this.tags[index].checked = !this.tags[index].checked;
    },
    userCouponsPage() {
      wx.navigateTo({
        url: '/pages/UserCoupons/index'
      })
    },
    navTo(url) {
      wx.navigateTo({
        url: url
      })
    },
    updateUserInfo() {

    },
    getLineList(clear = false){
      console.log('getLineList')
      if(clear){
        this.status = 'loadmore'
        this.pages.page = 1;
        this.pages.limit = 10;
        this.lists = [];
      }
      if(this.status === 'nomore'){
        return false;
      }
      this.status = 'loading';
      let data = this.pages;
      data.starttime = uni.$u.timeFormat(data.starttime, 'yyyy-mm-dd 00:00:00')
      data.endtime = uni.$u.timeFormat(data.endtime, 'yyyy-mm-dd 23:59:59')

      if(!this.isUserList){
        lineList(data).then(res => {
          if(res.data.length === 0){
            this.status = 'nomore';
          }else{
            this.status = 'loadmore';
          }
          this.lists = this.lists.concat(res.data);
        });
      }else{
        userLineList(data).then(res => {
          if(res.data.length === 0){
            this.status = 'nomore';
          }else{
            this.status = 'loadmore';
          }
          this.lists = this.lists.concat(res.data);
        });
      }

      this.pages.page++;
    },
    //选择事件类型
    selectType(e){
      this.pages.clue_type_id = e.value[0].id
      this.$emit('typeCheck', e.value[0].name)
      this.typeShow = false;
    },
    //选择开始时间
    selectStart(e){
      this.pages.starttime = e.value;
      this.startShow = false;
      this.endShow = true;
    },
    selectEnd(e){
      this.pages.endtime = e.value;
      this.startShow = false;
      this.endShow = false;
    },
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {
    this.pagePadding = (api.navHeight().navPaddingTop +
        api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },
  mounted() {
    this.getLineType();
    this.getLineList(true);
  },
  updated() {

  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.userInfo = newVal;
        this.updateUserInfo();
      }
    },
    "$store.state.userExtends": {
      handler(newVal, oldVal) {
        this.userExtends = newVal;
        this.updateUserInfo();
      }
    },
    "pages.starttime": {
      handler(newVal, oldVal) {
        this.$emit('startTime', this.pages.starttime)
      }
    },
    "pages.endtime": {
      handler(newVal, oldVal) {
        this.$emit('endTime', this.pages.endtime)
      }
    },
    "pages.clue_type_id": {
      handler(newVal, oldVal) {
        this.getLineList(true)
      }
    },
  }
}
</script>

<style lang="scss">
@import './components/index.scss';
</style>