Skip to content

W
wx-school-app
Commit 5e4530a1 by 姜雷
Options

配置测试地址

parents 72d04d62 e612387f
Showing with 1058 additions and 164 deletions
src/api/index.ts
...@@ -9,6 +9,7 @@ import { ...@@ -9,6 +9,7 @@ import {
OLD_BASE_SERVER_URL, OLD_BASE_SERVER_URL,
SHOWER_APP_URL, SHOWER_APP_URL,
SMPRO_URL, SMPRO_URL,
GX_URL,
} from '../constants/index'; } from '../constants/index';
export type ResponseDataEntity<T> = { export type ResponseDataEntity<T> = {
...@@ -64,5 +65,6 @@ export const customerFetch = createFetch(CUSTOMER_SERVER_URL); ...@@ -64,5 +65,6 @@ export const customerFetch = createFetch(CUSTOMER_SERVER_URL);
export const schoolMainFetch = createFetch(SCHOOL_MAIN_URL); export const schoolMainFetch = createFetch(SCHOOL_MAIN_URL);
export const showerFetch = createFetch(SHOWER_APP_URL); export const showerFetch = createFetch(SHOWER_APP_URL);
export const smaproFetch = createFetch(SMPRO_URL); export const smaproFetch = createFetch(SMPRO_URL);
export const gxFetch = createFetch(GX_URL);
export default createFetch; export default createFetch;
src/api/waterDispenser.ts 0 → 100644
import { gxFetch, ResponseDataEntity } from '.';
class Params {
/** 消费者id，必填项 */
customerId: string;
/** 校区id，必填项 */
campusId: number;
}
export class DeviceInfoResponse {
/** 设备编码 */
code = '';
/** 是否当前人使用 1：是，0：否 */
isCurrentUserUsed = undefined;
/** 是否上线 1：是，0：否 */
isOnline = undefined;
/** 是否被使用 1：是，0：否 */
isUsed = undefined;
/** 运营商Id */
operatorId = undefined;
/** 运营商名称 */
operatorName = '';
/** 位置名称 */
position = '';
/** 位置id */
positionId = '';
/** 费率信息 */
rates = [];
/** 服务Id */
serviceId = undefined;
/** 服务名称 */
serviceName = '';
}
export const getUsedEquipment = (params: Params) =>
gxFetch({
url: '/dcxy/api/gx/devices/lastUsedByCurrentUser',
data: params,
});
export const getUsingEquipment = (params: { customerId: string }) =>
gxFetch({
url: '/dcxy/api/gx/devices/inuseByCurrentUser',
data: params,
});
export const waterBeginning = (params: {
deviceCode: string;
campusId: number;
customerId: number;
customerName: string;
customerPhone: string;
}) =>
gxFetch({
url: `/dcxy/api/gx/devices/${params.deviceCode}/beginning`,
method: 'POST',
data: params,
});
export const fetchWaterEquipmentInfo = (params: {
deviceCode: string;
customerId: string;
campusId: number;
}) =>
gxFetch({
url: `/dcxy/api/gx/devices/${params.deviceCode}`,
data: params,
});
src/app.tsx
...@@ -40,6 +40,7 @@ class App extends Component { ...@@ -40,6 +40,7 @@ class App extends Component {
'pages/Content/Content', 'pages/Content/Content',
'pages/WebPage/WebPage', 'pages/WebPage/WebPage',
'pages/Shower/Shower', 'pages/Shower/Shower',
'pages/WaterDispenser/WaterDispenser',
], ],
window: { window: {
backgroundTextStyle: 'light', backgroundTextStyle: 'light',
......
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;
}
}
}
&.small {
height: 320px;
border-radius: 100px;
.equipment-info {
height: 300px;
border-radius: 100px;
.equipment-title {
margin-top: 26px;
}
.equipment-line {
margin-top: 30px;
}
.equipment-noCode {
margin-top: 60px;
}
.equipment-list {
margin-top: 24px;
}
}
}
}
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';
import './DeviceInfo.scss';
type PageOwnProps = {
code: string;
position: string;
size: string;
};
interface DeviceInfo {
props: PageOwnProps;
}
class DeviceInfo extends Component {
static externalClasses = ['ex-class'];
static defaultProps = {
size: 'normal',
};
render() {
const { size, code, position } = this.props;
return (
<View className={`DeviceInfo ex-class ${size}`}>
<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>
{position ? (
<Text className='equipment-value'>{position}</Text>
) : null}
</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 {
position: relative;
display: flex;
width: 686px;
height: 164px;
margin: 0 auto 20px;
align-items: center;
.bg {
position: absolute;
left: 0;
top: 0;
width: 746px;
height: 224px;
z-index: -1;
transform: translate(-30px, -18px);
}
&.left {
.text-box {
margin-left: 114px;
}
}
&.right {
.text-box {
position: absolute;
right: 114px;
}
}
.text {
color: #fff;
font-size: 32px;
margin-right: 20px;
}
.arrow {
width: 15px;
height: 23px;
}
}
src/components/MenuIcon/big/MenuIconBig.tsx 0 → 100644
import './MenuIconBig.scss';
import ArrowIcon from '../../../images/home/icon_chuifeng_right@2x.png';
import { Component } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { ComponentClass } from 'react';
type PageOwnProps = {
onClick: () => void;
icon: string;
text: string;
side: string;
};
interface MenuIconBig {
props: PageOwnProps;
}
class MenuIconBig extends Component {
static externalClasses = ['ex-class'];
static defaultProps = {
text: '',
side: 'left',
};
render() {
const { icon, text, onClick, side } = this.props;
return (
<View className={`MenuIconBig ${side} ex-class`} onClick={onClick}>
<Image className='bg' src={icon} />
{text ? (
<View className='text-box'>
<Text className='text'>{text}</Text>
<Image className='arrow' src={ArrowIcon} />
</View>
) : null}
</View>
);
}
}
export default MenuIconBig as ComponentClass<PageOwnProps>;
src/components/MenuIcon/block/MenuIconBlock.scss 0 → 100644
.MenuIconBlock {
position: relative;
width: 218px;
height: 162px;
overflow: hidden;
.bg {
position: absolute;
width: 278px;
height: 224px;
z-index: -1;
transform: translate(-30px, -18px);
}
.text {
display: block;
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';
import { ComponentClass } from 'react';
type PageOwnProps = {
icon: string;
text: string;
onClick: () => void;
};
interface MenuIconBlock {
props: PageOwnProps;
}
class MenuIconBlock extends Component {
render() {
const { icon, text, onClick } = this.props;
return (
<View className='MenuIconBlock' onClick={onClick}>
<Image className='bg' src={icon} />
<Text className='text'>{text}</Text>
</View>
);
}
}
export default MenuIconBlock as ComponentClass<PageOwnProps>;
src/components/MenuIcon/normal/MenuIconNormal.scss 0 → 100644
.MenuIconNormal {
display: flex;
flex-direction: column;
width: 120px;
.icon {
width: 120px;
height: 120px;
}
.text {
width: 100%;
font-size: 24px;
color: #666;
text-align: center;
}
}
src/components/MenuIcon/normal/MenuIconNormal.tsx 0 → 100644
import './MenuIconNormal.scss';
import { Component } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { ComponentClass } from 'react';
type PageOwnProps = {
icon: string;
text: string;
onClick: () => void;
};
interface MenuIconNormal {
props: PageOwnProps;
}
class MenuIconNormal extends Component<PageOwnProps> {
render() {
const { icon, text, onClick } = this.props;
return (
<View className='MenuIconNormal' onClick={onClick}>
<Image className='icon' src={icon} />
<Text className='text'>{text}</Text>
</View>
);
}
}
export default MenuIconNormal as ComponentClass<PageOwnProps>;
src/constants/index.js
...@@ -14,3 +14,4 @@ export const ANN_LINK_URL = 'https://ex-test-wx.168cad.top/announcement/'; ...@@ -14,3 +14,4 @@ export const ANN_LINK_URL = 'https://ex-test-wx.168cad.top/announcement/';
export const SHOWER_APP_URL = 'https://in-test-shower-app-server.168cad.top'; export const SHOWER_APP_URL = 'https://in-test-shower-app-server.168cad.top';
export const SOCKET_URL = 'wss://in-test-shower-hardware-server.168cad.top/ws'; export const SOCKET_URL = 'wss://in-test-shower-hardware-server.168cad.top/ws';
export const SMPRO_URL = 'https://ex-test-dcxy-smapro-app.168cad.top'; export const SMPRO_URL = 'https://ex-test-dcxy-smapro-app.168cad.top';
export const GX_URL = 'http://ex-test-gx-app-server.168cad.top';
src/pages/BarCode/BarCode.scss
...@@ -2,6 +2,31 @@ page { ...@@ -2,6 +2,31 @@ page {
background-color: #eee; background-color: #eee;
} }
.BarCode { .BarCode {
position: relative;
.BackTag {
position: absolute;
right: 0;
top: 354px;
width: 40px;
height: 140px;
background-color: rgba($color: #000000, $alpha: 0.7);
border-radius: 8px 0 0 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.icon {
width: 22px;
height: 18px;
margin-bottom: 10px;
}
.text {
width: 22px;
font-size: 22px;
line-height: 22px;
color: #fff;
}
}
.OrderBox { .OrderBox {
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
......
src/pages/BarCode/BarCode.tsx
import Taro, { Component } from '@tarojs/taro'; import Taro, { Component } from '@tarojs/taro';
import { ComponentClass } from 'react'; import { ComponentClass } from 'react';
import { View, Canvas, Image } from '@tarojs/components'; import { View, Canvas, Image, Text } from '@tarojs/components';
import RefreshIcon from '../../images/barcode/pic_shuaxin@2x.png'; import RefreshIcon from '../../images/barcode/pic_shuaxin@2x.png';
import ArrIcon from '../../images/barcode/icon_fangda@2x.png'; import ArrIcon from '../../images/barcode/icon_fangda@2x.png';
import CodeIcon from '../../images/water/nocode@2x.png';
import wxbarcode from 'wxbarcode'; import wxbarcode from 'wxbarcode';
...@@ -52,6 +53,7 @@ type PageState = { ...@@ -52,6 +53,7 @@ type PageState = {
remainAccount: number; remainAccount: number;
titlePerfix: string; titlePerfix: string;
}; };
showBackTag: boolean;
}; };
type IProps = PageStateProps & PageOwnProps & PageDispatchProps; type IProps = PageStateProps & PageOwnProps & PageDispatchProps;
...@@ -122,6 +124,7 @@ class BarCode extends Component { ...@@ -122,6 +124,7 @@ class BarCode extends Component {
remainAccount: 0, remainAccount: 0,
titlePerfix: '', titlePerfix: '',
}, },
showBackTag: false,
}; };
} }
onShareAppMessage = shareHandle; onShareAppMessage = shareHandle;
...@@ -159,6 +162,7 @@ class BarCode extends Component { ...@@ -159,6 +162,7 @@ class BarCode extends Component {
value: 1, value: 1,
}); });
}); });
this.checkShowBackTag();
} }
componentWillUnmount() { componentWillUnmount() {
...@@ -171,6 +175,25 @@ class BarCode extends Component { ...@@ -171,6 +175,25 @@ class BarCode extends Component {
}); });
} }
checkShowBackTag() {
let params = this.$router.params;
console.log(params);
if (params && params.backPage) {
this.setState({
showBackTag: true,
});
}
}
goBackPage() {
let params = this.$router.params;
if (params && params.backPage) {
Taro.redirectTo({
url: decodeURIComponent(params.backPage),
});
}
}
fetchOrder(id: number) { fetchOrder(id: number) {
return fetchOrderDetailAndPay({ return fetchOrderDetailAndPay({
id, id,
...@@ -236,9 +259,23 @@ class BarCode extends Component { ...@@ -236,9 +259,23 @@ class BarCode extends Component {
render() { render() {
const { userinfo } = this.props; const { userinfo } = this.props;
const { showPayOrder, showBig, orderInfo, payInfos, accounts } = this.state; const {
showPayOrder,
showBig,
orderInfo,
payInfos,
accounts,
showBackTag,
} = this.state;
return ( return (
<View className='BarCode'> <View className='BarCode'>
{showBackTag && (
<View className='BackTag' onClick={this.goBackPage}>
<Image className='icon' src={CodeIcon} />
<Text className='text'>隐藏条码</Text>
</View>
)}
{showPayOrder && ( {showPayOrder && (
<View className='OrderBox'> <View className='OrderBox'>
<OrderTitle price={orderInfo.payableMoney} /> <OrderTitle price={orderInfo.payableMoney} />
......
src/pages/Home/Home.scss
.Home { .Home {
padding: 0 32px; // padding: 0 32px;
.Home-BarMenu { .Home-BarMenu {
position: absolute; position: absolute;
right: 26px; right: 26px;
...@@ -30,8 +30,13 @@ ...@@ -30,8 +30,13 @@
.Home-UserBox { .Home-UserBox {
position: relative; position: relative;
width: 100%;
height: 390px; height: 390px;
padding: 0 0 40px;
margin: 0 32px;
box-sizing: content-box;
.bg {
height: 390px;
}
.Home-UserBox-Setting { .Home-UserBox-Setting {
position: absolute; position: absolute;
right: 28px; right: 28px;
...@@ -39,135 +44,107 @@ ...@@ -39,135 +44,107 @@
width: 38px; width: 38px;
height: 38px; height: 38px;
} }
} .Home-UserBox-info {
.Home-UserBox-info { padding: 80px 88px 20px 76px;
padding: 80px 88px 20px 76px;
display: flex;
justify-content: space-between;
color: #333;
}
.Home-UserBox-name {
font-size: 44px;
margin-bottom: 8px;
}
.Home-UserBox-tel {
font-size: 32px;
margin-bottom: 8px;
}
.Home-UserBox-addr {
font-size: 24px;
}
.Home-UserBox-headimg {
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid #c8ccfc;
}
.Home-UserBox-line {
width: 620px;
border-top: 1px solid #d7daff;
margin: 0 auto;
}
.Home-UserBox-Bean {
padding: 32px 40px 0;
display: flex;
justify-content: space-around;
font-size: 24px;
color: #666;
.Home-UserBox-BeanItem {
display: flex; display: flex;
align-items: center; justify-content: space-between;
color: #333;
} }
.Home-UserBox-BeanIcon { .Home-UserBox-name {
width: 24px; font-size: 44px;
height: 24px; margin-bottom: 8px;
margin-right: 12px;
} }
.Home-UserBox-BeanCount { .Home-UserBox-tel {
font-size: 28px; font-size: 32px;
color: #333; margin-bottom: 8px;
} }
} .Home-UserBox-addr {
.Home-UserBox-Order { font-size: 24px;
position: absolute; }
left: 50%; .Home-UserBox-headimg {
bottom: -40px; width: 100px;
transform: translate(-50%); height: 100px;
width: 572px; border-radius: 50%;
height: 80px; border: 10px solid #c8ccfc;
line-height: 80px; }
background-color: #6180f4; .Home-UserBox-line {
border-radius: 50px; width: 620px;
display: flex; border-top: 1px solid #d7daff;
overflow: hidden; margin: 0 auto;
} }
.Home-UserBox-Order-text { .Home-UserBox-Bean {
flex: 1; padding: 32px 40px 0;
text-align: center; display: flex;
color: #fff; justify-content: space-around;
font-size: 24px; font-size: 24px;
} color: #666;
.Home-UserBox-Order-right { .Home-UserBox-BeanItem {
background-color: #375ef1; display: flex;
width: 212px; align-items: center;
display: flex; }
justify-content: center; .Home-UserBox-BeanIcon {
align-items: center; width: 24px;
} height: 24px;
.Home-UserBox-Order-icon { margin-right: 12px;
width: 40px; }
height: 20px; .Home-UserBox-BeanCount {
} font-size: 28px;
.Home-Item { color: #333;
position: relative; }
height: 192px; }
margin-top: 68px; .Home-UserBox-Order {
display: flex;
align-items: center;
}
.Home-Item-arrow {
width: 15px;
height: 23px;
}
.Home-HairDryer {
justify-content: flex-end;
.Home-HairDryer-shadow {
position: absolute; position: absolute;
left: 50%;
bottom: 0px; bottom: 0px;
width: 100%; transform: translate(-50%);
height: 160px; width: 572px;
border-radius: 24px; height: 80px;
box-shadow: 0 6px 20px #3161ff; line-height: 80px;
background-color: #6180f4;
border-radius: 50px;
display: flex;
overflow: hidden;
} }
.Home-HairDryer-text { .Home-UserBox-Order-text {
flex: 1;
text-align: center;
color: #fff; color: #fff;
font-size: 32px; font-size: 24px;
margin-right: 50px;
margin-top: 20px;
} }
.Home-Item-arrow { .Home-UserBox-Order-right {
margin-left: 10px; background-color: #375ef1;
width: 212px;
display: flex;
justify-content: center;
align-items: center;
}
.Home-UserBox-Order-icon {
width: 40px;
height: 20px;
} }
} }
.Home-Shower {
margin-top: 40px; .Home-Service-List {
.bg { display: flex;
height: 225px; flex-flow: wrap;
transform: scale(1.1); justify-content: space-between;
.Home-Service-List {
margin-top: 20px;
} }
.Home-Shower-text { &.normal,
color: #fff; &.block {
font-size: 32px; padding: 0 32px;
margin-left: 50px; margin: 20px auto;
} }
.Home-Item-arrow { &.big {
margin-left: 10px; width: 686px;
margin: 20px auto 0;
} }
} }
.Home-Announcement { .Home-Announcement {
position: relative; position: relative;
height: 222px; height: 222px;
margin-top: 40px; margin: 20px 32px 40px;
.Home-Announcement-title { .Home-Announcement-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
src/pages/Home/Home.tsx
...@@ -4,8 +4,6 @@ import { View, Image, Text } from '@tarojs/components'; ...@@ -4,8 +4,6 @@ import { View, Image, Text } from '@tarojs/components';
import UserBoxBg from '../../images/home/img_bg@2x.png'; import UserBoxBg from '../../images/home/img_bg@2x.png';
import ArrowIcon from '../../images/home/icon_dingdan@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 AnnouncementBg from '../../images/home/img_gonggao_bg@2x.png';
import MoreIcon from '../../images/home/icon_more_right@2x.png'; import MoreIcon from '../../images/home/icon_more_right@2x.png';
import SettingIcon from '../../images/home/icon_shezhi@2x.png'; import SettingIcon from '../../images/home/icon_shezhi@2x.png';
...@@ -13,7 +11,18 @@ import HBeanIcon from '../../images/home/icon_chuifengdou@2x.png'; ...@@ -13,7 +11,18 @@ import HBeanIcon from '../../images/home/icon_chuifengdou@2x.png';
import TBeanIcon from '../../images/home/icon_tongyongdou@2x.png'; import TBeanIcon from '../../images/home/icon_tongyongdou@2x.png';
import UserHeaderM from '../../images/home/img_boy_touxiang@2x.png'; import UserHeaderM from '../../images/home/img_boy_touxiang@2x.png';
import UserHeaderF from '../../images/home/img_girl_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 WaterIconBlock from '../../images/menu/ic_zizhu-2@2x.png';
import WaterIconBig from '../../images/menu/ic_zizhu-3@2x.png';
import ShowerIconNormal from '../../images/menu/ic_linyu@2x.png';
import ShowerIconBlock from '../../images/menu/ic_zizhu-1@2x.png';
import ShowerIconBig from '../../images/menu/ic_linyu-2@2x.png';
import DryerIconNormal from '../../images/menu/ic_chuifeng@2x.png';
import DryerIconBlock from '../../images/menu/ic_chuifeng-1@2x.png';
import DryerIconBig from '../../images/menu/ic_chuifeng-2@2x.png';
import DispenserIconNormal from '../../images/menu/ic_bigua@2x.png';
import DispenserIconBlock from '../../images/menu/ic_bigua-1@2x.png';
import DispenserIconBig from '../../images/menu/ic_bigua-2@2x.png';
import './Home.scss'; import './Home.scss';
import { connect } from '@tarojs/redux'; import { connect } from '@tarojs/redux';
...@@ -28,6 +37,9 @@ import { appLogout } from '../../api/customer'; ...@@ -28,6 +37,9 @@ import { appLogout } from '../../api/customer';
import { Customer } from '@/types/Customer/Customer'; import { Customer } from '@/types/Customer/Customer';
import { shareHandle } from '@/common/shareMethod'; import { shareHandle } from '@/common/shareMethod';
import { fetchAreaService, ServiceTypeParams, Service } from '@/api/home'; 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 = { type PageStateProps = {
userinfo: Customer; userinfo: Customer;
...@@ -66,7 +78,12 @@ class Home extends Component { ...@@ -66,7 +78,12 @@ class Home extends Component {
barMenuVisiable: false, barMenuVisiable: false,
commBean: 0.0, commBean: 0.0,
hairDryerBean: 0.0, hairDryerBean: 0.0,
serviceList: [], serviceList: [
{ serviceId: 3, serviceName: '饮水' },
{ serviceId: 4, serviceName: '吹风' },
// { serviceId: 5, serviceName: '洗浴' },
// { serviceId: 9, serviceName: '壁挂饮水' },
],
annItem: { annItem: {
id: 0, id: 0,
styleType: '', styleType: '',
...@@ -182,6 +199,12 @@ class Home extends Component { ...@@ -182,6 +199,12 @@ class Home extends Component {
}); });
} }
goDispenser() {
Taro.navigateTo({
url: '/pages/WaterDispenser/WaterDispenser',
});
}
toggleBarMenu() { toggleBarMenu() {
this.setState(({ barMenuVisiable }: PageState) => ({ this.setState(({ barMenuVisiable }: PageState) => ({
barMenuVisiable: !barMenuVisiable, barMenuVisiable: !barMenuVisiable,
...@@ -208,6 +231,7 @@ class Home extends Component { ...@@ -208,6 +231,7 @@ class Home extends Component {
url: `/pages/Content/Content?id=${id}`, url: `/pages/Content/Content?id=${id}`,
}); });
} }
render() { render() {
const { userinfo } = this.props; const { userinfo } = this.props;
const { const {
...@@ -283,51 +307,112 @@ class Home extends Component { ...@@ -283,51 +307,112 @@ class Home extends Component {
</View> </View>
</View> </View>
</View> </View>
{serviceList.map(service =>
service.serviceId === 4 || service.serviceId === 11 ? ( {serviceList.length && serviceList.length <= 2 ? (
// 自助吹风 <View className='Home-Service-List big'>
<View {serviceList.map(service =>
key={service.serviceId} service.serviceId === 3 || service.serviceId === 11 ? (
className='Home-Item Home-HairDryer' <MenuIconBig
onClick={this.goBarCode}> key={service.serviceId}
<Image className='bg' src={HairDryerBg} /> icon={WaterIconBig}
<View className='Home-HairDryer-shadow' /> text={''}
<View className='Home-HairDryer-text'> onClick={this.goBarCode}
吹风 />
<Image className='Home-Item-arrow' src={HairDryerArr} /> ) : service.serviceId === 4 || service.serviceId === 12 ? (
</View> <MenuIconBig
</View> ex-class='hairDryer'
) : service.serviceId === 10 || service.serviceId === 5 ? ( key={service.serviceId}
// 自助吹风 icon={DryerIconBig}
<View text={service.serviceName}
key={service.serviceId} side='right'
className='Home-Item Home-Shower' onClick={this.goBarCode}
onClick={this.goShower}> />
<Image className='bg' src={ShowerIcon} /> ) : service.serviceId === 5 || service.serviceId === 10 ? (
<View className='Home-Shower-shadow' /> <MenuIconBig
<View className='Home-Shower-text'> key={service.serviceId}
洗浴 icon={ShowerIconBig}
<Image className='Home-Item-arrow' src={HairDryerArr} /> text={service.serviceName}
</View> onClick={this.goShower}
</View> />
) : service.serviceId === 3 || service.serviceId === 11 ? ( ) : service.serviceId === 9 ? (
// 自助饮水 <MenuIconBig
<View key={service.serviceId}
key={service.serviceId} icon={DispenserIconBig}
className='Home-Item Home-Water' text={''}
onClick={this.goBarCode}> onClick={this.goDispenser}
<Image className='bg' src={HairDryerBg} /> />
<View className='Home-Water-shadow' /> ) : null,
<View className='Home-Water-text'> )}
饮水 </View>
<Image className='Home-Item-arrow' src={HairDryerArr} /> ) : serviceList.length && serviceList.length == 3 ? (
</View> <View className='Home-Service-List block'>
</View> {serviceList.map(service =>
) : service.serviceId === 9 ? ( service.serviceId === 3 || service.serviceId === 11 ? (
// 壁挂饮水 <MenuIconBlock
<View key={service.serviceId} /> key={service.serviceId}
) : null, icon={WaterIconBlock}
)} text={service.serviceName}
onClick={this.goBarCode}
/>
) : service.serviceId === 4 || service.serviceId === 12 ? (
<MenuIconBlock
key={service.serviceId}
icon={DryerIconBlock}
text={service.serviceName}
onClick={this.goBarCode}
/>
) : service.serviceId === 5 || service.serviceId === 10 ? (
<MenuIconBlock
key={service.serviceId}
icon={ShowerIconBlock}
text={service.serviceName}
onClick={this.goShower}
/>
) : service.serviceId === 9 ? (
<MenuIconBlock
key={service.serviceId}
icon={DispenserIconBlock}
text={service.serviceName}
onClick={this.goDispenser}
/>
) : null,
)}
</View>
) : serviceList.length && serviceList.length >= 4 ? (
<View className='Home-Service-List normal'>
{serviceList.map(service =>
service.serviceId === 3 || service.serviceId === 11 ? (
<MenuIconNormal
key={service.serviceId}
icon={WaterIconNormal}
text={'饮水'}
onClick={this.goBarCode}
/>
) : service.serviceId === 4 || service.serviceId === 12 ? (
<MenuIconNormal
key={service.serviceId}
icon={DryerIconNormal}
text={'吹风'}
onClick={this.goBarCode}
/>
) : service.serviceId === 5 || service.serviceId === 10 ? (
<MenuIconNormal
key={service.serviceId}
icon={ShowerIconNormal}
text={service.serviceName}
onClick={this.goShower}
/>
) : service.serviceId === 9 ? (
<MenuIconNormal
key={service.serviceId}
icon={DispenserIconNormal}
text={'饮水'}
onClick={this.goDispenser}
/>
) : null,
)}
</View>
) : null}
{annItem.id ? ( {annItem.id ? (
<View className='Home-Announcement'> <View className='Home-Announcement'>
......
src/pages/WaterDispenser/WaterDispenser.scss 0 → 100644
.WaterDispenser {
position: relative;
.WaterDispenser-tg {
position: absolute;
right: 0;
top: 34px;
width: 40px;
height: 140px;
background-color: rgba($color: #000000, $alpha: 0.7);
border-radius: 8px 0 0 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.icon {
width: 22px;
height: 18px;
margin-bottom: 10px;
}
.text {
width: 22px;
font-size: 22px;
line-height: 22px;
color: #fff;
}
}
.btn-box {
margin: 40px auto 0;
width: 534px;
display: flex;
justify-content: space-between;
align-items: center;
.shower-scan-btn {
width: 116px;
height: 116px;
border-radius: 50%;
&:active {
box-shadow: #ddd 0 0 40px;
}
}
.shower-start-btn {
width: 276px;
height: 128px;
border-radius: 50px;
&:active {
box-shadow: #ddd 0 0 40px;
}
}
}
.LastUseList {
padding: 0 22px;
margin-top: 50px;
.bb {
border-bottom: 1px dotted #999;
}
.LastUseList-title {
line-height: 70px;
font-size: 30px;
color: #5f81fe;
font-weight: bolder;
text-indent: 58px;
}
}
}
src/pages/WaterDispenser/WaterDispenser.tsx 0 → 100644
import './WaterDispenser.scss';
import Taro, { Component } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import ScanIcon from '../../images/shower/ic_saoma@2x.png';
import StartIcon from '../../images/water/start@2x.png';
import CantStartIcon from '../../images/water/nostart@2x.png';
import CodeIcon from '../../images/water/code@2x.png';
import DeviceInfo from '@/components/DeviceInfo/DeviceInfo';
import EquipmentItem from './components/EquipmentItem/EquipmentItem';
import {
getUsedEquipment,
getUsingEquipment,
waterBeginning,
fetchWaterEquipmentInfo,
DeviceInfoResponse,
} from '@/api/waterDispenser';
import { Customer } from '@/types/Customer/Customer';
import { connect } from '@tarojs/redux';
import { ComponentClass } from 'react';
import { ResponseDataEntity } from '@/api';
export type DeviceInfo = {
code: string;
position: string;
};
type PageStateProps = {
userinfo: Customer;
};
type PageState = {
deviceInfo: DeviceInfo;
waterUsingState: boolean;
useList: DeviceInfo[];
timer: number | null;
};
type IProps = PageStateProps;
interface WaterDispenser {
props: IProps;
state: PageState;
}
@connect(({ userinfo }) => ({
userinfo,
}))
class WaterDispenser extends Component {
constructor(props) {
super(props);
this.state = {
waterUsingState: false,
deviceInfo: {
code: '',
position: '',
},
useList: [],
timer: null,
};
}
componentWillMount() {
this.getUsedEquipment();
}
componentWillUnmount() {
this.clearTimer();
}
clearTimer() {
const { timer } = this.state;
if (timer) {
clearTimeout(timer);
this.setState({
timer: null,
});
}
}
toggleCodeState() {
Taro.redirectTo({
url: `/pages/BarCode/BarCode?backPage=${encodeURIComponent(
'/pages/WaterDispenser/WaterDispenser',
)}`,
});
}
scanEquipment() {
return Taro.scanCode({
onlyFromCamera: true,
scanType: ['qrCode'],
})
.then(res => {
console.log(res);
const { result } = res;
const { userinfo } = this.props;
return fetchWaterEquipmentInfo({
deviceCode: result,
customerId: userinfo.customerId.toString(),
campusId: userinfo.areaId,
})
.then((res: ResponseDataEntity<DeviceInfoResponse>) => {
console.log(res);
const data = res.data;
this.setState({
deviceInfo: data,
});
})
.catch(err => {
console.error(err);
Taro.showToast({
title: err.msg || '请扫描正确的设备码',
icon: 'none',
});
});
})
.catch(err => {
console.error(err);
// Taro.showToast({
// title: err.msg || '呼起扫码失败！',
// icon: 'none',
// });
});
}
getUsedEquipment() {
const { userinfo } = this.props;
getUsedEquipment({
customerId: userinfo.customerId.toString(),
campusId: userinfo.areaId,
})
.then(res => {
console.log(res);
this.setState({
useList: res.data,
});
})
.catch(err => {
console.error(err);
});
}
getUsingEquipment() {
const { userinfo } = this.props;
getUsingEquipment({
customerId: userinfo.customerId.toString(),
})
.then(res => {
console.log(res);
if (res.data) {
} else {
this.setState({
waterUsingState: false,
});
}
})
.catch(err => {
console.error(err);
});
}
getSelectedEquipment(data: DeviceInfo) {
this.setState({
deviceInfo: data,
});
}
waterBeginning() {
Taro.showLoading();
const { deviceInfo } = this.state;
const { userinfo } = this.props;
waterBeginning({
deviceCode: deviceInfo.code,
customerId: userinfo.customerId,
customerName: userinfo.customerName,
customerPhone: userinfo.customerPhone,
campusId: userinfo.areaId,
})
.then(res => {
console.log(res);
Taro.hideLoading();
this.setState(
{
waterUsingState: true,
},
() => {
this.startCheckusing();
},
);
})
.catch(err => {
Taro.hideLoading();
console.error('开启失败： ', err);
});
}
startCheckusing() {
const { waterUsingState } = this.state;
if (waterUsingState) {
this.getUsingEquipment();
let timer = setTimeout(() => {
this.startCheckusing();
}, 5000);
this.setState({
timer,
});
} else {
this.clearTimer();
}
}
render() {
const {
waterUsingState,
deviceInfo: { code, position },
useList,
} = this.state;
return (
<View className='WaterDispenser'>
<View className='WaterDispenser-tg' onClick={this.toggleCodeState}>
<Image className='icon' src={CodeIcon} />
<Text className='text'>显示条码</Text>
</View>
<DeviceInfo size='small' code={code} position={position} />
<View className='btn-box'>
<Image
className='shower-scan-btn'
src={ScanIcon}
onClick={this.scanEquipment}
/>
{code && !waterUsingState ? (
<Image
className='shower-start-btn'
src={StartIcon}
onClick={this.waterBeginning}
/>
) : (
<Image className='shower-start-btn' src={CantStartIcon} />
)}
</View>
<View className='LastUseList'>
<View className='LastUseList-title bb'>最近使用</View>
{useList.map(device => (
<EquipmentItem
key={device.code}
ex-class='bb'
code={device.code}
position={device.position}
onClick={this.getSelectedEquipment}
/>
))}
</View>
</View>
);
}
}
export default WaterDispenser as ComponentClass<IProps, PageState>;
src/pages/WaterDispenser/components/EquipmentItem/EquipmentItem.scss 0 → 100644
.EquipmentItem {
padding: 10px 0;
line-height: 46px;
.EquipmentItem-item {
display: flex;
font-size: 26px;
color: #999;
}
.EquipmentItem-label {
margin-right: 24px;
margin-left: 58px;
}
.EquipmentItem-value {
width: 460px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.code {
font-size: 30px;
color: #333;
}
}
src/pages/WaterDispenser/components/EquipmentItem/EquipmentItem.tsx 0 → 100644
import { Component } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import './EquipmentItem.scss';
import { DeviceInfo } from '../../WaterDispenser';
import { ComponentClass } from 'react';
type PageOwnProps = {
code: string;
position: string;
onClick: (e: DeviceInfo) => void;
};
interface EquipmentItem {
props: PageOwnProps;
}
class EquipmentItem extends Component {
static externalClasses = ['ex-class'];
clickHandle() {
const { code, position, onClick } = this.props;
onClick &&
onClick({
code,
position,
});
}
render() {
const { code, position } = this.props;
return (
<View className='EquipmentItem ex-class' onClick={this.clickHandle}>
<View className='EquipmentItem-item'>
<Text className='EquipmentItem-label'>设备编码</Text>
<View className='EquipmentItem-value code'>{code}</View>
</View>
<View className='EquipmentItem-item'>
<Text className='EquipmentItem-label'>设备位置</Text>
{position ? (
<View className='EquipmentItem-value'>{position}</View>
) : null}
</View>
</View>
);
}
}
export default EquipmentItem as ComponentClass<PageOwnProps>;
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