From f8b256ef152e54c19adb85856f62432d59c16b6e Mon Sep 17 00:00:00 2001
From: DESKTOP-CVS3R96\我恁爹 <11>
Date: Mon, 14 Nov 2022 19:00:29 +0800
Subject: [PATCH] wener~
---
src/page/kline/index.vue | 419 ++++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 366 insertions(+), 53 deletions(-)
diff --git a/src/page/kline/index.vue b/src/page/kline/index.vue
index 933266b..ec6ad48 100644
--- a/src/page/kline/index.vue
+++ b/src/page/kline/index.vue
@@ -8,44 +8,45 @@
<img src="../../assets/img/zuojiantou.png" alt />
</div>
<div class="right_title">
- <div class="t_t">
- <span>{{ kLineDetails.name }}</span>
+ <div class="t_t" style="white-space: nowrap;">
+ <span>{{ kLineDetails.name | getName }}</span>
</div>
<div class="b_t">
<span>{{ singDetails.code }}</span>
</div>
</div>
</div>
- <div class="right_money sss" @click="openDialog()">
+ <div class="right_money sss">
<div class="content_money">
<div class="top_price">
<div class="left">
<span>{{ '余额' }}</span>
</div>
<div class="right">
- <span v-if="$store.state.userInfo.userAmt==undefined">¥0.00</span>
- <span
- v-if="$store.state.userInfo&&kLineDetails.if_zhishu!='0'"
- style="white-space: nowarp;"
- >
- {{ '¥' + $store.state.userInfo.userIndexAmt
+ <span v-if="$store.state.userInfo.userAmt == undefined">¥0.00</span>
+ <span v-if="$store.state.userInfo && kLineDetails.if_zhishu != '0'" style="white-space: nowarp;">
+ {{ kLineDetails.if_us == 1 ? '$' + Number(Number($store.state.userInfo.userIndexAmt) /
+ 7.1).toFixed(2) :
+ kLineDetails.if_us == 2 ? 'HK$' + (Number($store.state.userInfo.userIndexAmt) / 0.9).toFixed(2) :
+ '¥' +
+ $store.state.userInfo.userIndexAmt
}}
</span>
- <span
- v-if="$store.state.userInfo.userAmt!=undefined&&kLineDetails.if_zhishu=='0'"
- style="white-space: nowarp;"
- >
- {{ '¥ ' + $store.state.userInfo.userAmt
+ <span v-if="$store.state.userInfo.userAmt != undefined && kLineDetails.if_zhishu == '0'"
+ style="white-space: nowarp;">
+ {{ kLineDetails.if_us == 1 ? '$' + Number(Number($store.state.userInfo.userAmt) / 7.1).toFixed(2) :
+ kLineDetails.if_us == 2 ? 'HK$' + (Number($store.state.userInfo.userAmt) / 0.9).toFixed(2) : '¥ ' +
+ $store.state.userInfo.userAmt
}}
</span>
</div>
<div class="sanjiao">
- <img
+ <!-- <img
:class="dialogFlag ? 'xuanz' : ''"
style="transition: all 0.5s;"
src="../../assets/img/xiala.png"
alt
- />
+ /> -->
</div>
</div>
<div class="bottom_balance">
@@ -70,7 +71,8 @@
? '+' : ''
}}{{ (singDetails.nowPrice - singDetails.preclose_px).toFixed(2) }}</span>
</div>
- <div class="tew" :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">
+ <div class="tew"
+ :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">
<span v-if="singDetails.nowPrice == 0">-</span>
<span v-else>({{ singDetails.nowPrice - singDetails.preclose_px > 0 ? '+' : '' }}
{{ singDetails.hcrate ? singDetails.hcrate : '0' }}%)</span>
@@ -109,10 +111,11 @@
</div>
</div>
</div>
- <div class="k_line_detail">
- <Kline />
+ <div class="k_line_detail" >
+ <Kline :type="singDetails.type"/>
</div>
- <div class="priect_top_bottom">
+ <div class="priect_top_bottom"
+ v-if="(kLineDetails.if_us != 1 && kLineDetails.type != 'hk') && kLineDetails.type != 'hk' && kLineDetails.if_zhishu == 0">
<div class="t_title">
<span>{{ '五档' }}</span>
</div>
@@ -211,12 +214,97 @@
</div>
</div>
</div>
- <div class="jianjie" :class="acseFlag ? 'isjj' : ''" ref="isjj" id="isjj">
+ <div class="priect_top_bottom" v-if="kLineDetails.if_us == 1">
+ <div class="t_title">
+ <span>{{ '分时成交' }}</span>
+ </div>
+ <div class="charts">
+ <div class="left_s">
+ <div class="t_ma">
+ <span>{{ '时间' }}</span>
+ </div>
+ <div class="ets" v-for="item in timedata.data.details">
+ <div class="left_sell1">
+ <span>{{ item.split(',')[0] }}</span>
+ </div>
+ <div class="right_sell1">
+ <span>{{ }}</span>
+ </div>
+ </div>
+
+ </div>
+ <div class="right_h">
+ <div class="t_ma">
+ <span>{{ '价格' }}</span>
+ </div>
+ <div class="ets" v-for="item in timedata.data.details">
+ <div class="left_sell1">
+ <span>{{ item.split(',')[1] }}</span>
+ </div>
+ <div class="right_sell1">
+ <span>{{ }}</span>
+ </div>
+ </div>
+
+ </div>
+ <div class="right_h">
+ <div class="t_ma">
+ <span>{{ '成交量' }}</span>
+ </div>
+ <div class="ets" v-for="item in timedata.data.details">
+ <div class="left_sell1">
+ <span>{{ item.split(',')[2] }}</span>
+ </div>
+ <div class="right_sell1">
+ <span>{{ }}</span>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ <div class="jianjie" v-if="!(kLineDetails.if_zhishu != '0' && singDetails.gid.indexOf('hk') > -1)"
+ :class="acseFlag ? 'isjj' : ''" ref="isjj" id="isjj">
<div class="top_jj">
<span>{{ '简介' }}</span>
</div>
<div class="jet">
<span>{{ jianjie }}</span>
+ </div>
+ </div>
+ <div class="hknews" v-if="kLineDetails.if_zhishu != '0' && singDetails.gid.indexOf('hk') > -1">
+
+ <div class="news-tab">
+ <div class="t_title">
+ <span>{{ '新闻' }}</span>
+ </div>
+ <mt-tab-container v-model="news" :swipeable="false" style="padding-top: 0.5rem;">
+ <mt-tab-container-item id="tab_2">
+ <div class="news-content">
+ <div class="item-out" v-for="(item, inde) in newsdetailList" :key="inde">
+ <div class="item-times">{{ item.Art_ShowTime | utc2beijing }}</div>
+ <div class="titContent" style="-webkit-box-orient: vertical;">{{ item.Art_Title }}</div>
+ </div>
+ </div>
+ </mt-tab-container-item>
+ </mt-tab-container>
+ </div>
+ </div>
+ <div class="hknews" v-else>
+ <div class="news-tab">
+ <div class="t_title">
+ <span>{{ '新闻' }}</span>
+ </div>
+ <mt-tab-container v-model="news" :swipeable="false" style="padding-top: 0.5rem;">
+ <mt-tab-container-item id="tab_2">
+ <div class="news-content">
+ <div class="item-out" v-for="(item, inde) in newsdetailList" :key="inde">
+ <div class="item-times">{{ item.addTime | gettime }}</div>
+ <div class="titContent" style="-webkit-box-orient: vertical;">{{ item.title }}</div>
+ </div>
+ </div>
+ </mt-tab-container-item>
+ </mt-tab-container>
</div>
</div>
<div class="border_bottom"></div>
@@ -228,7 +316,7 @@
<img src="../../assets/img/shoucangle.png" alt v-else />
</div>
<div class="right_xx" @click="handleJj()">
- <a href="#isjj"><img src="../../assets/img/xiaoxi.png" alt /></a>
+ <a href="#"><img src="../../assets/img/xiaoxi.png" alt /></a>
</div>
</div>
<div class="rights">
@@ -261,30 +349,55 @@
name: "kline",
data() {
return {
+ news: 'tab_2',
kLineDetails: {}, // K线图详情数据
singDetails: {},
scFlag: false,
acseFlag: false,
jianjie: "",
- optionBtn:false,
- isOptionOpt:false,
- dialogFlag:false,
+ optionBtn: false,
+ isOptionOpt: false,
+ dialogFlag: false,
+ timedata: [],
+ newsdetailList: []
};
},
components: {
Kline
},
created() {
+
const { query } = this.$route;
this.kLineDetails = query;
+ if (query.if_us == '1') {
+
+ this.getSingDetailUs();
+ } else {
+ this.getSingDetails();
+ }
this.getOpation();
// this.$Lazyload();
- this.getSingDetails();
this.getUserInfo();
},
+
+ // beforeDestroy() {
+ // this.Klinetype = false;
+ // window.clearInterval()
+ // },
methods: {
+ async getHknews() {
+ await api.queryIndexNews().then(res => {
+ if (res.status == 0) {
+ this.newsdetailList = res.data.data;
+ }
+ });
+ },
+ async getNohknews() {
+ let data = await api.queryNewsList(4);
+ this.newsdetailList = data.data.list
+ },
async option() {
- if(this.optionBtn){
+ if (this.optionBtn) {
return
};
this.optionBtn = true;
@@ -295,8 +408,10 @@
this.optionBtn = false;
} else {
this.optionBtn = false;
- console.log(data.msg);
-
+ this.$message({
+ message: data.msg,
+ type: 'warning'
+ });
}
} else {
let data = await api.addOption({ code: this.kLineDetails.code });
@@ -304,9 +419,16 @@
this.getOpation();
this.optionBtn = false;
} else {
- console.log(data.msg);
+ this.$message({
+ message: data.msg,
+ type: 'warning'
+ });
this.optionBtn = false;
}
+ }
+ if (navigator.vibrate) {
+ // 支持
+ navigator.vibrate([55]);
}
},
async getUserInfo() {
@@ -321,18 +443,18 @@
}
this.$store.state.user = this.user;
},
- async getOpation () {
- let opts = {
- code: this.$route.query.code
- }
- let data = await api.isOption(opts)
- if (data.status === 0) {
- // 0 --> 未添加
- this.isOptionOpt = false
- } else {
- this.isOptionOpt = true
- }
- },
+ async getOpation() {
+ let opts = {
+ code: this.$route.query.code
+ }
+ let data = await api.isOption(opts)
+ if (data.status === 0) {
+ // 0 --> 未添加
+ this.isOptionOpt = false
+ } else {
+ this.isOptionOpt = true
+ }
+ },
async getSingDetails() {
let opts = {
code: this.kLineDetails.code,
@@ -341,11 +463,44 @@
await api.getSingleStock(opts).then(res => {
if (res.status === 0) {
this.singDetails = res.data.stock;
+
if (res.data.introduction) {
- this.jianjie = res.data.introduction.result.data.fareArea;
+ this.jianjie = res.data.introduction;
} else {
this.jianjie = res.data.indexintroduction;
}
+ console.log(this.singDetails);
+ if (this.kLineDetails.if_zhishu != '0' && this.singDetails.gid.indexOf('hk') > -1) {
+ this.getHknews();
+ } else {
+ this.getNohknews();
+ }
+ }
+ });
+ },
+ async getSingDetailUs() {
+ let opts = {
+ code: this.kLineDetails.code,
+ stockType: this.kLineDetails.type
+ };
+ await api.getUsDetail(opts).then(res => {
+ // console.log(res,1111123);
+ // var that = this
+ // if(!res){
+ // setTimeout(() => {
+ // that.getSingDetailUs()
+ // }, 3000);
+
+ // }
+ if (res.status === 0) {
+ this.singDetails = res.data.stock;
+ this.timedata = res.data.timedata;
+ if (res.data.introduction) {
+ this.jianjie = res.data.introduction;
+ } else {
+ this.jianjie = res.data.indexintroduction;
+ }
+ this.getNohknews();
console.log(this.singDetails);
}
});
@@ -355,6 +510,10 @@
setTimeout(() => {
this.acseFlag = false;
}, 1000);
+ if (navigator.vibrate) {
+ // 支持
+ navigator.vibrate([55]);
+ }
},
handleBack() {
this.$router.go(-1);
@@ -366,23 +525,169 @@
this.$router.push({
path: "/TradingBuy",
query: {
- t:index,
- code:this.kLineDetails.code,
- m:this.singDetails.nowPrice,
- type:this.kLineDetails.if_zhishu,
- name:this.kLineDetails.name,
+ t: index,
+ code: this.kLineDetails.code,
+ m: this.singDetails.nowPrice,
+ type: this.kLineDetails.if_zhishu,
+ name: this.kLineDetails.name,
+ if_us: this.kLineDetails.if_us,
}
});
+ if (navigator.vibrate) {
+ // 支持
+ navigator.vibrate([55]);
+ }
+ }
+ },
+ filters: {
+ getName(name) {
+ if (name.length > 15) {
+ return name.substring(0, 14);
+ } else {
+ return name;
+ }
+ },
+ gettime(time) {
+ if (!time) {
+ return "";
+ }
+ var nd = new Date(time);
+ var y = nd.getFullYear();
+ var mm = nd.getMonth() + 1;
+ var d = nd.getDate();
+ var h = nd.getHours();
+ var m = nd.getMinutes();
+ var c = nd.getSeconds();
+ if (mm < 10) {
+ mm = "0" + mm;
+ }
+ if (d < 10) {
+ d = "0" + d;
+ }
+ if (h < 10) {
+ h = "0" + h;
+ }
+ if (m < 10) {
+ m = "0" + m;
+ }
+ if (c < 10) {
+ c = "0" + c;
+ }
+ //17:35:2922-06-2022
+ return y + "-" + mm + "-" + d + " " + h + ":" + m + ":" + c;
+ },
+ utc2beijing(utc_datetime) {
+ // 转为正常的时间格式 年-月-日 时:分:秒
+ var T_pos = utc_datetime.indexOf('T');
+ var Z_pos = utc_datetime.indexOf('Z');
+ var year_month_day = utc_datetime.substr(0, T_pos);
+ var hour_minute_second = utc_datetime.substr(T_pos + 1, Z_pos - T_pos - 1);
+ var new_datetime = year_month_day + " " + hour_minute_second; // 2017-03-31 08:02:06
+
+ // 处理成为时间戳
+ timestamp = new Date(Date.parse(new_datetime));
+ timestamp = timestamp.getTime();
+ timestamp = timestamp / 1000;
+
+ // 增加8个小时，北京时间比utc时间多八个时区
+ var timestamp = timestamp + 8 * 60 * 60;
+
+ // 时间戳转为时间
+ var beijing_datetime = new Date(parseInt(timestamp) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
+ return beijing_datetime; // 2017-03-31 16:02:06
}
}
};
</script>
<style scoped lang="less">
+.news-tab {
+ width: 100%;
+ position: relative;
+ left: 0;
+ right: 0;
+ margin: auto;
+ margin-top: 0.2rem;
+ border-radius: 0.4rem 0.4rem 0 0;
+ padding-top: 0.3rem;
+
+ .t_title {
+ width: 100%;
+ font-size: 0.4546rem;
+ margin-top: 0.2rem;
+ padding: 0 0.3rem;
+
+ span{
+ font-weight: 700;
+ }
+ }
+
+ /deep/.is-selected .tab-name {
+ position: relative;
+ }
+
+ /deep/.mint-navbar .mint-tab-item.is-selected {
+ border: 0 !important;
+ border-bottom: none;
+ }
+
+ /deep/.is-selected .tab-name:after {
+ position: absolute;
+ display: block;
+ content: '';
+ height: .07rem;
+ background-color: #1381A4;
+ width: 100%;
+ left: 0;
+ bottom: -.25rem;
+ }
+}
+
+.news-content {
+ position: relative;
+ padding: 0.3rem;
+}
+
+.item-out {
+ position: relative;
+ border-left: 0.01rem solid rgba(192, 192, 192, 0.8);
+ padding: 0 0.25rem 1rem 0.25rem;
+}
+
+.item-out::before {
+ content: "●";
+ position: absolute;
+ top: -0.1rem;
+ left: -0.128rem;
+ margin: auto;
+}
+
+.item-times {
+ color: #999;
+ margin-bottom: 0.15rem;
+}
+
+.titContent {
+ position: relative;
+ width: 100%;
+ font-size: .35rem;
+ line-height: .46rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ -webkit-line-clamp: 2;
+ display: -webkit-box;
+}
+
+
+
+
+
+
.ti_cont {
width: 100%;
display: flex;
}
+
.kline_detail_page {
width: 100%;
height: calc(100% - 1.7rem);
@@ -394,6 +699,7 @@
position: relative;
}
}
+
.sss {
width: 50%;
height: 1.2rem;
@@ -401,6 +707,7 @@
justify-content: flex-end;
align-items: center;
}
+
.detail_title {
width: 100%;
height: 3.2rem;
@@ -752,12 +1059,12 @@
.jianjie {
width: 100%;
- height: 5rem;
+ // height: 5rem;
background: rgb(255, 255, 255);
margin-top: 0.2rem;
- border-radius: 0.3rem 0.3rem 0 0;
- margin-bottom: 1.7rem;
- padding: 0 0.3rem;
+ border-radius: 0.3rem;
+ margin-bottom: 0.3rem;
+ padding: 0.4rem 0.3rem;
.top_jj {
width: 100%;
@@ -780,7 +1087,7 @@
}
}
- @-webkit-keyframes zy{
+@-webkit-keyframes zy {
10% {
transform: rotate(15deg);
}
@@ -813,10 +1120,12 @@
animation: zy 2.5s 0.15s linear infinite;
animation: zy 2.5s 0.15s linear infinite;
}
+
.content_money {
width: 80%;
height: 80%;
}
+
.sanjiao {
width: 0.4rem;
height: 0.4rem;
@@ -829,12 +1138,14 @@
height: 0.4rem;
}
}
+
.top_price {
width: 100%;
height: 70%;
display: flex;
align-items: center;
justify-content: flex-end;
+
.left {
width: 0.8rem;
height: 0.4103rem;
@@ -863,12 +1174,14 @@
margin-left: 0.1rem;
margin-right: 0.1rem;
min-width: 1.9rem;
+
span {
font-weight: 600;
text-align: right;
}
}
}
+
.bottom_balance {
width: 100%;
height: 30%;
--
Gitblit v1.9.3