购买

src/api/port/port/index.js

@@ -79,3 +79,11 @@ export function doBuyInterface(data) {
     data:data
   })
 }
+//资产列表
+export function findConnectorUserList(data) {
+  return request({
+    url: '/mart/connector/findConnectorUserList',
+    method: 'post',
+    data:data
+  })
+}

src/views/port/port/assets.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <p style="font-weight: bold;font-size: 20px">余额：{{ userBalanceData.userBalance || '加载中...' }}</p>
+    <el-table
+      :data="tableData"
+      style="width: 100%">
+      <el-table-column
+        label="编号"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.connectorUserId }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="用户"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.userName }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="接口"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.connectorName }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="剩余次数"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.connectorResidueDegree }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="购买次数"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.connectorFrequency }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import {findConnectorUserList} from "@/api/port/port";
+import {userBalance} from "@/api/system/user";
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      userBalanceData: {
+        userBalance: '加载中...'
+      },
+      tableData:[],
+      form:{},
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    findConnectorUserList(){
+      findConnectorUserList(this.form).then((res)=>{
+        this.tableData=res.data;
+      })
+    },
+    async fetchUserBalance() {
+      try {
+        const userId = localStorage.getItem('userId');
+        console.log(userId)// 登录后把userId存到了localStorage
+        if (!userId) {
+          this.userBalanceData = {userBalance: '未登录'};
+          return;
+        }
+        const response = await userBalance(userId);
+        if (response.data) {
+          console.log(response.data)
+          this.userBalanceData.userBalance = response.data;
+        } else {
+          this.userBalanceData.userBalance = {userBalance: '获取失败'};
+        }
+      } catch (error) {
+        this.userBalanceData = {userBalance: '获取失败'};
+        console.error('Error fetching user balance:', error);
+      }
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.fetchUserBalance();
+    this.findConnectorUserList();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>

src/views/port/port/employee.vue

@@ -21,6 +21,8 @@
           <el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeather()" v-if="connector.connectorName=='气象预警'">测试API</el-button>
           <el-button type="primary" style="float: right; padding: 10px 10px" @click="testBirthdate()" v-if="connector.connectorName=='生辰助手'">测试API</el-button>
           <el-button type="primary" style="float: right; padding: 10px 10px" @click="testMailbox()" v-if="connector.connectorName=='邮编查询'">测试API</el-button>
+
+          <el-button type="primary" style="float: right; padding: 10px 10px" @click="applyFor()">申请API</el-button>
         </el-card>
       </el-col>
     </el-row>
@@ -180,8 +182,10 @@
         </el-form-item>
 
         <el-form-item label="购买次数" :label-width="formLabelWidth">
-          <el-input-number v-model="buyForm.connectorFrequency" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+          <el-input-number v-model="buyForm.connectorFrequency" controls-position="right" @change="handleChange" :min="1"></el-input-number>
         </el-form-item>
+        <p style="font-weight: bold;font-size: 20px">余额：{{ userBalanceData.userBalance || '加载中...' }}</p>
+        <span style="font-weight: bold;font-size: 20px">共计：{{buyForm.connectorPrice*buyForm.connectorFrequency}}元</span>
 
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -204,6 +208,7 @@ import {getBirthday} from "@/api/port/port";
 import {getPostcode} from "@/api/port/port";
 import {getWeather} from "@/api/port/port";
 import {doBuyInterface} from "@/api/port/port";
+import {userBalance} from "@/api/system/user";
 export default {
   //import引入的组件需要注入到对象中才能使用"
   components: {},
@@ -212,6 +217,9 @@ export default {
     //这里存放数据"
 
     return {
+      userBalanceData: {
+        userBalance: '加载中...'
+      },
       formWeather:{},
       data:[],
       defaultProps: {
@@ -305,6 +313,26 @@ export default {
   watch: {},
   //方法集合",
   methods: {
+    async fetchUserBalance() {
+      try {
+        const userId = localStorage.getItem('userId');
+        console.log(userId)// 登录后把userId存到了localStorage
+        if (!userId) {
+          this.userBalanceData = {userBalance: '未登录'};
+          return;
+        }
+        const response = await userBalance(userId);
+        if (response.data) {
+          console.log(response.data)
+          this.userBalanceData.userBalance = response.data;
+        } else {
+          this.userBalanceData.userBalance = {userBalance: '获取失败'};
+        }
+      } catch (error) {
+        this.userBalanceData = {userBalance: '获取失败'};
+        console.error('Error fetching user balance:', error);
+      }
+    },
     buyInterface(){
       doBuyInterface(this.buyForm).then((res)=>{
         console.log(res);
@@ -414,6 +442,7 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）",
   created() {
+    this.fetchUserBalance();
     this.findConnectorList();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）",