直播部分程式碼（僅供參考，需要優化很多）
阿新 • • 發佈：2020-11-02
<template>
<!-- -->
<view class="box_conent" >
<view style="background-color: #fff;" :style="{'height':statusBarHeight+'px'}" class=""></view>
<view class="content">
<view style="position: fixed;top: 300upx;z-index:99999999999999999999999999999" v-if="list2.length>0">
<Pengpai-FadeInOut :duration="2000" :wait="3000" :top="150" :left="10" :radius="30" :loop="false" :list="list2" @finish="finish" :concat="concat"></Pengpai-FadeInOut>
</view>
<!-- 禮物GIF圖片 -->
<!-- v-if="gifFlag" -->
<view style="position: fixed;z-index:9999999999;" class="">
<!-- <image v-if="gifFlag" :style="{height:windowHeight+'px',width:windowWidth+'px'}" :src="giftgifurl" mode=""></image> -->
</view>
<!-- <view v-for="(item8,index8) in groupMsgList" :key="index8" class="">
<image :style="{height:windowHeight+'px'}" ref="gifimgimg" v-if="groupMsgList.length == (index8 + 1) && item8.payload.description == 'giftgif' && gifFlag" class="maskImg" :src="JSON.parse(item8.payload.data).num" mode=""></image>
</view> -->
<view class=""></view>
<!-- <view :style="{transform:(bptxFlag==true) ? 'translateX(-300upx)' : '' }" :class="[(bptxFlag == true) ? 'bptxA' : '']" class="bptx">
<text class="bptxtxt">{{bptxTxt}}</text>
</view> -->
<!-- 輪播 -->
<swiper class="swiper" :style="{width:windowWidth+'px',height: windowHeight-statusBarHeight+'px' }">
<swiper-item class="postabs" :style="{width:windowWidth+'px',height: windowHeight-statusBarHeight+'px' }">
<!-- 推流 -->
<view class="live_push box_q" style="">
<!-- <live-pusher :style="{width:windowWidth+'px',height: windowHeight-statusBarHeight+'px' }" id='livePusher' ref="livePusher" class="livePusher box_q" url="http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8"
mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
></live-pusher> -->
<!-- <video style="transform: scaleY(1.1) scaleX(1.1);" id="myVideo" ref="myVideo"
:style="{width:windowWidth+'px',height: windowHeight-statusBarHeight+'px' }"
:src="flv_url"
:show-center-play-btn="false"
:page-gesture="false"
:enable-progress-gesture="false"
:enable-play-gesture="true"
:show-play-btn="false"
:loop="true"
:controls="false"
:autoplay="true">
</video>
-->
<TX-AVPlayer
style="transform: scaleY(1.1) scaleX(1.1);position: relative;z-index:1"
ref="maxTxPlayer"
class="maxTxPlayer"
:url="flv_url"
playRotation=1
playModel=1
@statechange="onPlay"
></TX-AVPlayer>
<!-- 中間播放按鈕 -->
<view :style="{width:windowWidth+'px',height: windowHeight+'px' }" @click.stop="handleClicked($event,index,item)"
class="video_content_content">
</view>
</view>
<!-- 按鈕 -->
<view class="live_bnt flex_q box_q" :style="{width:windowWidth+'px',height: windowHeight+'px' }">
<view class="box_q">
<view class="poste page">
<view class="poste_vox flex_q">
<view class="back_zb" @click="back_zb">
<image src="/static/stactfile/back_white.png" class="back_zb_img"></image>
</view>
<view style="transform: translateX(-30upx);" class="live_header flex_q">
<!-- <image class="live_header_img" style="" :src="getRoomInfo.live_member_info.member_avatar"></image> -->
<image @click="toPerson(getRoomInfo.live_room_info.member_id)" class="live_header_img" style="" :src="getRoomInfo.live_member_info.member_avatar"></image>
<view class="">
<view class="live_header_info">
<text class="user_name">{{getRoomInfo.live_member_info.member_truename}}</text>
<text class="tip">{{getRoomInfo.live_room_info.visits}}人觀看</text>
</view>
</view>
<text @click="followClick(getRoomInfo.member_info.is_follow,getRoomInfo.live_room_info.member_id)" class="liveHed"
v-if="getRoomInfo.member_info.is_follow==1">已關注</text>
<text @click="followClick(getRoomInfo.member_info.is_follow,getRoomInfo.live_room_info.member_id)" class="liveH"
v-else>關注</text>
</view>
<view style="flex-direction: row;flex: 1;">
<view style="flex: 1;position: relative;justify-content: flex-end;">
<view @click="touservideo(a.member_id)" class="other_zb_view" v-for="(a,v) in other_list" :key="v" v-if="v<3" :style="{right:v*40+'px'}">
<image v-if="v<3" class="live_header_img_zb" style="" :src="a.member_avatar"></image>
</view>
</view>
<view v-if="other_list.length > 0" class="">
<image style="width: 80upx;height: 80upx;" src="/static/share/icon_more.png" mode=""></image>
</view>
</view>
</view>
<view class="live_nave flex_q">
<image class="live_nave_img" style="width: 30upx; height:26upx;" src="../../static/stactfile/live_tip.png"
mode=""></image>
<text class="live_nave_text">{{getRoomInfo.live_room_info.content}}</text>
</view>
</view>
<!-- 左邊聊天訊息 -->
<view class="left_msg">
<view class="giving_gifts flex_q" :style='{transform:`translateX(${translateX}px)`}'>
<view class="giving_gifts_content flex_q">
<image class="giving_gifts_content_img" :src="user_data.avator" mode=""></image>
<text lines="2" class="giving_gifts_name flex_q manyLine">{{user_data.nickname}}送了{{giftdata.extension}}</text>
</view>
<view class="giving_gifts_nuber">
<text class="giving_gifts_nuber_text">x{{giftdata.description.split(',')[0]}}
</text>
</view>
</view>
<view v-if="moumouFlag" class="who_banck_live">
<view class="who_banck_live_text">
<text class="live_text flex_q">{{user_data.nickname || user_data.user_name || user_data.member_mobile || ""}}進入了直播間！</text>
</view>
</view>
<view class="group_chat">
<scroll-view scroll-anchoring="true" scroll-y="true" :show-scrollbar="false" :scroll-into-view='toView' class="group_chat_scroll">
<view :id="'msg_'+index999" class="group_chat_item" v-for="(item,index999) in groupMsgList" :key="index999">
<template v-if="JSON.parse(item.payload.data).type == 'message'" style="padding-top: 0;padding-bottom: 0;">
<rich-text class="node" :nodes="item.payload.data | node"></rich-text>
</template>
<template v-if="JSON.parse(item.payload.data).type == 'tip' && JSON.parse(item.payload.data).username == member_name" >
<rich-text class="node" :nodes="item.payload.data | node9"></rich-text>
</template>
<template v-if="JSON.parse(item.payload.data).type == 'getinroom'" >
<rich-text class="node" :nodes="item.payload.data | node3"></rich-text>
</template>
<template v-if="JSON.parse(item.payload.data).type == 'getoutroom'" >
<text class="group_chat_text">{{JSON.parse(item.payload.data).username}}離開了直播間</text>
</template>
<template v-if="JSON.parse(item.payload.data).type == 'like'" >
<rich-text class="node" :nodes="item.payload.data | node5"></rich-text>
</template>
<template v-if="JSON.parse(item.payload.data).type == 'gift'" style="padding-top: 0;padding-bottom: 0;" >
<rich-text class="node" :nodes="item.payload.data | node2"></rich-text>
</template>
<template v-if="JSON.parse(item.payload.data).type == 'car'" >
<rich-text class="node" :nodes="item.payload.data | node8"></rich-text>
</template>
<template v-if="JSON.parse(item.payload.data).type == 'leaveroom'" >
<text class="group_chat_text">{{JSON.parse(item.payload.data).username}}離開了直播間</text>
</template>
<template v-if="JSON.parse(item.payload.data).type == 'follow'" >
<rich-text class="node" :nodes="item.payload.data | node10"></rich-text>
</template>
<template v-if="JSON.parse(item.payload.data).type == 'mute'" >
<rich-text class="node" :nodes="item.payload.data | node6"></rich-text>
</template>
<template v-if="JSON.parse(item.payload.data).type == 'kick'" >
<rich-text class="node" :nodes="item.payload.data | node7"></rich-text>
</template>
<template v-if="item.payload.operatorID == 'administrator'" class="">
<rich-text class="node" :nodes="item.payload.userDefinedField | node4"></rich-text>
</template>
</view>
</scroll-view>
</view>
</view>
<!-- 底部選單修改 -->
<view class="live_bootom2">
<view class="live_bootom_content flex_q">
<view style="padding-left: 20upx;transform: translateY(10upx);" class="">
<input confirm-type="send" @confirm="messageDIV('message',commentVideo_text,0)" class="input2" :disabled="inputFlag":placeholder="inputplace" placeholder-style="font-size:16upx;color:#fff;" v-model="commentVideo_text" type="text" value="commentVideo_text" />
</view>
<view class="live_bootom_items" @click="GiftListShowFun">
<image class="live_bootom_img" style="width:90upx;height: 90upx;" src="../../static/stactfile/live_icon2.png"
mode=""></image>
<text style="padding:0px;left: 50upx;height: 20upx;width: 20upx;top: 10upx;"class="items_tip"></text>
</view>
<view class="live_bootom_items" @click="liveGoodsListFun()">
<image class="live_bootom_img" src="../../static/stactfile/live_cart.png"></image>
<text class="items_tip">{{live_goods_num}}</text>
</view>
<view @click="openHistory" style="margin-left: 10upx;" class="live_bootom_items barg">
<image class="live_bootom_img" src="../../static/stactfile/live_mag.png"
mode=""></image>
</view>
<view style="margin-left: 10upx;" class="live_bootom_items barg">
<template>
<image @click="is_like($event,getRoomInfo.member_info.is_like)" v-if="getRoomInfo.member_info.is_like=='0'"
class="live_bootom_img " src="../../static/stactfile/live_goods.png" mode=""></image>
<image @click="is_like($event,getRoomInfo.member_info.is_like)" v-if="getRoomInfo.member_info.is_like=='1'"
class="live_bootom_img " src="../../static/stactfile/goodlive.png" mode=""></image>
</template>
<text class="items_tip" v-if="getRoomInfo.live_room_info.likes>0">{{getRoomInfo.live_room_info.likes}}</text>
</view>
<view style="margin-left: 10upx;" @click="onShare()" class="live_bootom_items barg">
<image class="live_bootom_img" src="../../static/stactfile/live_srah.png" mode=""></image>
</view>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
<!-- 送禮物2-->
<uni-popup ref="popupgiftsone" type="bottom" @change="is_close">
<view style="background-color: rgba(0,0,0,0.3);" class="gifts_boxs">
<view style="background-color: rgba(0,0,0,0.3);padding-top: 20upx;" class="flex_q scroll_flex_qs">
<view style="background-color: rgba(0,0,0,0.3);" @click="giftsViewFun(item.id,index)" class="gifts_view_item_scrolls" :class="[active == index && item.gift_type == 1 ? 'gifts_view_item_scroll_active':'',index == select_gift?'gift_fa':'']"
v-for="(item,index) in gift_list" :key="index">
<view style="flex: 1;justify-content: center;align-items: center;" :class="{gift_active: index == select_gift}">
<image class="gifts_view_item_scroll_img" :src="item.gift_image_gif" mode="widthFix"></image>
<text class="gifts_name" style="color:#ccc;">{{item.gift_name}}</text>
<text class="gifts_name" style="color:#ccc;">{{item.need_money}}餘額</text>
<view class="all_view_num" v-if="index == select_gift">
<view class="num_select_view">
<view class="jia_jian_view" @click.stop="giftFunjia(false)">
<image src="/static/images/jian_icon.png" class="jia_jian_view"></image>
</view>
<input class="gifts_view_change_input" type="number" v-model="gift_num" disabled>
<view class="jia_jian_view" @click.stop="giftFunjia(true)">
<image src="/static/images/jia_icon.png" class="jia_jian_view"></image>
</view>
</view>
<view class="gifts_view_bnt_s" @click.stop="giftFun(item.gift_image_gif,index,item.gift_svga_url,item.gift_svga_length)">
<text class="gifts_view_bnt_text">贈送</text>
</view>
</view>
</view>
</view>
</view>
<view style="background-color: rgba(0,0,0,0.3);" class="gifts_view_chang_boxs flex_q">
<view style="background-color: rgba(0,0,0,0.3);padding-left: 30upx;" class="gifts_icon_img" @click="go_zbcart('/pagesC/pages/recharge/recharge')">
<text style="color:#fff;" class="gifts_icon_img_tip">充值</text>
</view>
</view>
</view>
</uni-popup>
<!-- 送禮物1-->
<uni-popup ref="popupgiftwo" type="bottom">
<view class="gifts_box">
<view class="gifts_view">
<view class="gifts_view_item">
<view class="scroll_flex_q flex_q">
<view @click="giftsViewFun(item.id,item.gift_type,index)" class="gifts_view_item_scroll" :class="{gifts_view_item_scroll_active:active==index&&item.gift_type==2}"
v-for="(item,index) in goods_gift_list">
<image class="gifts_view_item_scroll_img" :src="item.thumb_url" mode="widthFix"></image>
<text class="gifts_name">{{item.title}}</text>
</view>
</view>
</view>
<view v-if="showBottomBnt" class="gifts_view_chang_box flex_q">
<view class="gifts_icon_img">
<text class="gifts_icon_img_tip">充值2</text>
</view>
<view class="flex_q">
<view class="gifts_view_chang flex_q">
<input class="gifts_view_chang_input" type="text" v-model="gift_num" placeholder="" />
<text class="danwei">個</text>
</view>
<view class="gifts_view_bnt" @click="giftFun()">
<text class="gifts_view_bnt_text">贈送</text>
</view>
</view>
</view>
</view>
</view>
</uni-popup>
<!-- 購物車 -->
<uni-popup ref="popupcartlist" type="bottom">
<view style="background-color: #fff;" class="cart_list">
<view class="gifts_box">
<view class="title_tip flex_q">
<text class="allgoods_tip">全部寶貝</text>
<text class="ocler_bnt" @click="liveGoodsListHidden">關閉</text>
</view>
<view class="cart_list_view">
<scroll-view scroll-y="true" style="height: 600upx;">
<view class="scroll_view_cart flex_q" v-for="(item,index) in livegoodslist" @click="showGuiGe(index)">
<view class="scroll_view_cart_left">
<image :src="item.goods_image_url" class="scroll_view_cart_left_img" mode=""></image>
<!-- <text class="tip_img_unber">{{item.total}}</text> -->
</view>
<view class="scroll_view_cart_right">
<text class="scroll_view_cart_right_text">{{item.goods_name}}</text>
<view class="scroll_view_cart_bottom flex_q">
<text class="price_text">￥{{item.live_price}}</text>
<view class="scroll_view_cart_icon" @click="showGuiGe(index)">
<image v-if="!item.addstart" class="shop_cart" src="/static/images/cart_icon.png" mode=""></image>
<!-- <image v-else class="shop_cart" src="/static/shop-car.png" mode=""></image> -->
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="cart_icon_popup" @click="go_zbcart('/pages/car/shopCar_zb')">
<image src="/static/images/cart_icon.png" class="cart_icon_popup_img" mode="widthFix"></image>
</view>
</view>
</uni-popup>
<!-- 商品下單詳情 -->
<uni-popup ref="popupgoods" type="bottom">
<view style="background-color: #fff;" class="goods_deldt gifts_box_mask">
<view class="gifts_box" @click.stop="mask()">
<view class="onclien flex_q">
<image mode="widthFix" @click="popupGoodsHidden" class="onclien_img" src="/static/images/x.png"></image>
</view>
<view class="goods_info flex_q">
<view class="goods_info_left">
<image class="goods_info_left_img" :src="goodInfo.goods_image_url" mode="aspectFill"></image>
</view>
<view class="goods_info_right">
<text class="goods_info_left_text">{{goodInfo.goods_name}}</text>
<text class="goods_info_left_price">￥{{goodInfo.live_price}}</text>
</view>
</view>
<view class="guige" v-if="spec_parameter">
<view class="guige_title flex_q">
<text class="guige_title_tip">規格</text>
</view>
<view class="guige_items_box flex_q" style="flex-direction: column;">
<view style="flex-direction: row;flex: 1;margin-bottom: 20rpx;align-items: center;" v-for="(it,idx) in spec_parameter">
<text style="width: 80rpx;display: inline-block;margin-right: 20rpx;">{{it.title}}</text>
<view style="flex: 1;flex-wrap: wrap;flex-direction: row;">
<text class="guige_items" style="margin-bottom: 20rpx;" :class="{guige_items_active:it.checked == item}"
@click="guigeItems(idx,ix)" v-for="(item,ix) in it.spec">{{item}}</text>
</view>
</view>
</view>
</view>
<view class="shop_numbers">
<view class="guige_title flex_q">
<text class="guige_title_tip">數量</text>
</view>
<view class="addguige" style="flex-direction: row;">
<view class="jian_box">
<image class="jian" @click="popGoods" src="/static/images/jian_iocn.png" mode=""></image>
</view>
<view class="jian_box">
<input class="jian_box_inputs" v-model="goodsnuber" :disabled="true" type="text" />
</view>
<view class="jian_box">
<image @click="addGoods" class="jian" src="/static/images/add_icon.png" mode=""></image>
</view>
</view>
</view>
<view style="align-items: center;">
<text class="subsmnrt" @click="addCrat()">加入購物車</text>
</view>
</view>
</view>
</uni-popup>
<uni-popup ref="historyMsg" type="bottom">
<view style="padding-left: 10upx;padding-top: 20upx;padding-right: 10upx;" class="historyMsg">
<view style="padding-left: 10upx;padding-right: 10upx;width: 730upx;display: flex;flex-direction: row;justify-content: space-between;margin-bottom: 20upx;" class="">
<view class="">
<text style="font-size: 30upx;font-weight: 600;">全部評論{{historyMsg.length}}</text>
</view>
<view @click="closeHistory" class="">
<text style="font-size: 30upx;font-weight: 600;">關閉</text>
</view>
</view>
<view v-for="(item99,index99) in historyMsg" :key="index99" class="">
<view style="display: flex;flex-direction: row;padding-left: 10upx;padding-right: 10upx;margin-top: 20upx;" class="">
<view style="width: 80upx;height: 80upx;border-radius: 50%;" class="">
<image style="width: 80upx;height: 80upx;border-radius: 50%;" :src="item99.avator" mode=""></image>
</view>
<view class="">
<view style="display: flex;flex-direction: row;padding-left: 20upx;justify-content: space-between;width: 620upx;" class="">
<view class="">
<text style="font-size: 26upx;">{{item99.username}}</text>
</view>
<view class="">
<text style="font-size: 26upx;">{{item99.timestamp | formatDate}}</text>
</view>
</view>
<view style="padding-left: 20upx;" class="">
<text style="font-size: 26upx;">{{item99.num}}</text>
</view>
</view>
</view>
</view>
</view>
</uni-popup>
<view class="like-button">
<like-button ref="likeButton">
</like-button>
</view>
</view>
</template>
<script>
// svga外掛
// const svgaModel = uni.requireNativePlugin('tx-svgamodel')
// import TIMLiveSell from 'im-live-sells';
import TIM from 'tim-wx-sdk';
let tls = null;
let options = {
SDKAppID: "自己填寫申請的id"
}
let tim = TIM.create(options)
tim.setLogLevel(1)
import {
formatDate
} from '@/util/common.js';
import appShare, {
closeShare
} from "@/js_sdk/zhouWei-APPshare/plugins/share/index.js";
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import likeButton from '@/components/like-button/like-button.vue';
import PengpaiFadeInOut from '@/components/Pengpai-FadeInOut/Pengpai-FadeInOut.vue';
import liveutil from '@/common/api_sign/liverequest.js';
import util from '@/common/api_sign/request.js';
let giftData = [];
let giftimer = null;
export default {
components: {
uniPopup,PengpaiFadeInOut,likeButton
},
data() {
return {
live_goods_num:"",
index: '',
BPlist:[],
time:5000,
timer:null,
inputplace:"說點什麼...",
inputFlag:false,
list2: [],
concat:[],
dianzanFlag:true,
giftIndex:0,
bptxTxt:"",
bptxFlag:false,//霸屏特效
sendtxt:"傳送",
historyMsg:[],
uheight:"",
gifFlag:false,
giftgifurl:"/static/images/living/paoche.gif",
nickname:"",
moumouFlag:true,
// 動畫偏移
translateX: -375,
showgift: false,
// 禮物資料
giftdata: {
name: '',
description: "",
extension: ""
},
list: [],
active: -3,
statusBarHeight: "0",
swiperList: "5",
windowWidth: "0",
windowHeight: "0",
// 控制類
pinlunShow: false,
GiftListshow: false,
showBottomBnt: false,
livegoodslistshow: false,
livegoodsdetie: false,
commentVideo_text:'',
commentVideo_text2:'',
commentVideo_text3:'',
isPlay: true,
bottomflex: 0,
// im資訊
timdata: {},
// 禮物資訊
goods_gift_list: [],
gift_list: [],
currency_gift_list: [],
gift_num: 1,
// 群聊iD
groupID: '@TGS#336WMYVGE',
room_number: "00000068",
room_id: '',
videoContext: '',
// 群會話
groupMsgList: [],
toView: '',
// 商品列表詳情
LiveListlnfo: {},
// 商品資訊
goodInfo: [],
goodsnuber: 1,
goodsindex: "",
goodsid: "",
optionid: "",
goodActive: [],
livegoodslist: [],
getRoomInfo: {
"live_member_info": {
"member_avatar": "https://mghzb.wbd99.com/data/upload/shop/common/06319009701876674.png",
"member_name": null,
"member_truename": null,
"member_level": "普通會員",
"follow_num": "0",
"fans_num": "0",
"get_gifts": "0",
"send_gifts": "0"
},
"live_room_info": {
"id": "4",
"member_id": "68",
"room_number": "00000068",
"title": "99999",
"content": "9999",
"cover": "blob:https://localhost:8080/4177f5b2-17bf-422c-ace6-3157ea42cfee",
"room_class": "0",
"room_class_info": null,
"visits": "410",
"live_goods_num": "",
"live_voucher_num": "0",
"likes": "3",
"im_group_id": "@TGS#32R3MLTGL",
"status_str": "直播中"
},
"member_info": {
"member_avatar": "",
"member_name": "18566775553",
"member_truename": "",
"is_follow": 0,
"is_like": 1
},
"recommend_list": []
},
flv_url: null,
user_data: {},
// 規格ID
spec_list_mobile: {},
// 規格引數
spec_parameter: false,
select_gift: null,
focusState:false,
timer:null,
other_list:[],
avator:"",
member_id:"",
member_level:"",
member_name:""
}
},
onLoad(e) {
// 霸屏返回的資料結構
// let str= '{"gift":"\u98de\u673a","gift_num":"33","room_id":"494","member_id":"24","member_name":"\u5434\u5c0f\u98de"}'
// let bbb=JSON.parse(str)
// console.log(bbb)
this.getLis();
setTimeout(()=>{
this.messageDIV("tip",0,0)()
},2500)
setTimeout(()=>{
this.messageDIV("getinroom",0,0)()
},3000)
// 某某進入了直播間
setTimeout(()=>{
this.moumouFlag = false
},5000)
// this.videoContext = uni.createVideoContext('myVideo')
if (e.room_number) {
this.groupID = e.room_number;
this.room_number = e.room_number;
this.room_id = e.room_id
}
this.getmember();
//獲取禮物
this.getGiftList()
this.getRoomInfoFun(this.room_number, this.groupID, this.room_id)
this.flv_url = uni.getStorageSync("flv");
liveutil.request({
url:'index.php?act=live&op=enterLiveRoom',
data:{
room_id:e.room_id
},
method:'get'
}).then(res=>{
console.log(res);
})
this.get_other_zb_data();
this.timer = setInterval(()=>{
this.get_other_zb_data();
},60000)
},
filters: {
// message
node (val) {
return [{
name: 'div',
attrs: {
style: 'color: #fff;word-break:break-all;padding-top: 0;padding-bottom: 0;height:30upx;line-height:30upx;'
},
children: [
{
name: 'span',
attrs: {style: 'color: rgba(255, 255, 255, 1);backgroundColor: rgba(255, 196, 104, 0.2);border-top-left-radius:40upx ;'},
children: [
{
type: 'text',
text: '' + JSON.parse(val).member_level + ''
}
]
},
{
name: 'span',
attrs: {style: 'color: rgba(255, 196, 104, 1);word-break:break-all;'},
children: [
{
type: 'text',
text: JSON.parse(val).username + ': '
}
]
},
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: JSON.parse(val).num
}
]
}
]
}]
},
// 某某給主播送了幾個啥
node2 (val) {
return [{
name: 'div',
attrs: {
style: 'color: #fff;word-break:break-all;padding-top: 0;padding-bottom: 0;height:30upx;line-height:30upx;'
},
children: [
{
name: 'span',
attrs: {style: 'color: rgba(255, 255, 255, 1);word-break:break-all;backgroundColor: rgba(255, 196, 104, 0.2);border-radius:40px;paddingLeft:4px;'},
children: [
{
type: 'text',
text: JSON.parse(val).member_level
}
]
},
{
name: 'span',
attrs: {style: 'color: rgba(255, 196, 104, 1);word-break:break-all;'},
children: [
{
type: 'text',
text: JSON.parse(val).username
}
]
},
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: "給主播送了"+ JSON.parse(val).num + '個' + JSON.parse(val).giftname
}
]
}
]
}]
},
// getinroom
node3 (val) {
// <text class="group_chat_text">歡迎{{JSON.parse(item.payload.data).username}}進入直播間</text>
return [
{
name: 'div',
attrs: {
style: 'color: #fff;word-break:break-all;padding-top: 0;padding-bottom: 0;height:30upx;line-height:30upx;'
},
children: [
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: "歡迎"
}
]
},
{
name: 'span',
attrs: {style: 'color: rgba(255, 255, 255, 1);word-break:break-all;backgroundColor: rgba(255, 196, 104, 0.2);border-radius:40px;paddingLeft:4px;'},
children: [
{
type: 'text',
text: JSON.parse(val).member_level
}
]
},
{
name: 'span',
attrs: {style: 'color: rgba(255, 196, 104, 1);word-break:break-all;'},
children: [
{
type: 'text',
text: JSON.parse(val).username
}
]
},
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: "進入直播間"
}
]
}
]
}]
},
// administrator
node4 (val) {
// <text class="group_chat_text">歡迎{{JSON.parse(item.payload.data).username}}進入直播間</text>
return [{
name: 'div',
attrs: {
style: 'color: #fff;word-break:break-all;padding-top: 0;padding-bottom: 0;height:30upx;line-height:30upx;'
},
children: [
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: JSON.parse(val).username
}
]
},
{
name: 'span',
attrs: {style: 'color: rgba(255, 255, 255, 1);word-break:break-all;backgroundColor: rgba(255, 196, 104, 0.2);border-radius:40px;paddingLeft:4px;'},
children: [
{
type: 'text',
text: JSON.parse(val).member_level
}
]
},
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: "給"+JSON.parse(val).room_id+"房主播送了"+JSON.parse(val).gift_num+'個'+JSON.parse(val).gift
}
]
}
]
}]
},
// like 點贊
node5 (val) {
// <text class="group_chat_text">{{JSON.parse(item.payload.data).username}}給主播點讚了</text>
return [{
name: 'div',
attrs: {
style: 'color: #fff;word-break:break-all;padding-top: 0;padding-bottom: 0;height:30upx;line-height:30upx;'
},
children: [
{
name: 'span',
attrs: {style: 'color: rgba(255, 255, 255, 1);word-break:break-all;backgroundColor: rgba(255, 196, 104, 0.2);border-radius:40px;paddingLeft:4px;'},
children: [
{
type: 'text',
text: JSON.parse(val).member_level
}
]
},
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: JSON.parse(val).username
}
]
},
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: "給主播點讚了"
}
]
}
]
}]
},
// mute 禁言
node6 (val) {
// <text class="group_chat_text">{{JSON.parse(item.payload.data).username}}給主播點讚了</text>
return [{
name: 'div',
attrs: {
style: 'color: #fff;word-break:break-all;padding-top: 0;padding-bottom: 0;height:30upx;line-height:30upx;'
},
children: [
{
name: 'span',
attrs: {style: 'color: rgba(255, 255, 255, 1);word-break:break-all;backgroundColor: rgba(255, 196, 104, 0.2);border-radius:40px;paddingLeft:4px;'},
children: [
{
type: 'text',
text: JSON.parse(val).member_level
}
]
},
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: JSON.parse(val).username
}
]
},
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: "被禁言了"
}
]
}
]
}]
},
// kick被踢
node7 (val) {
// <text class="group_chat_text">{{JSON.parse(item.payload.data).username}}給主播點讚了</text>
return [{
name: 'div',
attrs: {
style: 'color: #fff;word-break:break-all;padding-top: 0;padding-bottom: 0;height:30upx;line-height:30upx;'
},
children: [
{
name: 'span',
attrs: {style: 'color: rgba(255, 255, 255, 1);word-break:break-all;backgroundColor: rgba(255, 196, 104, 0.2);border-radius:40px;paddingLeft:4px;'},
children: [
{
type: 'text',
text: JSON.parse(val).member_level
}
]
},
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: JSON.parse(val).username
}
]
},
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: "被踢出群聊了"
}
]
}
]
}]
},
// car 加入購物車
node8 (val) {
// <text class="group_chat_text">{{JSON.parse(item.payload.data).username}}將{{JSON.parse(item.payload.data).giftname}}加入了購物車</text>
return [{
name: 'div',
attrs: {
style: 'color: #fff;word-break:break-all;padding-top: 0;padding-bottom: 0;height:30upx;line-height:30upx;'
},
children: [
{
name: 'span',
attrs: {style: 'color: rgba(255, 255, 255, 1);word-break:break-all;backgroundColor: rgba(255, 196, 104, 0.2);border-radius:40px;paddingLeft:4px;'},
children: [
{
type: 'text',
text: JSON.parse(val).member_level
}
]
},
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: JSON.parse(val).username
}
]
},
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: "將" + JSON.parse(val).giftname + "加入了購物車"
}
]
}
]
}]
},
// tip 進入直播間 禁止語
node9 (val) {
return [{
name: 'div',
attrs: {
style: 'color: #fff;word-break:break-all;padding-top: 0;padding-bottom: 0;height:30upx;line-height:30upx;'
},
children: [
{
name: 'span',
attrs: {style: 'color: rgba(255, 255, 255, 1);word-break:break-all;paddingLeft:4px;'},
children: [
{
type: 'text',
text: JSON.parse(val).tip
}
]
},
]
}]
},
// follow 加入購物車
node10 (val) {
return [{
name: 'div',
attrs: {
style: 'color: #fff;word-break:break-all;padding-top: 0;padding-bottom: 0;height:30upx;line-height:30upx;'
},
children: [
{
name: 'span',
attrs: {style: 'color: rgba(255, 255, 255, 1);word-break:break-all;backgroundColor: rgba(255, 196, 104, 0.2);border-radius:40px;paddingLeft:4px;'},
children: [
{
type: 'text',
text: JSON.parse(val).member_level
}
]
},
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: JSON.parse(val).username
}
]
},
{
name: 'span',
attrs: {style: 'color: #fff;word-break:break-all;line-height:30upx;'},
children: [
{
type: 'text',
text: "關注了主播"
}
]
}
]
}]
},
formatDate(time) {
time = time * 1000
let date = new Date(time)
return formatDate(date, 'yyyy-MM-dd hh:mm')
}
},
onReady() {
let that = this;
const subNVue = uni.getSubNVueById('drawer')
setTimeout(()=>{
subNVue.hide('fade-out', 1000)
this.list2 = [{
title: '歡迎'+ that.nickname + "進入直播間",
img: that.avator
}]
},2000);
uni.getSystemInfo({
success: function(res) {
that.statusBarHeight = res.statusBarHeight;
that.windowWidth = res.windowWidth;
that.windowHeight = res.windowHeight
console.log(that.statusBarHeight,that.windowWidth,that.windowHeight)
}
});
// 直播間商品
that.getGoddsList();
// IM監聽訊息函式
let onMessageReceived = function(event) {
console.log("IM監聽此時的訊息函式");
console.log(event.data);
if(event.data[0].payload.operatorID == 'administrator'){
// that.groupMsgList.push(event.data[0])
that.BPlist.push(event.data[0])
console.log(event.data[0])
}else{
that.groupMsgList = [...that.groupMsgList, ...event.data]
}
setTimeout(()=>{
that.pageTop();
},100)
console.log("IM監聽累計的訊息函式");
console.log(that.groupMsgList);
// 霸屏
if(event.data[0].payload.operatorID == 'administrator'){
let gift = JSON.parse(event.data[0].payload.userDefinedField).gift
let gift_num = JSON.parse(event.data[0].payload.userDefinedField).gift_num
let member_name = JSON.parse(event.data[0].payload.userDefinedField).member_name
let member_avatar = JSON.parse(event.data[0].payload.userDefinedField).member_avatar
that.bptxTxt = member_name + '送出了' + gift_num + "個" + gift
let obj={}
obj.img = member_avatar
obj.title = member_name + '送出了' + gift_num + "個" + gift
that.concat.push(obj)
// that.bptxFlag = true
// setTimeout(()=>{
// that.bptxFlag = false
// },2000)
}
// 直播結束
if(event.data[0].payload.description == "leaveroom"&& JSON.parse(event.data[0].payload.data).room_id == that.room_id){
// 直播結束跳轉結束頁面
uni.showToast({
title: "直播結束",
icon: 'none'
})
setTimeout(()=>{
uni.redirectTo({
url:"/pages/homePages/over?room_id="+that.room_id
})
},3000)
}
// 禁言
if(event.data[0].payload.description == "mute" && JSON.parse(event.data[0].payload.data).mute_member_id == that.member_id){
// 直播結束跳轉結束頁面
// "username":"AITE1602052858960544","timestamp":1602927285.0171609,"mute_member_id":"50","type":"mute","avator":"http:\/\/pgzxip.aiteds.com\/data\/upload\/shop\/avatar\/avatar_54.jpg"}
that.inputplace="你被禁言了"
that.inputFlag=true
}
// 踢人
if(event.data[0].payload.description == "kick" && JSON.parse(event.data[0].payload.data).kick_member_id == that.member_id){
uni.showToast({
title: "你被踢出了直播間",
icon: 'none'
})
console.log('你被踢出了直播間')
setTimeout(()=>{
uni.navigateBack({
delta:1
})
},3000)
}
// if(event.data[0].payload.description == 'message'){
// let obj={}
// obj=JSON.parse(event.data[0].payload.data)
// this.historyMsg.push(obj)
// }
if(event.data[0].payload.description == "giftgif" || event.data[1].payload.description == "giftgif" || event.data[2].payload.description == "giftgif"){
// svga動畫特效
let index = JSON.parse(event.data[0].payload.data).giftIndex
let svgaurl= that.currency_gift_list[index].gift_svga_url
let introduce= that.currency_gift_list[index].introduce
clearTimeout(that.timer)
const subNVue = uni.getSubNVueById('drawer')
subNVue.show('slide-in-left', 1000, function(){
uni.$emit('update',{msg:introduce})
});
that.timer = setTimeout(()=>{
subNVue.hide('fade-out', 100)
},that.time)
// gif動畫特效
// that.gifFlag=true
// that.giftgifurl=JSON.parse(event.data[0].payload.data).num
// setTimeout(()=>{
// that.gifFlag=false
// },5000)
// setTimeout(()=>{
// that.gifFlag=false
// },5100)
}
// that.list = []
// 監聽到禮物訊息上屏
// 選出禮物訊息
// giftData = event.data.filter((item) => {
// return item.payload.data == "gift"
// })
// console.log(giftData)
// that.list=giftData;
// 收到推送的單聊、群聊、群提示、群系統通知的新訊息，可通過遍歷 event.data 獲取訊息列表資料並渲染到頁面
// event.name - TIM.EVENT.MESSAGE_RECEIVED
// event.data - 儲存 Message 物件的陣列 - [Message]
};
tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);
// 獲取會話列表
let onSdkReady = function(event) {
let promise = tim.getMessageList({
conversationID: 'GROUP' + that.groupID,
count: 15
});
promise.then(function(imResponse) {
that.groupMsgList = [];
const messageList = imResponse.data.messageList; // 訊息列表。
const nextReqMessageID = imResponse.data.nextReqMessageID; // 用於續拉，分頁續拉時需傳入該欄位。
const isCompleted = imResponse.data.isCompleted; // 表示是否已經拉完所有訊息。
console.log(imResponse,654321)
// that.groupMsgList = messageList;
that.groupMsgList = [];
setTimeout(()=>{
that.pageTop();
},1000)
});
};
// 群通知
tim.on(TIM.EVENT.SDK_READY, onSdkReady);
//加入群聊
// groupID 群 ID
// memberList 加入的成員
tim.on(that.groupID)
let onGroupSystemNoticeReceived = function(event) {
const type = event.data.type; // 群系統通知的型別，詳情請參見 Message.GroupSystemNoticePayload
const message = event.data.message; // 群系統通知的訊息例項，詳情請參見 Message
console.log(event,987456)
console.log(message.payload); // 訊息內容. 群系統通知 payload 結構描述
};
tim.on(TIM.EVENT.GROUP_SYSTEM_NOTICE_RECEIVED, onGroupSystemNoticeReceived);
},
methods: {
onPlay(e){
var result = e.detail
console.log(JSON.stringify(result));
},
closeBoard(){
uni.hideKeyboard()
},
finish(e){
if(e) this.list = [];
console.log("清空資料結束");
//結束後重新獲取資料(模擬)
setTimeout(()=>{
// this.concat = [{
// title: '9999999999',
// img: 'https://wx.qlogo.cn/mmopen/vi_32/bVfMeCPxSQsfBRc1XFHiaAiaZvvdrXC9hMTWAHoqDZKk7HD2By7km1dc55eSEibibKwDaW3ZQ2Zcbccr4KzwILVquQ/132'
// },
// {
// title: '9999999999',
// img: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJghoO6zuibOUG6AMubJJIUicbbWjyOyljFr4QVZecvRqEhHfkIribPfEyfxiaKY5MpiaAeVjvokLLATDw/132'
// }];
},1000);
},
closeHistory(){
this.$refs.historyMsg.close()
},
openHistory(){
this.$refs.historyMsg.open()
},
touservideo(id){
uni.navigateTo({
url:"/pages/liveStreaming/homePersonal/personal?member_id="+id
})
},
toPerson(member_id){
uni.navigateTo({
url:"/pages/liveStreaming/homePersonal/personal?member_id="+member_id
})
},
get_other_zb_data(){
liveutil.request({
url:'index.php?act=live&op=live_room_rank_top_3',
data:{
room_id:this.room_id
},
method:'get'
}).then(res=>{
if(res.error_code == 0){
for(var i = 0; i < res.datas.list.length; i++){
res.datas.list[i].right = (i*20);
}
this.other_list = res.datas.list.reverse();
}
})
},
hideINPUT() {
if (this.bottomflex > 0) {
this.bottomflex = 0;
this.$refs.popup.close()
}
},
focus(e) {
console.log(e)
console.log(e.detail.height)
this.bottomflex = e.detail.height - 50
},
blur() {
this.bottomflex = 0;
console.log(this.bottomflex)
},
// 點選暫停
handleClicked(e, index, item) {
this.$refs.likeButton.handleClick(e)
},
// 下單
addCrat() {
let self = this;
if (self.goodInfo.spec_name) {
if (!self.optionid) {
uni.showToast({
title: "請選擇規格",
icon: "none"
});
return false
}
}
let data = {
optionid: self.optionid || "",
quantity: self.goodsnuber,
goods_id: self.goodInfo.goods_id,
room_id: self.room_id
}
liveutil.request({
url: 'index.php?act=member_cart&op=cart_add',
data,
method: 'post'
}).then(res => {
if (res.error_code == 0) {
self.messageDIV('car',self.goodsnuber,self.goodInfo.goods_name)
self.messageDIV('giftTX',self.goodsnuber,self.goodInfo.goods_name)
uni.showToast({
title: '新增成功',
icon: 'none',
duration: 1000
});
} else {
uni.showToast({
title: res.message,
icon: 'none',
duration: 1000
});
}
this.$refs.popupgoods.close();
})
},
popGoods() {
if (this.goodsnuber == 1) {
uni.showToast({
title: "商品數量不能為0",
icon: "none"
})
return false;
}
this.goodsnuber = this.goodsnuber - 1;
},
addGoods() {
this.goodsnuber = this.goodsnuber + 1;
},
guigeItems(idx, ix) {
this.goodsindex = ix;
this.goodActive[idx] = ix;
this.optionid = this.spec_list_mobile[this.goodActive.join("|")];
for (var k in this.spec_parameter[idx].spec) {
if (k == ix) {
this.$set(this.spec_parameter[idx], "checked", this.spec_parameter[idx].spec[k]);
}
}
},
popupchange(e) {
if (!e.show) {
this.bottomflex = 0;
}
},
showGuiGe(index) {
console.log(this.livegoodslist[index].spec_list_mobile)
// 清空選擇
// 清空狀態
this.goodActive = [];
this.optionid = "";
this.goodInfo = this.livegoodslist[index];
if (this.livegoodslist[index].spec_name) {
this.spec_parameter = [];
this.spec_list_mobile = this.livegoodslist[index].spec_list_mobile;
for (var k in this.livegoodslist[index].spec_name) {
this.spec_parameter.push({
title: this.livegoodslist[index].spec_name[k],
spec: this.livegoodslist[index].spec_value[k]
})
}
} else {
this.spec_parameter = false;
}
console.log(this.goodInfo, 'goodInfo')
this.$refs.popupgoods.open()
},
liveGoodsListFun() {
this.getGoddsList();
this.$refs.popupcartlist.open()
},
liveGoodsListHidden() {
this.$refs.popupcartlist.close()
},
// 獲取商品詳情
addcart(id) {
},
hiendepopup() {
this.$refs.popup.close()
},
getGoddsList() {
let that = this;
liveutil.request({
url: 'index.php?act=live&op=getLiveGoods',
method: 'get',
data: {
room_id: that.room_id
}
})
.then(response => {
console.error(response.datas.live_goods_list)
if (response.error_code == 0) {
that.livegoodslist = response.datas.live_goods_list
that.live_goods_num = response.datas.live_goods_list.length
}
})
},
giftFunjia(bool) {
if (bool) {
this.gift_num++;
} else {
if (this.gift_num <= 1) {
return false;
}
this.gift_num--;
}
},
// 送禮物
giftFun(giftImg,index,svgaurl,svgatime) {
let that = this;
that.gifFlag=false
// that.$refs.gifimgimg.setAttribute('src','')
// 霸屏模擬資料
// liveutil.request({
// url: 'index.php?act=live&op=sendBapinMsgForIMTest',
// method: 'get',
// data: {}
// })
// .then(response => {
// })
liveutil.request({
url: 'index.php?act=live&op=send_gift',
method: 'get',
data: {
gift_id: that.currency_gift_list[that.active].id,
room_id: that.room_id,
gift_num: that.gift_num,
pay_type: 1,
}
})
.then(response => {
console.log(response)
if (response.error_code == 0) {
that.GiftListshow = false;
this.$refs.popupgiftsone.close();
uni.showToast({
title: '贈送成功',
duration: 1000,
icon: 'none'
});
// that.giftgifurl=that.currency_gift_list[that.active].introduce
that.messageDIV("giftgif",that.gift_num,that.currency_gift_list[that.active].gift_name,index)
that.messageDIV("gift",that.gift_num,that.currency_gift_list[that.active].gift_name)
// 自己贈送禮物觸發svga事件
let svgaurl= that.currency_gift_list[index].gift_svga_url
let introduce= that.currency_gift_list[index].introduce
clearTimeout(that.timer)
const subNVue = uni.getSubNVueById('drawer')
subNVue.show('slide-in-left', 1000, function(){
uni.$emit('update',{msg:introduce})
});
that.timer = setTimeout(()=>{
subNVue.hide('fade-out', 100)
},that.time)
// 送完禮物需要訊息上屏
// that.giftMessage(that.currency_gift_list[that.active].gift_name,giftImg)
// that.messageDIV("gift",that.gift_num,that.currency_gift_list[that.active].gift_name)
// that.gifFlag=true
// setTimeout(()=>{
// that.gifFlag=false
// },5000)
// setTimeout(()=>{
// that.gifFlag=false
// },5100)
} else {
uni.showToast({
title: response.message,
icon: "none"
})
}
})
},
//送禮物訊息
giftMessage(textmsg,giftImg) {
console.log(giftImg)
let that = this;
// 2. 建立訊息例項，介面返回的例項可以上屏
let message = tim.createCustomMessage({
to: that.groupID,
conversationType: TIM.TYPES.CONV_GROUP,
payload: {
data: 'gift', // 用於標識該訊息是骰子型別訊息
description: "" + that.gift_num + "," + giftImg,
extension: textmsg
}
});
// 3. 傳送訊息
let promise = tim.sendMessage(message);
promise.then(function(imResponse) {
// 傳送成功
console.log(imResponse);
// 自己的禮物也需要上屏動畫
if (imResponse.data.message.payload.data == "gift") {
console.log("自己送禮物")
// 拼裝一個禮物上屏
let objgift = {};
objgift.name = imResponse.data.message.from;
objgift.description = imResponse.data.message.payload.description;
objgift.extension = imResponse.data.message.payload.extension;
that.giftdata = objgift;
that.showgift = true;
that.translateX = 0;
setTimeout(() => {
that.translateX = -370;
}, 3000)
}
that.$refs.popupgifts.close()
// 訊息上屏
uni.showToast({
title: "" + response.datas.msg
})
that.groupMsgList.push(imResponse.data.message);
setTimeout(()=>{
that.pageTop();
},1000)
}).catch(function(imError) {
// 傳送失敗
console.warn('sendMessage error:', imError);
});
},
is_like(e, is_like) {
let that = this;
if(that.dianzanFlag){
}else{
return false
}
that.$refs.likeButton.handleClick(e)
// 是0為點贊
if (that.getRoomInfo.member_info.is_like == "0" && e) {
that.dianzanFlag = false
that.messageDIV("like",0,0)
liveutil.request({
url: 'index.php?act=live&op=likeRoom',
method: 'get',
data: {
room_id: that.room_id,
}
})
.then(response => {
console.log(response.code)
if (response.error_code == 0) {
that.dianzanFlag = true
that.$refs.likeButton.handleClick(e)
that.getRoomInfo.member_info.is_like = "1";
that.getRoomInfo.live_room_info.likes = parseInt(that.getRoomInfo.live_room_info.likes) + 1;
console.log(that.getRoomInfo.live_room_info.likes)
} else {
// uni.showToast({
// title: response.datas.error,
// icon: 'none'
// })
}
})
}
// 取消點贊
else {
return false
that.dianzanFlag = false
liveutil.request({
url: 'index.php?act=live&op=cancelLikeRoom',
method: 'get',
data: {
room_id: that.room_id,
}
})
.then(response => {
console.log(response.code)
if (response.error_code == 0) {
that.dianzanFlag = true
that.getRoomInfo.member_info.is_like = "0";
that.getRoomInfo.live_room_info.likes = that.getRoomInfo.live_room_info.likes - 1;
}
// uni.showToast({
// title: response.datas.error,
// icon: 'none'
// })
})
}
console.log(is_like);
},
// 獲取房間
getRoomInfoFun(room_number, im_group_id, room_id) {
let that = this;
liveutil.request({
url: 'index.php?act=live&op=getLiveRoomInfo',
method: 'get',
data: {
room_id: room_id,
}
})
.then(response => {
console.log(response.datas)
if (response.error_code == 0) {
console.log(response.datas)
that.getRoomInfo = response.datas;
console.log(that.getRoomInfo.live_room_info.visits,"sssssss6666666666ssssssssssssssss")
}
})
},
// 關注
followClick(is_follow, member_id) {
let that=this
console.log(is_follow, member_id)
if (is_follow == 0) {
liveutil.request({
url: 'index.php?act=live&op=followAnchor',
method: 'get',
data: {
member_id
},
}).then(res => {
console.log(res);
if (res.error_code == 0) {
that.messageDIV('follow',0,0)
uni.showToast({
title: res.datas,
icon: 'none'
})
this.getRoomInfo.member_info.is_follow = 1;
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
} else {
liveutil.request({
url: 'index.php?act=live&op=cancelFollowAnchor',
method: 'get',
data: {
member_id
},
}).then(res => {
console.log(res);
if (res.error_code == 0) {
uni.showToast({
title: res.datas,
icon: 'none'
})
this.getRoomInfo.member_info.is_follow = 0;
} else {
uni.showToast({
title: res.datas.error,
icon: 'none'
})
}
})
}
},
// 有人加群通知
onGroupReceived() {
},
imtipinfo() {
},
mask() {},
// 分享
onShare() {
let shareData = {
shareUrl: "http://pgzxip.aiteds.com/h5/#/",
shareTitle: 'onSharedata.content',
shareContent: 'onSharedata.content',
shareImg: 'onSharedata.cover_url',
appId: "wxd0e0881530ee4444", // 預設不傳type的時候，必須傳appId和appPath才會顯示小程式圖示
appPath: "pages/home/home",
appWebUrl: "http://pgzxip.aiteds.com/h5/#/",
};
// 呼叫
let shareObj = appShare(shareData, res => {
console.log("分享成功回撥", res);
// 分享成功後關閉彈窗
// 第一種關閉彈窗的方式
closeShare();
});
setTimeout(() => {
// 第二種關閉彈窗的方式
// shareObj.close();
}, 5000);
},
giftsViewFun(id, index) {
let that = this;
that.time = Number(that.currency_gift_list[index].gift_svga_length) * 1000
if (this.select_gift != index) {
this.gift_num = 1;
}
this.select_gift = index;
if (id > 0) {
that.showBottomBnt = true;
that.active = index;
} else { // 實物禮物、虛擬禮物
that.active = index;
that.showBottomBnt = false;
if (index == -1) {
// 實物
this.$refs.popupgifts.close()
this.$refs.popupgiftwo.open()
}
if (index == -2) {
// 虛擬
this.$refs.popupgifts.close()
this.$refs.popupgiftsone.open()
}
}
},
popupGoodsHidden() {
this.$refs.popupgoods.open()
this.$refs.popupgoods.close()
},
pageTop() {
let that = this;
console.log('msg_' + (that.groupMsgList.length - 1))
setTimeout(() => {
that.toView = 'msg_' + (that.groupMsgList.length - 1)
}, 1000)
},
getmember() {
let that = this;
if (uni.getStorageSync('LiveListlnfo')) {
that.LiveListlnfo = uni.getStorageSync('LiveListlnfo');
console.log(that.LiveListlnfo)
that.groupID = that.LiveListlnfo.im_group_id
}
// {"type":"object","data":{"room_id":"4","member_id":"68","member_name":"郭慧敏寶寶","room_number":"00000068","room_title":"99999","room_cover":"https://mghzb.wbd99.com/data/upload/blob:https://localhost:8080/4177f5b2-17bf-422c-ace6-3157ea42cfee","room_class":"","status":"1","status_str":"直播中","visits":"410","play_url":"","im_group_id":"@TGS#32R3MLTGL"}}
// h5中
util.request({
url: '/plug/index.php?act=index&op=getIMUserSig',
method: 'get',
data: {
member_id: uni.getStorageSync("api_member_id")
}
})
.then(response => {
if (response.error_code == 0) {
console.log("asd")
let timdata = response.datas;
that.timdata = response.datas;
console.log(that.timdata,"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb")
that.imcreated(timdata.identifier, timdata.userSig, timdata.headurl)
}
})
},
imcreated(userID, userSig, headurl) {
let that = this;
let promise = tim.login({
userID: userID,
userSig: userSig
});
promise.then(function(joinGroupres) {
console.log(joinGroupres.data.actionStatus); // 登入成功
}).then(function() {
let promises = tim.joinGroup({
groupID: that.groupID,
type: 'TIM.TYPES.GRP_AVCHATROOM'
});
console.log("4564")
promises.then(function(joinGroupres) {
console.log(joinGroupres)
switch (joinGroupres.data.status) {
case TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL:
break; // 等待管理員同意
case TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
console.log('加群成功')
console.log(joinGroupres.data.group);
// 加入的群組資料
break;
case TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已經在群中
console.log('已經在群中')
break;
default:
break;
}
}).catch(function(imError) {
console.warn('joinGroup error:', imError); // 申請加群失敗的相關資訊
});
}).then(function() {
})
.catch(function(imError) {
console.warn('login error:', imError); // 登入失敗的相關資訊
});
},
statechange(e) {
console.log("statechange:" + JSON.stringify(e));
// if (e.detail.code == 1002) {
// console.log('推流成功了', e);
// }
},
netstatus(e) {
},
error(e) {
console.log("error:" + JSON.stringify(e));
},
showPinlun() {
// 獲取評論該視訊的id
// this.commentVideo_id = id;
this.bottomflex = 0;
// this.focus(e)
this.focusState = true;
this.$refs.popup.open();
// this.pinlunShow = !this.pinlunShow;
// this.videoCommentList(id)
},
//進入房間
// 型別 數量 名稱 索引
messageDIV(type,num,giftname,giftIndex){
console.log(type)
if(type == 'message'){
if((this.commentVideo_text.trim()).length == 0){
uni.showToast({
title:"訊息不能為空",
icon:"none"
})
return false
}
}
let that = this;
let obj={}
obj.type = type, // 用於標識該訊息是骰子型別訊息
obj.username = that.nickname,
obj.avator = that.avator,
obj.num = num,
obj.giftname = giftname
obj.member_level = that.member_level
obj.giftIndex = ""
obj.tip = ""
obj.gift_svga_url = ""
obj.giftTime = ""
obj.introduce = ""
if(type == 'giftgif'){
obj.giftIndex = giftIndex
obj.gift_svga_url = that.currency_gift_list[that.active].gift_svga_url
obj.giftTime=Number(that.currency_gift_list[that.active].gift_svga_length)
obj.introduce=that.currency_gift_list[that.active].introduce
}
if(type == 'tip'){
obj.tip="歡迎來到直播間!盤古直播嚴禁未成年人進入直播或打賞，請大家共同遵守、監督。直播間內嚴禁出現違法違規、低俗色情、吸引酗酒等內容，若有違規行為請及時舉報。如主播在直播過程中以陪玩、送禮等方式進行誘導打賞、私下交易，請謹慎判斷，以防人身或財產損失。請大家注意財產安全，謹防網路詐騙。"
}
let timestamp = Date.parse(new Date());
timestamp = timestamp / 1000;
obj.timestamp = timestamp
let jsondata=JSON.stringify(obj)
if(type == 'message'){
this.historyMsg.push(obj)
}
// 2. 建立訊息例項，介面返回的例項可以上屏
let message = tim.createCustomMessage({
to: that.groupID,
conversationType: TIM.TYPES.CONV_GROUP,
payload: {
data:jsondata,
description:type,
extension:"2"
}
});
// 3. 傳送訊息
let promise = tim.sendMessage(message);
promise.then(function(imResponse) {
console.log(imResponse,"1309行")
that.groupMsgList.push(imResponse.data.message);
console.log(that.groupMsgList)
that.groupMsgList.map(item=>{
// console.log(item.payload.description)
})
that.pageTop()
that.commentVideo_text=""
that.$refs.popup.close()
}).catch(function(imError) {
// 傳送失敗
console.warn('sendMessage error:', imError);
});
},
// 傳送訊息
sendMsg() {
let that = this;
// 1. 建立訊息例項，介面返回的例項可以上屏
let message = tim.createTextMessage({
to: that.groupID,
conversationType: TIM.TYPES.CONV_GROUP,
payload: {
text: that.commentVideo_text
}
});
// 2. 傳送訊息
let promise = tim.sendMessage(message);
promise.then(function(imResponse) {
// 傳送成功
that.commentVideo_text = "";
that.groupMsgList.push(imResponse.data.message)
that.pageTop();
}).catch(function(imError) {
// 傳送失敗
console.warn('sendMessage error:', imError);
});
that.focusState = false;
},
start: function() {
this.context.start({
success: (a) => {
uni.showToast({
title: '推流成功',
icon: 'none'
})
}
});
},
close: function() {
this.context.close({
success: (a) => {
console.log("livePusher.close:" + JSON.stringify(a));
}
});
},
snapshot: function() {
this.context.snapshot({
success: (e) => {
console.log(JSON.stringify(e));
}
});
},
resume: function() {
this.context.resume({
success: (a) => {
console.log("livePusher.resume:" + JSON.stringify(a));
}
});
},
pause: function() {
this.context.pause({
success: (a) => {
console.log("livePusher.pause:" + JSON.stringify(a));
}
});
},
stop: function() {
this.context.stop({
success: (a) => {
console.log(JSON.stringify(a));
}
});
},
switchCamera: function() {
this.context.switchCamera({
success: (a) => {
console.log("livePusher.switchCamera:" + JSON.stringify(a));
}
});
},
startPreview: function() {
this.context.startPreview({
success: (a) => {
console.log("livePusher.startPreview:" + JSON.stringify(a));
}
});
},
stopPreview: function() {
this.context.stopPreview({
success: (a) => {
console.log("livePusher.stopPreview:" + JSON.stringify(a));
}
});
},
// 獲取禮物列表
getGiftList() {
let that = this;
liveutil.request({
url: 'index.php?act=live&op=getGiftList',
method: 'get',
data: {}
})
.then(response => {
if (response.error_code == 0) {
that.goods_gift_list = response.datas.goods_gift_list;
that.gift_list = response.datas.gift_list;
that.currency_gift_list = response.datas.gift_list;
// 禮物資料合併
}
})
},
go_zbcart(url) {
uni.navigateTo({
url
})
},
//控制禮物顯示
GiftListShowFun(e) {
// console.log(e)
// console.log("sss")
// this.GiftListshow = !this.GiftListshow
// this.$refs.popupgifts.open()
this.$refs.popupgiftsone.open()
},
triggerLikeButton(is_like) {
console.log(is_like)
if (is_like == '1') {
return false
} else {
// this.$refs['likebutton'].handleClick();
}
// this.likeVideo(id,is_like)
},
back_zb() {
liveutil.request({
url:'index.php?act=live&op=leaveLiveRoom',
data:{
room_id:this.room_id
},
method:'get'
}).then(res=>{
console.log(res);
});
clearInterval(this.timer);
uni.navigateBack(1);
},
getLis() {
var that = this
liveutil.request({
url: 'index.php?act=member_index&op=index',
method: 'POST',
data: {}
}).then(res => {
this.nickname = res.datas.member_info.nickname || res.datas.member_info.user_name
this.user_data = res.datas.member_info;
this.avator = res.datas.member_info.avator;
this.member_id = res.datas.member_info.member_id;
this.member_level = res.datas.member_info.member_level;
this.member_name = res.datas.member_info.nickname;
})
},
is_close(e) {
this.select_gift = null;
},
loginTIM(){
this.messageDIV("leaveroom",0,0)
console.warn("退群")
let promise = tim.quitGroup(this.groupID);
promise.then(function(imResponse) {
console.log(imResponse.data.groupID); // 退出成功的群 ID
}).catch(function(imError){
console.warn('quitGroup error:', imError); // 退出群組失敗的相關資訊
});
}
},
onHide() {
this.$refs.maxTxPlayer.pause();
clearTimeout(that.timer)
return false
this.loginTIM()
console.log("onHide")
console.log("onHide")
console.log("onHide")
console.log("onHide")
liveutil.request({
url:'index.php?act=live&op=leaveLiveRoom',
data:{
room_id:this.room_id
},
method:'get'
}).then(res=>{
console.log(res);
});
clearInterval(this.timer);
},
onUnload(){
return false
console.log("退出")
this.loginTIM()
let promise = tim.logout();
promise.then(function(imResponse) {
console.log(imResponse.data); // 登出成功
}).catch(function(imError) {
console.warn('logout error:', imError);
});
}
}
</script>
<style>
.like-button {
position: absolute;
bottom: 180upx;
right: -40upx;
text-align: center;
z-index: 99999
}
.flex_q {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.box_q {
/* #ifndef APP-PLUS-NVUE */
min-height: 100vh;
/* height: auto; */
/* #endif */
/* #ifdef APP-PLUS-NVUE */
flex: 1;
/* #endif */
}
.postabs {
position: relative;
}
.live_bnt {
top: 0px;
left: 0px;
position: absolute;
z-index:1000;
}
.shop_numbers {
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 40rpx 0;
}
.addguige {
/* padding-bottom: 20upx; */
border-bottom: 1px solid rgba(240, 240, 240, 1);
/* margin-bottom: 20upx; */
}
.live_header {
flex-direction: row;
align-items: center;
height: 75upx;
width: 310upx;
height: 75upx;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 60upx;
}
.live_header_img {
width: 75upx;
height: 75upx;
border-radius: 50%;
margin-right: 5upx;
}
.user_name {
font-size: 30upx;
font-weight: 500;
color: #FFFFFF;
}
.tip {
font-size: 20upx;
font-weight: 500;
color: #FFFFFF;
}
.live_top_tip {
margin-left: 50upx;
}
.tip_text {}
.live_nave {
margin-top: 28upx;
align-items: center;
width: 351upx;
height: 46upx;
line-height: 46upx;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 23upx;
padding-left: 10upx;
}
.voider_paly_img {
width: 100upx;
height: 100upx;
}
.live_nave_text {
color: #fff;
font-weight: 500;
font-size: 24upx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 260upx;
}
.live_nave_img {
margin-right: 10upx;
}
.lvie_start {
background-color: rgba(255, 0, 0, 0.3);
text-align: center;
font-size: 24upx;
justify-content: center;
text-align: center;
flex-direction: row;
padding: 2upx;
color: #FF7A22;
}
.left_msg {
position: absolute;
bottom: 250upx;
/* width: 750upx; */
padding: 20rpx;
}
.giving_gifts {
align-items: center;
/* transform: translateX(-100px); */
transition: 3s;
}
.giving_gifts_content_img {
width: 84upx;
height: 84upx;
border-radius: 50%;
margin-right: 20upx;
}
.manyLine{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.giving_gifts_name {
width: 260rpx;
font-size: 26upx;
color: #fff;
}
.liveH {
/* #ifdef APP-PLUS */
margin-left: 20upx;
/* #endif */
/* #ifndef APP-NVUE */
margin-left: auto;
/* #endif */
margin-right: 10upx;
width: 100upx;
height: 48upx;
line-height: 48upx;
/* #ifdef APP-NVUE */
background-image: linear-gradient(to right, #FF715E, #FFA97E);
/* #endif */
/* #ifndef APP-NVUE */
background-color: #FF715E;
/* #endif */
border-radius: 24upx;
font-size: 20upx;
text-align: center;
color: #FFFFFF;
}
.giving_gifts_content {
width: 370upx;
height: 84upx;
background-color: #FF7A22;
/* #ifndef APP-NVUE */
background: linear-gradient(45deg, #FF715E, #FFA97E);
/* #endif */
/* #ifdef APP-NVUE */
/* background-image:linear-gradient(to right,#FF715E,#FFA97E); */
/* #endif */
border-radius: 40px;
align-items: center;
border-radius: 80px;
align-items: center;
color: #FFFFFF;
}
.giving_gifts_nuber {
/* #ifndef APP-NVUE */
/* background: linear-gradient(45deg, #FF715E, #FFA97E); */
/* #endif */
/* #ifdef APP-NVUE */
/* background-image:linear-gradient(to right,#FF715E,#FFA97E); */
/* #endif */
/* border-radius: 50%; */
background-color: #FF715E;
border-radius: 50%;
margin-left: 20upx;
}
.giving_gifts_nuber_text {
width: 66upx;
height: 66upx;
color: #FFFFFF;
font-size: 26upx;
text-align: center;
line-height: 66rpx;
display: flex;
justify-content: center;
align-items: center;
}
.who_banck_live{
display: flex;
justify-content: end;
align-items: center;
}
.who_banck_live_text {
/* width: 100%;
height: 100%; */
padding: 6rpx 30rpx;
background-color: rgba(49, 49, 49, 1);
border-radius: 28px;
text-align: center;
margin: 20upx 0px;
margin-right: 300rpx;
}
.live_text {
height: 55upx;
line-height: 55upx;
font-size: 26upx;
align-items: center;
/* padding-left: 20upx; */
font-weight: 500;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}
.group_chat {
width: 500upx;
margin-bottom: 20upx;
height: 360upx;
}
.addguige {
display: flex;
}
.jian_box_input {
line-height: 60upx;
height: 60upx;
}
.jian_box_inputs{
width: 40%;
text-align: center;
font-size: 28upx;
font-weight: 500;
}
.price_text {
font-size: 30upx;
font-family: PingFang SC;
font-weight: bold;
color: rgba(255, 122, 34, 1);
}
.group_chat_scroll {
/* #ifndef APP-NVUE */
max-height: 360upx;
/* #endif */
height: 360upx;
}
.group_chat_item {
display: inline-block;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 20px;
/* flex-wrap: wrap; */
/* padding: 20upx; */
margin-bottom: 20upx;
}
.pad20{
padding: 20upx;
}
.group_chat_name {
font-size: 26upx;
font-weight: 500;
color: rgba(255, 196, 104, 1);
}
.group_chat_text {
font-size: 26upx;
color: #FFFFFF;
height: auto;
word-break:break-all
}
.live_bootom {
position: absolute;
bottom: 150upx;
width: 750upx;
padding: 20rpx;
z-index:1000;
}
.live_time {
font-size: 28upx;
font-weight: bold;
color: #FF7A22;
line-height: 28upx;
margin-top: 8upx;
}
.live_bootom_content {
/* justify-content: space-between; */
align-items: center;
}
.live_bootom_items {
position: relative;
text-overflow: unset;
width: 80upx;
margin-left: 20upx;
}
/* .barg{
display: flex;
align-items: center;
justify-content: center;
height: 100upx;
height: 100upx;
background-color:rgba(225,225,225,0.6) ;
border-radius:50% ;
} */
.gifts_box_mask {}
.live_info_content {
padding: 10upx 20upx;
}
.all_view_num {
flex-direction: column;
align-items: center;
justify-content: center;
height: 120rpx;
/* flex: 1; */
}
.live_bootom_img {
height: 70upx;
width: 70upx;
}
.jia_jian_view {
width: 40rpx;
height: 40rpx;
}
.items_tip {
position: absolute;
top: 0px;
left: 40upx;
border-radius: 13px;
font-weight: 500;
z-index: 1000;
padding: 0px 10upx;
background-color: rgba(232, 20, 20, 1);
color: rgba(243, 247, 249, 1);
font-size: 18upx;
}
.live_header_info {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.poste {
position: relative;
left: 0px;
top: 0px;
padding: 5px 10px;
width: 750upx;
}
.live_push {
/* height: 620px; */
position: absolute;
left: 0px;
top: 0px;
}
.pinglun {
width: 750upx;
height: 874upx;
background-color: #FFFFFF;
padding: 10upx;
}
.pinglun_title {
justify-content: space-between;
height: 104upx;
line-height: 104upx;
}
.addqunx {
font-size: 30upx;
font-weight: bold;
color: rgba(0, 0, 0, 1);
}
.jian_box {
width: 60upx;
height: 60upx;
background: rgba(238, 238, 238, 1);
border: 1px solid rgba(229, 229, 229, 1);
border-radius: 5upx;
text-align: center;
align-items: center;
justify-content: center;
}
.addnuber {
font-size: 30upx;
font-weight: bold;
color: rgba(51, 51, 51, 1);
margin-left: 12upx;
}
.num_select_view {
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0 20rpx;
margin: 10rpx 0;
}
.scroll_view_cart_bottom {
justify-content: space-between;
align-items: center;
margin-top: 50upx;
}
.ckole {
font-size: 30upx;
font-weight: bold;
color: rgba(102, 102, 102, 1);
}
.scroll-Y {
height: 580upx;
}
.pinglun_header_img {
width: 60upx;
height: 60upx;
border-radius: 50%;
}
.pinglun_username {
font-size: 28upx;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
.scroll_item {
justify-content: space-between;
padding-bottom: 20upx;
margin-bottom: 20upx;
border-color: #eee;
border-style: solid;
border-bottom-width: 2upx;
}
.scroll_item_lefts {}
.pinglun_info {
margin-left: 16upx;
/* flex-direction: column; */
}
.pinglun_info_text {
font-size: 26upx;
font-weight: 400;
color: rgba(51, 51, 51, 1);
}
.pinluntime {
font-size: 24upx;
font-weight: 500;
color: #000000;
background-color: #FFFFFF;
}
.pinglun_bnt {
align-items: center;
justify-content: space-between;
position: fixed;
padding: 10upx 0px;
width: 750upx;
background-color: #FFFFFF;
}
.pinglun_bnt_left {
/* width: 500upx; */
flex: 1;
height: 80upx;
background-color: rgba(245, 245, 245, 1);
border-radius: 40upx;
}
.liveHed {
/* #ifdef APP-PLUS */
margin-left: 20upx;
/* #endif */
/* #ifndef APP-NVUE */
margin-left: auto;
/* #endif */
width: 100upx;
height: 48upx;
line-height: 48upx;
background-color: #808080;
border-radius: 25upx;
font-size: 24upx;
text-align: center;
color: #FFFFFF;
}
.input_text {
height: 80upx;
padding-left: 40upx;
}
.pinglun_bnt_bttom_bnt {
width: 150upx;
height: 80upx;
line-height: 80upx;
/* #ifndef APP-NVUE */
background: linear-gradient(-90deg, rgba(135, 158, 255, 1), rgba(209, 101, 255, 1));
/* #endif */
/* #ifdef APP-NVUE */
background-image: linear-gradient(to right, #879EFF, #D165FF);
/* #endif */
border-radius: 40px;
text-align: center;
border-radius: 40px;
font-size: 26upx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
display: block;
}
.video_content_content {
position: absolute;
/* #ifndef APP-PLUS */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
text-align: center;
}
.gifts_box {
width: 750upx;
min-height: 600upx;
background-color: #;
padding: 30upx;
position: relative;
}
.gifts_boxs {
width: 750upx;
min-height: 600upx;
position: relative;
}
.gift_fa {
position: relative;
text-overflow: unset;
}
.gift_active {
width: 96%;
position: absolute;
left: 0;
bottom: 0;
background: rgba(245, 245, 245, 1);
border-radius: 14rpx;
border-width: 2rpx;
border-color: #ff715e;
box-sizing: border-box;
width: 250upx;
padding-top: 4upx;
}
.gifts_view_item_scroll {
width: 200upx;
height: 200upx;
background: rgba(245, 245, 245, 1);
border-radius: 15upx;
text-align: center;
position: relative;
}
.gifts_view_item_scrolls {
height: 260upx;
background-color: #fff;
border-radius: 15upx;
text-align: center;
position: relative;
border-radius: 20rpx;
justify-content: center;
align-items: center;
/* #ifdef APP-PLUS */
height: 290upx;
/* padding-top: 50rpx; */
/* #endif */
width: 250upx;
}
.gifts_view_item_scroll_active {
background: rgba(255, 225, 205, 1);
}
.gifts_start {
position: absolute;
right: 0px;
top: 11upx;
width: 100upx;
height: 40upx;
line-height: 40upx;
/* #ifdef APP-NVUE */
/* background-image: linear-gradient(to top,rgba(255,34,50,1),rgba(255,122,34,0.1)); */
/* #endif */
/* #ifndef APP-NVUE */
background: linear-gradient(90deg, rgba(255, 34, 50, 1) 0%, rgba(255, 122, 34, 0.1) 100%);
/* #endif */
/* border-radius:17px 0px 0px 17px; */
border-top-left-radius: 18upx;
border-bottom-left-radius: 18upx;
font-size: 24upx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
.gifts_view_item_scroll_img {
width: 110upx;
height: 100upx;
margin: auto;
}
.gifts_name {
font-size: 24upx;
text-align: center;
font-weight: 500;
color: rgba(51, 51, 51, 1);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
width: 200upx;
display: inline-block;
}
.scroll_flex_q {
flex-wrap: wrap;
justify-content: space-between;
}
.scroll_flex_qs {
flex-wrap: wrap;
background-color: #fff;
text-overflow: unset;
}
.gifts_view_item_scroll {
margin-bottom: 34upx;
}
.gifts_view_chang_box {
width: 100%;
padding: 0px 30upx;
margin: 0px auto;
justify-content: space-between;
align-items: center;
}
.gifts_view_chang_boxs {
flex: 1;
padding: 30upx;
justify-content: space-between;
align-items: center;
background-color: #fff;
}
.gifts_view_chang {
justify-content: space-between;
align-items: center;
width: 250upx;
height: 56upx;
background: rgba(235, 235, 235, 1);
border: 2upx solid rgba(220, 220, 220, 1);
}
.gifts_view_chang_input {
font-size: 28upx;
font-weight: 500;
color: rgba(255, 122, 34, 1);
}
.gifts_view_change_input {
width: 40%;
text-align: center;
font-size: 28upx;
font-weight: 500;
color: rgba(255, 122, 34, 1);
}
.danwei {
font-size: 28upx;
font-weight: 500;
color: rgba(153, 153, 153, 1);
}
.gifts_view_bnt {
width: 117upx;
height: 48upx;
line-height: 45upx;
/* #ifndef APP-NVUE */
background: linear-gradient(180deg, rgba(255, 164, 43, 1) 0%, rgba(255, 73, 60, 1) 100%);
/* #endif */
/* #ifdef APP-PLUS */
/* background:linear-gradient(to rigth,#FFA42B,#FF493C); */
/* #endif */
border-radius: 10upx;
margin-left: 20upx;
}
.gifts_view_bnt_s {
width: 150upx;
height: 48upx;
line-height: 45upx;
/* #ifndef APP-NVUE */
background: linear-gradient(180deg, rgba(255, 164, 43, 1) 0%, rgba(255, 73, 60, 1) 100%);
/* #endif */
/* #ifdef APP-PLUS */
background-image: linear-gradient(to right, #FFA42B, #FF493C);
/* #endif */
border-radius: 10upx;
justify-content: center;
align-items: center;
}
.gifts_view_bnt_text {
font-size: 28upx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
text-align: center;
display: inline-block;
width: 100%;
/* #ifdef APP-PLUS */
color: #fff;
/* #endif */
height: 48upx;
line-height: 48upx;
}
.gifts_icon_img_tip {
font-size: 30upx;
font-weight: 500;
color: rgba(255, 122, 34, 1);
}
.jian {
width: 24upx;
height: 24upx;
}
.title_tip {
justify-content: space-between;
padding-bottom: 20upx;
}
.allgoods_tip,
.ocler_bnt {
font-size: 30upx;
font-family: PingFang SC;
font-weight: bold;
color: rgba(51, 51, 51, 1);
}
.scroll_view_cart_left_img {
width: 150upx;
height: 150upx;
border-radius: 10upx;
}
.scroll_view_cart {
position: relative;
margin-bottom: 30upx;
}
.scroll_view_cart_right {
margin-left: 26upx;
}
.tip_img_unber {
position: absolute;
font-size: 28upx;
font-family: PingFang SC;
font-weight: 500;
background-color: rgba(51, 51, 51, 0.3);
line-height: 28upx;
width: 54upx;
height: 28upx;
background: rgba(0, 0, 0, 1);
color: #FFFFFF;
opacity: 0.6;
text-align: center;
border-radius: 10upx 0upx 10upx 0px;
top: 0px;
left: 0px;
}
.scroll_view_cart {}
.scroll_view_cart_right_text {
display: inline-block;
width: 479upx;
font-size: 28upx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 36upx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.shop_cart {
width: 45upx;
height: 41upx;
}
.cart_list {
position: relative;
transform: translateY(80upx);
}
.cart_icon_popup {
align-items: center;
justify-content: center;
left: 40rpx;
bottom: 160rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.cart_icon_popup_img {
width: 50rpx;
height: 50rpx;
}
.cart_list_view {
/* margin-top: 44upx; */
}
.onclien {
justify-content: flex-end;
}
.onclien_img {
width: 50upx;
height: 46upx;
}
.goods_info_right {
margin-left: 26upx;
}
.goods_info {
border-bottom: 1px solid rgba(240, 240, 240, 1);
}
.goods_info_left_img {
width: 150upx;
height: 150upx;
border-radius: 10upx;
}
.guige_items_box {
flex-wrap: wrap;
margin-top: 26upx;
}
.goods_info_left_text {
font-size: 28upx;
height: 100upx;
font-family: Adobe Heiti Std;
font-weight: normal;
color: rgba(51, 51, 51, 1);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.goods_info_left_price {
font-size: 30upx;
font-family: PingFang SC;
font-weight: bold;
color: rgba(255, 0, 0, 1);
}
.guige_title_tip {
font-size: 24upx;
font-family: Adobe Heiti Std;
font-weight: normal;
color: rgba(51, 51, 51, 1);
}
.guige_items {
font-size: 24upx;
font-family: Adobe Heiti Std;
font-weight: normal;
color: #C0C0C0;
line-height: 36px;
min-width: 120upx;
text-align: center;
border: 1px solid #C0C0C0;
margin-right: 10upx;
}
.guige_items_active {
border: 1px solid rgba(236, 146, 27, 1);
color: rgba(236, 146, 27, 1);
}
.subsmnrt {
width: 360upx;
height: 88upx;
background-color: rgba(236, 146, 27, 1);
border-radius: 5px;
font-size: 30upx;
font-family: Adobe Heiti Std;
font-weight: normal;
color: rgba(255, 255, 255, 1);
line-height: 88upx;
text-align: center;
margin: 0 auto;
}
.back_zb {
width: 75upx;
height: 75upx;
padding-left: 10upx;
justify-content: center;
}
.back_zb_img {
width: 22upx;
height: 38upx;
}
.other_zb_view{
background-color: #fff;
padding: 4rpx;
border-radius: 50%;
position: absolute;
justify-content: center;
align-items: center;
}
.live_header_img_zb {
width: 72upx;
height: 72upx;
border-radius: 50%;
}
.maskImg{
position: fixed;
left: 0;
right: 0;
top: 0;
z-index:100;
width: 750upx;
/* height: 800px; */
}
.live_bootom2 {
position: absolute;
bottom: 100upx;
width: 750upx;
padding-top: 20rpx;
padding-bottom: 40rpx;
z-index:1000;
}
.input2{
padding-left:20upx;
background-color: rgba(0,0,0,0.1);
width: 260upx;
height: 50upx;
border-radius: 50upx;
font-size: 26upx;
color: #fff;
}
.historyMsg{
background-color: #fff;
height: 600upx;
overflow: scroll;
}
.bptx{
position: fixed;
z-index:9999999999;
top:300upx;
height: 80upx;
line-height: 80upx;
left: 30upx;
transition:all 2s;
}
.bptxA{
transition:all 2s;
}
.bptxtxt{
padding-left: 30upx;
padding-right: 30upx;
color: #fff;
border-radius: 40upx;
font-size: 30upx;
}
.node{
background-color: transparent;
font-size: 26upx;
width: 480upx;
transform: translateY(-20upx);
padding-top: 0;
padding-bottom: 0;
padding-left: 20upx;
padding-right: 20upx;
}
</style>
原生子窗體：test2.nvue
<template>
<view class="">
<tx-svga ref="maxTxAnimation"
class="maxTxAnimation"
@statechange="onProgress"
:style="{height:windowHeight}"
>
</tx-svga>
<!-- <view class="foot">
<view class="circleBoxAll">
<view class="circleBox" @click="playAnimation()">
<text class="circleIco phone"></text>
<text class="hint">播放動畫</text>
</view>
<view class="circleBox" @click="pauseAnimation()">
<text class="circleIco phone"></text>
<text class="hint">暫停動畫</text>
</view>
<view class="circleBox" @click="resumeAnimation()">
<text class="circleIco phone"></text>
<text class="hint">繼續動畫</text>
</view>
</view>
</view> -->
</view>
</template>
<script>
const svgaModel = uni.requireNativePlugin('tx-svgamodel')
export default {
data() {
return {
flag:false,
filePath:"",
aa:"",
windowHeight:""
}
},
onLoad() {
const vm = this
this.windowHeight = uni.getSystemInfoSync().windowHeight;
// #ifdef APP-PLUS
uni.$on('update',function(data){
console.log('監聽到事件來自 update ，攜帶引數 msg 為：' + data.msg);
vm.res = data.msg;
vm.aa="觸發了動畫"
vm.playAnimation(data.msg)
})
// #endif
},
onReady() {
var me = this;
this.play();
},
onNavigationBarButtonTap() {
this.$refs.maxTxAnimation.cancelAnimation();
uni.navigateBack({
delta: 1,
animationType: 'zoom-fade-out',
animationDuration: 200
});
},
methods: {
play(){
},
onPush(e){
var msg = JSON.stringify(e);
},
playAnimation(index){
// var vArray = ['/static/images/living/dragon.svga','/static/images/living/nanwu.svga','/static/images/living/feiji2.svga','/static/images/living/nanwu.svga','/static/images/living/Rocket.svga','/static/images/living/heartbeat.svga','/static/images/living/matteBitmap.svga']
// var item = vArray[index];
// var item = vArray[Math.floor(Math.random()*vArray.length)];
// var item = index
let item = "/static/images/living/" + index + ".svga"
console.log(item);
var iconPath = plus.io.convertLocalFileSystemURL(item)
this.$refs.maxTxAnimation.playAnimation({"filePath":iconPath});
// svgaModel.downloadUrls(item,result=>{
// console.log(result);
// this.$refs.maxTxAnimation.playAnimation({"filePath":result.filePath});
// });
},
pauseAnimation(){
this.$refs.maxTxAnimation.pauseAnimation();
},
resumeAnimation(){
this.$refs.maxTxAnimation.resumeAnimation();
},
onProgress(e) {
var result = e.detail;
console.log(result);
}
}
}
</script>
<style>
/deep/ page{
background-color: #f00;
opacity: 0.1;
}
.maxTxPusher{
width:750upx;
background-color:#111111;
position: fixed;
top: 0;
right: 0;
}
.foot{
width: 710upx;
position: fixed;
bottom:0;
left: 0;
margin:20upx;
align-items: center;
justify-content: center;
flex-direction: row;
flex-direction: column;
}
.circleBoxAll{
flex-direction: row;
justify-content: center;
align-items: center;
}
.circleBox{
width: 200upx;
padding:30upx 0;
margin:10upx;
align-items: center;
flex-direction: column;
}
.circleIco{
font-size:30upx;
width:100upx;
height:100upx;
line-height:100upx;
border-radius: 500px;
border-style: solid;
border-width: 1px;
border-color:#FFFFFF;
text-align: center;
font-family:iconfont;
color: #FFFFFF;
font-size:50upx;
}
.phone{
background-color:#c5433a;
border-style: solid;
border-width: 1px;
border-color:#c5433a;
}
.hint{
font-size:30upx;
color: #FF0000;
padding-top:20upx;
}
</style> pages.json 配置
{
"path": "pages/homePages/seyliveed",
"style": {
"navigationStyle": "custom",
"backgroundColor":"transparent",
"app-plus": {
"softinputMode": "adjustResize",
"titleNView": false , //禁用原生導航欄
"subNVues":[{
"id": "drawer", //subNVue 的 id，可通過 uni.getSubNVueById('drawer') 獲取
"path": "pages/homePages/test2", // nvue 路徑
"style": { //webview style 子集，文件可暫時開放出來位置，大小相關配置
"position": "popup", //除 popup 外，其他值域參考 5+ webview position 文件
"width": "100%",
"height":"100%",
"background": "transparent",
"top":"0%"
}
}]
}
}
},