ErectionPlatform/pagesHome/pages/afterSalesDetails/afterSalesInfo.vue

<template>
	<view class="">

		<view class="main_container">
			<!-- 行 -- 售后类型 -->
			<view class="info_item border_bottom">
				<view class="info_item_title flex-c-sb">
					<view class="">
						售 后 包 件
					</view>

					<!-- 新增售后包件 -->
					<view class="flex addBtn" @click="handleAddPackage" v-if="submitChangeBtn">
						<view class="addButton">
							<u-icon name="close-circle" color="#2F8DFF" size="36"></u-icon>
						</view>

						<text class="ml10 fwn">
							添加
						</text>
					</view>
				</view>
			</view>

			<!-- 售后包件列表 -->
			<view :class="{packageList: true, pd20: details.packageList.length > 0}"
				:style="{height: (details.packageList.length > 0 ?(40 * details.packageList.length) + ((details.packageList.length - 1) * 10): 0)  + 'px'}">
				<block v-for="(item, index) in details.packageList">
					<view :class="{'packageItem': true, 'flex-c-sb': true, 'mt20': index !== 0}">
						<view class="inputBox flex1 flex">
							<input class="packageInput flex1" :disabled="!submitChangeBtn" v-model="item.code"
								placeholder="请输入包条码" />

							<view class="scanIcon flex-c-c" @click.stop="()=> handleScan(item)" v-if="submitChangeBtn">
								<u-icon name="scan" color="#2F8DFF" size="60"></u-icon>
							</view>
						</view>

						<view class="ml20 flex-c-c" @click="()=> handleRemovePackage(index)" v-if="submitChangeBtn">
							<u-icon name="trash" color="#8792AA" size="36"></u-icon>

							<text class="ml10 info">
								删除
							</text>
						</view>
					</view>
				</block>
			</view>

			<!-- 行 -- 售后类型 -->
			<view class="info_item border_bottom">
				<view class="info_item_title flex-c-sb" @click="details.popUpObj.afterSalesType = true">
					<view class="">
						售 后 类 型
					</view>

					<view class="flex" @click="handleShowMyDrawer">
						<text class="mr10 fwn info">
							{{ details.form.typeName ||  '待确定'}}
						</text>

						<u-icon name="arrow-right" color="#AFB4BA" size="36"></u-icon>
					</view>
				</view>
			</view>

			<!-- 行 -- 图片 -->
			<view class="info_item border_bottom">
				<view class="info_item_title">
					图 片
				</view>

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

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

					<!-- 添加图片 -->
					<view class="image_conatiner addImg flex-c-c" v-if="submitChangeBtn" @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>

				<view class="mt20">
					<u--textarea :disabled="!submitChangeBtn" v-model="details.form.remark"
						placeholder="请输入备注"></u--textarea>
				</view>
			</view>

			<view class="felx-c-c mb20" v-if="submitChangeBtn">
				<view class="button subColor" @click="handleSubmit">
					修改提交
				</view>
			</view>

			<template v-if="installSales.type === 5 || installSales.type === 6">
				<!-- 到货信息 -->
				<view class="info_item border_bottom">
					<view class="info_item_title flex-c-sb" @click="details.popUpObj.afterSalesType = true">
						<view class="">
							到 货 信 息
						</view>
					</view>
				</view>

				<!-- 行 -- 售后类型 -->
				<view class="info_item border_bottom">
					<view class="info_item_title flex-c-sb" @click="details.popUpObj.afterSalesType = true">
						<view class="">
							到 货 状 态
						</view>

						<view>
							<text class="mr10 fwn info">
								{{ installSales.status >= 3? '已到货':'未到货' }}
							</text>
						</view>
					</view>
				</view>

				<!-- 行 -- 售后类型 -->
				<view class="info_item border_bottom">
					<view class="info_item_title flex-c-sb">
						<view class="">
							到 货 包 件
						</view>

						<!-- 新增售后包件 -->
						<view class="flex addBtn" @click="handleAddPackage">
							<view class="addButton">
								<u-icon name="close-circle" color="#2F8DFF" size="36"></u-icon>
							</view>

							<text class="ml10 fwn">
								添加
							</text>
						</view>
					</view>
				</view>

				<!-- 售后包件列表 -->
				<view :class="{packageList: true, pd20: details.packageList.length > 0}"
					:style="{height: (details.packageList.length > 0 ?(40 * details.packageList.length) + ((details.packageList.length - 1) * 10): 0)  + 'px'}">
					<block v-for="(item, index) in details.packageList">
						<view :class="{'packageItem': true, 'flex-c-sb': true, 'mt20': index !== 0}">
							<view class="inputBox flex1 flex">
								<input class="packageInput flex1" v-model="item.code" placeholder="请输入包条码" />

								<view class="scanIcon flex-c-c" @click.stop="()=> handleScan(item)">
									<u-icon name="scan" color="#2F8DFF" size="60"></u-icon>
								</view>
							</view>

							<view class="ml20 flex-c-c" @click="()=> handleRemovePackage(index)">
								<u-icon name="trash" color="#8792AA" size="36"></u-icon>

								<text class="ml10 info">
									删除
								</text>
							</view>
						</view>
					</block>
				</view>

				<view class="felx-c-c mb20">
					<view class="button subColor" @click="handleArrivalNotice">
						到货确认
					</view>
				</view>
			</template>
		</view>

		<MyDrawer ref="myDrawer">
			<template #content>
				<picker-view v-if="details.visible" :indicator-style="details.indicatorStyle" :immediate-change="true"
					:value="details.value" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in details.pickerArr" :key="index">
							{{ item.label }}
						</view>
					</picker-view-column>
				</picker-view>
			</template>
		</MyDrawer>
	</view>
	<tips ref="tip" />
</template>

<script lang="ts" setup>
	import {
		postInstallAfterUpdate,
		postCenterInstallSalesTheArrival
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
	} from '@dcloudio/uni-app'
	import { nextTick, reactive, ref, toRefs, computed, defineExpose } 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,
		},
		/** 开启loading */
		handleSetLoading: {
			type: Function as PropType<Function>,
			required: true
		},
		/** 刷新数据 */
		handleRefresh: {
			type: Function as PropType<Function>,
			required: true
		},
		/** */
	})

	const pageInfo = computed(() => {
		console.log('props.pageInfo :>> ', props.pageInfo);

		if (props.pageInfo) return props.pageInfo
		else return {}
	})

	const installSales = computed(() => {
		console.log('props.info :>> ', props.info);

		if (props.info && props.info.installSales) return props.info.installSales
		else return {}
	})

	/** 提交修改 */
	const submitChangeBtn = computed(() => {
		if (!props && !props.info) return false
		console.log('111 :>> ', 111);

		const { installSales } = props.info as any

		if (utils.getObjType(installSales) !== 'object') return false
		console.log('222 :>> ', 222);

		const _status = Number(installSales.status)

		const whiteArr = [0]

		if (whiteArr.includes(_status)) return true
		console.log('333 :>> ', 333);
		return false
	})

	const myDrawer = ref()
	const tip = ref()


	let details = reactive({
		/** 主页面高度 */
		scrollheight: '80vh',
		/** 表单数据 */
		form: {
			type: '',
			typeName: '',
			/** 备注 */
			remark: ''
		},
		/** 售后包件列表 */
		packageList: [],
		/** 售后图片列表 */
		imgList: [],
		/** 扫描码值 */
		scancode: '',
		/** 是否显示弹窗 */
		popUpObj: {
			/** 异常类型 */
			afterSalesType: false
		},
		/** picker行高度 */
		indicatorStyle: `height: 40px;`,
		visible: false,
		value: [0],
		pickerArr: [
			{
				label: '调试',
				value: '1'
			},
			{
				label: '维修',
				value: '2'
			},
			{
				label: '理赔',
				value: '3'
			},
			{
				label: '待确认',
				value: '4'
			}, {
				label: '换货',
				value: '5'
			},
			{
				label: '工厂补单',
				value: '6'
			},

		],
		/** 页面信息 */
		pageInfo: {
			id: ''
		}
	})

	onLoad((e) => {
		details.pageInfo.id = e.id
	})

	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'
	})

	const scandata = () => { }

	const initpage = () => { }

	/** 关闭弹窗 */
	const hidePopUp = (node) => {
		details.visible = false
		node.value.details.showPopUp = false
	}

	/** 显示售后类型选择弹窗 */
	const handleShowMyDrawer = () => {
		if (!submitChangeBtn.value) return


		details.visible = true
		myDrawer.value.setDetails({
			showPopUp: true,
			height: '50vh',
			success() {
				console.log('details.value :>> ', details.value);

				try {
					const _item = details.pickerArr[details.value[0]]
					details.form.type = _item.value
					details.form.typeName = _item.label
				} catch (err) {
					console.log('err :>> ', err);
				} finally {
					hidePopUp(myDrawer)
				}
			},
			close() {
				hidePopUp(myDrawer)
			}
		})
	}

	/** 显示扫描 */
	const handleScan = (value) => {
		console.log('value :>> ', value);
		// #ifdef MP-WEIXIN
		// 微信小程序适配
		uni.scanCode({
			success(res) {
				console.log('res :>> ', res);
				console.log('res.result :>> ', res.result);
				for (let i = 0; i < details.packageList.length; i++) {
					const value = details.packageList[i]

					if (value.code === res.result) return utils.handleToast('码值已存在')
				}

				value.code = res.result
				// scandata()
			}
		})
		return
		// #endif

		uni.navigateTo({
			url: '/pagesHome/pages/Video/Video'
		})
	}

	/** 新增售后包件 */
	const handleAddPackage = () => {
		details.packageList.push({ code: '' })
	}

	/** 删除售后包件 */
	const handleRemovePackage = (index : number) => {
		details.packageList.splice(index, 1)
	}

	/** picker切换时执行 */
	const bindChange = function (e, type) {
		console.log('type :>> ', type);
		console.log('e :>> ', e);

		details.value = e.detail.value

	}

	/** 新增图片 */
	const handleUploadFile = () => {
		const successByUpload = (res) => {
			console.log('res :>> ', res);
			const { data } = res
			const _data = JSON.parse(data)

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

			details.imgList.push(img)
		}

		utils.handleUploadFile({
			successByUpload
		})
	}


	/** 移除图片 */
	const handleRmove = (index) => {
		tip.value.setdetails({
			isshow: true,
			content: '确认移除',
			cancelTxt: '取消',
			confirmTxt: '确认',
			success() {
				details.imgList.splice(index, 1)

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

	/** 提交 */
	const handleSubmit = () => {
		tip.value.setdetails({
			isshow: true,
			content: '确认提交',
			cancelTxt: '取消',
			confirmTxt: '确认',
			async success() {
				try {
					props.handleSetLoading(true)

					const submitData = { type: details.form.type, id: pageInfo.value.id, remark: details.form.remark, images: details.imgList }
					// for (let i = 0; i < details.packageList.length; i++) {
					// 	const _item = details.packageList[i]
					// 	_item && submitData.images.push(_item)
					// }

					const res = await postInstallAfterUpdate(submitData)

					const { code, data } = res

					if (code !== 200) return
					props.handleRefresh()

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

	/** 到货 */
	const handleArrivalNotice = () => {
		// postCenterInstallSalesTheArrival

		tip.value.setdetails({
			isshow: true,
			content: '确认到货',
			cancelTxt: '取消',
			confirmTxt: '确认',
			async success() {
				try {
					props.handleSetLoading(true)

					const submitData = { install_sales_id: pageInfo.value.id }

					const res = await postCenterInstallSalesTheArrival(submitData)

					const { code, data } = res

					if (code !== 200) return
					props.handleRefresh()

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

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

	defineExpose({ details })
</script>

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




	.info {
		color: #AFB4BA;
	}

	.main_container {
		// padding: 0 20upx;
	}

	// 行
	.info_item {
		margin: 0 20upx;
		padding: 20upx;

		.info_item_title {
			// padding: 0 0 20upx;
			font-weight: bold;
			height: 40upx;
			line-height: 40upx;
		}


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

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

		// 添加
		.addBtn {
			color: #2F8DFF;

			.addButton {
				transform: rotate(45deg);
			}
		}

	}

	// 包件列表
	.packageList {
		background: #f5f5f6;
		transition: all 0.3s;
		overflow: hidden;

		.packageItem {
			$inputHeight: 80upx;

			.inputBox {
				position: relative;
				border-radius: calc($inputHeight / 2);
				overflow: hidden;
				background: #fff;

				.packageInput {
					height: $inputHeight;
					padding: 0 40upx;
				}

				.scanIcon {
					padding: 0 20upx;
					// position: absolute;
					// right: 40upx;
					// top: 50%;
					// transform: translateY(-50%);
				}
			}
		}
	}

	// 图片列表
	.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;
		}
	}





	.button {
		height: 80upx;
		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>