持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情

前言

实战已经开始了！上一篇章节中把详情页内容部分的整体样式都已经写完了，本章节会先把样式进行一个优化，tab栏和商品内容部分的联动功能也需要通过mock接口来实现。

优化样式

🌀 在项目框架搭建初期，我们把一些通用的颜色样式放到了统一的scss文件中。当我们通过全局搜索某个颜色的时候，发现都还是直接写的颜色值，所以我们需要统一进行管理。

👉 在Shop.vue和Content.vue中找到没有进行统一管理的颜色值之后，在viriables.scss中进行定义。

$content-fontcolor: #333;
$medium-fontColor: #666;
$light-fontColor: #999;
$content-notice-fontcolor: #777;
$content-bgColor: #F1F1F1;
$search-bgColor: #F5F5F5;
$search-fontColor: #B7B7B7;
$hightlight-fontColor: #E93B3B;
$btn-bgColor: #0091FF;
$bgColor: #FFF;

👉 然后在Shop.vue和Content.vue中引入viriables.scss文件，并替换其中的颜色值。

import '../../style/viriables.scss'

😲 除了颜色值之外，商品部分的标题如果超长之后，需要隐藏超出部分，并且显示...

🤔 项目搭建的时候，我们也定义过一个mixins.scss的文件，里面就定义过超长的样式内容

😁 所以我们直接在Content.vue文件中把mixins.scss引入进去使用即可。

@import "../../style/mixins.scss"

👉 标题样式的部分使用mixins中的样式

&__title{
  margin: 0;
  line-height: .2rem;
  font-size: .14rem;
  color: $content-fontcolor;
  @include ellipsis
}

chrome-capture (2).gif

😫 超长之后已经换到一行显示了，但是并没有隐藏超出的部分内容，这是因为我们没有给标题父元素样式

👉 将标题父元素detail的样式加上overflow:hidden

&__detail{
  overflow: hidden;
}

内容联动

🌀 在确定接口之前，我们需要知道请求接口和返回数据都应该有些啥？

👆 请求接口的时候，需要根据tab栏的值去判断返回的数据

✌️ 需要带上对应的店铺ID去请求，这样就可以保证返回的数据是当前店铺的

商品请求mock接口

🌀 可以根据下面的截图去定义自己的mock接口数据

👉 请求接口必不可少的就是引入get函数和定义数据的方法

import { reactive, toRefs } from 'vue'
import { get } from '../../utils/request'

👉 在setup函数中请求接口，把返回结果打印出来

const getContentData = async () => {
  const result = await get('/api/shop/1/products', { tab: 'all' })
  console.log(result.data)
}
getContentData()

接口已经请求成功了，而且数据也返回回来了，下面就可以把数据赋值之后再DOM元素上循环展示出来。

👉 定义返回数据值。

const data = reactive({
  contentList: []
})
const getContentData = async () => {
  const result = await get('/api/shop/1/products', { tab: 'all' })
  if (result.data.code === 0 && result.data.data.length) {
    data.contentList = result.data.data
  }
}
getContentData()
const { contentList } = toRefs(data)
return { contentList }

👉 页面上就不需要循环10次了，直接根据接口返回数据循环结果即可

<div class="product">
  <div class="product__item" v-for="item in contentList" :key="item._id">
    <img class="product__item__img" :src="item.imgUrl" />
    <div class="product__item__detail">
      <h4 class="product__item__title">{{item.name}}</h4>
      <p class="product__item__sales">月售 {{item.sales}} 件</p>
      <p class="product__item__price">
        <span class="product__item__yen">&yen;</span>{{item.price}}
        <span class="product__item__origin">&yen;{{item.oldPrice}}</span>
      </p>
    </div>
  </div>
</div>

tab栏数据

🌀 tab栏的数据可以根据实际情况来动态渲染，但是为了方便演示效果，我直接在setup函数中定义固定的几个数据即可。

const categories = [
  {
    name: '全部商品',
    tab: 'all'
  },
  {
    name: '秒杀',
    tab: 'seckill'
  },
  {
    name: '新鲜水果',
    tab: 'fruit'
  }
]
return { categories }

👉 页面上就直接循环categories数组

<div class="category">
      <div class="category__item" v-for="item in categories" :key="item.tab">{{item.name}}</div>
</div>

⭕️ 当点击tab栏的某一项时，需要给接口传递当前tab值，那么就得给tab栏点击事件，点击之后就要将当前tab值传递给接口方法

👉 添加点击事件，并传参

<div class="category">
    <div class="category__item"
        v-for="item in categories"
        :key="item.tab"
        @click="handleCategoryClick(item.tab)"
     >{{item.name}}</div>
</div>

👉 接口方法接收参数

const getContentData = async (tab) => {
  const result = await get('/api/shop/1/products', { tab })
  if (result.data.code === 0 && result.data.data.length) {
    data.contentList = result.data.data
  }
}
const handleCategoryClick = (tab) => {
  getContentData(tab)
}
return { categories, contentList, handleCategoryClick }

Kapture 2022-06-26 at 22.45.59.gif

😲 接口已经根据tab值请求成功了，但是tab栏的样式并没有根据点击事件而变化。

⭕️ 给点击事件方法中定义一个数据接收tab值，并在DOM元素中判断是否和当前tab值相等即可展示选中的样式。

👉 定义当前点击tab的数据值，默认是第一个tab值

const data = reactive({
  currentTab: categories[0].tab,
  contentList: []
})

👉 在点击事件的方法中接收并重新定义tab值

const handleCategoryClick = (tab) => {
  getContentData(tab)
  data.currentTab = tab
}
getContentData(data.currentTab)
const { contentList, currentTab } = toRefs(data)
return { categories, currentTab, contentList, handleCategoryClick }

👉 DOM元素中判断选中的样式

<div class="category">
    <div :class="{'category__item': true, 'category__item--active': currentTab === item.tab}"
        v-for="item in categories"
        :key="item.tab"
        @click="handleCategoryClick(item.tab)"
     >{{item.name}}</div>
</div>

chrome-capture (3).gif

总结

本篇文章主要是把详情页中内容部分的联动功能实现了，而且把样式进行了优化，但是我们把逻辑部分都写在了setup函数中，还没有像以前首页、登录注册页面一样拆分出来，大家如果有兴趣可以自己拆分一下看看，下一篇会使用watchEffect方法进行拆分逻辑代码。

【Vue3从零开始-实战】S16：详情页样式优化及tab栏内容联动功能实现

前言

优化样式

内容联动

商品请求mock接口

tab栏数据

总结