Skip to content

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

完成预约页面

parent 42ebe5ee
Showing with 439 additions and 4 deletions
src/api/shower.ts
......@@ -55,6 +55,12 @@ export const startShowerEquipment = (params: StartParams) =>
method: 'POST',
data: params,
});
export enum ShowerUseType {
bluetooth = 1,
appointment = 2,
mix = 3,
}
type ControllerParams = {
customerId: number;
campusId: number;
......@@ -64,6 +70,8 @@ type ControllerResponse = {
money: number;
thresholdPrompt: string;
thresholdValue: number;
useType: ShowerUseType;
defaultType: ShowerUseType;
};
export const getShowerController = (
......
src/app.tsx
......@@ -24,6 +24,7 @@ class App extends Component {
*/
config: Config = {
pages: [
'pages/Shower/ShowerAppointment',
'pages/index/index',
'pages/Home/Home',
'pages/Order/OrderPay/OrderPay',
......@@ -40,6 +41,7 @@ class App extends Component {
'pages/Content/Content',
'pages/WebPage/WebPage',
'pages/Shower/Shower',
// 'pages/Shower/ShowerAppointment',
'pages/WaterDispenser/WaterDispenser',
'pages/Account/Account',
],
......
src/pages/Home/Home.tsx
......@@ -38,6 +38,7 @@ import MenuIconNormal from '@/components/MenuIcon/normal/MenuIconNormal';
import MenuIconBlock from '@/components/MenuIcon/block/MenuIconBlock';
import MenuIconBig from '@/components/MenuIcon/big/MenuIconBig';
import { updateServiceList } from '@/store/rootReducers/service';
import { getShowerController, ShowerUseType } from '@/api/shower';
type PageStateProps = {
userinfo: Customer;
......@@ -182,11 +183,34 @@ class Home extends Component {
});
}
goShower() {
goShower = () => {
const { userinfo } = this.props;
getShowerController({
campusId: userinfo.areaId,
customerId: userinfo.customerId,
})
.then(res => {
let data = res.data;
let type =
data.useType === ShowerUseType.mix ? data.defaultType : data.useType;
if (type === ShowerUseType.bluetooth) {
Taro.navigateTo({
url: '/pages/Shower/Shower',
});
} else {
Taro.navigateTo({
url: '/pages/Shower/ShowerAppointment',
});
}
})
.catch(err => {
console.log('getShowerController err:', err);
Taro.showToast({
title: err.msg || '网络错误',
icon: 'none',
});
});
};
goDispenser() {
Taro.navigateTo({
......
src/pages/Login/Login.scss
.Login {
height: 100%;
background: linear-gradient(180deg, #486dec, #b3b8fc);
background: linear-gradient(145deg, #486dec, #b3b8fc);
overflow: hidden;
padding: 0 32px;
.Login-title {
......
src/pages/Shower/Shower.tsx
......@@ -659,7 +659,7 @@ class Shower extends Component {
});
}
checkUserMonry() {
checkUserMoney() {
const { userinfo } = this.props;
return getShowerController({
customerId: userinfo.customerId,
......@@ -727,7 +727,7 @@ class Shower extends Component {
if (!sockedDone) {
this.connectDeviceSocket();
}
this.checkUserMonry()
this.checkUserMoney()
.then(() => this.startDevicesDiscovery())
.then((deviceId: string) => this.createConnection(deviceId))
.then(this.getDeviceServices)
......
src/pages/Shower/ShowerAppointment.scss 0 → 100644
.ShowerAppointment {
display: flex;
flex-direction: column;
height: 100%;
background: linear-gradient(180deg, #486dec, #b3b8fc);
.ShowerAppointment-Searchbox {
height: 100px;
margin: 0 40px 0;
background-color: #fff;
border-radius: 16px;
display: flex;
align-items: center;
input {
padding-left: 40px;
font-size: 24px;
flex: 1;
}
.ShowerAppointment-Searchbox-btn {
font-size: 24px;
margin: 0 40px;
color: #8c95fa;
}
}
.ShowerAppointment-Account {
margin: 28px 40px 34px;
color: #fff;
font-size: 28px;
display: flex;
.ShowerAppointment-Account-item {
display: flex;
height: 34px;
padding: 0 54px;
.name {
margin-right: 20px;
}
&:first-child {
padding-left: 0;
}
&:last-child {
border-left: 1px solid #7791f1;
}
}
}
.ShowerAppointment-Content {
padding: 60px 40px;
background-color: #fff;
flex: 1;
overflow-y: scroll;
.ShowerAppointment-Equipment-title {
font-size: 32px;
color: #333;
font-weight: bolder;
}
.ShowerAppointment-Equipment-info {
margin: 8px 0 22px;
font-size: 24px;
color: #6180f4;
}
.ShowerAppointment-Equipment-item {
position: relative;
font-size: 28px;
color: #333;
height: 158px;
background-color: #f7f8fe;
border-radius: 16px;
padding: 14px 0 0 32px;
margin-bottom: 20px;
&.disabled {
color: #999;
}
.ShowerAppointment-Equipment-row {
display: flex;
margin-bottom: 6px;
line-height: 44px;
.ShowerAppointment-Equipment-name {
margin-right: 32px;
}
.ShowerAppointment-Equipment-value {
width: 312px;
}
}
.ShowerAppointment-Equipment-appoint {
position: absolute;
top: 50px;
right: 0;
width: 136px;
height: 68px;
text-align: center;
line-height: 68px;
background-color: #e4f3da;
color: #6bb11a;
font-size: 32px;
font-weight: bold;
border-radius: 16px 0 0 16px;
}
.ShowerAppointment-Equipment-disabled {
position: absolute;
width: 40px;
height: 40px;
right: 46px;
top: 62px;
}
}
}
.ShowerAppointment-AppointmentList {
flex: 1;
overflow-y: scroll;
padding: 10px 40px 20px;
}
.ShowerAppointment-Footer {
display: flex;
background-color: #fff;
height: 100px;
line-height: 100px;
justify-content: space-around;
font-size: 32px;
color: #999;
box-shadow: 0 -5px 5px -7px #bcbcbc;
.ShowerAppointment-Footer-item {
height: 100%;
&.actived {
position: relative;
color: #456beb;
}
&.actived::before {
content: '';
position: absolute;
left: 50%;
top: 0;
height: 4px;
width: 44px;
background-color: #ffd506;
transform: translate(-50%, 0);
}
}
}
.ShowerAppointment-ToggleBtn {
position: absolute;
box-sizing: border-box;
text-align: right;
right: 0;
top: 120px;
width: 60px;
height: 160px;
color: #fff;
background-color: #474747;
padding: 20px 15px 0;
line-height: 30px;
border-radius: 16px 0 0 16px;
}
}
src/pages/Shower/ShowerAppointment.tsx 0 → 100644
import './ShowerAppointment.scss';
import { View, Input, Text, Image } from '@tarojs/components';
import DisabledIcon from '../../images/shower/ic_jinyuyue@2x.png';
import { useState } from '@tarojs/taro';
import AppointermentCard from './components/AppointermentCard/AppointermentCard';
function ShowerAppointment() {
const [showState, setShowState] = useState(2);
return (
<View className='ShowerAppointment'>
{showState == 1 && (
<View className='ShowerAppointment-Searchbox'>
<Input placeholder='请输入要少选的设备位置' />
<Text className='ShowerAppointment-Searchbox-btn'>开始筛选</Text>
</View>
)}
{showState == 1 && (
<View className='ShowerAppointment-Account'>
<View className='ShowerAppointment-Account-item'>
<Text className='name'>艾米币</Text>
<Text>10.00元</Text>
</View>
<View className='ShowerAppointment-Account-item'>
<Text className='name'>吹风豆</Text>
<Text>22.00元</Text>
</View>
</View>
)}
{showState == 1 && (
<View className='ShowerAppointment-Content'>
<View className='ShowerAppointment-Equipment-title'>设备列表</View>
<View className='ShowerAppointment-Equipment-info'>
如预约未使用,将在12小时内无法再次预约
</View>
<View className='ShowerAppointment-Equipment-item'>
<View className='ShowerAppointment-Equipment-row'>
<Text className='ShowerAppointment-Equipment-name'>设备编码</Text>
<Text className='ShowerAppointment-Equipment-value'>
AB000075
</Text>
</View>
<View className='ShowerAppointment-Equipment-row'>
<Text className='ShowerAppointment-Equipment-name'>设备位置</Text>
<Text className='ShowerAppointment-Equipment-value'>
高新区天赋三街福年广场T2-1812
</Text>
</View>
<View className='ShowerAppointment-Equipment-appoint'>可预约</View>
</View>
<View className='ShowerAppointment-Equipment-item'>
<View className='ShowerAppointment-Equipment-row'>
<Text className='ShowerAppointment-Equipment-name'>设备编码</Text>
<Text className='ShowerAppointment-Equipment-value'>
AB000075
</Text>
</View>
<View className='ShowerAppointment-Equipment-row'>
<Text className='ShowerAppointment-Equipment-name'>设备位置</Text>
<Text className='ShowerAppointment-Equipment-value'>
高新区天赋三街福年广场T2-1812
</Text>
</View>
<View className='ShowerAppointment-Equipment-appoint'>可预约</View>
</View>
<View className='ShowerAppointment-Equipment-item disabled'>
<View className='ShowerAppointment-Equipment-row'>
<Text className='ShowerAppointment-Equipment-name'>设备编码</Text>
<Text className='ShowerAppointment-Equipment-value'>
AB000075
</Text>
</View>
<View className='ShowerAppointment-Equipment-row'>
<Text className='ShowerAppointment-Equipment-name'>设备位置</Text>
<Text className='ShowerAppointment-Equipment-value'>
高新区天赋三街福年广场T2-1812
</Text>
</View>
<Image
className='ShowerAppointment-Equipment-disabled'
src={DisabledIcon}
/>
</View>
<View className='ShowerAppointment-Equipment-item disabled'>
<View className='ShowerAppointment-Equipment-row'>
<Text className='ShowerAppointment-Equipment-name'>设备编码</Text>
<Text className='ShowerAppointment-Equipment-value'>
AB000075
</Text>
</View>
<View className='ShowerAppointment-Equipment-row'>
<Text className='ShowerAppointment-Equipment-name'>设备位置</Text>
<Text className='ShowerAppointment-Equipment-value'>
高新区天赋三街福年广场T2-1812
</Text>
</View>
<Image
className='ShowerAppointment-Equipment-disabled'
src={DisabledIcon}
/>
</View>
<View className='ShowerAppointment-Equipment-item disabled'>
<View className='ShowerAppointment-Equipment-row'>
<Text className='ShowerAppointment-Equipment-name'>设备编码</Text>
<Text className='ShowerAppointment-Equipment-value'>
AB000075
</Text>
</View>
<View className='ShowerAppointment-Equipment-row'>
<Text className='ShowerAppointment-Equipment-name'>设备位置</Text>
<Text className='ShowerAppointment-Equipment-value'>
高新区天赋三街福年广场T2-1812
</Text>
</View>
<Image
className='ShowerAppointment-Equipment-disabled'
src={DisabledIcon}
/>
</View>
</View>
)}
{showState == 1 && (
<View className='ShowerAppointment-ToggleBtn'>自助洗浴</View>
)}
{showState == 2 && (
<View className='ShowerAppointment-AppointmentList'>
<AppointermentCard disabled />
<AppointermentCard />
<AppointermentCard />
<AppointermentCard />
</View>
)}
<View className='ShowerAppointment-Footer'>
<View
className={`ShowerAppointment-Footer-item ${
showState == 1 ? 'actived' : ''
}`}
onClick={() => setShowState(1)}>
洗浴预约
</View>
<View
className={`ShowerAppointment-Footer-item ${
showState == 2 ? 'actived' : ''
}`}
onClick={() => setShowState(2)}>
预约记录
</View>
</View>
</View>
);
}
ShowerAppointment.config = {
navigationBarBackgroundColor: '#486dec',
navigationBarTitleText: '',
};
export default ShowerAppointment;
src/pages/Shower/components/AppointermentCard/AppointermentCard.scss 0 → 100644
.AppointermentCard {
position: relative;
box-sizing: border-box;
height: 370px;
background-color: #fff;
margin-bottom: 20px;
border-radius: 16px;
padding: 50px 48px 0;
overflow: hidden;
box-shadow: 0 0 5px 0 #eee;
&.disabled {
background-color: #e7e7e7;
.AppointermentCard-Time {
background-color: #e2e2e6;
}
.AppointermentCard-Dis-Icon {
position: absolute;
width: 262px;
height: 246px;
right: 0;
bottom: 0;
}
}
.AppointermentCard-Title {
line-height: 40px;
font-size: 32px;
font-weight: bold;
margin-bottom: 20px;
}
.AppointermentCard-row {
display: flex;
line-height: 36px;
font-size: 24px;
margin-bottom: 10px;
text:first-child {
margin-right: 16px;
}
.AppointermentCard-row-location {
width: 440px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.AppointermentCard-Time {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 96px;
line-height: 96px;
text-align: center;
color: #6180f4;
background-color: #fafafe;
border-radius: 0 0 16px 16px;
}
}
src/pages/Shower/components/AppointermentCard/AppointermentCard.tsx 0 → 100644
import './AppointermentCard.scss';
import { View, Text, Image } from '@tarojs/components';
import DisabledIcon from '../../../../images/shower/img_shixiao@2x.png';
type PageOwnProps = {
disabled?: boolean;
};
const AppointermentCard = (props: PageOwnProps) => {
return (
<View className={`AppointermentCard ${props.disabled ? 'disabled' : ''}`}>
<View className='AppointermentCard-Title'>我的预约</View>
<View className='AppointermentCard-row'>
<Text>设备编码:</Text>
<Text>AB00075</Text>
</View>
<View className='AppointermentCard-row'>
<Text>设备位置:</Text>
<Text className='AppointermentCard-row-location'>
高新区天府三街福年广场T2-1812
</Text>
</View>
<View className='AppointermentCard-row'>
<Text>预约生效时间:</Text>
<Text>2019-7-9 18:09:30</Text>
</View>
<View className='AppointermentCard-Time'>
预约失效时间: 2019-7-9 20:03:20
</View>
{props.disabled && <Image className='AppointermentCard-Dis-Icon' src={DisabledIcon} />}
</View>
);
};
export default AppointermentCard;
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