<template>
<div class="setting-wrap">
<div class="set-box">
<div class="set-content" :style="{'bottom':isLive ? '150px' : '190px'}">
<div class="beauty" v-show="active == 1">
<slider
left-icon="cancel"
right-icon="success_no_circle"
min="0"
max="9"
:value="beauty"
activeColor="#FF9900"
block-color="#FF9900"
block-size="24"
@changing="setBeauty"
/>
</div>
<div class="whitening" v-show="active == 2">
<slider
left-icon="cancel"
right-icon="success_no_circle"
min="0"
max="9"
:value="whiteness"
activeColor="#FF9900"
block-color="#FF9900"
block-size="24"
@changing="setWhiteness"
/>
</div>
<div class="clear" v-show="active == 3">
<div class="clear-content">
<div class="clear-item" v-for="(item,index) in clearList" @click="setClear(item)" :key="index">
<div class="clear-item-name" :class="item.id == clearActive ? 'clear-active' :''">{{item.name}}</div>
</div>
</div>
</div>
<div class="equipment-wrap" v-show="active == 4">
<div class="equipment">
<div class="equ-item" v-for="(item,index) in equipmentList" :key="index" @click="equipmentSet(item,index)">
<div class="equ-item-img">
<!-- <img :src="item.imgActive" v-if="item.active" alt=""> -->
<img :src="item.img" alt="">
</div>
<div class="equ-item-name">
{{item.name}}
</div>
</div>
</div>
</div>
</div>
<div class="select-wrap">
<div class="select-list">
<div class="item" v-for="(item,index) in selectList" :key="index" @click="active = item.id">
<div class="item-img">
<img :src="item.img" v-show="item.id != active" alt="">
<img :src="item.activeImg" v-show="item.id == active" alt="">
</div>
<div class="item-name">
{{item.name}}
</div>
</div>
</div>
<div class="start-btn" @click="startLive" v-if="!isLive && liveInfo.liveBroadcastState == 0">
确认开始
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
pusher:{
type:Object,
default:null
},
//美颜
beauty:{
type:Number,
default:0
},
//美白
whiteness:{
type:Number,
default:0
},
//清晰度
clear:{
type:String,
default:'HD'
},
//前置或后置
devicePosition:{
type:String,
default:'front'
},
//麦克风是否开启
enableMic:{
type:Boolean,
default : true
},
//镜像
remoteMirror:{
type:String,
default : 'enable'
},
//是否在直播
isLive:{
type:Boolean,
default:false
},
liveInfo:{
type:Object,
default:null
}
},
data(){
return{
selectList:[
{
id : 1,
name : '美颜',
img : require('../../../static/images/meiyan.png'),
activeImg : require('../../../static/images/meiyan1.png')
},
{
id : 2,
name : '美白',
img : require('../../../static/images/meibai.png'),
activeImg : require('../../../static/images/meibai1.png')
},
{
id : 3,
name : '清晰度',
img : require('../../../static/images/qingxi.png'),
activeImg : require('../../../static/images/qingxi1.png')
},
{
id : 4,
name : '设备',
img : require('../../../static/images/shebei.png'),
activeImg : require('../../../static/images/shebei1.png')
}
],
active : 1,
equipmentList :[
{
id : 1,
name : '反转',
img :require('../../../static/images/xiangji.png'),
imgActive : require('../../../static/images/xiangji1.png'),
active : true,
},
{
id : 2,
name : '镜像',
img :require('../../../static/images/jingxiang.png'),
imgActive : require('../../../static/images/jingxiang1.png'),
active : false,
},
{
id : 3,
name : '声音',
img :require('../../../static/images/shengyin.png'),
imgActive : require('../../../static/images/shengyin1.png'),
active : true,
}
],
clearList:[
{
id : 1,
name : '标清',
val : 'SD'
},
{
id : 2,
name : '高清',
val : 'HD'
},
{
id : 3,
name : '超清',
val : 'FHD'
}
],
clearActive:2,
}
},
methods:{
setBeauty(e){
this.$emit('updateBeauty',e.mp.detail.value)
},
setWhiteness(e){
this.$emit('updateWhiteness',e.mp.detail.value)
},
setClear(item){
this.clearActive = item.id;
this.$emit('updateClear',item.val)
},
equipmentSet(item,index){
//反转
if(item.id == 1){
this.pusher.switchCamera({
success : (res) => {
if(res.errMsg == 'operateXWebLivePusher:ok'){
this.$set(this.equipmentList[index],'active',!item.active)
}
}
})
}else if(item.id == 2){
this.$set(this.equipmentList[index],'active',!item.active)
this.$emit('updateRemoteMirror',this.remoteMirror == 'disable' ? 'enable' : 'disable')
}else if(item.id == 3){
this.$set(this.equipmentList[index],'active',!item.active)
this.$emit('updateEnableMic',this.enableMic == true ? false : true)
}
},
//开始直播
startLive(){
this.$emit('setBeautyStart','start')
}
}
}
</script>
<style lang="scss" scoped>
.set-content{
width: 289px;
position: fixed;
left: 50%;
margin-bottom: 60px;
margin-left: -149px;
.beauty,.whitening{
padding: 0 18px;
box-sizing: border-box;
}
.clear{
.clear-content{
display: flex;
justify-content:space-between;
.clear-item{
display: flex;
align-items: flex-end;
.clear-item-name{
font-size: 19px;
color: white;
}
.clear-active{
font-size: 30px;
position: relative;
&::after{
content: "";
position: absolute;
width: 7px;
height: 7px;
background-color: #FF9900;
border-radius: 50%;
bottom: -12px;
left: 50%;
margin-left: -3.5px;
}
}
}
}
}
.equipment-wrap{
.equipment{
display: flex;
justify-content: space-around;
align-items: center;
.equ-item{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
&:nth-child(1){
.equ-item-img{
width: 26.5px;
height: 21px;
}
}
&:nth-child(2){
.equ-item-img{
width: 27px;
height: 24.5px;
}
}
&:nth-child(3){
.equ-item-img{
width: 25px;
height: 21.5px;
}
}
&:nth-child(4){
.equ-item-img{
width: 24.5px;
height: 24px;
}
}
.equ-item-img{
img{
width: 100%;
height: 100%;
}
}
.equ-item-name{
font-size: 12px;
color: white;
margin-top: 13px;
}
.name-active{
color: #FF9900;
}
}
}
}
}
.select-wrap{
width: 289px;
// height: 265px;
padding-bottom: 15px;
background-color: rgba(0,0,0,.5);
border-radius: 5px;
position: fixed;
bottom: 82px;
left: 50%;
margin-left: -145.5px;
box-sizing: border-box;
.select-list{
display: flex;
justify-content: space-around;
align-items: center;
padding-top: 13px;
.item{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
&:nth-child(1){
.item-img{
width: 28px;
height:27px;
}
}
&:nth-child(2){
.item-img{
width: 23px;
height: 30px;
}
}
&:nth-child(3){
.item-img{
width:30px;
height: 30px;
}
}
&:nth-child(4){
.item-img{
width: 29px;
height: 29px;
}
}
.item-img{
img{
width: 100%;
height: 100%;
}
}
.item-name{
font-size: 12px;
color: white;
margin-top: 10px;
}
}
}
.start-btn{
width: 144px;
height: 39.5px;
text-align: center;
line-height: 39.5px;
font-size: 18px;
color: white;
border-radius: 5px;
margin: 10px auto 0;
background-image:-webkit-linear-gradient(to right,#FF877D, #FB566D);
background-image:-moz-linear-gradient(to right,#FF877D, #FB566D);
background-image:-o-linear-gradient(to right,#FF877D, #FB566D);
background-image: linear-gradient(to right,#FF877D, #FB566D);
}
}
</style>