创新政策 服务超市

src/common/portrait.styl

@@ -39,6 +39,10 @@
   padding-bottom: 40px;
 }
 
+.pt-10 {
+  padding-top: 40px;
+}
+
 .px-1{
   padding-left: 4px;
   padding-right: 4px;
@@ -439,6 +443,15 @@ img{
   font-size: 24px;
 }
 
+.font-22{
+  font-size: 22px;
+}
+
+.font-bold-22{
+  font-size: 22px;
+  font-weight: bold;
+}
+
 .font-20{
   font-size: 20px;
 }
@@ -448,6 +461,15 @@ img{
   font-weight: bold;
 }
 
+.font-bold-18{
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.font-18{
+  font-size: 18px;
+}
+
 .font-bold-16{
   font-size: 16px;
   font-weight: bold;
@@ -489,24 +511,34 @@ h2{
 }
 
 .ant-btn {
-  color: #13acc4 !important;
-  border-color: #13acc4 !important;
+  color: #E77816 !important;
+  border-color: #E77816 !important;
 }
 
 .ant-btn-primary{
-  background-color: #007CC1
-  border-color: #007CC1;
+  background-color: #E77816
+  border-color: #E77816;
   color: #fff!important;
 }
 
+.ant-btn-primary:hover, .ant-btn-primary:focus{
+  color: #E77816;
+  background-color: #E77816
+}
+
 .ant-btn-link:hover, .ant-btn-link:focus{
-  color: #007CC1;
+  color: #E77816;
+  background-color: #E77816
 }
 
 .ant-btn-link{
   border-color: transparent!important;
 }
 
+.ant-btn-primary:active, .ant-btn-primary.active{
+  background-color: #E77816!important;
+}
+
 .ant-btn-primary-disabled, .ant-btn-primary.disabled, .ant-btn-primary[disabled], .ant-btn-primary-disabled:hover, .ant-btn-primary.disabled:hover, .ant-btn-primary[disabled]:hover, .ant-btn-primary-disabled:focus, .ant-btn-primary.disabled:focus, .ant-btn-primary[disabled]:focus, .ant-btn-primary-disabled:active, .ant-btn-primary.disabled:active, .ant-btn-primary[disabled]:active, .ant-btn-primary-disabled.active, .ant-btn-primary.disabled.active, .ant-btn-primary[disabled].active{
   border-color: #d9d9d9!important;
   color: rgba(0, 0, 0, 0.25)!important;

src/components/HeadNav/HeadNav.vue

@@ -2,13 +2,23 @@
   <div class="white d-flex flex-row flex-nowrap px-10 align-center">
     <img @click="jumUrl('/')" alt class="logo-img" src="@/assets/logo.png" style="cursor: pointer" />
     <div class="flex-1 ml-8">
-      <a-dropdown :disabled="item.children && item.children.length > 0 ? false : true" :key="a" class="list-down" v-for="(item, a) in list">
+      <a-dropdown
+        :disabled="item.children && item.children.length > 0 ? false : true"
+        :key="a"
+        class="list-down"
+        v-for="(item, a) in list"
+      >
         <a @click="jumUrl(item.url)" class="ant-dropdown-link">
           {{ item.name }}&nbsp;&nbsp;
           <a-icon type="down" v-show="item.children && item.children.length > 0" />
         </a>
         <a-menu slot="overlay">
-          <a-menu-item :key="b" class="px-6 py-3" style="text-align: center" v-for="(con, b) in item.children">
+          <a-menu-item
+            :key="b"
+            class="px-6 py-3"
+            style="text-align: center"
+            v-for="(con, b) in item.children"
+          >
             <a @click="jumUrl(con.url)">{{ con.title }}</a>
           </a-menu-item>
         </a-menu>
@@ -20,7 +30,11 @@
         <template slot="title">
           <span>点击查看购物车！</span>
         </template>
-        <a-icon @click="$router.push('/Cart')" class="baseColor icon-head icon-head-right pointer" type="shopping-cart" />
+        <a-icon
+          @click="$router.push('/Cart')"
+          class="baseColor icon-head icon-head-right pointer"
+          type="shopping-cart"
+        />
       </a-tooltip>
       <router-link tag="span" to="/login">
         <a-icon class="icon-head pointer" style="right: 50px" type="user" />
@@ -38,23 +52,23 @@ export default {
       list: [
         {
           name: '创新政策',
-          url: '',
+          url: '/Policy',
         },
         {
           name: '服务超市',
-          url: '',
+          url: '/ServiceMarket/Institute',
           children: [
             {
               title: '智慧创新研究院',
-              url: '',
+              url: '/ServiceMarket/Institute',
             },
             {
               title: '科技创新服务',
-              url: '',
+              url: '/ServiceMarket/InnovativeService',
             },
             {
               title: '合作伙伴',
-              url: '',
+              url: '/ServiceMarket/Partner',
             },
           ],
         },

src/components/Introduce/AddShopping.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <a-button @click="showModal" class="shopping" type="primary">{{ str }}</a-button>
+    <a-icon id="ddd" type="shopping-cart" />
+    <a-modal
+      :confirm-loading="confirmLoading"
+      :title="title"
+      :visible="visible"
+      @cancel="handleCancel"
+      @ok="handleOk"
+      width="50%"
+    >
+      <a-form :form="form">
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="项目信息简述"
+        >
+          <a-textarea placeholder="请输入项目信息简述..." style="height: 120px" v-model.trim="describe" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+import { addCar } from 'config/api';
+const formItemLayout = {
+  labelCol: { span: 5 },
+  wrapperCol: { span: 18 },
+};
+const formTailLayout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 18, offset: 6 },
+};
+export default {
+  name: 'NewModel',
+  props: {
+    typeData: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      form: this.$form.createForm(this, { name: 'submit' }),
+      title: '加入购物车',
+      str: '加入购物车',
+      visible: false,
+      formItemLayout,
+      formTailLayout,
+      confirmLoading: false,
+      pageX: 0,
+      pageY: 0,
+      WinWidth: 0,
+      WinHeight: 0,
+      describe: '', // 项目描述
+    };
+  },
+  methods: {
+    // 显示表单输入框
+    showModal(event) {
+      this.pageX = event.clientX;
+      this.pageY = event.clientY;
+
+      this.visible = true;
+    },
+    // 取消显示
+    handleCancel(e) {
+      this.visible = false;
+    },
+    // 点击确定
+    async handleOk() {
+      this.confirmLoading = true;
+      try {
+        const params = {
+          param: {
+            description: this.describe,
+            serviceId: this.typeData.Id,
+            type: this.typeData.type,
+          },
+        };
+        const res = await addCar(params);
+        const { code, msg, data } = res.data;
+        if (code === 200) {
+          this.$message.success('加入购物车成功');
+          this.visible = false;
+          this.confirmLoading = false;
+          this.describe = '';
+          this.anma();
+        } else {
+          this.$message.error(msg);
+        }
+      } catch (error) {
+        this.$message.error(error);
+      }
+    },
+    // 加入购物车动画
+    anma() {
+      this.WinWidth = window.innerWidth;
+      this.WinHeight = window.innerHeight;
+      var d = document.getElementById('ddd');
+      d.style.top = this.pageY - d.offsetHeight * 0.5 + 'px';
+      console.log(d.offsetWidth);
+      d.style.right = this.WinWidth - this.pageX - d.offsetWidth * 0.5 + 'px';
+      d.style.display = 'block';
+      setTimeout(() => {
+        d.style.display = 'none';
+      }, 900);
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.must-color {
+  color: red;
+}
+
+.code_img {
+  height: 32px;
+  width: 120px;
+}
+
+#ddd {
+  color: #13acc4;
+  font-size: 50px;
+  display: none;
+  z-index: 1000;
+  animation: animations 1s cubic-bezier(0.5, 0.5, 0.5, 0.5);
+  position: fixed;
+}
+
+@keyframes animations {
+  0% {
+  }
+
+  99% {
+    top: 0;
+    right: -50px;
+    font-size: 20px;
+  }
+
+  100% {
+    transform: none;
+  }
+}
+</style>

src/components/Introduce/IntentionModel.vue

@@ -0,0 +1,308 @@
+<template>
+  <div>
+    <a-button @click="showModal">{{ typeData.type === 1 ? '意向填报' : '直接申请' }}</a-button>
+    <a-modal
+      :confirm-loading="confirmLoading"
+      :title="typeData.type === 1 ? '意向填报' : '产品购买'"
+      :visible="visible"
+      @cancel="handleCancel"
+      @ok="handleOk"
+      width="50%"
+    >
+      <a-form :form="form">
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="公司名称"
+        >
+          <a-input placeholder="请输入公司名称..." v-model.trim="platform.companyName" />
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="联系人"
+          required
+        >
+          <a-input placeholder="请输入联系人..." v-model.trim="platform.manName" />
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="联系电话"
+          required
+        >
+          <a-input
+            @change="changePhone"
+            placeholder="请输入联系电话.."
+            type="tel"
+            v-decorator="['tel', { rules: phoneRules }]"
+          />
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="图片验证码"
+          required
+        >
+          <div class="d-flex flex-nowrap">
+            <a-input placeholder="图片验证码" type="number" v-model="codeNum" />
+            <img
+              :src="picCode.imageBase64"
+              @click="changePicCode"
+              class="code_img ml-2"
+              v-if="picCode && picCode.imageBase64"
+            />
+            <a-button @click="changePicCode" class="code_img ml-2" size="small" v-else>获取验证码</a-button>
+            <!-- <a-input v-decorator="['account', { rules: rules.account }]" /> -->
+          </div>
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="短信验证码"
+          required
+        >
+          <div class="d-flex flex-nowrap">
+            <a-input placeholder="请输入验证码" type="number" v-model="platform.code" />
+            <a-button
+              class="code_img ml-2"
+              disabled
+              type="primary"
+              v-if="showInterval"
+            >重新发送 {{ interval }}</a-button>
+            <a-button
+              :disabled="platform.isTel === false"
+              @click="getCode"
+              class="code_img ml-2"
+              type="primary"
+              v-else
+            >获取验证码</a-button>
+          </div>
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="项目信息简述"
+          required
+        >
+          <a-textarea
+            placeholder="请输入项目信息简述..."
+            style="height: 120px"
+            v-model.trim="platform.describe"
+          />
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="上传附件"
+          v-show="typeData.type === 0"
+        >
+          <a-upload
+            :action="action"
+            :default-file-list="fileList"
+            @change="fileChange"
+            list-type="picture"
+            name="files"
+          >
+            <a-button>
+              <a-icon type="upload" />点击上传附件
+            </a-button>
+          </a-upload>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+import { serviceApply, upload } from 'config/api';
+const formItemLayout = {
+  labelCol: { span: 5 },
+  wrapperCol: { span: 18 },
+};
+const formTailLayout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 18, offset: 6 },
+};
+export default {
+  name: 'NewModel',
+  props: {
+    typeData: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      form: this.$form.createForm(this, { name: 'submit' }),
+      action: upload,
+      fileList: [],
+      visible: false,
+      formItemLayout,
+      formTailLayout,
+      confirmLoading: false,
+      platform: {
+        companyName: '', // 公司名称
+        manName: '', // 联系人
+        tel: '', // 联系电话
+        describe: '', // 项目描述
+        code: '', // 验证码
+        files: [], // 附件Id
+        isTel: false,
+      },
+      codeRules: [
+        { required: true, message: '请输入验证码' },
+        { min: 4, max: 4, message: '请输入4位短信验证码' },
+      ],
+      codeNum: '',
+      showInterval: false,
+      codeTimer: null,
+      interval: 120, // 验证码有效时间倒计时
+      phoneRules: [
+        { required: true, pattern: new RegExp(/^[1][3,4,5,6,7,8,9][0-9]{9}$/), whitespace: true, message: '请输入正确的手机号' },
+      ],
+    };
+  },
+  computed: mapState('user', ['picCode']),
+  async created() {
+    this.sendPicCode();
+    await this.getUserSer();
+    if (this.userSer) {
+      if (this.userSer.name) {
+        this.platform.manName = this.userSer.name;
+      }
+      if (this.userSer.phone) {
+        this.platform.tel = this.userSer.phone;
+      }
+      if (this.userSer.companyName) {
+        this.platform.companyName = this.userSer.companyName;
+      }
+    }
+  },
+  methods: {
+    ...mapActions('user', ['sendCode', 'sendPicCode']),
+    ...mapActions('home', ['getUserSer']),
+    // 显示表单输入框
+    showModal() {
+      this.visible = true;
+    },
+    // 取消显示
+    handleCancel(e) {
+      this.visible = false;
+    },
+    // 验证电话
+    changePhone(e) {
+      this.platform.tel = e.target.value;
+      this.platform.isTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.platform.tel);
+    },
+    // 点击确定
+    handleOk() {
+      if (!this.platform.manName) {
+        this.$message.error('请输入联系人');
+      } else if (!this.platform.tel) {
+        this.$message.error('请输入联系电话');
+      } else if (!this.platform.code) {
+        this.$message.error('请输入验证码');
+      } else if (!this.platform.describe) {
+        this.$message.error('请输入项目信息简述');
+      } else {
+        if (this.platform.isTel) {
+          for (var i = 0; i < this.fileList.length; i++) {
+            this.platform.files = this.platform.files.concat(this.fileList[i].response.data[0].id);
+          }
+          this.subMitAdd();
+          // console.log(this.platform.files);
+        } else {
+          this.$message.error('请输入正确的联系电话');
+        }
+      }
+    },
+    // 加入接口
+    async subMitAdd() {
+      this.confirmLoading = true;
+      try {
+        const params = {
+          param: {
+            code: this.platform.code,
+            companyName: this.platform.companyName,
+            contactName: this.platform.manName,
+            contactPhone: this.platform.tel,
+            description: this.platform.describe,
+            filesId: this.platform.files,
+            serviceId: this.typeData.Id,
+            type: this.typeData.type,
+          },
+        };
+        const res = await serviceApply(params);
+        const { code, msg, data } = res.data;
+        if (code === 200) {
+          this.$message.success('申请成功');
+          this.visible = false;
+          this.confirmLoading = false;
+          for (let key in this.platform) {
+            this.platform[key] = '';
+          }
+          this.platform.isTel = false;
+        } else {
+          throw msg;
+          this.confirmLoading = false;
+        }
+      } catch (error) {
+        this.$message.error(error);
+        this.confirmLoading = false;
+      }
+    },
+    // 获取验证码
+    async getCode() {
+      console.log(111);
+      try {
+        const params = {
+          phone: this.platform.tel,
+          verificationCodeId: this.picCode.verificationCodeId,
+          verificationCodeValue: this.codeNum,
+        };
+        await this.sendCode(params);
+        this.getCodeInterval();
+      } catch (error) {
+        // throw new Error(`SignIn.vue method getCode: ${error}`);
+        console.log(error);
+      }
+    },
+
+    // 验证码倒计时
+    getCodeInterval() {
+      this.showInterval = true;
+      this.codeTimer = setInterval(() => {
+        if (this.interval === 0) {
+          clearInterval(this.codeTimer);
+          this.codeTimer = null;
+          this.showInterval = false;
+          this.interval = 120;
+          return;
+        }
+        this.interval = this.interval - 1;
+      }, 1000);
+    },
+
+    // 刷新验证码
+    changePicCode() {
+      this.sendPicCode();
+    },
+    fileChange(info) {
+      this.fileList = info.fileList;
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.must-color {
+  color: red;
+}
+
+.code_img {
+  height: 32px;
+  width: 120px;
+}
+</style>

src/plugins/ant-design-vue.js

@@ -31,6 +31,7 @@ import {
   Layout,
   Breadcrumb,
   Tooltip,
+  Divider,
 } from 'ant-design-vue';
 import { ConfigProvider } from 'ant-design-vue';
 Vue.component(ConfigProvider.name, ConfigProvider);
@@ -63,6 +64,7 @@ Vue.use(Avatar);
 Vue.use(Layout);
 Vue.use(Breadcrumb);
 Vue.use(Tooltip);
+Vue.use(Divider);
 
 Vue.prototype.$message = message;
 Vue.prototype.$notification = notification;

src/router/index.js

@@ -79,6 +79,46 @@ const routes = [
       },
     ],
   },
+  // 政策界面
+  {
+    path: '/Policy',
+    name: 'Policy',
+    component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/Policy/Policy.vue'),
+  },
+  // 政策详情界面
+  {
+    path: '/Policy/PolicyDetails',
+    name: 'PolicyDetails',
+    component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/Policy/PolicyDetails.vue'),
+  },
+  // 服务超市
+  {
+    path: '/ServiceMarket/Institute',
+    name: 'ServiceMarket',
+    component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/ServiceMarket/ServiceMarket.vue'),
+    children: [
+      {
+        path: '/ServiceMarket/Institute',
+        name: 'Institute',
+        component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/ServiceMarket/Children/Institute.vue'),
+      },
+      {
+        path: '/ServiceMarket/InnovativeService',
+        name: 'InnovativeService',
+        component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/ServiceMarket/Children/InnovativeService.vue'),
+      },
+      {
+        path: '/ServiceMarket/Partner',
+        name: 'Partner',
+        component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/ServiceMarket/Children/Partner.vue'),
+      },
+      {
+        path: '/ServiceMarket/ServiceDet',
+        name: 'ServiceDet',
+        component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/ServiceMarket/Children/ServiceDet.vue'),
+      },
+    ],
+  },
 ];
 
 const router = new VueRouter({

src/views/Policy/Policy.vue

@@ -0,0 +1,37 @@
+<!--
+  Copyright (c) 2020.
+  author: bin
+  email: binbin0314@126.com
+  -->
+
+<template>
+  <div class="inner">
+    <policy-list />
+    <!-- <policy-details v-else/> -->
+  </div>
+</template>
+
+<script>
+import PolicyList from './components/PolicyList.vue';
+export default {
+  name: 'Policy',
+  components: {
+    PolicyList,
+    // PolicyDetails,
+  },
+  data() {
+    return {
+      showType: 1,
+      list: [],
+      arr: [{ name: '创新政策', url: '' }],
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="stylus">
+.inner {
+  margin: 40px auto;
+}
+</style>

src/views/Policy/PolicyDetails.vue

@@ -0,0 +1,106 @@
+<!--
+  Copyright (c) 2020.
+  author: bin
+  email: binbin0314@126.com
+  -->
+
+<template>
+  <div class="white inner">
+    <div class="policy-title">
+      <span>{{ obj.title }}</span>
+    </div>
+    <div class="policy-info">
+      <span>
+        <a-icon class="baseColor" type="clock-circle" />&nbsp;&nbsp;&nbsp;&nbsp;
+        <span>{{ obj.time }}</span>
+      </span>
+      <span class="ml-8">
+        <!-- <a-icon type="form" />&nbsp;&nbsp;&nbsp;&nbsp; -->
+        <a-icon style="color: #ff1857" type="tag" />&nbsp;&nbsp;&nbsp;&nbsp;
+        <span>{{ obj.source }}</span>
+      </span>
+    </div>
+    <div class="policy-content" v-dompurify-html="obj.content"></div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex';
+import { selPolicy } from 'config/api';
+export default {
+  name: 'PolicyDetails',
+  data() {
+    return {
+      obj: {
+        title: '',
+        content: '',
+        time: '',
+        source: '',
+      },
+    };
+  },
+  computed: mapState('home', ['policyId']),
+  created() {
+    this.getPolicyDet();
+  },
+  methods: {
+    async getPolicyDet() {
+      try {
+        const params = { param: { id: this.policyId } };
+        const res = await selPolicy(params);
+        const { code, msg, data } = res.data;
+        if (code === 200) {
+          this.obj.title = data.title;
+          this.obj.content = data.content;
+          this.obj.time = data.publishTime;
+          this.obj.source = data.publishDepartName;
+          window.scroll(0, 0);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="stylus">
+.inner {
+  margin: 40px auto;
+}
+
+.back-btn {
+  width: 80px;
+  position: absolute;
+  right: 0;
+}
+
+.policy-title {
+  height: 120px;
+  font-size: 24px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.85);
+  opacity: 1;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 150px;
+  border-bottom: 1px solid #707070;
+}
+
+.policy-info {
+  height: 76px;
+  line-height: 76px;
+  text-align: center;
+}
+
+.policy-content {
+  padding: 0 25px 25px;
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.65);
+  font-weight: 400;
+  font-family: Microsoft YaHei;
+}
+</style>

src/views/Policy/components/PolicyList.vue

@@ -0,0 +1,266 @@
+<!--
+  Copyright (c) 2020.
+  author: bin
+  email: binbin0314@126.com
+  -->
+
+<template>
+  <div class="box">
+    <div class="search-list">
+      <!-- <search-list @iptCon="getInput" /> -->
+      <span>
+        <a-checkbox :checked="pStatus.bw - 0 === 1" @click="changeStatus('bw')">国家</a-checkbox>
+        <a-checkbox :checked="pStatus.sx - 0 === 1" @click="changeStatus('sx')">山西省</a-checkbox>
+        <a-checkbox :checked="pStatus.zg - 0 === 1" @click="changeStatus('zg')">山西省综改区</a-checkbox>
+        <a-checkbox :checked="pStatus.ty - 0 === 1" @click="changeStatus('ty')">太原市</a-checkbox>
+      </span>
+      <a-input-group class="search" compact>
+        <a-select
+          @change="changeCode"
+          style="width: 120px; height: 40px"
+          v-model="pStatus.policyText[pStatus.value - 1]"
+        >
+          <a-select-option value="1">标题</a-select-option>
+          <a-select-option value="2">地区</a-select-option>
+          <a-select-option value="3">发布部门</a-select-option>
+        </a-select>
+        <a-input-search
+          @search="getPolicy"
+          enter-button="搜索"
+          placeholder="请输入..."
+          style="width: 76.2%"
+          v-model="pStatus.iptCon"
+        />
+      </a-input-group>
+    </div>
+    <div class="policy-box d-flex flex-wrap flex-row">
+      <div :class="(index + 1) % 2 === 0 ? 'ml' : 'mr'" :key="index" v-for="(item, index) in lists">
+        <p class="item-title">{{ item.title }}</p>
+        <p class="item-content">{{ item.intro }}</p>
+        <!-- <p class="item-content" v-html="item.content"></p> -->
+        <p>
+          <span
+            @click="openWin(item.titleUrl)"
+            class="baseColor source"
+          >来源：{{ item.publishDepartName }}</span>
+          <span class="time">{{ item.publishTime }}</span>
+        </p>
+        <p class="original baseColor">
+          <span @click="LookSource(item.id)" class="font-14 textColor">查看原文</span>
+        </p>
+      </div>
+    </div>
+    <a-pagination
+      :current="current"
+      :page-size="pageSize"
+      :total="total"
+      @change="onShowSizeChange"
+      class="pagination"
+      show-less-items
+      show-quick-jumper
+      v-show="total > 5"
+    />
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex';
+import { selLikePolicy } from 'config/api';
+export default {
+  name: 'PolicyList',
+  data() {
+    return {
+      str: '这是创新政策界面',
+      lists: [],
+      total: 0,
+      pageSize: 6,
+      pCode: ['title', 'area', 'area'],
+      pStatus: {
+        bw: 0,
+        sx: 0,
+        zg: 0,
+        ty: 0,
+        value: 1, // 搜索框当前选项value
+        code: 'title', // 搜索框当前选项code
+        policyText: ['标题', '地区', '发布部门'], // 搜索框选项列表
+        iptCon: '', // 搜索框input内容
+      },
+    };
+  },
+  computed: mapState('home', ['current', 'policyStatus']),
+
+  watch: {
+    policyStatus(val) {
+      this.setCurrent(1);
+      this.getPolictList();
+    },
+  },
+
+  created() {
+    this.pStatus = this.policyStatus;
+    this.getPolictList();
+  },
+
+  methods: {
+    ...mapMutations('home', ['setPolicyId', 'setCurrent', 'setPolicyStatus']),
+    async getPolictList() {
+      try {
+        const params = {
+          param: {
+            bw: this.policyStatus.bw,
+            code: this.policyStatus.code,
+            input: this.policyStatus.iptCon,
+            pageNum: this.current,
+            pageSize: 6,
+            sx: this.policyStatus.sx,
+            zg: this.policyStatus.zg,
+            ty: this.policyStatus.ty,
+          },
+        };
+        const res = await selLikePolicy(params);
+        const { code, msg, data } = res.data;
+        if (code === 200) {
+          this.lists = data.list;
+          this.total = data.total - 0;
+          window.scroll(0, 0);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 查看政策详情
+    LookSource(id) {
+      this.setPolicyId(id);
+      this.$router.push('/Policy/PolicyDetails');
+    },
+    // 改变单当前页数
+    onShowSizeChange(current, size) {
+      this.setCurrent(current);
+      this.getPolictList();
+    },
+    // 政策界面课程类目多选框发生改变时的事件
+    changeStatus(str) {
+      if (this.pStatus[str]) {
+        this.pStatus[str] = 0;
+      } else {
+        this.pStatus[str] = 1;
+      }
+      this.setPolicyStatus(this.pStatus);
+    },
+    // 政策界面课程类目搜索提示
+    changeCode(value) {
+      this.pStatus.code = this.pCode[value - 1];
+    },
+    // 点击搜索按钮
+    getPolicy() {
+      this.setCurrent(1);
+      this.setPolicyStatus(this.pStatus);
+    },
+  },
+};
+</script>
+
+<style scoped lang="stylus">
+.box {
+  width: 100%;
+  min-height: 1037px;
+  overflow: hidden;
+  opacity: 1;
+}
+
+.search-list {
+  height: 72px;
+  line-height: 72px;
+  background: #fff;
+  padding: 0 24px;
+  position: relative;
+}
+
+.search {
+  width: 500px;
+  position: absolute;
+  right: 25px;
+  top: 20px;
+}
+
+.ml {
+  margin-left: 1%;
+}
+
+.mr {
+  margin-right: 1%;
+}
+
+.policy-box {
+  div {
+    position: relative;
+    width: 49%;
+    height: 238px;
+    overflow: hidden;
+    background: #fff;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+    margin-top: 24px;
+    padding: 25px;
+  }
+}
+
+.item-title {
+  overflow: hidden;
+  display: -webkit-box;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.65);
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.item-content {
+  text-indent: 2em;
+  font-size: 14px;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 0.65);
+  font-family: Microsoft YaHei;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.source {
+  cursor: pointer;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  opacity: 1;
+  margin-right: 24px;
+}
+
+.time {
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.25);
+  opacity: 1;
+}
+
+.original {
+  position: absolute;
+  right: 25px;
+  bottom: 25px;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  line-height: 22px;
+  opacity: 1;
+  margin-bottom: 0;
+
+  span {
+    cursor: pointer;
+  }
+}
+
+.pagination {
+  margin-top: 68px;
+  text-align: right;
+}
+</style>

src/views/ServiceMarket/Children/InnovativeService.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="d-flex flex-nowrap inner">
+    <left-nav />
+    <div class="flex-1">
+      <div class="content-box pa-3">
+        <div
+          :key="index"
+          style="margin-bottom: 50px; cursor: pointer"
+          v-for="(item, index) in list"
+        >
+          <div
+            @click="jump(item.id)"
+            class="pointer d-flex flex-nowrap justify-space-between mb-10"
+          >
+            <img :src="item.picUrl" style="width: 330px;height:173px" />
+            <div class="flex-1 flex-column pa-3">
+              <p class="font-bold-22">{{ item.name }}</p>
+              <p>{{ item.intro }}</p>
+            </div>
+          </div>
+          <a-divider v-if="index !== (list.length - 1)" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex';
+import { selService } from 'config/api';
+import LeftNav from './../components/LeftNav.vue';
+
+export default {
+  name: 'InnovativeService',
+  components: { LeftNav },
+  data() {
+    return {
+      title: '服务超市-科技创新服务',
+      list: [
+        // {
+        //   title: '山西维基智汇科技有限公司',
+        //   content:
+        //     '研究院的介绍包含研究院，公司架构，和各中心的介绍。' +
+        //     '各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、' +
+        //     '数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、' +
+        //     '山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。',
+        //   imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
+        // },
+        // {
+        //   title: '',
+        //   content:
+        //     '各中心介绍包含科创体系与科创能力咨询服务中心、' +
+        //     '知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、' +
+        //     '科创战略协同研究中心、山西奥依工业设计咨询服务中心',
+        //   imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/4f9b898da25e48d3b73b47345ed14a9a.jpg',
+        // },
+      ],
+      // arr: [
+      //   { name: '服务超市', url: '/ServiceMarket/InnovativeService' },
+      //   { name: '科技创新服务', url: '/ServiceMarket/InnovativeService' },
+      // ],
+    };
+  },
+
+  created() {
+    this.getService();
+  },
+
+  methods: {
+    ...mapMutations('home', ['setServiceArr']),
+    // 获取服务列表
+    async getService() {
+      try {
+        const params = { param: { serviceType: 1 } };
+        const res = await selService(params);
+        const { code, data, msg } = res.data;
+        if (code === 200) {
+          this.list = data;
+        }
+      } catch (error) {
+        console.log(data);
+      }
+    },
+    // 查看 服务 详情
+    jump(id) {
+      this.$router.push({
+        path: '/NewPlatform/ServiceDet',
+        name: 'ServiceDet',
+        params: { id },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped></style>

src/views/ServiceMarket/Children/Institute.vue

@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <!-- 公司介绍 -->
+    <div class="d-flex flex-nowrap inner">
+      <left-nav />
+      <div class="flex-1">
+        <div class="px-3 py-10">
+          <div class="d-flex flex-row fill-width justify-center py-10">
+            <img src="~assets/fwcs01.png" />
+          </div>
+          <div>
+            <div
+              class="font-16 textColor line-height-36"
+            >协同创新中心围绕研发领域设立功能食品、现代医药、生物医学工程及数字健康开发四大协同创新平台，根据研发方向设若干研发单元。</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 公司架构 -->
+    <div class="white">
+      <div class="d-flex flex-nowrap inner">
+        <div style="width:17%"></div>
+        <div class="flex-1">
+          <div class="px-3 py-10">
+            <div class="d-flex flex-row fill-width justify-center py-10">
+              <img src="~assets/fwcs02.png" />
+            </div>
+            <div>
+              <div
+                class="font-16 textColor line-height-36"
+              >协同创新中心围绕研发领域设立功能食品、现代医药、生物医学工程及数字健康开发四大协同创新平台，根据研发方向设若干研发单元。</div>
+              <div :style="{ height: '500px' }" id="treeChart"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 中心介绍 -->
+    <div class="d-flex flex-nowrap inner">
+      <div style="width:17%"></div>
+      <div class="flex-1 flex-row fill-width justify-center pt-10">
+        <div class="px-3 py-10">
+          <img src="~assets/fwcs03.png" />
+        </div>
+      </div>
+    </div>
+    <div class="inner pb-10">
+      <div class="d-flex flex-row flex-wrap">
+        <div
+          :class="(index + 1) % 3 === 0 ? 'mr0' : ''"
+          :key="index"
+          class="pic-box pb-10"
+          v-for="(item,index) in list"
+        >
+          <div class="pic d-flex align-center justify-center">
+            <img :src="item.url" class="fill-width fill-height" />
+            <span class="font-bold-18 white--text">{{ item.title }}</span>
+          </div>
+          <div class="pic-introduce d-flex justify-center flex-column px-5">{{ item.introduce }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import '@/common/platform.styl';
+import LeftNav from './../components/LeftNav.vue';
+
+export default {
+  name: 'Institute',
+  components: { LeftNav },
+  data() {
+    return {
+      title: '服务超市-智慧创新研究院',
+      title1: '创新平台-组织机构',
+      typeOfPlatform: '服务超市',
+      list: [
+        {
+          id: 1,
+          title: '服务1',
+          introduce: '研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系',
+          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
+        },
+        {
+          id: 2,
+          title: '服务1',
+          introduce: '研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系',
+          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
+        },
+        {
+          id: 3,
+          title: '服务1',
+          introduce: '研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系',
+          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
+        },
+        {
+          id: 4,
+          title: '服务1',
+          introduce: '研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系',
+          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
+        },
+      ],
+      treedata: [
+        {
+          //一定一定要注意这里有[]
+          name: '协同创新中心',
+          children: [
+            {
+              name: '功能食品协同创新平台',
+              children: [
+                { name: '功能食品资源开发' },
+                { name: '营养健康功能因子分再鉴定及作用机制探究' },
+                { name: '功能食品关键加工技术研发' },
+                { name: '功能食品安全评价与风险监测' },
+              ],
+            },
+            {
+              name: '现代医药协同创新平台',
+              children: [
+                { name: '中医药与天然药物资源开发利用' },
+                { name: '医药生物技术' },
+                { name: '新药研发' },
+                { name: '药理药效研究与安全评价' },
+              ],
+            },
+            {
+              name: '生物医学工程协同创新平台',
+              children: [{ name: '生物信息技术' }, { name: '生物医学工程研发' }, { name: '生物力学和生物材料' }],
+            },
+            {
+              name: '数字健康开发协同创新平台',
+              children: [{ name: '健康医疗大数据挖掘与分析' }, { name: '基于纳米传感器的医疗健康' }, { name: '传染病预测预鉴数字技术' }],
+            },
+            { name: '科技资源共享服务平台' },
+            { name: '知识产权与技术转移转化服务平台' },
+            { name: '创新服务' },
+          ],
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.showChart();
+  },
+  methods: {
+    showChart() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = this.$echarts.init(document.getElementById('treeChart'));
+      // 指定图表的配置项和数据
+      var option = {
+        tooltip: {
+          trigger: 'item',
+          triggerOn: 'mousemove',
+        },
+        series: [
+          {
+            type: 'tree',
+            data: this.treedata,
+            top: '2%',
+            left: '12%',
+            bottom: '1%',
+            right: '36%',
+            symbolSize: 7,
+            lineStyle: { width: 4 },
+            itemStyle: { borderWidth: 3, borderColor: '#E77816' },
+            label: { position: 'left', verticalAlign: 'middle', align: 'right', fontSize: 16 },
+            leaves: {
+              label: {
+                position: 'right',
+                verticalAlign: 'middle',
+                align: 'left',
+              },
+            },
+            expandAndCollapse: true,
+            animationDuration: 550,
+            animationDurationUpdate: 750,
+          },
+        ],
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.pic-box {
+  width: 32%;
+  margin-right: 2%;
+
+  .pic {
+    width: 100%;
+    height: 300px;
+    position: relative;
+
+    span {
+      position: absolute;
+    }
+  }
+
+  .pic-introduce {
+    width: 100%;
+    height: 94px;
+    background: #EBEBEB;
+  }
+}
+</style>

src/views/ServiceMarket/Children/Partner.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="d-flex flex-nowrap inner">
+    <left-nav />
+    <div class="flex-1 py-3">
+      <div class="fill-width">
+        <pter />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LeftNav from './../components/LeftNav.vue';
+import Pter from 'components/Introduce/Pter.vue';
+
+export default {
+  name: 'Partner',
+  components: { Pter, LeftNav },
+  data() {
+    return {
+      title: '合作伙伴',
+      typeOfPlatform: '关于我们',
+      arr: [
+        { name: '关于我们', url: '/About/Introduce' },
+        { name: '合作伙伴', url: '' },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="stylus" scoped></style>

src/views/ServiceMarket/Children/ServiceDet.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <banner :show-page="showPage" />
+    <div class="posi-name">
+      <p class="service-name">{{ obj.name }}</p>
+      <p class="service-eng">SERVICE</p>
+    </div>
+    <div class="inner service-box">
+      <!-- <div style="margin-bottom: 40px" v-dompurify-html="obj.content"></div> -->
+      <div
+        style="margin-bottom: 40px"
+      >研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、山西奥依工业设计咨询服务中心</div>
+      <div>
+        <!-- <a-button>直接申请</a-button> -->
+        <intention-model :type-data="typeData" style="float: left; margin-right: 20px" />
+        <!-- <a-button type="primary">加入购物车</a-button> -->
+        <add-shopping :type-data="typeData" />
+      </div>
+      <div class="mt-10" style="margin-top: 40px">
+        <p class="font-30">服务案例</p>
+        <div>研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、山西奥依工业设计咨询服务中心</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import { selContent } from 'config/api';
+import IntentionModel from 'components/Introduce/IntentionModel.vue';
+import Banner from 'components/Banner/Banner.vue';
+import AddShopping from 'components/Introduce/AddShopping.vue';
+export default {
+  name: 'ServiceDet',
+  components: { IntentionModel, Banner, AddShopping },
+  data() {
+    return {
+      showPage: 100,
+      obj: {
+        name: '',
+        id: '',
+        content: '',
+      },
+      typeData: {
+        type: 0,
+        Id: '',
+      },
+    };
+  },
+  computed: mapState('home', ['serviceArr']),
+
+  async created() {
+    this.typeData.Id = this.$route.params.id;
+    await this.getData(this.$route.params.id);
+  },
+
+  methods: {
+    async getData(id) {
+      try {
+        const params = { param: { id } };
+        const res = await selContent(params);
+        const { code, msg, data } = res.data;
+        if (code === 200) {
+          console.log(data);
+          this.obj = data;
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.service-box {
+  margin: 60px auto;
+  min-height: 400px;
+  padding: 20px;
+  background: #fff;
+}
+
+.posi-name {
+  position: absolute;
+  left: 20%;
+  top: 260px;
+  color: #fff;
+  text-align: center;
+}
+
+.service-name {
+  font-size: 40px;
+  margin-bottom: 0 !important;
+}
+
+.service-eng {
+  font-size: 16px;
+}
+</style>

src/views/ServiceMarket/ServiceMarket.vue

@@ -0,0 +1,29 @@
+<!--
+ * @Author: wally
+ * @email: 18603454788@163.com
+ * @Date: 2021-01-13 17:18:13
+ * @LastEditors: wally
+ * @LastEditTime: 2021-01-13 18:03:42
+-->
+
+<template>
+  <div>
+    <!-- <left-nav style="float: left" /> -->
+    <div>
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+// import LeftNav from './components/LeftNav.vue';
+export default {
+  name: 'ServiceMarket',
+  // components: { LeftNav },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="stylus"></style>

src/views/ServiceMarket/components/LeftNav.vue

@@ -0,0 +1,64 @@
+<!--
+ * @Author: wally
+ * @email: 18603454788@163.com
+ * @Date: 2021-01-13 17:25:56
+ * @LastEditors: wally
+ * @LastEditTime: 2021-01-13 18:19:19
+-->
+<template>
+  <div class="nav-box">
+    <div
+      :class="activeNum === index ? 'nav-box-active' : ''"
+      :key="index"
+      @click="jump(item.url, index)"
+      v-for="(item, index) in list"
+    >{{ item.title }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LeftNav',
+  data() {
+    return {
+      str: '导航条',
+      activeNum: 0,
+      list: [
+        {
+          title: '智慧创新研究院',
+          url: '/ServiceMarket/Institute',
+        },
+        {
+          title: '科技创新服务',
+          url: '/ServiceMarket/InnovativeService',
+        },
+        {
+          title: '合作伙伴',
+          url: '/ServiceMarket/Partner',
+        },
+      ],
+    };
+  },
+  created() {
+    if (this.$route.fullPath === '/ServiceMarket/InnovativeService') {
+      this.activeNum = 1;
+    } else if (this.$route.fullPath === '/ServiceMarket/Partner') {
+      this.activeNum = 2;
+    } else {
+      this.activeNum = 0;
+    }
+  },
+  methods: {
+    jump(url, index) {
+      if (this.$route.fullPath === url) {
+        this.$message.success('已在当前界面');
+      } else {
+        this.$router.push(url);
+        this.activeNum = index;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="stylus"></style>

src/views/ServiceMarket/components/NewModel.vue

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <a-button type="primary" @click="showModal">
+      {{ str }}
+    </a-button>
+    <a-modal width="50%" :title="title" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
+      <a-form :form="form">
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="公司名称">
+          <a-input v-model.trim="platform.companyName" placeholder="请输入公司名称..." />
+        </a-form-item>
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系人" required>
+          <a-input v-model.trim="platform.manName" placeholder="请输入联系人..." />
+        </a-form-item>
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系电话" required>
+          <a-input @change="changePhone" type="tel" v-decorator="['tel', { rules: phoneRules }]" placeholder="请输入联系电话.." />
+        </a-form-item>
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片验证码" required>
+          <div class="d-flex flex-nowrap">
+            <a-input placeholder="图片验证码" type="number" v-model="codeNum" />
+            <img :src="picCode.imageBase64" @click="changePicCode" class="code_img ml-2" v-if="picCode && picCode.imageBase64" />
+            <a-button @click="changePicCode" class="code_img ml-2" size="small" v-else>获取验证码</a-button>
+            <!-- <a-input v-decorator="['account', { rules: rules.account }]" /> -->
+          </div>
+        </a-form-item>
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="短信验证码" required>
+          <div class="d-flex flex-nowrap">
+            <a-input placeholder="请输入验证码" type="number" v-model="platform.code" />
+            <a-button class="code_img ml-2" disabled type="primary" v-if="showInterval">重新发送 {{ interval }}</a-button>
+            <a-button :disabled="platform.isTel === false" @click="getCode" class="code_img ml-2" type="primary" v-else>
+              获取验证码
+            </a-button>
+          </div>
+        </a-form-item>
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="项目信息简述" required>
+          <a-textarea v-model.trim="platform.describe" style="height: 120px" placeholder="请输入项目信息简述..." />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+import { JoinPlatform } from 'config/api';
+const formItemLayout = {
+  labelCol: { span: 5 },
+  wrapperCol: { span: 18 },
+};
+const formTailLayout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 18, offset: 6 },
+};
+export default {
+  name: 'NewModel',
+
+  data() {
+    return {
+      form: this.$form.createForm(this, { name: 'submit' }),
+      visible: false,
+      title: '协同创新中心加入申请',
+      str: '申请加入',
+      formItemLayout,
+      formTailLayout,
+      confirmLoading: false,
+      platform: {
+        companyName: '', // 公司名称
+        manName: '', // 联系人
+        tel: '', // 联系电话
+        describe: '', // 项目描述
+        code: '', // 验证码
+        isTel: false,
+      },
+      codeRules: [
+        { required: true, message: '请输入验证码' },
+        { min: 4, max: 4, message: '请输入4位短信验证码' },
+      ],
+      codeNum: '',
+      showInterval: false,
+      codeTimer: null,
+      interval: 120, // 验证码有效时间倒计时
+      phoneRules: [
+        { required: true, pattern: new RegExp(/^[1][3,4,5,6,7,8,9][0-9]{9}$/), whitespace: true, message: '请输入正确的手机号' },
+      ],
+    };
+  },
+  computed: mapState('user', ['picCode']),
+  async created() {
+    this.sendPicCode();
+    await this.getUserSer();
+    if (this.userSer) {
+      if (this.userSer.name) {
+        this.platform.manName = this.userSer.name;
+      }
+      if (this.userSer.phone) {
+        this.platform.tel = this.userSer.phone;
+      }
+      if (this.userSer.companyName) {
+        this.platform.companyName = this.userSer.companyName;
+      }
+    }
+  },
+  methods: {
+    ...mapActions('user', ['sendCode', 'sendPicCode']),
+    ...mapActions('home', ['getUserSer']),
+    // 显示表单输入框
+    showModal() {
+      this.visible = true;
+    },
+    // 取消显示
+    handleCancel(e) {
+      this.visible = false;
+    },
+    // 验证电话
+    changePhone(e) {
+      this.platform.tel = e.target.value;
+      this.platform.isTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.platform.tel);
+    },
+    // 点击确定
+    handleOk() {
+      if (!this.platform.manName) {
+        this.$message.error('请输入联系人');
+      } else if (!this.platform.tel) {
+        this.$message.error('请输入联系电话');
+      } else if (!this.platform.code) {
+        this.$message.error('请输入验证码');
+      } else if (!this.platform.describe) {
+        this.$message.error('请输入项目信息简述');
+      } else {
+        if (this.platform.isTel) {
+          this.subMitAdd();
+        } else {
+          this.$message.error('请输入正确的联系电话');
+        }
+      }
+    },
+    // 加入接口
+    async subMitAdd() {
+      this.confirmLoading = true;
+      try {
+        const params = {
+          param: {
+            code: this.platform.code,
+            companyName: this.platform.companyName,
+            contactName: this.platform.manName,
+            contactPhone: this.platform.tel,
+            description: this.platform.describe,
+            type: 0,
+          },
+        };
+        const res = await JoinPlatform(params);
+        const { code, msg, data } = res.data;
+        if (code === 200) {
+          this.$message.success('申请成功');
+          this.visible = false;
+          this.confirmLoading = false;
+          for (let key in this.platform) {
+            this.platform[key] = '';
+          }
+          this.platform.isTel = false;
+        } else {
+          throw msg;
+          this.confirmLoading = false;
+        }
+      } catch (error) {
+        this.$message.error(error);
+        this.confirmLoading = false;
+      }
+    },
+    // 获取验证码
+    async getCode() {
+      console.log(111);
+      try {
+        const params = {
+          phone: this.platform.tel,
+          verificationCodeId: this.picCode.verificationCodeId,
+          verificationCodeValue: this.codeNum,
+        };
+        await this.sendCode(params);
+        this.getCodeInterval();
+      } catch (error) {
+        // throw new Error(`SignIn.vue method getCode: ${error}`);
+        console.log(error);
+      }
+    },
+
+    // 验证码倒计时
+    getCodeInterval() {
+      this.showInterval = true;
+      this.codeTimer = setInterval(() => {
+        if (this.interval === 0) {
+          clearInterval(this.codeTimer);
+          this.codeTimer = null;
+          this.showInterval = false;
+          this.interval = 120;
+          return;
+        }
+        this.interval = this.interval - 1;
+      }, 1000);
+    },
+
+    // 刷新验证码
+    changePicCode() {
+      this.sendPicCode();
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.must-color {
+  color: red;
+}
+
+.code_img {
+  height: 32px;
+  width: 120px;
+}
+</style>