Skip to content

M
mayi-mp-shop
Commit e1ff6fa5 by 李嘉林
Options

底部评论控件

parent cedd6f6f
Showing with 138 additions and 60 deletions
src/components/livedModel/livedControls.vue
......@@ -15,11 +15,12 @@
<livedGoodsDia :showDia="showDia" @changeStatus="changeStatus"></livedGoodsDia>
<!-- 底部控制层 -->
<div class="control flex">
<template v-if="!isSend">
<div class="goodsImg" @click="showGoodsList">
<img src="../../../static/images/lived/goodsImg.png" alt />
<p class="goodsNum">99</p>
</div>
<div class="iptCopy">跟主播说点什么...</div>
<div class="iptCopy" @click="toSendOut">跟主播说点什么...</div>
<div class="shareIcon">
<van-icon name="share" />
</div>
......@@ -32,6 +33,13 @@
</div>
</div>
</div>
</template>
<template v-else>
<div class="sendOut">
<input class="sendIpt" :focus="getFocus" type="text" @blur="onblur" v-model="sendVal" placeholder="和主播说点什么吧~">
<div class="send" :class="{'noSendVal':sendVal==''}" @click="toSend">发送</div>
</div>
</template>
</div>
</div>
</template>
......@@ -55,7 +63,10 @@ export default {
],
num: 0,
userComing: false,
showDia: false //显示商品列表弹窗
showDia: false, //显示商品列表弹窗
isSend:false,//显示评论输入框
sendVal:'',//输入内容
getFocus:false,//获取焦点
};
},
components: {
......@@ -115,6 +126,27 @@ export default {
},
changeStatus() {
this.showDia = false;
},
// 发送评论
toSendOut(){
// 登录及未开始判断
this.isSend=true;
this.getFocus=true;
},
// 失焦点
onblur(){
setTimeout(() => {
this.isSend = false;
this.sendVal = "";
}, 10);
},
// 点击发送留言
toSend(){
if(this.sendVal == ""){
this.getFocus=true;
}else{
}
}
}
};
......@@ -267,6 +299,35 @@ export default {
}
}
}
.sendOut{
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(#000, 0.4);
padding: 0 12px;
width: 100%;
height: 38px;
border-radius: 38px;
line-height: 38px;
font-size: 16px;
.sendIpt{
width: 60vw;
color: #999;
padding-left: 10px;
}
.send{
color: #fff;
height: 30px;
width: 80px;
text-align: center;
line-height: 30px;
border-radius: 30px;
background: linear-gradient(to right, #ff877d, #fb566d);
}
.noSendVal{
background:#ababa9;
}
}
}
}
</style>
src/pages/lived/index.vue
......@@ -2,7 +2,7 @@
<div class="lived">
<!-- 背景(未开始&&已结束) -->
<div class="bgImg" v-if="liveNoticeInfo.coverUrl&&liveNoticeInfo.liveBroadcastState!=1">
<img :src="liveNoticeInfo.coverUrl" alt="">
<img :src="liveNoticeInfo.coverUrl" alt />
</div>
<!-- 直播展示层 -->
<div class="liveModel" v-if="liveNoticeInfo.liveBroadcastState>-1">
......@@ -13,12 +13,13 @@
</div>
<div class="shopName flex">
<div class="img" v-if="shopLogo">
<img :src="shopLogo" alt="">
<img :src="shopLogo" alt />
</div>
<div class="info">
<p class="name line-clamp1" v-if="shopName">{{shopName}}</p>
<p class="num">
<span>999</span> <span>观看</span>
<span>999</span>
<span>观看</span>
</p>
</div>
<div class="toShop" @click="toShop">进店</div>
......@@ -29,7 +30,10 @@
<!-- 结束展示 -->
<livedIsEnded v-if="liveNoticeInfo.liveBroadcastState==2"></livedIsEnded>
<!-- 控件层 -->
<livedControls v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState<2" :info="liveNoticeInfo"></livedControls>
<livedControls
v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState<2"
:info="liveNoticeInfo"
></livedControls>
</div>
<!-- 直播 -->
<live-player
......@@ -47,24 +51,24 @@
<script type="text/ecmascript-6">
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
import notStarted from "@/components/livedModel/notStarted"
import livedControls from "@/components/livedModel/livedControls"
import livedIsEnded from "@/components/livedModel/livedIsEnded"
import notStarted from "@/components/livedModel/notStarted";
import livedControls from "@/components/livedModel/livedControls";
import livedIsEnded from "@/components/livedModel/livedIsEnded";
export default {
name: "",
data() {
return {
liveId:'', //直播间id
livedUrl:'rtmp://58.200.131.2:1935/livetv/hunantv',
shopName:'',
shopLogo:'',
backPath:'',
liveId: "", //直播间id
livedUrl: "rtmp://58.200.131.2:1935/livetv/hunantv",
shopName: "",
shopLogo: "",
backPath: "",
isLoading: false,
status: 0, // 0：未开始 1：直播中 2：已结束
liveNoticeInfo: {}, //详情
isVideo: false, //是否有直播或回放链接
liveTime: null, //定时器
isWifi:true,//提示网络环境
isWifi: true //提示网络环境
};
},
components: {
......@@ -74,31 +78,46 @@ export default {
},
computed: {},
created() {},
onLoad(options){
onLoad(options) {
wx.getNetworkType({
success: function(res) {
if(res.networkType!='wifi'){
wx.showModal({
content: "您当前处于非wifi网络环境下",
confirmColor: '#ff877d',
success: function(res) {
if (res.confirm) {
} else if (res.cancel) {
}
}
});
}
}
});
let params = JSON.parse(options.params);
this.liveId=params.liveId;
this.shopName=params.shopName;
this.shopLogo=DFSImg(params.shopLogo,40,40);
this.liveId = params.liveId;
this.shopName = params.shopName;
this.shopLogo = DFSImg(params.shopLogo, 40, 40);
this.init();
},
onUnload(){
this.liveNoticeInfo.liveBroadcastState=-1;
this.liveNoticeInfo={};
},
mounted() {
onUnload() {
this.liveNoticeInfo.liveBroadcastState = -1;
this.liveNoticeInfo = {};
},
mounted() {},
methods: {
// 初始化数据
init(){
let liveBroadcastId=this.liveId;
live.getLiveInfo(liveBroadcastId).then(res=>{
if(res.data.code==200){
console.log(res.data.data,'------73')
this.liveNoticeInfo=res.data.data;
this.liveNoticeInfo.coverUrl=this.liveNoticeInfo.coverUrl?DFSImg(this.liveNoticeInfo.coverUrl):'';
}
})
init() {
let liveBroadcastId = this.liveId;
live.getLiveInfo(liveBroadcastId).then(res => {
if (res.data.code == 200) {
console.log(res.data.data, "------73");
this.liveNoticeInfo = res.data.data;
this.liveNoticeInfo.coverUrl = this.liveNoticeInfo.coverUrl
? DFSImg(this.liveNoticeInfo.coverUrl)
: "";
}
});
},
statechange(res) {
console.log(res, "-------19");
......@@ -106,26 +125,24 @@ export default {
error(err) {
console.log(err, "----22");
},
back(){
back() {
wx.navigateBack({
delta: 1
})
});
},
toShop(){
toShop() {
// 到商城首页
this.backPath='/';
this.backPath = "/";
wx.reLaunch({
url: `../index/main?from=livedToIndex&backpath=${
this.backPath
}`
})
},
url: `../index/main?from=livedToIndex&backpath=${this.backPath}`
});
}
}
};
</script>
<style lang="scss" scoped>
.flex{
.flex {
display: flex;
}
/*清除浮动*/
......@@ -135,7 +152,7 @@ export default {
.clearfix:after {
clear: both;
content: '.';
content: ".";
display: block;
width: 0;
height: 0;
......@@ -164,14 +181,14 @@ export default {
height: 100vh;
position: relative;
overflow: hidden;
.bgImg{
.bgImg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
img{
img {
width: 100%;
height: 100%;
object-fit: cover;
......@@ -179,54 +196,54 @@ export default {
filter: brightness(0.8);
}
}
.liveModel{
.liveModel {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
.customBack{
.customBack {
position: absolute;
top: 30px;
left: 12px;
width: 70%;
z-index: 2;
align-items: center;
.backIcon{
.backIcon {
color: #fff;
font-size: 20px;
}
.shopName{
.shopName {
margin-left: 20px;
background: rgba(0,0,0,0.6);
background: rgba(0, 0, 0, 0.6);
border-radius: 30px;
align-items: center;
padding-right: 10px;
.img{
.img {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
margin-left: 4px;
img{
img {
width: 100%;
height: 100%;
}
}
.info{
.info {
margin-left: 6px;
color: #fff;
flex: 1;
font-size: 14px;
padding: 2px 0;
.num{
.num {
font-size: 12px;
}
}
.toShop{
background: #FB566D;
padding:0 4px;
.toShop {
background: #fb566d;
padding: 0 4px;
color: #fff;
font-size: 14px;
display: inline-block;
......@@ -237,7 +254,7 @@ export default {
}
}
}
.livePlayer{
.livePlayer {
position: absolute;
top: 0;
left: 0;
......
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