App.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. <script>
  2. import siteinfo from './siteinfo.js';
  3. import http from './static/js/http.js'
  4. export default {
  5. onLaunch: function() {
  6. // console.log('App Launch')
  7. },
  8. onShow: function(options) {
  9. // console.log(options, 'App Show')
  10. // 判断是否开启语音播报
  11. if (this.globalData.openYuyin && this.globalData.yuyinStoreId) {
  12. this.initSocket(this.globalData.yuyinStoreId)
  13. }
  14. if (options.query.scene) {
  15. uni.setStorageSync("is_login", 2);
  16. uni.setStorageSync("admin_id", options.query.scene);
  17. }
  18. if (options.referrerInfo.extraData) {
  19. uni.setStorageSync("token", options.referrerInfo.extraData.token);
  20. }
  21. const updateManager = uni.getUpdateManager(); // 获取更新管理器对象
  22. updateManager.onCheckForUpdate(function(res) {
  23. if (res.hasUpdate) {
  24. updateManager.onUpdateReady(function() {
  25. uni.showModal({
  26. title: '更新提示',
  27. content: '新版本已经准备好,是否重启应用?',
  28. showCancel: false,
  29. success: res => {
  30. if (res.confirm) {
  31. updateManager.applyUpdate();
  32. }
  33. }
  34. })
  35. })
  36. updateManager.onUpdateFailed(function() {
  37. uni.showModal({
  38. title: '提示',
  39. content: '检查到有新版本,但是下载失败,请检查网络设置',
  40. showCancel: false
  41. })
  42. })
  43. }
  44. })
  45. },
  46. onHide: function() {
  47. // console.log('App Hide')
  48. this.closeSocket()
  49. },
  50. globalData: {
  51. URL: siteinfo.siteroot,
  52. token: null,
  53. playList: [],
  54. isPlay: false,
  55. yuyinSocket: null,
  56. openYuyin: false,
  57. yuyinStoreId: ''
  58. },
  59. methods: {
  60. closeSocket(msg = '', exit = false) {
  61. uni.closeSocket({
  62. code: 100,
  63. reason: msg || "退出小程序 关闭链接",
  64. complete: (r) => {
  65. // console.log("退出时 关闭websocket")
  66. }
  67. })
  68. if (exit) {
  69. this.globalData.openYuyin = false
  70. }
  71. },
  72. connectSocket(urlNoProtocol) {
  73. uni.connectSocket({
  74. url: `wss://${urlNoProtocol}/wss:8282`,
  75. // url:'ws://121.40.165.18:8800',//测试链接
  76. complete: e => {
  77. // console.warn("connect socket complete", e);
  78. }
  79. })
  80. },
  81. initSocket(store_id = '') {
  82. this.globalData.openYuyin = true
  83. this.globalData.yuyinStoreId = store_id
  84. console.log(store_id, '链接websocket')
  85. let that = this,
  86. url = siteinfo.siteroot;
  87. var urlNoProtocol = url.replace(/^https?\:\/\//i, "");
  88. this.connectSocket(urlNoProtocol)
  89. this.globalData.yuyinSocket = uni.onSocketOpen(res => {
  90. uni.onSocketMessage(res => {
  91. console.warn("socket message", res)
  92. let data = JSON.parse(res.data)
  93. if (data.type == 'init') {
  94. http({
  95. url: 'yy/bindSocket',
  96. data: {
  97. store_id,
  98. client_id: data.client_id
  99. },
  100. showLoading:true
  101. }).then(res => {
  102. console.log(res)
  103. })
  104. } else if (data.type == 'yuyin') {
  105. this.play(`${url}${data.route}`)
  106. }
  107. })
  108. uni.onSocketClose(res => {
  109. console.error("socket close", res)
  110. if (res.code != 100) {
  111. // console.warn("重新链接websocket")
  112. this.connectSocket(urlNoProtocol)
  113. }
  114. })
  115. })
  116. uni.onSocketError(res => {
  117. // console.warn("socket error", res)
  118. // this.connectSocket(urlNoProtocol)
  119. })
  120. },
  121. // 播放语音
  122. play(src = '', isNext = false) {
  123. // console.log(this.globalData.isPlay, !isNext, 'isPlay')
  124. if (this.globalData.isPlay && !isNext) {
  125. // console.log("加入队列");
  126. this.globalData.playList.push(src)
  127. // console.log(this.globalData.playList);
  128. return false
  129. }
  130. this.globalData.isPlay = true
  131. // console.log("播放来单提醒", src)
  132. const innerAudioContext = uni.createInnerAudioContext();
  133. innerAudioContext.autoplay = true;
  134. innerAudioContext.src = src;
  135. innerAudioContext.onPlay(() => {
  136. // console.log('开始播放');
  137. });
  138. innerAudioContext.onError((res) => {
  139. // console.log(res.errMsg);
  140. // console.log(res.errCode);
  141. });
  142. innerAudioContext.onEnded((res) => {
  143. //播放完成,播放下一条
  144. // console.log("播放完成", res);
  145. this.execPlayList()
  146. })
  147. },
  148. //播放队列
  149. execPlayList() {
  150. // console.log("播放队列");
  151. let list = this.globalData.playList
  152. if (list.length > 0) {
  153. let src = list.splice(0, 1)[0]
  154. this.globalData.play = list
  155. this.play(src, true)
  156. } else {
  157. this.globalData.isPlay = false
  158. }
  159. },
  160. }
  161. }
  162. </script>
  163. <style>
  164. /*每个页面公共css */
  165. @import url("/static/css/iconfont.css");
  166. @import url("/static/css/flex.css");
  167. @import url("/static/css/common.css");
  168. @import url("/static/css/public.css");
  169. page {
  170. font-family: PingFang SC, PingFang SC-Regular;
  171. }
  172. swiper.square-dot .wx-swiper-dot,
  173. swiper.square-dot .a-swiper-dot,
  174. swiper.square-dot .uni-swiper-dot {
  175. background-color: #ffffff;
  176. opacity: 0.4;
  177. width: 10upx;
  178. height: 10upx;
  179. border-radius: 20upx;
  180. margin: 0 8upx !important;
  181. }
  182. swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active,
  183. swiper.square-dot .a-swiper-dot.a-swiper-dot-active,
  184. swiper.square-dot .uni-swiper-dot.uni-swiper-dot-active {
  185. opacity: 1;
  186. width: 30upx;
  187. }
  188. /* */
  189. .text-1 {
  190. width: 100%;
  191. overflow: hidden;
  192. text-overflow: ellipsis;
  193. white-space: nowrap;
  194. }
  195. .text-2 {
  196. display: -webkit-box;
  197. -webkit-box-orient: vertical;
  198. -webkit-line-clamp: 2;
  199. overflow: hidden;
  200. }
  201. /* 粘性布局 */
  202. .sticky {
  203. position: sticky;
  204. top: 0;
  205. z-index: 100;
  206. }
  207. /* 空列表 */
  208. .list-have-no {
  209. padding: 50rpx 0;
  210. }
  211. .list-have-no-img {
  212. display: block;
  213. width: 598rpx;
  214. height: 222rpx;
  215. margin: 0 auto;
  216. }
  217. /* 页面底部按钮 */
  218. .public-btm-btn-block {
  219. height: 200rpx;
  220. width: 100%;
  221. }
  222. .public-btm-btn-block .btn {
  223. width: 600rpx;
  224. height: 80rpx;
  225. padding: 0;
  226. margin: 0;
  227. border-radius: 16rpx;
  228. background: #C79A4E;
  229. box-shadow: 0 0 20rpx #DDC59D;
  230. position: absolute;
  231. left: 50%;
  232. bottom: 60rpx;
  233. margin-left: -300rpx;
  234. text-align: center;
  235. line-height: 80rpx;
  236. font-size: 32rpx;
  237. font-weight: 500;
  238. color: #fff;
  239. }
  240. /* */
  241. .input-placeholder {
  242. font-size: 28rpx;
  243. color: #969696;
  244. }
  245. /* flex */
  246. .flex-row {
  247. display: flex;
  248. flex-flow: row nowrap;
  249. justify-content: flex-start;
  250. align-items: center;
  251. }
  252. .flex-row-between {
  253. display: flex;
  254. flex-flow: row nowrap;
  255. justify-content: space-between;
  256. align-items: center;
  257. }
  258. .flex-row-center {
  259. display: flex;
  260. flex-flow: row nowrap;
  261. justify-content: center;
  262. align-items: center;
  263. }
  264. .flex-row-start {
  265. display: flex;
  266. flex-flow: row nowrap;
  267. justify-content: flex-start;
  268. align-items: flex-start;
  269. }
  270. .flex-column {
  271. display: flex;
  272. flex-flow: column nowrap;
  273. justify-content: flex-start;
  274. align-items: center;
  275. }
  276. .flex-column-center {
  277. display: flex;
  278. flex-flow: column nowrap;
  279. justify-content: center;
  280. align-items: center;
  281. }
  282. .flex-column-between {
  283. display: flex;
  284. flex-flow: column nowrap;
  285. justify-content: space-between;
  286. align-items: center;
  287. }
  288. .flex-column-between-start {
  289. display: flex;
  290. flex-flow: column nowrap;
  291. justify-content: space-between;
  292. align-items: start;
  293. }
  294. .flex-y-bottom {
  295. display: -webkit-box;
  296. display: -webkit-flex;
  297. display: flex;
  298. -webkit-box-align: end;
  299. -webkit-align-items: flex-end;
  300. -ms-flex-align: end;
  301. -ms-grid-row-align: flex-end;
  302. align-items: flex-end;
  303. }
  304. </style>