|
|
@@ -0,0 +1,140 @@
|
|
|
+<template>
|
|
|
+ <view class="default_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
|
|
|
+ <cus-header title='我的报告' bgColor="transparent"></cus-header>
|
|
|
+ <image class="top_bg" :src="imgBase+'report_bg.png'" mode="widthFix"></image>
|
|
|
+ <view class="tab adfac">
|
|
|
+ <view class="tab-pre" :class="{'active':tindex===0}" @click="changeTab(0)">我收到的</view>
|
|
|
+ <view class="tab-pre" :class="{'active':tindex===1}" @click="changeTab(1)">我生成的</view>
|
|
|
+ <view class="tab-pre" :class="{'active':tindex===2}" @click="changeTab(2)">我发送的</view>
|
|
|
+ </view>
|
|
|
+ <view class="query adfacjb">
|
|
|
+ <u-icon name="search" size="38rpx" color="#B3BFC8"></u-icon>
|
|
|
+ <view class="query-inp">
|
|
|
+ <u-input v-model="keyword" border="none" fontSize="26rpx" color="#002846" clearable
|
|
|
+ placeholder="请输入团队名称查询" @confirm="getList"></u-input>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box">
|
|
|
+ <template v-if="tindex===0">
|
|
|
+ <receive-list :list="list" @scrolltolower="scrolltolower"></receive-list>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="tindex===1">
|
|
|
+ <generate-list :list="list" @scrolltolower="scrolltolower"></generate-list>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="tindex===2">
|
|
|
+ <send-list :list="list" @scrolltolower="scrolltolower"></send-list>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import ReceiveList from './components/report/receiveList.vue'
|
|
|
+ import GenerateList from './components/report/generateList.vue'
|
|
|
+ import SendList from './components/report/sendList.vue'
|
|
|
+ export default {
|
|
|
+ components:{
|
|
|
+ ReceiveList,
|
|
|
+ GenerateList,
|
|
|
+ SendList
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ tindex:0,
|
|
|
+ keyword:'',
|
|
|
+ list:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ changeTab(index){
|
|
|
+ this.tindex = index;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ getList(){
|
|
|
+ if(this.tindex===0) this.getReceiveList()
|
|
|
+ else if(this.tindex===1) this.getGenerateList()
|
|
|
+ else if(this.tindex===2) this.getSendList()
|
|
|
+ },
|
|
|
+ getReceiveList(){
|
|
|
+ this.list = [{id:1},{id:2},{id:3}];
|
|
|
+ },
|
|
|
+ getGenerateList(){
|
|
|
+ this.list = [{id:1},{id:2},{id:3}];
|
|
|
+ },
|
|
|
+ getSendList(){
|
|
|
+ this.list = [{id:1},{id:2},{id:3}];
|
|
|
+ },
|
|
|
+ scrolltolower(){
|
|
|
+ console.log(this.tindex);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .default_page{
|
|
|
+ padding: 0 24rpx 40rpx;
|
|
|
+ background: #F7F7F7;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .top_bg{
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .query{
|
|
|
+ width: calc(100% - 12rpx);
|
|
|
+ margin: 40rpx 6rpx 0;
|
|
|
+ height: 72rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ padding: 0 36rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ &-inp{
|
|
|
+ width: calc(100% - 55rpx);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box{
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ &-pre{
|
|
|
+ width: 50%;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #002846;
|
|
|
+ line-height: 42rpx;
|
|
|
+ text-align: center;
|
|
|
+ &.active{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 45rpx;
|
|
|
+ position: relative;
|
|
|
+ &::after{
|
|
|
+ content: '';
|
|
|
+ width: 48rpx;
|
|
|
+ height: 6rpx;
|
|
|
+ background: #335368;
|
|
|
+ border-radius: 9rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -24rpx;
|
|
|
+ bottom: -22rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|