管理端商品详情增加批发商品信息展示
paulGao
parent
3d0a202cbe
commit
bb40364aed
|
|
@ -6,7 +6,10 @@
|
|||
<h4>基本信息</h4>
|
||||
<div class="form-item-view">
|
||||
<FormItem label="商品分类">
|
||||
<span v-for="(item,index) in goods.categoryName" :key="index"> {{ item }} <i v-if="index !== (goods.categoryName.length-1)">></i> </span>
|
||||
<span v-for="(item, index) in goods.categoryName" :key="index">
|
||||
{{ item }}
|
||||
<i v-if="index !== goods.categoryName.length - 1">></i>
|
||||
</span>
|
||||
</FormItem>
|
||||
<FormItem label="商品名称">
|
||||
{{ goods.goodsName }}
|
||||
|
|
@ -20,16 +23,30 @@
|
|||
<div class="form-item-view">
|
||||
<FormItem label="计量单位"> {{ goods.goodsUnit }}</FormItem>
|
||||
<FormItem label="销售模式">
|
||||
{{ goods.salesModel === 'RETAIL' ? '零售型' : '批发型' }}
|
||||
{{ goods.salesModel === "RETAIL" ? "零售型" : "批发型" }}
|
||||
</FormItem>
|
||||
<FormItem label="销售规则">
|
||||
<Table
|
||||
border
|
||||
:columns="wholesalePreviewColumns"
|
||||
:data="wholesaleData"
|
||||
>
|
||||
</Table>
|
||||
</FormItem>
|
||||
</div>
|
||||
<h4>商品规格及图片</h4>
|
||||
<div class="form-item-view">
|
||||
<FormItem label="商品编号"> {{ goods.id }}</FormItem>
|
||||
<FormItem label="商品价格"> ¥{{ goods.price | unitPrice }} </FormItem>
|
||||
<FormItem label="商品价格">
|
||||
¥{{ goods.price | unitPrice }}
|
||||
</FormItem>
|
||||
<FormItem label="商品图片">
|
||||
<div class="demo-upload-list" v-for="(item, __index) in goods.goodsGalleryList" :key="__index">
|
||||
<img :src="item"/>
|
||||
<div
|
||||
class="demo-upload-list"
|
||||
v-for="(item, __index) in goods.goodsGalleryList"
|
||||
:key="__index"
|
||||
>
|
||||
<img :src="item" />
|
||||
<div class="demo-upload-list-cover">
|
||||
<Icon
|
||||
type="ios-eye-outline"
|
||||
|
|
@ -48,12 +65,45 @@
|
|||
<FormItem label="商品规格">
|
||||
<Table :columns="skuColumn" :data="skuData">
|
||||
<template slot="showImage" slot-scope="scope">
|
||||
<div style="margin-top: 5px;height: 80px; display: flex;">
|
||||
<div style="margin-top: 5px; height: 80px; display: flex">
|
||||
<div>
|
||||
<img :src="scope.row.image" style="height: 60px;margin-top: 1px;width: 60px">
|
||||
<img
|
||||
:src="scope.row.image"
|
||||
style="height: 60px; margin-top: 1px; width: 60px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="wholePrice0">
|
||||
<Input
|
||||
v-if="wholesaleData[0]"
|
||||
clearable
|
||||
disabled
|
||||
v-model="wholesaleData[0].price"
|
||||
>
|
||||
<span slot="append">元</span>
|
||||
</Input>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="wholePrice1">
|
||||
<Input
|
||||
v-if="wholesaleData[1]"
|
||||
clearable
|
||||
disabled
|
||||
v-model="wholesaleData[1].price"
|
||||
>
|
||||
<span slot="append">元</span>
|
||||
</Input>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="wholePrice2">
|
||||
<Input
|
||||
v-if="wholesaleData[2]"
|
||||
clearable
|
||||
disabled
|
||||
v-model="wholesaleData[2].price"
|
||||
>
|
||||
<span slot="append">元</span>
|
||||
</Input>
|
||||
</template>
|
||||
</Table>
|
||||
</FormItem>
|
||||
</div>
|
||||
|
|
@ -62,9 +112,7 @@
|
|||
<FormItem label="商品描述">
|
||||
<div v-html="goods.intro"></div>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="移动端描述"
|
||||
>
|
||||
<FormItem label="移动端描述">
|
||||
<div v-html="goods.mobileIntro"></div>
|
||||
</FormItem>
|
||||
</div>
|
||||
|
|
@ -74,74 +122,101 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {getGoodsDetail} from "@/api/goods";
|
||||
import { getGoodsDetail } from "@/api/goods";
|
||||
export default {
|
||||
name: "goodsDetail",
|
||||
data() {
|
||||
return {
|
||||
goods: {}, // 商品信息
|
||||
previewGoodsPicture: '', // 预览图片
|
||||
previewGoodsPicture: "", // 预览图片
|
||||
goodsPictureVisible: false, // 预览图片模态框
|
||||
skuColumn: [ // 规格表头
|
||||
wholesalePreviewColumns: [
|
||||
{
|
||||
title: '规格',
|
||||
key: 'specs'
|
||||
title: "销售规则",
|
||||
width: 300,
|
||||
render: (h, params) => {
|
||||
let guide =
|
||||
"当商品购买数量 ≥" +
|
||||
params.row.num +
|
||||
" 时，售价为 ￥" +
|
||||
params.row.price +
|
||||
" /" +
|
||||
this.goods.goodsUnit;
|
||||
return h("div", guide);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '编号',
|
||||
key: 'sn'
|
||||
},
|
||||
{
|
||||
title: '重量(kg)',
|
||||
key: 'weight'
|
||||
},
|
||||
{
|
||||
title: '成本',
|
||||
key: 'cost'
|
||||
},
|
||||
{
|
||||
title: '价格',
|
||||
key: 'price'
|
||||
},
|
||||
{
|
||||
title: '图片',
|
||||
slot: "showImage",
|
||||
}
|
||||
],
|
||||
skuData: [] // sku数据
|
||||
}
|
||||
wholesaleData: [],
|
||||
skuColumn: [
|
||||
// 规格表头
|
||||
{
|
||||
title: "规格",
|
||||
key: "specs",
|
||||
},
|
||||
{
|
||||
title: "编号",
|
||||
key: "sn",
|
||||
},
|
||||
{
|
||||
title: "重量(kg)",
|
||||
key: "weight",
|
||||
},
|
||||
],
|
||||
skuData: [], // sku数据
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initGoods(this.$route.query.id);
|
||||
}
|
||||
,
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据，获取商品详情
|
||||
initGoods(id) {
|
||||
getGoodsDetail(id).then(res => {
|
||||
getGoodsDetail(id).then((res) => {
|
||||
this.goods = res.result;
|
||||
let that = this
|
||||
let that = this;
|
||||
res.result.skuList.forEach(function (sku, index, array) {
|
||||
that.skuData.push({
|
||||
'specs': sku.goodsName,
|
||||
'sn': sku.sn,
|
||||
'weight': sku.weight,
|
||||
'cost': that.$options.filters.unitPrice(sku.cost, "¥"),
|
||||
'price': that.$options.filters.unitPrice(sku.price, "¥"),
|
||||
'image': sku.thumbnail,
|
||||
specs: sku.goodsName,
|
||||
sn: sku.sn,
|
||||
weight: sku.weight,
|
||||
cost: that.$options.filters.unitPrice(sku.cost, "¥"),
|
||||
price: that.$options.filters.unitPrice(sku.price, "¥"),
|
||||
image: sku.thumbnail,
|
||||
});
|
||||
})
|
||||
console.warn(this.skuData)
|
||||
|
||||
});
|
||||
if (res.result.salesModel === "WHOLESALE" && res.result.wholesaleList) {
|
||||
res.result.wholesaleList.forEach((item, index) => {
|
||||
this.skuColumn.push({
|
||||
title: "购买量 ≥ " + item.num,
|
||||
slot: "wholePrice" + index,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.skuColumn.push(
|
||||
{
|
||||
title: "成本",
|
||||
key: "cost",
|
||||
},
|
||||
{
|
||||
title: "价格",
|
||||
key: "price",
|
||||
}
|
||||
);
|
||||
}
|
||||
this.skuColumn.push({
|
||||
title: "图片",
|
||||
slot: "showImage",
|
||||
});
|
||||
this.wholesaleData = res.result.wholesaleList;
|
||||
});
|
||||
},
|
||||
// 预览商品图片
|
||||
handleViewGoodsPicture(url) {
|
||||
this.previewGoodsPicture = url;
|
||||
this.goodsPictureVisible = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" soped>
|
||||
|
|
@ -164,7 +239,7 @@ div.base-info-item {
|
|||
}
|
||||
}
|
||||
|
||||
.demo-upload-list{
|
||||
.demo-upload-list {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
|
@ -175,26 +250,26 @@ div.base-info-item {
|
|||
overflow: hidden;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.2);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
margin-right: 4px;
|
||||
}
|
||||
.demo-upload-list img{
|
||||
.demo-upload-list img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-upload-list-cover{
|
||||
.demo-upload-list-cover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0,.6);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.demo-upload-list:hover .demo-upload-list-cover{
|
||||
.demo-upload-list:hover .demo-upload-list-cover {
|
||||
display: block;
|
||||
}
|
||||
.demo-upload-list-cover i{
|
||||
.demo-upload-list-cover i {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
|
|
@ -203,5 +278,4 @@ div.base-info-item {
|
|||
.ivu-table table {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue