2.4 组件结构调整,调整会员权限判断
This commit is contained in:
171
pagesStock/components/news-view/news-view.vue
Normal file
171
pagesStock/components/news-view/news-view.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<view>
|
||||
<template v-if="showType == 0">
|
||||
<view style="padding: 20rpx;">
|
||||
<view style="background-color: #F3F3F3; display: flex; align-items: center; height: 70rpx; border-radius: 30rpx; overflow: hidden;">
|
||||
<view style="display: flex; align-items: center; justify-content: center; width: 62rpx;">
|
||||
<image style="width: 25rpx; height: 24rpx;" src="/pagesStock/static/icon/news-search.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<input style="flex: 1; height: 100%; font-size: 22rpx; color: #999; margin-right: 20rpx;" type="text" v-model="keywords" placeholder="搜索相关新闻..." confirm-type="search" @confirm="clickSearch()"/>
|
||||
</view>
|
||||
|
||||
<view class="newsList">
|
||||
<view class="item" style="border: 1rpx solid #E7E7E7; border-radius: 10rpx; padding: 0 27rpx; margin: 20rpx 0;" v-for="(item,index) in newsList" :key="index" @click="clickNewsItem(item)">
|
||||
<view style="color: #2B2B2B; font-size: 26rpx; font-weight: bold; margin-top: 20rpx;">{{item.title}}</view>
|
||||
<view style="display: flex; align-items: center; color: #999999; font-size: 22rpx; font-weight: 400;">
|
||||
<image style="width: 20rpx; height: 20rpx; margin-right: 5rpx;" src="/pagesStock/static/icon/newsTime.png" mode="widthFix"></image>
|
||||
<text>{{getLocalDate(item.created_at)}}</text>
|
||||
<text style="margin: 10rpx;">|</text>
|
||||
<image style="width: 18rpx; height: 13rpx; margin-right: 5rpx;" src="/pagesStock/static/icon/newsEyes.png" mode="widthFix"></image>
|
||||
<text>{{item.view_count}}</text>
|
||||
<text style="margin: 10rpx;">|</text>
|
||||
<image style="width: 16rpx; height: 19rpx; margin-right: 5rpx;" src="/pagesStock/static/icon/newsFire.png" mode="widthFix"></image>
|
||||
<text>{{item.hot_score}}</text>
|
||||
</view>
|
||||
|
||||
<view class="labelList flexWrap">
|
||||
<view class="label eventType">{{item.event_type}}</view>
|
||||
<view class="label investScore">投资分:{{item.invest_score}}</view>
|
||||
<view v-for="(kitem, kindex) in item.keywords" :key="kindex" style="background-color: #FFFAF0; border-radius: 3rpx; padding: 2rpx 10rpx; overflow: hidden; font-size: 18rpx; color: #E9AE3E; font-weight: 400; margin-right: 10rpx;">{{kitem}}</view>
|
||||
</view>
|
||||
|
||||
<view style="margin: 20rpx 0; font-size: 22rpx; color: #71675D; font-weight: 500;">{{item.description}}</view>
|
||||
|
||||
<view v-if="item.related_avg_chg" style="height: 1rpx; background-color: #E7E7E7;"></view>
|
||||
|
||||
<view v-if="item.related_avg_chg" class="relatedChgC flex" >
|
||||
<text style="font-weight: bold; color: #2B2B2B;">相关涨跌:</text>
|
||||
<text>平均 </text>
|
||||
<text :class="'chg '+(getRateUpOrDown(item.related_avg_chg)?'down':'up')">{{getChgRateStr(item.related_avg_chg)}}%</text>
|
||||
<text style="margin: 0 20rpx;">|</text>
|
||||
<text>最大 </text>
|
||||
<text :class="'chg '+(getRateUpOrDown(item.related_max_chg)?'down':'up')">{{getChgRateStr(item.related_max_chg)}}%</text>
|
||||
<text style="margin: 0 20rpx;">|</text>
|
||||
<text>周 </text>
|
||||
<text :class="'chg '+(getRateUpOrDown(item.related_week_chg)?'down':'up')">{{getChgRateStr(item.related_week_chg)}}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-if="showType == 1">
|
||||
<view style="padding: 20rpx;" v-for="(item,index) in announcementList" :key="index" @click="clickAnnouncementItem(item)">
|
||||
<view style="border: 1rpx solid #E7E7E7; border-radius: 10rpx; padding: 0 27rpx; margin: 20rpx 0; display: flex; align-items: center;">
|
||||
<view style="flex: 1;">
|
||||
<view style="color: #2B2B2B; font-size: 26rpx; font-weight: bold; margin-top: 20rpx;">{{item.title}}</view>
|
||||
<view style="display: flex; align-items: center; color: #71675D; font-size: 22rpx; font-weight: 500; margin: 20rpx 0;">
|
||||
<text style="color: #E9AE3E; font-size: 18rpx; background-color: #FFFAF0; border-radius: 3rpx; padding: 2rpx 10rpx; margin-right: 14rpx;">公告</text>
|
||||
<text>{{item.announce_date}}</text>
|
||||
<text style="margin: 0 20rpx;">|</text>
|
||||
<text>{{item.format}}</text>
|
||||
<text style="margin: 0 20rpx;">|</text>
|
||||
<text>{{item.file_size}}KB</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding: 4rpx 10rpx; background-color: #F2C369; border-radius: 10rpx; color: #2B2B2B; font-size: 22rpx; margin-left: 10rpx;">查看</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getChgRateStr, getLocalDate, getRateUpOrDown } from '@/utils/util';
|
||||
|
||||
export default {
|
||||
name:"news-view",
|
||||
data() {
|
||||
return {
|
||||
showType: 0,
|
||||
keywords:'', //搜索关键字
|
||||
getChgRateStr:getChgRateStr,
|
||||
getRateUpOrDown:getRateUpOrDown,
|
||||
getLocalDate:getLocalDate
|
||||
};
|
||||
},
|
||||
props: {// 0 新闻动态 1 公司公告
|
||||
type: Number,
|
||||
newsList:Array, //新闻动态数组
|
||||
announcementList:Array, //公司公告数组
|
||||
},
|
||||
watch:{
|
||||
type:{
|
||||
handler(newVal)
|
||||
{
|
||||
this.showType = newVal
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 点击搜索
|
||||
*/
|
||||
clickSearch() {
|
||||
this.$emit('search',this.keywords)
|
||||
},
|
||||
/**
|
||||
* 点击查看新闻动态
|
||||
* @param {Object} item
|
||||
*/
|
||||
clickNewsItem(item) {
|
||||
this.$emit('newsDetails',item)
|
||||
},
|
||||
/**
|
||||
* 点击查看公司公告
|
||||
* @param {Object} item
|
||||
*/
|
||||
clickAnnouncementItem(item) {
|
||||
this.$emit('announcementDetails',item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.newsList
|
||||
{
|
||||
.item
|
||||
{
|
||||
.labelList
|
||||
{
|
||||
.label
|
||||
{
|
||||
margin-right: 10rpx;
|
||||
padding: 0 7rpx;
|
||||
line-height: 28rpx;
|
||||
border-radius: 3rpx;
|
||||
font-size: 18rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.eventType
|
||||
{
|
||||
background-color: #EFF6FF;
|
||||
color: #60A5FA;
|
||||
}
|
||||
.investScore
|
||||
{
|
||||
background-color: #F2EEFF;
|
||||
color: #A78BFA;
|
||||
}
|
||||
}
|
||||
.relatedChgC
|
||||
{
|
||||
margin: 20rpx 0;
|
||||
color: #71675D;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.chg.up
|
||||
{
|
||||
color: #EC3440;
|
||||
}
|
||||
.chg.down
|
||||
{
|
||||
color: #1DB26F;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user