OfficeApp/subpkg/townTask/townTask.vue

<template>
	<view class="task_page">

		<!-- {{taskInfo}} -->

		<u-skeleton v-if="skeleton" :class="{'loading': skeleton}" :animate="true" title rows="3" rows-width="92%"
			rowsHeight="56">
		</u-skeleton>
		<block v-else>
			<view class="card">
				<view class="c_title">{{`任务名称: ${taskInfo.title||''}`}}</view>
				<view>{{taskInfo.content||''}}</view>
			</view>
			<view class="card" v-if="extend_info&&extend_info.target">
				<view class="c_title">目标数量: {{extend_info.target}}</view>
			</view>
			<view class="card" v-if="extend_info&&extend_info.store_name">
				<view class="c_title">指定商品: </view>
				<view class="store">
					<view class="store_name" v-for="(item, index) in extend_info.store_name" :key="index"
						@click="copyName(item)">
						{{item}}
					</view>
				</view>
			</view>
			<view class="card">
				<view class="c_title">判定条件:</view>
				<view style="white-space: pre-line;">{{remark}}</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		Toast
	} from "../../libs/uniApi";
	import {
		townTaskDetails
	} from "@/api/task.js"
	import {
		dictDataListsTypeValue
	} from "@/api/oaPbulic.js"
	export default {
		data() {
			return {
				taskInfo: {
					id: '',
					title: '',
					content: '',
					extend: {}
				},
				extend_info: null,
				remark: '',
				skeleton: true,
				type_value: 'town_task_type', // 任务类型
			}
		},
		onLoad(options) {
			options.task_id ? this.taskInfo.id = options.task_id : null;
			options.type_value ? this.type_value = options.type_value : null;
			this.initTask();
		},
		onShow() {},
		methods: {
			async initTask() {
				this.skeleton = true;
				let res = await townTaskDetails({
					id: this.taskInfo.id
				});
				if (res.data?.template_info?.extend) {
					if (res.data?.template_info?.extend?.goods_id && typeof res.data?.template_info?.extend
						?.goods_id !== 'object') {
						res.data.template_info.extend.goods_id = res.data?.template_info?.extend?.goods_id.split(',');
						res.data.template_info.extend.store_name = res.data?.template_info?.extend?.store_name.split(
							';') || [];
					}
					this.extend_info = res.data?.template_info?.extend;
				}
				this.taskInfo = res.data;
				let dict = await dictDataListsTypeValue({
					type_value: this.type_value
					// type_value: 'town_task_type_master'
				})
				dict.data.forEach((item) => {
					if (item.id == this.taskInfo.type) {
						this.remark = item.remark;
					}
				})
				this.skeleton = false;
			},
			copyName(str = "", type = "商品名称") {
				if (str) uni.setClipboardData({
					data: str + "",
					success: (e) => {
						Toast(type + '已复制')
					},
					fail: (e) => {
						Toast('复制失败')
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.task_page {
		padding-top: 30rpx;

		.card {
			margin: 0 auto;
			margin-bottom: 28rpx;
			width: 694rpx;
			background-color: #fff;
			border-radius: 26rpx;
			padding: 28rpx;

			.c_title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 20rpx;
			}

			.file {
				display: flex;
				justify-content: left;
				flex-wrap: wrap;

				&_item {
					flex-shrink: 0;
					width: 200rpx;
					height: 200rpx;
					margin: 0 auto;
					margin-bottom: 16rpx;
					border: 2px solid #ccc;
					border-radius: 10rpx;
					overflow: hidden;
					position: relative;

					.image {
						width: 100%;
						height: 100%;
					}

					.del {
						position: absolute;
						height: 40rpx;
						width: 40rpx;
						top: 10rpx;
						right: 10rpx;
					}
				}

				&_btn {
					flex-shrink: 0;
					width: 200rpx;
					height: 200rpx;
					margin: 0 auto;
					margin-bottom: 16rpx;
					border: 2px solid #ccc;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					border-radius: 10rpx;

					image {
						width: 100rpx;
						height: 100rpx;
					}
				}

				&_empty {
					flex-shrink: 0;
					width: 200rpx;
					height: 200rpx;
					margin: 0 auto;
					margin-bottom: 16rpx;
					border: 2px solid transparent;
				}
			}

			.store {
				display: flex;
				flex-wrap: wrap;
				font-size: 26rpx;
				color: #0122c7;
				margin-top: -10rpx;

				&_name {
					flex-shrink: 0;
					padding: 8rpx;
					border: 5rpx solid #0122c7;
					border-radius: 10rpx;
					// background-color: rgba(#0122c7, 0.1);
					// background-color: rgba(#0122c7, 0.1);
					max-width: 80vw;
					margin-right: 10rpx;
					margin-top: 10rpx;
				}
			}
		}

		.loading {
			padding: 28rpx;
		}
	}
</style>