接口列表

src/views/port/port/employee.vue

@@ -1,16 +1,18 @@
 <template>
   <div>
-    <el-row>
+    <el-row :gutter="50">
-      <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
+      <el-col :span="7" v-for="connector in connectorList" v-if="connectorList.length !== 0">
-        <el-card :body-style="{ padding: '0px' }">
+        <el-card class="box-card" style="margin-top: 15px;width: 500px; height: 700px;" shadow="hover">
-          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
+          <div slot="header" class="clearfix">
-          <div style="padding: 14px;">
+            <h1 style="font-weight: bold">{{connector.connectorName}}</h1>
-            <span>好吃的汉堡</span>
+            <el-button type="primary" style="float: right; padding: 10px 10px" @click="buyPhone(index)">购买</el-button>
-            <div class="bottom clearfix">
-              <time class="time">{{ currentDate }}</time>
-              <el-button type="text" class="button">操作按钮</el-button>
-            </div>
           </div>
+          <span style="font-weight: bold;font-size: 20px">产品图片:</span><br>
+          <el-image style="width: 300px; height: 300px" :src="connector.connectorPicture" :fit="fit"></el-image><br>
+          <span style="font-weight: bold;font-size: 20px">产品介绍：</span>
+          {{connector.connectorDescribe}}<br>
+          <span style="font-weight: bold;font-size: 20px">价格：</span>
+          {{connector.connectorPrice}}
         </el-card>
       </el-col>
     </el-row>
@@ -21,6 +23,7 @@
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
 import {findConnectorList} from "@/api/port/port";
+import index from "vuex";
 export default {
   //import引入的组件需要注入到对象中才能使用"
   components: {},
@@ -29,24 +32,33 @@ export default {
     //这里存放数据"
 
     return {
-      ConnectorList:[],
+      connectorList:[],
       form:{},
     };
   },
   //计算属性 类似于data概念",
-  computed: {},
+  computed: {
+    index() {
+      return index
+    },
+    node() {
+      return node
+    }
+  },
   //监控data中的数据变化",
   watch: {},
   //方法集合",
   methods: {
     findConnectorList(){
       findConnectorList(this.form).then((res)=>{
-        this.ConnectorList=res.data;
+        this.connectorList=res.data;
+        console.log(res.data);
       })
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）",
   created() {
+    this.findConnectorList();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）",
   mounted() {