331 lines
7.9 KiB
Vue
331 lines
7.9 KiB
Vue
<template>
|
|
<view>
|
|
<view v-if="infoArray.length > 0" class="info-wrapper">
|
|
<view class="info-list">
|
|
<view v-for="(item, index) in infoArray" :key="index" class="info-item">
|
|
<view
|
|
:class="item.isTop === 1 ? 'info-item-top' : ''"
|
|
:style="{
|
|
'background-image': item.isTop
|
|
? 'url(' + webUrl + '/page/hotel/info-top-bg.png)'
|
|
: 'none',
|
|
}"
|
|
class="info-item-header"
|
|
>
|
|
<view class="name">
|
|
{{ item.title }}
|
|
</view>
|
|
<view class="intro">
|
|
{{ item.content }}
|
|
</view>
|
|
</view>
|
|
<view class="info-item-body">
|
|
<video
|
|
v-if="item.type === 2"
|
|
@play="infoItemViewClick(item, index)"
|
|
play-btn-position="center"
|
|
:show-fullscreen-btn="false"
|
|
class="video-item v12-mt-0"
|
|
:src="item.video"
|
|
controls
|
|
:id="'video-item' + index"
|
|
:poster="item.video + '?vframe/jpg/offset/1'"></video>
|
|
<img-box
|
|
v-else
|
|
:imgList="item.images"
|
|
:num="item.images.length"
|
|
:img-radius="10"
|
|
style="width: 100%"
|
|
@click="infoItemViewClick(item)"
|
|
/>
|
|
|
|
</view>
|
|
<view class="info-item-bottom">
|
|
<view class="time">
|
|
{{
|
|
item.createTime
|
|
? item.createTime.replace(/-/g, ".").substr(0, 10)
|
|
: ""
|
|
}}
|
|
</view>
|
|
<view class="btns">
|
|
<view class="flex">
|
|
<image
|
|
:src="webUrl + '/20230803152147141807.png'"
|
|
class="icon"
|
|
/>
|
|
<text class="seeNum-txt v12-font-28">{{ $formatCount(item.pv) }}</text>
|
|
</view>
|
|
<view class="flex">
|
|
<image
|
|
v-if="!item.hasZan"
|
|
:src="webUrl + '/page/hotel/zan-off-2.png'"
|
|
class="zan-off-icon"
|
|
@click="likeInfoItemHandle(item, index, item.zan + 1, true)"
|
|
/>
|
|
<image
|
|
v-else
|
|
:src="webUrl + '/page/hotel/zan-on-2.png'"
|
|
class="zan-on-icon"
|
|
@click="likeInfoItemHandle(item, index, item.zan - 1, false)"
|
|
/>
|
|
<text
|
|
v-show="item.zan > 0"
|
|
:class="item.hasZan ? 'on' : ''"
|
|
class="seeNum-txt v12-font-28 v12-ml-1"
|
|
>{{ $formatCount(item.zan) }}</text
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<image
|
|
:src="webUrl + '/home/no-data-bg.png'"
|
|
mode="widthFix"
|
|
class="no-data-loadend"
|
|
style="width: 100%;"
|
|
/>
|
|
</view>
|
|
<image
|
|
v-if="infoArray.length === 0"
|
|
:src="webUrl + '/orderIcon/wu.png'"
|
|
class="img-nodata"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getNews,
|
|
hadLike,
|
|
hadView
|
|
} from "@/api/product"
|
|
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
|
export default {
|
|
props: {
|
|
landmarkDataId: null
|
|
},
|
|
components: {
|
|
imgBox
|
|
},
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
infoArray: [],
|
|
videoPlayers:[]
|
|
}
|
|
},
|
|
watch: {
|
|
landmarkDataId(value) {
|
|
if(value) {
|
|
this.getData()
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
getData() {
|
|
const params = {
|
|
landmarkDataId: this.landmarkDataId,
|
|
page: 1,
|
|
limit: 9999
|
|
}
|
|
getNews(params).then(res => {
|
|
this.infoArray = res.data.records || []
|
|
})
|
|
},
|
|
likeInfoItemHandle(item, index, value, voValue) {
|
|
hadLike({ landmarkNewsId: item.id }).then(res => {
|
|
const { success } = res
|
|
if (success) {
|
|
this.$dialog.toast({
|
|
mes: '操作成功!'
|
|
})
|
|
this.$set(this.infoArray[index], 'zan', value)
|
|
this.$set(this.infoArray[index], 'hasZan', voValue)
|
|
}
|
|
})
|
|
},
|
|
infoItemViewClick(item, index) {
|
|
if(item.type === 2) {
|
|
// const coverCtx = uni.createVideoContext('coverVideo', this)
|
|
// coverCtx.pause()
|
|
const playerId = 'video-item' + index
|
|
if(this.videoPlayers.includes(playerId)) {
|
|
this.videoPlayers.forEach(player => {
|
|
if(player === playerId) return
|
|
const playerCtx = uni.createVideoContext(player, this)
|
|
playerCtx.pause()
|
|
})
|
|
} {
|
|
this.videoPlayers.push(playerId)
|
|
this.videoPlayers.forEach(player => {
|
|
if(player === playerId) return
|
|
const playerCtx = uni.createVideoContext(player, this)
|
|
playerCtx.pause()
|
|
})
|
|
}
|
|
this.$emit('video')
|
|
}
|
|
uni.$u.debounce(() => {
|
|
hadView({ landmarkNewsId: item.id }).finally(() => {
|
|
this.infoArray.map(info => {
|
|
if (info.id === item.id) {
|
|
info.pv += 1
|
|
}
|
|
})
|
|
})
|
|
}, 500)
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.video-item {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.info-wrapper{
|
|
padding: 20px 10px;
|
|
}
|
|
|
|
.info-item + .info-item {
|
|
margin: 22rpx 0 0 0;
|
|
}
|
|
.info-item {
|
|
border-radius: 10rpx;
|
|
background-color: #fff;
|
|
.info-item-header {
|
|
position: relative;
|
|
padding: 20rpx 20rpx 0 20rpx;
|
|
&.info-item-top {
|
|
padding-top: 60rpx;
|
|
background-size: 100% 80rpx;
|
|
background-repeat: no-repeat;
|
|
background-image: url();
|
|
}
|
|
.name {
|
|
font-size: 16px;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
.intro {
|
|
margin: 10rpx 0 0 0;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.info-item-body {
|
|
padding: 0 20rpx 20rpx 20rpx;
|
|
.video {
|
|
padding: 20rpx 0 0 0;
|
|
.video-item {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.info-item-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
border-top: 1px solid #f1f1f1;
|
|
font-size: 16px;
|
|
.time {
|
|
flex: 1;
|
|
color: #999999;
|
|
font-size: 28rpx;
|
|
}
|
|
.btns {
|
|
display: flex;
|
|
color: #999;
|
|
.flex + .flex {
|
|
margin: 0 0 0 32rpx;
|
|
}
|
|
.flex {
|
|
align-items: center;
|
|
}
|
|
.icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin: 0 8rpx 0 0;
|
|
}
|
|
.zan-off-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
.zan-on-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
.seeNum-txt {
|
|
&.on {
|
|
color: #D81E06;
|
|
}
|
|
}
|
|
.more-btn {
|
|
position: relative;
|
|
.more-wrapper {
|
|
position: absolute;
|
|
right: -20rpx;
|
|
top: -150rpx;
|
|
z-index: 5;
|
|
width: 200rpx;
|
|
border-radius: 12rpx;
|
|
background-color: #fff;
|
|
box-shadow: 0px 1px 6px rgba(0,0,0,0.16);
|
|
.more-item + .more-item {
|
|
border-top: 1px solid #d5d5d5;
|
|
}
|
|
.more-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 70rpx;
|
|
font-size: 14px;
|
|
color: #333;
|
|
.more-icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin: 0 10rpx 0 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.info-item-top {
|
|
padding-top: 60rpx;
|
|
background-size: 100% 80rpx;
|
|
background-repeat: no-repeat;
|
|
background-image: url();
|
|
}
|
|
.name {
|
|
font-size: 16px;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
.intro {
|
|
margin: 10rpx 0 0 0;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
.img-nodata {
|
|
position: relative;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
width: 352rpx;
|
|
height: 338rpx;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
</style>
|
|
|