YXGJ/components/my_form2.vue

<template>
    <view>
        <view class="requiredFieldOnly-head" v-if="requiredFieldOnly">
            <view class="label">
                基本信息
            </view>
            <view class="content">
                仅显示必填信息<text style="padding: 0 2.5px;" /> <u-switch activeColor="#C40C24" v-model="unShowAll" />
            </view>
        </view>
        <slot name="head" />
        <view v-for="(item, index) in  list " :key="item.key">
            <block v-if="item.isMust || !unShowAll">
                <!-- 文本输入 -->
                <view class="input-box" v-if="item.type == 'text'"
                    :style="{ marginTop: tovw(item.marginTop || 0), opacity: item.disabled ? 0.7 : 1 }"
                    @click="focusLabel = item.label">
                    <view class="box" :style="[{'padding-bottom':item.paddingBottom ? `${tovw(item.paddingBottom)}`:''},{'margin-bottom':item.marginBottom?`${tovw(item.marginBottom)}`:''}]" :class="item.unBorBot ? '' : 'borBot'">
                        <view class="title" v-if="item.title">{{ item.title }}</view>
                        <view class="label">
                            <view class="left">
                                <text class="must" v-if="item.isMust">*</text>
                                {{ item.label }}:
                            </view>
                            <view class="right">{{ item.descript }}</view>
                        </view>
                        <view class="content-box">
                            <view class="content">
                                <input v-if="item.inputmode == 'number'" type="number" :disabled="item.disabled"
                                    placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
                                    :focus="focusLabel == item.label" :placeholder="item.placeholder || '请填写' + item.label"
                                    :value="item.value"
                                    @input="onInput($event, index)" :maxlength="item.maxlength || '499'"
                                    confirm-type="done" />
                                <input v-else-if="item.inputmode == 'digit'" type="digit" :disabled="item.disabled"
                                    placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
                                    :focus="focusLabel == item.label" :placeholder="item.placeholder || '请填写' + item.label"
                                    :value="item.value"
                                    @input="onInput($event, index)" :maxlength="item.maxlength || '499'"
                                    confirm-type="done" />
                                <textarea v-else :disabled="item.disabled"
                                    placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
                                    auto-height type="text" :focus="focusLabel == item.label"
                                    :placeholder="item.placeholder || '请填写' + item.label" :value="item.value"
                                    @input="onInput($event, index)"
                                    :maxlength="item.maxlength || '499'" confirm-type="done" />
                                <icon v-if="item.value && !item.disabled" class="icon" type="clear" size="3.733vw"
                                    @click="onClearInput(index)" />
                            </view>
                            <view v-if="item.errText" class="err-text">
                                <icon class="icon" color="#E3041F" type="clear" size="2.733vw" />
                                {{ item.errText }}
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 单选 -->
                <view class="region" v-else-if="item.type == 'radio'">
                    <view class="box" :class="item.unBorBot ? '' : 'borBot'">
                        <view class="label">
                            <text class="must" v-if="item.isMust">*</text>
                            {{ item.label }}:
                        </view>
                        <u-radio-group v-model="item.value" :placement="item.placement || 'row'"
                            @change="groupChange($event, index)">
                            <u-radio v-for="option in item.options"
                                :customStyle="{ marginRight: tovw(option.marginRight || item.marginRight || 0), marginTop: tovw(option.marginTop || item.marginTop || 0) }"
                                :key="option.label" :label="option.label" :name="option.name" />
                        </u-radio-group>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
import { formattedFiles, viewImage } from "../utils/settleFiles.js"

export default {
    name: "my_form",
    props: {
        form: {
            type: Array,
            default: []
        },
        isUncomplete: {
            type: Function
        },
        onUploading: {
            type: Function
        },
        requiredFieldOnly: {
            type: Boolean
        },
        isShowAll: {
            type: Function
        },
        interrupt: {
            type: Function
        }
    },
    data() {
        return {
            list: [],
            focusLabel: "",
            unShowAll: false,
        }
    },
    watch: {
        form: {
            handler: function (newVal) {
                if (newVal) {
                    this.list = JSON.parse(JSON.stringify(newVal));
                    setTimeout(() => {
                        this.verify()
                    }, 200);
                }
            },
            immediate: true,
        },
        unShowAll: function (newVal) {
            this.$emit("isShowAll", newVal)
        }
    },
    async created() {
    },
    methods: {
        onInput(e, index) {
            let item = this.list[index];
            item.errText = "";
            this.$set(this.list[index], 'value', e.detail.value)
            if (item.verify && item.verify.length && item.value != '') {
                let err = item.verify.find(r => !new RegExp(r.reg).test(item.value));
                if (err) this.$set(this.list[index], 'errText', err.errText)
            }
            this.verify()
        },
        setItem(index, item, back = false) {
            this.$set(this.list, index, item)
            this.verify()
            if (back) uni.navigateBack();
        },
        setValue(index, value, back = false) {
            this.$set(this.list[index], 'value', value)
            this.verify()
            if (back) uni.navigateBack();
        },
        onClearInput(index) {
            let item = this.list[index];
            item.errText = ''
            this.$set(this.list[index], 'value', '')
            this.verify()
        },
        switchChange(e, index) {
            this.$set(this.list[index], 'value', e)
            this.verify()
        },
        verify() {
            let list = this.list.filter(v => v.isMust);
            let Uncomplete = false;
            if (list.length) Uncomplete = list.some(v => {
                let res = false;
                if (v.type == 'customClass') {
                    if (v.isMultipleChoice) {
                        res = v.value.length == 0;
                    } else {
                        res = v.value == "";
                    }
                } else if (v.type == 'upload') {
                    res = v.value.length == 0;
                } else if (v.type == 'text') {
                    res = v.value == "";
                    if (v.errText) res = true;
                } else {
                    res = v.value == "";
                }
                return res
            })
            if (!Uncomplete) Uncomplete = this.list.filter(v => !v.isMust).some(v => v.errText);
            this.$emit("isUncomplete", Uncomplete)
        },
        previewImg(item) {
            viewImage(item.url)
        },
        submit() {
            return new Promise((resolve, reject) => {
                let res = {};
                this.list.forEach(v => {
                    if (v.type == 'upload') {
                        res.files = {
                            temporarys: [],
                            linksids: [],
                        }
                        try {
                            res.files.temporarys = v.temporarys || []
                        } catch (error) {

                        }
                        try {
                            res.files.linksids = v.linksids || []
                        } catch (error) {

                        }
                    } else if (v.type == 'region') {
                        if (v.value.length) {
                            res.province = v.value[0];
                            res.city = v.value[1];
                            res.county = v.value[2];
                        } else {
                            res.province = ''
                            res.city = ''
                            res.county = ''
                        }
                    } else if (v.type == 'switch') {
                        if (v.isNum) {
                            res[v.key] = v.value ? 1 : 0;
                        } else {
                            res[v.key] = v.value;
                        }
                    } else {
                        try {
                            res[v.key] = v.value.trim();
                        } catch (error) {
                            res[v.key] = v.value;
                        }
                    }
                })
                resolve(res)
            })
        }
    },
}
</script>


<style lang="scss">
.requiredFieldOnly-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100vw;
    height: 45px;
    background: #F7F7F7;
    padding: 0 10px;
    box-sizing: border-box;

    .label {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 15px;
        color: #333333;
        line-height: 22px;
    }

    .content {
        display: flex;
        align-items: center;
        font-family: PingFang SC, PingFang SC;
        font-size: 14px;
        color: #999999;
    }
}

.borBot {
    // border-bottom: 1px #DDDDDD solid;
}

.custom-class-box {
    width: 100%;
    background: #fff;
    padding: 15px 0 15px 10px;
    box-sizing: border-box;

    .head {
        width: 355px;
        height: 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .label {
            font-size: 14px;
            color: #333333;
            line-height: 20px;
        }

        .state {
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            color: #999999;
        }
    }

    .options {
        display: flex;
        flex-wrap: wrap;

        .option {
            padding: 6px 10px;
            text-align: center;
            min-width: 81px;
            font-family: PingFang SC, PingFang SC;
            font-size: 14px;
            color: #333333;
            border-radius: 5px;
            background: #F2F2F2;
            margin-top: 10px;
            margin-right: 10px;
            box-sizing: border-box;
        }

        .active {
            background: #C30D23;
            color: #fff;
        }
    }

    .content {
        .file-box {
            position: relative;
            width: 355px;
            height: 240px;
            margin-top: 10px;

            .video,
            .image {
                width: 355px;
                height: 240px;
                border-radius: 5px;
            }

            .delete {
                position: absolute;
                width: 30px;
                top: 0;
                right: 0;
                z-index: 1;
            }
        }

        .upload-box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 355px;
            height: 45px;
            background: #FFFFFF;
            border-radius: 5px;
            border: 1px dashed #C30D23;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 14px;
            color: #C30D23;
            margin-top: 10px;
        }
    }
}


.input-box {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 5px;
    .box {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 54.4px;
        box-sizing: border-box;
        border-radius: 8px;
        .title {
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            margin-top: 16px;
            position: relative;
            padding-left: 10px;
            &::before {
                content:'';
                width:4px;
                height: 16px;
                background: #C30D23;
                position: absolute;
                top: 1px;
                left: 0;
            }
        }
    }

    .label {
        width: 100%;
        margin: 14px 0 11px 0;
        line-height: 20px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #666666;
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: baseline;
        .right {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #E3041F;
        }
        .must {
            color: #E3041F;
            margin-right: 5px;
        }
    }

    .content-box {
        .content {
            flex: 1;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            position: relative;
            input,textarea {
                width: 100%;
                height: 50px !important;
                background: #F7F7F7;
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #DDDDDD;
                padding-left: 10px;
            }
            textarea {
                line-height: 50px;
            }

            .icon {
                padding: 5px;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                z-index: 3;
            }
        }

        .err-text {
            font-size: 12px;
            color: #E3041F;
            margin-bottom: -12px;

            .icon {
                margin-right: 2px;
            }
        }

    }
}

.region {
    width: 100vw;
    background: #fff;
    box-sizing: border-box;
    padding: 15px 0 0 10px;

    .box {
        display: flex;
        padding-bottom: 15px;
        padding-right: 10px;
        box-sizing: border-box;

        .label {
            width: 100px;
            margin-right: 10px;
            line-height: 20px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 14px;
            color: #666666;
            flex-shrink: 0;

            .must {
                color: #E3041F;
                margin-right: 5px;
            }
        }

        .content-box {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 20px;
            line-height: 20px;

            .placeholder {
                font-family: Source Han Sans SC, Source Han Sans SC;
                font-size: 14px;
                color: #BBBBBB;
            }


        }
    }


}
</style>