<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<div class="title-style">商品信息</div>
|
<el-descriptions direction="horizontal" :column="1">
|
<el-descriptions-item label="商品名称">{{ form.name }}</el-descriptions-item>
|
<el-descriptions-item label="商品分类">{{ form.categoryName }}</el-descriptions-item>
|
<el-descriptions-item label="商品主图">
|
<el-image :scr="form.imgurlfull" :preview-src-list="[form.imgurlfull]"></el-image>
|
</el-descriptions-item>
|
<el-descriptions-item label="商品轮播图">
|
<el-image
|
v-for="(item, index) in form.fileList"
|
:key="index"
|
:scr="item.imgurlfull"
|
:initial-index="index"
|
:preview-src-list="form.fileList.map(item => item.imgurlfull)"
|
></el-image>
|
</el-descriptions-item>
|
<el-descriptions-item label="商品价格">{{ form.price }}{{ type==1?'元':'咖豆' }}</el-descriptions-item>
|
<el-descriptions-item label="初始销量">{{ form.salenum }}</el-descriptions-item>
|
<el-descriptions-item label="商品详情">
|
<Editor
|
v-model="form.content"
|
:defaultConfig="{ readOnly : true }"
|
/>
|
</el-descriptions-item>
|
</el-descriptions>
|
<div style="height: 20px;"></div>
|
<div class="title-style">商品定价：<span>本系统以单个SKU定价和库存管理</span></div>
|
<el-table
|
:data="skuList"
|
stripe
|
border
|
>
|
<el-table-column prop="imgurl" label="SKU图片" min-width="100px">
|
<template slot-scope="{row}">
|
<el-image :scr="row.imgurlfull" :preview-src-list="[row.imgurlfull]"></el-image>
|
</template>
|
</el-table-column>
|
<el-table-column prop="name" label="规格名称" min-width="100px"></el-table-column>
|
<el-table-column prop="showPrice" :label="type==1?'市场价(元)':'市场价(咖豆)'" min-width="100px"></el-table-column>
|
<el-table-column prop="price" :label="type==1?'销售价(元)':'销售价(咖豆)'" min-width="100px"></el-table-column>
|
<el-table-column prop="num" label="库存(0库存无法下单)" min-width="100px"></el-table-column>
|
</el-table>
|
<div slot="footer"></div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { Editor } from '@wangeditor/editor-for-vue'
|
import { fetchList as goodsSkuList } from '@/api/business/goodsSku'
|
export default {
|
name: 'OperaGoodsDetailWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, Editor },
|
data () {
|
|
return {
|
type: '0', //0平台商城 1咖豆商城 2咖啡计划商品
|
|
// 表单数据
|
form: {
|
id: null,
|
name: '',
|
categoryName: '',
|
imgurlfull: '',
|
fileList: [],
|
price: '',
|
salenum: '',
|
content: '',
|
|
labelList: [],
|
realname: '',
|
sex: '',
|
birthday: '',
|
addr: '',
|
phone: '',
|
idcard: '',
|
email: '',
|
info: '',
|
idcardImg: '',
|
idcardImgBack: '',
|
applyPlatList: '',
|
},
|
skuList: []
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/coupon',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
open (title, target, type) {
|
this.title = title
|
this.visible = true
|
this.skuList = []
|
this.type = type
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
|
})
|
},
|
getSku() {
|
goodsSkuList({
|
capacity: 999,
|
model: {
|
type: 0 //商品分类
|
}
|
})
|
.then(res => {
|
this.skuList = res.records
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.title-style {
|
font-weight: 500;
|
font-size: 20px;
|
vertical-align: baseline;
|
span {
|
font-weight: normal;
|
font-size: 16px;
|
vertical-align: baseline;
|
}
|
}
|
</style>
|
