123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125 |
- <template>
- <view class="home">
- <MyNav title="洲际酒店集团中国西区" bgColor="" :backIcon="false"></MyNav>
- <!-- swiper -->
- <view class="home-swiper">
- <uni-swiper-dot :info="infoList" :current="current1" :mode="mode" :dots-styles="dotsStyles">
- <swiper class="swiper-box" @change="change1" circular>
- <swiper-item v-for="(item ,index) in infoList" :key="index">
- <view class="swiper-item" v-if="item.resource_type == 1"
- @click="goSwiperSmall(item.jump_type,item.jump_config)">
- <image style="width: 100%;height:592rpx;" :src="item.img" mode="aspectFill"></image>
- </view>
- <view class="swiper-item" v-if="item.resource_type == 2">
- <video id="swiperVideo" ref="swiperVideo" style="width: 100%; height: 592rpx;"
- :src="item.video_url" controls :enable-progress-gesture="false">
- </video>
- </view>
- </swiper-item>
- </swiper>
- </uni-swiper-dot>
- </view>
- <!-- 金刚图 -->
- <view class="home-nav">
- <view class="home-nav-item" v-for="(item,index) in navList" :key="index"
- @click="goOther(index,item.jump_type,item.jump_config)">
- <image style="width: 101.96rpx;height: 103.96rpx;" :src="item.img" mode=""></image>
- <text style="color: #333;font-size: 24rpx;margin-top: 18rpx; ">{{item.title}}</text>
- </view>
- </view>
- <!-- 活动专区 -->
- <view class="home-special-area">
- <view class="home-special-area-left">
- <text>非凡西区</text>
- <view class="text-shadow"></view>
- <image style="width:16rpx;height: 16rpx;margin-left: 14rpx;" src="/static/icon/symbol.png" mode="">
- </image>
- </view>
- <view @click="goSpecialList" class="home-special-area-right">
- <text>全部</text>
- <image style="width: 12rpx; height: 20rpx;margin-left: 8rpx;" src="/static/icon/right01.png" mode="">
- </image>
- </view>
- </view>
- <!-- 活动图片 -->
- <view class="home-special-img">
- <view class="ListItem" v-for="(item,index) in specialList" :key="index" @click="activeDetail(item.id)">
- <image style="width: 312rpx;height: 200rpx; border-radius: 12rpx; "
- :src="item.banners?item.cover_img:'http://t9.9026.com/imgs/Kudosbg.png'" mode=""></image>
- <view class="kudosicon" @click.stop="kudosActive(item.id,index)">
- <image style="width:24rpx;height: 24rpx;" src="/static/icon/Kudos.png" v-if="item.is_like==0">
- </image>
- <image style="width:24rpx;height: 24rpx;" src="/static/icon/Kudos(1).png" v-if="item.is_like==1">
- </image>
- </view>
- <text style="color: #333;font-weight: bold;font-size: 28rpx;">{{item.title}}</text>
- </view>
- </view>
- <!-- 广告图 -->
- <view class="home-banner" v-if="!isShowAdver">
- <view class="home-banner-img" v-if="in_page==1 && type == 1 ">
- <image style="width: 100%; height: 576rpx; border-radius: 12rpx;" :src="advertisImg" mode=""></image>
- <image @click="cleanCoverImg" class="img-clean" style="width: 20rpx; height: 20rpx; "
- src="/static/icon/clean.png" mode="">
- </image>
- </view>
- <view class="home-banner-img" v-if="in_page==1 && type == 2">
- <image class="banner-img" v-if="!isOpenVideo" @click="openVideoPlay"
- style="width: 100%; height: 576rpx; border-radius: 12rpx;" :src="videoCoverImg" mode=""></image>
- <image @click="cleanCoverImg" class="img-clean" style="width: 20rpx; height: 20rpx; "
- src="/static/icon/clean.png" mode="">
- </image>
- <video class="baner-video" id="myVideo" ref="myVideo"
- style="width: 100%; height: 576rpx;border-radius: 12rpx; " :src="videoSrc" controls
- :enable-progress-gesture="false">
- </video>
- </view>
- </view>
- <movable-area class="movableArea">
- <movable-view class="movableView" direction="all" x="630rpx" y="700rpx">
- <view class="img-IHg" @click="goJoin">
- <image style="width: 64rpx; height: 58rpx; " src="/static/icon/vip.png" mode=""></image>
- </view>
- </movable-view>
- </movable-area>
- <!-- 广告的附图 -->
- <view class="home-attach" @click="goH5">
- <image style="width: 690rpx;height: 156rpx;border-radius: 79rpx;" :src="advertisInsetImg" mode=""></image>
- </view>
- <!-- 酒店推荐 -->
- <view class="home-hotel home-special-area">
- <view class="home-special-area-left">
- <text>西区优品</text>
- <view class="text-shadow"></view>
- <image style="width:16rpx;height: 16rpx;margin-left: 14rpx;" src="/static/icon/symbol.png" mode="">
- </image>
- </view>
- </view>
- <!-- 酒店推荐图片 -->
- <view class="home-hotel-img">
- <view class="home-hotel-img-content">
- <view class="home-hotel-img-content-item" v-for="(item,index) in goodsList" :key="index"
- :style="{marginTop:item.marginTop || 0 }">
- <image class="home-hotel-img-content-item-img"
- :class="item.short?'home-hotel-img-content-item-img': 'home-hotel-img-content-item-img-long' "
- :src="item.img" mode=""></image>
- <view class="text">
- <text class="text-top">{{item.text}}</text>
- <text class="text-main">{{item.title}}</text>
- </view>
- </view>
- </view>
- <view class="home-hotel-img-more" @click="goProduceList">
- <text>查看更多商品</text>
- </view>
- </view>
- <!-- 酒店品牌 -->
- <view class="home-brand home-special-area">
- <view class="home-special-area-left">
- <text>洲际酒店集团品牌</text>
- <view class="text-shadow"></view>
- <image style="width:16rpx;height: 16rpx;margin-left: 14rpx;" src="/static/icon/symbol.png" mode="">
- </image>
- </view>
- </view>
- <!-- 酒店品牌图片 -->
- <view class="home-brand-img">
- <uni-swiper-dot :info="info" mode="default" :current="current2" :dots-styles="dotsStylesBand">
- <swiper class="swiper-box" circular @change="change2">
- <swiper-item v-for="(items ,index) in info" :key="index">
- <view v-for="(item ,j) in items" :key="j" class="swiper-item"
- @click="goGoodsDetail(item.jump_type,item.jump_config)">
- <image style="width:144rpx;height:142rpx;" :src="item.img" mode="aspectFill"></image>
- </view>
- </swiper-item>
- </swiper>
- </uni-swiper-dot>
- </view>
- <!-- 触底 -->
- <view class="home-bottom">
- <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
- </view>
- <!-- 弹窗广告 -->
- <uni-popup ref="popup" type="center">
- <view class="popup-banner">
- <image @click="goPopup" style="width: 656rpx;height: 916rpx;border-radius: 12rpx;" :src="popupImg">
- </image>
- <view class="popup-banner-clean" @click='closePopupBanner'>
- <image style="width: 20rpx; height: 20rpx; " src="/static/icon/clean.png" mode="">
- </view>
- </view>
- </uni-popup>
- <view style="height:168rpx; background-color: #f9f9f9; "></view>
- <tab-bar></tab-bar>
- </view>
- </template>
- <script>
- import TabBar from '../../components/TabBar/tabbar.vue'
- import SwiperBox from '../../components/SwiperBox/index.vue'
- import MyNav from "@/components/my-nav/my-nav.vue"
- export default {
- components: {
- TabBar,
- SwiperBox,
- MyNav
- },
- data() {
- return {
- //用户个人信息,判断是否登录
- admin: '',
- //获取token
- data: {},
- //录播图是展示视频1:图片2:视频
- resource_type: '',
- //广告弹框跳转
- jup_type: '',
- jump_config: '',
- //广告弹框图
- popupImg: '',
- //弹窗的类型 1只弹一次首次 2就是每次都弹啊
- times_type:'',
- //弹窗的显示0不显示 1显示
- popupImgStatus:'',
- //视频封面图
- isOpenVideo: false,
- videoCoverImg: '',
- videoSrc: '',
- in_page: '',
- type: '',
- //隐藏广告图
- isShowAdver: false,
- //广告图
- advertis: '',
- //广告附图展示图片
- advertisInsetImg: '',
- //广告图展示图片:
- advertisImg: '',
- //广告图展示视频
- goodsList: [{
- img: 'http://t9.9026.com/imgs/goodsimg01.png',
- text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
- title: '环球洲际',
- short: '',
- },
- {
- img: 'http://t9.9026.com/imgs/goodsimg02.png',
- text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
- title: '环球洲际'
- },
- {
- img: 'http://t9.9026.com/imgs/goodsimg02.png',
- text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
- title: '环球洲际'
- },
- {
- img: 'http://t9.9026.com/imgs/goodsimg01.png',
- text: '中秋佳节五仁月饼,惊喜特供,限时抢购',
- title: '环球洲际',
- },
- ],
- status: 'noMore',
- contentText: {
- contentdown: '查看更多',
- contentrefresh: '加载中',
- contentnomore: '—— 已经到底啦 ——'
- },
- infoList: [],
- //轮播图
- info: [],
- dotsStyles: {
- bottom: 24,
- backgroundColor: 'rgba(255, 255, 255, .3)',
- border: '1px rgba(255, 255, 255, .3) solid',
- color: '#fff',
- selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
- selectedBorder: '1px rgba(255, 255, 255, 1) solid'
- },
- dotsStylesBand: {
- bottom: -24,
- backgroundColor: 'rgba(198, 198, 198, 1)',
- border: '1px rgba(0, 0, 0, .3) solid',
- color: '#fff',
- selectedBackgroundColor: 'rgba(151, 151, 151, 1)',
- selectedBorder: '1px rgba(0, 0, 0, .9) solid'
- },
- //指示点显示位置
- current1: 0,
- current2: 0,
- //指示点模式
- mode: 'dot',
- // 金刚图
- navList: [],
- //活动专区
- specialList: []
- }
- },
- // 下拉刷新
- onPullDownRefresh() {
- let _this = this
- setTimeout(function() {
- uni.stopPullDownRefresh();
- _this.$store.dispatch('user/allset', null)
- _this.getAllSet()
- _this.getList()
- }, 1000);
- },
- onReady: function(res) {
- this.videoContext = uni.createVideoContext('myVideo')
- },
- onShow() {
- //获取token
- this.getmsg()
- this.admin = this.$store.getters.userInfo
- console.log(this.admin);
- },
- onLoad() {
-
- this.shortLong()
- this.getAllSet()
- },
- methods: {
- //合同伙伴跳转h5和小程序
- goGoodsDetail(id, urls) {
- console.log(urls, '----->url');
- if (id == 1) {
- const url = urls; // 跳转的外链
- const navtitle = 'H5'; // 这个标题是你自己可以设置的
- uni.navigateTo({
- // 跳转到webview页面
- url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
- success: () => {
- console.log('成功')
- },
- fail: (e) => {
- console.log(e, "失败")
- }
- });
- } else if (id == 2) {
- let obj = JSON.parse(urls);
- wx.navigateToMiniProgram({
- appId: `${obj.appid}`, //appid
- path: `${obj.path}`, //path
- extraData: { //参数
- foo: 'bar'
- },
- // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
- success(res) {
- console.log('成功')
- // 打开成功
- },
- fail(e) {
- console.log(e, '失败')
- }
- })
- }
- },
- //弹窗广告跳转小程序/h5/内部其他页面
- goPopup() {
- //跳转h5
- if (this.jump_type == 1) {
- const url = this.jump_config; // 跳转的外链
- const navtitle = 'H5'; // 这个标题是你自己可以设置的
- uni.navigateTo({
- // 跳转到webview页面
- url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
- success: () => {
- console.log('成功')
- },
- fail: (e) => {
- console.log(e, "失败")
- }
- });
- } else if (this.jump_type == 2) {
- let obj = JSON.parse(this.jump_config);
- wx.navigateToMiniProgram({
- appId: `${obj.appid}`, //appid
- path: `${obj.path}`, //path
- extraData: { //参数
- foo: 'bar'
- },
- // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
- success(res) {
- console.log('成功')
- // 打开成功
- },
- fail(e) {
- console.log(e, '失败')
- }
- })
- }
- },
- //关闭弹框
- closePopupBanner() {
- this.$refs.popup.close()
- },
- //打开弹框
- open() {
- console.log(this.popupImgStatus,this.times_type);
- // 从本地缓存中同步获取指定 key 对应的内容,用于判断是否是第一次打开应用
- if(this.popupImgStatus == 1){
- if(this.times_type == 1){
- //首次进入弹窗
- const value = uni.getStorageSync('launchFlag');
- if (value) {
- console.log('首次弹窗')
- } else {
- // 没有值,跳到引导页,并存储,下次打开就不会进去引导页
- uni.setStorage({
- key: 'launchFlag',
- data: true
- });
- this.$refs.popup.open('center')
- }
- }else{
- this.$refs.popup.open('center')//每次都弹
- }
- }else{
- this.$refs.popup.close()//不显示广告弹框
- }
- },
- //点击视频封面图片,播放视频
- openVideoPlay() {
- console.log('播放');
- this.isOpenVideo = !this.isOpenVideo
- this.videoContext.play()
- },
- //轮播图跳转h5或者小程序
- goSwiperSmall(type, config) {
- //跳转h5
- if (type == 1) {
- const url = config; // 跳转的外链
- const navtitle = 'H5'; // 这个标题是你自己可以设置的
- uni.navigateTo({
- // 跳转到webview页面
- url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
- success: () => {
- console.log('成功')
- },
- fail: (e) => {
- console.log(e, "失败")
- }
- });
- } else if (type == 2) {
- let obj = JSON.parse(config);
- wx.navigateToMiniProgram({
- appId: `${obj.appid}`, //appid
- path: `${obj.path}`, //path
- extraData: { //参数
- foo: 'bar'
- },
- // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
- success(res) {
- console.log('成功')
- // 打开成功
- },
- fail(e) {
- console.log(e, '失败')
- }
- })
- }
- },
- //隐藏图片
- cleanCoverImg() {
- this.isShowAdver = !this.isShowAdver
- },
- // 活动详情页
- activeDetail(id) {
- uni.navigateTo({
- url: '/pages/index/active-detail/index?id=' + id
- })
- },
- // 点赞活动
- kudosActive(id, index) {
- let beforeLike = this.specialList[index].is_like
- this.$api.active.kudos({
- activity_id: id
- }).then(res => {
- console.log(res, '点赞')
- if (res.code == 0) {
- if (beforeLike == 1) {
- this.specialList[index].is_like = 0
- uni.showToast({
- icon: 'none',
- title: '取消点赞'
- })
- } else {
- this.specialList[index].is_like = 1
- uni.showToast({
- icon: 'none',
- title: '点赞成功'
- })
- }
- }
- })
- },
- // 获取活动列表
- getList() {
- this.$api.active.getActiveList({
- page: 0,
- keyword: '',
- category_id: ''
- }).then(res => {
- console.log(res, '活动列表')
- if (res.code == 0) {
- this.specialList = res.data.data
- console.log(this.specialList, '--->this.specialList');
- }
- })
- },
- //获取配置数据
- getAllSet() {
- this.$api.document.allSet().then(res => {
- this.$store.dispatch('user/allset', res.data)
- this.infoList = this.$store.getters.allset.banners
- this.navList = this.$store.getters.allset.nav_icon
- this.info = this.$store.getters.allset.partner
- //广告图
- this.advertis = this.$store.getters.allset.advertises.filter(item => {
- return item.in_page == 1
- })
- if (this.advertis[0].type == 1) {
- this.in_page = 1
- this.type = 1
- this.advertisImg = this.advertis[0].img
- } else if (this.advertis[0].type == 2) {
- this.in_page = 1
- this.type = 2
- this.videoCoverImg = this.advertis[0].video_cover
- this.videoSrc = this.advertis[0].video
- }
- //胶囊图
- this.advertisInset = this.$store.getters.allset.advertises.filter(item => {
- return item.in_page == 2
- })
- this.advertisInsetImg = this.advertisInset[0].img
- //广告弹框图
- this.popupImg = this.$store.getters.allset.popup_ads[0].img
- //弹窗是否展示
- this.popupImgStatus = this.$store.getters.allset.popup_ads[0].status
- this.times_type = this.$store.getters.allset.popup_ads[0].times_type
- //广告弹框跳转h5和小程序和内部
- this.jump_type = this.$store.getters.allset.popup_ads[0].jump_type,
- this.jump_config = this.$store.getters.allset.popup_ads[0].jump_config
- console.log(this.jump_type, this.jump_config, '----->this.advertis');
- this.open()
- })
- },
- shortLong() {
- this.goodsList.forEach((item, index, arr) => {
- if (index % 4 === 0) {
- item.short = true
- }
- if (index % 4 === 1) {
- item.long = true
- }
- if (index % 4 === 2) {
- item.long = true
- item.marginTop = -68 + "rpx"
- }
- if (index % 4 === 3) {
- item.short = true
- }
- })
- console.log(this.goodsList);
- },
- //跳转方法
- jumpHAppID(id, urls) {
- if (id == 1) {
- const url = urls; // 跳转的外链
- const navtitle = 'H5'; // 这个标题是你自己可以设置的
- uni.navigateTo({
- // 跳转到webview页面
- url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
- success: () => {
- console.log('成功')
- },
- fail: (e) => {
- console.log(e, "失败")
- }
- });
- } else if (id == 2) {
- let obj = JSON.parse(urls);
- wx.navigateToMiniProgram({
- appId: `${obj.appid}`, //appid
- path: `${obj.path}`, //path
- extraData: { //参数
- foo: 'bar'
- },
- // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
- success(res) {
- console.log('成功')
- // 打开成功
- },
- fail(e) {
- console.log(e, '失败')
- }
- })
- } else if (id == 3) {
- let obj = urls;
- console.log(obj, '------>obj');
- uni.redirectTo({
- url: `${obj}`
- })
- }
- },
- // 金刚图跳转
- goOther(index, jumpType, jumpConfig) {
- if (this.admin == undefined) {
- uni.navigateTo({
- url: '/pages/login/login'
- })
- } else {
- switch (index) {
- case 0:
- console.log(index, jumpType, jumpConfig, '------>index')
- this.jumpHAppID(jumpType, jumpConfig)
- break;
- case 1:
- this.jumpHAppID(jumpType, jumpConfig)
- break;
- case 2:
- this.jumpHAppID(jumpType, jumpConfig)
- break;
- case 3:
- this.jumpHAppID(jumpType, jumpConfig)
- break;
- case 4:
- this.jumpHAppID(jumpType, jumpConfig)
- break;
- default:
- console.log(index)
- }
- }
- },
- // 跳转其他小程序
- goJoin() {
- wx.navigateToMiniProgram({
- appId: 'wx255b58f0992b3c53', //appid
- path: 'newUIMain/enrollment/enrollment', //path
- extraData: { //参数
- foo: 'bar'
- },
- // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
- success(res) {
- console.log('成功')
- // 打开成功
- },
- fail(e) {
- console.log(e, '失败')
- }
- })
- },
- // 跳转到h5页面
- goH5() {
- let inset = this.advertisInset[0].jump_type
- let inserPath = this.advertisInset[0].jump_config
- //跳转h5
- if (inset == 1) {
- const url = inserPath; // 跳转的外链
- const navtitle = 'H5'; // 这个标题是你自己可以设置的
- uni.navigateTo({
- // 跳转到webview页面
- url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
- success: () => {
- console.log('成功')
- },
- fail: (e) => {
- console.log(e, "失败")
- }
- });
- } else if (inset == 2) {
- let obj = JSON.parse(inserPath);
- wx.navigateToMiniProgram({
- appId: `${obj.appid}`, //appid
- path: `${obj.path}`, //path
- extraData: { //参数
- foo: 'bar'
- },
- // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
- success(res) {
- console.log('成功')
- // 打开成功
- },
- fail(e) {
- console.log(e, '失败')
- }
- })
- }
- },
- //产品列表
- goProduceList() {
- uni.navigateTo({
- url: '/pages/goods/goods'
- })
- },
- //活动列表
- goSpecialList() {
- uni.navigateTo({
- url: '/pages/index/active-list/index'
- })
- },
- // 切换轮播图指示点
- change1(e) {
- this.current1 = e.detail.current;
- },
- change2(e) {
- this.current2 = e.detail.current;
- },
- getCode() {
- return new Promise((resolve, reject) => {
- uni.getUserInfo({
- success: loginRes => {
- console.log(loginRes);
- this.data.encryptData = loginRes.encryptedData,
- this.data.iv = loginRes.iv
- resolve(this.data)
- }
- })
- })
- },
- //获取微信登录的code码
- getmsg() {
- uni.login({
- provider: uni.$u.platform,
- success: res => {
- console.log(res, '------->res');
- this.getCode().then((data) => {
- console.log(this.data, '------>data');
- const params = {
- code: res.code,
- iv: data.iv,
- encryptData: data.encryptData
- }
- console.log(params);
- this.$api.my.myLogin(params).then(res => {
- let {
- token
- } = res.data
- this.$store.dispatch('user/token', token)
- // 获取活动列表
- this.getList()
- })
- })
- }
- })
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- page {
- height: 100%;
- background-color: #f9f9f9;
- }
- .home {
- height: 100%;
- background-color: #f9f9f9;
- }
- //首页广告弹框
- .popup-banner {
- position: relative;
- .popup-banner-clean {
- position: absolute;
- top: 32rpx;
- right: 32rpx;
- width: 48rpx;
- height: 48rpx;
- background: #000000;
- opacity: 0.2;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- .movableArea {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 999;
- pointer-events: none; //设置area元素不可点击,则事件便会下移至页面下层元素
- .movableView {
- pointer-events: auto; //可以点击
- width: 84rpx;
- height: 84rpx;
- padding: 0 30rpx;
- .img-IHg {
- width: 84rpx;
- height: 84rpx;
- background-color: #fff;
- box-shadow: 0px 8rpx 24rpx 0px rgba(220, 222, 229, 0.4);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- }
- .slot-wrap {
- display: flex;
- align-items: center;
- justify-content: center;
- flex: 1;
- }
- .home-swiper {
- width: 100%;
- height: 592rpx;
- .swiper-box {
- width: 100%;
- height: 592rpx;
- ;
- ::v-deep .swiper-item {
- width: 100%;
- height: 592rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- }
- }
- .home-nav {
- position: relative;
- top: -18rpx;
- padding-top: 60rpx;
- border-radius: 24rpx 24rpx 0px 0px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- background-color: #f9f9f9;
- .home-nav-item {
- width: 20%;
- flex: none;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- }
- .home-special-area {
- height: 146rpx;
- padding: 0 30rpx;
- // background-color: deeppink;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .home-special-area-left {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- color: #333;
- font-size: 36rpx;
- font-weight: 800;
- position: relative;
- .text-shadow {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 200rpx;
- height: 16rpx;
- background: linear-gradient(270deg, rgba(249, 231, 219, 0) 0%, #F9E7DB 100%);
- border-radius: 200rpx 0px 0px 200rpx;
- }
- &::before {
- content: '';
- display: inline-block;
- width: 6rpx;
- height: 34rpx;
- background: linear-gradient(180deg, #FF6200 0%, #FF4C00 100%);
- border-radius: 3rpx;
- margin-right: 8rpx;
- margin-top: 2rpx;
- }
- }
- .home-special-area-right {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- font-size: 30rpx;
- color: #999;
- }
- }
- .home-special-img {
- // height: 260rpx;
- padding: 0 30rpx;
- // background-color: #fff;
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- overflow-x: scroll;
- overflow-y: hidden;
- .ListItem {
- width: 312rpx;
- position: relative;
- margin-right: 24rpx;
- .kudosicon {
- width: 40rpx;
- height: 40rpx;
- position: absolute;
- right: 28rpx;
- top: 16rpx;
- border-radius: 50%;
- background: #FFFFFF;
- opacity: 0.84;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- .ListItem:last-child {
- margin-right: 0;
- }
- }
- .home-banner {
- height: 640rpx;
- padding: 0 30rpx;
- padding-top: 64rpx;
- .home-banner-img {
- position: relative;
- width: 100%;
- // height: 100%;
- .baner-video {
- position: absolute;
- top: 0;
- left: 0;
- }
- .banner-img {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 9;
- }
- .img-clean {
- position: absolute;
- right: 28rpx;
- top: 30rpx;
- z-index: 99;
- }
- .img-IHg {
- width: 84rpx;
- height: 84rpx;
- background-color: #fff;
- box-shadow: 0px 8rpx 24rpx 0px rgba(220, 222, 229, 0.4);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- position: fixed;
- top: 1030rpx;
- right: 30rpx;
- z-index: 99;
- }
- }
- }
- .home-attach {
- background-color: #f9f9f9;
- padding: 40rpx 30rpx 5rpx;
- }
- .home-hotel {
- height: 124rpx;
- background-color: #f9f9f9;
- }
- .home-hotel-img {
- background-color: #F9f9f9;
- padding: 20rpx 30rpx;
- .home-hotel-img-content {
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- flex-wrap: wrap;
- .home-hotel-img-content-item {
- width: 332rpx;
- background: #FFFFFF;
- box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.04);
- border-radius: 12rpx;
- margin-bottom: 26rpx;
- // &:nth-child(2n+1){
- // // position: relative;
- // top: -33px;
- // }
- // &:nth-child(1){
- // // position: relative;
- // top: 0;
- // }
- .home-hotel-img-content-item-img {
- width: 332rpx;
- height: 332rpx;
- object-fit: cover;
- object-position: center;
- }
- .home-hotel-img-content-item-img-long {
- width: 332rpx;
- height: 400rpx;
- object-fit: cover;
- object-position: center;
- }
- .text {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
- padding: 18rpx 22rpx 32rpx;
- .text-top {
- font-size: 28rpx;
- font-weight: bold;
- color: #333;
- }
- .text-main {
- display: none;
- margin-top: 20rpx;
- font-size: 24rpx;
- color: #999999;
- }
- }
- }
- }
- .home-hotel-img-more {
- height: 70rpx;
- background-color: #fff;
- border-radius: 10rpx;
- border: 2rpx solid #ddd;
- font-size: 28rpx;
- color: #5A5A5A;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-top: 50rpx;
- }
- }
- .home-brand {
- height: 124rpx;
- background-color: #f9f9f9;
- }
- .home-brand-img {
- padding: 0 30rpx;
- background-color: #f9f9f9;
- zhe::v-deep .uni-swiper__dots-item {
- width: 22rpx !important;
- height: 2rpx !important;
- }
- ::v-deep .uni-swiper__dots-bar {
- width: 22rpx !important;
- height: 2rpx !important;
- }
- ::v-deep .uni-swiper__warp {
- overflow: unset !important;
- }
- .swiper-box {
- background-color: #f9f9f9;
- height: 200rpx;
- ::v-deep swiper-item {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- view {
- width: 164rpx;
- height: 162rpx;
- background: #FFFFFF;
- box-shadow: 0px 4rpx 8rpx 0rpx rgba(220, 222, 229, 0.4);
- border-radius: 32rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- image {
- border-radius: 32rpx;
- }
- }
- }
- }
- }
- .home-bottom {
- background-color: #f9f9f9;
- padding-top: 120rpx;
- }
- </style>
|