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

Web前端 潘老师 4年前 (2020-09-20) 3240 ℃ (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,您需要填写昵称和邮箱!

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