123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186 |
- <template>
- <view>
- <view class="top">
- <u-image class="top-pic" :src="topSrc" height="350rpx" width="100%" mode="aspectFill"></u-image>
- </view>
- <view class="hotel-name">
- <u-text :text="currentHotelName" align="center" size="36rpx"></u-text>
- </view>
- <view class="bottom">
- <view class="bottom-item" v-for="item in businessListTop" @click="navigateTo(item.url)">
- <view class="top-img">
- <u-image :src="item.src" width="180rpx" height="180rpx"></u-image>
- </view>
- <view class="bottom-img">
- <u-image :src="item.backgroundSrc" width="160rpx" height="160rpx"></u-image>
- </view>
- <view class="tip">
- <text class="">{{ item.text }}</text>
- </view>
- </view>
- <view class="bottom-item" v-for="item in businessListBottom" @click="navigateTo(item.url)">
- <view class="top-img">
- <u-image :src="item.src" width="180rpx" height="180rpx"></u-image>
- </view>
- <view class="bottom-img">
- <u-image :src="item.backgroundSrc" width="160rpx" height="160rpx"></u-image>
- </view>
- <view class="tip">
- <text class="">{{ item.text }}</text>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- stringHasText
- } from '../../utils/commonUtils.js'
- import {
- startEid
- } from "../../mp_ecard_sdk/main.js";
- import moment from "moment";
- import {
- mapState,
- mapMutations
- } from "vuex";
- import {
- IMG_BASE_URL
- } from "../../config.js"
- export default {
- data() {
- return {
- topSrc: IMG_BASE_URL + "/home_top.png",
- businessListTop: [{
- backgroundSrc: IMG_BASE_URL + "/home_business_background.png",
- src: IMG_BASE_URL + "/checkin.png",
- text: "入住",
- url: "/subpkg_checkin/selectCheckinType/selectCheckinType",
- },
- {
- backgroundSrc: IMG_BASE_URL + "/home_business_background.png",
- src: IMG_BASE_URL + "/extand.png",
- text: "续住",
- url: "/subpkg/extend/extend",
- },
- {
- backgroundSrc: IMG_BASE_URL + "/home_business_background.png",
- src: IMG_BASE_URL + "/checkout.png",
- text: "退房",
- url: "/subpkg/checkout/checkout",
- },
- ],
- businessListBottom: [{
- backgroundSrc: IMG_BASE_URL + "/home_business_background.png",
- src: IMG_BASE_URL + "/emergency_key.png",
- text: "手机开门",
- url: "/subpkg/emergencyKey/emergencyKey",
- },
- {
- backgroundSrc: IMG_BASE_URL + "/home_business_background.png",
- src: IMG_BASE_URL + "/lift.png",
- text: "梯控二维码",
- url: "/subpkg/elevatorControl/elevatorControl",
- },
- ],
- };
- },
- computed: {
- ...mapState("m_user", ["userInfo"]),
- ...mapState("m_business", ["currentHotelName"]),
- },
- methods: {
- ...mapMutations('m_business', ['updateCurrentHotelId', 'updateCurrentHotelName']),
- navigateTo(url) {
- if (url !== "" && url !== null && url !== undefined) {
- uni.navigateTo({
- url: url,
- });
- }
- },
- },
- onLoad(query) {
- //二维码扫描时传入hotelId和hotelName
- if (query.q !== null && query.q !== undefined) {
- let url = decodeURIComponent(query.q)
- let hotelId = url.split('=')[1].split('&')[0]
- let hotelName = url.split('=')[2]
- if (stringHasText(hotelId)) {
- this.updateCurrentHotelId(hotelId)
- }
- if (stringHasText(hotelName)) {
- this.updateCurrentHotelName(hotelName)
- }
- }
- }
- };
- </script>
- <style lang="scss">
- .top {}
- .hotel-name {
- margin: 40rpx;
- }
- .bottom {
- display: flex;
- flex-wrap: wrap;
- width: 90%;
- margin: 0 auto;
- justify-content: space-around;
- .bottom-item {
- position: relative;
- width: 33%;
- height: 300rpx;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin-top: 20rpx;
- .top-img {
- // width: 180rpx;
- // height: 180rpx;
- position: absolute;
- margin: 0 auto;
- z-index: 2;
- }
- .bottom-img {
- // width: 180rpx;
- // height: 180rpx;
- margin: 20rpx 0;
- position: absolute;
- z-index: 1;
- }
- .tip {
- font-size: 40rpx;
- margin-top: 20rpx;
- position: absolute;
- bottom: 0;
- }
- }
- }
- .completeBtn {
- left: 80rpx;
- right: 80rpx;
- bottom: 160rpx;
- position: fixed;
- background-color: #0081ff;
- color: #ffffff;
- }
- .testBtn {
- left: 80rpx;
- right: 80rpx;
- bottom: 80rpx;
- position: fixed;
- background-color: #0081ff;
- color: #ffffff;
- }
- </style>
|