sisMobilePhone/components/task/taskCard/taskCard.vue

<template>
	<view>
		<!--导航栏-->
		<view @tap="closeFrame">
			<cu-custom bgColor="bg-gradual-sisBlack" :isBack="true">
				<block slot="backText"><view style="height: 80rpx;line-height: 80rpx;color: silver;">返回</view></block>
				<block slot="content"><view style="color: silver;">任务详情</view></block>
			</cu-custom>
		</view>
		<!-- 导航栏 -->
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == TabCur ? 'text-orange cur' : ''" v-for="(item, index) in nameList" :key="index" @tap="tabSelect" :data-id="index">
					{{ item }}
				</view>
			</view>
		</scroll-view>
		<!-- 任务卡片 -->
		<view v-if="TabCur == 0">
			<view class="cu-card dynamic" >
				<view class="cu-item shadow">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
							<view class="content flex-sub">
								<view>凯尔</view>
								<view class="text-gray text-sm flex justify-between">2019年12月3日</view>
							</view>
						</view>
					</view>
					<view class="text-content">未完成</view>
				</view>
			</view>
			
			<view class="cu-card dynamic" >
				<view class="cu-item shadow">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
							<view class="content flex-sub">
								<view>凯尔</view>
								<view class="text-gray text-sm flex justify-between">2019年12月3日</view>
							</view>
						</view>
					</view>
					<view class="text-content">未完成</view>
				</view>
			</view>
		</view>

		<view v-if="TabCur == 1">
			<view class="cu-card dynamic">
				<view class="cu-item shadow">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
							<view class="content flex-sub">
								<view>凯尔</view>
								<view class="text-gray text-sm flex justify-between">2019年12月3日</view>
							</view>
						</view>
					</view>
					<view class="text-content">已完成</view>
				</view>
			</view>
		</view>

		<view v-if="TabCur == 2">
			<view class="cu-card dynamic" >
				<view class="cu-item shadow">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
							<view class="content flex-sub">
								<view>凯尔</view>
								<view class="text-gray text-sm flex justify-between">2019年12月3日</view>
							</view>
						</view>
					</view>
					<view class="text-content">分配我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			nameList: ['未完成', '已完成', '分配我的'],
			TabCur: 0,
			scrollLeft: 0
		};
	},
	methods: {
		closeFrame: function() {
			this.count = this.count + 1;
			if (this.isFrameShow) {
				this.isFrameShow = false;
				this.sanJiao = 'sanJiaoDown';
			}
		},
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
		}
	}
};
</script>

<style></style>