Vue.js仿饿了么外卖App--(6)商家详情页实现

最新推荐文章于 2022-06-27 13:45:18 发布
最新推荐文章于 2022-06-27 13:45:18 发布
阅读量2.2k 收藏 4
点赞数 2
分类专栏： Vue仿饿了么项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gxgalaxy/article/details/108545493
版权

文章目录

一、内容介绍

1、内容

商家详情页主要包括商家的具体信息、公告与活动、商家实景和商家信息。其中商家实景这里实现了纵向滚动，将scrollX设置为true。这一部分利用到了split组件和star组件

2、效果

在这里插入图片描述
在这里插入图片描述

二、具体实现

1、布局

<template>
  <div class="seller" ref="seller">
    <div class="seller-content">
      <div class="overview">
        <h1 class="title">{{seller.name}}</h1>
        <div class="desc">
          <Star :score="seller.score"></Star>
          <span class="text">({{seller.ratingCount}})</span>
          <span class="text">月售{{seller.sellCount}}单</span>
        </div>
        <ul class="remark">
          <li class="block">
            <h2>起送价</h2>
            <div class="content">
              <span class="stress">{{seller.minPrice}}</span>元
            </div>
          </li>
          <li class="block">
            <h2>商家配送</h2>
            <div class="content">
              <span class="stress">{{seller.deliveryPrice}}</span>元
            </div>
          </li>
          <li class="block">
            <h2>平均配送时间</h2>
            <div class="content">
              <span class="stress">{{seller.deliveryTime}}</span>分钟
            </div>
          </li>
        </ul>
        <div class="favorite" @click="toggleFavorite">
          <span class="iconfont icon-shoucang" :class="{active:favorite}"></span>
          <span class="text">{{favoriteText}}</span>
        </div>
      </div>
      <Split></Split>
      <div class="bulletin">
        <h1 class="title">公告与活动</h1>
        <div class="content-wrapper">
          <p class="content">{{seller.bulletin}}</p>
        </div>
        <ul v-if="seller.supports" class="supports">
          <li class="supports-item" v-for="(item,index) in seller.supports" :key="index">
            <span class="icon" :class="classMap[seller.supports[index].type]"></span>
            <span class="text">{{seller.supports[index].description}}</span>
          </li>
        </ul>
      </div>
      <Split></Split>
      <div class="pics">
        <h1 class="title">商家实景</h1>
        <div class="pic-wrapper" ref="picWrapper">
          <ul class="pic-list" ref="picList">
            <li class="pic-item" v-for="(pic, index) in seller.pics" :key="index">
              <img :src="pic" width="120" height="90" class="pic" alt="">
            </li>
          </ul>
        </div>
      </div>
      <Split></Split>
      <div class="info">
        <h1 class="title">商家信息</h1>
        <ul>
          <li class="info-item" v-for="(info, index) in seller.infos" :key="index">{{info}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

2、滚动实现

_initScroll () {
      if (!this.scroll) {
        // console.log('3')
        this.$nextTick(() => {
          this.scroll = new BScroll(this.$refs.seller, {
            click: true
          })
        })
      } else {
        this.scroll.refresh()
      }
      if (!this.picSroll) {
        let picWidth = 120
        let margin = 6
        let width = (picWidth + margin) * this.seller.pics.length - margin
        this.$refs.picList.style.width = `${width}px`
        this.$nextTick(() => {
          this.picSroll = new BScroll(this.$refs.picWrapper, {
            scrollX: true,
            click: true
            // eventPassthrough: 'vertical'
          })
        })
      } else {
        this.picSroll.refresh()
      }
    },

三、源码

seller.vue

<template>
  <div class="seller" ref="seller">
    <div class="seller-content">
      <div class="overview">
        <h1 class="title">{{seller.name}}</h1>
        <div class="desc">
          <Star :score="seller.score"></Star>
          <span class="text">({{seller.ratingCount}})</span>
          <span class="text">月售{{seller.sellCount}}单</span>
        </div>
        <ul class="remark">
          <li class="block">
            <h2>起送价</h2>
            <div class="content">
              <span class="stress">{{seller.minPrice}}</span>元
            </div>
          </li>
          <li class="block">
            <h2>商家配送</h2>
            <div class="content">
              <span class="stress">{{seller.deliveryPrice}}</span>元
            </div>
          </li>
          <li class="block">
            <h2>平均配送时间</h2>
            <div class="content">
              <span class="stress">{{seller.deliveryTime}}</span>分钟
            </div>
          </li>
        </ul>
        <div class="favorite" @click="toggleFavorite">
          <span class="iconfont icon-shoucang" :class="{active:favorite}"></span>
          <span class="text">{{favoriteText}}</span>
        </div>
      </div>
      <Split></Split>
      <div class="bulletin">
        <h1 class="title">公告与活动</h1>
        <div class="content-wrapper">
          <p class="content">{{seller.bulletin}}</p>
        </div>
        <ul v-if="seller.supports" class="supports">
          <li class="supports-item" v-for="(item,index) in seller.supports" :key="index">
            <span class="icon" :class="classMap[seller.supports[index].type]"></span>
            <span class="text">{{seller.supports[index].description}}</span>
          </li>
        </ul>
      </div>
      <Split></Split>
      <div class="pics">
        <h1 class="title">商家实景</h1>
        <div class="pic-wrapper" ref="picWrapper">
          <ul class="pic-list" ref="picList">
            <li class="pic-item" v-for="(pic, index) in seller.pics" :key="index">
              <img :src="pic" width="120" height="90" class="pic" alt="">
            </li>
          </ul>
        </div>
      </div>
      <Split></Split>
      <div class="info">
        <h1 class="title">商家信息</h1>
        <ul>
          <li class="info-item" v-for="(info, index) in seller.infos" :key="index">{{info}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import Star from '@/components/Star/star'
import Split from '@/components/split/split'
export default {
  props: {
    seller: {
      type: Object
    }
  },
  data () {
    return {
      sellers: this.seller,
      favorite: false
    }
  },
  components: {
    Star,
    Split
  },
  computed: {
    favoriteText () {
      return this.favorite ? '已收藏' : '收藏'
    }
  },
  created () {
    // 定义一个数组用来存储折扣的图标
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
  },
  // watch: {
  //   'sellers' () {
  //     console.log('1')
  //     this._initScroll()
  //   }
  // },
  mounted () {
    // console.log('2')
    this._initScroll()
  },
  methods: {
    _initScroll () {
      if (!this.scroll) {
        // console.log('3')
        this.$nextTick(() => {
          this.scroll = new BScroll(this.$refs.seller, {
            click: true
          })
        })
      } else {
        this.scroll.refresh()
      }
      if (!this.picSroll) {
        let picWidth = 120
        let margin = 6
        let width = (picWidth + margin) * this.seller.pics.length - margin
        this.$refs.picList.style.width = `${width}px`
        this.$nextTick(() => {
          this.picSroll = new BScroll(this.$refs.picWrapper, {
            scrollX: true,
            click: true
            // eventPassthrough: 'vertical'
          })
        })
      } else {
        this.picSroll.refresh()
      }
    },
    toggleFavorite (event) {
      if (!event._constructed) {
        return
      }
      this.favorite = !this.favorite
    }
  }
}
</script>

<style>
.seller{
  position: absolute;
  top: 174px;
  bottom: 0;
  /* left: 0; */
  width: 100%;
  overflow: hidden;
}
.seller .overview{
  padding: 18px;
  position: relative;
}
.seller .overview .title{
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 14px;
  color: rgb(7,17,27);
}
.seller .overview .desc{
  font-size: 0;
  border-bottom: 1px solid rgba(7,17,27,0.1);
  padding-bottom: 18px;
}
.seller .overview .desc .star{
  display: inline-block;
  margin-right: 8px;
  vertical-align: top;
}
.seller .overview .desc .text{
  display: inline-block;
  margin-right: 12px;
  line-height: 18px;
  vertical-align: top;
  font-size: 10px;
  color: rbg(77,85,93);
}
.seller .overview .remark{
  display: flex;
  padding-top: 18px;
}
.seller .overview .remark .block{
  flex: 1; /**都设置为1就会等分 */
  text-align: center;
  border-right: 1px solid rgba(7,17,27,0.1);
}
.seller .overview .remark li:last-child{
  border-right: none;
}
.seller .overview .remark .block h2{
  margin-bottom: 4px;
  font-size: 10px;
  color: rgb(147,153,159);
  line-height: 10px;
}
.seller .overview .remark .block .content{
  line-height: 24px;
  font-size: 10;
  color: rgb(7,17,27);
}
.seller .overview .remark .block .content .stress{
  font-size: 24px;
}
.seller .overview .favorite{
  position: absolute;
  width: 50px;
  right:18px;
  top: 18px;
  text-align: center;
}
.seller .overview .favorite .iconfont{
  display: block;
  margin-bottom: 4px;
  color: #d6d4d9;
  line-height: 24px;
  font-size: 24px;
}
.seller .overview .favorite .active{
  color: rgb(240,20,20);
}
.seller .overview .favorite .text{
  line-height: 10px;
  font-size: 10px;
  color: rgb(77,85,93);
}
.seller .bulletin{
  padding: 18px 18px 0 18px;
}
.seller .bulletin .title{
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 14px;
  color: rgb(7,17,27);
}
.seller .bulletin .content-wrapper{
  padding: 0 12px 16px 12px;
  border-bottom: 1px solid rgba(7,17,27,0.1);
}
.seller .bulletin .content-wrapper .content{
  line-height: 24px;
  font-size: 12px;
  color: rgb(240,20,20);
}
.seller .bulletin .supports .supports-item{
  padding: 16px 12px;
  font-size: 1px;
  border-bottom: 1px solid rgba(7,17,27,0.1);
}
.seller .bulletin .supports .supports-item .icon{
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: top;
  margin-right: 6px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}
.seller .bulletin .supports .supports-item .decrease{
  background-image: url('./css/decrease_2@2x.png')
}
.seller .bulletin .supports .supports-item .discount{
  background-image: url('./css/discount_2@2x.png')
}
.seller .bulletin .supports .supports-item .guarantee{
  background-image: url('./css/guarantee_2@2x.png')
}
.seller .bulletin .supports .supports-item .invoice{
  background-image: url('./css/invoice_2@2x.png')
}
.seller .bulletin .supports .supports-item .special{
  background-image: url('./css/special_2@2x.png')
}
.seller .bulletin .supports .supports-item .text{
  line-height: 16px;
  font-size: 12px;
  color: rgb(7,17,27);
}
.seller .bulletin .supports li:last-child{
  border-bottom: none;
}
.seller .seller-content .pics{
  padding: 18px;
}
.seller .pics .title{
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 14px;
  color: rgb(7,17,27);
}
.seller .pics .pic-wrapper{
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.seller .pics .pic-wrapper .pic-item{
  display: inline-block;
  margin-right: 6px;
}
.seller .pics .pic-wrapper .pic-list li:last-child{
  margin: 0;
}
.seller .info {
  padding: 18px 18px 0 18px;
}
.seller .info .title{
  padding-bottom: 12px;
  font-size: 14px;
  line-height: 14px;
  color: rgb(7,17,27);
  border-bottom: 1px solid rgba(7,17,27,0.1);
}
.seller .info .info-item{
  padding: 16px 12px;
  line-height: 16px;
  border-bottom: 1px solid rgba(7,17,27,0.1);
  color: rgb(7,17,27);
  font-size: 12px;
}
.seller .info li:last-child{
  border: none;
}
</style>
gxgalaxy
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ReclyerView双联动，仿饿了吗店铺详情页
02-13
ReclyerView双联动，仿饿了吗店铺详情页
android 饿了么 布局,Android仿饿了么详情页可以跟随手指移动 viewpager变详情页
weixin_34061440的博客
05-26 367
源码地址[https://github.com/githubwing/ZoomHeader]不是共享元素！不是共享元素！不是共享元素！重要的话说三遍。共享元素不可以随手指移动的。先吐槽下饿了么。不提示左右可以滑动。我还是无意中发现的。不提示我怎么知道可以滑动？？这是一个模仿饿了么详情页的例子。并非一个库，并非拿来就可以用，主要讲解思路以及如何实现，可能有一些细节没有处理。 讲述了如何实现。具体祥见...
仿饿了么goods商品左右联动详情页+功能实现
12-27
百分百仿饿了么商品左右点击联动功能和滑动scroll功能
Vue模仿饿了么实现商户综合推荐
qq_25245553的博客
07-30 302
由于自己的项目一直是现在普通h5项目下造好轮子，然后再挪到脚手架进去，再此分享一下 效果图: 先上代码： html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-sc
vue-sell：Vue.js高仿饿了么外卖App课程原始码http：//coding.imooc.comclass74.html
02-28
Vue.js高仿饿了么外卖App课程原型，课程地址： ://coding.imooc.com/class/74.html 本原始代码基于GPL协议，仅用于Vue实战项目的学习，不可作为商业用途。 你可以学到什么 我们可以通过一张图来认识一下本课程的知识...
Vue.js 高仿饿了么外卖项目源码
最新发布
10-17
本项目做的是：高仿上线外卖APP商家模块 开发过程：需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译打包 以线上生产环境来开发：代码开发及测试环节：UI标注完美还原设计图、以真实外卖APP数据做演示，以...
Vue.js高仿饿了么外卖App.txt
04-10
第3章 Vue-cli开启Vuejs项目 第4章 项目实战-准备工作 第5章 项目实战-页面骨架开发 ... 共 12章 项目技术架构 vue-cli（脚手架工具） vue vue-resource vue-router（路由） vue-infinite-scorll ...
Vue.js 高仿饿了么外卖APP 1.0到2.0版本完美升级
03-09
这是一个高仿饿了么外卖WebApp，现已完成商品预览、商品详情、商家预览、添加购物、查看评论等功能。 部分截图 路由展示 商品分类及添加购物 商品详情及购物车 项目预览 源码地址 点击预览（请尽量使用手机预览...
VUE.js高仿饿了么商城实战项目源码（未打包文件）
11-09
6. **JavaScript基础**：虽然项目基于Vue.js，但对JavaScript的理解仍然是必要的。你将接触到ES6的新特性，如箭头函数、解构赋值、模板字符串等，以及异步操作如Promise和async/await。 7. **CSS和动画**：为了实现...
store-manager:使用Vue.js的商店经理应用
03-07
店经理 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
饿了么外卖移动端单页
03-28
用vue.js开发的饿了么移动端单页页面，组件化开发，实现了数据的双向绑定、购买等功能。
Vue2.0 仿饿了么商家详情页面（二）
jinmo277的专栏
06-20 1319
同history.go, router.go接受的参数应该为Number， 例如： // 上一页 history.go(-1) router.go(-1) 而你应该使用的是 router.push
从 Element UI 源码中学到的 5 个技巧
前端达人
07-29 419
导语：Element UI[1]是世界级最优秀的UI框架之一。这个优秀的框架有哪些我们能学习的优点呢？这篇文章将分享作者在查看这个框架仓库源码中认为值得参考的技巧，建议配合element...
饿了么自动登录解决方案（手机短信登录）
kai402458953的博客
04-15 1万+
登录流程： 1.注册易码平台,通过易码平台获取 随机的手机号码 2.选择短信项目：饿了么，点击获取手机号 3.将平台中提供的手机号填入饿了么登录页 饿了么登录网址：https://h5.ele.me/login/#redirect=https%3A%2F%2Fh5.ele.me%2Fprofile%2F%23come_from%3Dlogout 可能需要点击滑块 4.点击验...
python爬虫之请求（url）构造 —— 寻找参数来源以及中文编码
Kosmoo的博客
10-27 2万+
1. 环境 系统：win7 python：3.6.1 IDE：pycharm 平台：scrapy 2. 目标 按照下图中的下拉列表，构造搜索链接： 在“All”类目下，搜索关键字“phone mount”，请求连接为： https://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias%3Daps&field-keywords=phone+moun
elementUI 动态渲染三级菜单
热门推荐
hailangtuteng的博客
07-23 2万+
第一次使用elementUI项目 不太熟 看了网上很多列子 感觉或多或少都有问题 于是自己琢磨写出来了 后台传的数据为 menuList: [ { name: "首页", pid: 0, id: 28, url: "/main" }, { name: "实时监测", pid: 0, id: 29, url: "/monitoring", childNode: [ ...
Vue文档预览
小陈的博客
06-27 7446
没错，文档在线预览就是这么方便，应用场景很广泛，譬如邮箱里面的文件，OA系统里面的文件，下面小编直接用Vue从零开始撸一套简单OA系统来实现文档预览。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NpxpTvZA-1656308707874)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/576845d56a394dd0b529a1f5479e2a6d~tplv-k3u1fbpfcp-zoom-in-crop-mark:1
实战Vue.js 2.x：Vuex、vue-router构建复杂SPA
2. **数据循环与过滤**：学习如何使用Vue.js来循环遍历数据，并实现数据的搜索和过滤功能，这对于展示和操作动态数据至关重要。 3. **组件化开发**：掌握组件的创建和使用，组件是Vue.js中的核心特性，可以将复杂的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值