直播选择商品

common/http.api.js

@@ -18,6 +18,9 @@ const install = (Vue, vm) => {
         },
         createChatRoom({chat_name,live_desc,spec,goods_id,cover_img}){
             return vm.$u.post("Streaming/createChatRoom",{chat_name,live_desc,spec,goods_id,cover_img})
+        },
+        liveStreamList(){
+            return vm.$u.post("Streaming/liveStreamList")
         }
     }
 	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下

pages/release/zhibo.nvue

@@ -1,34 +1,117 @@
 <template>
-    <view>
+    <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>
-        <view class="bottom" :style="{'height':height + 'px'}" v-if="show" @click="show = false">
-            <view class="tanchuceng" @click="zuzhi">
-                1
-            </view>
-        </view>
-        
+        <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="startPreview">开启摄像头预览</button>
-        <button class="btn" @click="stopPreview">关闭摄像头预览</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> -->
-    </view>
+    </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;
@@ -39,6 +122,7 @@
     background-color: #fff;
     transition: bottom 0.5s;
     z-index: 20;
+    
 }
 </style>
 <script>
@@ -47,7 +131,8 @@
             fil: true,
             url:'',
             height:0,
-            show:true
+            show:true,
+            list:[]
         },
         onReady() {
             // 注意：需要在onReady中 或 onLoad 延时
@@ -65,14 +150,26 @@
         },
         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));
+                // console.log("netstatus:" + JSON.stringify(e));
             },
             error(e) {
                 console.log("error:" + JSON.stringify(e));
@@ -153,6 +250,41 @@
             },
             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
+                            }
+                        })
+                    }
+                })
             }
         }
     }