360 lines
10 KiB
Vue
360 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view class="hzIndex">
|
|||
|
|
<hzHeader title="服务指南"></hzHeader>
|
|||
|
|
<view class="hzContent" style="padding-top: 100upx;">
|
|||
|
|
|
|||
|
|
<view class="container box box-column " :style="'height: ' + containerHeight +'px;'" >
|
|||
|
|
<!-- url(../../static/imgs/weekbg.png) -->
|
|||
|
|
<view >
|
|||
|
|
<image style="width:100%;height: 530upx;" src="../../static/images/serviceguide/servicebackgroun.png"></image>
|
|||
|
|
<view style="position: absolute; top: 11%;left: 25%;" @click="changePoint('调度楼')">
|
|||
|
|
<image v-show="point=='调度楼'" src="../../static/images/serviceguide/diaodulouiconselect.png" style="width: 201upx;height: 215upx;"></image>
|
|||
|
|
<image v-show="point!='调度楼'" src="../../static/images/serviceguide/diaodulouicon.png" style="width: 155upx;height: 140upx;"></image>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view style="position: absolute; top: 28%;left: 14%;" @click="changePoint('科技楼')">
|
|||
|
|
<image v-show="point=='科技楼'" src="../../static/images/serviceguide/kejilouiconselect.png" style="width: 202upx;height: 215upx;"></image>
|
|||
|
|
<image v-show="point!='科技楼'" src="../../static/images/serviceguide/kejilouicon.png" style="width: 158upx;height: 140upx;"></image>
|
|||
|
|
</view>
|
|||
|
|
<view style="position: absolute; top: 22%;left: 76%;" @click="changePoint('后勤楼')">
|
|||
|
|
<image v-show="point=='后勤楼'" src="../../static/images/serviceguide/houqinlouiconselect.png" style="width: 148upx;height: 273upx;"></image>
|
|||
|
|
<image v-show="point!='后勤楼'" src="../../static/images/serviceguide/houqinlouicon.png" style="width: 92upx;height: 203upx;"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="width: 100%; display: flex;justify-content: space-between;padding: 30upx;">
|
|||
|
|
<view>
|
|||
|
|
<view v-if="point=='调度楼'" style="width: 220upx;height: 300upx;margin-top: 20upx;border-radius: 20upx;">
|
|||
|
|
<image style="width: 220upx;height: 300upx;border-radius: 20upx;" src="../../static/images/serviceguide/diaodulou.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="point=='科技楼'" style="width: 220upx;height: 300upx;margin-top: 20upx;border-radius: 20upx;">
|
|||
|
|
<image style="width: 220upx;height: 300upx;border-radius: 20upx;" src="../../static/images/serviceguide/kejilou.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="point=='后勤楼'" style="width: 220upx;height: 300upx;margin-top: 20upx;border-radius: 20upx;">
|
|||
|
|
<image style="width: 220upx;height: 300upx;border-radius: 20upx;" src="../../static/images/serviceguide/houqinlou.png"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="">
|
|||
|
|
<view style="font-size: 34upx;font-weight: 600;padding: 20upx 0upx 20upx 20upx;">
|
|||
|
|
{{point}}
|
|||
|
|
</view>
|
|||
|
|
<view style="padding: 20upx ;font-size:30upx;color: #666666;">
|
|||
|
|
职工服务指南旨在为职工提供分部服务项目便捷查询，用户可通过点击各类服务了解服务基本信息。
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="box box-between">
|
|||
|
|
<view style="width: 100%;height: 400upx;overflow: scroll;display: flex;flex-wrap: wrap;" >
|
|||
|
|
<view @click="showDetail(index)" v-for="(listItem, index) in showList" :key="index" style="height: 80upx;width: 25%;border:1px solid #07AF9E;text-align: center;border-radius: 10upx; font-size: 28upx;margin-bottom: 20upx;margin-left: 5%;line-height: 80upx;color: #07AF9E;">
|
|||
|
|
{{listItem.name}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="common-shade box box-center box-align-center" v-if="showAlert" @click="showAlert=false" >
|
|||
|
|
<view class="popup-order" style="background: white;height: 900upx;width: 90%;border-radius: 10upx;padding-top: 20upx ;overflow: auto;">
|
|||
|
|
<view style="overflow: scroll;padding: 20upx 20upx;" :style="showDetailItem.page_path?'height: 740upx;':'height: 820upx;'">
|
|||
|
|
<view style="color:#07B0A7;font-weight: 500;font-size: 36upx;text-align: center;">
|
|||
|
|
{{showDetailItem.name}}
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view style="color: #343434;font-size: 28upx;padding-bottom: 6upx;padding-top: 20upx;">
|
|||
|
|
服务简介
|
|||
|
|
</view>
|
|||
|
|
<view style="background-color: #E2F4F3;padding: 28upx;font-size: 28upx;border-radius: 10upx;">
|
|||
|
|
{{showDetailItem.content}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view style="color: #343434;font-size: 28upx;padding-bottom: 6upx;padding-top: 20upx;">
|
|||
|
|
服务时间
|
|||
|
|
</view>
|
|||
|
|
<view style="background-color: #E2F4F3;padding: 28upx;font-size: 28upx;border-radius: 10upx;">
|
|||
|
|
{{showDetailItem.service_time}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view style="color: #343434;font-size: 28upx;padding-bottom: 6upx;padding-top: 20upx;">
|
|||
|
|
服务地点
|
|||
|
|
</view>
|
|||
|
|
<view style="background-color: #E2F4F3;padding: 28upx;font-size: 28upx;border-radius: 10upx;">
|
|||
|
|
{{showDetailItem.address}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="showDetailItem.charges">
|
|||
|
|
<view style="color: #343434;font-size: 28upx;padding-bottom: 6upx;padding-top: 20upx;">
|
|||
|
|
收费标准
|
|||
|
|
</view>
|
|||
|
|
<view style="background-color: #E2F4F3;padding: 28upx;font-size: 28upx;border-radius: 10upx;">
|
|||
|
|
{{showDetailItem.charges}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="showDetailItem.phone">
|
|||
|
|
<view style="color: #343434;font-size: 28upx;padding-bottom: 6upx;padding-top: 20upx;">
|
|||
|
|
咨询电话
|
|||
|
|
</view>
|
|||
|
|
<view style="background-color: #E2F4F3;padding: 28upx;font-size: 28upx;border-radius: 10upx;">
|
|||
|
|
{{showDetailItem.phone}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="showDetailItem.remark">
|
|||
|
|
<view style="color: #343434;font-size: 28upx;padding-bottom: 6upx;padding-top: 20upx;">
|
|||
|
|
注意事项
|
|||
|
|
</view>
|
|||
|
|
<view style="background-color: #E2F4F3;padding: 28upx;font-size: 28upx;border-radius: 10upx;">
|
|||
|
|
{{showDetailItem.remark}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="showDetailItem.page_path" @click.stop="goPagePath(showDetailItem.page_path)" class="fooot-button">
|
|||
|
|
去预约
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {mapMutations,mapState} from 'vuex';
|
|||
|
|
import {getServiceGuideList} from '@/common/api.js';
|
|||
|
|
import { callbackRequest, getStorage, alertTip, formatDate, getNumDate,getWeek } from '@/common/util.js';
|
|||
|
|
import contentNone from '@/components/contentNone.vue';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
userInfo: getStorage('userInfo'),
|
|||
|
|
areas:[{id:'1',name:'科技楼'},{id:'2',name:'后勤楼'},{id:'3',name:'调度楼'}],
|
|||
|
|
areasIndex:0,
|
|||
|
|
//day:new Date().getDay(),
|
|||
|
|
containerHeight:'',
|
|||
|
|
contentHeight:'',
|
|||
|
|
imgWidth:'',
|
|||
|
|
|
|||
|
|
list:[],
|
|||
|
|
showList:[],
|
|||
|
|
showDetailItem:{},
|
|||
|
|
showAlert:false,
|
|||
|
|
point:'科技楼',
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
contentNone
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.setHeight();
|
|||
|
|
this.initData();
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState(['authUrl'])
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
showDetail(v){
|
|||
|
|
this.showDetailItem = this.showList[v];
|
|||
|
|
this.showAlert=true;
|
|||
|
|
},
|
|||
|
|
goPagePath(e){
|
|||
|
|
var url = e||"";
|
|||
|
|
if(this.authUrl.toString().indexOf(url.split("?")[0])==-1){
|
|||
|
|
alertTip("暂无访问权限");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
changePoint(a){
|
|||
|
|
this.point = a;
|
|||
|
|
var arr = [];
|
|||
|
|
for(var i=0;i<this.list.length;i++){
|
|||
|
|
if(this.list[i].point==a){
|
|||
|
|
if(a=='后勤楼'){
|
|||
|
|
if(this.list[i].name!="洗车服务"){
|
|||
|
|
arr.push(this.list[i]);
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
arr.push(this.list[i]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
console.log(arr)
|
|||
|
|
this.showList=arr;
|
|||
|
|
},
|
|||
|
|
setHeight() {
|
|||
|
|
let windowHeight = uni.getSystemInfoSync().windowHeight;//页面可见区域
|
|||
|
|
let windowWidth = uni.getSystemInfoSync().windowWidth;
|
|||
|
|
this.containerHeight = windowHeight;
|
|||
|
|
this.contentHeight = windowHeight-60-46-50;
|
|||
|
|
this.imgWidth = (windowWidth-50)*0.5;
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
initData() {
|
|||
|
|
let params = {
|
|||
|
|
method: getServiceGuideList,
|
|||
|
|
data: {
|
|||
|
|
userId: this.userInfo.id,
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
callbackRequest(params).then(res => {
|
|||
|
|
if (res.data.returnCode == 1) {
|
|||
|
|
var result = res.data.returnData||[];
|
|||
|
|
this.list = result;
|
|||
|
|
var arr = [];
|
|||
|
|
for(var i=0;i<this.list.length;i++){
|
|||
|
|
if(this.list[i].point=='科技楼'){
|
|||
|
|
arr.push(this.list[i]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.showList=arr;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
image{
|
|||
|
|
will-change: transform
|
|||
|
|
}
|
|||
|
|
.common-shade{
|
|||
|
|
position:fixed;
|
|||
|
|
top:0;
|
|||
|
|
left:0;
|
|||
|
|
width:100%;
|
|||
|
|
height:100vh;
|
|||
|
|
background: rgba(0,0,0,0.7);
|
|||
|
|
z-index:99;
|
|||
|
|
}
|
|||
|
|
.chooseArea{
|
|||
|
|
font-size: 32upx!important;
|
|||
|
|
color: #4db4ea!important;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.areas{
|
|||
|
|
padding: 0upx 20upx;
|
|||
|
|
font-size: 26upx;
|
|||
|
|
}
|
|||
|
|
.menuType{
|
|||
|
|
padding: 18upx 60upx;
|
|||
|
|
font-size: 24upx;
|
|||
|
|
border: 1px solid #E5E5E5;
|
|||
|
|
border-radius: 50upx;
|
|||
|
|
color: #666;
|
|||
|
|
background-color: #E5E5E5;
|
|||
|
|
}
|
|||
|
|
.chooseMenuType{
|
|||
|
|
border: 1px solid #4db4ea;
|
|||
|
|
background-color: white;
|
|||
|
|
color: #4db4ea;
|
|||
|
|
}
|
|||
|
|
.bg{
|
|||
|
|
height: 120upx;
|
|||
|
|
width: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
.box {
|
|||
|
|
display: flex;
|
|||
|
|
display: -webkit-flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-row-reverse {
|
|||
|
|
flex-direction: row;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*上下排列*/
|
|||
|
|
.box-column {
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*上下排列*/
|
|||
|
|
.box-left {
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*居右*/
|
|||
|
|
.box-right {
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*居左*/
|
|||
|
|
.box-center {
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*居中*/
|
|||
|
|
.box-between {
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*两端对齐*/
|
|||
|
|
.box-align-center {
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-wrap {
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.scroll-view {
|
|||
|
|
border-radius: 20upx 20upx 0upx 0upx;
|
|||
|
|
padding: 30upx 0;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
width: 100%;
|
|||
|
|
background: #fff;
|
|||
|
|
.time-item-box {
|
|||
|
|
padding: 0 10upx;
|
|||
|
|
margin: 0 16upx;
|
|||
|
|
display: inline-block;
|
|||
|
|
text-align: center;
|
|||
|
|
.time {
|
|||
|
|
display: block;
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
.week {
|
|||
|
|
display: block;
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 32upx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.time-active {
|
|||
|
|
.time {
|
|||
|
|
color: #4db4ea;
|
|||
|
|
}
|
|||
|
|
.week {
|
|||
|
|
color: #4db4ea;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.fixedView{
|
|||
|
|
height: 50px;
|
|||
|
|
line-height: 50px;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
background-color: white;
|
|||
|
|
width: 100%;
|
|||
|
|
/* border-radius: 10px; */
|
|||
|
|
/* margin-left: 5%; */
|
|||
|
|
font-size: 14px;
|
|||
|
|
/* border: 1px solid #cfcfcf; */
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fooot-button{
|
|||
|
|
height: 80upx;
|
|||
|
|
background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #C1EFEA;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: white;
|
|||
|
|
line-height: 80upx;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 40upx;
|
|||
|
|
width: 90%;
|
|||
|
|
margin: auto;
|
|||
|
|
margin-bottom: 20upx;
|
|||
|
|
}
|
|||
|
|
</style>
|