needsPublish.vue
3.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
<view class="main">
<view class="top" style="justify-content: space-between;margin: 40rpx 0;">
<p class="title">发布<text style="color: #3375D8;">出租</text></p>
<!-- view class="" style="width: 128rpx;">
<u-button @click="goPub" text="发布" size="small" type="primary"></u-button>
</view> -->
</view>
<view class="" style="padding: 0 24rpx;background-color: white;border-radius: 16rpx;">
<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
<u-form-item label="设备信息" labelWidth="200rpx" prop="userInfo.name" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" placeholder="请选择设备/品牌/型号" border="none"></u--input>
</u-form-item>
<u-form-item label="设备品牌" labelWidth="200rpx" prop="userInfo.sex" borderBottom @click="showSex = true;" ref="item1">
<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择"
border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="设备型号" labelWidth="200rpx" prop="userInfo.sex" borderBottom @click="showSex = true;" ref="item1">
<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择"
border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="所在地区" labelWidth="200rpx" prop="userInfo.name" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" border="none"></u--input>
</u-form-item>
<u-form-item label="租赁时间" labelWidth="200rpx" prop="userInfo.name" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" border="none"></u--input>
</u-form-item>
<u-form-item label="设备预算" labelWidth="200rpx" prop="userInfo.name" labelPosition="top" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" border="none"></u--input>
</u-form-item>
</u--form>
<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
@close="showSex = false" @select="sexSelect">
</u-action-sheet>
</view>
</view>
</template>
<script>
export default {
data() {
return {
model1: {
showSex: false,
userInfo: {
name: '',
sex: '',
},
},
fileList1: [],
actions: [{
name: '男',
},
{
name: '女',
},
{
name: '保密',
},
],
rules: {
'userInfo.name': {
type: 'string',
required: true,
message: '请填写姓名',
trigger: ['blur', 'change']
},
'userInfo.sex': {
type: 'string',
max: 1,
required: true,
message: '请选择男或女',
trigger: ['blur', 'change']
},
},
}
},
methods: {
goPub(){
}
},
onReady() {
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
this.$refs.uForm.setRules(this.rules)
},
}
</script>
<style scoped>
.main{
padding: 32rpx 24rpx;
background: #f7f8faff;
height: calc(100vh - 88rpx);
}
.top{
display: flex;
align-items: center;
}
.title{
color: #000000e6;
font-size: 56rpx;
font-weight: 600;
}
.box{
display: flex;
flex-direction: column;
align-items: center;
margin-right: 18rpx;
}
</style>