WechatApp/pages/foodDetail/index.vue

<template>
  <!-- 菜品详情 -->
  <view class="content">
    <swiper class="swiper" :circular="true" :autoplay="true" :interval="3000">
      <swiper-item>
        <image :src="getFileUrl('/static/demo.png')" mode="aspectFill" class="food-image"></image>
      </swiper-item>
      <swiper-item>
        <image :src="getFileUrl('/static/demo.png')" mode="aspectFill" class="food-image"></image>
      </swiper-item>
      <swiper-item>
        <image :src="getFileUrl('/static/demo.png')" mode="aspectFill" class="food-image"></image>
      </swiper-item>
    </swiper>
    <view class="food-info">
      <view class="food-price">
        <text class="price-symbol">¥</text>
        <text class="price-main">49.8</text>
        <text class="price-decimal">.00</text>
      </view>
      <view class="food-sales">
        <image :src="getFileUrl('img/icon/star.png')" mode="aspectFill" class="star-icon"></image>
        <text class="sales-text">月售:0</text>
      </view>
    </view>

    <view class="food-desc">
      <view class="food-desc-title">香煎M9和牛粒</view>
      <view class="food-desc-tags">
        <view class="food-desc-tag signature">招牌</view>
        <view class="food-desc-tag spicy">中辣</view>
      </view>
      <view class="food-desc-content">香煎 M9 和牛粒是将澳洲顶级 M9 和牛切成均匀小粒，以高温快煎方式锁住肉汁。</view>
    </view>
    <view class="food-desc">
      <view class="food-desc-title-intro">菜品介绍</view>
      <view class="food-desc-content">
        描述：甜麻辣。携手周黑鸭，朝鲜族特色碰撞武汉地道风味。精选鸭腿肉，酱香入骨，紧实入味，年糕Q弹软糯，裹满酱汁，醇厚浓郁。口味层次丰富，前调甜，中段辣，尾韵麻。每份含黑鸭块240克，年糕42克，热烫爆香，甜辣带劲。
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-btn">
      <!-- 左侧：数量选择器 -->
      <view class="quantity-selector">
        <view class="action-btn minus" :class="{ disabled: quantity === 0 }" @click="handleDecrease"
          hover-class="hover-active">
          <image :src="getFileUrl('img/icon/reduce1.png')" mode="aspectFit" class="action-icon" v-show="quantity == 0">
          </image>
          <image :src="getFileUrl('img/icon/reduce2.png')" mode="aspectFit" class="action-icon" v-show="quantity != 0">
          </image>
        </view>
        <view class="quantity">{{ quantity || 0 }}</view>
        <view class="action-btn plus" @click="handleIncrease" hover-class="hover-active">
          <image :src="getFileUrl('img/icon/add2.png')" mode="widthFix" class="action-icon" v-show="quantity < 99">
          </image>
          <image :src="getFileUrl('img/icon/add1.png')" mode="widthFix" class="action-icon" v-show="quantity >= 99">
          </image>
        </view>
      </view>
      <!-- 右侧：加入购物车按钮 -->
      <view class="add-to-cart-btn" @click="handleAddToCart" hover-class="hover-active">
        加入购物车
      </view>
    </view>

  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { getFileUrl } from "@/utils/file.js";
import NavBar from '@/components/NavBar/index.vue';

const quantity = ref(1);

const handleIncrease = () => {
  if (quantity.value >= 99) return;
  quantity.value++;
};

const handleDecrease = () => {
  if (quantity.value > 0) {
    quantity.value--;
  }
};

const handleAddToCart = () => {
  // TODO: 实现加入购物车逻辑
  console.log('加入购物车，数量：', quantity.value);
  uni.navigateBack();
  uni.showToast({
    title: '加入购物车成功',
    icon: 'none'
  });
};

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

<style lang="scss" scoped>
.swiper {
  width: 100%;
  height: 510rpx;
}

.food-image {
  width: 100%;
  height: 510rpx;
}

.food-info {
  width: 100%;
  height: 100rpx;
  background: linear-gradient(90deg, #1E1E1E 0%, #464646 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  box-sizing: border-box;
  padding: 0 30rpx;

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

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

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

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

  .food-sales {
    font-size: 22rpx;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4rpx;
  }

  .star-icon {
    width: 26rpx;
    height: 26rpx;
  }
}

.food-desc {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #fff;
  margin-top: 20rpx;

  .food-desc-title {
    font-weight: bold;
    font-size: 38rpx;
    color: #151515;
  }

  .food-desc-tags {
    display: flex;
    gap: 10rpx;
    margin-top: 10rpx;
  }

  .food-desc-tag {
    padding: 4rpx 12rpx;
    border-radius: 4rpx;
    font-size: 20rpx;

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

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

  .food-desc-content {
    font-size: 27rpx;
    color: #666666;
    line-height: 38rpx;
    margin-top: 22rpx;
  }

  .food-desc-title-intro {
    font-weight: bold;
    font-size: 27rpx;
    color: #151515;
  }
}

.bottom-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(0, 0, 0, 0.05);
}

.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 214rpx;
  height: 58rpx;
  background: #F8F8F8;
  border-radius: 56rpx;
  box-sizing: border-box;
  padding: 0 3rpx;
}

.action-btn {
  width: 52rpx;
  height: 52rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  transition: all 0.3s;
  background-color: #fff;

  .action-icon {
    width: 24rpx;
    height: 24rpx;
  }

  &.disabled {
    opacity: 0.5;
  }
}

.quantity {
  font-size: 30rpx;
  color: #000;
  min-width: 40rpx;
  text-align: center;
}

.add-to-cart-btn {
  width: 266rpx;
  height: 80rpx;
  margin-left: 20rpx;
  background: linear-gradient(90deg, #FF6B35 0%, #F7931E 100%);
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  transition: all 0.3s;

  &.hover-active {
    opacity: 0.8;
  }
}
</style>