index.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125
  1. <template>
  2. <view class="home">
  3. <MyNav title="洲际酒店集团中国西区" bgColor="" :backIcon="false"></MyNav>
  4. <!-- swiper -->
  5. <view class="home-swiper">
  6. <uni-swiper-dot :info="infoList" :current="current1" :mode="mode" :dots-styles="dotsStyles">
  7. <swiper class="swiper-box" @change="change1" circular>
  8. <swiper-item v-for="(item ,index) in infoList" :key="index">
  9. <view class="swiper-item" v-if="item.resource_type == 1"
  10. @click="goSwiperSmall(item.jump_type,item.jump_config)">
  11. <image style="width: 100%;height:592rpx;" :src="item.img" mode="aspectFill"></image>
  12. </view>
  13. <view class="swiper-item" v-if="item.resource_type == 2">
  14. <video id="swiperVideo" ref="swiperVideo" style="width: 100%; height: 592rpx;"
  15. :src="item.video_url" controls :enable-progress-gesture="false">
  16. </video>
  17. </view>
  18. </swiper-item>
  19. </swiper>
  20. </uni-swiper-dot>
  21. </view>
  22. <!-- 金刚图 -->
  23. <view class="home-nav">
  24. <view class="home-nav-item" v-for="(item,index) in navList" :key="index"
  25. @click="goOther(index,item.jump_type,item.jump_config)">
  26. <image style="width: 101.96rpx;height: 103.96rpx;" :src="item.img" mode=""></image>
  27. <text style="color: #333;font-size: 24rpx;margin-top: 18rpx; ">{{item.title}}</text>
  28. </view>
  29. </view>
  30. <!-- 活动专区 -->
  31. <view class="home-special-area">
  32. <view class="home-special-area-left">
  33. <text>非凡西区</text>
  34. <view class="text-shadow"></view>
  35. <image style="width:16rpx;height: 16rpx;margin-left: 14rpx;" src="/static/icon/symbol.png" mode="">
  36. </image>
  37. </view>
  38. <view @click="goSpecialList" class="home-special-area-right">
  39. <text>全部</text>
  40. <image style="width: 12rpx; height: 20rpx;margin-left: 8rpx;" src="/static/icon/right01.png" mode="">
  41. </image>
  42. </view>
  43. </view>
  44. <!-- 活动图片 -->
  45. <view class="home-special-img">
  46. <view class="ListItem" v-for="(item,index) in specialList" :key="index" @click="activeDetail(item.id)">
  47. <image style="width: 312rpx;height: 200rpx; border-radius: 12rpx; "
  48. :src="item.banners?item.cover_img:'http://t9.9026.com/imgs/Kudosbg.png'" mode=""></image>
  49. <view class="kudosicon" @click.stop="kudosActive(item.id,index)">
  50. <image style="width:24rpx;height: 24rpx;" src="/static/icon/Kudos.png" v-if="item.is_like==0">
  51. </image>
  52. <image style="width:24rpx;height: 24rpx;" src="/static/icon/Kudos(1).png" v-if="item.is_like==1">
  53. </image>
  54. </view>
  55. <text style="color: #333;font-weight: bold;font-size: 28rpx;">{{item.title}}</text>
  56. </view>
  57. </view>
  58. <!-- 广告图 -->
  59. <view class="home-banner" v-if="!isShowAdver">
  60. <view class="home-banner-img" v-if="in_page==1 && type == 1 ">
  61. <image style="width: 100%; height: 576rpx; border-radius: 12rpx;" :src="advertisImg" mode=""></image>
  62. <image @click="cleanCoverImg" class="img-clean" style="width: 20rpx; height: 20rpx; "
  63. src="/static/icon/clean.png" mode="">
  64. </image>
  65. </view>
  66. <view class="home-banner-img" v-if="in_page==1 && type == 2">
  67. <image class="banner-img" v-if="!isOpenVideo" @click="openVideoPlay"
  68. style="width: 100%; height: 576rpx; border-radius: 12rpx;" :src="videoCoverImg" mode=""></image>
  69. <image @click="cleanCoverImg" class="img-clean" style="width: 20rpx; height: 20rpx; "
  70. src="/static/icon/clean.png" mode="">
  71. </image>
  72. <video class="baner-video" id="myVideo" ref="myVideo"
  73. style="width: 100%; height: 576rpx;border-radius: 12rpx; " :src="videoSrc" controls
  74. :enable-progress-gesture="false">
  75. </video>
  76. </view>
  77. </view>
  78. <movable-area class="movableArea">
  79. <movable-view class="movableView" direction="all" x="630rpx" y="700rpx">
  80. <view class="img-IHg" @click="goJoin">
  81. <image style="width: 64rpx; height: 58rpx; " src="/static/icon/vip.png" mode=""></image>
  82. </view>
  83. </movable-view>
  84. </movable-area>
  85. <!-- 广告的附图 -->
  86. <view class="home-attach" @click="goH5">
  87. <image style="width: 690rpx;height: 156rpx;border-radius: 79rpx;" :src="advertisInsetImg" mode=""></image>
  88. </view>
  89. <!-- 酒店推荐 -->
  90. <view class="home-hotel home-special-area">
  91. <view class="home-special-area-left">
  92. <text>西区优品</text>
  93. <view class="text-shadow"></view>
  94. <image style="width:16rpx;height: 16rpx;margin-left: 14rpx;" src="/static/icon/symbol.png" mode="">
  95. </image>
  96. </view>
  97. </view>
  98. <!-- 酒店推荐图片 -->
  99. <view class="home-hotel-img">
  100. <view class="home-hotel-img-content">
  101. <view class="home-hotel-img-content-item" v-for="(item,index) in goodsList" :key="index"
  102. :style="{marginTop:item.marginTop || 0 }">
  103. <image class="home-hotel-img-content-item-img"
  104. :class="item.short?'home-hotel-img-content-item-img': 'home-hotel-img-content-item-img-long' "
  105. :src="item.img" mode=""></image>
  106. <view class="text">
  107. <text class="text-top">{{item.text}}</text>
  108. <text class="text-main">{{item.title}}</text>
  109. </view>
  110. </view>
  111. </view>
  112. <view class="home-hotel-img-more" @click="goProduceList">
  113. <text>查看更多商品</text>
  114. </view>
  115. </view>
  116. <!-- 酒店品牌 -->
  117. <view class="home-brand home-special-area">
  118. <view class="home-special-area-left">
  119. <text>洲际酒店集团品牌</text>
  120. <view class="text-shadow"></view>
  121. <image style="width:16rpx;height: 16rpx;margin-left: 14rpx;" src="/static/icon/symbol.png" mode="">
  122. </image>
  123. </view>
  124. </view>
  125. <!-- 酒店品牌图片 -->
  126. <view class="home-brand-img">
  127. <uni-swiper-dot :info="info" mode="default" :current="current2" :dots-styles="dotsStylesBand">
  128. <swiper class="swiper-box" circular @change="change2">
  129. <swiper-item v-for="(items ,index) in info" :key="index">
  130. <view v-for="(item ,j) in items" :key="j" class="swiper-item"
  131. @click="goGoodsDetail(item.jump_type,item.jump_config)">
  132. <image style="width:144rpx;height:142rpx;" :src="item.img" mode="aspectFill"></image>
  133. </view>
  134. </swiper-item>
  135. </swiper>
  136. </uni-swiper-dot>
  137. </view>
  138. <!-- 触底 -->
  139. <view class="home-bottom">
  140. <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
  141. </view>
  142. <!-- 弹窗广告 -->
  143. <uni-popup ref="popup" type="center">
  144. <view class="popup-banner">
  145. <image @click="goPopup" style="width: 656rpx;height: 916rpx;border-radius: 12rpx;" :src="popupImg">
  146. </image>
  147. <view class="popup-banner-clean" @click='closePopupBanner'>
  148. <image style="width: 20rpx; height: 20rpx; " src="/static/icon/clean.png" mode="">
  149. </view>
  150. </view>
  151. </uni-popup>
  152. <view style="height:168rpx; background-color: #f9f9f9; "></view>
  153. <tab-bar></tab-bar>
  154. </view>
  155. </template>
  156. <script>
  157. import TabBar from '../../components/TabBar/tabbar.vue'
  158. import SwiperBox from '../../components/SwiperBox/index.vue'
  159. import MyNav from "@/components/my-nav/my-nav.vue"
  160. export default {
  161. components: {
  162. TabBar,
  163. SwiperBox,
  164. MyNav
  165. },
  166. data() {
  167. return {
  168. //用户个人信息,判断是否登录
  169. admin: '',
  170. //获取token
  171. data: {},
  172. //录播图是展示视频1:图片2:视频
  173. resource_type: '',
  174. //广告弹框跳转
  175. jup_type: '',
  176. jump_config: '',
  177. //广告弹框图
  178. popupImg: '',
  179. //弹窗的类型 1只弹一次首次 2就是每次都弹啊
  180. times_type:'',
  181. //弹窗的显示0不显示 1显示
  182. popupImgStatus:'',
  183. //视频封面图
  184. isOpenVideo: false,
  185. videoCoverImg: '',
  186. videoSrc: '',
  187. in_page: '',
  188. type: '',
  189. //隐藏广告图
  190. isShowAdver: false,
  191. //广告图
  192. advertis: '',
  193. //广告附图展示图片
  194. advertisInsetImg: '',
  195. //广告图展示图片:
  196. advertisImg: '',
  197. //广告图展示视频
  198. goodsList: [{
  199. img: 'http://t9.9026.com/imgs/goodsimg01.png',
  200. text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
  201. title: '环球洲际',
  202. short: '',
  203. },
  204. {
  205. img: 'http://t9.9026.com/imgs/goodsimg02.png',
  206. text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
  207. title: '环球洲际'
  208. },
  209. {
  210. img: 'http://t9.9026.com/imgs/goodsimg02.png',
  211. text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
  212. title: '环球洲际'
  213. },
  214. {
  215. img: 'http://t9.9026.com/imgs/goodsimg01.png',
  216. text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
  217. title: '环球洲际',
  218. },
  219. ],
  220. status: 'noMore',
  221. contentText: {
  222. contentdown: '查看更多',
  223. contentrefresh: '加载中',
  224. contentnomore: '—— 已经到底啦 ——'
  225. },
  226. infoList: [],
  227. //轮播图
  228. info: [],
  229. dotsStyles: {
  230. bottom: 24,
  231. backgroundColor: 'rgba(255, 255, 255, .3)',
  232. border: '1px rgba(255, 255, 255, .3) solid',
  233. color: '#fff',
  234. selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
  235. selectedBorder: '1px rgba(255, 255, 255, 1) solid'
  236. },
  237. dotsStylesBand: {
  238. bottom: -24,
  239. backgroundColor: 'rgba(198, 198, 198, 1)',
  240. border: '1px rgba(0, 0, 0, .3) solid',
  241. color: '#fff',
  242. selectedBackgroundColor: 'rgba(151, 151, 151, 1)',
  243. selectedBorder: '1px rgba(0, 0, 0, .9) solid'
  244. },
  245. //指示点显示位置
  246. current1: 0,
  247. current2: 0,
  248. //指示点模式
  249. mode: 'dot',
  250. // 金刚图
  251. navList: [],
  252. //活动专区
  253. specialList: []
  254. }
  255. },
  256. // 下拉刷新
  257. onPullDownRefresh() {
  258. let _this = this
  259. setTimeout(function() {
  260. uni.stopPullDownRefresh();
  261. _this.$store.dispatch('user/allset', null)
  262. _this.getAllSet()
  263. _this.getList()
  264. }, 1000);
  265. },
  266. onReady: function(res) {
  267. this.videoContext = uni.createVideoContext('myVideo')
  268. },
  269. onShow() {
  270. //获取token
  271. this.getmsg()
  272. this.admin = this.$store.getters.userInfo
  273. console.log(this.admin);
  274. },
  275. onLoad() {
  276. this.shortLong()
  277. this.getAllSet()
  278. },
  279. methods: {
  280. //合同伙伴跳转h5和小程序
  281. goGoodsDetail(id, urls) {
  282. console.log(urls, '----->url');
  283. if (id == 1) {
  284. const url = urls; // 跳转的外链
  285. const navtitle = 'H5'; // 这个标题是你自己可以设置的
  286. uni.navigateTo({
  287. // 跳转到webview页面
  288. url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
  289. success: () => {
  290. console.log('成功')
  291. },
  292. fail: (e) => {
  293. console.log(e, "失败")
  294. }
  295. });
  296. } else if (id == 2) {
  297. let obj = JSON.parse(urls);
  298. wx.navigateToMiniProgram({
  299. appId: `${obj.appid}`, //appid
  300. path: `${obj.path}`, //path
  301. extraData: { //参数
  302. foo: 'bar'
  303. },
  304. // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
  305. success(res) {
  306. console.log('成功')
  307. // 打开成功
  308. },
  309. fail(e) {
  310. console.log(e, '失败')
  311. }
  312. })
  313. }
  314. },
  315. //弹窗广告跳转小程序/h5/内部其他页面
  316. goPopup() {
  317. //跳转h5
  318. if (this.jump_type == 1) {
  319. const url = this.jump_config; // 跳转的外链
  320. const navtitle = 'H5'; // 这个标题是你自己可以设置的
  321. uni.navigateTo({
  322. // 跳转到webview页面
  323. url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
  324. success: () => {
  325. console.log('成功')
  326. },
  327. fail: (e) => {
  328. console.log(e, "失败")
  329. }
  330. });
  331. } else if (this.jump_type == 2) {
  332. let obj = JSON.parse(this.jump_config);
  333. wx.navigateToMiniProgram({
  334. appId: `${obj.appid}`, //appid
  335. path: `${obj.path}`, //path
  336. extraData: { //参数
  337. foo: 'bar'
  338. },
  339. // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
  340. success(res) {
  341. console.log('成功')
  342. // 打开成功
  343. },
  344. fail(e) {
  345. console.log(e, '失败')
  346. }
  347. })
  348. }
  349. },
  350. //关闭弹框
  351. closePopupBanner() {
  352. this.$refs.popup.close()
  353. },
  354. //打开弹框
  355. open() {
  356. console.log(this.popupImgStatus,this.times_type);
  357. // 从本地缓存中同步获取指定 key 对应的内容,用于判断是否是第一次打开应用
  358. if(this.popupImgStatus == 1){
  359. if(this.times_type == 1){
  360. //首次进入弹窗
  361. const value = uni.getStorageSync('launchFlag');
  362. if (value) {
  363. console.log('首次弹窗')
  364. } else {
  365. // 没有值,跳到引导页,并存储,下次打开就不会进去引导页
  366. uni.setStorage({
  367. key: 'launchFlag',
  368. data: true
  369. });
  370. this.$refs.popup.open('center')
  371. }
  372. }else{
  373. this.$refs.popup.open('center')//每次都弹
  374. }
  375. }else{
  376. this.$refs.popup.close()//不显示广告弹框
  377. }
  378. },
  379. //点击视频封面图片,播放视频
  380. openVideoPlay() {
  381. console.log('播放');
  382. this.isOpenVideo = !this.isOpenVideo
  383. this.videoContext.play()
  384. },
  385. //轮播图跳转h5或者小程序
  386. goSwiperSmall(type, config) {
  387. //跳转h5
  388. if (type == 1) {
  389. const url = config; // 跳转的外链
  390. const navtitle = 'H5'; // 这个标题是你自己可以设置的
  391. uni.navigateTo({
  392. // 跳转到webview页面
  393. url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
  394. success: () => {
  395. console.log('成功')
  396. },
  397. fail: (e) => {
  398. console.log(e, "失败")
  399. }
  400. });
  401. } else if (type == 2) {
  402. let obj = JSON.parse(config);
  403. wx.navigateToMiniProgram({
  404. appId: `${obj.appid}`, //appid
  405. path: `${obj.path}`, //path
  406. extraData: { //参数
  407. foo: 'bar'
  408. },
  409. // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
  410. success(res) {
  411. console.log('成功')
  412. // 打开成功
  413. },
  414. fail(e) {
  415. console.log(e, '失败')
  416. }
  417. })
  418. }
  419. },
  420. //隐藏图片
  421. cleanCoverImg() {
  422. this.isShowAdver = !this.isShowAdver
  423. },
  424. // 活动详情页
  425. activeDetail(id) {
  426. uni.navigateTo({
  427. url: '/pages/index/active-detail/index?id=' + id
  428. })
  429. },
  430. // 点赞活动
  431. kudosActive(id, index) {
  432. let beforeLike = this.specialList[index].is_like
  433. this.$api.active.kudos({
  434. activity_id: id
  435. }).then(res => {
  436. console.log(res, '点赞')
  437. if (res.code == 0) {
  438. if (beforeLike == 1) {
  439. this.specialList[index].is_like = 0
  440. uni.showToast({
  441. icon: 'none',
  442. title: '取消点赞'
  443. })
  444. } else {
  445. this.specialList[index].is_like = 1
  446. uni.showToast({
  447. icon: 'none',
  448. title: '点赞成功'
  449. })
  450. }
  451. }
  452. })
  453. },
  454. // 获取活动列表
  455. getList() {
  456. this.$api.active.getActiveList({
  457. page: 0,
  458. keyword: '',
  459. category_id: ''
  460. }).then(res => {
  461. console.log(res, '活动列表')
  462. if (res.code == 0) {
  463. this.specialList = res.data.data
  464. console.log(this.specialList, '--->this.specialList');
  465. }
  466. })
  467. },
  468. //获取配置数据
  469. getAllSet() {
  470. this.$api.document.allSet().then(res => {
  471. this.$store.dispatch('user/allset', res.data)
  472. this.infoList = this.$store.getters.allset.banners
  473. this.navList = this.$store.getters.allset.nav_icon
  474. this.info = this.$store.getters.allset.partner
  475. //广告图
  476. this.advertis = this.$store.getters.allset.advertises.filter(item => {
  477. return item.in_page == 1
  478. })
  479. if (this.advertis[0].type == 1) {
  480. this.in_page = 1
  481. this.type = 1
  482. this.advertisImg = this.advertis[0].img
  483. } else if (this.advertis[0].type == 2) {
  484. this.in_page = 1
  485. this.type = 2
  486. this.videoCoverImg = this.advertis[0].video_cover
  487. this.videoSrc = this.advertis[0].video
  488. }
  489. //胶囊图
  490. this.advertisInset = this.$store.getters.allset.advertises.filter(item => {
  491. return item.in_page == 2
  492. })
  493. this.advertisInsetImg = this.advertisInset[0].img
  494. //广告弹框图
  495. this.popupImg = this.$store.getters.allset.popup_ads[0].img
  496. //弹窗是否展示
  497. this.popupImgStatus = this.$store.getters.allset.popup_ads[0].status
  498. this.times_type = this.$store.getters.allset.popup_ads[0].times_type
  499. //广告弹框跳转h5和小程序和内部
  500. this.jump_type = this.$store.getters.allset.popup_ads[0].jump_type,
  501. this.jump_config = this.$store.getters.allset.popup_ads[0].jump_config
  502. console.log(this.jump_type, this.jump_config, '----->this.advertis');
  503. this.open()
  504. })
  505. },
  506. shortLong() {
  507. this.goodsList.forEach((item, index, arr) => {
  508. if (index % 4 === 0) {
  509. item.short = true
  510. }
  511. if (index % 4 === 1) {
  512. item.long = true
  513. }
  514. if (index % 4 === 2) {
  515. item.long = true
  516. item.marginTop = -68 + "rpx"
  517. }
  518. if (index % 4 === 3) {
  519. item.short = true
  520. }
  521. })
  522. console.log(this.goodsList);
  523. },
  524. //跳转方法
  525. jumpHAppID(id, urls) {
  526. if (id == 1) {
  527. const url = urls; // 跳转的外链
  528. const navtitle = 'H5'; // 这个标题是你自己可以设置的
  529. uni.navigateTo({
  530. // 跳转到webview页面
  531. url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
  532. success: () => {
  533. console.log('成功')
  534. },
  535. fail: (e) => {
  536. console.log(e, "失败")
  537. }
  538. });
  539. } else if (id == 2) {
  540. let obj = JSON.parse(urls);
  541. wx.navigateToMiniProgram({
  542. appId: `${obj.appid}`, //appid
  543. path: `${obj.path}`, //path
  544. extraData: { //参数
  545. foo: 'bar'
  546. },
  547. // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
  548. success(res) {
  549. console.log('成功')
  550. // 打开成功
  551. },
  552. fail(e) {
  553. console.log(e, '失败')
  554. }
  555. })
  556. } else if (id == 3) {
  557. let obj = urls;
  558. console.log(obj, '------>obj');
  559. uni.redirectTo({
  560. url: `${obj}`
  561. })
  562. }
  563. },
  564. // 金刚图跳转
  565. goOther(index, jumpType, jumpConfig) {
  566. if (this.admin == undefined) {
  567. uni.navigateTo({
  568. url: '/pages/login/login'
  569. })
  570. } else {
  571. switch (index) {
  572. case 0:
  573. console.log(index, jumpType, jumpConfig, '------>index')
  574. this.jumpHAppID(jumpType, jumpConfig)
  575. break;
  576. case 1:
  577. this.jumpHAppID(jumpType, jumpConfig)
  578. break;
  579. case 2:
  580. this.jumpHAppID(jumpType, jumpConfig)
  581. break;
  582. case 3:
  583. this.jumpHAppID(jumpType, jumpConfig)
  584. break;
  585. case 4:
  586. this.jumpHAppID(jumpType, jumpConfig)
  587. break;
  588. default:
  589. console.log(index)
  590. }
  591. }
  592. },
  593. // 跳转其他小程序
  594. goJoin() {
  595. wx.navigateToMiniProgram({
  596. appId: 'wx255b58f0992b3c53', //appid
  597. path: 'newUIMain/enrollment/enrollment', //path
  598. extraData: { //参数
  599. foo: 'bar'
  600. },
  601. // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
  602. success(res) {
  603. console.log('成功')
  604. // 打开成功
  605. },
  606. fail(e) {
  607. console.log(e, '失败')
  608. }
  609. })
  610. },
  611. // 跳转到h5页面
  612. goH5() {
  613. let inset = this.advertisInset[0].jump_type
  614. let inserPath = this.advertisInset[0].jump_config
  615. //跳转h5
  616. if (inset == 1) {
  617. const url = inserPath; // 跳转的外链
  618. const navtitle = 'H5'; // 这个标题是你自己可以设置的
  619. uni.navigateTo({
  620. // 跳转到webview页面
  621. url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
  622. success: () => {
  623. console.log('成功')
  624. },
  625. fail: (e) => {
  626. console.log(e, "失败")
  627. }
  628. });
  629. } else if (inset == 2) {
  630. let obj = JSON.parse(inserPath);
  631. wx.navigateToMiniProgram({
  632. appId: `${obj.appid}`, //appid
  633. path: `${obj.path}`, //path
  634. extraData: { //参数
  635. foo: 'bar'
  636. },
  637. // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
  638. success(res) {
  639. console.log('成功')
  640. // 打开成功
  641. },
  642. fail(e) {
  643. console.log(e, '失败')
  644. }
  645. })
  646. }
  647. },
  648. //产品列表
  649. goProduceList() {
  650. uni.navigateTo({
  651. url: '/pages/goods/goods'
  652. })
  653. },
  654. //活动列表
  655. goSpecialList() {
  656. uni.navigateTo({
  657. url: '/pages/index/active-list/index'
  658. })
  659. },
  660. // 切换轮播图指示点
  661. change1(e) {
  662. this.current1 = e.detail.current;
  663. },
  664. change2(e) {
  665. this.current2 = e.detail.current;
  666. },
  667. getCode() {
  668. return new Promise((resolve, reject) => {
  669. uni.getUserInfo({
  670. success: loginRes => {
  671. console.log(loginRes);
  672. this.data.encryptData = loginRes.encryptedData,
  673. this.data.iv = loginRes.iv
  674. resolve(this.data)
  675. }
  676. })
  677. })
  678. },
  679. //获取微信登录的code码
  680. getmsg() {
  681. uni.login({
  682. provider: uni.$u.platform,
  683. success: res => {
  684. console.log(res, '------->res');
  685. this.getCode().then((data) => {
  686. console.log(this.data, '------>data');
  687. const params = {
  688. code: res.code,
  689. iv: data.iv,
  690. encryptData: data.encryptData
  691. }
  692. console.log(params);
  693. this.$api.my.myLogin(params).then(res => {
  694. let {
  695. token
  696. } = res.data
  697. this.$store.dispatch('user/token', token)
  698. // 获取活动列表
  699. this.getList()
  700. })
  701. })
  702. }
  703. })
  704. }
  705. },
  706. }
  707. </script>
  708. <style lang="scss" scoped>
  709. page {
  710. height: 100%;
  711. background-color: #f9f9f9;
  712. }
  713. .home {
  714. height: 100%;
  715. background-color: #f9f9f9;
  716. }
  717. //首页广告弹框
  718. .popup-banner {
  719. position: relative;
  720. .popup-banner-clean {
  721. position: absolute;
  722. top: 32rpx;
  723. right: 32rpx;
  724. width: 48rpx;
  725. height: 48rpx;
  726. background: #000000;
  727. opacity: 0.2;
  728. border-radius: 50%;
  729. display: flex;
  730. align-items: center;
  731. justify-content: center;
  732. }
  733. }
  734. .movableArea {
  735. position: fixed;
  736. top: 0;
  737. left: 0;
  738. width: 100%;
  739. height: 100%;
  740. z-index: 999;
  741. pointer-events: none; //设置area元素不可点击,则事件便会下移至页面下层元素
  742. .movableView {
  743. pointer-events: auto; //可以点击
  744. width: 84rpx;
  745. height: 84rpx;
  746. padding: 0 30rpx;
  747. .img-IHg {
  748. width: 84rpx;
  749. height: 84rpx;
  750. background-color: #fff;
  751. box-shadow: 0px 8rpx 24rpx 0px rgba(220, 222, 229, 0.4);
  752. border-radius: 50%;
  753. display: flex;
  754. align-items: center;
  755. justify-content: center;
  756. }
  757. }
  758. }
  759. .slot-wrap {
  760. display: flex;
  761. align-items: center;
  762. justify-content: center;
  763. flex: 1;
  764. }
  765. .home-swiper {
  766. width: 100%;
  767. height: 592rpx;
  768. .swiper-box {
  769. width: 100%;
  770. height: 592rpx;
  771. ;
  772. ::v-deep .swiper-item {
  773. width: 100%;
  774. height: 592rpx;
  775. display: flex;
  776. align-items: center;
  777. justify-content: space-between;
  778. }
  779. }
  780. }
  781. .home-nav {
  782. position: relative;
  783. top: -18rpx;
  784. padding-top: 60rpx;
  785. border-radius: 24rpx 24rpx 0px 0px;
  786. display: flex;
  787. align-items: center;
  788. justify-content: space-between;
  789. background-color: #f9f9f9;
  790. .home-nav-item {
  791. width: 20%;
  792. flex: none;
  793. display: flex;
  794. flex-direction: column;
  795. align-items: center;
  796. justify-content: center;
  797. }
  798. }
  799. .home-special-area {
  800. height: 146rpx;
  801. padding: 0 30rpx;
  802. // background-color: deeppink;
  803. display: flex;
  804. align-items: center;
  805. justify-content: space-between;
  806. .home-special-area-left {
  807. display: flex;
  808. align-items: center;
  809. justify-content: flex-start;
  810. color: #333;
  811. font-size: 36rpx;
  812. font-weight: 800;
  813. position: relative;
  814. .text-shadow {
  815. position: absolute;
  816. bottom: 0;
  817. left: 0;
  818. width: 200rpx;
  819. height: 16rpx;
  820. background: linear-gradient(270deg, rgba(249, 231, 219, 0) 0%, #F9E7DB 100%);
  821. border-radius: 200rpx 0px 0px 200rpx;
  822. }
  823. &::before {
  824. content: '';
  825. display: inline-block;
  826. width: 6rpx;
  827. height: 34rpx;
  828. background: linear-gradient(180deg, #FF6200 0%, #FF4C00 100%);
  829. border-radius: 3rpx;
  830. margin-right: 8rpx;
  831. margin-top: 2rpx;
  832. }
  833. }
  834. .home-special-area-right {
  835. display: flex;
  836. align-items: center;
  837. justify-content: flex-end;
  838. font-size: 30rpx;
  839. color: #999;
  840. }
  841. }
  842. .home-special-img {
  843. // height: 260rpx;
  844. padding: 0 30rpx;
  845. // background-color: #fff;
  846. display: flex;
  847. align-items: flex-start;
  848. justify-content: space-between;
  849. overflow-x: scroll;
  850. overflow-y: hidden;
  851. .ListItem {
  852. width: 312rpx;
  853. position: relative;
  854. margin-right: 24rpx;
  855. .kudosicon {
  856. width: 40rpx;
  857. height: 40rpx;
  858. position: absolute;
  859. right: 28rpx;
  860. top: 16rpx;
  861. border-radius: 50%;
  862. background: #FFFFFF;
  863. opacity: 0.84;
  864. display: flex;
  865. align-items: center;
  866. justify-content: center;
  867. }
  868. }
  869. .ListItem:last-child {
  870. margin-right: 0;
  871. }
  872. }
  873. .home-banner {
  874. height: 640rpx;
  875. padding: 0 30rpx;
  876. padding-top: 64rpx;
  877. .home-banner-img {
  878. position: relative;
  879. width: 100%;
  880. // height: 100%;
  881. .baner-video {
  882. position: absolute;
  883. top: 0;
  884. left: 0;
  885. }
  886. .banner-img {
  887. position: absolute;
  888. top: 0;
  889. left: 0;
  890. z-index: 9;
  891. }
  892. .img-clean {
  893. position: absolute;
  894. right: 28rpx;
  895. top: 30rpx;
  896. z-index: 99;
  897. }
  898. .img-IHg {
  899. width: 84rpx;
  900. height: 84rpx;
  901. background-color: #fff;
  902. box-shadow: 0px 8rpx 24rpx 0px rgba(220, 222, 229, 0.4);
  903. border-radius: 50%;
  904. display: flex;
  905. align-items: center;
  906. justify-content: center;
  907. position: fixed;
  908. top: 1030rpx;
  909. right: 30rpx;
  910. z-index: 99;
  911. }
  912. }
  913. }
  914. .home-attach {
  915. background-color: #f9f9f9;
  916. padding: 40rpx 30rpx 5rpx;
  917. }
  918. .home-hotel {
  919. height: 124rpx;
  920. background-color: #f9f9f9;
  921. }
  922. .home-hotel-img {
  923. background-color: #F9f9f9;
  924. padding: 20rpx 30rpx;
  925. .home-hotel-img-content {
  926. display: flex;
  927. align-items: flex-start;
  928. justify-content: space-between;
  929. flex-wrap: wrap;
  930. .home-hotel-img-content-item {
  931. width: 332rpx;
  932. background: #FFFFFF;
  933. box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.04);
  934. border-radius: 12rpx;
  935. margin-bottom: 26rpx;
  936. // &:nth-child(2n+1){
  937. // // position: relative;
  938. // top: -33px;
  939. // }
  940. // &:nth-child(1){
  941. // // position: relative;
  942. // top: 0;
  943. // }
  944. .home-hotel-img-content-item-img {
  945. width: 332rpx;
  946. height: 332rpx;
  947. object-fit: cover;
  948. object-position: center;
  949. }
  950. .home-hotel-img-content-item-img-long {
  951. width: 332rpx;
  952. height: 400rpx;
  953. object-fit: cover;
  954. object-position: center;
  955. }
  956. .text {
  957. display: flex;
  958. flex-direction: column;
  959. align-items: flex-start;
  960. justify-content: center;
  961. padding: 18rpx 22rpx 32rpx;
  962. .text-top {
  963. font-size: 28rpx;
  964. font-weight: bold;
  965. color: #333;
  966. }
  967. .text-main {
  968. display: none;
  969. margin-top: 20rpx;
  970. font-size: 24rpx;
  971. color: #999999;
  972. }
  973. }
  974. }
  975. }
  976. .home-hotel-img-more {
  977. height: 70rpx;
  978. background-color: #fff;
  979. border-radius: 10rpx;
  980. border: 2rpx solid #ddd;
  981. font-size: 28rpx;
  982. color: #5A5A5A;
  983. display: flex;
  984. align-items: center;
  985. justify-content: center;
  986. margin-top: 50rpx;
  987. }
  988. }
  989. .home-brand {
  990. height: 124rpx;
  991. background-color: #f9f9f9;
  992. }
  993. .home-brand-img {
  994. padding: 0 30rpx;
  995. background-color: #f9f9f9;
  996. zhe::v-deep .uni-swiper__dots-item {
  997. width: 22rpx !important;
  998. height: 2rpx !important;
  999. }
  1000. ::v-deep .uni-swiper__dots-bar {
  1001. width: 22rpx !important;
  1002. height: 2rpx !important;
  1003. }
  1004. ::v-deep .uni-swiper__warp {
  1005. overflow: unset !important;
  1006. }
  1007. .swiper-box {
  1008. background-color: #f9f9f9;
  1009. height: 200rpx;
  1010. ::v-deep swiper-item {
  1011. width: 100%;
  1012. display: flex;
  1013. align-items: center;
  1014. justify-content: space-between;
  1015. view {
  1016. width: 164rpx;
  1017. height: 162rpx;
  1018. background: #FFFFFF;
  1019. box-shadow: 0px 4rpx 8rpx 0rpx rgba(220, 222, 229, 0.4);
  1020. border-radius: 32rpx;
  1021. display: flex;
  1022. align-items: center;
  1023. justify-content: center;
  1024. image {
  1025. border-radius: 32rpx;
  1026. }
  1027. }
  1028. }
  1029. }
  1030. }
  1031. .home-bottom {
  1032. background-color: #f9f9f9;
  1033. padding-top: 120rpx;
  1034. }
  1035. </style>