jyy-smart-canteen-h5/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="首页"
			placeholder
			@leftClick="leftClick"
			leftIconColor="#000" 
			bgColor="#fff"
			:titleStyle="{ color: '#000', fontSize: '16px' }"
		>
		</u-navbar> -->
    <view class="header">
		<text class="header-text">{{AppTitle}}</text> 
		<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 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-item" @click="goToRemainingSum" style="background: #F4FFFF;">
		  <view class="image-box">
		    <image src="/static/images/index/balance.png" style="width: 100%;height: 100%;" mode="aspectFit"></image>
		  </view>
		  <view class="box-title">个人余额</view>
		  <view class="box-subtitle">
			  <text style="font-size: 24rpx;color: #333;margin-right: 6rpx;">¥</text>
			  <text style="font-size: 40rpx;font-weight: 700;color: #FF6816;">{{ (walletBal/100).toFixed(2) }}</text>
			  <text style="font-size: 24rpx;color: #333;margin-left: 6rpx;">元</text>
		  </view>
		</view>
		
		<view class="handle-box-item" @click="goToMenu" style="background: #FFFBF4;">
		  <view class="image-box">
		    <image src="/static/images/index/weeklyMenu.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-item" @click="goToOrder" style="background: #FFF6F4;">
		  <view class="image-box">
		    <image src="/static/images/index/food.png" style="width: 100%;height: 100%;" mode="aspectFit"></image>
		  </view>
		  <view class="box-title">预定餐</view>
		  <view class="box-subtitle">智能、预定、鲜活</view>
		</view> 
	</view> 
	
	<u-popup :show="showNotice" mode="center"  @close="close" @open="open" >
		<view style="width: 70vw;height: 30vh;">
			<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: 20vh;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: 70px;height: 30px;line-height:30px;background:#ffa040;border-radius: 10px;text-align: center;color: #FFF;" @click="showNotice=false">关闭</view>
			</view>
		</view>
	</u-popup>
	
	
	
	
  </view>
</template>

<script>
import { getWalletBalanceAPI, getOrderQRCodeAPI,getCarouselImageListApi,getBaseSettingByKeyApi } from '../api/index/index'
import { queryUserInformApi,queryUnreadInformNumApi } from '@/api/mine/index' 
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:{},
		AppTitle:''
    }
  },
  onShow() {
  	this.getUserInfo()
  	this.getCarouselImageList()
  },
  onLoad() {
	  this.getBaseSettingByKey()
	  // this.getUnReadNoticeNum()
  	  // this.timer = setInterval(() => {
  	  //    this.getWalletBalanceData() 
  	  // }, 10000) 
  },
  onUnload() {
  	// clearInterval(this.timer)
  	// this.timer = null;
	// uni.navigateBack()
  },
  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
		},
		//获取用户信息
		getUserInfo(){
			this.$store.dispatch('GetInfo').then(res => {
				uni.setStorageSync('userId', res.user.userId)
				uni.setStorageSync('userName', res.user.userName)
				uni.setStorageSync('phonenumber', res.user.phonenumber)
				uni.setStorageSync('mobile', res.user.phonenumber)
				this.getWalletBalanceData() 
			})
		},
		changeSwiper(e) {
			this.current = e.detail.current
		},
		goToMenu() {
		  // 跳转到菜单页面
		  uni.navigateTo({
			url: '/pages/weeklyMenu/index'
		  })
		},
		goToOrder() {
		  // 跳转到订餐页面
		  uni.navigateTo({
			url: '/pages/advanceOrder/stopperSelection'
		  })
		},
		goCode() {
		  // 跳转到订餐页面
		  uni.navigateTo({
			url: '/pages/code/index'
		  })
		},
		handleSwiperChange(e) {
		  this.current = e.current // 更新当前活动的指示点索引
		},
		goToRemainingSum() {
		  // 跳转到余额/充值页面
		  uni.navigateTo({
			url: '/pages/remainingSum/index'
		  })
		},
		// 获取钱包余额
		async getWalletBalanceData() {
			let param = {
				"userId": uni.getStorageSync('userId'),  
			}
		  const { data: res } = await getWalletBalanceAPI(param)
		  this.walletBal = res.accAllBal
		  // console.log(res, '余额信息--')
		}, 
		//通知消息数量
		async getUnReadNoticeNum() {
			let param = {
				"userId": uni.getStorageSync('userId'),
			}
			const res = await queryUnreadInformNumApi(param)
			console.log(res, '通知消息数量--')
			this.messageNumber = Number(res.data)
			if(this.messageNumber>0){
				this.getqueryUserInform()
			}
		 
		},
		//获取通知消息
		async getqueryUserInform() {
			let param = {
				"pageNum": 1,
				"pageSize": 10,
				"userId": uni.getStorageSync('userId'),
			}
		  const res = await queryUserInformApi(param)
		  console.log(res, '通知消息--')
		  if(res.records.length>0){
			  this.noticeData=res.records[0]
			  this.showNotice=true
		  }  
		},
		// 获取轮播图
		async getCarouselImageList() {
			let param = {
				"isEnabled":'0',
				"usageType":'2',
				"pageNum": 1,  
				"pageSize": 100,  
			}
		  const { rows: res } = await getCarouselImageListApi(param)
		  this.bannerList = []
		  res.forEach(item=>{
			  this.bannerList.push(item.imgUrl)
		  })
		  console.log(this.bannerList)
		},
		
		async getBaseSettingByKey() {
			let param = {
				"itemName":'h5_title'
			}
		  const { rows: res } = await getBaseSettingByKeyApi(param)
		  this.AppTitle = res[0].itemValue
		},
		
		
		
		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: center;
	flex-wrap: wrap;
	margin-bottom: 30rpx;
	
	.handle-box-item {
	  width: 28%;
	  margin: 2%;
	  background-color: #ffffff;
	  border-radius: 12rpx;
	  padding: 20rpx 10rpx;
	  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: 60px;
		  height: 40px;
		  margin-bottom: 10rpx;
	  }
	  .box-title{
		  font-size: 32rpx;
		  font-weight: bold;
		  margin-bottom: 20rpx;
	  }
	  .box-subtitle{
		   font-size: 24rpx;
		   // 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>