shortPlay-mini/pages/task/task.vue

<template>
	<c-tabbar :current="3">
		<view class="container p-20">
			<view class="banner">
				<image src="../../static/task/img1.png" mode="widthFix"></image>
			</view>
			<view class="type-change">
				<view class="item flex flex-col justify-center items-center" :class="{active: type == 1}"
					@click="changeType(1)">
					<text class="t1">任务列表</text>
					<text class="t2">解锁更多任务模式</text>
				</view>
				<view class="item flex flex-col justify-center items-center" :class="{active: type == 2}"
					@click="changeType(2)">
					<text class="t1">我的任务</text>
					<text class="t2">管理和跟踪任务</text>
				</view>
			</view>
			
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="tasks flex flex-col">
						<view class="task flex flex-row" v-for="item in list" :key="item.id" @click="navigateTo('/pages/task/info/info?id='+item.id)">
							<view class="flex flex-col">
								<image class="logo" src="../../static/uni.png" mode="aspectFit"></image>
								<text class="red">5.00</text>
								<text class="basis">基础佣金</text>
							</view>
							<view class="flex-1 flex flex-col p-r-20" style="width: 0;">
								<view class="ellipsis">{{item.name}}</view>
								<view class="flex flex-row">
									<view class="tag">抖音</view>
									<view class="tag">CPM</view>
								</view>
								<text class="amount">{{(item.totalBonus/100).toFixed(2)}}</text>
								<text class="amount-txt">总奖金池</text>
							</view>
							<view class="flex flex-col justify-center items-center">
								<text class="status">{{stateArr[item.state]}}</text>
								<view class="c-btn">参与</view>
							</view>
						</view>
						<!-- <view class="task flex flex-row">
							<view class="flex flex-col">
								<image class="logo" src="../../static/uni.png" mode="aspectFit"></image>
								<text class="red">5.00</text>
								<text class="basis">基础佣金</text>
							</view>
							<view class="flex-1 flex flex-col p-r-20" style="width: 0;">
								<view class="ellipsis">【地球行者 香港移民】剪辑发行发哦加废钢</view>
								<view class="flex flex-row">
									<view class="tag">抖音</view>
									<view class="tag">CPM</view>
								</view>
								<text class="amount">1,000.00</text>
								<text class="amount-txt">总奖金池</text>
							</view>
							<view class="flex flex-col justify-center items-center">
								<text class="status">已结束</text>
								<view class="c-btn">参与</view>
							</view>
						</view> -->
					</view>
				</mescroll-body>
			
		</view>
	</c-tabbar>
</template>

<script>
	import CTabbar from '@/components/gTabbar.vue'
	import { getTaskList }  from '@/api/index.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			CTabbar
		},
		data() {
			return {
				type: 1,
				filter: {},
				list: [],
				stateArr: ['未开始', '已开始', '已结束', '已失效', '已完成']
			}
		},
		created() {
			
		},
		methods: {
			changeType(type) {
				this.type = type
			},
			async getList(pageNum) {
				const res = await getTaskList(pageNum, 10, {
					...this.filter
				})
				if(res.success) {
					this.mescroll.endBySize(res.data.list.length, parseInt(res.data.total));
					if (pageNum == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.data.list);
				} else {
					this.mescroll.endErr();
				}
			},
			upCallback(page) {
				this.getList(page.num)
			},
		}
	}
</script>

<style lang="scss">
	.banner{
		image {
			width: 100%;
		}
	}
	
	.type-change {
		display: flex;
		flex-direction: row;
		margin-top: 10upx;
	
		.item {
			width: 325upx;
			padding: 30upx;
			border-radius: 20upx;
			position: relative;
			color: #373737;
			background-color: #fff;
			
			&.active {
				background-color: $uni-theme;
				.t1 {
					color: #fff;
				}
				.t2 {
					color: #a5bbf9;
				}
			}
			
			&:last-child {
				margin-left: 20upx;
			}
	
			.t1 {
				font-size: 35upx;
				font-weight: bold;
			}
	
			.t2 {
				font-size: 25upx;
				color: #7a7a7a;
			}
		}
	}
	
	.tasks {
		padding-top: 20upx;
	}
	.task {
		background-color: #fff;
		padding: 30upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
		.logo {
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
		}
		.red {
			font-size: 45upx;
			font-weight: bold;
			color: #ee2e25;
			margin-top: 20upx;
		}
		.basis {
			color: #bebebe;
			font-size: 28upx;
			padding-top: 3upx;
		}
		.status {
			font-size: 26upx;
			color: #7e7e7e;
		}
		.c-btn {
			background-color: $uni-theme;
			color: #fff;
			border-radius: 50upx;
			padding: 10upx 25upx;
			font-size: 28upx;
			margin-top: 30upx;
		}
		.tag {
			background-color: #f5f5f5;
			color: #7e7e7e;
			font-size: 26upx;
			padding: 8upx 15upx;
			margin: 20upx 0;
			margin-right: 20upx;
			border-radius: 5upx;
		}
		.amount {
			font-size: 45upx;
			font-weight: bold;
			color: #343434;
			padding-top: 5upx;
		}
		.amount-txt {
			color: #bebebe;
			font-size: 28upx;
			padding-top: 5upx;
		}
	}
</style>