503 lines
15 KiB
Vue
503 lines
15 KiB
Vue
<template>
|
||
<div class="dynamic">
|
||
<van-pull-refresh
|
||
v-model="refreshing"
|
||
@refresh="onRefresh"
|
||
:loosing-text="$t('loosing_text')"
|
||
:loading-text="$t('loading_text')"
|
||
>
|
||
<van-list v-model="loading" :finished="finished" @load="getList">
|
||
<div v-if="photosList.length > 0 && make_friends == 1 && !isLabel">
|
||
<div style="height: 10px"></div>
|
||
<div class="Single_square_box alignment_left" @click="goToUrl('makingFriendsList')">
|
||
<div class="Single_square alignment_left">
|
||
<div class="Single_user_box alignment_left" v-for="(item, index) in photosList" :key="index">
|
||
<div
|
||
class="Single_user_photo backCover"
|
||
v-bind:style="{ backgroundImage: 'url(' + item.pic + ')' }"
|
||
></div>
|
||
</div>
|
||
<div style="margin-left: 20px">又有人进入单身广场，戳此看看>></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding-bottom: 110px">
|
||
<div>
|
||
<div class="moreCourseBox">
|
||
<div id="elementLeft">
|
||
<div
|
||
class="courseBox"
|
||
v-for="(item, index) in listLeft"
|
||
:key="index"
|
||
@click="goToUrlId(item.type, item)"
|
||
>
|
||
<van-image
|
||
fit="cover"
|
||
v-if="item.pic"
|
||
class="u_lstImg"
|
||
:class="item.type == 'video' ? 'sel' : ''"
|
||
:src="item.pic"
|
||
alt=""
|
||
/>
|
||
<div class="labelBox" @click.stop="goToLabel(item)" v-if="item.tag">
|
||
<div class="labelBoxImg"></div>
|
||
<div class="labelBoxText ellipsis_1">{{item.tag.name}}</div>
|
||
</div>
|
||
<div class="m_lstCt">
|
||
<div class="font16 color2a" :class="item.type == 'information' ? 'ellipsis_2' : 'ellipsis_1'">
|
||
{{ item.title }}
|
||
</div>
|
||
<div class="m_lstCt_ta f-fbc">
|
||
<div class="f-fc">
|
||
<van-image
|
||
fit="cover"
|
||
class="u_pv_icon"
|
||
src="https://image.fulllinkai.com/202111/10/b82efdd72a34150688ead6f1f2a32d79.png"
|
||
alt=""
|
||
/>
|
||
<div class="font13 color9">{{ item.pv }}</div>
|
||
</div>
|
||
<div class="font12" style="color: #c8c8c8">{{ item.created_at }}</div>
|
||
</div>
|
||
</div>
|
||
<van-image
|
||
v-if="item.type == 'video'"
|
||
fit="contain"
|
||
width="20"
|
||
height="20"
|
||
class="list_item_icon"
|
||
src="https://image.fulllinkai.com/202111/12/50abd53df312139611640b39f35686d7.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<div v-if="showLoaded && leftShow && !isLabel" class="courseBox" @click="goToAboutUs">
|
||
<van-image
|
||
fit="cover"
|
||
v-if="$store.state.app.info.avatar"
|
||
class="u_lstImg"
|
||
:src="$store.state.app.info.avatar"
|
||
alt=""
|
||
/>
|
||
<div class="m_lstCt">
|
||
<div class="font16 color2a ellipsis_2">
|
||
{{ $store.state.app.info.name }}
|
||
</div>
|
||
<div class="m_lstCt_ta f-fbc ellipsis_2">
|
||
{{ $store.state.app.info.designation }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="elementRight">
|
||
<div
|
||
class="courseBox"
|
||
v-for="(item, index) in listRight"
|
||
:key="index"
|
||
@click="goToUrlId(item.type, item)"
|
||
>
|
||
<van-image
|
||
fit="cover"
|
||
v-if="item.pic"
|
||
class="u_lstImg"
|
||
:class="item.type == 'video' ? 'sel' : ''"
|
||
:src="item.pic"
|
||
alt=""
|
||
/>
|
||
<div class="labelBox" @click.stop="goToLabel(item)" v-if="item.tag">
|
||
<div class="labelBoxImg"></div>
|
||
<div class="labelBoxText ellipsis_1">{{item.tag.name}}</div>
|
||
</div>
|
||
<div class="m_lstCt">
|
||
<div class="font16 color2a" :class="item.type == 'information' ? 'ellipsis_2' : 'ellipsis_1'">
|
||
{{ item.title }}
|
||
</div>
|
||
<div class="m_lstCt_ta f-fbc">
|
||
<div class="f-fc">
|
||
<van-image
|
||
fit="cover"
|
||
class="u_pv_icon"
|
||
src="https://image.fulllinkai.com/202111/10/b82efdd72a34150688ead6f1f2a32d79.png"
|
||
alt=""
|
||
/>
|
||
<div class="font13 color9">{{ item.pv }}</div>
|
||
</div>
|
||
<div class="font12" style="color: #c8c8c8">{{ item.created_at }}</div>
|
||
</div>
|
||
</div>
|
||
<van-image
|
||
v-if="item.type == 'video'"
|
||
fit="contain"
|
||
width="20"
|
||
height="20"
|
||
class="list_item_icon"
|
||
src="https://image.fulllinkai.com/202111/12/50abd53df312139611640b39f35686d7.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<div v-if="showLoaded && !leftShow && !isLabel" class="courseBox" @click="goToAboutUs">
|
||
<van-image
|
||
fit="cover"
|
||
v-if="$store.state.app.info.avatar"
|
||
class="u_lstImg"
|
||
:src="$store.state.app.info.avatar"
|
||
alt=""
|
||
/>
|
||
<div class="m_lstCt">
|
||
<div class="font16 color2a ellipsis_2">
|
||
{{ $store.state.app.info.name }}
|
||
</div>
|
||
<div class="m_lstCt_ta f-fbc ellipsis_2">
|
||
{{ $store.state.app.info.designation }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div v-if="showLoaded" class="courseBox" @click="goToAboutUs">
|
||
<div class="m_lstCt">
|
||
<div class="font16 color2a ellipsis_2">{{ $store.state.app.info.name }}</div>
|
||
<div class="m_lstCt_ta f-fc">
|
||
<div class="font14 color9 ellipsis_2">{{ $store.state.app.info.designation }}</div>
|
||
</div>
|
||
</div>
|
||
<van-image fit="cover" radius="4" class="u_lstImg" :src="$store.state.app.info.avatar" alt="" />
|
||
</div> -->
|
||
</div>
|
||
<div class="bottomLine font12 color6 text-center" v-if="noMoreData">
|
||
- {{ $t('I_have_a_line_in_the_sand') }} -
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-list>
|
||
</van-pull-refresh>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { formatDate } from '@/plugins/timeConversion'
|
||
import { $toastClear, $toastLoading } from '@/config/toast'
|
||
import service from '@/utils/request'
|
||
|
||
export default {
|
||
computed: {},
|
||
components: {},
|
||
props: {
|
||
isLabel: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
labelId: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
make_friends: '',
|
||
merchant_id: false,
|
||
list: [],
|
||
photosList: [],
|
||
listLeft: [],
|
||
listRight: [],
|
||
page: 1,
|
||
pv_time: true,
|
||
showLoaded: false,
|
||
finished: false,
|
||
loading: false,
|
||
refreshing: false,
|
||
emptyData: true,
|
||
noMoreData: false,
|
||
leftShow: true,
|
||
heightLeft: 0,
|
||
heightRight: 0
|
||
}
|
||
},
|
||
watch: {
|
||
$route(to, from) {
|
||
if (from.name == 'welcome') {
|
||
this.page = 1
|
||
this.list = []
|
||
this.onRefresh()
|
||
}
|
||
},
|
||
list(e) {
|
||
if (this.page === 1) {
|
||
this.listLeft = []
|
||
this.listRight = []
|
||
}
|
||
if (e.length > 0) {
|
||
e.forEach((item, index) => {
|
||
this.getOffsetWidth(item)
|
||
})
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
goToLabel(item) {
|
||
console.log(item, 'item-----')
|
||
// return
|
||
this.$router.push({
|
||
name: 'dynamicClassification',
|
||
params: {
|
||
id: item.tag.id
|
||
}
|
||
})
|
||
},
|
||
goToUrl(url) {
|
||
this.$router.push({
|
||
name: url
|
||
})
|
||
},
|
||
getOffsetWidth(item) {
|
||
const vm = this
|
||
setTimeout(() => {
|
||
vm.$nextTick(() => {
|
||
var listLeft = document.getElementById('elementLeft')
|
||
var listRight = document.getElementById('elementRight')
|
||
var h_l = listLeft.offsetHeight
|
||
var h_r = listRight.offsetHeight
|
||
if (h_l < h_r) {
|
||
vm.leftShow = false
|
||
vm.listLeft.push(item)
|
||
} else {
|
||
vm.leftShow = true
|
||
vm.listRight.push(item)
|
||
}
|
||
})
|
||
vm.showLoaded = true
|
||
}, 200)
|
||
},
|
||
getPhotos() {
|
||
const url = `s/h5/friend/photos`
|
||
service
|
||
.get(url)
|
||
.then(data => {
|
||
this.photosList = data
|
||
})
|
||
.catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
getList() {
|
||
const vm = this
|
||
$toastLoading(vm.$i18n.t('loading_text'))
|
||
let url = ''
|
||
if (!vm.isLabel) {
|
||
url = `/s/h5/video/infor/list?page=${vm.page}`
|
||
} else {
|
||
url = `/s/h5/tag/informations?page=${vm.page}&tag_id=${vm.labelId}`
|
||
}
|
||
service
|
||
.get(url)
|
||
.then(data => {
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.make_friends = this.$store.state.app.info.make_friends
|
||
console.log(this.make_friends)
|
||
}, 300)
|
||
})
|
||
if (data.data.length != 0) {
|
||
data.data.forEach(item => {
|
||
item.created_at = item.created_at.replace(/-/g, '/')
|
||
item.created_at = formatDate(item.created_at, 1)
|
||
})
|
||
}
|
||
const dataV = vm.page === 1 ? [] : vm.list
|
||
dataV.push(...data.data)
|
||
vm.list = data.data
|
||
// vm.list = dataV
|
||
vm.refreshing = false
|
||
if (vm.list.length !== 0) {
|
||
vm.emptyData = true
|
||
} else {
|
||
vm.emptyData = false
|
||
}
|
||
if (vm.list.length < 15 || data.data.length < 15) {
|
||
vm.finished = true
|
||
vm.noMoreData = true
|
||
if (vm.list.length === 0) {
|
||
vm.noMoreData = false
|
||
}
|
||
$toastClear()
|
||
return
|
||
} else {
|
||
vm.loading = false
|
||
$toastClear()
|
||
}
|
||
vm.page++
|
||
setTimeout(() => {
|
||
$toastClear()
|
||
}, 500)
|
||
})
|
||
.catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
onRefresh() {
|
||
this.page = 1
|
||
this.finished = false
|
||
this.loading = true
|
||
this.getList()
|
||
},
|
||
goToAboutUs() {
|
||
this.$router.push({
|
||
name: 'aboutUs'
|
||
})
|
||
},
|
||
goToUrlId(type, item) {
|
||
this.showLoaded = false
|
||
if (type == 'information') {
|
||
this.$router.push({
|
||
name: 'dynamicParticulars',
|
||
params: { id: item.id }
|
||
})
|
||
if (this.pv_time) {
|
||
this.pv_time = false
|
||
item.pv += 1
|
||
}
|
||
} else {
|
||
if (localStorage.getItem('merchant_id') == '40') {
|
||
this.$router.push({
|
||
name: 'videoDetailsV2',
|
||
params: { id: item.id }
|
||
})
|
||
return
|
||
}
|
||
this.$router.push({
|
||
name: 'videoDetails',
|
||
params: { id: item.id }
|
||
})
|
||
}
|
||
}
|
||
},
|
||
deactivated() {
|
||
this.pv_time = true
|
||
},
|
||
created() {
|
||
},
|
||
mounted() {
|
||
// document.title = localStorage.getItem('merchant_name') ? localStorage.getItem('merchant_name') + ` · ${this.$i18n.t(localStorage.getItem('informationTitle'))}` : this.$i18n.t(localStorage.getItem('informationTitle'))
|
||
const ScrollTop = document.getElementById('app')
|
||
ScrollTop.scrollTop = 0
|
||
this.getPhotos()
|
||
if (
|
||
parseInt(localStorage.getItem('merchant_id')) === 5 ||
|
||
parseInt(localStorage.getItem('merchant_id')) === 40 ||
|
||
parseInt(localStorage.getItem('merchant_id')) === 596 ||
|
||
parseInt(localStorage.getItem('merchant_id')) === 16
|
||
) {
|
||
this.merchant_id = true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.dynamic {
|
||
width: 100vw;
|
||
background: #ffffff;
|
||
}
|
||
.emptyDataIcon {
|
||
width: 135px;
|
||
height: 100px;
|
||
display: block;
|
||
margin: 0 auto;
|
||
}
|
||
.Single_square_box {
|
||
margin: 0 15px;
|
||
height: 48px;
|
||
border-radius: 24px;
|
||
background: #f2f3ff;
|
||
.Single_square {
|
||
margin-left: 15px;
|
||
.Single_user_box {
|
||
border: 2px solid #ffffff;
|
||
margin-right: -10px;
|
||
border-radius: 50%;
|
||
.Single_user_photo {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.moreCourseBox,
|
||
.m_abo {
|
||
padding: 15px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
.courseBox {
|
||
width: 168px;
|
||
margin-bottom: 12px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
|
||
box-sizing: border-box;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
.labelBox{
|
||
position: absolute;
|
||
top: 101px;
|
||
left: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 0 0 5px;
|
||
width: fit-content;
|
||
max-width: 90px;
|
||
height: 20px;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
border-radius: 10px;
|
||
.labelBoxImg{
|
||
/*margin-top: 2px;*/
|
||
height:16px;
|
||
width: 16px;
|
||
background-image: url("https://image.fulllinkai.com/202201/11/5804938d3f57ff3dd581b1a780d80808.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.labelBoxText{
|
||
flex: 1;
|
||
//margin-top: -1px;
|
||
margin-left: 4px;
|
||
padding-right: 10px;
|
||
font-size: 12px;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
.list_item_icon {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 10px;
|
||
}
|
||
.m_lstCt {
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
.m_lstCt_ta {
|
||
padding-top: 10px;
|
||
.u_pv_icon {
|
||
width: 12px;
|
||
height: 14px;
|
||
margin-right: 3px;
|
||
}
|
||
}
|
||
}
|
||
.u_lstImg {
|
||
width: 100%;
|
||
height: 126px;
|
||
}
|
||
.u_lstImg.sel {
|
||
width: 100%;
|
||
height: 224px;
|
||
}
|
||
}
|
||
}
|
||
.bottomLine {
|
||
padding-top: 20px;
|
||
}
|
||
</style>
|
||
<style>
|
||
.van-list {
|
||
background-color: white;
|
||
}
|
||
</style>
|