ErectionPlatform/pagesHome/pages/taskDetails/serviceContent.vue

<template>
	<view class="server_container">
		<view class="mt20 row flex-c-sb border-none">
			<text class="title">总价</text>
			<text class="info">漆彪</text>
		</view>
		<!-- 安装信息 -->
		<block v-for="item in goodsTypeArr">
			<view class="mt20">
				<PullDownBox ref="serversInfoRef">
					<template #title>
						<view class="server_list_container_header">
							<view class="row flex-c-sb border-none">
								<view class="title">
									{{item.label}}
								</view>

								<!-- 新增 -->
								<view class="flex-c-c" @click.stop="() => handleAdd(item)">
									<view class="mr10">
										<u-icon name="plus-circle" color="#2979ff" size="30"></u-icon>
									</view>

									<view class="specialInfo">
										添加
									</view>
								</view>
							</view>
						</view>
					</template>

					<template #content>
						<view class="server_list_container_info">
							<block v-for="(value, index) in (item.renderList || [])" :key="item.id">

								<view :class="{'info_item': true, 'mt20': index !== 0}">
									<view class="title flex-c-sb">
										<view class="flex-c-c">
											<view class="fwb mr20">
												第 {{ index + 1 }} 组
											</view>

											<view class="button flex-c-c" @click="() => handleEdit(value, item)">
												<u-icon name="edit-pen" color="#d3832a" size="36"></u-icon>

												<view class="ml10">
													编辑
												</view>
											</view>
										</view>

										<view class="flex-c-c">
											<u-icon name="trash" color="#fff" size="36"></u-icon>

											<view class="ml10">
												删除
											</view>
										</view>
									</view>

									<view class="info_item_container pb0">
										<view class="row flex-c-sb">
											<text class="title">商品类型</text>
											<text class="info">{{value.type_name}}</text>
										</view>

										<view class="row flex-c-sb">
											<text class="title">商品类目</text>

											<text class="info">{{ value.commodity_type }}</text>
										</view>

										<view class="row flex-c-sb">
											<text class="title">单位</text>
											<text class="info">{{ value.unit }}</text>
										</view>

										<view class="row flex-c-sb">
											<text class="title">产品名称</text>
											<text class="info">{{ value.product_name }}</text>
										</view>

										<view class="row flex-c-sb">
											<text class="title">数量</text>
											<text class="info">{{ value.number }}</text>
										</view>

										<view class="row flex-c-sb">
											<text class="title">单价</text>
											<text class="info">{{ value.price }}</text>
										</view>

										<view class="row flex-c-sb">
											<text class="title">总价</text>
											<text class="info">{{ value.money }}</text>
										</view>

										<view class="row">
											<view class="title">
												特殊要求
											</view>
											<view class="mt10 info">
												{{ value.remark || '暂无数据' }}
											</view>
										</view>

										<view class="row pb0 border-none">
											<view class="title">
												图片
											</view>
											<view class="mt10 flex flex-wrap">
												<block v-for="item in value.images">
													<view class="mb20 mr20">
														<image :src="item.url" mode=""></image>
													</view>
												</block>
											</view>
										</view>
									</view>
								</view>

							</block>
						</view>
					</template>
				</PullDownBox>

			</view>
		</block>
	</view>
</template>

<script setup lang="ts">
	import { reactive, computed, ref } from 'vue';
	import utils from '@/utils/utils.js';

	import type { PropType } from 'vue';

	const props = defineProps({
		/** 页面路由数据 */
		pageInfo: {
			type: Object as PropType<Object>,
			required: true,
		},
		/** 页面数据 */
		info: {
			type: Object as PropType<Object>,
			required: true,
		},
		/** 商品品类信息 */
		goodsTypeArr: {
			type: Object as PropType<Object>,
			required: true,
		}
	})

	const serversInfoRef = ref()

	const serversInfo = computed(() => {
		const _type = utils.getObjType(props.info)

		if (_type === 'object' && utils.getObjType(props.info.service) === 'array') {

			return props.info.service
		}
		else return []
	})

	/** 商品品类数据 */
	const goodsTypeArr = computed(() => {
		const _type = utils.getObjType(props.goodsTypeArr)

		if (_type === 'object' && utils.getObjType(props.goodsTypeArr.CommodityTypeTree) === 'array') {

			const { CommodityTypeTree } = props.goodsTypeArr as any

			const _arr = []

			const _serverArr = [...serversInfo.value]

			for (let i = 0; i < CommodityTypeTree.length; i++) {
				const item = CommodityTypeTree[i]

				const pushItem = { ...item }

				const filterArr = [..._serverArr]

				for (let i = 0; i < filterArr.length; i++) {
					const value = filterArr[i]

					const { commodity_type_ids } = value

					if (utils.getObjType(commodity_type_ids) !== 'array') continue

					const [firstType, secondType] = commodity_type_ids

					if (firstType === pushItem.value) {
						if (pushItem.children) {
							// 转译商品类型
							for (let i = 0; i < pushItem.children.length; i++) {
								const val = pushItem.children[i]

								if (val.value !== secondType) continue
								value.type_name = val.label
								break
							}
						}

						pushItem.renderList ? pushItem.renderList.push(value) : pushItem.renderList = [value]

						for (let i = 0; i < _serverArr.length; i++) {
							const ite = _serverArr[i]

							// 根据内存地址判断删除的值
							if (ite !== value) continue

							_serverArr.splice(i, 1)
							break
						}
					}
				}

				// 判断是否存在子类信息, 并判断组件是否已渲染
				pushItem.children && serversInfoRef.value && serversInfoRef.value[i] && serversInfoRef.value[i].handleShowPullDown(true)

				_arr.push(pushItem)
			}

			return _arr
		}
		else return []
	})

	/** 新增服务内容 */
	const handleAdd = (item) => {
		console.log('item :>> ', item);
		uni.navigateTo({
			url: '/pagesHome/pages/addInfo/addInfo?type=add&id=' + item.value + '&install_id=' + props.pageInfo.id
		})
	}

	const handleEdit = (value, item) => {
		uni.setStorageSync('taskServersDetails', value)

		uni.navigateTo({
			url: '/pagesHome/pages/addInfo/addInfo?type=edit&id=' + item.value + '&install_id=' + props.pageInfo.id
		})
	}
</script>

<style scoped lang="scss">
	@import url('@/utils/style/common.scss');

	.server_container {
		background-color: #f5f5f6;

		:deep(.Pulldown-title-container) {
			padding: 0;
		}

		:deep(.Pulldown_content) {
			padding: 0;
		}

		:deep(.PullDownBox) {
			border-radius: 0;
		}
	}

	// 头部
	.server_list_container_header {
		background-color: #fff;
		// padding-top: 20upx;
	}


	// 列表信息
	.server_list_container_info {
		background-color: #f5f5f6;
		padding: 20upx;

		.info_item {
			background: #fff;
			border-radius: 20upx;
			overflow: hidden;

			.button {
				padding: 8upx 20upx;
				background-color: #fff;
				border-radius: 6upx;
				font-weight: bold;
				color: var(--subjectColor);
			}

			&>.title {
				padding: 20upx;
				background-color: var(--subjectColor);
				color: #fff;
			}

			.info_item_container {
				padding: 20upx;
			}
		}

		:deep(.uni-input-placeholder) {
			text-align: right;
		}

		:deep(.uni-input-input) {
			text-align: right;
		}

		/* #ifdef MP-WEIXIN */
		input {
			text-align: right;
		}

		/* #endif */
	}

	.row {
		background: #fff;
		padding: 20upx;
		border-bottom: 4upx solid #eee;
		font-size: 0.9rem;

		image {
			width: 160upx;
			height: 160upx;
			border-radius: 10upx;
		}

		&.border-none {
			border: none;
		}

		.title {
			font-weight: bold;
		}

		.info {
			color: #999;
		}

		.specialInfo {
			color: #509fff;
		}

	}

	.pb0 {
		padding-bottom: 0upx !important;
	}
</style>