效果图

代码如下

页面设计

<div class="container"><!--商品详情 start--><van-image class="goods-item-image" :src="goods.goodsHeadImg"></van-image><div class="goods-price">￥<span>{{ goods.goodsPrice }}</span>.00起</div><div class="goods-name"><el-button round size="small">{{ goods.goodsBrand.goodsBrandName }}</el-button><span>{{ goods.goodsName }}</span><span>{{ goods.goodsCaption }}</span></div><div class="goods-sp"><div class="goods-sp-item" v-for="(specification,specificationIndex) in goods.specifications":key="specificationIndex"><div><span>{{ specification.goodsSpecificationName }}: </span><spanv-for="(goodsSpecificationOption,goodsSpecificationOptionIndex) in specification.goodsSpecificationOptions":key="goodsSpecificationOptionIndex">{{ goodsSpecificationOption.goodsSpecificationOptionName }} </span></div></div></div><div class="goods-introduction"><span>{{ goods.goodsIntroduction }}</span></div><div class="goods-images" v-for="(img,imgIndex) in goods.images" :key="imgIndex"><van-image class="goods-item-image" :src="img.goodsImageUrl"></van-image></div><!--商品详情 end--><!--底部导航 start--><van-action-bar style="margin-bottom: 50px "><van-action-bar-icon icon="chat-o" text="客服" badge="12"/><van-action-bar-icon icon="cart-o" text="购物车" dot/><van-action-bar-icon icon="shop-o" text="店铺" badge="5"/><van-action-bar-button type="warning" text="加入购物车" @click="onAddCartShow"/><van-action-bar-button type="danger" text="立即购买"/></van-action-bar><!--底部导航 end--><!--加入购物车弹出框 end--><van-popup v-model:show="showCart" position="bottom" closeable><div class="add-cart-show"><!--顶部 start--><div class="add-header"><van-image class="add-goods-img" radius="10" :src="goods.goodsHeadImg"></van-image><div class="add-goods-price">￥<span>{{ goods.goodsPrice }}</span></div></div><!--顶部 end--><!--地址 start--><AddressList class="add-address"/><!--地址 end--><!--规格 start--><div class="add-goods-specification"><span>颜色分类</span></div><!--规格 end--><!--底部 start--><el-button class="button" size="large" color="#ff9003" round @click="onAddCart">加入购物车</el-button><!--底部 end--></div></van-popup><!--加入购物车弹出框 end--></div>

逻辑编写

<script setup>import {onMounted, reactive, ref} from "vue";import axios from "@/utils/request"import {useRoute} from "vue-router"import {useDataStore} from "../../stores/dataStore"import {ElMessage} from "element-plus";import AddressList from "../../components/AddressList/Index.vue"const dataStore = useDataStore()const route = useRoute()//加入购物车弹出框控制器const showCart = ref(false)//商品idconst goodsId = route.params.name//商品数据const goods = reactive({goodsId: "",goodsHeadImg: "",goodsName: "",goodsCaption: "",goodsPrice: "",goodsIntroduction: "",goodsUse: "",goodsBrand: "",goodsType1: "",goodsType2: "",goodsType3: "",images: "",specifications: ""})onMounted(() => {ElMessage.success("成功")axios.get("front/goods/findDesc", {params: {goodsId: goodsId}}).then(res => {if (res.data.code == 200) {goods.goodsId = res.data.data.goodsIdgoods.goodsHeadImg = res.data.data.goodsHeadImggoods.goodsName = res.data.data.goodsNamegoods.goodsCaption = res.data.data.goodsCaptiongoods.goodsPrice = res.data.data.goodsPricegoods.goodsIntroduction = res.data.data.goodsIntroductiongoods.goodsUse = res.data.data.goodsUsegoods.goodsBrand = res.data.data.goodsBrandgoods.goodsType1 = res.data.data.goodsType1goods.goodsType2 = res.data.data.goodsType2goods.goodsType3 = res.data.data.goodsType3goods.images = res.data.data.imagesgoods.specifications = res.data.data.specifications}})})/*** 加入购物车弹出框*/const onAddCartShow = () => {showCart.value = true}/*** 加入购物车*/const onAddCart = () => {axios.post("front/cart/addGoodsCart", {userId: dataStore.userId,goodsId: goodsId,goodsHeadImg: goods.goodsHeadImg,goodsName: goods.goodsName,goodsPrice: goods.goodsPrice,num: 1,}).then(res => {if (res.data.code == 200) {showCart.value = false}})}</script>

css设计

<style scoped>.container {background-color: #ffffff;}/**商品数据样式*/.goods-price {margin-top: 10px;color: #ff4142;}.goods-price span {font-style: normal;font-family: JDZH-Regular, sans-serif;display: inline-block;font-size: 22px;font-weight: 500;line-height: normal;color: #f44d0b;}.goods-name {font-size: 21px;color: #181818;font-family: JDZH-Regular, sans-serif;}.goods-name button {margin: 4px;display: inline;color: #fdfdff;font-weight: 400;background-color: #fe012d;}.goods-sp {background-color: #f7f7f7;border-radius: 2%;margin-top: 10px;margin-bottom: 10px;}.goods-sp-item {padding: 8px;}.goods-sp-item span {font-size: 12px;font-weight: bold;}.goods-introduction {background-color: #f7f7f7;font-size: 12px;margin-top: 10px;margin-bottom: 10px;}.goods-introduction span {padding: 10px;}.goods-name span {margin-left: 5px;font-size: 16px;font-weight: bold;}/*加入购物车弹出框样式*/.add-cart-show {height: 500px;}.add-cart-show button {position: fixed;bottom: 10px;left: 10px;width: 350px;color: #faf7e7;font-weight: 700;}.add-header {display: flex;position: fixed;left: 10px;top: 70px;z-index: 100;background-color: #ffffff;}.add-goods-img {margin: 10px;width: 80px;}.add-goods-price {margin-left: 20px;margin-top: 35px;color: #ff4142;font-size: 15px;}.add-goods-price span {font-style: normal;font-family: JDZH-Regular, sans-serif;display: inline-block;font-size: 32px;font-weight: 500;line-height: normal;color: #f44d0b;}.add-address {margin-top: 110px;}.add-goods-specification {margin-top: 20px;}</style>

全部代码

<template><div class="container"><!--商品详情 start--><van-image class="goods-item-image" :src="goods.goodsHeadImg"></van-image><div class="goods-price">￥<span>{{ goods.goodsPrice }}</span>.00起</div><div class="goods-name"><el-button round size="small">{{ goods.goodsBrand.goodsBrandName }}</el-button><span>{{ goods.goodsName }}</span><span>{{ goods.goodsCaption }}</span></div><div class="goods-sp"><div class="goods-sp-item" v-for="(specification,specificationIndex) in goods.specifications":key="specificationIndex"><div><span>{{ specification.goodsSpecificationName }}: </span><spanv-for="(goodsSpecificationOption,goodsSpecificationOptionIndex) in specification.goodsSpecificationOptions":key="goodsSpecificationOptionIndex">{{ goodsSpecificationOption.goodsSpecificationOptionName }} </span></div></div></div><div class="goods-introduction"><span>{{ goods.goodsIntroduction }}</span></div><div class="goods-images" v-for="(img,imgIndex) in goods.images" :key="imgIndex"><van-image class="goods-item-image" :src="img.goodsImageUrl"></van-image></div><!--商品详情 end--><!--底部导航 start--><van-action-bar style="margin-bottom: 50px "><van-action-bar-icon icon="chat-o" text="客服" badge="12"/><van-action-bar-icon icon="cart-o" text="购物车" dot/><van-action-bar-icon icon="shop-o" text="店铺" badge="5"/><van-action-bar-button type="warning" text="加入购物车" @click="onAddCartShow"/><van-action-bar-button type="danger" text="立即购买"/></van-action-bar><!--底部导航 end--><!--加入购物车弹出框 end--><van-popup v-model:show="showCart" position="bottom" closeable><div class="add-cart-show"><!--顶部 start--><div class="add-header"><van-image class="add-goods-img" radius="10" :src="goods.goodsHeadImg"></van-image><div class="add-goods-price">￥<span>{{ goods.goodsPrice }}</span></div></div><!--顶部 end--><!--地址 start--><AddressList class="add-address"/><!--地址 end--><!--规格 start--><div class="add-goods-specification"><span>颜色分类</span></div><!--规格 end--><!--底部 start--><el-button class="button" size="large" color="#ff9003" round @click="onAddCart">加入购物车</el-button><!--底部 end--></div></van-popup><!--加入购物车弹出框 end--></div></template><script setup>import {onMounted, reactive, ref} from "vue";import axios from "@/utils/request"import {useRoute} from "vue-router"import {useDataStore} from "../../stores/dataStore"import {ElMessage} from "element-plus";import AddressList from "../../components/AddressList/Index.vue"const dataStore = useDataStore()const route = useRoute()//加入购物车弹出框控制器const showCart = ref(false)//商品idconst goodsId = route.params.name//商品数据const goods = reactive({goodsId: "",goodsHeadImg: "",goodsName: "",goodsCaption: "",goodsPrice: "",goodsIntroduction: "",goodsUse: "",goodsBrand: "",goodsType1: "",goodsType2: "",goodsType3: "",images: "",specifications: ""})onMounted(() => {ElMessage.success("成功")axios.get("front/goods/findDesc", {params: {goodsId: goodsId}}).then(res => {if (res.data.code == 200) {goods.goodsId = res.data.data.goodsIdgoods.goodsHeadImg = res.data.data.goodsHeadImggoods.goodsName = res.data.data.goodsNamegoods.goodsCaption = res.data.data.goodsCaptiongoods.goodsPrice = res.data.data.goodsPricegoods.goodsIntroduction = res.data.data.goodsIntroductiongoods.goodsUse = res.data.data.goodsUsegoods.goodsBrand = res.data.data.goodsBrandgoods.goodsType1 = res.data.data.goodsType1goods.goodsType2 = res.data.data.goodsType2goods.goodsType3 = res.data.data.goodsType3goods.images = res.data.data.imagesgoods.specifications = res.data.data.specifications}})})/*** 加入购物车弹出框*/const onAddCartShow = () => {showCart.value = true}/*** 加入购物车*/const onAddCart = () => {axios.post("front/cart/addGoodsCart", {userId: dataStore.userId,goodsId: goodsId,goodsHeadImg: goods.goodsHeadImg,goodsName: goods.goodsName,goodsPrice: goods.goodsPrice,num: 1,}).then(res => {if (res.data.code == 200) {showCart.value = false}})}</script><style scoped>.container {background-color: #ffffff;}/**商品数据样式*/.goods-price {margin-top: 10px;color: #ff4142;}.goods-price span {font-style: normal;font-family: JDZH-Regular, sans-serif;display: inline-block;font-size: 22px;font-weight: 500;line-height: normal;color: #f44d0b;}.goods-name {font-size: 21px;color: #181818;font-family: JDZH-Regular, sans-serif;}.goods-name button {margin: 4px;display: inline;color: #fdfdff;font-weight: 400;background-color: #fe012d;}.goods-sp {background-color: #f7f7f7;border-radius: 2%;margin-top: 10px;margin-bottom: 10px;}.goods-sp-item {padding: 8px;}.goods-sp-item span {font-size: 12px;font-weight: bold;}.goods-introduction {background-color: #f7f7f7;font-size: 12px;margin-top: 10px;margin-bottom: 10px;}.goods-introduction span {padding: 10px;}.goods-name span {margin-left: 5px;font-size: 16px;font-weight: bold;}/*加入购物车弹出框样式*/.add-cart-show {height: 500px;}.add-cart-show button {position: fixed;bottom: 10px;left: 10px;width: 350px;color: #faf7e7;font-weight: 700;}.add-header {display: flex;position: fixed;left: 10px;top: 70px;z-index: 100;background-color: #ffffff;}.add-goods-img {margin: 10px;width: 80px;}.add-goods-price {margin-left: 20px;margin-top: 35px;color: #ff4142;font-size: 15px;}.add-goods-price span {font-style: normal;font-family: JDZH-Regular, sans-serif;display: inline-block;font-size: 32px;font-weight: 500;line-height: normal;color: #f44d0b;}.add-address {margin-top: 110px;}.add-goods-specification {margin-top: 20px;}</style>