uniapp学习7，美团闪购生鲜蔬菜商家详情页

AnalogElectronic2026-04-01 8:46
html 复制代码 
<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <text class="icon">←</text>
      </view>
      <view class="search-box">
        <input type="text" placeholder="搜索店内商品，约4000件" />
      </view>
      <view class="nav-icons">
        <text class="icon">💬</text>
        <text class="icon">↻</text>
        <text class="icon">•••</text>
        <text class="icon">⦿</text>
      </view>
    </view>

    <!-- 商家头部信息 -->
    <view class="shop-header">
      <view class="shop-title">
        <text class="name">网上农贸市场（好世界优...</text>
        <text class="arrow">›</text>
      </view>
      <view class="shop-info">
        <text class="score">★ 综合分4.3</text>
        <text class="split">|</text>
        <text class="delivery">商家自配</text>
        <text class="split">|</text>
        <text class="time">配送40分钟</text>
      </view>
      <view class="notice">公告：新店开业，优惠多多！欢迎您光临本店尝鲜...</view>

      <!-- 优惠券栏 -->
      <view class="coupon-bar">
        <view class="coupon-item">
          <text class="tag">神券</text>
          <text class="txt">最高减 ¥20</text>
          <text class="buy">购</text>
        </view>
      </view>
      <view class="discount-bar">
        <view class="discount-item">198减15| 领券</view>
        <view class="discount-item">268减20| 领券</view>
        <view class="discount-item">368减25| 领券</view>
        <view class="more">全部优惠 〉</view>
      </view>
    </view>

    <!-- 主体内容：侧边分类 + 商品列表 -->
    <view class="main-content">
      <!-- 左侧分类栏 -->
      <view class="category-sidebar">
        <view class="cate-item active">
          <text class="icon">📢</text>
          <text class="txt">推荐</text>
        </view>
        <view class="cate-item">
          <text class="icon">⚡</text>
          <text class="txt">神价</text>
        </view>
        <view class="cate-item">
          <text class="icon">📍</text>
          <text class="txt">活动</text>
        </view>
        <view class="cate-item">
          <text class="txt">小店福利</text>
          <text class="txt">下单就送</text>
        </view>
        <view class="cate-item">
          <text class="txt">安心蔬菜</text>
        </view>
        <view class="cate-item">
          <text class="txt">海鲜水产</text>
        </view>
        <view class="cate-item">
          <text class="txt">樱桃季 ❤️</text>
        </view>
        <view class="cate-item">
          <text class="txt">春菜野菜 ❤️❤️</text>
        </view>
        <view class="cate-item">
          <text class="txt">特惠专区</text>
        </view>
        <view class="cate-item">
          <text class="txt">安心猪肉</text>
        </view>
        <view class="cate-item">
          <text class="txt">鸡鸭类</text>
        </view>
      </view>

      <!-- 右侧商品列表 -->
      <view class="goods-list">
        <view class="list-title">推荐</view>

        <!-- 商品1 -->
        <view class="goods-item">
          <image src="/static/goods1.png" class="goods-img" mode="aspectFill"></image>
          <view class="goods-tag">
            <text class="tag-green">满减狂欢 物超所值</text>
          </view>
          <view class="goods-info">
            <text class="name">【火锅必备】特嫩豌豆尖 150g/份</text>
            <text class="sales">月售100+ 好评率100%</text>
            <view class="price-row">
              <text class="price">第1件¥0.01</text>
              <text class="origin">¥4.5</text>
            </view>
            <view class="add-btn" @click="addCart">
              <text>+</text>
            </view>
          </view>
        </view>

        <!-- 商品2 -->
        <view class="goods-item">
          <image src="/static/goods2.png" class="goods-img" mode="aspectFill"></image>
          <view class="goods-tag">
            <text class="tag-yellow">下单 免费送</text>
          </view>
          <view class="goods-info">
            <text class="name">【小店特惠】新鲜小葱 约50g（只限一份，多点不...</text>
            <text class="sales">月售400+ 好评率91.4%</text>
            <view class="price-row">
              <text class="price">¥0</text>
            </view>
            <view class="add-btn" @click="addCart">
              <text>+</text>
            </view>
          </view>
        </view>

        <!-- 商品3 -->
        <view class="goods-item">
          <image src="/static/goods3.png" class="goods-img" mode="aspectFill"></image>
          <view class="goods-tag">
            <text class="tag-blue">基地直供</text>
          </view>
          <view class="goods-info">
            <text class="name">【剪好的】豌豆尖200g</text>
            <text class="sales">月售100+ 好评率100%</text>
            <view class="price-row">
              <text class="price">¥4.5</text>
            </view>
            <view class="add-btn" @click="addCart">
              <text>+</text>
            </view>
          </view>
        </view>

        <!-- 商品4 -->
        <view class="goods-item">
          <image src="/static/goods4.png" class="goods-img" mode="aspectFill"></image>
          <view class="goods-info">
            <text class="name">【调料组合】小葱香菜组合100g/份</text>
            <text class="sales">月售200+ 好评率91.7%</text>
            <view class="price-row">
              <text class="price">¥1.9</text>
            </view>
            <view class="add-btn" @click="addCart">
              <text>+</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部悬浮栏 -->
    <view class="bottom-bar">
      <view class="robot">🤖</view>
      <view class="bar-info">
        <text class="delivery-info">预估配送费¥0 包装费¥1</text>
        <view class="goods-info">
          <text class="goods-name">【鲜嫩】没捡过的豌豆尖 300g/份</text>
          <text class="goods-price">¥24.9</text>
        </view>
        <text class="send-info">月售8 好评率100% 起送</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    addCart() {
      uni.showToast({ title: '已加入购物车', icon: 'success' })
    }
  }
}
</script>

<style scoped>
/* 全局容器 */
.container {
  width: 100vw;
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #fff;
  height: 88rpx;
}
.back-btn {
  width: 60rpx;
  text-align: center;
}
.back-btn .icon {
  font-size: 36rpx;
  color: #333;
}
.search-box {
  flex: 1;
  background: #f5f5f5;
  border-radius: 44rpx;
  padding: 0 20rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  margin: 0 20rpx;
}
.search-box input {
  width: 100%;
  font-size: 28rpx;
  color: #666;
}
.nav-icons {
  display: flex;
  gap: 20rpx;
}
.nav-icons .icon {
  font-size: 32rpx;
  color: #333;
}

/* 商家头部 */
.shop-header {
  background: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
.shop-title {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.shop-title .name {
  font-size: 36rpx;
  font-weight: bold;
  color: #000;
}
.shop-title .arrow {
  font-size: 32rpx;
  color: #999;
  margin-left: 10rpx;
}
.shop-info {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.shop-info .score, .shop-info .delivery, .shop-info .time {
  font-size: 28rpx;
  color: #666;
}
.shop-info .split {
  margin: 0 10rpx;
  color: #ddd;
}
.notice {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 20rpx;
}

/* 优惠券栏 */
.coupon-bar {
  background: #fff2f0;
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
  margin-bottom: 10rpx;
}
.coupon-item {
  display: flex;
  align-items: center;
}
.coupon-item .tag {
  background: #ff4d4f;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 10rpx;
  border-radius: 6rpx;
  margin-right: 10rpx;
  font-weight: bold;
}
.coupon-item .txt {
  font-size: 30rpx;
  color: #ff4d4f;
  font-weight: bold;
}
.coupon-item .buy {
  background: #ff4d4f;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  margin-left: 20rpx;
}

/* 满减栏 */
.discount-bar {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-top: 10rpx;
}
.discount-item {
  background: #ff6b35;
  color: #fff;
  font-size: 28rpx;
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
  font-weight: bold;
}
.more {
  font-size: 28rpx;
  color: #666;
  margin-left: auto;
}

/* 主体内容 */
.main-content {
  display: flex;
  background: #fff;
}

/* 左侧分类栏 */
.category-sidebar {
  width: 200rpx;
  background: #f5f5f5;
}
.cate-item {
  padding: 20rpx 10rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  border-left: 4rpx solid transparent;
}
.cate-item.active {
  background: #fff;
  border-left: 4rpx solid #ff6b35;
  color: #ff6b35;
  font-weight: bold;
}
.cate-item .icon {
  margin-right: 6rpx;
}

/* 右侧商品列表 */
.goods-list {
  flex: 1;
  padding: 20rpx;
}
.list-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #000;
}
.goods-item {
  display: flex;
  margin-bottom: 30rpx;
  position: relative;
}
.goods-img {
  width: 240rpx;
  height: 240rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}
.goods-tag {
  position: absolute;
  top: 0;
  left: 0;
}
.tag-green {
  background: #52c41a;
  color: #fff;
  font-size: 22rpx;
  padding: 4rpx 10rpx;
  border-radius: 4rpx;
}
.tag-yellow {
  background: #faad14;
  color: #fff;
  font-size: 22rpx;
  padding: 4rpx 10rpx;
  border-radius: 4rpx;
}
.tag-blue {
  background: #1890ff;
  color: #fff;
  font-size: 22rpx;
  padding: 4rpx 10rpx;
  border-radius: 4rpx;
}
.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.goods-info .name {
  font-size: 30rpx;
  color: #000;
  line-height: 1.4;
  margin-bottom: 10rpx;
}
.goods-info .sales {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}
.price-row {
  display: flex;
  align-items: center;
}
.price {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: bold;
}
.origin {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
  margin-left: 10rpx;
}
.add-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background: #ffd000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-btn text {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
}

/* 底部悬浮栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background: #000;
  display: flex;
  align-items: center;
  padding: 20rpx;
  box-sizing: border-box;
}
.robot {
  font-size: 80rpx;
  margin-right: 20rpx;
}
.bar-info {
  flex: 1;
  color: #fff;
}
.delivery-info {
  font-size: 26rpx;
  color: #ccc;
  margin-bottom: 10rpx;
}
.goods-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}
.goods-name {
  font-size: 28rpx;
  color: #fff;
}
.goods-price {
  font-size: 32rpx;
  color: #ffd000;
  font-weight: bold;
}
.send-info {
  font-size: 24rpx;
  color: #ccc;
}
</style>
相关推荐
少许极端2 小时前
算法奇妙屋(三十八)-贪心算法学习之路 5
java·学习·算法·贪心算法
woai33642 小时前
学习JVM-基础篇-Java虚拟机栈&本地方法栈
java·jvm·学习
xiaoxiaoxiaolll2 小时前
Nature Communications：首次原子级“看见”高熵合金表面化学秩序
学习
azurehan012 小时前
计算机视觉学习笔记专有名词学习~1
笔记·学习·计算机视觉
琪伦的工具库2 小时前
在自动化部署流程中集成视频转GIF：工具选型与参数调优
javascript·自动化·音视频
charlie1145141912 小时前
2026年正点原子开发板移植方案——从0开始的Rootfs之路（4）Rootfs 目录结构创建：Linux 文件系统的“骨架“
linux·驱动开发·学习·嵌入式开发·嵌入式linux
AnalogElectronic2 小时前
uniapp学习4，简易记事本2.0
学习·uni-app
小旋风012342 小时前
uniapp开发app解决视频层级太高的问题（subNvue方法）
前端·uni-app·音视频
weixin_443478512 小时前
Flutter学习之输入组件
学习·flutter·servlet
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03围棋-html版本04纯 HTML/CSS/JS 实现的高颜值登录页，还会眨眼睛！少女心爆棚！05Mac 本地部署 OMLX + 通义千问 Qwen3.5-27B 保姆级教程06UV安装并设置国内源07“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）08Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services09OpenClaw 使用和管理 MCP 完全指南10安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）