tsg-app/pages/mypage/compents/xcrw/detail/formZdy.vue

<template>
    <view>
        <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
        <u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
            <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
                <u--input v-model="model1.userInfo.name" border="none"></u--input>
            </u-form-item>
            <u-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
                ref="item1">
                <u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
                    border="none"></u--input>
                <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
            <u-form-item label="内容" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
                ref="item1">
                <u--textarea v-model="model1.userInfo.namevalue1" placeholder="请输入内容"></u--textarea>
                <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
            <u-form-item label="内容" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
                ref="item1">
                <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                    :maxCount="10"></u-upload>
                <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
            <u-form-item label="内容" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
                ref="item1">
                <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                    :maxCount="10"></u-upload>
                <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
        </u--form>
        <u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
            @close="showSex = false" @select="sexSelect">
        </u-action-sheet>
        <button @click="submit">11</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showSex: false,
            model1: {
                userInfo: {
                    name: 'uView UI',
                    sex: '',
                },
            },
            actions: [{
                name: '男',
            },
            {
                name: '女',
            },
            {
                name: '保密',
            },
            ],
            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: {
		// 删除图片
					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,name) {
						return new Promise((resolve, reject) => {
							let a = uni.uploadFile({
								url: 'http://local.gunshiiot.com:18083/gunshiApp/tsg/maintain/service/file/upload/singleSimple', // 仅为示例，非真实的接口地址
								filePath: url,
								name: 'file',
								formData: {
									user: 'test'
								},
								success: (res) => {
									setTimeout(() => {
										// const obj = this.model1[name].find(item=>item.fileId==res.data.data.fileId)
										// if(obj){
											
										// }
										console.log(JSON.parse(res.data),this.model1,name);
										this.model1[name].push({fileId:JSON.parse(res.data).data.fileId})
										resolve(res.data.data)
									}, 1000)
								}
							});
						})
					},
        sexSelect(e) {
            this.model1.userInfo.sex = e.name
            this.$refs.uForm.validateField('userInfo.sex')
        },
        submit() {
			this.$refs.uForm.validate().then(res => {
				uni.$u.toast('校验通过')
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		}
    },
    onReady() {
        //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
        this.$refs.uForm.setRules(this.rules)
    },
};
</script>