live-mobile/src/views/userCenter/matter/index.vue

<template>
  <div id="index">
    <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">
          <el-col :span="24" class="main">
            <el-col :span="24" class="one">
              <van-tabs v-model="active" animated>
                <van-tab>
                  <template #title>
                    <van-icon name="todo-list" />
                    <p>我的全部</p>
                  </template>
                  <wholeList></wholeList>
                </van-tab>
                <van-tab>
                  <template #title>
                    <van-icon name="column" />
                    <p>我的洽谈</p>
                  </template>
                  <negotiation></negotiation>
                </van-tab>
                <van-tab>
                  <template #title>
                    <van-icon name="label" />
                    <p>我的意向</p>
                  </template>
                  <intentionList @submit="submit"></intentionList>
                </van-tab>

                <van-tab>
                  <template #title>
                    <van-icon name="label" />
                    <p>我的交易</p>
                  </template>
                  <transaction></transaction>
                </van-tab>
              </van-tabs>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
    <van-popup v-model="show" position="bottom"
      ><van-form @submit="onSubmit">
        <van-field
          v-model="newform.product_name"
          name="产品名称"
          label="产品名称"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="newform.username"
          name="购买人名称"
          label="购买人名称"
          placeholder="购买人名称"
          :rules="[{ required: true, message: '请填写购买人名称' }]"
        />
        <van-field v-model="newform.market_username" name="营销人名称" label="营销人名称" placeholder="营销人名称" />
        <van-field v-model="newform.description" name="描述" label="描述" placeholder="描述" />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form></van-popup
    >
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
import NavBar from '@/layout/common/topInfo.vue';
import wholeList from './parts/wholeList.vue';
import negotiation from './parts/negotiation.vue';
import intentionList from './parts/intentionList.vue';
import transaction from './parts/transaction.vue';
const { mapActions: transactions } = createNamespacedHelpers('transaction');
const { mapActions: productpact } = createNamespacedHelpers('productpact');
export default {
  name: 'index',
  props: {},
  components: { NavBar, wholeList, negotiation, intentionList, transaction },
  data: () => ({
    // 头部标题
    title: '',
    // meta为true
    isleftarrow: '',
    // 返回
    navShow: true,
    img_path: require('@/assets/logo.png'),
    active: 0,
    show: false,
    newform: {},
  }),
  created() {},
  computed: {},
  methods: {
    ...transactions({ transactionList: 'query', transactiondtetle: 'delete', shenheupdate: 'update' }),
    ...productpact({ productpactCreate: 'create' }),
    submit(data) {
      console.log(data);
      this.show = true;
      this.$set(this, `newform`, data);
    },
    async onSubmit() {
      this.newform.status = '0';
      this.newform.transaction_id = this.newform.id;
      const res = await this.productpactCreate(this.newform);
      if (this.$checkRes(res)) {
        this.newform.status = '4';
        const arr = await this.shenheupdate(this.newform);
        if (this.$checkRes(arr)) {
          this.$message({
            message: '提交交易成功，等待管理员审核，方可交易完成',
            type: 'success',
          });
        }
      }
      this.show = false;
    },
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
};
</script>

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

    left: 10px;
    z-index: 999;
  }
}
/deep/.van-tab {
  text-align: center;
}
/deep/.van-tabs--line .van-tabs__wrap {
  height: 70px;
  margin: 0 0 10px 0;
}
/deep/.van-tab--active {
  color: red;
}
.van-icon {
  font-size: 20px;
}
/deep/.van-popup--bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
}
</style>