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

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <van-tabs v-model="active" @click="clickbtn">
            <van-tab title="科技需求">
              <producInfo
                :type="type"
                :form="form"
                @onSubmit="onSubmit"
                :fieldList="fieldList"
                :achievestatusList="achievestatusList"
                :cooperationList="cooperationList"
              ></producInfo>
            </van-tab>
            <van-tab title="技术成果">
              <producInfo
                :type="type"
                :form="form"
                @onSubmit="onSubmit"
                :fieldList="fieldList"
                :achievestatusList="achievestatusList"
                :cooperationList="cooperationList"
              ></producInfo>
            </van-tab>
            <van-tab title="商务服务">
              <producInfo
                :type="type"
                :form="form"
                @onSubmit="onSubmit"
                :fieldList="fieldList"
                :achievestatusList="achievestatusList"
                :cooperationList="cooperationList"
              ></producInfo>
            </van-tab>
          </van-tabs>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import producInfo from './parts/producInfo.vue';
import NavBar from '@/layout/common/topInfo.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: markettype } = createNamespacedHelpers('markettype');
const { mapActions: marketuser } = createNamespacedHelpers('marketuser');
const { mapActions: exportuser } = createNamespacedHelpers('exportuser');
const { mapActions: product } = createNamespacedHelpers('product');
export default {
  name: 'detail',
  props: {},
  components: {
    NavBar,
    producInfo,
  },
  data: function() {
    return {
      // 头部标题
      title: '',
      // meta为true
      isleftarrow: '',
      // 返回
      navShow: true,
      active: 0,
      type: '0',
      form: {},
      // 字典表
      fieldList: [],
      achievestatusList: [],
      cooperationList: [],
    };
  },
  async created() {
    await this.searchtype();
    await this.searchinfo();
    if (this.id) {
      await this.searchproductinfo();
    }
  },
  methods: {
    ...markettype({ markettypeList: 'query' }),
    ...marketuser({ marketuserfetch: 'fetch' }),
    ...exportuser({ exportuserfetch: 'fetch' }),
    ...product({ productFetch: 'fetch', productCreate: 'create', productUpdate: 'update' }),
    // 查询企业详情
    async searchinfo() {
      let user = this.user;
      if (user.role == '4' || user.role == '5') {
        let res = await this.marketuserfetch(user.userid);
        if (res.errcode === 0) {
          let message = {
            company: res.data.name,
            phone: res.data.phone,
            email: res.data.email,
            companytype: res.data.companytype,
            companydate: res.data.companydate,
            companycapital: res.data.companycapital,
          };
          this.$set(this, `form`, message);
        }
      } else {
        let res = await this.exportuserfetch(user.userid);
        if (res.errcode === 0) {
          let message = {
            company: res.data.name,
            phone: res.data.phone,
            email: res.data.email,
            qqwx: res.data.qqwx,
          };
          this.$set(this, `form`, message);
        }
      }
    },
    // 查询产品详情
    async searchproductinfo() {
      let res = await this.productFetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, `form`, res.data);
      }
    },
    // 查询字典表
    async searchtype() {
      // 所属领域;
      let res = await this.markettypeList({ category: '01' });
      if (this.$checkRes(res)) {
        this.$set(this, `fieldList`, res.data);
      }
      // 成果状态;
      res = await this.markettypeList({ category: '02' });
      if (this.$checkRes(res)) {
        this.$set(this, `achievestatusList`, res.data);
      }
      // 合作方式;
      res = await this.markettypeList({ category: '03' });
      if (this.$checkRes(res)) {
        this.$set(this, `cooperationList`, res.data);
      }
    },
    // 选择类型
    clickbtn(name) {
      this.$set(this, `type`, String(name));
    },
    // 提交
    async onSubmit({ data }) {
      data.type = this.type;
      data.userid = this.user.uid;
      let res = await this.productCreate(data);
      if (this.$checkRes(res)) {
        this.$notify({
          message: '保存草稿成功',
          type: 'success',
        });
        this.$router.push({ path: '/userCenter/myProduct/index' });
      }
    },
    // 监听显示类型
    changetype() {
      let type = this.producttype;
      this.$set(this, `active`, Number(type));
      this.$set(this, `type`, type);
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    producttype() {
      return this.$route.query.type;
    },
  },
  watch: {
    producttype: {
      immediate: true,
      deep: true,
      handler(val) {
        this.changetype();
      },
    },
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
}
.main {
  min-height: 570px;
}
</style>