lw_test/app/mobile/view/human/institution_form.html

{extend name="public/base_human"/}
{block name="css"}
<style>
    .btn_search_item{background:#f2f6ff;display:inline-block;border-radius:5px;line-height:35px;height:35px;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;font-size:13px;width:100%;color:#666;margin-bottom:10px;}
    .btn_search_item.active{color:var(--blue);}
    .btn_search_icon{position:absolute;bottom:-3px;right:-3px;font-size:30px;}
    .contact {position: fixed;bottom:100px;right:20px;background: #29db6f;border-radius: 50%;color:white;}
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">机构报名</span>
    </template>
</van-nav-bar>
<van-form @submit="onSubmit">
    <van-cell-group>
        <van-field
                v-model="form.name"
                required
                type="text"
                label="机构名称"
                placeholder="请输入机构名称"
                :rules="[{ required: true, message: '请输入机构名称' }]"
        ></van-field>
        <van-field
                v-model="form.join"
                required
                type="text"
                label="姓名"
                placeholder="请输入参会人姓名"
                :rules="[{ required: true, message: '请输入参会人姓名' }]"
        ></van-field>
        <van-field
                v-model="form.join_mobile"
                required
                type="mobile"
                label="手机号"
                placeholder="请输入参会人手机号"
                :rules="[{ required: true, message: '请输入参会人手机号' }]"
        ></van-field>
        <van-field
                v-model="form.wechat"
                type="text"
                label="微信号"
                placeholder="请输入微信号"
        ></van-field>
        <van-field name="form.cooperate" label="业务范围">
            <template #input>
                <van-row :gutter="10">
                    <van-col span="8" v-for="(item) in cooperate_list">
                        <div :class="{btn_search_item:true,active: in_array(item,form.cooperate)}"
                             @click="selectAnimal(item)">
                            {{item}}
                            <van-icon v-if="in_array(item,form.cooperate)"
                                      class="iconfont icon-gouxuan-youxiajiaogouxuan btn_search_icon text-blue"></van-icon>
                        </div>
                    </van-col>
                </van-row>
            </template>
        </van-field>
        <van-field
                v-model="form.tel"
                type="text"
                label="联系电话"
                placeholder="请输入机构联系电话"
        ></van-field>
        <van-field
                v-model="form.address"
                type="text"
                label="机构地址"
                placeholder="请输入机构地址"
        ></van-field>
        <van-field
                v-model="form.describe"
                rows="3"
                autosize
                label="机构简介"
                type="textarea"
                placeholder="请输入机构简介"
        ></van-field>
        <!--<van-field
                v-model="form.url"
                type="text"
                label="官网"
                placeholder="请输入官网"
        ></van-field>
        <van-field label="附件（海报，名片等）">
            <template #input>
                <van-uploader v-model="fileList" :before-read="uploadImage" :before-delete="deleteImage"></van-uploader>
            </template>
        </van-field>-->
        <van-field
                v-model="form.suggestion"
                rows="3"
                autosize
                label="活动建议"
                type="textarea"
                placeholder="请输入对本次活动想说的话"
        ></van-field>
    </van-cell-group>
    <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
            提交
        </van-button>
    </div>
</van-form>
<div class="contact" @click="showQrcode">
    <van-icon name="chat-o" size="40"></van-icon>
</div>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.cooperate_list = {$cooperate_list};
        base.selectAnimal = (value) => {
            if (base.in_array(value,base.form.cooperate)) {
                base.removeByVal(base.form.cooperate,value);
            } else {
                base.form.cooperate.push(value);
            }
        }
        base.in_array = (search,array) => {
            for(let i in array){
                if(array[i] == search){
                    return true;
                }
            }
            return false;
        };
        base.removeByVal = (arrylist , val) => {
            for(let i = 0; i < arrylist .length; i++) {
                if(arrylist[i] == val) {
                    arrylist .splice(i, 1);
                    break;
                }
            }
        }

        base.form = Vue.reactive({
            images: [],
            cooperate: [],
        });
        base.onBack = () => {
            location.href = "{:url('human/index')}";
        };

        //表单提交
        base.onSubmit = () => {
            postJson('/human/institutionFormPost',base.form).then(() => {
                vant.showDialog({
                    title: '提示',
                    message: '报名成功',
                }).then(() => {
                    location.href = "{:url('human/tips')}";
                });
            });
        };

        //图片上传
        base.fileList = Vue.ref([]);
        base.uploadImage = (file) => {
            const formData = new FormData();
            formData.append("file", file);

            postFile("upload/image",formData).then(({data})=>{
                base.form.images.push(data.src);
            });

            return true;
        };
        base.deleteImage = (file,param) => {
            base.form.images.splice(param.index,1);
            return true;
        };

        base.showQrcode = () => {
            vant.showImagePreview([
                '/static/mobile/images/wechat_qrcode_institution.jpg'
            ]);
        };

        return base;
    }
</script>
{/block}