zcb_APP/pages/index/taskDetails.vue

<template>
	<view class="content">
		<u-navbar
			title="任务详情"
			:autoBack="true"
			bgColor="transparent"
			:placeholder="true"
			:fixed="false"
		>
		</u-navbar>
		<view class="box_title radio-24">
			<view class="flex jc_between ">
				<view class="flex">
					<image class="w-88 h-88 radio-50" src="/static/logo.png" mode=""></image>
					<view class="mgl-24">
						<view class="text-28 line_1 w-360">这是一条悬赏标题</view>
						<view class="text-22 text-7E7E7E mgt-8">任务编号：00003</view>
					</view>
				</view>
				<view class="text-E02E24 text-600 text-32">
					+3.02元
				</view>
			</view>
			<view class="flex title_desc jc_between">
				<view class="title_item">
					<view class="title">5分钟</view>
					<view class="desc">平均审核</view>
				</view>
				<view class="title_item">
					<view class="title">1小时</view>
					<view class="desc">做单限时</view>
				</view>
				<view class="title_item">
					<view class="title">500</view>
					<view class="desc">完成人数</view>
				</view>
				<view class="title_item">
					<view class="title">300</view>
					<view class="desc">剩余名额</view>
				</view>
			</view>
		</view>
		<view class="box_desc radio-24">
			<view class="text-28 text-500 mgb-16">任务描述</view>
			<view class="text-7E7E7E text-24 lh-1_5">这是用户描述，这是用户描述这是用户描述这是用户描述
			这是用户描述这是用户描述这是用户描述
			这是用户描述，这是用户描述这是用户描述这是用户描述
			这是用户描述这是用户描述这是用户描述</view>
		</view>
		<view class="box_step radio-24">
			<view class="text-28 text-500 mgb-16">任务步骤</view>
			<view class="mgb-40" v-for="(item,index) in steps">
				<view class="flex"><view class="step_num mgr-16">{{ index + 1 }}</view>{{ item.title }}</view>
				<image class="w-335 h-192 radio-24 mgt-20" src="/uni_modules/zmm-slider-verify/static/img/Verify.jpg" mode=""></image>
			</view>
		</view>
		<view class="h-200"></view>
		<view class="fixed_bottom fiexd_box pdx-28">
			<view class="w-100">
				<u-icon
				  :label="collectStatus ?'已收藏':'收藏'"
				  size="20"
				  :color="collectStatus? '#FE6505' :'#D9D9D9'"
				  name="star-fill"
				  labelPos="bottom"
				  label-size="12"
				  :label-color="collectStatus? '#FE6505' :'#D9D9D9'"
				  @click="collect"
				></u-icon>
			</view>
			<u-button type="primary"  style="width: 592rpx;border-radius: 64rpx;" 
			 @click="registration" text="我要报名"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collectStatus:true,
				steps:[
					{
						title:'这是任务步骤1这是任务步骤1'
					},
					{
						title:'这是任务步骤2'
					},
					{
						title:'这是任务步骤3'
					},
					{
						title:'这是任务步骤4'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			// 收藏
			collect(){
				// 调用接口
				uni.showToast({
					title: this.collectStatus?'取消收藏':'已收藏'
				})
				this.collectStatus = !this.collectStatus
			},
			// 去报名
			registration(){
				uni.showToast({
					title: '报名成功'
				})
				// uni.navigateTo({
				// 	url:''
				// })
			},
		}
	}
</script>

<style scoped lang="scss">
	.content{
		height: 568rpx;
		padding: 32rpx;
		background: linear-gradient(to bottom, #ffe3d1, #fafafa);
		.box_title{
			background-color: #ffffff;
			width: 100%;
			padding: 36rpx;
			.title_desc{
				margin-top: 48rpx;
				.title_item{
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					justify-content: space-around;
					height: 102rpx;
					width: 172rpx;
					.title{
						 font-size: 32rpx;
					}
					.desc{
						font-size: 24rpx;
						color: #c8c9c6;
					}
				}
				.title_item:not(:last-child)::after{
					content: '';
					position: absolute;
					right: 0rpx;
					top: 34rpx;
					height: 40rpx;
					width: 2rpx;
					background: #eee;
				}
			}
		}
		.box_desc{
			margin-top: 24rpx;
			background-color: #ffffff;
			padding: 32rpx;
		}
		.box_step{
			padding: 32rpx;
			margin-top: 24rpx;
			background-color: #ffffff;
			.step_num{
				min-width: 32rpx;
				max-width: 32rpx;
				min-height: 32rpx;
				max-height: 32rpx;
				padding: 4rpx;
				border-radius: 64rpx;
				background: #FE6505;
				color: #ffffff;
				font-size: 24rpx;
				text-align: center;
			}
		}
	}
</style>