shuquAi/pages/user/work/index.vue

<template>
	<view class="container">

		<!-- #ifdef H5 -->
		<view style="color: #fff;">
			<tn-nav-bar backgroundColor="#26B3A0" :bottomShadow="false" @rightClick="jumpScoreRed">我的任务
			</tn-nav-bar>
			<view :style="{ height: tobheight+10 + 'px' }"></view>
		</view>
		<!-- #endif -->

		<!-- tab部分 -->
		<swiper class="ct_tab">
			<swiper-item :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index"
				class="ct_item" @click="clickCtTab(index)">
				<text v-text="item.title"></text>
			</swiper-item>
		</swiper>
		<view class="line">

		</view>
		<!-- 内容信息 -->

		<view v-if="tabCur===0" class="itemBox">
			<view class="" v-if="taskOrderList.length!==0">
				<view class="box" v-for="item in taskOrderList" :key="item.id">
					<!-- 已接单  -->
					<!-- <view v-if="item.status == 1" class="tuskitem" @click="goDetail"> -->
					<view v-if="item.status == 1" class="tuskitem" @click="goDetail(item)">
						<view class="title">
							{{ item.status_text }}
						</view>
						<view class="center">
							<image
								:src="!item.task||item.task.cover_image==''?'../../../static/posImg.png': item.task.cover_image"
								mode="">
							</image>
							<view class="right">
								<view class="label">
									{{ item.task_name }}
								</view>
								<view class="des">
									{{ item.task?item.task.intro:"暂无介绍"  }}
								</view>
								<view class="bottom">
									<view class="money">
										<text class="yongjin">佣金：</text>￥{{ item.commission}}
									</view>
									<view class="btn">
										{{ item.task?item.task.task_category.name:'暂无分类' }}
									</view>
								</view>
							</view>
						</view>
						<view style="margin-bottom: 20rpx;">订单号: {{ item.code }}</view>
						<view class="btnB" @click.stop="upLoadTicket(item)">
							上传任务完成凭证
						</view>
					</view>

					<!-- 待审核  -->
					<view v-if="item.status == 2" class="tuskitem" @click="goDetail(item)">
						<view class="title" style="color: orange;">
							{{ item.status_text }}
						</view>
						<view class="center">
							<image
								:src="!item.task||item.task.cover_image==''?'../../../static/posImg.png': item.task.cover_image"
								mode="">
							</image>
							<view class="right">
								<view class="label">
									{{ item.task_name }}
								</view>
								<view class="des">
									{{ item.task?item.task.intro:"暂无介绍"  }}
								</view>
								<view class="bottom">
									<view class="money">
										<text class="yongjin">佣金：</text>￥{{ item.commission}}
									</view>
									<view class="btn">
										{{ item.task?item.task.task_category.name:'暂无分类'  }}
									</view>
								</view>
							</view>
						</view>
						<view style="margin-bottom: 20rpx;">订单号: {{ item.code }}</view>
						<!-- <view class="btnB2"> -->
						<view class="btnB"
							style="background: rgba(255, 255, 255, 0);color: #26b3a0; border: 1rpx solid #26b3a0;"
							@click.stop="viewTicket(item)">
							凭证信息
						</view>
						<!-- <view class="rBtn" @click.stop="viewRes(item)">
								审核信息
							</view> -->
						<!-- </view> -->
					</view>

					<!-- 已审核  -->
					<view v-if="item.status == 3" class="tuskitem" @click="goDetail(item)">
						<view class="title" :style="{color:item.audit_status==1?'green':'red'}">
							{{ item.audit_status==1?item.status_text+':成功':item.status_text+':失败'}}
						</view>
						<view class="center">
							<image
								:src="!item.task||item.task.cover_image==''?'../../../static/posImg.png': item.task.cover_image"
								mode="">
							</image>
							<view class="right">
								<view class="label">
									{{ item.task_name }}
								</view>
								<view class="des">
									{{ item.task?item.task?item.task.intro:"暂无介绍" :"暂无介绍" }}
								</view>
								<view class="bottom">
									<view class="money">
										<text class="yongjin">佣金：</text>￥{{ item.commission}}
									</view>
									<view class="btn">
										{{ item.task?item.task.task_category.name:'暂无分类'  }}
									</view>
								</view>
							</view>
						</view>
						<view style="margin-bottom: 20rpx;">订单号: {{ item.code }}</view>
						<view class="btnB2">
							<view class="lBtn" @click.stop="viewTicket(item)">
								凭证信息
							</view>
							<view class="rBtn" @click.stop="viewRes(item)">
								审核信息
							</view>
						</view>
					</view>

					<view v-if="item.status == 4" class="tuskitem" @click="goDetail(item)">
						<view class="title">
							{{ item.status_text }}
						</view>
						<view class="center">
							<image
								:src="!item.task||item.task.cover_image==''?'../../../static/posImg.png': item.task.cover_image"
								mode="">
							</image>
							<view class="right">
								<view class="label">
									{{ item.task_name }}
								</view>
								<view class="des">
									{{ item.task?item.task.intro:"暂无介绍"  }}
								</view>
								<view class="bottom">
									<view class="money">
										<text class="yongjin">佣金：</text>￥{{ item.commission}}
									</view>
									<view class="btn">
										{{ item.task?item.task.task_category.name:'暂无分类'  }}
									</view>
								</view>
							</view>
						</view>
						<view style="margin-bottom: 20rpx;">订单号: {{ item.code }}</view>
						<view class="btnB3" @click.stop="viewRes(item)">
							审核信息
						</view>
					</view>
				</view>
			</view>
			<empty v-else style="margin-top: 50%;"></empty>
		</view>


		<view v-if="tabCur===1" class="itemBox">
			<!-- 已接单  -->
			<view class="" v-if="receiveTuskList.length!=0">
				<view v-for="(item,index) in receiveTuskList" :key="item.id" class="tuskitem" @click="goDetail(item)">
					<view class="title">
						{{ item.status_text }}
					</view>
					<view class="center">
						<image
							:src="!item.task||item.task.cover_image==''?'../../../static/posImg.png': item.task.cover_image"
							mode="">
						</image>
						<view class="right">
							<view class="label">
								{{ item.task_name }}
							</view>
							<view class="des">
								{{ item.task?item.task.intro:"暂无介绍"  }}
							</view>
							<view class="bottom">
								<view class="money">
									<text class="yongjin">佣金：</text>￥{{ item.commission}}
								</view>
								<view class="btn">
									{{ item.task?item.task.task_category.name:'暂无分类'  }}
								</view>
							</view>
						</view>
					</view>
					<view style="margin-bottom: 20rpx;">订单号: {{ item.code }}</view>
					<view class="btnB" @click.stop="upLoadTicket(item)">
						上传任务完成凭证
					</view>
				</view>
			</view>
			<empty v-else style="margin-top: 50%;"></empty>
		</view>
		<view v-if="tabCur===2" class="itemBox">
			<!-- 待审核  -->
			<view class="" v-if="waitingTuskList.length!=0">
				<view v-for="(item,index) in waitingTuskList" :key="item.id" class="tuskitem" @click="goDetail(item)">
					<view class="title" style="color: orange;">
						{{ item.status_text }}
					</view>
					<view class="center">
						<image
							:src="!item.task||item.task.cover_image==''?'../../../static/posImg.png': item.task.cover_image"
							mode="">
						</image>
						<view class="right">
							<view class="label">
								{{ item.task_name }}
							</view>
							<view class="des">
								{{ item.task?item.task.intro:"暂无介绍"  }}
							</view>
							<view class="bottom">
								<view class="money">
									<text class="yongjin">佣金：</text>
									￥{{ item.commission}}
								</view>
								<view class="btn">
									{{ item.task?item.task.task_category.name:'暂无分类'  }}
								</view>
							</view>
						</view>
					</view>
					<view style="margin-bottom: 20rpx;">订单号: {{ item.code }}</view>
					<view class="btnB"
						style="background: rgba(255, 255, 255, 0);color: #26b3a0; border: 1rpx solid #26b3a0;"
						@click.stop="viewTicket(item)">
						凭证信息
					</view>
				</view>
			</view>
			<empty v-else style="margin-top: 50%;"></empty>
		</view>
		<view v-if="tabCur===3" class="itemBox">
			<!-- 已审核  -->
			<view class="" v-if="alreadyViewTuskList.length!=0">
				<view v-for="(item,index) in alreadyViewTuskList" :key="item.id" class="tuskitem"
					@click="goDetail(item)">
					<view class="title" :style="{color:item.audit_status==1?'green':'red'}">
						{{ item.audit_status==1?item.status_text+':成功':item.status_text+':失败'}}
					</view>
					<view class="center">
						<image
							:src="!item.task||item.task.cover_image==''?'../../../static/posImg.png': item.task.cover_image"
							mode="">
						</image>
						<view class="right">
							<view class="label">
								{{ item.task_name }}
							</view>
							<view class="des">
								{{ item.task?item.task.intro:"暂无介绍"  }}
							</view>
							<view class="bottom">
								<view class="money">
									<text class="yongjin">佣金：</text>￥{{ item.commission}}
								</view>
								<view class="btn">
									{{ item.task?item.task.task_category.name:'暂无分类'  }}
								</view>
							</view>
						</view>
					</view>
					<view style="margin-bottom: 20rpx;">订单号: {{ item.code }}</view>


					<view class="btnB2">
						<view class="lBtn" @click.stop="viewTicket(item)">
							凭证信息
						</view>
						<view class="rBtn" @click.stop="viewRes(item)">
							审核信息
						</view>
					</view>
				</view>
			</view>

			<empty v-else style="margin-top: 50%;"></empty>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		apiurl
	} from '@/common/request/request';
	// import Header from '@/components/header.vue';
	import {
		myTaskOrder
	} from '@/api/my/index.js'

	import empty from '@/components/empty/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				tabCur: 0,
				tabList: [{
						title: '全部',
					}, {
						title: '已接单',
					}, {
						title: '待审核',
					}, {
						title: '已审核',
					},
					// {
					// 	title: '已结束',
					// },
				],
				loginType: 'h5', //app.globalData.loginType
				tobheight: 45,
				platform: this.$platform.get(),
				taskOrderList: [],


				receiveTuskList: [],
				waitingTuskList: [],
				alreadyViewTuskList: [],
				completeTuskList: []
			};
		},
		computed: {
			...mapGetters(['appInfo', 'isLogin', 'userInfo'])
		},
		onLoad() {


		},
		async onShow() {
			let that = this;
			that.userinfo = that.userInfo
			let res = await myTaskOrder()
			if (res.code == 0) {
				// this.taskOrderList = [res.data[0]]
				this.taskOrderList = res.data

				this.receiveTuskList = this.taskOrderList.filter((item, index) => {
					return item.status == 1
				})
				this.waitingTuskList = this.taskOrderList.filter((item, index) => {
					return item.status == 2
				})
				this.alreadyViewTuskList = this.taskOrderList.filter((item, index) => {
					return item.status == 3
				})
				this.completeTuskList = this.taskOrderList.filter((item, index) => {
					return item.status == 4
				})
			}
			console.log('我的任务订单返回值', res);
		},
		methods: {
			viewRes(item) {
				if (item.audit_status == 1) { // 成功
					uni.navigateTo({
						url: '/pages/user/work/viewSuc/index?id=' + item.id
					})
				}
				if (item.audit_status == 2) { // 失败
					uni.navigateTo({
						url: '/pages/user/work/viewErr/index?id=' + item.id
					})
				}

			},
			viewErr() {
				uni.navigateTo({
					url: '/pages/user/work/viewErr/index'
				})
			},
			viewTicket(item) {
				uni.navigateTo({
					url: '/pages/user/work/ticketDetail/index?id=' + item.id
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/user/work/detail/index?id=' + item.id
				})
			},
			upLoadTicket(item) {
				uni.navigateTo({
					url: '/pages/user/work/uploadTicket/index?id=' + item.id
				})
			},
			clickCtTab(ctCur) {
				this.tabCur = ctCur
				console.log('点击了--->' + this.tabCur)
			},

			...mapActions(['logout']),
			/**
			 * 小程序设置
			 */
			Setting: function() {
				uni.openSetting({
					success: function(res) {}
				});
			},
			jumpScoreRed() {
				uni.navigateTo({
					url: '/pages/user/score/record/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>