Commit d50408395140301cb2c983763a908079f248f341
1 parent
f077555a
充值有礼和详情页
Showing
8 changed files
with
554 additions
and
0 deletions
packageA/pages/chongzhi/chongzhi.js
0 → 100644
| 1 | +// packageA//pages/chongzhi/chongzhi.js | ||
| 2 | +Page({ | ||
| 3 | + | ||
| 4 | + /** | ||
| 5 | + * 页面的初始数据 | ||
| 6 | + */ | ||
| 7 | + data: { | ||
| 8 | + currentIndex: 0, | ||
| 9 | + }, | ||
| 10 | + | ||
| 11 | + /** | ||
| 12 | + * 生命周期函数--监听页面加载 | ||
| 13 | + */ | ||
| 14 | + onLoad: function (options) { | ||
| 15 | + | ||
| 16 | + }, | ||
| 17 | + | ||
| 18 | + /** | ||
| 19 | + * 生命周期函数--监听页面初次渲染完成 | ||
| 20 | + */ | ||
| 21 | + onReady: function () { | ||
| 22 | + | ||
| 23 | + }, | ||
| 24 | + | ||
| 25 | + /** | ||
| 26 | + * 生命周期函数--监听页面显示 | ||
| 27 | + */ | ||
| 28 | + onShow: function () { | ||
| 29 | + | ||
| 30 | + }, | ||
| 31 | + | ||
| 32 | + /** | ||
| 33 | + * 生命周期函数--监听页面隐藏 | ||
| 34 | + */ | ||
| 35 | + onHide: function () { | ||
| 36 | + | ||
| 37 | + }, | ||
| 38 | + | ||
| 39 | + /** | ||
| 40 | + * 生命周期函数--监听页面卸载 | ||
| 41 | + */ | ||
| 42 | + onUnload: function () { | ||
| 43 | + | ||
| 44 | + }, | ||
| 45 | + | ||
| 46 | + /** | ||
| 47 | + * 页面相关事件处理函数--监听用户下拉动作 | ||
| 48 | + */ | ||
| 49 | + onPullDownRefresh: function () { | ||
| 50 | + | ||
| 51 | + }, | ||
| 52 | + | ||
| 53 | + /** | ||
| 54 | + * 页面上拉触底事件的处理函数 | ||
| 55 | + */ | ||
| 56 | + onReachBottom: function () { | ||
| 57 | + | ||
| 58 | + }, | ||
| 59 | + | ||
| 60 | + /** | ||
| 61 | + * 用户点击右上角分享 | ||
| 62 | + */ | ||
| 63 | + onShareAppMessage: function () { | ||
| 64 | + | ||
| 65 | + }, | ||
| 66 | + | ||
| 67 | + onClickTab(e) { | ||
| 68 | + this.setData({ | ||
| 69 | + currentIndex: e.target.dataset.index | ||
| 70 | + }); | ||
| 71 | + }, | ||
| 72 | +}) | ||
| 0 | \ No newline at end of file | 73 | \ No newline at end of file |
packageA/pages/chongzhi/chongzhi.json
0 → 100644
packageA/pages/chongzhi/chongzhi.wxml
0 → 100644
| 1 | +<view class="container"> | ||
| 2 | + <!-- 封面 --> | ||
| 3 | + <view class="banner-container"><image class="img-block"></image></view> | ||
| 4 | + <!-- 列表 --> | ||
| 5 | + <view> | ||
| 6 | + <!-- 标题 --> | ||
| 7 | + <view class="title flex" bindtap="onClickTab"> | ||
| 8 | + <view class="t-item {{currentIndex == 0 ? 'active':''}}" data-index="0">待核销</view> | ||
| 9 | + <view class="t-item {{currentIndex == 1 ? 'active':''}}" data-index="1">已核销</view> | ||
| 10 | + </view> | ||
| 11 | + <!-- 内容 --> | ||
| 12 | + <view class="list"> | ||
| 13 | + | ||
| 14 | + <view class="l-item"> | ||
| 15 | + <!-- 上 --> | ||
| 16 | + <view class="top flex"> | ||
| 17 | + <!-- 左 --> | ||
| 18 | + <view class="left"> | ||
| 19 | + <image class="img-block"></image> | ||
| 20 | + </view> | ||
| 21 | + <!-- 右 --> | ||
| 22 | + <view class="right"> | ||
| 23 | + <view class="fs28 ellipsis-2 txt-justify">充值方案名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称</view> | ||
| 24 | + <view> | ||
| 25 | + <view class="price fs24">零售价：<text>￥</text>100.00</view> | ||
| 26 | + <view class="date fs24">兑换截止日期：2020-09-17 17:00:00</view> | ||
| 27 | + </view> | ||
| 28 | + </view> | ||
| 29 | + </view> | ||
| 30 | + <!-- 下 --> | ||
| 31 | + <view class="bottom"> | ||
| 32 | + <text class="btn">立即使用</text> | ||
| 33 | + </view> | ||
| 34 | + </view> | ||
| 35 | + | ||
| 36 | + | ||
| 37 | + <nodata nodataContainer="nodata">暂无数据</nodata> | ||
| 38 | + <view class="no-more t-c">- 已全部加载 -</view> | ||
| 39 | + | ||
| 40 | + | ||
| 41 | + </view> | ||
| 42 | + </view> | ||
| 43 | +</view> | ||
| 0 | \ No newline at end of file | 44 | \ No newline at end of file |
packageA/pages/chongzhi/chongzhi.wxss
0 → 100644
| 1 | +/* packageA/pages/chongzhi/chongzhi.wxss */ | ||
| 2 | +@charset "utf-8"; | ||
| 3 | + | ||
| 4 | +page { | ||
| 5 | + background-color: #f2f2f2; | ||
| 6 | +} | ||
| 7 | + | ||
| 8 | +.banner-container { | ||
| 9 | + height: 400rpx; | ||
| 10 | +} | ||
| 11 | + | ||
| 12 | + | ||
| 13 | +.title { | ||
| 14 | + background-color: white; | ||
| 15 | + position: relative; | ||
| 16 | +} | ||
| 17 | + | ||
| 18 | +.title::after { | ||
| 19 | + content: ''; | ||
| 20 | + position: absolute; | ||
| 21 | + width: 2rpx; | ||
| 22 | + height: 50%; | ||
| 23 | + background-color: #f5f5f5; | ||
| 24 | + left: 0; | ||
| 25 | + right: 0; | ||
| 26 | + top: 0; | ||
| 27 | + bottom: 0; | ||
| 28 | + margin: auto; | ||
| 29 | +} | ||
| 30 | + | ||
| 31 | +.t-item { | ||
| 32 | + width: 50%; | ||
| 33 | + text-align: center; | ||
| 34 | + line-height: 100rpx; | ||
| 35 | + font-size: 30rpx; | ||
| 36 | + position: relative; | ||
| 37 | +} | ||
| 38 | + | ||
| 39 | +.t-item.active { | ||
| 40 | + color: #FE6867; | ||
| 41 | + font-weight: bold; | ||
| 42 | +} | ||
| 43 | + | ||
| 44 | +.t-item.active::after { | ||
| 45 | + content: ''; | ||
| 46 | + position: absolute; | ||
| 47 | + width: 10%; | ||
| 48 | + height: 4rpx; | ||
| 49 | + background-color: #FE6867; | ||
| 50 | + bottom: 0; | ||
| 51 | + left: 0; | ||
| 52 | + right: 0; | ||
| 53 | + margin: 0 auto; | ||
| 54 | +} | ||
| 55 | + | ||
| 56 | + | ||
| 57 | +.list { | ||
| 58 | + padding: 0 20rpx; | ||
| 59 | + overflow: hidden; | ||
| 60 | +} | ||
| 61 | + | ||
| 62 | +.l-item { | ||
| 63 | + padding: 20rpx; | ||
| 64 | + background-color: white; | ||
| 65 | + border-radius: 16rpx; | ||
| 66 | + margin-top: 20rpx; | ||
| 67 | +} | ||
| 68 | +.img-block { | ||
| 69 | + display: block; | ||
| 70 | + width: 100%; | ||
| 71 | + height: 100%; | ||
| 72 | + background-color: gray; | ||
| 73 | +} | ||
| 74 | + | ||
| 75 | + | ||
| 76 | +.top { | ||
| 77 | + padding-bottom: 20rpx; | ||
| 78 | + border-bottom: 2rpx solid #f2f2f2; | ||
| 79 | +} | ||
| 80 | +.bottom { | ||
| 81 | + padding-top: 20rpx; | ||
| 82 | + text-align: right; | ||
| 83 | +} | ||
| 84 | +.left { | ||
| 85 | + width: 200rpx; | ||
| 86 | + height: 200rpx; | ||
| 87 | + flex-shrink: 0; | ||
| 88 | + padding-right: 20rpx; | ||
| 89 | +} | ||
| 90 | +.right { | ||
| 91 | + display: flex; | ||
| 92 | + flex-direction: column; | ||
| 93 | + justify-content: space-between; | ||
| 94 | +} | ||
| 95 | + | ||
| 96 | +.price { | ||
| 97 | + text-decoration:line-through; | ||
| 98 | +} | ||
| 99 | + | ||
| 100 | + | ||
| 101 | +.date { | ||
| 102 | + padding-top: 10rpx; | ||
| 103 | + color: #FE6867; | ||
| 104 | +} | ||
| 105 | + | ||
| 106 | +.btn { | ||
| 107 | + display: inline-block; | ||
| 108 | + background-color: #FE6867; | ||
| 109 | + color: white; | ||
| 110 | + padding: 20rpx 60rpx; | ||
| 111 | + font-size: 24rpx; | ||
| 112 | + border-radius: 8rpx; | ||
| 113 | +} | ||
| 114 | + | ||
| 115 | +.nodata { | ||
| 116 | + text-align: center; | ||
| 117 | + background-color: #f2f2f2; | ||
| 118 | +} | ||
| 119 | + | ||
| 120 | +.no-more { | ||
| 121 | + line-height: 3; | ||
| 122 | + color: #ccc; | ||
| 123 | + font-size: 26rpx; | ||
| 124 | +} | ||
| 0 | \ No newline at end of file | 125 | \ No newline at end of file |
packageA/pages/chongzhiDetails/chongzhiDetails.js
0 → 100644
| 1 | +// packageA//pages/chongzhiDetails/chongzhiDetails.js | ||
| 2 | +Page({ | ||
| 3 | + | ||
| 4 | + /** | ||
| 5 | + * 页面的初始数据 | ||
| 6 | + */ | ||
| 7 | + data: { | ||
| 8 | + showCode: false, | ||
| 9 | + }, | ||
| 10 | + | ||
| 11 | + /** | ||
| 12 | + * 生命周期函数--监听页面加载 | ||
| 13 | + */ | ||
| 14 | + onLoad: function (options) { | ||
| 15 | + | ||
| 16 | + }, | ||
| 17 | + | ||
| 18 | + /** | ||
| 19 | + * 生命周期函数--监听页面初次渲染完成 | ||
| 20 | + */ | ||
| 21 | + onReady: function () { | ||
| 22 | + | ||
| 23 | + }, | ||
| 24 | + | ||
| 25 | + /** | ||
| 26 | + * 生命周期函数--监听页面显示 | ||
| 27 | + */ | ||
| 28 | + onShow: function () { | ||
| 29 | + | ||
| 30 | + }, | ||
| 31 | + | ||
| 32 | + /** | ||
| 33 | + * 生命周期函数--监听页面隐藏 | ||
| 34 | + */ | ||
| 35 | + onHide: function () { | ||
| 36 | + | ||
| 37 | + }, | ||
| 38 | + | ||
| 39 | + /** | ||
| 40 | + * 生命周期函数--监听页面卸载 | ||
| 41 | + */ | ||
| 42 | + onUnload: function () { | ||
| 43 | + | ||
| 44 | + }, | ||
| 45 | + | ||
| 46 | + /** | ||
| 47 | + * 页面相关事件处理函数--监听用户下拉动作 | ||
| 48 | + */ | ||
| 49 | + onPullDownRefresh: function () { | ||
| 50 | + | ||
| 51 | + }, | ||
| 52 | + | ||
| 53 | + /** | ||
| 54 | + * 页面上拉触底事件的处理函数 | ||
| 55 | + */ | ||
| 56 | + onReachBottom: function () { | ||
| 57 | + | ||
| 58 | + }, | ||
| 59 | + | ||
| 60 | + /** | ||
| 61 | + * 用户点击右上角分享 | ||
| 62 | + */ | ||
| 63 | + onShareAppMessage: function () { | ||
| 64 | + | ||
| 65 | + }, | ||
| 66 | + | ||
| 67 | + onUse() { | ||
| 68 | + if(this.data.showCode) { | ||
| 69 | + this.setData({ | ||
| 70 | + showCode: false | ||
| 71 | + }); | ||
| 72 | + } else { | ||
| 73 | + this.setData({ | ||
| 74 | + showCode: true | ||
| 75 | + }); | ||
| 76 | + }; | ||
| 77 | + } | ||
| 78 | +}) | ||
| 0 | \ No newline at end of file | 79 | \ No newline at end of file |
packageA/pages/chongzhiDetails/chongzhiDetails.json
0 → 100644
packageA/pages/chongzhiDetails/chongzhiDetails.wxml
0 → 100644
| 1 | +<!--packageA//pages/chongzhiDetails/chongzhiDetails.wxml--> | ||
| 2 | +<view class="container"> | ||
| 3 | + <view> | ||
| 4 | + <view class="banner-container"><image class="img-block" src="../../../images/banner.jpg"></image></view> | ||
| 5 | + | ||
| 6 | + | ||
| 7 | + | ||
| 8 | + <view class="list"> | ||
| 9 | + <view class="title-container"> | ||
| 10 | + <view class="title"> | ||
| 11 | + <view>节日专享</view> | ||
| 12 | + <view>你的美丽我来缔造</view> | ||
| 13 | + </view> | ||
| 14 | + </view> | ||
| 15 | + | ||
| 16 | + <view class="list-item flex"> | ||
| 17 | + <!-- 左 --> | ||
| 18 | + <view class="avatar"><image class="img-block"></image></view> | ||
| 19 | + <!-- 右 --> | ||
| 20 | + <view class="info"> | ||
| 21 | + <view class="c-y">美甲</view> | ||
| 22 | + <view class="fs28 pdv10 txt-justify">节日可免费享受专业美甲，可以享受1次。</view> | ||
| 23 | + <view class="t-r fs24 c-y">数量：1</view> | ||
| 24 | + </view> | ||
| 25 | + </view> | ||
| 26 | + | ||
| 27 | + <view class="list-item flex"> | ||
| 28 | + <!-- 左 --> | ||
| 29 | + <view class="avatar"><image class="img-block"></image></view> | ||
| 30 | + <!-- 右 --> | ||
| 31 | + <view class="info"> | ||
| 32 | + <view class="c-y">美甲</view> | ||
| 33 | + <view class="fs28 pdv10 txt-justify">节日可免费享受专业美甲，可以享受1次。</view> | ||
| 34 | + <view class="t-r fs24 c-y">数量：1</view> | ||
| 35 | + </view> | ||
| 36 | + </view> | ||
| 37 | + | ||
| 38 | + <view class="list-item flex"> | ||
| 39 | + <!-- 左 --> | ||
| 40 | + <view class="avatar"><image class="img-block"></image></view> | ||
| 41 | + <!-- 右 --> | ||
| 42 | + <view class="info"> | ||
| 43 | + <view class="c-y">美甲</view> | ||
| 44 | + <view class="fs28 pdv10 txt-justify">节日可免费享受专业美甲，可以享受1次。</view> | ||
| 45 | + <view class="t-r fs24 c-y">数量：1</view> | ||
| 46 | + </view> | ||
| 47 | + </view> | ||
| 48 | + | ||
| 49 | + <view class="list-item flex"> | ||
| 50 | + <!-- 左 --> | ||
| 51 | + <view class="avatar"><image class="img-block"></image></view> | ||
| 52 | + <!-- 右 --> | ||
| 53 | + <view class="info"> | ||
| 54 | + <view class="c-y fs30">美甲</view> | ||
| 55 | + <view class="fs28 pdv10 txt-justify">节日可免费享受专业美甲，可以享受1次。</view> | ||
| 56 | + <view class="t-r fs24 c-y">数量：1</view> | ||
| 57 | + </view> | ||
| 58 | + </view> | ||
| 59 | + | ||
| 60 | + <view class="list-item flex"> | ||
| 61 | + <!-- 左 --> | ||
| 62 | + <view class="avatar"><image class="img-block"></image></view> | ||
| 63 | + <!-- 右 --> | ||
| 64 | + <view class="info"> | ||
| 65 | + <view class="c-y">美甲</view> | ||
| 66 | + <view class="fs28 pdv10 txt-justify">节日可免费享受专业美甲，可以享受1次。</view> | ||
| 67 | + <view class="t-r fs24 c-y">数量：1</view> | ||
| 68 | + </view> | ||
| 69 | + </view> | ||
| 70 | + | ||
| 71 | + </view> | ||
| 72 | + | ||
| 73 | + </view> | ||
| 74 | + | ||
| 75 | + <view class="btn-container"> | ||
| 76 | + <text class="btn" bindtap="onUse">立即使用</text> | ||
| 77 | + </view> | ||
| 78 | + | ||
| 79 | + <view class="qr-container" wx:if="{{showCode}}" bindtap="onUse"> | ||
| 80 | + <view class="qr"> | ||
| 81 | + <view class="qr-img"><image class="img-block" src="../../../images/123456.jpg"></image></view> | ||
| 82 | + <view>核销码：123456456</view> | ||
| 83 | + </view> | ||
| 84 | + </view> | ||
| 85 | + | ||
| 86 | +</view> |
packageA/pages/chongzhiDetails/chongzhiDetails.wxss
0 → 100644
| 1 | +/* packageA//pages/chongzhiDetails/chongzhiDetails.wxss */ | ||
| 2 | +@charset "utf-8"; | ||
| 3 | +.c-y { | ||
| 4 | + color: #FFC736; | ||
| 5 | +} | ||
| 6 | + | ||
| 7 | +.pdv10 { | ||
| 8 | + padding-top: 10rpx; | ||
| 9 | + padding-bottom: 10rpx; | ||
| 10 | +} | ||
| 11 | + | ||
| 12 | +.txt-justify { | ||
| 13 | + text-align: justify; | ||
| 14 | +} | ||
| 15 | + | ||
| 16 | +.container { | ||
| 17 | + background-color: white; | ||
| 18 | + padding-bottom: 120rpx; | ||
| 19 | +} | ||
| 20 | + | ||
| 21 | +.banner-container { | ||
| 22 | + height: 600rpx; | ||
| 23 | + | ||
| 24 | +} | ||
| 25 | + | ||
| 26 | +.list { | ||
| 27 | + /* padding: 0 20rpx; | ||
| 28 | + background-color: skyblue; */ | ||
| 29 | +} | ||
| 30 | + | ||
| 31 | +.list-item { | ||
| 32 | + background-color: white; | ||
| 33 | + align-items: center; | ||
| 34 | + padding: 20rpx; | ||
| 35 | +} | ||
| 36 | + | ||
| 37 | + | ||
| 38 | +.title-container { | ||
| 39 | + padding:40rpx; | ||
| 40 | + background-color: white; | ||
| 41 | +} | ||
| 42 | + | ||
| 43 | +.title { | ||
| 44 | + text-align: center; | ||
| 45 | + position: relative; | ||
| 46 | + color: #FFC736; | ||
| 47 | + font-weight: bold; | ||
| 48 | +} | ||
| 49 | + | ||
| 50 | +.title::before, | ||
| 51 | +.title::after { | ||
| 52 | + content: ''; | ||
| 53 | + position: absolute; | ||
| 54 | + width: 20%; | ||
| 55 | + height: 2rpx; | ||
| 56 | + background-color: #FFC736; | ||
| 57 | + top: 0; | ||
| 58 | + bottom: 0; | ||
| 59 | + margin: auto 0; | ||
| 60 | +} | ||
| 61 | + | ||
| 62 | +.title::before { | ||
| 63 | + left: 0; | ||
| 64 | +} | ||
| 65 | + | ||
| 66 | +.title::after { | ||
| 67 | + right: 0; | ||
| 68 | +} | ||
| 69 | + | ||
| 70 | +.avatar { | ||
| 71 | + width: 140rpx; | ||
| 72 | + height: 140rpx; | ||
| 73 | + border-radius: 50%; | ||
| 74 | + background-color: pink; | ||
| 75 | + flex-shrink: 0; | ||
| 76 | +} | ||
| 77 | + | ||
| 78 | +.info { | ||
| 79 | + padding-left: 20rpx; | ||
| 80 | + display: flex; | ||
| 81 | + flex-direction: column; | ||
| 82 | + justify-content: center; | ||
| 83 | +} | ||
| 84 | + | ||
| 85 | + | ||
| 86 | +.btn-container { | ||
| 87 | + position: fixed; | ||
| 88 | + width: 100%; | ||
| 89 | + bottom: 0; | ||
| 90 | + text-align: center; | ||
| 91 | + padding: 20rpx 0; | ||
| 92 | + background-color: white; | ||
| 93 | + border-top: 2rpx solid #f2f2f2; | ||
| 94 | +} | ||
| 95 | + | ||
| 96 | +.btn { | ||
| 97 | + display: inline-block; | ||
| 98 | + background-color: #FFC736; | ||
| 99 | + color: white; | ||
| 100 | + padding: 20rpx 160rpx; | ||
| 101 | + border-radius: 40rpx; | ||
| 102 | + font-size: 28rpx; | ||
| 103 | +} | ||
| 104 | + | ||
| 105 | +.img-block { | ||
| 106 | + display: block; | ||
| 107 | + width: 100%; | ||
| 108 | + height: 100%; | ||
| 109 | +} | ||
| 110 | + | ||
| 111 | +.qr-container { | ||
| 112 | + position: fixed; | ||
| 113 | + background-color: rgba(0,0,0,.4); | ||
| 114 | + top: 0; | ||
| 115 | + bottom: 0; | ||
| 116 | + left: 0; | ||
| 117 | + right: 0; | ||
| 118 | +} | ||
| 119 | +.qr { | ||
| 120 | + background-color: white; | ||
| 121 | + width: 80%; | ||
| 122 | + height: 600rpx; | ||
| 123 | + position: absolute; | ||
| 124 | + top: 0; | ||
| 125 | + bottom: 0; | ||
| 126 | + left: 0; | ||
| 127 | + right: 0; | ||
| 128 | + margin: auto; | ||
| 129 | + text-align: center; | ||
| 130 | + display: flex; | ||
| 131 | + flex-direction: column; | ||
| 132 | + justify-content: center; | ||
| 133 | +} | ||
| 134 | + | ||
| 135 | +.qr-img { | ||
| 136 | + width: 500rpx; | ||
| 137 | + height: 500rpx; | ||
| 138 | + margin: 0 auto; | ||
| 139 | +} | ||
| 0 | \ No newline at end of file | 140 | \ No newline at end of file |