warm_man/pages/Line/user.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 pad">
    <u-row>
      <u-col :custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:'0 26rpx'}">

        <view class="screen-container row" >
          <u-row :custom-style="{width:'100%',display:'flex'}" :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 class="tabs-group row">
            <view class="col">
              <u-tabs
                  :list="list"
                  u-sticky
                  lineWidth="64"
                  lineHeight="8"
                  :inactiveStyle="{color:'#AFB5BE'}"
                  :activeStyle="{color:'#F47210'}"
                  lineColor="#F47210"
                  :custom-style="{margin:'auto',justifyContent:'center',width:'100%'}"
                  :scrollable="false"
                  @change="tabsChenge"
              ></u-tabs>
            </view>
          </view>


        </view>
      </u-col>
    </u-row>
  </view>
  <ListPage
      ref="lineLists"
      @typeCheck="selectType"
      @startTime="selectStart"
      @endTime="selectEnd"
      :is-user-list="true"
  ></ListPage>
</template>

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

	export default {
		components: {
      SubmitPage,
      ListPage,
		},
		data() {
			return {
        list: [{
          name: '全部事件',
        },{
          name: '待结案',
        },{
          name: '已结案',
        },],
        tabCheck:'submit',
				show: false,
				title: '我的线索',
        typeCheck:'',
        startTime:'',
        endTime:'',
			}
		},
		onLoad() {

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

		},
		created() {

      },
		mounted() {

		},
	}
</script>

<style lang="scss">

  ::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: center;
    .screen-button + .screen-button{
        margin-left:16rpx;
    }
  }
  .tabs-group{
    justify-content: center;
  }
  .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;
    }
    margin-bottom:20rpx;
    &.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>