bilingo-ui/eslib/Payment-Common-common-Price.../index.js

import { i as _slicedToArray, _ as _defineProperty } from '../_commonjsHelpers-aeb41076.js';
import React, { useState } from 'react';
import { c as classnames } from '../index-7951fb2f.js';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { f as formatMoney } from '../utils-82346768.js';

var css = ".PriceOptions_options__2AGBn {\n  padding: 20px 50px;\n  border-bottom: 1px dashed #00000017;\n}\n.PriceOptions_options__2AGBn p {\n  font-size: 14px;\n  font-weight: 400;\n  color: #616a79;\n  margin-bottom: 20px;\n}\n.PriceOptions_options__2AGBn .PriceOptions_infoItem__1dYFN {\n  padding-right: 0;\n}\n.PriceOptions_options__2AGBn .PriceOptions_infoItem__1dYFN .PriceOptions_priceItem__2PLhM {\n  background: rgba(243, 243, 243, 0.14);\n  border-radius: 4px;\n  border: 1px solid #cfcfcf;\n  font-size: 14px;\n  font-weight: 600;\n  color: #616a79;\n  display: inline-block;\n  text-align: center;\n  vertical-align: top;\n  height: 30px;\n  width: 70px;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 6px;\n}\n.PriceOptions_options__2AGBn .PriceOptions_infoItem__1dYFN .PriceOptions_priceItem__2PLhM.PriceOptions_active__rlHby {\n  background: rgba(255, 50, 102, 0.1);\n  border-radius: 4px;\n  border: 1px solid #ff3266;\n  color: #616a79;\n}\n.PriceOptions_options__2AGBn .PriceOptions_infoItem__1dYFN .PriceOptions_priceInput__1UYLy {\n  display: inline-block;\n  min-width: 70px;\n  width: auto;\n  margin: 6px;\n  text-align: center;\n}\n.PriceOptions_options__2AGBn .PriceOptions_infoItem__1dYFN button {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  height: 30px;\n  width: 50px;\n  vertical-align: top;\n  padding: 0 5px;\n}\n.PriceOptions_options__2AGBn .PriceOptions_infoItem__1dYFN .PriceOptions_rate__3hVeo {\n  margin-left: 10px;\n}\n.PriceOptions_options__2AGBn .PriceOptions_infoItem__1dYFN .PriceOptions_rate__3hVeo i {\n  margin-right: 5px;\n  color: #1790FF;\n}\n.PriceOptions_options__2AGBn.PriceOptions_small__2Vys4 {\n  padding: 0 0 12px 0;\n  border-bottom: none;\n}\n.PriceOptions_options__2AGBn.PriceOptions_small__2Vys4 p {\n  margin-bottom: 8px;\n}\n.PriceOptions_options__2AGBn.PriceOptions_small__2Vys4 .PriceOptions_infoItem__1dYFN {\n  text-align: center;\n}\n.PriceOptions_options__2AGBn.PriceOptions_small__2Vys4 .PriceOptions_infoItem__1dYFN .PriceOptions_priceItem__2PLhM {\n  border-radius: 6px;\n  height: 32px;\n  width: 72px;\n  margin: 0 0 12px 19px;\n}\n.PriceOptions_options__2AGBn.PriceOptions_small__2Vys4 .PriceOptions_infoItem__1dYFN .PriceOptions_priceItem__2PLhM:first-child {\n  margin: 0 0 12px 0px;\n}\n.PriceOptions_options__2AGBn.PriceOptions_small__2Vys4 .PriceOptions_infoItem__1dYFN .PriceOptions_priceInput__1UYLy {\n  display: block;\n  width: 254px;\n  border-radius: 6px;\n  height: 32px;\n}\n@media (max-width: 768px) {\n  .PriceOptions_options__2AGBn {\n    padding: 20px 20px;\n  }\n  .PriceOptions_options__2AGBn p {\n    font-size: 14px;\n    font-weight: 400;\n    color: #616a79;\n  }\n  .PriceOptions_options__2AGBn .PriceOptions_infoItem__1dYFN {\n    padding-right: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n  .PriceOptions_options__2AGBn .PriceOptions_infoItem__1dYFN .PriceOptions_priceBtn__YfsBe {\n    display: flex;\n    justify-content: space-between;\n  }\n  .PriceOptions_options__2AGBn .PriceOptions_infoItem__1dYFN .PriceOptions_priceItem__2PLhM {\n    display: inline-block;\n    background-color: #fff;\n    width: 74px;\n    height: 36px;\n    line-height: 36px;\n    border-radius: 6px;\n    border: 1px solid #cfcfcf;\n  }\n  .PriceOptions_options__2AGBn .PriceOptions_infoItem__1dYFN .PriceOptions_priceItem__2PLhM.PriceOptions_active__rlHby {\n    background-color: #fff;\n    color: #FF3266FF;\n    border-radius: 4px;\n    border: 1px solid #ff3266;\n  }\n  .PriceOptions_options__2AGBn .PriceOptions_infoItem__1dYFN .PriceOptions_priceInput__1UYLy {\n    border-radius: 6px;\n    height: 36px;\n    width: auto;\n  }\n}\n";
var styles = {"options":"PriceOptions_options__2AGBn","infoItem":"PriceOptions_infoItem__1dYFN","priceItem":"PriceOptions_priceItem__2PLhM","active":"PriceOptions_active__rlHby","priceInput":"PriceOptions_priceInput__1UYLy","rate":"PriceOptions_rate__3hVeo","small":"PriceOptions_small__2Vys4","priceBtn":"PriceOptions_priceBtn__YfsBe"};
styleInject(css);

var FormattedMessage = function FormattedMessage(_ref) {
  var id = _ref.id;
  return id;
};

var PriceOptions = function PriceOptions(_ref2) {
  var price = _ref2.price,
      onPriceChange = _ref2.onPriceChange,
      _ref2$size = _ref2.size,
      _ref2$focusScroll = _ref2.focusScroll,
      _ref2$withTitle = _ref2.withTitle,
      withTitle = _ref2$withTitle === void 0 ? true : _ref2$withTitle,
      inputRef = _ref2.inputRef;
  var defaultOptions = [100, 600, 800]; // 控制是否为其他金额输入情况

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      inputStatus = _useState2[0],
      setInputStatus = _useState2[1];

  return React.createElement("div", {
    className: classnames(styles.options)
  }, withTitle ? React.createElement("p", null, React.createElement(FormattedMessage, {
    id: "pay.price.select.text"
  })) : null, React.createElement("div", {
    className: styles.infoItem,
    style: {
      marginBottom: "-12px"
    }
  }, React.createElement("span", {
    className: styles.priceBtn
  }, defaultOptions.map(function (item) {
    var _classnames;

    return React.createElement("span", {
      className: classnames((_classnames = {}, _defineProperty(_classnames, styles.priceItem, true), _defineProperty(_classnames, styles.active, price === item && !inputStatus), _classnames)),
      key: item,
      onClick: function onClick() {
        onPriceChange(item);
        setInputStatus(false);
      }
    }, React.createElement(FormattedMessage, {
      id: "".concat(formatMoney(item / 100, 0), "\xA5")
    }));
  }))));
};

export default PriceOptions;
//# sourceMappingURL=index.js.map