web-test/src/views/userCenter/productInfo/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="leftTop"> <span>|</span> <span>我的发布</span> </el-col>
        <el-col :span="24" class="info">
          <el-col :span="24" class="infoOne" v-if="display">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="待发布" name="first">
                <stay @editBtn="editBtn"></stay>
              </el-tab-pane>
              <el-tab-pane label="审核中" name="second">
                <statusIn></statusIn>
              </el-tab-pane>
              <el-tab-pane label="已发布" name="third">
                <already></already>
              </el-tab-pane>
            </el-tabs>
            <el-button type="primary" size="mini" class="add" @click="add">信息发布</el-button>
          </el-col>
          <el-col :span="24" class="infoTwo" v-else>
            <infoRelease @back="back" :form="form" @draftBtn="draftBtn" @submitBtn="submitBtn"></infoRelease>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import stay from './part/stay.vue';
import statusIn from './part/statusIn.vue';
import already from './part/already.vue';
import infoRelease from './part/infoRelease.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: mapMarketproduct } = createNamespacedHelpers('marketproduct');
export default {
  name: 'index',
  props: {},
  components: {
    stay, //待发布
    statusIn, //审核中
    already, //已发布
    infoRelease, //信息发布
  },
  data: function() {
    return {
      activeName: 'first',
      // 发布信息
      display: true,
      form: {},
    };
  },
  created() {},
  methods: {
    ...mapMarketproduct({ productFetch: 'fetch', productCreate: 'create', productUpdate: 'update' }),
    // 保存草稿
    async draftBtn({ data }) {
      data.userid = this.user.uid;
      if (data.id) {
        let res = await this.productUpdate(data);
        if (this.$checkRes(res)) {
          this.$message({
            message: '草稿修改成功',
            type: 'success',
          });
          window.location.reload();
        } else {
          this.$message.error('草稿保存失败');
        }
      } else {
        let res = await this.productCreate(data);
        if (this.$checkRes(res)) {
          this.$message({
            message: '草稿创建成功',
            type: 'success',
          });
          window.location.reload();
        } else {
          this.$message.error('草稿创建失败');
        }
      }
    },
    // 信息发布
    async submitBtn({ data }) {
      if (data.id) {
        data.status = '0';
        data.userid = this.user.uid;
        let res = await this.productUpdate(data);
        if (this.$checkRes(res)) {
          this.$message({
            message: '信息发布成功',
            type: 'success',
          });
          window.location.reload();
        } else {
          this.$message.error('信息发布失败');
        }
      } else {
        data.status = '0';
        data.userid = this.user.uid;
        let res = await this.productCreate(data);
        if (this.$checkRes(res)) {
          this.$message({
            message: '信息发布成功',
            type: 'success',
          });
          window.location.reload();
        } else {
          this.$message.error('信息发布失败');
        }
      }
    },
    // 信息发布
    add() {
      this.display = false;
    },
    // 返回
    back() {
      this.display = true;
    },
    // 修改信息
    editBtn(data) {
      this.$set(this, `form`, data);
      this.$set(this, `product_args`, data.product_args);
      this.display = false;
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.leftTop {
  font-size: 18px;
  width: 96%;
  height: 41px;
  line-height: 35px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  bottom: 1px;
  margin: 10px;
  font-weight: 600;
  color: #22529a;
}
.info {
  padding: 0 40px 0 10px;
  .infoOne {
    position: relative;
    .add {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
</style>