<template>
|
<div class="search">
|
<div class="logo">
|
<img src="../assets/images/logo1.png" alt="">
|
</div>
|
<div class="name">上市公司微财报</div>
|
<div class="input">
|
<div class="draw pointer" @click="pickShow">{{ selectVal.text }} <i
|
class="iconfont iconsanjiaojiantoutriangular"></i></div>
|
<div class="keyval">
|
<input type="text" placeholder="请输入股票代码或股票名称" v-model="searchVal">
|
</div>
|
</div>
|
<transition name="van-slide-down">
|
<ul v-show="visible" class="list">
|
<li class="pointer" v-for="(item, index) in serachList" @click="tohome(item)" :key='index'>
|
<span>{{ item.StockName }}</span>
|
<span>{{ item.StockCode }}</span>
|
</li>
|
</ul>
|
</transition>
|
|
<van-popup class="pick" v-model="pickToggle" position="bottom" :style="{ height: 'auto', width: '100%' }">
|
<van-picker show-toolbar :columns="columns" @confirm="confirm" @cancel="pickHide" />
|
</van-popup>
|
<div class="clearfix" style="margin-top: 12px;position: relative;min-height: 14vh;">
|
<div class="loadingbox" v-if="loading1">
|
<div class="loading">
|
<van-loading type="spinner" size="60px" />
|
</div>
|
</div>
|
<div style="width: 18%;float: left;font-size: 14px;font-weight: bold;color: white;text-align: center;">财报预告
|
</div>
|
<div class="clearfix" style="width: 81%;float: right;margin-top: 2px;">
|
<p v-for="(item, index) in companyList" :key="`companyList_${index}`" @click="quickTurn(item)"
|
style="width: 33.33%;float: left;color: white;">{{ `${item.ts_name}(${item.pre_date_show})` }}</p>
|
<p v-if="showTips1" style="width: 50%;float: left;color: white;">暂无数据</p>
|
</div>
|
</div>
|
<div class="clearfix" style="margin-top: 12px;position: relative;">
|
<div class="loadingbox" v-if="loading2">
|
<div class="loading">
|
<van-loading type="spinner" size="60px" />
|
</div>
|
</div>
|
<div style="width: 18%;float: left;">
|
<p style="font-size: 14px;font-weight: bold;color: white;text-align: center;">财报预告</p>
|
<p style="font-size: 14px;font-weight: bold;color: white;text-align: center;"> 半导体</p>
|
</div>
|
<div class="clearfix" style="width: 81%;float: right;margin-top: 2px;">
|
<p v-for="(item, index) in companyList_Semi" :key="`companyList_${index}`" @click="quickTurn(item)"
|
style="width: 33.33%;float: left;color: white;">{{ `${item.ts_name}(${item.pre_date_show})` }}</p>
|
<p v-if="showTips2" style="width: 50%;float: left;color: white;">暂无数据</p>
|
</div>
|
</div>
|
<div class="to-message pointer" style="max-width: 630px;">
|
<u @click="clickToMessage">找不到想要的数据? 欢迎给我们留言</u>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
Popup,
|
Picker,
|
Loading
|
} from 'vant';
|
import wxapi from '@/assets/js/wxapi.js';
|
|
export default {
|
name: 'search',
|
components: {
|
Popup,
|
Loading
|
},
|
data() {
|
return {
|
loading1: true,
|
loading2: true,
|
columns: [
|
{
|
value: 0,
|
text: '年报'
|
},
|
{
|
value: 1,
|
text: '半年报'
|
},
|
{
|
value: 2,
|
text: '一季报'
|
},
|
{
|
value: 3,
|
text: '三季报'
|
}
|
],
|
pickToggle: false,
|
selectVal: {},
|
searchVal: '',
|
serachList: [],
|
visible: false,
|
companyList: [],//公司列表
|
companyList_Semi: [],//公司列表(半导体)
|
showTips1: false,//是否显示暂无数据提示
|
showTips2: false,//是否显示暂无数据提示
|
}
|
},
|
activated() {
|
this.getCompanyList()
|
this.getCompanyList('Semi')
|
this.getDefaultReportType()
|
this.selectVal = this.columns[0];
|
// wxapi.wxRegister(data, option);
|
// this.getShareInfo('这里是标题啊啊啊啊啊啊', location.href.split('#')[0]);
|
},
|
deactivated: function () {
|
this.selectVal = {};
|
this.searchVal = '';
|
this.serachList = [];
|
},
|
methods: {
|
/**
|
* 获取默认财报类型
|
*/
|
getDefaultReportType() {
|
this.$axios.post('/DisclosureDate/GetDefaultReportType', {
|
TypeInfo: 'month'
|
}).then((res) => {
|
this.selectVal = this.columns[res.data.Data];
|
}).catch((err) => {
|
this.selectVal = {}
|
});
|
},
|
/**
|
* 获取公司列表
|
*/
|
getCompanyList(Plate) {
|
let data = {
|
TypeInfo: 'month'
|
}
|
if (Plate == 'Semi') {
|
data.Plate = 'Semi'
|
this.loading2 = true
|
} else {
|
this.loading1 = true
|
}
|
let that = this
|
this.$axios.post('/DisclosureDate/GetDisclosureDateList', data).then((res) => {
|
if (res.data.Data && res.data.Data.length > 0) {
|
if (Plate == 'Semi') {
|
that.showTips2 = false
|
this.companyList_Semi = res.data.Data;
|
} else {
|
that.showTips2 = false
|
this.companyList = res.data.Data;
|
}
|
} else {
|
if (Plate == 'Semi') {
|
that.showTips2 = true
|
this.companyList_Semi = []
|
} else {
|
that.showTips1 = true
|
this.companyList = []
|
}
|
}
|
if (Plate == 'Semi') {
|
this.loading2 = false
|
} else {
|
this.loading1 = false
|
}
|
}).catch((err) => {
|
if (Plate == 'Semi') {
|
this.loading2 = false
|
that.showTips2 = true
|
this.companyList_Semi = []
|
} else {
|
this.loading1 = false
|
that.showTips1 = true
|
this.companyList = []
|
}
|
});
|
},
|
// getShareInfo: function(tit, fxUrl) { //如果分享的内容会根据情况变化，那么这里可以传入分享标题及url
|
// var data = { //请求参数
|
// url: this.jmUrl,
|
// token: this.token,
|
// code: this.code
|
// };
|
// //这里我写了一个公用的接口请求js，这里正常axios请求就可以，只要拿到数据都可以
|
// getShare(data).then(res => {
|
// localStorage.setItem("jsapi_ticket", res.jsapi_ticket);
|
// //拿到后端给的这些数据
|
// let appId = res.appId;
|
// let timestamp = res.timestamp;
|
// let nonceStr = res.noncestr;
|
// let signature = res.signature;
|
// wx.config({
|
// debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
// appId: 'wx56a464621c6314a', // 必填，公众号的唯一标识，填自己的！
|
// timestamp: timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
|
// nonceStr: nonceStr, // 必填，生成签名的随机串
|
// signature: signature, // 必填，签名，见附录1
|
// jsApiList: [
|
// 'onMenuShareTimeline',
|
// 'onMenuShareAppMessage'
|
// ]
|
// })
|
|
// wx.ready(function() {
|
// //分享到朋友圈
|
// wx.onMenuShareTimeline({
|
// title: tit, // 分享时的标题
|
// link: fxUrl, // 分享时的链接
|
// imgUrl: _this.pic, // 分享时的图标
|
// success: function() {
|
// console.log("分享成功");
|
// },
|
// cancel: function() {
|
// console.log("取消分享");
|
// }
|
// });
|
// //分享给朋友
|
// wx.onMenuShareAppMessage({
|
// title: tit,
|
// desc: '这件商品终于优惠了，每件只需5555555555555555555元',
|
// link: fxUrl,
|
// imgUrl: _this.pic,
|
// type: '',
|
// dataUrl: '',
|
// success: function() {
|
// console.log("分享成功");
|
// },
|
// cancel: function() {
|
// console.log("取消分享");
|
// }
|
// });
|
// })
|
// })
|
// },
|
pickShow: function () {
|
this.pickToggle = true;
|
},
|
pickHide: function () {
|
this.pickToggle = false;
|
},
|
confirm: function (value) {
|
this.selectVal = value;
|
this.pickHide();
|
},
|
tohome: function (item) {
|
// sessionStorage.setItem('param', JSON.stringify({
|
// id: item.id,
|
// type: this.selectVal.value
|
// }));
|
// this.$router.push('/home')
|
console.log(item);
|
console.log(this.selectVal);
|
let imgName = item.StockName + '(' + item.TSCode + ')' + this.selectVal.text
|
|
let routeUrl=this.$router.resolve({
|
path: "home",
|
query: {
|
name: item.StockName,
|
TSCode: item.TSCode,
|
selectVal: this.selectVal.text,
|
id: item.id,
|
type: this.selectVal.value
|
}
|
})
|
window.open(routeUrl.href, '_blank');
|
// localStorage.setItem('imgName', imgName)
|
// this.$router.push({
|
// name: 'home',
|
// query: {
|
// id: item.id,
|
// type: this.selectVal.value
|
// }
|
// })
|
},
|
/**
|
* 快速查看
|
*/
|
quickTurn(item) {
|
this.$router.push({
|
name: 'home',
|
query: {
|
id: 0,
|
ReportType: item.report_type,
|
TSCode: item.ts_code,
|
}
|
})
|
},
|
search: function () {
|
if (!this.searchVal) {
|
return false
|
}
|
let that = this;
|
if (this.searchVal) {
|
this.visible = true;
|
} else {
|
this.visible = false;
|
}
|
this.$axios.post('/ChinaStock/GetChinaStockList', {
|
SearchInfo: that.searchVal,
|
ReportType: that.selectVal.value
|
}).then(function (res) {
|
that.serachList = res.data.Data;
|
}).catch(function (err) {
|
console.log('请求失败之后', err);
|
});
|
},
|
clickToMessage() {
|
// this.$router.push('/message')
|
onclick = ClinkChatWeb.openSessionWindow()
|
}
|
},
|
watch: {
|
searchVal() {
|
setTimeout(() => {
|
console.log('监听改变');
|
this.search()
|
}, 20)
|
}
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.search {
|
// background: linear-gradient(to top, #E40A0A, #E56E6E);
|
background: linear-gradient(to top, #03a2e9, #09a2e9);
|
height: 100vh;
|
padding: 150px 15px 0;
|
position: relative;
|
|
.logo {
|
height: 0.8rem;
|
|
img {
|
display: block;
|
height: 100%;
|
margin: auto;
|
}
|
}
|
|
.name {
|
font-size: 36px;
|
text-align: center;
|
font-weight: bolder;
|
color: #fff;
|
margin: 10px 0;
|
}
|
|
.input {
|
height: 40px;
|
width: 100%;
|
display: flex;
|
background-color: #fff;
|
border-radius: 20px;
|
|
.draw {
|
width: 100px;
|
height: 100%;
|
line-height: 40px;
|
text-align: center;
|
|
i.ionfont {
|
font-size: 12px;
|
}
|
}
|
|
.keyval {
|
width: calc(100% - 100px);
|
|
input {
|
display: block;
|
width: 100%;
|
height: 100%;
|
background-color: transparent;
|
}
|
}
|
}
|
|
.list {
|
padding: 0 10px;
|
width: 80%;
|
max-height: 50%;
|
overflow: auto;
|
margin: 0 auto;
|
background-color: #fff;
|
border-bottom-right-radius: 6px;
|
border-bottom-left-radius: 6px;
|
position: absolute;
|
left: 10%;
|
z-index: 99;
|
|
li:nth-last-of-type(1) {
|
border-bottom: none;
|
}
|
|
li {
|
height: 40px;
|
line-height: 40px;
|
width: 100%;
|
border-bottom: 1px solid #ddd;
|
|
span:nth-child(1) {
|
font-size: 14px;
|
margin-right: 10px;
|
}
|
|
span:nth-child(2) {
|
color: #666;
|
}
|
}
|
}
|
|
.pick {
|
max-width: 650px;
|
right: 0;
|
margin: auto;
|
}
|
|
.to-message {
|
width: 100%;
|
text-align: center;
|
padding: 10px 0;
|
position: fixed;
|
bottom: 10px;
|
// background-color: #e41616;
|
z-index: 9;
|
|
u {
|
color: white;
|
padding-bottom: 2px;
|
line-height: 14px;
|
}
|
}
|
}
|
|
.loadingbox {
|
position: absolute;
|
width: 140px;
|
height: 140px;
|
overflow: auto;
|
top: 0;
|
left: 100px;
|
z-index: 999999;
|
//background-color: darkgray;
|
//opacity: 0.9;
|
|
.loading {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
z-index: 99999;
|
}
|
}
|
|
.pointer {
|
cursor: pointer;
|
}
|
</style>
|
