demingshangjia/pages/release/zhibo.nvue

<template>
    <div>
        <live-pusher id='livePusher' ref="livePusher" class="livePusher" :url="url"
        mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
        aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
        :style="{'height':height + 'px'}"
        ></live-pusher>
        <div class="bottom" :style="{'height':height + 'px'}" v-if="show" @click="show = false">
            <div class="tanchuceng" @click="zuzhi">
                <div class="head">
                    <div style="flex-direction: row;align-items:center">
                        <text class="title">全部商品</text>
                        <text class="num">2件</text>
                    </div>
                    <!-- <div class="add">
                        <text style="font-size:28rpx;color: #fff;text-align:center">添加/管理商品</text>
                    </div> -->
                </div>
                <list class="list">
                <cell class="item" v-for="(i,j) in list" @click="xuanzhong(j)">
                    <image class="shopimg" :src="i.goods_image"></image>
                    <div class="info">
                        <div>
                            <text style="font-size:26rpx;colro:#333;margin-top:12rpx;lines:1;text-overflow:ellipsis">{{i.goods_name}}</text>
                            <text style="font-size:24rpx;color:#333;margin-top:14rpx;lines:1;text-overflow:ellipsis">{{i.goods_advword}}</text>
                        </div>
                        <div style="flex-direction: row; align-items: flex-end;">
                            <text style="font-size:28rpx;color:#FF3131">￥{{i.goods_price}}</text>
                            <text style="font-size:26rpx;color:#999">￥{{i.goods_marketprice}}</text>
                        </div>
                    </div>
                        <image :src="'../../static/image/release/' + (i.putaway == 1 ? 'on' : 'off') + '.png'" style="width:55rpx;height:35rpx;margin-top:120rpx;margin-left:150rpx"></image>
                </cell>
            </list>
            </div>
            
        </div>

        <!-- <button class="btn" @click="start">开始推流1</button>
        <button class="btn" @click="pause">暂停推流</button>
        <button class="btn" @click="resume">resume</button>
        <button class="btn" @click="stop">停止推流</button>
        <button class="btn" @click="snapshot">快照</button>
        <button class="btn" @click="startPrediv">开启摄像头预览</button>
        <button class="btn" @click="stopPrediv">关闭摄像头预览</button>
        rtmp://107268.livepush.myqcloud.com/live/26?txSecret=826e36f52669ebf9290644b82a1d8b33&txTime=5F1A84E4
        <button class="btn" @click="switchCamera">切换摄像头</button> -->
    </div>
</template>
<style lang="scss" scoped>
.info{
    height: 160rpx;
    justify-content: space-between;
    margin-left: 10rpx;
    width: 304rpx;
}
.shopimg{
    width: 160rpx;
    height: 160rpx;
    background-color: #0f0;
    

}
.item{
    width: 690rpx;
    height: 200rpx;
     border-bottom-width: 2rpx;
    border-style: solid;
    border-color: #ECECEC;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.list{
    width: 750rpx;
    height: 694rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
}
.add{
    width: 221rpx;
    height: 40rpx;
    background-color: #FF780F;
    border-radius: 20rpx;
    justify-content: center;
    margin-right: 30rpx;
}
.num{
    font-size: 26rpx;
    color: #FF3131;
    margin-left: 30rpx;
}
.bottom{
    width: 750rpx;
    position: fixed;
    top:0;
    z-index: 10;
}
.head{
    width: 750rpx;
    height: 88rpx;
    border-bottom-width: 2rpx;
    border-style: solid;
    border-color: #ECECEC;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.title{
    font-size: 30rpx;
    color:#333;
    margin-left: 30rpx;
}
.tanchuceng{
    width: 750rpx;
    height: 782rpx;
    position: fixed;
    bottom: 0;
    border-top-left-radius:20rpx;
    border-top-left-radius:20rpx;
    background-color: #fff;
    transition: bottom 0.5s;
    z-index: 20;
    
}
</style>
<script>
    export default {
        data: {
            fil: true,
            url:'',
            height:0,
            show:true,
            list:[]
        },
        onReady() {
            // 注意：需要在onReady中 或 onLoad 延时
            this.context = uni.createLivePusherContext("livePusher", this);
            this.startPreview()
            let that = this
            uni.getSystemInfo({
                success(a){
                    console.log(a.windowHeight)
                    that.height = a.windowHeight
                    // that.start()

                }
            })
        },
        onLoad(a){
            this.url = a.url.replace("*","&")
            let that = this
            const token = uni.getStorageSync('token');
            uni.request({
                url:"https://dmmall.sdbairui.com//storeapi/Streaming/liveStreamList",
                method:"POST",
                headers:{
                    'Authorization' : 'Bearer' + " " + token
                },
                success(res){
                    console.log(res)
                    that.list= res.data.data
                }
            })
        },  
        methods: {
            statechange(e) {
                console.log("statechange:" + JSON.stringify(e));
            },
            netstatus(e) {
                // console.log("netstatus:" + JSON.stringify(e));
            },
            error(e) {
                console.log("error:" + JSON.stringify(e));
            },
            start: function() {
                console.log(this.url)
                this.context.start({
                    success: (a) => {
                        console.log("livePusher.start:" + JSON.stringify(a));
                    }
                });
            },
            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(this.url + '12')

                        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() {
                let that = this
                this.context.startPreview({
                    success: (a) => {
                        console.log("livePusher.startPreview:" + JSON.stringify(a));
                        that.start()

                    }
                });
            },
            stopPreview: function() {
                this.context.stopPreview({
                    success: (a) => {
                        console.log("livePusher.stopPreview:" + JSON.stringify(a));
                    }
                });
            },
            guanbi(){
                this.show = false
                console.log(123)
            },
            zuzhi(event){
               event.stopPropagation();  
            },
            xuanzhong(i){
                this.list[i].putaway =  this.list[i].putaway == 0 ? 1 : 0
                const token = uni.getStorageSync('token');
                let arr = []
                for(let i in this.list){
                    if(this.list[i].putaway == 1){
                        arr.push(this.list[i].goods_id)
                    }
                }
                let that = this
                uni.request({
                    url:"https://dmmall.sdbairui.com/storeapi/Streaming/updateGoods",
                    method:"POST",
                    data:{
                        goods_id:arr.join(',')
                    },
                    headers:{
                        'Authorization' : 'Bearer' + " " + token
                    },
                    success(res){
                        console.log(res)
                        uni.request({
                            url:"https://dmmall.sdbairui.com//storeapi/Streaming/liveStreamList",
                            method:"POST",
                            headers:{
                                'Authorization' : 'Bearer' + " " + token
                            },
                            success(res){
                                console.log(res)
                                that.list= res.data.data
                            }
                        })
                    }
                })
            }
        }
    }
</script>