home _bak.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703
  1. <template>
  2. <view class="home-page" style="background-image: url(https://business.coffunity.cn/upload/homebg.gif); width: 100%; background-size: cover; background-position: center center;">
  3. <view class="tooltip tip1">Click here!</view>
  4. <view class="tooltip tip2">Let's go!</view>
  5. <view class="overlay" v-show="showMoreMenu" @tap="onOverlayTap"></view>
  6. <!-- 顶部用户信息导航 -->
  7. <view class="section-top">
  8. <view class="top-user-info">
  9. <view class="user-info">
  10. <view class="header-icon" @tap.stop="onShowMoreMenu" >
  11. <image :src="userInfo.avatar" class="header"></image>
  12. </view>
  13. <view class="header-name">
  14. <view class="name">{{truncateString(userInfo.nickname, 6) }}</view>
  15. <view class="option" @click="onViewBind" v-if="userInfo.mobile">账户设置</view>
  16. <view class="option" @click="onViewBind" v-else>完善信息</view>
  17. </view>
  18. </view>
  19. <view class="sub-menus" v-if="showMoreMenu" >
  20. <view class="mt10 menu" @click="onOpenWindows">
  21. <view class="icon"><image src="../../static/images/bike.png" class="img" mode="heightFix"/></view>
  22. <view class="name">出去兜兜</view>
  23. </view>
  24. <view class="menu" @click="onViewCalendar">
  25. <view class="icon"><image src="../../static/images/date.png" class="img" mode="heightFix"/></view>
  26. <view class="name">行程预约</view>
  27. </view>
  28. <view class="line"></view>
  29. <view class="menu">
  30. <view class="icon"><image src="../../static/images/bike.png" class="img" mode="heightFix"/></view>
  31. <view class="name">号外!号外!!!</view>
  32. </view>
  33. <view class='menu-content'>
  34. <view class="menu-items">
  35. <block v-for="(it,index) in movieList">
  36. <view class="menu-item" @click="onViewZc(it)">
  37. <view class="item">
  38. <image :src="it.imageUrl" class="img" />
  39. </view>
  40. <view class="name">{{truncateString(it.name,4) }}</view>
  41. </view>
  42. </block>
  43. </view>
  44. </view>
  45. <view class="line"></view>
  46. <view class="menu" @click="onViewEquity">
  47. <view class="icon"><image src="../../static/images/qy.png" class="img" mode="heightFix"/></view>
  48. <view class="name">我的卡券</view>
  49. </view>
  50. <view class="menu" @click="onOpenRenew">
  51. <view class="icon"><image src="../../static/images/fav.png" class="img" mode="heightFix"/></view>
  52. <view class="name">成为会员</view>
  53. </view>
  54. <view class="line"></view>
  55. <view class="menu">
  56. <view class="icon" ><image src="../../static/images/tel.png" class="img" mode="heightFix"/></view>
  57. <view class="name"><button hover-class="none" open-type="contact" style="background: none; color: white; font-size:13px;">在线客服</button></view>
  58. </view>
  59. <view class="menu">
  60. <view class="icon"><image src="../../static/images/share.png" class="img" mode="heightFix"/></view>
  61. <view class="name"><button open-type= "share" style="background: none; color: white; font-size:13px;" hover-class="none">分享小程序</button></view>
  62. </view>
  63. <!-- <view class="menu">
  64. <view class="icon"><image src="../../static/images/about.png" class="img" mode="heightFix"/></view>
  65. <view class="name">关于Coffunity</view>
  66. </view> -->
  67. </view>
  68. </view>
  69. <view class="menu-top">
  70. <view class="menu menu-share">
  71. <image src="../../static/images/vip.png" @click="onOpenRenew" class="icon"></image>
  72. </view>
  73. <view class="menu menu-date">
  74. <image src="../../static/images/date.png" @click="onViewCalendar" class="icon"></image>
  75. </view>
  76. <view class="menu menu-share" >
  77. <button class="menu menu-share" open-type= "share" style="background: none; " hover-class="none"><image src="../../static/images/shareto.png" class="icon" ></image></button>
  78. </view>
  79. </view>
  80. </view>
  81. <!-- 书柜 -->
  82. <view class="section2">
  83. <view class="icon">
  84. <view class="icon-lay1 lay-margin0">
  85. <view class="lay-icon" @click="onViewLibary">
  86. <image src="../../static/images/book.png" class="icon"></image>
  87. </view>
  88. <view class="lay-icon" @click="onViewSchool">
  89. <image src="../../static/images/start.png" class="icon"></image>
  90. </view>
  91. <view class="lay-icon" @click="onViewFitness">
  92. <image src="../../static/images/yl.png" class="icon"></image>
  93. </view>
  94. </view>
  95. <view class="icon-lay1 lay-margin" >
  96. <view class="lay-icon" @click="onViewCoffee">
  97. <image src="../../static/images/cf.png" class="icon"></image>
  98. </view>
  99. <view class="lay-icon" @click="onViewTheater">
  100. <image src="../../static/images/face.png" class="icon"></image>
  101. </view>
  102. <view class="lay-icon">
  103. <image src="../../static/images/ear.png" class="icon"></image>
  104. </view>
  105. </view>
  106. </view>
  107. <view class="windows" @click="onOpenWindows" >
  108. </view>
  109. </view>
  110. <view class="section3">
  111. <view class="tel" >
  112. <image src="https://business.coffunity.cn/upload/syj.png" class="img" @click="onOpenHw"></image>
  113. </view>
  114. <view class="comp">
  115. <image src="https://business.coffunity.cn/upload/comp.png" class="img"></image>
  116. </view>
  117. </view>
  118. <view class="section4">
  119. <view class="char">
  120. </view>
  121. <view class="user">
  122. <image v-if="userInfo.gender!=2" src="https://business.coffunity.cn/upload/mancat.webp" style="width:245px;height:320px; z-index: 5;" ></image>
  123. <image v-else src="https://business.coffunity.cn/upload/womancat.webp" style="width:245px;height:320px; z-index: 5;">
  124. </view>
  125. </view>
  126. <!-- 续费 -->
  127. <uni-popup ref="showRenewForm">
  128. <RenewForm :leveList="leveList" @onCloseRenew="onCloseRenew"/>
  129. </uni-popup>
  130. <!-- vip表单 -->
  131. <uni-popup ref="vipForm">
  132. <VipForm :userInfo="userInfo" @onOpenRenew="onOpenRenew"/>
  133. </uni-popup>
  134. <!-- 号外号外 -->
  135. <uni-popup ref="hwPopForm" type="center" style="z-index: 60;">
  136. <SoundForm :dataList="movieList"></SoundForm>
  137. </uni-popup>
  138. <page-btm-bar :active="5" />
  139. </view>
  140. </template>
  141. <script>
  142. import audio from '../../diy/audio.vue';
  143. import swiper from '../../diy/swiper.vue';
  144. import coupon from '../../diy/coupon';
  145. import module from '../../diy/Module';
  146. import home from '../../diy/home'
  147. import VipForm from '@/components/VipForm/VipForm.vue'
  148. import RenewForm from '@/components/RenewForm/RenewForm.vue'
  149. import SoundForm from '@/components/SoundForm/SoundForm.vue'
  150. import {
  151. mapState,
  152. mapMutations
  153. } from 'vuex'
  154. export default {
  155. components: {
  156. module,
  157. home,
  158. coupon,
  159. swiper,
  160. audio,
  161. VipForm,
  162. RenewForm,
  163. SoundForm
  164. },
  165. data() {
  166. return {
  167. List: {},
  168. loading: true,
  169. windowHeight: 0,
  170. is_template: false,
  171. is_popup: 1,
  172. params:[],
  173. paramsList:[],
  174. movieList:[],
  175. dialogBtnType: 2,
  176. dialogBtnStyle: {
  177. color: '#fff',
  178. backgroundColor: 'red',
  179. },
  180. is_coupon:true,
  181. cityCode: '',
  182. showMoreMenu:false,
  183. leveList:[],
  184. }
  185. },
  186. onLoad() {
  187. // #ifdef MP-ALIPAY
  188. this.$scope.onBeforeGetCoupon = this.onBeforeGetCoupon.bind(this)
  189. this.$scope.onGetCouponSuccess = this.onGetCouponSuccess.bind(this)
  190. this.$scope.onGetCouponFail = this.onGetCouponFail.bind(this)
  191. this.$scope.onUseImmediately = this.onUseImmediately.bind(this)
  192. this.$scope.onClose = this.onClose.bind(this)
  193. // #endif
  194. uni.hideTabBar();
  195. if (this.$store.state.store_id) {
  196. this.http();
  197. // #ifdef MP-ALIPAY
  198. this.getCouponList();
  199. // #endif
  200. }
  201. if (this.$store.state.systemInfo.set) {
  202. if (this.$store.state.systemInfo.set.is_pop != 0) {
  203. let is_pop = this.$store.state.systemInfo.set.is_pop;
  204. this.can_popup(is_pop);
  205. // is_pop == 2 ? this.Coupons() :
  206. // is_pop == 1 ? this.homePop(1) :
  207. // is_pop == 3 ? this.homePop(3) : '';
  208. }
  209. }
  210. uni.getSystemInfo({
  211. success: (e) => {
  212. this.windowHeight = e.windowHeight;
  213. }
  214. })
  215. },
  216. //分享小程序
  217. onShareAppMessage() {
  218. const promise = new Promise(resolve => {
  219. setTimeout(() => {
  220. resolve({
  221. title: this.systemInfo.title,
  222. imageUrl:this.detail.image[0],
  223. path: '/pages/home/home',
  224. })
  225. }, 2000)
  226. })
  227. return {
  228. title: this.systemInfo.title,
  229. imageUrl:this.detail.image[0],
  230. path: '/pages/home/home',
  231. promise
  232. }
  233. },
  234. onReady() {
  235. this.$store.commit('SET_MERCHANT_ID', null) //清空分账号授权
  236. // #ifdef MP-ALIPAY
  237. my.getLocation({
  238. type: 1,
  239. success: (res) => {
  240. // console.log('getLocation', res.cityAdcode);
  241. this.cityCode = res.cityAdcode;
  242. // '410100';
  243. },
  244. fail: (err) => {
  245. console.log(err, "err")
  246. }
  247. });
  248. // #endif
  249. let protocal=uni.getStorageSync("protocal");
  250. if(protocal!=true){
  251. uni.navigateTo({
  252. url:'/pages/protocal/protocal'
  253. })
  254. }
  255. },
  256. onShow() {
  257. if (getApp().globalData.runMethod) {
  258. this.onOpenRenew();
  259. // 清除全局数据,以便下次不会再执行
  260. getApp().globalData.runMethod = false;
  261. }
  262. uni.hideTabBar();
  263. this.$store.dispatch('getOpenid', this.store_id);
  264. this.getOnLineList();
  265. this.initVipPackage();
  266. },
  267. created() {
  268. this.bus.$on('send', (data) => {
  269. this.$refs.popup.close();
  270. })
  271. },
  272. computed: {
  273. ...mapState(['systemInfo', 'store_id', 'userInfo']),
  274. dateRange() {
  275. const {
  276. store_id,
  277. userInfo,
  278. systemInfo
  279. } = this;
  280. return {
  281. store_id,
  282. userInfo,
  283. systemInfo
  284. }
  285. }
  286. },
  287. watch: {
  288. store_id(nVal) {
  289. if (nVal) {
  290. this.http();
  291. }
  292. },
  293. systemInfo(nVal) {
  294. uni.setNavigationBarTitle({
  295. title: ' '
  296. })
  297. },
  298. // 弹窗校检
  299. dateRange: {
  300. handler(val) {
  301. if (val.store_id && val.userInfo) {
  302. // #ifdef MP-ALIPAY
  303. this.getCouponList();
  304. // #endif
  305. }
  306. if (this.is_popup == 2) {
  307. return
  308. }
  309. if (val.systemInfo.set) {
  310. this.is_popup = 2;
  311. // 是否开启弹窗
  312. if (val.systemInfo.set.is_pop == 0) {
  313. return
  314. }
  315. // 优惠劵弹窗
  316. if (val.systemInfo.set.is_pop == 2) {
  317. if (val.store_id && val.userInfo) {
  318. this.can_popup(2)
  319. }
  320. }
  321. // 语音弹窗
  322. if (val.systemInfo.set.is_pop == 1) {
  323. if (val.store_id && val.userInfo) {
  324. this.can_popup(1)
  325. }
  326. }
  327. // 轮播图弹窗
  328. if (val.systemInfo.set.is_pop == 3) {
  329. if (val.store_id && val.userInfo) {
  330. this.can_popup(3)
  331. }
  332. }
  333. }
  334. },
  335. deep: true,
  336. },
  337. },
  338. onPullDownRefresh() {
  339. this.$store.dispatch('getSystemStup', this.$store.state.store_id);
  340. this.http();
  341. this.$store.commit('SET_REFRESH', false)
  342. setTimeout(() => {
  343. uni.stopPullDownRefresh();
  344. }, 1500)
  345. },
  346. onShareAppMessage(e) {
  347. return {}
  348. },
  349. onHide() {
  350. this.$store.commit('SET_REFRESH', true)
  351. },
  352. onShareAppMessage(e) {
  353. return {}
  354. },
  355. onShareTimeline() {
  356. return{
  357. title:this.systemInfo.title,
  358. imageUrl:this.URL+this.systemInfo.thumb,
  359. }
  360. },
  361. methods: {
  362. ...mapMutations(['SET_COUPON', 'SET_AUDIO', 'SET_SWIPER']),
  363. onBeforeGetCoupon(resultList) {
  364. return this.params
  365. },
  366. initInfo(){
  367. let _this=this;
  368. _this.$http.request('account/getInfo', {
  369. id:_this.userInfo.id,
  370. }, "", "", true).then(res => {
  371. // Set default values for userInfo.nickname and userInfo.avatar
  372. this.userInfo = {
  373. nickname: '微信用户',
  374. avatar: 'https://business.coffunity.cn/upload/default-avatar.jpg'
  375. };
  376. // Only update userInfo.nickname if nickname from server is not empty
  377. if (res.data.nickname && res.data.nickname.trim() !== '') {
  378. this.userInfo.nickname = res.data.nickname;
  379. }
  380. // Only update userInfo.avatar if avatar from server is not 'https://business.coffunity.cn'
  381. if (res.data.avatar && res.data.avatar.trim() !== 'https://business.coffunity.cn') {
  382. this.userInfo.avatar = res.data.avatar;
  383. }
  384. // other code...
  385. }).catch(err => {})
  386. },
  387. onMyFav(){
  388. console.log("myfav");
  389. },
  390. onCloseRenew(e){
  391. this.$refs.showRenewForm.close();
  392. },
  393. onViewZc(e){
  394. uni.navigateTo({
  395. url:'/pages/theater/movie/movie?id='+e.id,
  396. })
  397. },
  398. onViewBind(e){
  399. uni.navigateTo({
  400. url:'/pages/user-detail/user-detail'
  401. })
  402. },
  403. truncateString(str, maxLength) {
  404. return str.length > maxLength ? str.substring(0, maxLength)+'...' : str;
  405. },
  406. initVipPackage(){
  407. let _this=this;
  408. _this.$http.request('account/getLevelList', {
  409. }, "", "", true).then(res => {
  410. _this.leveList=res.data;
  411. }).catch(err => {})
  412. },
  413. //获取线上影片
  414. getOnLineList(){
  415. let _this=this;
  416. _this.$http.request('zc/home', {
  417. }, "", "", true).then(res => {
  418. _this.movieList=res.data;
  419. }).catch(err => {})
  420. },
  421. onOpenWindows(){
  422. uni.navigateTo({
  423. url:'/pages/Center/Center'
  424. })
  425. },
  426. onOpenVip(e){
  427. this.$refs.vipForm.open('center');
  428. },
  429. //打开收音机
  430. onOpenHw(e){
  431. this.$refs.hwPopForm.open('center');
  432. },
  433. onOpenRenew(e){
  434. this.$refs.vipForm.close();
  435. this.$refs.showRenewForm.open("bottom");
  436. },
  437. onShowMoreMenu(){
  438. this.showMoreMenu = !this.showMoreMenu;
  439. },
  440. onOverlayTap() {
  441. this.showMoreMenu = false;
  442. },
  443. onViewCalendar(e){
  444. uni.navigateTo({
  445. url:'/pages/my-calendar/my-calendar',
  446. })
  447. },
  448. onViewTheater(e){
  449. uni.switchTab({
  450. url:'/pages/theater/index/index'
  451. })
  452. },
  453. onViewCoffee(e){
  454. uni.switchTab({
  455. url:'/pages/index/index'
  456. })
  457. },
  458. onViewFitness(e){
  459. uni.switchTab({
  460. url:'/pages/fitness/index/index'
  461. })
  462. },
  463. onViewSchool(e){
  464. uni.switchTab({
  465. url:'/pages/school/index/index',
  466. })
  467. },
  468. onViewLibary(e){
  469. uni.navigateTo({
  470. url:'/pages/school/library/library',
  471. })
  472. },
  473. onViewEquity(e){
  474. uni.navigateTo({
  475. url:'/pages/equity/equity',
  476. })
  477. },
  478. // 领券请求 成功调用的事件,领券结果可能成功也可能失败。
  479. onGetCouponSuccess(resultList) {
  480. this.getResultList(resultList);
  481. this.is_coupon = false;
  482. },
  483. onGetCouponFail(result) {
  484. },
  485. // 点击 立即使用 按钮触发的事件,前提是设置了 dialogBtnType 值为 2。
  486. onUseImmediately() {
  487. this.paramsList=[];
  488. uni.switchTab({
  489. url: '/pages/index/index',
  490. })
  491. },
  492. onClose() {
  493. this.paramsList=[];
  494. },
  495. getResultList(resultList){
  496. let arr=[];
  497. for(let i of resultList){
  498. arr.push({
  499. activityId:i.activityId,
  500. voucherCode:i.voucherCode
  501. })
  502. }
  503. // console.log(JSON.stringify(arr),"arr")
  504. this.$http.request('oil/successcode', {
  505. activityArr:JSON.stringify(arr),
  506. user_id:this.userInfo.id,
  507. store_id: this.store_id,
  508. }, "", true, true).then(res => {
  509. })
  510. },
  511. getCouponList(){
  512. this.$http.request('oil/couponlist', {
  513. store_id: this.store_id,
  514. user_id:this.userInfo.id,
  515. page:1,
  516. limit:100,
  517. }, "", true, true).then(res => {
  518. this.paramsList = res.data;
  519. if(res.data.length>0){
  520. for(let i of res.data){
  521. // MERCHANT_UPLOAD 非劵码
  522. // MERCHANT_API 导码
  523. this.params.push({
  524. activityId:i.activity_id,
  525. outBizNo:i.content.out_biz_no,
  526. customizeSendTime:i.content.publish_end_time,
  527. voucherCode:i.voucherCode
  528. })
  529. }
  530. }
  531. // console.log(this.params,"this.params")
  532. })
  533. },
  534. // 是否弹窗
  535. can_popup(type) {
  536. let couponList = [];
  537. this.$http.request('xcx/can_popup', {
  538. store_id: this.store_id,
  539. user_id: this.userInfo.id
  540. }, "", true, true).then(res => {
  541. if (res.code === '200') {
  542. type == 1 ? this.homePop(1) : type == 2 ? this.Coupons() : type == 3 ? this
  543. .homePop(3) :
  544. '';
  545. }
  546. })
  547. },
  548. Coupons() {
  549. let couponList = [];
  550. this.$http.request('xcx/home_pop_up', {
  551. store_id: this.store_id,
  552. user_id: this.userInfo.id
  553. }, "", true, true).then(res => {
  554. for (let s of res.data) {
  555. s.checked = false;
  556. s.state = 1;
  557. if (s.is_index == 1) {
  558. couponList.push(s);
  559. this.SET_COUPON(couponList);
  560. if (couponList.length > 0) {
  561. this.$refs.popup.open();
  562. this.popup_log();
  563. }
  564. }
  565. };
  566. })
  567. },
  568. // 获取语音||轮播图
  569. homePop(type) {
  570. this.$http.request('xcx/home_pop_up', {
  571. store_id: this.store_id,
  572. user_id: this.userInfo.id,
  573. }, "", true, true).then(res => {
  574. if (res.code === '200') {
  575. let arr = res.data;
  576. // console.log(arr, type, "arr")
  577. if (type == 1) {
  578. for (let s of arr) {
  579. s.is_check = 1;
  580. s.pic = getApp().globalData.URL + this.systemInfo.thumb;
  581. s.content = getApp().globalData.URL + s.src;
  582. }
  583. this.SET_AUDIO(arr);
  584. }
  585. if (type == 3) {
  586. this.SET_SWIPER(arr);
  587. }
  588. if (arr.length > 0) {
  589. this.$refs.popup.open();
  590. this.popup_log();
  591. }
  592. }
  593. })
  594. },
  595. popup_log() {
  596. this.$http.request('xcx/popup_log', {
  597. store_id: this.store_id,
  598. user_id: this.userInfo.id,
  599. }, "", true, true).then(res => {
  600. if (res.code === 200) {}
  601. })
  602. },
  603. // 关闭弹窗
  604. removeFn() {
  605. this.$refs.popup.colse();
  606. },
  607. http() {
  608. this.$http.request('template/detail', {
  609. id: this.$store.state.store_id,
  610. controller: 'admin'
  611. }, "", "", true).then(res => {
  612. this.loading = false;
  613. if (res.code === 200) {
  614. if (res.data.detail.template) {
  615. var template = JSON.parse(res.data.detail.template);
  616. // console.log(template, "template")
  617. let game_index = template.findIndex(item => item.isdefault);
  618. // console.log(game_index, "game_index")
  619. this.List = template[game_index];
  620. // console.log(this.List.moduleList[3], "template")
  621. this.is_template = false;
  622. } else {
  623. this.is_template = true;
  624. }
  625. }
  626. })
  627. },
  628. }
  629. }
  630. </script>
  631. <style lang="scss">
  632. @import "./home.scss"
  633. </style>