xt / xcx-book · Commits

Go to a project

Commit c60de007d1cc7303142e226338218e3be6b8e867

Authored by vking
1 parent d0054f0c
build: skipped

master-activity

Inline Side-by-side
Showing 10 changed files with 363 additions and 16 deletions
@@ -35,7 +35,8 @@ @@ -35,7 +35,8 @@
35 "pages/reserve/remark", 35 "pages/reserve/remark",
36 "pages/reserve/findSeller", 36 "pages/reserve/findSeller",
37 "pages/customer/cancel", 37 "pages/customer/cancel",
38 - "pack-activity/pages/index" 38 + "pack-activity/pages/index",
  39 + "pack-activity/pages/money"
39 ], 40 ],
40 "subpackages": [ 41 "subpackages": [
41 { 42 {
@@ -12,12 +12,18 @@ Component({ @@ -12,12 +12,18 @@ Component({
12 */ 12 */
13 data: { 13 data: {
14 activity:null, 14 activity:null,
  15 + displayType:0,//0|1 浮层|弹框
15 }, 16 },
16 17
17 /** 18 /**
18 * 组件的方法列表 19 * 组件的方法列表
19 */ 20 */
20 methods: { 21 methods: {
  22 + close(){
  23 + this.setData({
  24 + displayType:0,
  25 + })
  26 + },
21 hasActivity(e){//有通知就可以参加活动 27 hasActivity(e){//有通知就可以参加活动
22 console.log('hasActivity.enter',e) 28 console.log('hasActivity.enter',e)
23 this.getActivity() 29 this.getActivity()
@@ -25,6 +31,7 @@ Component({ @@ -25,6 +31,7 @@ Component({
25 getActivity(){ 31 getActivity(){
26 // 32 //
27 this.setData({ 33 this.setData({
  34 + displayType:1,
28 activity:{ 35 activity:{
29 id:1, 36 id:1,
30 background:'#F04866', 37 background:'#F04866',
1 <!--components/activity/enter.wxml--> 1 <!--components/activity/enter.wxml-->
2 <has bindevent="hasActivity"></has> 2 <has bindevent="hasActivity"></has>
3 -<view class="mask" wx:if="{{activity}}" bindtap="close">  
4 - <view class="close"></view>  
5 - <view class="activity" bindcatch="bindcatch">  
6 - <view class="enter">  
7 -  
8 - </view>  
9 - <view class="money">  
10 - 3 +<block wx:if="{{activity}}">
  4 + <view class="mask" wx:if="{{displayType==1}}">
  5 + <view class="close" bindtap="close"></view>
  6 + <view class="activity" bindcatch="bindcatch">
  7 + <view class="enter">
  8 + <view class="enter-txt">请客订包间，就用周到安排</view>
  9 + <view class="enter-hot flex-cc">
  10 + <view class="enter-icon lt"></view>
  11 + <view class="enter-hot-txt">开工专享红包</view>
  12 + <view class="enter-icon gt"></view>
  13 + </view>
  14 + </view>
  15 + <view class="money">
  16 + <view class="money-tip flex-cc">订包间，消费抵现金</view>
  17 + <view class="money-views flex-bc">
  18 + <view class="money-number">18.8</view>
  19 + <view class="money-dw">元</view>
  20 + </view>
  21 + <navigator url="/pack-activity/pages/index?id={{activity.id}}" hover-class="navigator-hover">
  22 + <view class="money-button flex-cc">开心收下</view>
  23 + </navigator>
  24 + </view>
11 </view> 25 </view>
12 </view> 26 </view>
13 -</view> 27 + <navigator wx:else="" hover-class="navigator-hover"
  28 + url="/pack-activity/pages/index?id={{activity.id}}" >
  29 + <view class="mask-tips"></view>
  30 + </navigator>
  31 +</block>
  32 +
@@ -21,6 +21,44 @@ @@ -21,6 +21,44 @@
21 background-image: url("http://qn.colorcun.com/activity/images/enter/enter.png"); 21 background-image: url("http://qn.colorcun.com/activity/images/enter/enter.png");
22 background-size: 100% 100%; 22 background-size: 100% 100%;
23 margin-left:calc(50% - 282rpx); 23 margin-left:calc(50% - 282rpx);
  24 + box-sizing: border-box;
  25 + padding-top: 146rpx;
  26 +}
  27 +.enter-txt{
  28 + height:34rpx;
  29 + font-size:24rpx;
  30 + font-weight:500;
  31 + color:rgba(255,227,192,1);
  32 + line-height:34rpx;
  33 + letter-spacing:1rpx;
  34 + text-align: center;
  35 +}
  36 +.enter-hot{
  37 + height:50rpx;
  38 + font-size:36rpx;
  39 + font-weight:600;
  40 + color:rgba(255,227,192,1);
  41 + line-height:50rpx;
  42 + letter-spacing:2rpx;
  43 + margin-top: 46rpx;
  44 +}
  45 +.enter-hot-txt{
  46 + width:236rpx;
  47 + overflow: hidden;
  48 + white-space: nowrap;
  49 + margin: 0 20rpx 0;
  50 + text-align: center;
  51 +}
  52 +.enter-icon{
  53 + background-size: 100% 100%;
  54 + width:70rpx;
  55 + height:16rpx;
  56 +}
  57 +.enter-icon.lt{
  58 + background-image: url("http://qn.colorcun.com/activity/images/enter/lt-1.png");
  59 +}
  60 +.enter-icon.gt{
  61 + background-image: url("http://qn.colorcun.com/activity/images/enter/gt-1.png");
24 } 62 }
25 .money{ 63 .money{
26 width: 400rpx; 64 width: 400rpx;
@@ -29,4 +67,68 @@ @@ -29,4 +67,68 @@
29 background-size: 100% 100%; 67 background-size: 100% 100%;
30 margin-left:calc(50% - 200rpx + 13rpx); 68 margin-left:calc(50% - 200rpx + 13rpx);
31 margin-top: -143rpx; 69 margin-top: -143rpx;
  70 + box-sizing: border-box;
  71 + padding-top: 40rpx;
  72 +}
  73 +
  74 +.money-tip{
  75 + height:34rpx;
  76 + font-size:24rpx;
  77 + font-weight:600;
  78 + color:rgba(204,17,39,1);
  79 + line-height:34rpx;
  80 + letter-spacing:1rpx;
  81 +}
  82 +.money-views{
  83 + height:106rpx;
  84 + font-size:76rpx;
  85 + font-weight:600;
  86 + color:rgba(204,17,39,1);
  87 + line-height:106rpx;
  88 + letter-spacing:1rpx;
  89 + margin-top: 16rpx;
  90 +}
  91 +.money-dw{
  92 + width:26rpx;
  93 + height:34rpx;
  94 + font-size:24rpx;
  95 + font-weight:600;
  96 + color:rgba(204,17,39,1);
  97 + line-height:34rpx;
  98 + letter-spacing:1rpx;
  99 + margin-left: 10rpx;
  100 +}
  101 +.money-button{
  102 + width:290rpx;
  103 + height:70rpx;
  104 + background:linear-gradient(180deg,rgba(231,66,88,1) 0%,rgba(243,53,78,1) 100%);
  105 + box-shadow:0rpx 2rpx 2rpx 0rpx rgba(209,33,54,1);
  106 + border-radius:35rpx;
  107 + font-size:32rpx;
  108 + font-weight:600;
  109 + color:rgba(255,227,192,1);
  110 + letter-spacing:1rpx;
  111 + text-shadow:0rpx 4rpx 8rpx rgba(207,31,51,1);
  112 + position: relative;
  113 + margin-top: 60rpx;
  114 + margin-left: 54rpx;
  115 +}
  116 +.money-button:after{
  117 + display: block;
  118 + position: absolute;
  119 + content: "";
  120 + width:36rpx;
  121 + height:36rpx;
  122 + background-size: 100% 100%;
  123 + background-image: url("http://qn.colorcun.com/activity/images/enter/more.png");
  124 + top:16rpx;
  125 + right:28rpx;
  126 +}
  127 +.mask-tips{
  128 + background-color: #1AAD19;
  129 + width: 140rpx;
  130 + height: 200rpx;
  131 + position: fixed;
  132 + left: 20rpx;
  133 + bottom: 500rpx;
32 } 134 }
@@ -6,13 +6,15 @@ @@ -6,13 +6,15 @@
6 <view class="guize">活动 规则</view> 6 <view class="guize">活动 规则</view>
7 </view> 7 </view>
8 <view class="content"> 8 <view class="content">
9 - <view class="tips flex-lr">  
10 - <view>活动累计收入：{{count}}元</view>  
11 - <view class="flex-rr">  
12 - 查看余额  
13 - <view class="more"></view> 9 + <navigator url="/pack-activity/pages/money" hover-class="navigator-hover">
  10 + <view class="tips flex-lr">
  11 + <view>活动累计收入：{{count}}元</view>
  12 + <view class="flex-rr">
  13 + 查看余额
  14 + <view class="more"></view>
  15 + </view>
14 </view> 16 </view>
15 - </view> 17 + </navigator>
16 <view class="list"> 18 <view class="list">
17 <view class="header flex-cc"> 19 <view class="header flex-cc">
18 <view class="header-img lt"></view> 20 <view class="header-img lt"></view>
  1 +// pack-activity/pages/money.js
  2 +Page({
  3 +
  4 + /**
  5 + * 页面的初始数据
  6 + */
  7 + data: {
  8 +
  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 +})
  1 +{
  2 + "backgroundTextStyle":"light",
  3 + "navigationBarBackgroundColor": "#fff",
  4 + "navigationBarTextStyle":"black",
  5 + "usingComponents": {
  6 + "nav":"/components/nav/nav"
  7 + }
  8 +}
  1 +<!--pack-activity/pages/money.wxml-->
  2 +<nav hasHome>我的余额</nav>
  3 +<view class="pages">
  4 + <view class="pages-view">
  5 + <view class="money-block">
  6 + <view class="money-views-top">我的余额</view>
  7 + <view class="money-views flex-bc">
  8 + <view class="money-number">18.8</view>
  9 + <view class="money-dw">元</view>
  10 + </view>
  11 + </view>
  12 + </view>
  13 + <view class="list-view">
  14 + <view class="item">
  15 + <view class="flex-lr name">
  16 + <view>活动红包</view>
  17 + <view>+100</view>
  18 + </view>
  19 + <view class="flex-lr date">
  20 + <view>11-10 17:19</view>
  21 + <view>余额 788.00</view>
  22 + </view>
  23 + </view>
  24 + <view class="item">
  25 + <view class="flex-lr name">
  26 + <view>活动红包</view>
  27 + <view>+100</view>
  28 + </view>
  29 + <view class="flex-lr date">
  30 + <view>11-10 17:19</view>
  31 + <view>余额 788.00</view>
  32 + </view>
  33 + </view>
  34 + <view class="item">
  35 + <view class="flex-lr name">
  36 + <view>活动红包</view>
  37 + <view>+100</view>
  38 + </view>
  39 + <view class="flex-lr date">
  40 + <view>11-10 17:19</view>
  41 + <view>余额 788.00</view>
  42 + </view>
  43 + </view>
  44 + </view>
  45 +</view>
  1 +/* pack-activity/pages/money.wxss */
  2 +page{
  3 + background-color: #FBE0B8;
  4 +}
  5 +.pages{
  6 + background-image: url("http://qn.colorcun.com/activity/images/money-header.png");
  7 + background-size: 100% auto;
  8 + background-repeat: no-repeat;
  9 + min-height: 500rpx;
  10 + padding-top: 80rpx;
  11 +}
  12 +.pages-view{
  13 + width: calc(100% - 40rpx);
  14 + margin-left: 20rpx;
  15 + height:340rpx;
  16 + background:rgba(251,236,217,1);
  17 + box-shadow:0rpx 4rpx 8rpx 0rpx rgba(232,194,139,1);
  18 + border-radius:20rpx;
  19 + box-sizing: border-box;
  20 + padding: 20rpx;
  21 +}
  22 +.money-block{
  23 + height:300rpx;
  24 + background:rgba(255,255,255,1);
  25 + box-shadow:0rpx 4rpx 8rpx 0rpx rgba(251,224,184,1);
  26 + border-radius:20rpx;
  27 + padding-top: 50rpx;
  28 + box-sizing: border-box;
  29 +}
  30 +.money-views-top{
  31 + background-image: url("http://qn.colorcun.com/activity/images/money-top.png");
  32 + background-size: 100% 100%;
  33 + width: 252rpx;
  34 + height: 50rpx;
  35 +
  36 + font-size:28rpx;
  37 + font-weight:500;
  38 + color:rgba(109,61,19,1);
  39 + line-height:50rpx;
  40 + margin-left: calc(50% - 126rpx);
  41 + text-align: center;
  42 +}
  43 +
  44 +.money-views{
  45 + height:100rpx;
  46 + font-size:72rpx;
  47 + font-weight:600;
  48 + color:rgba(227,31,53,1);
  49 + line-height:100rpx;
  50 + margin-top: 50rpx;
  51 +}
  52 +.money-dw{
  53 + width:32rpx;
  54 + height:44rpx;
  55 + font-size:32rpx;
  56 + font-weight:600;
  57 + color:rgba(227,31,53,1);
  58 + line-height:44rpx;
  59 + margin-left: 20rpx;
  60 +}
  61 +.list-view{
  62 + width: calc(100% - 40rpx);
  63 + margin-left: 20rpx;
  64 + background:rgba(255,255,255,1);
  65 + box-shadow:0rpx 4rpx 8rpx 0rpx rgba(232,194,139,1);
  66 + border-radius:20rpx;
  67 + box-sizing: border-box;
  68 + padding: 2rpx 40rpx 0;
  69 + margin-top: 20rpx;
  70 +}
  71 +.item{
  72 + height: 166rpx;
  73 + box-sizing: border-box;
  74 + border-bottom: 2rpx solid #F5F5F5;
  75 + line-height: 166rpx;
  76 + padding-top: 40rpx;
  77 +}
  78 +.item:last-child{
  79 + border-bottom-width: 0;
  80 +}
  81 +.item .name{
  82 + height:44rpx;
  83 + font-size:32rpx;
  84 + font-weight:500;
  85 + color:rgba(53,53,53,1);
  86 + line-height:44rpx;
  87 + box-sizing: border-box;
  88 +}
  89 +.item .date{
  90 + height:34rpx;
  91 + font-size:24rpx;
  92 + font-weight:500;
  93 + color:rgba(153,153,153,1);
  94 + line-height:34rpx;
  95 + margin-top: 10rpx;
  96 +}
@@ -602,6 +602,13 @@ @@ -602,6 +602,13 @@
602 "pathName": "pack-activity/pages/index", 602 "pathName": "pack-activity/pages/index",
603 "query": "id=1", 603 "query": "id=1",
604 "scene": null 604 "scene": null
  605 + },
  606 + {
  607 + "id": -1,
  608 + "name": "pack-activity/pages/money",
  609 + "pathName": "pack-activity/pages/money",
  610 + "query": "",
  611 + "scene": null
605 } 612 }
606 ] 613 ]
607 } 614 }