Skip to content

H
h5-watch
Commit 0a066635 by suwenbiao
Options

处理冲突

parents dfda60ab 25f8855e
Showing with 331 additions and 63 deletions
App.vue
<script> <script>
export default { export default {
onLaunch() { 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){ if (window.location.href.slice(window.location.href.indexOf('/', 10) + 1, 9999).length > 5 && window.location
var room_id =window.location.href.slice( window.location.href.indexOf('/',10)+1,9999) .href.slice(window.location.href.indexOf('/', 10) + 1, 9999).length < 55) {
var reg1 = new RegExp("/","g") var room_id = window.location.href.slice(window.location.href.indexOf('/', 10) + 1, 9999)
room_id = room_id.replace(reg1,"") var reg1 = new RegExp("/", "g")
var reg2 = new RegExp("#","g") room_id = room_id.replace(reg1, "")
room_id = room_id.replace(reg2,"") var reg2 = new RegExp("#", "g")
room_id = room_id.replace(reg2, "")
uni.setStorageSync('room_id', room_id) uni.setStorageSync('room_id', room_id)
window.location.replace(window.location.href.slice(0, window.location.href.indexOf('/',10))) window.location.replace(window.location.href.slice(0, window.location.href.indexOf('/',10)))
} }
}, },
onShow() { onShow() {
...@@ -22,7 +24,36 @@ ...@@ -22,7 +24,36 @@
<style> <style>
/*每个页面公共css */ /*每个页面公共css */
.contents{ .contents {
overflow-x: hidden; 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> </style>
components/chat/chat.vue
<template> <template>
<scroll-view lower-threshold="20" scroll-y="true" class="chat" show-scrollbar="true" @scroll="scrollBottom" :class="scrollFalg ? 'pb-5' : ''"> <view class="box">
<view class="cavasation my-1" v-for="(item,index) in datalist" :key="index+''"> <!-- 特效礼物 -->
<view class="person"> <special :url="specialUrl"></special>
<u-avatar :src="item.avatar" size="80"></u-avatar> <scroll-view lower-threshold="20" scroll-y="true" class="chat" show-scrollbar="true">
<span class="ml-1">{{item.name}}</span> <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>
<view class="content"> </scroll-view>
<span class="text">{{item.content}}</span> </view>
</view>
</view>
</scroll-view>
</template> </template>
<script> <script>
import special from "@/components/footer/gift/special-effects/special.vue"
export default { export default {
name: "chat", name: "chat",
components:{ special },
props:["specialUrl"],
data() { data() {
return { return {
scrollFalg:false, scrollFalg: false,
datalist:[ datalist: [{
{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"}, avatar: "../../static/images/礼物@2x.png",
{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"}, name: "主播",
{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"}, 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: "课程生动有趣"
},
{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
] ]
} }
}, },
methods:{ methods: {
scrollBottom(){
console.log("333")
this.scrollFalg = true;
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ml-1{ .ml-1 {
margin-left: 10rpx; margin-left: 10rpx;
} }
.my-1{
.my-1 {
margin: 10rpx 0; margin: 10rpx 0;
} }
.pb-5{
padding-bottom: 50rpx; .box {
flex: 1;
overflow: hidden;
} }
.chat{
.chat {
box-sizing: border-box; box-sizing: border-box;
height:calc(100vh - 500rpx); height: calc(100vh - 500rpx);
padding: 40rpx; padding: 40rpx;
// font-size: 26rpx; // font-size: 26rpx;
letter-spacing:2rpx; letter-spacing: 2rpx;
.person{
.person {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.content{
.content {
line-height: 80rpx; line-height: 80rpx;
margin-left: 80rpx; margin-left: 80rpx;
.text{
.text {
display: inline-block; display: inline-block;
border-radius: 10rpx; border-radius: 10rpx;
padding: 0 24rpx; padding: 0 24rpx;
......
components/footer/footer.vue
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
style="width:68rpx" mode="widthFix" @click="iconbtn(item.title)"></image> style="width:68rpx" mode="widthFix" @click="iconbtn(item.title)"></image>
</view> </view>
<!-- icontab --> <!-- icontab -->
<component class="absolute" :is="currentTabComponent" @onClose="onClose" :show="show"></component> <component class="absolute" :is="currentTabComponent" @onClose="onClose" :show="show" @specialShow="specialShow"></component>
</view> </view>
</template> </template>
...@@ -124,6 +124,10 @@ ...@@ -124,6 +124,10 @@
this.show = false; this.show = false;
this.currentTabComponent = '' this.currentTabComponent = ''
}, },
// 点击发送特效
specialShow(url){
this.$emit("specialShow",url)
}
} }
} }
</script> </script>
......
components/footer/gift/gift.vue
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<image :src="item.url" style="width:94rpx;" mode="widthFix" @click="giftClick(index)"> <image :src="item.url" style="width:94rpx;" mode="widthFix" @click="giftClick(index)">
</image> </image>
</view> </view>
<text class="">{{currentIndex == index ? "赠送" : item.title}}</text> <text @click="send(index)">{{currentIndex == index ? "赠送" : item.title}}</text>
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
...@@ -47,17 +47,21 @@ ...@@ -47,17 +47,21 @@
title: "99币", title: "99币",
url: "/static/images/gift/e1972046aa7cc5ae870041a655ddf016_tplv-obj 1@2x.png" url: "/static/images/gift/e1972046aa7cc5ae870041a655ddf016_tplv-obj 1@2x.png"
}, },
] ]
} }
}, },
methods: { methods: {
onClose() { onClose() {
this.$emit("onClose", "more"); this.$emit("onClose");
}, },
giftClick(index) { giftClick(index) {
this.currentIndex = index; this.currentIndex = index;
}, },
send(index){
if(this.currentIndex != index) return;
this.onClose()
this.$emit("specialShow",this.datalist[index].url)
},
} }
} }
</script> </script>
...@@ -104,7 +108,6 @@ ...@@ -104,7 +108,6 @@
.active { .active {
view { view {
background-color: #F7F7F7; background-color: #F7F7F7;
border-radius: 10rpx 10rpx 0 0; border-radius: 10rpx 10rpx 0 0;
} }
...@@ -117,6 +120,11 @@ ...@@ -117,6 +120,11 @@
text-align: center; text-align: center;
padding: 5rpx 0; padding: 5rpx 0;
} }
}
@keyframes gift{
from {
}
to{}
} }
</style> </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 @@ ...@@ -18,16 +18,20 @@
currentIndex:0, currentIndex:0,
tabList: [{ tabList: [{
name: '聊天室', name: '聊天室',
id:"chat"
}, { }, {
name: '课件', name: '课件',
id:"courseware"
}, { }, {
name: '直播详情' name: '直播详情',
id:"sinatv"
}] }]
}; };
}, },
methods:{ methods:{
tabsClick(index){ tabsClick(index){
this.currentIndex = index this.currentIndex = index
this.$emit("skipComponent",this.tabList[index].id)
} }
} }
} }
......
pages/index/index.vue
...@@ -2,15 +2,13 @@ ...@@ -2,15 +2,13 @@
<view class="contents"> <view class="contents">
<!-- 视频区 --> <!-- 视频区 -->
<view class="banner"></view> <view class="banner"></view>
<login></login> <!-- <login></login> -->
<tabs></tabs> <tabs @skipComponent = "skip"></tabs>
<!-- 聊天 --> <!-- 聊天 -->
<view class="chat"> <component :is="currentTabComponent" :specialUrl="special"></component>
<chat></chat>
</view>
<!-- 底部 --> <!-- 底部 -->
<view class="footer"> <view class="footer" v-show="currentTabComponent == 'chat'">
<foot></foot> <foot @specialShow="specialShow"></foot>
</view> </view>
</view> </view>
</template> </template>
...@@ -20,14 +18,18 @@ ...@@ -20,14 +18,18 @@
import tabs from "@/components/tabs/tabs.vue" import tabs from "@/components/tabs/tabs.vue"
import foot from "@/components/footer/footer.vue" import foot from "@/components/footer/footer.vue"
import chat from "@/components/chat/chat.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 { export default {
components: { components: {
foot,chat,login,tabs foot,chat,login,tabs,sinatv,courseware
}, },
data() { data() {
return { return {
loading: true, loading: true,
value:'' value:'',
currentTabComponent:'chat',
special:""
} }
}, },
onLoad() { onLoad() {
...@@ -37,7 +39,16 @@ ...@@ -37,7 +39,16 @@
}, },
methods: { methods: {
skip(value){
this.currentTabComponent = value
},
specialShow(url){
this.special = url
let _this = this
let timer = setTimeout(() => {
_this.special = ''
},1000)
},
} }
} }
</script> </script>
...@@ -65,11 +76,6 @@ ...@@ -65,11 +76,6 @@
padding-left: 20rpx; padding-left: 20rpx;
} }
.chat {
flex: 1;
overflow: hidden;
}
.footer { .footer {
height: 88rpx; height: 88rpx;
position: fixed; 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