Lou
2023-11-04 6b447a9c1661a9de1bd27d51dedd8bab5e394a27
登录页修改,新增报事报修、出租房管理页面,首页链接跳转
4 files modified
16 files added
1069 ■■■■■ changed files
pages.json 20 ●●●●● patch | view | raw | blame | history
pages/home/index.vue 30 ●●●●● patch | view | raw | blame | history
pages/login/login-account.vue 78 ●●●● patch | view | raw | blame | history
static/base.css 3 ●●●●● patch | view | raw | blame | history
static/icon/list-01.png patch | view | raw | blame | history
static/icon/list-02.png patch | view | raw | blame | history
static/icon/login-title.png patch | view | raw | blame | history
static/icon/nav-09.png patch | view | raw | blame | history
static/icon/nav-10.png patch | view | raw | blame | history
static/icon/nav-bg-06.png patch | view | raw | blame | history
static/icon/nav-bg-07.png patch | view | raw | blame | history
static/icon/nav-bg-08.png patch | view | raw | blame | history
static/icon/nav-bg-09.png patch | view | raw | blame | history
static/img/repair-bg.png patch | view | raw | blame | history
subPackage/bs/views/repair.vue 194 ●●●●● patch | view | raw | blame | history
subPackage/workbench/views/rental.vue 188 ●●●●● patch | view | raw | blame | history
uni_modules/chenchuang-CCDropDownFilter/changelog.md 8 ●●●●● patch | view | raw | blame | history
uni_modules/chenchuang-CCDropDownFilter/components/chenchuang-CCDropDownFilter/chenchuang-CCDropDownFilter.vue 242 ●●●●● patch | view | raw | blame | history
uni_modules/chenchuang-CCDropDownFilter/package.json 84 ●●●●● patch | view | raw | blame | history
uni_modules/chenchuang-CCDropDownFilter/readme.md 222 ●●●●● patch | view | raw | blame | history
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"
                    }
                }
            ]
        },
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() {
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>
static/base.css
@@ -97,4 +97,7 @@
}
.bgc-main{
    background-color:#017BFC;
}
.bgc-ff{
    background-color: #fff;
}
static/icon/list-01.png
static/icon/list-02.png
static/icon/login-title.png
static/icon/nav-09.png
static/icon/nav-10.png
static/icon/nav-bg-06.png
static/icon/nav-bg-07.png
static/icon/nav-bg-08.png
static/icon/nav-bg-09.png
static/img/repair-bg.png
subPackage/bs/views/repair.vue
New file
@@ -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>
subPackage/workbench/views/rental.vue
New file
@@ -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>
uni_modules/chenchuang-CCDropDownFilter/changelog.md
New file
@@ -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 版本
uni_modules/chenchuang-CCDropDownFilter/components/chenchuang-CCDropDownFilter/chenchuang-CCDropDownFilter.vue
New file
@@ -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>
uni_modules/chenchuang-CCDropDownFilter/package.json
New file
@@ -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"
        }
      }
    }
  }
}
uni_modules/chenchuang-CCDropDownFilter/readme.md
New file
@@ -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>
```