522 lines
20 KiB
Vue
522 lines
20 KiB
Vue
<template>
|
||
<div>
|
||
<el-container style="height: 1000px; border: 1px solid #eee">
|
||
<el-aside width="180px">
|
||
<el-menu :default-openeds="['1', '3']">
|
||
<el-menu-item-group>
|
||
<span style="font-weight: bold;font-size: 25px;">全部类型：</span>
|
||
</el-menu-item-group>
|
||
<el-menu-item-group >
|
||
<el-link type="primary" style="font-weight: bold;font-size: 20px;" v-for="(connectSort, index) in connectSort"
|
||
:key="index"
|
||
:href="connectSort.connectorSort">
|
||
{{ connectSort.connectorSort }}
|
||
</el-link>
|
||
</el-menu-item-group>
|
||
</el-menu>
|
||
</el-aside>
|
||
|
||
<el-container>
|
||
<el-main>
|
||
<el-form label-width="40px" :model="form">
|
||
<el-form-item>
|
||
<input v-model="form.connectorName" style="padding: 10px 10px;float: initial" placeholder=请输入关键字>
|
||
<el-button @click="findApiList" style="padding: 10px 10px">查询</el-button>
|
||
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-row :gutter="50">
|
||
<el-col :span="7" v-for="connector in connectorList" :key="connector.connectorId" v-if="connectorList.length !== 0">
|
||
<el-card class="box-card" style="margin-top: 15px;width: 400px; height: 600px;" shadow="hover">
|
||
<div slot="header" class="clearfix">
|
||
<h1 style="font-weight: bold">{{connector.connectorName}}</h1>
|
||
<el-button type="primary" style="float: right; padding: 10px 10px" @click="buy(connector)">购买</el-button>
|
||
</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}}/次<br>
|
||
|
||
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testPhone()" v-if="connector.connectorName=='手机号查询归属地'">测试API</el-button>
|
||
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testIP()" v-if="connector.connectorName=='IP查询归属地'">测试API</el-button>
|
||
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testNews()" v-if="connector.connectorName=='新闻头条'">测试API</el-button>
|
||
<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-card>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 手机号查询归属地-->
|
||
<el-dialog title="手机查询归属地" :visible.sync="dialogFormVisible">
|
||
<el-form :model="formInline">
|
||
<el-form-item label="手机号" :label-width="formLabelWidth">
|
||
<el-input v-model="formInline.tel" autocomplete="off" placeholder="请输入手机号"></el-input>
|
||
</el-form-item>
|
||
<span style="font-weight: bold;font-size: 20px" v-if="formInline.reason==true">
|
||
省份：{{this.formInline.province}}<br>
|
||
城市：{{this.formInline.city}}<br>
|
||
区号：{{this.formInline.areacode}}<br>
|
||
邮编：{{this.formInline.zip}}<br>
|
||
运营商：{{this.formInline.company}}<br>
|
||
</span>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="phonePlace()">发起请求</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!--IP查询归属地-->
|
||
<el-dialog title="IP查询归属地" :visible.sync="dialogFormVisible1">
|
||
<el-form :model="formIp">
|
||
<el-form-item label="IP" >
|
||
<el-input v-model="formIp.ip" autocomplete="off" placeholder="请输入ip"></el-input>
|
||
</el-form-item>
|
||
<span style="font-weight: bold;font-size: 20px" v-if="formIp.reason==true">
|
||
国家：{{this.formIp.country}}<br>
|
||
省份：{{this.formIp.province}}<br>
|
||
城市：{{this.formIp.city}}<br>
|
||
运营商：{{this.formIp.isp}}<br>
|
||
</span>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="getIpPlace()">发起请求</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 新闻头条-->
|
||
<el-dialog title="新闻头条" :visible.sync="dialogTableVisible">
|
||
<el-table :data="gridData">
|
||
<el-table-column property="title" label="新闻标题" width="150"></el-table-column>
|
||
<el-table-column property="date" label="新闻时间" width="200"></el-table-column>
|
||
<el-table-column property="category" label="新闻分类"></el-table-column>
|
||
<el-table-column property="authorName" label="新闻来源"></el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
|
||
<!--生辰助手-->
|
||
<el-dialog title="生辰助手" :visible.sync="dialogFormVisible2">
|
||
<el-form :model="formBirthday">
|
||
<el-form-item label="年" >
|
||
<el-input v-model="formBirthday.year" autocomplete="off" placeholder="请输入年份"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="月" >
|
||
<el-input v-model="formBirthday.month" autocomplete="off" placeholder="请输入月份"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="日" >
|
||
<el-input v-model="formBirthday.day" autocomplete="off" placeholder="请输入几号"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="时" >
|
||
<el-input v-model="formBirthday.hour" autocomplete="off" placeholder="请输入几点"></el-input>
|
||
</el-form-item>
|
||
<span style="font-weight: bold;font-size: 20px" v-if="formBirthday.reason==true">
|
||
years： {{this.formBirthday.years}}<br>
|
||
months： {{this.formBirthday.months}}<br>
|
||
days： {{this.formBirthday.days}}<br>
|
||
animal： {{this.formBirthday.animal}}<br>
|
||
imonthcn： {{this.formBirthday.imonthcn}}<br>
|
||
idaycn： {{this.formBirthday.idaycn}}<br>
|
||
cyear： {{this.formBirthday.cyear}}<br>
|
||
cmonth： {{this.formBirthday.cmonth}}<br>
|
||
cday： {{this.formBirthday.cday}}<br>
|
||
gzyear： {{this.formBirthday.gzyear}}<br>
|
||
gzmonth： {{this.formBirthday.gzmonth}}<br>
|
||
gzday： {{this.formBirthday.gzday}}<br>
|
||
isleap： {{this.formBirthday.isleap}}<br>
|
||
ncweek： {{this.formBirthday.ncweek}}<br>
|
||
isterm： {{this.formBirthday.isterm}}<br>
|
||
term： {{this.formBirthday.term}}<br>
|
||
astro： {{this.formBirthday.astro}}<br>
|
||
eightall： {{this.formBirthday.eightall}}<br>
|
||
fiveall： {{this.formBirthday.fiveall}}
|
||
</span>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="getBirthday()">发起请求</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!--邮编查询-->
|
||
<el-dialog title="邮编查询" :visible.sync="dialogFormVisible3">
|
||
<el-form :model="formPostCode">
|
||
<el-form-item label="邮编" >
|
||
<el-input v-model="formPostCode.code" autocomplete="off" placeholder="请输入邮编"></el-input>
|
||
</el-form-item>
|
||
<el-table :data="gridData2" v-if="formPostCode.reason==true">
|
||
<el-table-column property="postNumber" label="邮编" width="150"></el-table-column>
|
||
<el-table-column property="province" label="省" width="200"></el-table-column>
|
||
<el-table-column property="city" label="市"></el-table-column>
|
||
<el-table-column property="district" label="区"></el-table-column>
|
||
<el-table-column property="address" label="县"></el-table-column>
|
||
</el-table>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="getPostcode()">发起请求</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 气象预警-->
|
||
<el-dialog title="气象预警" :visible.sync="dialogFormVisible4">
|
||
<el-aside width="100%">
|
||
<el-tree :data="data" :props="defaultProps">
|
||
<template slot-scope="{data,node}">
|
||
<span>{{data.provinceName}}{{data.cityName}}--{{data.cityCode}}</span>
|
||
</template>
|
||
</el-tree>
|
||
</el-aside>
|
||
</el-dialog>
|
||
<!-- 购买-->
|
||
<el-dialog title="购买API" :visible.sync="dialogFormVisible5">
|
||
<el-form :model="buyForm">
|
||
<el-form-item label="产品编号" :label-width="formLabelWidth">
|
||
<el-input v-model="buyForm.connectorId" disabled autocomplete="off" readonly></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="产品名称" :label-width="formLabelWidth">
|
||
<el-input v-model="buyForm.connectorName" disabled autocomplete="off" readonly></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="产品介绍" :label-width="formLabelWidth">
|
||
<el-input v-model="buyForm.connectorDescribe" disabled autocomplete="off" readonly></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="产品价格" :label-width="formLabelWidth">
|
||
<el-input v-model="buyForm.connectorPrice" disabled autocomplete="off" readonly></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="产品公司" :label-width="formLabelWidth">
|
||
<el-input v-model="buyForm.connectorCompany" disabled autocomplete="off" readonly></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="API_URL" :label-width="formLabelWidth">
|
||
<el-input v-model="buyForm.connectorApiurl" disabled autocomplete="off" readonly></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="API_EYE" :label-width="formLabelWidth">
|
||
<el-input v-model="buyForm.connectorApikey" disabled autocomplete="off" readonly></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="请求方式" :label-width="formLabelWidth">
|
||
<el-input v-model="buyForm.connectorRequest" disabled autocomplete="off" readonly></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="购买次数" :label-width="formLabelWidth">
|
||
<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">
|
||
<el-button type="primary" @click="buyInterface()">购 买</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
<!-- <el-button type="primary">+申请新数据</el-button>-->
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||
//例如：import 《组件名称》 from '《组件路径》,
|
||
import {findApiList} from "@/api/port/port";
|
||
import index from "vuex";
|
||
import {phonePlace} from "@/api/port/port";
|
||
import {getIpPlace} from "@/api/port/port";
|
||
import {getHeadlines} from "@/api/port/port";
|
||
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";
|
||
import {findConnectSort} from "@/api/port/port";
|
||
export default {
|
||
//import引入的组件需要注入到对象中才能使用"
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
//这里存放数据"
|
||
|
||
return {
|
||
userBalanceData: {
|
||
userBalance: '加载中...'
|
||
},
|
||
formWeather:{},
|
||
data:[],
|
||
defaultProps: {
|
||
children:"citys",
|
||
label:'provinceName',
|
||
},
|
||
connectSort:[],
|
||
connectorList:[],
|
||
gridData:[],
|
||
gridData2:[],
|
||
form:{},
|
||
// 邮编查询
|
||
formPostCode:{
|
||
code:"",
|
||
// postNumber:"",
|
||
// province:"",
|
||
// city:"",
|
||
// district:"",
|
||
// address:"",
|
||
reason:"",
|
||
},
|
||
// 手机号查询归属地formInline
|
||
formInline:{
|
||
tel:"",
|
||
province:"",
|
||
city:"",
|
||
areacode:"",
|
||
zip:"",
|
||
company:"",
|
||
reason:"",
|
||
},
|
||
|
||
formIp:{
|
||
ip:"",
|
||
country:"",
|
||
province:"",
|
||
city:"",
|
||
isp:"",
|
||
reason:"",
|
||
},
|
||
formBirthday:{
|
||
year:"",
|
||
month:"",
|
||
day:"",
|
||
hour:"",
|
||
years:"",
|
||
months:"",
|
||
days:"",
|
||
animal:"",
|
||
imonthcn:"",
|
||
idaycn:"",
|
||
cyear:"",
|
||
cmonth:"",
|
||
cday:"",
|
||
gzyear:"",
|
||
gzmonth:"",
|
||
gzday:"",
|
||
isleap:"",
|
||
ncweek:"",
|
||
isterm:"",
|
||
term:"",
|
||
astro:"",
|
||
eightall:"",
|
||
fiveall:"",
|
||
reason:"",
|
||
},
|
||
formNews:{
|
||
news:"",
|
||
reason:"",
|
||
},
|
||
buyForm:{},
|
||
// IP查询归属地
|
||
dialogFormVisible:false,
|
||
dialogFormVisible1:false,
|
||
dialogFormVisible2:false,
|
||
dialogFormVisible3:false,
|
||
dialogFormVisible4:false,
|
||
dialogFormVisible5:false,
|
||
dialogTableVisible:false,
|
||
};
|
||
},
|
||
//计算属性 类似于data概念",
|
||
computed: {
|
||
index() {
|
||
return index
|
||
},
|
||
node() {
|
||
return node
|
||
}
|
||
},
|
||
//监控data中的数据变化",
|
||
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(){
|
||
this.$prompt('请输入支付密码', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
inputPattern: /\d{6}?/,
|
||
inputErrorMessage: '密码格式不正确'
|
||
}).then(({ value }) => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '你的密码是: ' + value
|
||
});
|
||
doBuyInterface(this.buyForm).then((res)=>{
|
||
console.log(res);
|
||
alert(res.msg);
|
||
this.dialogFormVisible5=false;
|
||
})
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '取消输入'
|
||
});
|
||
});
|
||
|
||
},
|
||
//购买
|
||
buy(connector){
|
||
this.buyForm=connector;
|
||
this.dialogFormVisible5=true;
|
||
},
|
||
// 气象预警
|
||
testWeather(){
|
||
|
||
getWeather().then((res)=>{
|
||
this.data=res.data;
|
||
|
||
this.dialogFormVisible4=true;
|
||
})
|
||
},
|
||
// 邮编查询
|
||
getPostcode(){
|
||
getPostcode(this.formPostCode.code).then((res)=>{
|
||
console.log(res.data);
|
||
this.gridData2=res.data;
|
||
this.formPostCode.reason=true;
|
||
})
|
||
},
|
||
testMailbox(){
|
||
this.dialogFormVisible3=true;
|
||
},
|
||
getBirthday(){
|
||
getBirthday(this.formBirthday).then((res)=>{
|
||
console.log(res.data);
|
||
this.formBirthday.reason=true;
|
||
this.formBirthday.years=res.data.years;
|
||
this.formBirthday.months=res.data.months;
|
||
this.formBirthday.days=res.data.days;
|
||
this.formBirthday.animal=res.data.animal;
|
||
this.formBirthday.imonthcn=res.data.imonthcn;
|
||
this.formBirthday.idaycn=res.data.idaycn;
|
||
this.formBirthday.cyear=res.data.cyear;
|
||
this.formBirthday.cmonth=res.data.cmonth;
|
||
this.formBirthday.cday=res.data.cday;
|
||
this.formBirthday.gzyear=res.data.gzyear;
|
||
this.formBirthday.gzmonth=res.data.gzmonth;
|
||
this.formBirthday.gzday=res.data.gzday;
|
||
this.formBirthday.isleap=res.data.isleap;
|
||
this.formBirthday.ncweek=res.data.ncweek;
|
||
this.formBirthday.isterm=res.data.isterm;
|
||
this.formBirthday.term=res.data.term;
|
||
this.formBirthday.astro=res.data.astro;
|
||
this.formBirthday.eightall=res.data.eightall;
|
||
this.formBirthday.fiveall=res.data.fiveall;
|
||
|
||
})
|
||
},
|
||
testBirthdate(){
|
||
this.dialogFormVisible2=true;
|
||
},
|
||
testNews(){
|
||
getHeadlines().then((res)=>{
|
||
this.gridData=res.data;
|
||
this.dialogTableVisible=true;
|
||
})
|
||
},
|
||
getIpPlace(){
|
||
getIpPlace(this.formIp.ip).then((res)=>{
|
||
console.log(res.data);
|
||
if (200==res.code){
|
||
this.formIp.country=res.data.country;
|
||
this.formIp.province=res.data.province;
|
||
this.formIp.city=res.data.city;
|
||
this.formIp.isp=res.data.isp;
|
||
this.formIp.reason=true;
|
||
}
|
||
})
|
||
},
|
||
testIP(ip){
|
||
this.formIp.ip=ip;
|
||
this.dialogFormVisible1=true;
|
||
},
|
||
testPhone(tel){
|
||
this.formInline.tel=tel;
|
||
this.dialogFormVisible=true;
|
||
},
|
||
phonePlace(){
|
||
phonePlace(this.formInline.tel).then((res)=>{
|
||
console.log(res.data);
|
||
if (200==res.code){
|
||
this.formInline.province=res.data.province;
|
||
this.formInline.city=res.data.city;
|
||
this.formInline.areacode=res.data.areacode;
|
||
this.formInline.zip=res.data.zip;
|
||
this.formInline.company=res.data.company;
|
||
this.formInline.reason=true;
|
||
}
|
||
})
|
||
},
|
||
findApiList(){
|
||
findApiList(this.form).then((res)=>{
|
||
this.connectorList=res.data;
|
||
console.log(res.data);
|
||
})
|
||
},
|
||
findConnectSort(){
|
||
findConnectSort().then((res)=>{
|
||
this.connectSort=res.data;
|
||
console.log(this.connectSort);
|
||
})
|
||
}
|
||
},
|
||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||
created() {
|
||
this.fetchUserBalance();
|
||
this.findApiList();
|
||
this.findConnectSort()
|
||
},
|
||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||
mounted() {
|
||
},
|
||
beforeCreate() {
|
||
}, //生命周期 - 创建之前",
|
||
beforeMount() {
|
||
}, //生命周期 - 挂载之前",
|
||
beforeUpdate() {
|
||
}, //生命周期 - 更新之前",
|
||
updated() {
|
||
}, //生命周期 - 更新之后",
|
||
beforeDestroy() {
|
||
}, //生命周期 - 销毁之前",
|
||
destroyed() {
|
||
}, //生命周期 - 销毁完成",
|
||
activated() {
|
||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
|
||
</style>
|