441 行
8.5 KiB
Plaintext
441 行
8.5 KiB
Plaintext
<template>
|
|
<view>
|
|
<view :style="{width: width + 'px',height:height + 'px'}" v-if="showMarkact" class="mark">
|
|
<text class="mark-text">直播准备中...</text>
|
|
</view>
|
|
|
|
<live-pusher v-else :beauty="beauty" :whiteness="whiteness" :style="{width: width + 'px',height:height + 'px'}"
|
|
id="livePusher" :url="url" mode="FHD"></live-pusher>
|
|
|
|
<!-- 这是功能按钮 -->
|
|
<view :style="{width: width + 'px'}" class="but">
|
|
<view @click="handleBackUser" class="meiyanbut">
|
|
<image class="but-img" src="../../static/live-back.png"></image>
|
|
<text class="but-text">返回</text>
|
|
</view>
|
|
<view @click="handelBeauty" class="meiyanbut">
|
|
<template v-if="beauty == 0">
|
|
<image class="but-img" src="../../static/live-love.png"></image>
|
|
<text class="but-text">美颜</text>
|
|
</template>
|
|
<template v-else>
|
|
<image class="but-img" src="../../static/live-love-active.png"></image>
|
|
<text class="but-text live-text">美颜</text>
|
|
</template>
|
|
</view>
|
|
<view @click="handelOpenLive" class="meiyanbut">
|
|
<template v-if="!liveStatus">
|
|
<image class="but-img" src="../../static/live-open.png"></image>
|
|
<text class="but-text">开播</text>
|
|
</template>
|
|
<template v-else>
|
|
<image class="but-img" src="../../static/live-open-active.png"></image>
|
|
<text class="but-text live-text">开播</text>
|
|
</template>
|
|
</view>
|
|
<view @click="handelWhiteness" class="meiyanbut">
|
|
<template v-if="whiteness == 0">
|
|
<image class="but-img" src="../../static/live-white.png"></image>
|
|
<text class="but-text">美白</text>
|
|
</template>
|
|
<template v-else>
|
|
<image class="but-img" src="../../static/live-white-active.png"></image>
|
|
<text class="but-text live-text">美白</text>
|
|
</template>
|
|
</view>
|
|
<view @click="handelSwitchCamera" class="meiyanbut">
|
|
<template v-if="!camera">
|
|
<image class="but-img" src="../../static/live-video.png"></image>
|
|
<text class="but-text">切换摄像头</text>
|
|
</template>
|
|
<template v-else>
|
|
<image class="but-img" src="../../static/live-video-active.png"></image>
|
|
<text class="but-text live-text">切换摄像头</text>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
type: "",
|
|
width: '',
|
|
height: '',
|
|
url: '', // 这是推流地址
|
|
camera: false,
|
|
context: null,
|
|
showMarkact: true,
|
|
liveStatus: false,
|
|
beauty: 0,
|
|
whiteness: 0
|
|
};
|
|
},
|
|
// 页面加载
|
|
onLoad() {
|
|
// 获取手机信息
|
|
let info = uni.getSystemInfoSync();
|
|
this.width = info.windowWidth;
|
|
this.height = info.windowHeight;
|
|
},
|
|
// 页面完成
|
|
onReady() {
|
|
this.context = uni.createLivePusherContext('livePusher', this);
|
|
// setTimeout(() => {
|
|
// this.startLive();
|
|
// }, 1000)
|
|
},
|
|
// 页面卸载
|
|
onUnload() {
|
|
if (this.liveStatus) {
|
|
this.handelStopLive();
|
|
}
|
|
},
|
|
methods: {
|
|
// 开启关闭直播
|
|
handelOpenLive() {
|
|
if (!this.liveStatus) {
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您是否要开启直播?',
|
|
cancelText: '取消',
|
|
confirmText: '开启',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
this.handleOpenLive();
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '你是否要关闭直播?',
|
|
cancelText: '取消',
|
|
confirmText: '关闭',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
this.handelStopLive();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
// 返回个人中心
|
|
handleBackUser() {
|
|
if (this.liveStatus) {
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您当前正在直播中是否要返回?',
|
|
cancelText: '取消',
|
|
confirmText: '返回',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
// this.handelStopLive();
|
|
uni.switchTab({
|
|
url: '/pages/index/user'
|
|
})
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
uni.switchTab({
|
|
url: '/pages/index/user'
|
|
})
|
|
}
|
|
},
|
|
// 开启直播
|
|
handleOpenLive() {
|
|
uni.showLoading({
|
|
title: '直播开启中...',
|
|
mask: true,
|
|
})
|
|
uni.$http('common.getLiveAddr').then(res => {
|
|
this.liveStatus = true;
|
|
this.showMarkact = false;
|
|
this.url = res.data.liveUrl;
|
|
this.startLive();
|
|
}).finally(() => {
|
|
uni.hideLoading();
|
|
});
|
|
},
|
|
// 关闭直播
|
|
handelStopLive() {
|
|
uni.showLoading({
|
|
title: '直播关闭中...',
|
|
mask: true,
|
|
})
|
|
uni.$http('common.endLive').then(res => {
|
|
this.liveStatus = false;
|
|
this.showMarkact = true;
|
|
this.url = '';
|
|
this.stopLive();
|
|
}).finally(() => {
|
|
uni.hideLoading();
|
|
});
|
|
},
|
|
// 美颜
|
|
handelBeauty() {
|
|
if (this.liveStatus) {
|
|
this.beauty = this.beauty == 0 ? 9 : 0
|
|
}
|
|
},
|
|
// 美白
|
|
handelWhiteness() {
|
|
if (this.liveStatus) {
|
|
this.whiteness = this.whiteness == 0 ? 9 : 0
|
|
}
|
|
},
|
|
// 开启推流
|
|
startLive() {
|
|
let self = this;
|
|
self.context.start({
|
|
success: res => {
|
|
console.log('livePusher.start:' + JSON.stringify(res));
|
|
}
|
|
});
|
|
},
|
|
// 停止推流
|
|
stopLive: function() {
|
|
this.context.stop({
|
|
success: res => {
|
|
console.log(JSON.stringify(res));
|
|
}
|
|
});
|
|
},
|
|
// 切换摄像头
|
|
handelSwitchCamera() {
|
|
let self = this;
|
|
if (self.liveStatus) {
|
|
self.context.switchCamera({
|
|
success: res => {
|
|
console.log(res);
|
|
self.camera = true;
|
|
console.log("livePusher.switchCamera:" + JSON.stringify(res));
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.live-text {
|
|
color: #f4ea29 !important;
|
|
}
|
|
|
|
.add-shop {
|
|
font-size: 16px;
|
|
color: #333333;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.shop-list-but-box {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.shop-list-but {
|
|
color: white;
|
|
border-radius: 2px;
|
|
font-size: 16px;
|
|
background-color: #D4237A;
|
|
padding: 10px 20px 10px 20px;
|
|
}
|
|
|
|
.mark-title {
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.shop-list-img {
|
|
margin-right: 10px;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.shop-list-title {
|
|
font-size: 20px;
|
|
color: #333333;
|
|
}
|
|
|
|
.shop-list-num {
|
|
font-size: 16px;
|
|
color: #C0C0C0;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.shop-list-price {
|
|
font-size: 16px;
|
|
color: #D4237A;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.scroll-Ys {
|
|
background-color: white;
|
|
height: 300px;
|
|
width: 100%;
|
|
}
|
|
|
|
.shop-list-box {
|
|
position: relative;
|
|
background-color: white;
|
|
width: 100%;
|
|
height: 380px;
|
|
}
|
|
|
|
.shop-list-list {
|
|
position: relative;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.chat-username {
|
|
font-size: 18px;
|
|
color: white;
|
|
}
|
|
|
|
.chat-usertext {
|
|
font-size: 16px;
|
|
color: white;
|
|
}
|
|
|
|
.chat-list {
|
|
margin-top: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
flex-direction: row;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
padding: 5px 10px 5px 10px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.scroll-Y {
|
|
height: 150px;
|
|
width: 250px;
|
|
}
|
|
|
|
.chat {
|
|
position: fixed;
|
|
z-index: 10;
|
|
bottom: 80px;
|
|
}
|
|
|
|
.but-img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.meiyanbut {
|
|
padding: 30rpx;
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.but-text {
|
|
padding-top: 3px;
|
|
font-size: 13px;
|
|
color: white;
|
|
}
|
|
|
|
.id {
|
|
font-size: 14px;
|
|
color: white;
|
|
}
|
|
|
|
.text-box {
|
|
font-size: 12px;
|
|
color: white;
|
|
}
|
|
|
|
.user-img {
|
|
margin-right: 5px;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.mark-text {
|
|
color: white;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.mark {
|
|
position: fixed;
|
|
top: 0;
|
|
background-color: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.but {
|
|
background-color: rgba(0, 0, 0, .4);
|
|
position: fixed;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
padding-bottom: 30rpx;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tui {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.arrow-box {
|
|
position: fixed;
|
|
top: 60px;
|
|
left: 20px;
|
|
z-index: 10;
|
|
border-radius: 20px;
|
|
background-color: rgba(0, 0, 0, .4);
|
|
}
|
|
|
|
.arrow-boxs {
|
|
padding: 20rpx 20px 10px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
position: fixed;
|
|
top: 60px;
|
|
left: 140px;
|
|
z-index: 10;
|
|
border-radius: 30px;
|
|
background-color: rgba(0, 0, 0, .4);
|
|
}
|
|
|
|
.jiesu {
|
|
padding: 10px 20px 10px 20px;
|
|
color: white;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.arrow {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
</style> |