Dining_Hall/pages/weeklyMenu/index.vue

<template>
  <view class="work-container">
    <!-- 第一个条目 -->
    <view class="item" v-for="item in weekCookList" :key="item.recipeId" @click="goMenuList(item)">
      <image class="image" :src="item.canteenImgUrl"></image>
      <view class="content">
        <text class="title">本周菜谱</text>
        <text class="sub-title">食堂：{{ item.canteenName }}</text>
        <text class="sub-title">档口：{{ item.stallName }}</text>
      </view>
    </view>

    <!-- 第二个条目 -->
    <!-- <view class="item">
      <image class="image" src="/static/images/weeklyMenu/banner1.png"></image>
      <view class="content">
        <text class="title">午，中档口</text>
        <text class="sub-title">食堂：宏源大厦</text>
        <text class="sub-title">档口：午，中档口</text>
      </view>
    </view> -->
  </view>
</template>

<script>
import { getWeekCookbookAPI } from '../../api/week-menu/index'
export default {
  data() {
    return {
      qrCodeUrl: '/static/images/code.png', // 替换为实际的二维码URL
      weekCookList: [], // 一周菜谱
      queryParams: {
        // startDate: '2025-1-13',
        // endDate: '2025-1-19'
      }
    }
  },
  methods: {
    refreshQrCode() {
      // 模拟刷新二维码
      this.qrCodeUrl = `/static/images/code.png`
    },
    // 获取一周菜谱
    async getWeekCookbookData() {
		this.queryParams.custId = uni.getStorageSync('custId') 
		const res = await getWeekCookbookAPI(this.queryParams)
		this.weekCookList = res.data
		console.log(res, '一周菜谱')
    },
	goMenuList(item){
		uni.navigateTo({
		  url: `/pages/weeklyMenu/menuList?params=${JSON.stringify(item)}`
		})
	}
  },
  created() {
    this.getWeekCookbookData()
  }
}
</script>

<style scoped>
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #f9fbff;
  min-height: 100%;
  height: auto;
}

.work-container {
  background-color: #f9fbff;
  text-align: center;
}

.item {
  display: flex;
  margin: 0 40rpx 40rpx 40rpx;
  background-color: #fff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
  margin: 20rpx;
}

/* 确保所有文本默认左对齐 */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  /* 添加以下样式以确保内容左对齐 */
  align-items: flex-start; /* 确保子元素水平方向上左对齐 */
}

.title,
.sub-title {
  text-align: left; /* 确保文本左对齐 */
  margin: 0; /* 移除任何可能存在的默认边距 */
}

.title {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  margin-bottom: 5rpx;
}

.sub-title {
  font-size: 16px;
  color: #444;
}
</style>