用uniapp做的一个简单提交表单

效果图

代码

<template>
    <view class="main">
          <view class="container_nav">
            <text @click="navTag(1)" :class="{ 'item_nav': true, 'active_nav': activeNav === 1 }">我要出售</text>
            <text @click="navTag(2)" :class="{ 'item_nav': true, 'active_nav': activeNav === 2 }">我要出租</text>
          </view>
        <form  @submit="submitForm" method="post">
            <view class="supply">
                <view class="row">
                    <view class="r-title">手机号:</view>
                    <view class="r_box">
                        <uni-easyinput class="border" type="text" v-model="formData.phone" placeholder="请输入您的手机号" />
                    </view>
                </view>
                <view class="row">
                    <view class="r-title">昵称:</view>
                    <view class="r_box">
                        <uni-easyinput class="border" type="text" v-model="formData.userName" placeholder="请输入您的昵称" />
                    </view>
                </view>
                <view class="row">
                    <view class="r-title">性别:</view>
                    <view class="r_box">
                        <uni-data-checkbox selectedColor="#14af68" v-model="formData.gender" :localdata="gender" />
                    </view>
                </view>

                <view class="row" style="height: 70px;">
                    <view class="r-title">房产类型:</view>
                    <view class="r_box">
                        <uni-data-checkbox selectedColor="#14af68" multiple v-model="formData.houseType"
                            :localdata="houseTypes">
                        </uni-data-checkbox>
                    </view>
                </view>

                <view class="row">
                    <view class="r-title">小区名称:</view>
                    <view class="r_box">
                        <uni-easyinput class="border" type="text" v-model="formData.estateName" placeholder="请输入小区名称" />
                    </view>
                </view>

                <view class="row">
                    <view class="r-title">地址:</view>
                    <view class="r_box">
                        <view class="input-row">
                            <uni-easyinput class="border"  type="text" v-model="formData.buildingNum" placeholder="楼栋号" />
                            <uni-easyinput class="border" type="text" v-model="formData.unitNum" placeholder="单元号" />
                            <uni-easyinput class="border" type="text" v-model="formData.roomNum" placeholder="房间号" />
                        </view>

                    </view>
                </view>
                <view class="row">
                    <view v-if="activeNav==1" class="r-title">期望售价:</view>
                    <view v-if="activeNav==2" class="r-title">期望租金:</view>
                    <view class="r_box"  v-if="activeNav==1" >
                        <uni-easyinput class="border" type="text" v-model="formData.price" placeholder="输入期望的售价(万)" />
                    </view>
                    <view class="r_box"  v-if="activeNav==2" >
                        <uni-easyinput class="border" type="text" v-model="formData.price" placeholder="输入期望的租金(元/月)" />
                    </view>
                </view>
            
            </view>
            <view class="row">
                <button type="primary" form-type="submit"  class="input_but">提交委托</button>
            </view>
        </form>
    </view>
</template>


<script>
    import {supply} from "@/api/api.js"
    import {
        ref
    } from "vue";
    export default {
        data() {
            return {
                activeNav: 1,
                formData: {
                    phone: '',
                    userName: '',
                    gender: 1,
                    houseType: [0],
                    estateName: '',
                    buildingNum: '',
                    unitNum: '',
                    roomNum: '',
                    price: '',
                    type:1,
                    city:uni.getStorageSync('city')
                },
                houseTypes: [{
                        text: '住宅',
                        value: 6,

                    },
                    {
                        text: '别墅',
                        value: 7,

                    },
                    {
                        text: '商铺',
                        value: 8,

                    },
                    {
                        text: '写字楼',
                        value: 9,

                    },
                    {
                        text: '公寓',
                        value: 10,

                    },
                    {
                        text: '底商',
                        value: 11,

                    }
                ],
                gender: [{
                        text: '男士',
                        value: 1,

                    },
                    {
                        text: '女士',
                        value: 2,

                    }
                ],
            };
        },
        methods: {
            submitForm() {
                if(!this.formData.phone){
                    uni.showToast({
                        title: '手机号码必填',
                        icon:'none'
                    });
                    return false
                }
                if(!this.formData.userName){
                    uni.showToast({
                        title: '昵称必填',
                        icon:'none'
                    });
                    return false
                }                    

                let  house_type = this.formData.houseType.join(',');

                let param = {
                    phone:this.formData.phone,
                    user_name:this.formData.userName,
                    type     : this.formData.type,
                    estate_name:this.formData.estateName,
                    sex:this.formData.gender,
                    price:this.formData.price,
                    house_type:house_type,
                    city:uni.getStorageSync('city'),
                    address:this.formData.buildingNum+'_'+this.formData.unitNum+'_'+this.formData.roomNum
                }
    
                supply(param).then(res => {
                    if(res.code==200){
                        uni.showToast({
                            title: res.msg
                        });
                    }else{
                        uni.showToast({
                            title: res.msg
                        });
                    }
                })
            },
            navTag(tag) {
              this.activeNav = tag;
              this.formData.type = tag
            }
        }
    };
</script>

<style>
    .main {
        padding: 15px;
        font-size: 14px;
    }
    .container_nav {
      display: flex;
      height: 45px;
      line-height: 45px;
      background-color: #666666;
    }
    .active_nav{
              background-color: #14af68;
    }

    .item_nav{
      flex: 1;
      text-align: center;
      color: white;
    }
    .row {
        display: block;
        align-items: center;
        height: 35px;
        line-height: 35px;
        clear: both;
        margin-top: 10px;
    }

    .r-title {
        display: inline-block;
        width: 30%;
        /* 占据 30% 宽度 */
    }

    .r_box {
        display: inline-block;
        width: 70%;
    }
    .r_box1 .border{width: 30%;display: inline-block;}
    .r_input {
        width: 70%;
        border: 1px silver solid;
        padding: 5px;
        font-size: 12px;
        height: 35px;
        line-height: 35px;
    }

    .border {
        border: 1px solid #14af68
    }
    .input-row {
      display: flex;
      justify-content: space-between; /* 在父容器内均匀分布子元素 */
    }
    
    .input-row uni-easyinput {
      border: 1px solid #14af68;
      flex: 1; /* 子元素占据相等的宽度 */
      margin-right: 10px; /* 可选：添加间距 */
    }
    button[type=primary],.input_but{background-color: #14af68;color: #fff;}
</style>