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

本文接：vue手机商城项目实战（6）-首页商品列表组件实现

一、商品详情状态共享

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

2、在store\\index.js的state中新增goodsDetail状态：

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

3、在store\\index.js的mutations中新增设置goodsDetail的setGoodsDetail方法：

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下

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>

四、测试效果