check-work/src/views/IncubationPlatform/Children/Services.vue

<template>
  <div>
    <h-nav />
    <div class="inner my-1">
      <bread-crumb :arr="arr" />
    </div>
    <banner :show-page="showPage" />
    <div class="flow-path">
      <div class="flow-title">服务流程</div>
      <div class="flow-content1">
        <img src="~assets/image.png" style="width: 100%" />
      </div>
    </div>
    <div class="inner d-flex flex-wrap">
      <div
        :class="(index + 1) % 4 === 0 ? 'margin-0' : ''"
        :key="index"
        class="item-box mb-8 pointer d-flex flex-column"
        style="position: relative"
        v-for="(item, index) in list"
      >
        <img
          :src="item.picUrl"
          :title="item.intro"
          @click="showModal(item.id)"
          style="height: 220px; width: 100%; border: 1px solid #ccc"
        />
        <p @click="showModal(item.id)" class="font-24 my-4">{{ item.name }}</p>
        <p class="font-16 mb-4 textColor line-height-30 item-intro">{{ item.intro }}</p>
        <p @click="showDiv(index)" class="baseColor d-flex flex-row-reverse">{{ showList[index] }}</p>
      </div>
    </div>
    <div class="inner">
      <a-pagination
        :current="current"
        :page-size="pageSize"
        :total="total"
        @change="onShowSizeChange"
        class="pagination"
        show-less-items
        show-quick-jumper
        v-show="total > 8"
      />
    </div>
    <a-modal :confirm-loading="confirmLoading" :visible="visible" @cancel="handleCancel" @ok="handleOk" title="产品购买" 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="需求描述">
          <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"
            :before-upload="beforeUpload"
            @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 { mapMutations, mapState, mapActions } from 'vuex';
import { selService, serviceApply, upload } from 'config/api';
import Banner from 'components/Banner/Banner.vue';
import HNav from './../components/HNav.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';

const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 18 },
};
const formTailLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18, offset: 6 },
};
export default {
  name: 'Services',
  components: { Banner, HNav, BreadCrumb },
  data() {
    return {
      title: '创业服务',
      showPage: 46,
      arr: [
        { name: '孵化平台', url: '/IncubationPlatform/MakerSpace' },
        { name: '创业服务', url: '/IncubationPlatform/Services' },
      ],
      list: [],
      current: 1,
      pageSize: 8,
      total: 0,
      intro: '',
      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: '请输入正确的手机号' },
      ],
      showList: ['查看全部', '查看全部', '查看全部', '查看全部'],
      typeData: {
        type: 0,
        id: '',
      },
    };
  },
  computed: mapState('user', ['picCode']),

  async created() {
    this.getService();
    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: {
    ...mapMutations('home', ['setServiceArr']),
    ...mapActions('user', ['sendCode', 'sendPicCode']),
    ...mapActions('home', ['getUserSer']),
    // 改变单当前页数
    onShowSizeChange(current, size) {
      this.current = current;
    },

    // 获取服务列表
    async getService() {
      try {
        const params = { param: { serviceType: 2 } };
        const res = await selService(params);
        const { code, data, msg } = res.data;
        if (code === 200) {
          this.list = data;
        }
      } catch (error) {
        // console.log(data);
      }
    },

    // 查看 服务 详情
    jump(id) {
      // console.log(id);
      this.setServiceArr([]);
      this.setServiceArr(this.arr);
      this.$router.push({
        path: '/NewPlatform/ServiceDet',
        name: 'ServiceDet',
        params: { id },
      });
    },
    // 显示表单输入框
    showModal(id) {
      this.typeData.id = id;
      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.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();
    },
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isLt5M) {
          this.$message.warning('上传附件大小不能超过5m！');
          return reject(false);
        }
        return resolve(true);
      });
    },
    fileChange(info) {
      this.fileList = info.fileList;
    },
    showDiv(index) {
      var divs = document.getElementsByClassName('item-intro');
      let list = ['查看全部', '查看全部', '查看全部', '查看全部'];
      for (let i = 0; i < divs.length; i++) {
        if (index === i) {
          if (divs[index].style.height === '90px' || divs[index].style.height === '') {
            list[i] = '收起';
            divs[i].style.height = 'auto';
          } else {
            divs[i].style.height = '90px';
            list[i] = '查看全部';
          }
        } else {
          divs[i].style.height = '90px';
          list[i] = '查看全部';
        }
      }
      this.showList = list;
    },
  },
};
</script>

<style lang="stylus" scoped>
.inner {
  margin: 40px auto;
}

.pagination {
  text-align: right;
}

.item-box {
  width: 22%;
  margin-right: 4%;
  border-radius: 4px;
  text-align: center;
}

.margin-0 {
  margin-right: 0 !important;
}

.item-intro {
  display: -webkit-box;
  // -webkit-line-clamp: 3;
  // -webkit-box-orient: vertical;
  text-align: left;
  height: 90px;
  overflow: hidden;
}
</style>