2178 lines
45 KiB
Plaintext
2178 lines
45 KiB
Plaintext
<template>
|
||
<view class="container">
|
||
<view class="" :style="{'height':heightG+'px','zIndex':'999999'}" @click="quanju">
|
||
<view class="">
|
||
<view class="top-do-box">
|
||
<view class="room-info">
|
||
<view class="room-logo-box">
|
||
<image :src="room.cover" class="room-logo-box"></image>
|
||
</view>
|
||
<view class="room-info-message">
|
||
<view class="room-user-name">
|
||
<text
|
||
style="color: #fff;font-size: 25rpx;">{{room.live_name.length>6?room.live_name.substring(0, 6)+'...': room.live_name}}</text>
|
||
</view>
|
||
<view class="room-user-money">
|
||
<text style="color: #fff;font-size: 25rpx;">{{count}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="room-guanzhu" @click="interest" v-if="!isshow">
|
||
<text class="guanzhu" v-if="!follow">关注</text>
|
||
<text class="guanzhu" v-else>已关注</text>
|
||
</view>
|
||
</view>
|
||
<view class="room-users-box">
|
||
<scroll-view class="right_top_scroll" scroll-x="true" scroll-left="0">
|
||
<view class="top-scroll-users-header" v-for="(bitem,bindex) in users" :key="bindex">
|
||
<image :src="bitem.app_user_avatar" class="top-scroll-users-header"
|
||
v-if="bitem.app_user_avatar"></image>
|
||
<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/default_avtar.png"
|
||
class="top-scroll-users-header" mode="aspectFill"></image>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view class="users-count web-font">
|
||
<view class="users-count web-font">
|
||
<text class="users-count-text"> {{users.length}}</text>
|
||
</view>
|
||
<view class="users-count " @click="outroom">
|
||
<image src="@/static/img/close.png" class="users-count-img" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="top-left" v-if="isshow">
|
||
<view class="top-left-a" @click="switchCamera">
|
||
<image class="left-img" src="/static/img/qiehuan.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="msgview">
|
||
<mh-msgList ref="msgList" :msgList="msgList"></mh-msgList>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<!-- 底部操作 -->
|
||
</view>
|
||
<view class="inpit-box-bg" v-if="focus">
|
||
<view class="inpit-boxbody">
|
||
<input class="uni-input" @input="onKeyInput" maxlength="20" cursor-spacing="10" hold-keyboard
|
||
placeholder="说点什么吧..." :value="inputValue" :focus="focus" />
|
||
<view v-if="inputValue!=''" @click="send_message">
|
||
<text class="send-but">发送</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="dobox" v-else>
|
||
<view class="inpit-box">
|
||
<view class="input-tpl" @click="set_focus">
|
||
<text class="input-tpls">说点什么..</text>
|
||
</view>
|
||
<view class="functionbox">
|
||
<view class="function-box">
|
||
|
||
<view class="ico-box" @click="send_liwu">
|
||
<image class="ico-box-img" src="@/static/img/li.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="ico-box" @click="send_shop">
|
||
<image class="ico-box-img" src="@/static/img/shanpin.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="ico-box" @click="send_lick">
|
||
<image class="ico-box-img" src="@/static/img/jl.png"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 底部分享弹窗 -->
|
||
<uni-popup ref="share" :type="type" :custom="true" @change="change">
|
||
<template v-if="popup==1">
|
||
<view class="uni-share" style="background-color: #333333;">
|
||
|
||
<view class="send-boj" id="tes">
|
||
<view class="send-boj-txt">
|
||
<text class="send-boj-txta">礼物</text>
|
||
<view class="gift-jb-con">
|
||
<image class="gift-jb-img" src="@/static/img/jb.png" mode=""></image>
|
||
<text class="gift-web-je">
|
||
{{now_money}}
|
||
</text>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
<view class="send-boj-close" @tap="close">
|
||
<image class="send-boj-close-img" src="/static/img/close.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y style="height: 480rpx;overflow: hidden;">
|
||
|
||
<view class="uni-share-content">
|
||
<view class="lw-box" v-for="(litem,lindex) in liwu" :key="lindex"
|
||
@click="send_liwu_obj(litem)" @touchstart="handleTouchStart(lindex)"
|
||
@touchend="handleTouchEnd(lindex)" :class="{ 'hovered': lindex== hoveredIndex }">
|
||
<image class="lw-ico" :src="litem.gift_img"></image>
|
||
<view class="lw-name">
|
||
<text class="lw-name">{{litem.gift_name}}</text>
|
||
</view>
|
||
<view class="lw-money">
|
||
<image class="lw-money-img" src="@/static/img/jb.png" mode=""></image>
|
||
|
||
<text class="lw-moneya">{{litem.gift_price}}
|
||
</text>
|
||
</view>
|
||
<text class="send-m" v-if="lindex== hoveredIndex">赠送</text>
|
||
</view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
<!-- <view class="gift-botton-view" @click="rechargejb">
|
||
<text class="gift-web-cz">充值</text>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
<template v-if="popup==2">
|
||
<view class="uni-shop">
|
||
|
||
<view class="shop">
|
||
<view class="shop-top">
|
||
<image class="shop-top-img" :src="room.cover" mode=""></image>
|
||
<text class="shop-top-txt">{{roomDetail.live_name}}</text>
|
||
</view>
|
||
<view class="shop-close" @tap="close">
|
||
<image class="shop-close-img" src="/static/img/colse1.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y style="height: 680rpx;overflow: hidden;">
|
||
<view class="uni-shop-content">
|
||
|
||
<view class="shop-content" v-for="(litem,lindex) in roomDetail.goods" :key="lindex">
|
||
<image class="shop-content-img" :src="litem.app_goods_pic"></image>
|
||
<view class="shop-content-txt">
|
||
<view class="sp-txta">{{litem.app_goods_name}}</view>
|
||
<view class="sp-txtb">
|
||
|
||
<view class="txtba">
|
||
<text class="txtba-a">￥</text>
|
||
<text class="txtba-b">{{litem.app_goods_price.split('.')[0]}}.</text>
|
||
<text class="txtba-c">{{litem.app_goods_price.split('.')[1]}}</text>
|
||
</view>
|
||
<text class="txtbb" @click="shopp(litem)" v-if="!isshow">去抢购</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
|
||
</view>
|
||
</template>
|
||
</uni-popup>
|
||
<uni-popup ref="recharge" :type="type" :custom="true" @change="change">
|
||
<view class="uni-recharge">
|
||
<view class="recharge">
|
||
<view class="recharge_title">
|
||
<text class="recharge_title">我的金币</text>
|
||
</view>
|
||
<view class="recharge-one">
|
||
<image class="recharge-one-img" src="../../static/img/jb.png" mode="aspectFit"></image>
|
||
<view class="recharge-one-txt"><text class="recharge-one-txt" {{now_money}}</text></view>
|
||
</view>
|
||
<view class="recharge-con">
|
||
<view class="recharge-con-title">
|
||
<text class="recharge-con-title">金币充值</text>
|
||
</view>
|
||
<view class="recharge-con-detail">
|
||
|
||
<view class="con-detail" v-for="(item,ik) in Recharglist" :key='ik'
|
||
@click="RechargClick(ik)" :class="{ 'carecharge': ik== regIndex }">
|
||
<view class="" v-if='item.id=="AA"'>
|
||
<!-- <text class="con-detaila">输入金额</text> -->
|
||
<input type="text" class="con-detaila" value="" placeholder="输入金额" />
|
||
<text class="con-detailb">最低可充值1元</text>
|
||
</view>
|
||
<view class="" v-else>
|
||
<text class="con-detaila">{{item.data.give}}金币</text>
|
||
<text class="con-detailb">{{item.data.price}}元</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<text class="recharge-conbottom">
|
||
立即充值
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</uni-popup>
|
||
|
||
<uni-popup ref="giftrecord" :type="type" :custom="true" @change="change">
|
||
<view class="uni-record">
|
||
<view class="uni-record-top">
|
||
<view class="uni-record-top-img" @click="closezb">
|
||
<image class="uni-record-top-img" src="@/static/img/you.png" mode=""></image>
|
||
</view>
|
||
<view class="uni-record-top-text">
|
||
<text class="uni-record-top-text">礼物记录</text>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y :style="{'height':380+'px','overflow':'hidden'}">
|
||
<view class="uni-record-content" v-for="(item,m) in recordlist" :key="m">
|
||
<view class="record-content-one">
|
||
<view class="content-onea">
|
||
<text class="content-onea">{{item.create_time}}</text>
|
||
</view>
|
||
<view class="content-oneb">
|
||
<image src="@/static/img/jb.png" class="content-oneb-img" mode="aspectFit">
|
||
</image>
|
||
<text class="content-oneb-txt" v-if='!isshow'>-{{item.amount}}</text>
|
||
<text class="content-oneb-txt" v-else>+{{item.amount}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="record-content-two">
|
||
<view class="content-twoa">
|
||
<image class="content-twoa-img" src="../../static/missing-face.png" mode="aspectFit">
|
||
</image>
|
||
<text class="content-twoa-txt">{{item.nickname}}</text>
|
||
</view>
|
||
<view class="content-twob">
|
||
<text class="content-twob-txt"
|
||
v-if='!isshow'>给主播赠送{{item.gift_id}}个{{item.gift_name}}</text>
|
||
<text class="content-twob-txt" v-else>主播收到{{item.gift_id}}个{{item.gift_name}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- 礼物弹窗 -->
|
||
<view class="gift-alert" v-for="(gift,gindex) in giftobj" :key="gindex"
|
||
:style="{ top: gift.top + 'px', left: gift.left + 'px' }">
|
||
|
||
<view class="gift-alerta">
|
||
<view class="send-boj-user-header">
|
||
<image :src="gift.app_user_avatar" class="send-boj-user-header-img" mode="aspectFill"
|
||
v-if="gift.app_user_avatar"></image>
|
||
<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/default_avtar.png"
|
||
class="send-boj-user-header-img" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="gift-detail">
|
||
<text class="gifta">{{gift.app_user_name}}</text>
|
||
<text class="giftb">送{{room.app_user_name}}{{gift.gift_name}}</text>
|
||
</view>
|
||
<view class="gift-ico">
|
||
<image :src="gift.gift_img" class="gift-ico-img" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<view class="gift-alertb">
|
||
<image class="gift-alertb-img" src="@/static/img/X.png" mode=""></image>
|
||
<view class="gift-alertb-txt"> <text class="gift-alertb-txt">{{gift.gift_num}}</text> </view>
|
||
</view>
|
||
</view>
|
||
|
||
<gb-popup :isShow="isShow1" rName="确定" :isBut="false" lName="取消" @lEvent="show1" @rEvent="copyData"
|
||
title="请输入礼物数量">
|
||
<view style="padding: 30rpx;">
|
||
<input type="value" v-model="gift_num" placeholder="请输入" />
|
||
</view>
|
||
</gb-popup>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
joinChatRoom,
|
||
sendGroupMessage,
|
||
bindUser,
|
||
stopPushLive,
|
||
liveDetail,
|
||
getfans,
|
||
rewardList,
|
||
giftList,
|
||
liveAudience,
|
||
getuser,
|
||
getRechargeApi,
|
||
sendGift,
|
||
getAjuser,
|
||
getfanslst,
|
||
rewardAmount,
|
||
fansNum
|
||
} from '@/api/api.js'
|
||
import {
|
||
VUE_APP_WS_URL
|
||
} from '@/config/app';
|
||
|
||
import uniPopup from '@/components/uni-popup/live-uni-popup.vue';
|
||
import gbpopup from '@/components/gb-popup/gb-popup.vue';
|
||
import msgList from '@/components/mh-msgList/mh-msgList.vue';
|
||
|
||
export default {
|
||
name: "sd-float-page",
|
||
props: {
|
||
role_val: {
|
||
type: String,
|
||
default: '0'
|
||
},
|
||
roomid_val: {
|
||
type: String,
|
||
default: '0'
|
||
},
|
||
room: {
|
||
type: Object,
|
||
},
|
||
heightG: {
|
||
type: String,
|
||
default: '750'
|
||
},
|
||
|
||
},
|
||
components: {
|
||
uniPopup,
|
||
'mh-msgList': msgList,
|
||
'gb-popup': gbpopup,
|
||
},
|
||
data() {
|
||
return {
|
||
windowWidth: '',
|
||
// room: [], //房间信息
|
||
roomobj: [],
|
||
isShow1: false,
|
||
users: [],
|
||
recordlist: [],
|
||
rid: 0, //房间id
|
||
role: '', //角色
|
||
focus: false,
|
||
|
||
inputValue: '',
|
||
isshow: false,
|
||
message_arr: [
|
||
|
||
],
|
||
msgList: [{
|
||
userName: "系统通知",
|
||
content: "倡导绿色直播，严禁发布涉黄涉毒涉赌，严禁发布涉政、违法及低俗违规内容。健康直播，文明互动",
|
||
cmd: "say",
|
||
msg_type: "system"
|
||
}, ],
|
||
view_id: '',
|
||
liwu: [],
|
||
liwu2: [],
|
||
liwu3: [],
|
||
type: 'bottom',
|
||
follow: false, //关注
|
||
popup: 3, //1礼物操作 2其他操作 3.商品
|
||
user: '',
|
||
giftobj: [], //礼物
|
||
join_arr: [],
|
||
userName: '',
|
||
now_money: 0,
|
||
roomDetail: '',
|
||
userinfo: null,
|
||
hoveredIndex: -1,
|
||
regIndex: -1,
|
||
gifts: [],
|
||
gifsobj: {},
|
||
gift_num: '',
|
||
count: 0,
|
||
zhiBodetail: ''
|
||
|
||
}
|
||
|
||
},
|
||
|
||
mounted() {
|
||
// console.log(this.$store.state.app.userInfo, '房间id 以及当前用户id')
|
||
|
||
if (typeof this.$store.state.app.userInfo === 'string' && this.$store.state.app.userInfo.length > 0) {
|
||
this.userinfo = JSON.parse(this.$store.state.app.userInfo)
|
||
} else {
|
||
this.userinfo = this.$store.state.app.userInfo
|
||
}
|
||
|
||
|
||
|
||
this.get_live_room(); //调用直播间信息
|
||
this.rewardList()
|
||
this.giftList()
|
||
this.liveAudience()
|
||
this.getuser()
|
||
this.getRecharg()
|
||
this.getjuser()
|
||
this.getfanslst()
|
||
},
|
||
onReady() {
|
||
this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
|
||
const t = this;
|
||
t.role = this.$props.role_val;
|
||
t.rid = this.$props.roomid_val;
|
||
t.user = uni.getStorageSync('user');
|
||
console.log('浮动模板被加载的事件')
|
||
console.log(this.$props)
|
||
// 保持屏幕常亮
|
||
uni.setKeepScreenOn({
|
||
keepScreenOn: true,
|
||
success: (res) => {
|
||
console.log('手机长亮时间')
|
||
console.log(res)
|
||
},
|
||
fail: (e) => {
|
||
console.log(e)
|
||
console.log('手机长亮时间')
|
||
}
|
||
});
|
||
uni.onKeyboardHeightChange(res => {
|
||
if (res.height == 0) {
|
||
this.focus = false;
|
||
}
|
||
})
|
||
|
||
|
||
},
|
||
methods: {
|
||
//全局
|
||
quanju() {
|
||
this.focus = false;
|
||
},
|
||
//关注我的人
|
||
getfanslst() {
|
||
getfanslst().then((res) => {
|
||
if (res.status = 200) {
|
||
this.count = res.data.count
|
||
}
|
||
})
|
||
},
|
||
//获取主播关注人数
|
||
fansNum(id) {
|
||
fansNum({
|
||
master_id: id
|
||
}).then((res => {
|
||
// console.log(res,'SSSSSSS')
|
||
this.count = res.data.fan_num
|
||
}))
|
||
},
|
||
rewardAmount() {
|
||
rewardAmount({
|
||
live_stream_id: this.room.live_stream_id
|
||
}).then((res) => {
|
||
if (res.status = 200) {
|
||
this.zhiBodetail = '当前直播间收益:礼物*' + res.data.gift_num + '\u0020\u0020\u0020\u0020金币*' + res
|
||
.data.gift_amount + '\u0020\u0020\u0020\u0020'
|
||
}
|
||
})
|
||
},
|
||
//关注
|
||
getjuser() {
|
||
getAjuser(this.room.app_user_id).then((res) => {
|
||
if (res.status == 200) {
|
||
this.follow = res.data.is_start
|
||
}
|
||
}).catch((err) => {
|
||
|
||
})
|
||
},
|
||
//获取充值数据
|
||
getRecharg() {
|
||
getRechargeApi().then((res) => {
|
||
|
||
this.Recharglist = res.data.recharge_quota
|
||
this.Recharglist.push({
|
||
data: {},
|
||
id: 'AA'
|
||
})
|
||
// this.now_money = res.data.now_money
|
||
})
|
||
},
|
||
//获取余额
|
||
getuser() {
|
||
getuser().then((res) => {
|
||
this.now_money = res.data.now_money
|
||
})
|
||
},
|
||
//获取房间人数列表
|
||
liveAudience() {
|
||
let data = {
|
||
app_name: 'shop',
|
||
live_stream_id: this.room.live_stream_id
|
||
}
|
||
liveAudience(data).then((res) => {
|
||
this.users = res.data.lists
|
||
})
|
||
},
|
||
//礼物列表
|
||
rewardList() {
|
||
if (this.roomDetail.app_user_id == this.userinfo.uid) {
|
||
rewardList({
|
||
type: 2
|
||
}).then((res) => {
|
||
if (res.status = 200) {
|
||
this.recordlist = res.data.list
|
||
}
|
||
})
|
||
} else {
|
||
rewardList({
|
||
type: 1
|
||
}).then((res) => {
|
||
if (res.status = 200) {
|
||
this.recordlist = res.data.list
|
||
}
|
||
})
|
||
}
|
||
},
|
||
//送礼
|
||
|
||
bosendGift(gif) {
|
||
// 执行关闭模态对话框的操作
|
||
let data = {
|
||
app_name: 'shop',
|
||
gift_id: gif.gift_id,
|
||
live_stream_id: this.room.live_stream_id,
|
||
gift_num: gif.gift_num,
|
||
}
|
||
|
||
sendGift(data).then((res) => {
|
||
|
||
if (res.code == 1) {
|
||
this.getuser()
|
||
this.rewardList()
|
||
this.$refs.share.close()
|
||
uni.hideModal()
|
||
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.msg,
|
||
confirmColor: '#ee6666', //确定字体颜色
|
||
showCancel: false, //没有取消按钮的弹框
|
||
buttonText: '确定',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
},
|
||
})
|
||
}
|
||
})
|
||
|
||
},
|
||
//礼物列表
|
||
giftList() {
|
||
giftList().then((res) => {
|
||
this.liwu = res.data
|
||
})
|
||
},
|
||
//关注
|
||
interest() {
|
||
this.follow = !this.follow
|
||
if (this.follow) {
|
||
getfans(this.room.app_user_id, {
|
||
status: 1
|
||
}).then((res) => {
|
||
console.log(res, '11111111')
|
||
if (res.status == 200) {
|
||
console.log('关注成功')
|
||
}
|
||
|
||
}).catch((err) => {
|
||
console.log(err)
|
||
})
|
||
} else {
|
||
getfans(this.room.app_user_id, {
|
||
status: 0
|
||
}).then((res) => {
|
||
if (res.status == 200) {
|
||
|
||
console.log('已取消关注')
|
||
}
|
||
}).catch((err) => {
|
||
console.log(err)
|
||
})
|
||
}
|
||
|
||
},
|
||
|
||
//充值
|
||
RechargClick(index) {
|
||
this.regIndex = index
|
||
},
|
||
//hover效果设置
|
||
handleTouchStart(index) {
|
||
this.hoveredIndex = index;
|
||
},
|
||
handleTouchEnd(index) {
|
||
this.hoveredIndex = -1;
|
||
},
|
||
//加入直播间
|
||
joinChatRoom() {
|
||
let data = {
|
||
live_stream_id: this.room.live_stream_id,
|
||
app_name: 'shop',
|
||
app_user_id: this.userinfo.uid,
|
||
app_user_name: this.userinfo.nickname,
|
||
app_user_avatar: this.userinfo.avatar,
|
||
}
|
||
|
||
joinChatRoom(data).then((res) => {
|
||
|
||
if (res.code == 1) {
|
||
console.log('加入房间成功')
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.msg,
|
||
confirmColor: '#ee6666', //确定字体颜色
|
||
showCancel: false, //没有取消按钮的弹框
|
||
buttonText: '确定',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/room/room_list'
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
|
||
//购买商品
|
||
|
||
shopp(item) {
|
||
uni.sendHostEvent('live_shop', item, (ret) => {
|
||
//发送消息成功回调
|
||
console.log('购买商品' + JSON.stringify(item));
|
||
});
|
||
},
|
||
//绑定用户id
|
||
bindUser(client_id) {
|
||
let data = {
|
||
app_name: 'shop',
|
||
app_user_id: uni.getStorageSync('UID'),
|
||
client_id: client_id
|
||
}
|
||
bindUser(data).then((res) => {
|
||
if (res.code == 1) {
|
||
console.log('绑定成功')
|
||
this.joinChatRoom()
|
||
}
|
||
|
||
}).catch((err) => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
|
||
// 进入这个页面的时候创建websocket连接【整个页面随时使用】
|
||
connectSocketInit() {
|
||
|
||
// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
|
||
this.socketTask = uni.connectSocket({
|
||
// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
|
||
url: VUE_APP_WS_URL,
|
||
success(data) {
|
||
console.log("websocket连接成功", data);
|
||
},
|
||
fail() {
|
||
console.log("websocket连接失败", data);
|
||
},
|
||
complete(data) {
|
||
console.log("websocket连接完成", data);
|
||
}
|
||
});
|
||
this.socketTask.onError((res) => {
|
||
console.log("连接发生错误", res)
|
||
})
|
||
// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
|
||
this.socketTask.onOpen(res => {
|
||
console.log(res, '连接打开');
|
||
})
|
||
|
||
this.socketTask.onMessage((res) => {
|
||
console.log("收到服务器内容：" + res.data);
|
||
let str = res.data
|
||
let obj = JSON.parse(str);
|
||
if (obj.type == 'init') {
|
||
this.bindUser(obj.client_id)
|
||
} else if (obj.type == 'message') {
|
||
|
||
// console.log(this.msgList.length, '11111111111')
|
||
|
||
let data1 = {
|
||
userName: obj.name,
|
||
content: obj.text,
|
||
avatar: obj.avatar,
|
||
cmd: "say",
|
||
msg_type: "user"
|
||
}
|
||
this.msgList.push(data1)
|
||
this.$refs.msgList.setMsgPanelScroll()
|
||
} else if (obj.type == 'sys_message') {
|
||
let data1 = {
|
||
userName: obj.name,
|
||
content: obj.text,
|
||
avatar: obj.avatar,
|
||
cmd: "say",
|
||
msg_type: "system"
|
||
}
|
||
this.msgList.push(data1)
|
||
this.$refs.msgList.setMsgPanelScroll()
|
||
} else if (obj.type == 'stream') {
|
||
if (obj.status == -1) {
|
||
console.log('直播间已关闭')
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '主播已停播',
|
||
confirmColor: '#ee6666', //确定字体颜色
|
||
showCancel: false, //没有取消按钮的弹框
|
||
buttonText: '确定',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
})
|
||
|
||
}
|
||
} else if (obj.type == 'gift_message') {
|
||
this.sendGift(obj)
|
||
let data1 = {
|
||
userName: obj.app_user_name,
|
||
content: obj.text + "X" + obj.gift_num,
|
||
avatar: obj.app_user_avatar,
|
||
cmd: "say",
|
||
msg_type: "user"
|
||
}
|
||
this.msgList.push(data1)
|
||
this.$refs.msgList.setMsgPanelScroll()
|
||
|
||
} else if (obj.type == 'audience') {
|
||
this.liveAudience()
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
});
|
||
// 这里仅是事件监听【如果socket关闭了会执行】
|
||
this.socketTask.onClose(() => {
|
||
console.log("已经被关闭了")
|
||
})
|
||
},
|
||
sendGift(gift) {
|
||
// userName: "11111111",
|
||
// number: 33330,
|
||
// gift_name: "333333333",
|
||
// userAvatar: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
|
||
// gift_ico: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
|
||
gift.top = Math.random() * 200 // 随机生成礼物的位置
|
||
gift.left = Math.random() * 200 // 随机生成礼物的位置
|
||
|
||
this.giftobj.push(gift);
|
||
|
||
setTimeout(() => {
|
||
this.giftobj.splice(this.gifts.indexOf(gift), 1); // 礼物消失
|
||
}, 3000);
|
||
},
|
||
start() {
|
||
this.timeoutObj = setTimeout(() => {
|
||
//这里发送一个心跳，后端收到后，返回一个心跳消息，
|
||
//onmessage拿到返回的心跳就说明连接正常
|
||
console.log('ping');
|
||
this.socketTask.send({
|
||
data: "ping"
|
||
});
|
||
|
||
}, this.timeout)
|
||
},
|
||
// 关闭websocket【离开这个页面的时候执行关闭】
|
||
closeSocket() {
|
||
this.socketTask.close({
|
||
success(res) {
|
||
this.is_open_socket = false;
|
||
console.log("关闭成功", res)
|
||
},
|
||
fail(err) {
|
||
console.log("关闭失败", err)
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
//关闭弹窗
|
||
close() {
|
||
this.$refs.share.close()
|
||
|
||
},
|
||
//切换摄像头
|
||
switchCamera() {
|
||
console.log('切换摄像头')
|
||
this.$emit('switchCamera', '')
|
||
},
|
||
|
||
//关闭直播间
|
||
outroom: function() {
|
||
// console.log(this.roomDetail.app_user_id , this.userinfo.uid)
|
||
if (this.roomDetail.app_user_id == this.userinfo.uid) {
|
||
// console.log(this.roomDetail)
|
||
this.rewardAmount()
|
||
stopPushLive({
|
||
app_name: 'shop',
|
||
stream_name: this.roomDetail.stream_name
|
||
}).then((res) => {
|
||
if (res.code == 1) {
|
||
uni.showModal({
|
||
title: '提示', // 对话框标题
|
||
content: this.zhiBodetail + '是否确定退出直播间', // 对话框内容
|
||
showCancel: true, // 是否显示取消按钮，默认为 true
|
||
cancelText: '取消', // 取消按钮的文字，默认为 "取消"
|
||
cancelColor: '#000000', // 取消按钮的文本颜色，默认为 "#000000"
|
||
confirmText: '确定', // 确定按钮的文字，默认为 "确定"
|
||
confirmColor: '#3CC51F', // 确定按钮的文本颜色，默认为 "#3CC51F"
|
||
success(res) {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/room/room_list'
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击了取消按钮')
|
||
}
|
||
}
|
||
})
|
||
|
||
}
|
||
})
|
||
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示', // 对话框标题
|
||
content: '是否确定退出直播间', // 对话框内容
|
||
showCancel: true, // 是否显示取消按钮，默认为 true
|
||
cancelText: '取消', // 取消按钮的文字，默认为 "取消"
|
||
cancelColor: '#000000', // 取消按钮的文本颜色，默认为 "#000000"
|
||
confirmText: '确定', // 确定按钮的文字，默认为 "确定"
|
||
confirmColor: '#3CC51F', // 确定按钮的文本颜色，默认为 "#3CC51F"
|
||
success(res) {
|
||
if (res.confirm) {
|
||
|
||
uni.redirectTo({
|
||
url: '/pages/room/room_list'
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击了取消按钮')
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
//获取房间详情
|
||
get_live_room() {
|
||
liveDetail({
|
||
app_name: 'shop',
|
||
live_stream_id: this.room.live_stream_id,
|
||
}).then(res => {
|
||
|
||
if (res.code == 1) {
|
||
this.roomDetail = res.data
|
||
|
||
if (res.data.app_user_id == this.userinfo.uid) {
|
||
this.isshow = true
|
||
this.userinfo.nickname = res.data.app_user_name
|
||
this.userinfo.avatar = res.data.app_user_avatar
|
||
} else {
|
||
this.fansNum(res.data.app_user_id)
|
||
}
|
||
}
|
||
this.connectSocketInit()
|
||
}).catch((err) => {})
|
||
},
|
||
togglePopup(type, open) {
|
||
this.type = type
|
||
if (open === 'tip') {
|
||
this.show = true
|
||
} else {
|
||
this.$refs[open].open()
|
||
}
|
||
},
|
||
cancel(type) {
|
||
if (type === 'tip') {
|
||
this.show = false
|
||
return
|
||
}
|
||
// this.$refs[type].close()
|
||
},
|
||
change(e) {
|
||
console.log('是否打开:' + e.show)
|
||
},
|
||
//关闭
|
||
closezb() {
|
||
this.$refs['giftrecord'].close()
|
||
},
|
||
//充值
|
||
rechargejb: function() {
|
||
this.$refs['share'].close()
|
||
const t = this;
|
||
this.type = 'bottom'
|
||
this.$refs['recharge'].open()
|
||
|
||
},
|
||
send_liwu: function() {
|
||
const t = this;
|
||
t.popup = 1;
|
||
this.type = 'bottom'
|
||
t.togglePopup('bottom', 'share');
|
||
|
||
// this.$refs['recharge'].open()
|
||
},
|
||
send_shop: function() {
|
||
const t = this;
|
||
t.popup = 2;
|
||
|
||
this.type = 'bottom'
|
||
t.togglePopup('bottom', 'share');
|
||
},
|
||
send_lick: function() {
|
||
// this.sendGift()
|
||
|
||
|
||
this.$refs['giftrecord'].open()
|
||
},
|
||
//礼物弹窗
|
||
show1() {
|
||
this.isShow1 = !this.isShow1
|
||
this.gift_num = ''
|
||
},
|
||
//礼物弹窗0
|
||
copyData() {
|
||
this.gifsobj.gift_num = this.gift_num
|
||
this.bosendGift(this.gifsobj)
|
||
this.show1()
|
||
},
|
||
//礼物弹窗1
|
||
send_liwu_obj: function(gt) {
|
||
console.log(this.gift_num)
|
||
let gift = {
|
||
'gift_id': gt.id,
|
||
|
||
}
|
||
this.isShow1 = true
|
||
this.gifsobj = gift
|
||
|
||
},
|
||
//对话监听
|
||
set_focus: function() {
|
||
this.focus = !this.focus
|
||
},
|
||
|
||
//对话输入监听
|
||
onKeyInput: function(event) {
|
||
this.inputValue = event.detail.value
|
||
|
||
},
|
||
|
||
//发消息
|
||
send_message: function() {
|
||
const t = this;
|
||
t.focus = false;
|
||
|
||
if (t.to_userid == '') {
|
||
uni.showToast({
|
||
title: '内容不能为空',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
let data = {
|
||
live_stream_id: this.room.live_stream_id,
|
||
app_name: 'shop',
|
||
app_user_id: uni.getStorageSync('UID'),
|
||
message: this.inputValue
|
||
}
|
||
this.inputValue = ''
|
||
sendGroupMessage(data).then(res => {
|
||
console.log('发送的消息' + JSON.stringify(res))
|
||
if (res.code == 1) {
|
||
console.log('发送的消息成功')
|
||
}
|
||
})
|
||
// let message = {
|
||
// userName: '大黄',
|
||
// content: this.inputValue,
|
||
// cmd: "say",
|
||
// msg_type: "user"
|
||
// };
|
||
|
||
// /** 实际应用应发送到服务端，通过监听服务端传回的消息加入的msgList **/
|
||
// if (this.msgList.length > 100) {
|
||
// this.msgList.splice(0, 1);
|
||
// this.msgList.push(message)
|
||
// this.$refs.msgList.setMsgPanelScroll()
|
||
// this.inputValue = ''
|
||
// } else {
|
||
// this.msgList.push(message)
|
||
// this.$refs.msgList.setMsgPanelScroll()
|
||
// this.inputValue = ''
|
||
// }
|
||
// console.log(this.msgList)
|
||
|
||
},
|
||
},
|
||
// onBackPress() {
|
||
// this.$refs['showpopup'].close()
|
||
// this.$refs['showtip'].close()
|
||
// this.$refs['showimage'].close()
|
||
// this.$refs['showshare'].close()
|
||
// }
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
position: relative;
|
||
|
||
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
/* 设置容器的宽度 */
|
||
}
|
||
|
||
.uni-record {
|
||
border-radius: 0;
|
||
flex: 1;
|
||
background-color: #F4F4F4 !important;
|
||
}
|
||
|
||
.uni-record-content {
|
||
height: 177rpx;
|
||
background: #FFFFFF;
|
||
padding: 0rpx 28rpx;
|
||
border-radius: 21rpx 21rpx;
|
||
margin-bottom: 21rpx;
|
||
}
|
||
|
||
.uni-record {}
|
||
|
||
.uni-record-top {
|
||
margin-top: 60rpx;
|
||
flex-direction: row;
|
||
margin-bottom: 30rpx;
|
||
|
||
}
|
||
|
||
.uni-record-top-img {
|
||
width: 59rpx;
|
||
height: 58rpx;
|
||
}
|
||
|
||
.uni-record-top-text {
|
||
font-size: 33rpx;
|
||
color: #000000;
|
||
margin-top: 5rpx;
|
||
}
|
||
|
||
.record-content-one {
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
margin-top: 30rpx;
|
||
padding-bottom: 14rpx;
|
||
border-bottom: 1rpx solid #333333;
|
||
}
|
||
|
||
.content-onea {
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.content-oneb {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.content-oneb-img {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.content-oneb-txt {
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
|
||
}
|
||
|
||
.record-content-two {
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
padding-top: 25rpx;
|
||
}
|
||
|
||
.content-twoa {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.content-twob-txt {
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.content-twoa-txt {
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin-top: 20rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.content-twoa-img {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
}
|
||
|
||
.dobox {
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
width: 750rpx;
|
||
|
||
z-index: 9999;
|
||
}
|
||
|
||
.inpit-box {
|
||
padding: 20upx 20rpx;
|
||
width: 700rpx;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
/* padding-top: 40upx; */
|
||
}
|
||
|
||
.inpit-box-bg {
|
||
position: absolute;
|
||
|
||
bottom: 0;
|
||
height: 80rpx;
|
||
width: 750rpx;
|
||
background-color: #F8F8F8;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.inpit-boxbody {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
|
||
|
||
}
|
||
|
||
.uni-input {
|
||
font-size: 32upx;
|
||
height: 60upx;
|
||
margin-top: 10upx;
|
||
padding-left: 20rpx;
|
||
color: #333333;
|
||
background-color: #f8f8f8;
|
||
flex: 1;
|
||
}
|
||
|
||
.send-but {
|
||
width: 120upx;
|
||
background-color: #0081FF;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
font-size: 28upx;
|
||
height: 60upx;
|
||
line-height: 60upx;
|
||
border-radius: 60upx;
|
||
margin-top: 10upx;
|
||
}
|
||
|
||
|
||
|
||
.function-box {
|
||
width: 380rpx;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
padding-left: 20upx;
|
||
}
|
||
|
||
.ico-box {
|
||
width: 77rpx;
|
||
height: 77rpx;
|
||
border-radius: 50%;
|
||
background-color: rgba(0, 0, 0, .1);
|
||
line-height: 77rpx;
|
||
|
||
}
|
||
|
||
.ico-box-img {
|
||
width: 77rpx;
|
||
height: 77rpx;
|
||
border-radius: 50%;
|
||
background-color: rgba(0, 0, 0, .1);
|
||
line-height: 77rpx;
|
||
}
|
||
|
||
.ico {
|
||
|
||
font-size: 48upx;
|
||
}
|
||
|
||
.input-tpl {
|
||
height: 70upx;
|
||
width: 300upx;
|
||
line-height: 70upx;
|
||
text-align: left;
|
||
background: rgba(0, 0, 0, 0.25);
|
||
opacity: 1;
|
||
border-radius: 39upx;
|
||
}
|
||
|
||
.input-tpls {
|
||
height: 70upx;
|
||
width: 300upx;
|
||
line-height: 70upx;
|
||
text-align: left;
|
||
padding-left: 20rpx;
|
||
font-size: 25upx;
|
||
color: #FFFFFF;
|
||
border-radius: 70upx;
|
||
}
|
||
|
||
.top-left {
|
||
// height: auto;
|
||
position: fixed;
|
||
width: 40rpx;
|
||
right: 20rpx;
|
||
top: 230rpx;
|
||
z-index: 99999;
|
||
}
|
||
|
||
.left-img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
|
||
|
||
.gifta {
|
||
font-size: 23rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
margin-top: 5rpx;
|
||
margin-bottom: 5rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.giftb {
|
||
|
||
font-size: 19rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
}
|
||
|
||
.nickname {
|
||
font-size: 28upx;
|
||
color: #22c8ef;
|
||
/* font-weight: 800; */
|
||
padding: 0 10upx;
|
||
line-height: 40upx;
|
||
padding-left: 4upx;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.message-scroll-box {
|
||
line-height: 40upx;
|
||
color: #f9f9f9;
|
||
font-size: 28upx;
|
||
white-space: pre-wrap;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.message-scroll-box-xi {
|
||
line-height: 40upx;
|
||
color: #f9f9f9;
|
||
font-size: 28upx;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.message-scroll-box-gift {
|
||
color: #22c8ef;
|
||
line-height: 40upx;
|
||
font-size: 28upx;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.user-lever {
|
||
background-color: #ebc602;
|
||
padding: 4upx 10upx;
|
||
border-radius: 20upx;
|
||
height: 20upx;
|
||
line-height: 20upx;
|
||
float: left;
|
||
display: flex;
|
||
overflow: hidden;
|
||
margin-top: 10upx;
|
||
}
|
||
|
||
.msgview {
|
||
position: fixed;
|
||
width: 540rpx;
|
||
height: 540rpx;
|
||
left: 20rpx;
|
||
bottom: 180rpx;
|
||
overflow: hidden;
|
||
border: none;
|
||
|
||
z-index: 9;
|
||
|
||
}
|
||
|
||
.chat-area-line {
|
||
width: 550upx;
|
||
flex-direction: row;
|
||
margin-bottom: 5upx;
|
||
}
|
||
|
||
.system-msg {
|
||
width: 550upx;
|
||
margin-bottom: 5upx;
|
||
}
|
||
|
||
.system-msg-detail {
|
||
// max-width: 550upx;
|
||
|
||
padding: 10upx;
|
||
border-radius: 30upx;
|
||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
margin-right: 14upx;
|
||
|
||
>.system-msg-detail-username {
|
||
color: red;
|
||
font-size: 32upx;
|
||
font-weight: 400;
|
||
line-height: 40upx;
|
||
|
||
}
|
||
|
||
>.system-msg-detail-content {
|
||
font-size: 32upx;
|
||
font-weight: 400;
|
||
line-height: 40upx;
|
||
color: #A0CFFF;
|
||
}
|
||
}
|
||
|
||
.user-line {
|
||
// max-width: 530upx;
|
||
padding: 10upx;
|
||
color: #FFFFFF;
|
||
flex-direction: row;
|
||
border-radius: 30upx;
|
||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||
margin-right: 14upx;
|
||
font-size: 28upx;
|
||
font-weight: 400;
|
||
line-height: 40upx;
|
||
}
|
||
|
||
.user-msg {
|
||
width: 530upx;
|
||
|
||
|
||
margin-bottom: 5upx;
|
||
}
|
||
|
||
.user-msg-detail {
|
||
padding: 10upx;
|
||
border-radius: 30upx;
|
||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
margin-right: 14upx;
|
||
|
||
>.user-msg-detail-tag {
|
||
color: #A0CFFF;
|
||
background-color: #53C21D;
|
||
width: 80upx;
|
||
height: 40upx;
|
||
border-radius: 20upx;
|
||
font-size: 32upx;
|
||
font-weight: 400;
|
||
line-height: 40upx;
|
||
}
|
||
|
||
>.user-msg-detail-username {
|
||
color: #A0CFFF;
|
||
font-size: 32upx;
|
||
font-weight: 400;
|
||
line-height: 40upx;
|
||
}
|
||
|
||
>.user-msg-detail-content {
|
||
font-size: 32upx;
|
||
font-weight: 400;
|
||
line-height: 40upx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.user-lever-ico-box {
|
||
width: 100rpx;
|
||
width: 15upx;
|
||
height: 15upx;
|
||
border-radius: 100%;
|
||
background-color: #e0ad07;
|
||
padding: 2upx;
|
||
margin-right: 5upx;
|
||
}
|
||
|
||
.user-lever-ico {
|
||
width: 15upx;
|
||
height: 15upx;
|
||
|
||
// margin: auto;
|
||
}
|
||
|
||
.user-lever-text {
|
||
color: #FFFFFF;
|
||
font-size: 22upx;
|
||
height: 20upx;
|
||
line-height: 20upx;
|
||
}
|
||
|
||
.uni-recharge {
|
||
background-color: #fff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
flex: 1;
|
||
width: 750rpx;
|
||
background: #FFFFFF;
|
||
border-top-left-radius: 30upx;
|
||
border-top-right-radius: 30upx;
|
||
|
||
|
||
}
|
||
|
||
|
||
|
||
.recharge-one {
|
||
display: flex;
|
||
justify-content: center; //弹性盒子对象在主轴上的对齐方式
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.recharge_title {
|
||
font-size: 33rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
margin-top: 32rpx;
|
||
margin-bottom: 42rpx;
|
||
}
|
||
|
||
.recharge-one-img {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
|
||
|
||
vertical-align: middle;
|
||
|
||
|
||
}
|
||
|
||
.recharge-one-txt {
|
||
font-size: 33rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
text-align: center;
|
||
margin-top: 18rpx;
|
||
}
|
||
|
||
.recharge-con {
|
||
padding: 0 32rpx;
|
||
}
|
||
|
||
.recharge-con-title {
|
||
font-size: 33rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.recharge-con-detail {
|
||
flex-direction: row;
|
||
|
||
margin-top: 32rpx;
|
||
margin-bottom: 200rpx;
|
||
}
|
||
|
||
.recharge-conbottom {
|
||
|
||
width: 589rpx;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
text-align: center;
|
||
position: absolute;
|
||
bottom: 30rpx;
|
||
left: 50%;
|
||
margin-left: -299.5rpx;
|
||
background: #F84221;
|
||
border-radius: 42rpx 42rpx;
|
||
font-size: 33rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.con-detail {
|
||
width: 217rpx;
|
||
height: 159rpx;
|
||
margin-right: 18rpx;
|
||
|
||
border-radius: 21rpx 21rpx;
|
||
background: #F4F4F4;
|
||
text-align: center;
|
||
}
|
||
|
||
.carecharge {
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: #F84221;
|
||
}
|
||
|
||
.con-detaila {
|
||
margin-top: 32rpx;
|
||
margin-bottom: 17rpx;
|
||
font-size: 37rpx;
|
||
font-family: PingFang SC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
|
||
.con-detailb {
|
||
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
/* 底部分享 */
|
||
.uni-share {
|
||
|
||
background-color: #fff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 750rpx;
|
||
border-top-left-radius: 30upx;
|
||
border-top-right-radius: 30upx;
|
||
}
|
||
|
||
.uni-shop {
|
||
|
||
background-color: #fff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 750rpx;
|
||
border-top-left-radius: 30upx;
|
||
border-top-right-radius: 30upx;
|
||
|
||
}
|
||
|
||
.shop {
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.shop-top {
|
||
flex-direction: row;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.shop-top-img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.shop-close {
|
||
margin: 20rpx 20rpx;
|
||
}
|
||
|
||
.shop-close-img {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
|
||
}
|
||
|
||
.shop-top-txt {
|
||
line-height: 80rpx;
|
||
margin-left: 30rpx;
|
||
}
|
||
|
||
.uni-share-title {
|
||
line-height: 60rpx;
|
||
font-size: 24rpx;
|
||
padding: 15rpx 0;
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
.uni-shop-content {
|
||
/* #ifndef APP-NVUE */
|
||
/* display: flex; */
|
||
/* #endif */
|
||
// width: 750rpx;
|
||
|
||
// display: flex;
|
||
|
||
flex-wrap: wrap;
|
||
// justify-content: center;
|
||
|
||
|
||
padding-left: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
margin-top: 20rpx;
|
||
|
||
|
||
|
||
/* padding-bottom: 0; */
|
||
}
|
||
|
||
.shop-content {
|
||
width: 700rpx;
|
||
// border-width: 1px;
|
||
// border-style: solid;
|
||
// border-color: red;
|
||
flex-direction: row;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.shop-content-img {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
// border-width: 1px;
|
||
// border-style: solid;
|
||
// border-color: red;
|
||
}
|
||
|
||
.shop-content-txt {
|
||
margin-left: 20rpx;
|
||
width: 500rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.sp-txta {
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.sp-txtb {
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
width: 500rpx;
|
||
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
|
||
.txtba {
|
||
color: red;
|
||
flex-direction: row;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 400;
|
||
color: #F84221;
|
||
}
|
||
|
||
.txtba-a {
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 400;
|
||
color: #F84221;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.txtba-b {
|
||
font-size: 33rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #F84221;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.txtba-c {
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 400;
|
||
line-height: 60rpx;
|
||
color: #F84221;
|
||
}
|
||
|
||
.txtbb {
|
||
width: 120rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
background-color: red;
|
||
border-radius: 0px 11rpx 11rpx 0px;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.uni-share-content {
|
||
/* #ifndef APP-NVUE */
|
||
/* display: flex; */
|
||
/* #endif */
|
||
// width: 750rpx;
|
||
|
||
// display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
// justify-content: center;
|
||
padding: 15px 28rpx;
|
||
|
||
|
||
/* padding-bottom: 0; */
|
||
}
|
||
|
||
.content-image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.uni-share-content-text {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
padding-top: 5px;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.uni-share-btn {
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: 14px;
|
||
border-top-color: #f5f5f5;
|
||
border-top-width: 1px;
|
||
border-top-style: solid;
|
||
text-align: center;
|
||
color: #666;
|
||
}
|
||
|
||
.gift-botton-view {
|
||
line-height: 90rpx;
|
||
height: 90rpx;
|
||
font-size: 14px;
|
||
border-top-color: #5c1398;
|
||
border-top-width: 1px;
|
||
border-top-style: solid;
|
||
text-align: center;
|
||
|
||
|
||
}
|
||
|
||
.gift-jb-con {
|
||
width: 221rpx;
|
||
height: 43rpx;
|
||
background: rgba(0, 0, 0, 0.25);
|
||
border-radius: 39rpx 39rpx;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.gift-web-je {
|
||
font-size: 23rpx;
|
||
line-height: 43rpx;
|
||
font-weight: normal;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.gift-jb-img {
|
||
width: 33rpx;
|
||
height: 33rpx;
|
||
margin-top: 3rpx;
|
||
margin-left: 10rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.gift-web-cz {
|
||
font-size: 25rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 礼物 */
|
||
.lw-box {
|
||
width: 168rpx;
|
||
height: 224rpx;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border-radius: 21rpx 21rpx;
|
||
margin-bottom: 30upx;
|
||
position: relative;
|
||
}
|
||
|
||
.hovered {
|
||
border: 2rpx solid #707070;
|
||
}
|
||
|
||
.send-m {
|
||
width: 168rpx;
|
||
height: 49rpx;
|
||
line-height: 49rpx;
|
||
text-align: center;
|
||
position: absolute;
|
||
background: #F84221;
|
||
bottom: 0;
|
||
border-radius: 0 0 21rpx 21rpx;
|
||
font-size: 23rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.lw-ico {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
margin-left: 35rpx;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 10rpx;
|
||
|
||
|
||
|
||
}
|
||
|
||
.lw-name {
|
||
font-size: 23rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.lw-money {
|
||
flex-direction: row;
|
||
|
||
}
|
||
|
||
.lw-moneya {
|
||
font-size: 23rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
margin-top: 5rpx;
|
||
}
|
||
|
||
.lw-money-img {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-left: 38rpx;
|
||
margin-right: 5rpx;
|
||
}
|
||
|
||
.send-boj {
|
||
// display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
padding: 20upx 30upx;
|
||
// border-bottom: 2upx solid #5c1398;
|
||
}
|
||
|
||
.send-boj-txt {
|
||
flex: 1;
|
||
|
||
padding-right: 40rpx;
|
||
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.send-boj-txta {
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.send-boj-close {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.send-boj-close-img {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.gift-alert {
|
||
// width: 480rpx;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
// background-color: green;
|
||
animation: slideRight 1s linear forwards;
|
||
z-index: 9999;
|
||
position: absolute;
|
||
}
|
||
|
||
.gift-alerta {
|
||
width: 359rpx;
|
||
height: 70rpx;
|
||
background: rgba(0, 0, 0, 0.25);
|
||
border-radius: 39rpx 39rpx;
|
||
padding-left: 2rpx;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
.gift-alertb {
|
||
flex-direction: row;
|
||
height: 72rpx;
|
||
}
|
||
|
||
.gift-alertb-img {
|
||
width: 44rpx;
|
||
height: 72rpx;
|
||
}
|
||
|
||
.gift-alertb-txt {
|
||
font-size: 45rpx;
|
||
margin-top: 5rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 700;
|
||
color: #FFFFFF;
|
||
|
||
}
|
||
|
||
@keyframes slideRight {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(100%);
|
||
}
|
||
}
|
||
|
||
|
||
.gift-ico {
|
||
width: 60upx;
|
||
height: 60upx;
|
||
margin-top: 10rpx;
|
||
|
||
}
|
||
|
||
.gift-ico-img {
|
||
width: 60upx;
|
||
height: 60upx;
|
||
|
||
}
|
||
|
||
.send-boj-user-header {
|
||
width: 63upx;
|
||
height: 63upx;
|
||
border-radius: 50%;
|
||
margin-top: 3rpx;
|
||
|
||
|
||
}
|
||
|
||
.send-boj-user-header-img {
|
||
width: 63upx;
|
||
height: 63upx;
|
||
border-radius: 50%;
|
||
|
||
|
||
}
|
||
|
||
.top-do-box {
|
||
width: 750rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
|
||
margin-top: 60rpx;
|
||
}
|
||
|
||
.room-info {
|
||
width: 350rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
height: 80upx;
|
||
background-color: rgba(0, 0, 0, .2);
|
||
|
||
border-radius: 90upx;
|
||
|
||
}
|
||
|
||
.room-logo-box {
|
||
width: 80upx;
|
||
height: 80upx;
|
||
border-radius: 50%;
|
||
|
||
}
|
||
|
||
|
||
.room-info-message {
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.room-user-name {
|
||
width: 150rpx;
|
||
|
||
font-size: 25upx;
|
||
color: #fff;
|
||
margin-top: 10rpx;
|
||
|
||
}
|
||
|
||
.room-user-money {
|
||
font-size: 28upx;
|
||
font-size: 25upx;
|
||
color: #fff;
|
||
margin-top: 5rpx;
|
||
}
|
||
|
||
|
||
.room-xin-box {
|
||
height: 30upx;
|
||
line-height: 30upx;
|
||
font-size: 20upx;
|
||
color: #FFFFFF;
|
||
border-radius: 30upx;
|
||
background-color: #f4305e;
|
||
margin-top: 10upx;
|
||
padding: 0 10upx;
|
||
margin-right: 4upx;
|
||
}
|
||
|
||
.room-money {
|
||
height: 30upx;
|
||
line-height: 30upx;
|
||
font-size: 20upx;
|
||
color: #FFFFFF;
|
||
border-radius: 30upx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
margin-top: 10upx;
|
||
}
|
||
|
||
.room-guanzhu {
|
||
width: 105upx;
|
||
height: 60upx;
|
||
line-height: 60upx;
|
||
text-align: center;
|
||
color: #f4305e;
|
||
background-color: #FFFFFF;
|
||
border-radius: 50upx;
|
||
margin-top: 10rpx;
|
||
|
||
}
|
||
|
||
.guanzhu {
|
||
width: 105upx;
|
||
height: 60upx;
|
||
line-height: 60upx;
|
||
text-align: center;
|
||
font-size: 25rpx;
|
||
color: #f4305e;
|
||
background-color: #FFFFFF;
|
||
border-radius: 50upx;
|
||
|
||
}
|
||
|
||
.room-users-box {
|
||
width: 200rpx;
|
||
height: 70upx;
|
||
|
||
display: flex;
|
||
margin-top: 10rpx;
|
||
|
||
}
|
||
|
||
.right_top_scroll {
|
||
overflow: hidden;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
width: 200rpx;
|
||
height: 75upx;
|
||
|
||
}
|
||
|
||
|
||
|
||
.top-scroll-users-header {
|
||
width: 63upx;
|
||
height: 63upx;
|
||
border-radius: 50%;
|
||
margin-right: 10upx;
|
||
overflow: hidden;
|
||
|
||
}
|
||
|
||
// .top-scroll-users-header image {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// }
|
||
|
||
.users-count {
|
||
display: flex;
|
||
flex-direction: row;
|
||
color: #FFFFFF;
|
||
font-size: 28upx;
|
||
}
|
||
|
||
.users-count-text {
|
||
margin-top: 10rpx;
|
||
width: 70upx;
|
||
height: 60upx;
|
||
line-height: 60upx;
|
||
text-align: center;
|
||
border-radius: 60upx;
|
||
background-color: rgba(0, 0, 0, .2);
|
||
margin-right: 30rpx;
|
||
font-size: 19px;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.users-count-img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-top: 20rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
</style> |