123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474 |
- <style lang="less">
- page {
- height: 100%;
- background-color: #eceff4;
- }
- .pagedemo {
- position: relative;
- width: 100%;
- image {
- width: 100%;
- }
- .backDiv {
- position: absolute;
- top: 50px;
- left: 10px;
- height: 36px;
- width: 40px;
- z-index: 2;
- }
- .mainWrap {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- box-sizing: border-box;
- bottom: 0;
- z-index: 1;
- padding: 592rpx 44rpx 0 44rpx;
- .top {
- height: 226rpx;
- margin-bottom: 15px;
- position: relative;
- .chartDiv {
- position: absolute;
- height: 80px;
- bottom: 0;
- left: 0;
- width: 100%;
- }
- .serviceDiv {
- position: absolute;
- height: 20px;
- top: 9px;
- right: 20px;
- width: 110px;
- }
- }
- .air {
- height: 520rpx;
- margin-bottom: 15px;
- position: relative;
- .openButton {
- position: absolute;
- top: 93px;
- right: 15px;
- width: 50px;
- height: 44px;
- }
- .downCold {
- position: absolute;
- top: 149px;
- right: 76px;
- width: 40px;
- height: 40px;
- }
- .upHot {
- position: absolute;
- top: 149px;
- right: 15px;
- width: 40px;
- height: 40px;
- }
- .xiaoWind {
- position: absolute;
- bottom: 9px;
- right: 76px;
- width: 40px;
- height: 40px;
- }
- .daWind {
- position: absolute;
- bottom: 9px;
- right: 15px;
- width: 40px;
- height: 40px;
- }
- }
- .lamp {
- height: 456rpx;
- margin-bottom: 15px;
- position: relative;
- .openButton {
- position: absolute;
- top: 91px;
- right: 15px;
- width: 50px;
- height: 42px;
- }
- .closeButton {
- position: absolute;
- top: 140px;
- right: 15px;
- width: 50px;
- height: 66px;
- }
- }
- .curtain {
- height: 280rpx;
- margin-bottom: 15px;
- position: relative;
- .openButton {
- position: absolute;
- top: 86px;
- right: 14px;
- width: 40px;
- height: 40px;
- }
- .closeButton {
- position: absolute;
- top: 86px;
- right: 74px;
- width: 40px;
- height: 40px;
- }
- }
- .water {
- height: 280rpx;
- margin-bottom: 15px;
- position: relative;
- .openButton {
- position: absolute;
- bottom: 10px;
- right: 8px;
- width: 55px;
- height: 36px;
- }
- }
- .fan {
- height: 280rpx;
- margin-bottom: 15px;
- position: relative;
- .openButton {
- position: absolute;
- bottom: 8px;
- right: 15px;
- width: 55px;
- height: 36px;
- }
- }
- .wet {
- height: 280rpx;
- margin-bottom: 15px;
- position: relative;
- .openButton {
- position: absolute;
- bottom: 8px;
- right: 15px;
- width: 55px;
- height: 36px;
- }
- }
- }
- }
- </style>
- <template>
- <div
- class="pagedemo"
- :style="{'height':isHome?'1905px':'500px'}"
- >
- <div
- class="backDiv"
- @click="mainBack"
- ></div>
- <image
- class="mainImg"
- :src="img"
- mode="widthFix"
- @click="mainImgShow"
- />
- <div
- class="mainWrap"
- v-show="isHome"
- >
- <div class="top">
- <div
- class="serviceDiv"
- @click="serviceTimeClick"
- ></div>
- <div
- class="chartDiv"
- @click="chartShowClick"
- ></div>
- </div>
- <div class="air">
- <div
- class="openButton"
- @click="airClick"
- ></div>
- <div
- class="downCold"
- @click="downCold"
- v-show="airOpen"
- ></div>
- <div
- class="upHot"
- @click="upHot"
- v-show="airOpen"
- ></div>
- <div
- class="xiaoWind"
- @click="xiaoWind"
- v-show="airOpen"
- ></div>
- <div
- class="daWind"
- @click="daWind"
- v-show="airOpen"
- ></div>
- </div>
- <div class="lamp">
- <div
- class="openButton"
- v-show="!lampOpen"
- @click="lampOpenClick"
- ></div>
- <div
- class="closeButton"
- v-show="lampOpen"
- @click="lampCloseClick"
- ></div>
- </div>
- <div class="curtain">
- <div
- class="openButton"
- @click="curtainOpenClick"
- ></div>
- <div
- class="closeButton"
- @click="curtainCloseClick"
- ></div>
- </div>
- <div class="water">
- <div
- class="openButton"
- @click="waterClick"
- ></div>
- </div>
- <div class="fan">
- <div
- class="openButton"
- @click="fanClick"
- ></div>
- </div>
- <div class="wet">
- <div
- class="openButton"
- @click="wetClick"
- ></div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import wepy from '@wepy/core'
- import store from '@/store'
- import config from '@/config'
- import moment from 'moment'
- import { mapState } from '@wepy/x'
- import { checkHasUserInfo } from '@/service/user'
- import { saveCompanyConfig } from '@/service/companyConfig'
- wepy.page({
- store,
- data: {
- imgpath: config.h5StaticPath + '/page-officehome-demo/',
- img: config.h5StaticPath + '/page-officehome-demo/tiyan.png', // allopen.png
- isHome: false, // 是否是主页面
- showChart: false,
- serviceTime: false,
- airOpen: true,
- lampOpen: true,
- curtainOpen: true,
- waterOpen: true,
- fanOpen: true,
- wetOpen: true
- },
- computed: {
- ...mapState({ token: state => state.user.token, energyHeadData: state => state.portrait.energyHeadData })
- },
- onLoad() {
- checkHasUserInfo()
- setTimeout(() => {
- this.img = this.imgpath + 'allopen.png'
- this.isHome = true
- }, 2000)
- },
- onReady() { },
- methods: {
- chartShowClick() {
- this.img = this.imgpath + 'chart.png'
- this.isHome = false
- this.showChart = true
- },
- serviceTimeClick() {
- this.img = this.imgpath + 'serviceTime.png'
- this.isHome = false
- // this.serviceTime = true;
- },
- airClick() {
- console.log('this.airOpen', this.airOpen)
- if (this.airOpen) {
- this.airOpen = false
- this.img = this.imgpath + 'airclose.png'
- } else {
- this.airOpen = true
- this.img = this.imgpath + 'allopen.png'
- }
- this.lampOpen = true
- this.curtainOpen = true
- this.waterOpen = true
- this.fanOpen = true
- this.wetOpen = true
- },
- downCold() {
- this.img = this.imgpath + 'downcold.png'
- this.isHome = false
- },
- upHot() {
- this.img = this.imgpath + 'uphot.png'
- this.isHome = false
- },
- xiaoWind() {
- this.img = this.imgpath + 'windxiao.png'
- this.isHome = false
- },
- daWind() {
- this.img = this.imgpath + 'windda.png'
- this.isHome = false
- },
- lampOpenClick() {
- if (!this.lampOpen) {
- this.lampOpen = true
- this.airOpen = true
- this.curtainOpen = true
- this.waterOpen = true
- this.fanOpen = true
- this.wetOpen = true
- this.img = this.imgpath + 'allopen.png'
- }
- },
- lampCloseClick() {
- console.log('this.lampOpen', this.lampOpen)
- if (this.lampOpen) {
- this.lampOpen = false
- this.airOpen = true
- this.curtainOpen = true
- this.waterOpen = true
- this.fanOpen = true
- this.wetOpen = true
- this.img = this.imgpath + 'lampclose.png'
- }
- },
- fanClick() {
- if (this.fanOpen) {
- this.fanOpen = false
- this.img = this.imgpath + 'fanclose.png'
- } else {
- this.fanOpen = true
- this.img = this.imgpath + 'allopen.png'
- }
- this.airOpen = true
- this.lampOpen = true
- this.curtainOpen = true
- this.waterOpen = true
- this.wetOpen = true
- },
- waterClick() {
- if (this.waterOpen) {
- this.waterOpen = false
- this.img = this.imgpath + 'waterclose.png'
- } else {
- this.waterOpen = true
- this.img = this.imgpath + 'allopen.png'
- }
- this.airOpen = true
- this.lampOpen = true
- this.curtainOpen = true
- this.fanOpen = true
- this.wetOpen = true
- },
- wetClick() {
- if (this.wetOpen) {
- this.wetOpen = false
- this.img = this.imgpath + 'wetclose.png'
- } else {
- this.wetOpen = true
- this.img = this.imgpath + 'allopen.png'
- }
- this.airOpen = true
- this.lampOpen = true
- this.curtainOpen = true
- this.waterOpen = true
- this.fanOpen = true
- },
- curtainOpenClick() {
- if (!this.curtainOpen) {
- this.airOpen = true
- this.lampOpen = true
- this.curtainOpen = true
- this.waterOpen = true
- this.fanOpen = true
- this.wetOpen = true
- this.img = this.imgpath + 'allopen.png'
- }
- },
- curtainCloseClick() {
- if (this.curtainOpen) {
- this.curtainOpen = false
- this.airOpen = true
- this.lampOpen = true
- this.waterOpen = true
- this.fanOpen = true
- this.wetOpen = true
- this.img = this.imgpath + 'curtainclose.png'
- }
- },
- mainBack() {
- if (this.isHome) {
- wx.navigateBack()
- } else {
- this.img = this.imgpath + 'allopen.png'
- this.isHome = true
- this.showChart = false
- this.airOpen = true
- this.lampOpen = true
- this.curtainOpen = true
- this.waterOpen = true
- this.fanOpen = true
- this.wetOpen = true
- }
- },
- mainImgShow() {
- // 如果是参数chart页面 则只能通过back按钮
- // 如果是其他非主页面 一点击则 显示主页面图片
- if (!this.isHome && !this.showChart) {
- this.img = this.imgpath + 'allopen.png'
- this.isHome = true
- this.airOpen = true
- this.lampOpen = true
- this.curtainOpen = true
- this.waterOpen = true
- this.fanOpen = true
- this.wetOpen = true
- }
- }
- }
- })
- </script>
- <config>
- {
- "navigationStyle": "custom",
- backgroundColor: '#f7f8fa',
- backgroundColorTop:'#FFE823',
- backgroundColorBottom:"#eceff4"
- }
- </config>
|