Skip to content

L
linshenxs-shop
Commit 0a1d5c19 by 陈超
Options

A

parent 8cc00e30
Showing with 197 additions and 202 deletions
src/api/mall/merchantMallgoods.js
...@@ -110,3 +110,11 @@ export function querySpecNameById(parameter) { ...@@ -110,3 +110,11 @@ export function querySpecNameById(parameter) {
}) })
} }
export function getGoodsDetails(query) {
return request({
url: '/admin/mallGoods/getDetailsById',
method: 'get',
params: query
})
}
src/views/businessGoods/details.vue
...@@ -3,159 +3,143 @@ ...@@ -3,159 +3,143 @@
<div class="execution"> <div class="execution">
<basic-container v-loading="loading"> <basic-container v-loading="loading">
<el-form :inline="true" class="demo-form-inline"> <div class="zm_info_header">
<!-- 商品详情 --> <span>商品详情</span>
<div class="zm_info_header"> </div>
<span>商品详情</span>
</div>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple">
<el-form-item label="创建时间">
<span>{{info.createTime || ''}}</span>
</el-form-item>
</div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light">
<el-form-item label="商品ID">
<span>{{info.goodsId || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row> <div class="zm_info_body">
<el-col :span="12"><div class="grid-content bg-purple">
<el-form-item label="商品名称">
<span>{{info.goodsName || ''}}</span>
</el-form-item>
</div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light">
<el-form-item label="商品分类">
<span>{{info.classifyName || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row> <div class="layout_h">
<el-col :span="24"><div class="grid-content bg-purple"> <div class="zm_info_row">
<el-form-item label="商品规格"> <div class="zm_label">创建时间</div>
<div style="margin-top: 50px;padding:0px;margin-left:70px;border: 1px solid silver "> <div>{{info ? info.createTime : ''}}</div>
<el-row :gutter="15"> </div>
<el-col :span="24"> <div class="zm_info_row">
<el-table class="tableClass" :data="formData.result" > <div class="zm_label">商品ID</div>
<el-table-column <div>{{info ? info.goodsId : ''}}</div>
v-for="key in formData.listkey"
:key="key"
:prop="key"
:label="key"></el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</el-form-item>
</div> </div>
</el-col> </div>
</el-row>
<el-row> <div class="layout_h" style="margin-top: 16px;">
<el-col :span="24"><div class="grid-content bg-purple"> <div class="zm_info_row">
<el-form-item label="商品列表图" label-width="100px" style="float: left"> <div class="zm_label">商品名称</div>
<el-image v-for="(item, index) in goodsImageList" class="image_item" :key="index" :src="item" <div>{{info ? info.goodsName : ''}}</div>
:preview-src-list="goodsImageList" fit="cover"> </div>
</el-image> <div class="zm_info_row">
</el-form-item> <div class="zm_label">商品分类</div>
</div></el-col> <div>{{info ? info.classifyName : ''}}</div>
</el-row> </div>
</div>
<el-row> <div class="layout_h" style="margin-top: 16px;">
<el-col :span="24"><div class="grid-content bg-purple"> <div class="zm_info_row">
<el-form-item label="商品详情图" label-width="100px"> <div class="zm_label" style="align-self: flex-start;">商品规格</div>
<el-image v-for="(item, index) in goodsImageDetail" class="image_item" :key="index" :src="item" <el-table style="align-self: flex-start;" :data="form.skus" size="mini">
:preview-src-list="goodsImageDetail" fit="cover"> <el-table-column v-for="(spec, index) in specs" :key="index" :label="spec.specName" min-width="120">
</el-image> <template slot-scope="scope">
</el-form-item> <span>{{titleValue(spec, scope.row)}}</span>
</div></el-col> </template>
</el-row> </el-table-column>
<el-table-column label="价格" min-width="160">
<template slot-scope="scope">
<span>{{scope.row.merchantPrice}}</span>
</template>
</el-table-column>
<el-table-column label="商品图片" min-width="160">
<template slot-scope="scope">
<div class="demo-image__preview">
<el-image style="width: 36px; height: 36px" fit="cover" :src="scope.row.goodsImage"
:preview-src-list="[scope.row.goodsImage]" />
</div>
</template>
</el-table-column>
<el-table-column label="商品库存" min-width="160">
<template slot-scope="scope">
<span>{{scope.row.stock}}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<el-row> <div class="layout_h" style="margin-top: 16px;" v-if="listImage.length > 0">
<el-col :span="24"><div class="grid-content bg-purple"> <div class="zm_info_row" >
<el-form-item label="商品视频" label-width="100px"> <div class="zm_label">商品列表图</div>
<video :src="goodsVideo" width="320" height="240" prop="video" controls="controls"> <el-image v-for="(src, index) in listImage" :key="index" style="width: 72px; height: 108px" fit="cover" :src="src" :preview-src-list="listImage" />
</video> </div>
</el-form-item> </div>
</div></el-col>
</el-row>
<el-row> <div class="layout_h" style="margin-top: 16px;" v-if="detailImage.length > 0">
<el-col :span="24"><div class="grid-content bg-purple"> <div class="zm_info_row" >
<el-form-item label="商品认证视频" label-width="100px"> <div class="zm_label">商品详情图</div>
<video :src="certificationVideoUrl" width="320" height="240" prop="video" controls="controls"> <el-image v-for="(src, index) in detailImage" :key="index" style="width: 72px; height: 108px" fit="cover" :src="src" :preview-src-list="detailImage" />
</video> </div>
</el-form-item> </div>
</div></el-col>
</el-row>
<el-row> <div class="layout_h" style="margin-top: 16px;" v-if="goodsVideo">
<el-col :span="12"><div class="grid-content bg-purple"> <div class="zm_info_row" >
<el-form-item label="累计剩余库存"> <video :src="goodsVideo" width="320" height="240" prop="video" controls="controls">
<span>{{info.stock || ''}}</span> </video>
</el-form-item> </div>
</div></el-col> </div>
<el-col :span="12"><div class="grid-content bg-purple-light">
<el-form-item label="状态"> <div class="layout_h" style="margin-top: 16px;" v-if="authVideo">
<span>{{info.stateName || ''}}</span> <div class="zm_info_row" >
</el-form-item> <video :src="authVideo" width="320" height="240" prop="video" controls="controls">
</div></el-col> </video>
</el-row> </div>
</div>
<el-row> <div class="layout_h" style="margin-top: 16px;">
<el-col :span="24"><div class="grid-content bg-purple"> <div class="zm_info_row">
<el-form-item label="审核状态" label-width="100px"> <div class="zm_label">累计剩余库存</div>
<span>{{info.auditStateName || ''}}</span> <div>{{info ? info.stock : ''}}</div>
</el-form-item> </div>
</div></el-col> <div class="zm_info_row">
</el-row> <div class="zm_label">状态</div>
<div>{{info ? info.stateName : ''}}</div>
</div>
</div>
<el-row> <div class="layout_h" style="margin-top: 16px;">
<el-col :span="24"><div class="grid-content bg-purple"> <div class="zm_info_row">
<el-form-item label="商品详情" label-width="100px"> <div class="zm_label">审核状态</div>
<editor :content="initContent" height="300px" style="margin-top: 30px"/> <div>{{info ? info.auditStateName : ''}}</div>
</el-form-item> </div>
</div></el-col> </div>
</el-row>
<!-- 审核信息 --> <div class="layout_h" style="margin-top: 16px;">
<div class="zm_info_header"> <div class="zm_info_row">
<span>审核信息</span> <div class="zm_label">商品详情</div>
<div style="width: 480px;" v-html="info ? info.goodsDetails : ''"></div>
</div>
</div> </div>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="审核时间 ：" prop="content">
<span>{{info.auditTime || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row> </div>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="审核结果 ：" prop="content">
<span>{{info.auditStateName || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row> <div class="zm_info_header" v-if="info && info.auditTime">
<el-col :span="24"><div class="grid-content bg-purple"> <span>审核信息</span>
<el-form-item label="审核备注 ：" prop="content"> </div>
<span>{{info.auditRemark || ''}}</span>
</el-form-item> <div class="zm_info_body" v-if="info && info.auditTime">
</div></el-col> <div class="zm_info_row" style="width: auto;">
</el-row> <div class="zm_label">审核时间</div>
<div>{{info ? info.auditTime : ''}}</div>
</div>
<div class="zm_info_row" style="width: auto;margin-top: 16px;">
<div class="zm_label">审核结果</div>
<div>{{info ? info.auditStateName : ''}}</div>
</div>
<div class="zm_info_row" style="width: auto;margin-top: 16px;">
<div class="zm_label">审核备注</div>
<div>{{info ? info.auditRemark : ''}}</div>
</div>
</div>
<div class="layout_v">
<el-button class="self_center" @click="handleClose">返回</el-button>
</div>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark" style="width: 600px;margin:0px auto">
<el-button type="primary" size="medium"@click="$router.go(-1)">返回</el-button>
</div></el-col>
</el-row>
</el-form>
</basic-container> </basic-container>
</div> </div>
...@@ -163,104 +147,99 @@ ...@@ -163,104 +147,99 @@
</template> </template>
<script> <script>
import {getGoodsInfo} from '@/api/mall/merchantMallgoods' import {getGoodsDetails, getGoodsInfo} from '@/api/mall/merchantMallgoods'
import {ZmMixin} from '@/mixins/ZmMixin.js' import {ZmMixin} from '@/mixins/ZmMixin.js'
export default { export default {
mixins: [ZmMixin], mixins: [ZmMixin],
components: {
'editor': () => import('@/components/ckeditor/index.vue')
},
data() { data() {
return { return {
goodsVideo:'',
certificationVideoUrl:'',
isLogistics: '',isElectronicContract:'',isVerified: '', isAPay: '', isUploadVideo: '',
formData: {
result: [],
listkey:[],
},
editing: false,
saving: false,
loading: false, loading: false,
//选择的规格
specs: [],
info: {}, info: {},
form: { form: {}
goodsDetails:''
},
rules: {
}
} }
}, },
mounted() { mounted() {
this.loadInfo() this.loadInfo()
}, },
computed: { computed: {
initContent() {
return this.form.goodsDetails? this.form.goodsDetails:'初始化'
},
id() { id() {
return this.$route.query.id return this.$route.query.id
}, },
goodsImageDetail() { //对应表头的值
if (this.info) { titleValue() {
let urls = [] return (spec, row) => {
let shopImg = this.info.goodsImageDetail for (let s of row.specs) {
if (shopImg) { if (s.specId == spec.specId) {
urls = shopImg.split(",") return s.name
}
} }
return urls return "未知"
}
},
listImage() {
if(this.form && this.form.listImage) {
return this.form.listImage.split(',')
} }
return [] return []
}, },
goodsImageList() { detailImage() {
if (this.info) { if(this.form && this.form.detailImage) {
let urls = [] return this.form.detailImage.split(',')
let shopImg = this.info.goodsImageList
if (shopImg) {
urls = shopImg.split(",")
}
return urls
} }
return [] return []
}, },
goodsVideo() {
if(this.form && this.form.videoUrl) {
return this.form.videoUrl
}
return ''
},
authVideo() {
if(this.form && this.form.authUrl) {
return this.form.authUrl
}
return ''
}
}, },
methods: { methods: {
generateTable(r){ //回填数据
this.formData.listkey=[] refill(data) {
this.formData.result=[] let skus = data.skus
this.formData.result=r if(skus && skus.length > 0) {
//提取表头字段==== let specs = skus[0].specs.map(r => {
for (let i = 0, l = this.formData.result.length; i < l; i++) { return {
for (let key in this.formData.result[i]) { specId: r.specId,
if (this.formData.listkey.indexOf(key)==-1){ specName: r.specName
this.formData.listkey.push(key)
}else{
} }
} })
this.specs = specs
}
this.form = {
...data
} }
}, },
loadInfo() { loadInfo() {
this.loading = true this.loading = true
getGoodsInfo({ getGoodsDetails({
id: this.id id: this.id
}).then(r => { }).then(r => {
this.loading = false this.loading = false
this.refill(this.zmRes(r))
return getGoodsInfo({id: this.id})
}).then(r => {
this.info = this.zmRes(r) this.info = this.zmRes(r)
let table=[]
for (let i = 0; i <r.data.data.skus.length ; i++) {
table.push({商家价格:''})
table.push({图片:''})
table.push({商品库存:''})
table[i].商家价格=r.data.data.skus[i].merchantPrice
table[i].图片=r.data.data.skus[i].goodsImage
table[i].商品库存=r.data.data.skus[i].stock
}
this.generateTable(table)
}).catch(r => { }).catch(r => {
console.log(r)
this.loading = false this.loading = false
this.error('加载信息失败') this.error('加载信息失败')
}) })
}, },
handleClose() {
this.$router.go(-1)
}
} }
} }
</script> </script>
...@@ -276,14 +255,22 @@ ...@@ -276,14 +255,22 @@
background: #dedede; background: #dedede;
} }
.zm_info_body .zm_info_row:not(:first-child) { .zm_info_body {
margin-top: 10px; display: flex;
flex-direction: column;
padding: 16px;
}
.zm_info_row {
display: flex;
flex-direction: row;
align-items: center;
width: 0;
flex-grow: 1;
} }
.image_item { .zm_label {
width: 100px; width: 120px;
height: 100px;
margin-right: 10px;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment