<template> <view class="container"> <view class="page" :style="{'padding-top': statusBarHeight + 'px'}"> <view class="nav-top-box" @click="toCommunity()"> <view class="nav-top" v-if="houseInfo.platformName"> <view class="title">{{houseInfo.platformName}}</view> <image mode="aspectFill" src="../../static/images/icon_up.png" class="icon"></image> </view> <view class="nav-top" v-else> <view class="title" @click.stop="quickEntry">请选择小区</view> </view> </view> <view class="banner"> <swiper class="swiper" :autoplay="true" :interval="6000" :circular="true"> <swiper-item v-for="item in bannerList" :key="item.id"> <image @click="onJump(item.advUrl)" mode="aspectFill" :src="item.imageUrl" class="swiper-item"></image> </swiper-item> </swiper> </view> <view class="message" v-if="messageList.length"> <image src="../../static/images/icon_notice.png" class="icon"></image> <swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval='6000' :vertical="true"> <swiper-item :key="index" v-for="(item, index) in messageList"> <view class="text" @click="onJump(`/pages/announcementDetails/index?id=${item.id}`)">{{item.noticeTitle}}</view> </swiper-item> </swiper> </view> <view class="quick-entry" v-if="userType !== '2'"> <view class="item" @click="quickEntry(8)"> <image src="../../static/images/quick08.png" class="icon"></image> <text>社区服务</text> </view> <view class="item" @click="quickEntry(6)"> <view class="item-img"> <image src="../../static/images/quick06.png" class="icon"></image> <view v-if="communityInfo.notReadCount" class="num">{{communityInfo.notReadCount}}</view> </view> <text>公告公示</text> </view> <view class="item" @click="quickEntry(2)"> <image src="../../static/images/quick02.png" class="icon"></image> <text>房屋登记</text> </view> <view class="item" @click="quickEntry(7)"> <view class="item-img"> <image src="../../static/images/quick07.png" class="icon"></image> <view v-if="communityInfo.waitWyPay" class="num">{{communityInfo.waitWyPay}}</view> </view> <!-- <image src="../../static/images/quick07.png" class="icon"></image> --> <text>缴纳物业费</text> </view> <view class="item" @click="quickEntry(3)"> <view class="item-img"> <image src="../../static/images/quick03.png" class="icon"></image> <view v-if="communityInfo.waitShPay" class="num">{{communityInfo.waitShPay}}</view> </view> <text>生活缴费</text> </view> <view class="item" @click="quickEntry(4)"> <image src="../../static/images/quick04.png" class="icon"></image> <text>维修上报</text> </view> <view class="item" @click="quickEntry(5)"> <image src="../../static/images/quick05.png" class="icon"></image> <text>业主投诉</text> </view> <view class="item" @click="quickEntry(1)"> <view class="item-img"> <image src="../../static/images/quick01.png" class="icon"></image> <view v-if="communityInfo.noticeNotRead" class="num">{{communityInfo.noticeNotRead}}</view> </view> <text>我的消息</text> </view> </view> <template v-if="userType === '1'"> <view v-if="communityInfo.adminPhone" class="housekeeper"> <view class="information"> <image :src="communityInfo.adminAvatar" class="icon"></image> <view class="title"> <text class="name">{{communityInfo.adminName}}</text> <text class="about">您的专属管家</text> </view> </view> <view class="phone" @click="onCallPhone"> <image src="../../static/images/icon_phone.png" class="icon"></image> <text>{{communityInfo.adminPhone}}</text> </view> </view> </template> <view v-if="userType === '2'" class="maintenance-box"> <view class="tab"> <view class="item" v-for="item in maintenanceTabs" :key="item.status" :class="{'active': activeStatus === item.status}" @click="onChangeTab(item.status)"> <view class="item-box"> <view class="label">{{item.label}}</view> <view class="number">{{item.number}}</view> </view> <image src="../../static/images/icon_press02.png" class="icon"></image> </view> </view> <view v-if="maintenanceList.length"> <view class="list" v-for="item in maintenanceList" :key="item.id"> <view class="content" @click="onJump(`/pages/repairDetails/index?id=${item.id}`)"> <view class="item"> <view class="name">报修位置</view> <view class="detail">{{item.repairAddress}}</view> </view> <view class="item"> <view class="name">报修物品</view> <view class="detail">{{item.repairArticle}}</view> </view> <view class="item"> <view class="name">保修时间</view> <view class="detail">{{item.reservationTime}}</view> </view> </view> <view class="handle-box" v-if="activeStatus === 'waitReceive'"> <view class="btn" @click="onJump(`/pages/personnel/index?id=${item.id}`)">转单</view> <view class="btn" @click="onReceivingOrders(item)">接单</view> </view> </view> </view> <no-data :show="maintenanceList.length === 0" :isFull="false" text="暂无维修信息"></no-data> </view> <view class="news" v-if="councilsList.length"> <view class="title"> <text>社区活动公告</text> <image src="../../static/images/icon_more.png" class="icon"></image> </view> <view class="list"> <view class="item" v-for="item in councilsList" :key="item.id" @click="onJump(`/pages/announcementDetails/index?id=${item.id}`)"> <image :src="item.coverImg" class="icon"></image> <view class="con"> <view class="name">{{item.noticeTitle}}</view> <view class="time">社区服务中心 {{item.releaseDate}}</view> </view> </view> </view> </view> <view class="news"> <view class="title"> <text>小区活动公告</text> <image src="../../static/images/icon_more.png" class="icon"></image> </view> <view class="list" v-if="communityList.length"> <view class="item" v-for="item in communityList" :key="item.id" @click="onJump(`/pages/announcementDetails/index?id=${item.id}`)"> <image :src="item.coverImg" class="icon"></image> <view class="con"> <view class="name">{{item.noticeTitle}}</view> <view class="time">小区 {{item.releaseDate}}</view> </view> </view> </view> <no-data :show="communityList.length === 0" :isFull="false" text="暂无活动公告"></no-data> </view> <view class="news" v-if="committeeList.length"> <view class="title"> <text>业委会公告</text> <image src="../../static/images/icon_more.png" class="icon"></image> </view> <view class="list"> <view class="item" v-for="item in committeeList" :key="item.id" @click="onJump(`/pages/announcementDetails/index?id=${item.id}`)"> <image :src="item.coverImg" class="icon"></image> <view class="con"> <view class="name">{{item.noticeTitle}}</view> <view class="time">业委会 {{item.releaseDate}}</view> </view> </view> </view> </view> <authorization-modal ref="authorization" @loginEnd="onLoginEnd" @refuse="onRefuse" /> </view> </view> </template> <script> import noData from '@/components/no-data/no-data' import serverConfig from '@/config/server_config.js'; import { getPropertyAdvApi, queryCommunityRoomByUnitIdApi, getCommunityInfoApi, getAdvertisementApi, getommunityRepairApi, editCommunityComplaintApi, getCompanyEmployeeApi } from '@/config/api.js' import {Moment} from '@/utils/moment.js' import { authorizationModal } from '@/components/authorization.vue' let timer = null, hasHouseFlag = false; export default { name: 'home', components: { authorizationModal, noData }, data() { return { statusBarHeight: 24, userType: '0', // 1:业主,2:维修员 houseInfo: {}, // 当前小区信息 waitList: [], // 待审核或已驳回列表 bannerList: [], communityInfo: {}, messageList: [], councilsList: [], communityList: [], committeeList: [], activeStatus: 'waitReceive', maintenanceTabs: [ {label: '待接单', status: 'waitReceive', number: 0}, {label: '维修中', status: 'inRepair', number: 0}, {label: '已完成', status: 'finishAuditPass', number: 0} ], maintenancePage: 1, maintenanceList: [] } }, computed: { isRefuse() { return this.waitList.some(item=>item.auditStatus === 'refuse') } }, methods: { async getPropertyAdv() { let {result} = await getPropertyAdvApi({ pageNo: 1, pageSize: 10, onshelfStatus: 'onShelf' }) let bannerList = result.records.map(item=> { return { ...item, imageUrl: serverConfig.baseURL + '/sys/common/static/' + item.advImageUrl } }) if(bannerList.length === 0) { this.bannerList.push({ id: '123423423', imageUrl: 'https://life.cloud.hjxbc.cn/sys/common/static/miniapp/banner.jpg' }) } else { this.bannerList = bannerList } }, toCommunity() { uni.navigateTo({ url: `/pages/community/index?code=${this.houseInfo.platformCode}` }); }, quickEntry(type) { let isLogin = uni.getStorageSync('openid') // 登录了 if (!!isLogin) { let propertyCode = uni.getStorageSync('property_code') // 选择了小区 if(propertyCode) { let currentHouseVerify = getApp().globalData.currentHouseVerify if(currentHouseVerify) { if (type == 1) { uni.navigateTo({ url: '/pages/message/index' }); } else if (type == 2) { // if(this.waitList.length) { // uni.navigateTo({ // url: `/pages/housingAudit/index?id=${this.waitList[0].id}` // }); // } else { // uni.navigateTo({ // url: '/pages/housing/index' // }); // } if(hasHouseFlag) { uni.navigateTo({ url: '/pages/myHouse/index' }); } else { uni.navigateTo({ url: '/pages/housing/index' }); } } else if (type == 3) { uni.navigateTo({ url: '/pages/payCost/index', }); } else if (type == 4) { uni.navigateTo({ url: '/pages/maintenance/index' }); } else if (type == 5) { uni.navigateTo({ url: '/pages/complaints/index' }); } else if (type == 6) { uni.navigateTo({ url: '/pages/announcement/index' }); } else if (type == 7) { uni.navigateTo({ url: `/pages/payCostProperty/index?code=SFLX00001` }); } else if (type == 8) { // uni.navigateTo({ // url: '/pages/announcement/community' // }); uni.scanCode({ success: function (res) { uni.navigateTo({ url: '/pages/h5Template/h5Template?webUrl=' + encodeURIComponent(res.result) }); } }); } } else { if(this.waitList.length) { if(type == 2) { uni.navigateTo({ url: `/pages/housingAudit/index?id=${this.waitList[0].id}` }); } else { if(this.isRefuse) { uni.showToast({ icon: "none", title: "您的房屋认证已被驳回,请确认!" }) if(timer) clearTimeout(timer) timer = null timer = setTimeout(()=> { uni.navigateTo({ url: `/pages/housingAudit/index?id=${this.waitList[0].id}` }); }, 1500) } else { uni.showToast({ icon: "none", title: "您的房屋认证正在审核中,请稍等!" }) if(timer) clearTimeout(timer) timer = null timer = setTimeout(()=> { uni.navigateTo({ url: `/pages/housingAudit/index?id=${this.waitList[0].id}` }); }, 1500) } } } else { if(type == 2) { uni.navigateTo({ url: '/pages/housing/index', }); } else { uni.showToast({ icon: "none", title: '暂未查到业主信息,请认证!' }) if(timer) clearTimeout(timer) timer = null timer = setTimeout(()=> { uni.navigateTo({ url: '/pages/housing/index', }); }, 1500) } } } } else { this.toCommunity() } } else { uni.hideTabBar() this.$nextTick(() => { this.$refs.authorization.onOpenLogin() }); } }, onLoginEnd() { uni.showTabBar() this.getUserInfo() }, onRefuse() { uni.showTabBar() }, async getUserInfo() { let openId = uni.getStorageSync('openid') let phone = uni.getStorageSync('user_phone') getApp().globalData.registerInfo = {} let {result} = await queryCommunityRoomByUnitIdApi({openId, phone}) if(result) { let type = uni.getStorageSync('user_type') if(type) { let platformCode = uni.getStorageSync('platform_code') if(platformCode) { if(type === '1') { // 进入小区 let houseData = result.communityOwners.filter(item=>item.platformCode === platformCode) hasHouseFlag = houseData.length > 0 this.waitList = houseData.filter(item=>item.auditStatus !== 'auditPass') if(houseData.length) { // 用户当前小区有房屋认证 let passHouse = houseData.filter(item=> item.auditStatus === 'auditPass') if(passHouse.length) { // 登录时拿到已经验证的 this.userType = '1' getApp().globalData.currentHouseVerify = true uni.setStorageSync('user_name', passHouse[0].residentName) let userAvatar = passHouse[0].avatar ? `${serverConfig.imageURL}${passHouse[0].avatar}` : '' uni.setStorageSync('user_avatar', userAvatar) this.houseInfo = { id: passHouse[0].id, platformCode: passHouse[0].platformCode, platformName: passHouse[0].platformName } uni.setStorageSync('platform_name', passHouse[0].platformName) this.getCommunityInfo() this.getAdvertisement() } else { getApp().globalData.currentHouseVerify = false this.userType = '0' let platformName = uni.getStorageSync('platform_name') this.houseInfo = { platformCode: platformCode, platformName: platformName } uni.removeStorageSync('user_name') uni.removeStorageSync('user_avatar') } } else { // 用户没有小区 getApp().globalData.currentHouseVerify = false this.userType = '0' let platformName = uni.getStorageSync('platform_name') this.houseInfo = { platformCode: platformCode, platformName: platformName } uni.removeStorageSync('user_name') uni.removeStorageSync('user_avatar') uni.showToast({ icon: "none", title: '暂未查到业主信息,请认证!' }) // if(timer) clearTimeout(timer) // timer = null // timer = setTimeout(()=> { // uni.navigateTo({ // url: '/pages/housing/index', // }); // }, 1500) // let flag = result.communityOwners.some(item.platformCode === platformCode) // if(flag) { // } else { // } } if(result.employeeVos) { // 是否有维修员 uni.setStorageSync('employee_code', result.employeeVos.comList[0].comCode) } } if(type === '2') { // 进入设备管理员 if(result.employeeVos && result.employeeVos.comList && result.employeeVos.comList.length) { this.userType = '2' uni.setStorageSync('user_name', result.employeeVos.employeeName) let employeeAvatar = result.employeeVos.employeeAvatar ? `${serverConfig.imageURL}${result.employeeVos.employeeAvatar}` : '' uni.setStorageSync('user_avatar', employeeAvatar) let employeeData = result.employeeVos.comList let houseKey = employeeData.findIndex(item=>item.comCode === platformCode) houseKey = houseKey === -1 ? 0 : houseKey this.houseInfo = { platformCode: employeeData[houseKey].comCode, platformName: employeeData[houseKey].comName } let houseList = employeeData.map(item=> { return { communityCode: item.comCode, communityName: item.comName } }) uni.setStorageSync('platform_code', employeeData[houseKey].comCode) uni.setStorageSync('user_house_list', JSON.stringify(houseList)) this.getAdvertisement() this.getMaintenanceList() // 获取待结单列表 } else { let _this = this uni.showModal({ title: '警告', content: '您的维修员身份已被禁用,请联系管理员', showCancel: false, success: function (res) { if (res.confirm) { uni.setStorageSync('user_type', '1') } } }); } } } else { let houseData = result.communityOwners getApp().globalData.currentHouseVerify = false this.userType = '0' uni.setStorageSync('property_code', houseData[0].propertyCode) uni.setStorageSync('property_name', houseData[0].propertyName) uni.setStorageSync('platform_code', houseData[0].platformCode) uni.setStorageSync('platform_name', houseData[0].platformName) this.houseInfo = { platformCode: houseData[0].platformCode, platformName: houseData[0].platformName } uni.setStorageSync('user_name', houseData[0].residentName) let userAvatar = houseData[0].avatar ? `${serverConfig.imageURL}${houseData[0].avatar}` : '' uni.setStorageSync('user_avatar', userAvatar) this.waitList = houseData.filter(item=>item.auditStatus !== 'auditPass') } } else { // 登录后首次进入 let houseData = result.communityOwners if(houseData.length) { uni.setStorageSync('user_type', '1') let passHouse = houseData.filter(item=> item.auditStatus === 'auditPass') if(passHouse.length) { // 第一次登录时有已验证的 getApp().globalData.currentHouseVerify = true this.userType = '1' uni.setStorageSync('user_name', passHouse[0].residentName) let userAvatar = passHouse[0].avatar ? `${serverConfig.imageURL}${passHouse[0].avatar}` : '' uni.setStorageSync('user_avatar', userAvatar) this.houseInfo = { id: passHouse[0].id, platformCode: passHouse[0].platformCode, platformName: passHouse[0].platformName } uni.setStorageSync('property_code', passHouse[0].propertyCode) uni.setStorageSync('property_name', passHouse[0].propertyName) uni.setStorageSync('platform_code', passHouse[0].platformCode) uni.setStorageSync('platform_name', passHouse[0].platformName) this.waitList = houseData.filter(item=>(item.auditStatus !== 'auditPass' && item.platformCode === passHouse[0].platformCode)) this.getCommunityInfo() this.getAdvertisement() } else { getApp().globalData.currentHouseVerify = false this.houseInfo = { id: houseData[0].id, platformCode: houseData[0].platformCode, platformName: houseData[0].platformName } uni.setStorageSync('property_code', houseData[0].propertyCode) uni.setStorageSync('property_name', houseData[0].propertyName) uni.setStorageSync('platform_code', houseData[0].platformCode) uni.setStorageSync('platform_name', houseData[0].platformName) this.waitList = houseData.filter(item=>(item.auditStatus !== 'auditPass' && item.platformCode === houseData[0].platformCode)) } } if(result.employeeVos) { if(houseData.length === 0) { this.userType = '2' uni.setStorageSync('user_type', '2') uni.setStorageSync('user_name', result.employeeVos.employeeName) let employeeAvatar = result.employeeVos.employeeAvatar ? `${serverConfig.imageURL}${result.employeeVos.employeeAvatar}` : '' uni.setStorageSync('user_avatar', employeeAvatar) let employeeData = result.employeeVos.comList this.houseInfo = { platformCode: employeeData[0].comCode, platformName: employeeData[0].comName } let houseList = employeeData.map(item=> { return { platformCode: item.comCode, platformName: item.comName } }) uni.setStorageSync('platform_code', houseList[0].platformCode) uni.setStorageSync('user_house_list', JSON.stringify(houseList)) this.getAdvertisement() this.getMaintenanceList() // 获取待结单列表 } else { uni.setStorageSync('employee_code', result.employeeVos.comList[0].comCode) } } } } }, async getCommunityInfo() { let {result} = await getCommunityInfoApi() let communityInfo = { waitWyPay: result.waitWyPay, waitShPay: result.waitShPay, notReadCount: result.notReadCount, noticeNotRead: result.noticeNotRead, adminAvatar: serverConfig.baseURL + '/sys/common/static/' + result.communityBuilding.adminAvatar, adminName: result.communityBuilding.buildingAdmin, adminPhone: result.communityBuilding.adminPhone } this.communityInfo = {...communityInfo} }, async getAdvertisement() { let {result} = await getAdvertisementApi({communityCode: this.houseInfo.platformCode}) this.messageList = result.degreeNotice this.councilsList = result.councils.map(item=> { return { ...item, releaseDate: new Moment(item.releaseTime).format('YYYY/MM/DD'), coverImg: serverConfig.baseURL + '/sys/common/static/' + item.noticeImg } }) this.communityList = result.community.map(item=> { return { ...item, releaseDate: new Moment(item.releaseTime).format('YYYY/MM/DD'), coverImg: serverConfig.baseURL + '/sys/common/static/' + item.noticeImg } }) this.committeeList = result.committee.map(item=> { return { ...item, releaseDate: new Moment(item.releaseTime).format('YYYY/MM/DD'), coverImg: serverConfig.baseURL + '/sys/common/static/' + item.noticeImg } }) }, onChangeTab(status) { this.maintenancePage = 1 this.activeStatus = status this.maintenanceList = [] this.getMaintenanceList() }, async getMaintenanceList() { let {result} = await getommunityRepairApi({ pageNumber: this.maintenancePage, pageSize: 10, repairStatus: this.activeStatus }) this.maintenanceTabs[0].number = result.waitCount this.maintenanceTabs[1].number = result.runCount this.maintenanceTabs[2].number = result.finishCount this.maintenanceList = result.pageList.records // this.getCompanyEmployee() }, async getCompanyEmployee() { let {result} = await getCompanyEmployeeApi() }, onCallPhone() { uni.makePhoneCall({ phoneNumber: this.communityInfo.adminPhone }); }, onJump(url) { if(!url) return uni.navigateTo({ url }); }, onReceivingOrders(row) { let _this = this uni.showModal({ title: '提示', content: '确认接单嘛?', success: function (res) { if (res.confirm) { _this.onTransferOrder(row) } else if (res.cancel) { console.log('用户点击取消'); } } }); }, async onTransferOrder(row) { let data = await editCommunityComplaintApi({ ...row, repairStatus: 'inRepair' }) if(timer) clearTimeout(timer) timer = null timer = setTimeout(()=> { uni.showToast({ title: '接单成功!' }); setTimeout(()=> { this.maintenancePage = 1 this.getMaintenanceList() }, 1500) }, 30) }, initData() { this.getPropertyAdv() let isLogin = uni.getStorageSync('openid') if(!!isLogin) { this.getUserInfo() } else { this.userType = '1' } } }, onLoad() { const menuButton = wx.getMenuButtonBoundingClientRect() this.statusBarHeight = menuButton.top this.initData() }, onPullDownRefresh() { this.initData() if(timer) clearTimeout(timer) timer = null timer = setTimeout(()=> { uni.stopPullDownRefresh(); }, 1500) }, onHide() { if(timer) clearTimeout(timer) timer = null } } </script> <style lang="scss" scoped> .container { width: 100%; min-height: 100vh; background-position: top center; background-repeat: no-repeat; background-size: cover; background-image: url('https://life.cloud.hjxbc.cn/sys/common/static/miniapp/bg_home.png'); } .page { padding-left: 30rpx; padding-right: 30rpx; padding-bottom: 30rpx; } .nav-top-box { width: 100%; height: 90rpx; .nav-top { width: 100%; height: 90rpx; line-height: 90rpx; display: flex; align-items: center; .title { font-size: 32rpx; color: #1D1F1C; font-weight: 700; } .icon { width: 20rpx; height: 12rpx; margin-left: 15rpx; } } } .banner { .swiper-item { width: 100%; height: 100%; border-radius: 16rpx; } } .message { height: 70rpx; line-height: 70rpx; overflow: hidden; line-height: 34rpx; background-color: #ffffff; border-radius: 16rpx; margin-top: 30rpx; display: flex; align-items: center; padding: 0 30rpx; .icon { width: 34rpx; height: 28rpx; margin-right: 20rpx; } .swiper { width: 100%; height: 70rpx; line-height: 70rpx; .text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 28rpx; color: #373737; } } } .quick-entry { background-color: #ffffff; padding: 40rpx 30rpx 0; border-radius: 16rpx; display: flex; flex-wrap: wrap; margin-top: 30rpx; .item { width: 25%; display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 40rpx; .item-img { position: relative; font-size: 0; .num { position: absolute; top: -5px; left: 75%; font-size: 20rpx; color: #FFFFFF; padding: 2px 4px; background-color: #F6C864; border-radius: 20rpx; min-width: 20rpx; text-align: center; } } .icon { width: 74rpx; height: 74rpx; } text { margin-top: 12rpx; font-size: 28rpx; color: #373737; } } } .housekeeper { display: flex; justify-content: space-between; align-items: center; border-radius: 16rpx; background-position: top center; background-repeat: no-repeat; background-size: cover; background-image: url('https://life.cloud.hjxbc.cn/sys/common/static/miniapp/bg_guanjia.png'); padding: 20rpx 30rpx; margin: 30rpx 0; .information { display: flex; justify-content: center; align-items: center; .icon { width: 70rpx; height: 70rpx; border: 1px solid #F6C864; border-radius: 702rpx; } .title { margin-left: 20rpx; .name { font-size: 28rpx; color: #ffffff; font-weight: bold; display: block; } .about { font-size: 24rpx; color: #ffffff; display: block; } } } .phone { height: 30rpx; line-height: 30rpx; background-color: #ffffff; border-radius: 30rpx; padding: 10rpx 24rpx; display: flex; justify-content: center; align-items: center; .icon { width: 24rpx; height: 22rpx; } text { margin-left: 14rpx; font-size: 24rpx; color: #5159EA; } } } .news { background-color: #ffffff; padding: 30rpx; border-radius: 16rpx; margin-top: 30rpx; /deep/ .nodate-box { padding: 100rpx 0; } .title { // height: 32rpx; // line-height: 32rpx; display: flex; justify-content: space-between; align-items: center; text { font-size: 32rpx; color: #373737; font-weight: bold; padding-left: 18rpx; border-left: 3px solid #6852F0; } .icon { width: 10rpx; height: 16rpx; } } .list { .item { display: flex; margin-top: 20px; &:not(:last-child) { border-bottom: 1px solid #F0F0F2; padding-bottom: 20px; } .icon { flex: none; width: 280rpx; height: 165rpx; border-radius: 6rpx; } .con { margin-left: 30rpx; .name { font-size: 30rpx; color: #373737; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all; /* 追加这一行代码 */ } .time { font-size: 24rpx; color: #B6B6BA; height: 30rpx; line-height: 30rpx; margin-top: 30rpx; } } } } } .maintenance-box { margin-top: 30rpx; /deep/ .nodate-box { margin-top: 30rpx; padding: 100rpx 0; } .tab { padding: 30rpx 0; display: flex; justify-content: space-around; background: #FFFFFF; box-shadow: 0rpx 0rpx 25rpx 0rpx rgba(81,89,234,0.06); border-radius: 16rpx; .item { position: relative; &.active { .item-box .label { color: #373737; } .icon { opacity: 1; } } .item-box { display: flex; align-items: center; .label { font-size: 28rpx; color: #9D9CA6; transition: color .5s; } .number { min-width: 30rpx; height: 30rpx; background-color: #F6C864; border-radius: 15rpx; font-size: 22rpx; color: #FFFFFF; padding: 0 8rpx; line-height: 30rpx; text-align: center; margin-left: 10rpx; } } .icon { width: 40rpx; height: 8rpx; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .5s; } } } .list { margin-top: 30rpx; background: #FFFFFF; box-shadow: 0rpx 0rpx 25rpx 0rpx rgba(81,89,234,0.06); border-radius: 16rpx; padding: 0 30rpx; .content { // margin-top: 30rpx; // background: #FFFFFF; // box-shadow: 0rpx 0rpx 25rpx 0rpx rgba(81,89,234,0.06); // border-radius: 16rpx; padding: 30rpx 0; .item { display: flex; &:not(:last-child) { margin-bottom: 20rpx; } // height: 70rpx; // line-height: 70rpx; .name { width: 25%; font-size: 28rpx; color: #CECED3; } .detail { width: 75%; font-size: 28rpx; color: #373737; &.waitPending .tag { color: #F1BD4D; border: 1px solid #F1BD4D; background-color: #FFFCF6; } &.pending .tag { color: #6A59F2; border: 1px solid #6A59F2; background-color: #F6F5FF; } &.finish .tag { color: #B6B6BA; border: 1px solid #B6B6BA; background-color: #F8F8F8; } .tag { height: 40rpx; line-height: 40rpx; font-size: 22rpx; padding: 2rpx 20rpx; border-radius: 30rpx; display: inline-block; } } } .text { height: auto; .detail { line-height: 52rpx; } .image { display: flex; .icon { width: 120rpx; height: 120rpx; border-radius: 10rpx; margin-right: 10rpx; } } } } .handle-box { border-top: 1rpx solid #F0F0F2; height: 95rpx; display: flex; align-items: center; justify-content: flex-end; .btn { width: 200rpx; height: 50rpx; border: 1rpx solid #B5B8ED; border-radius: 25rpx; margin-left: 30rpx; font-size: 28rpx; color: #6A59F2; line-height: 50rpx; text-align: center; } } } } </style>