App.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. <script>
  2. export default {
  3. globalData: {
  4. // 胶囊距上距离
  5. menuTop: 0,
  6. // 导航栏高度
  7. navBarHeight: 0,
  8. // 胶囊距右方间距(方保持左、右间距一致)
  9. menuRight: 0,
  10. // 胶囊距底部间距(保持底部间距一致)
  11. menuBotton: 0,
  12. // 胶囊高度(自定义内容可与胶囊高度保证一致)
  13. menuHeight: 0,
  14. // 状态栏高度
  15. statusBarHeight: 0,
  16. // 安全距离
  17. safeAreaHeight: 0,
  18. // 胶囊宽度
  19. menuWidth: 0,
  20. // 窗口宽度
  21. windowWidth: 0,
  22. // 窗口宽度高度
  23. windowHeight: 0,
  24. // 常规子页面可操作区域高度
  25. pageContentHeight: 0,
  26. },
  27. onLaunch(options) {
  28. const that = this;
  29. // 获取系统信息
  30. const systemInfo = uni.getSystemInfoSync();
  31. // 胶囊按钮位置信息
  32. const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
  33. console.log(menuButtonInfo);
  34. // 导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度
  35. that.globalData.menuTop = menuButtonInfo.top - systemInfo.statusBarHeight;
  36. that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
  37. that.globalData.menuWidth = menuButtonInfo.width;
  38. that.globalData.navBarHeight =
  39. (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
  40. that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
  41. that.globalData.menuHeight = menuButtonInfo.height;
  42. that.globalData.statusBarHeight = systemInfo.statusBarHeight;
  43. that.globalData.safeAreaHeight = systemInfo.safeAreaInsets.bottom;
  44. that.globalData.windowWidth = systemInfo.windowWidth;
  45. that.globalData.windowHeight = systemInfo.windowHeight;
  46. that.globalData.pageContentHeight =
  47. systemInfo.windowHeight -
  48. (that.globalData.navBarHeight + that.globalData.menuTop + that.globalData.menuBotton);
  49. let params = {};
  50. if (options.query.scene) {
  51. // 对 scene 进行解码
  52. const decodeScene = decodeURIComponent(options.query.scene);
  53. // 拆分参数
  54. const paramPairs = decodeScene.split('&');
  55. paramPairs.forEach((pair) => {
  56. const [key, value] = pair.split('=');
  57. params[key] = value;
  58. });
  59. }
  60. console.log('解析出的 scene 参数:', params);
  61. // 假设链接参数中有一个名为 inviteCode 的参数
  62. if (params.inviteCode) {
  63. uni.setStorageSync('inviteCode', params.inviteCode)
  64. console.log('解析出的 inviteCode 参数:', params.inviteCode);
  65. this.slientLogin(params.inviteCode,'inviteCode');
  66. }
  67. // 用于书籍加价的邀请码,关联订单 id 和 isbn
  68. if(params.upsellCode){
  69. uni.setStorageSync('upsellCode', params.upsellCode)
  70. that.globalData.upsellCode = params.upsellCode
  71. console.log('解析出的 upsellCode 参数:', params.upsellCode);
  72. this.slientLogin(params.upsellCode,'upsellCode');
  73. }
  74. },
  75. methods: {
  76. slientLogin(code,type) {
  77. uni.login({
  78. success(res) {
  79. let data = {
  80. code: res.code,
  81. [type]: code,
  82. }
  83. console.log(data, "登录参数");
  84. uni.$u.http
  85. .post("/user/wxLogin", data)
  86. .then((response) => {
  87. if (response.code == 200) {
  88. uni.setStorageSync("token", response.data.token);
  89. }
  90. });
  91. },
  92. fail: (err) => {
  93. console.log(err, "wx.login登录失败");
  94. },
  95. });
  96. },
  97. },
  98. };
  99. </script>
  100. <style lang="scss">
  101. // ===
  102. // === 注意:此处导入的css,会作用于全部.vue文件,请适量导入
  103. // ===
  104. body {
  105. font-family: PingFang-SC-Regular, PingFang-SC;
  106. }
  107. page {
  108. background-color: $app-theme-bg-gray-deep-color;
  109. }
  110. @import "uview-ui/index.scss";
  111. @import "./static/css/common.scss";
  112. /* 解决小程序和app滚动条的问题 */
  113. /* #ifdef MP-WEIXIN || APP-PLUS */
  114. ::-webkit-scrollbar {
  115. display: none;
  116. width: 0 !important;
  117. height: 0 !important;
  118. -webkit-appearance: none;
  119. background: transparent;
  120. color: transparent;
  121. }
  122. /* #endif */
  123. /* 解决H5 的问题 */
  124. /* #ifdef H5 */
  125. uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
  126. /* 隐藏滚动条,但依旧具备可以滚动的功能 */
  127. display: none;
  128. width: 0 !important;
  129. height: 0 !important;
  130. -webkit-appearance: none;
  131. background: transparent;
  132. color: transparent;
  133. }
  134. /* #endif */
  135. .shu-elip-1 {
  136. overflow: hidden;
  137. text-overflow: ellipsis;
  138. white-space: nowrap;
  139. }
  140. .shu-elip-2 {
  141. display: -webkit-box;
  142. overflow: hidden;
  143. text-overflow: ellipsis;
  144. word-wrap: break-word;
  145. white-space: normal !important;
  146. -webkit-line-clamp: 2;
  147. -webkit-box-orient: vertical;
  148. }
  149. // 导出 scss 变量用于在 script 下使用
  150. .price_color {
  151. color: $app-theme-text-money-color;
  152. }
  153. .color_blue {
  154. color: $app-theme-blue;
  155. }
  156. .btnGroup {
  157. display: flex;
  158. align-items: center;
  159. .btn {
  160. margin: 0 10rpx;
  161. }
  162. }
  163. .mallbtn {
  164. min-width: 200rpx;
  165. line-height: 66rpx;
  166. padding: 0 20rpx;
  167. border-radius: 36rpx;
  168. color: #ffffff;
  169. margin-right: 20rpx;
  170. text-align: center;
  171. flex: 1;
  172. padding: 0 30rpx;
  173. }
  174. .soldOutBtn {
  175. @extend .mallbtn;
  176. background-color: $app-theme-nobuy-bg-color;
  177. }
  178. .joinCartBtn {
  179. @extend .mallbtn;
  180. background-color: $app-theme-joincart-bg-color;
  181. }
  182. .buyBtn {
  183. @extend .mallbtn;
  184. background-color: $app-theme-buybtn-bg-color;
  185. }
  186. </style>