home.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613
  1. <template>
  2. <view>
  3. <view class="swiper">
  4. <swiper v-if="banner.length>0" class="swiper-box" :indicator-dots="true" :autoplay="true" :interval="3000"
  5. :duration="1000">
  6. <block v-for="(item,index) of banner" :key='index'>
  7. <swiper-item>
  8. <view class="swiper-item" @click.stop="bindPreview(item.type,item.appid,URL+item.thumb,index,item.wifi_id)">
  9. <image :src="URL+item.thumb"></image>
  10. </view>
  11. </swiper-item>
  12. </block>
  13. </swiper>
  14. <view class="swiper-item" v-else>
  15. <image src="https://zxzhdc.zx-xcx.com/dining/banner.png" mode="aspectFit"></image>
  16. </view>
  17. </view>
  18. <view class="flex-y-center home-header box-pack-between">
  19. <view class="home-header-contentLeft flex-center" @click="canTeen">
  20. <view class="">
  21. <image class="home-header-icon" :src="URL+obj.to_store_log"></image>
  22. <view class="home-header-title">
  23. {{obj.to_store_title||''}}
  24. </view>
  25. <view class="home-header-tip">
  26. {{obj.to_store_desc||''}}
  27. </view>
  28. </view>
  29. </view>
  30. <!-- <view class="home-header-line"></view> -->
  31. <view class="home-header-contentRight flex-col box-pack-between">
  32. <view class="flex-center home-header-contentRight1" @click="takeFood">
  33. <view class="flex-y-center">
  34. <image class="home-header-icon-take" :src="URL+obj.takeout_log"></image>
  35. <view class="">
  36. <view class="home-header-title">
  37. {{obj.takeout_title||''}}
  38. </view>
  39. <view class="home-header-tip">
  40. {{obj.takeout_desc||''}}
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. <view class="flex-center home-header-contentRight1" @click="SelfMention">
  46. <view class="flex-y-center">
  47. <image class="home-header-icon-take" :src="URL+obj.self_logo"></image>
  48. <view class="">
  49. <view class="home-header-title">
  50. {{obj.self_title||''}}
  51. </view>
  52. <view class="home-header-tip">
  53. {{obj.self_desc||''}}
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. <slot name='getCoupon'></slot>
  61. <!-- #ifdef MP-ALIPAY -->
  62. <mkt v-if="canIUse" mode="AUTOMATIC" boothCode="MERCHANT_SELF_TINYAPP" :cityCode="cityCode" version="2"
  63. class='mkt' />
  64. <!-- #endif -->
  65. <navigator url="/pages/onPay/onPay" class="box-pack-between home-pay flex-y-center">
  66. <view class="home-pay-title">
  67. {{obj.pay_title||''}}
  68. <view class="home-pay-tip">
  69. {{obj.pay_desc||''}}
  70. </view>
  71. </view>
  72. <image class="home-pay-jiantou" src="/static/home/jiantou.png"></image>
  73. </navigator>
  74. <view class="home-store flex-y-center">
  75. <view class="flex-grow-1">
  76. <view class="box-pack-between flex-grow-1 flex-y-center">
  77. <text>{{systemInfo.title}}</text>
  78. <view class="more-businessTime flex-y-center" @click="getShop"><text
  79. style="margin-right: 6rpx;">更多门店</text><text class="iconfont icon-jiantou1"></text></view>
  80. </view>
  81. <view class="businessTime flex-grow-1 box-pack-between flex-y-center">
  82. <view class="flex-grow-1">
  83. <view class="businessTime businessTimeItem" v-if="systemInfo.is_rest==2 && systemInfo.time">
  84. 营业时间:{{systemInfo.time}}-{{systemInfo.time2}}
  85. </view>
  86. <view class=" box-pack-between flex-grow-1" @click="getNavigation">
  87. <text class="iconfont icon-dizhi">{{systemInfo.address}}</text>
  88. <text class="iconfont icon-icon-test"></text>
  89. </view>
  90. </view>
  91. </view>
  92. </view>
  93. </view>
  94. <view class="flex home-item-content box-pack-between">
  95. <view class="home-item home-item-one" v-if="applet_info.name" @click="navigateMiniProgram">
  96. <view class="">
  97. <view class="">
  98. {{applet_info.name||''}}
  99. </view>
  100. <view class="home-item-one-tip flex-y-center">
  101. {{applet_info.desc||''}}
  102. </view>
  103. </view>
  104. <image class="home-item-icon1" src="https://zxzhdc.zx-xcx.com/dining/home2.png"></image>
  105. </view>
  106. <navigator class="home-item home-item-two" url="/subscribe/index">
  107. <view class="">
  108. {{obj.yy_title||''}}
  109. </view>
  110. <image class="home-item-icon1" :src="URL+obj.yy_logo"></image>
  111. </navigator>
  112. <navigator class="home-item home-item-two" url="/pages/lineup/lineup">
  113. <view class="">
  114. {{obj.queue_title||''}}
  115. </view>
  116. <image class="home-item-icon1" :src="URL+obj.queue_logo"></image>
  117. </navigator>
  118. <navigator class="home-item home-item-three" url="../coupon-list/coupon-list">
  119. <view class="">
  120. {{obj.coupon_title||''}}
  121. </view>
  122. <image class="home-item-icon1" :src="URL+obj.coupon_logo"></image>
  123. </navigator>
  124. </view>
  125. <getPhone />
  126. <model :obj="modelObj"></model>
  127. <Vphone :getPhonePop="getPhonePop" @close="setClose"></Vphone>
  128. <uni-popup ref="popup" type="bottom">
  129. <view class="popup_content flex-grow-1 ">
  130. <view class="popup_content_title">
  131. <text v-if="systemInfo.table" class="ft28">您现在已经在{{systemInfo.table||''}}点餐,是要切换到其他餐桌吗?</text>
  132. </view>
  133. <view class="flex-y-center flex-grow-1 box-pack-between" style="padding-bottom: 25rpx;">
  134. <view class="flex-center popup_content_left popup_content_left1" @click="canTeen_yz">
  135. <view class="flex-y-center">
  136. <view class="">
  137. 原桌点餐
  138. </view>
  139. </view>
  140. </view>
  141. <view class="flex-center popup_content_left popup_content_left2" @click="bindScan">
  142. <view class="flex-y-center">
  143. <view class="">
  144. 重选餐桌
  145. </view>
  146. </view>
  147. </view>
  148. </view>
  149. </view>
  150. </uni-popup>
  151. </view>
  152. </template>
  153. <script>
  154. let hideLoading = true;
  155. import getPhone from './module/getPhone.vue';
  156. import Vphone from '@/components/v-phone/v-phone.vue';
  157. // import getCoupon from "plugin://couponPlugin/get-coupon";
  158. import {
  159. mapState,
  160. mapMutations
  161. } from 'vuex'
  162. export default {
  163. components: {
  164. getPhone,
  165. Vphone,
  166. // getCoupon
  167. },
  168. props: {
  169. cityCode: {
  170. type: [Number, String],
  171. default: 0
  172. }
  173. },
  174. data() {
  175. return {
  176. URL: getApp().globalData.URL,
  177. banner: [],
  178. applet_info: {},
  179. obj: {},
  180. getPhonePop: false,
  181. modelObj: null,
  182. // cityCode: "",
  183. // #ifdef MP-ALIPAY
  184. canIUse: my.canIUse('mkt'),
  185. // #endif
  186. }
  187. },
  188. computed: {
  189. ...mapState(['systemInfo', 'setColor', 'store_id', 'userInfo'])
  190. },
  191. watch: {
  192. store_id(nVal) {
  193. this.banner_list();
  194. this.applet();
  195. this.setCopy();
  196. this.getCouponList();
  197. },
  198. },
  199. created() {
  200. this.banner_list();
  201. this.applet();
  202. this.setCopy();
  203. this.home();
  204. // this.getCouponList();
  205. },
  206. methods: {
  207. ...mapMutations(['SET_ADDRESS', 'SET_TEEN_INDEX', 'SET_SELFMENTION']),
  208. bindScan(e) {
  209. // 允许从相机和相册扫码
  210. uni.scanCode({
  211. success: (res) => {
  212. var store_id = this.gettParameter(res.result, 'store_id')
  213. var table_id = this.gettParameter(res.result, 'table_id')
  214. // console.log(store_id, table_id)
  215. this.$store.commit('SET_SYSTEM', '') //清空
  216. this.$store.commit('SET_STORE_ID', store_id)
  217. this.$store.commit('SET_TEEN_INDEX', 1) //重置默认
  218. this.$store.commit('SET_TABLE_ID', table_id)
  219. this.$store.commit('SET_CATE_ID', '')
  220. this.$store.dispatch('getSystemStup', store_id);
  221. this.$store.dispatch('getOpenid', store_id);
  222. uni.switchTab({
  223. url: "/pages/index/index"
  224. })
  225. this.$refs.popup.close();
  226. }
  227. })
  228. },
  229. gettParameter: function(url, name) {
  230. let val = ''
  231. if (url.indexOf('?' + name + '=') !== -1) {
  232. val = url.split('?' + name + '=')[1].split(/&|#/)[0];
  233. } else if (url.indexOf('&' + name + '=') !== -1) {
  234. val = url.split('&' + name + '=')[1].split(/&|#/)[0];
  235. }
  236. return val
  237. },
  238. getShop(e) {
  239. uni.navigateTo({
  240. url: "../../shop/index/index"
  241. })
  242. },
  243. // 首页内容
  244. home() {
  245. this.$http.request('xcx/home', {
  246. store_id: this.store_id,
  247. }, "", "", hideLoading).then(res => {
  248. this.obj = res.data;
  249. })
  250. },
  251. // 打开地图
  252. getNavigation() {
  253. // console.log(this.systemInfo.set.coordinates)
  254. let obj = this.systemInfo.set.coordinates.split(",");
  255. uni.openLocation({
  256. latitude: Number(obj[0]),
  257. longitude: Number(obj[1]),
  258. name: this.systemInfo.title,
  259. address: this.systemInfo.address,
  260. success: function() {
  261. console.log('success');
  262. }
  263. });
  264. },
  265. // 赋能
  266. setCopy() {
  267. if (getApp().globalData.isApp) {
  268. this.$http.request('xcx/funeng', {
  269. store_id: this.store_id,
  270. }, "", "", hideLoading).then(res => {
  271. let way_power = res.data.way_power;
  272. if (!way_power) {
  273. return
  274. }
  275. let content = way_power.replace(/<br\s*\/?\s*>/ig, "\n");
  276. uni.setClipboardData({
  277. data: content,
  278. success: function(r) {
  279. console.log('success', r);
  280. getApp().globalData.isApp = false
  281. }
  282. });
  283. // // #ifdef MP-WEIXIN
  284. // wx.showLoading();
  285. // uni.setClipboardData({
  286. // data: content,
  287. // success: (res) => {
  288. // wx.hideLoading()
  289. // }
  290. // });
  291. // // #endif
  292. // // #ifdef MP-ALIPAY
  293. // uni.setClipboardData({
  294. // data: content,
  295. // success: (res) => {}
  296. // });
  297. // // #endif
  298. })
  299. }
  300. },
  301. // 开启会员弹窗
  302. onGetphone(e) {
  303. this.getPhonePop = true;
  304. },
  305. // 子组件传参
  306. setClose(e) {
  307. this.getPhonePop = e;
  308. },
  309. // 跳转小程序、内页面
  310. bindPreview(type, appId, thumb, index,wifi_id) {
  311. console.log(type, appId, thumb, index, 888)
  312. let {
  313. is_article
  314. } = this.banner[index]
  315. if (type == 1) {
  316. if (appId) {
  317. uni.navigateToMiniProgram({
  318. appId: appId,
  319. success(res) {
  320. // 打开成功
  321. }
  322. })
  323. }
  324. } else if (type == 2) {
  325. if (appId) {
  326. if ("/pages/index/index" == appId || "/pages/my/my" == appId ||
  327. "/pages/myOrderList/myOrderList" == appId) {
  328. uni.switchTab({
  329. url: appId
  330. })
  331. } else {
  332. uni.navigateTo({
  333. url: appId
  334. })
  335. }
  336. } else {
  337. // let url = this.URL + info.thumb;
  338. uni.previewImage({
  339. urls: [thumb],
  340. });
  341. }
  342. } else if (type == 3) {
  343. if (!this.userInfo.mobile) {
  344. // #ifdef MP-WEIXIN
  345. this.modelObj = {
  346. content: "完善资料才能享有领取权利,是否完善?",
  347. };
  348. this.$store.commit('showAttrPicker', true)
  349. // #endif
  350. // #ifdef MP-ALIPAY
  351. this.getPhonePop = true;
  352. // #endif
  353. return
  354. } else {
  355. uni.showToast({
  356. title: '您已经完善过会员信息了,无需重复操作!',
  357. icon: 'none'
  358. })
  359. }
  360. } else if (type == 4) {
  361. uni.navigateTo({
  362. url: `/shop/richText/index?id=${is_article}`
  363. })
  364. } else if(type == 5 && wifi_id){
  365. uni.navigateToMiniProgram({
  366. appId: appId,
  367. extraData:{
  368. id:wifi_id
  369. },
  370. success(res) {
  371. // 打开成功
  372. }
  373. })
  374. }
  375. },
  376. applet() {
  377. let type;
  378. // #ifdef MP-WEIXIN
  379. type = 1
  380. // #endif
  381. // #ifdef MP-ALIPAY
  382. type = 2
  383. // #endif
  384. this.$http.request('xcx/applet_index', {
  385. store_id: this.store_id,
  386. type: type,
  387. }, "", "", true).then(res => {
  388. this.applet_info = res.data;
  389. })
  390. },
  391. banner_list() {
  392. this.$http.request('xcx/banner_list', {
  393. store_id: this.store_id,
  394. type_id: 2,
  395. }, "", "", true).then(res => {
  396. // console.log(res, "LqCoupons_lists")
  397. this.banner = res.data;
  398. })
  399. },
  400. // 子组件传参
  401. // setClose(e) {
  402. // this.getPhonePop = e;
  403. // }
  404. canTeen() {
  405. if (this.systemInfo.is_hall == 1) {
  406. if (this.systemInfo.set.change_table == 1) {
  407. this.$refs.popup.open();
  408. } else {
  409. this.SET_TEEN_INDEX(1);
  410. uni.switchTab({
  411. url: `../index/index`
  412. })
  413. }
  414. return
  415. }
  416. uni.showToast({
  417. title: "敬请期待!",
  418. icon: 'none'
  419. })
  420. },
  421. canTeen_yz() {
  422. this.SET_TEEN_INDEX(1);
  423. uni.switchTab({
  424. url: `../index/index`
  425. })
  426. this.$refs.popup.close();
  427. },
  428. // 外卖
  429. takeFood(e) {
  430. if (this.systemInfo.is_waimai == 1) {
  431. this.SET_TEEN_INDEX(2);
  432. uni.switchTab({
  433. url: `../index/index`
  434. })
  435. return
  436. }
  437. uni.showToast({
  438. title: "敬请期待!",
  439. icon: 'none'
  440. })
  441. },
  442. // 自提
  443. SelfMention(e) {
  444. // if (this.systemInfo.is_waimai == 1) {
  445. if (this.systemInfo.is_ziti == 1) {
  446. if (this.systemInfo.pay_type == 2 && this.systemInfo.is_ziti == 1) {
  447. uni.showToast({
  448. icon: "none",
  449. title: '餐后付款不能自提!'
  450. })
  451. return
  452. }
  453. this.SET_TEEN_INDEX(3);
  454. uni.switchTab({
  455. url: `../index/index`
  456. })
  457. return
  458. }
  459. uni.showToast({
  460. title: "敬请期待!",
  461. icon: 'none'
  462. })
  463. // return
  464. // }
  465. },
  466. navigateMiniProgram() {
  467. // uni.navigateToMiniProgram({
  468. // appId: "wxc7811d73da68c79e",
  469. // path: "pages/index/index",
  470. // envVersion: 'develop',
  471. // success(res) {
  472. // }
  473. // })
  474. // return
  475. if (!this.applet_info.appid) {
  476. uni.showToast({
  477. title: "敬请期待!",
  478. icon: 'none'
  479. })
  480. return
  481. }
  482. var mobile = this.userInfo.mobile,
  483. path = '',
  484. type = this.userInfo.mobile ? 1 : 2;
  485. // uni.navigateToMiniProgram({
  486. // appId: 'wx394da23b82f9863a',
  487. // path: `pages/integral-index/index?mobile=${mobile}&type=${type}`,
  488. // envVersion: 'develop',
  489. // success(res) {}
  490. // })
  491. if ('wx394da23b82f9863a' == this.applet_info.appid) {
  492. path = `${this.applet_info.pages}?mobile=${mobile}&type=${type}`; //跳转智豆商圈
  493. } else if ('wxc7811d73da68c79e' == this.applet_info.appid) {
  494. path = `${this.applet_info.pages}?mobile=${mobile}&type=${type}`; //跳转智豆商圈
  495. } else {
  496. path = this.applet_info.pages;
  497. }
  498. uni.navigateToMiniProgram({
  499. appId: this.applet_info.appid,
  500. path: path,
  501. envVersion: 'develop',
  502. success(res) {
  503. // 打开成功
  504. }
  505. })
  506. },
  507. }
  508. }
  509. </script>
  510. <style>
  511. .popup_content {
  512. background-color: #FFFFFF;
  513. height: 400rpx;
  514. padding: 0 30rpx;
  515. }
  516. .popup_content_title {
  517. padding: 30rpx 0;
  518. font-size: 32rpx;
  519. }
  520. .popup_content_left {
  521. border-radius: 14rpx;
  522. height: 155rpx;
  523. text-align: left;
  524. width: 300rpx;
  525. font-size: 35rpx;
  526. }
  527. .popup_content_left1 {
  528. background: linear-gradient(to right, #fb652e, 34%, #F0AD4E);
  529. color: #FFFFFF;
  530. box-shadow: 0rpx 8rpx 16rpx 8rpx #F1F1F1;
  531. }
  532. .popup_content_left2 {
  533. background: #FFFFFF;
  534. color: #000;
  535. box-shadow: 0rpx 8rpx 16rpx 8rpx #F1F1F1;
  536. }
  537. .home-store {
  538. font-size: 30rpx;
  539. width: 690rpx;
  540. background-color: #FFFFFF;
  541. margin: 0 auto;
  542. /* height: 180rpx; */
  543. margin-top: 25rpx;
  544. padding: 20rpx 40rpx;
  545. border-radius: 14rpx;
  546. box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(204, 215, 230, 0.08);
  547. }
  548. .home-pay-title {
  549. font-size: 30rpx;
  550. }
  551. .more-businessTime {
  552. font-size: 24rpx;
  553. }
  554. .businessTime {
  555. font-size: 24rpx;
  556. color: #999999;
  557. padding-top: 10rpx;
  558. }
  559. .businessTimeItem {
  560. margin-bottom: 10rpx;
  561. }
  562. .businessTime .icon-dizhi {
  563. font-size: 24rpx;
  564. }
  565. </style>