From 650b5cc41c0697ea2f6e61880cb40ced0d63abb6 Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Fri, 27 Oct 2023 16:50:58 +0800
Subject: [PATCH] menulist和curmenu组件，及home页面修改
---
pages/user/center.vue | 34 +++----
components/curMenu/index.vue | 52 +++++++++++++
components/menuList/index.vue | 33 ++++++++
pages/home/index.vue | 92 ++++++++++++++++------
static/img/bs.png | 0
static/img/sys.png | 0
6 files changed, 167 insertions(+), 44 deletions(-)
diff --git a/components/curMenu/index.vue b/components/curMenu/index.vue
new file mode 100644
index 0000000..4867076
--- /dev/null
+++ b/components/curMenu/index.vue
@@ -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>
\ No newline at end of file
diff --git a/components/menuList/index.vue b/components/menuList/index.vue
new file mode 100644
index 0000000..1f2bc87
--- /dev/null
+++ b/components/menuList/index.vue
@@ -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>
\ No newline at end of file
diff --git a/pages/home/index.vue b/pages/home/index.vue
index 78401bc..4cdef7f 100644
--- a/pages/home/index.vue
+++ b/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;
diff --git a/pages/user/center.vue b/pages/user/center.vue
index d1d33e7..9e5d7c5 100644
--- a/pages/user/center.vue
+++ b/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;
}
diff --git a/static/img/bs.png b/static/img/bs.png
new file mode 100644
index 0000000..2980ecc
--- /dev/null
+++ b/static/img/bs.png
Binary files differ
diff --git a/static/img/sys.png b/static/img/sys.png
new file mode 100644
index 0000000..6ae94f4
--- /dev/null
+++ b/static/img/sys.png
Binary files differ
--
Gitblit v1.9.3