任务详情页面

MingGaoApp/App.vue

@@ -3,7 +3,6 @@
 	export default {
 		globalData: {
 			token: "",
-
 			// 文本消息
 			socketTask: null,
 			// urlData: "wss://www.toreskj.com/api/api_gateway?method=control_center.real_time.im_message",
@@ -37,7 +36,10 @@
 			// App启动
 
 			var that = this
+			
+			// #ifdef APP-PLUS
 			this.wakeLock()
+			// #endif
 			// uni.getStorage({
 			// 	key: 'session_key',
 			// 	success: function(res) {
@@ -228,7 +230,7 @@
 				// 连接断开
 				// 如果希望websocket连接一直保持，在close或者error上绑定重新连接方法。
 				this.globalData.socketTask.onClose((res) => {
-					// console.log(res, '连接关闭');
+					console.warn(res, '连接关闭');
 					clearTimeout(this.globalData.timeoutObj);
 					setTimeout(() => {
 						that.reconnect();
@@ -312,7 +314,7 @@
 			// 手动关闭
 			close() {
 				var that = this
-				// console.log('已经手动关闭了')
+				console.log('已经手动关闭了')
 				that.globalData.socketTask.close()
 				that.globalData.socketTask = null
 				clearTimeout(that.globalData.timeoutObj);

MingGaoApp/components/task-card/task-card.vue

@@ -0,0 +1,280 @@
+<template>
+	<view class="task-card">
+		<view @click="handleClick">
+			<view class="task-card__header">
+				<view class="task-card__title">外来有害杂草监测</view>
+				<view class="task-card__name">处理人：高瑞芳</view>
+			</view>
+			<view class="task-card__content">
+				<view class="content__header">
+					<view class="content__title">2022-12-27 → 2022-12-30</view>
+					<view class="content__tag">已逾期1天</view>
+				</view>
+				<view class="content__desc">
+					惠东海关杂草监测，COPIED_MB_WIDGET
+					惠东海关杂草监测惠东海关杂草监测
+				</view>
+			</view>
+		</view>
+		<view class="task-card__actions" v-if="type==='action'">
+			<view class="actions__list">
+				<view class="actions__item ">
+					<view class="actions__icon">
+						<image src="@/static/image/task/icon/progress.png" mode="aspectFit" class="img"></image>
+					</view>
+					<view class="actions__text">2次</view>
+				</view>
+				<view class="actions__item middle">
+					<view class="actions__icon">
+						<image src="@/static/image/task/icon/tool.png" mode="aspectFit" class="img"></image>
+					</view>
+					<view class="actions__text">154 km</view>
+				</view>
+				<view class="actions__item right">
+					<view class="actions__icon">
+						<image src="@/static/image/task/icon/area.png" mode="aspectFit" class="img"></image>
+					</view>
+					<view class="actions__text">125 ㎡</view>
+				</view>
+			</view>
+			<view class="actions__btns">
+				<view class="actions__btn" @click="handleBtnClick(TASK_ACTION_TYPE.PAUSE)">
+					<view class="actions__btn-icon">
+						<image src="@/static/image/task/icon/pause.svg" mode="aspectFit" class="img"></image>
+					</view>
+					<view class="actions__btn-text">暂停</view>
+				</view>
+				<view class="actions__btn" @click="handleBtnClick(TASK_ACTION_TYPE.CLOCK)">
+					<view class="actions__btn-icon">
+						<image src="@/static/image/task/icon/clockin.svg" mode="aspectFit" class="img"></image>
+					</view>
+					<view class="actions__btn-text">打卡</view>
+				</view>
+				<view class="actions__btn" @click="handleBtnClick(TASK_ACTION_TYPE.FINISHED)">
+					<view class="actions__btn-icon">
+						<image src="@/static/image/task/icon/finished.svg" mode="aspectFit" class="img"></image>
+					</view>
+					<view class="actions__btn-text">完成</view>
+				</view>
+			</view>
+			<view class="actions__tips">（任务轨迹监测中，如需暂停请点击暂停任务…）</view>
+		</view>
+		<view class="task-card__footer" v-else>
+			<view class="task-card__decoration-title">
+				任务派发人：管理员
+			</view>
+			<view class="task-card__decoration-title">
+				任务监督人：张老师
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		TASK_ACTION_TYPE
+	} from '@/util/constants.js';
+
+	export default {
+		props: {
+			type: {
+				type: String,
+				default: 'action'
+			}
+		},
+		data() {
+			return {
+				TASK_ACTION_TYPE
+			}
+		},
+		methods: {
+			handleClick() {
+				this.$emit('click');
+			},
+			handleBtnClick(type) {
+				this.$emit('btntap', type);
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.task-card {
+		background-color: #fff;
+		border-radius: 16rpx;
+		padding: 16rpx;
+
+		&__header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		&__title {
+			flex: 1 1 auto;
+			font-size: 14px;
+			color: #333;
+			line-height: 20px;
+			margin-right: 100rpx;
+			margin-bottom: 10rpx;
+			@include hairline-bottom(rgba(151, 151, 151, 0.09));
+		}
+
+		&__name {
+			flex: 0 0 auto;
+			font-size: 12px;
+			line-height: 20px;
+			color: #1B76FF;
+		}
+
+		&__content {
+			padding: 10rpx 16rpx;
+		}
+
+		.content {
+			&__header {
+				display: flex;
+				align-items: center;
+			}
+
+			&__title {
+				font-size: 12px;
+				line-height: 18px;
+				color: #1B76FF;
+				margin-right: 20rpx;
+			}
+
+			&__tag {
+				padding: 0 12rpx;
+				color: #F33E43;
+				font-size: 12px;
+				line-height: 14px;
+				border-radius: 8rpx;
+				border: 1px solid #F33E43;
+
+			}
+
+			&__desc {
+				padding: 10rpx 0;
+				color: #656565;
+				font-size: 12px;
+				line-height: 18px;
+				margin-bottom: 10rpx;
+				@include line(2);
+			}
+		}
+
+		&__actions {
+			padding: 0 20rpx;
+
+			.actions {
+				&__list {
+					display: flex;
+					align-items: center;
+					padding: 20rpx 0;
+					border-bottom: 1px solid rgba(2, 2, 2, 0.3);
+				}
+
+				&__item {
+					flex: 1 1 auto;
+					height: 50rpx;
+					display: flex;
+					align-items: center;
+					@include hairline-right(rgba(0, 0, 0, 0.3));
+
+					&.middle {
+						justify-content: center;
+					}
+
+					&.right {
+						justify-content: flex-end;
+					}
+
+					&:last-child {
+						@include hairline-right(transparent);
+					}
+				}
+
+				&__icon {
+					width: 32rpx;
+					height: 32rpx;
+					margin-right: 36rpx;
+
+					.img {
+						width: 100%;
+						height: 100%;
+					}
+				}
+
+				&__btns {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 24rpx 0;
+				}
+
+				&__btn {
+					display: flex;
+					align-items: center;
+					padding: 10rpx 20rpx;
+					border-radius: 8rpx;
+					background-color: #F8F8F8;
+
+					&-icon {
+						width: 40rpx;
+						height: 40rpx;
+						overflow: hidden;
+
+						.img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+
+					&-text {
+						min-width: 88rpx;
+						text-align: center;
+						font-size: 12px;
+						line-height: 18px;
+						color: #555555;
+					}
+				}
+
+				&__tips {
+					font-size: 12px;
+					line-height: 14px;
+					color: #1B76FF;
+					margin-bottom: 8rpx;
+				}
+			}
+		}
+
+		&__footer {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 20rpx 16rpx;
+		}
+
+		&__decoration-title {
+			position: relative;
+			padding-left: 24rpx;
+			font-size: 12px;
+			line-height: 18px;
+			height: 36rpx;
+			color: #656565;
+
+			&::before {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 50%;
+				width: 8rpx;
+				height: 30rpx;
+				transform: translateY(-50%);
+				background-color: #1B76FF;
+				border-radius: 8rpx;
+			}
+		}
+	}
+</style>

MingGaoApp/components/task-tabs/task-tabs.vue

@@ -0,0 +1,83 @@
+<template>
+	<view class="task-tabs">
+		<view class="task-tabs__item active">
+			签到记录
+		</view>
+		<view class="task-tabs__item">
+			诱捕器
+		</view>
+		<view class="task-tabs__item">
+			行驶轨迹
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+	.task-tabs {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		&::before {
+			content: '';
+			left: 4rpx;
+			right: 4rpx;
+			bottom: 0;
+			@include hairline-bottom(rgba(151, 151, 151, 0.09));
+			position: absolute;
+		}
+
+		&__item {
+			position: relative;
+			width: 200rpx;
+			height: 60rpx;
+			font-weight: 400;
+			text-align: center;
+			font-size: 14px;
+			line-height: 30px;
+			color: #7489A9;
+			border-radius: 8rpx;
+			background: #F4F7FC;
+
+			&::before {
+				content: '';
+				position: absolute;
+				width: 0;
+				height: 0;
+				left: 50%;
+				bottom: -24rpx;
+				transform: translateX(-50%);
+				border: 12rpx solid transparent;
+			}
+			
+			&::after {
+				content: '';
+				position: absolute;
+				width: 120rpx;
+				height: 4rpx;
+				left: 50%;
+				bottom: -12rpx;
+				transform: translateX(-50%);
+				background-color: transparent;
+			}
+
+			&.active {
+				color: #fff;
+				font-weight: 500;
+				background: #1B76FF;
+				
+				&::before {
+					border-top-color: #1B76FF;
+				}
+				
+				&::after {
+					background-color: #1B76FF;
+				}
+			}
+		}
+	}
+</style>

MingGaoApp/pages.json

@@ -27,7 +27,6 @@
 				"navigationBarTitleText": "",
 				"navigationStyle": "custom"
 			}
-
 		},
 		{
 			"path": "pages/index/index",
@@ -220,6 +219,25 @@
 
 		},
 		{
+			"path": "pages/index/details",
+			"style": {
+				"navigationBarTitleText": "任务详情",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarShadow": {
+					"colorType": "grey"
+				},
+				"titleNView": {
+					"buttons": [{
+						"text": "",
+						"fontSize": "14px",
+						"color": "#409eff"
+					}]
+				}
+			}
+
+		},
+		{
 			"path": "pages/supervise/supetask",
 			"style": {
 				"navigationBarTitleText": "",

MingGaoApp/pages/index/clockDetail.vue

@@ -0,0 +1,9 @@
+<template>
+	<view> </view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+</style>

MingGaoApp/pages/index/components/ClockInRecord.vue

@@ -0,0 +1,86 @@
+<template>
+	<view class="clock-record">
+		<view class="clock-record__action">
+			<u-button type="primary" :plain="true" icon="plus" text="添加签到" size="mini"></u-button>
+		</view>
+		<view class="clock-record__body">
+			<u-steps current="1" direction="column" dot>
+				<u-steps-item title="2022-12-27 12：30">
+					<view slot="desc" class="step-item">
+						<view class="step-item__title">
+							<view class="text">
+								深圳市南山区西丽镇茶光村108号
+							</view>
+							<uni-icons type="location-filled" color="#1B76FF"></uni-icons>
+						</view>
+						<view class="step-item__content">
+							<image src="../../../static/logo.png" mode="aspectFit" class="img"></image>
+							<image src="../../../static/logo.png" mode="aspectFit" class="img"></image>
+							<image src="../../../static/logo.png" mode="aspectFit" class="img"></image>
+						</view>
+						<view class="step-item__tips">
+							任务描述：任务已经完成国防军工客服管家改几个可根据加工
+						</view>
+					</view>
+				</u-steps-item>
+			</u-steps>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+	.clock-record {
+		padding: 24rpx 32rpx;
+
+		&__action {
+			display: inline-block;
+			margin-bottom: 40rpx;
+		}
+		
+		&__body {
+			::v-deep .u-steps-item__content {
+				width: 0;
+			}
+		}
+
+		.step-item {
+			&__title {
+				display: flex;
+				align-items: center;
+				font-size: 12px;
+				line-height: 18px;
+				color: #1B76FF;
+				
+				
+				.text {
+					text-decoration: underline;
+				}
+			}
+
+			&__content {
+				padding: 16rpx 0;
+				display: flex;
+				align-items: center;
+				margin-left: -40rpx;
+				
+				.img {
+					width: 64px;
+					height: 64px;
+					margin-left: 40rpx;
+				}
+			}
+
+			&__tips {
+				padding: 8rpx 16rpx;
+				font-size: 12px;
+				line-height: 18px;
+				color: #1B76FF;
+				background: linear-gradient(270deg, #FFFFFF 0%, #E2EFFF 100%);
+				@include line;
+			}
+		}
+	}
+</style>

MingGaoApp/pages/index/components/Entrapment.vue

@@ -0,0 +1,297 @@
+<template>
+	<view class="entrapment">
+		<view class="entrapment-card">
+			<view class="entrapment-card__header">
+				<view class="entrapment-card__title">诱捕器1</view>
+				<view class="entrapment-card__update">
+					<uni-icons type="loop" color="#1B76FF"></uni-icons>
+					<text class="text">更新</text>
+				</view>
+			</view>
+			<view class="entrapment-card__list">
+				<view class="entrapment-card__item">
+					<view class="entrapment-card__text">1236587781<text class="status">（已填报）</text></view>
+					<view class="entrapment-card__btn">
+						<u-button type="primary" text="填写" size="small" @click="handleEditEntrapmentInfo"></u-button>
+					</view>
+				</view>
+				<view class="entrapment-card__item">
+					<view class="entrapment-card__text">1236587781<text class="status">（已填报）</text></view>
+					<view class="entrapment-card__btn">
+						<u-button type="primary" text="填写" size="small"></u-button>
+					</view>
+				</view>
+				<view class="entrapment-card__item">
+					<view class="entrapment-card__text">1236587781<text class="status">（已填报）</text></view>
+					<view class="entrapment-card__btn">
+						<u-button type="primary" text="填写" size="small"></u-button>
+					</view>
+				</view>
+				<view class="entrapment-card__item">
+					<view class="entrapment-card__text">1236587781<text class="status">（已填报）</text></view>
+					<view class="entrapment-card__btn">
+						<u-button type="primary" text="填写" size="small"></u-button>
+					</view>
+				</view>
+				<view class="entrapment-card__item">
+					<view class="entrapment-card__text">1236587781<text class="status">（已填报）</text></view>
+					<view class="entrapment-card__btn">
+						<u-button type="primary" text="填写" size="small"></u-button>
+					</view>
+				</view>
+				<view class="entrapment-card__item">
+					<view class="entrapment-card__text">1236587781<text class="status">（已填报）</text></view>
+					<view class="entrapment-card__btn">
+						<u-button type="primary" text="填写" size="small"></u-button>
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-popup :show="show" @close="close" @open="open" :closeOnClickOverlay="true">
+			<view class="entrapment-form">
+				<view class="entrapment-form__header">
+					<view class="entrapment-form__card">诱捕器：K2654114</view>
+				</view>
+				<view class="entrapment-form__form">
+					<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
+					<u--form labelPosition="left" :model="entrapmentFormModel" ref="entrapmentForm">
+						<u-form-item label="" prop="userInfo.name" borderBottom ref="item1">
+							<view class="entrapment-form__item">
+								<view class="entrapment-form__label">
+									<image src="@/static/image/task/pest/pest.png" mode="aspectFit" class="icon">
+									</image>
+									<text class="text">有害生物</text>
+									<view class="fill-icon">
+										<uni-icons type="arrowright" size="12" color="#fff"></uni-icons>
+									</view>
+								</view>
+								<!-- <u--input border="none">
+									<template slot="prefix">
+										<image src="../../../static/logo.png" mode="aspectFit" class="icon"></image>
+									</template>
+									<template slot="suffix">
+										<text>头</text>
+									</template>
+								</u--input> -->
+								<view class="entrapment-form__close">
+									<uni-icons type="clear"  ></uni-icons>
+								</view>
+							</view>
+						</u-form-item>
+					</u--form>
+				</view>
+				<view class="entrapment-form__content">
+					<view class="entrapment-form__content__btn">
+						<u-button type="primary" :plain="true" icon="plus" text="增加" size="small"></u-button>
+					</view>
+					<view class="entrapment-form__actions">
+						<view class="entrapment-form__action green">
+							<image src="@/static/image/task/pest/pest-none.png" mode="aspectFit" class="img"></image>
+							<text class="text">无虫</text>
+						</view>
+						<view class="entrapment-form__action pink">
+							<image src="@/static/image/task/pest/bring.png" mode="aspectFit" class="img"></image>
+							<text class="text">带回</text>
+						</view>
+						<view class="entrapment-form__action blue">
+							<image src="@/static/image/task/pest/submit.png" mode="aspectFit" class="img"></image>
+							<text class="text">提交</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				entrapmentFormModel: {
+					pestList: []
+				},
+				rules: {},
+			}
+		},
+		methods: {
+			open() {
+				console.log('open');
+			},
+			close() {
+				this.show = false
+				console.log('close');
+			},
+			handleEditEntrapmentInfo() {
+				this.show = true;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.entrapment {
+		padding: 40rpx 24rpx;
+
+		.entrapment-card {
+			&__header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				font-weight: 500;
+				color: #1B76FF;
+				font-size: 12px;
+				line-height: 18px;
+				margin-bottom: 28rpx;
+			}
+
+			&__update {
+				.text {
+					margin-left: 10rpx;
+				}
+			}
+
+			&__list {
+				margin-bottom: 36rpx;
+			}
+
+			&__item {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 24rpx 0;
+				font-size: 16px;
+				line-height: 22px;
+				color: #333;
+				font-weight: 400;
+
+				@include hairline-bottom(rgba(151, 151, 151, 0.09));
+
+				&:last-child {
+					@include hairline-bottom(transparent);
+				}
+			}
+
+			&__text {
+				.status {
+					color: #1B76FF;
+				}
+			}
+		}
+
+		.entrapment-form {
+			&__header {
+				width: 540rpx;
+				height: 144rpx;
+				border-radius: 70rpx;
+				margin: 0 auto;
+				margin-top: -72rpx;
+				background-image: url(~@/static/image/task/pest/bg.png);
+				background-repeat: no-repeat;
+				background-size: 100% 100%;
+				overflow: hidden;
+			}
+
+			&__card {
+				padding: 0 68rpx;
+				height: 100%;
+				font-size: 14px;
+				line-height: 72px;
+				color: #fff;
+			}
+
+			&__form {
+				margin-top: -30rpx;
+				padding: 76rpx;
+				margin-bottom: 20rpx;
+				border-bottom: 1px solid rgba(2, 2, 2, 0.3);
+			}
+
+			&__item {
+				position: relative;
+				flex: 1;
+				display: flex;
+				align-items: center;
+				padding: 20rpx 24rpx;
+				background: #F8F8F8;
+				margin-bottom: 40rpx;
+
+				.icon {
+					width: 38rpx;
+					height: 38rpx;
+				}
+			}
+
+			&__label {
+				display: flex;
+				align-items: center;
+
+				.icon {
+					width: 50rpx;
+					height: 50rpx;
+				}
+
+				.text {
+					font-size: 12px;
+					line-height: 18px;
+					color: #555555;
+					margin: 0 24rpx;
+				}
+
+				.fill-icon {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					width: 26rpx;
+					height: 26rpx;
+					background-color: #1B76FF;
+					border-radius: 50%;
+					line-height: 26rpx;
+				}
+			}
+
+			&__content {
+				padding: 36rpx 76rpx;
+			}
+
+			&__actions {
+				padding: 140rpx 30rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			}
+
+			&__action {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 50%;
+				background: #4CD964;
+				box-shadow: 0px 1px 9px 0px rgba(169, 169, 169, 0.5);
+
+				.img {
+					width: 40rpx;
+					height: 40rpx;
+				}
+
+				.text {
+					color: #fff;
+					font-size: 12px;
+					line-height: 14px;
+				}
+			}
+			
+			&__close {
+				position: absolute;
+				padding: 20rpx;
+				right: -60rpx;
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+	}
+</style>

MingGaoApp/pages/index/components/Gis.vue

@@ -0,0 +1,9 @@
+<template>
+	<view>轨迹</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+</style>

MingGaoApp/pages/index/details.vue

@@ -0,0 +1,53 @@
+<template>
+	<view class="task-details">
+		<view class="task-details__header">
+			<task-card type="show"></task-card>
+		</view>
+		<view class="task-details__body">
+			<u-sticky>
+				<task-tabs></task-tabs>
+			</u-sticky>
+			<view class="task-details__content">
+				<!-- <ClockInRecordComponent /> -->
+				<EntrapmentComponent />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import ClockInRecordComponent from './components/ClockInRecord.vue';
+	import EntrapmentComponent from './components/Entrapment.vue';
+
+	export default {
+		components: {
+			ClockInRecordComponent,
+			EntrapmentComponent
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.task-details {
+		padding: 24rpx;
+
+		&__header {
+			margin-bottom: 24rpx;
+		}
+
+		&__body {
+			padding: 32rpx 14rpx;
+			background-color: #fff;
+			border-radius: 8rpx;
+		}
+
+		&__content {
+			padding: 10rpx 0;
+		}
+	}
+</style>
+<style>
+	page {
+		background-color: #F7F8FB;
+	}
+</style>

MingGaoApp/pages/index/index.vue

@@ -1,12 +1,32 @@
 <template>
-	<u-tabs :list="list1" @click="click"></u-tabs>
+	<view class="task-page">
+		<u-loading-page loading-text="加载中..." :loading="loading" font-size="16"></u-loading-page>
+		<view class="task__header">
+			<view class="search-form">
+				<u-search placeholder="请输入任务处理人" v-model="searchKey" :showAction="false" @input="search"></u-search>
+			</view>
+			<view class="task__tabs">
+				<view class="task__tab-item" v-for="item in tabList" :key="item.name">
+					{{item.name}}
+				</view>
+				<!-- <view class="task__tab-line"></view> -->
+			</view>
+		</view>
+		<view class="task__body">
+			<task-card @click="handleCardClick" @btntap="handleBtnClick"></task-card>
+		</view>
+	</view>
 </template>
 
 <script>
+	import {TASK_ACTION_TYPE} from '@/util/constants.js';
+	
 	export default {
 		data() {
 			return {
-				list1: [{
+				loading: false,
+				searchKey: '',
+				tabList: [{
 					name: '待处理',
 				}, {
 					name: '处理中',
@@ -35,16 +55,121 @@
 
 		},
 		computed: {
-
+			offsetLeft(){
+				return 
+			}
 		},
 		methods: {
 			click(item) {
 				console.log('item', item);
+			},
+			search() {
+
+			},
+			handleCardClick(){
+				uni.navigateTo({
+					url: "/pages/index/details"
+				})
+			},
+			handleBtnClick(type){
+				switch(type){
+					case TASK_ACTION_TYPE.CLOCK:
+						break;
+				}
 			}
 		}
 	}
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
+	.task-page {
+		// #ifdef APP-PLUS
+		padding: 180rpx 0 24rpx;
+		// #endif
+		// #ifndef APP-PLUS
+		padding: 212rpx 0 24rpx;
+		// #endif
+		
+		.task {
+			&__header {
+				position: fixed;
+				left: 0;
+				right: 0;
+				
+				// #ifdef APP-PLUS
+				top: 24rpx;
+				// #endif
+				// #ifndef APP-PLUS
+				top: 112rpx;
+				// #endif
+				
+				background-color: #fff;
+				box-shadow: 0px 0px 16rpx 0px rgba(153, 153, 153, 0.2);
+				border-radius: 4rpx;
+
+				.search-form {
+					padding: 24rpx;
+				}
+			}
+
+			&__tabs {
+				position: relative;
+				padding: 0 74rpx;
+				display: flex;
+
+				::v-deep .u-tabs__wrapper__nav {
+					justify-content: space-between;
+				}
+			}
+
+			&__tab-item {
+				position: relative;
+				flex: 1 1 0%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				padding: 20rpx;
+				font-size: 28rpx;
+				color: #7489A9;
+				
+				&::before {
+					content: '';
+					position: absolute;
+					bottom: 0;
+					left: 50%;
+					width: 120rpx;
+					height: 4rpx;
+					transform: translateX(-50%);
+					background-color: transparent;
+				}
 
+				&.active {
+					color: #1B76FF;
+					font-weight: 500;
+					
+					&::before {
+						background-color: #1B76FF;
+					}
+				}
+			}
+
+			&__tab-line {
+				position: absolute;
+				bottom: 0;
+				width: 120rpx;
+				height: 4rpx;
+				background-color: #1B76FF;
+				transform: translateX(50rpx);
+			}
+
+			&__body {
+				padding: 40rpx 24rpx;
+			}
+		}
+	}
+</style>
+<style>
+	page {
+		background-color: #F7F8FB;
+	}
 </style>

MingGaoApp/static/image/task/icon/finished.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>完成</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务-处理中" transform="translate(-263.000000, -626.000000)" fill-rule="nonzero">
+            <g id="活动入口" transform="translate(253.000000, 621.000000)">
+                <g id="完成" transform="translate(10.000000, 5.000000)">
+                    <path d="M0,10 C0,13.5726558 1.90598917,16.8739261 5,18.660254 C8.09401075,20.446582 11.9059893,20.446582 15,18.660254 C18.0940108,16.8739261 20,13.5726558 20,10 C20,4.47715247 15.5228475,0 10,0 C4.4771525,0 0,4.47715247 0,10 Z" id="路径" fill="#20B759"></path>
+                    <path d="M8.81696428,13.0714285 L5.02901786,9.28348209 C4.76785713,9.02232136 4.34375,9.02232136 4.08258928,9.28348209 C3.82142855,9.54464281 3.82142855,9.96874993 4.08258928,10.2299106 L7.8705357,14.017857 C8.13169643,14.2790178 8.55580355,14.2790178 8.81696428,14.017857 C9.08035714,13.7589285 9.08035714,13.3348213 8.81696428,13.0714285 L8.81696428,13.0714285 Z" id="路径" fill="#FFFFFF"></path>
+                    <path d="M15.9308036,5.9866071 C15.6696428,5.72544638 15.2455357,5.72544638 14.984375,5.9866071 L8.04017856,12.9330356 C7.77901784,13.1941963 7.77901784,13.6183035 8.04017856,13.8794642 C8.30133929,14.1406249 8.72544641,14.1406249 8.98660714,13.8794642 L15.9308036,6.93526781 C16.1941964,6.67187495 16.1941964,6.24776782 15.9308036,5.9866071 Z" id="路径" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

MingGaoApp/util/constants.js

@@ -0,0 +1,6 @@
+export const TASK_ACTION_TYPE = {
+	START:'START',
+	PAUSE:'PAUSE',
+	CLOCK:'CLOCK',
+	FINISHED:'FINISHED',
+}

MingGaoApp/util/url.js

@@ -1,11 +1,11 @@
 export default {
-	// baseUrl: process.env.NODE_ENV === 'development' ? "http://114.115.147.140:12345" : "https://www.yhswjc.com",
-	// wsUrl:process.env.NODE_ENV === 'development' ? "ws://114.115.147.140:12345" : "wss://www.toreskj.com",
+	baseUrl: process.env.NODE_ENV === 'development' ? "http://114.115.147.140:12345" : "https://www.yhswjc.com",
+	wsUrl:process.env.NODE_ENV === 'development' ? "ws://114.115.147.140:12345" : "wss://www.toreskj.com",
 	// baseUrl:"https://yfznscd.com"
 	// baseUrl:"https://www.toreskj.com"
 	// baseUrl:"https://www.yhswjc.com"
-	baseUrl:"http://192.168.1.52:12345",
-	wsUrl:"ws://192.168.1.52:12345",
+	// baseUrl:"http://192.168.1.52:12345",
+	// wsUrl:"ws://192.168.1.52:12345",
 	// baseUrl:"http://192.168.1.77:12345"
 	// baseUrl:"https://www.toreskj.com"
 }