Dining_Hall/pages/index.vue

<template>
  <view class="work-container">
    <view class="header">
      <text class="header-text">皖送e餐</text>
    </view>

    <!-- 轮播图 -->
    <u-swiper :list="bannerList" @change="handleSwiperChange" :autoplay="true" :interval="3000"></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="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"  @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 } from '../api/index/index'
import { queryUserInformApi,queryUnreadInformNumApi } from '@/api/mine/index'
export default {
  data() {
    return {
      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'
      ],
      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:{}
    }
  },
  methods: {
    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'
      })
    },
    handleSwiperChange(e) {
      this.current = e.current // 更新当前活动的指示点索引
    },
    goToRemainingSum() {
      // 跳转到余额/充值页面
      uni.navigateTo({
        url: '/pages/remainingSum/index'
      })
    },
    // 获取钱包余额
    async getWalletBalanceData(custId) {
		let param = {
			"custId": custId.toString(),
			"openid": uni.getStorageSync('openId'),
			"sourceType": "1"
		}
      const { data: res } = await getWalletBalanceAPI(param)
      this.walletBal = res.walletBal
      console.log(res, '余额信息--')
    },
    // 获取二维码
    async getOrderQRCodeData(custId) {
      const res = await getOrderQRCodeAPI({ custId })
      console.log(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');
	}
  },
  created() {
    // console.log(uni.getStorageSync('custId'), 'uni.getStorageSyn----')
    this.getWalletBalanceData(uni.getStorageSync('custId') || '')
    this.getOrderQRCodeData(uni.getStorageSync('custId') || '')
	this.getUnReadNoticeNum()
    // this.getqueryUserInform()
  }
}
</script>

<style lang="scss">
.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: 14px;
  line-height: inherit;
}

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

.header {
  padding: 50rpx 0;

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

.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>