components/index/zhibo-item/index.vue

@@ -1,14 +1,14 @@
 <template>
-    <view class="zhibo">
+    <view class="zhibo" @click="zhibo">
-        <image class="head"></image>
+        <image class="head" :src="image"></image>
         <view class="user">
             <view class="name">
                 <image></image>
-                <text>这是名字</text>
+                <text class="u-line-1" style="width:130rpx">{{name}}</text>
             </view>
             <view class="pingbi">
                 <image></image>
-                <text>屏蔽用户</text>
+                <text>1屏蔽用户</text>
             </view>
         </view>
     </view>    
@@ -70,6 +70,17 @@ export default {
         return {
 
         }
-    }
+    },
+    methods:{
+        zhibo(){
+            this.$u.route({
+                url:"/pageB/zhibo/index",
+               params:{
+                   url:this.url
+               } 
+            })
+        }
+    },
+    props:['name','image','url']
 }
 </script>

pageB/search/out.vue

@@ -19,11 +19,11 @@
         </swiper>
         <view v-else style=" display: flex;flex-direction: column;height: calc(100vh - 88rpx);">
             <view class="select">
-                <view  @click="sx(0)" data-type="xl">销量</view>
+                <view  @click="sx(0)" class="xz" data-type="xl">销量</view>
                 <view class="xz" @click="sx(1)">
                     <text>价格</text>
                     <view class="jiage">
-                        <view class="top"></view>
+                        <view class="top topxz"></view>
                         <view class="bottom bottomxz"></view>
                     </view>
                 </view>

pageB/zhibo/index.nvue

@@ -0,0 +1,126 @@
+<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"></image>
+      <view class="userinfo">
+        <text class="name">萨和登</text>
+        <text class="info">萨大赛大赛大赛大赛大</text>
+      </view>
+      <view class="guanzhu"><text style="color:#fff;font-size:24rpx">关注</text></view>
+    </view>
+    <view class="userlist" :style="{'top': top + 10 * rpx}">
+        <image class="userlistitem" v-for="(i,j) in [0,2]" :style="{'right': (-j * 15 * rpx) + 'px'}"></image>
+    </view>
+    
+  </view>
+</template>
+<style lang="scss" scoped>
+.userlistitem{
+    width: 60rpx;
+    height: 60rpx;
+    position: relative;
+    background-color: #0f0;
+    border-radius: 30rpx;
+
+}
+.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;
+  background-color: #0f0;
+}
+.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;
+}
+</style>
+<script>
+export default {
+  name: "zhibo",
+  data() {
+    return {
+      url: "",
+      top: 0,
+      height: 0,
+      rpx:0
+    };
+  },
+  onLoad(a) {
+    this.url = a.url;
+    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)
+      },
+    });
+  },
+};
+</script>

pages.json

@@ -80,6 +80,13 @@
 		{
 			"root": "pageB",
 			"pages": [
+				{
+					"path": "zhibo/index",
+					"style": {
+						"navigationStyle": "custom"
+						
+					}
+				},
 				{
 					"path": "follow/index",
 					"style": {
@@ -138,55 +145,17 @@
 				{
 					"path": "search/index",
 					"style": {
-						"app-plus": {
+						"navigationBarTitleText": "",
-							"titleNView": {
+						"navigationStyle": "custom"
-								"titleColor": "#333333",
+						
-								"backgroundColor": "#FFFFFF",
-								"buttons": [
-									{  
-										"type":"none",
-										"text":"搜索",
-										"float":"right",
-										"fontSize":"16",
-										"color": "#FF780F"
-									}
-								],
-								"searchInput": {
-									"align": "left",
-									"borderRadius": "15px",
-									"placeholder": "搜索您需要的商品",
-									"backgroundColor": "rgb(236,236,236)",
-									"disabled": false
-								}
-							}
-						}
 					}
 				},
 				{
 					"path": "search/out",
 					"style": {
-						"app-plus": {
+						"navigationBarTitleText": "",
-							"titleNView": {
+						"navigationStyle": "custom"
-								"titleColor": "#333333",
+						
-								"backgroundColor": "#FFFFFF",
-								"buttons": [
-									{  
-										"type":"none",
-										"text":"搜索",
-										"float":"right",
-										"fontSize":"16",
-										"color": "#FF780F"
-									}
-								],
-								"searchInput": {
-									"align": "left",
-									"borderRadius": "15px",
-									"placeholder": "搜索您需要的商品",
-									"backgroundColor": "rgb(236,236,236)",
-									"disabled": false
-								}
-							}
-						}
 					}
 				},
 				{
@@ -227,6 +196,7 @@
 							}
 						}
 					}
+				
 				},
 				{
 					"path": "cart/index",

pages/index/index.vue

@@ -39,10 +39,10 @@
 						<u-swiper mode="dot" :list="zhiboImageSwiper" name="adv_code"></u-swiper>
 						<view class="list">
 							<view>
-								<zhiboItem v-for="item in 10"></zhiboItem>
+								<zhiboItem v-for="item in tabLiveLists.filter((_, index) => !(index&1))" :key="item.live_id" :name="item.store_name" :image="item.cover_img" :url="item.url"></zhiboItem>
 							</view>
 							<view style="margin-left:20rpx">
-								<zhiboItem v-for="item in 10"></zhiboItem>
+								<zhiboItem v-for="item in tabLiveLists.filter((_, index) => index&1)" :key="item.live_id" :name="item.store_name" :image="item.cover_img" :url="item.url"></zhiboItem>
 							</view>
 						</view>
 					</view>
@@ -203,6 +203,7 @@
 				recommendList: [], // 推荐达人
 				indexImageSwiper: [],
 				zhiboImageSwiper: [],
+				tabLiveLists:[]
 			}
 		},
 		components: {
@@ -222,6 +223,7 @@
 			tabLiveList(){
 				this.$u.api.tabLiveList().then((res)=>{
 					console.log(res)
+					this.tabLiveLists = res.data
 				})
 			},
 			getSwiper() {