deming/pageB/zhibo/index.nvue

<template>
  <view>
    <video :src="url" class="vodio" autoplay="true" :show-fullscreen-btn="false" :show-play-btn="false" :enable-progress-gesture="false" :show-center-play-btn="false" :show-progress="false" :controls="false" :style="{'height':height}">

    </video>
    <view class="user" :style="{'top': top}">
      <view class="back"></view>
      <image class="head" :src="info.member_avatar"></image>
      <view class="userinfo">
        <text class="name">{{info.member_nickname}}</text>
        <text class="info">{{info.live_desc}}</text>
      </view>
      <view class="guanzhu" @click="guanzhu"><text style="color:#fff;font-size:24rpx">{{info.is_attention == 1 ? '已关注' : '关注'}}</text></view>
    </view>
    <view class="userlist" :style="{'top': top + 10 * rpx}">
        <image class="userlistitem" v-for="(i,j) in [0,1,2]" :style="{'right': (-j * 15 * rpx) + 'px'}"></image>
    </view>
    <view class="hot" :style="{'top': top + 10 * rpx}">
      <text class="hottext">2.8w</text>
    </view>
    <image class="cart" src="../../static/cart.png" @click="show = true">

    </image>
    <image class="liketap" src="../../static/like.png" @click="">
    <image class="closeimg" src="../../static/close.png" :style="{'top': top + 30 * rpx}" @click="back"></image>
    </image>
      <div class="bottom" :style="{'height':height + 'px'}" v-if="show" @click="show = false">
        <div class="tanchuceng" @click="zuzhi">
          <div class="heads">
              <div style="flex-direction: row;align-items:center">
                  <text class="title">全部商品</text>
                  <text class="num">{{list.length}}件</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="infos">
                  <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>
  </view>
</template>
<style lang="scss" scoped>
.infos{
    height: 160rpx;
    justify-content: space-between;
    margin-left: 10rpx;
    width: 404rpx;
}
.shopimg{
    width: 160rpx;
    height: 160rpx;
    background-color: #0f0;
    

}
.heads{
    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;
    
}
.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;
}
.cart{
  width: 50rpx;
  height: 46rpx;
  position: fixed;
  bottom: 36rpx;
  right: 154rpx;
}
.hottext{
  font-size: 20rpx;
  color: #fff;
}
.hot{
  width: 60rpx;
  height: 60rpx;
  background-color: rgb(104, 104, 104);
  position: fixed;
  border-radius: 30rpx;
  right: 86rpx;
  align-items: center;
  justify-content: center;
}
.userlistitem{
    width: 60rpx;
    height: 60rpx;
    position: relative;
    border-radius: 30rpx;
  background-color: #0f0;
}
.userlist{
    display: flex;
    flex-direction: row-reverse;
    width: 150rpx; 
    height: 60rpx;
    position: fixed;
    right: 156rpx;

}
.name {
  font-size: 24rpx;
  color: #fff;
  lines: 1;
  text-overflow: ellipsis;
}
.info {
  font-size: 20rpx;
  color: #fff;
  margin-top: 6rpx;
  lines: 1;
  text-overflow: ellipsis;
}
.userinfo {
  display: flex;
  flex-direction: column;
  width: 100rpx;
  margin-left: 20rpx;

}
.guanzhu {
  width: 100rpx;
  height: 50rpx;
  background-color: #ff780f;
  border-radius: 25rpx;
  margin-left: 10rpx;
  align-items: center;
  justify-content: center;
}
.head {
  width: 70rpx;
  height: 70rpx;
  border-radius: 35rpx;
}
.back {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.2;
  width: 308rpx;
  height: 70rpx;
  border-radius: 35rpx;
}
.user {
  position: fixed;
  left: 30rpx;
  width: 308rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  border-radius: 35rpx;
  overflow: hidden;
  flex-direction: row;
}
.video {
  width: 750rpx;
}
.liketap{
  width: 55rpx;
  height: 57rpx;
  position: fixed;
  bottom: 30rpx;
  right: 54rpx;
}
.closeimg{
  width: 31rpx;
  height: 31rpx;
  position: fixed;
  right: 31rpx;
  background-color: #0f0;
}
</style>
<script>
export default {
  name: "zhibo",
  data() {
    return {
      url: "",
      top: 0,
      height: 0,
      rpx:0,
      show:false,
      list:[],
      id:0,
      info:{}
    };
  },
  onLoad(a) {
    this.url = a.url;
    this.id = a.id
    console.log(this.url);
    let that = this;
    uni.getSystemInfo({
      success(a) {
        console.log(a.windowHeight);
        that.height = a.windowHeight;
        // that.start()
        that.top = a.statusBarHeight + 5;
        that.rpx = (a.windowWidth / 750)
        console.log(that.rpx)
      },
    });
    // this.$u.api.goodsShelves({live_id:this.id}).then((res)=>{
    //   console.log(res)
    // })
    const token = uni.getStorageSync('token');
    console.log(token,that.id)
    uni.request({
      url:"https://dmmall.sdbairui.com/api/Specialci/goodsShelves",
      data:{
        live_id:that.id
      },
      method:"POST",
      header:{
        "Authorization" : 'Bearer' + " " + token
      },
      success(res){
        console.log(res)
        that.list= res.data.data
      }
    })
    setInterval(function(){
       uni.request({
          url:"https://dmmall.sdbairui.com/api/Specialci/goodsShelves",
          data:{
            live_id:that.id
          },
          method:"POST",
          header:{
            "Authorization" : 'Bearer' + " " + token
          },
          success(res){
            console.log(res)
            that.list= res.data.data
          }
        })
    },6 * 1000)
    uni.request({
      url:"https://dmmall.sdbairui.com/api/Specialci/livingUserInfo",
      data:{
        live_id:that.id
      },
      method:"POST",
      header:{
        "Authorization" : 'Bearer' + " " + token
      },
      success(res){
        console.log(res)
        that.info = res.data.data
        // that.list= res.data.data
      }
    })
  },
  methods:{
    back(){
      uni.navigateBack({
          delta: 1
      });
    },
    guanzhu(){
      const token = uni.getStorageSync('token');
      let that = this
      console.log(token)
      uni.request({
        url:"https://dmmall.sdbairui.com/api/member/attentionMember",
        data:{
          member_id:that.info.user_id
        },
        method:"POST",
        header:{
          "Authorization" : 'Bearer' + " " + token
        },
        success(res){
          console.log(res)
          uni.request({
            url:"https://dmmall.sdbairui.com/api/Specialci/livingUserInfo",
            data:{
              live_id:that.id
            },
            method:"POST",
            header:{
              "Authorization" : 'Bearer' + " " + token
            },
            success(res){
              console.log(res)
              that.info = res.data.data
              // that.list= res.data.data
            }
          })
          // that.list= res.data.data
        }
      })
    },
    xuanzhong(i){
      let that = this
      uni.navigateTo({
          url: `/pageB/sdetails/index?id=${that.list[i].goods_id}&type=1`
      });

    },
    zuzhi(event){
      event.stopPropagation();  
    },
  }
};
</script>