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">待补充</text></view>
		<car-number-input @numberInputResult="carNumber" :defaultStr="state.form.vehiclePlate"></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" type="select" @click="show1 = true" input-align='right'/>
			</u-form-item>
			<u-form-item label="姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<u-input placeholder='请输入姓名' type="idcard" v-model="state.form.name" maxlength="18"
					inputAlign="right" />
			</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.mobile" maxlength="11"
					inputAlign="right" />
			</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='请输入工单号码' type="idcard" v-model="state.form.name" inputAlign="right" />
			</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.vehiclePlateColorStr" type="select" @click="show1 = true" input-align='right'/>
			</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.vehiclePlateColorStr" type="select" @click="show1 = true" input-align='right'/>
			</u-form-item>
			<u-form-item label="事件发生日期" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<picker mode="date" value="{{state.date}}" bindchange="bindDateChange">
					<view class="picker" v-if="!state.date">
					  请选择日期
					</view>
					<view>
						{{state.date}}
					</view>
			  </picker>
			</u-form-item>
			<u-form-item label="申请日期" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<picker mode="date" value="{{state.date}}" bindchange="bindDateChange">
					<view class="picker" v-if="!state.date">
					  请选择日期
					</view>
					<view>
						{{state.date}}
					</view>
			  </picker>
			</u-form-item>
			<u-form-item label="客户投诉" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
			</u-form-item>
			<textarea 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>
		   </u-form-item>
		   <view class="picture-wrapper" @click="cardFileImageUpdate()">
		   	<view class="bg">
		   		<view class="">
		   			<view class="name"> 佐证资料一 </view>
		   			<view class="value"> 上传佐证资料一 </view>
		   			<view class="tip">
		   				<view class="tip-value"> 拍摄规范 </view>
		   			</view>
		   		</view>
		   		<image v-if="!state.form.proxyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
		   			:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
		   		</image>
		   		<image v-else class="icon" :src="strReplace(state.form.proxyUrl)"
		   			:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
		   	</view>
		   </view>
		   <u-form-item label="文件" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
		   	borderBottom>
		   </u-form-item>
		   <view class="down-wrap">
			   <text>XXXXX文件.pdf</text>
			   <text class="down">下载</text>
		   </view>
		   <view class="down-wrap">
			   <text>XXXXX文件.pdf</text>
			   <text class="down">下载</text>
		   </view>
		</u-form>
	</view>
	<view class="bg">
		<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 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>
			<button type="default" class="ui-btn-another" @click="addFile()">
				+添加附件
			</button>
		</u-form>
	</view>
	<view class="action">
		<button type="default" class="ui-btn" @click="savaHandle()">
			提交
		</button>
	</view>
	<!-- 选择车牌颜色 -->
	<u-select v-model="show1" :list="state.colorRange" @confirm="changeColor"></u-select>

</template>

<script setup lang="ts">
	import { navTo,uploadFile,strReplace} 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"

	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	const leftIcon = {
		height: '100%',
		width: '8rpx',
		display: 'flex',
		'align-items': 'center',
		'margin-right': '4rpx',
	}
	const show1 = ref(false)
	const state = reactive({
		form: {
			name: "",
			mobile: "",
			vehiclePlate: "",
			vehiclePlateColor: "",
			vehiclePlateColorStr:"",//车牌颜色中文
			proxyUrl:"",
		},
		colorRange: [],
		date: '',//2016-09-01
	})
	onLoad((option : any) => {
		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)
		}
		console.log("state.colorRange",state.colorRange)
	});

	//车牌号输入
	const carNumber = (val : any) => {
		state.form.vehiclePlate = val.trim();
	};
	const changeColor = (item) => {
			state.form.vehiclePlateColor = item[0].value
			state.form.vehiclePlateColorStr = item[0].label
			console.log(item)
		}
const bindDateChange=(e) =>{
    console.log('picker发送选择改变，携带值为', e.detail.value)
	state.date= e.detail.value
  }
	const savaHandle = () => {
		navTo(`/subpackage/after-sale/rescind-carId/rescind-carId-select`)
	}
	const addFile=()=>{
		
	}
	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;
				})
			},
		});
	};
</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);
	}
	.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-wrap{
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		.down{
			width: 100rpx;
			height: 40rpx;
			border-radius: 20rpx;
			background:linear-gradient(90deg, #CCB375 0%, #E7D398 100%);
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 40rpx;
		}
	}
	
</style>