su-tabbar.js 5.1 KB

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