warm_man/pages/Line/index.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="#fff"
  ></u-navbar>
  <view class="screen-body" :class="{pad:(tabCheck === 'lists')}">
    <u-row>
      <u-col :custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:'0 26rpx'}">
        <u-tabs
            :list="list"
            u-sticky
            lineWidth="64"
            lineHeight="8"
            :inactiveStyle="{color:'#AFB5BE'}"
            :activeStyle="{color:'#F47210'}"
            lineColor="#F47210"
            :custom-style="{margin:'auto'}"
            :scrollable="false"
            @change="tabsChange"
        ></u-tabs>
        <view class="screen-container row"  :class="{show:(tabCheck === 'lists')}">
          <u-row :custom-style="{width:'100%',display:(tabCheck === 'lists'?'flex':'none')}" :gutter="20">
            <u-col :span="4">
              <view class="screen-type">
                <view class="screen-type-button row ">
                  <view class="button-text" @click="$refs.lineLists.typeShow = true">
                    <u-text :text="typeCheck?typeCheck:'事件类型'" size="28" color="#020B18" custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;"></u-text>
                  </view>
                  <view class="button-icon">
                    <u-icon name="arrow-down-fill" size="12"></u-icon>
                  </view>
                </view>
              </view>
            </u-col>
            <u-col :span="8">
              <view class="screen-date col-7">
                <view class="screen-date-button row col">
                  <view class="date-text" @click="$refs.lineLists.startShow = true"
                        style="max-width:90%;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;">
                    <view class="date-item">
                      <u-text mode="date" :text="startTime||0" size="28" color="#020B18" custom-style=""></u-text>
                    </view>
                    <view class="date-item">~</view>
                    <view class="date-item">
                      <u-text mode="date" :text="endTime||0" size="28" color=""></u-text>
                    </view>
                  </view>
                  <view class="date-icon">
                    <u-icon name="calendar" size="32"></u-icon>
                  </view>
                </view>
              </view>
            </u-col>
          </u-row>


        </view>
        <view :class="{show:(tabCheck === 'submit')}">
          <SubmitPage v-show="(tabCheck === 'submit')"></SubmitPage>
        </view>
      </u-col>
    </u-row>
  </view>


	<view :class="{show:(tabCheck === 'lists')}">
    <view class="screen-button-body" :style="{display:(tabCheck === 'lists'?'flex':'none')}">
      <u-row :custom-style="{padding:'16rpx 26rpx'}">
        <u-col>
          <view class="screen-button-group row">
            <view class="screen-button" v-for="(item,index) in statusList">
              <u-button
                  :color="(index === status)?'#FF9545':'#ffffff'"

                  :hairline="false"
                  :custom-style="{borderRadius:'10rpx',border:'none',color:(index === status)?'#ffffff':'#020B18'}"
                  :class="{active:(index === status)}"
                  @click="selectStatus(item,index)"
              >{{item.name}}</u-button>
            </view>

          </view>
        </u-col>
      </u-row>
    </view>
    <ListPage
        ref="lineLists"
        v-show="(tabCheck === 'lists')"
        @typeCheck="selectType"
        @startTime="selectStart"
        @endTime="selectEnd"
    ></ListPage>
	</view>

</template>

<script>
  import SubmitPage from "./components/SubmitPage/index.vue";
  import ListPage from "./components/ListPage/index.vue";

	export default {
		components: {
      SubmitPage,
      ListPage,
		},
		data() {
			return {
        statusList:[
          {
            name: '全部事件',
          },{
            name: '待结案',
          },{
            name: '已结案',
          },
        ],
        status:0,
        list: [{
          name: '线索提交',
          id:'submit'
        }, {
          name: '线索列表',
          id:'lists'
        },],
        tabCheck:'submit',
				show: false,
				title: '线索上传',
        startShow:false,
        endShow:false,
        startTime:'',
        endTime:'',
        typeCheck:'',
			}
		},
		onLoad() {

		},
		methods: {
			// store.
      tabsChange(e){
        this.tabCheck = e.id
      },
      selectStatus(item,index){
        this.status = index;
        this.$refs.lineLists.pages.status = index;
        this.$refs.lineLists.getLineList(true);
      },
      selectType(event){
        this.typeCheck = event;
      },
      selectStart(event){
        this.startTime = event;
      },
      selectEnd(event){
        this.endTime = event;
      },
		},
		onPageScroll(res) {

		},
    onReachBottom(){
      if(this.tabCheck === 'lists'){
        this.$refs.lineLists.getLineList();
      }
    },
		created() {

    },
		mounted() {

		},
	}
</script>

<style lang="scss">
::v-deep .u-cell__body{
  padding: {
    top:0 !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
  } ;
}
  ::v-deep .u-tabs__wrapper__nav__line{
    left:24rpx;
  }
  .body-background{
    background:{
      color:#F5F5F6;
    }
  }
  .screen-type-button{
   justify-content: space-between;
    border:2rpx solid #eee;
    align-items: center;
    padding:12rpx 24rpx;
    border-radius: 10rpx;
    .button-text{
      //margin-right:50rpx;
    }
  }
  .screen-date-button{
    justify-content: space-between;
    border:2rpx solid #eee;
    align-items: center;
    padding:12rpx 24rpx;
    border-radius: 10rpx;
    .button-date{
      //margin-right:50rpx;
    }
  }
  .screen-button-group{
    justify-content: flex-start;
    .screen-button + .screen-button{
        margin-left:16rpx;
    }
  }
  .screen-body{
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    transition-delay: .2s;

    -webkit-transition-duration:.2s;
    -webkit-transition-timing-function:ease-in-out;
    -webkit-transition-delay:.2s;
    padding:16rpx 26rpx;
    background:{
      color:transparent;
    }
    &.pad{
      background:{
        color:#fff;
      }
      .screen-container{
        position: relative;
        opacity: 1;
        margin-top:32rpx;
        margin-bottom:16rpx;
      }
    }

  }
  @keyframes show {
    0% {
      display: block;
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .show {
    animation: show .5s;
  }
  .date-text{

    .date-item{
      display: inline-block;
    }
  }
  .button-text{
    max-width:90%
  }
</style>