WechatApp/pages/index/index.vue

<template>
  <!-- 首页 -->
  <view class="content">
    <!-- 顶部 -->
    <image :src="getFileUrl('/static/demo.png')" mode="aspectFill" class="top-img"></image>

    <!-- 内容 -->
    <view class="content-box">
      <view class="shop-info">
        <image :src="getFileUrl('img/icon/shop.png')" mode="aspectFill" class="shop-img"></image>
        <view class="shop-name">店铺名称</view>
      </view>

      <!-- 登录卡片 -->
      <view class='login-card' v-if="!userStore.getToken">
        <view class="login-card-left">
          <view class="welcome-title">欢迎来到xxx店铺</view>
          <view class="welcome-desc">注册登录即可体验更好的服务</view>
          <view class="login-btn" hover-class="hover-active" @click="showLoginModal = true">立即登录</view>
        </view>
        <view class="login-card-right">
          <image :src="getFileUrl('img/icon/welcom.png')" mode="widthFix" class="welcome-img"></image>
        </view>
      </view>

      <view class="banner-box">
        <image :src="getFileUrl('img/icon/zptj.png')" mode="widthFix" class="banner-img"></image>
      </view>

      <!-- 列表 -->
      <view class="list-box">
        <view class="food-card" v-for="(item, index) in foodList" :key="index">
          <!-- 菜品图片 -->
          <image :src="getFileUrl(item.image)" mode="aspectFill" class="food-image"></image>

          <!-- 菜品信息 -->
          <view class="food-info">
            <!-- 标题和月售 -->
            <view class="food-header">
              <view class="food-left">
                <view class="food-name">{{ item.name }}</view>
                <view class="food-sales">
                  <image :src="getFileUrl('img/icon/star.png')" mode="aspectFill" class="star-icon"></image>
                  <text class="sales-text">月售:{{ item.sales }}</text>
                </view>
              </view>
              <view class="food-right">

                <view class="food-price">
                  <text class="price-symbol">¥</text>
                  <text class="price-main">{{ getPriceMain(item.price) }}</text>
                  <text class="price-decimal">.{{ getPriceDecimal(item.price) }}</text>
                </view>
              </view>
            </view>

            <!-- 标签 -->
            <view class="food-tags">
              <view v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="food-tag" :class="tag.type">
                {{ tag.text }}
              </view>
            </view>

            <!-- 描述 -->
            <view class="food-desc">{{ item.description }}</view>
          </view>
        </view>
      </view>

    </view>
    <!-- 登录弹窗组件 -->
    <view class="login-modal-wrapper">
      <LoginModal v-model:open="showLoginModal" @success="handleLoginSuccess" @cancel="handleLoginCancel" />
    </view>

    <!-- 底部导航 -->
    <TabBar />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import TabBar from "@/components/TabBar.vue";
import LoginModal from "@/pages/components/LoginModal.vue";
import { go } from "@/utils/utils.js";
import { getFileUrl } from '@/utils/file.js';
import { useUserStore } from '@/store/user.js';

const userStore = useUserStore();
const showLoginModal = ref(false);

// 示例菜品数据
const foodList = ref([
  {
    image: '/static/demo.png',
    name: '川派辣卤牛杂川派辣卤牛杂煲川派辣卤牛杂煲川派辣卤牛杂煲煲',
    sales: 160,
    tags: [
      { text: '招牌', type: 'signature' },
      { text: '中辣', type: 'spicy' }
    ],
    description: '香煎 M9 和牛粒是将澳洲顶级 M9 和牛切成均匀小粒,以高温快煎方式锁住肉汁。',
    price: '49.8'
  },
  {
    image: '/static/demo.png',
    name: '川派辣卤牛杂煲',
    sales: 160,
    tags: [
      { text: '招牌', type: 'signature' },
      { text: '中辣', type: 'spicy' }
    ],
    description: '香煎 M9 和牛粒是将澳洲顶级 M9 和牛切成均匀小粒,以高温快煎方式锁住肉汁。',
    price: '49.8'
  }
]);

// 获取价格整数部分
const getPriceMain = (price) => {
  if (!price) return '';
  const priceStr = String(price);
  const dotIndex = priceStr.indexOf('.');
  return dotIndex > -1 ? priceStr.substring(0, dotIndex) : priceStr;
};

// 获取价格小数部分
const getPriceDecimal = (price) => {
  if (!price) return '';
  const priceStr = String(price);
  const dotIndex = priceStr.indexOf('.');
  return dotIndex > -1 ? priceStr.substring(dotIndex + 1) : '';
};

// 登录成功回调
const handleLoginSuccess = (res) => {
  console.log('登录成功:', res);
};

// 取消登录回调
const handleLoginCancel = () => {
  console.log('用户取消登录');
};

onLoad((e) => { });
</script>

<style scoped lang="scss">
.content {
  .top-img {
    width: 100%;
    height: 572rpx;
  }

  .content-box {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx 140rpx;

    .shop-info {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100rpx;
      background-color: #fff;
      border-radius: 17rpx;
      margin-top: -50rpx;
      position: relative;
      z-index: 2;
      box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(0, 0, 0, 0.06);

      .shop-img {
        width: 45rpx;
        height: 38rpx;
        margin-right: 20rpx;
      }

      .shop-name {
        font-weight: bold;
        font-size: 31rpx;
        color: #151515;
      }
    }
  }

  .login-card {
    width: 100%;
    min-height: 240rpx;
    background-color: #fff;
    border-radius: 17rpx;
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(0, 0, 0, 0.06);

    .login-card-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 20rpx;

      .welcome-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #151515;
        margin-bottom: 16rpx;
        line-height: 1.4;
      }

      .welcome-desc {
        font-size: 27rpx;
        color: #666666;
        margin-bottom: 24rpx;
        line-height: 1.4;
      }

      .login-btn {
        width: 160rpx;
        height: 53rpx;
        background: #2E2E2E;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 27rpx;
        color: #FFFFFF;
        font-weight: 500;
        cursor: pointer;
        transition: opacity 0.3s;

        &:active {
          opacity: 0.8;
        }
      }
    }

    .login-card-right {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      .welcome-img {
        width: 200rpx;
        height: auto;
      }
    }
  }

  // 登录弹窗层级设置
  .login-modal-wrapper {
    position: relative;
    z-index: 100;

    :deep(.uni-popup) {
      z-index: 100 !important;
    }
  }

  .banner-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40rpx;

    .banner-img {
      width: 480rpx;
      height: 66rpx;
      margin: 0 auto;
    }
  }

  .list-box {
    width: 100%;
    margin-top: 40rpx;
    padding-bottom: 40rpx;

    .food-card {
      width: 100%;
      background-color: #fff;
      border-radius: 17rpx;
      overflow: hidden;
      margin-bottom: 30rpx;
      box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(0, 0, 0, 0.06);

      .food-image {
        width: 100%;
        height: 400rpx;
        display: block;
      }

      .food-info {
        padding: 30rpx;
        position: relative;
        box-sizing: border-box;

        .food-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20rpx;

          .food-name {
            font-size: 32rpx;
            font-weight: bold;
            color: #151515;
            flex: 1;
            max-width: 360rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .food-left {
            display: flex;
            align-items: center;
            gap: 20rpx;
          }

          .food-right {
            display: flex;
            align-items: center;
            gap: 20rpx;
            flex-shrink: 0;
          }

          .food-sales {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #999999;

            .star-icon {
              width: 20rpx;
              height: 20rpx;
              margin-right: 8rpx;
            }

            .sales-text {
              font-size: 24rpx;
              color: #999999;
            }
          }

          .food-price {
            display: flex;
            align-items: baseline;
            color: #FF3B30;
            line-height: 1;

            .price-symbol {
              font-size: 24rpx;
              font-weight: bold;
            }

            .price-main {
              font-size: 44rpx;
              font-weight: bold;
            }

            .price-decimal {
              font-size: 24rpx;
              font-weight: bold;
            }
          }
        }

        .food-tags {
          display: flex;
          align-items: center;
          gap: 12rpx;
          margin-bottom: 20rpx;

          .food-tag {
            padding: 6rpx 16rpx;
            border-radius: 6rpx;
            font-size: 22rpx;
            color: #FFFFFF;
            line-height: 1.2;

            &.signature {
              background: linear-gradient(90deg, #FCB13F 0%, #FC793D 100%);
            }

            &.spicy {
              background: #2E2E2E;
            }
          }
        }

        .food-desc {
          font-size: 26rpx;
          color: #151515;
          line-height: 1.6;
          margin-top: 20rpx;
        }
      }
    }
  }
}
</style>