供应产品详情

src/router/routers.js

@@ -108,6 +108,22 @@ export const constantRouterMap = [
     },
     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',
     component: Layout,

src/views/homepage/index.vue

@@ -12,7 +12,7 @@
       <search-panel ref="searchPanel" style="margin-top: 64px;" />
     </div>
     <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>
     <div class="line-btn" style="padding-top: 30px">
@@ -442,8 +442,13 @@ export default {
       console.log(item, type)
     },
     // 跳转到详情
-    goToDetails(item, type) {
-      console.log(item, type)
+    goToDetails(item, path) {
+      console.log(item, path)
+      if (item) {
+        this.$router.push({ path: `${path}/${item.id || 123}` })
+      } else {
+        this.$router.push({ path: `${path}` })
+      }
     },
     // 点击地区top
     areaTopClick(text) {

src/views/homepage/information/details.vue

@@ -21,8 +21,8 @@
         <div class="news-head">
           <h2>{{ dataObj.title }}</h2>
           <div class="news-info">
-            <span>来源：{{ dataObj.msgSrc }}</span>
-            <span>发布时间：{{ dataObj.date }}</span>
+            <div>来源：{{ dataObj.msgSrc }}</div>
+            <div>发布时间：{{ dataObj.date }}</div>
           </div>
         </div>
         <div class="news-body">
@@ -513,13 +513,15 @@ export default {
 .news-head {
   text-align: center;
   h2 {
+    margin: 20px;
     font-size: 42px;
   }
   .news-info {
-    width: 70%;
+    display: flex;
+    justify-content: space-between;
     margin: auto;
-    padding-bottom: 15px;
-    border-bottom: 2px dotted #a3a3a3;
+    padding-bottom: 6px;
+    border-bottom: 3px solid #0457C7;;
     font-size: 14px;
     color: #666;
     span {

src/views/homepage/information/index.vue

@@ -29,7 +29,7 @@
               </div>
             </el-col>
             <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">
                 {{ item.content }}
               </div>
@@ -43,7 +43,7 @@
           <el-image :src="promotionObj.imgSrc?imgSrcStart+'/img'+promotionObj.imgSrc:defaultImgBanner" style="width:100%;height: 250px" />
         </div>
         <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="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>
@@ -169,12 +169,11 @@ export default {
       this.$refs.inquiryView.initView(item.id, type)
     },
     // 跳转到详情
-    goToDetails(item, type) {
-      console.log(item, type)
-      switch (type) {
-        case 'information':
-          this.$router.push({ path: `/information/details/${item.id || 123}` })
-          break
+    goToDetails(item, path) {
+      if (item) {
+        this.$router.push({ path: `${path}/${item.id || 123}` })
+      } else {
+        this.$router.push({ path: `${path}` })
       }
     },
     pageChange(e) {

src/views/homepage/publish/buyInfo.vue

+<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

@@ -15,8 +15,36 @@
         <!--信息发布-->
         <div class="page-title">信息发布</div>
         <div class="line-btn" style="padding-top: 160px;">
-          <div class="btn-o" style="padding: 10px">我要供应</div>
-          <div class="btn-o" style="padding: 10px">我要采购</div>
+          <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/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>

src/views/homepage/publish/supplyInfo.vue

+<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>