Skip to content

dev / marubi-wish-list-mp

Go to a project
Toggle navigation
Toggle navigation pinning
a616f0f9 by simon
Options

no message

1 parent 3a17532c
Inline Side-by-side
Showing 7 changed files with 282 additions and 1 deletions
1 { 1 {
2 "pages": [ 2 "pages": [
3 "pages/prize-detail/prize-detail",
3 "pages/user-table/user-table", 4 "pages/user-table/user-table",
4 "pages/index/index", 5 "pages/index/index",
5 "pages/authorize/authorize", 6 "pages/authorize/authorize",
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
24 </view> 24 </view>
25 </view> 25 </view>
26 <!-- 摇后结果 --> 26 <!-- 摇后结果 -->
27 <view class="result-wrap"> 27 <view wx:else class="result-wrap">
28 <view class="result"> 28 <view class="result">
29 <image class="ebg" mode="widthFix" src="../../image/oss/coop/coop-c3.png" /> 29 <image class="ebg" mode="widthFix" src="../../image/oss/coop/coop-c3.png" />
30 <view class="space1"></view> 30 <view class="space1"></view>
......
1 import {
2 getBindtapData
3 } from '../../utils/util';
4 import Date from '../../utils/date';
5 let app = getApp();
6 Page({
7 data: {
8 userInfo: {},
9 used: false, //优惠券已使用，另外的样式
10 couponInfo: {
11 "couponId": "20839",
12 "couponCode": "RLLL1IHG",
13 "rule": "RLLL1IHG",
14 "startDate": 1564479217000,
15 "endDate": 1567094399000,
16 "type": 4,
17 "name": "眼部护理体验券-7月24日",
18 "state": 0,
19 "endDateStr": "19-08-29"
20 }
21 },
22 onShareAppMessage() {},
23 onLoad(options) {
24 app.queryIndex().then((result) => {
25 let couponInfo = this.data.couponInfo;
26 couponInfo.startDateStr = new Date(couponInfo.startDate).toString("yyyy.MM.dd");
27 couponInfo.endDateStr = new Date(couponInfo.endDate).toString("yyyy.MM.dd");
28 this.setData({
29 userInfo: app.globalData.userInfo,
30 couponInfo: couponInfo
31 })
32 this.initData();
33 })
34
35 },
36 initData() {
37 // this.setData({
38 // couponInfo: app.globalData.curCoupon
39 // })
40 },
41 // 查看可用门店
42 onNearbyStoreHandler() {
43
44 },
45 // 子组件事件
46 evtcomp(evt) {
47 let {
48 name,
49 data
50 } = evt.detail;
51 switch (name) {
52
53 case "_evt_hide":
54 break;
55
56 default:
57 break;
58 }
59 },
60 })
1 {
2 "navigationBarTitleText": "卡券详情",
3 "usingComponents": {
4 "use-notice-comp": "../../component/use-notice-comp/use-notice-comp"
5 }
6 }
1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils';
3
4 .page {
5 padding-bottom: $pageBottom;
6 font-weight: 300;
7
8 .bgc {
9 background-color: #f8eeef;
10 }
11
12 .bg {}
13
14 .decoration {
15 position: relative;
16
17 .d1 {
18 position: absolute;
19 width: 92px;
20 height: 411px;
21 top: 0;
22 left: 0;
23 }
24
25 .d2 {
26 position: fixed;
27 width: 240px;
28 height: 181px;
29 right: 0;
30 bottom: 0;
31 }
32
33 .d3 {
34 position: absolute;
35 top: -20px;
36 right: -100px;
37 width: 553px;
38 height: 227px;
39 }
40 }
41
42 .main {
43 .top-space {
44 height: 52px;
45 }
46
47 .content {
48 position: relative;
49
50 // 奖品名
51 .tit {
52 text-align: center;
53 color: #bb3039;
54 font-size: 42px;
55 }
56
57 // 奖品
58 .prize {
59 position: relative;
60 margin: 32px auto 0;
61 width: 620px;
62 height: 722px;
63
64 .ebg {
65 position: absolute;
66 left: 0;
67 right: 0;
68 top: 0;
69 margin: 0 auto;
70 width: 620px;
71 height: 722px;
72 }
73
74 .cont {
75 position: relative;
76
77 .space1 {
78 height: 48px;
79 }
80
81 // 二维码
82 .qrcode {
83 width: 340px;
84 height: 340px;
85 background-color: wheat;
86 margin: 0 auto;
87 }
88
89 .code {
90 margin: 24px auto 0;
91 border-radius: 30px;
92 background-color: rgba($color: #f2f2f2, $alpha: 1);
93 @include btc(280px, 60px);
94 color: #666666;
95 font-size: 38px;
96 }
97
98 .top {
99 display: flex;
100 margin: 0 auto 36px;
101 justify-content: center;
102 }
103
104 .display {
105 position: relative;
106 width: 140px;
107 height: 140px;
108 border-radius: 70px;
109 background-image: radial-gradient(circle at 0 0, #ffffff, #f2e6e6);
110 @extend .fcc;
111
112 .prod {
113 max-width: 200px;
114 max-height: 200px;
115 margin-bottom: 10px;
116 }
117
118 .close {
119 width: 30px;
120 height: 30px;
121 position: absolute;
122 bottom: 0;
123 right: 0;
124 }
125 }
126
127
128 .info {
129 @extend .bb;
130 padding-left: 20px;
131
132 .name {
133 font-size: 28px;
134 color: #333333;
135 }
136
137 .c1 {
138 font-size: 22px;
139 color: #666666;
140 }
141 }
142 }
143
144 // 已使用
145 .used {
146 $alp: 0.3;
147
148 .qrcode {
149 opacity: $alp;
150 }
151
152 .info {
153 opacity: $alp;
154 }
155 }
156
157
158 }
159
160 // 使用说明
161 .use-notice {
162 margin-top: 28px;
163 }
164
165 .store-btn {
166 margin: 34px auto 0;
167 @include cb();
168 }
169 }
170
171 }
172 }
1 <view class="page">
2 <view class="app__bgc bgc"></view>
3 <view class="app__bg bg"></view>
4 <view class="decoration">
5 <image class="d1" src="../../image/oss/my-card/my-card-d1.png" mode="widthFix" />
6 <image class="d2" src="../../image/oss/my-card/my-card-d2.png" mode="widthFix" />
7 <image class="d3" src="../../image/oss/question/question-c1.png" mode="widthFix" />
8 </view>
9 <view class="app__content main">
10 <view class="top-space"></view>
11 <view class="content">
12 <!-- 奖品 -->
13 <view class="prize">
14 <image class="ebg" mode="widthFix" src="../../image/oss/coupon-detail/cd-c1.png" />
15 <view class="cont {{used?'used':''}}">
16 <view class="space1"></view>
17 <view class="top">
18 <view class="display">
19 <image class="prod" mode="aspectFit" src="../../image/prize/prize-1.png" />
20 </view>
21 <view class="info">
22 <view class="name">{{couponInfo.name}}</view>
23 <view class="c1">手机号：{{userInfo.mobile}}</view>
24 <view class="c1">派券日期：{{couponInfo.startDateStr}}</view>
25 <view class="c1">有效日期：{{couponInfo.endDateStr}}</view>
26 </view>
27 </view>
28 <!-- 二维码 -->
29 <view class="qrcode"></view>
30 <view class="code">{{couponInfo.couponCode}}</view>
31 </view>
32 </view>
33 <!-- 使用说明 -->
34 <view class="use-notice">
35 <use-notice-comp></use-notice-comp>
36 </view>
37 <!-- 查看门店 -->
38 <view bindtap="onNearbyStoreHandler" class="store-btn">查看可用门店</view>
39 </view>
40 </view>
41 </view>
...@@ -8,6 +8,7 @@ const routerPath = { ...@@ -8,6 +8,7 @@ const routerPath = {
8 poster: '/pages/poster/poster', // 海报页 8 poster: '/pages/poster/poster', // 海报页
9 myCard: '/pages/my-card/my-card', // 我的卡券 9 myCard: '/pages/my-card/my-card', // 我的卡券
10 couponDetail: '/pages/coupon-detail/coupon-detail', // 券详情 10 couponDetail: '/pages/coupon-detail/coupon-detail', // 券详情
11 prizeDetail: '/pages/prize-detail/prize-detail', // 券详情
11 coop: '/pages/coop/coop', // 协作页/好友查看 12 coop: '/pages/coop/coop', // 协作页/好友查看
12 register: '/pages/register/register', // 注册 13 register: '/pages/register/register', // 注册
13 authorize: '/pages/authorize/authorize', // 授权 14 authorize: '/pages/authorize/authorize', // 授权
......