LSM_OIL_SITE_zhongping/pages/home/home.vue

<template>
	<view class="content my-bg">
		<cu-custom class="main-topbar bg-main-oil" @showLists='showLists' :isChange='true'  bgColor="bg-main-oil">
			<block slot="changeChannel">切换</block>
			<block slot="content">{{'中品云站'}}</block>
		</cu-custom>
		<view class="main-money bg-main-oil">
			<view class="padding-left-lg">当前油站为：<text>{{accountName}}</text></view>
			<view class="padding-xs flex align-center">
				<view class="flex-sub text-center padding-top-lg">
					<view class="txet-xxs">
						<text class="text-white">今日收款</text>
					</view> 
					<!-- <view class=""  @tap='changess'>butns</view> -->
					<view class=" text-sl padding padding-top-xs"><text class="text-white">￥{{userAccount.totalMoney|numberFilter}}</text></view>
				</view>
			</view>
		</view>
		<view class="bg-main-oil bg-main-color  main-money">
		</view>
		<view class="bg-white radius  margin-left margin-right  to-top">
			<view class=" flex ">
				<view class="padding text-center flex-sub"
					@tap="routerTo('/packageOrders/pages/orderList/orderList?type=today')">
					<text>今日收款笔数</text>
					<view class="padding-sm">
						<text class="oil-main-color">{{userAccount.totalCount}}</text>
					</view>
				<!-- <button class="cu-btn bg-main-oil  text-white text-sm ">
						查看明细
					</button> -->
				</view>
				<view class="padding text-center flex-sub">
					<text>账户余额</text>
					<view class="padding-sm">
						<text class="oil-main-color">￥{{userAccount.balance|numberFilter}}</text>
					</view>
					<!-- <button class="cu-btn bg-main-oil  text-white text-sm ">
						查看明细
					</button> -->
				</view>
			</view>
		</view>
		<view class="showMainBox cu-list bg-white margin radius " style='z-index: 0;'>
			<view class="foldOrExpand" v-if='SiteOliInfo.length>2'>
				<view class="fold checkF"  v-if='checkForE' @click='showOrNo(false) '>折叠 <image src="../../static/img/zdU.png" mode="" class="showMainBox_item_top_img"></image></view>
				<view class="Expand checkF" v-if='!checkForE'  @click='showOrNo(true) '>展开 <image src="../../static/img/zdD.png" mode="" class="showMainBox_item_top_img"></image></view>
			</view>
			<view class="showMainBox_main" :style="{ height: showHeight}" >
				<view class="showMainBox_item" v-for='(item,i) in SiteOliInfo' :key='i' v-if='SiteOliInfo.length'>
					<view class="showMainBox_item_left">
						<view class="showMainBox_item_left_title">{{item.oilProductCode}} 油</view>
						<view class="showMainBox_item_left_tag">
							<view class="showMainBox_item_left_tag_money">
								发改委价: <text class='color-red'>&yen;{{item.marketPrice}} </text>
							</view>
							<view class="showMainBox_item_left_tag_money">
								油站价:	<text class='color-red'>&yen;{{item.sitePrice}}</text>
							</view>
						</view>
					</view>
					<view class="showMainBox_item_right" v-if="sitInfo.phone" @click="markerPhone">
						<image src="../../static/img/kfrx.png" mode="" class="showMainBox_item_right_img"></image>
					</view>
				</view>
			</view> 
		</view>
		<view class="cu-list grid col-3 no-border listBox margin  radius  " style='z-index: 0;'>
			<view class="cu-item" @tap="routerTo('/pages/station-info/station-info')">
				<view :class="['cuIcon-' + cuIconList[0].cuIcon, 'text-' + cuIconList[0].color]" class="text-sl">
					<view class="cu-tag badge" v-if="cuIconList[0].badge != 0">
						<block v-if="cuIconList[0].badge != 1">
							{{ cuIconList[0].badge > 99 ? '99+' : cuIconList[0].badge }}</block>
					</view>
				</view>
				<text>{{ cuIconList[0].name }}</text>
			</view>
			<view class="cu-item" @tap="routerTo('/packageOrders/pages/orderList/orderList')">
				<view :class="['cuIcon-' + cuIconList[4].cuIcon, 'text-' + cuIconList[4].color]" class="text-sl">
					<view class="cu-tag badge" v-if="cuIconList[4].badge != 0">
						<block v-if="cuIconList[4].badge != 1">
							{{ cuIconList[4].badge > 99 ? '99+' : cuIconList[4].badge }}</block>
					</view>
				</view>
				<text>{{ cuIconList[4].name }}</text>
			</view>
			<view class="cu-item" v-for="(item,index) in menusList" :key="index" @tap="routerTo(item.path)" v-if=' item.name != "中品云站超级管理员"' >
				<view :class="['cuIcon-' + item.cuIcon, 'text-' + cuIconList[index+1].color]" class="text-sl">
					<view class="cu-tag badge" v-if="item.badge != 0">
						<block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>
					</view>
				</view> 
				<text>{{ item.name }}</text>
			</view>
			<view class="cu-item" @tap="routerTo('/pages/station-price/station-price')">
				<view :class="['cuIcon-' + cuIconList[1].cuIcon, 'text-' + cuIconList[1].color]" class="text-sl">
					<view class="cu-tag badge" v-if="cuIconList[1].badge != 0">
						<block v-if="cuIconList[1].badge != 1">
							{{ cuIconList[1].badge > 99 ? '99+' : cuIconList[1].badge }}</block>
					</view>
				</view>
				<text>{{ cuIconList[1].name }}</text>
			</view>
			<!-- <view style="height: 180rpx;display: flex;justify-content: flex-end;" class="cu-item" @tap="routerTo('/pages/escalation/escalation')"> 
				<view>
					<image style="width: 50rpx;height: 50rpx;" src="/static/img/dzsb.png"></image>
				</view>
				<text>{{ cuIconList[2].name }}</text>
			</view> -->
			<!-- <view class="cu-item" @tap="routerTo('/pages/TransactionStatistics/TransactionStatistics')">
				<view :class="['cuIcon-' + 'new', 'text-' + cuIconList[0].color]" class="text-sl">
					<view class="cu-tag badge" v-if="cuIconList[0].badge != 0">
						<block v-if="cuIconList[0].badge != 1">
							{{ cuIconList[0].badge > 99 ? '99+' : cuIconList[0].badge }}</block>
					</view>
				</view>
				<text>交易统计</text>
			</view> -->
			
		<!-- 	<view class="cu-item" @tap="scanQr">
				<view class="text-sl cuIcon-scan text-yellow">

				</view>
				<text>扫星油云</text>
			</view> -->
		<!-- 	<view class="cu-item" @tap="showLists"> 
				<view  :class="['cuIcon-' + cuIconList[0].cuIcon, 'text-' + cuIconList[0].color]" class="text-sl">
					<view class="cu-tag badge"  > 
					</view>
				</view>
				<text>切换油站</text>
			</view> -->
			<view class="padding-bottom-xl">
			</view>
	</view>
	<view class="cu-modal" :class="checkList">
		<view class="cu-dialog">
			<view class="cu-bar bg-blue  justify-end">
				<view class="content ">
					{{'选择登录油站'}}
				</view>
				<view class="action" @tap="hidecheckList">
					<text class="cuIcon-close text-white"></text>
				</view>
			</view>
			<view class="text-left padding-xl padding-bottom padding-top bg-white">
				<view class="flex align-center justify-between margin-bottom-sm  " v-for="(list,i) in oliList" :key='list'>
					<view class=""> {{list.siteName}}</view>
					<view class="">
						<view class=" bg-blue cu-btn text-white text-center btn-radius-10 text-sm" @tap="checkLists(list)">
							进入
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="cu-modal" :class="[checkFirst ? 'show':'']" >
		<view class="cu-dialog">
			<view class="cu-bar bg-blue  justify-end">
				<view class="content ">
					{{'选择登录油站'}}
				</view>
				<view class="action" @tap="hidecheckList">
					<text class="cuIcon-close text-white"></text>
				</view>
			</view>
			<view class="text-left padding-xl padding-bottom padding-top bg-white">
				<view class="flex align-center justify-between margin-bottom-sm  " v-for="(list,i) in oliList" :key='list'>
					<view class=""> {{list.siteName}}</view>
					<view class="">
						<view class=" bg-blue cu-btn text-white text-center btn-radius-10 text-sm" @tap="checkLists(list)">
							进入
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	import cloudSiteApi from '@/api/cloud-site.js'
	import oliUserApi from '@/api/oli-user.js'
	import oilIdentityApi from '@/api/oil-identity.js'
	import oliSiteApi from '@/api/oli-site.js'
	export default {
		props: {
			site: {
				type: Object,
				default () {}
			},
			// menusList:{
			// 	type:Array,
			// 	default(){}
			// },
			checkUser:{
				type:Boolean,
				default(){}
			}
		}, 
		data() {
			return {
				showHeight:'340rpx',
				checkForE:false,
				sitInfo:{},
				SiteOliInfo:[],
				accountName:uni.getStorageSync('siteOli'),
				userAccount:uni.getStorageSync('ueserList'),
				checkList:'',
				scanUrl: '', 
				menusList:uni.getStorageSync('menusChangeList'),
				oliList:uni.getStorageSync('oliList'),
				userMenu: uni.getStorageSync('userMenu'),
				loginUser: uni.getStorageSync('loginUser'), 
				checkFirst:uni.getStorageSync('checkFirst'), 
				title: 'Hello',
				changeChannel:{
					username:'',
					channelId:'',
					unionId:''
				}, 
				cuIconList: [{
						cuIcon: 'location',
						path: '/pages/station-info/station-info',
						color: 'red',
						badge: 0,
						name: '油站信息'
					},
					{
						cuIcon: 'moneybag',
						path: '/pages/station-info/station-info',
						color: 'yellow',
						badge: 0,
						name: '促销优惠'
					},
					{
						cuIcon: 'new',
						path: '/packageChart/operation-analysis/operation-analysis',
						color: 'orange',
						badge: 0,
						name: '对账上报'
					},
					{
						cuIcon: 'new',
						path: '/packageChart/operation-analysis/operation-analysis',
						color: 'orange',
						badge: 0,
						name: '经营分析'
					}, {
						cuIcon: 'form',
						color: 'yellow',
						path: '/packageOrders/pages/orderList/orderList',
						badge: 0,
						name: '加油订单'
					},
					{
						cuIcon: 'scan',
						path: '/pages/stationDetail/stationDetail',
						color: 'olive',
						badge: 0,
						name: '扫码加油'
					},
					{
						cuIcon: 'qr_code',
						color: 'cyan',
						badge: 0,
						path: '/packageQr/pages/qrsite/QrCode_xy',
						name: '油站二维码'
					},

					{
						cuIcon: 'punch',
						path: '/packageQr/pages/partnership/partnership',
						color: 'blue',
						badge: 0,
						name: '合作企业'
					}, {
						cuIcon: 'expressman',
						color: 'mauve',
						// color: 'pink',
						path: '暂无',
						badge: 0,
						name: '员工管理'
					}, {
						cuIcon: 'expressman',
						color: 'mauve',
						// color: 'pink',
						path: '暂无',
						badge: 0,
						name: '交易统计'
					},


				]
			};
		}, 
		onLoad() {
			//console.log('这里是home')
			const Menus = uni.getStorageSync('userMenu')
			this.fistCheck() 
			
		},
		filters: {
			numberFilter(value) {
				if (value) {
					value = value - 1 + 1
					return value.toFixed(2)
				} else {
					return '0.00'
				}
			}
		},
		methods: {  
			showOrNo(type){
				this.checkForE = type
			},
			markerPhone(){
				if (this.sitInfo.phone) {
					uni.makePhoneCall({
						phoneNumber:'4008-56-5355'
					})
				} else {
					uni.showToast({
						title: '暂无油站联系方式',
						icon: 'none'
					});
				}
			},
			changess(){
				oliUserApi.initCouldUser().then(res=>{
					//console.log(res)
				})
			},
			changeMenuList(data){ //这里是切换处 更新权限menus处
				const Menus =data
				console.log(data,'1111111111111111111111111111111111111111')
				console.log('这里是接收menus处',Menus)
				let menusList = []
				Menus.forEach((item,index,Menus)=>{
					if(item.roleName != 'ROOT' ){
						// this.Splicing(item)
						menusList.push(this.Splicing(item)) //根据menus做处理
					}
				}) 
				uni.setStorageSync('menusChangeList',menusList) 
				this.menusList =uni.getStorageSync('menusChangeList')
				
				// this.$emit('changMenus',menusList)
				//console.log('这里是切换处',menusList)
			},
			Splicing(list){
				let obj = {
					cuIcon: '',
					path: '',
					color: '',
					badge: 0,
					name:''
				}
				if(list.roleName == '扫码加油'){
					obj.cuIcon = 'scan',
					obj.path= '/pages/station-info/scan-camera/scan-camera',
					obj.color= 'olive',
					obj.badge= 0,
					obj.name=list.roleName
				}else if(list.roleName == '经营分析'){
					obj.cuIcon = 'new',
					obj.path= '',
					obj.color= 'orange',
					obj.badge= 0,
					obj.name=list.roleName
				}else if(list.roleName == '加油订单'){
					obj.cuIcon = 'form',
					obj.path= '/packageOrders/pages/orderList/orderList',
					obj.color= 'yellow',
					obj.badge= 0,
					obj.name=list.roleName
				}else if(list.roleName == '油站二维码'){
					obj.cuIcon = 'qr_code',
					obj.path= '/packageQr/pages/qrsite/QrCode_xy',
					obj.color= 'cyan',
					obj.badge= 0,
					obj.name=list.roleName
				}else if(list.roleName == '员工管理'){
					obj.cuIcon = 'expressman',
					obj.path= '/packageStaff/pages/staff/List/List',
					obj.color= 'mauve',
					obj.badge= 0,
					obj.name=list.roleName
				}else if(list.roleName == '油站信息'){
					obj.cuIcon = 'punch',
					obj.path= '/packageQr/pages/partnership/partnership',
					obj.color= 'blue',
					obj.badge= 0,
					obj.name=list.roleName
				}else if(list.roleName == '交易统计'){
					obj.cuIcon = 'punch',
					obj.path= '/pages/TransactionStatistics/TransactionStatistics',
					obj.color= 'blue',
					obj.badge= 0,
					obj.name=list.roleName
				}else if(list.roleName == '中品云站超级管理员'){
					obj.cuIcon = 'punch',
					obj.path= ' ',
					obj.color= 'blue',
					obj.badge= 0,
					obj.name=list.roleName
				}
				return obj
			},
			checkInfo(){
				let id = uni.getStorageSync('channelId')
				if(id){
					this.getUserInfo(id)
					//console.log(this.menusList)
					this.getSiteInfo(id)
				} 
			},
			// 获取油站信息
			getSiteInfo(channelId) {
				console.log('获取油站信息')
				oliSiteApi.getSiteDetail(channelId).then(res => {
					// //console.log(res)
					if (res.code === 20000) {
						console.log(res.data.oil)
						this.sitInfo=  res.data.site
						this.SiteOliInfo = res.data.oil
						if(res.data.oil.length <3){
							this.showHeight = ' auto'
						}else{	
							this.showHeight = '340rpx'
						}
						uni.setStorageSync('oilSitePriceId',res.data.site.id)
					}
				})
			},
			hidecheckList(){
				//console.log('')
				this.checkList = ''
				this.checkFirst = false
			}, 
			checkLists(items){
				// //console.log(items)
				let id = items.id
				this.changeChannel.siteId = items.id
				this.changeChannel.unionId = uni.getStorageSync('unionId')
				this.changeChannel.username = this.loginUser.userPhone
				uni.setStorageSync('channelId',items.id)  
				oilIdentityApi.changeChannelLogin(this.changeChannel).then((res)=>{
					// //console.log(res)
					if(res.code == 20000){
						uni.setStorageSync('siteOli',items.siteName)  
						this.accountName = items.siteName
						this.checkList = ''
						this.checkFirst = false
						uni.setStorageSync('checkFirst',false)
						uni.setStorageSync('Authorization',res.data.authTokenDTO.accessToken)	  
						this.checkForE =false
						uni.setStorageSync('userMenu', res.data.authTokenDTO.loginUser.roleMenus)
						uni.setStorageSync('loginUser', {
							id: res.data.authTokenDTO.loginUser.id,
							name: res.data.authTokenDTO.loginUser.name,
							userPhone: res.data.authTokenDTO.loginUser.userPhone
						})
						//console.log(res.data.authTokenDTO.loginUser.channelId)
						this.getSiteInfo(res.data.authTokenDTO.loginUser.channelId)
						this.getUserInfo(id)
						this.changeMenuList(res.data.authTokenDTO.loginUser.roleMenus)
					}else if(res.code == 40000){
						uni.navigateTo({
							url:'/pages/login/boforeLogin/boforeLogin'
						})
					}
				})
			}, 
			//获取油站基本资料
			getUserInfo(id) {
				console.log('获取油站基本资料')
				// 获取云站当前登录用户的基础资料
				oliSiteApi.getSiteBasicData(id).then(res => {
					//console.log('用户资料', res) 
					uni.stopPullDownRefresh();
					if (res.code === 20000) {
						uni.setStorageSync('ueserList',res.data)
						this.userAccount = res.data
					}
				})
			}, 
			showLists(){
				let phoneNumber = this.loginUser.userPhone ,
					_that =this
				oliUserApi.getByPhone(phoneNumber).then((res)=>{ 
					//console.log('调用')
					//console.log('这里是切换',res)
					
					if(res.code == 20000){
						//console.log(res.data.length)
						if(res.data.length < 2){
							uni.showToast({
								title:'当前只有一个油站，不可切换',
								icon:'none'
							})
							return
						} 
						_that.checkList = 'show'
						_that.oliList = res.data
						_that.changeChannel.username = _that.loginUser.userPhone
						_that.changeChannel.unionId = uni.getStorageSync('unionId')
						
					}else{
						uni.showToast({
							title:'请求失败,请稍后再试',
							icon:'none'
						})
					}
				
				})
				//console.log(this.loginUser)
			},
			scanQr() {
				var scanUrl
				scanUrl = '/pages/station-info/scan-camera/scan-camera'
				uni.navigateTo({
					url: scanUrl,
					fail: (err) => {
						// //console.log(err)
					},
					success: (res) => {
						// //console.log('chengg', res)
					},
				})
			},
			// 方便开发
			// scanQr() {
			// 	uni.setStorageSync('qrCode', 'XM&1299257961238990848')
			// 	uni.navigateTo({
			// 		url: '/pages/stationDetail/stationDetail',
			// 		fail: (err) => {
			// 			//console.log(err)
			// 		},
			// 		success: (res) => {
			// 			//console.log('chengg', res)
			// 		}
			// 	})
			// },
			routerTo(url, name) {
				//console.log(url,name)
				console.log(url)
				if(url == ''){
					uni.showToast({
						title:'暂时无法使用...',
						icon:'none'
					})
					return
				}
				if (name === '扫码加油') {
					this.scanUrl = url
					this.scanQr()
				} else {
					uni.navigateTo({
						url: url
					})
				}

			}
		}
		,onShow() {
			//console.log('这里是show') 
		},
		watch:{
			checkForE(newValue,oldValue){
				console.log(newValue)
				console.log(oldValue)
				if(newValue && this.SiteOliInfo.length>2){
					this.showHeight = ' auto'
				}else if(!newValue && this.SiteOliInfo.length>2){
					this.showHeight = '340rpx'
				}else if (this.SiteOliInfo.length==2 || this.SiteOliInfo.length<2  ){
					this.showHeight = ' auto'
				}
			
			}
		},
		created(){
			// 此页面onshow无法执行生命周期需要,需要走created
			//console.log('这里是created')
			//console.log(this.menusList)
			this.checkInfo()
			
		} 
			
	};
</script>

<style scoped>
	.showMainBox_main{
		width: 100%;
	}
	.showMainBox_item_top_img{
		    width: 40rpx;
		    height: 40rpx;
		    margin-left: 2%;
		 
	}
	.foldOrExpand{
		width: 100%;
		    padding: 2% 3%;
			    border-bottom: 1px solid #eeee;
	}
	.foldOrExpand .checkF{
		    display: flex;
		    justify-content: flex-end;
		    align-items: center;
			transition: all linear .3s;
	}
	.color-red{
		color: #1890FF;
		font-weight: 700;
		font-size: 35rpx;
		margin-left: 3%;
	}
	.showMainBox_item_right_img{
		width: 70rpx;
		height: 70rpx;
	}
	.showMainBox_item_left_tag_money{
		font-size: 25rpx;
		    width: 47%;
		 
	}
	.showMainBox_item{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		width: 100%;
		padding: 5% 6%;
		box-sizing: border-box;
		border-bottom: 2rpx solid #eee;
	}
	.showMainBox_item_left_tag{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		margin-top:2%;
	}
	.showMainBox_item_left_title{
		    color: #333;
		    font-size:36rpx;
		  
	}
	.showMainBox_item_left{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
		width: 90%;
		flex: 0 0 auto;
	}
	.showMainBox{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.content {
		height: 100%;
	}
	.listBox{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.bottom-bar {
		position: relative;
		padding-top: 50px;
		margin-bottom: 0;
		margin-top: 0;
	}

	.main-topbar>>>.cu-bar {
		height: 380rpx !important;
		z-index: 0 !important;
	}

	.main-topbar>>>.cu-bar .content {
		padding-bottom: 300rpx;
	}

	.bottom-bar-fixed {
		position: fixed;
		bottom: 0;
		padding-top: 70rpx;
		width: 100%;
	}

	.main-money {
		position: relative;
		z-index: 1;
	}

	.van-tag {
		display: inline-block;
		padding: 0.3rem 0.4rem;
		position: absolute;
		right: 1px;
		font-size: 12px;
		top: 25%;
		background-color: #b9ffca;
		border-radius: 10rem 0 0 10rem;
		border-color: transparent;
	}

	.bg-main-color {
		min-height: 160rpx;
	}

	.to-top {
		position: relative;
		top: -140rpx;
		z-index: 1;
	}

	.cu-list {
		position: relative;
		top: -140rpx;
		z-index: 1;
	}

	.cu-list.grid>.cu-item [class*=cuIcon] {
		font-size: 75rpx;
	}
</style>