From 136c6bae197d3ca499b5e7c7d23ca645e1fbe295 Mon Sep 17 00:00:00 2001 From: taiyuan Date: Sat, 17 Oct 2020 17:59:48 +0800 Subject: [PATCH] 直播列表分享 --- packageA/pages/live_share/live_share.js | 133 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ packageA/pages/live_share/live_share.json | 6 ++++++ packageA/pages/live_share/live_share.wxml | 37 +++++++++++++++++++++++++++++++++++++ packageA/pages/live_share/live_share.wxss | 430 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 606 insertions(+), 0 deletions(-) create mode 100644 packageA/pages/live_share/live_share.js create mode 100644 packageA/pages/live_share/live_share.json create mode 100644 packageA/pages/live_share/live_share.wxml create mode 100644 packageA/pages/live_share/live_share.wxss diff --git a/packageA/pages/live_share/live_share.js b/packageA/pages/live_share/live_share.js new file mode 100644 index 0000000..c041c61 --- /dev/null +++ b/packageA/pages/live_share/live_share.js @@ -0,0 +1,133 @@ +// packageA//pages/goods_share/goods_share.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + // tab + tab: ['秒杀','拼单','促销','专享礼包'], + currentIndex: 0, + //促销页tab + tab2: ['正在直播','即将开始','精彩回放'], + currentIndex2: 0, + //秒杀和拼单底部tab + currentIndex3: 0, + // 控制价格 + active1: false, + // 控制佣金 + active2: false, + //popup + hiddenPopup: true, + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function (options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady: function () { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow: function () { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide: function () { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload: function () { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + // onPullDownRefresh: function () { + + // }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom: function () { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage: function () { + + }, + + // 点击价格排序 + sort1() { + if(this.data.active2) { + this.setData({ + active2: !this.data.active2 + }); + }; + this.setData({ + active1: !this.data.active1 + }); + + }, + // 点击佣金排序 + sort2() { + if(this.data.active1) { + this.setData({ + active1: !this.data.active1 + }); + }; + this.setData({ + active2: !this.data.active2 + }); + }, + // 点击tab + clickTab(e) { + this.setData({ + currentIndex: e.target.dataset.index, + }); + }, + // 点击促销页tab + clickTab2(e) { + this.setData({ + currentIndex2: e.target.dataset.index, + }); + }, + // 点击秒杀和拼单底部tab + clickTab3(e) { + this.setData({ + currentIndex3: e.target.dataset.index, + }); + }, + // 关闭弹出层 + closePopup() { + this.setData({ + hiddenPopup: true + }); + }, + // 显示弹出层 + showPopup() { + this.setData({ + hiddenPopup: false + }); + }, +}) \ No newline at end of file diff --git a/packageA/pages/live_share/live_share.json b/packageA/pages/live_share/live_share.json new file mode 100644 index 0000000..0ad7ff9 --- /dev/null +++ b/packageA/pages/live_share/live_share.json @@ -0,0 +1,6 @@ +{ + "usingComponents": { + "nodata": "/components/nodata/nodata" + }, + "enablePullDownRefresh": false +} \ No newline at end of file diff --git a/packageA/pages/live_share/live_share.wxml b/packageA/pages/live_share/live_share.wxml new file mode 100644 index 0000000..e576f3d --- /dev/null +++ b/packageA/pages/live_share/live_share.wxml @@ -0,0 +1,37 @@ + + + + + + + {{item}} + + + + + + + 暂无数据 + + + + + + + 商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称 + 直播时间：2020-12-31 18:00 + 主播：何大大 + 分享 + + + + + - 已全部加载 - + + + + diff --git a/packageA/pages/live_share/live_share.wxss b/packageA/pages/live_share/live_share.wxss new file mode 100644 index 0000000..a9a2026 --- /dev/null +++ b/packageA/pages/live_share/live_share.wxss @@ -0,0 +1,430 @@ +/* packageA//pages/goods_share/goods_share.wxss */ +.red { + color: #FE6867; +} +.gray { + color: #7b7b7b; +} +.w25 { + width: 25%; +} +.w50 { + width: 50%; +} +.w164 { + width: 164rpx; +} +.bold { + font-weight: bold; +} +page { + background-color: #f2f2f2; + height: 100%; +} +.container { + background-color: white; + height: 100%; +} +.search-container { + display: flex; + padding: 26rpx 20rpx; + border-bottom: 2rpx solid #f8f8f8; +} +.input-container { + flex: 1; + border-radius: 6rpx 0 0 6rpx; + overflow: hidden; +} +.search { + background-color: #f0f0f0; + padding: 10rpx 20rpx; + font-size: 28rpx; +} +.btn-search { + background-color: #FE6867; + color: white; + padding: 0 30rpx; + display: flex; + align-items: center; + border-radius: 0 6rpx 6rpx 0; +} +.title { + display: flex; + font-size: 30rpx; + border-bottom: 2rpx solid #f8f8f8; +} +.title .iconfont { + color: #ccc; + font-size: 16rpx; + margin-left: 8rpx; +} +.title-item { + width: 25%; + box-sizing: border-box; + text-align: center; + padding: 20rpx; + position: relative; +} +.title-item.active { + color: #FE6867; + font-weight: bold; +} +.title-item.active:after { + content:''; + position: absolute; + width: 50%; + height: 4rpx; + background-color: #FE6867; + left: 0; + right: 0; + bottom: 0; + margin: 0 auto; +} +.list-container { + height: calc(100% - 118rpx); +} +.list { + box-sizing: border-box; + height: calc(100% - 82rpx); + background-color: #f2f2f2; + /* padding-bottom: 102rpx; */ +} +.list.active1 { + height: calc(100% - 82rpx - 78rpx); + padding-bottom: 0; +} +.list.active2 { + padding-bottom: 0; +} +.list-item { + display: flex; + padding: 20rpx; + border-bottom: 2rpx solid #f8f8f8; + background-color: white; +} +.img-container { + background-color: #f0f0f0; + width: 280rpx; + height: 248rpx; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} +.img-container:after { + font-family: iconfont; + content: '\e8c1'; + color: #bbb; + font-size: 80rpx; +} + + +.img-container.live:before { + content: '\e664'; +} +.img-container.coming:before { + content: '\e608'; +} +.img-container.playback:before { + content: '\e603'; +} +.img-container.live:before, +.img-container.coming:before, +.img-container.playback:before { + font-family: iconfont; + background-color: #FE6867; + color: white; + width: 50rpx; + height: 50rpx; + line-height: 50rpx; + text-align: center; + border-radius: 50%; + position: absolute; + left: 10rpx; + top: 10rpx; +} +.details { + flex: 1; + padding-left: 20rpx; +} +.btn-share { + box-sizing: border-box; + display: inline-block; + background-color: #FE6867; + color: white; + padding: 8rpx 30rpx; + border-radius: 6rpx; + text-align: center; +} +.pdt10 { + padding-top: 10rpx; +} +.pdt14 { + padding-top: 14rpx; +} +.pdtb6 { + padding-top: 6rpx; + padding-bottom: 6rpx; +} +.pdtb8 { + padding-top: 8rpx; + padding-bottom: 8rpx; +} +.pdl20 { + padding-left: 104rpx; +} + + +.no-more { + line-height: 3; + color: #ccc; + /* background-color: #f2f2f2; */ +} +.nodata { + text-align: center; + background-color: #f2f2f2; +} +.progress-container { + width: 55%; + padding-right: 10rpx; + position: relative; + text-align: center; +} +.retail { + color: #7b7b7b; + text-decoration: line-through; + font-size: 22rpx; + padding-left: 20rpx; +} +.name { + height: 76rpx; + overflow: hidden; +} + +.percent { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + color: white; +} +.tabbar { + position: fixed; + width: 100%; + bottom: 0; + background-color: white; +} +.tabbar:after { + position: absolute; + content: ''; + width: 2rpx; + height: 50%; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + background-color: #f0f0f0; +} +.tabbar-item { + width: 50%; + text-align: center; + padding-top: 30rpx; + padding-bottom: 30rpx; +} +.tabbar-item .iconfont { + margin-right: 10rpx; +} +.tabbar-item.active { + color: #FE6867; +} + + +.group-type, +.group-num { + position: relative; + font-size: 22rpx; +} +.group-type:before, +.group-num:before { + font-family: iconfont; +} +.group-type:before { + content: '\e66a'; + color: white; + background-color: #FE6867; + position: absolute; + left: 0; + top: 0; + bottom: 0; + padding-left: 6rpx; + padding-right: 10rpx; + line-height: 30rpx; +} +.group-num:before { + padding-right: 6rpx; +} +.group-num:before { + content: '\e694'; + position: relative; +} +.group-num { + color: white; + background-color: #FE6867; + border-radius: 34rpx; + padding-left: 10rpx; + padding-right: 10rpx; + margin-right: 14rpx; +} +.group-type { + color: #FE6867; + border: 2rpx solid #FE6867; + padding-left: 42rpx; + padding-right: 4rpx; + border-radius: 6rpx; +} + +.badge { + color: white; + padding: 0 20rpx; + border-radius: 6rpx; + background-color: #FE6867; + margin-right: 10rpx; +} + +.subTab-title { + text-align: center; + justify-content: center; + align-items: center; + font-size: 28rpx; +} +.subTab-list { + padding: 20rpx; +} +.subTab-titleItem { + box-sizing: border-box; + width: calc(100% / 3); + padding: 20rpx 40rpx; + background-color: white; + border-right: 2rpx solid #f8f8f8; +} +.subTab-titleItem:last-child { + border-right: none; +} +.subTab-titleItem.active { + background-color: #FE6867; + color: white; +} +.subTab-item { + padding: 20rpx; + border-bottom: 2rpx solid #f8f8f8; + background-color: white; + border-radius: 8rpx; + box-shadow: 0 8px 12px #e7e9eb; +} +.subTab-item ~ .subTab-item { + margin-top: 20rpx; +} +.pdv10 { + padding-top: 10rpx; + padding-bottom: 10rpx; +} +.pdv20 { + padding-top: 20rpx; + padding-bottom: 20rpx; +} +.pdb10 { + padding-bottom: 10rpx; +} +.pdb20 { + padding-bottom: 20rpx; +} +.bdr-b { + border-bottom: 2rpx solid #f8f8f8; +} +.dash-b { + border-bottom: 2rpx dashed #ddd; +} +.btn-container { + display: flex; + align-items: flex-end; + font-size: 26rpx; +} + + +/* .popup-container { + content:''; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 3; + background-color: rgba(0,0,0,.6); + display: flex; + align-items: center; + justify-content: center; +} +.popup { + width: 90%; +} +.popup-content { + box-sizing: border-box; + width: 100%; + background-color: white; + padding: 0 20rpx; + border-radius: 10rpx; + max-height: 1038rpx; +} +.icon-close { + font-size: 60rpx; + color: white; +} +.popup-btn { + padding-top: 30rpx; +} + +.popup-title { + /* font-size: 28rpx; */ + /* font-weight: bold; + padding: 20rpx 0; +} +.popup-title2 { */ + /* padding: 10rpx 0; */ + /* padding-bottom: 8rpx; +} +.popup-title3 { + padding-left: 34rpx; + font-size: 30rpx; +} +.popup-list { + max-height: 602rpx; + overflow-y: auto; +} + + +radio .wx-radio-input { + width: 28rpx; + height: 28rpx; +} + + +radio .wx-radio-input.wx-radio-input-checked { + background-color: #FE6867; + border-color: #FE6867; +} +radio .wx-radio-input.wx-radio-input-checked::before{ + color: white; +} + +.popup-content.active { + max-height: 982rpx; + overflow: auto; +} */ + + + + + -- libgit2 0.21.4