Skip to content

H
h5-watch
Commit 25f8855e by liuliufashi
Options

更新直播详情和送礼物特效

parent 449f5879
Showing with 331 additions and 64 deletions
App.vue
<script>
export default {
onLaunch() {
if(window.location.href.slice( window.location.href.indexOf('/',10)+1,9999).length > 5 && window.location.href.slice( window.location.href.indexOf('/',10)+1,9999).length < 55){
var room_id =window.location.href.slice( window.location.href.indexOf('/',10)+1,9999)
var reg1 = new RegExp("/","g")
room_id = room_id.replace(reg1,"")
var reg2 = new RegExp("#","g")
room_id = room_id.replace(reg2,"")
if (window.location.href.slice(window.location.href.indexOf('/', 10) + 1, 9999).length > 5 && window.location
.href.slice(window.location.href.indexOf('/', 10) + 1, 9999).length < 55) {
var room_id = window.location.href.slice(window.location.href.indexOf('/', 10) + 1, 9999)
var reg1 = new RegExp("/", "g")
room_id = room_id.replace(reg1, "")
var reg2 = new RegExp("#", "g")
room_id = room_id.replace(reg2, "")
uni.setStorageSync('room_id', room_id)
window.location.href = window.location.href.slice(0, window.location.href.indexOf('/',10));
window.location.href = window.location.href.slice(0, window.location.href.indexOf('/', 10));
}
},
onShow() {
......@@ -22,7 +23,36 @@
<style>
/*每个页面公共css */
.contents{
.contents {
overflow-x: hidden;
}
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
/* 弹性盒子 */
.flex{
display: flex;
}
.flex-col{
flex-direction: column;
}
.j-center{
justify-content: center;
}
.j-between{
justify-content: space-between;
}
.a-center{
align-items: center;
}
.flex-1{
flex:1;
}
</style>
components/chat/chat.vue
<template>
<scroll-view lower-threshold="20" scroll-y="true" class="chat" show-scrollbar="true" @scroll="scrollBottom" :class="scrollFalg ? 'pb-5' : ''">
<view class="cavasation my-1" v-for="(item,index) in datalist" :key="index+''">
<view class="person">
<u-avatar :src="item.avatar" size="80"></u-avatar>
<span class="ml-1">{{item.name}}</span>
<view class="box">
<!-- 特效礼物 -->
<special :url="specialUrl"></special>
<scroll-view lower-threshold="20" scroll-y="true" class="chat" show-scrollbar="true">
<view class="cavasation my-1" v-for="(item,index) in datalist" :key="index+''">
<view class="person">
<u-avatar :src="item.avatar" size="80"></u-avatar>
<span class="ml-1">{{item.name}}</span>
</view>
<view class="content">
<span class="text">{{item.content}}</span>
</view>
</view>
<view class="content">
<span class="text">{{item.content}}</span>
</view>
</view>
</scroll-view>
</scroll-view>
</view>
</template>
<script>
import special from "@/components/footer/gift/special-effects/special.vue"
export default {
name: "chat",
components:{ special },
props:["specialUrl"],
data() {
return {
scrollFalg:false,
datalist:[
{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
scrollFalg: false,
datalist: [{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
]
}
},
methods:{
scrollBottom(){
console.log("333")
this.scrollFalg = true;
}
methods: {
}
}
</script>
<style lang="scss" scoped>
.ml-1{
.ml-1 {
margin-left: 10rpx;
}
.my-1{
.my-1 {
margin: 10rpx 0;
}
.pb-5{
padding-bottom: 50rpx;
.box {
flex: 1;
overflow: hidden;
}
.chat{
.chat {
box-sizing: border-box;
height:calc(100vh - 500rpx);
height: calc(100vh - 500rpx);
padding: 40rpx;
// font-size: 26rpx;
letter-spacing:2rpx;
.person{
letter-spacing: 2rpx;
.person {
display: flex;
align-items: center;
}
.content{
.content {
line-height: 80rpx;
margin-left: 80rpx;
.text{
.text {
display: inline-block;
border-radius: 10rpx;
padding: 0 24rpx;
......
components/footer/footer.vue
......@@ -17,7 +17,7 @@
style="width:68rpx" mode="widthFix" @click="iconbtn(item.title)"></image>
</view>
<!-- icontab -->
<component class="absolute" :is="currentTabComponent" @onClose="onClose" :show="show"></component>
<component class="absolute" :is="currentTabComponent" @onClose="onClose" :show="show" @specialShow="specialShow"></component>
</view>
</template>
......@@ -124,6 +124,10 @@
this.show = false;
this.currentTabComponent = ''
},
// 点击发送特效
specialShow(url){
this.$emit("specialShow",url)
}
}
}
</script>
......
components/footer/gift/gift.vue
......@@ -13,7 +13,7 @@
<image :src="item.url" style="width:94rpx;" mode="widthFix" @click="giftClick(index)">
</image>
</view>
<text class="">{{currentIndex == index ? "赠送" : item.title}}</text>
<text @click="send(index)">{{currentIndex == index ? "赠送" : item.title}}</text>
</view>
</swiper-item>
</swiper>
......@@ -47,17 +47,21 @@
title: "99币",
url: "/static/images/gift/e1972046aa7cc5ae870041a655ddf016_tplv-obj 1@2x.png"
},
]
}
},
methods: {
onClose() {
this.$emit("onClose", "more");
this.$emit("onClose");
},
giftClick(index) {
this.currentIndex = index;
},
send(index){
if(this.currentIndex != index) return;
this.onClose()
this.$emit("specialShow",this.datalist[index].url)
},
}
}
</script>
......@@ -104,7 +108,6 @@
.active {
view {
background-color: #F7F7F7;
border-radius: 10rpx 10rpx 0 0;
}
......@@ -117,6 +120,11 @@
text-align: center;
padding: 5rpx 0;
}
}
@keyframes gift{
from {
}
to{}
}
</style>
components/footer/gift/special-effects/special.vue 0 → 100644
<template>
<view class="content flex a-center j-center" v-if="urls">
<image :class="[urls ? 'anima' : '']" :src="urls" style="width: 94rpx;" mode="widthFix"></image>
</view>
</template>
<script>
export default {
name:"special",
props:["url"],
data() {
return {
urls:'',
};
},
watch:{
url:function(newValue,oldValue){
this.urls = newValue
}
}
}
</script>
<style lang="scss" scoped>
.content{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 100;
}
@keyframes identifier {
0%{
display: inline-block;
}
50%{
transform: scale(5);
}
100%{
transform: scale(5);
opacity: 0;
display: none;
}
}
.anima{
animation: identifier 1s;
}
</style>
\ No newline at end of file
components/tabs/courseware/courseware.vue 0 → 100644
<template>
<view>
这是课件页面
</view>
</template>
<script>
export default {
name:"courseware",
data() {
return {
};
}
}
</script>
<style>
</style>
\ No newline at end of file
components/tabs/sinaTv/sinaTv.vue 0 → 100644
<template>
<view class="box">
<!-- 直播详情 -->
<view class="sinaTvTitle flex a-center p-32">
<view class="mr-18">
<u-avatar :src="sinaTv.url" size="80"></u-avatar>
</view>
<view class="flex-1">
<h4>{{sinaTv.title}}</h4>
<view class="flex j-between a-center font-color font-24">
<text>开始时间：{{sinaTv.time}}</text>
<text>{{sinaTv.number}}人观看</text>
</view>
</view>
</view>
<u-gap height="8" bgColor="#F5F5F5"></u-gap>
<!-- 老师介绍 -->
<scroll-view class="parse" scroll-y="true">
<view class="teacher flex a-center p-32">
<view class="mr-18">
<u-avatar :src="sinaTv.url" size="80" shape="square"></u-avatar>
</view>
<view class="flex-1 flex flex-col">
<h4 class="flex-1">{{teacher.name}}</h4>
<!-- <view class="flex j-between a-center font-color font-24 flex-1">
<text class="flex-1 teacher-details">{{teacher.text}}</text>
<u-icon name="arrow-down"></u-icon>
</view> -->
<u-collapse @close="falg = false" @open="falg = true" :border="false">
<u-collapse-item name="Docs guide">
<text slot="title" class=" teacher-details">
{{falg ? "简介：" : "简介：" + teacher.text}}
</text>
<text class="">{{teacher.text}}</text>
</u-collapse-item>
</u-collapse>
</view>
</view>
<u-gap height="8" bgColor="#F5F5F5" textIndent="28"></u-gap>
<!-- 富文本编辑器 -->
<view class="p-32">
<u-parse :content="content"></u-parse>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
name: "sinatv",
data() {
return {
falg: false,
sinaTv: {
title: "欧畅云特别功能讲解直播内容",
time: "2022-09-18 15:00",
number: 1534,
url: "/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png"
},
teacher: {
url: "/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png",
name: "李老师",
text: "本人主修钢琴。具有高级教师资格证广东省本人主修钢琴。具有高级教师资格证广东省,本人主修钢琴。具有高级教师资格证广东省本人主修钢琴。具有高级教师资格证广东省本人主修钢琴。具有高级教师资格证广东省本人主修钢琴。具有高级教师资格证广东省"
},
content: `
<p>直播营销：最直观的方式，打造商品品牌，给更多粉丝用户传递品牌形象。大数据覆盖，挖掘潜在用户，增进商家和其私域用户感情，提高私域用户感情，提高私域流量活跃度，提升</p>
<img src="/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png" />
<p>直播营销：最直观的方式，打造商品品牌，给更多粉丝用户传递品牌形象。大数据覆盖，挖掘潜在用户，增进商家和其私域用户感情，提高私域用户感情，提高私域流量活跃度，提升</p>
<img src="/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png" />
<p>直播营销：最直观的方式，打造商品品牌，给更多粉丝用户传递品牌形象。大数据覆盖，挖掘潜在用户，增进商家和其私域用户感情，提高私域用户感情，提高私域流量活跃度，提升</p>
<img src="/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png" />
`
};
}
}
</script>
<style lang="scss" scoped>
.border {
border: 1px solid grey;
}
.font-color {
color: #777777;
}
.font-24 {
font-size: 24rpx;
}
.mr-18 {
margin-right: 18rpx;
}
.p-32 {
padding: 32rpx;
}
.teacher-details {
width: 534rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
transform: translate(-30rpx);
}
.parse {
height: calc(100vh - 700rpx);
}
</style>
components/tabs/tabs.vue
......@@ -18,16 +18,20 @@
currentIndex:0,
tabList: [{
name: '聊天室',
id:"chat"
}, {
name: '课件',
id:"courseware"
}, {
name: '直播详情'
name: '直播详情',
id:"sinatv"
}]
};
},
methods:{
tabsClick(index){
this.currentIndex = index
this.$emit("skipComponent",this.tabList[index].id)
}
}
}
......
pages/index/index.vue
......@@ -2,15 +2,13 @@
<view class="contents">
<!-- 视频区 -->
<view class="banner"></view>
<login></login>
<tabs></tabs>
<!-- <login></login> -->
<tabs @skipComponent = "skip"></tabs>
<!-- 聊天 -->
<view class="chat">
<chat></chat>
</view>
<component :is="currentTabComponent" :specialUrl="special"></component>
<!-- 底部 -->
<view class="footer">
<foot></foot>
<view class="footer" v-show="currentTabComponent == 'chat'">
<foot @specialShow="specialShow"></foot>
</view>
</view>
</template>
......@@ -20,14 +18,18 @@
import tabs from "@/components/tabs/tabs.vue"
import foot from "@/components/footer/footer.vue"
import chat from "@/components/chat/chat.vue"
import sinatv from "@/components/tabs/sinaTv/sinaTv.vue"
import courseware from "@/components/tabs/courseware/courseware.vue"
export default {
components: {
foot,chat,login,tabs
foot,chat,login,tabs,sinatv,courseware
},
data() {
return {
loading: true,
value:''
value:'',
currentTabComponent:'chat',
special:""
}
},
onLoad() {
......@@ -37,7 +39,16 @@
},
methods: {
skip(value){
this.currentTabComponent = value
},
specialShow(url){
this.special = url
let _this = this
let timer = setTimeout(() => {
_this.special = ''
},1000)
},
}
}
</script>
......@@ -65,11 +76,6 @@
padding-left: 20rpx;
}
.chat {
flex: 1;
overflow: hidden;
}
.footer {
height: 88rpx;
position: fixed;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment