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