ChuangHengWx/pagesMy/recommendHistory.vue

<template>
	<view class="default_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='推荐记录'></cus-header>
		<view class="top adfac" @click="show=true">
			<text>{{typeText}}</text>
			<image :src="imgBase+'icon_down.png'"></image>
		</view>
		<view class="list" v-if="list.length">
			<up-list @scrolltolower="scrolltolower" style="height: 100%">
				<up-list-item v-for="(item, index) in list" :key="index">
					<view class="list-item adfacjb">
						<view class="list-item-left adfac">
							<image :src="imgCfg[item.channelType]||defaultImg"></image>
							<view class="name adffc">
								<p>{{item.realName}}</p>
								<text>来源：{{item.channelName||''}}</text>
							</view>
						</view>
						<view class="list-item-right">{{item.createDate||''}}</view>
					</view>
				</up-list-item>
			</up-list>
		</view>
		<view style="height: 100%;" v-else>
			<page-empty text="暂无推荐记录"></page-empty>
		</view>
		<u-picker :itemHeight="88" :immediateChange="true" :show="show" :columns="typeData" title="渠道类型"
			@cancel="show=false" @confirm="confirm" keyName="name"></u-picker>
	</view>
</template>

<script>
	import PageEmpty from '@/components/pageEmpty/index.vue'
	export default {
		components:{ PageEmpty },
		data(){
			return {
				show:false,
				typeText:'全部渠道',
				typeData:[],
				defaultImg:this.$imgBase+'recommend_zf.png',
				imgCfg:{
					'Questionnaire':this.$imgBase+'recommend_wj.png',
					'Forward':this.$imgBase+'recommend_zf.png',
					'scan':this.$imgBase+'recommend_yy1.png',
					'common':this.$imgBase+'recommend_yy2.png'
				},
				queryParams:{
					page:1,
					limit:10,
					channelType:'',
					referrerId:''
				},
				isOver:false,
				list:[]
			}
		},
		async onLoad() {
			this.queryParams.referrerId = uni.getStorageSync('userInfo')&&JSON.parse(uni.getStorageSync('userInfo')).id||'';
			this.getChannelData();
			this.getList();
		},
		methods:{
			getChannelData(){
				this.$api.get('/getListByType/channel_type').then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.typeData = [res.data.map(d=>({name:d.dictLabel,id:d.dictValue}))];
					resolve()
				})
			},
			scrolltolower(){
				if(this.isOver) return
				this.getList();
			},
			initList(){
				this.queryParams.page = 1;
				this.isOver = false;
				this.list = [];
			},
			getList(){
				this.$api.get('/core/register/record/page',this.queryParams).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.list = [...this.list,...res.data.list];
					this.queryParams.page++;
					if(res.data.list.length===0) this.isOver = true;
				})
			},
			confirm(e){
				this.typeText = e.value[0].name;
				this.queryParams.channelType = e.value[0].id;
				this.show = false;
				this.initList();
				this.getList();
			}
		}
	}
</script>

<style scoped lang="scss">
	.default_page{
		background: #F7F7F7;
		padding: 0 24rpx 40rpx;
		box-sizing: border-box;
		
		.top{
			position: fixed;
			left: 0;
			right: 0;
			height: 90rpx;
			background: #FFFFFF;
			padding-left: 38rpx;
			text{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #002846;
				line-height: 30rpx;
			}
			image{
				width: 24rpx;
				height: 24rpx;
				margin-left: 16rpx;
			}
		}
		
		.list{
			padding-top: 110rpx;
			&-item{
				background: #FFFFFF;
				border-radius: 24rpx;
				margin-top: 20rpx;
				padding: 32rpx 24rpx;
				&:first-child{
					margin-top: 0;
				}
				&-left{
					image{
						width: 88rpx;
						height: 88rpx;
					}
					.name{
						margin-left: 20rpx;
						p{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #002846;
							line-height: 32rpx;
						}
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #667E90;
							line-height: 24rpx;
							margin-top: 24rpx;
						}
					}
				}
				&-right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #95A5B1;
					line-height: 24rpx;
				}
			}
		}
	}
</style>