clsd/app/components/complete/complete.vue

<template>
	<view v-if="show">
		<u-popup :show="show" round="15" mode="center" :closeable="true" :customStyle="{ width: '90%' }" @close="show = false">
			<view class="popup">
				<u-divider text="确认完成任务" class="mt20 mb0"></u-divider>
				<view class="mbb">
					<view class="bz">1,同意即表示乙方完成了兼职工作，平台将会打款给乙方</view>
					<view class="bz">2,驳回即表示乙方尚未完成兼职工作，继续督促乙方完成</view>
				</view>
				<view class="xy">
					<u-checkbox-group class="checkbox" v-model="item.checked">
						<u-checkbox size="15" shape="circle" label="我已阅读并同意" labelSize="14" name="true"></u-checkbox>
					</u-checkbox-group>
				</view>
				<textarea rows="3" placeholder="请输入驳回原因" v-model="item.rejectMsg" v-if="item.isComplete == 3"></textarea>
				<view class="flex">
					<view class="f">
						<button class="btn" @click="add(2)">确定</button>
					</view>
					<view class="f">
						<button class="btn" @click="add(3)">驳回</button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'complete',
	data() {
		return {
			show: false,
			item: {}
		};
	},
	methods: {
		init(taskId) {
			this.show = true;
			this.item.id = taskId;
		},
		add(isComplete) {
			this.item.isComplete = isComplete;
			this.$forceUpdate();
			let rule = [{ name: 'checked', checkType: 'notnull', errorMsg: '请并勾选我已阅读并同意' }];
			if (isComplete == 3) {
				rule.push({ name: 'rejectMsg', checkType: 'notnull', errorMsg: '请输入驳回原因' });
			}
			if (!this.verify.check(this.item, rule)) {
				uni.showModal({ content: this.verify.error, showCancel: false });
				return false;
			}
			this.http.request({
				url: '/app/deliver/jTaskComplete',
				data: this.item,
				method: 'POST',
				success: (res) => {
					uni.showModal({
						title: '提示',
						content: '操作成功',
						showCancel: false,
						success: (res) => {
							this.$emit('confirm');
							this.show = false;
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.mbb {
	padding: 7px;
	background-color: aliceblue;
	border-radius: 5px;
	.bz {
		font-size: 14px;
		line-height: 21px;
	}
}
.xy {
	overflow: hidden;
	margin-top: 15px;
	margin-bottom: 10px;
}
textarea {
	height: 80px;
	width: 93%;
	padding: 10px;
	margin-top: 10px;
	background-color: #f1f1f1;
	border-radius: 5px;
}
.flex {
	.f {
		padding: 0px 5px 0px 5px;
	}
}
</style>