mobile-official/src/layout/market/release.vue

<template>
  <div id="release">
    <el-row>
      <el-col :span="24" class="info">
        <van-form @submit="onSubmit">
          <van-field name="radio" label="产品类型">
            <template #input>
              <van-radio-group v-model="form.totaltype" direction="horizontal">
                <van-radio name="0">技术</van-radio>
                <van-radio name="1">产品</van-radio>
                <van-radio name="2">服务</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field v-model="form.name" name="产品名称" label="产品名称" placeholder="产品名称" :rules="[{ required: true, message: '请填写产品名称' }]" />
          <van-field readonly clickable name="picker" :value="form.product_type_id" label="类型" placeholder="请选择类型" @click="typePicker = true" />
          <van-popup v-model="typePicker" position="bottom">
            <van-picker show-toolbar :columns="product_type_List" @confirm="onConfirm" @cancel="typePicker = false" />
          </van-popup>
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: markettype } = createNamespacedHelpers('markettype');
export default {
  name: 'release',
  props: {},
  components: {},
  data: function() {
    return {
      form: {
        totaltype: '0',
      },
      product_type_List: [],
      typePicker: false,
    };
  },
  created() {
    this.searchType();
  },
  methods: {
    ...markettype({ markettypeList: 'query' }),
    // 查询类型
    async searchType({ category = 54, ...info } = {}) {
      console.log(category);
      const res = await this.markettypeList({ category, ...info });
      if (this.$checkRes(res)) {
        // this.$set(this, `product_type_List`, res.data);
        console.log(res.data);
      }
    },
    onSubmit(values) {
      console.log(values);
    },
    // 类型
    onConfirm(value) {
      console.log(value);
      // this.$set(this.form, `product_type_id`, product_type_id);
      // this.typePicker = false;
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>