qimall/addons/QiJuhe/backend/views/components/com-goods-detail.php

<template id="com-goods-detail">
    <!-- 商品详情 -->
    <el-dialog title="供应链商品详情" :visible.sync="show" width="600px" lock-scrol="false" :append-to-body="appendToBody" :before-close="closeDetail">
        <!-- 内容 -->
        <template>
            <!-- 骨架 -->
            <el-skeleton :loading="load" animated>
                <template slot="template">
                    <div class="goods-img-body">
                        <el-carousel indicator-position="outside">
                            <el-carousel-item>
                                <el-skeleton-item variant="image" style="height: 300px; width: 560px" />
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <el-card class="goods-name-body">
                        <!-- 名称 -->
                        <el-skeleton-item variant="h1" style="width: 20%;" />

                        <div class="goods-price">
                            <li v-for="item in prices">
                                <el-skeleton-item variant="text" style="width: 80%;" />
                            </li>
                        </div>
                    </el-card>
                    <!-- 规格 -->
                    <el-card class="goods-sku-body">
                        <el-skeleton-item variant="h3" style="width: 20%;" />

                        <div class="goods-price">
                            <li v-for="item in prices">
                                <el-skeleton-item variant="text" style="width: 80%;" />
                            </li>
                        </div>
                    </el-card>
                    <!-- 详情 -->
                    <el-card class="goods-desc-body">
                        <el-skeleton-item />
                    </el-card>
                </template>
            </el-skeleton>
            <!-- 真实内容 -->
            <div class="goods-body" v-show="!load">
                <!-- 图 -->
                <div class="goods-img-body">
                    <el-carousel indicator-position="outside">
                        <el-carousel-item v-for="(item, index) in detail.gallery" :key="index">
                            <el-image style="height: 300px; width: 560px" :src="item.src" fit="contain"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <!-- 名称 -->
                <el-card class="goods-name-body">
                    <!-- 名称 -->
                    <div class="goods-name">
                        <span>{{ detail.title }}</span>
                        <span class="goods-staus">
                            <span v-if="detail.is_display">上架</span>
                            <span v-if="!detail.is_display">下架</span>
                        </span>
                    </div>
                    <!-- 价格 -->
                    <div class="goods-price">
                        <li v-for="item in prices">
                            <span class="price-name">{{ item.name }}</span>
                            <span class="price">{{ detail[item.index]|addZero }}</span>
                        </li>
                    </div>
                </el-card>
                <!-- 规格 -->
                <el-card class="goods-sku-body">
                    <div v-for="sku in detail.skus">
                        <!-- 规格 -->
                        <div class="goods-spec">
                            <li v-for="spec in sku.options">
                                <span class="goods-spec-name">{{ spec.spec_name }}</span>
                                <span class="goods-spec-value">{{ spec.spec_item_name }}</span>
                            </li>
                        </div>
                        <!-- 价格 -->
                        <div class="goods-price">
                            <li v-for="item in prices">
                                <span class="price-name">{{ item.name }}</span>
                                <span class="price">{{ sku[item.index]|addZero }}</span>
                            </li>
                        </div>
                    </div>
                </el-card>
                <!-- 详情 -->
                <el-card class="goods-desc-body" v-if="detail.detail_images">
                    <div v-html="detail.detail_images"></div>
                </el-card>
            </div>
        </template>
        <!-- 页脚 -->
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="closeDetail">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    Vue.component('com-goods-detail', {
        template: '#com-goods-detail',
        filters: {
            addZero: function(data) {
                return data == undefined
                    ? '未定义'
                    : Math.round((data / 100) * 100) / 100 + '元';
            },
        },
        props: {
            goodsId: {
                type: Number,
                default: 0,
            },
        },
        watch: {
            goodsId: {
                handler(val) {
                    val && this.getDetail(val)
                }
            }
        },
        data() {
            return {
                id: 0,
                appendToBody: true,
                detail: {},
                show: false,
                load: true,
                prices: [
                    {
                        'name': '指导价',
                        'index': 'guide_price',
                    },
                    {
                        'name': '协议价',
                        'index': 'agreement_price',
                    },
                    {
                        'name': '营销价',
                        'index': 'activity_price',
                    },
                    {
                        'name': '成本价',
                        'index': 'cost_price',
                    },
                ],
            };
        },
        methods: {
            getDetail(id) {
                let self = this;
                request({
                    method: 'post',
                    data: {
                        id: id,
                    },
                    params: {
                        r: 'qi-juhe/storage/goods-detail',
                    },
                }).then(e => {
                    if (e.data.code === 0) {
                        self.show = true
                        self.load = false
                        self.detail = e.data.data
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e.data.msg);
                });
            },
            // 关闭弹窗
            closeDetail() {
                this.show = false
                this.load = true
            },
        },
    });
</script>

<style>
    .goods-name {
        font-size: 18px;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .goods-desc-body,
    .goods-sku-body,
    .goods-name-body {
        margin: 10px;
        /* background: #fff; */
        /* border-radius: 5px; */
        /* padding: 10px; */
    }

    .shadow-border {
        box-shadow: 0px -5px 10px 0px #f0f0f0,
            -6px 0px 6px 0px #f0f0f0,
            6px 0px 6px 0px #f0f0f0,
            0px 5px 19px 0px #f0f0f0;
    }

    .goods-price li {
        list-style: none;
        margin-left: 15px;
    }

    .price-name::after,
    .goods-spec-name::after {
        content: ":";
    }

    .goods-price {
        text-align: left;
        padding: 10px 10px 0 10px;
        font-weight: 100;
        display: flex;
    }

    .goods-spec li {
        list-style: none;
    }

    .goods-desc-body img {
        max-width: 540px;
    }

    .goods-body {
        height: 600px;
        overflow-y: scroll;
        scroll-behavior: auto;
    }

    /* .goods-body::-webkit-scrollbar {
        width:10px; 
        height:10px;
    }
    .goods-body::-webkit-scrollbar-thumb {
        border-radius:10px;
        -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
        background:#535353;
    }
    .goods-body::-webkit-scrollbar-track {
        -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
        border-radius:10px;
        background:#EDEDED;
    } */

    .goods-img-images {
        width: 540px;
    }
</style>