咨询窗口

src/views/homepage/components/inquiryView.vue

+<template>
+  <!-- 表单渲染 -->
+  <el-dialog center append-to-body destroy-on-close :close-on-click-modal="false" :show-close="false" :visible="visible" :title="title" top="25vh" width="440px">
+    <el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="80px">
+      <el-form-item label="姓名：" class="form-cell" prop="name">
+        <div class="cell-box">
+          <el-input v-model="formData.name" placeholder="您怎么称呼？" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="电话：" class="form-cell" prop="phone">
+        <div class="cell-box">
+          <el-input v-model="formData.phone" placeholder="请输入联系电话" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="留言：" class="form-cell" prop="content">
+        <div class="cell-box">
+          <el-input v-model="formData.content" type="textarea" placeholder="请输入咨询内容（300字以内）" maxlength="300" :autosize="{ minRows: 6, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
+        </div>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer" style="text-align: center">
+      <el-button style="width: 120px;margin: 0 10px" @click="cancelView">取消</el-button>
+      <el-button type="primary" style="width: 120px;margin: 0 10px;" @click="submitForm()">提交</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getToken } from '@/utils/auth'
+import { HttpReq } from '@/api/common'
+
+export default {
+  data() {
+    return {
+      typeDict: {
+        'product': '询 价',
+        'project': '方案咨询',
+        'system': '软件咨询',
+        'course': '课程定制'
+      },
+      visible: false,
+      title: '询 价',
+      formData: {
+        name: '',
+        phone: '',
+        content: '',
+        id: null
+      },
+      rules: {
+        name: { required: true, message: '请填写姓名', trigger: 'blur' },
+        phone: { required: true, message: '请填写联系电话', trigger: 'blur' },
+        content: { required: true, message: '请填写咨询内容', trigger: 'blur' }
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    addDataRow() {
+      this.formData.dataList.push({ id: '', index: '' })
+    },
+    showView() {
+      this.visible = true
+    },
+    hideView() {
+      this.$refs.formViewRef.resetFields()
+      this.visible = false
+    },
+    cancelView() {
+      this.hideView()
+    },
+    submitForm() {
+      this.$refs.formViewRef.validate((valid, obj) => {
+        if (valid) {
+          this.hideView()
+          //   HttpReq.backstageApi.updateCustomerDetail(this.formData).then((res) => {
+          //     this.$notify({
+          //       title: res.msg,
+          //       type: 'success',
+          //       duration: 2500
+          //     })
+          //     if (res.code === 200) {
+          //       this.cancelView()
+          //       this.$parent.loadData()
+          //     }
+          //   })
+          // } else {
+          //   this.$message({
+          //     message: '表单信息有误，请核对无误后提交！',
+          //     type: 'error'
+          //   })
+        }
+      })
+    },
+    initView(id, type) {
+      if (type) {
+        this.title = this.typeDict[type]
+      }
+      this.showView()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+>>>.el-dialog__title {
+  font-family: Source Han Sans CN;
+  font-size: 20px;
+  font-weight: bolder;
+}
+>>>.el-dialog--center .el-dialog__body {
+  padding: 10px 25px;
+}
+.cell-box {
+  min-width: 120px;
+  .cell-input {
+    width: 280px;
+  }
+  .cell-select {
+    width: 220px;
+  }
+  >>>.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>

src/views/homepage/index.vue

@@ -101,9 +101,6 @@
                 <div class="date">{{ item.date }}</div>
               </el-col>
             </el-row>
-            <div class="line-btn" style="margin-top: 4px;display: none">
-              <div class="btn-o" style="width: 150px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'supplier')">咨 询</div>
-            </div>
           </div>
           <div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('supplier')">更多供应商>></span></div>
         </div>
@@ -150,6 +147,7 @@
     </div>
     <home-footer ref="homeFooter" />
     <float-btn ref="floatBtn" />
+    <inquiry-view ref="inquiryView" />
   </div>
 </template>
 <script>
@@ -161,9 +159,10 @@ import userLogin from './components/userLogin'
 import languageSetting from './components/languageSetting'
 import searchPanel from './components/searchPanel'
 import homeFooter from './components/homeFooter'
+import inquiryView from './components/inquiryView'
 
 export default {
-  components: { floatBtn, titleMenus, userLogin, languageSetting, searchPanel, homeFooter },
+  components: { floatBtn, titleMenus, userLogin, languageSetting, searchPanel, homeFooter, inquiryView },
   dicts: ['product_type', 'area_province'],
   data() {
     return {
@@ -412,6 +411,7 @@ export default {
     // 点击询价
     inquiry(item, type) {
       console.log(item, type)
+      this.$refs.inquiryView.initView(item.id, type)
     },
     // 点击收藏
     storeShowcase(item, type) {

src/views/homepage/product/index.vue

@@ -166,7 +166,7 @@
             <div class="line-text touch">{{ item.title }}</div>
             <div style="width: 100%;text-align: center;padding: 2px;color: #333">{{ item.subTitle }}</div>
             <div class="line-btn" style="margin-top: 14px">
-              <div class="btn-o" style="width: 150px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'system')">课程定制</div>
+              <div class="btn-o" style="width: 150px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'course')">课程定制</div>
             </div>
           </div>
           <div style="margin-bottom: 20px;padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('system')">更多详情>></span></div>
@@ -174,6 +174,7 @@
       </div>
     </div>
     <home-footer ref="homeFooter" />
+    <inquiry-view ref="inquiryView" />
   </div>
 </template>
 <script>
@@ -185,9 +186,10 @@ import userLogin from '../components/userLoginV2'
 import languageSetting from '../components/languageSettingV2'
 import breadcrumb from '../components/breadcrumb'
 import homeFooter from '../components/homeFooter'
+import inquiryView from '../components/inquiryView'
 
 export default {
-  components: { titleMenus, userLogin, languageSetting, breadcrumb, homeFooter },
+  components: { titleMenus, userLogin, languageSetting, breadcrumb, homeFooter, inquiryView },
   dicts: ['product_type', 'area_province'],
   data() {
     return {
@@ -361,6 +363,7 @@ export default {
     // 点击询价
     inquiry(item, type) {
       console.log(item, type)
+      this.$refs.inquiryView.initView(item.id, type)
     },
     // 点击收藏
     storeShowcase(item, type) {