效果图
代码
<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>