美文网首页
【vue3.0】29.0 某东到家(十二)——商家详情页开发(二

【vue3.0】29.0 某东到家(十二)——商家详情页开发(二

作者: 我睡醒刚刚 | 来源:发表于2021-10-14 01:44 被阅读0次

数据流转

修改路由src\router\index.js:

······
 {
  path: '/shop/:id',
  name: 'Shop',
  component: () => import(/* webpackChunkName: "shop" */ '../views/shop/Shop.vue')

}
······

修改src\views\home\Nearby.vue:

......
    <router-link
      v-for="(item, index) in nearbyList"
      :key="index"
      :to="`/shop/${item.id}`"
    >
......

点击就会发现页面能够跳转详情页。

修改详情页代码,远程请求数据。
src\views\shop\Shop.vue:

<template>
  <div class="wrapper">
    <div class="search">
      <div class="search__back" @click="handleBackClick">
        <i class="search__back__icon custom-icon custom-icon-back"></i>
      </div>
      <div class="search__content">
        <span
          ><i class="search__content__icon custom-icon custom-icon-search"></i
        ></span>
        <input class="search__content__input" placeholder="请输入商品名称" />
      </div>
    </div>
    <!-- v-show="item.headImg"  防止撕裂图片的出现 -->
    <ShopInfo :item="item" :hideBorder="true" v-if="item.headImg" />
    <Toast v-if="show" :message="message" />
  </div>
</template>

<script>
import { reactive, toRefs, nextTick } from 'vue' // 路由跳转方法
import { useRouter, useRoute } from 'vue-router'
import ShopInfo from '@/components/ShopInfo/ShopInfo.vue'
import { get } from '@/utils/request.js'
import Toast, { useToastEffect } from '@/components/Toast/Toast'

const useShopInfoEffect = (toastMsg, route) => {
  const data = reactive({ item: {} })
  // eslint-disable-next-line no-unused-vars
  const getItemData = async () => {
    // 可以写成: const resultData = await get(`/api/shop/${route.params.id}`)
    const resultData = await get('/api/shop/' + route.params.id)
    if (resultData?.code === 200 && resultData?.data) {
      data.item = {
        id: resultData.data?.id,
        title: resultData.data?.name,
        sales: resultData.data?.sales,
        headImg: resultData.data?.imgUrl,
        expressLimit: resultData.data?.expressLimit,
        expressPrice: resultData.data?.expressPrice,
        highlight: resultData.data?.slogon
      }
      nextTick()
    } else {
      toastMsg('没有数据!')
    }
  }
  const { item } = toRefs(data)
  return { item, getItemData }
}

const useBackRouterEffect = router => {
  const handleBackClick = () => {
    router.back()
  }
  return { handleBackClick }
}
export default {
  name: 'Shop',
  components: { ShopInfo, Toast },
  setup () {
    const router = useRouter() // 整个大路由的信息
    const route = useRoute() // 当前访问路径的信息

    const { show, message, toastMsg } = useToastEffect()
    const { item, getItemData } = useShopInfoEffect(toastMsg, route)
    const { handleBackClick } = useBackRouterEffect(router)
    getItemData()
    return { show, message, item, handleBackClick }
  }
}
</script>

新增src\views\shop\Content.vue:

<template>
  <div class="content">
    <div class="category">
      <div class="category__item category__item--active">全部商品</div>
      <div class="category__item">折扣</div>
      <div class="category__item">新鲜水果</div>
      <div class="category__item">休闲食品</div>
      <div class="category__item">时令蔬菜</div>
      <div class="category__item">肉蛋家禽</div>
    </div>
    <div class="product">
      <div class="product__item">
        <img class="product__item__img" src="/i18n/9_16/img/tomato.png" />
        <div class="product__item__detail">
          <h4 class="product__item__title">番茄250g/份</h4>
          <p class="product__item__sales">月售x件</p>
          <p class="product__item__price">
            <span class="product__item__yen">
              &yen;33.6
            </span>
            <span class="product__item__origin">
              &yen;66.6
            </span>
          </p>
        </div>
        <div class="product__number">
          <span class="product__number__minus">-</span>
          0
          <span class="product__number__plus">+</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: ''
}
</script>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.content {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 1.6rem;
  bottom: 0.5rem;
}
.category {
  overflow-y: scroll;
  width: 0.76rem;
  background: $search-bg-color;
  height: 100%;
  &__item {
    line-height: 0.4rem;
    text-align: center;
    font-size: 14px;
    color: $content-font-color;
    &--active {
      background: $bg-color;
    }
  }
}
.product {
  overflow-y: scroll;
  flex: 1;
  &__item {
    position: relative;
    display: flex;
    padding: 0.12rem 0.16rem;
    margin: 0 0.16rem;
    border-bottom: 0.01rem solid $content-bg-color;
    // 配合解决超出长度以省略号显示而不会出现换行
    &__detail {
      overflow: hidden;
    }
    &__img {
      width: 0.68rem;
      height: 0.68rem;
      margin-right: 0.16rem;
    }
    &__title {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $content-font-color;
      // 超出长度以省略号显示而不会出现换行
      @include ellipsis;
    }
    &__sales {
      margin: 0.06rem 0;
      line-height: 0.16rem;
      font-size: 0.12rem;
      color: $content-font-color;
    }
    &__price {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $height-light-font-color;
    }
    &__yen {
      font-size: 0.12rem;
    }
    &__origin {
      margin-left: 0.06rem;
      line-height: 0.2rem;
      font-size: 0.12rem;
      color: $light-font-color;
      text-decoration: line-through; //中划线
    }
    // 购物车选购数量和加减号
    .product__number {
      position: absolute;
      right: 0rem;
      bottom: 0.12rem;
      &__minus,
      &__plus {
        display: inline-block;
        width: 0.2rem;
        height: 0.2rem;
        line-height: 0.16rem;
        border-radius: 50%;
        font-size: 0.2rem;
        text-align: center;
      }
      // 边框白色
      &__minus {
        border: 0.01rem solid $medium-font-color;
        color: $medium-font-color;
        margin-right: 0.05rem;
      }
      //无边框,背景蓝色
      &__plus {
        color: $bg-color;
        background: $btn-bg-color;
        margin-left: 0.05rem;
      }
    }
  }
}
</style>

优化全局,替换css:
src\style\viriables.scss:

/**
* 内容主体文字颜色
**/
$content-font-color: #333;
/**
* 无内容、背景灰、留白灰的颜色
**/
$content-bg-color: #f1f1f1;
/**
* 文字灰色字体
*
**/
$content-notice-font-color: #777;
/**
* 搜索框的背景色
**/
$search-bg-color: #f5f5f5;
/**
* 搜索框内文字颜色
**/
$search-font-color: #b7b7b7;
/**
* 默认背景颜色
**/
$bg-color: #fff;
/**
* 亮色主题高亮文字颜色
**/
$height-light-font-color: #e83b3b;
/**
* 中亮文字颜色
**/
$medium-font-color: #666;
/**
* 亮文字颜色
**/
$light-font-color: #999;
/**
* 按钮背景颜色
**/
$btn-bg-color: #0091ff;

优化stop.vue

<template>
  <div class="wrapper">
    <div class="search">
      <div class="search__back" @click="handleBackClick">
        <i class="search__back__icon custom-icon custom-icon-back"></i>
      </div>
      <div class="search__content">
        <span
          ><i class="search__content__icon custom-icon custom-icon-search"></i
        ></span>
        <input class="search__content__input" placeholder="请输入商品名称" />
      </div>
    </div>
    <!-- v-show="item.headImg"  防止撕裂图片的出现 -->
    <ShopInfo :item="item" :hideBorder="true" v-if="item.headImg" />
    <Content />
    <Toast v-if="show" :message="message" />
  </div>
</template>

<script>
import { reactive, toRefs, nextTick } from 'vue' // 路由跳转方法
import { useRouter, useRoute } from 'vue-router'
import ShopInfo from '@/components/ShopInfo/ShopInfo'
import { get } from '@/utils/request.js'
import Toast, { useToastEffect } from '@/components/Toast/Toast'
import Content from '@/views/shop/Content'

// 获取当前商铺信息
const useShopInfoEffect = (toastMsg, route) => {
  const data = reactive({ item: {} })
  // eslint-disable-next-line no-unused-vars
  const getItemData = async () => {
    // 可以写成: const resultData = await get(`/api/shop/${route.params.id}`)
    console.log(' route.params.id:' + route.params.id)
    const resultData = await get('/api/shop/' + route.params.id)
    if (resultData?.code === 200 && resultData?.data) {
      data.item = {
        id: resultData.data?.id,
        title: resultData.data?.name,
        sales: resultData.data?.sales,
        headImg: resultData.data?.imgUrl,
        expressLimit: resultData.data?.expressLimit,
        expressPrice: resultData.data?.expressPrice,
        highlight: resultData.data?.slogon
      }
      console.log('data.item :' + JSON.stringify(data.item))
      debugger
      nextTick()
    } else {
      toastMsg('没有数据!')
    }
  }
  const { item } = toRefs(data)
  return { item, getItemData }
}

// 后退按钮事件
const useBackRouterEffect = router => {
  const handleBackClick = () => {
    router.back()
  }
  return { handleBackClick }
}

export default {
  name: 'Shop',
  components: { ShopInfo, Toast, Content },
  // eslint-disable-next-line space-before-function-paren
  setup() {
    const router = useRouter() // 整个大路由的信息
    const route = useRoute() // 当前访问路径的信息

    const { show, message, toastMsg } = useToastEffect()
    const { item, getItemData } = useShopInfoEffect(toastMsg, route)
    const { handleBackClick } = useBackRouterEffect(router)
    getItemData()
    return { show, message, item, handleBackClick }
  }
}
</script>

<style lang="scss" scoped>
@import '@/style/viriables';
.wrapper {
  padding: 0 0.18rem;
}
.search {
  margin: 0.14rem 0 0.04rem 0;
  display: flex;
  line-height: 0.32rem; //高度会将父元素撑开
  &__back {
    width: 0.3rem;
    &__icon {
      font-size: 0.2rem;
      color: #b6b6b6;
    }
  }
  &__content {
    display: flex;
    flex: 1;
    background: $search-bg-color;
    border-radius: 0.16rem;
    &__icon {
      padding-left: 0.1rem;
      padding-right: 0.1rem;
      width: 0.44rem;
      text-align: center;
      color: $search-font-color;
    }
    &__input {
      padding-right: 0.2rem;
      width: 100%;
      display: block;
      border: none;
      outline: none;
      background: none;
      height: 0.32rem;
      font-size: 0.14rem;
      color: $content-font-color;
      &::placeholder {
        color: $content-font-color;
      }
    }
  }
}
</style>

结果如下:

image.png

其中接口/mock/api/shop/:id
数据如下:
{
  "code": 200,
  "data": {
    "id": "1",
    "name": "某什么玛1",
    "imgUrl": "/i18n/9_16/img/near.png",
    "sales": 200,
    "expressLimit": 0,
    "expressPrice": 5,
    "slogon": "VIP尊享xx元减x元运费券(每月x张)"
  },
  "desc": "成功"
}

相关文章

  • android商品详情页开发

    像商品详情这样的页面,功能多,页面繁杂,特别是对页面逻辑也不少,所以我觉得有必要记录一下开发商品详情页面踩过的坑。...

  • django开发电子商城(二十)详情页接入及流程调整

    1:首页做部分调整,去掉登陆和注册按钮,以及头像信息 2:在index.html中增加跳转到列表页的链接 3:增加...

  • 天猫如何引导买家到商品详情页?

    一直很好奇电商怎么引导买家来完成购物的。作为初学者,将购物流程分成两个部分,第一块是怎么有效地引流到商品详情页,即...

  • 某某人的白皮书 | 第十二页

    七 我们的故事在什么时候开始都不算晚,那在什么时候结束也不为过。就好像说我们遇见一个人,不分早晚不分城市也不分方向...

  • 某某人的白皮书 | 第二十页

    事实上,一个人他就是失败了,即使他看起来很成功。事实上,一个人他就是输了,即使他看起来很努力。事实上,一个人,他就...

  • 仿京东天猫商品详情页

    1.参考借鉴 Android仿京东商品详情页上拉查看图文详情 模仿淘宝、京东、蘑菇街商品详情页,可嵌套ListVi...

  • 家书二十二

    家书二十二 2017年3月22日 任会宽 明日有人上山,我还没有定了是否同去。今年去了几回,都是当日便返回,白天的...

  • django开发电子商城(二十六)页面搜索框的开发

    1:修改查询条件的提交地址 2:在list.html页面中设置表单请求的地址,表单请求的方法和搜索的name值 3...

  • 宋江发家史(十二)

    上了梁山总算是安定下来的宋江,坐了梁山第二把交椅。而实际上此时坐第一把交椅的曹盖,只是一个形式上的大哥,梁山核心人...

  • 她到我家十二年

    回到家已经很晚了,父母都已经睡去。她还在客厅擦地。 我问她怎么还没睡,她轻瞥了我一眼,然后继续做她自己的事。我从后...

网友评论

      本文标题:【vue3.0】29.0 某东到家(十二)——商家详情页开发(二

      本文链接:https://www.haomeiwen.com/subject/vnmcmltx.html