fe / yoho-luck · Commits

Go to a project

Authored by QC-L
Commit 4c0a737203035409c19b650daf8a1ec49d474ce5 1 parent 79d1bb4e

修改首页及获取抽奖码后的页面效果 review by 黄敬囿

Inline Side-by-side
Showing 14 changed files with 141 additions and 26 deletions
@@ -86,6 +86,11 @@ Component({ @@ -86,6 +86,11 @@ Component({
86 }, 86 },
87 goShare() { 87 goShare() {
88 this.triggerEvent('share'); 88 this.triggerEvent('share');
  89 + this.setData({
  90 + show: false,
  91 + error: false,
  92 + fellow: false
  93 + });
89 }, 94 },
90 95
91 goMyList() { 96 goMyList() {
@@ -116,6 +121,15 @@ Component({ @@ -116,6 +121,15 @@ Component({
116 }); 121 });
117 }, 122 },
118 123
  124 + hiddenAlert(e) {
  125 + this.setData({
  126 + show: false,
  127 + error: false,
  128 + fellow: false
  129 + });
  130 + console.log('隐藏');
  131 + },
  132 +
119 submitFormId(e) { 133 submitFormId(e) {
120 return this.commonService.addWechatFormId({ 134 return this.commonService.addWechatFormId({
121 formId: e.detail.formId, 135 formId: e.detail.formId,
@@ -2,6 +2,7 @@ @@ -2,6 +2,7 @@
2 "component": true, 2 "component": true,
3 "usingComponents": { 3 "usingComponents": {
4 "zero-alert": "./alert", 4 "zero-alert": "./alert",
  5 + "new-lucky-alert": "./new-lucky-alert",
5 "fellow-alert": "./fellow-alert" 6 "fellow-alert": "./fellow-alert"
6 } 7 }
7 } 8 }
@@ -16,12 +16,12 @@ @@ -16,12 +16,12 @@
16 </block> 16 </block>
17 17
18 <block wx:elif="{{status === 3}}"> 18 <block wx:elif="{{status === 3}}">
19 - <view class="action-item confirm" bindtap="goMyList"> 19 + <!-- <view class="action-item confirm" bindtap="goMyList">
20 我的抽奖码({{num}}) 20 我的抽奖码({{num}})
21 - </view> 21 + </view> -->
22 22
23 <view class="action-item ok" bindtap="goShare"> 23 <view class="action-item ok" bindtap="goShare">
24 - 获取更多抽奖码 24 + 分享得更多抽奖码，增加中奖率
25 </view> 25 </view>
26 </block> 26 </block>
27 27
@@ -46,23 +46,29 @@ @@ -46,23 +46,29 @@
46 </block> 46 </block>
47 </view> 47 </view>
48 48
49 -<zero-alert wx:if="{{show}}"> 49 +<new-lucky-alert wx:if="{{show}}" bindhiddenalert="hiddenAlert">
50 <view class="code-alert"> 50 <view class="code-alert">
  51 + <text class="code-title">参加抽奖成功</text>
  52 + <view class="code-bg">
51 <view class="title">你的抽奖码是</view> 53 <view class="title">你的抽奖码是</view>
52 <view class="code">{{code}}</view> 54 <view class="code">{{code}}</view>
53 - <view class="share">分享可以获得更多抽奖码，中奖几率up!</view>  
54 </view> 55 </view>
55 -  
56 <form bindsubmit='submitFormId' report-submit='true'> 56 <form bindsubmit='submitFormId' report-submit='true'>
  57 + <button class="share" form-type="submit" bindtap="goShare">分享一下，中奖概率马上 double!</button>
  58 + </form>
  59 + <view class="share-desc">1个好友参加=1个抽奖码=中奖几率UP！</view>
  60 + </view>
  61 +
  62 + <!-- <form bindsubmit='submitFormId' report-submit='true'>
57 <view class="foot"> 63 <view class="foot">
58 <button class="foot-item info" plain="true" hover-class="none" form-type="submit" bindtap="goShare">去分享</button> 64 <button class="foot-item info" plain="true" hover-class="none" form-type="submit" bindtap="goShare">去分享</button>
59 <button class="foot-item" plain="true" hover-class="none" form-type="submit" bindtap="cancelAlert">取消</button> 65 <button class="foot-item" plain="true" hover-class="none" form-type="submit" bindtap="cancelAlert">取消</button>
60 </view> 66 </view>
61 - </form> 67 + </form> -->
62 68
63 <!-- <view class="foot-item info" bindtap="goShare">去分享</view> 69 <!-- <view class="foot-item info" bindtap="goShare">去分享</view>
64 <view class="foot-item" bindtap="cancelAlert">取消</view> --> 70 <view class="foot-item" bindtap="cancelAlert">取消</view> -->
65 -</zero-alert> 71 +</new-lucky-alert>
66 72
67 <zero-alert wx:if="{{error}}"> 73 <zero-alert wx:if="{{error}}">
68 <view class="error-alert"> 74 <view class="error-alert">
@@ -47,34 +47,62 @@ @@ -47,34 +47,62 @@
47 } 47 }
48 48
49 49
  50 +
  51 +
50 .code-alert { 52 .code-alert {
51 text-align: center; 53 text-align: center;
52 color: black; 54 color: black;
53 - margin-top: 40rpx; 55 + margin-top: -400rpx;
  56 + display: flex;
  57 + flex-direction: column;
  58 + align-items: center;
  59 +}
  60 +
  61 +.code-title {
  62 + margin-top: 30rpx;
  63 +}
  64 +
  65 +.code-bg {
  66 + margin-top: 80rpx;
  67 + display: flex;
  68 + flex-direction: row;
  69 + align-items: center;
  70 + justify-content: center;
54 } 71 }
55 72
56 .title { 73 .title {
57 font-size: 28rpx; 74 font-size: 28rpx;
58 - color: #B0B0B0;  
59 - margin-bottom: 30rpx; 75 + color: #444444;
60 } 76 }
61 77
62 .code { 78 .code {
63 - display: inline-block;  
64 - min-width: 260rpx;  
65 - height: 72rpx;  
66 - font-size: 40rpx; 79 + min-width: 192rpx;
  80 + height: 50rpx;
  81 + font-size: 28rpx;
67 font-weight: bolder; 82 font-weight: bolder;
68 - line-height: 72rpx; 83 + line-height: 50rpx;
69 text-align: center; 84 text-align: center;
70 border: 1rpx solid black; 85 border: 1rpx solid black;
71 - margin-bottom: 30rpx;  
72 - padding: 0 20rpx; 86 + margin-left: 20rpx;
73 } 87 }
74 88
75 .share { 89 .share {
76 font-size: 28rpx; 90 font-size: 28rpx;
77 - color: #444444; 91 + color: #FFFFFF;
  92 + background: #FF4C00;
  93 + border-radius: 28px;
  94 + width: 460rpx;
  95 + height: 80rpx;
  96 + line-height: 80rpx;
  97 + margin-top: 90rpx;
  98 + vertical-align: center;
  99 +}
  100 +
  101 +.share-desc {
  102 + font-size: 20rpx;
  103 + color: #B0B0B0;
  104 + font-family: PingFangSC-Medium;
  105 + margin-top: 10rpx;
78 } 106 }
79 107
80 .foot { 108 .foot {
@@ -15,9 +15,8 @@ @@ -15,9 +15,8 @@
15 .modal-dialog { 15 .modal-dialog {
16 height: 380rpx; 16 height: 380rpx;
17 width: 540rpx; 17 width: 540rpx;
18 - overflow: hidden;  
19 position: fixed; 18 position: fixed;
20 - top: 40%; 19 + top: 50%;
21 left: 50%; 20 left: 50%;
22 margin-right: -50%; 21 margin-right: -50%;
23 transform: translate(-50%, -50%); 22 transform: translate(-50%, -50%);
1 -  
2 <swiper wx:if="{{list.length !== 0}}" indicator-dots="{{indicatorDots}}" 1 <swiper wx:if="{{list.length !== 0}}" indicator-dots="{{indicatorDots}}"
3 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" vertical="{{true}}" class="swiper" circular="{{true}}"> 2 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" vertical="{{true}}" class="swiper" circular="{{true}}">
4 <block wx:for="{{list}}"> 3 <block wx:for="{{list}}">
  1 +// pages/zeroSell/components/new-lucky-alert.js.js
  2 +Component({
  3 + /**
  4 + * 组件的属性列表
  5 + */
  6 + properties: {
  7 +
  8 + },
  9 +
  10 + /**
  11 + * 组件的初始数据
  12 + */
  13 + data: {
  14 +
  15 + },
  16 +
  17 + /**
  18 + * 组件的方法列表
  19 + */
  20 + methods: {
  21 + hidenMask(e) {
  22 + this.triggerEvent('hiddenalert')
  23 + }
  24 + }
  25 +})
  1 +{
  2 + "component": true,
  3 + "usingComponents": {}
  4 +}
  1 +<view class="modal-mask" catchtap="hidenMask"></view>
  2 +<view class="modal-dialog">
  3 + <image class="modal-dialog-bg" src="/images/alert_bg@3x.png"></image>
  4 + <slot></slot>
  5 +</view>
  1 +/* pages/zeroSell/components/new-lucky-alert.js.wxss */
  2 +
  3 +.modal-mask {
  4 + width: 100%;
  5 + height: 100%;
  6 + position: fixed;
  7 + top: 0;
  8 + left: 0;
  9 + background: #000;
  10 + opacity: 0.5;
  11 + overflow: hidden;
  12 + z-index: 9000;
  13 +}
  14 +
  15 +.modal-dialog {
  16 + height: 380rpx;
  17 + width: 550rpx;
  18 + position: fixed;
  19 + top: 40%;
  20 + left: 50%;
  21 + margin-right: -50%;
  22 + transform: translate(-50%, -50%);
  23 + z-index: 9999;
  24 + border-radius: 10rpx;
  25 + overflow: visible;
  26 + display: flex;
  27 + flex-direction: column;
  28 +}
  29 +
  30 +.modal-dialog-bg {
  31 + width: 550rpx;
  32 + height: 800rpx;
  33 +}
@@ -14,14 +14,13 @@ @@ -14,14 +14,13 @@
14 font-weight: bold; 14 font-weight: bold;
15 word-break:break-all; 15 word-break:break-all;
16 color: #444444; 16 color: #444444;
17 - text-align: left;  
18 } 17 }
19 18
20 .product_lucky_bg { 19 .product_lucky_bg {
21 display: flex; 20 display: flex;
22 flex-direction: row; 21 flex-direction: row;
23 align-items: baseline; 22 align-items: baseline;
24 - justify-content: space-between; 23 + justify-content: center;
25 margin-left: 32rpx; 24 margin-left: 32rpx;
26 margin-right: 32rpx; 25 margin-right: 32rpx;
27 } 26 }
@@ -31,6 +30,7 @@ @@ -31,6 +30,7 @@
31 font-size: 36rpx; 30 font-size: 36rpx;
32 font-weight: bold; 31 font-weight: bold;
33 margin-left: 30rpx; 32 margin-left: 30rpx;
  33 + text-decoration: line-through;
34 } 34 }
35 35
36 .product_time { 36 .product_time {
@@ -89,7 +89,7 @@ Page(Object.assign({ @@ -89,7 +89,7 @@ Page(Object.assign({
89 image_src: '../../images/share_wechat@2x.png', 89 image_src: '../../images/share_wechat@2x.png',
90 }, 90 },
91 { 91 {
92 - name: '分享到朋友圈', 92 + name: '生成海报分享',
93 className: 'action-class', 93 className: 'action-class',
94 loading: false, 94 loading: false,
95 image_src: '../../images/share_wxpeng@2x.png' 95 image_src: '../../images/share_wxpeng@2x.png'
@@ -241,6 +241,7 @@ Page(Object.assign({ @@ -241,6 +241,7 @@ Page(Object.assign({
241 recommends: r2.code === 200 ? r2.data : [], 241 recommends: r2.code === 200 ? r2.data : [],
242 avatars: (r3.code === 200 ? r3.data : []).map(i => { 242 avatars: (r3.code === 200 ? r3.data : []).map(i => {
243 i.user_name = wrapperName(i.user_name); 243 i.user_name = wrapperName(i.user_name);
  244 + i.user_thumb = formatImageUrl(i.user_thumb, 200, 200);
244 return i; 245 return i;
245 }), 246 }),
246 247
@@ -40,7 +40,7 @@ Page(Object.assign({ @@ -40,7 +40,7 @@ Page(Object.assign({
40 image_src: '../../images/share_wechat@2x.png', 40 image_src: '../../images/share_wechat@2x.png',
41 }, 41 },
42 { 42 {
43 - name: '分享到朋友圈', 43 + name: '生成海报分享',
44 className: 'action-class', 44 className: 'action-class',
45 loading: false, 45 loading: false,
46 image_src: '../../images/share_wxpeng@2x.png' 46 image_src: '../../images/share_wxpeng@2x.png'