更新

src/layout/market/release.vue

@@ -2,70 +2,165 @@
   <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-form ref="form" :model="form" :rules="rules" label-width="80px">
+          <el-form-item label="产品类型" prop="totaltype">
+            <el-select v-model="form.totaltype" placeholder="请选择产品类型">
+              <el-option v-for="(item, index) in totaltype_list" :key="index" :value="item.value" :label="item.name"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="产品名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入产品名称"></el-input>
+          </el-form-item>
+          <el-form-item label="类型">
+            <el-select v-model="form.product_type_id" filterable @change="selectChild">
+              <el-option v-for="(item, index) in columnList" :key="index" :value="item.id" :label="item.name"></el-option>
+            </el-select>
+          </el-form-item>
+          <span v-if="form.totaltype == 0">
+            <el-form-item label="研发阶段">
+              <el-select v-model="form.phase" placeholder="请选择研发阶段">
+                <el-option label="阶段成果" value="1"></el-option>
+                <el-option label="最终成果" value="2"></el-option>
+              </el-select>
+            </el-form-item>
+          </span>
+          <el-form-item label="产品简介">
+            <el-input v-model="form.introduction" placeholder="请输入产品简介"></el-input>
+          </el-form-item>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="产品单价">
+                <el-input v-model="form.price" placeholder="产品单价"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="产品单位">
+                <el-select v-model="form.priceunit" placeholder="单位">
+                  <el-option v-for="(item, index) in priceunit_list" :key="index" :label="item.name" :value="item.name"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="产品图片" prop="image">
+            <upload
+              :limit="1"
+              :data="form.image"
+              :uploadBtn="true"
+              type="image"
+              :url="`/files/image/upload`"
+              @upload="uploadSuccess"
+              @delete="uploadDelete"
+            ></upload>
+          </el-form-item>
+          <span v-if="form.totaltype == 0 || form.totaltype == 2">
+            <el-form-item label="应用领域">
+              <el-input v-model="form.field" placeholder="请输入应用领域"></el-input>
+            </el-form-item>
+          </span>
+          <el-form-item label="服务范围">
+            <el-input type="textarea" v-model="form.scope" placeholder="请输入服务范围"></el-input>
+          </el-form-item>
+          <el-form-item label="交易方式">
+            <el-select v-model="form.business" placeholder="请选择交易方式">
+              <el-option label="公用" value="0"></el-option>
+              <el-option label="竞价" value="1"></el-option>
+              <el-option label="转让" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="联系人" prop="contact_user">
+            <el-input v-model="form.contact_user" placeholder="请输入联系人"></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话" prop="contact_tel">
+            <el-input v-model="form.contact_tel" placeholder="请输入联系电话"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">发布</el-button>
+          </el-form-item>
+        </el-form>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import upload from '@/components/upload.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions: markettype } = createNamespacedHelpers('markettype');
+const { mapActions: maarkettype } = createNamespacedHelpers('maarkettype');
+
 export default {
   name: 'release',
   props: {},
-  components: {},
+  components: {
+    upload,
+  },
   data: function() {
     return {
-      form: {
-        totaltype: '0',
+      form: {},
+      // 产品类型
+      totaltype_list: [
+        { name: '技术', value: '0' },
+        { name: '产品', value: '1' },
+        { name: '服务', value: '2' },
+      ],
+      // 类型
+      columnList: [],
+      // 单位
+      priceunit_list: [
+        {
+          name: '公斤',
+        },
+        {
+          name: '套',
+        },
+        {
+          name: '件',
+        },
+      ],
+      rules: {
+        totaltype: [{ required: true, message: '请选择产品类型', trigger: 'blur' }],
+        name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
       },
-      product_type_List: [],
-      typePicker: false,
     };
   },
   created() {
     this.searchType();
   },
   methods: {
-    ...markettype({ markettypeList: 'query' }),
+    ...maarkettype(['query']),
+    // 提交发布
+    onSubmit() {
+      console.log(this.form);
+    },
     // 查询类型
     async searchType({ category = 54, ...info } = {}) {
-      console.log(category);
-      const res = await this.markettypeList({ category, ...info });
+      const res = await this.query({ category, ...info });
       if (this.$checkRes(res)) {
-        // this.$set(this, `product_type_List`, res.data);
-        console.log(res.data);
+        this.$set(this, `columnList`, res.data);
       }
     },
-    onSubmit(values) {
-      console.log(values);
+    // 类型选择
+    selectChild(product_type_id) {
+      let res = this.columnList.filter(fil => fil.id === product_type_id);
+      if (res.length > 0) {
+        this.$set(this.form, `product_type_name`, res[0].name);
+      }
+      this.$forceUpdate();
+    },
+
+    // 图片
+    uploadSuccess({ type, data }) {
+      let arr = _.get(this.form, type);
+      if (_.isArray(arr)) {
+        let datas = { name: data.name, url: data.uri };
+        this.form[type].push({ name: data.name, url: data.uri });
+      } else {
+        let newArr = [{ name: data.name, url: data.uri }];
+        this.$set(this.form, `${type}`, newArr);
+      }
     },
-    // 类型
-    onConfirm(value) {
-      console.log(value);
-      // this.$set(this.form, `product_type_id`, product_type_id);
-      // this.typePicker = false;
+    // 删除图片
+    uploadDelete(index) {
+      this.form.image.splice(index, 1);
     },
   },
   computed: {
@@ -80,4 +175,9 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.info {
+  margin: 0 0px 50px 0;
+  padding: 15px 0 0 0;
+}
+</style>

src/store/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import marketproduct from '@common/store/market/marketproduct';
 import expertsuser from '@common/store/market/exportuser';
-import markettype from '@common/store/market/markettype';
+import maarkettype from '@common/store/market/markettype';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -12,6 +12,6 @@ export default new Vuex.Store({
   modules: {
     marketproduct,
     expertsuser,
-    markettype,
+    maarkettype,
   },
 });

src/util/axios-wrapper.js

@@ -37,29 +37,19 @@ export default class AxiosWrapper {
     });
     return uri;
   }
-  //替换路由方法
-  static routerChange(uri, router = {}) {
-    let keys = Object.keys(router);
-    keys.forEach(key => {
-      uri = _.replace(uri, `{${key}}`, router[key]);
-    });
-    return uri;
-  }
 
-  $get(uri, router, query, options) {
-    return this.$request(uri, null, query, options, router);
+  $get(uri, query, options) {
+    return this.$request(uri, null, query, options);
   }
 
-  $post(uri, data = {}, router, query, options) {
-    return this.$request(uri, data, query, options, router);
+  $post(uri, data = {}, query, options) {
+    return this.$request(uri, data, query, options);
   }
-
   $delete(uri, data = {}, router, query, options = {}) {
     options = { ...options, method: 'delete' };
     return this.$request(uri, data, query, options, router);
   }
-
-  async $request(uri, data, query, options, router) {
+  async $request(uri, data, query, options) {
     // TODO: 合并query和options
     if (_.isObject(query) && _.isObject(options)) {
       options = { ...options, params: query, method: 'get' };
@@ -70,11 +60,7 @@ export default class AxiosWrapper {
     }
     if (!options) options = {};
     if (options.params) options.params = trimData(options.params);
-    let url = AxiosWrapper.merge(uri, options.params);
-    //处理url部分需要替换参数的情况
-    if (_.isObject(router)) {
-      url = AxiosWrapper.routerChange(url, router);
-    }
+    const url = AxiosWrapper.merge(uri, options.params);
     currentRequests += 1;
     // Indicator.open({
     //   spinnerType: 'fading-circle',
@@ -84,9 +70,7 @@ export default class AxiosWrapper {
       const axios = Axios.create({
         baseURL: this.baseUrl,
       });
-      if (sessionStorage.getItem('token')) {
-        axios.defaults.headers.common.Authorization = util.token;
-      }
+      axios.defaults.headers.common.Authorization = util.token;
       let res = await axios.request({
         method: isNullOrUndefined(data) ? 'get' : 'post',
         url,