u-view 表单模板

66D2049F-F2C4-43de-8802-427B1CDAD0AB.png

<template>
    <view class="u-page">
        <!-- <u-navbar title="表单" @leftClick="navigateBack" safeAreaInsetTop fixed placeholder></u-navbar> -->
        <view class="u-demo-block" style="width: 100%;padding: 15px;box-sizing: border-box;">
            <text class="u-demo-block__title">基础使用</text>
            <view class="u-demo-block__content">
                <u--form labelPosition="left" :model="form1" :rules="rules" ref="form1">
                    <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                        :maxCount="10"></u-upload>
                    <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
                        <u--input v-model="form1.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="form1.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="radiovalue1" borderBottom ref="item2">
                        <u-radio-group v-model="form1.radiovalue1">
                            <u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in radiolist1"
                                :key="index" :label="item.name" :name="item.name">
                            </u-radio>
                        </u-radio-group>
                    </u-form-item>
                    <u-form-item label="兴趣爱好" prop="checkboxValue1" borderBottom labelWidth="80" ref="item3">
                        <u-checkbox-group v-model="form1.checkboxValue1" shape="square" @change="change">
                            <u-checkbox :customStyle="{marginRight: '16px'}" v-for="(item, index) in checkboxList1"
                                :key="index" :label="item.name" :name="item.name">
                            </u-checkbox>
                        </u-checkbox-group>
                    </u-form-item>
                    <u-form-item label="简介" prop="intro" borderBottom ref="item3">
                        <u--textarea placeholder="不低于3个字" v-model="form1.intro" count></u--textarea>
                    </u-form-item>
                    <u-form-item label="住店时间" prop="hotel" labelWidth="80" borderBottom
                        @click="showCalendar = true; hideKeyboard()">
                        <u--input v-model="form1.hotel" 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="code" labelWidth="80" borderBottom>
                        <u--input v-model="form1.code" border="none" placeholder="请填写验证码"></u--input>
                        <u-button slot="right" @tap="getCode" :text="tips" type="success" size="mini"
                            :disabled="disabled1"></u-button>
                    </u-form-item>
                    <u-form-item label="生日" prop="userInfo.birthday" borderBottom
                        @click="showBirthday = true; hideKeyboard()" ref="item1">
                        <u--input v-model="form1.userInfo.birthday" disabled disabledColor="#ffffff"
                            placeholder="请选择生日" border="none"></u--input>
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </u-form-item>
                </u--form>
                <u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
                <u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
                    @close="showSex = false" @select="sexSelect">
                </u-action-sheet>
                <u-calendar :show="showCalendar" mode="range" @confirm="calendarConfirm" @close="calendarClose"
                    startText="住店" endText="离店" confirmDisabledText="请选择离店日期" :formatter="formatter"></u-calendar>
                <u-code ref="uCode" @change="codeChange" seconds="20" @start="disabled1 = true"
                    @end="disabled1 = false"></u-code>
                <u-datetime-picker :show="showBirthday" :value="birthday" mode="date" closeOnClickOverly
                    @confirm="birthdayConfirm" @cancel="birthdayClose" @close="birthdayClose"></u-datetime-picker>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                fileList1: [{url:"blob:http://localhost:8072/db4a0df0-fdfd-488b-8ee9-1f4ab1fab261"}],
                disabled1: false,
                tips: '',
                value: '',
                showCalendar: false,
                showBirthday: false,
                form1: {
                    userInfo: {
                        name: 'uView UI',
                        sex: '',
                        birthday: ''
                    },
                    radiovalue1: '苹果',
                    checkboxValue1: [],
                    intro: '',
                    code: ''
                },
                showSex: false,
                birthday: Number(new Date()),
                actions: [{
                        name: '男',
                    },
                    {
                        name: '女',
                    },
                    {
                        name: '保密',
                    },
                ],
                rules: {
                    'userInfo.name': {
                        type: 'string',
                        required: true,
                        message: '请填写姓名',
                        trigger: ['blur', 'change']
                    },
                    code: {
                        type: 'string',
                        required: true,
                        len: 4,
                        message: '请填写4位验证码',
                        trigger: ['blur']
                    },
                    'userInfo.sex': {
                        type: 'string',
                        max: 1,
                        required: true,
                        message: '请选择男或女',
                        trigger: ['blur', 'change']
                    },
                    radiovalue1: {
                        type: 'string',
                        min: 1,
                        max: 2,
                        message: '橙子有毒',
                        trigger: ['change']
                    },
                    checkboxValue1: {
                        type: 'array',
                        min: 2,
                        required: true,
                        message: '不能太宅，至少选两项',
                        trigger: ['change']
                    },
                    intro: {
                        type: 'string',
                        min: 3,
                        required: true,
                        message: '不低于3个字',
                        trigger: ['change']
                    },
                    hotel: {
                        type: 'string',
                        min: 2,
                        required: true,
                        message: '请选择住店时间',
                        trigger: ['change']
                    },
                    'userInfo.birthday': {
                        type: 'string',
                        required: true,
                        message: '请选择生日',
                        trigger: ['change']
                    },
                },
                radiolist1: [{
                        name: '苹果',
                        disabled: false
                    },
                    {
                        name: '香蕉',
                        disabled: false
                    }
                ],
                checkboxList1: [{
                        name: '羽毛球',
                        disabled: false
                    },
                    {
                        name: '跑步',
                        disabled: false
                    }
                ]
            }
        },
        onLoad() {

        },
        methods: {
            groupChange(n) {
                // console.log('groupChange', n);
            },
            radioChange(n) {
                // console.log('radioChange', n);
            },
            navigateBack() {
                uni.navigateBack()
            },
            sexSelect(e) {
                this.form1.userInfo.sex = e.name
                this.$refs.form1.validateField('userInfo.sex')
            },
            change(e) {
                // console.log(e);
            },
            formatter(day) {
                const d = new Date()
                let month = d.getMonth() + 1
                const date = d.getDate()
                if (day.month == month && day.day == date + 3) {
                    day.bottomInfo = '有优惠'
                    day.dot = true
                }
                return day
            },
            calendarConfirm(e) {
                this.showCalendar = false
                this.form1.hotel = `${e[0]} / ${e[e.length - 1]}`
                console.log(e)
                // this.
                // this.$refs.form1.validateField('hotel')
            },
            codeChange(text) {
                this.tips = text;
            },
            getCode() {
                if (this.$refs.uCode.canGetCode) {
                    // 模拟向后端请求验证码
                    uni.showLoading({
                        title: '正在获取验证码'
                    })
                    setTimeout(() => {
                        uni.hideLoading();
                        // 这里此提示会被this.start()方法中的提示覆盖
                        uni.$u.toast('验证码已发送');
                        // 通知验证码组件内部开始倒计时
                        this.$refs.uCode.start();
                    }, 2000);
                } else {
                    uni.$u.toast('倒计时结束后再发送');
                }
            },
            calendarClose() {
                this.showCalendar = false
                this.$refs.form1.validateField('hotel')
            },
            birthdayClose() {
                this.showBirthday = false
                this.$refs.form1.validateField('userInfo.birthday')
            },
            birthdayConfirm(e) {
                this.showBirthday = false
                this.form1.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
                this.$refs.form1.validateField('userInfo.birthday')
            },
            submit() {
                var files= this.fileList1
                var  images=""
                files.map(e=>{
                    if(e.status!="uploading"){
                        images=images+e.url+","
                    }
                    
                })
                this.form1.images=images
                console.log(files)
                console.log(this.form1)
                // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
                this.$refs.form1.validate().then(res => {
                    uni.$u.toast('校验通过')
                }).catch(errors => {
                    uni.$u.toast('校验失败')
                })
            },
            hideKeyboard() {
                uni.hideKeyboard()
            }, // 删除图片
            deletePic(event) {
                this[`fileList${event.name}`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 mutiple 为 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)
                    // console.log(result)
                    if(result==1){
                        this.deletePic(event)
                    }else{
                        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)
                        },fail:(err)=>{
                            console.log(err)
                            // 返回1失败
                            // resolve(1)
                            // 测试返回图片链接
                            resolve(url)
                        }
                    });
                })
            }

        }
    }
</script>

<style lang="scss">

</style>