car-system-app/pages/driver/welfare/task/task.vue

<template>
	<view>
		<view class="navbar-box">
			<!-- #ifdef MP-WEIXIN -->
			<view :style="{height: `${$u.sys().statusBarHeight}px;`}" />
			<!-- #endif -->
			<!-- #ifdef APP -->
			<view :style="`height: ${$u.sys().statusBarHeight}px;`" />
			<!-- #endif -->
			<view class="navbar-bg">
				<view class="navbar-btn" @click="navBackFn()">
					<u-icon name="arrow-left" size="22" />
				</view>
				<view class="mt-1 ml-4">
					<view class="f-48 c000">
						任务中心
					</view>
					<view class="title-sub f-34">
						MISSION CENTER
					</view>
				</view>
			</view>
			<view class="my-integral bg-white" @click="navIntegFn">
				<view class="f-52 c000 ">
					{{integral}}
				</view>
				<view class="flex align-center mt-1 f-34 c111">
					我的积分
					<u-icon name="arrow-right" size="12" />
				</view>
			</view>
		</view>
		<view class="content-list bg-white">
			<view class="tabs-box flex align-center">
				<view class="tab-item" :class="current==1 && 'tab-item-active'" @click="tabChange(1)">每日任务</view>
				<view class="tab-item" :class="current==2 && 'tab-item-active'" @click="tabChange(2)">常规任务</view>
			</view>
			<view class="list" v-show="current">
				<view class="item flex align-center justify-between" v-for="(item,index) in taskList" :key="item.id">
					<view class="flex align-center">
						<image class="image" :src="item.logo" mode=""></image>
						<view class="item-content flex-column justify-center">
							<view class="flex align-center">
								<text class="f-34 black">{{item.name}}</text>
								<image class="integral-icon" :src="item.logo" mode="">
								</image>
								<text class="f-28">+{{item.rewardIntegral}}</text>
							</view>
							<view class="f-28 c999">
								{{item.illustrate}}
							</view>
						</view>
					</view>
					<view class="btn bg-primary white flex align-center justify-center" :class="[item.isFinish?'is-sign':'']" @click="signInFn(item)">
						{{item.isFinish?item.buttonName:item.buttonFinish}}
					</view>
				</view>
			</view>
		</view>
		<u-popup :safeAreaInsetBottom="false" :show="signShow" mode="center" bgColor="rgba(0, 0, 0, .6)"
			:overlay="false">
			<view class="popup-box white flex-column align-center justify-between">
				<text class="f-32">签到成功</text>
				<text>
					<!-- #ifdef APP -->
					<image src="@/static/images/app/mine/integral.png" mode=""></image>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<image :src="`${config.aliyunOssUrl}/static/images/app/mine/integral.png`" mode=""></image>
					<!-- #endif -->
					+10积分
				</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { taskList, sign } from '@/api/welfare/welfare'
	import { getMineInfoAPI } from '@/api/serve/repair'
	export default {
		data() {
			return {
				integral: 0,
				current: 1,
				signShow: false,
				isSign: false,
				config: getApp().globalData.config,
				taskList: []
			};
		},
		onLoad() {
			this.getList()
			this.getUserInfo()
		},
		methods: {
			getList() {
				let form = {category: this.current}
				taskList(form).then(res => {
					this.taskList = res.data
				})
			},
			getUserInfo(){
				getMineInfoAPI().then(res => {
					this.integral = res.data.integral
					uni.setStorageSync('userInfo', res.data)
				})
			},
			tabChange(e) {
				this.current = e
				this.getList()
			},
			signInFn(item) {
				if(!item.isFinish) {
					if(item.taskType == 'sign') {
						sign().then(res => {
							this.getList()
							this.signShow = true
							setTimeout(() => {
								this.signShow = false
								this.isSign = true
								this.getUserInfo()
							}, 3 * 1000)
						})
					} else {
						uni.switchTab({
							url: '/pages/driver/index/index'
						})
					}
				}
			},
			//返回
			navBackFn() {
				uni.navigateBack()
			},
			//积分明细
			navIntegFn() {
				uni.navigateTo({
					url: '/pages/driver/welfare/task/integral'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F5F9;
	}

	.navbar-box {
		.navbar-bg {
			width: 750rpx;
			height: 356rpx;
			// #ifdef MP-WEIXIN
			background-image: url('https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/app/welfare/task-bg.png');
			// #endif
			// #ifdef APP
			background-image: url('@/static/images/app/welfare/task-bg.png');
			// #endif
			background-repeat: no-repeat;
			background-size: cover;

			.navbar-btn {
				margin-left: 32rpx;
				width: 88rpx;
				height: 88rpx;
			}

			.title-sub {
				color: #6B7885;
			}
		}

		.my-integral {
			margin: 0 auto;
			padding: 32rpx;
			width: 702rpx;
			height: 192rpx;
			border-radius: 15rpx;
			transform: translateY(-70rpx);
		}
	}

	.content-list {
		margin: 0 24rpx;
		margin-top: -40rpx;
		padding: 32rpx;
		border-radius: 16rpx;

		.tabs-box {
			.tab-item {
				width: 150rpx;
				margin-right: 24rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #444444;
				line-height: 50rpx;
			}

			.tab-item-active {
				font-size: 36rpx;
				font-weight: 500;
				color: #222222;
				line-height: 50rpx;
			}
		}

		.list {
			padding: 24rpx 0;

			.item {
				padding: 24rpx 0;

				.image {
					width: 112rpx;
					height: 112rpx;
					border-radius: 50%;
				}

				.item-content {
					margin-left: 24rpx;
					width: 394rpx;
					height: 112rpx;
					color: #13AFA8;

					.integral-icon {
						margin-left: 26rpx;
						width: 24rpx;
						height: 24rpx;
					}
				}

				.btn {
					padding: 16rpx 0;
					width: 136rpx;
					line-height: 1;
					border-radius: 32rpx;
				}
			}
		}
	}

	.popup-box {
		padding: 60rpx 0;
		width: 240rpx;
		height: 240rpx;

		// background-color: rgba(0, 0, 0, .6);
		image {
			width: 28rpx;
			height: 28rpx;
			border-radius: 50%;
		}
	}

	.is-sign {
		opacity: 0.2;
	}
</style>