693 lines
16 KiB
Vue
693 lines
16 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="bj"></view>
|
||
<view class="toptit" @click="topage(4)">
|
||
<u-icon name="arrow-left" color="#fff" size="38"></u-icon> 用户页面
|
||
</view>
|
||
|
||
<view class="gonggao" @click="btntopgg">
|
||
<u-icon name="volume-fill" color="#fff" style="position: absolute;left: 20rpx;" size="32"></u-icon>
|
||
<view class="container">
|
||
<view class="scroll-text">
|
||
<view class="scroll-item">
|
||
{{announcements.noticeTitle == null ? '暂无最新公告！！！' : announcements.noticeTitle}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-icon name="arrow-right" color="#fff" style="position: absolute;right: 10rpx;" size="32"></u-icon>
|
||
</view>
|
||
|
||
<!-- 公告弹窗 -->
|
||
<view class="noticetc" v-if="gonggaoflag">
|
||
<view class="name">
|
||
公告
|
||
</view>
|
||
<view class="biaoti">
|
||
{{gonggaoxq.noticeTitle}}
|
||
</view>
|
||
<!-- <view class="cont" v-html="gonggaoxq.noticeContent"></view> -->
|
||
<u-parse :html="gonggaoxq.noticeContent" style="width: 100%;height: 620rpx;background-color: #efefef;padding: 10rpx;box-sizing: border-box;margin-top: 20rpx;"></u-parse>
|
||
<view class="btn" @click="btnggtc">
|
||
我知道了
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="gonggaoflag"></view>
|
||
<view class="cont_box">
|
||
<view class="top" style="margin-top: 0;">
|
||
运营管理
|
||
</view>
|
||
<view class="app_box">
|
||
<view class="cont" @click="topage(12)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uXTQa43wL8rxZVFznyuP" mode=""></image>
|
||
<view class="text">
|
||
运营区域
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="topage(11)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uBlRceBO9lNsFyZsJkm6" mode=""></image>
|
||
<view class="text">
|
||
运营配置
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="toMap">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uXTQa43wL8rxZVFznyuP" mode=""></image>
|
||
<view class="text">
|
||
电子围栏
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="btnjs">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/urekbXiCM5giUxV4bcge" mode=""></image>
|
||
<view class="text">
|
||
门店管理
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="topage(10)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uLB9q8EyyKku919PWbxF" mode=""></image>
|
||
<view class="text">
|
||
收费模版
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="topage(7)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ug2Zhz3dClUFTSzL1xTD" mode=""></image>
|
||
<view class="text">
|
||
故障审核
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="btnreturnbike">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/usv2hT8WU6LTBQXemobM" mode=""></image>
|
||
<view class="text">
|
||
还车审核
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="top">
|
||
车辆管理
|
||
</view>
|
||
<view class="app_box">
|
||
<view class="cont" @click="topage(2)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u4jQnprb9OdxcyUSzEfs" mode=""></image>
|
||
<view class="text">
|
||
车辆管理
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="topage(9)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u9TppL8PmOJh0znzlZRX" mode=""></image>
|
||
<view class="text">
|
||
车型管理
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="top">
|
||
其他
|
||
</view>
|
||
<view class="app_box">
|
||
<view class="cont" @click="btnskzh">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uCHTXshmf1f6uXcyHByo" mode=""></image>
|
||
<view class="text">
|
||
收款账户
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="btnjm">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/umuP2xRE3AgzWymlxU10" mode=""></image>
|
||
<view class="text">
|
||
加盟伙伴
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="btnywry">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/umuP2xRE3AgzWymlxU10" mode=""></image>
|
||
<view class="text">
|
||
运维人员
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="btnkefu">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u0FiBc30Xi6SzmrIqON2" mode=""></image>
|
||
<view class="text">
|
||
客服设置
|
||
</view>
|
||
</view>
|
||
<!-- <view class="cont" @click="btngggl">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ui8unTyOFXCkgier5F5P" mode=""></image>
|
||
<view class="text">
|
||
公告管理
|
||
</view>
|
||
</view> -->
|
||
<!-- <view class="cont" @click="btnmz">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ur7n7u3LdDMLKQdzTtD7" mode=""></image>
|
||
<view class="text">
|
||
免责协议
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="btnggsz">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uov2297NuScFZayry0iH" mode=""></image>
|
||
<view class="text">
|
||
广告设置
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<u-select v-model="show" :list="list" title='选择运营区' @confirm="confirm" v-if="list.length <= 5"></u-select>
|
||
<!-- 自定义选择器 -->
|
||
<view class="custom-select" v-if="show && list.length > 5">
|
||
<view class="mask" @click="show = false"></view>
|
||
<view class="select-content">
|
||
<view class="select-header">
|
||
<text>选择运营区</text>
|
||
<text class="close" @click="show = false">×</text>
|
||
</view>
|
||
<view class="search-box">
|
||
<input type="text" v-model="searchKey" placeholder="搜索运营区" @input="handleSearch" />
|
||
</view>
|
||
<scroll-view scroll-y class="select-list">
|
||
<view class="select-item" v-for="item in displayList" :key="item.value" @click="selectItem(item)"
|
||
:class="{ 'highlight': searchKey && item.label.includes(searchKey) }">
|
||
{{ item.label }}
|
||
<view style="font-size: 24rpx;color: #999;margin-left: auto;"> {{ item.deptName }}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<TabBar :indexs='0' style=""></TabBar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import TabBar from '@/page_shanghu/components/tab-bar/tab-bar.vue'
|
||
var xBlufi = require("@/components/blufi/xBlufi.js")
|
||
export default {
|
||
components: { TabBar },
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#FFFFFF",
|
||
},
|
||
sn: '',
|
||
areaId: 0,
|
||
areaInfo: {},
|
||
list: [],
|
||
show: false,
|
||
info: {},
|
||
userinfo: {},
|
||
deptId: null,
|
||
menuList: [],
|
||
searchKey: '',
|
||
displayList: [], // 用于显示的列表
|
||
gonggaoxq:{},
|
||
gonggaoflag:false,
|
||
announcements: {},
|
||
yyqid:''
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.yyqid = option.id
|
||
wx.openBluetoothAdapter({
|
||
success: function (res) {
|
||
console.log('蓝牙适配器初始化成功')
|
||
xBlufi.initXBlufi(1)
|
||
xBlufi.notifyStartDiscoverBle({'isStart': true})
|
||
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
|
||
},
|
||
fail: function (err) {
|
||
console.error('蓝牙适配器初始化失败，可能是因为没有权限', err)
|
||
}
|
||
})
|
||
},
|
||
onShow() {
|
||
this.getgonggao()
|
||
this.deptId = uni.getStorageSync('deptId')
|
||
if (uni.getStorageSync('adminAreaid')) {
|
||
this.areaId = uni.getStorageSync('adminAreaid')
|
||
// this.getArea()
|
||
this.getinfo()
|
||
// this.getareaList()
|
||
}
|
||
|
||
},
|
||
computed: {
|
||
userId() {
|
||
return this.$store.getters.userId
|
||
},
|
||
// 添加过滤后的列表计算属性
|
||
filteredList() {
|
||
if (!this.searchKey) return this.list
|
||
return this.list.filter(item =>
|
||
item.label.toLowerCase().includes(this.searchKey.toLowerCase())
|
||
)
|
||
}
|
||
},
|
||
methods: {
|
||
// 点击跳转到运维人员
|
||
btnywry(){
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/yunwei/index'
|
||
})
|
||
},
|
||
// 点击跳转到电子围栏
|
||
toMap(){
|
||
uni.navigateTo({
|
||
url:'/page_shanghu/guanli/msp_set?areaId='+this.yyqid
|
||
})
|
||
},
|
||
// 点击跳转客服
|
||
btnkefu(){
|
||
uni.navigateTo({
|
||
url:'/page_user/shanghugl/ggsz?id=' + this.yyqid
|
||
})
|
||
},
|
||
// 点击跳转广告图设置
|
||
// btnggsz(){
|
||
// uni.navigateTo({
|
||
// url:'/page_user/shanghugl/ggsz'
|
||
// })
|
||
// },
|
||
// // 点击跳转免责协议
|
||
// btnmz(){
|
||
// uni.navigateTo({
|
||
// url:'/page_user/shanghugl/mianze'
|
||
// })
|
||
// },
|
||
// // 点击跳转公告管理
|
||
// btngggl(){
|
||
// uni.navigateTo({
|
||
// url:'/page_user/shanghugl/index'
|
||
// })
|
||
// },
|
||
// 点击跳转到收款账户
|
||
btnskzh(){
|
||
uni.navigateTo({
|
||
url:'/page_user/shoukuan/index'
|
||
})
|
||
},
|
||
// 点击跳转到还车审核
|
||
btnreturnbike(){
|
||
uni.navigateTo({
|
||
url:'/page_user/returnbike'
|
||
})
|
||
},
|
||
// 点击头部滚动通知
|
||
btntopgg(){
|
||
this.$u.get(`/app/notice/${this.announcements.noticeId}`).then(resp =>{
|
||
if(resp.code == 200){
|
||
this.gonggaoxq = resp.data
|
||
this.gonggaoflag = true
|
||
}
|
||
})
|
||
},
|
||
// 点击公告我知道了
|
||
btnggtc(){
|
||
this.gonggaoflag = false
|
||
uni.setStorageSync('noticeIds', this.announcements.noticeId)
|
||
},
|
||
// 获取最新公告
|
||
getgonggao(){
|
||
this.$u.get("/app/notice/new?noticeType=2").then(res =>{
|
||
if(res.code == 200){
|
||
this.announcements = res.data
|
||
this.$u.get(`/app/notice/${res.data.noticeId}`).then(resp =>{
|
||
if(resp.code == 200){
|
||
this.gonggaoxq = resp.data
|
||
if(resp.data.noticeId != uni.getStorageSync('noticeIds')){
|
||
this.gonggaoflag = true
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 点击提示功能完善中
|
||
btnjs(){
|
||
uni.showToast({
|
||
title: '功能完善中',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
},
|
||
// 点击跳转到加盟伙伴
|
||
btnjm(){
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/jiameng/index'
|
||
})
|
||
},
|
||
handleSearch(e) {
|
||
const value = e.detail.value
|
||
if (!value) {
|
||
// 搜索框为空时显示全部数据
|
||
this.displayList = this.list
|
||
} else {
|
||
// 有搜索内容时过滤数据
|
||
this.displayList = this.list.filter(item =>
|
||
item.label.toLowerCase().includes(value.toLowerCase()) ||
|
||
item.deptName.toLowerCase().includes(value.toLowerCase())
|
||
)
|
||
}
|
||
},
|
||
selectItem(item) {
|
||
this.confirm([item])
|
||
this.show = false
|
||
this.searchKey = '' // 选择后清空搜索框
|
||
this.displayList = this.list // 重置显示列表
|
||
},
|
||
getinfo() {
|
||
this.$u.get("/getInfo").then((res) => {
|
||
if (res.code == 200) {
|
||
this.userinfo = res.user
|
||
}
|
||
})
|
||
},
|
||
shows() {
|
||
if (this.list.length < 2) {
|
||
|
||
} else {
|
||
this.show = true
|
||
}
|
||
},
|
||
getareaList() {
|
||
this.$u.get('/bst/area/list').then((res) => {
|
||
if (res.code == 200) {
|
||
this.list = res.rows.map(item => ({
|
||
value: item.id,
|
||
label: item.name,
|
||
deptName: item.name
|
||
}))
|
||
this.displayList = this.list // 重置显示列表
|
||
}
|
||
})
|
||
},
|
||
confirm(e) {
|
||
uni.setStorageSync('adminAreaid', e[0].value)
|
||
this.areaId = e[0].value
|
||
this.getArea()
|
||
},
|
||
getArea() {
|
||
let id = this.areaId
|
||
this.$u.get(`/bst/area/${id}`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.areaInfo = res.data
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
topage(num) {
|
||
if (num == 0) {
|
||
uni.navigateTo({
|
||
url: '/page_shanghu/gongzuotai/worke_Operation'
|
||
})
|
||
} else if (num == 1) {
|
||
uni.navigateTo({
|
||
url: '/pages_admin/worke/worke_income'
|
||
})
|
||
} else if (num == 2) { //设备管理
|
||
uni.navigateTo({
|
||
url: '/page_shanghu/gongzuotai/woke_deviceMgmt'
|
||
})
|
||
} else if (num == 3) {
|
||
uni.navigateTo({
|
||
url: '/pages_admin/worke/worke_user'
|
||
})
|
||
} else if (num == 4) { //用户页面
|
||
uni.switchTab({
|
||
url: '/pages/my'
|
||
})
|
||
} else if (num == 5) {
|
||
uni.navigateTo({
|
||
url: '/pages_admin/worke/bind_sn'
|
||
})
|
||
} else if (num == 6) {
|
||
uni.navigateTo({
|
||
url: '/page_shanghu/gongzuotai/AccountDetails'
|
||
})
|
||
} else if (num == 7) { //故障审核
|
||
uni.navigateTo({
|
||
url: '/page_shanghu/gongzuotai/shgl'
|
||
})
|
||
} else if (num == 8) {
|
||
uni.navigateTo({
|
||
url: '/pages_adminSet/financialStatement'
|
||
})
|
||
} else if (num == 9) {
|
||
uni.navigateTo({
|
||
url: '/page_shanghu/gongzuotai/CarModel'
|
||
})
|
||
} else if (num == 10) {
|
||
uni.navigateTo({
|
||
url: '/page_shanghu/gongzuotai/ChargingTemplate'
|
||
})
|
||
} else if (num == 11) {
|
||
uni.navigateTo({
|
||
url: '/page_shanghu/gongzuotai/sysSet'
|
||
})
|
||
} else if (num == 12) { //区域设置
|
||
uni.navigateTo({
|
||
url: '/page_shanghu/gongzuotai/ParkIngList'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.mask{
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba(0,0,0,0.3);
|
||
z-index: 9;
|
||
}
|
||
.gonggao{
|
||
width: 680rpx;
|
||
height: 60rpx;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
margin: auto;
|
||
margin-top: 40rpx;
|
||
}
|
||
.container {
|
||
width: 560rpx;
|
||
height: 60rpx; /* 根据需要调整高度 */
|
||
display: flex;
|
||
align-items: center;
|
||
margin: auto;
|
||
overflow: hidden;
|
||
position: relative;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
.scroll-text {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
animation: scroll 8s linear infinite;
|
||
}
|
||
.scroll-item {
|
||
display: inline-block;
|
||
padding: 0 10px;
|
||
font-size: 16px;
|
||
}
|
||
@keyframes scroll {
|
||
0% {
|
||
transform: translateX(100%);
|
||
}
|
||
100% {
|
||
transform: translateX(-100%);
|
||
}
|
||
}
|
||
.noticetc{
|
||
width: 680rpx;
|
||
height: 950rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
top: 340rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 10;
|
||
.btn{
|
||
width: 600rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
border-radius: 50rpx;
|
||
background-color: #4297F3;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
margin: auto;
|
||
margin-top: 30rpx;
|
||
}
|
||
.name{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
margin-top: 30rpx;
|
||
}
|
||
.biaoti{
|
||
font-size: 32rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.cont{
|
||
width: 100%;
|
||
height: 620rpx;
|
||
overflow: scroll;
|
||
background-color: #ececec;
|
||
margin-top: 20rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
page {
|
||
background-color: #FFFFFF;
|
||
}
|
||
.bj{
|
||
width: 750rpx;
|
||
height: 360rpx;
|
||
background: #4297F3;
|
||
border-radius: 0 0 50rpx 50rpx;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
.custom-select {
|
||
.mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 999;
|
||
}
|
||
.select-content {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: #fff;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
z-index: 1000;
|
||
height: 50vh; // 最大高度
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-bottom: 20rpx;
|
||
.select-header {
|
||
padding: 20rpx 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #eee;
|
||
.close {
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
.search-box {
|
||
padding: 15rpx 20rpx;
|
||
border-bottom: 1px solid #eee;
|
||
input {
|
||
width: 100%;
|
||
height: 60rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 30rpx;
|
||
padding: 0 30rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.select-list {
|
||
flex: 1;
|
||
max-height: calc(50vh - 140rpx);
|
||
min-height: 260rpx; // 为列表添加最小高度
|
||
.select-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 30rpx;
|
||
border-bottom: 1px solid #eee;
|
||
font-size: 28rpx;
|
||
&.highlight {
|
||
background-color: #f0f9ff;
|
||
color: #2d8cf0;
|
||
}
|
||
&:active {
|
||
background: #f5f5f5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.page {
|
||
width: 750rpx;
|
||
.toptit {
|
||
margin-top: 100rpx;
|
||
margin-left: 44rpx;
|
||
font-size: 38rpx;
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
.cont_box {
|
||
padding: 46rpx 50rpx;
|
||
margin: 40rpx auto;
|
||
width: 680rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
.top {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
margin-top: 40rpx;
|
||
font-weight: 600;
|
||
image {
|
||
margin-right: 16rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
|
||
}
|
||
.app_box {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 20rpx;
|
||
.cont:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
.cont {
|
||
margin-right: 60rpx;
|
||
margin-top: 20rpx;
|
||
width: 96rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
.text {
|
||
margin-top: 8rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |