1637 lines
36 KiB
Plaintext
1637 lines
36 KiB
Plaintext
<template name="sd-float-page">
|
||
<view style="border-width: 1px;
|
||
border-style: solid;
|
||
border-color: #ffff;position: relative;">
|
||
<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;">4000</text>
|
||
</view>
|
||
</view>
|
||
<view class="room-guanzhu" v-if="!isshow"><text class="guanzhu">关注</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.url" class="top-scroll-users-header"></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 class="inpit-box-bg" v-if="focus">
|
||
<view class="inpit-box-body">
|
||
<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_lick">
|
||
<image class="ico-box-img" src="@/static/lw/1.gif"></image>
|
||
</view>
|
||
<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>
|
||
</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: #421395;">
|
||
<!-- <text class="uni-share-title">支付选项</text> -->
|
||
<view class="send-boj" id="tes">
|
||
<view style="font-size: 32upx;padding-left: 10upx;color: #FFFFFF;">
|
||
礼物
|
||
</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(1,litem.id)">
|
||
<image class="lw-ico" :src="litem.ico"></image>
|
||
<view class="lw-name">{{litem.name}}</view>
|
||
<view class="lw-money">{{litem.price}}陌陌币</view>
|
||
</view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
<view class="gift-botton-view">
|
||
<view style="color: #FFFFFF;" class="web-font">
|
||
余额: {{user.rice}} 币
|
||
</view>
|
||
<view style="color: #ff2d54;">充值</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-if="popup==2">
|
||
<view class="uni-share">
|
||
<text class="uni-share-title">设置</text>
|
||
<view class="uni-share-content">
|
||
</view>
|
||
<text class="uni-share-btn" @click="cancel('share')">关闭</text>
|
||
</view>
|
||
</template>
|
||
<template v-if="popup==3">
|
||
<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">
|
||
<text class="txtba">{{litem.app_goods_price}}</text>
|
||
<text class="txtbb" @click="shopp(litem)" v-if="isshow">购买</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
|
||
</view>
|
||
</template>
|
||
</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="send-boj-user-header"
|
||
style="border-width: 1px;border-style: solid;border-color: #ffff;z-index: 9999;">
|
||
<image :src="gift.userAvatar" class="send-boj-user-header-img" mode="aspectFit"></image>
|
||
</view>
|
||
<view style="font-size: 32upx;padding-left: 10upx;color: #FFFFFF;">
|
||
送你{{gift.gift_name}}
|
||
</view>
|
||
<view class="gift-ico">
|
||
<image :src="gift.gift_ico" class="gift-ico-img" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 用户进入弹窗 -->
|
||
<view class="join-box" v-for="(join,jindex) in join_arr" :key="jindex" :animation="join.animationData">
|
||
<view class="user-lever" style="margin-right: 10upx;">
|
||
<view class="user-lever-ico-box">
|
||
<image class="user-lever-ico" src="/static/img/room-user-lever.png"></image>
|
||
</view>
|
||
<view class="web-font user-lever-text">2</view>
|
||
</view>
|
||
<text class="join-box-text web-font">
|
||
{{join.message}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
joinChatRoom,
|
||
sendGroupMessage,
|
||
bindUser,
|
||
stopPushLive,
|
||
liveDetail,
|
||
|
||
} from '@/api/api.js'
|
||
import {
|
||
VUE_APP_WS_URL
|
||
} from '@/config/app';
|
||
import uniPopup from '@/components/uni-popup/live-uni-popup.vue';
|
||
import msgList from '@/components/mh-msgList/mh-msgList.vue';
|
||
import Json from '../../static/js/json.js' //测试用数据
|
||
export default {
|
||
name: "sd-float-page",
|
||
props: {
|
||
role_val: {
|
||
type: String,
|
||
default: '0'
|
||
},
|
||
roomid_val: {
|
||
type: String,
|
||
default: '0'
|
||
},
|
||
room: {
|
||
type: Object,
|
||
}
|
||
},
|
||
components: {
|
||
uniPopup,
|
||
'mh-msgList': msgList
|
||
},
|
||
data() {
|
||
return {
|
||
windowWidth: '',
|
||
// room: [], //房间信息
|
||
roomobj: [],
|
||
users: [{
|
||
url: require('@/static/logo.png'),
|
||
},
|
||
{
|
||
url: require('@/static/logo.png'),
|
||
},
|
||
{
|
||
url: require('@/static/logo.png'),
|
||
}, {
|
||
url: require('@/static/logo.png'),
|
||
}
|
||
],
|
||
rid: 0, //房间id
|
||
role: '', //角色
|
||
focus: false,
|
||
inputValue: '',
|
||
isshow: false,
|
||
message_arr: [{
|
||
userName: '11111',
|
||
message: '2222'
|
||
},
|
||
{
|
||
userName: '11111',
|
||
message: '2222'
|
||
}, {
|
||
userName: '11111',
|
||
message: '2222'
|
||
}, {
|
||
userName: '11111',
|
||
message: '2222'
|
||
}, {
|
||
userName: '11111',
|
||
message: '2222'
|
||
}, {
|
||
userName: '11111',
|
||
message: '2222'
|
||
},
|
||
|
||
|
||
],
|
||
msgList: [{
|
||
userName: "系统通知",
|
||
content: "倡导绿色直播，严禁发布涉黄涉毒涉赌，严禁发布涉政、违法及低俗违规内容。健康直播，文明互动",
|
||
cmd: "say",
|
||
msg_type: "system"
|
||
}, ],
|
||
view_id: '',
|
||
liwu: Json.liwu,
|
||
liwu2: Json.liwu2,
|
||
liwu3: Json.liwu3,
|
||
type: 'bottom',
|
||
popup: 3, //1礼物操作 2其他操作 3.商品
|
||
user: '',
|
||
giftobj: [], //礼物
|
||
join_arr: [],
|
||
userName: '',
|
||
roomDetail: '',
|
||
userinfo: {},
|
||
|
||
}
|
||
/*定义IM消息类型
|
||
1：进群通知
|
||
2：发送自定义消息
|
||
3：收到礼物
|
||
*/
|
||
},
|
||
|
||
mounted() {
|
||
this.userinfo = this.$store.state.app.userInfo
|
||
this.get_live_room(); //调用直播间信息
|
||
},
|
||
|
||
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: {
|
||
//加入直播间
|
||
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:this.userinfo.uid,
|
||
client_id: client_id
|
||
|
||
}
|
||
bindUser(data).then((res) => {
|
||
if (res.code == 1) {
|
||
console.log('绑定成功')
|
||
this.joinChatRoom()
|
||
}
|
||
console.log(res)
|
||
})
|
||
},
|
||
|
||
// 进入这个页面的时候创建websocket连接【整个页面随时使用】
|
||
connectSocketInit() {
|
||
// console.log(VUE_APP_WS_URL)
|
||
// 创建一个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) {
|
||
uni.showModal({
|
||
|
||
title: '提示',
|
||
content:'直播间已关闭',
|
||
confirmColor: '#ee6666', //确定字体颜色
|
||
showCancel: false, //没有取消按钮的弹框
|
||
buttonText: '确定',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/room/room_list'
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
})
|
||
|
||
}
|
||
}
|
||
|
||
|
||
});
|
||
// 这里仅是事件监听【如果socket关闭了会执行】
|
||
this.socketTask.onClose(() => {
|
||
console.log("已经被关闭了")
|
||
})
|
||
},
|
||
|
||
sendGift() {
|
||
// 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",
|
||
const gift = {
|
||
userName: "11111111",
|
||
gift_ico: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
|
||
userAvatar: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
|
||
top: Math.random() * 200, // 随机生成礼物的位置
|
||
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', '')
|
||
},
|
||
onRoomFunc: function(e) {
|
||
const t = this;
|
||
var self = this;
|
||
var args = e.detail;
|
||
switch (args.tag) {
|
||
case 'recvTextMsg': {
|
||
console.log('收到用户发送消息:', e.detail.detail);
|
||
if (e.detail.detail.nature == 1) {
|
||
var index = t.users.findIndex(i => i.userid == e.detail.detail.userid);
|
||
if (index == -1) {
|
||
t.users.push(e.detail.detail);
|
||
}
|
||
var str = e.detail.detail;
|
||
str.tapTime = new Date();
|
||
str.message = e.detail.detail.userName + " " + " 进入房间";
|
||
var animation = uni.createAnimation({
|
||
duration: 200,
|
||
timingFunction: 'linear'
|
||
});
|
||
animation.left(20).step({
|
||
duration: 200
|
||
});
|
||
str.animationData = animation;
|
||
t.join_arr.push(str);
|
||
console.log('t.join_arr', t.join_arr)
|
||
var animation_del = uni.createAnimation({
|
||
duration: 200,
|
||
timingFunction: 'linear'
|
||
});
|
||
animation_del.left(-300).step({
|
||
duration: 200
|
||
});
|
||
setTimeout(function() {
|
||
for (var i = 0; i < t.join_arr.length; i++) {
|
||
if (new Date() - t.join_arr[i].tapTime > 3000) {
|
||
t.join_arr[i].animationData = animation_del;
|
||
// if (new Date() - t.join_arr[i].tapTime > 5000){
|
||
// t.join_arr.splice(i,1);//释放内存
|
||
// }
|
||
}
|
||
}
|
||
console.log('t.join_arr', t.join_arr)
|
||
console.log('t.users', t.users)
|
||
}, 3000)
|
||
} else if (e.detail.detail.nature == 2) {
|
||
t.message_arr.push(e.detail.detail);
|
||
} else if (e.detail.detail.nature == 3) {
|
||
var message = e.detail.detail;
|
||
var nowTime = new Date();
|
||
var animation = uni.createAnimation({
|
||
duration: 200,
|
||
timingFunction: 'linear'
|
||
});
|
||
animation.left(20).step({
|
||
duration: 200
|
||
});
|
||
message.animationData = animation;
|
||
message.tapTime = nowTime; //加入计时器
|
||
t.giftobj.push(message);
|
||
console.log('t.giftobj', t.giftobj)
|
||
var animation_del = uni.createAnimation({
|
||
duration: 200,
|
||
timingFunction: 'linear'
|
||
});
|
||
animation_del.left(-300).step({
|
||
duration: 200
|
||
});
|
||
setTimeout(function() {
|
||
for (var i = 0; i < t.giftobj.length; i++) {
|
||
if (new Date() - t.giftobj[i].tapTime > 3000) {
|
||
t.giftobj[i].animationData = animation_del;
|
||
// if (new Date() - t.giftobj[i].tapTime > 5000){
|
||
// t.giftobj.splice(i,1);//释放内存
|
||
// }
|
||
}
|
||
}
|
||
console.log('t.giftobj', t.giftobj)
|
||
}, 3000)
|
||
message.message = message.userName + '送了' + message.number + '个' + message.gift_name;
|
||
t.message_arr.push(message);
|
||
} else if (e.detail.detail.nature == 4) {
|
||
e.detail.detail.message = e.detail.detail.userName + '关注了主播';
|
||
t.message_arr.push(e.detail.detail);
|
||
} else {
|
||
return;
|
||
}
|
||
console.log('t.message_arr', t.message_arr)
|
||
t.view_id = 'demo' + t.message_arr.length;
|
||
break;
|
||
}
|
||
default: {
|
||
console.log('onRoomEvent default: ', e)
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
//关闭直播间
|
||
outroom: function() {
|
||
if (this.roomDetail.app_user_id ==this.userinfo.uid) {
|
||
// console.log(this.roomDetail)
|
||
stopPushLive({
|
||
app_name: 'shop',
|
||
stream_name: this.roomDetail.stream_name
|
||
}).then((res) => {
|
||
|
||
if (res.code == 1) {
|
||
console.log('关闭直播间')
|
||
uni.redirectTo({
|
||
url: '/pages/room/room_list'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
uni.redirectTo({
|
||
url: '/pages/room/room_list'
|
||
})
|
||
}
|
||
},
|
||
|
||
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
|
||
}
|
||
|
||
}
|
||
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)
|
||
},
|
||
send_liwu: function() {
|
||
const t = this;
|
||
t.popup = 1;
|
||
this.type = 'bottom'
|
||
t.togglePopup('bottom', 'share');
|
||
},
|
||
send_shop: function() {
|
||
const t = this;
|
||
t.popup = 3;
|
||
this.type = 'bottom'
|
||
t.togglePopup('bottom', 'share');
|
||
},
|
||
send_lick: function() {
|
||
this.sendGift()
|
||
// const t = this;
|
||
// var user = uni.getStorageSync('user');
|
||
// var userid = uni.getStorageSync('userid');
|
||
// var send_data = {
|
||
// userid: userid,
|
||
// rid: t.rid,
|
||
// typ: 2,
|
||
// nature: 3,
|
||
// nickname: user.nickname,
|
||
// avatarurl: user.avatarurl,
|
||
// number: 1
|
||
// }
|
||
// var obj = Json.liwu;
|
||
// var index = obj.findIndex(i => i.id == 1);
|
||
// var liwu = obj[index];
|
||
// send_data.gid = liwu.id; //追加图片地址
|
||
// send_data.price = liwu.price;
|
||
// send_data.gift_name = liwu.name;
|
||
// send_data.gift_ico = liwu.ico;
|
||
// uni.showModal({
|
||
// title: '提示',
|
||
// content: '确定发送1个小可爱？',
|
||
// success: function(res) {
|
||
// if (res.confirm) {
|
||
// console.log('用户点击确定');
|
||
// if (user.rice >= liwu.price) {
|
||
// uni.request({ //返回系统数据
|
||
// url: t.func.api.user_send_room_liwu_pay,
|
||
// data: {
|
||
// send_data: JSON.stringify(send_data)
|
||
// },
|
||
// method: "POST",
|
||
// header: {
|
||
// 'content-type': 'application/x-www-form-urlencoded'
|
||
// },
|
||
// success: (res) => {
|
||
// console.log('res', res)
|
||
// if (res.data.data.msg == 1) {
|
||
// uni.setStorageSync('user', res.data.data.user);
|
||
// t.user = res.data.data.user;
|
||
// t.cancel('share');
|
||
// send_data.message = '发送礼物';
|
||
// send_data.msg = '礼物';
|
||
// liveroom.sendRoomTextMsg({
|
||
// data: send_data,
|
||
// success: () => {
|
||
// console.log('发送礼物成功')
|
||
// }
|
||
// });
|
||
// }
|
||
// }
|
||
// })
|
||
// } else {
|
||
// console.log('约不足')
|
||
// }
|
||
// } else if (res.cancel) {
|
||
// console.log('用户点击取消');
|
||
// }
|
||
// }
|
||
// });
|
||
},
|
||
|
||
send_liwu_obj: function(e, d) {
|
||
const t = this;
|
||
var user = uni.getStorageSync('user');
|
||
var userid = uni.getStorageSync('userid');
|
||
var send_data = {
|
||
userid: userid,
|
||
rid: t.rid,
|
||
typ: 2,
|
||
nature: 3,
|
||
nickname: user.nickname,
|
||
avatarurl: user.avatarurl,
|
||
number: 1
|
||
}
|
||
if (e == 1) {
|
||
var obj = Json.liwu;
|
||
} else if (e == 2) {
|
||
var obj = Json.liwu2;
|
||
} else {
|
||
var obj = Json.liwu3;
|
||
}
|
||
var index = obj.findIndex(i => i.id == d);
|
||
var liwu = obj[index];
|
||
send_data.gid = liwu.id; //追加图片地址
|
||
send_data.price = liwu.price;
|
||
send_data.gift_name = liwu.name;
|
||
send_data.gift_ico = liwu.ico;
|
||
console.log(send_data)
|
||
// console.log(e)
|
||
// console.log(d)
|
||
// console.log(liwu)
|
||
uni.showModal({
|
||
title: '支付提示',
|
||
content: '本次消费你需要支付' + liwu.price + '陌陌币确认支付吗？',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
if (user.rice >= liwu.price) {
|
||
uni.request({ //返回系统数据
|
||
url: t.func.api.user_send_room_liwu_pay,
|
||
data: {
|
||
send_data: JSON.stringify(send_data)
|
||
},
|
||
method: "POST",
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded'
|
||
},
|
||
success: (res) => {
|
||
console.log(res)
|
||
if (res.data.data.msg == 1) {
|
||
uni.setStorageSync('user', res.data.data.user);
|
||
t.user = res.data.data.user;
|
||
t.cancel('share');
|
||
send_data.message = '发送礼物';
|
||
send_data.msg = '礼物';
|
||
liveroom.sendRoomTextMsg({
|
||
data: send_data,
|
||
success: () => {
|
||
console.log('发送礼物成功')
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})
|
||
console.log(send_data)
|
||
} else {
|
||
console.log('约不足')
|
||
}
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
|
||
},
|
||
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:this.userinfo.uid,
|
||
message: this.inputValue
|
||
}
|
||
// console.log(data,'222222')
|
||
|
||
sendGroupMessage(data).then(res => {
|
||
// console.log('发送的消息' + JSON.stringify(res))
|
||
this.inputValue = ''
|
||
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">
|
||
page {
|
||
position: relative;
|
||
|
||
|
||
}
|
||
|
||
.dobox {
|
||
position: absolute;
|
||
|
||
bottom: 0rpx;
|
||
width: 750rpx;
|
||
background-color: #F8F8F8;
|
||
}
|
||
|
||
.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-box-body {
|
||
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 {
|
||
padding: 10upx;
|
||
width: 70upx;
|
||
height: 70upx;
|
||
border-radius: 70upx;
|
||
background-color: rgba(0, 0, 0, .1);
|
||
line-height: 70upx;
|
||
text-align: center;
|
||
}
|
||
|
||
.ico-box-img {
|
||
width: 40upx;
|
||
height: 40upx;
|
||
margin-top: 5rpx;
|
||
margin-left: 5rpx;
|
||
|
||
}
|
||
|
||
.ico {
|
||
|
||
font-size: 48upx;
|
||
}
|
||
|
||
.input-tpl {
|
||
height: 70upx;
|
||
width: 300upx;
|
||
line-height: 70upx;
|
||
text-align: left;
|
||
background-color: rgba(0, 0, 0, .1);
|
||
border-radius: 70upx;
|
||
}
|
||
|
||
.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: absolute;
|
||
width: 40rpx;
|
||
right: 20rpx;
|
||
top: 230rpx;
|
||
z-index: 99999;
|
||
}
|
||
|
||
.left-img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.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-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 {}
|
||
|
||
.sp-txtb {
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
width: 500rpx;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
|
||
.txtba {
|
||
color: red;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.txtbb {
|
||
width: 120rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
background-color: red;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.uni-share-content {
|
||
/* #ifndef APP-NVUE */
|
||
/* display: flex; */
|
||
/* #endif */
|
||
// width: 750rpx;
|
||
|
||
// display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
// justify-content: center;
|
||
padding: 15px 0;
|
||
padding-left: 30rpx;
|
||
|
||
/* 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;
|
||
font-size: 14px;
|
||
border-top-color: #5c1398;
|
||
border-top-width: 1px;
|
||
border-top-style: solid;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20upx 40upx;
|
||
}
|
||
|
||
/* 礼物 */
|
||
.lw-box {
|
||
width: 175rpx;
|
||
|
||
|
||
margin-bottom: 30upx;
|
||
}
|
||
|
||
.lw-ico {
|
||
|
||
width: 100upx;
|
||
height: 100upx;
|
||
// margin: 0 auto;
|
||
}
|
||
|
||
.lw-name {
|
||
font-size: 28upx;
|
||
text-align: center;
|
||
line-height: 32upx;
|
||
padding-top: 8upx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.lw-money {
|
||
font-size: 24upx;
|
||
color: #8a68c4;
|
||
text-align: center;
|
||
}
|
||
|
||
.send-boj {
|
||
// display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
padding: 20upx 30upx;
|
||
border-bottom: 2upx solid #5c1398;
|
||
}
|
||
|
||
.send-boj-close {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.send-boj-close-img {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.gift-alert {
|
||
width: 400upx;
|
||
position: fixed;
|
||
/* height: 70upx; */
|
||
// line-height: 70upx;
|
||
// background-color: rgba(0, 0, 0, .5);
|
||
// border-radius: 70upx;
|
||
|
||
// bottom: 400upx;
|
||
// left: -500upx;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
padding: 10upx;
|
||
z-index: 9999;
|
||
|
||
animation: slideRight 1s linear forwards;
|
||
}
|
||
|
||
.join-box {
|
||
position: fixed;
|
||
left: -500upx;
|
||
bottom: 350upx;
|
||
border-radius: 70upx;
|
||
display: flex;
|
||
padding: 10upx 30upx;
|
||
z-index: 9999;
|
||
background-color: #ef7526;
|
||
}
|
||
|
||
.join-box-text {
|
||
color: #F9F9F9;
|
||
line-height: 40upx;
|
||
font-size: 32upx;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.gift-ico {
|
||
width: 100upx;
|
||
height: 100upx;
|
||
position: absolute;
|
||
right: 20upx;
|
||
top: -20upx;
|
||
}
|
||
|
||
.send-boj-user-header {
|
||
width: 60upx;
|
||
height: 60upx;
|
||
border-radius: 100%;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
border: 4upx solid #00c9ff;
|
||
}
|
||
|
||
.send-boj-user-header-img {
|
||
width: 100%;
|
||
height: 200upx;
|
||
}
|
||
|
||
.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: 80upx;
|
||
padding: 0 2upx;
|
||
display: flex;
|
||
}
|
||
|
||
.right_top_scroll {
|
||
overflow: hidden;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
width: 200rpx;
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
|
||
|
||
.top-scroll-users-header {
|
||
width: 60upx;
|
||
height: 60upx;
|
||
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;
|
||
}
|
||
|
||
.users-count-img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-top: 20rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
</style> |