Skip to content

S
sensorConsult
Commit 954ca425 authored by zhanglw's avatar zhanglw
Browse files
Options

供应产品详情

parent b1cfcb15
Hide whitespace changes
Inline Side-by-side
Showing with 869 additions and 18 deletions
src/router/routers.js
View file @ 954ca425
...@@ -108,6 +108,22 @@ export const constantRouterMap = [ ...@@ -108,6 +108,22 @@ export const constantRouterMap = [
}, },
hidden: true hidden: true
}, },
{
path: '/publish/supplyInfo/:type',
meta: { title: '供应产品详情', noCache: true },
component: (resolve) => {
return require(['@/views/homepage/publish/supplyInfo'], resolve)
},
hidden: true
},
{
path: '/publish/buyInfo/:type',
meta: { title: '求购产品详情', noCache: true },
component: (resolve) => {
return require(['@/views/homepage/publish/buyInfo'], resolve)
},
hidden: true
},
{ {
path: '/backstage', path: '/backstage',
component: Layout, component: Layout,
......
src/views/homepage/index.vue
View file @ 954ca425
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<search-panel ref="searchPanel" style="margin-top: 64px;" /> <search-panel ref="searchPanel" style="margin-top: 64px;" />
</div> </div>
<div class="line-btn" style="padding-top: 42px;"> <div class="line-btn" style="padding-top: 42px;">
<div class="btn-o" style="padding: 10px">我要供应</div> <div class="btn-o" style="padding: 10px" @click="goToDetails(null, '/publish/supplyInfo/all')">我要供应</div>
<div class="btn-o" style="padding: 10px">我要采购</div> <div class="btn-o" style="padding: 10px">我要采购</div>
</div> </div>
<div class="line-btn" style="padding-top: 30px"> <div class="line-btn" style="padding-top: 30px">
...@@ -442,8 +442,13 @@ export default { ...@@ -442,8 +442,13 @@ export default {
console.log(item, type) console.log(item, type)
}, },
// 跳转到详情 // 跳转到详情
goToDetails(item, type) { goToDetails(item, path) {
console.log(item, type) console.log(item, path)
if (item) {
this.$router.push({ path: `${path}/${item.id || 123}` })
} else {
this.$router.push({ path: `${path}` })
}
}, },
// 点击地区top // 点击地区top
areaTopClick(text) { areaTopClick(text) {
......
src/views/homepage/information/details.vue
View file @ 954ca425
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
<div class="news-head"> <div class="news-head">
<h2>{{ dataObj.title }}</h2> <h2>{{ dataObj.title }}</h2>
<div class="news-info"> <div class="news-info">
<span>来源：{{ dataObj.msgSrc }}</span> <div>来源：{{ dataObj.msgSrc }}</div>
<span>发布时间：{{ dataObj.date }}</span> <div>发布时间：{{ dataObj.date }}</div>
</div> </div>
</div> </div>
<div class="news-body"> <div class="news-body">
...@@ -513,13 +513,15 @@ export default { ...@@ -513,13 +513,15 @@ export default {
.news-head { .news-head {
text-align: center; text-align: center;
h2 { h2 {
margin: 20px;
font-size: 42px; font-size: 42px;
} }
.news-info { .news-info {
width: 70%; display: flex;
justify-content: space-between;
margin: auto; margin: auto;
padding-bottom: 15px; padding-bottom: 6px;
border-bottom: 2px dotted #a3a3a3; border-bottom: 3px solid #0457C7;;
font-size: 14px; font-size: 14px;
color: #666; color: #666;
span { span {
......
src/views/homepage/information/index.vue
View file @ 954ca425
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</div> </div>
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<div class="box-title touch" @click="goToDetails(item, 'information')">{{ item.title }}</div> <div class="box-title touch" @click="goToDetails(item, '/information/details')">{{ item.title }}</div>
<div class="content ellipsis"> <div class="content ellipsis">
{{ item.content }} {{ item.content }}
</div> </div>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<el-image :src="promotionObj.imgSrc?imgSrcStart+'/img'+promotionObj.imgSrc:defaultImgBanner" style="width:100%;height: 250px" /> <el-image :src="promotionObj.imgSrc?imgSrcStart+'/img'+promotionObj.imgSrc:defaultImgBanner" style="width:100%;height: 250px" />
</div> </div>
<div v-for="(item,index) in informationList" :key="'inf_'+index" class="inline-box"> <div v-for="(item,index) in informationList" :key="'inf_'+index" class="inline-box">
<div class="box-title touch" @click="goToDetails(item, 'information')">{{ item.title }}</div> <div class="box-title touch" @click="goToDetails(item, '/information/details')">{{ item.title }}</div>
<div class="content ellipsis">&#12288;&#12288;{{ item.content }}</div> <div class="content ellipsis">&#12288;&#12288;{{ item.content }}</div>
<div class="line-btn" style="margin-top: 4px;justify-content: flex-end;"> <div class="line-btn" style="margin-top: 4px;justify-content: flex-end;">
<div style="color:#999999;padding: 10px 40px"><i class="el-icon-time" style="padding: 0 10px" />{{ item.date }}</div> <div style="color:#999999;padding: 10px 40px"><i class="el-icon-time" style="padding: 0 10px" />{{ item.date }}</div>
...@@ -169,12 +169,11 @@ export default { ...@@ -169,12 +169,11 @@ export default {
this.$refs.inquiryView.initView(item.id, type) this.$refs.inquiryView.initView(item.id, type)
}, },
// 跳转到详情 // 跳转到详情
goToDetails(item, type) { goToDetails(item, path) {
console.log(item, type) if (item) {
switch (type) { this.$router.push({ path: `${path}/${item.id || 123}` })
case 'information': } else {
this.$router.push({ path: `/information/details/${item.id || 123}` }) this.$router.push({ path: `${path}` })
break
} }
}, },
pageChange(e) { pageChange(e) {
......
src/views/homepage/publish/buyInfo.vue 0 → 100644
View file @ 954ca425
<template>
<div class="page-body">
<div class="head-box">
<div class="head-box-top">
<div class="top-call" />
<div class="top-call"><img src="@/assets/home_images/gemho_logo_b.png"></div>
<div class="top-call"><title-menus ref="titleMenus" menu-index="7" style="padding-top: 15px" /></div>
<div class="top-call"><user-login ref="userLogin" /></div>
<div class="top-call"><language-setting ref="languageSetting" /></div>
</div>
</div>
<div class="content-box">
<div style="width: 88%;padding-left: 9%;">
<div class="showcase">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/publish' }">信息发布</el-breadcrumb-item>
<el-breadcrumb-item>我要求购{{ title }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
</div>
<home-footer ref="homeFooter" />
<el-backtop />
</div>
</template>
<script>
import titleMenus from '../components/titleMenusV2'
import userLogin from '../components/userLoginV2'
import languageSetting from '../components/languageSettingV2'
import homeFooter from '../components/homeFooter'
export default {
components: { titleMenus, userLogin, languageSetting, homeFooter },
dicts: [],
data() {
return {
imgSrcStart: process.env.VUE_APP_BASE_API,
title: '产品',
throttle: null, // 节流器
throttleTime: 300
}
},
mounted() {
this.$nextTick(() => {
})
},
methods: {
onDictReady(dict) {
},
goTop() {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.touch {
cursor:pointer;
}
.clear {
clear: both
}
.inline-block {
display: inline-block;
}
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.showcase {
padding: 1px 0;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
.head-box-top {
display: flex;
justify-content: space-evenly;
align-items: center;
.top-call {
height: 80px;
padding-top: 15px;
}
}
}
.content-box {
min-height: 70vh;
margin-top: 94px;
font-family: Source Han Sans CN;
user-select: none;
}
.line-btn {
display: flex;
justify-content: center;
font-family: Source Han Sans CN;
font-weight: 400;
.btn-o {
margin: 0 25px;
width: 360px;
padding: 6px 10px;
background: #F7601A;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-o:hover {
border: 1px solid rgba(30, 144, 255, 0.8);
color: #1482f0;
}
.btn-l {
margin: 0 25px;
width: 360px;
padding: 10px;
background: #1961C5;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-l:hover {
border: 1px solid rgba(0,0,0,0.3);
color: #F7601A;
}
.btn-b {
margin: 0 10px;
width: 168px;
padding: 6px;
background: #EFF6FF;
border: 1px solid transparent;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
text-align: center;
font-size: 20px;
color: #1961C5;
cursor:pointer;
user-select: none;
}
.btn-b:hover {
border: 1px solid rgba(30, 144, 255, 0.9);
}
.active {
color: #FFFFFF;
font-weight: 400;
background: #1961C5;
}
}
</style>
src/views/homepage/publish/index.vue
View file @ 954ca425
...@@ -15,8 +15,36 @@ ...@@ -15,8 +15,36 @@
<!--信息发布--> <!--信息发布-->
<div class="page-title">信息发布</div> <div class="page-title">信息发布</div>
<div class="line-btn" style="padding-top: 160px;"> <div class="line-btn" style="padding-top: 160px;">
<div class="btn-o" style="padding: 10px">我要供应</div> <el-dropdown trigger="click" placement="bottom">
<div class="btn-o" style="padding: 10px">我要采购</div> <div class="btn-o" style="padding: 10px">我要供应</div>
<el-dropdown-menu slot="dropdown" style="width: 360px;text-align: center;">
<router-link to="/publish/supplyInfo/hardware">
<el-dropdown-item style="font-size: 16px;padding: 5px;font-weight: bold;">
硬件类产品
</el-dropdown-item>
</router-link>
<router-link to="/publish/supplyInfo/other">
<el-dropdown-item style="font-size: 16px;padding: 5px;font-weight: bold;">
其他类产品
</el-dropdown-item>
</router-link>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown trigger="click" placement="bottom">
<div class="btn-o" style="padding: 10px">我要采购</div>
<el-dropdown-menu slot="dropdown" style="width: 360px;text-align: center;">
<router-link to="/publish/buyInfo/hardware">
<el-dropdown-item style="font-size: 16px;padding: 5px;font-weight: bold;">
硬件类产品
</el-dropdown-item>
</router-link>
<router-link to="/publish/buyInfo/other">
<el-dropdown-item style="font-size: 16px;padding: 5px;font-weight: bold;">
其他类产品
</el-dropdown-item>
</router-link>
</el-dropdown-menu>
</el-dropdown>
</div> </div>
</div> </div>
</div> </div>
......
src/views/homepage/publish/supplyInfo.vue 0 → 100644
View file @ 954ca425
<template>
<div class="page-body">
<div class="head-box">
<div class="head-box-top">
<div class="top-call" />
<div class="top-call"><img src="@/assets/home_images/gemho_logo_b.png"></div>
<div class="top-call"><title-menus ref="titleMenus" menu-index="7" style="padding-top: 15px" /></div>
<div class="top-call"><user-login ref="userLogin" /></div>
<div class="top-call"><language-setting ref="languageSetting" /></div>
</div>
</div>
<div class="content-box">
<div style="width: 88%;padding-left: 9%;">
<div class="showcase">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/publish' }">信息发布</el-breadcrumb-item>
<el-breadcrumb-item>我要供应{{ title }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="form-table-box">
<el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
<el-form-item label="产品名称：" class="form-cell" prop="productName">
<div class="cell-box">
<el-input v-model="formData.productName" placeholder="请输入产品名称" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="产品分类：" class="form-cell" required style="margin: 0">
<div class="cell-box" style="display: flex">
<el-form-item prop="productType">
<el-select v-model="formData.productType" placeholder="产品大类" style="width: 120px" @change="changeProductType">
<el-option v-for="item in productTypeOpts" :key="item.id" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item prop="productSubType" style="margin-left: 5px">
<el-select v-model="formData.productSubType" placeholder="产品小类" style="width: 160px">
<el-option v-for="item in productSubTypeOpts" :key="item.id" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</div>
</el-form-item>
<el-form-item v-if="formData.productType&&formData.productType<5" label="产品属性：" class="form-cell">
<div class="cell-box" style="max-width: 600px">
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">品牌</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeBrand" placeholder="品牌" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">消耗电流</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeConsumptionCurrent" placeholder="消耗电流" />
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">产品名</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeProductName" placeholder="产品名" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">额定功率</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeRatedPower" placeholder="额定功率" />
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">型号</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeModel" placeholder="型号" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">反应时间</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeReactionTime" placeholder="反应时间" />
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">工作电压</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeWorkingVoltage" placeholder="工作电压" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">封装</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeEncapsulation" placeholder="封装" />
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">质量保证</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeQualityAssurance" placeholder="质量保证" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">产地</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeProducingArea" placeholder="产地" />
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">数量</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeNumber" placeholder="数量" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">颜色</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeColor" placeholder="颜色" />
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">适用场景</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeApplicableScenarios" placeholder="适用场景" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">批号</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeBatchNumber" placeholder="批号" />
</el-col>
</el-row>
</div>
</el-form-item>
<el-form-item label="产品价格区间（元）：" class="form-cell" required style="margin: 0">
<div class="cell-box" style="display: flex">
<el-form-item prop="minPrice">
<el-input v-model.number="formData.minPrice" placeholder="价格区间下限" class="cell-input" style="width: 180px" />
</el-form-item>
<div style="width: 20px;text-align: center">~</div>
<el-form-item prop="maxPrice">
<el-input v-model.number="formData.maxPrice" placeholder="价格区间上限" class="cell-input" style="width: 180px" />
</el-form-item>
</div>
</el-form-item>
<el-form-item label="产品特点：" class="form-cell" prop="productFeature">
<div class="cell-box">
<el-tag
v-for="tag in productFeature"
:key="tag"
closable
size="small"
:type="tagTypes[formData.productType||0]"
:disable-transitions="false"
@close="handleClose(tag)"
>
{{ tag }}
</el-tag>
<el-input
v-show="inputVisible"
ref="saveTagInput"
v-model="inputValue"
class="input-new-tag"
placeholder="请输入特点标签文本"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
/>
<el-button v-show="!inputVisible && productFeature.length < 5" plain round :type="tagTypes[formData.productType||0]" class="button-new-tag" icon="el-icon-price-tag" @click="showInput">添加</el-button>
</div>
</el-form-item>
<el-form-item label="产品照片：" class="form-cell" prop="productPic">
<div class="cell-box">
<el-upload
ref="uploadCom"
action="/api/bsw/product/uploadProductPic"
name="productPic"
list-type="picture-card"
:headers="uploadHeaders"
:limit="5"
:on-exceed="handleExceed"
:on-success="handleImported"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog append-to-body :visible.sync="dialogImageVisible">
<img width="100%" :src="dialogImageUrl">
</el-dialog>
</div>
</el-form-item>
<el-form-item label="产品概述：" class="form-cell" prop="productDescribe">
<div class="cell-box">
<div ref="editor" class="editor" />
</div>
</el-form-item>
<el-form-item label="其他说明：" class="form-cell" prop="notes">
<div class="cell-box">
<el-input v-model="formData.notes" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="交易保障承诺：" class="form-cell" prop="letterOfCommitment">
<div class="cell-box">
<el-checkbox v-model="formData.letterOfCommitment"><em>卖家承诺履约合规诈骗包赔，保障产品交易安全</em></el-checkbox>
</div>
</el-form-item>
</el-form>
<div style="width: 100%;text-align: center">
<el-button @click="cancelView">返回</el-button>
<el-button type="primary" @click="submitForm()">保存</el-button>
<el-button type="warning" @click="submitForm()">提交</el-button>
</div>
</div>
</div>
</div>
<home-footer ref="homeFooter" />
<el-backtop />
</div>
</template>
<script>
import titleMenus from '../components/titleMenusV2'
import userLogin from '../components/userLoginV2'
import languageSetting from '../components/languageSettingV2'
import homeFooter from '../components/homeFooter'
import { getToken } from '@/utils/auth'
import { HttpReq } from '@/api/common'
import { mapGetters } from 'vuex'
import { upload } from '@/utils/upload'
import E from 'wangeditor'
export default {
components: { titleMenus, userLogin, languageSetting, homeFooter },
dicts: ['product_rank', 'product_type', 'product_type_1', 'product_type_2', 'product_type_3', 'product_type_4', 'product_type_5', 'product_type_6', 'product_type_7'],
data() {
const checkPrice = (rule, value, callback) => {
if (!value) {
return callback()
}
if (!Number.isInteger(value)) {
return callback(new Error('请输入数字值'))
}
setTimeout(() => {
if (this.formData.minPrice && value < this.formData.minPrice) {
return callback(new Error('区间值错误'))
}
if (this.formData.maxPrice && value > this.formData.maxPrice) {
return callback(new Error('区间值错误'))
}
return callback()
}, 500)
}
return {
title: '产品',
uploadHeaders: { 'Authorization': getToken() },
imgSrcStart: process.env.VUE_APP_BASE_API,
editor: false, // 富文本对象
dialogImageUrl: '',
dialogImageVisible: false,
visible: false,
tagTypes: ['', 'primary', 'success', 'warning', 'danger', 'info', 'info', 'info'],
productTypeOpts: [],
productSubTypeOpts: [],
inputVisible: false,
inputValue: '',
productFeature: [], // 产品特点tag列表
formData: {
productId: null,
customerId: null, // 供应商id
enterpriseName: '', // 供应商名称
productName: '', // 产品名称
productType: '', // 产品大类
productSubType: null, // 产品小类
minPrice: null, // 价格区间-小
maxPrice: null, // 价格区间-大
productFeature: null, // 产品特点
productPic: '', // 产品图片
productDescribe: '', // 产品描述（富文本）
notes: null, // 其他说明
letterOfCommitment: false, // 交易保障承诺
attributeBrand: '', // 属性-品牌
attributeConsumptionCurrent: '', // 属性-消耗电流
attributeProductName: '', // 属性-产品名称
attributeRatedPower: '', // 属性-额定功率
attributeModel: '', // 属性-型号
attributeReactionTime: '', // 属性-反应时间
attributeWorkingVoltage: '', // 属性-工作电压
attributeEncapsulation: '', // 属性-封装
attributeQualityAssurance: '', // 属性-质量保证
attributeProducingArea: '', // 属性-产地
attributeNumber: '', // 属性-数量
attributeColor: '', // 属性-颜色
attributeApplicableScenarios: '', // 属性-品牌
attributeBatchNumber: '', // 属性-批号
rank: '1' // 产品品级
},
rules: {
productName: { required: true, message: '请填写产品名称', trigger: 'blur' },
productType: { required: true, message: '请选择产品分类', trigger: 'blur' },
productPic: { required: true, message: '请上传产品图片', trigger: 'blur' },
productDescribe: { required: true, message: '请填写产品概述', trigger: 'blur' },
letterOfCommitment: { required: true, message: '请勾选交易保障承诺', trigger: 'blur' },
minPrice: [
{ required: true, message: '请填写产品价格区间下限', trigger: 'blur' },
{ validator: checkPrice, trigger: 'blur' }
],
maxPrice: [
{ required: true, message: '请填写产品价格区间上限', trigger: 'blur' },
{ validator: checkPrice, trigger: 'blur' }
]
}
}
},
computed: {
...mapGetters([
'imagesUploadApi',
'baseApi'
])
},
mounted() {
this.$nextTick(() => {
})
},
methods: {
onDictReady(dict) {
console.log(this.$route.params.type)
if (this.$route.params.type === 'hardware') {
this.productTypeOpts = dict.product_type.slice(0, 4)
} else if (this.$route.params.type === 'other') {
this.productTypeOpts = dict.product_type.slice(4)
} else {
this.productTypeOpts = dict.product_type
}
this.loadData()
},
handleClose(tag) {
this.productFeature.splice(this.productFeature.indexOf(tag), 1)
this.formData.productFeature = this.productFeature.join(';')
},
showInput() {
this.inputVisible = true
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
handleInputConfirm() {
const inputValue = this.inputValue
if (inputValue && !this.productFeature.filter(item => { return item === inputValue }).length) {
this.productFeature.push(inputValue)
this.formData.productFeature = this.productFeature.join(';')
}
this.inputValue = ''
this.inputVisible = false
},
handleExceed() {
this.$message({
message: '超出最大上传数量限制',
type: 'info'
})
},
handleRemove(file, fileList) {
HttpReq.backstageApi.deleteProductPic({
productPic: file.response.productPic
}).then((res) => {
this.$notify({
title: res.msg,
type: 'success',
duration: 2500
})
const arr = []
fileList.forEach(item => {
arr.push(item.response.productPic)
})
this.formData.productPic = arr.join(';')
})
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogImageVisible = true
},
handleImported(response, file, fileList) {
this.$nextTick(() => {
const arr = this.formData.productPic ? this.formData.productPic.split(';') : []
arr.push(response.productPic)
this.formData.productPic = arr.join(';')
this.$notify({
title: '上传成功！',
type: 'success',
duration: 2500
})
})
},
cancelView() {
this.$router.push({ path: `/publish` })
},
submitForm() {
this.$refs.formViewRef.validate(valid => {
if (valid) {
HttpReq.backstageApi.addProduct(this.formData).then((res) => {
this.$notify({
title: res.msg,
type: 'success',
duration: 2500
})
if (res.code === 200) {
alert(666)
}
})
} else {
this.$message({
message: '表单信息有误，请核对无误后提交！',
type: 'error'
})
}
})
},
changeProductType() {
this.formData.productSubType = null
this.productSubTypeOpts = this.dict['product_type_' + this.formData.productType]
},
loadData() {
if (this.editor) {
return
}
this.$nextTick(() => {
const _this = this
const editor = new E(this.$refs.editor)
editor.config.zIndex = 5
editor.config.customUploadImg = function(files, insert) {
files.forEach(image => {
upload(_this.imagesUploadApi, image).then(res => {
const data = res.data
const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
insert(url)
})
})
}
editor.config.onchange = (html) => {
this.formData.productDescribe = html
}
editor.create()
// 初始化数据
editor.txt.html(this.formData.productDescribe)
this.editor = editor
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.touch {
cursor:pointer;
}
.clear {
clear: both
}
.inline-block {
display: inline-block;
}
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.showcase {
padding: 1px 0;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
}
.form-table-box {
width: 1080px;
margin: 20px auto;
padding: 30px;
border: 1px solid rgba(0,0,0,0.12);
box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
border-radius: 10px;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
.head-box-top {
display: flex;
justify-content: space-evenly;
align-items: center;
.top-call {
height: 80px;
padding-top: 15px;
}
}
}
.content-box {
min-height: 70vh;
margin-top: 94px;
font-family: Source Han Sans CN;
user-select: none;
}
.line-btn {
display: flex;
justify-content: center;
font-family: Source Han Sans CN;
font-weight: 400;
.btn-o {
margin: 0 25px;
width: 360px;
padding: 6px 10px;
background: #F7601A;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-o:hover {
border: 1px solid rgba(30, 144, 255, 0.8);
color: #1482f0;
}
.btn-l {
margin: 0 25px;
width: 360px;
padding: 10px;
background: #1961C5;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-l:hover {
border: 1px solid rgba(0,0,0,0.3);
color: #F7601A;
}
.btn-b {
margin: 0 10px;
width: 168px;
padding: 6px;
background: #EFF6FF;
border: 1px solid transparent;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
text-align: center;
font-size: 20px;
color: #1961C5;
cursor:pointer;
user-select: none;
}
.btn-b:hover {
border: 1px solid rgba(30, 144, 255, 0.9);
}
.active {
color: #FFFFFF;
font-weight: 400;
background: #1961C5;
}
}
.grid-content {
border: 1px solid rgba(100, 100, 100, 0.3);
padding: 0;
}
.grid-label {
background: #dedede;
padding: 0 10px;
}
.editor{
text-align:left;
width: 680px;
}
::v-deep .w-e-text-container {
height: 560px !important;
}
.cell-box {
min-width: 120px;
.cell-input {
width: 420px;
}
.cell-select {
width: 220px;
}
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 28px;
line-height: 24px;
padding: 0 8px;
}
.input-new-tag {
width: 140px;
height: 28px;
margin-left: 10px;
vertical-align: bottom;
}
>>>.el-input__inner {
border: 1px solid rgba(100, 100, 100, 0.1);
border-bottom: 1px solid rgba(100, 100, 100, 0.2);
border-radius: 5px;
}
>>>.el-input.is-disabled .el-input__inner {
border-radius: 0;
border: 0;
border-bottom: 1px solid rgba(100, 100, 100, 0.4);
background: white;
cursor: text;
}
>>>.el-input.is-disabled .el-input__icon {
cursor: text;
}
>>>.el-icon-circle-check {
color: #13ce66;
}
//>>>.el-icon-arrow-up:before {
// content: '';
//}
}
</style>
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