qimall/addons/QiDingDong/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 in detail.images">
                            <el-image style="height: 300px; width: 560px" :src="item.image_url" fit="contain"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <!-- 名称 -->
                <el-card class="goods-name-body">
                    <!-- 名称 -->
                    <div class="goods-name">
                        <span>{{ detail.goods.goods_name }}</span>
                        <span class="goods-staus">
                            <span v-if="detail.goods.on_off_status == 1">上架</span>
                            <span v-else>下架</span>
                        </span>
                    </div>
                </el-card>
                <!-- 规格 -->
                <el-card class="goods-sku-body">
                    <div v-for="sku in detail.specs">
                        <!-- 规格 -->
                        <div class="goods-spec">
                            <span class="goods-spec-name">规格</span>
                            <span class="goods-spec-value">{{ sku.spec_name }}</span>
                        </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(detail.rate)}}</span>
                            </li>
                        </div>
                    </div>
                </el-card>
                <!-- 详情 -->
                <el-card class="goods-desc-body">
                    <div v-html="detail.goods.description"></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, rate) {
                // console.log(`addZero ${data} -- ${rate}`, parseFloat((data * rate) * 0.01).toFixed(2) + '元')
                return data == undefined
                    ? '未定义'
                    : (Math.floor(data * rate) * 0.01).toFixed(2) + '元';
            },
        },
        props: {
            goodsId: {
                type: Number,
                default: 0,
            },
        },
        watch: {
            goodsId: {
                handler(val) {
                    this.getDetail(val)
                }
            }
        },
        data() {
            return {
                id: 0,
                appendToBody: true,
                detail: {
                    goods: {},
                    images: [],
                    specs: [],
                    specs_list: {},
                    specs_list_v1: {},
                    specs_name: {},
                    specs_name_v1: {},
                    rate: 1
                },
                show: false,
                load: true,
                prices: [
                    {
                        'name': '供货价',
                        'index': 'price',
                    },
                    {
                        'name': '建议零售价',
                        'index': 'retail_price',
                    },
                    {
                        'name': '最低售价',
                        'index': 'lowest_price',
                    },
                ],
            };
        },
        methods: {
            getDetail(id) {
                let self = this;
                self.show = true
                request({
                    method: 'get',
                    params: {
                        r: 'qi-ding-dong/goods/detail',
                        id: id,
                    },
                }).then(e => {
                    if (e.data.code === 0) {
                        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;*/
        width: 100%;
    }

    .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>