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