@alipay/ams-checkout 0.0.1703483942-dev.6 → 0.0.1703483942-dev.7
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.
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
import { ANIMATION_TIME, closeImg, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, LOADING_ID, MOCKUP_ID } from "../../constant";
|
|
9
9
|
import { platformEnum } from "../../types";
|
|
10
10
|
import { addSetFontSizeEvent, amsSetSize, getDesignFontSize } from "../../util";
|
|
11
|
-
var componentCss = ".ams-component-container-mobile {\n width: 100%;\n height: 1px;\n position: fixed;\n bottom: -1px;\n left: 0;\n z-index: 1001;\n border-radius: 12px 12px 0 0;\n overflow: hidden;\n}\n.ams-component-container-mobile-animation{\n animation: ams-component-container-slide-in 0.3s ease-in-out;\n}\n\n.ams-component-section-desktop {\n font-size: 0;\n}\n\n.ams-component-container-hidden-mobile {\n width: 100%;\n height: 0px;\n position: fixed;\n bottom: -1px;\n left: 0;\n z-index: 1001;\n background-color: transparent;\n border-radius: 12px 12px 0 0;\n animation: ams-component-container-slide-out 0.26s ease-in forwards;\n overflow: hidden;\n}\n\n.ams-component-section-mobile {\n border-radius: 12px 12px 0 0;\n overflow: hidden;\n font-size: 0;\n}\n\n.ams-component-container-desktop {\n display: block;\n width: 672px;\n position: fixed;\n top: 50%;\n left: 50%;\n z-index: 1001;\n border-radius:
|
|
11
|
+
var componentCss = ".ams-component-container-mobile {\n width: 100%;\n height: 1px;\n position: fixed;\n bottom: -1px;\n left: 0;\n z-index: 1001;\n border-radius: 12px 12px 0 0;\n overflow: hidden;\n}\n.ams-component-container-mobile-animation{\n animation: ams-component-container-slide-in 0.3s ease-in-out;\n}\n\n.ams-component-section-desktop {\n font-size: 0;\n}\n\n.ams-component-container-hidden-mobile {\n width: 100%;\n height: 0px;\n position: fixed;\n bottom: -1px;\n left: 0;\n z-index: 1001;\n background-color: transparent;\n border-radius: 12px 12px 0 0;\n animation: ams-component-container-slide-out 0.26s ease-in forwards;\n overflow: hidden;\n}\n\n.ams-component-section-mobile {\n border-radius: 12px 12px 0 0;\n overflow: hidden;\n font-size: 0;\n}\n\n.ams-component-container-desktop {\n display: block;\n width: 672px;\n position: fixed;\n top: 50%;\n left: 50%;\n z-index: 1001;\n border-radius: 12px;\n overflow: hidden;\n transform-origin: 50% 50%;\n}\n.ams-component-container-desktop-animation{\n animation: ams-component-container-zoom-in 0.3s ease-in-out;\n animation-fill-mode: forwards\n}\n\n@keyframes ams-component-container-zoom-out {\n 0% {\n transform: translate(-50%, -50%) scale(1);\n -webkit-transform: translate(-50%, -50%) scale(1);\n opacity: 1\n }\n \n 100% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.4);\n -webkit-transform: translate(-50%, -50%) scale(0.4);\n }\n}\n\n@keyframes ams-component-container-zoom-in {\n 0% {\n transform: translate(-50%, -50%) scale(0.4);\n opacity: 0\n }\n\n 80% {\n opacity: 1\n }\n\n 100% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n\n.ams-component-container-hidden-desktop {\n display: block;\n position: fixed;\n top: 50%;\n left: 50%;\n z-index: 1001;\n border-radius: 8px;\n overflow: hidden;\n animation: ams-component-container-zoom-out 0.3s ease-in-out;\n animation-fill-mode: forwards;\n transform-origin: 50% 50%;\n}\n\n.ams-component-loading {\n width: 0.8em;\n height:0.8em;\n background: rgba(0, 0, 0, 0.5);\n border-radius: 8px;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.ams-component-loading .line {\n width: 40px;\n height: 40px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.ams-component-loading .line div {\n position: absolute;\n left: 17.67px;\n top: 0;\n width: 5.33px;\n height: 40px;\n}\n\n.ams-component-loading .line div:before,\n.ams-component-loading .line div:after {\n content: '';\n display: block;\n height: 13.33px;\n background: #fcfcfc;\n border-radius: 5.3px;\n}\n.ams-component-loading .line div:after {\n margin-top: 13.33px;\n}\n\n.ams-component-loading .line div:nth-child(2) {\n -webkit-transform: rotate(45deg);\n}\n\n.ams-component-loading .line div:nth-child(3) {\n -webkit-transform: rotate(90deg);\n}\n\n.ams-component-loading .line div:nth-child(4) {\n -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n.ams-component-loading .line div:nth-child(1):before {\n -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):before {\n -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):before {\n -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):before {\n -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-loading .line div:nth-child(1):after {\n -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):after {\n -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):after {\n -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):after {\n -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-loading-logo {\n width: 0.44em;\n height: 0.44em;\n -webkit-transform:rotate(360deg);\n transform:rotate(360deg);\n -webkit-transition:-webkit-transform 1s linear;\n transition:transform 1s linear;\n animation: ams-component-loading-logo 1s linear infinite;\n}\n\n.asm-component-close-block-desktop {\n position: absolute;\n width: 40px;\n height: 40px;\n right: 0;\n top: 0;\n cursor: pointer;\n}\n.asm-component-close-block-btn-desktop {\n width: 11px;\n height: 11px;\n object-fit: fill;\n position: absolute;\n right: 18.7px;\n top: 26.7px;\n}\n.asm-component-close-block-hidden {\n width: 0px !important;\n height: 0px !important;\n visibility: hidden;\n}\n.asm-component-close-block-mobile {\n position: absolute;\n width: 0.4em;\n height: 0.4em;\n right: 0;\n top: 0;\n cursor: pointer;\n z-index: 1009;\n}\n\n.asm-component-close-block-btn-mobile {\n width: 0.11em;\n height: 0.11em;\n object-fit: fill;\n position: absolute;\n right: 0.147em;\n top: 0.167em;\n}\n\n\n.ams-component-container-opacity{\n opacity: 1;\n}\n\n.ams-component-container-opacity:after{\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: block;\n content: \"\";\n z-index: 1010;\n background-color: rgba(0, 0, 0, 0.35);\n border-radius: 12px 12px 0 0;\n}\n\n#ams-component-retention {\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n transform-origin: 50%;\n height: auto;\n display: none;\n z-index: 1009;\n}\n\n.ams-component-retention-show {\n display: flex !important;\n animation: ams-component-container-zoom-in 0.3s ease-in-out;\n animation-fill-mode: forwards\n}\n\n.ams-component-retention-hidden {\n display: flex !important;\n animation: ams-component-container-zoom-out 0.3s ease-in-out;\n -webkit-animation: ams-component-container-zoom-out 0.3s ease-in-out;\n animation-fill-mode: forwards;\n -webkit-animation-fill-mode: forwards;\n}\n\n.ams-component-retention-mobile {\n width: 294px;\n border-radius: 12px;\n padding: 24px 0;\n background-color: #fff;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n box-sizing: border-box;\n}\n\n.ams-component-retention-desktop {\n width: 544px;\n border-radius: 12px;\n padding: 32px;\n background-color: #fff;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n box-sizing: border-box;\n}\n\n@media screen and (max-width: 300px) {\n .ams-component-retention-mobile {\n transform: translate(-50%, -50%) scale(0.8);\n }\n}\n\n.ams-component-retention-title-mobile {\n width: 100%;\n font-style: normal;\n font-weight: 500;\n font-size: 16px;\n line-height: 24px;\n color: #2A3A52;\n text-align: center;\n padding: 0 16px;\n box-sizing: border-box;\n}\n\n.ams-component-retention-title-desktop {\n text-align: left;\n width: 100%;\n font-style: normal;\n font-weight: 500;\n font-size: 16px;\n line-height: 24px;\n color: #2A3A52;\n}\n\n.ams-component-retention-sub-title-mobile {\n width: 100%;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #7C8CA3;\n margin-top: 8px;\n text-align: center;\n padding: 0 16px;\n box-sizing: border-box;\n}\n\n.ams-component-retention-sub-title-desktop {\n text-align: left;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #7C8CA3;\n margin-top: 10px;\n}\n\n.ams-component-retention-btn-block-mobile {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n margin-top: 24px;\n padding: 0 24px;\n box-sizing: border-box;\n}\n\n.ams-component-retention-btn-block-desktop {\n width: 100%;\n margin-top: 24px;\n}\n\n#ams-component-retention-remain {\n background: #0079FF;\n border-radius: 100px;\n font-style: normal;\n font-weight: 500;\n text-align: center;\n box-sizing: border-box;\n color: #FFFFFF;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.ams-component-retention-remain-mobile {\n width: 100%;\n height: 44px;\n font-size: 16px;\n line-height: 44px;\n padding: 0 6px;\n}\n\n.ams-component-retention-remain-desktop {\n height: 44px;\n font-size: 16px;\n line-height: 44px;\n display: inline-block;\n padding: 0 24px;\n float: right;\n cursor: pointer;\n padding: 0 16px;\n max-width: 225px;\n min-width: 159px;\n}\n\n#ams-component-retention-leave {\n border-radius: 100px;\n border: 1px solid #0079FF;\n font-style: normal;\n font-weight: 500;\n text-align: center;\n box-sizing: border-box;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.ams-component-retention-leave-mobile {\n width: 100%;\n height: 44px;\n font-size: 16px;\n line-height: 44px;\n color: #1677FF;\n margin-top: 12px;\n padding: 0 6px;\n}\n\n.ams-component-retention-leave-desktop {\n height: 44px;\n font-size: 16px;\n line-height: 44px;\n color: #1677FF;\n display: inline-block;\n padding: 0 24px;\n float: right;\n margin-right: 16px;\n cursor: pointer;\n padding: 0 16px;\n max-width: 225px;\n min-width: 144px;\n}\n.".concat(MOCKUP_ID, "-hidden{\nanimation: ").concat(MOCKUP_ID, "-opacity 0.3s ease-in-out;\n animation-fill-mode: forwards\n}\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes ").concat(MOCKUP_ID, "-opacity {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}\n");
|
|
12
12
|
export var componentAddCSS = function componentAddCSS() {
|
|
13
13
|
var style = document.createElement('style');
|
|
14
14
|
style.type = 'text/css';
|
|
@@ -123,6 +123,7 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
|
123
123
|
var _this$_renderParams3,
|
|
124
124
|
_this = this;
|
|
125
125
|
var product = (_this$_renderParams3 = this._renderParams) === null || _this$_renderParams3 === void 0 || (_this$_renderParams3 = _this$_renderParams3.paymentSessionMetaData) === null || _this$_renderParams3 === void 0 || (_this$_renderParams3 = _this$_renderParams3.paymentSessionConfig) === null || _this$_renderParams3 === void 0 ? void 0 : _this$_renderParams3.productScene;
|
|
126
|
+
if (componentSignEnum.CASHIER_PAYMENT_APM === this._componentSign) return;
|
|
126
127
|
if (componentSignEnum.CASHIER_PAYMENT_BANK === this._componentSign) {
|
|
127
128
|
this.AMSSDK.logger.logInfo({
|
|
128
129
|
title: 'sdk_event_security_unneeded_scenarios'
|
|
@@ -246,9 +247,6 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
|
246
247
|
this._merchantAppointParam = renderParams.merchantAppointParam;
|
|
247
248
|
var insertedNode = this._renderDisplayType === renderDisplayTypeEnum.inline ? "#".concat(COMPONENT_CONTAINER_ID) : this._selector;
|
|
248
249
|
this.initLoggerMeta();
|
|
249
|
-
this.AMSSDK.logger.logInfo({
|
|
250
|
-
title: 'sdk_event_createComponent'
|
|
251
|
-
}).send();
|
|
252
250
|
this.initSecurity();
|
|
253
251
|
this._performanceData.push({
|
|
254
252
|
key: 'sdk_create_component',
|
|
@@ -986,7 +984,6 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
|
986
984
|
var cashier = document.getElementById(COMPONENT_CONTAINER_ID);
|
|
987
985
|
cashier.style.height = "".concat(data.context.data.height, "px");
|
|
988
986
|
if (this._renderDisplayType === renderDisplayTypeEnum.popup) {
|
|
989
|
-
this.dismissLoadingFunc();
|
|
990
987
|
if (this.platform === 'desktop') {
|
|
991
988
|
cashier.classList.add("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
|
|
992
989
|
if (data.context.data.width) cashier.style.width = "".concat(data.context.data.width, "px");
|
|
@@ -1014,6 +1011,7 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
|
1014
1011
|
cashier.style.transition = 'height 0.28s ease-in-out';
|
|
1015
1012
|
}, 500);
|
|
1016
1013
|
}
|
|
1014
|
+
this.dismissLoadingFunc();
|
|
1017
1015
|
}
|
|
1018
1016
|
if (this._renderDisplayType === renderDisplayTypeEnum.inline) {
|
|
1019
1017
|
var _document$getElementB3;
|
|
@@ -1025,7 +1023,7 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
|
1025
1023
|
}, {
|
|
1026
1024
|
key: "handleRedirect",
|
|
1027
1025
|
value: function handleRedirect(data) {
|
|
1028
|
-
var _data$
|
|
1026
|
+
var _data$isDestroy,
|
|
1029
1027
|
_this7 = this;
|
|
1030
1028
|
var _data = typeof data === 'string' ? {
|
|
1031
1029
|
normalUrl: data
|
|
@@ -1034,13 +1032,11 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
|
1034
1032
|
schemeUrl: (data === null || data === void 0 ? void 0 : data.schemeUrl) || '',
|
|
1035
1033
|
normalUrl: (data === null || data === void 0 ? void 0 : data.normalUrl) || '',
|
|
1036
1034
|
target: data === null || data === void 0 ? void 0 : data.target,
|
|
1037
|
-
|
|
1035
|
+
isDestroy: (_data$isDestroy = data === null || data === void 0 ? void 0 : data.isDestroy) !== null && _data$isDestroy !== void 0 ? _data$isDestroy : true
|
|
1038
1036
|
});
|
|
1039
1037
|
this.AMSSDK.logger.logInfo({
|
|
1040
1038
|
title: 'sdk_event_call_url_start'
|
|
1041
|
-
}, {
|
|
1042
|
-
redirectInfo: JSON.stringify(_data)
|
|
1043
|
-
}).send();
|
|
1039
|
+
}, _objectSpread({}, data)).send();
|
|
1044
1040
|
var successCallback = function successCallback(type, url) {
|
|
1045
1041
|
_this7.dispatchToSDK(EVENT.eventCallback.name, {
|
|
1046
1042
|
code: eventCodeEnum.SDK_CALL_URL_SUCCESS,
|
|
@@ -1081,7 +1077,8 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
|
1081
1077
|
window.location.replace(_data.normalUrl);
|
|
1082
1078
|
return;
|
|
1083
1079
|
}
|
|
1084
|
-
|
|
1080
|
+
// 销毁iframe和全局loading
|
|
1081
|
+
if (_data !== null && _data !== void 0 && _data.isDestroy) this.cleanContainer();
|
|
1085
1082
|
this.AMSSDK._redirect({
|
|
1086
1083
|
applinkUrl: _data === null || _data === void 0 ? void 0 : _data.applinkUrl
|
|
1087
1084
|
}).then(function () {
|
|
@@ -1123,7 +1120,7 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
|
1123
1120
|
this.dispatchToSDK(EVENT.eventCallback.name, {
|
|
1124
1121
|
code: eventInfo.eventName,
|
|
1125
1122
|
result: {
|
|
1126
|
-
result: eventInfo.eventResult
|
|
1123
|
+
result: eventInfo.eventResult || {}
|
|
1127
1124
|
}
|
|
1128
1125
|
});
|
|
1129
1126
|
}
|