mobile-official/src/views/userCenter/matter/apply.vue

<template>
  <div id="apply">
    <el-row>
      <el-col :span="24">
        <span v-if="type == '0'">
          <van-form>
            <van-field v-model="form.company" name="企业名称" label="企业名称" placeholder="企业名称" readonly />
            <van-field v-model="form.phone" name="联系电话" label="联系电话" placeholder="联系电话" readonly />
            <van-field v-model="form.email" name="电子邮箱" label="电子邮箱" placeholder="电子邮箱" readonly />
            <van-field v-model="form.contacts" name="联系人" label="联系人" placeholder="联系人" />
            <van-field v-model="form.qqwx" name="QQ/微信" label="QQ/微信" placeholder="QQ/微信" />
            <van-field v-model="form.name" name="需求名称" label="需求名称" placeholder="需求名称" />
            <van-field name="radio" label="紧急程度">
              <template #input>
                <van-radio-group v-model="form.degreeurgency" direction="horizontal">
                  <van-radio name="特急">特急</van-radio>
                  <van-radio name="一般">一般</van-radio>
                  <van-radio name="长期">长期</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field readonly clickable name="picker" :value="form.field" label="所属领域" placeholder="点击选择" @click="fieldpic = true" />
            <van-popup v-model="fieldpic" position="bottom">
              <van-picker show-toolbar :columns="field" @confirm="fieldSubmit" @cancel="fieldpic = false" />
            </van-popup>
            <van-field readonly clickable name="picker" :value="form.cooperation" label="合作方式" placeholder="点击选择" @click="cooperationpic = true" />
            <van-popup v-model="cooperationpic" position="bottom">
              <van-picker show-toolbar :columns="cooperation" @confirm="cooperationSubmit" @cancel="cooperationpic = false" />
            </van-popup>
            <van-field v-model="form.budget" name="投资预算" label="投资预算" placeholder="投资预算" />
            <van-field v-model="form.requirementdesc" rows="1" autosize label="技术说明" type="textarea" placeholder="技术说明" />
            <van-field v-model="form.expect" rows="1" autosize label="预期目标" type="textarea" placeholder="预期目标" />
            <van-field v-model="form.present" rows="1" autosize label="合作要求" type="textarea" placeholder="合作要求" />
            <van-field name="expertimage" label="产品图片(6)">
              <template #input
                ><upload
                  :limit="6"
                  :data="form.image"
                  type="image"
                  :url="`/files/imgpath/upload`"
                  @upload="uploadSuccess"
                  :uploadBtn="true"
                  @delete="uploadDelete"
                ></upload>
              </template>
            </van-field>
            <div style="margin: 16px;">
              <van-button round block type="info" @click="onSubmit">
                提交
              </van-button>
            </div>
          </van-form>
        </span>
        <span v-else-if="type == '1'">
          <van-form>
            <van-field v-model="form.company" name="企业名称" label="企业名称" placeholder="企业名称" readonly />
            <van-field v-model="form.phone" name="联系电话" label="联系电话" placeholder="联系电话" readonly />
            <van-field v-model="form.email" name="电子邮箱" label="电子邮箱" placeholder="电子邮箱" readonly />
            <van-field v-model="form.contacts" name="联系人" label="联系人" placeholder="联系人" />
            <van-field v-model="form.qqwx" name="QQ/微信" label="QQ/微信" placeholder="QQ/微信" />
            <van-field v-model="form.name" name="成果名称" label="成果名称" placeholder="成果名称" />
            <van-field readonly clickable name="picker" :value="form.field" label="所属领域" placeholder="点击选择" @click="fieldpic = true" />
            <van-popup v-model="fieldpic" position="bottom">
              <van-picker show-toolbar :columns="field" @confirm="fieldSubmit" @cancel="fieldpic = false" />
            </van-popup>
            <van-field readonly clickable name="picker" :value="form.cooperation" label="合作方式" placeholder="点击选择" @click="cooperationpic = true" />
            <van-popup v-model="cooperationpic" position="bottom">
              <van-picker show-toolbar :columns="cooperation" @confirm="cooperationSubmit" @cancel="cooperationpic = false" />
            </van-popup>
            <van-field readonly clickable name="picker" :value="form.achievestatus" label="成果状态" placeholder="点击选择" @click="achievestatuspic = true" />
            <van-popup v-model="achievestatuspic" position="bottom">
              <van-picker show-toolbar :columns="achievestatus" @confirm="achievestatusOnsubmit" @cancel="achievestatuspic = false" />
            </van-popup>
            <van-field v-model="form.achieveown" name="成果权属" label="成果权属" placeholder="成果权属" />
            <van-field name="radio" label="成果来源">
              <template #input>
                <van-radio-group v-model="form.achievesource" direction="horizontal">
                  <van-radio name="国家项目">国家项目</van-radio>
                  <van-radio name="省级项目">省级项目</van-radio>
                  <van-radio name="市级项目">市级项目</van-radio>
                  <van-radio name="市级项目">市级项目</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field v-model="form.intentionprice" name="意向价格" label="意向价格" placeholder="意向价格" />
            <van-field name="patent" label="专利信息">
              <template #input>
                <el-button type="primary" size="mini" @click="addPatent">添加</el-button>
                <el-button type="primary" size="mini" @click="viewPatent">查看</el-button>
              </template>
            </van-field>
            <!-- <van-field v-model="form.roadshow" name="项目路演" label="项目路演" placeholder="项目路演" /> -->
            <van-field v-model="form.achievebrief" rows="1" autosize label="成果简介" type="textarea" placeholder="成果简介" />
            <van-field v-model="form.features" rows="1" autosize label="技术特点" type="textarea" placeholder="技术特点" />
            <van-field v-model="form.team" rows="1" autosize label="技术团队" type="textarea" placeholder="技术团队" />
            <van-field v-model="form.expectations" rows="1" autosize label="商业预期" type="textarea" placeholder="商业预期" />
            <van-field v-model="form.condition" rows="1" autosize label="合作要求" type="textarea" placeholder="合作要求" />
            <van-field name="expertimage" label="产品图片(6)">
              <template #input
                ><upload
                  :limit="6"
                  :data="form.image"
                  type="image"
                  :url="`/files/imgpath/upload`"
                  @upload="uploadSuccess"
                  :uploadBtn="true"
                  @delete="uploadDelete"
                ></upload>
              </template>
            </van-field>
            <div style="margin: 16px;">
              <van-button round block type="info" @click="onSubmit">
                提交
              </van-button>
            </div>
          </van-form>
        </span>
        <span v-else-if="type == '2'">
          <van-form>
            <van-field v-model="form.company" name="企业名称" label="企业名称" placeholder="企业名称" readonly />
            <van-field v-model="form.phone" name="联系电话" label="联系电话" placeholder="联系电话" readonly />
            <van-field v-model="form.email" name="电子邮箱" label="电子邮箱" placeholder="电子邮箱" readonly />
            <van-field v-model="form.contacts" name="联系人" label="联系人" placeholder="联系人" />
            <van-field v-model="form.qqwx" name="QQ/微信" label="QQ/微信" placeholder="QQ/微信" />
            <van-field v-model="form.name" name="信息名称" label="信息名称" placeholder="信息名称" />
            <van-field name="radio" label="信息属性">
              <template #input>
                <van-radio-group v-model="form.messattribute" direction="horizontal">
                  <van-radio name="提供方">提供方</van-radio>
                  <van-radio name="需求方">需求方</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field name="radio" label="需求程度">
              <template #input>
                <van-radio-group v-model="form.demand" direction="horizontal">
                  <van-radio name="特急">特急</van-radio>
                  <van-radio name="一般">一般</van-radio>
                  <van-radio name="长期">长期</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field v-model="form.informationdesc" rows="1" autosize label="信息描述" type="textarea" placeholder="信息描述" />
            <van-field v-model="form.coreelements" rows="1" autosize label="核心要素" type="textarea" placeholder="核心要素" />
            <van-field v-model="form.priceinfo" rows="1" autosize label="价格信息" type="textarea" placeholder="价格信息" />
            <van-field v-model="form.businessexpect" rows="1" autosize label="商业预期" type="textarea" placeholder="商业预期" />
            <div style="margin: 16px;">
              <van-button round block type="info" @click="onSubmit">
                提交
              </van-button>
            </div>
          </van-form>
        </span>
      </el-col>
    </el-row>
    <van-dialog v-model="show" title="添加专利信息" :showConfirmButton="false" :closeOnClickOverlay="true">
      <van-form>
        <van-field v-model="patentform.patentinfo" name="名称" label="名称" placeholder="名称" />
        <van-field name="radio" label="专利状态">
          <template #input>
            <van-radio-group v-model="patentform.patentstatus" direction="horizontal">
              <van-radio name="已申请">已申请</van-radio>
              <van-radio name="已授权">已授权</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="info" @click="patentSubmit">
            提交
          </van-button>
        </div>
      </van-form>
    </van-dialog>
    <van-dialog v-model="patentshow" title="查看专利信息" :showConfirmButton="false" :closeOnClickOverlay="true">
      <div class="patentList" v-for="(item, index) in patentList" :key="index">
        <p class="textOver">{{ item.patentinfo }}</p>
        <p>专利状态：{{ item.patentstatus }}</p>
        <p>
          <el-button type="primary" size="mini" @click="delPatent(index, item)">刪除</el-button>
        </p>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import upload from '@/components/upload.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'apply',
  props: {
    type: { type: String, default: '0' },
    form: { type: Object },
    fieldList: { type: Array },
    cooperationList: { type: Array },
    achievestatusList: { type: Array },
  },
  components: {
    upload,
  },
  data: function() {
    return {
      field: [],
      fieldpic: false,
      cooperation: [],
      cooperationpic: false,
      achievestatus: [],
      achievestatuspic: false,
      // 专利信息
      show: false,
      patentform: {},
      patentshow: false,
      patentList: [],
    };
  },
  created() {},
  methods: {
    // 重组数组
    seachfield() {
      let field = this.fieldList.map(item => item.name);
      this.$set(this, `field`, field);
    },
    // 所屬領域
    fieldSubmit(value) {
      this.$set(this.form, `field`, value);
      this.fieldpic = false;
    },
    // 重组数组
    searchcooperation() {
      let cooperation = this.cooperationList.map(item => item.name);
      this.$set(this, `cooperation`, cooperation);
    },
    // 合作方式
    cooperationSubmit(value) {
      this.$set(this.form, `cooperation`, value);
      this.cooperationpic = false;
    },
    // 重组数组
    searchachievestatus() {
      let achievestatus = this.achievestatusList.map(item => item.name);
      this.$set(this, `achievestatus`, achievestatus);
    },
    // 成果状态
    achievestatusOnsubmit(value) {
      this.$set(this.form, `achievestatus`, value);
      this.achievestatuspic = false;
    },
    // 图片上传
    uploadSuccess({ type, data }) {
      let arr = _.get(this.form, type);
      if (_.isArray(arr)) {
        let datas = { name: data.name, url: data.uri };
        this.form[type].push({ name: data.name, url: data.uri });
      } else {
        let newArr = [{ name: data.name, url: data.uri }];
        this.$set(this.form, `${type}`, newArr);
      }
    },
    // 删除图片
    uploadDelete(index) {
      this.form.image.splice(index, 1);
    },
    // 添加专利信息
    addPatent() {
      this.show = true;
    },
    // 提交专利信息
    patentSubmit() {
      this.patentList.push(this.patentform);
      this.show = false;
    },
    // 查看专利信息
    viewPatent() {
      this.patentshow = true;
    },
    // 删除专利信息
    delPatent(index, val) {
      this.patentList.splice(index, 1);
      this.$notify({
        message: '删除成功',
        type: 'success',
      });
      this.patentshow = false;
    },
    onSubmit() {
      this.form.patent = this.patentList;
      this.$emit('onSubmit', { data: this.form });
    },
    // 查询专利信息
    searchpatent() {
      let data = this.form;
      if (data.patent) {
        console.log(data.patent);
        this.$set(this, `patentList`, data.patent);
      }
    },
  },
  watch: {
    fieldList: {
      immediate: true,
      deep: true,
      handler(val) {
        this.seachfield();
      },
    },
    cooperationList: {
      immediate: true,
      deep: true,
      handler(val) {
        this.searchcooperation();
      },
    },
    achievestatusList: {
      immediate: true,
      deep: true,
      handler(val) {
        this.searchachievestatus();
      },
    },
    form: {
      immediate: true,
      deep: true,
      handler(val) {
        this.searchpatent();
      },
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.patentList {
  padding: 0 10px;
  border-bottom: 1px dashed #ccc;
  p {
    font-size: 16px;
    color: #666;
    padding: 0 0 5px 0;
  }
  p:nth-child(1) {
    font-size: 18px;
    color: #000;
    font-weight: bold;
  }
  p:nth-child(3) {
    text-align: center;
  }
}
</style>