zhywpt-sp/subpackage/after-sale/work-order/add-work-supplement.vue

<template>
	<view class="bg">
		<view class="title_wrap"><text class="title">基本信息</text><text class="common-word">{{state.orderStatusArr[state.orderStatus]}}</text></view>
		<car-number-input :defaultStr="state.form.vehiclePlate" :isClick="isClick"></car-number-input>
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
			<u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<u-input v-model="state.form.vehiclePlateColorStr" input-align='right'disabled/>
			</u-form-item>
			<u-form-item label="姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<u-input placeholder='请输入姓名'  v-model="state.form.customerName" maxlength="18"
					inputAlign="right" disabled/>
			</u-form-item>
			<u-form-item label="联系方式" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<u-input placeholder='请输入手机号码' type="number" v-model="state.form.customerTel" maxlength="11"
					inputAlign="right" disabled/>
			</u-form-item>
		</u-form>
	</view>
	<view class="bg">
		<view class="title">工单信息</view>
        <u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle' borderBottom>
			<u-form-item label="工单号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<u-input placeholder='请输入工单号码' v-model="state.params.serviceOrderId" inputAlign="right" disabled/>
			</u-form-item>
			<u-form-item label="工单类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<u-input v-model="state.form.questionTypeStr" input-align='right' disabled/>
			</u-form-item>
			<u-form-item label="是否ETC用户" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<u-input v-model="state.form.etcUserStr" input-align='right' disabled/>
			</u-form-item>
			<u-form-item label="事件发生日期" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<u-input v-model="state.form.eventOccurrenceTime" input-align='right' disabled/>
			</u-form-item>
			<u-form-item label="申请日期" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<u-input v-model="state.form.insertTime" input-align='right' disabled/>
			</u-form-item>
			<!-- <u-form-item label="客户诉求" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
			</u-form-item> -->
			
		   <!-- <u-form-item label="文件" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
		   	borderBottom>
		   </u-form-item> -->
		   
		</u-form>
	</view>
	
	<view class="bg">
		<view class="user-appeals-list">
			<view class="user-appeals" v-for="(item,index) in state.userAppeals">
				<!-- <view class="time"><text>申请日期:</text><text>{{item.insertTime}}</text></view> -->
				<view class="option-title">
					{{ index === 0 ? '诉求内容' : '补充诉求'}}
				</view>
				<view class="user-appeals-content"><text>{{item.userAppeals}}</text></view>
			</view>
		</view>
	</view>
	
	<view class="bg">
		<view class="file-list">
		  <view class="down-wrap1" v-for="(item,index) in state.supportingMaterialsUrls" :key="index">
			 <!-- <view class="time"><text>申请日期:</text><text>{{item.insertTime}}</text></view> -->
			 <view class="down-wrap1-title">{{ index === 0 ? '佐证资料' : '补充佐证资料' }}</view>
			 <view class="yulan" v-for="(itemObj, index2) in item.fileList">
				 <text>附件{{index2 + 1}}</text>
				 <view>
				   <text class="down" @click="down(itemObj)">预览</text>
				 </view>
			 </view>
		  </view>
		</view>
	</view>
	
	<!-- orderStatus=='1' 待补充 展示详情-->
	<view class="bg" v-if="state.orderStatus=='1'">
		<view class="title_wrap" style="margin-bottom: 0;"><text class="title">请补充如下的资料</text></view>
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle' borderBottom>
			<u-form-item label="补充描述" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
			</u-form-item>
			<textarea v-model="state.params.appeal" style="border: 1rpx dashed rgb(192, 196, 204);min-height: 200rpx; width: 100%;border-radius: 18rpx;padding: 20rpx;box-sizing: border-box;" placeholder="请根据自身情况进行补充。" auto-height adjust-position></textarea>
			<u-form-item label="其他佐证材料" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<text class="common-word">(不限于图片、文件、不超过5个。)</text>
			</u-form-item>
			<view class="down-wrap" v-for="(item,index) in state.form.supportingMaterialsUrlShow" :key="index">
			   <text>附件{{index+1}}</text>
			   <view>
				   <text class="down" @click="down(item,index)">预览</text>
				   <text class="down" @click="deleteFile(index)">删除</text>
			   </view>
			</view>
			<button type="default" class="ui-btn-another" @click="addFile()">
				+添加附件
			</button>
		</u-form>
	</view>
	<view class="action" v-if="state.orderStatus=='1'">
		<button type="default" class="ui-btn" @click="savaHandle()">
			提交
		</button>
	</view>
	
	<view class="emty-block">
		
	</view>
</template>

<script setup lang="ts">
	import { navTo,uploadFile,strReplace,msg, getFullImageUrl} from "@/utils/utils";
	import { reactive,ref } from "vue";
	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { getItem } from "@/utils/storage.ts"
	import { selfServiceView, selfServiceUserUpload } from "@/utils/network/api.js";
	import { requestNew } from "@/utils/network/request.js";
	import { getCodeName } from '@/datas/queryKey.js'
	
	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	const leftIcon = {
		height: '100%',
		width: '8rpx',
		display: 'flex',
		'align-items': 'center',
		'margin-right': '4rpx',
	}
	const isClick = ref(false);
	const state = reactive({
		form: {
			customerName: "",
			customerTel: "",
			vehiclePlate: "",
			vehiclePlateColor: "",
			vehiclePlateColorStr:"",//车牌颜色中文
			questionType:"",
			questionTypeStr:"",
			etcUser:"",
			etcUserStr:"",
			eventOccurrenceTime:"",//2016-09-01 00:00:00
			supportingMaterialsUrlShow:[],
			insertTime:"",
		},
		params:{
			appeal:"",
			attachFile:"",
			serviceOrderId:""
		},
		userAppeals:[],
		supportingMaterialsUrls:[],
		colorRange: [],
		questionTypeRange:[
			{value: 1, label: "工单1"},
			{value: 2, label: "工单2"},
		],
		etcUserRange:[
			{value: 1, label: "是"},
			{value: 0, label: "否"},
		],
		orderStatus:"",
		orderStatusArr:['待处理','待补充','已结束']
	})
	onLoad((option : any) => {
		state.params.serviceOrderId=option.id
		state.orderStatus=option.orderStatus
		let getColor = getItem('key')['VEHICLE_COLOR_TYPE'];
		for (var k = 0; k < getColor.length; k++) {
			let obj = {};
			obj['value'] = getColor[k]['code']
			obj['label'] = getColor[k]['name']
			state.colorRange.push(obj)
		}
		details()
		console.log("state.colorRange",state.colorRange,option)
	});
    const details=()=>{
		const options = {
			type: 2,
			data: {
				id:state.params.serviceOrderId
			},
			method: "POST",
			showLoading: true,
		};
		requestNew(selfServiceView, options).then((res) => {
			state.form.vehiclePlate=res.vehiclePlate
			state.form.vehiclePlateColor=res.vehiclePlateColor
			// 车牌颜色中文
			// for(var i=0;i<state.colorRange.length;i++){
			// 	console.log("state.colorRange[i]['value']",state.colorRange[i]['value'],res.vehiclePlateColor)
			// 	if(state.colorRange[i]['value']==res.vehiclePlateColor){
			// 		console.log("state.colorRange[i]['value']",state.colorRange[i]['value'],res.vehiclePlateColor)
			// 		state.form.vehiclePlateColorStr=state.colorRange[i]['label']
			// 		break;
			// 	}
			// }
			state.form.vehiclePlateColorStr = getCarColorName(state.form.vehiclePlateColor)
			state.form.customerName=res.customerName
			state.form.customerTel=res.customerTel
			state.form.questionType=res.questionType
			// 工单类型中文
			// for(var i=0;i<state.questionTypeRange.length;i++){
			// 	if(state.questionTypeRange[i]['value']==res.questionType){
			// 		state.form.questionTypeStr=state.questionTypeRange[i]['label']
			// 		break;
			// 	}
			// }
			state.form.questionTypeStr = getSelfTypeName(state.form.questionType)
			state.form.etcUser = res.etcUser
			// 是否ETC用户中文
			for(var i=0;i<state.etcUserRange.length;i++){
				if(state.etcUserRange[i]['value']==res.etcUser){
					state.form.etcUserStr=state.etcUserRange[i]['label']
					break;
				}
			}
			state.form.eventOccurrenceTime = res.eventOccurrenceTime
			state.form.insertTime=res.insertTime
			state.userAppeals=res.userAppeals
			state.supportingMaterialsUrls = res.supportingMaterialsUrls.map(item => {
				item.fileList = item.supportingMaterialsUrls ? item.supportingMaterialsUrls.split(',') : []
				return item
			})
			
			console.log("自助工单详情",res,state.supportingMaterialsUrls)
		});
	}
	
	
	const getCarColorName = (code: string) => {
		return getCodeName('VEHICLE_COLOR_TYPE', code)
	}
	
	const getSelfTypeName = (code: string) => {
		return getCodeName('SELF_SERVICE_TYPE', code)
	}
	
	//车牌号输入
	const carNumber = (val : any) => {
		state.form.vehiclePlate = val.trim();
	};
	const savaHandle = () => {
		if(!state.params.appeal){
			msg('请输入述求');
			return;
		}
		if(!state.form.supportingMaterialsUrlShow){
			msg('请上传其他佐证材料');
			return;
		}
		state.params.attachFile=state.form.supportingMaterialsUrlShow.toString()
		
		
		const options = {
			type: 2,
			data: {
				...state.params
			},
			method: "POST",
			showLoading: true,
		};
		requestNew(selfServiceUserUpload, options).then((res) => {
			console.log("添加成功",res)
			msg("新增自助工单成功")
			setTimeout(()=>{
				uni.navigateBack()
			},1500)
		});
	}
	const addFile=()=>{
		const count =5-state.form.supportingMaterialsUrlShow.length
		uni.chooseMessageFile({
		  count: count,
		  type: 'all',
		  success (res) {
		    // tempFilePath可以作为img标签的src属性显示图片
		    console.log("res",res)
			var files=res.tempFiles
			for(var i=0;i<files.length;i++){
				uploadFile(files[i]['path'], "", "").then((data) => {
					state.form.supportingMaterialsUrlShow.push(data);
					console.log("state.form.supportingMaterialsUrlShow",state.form.supportingMaterialsUrlShow)
				})
			}
			
		  }
		})
	}
	const cardFileImageUpdate = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0]).then((data) => {
					state.form.proxyUrl = data;
				})
			},
		});
	};
	const down = (item: string)=>{
		// 找到最后一个点（.）的位置
		const lastDotIndex = item.lastIndexOf(".");
		// 截取最后一个点后面的内容
		const result = item.substring(lastDotIndex+1);
		if(result=='jpg' || result=='png'){
			uni.previewImage({
				urls:[getFullImageUrl(item)],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		}else{
			uni.downloadFile({
				url: getFullImageUrl(item),
				success(res) {
					console.log("下载",res)
					const filePath = res.tempFilePath
					uni.openDocument({
						filePath: filePath,
						showMenu: true, //关键点
						success: function (res) {
							msg("打开文档成功");
						},
						fail: function (err) {
							msg("打开文档失败");
						}
					});
				},
				fail: function (err) {
					msg("下载文档失败");
					console.log("err", err)
				},
				complete(res) {
			
				}
			})
		}
	}
	const deleteFile=(index)=>{
		state.form.supportingMaterialsUrlShow.splice(index,1)
	}
</script>

<style lang="scss" scoped>
	.bg {
		background-color: white;
		width: 88%;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 12px;
		border: 1px solid #FFFFFF;
		padding: 20rpx;
		overflow: hidden;

		.title_wrap {
			display: flex;
			font-weight: 400;
			margin-bottom: 40rpx;
            justify-content: space-between;
			.title {
				font-size: 30rpx;
				color: #01243A;
			}
		}

		.des {
			font-weight: 400;
			font-size: 28rpx;
			color: #01243A;
			line-height: 56rpx;
			margin-top: 10rpx;
			text-indent: 1rem;
		}
	}

	.action {
		position: absolute;
		left: 0;
		height: 188rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}
	.picker{
		text-align: right;
		color: rgb(192, 196, 204);
	}
	.data{
		text-align: right;
	}
	.five{
		color: rgb(195,188,157);
	}
	.picture-wrapper {
		margin-top: 30rpx;
	
		.bg {
			background: #F5F9FB;
			border-radius: 10rpx;
			padding: 40rpx 30rpx;
			display: flex;
			justify-content: space-between;
	
			.name {
				padding-top: 30rpx;
				font-size: 32rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				color: #111;
				line-height: 34rpx;
			}
	
			.value {
				margin-top: 20rpx;
				font-size: 22rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}
	
			.tip {
				margin-top: 20rpx;
				text-align: center;
				width: 100rpx;
				height: 30rpx;
				border-radius: 6rpx;
				border: 1rpx solid #CCB375;
	
				.tip-value {
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #CCB375;
					line-height: 30rpx;
					opacity: 1;
				}
			}
		}
	
		.icon {
			width: 304rpx;
			height: 190rpx;
			background-image: var(--bgimg);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}
	.down-wrap1{
		padding: 14rpx 0;
		border-bottom: 2rpx solid #E9EDF0;
		.down-wrap1-title{
			margin-bottom: 24rpx;
			font-size: 30rpx;
		}
		.time{
			display: flex;
			justify-content: space-between;
			margin-bottom: 16rpx;
		}
		.yulan{
			display: flex;
			justify-content: space-between;
			margin-bottom: 12rpx;
			.down{
				width: 100rpx;
				height: 50rpx;
				border-radius: 20rpx;
				background:linear-gradient(90deg, #CCB375 0%, #E7D398 100%);
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 50rpx;
				display: inline-block;
				margin-left: 16rpx;
			}
		}
		
	}
	.file-list{
		font-size: 28rpx;
		color: #004576;
		.down-wrap{
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
			.down{
				width: 100rpx;
				height: 50rpx;
				border-radius: 20rpx;
				background:linear-gradient(90deg, #CCB375 0%, #E7D398 100%);
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 50rpx;
				display: inline-block;
				margin-left: 16rpx;
			}
		}
	}
	.user-appeals-list{
		.user-appeals{
			margin-bottom: 24rpx;
			border-bottom: 2rpx solid #E9EDF0;
			font-size: 28rpx;
			color: #004576;
			.time{
				display: flex;
				justify-content: space-between;
				margin-bottom: 16rpx;
			}
			.option-title{
				margin-bottom: 24rpx;
				font-size: 30rpx;
			}
			.user-appeals-content{
				background-color: #E9EDF0;
				padding: 14rpx 12rpx;
				border-radius: 12rpx;
			}
		}
	}
	.emty-block{
		height: 80rpx;
	}
</style>