Skip to content

W
wx-school-app
Commit 1661e8b1 by 姜雷
Options

添加订单页面

parent 868f5381
Showing with 330 additions and 157 deletions
global.d.ts
declare module "*.png"; declare module '*.png';
declare module "*.gif"; declare module '*.gif';
declare module "*.jpg"; declare module '*.jpg';
declare module "*.jpeg"; declare module '*.jpeg';
declare module "*.svg"; declare module '*.svg';
declare module "*.css"; declare module '*.css';
declare module "*.less"; declare module '*.less';
declare module "*.scss"; declare module '*.scss';
declare module "*.sass"; declare module '*.sass';
declare module "*.styl"; declare module '*.styl';
src/app.scss
page,
.taro_router, .taro_router,
.taro_page { .taro_page {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.flex {
display: flex;
}
src/app.tsx
...@@ -26,15 +26,16 @@ class App extends Component { ...@@ -26,15 +26,16 @@ class App extends Component {
*/ */
config: Config = { config: Config = {
pages: [ pages: [
'pages/Order/OrderList/OrderList',
'pages/Register/Register',
'pages/index/index', 'pages/index/index',
'pages/Login/Login', 'pages/Login/Login',
'pages/CheckTelephone/CheckTelephone', 'pages/CheckTelephone/CheckTelephone',
'pages/Register/Register',
], ],
window: { window: {
backgroundTextStyle: 'light', backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff', navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat', navigationBarTitleText: '多彩校园',
navigationBarTextStyle: 'black', navigationBarTextStyle: 'black',
}, },
}; };
......
src/pages/CheckTelephone/CheckTelephone.scss
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background: url('../../images/login/bg@2x.png') center; // background: url('../../images/login/bg@2x.png') center;
background-size: cover; background-size: cover;
} }
.loginBox { .loginBox {
......
src/pages/Order/OrderList/OrderList.scss 0 → 100644
.OrderList {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
.Tab {
position: absolute;
top: 0;
display: flex;
background-color: #fff;
width: 100%;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 30px;
.Tab-item {
width: 50%;
color: #999;
}
.Tab-item.active {
color: #333;
border-bottom: 4px solid #6180f4;
}
}
.OrderList-Content {
box-sizing: border-box;
height: 100%;
padding-top: 80px;
background-color: #eee;
}
}
src/pages/Order/OrderList/OrderList.tsx 0 → 100644
import { ComponentClass } from 'react';
import Taro, { Component, Config } from '@tarojs/taro';
import { View, Button, Text, ScrollView } from '@tarojs/components';
import OrderItem from '../components/OrderItem/OrderItem';
import './OrderList.scss';
type PageOwnProps = {};
type PageState = {};
class OrderList extends Component {
config: Config = {
navigationBarTitleText: '订单',
};
render() {
return (
<View className='OrderList'>
<View className='Tab'>
<Text className='Tab-item active'>待付款</Text>
<Text className='Tab-item'>全部</Text>
</View>
<ScrollView
className='OrderList-Content'
scrollY
scrollWithAnimation
scrollTop={0}>
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
<OrderItem />
</ScrollView>
</View>
);
}
}
export default OrderList as ComponentClass<PageOwnProps, PageState>;
src/pages/Order/components/OrderItem/OrderItem.scss 0 → 100644
.OrderItem {
position: relative;
box-sizing: border-box;
width: 702px;
height: 142px;
margin: 20px auto;
background-color: #fff;
border-radius: 8px;
padding: 19px 26px 15px;
font-size: 26px;
.OrderItem-text {
height: 54px;
line-height: 54px;
}
.OrderItem-price {
position: absolute;
top: 29px;
right: 26px;
font-size: 36px;
}
}
src/pages/Order/components/OrderItem/OrderItem.tsx 0 → 100644
import { ComponentClass } from 'react';
import Taro, { Component, Config } from '@tarojs/taro';
import { View, Button, Text, ScrollView } from '@tarojs/components';
import './OrderItem.scss';
type PageOwnProps = {};
type PageState = {};
interface OrderItemProps {
id: number;
}
class OrderItem extends Component<OrderItemProps> {
render() {
return (
<View className='OrderItem'>
<View className='OrderItem-text'>
<Text>消费说明：</Text>
<Text>饮水消费</Text>
</View>
<View className='OrderItem-text'>
<Text>消费时间：</Text>
<Text>2018-12-01 17:30:23</Text>
</View>
<View className='OrderItem-price'>￥ 0.12</View>
<View>去支付</View>
</View>
);
}
}
export default OrderItem as ComponentClass<PageOwnProps, PageState>;
src/pages/Register/Register.scss
.loginBox.registerBox { .Register {
height: auto; width: 100%;
padding-bottom: 50px; height: 100%;
.loginBox-input-select { .Register-bg {
box-sizing: border-box; height: 500px;
position: relative; background-color: #ee7d1f;
background-color: #fff;
width: 100%;
height: 88px;
padding: 0 20px;
font-size: 30px;
margin-bottom: 50px;
border-radius: 8px;
color: #d9a842;
.hasName {
color: #ff9000;
}
} }
.loginBox-input-selectArrow { .registerBox {
position: absolute; position: absolute;
width: 30px; top: 30px;
height: 30px; left: 50%;
right: 20px; transform: translate(-300px);
top: 50%; width: 600px;
transform: translateY(-15px); height: 1200px;
} background-color: #fff;
.popup-title { margin: 0 auto;
height: 50px; border-radius: 8px;
line-height: 50px; .registerBox-title {
display: flex; display: flex;
justify-content: space-between; .registerBox-icon {
.popup-btn { width: 40px;
padding: 0 30px; height: 40px;
} }
}
.sexBox {
display: flex;
flex-direction: row;
color: #d9a842;
}
.choose-item {
display: inline-block;
align-items: center;
font-size: 30px;
margin-right: 50px;
.choose-name {
padding: 0 5px;
}
.choose-icon {
display: inline-block;
width: 25px;
height: 25px;
border: 1px solid #666;
border-radius: 50%;
vertical-align: middle;
position: relative;
}
.radioZT {
display: none;
} }
.choose-icon.checked { .registerBox-item {
border-color: #ee7d1f; height: 60px;
line-height: 60px;
border-bottom: 1px solid #eee;
} }
.choose-icon.checked::after { .sexBox{
content: ''; width: 200px;
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #ee7d1f;
transform: scale(0.5);
} }
} }
.weui-cells_checkbox .weui-icon-checked:before,
.choose-item.checked {
color: #ee7d1f;
}
} }
// .registerBox {
// height: auto;
// padding-bottom: 50px;
// .loginBox-input-select {
// box-sizing: border-box;
// position: relative;
// background-color: #fff;
// width: 100%;
// height: 88px;
// padding: 0 20px;
// font-size: 30px;
// margin-bottom: 50px;
// border-radius: 8px;
// color: #d9a842;
// .hasName {
// color: #ff9000;
// }
// }
// .loginBox-input-selectArrow {
// position: absolute;
// width: 30px;
// height: 30px;
// right: 20px;
// top: 50%;
// transform: translateY(-15px);
// }
// .popup-title {
// height: 50px;
// line-height: 50px;
// display: flex;
// justify-content: space-between;
// .popup-btn {
// padding: 0 30px;
// }
// }
// .sexBox {
// display: flex;
// flex-direction: row;
// color: #d9a842;
// }
// .choose-item {
// display: inline-block;
// align-items: center;
// font-size: 30px;
// margin-right: 50px;
// .choose-name {
// padding: 0 5px;
// }
// .choose-icon {
// display: inline-block;
// width: 25px;
// height: 25px;
// border: 1px solid #666;
// border-radius: 50%;
// vertical-align: middle;
// position: relative;
// }
// .radioZT {
// display: none;
// }
// .choose-icon.checked {
// border-color: #ee7d1f;
// }
// .choose-icon.checked::after {
// content: '';
// display: block;
// width: 100%;
// height: 100%;
// border-radius: 50%;
// background-color: #ee7d1f;
// transform: scale(0.5);
// }
// }
// .weui-cells_checkbox .weui-icon-checked:before,
// .choose-item.checked {
// color: #ee7d1f;
// }
// }
src/pages/Register/Register.tsx
import { ComponentClass } from 'react'; import { ComponentClass } from 'react';
import Taro, { Component } from '@tarojs/taro'; import Taro, { Component, Config } from '@tarojs/taro';
import { import {
View, View,
Text, Text,
Image,
Button, Button,
Input, Input,
RadioGroup, RadioGroup,
...@@ -25,6 +26,12 @@ interface Register { ...@@ -25,6 +26,12 @@ interface Register {
} }
class Register extends Component { class Register extends Component {
config: Config = {
navigationBarBackgroundColor: '#ee7d1f',
navigationBarTextStyle: 'white',
navigationBarTitleText: '注册',
};
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
...@@ -47,70 +54,60 @@ class Register extends Component { ...@@ -47,70 +54,60 @@ class Register extends Component {
render() { render() {
const { name, sex } = this.state; const { name, sex } = this.state;
return ( return (
<View className='checkTelephone'> <View className='Register'>
<View className='loginBox registerBox'> <View className='Register-bg' />
<View <View className='registerBox'>
className='loginBox-input-select' <View className='registerBox-title'>
onClick={this.showCampusSelector}> <Image className='registerBox-icon' src='' />
{/* <template v-if="userInfo.campusId"> <Text>基本信息</Text>
<Text className="hasName">{{userInfo.campusName}}</Text>
</template>
<template v-else>
<Text>请输入您所在的校区</Text>
<View className="loginBox-input-selectArrow">
<img
src="../../../images/login/right-Arr@2x.png"
alt
/>
</View>
</template> */}
</View> </View>
<Input <View className='registerBox-item flex'>
className='loginBox-input'
value={name}
onInput={this.updateName}
placeholder='输入您的姓名'
maxLength={20}
/>
<Input
className='loginBox-input'
password
placeholder='输入您的密码'
maxLength={20}
/>
<RadioGroup className='loginBox-input sexBox' onChange={this.setSex}>
<Label className={`choose-item ${sex == 'Male' ? 'checked' : ''}`}>
<Radio value='Male'>男</Radio>
</Label>
<Label
className={`choose-item ${sex == 'Female' ? 'checked' : ''}`}>
<Radio value='Female'>女</Radio>
</Label>
</RadioGroup>
{/* <View :className="{'choose-item': true, checked: checkMale }">
<Text className="choose-name">男</Text>
<Text :className="{'choose-icon': true, checked: checkMale }"></Text>
<Input <Input
name="sex" className='loginBox-input'
value="Male" value={name}
type="radio" onInput={this.updateName}
className="radioZT" placeholder='输入您的姓名'
v-model="sex" maxLength={20}
/> />
</View> */} <RadioGroup
{/* <View :className="{'choose-item': true, checked: checkFemale}"> className='loginBox-input sexBox'
<Text className="choose-name">女</Text> onChange={this.setSex}>
<Text :className="{'choose-icon': true, checked: checkFemale}"></Text> <Label
className={`choose-item ${sex == 'Male' ? 'checked' : ''}`}>
<Radio value='Male'>男</Radio>
</Label>
<Label
className={`choose-item ${sex == 'Female' ? 'checked' : ''}`}>
<Radio value='Female'>女</Radio>
</Label>
</RadioGroup>
</View>
<View className='registerBox-item'>
<Input <Input
name="sex" className='loginBox-input'
value="Female" placeholder='请输入注册的手机号码'
type="radio" maxLength={20}
className="radioZT"
v-model="sex"
/> />
</View> */} </View>
<Button className='loginBox-button big' onClick={this.getRegister}> <View className='registerBox-item'>
注册 <Input
className='loginBox-input'
password
placeholder='请输入验证码'
maxLength={20}
/>
<Text>获取验证码</Text>
</View>
<View className='registerBox-title'>
<Image className='registerBox-icon' src='' />
<Text>密码设置</Text>
</View>
<View className='registerBox-title'>
<Image className='registerBox-icon' src='' />
<Text>区域信息</Text>
</View>
<Button className='registerBox-button big' onClick={this.getRegister}>
确 认
</Button> </Button>
</View> </View>
</View> </View>
......
src/pages/index/index.tsx
...@@ -48,31 +48,25 @@ class Index extends Component { ...@@ -48,31 +48,25 @@ class Index extends Component {
* 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型 * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
*/ */
config: Config = { config: Config = {
navigationBarTitleText: '首页',
}; };
componentWillReceiveProps(nextProps: IProps) { componentWillMount() {
console.log(this.props, nextProps); Taro.login({
success(res) {
console.log(res);
},
});
} }
componentWillUnmount() {}
componentDidShow() {}
componentDidHide() {}
navToLogin() { navToLogin() {
Taro.navigateTo({ Taro.navigateTo({
url: '/pages/Login/Login', url: '/pages/Register/Register',
}); });
} }
render() { render() {
return ( return (
<View className='index'> <View className='index'>
<View> <View>
<Text>{this.props.counter.num}</Text>
</View>
<View>
<Text>Hello, World</Text> <Text>Hello, World</Text>
</View> </View>
<Button className='dec_btn' onClick={this.navToLogin}> <Button className='dec_btn' onClick={this.navToLogin}>
......
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