App.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  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. console.log(options, "onLaunch系统信息");
  50. let params = {};
  51. if (options.query.scene) {
  52. // 对 scene 进行解码
  53. const decodeScene = decodeURIComponent(options.query.scene);
  54. // 拆分参数
  55. const paramPairs = decodeScene.split('&');
  56. paramPairs.forEach((pair) => {
  57. const [key, value] = pair.split('=');
  58. params[key] = value;
  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. } else if(params.upsellCode){
  67. // 用于书籍加价的邀请码,关联订单 id 和 isbn
  68. uni.setStorageSync('upsellCode', params.upsellCode)
  69. that.globalData.upsellCode = params.upsellCode
  70. console.log('解析出的 upsellCode 参数:', params.upsellCode);
  71. this.slientLogin(params.upsellCode,'upsellCode');
  72. }else{
  73. this.slientLogin();
  74. }
  75. }
  76. // 如果链接参数中有一个名为 inviteCode 的参数
  77. if(options.query.inviteCode){
  78. uni.setStorageSync('inviteCode', options.query.inviteCode)
  79. this.slientLogin(options.query.inviteCode,'inviteCode');
  80. }
  81. // 如果链接参数中有一个名为 upsellCode 的参数
  82. if(options.query.upsellCode){
  83. uni.setStorageSync('upsellCode', options.query.upsellCode)
  84. that.globalData.upsellCode = options.query.upsellCode
  85. this.slientLogin(options.query.upsellCode,'upsellCode');
  86. }
  87. },
  88. methods: {
  89. slientLogin(code2,type) {
  90. uni.login({
  91. success(res) {
  92. let data = { code: res.code }
  93. if(type){
  94. data[type] = code2
  95. }
  96. uni.setStorageSync('loginType', data)
  97. console.log(data, "登录参数onLaunch");
  98. uni.$u.http
  99. .post("/user/wxLogin", data)
  100. .then((response) => {
  101. if (response.code == 200) {
  102. console.log(response.data,data, "登录成功");
  103. uni.setStorageSync("loginSuccess", response.data);
  104. uni.setStorageSync("token", response.data.token);
  105. }
  106. });
  107. },
  108. fail: (err) => {
  109. console.log(err, "wx.login登录失败");
  110. },
  111. });
  112. },
  113. },
  114. };
  115. </script>
  116. <style lang="scss">
  117. // ===
  118. // === 注意:此处导入的css,会作用于全部.vue文件,请适量导入
  119. // ===
  120. body {
  121. font-family: PingFang-SC-Regular, PingFang-SC;
  122. }
  123. page {
  124. background-color: $app-theme-bg-gray-deep-color;
  125. }
  126. @import "uview-ui/index.scss";
  127. @import "./static/css/common.scss";
  128. /* 解决小程序和app滚动条的问题 */
  129. /* #ifdef MP-WEIXIN || APP-PLUS */
  130. ::-webkit-scrollbar {
  131. display: none;
  132. width: 0 !important;
  133. height: 0 !important;
  134. -webkit-appearance: none;
  135. background: transparent;
  136. color: transparent;
  137. }
  138. /* #endif */
  139. /* 解决H5 的问题 */
  140. /* #ifdef H5 */
  141. uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
  142. /* 隐藏滚动条,但依旧具备可以滚动的功能 */
  143. display: none;
  144. width: 0 !important;
  145. height: 0 !important;
  146. -webkit-appearance: none;
  147. background: transparent;
  148. color: transparent;
  149. }
  150. /* #endif */
  151. .shu-elip-1 {
  152. overflow: hidden;
  153. text-overflow: ellipsis;
  154. white-space: nowrap;
  155. }
  156. .shu-elip-2 {
  157. display: -webkit-box;
  158. overflow: hidden;
  159. text-overflow: ellipsis;
  160. word-wrap: break-word;
  161. white-space: normal !important;
  162. -webkit-line-clamp: 2;
  163. -webkit-box-orient: vertical;
  164. }
  165. // 导出 scss 变量用于在 script 下使用
  166. .price_color {
  167. color: $app-theme-text-money-color;
  168. }
  169. .color_blue {
  170. color: $app-theme-blue;
  171. }
  172. .btnGroup {
  173. display: flex;
  174. align-items: center;
  175. .btn {
  176. margin: 0 10rpx;
  177. }
  178. }
  179. .mallbtn {
  180. min-width: 200rpx;
  181. line-height: 66rpx;
  182. padding: 0 20rpx;
  183. border-radius: 36rpx;
  184. color: #ffffff;
  185. margin-right: 20rpx;
  186. text-align: center;
  187. flex: 1;
  188. padding: 0 30rpx;
  189. }
  190. .soldOutBtn {
  191. @extend .mallbtn;
  192. background-color: $app-theme-nobuy-bg-color;
  193. }
  194. .joinCartBtn {
  195. @extend .mallbtn;
  196. background-color: $app-theme-joincart-bg-color;
  197. }
  198. .buyBtn {
  199. @extend .mallbtn;
  200. background-color: $app-theme-buybtn-bg-color;
  201. }
  202. </style>