Skip to content

N
nyx
Commit 8d728f61 by jscat
Options

nyx weapp: 功能更新 

1. 实现多播放窗口
parent 465d59c3
正在显示 包含 472 行增加 和 354 行删除
app/nyx-dev/app.json
{
"pages": [
"pages/live/live",
"pages/live/live-info/live-info",
"pages/activity/activity",
"pages/share/share",
"pages/live/live",
"pages/live/live-info/live-info",
"pages/mall/order/order",
"pages/activity/activity-list/activity-list",
"pages/my/my-members/my-members",
......
app/nyx-dev/pages/live/live-info/live-info.wxss
.scroll-view_H{
position: relative;
width: 100%;
text-align: center;
transform: scale(1);
white-space: nowrap;
}
.scroll_item {
position: relative;
width: 100%;
height: 100%;
margin: 0;
transform-origin: 50% 0;
left: 0%;
display: inline-block;
/* border-radius: 20rpx !important ; */
overflow: hidden;
/* transform: scale(0.9); */
.page{
height: 100vh;
background: #F4F8FB;
}
.weui-cell__hd {
font-size: 0;
}
.weui-cell__hd image {
width: 100rpx;
height: 100rpx;
margin-right: 18px;
margin-left: 5px;
vertical-align: middle;
/* top: 0%; */
/* height: 72%; */
background-color: #fff;
}
.scroll_item:first-child{
margin: 0%;
left: 0;
}
.scroll_item:last-child{
margin: 0;
left: 0;
}
.scroll_item.selected{
/* transform: scale(0.9); */
border: solid 0px #ffcd54;
}
.scroll_item image {
width: 100%;
float: left;
margin-top: 0;
}
.note{
width: 100%;
/* position: fixed; */
background: #fff;
border-radius: 5rpx;
float: left;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.note-title{
font-size: 30rpx;
margin-left: 5%;
margin-right: 5%;
margin-top: 0;
text-align:justify;
}
.note-price{
font-size: 16px;
margin-left: 5%;
margin-right: 5%;
margin-top: 0;
text-align:justify;
color: #FF6600;
}
.note-content{
font-size: 32rpx;
/* 后期用于 '展开' 功能 */
/* overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical; */
margin-left: 5%;
margin-right: 4%;
/* margin-top: 20rpx; */
text-align:justify;
}
.note-row{
width: 100%;
display: flex;
flex-direction: row;
margin-bottom: 30rpx;
margin-top: 30rpx;
}
.note-column{
.weui-cell__ft_in-access {
padding-right:13px;
position:relative;
}
.userInfo{
width: 100%;
display: flex;
flex-direction: column;
margin-left: 30rpx;
align-items: center;
justify-content: center;
overflow: hidden;
}
.note-column-left{
width : 140rpx;
margin-left: 5%;
display: flex;
.thumb{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
overflow: hidden;
}
.writer-image{
width: 140rpx;
height: 140rpx;
.name{
margin: 30rpx;
}
/* start bottom style */
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
align-items: center;
}
.bottom_line {
width: 100%;
height: 2rpx;
background: lightgray;
}
/* 公屏 */
/*轮播控件 - start*/
.bottom_placeholder {
position: relative;
width: 100%;
height: 160rpx;
line-height: 10rpx;
}
.home-swiper {
width: 100%;
height: 400rpx;
}
.bottom_total {
position: fixed;
display: flex;
flex-direction: column;
bottom: 0;
width: 100%;
height: 160rpx;
line-height: 10rpx;
background: white;
}
.button-red {
background-color: #f44336; /* 红色 */
font-size: 14px;
}
.button-brown {
background-color: #D1A96E; /* 红色 */
}
button {
color: white;
text-align: center;
font-size:32rpx;
height: 2.6em;
line-height: 2.6em;
}
.placeholder{
margin-left: 20rpx;
margin-right: 20rpx;
text-align: center;
/* vertical-align: middle; */
padding: 0 10px;
line-height: 2.3em;
color: rgba(0,0,0);
}
/* justify-content: center;(水平居中) align-items: center;(垂直居中) */
.justify{
justify-content: center;
.slide-image {
width: 100%;
height: 100%;
}
.align{
align-items: center;
/*轮播控件 - end*/
.wrapper {
padding-top: 20rpx;
padding-bottom: 100rpx;
}
.list .items{
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
.message-list {
margin: 10rpx 30rpx 30rpx;
}
.items image{
width: 60rpx;
height: 60rpx;
margin-top: 20rpx;
font-size: 0;
.chat {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
.chat-con {
padding: 20rpx;
border-radius: 8rpx;
font-size: 30rpx;
color: #333;
position: relative;
}
.items text{
/* display: block; */
text-align: center;
margin-top: 0rpx;
margin-bottom: 20rpx;
padding: 0rpx;
font-size: 28rpx;
/* left-message */
.chat-l {
align-items: flex-start;
}
.list{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: 30rpx;
margin-right: 30rpx;
margin-top: 20rpx;
}
/* end bottom style */
/* 分享按钮 */
.share {
position: absolute;
background-size: 50rpx 50rpx;
opacity: 0;
border:none;
}
/* 克隆图片 */
.clone{width: 100%; display: flex; margin-top: 0rpx; align-items: center;}
.clone-left{width: 80%; }
.cloner-right{width: 20%;}
.clone-right image{
width: 40rpx;
height: 40rpx;
font-size: 0;
}
.weui-tabbar{
position:fixed;
bottom:0;
left:0;
right:0;
}
.cate-list{
display: inline;
/* margin: 15rpx 22rpx; */
text-align: center;
font-size: 32rpx;
/* color: #9d9d9d; */
background: #F4F4F4;
margin-right: 20rpx;
padding-right: 10rpx;
padding-top: 10rpx;
padding-bottom: 10rpx;
}
.cate-list.on {
color: #FF6600;
font-weight: bold;
/*
border:1px solid #FF6600;
border-radius: 6rpx;
*/
}
\ No newline at end of file
.avater {
width: 90rpx;
height: 90rpx;
position: relative;
}
.avater>image {
width: 100%;
height: 100%;
display: block;
border-radius: 10%;
}
.chat-con-l {
background-color: #fff;
margin-left: 120rpx;
margin-top: -50rpx;
}
.chat-con-l::after {
content: '';
border-width: 20rpx;
border-style: solid;
border-color: transparent #fff transparent transparent;
position: absolute;
top: 18rpx;
left: -28rpx;
}
/* right-message */
.chat-r {
align-items: flex-end;
}
.chat-con-r {
background-color: #7dca4a;
margin-right: 120rpx;
margin-top: 35rpx;
}
.chat-con-r::after {
content: '';
border-width: 20rpx;
border-style: solid;
border-color: transparent transparent transparent #7dca4a;
position: absolute;
top: 18rpx;
right: -28rpx;
}
.avater-r {
float: right;
}
/* input-message */
.message-input {
position: fixed;
bottom: 0;
width: 100%;
background-color: #efefef;
padding: 20rpx 0 0;
z-index: 99;
}
.message-input>input {
font-size: 30rpx;
border: solid #ddd 1rpx;
width: 71%;
min-height: 60rpx;
height: 100%;
margin-left: 20rpx;
padding: 5rpx 10rpx;
border-radius: 8rpx;
margin-bottom: 15rpx;
color: #333;
background-color: #fff;
}
.showSend{
width:65% !important;
}
.showAdd {
left:73% !important;
}
.message-input>button {
width: 100rpx;
height: 60rpx;
background-color: #7dca4a;
font-size: 28rpx;
color: #fff;
margin-top: -82rpx;
float: right;
margin-right: 20rpx;
padding: 0;
line-height: 60rpx;
}
.input-m {
width: 500rpx;
max-width: 500rpx;
height: 70rpx;
max-height: 70rpx;
border: solid red 1px;
margin-left: 80rpx;
position: relative;
display: inline-block;
top: -80rpx;
overflow-y: scroll;
background-color: #fff;
}
.c-date {
font-size: 26rpx;
color: #999;
padding: 10rpx 0 30rpx;
text-align: center;
width: 100%;
}
.message-input .input-img {
width: 60rpx;
height: 60rpx;
}
#rec {
position: absolute;
top: 26rpx;
left: 10rpx;
}
#face {
position: absolute;
top: 20rpx;
left: 80%;
}
#add {
position: absolute;
top: 20rpx;
left: 90%;
}
.nick-name-l {
position: absolute;
top: -2%;
left: 138%;
z-index: 2;
font-size: 24rpx;
color: #666;
width: 200rpx;
}
.nick-name-r {
position: absolute;
top: -10%;
right: -25%;
z-index: 2;
font-size: 24rpx;
color: #666;
width: 200rpx;
}
.media-img {
width: 120rpx;
height: 120rpx;
display: inline-block;
}
.media-box {
background-color: #f0f0f0;
border-top: solid #e1e1e1 1rpx;
}
.media-list {
width: 150rpx;
height: 150rpx;
padding: 10px;
text-align: center;
display: inline-block;
}
.media-list>view {
font-size: 26rpx;
color: #666;
}
.emotion-box {
background-color: #f0f0f0;
padding-bottom: 40rpx;
border-top: solid #e1e1e1 1rpx;
}
.emotion-list {
margin: 20rpx auto 0;
text-align: center;
}
.emotion-list>image {
width: 55rpx;
height: 55rpx;
margin: 15rpx 30rpx;
}
.emotion-padd {
padding-bottom: 77% !important;
}
.media-padd{
padding-bottom: 42% !important;
}
.message-img {
width: 300rpx;
height: 200rpx;
display: inline-block;
vertical-align: middle;
}
.tab-title{
height: 60rpx;
background: #fff;
border-top: 1px solid #fafafa;
padding: 16rpx;
line-height: 60rpx;
display:flex;
flex-direction: row;
}
.tab-title view{
flex:auto;
text-align:center;
}
.tab-content{
height: 60rpx;
background: #fff;
padding: 16rpx;
}
.rank-info{
background: #fff;
}
.border-tottom{
border-bottom:1rpx solid red;
}
.show{display:block;}
.hidden{display:none;}
/* rank-info */
.rank{width: 100%; display: flex; margin-top: 0rpx; align-items: center;}
/* .rank-left{width: 50%; text-align: center;}
.rank-right{width: 50%; display: flex; justify-content: center;} */
.rank-left{width: 50%; padding-left:100rpx; margin-bottom: 12rpx;}
.rank-right{width: 50%; display: flex; padding-left:100rpx;}
.rank-right image{
width: 40rpx;
height: 40rpx;
font-size: 0;
}
.rank-row{
display: flex;
flex-direction: row;
}
\ No newline at end of file
app/nyx-dev/pages/live/live.js
......@@ -60,6 +60,25 @@ Page({
//活动类型
activityType: "00-饮事",
lives: [
{
sid: "134",
note_image: "https://930-test-sh.oss-cn-shanghai.aliyuncs.com/user-dir/wx72555e77d9e5cee2.o6zAJszSNHnFKy8FTV5dg-Z7XDzQ.WaSJaxPezrVxcdaf58fbf674e7d3be131826ff708fa6.jpg",
title: "巅峰赛第一",
num_watcher: 1029,
streamer_name: "Azz·口袋",
streamer_logo: "../../icon/icon_avatar3.png"
},
{
sid: "123",
note_image: "https://930-test-sh.oss-cn-shanghai.aliyuncs.com/user-dir/wx72555e77d9e5cee2.o6zAJszSNHnFKy8FTV5dg-Z7XDzQ.WaSJaxPezrVxcdaf58fbf674e7d3be131826ff708fa6.jpg",
title: "单排84-101 把把C 不混",
num_watcher: 2040,
streamer_name: "六尾【混子】",
streamer_logo: "../../icon/icon_avatar3.png"
},
],
},
switchCategory(e) {
......
app/nyx-dev/pages/live/live.wxml
<wxs module="tutil" src="./../../utils/date.wxs"></wxs>
<!--
现场模快
需求重点: 谁看, 看什么,
需求目标: 专业+好玩
Req1-11_25
1. 现场标签: 图片, 名字, 在看人数, 主播
2. 搜索形式: 城市 + 搜索框(店名)
3. 展示形式: 我关注的人(id), 在看自动倒序()
4. 播放形式: 图文
-->
<view class="page">
<!-- 搜索框 -->
<!--refer https://blog.csdn.net/weixin_44022446/article/details/86438015 -->
......@@ -74,13 +85,6 @@
</view>
<!-- 导航栏 -->
<view class="navBar" >
<scroll-view class="navBar-box" scroll-x="true" style="white-space: nowrap; display:flex ">
<view class="cate-list {{curIndex==index?'on':''}}" wx:for="{{category}}"
wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}"
bindtap="switchCategory">{{item.name}}</view>
</scroll-view>
</view>
<!-- 文章列表 -->
<!--
......@@ -92,33 +96,28 @@
-->
<!-- Content: refer to 有品·优惠券 + 点评(可使用) -->
<view class="coupon-list" wx:for="{{activities}}" wx:for-item="item" wx:key="{{index}}">
<view class="item stamp stamp01" style="192rpx;">
<view class="coupon-list" wx:for="{{lives}}" wx:for-item="item" wx:key="{{index}}">
<view class="item stamp stamp01">
<!-- 商品信息 -->
<view class="note-row">
<navigator url='{{item.url}}&num_like={{item.num_like}}' >
<image class="writer-image" src="{{item.note_image[0]}}"/>
<navigator url='live-info/live-info?sid={{item.sid}}&streamer_name={{item.streamer_name}}' >
<image class="writer-image" src="{{item.note_image}}"/>
</navigator>
<view class="note-column">
<navigator url='{{item.url}}&num_like={{item.num_like}}' >
<navigator url='live-info/live-info?sid={{item.sid}}&streamer_name={{item.streamer_name}}' >
<!-- 商家信息 -->
<text>{{item.title}}</text>
<!-- 商品价格 -->
<span>
<view class="price-row">
<view class="sub-price">￥{{item.unit_price}}</view>
<view class="sub-price">{{item.num_watcher}}人在看</view>
</view>
</span>
<!-- 活动日期 -->
<span class="desc">
{{tutil.formatDate_mdw_interval(item.start_datetime, item.end_datetime)}}
</span>
</navigator>
<!-- 活动点赞 -->
<!-- <span>{{tutil.formatNumberLike(item.num_like)}}</span> -->
<!-- 商家名称 -->
<view class="note-row align">
<view class="desc-member-left">{{item.member_name}}</view>
<view class="note-row align">
<view class="desc-member-left">
<image src="{{item.note_image}}"/>{{item.streamer_name}}</view>
<!-- todo 店铺功能尚未实现 -->
<!-- <view class="desc-member-right">进店 ></view> -->
</view>
......
app/nyx-dev/pages/live/live.wxss
......@@ -66,8 +66,8 @@
}
/* coupon css */
.coupon-list{width: 100%; margin: 0 auto}
.coupon-list .item{width: 100%; height: 300rpx;}
.coupon-list{width: 100%; margin: 0 auto; padding-top: 10rpx;}
.coupon-list .item{width: 100%;}
.coupon-list .item .float-li{width: 100%; height: 100%; border-right: 2rpx dashed rgba(255,255,255,.3)}
.coupon-list .item .float-li-right{width: 220rpx; padding-right: 20rpx; height:100%; color: #fff}
......@@ -384,6 +384,11 @@
color: #a7a7a7;
margin-right: 20rpx;
}
.desc-member-left image{
width: 40rpx;
height: 40rpx;
font-size: 0;
}
.desc-member-right {
font-size: 30rpx;
......
app/nyx-dev/pages/share/share.js
......@@ -48,7 +48,7 @@ Page({
//格式示例数据，可为空
allContentList: [],
num: 0,
sid: "key",
sid: "mall",
chatUserInfo: {},
scrollTop: 0,
......@@ -379,7 +379,7 @@ Page({
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
//app.closeSocket();
app.closeSocket();
console.log('===onUnload webSocket 连接关闭事件。')
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论