mobile-official/src/views/adminCenter/transaction/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-form>
            <van-field v-model="form.product_name" name="产品名称" label="产品名称" placeholder="产品名称" readonly />
            <van-field v-model="form.market_username" name="营销人名称" label="营销人名称" placeholder="营销人名称" readonly />
            <van-field v-model="form.username" name="购买人名称" label="购买人名称" placeholder="购买人名称" readonly />
            <van-field v-model="form.description" rows="1" autosize label="描述" type="textarea" placeholder="描述" />
            <van-field name="radio" label="状态">
              <template #input>
                <van-radio-group v-model="form.status" direction="horizontal">
                  <van-radio name="0">待审核</van-radio>
                  <van-radio name="1">通过</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <div style="margin: 16px;">
              <van-button round block type="info" @click="onSubmit">
                提交
              </van-button>
            </div>
          </van-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NavBar from '@/layout/common/topInfo.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: transaction } = createNamespacedHelpers('transaction');
const { mapActions: productpact } = createNamespacedHelpers('productpact');
export default {
  name: 'detail',
  props: {},
  components: {
    NavBar,
  },
  data: function() {
    return {
      // 头部标题
      title: '',
      // meta为true
      isleftarrow: '',
      // 返回
      navShow: true,
      form: {},
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...transaction({ transactionfetch: 'fetch', transactionlist: 'query', transactiondetele: 'detele', transactionupdate: 'update' }),
    ...productpact({ transactionQuery: 'query', productpactFetch: 'findpact', productpactUpdate: 'update' }),
    async search() {
      let res = await this.productpactFetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, 'form', res.data);
      }
    },
    // 提交审核
    async onSubmit() {
      let data = this.form;
      const res = await this.productpactUpdate(data);
      if (this.$checkRes(res)) {
        data.status = '2';
        data.id = data.transaction_id;
        const arr = await this.transactionupdate(data);
        if (this.$checkRes(arr)) {
          this.$notify({
            message: '审核成功',
            type: 'success',
          });
          this.$router.push({ path: '/adminCenter/transaction/index' });
        }
      }
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  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>