uView学习（持续更新中）

1.uView页面基础布局

<template>
    <view>
        <u-navbar :is-back="true" title="自定义标题" :background="bgColor" title-color="#000" :title-bold="true">
        u-navbar>
        <u-form :model="form" ref="uForm" :rules="rules">
        u-form>
    view>
template>

<script>
    export default {
        data() {
            return {
                bgColor: {
                    backgroundImage: '#fff'
                },
                form: {},
                rules: {}
            }
        },
        onLoad() {
        },
        methods: {}
    }
script>
<style lang="scss">

style>
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

单选框

<u-form-item class="form-label" prop="familyOr" ref="uForm">
    <label>是否有随迁家属：label>
    <u-radio-group v-model="form.familyOr">
        <u-radio
                v-for="(item, index) in list"
                :key="index"
                :name="item.value">
            {{item.label}}
        u-radio>
    u-radio-group>
u-form-item>

<script>
    export default {
        data() {
            return {
                list: [],
                form: {
                    familyOr: ''
                },
                rules: {}
            }
        },
        onLoad() {
            this.$u.api.dictData({dictType: 'sys_yes_no'}).then(res => {
                res.data.forEach(item => {
                    this.list.push({label: item.dictLabel, value: item.dictValue})
                })
            })
        }
    }
script>
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

2.多选框

<u-select v-model="showGender" :list="genderList" @confirm="confirmGender">
u-select>
<u-form-item label-width="150" label="性别：" prop="gender" class="form-label">
    <u-input type="select" v-model="form.gender" placeholder="请选择性别"
             @click="showGender = true">u-input>
u-form-item>

<script>
    export default {
        data() {
            return {
                gender: '',
                showGender: false,
                genderList: [],
                form: {
                    gender: ''
                },
                rules: {
                    gender: [
                        {
                            required: true,
                            message: '请选择性别',
                            trigger: ['change', 'blur'],
                        }
                    ],
                }
            }
        },
        onLoad() {
            this.$u.api.dictData({dictType: 'sys_user_sex'}).then(res => {
                res.data.forEach(item => {
                    this.genderList.push({label: item.dictLabel, value: item.dictValue})
                })
            })
        },
        methods: {
            confirmGender(e) {
                this.form.gender = e[0].label;
                this.gender = e[0].value
            }
        }
    }
script>
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

Picker 选择器，时间模式

<u-picker mode="time" v-model="pickerTime" @confirm="timeConfirm">u-picker>
<u-form-item prop="birthTime" class="form-label">
    <label>出生日期：label>
    <u-input placeholder="请选择出生日期" v-model="form.birthTime" type="select"
             @click="pickerTime = true">u-input>
u-form-item>

<script>
    export default {
        data() {
            return {
                pickerTime: false,//控制日期显示
                form: {
				   birthTime: ''
                },
                rules: {
                    birthTime: [
                        {
                            required: true,
                            message: '请选择出生日期',
                            trigger: ['change', 'blur'],
                        }
                    ]
                }
            }
        },
        methods: {
            //日期数据回调
            timeConfirm(e) {
                this.form.birthTime = e.year + '-' + e.month + '-' + e.day;
            }
        }
    }
script>
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

提交功能

<u-button @click="submitForm" class="submit-btn">提交u-button>

<script>
    export default {
        methods: {
            submitForm() {
                this.$refs.uForm.validate(valid => {
                    if (valid) {
                        this.$u.api.addRegister({
                            xxx: this.form.xxx,
                        })
                            .then(res => {
                                if (res.msg) {
                                    this.$u.toast('提交成功');
                                }
                                if (res.code == '200') {
                                    uni.reLaunch({
                                        url: '/pages/sys/workbench/index'
                                    });
                                }
                            });
                    } else {
                        this.$u.toast('信息有误，请根据提示填入信息');
                    }
                });
            }
        },
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        }
    }
script>
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

行政区划

<u-form-item class="form-label" prop="area">
    <label>行政区划：label>
    <u-input v-model="form.area" placeholder="请选择行政区划" @focus="show = true"/>
    <u-picker mode="region" v-model="show" @confirm="confirm">u-picker>
u-form-item>

<script>
    export default {
        data() {
            return {
                show: false,
                form: {
                    area: ''
                },
            }
        },
        methods: {
            confirm(e) {
                // 省市区拼接
                this.form.area = e.province.label + ' ' + e.city.label + ' ' + e.area.label
            }
        }
    }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24