1

src/views/index.vue

@@ -6,7 +6,10 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          公众号首页
+          <van-field readonly clickable name="picker" :value="value" label="选择器" placeholder="点击选择城市" @click="showPicker = true" />
+          <van-popup v-model="showPicker" position="bottom">
+            <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
+          </van-popup>
         </el-col>
         <el-col :span="24" class="foot">
           <footInfo></footInfo>
@@ -35,10 +38,22 @@ export default {
       isleftarrow: '',
       // 返回
       navShow: true,
+      value: '',
+      showPicker: false,
+      columns: [
+        { id: '1', name: '1' },
+        { id: '2', name: '2' },
+        { id: '3', name: '3' },
+        { id: '4', name: '4' },
+      ],
     };
   },
   created() {},
-  methods: {},
+  methods: {
+    onConfirm(value) {
+      console.log(value);
+    },
+  },
   computed: {
     ...mapState(['user']),
   },

src/views/userCenter/myProduct/parts/producInfo.vue

@@ -21,11 +21,11 @@
             </van-field>
             <van-field readonly clickable name="picker" :value="form.field" label="所属领域" placeholder="点击选择" @click="fieldpic = true" />
             <van-popup v-model="fieldpic" position="bottom">
-              <van-picker show-toolbar :columns="field" @confirm="fieldSubmit" @cancel="fieldpic = false" />
+              <van-picker show-toolbar :columns="fieldList" @confirm="fieldSubmit" @cancel="fieldpic = false" value-key="name" />
             </van-popup>
             <van-field readonly clickable name="picker" :value="form.cooperation" label="合作方式" placeholder="点击选择" @click="cooperationpic = true" />
             <van-popup v-model="cooperationpic" position="bottom">
-              <van-picker show-toolbar :columns="cooperation" @confirm="cooperationSubmit" @cancel="cooperationpic = false" />
+              <van-picker show-toolbar :columns="cooperationList" @confirm="cooperationSubmit" @cancel="cooperationpic = false" value-key="name" />
             </van-popup>
             <van-field v-model="form.budget" name="投资预算" label="投资预算" placeholder="投资预算" />
             <van-field v-model="form.requirementdesc" rows="1" autosize label="技术说明" type="textarea" placeholder="技术说明" />
@@ -61,15 +61,15 @@
             <van-field v-model="form.name" name="成果名称" label="成果名称" placeholder="成果名称" />
             <van-field readonly clickable name="picker" :value="form.field" label="所属领域" placeholder="点击选择" @click="fieldpic = true" />
             <van-popup v-model="fieldpic" position="bottom">
-              <van-picker show-toolbar :columns="field" @confirm="fieldSubmit" @cancel="fieldpic = false" />
+              <van-picker show-toolbar :columns="fieldList" @confirm="fieldSubmit" @cancel="fieldpic = false" value-key="name" />
             </van-popup>
             <van-field readonly clickable name="picker" :value="form.cooperation" label="合作方式" placeholder="点击选择" @click="cooperationpic = true" />
             <van-popup v-model="cooperationpic" position="bottom">
-              <van-picker show-toolbar :columns="cooperation" @confirm="cooperationSubmit" @cancel="cooperationpic = false" />
+              <van-picker show-toolbar :columns="cooperationList" @confirm="cooperationSubmit" @cancel="cooperationpic = false" value-key="name" />
             </van-popup>
             <van-field readonly clickable name="picker" :value="form.achievestatus" label="成果状态" placeholder="点击选择" @click="achievestatuspic = true" />
             <van-popup v-model="achievestatuspic" position="bottom">
-              <van-picker show-toolbar :columns="achievestatus" @confirm="achievestatusOnsubmit" @cancel="achievestatuspic = false" />
+              <van-picker show-toolbar :columns="achievestatusList" @confirm="achievestatusOnsubmit" @cancel="achievestatuspic = false" value-key="name" />
             </van-popup>
             <van-field v-model="form.achieveown" name="成果权属" label="成果权属" placeholder="成果权属" />
             <van-field name="radio" label="成果来源">
@@ -200,11 +200,8 @@ export default {
   },
   data: function() {
     return {
-      field: [],
       fieldpic: false,
-      cooperation: [],
       cooperationpic: false,
-      achievestatus: [],
       achievestatuspic: false,
       // 专利信息
       show: false,
@@ -215,34 +212,19 @@ export default {
   },
   created() {},
   methods: {
-    // 重组数组
-    seachfield() {
-      let field = this.fieldList.map(item => item.name);
-      this.$set(this, `field`, field);
-    },
     // 所屬領域
     fieldSubmit(value) {
-      this.$set(this.form, `field`, value);
+      this.$set(this.form, `field`, value.name);
       this.fieldpic = false;
     },
-    // 重组数组
-    searchcooperation() {
-      let cooperation = this.cooperationList.map(item => item.name);
-      this.$set(this, `cooperation`, cooperation);
-    },
     // 合作方式
     cooperationSubmit(value) {
-      this.$set(this.form, `cooperation`, value);
+      this.$set(this.form, `cooperation`, value.name);
       this.cooperationpic = false;
     },
-    // 重组数组
-    searchachievestatus() {
-      let achievestatus = this.achievestatusList.map(item => item.name);
-      this.$set(this, `achievestatus`, achievestatus);
-    },
     // 成果状态
     achievestatusOnsubmit(value) {
-      this.$set(this.form, `achievestatus`, value);
+      this.$set(this.form, `achievestatus`, value.name);
       this.achievestatuspic = false;
     },
     // 图片上传
@@ -296,27 +278,6 @@ export default {
     },
   },
   watch: {
-    fieldList: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        this.seachfield();
-      },
-    },
-    cooperationList: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        this.searchcooperation();
-      },
-    },
-    achievestatusList: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        this.searchachievestatus();
-      },
-    },
     form: {
       immediate: true,
       deep: true,