登录页修改,新增报事报修、出租房管理页面,首页链接跳转
4 files modified
16 files added
| | |
| | | "navigationBarBackgroundColor": "#4586fe", |
| | | "navigationBarTextStyle": "white" |
| | | } |
| | | }, |
| | | { |
| | | "path":"views/rental", |
| | | "style": { |
| | | "navigationBarTitleText": "出租房管理", |
| | | "enablePullDownRefresh": false, |
| | | "navigationBarBackgroundColor": "#fff", |
| | | "navigationBarTextStyle": "black" |
| | | } |
| | | } |
| | | |
| | | |
| | |
| | | "navigationBarTextStyle": "black", |
| | | "enablePullDownRefresh": false |
| | | } |
| | | }, |
| | | { |
| | | "path": "views/repair", |
| | | "style": { |
| | | "navigationBarTitleText": "报事报修", |
| | | "navigationBarBackgroundColor": "#fff", |
| | | "navigationBarTextStyle": "black", |
| | | "enablePullDownRefresh": false, |
| | | "navigationStyle": "custom" |
| | | } |
| | | } |
| | | |
| | | ] |
| | | }, |
| | | |
| | |
| | | </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>
|
| | |
| | | {
|
| | | icon: "/static/icon/nav-02.png",
|
| | | text: "报事报修",
|
| | | path: ''
|
| | | path: '/subPackage/bs/views/repair'
|
| | | },
|
| | | {
|
| | | icon: "/static/icon/nav-03.png",
|
| | |
| | | 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",
|
| | |
| | | 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() {
|
| | |
| | | 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"> |
| | |
| | | passwordIcon: "eye-off", |
| | | passwordType: "password" |
| | | }, |
| | | screenHeight:"" |
| | | screenHeight: "" |
| | | } |
| | | }, |
| | | |
| | | onLoad(){ |
| | | |
| | | onLoad() { |
| | | this.screenHeight = `${uni.getSystemInfoSync().screenHeight}px`; |
| | | }, |
| | | |
| | | |
| | | methods: { |
| | | submit() { |
| | | const that = this |
| | |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | |
| | | .bg{ |
| | | width:100%; |
| | | .bg { |
| | | width: 100%; |
| | | display: block; |
| | | } |
| | | |
| | | |
| | | .privacy-policy { |
| | | width: 100%; |
| | | padding: 40rpx 40rpx 0 80rpx; |
| | |
| | | margin-top: 40rpx; |
| | | font-weight: 700; |
| | | font-size: 32rpx; |
| | | |
| | | |
| | | } |
| | | } |
| | | |
| | | .title-img { |
| | | width: 650rpx; |
| | | height: 49rpx; |
| | | display: block; |
| | | margin: 320rpx 0 120rpx; |
| | | } |
| | | |
| | | .content { |
| | |
| | | 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%; |
| | | |
| | |
| | | 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> |
| | |
| | | } |
| | | .bgc-main{ |
| | | background-color:#017BFC; |
| | | } |
| | | .bgc-ff{ |
| | | background-color: #fff; |
| | | } |
| New file |
| | |
| | | <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> |
| New file |
| | |
| | | <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> |
| New file |
| | |
| | | ## 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 版本 |
| New file |
| | |
| | | <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> |
| New file |
| | |
| | | { |
| | | "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" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| New file |
| | |
| | | # 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> |
| | | |
| | | ``` |