Skip to content

W
wx-school-app
Commit 91d09b05 by 姜雷
Options

修改首页样式

parent e72c7a08
Showing with 284 additions and 50 deletions
src/components/DeviceInfo/DeviceInfo.scss 0 → 100644
.DeviceInfo {
width: 630px;
height: 572px;
margin: 0 auto;
border-radius: 176px;
border: 2px solid #dfdfdf;
background-color: #f1f1f1;
.equipment-info {
width: 610px;
height: 552px;
border-radius: 176px;
margin: 10px auto 0;
background-color: #fff;
overflow: hidden;
.equipment-title {
margin-top: 114px;
font-size: 44px;
text-align: center;
&.matched {
color: #6180f4;
}
}
.equipment-line {
display: block;
width: 460px;
height: 8px;
margin: 46px auto 0;
}
.equipment-noCode {
margin-top: 108px;
text-align: center;
font-size: 32px;
color: #666;
}
.equipment-list {
margin-top: 64px;
}
.equipment-item {
display: flex;
margin-bottom: 20px;
align-items: center;
font-size: 32px;
.equipment-label {
margin-left: 110px;
}
.equipment-value {
width: 260px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
src/components/DeviceInfo/DeviceInfo.tsx 0 → 100644
import { ComponentClass } from 'react';
import { View, Image, Text } from '@tarojs/components';
import LineImg from '@/images/shower/img_nor@2x.png';
import { Component } from '@tarojs/taro';
type PageOwnProps = {
code: string;
position: string;
};
interface DeviceInfo {
props: PageOwnProps;
}
class DeviceInfo extends Component {
render() {
const { code, position } = this.props;
return (
<View className='DeviceInfo'>
<View className='equipment-info'>
{code ? (
<View className='equipment-title matched'>已匹配设备</View>
) : (
<View className='equipment-title'>未匹配设备</View>
)}
<Image className='equipment-line' src={LineImg} />
{code ? (
<View className='equipment-list'>
<View className='equipment-item'>
<Text className='equipment-label'>设备编号：</Text>
<Text className='equipment-value'>{code}</Text>
</View>
<View className='equipment-item'>
<Text className='equipment-label'>设备位置：</Text>
<Text className='equipment-value'>{position}</Text>
</View>
</View>
) : (
<View v-loading='loading' className='equipment-noCode'>
点击左下角扫一扫完成匹配
</View>
)}
</View>
</View>
);
}
}
export default DeviceInfo as ComponentClass<PageOwnProps>;
src/components/MenuIcon/big/MenuIconBig.scss 0 → 100644
.MenuIconBig {
width: 746px;
height: 224px;
}
src/components/MenuIcon/big/MenuIconBig.tsx 0 → 100644
import './MenuIconBig.scss';
import { Component } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
type PageOwnProps = {
icon: string;
text: string;
};
interface MenuIconBig {
props: PageOwnProps;
}
class MenuIconBig extends Component {
render() {
const { icon, text } = this.props;
return (
<View className='MenuIconBig'>
<Image className='bg' src={icon} />
<Text className='text'>{text}</Text>
</View>
);
}
}
export default MenuIconBig;
src/components/MenuIcon/block/MenuIconBlock.scss 0 → 100644
.MenuIconBlock {
width: 218px;
height: 162px;
.text {
margin-top: 50px;
margin-left: 18px;
font-size: 24px;
color: #fff;
}
}
src/components/MenuIcon/block/MenuIconBlock.tsx 0 → 100644
import './MenuIconBlock.scss';
import { Component } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
type PageOwnProps = {
icon: string;
text: string;
};
interface MenuIconBlock {
props: PageOwnProps;
}
class MenuIconBlock extends Component {
render() {
const { icon, text } = this.props;
return (
<View className='MenuIconBlock'>
<Image className='bg' src={icon} />
<Text className='text'>{text}</Text>
</View>
);
}
}
export default MenuIconBlock;
src/components/MenuIcon/normal/MenuIconNormal.scss 0 → 100644
.MenuIconNormal {
.icon {
width: 120px;
height: 120px;
}
.text {
font-size: 24px;
color: #666;
}
}
src/components/MenuIcon/normal/MenuIconNormal.tsx 0 → 100644
import './MenuIconNormal.scss';
import { Component } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
type PageOwnProps = {
icon: string;
text: string;
};
interface MenuIconNormal {
props: PageOwnProps;
}
class MenuIconNormal extends Component<PageOwnProps> {
render() {
const { icon, text } = this.props;
return (
<View className='MenuIconNormal'>
<Image className='icon' src={icon} />
<Text className='text'>{text}</Text>
</View>
);
}
}
export default MenuIconNormal;
src/constants/index.js
......@@ -12,4 +12,4 @@ export const SCHOOL_MAIN_URL = 'https://internal-dev-school-main.168cad.top';
export const ANN_LINK_URL = 'https://ex-dev-wx.168cad.top/announcement/';
export const SHOWER_APP_URL = 'http://192.168.3.55:8888';
export const SOCKET_URL = 'ws://192.168.3.55:20003/ws';
export const SMPRO_URL = 'http://192.168.3.55:8555';
export const SMPRO_URL = 'https://ex-dev-dcxy-smapro-app.168cad.top';
src/pages/Home/Home.scss
......@@ -32,6 +32,11 @@
position: relative;
width: 100%;
height: 390px;
padding-bottom: 40px;
box-sizing: content-box;
.bg {
height: 390px;
}
.Home-UserBox-Setting {
position: absolute;
right: 28px;
......@@ -91,7 +96,7 @@
.Home-UserBox-Order {
position: absolute;
left: 50%;
bottom: -40px;
bottom: 0px;
transform: translate(-50%);
width: 572px;
height: 80px;
......
src/pages/Home/Home.tsx
......@@ -4,8 +4,6 @@ import { View, Image, Text } from '@tarojs/components';
import UserBoxBg from '../../images/home/img_bg@2x.png';
import ArrowIcon from '../../images/home/icon_dingdan@2x.png';
import HairDryerBg from '../../images/home/img_chuifeng_bg@2x.png';
import HairDryerArr from '../../images/home/icon_chuifeng_right@2x.png';
import AnnouncementBg from '../../images/home/img_gonggao_bg@2x.png';
import MoreIcon from '../../images/home/icon_more_right@2x.png';
import SettingIcon from '../../images/home/icon_shezhi@2x.png';
......@@ -13,7 +11,7 @@ import HBeanIcon from '../../images/home/icon_chuifengdou@2x.png';
import TBeanIcon from '../../images/home/icon_tongyongdou@2x.png';
import UserHeaderM from '../../images/home/img_boy_touxiang@2x.png';
import UserHeaderF from '../../images/home/img_girl_touxiang@2x.png';
import ShowerIcon from '../../images/home/ic_linyu@2x.png';
import WaterIconNormal from '../../images/menu/ic_zizhu@2x.png';
import './Home.scss';
import { connect } from '@tarojs/redux';
......@@ -28,6 +26,9 @@ import { appLogout } from '../../api/customer';
import { Customer } from '@/types/Customer/Customer';
import { shareHandle } from '@/common/shareMethod';
import { fetchAreaService, ServiceTypeParams, Service } from '@/api/home';
import MenuIconNormal from '@/components/MenuIcon/normal/MenuIconNormal';
import MenuIconBlock from '@/components/MenuIcon/block/MenuIconBlock';
import MenuIconBig from '@/components/MenuIcon/big/MenuIconBig';
type PageStateProps = {
userinfo: Customer;
......@@ -208,6 +209,43 @@ class Home extends Component {
url: `/pages/Content/Content?id=${id}`,
});
}
getServiceItem(serviceId: number, size: string) {
if (serviceId === 4 || serviceId === 11) {
// 自助饮水
return size === 'normal' ? (
<MenuIconNormal icon={WaterIconNormal} text={'饮水'} />
) : size === 'block' ? (
<MenuIconBlock icon={WaterIconNormal} text={'饮水'} />
) : (
<MenuIconBig icon={WaterIconNormal} text={'饮水'} />
);
} else if (serviceId === 4 || serviceId === 11) {
// 自助吹风
return size === 'normal' ? (
<MenuIconNormal icon={WaterIconNormal} text={'吹风'} />
) : size === 'block' ? (
<MenuIconBlock icon={WaterIconNormal} text={'吹风'} />
) : (
<MenuIconBig icon={WaterIconNormal} text={'吹风'} />
);
} else if (serviceId === 4 || serviceId === 11) {
// 自助饮水
return size === 'normal' ? (
<MenuIconNormal icon={WaterIconNormal} text={'饮水'} />
) : size === 'block' ? (
<MenuIconBlock icon={WaterIconNormal} text={'饮水'} />
) : (
<MenuIconBig icon={WaterIconNormal} text={'饮水'} />
);
} else if (serviceId === 9) {
// 壁挂饮水
return null;
} else {
return null;
}
}
render() {
const { userinfo } = this.props;
const {
......@@ -283,51 +321,20 @@ class Home extends Component {
</View>
</View>
</View>
{serviceList.map(service =>
service.serviceId === 4 || service.serviceId === 11 ? (
// 自助吹风
<View
key={service.serviceId}
className='Home-Item Home-HairDryer'
onClick={this.goBarCode}>
<Image className='bg' src={HairDryerBg} />
<View className='Home-HairDryer-shadow' />
<View className='Home-HairDryer-text'>
吹风
<Image className='Home-Item-arrow' src={HairDryerArr} />
</View>
</View>
) : service.serviceId === 10 || service.serviceId === 5 ? (
// 自助吹风
<View
key={service.serviceId}
className='Home-Item Home-Shower'
onClick={this.goShower}>
<Image className='bg' src={ShowerIcon} />
<View className='Home-Shower-shadow' />
<View className='Home-Shower-text'>
洗浴
<Image className='Home-Item-arrow' src={HairDryerArr} />
</View>
</View>
) : service.serviceId === 3 || service.serviceId === 11 ? (
// 自助饮水
<View
key={service.serviceId}
className='Home-Item Home-Water'
onClick={this.goBarCode}>
<Image className='bg' src={HairDryerBg} />
<View className='Home-Water-shadow' />
<View className='Home-Water-text'>
饮水
<Image className='Home-Item-arrow' src={HairDryerArr} />
</View>
</View>
) : service.serviceId === 9 ? (
// 壁挂饮水
<View key={service.serviceId} />
) : null,
)}
{serviceList.length && serviceList.length <= 2
? serviceList.map(service =>
this.getServiceItem(service.serviceId, 'normal'),
)
: serviceList.length && serviceList.length == 3
? serviceList.map(service =>
this.getServiceItem(service.serviceId, 'block'),
)
: serviceList.length && serviceList.length >= 4
? serviceList.map(service =>
this.getServiceItem(service.serviceId, 'big'),
)
: null}
{annItem.id ? (
<View className='Home-Announcement'>
......
src/pages/WaterDispenser/WaterDispenser.tsx 0 → 100644
import './WaterDispenser.scss';
import { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import DeviceInfo from '@/components/DeviceInfo/DeviceInfo';
class WaterDispenser extends Component {
render() {
return (
<View className='WaterDispenser'>
<DeviceInfo code='213' position='asd' />
</View>
);
}
}
export default WaterDispenser;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment