shuquAi/pages/tusk/tuskDetail/index.vue

<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<view style="color: #fff;">
			<tn-nav-bar backgroundColor="#26B3A0" :bottomShadow="false">任务详情
			</tn-nav-bar>
			<view :style="{ height: tobheight + 'px' }"></view>
		</view>
		<!-- #endif -->

		<view class="detailBox">
			<image class="topImg" :src="detail.cover_image" mode=""></image>
			<view class="money">
				<view class="label" style="color: #666;font-size: 32rpx;">
					佣金:
				</view>
				<view class="num">
					￥{{detail.task_commission }}
				</view>
			</view>
			<view class="title">
				<!-- Chat GPT应用场景学习 -->
				{{detail.name }}
			</view>
			<view class="des" style="color: #999;font-size: 28rpx;">
				<!-- 任务人数：8人/287人 -->
				任务人数：{{detail.success_count }}人/{{ detail.max_count}}人
			</view>
			<view class="content">
				<!-- 此单主要为用户学习caht gpt应用场景学习，主要掌握人工智能对人生活各方面的助力 -->
				{{detail.intro}}
			</view>
			<view class="div">

			</view>
			<view class="sunTitle">
				任务说明
			</view>
			<view class="bImg">
				<u-parse selectable :content="detail.description"></u-parse>
			</view>
			<view class="sunTitle">
				接单须知
			</view>
			<view class="bImg">
				<u-parse selectable :content="detail.receive_notice"></u-parse>
			</view>
		</view>
		<view class="pos">

		</view>
		<view class="kefuAndBtn">
			<view class="iconBox">
				<u-icon @click="jumpToKefu" class="icon" name="server-fill" color="#26B3A0" size="22"></u-icon>
			</view>
			<view class="btn" @click="handleReceiveOrder(detail.id)">
				立即接单
			</view>
		</view>
	</view>
</template>

<script>
	import {
		receiveOrder,
		taskDetail
	} from '@/api/tusk/index.js'
	import {
		myTaskOrder
	} from '@/api/my/index.js'
	export default {
		components: {},
		data() {
			return {
				tobheight: 45,
				detail: {},

				// alreadyReTimes: 0,
				taskOrderList: [],
			};
		},
		computed: {

		},
		watch: {

		},
		async onLoad(o) {
			let res = await taskDetail({
				task_id: o.id
			})
			if (res.code == 0) {
				this.detail = res.data
			}
			console.log('任务详情返回值', res);


			let res1 = await myTaskOrder()
			if (res1.code == 0) {
				this.taskOrderList = res1.data.filter((item, index) => {
					return item.audit_status == 1
				})
				console.log('任务详情----全部任务返回值', res1, this.taskOrderList.length);
			}
		},
		onReady() {

		},
		onShow() {

		},
		onUnload() {

		},
		methods: {
			// jumpToKefu() {
			// 	uni.navigateTo({
			// 		url: '/pages/user/public/kefu'
			// 	})
			// },
			jumpToKefu() {
				window.open('https://work.weixin.qq.com/kfid/kfc807229b723286051')
			},
			async handleReceiveOrder(task_id) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确认接单：' + this.detail.name + "?",
					confirmColor: 'rgb(38, 179, 160)',
					success: async (res) => {
						if (res.confirm) {
							if (_this.detail.is_new) {
								if (_this.taskOrderList.length > 3) {
									uni.showToast({
										title: '接单失败，您已不是新用户',
										icon: 'none'
									})
									return
								}
							}
							if (_this.detail.max_count == _this.detail.success_count) {
								uni.showToast({
									title: '接单失败，允许的最大接单人数是：' + _this.detail.max_count,
									icon: 'none'
								})
								return
							}
							let res = await receiveOrder({
								task_id
							})
							console.log('立即接单返回值', res);
							if (res.code == 0) {
								uni.showToast({
									title: '接单成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/user/work/index'
									})
								}, 1000)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						} else if (res.cancel) {
							return
						}
					}
				});
			}
		}
	};
</script>

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