App.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  1. <script>
  2. /**
  3. * vuex管理登陆状态,具体可以参考官方登陆模板示例
  4. */
  5. import {
  6. mapState,
  7. mapMutations
  8. } from 'vuex';
  9. // #ifdef H5
  10. import {
  11. weixindata,
  12. weixinlocation
  13. } from './utils/wxAuthorized';
  14. // #endif
  15. export default {
  16. data() {
  17. return {
  18. /* 保存微信信息 */
  19. appData: {},
  20. weixinObj: '' //保存微信对象
  21. };
  22. },
  23. computed: {
  24. ...mapState(['project_area'])
  25. },
  26. methods: {
  27. ...mapMutations('user', ['setUserInfo', 'login', 'hasLogin']),
  28. },
  29. onLaunch: function(urlObj) {
  30. let obj = this;
  31. // 加载缓存中的用户信息
  32. let userInfo = uni.getStorageSync('userInfo') || '';
  33. console.log(userInfo,'bba');
  34. // 判断是否拥有用户信息
  35. if (userInfo.id) {
  36. //更新登陆状态
  37. uni.getStorage({
  38. key: 'userInfo',
  39. success: res => {
  40. obj.setUserInfo(res.data);
  41. obj.login(res.data);
  42. }
  43. });
  44. }
  45. // #ifdef H5
  46. //判断是否已经缓存浏览器
  47. let bool = uni.getStorageSync('weichatBrowser') || '';
  48. if (bool === '') {
  49. //判断是否为微信浏览
  50. bool = navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger';
  51. // 保存当前是否为微信内核浏览器
  52. uni.setStorageSync('weichatBrowser', bool);
  53. }
  54. if (bool) {
  55. // 加载微信信息
  56. weixindata();
  57. }
  58. // #endif
  59. // console.log('App Luanch')
  60. // obj.audioMusic = uni.createInnerAudioContext(); //创建对象
  61. // obj.audioMusic.autoplay = true; //是否自动播放
  62. // obj.audioMusic.loop = true; //是否循坏播放
  63. // obj.audioMusic.onPlay(function(){
  64. // console.log('音乐开始播放了。。。。')
  65. // })
  66. // obj.audioMusic.onError(function(res){
  67. // console.log(res)
  68. // })
  69. },
  70. onShow: function() {
  71. // 加载拦截
  72. // console.log('App Show');
  73. // console.log(this.$u.config.v);
  74. },
  75. onHide: function() {
  76. // console.log('App Hide');
  77. }
  78. };
  79. </script>
  80. <style lang="scss">
  81. @import "uview-ui/index.scss";
  82. view,
  83. scroll-view,
  84. swiper,
  85. swiper-item,
  86. cover-view,
  87. cover-image,
  88. icon,
  89. text,
  90. rich-text,
  91. progress,
  92. button,
  93. checkbox,
  94. form,
  95. input,
  96. label,
  97. radio,
  98. slider,
  99. switch,
  100. textarea,
  101. navigator,
  102. audio,
  103. camera,
  104. image,
  105. video {
  106. box-sizing: border-box;
  107. }
  108. /* flex布局-整体居中 */
  109. .flex-center {
  110. display: flex;
  111. align-items: center;
  112. justify-content: center;
  113. }
  114. /* flex布局-上下居中 */
  115. .flex-upDown-center {
  116. display: flex;
  117. align-items: center;
  118. }
  119. //单行排列,居中
  120. .flex_direction {
  121. display: flex;
  122. flex-direction: column;
  123. align-items: center;
  124. }
  125. //单行字体省略
  126. .word1_ellipsis {
  127. text-overflow: ellipsis; //显示 ...
  128. overflow: hidden; //隐藏文字
  129. white-space: nowrap; //不换行
  130. }
  131. //多行字体省略
  132. .word2_ellipsis{
  133. overflow: hidden;
  134. text-overflow: ellipsis;
  135. display: -webkit-box;
  136. -webkit-line-clamp: 2;//在第几行显示...
  137. -webkit-box-orient: vertical;
  138. }
  139. //右外边距
  140. .m-r25 {
  141. margin-right: 25rpx;
  142. }
  143. .m-r15 {
  144. margin-right: 15rpx;
  145. }
  146. .flex1 {
  147. display: flex;
  148. align-items: center;
  149. justify-content: space-between;
  150. }
  151. .flex-start {
  152. display: flex;
  153. align-items: center;
  154. justify-content: flex-start;
  155. }
  156. .flex {
  157. display: flex;
  158. }
  159. .position-relative {
  160. position: relative;
  161. }
  162. /* 骨架屏替代方案 */
  163. .Skeleton {
  164. background: #f3f3f3;
  165. padding: 20rpx 0;
  166. border-radius: 8rpx;
  167. }
  168. /* 图片载入替代方案 */
  169. .image-wrapper {
  170. font-size: 0;
  171. background: #f3f3f3;
  172. border-radius: 4px;
  173. image {
  174. width: 100%;
  175. height: 100%;
  176. transition: 0.6s;
  177. opacity: 0;
  178. &.loaded {
  179. opacity: 1;
  180. }
  181. }
  182. }
  183. // 设置富文本中图片最大宽度
  184. uni-rich-text img {
  185. max-width: 100% !important;
  186. }
  187. /*边框*/
  188. .b-b:after,
  189. .b-t:after {
  190. position: absolute;
  191. z-index: 3;
  192. left: 0;
  193. right: 0;
  194. height: 0;
  195. content: '';
  196. transform: scaleY(0.5);
  197. border-bottom: 1px solid $border-color-base;
  198. }
  199. .b-b:after {
  200. bottom: 0;
  201. }
  202. .b-t:after {
  203. top: 0;
  204. }
  205. /* button样式改写 */
  206. uni-button,
  207. button {
  208. height: 80rpx;
  209. line-height: 80rpx;
  210. font-size: $font-lg + 2rpx;
  211. font-weight: normal;
  212. &.no-border:before,
  213. &.no-border:after {
  214. border: 0;
  215. }
  216. }
  217. uni-button[type='default'],
  218. button[type='default'] {
  219. color: $font-color-dark;
  220. }
  221. /* input 样式 */
  222. .input-placeholder {
  223. color: #999999;
  224. }
  225. .placeholder {
  226. color: #999999;
  227. }
  228. // 边距样式
  229. @for $i from 1 to 4 {
  230. .margin-l-#{$i * 10} {
  231. margin-left: $i * 10rpx !important;
  232. }
  233. .margin-r-#{$i * 10} {
  234. margin-right: $i * 10rpx !important;
  235. }
  236. .margin-t-#{$i * 10} {
  237. margin-top: $i * 10rpx !important;
  238. }
  239. .margin-b-#{$i * 10} {
  240. margin-bottom: $i * 10rpx !important;
  241. }
  242. .margin-#{$i * 10} {
  243. margin: $i * 10rpx !important;
  244. }
  245. .margin-v-#{$i * 10} {
  246. margin-top: $i * 10rpx !important;
  247. margin-bottom: $i * 10rpx !important;
  248. }
  249. .margin-c-#{$i * 10} {
  250. margin-left: $i * 10rpx !important;
  251. margin-right: $i * 10rpx !important;
  252. }
  253. .padding-l-#{$i * 10} {
  254. padding-left: $i * 10rpx !important;
  255. }
  256. .padding-r-#{$i * 10} {
  257. padding-right: $i * 10rpx !important;
  258. }
  259. .padding-t-#{$i * 10} {
  260. padding-top: $i * 10rpx !important;
  261. }
  262. .padding-b-#{$i * 10} {
  263. padding-bottom: $i * 10rpx !important;
  264. }
  265. .padding-#{$i * 10} {
  266. padding: $i * 10rpx !important;
  267. }
  268. .padding-v-#{$i * 10} {
  269. padding-top: $i * 10rpx !important;
  270. padding-bottom: $i * 10rpx !important;
  271. }
  272. .padding-c-#{$i * 10} {
  273. padding-left: $i * 10rpx !important;
  274. padding-right: $i * 10rpx !important;
  275. }
  276. }
  277. // 字体大小
  278. .font-size-sm {
  279. font-size: $font-sm;
  280. }
  281. .font-size-base {
  282. font-size: $font-base;
  283. }
  284. .font-size-lg {
  285. font-size: $font-lg;
  286. }
  287. // 字体颜色
  288. .font-color-yellow {
  289. color: $color-yellow;
  290. }
  291. .font-color-gray {
  292. color: $color-gray;
  293. }
  294. .font-color-red {
  295. color: $color-red;
  296. }
  297. // 边框颜色
  298. .border-color-yellow {
  299. border: 1rpx solid $color-yellow;
  300. }
  301. // 修改默认背景颜色
  302. uni-page-wrapper {
  303. background-color: $page-color-base;
  304. }
  305. page {
  306. background-color: $page-color-base;
  307. // 设置默认字体
  308. font-family: PingFang SC, STHeitiSC-Light, Helvetica-Light, arial, sans-serif, Droid Sans Fallback;
  309. }
  310. .clamp {
  311. overflow: hidden;
  312. text-overflow: ellipsis;
  313. white-space: nowrap;
  314. display: block;
  315. }
  316. .clamp2{
  317. overflow:hidden;
  318. text-overflow:ellipsis;
  319. display:-webkit-box;
  320. -webkit-box-orient:vertical;
  321. -webkit-line-clamp:2;
  322. }
  323. </style>