wit-uniapp/pages/index/Onlinewarranty/Onlinewarranty.vue

<template>
	<view>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form
				labelPosition="left"
				:model="model1"
				:rules="rules"
				ref="uForm"
		>
			<u-form-item
					labelWidth="150"
					label="报修位置"
					prop="userInfo.sex"
					borderBottom
					@click="showSex = true; hideKeyboard()"
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.sex"
						disabled
						
						placeholder="请选择报修位置"
						border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			</u-form-item>
			<u-form-item
					labelWidth="150"
					label="报修区域"
					prop="userInfo.sex"
					borderBottom
					@click="showSex = true; hideKeyboard()"
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.sex"
						disabled
						placeholder="请选择报修区域"
						border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			</u-form-item>
			<u-form-item
					labelWidth="150"
					label="报修类型"
					prop="userInfo.sex"
					borderBottom
					@click="showSex = true; hideKeyboard()"
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.sex"
						disabled
						placeholder="请选择报修类型"
						border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			</u-form-item>
			<u-form-item
					labelWidth="120"
					label="联系人"
					prop=""
					
					borderBottom
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.name"
						border="none"
						placeholder="请输入联系人"
				></u--input>
			</u-form-item>
			<u-form-item
					labelWidth="150"
					label="联系电话"
					prop=""
					borderBottom
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.name"
						border="none"
						placeholder="请输入联系电话"
				></u--input>
			</u-form-item>
		</u--form>
		<u-action-sheet
				:show="showSex"
				:actions="actions"
				title="请选择报修位置"
				description=""
				@close="showSex = false"
				@select="sexSelect"
		>
		</u-action-sheet>
		<u-action-sheet
				:show="showSex"
				:actions="actions"
				title="请选择报修区域"
				description=""
				@close="showSex = false"
				@select="sexSelect"
		>
		</u-action-sheet>
		<u-action-sheet
				:show="showSex"
				:actions="actions"
				title="请选择报修类型"
				description=""
				@close="showSex = false"
				@select="sexSelect"
		>
		</u-action-sheet>
		<u-form class="description">
			<u-form-item
					labelWidth="150"
					label="故障描述"
					
					prop="userInfo.name"
					ref="item1">
			</u-form-item>
			<u--textarea v-model="value2" 
				placeholder="请输入故障描述" 
				count height="250">
			</u--textarea>
		</u-form>
		
			
		<u-form class="upload">
			<u-form-item
					labelWidth="150"
					label="上传照片"
					prop="userInfo.name"
					ref="item1">
			</u-form-item>
			<u-upload
					style="display: flex; justify-content: center; align-items: center;"
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					multiple
					uploadIconColor="#5776E6"
					:maxCount="10"
					width="200"
					height="200"
				></u-upload>
		</u-form>
		<u-button type="primary" iconColor="#5776E6" text="提交"></u-button>
	</view>
	
</template>

<script>
export default {
	data() {
		return {
			showSex: false,
			fileList1: [],
			value2:"",
			model1: {
				userInfo: {
					
				},
				
			},
			actions: [
				{
					name: '1',
				},
				{
					name: '2',
				},
				{
					name: '3',
				},
			],
			rules: {
				// 'userInfo.name': {
				// 	type: 'string',
				// 	required: true,
				// 	message: '联系人',
				// 	trigger: ['blur', 'change']
				// },
				// 'userInfo.sex': {
				// 	type: 'string',
				// 	max: 1,
				// 	required: true,
				// 	message: '请选择男或女',
				// 	trigger: ['blur', 'change']
				// },
			},
			radio: '',
			switchVal: false
		};
	},
	methods: {
		hideKeyboard(){
			console.log(111);
		},
		
		sexSelect(e) {
			
			// this.model1.userInfo.sex = e.name
			// this.$refs.uForm.validateField('userInfo.sex')
		},
		// 删除图片
					deletePic(event) {
						this[`fileList${event.name}`].splice(event.index, 1)
					},
					// 新增图片
					async afterRead(event) {
						// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
						let lists = [].concat(event.file)
						let fileListLen = this[`fileList${event.name}`].length
						lists.map((item) => {
							this[`fileList${event.name}`].push({
								...item,
								status: 'uploading',
								message: '上传中'
							})
						})
						for (let i = 0; i < lists.length; i++) {
							const result = await this.uploadFilePromise(lists[i].url)
							let item = this[`fileList${event.name}`][fileListLen]
							this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
								status: 'success',
								message: '',
								url: result
							}))
							fileListLen++
						}
					},
					uploadFilePromise(url) {
						return new Promise((resolve, reject) => {
							let a = uni.uploadFile({
								url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
								filePath: url,
								name: 'file',
								formData: {
									user: 'test'
								},
								success: (res) => {
									setTimeout(() => {
										resolve(res.data.data)
									}, 1000)
								}
							});
						})
					},
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	// this.$refs.uForm.setRules(this.rules)
    },
	onLoad() {
		
	}
};
</script>


<style lang="scss">
	
	uni-text.u-icon_icon.uicon-camera-fill{
		span{
			width: 150rpx;
			height: 150rpx;
		}
		
	}
</style>