1675 lines
41 KiB
Vue
1675 lines
41 KiB
Vue
<template>
|
||
<view :style="{height: containerHeight + 'px'}" class="container" id="container">
|
||
|
||
<swiper class="video-swiper" :circular="circular" :easing-function="easingFunction" :vertical="true"
|
||
:current="swiperCurrent" :duration="duration" @animationfinish="animationfinish"
|
||
@transition="swiperTransition">
|
||
<!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
|
||
<swiper-item v-for="(item, index) in curQueue" :key="item.idxKey">
|
||
<u-swiper :autoplay="true" :list="item.images" @change="change" height="100vh" :radius="0"
|
||
:indicator="false" bgColor="linear-gradient(to bottom, #0f001f, #43224f,#0f001f)"
|
||
imgMode="aspectFit" :circular="true" :loading="loading" key-name="src" lazyLoad
|
||
:containerHeight="containerHeight"></u-swiper>
|
||
|
||
<!-- 浮动元素开始 -->
|
||
<view class="user-info" @click="onUserDetail(item.userId,index)">
|
||
<view class="title">@{{ item.nickname }}</view>
|
||
<view class="tag">
|
||
<view class="btn" v-if="item.age">{{ item.age }}岁</view>
|
||
<view class="btn" v-if="item.height">{{ item.height }}</view>
|
||
<view class="btn" v-if="item.position">{{ item.position }}</view>
|
||
<view class="btn" v-if="item.city">{{ item.city }}</view>
|
||
<view class="btn" v-if="item.yearlyPay">{{ item.yearlyPay }}</view>
|
||
</view>
|
||
<!-- <view class="mate-title">希望另一半</view> -->
|
||
<!-- <view class="tag2">
|
||
<view class="btn" v-if="item.whenMarried">期望{{ item.whenMarried }}</view>
|
||
</view>
|
||
<view class="tag2">
|
||
<view class="btn" v-if="item.ageMate">期望年龄{{ item.ageMate }}</view>
|
||
<view class="btn" v-if="item.heightMate">期望身高{{ item.heightMate }}</view>
|
||
</view> -->
|
||
<view class="desc2">
|
||
<div v-if="item.whenMarriedMate">{{ item.whenMarriedMate }}</div>
|
||
<div>{{ item.ageMate ? '期望年龄' + item.ageMate : '期望年龄不限' }}
|
||
{{ item.heightMate ? '期望身高' + item.heightMate : '期望身高不限' }}
|
||
</div>
|
||
</view>
|
||
<!-- <u-read-more>
|
||
<rich-text class="desc" :nodes="item.introduction"></rich-text>
|
||
</u-read-more> -->
|
||
<!-- <view class="desc">
|
||
|
||
</view> -->
|
||
</view>
|
||
<view class="right-bar">
|
||
<view class="avatar">
|
||
<view class="icon" @click="onUserDetail(item.userId,index)">
|
||
<image :src="item.avatar" mode="aspectFill">
|
||
</image>
|
||
<!-- <u-avatar :size="50" :src="item.avatar"
|
||
:customStyle="{border: '5rpx solid #ffffff',}"></u-avatar> -->
|
||
</view>
|
||
<view class="add" v-if="!item.follow" @click="onFollow(item.userId,index)">
|
||
<image src="../../static/icon/add4.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="heart">
|
||
<view class="icon" @click="onLikes(item,index)">
|
||
<image v-if="item.liked" src="https://oss.jimeigroup.cn/static/xin02.png"></image>
|
||
<image v-else src="https://oss.jimeigroup.cn/static/xin01.png"></image>
|
||
<!-- <u-icon v-if="item.liked" name="heart-fill" :size="40" color="#AD1384"></u-icon>
|
||
<u-icon v-else name="heart-fill" :size="40" color="#ffffff"></u-icon> -->
|
||
<span v-if="item.liked" style="color: #AD1384;">已喜欢</span>
|
||
<span v-else>喜欢</span>
|
||
<!-- <text v-if="likes > 0">{{ likes }}</text>
|
||
<text v-else>{{ item.likes }}</text> -->
|
||
<!-- <u-badge numberType="limit" :customStyle="{fontSize: '26rpx'}" inverted color="#ffffff"
|
||
:showZero="true" :value="likes > 0 ? likes : item.likes"></u-badge> -->
|
||
</view>
|
||
</view>
|
||
<view class="comment">
|
||
<view class="icon" @click="openComment(item,index)">
|
||
<image src="https://oss.jimeigroup.cn/static/pinglun.png"></image>
|
||
<!-- <u-icon name="chat-fill" :size="40" color="#ffffff"></u-icon> -->
|
||
<span>聊天</span>
|
||
<!-- <image src="https://oss.jimeigroup.cn/static/xin01.png"></image> -->
|
||
<!-- <text>{{ item.commentNumbers }}</text> -->
|
||
<!-- <u-badge numberType="limit" :customStyle="{fontSize: '26rpx'}" inverted color="#ffffff"
|
||
:showZero="true" :value="countComment || item.commentNumbers"></u-badge> -->
|
||
</view>
|
||
</view>
|
||
<!-- <view class="gift">
|
||
<view class="icon">
|
||
<image src="../../static/icon/gift.png"></image>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<!-- 浮动元素结束 -->
|
||
|
||
</swiper-item>
|
||
</swiper>
|
||
<u-popup :show="showComment" mode="bottom" :round="10" :closeable="true" @close="closeComment">
|
||
<view class="comment-popup">
|
||
<view class="head">
|
||
<text class="title">{{ countComment }}条评论</text>
|
||
</view>
|
||
<view class="user-list">
|
||
<u-list :height="310" @scrolltolower="scrolltolower" :scrollTop="anchor">
|
||
<view class="list">
|
||
<u-list-item v-for="(item, index) in comment" :key="index">
|
||
<u-cell :border="false">
|
||
<!-- <view slot="icon">
|
||
<view class="avatar">
|
||
<u-avatar size="50" :src="item.avatar"
|
||
customStyle="margin: -3px 5px -3px 0"
|
||
@click="$push('sub_pages/member/detail/detail',{userId: item.userId})"></u-avatar>
|
||
</view>
|
||
</view> -->
|
||
<view slot="label">
|
||
<view class="comment-box">
|
||
<view class="comment-avatar">
|
||
<u-avatar :size="45" :src="item.avatar"
|
||
customStyle="margin: -3px 5px -3px 0"
|
||
@click="$push('sub_pages/member/detail/detail',{userId: item.userId})"></u-avatar>
|
||
</view>
|
||
<view class="comment-content">
|
||
<view class="nickname">
|
||
{{ item.nickname }}
|
||
</view>
|
||
<rich-text class="content" :nodes="item.content"></rich-text>
|
||
<view class="reply-box">
|
||
<view class="create-time">
|
||
{{ new Date(item.createTime).getTime() | timeFrom }} ·
|
||
{{ getProvince(item.toUserProvince) }}
|
||
<text class="reply" @click="onReply(item,index)">回复</text>
|
||
</view>
|
||
<view class="like">
|
||
<!-- <u-icon name="heart" :size="18"></u-icon> -->
|
||
粉丝：
|
||
<u-badge numberType="limit" :inverted="true" color="#999999"
|
||
:value="item.fans"></u-badge>
|
||
</view>
|
||
<!-- 粉丝：{{ item.fans }} -->
|
||
</view>
|
||
<!-- 回复评论 -->
|
||
<block v-for="(reply, replyIndex) in item.children" :key="replyIndex">
|
||
<view class="reply-item">
|
||
<view class="reply-user">
|
||
<u-avatar :size="16" :src="reply.avatar"
|
||
customStyle="margin: -3px 5px -3px 0"
|
||
@click="$push('sub_pages/member/detail/detail',{userId: reply.replyUserId})"></u-avatar>
|
||
<view class="nickname">
|
||
<text class="reply-nickname1">{{
|
||
reply.nickname
|
||
}}
|
||
</text>
|
||
<u-icon v-if="reply.replyNickname"
|
||
name="play-right-fill" :size="12"
|
||
color="#999999"></u-icon>
|
||
<text class="reply-nickname2"
|
||
v-if="reply.replyNickname">{{
|
||
reply.replyNickname
|
||
}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<rich-text class="content" :nodes="reply.content"></rich-text>
|
||
<view class="reply-box">
|
||
<view class="create-time">
|
||
{{ new Date(reply.createTime).getTime() | timeFrom }} ·
|
||
{{ getProvince(reply.toUserProvince) }}
|
||
<text class="reply" @click="onReply(reply,replyIndex)">
|
||
回复
|
||
</text>
|
||
</view>
|
||
<view class="like">
|
||
粉丝：
|
||
<u-badge numberType="limit" :inverted="true"
|
||
color="#999999" :value="reply.fans"></u-badge>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view slot="right-icon">
|
||
|
||
</view>
|
||
</u-cell>
|
||
</u-list-item>
|
||
<u-empty v-if="comment.length == 0" mode="message" text="暂无评论"
|
||
icon="http://cdn.uviewui.com/uview/empty/data.png">
|
||
</u-empty>
|
||
</view>
|
||
</u-list>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="search">
|
||
<u-search :showAction="true" :placeholder="placeholder" searchIcon="chat" actionText="发送"
|
||
:actionStyle="actionStyle" v-model="form.content" @custom="onSend()"></u-search>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-modal showCancelButton @cancel="showIdCardModal = false" @confirm="doAuto" :show="showIdCardModal" title="完成认证我们才能开始配对聊天哦" cancelText="稍后认证" confirm-text="立即认证"></u-modal>
|
||
<view class="animationDom"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as UserFollowApi from '@/api/user-follow.js'
|
||
import * as UserCommentApi from '@/api/user-comment.js'
|
||
import * as UserLikeApi from '@/api/user-like.js'
|
||
import {
|
||
navTo
|
||
} from '@/core/app.js'
|
||
import {
|
||
mapMutations
|
||
} from 'vuex'
|
||
import store from '@/store'
|
||
import {
|
||
getInputSize
|
||
} from '@/utils/util.js'
|
||
|
||
|
||
const userId = uni.getStorageSync('userId')
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
anchor: 0,
|
||
getInputSize,
|
||
list: [],
|
||
user: {},
|
||
navTo,
|
||
nextQueue: [],
|
||
prevQueue: [],
|
||
curQueue: [],
|
||
circular: false,
|
||
_last: 1,
|
||
_change: -1,
|
||
_invalidUp: 0,
|
||
_invalidDown: 0,
|
||
_videoContexts: [],
|
||
total: 0,
|
||
videoBol: [false, false, false, false],
|
||
swiperCurrent: '',
|
||
clone_pop: '',
|
||
opInfo: {
|
||
showhb: false
|
||
},
|
||
actionStyle: {
|
||
background: '#681752',
|
||
color: '#ffffff',
|
||
padding: '12rpx 16rpx',
|
||
borderRadius: '50rpx'
|
||
},
|
||
iconStyle: {
|
||
background: '#681752',
|
||
},
|
||
showComment: false,
|
||
comment: [],
|
||
countComment: 0,
|
||
form: {
|
||
toUserId: 0,
|
||
replyUserId: 0,
|
||
content: '',
|
||
},
|
||
likesColor: '#ffffff',
|
||
loadMore: true,
|
||
status: '加载更多',
|
||
showLiked: false,
|
||
likes: 0,
|
||
currentIndex: 0, // 当前评论ID
|
||
placeholder: '善语结善缘，恶言伤人心',
|
||
containerHeight: 0,
|
||
showIdCardModal: false
|
||
};
|
||
},
|
||
props: {
|
||
duration: {
|
||
type: Number,
|
||
default: 500
|
||
},
|
||
windowHeight: {
|
||
type: Number,
|
||
default: 500
|
||
},
|
||
easingFunction: {
|
||
type: String,
|
||
default: 'default'
|
||
},
|
||
loop: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
index: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
loading: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
videoList: {
|
||
type: Object,
|
||
default: null
|
||
},
|
||
resetList: {
|
||
type: Boolean,
|
||
default:true
|
||
}
|
||
},
|
||
beforeMount() {
|
||
this._videoContexts = [
|
||
uni.createVideoContext('video_0', this),
|
||
uni.createVideoContext('video_1', this),
|
||
uni.createVideoContext('video_2', this),
|
||
uni.createVideoContext('video_3', this)
|
||
];
|
||
},
|
||
methods: {
|
||
...mapMutations(['ADD_FRIEND']),
|
||
change(e) {
|
||
// console.log("e: ", e);
|
||
},
|
||
onRefreshList(toUserId) {
|
||
const app = this
|
||
const limit = 100
|
||
UserCommentApi.pageComment({
|
||
toUserId,
|
||
limit
|
||
}).then(res => {
|
||
// app.countComment = res.data.count
|
||
app.comment = res.data.list.map(d => {
|
||
d.children = d.children.reverse()
|
||
return d
|
||
})
|
||
|
||
// const newList = res.data.list
|
||
// if (newList.length > 0) {
|
||
// app.comment = app.comment.concat(newList)
|
||
// } else {
|
||
// app.status = '没有更多了'
|
||
// app.loadMore = false
|
||
// }
|
||
}).catch(err => {
|
||
app.$error(err.message)
|
||
})
|
||
},
|
||
onChat() {
|
||
|
||
},
|
||
openComment(item, index) {
|
||
|
||
const loginUserId = uni.getStorageSync('userId')
|
||
if (!loginUserId || loginUserId == 1101) {
|
||
this.$push('pages/login/index')
|
||
return false
|
||
}
|
||
if(this.$store.getters.userInfo.certification != 1){
|
||
this.showIdCardModal = true
|
||
return false
|
||
}
|
||
this.ADD_FRIEND(item)
|
||
this.$push('/pages/chat/chat?friendId=' + item.userId)
|
||
// this.$push('pages/chat/chat?friendId='+item.userId)
|
||
|
||
},
|
||
// openComment(item, index) {
|
||
// const loginUserId = uni.getStorageSync('userId')
|
||
// if (!loginUserId || loginUserId == 1101) {
|
||
// this.$push('pages/login/index')
|
||
// return false
|
||
// }
|
||
// // uni.hideTabBar()
|
||
// this.comment = []
|
||
// this.onRefreshList(item.userId)
|
||
// this.form.toUserId = item.userId
|
||
// this.countComment = item.commentNumbers
|
||
// this.currentIndex = index
|
||
// this.showComment = true
|
||
// },
|
||
doAuto(){
|
||
uni.navigateTo({
|
||
url: '/sub_pages/certification/id-card/id-card',
|
||
events: {
|
||
reload: () => {
|
||
this.showIdCardModal = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
closeComment() {
|
||
// uni.showTabBar()
|
||
this.showComment = false
|
||
this.placeholder = '善语结善缘，恶言伤人心'
|
||
},
|
||
onSend() {
|
||
const app = this
|
||
const {
|
||
form
|
||
} = this
|
||
if (form.content == '') {
|
||
app.$error('请填写评论内容')
|
||
return false
|
||
}
|
||
UserCommentApi.addComment(form).then(res => {
|
||
app.form.content = ''
|
||
app.onRefreshList(form.toUserId)
|
||
app.countComment = res.data.commentNumbers
|
||
app.curQueue[app.currentIndex].commentNumbers = res.data.commentNumbers
|
||
app.anchor = app.anchor + 0.01
|
||
// app.$success(res.message)
|
||
}).catch(err => {
|
||
app.$error(err.message)
|
||
})
|
||
},
|
||
onLikes(toUser, index) {
|
||
console.log("toUser: ",toUser);
|
||
const app = this
|
||
const loginUserId = uni.getStorageSync('userId')
|
||
if (!loginUserId || loginUserId == 1101) {
|
||
this.$push('pages/login/index')
|
||
return false
|
||
}
|
||
// console.log(index,toUser.userId);
|
||
// console.log("app.: ",app.curQueue);
|
||
// console.log("app.videoList: ",app.videoList);
|
||
UserLikeApi.addLike({
|
||
toUserId: toUser.userId
|
||
}).then(res => {
|
||
const currIndex = app.curQueue.findIndex(item => item.userId == toUser.userId)
|
||
app.curQueue[currIndex].likes = res.data
|
||
app.curQueue[currIndex].liked = !app.curQueue[currIndex].liked
|
||
// app.curQueue.splice(currIndex,1)
|
||
app.$success(res.message)
|
||
// const arr = app.curQueue.map(d => {
|
||
// if(d.userId == toUser.userId){
|
||
// app.curQueue[index].likes = res.data
|
||
// app.curQueue[index].liked = !toUser.liked
|
||
// }
|
||
// })
|
||
// app.showLiked = !toUser.liked
|
||
})
|
||
},
|
||
onUserDetail(userId, index) {
|
||
const app = this
|
||
const loginUserId = store.getters.userId
|
||
if (!loginUserId || loginUserId == 1101) {
|
||
this.$push('pages/login/index')
|
||
return false
|
||
}
|
||
// this.$push('sub_pages/member/detail/detail',{userId})
|
||
uni.navigateTo({
|
||
url: `/sub_pages/member/detail/detail?userId=${userId}`,
|
||
events: {
|
||
reload: ({
|
||
follow // false
|
||
}) => {
|
||
const currentTab = uni.getStorageSync('currentTab')
|
||
if(!app.curQueue[index]) {
|
||
return
|
||
}
|
||
app.curQueue[index].follow = follow
|
||
// 取消关注，从列表中删除
|
||
if (!follow && currentTab == 2){
|
||
app.curQueue.splice(index, 1)
|
||
if(app.curQueue.length == 0) {
|
||
|
||
uni.$u.pages()[0].$vm.getvdlist();
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// getIntroduction(text){
|
||
// if(getInputSize(text) > 30){
|
||
// return text + ' 详情>>'
|
||
// }
|
||
// return text
|
||
// },
|
||
getLikesColor(e) {
|
||
if (e > 0) {
|
||
return true
|
||
}
|
||
return false
|
||
},
|
||
onFollow(shopId, index) {
|
||
const app = this
|
||
const loginUserId = store.getters.userId
|
||
if (!loginUserId || loginUserId == 1101) {
|
||
app.$push('pages/login/index')
|
||
return false
|
||
}
|
||
app.curQueue[index].follow = !app.curQueue[index].follow
|
||
UserFollowApi.addFollow({
|
||
shopId
|
||
}).then(res => {
|
||
app.$success(res.message)
|
||
})
|
||
},
|
||
toChat(item) {
|
||
if (userId == 1101 || userId == null) {
|
||
this.$push('pages/login/index')
|
||
return false
|
||
}
|
||
console.log("toChat: ",item);
|
||
this.ADD_FRIEND(item.userInfo)
|
||
uni.navigateTo({
|
||
url: '/pages/chat/chat?friendId=' + item.userInfo.userId
|
||
})
|
||
},
|
||
onCommentLikes(item, index) {
|
||
const app = this
|
||
if (userId == 1101 || userId == null) {
|
||
app.$push('pages/login/index')
|
||
return false
|
||
}
|
||
UserLikeApi.addLike({
|
||
toUserId: item.userId
|
||
}).then(res => {
|
||
app.likes = res.data
|
||
app.setLikeLight(index)
|
||
})
|
||
},
|
||
setLikeLight(index) {
|
||
this.comment[index].likes = this.comment[index].likes + 1
|
||
},
|
||
_videoListChanged(newVal) {
|
||
var self = this;
|
||
if (this._videoContexts == undefined) {
|
||
setTimeout(function() {
|
||
//防止_videoContexts还没有初始化就进行下一个执行
|
||
self._videoListChanged(newVal);
|
||
}, 500);
|
||
return
|
||
}
|
||
|
||
var index = this.index;
|
||
var total = newVal.length; // 如果传入的index大于总数，则默认从0开始播放
|
||
|
||
if (index + 1 > total) {
|
||
index = 0;
|
||
}
|
||
|
||
var data = this;
|
||
let remainder = index % 3; // 3的余数--当前轮播位置
|
||
|
||
var curQueue = [];
|
||
var _pop = [];
|
||
var swiperCurrent = remainder;
|
||
newVal.forEach(function(item, idx) {
|
||
item.index = idx;
|
||
data.nextQueue.push(item);
|
||
}); // console.log(newVal, 'newval', data);
|
||
|
||
if (data.curQueue.length === 0) {
|
||
let curIndex = index > 0 ? index - 1 : 0;
|
||
self._change = ((index % 3) + 1) % 3; // 假设直接从顶部滑下来
|
||
// _this.data._last = index === 0 ? 0 : // 如果初始播放第0个视频
|
||
// // index不是0，刚好是3的倍数，上一个swiper-item的索引是2(最后一个)
|
||
// _this.data._change === 0 ? 2 : _this.data._change - 1;// 其他情况直接用_change - 1就行
|
||
|
||
self._last = remainder;
|
||
|
||
if (index === 0) {
|
||
self._invalidDown = 1;
|
||
} else {
|
||
self._invalidDown = 0;
|
||
} // 如果刚好是第0个，不允许下滑
|
||
|
||
if (total - curIndex < 2) {
|
||
self._invalidUp = 1;
|
||
} else {
|
||
self._invalidUp = 0;
|
||
} // 这个比较复杂了
|
||
// 设置前后还剩多少数据
|
||
|
||
self.prevQueue = newVal.slice(0, curIndex);
|
||
self.nextQueue = newVal.slice(curIndex + 3);
|
||
var circular = true;
|
||
|
||
if (self.nextQueue.length === 0 && self._change !== 0) {
|
||
circular = false;
|
||
}
|
||
|
||
if (self.prevQueue.length === 0 && self._change !== 2) {
|
||
circular = false;
|
||
} // 当前swiper展示的数组顺序
|
||
|
||
let indexAdd = index + 1;
|
||
let indexAdd2 = index + 2;
|
||
let indexSub = index - 1;
|
||
|
||
if (total > 4 && total % 3 == 1 && total - 1 - index <= 2) {
|
||
// 除以3余1
|
||
curQueue = [...newVal.slice(total - 1, total), ...newVal.slice(total - 3, total - 2), ...newVal
|
||
.slice(total - 2, total - 1), ...newVal.slice(total - 1, total)
|
||
];
|
||
self.circular = circular = false;
|
||
|
||
if (total - 1 - index == 0) {
|
||
self._change = 0;
|
||
self._invalidDown = 0;
|
||
self._invalidUp = 1;
|
||
self._last = 3;
|
||
swiperCurrent = 3;
|
||
self.prevQueue = newVal.slice(0, curIndex - 1);
|
||
} else if (total - 1 - index == 1) {
|
||
self._change = 0;
|
||
self._invalidDown = 0;
|
||
self._invalidUp = 0;
|
||
self._last = 2;
|
||
} else if (total - 1 - index == 2) {
|
||
self._change = 2;
|
||
self._invalidDown = 0;
|
||
self._invalidUp = 0;
|
||
self._last = 1;
|
||
self.circular = circular = true;
|
||
curQueue = [...newVal.slice(indexSub, index), ...newVal.slice(index, indexAdd), ...newVal
|
||
.slice(indexAdd, indexAdd2)
|
||
];
|
||
}
|
||
} else if (total > 4 && total % 3 == 2 && total - index - 1 <= 1) {
|
||
// 除以3余2
|
||
_pop = newVal.slice(total - 3, total - 2);
|
||
_pop = _pop[0];
|
||
|
||
if (total - index - 1 == 0 || total == index + 2) {
|
||
if (total == index + 2) {
|
||
// 当直接定位到倒数第二个播放
|
||
self._change = 1;
|
||
self._invalidDown = 0;
|
||
self._invalidUp = 0;
|
||
self._last = 0;
|
||
circular = false;
|
||
curQueue = [
|
||
...newVal.slice(total - 2, total - 1),
|
||
...newVal.slice(total - 1, total) // ...newVal.slice(total - 3, total - 2),
|
||
];
|
||
} else {
|
||
self._change = 1;
|
||
self._invalidDown = 0;
|
||
self._invalidUp = 1;
|
||
self._last = 1;
|
||
circular = false;
|
||
curQueue = [...newVal.slice(total - 2, total - 1), ...newVal.slice(total - 1, total)];
|
||
}
|
||
|
||
self.prevQueue = newVal.slice(0, total - 3);
|
||
} else if (total - index - 1 == 1) {
|
||
self._change = 1;
|
||
self._invalidDown = 0;
|
||
self._invalidUp = 0;
|
||
self._last = 0;
|
||
circular = true;
|
||
curQueue = [...newVal.slice(total - 2, total - 1), ...newVal.slice(total - 1, total), ...
|
||
newVal.slice(total - 3, total - 2)
|
||
];
|
||
}
|
||
} else {
|
||
if (total <= 4) {
|
||
// 当从第一个视频播放不需要其他操作
|
||
// 当轮播第一次 初始化值
|
||
self._change = -1;
|
||
self._last = 1;
|
||
self._invalidDown = 0;
|
||
self._invalidUp = 0; // curQueue = newVal.slice(curIndex, curIndex + 3);
|
||
|
||
curQueue = newVal;
|
||
circular = false;
|
||
} else {
|
||
if (remainder == 0 && total > 4) {
|
||
let lastArr = newVal.slice(indexSub, index); // 当这是第N轮的第一个swiper，需要裁剪上一个尾的数据
|
||
if (index == 0) {
|
||
// 当这是第一个swiper位置视频，当前最后一个视频为下2个
|
||
self._change = -1;
|
||
self._last = 1;
|
||
self._invalidDown = 0;
|
||
self._invalidUp = 0;
|
||
lastArr = newVal.slice(indexAdd2, indexAdd2 + 1);
|
||
}
|
||
curQueue = [...newVal.slice(index, indexAdd), ...newVal.slice(indexAdd, indexAdd2), ...
|
||
lastArr
|
||
];
|
||
} else if (remainder == 1 && total > 4) {
|
||
curQueue = [...newVal.slice(indexSub, index), ...newVal.slice(index, indexAdd), ...
|
||
newVal.slice(indexAdd, indexAdd2)
|
||
];
|
||
} else if (remainder == 2 && total > 4) {
|
||
let homeArr = newVal.slice(indexAdd, indexAdd2); // 当这是第三个swiper，需要裁剪将来一个
|
||
|
||
if (total === index + 1) {
|
||
// 当这是最后一个视频时，只需要裁剪前2个
|
||
circular = false;
|
||
homeArr = newVal.slice(index - 2, indexSub);
|
||
}
|
||
curQueue = [...homeArr, ...newVal.slice(indexSub, index), ...newVal.slice(index,
|
||
indexAdd)];
|
||
}
|
||
}
|
||
}
|
||
|
||
if (total <= 4) {
|
||
swiperCurrent = index;
|
||
}
|
||
self.total = total
|
||
self.curQueue = curQueue.filter(item => {
|
||
return item !== undefined
|
||
})
|
||
self.circular = circular
|
||
self.swiperCurrent = swiperCurrent
|
||
self.clone_pop = _pop
|
||
self.playCurrent(swiperCurrent);
|
||
self.calHeight()
|
||
console.log('curQueue', self.curQueue)
|
||
console.log('swiperCurrent', self.swiperCurrent)
|
||
}
|
||
},
|
||
calHeight() {
|
||
const self = this
|
||
const {
|
||
windowWidth
|
||
} = uni.getSystemInfoSync()
|
||
self.curQueue.forEach((item, index) => {
|
||
item.images.forEach((image, imageIndex) => {
|
||
uni.getImageInfo({
|
||
src: image,
|
||
success: ({
|
||
width,
|
||
height
|
||
}) => {
|
||
self.$set(self.curQueue[index].images, imageIndex, {
|
||
src: image,
|
||
originWidth: width,
|
||
originHeight: height,
|
||
ratio: width / height,
|
||
height: windowWidth / width * height,
|
||
})
|
||
}
|
||
})
|
||
})
|
||
})
|
||
},
|
||
animationfinish: function animationfinish(e) {
|
||
var _data = this;
|
||
var _last = _data._last;
|
||
var _change = _data._change;
|
||
var curQueue = _data.curQueue;
|
||
var prevQueue = _data.prevQueue;
|
||
var nextQueue = _data.nextQueue;
|
||
var total = _data.total;
|
||
var current = e.detail.current;
|
||
var diff = current - _last;
|
||
this.swiperCurrent = current;
|
||
console.log('swiperCurrent_1', this.swiperCurrent)
|
||
this.playCurrent(current);
|
||
if (diff === 0 || total <= 4) {
|
||
return;
|
||
}
|
||
|
||
this._last = current;
|
||
var direction = diff === 1 || diff === -2 ? 'up' : 'down';
|
||
if (!this.resetList){
|
||
this.circular = false
|
||
if (direction === 'up') {
|
||
const add = nextQueue.shift();
|
||
if (add) this.curQueue.push(add)
|
||
this.calHeight()
|
||
}
|
||
return
|
||
}
|
||
if (direction === 'up') {
|
||
uni.$emit('getmorevd', {
|
||
data: nextQueue.length //下划时传递剩余条件，看看要不要加载新的数据进来
|
||
})
|
||
console.log(nextQueue)
|
||
if (this._invalidDown === 0) {
|
||
var change = (_change + 1) % 3;
|
||
var add = nextQueue.shift();
|
||
var remove = curQueue[change];
|
||
|
||
if (add) {
|
||
prevQueue.push(remove);
|
||
curQueue[change] = add;
|
||
this._change = change; // strart 判断是否总数余数为多少，裁剪当前轮播放2个还是4个。正常显示3个轮播
|
||
if (total % 3 === 1 && nextQueue.length === 0) {
|
||
let timers = new Date();
|
||
let addItem = JSON.parse(JSON.stringify(add));
|
||
addItem.idxKey = timers.getTime();
|
||
curQueue[3] = addItem;
|
||
} else if (total % 3 === 2 && nextQueue.length === 0) {
|
||
let _pop = curQueue.pop();
|
||
this.clone_pop = _pop;
|
||
|
||
} // end
|
||
} else {
|
||
this._invalidUp += 1;
|
||
}
|
||
} else {
|
||
this._invalidDown -= 1;
|
||
}
|
||
}
|
||
if (direction === 'down') {
|
||
if (this._invalidUp === 0) {
|
||
var _change2 = _change;
|
||
var _remove = curQueue[_change2];
|
||
|
||
var _add = prevQueue.pop();
|
||
|
||
if (_add) {
|
||
curQueue[_change2] = _add;
|
||
nextQueue.unshift(_remove);
|
||
this._change = (_change2 - 1 + 3) % 3;
|
||
} else {
|
||
this._invalidDown += 1;
|
||
}
|
||
} else {
|
||
// strart 判断是否总数余数为多少，裁剪当前轮播放2个还是4个。正常显示3个轮播
|
||
if (total % 3 === 1 && curQueue.length === 4) {
|
||
curQueue.pop();
|
||
} else if (total % 3 === 2 && nextQueue.length === 0) {
|
||
curQueue.push(this._pop);
|
||
} // end
|
||
|
||
this._invalidUp -= 1;
|
||
}
|
||
}
|
||
var circular = true;
|
||
if (nextQueue.length === 0 && current !== 0) {
|
||
circular = false;
|
||
}
|
||
if (prevQueue.length === 0 && current !== 2) {
|
||
circular = false;
|
||
}
|
||
this.curQueue = curQueue;
|
||
this.calHeight()
|
||
this.circular = circular;
|
||
},
|
||
swiperTransition({
|
||
detail: {
|
||
dy
|
||
}
|
||
}) {
|
||
// if (this.swiperCurrent === 0 && dy < -80) this.$emit('reload')
|
||
},
|
||
menuButton(menuID, idkey) {
|
||
this.videoList.oneload = false;
|
||
console.log('菜单' + menuID + ";视频ID" + idkey)
|
||
if (menuID == "mu_0") {
|
||
this.videoList.vdlist[idkey - 1].menuInfo[0].sum++;
|
||
this.videoList.vdlist[idkey - 1].menuInfo[0].icon = "dianzan1.png";
|
||
}
|
||
|
||
},
|
||
// 点击播放或暂停
|
||
clickVideo(e) {
|
||
let current = this.swiperCurrent;
|
||
let index = e.currentTarget.dataset.index;
|
||
var videoContextPrev = uni.createVideoContext(`video_${current}`, this);
|
||
if (this.videoBol[index]) {
|
||
videoContextPrev.pause();
|
||
} else {
|
||
videoContextPrev.pause();
|
||
setTimeout(function() {
|
||
//将点击视频进行播放
|
||
videoContextPrev.play();
|
||
}, 300);
|
||
}
|
||
},
|
||
|
||
playCurrent(current) {
|
||
const app = this
|
||
app.swiperCurrent = current
|
||
console.log('swiperCurrent_2', app.swiperCurrent)
|
||
let _videoContexts = this._videoContexts;
|
||
_videoContexts.map((item, index) => {
|
||
if (current == index) {
|
||
item.play();
|
||
} else {
|
||
item.stop();
|
||
item.seek(0);
|
||
}
|
||
});
|
||
|
||
},
|
||
onPlay(e) {
|
||
let index = e.currentTarget.dataset.index;
|
||
this.videoBol[index] = true
|
||
// this.[`videoBol[${index}]`] = true
|
||
|
||
},
|
||
onPause(e) {
|
||
let index = e.currentTarget.dataset.index;
|
||
this.videoBol[index] = false
|
||
// this.[`videoBol[${index}]`] = false
|
||
},
|
||
onEnded(e) {
|
||
let index = e.currentTarget.dataset.index;
|
||
this.videoBol[index] = false
|
||
// this.[`videoBol[${index}]`] = false
|
||
},
|
||
getProvince(text) {
|
||
if (text == '广西壮族自治区') {
|
||
return '广西'
|
||
}
|
||
return text;
|
||
},
|
||
onReply(item, index) {
|
||
const app = this
|
||
if (userId == 1101 || userId == null) {
|
||
app.$push('pages/login/index')
|
||
return false
|
||
}
|
||
console.log("item: ", item);
|
||
app.placeholder = '回复@' + item.nickname
|
||
app.form.replyCommentId = item.replyCommentId ? item.replyCommentId : item.commentId
|
||
app.form.replyUserId = item.userId
|
||
UserLikeApi.addLike(app.form).then(res => {
|
||
app.likes = res.data
|
||
app.setLikeLight(index)
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
videoList: {
|
||
handler() {
|
||
var newVal = arguments[0].vdlist.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
||
if (newVal.vdlist.length) {
|
||
newVal.vdlist.map((item, index) => {
|
||
return (item.idxKey = index + 1);
|
||
});
|
||
if (newVal.oneload) { //这里控制是循环开始还是追加
|
||
this._videoListChanged(newVal.vdlist);
|
||
} else {
|
||
// 防止当前数组被污染
|
||
let arr = JSON.parse(JSON.stringify(newVal.vdlist)); // 去掉已有的数据
|
||
let nextArr = arr.splice(this.total);
|
||
this.nextQueue.push(...nextArr);
|
||
}
|
||
this.total = newVal.vdlist.length;
|
||
}
|
||
},
|
||
immediate: true,
|
||
|
||
},
|
||
_pop: {
|
||
handler(newVal, oldVal) {
|
||
this.clone_pop = newVal;
|
||
},
|
||
immediate: true
|
||
},
|
||
swiperCurrent: {
|
||
handler(newVal, oldVal) {
|
||
console.log(newVal, oldVal)
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
mounted() {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
const sysInfo = uni.getSystemInfoSync()
|
||
const containerHeight = sysInfo.windowHeight - sysInfo.statusBarHeight - 44
|
||
this.containerHeight = containerHeight
|
||
// query.select('#container').boundingClientRect((data) => {
|
||
// if(data){
|
||
|
||
// this.containerHeight = data.height
|
||
// }
|
||
// }).exec();
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
// /deep/ .u-swiper__wrapper__item__wrapper {
|
||
// position: relative;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// }
|
||
/** 爱尚家找房 **/
|
||
.container {
|
||
width: 750rpx;
|
||
background-color: #0f001f;
|
||
}
|
||
|
||
.user-info {
|
||
width: 750rpx;
|
||
position: fixed;
|
||
z-index: 999;
|
||
bottom: 20rpx;
|
||
padding: 40rpx;
|
||
height: 210rpx;
|
||
|
||
.title {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.mate-title {
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.tag2 {
|
||
display: flex;
|
||
margin-top: 10rpx;
|
||
|
||
.btn {
|
||
font-size: 26rpx;
|
||
padding: 1rpx 10rpx;
|
||
color: #ffffff;
|
||
border-radius: 10rpx;
|
||
margin-right: 10rpx;
|
||
background: linear-gradient(#47076b, #8d1a50);
|
||
}
|
||
}
|
||
|
||
.tag {
|
||
display: flex;
|
||
margin-top: 20rpx;
|
||
|
||
.btn {
|
||
font-size: 26rpx;
|
||
padding: 1rpx 10rpx;
|
||
color: #ffffff;
|
||
border-radius: 10rpx;
|
||
margin-right: 10rpx;
|
||
background: linear-gradient(#47076b, #8d1a50);
|
||
}
|
||
}
|
||
|
||
.desc {
|
||
margin-top: 20rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
width: 680rpx;
|
||
}
|
||
|
||
.desc2 {
|
||
margin-top: 20rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
width: 680rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #ffffff;
|
||
|
||
.more {
|
||
right: -26rpx;
|
||
bottom: 25rpx;
|
||
font-size: 26rpx;
|
||
color: #303133;
|
||
}
|
||
}
|
||
|
||
.text-ellipsis {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-line-clamp: 2;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
|
||
.right-bar {
|
||
position: fixed;
|
||
z-index: 9999;
|
||
right: 1vh;
|
||
bottom: calc(200rpx);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.avatar {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.icon {
|
||
image {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: 100%;
|
||
overflow: hidden;
|
||
background-color: #dedede;
|
||
border: 5rpx solid #ffffff;
|
||
}
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.add {
|
||
position: absolute;
|
||
bottom: -16rpx;
|
||
overflow: hidden;
|
||
border: 0;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 100%;
|
||
background-color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.heart {
|
||
margin-top: 60rpx;
|
||
color: #ffffff;
|
||
|
||
.icon {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 100%;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
|
||
.comment {
|
||
margin-top: 40rpx;
|
||
color: #ffffff;
|
||
|
||
.icon {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 100%;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
|
||
.gift {
|
||
margin-top: 20rpx;
|
||
color: #ffffff;
|
||
|
||
.icon {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 65rpx;
|
||
height: 65rpx;
|
||
border-radius: 100%;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
/** 高仿抖音原样式 **/
|
||
|
||
.video-swiper {
|
||
z-index: 0;
|
||
position: relative;
|
||
margin-top: calc(var(--status-bar-height) + 130rpx);
|
||
/* 计算留出底部自定义菜单位置*/
|
||
// /* height: calc(100vh - 100rpx); */
|
||
height: calc(100vh - 200rpx);
|
||
// background-color: #23031f;
|
||
background: linear-gradient(to bottom, #0f001f, #43224f, #0f001f);
|
||
}
|
||
|
||
.video_item {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.video {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
}
|
||
|
||
/* 以下为仿抖音界面样式 */
|
||
.playState {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
margin: auto;
|
||
z-index: 5;
|
||
}
|
||
|
||
/*右侧工具*/
|
||
.video-tools {
|
||
position: fixed;
|
||
right: 20rpx;
|
||
bottom: 10vh;
|
||
overflow: initial;
|
||
width: 100rpx;
|
||
z-index: 999;
|
||
}
|
||
|
||
.video-tools .control-wrap {
|
||
line-height: 60rpx;
|
||
overflow: initial;
|
||
width: 100rpx;
|
||
}
|
||
|
||
.video-tools .item {
|
||
position: relative;
|
||
text-align: center;
|
||
margin-top: 30rpx;
|
||
background: none;
|
||
width: 100rpx;
|
||
padding: 0;
|
||
}
|
||
|
||
.video-tools .item::after {
|
||
display: none;
|
||
}
|
||
|
||
.video-tools .icon {
|
||
display: inline-block;
|
||
position: relative;
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
margin-bottom: 12rpx;
|
||
font-size: 0;
|
||
overflow: hidden;
|
||
vertical-align: middle;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.video-tools .item .txt {
|
||
display: block;
|
||
line-height: 1;
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
height: 30rpx;
|
||
text-shadow: 0 0 8rpx rgba(0, 0, 0, .3);
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
|
||
.video-tools .avatar {
|
||
display: inline-block;
|
||
position: relative;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
margin-bottom: 12rpx;
|
||
font-size: 0;
|
||
overflow: hidden;
|
||
vertical-align: middle;
|
||
z-index: 88;
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
border: 4rpx solid #fff;
|
||
}
|
||
|
||
.video-tools .add {
|
||
position: absolute;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
left: 37rpx;
|
||
bottom: 5rpx;
|
||
z-index: 99;
|
||
}
|
||
|
||
/*弹出红包*/
|
||
.video-hbmask {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.video-hbbox {
|
||
width: 500rpx;
|
||
height: 620rpx;
|
||
border-radius: 20rpx;
|
||
background: #bc492f;
|
||
padding: 30rpx;
|
||
text-align: center;
|
||
position: absolute;
|
||
color: #c0c3b5;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
z-index: 1001;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.hb-colse {
|
||
width: 200rpx;
|
||
height: 50rpx;
|
||
text-align: center;
|
||
position: absolute;
|
||
color: #fbffef;
|
||
top: 700rpx;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
z-index: 1001;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.hb-hbavatar {
|
||
padding-top: 40rpx;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.hb-title {
|
||
padding-top: 20rpx;
|
||
color: #ffd80f !important;
|
||
}
|
||
|
||
.hb-paybox {
|
||
display: -webkit-flex;
|
||
/* Safari */
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: center;
|
||
padding-top: 30rpx;
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
.hb-input {
|
||
font-size: 60rpx;
|
||
height: 62rpx;
|
||
color: #fec410;
|
||
}
|
||
|
||
.hb-reload {
|
||
display: -webkit-flex;
|
||
/* Safari */
|
||
display: flex;
|
||
justify-content: center;
|
||
color: #c0c3b5;
|
||
line-height: 60rpx;
|
||
align-items: flex-start;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.hb-butt {
|
||
background-color: #f8cf1c;
|
||
/* Green */
|
||
border: none;
|
||
color: white;
|
||
margin-top: 30rpx;
|
||
border-radius: 10rpx;
|
||
padding: 14rpx 100rpx;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
|
||
/*弹出商品*/
|
||
.video-goods {
|
||
width: 360rpx;
|
||
height: 160rpx;
|
||
border-radius: 8rpx;
|
||
background: #fff;
|
||
position: fixed;
|
||
bottom: 50rpx;
|
||
left: 20rpx;
|
||
padding: 0;
|
||
z-index: 998;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.video-goods cover-image {
|
||
width: 450rpx;
|
||
height: 250rpx;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.video-goods .icon-hide {
|
||
position: absolute;
|
||
right: 10rpx;
|
||
top: 10rpx;
|
||
color: rgba(0, 0, 0, .6);
|
||
z-index: 999;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
/*商户名称*/
|
||
.video-info {
|
||
position: absolute;
|
||
bottom: 50rpx;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
left: 30rpx;
|
||
}
|
||
|
||
.shopname {
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.video-info .videotitle {
|
||
font-size: 28rpx;
|
||
width: 500rpx;
|
||
word-break: break-all;
|
||
white-space: normal;
|
||
margin-top: 5rpx;
|
||
}
|
||
|
||
|
||
/*迷你商品*/
|
||
.video-item {
|
||
position: relative;
|
||
color: #fff;
|
||
font-size: 35rpx;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
padding: 10rpx 10rpx;
|
||
margin-bottom: 10rpx;
|
||
border-radius: 8rpx;
|
||
z-index: 88;
|
||
overflow: hidden;
|
||
width: auto;
|
||
display: inline-block;
|
||
}
|
||
|
||
.video-item .item-cart {
|
||
float: left;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.video-item .item-title {
|
||
float: left;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
height: 40rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
word-wrap: break-word;
|
||
max-width: 420rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 以下为光盘的样式 */
|
||
.video-disk {
|
||
position: fixed;
|
||
bottom: 10rpx;
|
||
right: 10rpx;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.video-disk .music-cover {
|
||
position: relative;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 100%;
|
||
box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, .2);
|
||
/* animation: rotate 5s linear infinite; */
|
||
z-index: 2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.video-disk .music-cover .music-disk {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.video-disk .music-cover .music-logo {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
opacity: 0.8;
|
||
left: 10rpx;
|
||
top: 10rpx;
|
||
}
|
||
|
||
.video-disk .note-wrap {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 0;
|
||
}
|
||
|
||
.video-disk .note {
|
||
position: absolute;
|
||
width: 40rpx;
|
||
height: 30rpx;
|
||
left: -25rpx;
|
||
bottom: 6rpx;
|
||
opacity: 0;
|
||
z-index: 999;
|
||
-webkit-animation: note 1.8s linear .6s infinite;
|
||
animation: note 1.8s linear .6s infinite;
|
||
}
|
||
|
||
@keyframes rotate {
|
||
from {
|
||
transform: rotate(0deg)
|
||
}
|
||
|
||
to {
|
||
transform: rotate(359deg)
|
||
}
|
||
}
|
||
|
||
.video-disk .note:nth-child(2) {
|
||
-webkit-animation: note 1.8s linear 1.2s infinite;
|
||
animation: note 1.8s linear 1.2s infinite
|
||
}
|
||
|
||
.video-disk .note:nth-child(3) {
|
||
-webkit-animation: note 1.8s linear 1.8s infinite;
|
||
animation: note 1.8s linear 1.8s infinite
|
||
}
|
||
|
||
@keyframes note {
|
||
0% {
|
||
trnaform: translate(0, 0) rotate(0) scale(1);
|
||
opacity: 1
|
||
}
|
||
|
||
50% {
|
||
transform: translate(-24rpx, -30rpx) rotate(15deg) scale(.8);
|
||
opacity: .8
|
||
}
|
||
|
||
100% {
|
||
transform: translate(-16rpx, -60rpx) rotate(30deg) scale(.6);
|
||
opacity: 0
|
||
}
|
||
}
|
||
|
||
.cu-form-group .title {
|
||
min-width: calc(4em + 30rpx);
|
||
}
|
||
|
||
.comment-popup {
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 750rpx;
|
||
margin-bottom: 40rpx;
|
||
font-size: 26rpx;
|
||
|
||
.head {
|
||
padding: 24rpx;
|
||
text-align: center;
|
||
border-bottom: 1rpx solid #f3f3f3;
|
||
}
|
||
|
||
.user-list {}
|
||
|
||
.footer {
|
||
background-color: #ffffff;
|
||
border-top: 1rpx solid #f3f3f3;
|
||
width: 750rpx;
|
||
height: 55rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 20rpx;
|
||
padding: 20rpx 0;
|
||
|
||
.search {
|
||
width: 700rpx;
|
||
margin: auto;
|
||
}
|
||
}
|
||
|
||
.comment-box {
|
||
display: flex;
|
||
|
||
.comment-avatar {}
|
||
|
||
.comment-content {
|
||
width: 100%;
|
||
|
||
.nickname {
|
||
color: #999999;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
padding: 2rpx 0;
|
||
|
||
.reply-nickname1 {
|
||
padding-right: 10rpx;
|
||
}
|
||
|
||
.reply-nickname2 {
|
||
padding-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.reply-box {
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 0;
|
||
|
||
.reply {
|
||
color: #681752;
|
||
margin: 0 30rpx;
|
||
}
|
||
|
||
.like {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #999999;
|
||
font-size: 26rpx;
|
||
margin: 0 30rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.reply-item {
|
||
margin: 24rpx 0;
|
||
|
||
.reply-user {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 2rpx 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
@keyframes change {
|
||
from {
|
||
width: 0;
|
||
}
|
||
to {
|
||
width: 1rpx;
|
||
}
|
||
}
|
||
|
||
.animationDom {
|
||
z-index: -1;
|
||
height: 0;
|
||
width: 0;
|
||
animation: change infinite 2s;
|
||
}
|
||
|
||
</style> |