index.wpy 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518
  1. <style lang="less">
  2. .homeIndex {
  3. padding: 68px 0px 30px;
  4. position: relative;
  5. background-color: #ebf5fa;
  6. background-repeat: no-repeat;
  7. background-size: contain;
  8. .projectTitle {
  9. color: #1f2429;
  10. font-size: 22px;
  11. line-height: 32px;
  12. font-weight: 500;
  13. display: flex;
  14. padding-left: 20px;
  15. .name {
  16. margin-right: 5px;
  17. }
  18. }
  19. .projectInfo {
  20. padding-left: 20px;
  21. color: #626c78;
  22. font-size: 13px;
  23. line-height: 20px;
  24. margin-top: 8px;
  25. }
  26. .weather {
  27. color: #626c78;
  28. font-size: 13px;
  29. position: absolute;
  30. top: 108px;
  31. right: 12px;
  32. display: flex;
  33. .image {
  34. width: 20px;
  35. height: 20px;
  36. }
  37. .value {
  38. margin-left: 8px;
  39. margin-right: 8px;
  40. }
  41. .text {
  42. }
  43. }
  44. .scroll-view {
  45. position: relative;
  46. width: 100%;
  47. height: 350px;
  48. z-index: 2;
  49. white-space: nowrap;
  50. margin-top: 27px;
  51. // padding: 0 20px;
  52. overflow: hidden;
  53. }
  54. .scroll-view-item {
  55. position: relative;
  56. overflow: hidden;
  57. display: inline-block;
  58. width: 280px;
  59. height: 350px;
  60. background: red;
  61. border-radius: 24px;
  62. margin-right: 12px;
  63. .itemCont {
  64. position: relative;
  65. bottom: -260px;
  66. padding-left: 20px;
  67. line-height: 32px;
  68. font-size: 22px;
  69. color: #fff;
  70. .spaceName {
  71. font-weight: 600;
  72. display: flex;
  73. align-items: center;
  74. .name {
  75. max-width: 180px;
  76. overflow: hidden;
  77. white-space: nowrap;
  78. text-overflow: ellipsis;
  79. }
  80. .resident {
  81. color: #1b2129;
  82. font-size: 11px;
  83. margin-left: 8px;
  84. padding: 0 5px;
  85. line-height: 18px;
  86. height: 18px;
  87. background: #96f2e3;
  88. border-radius: 4px;
  89. vertical-align: middle;
  90. }
  91. }
  92. .environment {
  93. font-size: 13px;
  94. color: rgba(255, 255, 255, 0.8);
  95. .param {
  96. margin-right: 20px;
  97. }
  98. }
  99. }
  100. .envirItem {
  101. // top: 270px;
  102. }
  103. }
  104. .scroll-view-item:nth-child(1) {
  105. margin-left: 20px;
  106. }
  107. .scroll-view-item:nth-last-child(1) {
  108. margin-right: 20px;
  109. }
  110. .scroll-view2 {
  111. position: relative;
  112. width: 100%;
  113. height: 76px;
  114. z-index: 2;
  115. white-space: nowrap;
  116. margin-top: 25px;
  117. // padding: 0 20px;
  118. overflow: hidden;
  119. }
  120. .scroll-view-item2 {
  121. display: inline-block;
  122. min-width: 164px;
  123. height: 76px;
  124. margin-right: 8px;
  125. background: #fff;
  126. border-radius: 20px;
  127. padding-top: 15px;
  128. padding-left: 20px;
  129. padding-right: 20px;
  130. box-sizing: border-box;
  131. position: relative;
  132. .title {
  133. color: #1b2129;
  134. font-size: 16px;
  135. line-height: 24px;
  136. font-weight: 600;
  137. }
  138. .info {
  139. margin-top: 3px;
  140. color: #8b949e;
  141. font-size: 13px;
  142. line-height: 20px;
  143. display: flex;
  144. }
  145. .imageDiv {
  146. position: absolute;
  147. top: 0;
  148. right: 0;
  149. .image {
  150. width: 76px;
  151. height: 76px;
  152. }
  153. }
  154. }
  155. .scroll-view-item2:nth-child(1) {
  156. margin-left: 20px;
  157. }
  158. .scroll-view-item2:nth-last-child(1) {
  159. margin-right: 20px;
  160. }
  161. .menuWrap {
  162. padding: 0 20px;
  163. .menuHeader {
  164. color: #626c78;
  165. line-height: 24px;
  166. font-size: 16px;
  167. margin-top: 24px;
  168. }
  169. .menuList {
  170. margin-top: 8px;
  171. overflow: hidden;
  172. }
  173. .menuItem {
  174. width: 205rpx;
  175. height: 84px;
  176. border-radius: 20px;
  177. margin-right: 15rpx;
  178. float: left;
  179. background: #fff;
  180. margin-bottom: 8px;
  181. padding-top: 12px;
  182. box-sizing: border-box;
  183. .menuImg {
  184. text-align: center;
  185. .image {
  186. height: 32px;
  187. width: 32px;
  188. }
  189. }
  190. .menuTitle {
  191. font-size: 13px;
  192. color: #1b2129;
  193. text-align: center;
  194. }
  195. }
  196. }
  197. .projectPop {
  198. position: relative;
  199. overflow: hidden;
  200. .projectWrap {
  201. overflow-y: auto;
  202. max-height: 400px;
  203. .projectItem {
  204. height: 50px;
  205. text-align: center;
  206. line-height: 50px;
  207. font-size: 16px;
  208. color: #1b2129;
  209. &:hover {
  210. background: #f1f4f6;
  211. }
  212. &.sel {
  213. color: #1db1b2;
  214. }
  215. }
  216. }
  217. .button {
  218. width: 100%;
  219. font-size: 16px;
  220. background: #fff;
  221. color: #8b949e;
  222. height: 50px;
  223. text-align: center;
  224. line-height: 50px;
  225. border-top: 5px solid #f1f4f6;
  226. }
  227. }
  228. }
  229. .van-popup {
  230. }
  231. </style>
  232. <template>
  233. <div class="homeIndex" :style="{'background-image': 'url('+h5StaticPath+'homeBack.jpg)'}">
  234. <div class="projectTitle" @click="showProject"><span class="name">{{nowCompanyName}}</span><van-icon name="arrow-down" size="20"/></div>
  235. <div class="projectInfo">成为一家牛的让员工幸福的企业</div>
  236. <div class="weather"><image class="image" :src="h5StaticPath+weather.imgname"/><span class="value">{{weather.temperature}}℃</span><span class="text">{{weather.text}}</span></div>
  237. <scroll-view scroll-x="true" class="scroll-view">
  238. <view class="scroll-view-item">
  239. <div class="itemCont" v-if="reSpaceId" @click="goEnv('homeShowEnv')">
  240. <div class="spaceName"><div class="name">{{ reSpaceName }}</div><span class="resident">常驻工区</span></div>
  241. <div class="environment"><span class="param">{{spaceParam.temperature||'--'}}℃</span><span class="param">{{spaceParam.co2||'--'}}ppm</span><span class="param">{{spaceParam.pm25||'--'}}μg/m³</span></div>
  242. </div>
  243. <div class="itemCont" v-if="!reSpaceId" @click="goEnv('homeSetSpace')">去设置<br>您的常驻工区<van-icon name="arrow" size="20"/></div>
  244. </view>
  245. <view class="scroll-view-item"><div class="itemCont envirItem" @click="goToIntroduce('environment')">环境健康小知识<van-icon name="arrow" size="20"/></div></view>
  246. </scroll-view>
  247. <scroll-view scroll-x="true" class="scroll-view2">
  248. <view class="scroll-view-item2" v-if="showCard.openLight" @click="goEnv('openLamp')"><div class="title">开启照明</div><div class="info">快速启动</div><div class="imageDiv">
  249. <image class="image" :src="h5StaticPath+'lamb.png'"/>
  250. </div></view>
  251. <view class="scroll-view-item2" v-if="showCard.raiseTemperature" @click="goEnv('airAddOne')"><div class="title">调高温度</div><div class="info">快速启动</div><div class="imageDiv">
  252. <image class="image" :src="h5StaticPath+'airAdjust.png'"/>
  253. </div></view>
  254. <view class="scroll-view-item2" v-if="showCard.lowerTemperature" @click="goEnv('airReduceOne')"><div class="title">调低温度</div><div class="info">快速启动</div><div class="imageDiv">
  255. <image class="image" :src="h5StaticPath+'airAdjust.png'"/>
  256. </div></view>
  257. <view class="scroll-view-item2" v-if="showCard.oneClickFullClose" @click="goEnv('closeLampAir')"><div class="title">一键全关</div><div class="info">快速全关</div><div class="imageDiv">
  258. <image class="image" :src="h5StaticPath+'allClose.png'"/>
  259. </div></view>
  260. <view class="scroll-view-item2" @click="goToIntroduce('overtime')"><div class="title">如何预约加时?</div><div class="info">点击查看<van-icon name="arrow" size="14"/></div></view>
  261. <view class="scroll-view-item2" @click="goToIntroduce('resident')"><div class="title">如何设置常驻工区?</div><div class="info">点击查看<van-icon name="arrow" size="14"/></div></view>
  262. <view class="scroll-view-item2" @click="goToIntroduce('carboncredit')"><div class="title">如何获取碳积分?</div><div class="info">点击查看<van-icon name="arrow" size="14"/></div></view>
  263. </scroll-view>
  264. <div class="menuWrap">
  265. <div class="menuHeader">服务</div>
  266. <div class="menuList">
  267. <div class="menuItem" @click="goEnv('homeShowEnv')"><div class="menuImg"><image class="image" :src="h5StaticPath+'environment.png'"/></div><div class="menuTitle">环境调节</div></div>
  268. <div class="menuItem"><div class="menuImg"><image class="image" :src="h5StaticPath+'find.png'"/></div><div class="menuTitle">找一找</div></div>
  269. <div class="menuItem" @click="goPortrait"><div class="menuImg"><image class="image" :src="h5StaticPath+'myhabits.png'"/></div><div class="menuTitle">我的习惯</div></div>
  270. <div class="menuItem" @click="goPersonCenter"><div class="menuImg"><image class="image" :src="h5StaticPath+'myself.png'"/></div><div class="menuTitle">个人中心</div></div>
  271. </div>
  272. <div class="menuHeader" v-if="userInfo.manageUserType==3">管理</div>
  273. <div class="menuList" v-if="userInfo.manageUserType==3">
  274. <div class="menuItem"><div class="menuImg" @click="goAdministration"><image class="image" :src="h5StaticPath+'control.png'"/></div><div class="menuTitle">行政端管理</div></div>
  275. </div>
  276. </div>
  277. <van-popup :show="show" position="bottom" @close="hideProject" round>
  278. <div class="projectPop">
  279. <div class="projectWrap" style="max-height:{{screenHeight-200}}px">
  280. <div class="projectItem" :class="{'sel':item.id==userInfo.companyId}" v-for="(item, index) in companyList" :key="index" @click="projectClick(item)">{{ item.name }}</div>
  281. </div>
  282. <div class="button">取消</div>
  283. </div>
  284. </van-popup>
  285. </div>
  286. </template>
  287. <script>
  288. import wepy from '@wepy/core';
  289. import eventHub from '@/common/eventHub';
  290. import { mapState } from '@wepy/x';
  291. import store from '@/store';
  292. import config from '@/config';
  293. import {
  294. queryControlSpaceCompany,
  295. querySpaceFunctionCard,
  296. getSpaceProperty,
  297. switchCompany,
  298. getWeather,
  299. } from '@/api/home.js';
  300. import { getCompanyDataByPhone, wxLogin , checkHasUserInfo, checkLoginNew } from '@/service/user.js';
  301. wepy.page({
  302. store,
  303. config: {},
  304. data: {
  305. show: false,
  306. h5StaticPath: config.h5StaticPath + '/page-home/',
  307. screenHeight: 560,
  308. companyList: [],
  309. controlSpaces: [], //租户可控空间
  310. reSpaceId: '', //常驻空间
  311. reSpaceName: '',
  312. showCard: {},
  313. spaceParam: {},
  314. weather: {},
  315. },
  316. computed: {
  317. ...mapState({
  318. userInfo: (state) => state.user.userInfo,
  319. projctId: (state) => state.user?.userInfo?.projctId,
  320. companyId: (state) => state.user?.userInfo?.companyId,
  321. }),
  322. nowCompanyName: function() {
  323. console.log('watchwatchwatch', this.companyId, this.companyList);
  324. var filter = this.companyList.filter((item) => {
  325. return item.id == this.companyId;
  326. });
  327. store.commit('setCompanyName', filter[0]?.name);
  328. return filter[0]?.name;
  329. },
  330. },
  331. watch: {
  332. // companyId: function(newSpaceId, oldSpaceId) {
  333. // console.log('watchwatchwatch', this);
  334. // var filter = this.companyList.filter((item) => {
  335. // return item.id == newSpaceId;
  336. // });
  337. // this.nowCompanyName = filter[0]?.name;
  338. // },
  339. },
  340. methods: {
  341. loadData() {
  342. var paramObj = {
  343. criteria: {
  344. companyId: this.userInfo.companyId,
  345. },
  346. };
  347. //查找租户可控空间
  348. queryControlSpaceCompany(paramObj)
  349. .then((res) => {
  350. this.controlSpaces = res.data || [];
  351. })
  352. .catch((err) => {});
  353. //常驻空间快速调节卡片
  354. querySpaceFunctionCard({
  355. userId: this.userInfo.userId,
  356. companyId: this.userInfo.companyId,
  357. })
  358. .then((res) => {
  359. //console.log('querySpaceFunctionCard', res);
  360. if (res.message == '该用户没有常驻空间') {
  361. this.reSpaceId = '';
  362. this.reSpaceName = '';
  363. this.showCard = {};
  364. return;
  365. }
  366. this.reSpaceId = res.spaceId || ''; //有常驻空间
  367. this.reSpaceName = res.spaceName || '';
  368. this.showCard = res || {};
  369. //console.log('showCardshowCard', this.showCard);
  370. //常驻空间参数属性
  371. this.reSpaceId &&
  372. getSpaceProperty({
  373. projectId: this.userInfo.projectId,
  374. spaceId: this.reSpaceId,
  375. })
  376. .then((res) => {
  377. this.spaceParam = res || {};
  378. })
  379. .catch((err) => {});
  380. })
  381. .catch((err) => {});
  382. },
  383. projectClick: function(item) {
  384. var _this = this;
  385. this.show = false;
  386. switchCompany(item.id)
  387. .then((res) => {
  388. if (res.result == 'success') {
  389. console.log('switchCompanyswitchCompany');
  390. wxLogin()
  391. .then((res) => {
  392. _this.loadData();
  393. })
  394. .catch((err) => {});
  395. }
  396. })
  397. .catch((err) => {});
  398. },
  399. hideProject: function() {
  400. this.show = false;
  401. },
  402. showProject: function() {
  403. this.show = true;
  404. },
  405. goEnv(param) {
  406. if (this.controlSpaces.length == 0) {
  407. wx.showToast({
  408. title: '您还未配置可控空间',
  409. icon: 'none',
  410. duration: 4000,
  411. });
  412. return;
  413. }
  414. // switch (param) {
  415. // case 'homeShowEnv':
  416. // break;
  417. // case 'homeSetSpace':
  418. // break;
  419. // case '':
  420. // break;
  421. // default:
  422. // }
  423. wx.navigateTo({
  424. url: `/packagesEnv/pages/officehome/index?from=${param}`,
  425. });
  426. },
  427. goToIntroduce(id) {
  428. //有没有可控空间
  429. var hasControlSpaces = this.controlSpaces.length == 0 ? 'no' : 'has';
  430. wx.navigateTo({
  431. url: `/packagesEnv/pages/home/${id}?hasControlSpaces=${hasControlSpaces}`,
  432. });
  433. },
  434. goPortrait() {
  435. wx.navigateTo({
  436. url: '/packagesEnv/pages/portrait/home',
  437. });
  438. },
  439. goPersonCenter() {
  440. wx.navigateTo({
  441. url: '/packagesEnv/pages/personalCenter/index',
  442. });
  443. },
  444. goAdministration() {
  445. wx.navigateTo({
  446. url: `/packagesEnv/pages/administration/index`,
  447. });
  448. },
  449. },
  450. onLoad() {
  451. console.log("home----onLoad");
  452. checkLoginNew()
  453. .then(() => {
  454. console.log("触发了")
  455. // checkHasUserInfo();
  456. //获取项目list
  457. getCompanyDataByPhone()
  458. .then((res) => {
  459. this.companyList = res || [];
  460. })
  461. .catch((err) => {});
  462. getWeather(this.userInfo.projectId)
  463. .then((res) => {
  464. this.weather = res.content || {}; //{ temperature: 30, text: '云' };
  465. var text = '云';
  466. var imgname = 'sunny.png';
  467. if (text.indexOf('晴') > -1) {
  468. imgname = 'sunny.png';
  469. } else if (text.indexOf('雨') > -1) {
  470. imgname = 'rain.png';
  471. } else if (text.indexOf('阴') > -1) {
  472. imgname = 'cloudy.png';
  473. } else if (text.indexOf('云') > -1) {
  474. imgname = 'muchCloud.png';
  475. } else if (text.indexOf('雾') > -1 || text.indexOf('霾') > -1) {
  476. imgname = 'fog.png';
  477. } else if (text.indexOf('风') > -1) {
  478. imgname = 'wind.png';
  479. } else if (text.indexOf('雪') > -1) {
  480. imgname = 'snow.png';
  481. }
  482. this.weather.imgname = imgname;
  483. })
  484. .catch((err) => {});
  485. this.loadData();
  486. })
  487. .catch((err) => {});
  488. // 获取系统信息
  489. const systemInfo = wx.getSystemInfoSync();
  490. this.screenHeight = systemInfo.screenHeight;
  491. },
  492. onShow() {
  493. console.log("home----onShow");
  494. // checkHasUserInfo();
  495. },
  496. });
  497. </script>
  498. <config>
  499. {
  500. "navigationStyle":"custom",
  501. usingComponents: {
  502. "van-icon": "module:@vant/weapp/dist/icon",
  503. "van-popup": "module:@vant/weapp/dist/popup"
  504. }
  505. }
  506. </config>