odjbin/city-store-transfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

梁航：表单与个人样式，表单验证测试

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
pages/my/my.vue
View File

@@ -12,12 +12,12 @@
</view> </view>
<view class="publish"> <view class="publish">
<u-cell-group> <u-cell-group>
<u-cell icon="setting-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="integral-fill" 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="integral-fill" 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="integral-fill" 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="integral-fill" title="成功合伙人" is-link="true" @click="topartner"></u-cell> <u-cell icon="/static/my/wo_icon_hh.png" 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_pppp.png" title="我的匹配" is-link="true" @click="topublished('我的匹配')"></u-cell>
</u-cell-group> </u-cell-group>
</view> </view>
</view> </view>

10
pages/publish/publishAddress/publishAddress.vue
View File

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

16
pages/publish/publishInvestment/publishInvestment.vue
View File

@@ -11,6 +11,9 @@
</u-form-item> </u-form-item>
<u-form-item label="区域" label-position="top" border-bottom="true" label-width="100%" right-icon="arrow-right"> <u-form-item label="区域" label-position="top" border-bottom="true" label-width="100%" right-icon="arrow-right">
<text @click="show1 = true" class="checktext">请选择所属区域</text> <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-picker mode="region" :show="show1" :closeOnClickOverlay="true" @close="show1 = false"></u-picker>
</u-form-item> </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%">
@@ -18,11 +21,16 @@
</u-form-item> </u-form-item>
<u-form-item label="行业" label-position="top" border-bottom="true" label-width="100%" class="picker"> <u-form-item label="行业" label-position="top" border-bottom="true" label-width="100%" class="picker">
<text @click="show2 = true" class="checktext">请选择行业类型</text> <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-picker mode="region" :show="show2" :closeOnClickOverlay="true" @close="show2 = false"></u-picker>
</u-form-item> </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%">
<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-picker mode="region" :show="show3" :closeOnClickOverlay="true" @close="show3 = false"></u-picker>
</u-form-item> </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%">
@@ -122,6 +130,8 @@
justify-content: space-between; justify-content: space-between;
} }
.arrow-icon{ .arrow-icon{
float: right; position: absolute;
right: 10rpx;
transform: translateY(-20rpx);
} }
</style> </style>

11
pages/publish/publishRent/publishRent.vue
View File

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

104
pages/publish/publishTransfer/publishTransfer.vue
View File

@@ -6,42 +6,50 @@
<text class="count">发布房源图片({{ShopInfomation.count}}/5)</text> <text class="count">发布房源图片({{ShopInfomation.count}}/5)</text>
</view> </view>
<u-form-item label="标题" label-position="top" border-bottom="true" > <u-form-item label="标题" label-position="top" border-bottom="true" prop="title">
<u-input v-model="form.name" placeholder="请输入标题以便吸引人的注意哦" placeholder-class="input-class" border="none"></u-input> <u-input v-model="form.title" placeholder="请输入标题以便吸引人的注意哦" placeholder-class="input-class" border="none"></u-input>
</u-form-item> </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> <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>
<u-form-item label="地址" label-position="top" border-bottom="true" > <u-form-item label="地址" label-position="top" border-bottom="true" prop="place">
<u-input v-model="form.name" placeholder="请输入店铺地址" placeholder-class="input-class" border="none"></u-input> <u-input v-model="form.place" placeholder="请输入店铺地址" placeholder-class="input-class" border="none" ></u-input>
</u-form-item> </u-form-item>
<u-form-item label="行业" label-position="top" border-bottom="true" class="picker"> <u-form-item label="行业" label-position="top" border-bottom="true" class="picker">
<text @click="show2 = true" class="checktext">请选择行业类型</text> <text @click="show2 = true" class="checktext">请选择行业类型</text>
<!-- <u-icon name="arrow-right" class="arrow-icon" size="30px"></u-icon> --> <view class="arrow-icon">
<u-picker mode="region" :show="show2" :closeOnClickOverlay="true" @close="show2 = false"></u-picker> <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>
<u-form-item label="业态" label-position="top" border-bottom="true" > <u-form-item label="业态" label-position="top" border-bottom="true">
<text @click="show3 = true" class="checktext">请输入行业业态</text> <text @click="show3 = true" class="checktext">请选择行业业态</text>
<u-picker mode="region" :show="show3" :closeOnClickOverlay="true" @close="show3 = false"></u-picker> <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>
<u-form-item label="面积" label-position="top" border-bottom="true" > <u-form-item label="面积" label-position="top" border-bottom="true" prop="size">
<u-input v-model="form.name" placeholder="请输入店铺面积" placeholder-class="input-class" border="none"></u-input> <u-input v-model="form.size" placeholder="请输入店铺面积" placeholder-class="input-class" border="none"></u-input>
</u-form-item> </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="rent">
<u-input v-model="form.name" placeholder="请输入店铺租金" placeholder-class="input-class" border="none"></u-input> <u-input v-model="form.rent" placeholder="请输入店铺租金" placeholder-class="input-class" border="none"></u-input>
</u-form-item> </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="sell">
<u-input v-model="form.name" placeholder="请输入店铺转让费" placeholder-class="input-class" border="none"></u-input> <u-input v-model="form.sell" placeholder="请输入店铺转让费" placeholder-class="input-class" border="none"></u-input>
</u-form-item> </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-input v-model="form.name" placeholder="请输入联系人姓名" placeholder-class="input-class" border="none"></u-input>
</u-form-item> </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="call">
<u-input v-model="form.name" placeholder="请输入联系人手机号码" placeholder-class="input-class" border="none"></u-input> <u-input v-model="form.call" placeholder="请输入联系人手机号码" placeholder-class="input-class" border="none"></u-input>
</u-form-item> </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="introduce">
<u-input v-model="form.name" placeholder="请输入介绍详情" placeholder-class="input-class" border="none"></u-input> <u-input v-model="form.introduce" placeholder="请输入介绍详情" placeholder-class="input-class" border="none"></u-input>
</u-form-item> </u-form-item>
</u-form> </u-form>
<view class="bug-figure"></view> <view class="bug-figure"></view>
@@ -62,13 +70,39 @@
}, },
form:{ form:{
title:'' title:'',
region:'',
place:'',
trade:'',
karma:'',
size:'',
rent:'',
sell:'',
name:'',
call:'',
introduce:''
}, },
columns:[ columns:[
], ],
show1:false, show1:false,
show2:false, show2:false,
show3: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.ShopInfomation.area = e.value[1]
this.show1 = false this.show1 = false
}, },
submit(){ submit() {
console.log('提交'); 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> </script>
@@ -130,6 +176,8 @@
justify-content: space-between; justify-content: space-between;
} }
.arrow-icon{ .arrow-icon{
float: right; position: absolute;
right: 10rpx;
transform: translateY(-20rpx);
} }
</style> </style>

BIN
static/my/wo_icon_cc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 672 B

BIN
static/my/wo_icon_hh.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 699 B

BIN
static/my/wo_icon_pppp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 747 B

BIN
static/my/wo_icon_xz.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 609 B

BIN
static/my/wo_icon_zr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 593 B

BIN
static/my/wo_icon_zs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 841 B