Skip to content

Commit 4ca43c3

Browse files
wlxuquwlxuqu
committed
完成表单开发
1 parent a7403cc commit 4ca43c3

File tree

112 files changed

+1344
-250
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+1344
-250
lines changed

‎common/classify.data.js

Lines changed: 169 additions & 169 deletions
Large diffs are not rendered by default.

‎pages/componentsA/calendar/index.vue

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<view class="u-demo">
3+
<view class="u-demo-wrap" style="background-color: #FFFFFF;">
4+
<view class="u-demo-title">演示效果</view>
5+
<view class="u-demo-area">
6+
<u-calendar isFixed :minDate="minDate" :maxDate="maxDate" :btnType="btnType" :activeBgColor="activeBgColor"
7+
:rangeBgColor="rangeBgColor" :rangeColor="rangeColor" :startText="startText" :endText="endText" :arrowType="arrowType"
8+
:type="type" ref="calendar" @change="change"></-calendar>
9+
</view>
10+
</view>
11+
<view class="u-config-wrap">
12+
<view class="u-config-title u-border-bottom">
13+
参数配置
14+
</view>
15+
<view class="u-config-item">
16+
<view class="u-item-title">右侧按钮</view>
17+
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="showBtnChange"></u-subsection>
18+
</view>
19+
<view class="u-config-item">
20+
<view class="u-item-title">显示错误信息</view>
21+
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="errorMessageChange"></u-subsection>
22+
</view>
23+
<view class="u-config-item">
24+
<view class="u-item-title">是否必填</view>
25+
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="requiredChange"></u-subsection>
26+
</view>
27+
<view class="u-config-item">
28+
<view class="u-item-title">显示左图标和右箭头</view>
29+
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="customChange"></u-subsection>
30+
</view>
31+
<view class="u-config-item">
32+
<view class="u-item-title">第一个输入框为textarea类型</view>
33+
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="textareaChange"></u-subsection>
34+
</view>
35+
</view>
36+
</view>
37+
</template>
38+
39+
<script>
40+
export default {
41+
data() {
42+
return {
43+
type: 1,
44+
status: [],
45+
arrowType: 1,
46+
minDate: "1920-01-01",
47+
maxDate: "",
48+
btnType: "primary",
49+
activeBgColor: "#5677fc",
50+
rangeBgColor: "rgba(86,119,252,0.1)",
51+
rangeColor: "#5677fc",
52+
startText: "开始",
53+
endText: "结束",
54+
result: ""
55+
}
56+
},
57+
methods: {
58+
showBtnChange(index) {
59+
this.showBtn = index == 0 ? true : false;
60+
},
61+
errorMessageChange(index) {
62+
this.errorMessage = index == 0 ? '手机号有误' : false
63+
},
64+
requiredChange(index) {
65+
this.required = index == 0 ? true : false;
66+
},
67+
customChange(index) {
68+
if(index == 0) {
69+
this.icon1 = 'map';
70+
this.icon2 = 'photo';
71+
this.arrow = true;
72+
} else {
73+
this.icon1 = '';
74+
this.icon2 = '';
75+
this.arrow = false;
76+
}
77+
},
78+
textareaChange(index) {
79+
this.type = index == 0 ? 'textarea' : 'text';
80+
}
81+
}
82+
}
83+
</script>
84+
85+
<style lang="scss" scoped>
86+
.u-demo {
87+
88+
}
89+
</style>

‎pages/componentsA/form/index.vue

Lines changed: 161 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,44 @@
11
<template>
22
<view class="wrap">
33
<u-form :model="model" :rules="rules" ref="uForm">
4-
<u-form-item label="姓名" prop="name">
4+
<u-form-item left-icon="map" label-width="120" :label-position="labelPosition" label="姓名" prop="name">
55
<u-input :border="border" placeholder="请输入姓名" v-model="model.name" type="text"></u-input>
66
</u-form-item>
7-
<u-form-item label="性别" prop="sex">
7+
<u-form-item :label-position="labelPosition" label="性别" prop="sex">
88
<u-input :border="border" type="select" :select-open="actionSheetShow" v-model="model.sex" placeholder="请选择性别" @click="actionSheetShow = true"></u-input>
99
</u-form-item>
10-
<u-form-item label="简介" prop="intro">
11-
<u-input type="textarea" placeholder="请填写简介" v-model="model.intro" />
10+
<u-form-item :label-position="labelPosition" label="简介" prop="intro">
11+
<u-input type="textarea" :border="border" placeholder="请填写简介" v-model="model.intro" />
1212
</u-form-item>
13-
<u-form-item label="水果品种" label-width="150" prop="likeFruit">
14-
<u-checkbox-group @change="checkboxGroupChange">
13+
<u-form-item :label-position="labelPosition" label="密码" prop="password">
14+
<u-input :border="border" type="text" :password="true" v-model="model.password" placeholder="请输入密码"></u-input>
15+
</u-form-item>
16+
<u-form-item :label-position="labelPosition" label="确认密码" label-width="150" prop="rePassword">
17+
<u-input :border="border" type="text" :password="true" v-model="model.rePassword" placeholder="请确认密码"></u-input>
18+
</u-form-item>
19+
<u-form-item :label-position="labelPosition" label="水果品种" label-width="150" prop="likeFruit">
20+
<u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
1521
<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
1622
</u-checkbox-group>
1723
</u-form-item>
18-
<u-form-item label="结算方式" prop="payType" label-width="150">
19-
<u-radio-group v-model="radio" @change="radioGroupChange">
24+
<u-form-item :label-position="labelPosition" label="结算方式" prop="payType" label-width="150">
25+
<u-radio-group v-model="radio" @change="radioGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
2026
<u-radio shape="circle" v-model="item.checked" v-for="(item, index) in radioList" :key="index" :name="item.name">{{ item.name }}</u-radio>
2127
</u-radio-group>
2228
</u-form-item>
23-
<u-form-item label="所在地区" prop="region" label-width="150">
29+
<u-form-item :label-position="labelPosition" label="所在地区" prop="region" label-width="150">
2430
<u-input :border="border" type="select" :select-open="pickerShow" v-model="model.region" placeholder="请选择地区" @click="pickerShow = true"></u-input>
2531
</u-form-item>
26-
<u-form-item label="所在地区" prop="goodsType" label-width="150">
32+
<u-form-item :label-position="labelPosition" label="商品类型" prop="goodsType" label-width="150">
2733
<u-input :border="border" type="select" :select-open="selectShow" v-model="model.goodsType" placeholder="请选择商品类型" @click="selectShow = true"></u-input>
2834
</u-form-item>
35+
<u-form-item :label-position="labelPosition" label="手机号码" prop="phone" label-width="150">
36+
<u-input :border="border" placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
37+
</u-form-item>
38+
<u-form-item :label-position="labelPosition" label="验证码" prop="code" label-width="150">
39+
<u-input :border="border" placeholder="请输入验证码" v-model="model.code" type="text"></u-input>
40+
<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
41+
</u-form-item>
2942
</u-form>
3043
<view class="agreement">
3144
<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
@@ -37,6 +50,36 @@
3750
<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
3851
<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
3952
<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
53+
<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
54+
<view class="u-config-wrap">
55+
<view class="u-config-title u-border-bottom">
56+
参数配置
57+
</view>
58+
<view class="u-config-item">
59+
<view class="u-item-title">label对齐方式</view>
60+
<u-subsection vibrateShort :list="['左边', '上方']" @change="labelPositionChange"></u-subsection>
61+
</view>
62+
<view class="u-config-item">
63+
<view class="u-item-title">边框</view>
64+
<u-subsection vibrateShort current="1" :list="['显示', '隐藏']" @change="borderChange"></u-subsection>
65+
</view>
66+
<view class="u-config-item">
67+
<view class="u-item-title">radio、checkbox样式</view>
68+
<u-subsection vibrateShort :list="['自适应', '换行', '50%宽度']" @change="radioCheckboxChange"></u-subsection>
69+
</view>
70+
<view class="u-config-item">
71+
<view class="u-item-title">打乱顺序</view>
72+
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="randomChange"></u-subsection>
73+
</view>
74+
<view class="u-config-item">
75+
<view class="u-item-title">上方工具条</view>
76+
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="tooltipChange"></u-subsection>
77+
</view>
78+
<view class="u-config-item">
79+
<view class="u-item-title">是否显示遮罩</view>
80+
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="maskChange"></u-subsection>
81+
</view>
82+
</view>
4083
</view>
4184
</template>
4285

@@ -54,6 +97,10 @@ export default {
5497
agreement: false,
5598
region: '',
5699
goodsType: '',
100+
phone: '',
101+
code: '',
102+
password: '',
103+
rePassword: '',
57104
58105
},
59106
selectList: [
@@ -86,9 +133,8 @@ export default {
86133
{
87134
validator: (rule, value, callback) => {
88135
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
89-
//return that.$u.test.chinese(value);
136+
return this.$u.test.chinese(value);
90137
},
91-
validator1: 33,
92138
message: '姓名必须为中文',
93139
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
94140
trigger: 'change,blur',
@@ -113,7 +159,7 @@ export default {
113159
},
114160
// 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
115161
{
116-
pattern: "/^[\u4e00-\u9fa5]+$/gi",
162+
pattern: /^[\u4e00-\u9fa5]+$/gi,
117163
message: '简介只能为中文',
118164
trigger: 'change',
119165
},
@@ -147,6 +193,61 @@ export default {
147193
trigger: 'change',
148194
}
149195
],
196+
phone: [
197+
{
198+
required: true,
199+
message: '请输入手机号',
200+
trigger: 'change,blur',
201+
},
202+
{
203+
validator: (rule, value, callback) => {
204+
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
205+
return this.$u.test.mobile(value);
206+
},
207+
message: '手机号码不正确',
208+
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
209+
trigger: 'change,blur',
210+
}
211+
],
212+
code: [
213+
{
214+
required: true,
215+
message: '请输入验证码',
216+
trigger: 'change,blur',
217+
},
218+
{
219+
type: 'number',
220+
message: '验证码只能为数字',
221+
trigger: 'change,blur',
222+
}
223+
],
224+
password: [
225+
{
226+
required: true,
227+
message: '请输入密码',
228+
trigger: 'change,blur',
229+
},
230+
{
231+
// 正则不能含有两边的引号
232+
pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{6,12}$/,
233+
message: '需同时含有字母和数字，长度在6-12之间',
234+
trigger: 'change,blur',
235+
}
236+
],
237+
rePassword: [
238+
{
239+
required: true,
240+
message: '请重新输入密码',
241+
trigger: 'change,blur',
242+
},
243+
{
244+
validator: (rule, value, callback) => {
245+
return value === this.model.password;
246+
},
247+
message: '两次输入的密码不相等',
248+
trigger: 'change,blur',
249+
}
250+
],
150251
},
151252
border: false,
152253
check: false,
@@ -210,17 +311,19 @@ export default {
210311
actionSheetShow: false,
211312
pickerShow: false,
212313
selectShow: false,
314+
radioCheckWidth: 'auto',
315+
radioCheckWrap: false,
316+
labelPosition: 'left',
317+
codeTips: '',
213318
214319
215320
};
216321
},
217-
computed: {
218-
current() {
219-
return this.show ? 0 : 1;
220-
}
221-
},
222322
onLoad() {
223323
324+
},
325+
onReady() {
326+
this.$refs.uForm.setRules(this.rules);
224327
},
225328
methods: {
226329
submit() {
@@ -259,7 +362,46 @@ export default {
259362
e.map((val, index) => {
260363
this.model.goodsType += this.model.goodsType == '' ? val.label : '-' + val.label;
261364
})
262-
}
365+
},
366+
borderChange(index) {
367+
this.border = !index;
368+
},
369+
radioCheckboxChange(index) {
370+
if(index == 0) {
371+
this.radioCheckWrap = false;
372+
this.radioCheckWidth = 'auto';
373+
} else if(index == 1) {
374+
this.radioCheckWrap = true;
375+
this.radioCheckWidth = 'auto';
376+
} else if(index == 2) {
377+
this.radioCheckWrap = false;
378+
this.radioCheckWidth = '50%';
379+
}
380+
},
381+
labelPositionChange(index) {
382+
this.labelPosition = index == 0 ? 'left' : 'right';
383+
},
384+
codeChange(text) {
385+
this.codeTips = text;
386+
},
387+
// 获取验证码
388+
getCode() {
389+
if(this.$refs.uCode.canGetCode) {
390+
// 模拟向后端请求验证码
391+
uni.showLoading({
392+
title: '正在获取验证码'
393+
})
394+
setTimeout(() => {
395+
uni.hideLoading();
396+
// 这里此提示会被this.start()方法中的提示覆盖
397+
this.$u.toast('验证码已发送');
398+
// 通知验证码组件内部开始倒计时
399+
this.$refs.uCode.start();
400+
}, 2000);
401+
} else {
402+
this.$u.toast('倒计时结束后再发送');
403+
}
404+
},
263405
}
264406
};
265407
</script>

‎pages/componentsA/select/index.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,6 @@ export default {
177177
let type = ['single-column', 'mutil-column', 'mutil-column-auto'];
178178
this.mode = type[index];
179179
this.list = index == 0 ? this.list1 : index == 1 ? this.list2 : this.list3;
180-
console.log(this.list);
181180
this.show = true;
182181
},
183182
confirm(e) {

‎pages/componentsB/switch/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
})
103103
},
104104
change(value) {
105-
// console.log(value, this.checked);
105+
// console.log(value);
106106
}
107107
}
108108
}

‎static/uview/example/actionSheet.png

-1.32 KB
Binary file not shown.

‎static/uview/example/address.png

-2.2 KB
Binary file not shown.

‎static/uview/example/alertTips.png

-1.76 KB
Binary file not shown.

‎static/uview/example/avatar.png

-3.05 KB
Binary file not shown.

‎static/uview/example/avatarCropper.png

-1.22 KB
Binary file not shown.

0 commit comments

Comments
 (0)