1

src/store/Medium.js

@@ -0,0 +1,46 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  Medium: `/api/live/v0/kjzl/kjzlMedium`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.Medium}`, {
+      skip,
+      limit,
+      ...info,
+    });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.Medium}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.Medium}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...data }) {
+    const res = await this.$axios.$post(`${api.Medium}/update/${id}`, data);
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.Medium}/${payload}`);
+    return res;
+  },
+  async fromFetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.Medium}/from/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/store/index.js

@@ -6,6 +6,7 @@ import upload from './upload';
 import MiniVideo from './MiniVideo';
 import Refute from './Refute';
 import ExpertView from './ExpertView';
+import Medium from './Medium';
 
 Vue.use(Vuex);
 
@@ -18,5 +19,6 @@ export default new Vuex.Store({
     MiniVideo,
     Refute,
     ExpertView,
+    Medium,
   },
 });

src/views/service/index/jike.vue

@@ -0,0 +1,159 @@
+<template>
+  <div id="jike">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="name">
+              {{ item.name }}
+            </el-col>
+            <el-col :span="24" class="address textOver">
+              地址：<span>{{ item.addr || '暂无' }}</span>
+            </el-col>
+            <el-col :span="24" class="other">
+              <el-col :span="12" class="other_1 textOver">
+                联系人：<span>{{ item.contact }}</span>
+              </el-col>
+              <el-col :span="12" class="other_1 textOver">
+                电话：<span>{{ item.phone }}</span>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="btn">
+              <el-col :span="18"> 统计 </el-col>
+              <el-col :span="6">
+                <el-button type="primary" size="mini">立即预约</el-button>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <page :limit="limit" :total="total" @search="search"></page>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const moment = require('moment');
+import page from '@/layout/common/page.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: Medium } = createNamespacedHelpers('Medium');
+export default {
+  name: 'jike',
+  props: {},
+  components: {
+    page,
+  },
+  data: function () {
+    return {
+      clientHeight: '',
+      list: [
+        {
+          name: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          contact: '联系人',
+          phone: '联系电话',
+          addr: '吉林省长春市',
+        },
+        {
+          name: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          contact: '联系人',
+          phone: '联系电话',
+          addr: '吉林省长春市',
+        },
+        {
+          name: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          contact: '联系人',
+          phone: '联系电话',
+          addr: '吉林省长春市',
+        },
+      ],
+      total: 0,
+      limit: '10',
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...Medium(['query']),
+    async search({ skip = 0, limit = this.limit, ...info } = {}) {
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    getTime(data) {
+      return moment(_.get(data, 'meta.createdAt')).format('YYYY-MM-DD HH:mm:ss');
+    },
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 130;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: #f9f9f9;
+    padding: 5px;
+    .list {
+      background-color: #fff;
+      padding: 8px;
+      margin: 0 0 10px 0;
+      border-radius: 5px;
+      .name {
+        font-size: 15px;
+      }
+      .address {
+        font-size: 14px;
+        color: #666;
+        margin: 0 0 4px 0;
+        span {
+          color: #000;
+        }
+      }
+      .other {
+        margin: 0 0 4px 0;
+        .other_1 {
+          font-size: 14px;
+          color: #666;
+          span {
+            color: #000;
+          }
+        }
+      }
+      .btn {
+        text-align: center;
+      }
+    }
+    .list:last-child {
+      margin: 0;
+    }
+  }
+  .foot {
+    height: 40px;
+    overflow: hidden;
+    border-top: 1px solid #f1f1f1;
+  }
+}
+</style>

src/views/service/index/make.vue

@@ -0,0 +1,186 @@
+<template>
+  <div id="make">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <el-col :span="24" class="form">
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px" :label-position="labelPosition">
+              <el-col :span="24" class="text">
+                <el-form-item label="选取机构" prop="medium_id">
+                  <el-select v-model="form.medium_id" clearable filterable placeholder="请选择">
+                    <el-option v-for="item in mediumList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24" class="text">
+                <el-form-item label="服务名称" prop="project">
+                  <el-select v-model="form.project" clearable filterable placeholder="请选择">
+                    <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24" class="text">
+                <el-form-item label="联系人" prop="contact">
+                  <el-input v-model="form.contact" placeholder="请输入联系人"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24" class="text">
+                <el-form-item label="联系电话" prop="phone">
+                  <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24" class="text">
+                <el-form-item label="邮件" prop="email">
+                  <el-input v-model="form.email" placeholder="请输入邮件"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24" class="text">
+                <el-form-item label="服务时间" prop="server_time">
+                  <el-input v-model="form.server_time" placeholder="请输入服务时间"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24" class="text">
+                <el-form-item label="预约备注" prop="remark">
+                  <el-input
+                    v-model="form.remark"
+                    type="textarea"
+                    maxlength="200"
+                    :autosize="{ minRows: 4, maxRows: 6 }"
+                    show-word-limit
+                    placeholder="请输入预约备注"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24" class="btn">
+                <el-button type="danger" size="mini">取消预约</el-button>
+                <el-button type="primary" size="mini" @click="onSubmit('form')">提交预约</el-button>
+              </el-col>
+            </el-form>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'make',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      clientHeight: '',
+      form: {},
+      rules: {
+        medium_id: [{ required: true, message: '请选取机构', trigger: 'change' }],
+        project: [{ required: true, message: '请选取服务', trigger: 'change' }],
+        contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
+        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
+        email: [{ required: true, message: '请输入邮件', trigger: 'blur' }],
+        server_time: [{ required: true, message: '请输入服务时间', trigger: 'blur' }],
+        remark: [{ required: true, message: '请输入预约备注', trigger: 'blur' }],
+      },
+      labelPosition: 'left',
+      // 机构
+      mediumList: [
+        {
+          id: '1',
+          name: '第1个',
+        },
+        {
+          id: '2',
+          name: '第2个',
+        },
+        {
+          id: '3',
+          name: '第3个',
+        },
+      ],
+      // 服务
+      projectList: [
+        {
+          id: '1',
+          name: '第1个',
+        },
+        {
+          id: '2',
+          name: '第2个',
+        },
+        {
+          id: '3',
+          name: '第3个',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let data = this.form;
+          console.log(data);
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 90;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: #f9f9f9;
+    padding: 8px;
+    .form {
+      background-color: #fff;
+      padding: 10px;
+      .text {
+        .el-select {
+          width: 100%;
+        }
+      }
+      /deep/.el-form-item__label {
+        float: left;
+        width: 100%;
+        text-align: center;
+        font-size: 15px;
+        line-height: 0;
+        padding: 20px 0;
+      }
+      // /deep/.el-form-item {
+      //   margin: 0 0 10px 0;
+      // }
+      .btn {
+        text-align: center;
+        padding: 8px;
+      }
+    }
+  }
+}
+</style>

src/views/service/index/zhongke.vue

@@ -0,0 +1,159 @@
+<template>
+  <div id="zhongke">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="name">
+              {{ item.name }}
+            </el-col>
+            <el-col :span="24" class="address textOver">
+              地址：<span>{{ item.addr || '暂无' }}</span>
+            </el-col>
+            <el-col :span="24" class="other">
+              <el-col :span="12" class="other_1 textOver">
+                联系人：<span>{{ item.contact }}</span>
+              </el-col>
+              <el-col :span="12" class="other_1 textOver">
+                电话：<span>{{ item.phone }}</span>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="btn">
+              <el-col :span="18"> 统计 </el-col>
+              <el-col :span="6">
+                <el-button type="primary" size="mini">立即预约</el-button>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <page :limit="limit" :total="total" @search="search"></page>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const moment = require('moment');
+import page from '@/layout/common/page.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: Medium } = createNamespacedHelpers('Medium');
+export default {
+  name: 'zhongke',
+  props: {},
+  components: {
+    page,
+  },
+  data: function () {
+    return {
+      clientHeight: '',
+      list: [
+        {
+          name: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          contact: '联系人',
+          phone: '联系电话',
+          addr: '吉林省长春市',
+        },
+        {
+          name: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          contact: '联系人',
+          phone: '联系电话',
+          addr: '吉林省长春市',
+        },
+        {
+          name: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
+          contact: '联系人',
+          phone: '联系电话',
+          addr: '吉林省长春市',
+        },
+      ],
+      total: 0,
+      limit: '10',
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...Medium(['query']),
+    async search({ skip = 0, limit = this.limit, ...info } = {}) {
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    getTime(data) {
+      return moment(_.get(data, 'meta.createdAt')).format('YYYY-MM-DD HH:mm:ss');
+    },
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 130;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: #f9f9f9;
+    padding: 5px;
+    .list {
+      background-color: #fff;
+      padding: 8px;
+      margin: 0 0 10px 0;
+      border-radius: 5px;
+      .name {
+        font-size: 15px;
+      }
+      .address {
+        font-size: 14px;
+        color: #666;
+        margin: 0 0 4px 0;
+        span {
+          color: #000;
+        }
+      }
+      .other {
+        margin: 0 0 4px 0;
+        .other_1 {
+          font-size: 14px;
+          color: #666;
+          span {
+            color: #000;
+          }
+        }
+      }
+      .btn {
+        text-align: center;
+      }
+    }
+    .list:last-child {
+      margin: 0;
+    }
+  }
+  .foot {
+    height: 40px;
+    overflow: hidden;
+    border-top: 1px solid #f1f1f1;
+  }
+}
+</style>

src/views/service/jike.vue

@@ -5,7 +5,9 @@
         <el-col :span="24" class="top">
           <top topType="2" :leftArrow="false"></top>
         </el-col>
-        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }"> 吉科在线 </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <jike-index></jike-index>
+        </el-col>
         <el-col :span="24" class="foot">
           <foot :type="2"></foot>
         </el-col>
@@ -15,6 +17,7 @@
 </template>
 
 <script>
+import jikeIndex from './index/jike.vue';
 import top from '@/layout/common/top.vue';
 import foot from '@/layout/common/foot.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
@@ -24,6 +27,7 @@ export default {
   components: {
     top,
     foot,
+    jikeIndex,
   },
   data: function () {
     return {

src/views/service/make.vue

@@ -5,7 +5,9 @@
         <el-col :span="24" class="top">
           <top topType="2" :leftArrow="false"></top>
         </el-col>
-        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }"> 预约服务 </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <make-index></make-index>
+        </el-col>
         <el-col :span="24" class="foot">
           <foot :type="2"></foot>
         </el-col>
@@ -15,6 +17,7 @@
 </template>
 
 <script>
+import makeIndex from './index/make.vue';
 import top from '@/layout/common/top.vue';
 import foot from '@/layout/common/foot.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
@@ -24,6 +27,7 @@ export default {
   components: {
     top,
     foot,
+    makeIndex,
   },
   data: function () {
     return {

src/views/service/zhongke.vue

@@ -5,7 +5,9 @@
         <el-col :span="24" class="top">
           <top topType="2" :leftArrow="false"></top>
         </el-col>
-        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }"> 中科在线 </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <zhongke-index></zhongke-index>
+        </el-col>
         <el-col :span="24" class="foot">
           <foot :type="2"></foot>
         </el-col>
@@ -15,6 +17,7 @@
 </template>
 
 <script>
+import zhongkeIndex from './index/zhongke.vue';
 import top from '@/layout/common/top.vue';
 import foot from '@/layout/common/foot.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
@@ -24,6 +27,7 @@ export default {
   components: {
     top,
     foot,
+    zhongkeIndex,
   },
   data: function () {
     return {