zcb_APP/pages/index/newcomerTasks.vue

<template>
	<view class="content">
		<image class="w h-454" src="/static/image/index/new_task_cover.png"></image>
		<view class="box">
			<view class="box-content">
				<view class="text-32 text-600 text-070202 top_c">
					做任务得奖励
					<image class="under_line" src="/static/image/index/task_text_underline.png"></image>
				</view>
				<view class="item flex jc_between" v-for="(item,index) in list">
					<view class="left_c ">
						<view class="title">
							{{ index+1 }}、{{ item.title }}({{item.current}}/{{item.total}})
						</view>
						<view class="amount">
							现金奖励{{ item.amount }}元
						</view>
					</view>
					<view :class="item.current == item.total? 'disabled_btn btn' : 'btn'"
					@click="goFinish(item)">
						{{  item.current == item.total?'已完成':'去完成' }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{ 
						title:'完成两个悬赏任务',
						amount:'0.5',
						current:2,
						total:2,
					},
					{
						title:'完成3个金额大于3元的悬赏',
						amount:'0.5',
						current:0,
						total:3,
					},
					{
						title:'分享平台',
						amount:'0.1',
						current:0,
						total:3,
					},
					{
						title:'邀请好友',
						amount:'1',
						current:0,
						total:5,
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			goFinish(item){
				if(item.current != item.total){
					//  功能页 、分享
					uni.navigateTo({
						url:'/pages/index/taskDetails'
					})
				}else{
					uni.showToast({
						title:'任务已完成',
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.box{
		padding: 0 32rpx;
		position: absolute;
		margin-top: -94rpx;
		z-index: 2;
		.box-content{
			width: 686rpx;
			background-color: #fff;
			border-radius: 24rpx;
			box-shadow: 0 0 88rpx 0 #00000014;
			padding: 28rpx 32rpx;
			.top_c{
				border-bottom: 1px dashed #afb0b2ff;
				padding-bottom:8rpx;
				.under_line{
					width: 166rpx;
					height: 24rpx;
					margin-top: -4rpx;
					margin-left: 12rpx;
				}
			}
			.item{
				padding: 26rpx 8rpx;
				border-bottom:1rpx solid #eee;
				align-items: center;
				.left_c{
					.title{
						 color: #303030;
						 font-family: "MiSans VF";
						 font-size: 28rpx;
						 font-style: normal;
						 font-weight: 500;
						 line-height: normal;
					}
					.amount{
						 color: #e02e24;
						 font-family: "MiSans VF";
						 font-size: 24rpx;
						 font-style: normal;
						 font-weight: 400;
						 line-height: normal;
						 margin-left: 46rpx;
					}
				}
				.btn{
					width: 116rpx;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
					flex-shrink: 0;
					border-radius: 52rpx;
					background: #FE6505;
					color: #fff;
					font-size: 24rpx;
				}
				.disabled_btn{
					background: #FED0B4;
				}
			}
		}
	}
</style>