ChuangHengWx/pagesMy/recommendHistory.vue

<template>
	<view class="default_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='推荐记录'></cus-header>
		<div class="top adfac" @click="show=true">
			<text>{{typeText}}</text>
			<image :src="imgBase+'icon_down.png'"></image>
		</div>
		<div class="list">
			<div class="list-item adfacjb" v-for="(item,index) in list" :key="index">
				<div class="list-item-left adfac">
					<image :src="imgCfg[item.type]"></image>
					<div class="name adffc">
						<p>{{item.name}}</p>
						<text>来源：{{typeCfg[item.type]}}</text>
					</div>
				</div>
				<div class="list-item-right">{{item.datetime}}</div>
			</div>
		</div>
		<u-picker :itemHeight="88" :immediateChange="true" :show="show" :columns="typeData" title="渠道类型"
			@cancel="show=false" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				show:false,
				typeText:'全部渠道',
				typeData:[['全部渠道','问卷任务','推荐转发','创衡运营邀请渠道1','创衡运营邀请渠道2']],
				imgCfg:{
					1:this.$imgBase+'recommend_wj.png',
					2:this.$imgBase+'recommend_zf.png',
					3:this.$imgBase+'recommend_yy1.png',
					4:this.$imgBase+'recommend_yy2.png'
				},
				typeCfg:{
					1:'问卷任务',
					2:'推荐转发',
					3:'创衡运营邀请渠道1',
					4:'创衡运营邀请渠道2'
				},
				list:[
					{name:'李依然',type:1,datetime:'2025-10-10 06:00'},
					{name:'张三',type:2,datetime:'2025-10-10 06:00'},
					{name:'李四',type:3,datetime:'2025-10-10 06:00'},
					{name:'龙傲天',type:4,datetime:'2025-10-10 06:00'},
				]
			}
		},
		methods:{
			confirm(e){
				this.typeText = e.value[0];
				this.show = false;
			}
		}
	}
</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>