视频主页
This commit is contained in:
parent
820c16d18d
commit
ec313cd1d3
|
|
@ -46,7 +46,7 @@
|
||||||
"path": "pages/videoCircle/gDvideo",
|
"path": "pages/videoCircle/gDvideo",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "视频列表",
|
"navigationBarTitleText": "视频列表",
|
||||||
"enablePullDownRefresh": true,
|
"enablePullDownRefresh": false,
|
||||||
"onReachBottomDistance":200,
|
"onReachBottomDistance":200,
|
||||||
"navigationStyle": "custom",
|
"navigationStyle": "custom",
|
||||||
"app-plus": {
|
"app-plus": {
|
||||||
|
|
|
||||||
|
|
@ -1,143 +1,249 @@
|
||||||
<!-- 滑动切换选项卡+吸顶演示（待完善） -->
|
<!-- 滑动切换选项卡+吸顶演示（待完善） -->
|
||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<z-paging ref="paging" @scroll="scroll" :scrollable="scrollable" :hide-empty-view="true"
|
<view class="top-view">
|
||||||
:refresher-status.sync="refresherStatus" @query="queryList" :refresher-enabled="true">
|
<image class="info-cover"
|
||||||
<view class="top-view">
|
src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5d36bb3d-8e98-4f00-ab8b-b018dc4f5dc6/17b0292c-8a63-4b7b-a6a6-724f416a9958.jpg"
|
||||||
<image class="info-cover" @tap="fnMainBgPic" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5d36bb3d-8e98-4f00-ab8b-b018dc4f5dc6/17b0292c-8a63-4b7b-a6a6-724f416a9958.jpg"
|
mode="scaleToFill"></image>
|
||||||
mode="scaleToFill"></image>
|
<!-- 用户头像关注 -->
|
||||||
<!-- 用户头像关注 -->
|
<view class="u-flex-wrap"
|
||||||
<view class="u-flex-wrap" style="padding-top: 18rpx;padding-bottom: 18rpx;position: relative;align-items: center;display: flex;flex-direction: row;justify-content: flex-end;">
|
style="padding-top: 18rpx;padding-bottom: 18rpx;position: relative;align-items: center;display: flex;flex-direction: row;justify-content: flex-end;">
|
||||||
<view class="info-avatar">
|
<view class="info-avatar">
|
||||||
<u-avatar :src="order.artificerImg" size="135"></u-avatar>
|
<u-avatar :src="order.artificerImg" size="135"></u-avatar>
|
||||||
<view class="pingfen">
|
<view class="pingfen keyuyue">
|
||||||
<span>评分</span>
|
<view class="flex">
|
||||||
<span>5.0</span>
|
<view class="timea-fu">
|
||||||
</view>
|
评分
|
||||||
</view>
|
</view>
|
||||||
<view style="margin-right: 50rpx;">
|
<view class="timea-time">{{ordersScore}}</view>
|
||||||
<u-tag v-if='showedit' text="关注" mode="dark" shape="" bg-color="#f5991e" @click="UserEdit" />
|
</view>
|
||||||
<view v-if='!showedit' style="height: 45rpx;"></view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
<!-- 用户名 -->
|
|
||||||
<view style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 20rpx;" v-if="order.length!=0">
|
|
||||||
<text style="font-size: 32rpx;color: #111111;font-weight: bold;margin-right: 10rpx;">{{order.artificerName}}</text>
|
|
||||||
<view class="headset-line">
|
|
||||||
<image class="headset-img" :src="order.technicianType=='3'?'../../static/vip/grade1.gif':order.technicianType=='4'?'../../static/vip/grade2.gif':'../../static/vip/grade3.gif'" mode=""></image>
|
|
||||||
<span class="headset-text2">{{order.technicianTypeName}}</span>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 单位职务 -->
|
|
||||||
<!-- <view class="u-flex">
|
|
||||||
<view style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 20rpx;" v-if="userinfo.length!=0">
|
|
||||||
<u-icon name="map-fill" size="32" color="#4baed5"></u-icon>
|
|
||||||
<text style="font-size: 24rpx;color: #555555;margin-left: 10rpx;">{{userinfo.city}}</text>
|
|
||||||
</view>
|
|
||||||
<view style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 20rpx;" v-if="userinfo.length!=0">
|
|
||||||
<u-icon name="man-add-fill" size="32" color="#4baed5"></u-icon>
|
|
||||||
<text style="font-size: 24rpx;color: #555555;margin-left: 10rpx;">{{userinfo.jor}}</text>
|
|
||||||
</view>
|
|
||||||
</view> -->
|
|
||||||
<!-- 简介-->
|
|
||||||
<view style="font-size: 24rpx;color: #555555;margin:20rpx 50rpx;" v-if="userinfo.length!=0">
|
|
||||||
<u-tag v-if='membertype!=""' :text="membertype" mode="dark" shape="circle" bg-color="#4baed5" />
|
|
||||||
<text style="margin-right: 20rpx;">{{Information==''?'暂无简介':Information}}</text>
|
|
||||||
</view>
|
</view>
|
||||||
<!-- <view style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 20rpx;margin-bottom: 20rpx;" v-if="userinfo.length!=0">
|
<view class="oder-mian-guan" style="margin-right: 20px;">
|
||||||
<text style="font-size: 32rpx;font-weight: bold;color: #555555;margin-right: 18rpx;">{{userinfo.good.length || 0}}</text><text style="font-size: 24rpx;color: gray;margin-right: 28rpx;">粉丝</text>
|
<view :class="[isFollow?'activeG':'activeQ']" @click="guanzhu(order)">
|
||||||
<text style="font-size: 32rpx;font-weight: bold;color: #555555;margin-right: 18rpx;">{{userinfo.good.length || 0}}</text><text style="font-size: 24rpx;color: gray;margin-right: 28rpx;">关注</text>
|
<span class="oder-mian-text">收藏</span>
|
||||||
<text style="font-size: 32rpx;font-weight: bold;color: #555555;margin-right: 18rpx;">{{userinfo.good.length || 0}}</text><text style="font-size: 24rpx;color: gray;margin-right: 28rpx;">点赞</text>
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <view style="margin-right: 50rpx;">
|
||||||
|
<u-tag v-if='showedit' text="关注" mode="dark" shape="" bg-color="#f5991e" @click="UserEdit" />
|
||||||
|
<view v-if='!showedit' style="height: 45rpx;"></view>
|
||||||
</view> -->
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
<view id="tabbar" class="paging-content" :style="'height:' + pageHeight + 'px'">
|
<!-- 用户名 -->
|
||||||
<!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
|
<view style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 20rpx;"
|
||||||
<view style="z-index: 100;position: sticky;top :0px;">
|
v-if="order.length!=0">
|
||||||
<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
|
<text
|
||||||
swiperWidth="750"></u-tabs-swiper>
|
style="font-size: 32rpx;color: #111111;font-weight: bold;margin-right: 10rpx;">{{order.artificerName}}</text>
|
||||||
|
<view class="headset-line">
|
||||||
|
<image class="headset-img"
|
||||||
|
:src="order.technicianType=='3'?'../../static/vip/grade1.gif':order.technicianType=='4'?'../../static/vip/grade2.gif':'../../static/vip/grade3.gif'"
|
||||||
|
mode=""></image>
|
||||||
|
<span class="headset-text2">{{order.technicianTypeName}}</span>
|
||||||
</view>
|
</view>
|
||||||
<swiper style="height: 100%;" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
|
|
||||||
<swiper-item>
|
|
||||||
<swiper-list-item ref="swiperItem" :refresher="false" :scrollable="itemscrollable" :tabIndex="0" :currentIndex="swiperCurrent" :fixed="false" :auto="true" @setScrollable="setScrollable"></swiper-list-item>
|
|
||||||
</swiper-item>
|
|
||||||
<swiper-item>
|
|
||||||
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
</view>
|
</view>
|
||||||
</z-paging>
|
<!-- 简介-->
|
||||||
|
<view style="font-size: 24rpx;margin:20rpx 50rpx;">
|
||||||
|
<text style="margin-right: 20rpx;color: #777;">{{order.content==''?'暂无简介':order.content}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<scroll-view v-if="getVideoData.length>0" scroll-y="true" class="scroll-Y" @scrolltolower="loadMore">
|
||||||
|
<template class="template-view">
|
||||||
|
<view class="scroll-list" v-for="(item,index) in getVideoData" :key="index">
|
||||||
|
<view class="scroll-left">
|
||||||
|
<span class="scroll-left-day">{{item.day}}</span>
|
||||||
|
<span class="scroll-left-mon">{{item.month}}月</span>
|
||||||
|
</view>
|
||||||
|
<view class="scroll-right">
|
||||||
|
<view class="scroll-right-title">
|
||||||
|
{{item.content}}
|
||||||
|
</view>
|
||||||
|
<view class="data-list">
|
||||||
|
<view class="videoHovers" @click="towxh5Video(item)">
|
||||||
|
<image src="@/static/bofang.png"></image>
|
||||||
|
</view>
|
||||||
|
<view class="playState">
|
||||||
|
<img :src="item.picPath" style="border-radius: 10px;width: 100%; height: 100%;"></img>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="scroll-bottom">
|
||||||
|
<view class="pinglun">
|
||||||
|
<image src="../../static/pinglun.png" mode=""></image>
|
||||||
|
<span>{{item.pls}}</span>
|
||||||
|
</view>
|
||||||
|
<view class="pinglun" style="margin-left: 20px;">
|
||||||
|
<image src="../../static/guanzhu.png" mode=""></image>
|
||||||
|
<span>{{item.dzs}}</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="t-loading-box" v-if="loadingType!=3" @click="loadMore">
|
||||||
|
<view class="t-line"></view>
|
||||||
|
<view class="t-loading-text">
|
||||||
|
<view class="loading" v-if="loadingType==2"></view>
|
||||||
|
<text>{{loadingText[loadingType]}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="t-line"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</scroll-view>
|
||||||
|
<empty v-if="getVideoData.length==0"></empty>
|
||||||
|
<uni-popup style="width: 100%;height: 100vh;" type="center" ref="pinglun" @touchmove.stop.prevent="moveHandle">
|
||||||
|
<view style="width: 100%;height: 100%;position: relative;">
|
||||||
|
<video
|
||||||
|
id="myVideo"
|
||||||
|
style="width: 100%;height: 100%;"
|
||||||
|
:show-fullscreen-btn='false'
|
||||||
|
:enable-play-gesture='true'
|
||||||
|
:autoplay="true"
|
||||||
|
:show-play-btn='false'
|
||||||
|
:show-center-play-btn='false'
|
||||||
|
@click="jieshu"
|
||||||
|
:src="filePath"></video>
|
||||||
|
<view class="videoConten">{{contentVideo}}</view>
|
||||||
|
<view class="videoHover" v-if="playShow==true" @click="kaishi">
|
||||||
|
<image src="@/static/bofang.png"></image>
|
||||||
|
</view>
|
||||||
|
<view class="guanbi" @click="guanbi">
|
||||||
|
<image src="@/static/closeimg.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import empty from '@/components/empty.vue'
|
||||||
export default {
|
export default {
|
||||||
|
components:{empty},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
userinfo:{
|
isFollow: false,
|
||||||
nickname:'zetank',
|
Information:'',
|
||||||
avatar:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b9e817e6-7ee6-461f-8e66-4bed243cbe98/ad090f5f-2a0f-4ea8-a8b5-fc8dafa4039e.jpg",
|
loadingType: 0,
|
||||||
gender:1,
|
membertype: '',
|
||||||
city:'广州',
|
showedit: true, //信息编辑按钮
|
||||||
jor:'职务',
|
artificerId: '',
|
||||||
good:{}
|
latitude: '',
|
||||||
},
|
longitude: '',
|
||||||
Information:'本人性格热情开朗,待人友好,为人诚实谦虚。工作勤奋,认真负责,能吃苦耐劳,尽职 尽责,有耐心。具有亲和力,平易近人,善于与人沟通',
|
order: [],
|
||||||
membertype:'',
|
myId: '',
|
||||||
showedit:true,//信息编辑按钮
|
page:1,
|
||||||
refresherStatus: 0,
|
limit:10,
|
||||||
scrollTopMap: {},
|
playShow:false,
|
||||||
// 页面高度
|
filePath:'',
|
||||||
pageHeight: 0,
|
contentVideo:'',
|
||||||
// header高度
|
videoId:'',
|
||||||
headerHeight: 0,
|
getVideoData:[],
|
||||||
scrollable: true,
|
//上拉状态文字
|
||||||
itemscrollable:false,
|
loadingText : ["上拉或点击加载更多","已加载全部数据",'加载中',''],
|
||||||
change:false,
|
ordersScore:''
|
||||||
list: [{
|
|
||||||
name: '测试1'
|
|
||||||
}, {
|
|
||||||
name: '测试2'
|
|
||||||
}, {
|
|
||||||
name: '测试3'
|
|
||||||
}, {
|
|
||||||
name: '测试4'
|
|
||||||
}],
|
|
||||||
// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
|
|
||||||
current: 0, // tabs组件的current值，表示当前活动的tab选项
|
|
||||||
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
|
|
||||||
artificerId:'',
|
|
||||||
latitude:'',
|
|
||||||
longitude:'',
|
|
||||||
order:[],
|
|
||||||
myId:''
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props:{
|
|
||||||
uid:{
|
|
||||||
type:String,
|
|
||||||
default:""
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.pageHeight = uni.getSystemInfoSync().windowHeight;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const query = uni.createSelectorQuery().in(this);
|
|
||||||
query.select('.top-view').boundingClientRect(data => {
|
|
||||||
this.headerHeight = data.height;
|
|
||||||
}).exec();
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onLoad(e) {
|
onLoad(e) {
|
||||||
this.artificerId=e.artificerId;
|
this.artificerId = e.artificerId;
|
||||||
this.latitude = uni.getStorageSync('latitude');
|
this.latitude = uni.getStorageSync('latitude');
|
||||||
this.longitude = uni.getStorageSync('longitude');
|
this.longitude = uni.getStorageSync('longitude');
|
||||||
this.myId = uni.getStorageSync('userId');
|
this.myId = uni.getStorageSync('userId');
|
||||||
this.getDet();
|
this.getData();
|
||||||
|
this.getVideo();
|
||||||
|
},
|
||||||
|
onPullDownRefresh: function() {
|
||||||
|
this.page = 1;
|
||||||
|
this.getVideo();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
guanzhu(item) {// 关注
|
||||||
|
let oldIsFollow = this.isFollow;
|
||||||
|
let that = this;
|
||||||
|
|
||||||
|
let data = {
|
||||||
|
artificerId: that.artificerId,
|
||||||
|
userId: that.myId,
|
||||||
|
classify: item.myCollectCount==1?'0':'1'
|
||||||
|
}
|
||||||
|
that.$Request.postJson("/app/artificer/insertCollect", data).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
if (oldIsFollow) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '取消成功',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '收藏成功',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: res.msg,
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setTimeout(function() {
|
||||||
|
that.getData()
|
||||||
|
}, 500)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 加载更多
|
||||||
|
loadMore: async function() {
|
||||||
|
//loadingType: 0.数据未加载完 1.数据全部加载完了 2.数据加载中
|
||||||
|
if (this.loadingType == 0) {
|
||||||
|
this.loadingType = 2
|
||||||
|
//模拟数据请求
|
||||||
|
setTimeout(() => {
|
||||||
|
this.page++;
|
||||||
|
this.loadingType = 0;
|
||||||
|
this.getVideo()
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getVideo(){
|
||||||
|
var that=this;
|
||||||
|
// 1.这里引入后端请求数据
|
||||||
|
var data={
|
||||||
|
createBy:this.artificerId,
|
||||||
|
userId:this.myId,
|
||||||
|
page: this.page,
|
||||||
|
limit:this.limit,
|
||||||
|
}
|
||||||
|
this.$Request.get("/app/shipinquan/getArticlelist", data).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
// that.getVideoData = res.data.list||{}
|
||||||
|
if (res.data) {
|
||||||
|
if (this.page == 1) this.getVideoData = []; //如果是第一页需手动制空列表
|
||||||
|
this.getVideoData = [...this.getVideoData, ...res.data.list]; //追加新数据
|
||||||
|
this.getVideoData = this.getVideoData.map(item => {
|
||||||
|
let parts = item.createTime.split('-');
|
||||||
|
let month = parseInt(parts[1], 10);
|
||||||
|
let day = parseInt(parts[2], 10);
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
day:day>=10?day:'0'+day,
|
||||||
|
month:month>=10?month:'0'+month
|
||||||
|
};
|
||||||
|
});
|
||||||
|
console.log("getVideoData",this.getVideoData)
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
}else{
|
||||||
|
this.loadingType=1
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: res.msg,
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
// 详情
|
// 详情
|
||||||
getDet() {
|
getData() {
|
||||||
this.$Request.get("/app/artificer/selectArtificerById", {
|
this.$Request.get("/app/artificer/selectArtificerById", {
|
||||||
artificerId: this.artificerId,
|
artificerId: this.artificerId,
|
||||||
latitude: this.latitude,
|
latitude: this.latitude,
|
||||||
|
|
@ -145,103 +251,360 @@
|
||||||
userId: this.myId
|
userId: this.myId
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
this.order = res.data||{}
|
this.order = res.data || {}
|
||||||
|
var num=Number.isInteger(this.order.ordersScore)
|
||||||
|
if(num==true){
|
||||||
|
this.ordersScore=this.order.ordersScore+'.0'
|
||||||
|
}else{
|
||||||
|
this.ordersScore=this.order.ordersScore
|
||||||
|
}
|
||||||
|
if (res.data.myCollectCount == 1) {
|
||||||
|
this.isFollow = true
|
||||||
|
} else {
|
||||||
|
this.isFollow = false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
});
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
queryList() {
|
guanbi(){
|
||||||
//触发了下拉刷新，通过当前tabIndex对应的列表下拉刷新
|
this.playShow=false;
|
||||||
this.$refs.swiperItem.reload();
|
const videoContext = uni.createVideoContext('myVideo', this);
|
||||||
this.$refs.paging.complete([])
|
videoContext.pause(); // 播放视频
|
||||||
|
this.$refs.pinglun.close("center");
|
||||||
},
|
},
|
||||||
scroll(e) {
|
jieshu(){
|
||||||
let scrollTop = e.detail.scrollTop;
|
this.playShow=true;
|
||||||
//如果当前页面的scroll-view的scrollTop大于等于headerView的高度，则代表吸顶了
|
const videoContext = uni.createVideoContext('myVideo', this);
|
||||||
if (scrollTop < this.headerHeight-0.5) {
|
videoContext.pause(); // 播放视频
|
||||||
//还没吸顶
|
|
||||||
//禁止子组件的z-paging(scroll-view)滚动，当前页面的z-paging(scroll-view)允许滚动
|
|
||||||
this.scrollable = true;
|
|
||||||
// this.$refs.swiperItem[this.current].setScrollable(false);
|
|
||||||
this.itemscrollable=false
|
|
||||||
} else {
|
|
||||||
//吸顶了
|
|
||||||
//允许子组件的z-paging(scroll-view)滚动，当前页面的z-paging(scroll-view)禁止滚动
|
|
||||||
if(scrollTop >= this.headerHeight){
|
|
||||||
this.scrollable = false;
|
|
||||||
}
|
|
||||||
// this.$refs.swiperItem[this.current].setScrollable(true);
|
|
||||||
this.itemscrollable=true
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
setScrollable(scrollable) {
|
kaishi(){
|
||||||
this.scrollable = scrollable;
|
this.playShow=false;
|
||||||
|
const videoContext = uni.createVideoContext('myVideo', this);
|
||||||
|
videoContext.src = this.filePath; // 设置视频源
|
||||||
|
videoContext.play(); // 播放视频
|
||||||
},
|
},
|
||||||
// tabs通知swiper切换
|
towxh5Video(item){
|
||||||
tabsChange(index) {
|
this.playShow=false;
|
||||||
this.swiperCurrent = index;
|
this.filePath=item.filePath;
|
||||||
this.$refs.paging.scrollToY(this.headerHeight)
|
this.contentVideo=item.content;
|
||||||
},
|
this.videoId=item.id
|
||||||
// swiper-item左右移动，通知tabs的滑块跟随移动
|
this.$refs.pinglun.open("center")
|
||||||
transition(e) {
|
|
||||||
let dx = e.detail.dx;
|
|
||||||
this.$refs.uTabs.setDx(dx);
|
|
||||||
},
|
|
||||||
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
|
|
||||||
// swiper滑动结束，分别设置tabs和swiper的状态
|
|
||||||
animationfinish(e) {
|
|
||||||
let current = e.detail.current;
|
|
||||||
this.$refs.uTabs.setFinishCurrent(current);
|
|
||||||
this.swiperCurrent = current;
|
|
||||||
this.current = current;
|
|
||||||
},
|
|
||||||
// 修改用户背景封面图
|
|
||||||
fnMainBgPic() {
|
|
||||||
|
|
||||||
},
|
},
|
||||||
//编辑信息
|
//编辑信息
|
||||||
UserEdit(){
|
UserEdit() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:""
|
url: ""
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.top-view{
|
.keyuyue{
|
||||||
|
padding: 0px 4px;
|
||||||
|
height: 21px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
background: #eefdf8;
|
||||||
|
border-radius: 14px 9px 9px 14px;
|
||||||
|
color: #8d500f;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
.timea-fu{
|
||||||
|
font-size: 11px;
|
||||||
|
color: #2dbe93;
|
||||||
|
line-height: 21px;
|
||||||
|
margin-left: 3px;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
.timea-time{
|
||||||
|
font-size: 12px;
|
||||||
|
color: #2dbe93;
|
||||||
|
line-height: 21px;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
.oder-mian-text{
|
||||||
|
padding-left:50rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.oder-mian-guan{
|
||||||
|
width: 110rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
color: #1bb097;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.activeQ{
|
||||||
|
background: url('../../static/follow.png') 8rpx 4rpx;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size:32rpx 32rpx;
|
||||||
|
}
|
||||||
|
.activeG{
|
||||||
|
background: url('../../static/follow2.png') 8rpx 4rpx;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size:32rpx 32rpx;
|
||||||
|
}
|
||||||
|
.t-loading-box{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: row;
|
||||||
|
line-height:80upx;
|
||||||
|
font-size: 26upx;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom:20upx;
|
||||||
|
color: #888888;
|
||||||
|
.t-loading-text{
|
||||||
|
padding: 0 10upx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.loading {
|
||||||
|
width:25upx;
|
||||||
|
height:25upx;
|
||||||
|
border:2.5upx solid #888888;
|
||||||
|
border-bottom:#ffffff 2.5upx solid;
|
||||||
|
border-radius:50%;
|
||||||
|
margin-right: 15upx;
|
||||||
|
animation:grace-rotate360 1200ms infinite linear;
|
||||||
|
}
|
||||||
|
.t-line{
|
||||||
|
margin: 0px;
|
||||||
|
border-bottom: 1px solid rgb(212, 212, 212);
|
||||||
|
width: 20px;
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
border-top-color: rgb(212, 212, 212);
|
||||||
|
border-right-color: rgb(212, 212, 212);
|
||||||
|
border-left-color: rgb(212, 212, 212);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes grace-rotate360{0%{transform:rotate(0deg);} 50%{transform:rotate(180deg);} 100%{transform:rotate(360deg);}}
|
||||||
|
.content{
|
||||||
|
width: 100%;
|
||||||
|
/* height: 100vh; */
|
||||||
|
/* overflow: scroll; */
|
||||||
|
}
|
||||||
|
.scroll-Y {
|
||||||
|
width: 100%;
|
||||||
|
height: 700px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
border-top: 6px solid #f7f7f7;
|
||||||
|
margin-top: 300px;
|
||||||
}
|
}
|
||||||
.pingfen{
|
.top-view {
|
||||||
margin-left: 24px;
|
background-color: #fff;
|
||||||
margin-top: 20px;
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
z-index: 200;
|
||||||
}
|
}
|
||||||
.headset-text2{
|
.playState{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.pinglun span{
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.pinglun image{
|
||||||
|
width: 17px;
|
||||||
|
height: 17px;
|
||||||
|
}
|
||||||
|
.pinglun{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.scroll-bottom{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.scroll-right-title{
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.data-list{
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
position: relative;
|
||||||
|
margin: 10px 0px;
|
||||||
|
}
|
||||||
|
.scroll-right{
|
||||||
|
width: 77%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
}
|
||||||
|
.scroll-left-mon{
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.scroll-left-day{
|
||||||
|
color: #000000;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.scroll-left{
|
||||||
|
width: 20%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.scroll-list{
|
||||||
|
width: 95%;
|
||||||
|
padding: 0px 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
.swiper-item-view{
|
||||||
|
width: 70%;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 1; /* 定义文本的行数 */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-all;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.videoConten{
|
||||||
|
width: 70%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
height: 30px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2; /* 定义文本的行数 */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-all;
|
||||||
|
margin-left: 15px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
/deep/.uni-scroll-view-content{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.guanbi{
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-right: 9px;
|
||||||
|
}
|
||||||
|
.guanbi image{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
/deep/.uni-popup__wrapper-box{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.data-list{
|
||||||
|
width:100%;
|
||||||
|
height: 162px;
|
||||||
|
background-color: #000000;
|
||||||
|
|
||||||
|
}
|
||||||
|
.videoHovers{
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
margin-top: 20%;
|
||||||
|
margin-left: 40%;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
.videoHover{
|
||||||
|
width: 76px;
|
||||||
|
height: 76px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
margin-top: 70%;
|
||||||
|
margin-left: 40%;
|
||||||
|
}
|
||||||
|
.videoHover image,.videoHovers image{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.template-view {
|
||||||
|
width: 100%;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-view_H {
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-view-item {
|
||||||
|
height: 300rpx;
|
||||||
|
line-height: 300rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-view-item_H {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: 300rpx;
|
||||||
|
line-height: 300rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
.pingfen {
|
||||||
|
margin-left: 15px;
|
||||||
|
margin-top: 31px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headset-text2 {
|
||||||
background: linear-gradient(90deg, #f8f8f8, #dfdfdf);
|
background: linear-gradient(90deg, #f8f8f8, #dfdfdf);
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
height: 30rpx;
|
height: 30rpx;
|
||||||
line-height: 30rpx;
|
line-height: 30rpx;
|
||||||
border-radius:5rpx 30rpx 30rpx 30rpx;
|
border-radius: 5rpx 30rpx 30rpx 30rpx;
|
||||||
width: 72rpx;
|
width: 72rpx;
|
||||||
padding: 5rpx 15rpx;
|
padding: 5rpx 15rpx;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.headset-img{
|
|
||||||
|
.headset-img {
|
||||||
width: 120rpx;
|
width: 120rpx;
|
||||||
height: 40rpx;
|
height: 40rpx;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:1rpx;
|
top: 1rpx;
|
||||||
left:-1rpx;
|
left: -1rpx;
|
||||||
|
|
||||||
}
|
}
|
||||||
.headset-line{
|
|
||||||
|
.headset-line {
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-view {
|
.banner-view {
|
||||||
background-color: #007AFF;
|
background-color: #007AFF;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -260,19 +623,20 @@
|
||||||
.swiper {
|
.swiper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-cover {
|
.info-cover {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 260rpx;
|
height: 260rpx;
|
||||||
}
|
|
||||||
.info-avatar {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: -56rpx;
|
|
||||||
margin-left: 50rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info-avatar {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: -56rpx;
|
||||||
|
margin-left: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 934 B |
Binary file not shown.
|
After Width: | Height: | Size: 415 B |
Loading…
Reference in New Issue