App.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611
  1. <script>
  2. // app.js
  3. /**
  4. * 新版备注:
  5. * 1. 两个流程 fare_type 0外卖 1自提 默认自提
  6. * 2. 有会员价
  7. * 3. 商品分规格, 有规格商品和无规格商品同时存在
  8. * 4. 获取应用实例 一律直接用getApp()
  9. * 5. 无主动退出
  10. * 6. 用户右上角的分享,只开首页和个人中心,其他页面都关闭
  11. * 7. 如需在接口成功时弹出返回信息,请单独加一下toast,避免与微信的loading冲突(wx.showLoading 与wx.showToast不能同时存在)
  12. * 8. 如需当接口连续调用,共用一个loading时,请传参nextInvoke,且主动控制何时关闭loading
  13. *
  14. * **/
  15. export default {
  16. data() {
  17. return {
  18. };
  19. },
  20. onLaunch() {
  21. let that = this; // 拿code换openid(先放onLaunch试一段)
  22. // uni.login({
  23. // success: function (res) {
  24. // // console.log('获取wxcode',res)
  25. // let params = {
  26. // code: res.code
  27. // };
  28. // myPro
  29. // .wxRequest('user/mini-auth', 'POST', params)
  30. // .then((res) => {
  31. // let result = res.result; // 有token 是老用户
  32. // if (result.token) {
  33. // that.globalData.token = result.token;
  34. // uni.setStorage({
  35. // key: 'token',
  36. // data: result.token
  37. // });
  38. // that.globalData.is_member = result.user.is_member; // 会员 0否 1是
  39. // that.globalData.userInfo = {
  40. // nickname: result.user.nickname,
  41. // thumb: result.user.thumb,
  42. // phone: result.user.phone
  43. // };
  44. // if (result.user.store) {
  45. // that.globalData.role = 1; // 有店铺,即为门店
  46. // } // console.log('用户',that.globalData.userInfo)
  47. // // 拿用户信息(供首页使用)
  48. // } else {
  49. // // 新用户
  50. // that.globalData.openid = result.openid;
  51. // that.globalData.session_key = result.session_key;
  52. // }
  53. // })
  54. // .catch((err) => {
  55. // console.log('报错信息', err);
  56. // uni.showToast({
  57. // title: err,
  58. // icon: 'none'
  59. // });
  60. // });
  61. // },
  62. // fail: function (res) {
  63. // uni.showToast({
  64. // title: '微信未授权成功,请在设置中允许使用用户信息',
  65. // icon: 'none'
  66. // });
  67. // }
  68. // });
  69. },
  70. onShow() {
  71. // console.log('onShow');
  72. let that = this; // 设备信息
  73. uni.getSystemInfo({
  74. success(res) {
  75. // 获取系统信息
  76. const systemInfo = uni.getSystemInfoSync(); // 胶囊按钮位置信息
  77. const menuButtonInfo = uni.getMenuButtonBoundingClientRect(); // 胶囊位置(初始位置)
  78. that.globalData.customTop = menuButtonInfo.top; // 胶囊位置(中间位置)
  79. that.globalData.customCenter = menuButtonInfo.top + menuButtonInfo.height / 2; // 导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度
  80. that.globalData.setBgHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
  81. }
  82. }); // 定位
  83. // that.getLocal();
  84. },
  85. globalData: {
  86. // 测试 domain api imgUrl
  87. // 测试appid: wx3fa706377424c2c9
  88. // domain: "http://singlestore.shanmuzhi.com",
  89. // api: "http://singlestore.shanmuzhi.com/",
  90. // imgUrl: "http://singlestore.shanmuzhi.com",
  91. // 正式 wx4ee6b1b6aa3d1403
  92. // domain: 'https://user.jinyutaoxiaoya.com/',
  93. // api: 'https://user.jinyutaoxiaoya.com/',
  94. // imgUrl: 'https://jinyu-txy.oss-cn-beijing.aliyuncs.com',
  95. location_auth: null,
  96. // 地理位置授权标识 1同意 -1拒绝
  97. lat: 0,
  98. // 衡水市火车站 37.743955
  99. lng: 0,
  100. // 衡水市火车站 115.691485
  101. token: uni.getStorageSync('token') ? uni.getStorageSync('token') : '',
  102. // ceshitoken
  103. openid: null,
  104. session_key: null,
  105. role: null,
  106. // 角色 1为门店 null
  107. userInfo: null,
  108. customTop: null,
  109. // 胶囊位置 顶部
  110. customCenter: null,
  111. // 胶囊位置 中间
  112. setBgHeight: null,
  113. // 导航栏高度
  114. logoTu: '/static/statics/img/logo.png',
  115. is_member: 0,
  116. // 是否为会员 1是 0否
  117. store_id: 1,
  118. // 单店(约定id是1)
  119. // 声明一个对象用于存储请求个数
  120. loadingCount: 0,
  121. // 验证登录
  122. verifyLogin(callBack) {
  123. const that = this;
  124. if (!callBack) {
  125. callBack = function () {};
  126. }
  127. if (!that.globalData.token) {
  128. let pages = getCurrentPages();
  129. if (pages.length > 0) {
  130. uni.setStorage({
  131. key: 'loginCallBackPage',
  132. data: that.pageBackUrl(),
  133. success: function () {
  134. uni.reLaunch({
  135. url: '/pages/login/index/index'
  136. });
  137. }
  138. });
  139. }
  140. callBack(false);
  141. } else {
  142. callBack(true);
  143. }
  144. },
  145. // 回跳地址
  146. pageBackUrl: function () {
  147. let pages = getCurrentPages();
  148. let currentPage = pages[pages.length - 1];
  149. let url = currentPage.route;
  150. let options = JSON.stringify(currentPage.options);
  151. options = options.replace(/[\{\}\"]/g, '');
  152. options = options.replace(/\:/g, '=');
  153. options = options.replace(/\,/g, '&');
  154. url = url + '?' + options; // console.log('回跳地址',url)
  155. return url;
  156. },
  157. // 定位授权
  158. getLocal: function (callback) {
  159. var that = this;
  160. if (callback == undefined) {
  161. callback = function () {
  162. // console.log('定位授权::::默认回调函数')
  163. };
  164. }
  165. uni.getSetting({
  166. success(res) {
  167. if (!res.authSetting['scope.userLocation']) {
  168. // 未授权时,先授权
  169. uni.authorize({
  170. scope: 'scope.userLocation',
  171. success(auth) {
  172. console.log('auth:::::', auth); // 授权成功
  173. if (auth.errMsg == 'authorize:ok') {
  174. // 用户授权成功
  175. that.location_auth = 1; // 执行获取地理位置
  176. that.getLocation(callback);
  177. }
  178. },
  179. fail(auth) {
  180. console.log('auth:::::', auth);
  181. callback(); // 用户拒绝,添加标识
  182. that.location_auth = -1;
  183. }
  184. });
  185. } else {
  186. // 已授权,执行获取地理位置
  187. that.location_auth = 1;
  188. that.getLocation(callback);
  189. }
  190. },
  191. fail(res) {
  192. that.location_auth = -1;
  193. callback();
  194. console.log('设备信息调取失败', res);
  195. }
  196. });
  197. },
  198. // 执行获取地理位置
  199. getLocation(callback) {
  200. let that = this; // 用户已经同意小程序使用定位
  201. uni.getLocation({
  202. type: 'wgs84',
  203. success(res) {
  204. console.log('定位成功', res);
  205. that.globalData.lat = res.latitude;
  206. that.globalData.lng = res.longitude; // console.log('地理位置:', res)
  207. // 执行回调函数
  208. setTimeout(() => {
  209. callback();
  210. }, 0);
  211. },
  212. fail(res) {
  213. console.log('定位失败', res);
  214. setTimeout(() => {
  215. callback();
  216. }, 0);
  217. }
  218. });
  219. }
  220. }
  221. };
  222. </script>
  223. <style>
  224. /**app.wxss**/
  225. view {
  226. box-sizing: border-box;
  227. }
  228. .slh_s {
  229. white-space: nowrap;
  230. text-overflow: ellipsis;
  231. overflow: hidden;
  232. }
  233. .slh {
  234. overflow: hidden;
  235. text-overflow: ellipsis;
  236. display: -webkit-box;
  237. -webkit-line-clamp: 2;
  238. -webkit-box-orient: vertical;
  239. }
  240. /* 商品 */
  241. .goods_list .goods_item {
  242. display: flex;
  243. align-items: center;
  244. margin-top: 30rpx;
  245. }
  246. .goods_list .goods_item .goods_tu {
  247. width: 200rpx;
  248. height: 200rpx;
  249. border-radius: 5rpx;
  250. }
  251. .goods_list .goods_item .goods_info {
  252. padding-left: 16rpx;
  253. font-size: 24rpx;
  254. color: rgba(8, 8, 8, 0.54);
  255. flex: 1;
  256. }
  257. .goods_list .goods_item .goods_title {
  258. font-size: 30rpx;
  259. color: #080808;
  260. font-weight: bold;
  261. }
  262. .goods_list .goods_item .goods_labels {
  263. display: flex;
  264. flex-wrap: wrap;
  265. }
  266. .goods_list .goods_item .goods_labels .label {
  267. padding: 6rpx;
  268. background: #f6f6f6;
  269. margin: 10rpx 14rpx 0 0;
  270. }
  271. .goods_list .goods_item .goods_desc {
  272. font-size: 24rpx;
  273. color: rgba(8, 8, 8, 0.54);
  274. margin: 20rpx 0;
  275. }
  276. .goods_list .goods_item .goods_specs {
  277. display: flex;
  278. align-items: center;
  279. justify-content: space-between;
  280. }
  281. .goods_list .goods_item .goods_specs .price {
  282. font-size: 34rpx;
  283. color: #080808;
  284. }
  285. .goods_list .goods_item .goods_specs .unit {
  286. font-size: 22rpx;
  287. }
  288. .goods_list .goods_item .goods_specs .btn_specs {
  289. width: 120rpx;
  290. height: 45rpx;
  291. background: #295c56;
  292. border-radius: 23rpx;
  293. font-size: 26rpx;
  294. color: #ffffff;
  295. display: flex;
  296. align-items: center;
  297. justify-content: center;
  298. }
  299. /* 订单商品 */
  300. .order_goods {
  301. padding: 0 0 20rpx;
  302. }
  303. .order_goods .goods_item {
  304. display: flex;
  305. align-items: center;
  306. justify-content: space-between;
  307. padding: 20rpx 0;
  308. }
  309. .order_goods .goods_item .goods_item_l {
  310. width: 530rpx;
  311. display: flex;
  312. }
  313. .order_goods .goods_item .goods_tu {
  314. width: 138rpx;
  315. height: 138rpx;
  316. border-radius: 5rpx;
  317. }
  318. .order_goods .goods_item .goods_info {
  319. padding-left: 20rpx;
  320. font-size: 24rpx;
  321. color: rgba(8, 8, 8, 0.54);
  322. width: 320rpx;
  323. }
  324. .order_goods .goods_item .goods_title {
  325. font-size: 30rpx;
  326. color: #080808;
  327. font-weight: bold;
  328. }
  329. .order_goods .goods_item .goods_labels {
  330. display: flex;
  331. flex-wrap: wrap;
  332. }
  333. .order_goods .goods_item .goods_labels .label {
  334. padding: 6rpx;
  335. background: #f6f6f6;
  336. margin: 10rpx 14rpx 0 0;
  337. }
  338. .order_goods .goods_item .goods_item_r {
  339. text-align: right;
  340. }
  341. .order_goods .goods_item .goods_price {
  342. font-size: 34rpx;
  343. color: #080808;
  344. }
  345. .order_goods .goods_item .goods_price .unit {
  346. font-size: 22rpx;
  347. }
  348. .order_goods .goods_item .goods_num {
  349. font-size: 26rpx;
  350. padding-top: 20rpx;
  351. color: rgba(51, 51, 51, 0.54);
  352. }
  353. /* tabs */
  354. .cate_list {
  355. width: 750rpx;
  356. height: 100rpx;
  357. position: fixed;
  358. top: 0;
  359. left: 0;
  360. z-index: 1;
  361. }
  362. .cate_list .van-tab {
  363. font-size: 32rpx;
  364. font-weight: 500;
  365. }
  366. /* 券 */
  367. .coupon_list {
  368. padding: 30rpx 0;
  369. background: #f6f6f6;
  370. }
  371. .coupon_list .van-cell {
  372. padding: 0 !important;
  373. background: unset !important;
  374. }
  375. .coupon_item {
  376. width: 690rpx;
  377. margin: 30rpx auto 0;
  378. background-repeat: no-repeat;
  379. background-size: cover;
  380. display: flex;
  381. align-items: center;
  382. }
  383. .coupon_item:first-child {
  384. margin-top: 0;
  385. }
  386. .coupon_item .item_l {
  387. width: 196rpx;
  388. height: 168rpx;
  389. font-size: 28rpx;
  390. color: rgba(255, 255, 255, 0.78);
  391. display: flex;
  392. flex-direction: column;
  393. align-items: center;
  394. justify-content: center;
  395. }
  396. .coupon_item .item_l .price {
  397. font-size: 60rpx;
  398. color: #ffffff;
  399. }
  400. .coupon_item .item_l .price .unit {
  401. font-size: 30rpx;
  402. }
  403. .coupon_item .item_r {
  404. flex: 1;
  405. height: 168rpx;
  406. display: flex;
  407. align-items: center;
  408. justify-content: space-between;
  409. padding: 0 30rpx;
  410. font-size: 26rpx;
  411. color: rgba(51, 51, 51, 0.54);
  412. }
  413. .coupon_item .item_r .item_r_l {
  414. text-align: left;
  415. }
  416. .coupon_item .quan_name {
  417. font-size: 34rpx;
  418. color: #333333;
  419. }
  420. .coupon_item .item_status {
  421. width: 130rpx;
  422. height: 50rpx;
  423. background: #295c56;
  424. border-radius: 5rpx;
  425. font-size: 26rpx;
  426. color: #ffffff;
  427. display: flex;
  428. align-items: center;
  429. justify-content: center;
  430. }
  431. .coupon_item.unable .item_status {
  432. background: transparent;
  433. color: rgba(0, 0, 0, 0.54);
  434. }
  435. .coupon_item.unable .item_l {
  436. color: rgba(255, 255, 255, 0.78);
  437. }
  438. .coupon_item.unable .item_l .price {
  439. color: #ffffff;
  440. }
  441. /* 全局loading */
  442. .custom_loading {
  443. position: absolute;
  444. top: 50%;
  445. left: 50%;
  446. transform: translate(-50%, -50%);
  447. }
  448. /* 充值卡 */
  449. .card_item_w {
  450. padding: 20rpx 0;
  451. border-bottom: 1rpx dashed rgba(0, 0, 0, 0.12);
  452. }
  453. .card_item_w:last-child {
  454. border: 0 none;
  455. }
  456. .card_item {
  457. border: 1px solid #295c56;
  458. border-radius: 5rpx;
  459. padding: 30rpx 0;
  460. /* display: flex;
  461. align-items: center;
  462. justify-content: center; */
  463. color: #295c56;
  464. font-size: 24rpx;
  465. }
  466. .card_item .card_item_col {
  467. display: flex;
  468. align-items: center;
  469. justify-content: center;
  470. font-size: 30rpx;
  471. font-weight: 500;
  472. }
  473. .card_item .card_item_col.desc {
  474. color: rgba(14, 14, 14, 0.54);
  475. padding-top: 4rpx;
  476. }
  477. .card_item .card_item_l,
  478. .card_item .card_item_r {
  479. display: flex;
  480. align-items: baseline;
  481. justify-content: center;
  482. }
  483. .card_item .card_price {
  484. padding: 0 20rpx 0 10rpx;
  485. font-size: 42rpx;
  486. }
  487. .card_item .card_price .unit {
  488. font-size: 27rpx;
  489. }
  490. .card_item .card_send {
  491. width: 44rpx;
  492. height: 44rpx;
  493. margin: 0 10rpx;
  494. background: #295c56;
  495. border-radius: 50%;
  496. color: #ffffff;
  497. display: flex;
  498. align-items: center;
  499. justify-content: center;
  500. }
  501. .card_item .card_yuan {
  502. padding-left: 16rpx;
  503. font-size: 36rpx;
  504. font-weight: bold;
  505. }
  506. .card_item .card_times {
  507. font-size: 27rpx;
  508. padding: 0 14rpx;
  509. }
  510. .card_item .coupons_nums {
  511. font-size: 36rpx;
  512. font-weight: bold;
  513. }
  514. .card_item.active {
  515. background: #295c56;
  516. color: #fff;
  517. }
  518. .card_item.active .card_send {
  519. background: #ffffff;
  520. color: #295c56;
  521. }
  522. .card_item.active .card_item_col.desc {
  523. color: rgba(255, 255, 255, 0.8);
  524. }
  525. /* 授权按钮 */
  526. .custom_dialog .van-button {
  527. width: 100% !important;
  528. }
  529. /* 提示确认框 */
  530. .single_btn .van-button {
  531. width: 100%;
  532. }
  533. /* 步进器 */
  534. .stepper .step_input {
  535. /* height: 24rpx; */
  536. height: 42rpx;
  537. line-height: 24rpx;
  538. padding-top: 0;
  539. font-size: 26rpx;
  540. color: rgba(0, 0, 0, 1);
  541. background: none;
  542. }
  543. .stepper .plus,
  544. .stepper .minus {
  545. border-radius: 50%;
  546. overflow: hidden;
  547. vertical-align: bottom;
  548. width: 42rpx;
  549. height: 42rpx;
  550. }
  551. .stepper .plus {
  552. color: #ffffff;
  553. border: 1px solid #295c56;
  554. background: #295c56;
  555. }
  556. .stepper .minus {
  557. border: 1px solid #295c56;
  558. color: rgba(0, 0, 0, 1);
  559. background: #fff;
  560. }
  561. </style>