From 6b447a9c1661a9de1bd27d51dedd8bab5e394a27 Mon Sep 17 00:00:00 2001
From: Lou <luzhiping@qqyjz.com>
Date: Sat, 04 Nov 2023 17:38:01 +0800
Subject: [PATCH] 登录页修改，新增报事报修、出租房管理页面，首页链接跳转
---
pages/login/login-account.vue | 78 +++
static/icon/list-01.png | 0
pages.json | 20 +
static/img/repair-bg.png | 0
uni_modules/chenchuang-CCDropDownFilter/readme.md | 222 ++++++++++++
static/base.css | 3
static/icon/nav-bg-09.png | 0
uni_modules/chenchuang-CCDropDownFilter/components/chenchuang-CCDropDownFilter/chenchuang-CCDropDownFilter.vue | 242 +++++++++++++
static/icon/nav-10.png | 0
static/icon/login-title.png | 0
uni_modules/chenchuang-CCDropDownFilter/changelog.md | 8
static/icon/nav-bg-07.png | 0
subPackage/workbench/views/rental.vue | 188 ++++++++++
static/icon/list-02.png | 0
pages/home/index.vue | 30 +
subPackage/bs/views/repair.vue | 194 ++++++++++
uni_modules/chenchuang-CCDropDownFilter/package.json | 84 ++++
static/icon/nav-bg-06.png | 0
static/icon/nav-09.png | 0
static/icon/nav-bg-08.png | 0
20 files changed, 1,040 insertions(+), 29 deletions(-)
diff --git a/pages.json b/pages.json
index 8cf16d0..5a841b2 100644
--- a/pages.json
+++ b/pages.json
@@ -69,6 +69,15 @@
"navigationBarBackgroundColor": "#4586fe",
"navigationBarTextStyle": "white"
}
+ },
+ {
+ "path":"views/rental",
+ "style": {
+ "navigationBarTitleText": "出租房管理",
+ "enablePullDownRefresh": false,
+ "navigationBarBackgroundColor": "#fff",
+ "navigationBarTextStyle": "black"
+ }
}
@@ -120,8 +129,17 @@
"navigationBarTextStyle": "black",
"enablePullDownRefresh": false
}
+ },
+ {
+ "path": "views/repair",
+ "style": {
+ "navigationBarTitleText": "报事报修",
+ "navigationBarBackgroundColor": "#fff",
+ "navigationBarTextStyle": "black",
+ "enablePullDownRefresh": false,
+ "navigationStyle": "custom"
+ }
}
-
]
},
diff --git a/pages/home/index.vue b/pages/home/index.vue
index 55318eb..0f3510c 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -87,7 +87,7 @@
</view>
</view>
<u-grid :border="false" col="4">
- <u-grid-item @click="navigatorPage(item)" v-for="(item, index) in jobList" :index="index"
+ <u-grid-item @click="navigatorPage(item.path)" v-for="(item, index) in jobList" :index="index"
:key="index" :customStyle="{paddingTop:20+'rpx'}">
<view class="grid-item flex f-d-c a-i-c" :style="{background:item.style.background}">
<u-icon :name="item.icon" width="60rpx" height="60rpx"></u-icon>
@@ -184,7 +184,7 @@
{
icon: "/static/icon/nav-02.png",
text: "报事报修",
- path: ''
+ path: '/subPackage/bs/views/repair'
},
{
icon: "/static/icon/nav-03.png",
@@ -216,42 +216,48 @@
text: "场所记录",
style: {
background: 'linear-gradient(133deg, #FFFCF9 0%, rgba(255,252,249,0) 100%)',
- }
+ },
+ path:""
},
{
icon: "/static/icon/menu-02.png",
text: "场所采集",
style: {
background: 'linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)',
- }
+ },
+ path:""
},
{
icon: "/static/icon/menu-03.png",
text: "出租房管理",
style: {
background: 'linear-gradient(131deg, #FCF8FF 0%, rgba(252,248,255,0) 100%)',
- }
+ },
+ path:"/subPackage/workbench/views/rental"
},
{
icon: "/static/icon/menu-04.png",
text: "标签事件",
style: {
background: 'linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)',
- }
+ },
+ path:""
},
{
icon: "/static/icon/menu-05.png",
text: "场所维护",
style: {
background: 'linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)',
- }
+ },
+ path:"/subPackage/workbench/views/cscj"
},
{
icon: "/static/icon/menu-06.png",
text: "报事审核",
style: {
background: 'linear-gradient(137deg, #FFF4F3 0%, rgba(255,244,243,0) 100%)',
- }
+ },
+ path:""
},
// {
// icon: "/static/icon/menu-07.png",
@@ -535,9 +541,11 @@
this.$u.func.globalNavigator(`/subPackage/bs/views/zhsb?houseCode=${this.curHouseCode}`, "navTo")
},
- navigatorPage() {
- let url = "/subPackage/workbench/views/cscj"
- this.$u.func.globalNavigator(url, "navTo")
+ navigatorPage(url) {
+ if(url){
+ this.$u.func.globalNavigator(url, "navTo")
+ }
+
},
scan() {
diff --git a/pages/login/login-account.vue b/pages/login/login-account.vue
index 6f4573c..2c0ae82 100644
--- a/pages/login/login-account.vue
+++ b/pages/login/login-account.vue
@@ -5,13 +5,39 @@
style="width: 100rpx;height: 100rpx;"></image>
<view class="title">基层智治</view>
</view>-->
-
-
- <image class="bg" src="/static/img/login-bg.png" :style="{height:screenHeight}" mode="aspectFill"></image>
-
-
+
+
+ <image class="bg" src="/static/img/login-bg.png" :style="{height:screenHeight}" mode="aspectFill"></image>
+
+
<view class="content">
- <view class="top">
+
+ <image class="title-img" src="/static/icon/login-title.png" mode="aspectFill"></image>
+
+ <view class="">
+ <u-form labelPosition="top" labelWidth="60" :model="form" :rules="rules" ref="form">
+ <u-form-item borderBottom ref="phone">
+ <u-input placeholder="请输入用户名" prefixIcon="account"
+ prefixIconStyle="font-size: 28px;color: #017BFC"
+ placeholderStyle="font-size:28rpx;color:#ABABAB;"
+ customStyle="background:#fff;width:634rpx;height:120rpx;" v-model="form.phone"></u-input>
+ </u-form-item>
+ <u-form-item prop="password" borderBottom ref="password">
+
+ <u-input placeholder="请输入密码" prefixIcon="lock" prefixIconStyle="font-size: 28px;color: #017BFC"
+ placeholderStyle="font-size:28rpx;color:#ABABAB;"
+ customStyle="background:#fff;width:634rpx;height:120rpx;" :type="passwordProps.passwordType" v-model="form.password">
+ <template slot="suffix">
+ <u-icon @click="showPassword" :name="passwordProps.passwordIcon" size="24" color="#9FA5C0"></u-icon>
+ </template>
+ </u-input>
+ </u-form-item>
+ </u-form>
+ <button class="submit-btn" @click="submit" :disabled="disabled">登录</button>
+ </view>
+
+
+ <view class="top" v-if="false">
<u--form labelPosition="top" labelWidth="60" :model="form" :rules="rules" ref="form">
<view class="cell">
<u-form-item label="账号:" borderBottom ref="phone">
@@ -104,14 +130,14 @@
passwordIcon: "eye-off",
passwordType: "password"
},
- screenHeight:""
+ screenHeight: ""
}
},
-
- onLoad(){
+
+ onLoad() {
this.screenHeight = `${uni.getSystemInfoSync().screenHeight}px`;
},
-
+
methods: {
submit() {
const that = this
@@ -142,12 +168,11 @@
</script>
<style lang="scss">
-
- .bg{
- width:100%;
+ .bg {
+ width: 100%;
display: block;
}
-
+
.privacy-policy {
width: 100%;
padding: 40rpx 40rpx 0 80rpx;
@@ -184,7 +209,16 @@
margin-top: 40rpx;
font-weight: 700;
font-size: 32rpx;
+
+
}
+ }
+
+ .title-img {
+ width: 650rpx;
+ height: 49rpx;
+ display: block;
+ margin: 320rpx 0 120rpx;
}
.content {
@@ -192,9 +226,9 @@
flex-direction: column;
justify-content: space-around;
align-items: center;
- position: absolute;
- top:0;
- left:0;
+ position: absolute;
+ top: 0;
+ left: 0;
// height: 90vh;
width: 100%;
@@ -370,4 +404,14 @@
justify-content: space-evenly;
}
}
+ .submit-btn{
+ width:634rpx;
+ height:94rpx;
+ line-height: 94rpx;
+ background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
+ color:#fff;
+ font-size:36rpx;
+ margin-top:190rpx;
+ }
</style>
\ No newline at end of file
diff --git a/static/base.css b/static/base.css
index 0e8594d..109713e 100644
--- a/static/base.css
+++ b/static/base.css
@@ -97,4 +97,7 @@
}
.bgc-main{
background-color:#017BFC;
+}
+.bgc-ff{
+ background-color: #fff;
}
\ No newline at end of file
diff --git a/static/icon/list-01.png b/static/icon/list-01.png
new file mode 100644
index 0000000..8c80e11
--- /dev/null
+++ b/static/icon/list-01.png
Binary files differ
diff --git a/static/icon/list-02.png b/static/icon/list-02.png
new file mode 100644
index 0000000..d208cdd
--- /dev/null
+++ b/static/icon/list-02.png
Binary files differ
diff --git a/static/icon/login-title.png b/static/icon/login-title.png
new file mode 100644
index 0000000..8e44a62
--- /dev/null
+++ b/static/icon/login-title.png
Binary files differ
diff --git a/static/icon/nav-09.png b/static/icon/nav-09.png
new file mode 100644
index 0000000..72be478
--- /dev/null
+++ b/static/icon/nav-09.png
Binary files differ
diff --git a/static/icon/nav-10.png b/static/icon/nav-10.png
new file mode 100644
index 0000000..44a2abc
--- /dev/null
+++ b/static/icon/nav-10.png
Binary files differ
diff --git a/static/icon/nav-bg-06.png b/static/icon/nav-bg-06.png
new file mode 100644
index 0000000..bc3a8bd
--- /dev/null
+++ b/static/icon/nav-bg-06.png
Binary files differ
diff --git a/static/icon/nav-bg-07.png b/static/icon/nav-bg-07.png
new file mode 100644
index 0000000..65fdcb0
--- /dev/null
+++ b/static/icon/nav-bg-07.png
Binary files differ
diff --git a/static/icon/nav-bg-08.png b/static/icon/nav-bg-08.png
new file mode 100644
index 0000000..2b73ec4
--- /dev/null
+++ b/static/icon/nav-bg-08.png
Binary files differ
diff --git a/static/icon/nav-bg-09.png b/static/icon/nav-bg-09.png
new file mode 100644
index 0000000..4fa63c4
--- /dev/null
+++ b/static/icon/nav-bg-09.png
Binary files differ
diff --git a/static/img/repair-bg.png b/static/img/repair-bg.png
new file mode 100644
index 0000000..de0b11d
--- /dev/null
+++ b/static/img/repair-bg.png
Binary files differ
diff --git a/subPackage/bs/views/repair.vue b/subPackage/bs/views/repair.vue
new file mode 100644
index 0000000..ab75a59
--- /dev/null
+++ b/subPackage/bs/views/repair.vue
@@ -0,0 +1,194 @@
+<template>
+ <view class="">
+ <u-navbar height="48" safeAreaInsetTop placeholder bgColor="transparent" leftIconColor="#fff">
+ </u-navbar>
+ <view class="top">
+ <image class="top-img" src="/static/img/repair-bg.png" mode="aspectFill"></image>
+ </view>
+
+ <view class="container">
+ <view class="c-ff f-36">请选择您需要的服务</view>
+ <view class="serve-box bgc-ff mb-20 flex j-c-s-b a-i-c">
+ <view class="flex a-i-c">
+ <u-icon name="/static/icon/nav-09.png" width="91rpx" height="70rpx"></u-icon>
+ <view class="flex f-d-c ml-40">
+ <text class="f-36">总申请</text>
+ <view class="flex a-i-c">
+ <text class="f-48 c-blue fw mr-6">50</text>
+ <text class="f-24 c-99">件</text>
+ </view>
+ </view>
+ </view>
+ <view class="flex a-i-c">
+ <u-icon name="/static/icon/nav-10.png" width="91rpx" height="70rpx"></u-icon>
+ <view class="flex f-d-c ml-40">
+ <text class="f-36">已处理</text>
+ <view class="flex a-i-c">
+ <text class="f-48 c-green fw mr-6">50</text>
+ <text class="f-24 c-99">件</text>
+ </view>
+ </view>
+ </view>
+ </view>
+
+ <view class="site-box bgc-ff flex">
+ <view class="flex a-i-c">
+ <u-icon name="map-fill" color="#AAAAAA"></u-icon>
+ <text class="f-28 c-aa ml-20">当前小区：</text>
+ </view>
+
+ <text class="address f-28">万达华府26栋1903室 万达华府26栋1903室</text>
+ </view>
+
+ <view class="nav flex flex-wrap j-c-s-b">
+
+ <view class="nav-item" v-for="(i,k) in navList" :key="k">
+ <image class="nav-item-bg" :src="i.bgImg" mode="aspectFill"></image>
+ <view class="nav-item-inner flex f-d-c">
+ <text class="f-32 mb-30">{{i.title}}</text>
+ <button class="item-btn" :style="{backgroundColor:i.background}" @click="navTo(i.path)">立即上报</button>
+ </view>
+ </view>
+
+
+ </view>
+ </view>
+
+ </view>
+
+</template>
+
+<script>
+ export default {
+ data(){
+ return {
+ navList:[
+ {
+ title:"公共维修",
+ bgImg:"/static/icon/nav-bg-06.png",
+ path:"",
+ background:"#63C875"
+ },
+ {
+ title:"居家维修",
+ bgImg:"/static/icon/nav-bg-07.png",
+ path:"",
+ background:"#4D98E2"
+ },
+ {
+ title:"矛盾纠纷",
+ bgImg:"/static/icon/nav-bg-08.png",
+ path:"",
+ background:"#EC7E51"
+ },
+ {
+ title:"投诉举报",
+ bgImg:"/static/icon/nav-bg-09.png",
+ path:"",
+ background:"#F4B862"
+ },
+
+ ]
+ }
+ },
+ methods:{
+ navTo(path){
+ if(path){
+ this.$u.func.globalNavigator(path, "navTo")
+ }
+
+ }
+ }
+ }
+</script>
+
+<style lang="scss">
+ page{
+ width:100%;
+ height:100%;
+ }
+ .top{
+ width:100%;
+ height:659rpx;
+ background: linear-gradient(180deg, #017BFC 0%, rgba(1,123,252,0) 100%);
+ position: fixed;
+ top:0;
+ left:0;
+ .top-img{
+ width:100%;
+ height:659rpx;
+ }
+ }
+ .container{
+ width:100%;
+ padding: 0 30rpx;
+ position: fixed;
+ box-sizing: border-box;
+ top:130rpx;
+ left:0;
+ z-index: 100;
+ .serve-box{
+ width:100%;
+ height:213rpx;
+ border-radius: 8rpx;
+ margin-top:30rpx;
+ padding: 0 60rpx 0 40rpx;
+ box-sizing: border-box;
+ }
+ .f-48{
+ font-size:48rpx;
+ }
+ .c-blue{
+ color:#677CF8;
+
+ }
+ .c-green{
+ color:#30D17C;
+ }
+ .ml-40{
+ margin-left:40rpx;
+ }
+ .site-box{
+ width:100%;
+ padding:30rpx;
+ box-sizing: border-box;
+ border-radius: 4rpx;
+ .c-aa{
+ color:#aaa;
+ }
+ .address{
+ width:60%;
+ margin-left:25rpx;
+ }
+ }
+ .nav{
+ width:100%;
+ .nav-item,.nav-item-bg,.nav-item-inner{
+ width:330rpx;
+ height:167rpx;
+ }
+ .nav-item{
+ position: relative;
+ margin-top:30rpx;
+ }
+ .nav-item-inner{
+ padding:30rpx 30rpx 0;
+ position: absolute;
+ top:0;
+ left:0;
+
+ }
+ .item-btn{
+ width:125rpx;
+ height:42rpx;
+ line-height: 42rpx;
+ border-radius: 20rpx;
+ color:#fff;
+ font-size:22rpx;
+ padding:0;
+ margin:0;
+ }
+ }
+
+ }
+</style>
\ No newline at end of file
diff --git a/subPackage/workbench/views/rental.vue b/subPackage/workbench/views/rental.vue
new file mode 100644
index 0000000..0b614df
--- /dev/null
+++ b/subPackage/workbench/views/rental.vue
@@ -0,0 +1,188 @@
+<template>
+ <view class="">
+ <view class="header bgc-ff">
+ <view class="filter-box">
+ <chenchuang-CCDropDownFilter :filterData='filterData' :defaultIndex='defaultIndex'
+ @ed='handleSelect'></chenchuang-CCDropDownFilter>
+ </view>
+ <view class="search-box">
+ <u-search placeholder="请输入租户名" v-model="keyword" :clearabled="true" :showAction="true" :animation="true"></u-search>
+ </view>
+ </view>
+
+ <view class="content">
+ <view class="row flex j-c-s-b a-i-c">
+ <view class="row-item bgc-ff flex a-i-c">
+ <view class="dot bgc-green"></view>
+ <text class="f-24">长期3户 (3)人</text>
+ </view>
+ <view class="row-item bgc-ff flex a-i-c">
+ <view class="dot bgc-main"></view>
+ <text class="f-24">长期3户 (3)人</text>
+ </view>
+ <view class="row-item bgc-ff flex a-i-c">
+ <view class="dot bgc-orange"></view>
+ <text class="f-24">长期3户 (3)人</text>
+ </view>
+ </view>
+
+ <view class="list bgc-ff" v-for="i in 3">
+ <view class="flex j-c-s-b a-i-c">
+ <view class="flex a-i-c">
+ <text class="f-32 mr-50">黄莺</text>
+ <view class="flex a-i-c">
+ <u-icon name="phone-fill" color="#017BFC"></u-icon>
+ <text class="f-28 ml-10">15180114174</text>
+ </view>
+ </view>
+ <u-tag text="未到期" type="success" plain plainFill></u-tag>
+ </view>
+ <view class="list-address f-28 c-99">
+ 江西省上饶市信州区西市街道万达社区居民委员会滨江西路66号万达晶座11栋303室
+ </view>
+ <view class="list-action flex ">
+ <view class="action-item">
+ <u-icon name="/static/icon/list-02.png" width="40rpx" height="40rpx"></u-icon>
+ <text class="f-28 c-main ml-10">租客管理</text>
+ </view>
+ <view class="action-item">
+ <u-icon name="/static/icon/list-01.png" width="40rpx" height="40rpx"></u-icon>
+ <text class="f-28 c-main ml-10">租客管理</text>
+ </view>
+ </view>
+ </view>
+ </view>
+
+ </view>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ filterData: [
+ [
+ {
+ name: '全部',
+ value: ''
+ },
+ {
+ name: '待审核',
+ value: '1'
+ },
+ {
+ name: '未到期',
+ value: '2'
+ },
+ {
+ name: '即将到期',
+ value: '3'
+ },
+ {
+ name: '已到期',
+ value: '3'
+ }
+ ],
+ [
+ {
+ name: '楼层',
+ value: ''
+ },
+ {
+ name: '1楼',
+ value: '1'
+ },
+ {
+ name: '2楼',
+ value: '2'
+ },
+ {
+ name: '3楼',
+ value: '3'
+ }
+ ]
+ ],
+ defaultIndex: [0, 0],
+ keyword:""
+ }
+ },
+
+ methods: {
+ handleSelect(res) {
+ console.log('选择res = ' + JSON.stringify(res));
+ },
+ }
+ }
+</script>
+<style lang="scss">
+ page {
+ background-color: #F5F5F5;
+ }
+ .header{
+ width:100%;
+ position: fixed;
+ top:0;
+ left:0;
+ z-index: 10;
+ }
+ .filter-box{
+ width:100%;
+ height:100rpx;
+ }
+ .search-box{
+ padding:20rpx 24rpx 30rpx;
+ }
+ .content{
+ width:100%;
+ margin-top:220rpx;
+ padding: 0 30rpx;
+ box-sizing: border-box;
+ .row{
+ width:100%;
+ padding:20rpx 0;
+ }
+ .row-item{
+ width:220rpx;
+ height:46rpx;
+ border-radius: 30rpx;
+ padding: 0 20rpx;
+ box-sizing: border-box;
+ }
+ .dot{
+ width:10rpx;
+ height:10rpx;
+ border-radius: 50%;
+ margin-right:18rpx;
+ }
+ .bgc-green{
+ background-color:#30D17C;
+ }
+ .bgc-orange{
+ background-color:#FFAC3D;
+ }
+ .list{
+ width:100%;
+ padding:30rpx 30rpx 0;
+ box-sizing: border-box;
+ margin-bottom:20rpx;
+ .list-address{
+ padding:30rpx 0;
+ }
+ .list-action{
+ padding:22rpx 0 30rpx;
+ border-top:1px solid #F5F5F5;
+ }
+ .action-item{
+ display: flex;
+ flex:1;
+ justify-content: center;
+ }
+ .action-item:first-child{
+ border-right:1px solid #DBDBDB;
+ }
+ .mr-50{
+ margin-right:50rpx;
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/uni_modules/chenchuang-CCDropDownFilter/changelog.md b/uni_modules/chenchuang-CCDropDownFilter/changelog.md
new file mode 100644
index 0000000..a66d4ac
--- /dev/null
+++ b/uni_modules/chenchuang-CCDropDownFilter/changelog.md
@@ -0,0 +1,8 @@
+## 3.0.0（2023-09-29）
+修复vue3.0运行报错
+## 2.0.2（2023-08-13）
+修复微信小程序地区筛选不生效问题
+## 2.0.1（2023-07-17）
+组件优化 更改text字段为name
+## 2.0.0（2023-06-20）
+组件优化 发布uni_modules 版本
diff --git a/uni_modules/chenchuang-CCDropDownFilter/components/chenchuang-CCDropDownFilter/chenchuang-CCDropDownFilter.vue b/uni_modules/chenchuang-CCDropDownFilter/components/chenchuang-CCDropDownFilter/chenchuang-CCDropDownFilter.vue
new file mode 100644
index 0000000..6a2081f
--- /dev/null
+++ b/uni_modules/chenchuang-CCDropDownFilter/components/chenchuang-CCDropDownFilter/chenchuang-CCDropDownFilter.vue
@@ -0,0 +1,242 @@
+<template>
+ <view class="filter-wrapper" :style="{ height: height + 'rpx', top: top,'border-top':border?'1rpx solid #f2f2f2':'none' }" @touchmove.stop.prevent="discard">
+ <view class="inner-wrapper">
+ <view class="mask" :class="showMask ? 'show' : 'hide'" @tap="tapMask"></view>
+ <view class="navs">
+ <view class="c-flex-align" :class="{ 'c-flex-center': index > 0,'right c-flex-aligin': index == (navData.length-1), actNav: index === actNav }" v-for="(item, index) in navData" :key="index" @click="navClick(index)">
+ <!-- v-if改v-show -->
+ <view v-for="(child, childx) in item" :key="childx" v-show="child.select">{{ child.name }}</view>
+ <image src="https://i.loli.net/2020/07/15/QsHxlr1gbSImvWt.png" mode="" class="icon-triangle" v-if="index === actNav"></image>
+ <image src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png" mode="" class="icon-triangle" v-else></image>
+ </view>
+
+
+ </view>
+ <scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''">
+ <view class="item-opt c-flex-align" :class="item.select ? 'actOpt' : ''" v-for="(item, index) in navData[actNav]" :key="index" @click="handleOpt(index)">
+ {{ item.name }}
+ </view>
+ </scroll-view>
+ </view>
+ </view>
+</template>
+
+<script>
+// import { getCurDateTime } from '@/libs/utils.js';
+export default {
+ props: {
+ height: {
+ type: Number,
+ default: 108
+ },
+ top: {
+ type: String,
+ default: 'calc(var(--window-statsu-bar) + 44px)'
+ },
+ border: {
+ type: Boolean,
+ default: false
+ },
+ filterData: {
+ //必填
+ type: Array,
+ default: () => {
+ return [];
+ }
+
+ },
+ defaultIndex: {
+ //默认选中条件索引,超出一类时必填
+ type: Array,
+ default: () => {
+ return [0];
+ }
+ }
+ },
+ data() {
+ return {
+ navData: [],
+ popupShow: false,
+ showMask: false,
+ actNav: null,
+ selDate: '选择日期',
+ selIndex: [] //选中条件索引
+ };
+ },
+ created() {
+ let that = this;
+ // 修复微信小程序选项设置问题
+ setTimeout(function() {
+
+ that.navData = that.filterData;
+ that.selIndex = that.defaultIndex;
+ that.keepStatus();
+ }, 200);
+
+ },
+ mounted() {
+
+
+ // this.selDate = getCurDateTime().formatDate;
+ },
+ methods: {
+ keepStatus() {
+ this.navData.forEach(itemnavData => {
+ itemnavData.map(child => {
+ child.select = false;
+ });
+ return itemnavData;
+ });
+ for (let i = 0; i < this.selIndex.length; i++) {
+ let selindex = this.selIndex[i];
+ this.navData[i][selindex].select = true;
+ }
+ },
+ navClick(index) {
+ if (index === this.actNav) {
+ this.tapMask();
+ return;
+ }
+ this.popupShow = true;
+ this.showMask = true;
+ this.actNav = index;
+ },
+ handleOpt(index) {
+ this.selIndex[this.actNav] = index;
+ this.keepStatus();
+ setTimeout(() => {
+ this.tapMask();
+ }, 100);
+ let data = [];
+ let res = this.navData.forEach(item => {
+ let sel = item.filter(child => child.select);
+ data.push(sel);
+ });
+ console.log(data);
+ this.$emit('onSelected', data);
+ },
+ dateClick() {
+ this.tapMask();
+ },
+ tapMask() {
+ this.showMask = false;
+ this.popupShow = false;
+ this.actNav = null;
+ },
+ handleDate(e) {
+ let d = e.detail.value;
+ this.selDate = d;
+ this.$emit('dateChange', d);
+ },
+ discard() {}
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+page {
+ font-size: 28rpx;
+}
+.c-flex-align {
+ display: flex;
+ align-items: center;
+}
+.c-flex-center {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+.filter-wrapper {
+ position: fixed;
+ left: 0;
+ width: 100%;
+ z-index: 999;
+ .inner-wrapper {
+ // position: relative;
+ .navs {
+ position: relative;
+ height: 90rpx;
+ padding: 0 40rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background-color: #fff;
+ // border-bottom: 2rpx solid #f5f6f9;
+ color: #8b9aae;
+ z-index: 999;
+ box-sizing: border-box;
+ & > view {
+ flex: 1;
+ height: 100%;
+ flex-direction: row;
+ z-index: 999;
+ justify-content: center;
+ }
+ .right {
+ // justify-content: flex-end;
+ }
+ .actNav {
+ color: #4d7df9;
+ font-weight: bold;
+ }
+ }
+ .mask {
+ z-index: 666;
+ position: fixed;
+ top: calc(var(--status-bar-height) + 44px);
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0);
+ transition: background-color 0.15s linear;
+ &.show {
+ background-color: rgba(0, 0, 0, 0.01);
+ }
+ &.hide {
+ display: none;
+ }
+ }
+ .popup {
+ position: relative;
+ max-height: 500rpx;
+ background-color: #fff;
+ border-bottom-left-radius: 20rpx;
+ border-bottom-right-radius: 20rpx;
+ overflow: scroll;
+ z-index: 999;
+ transition: all 1s linear;
+ opacity: 0;
+ display: none;
+ .item-opt {
+ height: 80rpx;
+ padding: 0 40rpx;
+ color: #8b9aae;
+ border-bottom: 2rpx solid #f5f6f9;
+ }
+ .actOpt {
+ color: #4d7df9;
+ font-weight: bold;
+ position: relative;
+ &::after {
+ content: '✓';
+ font-weight: bold;
+ font-size: 36rpx;
+ position: absolute;
+ right: 40rpx;
+ }
+ }
+ }
+ .popupShow {
+ display: block;
+ opacity: 1;
+ }
+ }
+
+ .icon-triangle {
+ width: 16rpx;
+ height: 16rpx;
+ margin-left: 10rpx;
+ }
+}
+</style>
diff --git a/uni_modules/chenchuang-CCDropDownFilter/package.json b/uni_modules/chenchuang-CCDropDownFilter/package.json
new file mode 100644
index 0000000..985ab8a
--- /dev/null
+++ b/uni_modules/chenchuang-CCDropDownFilter/package.json
@@ -0,0 +1,84 @@
+{
+ "id": "chenchuang-CCDropDownFilter",
+ "displayName": "CCDropDownFilter下拉框 筛选框 仿美团下拉筛选框 下拉菜单",
+ "version": "3.0.0",
+ "description": "下拉框 筛选框 仿美团下拉筛选框 下拉菜单",
+ "keywords": [
+ "下拉框",
+ "筛选框",
+ "仿美团下拉筛选",
+ "下拉菜单"
+],
+ "repository": "",
+ "engines": {
+ "HBuilderX": "^3.7.0"
+ },
+ "dcloudext": {
+ "type": "component-vue",
+ "sale": {
+ "regular": {
+ "price": "0.00"
+ },
+ "sourcecode": {
+ "price": "0.00"
+ }
+ },
+ "contact": {
+ "qq": ""
+ },
+ "declaration": {
+ "ads": "无",
+ "data": "无",
+ "permissions": "无"
+ },
+ "npmurl": ""
+ },
+ "uni_modules": {
+ "dependencies": [],
+ "encrypt": [],
+ "platforms": {
+ "cloud": {
+ "tcb": "y",
+ "aliyun": "y"
+ },
+ "client": {
+ "Vue": {
+ "vue2": "y",
+ "vue3": "y"
+ },
+ "App": {
+ "app-vue": "y",
+ "app-nvue": "y"
+ },
+ "H5-mobile": {
+ "Safari": "y",
+ "Android Browser": "y",
+ "微信浏览器(Android)": "y",
+ "QQ浏览器(Android)": "y"
+ },
+ "H5-pc": {
+ "Chrome": "y",
+ "IE": "y",
+ "Edge": "y",
+ "Firefox": "y",
+ "Safari": "y"
+ },
+ "小程序": {
+ "微信": "y",
+ "阿里": "y",
+ "百度": "y",
+ "字节跳动": "y",
+ "QQ": "y",
+ "钉钉": "y",
+ "快手": "y",
+ "飞书": "y",
+ "京东": "y"
+ },
+ "快应用": {
+ "华为": "y",
+ "联盟": "y"
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/uni_modules/chenchuang-CCDropDownFilter/readme.md b/uni_modules/chenchuang-CCDropDownFilter/readme.md
new file mode 100644
index 0000000..b03ffaf
--- /dev/null
+++ b/uni_modules/chenchuang-CCDropDownFilter/readme.md
@@ -0,0 +1,222 @@
+# chenchuang-CCDropDownFilter
+
+#### 使用方法
+```使用方法
+<view style="width: 100vw; height: 40px; background-color: white;">
+
+ <!-- filterData:筛选数据 defaultIndex： 默认选择序列 @onSelected:选择事件 返回选择的值-->
+<chenchuang-CCDropDownFilter :filterData='filterData' :defaultIndex='defaultIndex'
+ @onSelected='onSelected'></chenchuang-CCDropDownFilter>
+
+</view>
+
+```
+
+#### HTML代码实现部分
+```html
+<template>
+ <view class="content">
+
+ <view style="margin-top: 16px;">
+
+ <view style="width: 100vw; height: 40px; background-color: white;">
+ <!-- filterData:筛选数据 defaultIndex： 默认选择序列 @onSelected:选择事件 返回选择的值-->
+ <chenchuang-CCDropDownFilter :filterData='filterData' :defaultIndex='defaultIndex'
+ @onSelected='onSelected'></chenchuang-CCDropDownFilter>
+ </view>
+
+ </view>
+
+ </view>
+</template>
+
+<script>
+ export default {
+ components: {
+
+
+
+ },
+ data() {
+ return {
+
+ filterData: [
+ [{
+ name: '全省',
+ value: ''
+ }],
+
+
+ [{
+ name: '美食',
+ value: ''
+ },
+ {
+ name: '湘菜',
+ value: '1'
+ },
+ {
+ name: '川菜',
+ value: '2'
+ },
+ {
+ name: '火锅',
+ value: '3'
+ }
+ ],
+
+ [{
+ name: '排序',
+ value: ''
+ },
+ {
+ name: '好评优先',
+ value: '1'
+ },
+ {
+ name: '销量优先',
+ value: '2'
+ },
+ {
+ name: '低价优先',
+ value: '3'
+ }
+ ],
+
+ [{
+ name: '筛选',
+ value: ''
+ },
+ {
+ name: '筛选1',
+ value: '1'
+ },
+ {
+ name: '筛选2',
+ value: '2'
+ }
+ ],
+ ],
+ defaultIndex: [0, 0, 0, 0]
+
+
+
+
+
+
+
+ }
+ },
+
+ mounted() {
+
+ let cityArr = ['广州市', '深圳市', '佛山市', '东莞市', '中山市', '珠海市', '江门市', '肇庆市', '惠州市', '汕头市', '潮州市', '揭阳市', '汕尾市',
+ '湛江市', '茂名市', '阳江市', '云浮市', '韶关市', '清远市', '梅州市', '河源市'
+ ]
+ let tmpArr = this.filterData;
+ for (let s of cityArr) {
+
+ tmpArr[0].push({
+ name: s,
+ value: s
+ });
+ console.log("s = ", s);
+ }
+ console.log("filterData = " + JSON.stringify(this.filterData));
+
+ this.filterData = tmpArr;
+
+
+
+
+ },
+ methods: {
+
+ onSelected(res) {
+
+ console.log('选择res = ' + JSON.stringify(res));
+ uni.showModal({
+ title: '下拉筛选选择数据',
+ content: '所选择数据 = ' + JSON.stringify(res)
+ })
+ },
+
+
+ }
+ }
+</script>
+
+<style scoped>
+ page {
+
+ background-color: '#F6F7FA';
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ /* background-color: white; */
+
+
+ }
+
+ .mui-content-padded {
+ margin: 6px 14px;
+ /* background-color: #ffffff; */
+ }
+
+ .lineV {
+
+ margin-top: 0px;
+ margin-left: 15px;
+ width: calc(100vw - 30px);
+ height: 1px;
+ background-color: #F5F5F5;
+
+ }
+
+ .hotSearchTitV {
+ margin-left: 14px;
+ margin-top: 4px;
+ width: 170px;
+ height: 22px;
+ font-size: 14px;
+ font-family: PingFangSC-Medium, PingFang SC;
+ font-weight: 500;
+ color: #161616;
+ line-height: 22px;
+ }
+
+ .upView {
+ display: flex;
+ flex-direction: row;
+ height: 26px;
+ margin-left: 0px;
+ }
+
+ .cellView {
+ margin-top: 4px;
+ margin-left: 5.8px;
+ height: 18px;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 2px;
+ padding: 0px 4px !important;
+ font-size: 10px;
+
+ background-color: #f5f5f5;
+ color: #818183;
+ }
+
+ .moreBtn {
+
+ height: 30px;
+ /* background-color: #F5F5F5; */
+ text-align: center;
+ font-size: 12px;
+ line-height: 30px;
+ color: #888888;
+ }
+</style>
+
+```
--
Gitblit v1.9.3