From 772fbd7b6d354befc168f93a73178e583f1537c8 Mon Sep 17 00:00:00 2001
From: WeiRan <2392355487@qq.com>
Date: Sun, 25 Aug 2024 19:56:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=B0=83=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/market/myapi.js            |  10 +++
 src/router/index.js                |  14 ++-
 src/views/market/apitest/index.vue | 131 +++++++++++++++++++++++++++++
 src/views/market/myapi/index.vue   |  68 +++++++++++++--
 src/views/market/product/index.vue |  59 ++++++++-----
 5 files changed, 254 insertions(+), 28 deletions(-)
 create mode 100644 src/api/market/myapi.js
 create mode 100644 src/views/market/apitest/index.vue

diff --git a/src/api/market/myapi.js b/src/api/market/myapi.js
new file mode 100644
index 0000000..8bf5624
--- /dev/null
+++ b/src/api/market/myapi.js
@@ -0,0 +1,10 @@
+import request from "@/utils/request";
+
+export function selectmyapiList(data){
+  return request({
+    url:"/market/myapi/list",
+    method: "POST",
+    data: data
+  })
+}
+
diff --git a/src/router/index.js b/src/router/index.js
index 3d64cd3..718fccc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -91,7 +91,19 @@ export const constantRoutes = [
         meta: {title: '个人中心', icon: 'user'}
       }
     ]
-  }
+  },
+  {
+    path: '/apitest',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'apitest',
+        component: () => import('@/views/market/apitest/index.vue'),
+        meta: { title: 'API文档', icon: 'form' }
+      }
+    ]
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载
diff --git a/src/views/market/apitest/index.vue b/src/views/market/apitest/index.vue
new file mode 100644
index 0000000..331550d
--- /dev/null
+++ b/src/views/market/apitest/index.vue
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24"><div class="grid-content bg-purple-dark">
+        <el-form  ref="form" :model="myapi" label-width="120px" :rules="rules">
+          <el-form-item label="产品名称:" >
+            {{myapi.productName}}
+          </el-form-item>
+          <el-form-item label="产品价格:">
+            {{myapi.productPrice}}元/次
+          </el-form-item>
+          <el-form-item label="产品介绍:">
+            {{myapi.productContent}}
+          </el-form-item>
+          <el-row>
+            <el-col :span="24"><div class="grid-content bg-purple-dark">
+              <el-button type="info" @click="test()">测试</el-button>
+              <el-button type="primary">立即申请</el-button>
+            </div></el-col>
+          </el-row>
+        </el-form>
+      </div></el-col>
+    </el-row>
+    <el-divider></el-divider>
+    <el-row  class="first-row" >
+      <el-col :span="24"><div class="grid-content bg-purple-dark" >
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="API文档" name="first">
+            <el-form  ref="form" :model="myapi" label-width="120px" :rules="rules">
+              <el-form-item label="接口地址:" >
+                {{myapi.productName}}
+              </el-form-item>
+              <el-form-item label="返回格式:">
+                {{myapi.productPrice}}元/次
+              </el-form-item>
+              <el-form-item label="请求方式:">
+                {{myapi.productContent}}
+              </el-form-item>
+              <el-form-item label="简介:">
+                {{myapi.productContent}}
+              </el-form-item>
+              <el-form-item label="请求参数说明:">
+                {{myapi.productContent}}
+              </el-form-item>
+              <el-form-item label="返回参数说明:">
+                {{myapi.productContent}}
+              </el-form-item>
+              <el-form-item label="JSON返回示例:">
+                {{myapi.productContent}}
+              </el-form-item>
+              <el-form-item label="XML返回示例:">
+                {{myapi.productContent}}
+              </el-form-item>
+            </el-form>
+          </el-tab-pane>
+          <el-tab-pane label="错误码参照" name="second">错误码参照</el-tab-pane>
+          <el-tab-pane label="数据统计" name="third">数据统计</el-tab-pane>
+        </el-tabs>
+      </div></el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+  export default {
+    name: "Apitest",
+    //import引入的组件需要注入到对象中才能使用"
+    components: {},
+    props: {},
+    data() {
+      //这里存放数据"
+
+      return {
+        myapi: {
+          productName: '',
+          productPrice: '',
+          productContent: ''
+        },
+        activeName: 'first'
+      };
+    },
+    //计算属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {
+      //标签页
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）",
+    created() {
+    },
+    //生命周期 -` 挂载完成（可以访问DOM元素）",
+    mounted() {
+      this.myapi = this.$route.query.myapi
+      if (typeof this.myapi === 'string' && this.myapi.trim() !== '') {
+        try {
+          this.myapi = JSON.parse(this.myapi);
+        } catch (error) {
+          console.error('Failed to parse JSON:', error);
+          // 可以设置一个错误处理逻辑，比如将 myapi 设置为空对象
+          this.myapi = {};
+        }
+      }
+    },
+    beforeCreate() {
+    }, //生命周期 - 创建之前",
+    beforeMount() {
+    }, //生命周期 - 挂载之前",
+    beforeUpdate() {
+    }, //生命周期 - 更新之前",
+    updated() {
+    }, //生命周期 - 更新之后",
+    beforeDestroy() {
+    }, //生命周期 - 销毁之前",
+    destroyed() {
+    }, //生命周期 - 销毁完成",
+    activated() {
+    } //如果页面有keep-alive缓存功能，这个函数会触发",
+  };
+</script>
+<style scoped>
+.first-row {
+  margin-bottom: 20px; /* 创建一个空间，以便可以清晰地看到边框 */
+}
+</style>
diff --git a/src/views/market/myapi/index.vue b/src/views/market/myapi/index.vue
index 183fa39..0bc71cb 100644
--- a/src/views/market/myapi/index.vue
+++ b/src/views/market/myapi/index.vue
@@ -8,8 +8,7 @@
           <el-row>
             <el-col :span="20"><div class="grid-content bg-purple">
               <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-                <el-form-item prop="couponName">
-                  <el-select v-model="value" placeholder="请选择状态">
+                  <el-select v-model="ruleForm.productState" placeholder="请选择状态">
                     <el-option
                       v-for="item in options"
                       :key="item.value"
@@ -17,13 +16,37 @@
                       :value="item.value">
                     </el-option>
                   </el-select>
-                  <el-input type="text" v-model="ruleForm.couponName" style="width: 200px" autocomplete="off" placeholder="关键词搜索"></el-input>
+                  <el-input type="text" v-model="ruleForm.productName" style="width: 200px" autocomplete="off" placeholder="名称搜索"></el-input>
                   <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
-                </el-form-item>
               </el-form>
             </div></el-col>
             <el-col :span="4"><div class="grid-content bg-purple-light"><el-button type="primary">新增数据</el-button></div></el-col>
           </el-row>
+
+          <el-row :gutter="12">
+            <el-col :span="8" v-for="myapi in myapiList" :key="index" >
+              <el-card class="box-card" >
+                <div slot="header" class="clearfix">
+                  <el-form  ref="form" :model="myapi" label-width="120px" :rules="rules">
+                    <el-form-item label="产品名称">
+                      <el-input v-model="myapi.productName">{{myapi.productName}}}</el-input>
+                    </el-form-item>
+                    <el-form-item label="产品价格">
+                      <el-input v-model="myapi.productPrice">{{myapi.productPrice}}}</el-input>
+                    </el-form-item>
+                    <el-form-item label="产品介绍">
+                      <el-input v-model="myapi.productContent">{{myapi.productContent}}}</el-input>
+                    </el-form-item>
+                    <el-row>
+                      <el-col :span="6"><div class="grid-content bg-purple">
+                        <el-button type="info" @click="test(myapi)">测试</el-button>
+                      </div></el-col>
+                    </el-row>
+                  </el-form>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
         </div>
       </el-col>
     </el-row>
@@ -35,7 +58,10 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
-  export default {
+  import myapi from "@/views/market/myapi/index.vue";
+import {selectmyapiList} from "@/api/market/myapi";
+
+export default {
     name: 'Myapi',
     //import引入的组件需要注入到对象中才能使用"
     components: {},
@@ -44,6 +70,8 @@
       //这里存放数据"
 
       return {
+        myapiList:[],
+        myapi:{},
         ruleForm:{},
         options: [{
           value: '选项1',
@@ -62,13 +90,39 @@
       };
     },
     //计算属性 类似于data概念",
-    computed: {},
+    computed: {
+      myapi() {
+        return myapi
+      }
+    },
     //监控data中的数据变化",
     watch: {},
     //方法集合",
-    methods: {},
+    methods: {
+      //我购买的api列表
+      getList(){
+        selectmyapiList(this.ruleForm).then(response=>{
+          this.myapiList=response.data
+        })
+      },
+      //查询
+      submitForm(){
+        this.getList()
+      },
+      //测试
+      test(myapi) {
+        if (myapi && myapi.productAddress) {
+          let url = myapi.productAddress; // 使用 product.address 的值
+          window.open(url, '_blank'); // 在新标签页中打开 URL
+        } else {
+          console.error('无效的 address 或 product 未定义');
+          // 或者您可以根据需要处理错误情况
+        }
+      }
+    },
     //生命周期 - 创建完成（可以访问当前this实例）",
     created() {
+      this.getList()
     },
     //生命周期 - 挂载完成（可以访问DOM元素）",
     mounted() {
diff --git a/src/views/market/product/index.vue b/src/views/market/product/index.vue
index a318e3b..ebd0dc4 100644
--- a/src/views/market/product/index.vue
+++ b/src/views/market/product/index.vue
@@ -1,30 +1,34 @@
 <template>
   <div>
+    <span>产品名称</span>
       <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-        <el-form-item prop="couponName">
-          <el-input type="text" v-model="ruleForm.couponName" style="width: 200px" autocomplete="off" placeholder="关键词搜索"></el-input>
+        <el-form-item prop="productName">
+          <el-input type="text" v-model="ruleForm.productName" style="width: 200px" autocomplete="off" placeholder="关键词搜索"></el-input>
           <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
         </el-form-item>
       </el-form>
 
-    <span>产品名称</span>
 
-    <el-row :gutter="12">
-      <el-col :span="8" v-for="product in productList" :key="index" >
+
+
+    <el-row :gutter="12" class="mb8">
+      <el-col :span="8" v-for="(product,index) in productList" :key="index" >
         <el-card class="box-card" >
           <div slot="header" class="clearfix">
             <el-form  ref="form" :model="product" label-width="120px" :rules="rules">
-              <el-form-item label="产品名称">
-                <el-input v-model="product.productName">{{product.productName}}}</el-input>
+              <el-form-item label="产品名称:">
+                <el-textarea v-model="product.productName">{{product.productName}}</el-textarea>
               </el-form-item>
-              <el-form-item label="产品价格">
-                <el-input v-model="product.productPrice">{{product.productPrice}}}</el-input>
+              <el-form-item label="产品价格:">
+                <el-textarea v-model="product.productPrice">￥{{product.productPrice}}</el-textarea>
               </el-form-item>
-              <el-form-item label="产品介绍">
-                <el-input v-model="product.productContent">{{product.productContent}}}</el-input>
+              <el-form-item label="产品介绍:">
+                <el-textarea v-model="product.productContent">{{product.productContent}}</el-textarea>
               </el-form-item>
               <el-row>
-                <el-col :span="6"><div class="grid-content bg-purple"><el-button type="info">测试</el-button></div></el-col>
+                <el-col :span="6"><div class="grid-content bg-purple">
+                  <el-button type="info" @click="test(product)">测试</el-button>
+                </div></el-col>
                 <el-col :span="6"><div class="grid-content bg-purple-light"><el-button type="primary">立即申请</el-button></div></el-col>
               </el-row>
             </el-form>
@@ -56,7 +60,7 @@ export default {
         //产品列表
         productList:[],
         product:{},
-        ruleForm:{}
+        ruleForm:{},
       };
     },
     //计算属性 类似于data概念",
@@ -74,6 +78,23 @@ export default {
       //查询
       submitForm(){
         this.getList()
+      },
+      //接口测试页面
+      // test(product){
+      //   // let url = `http://21.12.0.10/prod-api/doc.html#/cloud-market/客户控制层/findListByuserPhone?userId=${this.userId}`;
+      //   let url = `product`;
+      //   window.open(url, '_blank'); // 在新标签页中打开 URL
+      //
+      //   // this.$router.push({path:"/apitest/index",query:{myapi:JSON.stringify(product)}})
+      // },
+      test(product) {
+        if (product && product.productAddress) {
+          let url = product.productAddress; // 使用 product.address 的值
+          window.open(url, '_blank'); // 在新标签页中打开 URL
+        } else {
+          console.error('无效的 address 或 product 未定义');
+          // 或者您可以根据需要处理错误情况
+        }
       }
     },
     //生命周期 - 创建完成（可以访问当前this实例）",
@@ -100,12 +121,10 @@ export default {
   };
 </script>
 <style scoped>
-.el-header {
-  background-color: #B3C0D1;
-  color: #333;
-  line-height: 60px;
-}
-.el-aside {
-  color: #333;
+.box-card{
+  margin: 10px 0;
 }
+/*.box-card:not(:last-child) {*/
+/*  margin-bottom: 20px; !* 你可以根据需要调整这个值 *!*/
+/*}*/
 </style>