vue手机商城项目实战(7)-商品详情组件实现

Web前端 潘老师 4年前 (2020-09-20) 3187 ℃ (0) 扫码查看

本文接:vue手机商城项目实战(6)-首页商品列表组件实现

1、由于商品详情是点击商品列表中的商品得以跳转实现,而商品详情组件也需要用到商品信息,因此可以通过共享商品的id然后去后台查询展示详情,或者直接将该商品所有的信息直接共享,为方便起见,我们这里直接使用后者方法。

2、在store\index.jsstate中新增goodsDetail状态:

state:{
    // 商品详情
    goodsDetail:{}
}

3、在store\index.jsmutations中新增设置goodsDetailsetGoodsDetail方法:

mutations:{
    setGoodsDetail(state,goods){
        this.state.goodsDetail = goods;
    }
}

1、我们在router\index.js中新增商品详情的路由配置:

{
    name:"GoodsDetail",
    path:"/goodsdetail",
    component:()=>import('@/views/GoodsDetail.vue')
}

2、实现Goods.vue中之前尚未实现的goodsDetail方法:

methods:{
    goodsDetail(goods){
        // 提交详情
        this.$store.commit("setGoodsDetail",goods);
        // 跳转到详情页
        this.$router.push({name:"GoodsDetail"});
    }
}

1、上传一张暂无详情信息的图片到assets\img

文件下载

  文件名称:暂无详情图   文件大小:12kb
  下载声明:本站资源仅供学习和研究使用,不得用于商业用途。如资源不慎侵犯你的版权请联系博主处理!
  下载地址:本地下载" rel="nofollow noopener noreferrer" target="_blank"> 点击下载   
解压密码:www.panziye.com

2、在views目录下新建GoodsDetail.vue组件,代码如下:

注意:添加购物车和利己购买方法暂不实现
<template>
<div id="goods-detail">
<div class="detail">
<!-- 顶部导航栏 -->
<mt-header title="商品详情">
<mt-button slot="left" icon="back" @click="goback">返回</mt-button>
</mt-header>
<!-- 轮播图 -->
<div class="banner">
<mt-swipe :auto="2000">
<mt-swipe-item v-for="(item,index) in goodsDetail.img" :key="index">
<img :src="item">
</mt-swipe-item>
</mt-swipe>
</div>
<div class="title">
<div class="name">{{goodsDetail.name}}</div>
<div class="explain">{{goodsDetail.explain}}</div>
<div class="price">价格:¥:{{goodsDetail.price}}</div>
</div>
<div class="contents">
<span>商品详情</span>
<span>评价</span>
</div>
<div class="info">
<!-- 后期可以使用v-if或使用嵌套路由切换商品详情和评价 -->
<img :src="noinfo">
</div>
</div>
<div class="operate">
<!-- 这两个方法暂时不实现 -->
<div class="cart" @click="addToCart(goodsDetail)">加入购物车</div>
<div class="buy" @click="toBuy(goodsDetail)">立即购买</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
noinfo:require("../assets/img/noinfo.png")
}
},
methods:{
goback(){
this.$router.go(-1);
}
},
computed:{
goodsDetail(){
return this.$store.state.goodsDetail;
}
}
}
</script>
<style scoped>
#goods-detail {
position: fixed;
z-index: 2;
top: 0;
bottom: 0;
width: 100%;
height:100%;
background-color: #fff;
}
.detail{
position: fixed;
top: 0;
bottom: 50px;
width: 100%;
overflow-y: auto;
}
.banner {
height: 256px;
}
.mint-swipe-item img {
width: 100%;
height: 256px;
}
.title{
margin-left: 10px;
}
.title .name {
line-height: 40px;
font-size: 22px;
}
.title .explain {
color: #555;
font-size: 12px;
}
.title .price {
font-size: 18px;
font-weight: bold;
line-height: 25px;
color: #e8380d;
}
.contents {
margin-top: 10px;
display: flex;
text-align: center;
background-color: #f6f6f6;
font-size: 12px;
}
.contents span {
flex: 1;
margin: 10px 0;
line-height: 20px;
}
.contents span:not(:last-child) {
border-right: 1px solid #aaa;
}
.info {
padding-top: 20px;
}
.info img {
display: block;
width: 100%;
}
.operate {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
line-height: 50px;
font-size: 14px;
text-align: center;
color: #fff;
}
.operate .cart {
float: left;
width: 50%;
background-color: #1296db;
}
.operate .buy {
float: right;
width: 50%;
background-color: #e8380d;
}
</style>

vue手机商城项目实战(7)-商品详情组件实现


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/1287.html
喜欢 (8)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】