Dining_Hall/pages/index.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="work-container">
		<u-navbar
			class="u-navbar"
			title="皖送e餐"
			placeholder
			@leftClick="leftClick"
			@rightClick="onChangeSize"
			leftIconColor="#000" 
			bgColor="#fff"
			:titleStyle="{ color: '#000', fontSize: '32rpx',fontWeight: '600' }"
		>
			<view slot="right">
			  <view v-if="fontValue==8" style="font-size: 28rpx;display: flex;align-items: center;" @click="onChangeSize">
			  	<image src="/static/images/index/switch.png" style="width: 38rpx;height: 38rpx;margin-right: 10rpx;" mode="aspectFit"></image>
			  	<text>关怀版</text>
			  </view>
			  <view v-if="fontValue!=8" style="font-size: 32rpx;display: flex;align-items: center;margin-right: 10rpx" @click="onChangeSize">
			  	<image src="/static/images/index/switch.png" style="width: 38rpx;height: 38rpx;" mode="aspectFit"></image>
			  	<text>标准版</text>
			  </view>
			</view>
		</u-navbar>
 
    <!-- <view class="header">
		<view class="header-text">
			<text>皖送e餐</text>
		</view>
		<view v-if="fontValue==8" style="font-size: 28rpx;display: flex;align-items: center;" @click="onChangeSize">
			<image src="/static/images/index/switch.png" style="width: 38rpx;height: 38rpx;margin-right: 10rpx;" mode="aspectFit"></image>
			<text>关怀版</text>
		</view>
		<view v-if="fontValue!=8" style="font-size: 32rpx;display: flex;align-items: center;margin-right: 10rpx" @click="onChangeSize">
			<image src="/static/images/index/switch.png" style="width: 38rpx;height: 38rpx;" mode="aspectFit"></image>
			<text>标准版</text>
		</view>
    </view> -->
    <!-- 轮播图 -->
    <u-swiper :list="bannerList" @change="handleSwiperChange" :autoplay="true" :interval="3000" height="200" imgMode="scaleToFill" ></u-swiper>
    <!-- 指示器 -->
	<!--  <view class="external-indicator">
      <view
        v-for="(item, index) in bannerList"
        :key="index"
        class="indicator-dot"
        :class="{ active: index === current }"
      ></view>
    </view> -->
	
	<view class="handle-box">
		<view style="width: 48%;">
			<view class="handle-box-item" @click="goCode" style="background: #F7FFF5;">
			  <view class="image-box">
			    <image src="/static/images/index/code.png" style="width: 100%;height: 100%;" mode="aspectFit"></image>
			  </view>
			  <view class="box-title">个人二维码</view>
			  <view class="box-subtitle">核身、支付、核销</view>
			</view>
			<view class="handle-box-item2" @click="goToOrder" style="background: #FFF6F4;">
			  <view class="image-box">
			    <image src="/static/images/index/food.png" style="width: 50px;height: 50px;" mode="aspectFit"></image>
			  </view>
			  <view class="box-title">预定餐</view> 
			</view>
		</view>
		<view style="width: 48%;">
			<view class="handle-box-item2" @click="goToRemainingSum" style="background: #F4FFFF;">
			  <view class="image-box">
			    <image src="/static/images/index/balance.png" style="width: 50px;height: 50px;" mode="aspectFit"></image>
			  </view>
			  <view style="width: 65%;">
				  <view style="font-weight: bold;font-size: 32rpx;text-align: center;">余额/充值</view>
				  <view style="text-align: center;">
						<text style="font-size: 24rpx;color: #333;margin-right: 6rpx;">¥</text>
						<text style="font-size: 48rpx;font-weight: 700;color: #FF6816;">{{ (walletBal/100).toFixed(2) }}</text>
						<text style="font-size: 24rpx;color: #333;margin-left: 6rpx;">元</text>
				  </view>
			  </view>
			</view>
			
			<view class="handle-box-item2" @click="goToMenu" style="background: #FFFBF4;">
			  <view class="image-box">
			    <image src="/static/images/index/weeklyMenu.png" style="width: 50px;height: 50px;" mode="aspectFit"></image>
			  </view>
			  <view class="box-title">一周菜谱</view> 
			</view>
			
			<view class="handle-box-item2" @click="goToPassenger" style="background: #EEF4FF;" v-if="canteenId=='378928314946949120'">
			  <view class="image-box"> 
			    <image src="/static/images/index/passenger.png" style="width: 50px;height: 50px;" mode="aspectFit"></image>
			  </view>
			  <view class="box-title">客流统计</view> 
			</view>
			
			<view class="handle-box-item" @click="goToYj" style="background: #F4FFFF;" v-if="userInfo.orgId=='999'||userInfo.custNum.indexOf('@yjst')>-1">
			  <view class="image-box">
				<image src="/static/images/index/yjCanteen.png" style="width: 50px;height: 50px;" mode="aspectFit"></image>
			  </view>
			  <view class="box-title">运检食堂</view>
			</view>
			
		</view>
		
		
		
		
		
	
		
		
	</view>
	
	

    <!-- 功能按钮区 -->
	<!-- <view class="function-area">
      <view class="function-item" @click="goToMenu">
        <view class="icon-box menu">
          <image src="/static/images/index/weeklyMenu.png" mode="aspectFit"></image>
        </view>
        <text class="function-text">一周菜谱</text>
      </view>
      <view class="function-item" @click="goToOrder">
        <view class="icon-box order">
          <image src="/static/images/index/food.png" mode="aspectFit"></image>
        </view>
        <text class="function-text">预订餐</text>
      </view>
    </view> -->

    <!-- 底部信息区 -->
	<!-- <view class="bottom-info"> 
		  <view class="qr-area" @click="goCode">
			<view class="qr-title">个人二维码</view>
			<view class="qr-subtitle">核身、支付、核销</view>
			<view class="qr-code">
			  <image src="/static/images/index/code.png" mode="aspectFit"></image>
			</view>
		  </view> 
		  <view class="balance-area">
			<view class="balance-text" @click="goToRemainingSum">
			  <text class="balance-label">余额/充值</text>
			  <view class="balance-amount">
				<text class="currency">¥</text>
				<text class="amount">{{ (walletBal/100).toFixed(2) }}</text>
			  </view>
			  <view class="wallet-icon">
				<image src="/static/images/index/balance.png" mode="aspectFit"></image>
			  </view>
			</view>
		  </view>
    </view> -->
	
	<u-popup :show="showNotice" mode="center" bgColor="transparent" @close="close" @open="open">
		<view style="width: 80vw;height: 45vh;background: transparent;background-image: url('./static/images/index/noticeBg.png');background-repeat: no-repeat;background-size: 100% 100%;">
			<view style="width: 100%;text-align: center;height: 40px;line-height: 40px;font-size: 30rpx;font-weight: bold;">通知</view>
			<view style="width: 90%;margin: 0 auto;height: 33vh;display: flex;justify-content: center;overflow-y: auto;">
				{{noticeData.informContent}}
			</view>
			<view style="width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;">
				<view style="width: 80%;height: 40px;line-height:40px;background:#FE7900;border-radius: 10px;text-align: center;color: #FFF;" @click="showNotice=false">知道了</view>
			</view>
		</view>
	</u-popup>
	
	
	
	
  </view>
</template>

<script>
import { getWalletBalanceAPI, getOrderQRCodeAPI } from '../api/index/index'
import { getInfoNewAPI } from '@/api/login'
import { queryUserInformApi,queryUnreadInformNumApi } from '@/api/mine/index'
import { getAdvanceOrderStallApi } from '@/api/advanceOrder/index.js'
export default {
  data() {
    return {
		fontValue:uni.getStorageSync('fontSize') || 8,
		timer:null,
		current: 0,
		swiperDotIndex: 0,
		bannerList: [
			'/static/images/banner/banner1.png',
			'/static/images/banner/banner2.png',
			'/static/images/banner/banner3.png',
			'/static/images/banner/banner4.png',
			'/static/images/banner/banner5.png',
			'/static/images/banner/banner6.png',
			'/static/images/banner/banner7.png',
			'/static/images/banner/banner8.png',
			'/static/images/banner/banner9.png',
			'/static/images/banner/banner10.png',
			'/static/images/banner/banner11.png',
			'/static/images/banner/banner12.png',
		],
		list5: [
			'https://cdn.uviewui.com/uview/swiper/swiper3.png',
			'https://cdn.uviewui.com/uview/swiper/swiper2.png',
			'https://cdn.uviewui.com/uview/swiper/swiper1.png'
		],
		walletBal: 0 ,// 钱包余额
		messageNumber:0,//未读通知数量
		showNotice:false,
		noticeData:{},
		userInfo:{
			orgId:'',
			custNum:'',
		},
		canteenId:null
    }
  },
  onLoad() {
  	  this.timer = setInterval(() => {
	     this.getOrderQRCodeData() 
  	  }, 30000) 
  },
  onShow() {
  	 this.getUserInfo()
  	 this.getWalletBalanceData() 
  	 this.getUnReadNoticeNum()
     this.getOrderQRCodeData() 
     this.getAdvanceOrderStallList() 
  },
  onUnload() {
  	clearInterval(this.timer)
  	this.timer = null;
	uni.navigateBack()
	// uni.navigateTo({ url: '/pages/system' })
  },
  methods: {
		leftClick() {
			uni.navigateTo({ url: '/pages/system' })
		},
		/* 关怀版 */
		onChangeSize() {
			if(this.fontValue==8){
				uni.setStorageSync("fontSize", 10); 
			}else{
				uni.setStorageSync("fontSize", 8); 
			}
			//#ifdef H5
			window.location.reload();
			//#endif
		},
		async getAdvanceOrderStallList() {
		  try {
				let param = {
					"custId":uni.getStorageSync('custId'), 
				}
				const res = await getAdvanceOrderStallApi(param)
				console.log('?? ~ getList ~ res:', res) 
				this.canteenId = res.rows[0].canteenId; 
		  } catch (error) {
				console.log(error)
		  }
		},
		//获取用户信息
		getUserInfo(){
			getInfoNewAPI({'custId':uni.getStorageSync('custId'),"sourceType":7}).then(result => {
				console.log(result)
				this.userInfo = result.data
				uni.setStorageSync('openId', result.data.openid,{expires:90})
				uni.setStorageSync('placeId', result.data.placeId,{expires:90})
			})
		},
		changeSwiper(e) {
			this.current = e.detail.current
		},
		goToMenu() {
		  // 跳转到菜单页面
		  uni.navigateTo({
			url: '/pages/weeklyMenu/index'
		  })
		},
		goToOrder() {
		  // 跳转到订餐页面
		  uni.navigateTo({
			// url: '/pages/advanceOrder/index'
			url: '/pages/advanceOrder/stopperSelection/index'
		  })
		},
		goCode() {
		  // 跳转到订餐页面
		  uni.navigateTo({
			url: '/pages/code/index'
		  })
		},
		goToYj() {
			// 跳转到运检食堂
			uni.navigateTo({  url: '/pages/yjCanteen' });
			//  uni.navigateTo({
				// url: '/pages/code/index'
			//  })
		},
		goToPassenger() {
		  // 跳转到客流量
		  uni.navigateTo({
			url: '/pages/passenger/canteenList'
		  })
		}, 
		handleSwiperChange(e) {
		  this.current = e.current // 更新当前活动的指示点索引
		},
		goToRemainingSum() {
		  // 跳转到余额/充值页面
		  uni.navigateTo({
			url: '/pages/remainingSum/index'
		  })
		},
		// 获取钱包余额
		async getWalletBalanceData() {
			let param = {
				"custId": uni.getStorageSync('custId'),
				"openid": uni.getStorageSync('openId'),
				"sourceType": "1"
			}
		  const { data: res } = await getWalletBalanceAPI(param)
		  this.walletBal = res.accBalTotal
		  // console.log(res, '余额信息--')
		},
		// 获取二维码
		async getOrderQRCodeData() {
		  const res = await getOrderQRCodeAPI({ "custId":uni.getStorageSync('custId') })
		  uni.setStorageSync("codeTime",res);
		},
		//通知消息数量
		async getUnReadNoticeNum() {
			let param = {
				"custId": uni.getStorageSync('custId'),
			}
			const res = await queryUnreadInformNumApi(param)
			console.log(res, '通知消息数量--')
			this.messageNumber = Number(res.data)
			if(this.messageNumber>0){
				this.getqueryUserInform()
			}
		 
		},
		//获取通知消息
		async getqueryUserInform() {
			let param = {
				"current": 1,
				"size": 10,
				"custId": uni.getStorageSync('custId'),
			}
		  const res = await queryUserInformApi(param)
		  console.log(res, '通知消息--')
		  if(res.records.length>0){
			  this.noticeData=res.records[0]
			  this.showNotice=true
		  }  
		},
		open() {
		  // console.log('open');
		},
		close() {
		  this.showNotice = false
		  // console.log('close');
		}
	},
	// onUnload() {
	// 	uni.navigateTo({ url: '/pages/system' })
	// },
	// onBackPress(e) {
	// 	//e.from === 'backbutton' 说明如果点击的是物理返回键或导航栏的返回键就进行以下操作
	// 	if (e.from === 'backbutton') {
	// 	  //返回值为true 时,表示不执行默认的返回（默认返回上一页），执行自定义的返回
	// 	  uni.redirectTo({ url: '/pages/system' })
	// 	  //如果要限制必须写成true
	// 	  return true;
	// 	}
	// }
}
</script>

<style lang="scss">
	/* 修改U-Navbar中链接的字体颜色 */
	/deep/.u-navbar .navbar-nav > li > a {
	  color: #fff; /* 将颜色改为红色 */
	}
	/* 如果你想修改当前激活链接的字体颜色 */
	/deep/.u-navbar .navbar-nav > li.active > a {
	  color: #fff; /* 将激活链接的颜色改为绿色 */
	}
	
	
	
.external-indicator {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  /* 与轮播图之间的间距 */
}

.indicator-dot {
  width: 24px;
  /* 长方形宽度 */
  height: 4px;
  /* 长方形高度 */
  background-color: rgba(15, 39, 75, 0.5);
  /* 默认颜色 */
  margin: 0 5px;
  transition: all 0.3s ease-in-out;
  /* 添加过渡效果 */
  border-radius: 4px 4px 4px 4px;
}

.active {
  background: #0f274b;
  /* 选中时的颜色 */
}

/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fafcff;
  min-height: 100%;
  height: auto;
}

view {
  font-size: 28rpx;
  line-height: inherit;
}

/* #endif */
.work-container {
  background-color: #fafcff;
  padding: 0 30rpx;
}

.header {
  padding: 50rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-text {
    font-size: 48rpx;
    font-weight: 700;
    color: #333;
  }
}

.handle-box{
	margin-top: 30rpx;
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
	
	.handle-box-item {
	  width: 100%;
	  margin-bottom: 10px;
	  background-color: #ffffff;
	  border-radius: 12rpx;
	  padding: 20rpx 20rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center; 
	  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	  
	  .image-box{
		  width: 80px;
		  height: 70px;
		  margin-bottom: 20rpx;
	  }
	  .box-title{
		  font-size: 32rpx;
		  font-weight: bold;
		  margin-bottom: 20rpx;
	  }
	  .box-subtitle{
		   font-size: 28rpx;
		   // font-weight: bold;
	  }
	  
	}
	
	.handle-box-item2{
		width: 100%;
		margin-bottom: 10px;
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 18rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
		
		.image-box{
			width: 35%;
			height: 100%;
		}
		.box-title{
			width: 65%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: bold;
		}
		
		
	}
	
	
	
	
	
}



.function-area {
  margin-top: 30rpx;
  border-radius: 16rpx;
  padding: 0rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

  .function-item {
    background-color: #ffffff;
    border-radius: 12rpx;
    padding: 40rpx;
    display: flex;
    align-items: center;
    gap: 18rpx;
    flex: 0 0 calc(50% - 30rpx);
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  }

  .icon-box {
    width: 66rpx;
    height: 66rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

    &.menu {
      background-color: #f5f5f5;
    }

    &.order {
      background-color: #fff7f2;
    }
  }

  .function-text {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
  }
}

.bottom-info {
  margin-top: 30rpx;
  border-radius: 12rpx;
  padding: 0 0 0 0;
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

  .qr-area,
  .balance-area {
    background-color: #ffffff;
    border-radius: 12rpx;
    padding: 80rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  }

  .qr-area {
    .qr-title {
      font-size: 30rpx;
      color: #333;
      margin-bottom: 8rpx;
      margin-top: -45rpx;
      margin-left: -45rpx;
      font-weight: 700;
    }

    .qr-subtitle {
      font-size: 24rpx;
      color: #333;
      margin-bottom: 20rpx;
      margin-left: -45rpx;
    }

    .qr-code {
      width: 160rpx;
      height: 160rpx;
      margin-bottom: -60rpx;

      image {
        width: 100%;
        height: 100%;
        margin-left: 60rpx;
      }
    }
  }

  .balance-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .balance-text {
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 8rpx;
      margin-left: 0rpx;

      .wallet-icon {
        width: 160rpx;
        height: 160rpx;
        margin-bottom: -60rpx;

        image {
          width: 100%;
          height: 100%;
          margin-left: 60rpx;
        }
      }

      .balance-label {
        font-size: 24rpx;
        color: #333;
        margin-top: -72rpx;
        margin-left: -160rpx;
        font-weight: 600;
      }

      .balance-amount {
        display: flex;
        align-items: baseline;
        margin-left: -50rpx;

        .currency {
          font-size: 24rpx;
          color: #333;
          margin-right: 4rpx;
        }

        .amount {
          font-size: 36rpx;
          font-weight: 700;
          color: #333;
        }
      }
    }
  }
}

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.swiper {
  height: 300rpx;
}

.swiper-box {
  height: 150px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}
</style>