Skip to content

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

修改首页豆展示

parent 9546f8ed
Showing with 89 additions and 37 deletions
src/images/home/img_bg@2x.png
src/images/home/img_bg@2x.png

33.2 KB | W: | H:

src/images/home/img_bg@2x.png

42.5 KB | W: | H:

src/images/home/img_bg@2x.png
src/images/home/img_bg@2x.png
src/images/home/img_bg@2x.png
src/images/home/img_bg@2x.png
  • 2-up
  • Swipe
  • Onion skin
src/pages/Home/Home.scss
......@@ -30,12 +30,15 @@
.Home-UserBox {
position: relative;
height: 390px;
// height: 390px;
padding: 0 0 40px;
margin: 0 32px;
box-sizing: content-box;
.bg {
height: 390px;
&.big {
height: 428px;
}
}
.Home-UserBox-Setting {
position: absolute;
......@@ -73,12 +76,14 @@
margin: 0 auto;
}
.Home-UserBox-Bean {
padding: 32px 40px 0;
padding: 32px 40px 70px;
display: flex;
justify-content: space-around;
flex-flow: wrap;
font-size: 24px;
color: #666;
.Home-UserBox-BeanItem {
width: 40%;
display: flex;
align-items: center;
}
......
src/pages/Home/Home.tsx
......@@ -7,8 +7,10 @@ import ArrowIcon from '../../images/home/icon_dingdan@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';
import AimiIcon from '../../images/home/ic_aimi@2x.png';
import HBeanIcon from '../../images/home/icon_chuifengdou@2x.png';
import TBeanIcon from '../../images/home/icon_tongyongdou@2x.png';
import WBeanIcon from '../../images/home/ic_yinshui@2x.png';
import SBeanIcon from '../../images/home/ic_xiyu@2x.png';
import UserHeaderM from '../../images/home/img_boy_touxiang@2x.png';
import UserHeaderF from '../../images/home/img_girl_touxiang@2x.png';
import WaterIconNormal from '../../images/menu/ic_zizhu@2x.png';
......@@ -50,8 +52,7 @@ type PageDispatchProps = {
type PageState = {
barMenuVisiable: boolean;
commBean: number;
hairDryerBean: number;
beanAccount: { money: number; serviceId: string }[];
annItem: SectionItem;
serviceList: Service[];
};
......@@ -76,8 +77,7 @@ class Home extends Component {
super(props);
this.state = {
barMenuVisiable: false,
commBean: 0.0,
hairDryerBean: 0.0,
beanAccount: [],
serviceList: [
// { serviceId: 3, serviceName: '饮水' },
// { serviceId: 4, serviceName: '吹风' },
......@@ -152,13 +152,12 @@ class Home extends Component {
})
.then(res => {
const data = res.data;
let commBeanItem = data.find(item => item.serviceId === '1');
let hairDryerBeanItem = data.find(item => item.serviceId === '4');
let commBean = commBeanItem ? commBeanItem.money : 0.0;
let hairDryerBean = hairDryerBeanItem ? hairDryerBeanItem.money : 0.0;
// let commBeanItem = data.find(item => item.serviceId === '1');
// let hairDryerBeanItem = data.find(item => item.serviceId === '4');
// let commBean = commBeanItem ? commBeanItem.money : 0.0;
// let hairDryerBean = hairDryerBeanItem ? hairDryerBeanItem.money : 0.0;
this.setState({
commBean,
hairDryerBean,
beanAccount: data,
});
})
.catch(console.error);
......@@ -234,13 +233,20 @@ class Home extends Component {
render() {
const { userinfo } = this.props;
const {
commBean,
hairDryerBean,
annItem,
barMenuVisiable,
serviceList,
} = this.state;
const { beanAccount, annItem, barMenuVisiable, serviceList } = this.state;
let aimiItem = beanAccount.find(item => item.serviceId === '0');
let cfItem = beanAccount.find(
item => item.serviceId === '4' || item.serviceId === '12',
);
let xyItem = beanAccount.find(
item => item.serviceId === '5' || item.serviceId === '10',
);
let ysItem = beanAccount.find(
item =>
item.serviceId === '3' ||
item.serviceId === '11' ||
item.serviceId === '9',
);
return (
<View className='Home'>
{barMenuVisiable ? (
......@@ -260,7 +266,10 @@ class Home extends Component {
src={SettingIcon}
onClick={this.toggleBarMenu}
/>
<Image className='bg' src={UserBoxBg} />
<Image
className={`bg ${serviceList.length >= 2 ? 'big' : ''}`}
src={UserBoxBg}
/>
<View className='Home-UserBox-info'>
<View className='Home-UserBox-other'>
<View className='Home-UserBox-name'>{userinfo.customerName}</View>
......@@ -285,21 +294,59 @@ class Home extends Component {
</View>
<View className='Home-UserBox-line' />
<View className='Home-UserBox-Bean'>
<View className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={HBeanIcon} />
<Text>吹风豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{hairDryerBean.toFixed(2)}
</Text>
</View>
<View className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={TBeanIcon} />
<Text>通用豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{commBean.toFixed(2)}
</Text>
</View>
{aimiItem && (
<View className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={AimiIcon} />
<Text>艾米豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{aimiItem ? aimiItem.money.toFixed(2) : '0.00'}
</Text>
</View>
)}
{serviceList &&
serviceList.length &&
beanAccount &&
beanAccount.length &&
serviceList.map(service =>
service.serviceId === 3 ||
service.serviceId === 11 ||
service.serviceId === 9 ? (
<View
key={service.serviceId}
className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={WBeanIcon} />
<Text>饮水豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{ysItem ? ysItem.money.toFixed(2) : '0.00'}
</Text>
</View>
) : service.serviceId === 4 || service.serviceId === 12 ? (
<View
key={service.serviceId}
className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={HBeanIcon} />
<Text>吹风豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{cfItem ? cfItem.money.toFixed(2) : '0.00'}
</Text>
</View>
) : service.serviceId === 5 || service.serviceId === 10 ? (
<View
key={service.serviceId}
className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={SBeanIcon} />
<Text>洗浴豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{xyItem ? xyItem.money.toFixed(2) : '0.00'}
</Text>
</View>
) : null,
)}
{serviceList && serviceList.length % 2 ? (
<View className='Home-UserBox-BeanItem' />
) : null}
</View>
<View className='Home-UserBox-Order'>
<Text className='Home-UserBox-Order-text'>我的订单</Text>
<View className='Home-UserBox-Order-right' onClick={this.goOrder}>
......
src/pages/Shower/Shower.tsx
......@@ -608,8 +608,8 @@ class Shower extends Component {
});
}
startUseShower(reConnect) {
if (reConnect) {
startUseShower(reConnect: boolean) {
if (!reConnect) {
Taro.showLoading({
title: '开启中',
mask: true,
......
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