Skip to content

W
wx-school-app
Commit e612387f by 姜雷
Options

完成壁挂饮水

parent 84f61611
Showing with 437 additions and 78 deletions
src/api/index.ts
......@@ -9,6 +9,7 @@ import {
OLD_BASE_SERVER_URL,
SHOWER_APP_URL,
SMPRO_URL,
GX_URL,
} from '../constants/index';
export type ResponseDataEntity<T> = {
......@@ -64,5 +65,6 @@ export const customerFetch = createFetch(CUSTOMER_SERVER_URL);
export const schoolMainFetch = createFetch(SCHOOL_MAIN_URL);
export const showerFetch = createFetch(SHOWER_APP_URL);
export const smaproFetch = createFetch(SMPRO_URL);
export const gxFetch = createFetch(GX_URL);
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
......@@ -24,7 +24,6 @@ class App extends Component {
*/
config: Config = {
pages: [
'pages/WaterDispenser/WaterDispenser',
'pages/index/index',
'pages/Home/Home',
'pages/Order/OrderPay/OrderPay',
......@@ -41,6 +40,7 @@ class App extends Component {
'pages/Content/Content',
'pages/WebPage/WebPage',
'pages/Shower/Shower',
'pages/WaterDispenser/WaterDispenser',
],
window: {
backgroundTextStyle: 'light',
......
src/components/DeviceInfo/DeviceInfo.tsx
......@@ -40,7 +40,9 @@ class DeviceInfo extends Component {
</View>
<View className='equipment-item'>
<Text className='equipment-label'>设备位置：</Text>
{position ? (
<Text className='equipment-value'>{position}</Text>
) : null}
</View>
</View>
) : (
......
src/components/MenuIcon/big/MenuIconBig.scss
.MenuIconBig {
position: relative;
display: flex;
width: 746px;
height: 224px;
margin: 0 2px;
width: 686px;
height: 164px;
margin: 0 auto 20px;
align-items: center;
.bg {
position: absolute;
width: 100%;
height: 100%;
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;
margin-left: 50px;
font-size: 32px;
margin-right: 20px;
}
.arrow{
.arrow {
width: 15px;
height: 23px;
}
......
src/components/MenuIcon/big/MenuIconBig.tsx
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 } = this.props;
const { icon, text, onClick, side } = this.props;
return (
<View className='MenuIconBig' onClick={onClick}>
<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;
export default MenuIconBig as ComponentClass<PageOwnProps>;
src/components/MenuIcon/block/MenuIconBlock.scss
......@@ -3,16 +3,17 @@
width: 218px;
height: 162px;
overflow: hidden;
.bg{
.bg {
position: absolute;
width: 100%;
height: 100%;
width: 278px;
height: 224px;
z-index: -1;
transform: translate(-30px, -18px);
}
.text {
display: block;
margin-top: 50px;
margin-left: 40px;
margin-left: 18px;
font-size: 24px;
color: #fff;
}
......
src/components/MenuIcon/block/MenuIconBlock.tsx
import './MenuIconBlock.scss';
import { Component } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { ComponentClass } from 'react';
type PageOwnProps = {
icon: string;
......@@ -23,4 +24,4 @@ class MenuIconBlock extends Component {
}
}
export default MenuIconBlock;
export default MenuIconBlock as ComponentClass<PageOwnProps>;
src/components/MenuIcon/normal/MenuIconNormal.tsx
import './MenuIconNormal.scss';
import { Component } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { ComponentClass } from 'react';
type PageOwnProps = {
icon: string;
......@@ -23,4 +24,4 @@ class MenuIconNormal extends Component<PageOwnProps> {
}
}
export default MenuIconNormal;
export default MenuIconNormal as ComponentClass<PageOwnProps>;
src/constants/index.js
......@@ -13,3 +13,4 @@ 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 = 'https://ex-dev-dcxy-smapro-app.168cad.top';
export const GX_URL = 'http://ex-dev-gx-app-server.168cad.top';
src/pages/BarCode/BarCode.scss
......@@ -2,6 +2,31 @@ page {
background-color: #eee;
}
.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 {
box-sizing: border-box;
position: absolute;
......
src/pages/BarCode/BarCode.tsx
import Taro, { Component } from '@tarojs/taro';
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 ArrIcon from '../../images/barcode/icon_fangda@2x.png';
import CodeIcon from '../../images/water/nocode@2x.png';
import wxbarcode from 'wxbarcode';
......@@ -52,6 +53,7 @@ type PageState = {
remainAccount: number;
titlePerfix: string;
};
showBackTag: boolean;
};
type IProps = PageStateProps & PageOwnProps & PageDispatchProps;
......@@ -122,6 +124,7 @@ class BarCode extends Component {
remainAccount: 0,
titlePerfix: '',
},
showBackTag: false,
};
}
onShareAppMessage = shareHandle;
......@@ -159,6 +162,7 @@ class BarCode extends Component {
value: 1,
});
});
this.checkShowBackTag();
}
componentWillUnmount() {
......@@ -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) {
return fetchOrderDetailAndPay({
id,
......@@ -236,9 +259,23 @@ class BarCode extends Component {
render() {
const { userinfo } = this.props;
const { showPayOrder, showBig, orderInfo, payInfos, accounts } = this.state;
const {
showPayOrder,
showBig,
orderInfo,
payInfos,
accounts,
showBackTag,
} = this.state;
return (
<View className='BarCode'>
{showBackTag && (
<View className='BackTag' onClick={this.goBackPage}>
<Image className='icon' src={CodeIcon} />
<Text className='text'>隐藏条码</Text>
</View>
)}
{showPayOrder && (
<View className='OrderBox'>
<OrderTitle price={orderInfo.payableMoney} />
......
src/pages/Home/Home.scss
......@@ -44,7 +44,6 @@
width: 38px;
height: 38px;
}
}
.Home-UserBox-info {
padding: 80px 88px 20px 76px;
display: flex;
......@@ -123,23 +122,29 @@
width: 40px;
height: 20px;
}
}
.Home-Service-List {
display: flex;
flex-flow: wrap;
justify-content: space-between;
.Home-Service-List {
margin-top: 20px;
}
&.normal,
&.block {
padding: 0 32px;
margin: 20px auto;
}
&.big {
margin-top: 20px;
width: 686px;
margin: 20px auto 0;
}
}
.Home-Announcement {
position: relative;
height: 222px;
margin: 0 32px 40px;
margin: 20px 32px 40px;
.Home-Announcement-title {
display: flex;
justify-content: space-between;
......
src/pages/Home/Home.tsx
......@@ -69,7 +69,7 @@ interface Home {
updateUserInfo(entity: UserState) {
dispatch(updateUserInfo(entity));
},
})
}),
)
class Home extends Component {
constructor(props) {
......@@ -79,10 +79,10 @@ class Home extends Component {
commBean: 0.0,
hairDryerBean: 0.0,
serviceList: [
// { serviceId: 3, serviceName: '吹风' },
{ serviceId: 3, serviceName: '饮水' },
{ serviceId: 4, serviceName: '吹风' },
// { serviceId: 5, serviceName: '吹风' },
{ serviceId: 9, serviceName: '吹风' },
// { serviceId: 5, serviceName: '洗浴' },
// { serviceId: 9, serviceName: '壁挂饮水' },
],
annItem: {
id: 0,
......@@ -315,31 +315,33 @@ class Home extends Component {
<MenuIconBig
key={service.serviceId}
icon={WaterIconBig}
text={'饮水'}
text={''}
onClick={this.goBarCode}
/>
) : service.serviceId === 4 || service.serviceId === 12 ? (
<MenuIconBig
ex-class='hairDryer'
key={service.serviceId}
icon={DryerIconBig}
text={'吹风'}
text={service.serviceName}
side='right'
onClick={this.goBarCode}
/>
) : service.serviceId === 5 || service.serviceId === 10 ? (
<MenuIconBig
key={service.serviceId}
icon={ShowerIconBig}
text={'洗浴'}
text={service.serviceName}
onClick={this.goShower}
/>
) : service.serviceId === 9 ? (
<MenuIconBig
key={service.serviceId}
icon={DispenserIconBig}
text={'饮水'}
text={''}
onClick={this.goDispenser}
/>
) : null
) : null,
)}
</View>
) : serviceList.length && serviceList.length == 3 ? (
......@@ -349,31 +351,31 @@ class Home extends Component {
<MenuIconBlock
key={service.serviceId}
icon={WaterIconBlock}
text={'饮水'}
text={service.serviceName}
onClick={this.goBarCode}
/>
) : service.serviceId === 4 || service.serviceId === 12 ? (
<MenuIconBlock
key={service.serviceId}
icon={DryerIconBlock}
text={'吹风'}
text={service.serviceName}
onClick={this.goBarCode}
/>
) : service.serviceId === 5 || service.serviceId === 10 ? (
<MenuIconBlock
key={service.serviceId}
icon={ShowerIconBlock}
text={'洗浴'}
text={service.serviceName}
onClick={this.goShower}
/>
) : service.serviceId === 9 ? (
<MenuIconBlock
key={service.serviceId}
icon={DispenserIconBlock}
text={'饮水'}
text={service.serviceName}
onClick={this.goDispenser}
/>
) : null
) : null,
)}
</View>
) : serviceList.length && serviceList.length >= 4 ? (
......@@ -397,7 +399,7 @@ class Home extends Component {
<MenuIconNormal
key={service.serviceId}
icon={ShowerIconNormal}
text={'洗浴'}
text={service.serviceName}
onClick={this.goShower}
/>
) : service.serviceId === 9 ? (
......@@ -407,7 +409,7 @@ class Home extends Component {
text={'饮水'}
onClick={this.goDispenser}
/>
) : null
) : null,
)}
</View>
) : null}
......@@ -419,8 +421,7 @@ class Home extends Component {
<Text>最新公告</Text>
<View
className='Home-Announcement-more'
onClick={() => this.goAnn(annItem.id)}
>
onClick={() => this.goAnn(annItem.id)}>
更多
<Image className='more-icon' src={MoreIcon} />
</View>
......@@ -428,8 +429,7 @@ class Home extends Component {
{annItem.items.length && (
<View
className='Home-Announcement-Content'
onClick={() => this.geAnnDetail(annItem.items[0].id)}
>
onClick={() => this.geAnnDetail(annItem.items[0].id)}>
<Text className='Home-Announcement-Content-title'>
{annItem.items[0].title}
</Text>
......
src/pages/WaterDispenser/WaterDispenser.tsx
import './WaterDispenser.scss';
import { Component } from '@tarojs/taro';
import Taro, { Component } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import ScanIcon from '../../images/shower/ic_saoma@2x.png';
import ShowerStart from '../../images/shower/ic_sel@2x.png';
import ShowerCantStart from '../../images/shower/ic_nor@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';
type DeviceInfo = {
export type DeviceInfo = {
code: string;
postion: string;
position: string;
};
type PageOwnState = {
type PageStateProps = {
userinfo: Customer;
};
type PageState = {
deviceInfo: DeviceInfo;
waterState: boolean;
waterUsingState: boolean;
useList: DeviceInfo[];
timer: number | null;
};
type IProps = PageStateProps;
interface WaterDispenser {
state: PageOwnState;
props: IProps;
state: PageState;
}
@connect(({ userinfo }) => ({
userinfo,
}))
class WaterDispenser extends Component {
constructor(props) {
super(props);
this.state = {
waterState: false,
waterUsingState: false,
deviceInfo: {
code: '',
postion: 'asdasf234',
position: '',
},
useList: [
{ code: 'asda', postion: 'asdasf234asdasf234asdasf234asdasf234' },
{ code: 'asda', postion: 'asdasf234asdasf234asdasf234asdasf234' },
{ code: 'asda', postion: 'asdasf234asdasf234asdasf234asdasf234' },
{ code: 'asda', postion: 'asdasf234asdasf234asdasf234asdasf234' },
{ code: 'asda', postion: 'asdasf234asdasf234asdasf234asdasf234' },
{ code: 'asda', postion: 'asdasf234asdasf234asdasf234asdasf234' },
],
useList: [],
timer: null,
};
}
scanEquipment() {}
start() {}
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 {
waterState,
deviceInfo: { code, postion },
waterUsingState,
deviceInfo: { code, position },
useList,
} = this.state;
return (
<View className='WaterDispenser'>
<View className='WaterDispenser-tg'>
<View className='WaterDispenser-tg' onClick={this.toggleCodeState}>
<Image className='icon' src={CodeIcon} />
<Text className='text'>显示条码</Text>
</View>
<DeviceInfo size='small' code={code} position={postion} />
<DeviceInfo size='small' code={code} position={position} />
<View className='btn-box'>
<Image
......@@ -64,14 +230,14 @@ class WaterDispenser extends Component {
src={ScanIcon}
onClick={this.scanEquipment}
/>
{code && !waterState ? (
{code && !waterUsingState ? (
<Image
className='shower-start-btn'
src={ShowerStart}
onClick={this.start}
src={StartIcon}
onClick={this.waterBeginning}
/>
) : (
<Image className='shower-start-btn' src={ShowerCantStart} />
<Image className='shower-start-btn' src={CantStartIcon} />
)}
</View>
......@@ -79,9 +245,11 @@ class WaterDispenser extends Component {
<View className='LastUseList-title bb'>最近使用</View>
{useList.map(device => (
<EquipmentItem
key={device.code}
ex-class='bb'
code={device.code}
postion={device.postion}
position={device.position}
onClick={this.getSelectedEquipment}
/>
))}
</View>
......@@ -90,4 +258,4 @@ class WaterDispenser extends Component {
}
}
export default WaterDispenser;
export default WaterDispenser as ComponentClass<IProps, PageState>;
src/pages/WaterDispenser/components/EquipmentItem/EquipmentItem.tsx
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;
postion: string;
position: string;
onClick: (e: DeviceInfo) => void;
};
interface EquipmentItem {
props: PageOwnProps;
}
class EquipmentItem extends Component {
static externalClasses = ['ex-class']
static externalClasses = ['ex-class'];
clickHandle() {
const { code, position, onClick } = this.props;
onClick &&
onClick({
code,
position,
});
}
render() {
const { code, postion } = this.props;
const { code, position } = this.props;
return (
<View className='EquipmentItem ex-class'>
<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>
<View className='EquipmentItem-value'>{postion}</View>
{position ? (
<View className='EquipmentItem-value'>{position}</View>
) : null}
</View>
</View>
);
}
}
export default EquipmentItem;
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