su-tabbar.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. "use strict";
  2. const common_vendor = require("../../../common/vendor.js");
  3. const sheep_helper_index = require("../../helper/index.js");
  4. const sheep_index = require("../../index.js");
  5. require("../../helper/test.js");
  6. require("../../helper/digit.js");
  7. require("../../url/index.js");
  8. require("../../store/index.js");
  9. require("../../store/app.js");
  10. require("../../api/promotion/diy.js");
  11. require("../../request/index.js");
  12. require("../../config/index.js");
  13. require("../../platform/index.js");
  14. require("../../platform/provider/wechat/index.js");
  15. require("../../platform/provider/wechat/miniProgram.js");
  16. require("../../api/member/auth.js");
  17. require("../../api/member/social.js");
  18. require("../../api/member/user.js");
  19. require("../../platform/provider/apple/index.js");
  20. require("../../platform/share.js");
  21. require("../../router/index.js");
  22. require("../../hooks/useModal.js");
  23. require("../../helper/throttle.js");
  24. require("../../platform/pay.js");
  25. require("../../api/pay/order.js");
  26. require("../../store/user.js");
  27. require("../../store/cart.js");
  28. require("../../api/trade/cart.js");
  29. require("../../api/pay/wallet.js");
  30. require("../../api/trade/order.js");
  31. require("../../api/promotion/coupon.js");
  32. require("../../store/sys.js");
  33. require("../../store/modal.js");
  34. require("../../config/zIndex.js");
  35. const _sfc_main = {
  36. name: "su-tabbar",
  37. props: {
  38. customStyle: {
  39. type: [Object, String],
  40. default: () => ({})
  41. },
  42. customClass: {
  43. type: String,
  44. default: ""
  45. },
  46. // 跳转的页面路径
  47. url: {
  48. type: String,
  49. default: ""
  50. },
  51. // 页面跳转的类型
  52. linkType: {
  53. type: String,
  54. default: "navigateTo"
  55. },
  56. // 当前匹配项的name
  57. value: {
  58. type: [String, Number, null],
  59. default: ""
  60. },
  61. // 是否为iPhoneX留出底部安全距离
  62. safeAreaInsetBottom: {
  63. type: Boolean,
  64. default: true
  65. },
  66. // 是否显示上方边框
  67. border: {
  68. type: Boolean,
  69. default: true
  70. },
  71. // 元素层级z-index
  72. zIndex: {
  73. type: [String, Number],
  74. default: 10
  75. },
  76. // 选中标签的颜色
  77. activeColor: {
  78. type: String,
  79. default: "#1989fa"
  80. },
  81. // 未选中标签的颜色
  82. inactiveColor: {
  83. type: String,
  84. default: "#7d7e80"
  85. },
  86. // 是否固定在底部
  87. fixed: {
  88. type: Boolean,
  89. default: true
  90. },
  91. // fixed定位固定在底部时,是否生成一个等高元素防止塌陷
  92. placeholder: {
  93. type: Boolean,
  94. default: true
  95. },
  96. midTabBar: {
  97. type: Boolean,
  98. default: false
  99. }
  100. },
  101. data() {
  102. return {
  103. placeholderHeight: 0,
  104. safeBottomHeight: sheep_index.sheep.$platform.device.safeAreaInsets.bottom
  105. };
  106. },
  107. computed: {
  108. tabbarStyle() {
  109. const style = {
  110. zIndex: this.zIndex
  111. };
  112. return sheep_helper_index.deepMerge(style, sheep_helper_index.addStyle(this.customStyle));
  113. },
  114. // 监听多个参数的变化,通过在computed执行对应的操作
  115. updateChild() {
  116. return [this.value, this.activeColor, this.inactiveColor];
  117. },
  118. updatePlaceholder() {
  119. return [this.fixed, this.placeholder];
  120. }
  121. },
  122. watch: {
  123. updateChild() {
  124. this.updateChildren();
  125. },
  126. updatePlaceholder() {
  127. this.setPlaceholderHeight();
  128. }
  129. },
  130. created() {
  131. this.children = [];
  132. },
  133. mounted() {
  134. this.setPlaceholderHeight();
  135. },
  136. methods: {
  137. updateChildren() {
  138. this.children.length && this.children.map((child) => child.updateFromParent());
  139. },
  140. getRect(selector, all) {
  141. return new Promise((resolve) => {
  142. common_vendor.index.createSelectorQuery().in(this)[all ? "selectAll" : "select"](selector).boundingClientRect((rect) => {
  143. if (all && Array.isArray(rect) && rect.length) {
  144. resolve(rect);
  145. }
  146. if (!all && rect) {
  147. resolve(rect);
  148. }
  149. }).exec();
  150. });
  151. },
  152. // 设置用于防止塌陷元素的高度
  153. async setPlaceholderHeight() {
  154. if (!this.fixed || !this.placeholder)
  155. return;
  156. await sheep_helper_index.sleep(20);
  157. this.getRect(".u-tabbar__content").then(({ height = 50 }) => {
  158. this.placeholderHeight = height;
  159. });
  160. }
  161. }
  162. };
  163. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  164. return common_vendor.e({
  165. a: $props.safeAreaInsetBottom
  166. }, $props.safeAreaInsetBottom ? {
  167. b: common_vendor.s({
  168. height: $data.safeBottomHeight + "px"
  169. })
  170. } : {}, {
  171. c: common_vendor.o(() => {
  172. }),
  173. d: common_vendor.n($props.border && "u-border-top"),
  174. e: common_vendor.n($props.fixed && "u-tabbar--fixed"),
  175. f: common_vendor.n({
  176. "mid-tabbar": $props.midTabBar
  177. }),
  178. g: common_vendor.s($options.tabbarStyle),
  179. h: $props.placeholder
  180. }, $props.placeholder ? {
  181. i: $data.placeholderHeight + "px"
  182. } : {});
  183. }
  184. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b5af0eb7"], ["__file", "/Users/RuHu.Xu/Desktop/mall-newfeifan-zx-app/sheep/ui/su-tabbar/su-tabbar.vue"]]);
  185. wx.createComponent(Component);