git

5 years ago · b4d2a98027
parent b73c59e642
commit b4d2a98027
2 changed files with 97 additions and 108 deletions
--- a/src/view/nav/index.vue
+++ b/src/view/nav/index.vue
@ -4,11 +4,13 @@
                     @click-left="onClickLeft"
                     @click-right="onClickRight"
                     title="应用导航">
-            <van-icon name="home-o" slot="left"/>
-            <van-icon name="ellipsis" slot="right"/>
+            <van-icon name="ellipsis" slot="left"/>
+            <van-icon name="home-o" slot="right"/>
        </van-nav-bar>

-        <van-swipe class="layout-swipe" :autoplay="3000">
+        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+            <div class="body">
+                <van-swipe class="swipe" :autoplay="3000">
                    <van-swipe-item>
                        <img src="../../assets/bar1.jpg" class="" width="100%"/>
                    </van-swipe-item>
@ -22,9 +24,11 @@
                            v-for="g in grids"
                            :key="g.key"
                            :icon="g.icon"
-                    :text="g.text"
-            />
+                            :text="g.text"/>
                </van-grid>
+
+            </div>
+        </van-pull-refresh>
    </div>
 </template>

@ -38,6 +42,7 @@
        Toast,
        NoticeBar,
        Icon,
+        PullRefresh,
    } from 'vant';

    export default {
@ -47,8 +52,10 @@
            [GridItem.name]: GridItem,
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
+            [Toast.name]: Toast,
            [NoticeBar.name]: NoticeBar,
            [Icon.name]: Icon,
+            [PullRefresh.name]: PullRefresh,
        },

        data() {
@ -99,15 +106,20 @@
                        text: "发案回访",
                        icon: "photo-o"
                    }
-                ]
+                ],
+                isLoading: false,
            };
        },
        methods: {
            onClickLeft() {
-                this.$router.push('nav');
+                this.$router.push('set');
            },
            onClickRight() {
-                this.$router.push('set');
+                this.$router.push('nav');
+            },
+            onRefresh() {
+                Toast("Refresh finish");
+                this.isLoading = false;
            }
        }
    };
@ -115,21 +127,22 @@

 <style lang="less">
    .layout {
-        padding-top: 50px;
-        padding-bottom: 50px;
-
        &-bar {
            position: fixed;
            width: 100%;
            top: 0px;
        }

-        &-swipe {
+        .body {
+            margin-top: 50px;
+
+        }
+
+        .swipe {
            img {
                width: 100%;
                display: block;
            }
        }
-
    }
 </style>
--- a/src/view/set/index.vue
+++ b/src/view/set/index.vue
@ -3,126 +3,102 @@
        <van-nav-bar class="layout-bar"
                     title="设置"
                     @click-left="onClickLeft"
-                     left-arrow/>
+                     @click-right="onClickRight"
+                     left-arrow>
+            <van-icon name="home-o" slot="right"/>
+        </van-nav-bar>

-        <van-swipe class="layout-swipe" :autoplay="3000">
-            <van-swipe-item>
-                <img src="../../assets/bar1.jpg" class="" width="100%"/>
-            </van-swipe-item>
-        </van-swipe>
-        <van-notice-bar
-                text="连云港警方“快递哥消防宣传公益使者”行动"
-                left-icon="volume-o" :scrollable="false"/>
+        <div class="body">
+            <van-cell-group title="基本设置">
+                <van-cell title="个人信息" is-link @click="onItem('10')" value="" />
+                <van-cell title="修改密码" is-link @click="onItem('20')" value="" />
+            </van-cell-group>

-        <van-grid>
-            <van-grid-item
-                    v-for="g in grids"
-                    :key="g.key"
-                    :icon="g.icon"
-                    :text="g.text"
-            />
-        </van-grid>
+            <van-cell-group title="帮助中心">
+                <van-cell title="使用指导" is-link @click="onItem('30')" icon="label-o" value=""/>
+                <van-cell title="意见反馈" is-link @click="onItem('40')" icon="question-o" value=""/>
+                <van-cell title="关于我们" is-link @click="onItem('50')" icon="info-o" value=""/>
+                <van-cell title="联系我们" is-link @click="onItem('60')" icon="phone-o" value="12345678900"/>
+            </van-cell-group>
+
+            <van-button style="margin-top: 30px" type="danger" size="large" @click="onExit">安全退出</van-button>
+        </div>
    </div>
 </template>

 <script>
    import {
        NavBar,
-        Grid,
-        GridItem,
-        Swipe,
-        SwipeItem,
        Toast,
-        NoticeBar,
+        CellGroup,
+        Cell,
+        Button,
        Icon,
    } from 'vant';

    export default {
        components: {
            [NavBar.name]: NavBar,
-            [Grid.name]: Grid,
-            [GridItem.name]: GridItem,
-            [Swipe.name]: Swipe,
-            [SwipeItem.name]: SwipeItem,
-            [NoticeBar.name]: NoticeBar,
+            [Toast.name]: Toast,
+            [CellGroup.name]: CellGroup,
+            [Cell.name]: Cell,
+            [Button.name]: Button,
            [Icon.name]: Icon,
        },

        data() {
            return {
-                grids: [
-                    {
-                        key: "1",
-                        text: "地址管理",
-                        icon: "photo-o"
-                    },
-                    {
-                        key: "2",
-                        text: "房屋管理",
-                        icon: "photo-o"
-                    },
-                    {
-                        key: "3",
-                        text: "人口管理",
-                        icon: "photo-o"
-                    },
-                    {
-                        key: "4",
-                        text: "单位管理",
-                        icon: "photo-o"
-                    },
-                    {
-                        key: "5",
-                        text: "综合查询",
-                        icon: "photo-o"
-                    },
-                    {
-                        key: "6",
-                        text: "综合查询",
-                        icon: "photo-o"
-                    },
-                    {
-                        key: "7",
-                        text: "情报线索",
-                        icon: "photo-o"
-                    },
-                    {
-                        key: "8",
-                        text: "入户访查",
-                        icon: "photo-o"
-                    },
-                    {
-                        key: "9",
-                        text: "发案回访",
-                        icon: "photo-o"
-                    }
-                ]
+
            };
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
+            onClickRight() {
+                this.$router.push('nav');
+            },
+            onItem(index) {
+                switch (index){
+                    case "10":
+                        Toast("10");
+                        break
+                    case "20":
+                        Toast("20");
+                        break
+                    case "30":
+                        Toast("30");
+                        break
+                    case "40":
+                        Toast("40");
+                        break
+                    case "50":
+                        Toast("50");
+                        break
+                    case "60":
+                        Toast("60");
+                        break
+                }
+            },
+            onExit() {
+                Toast("已退出");
+            },
        }
    };
 </script>

 <style lang="less">
-    .layout {
-        padding-top: 50px;
-        padding-bottom: 50px;

+    .layout {
        &-bar {
            position: fixed;
            width: 100%;
            top: 0px;
        }

-        &-swipe {
-            img {
-                width: 100%;
-                display: block;
-            }
+        .body{
+            margin-top: 50px;
+
        }
    }
 </style>