ErectionPlatform/pagesHome/pages/ParticularsOfCompletionBySales/ParticularsOfCompletionBySales.vue

<template>
	<BasicContainer ref='basicContainer' :option="option">
		<!-- 头部 -->
		<template #head>
		</template>

		<!-- 主体 -->
		<template #body>
			<view class="main">
				<scroll-view class="scvmabx" :style="{height: details.scrollheight}" @scrolltolower="()=>{}" scroll-y="true"
					@touchmove.stop>
					<view class="main_container ">
						<!-- 行 -- 图片 -->
						<view class="info_item border_bottom">
							<view class="info_item_title">
								图 片
							</view>

							<view class="imgList flex">
								<!-- 单个图片 -->
								<block v-for="(item, index) in details.imagesList" :key="item.url">
									<view class="image_conatiner mr20 mb20">
										<image :src="item.url" mode=""></image>

										<!-- 删除 -->
										<view class="removeIcon" @click="() => handleRemove(index)">
											<u-icon name="close-circle-fill" color="#666" size="50"></u-icon>
										</view>
									</view>
								</block>


								<!-- 添加图片 -->
								<view class="image_conatiner addImg flex-c-c" @click="handleUploadFile">
									<u-icon name="photo-fill" color="#999" size="100"></u-icon>
								</view>
							</view>
						</view>

						<!-- 行 -- 备注 -->
						<view class="info_item ">
							<view class="info_item_title">
								备 注
							</view>

							<u--textarea v-model="details.form.remark" placeholder="请输入备注"></u--textarea>
						</view>
					</view>
				</scroll-view>

				<view class="footer flex-c-c">
					<view class="button subColor" @click="handleSubmit">
						确 认
					</view>
				</view>
			</view>

		</template>
	</BasicContainer>

	<tips ref="tip" />

	<!-- #ifdef APP -->
	<!-- <saomiao2 :ishidestop="scanState !== 0"></saomiao2> -->
	<!-- #endif -->
</template>

<script lang="ts" setup>
	import {
		postInstallSalesComplete,
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import { nextTick, reactive, ref, toRefs } from "vue";
	import utils from '@/utils/utils.js'
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	const { scanState } = storeToRefs(useSystemSettingsStore())

	let details = reactive({
		/** 主页面高度 */
		scrollheight: '80vh',
		/** 表单数据 */
		form: {
			/** 备注 */
			remark: ''
		},
		pageInfo: {
			/** 类型 -- siginIn: 签入 ; siginOut: 签出 */
			type: 'siginIn' as 'siginIn' | 'siginOut',
			/** 页面类型 -- install: 安装任务; installSales: 安装售后 */
			pageType: 'install' as 'install' | 'installSales',
			/** install_id | install_sales_id */
			id: ''
		},
		imagesList: [] as { name : string, url : string }[]
	})

	// 组件配置
	const option = reactive({
		// 标题
		title: '售后完成信息',
		// 下拉刷新回调函数
		async pullDownRefreshInitPage() {

			return null
		},
		// 触底加载回到函数
		reachBottomInitPage: async () => { return null },
		haveData: true,
		isEnd: false,
		pageLoading: false
	})

	// 组件实例
	const basicContainer = ref()
	const tip = ref()

	onShow(async () => {
		// // #ifdef APP
		// // 初始化关闭监听
		// uni.$off('scancodedate')
		// // init()
		// uni.$on('scancodedate', function (code) {
		// 	console.log('code :>> ', code);
		// 	if (code) {
		// 		console.log(code);
		// 		details.scancode = code
		// 		scandata()
		// 	}
		// })
		// // #endif

		await nextTick()
		// basicContainer.value.startPullDownRefresh()
		const _height = await utils.getViewDistanceFormTop('.scvmabx')

		details.scrollheight = Number(_height.replace('px', '')) - 50 + 'px'
	})

	onLoad((e) => {
		console.log('e :>> ', e);
		details.pageInfo.id = e.id

		const _info = (uni.getStorageSync('installWork') || {})

		details.form.remark = _info.remark || ''
		details.imagesList = _info.images || []
	})

	onUnload(() => {
		uni.removeStorageSync('installWork')
	})


	const scandata = () => { }

	/** 页面初始化请求 */
	const initpage = () => { }

	/** 上传图片 */
	const handleUploadFile = () => {
		const beforeUpload = (files) => {
			option.pageLoading = true
		}

		const successByUpload = (res) => {
			console.log('res :>> ', res);
			const { data } = res
			const _data = JSON.parse(data)

			console.log('_data :>> ', _data);
			const { code, data: img } = _data

			if (code !== 200) return

			details.imagesList.push({ url: img, name: img })
		}

		const allSuccess = () => {
			option.pageLoading = false
		}

		utils.handleUploadFile({
			successByUpload,
			beforeUpload,
			allSuccess
		})
	}


	/** 移除 */
	const handleRemove = (index : number) => {
		tip.value.setdetails({
			isshow: true,
			content: '确认移除',
			cancelTxt: '取消',
			confirmTxt: '确认',
			async success() {
				details.imagesList.splice(index, 1)

				// 关闭弹窗
				tip.value.setdetails({ isshow: false })
			},
			cancel() {
				// 关闭弹窗
				tip.value.setdetails({ isshow: false })
			}
		})
	}

	/** 签到 */
	const handleSubmit = () => {
		const submitData : {
			// 类型 -- 签入: 1,签出: 2
			type : string,
			// 备注
			remark : string
			// 售后任务id
			install_sales_id : string,
			// 图片列表
			images : {
				url : string,
				name : string
			}[]
		} = {
				type: details.pageInfo.type === 'siginIn' ? '1' : '2',
				remark: details.form.remark,
				install_sales_id: details.pageInfo.id,
				images: [...details.imagesList]
			}


		if (submitData.images.length === 0) return utils.handleToast('最少上传一张照片')



		tip.value.setdetails({
			isshow: true,
			content: '确认完工',
			cancelTxt: '取消',
			confirmTxt: '确认',
			async success() {
				try {
					option.pageLoading = true

					const res = await postInstallSalesComplete(submitData)
					const { code, data } = res

					if (code !== 200) return

					// const timer = setTimeout(() => {
					// 	utils.handleToast((details.pageInfo.type === 'siginIn' ? '签入' : '签出') + '成功')

					// 	clearTimeout(timer)
					// }, 200)
					uni.navigateBack()

				} catch (err) {
					console.log('err :>> ', err);
					//TODO handle the exception
				} finally {
					// 关闭弹窗
					tip.value.setdetails({ isshow: false })
					option.pageLoading = false
				}
			},
			cancel() {
				// 关闭弹窗
				tip.value.setdetails({ isshow: false })
			}
		})


	}
</script>

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

	// 主体内容
	.main {
		font-family: 黑体;
		position: relative;
		border-top-right-radius: 20upx;
		border-top-left-radius: 20upx;
		background-color: #fff;

		.scvmabx {
			background-color: #fff;


		}

		.main_container {
			padding: 0 20upx;
		}

		.info_item {
			padding-bottom: 20upx;

			.info_item_title {
				padding: 20upx 0;
				font-weight: bold;
			}

			&.border_bottom {
				border-bottom: 2upx solid #eee;
			}

			:deep(.u-textarea) {
				background-color: #f5f5f6;
				border: none;
				height: 200upx;
			}
		}



		// 图片列表
		.imgList {
			flex-wrap: wrap;

			.image_conatiner {
				position: relative;

				.removeIcon {
					position: absolute;
					top: 0;
					right: 0;
					transform: translate(40%, -40%);
					opacity: 0.9;
				}
			}

			.addImg {
				width: 160upx;
				height: 160upx;
				border-radius: 20upx;
				box-sizing: border-box;
				border: 2upx solid #eee;
			}

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

	// 底部
	.footer {
		height: 50px;

		.button {
			height: 70%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			// margin: 10upx;
			border: 2upx solid #b5babf;
			border-radius: 80upx;
			margin: 0 10upx;
			padding: 0 10upx;
			// font-size: 0.75rem;

			&.subColor {
				background-color: var(--subjectColor);
				color: #fff;
			}
		}
	}
</style>