梁航:表单与个人样式,表单验证测试

This commit is contained in:
hot777zz
2023-11-13 23:43:03 +08:00
parent 4c9e08509d
commit 13d7ba738b
11 changed files with 113 additions and 40 deletions

View File

@@ -12,12 +12,12 @@
</view>
<view class="publish">
<u-cell-group>
<u-cell icon="setting-fill" title="发布的店铺转让" is-link="true" @click="topublished('发布的店铺转让')"></u-cell>
<u-cell icon="integral-fill" title="发布的找店选址" is-link="true" @click="topublished('发布的找店选址')"></u-cell>
<u-cell icon="integral-fill" title="发布的店铺出租" is-link="true" @click="topublished('发布的店铺出租')"></u-cell>
<u-cell icon="integral-fill" title="发布的项目招商" is-link="true" @click="topublished('发布的项目招商')"></u-cell>
<u-cell icon="integral-fill" title="成功合伙人" is-link="true" @click="topartner"></u-cell>
<u-cell icon="integral-fill" title="我的匹配" is-link="true" @click="topublished('我的匹配')"></u-cell>
<u-cell icon="/static/my/wo_icon_zr.png" title="发布的店铺转让" is-link="true" @click="topublished('发布的店铺转让')"></u-cell>
<u-cell icon="/static/my/wo_icon_xz.png" title="发布的找店选址" is-link="true" @click="topublished('发布的找店选址')"></u-cell>
<u-cell icon="/static/my/wo_icon_cc.png" title="发布的店铺出租" is-link="true" @click="topublished('发布的店铺出租')"></u-cell>
<u-cell icon="/static/my/wo_icon_zs.png" title="发布的项目招商" is-link="true" @click="topublished('发布的项目招商')"></u-cell>
<u-cell icon="/static/my/wo_icon_hh.png" title="成功合伙人" is-link="true" @click="topartner"></u-cell>
<u-cell icon="/static/my/wo_icon_pppp.png" title="我的匹配" is-link="true" @click="topublished('我的匹配')"></u-cell>
</u-cell-group>
</view>
</view>

View File

@@ -6,10 +6,16 @@
</u-form-item>
<u-form-item label="区域" label-position="top" border-bottom="true" label-width="100%" right-icon="arrow-right">
<text @click="show1 = true" class="checktext">请选择所属区域</text>
<view class="arrow-icon">
<u-icon name="arrow-right" size="30px"></u-icon>
</view>
<u-picker mode="region" :show="show1" :closeOnClickOverlay="true" @close="show1 = false"></u-picker>
</u-form-item>
<u-form-item label="业态" label-position="top" border-bottom="true" label-width="100%">
<text @click="show3 = true" class="checktext">请选择行业业态</text>
<view class="arrow-icon">
<u-icon name="arrow-right" size="30px"></u-icon>
</view>
<u-picker mode="region" :show="show3" :closeOnClickOverlay="true" @close="show3 = false"></u-picker>
</u-form-item>
<u-form-item label="面积" label-position="top" border-bottom="true" label-width="100%">
@@ -118,6 +124,8 @@
justify-content: space-between;
}
.arrow-icon{
float: right;
position: absolute;
right: 10rpx;
transform: translateY(-20rpx);
}
</style>

View File

@@ -11,6 +11,9 @@
</u-form-item>
<u-form-item label="区域" label-position="top" border-bottom="true" label-width="100%" right-icon="arrow-right">
<text @click="show1 = true" class="checktext">请选择所属区域</text>
<view class="arrow-icon">
<u-icon name="arrow-right" size="30px"></u-icon>
</view>
<u-picker mode="region" :show="show1" :closeOnClickOverlay="true" @close="show1 = false"></u-picker>
</u-form-item>
<u-form-item label="项目地址" label-position="top" border-bottom="true" label-width="100%">
@@ -18,11 +21,16 @@
</u-form-item>
<u-form-item label="行业" label-position="top" border-bottom="true" label-width="100%" class="picker">
<text @click="show2 = true" class="checktext">请选择行业类型</text>
<!-- <u-icon name="arrow-right" class="arrow-icon" size="30px"></u-icon> -->
<view class="arrow-icon">
<u-icon name="arrow-right" size="30px"></u-icon>
</view>
<u-picker mode="region" :show="show2" :closeOnClickOverlay="true" @close="show2 = false"></u-picker>
</u-form-item>
<u-form-item label="业态" label-position="top" border-bottom="true" label-width="100%">
<text @click="show3 = true" class="checktext">输入行业业态</text>
<text @click="show3 = true" class="checktext">选择行业业态</text>
<view class="arrow-icon">
<u-icon name="arrow-right" size="30px"></u-icon>
</view>
<u-picker mode="region" :show="show3" :closeOnClickOverlay="true" @close="show3 = false"></u-picker>
</u-form-item>
<u-form-item label="详情介绍" label-position="top" border-bottom="true" label-width="100%">
@@ -122,6 +130,8 @@
justify-content: space-between;
}
.arrow-icon{
float: right;
position: absolute;
right: 10rpx;
transform: translateY(-20rpx);
}
</style>

View File

@@ -11,6 +11,9 @@
</u-form-item>
<u-form-item label="区域" label-position="top" border-bottom="true" right-icon="arrow-right">
<text @click="show1 = true" class="checktext">请选择所属区域</text>
<view class="arrow-icon">
<u-icon name="arrow-right" size="30px"></u-icon>
</view>
<u-picker mode="region" :show="show1" :closeOnClickOverlay="true" @close="show1 = false"></u-picker>
</u-form-item>
<u-form-item label="地址" label-position="top" border-bottom="true" >
@@ -18,7 +21,9 @@
</u-form-item>
<u-form-item label="适合行业" label-position="top" border-bottom="true" class="picker" label-width="100%">
<text @click="show2 = true" class="checktext">请选择行业类型</text>
<!-- <u-icon name="arrow-right" class="arrow-icon" size="30px"></u-icon> -->
<view class="arrow-icon">
<u-icon name="arrow-right" size="30px"></u-icon>
</view>
<u-picker mode="region" :show="show2" :closeOnClickOverlay="true" @close="show2 = false"></u-picker>
</u-form-item>
<u-form-item label="面积" label-position="top" border-bottom="true" >
@@ -123,6 +128,8 @@
justify-content: space-between;
}
.arrow-icon{
float: right;
position: absolute;
right: 10rpx;
transform: translateY(-20rpx);
}
</style>

View File

@@ -6,42 +6,50 @@
<text class="count">发布房源图片({{ShopInfomation.count}}/5)</text>
</view>
<u-form-item label="标题" label-position="top" border-bottom="true" >
<u-input v-model="form.name" placeholder="请输入标题以便吸引人的注意哦" placeholder-class="input-class" border="none"></u-input>
<u-form-item label="标题" label-position="top" border-bottom="true" prop="title">
<u-input v-model="form.title" placeholder="请输入标题以便吸引人的注意哦" placeholder-class="input-class" border="none"></u-input>
</u-form-item>
<u-form-item label="区域" label-position="top" border-bottom="true" right-icon="arrow-right">
<u-form-item label="区域" label-position="top" border-bottom="true" right-icon="arrow-right" prop="region">
<text @click="show1 = true" class="checktext">请选择所属区域</text>
<u-picker mode="region" :show="show1" :closeOnClickOverlay="true" @close="show1 = false"></u-picker>
<view class="arrow-icon">
<u-icon name="arrow-right" size="30px"></u-icon>
</view>
<u-picker mode="region" :show="show1" :closeOnClickOverlay="true" @close="show1 = false" v-model="form.region"></u-picker>
</u-form-item>
<u-form-item label="地址" label-position="top" border-bottom="true" >
<u-input v-model="form.name" placeholder="请输入店铺地址" placeholder-class="input-class" border="none"></u-input>
<u-form-item label="地址" label-position="top" border-bottom="true" prop="place">
<u-input v-model="form.place" placeholder="请输入店铺地址" placeholder-class="input-class" border="none" ></u-input>
</u-form-item>
<u-form-item label="行业" label-position="top" border-bottom="true" class="picker">
<text @click="show2 = true" class="checktext">请选择行业类型</text>
<!-- <u-icon name="arrow-right" class="arrow-icon" size="30px"></u-icon> -->
<u-picker mode="region" :show="show2" :closeOnClickOverlay="true" @close="show2 = false"></u-picker>
<view class="arrow-icon">
<u-icon name="arrow-right" size="30px"></u-icon>
</view>
<u-picker mode="region" :show="show2" :closeOnClickOverlay="true" @close="show2 = false" v-model="form.trade"></u-picker>
</u-form-item>
<u-form-item label="业态" label-position="top" border-bottom="true" >
<text @click="show3 = true" class="checktext">输入行业业态</text>
<u-picker mode="region" :show="show3" :closeOnClickOverlay="true" @close="show3 = false"></u-picker>
<u-form-item label="业态" label-position="top" border-bottom="true">
<text @click="show3 = true" class="checktext">选择行业业态</text>
<view class="arrow-icon">
<u-icon name="arrow-right" size="30px"></u-icon>
</view>
<u-picker mode="region" :show="show3" :closeOnClickOverlay="true" @close="show3 = false" v-model="form.karma"></u-picker>
</u-form-item>
<u-form-item label="面积" label-position="top" border-bottom="true" >
<u-input v-model="form.name" placeholder="请输入店铺面积" placeholder-class="input-class" border="none"></u-input>
<u-form-item label="面积" label-position="top" border-bottom="true" prop="size">
<u-input v-model="form.size" placeholder="请输入店铺面积" placeholder-class="input-class" border="none"></u-input>
</u-form-item>
<u-form-item label="租金(元/月)" label-position="top" border-bottom="true" label-width="100%">
<u-input v-model="form.name" placeholder="请输入店铺租金" placeholder-class="input-class" border="none"></u-input>
<u-form-item label="租金(元/月)" label-position="top" border-bottom="true" label-width="100%" prop="rent">
<u-input v-model="form.rent" placeholder="请输入店铺租金" placeholder-class="input-class" border="none"></u-input>
</u-form-item>
<u-form-item label="转让费(万元)" label-position="top" border-bottom="true" label-width="100%">
<u-input v-model="form.name" placeholder="请输入店铺转让费" placeholder-class="input-class" border="none"></u-input>
<u-form-item label="转让费(万元)" label-position="top" border-bottom="true" label-width="100%" prop="sell">
<u-input v-model="form.sell" placeholder="请输入店铺转让费" placeholder-class="input-class" border="none"></u-input>
</u-form-item>
<u-form-item label="联系人" label-position="top" border-bottom="true" label-width="100%">
<u-form-item label="联系人" label-position="top" border-bottom="true" label-width="100%" prop="name">
<u-input v-model="form.name" placeholder="请输入联系人姓名" placeholder-class="input-class" border="none"></u-input>
</u-form-item>
<u-form-item label="手机号码" label-position="top" border-bottom="true" label-width="100%">
<u-input v-model="form.name" placeholder="请输入联系人手机号码" placeholder-class="input-class" border="none"></u-input>
<u-form-item label="手机号码" label-position="top" border-bottom="true" label-width="100%" prop="call">
<u-input v-model="form.call" placeholder="请输入联系人手机号码" placeholder-class="input-class" border="none"></u-input>
</u-form-item>
<u-form-item label="详情介绍" label-position="top" border-bottom="true" label-width="100%">
<u-input v-model="form.name" placeholder="请输入介绍详情" placeholder-class="input-class" border="none"></u-input>
<u-form-item label="详情介绍" label-position="top" border-bottom="true" label-width="100%" prop="introduce">
<u-input v-model="form.introduce" placeholder="请输入介绍详情" placeholder-class="input-class" border="none"></u-input>
</u-form-item>
</u-form>
<view class="bug-figure"></view>
@@ -62,13 +70,39 @@
},
form:{
title:''
title:'',
region:'',
place:'',
trade:'',
karma:'',
size:'',
rent:'',
sell:'',
name:'',
call:'',
introduce:''
},
columns:[
],
show1:false,
show2:false,
show3:false,
rules:{
'title':[{
type:'string',
require:true,
message:'请输入姓名',
trigger: ['change','blur']
}],
'place':[{
type:'string',
require:true,
message:'请输入地址',
trigger:['change','blur']
}],
},
}
},
@@ -78,10 +112,22 @@
this.ShopInfomation.area = e.value[1]
this.show1 = false
},
submit(){
console.log('提交');
}
submit() {
this.$refs.uForm.validate().then(res => {
console.log("提交表单信息:" + JSON.stringify(this.form))
uni.$u.toast('发布成功')
// 调用服务端入表接口W
}).catch(errors => {
console.log("失败信息:" + JSON.stringify(errors))
// uni.$u.toast('校验失败')
})
}
},
onReady() {
this.$refs.uForm.setRules(this.rules)
},
}
</script>
@@ -130,6 +176,8 @@
justify-content: space-between;
}
.arrow-icon{
float: right;
position: absolute;
right: 10rpx;
transform: translateY(-20rpx);
}
</style>

BIN
static/my/wo_icon_cc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 672 B

BIN
static/my/wo_icon_hh.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 699 B

BIN
static/my/wo_icon_pppp.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 747 B

BIN
static/my/wo_icon_xz.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 609 B

BIN
static/my/wo_icon_zr.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 593 B

BIN
static/my/wo_icon_zs.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 841 B