vue3实现商城系统详情页（前端实现）

目录

写在前面

预览

实现

图片部分

详情部分

代码

源码地址

总结

---

写在前面

笔者不是上一个月毕业了么？找工作没找到，准备在家躺平两个月。正好整理一下当时的毕业设计，是一个商城系统。还是写篇文章记录下吧

预览

商品图片切换显示

sku规格切换

文章主要描述左侧图片组件，右侧sku的切换实现

在阅读本篇文章之前，你需要了解的是SPU和SKU是什么。

实现

图片部分

图片部分组件代码

<template>
  <div>
    <div style="display: flex;justify-content: center">
      <!--      大图-->
      <el-image :src="$img+showBigImg" style="width: 400px; height: 400px">
        <template #error>
          <div class="image-slot">
            <el-icon>
              <icon-picture/>
            </el-icon>
          </div>
        </template>
      </el-image>
    </div>
    <!--    小图-->
    <div style="display: flex;justify-content: space-between;margin-top: 20px">
      <el-icon style="width: 50px;height: 50px" @click="last">
        <ArrowLeftBold/>
      </el-icon>
      <div style="display: flex;justify-content: center;">
        <div v-for="item in showList" :key="item" :class="item===showBigImg ? 'is_show' : 'not_show' "
             @mouseover="show(item)" @click="show(item)" style="margin-left: 20px">
          <el-image :src="$img+item" fit="fill" style="width: 50px;height: 50px"/>
        </div>
      </div>
      <el-icon @click="next" style="width: 50px;height: 50px">
        <ArrowRightBold/>
      </el-icon>
    </div>
  </div>
</template>
<script setup>
import {ref, defineProps, watch,} from 'vue'

let props = defineProps({
  imgList: {
    type: Array,
    default: () => []
  }
})
let showBigImg = ref(props.imgList[0])//页面初始化的时候显示第一个图片
let pageNum = ref(0)//当前展示图片处于多少页
let showList = ref(props.imgList.slice(0, 4))//初始化只展示前四个

function show(big) {
  showBigImg.value = big
}
//下一页
function last() {
//  通过判断showBigImg的值来判断当前处于元素
  if (Array.isArray(showList.value)) {
    //查找索引，判断是否是最后一个元素（注意此处是原数组）
    if (pageNum.value === 0) {
      return
    }
    pageNum.value--
  } else {
    console.log("不是数组类型")
  }
}
//上一页
function next() {
  if (Array.isArray(props.imgList)) {
    //计算最大的页码，向上取整
    let mixPage = Math.ceil(props.imgList.length / 4);
    if ((pageNum.value + 1) === mixPage) {
      //如果是最后一页，则不能翻页
      return
    }
    //如果不是最后一页，则翻页
    pageNum.value++
  } else {
    console.log("不是数组类型")
  }
}
watch(() => props.imgList, () => {
  //监听父组件传递数据的变化，修改展示的数据
  showBigImg.value=props.imgList[0]
  showList.value = props.imgList.slice(0, 4)
})
watch(pageNum, () => {
//  监听pageNum的值变换，修改showList的显示数据
  showList.value = props.imgList.slice(pageNum.value * 4, (pageNum.value + 1) * 4)
  showBigImg.value = showList.value[0]
})
</script>

<style scoped>
.not_show {
  width: 50px;
  height: 50px;
  border: 1px;
}

.is_show {
  width: 50px;
  height: 50px;
  border: solid 3px #098CC0;
}
</style>

注：

1. 父组件需要控制这个图片组件的渲染时机，最好保证图片数