29 changed files with 1697 additions and 235 deletions
@ -0,0 +1,733 @@ |
|||||
|
<template> |
||||
|
<view class=""> |
||||
|
<view class="search-box" v-if="searchNeed"> |
||||
|
<input class="search-inp" type="text" v-model="keyword"> |
||||
|
<button class="search-btn" @click="search">搜索</button> |
||||
|
</view> |
||||
|
<scroll-view class="tabs-bar" :scroll-x="true"> |
||||
|
<view class="tabs-bar-item" v-for="(item1,index1) in tabList" :key="index1" |
||||
|
:class="(current_index==index1&&cc_id=='6')?'active1': (current_index==index1?'active2':'')" |
||||
|
@click="changeIndex(index1)" |
||||
|
:style="cc_id=='6'?'margin-right:20px;':''"> |
||||
|
{{item1.name}} |
||||
|
</view> |
||||
|
<!-- cc_id=='6'是校园活动，生活服务的样式和校园活动一样 --> |
||||
|
</scroll-view> |
||||
|
<view class="tabs-content"> |
||||
|
<swiper class="tabs-banner" :indicator-dots="true" v-if="bannerList.length>0"> |
||||
|
<swiper-item v-for="(item2,index2) in bannerList" :key="index2" @click="navigatorTo(item2.link)"> |
||||
|
<image :src="item2.thumb" mode="widthFix"></image> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
<scroll-view class="tabs-video" :scroll-x="true"> |
||||
|
<view v-for="(item3,index3) in videoList" :key="index3" class="tabs-video-item"> |
||||
|
<view style=""> |
||||
|
<video @click="handleV(item3)" :src="item3.video_link" object-fit="cover" |
||||
|
:show-center-play-btn="false" :controls="false" :direction="0" :poster="item3.video_cover"></video> |
||||
|
|
||||
|
</view> |
||||
|
<view class="video-txt"> |
||||
|
{{item3.title}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
|
||||
|
<PopManager :show="videoshow" type="center"> |
||||
|
<view v-if="videoshow && cc_id<5" class="status_bar"></view> |
||||
|
<view v-if="videoshow" style="width: 100vw;height: 100vh;position: relative;background-color: #000;"> |
||||
|
<video id="myvideo" :src="videolint" |
||||
|
:style="updateWH" class="myvideo" :show-play-btn="true" object-fit="cover" |
||||
|
@click.stop="videoControl" :show-fullscreen-btn="false" :autoplay="true" :direction="0" |
||||
|
@loadedmetadata="changeSize" @ended="play=false"></video> |
||||
|
<view class="videoNavBar"> |
||||
|
<text class="iconfont icon-roundleftfill" style="font-size: 48upx;" @click="hideVideo"></text> |
||||
|
</view> |
||||
|
<view class="videoTxt"> |
||||
|
<view class="text-area"> |
||||
|
<!-- <image src="../../../static/chooseCade/BG.png" mode="" |
||||
|
style="width: 80upx;height: 80upx;background: #FFF;border-radius: 50%;overflow: hidden;"></image> --> |
||||
|
{{videoTxt}} |
||||
|
</view> |
||||
|
<view class="dis-flex comment-wrapper"> |
||||
|
<button open-type="share" :id="currentVideo.id" |
||||
|
style="margin: 0;background: transparent;padding: 0;line-height: normal;font-size: 13px;color: #333;height: 36rpx;" |
||||
|
@click.stop="share"> |
||||
|
<image style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" :src="imageRootNew+'share-two.png'" mode=""></image> |
||||
|
{{currentVideo.share}} |
||||
|
</button> |
||||
|
<view class="" @click.stop="showComment"> |
||||
|
<image style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" :src="imageRootNew+'fa-comment.png'" mode=""></image> |
||||
|
<text v-if="currentVideo.listTotal">{{currentVideo.listTotal}}</text> |
||||
|
<text v-else>0</text> |
||||
|
</view> |
||||
|
<view class="" @click.stop="fabulous"> |
||||
|
<image v-if="!currentVideo.is_like" style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" :src="imageRootNew+'appreciate-grey.png'" mode=""></image> |
||||
|
<image v-else style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" :src="imageRootNew+'appreciate-red.png'" mode=""></image> |
||||
|
{{currentVideo.likenum||0}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</PopManager> |
||||
|
<!-- 评论区弹窗 --> |
||||
|
<view class="comment-area" :class="commentShow?'commentShow':''"> |
||||
|
<view style="text-align: center;line-height: 40px;"> |
||||
|
共{{currentVideo.listTotal}}条评论 |
||||
|
<text style="float: right;font-size: 20px;margin-right: 20upx;" @click="hideComment">×</text> |
||||
|
</view> |
||||
|
<scroll-view scroll-y="true" class="comment-a-list"> |
||||
|
<view v-if="currentVideo.CommentList&¤tVideo.CommentList.length>0"> |
||||
|
<view v-for="(item1,index1) in currentVideo.CommentList" :key="index1" class="comment-item"> |
||||
|
<view style="width: 100%;"><text>{{item1.content}}</text></view> |
||||
|
<view style="font-size: 11px;color: #999;margin-right: 20upx;">{{item1.createtime}}</view> |
||||
|
<view class="reply" @click="editReply(index1)">回复</view> |
||||
|
|
||||
|
<view class="comment-item-child" v-if="item1.childCommentList" v-for="(item2,index2) in item1.childCommentList" :key="index2"> |
||||
|
<view style="width: 100%;"><text>{{item2.content}}</text></view> |
||||
|
<view style="font-size: 11px;color: #999;margin-right: 20upx;">{{item2.createtime}}</view> |
||||
|
<view class="reply" @click="editReply(index1, index2)">回复</view> |
||||
|
</view> |
||||
|
<view style="width: 100%;font-size: 12px;margin-top: 10upx;color: #666;" v-if="item1.is_query" @click="getChildCommentList(index1, item1.id)"> |
||||
|
<text v-if="item1.comment_twoPage==1">---展开回复</text><text v-else-if="item1.comment_twoPage>0">---更多回复</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="" v-else style="text-align: center;"> |
||||
|
暂无评论 |
||||
|
</view> |
||||
|
|
||||
|
<view class="" v-if="currentVideo.CommentList.length!=currentVideo.listTotal" |
||||
|
style="text-align: center;margin: 10px 0px;color: #666;" @click="showMoreComment"> |
||||
|
展开更多评论 |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
<view class="comment-a-b"> |
||||
|
<textarea v-model="editComment" :placeholder="placeholderText" class="comment-a-b-inp" placeholder-class="comment-a-b-inp-p" |
||||
|
:fixed="true" :auto-height="true" :adjust-position="false" /> |
||||
|
<view class="comment-a-b-btn" @click="submitComment">发送</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import App from '@/common/js/app.js'; |
||||
|
import PopManager from '@/components/template/PopManager'; |
||||
|
export default{ |
||||
|
data(){ |
||||
|
return { |
||||
|
keyword: '', |
||||
|
current_index: 0, |
||||
|
tabList: [], |
||||
|
child_id: 0, |
||||
|
bannerList: [], |
||||
|
videoList: [], |
||||
|
videoshow: false, |
||||
|
videolint: '', |
||||
|
videoTxt: '', |
||||
|
currentVideo: { |
||||
|
listTotal: 0, |
||||
|
CommentList: [] |
||||
|
}, |
||||
|
commentShow: false, |
||||
|
currentVideoW: '', |
||||
|
currentVideoH: '', |
||||
|
play: true, |
||||
|
editComment: '', |
||||
|
pid: '',// 当前要回复的评论的id |
||||
|
oneid: '',// 当前要回复的评论的一级评论id |
||||
|
placeholderText: '输入评论', |
||||
|
comment_onePage: 1, |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
PopManager |
||||
|
}, |
||||
|
props: { |
||||
|
pageType: { |
||||
|
type: Number | String, |
||||
|
default: '' |
||||
|
}, |
||||
|
cc_id: { |
||||
|
// 1~4是商品，7~9是招聘就业，6校园活动 |
||||
|
type: Number | String, |
||||
|
default: 0 |
||||
|
}, |
||||
|
searchNeed: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
computed:{ |
||||
|
updateWH(){ |
||||
|
if(this.currentVideoW>this.currentVideoH){ |
||||
|
// console.log({ width:'100vw', height: `calc(${this.currentVideoH} / ${this.currentVideoW} * 100vw)` }); |
||||
|
return `width:100vw; height: calc(${this.currentVideoH} / ${this.currentVideoW} * 100vw);top: 50%;transform: translateY(-50%);`; |
||||
|
} |
||||
|
if(this.currentVideoW<this.currentVideoH){ |
||||
|
// console.log({ height:'100vh', width: `calc(${this.currentVideoW} / ${this.currentVideoH} * 100vh)` }); |
||||
|
// return `height:calc(100vh - 140rpx); width: calc(${this.currentVideoW} / ${this.currentVideoH} * (100vh - 140rpx))`; |
||||
|
return `height:calc(100vh - 140rpx); width: 100vw`; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
created() { |
||||
|
this.getTabData(); |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 页面初次渲染！ createVideoContext uni video自带 上下文 如果不懂可以去百度 |
||||
|
this.videoContext = uni.createVideoContext('myvideo', this); |
||||
|
// this.videoContext.requestFullScreen(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getTabData(){ |
||||
|
App._post_form( |
||||
|
`&p=cultivateClass&do=getCultivateClassChildList`, |
||||
|
{cc_id: this.cc_id}, |
||||
|
res => { |
||||
|
if(res.data.length>0){ |
||||
|
this.tabList = res.data; |
||||
|
console.log(res.data); |
||||
|
this.child_id = res.data[0].id; |
||||
|
this.getInfoData(); |
||||
|
this.$emit('changeChildType',this.child_id); |
||||
|
} |
||||
|
}, |
||||
|
false, |
||||
|
() => { |
||||
|
// this.loadlogo = true; |
||||
|
} |
||||
|
); |
||||
|
}, |
||||
|
getInfoData(){ |
||||
|
App._post_form( |
||||
|
`&p=cultivateClass&do=getCultivateClassInfo`, |
||||
|
{cc_id: this.child_id}, |
||||
|
res => { |
||||
|
this.bannerList = res.data.advs; |
||||
|
this.videoList = res.data.video; |
||||
|
// this.videoList = [...res.data.video, ...res.data.video, ...res.data.video, ...res.data.video]; |
||||
|
}, |
||||
|
false, |
||||
|
() => { |
||||
|
// this.loadlogo = true; |
||||
|
} |
||||
|
); |
||||
|
}, |
||||
|
changeIndex(i){ |
||||
|
this.current_index = i; |
||||
|
this.child_id = this.tabList[i].id; |
||||
|
this.getInfoData(); |
||||
|
this.keyword = ''; |
||||
|
this.$emit('changeChildType',this.child_id); |
||||
|
}, |
||||
|
navigatorTo(link){ |
||||
|
console.log(23232) |
||||
|
uni.navigateTo({ |
||||
|
url:'/'+link |
||||
|
}) |
||||
|
}, |
||||
|
// 重置当前视频资源和视频评论 |
||||
|
handleV(content){ |
||||
|
console.log(111, content); |
||||
|
this.videoshow = true; |
||||
|
this.videolint = content.video_link; |
||||
|
this.videoTxt = content.title; |
||||
|
this.currentVideo = {...content, CommentList: [], listTotal: 0,}; |
||||
|
// this.videoContext.requestFullScreen({ |
||||
|
// direction:0 |
||||
|
// }) |
||||
|
|
||||
|
this.play = true; |
||||
|
this.editComment = ''; |
||||
|
this.oneid = ""; |
||||
|
this.pid = ''; |
||||
|
this.comment_onePage = 1; |
||||
|
this.placeholderText = '输入评论'; |
||||
|
// 获取视频评论 |
||||
|
let data = { |
||||
|
video_id: this.currentVideo.id, |
||||
|
oneid: '',//当前评论的id（注：打开二级评论时 必传） |
||||
|
pindex: this.comment_onePage, |
||||
|
psize: 10 |
||||
|
} |
||||
|
this.getVideoComment(data); |
||||
|
}, |
||||
|
// 获取一级评论 |
||||
|
getVideoComment(data){ |
||||
|
App._post_form( |
||||
|
`&p=cultivateClass&do=getVideoComment`, |
||||
|
data, |
||||
|
res => { |
||||
|
console.log(res); |
||||
|
if(this.comment_onePage===1){ |
||||
|
for(let item of res.data.list){ |
||||
|
this.currentVideo.CommentList.push({ |
||||
|
...item, |
||||
|
comment_twoPage: 1//二级评论的页数 |
||||
|
}) |
||||
|
} |
||||
|
this.currentVideo.listTotal = res.data.total; |
||||
|
}else{ |
||||
|
for(let item of res.data.list){ |
||||
|
this.currentVideo.CommentList.push({ |
||||
|
...item, |
||||
|
comment_twoPage: 1//二级评论的页数 |
||||
|
}) |
||||
|
} |
||||
|
this.currentVideo.listTotal = res.data.total; |
||||
|
} |
||||
|
this.comment_onePage++; |
||||
|
}, |
||||
|
false, |
||||
|
() => { |
||||
|
// this.loadlogo = true; |
||||
|
} |
||||
|
); |
||||
|
}, |
||||
|
// 展开更多评论 |
||||
|
showMoreComment(){ |
||||
|
let data = { |
||||
|
video_id: this.currentVideo.id, |
||||
|
oneid: '',//当前评论的id（注：打开二级评论时 必传） |
||||
|
pindex: this.comment_onePage, |
||||
|
psize: 10 |
||||
|
} |
||||
|
this.getVideoComment(data); |
||||
|
}, |
||||
|
// 获取更多回复/展开回复/更多回复 |
||||
|
getChildCommentList(indexA, id){ |
||||
|
let data = { |
||||
|
video_id: this.currentVideo.id, |
||||
|
oneid: id,//当前评论的id（注：打开二级评论时 必传） |
||||
|
pindex: this.currentVideo.CommentList[indexA].comment_twoPage, |
||||
|
psize: 10 |
||||
|
}; |
||||
|
App._post_form( |
||||
|
`&p=cultivateClass&do=getVideoComment`, |
||||
|
data, |
||||
|
res => { |
||||
|
console.log(res); |
||||
|
if(res.data.list.length>0){ |
||||
|
|
||||
|
} |
||||
|
if(this.currentVideo.CommentList[indexA].comment_twoPage === 1){ |
||||
|
this.currentVideo.CommentList[indexA].childCommentList = res.data.list; |
||||
|
}else{ |
||||
|
this.currentVideo.CommentList[indexA].childCommentList = [...this.currentVideo.CommentList[indexA].childCommentList, ...res.data.list]; |
||||
|
} |
||||
|
if(res.data.total == this.currentVideo.CommentList[indexA].childCommentList.length){ |
||||
|
this.currentVideo.CommentList[indexA].comment_twoPage = 0; |
||||
|
}else{ |
||||
|
this.currentVideo.CommentList[indexA].comment_twoPage++; |
||||
|
} |
||||
|
console.log(this.currentVideo.CommentList[indexA].comment_twoPage, '当前评论comment_twoPage'); |
||||
|
}, |
||||
|
false, |
||||
|
() => { |
||||
|
// this.loadlogo = true; |
||||
|
} |
||||
|
); |
||||
|
}, |
||||
|
showComment(){ |
||||
|
this.commentShow=true; |
||||
|
}, |
||||
|
hideComment(){ |
||||
|
this.commentShow=false; |
||||
|
this.editComment = ""; |
||||
|
this.oneid = ""; |
||||
|
this.pid = ''; |
||||
|
this.placeholderText = '输入评论'; |
||||
|
}, |
||||
|
hideVideo(){ |
||||
|
this.videoshow = false; |
||||
|
this.hideComment(); |
||||
|
}, |
||||
|
videoControl(e){ |
||||
|
console.log(e); |
||||
|
if(this.play){ |
||||
|
this.play = false; |
||||
|
this.videoContext.pause(); |
||||
|
}else{ |
||||
|
this.play = true; |
||||
|
this.videoContext.play(); |
||||
|
} |
||||
|
}, |
||||
|
search(){ |
||||
|
this.$emit('search', this.keyword) |
||||
|
}, |
||||
|
share(){ |
||||
|
App._post_form( |
||||
|
`&p=cultivateClass&do=shareNum`, |
||||
|
{id: this.currentVideo.id}, |
||||
|
res => { |
||||
|
this.currentVideo.share++; |
||||
|
}, |
||||
|
false, |
||||
|
() => { |
||||
|
// this.loadlogo = true; |
||||
|
} |
||||
|
); |
||||
|
}, |
||||
|
fabulous(item){ |
||||
|
App._post_form( |
||||
|
`&p=cultivateClass&do=fabulous`, |
||||
|
{id: this.currentVideo.id}, |
||||
|
res => { |
||||
|
this.currentVideo.is_like = !this.currentVideo.is_like; |
||||
|
this.videoList.map(item=>{ |
||||
|
if(item.id == this.currentVideo.id){ |
||||
|
item.is_like = this.currentVideo.is_like; |
||||
|
if(item.is_like){ |
||||
|
item.likenum ++; |
||||
|
uni.showToast({ |
||||
|
title:'点赞成功', |
||||
|
icon:'none' |
||||
|
}) |
||||
|
}else{ |
||||
|
item.likenum --; |
||||
|
uni.showToast({ |
||||
|
title:'取消点赞', |
||||
|
icon:'none' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
false, |
||||
|
() => { |
||||
|
// this.loadlogo = true; |
||||
|
} |
||||
|
); |
||||
|
}, |
||||
|
submitComment(){ |
||||
|
let _this = this; |
||||
|
let data = { |
||||
|
video_id: this.currentVideo.id, |
||||
|
text: this.editComment, |
||||
|
pid: this.pid, |
||||
|
oneid: this.oneid |
||||
|
} |
||||
|
App._post_form( |
||||
|
`&p=cultivateClass&do=comment`, |
||||
|
data, |
||||
|
res => { |
||||
|
uni.showToast({ |
||||
|
title:'评论成功', |
||||
|
icon:'none' |
||||
|
}) |
||||
|
|
||||
|
// 获取视频评论 |
||||
|
let data1 = { |
||||
|
video_id: _this.currentVideo.id, |
||||
|
oneid: '',//当前评论的id（注：打开二级评论时 必传） |
||||
|
pindex: 1, |
||||
|
psize: 10 |
||||
|
} |
||||
|
_this.comment_onePage = 1; |
||||
|
|
||||
|
//评论要审核的，请求了也不一定能显示 |
||||
|
// _this.getVideoComment(data1); |
||||
|
//评论要审核的，手动插入页面不对 |
||||
|
// if(_this.placeholderText == '输入评论'){ |
||||
|
// this.currentVideo.CommentList.unshift(); |
||||
|
// this.currentVideo.listTotal++; |
||||
|
// } |
||||
|
|
||||
|
//评论要审核的，请求了也不一定能显示 |
||||
|
// if(_this.placeholderText == '回复评论'){ |
||||
|
// let indexA; |
||||
|
// for(let i = 0;i<_this.currentVideo.CommentList.length;i++){ |
||||
|
// if(_this.currentVideo.CommentList[i].id==_this.oneid){ |
||||
|
// indexA = i; |
||||
|
// } |
||||
|
// } |
||||
|
// _this.currentVideo.CommentList[indexA].comment_twoPage = 1; |
||||
|
// _this.getChildCommentList(indexA, _this.oneid) |
||||
|
// } |
||||
|
|
||||
|
_this.editComment = ""; |
||||
|
_this.oneid = ""; |
||||
|
_this.pid = ''; |
||||
|
_this.placeholderText = '输入评论'; |
||||
|
}, |
||||
|
false, |
||||
|
() => { |
||||
|
// this.loadlogo = true; |
||||
|
} |
||||
|
); |
||||
|
}, |
||||
|
// 点击回复 |
||||
|
editReply(index1, index2){ |
||||
|
console.log(index1, index2); |
||||
|
this.oneid = this.currentVideo.CommentList[index1].id; |
||||
|
if(index2){ |
||||
|
this.pid = this.currentVideo.CommentList[index1].childCommentList[index2].id; |
||||
|
}else{ |
||||
|
this.pid = this.currentVideo.CommentList[index1].id; |
||||
|
} |
||||
|
this.placeholderText = '回复评论' |
||||
|
console.log(this.pid,'this.pid，当前要回复的评论的id'); |
||||
|
console.log(this.oneid,'this.oneid，当前要回复的评论的一级评论id'); |
||||
|
|
||||
|
// this.placeholderText = '输入评论'; |
||||
|
}, |
||||
|
changeSize(e){ |
||||
|
// console.log(e.detail.width, e.detail.height, '视频尺寸'); |
||||
|
this.currentVideoW = e.detail.width; |
||||
|
this.currentVideoH = e.detail.height; |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.search-box{ |
||||
|
width: 700upx; |
||||
|
height: 34px; |
||||
|
margin: 10px auto; |
||||
|
border: 1px solid #509DFD; |
||||
|
border-radius: 30px; |
||||
|
background-color: #fff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.search-inp{ |
||||
|
flex-grow: 1; |
||||
|
padding: 0px 10px 0px 20px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.search-btn{ |
||||
|
width: 120upx; |
||||
|
height: 30px; |
||||
|
background-color: #509DFD; |
||||
|
border-radius: 15px; |
||||
|
color: #fff; |
||||
|
font-size: 12px; |
||||
|
padding: 0px; |
||||
|
margin-right: 2px; |
||||
|
} |
||||
|
} |
||||
|
.tabs-bar{ |
||||
|
width: 100%; |
||||
|
height: 40px; |
||||
|
padding: 0px 10upx; |
||||
|
box-sizing: border-box; |
||||
|
white-space: nowrap; |
||||
|
|
||||
|
::-webkit-scrollbar{ |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.tabs-bar-item{ |
||||
|
display: inline-block; |
||||
|
line-height: 20px; |
||||
|
padding: 10px; |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
&.active1{ |
||||
|
color: #333; |
||||
|
font-size: 18px; |
||||
|
position: relative; |
||||
|
} |
||||
|
&.active1::after{ |
||||
|
content: ''; |
||||
|
width: 26px; |
||||
|
height: 4px; |
||||
|
position: absolute; |
||||
|
bottom: 0px; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
background-color: #509DFD; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
&.active2{ |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
position: relative; |
||||
|
} |
||||
|
&.active2::after{ |
||||
|
content: ''; |
||||
|
width: 20px; |
||||
|
height: 3px; |
||||
|
position: absolute; |
||||
|
bottom: 0px; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
background-color: #f00; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.tabs-content{ |
||||
|
width: 100%; |
||||
|
padding: 30upx; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
.tabs-banner{ |
||||
|
width: 100%; |
||||
|
height: 300upx; |
||||
|
border-radius: 20upx; |
||||
|
transform: translate3d(0, 0, 0); |
||||
|
overflow: hidden; |
||||
|
background-color: #fff; |
||||
|
margin-bottom: 40upx; |
||||
|
|
||||
|
image{ |
||||
|
width:100%; |
||||
|
} |
||||
|
} |
||||
|
.tabs-video{ |
||||
|
width: 100%; |
||||
|
white-space: nowrap; |
||||
|
|
||||
|
::-webkit-scrollbar{ |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.tabs-video-item{ |
||||
|
width: 200upx; |
||||
|
display: inline-block; |
||||
|
margin-right: 20upx; |
||||
|
} |
||||
|
video{ |
||||
|
width: 200upx; |
||||
|
height: 300upx; |
||||
|
border-radius: 20upx; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.video-txt{ |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.status_bar{ |
||||
|
height: calc(var(--status-bar-height) * 2); |
||||
|
width: 100%; |
||||
|
background-color: #000; |
||||
|
} |
||||
|
.videoNavBar{ |
||||
|
width: 100vw; |
||||
|
position: absolute; |
||||
|
left: 0upx; |
||||
|
// top: calc(var(--status-bar-height) * 2); |
||||
|
// 保留校园活动导航头的写法↑ |
||||
|
top: 0px; |
||||
|
z-index: 1; |
||||
|
color: #999; |
||||
|
padding: 16upx 30upx 16upx; |
||||
|
} |
||||
|
.myvideo{ |
||||
|
position: absolute; |
||||
|
} |
||||
|
.videoTxt{ |
||||
|
width: 100vw; |
||||
|
position: absolute; |
||||
|
left: 0upx; |
||||
|
bottom: 0; |
||||
|
z-index: 1; |
||||
|
font-size: 28upx; |
||||
|
padding: 20upx 0upx 80upx; |
||||
|
box-sizing: border-box; |
||||
|
color: #ddd; |
||||
|
// background-color: rgba(255,255,255,0.1); |
||||
|
white-space: break-spaces; |
||||
|
|
||||
|
.text-area{ |
||||
|
padding: 70px 30upx 70upx; |
||||
|
background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.4)); |
||||
|
} |
||||
|
.comment-wrapper{ |
||||
|
height: 25px; |
||||
|
margin: 5px auto 0px; |
||||
|
justify-content: space-between; |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
padding: 0px 30upx; |
||||
|
} |
||||
|
} |
||||
|
.comment-area{ |
||||
|
position: fixed;z-index: 1000; |
||||
|
// bottom: 0px; |
||||
|
bottom: -60vh; |
||||
|
width: 100vw;height: 60vh;left: 0px; |
||||
|
background-color: #FFF; |
||||
|
border-radius: 10px 10px 0px 0px; |
||||
|
display: flex;flex-direction: column; |
||||
|
justify-content: start; |
||||
|
transition: 0.5s; |
||||
|
|
||||
|
&.commentShow{ |
||||
|
bottom: 0px; |
||||
|
transition: 0.5s; |
||||
|
|
||||
|
.comment-a-b{ |
||||
|
bottom: 0px; |
||||
|
transition: 0.5s; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.comment-a-list{ |
||||
|
font-size: 14px; |
||||
|
margin: 10px auto; |
||||
|
height: calc(60vh - 120px); |
||||
|
|
||||
|
.comment-item{ |
||||
|
display: flex; |
||||
|
// justify-content: space-between; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
padding: 10upx 30upx; |
||||
|
|
||||
|
.comment-item-child{ |
||||
|
// width: 80vw; |
||||
|
margin-left: 30px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 10rpx 0px; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
.reply{ |
||||
|
padding: 4rpx 10rpx; |
||||
|
border-radius: 30px; |
||||
|
font-size: 11px; |
||||
|
background: #ececec; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.comment-a-b{ |
||||
|
position: fixed;z-index: 1001; |
||||
|
left: 0px; |
||||
|
transition: 0.5s;bottom: -60vh; |
||||
|
width: 100vw;min-height: 40px; |
||||
|
padding-bottom: 20px; |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
background-color: #FFF; |
||||
|
|
||||
|
.comment-a-b-inp{ |
||||
|
flex: 1; |
||||
|
padding: 10rpx 20rpx; |
||||
|
margin: 0rpx 30rpx; |
||||
|
background: #ececec; |
||||
|
border-radius: 15px; |
||||
|
font-size: 14px; |
||||
|
// line-height: 30px; |
||||
|
} |
||||
|
/deep/.comment-a-b-inp-p{ |
||||
|
color: #ccc; |
||||
|
} |
||||
|
.comment-a-b-btn{ |
||||
|
width: 60px; |
||||
|
height: 30px; |
||||
|
line-height: 30px; |
||||
|
border-radius: 30px; |
||||
|
background: #ccc; |
||||
|
text-align: center; |
||||
|
margin-right: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,121 @@ |
|||||
|
<template> |
||||
|
<view style="min-height: 100vh;background-color: #f8f8f8;box-sizing: border-box;"> |
||||
|
<view class="content_wrapper"> |
||||
|
<view v-for="(item,index) in dataList" :key="index" class="list-item"> |
||||
|
<view class="text-box"> |
||||
|
<view style="font-size: 14px;line-height: 22px;font-weight: bold;">{{item.storename}}</view> |
||||
|
<view class="text">订单号：{{item.orderno}}</view> |
||||
|
<view class="text">支付金额：{{item.price}}</view> |
||||
|
<view class="text">订单状态： |
||||
|
<text v-if="item.status==8">待发货</text> |
||||
|
<text v-if="item.status==7">已退款</text> |
||||
|
<text v-if="item.status==6">待退款</text> |
||||
|
<text v-if="item.status==5">已取消</text> |
||||
|
<text v-if="item.status==4">待收货待消费</text> |
||||
|
<text v-if="item.status==3">已完成</text> |
||||
|
<text v-if="item.status==2">已消费</text> |
||||
|
<text v-if="item.status==1">已支付</text> |
||||
|
<text v-if="item.status==0">未支付</text> |
||||
|
</view> |
||||
|
<view class="text" v-if="item.status==3">付款时间：{{formatDate(item.paytime)}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="" v-if="dataList.length==0"> |
||||
|
<loadmore :isMore="true" v-if="dataList.length=='0'" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import App from '@/common/js/app.js'; |
||||
|
import loadmore from '@/components/template/loadmore.vue' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
page: 1, |
||||
|
dataList: [], |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
loadmore |
||||
|
}, |
||||
|
onLoad(e){ |
||||
|
|
||||
|
}, |
||||
|
onShow() { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getList(){ |
||||
|
let _this = this; |
||||
|
App._post_form('&p=rights&do=getRightsOrderList', {page:_this.page, page_index: 10}, res => { |
||||
|
if(_this.page===1){ |
||||
|
if(res.data.length>0){ |
||||
|
_this.setData({ |
||||
|
dataList: res.data |
||||
|
}) |
||||
|
} |
||||
|
}else{ |
||||
|
if(res.data.length>0){ |
||||
|
let dataList = _this.dataList.concat(res.data); |
||||
|
_this.setData({ |
||||
|
dataList |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, false, err=>{ |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
formatDate(timestamp){ |
||||
|
let date = new Date(parseInt(timestamp) * 1000); |
||||
|
let Year = date.getFullYear(); |
||||
|
let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); |
||||
|
let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()); |
||||
|
let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()); |
||||
|
let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()); |
||||
|
let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()); |
||||
|
let GMT = Year + '-' + Moth + '-' + Day + ' '+ Hour +':'+ Minute + ':' + Sechond; |
||||
|
return GMT; |
||||
|
} |
||||
|
}, |
||||
|
onReachBottom(){ |
||||
|
this.page++; |
||||
|
this.getList(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.dis-flex{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.content_wrapper{ |
||||
|
padding: 10px 15px; |
||||
|
.list-item{ |
||||
|
display: flex; |
||||
|
padding: 15px 0px; |
||||
|
border-bottom: 1px solid #efefef; |
||||
|
} |
||||
|
image{ |
||||
|
width: 80px; |
||||
|
height: 80px; |
||||
|
border-radius: 6px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.text-box{ |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.text{ |
||||
|
display: -webkit-box;//将盒子转换为弹性盒子
-webkit-box-orient: vertical;//文本显示方式，默认水平
-webkit-line-clamp: 2;//设置显示多少行
overflow: hidden; |
||||
|
font-size: 13px; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,238 @@ |
|||||
|
<template> |
||||
|
<view style="min-height: 100vh;background-color: #f8f8f8;box-sizing: border-box;"> |
||||
|
<tabs-c :cc_id="cc_id" pageType="" @changeChildType="changeChildType" @search="search" :searchNeed="true"></tabs-c> |
||||
|
<view class="content_wrapper"> |
||||
|
<view v-for="(item,index) in dataList" :key="index" class="list-item" @click="toDetail(item.id)"> |
||||
|
<view class="img-box"> |
||||
|
<image :src="item.promotional_img" mode="aspectFill"></image> |
||||
|
<view class="text3"> |
||||
|
<text>{{item.city}}/{{item.address}}</text> |
||||
|
| |
||||
|
<text>{{item.km}}km</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="text-box"> |
||||
|
<view class="text1">{{item.title}}</view> |
||||
|
<view class="text2"> |
||||
|
<text style="color: #D3101E;">￥{{item.price}}</text> |
||||
|
<text style="color: #999999;font-size: 12px;margin: 0px 4px;text-decoration: line-through;">￥{{item.price1}}</text> |
||||
|
<text style="color: #999999;font-size: 12px;flex:1;text-align: right;">已售{{item.selled}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view v-if="dataList.length==0" style="width: 100%;"> |
||||
|
<loadmore :isMore="true" v-if="dataList.length=='0'" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import App from '@/common/js/app.js'; |
||||
|
import loadmore from '@/components/template/loadmore.vue' |
||||
|
import tabsC from '@/components/template/tabs/tabs-copy.vue'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
page: 1, |
||||
|
dataList: [], |
||||
|
cc_id: "51",//生活服务大类 |
||||
|
cc_cc_id: '',//当前选中的子类 |
||||
|
keyword: "", |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
loadmore, |
||||
|
tabsC |
||||
|
}, |
||||
|
onLoad(e){ |
||||
|
console.log(e, '-----'); |
||||
|
if(e.cc_id){ |
||||
|
this.cc_id = e.cc_id; |
||||
|
}; |
||||
|
}, |
||||
|
onShow() { |
||||
|
// this.getList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getList(type){ |
||||
|
let _this = this; |
||||
|
let data = { |
||||
|
page:_this.page, size: 10, |
||||
|
cc_id: this.cc_cc_id |
||||
|
} |
||||
|
if(type=='search'){ |
||||
|
data = { |
||||
|
page:_this.page, |
||||
|
size: 10, |
||||
|
cc_id: this.cc_cc_id, |
||||
|
title: this.keyword |
||||
|
} |
||||
|
} |
||||
|
console.log(data, 'p------'); |
||||
|
App._post_form('&p=student&do=campusActivitiesList', data, res => { |
||||
|
this.dataList = [{ |
||||
|
id: '', |
||||
|
promotional_img: '', |
||||
|
title: 'XXXXXpdfwe废物i欧风街第三方', |
||||
|
nickname: '', |
||||
|
avatar: '', |
||||
|
publish_time: '', |
||||
|
cc_name: '', |
||||
|
price: 12, |
||||
|
selled: 34, |
||||
|
km: 23.5, |
||||
|
price1: 15, |
||||
|
city: '深圳龙华', |
||||
|
address: '北站', |
||||
|
},{ |
||||
|
id: '', |
||||
|
promotional_img: '', |
||||
|
title: 'XXXXXpdfwe废物i欧风街第三方', |
||||
|
nickname: '', |
||||
|
avatar: '', |
||||
|
publish_time: '', |
||||
|
cc_name: '', |
||||
|
price: 12, |
||||
|
selled: 34, |
||||
|
km: 23.5, |
||||
|
price1: 15, |
||||
|
city: '深圳龙华', |
||||
|
address: '北站', |
||||
|
},{ |
||||
|
id: '', |
||||
|
promotional_img: '', |
||||
|
title: 'XXXXXpdfwe废物i欧风街第三方', |
||||
|
nickname: '', |
||||
|
avatar: '', |
||||
|
publish_time: '', |
||||
|
cc_name: '', |
||||
|
price: 12, |
||||
|
selled: 34, |
||||
|
km: 23.5, |
||||
|
price1: 15, |
||||
|
city: '深圳龙华', |
||||
|
address: '北站', |
||||
|
},{ |
||||
|
id: '', |
||||
|
promotional_img: '', |
||||
|
title: 'XXXXXpdfwe废物i欧风街第三方', |
||||
|
nickname: '', |
||||
|
avatar: '', |
||||
|
publish_time: '', |
||||
|
cc_name: '', |
||||
|
price: 12, |
||||
|
selled: 34, |
||||
|
km: 23.5, |
||||
|
price1: 15, |
||||
|
city: '深圳龙华', |
||||
|
address: '北站', |
||||
|
}] |
||||
|
}, false, err=>{ |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
toDetail(id){ |
||||
|
// uni.navigateTo({ |
||||
|
// url:'/pagesA/campusActivities/campusActivities?id='+id |
||||
|
// }) |
||||
|
}, |
||||
|
changeChildType(e){ |
||||
|
console.log(e); |
||||
|
this.page = 1; |
||||
|
this.cc_cc_id = e; |
||||
|
this.keyword = ''; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
search(e){ |
||||
|
this.keyword = e; |
||||
|
this.page = 1; |
||||
|
this.getList('search'); |
||||
|
} |
||||
|
}, |
||||
|
onReachBottom(){ |
||||
|
this.page++; |
||||
|
if(this.keyword){ |
||||
|
this.getList('search'); |
||||
|
return; |
||||
|
} |
||||
|
this.getList(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.dis-flex{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.content_wrapper{ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
padding: 0px 12px 20px 12px; |
||||
|
|
||||
|
.list-item{ |
||||
|
width: 340upx; |
||||
|
// display: flex; |
||||
|
// padding: 15px 0px; |
||||
|
background-color: #FFF; |
||||
|
// border-bottom: 1px solid #efefef; |
||||
|
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05); |
||||
|
margin-bottom: 11px; |
||||
|
position: relative; |
||||
|
} |
||||
|
.img-box{ |
||||
|
width: 340upx; |
||||
|
height: 252upx; |
||||
|
position: relative; |
||||
|
margin-bottom: 5px; |
||||
|
|
||||
|
image{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border-radius: 5px 5px 0px 0px; |
||||
|
} |
||||
|
.text3{ |
||||
|
width: 100%; |
||||
|
padding: 4px 8px; |
||||
|
box-sizing: border-box; |
||||
|
position: absolute; |
||||
|
bottom: 0px; |
||||
|
left: 0px; |
||||
|
color: #fff; |
||||
|
background: rgba(0,0,0,0.2); |
||||
|
font-size: 12px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.text-box{ |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
padding: 0px 10px 10px; |
||||
|
} |
||||
|
.text1{ |
||||
|
height: 44px; |
||||
|
font-size: 14px;line-height: 22px; |
||||
|
display: -webkit-box;//将盒子转换为弹性盒子
-webkit-box-orient: vertical;//文本显示方式，默认水平
-webkit-line-clamp: 2;//设置显示多少行
overflow: hidden; |
||||
|
color: #444; |
||||
|
} |
||||
|
.text2{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.label{ |
||||
|
position: absolute; |
||||
|
top: 0px; |
||||
|
font-size: 10px; |
||||
|
padding: 3px 5px; |
||||
|
color: #666; |
||||
|
background: rgba(255,255,255,0.5); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue