index.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _utils = require("../utils");
  6. var _tab = _interopRequireDefault(require("../tab"));
  7. var _tabs = _interopRequireDefault(require("../tabs"));
  8. var _field = _interopRequireDefault(require("../field"));
  9. var _button = _interopRequireDefault(require("../button"));
  10. var _coupon = _interopRequireDefault(require("../coupon"));
  11. // Utils
  12. // Components
  13. var _createNamespace = (0, _utils.createNamespace)('coupon-list'),
  14. createComponent = _createNamespace[0],
  15. bem = _createNamespace[1],
  16. t = _createNamespace[2];
  17. var EMPTY_IMAGE = 'https://img01.yzcdn.cn/vant/coupon-empty.png';
  18. var _default2 = createComponent({
  19. model: {
  20. prop: 'code'
  21. },
  22. props: {
  23. code: String,
  24. closeButtonText: String,
  25. inputPlaceholder: String,
  26. enabledTitle: String,
  27. disabledTitle: String,
  28. exchangeButtonText: String,
  29. exchangeButtonLoading: Boolean,
  30. exchangeButtonDisabled: Boolean,
  31. exchangeMinLength: {
  32. type: Number,
  33. default: 1
  34. },
  35. chosenCoupon: {
  36. type: Number,
  37. default: -1
  38. },
  39. coupons: {
  40. type: Array,
  41. default: function _default() {
  42. return [];
  43. }
  44. },
  45. disabledCoupons: {
  46. type: Array,
  47. default: function _default() {
  48. return [];
  49. }
  50. },
  51. displayedCouponIndex: {
  52. type: Number,
  53. default: -1
  54. },
  55. showExchangeBar: {
  56. type: Boolean,
  57. default: true
  58. },
  59. showCloseButton: {
  60. type: Boolean,
  61. default: true
  62. },
  63. showCount: {
  64. type: Boolean,
  65. default: true
  66. },
  67. currency: {
  68. type: String,
  69. default: '¥'
  70. },
  71. emptyImage: {
  72. type: String,
  73. default: EMPTY_IMAGE
  74. }
  75. },
  76. data: function data() {
  77. return {
  78. tab: 0,
  79. winHeight: window.innerHeight,
  80. currentCode: this.code || ''
  81. };
  82. },
  83. computed: {
  84. buttonDisabled: function buttonDisabled() {
  85. return !this.exchangeButtonLoading && (this.exchangeButtonDisabled || !this.currentCode || this.currentCode.length < this.exchangeMinLength);
  86. },
  87. listStyle: function listStyle() {
  88. return {
  89. height: this.winHeight - (this.showExchangeBar ? 140 : 94) + 'px'
  90. };
  91. }
  92. },
  93. watch: {
  94. code: function code(_code) {
  95. this.currentCode = _code;
  96. },
  97. currentCode: function currentCode(code) {
  98. this.$emit('input', code);
  99. },
  100. displayedCouponIndex: 'scrollToShowCoupon'
  101. },
  102. mounted: function mounted() {
  103. this.scrollToShowCoupon(this.displayedCouponIndex);
  104. },
  105. methods: {
  106. onClickExchangeButton: function onClickExchangeButton() {
  107. this.$emit('exchange', this.currentCode); // auto clear currentCode when not use vModel
  108. if (!this.code) {
  109. this.currentCode = '';
  110. }
  111. },
  112. // scroll to show specific coupon
  113. scrollToShowCoupon: function scrollToShowCoupon(index) {
  114. var _this = this;
  115. if (index === -1) {
  116. return;
  117. }
  118. this.$nextTick(function () {
  119. var _this$$refs = _this.$refs,
  120. card = _this$$refs.card,
  121. list = _this$$refs.list;
  122. /* istanbul ignore next */
  123. if (list && card && card[index]) {
  124. list.scrollTop = card[index].$el.offsetTop - 100;
  125. }
  126. });
  127. },
  128. genEmpty: function genEmpty() {
  129. var h = this.$createElement;
  130. return h("div", {
  131. "class": bem('empty')
  132. }, [h("img", {
  133. "attrs": {
  134. "src": this.emptyImage
  135. }
  136. }), h("p", [t('empty')])]);
  137. },
  138. genExchangeButton: function genExchangeButton() {
  139. var h = this.$createElement;
  140. return h(_button.default, {
  141. "attrs": {
  142. "plain": true,
  143. "type": "danger",
  144. "text": this.exchangeButtonText || t('exchange'),
  145. "loading": this.exchangeButtonLoading,
  146. "disabled": this.buttonDisabled
  147. },
  148. "class": bem('exchange'),
  149. "on": {
  150. "click": this.onClickExchangeButton
  151. }
  152. });
  153. }
  154. },
  155. render: function render() {
  156. var _this2 = this;
  157. var h = arguments[0];
  158. var coupons = this.coupons,
  159. disabledCoupons = this.disabledCoupons;
  160. var count = this.showCount ? " (" + coupons.length + ")" : '';
  161. var title = (this.enabledTitle || t('enable')) + count;
  162. var disabledCount = this.showCount ? " (" + disabledCoupons.length + ")" : '';
  163. var disabledTitle = (this.disabledTitle || t('disabled')) + disabledCount;
  164. var ExchangeBar = this.showExchangeBar && h("div", {
  165. "class": bem('exchange-bar')
  166. }, [h(_field.default, {
  167. "attrs": {
  168. "clearable": true,
  169. "border": false,
  170. "placeholder": this.inputPlaceholder || t('placeholder'),
  171. "maxlength": "20"
  172. },
  173. "class": bem('field'),
  174. "model": {
  175. value: _this2.currentCode,
  176. callback: function callback($$v) {
  177. _this2.currentCode = $$v;
  178. }
  179. }
  180. }), this.genExchangeButton()]);
  181. var onChange = function onChange(index) {
  182. return function () {
  183. return _this2.$emit('change', index);
  184. };
  185. };
  186. var CouponTab = h(_tab.default, {
  187. "attrs": {
  188. "title": title
  189. }
  190. }, [h("div", {
  191. "class": bem('list', {
  192. 'with-bottom': this.showCloseButton
  193. }),
  194. "style": this.listStyle
  195. }, [coupons.map(function (coupon, index) {
  196. return h(_coupon.default, {
  197. "ref": "card",
  198. "key": coupon.id,
  199. "attrs": {
  200. "coupon": coupon,
  201. "currency": _this2.currency,
  202. "chosen": index === _this2.chosenCoupon
  203. },
  204. "nativeOn": {
  205. "click": onChange(index)
  206. }
  207. });
  208. }), !coupons.length && this.genEmpty(), this.slots('list-footer')])]);
  209. var DisabledCouponTab = h(_tab.default, {
  210. "attrs": {
  211. "title": disabledTitle
  212. }
  213. }, [h("div", {
  214. "class": bem('list', {
  215. 'with-bottom': this.showCloseButton
  216. }),
  217. "style": this.listStyle
  218. }, [disabledCoupons.map(function (coupon) {
  219. return h(_coupon.default, {
  220. "attrs": {
  221. "disabled": true,
  222. "coupon": coupon,
  223. "currency": _this2.currency
  224. },
  225. "key": coupon.id
  226. });
  227. }), !disabledCoupons.length && this.genEmpty(), this.slots('disabled-list-footer')])]);
  228. return h("div", {
  229. "class": bem()
  230. }, [ExchangeBar, h(_tabs.default, {
  231. "class": bem('tab'),
  232. "attrs": {
  233. "border": false
  234. },
  235. "model": {
  236. value: _this2.tab,
  237. callback: function callback($$v) {
  238. _this2.tab = $$v;
  239. }
  240. }
  241. }, [CouponTab, DisabledCouponTab]), h("div", {
  242. "class": bem('bottom')
  243. }, [h(_button.default, {
  244. "directives": [{
  245. name: "show",
  246. value: this.showCloseButton
  247. }],
  248. "attrs": {
  249. "round": true,
  250. "type": "danger",
  251. "block": true,
  252. "text": this.closeButtonText || t('close')
  253. },
  254. "class": bem('close'),
  255. "on": {
  256. "click": onChange(-1)
  257. }
  258. })])]);
  259. }
  260. });
  261. exports.default = _default2;