yzzn-middleground-supplier/src/views/supplier/goodsDetail/detail.vue

<template>
    <div class="app-container">
        <div class="left">
            <div class="leftTop">
                <span>店铺名称</span>
            </div>
            <div class="leftBottom">
                <!-- <div class="leftBottom1">
                    <el-carousel height="45vh">
                        <el-carousel-item v-for="(item,index) in picList" :key="index">
                            <img :src="item.picture" alt="" style="width: 100%;height: 100%;">
                        </el-carousel-item>
                    </el-carousel>
                </div> -->
                <!-- <div class="leftBottom2">
                    <img v-for="item in picList" :src="item.picture" alt="" style="width: 20%;">
                    <PicListChange :picList="picList"></PicListChange>
                </div> -->
                <PicListChange :picList="goodsDetail.picture"></PicListChange>
                <div style="width: 100%;display: block;">
                    <el-button class="leftBottom3" type="text">举报</el-button>
                </div>
                <div class="leftBottom4">
                    <el-button type="primary">进入店铺</el-button>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="rightTop">
                <div class="goodsName">
                    <span>{{ goodsDetail.name }}</span>
                </div>
                <div class="detail1">
                    <div style="width: 100%; float: left;">
                        <div class="detail1-1">商品单价</div>
                        <div class="detail1-2">￥{{ goodsDetail.platPrice }}/{{ goodsDetail.unit }}</div>
                        <div class="detail1-3">￥{{ goodsDetail.marketPrice }}/{{ goodsDetail.unit }}</div>
                    </div>
                    <div class="detail1-4">
                        <el-tag v-for="item in goodsDetail.keyword" size="mini" style="margin-right: 2%;"> {{ item
                            }}</el-tag>
                    </div>
                </div>
                <div class="detail2">
                    <div class="rightBottomDetail">
                        <div class="rightBottom-1" style="height: 35px;">剩余库存</div>
                        <div class="rightBottom-2">{{ goodsDetail.num }}&nbsp;{{ goodsDetail.unit }}</div>
                    </div>
                    <div class="rightBottomDetail">
                        <div class="rightBottom-1" style="height: 35px;">价格策略</div>
                        <div class="rightBottom-2">
                            aaaaafasdfafqwefqwfefqawedsfasdfqwefasdfqwefasdfwqefaefasdfqawefasedfqawegfqwgqwerfqwefdwe
                        </div>
                    </div>
                </div>
                <!-- <el-divider class="divider" :dashed="true"></el-divider> -->

            </div>
            <div class="rightBottom">
                <el-tabs v-model="bottomChoice" @tab-click="" style="width: 98%; margin: 0px auto">
                    <el-tab-pane label="商品介绍" name="1">
                        <div class="rightBottomDetail">
                            <div class="rightBottom-1" style="height: 35px;">商品名称</div>
                            <div class="rightBottom-2">{{ goodsDetail.name }}</div>
                        </div>
                        <div class="rightBottomDetail">
                            <div class="rightBottom-1" style="height: 35px;">商品编号</div>
                            <div class="rightBottom-2">{{ goodsDetail.code }}</div>
                        </div>
                        <div class="rightBottomDetail">
                            <div class="rightBottom-1" style="height: 35px;">商品品牌</div>
                            <div class="rightBottom-2">{{ goodsDetail.brand }}</div>
                        </div>
                        <div class="rightBottomDetail">
                            <div class="rightBottom-1" style="height: 35px;">商品产地</div>
                            <div class="rightBottom-2">暂时没有商品产地</div>
                        </div>
                        <div class="rightBottomDetail">
                            <div class="rightBottom-1" style="min-height: 35px;">商品描述</div>
                            <!-- <div class="rightBottom-2">{{ goodsDetail.productDetail }}</div> -->
                            <div class="rightBottom-2">
                                <div v-html="goodsDetail.productDetail"></div>
                            </div>
                        </div>
                        <div class="rightBottomDetail">
                            <div class="rightBottom-1" style="min-height: 35px;">平台申明</div>
                            <div class="rightBottom-2">
                                Lorem isum dolor sit amet, conseclelur adipiscing elt. Aenean euismod
                                bibendum aoreet Proin gravda dolorsit amet lacus accumsan etvvea ustocommodo.
                                Proin sodalespulvinar sic tempor. Socis natoquepenatibus etmagnis dis paturient
                                montes, nasceturridiculus mus. Nam fermentum, nulaluctus pharetravulputate
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="规格与包装" name="2"></el-tab-pane>
                    <el-tab-pane label="售后保障" name="3"></el-tab-pane>
                    <el-tab-pane label="商品评价" name="4"></el-tab-pane>
                </el-tabs>
            </div>
        </div>

    </div>
</template>

<script>
import {
    createGoodsDetail,
    updateGoodsDetail,
    deleteGoodsDetail,
    getGoodsDetail,
    getGoodsDetailPage,
    exportGoodsDetailExcel,
    addGoodsDetailUpNum,
    changeGoodsDetailStatus,
    getAddAgainLog,
} from "@/api/supplier/goodsDetail";
import PicListChange from "./components/picListChange.vue";

export default {
    name: "GoodsDetail",
    components: {
        PicListChange,
    },
    data() {
        return {
            goodsDetail: { name: "商品名称" },
            bottomChoice: '1',
            picList: [
                "https://ts.willalp.com:9002/willalpbucket/微信图片_2024032809233720240328092531.png",
                "http://60.188.249.11:9002/willalpbucket/fm0220240407170915.jpg",
                "http://60.188.249.11:9002/willalpbucket/lunbo320240402180418.png",
                "http://60.188.249.11:9002/willalpbucket/lunbo120240402180243.png",
                "http://60.188.249.11:9002/willalpbucket/lunbo420240403110118.png",
                "http://60.188.249.11:9002/willalpbucket/%E5%85%B3%E5%BF%83%E5%85%B3%E7%88%B120240403110925.png",
            ],
        }
    },
    created() {
        this.id = this.$route.query.id;
        if (!this.id) {
            this.$message.error("未传递 id 参数，无法查看商品详情信息");
            return;
        }
        this.getDetail();
    },
    methods: {
        getDetail() {
            this.goodsDetail = { name: "商品名称" };
            getGoodsDetail(this.id).then((response) => {
                this.goodsDetail = response.data;
                if (typeof this.goodsDetail.platPrice == 'number') {
                    this.goodsDetail.platPrice = this.goodsDetail.platPrice.toFixed(2);
                }
                if (typeof this.goodsDetail.marketPrice == 'number') {
                    this.goodsDetail.marketPrice = this.goodsDetail.marketPrice.toFixed(2);
                }
                if (this.goodsDetail.keyword) {
                    this.goodsDetail.keyword = this.goodsDetail.keyword.split(",")
                }
                if (this.goodsDetail.picture) {
                    this.goodsDetail.picture = this.goodsDetail.picture.split(",")
                }
                console.log(">>>>>>>>>>>>", this.goodsDetail)
            });
        },
    }
}
</script>
<style scoped>
.app-container {
    display: flex;
    background: #F5F7FB;
    border-radius: 0px 0px 0px 0px;
    padding: 0 20px;
}

.left {
    float: left;
    width: 37%;
    background: #FFFFFF;
    margin-top: 1vh;
    height: 100vh
}

.leftTop {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;

    width: 98%;
    height: 10vh;
    position: relative;
    margin-bottom: 1vh;
    padding: auto;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

    span {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        font-size: 24px;
        color: #333333;
        line-height: 28px;
        letter-spacing: 13px;
        text-align: center;
    }
}

.leftBottom {
    background: #FFFFFF;
    width: 98%;
    height: 65vh;
    position: relative;
    margin-bottom: 1vh;
    display: block;
    margin: auto;
}

.leftBottom1 {
    height: 100%;
    width: 98%;
    display: block;
    margin: auto;
}

.leftBottom2 {
    width: 98%;
    height: 10vh;
    display: block;
    margin: auto;
    margin-top: 2vh;
}

.leftBottom3 {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #6F6F6F;
    line-height: 19px;
    letter-spacing: 1px;
    text-align: center;
    float: right;

}

.leftBottom4 {
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.right {
    float: left;
    margin-top: 1vh;
    margin-left: 1vh;
    width: 62%;
}

.goodsName {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #333333;
    line-height: 28px;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 2.5vh;
    padding-top: 2.5vh;
}

.detail1 {
    float: left;
    width: 70%;
    height: 12vh;
    margin: 1%;
    background: linear-gradient(90deg, #FFEFE0 0%, #FDE6E6 100%);
    border-radius: 0px 0px 0px 0px;
}

.detail1-1 {
    float: left;
    display: flex;
    justify-content: right;
    align-items: center;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #6F6F6F;
    letter-spacing: 1px;
    font-style: normal;
    text-transform: none;

    /* width: 80px; */
    margin-left: 2vh;
    height: 50px;
}

.detail1-2 {
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #FF0000;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    min-width: 120px;
    height: 50px;
    padding-left: 15px;
    padding-right: 15px;
}

.detail1-3 {
    float: left;
    display: flex;
    justify-content: left;
    align-items: center;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #ADADAD;
    letter-spacing: 1px;
    font-style: normal;
    text-transform: none;
    min-width: 100px;
    height: 50px;
    text-decoration: line-through;
}

.detail1-4 {
    float: left;
    width: 100%;
    margin-left: 2vh;
}

.detail2 {
    float: left;
    width: 70%;
    /* height: 12vh; */
}

.detail2-1 {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    letter-spacing: 1px;
    text-align: left;

    height: 35px;
    display: flex;
    justify-content: left;
    /* align-items: center; */
    align-content: flex-start;
    padding-left: 20px;
    word-break: break-all;
}

.divider {
    float: left;
}

.rightTop {
    background: #FFFFFF;
    width: 100%;
    height: 34vh;
    position: relative;
    margin-bottom: 1vh;
}

.rightBottom {
    background: #FFFFFF;
    width: 100%;
    min-height: 44vh;
    float: left;
    display: flex;
    align-content: flex-start;
}

.rightBottom-1 {
    float: left;
    display: flex;
    justify-content: right;
    align-content: flex-start;
    font-weight: 400;
    font-size: 16px;
    color: #6F6F6F;
    letter-spacing: 1px;
    font-style: normal;
    text-transform: none;
    text-align: left;
    word-break: break-all;

    /* width: 80px; */
    margin-left: 2vh;
    height: 35px;
}

.rightBottom-2 {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    letter-spacing: 1px;
    text-align: left;
    word-break: break-all;

    min-height: 35px;
    width: 80%;
    display: flex;
    justify-content: left;
    align-content: flex-start;
    padding-left: 20px;
}

.rightBottomDetail {
    width: 100%;
    float: left;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>