xiaoe_mp_npm 0.5.42-test6 → 0.5.42-test7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/miniprogram_dist/CouponReceivePopup/index.js +71 -0
- package/miniprogram_dist/CouponReceivePopup/index.json +6 -0
- package/miniprogram_dist/CouponReceivePopup/index.scss +91 -0
- package/miniprogram_dist/CouponReceivePopup/index.wxml +83 -0
- package/miniprogram_dist/CouponReceivePopup/index.wxss +67 -0
- package/package.json +1 -1
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
// subpkg/npm-compoent/miniprogram_npm/xiaoe_mp_npm/CouponReceivePopup/index.ts
|
|
2
|
+
import { replaceCDN } from './../common/utils/image-cdn-slim/utils'
|
|
3
|
+
const computedBehavior = require('miniprogram-computed').behavior
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
Component({
|
|
7
|
+
behaviors: [computedBehavior],
|
|
8
|
+
/**
|
|
9
|
+
* 组件的属性列表
|
|
10
|
+
*/
|
|
11
|
+
properties: {
|
|
12
|
+
showPopup: {
|
|
13
|
+
type: Boolean,
|
|
14
|
+
value: false,
|
|
15
|
+
},
|
|
16
|
+
couponInfo: {
|
|
17
|
+
type: Object,
|
|
18
|
+
value: {}
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* 组件的初始数据
|
|
24
|
+
*/
|
|
25
|
+
data: {
|
|
26
|
+
bgZh: "https://commonresource-1252524126.cdn.xiaoeknow.com/image/lmimm9mb0lnc.png",
|
|
27
|
+
closeBtn: "https://commonresource-1252524126.cdn.xiaoeknow.com/image/lmimm9mb0q88.png"
|
|
28
|
+
},
|
|
29
|
+
|
|
30
|
+
lifetimes: {
|
|
31
|
+
attached : function() {
|
|
32
|
+
console.log("sage------add",this.data);
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
|
|
36
|
+
computed: {
|
|
37
|
+
backgroundImageUrl(data) {
|
|
38
|
+
console.log("sage-----data",data);
|
|
39
|
+
const url = data.bgZh;
|
|
40
|
+
console.log("sage-----url",url,replaceCDN(url, "?imageView2/2/w/400/q/100"));
|
|
41
|
+
return replaceCDN(url, "?imageView2/2/w/400/q/100");
|
|
42
|
+
// return url
|
|
43
|
+
},
|
|
44
|
+
closeBtnUrl(data) {
|
|
45
|
+
return replaceCDN(data.closeBtn, "?imageView2/2/w/400/q/100");
|
|
46
|
+
},
|
|
47
|
+
isShowPoint(data) {
|
|
48
|
+
let tempPrice = data.couponInfo.price;
|
|
49
|
+
if (tempPrice % 100 == 0) {
|
|
50
|
+
return false;
|
|
51
|
+
} else {
|
|
52
|
+
return true;
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* 组件的方法列表
|
|
59
|
+
*/
|
|
60
|
+
methods: {
|
|
61
|
+
closePopup() {
|
|
62
|
+
this.triggerEvent('closePopup')
|
|
63
|
+
|
|
64
|
+
},
|
|
65
|
+
goGoods() {
|
|
66
|
+
this.closePopup()
|
|
67
|
+
// todo 拉起带货
|
|
68
|
+
this.triggerEvent('goGoods')
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
})
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
$deviceWidth: 750;
|
|
2
|
+
@function vmin($rpx) {
|
|
3
|
+
@return #{$rpx * 100 / $deviceWidth}vmin;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
@mixin coupon-receive {
|
|
7
|
+
.receive-popup{
|
|
8
|
+
background-color: transparent;
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
.receive-container{
|
|
12
|
+
width: vmin(512);
|
|
13
|
+
height: vmin(760);
|
|
14
|
+
background-size: 100% 100%;
|
|
15
|
+
&__content {
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
margin: vmin(280) vmin(32) vmin(32);
|
|
19
|
+
padding: vmin(32) vmin(24) vmin(24);
|
|
20
|
+
}
|
|
21
|
+
&__content-price {
|
|
22
|
+
font-weight: 500;
|
|
23
|
+
font-family: "PingFang SC";
|
|
24
|
+
text-align: left;
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: baseline;
|
|
27
|
+
.smallIcon {
|
|
28
|
+
color: #fd2b54;
|
|
29
|
+
font-size: vmin(40);
|
|
30
|
+
line-height: vmin(40);
|
|
31
|
+
}
|
|
32
|
+
.boldIcon {
|
|
33
|
+
color: #fd2b54;
|
|
34
|
+
font-size: vmin(80);
|
|
35
|
+
line-height: vmin(80);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
&__content-describe {
|
|
39
|
+
margin-top: vmin(28);
|
|
40
|
+
color: #333333;
|
|
41
|
+
font-size: vmin(28);
|
|
42
|
+
font-weight: 400;
|
|
43
|
+
font-family: "PingFang SC";
|
|
44
|
+
text-align: left;
|
|
45
|
+
line-height: vmin(40);
|
|
46
|
+
span {
|
|
47
|
+
display: block;
|
|
48
|
+
margin-bottom: vmin(8);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
&__btn {
|
|
52
|
+
width: vmin(400);
|
|
53
|
+
height: vmin(80);
|
|
54
|
+
border-radius: vmin(8);
|
|
55
|
+
opacity: 1;
|
|
56
|
+
background: linear-gradient(270deg, #ff5820 0%, #ff4067 100%);
|
|
57
|
+
color: #ffffff;
|
|
58
|
+
font-size: vmin(32);
|
|
59
|
+
font-weight: 500;
|
|
60
|
+
font-family: "PingFang SC";
|
|
61
|
+
text-align: left;
|
|
62
|
+
margin: vmin(40) vmin(56) vmin(56);
|
|
63
|
+
display: flex;
|
|
64
|
+
align-items: center;
|
|
65
|
+
justify-content: center;
|
|
66
|
+
}
|
|
67
|
+
&__close {
|
|
68
|
+
width: vmin(64);
|
|
69
|
+
height: vmin(64);
|
|
70
|
+
margin: vmin(32) auto 0;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.coupon-receive {
|
|
79
|
+
@include coupon-receive;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// 竖屏pad
|
|
83
|
+
@media screen and (min-width: 768px) and (orientation: portrait) {
|
|
84
|
+
$deviceWidth: 1536 !global;
|
|
85
|
+
|
|
86
|
+
}
|
|
87
|
+
// 横屏pad
|
|
88
|
+
@media screen and (min-height: 768px) and (orientation: landscape) {
|
|
89
|
+
$deviceWidth: 1536 !global;
|
|
90
|
+
|
|
91
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
<!--subpkg/npm-compoent/miniprogram_npm/xiaoe_mp_npm/CouponReceivePopup/index.wxml-->
|
|
2
|
+
<view class="coupon-receive">
|
|
3
|
+
<van-popup
|
|
4
|
+
show="{{ showPopup }}"
|
|
5
|
+
round
|
|
6
|
+
bind:click-overlay="closePopup"
|
|
7
|
+
bind:close="closePopup"
|
|
8
|
+
custom-class="receive-popup"
|
|
9
|
+
z-index="500"
|
|
10
|
+
>
|
|
11
|
+
<view class="receive-container" style="background-image: url({{backgroundImageUrl}});">
|
|
12
|
+
<view class="receive-container__content">
|
|
13
|
+
<view class="receive-container__content-price">
|
|
14
|
+
<span class="smallIcon">¥</span>
|
|
15
|
+
<span class="boldIcon">{{ price.ToFilter(couponInfo.price) }}</span>
|
|
16
|
+
<span class="smallIcon" wx:if="{{isShowPoint}}">.{{ price.fixedFont(couponInfo.price) }}</span>
|
|
17
|
+
</view>
|
|
18
|
+
<view class="receive-container__content-describe">
|
|
19
|
+
<!-- 无门槛 -->
|
|
20
|
+
<span wx:if="{{couponInfo.require_price == 0}}">无门槛</span>
|
|
21
|
+
<!-- 满xx元可用 -->
|
|
22
|
+
<span wx:else>满{{ couponInfo.require_price / 100 }}元可用</span>
|
|
23
|
+
<!-- 全部商品可用 -->
|
|
24
|
+
<span wx:if="{{couponInfo.type == 1}}">全部商品可用</span>
|
|
25
|
+
<!-- 部分商品可用 -->
|
|
26
|
+
<span wx:else>部分商品可用</span>
|
|
27
|
+
<!-- 领取次日x天内有效 / 自领取起x天内有效-->
|
|
28
|
+
<span
|
|
29
|
+
wx:if="{{couponInfo.valid_day}}"
|
|
30
|
+
>{{ couponInfo.valid_after == 1 ? '领取次日' : '自领取起'}}{{couponInfo.valid_day}}天内有效</span>
|
|
31
|
+
<!-- 有效期至 -->
|
|
32
|
+
<span
|
|
33
|
+
wx:if="{{!couponInfo.valid_day && couponInfo.valid_at && couponInfo.invalid_at}}"
|
|
34
|
+
>有效期至：{{price.formatDateToMinte(couponInfo.invalid_at) }}</span>
|
|
35
|
+
<!-- <span
|
|
36
|
+
wx:if="{{!couponInfo.valid_day && couponInfo.valid_at && couponInfo.invalid_at}}"
|
|
37
|
+
>有效期至：{{couponInfo.invalid_at}}</span> -->
|
|
38
|
+
</view>
|
|
39
|
+
</view>
|
|
40
|
+
<view class="receive-container__btn" catchtap="goGoods">立即用券</view>
|
|
41
|
+
</view>
|
|
42
|
+
<image src="{{closeBtnUrl}}" alt class="receive-container__close" catchtap="closePopup" />
|
|
43
|
+
</van-popup>
|
|
44
|
+
</view>
|
|
45
|
+
|
|
46
|
+
<wxs module="price">
|
|
47
|
+
// 做数值过滤，value-要处理的数字 ToFix2-默认保留两位，默认转分转元，除以100。其他除以10(如折扣)
|
|
48
|
+
var ToFilter = function(data, ToFix2 = true) {
|
|
49
|
+
var result = (data / 100).toString();
|
|
50
|
+
if (!ToFix2) {
|
|
51
|
+
result = (data / 10).toString();
|
|
52
|
+
}
|
|
53
|
+
if (result.indexOf('.') > 0) {
|
|
54
|
+
return result.split('.')[0];
|
|
55
|
+
} else {
|
|
56
|
+
return result;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
// 小数点后的样式补充 ToFix2-默认保留2位,其他保留1位
|
|
60
|
+
var fixedFont = function(data, ToFix2 = true) {
|
|
61
|
+
if (data) {
|
|
62
|
+
var result = (data / 100).toString();
|
|
63
|
+
if (!ToFix2) {
|
|
64
|
+
result = (data / 10).toString();
|
|
65
|
+
}
|
|
66
|
+
if (result.toString().indexOf('.') > -1) {
|
|
67
|
+
return result.split('.')[1];
|
|
68
|
+
} else {
|
|
69
|
+
return '';
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
// 时间精确到分
|
|
74
|
+
var formatDateToMinte = function(date) {
|
|
75
|
+
var lastIndex = date.lastIndexOf(":");
|
|
76
|
+
return date.substring(0, lastIndex).replace(getRegExp('-','g'), '.');
|
|
77
|
+
};
|
|
78
|
+
module.exports={
|
|
79
|
+
ToFilter:ToFilter,
|
|
80
|
+
fixedFont:fixedFont,
|
|
81
|
+
formatDateToMinte: formatDateToMinte
|
|
82
|
+
}
|
|
83
|
+
</wxs>
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
.coupon-receive .receive-popup {
|
|
2
|
+
background-color: transparent;
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
}
|
|
6
|
+
.coupon-receive .receive-popup .receive-container {
|
|
7
|
+
width: 68.26667vmin;
|
|
8
|
+
height: 101.33333vmin;
|
|
9
|
+
background-size: 100% 100%;
|
|
10
|
+
}
|
|
11
|
+
.coupon-receive .receive-popup .receive-container__content {
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
margin: 37.33333vmin 4.26667vmin 4.26667vmin;
|
|
15
|
+
padding: 4.26667vmin 3.2vmin 3.2vmin;
|
|
16
|
+
}
|
|
17
|
+
.coupon-receive .receive-popup .receive-container__content-price {
|
|
18
|
+
font-weight: 500;
|
|
19
|
+
font-family: "PingFang SC";
|
|
20
|
+
text-align: left;
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: baseline;
|
|
23
|
+
}
|
|
24
|
+
.coupon-receive .receive-popup .receive-container__content-price .smallIcon {
|
|
25
|
+
color: #fd2b54;
|
|
26
|
+
font-size: 5.33333vmin;
|
|
27
|
+
line-height: 5.33333vmin;
|
|
28
|
+
}
|
|
29
|
+
.coupon-receive .receive-popup .receive-container__content-price .boldIcon {
|
|
30
|
+
color: #fd2b54;
|
|
31
|
+
font-size: 10.66667vmin;
|
|
32
|
+
line-height: 10.66667vmin;
|
|
33
|
+
}
|
|
34
|
+
.coupon-receive .receive-popup .receive-container__content-describe {
|
|
35
|
+
margin-top: 3.73333vmin;
|
|
36
|
+
color: #333333;
|
|
37
|
+
font-size: 3.73333vmin;
|
|
38
|
+
font-weight: 400;
|
|
39
|
+
font-family: "PingFang SC";
|
|
40
|
+
text-align: left;
|
|
41
|
+
line-height: 5.33333vmin;
|
|
42
|
+
}
|
|
43
|
+
.coupon-receive .receive-popup .receive-container__content-describe span {
|
|
44
|
+
display: block;
|
|
45
|
+
margin-bottom: 1.06667vmin;
|
|
46
|
+
}
|
|
47
|
+
.coupon-receive .receive-popup .receive-container__btn {
|
|
48
|
+
width: 53.33333vmin;
|
|
49
|
+
height: 10.66667vmin;
|
|
50
|
+
border-radius: 1.06667vmin;
|
|
51
|
+
opacity: 1;
|
|
52
|
+
background: linear-gradient(270deg, #ff5820 0%, #ff4067 100%);
|
|
53
|
+
color: #ffffff;
|
|
54
|
+
font-size: 4.26667vmin;
|
|
55
|
+
font-weight: 500;
|
|
56
|
+
font-family: "PingFang SC";
|
|
57
|
+
text-align: left;
|
|
58
|
+
margin: 5.33333vmin 7.46667vmin 7.46667vmin;
|
|
59
|
+
display: flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
}
|
|
63
|
+
.coupon-receive .receive-popup .receive-container__close {
|
|
64
|
+
width: 8.53333vmin;
|
|
65
|
+
height: 8.53333vmin;
|
|
66
|
+
margin: 4.26667vmin auto 0;
|
|
67
|
+
}
|