From 87ca01dfca6636564222f366040fa5312e8a90de Mon Sep 17 00:00:00 2001 From: taiyuan Date: Fri, 16 Oct 2020 16:50:48 +0800 Subject: [PATCH] 优惠券列表 --- packageA/pages/quan/quan.js | 144 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ packageA/pages/quan/quan.json | 7 +++++++ packageA/pages/quan/quan.wxml | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ packageA/pages/quan/quan.wxss | 512 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 714 insertions(+), 0 deletions(-) create mode 100644 packageA/pages/quan/quan.js create mode 100644 packageA/pages/quan/quan.json create mode 100644 packageA/pages/quan/quan.wxml create mode 100644 packageA/pages/quan/quan.wxss diff --git a/packageA/pages/quan/quan.js b/packageA/pages/quan/quan.js new file mode 100644 index 0000000..28ce466 --- /dev/null +++ b/packageA/pages/quan/quan.js @@ -0,0 +1,144 @@ +// 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 + }); + }, + clickShare() { + this.setData({ + hiddenPopup: false + }); + }, + select(e) { + var index = e.target.dataset.index; + this.setData({ + hiddenPopup: true + }); + }, +}) \ No newline at end of file diff --git a/packageA/pages/quan/quan.json b/packageA/pages/quan/quan.json new file mode 100644 index 0000000..4c964d8 --- /dev/null +++ b/packageA/pages/quan/quan.json @@ -0,0 +1,7 @@ +{ + "usingComponents": { + "nodata": "/components/nodata/nodata" + }, + "navigationBarTitleText": "优惠券列表", + "enablePullDownRefresh": false +} \ No newline at end of file diff --git a/packageA/pages/quan/quan.wxml b/packageA/pages/quan/quan.wxml new file mode 100644 index 0000000..2bef9b4 --- /dev/null +++ b/packageA/pages/quan/quan.wxml @@ -0,0 +1,51 @@ + + + + + + + {{item}} + + + + + + + 暂无数据 + + + + + + 全场通用券 + 限时使用：2012-12-31 至 2013-12-31 + + ￥25 + + + 全场任意产品通用 + 分享 + + + + + + - 已全部加载 - + + + + + diff --git a/packageA/pages/quan/quan.wxss b/packageA/pages/quan/quan.wxss new file mode 100644 index 0000000..c0e2276 --- /dev/null +++ b/packageA/pages/quan/quan.wxss @@ -0,0 +1,512 @@ +/* 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: 100%; */ +} +.list { + box-sizing: border-box; + height: calc(100% - 78rpx); + background-color: #f2f2f2; + padding: 20rpx 20rpx 0 20rpx; + /* 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; + flex: 1; +} +.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; +} */ + + + +.coupons { + color: white; + position: relative; + padding: 28rpx 24rpx 28rpx 46rpx; +} +.coupons.bg-red { + background: #F2F2F2 radial-gradient(circle at 0px 50%, transparent 10px, #FF6768 0) top; +} + + + + +.coupons ~ .coupons { + margin-top: 20rpx; +} + +.coupon-hd { + word-break: break-all; + line-height: 1.4; +} +.coupon-md { + font-size: 26rpx; + position: relative; + padding-right: 200rpx; +} +.coupon-ft { + line-height: 1.4; +} +.price { + position: absolute; + right: 24rpx; +} + +.coupons .btn-share { + flex-shrink: 0; + border-radius: 30rpx; + padding: 8rpx 40rpx; + background-color: red; +} + + +.popup-container { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,.5); +} +.popup { + background-color: white; + border-radius: 16rpx; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 500rpx; + overflow: hidden; +} +.popup-img { + display: block; + width: 80rpx; + height: 80rpx; + margin-right: 20rpx; + flex-shrink: 0; +} +.popup-item { + display: flex; + align-items: center; + padding: 20rpx 90rpx; +} +.h70 { + height: 70rpx; +} + +.active { + background-color: #f2f2f2; +} + + + + -- libgit2 0.21.4