1023 lines
31 KiB
Plaintext
1023 lines
31 KiB
Plaintext
|
<template>
|
|||
|
|
<div class="page">
|
|||
|
|
<cover-view class="cover-view-center">
|
|||
|
|
<div :style="{ height: `${sysheight-60}px`,width: width }" ref="touch" @click="clickVideo(index)" @touchstart="ListTouchStart" @touchmove="ListTouchMove">
|
|||
|
|
<div class="nav">
|
|||
|
|
<image class="img-icon" :src="staticUrl + 'video/video_index_home.png'" @click="clickLeft"></image>
|
|||
|
|
<div class="title-center">
|
|||
|
|
<text class="title" :class="distanceX>0?'active-title':''" @click="click1" v-if="isShowLocal">{{areaCode}}</text>
|
|||
|
|
<text class="title" style="margin: 0 20rpx;" :class="distanceX==0?'active-title':''" @click="click0">推荐</text>
|
|||
|
|
<text class="title" :class="distanceX<0?'active-title':''" @click="click_1">关注</text>
|
|||
|
|
</div>
|
|||
|
|
<view></view>
|
|||
|
|
<!-- <image class="img-icon" :src="staticUrl + 'video/release.png'" @click.stop="clickRight"></image> -->
|
|||
|
|
</div>
|
|||
|
|
<div class="cover-view-right" style="top: 380upx;">
|
|||
|
|
<!-- 头像 -->
|
|||
|
|
<image class="img" style="height: 100upx;" @click.stop="tapAvater"></image>
|
|||
|
|
<!-- 关注 -->
|
|||
|
|
<image class="img" style="height: 50upx;" @click.stop="tapAvaterLikes"></image>
|
|||
|
|
<text class="right-text" style="margin-bottom: 10upx;"> </text>
|
|||
|
|
<!-- 点赞 -->
|
|||
|
|
<image class="img" @click.stop="tapLove"></image>
|
|||
|
|
<text class="right-text" style="margin-bottom: 36upx;"> </text>
|
|||
|
|
<!-- 评价 -->
|
|||
|
|
<image class="img" @click.stop="tapMsg"></image>
|
|||
|
|
<text class="right-text" style="margin-bottom: 25upx;"> </text>
|
|||
|
|
<!-- 举报 -->
|
|||
|
|
<image class="img" @click.stop="tapReport"></image>
|
|||
|
|
<text class="right-text"> </text>
|
|||
|
|
<!-- 红包 -->
|
|||
|
|
<image class="img" v-if="redData.show" @click.stop="openRedBag"></image>
|
|||
|
|
<text class="right-text"> </text>
|
|||
|
|
<!-- 分享 -->
|
|||
|
|
<image class="img" @click.stop="tapShare"></image>
|
|||
|
|
<text class="right-text"> </text>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</cover-view>
|
|||
|
|
<div class="swiper" ref="swiper">
|
|||
|
|
<block v-for="(item, idx) in videoList" :key="idx">
|
|||
|
|
<div class="video-box" :style="{ height: height }">
|
|||
|
|
<block v-if="Math.abs(-distance/sysheight-idx)<=1">
|
|||
|
|
<chunlei-video class="video" :src="item.video" :poster="item.image" :gDuration="item.duration"
|
|||
|
|
:height="height" :width="width" :play="item.flag"
|
|||
|
|
:objectFit="item.objectFit" :initialTime="item.initialTime" @pause="pauseVideo">
|
|||
|
|
</chunlei-video>
|
|||
|
|
<cover-view class="cover-view-left">
|
|||
|
|
<text class="left-text">@{{item.nickname}}</text>
|
|||
|
|
<text class="left-text">{{item.note}}</text>
|
|||
|
|
</cover-view>
|
|||
|
|
<cover-view class="cover-view-right">
|
|||
|
|
<cover-image :src="filterImg(item.icon)" class="avater img" @click.stop="tapAvater"></cover-image>
|
|||
|
|
<text class="right-text-avater" @click.stop="tapAvaterLikes" v-if="myUserId!=item.userId && (item.likeCheck <= 0)">+</text>
|
|||
|
|
<text class="right-text"></text>
|
|||
|
|
<cover-image :src="item.likeFlag && item.likeFlag >= 1?staticUrl + 'video/video_love.png':staticUrl + 'video/video_love_n.png'" class="img imgDianZan" @click.stop="tapLove"></cover-image>
|
|||
|
|
<text class="right-text">{{item.likes}}</text>
|
|||
|
|
<cover-image :src="staticUrl + 'video/video_noties.png'" class="img imgPinLun" @click.stop="tapMsg"></cover-image>
|
|||
|
|
<text class="right-text">{{item.evaluationQuantity}}</text>
|
|||
|
|
<block v-if="myUserId!==item.userId">
|
|||
|
|
<cover-image :src="staticUrl + 'video/report.png'" class="img imgPinLun" @click.stop="tapReport"></cover-image>
|
|||
|
|
<text class="right-text">举报</text>
|
|||
|
|
</block>
|
|||
|
|
<cover-image :src="staticUrl + 'home/redBag.png'" class="img imgRedBag" v-if="redData.show" @click.stop="openRedBag"></cover-image>
|
|||
|
|
<cover-image :src="staticUrl + 'video/video_share.png'" class="img imgFenXiang" style="opacity: 0;" @click.stop="tapShare"></cover-image>
|
|||
|
|
<text class="right-text" style="opacity: 0;">分享</text>
|
|||
|
|
</cover-view>
|
|||
|
|
</block>
|
|||
|
|
</div>
|
|||
|
|
</block>
|
|||
|
|
</div>
|
|||
|
|
<div class="left-div" @click="clickVideo(index)" :style="{ width: width,left:`${-parseInt(width)}px` }" ref="left" @touchstart="ListTouchStart" @touchmove="ListTouchMove">
|
|||
|
|
<block v-if="isShowLocal">
|
|||
|
|
<div class="video-box" v-for="(item, idx) in videoList1" :key="idx" :style="{ height: height }">
|
|||
|
|
<block v-if="Math.abs(-distance1/sysheight-idx)<=1">
|
|||
|
|
<chunlei-video class="video" :src="item.video" :poster="item.image" :gDuration="item.duration"
|
|||
|
|
:height="height" :width="width" :play="item.flag"
|
|||
|
|
:objectFit="item.objectFit" :initialTime="item.initialTime" @pause="pauseVideo">
|
|||
|
|
</chunlei-video>
|
|||
|
|
<cover-view class="cover-view-left">
|
|||
|
|
<text class="left-text">@{{item.nickname}}</text>
|
|||
|
|
<text class="left-text">{{item.note}}</text>
|
|||
|
|
</cover-view>
|
|||
|
|
<cover-view class="cover-view-right">
|
|||
|
|
<cover-image :src="filterImg(item.icon)" class="avater img" @click.stop="tapAvater"></cover-image>
|
|||
|
|
<text class="right-text-avater" @click.stop="tapAvaterLikes" v-if="myUserId!=item.userId && (item.likeCheck <= 0)">+</text>
|
|||
|
|
<text class="right-text"></text>
|
|||
|
|
<cover-image :src="item.likeFlag && item.likeFlag >= 1?staticUrl + 'video/video_love.png':staticUrl + 'video/video_love_n.png'" class="img imgDianZan" @click.stop="tapLove"></cover-image>
|
|||
|
|
<text class="right-text">{{item.likes}}</text>
|
|||
|
|
<cover-image :src="staticUrl + 'video/video_noties.png'" class="img imgPinLun" @click.stop="tapMsg"></cover-image>
|
|||
|
|
<text class="right-text">{{item.evaluationQuantity}}</text>
|
|||
|
|
<block v-if="myUserId!==item.userId">
|
|||
|
|
<cover-image :src="staticUrl + 'video/report.png'" class="img imgPinLun" @click.stop="tapReport"></cover-image>
|
|||
|
|
<text class="right-text">举报</text>
|
|||
|
|
</block>
|
|||
|
|
<cover-image :src="staticUrl + 'home/redBag.png'" class="img imgRedBag" v-if="redData.show"@click.stop="openRedBag"></cover-image>
|
|||
|
|
<cover-image :src="staticUrl + 'video/video_share.png'" class="img imgFenXiang" style="opacity: 0;" @click.stop="tapShare"></cover-image>
|
|||
|
|
<text class="right-text" style="opacity: 0;">分享</text>
|
|||
|
|
</cover-view>
|
|||
|
|
</block>
|
|||
|
|
</div>
|
|||
|
|
</block>
|
|||
|
|
</div>
|
|||
|
|
<div class="right-div" :style="{ width: width,right:`${-parseInt(width)}px` }" ref="right" @touchstart="ListTouchStart" @touchmove="ListTouchMove">
|
|||
|
|
<block v-for="(item, idx) in videoList_1" :key="idx">
|
|||
|
|
<div class="video-box" :style="{ height: height }">
|
|||
|
|
<block v-if="Math.abs(-distance_1/sysheight-idx)<=1">
|
|||
|
|
<chunlei-video class="video" :src="item.video" :poster="item.image" :gDuration="item.duration"
|
|||
|
|
:height="height" :width="width" :play="item.flag"
|
|||
|
|
:objectFit="item.objectFit" :initialTime="item.initialTime" @pause="pauseVideo">
|
|||
|
|
</chunlei-video>
|
|||
|
|
<cover-view class="cover-view-left">
|
|||
|
|
<text class="left-text">@{{item.nickname}}</text>
|
|||
|
|
<text class="left-text">{{item.note}}</text>
|
|||
|
|
</cover-view>
|
|||
|
|
<cover-view class="cover-view-right">
|
|||
|
|
<cover-image :src="filterImg(item.icon)" class="avater img" @click.stop="tapAvater"></cover-image>
|
|||
|
|
<text class="right-text-avater" @click.stop="tapAvaterLikes" v-if="myUserId!=item.userId && (item.likeCheck <= 0)">+</text>
|
|||
|
|
<text class="right-text"></text>
|
|||
|
|
<cover-image :src="item.likeFlag && item.likeFlag >= 1?staticUrl + 'video/video_love.png':staticUrl + 'video/video_love_n.png'" class="img imgDianZan" @click.stop="tapLove"></cover-image>
|
|||
|
|
<text class="right-text">{{item.likes}}</text>
|
|||
|
|
<cover-image :src="staticUrl + 'video/video_noties.png'" class="img imgPinLun" @click.stop="tapMsg"></cover-image>
|
|||
|
|
<text class="right-text">{{item.evaluationQuantity}}</text>
|
|||
|
|
<block v-if="myUserId!==item.userId">
|
|||
|
|
<cover-image :src="staticUrl + 'video/report.png'" class="img imgPinLun" @click.stop="tapReport"></cover-image>
|
|||
|
|
<text class="right-text">举报</text>
|
|||
|
|
</block>
|
|||
|
|
<cover-image :src="staticUrl + 'home/redBag.png'" class="img imgRedBag" v-if="redData.show" @click.stop="openRedBag"></cover-image>
|
|||
|
|
<cover-image :src="staticUrl + 'video/video_share.png'" class="img imgFenXiang" style="opacity: 0;" @click.stop="tapShare"></cover-image>
|
|||
|
|
<text class="right-text" style="opacity: 0;">分享</text>
|
|||
|
|
</cover-view>
|
|||
|
|
</block>
|
|||
|
|
</div>
|
|||
|
|
</block>
|
|||
|
|
</div>
|
|||
|
|
<div class="mark" v-if="rbagmodelshow" @touchmove.prevent.stop>
|
|||
|
|
<div class="mark-wrapper" ref="wrapper">
|
|||
|
|
<image :src="staticUrl + 'home/redBagClose.png'" mode="widthFix" class="mark-wrapper-img"></image>
|
|||
|
|
<div class="mark-wrapper-con">
|
|||
|
|
<div class="mark-wrapper-con-txt">
|
|||
|
|
<text class="mark-wrapper-title">{{redData.titleName}}</text>
|
|||
|
|
<text class="mark-wrapper-desc">{{redData.describeDetails}}</text>
|
|||
|
|
</div>
|
|||
|
|
<div class="mark-wrapper-btn" ref="btn" @tap.stop="move">
|
|||
|
|
<text class="mark-wrapper-btn-txt">立即领取</text>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<icon type="cancel" color="#fbd977" size="28" @click="rbagmodelshow = false"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="mark" v-if="openrbagmodelshow" @touchmove.prevent.stop>
|
|||
|
|
<div class="mark-wrapper" ref="wrapperOpen">
|
|||
|
|
<image :src="staticUrl + 'home/redBagOpen.png'" mode="widthFix" class="mark-wrapper-img"></image>
|
|||
|
|
<div class="mark-wrapper-con" style="top: 400rpx; height: 380rpx;">
|
|||
|
|
<div class="mark-wrapper-con-txt" v-if="!isTake">
|
|||
|
|
<text class="mark-wrapper-title">恭喜您获得</text>
|
|||
|
|
<text class="mark-wrapper-tip">{{redData.receiveDetails}}</text>
|
|||
|
|
</div>
|
|||
|
|
<div class="mark-wrapper-con-txt" v-else>
|
|||
|
|
<text class="mark-wrapper-tip">您已领取过专享红包</text>
|
|||
|
|
</div>
|
|||
|
|
<div class="mark-wrapper-btn2" ref="btn" @tap.stop="checkMoney">
|
|||
|
|
<text class="mark-wrapper-btn2-txt">查看我的福利</text>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<icon type="cancel" color="#fbd977" size="28" style="margin-top: 50rpx;" @click="close"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { mapState } from "vuex"
|
|||
|
|
import url from '@/common/http/url.js';
|
|||
|
|
import publics from "@/common/utils/public.js"
|
|||
|
|
import { sendRequest } from "@/common/http/api.js"
|
|||
|
|
import chunleiVideo from '@/components/chunlei-video/chunlei-video';
|
|||
|
|
import scrollMixins from './scrollMixins';
|
|||
|
|
export default{
|
|||
|
|
mixins:[scrollMixins],
|
|||
|
|
components: { chunleiVideo },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
staticUrl: getApp().staticUrl,
|
|||
|
|
myUserId:0,
|
|||
|
|
videoNowIndex:0,//当前播放视频的下标
|
|||
|
|
cityCode:'--',
|
|||
|
|
areaCode:'--',
|
|||
|
|
isShowLocal: false,
|
|||
|
|
pageDatas:[
|
|||
|
|
{
|
|||
|
|
type:0,
|
|||
|
|
pageSize:1,
|
|||
|
|
number:0,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type:1,
|
|||
|
|
pageSize:1,
|
|||
|
|
number:0,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type:2,
|
|||
|
|
pageSize:1,
|
|||
|
|
number:0,
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
videoList:[],//推荐
|
|||
|
|
//left
|
|||
|
|
videoList1:[],//同城
|
|||
|
|
//right
|
|||
|
|
videoList_1:[],//关注
|
|||
|
|
// 红包相关
|
|||
|
|
redData: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
rbagmodelshow: false,
|
|||
|
|
openrbagmodelshow: false,
|
|||
|
|
isTake: false,
|
|||
|
|
isReqBack: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState(["userInfo"])
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
//隐藏subnvue
|
|||
|
|
uni.getSubNVueById('comment').hide()
|
|||
|
|
//获取自己的ID
|
|||
|
|
this.myUserId = this.userInfo.id
|
|||
|
|
},
|
|||
|
|
created(){
|
|||
|
|
plus.screen.lockOrientation("portrait-primary")
|
|||
|
|
//隐藏subnvue
|
|||
|
|
uni.getSubNVueById('comment').hide()
|
|||
|
|
this.init()
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
let that = this;
|
|||
|
|
//判断是否设置地址
|
|||
|
|
uni.getLocation({
|
|||
|
|
type: 'gcj02',
|
|||
|
|
geocode: true,
|
|||
|
|
success: function(res) {
|
|||
|
|
console.log("getLocation...", res)
|
|||
|
|
//设置地址
|
|||
|
|
publics.setMyaddressLngLat(JSON.stringify(res));
|
|||
|
|
that.lngLatByCityName(res);
|
|||
|
|
},
|
|||
|
|
fail: function(err) {
|
|||
|
|
that.inintIndexVideoData()
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onHide(){
|
|||
|
|
this.videoNoPay();
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
// 红包福利
|
|||
|
|
getRedBagList(){
|
|||
|
|
sendRequest("GET", url.cms.redEnvelopesList).then(res =>{
|
|||
|
|
if (res.data && res.data.length > 0) {
|
|||
|
|
let data = res.data
|
|||
|
|
data.map(v =>{
|
|||
|
|
v.show = true
|
|||
|
|
})
|
|||
|
|
this.redList = data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
openRedBag(e){
|
|||
|
|
e.stopPropagation();
|
|||
|
|
console.log("1111111111111", this.isTake)
|
|||
|
|
let that = this
|
|||
|
|
if (this.isTake) {
|
|||
|
|
that.redOpenAnimation()
|
|||
|
|
} else {
|
|||
|
|
that.rbagmodelshow = true
|
|||
|
|
console.log("111111111111111111111111")
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
let wrapper = that.$refs.wrapper
|
|||
|
|
animation.transition(wrapper, {
|
|||
|
|
styles: {
|
|||
|
|
transform: 'scale(1.2)',
|
|||
|
|
transformOrigin: 'center center'
|
|||
|
|
},
|
|||
|
|
duration: 500, //ms
|
|||
|
|
timingFunction: 'ease',
|
|||
|
|
delay: 0 //ms
|
|||
|
|
}, function(){
|
|||
|
|
animation.transition(wrapper, {
|
|||
|
|
styles: {
|
|||
|
|
transform: 'scale(1)',
|
|||
|
|
transformOrigin: 'center center'
|
|||
|
|
},
|
|||
|
|
duration: 500, //ms
|
|||
|
|
timingFunction: 'ease',
|
|||
|
|
delay: 0 //ms
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}, 100)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
move(){
|
|||
|
|
let that = this
|
|||
|
|
let btn = this.$refs.btn
|
|||
|
|
animation.transition(btn, {
|
|||
|
|
styles: {
|
|||
|
|
transform: 'rotateY(360deg)',
|
|||
|
|
transformOrigin: 'center center'
|
|||
|
|
},
|
|||
|
|
duration: 1000, //ms
|
|||
|
|
timingFunction: 'ease',
|
|||
|
|
delay: 0 //ms
|
|||
|
|
}, function(){
|
|||
|
|
// sendRequest("POST", url.cms.receiveRedEnvelopes, {id: that.redData.id}).then(res => {
|
|||
|
|
if (that.redData.audioUrl) {
|
|||
|
|
music.loop = false; //循环播放
|
|||
|
|
music.src = that.redData.audioUrl;
|
|||
|
|
music.play(); //执行播放
|
|||
|
|
}
|
|||
|
|
that.redData.show = false
|
|||
|
|
that.rbagmodelshow = false
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
// 如果返回imAccount，并且直推人奖励开启，并且需要提示声音
|
|||
|
|
// if (res.data && that.redData.directPushRewardStatus === 1 && that.redData.directPushRewardAudioUrl) {
|
|||
|
|
// that.imSendMsg(res.data)
|
|||
|
|
// }
|
|||
|
|
// #endif
|
|||
|
|
that.redOpenAnimation()
|
|||
|
|
// }).catch(()=>{
|
|||
|
|
// that.rbagmodelshow = false
|
|||
|
|
// })
|
|||
|
|
animation.transition(btn, {
|
|||
|
|
styles: {
|
|||
|
|
transform: 'rotateY(0)',
|
|||
|
|
transformOrigin: 'center center'
|
|||
|
|
},
|
|||
|
|
duration: 10, //ms
|
|||
|
|
timingFunction: 'ease',
|
|||
|
|
delay: 0 //ms
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
redOpenAnimation(){
|
|||
|
|
let that = this
|
|||
|
|
that.openrbagmodelshow = true
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
let wrapperOpen = that.$refs.wrapperOpen
|
|||
|
|
animation.transition(wrapperOpen, {
|
|||
|
|
styles: {
|
|||
|
|
transform: 'scale(1.2)',
|
|||
|
|
transformOrigin: 'center center'
|
|||
|
|
},
|
|||
|
|
duration: 500, //ms
|
|||
|
|
timingFunction: 'ease',
|
|||
|
|
delay: 0 //ms
|
|||
|
|
}, function(){
|
|||
|
|
animation.transition(wrapperOpen, {
|
|||
|
|
styles: {
|
|||
|
|
transform: 'scale(1)',
|
|||
|
|
transformOrigin: 'center center'
|
|||
|
|
},
|
|||
|
|
duration: 500, //ms
|
|||
|
|
timingFunction: 'ease',
|
|||
|
|
delay: 0 //ms
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}, 100)
|
|||
|
|
},
|
|||
|
|
close(){
|
|||
|
|
this.openrbagmodelshow = false
|
|||
|
|
this.isTake = true
|
|||
|
|
},
|
|||
|
|
filterImg(img){
|
|||
|
|
return publics.filterImgUrl(img, 1)
|
|||
|
|
},
|
|||
|
|
async getByVideoIdMyMsgFlag(x,index,videoUserId,videoId){
|
|||
|
|
let that = this;
|
|||
|
|
let videoOneData = {};
|
|||
|
|
if(x > 0){//同城
|
|||
|
|
videoOneData = this.videoList1[index];
|
|||
|
|
}else if(x == 0){//推荐
|
|||
|
|
videoOneData = this.videoList[index];
|
|||
|
|
}else{//关注
|
|||
|
|
videoOneData = this.videoList_1[index];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let paremet = {videoUserId:videoUserId,videoId:videoId};
|
|||
|
|
let res = await sendRequest("GET", url.interaction.getByVideoIdMyMsg, paremet)
|
|||
|
|
let data = res.data
|
|||
|
|
if(!data.videoLike){
|
|||
|
|
data.videoLike = 0;
|
|||
|
|
}
|
|||
|
|
if(!data.likeAmount){
|
|||
|
|
data.likeAmount = 0;
|
|||
|
|
}
|
|||
|
|
if(!data.videoUserLike){
|
|||
|
|
data.videoUserLike = 0;
|
|||
|
|
}
|
|||
|
|
if(x > 0){//同城
|
|||
|
|
this.videoList1[index].likeFlag = data.videoLike;
|
|||
|
|
this.videoList1[index].likes = data.likeAmount;
|
|||
|
|
this.videoList1[index].likeCheck = data.videoUserLike;
|
|||
|
|
this.videoList1[index].evaluationQuantity = data.commentCount;
|
|||
|
|
}else if(x == 0){//推荐
|
|||
|
|
this.videoList[index].likeFlag = data.videoLike;
|
|||
|
|
this.videoList[index].likes = data.likeAmount;
|
|||
|
|
this.videoList[index].likeCheck = data.videoUserLike;
|
|||
|
|
this.videoList[index].evaluationQuantity = data.commentCount;
|
|||
|
|
}else{//关注
|
|||
|
|
this.videoList_1[index].likeFlag = data.videoLike;
|
|||
|
|
this.videoList_1[index].likes = data.likeAmount;
|
|||
|
|
this.videoList_1[index].likeCheck = data.videoUserLike;
|
|||
|
|
this.videoList_1[index].evaluationQuantity = data.commentCount;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
videoNoPay(){
|
|||
|
|
let flag = false
|
|||
|
|
this.videoList_1.forEach((item)=>{
|
|||
|
|
if(item.flag){
|
|||
|
|
item.flag = false
|
|||
|
|
flag = true
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.videoList1.forEach((item)=>{
|
|||
|
|
if(item.flag){
|
|||
|
|
item.flag = false
|
|||
|
|
flag = true
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.videoList.forEach((item)=>{
|
|||
|
|
if(item.flag){
|
|||
|
|
item.flag = false
|
|||
|
|
flag = true
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//设置参数
|
|||
|
|
init(){
|
|||
|
|
this.typeX = true //开启左右滑动
|
|||
|
|
this.playCount = 2 //剩余多少视频加载视频列表
|
|||
|
|
this.startDistance = 5 //判断左右上下拖动的启动距离 px
|
|||
|
|
this.minTime = 300 //判断快速滑动的时间,该时间内无视回弹距离判断
|
|||
|
|
this.backDistance = 200 //判断上下滑动的回弹距离 px
|
|||
|
|
},
|
|||
|
|
getIndex(){
|
|||
|
|
return this.videoNowIndex;
|
|||
|
|
|
|||
|
|
let listData = [];
|
|||
|
|
if(this.distanceX > 0){//同城
|
|||
|
|
listData = this.videoList1;
|
|||
|
|
}else if(this.distanceX == 0){//推荐
|
|||
|
|
listData = this.videoList;
|
|||
|
|
}else{//关注
|
|||
|
|
listData = this.videoList_1;
|
|||
|
|
}
|
|||
|
|
for(let i=0;i<listData.length;i++){
|
|||
|
|
if(listData[i].flag){
|
|||
|
|
return i;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tapAvater(e){
|
|||
|
|
e.stopPropagation();
|
|||
|
|
console.log("头像");
|
|||
|
|
|
|||
|
|
let index = this.getIndex();
|
|||
|
|
let userId = "";
|
|||
|
|
if(this.distanceX > 0){//同城
|
|||
|
|
userId = this.videoList1[index].imAccount;
|
|||
|
|
}else if(this.distanceX == 0){//推荐
|
|||
|
|
userId = this.videoList[index].imAccount;
|
|||
|
|
}else{//关注
|
|||
|
|
userId = this.videoList_1[index].imAccount;
|
|||
|
|
}
|
|||
|
|
this.videoNoPay();
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'/pages/interaction/user?current=1&&userId='+userId
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
tapAvaterLikes(e){
|
|||
|
|
e.stopPropagation();
|
|||
|
|
console.log("关注");
|
|||
|
|
|
|||
|
|
let index = this.getIndex();
|
|||
|
|
|
|||
|
|
if(this.distanceX > 0){//同城
|
|||
|
|
if(this.videoList1[index].likeCheck >= 1){//取消关注
|
|||
|
|
this.videoList1[index].likeCheck = 0;
|
|||
|
|
}else{//关注
|
|||
|
|
this.videoList1[index].likeCheck = 1;
|
|||
|
|
}
|
|||
|
|
this.videoList1 = [...this.videoList1];
|
|||
|
|
publics.setGuanZhuDatasJiLu(this.videoList1[index].userId,0);
|
|||
|
|
this.followByUser(this.videoList1[index].userId,0);
|
|||
|
|
}else if(this.distanceX == 0){//推荐
|
|||
|
|
if(this.videoList[index].likeCheck >= 1){//取消关注
|
|||
|
|
this.videoList[index].likeCheck = 0;
|
|||
|
|
}else{//关注
|
|||
|
|
this.videoList[index].likeCheck = 1;
|
|||
|
|
}
|
|||
|
|
this.videoList = [...this.videoList];
|
|||
|
|
publics.setGuanZhuDatasJiLu(this.videoList[index].userId,0);
|
|||
|
|
this.followByUser(this.videoList[index].userId,0);
|
|||
|
|
}else{//关注
|
|||
|
|
if(this.videoList_1[index].likeCheck >= 1){//取消关注
|
|||
|
|
this.videoList_1[index].likeCheck = 0;
|
|||
|
|
}else{//关注
|
|||
|
|
this.videoList_1[index].likeCheck = 1;
|
|||
|
|
}
|
|||
|
|
this.videoList_1 = [...this.videoList_1];
|
|||
|
|
publics.setGuanZhuDatasJiLu(this.videoList_1[index].userId,0);
|
|||
|
|
this.followByUser(this.videoList_1[index].userId,0);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//关注/取消关注
|
|||
|
|
async followByUser(userId, type) {
|
|||
|
|
let res = await sendRequest('post', url.interaction.followByUserId, {
|
|||
|
|
userId: userId,
|
|||
|
|
type: type
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
tapLove(e){
|
|||
|
|
e.stopPropagation();
|
|||
|
|
console.log("点赞");
|
|||
|
|
let type = 0;
|
|||
|
|
let index = this.getIndex();
|
|||
|
|
if(this.distanceX > 0){//同城
|
|||
|
|
if(this.videoList1[index].likeFlag >= 1){//取消点赞
|
|||
|
|
type = 1;
|
|||
|
|
this.videoList1[index].likeFlag = 0;
|
|||
|
|
this.videoList1[index].likes -= 1;
|
|||
|
|
}else{//点赞
|
|||
|
|
this.videoList1[index].likeFlag = 1;
|
|||
|
|
this.videoList1[index].likes += 1;
|
|||
|
|
}
|
|||
|
|
this.videoList1 = [...this.videoList1];
|
|||
|
|
publics.setDianZanTrueDatasJiLu(this.videoList1[index].id,type);
|
|||
|
|
this.likeByUserVideo(this.videoList1[index].id,type);
|
|||
|
|
}else if(this.distanceX == 0){//推荐
|
|||
|
|
if(this.videoList[index].likeFlag >= 1){//取消点赞
|
|||
|
|
type = 1;
|
|||
|
|
this.videoList[index].likeFlag = 0;
|
|||
|
|
this.videoList[index].likes -= 1;
|
|||
|
|
}else{//点赞
|
|||
|
|
this.videoList[index].likeFlag = 1;
|
|||
|
|
this.videoList[index].likes += 1;
|
|||
|
|
}
|
|||
|
|
this.videoList = [...this.videoList];
|
|||
|
|
publics.setDianZanTrueDatasJiLu(this.videoList[index].id,type);
|
|||
|
|
this.likeByUserVideo(this.videoList[index].id,type);
|
|||
|
|
}else{//关注
|
|||
|
|
if(this.videoList_1[index].likeFlag >= 1){//取消点赞
|
|||
|
|
type = 1;
|
|||
|
|
this.videoList_1[index].likeFlag = 0;
|
|||
|
|
this.videoList_1[index].likes -= 1;
|
|||
|
|
}else{//点赞
|
|||
|
|
this.videoList_1[index].likeFlag = 1;
|
|||
|
|
this.videoList_1[index].likes += 1;
|
|||
|
|
}
|
|||
|
|
this.videoList_1 = [...this.videoList_1];
|
|||
|
|
publics.setDianZanTrueDatasJiLu(this.videoList_1[index].id,type);
|
|||
|
|
this.likeByUserVideo(this.videoList_1[index].id,type);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//点赞
|
|||
|
|
async likeByUserVideo(videoId, type) {
|
|||
|
|
let res = await sendRequest('post', url.interaction.likeByVideo, {
|
|||
|
|
videoId: videoId,
|
|||
|
|
type: type
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
tapMsg(e){
|
|||
|
|
e.stopPropagation();
|
|||
|
|
console.log("评论");
|
|||
|
|
//获取id
|
|||
|
|
let videoId = 0;
|
|||
|
|
let index = this.getIndex();
|
|||
|
|
if(this.distanceX > 0){//同城
|
|||
|
|
videoId = this.videoList1[index].id;
|
|||
|
|
}else if(this.distanceX == 0){//推荐
|
|||
|
|
videoId = this.videoList[index].id;
|
|||
|
|
}else{//关注
|
|||
|
|
videoId = this.videoList_1[index].id;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
uni.getSubNVueById('comment').show('none',0,()=>{
|
|||
|
|
uni.$emit('showComment',{videoId:videoId,commentType:0})
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 举报
|
|||
|
|
tapReport(e){
|
|||
|
|
if (this.isReqBack) return
|
|||
|
|
this.isReqBack = true
|
|||
|
|
e.stopPropagation();
|
|||
|
|
let _this = this;
|
|||
|
|
let videoId = 0;
|
|||
|
|
let index = this.getIndex();
|
|||
|
|
let imAccount = null
|
|||
|
|
if(this.distanceX > 0){//同城
|
|||
|
|
videoId = this.videoList1[index].id;
|
|||
|
|
imAccount = this.videoList1[index].imAccount
|
|||
|
|
}else if(this.distanceX == 0){//推荐
|
|||
|
|
videoId = this.videoList[index].id;
|
|||
|
|
imAccount = this.videoList[index].imAccount
|
|||
|
|
}else{//关注
|
|||
|
|
videoId = this.videoList_1[index].id;
|
|||
|
|
imAccount = this.videoList_1[index].imAccount
|
|||
|
|
}
|
|||
|
|
let params = {
|
|||
|
|
toImAccount: imAccount
|
|||
|
|
}
|
|||
|
|
sendRequest("GET", url.user.isBackUser, params).then(d => {
|
|||
|
|
this.isReqBack = false
|
|||
|
|
let isBack = d.data
|
|||
|
|
let itemList = ["举报", "拉黑"]
|
|||
|
|
if (isBack) {
|
|||
|
|
itemList = ["举报", "移除黑名单"]
|
|||
|
|
}
|
|||
|
|
uni.showActionSheet({
|
|||
|
|
itemList: itemList,
|
|||
|
|
success: function (res) {
|
|||
|
|
if (res.tapIndex === 0) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/report/index?type=1&configType=1&id="+videoId
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
let msg = "拉黑该用户后，在附近、配送员、动态、视频中将不会出现该用户以及该用户发布的任何内容，是否要拉黑？"
|
|||
|
|
let title = "拉黑"
|
|||
|
|
let path = url.user.addBackUser
|
|||
|
|
if (isBack) {
|
|||
|
|
msg = "是否把该用户移除黑名单？"
|
|||
|
|
title = "移除黑名单"
|
|||
|
|
path = url.user.delBackUser
|
|||
|
|
}
|
|||
|
|
uni.showModal({
|
|||
|
|
title: title,
|
|||
|
|
content: msg,
|
|||
|
|
success(r) {
|
|||
|
|
if (r.confirm) {
|
|||
|
|
// 重新获取视频数据
|
|||
|
|
_this.videoList = []
|
|||
|
|
_this.videoList1 = []
|
|||
|
|
_this.videoList_1 = []
|
|||
|
|
_this.videoNoPay();
|
|||
|
|
sendRequest("POST", path, params).then(doc => {
|
|||
|
|
_this.inintIndexVideoData()
|
|||
|
|
uni.showToast({
|
|||
|
|
title: doc.data,
|
|||
|
|
icon: "none"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}).catch(()=>{
|
|||
|
|
this.isReqBack = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
tapShare(e){
|
|||
|
|
e.stopPropagation();
|
|||
|
|
console.log("分享");
|
|||
|
|
},
|
|||
|
|
//数据初始化
|
|||
|
|
async inintIndexVideoData(){
|
|||
|
|
let that = this;
|
|||
|
|
let res = await sendRequest('get', url.interaction.inintIndexVideo,{cityCode:this.cityCode,areaCode:this.areaCode});
|
|||
|
|
let data = res.data
|
|||
|
|
// 推荐
|
|||
|
|
for(let i=0;i<data.tuiJian.length;i++){
|
|||
|
|
//是否播放
|
|||
|
|
data.tuiJian[i].flag = false;
|
|||
|
|
//视频从0秒开始播放
|
|||
|
|
data.tuiJian[i].initialTime = 0;
|
|||
|
|
}
|
|||
|
|
if(data.tuiJian && data.tuiJian.length > 0){
|
|||
|
|
//data.tuiJian[0].objectFit = 'fill';
|
|||
|
|
that.videoList = [...that.videoList,...data.tuiJian];//推荐
|
|||
|
|
}
|
|||
|
|
//关注
|
|||
|
|
for(let i=0;i<data.guanZhu.length;i++){
|
|||
|
|
//是否播放
|
|||
|
|
data.guanZhu[i].flag = false;
|
|||
|
|
//视频从0秒开始播放
|
|||
|
|
data.guanZhu[i].initialTime = 0;
|
|||
|
|
}
|
|||
|
|
if(data.guanZhu && data.guanZhu.length > 0){
|
|||
|
|
//data.guanZhu[0].objectFit = 'fill';
|
|||
|
|
that.videoList_1 = [...that.videoList_1,...data.guanZhu];//关注
|
|||
|
|
}
|
|||
|
|
//同城
|
|||
|
|
for(let i=0;i<data.tongCheng.length;i++){
|
|||
|
|
//是否播放
|
|||
|
|
data.tongCheng[i].flag = false;
|
|||
|
|
//视频从0秒开始播放
|
|||
|
|
data.tongCheng[i].initialTime = 0;
|
|||
|
|
}
|
|||
|
|
if(data.tongCheng && data.tongCheng.length > 0){
|
|||
|
|
//data.tongCheng[0].objectFit = 'fill';
|
|||
|
|
that.videoList1 = [...that.videoList1,...data.tongCheng];//同城
|
|||
|
|
}
|
|||
|
|
that.videoPlay(that.index)
|
|||
|
|
},
|
|||
|
|
//获取视频数据
|
|||
|
|
async pushVideoList(){
|
|||
|
|
let that = this;
|
|||
|
|
let par = {};
|
|||
|
|
let typeOrIndex = 0;
|
|||
|
|
let pageSize = 0;
|
|||
|
|
if(this.distanceX > 0){//同城
|
|||
|
|
typeOrIndex=0;
|
|||
|
|
pageSize = that.videoList1.length;
|
|||
|
|
}else if(this.distanceX == 0){//推荐
|
|||
|
|
typeOrIndex=1;
|
|||
|
|
pageSize = that.videoList.length;
|
|||
|
|
}else{//关注
|
|||
|
|
typeOrIndex=2;
|
|||
|
|
pageSize = that.videoList_1.length;
|
|||
|
|
}
|
|||
|
|
let pageDatas = this.pageDatas[typeOrIndex];
|
|||
|
|
|
|||
|
|
let paremet = {type:pageDatas.type,pageSize:pageSize,cityCode:this.cityCode,areaCode:this.areaCode};
|
|||
|
|
sendRequest("GET", url.interaction.indexVideoDates, paremet).then(res =>{
|
|||
|
|
let data = res.data
|
|||
|
|
for(let i=0;i<data.length;i++){
|
|||
|
|
//是否播放
|
|||
|
|
data[i].flag = false;
|
|||
|
|
//视频从0秒开始播放
|
|||
|
|
data[i].initialTime = 0;
|
|||
|
|
}
|
|||
|
|
if(data && data.length > 0){
|
|||
|
|
if(that.distanceX > 0){//同城
|
|||
|
|
this.videoList1 = [...this.videoList1,...data];
|
|||
|
|
}else if(that.distanceX == 0){//推荐
|
|||
|
|
this.videoList = [...this.videoList,...data];
|
|||
|
|
}else{//关注
|
|||
|
|
this.videoList_1 = [...this.videoList_1,...data];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
clickRight(e){
|
|||
|
|
e.stopPropagation();
|
|||
|
|
let that = this;
|
|||
|
|
that.videoNoPay();
|
|||
|
|
// 跳转发布视频
|
|||
|
|
uni.setStorageSync("interactionCurrent", 3)
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url:'/pages/interaction/index'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
clickLeft(){
|
|||
|
|
//视频会自动暂停，不进入onHide()方法
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: '/pages/index/index'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
openMap(){
|
|||
|
|
var _this = this;
|
|||
|
|
uni.chooseLocation({
|
|||
|
|
keyword: "",
|
|||
|
|
success: function(res) {
|
|||
|
|
publics.setMyaddressLngLat(JSON.stringify(res));
|
|||
|
|
_this.lngLatByCityName(res);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
lngLatByCityName(data){
|
|||
|
|
if (data.address && typeof data.address === "object") {
|
|||
|
|
this.isShowLocal = true
|
|||
|
|
this.cityCode = data.address.city
|
|||
|
|
this.areaCode = data.address.district
|
|||
|
|
}
|
|||
|
|
this.inintIndexVideoData();//初始化数据
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.page{
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
background-color: #000;
|
|||
|
|
}
|
|||
|
|
.swiper{
|
|||
|
|
position: relative;
|
|||
|
|
background-color: #000;
|
|||
|
|
}
|
|||
|
|
.left-div{
|
|||
|
|
background-color: #000;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.right-div{
|
|||
|
|
background-color: #000;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.title-text{
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
.video-box{
|
|||
|
|
position: relative;
|
|||
|
|
background-color: #000;
|
|||
|
|
}
|
|||
|
|
.cover-view-center{
|
|||
|
|
position: fixed;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
z-index: 999;
|
|||
|
|
}
|
|||
|
|
.cover-view-top{
|
|||
|
|
position: fixed;
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 150px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.cover-view-left{
|
|||
|
|
position: absolute;
|
|||
|
|
margin-left: 10upx;
|
|||
|
|
width: 500upx;
|
|||
|
|
bottom: 200upx;
|
|||
|
|
z-index: 999;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
.left-text{
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
margin-bottom: 20upx;
|
|||
|
|
}
|
|||
|
|
.avater{
|
|||
|
|
border-radius: 50upx;
|
|||
|
|
border-color: #fff;
|
|||
|
|
border-style: solid;
|
|||
|
|
border-width: 2px;
|
|||
|
|
}
|
|||
|
|
.cover-view-right{
|
|||
|
|
position: absolute;
|
|||
|
|
top: 400upx;
|
|||
|
|
right: 20upx;
|
|||
|
|
z-index: 999;
|
|||
|
|
}
|
|||
|
|
.right-text-avater{
|
|||
|
|
position: absolute;
|
|||
|
|
font-size: 14px;
|
|||
|
|
top: 80upx;
|
|||
|
|
left: 30upx;
|
|||
|
|
height: 40upx;
|
|||
|
|
width: 40upx;
|
|||
|
|
background-color: #DD524D;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
z-index: 999;
|
|||
|
|
}
|
|||
|
|
.avater-icon{
|
|||
|
|
height: 40upx;
|
|||
|
|
width: 40upx;
|
|||
|
|
color: #fff;
|
|||
|
|
background-color: #DD524D;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 30upx;
|
|||
|
|
top:-20upx;
|
|||
|
|
}
|
|||
|
|
.right-text{
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
margin-bottom: 50upx;
|
|||
|
|
height: 20px;
|
|||
|
|
}
|
|||
|
|
.img{
|
|||
|
|
height: 100upx;
|
|||
|
|
width: 100upx;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
.imgDianZan{
|
|||
|
|
height: 84upx;
|
|||
|
|
width: 84upx;
|
|||
|
|
margin-left: 10upx;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
.imgPinLun{
|
|||
|
|
height: 60upx;
|
|||
|
|
width: 60upx;
|
|||
|
|
margin-left: 20upx;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
.imgFenXiang{
|
|||
|
|
height: 75upx;
|
|||
|
|
width: 75upx;
|
|||
|
|
// margin-left: 20upx;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
.imgRedBag{
|
|||
|
|
width: 130upx;
|
|||
|
|
height: 85upx;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 100rpx;
|
|||
|
|
right: -20rpx;
|
|||
|
|
}
|
|||
|
|
.img-icon{
|
|||
|
|
width: 50upx;
|
|||
|
|
height: 50upx;
|
|||
|
|
margin-top: 18upx;
|
|||
|
|
}
|
|||
|
|
.nav{
|
|||
|
|
flex-direction: row;
|
|||
|
|
height:200upx;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 44px 15px 0;
|
|||
|
|
}
|
|||
|
|
.title{
|
|||
|
|
line-height: 80upx;
|
|||
|
|
color: #eee;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
.active-title{
|
|||
|
|
border-bottom-width: 2px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border-style: solid;
|
|||
|
|
border-bottom-color: #FFFFFF;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
height: 40px;
|
|||
|
|
}
|
|||
|
|
.title-center{
|
|||
|
|
flex-direction: row;
|
|||
|
|
height: 45px;
|
|||
|
|
}
|
|||
|
|
.mark{
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background-color: rgba(0,0,0,0.5);
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.mark-wrapper{
|
|||
|
|
width: 600rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.mark-wrapper-img{
|
|||
|
|
width: 660rpx;
|
|||
|
|
margin-left: 0rpx;
|
|||
|
|
}
|
|||
|
|
.mark-wrapper-con{
|
|||
|
|
height: 500rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 150rpx;
|
|||
|
|
right: 0;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
.mark-wrapper-con-txt{
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
.mark-wrapper-title{
|
|||
|
|
width: 500rpx;
|
|||
|
|
lines: 1;
|
|||
|
|
font-size: 60rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.mark-wrapper-desc{
|
|||
|
|
width: 500rpx;
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
.mark-wrapper-tip{
|
|||
|
|
width: 500rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size:50upx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #ffcc1a;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
}
|
|||
|
|
.mark-wrapper-btn{
|
|||
|
|
box-shadow:inset 0 0 0 10upx #fff06e,0 10upx 0 0 #f69614;
|
|||
|
|
background-image:linear-gradient(to bottom, #fff6a5,#ffcd1b);
|
|||
|
|
width: 160upx;
|
|||
|
|
height:160upx;
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.mark-wrapper-btn-txt{
|
|||
|
|
color: white;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
.mark-wrapper-btn2{
|
|||
|
|
width: 300upx;
|
|||
|
|
height:60upx;
|
|||
|
|
line-height: 60upx;
|
|||
|
|
border-radius: 30upx;
|
|||
|
|
box-shadow:inset 0 0 0 10upx #fff06e,0 10upx 0 0 #f69614;
|
|||
|
|
background-image:linear-gradient(to bottom, #fff6a5,#ffcd1b);
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.mark-wrapper-btn2-txt{
|
|||
|
|
font-size:26upx;
|
|||
|
|
color:#ff2400;
|
|||
|
|
}
|
|||
|
|
</style>
|