menulist和curmenu组件，及home页面修改

zhongrj

2023-10-27 650b5cc41c0697ea2f6e61880cb40ced0d63abb6

menulist和curmenu组件，及home页面修改

 components/curMenu/index.vue

New file
@@ -0,0 +1,52 @@
<template>
        <view class="menu-box" @click="curMenuClick(curMenu)">
            <view>
                <u--image :src="curMenu.imgUrl" :width='curMenu.imgWidth || 54' :height='curMenu.height || 54' shape="circle"></u--image>
            </view>
            <view :style="{height: curMenu.height || '56rpx'}">
                {{curMenu.title}}
            </view>
        </view>
</template>

<script>
    export default {
        props: {
            curMenu: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
		
        methods: {
            curMenuClick(e) {
                console.log('当前点击处')
				
                if (e.event) {
                    e.event(e)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .menu-box {
        display: flex;
        flex-direction: column;
        font-size: 28rpx;
		
        & > view {
            display: flex;
            justify-content: center;
            align-items: center;
        }
		
        & > view:first-child {
            flex: 1;
        }
    }
	
</style>

 components/menuList/index.vue

New file
@@ -0,0 +1,33 @@
<template>
    <view class="cur-container">
        <cur-menu class="child-menu" v-for="(item, index) in menuData" :curMenu="item" :key="index"></cur-menu>
    </view>
</template>

<script>
    import curMenu from "@/components/curMenu/index.vue";
	
    export default {
        props: {
            menuData: {
                type: Array,
                default: () => []
            }
        },
		
        components: {
            curMenu
        }
    }
</script>

<style lang="scss" scoped>
    .cur-container {
        display: flex;
        height: 100%;
		
        .child-menu {
            flex: 1;
        }
    }
</style>

 pages/home/index.vue

@@ -1,40 +1,43 @@
<template>
    <view class="container">
        <u-navbar  height="48" bgColor="#5887f9" :autoBack="false" safeAreaInsetTop placeholder>
        <u-navbar height="48" bgColor="#5887f9" :autoBack="false" safeAreaInsetTop placeholder>
            <view slot="left">
                <u--text color="#ffffff" text="基层智治" size="18" />
            </view>
        </u-navbar>
		

        <view class="main">
            <view class="main-bg">
				

            </view>
			
            <view class="main-select">

            <view class="main-select" @click="selectBoxShow = !selectBoxShow">
                <u-icon name="map" color="#fff"></u-icon>
                <view>
                    当前场所：暂无绑定场所信息
                </view>

                <u-picker title="场所" :show="selectBoxShow" ref="uPicker" :columns="columns" @confirm="confirm"
                    @change="changeHandler"></u-picker>
            </view>
			

            <view class="main-btn">
				
                <menu-list :menuData="btnList"></menu-list>
            </view>
			

            <view class="main-phone">
                <view></view>
                <view></view>
                <view></view>
            </view>
			
            <view class="main-bt">

            <view class="main-bt">c
                <view class="main-live">
					

                </view>
				

                <view class="main-taska">
					

                </view>
            </view>
        </view>
@@ -45,15 +48,32 @@

<script>
    import tabBar from "@/components/tabBar/tabBar.vue";
    import menuList from "@/components/menuList/index.vue";

    export default {
        components: {
            tabBar,
            menuList
        },

        data() {
            return {
                tabList: uni.getStorageSync("tabBarList") || [],
                selectBoxShow: false,
                columns: [
                    ['中国', '美国']
                ],
                columnData: [],
                btnList: [
                    {
                        imgUrl: '/static/img/sys.png',
                        title: '扫一扫'
                    },
                    {
                        imgUrl: '/static/img/bs.png',
                        title: '报事'
                    }
                ]
            }
        },

@@ -62,6 +82,26 @@
                let url = index
                this.$u.func.globalNavigator(url, "switchTab")
            },
            changeHandler(e) {
                const {
                    columnIndex,
                    value,
                    values, // values为当前变化列的数组内容
                    index,
                    // 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs.uPicker
                } = e
                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
                if (columnIndex === 0 && this.columnData.length > 0) {
                    // picker为选择器this实例，变化第二列对应的选项
                    picker.setColumnValues(1, this.columnData[index])
                }
            },
            // 回调参数为包含columnIndex、value、values
            confirm(e) {
                console.log('confirm', e)
                this.selectBoxShow = false
            }
        }
    }
</script>
@@ -70,23 +110,24 @@
    .container {
        width: 100%;
        height: 100%;
		

        display: flex;
        flex-direction: column;
        background: #F9F9FA;
        color: #fff;
		
        font-size: 32rpx;

        .main {
            position: relative;
            height: 0;
            flex: 1;
            overflow-y: auto;
			

            .main-bg {
                height: 36%;
                background: royalblue;
            }
			

            .main-select {
                margin: 0 6%;
                position: absolute;
@@ -94,42 +135,43 @@
                display: flex;
                align-items: center;
            }
			

            .main-btn {
                margin: 0 6%;
                position: absolute;
                top: 28%;
                width: 88%;
                height: 18%;
                height: 20%;
                background: #fff;
                border-radius: 10rpx;
                color: #000;
            }
			

            .main-phone {
                display: flex;
                position: absolute;
                top: 52%;
                width: 100%;
                height: 12%;
				

                view {
                    margin: 0 16rpx;
                    flex: 1;
                    background: linear-gradient( to right, #407BE9, #73A2F9);
                    background: linear-gradient(to right, #407BE9, #73A2F9);
                    border-radius: 10rpx;
                }
            }
			

            .main-bt {
                position: absolute;
                top: 66%;
                width: 100%;
				

                .main-live {
                    height: 180rpx;
                    background: #fff;
                }
				

                .main-taska {
                    margin-top: 16rpx;
                    height: 240rpx;

 pages/user/center.vue

@@ -1,29 +1,26 @@
<template>
    <view class="container">
        <u-navbar  height="48" bgColor="#5887f9" :autoBack="false" safeAreaInsetTop placeholder>
        <u-navbar height="48" bgColor="#5887f9" :autoBack="false" safeAreaInsetTop placeholder>
            <view slot="left">
                <u--text color="#ffffff" text="基层智治" size="18" />
            </view>
        </u-navbar>
		

        <view class="main">
            <view class="main-bg">
				

            </view>
			
			


            <view class="main-cell">
                <view class="cell-content">
                    <u-cell-group :border="false">
                        <u-cell :isLink="true" 
                        v-for="(item, index) in cellGroupData" :icon="item.icon" :title="item.title" 
                        :url="item.url"
                        :key="index"  :border="false"
                        ></u-cell>
                        <u-cell :isLink="true" v-for="(item, index) in cellGroupData" :icon="item.icon"
                            :title="item.title" :url="item.url" :key="index" :border="false"></u-cell>
                    </u-cell-group>
                </view>
            </view>
			

        </view>

        <tabBar @change='change' :currentTab="0-0" :tabList="tabList"></tabBar>
@@ -41,8 +38,7 @@
        data() {
            return {
                tabList: uni.getStorageSync("tabBarList") || [],
                cellGroupData: [
                    {
                cellGroupData: [{
                        title: '我的家人',
                        icon: 'account-fill',
                        url: ''
@@ -79,31 +75,31 @@
    .container {
        width: 100%;
        height: 100%;
		

        display: flex;
        flex-direction: column;
        background: #F9F9FA;
		

        .main {
            position: relative;
            height: 0;
            flex: 1;
            overflow-y: auto;
			

            .main-bg {
                height: 36%;
                background: royalblue;
            }
			

            .main-cell {
                position: absolute;
                top: 34%;
                width: 100%;
                height: 66%;
                border-radius: 10rpx 10rpx 0 0 ;
                border-radius: 10rpx 10rpx 0 0;
                z-index: 11;
                background: #fff;
				

                .cell-content {
                    margin-top: 240rpx;
                }

 static/img/bs.png

 static/img/sys.png