xbx #86

Merged
theluyuan merged 5 commits from xbx into master 2020-07-28 20:49:58 +08:00
5 changed files with 162 additions and 53 deletions

View File

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

View File

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

126
pageB/zhibo/index.nvue Normal file
View File

@ -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>

View File

@ -80,6 +80,13 @@
{ {
"root": "pageB", "root": "pageB",
"pages": [ "pages": [
{
"path": "zhibo/index",
"style": {
"navigationStyle": "custom"
}
},
{ {
"path": "follow/index", "path": "follow/index",
"style": { "style": {
@ -138,55 +145,17 @@
{ {
"path": "search/index", "path": "search/index",
"style": { "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", "path": "search/out",
"style": { "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", "path": "cart/index",

View File

@ -39,10 +39,10 @@
<u-swiper mode="dot" :list="zhiboImageSwiper" name="adv_code"></u-swiper> <u-swiper mode="dot" :list="zhiboImageSwiper" name="adv_code"></u-swiper>
<view class="list"> <view class="list">
<view> <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>
<view style="margin-left:20rpx"> <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> </view>
</view> </view>
@ -203,6 +203,7 @@
recommendList: [], // recommendList: [], //
indexImageSwiper: [], indexImageSwiper: [],
zhiboImageSwiper: [], zhiboImageSwiper: [],
tabLiveLists:[]
} }
}, },
components: { components: {
@ -222,6 +223,7 @@
tabLiveList(){ tabLiveList(){
this.$u.api.tabLiveList().then((res)=>{ this.$u.api.tabLiveList().then((res)=>{
console.log(res) console.log(res)
this.tabLiveLists = res.data
}) })
}, },
getSwiper() { getSwiper() {