|
@@ -0,0 +1,443 @@
|
|
|
+<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 }} {{ 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: [
|
|
|
+ { id: "1", picture: "https://ts.willalp.com:9002/willalpbucket/微信图片_2024032809233720240328092531.png" },
|
|
|
+ { id: "2", picture: "http://60.188.249.11:9002/willalpbucket/fm0220240407170915.jpg" },
|
|
|
+ { id: "3", picture: "http://60.188.249.11:9002/willalpbucket/lunbo320240402180418.png" },
|
|
|
+ { id: "4", picture: "http://60.188.249.11:9002/willalpbucket/lunbo120240402180243.png" },
|
|
|
+ { id: "5", picture: "http://60.188.249.11:9002/willalpbucket/lunbo420240403110118.png" },
|
|
|
+ { id: "6", picture: "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>
|