Skip to content

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

添加订单页面

parent 868f5381
Showing with 313 additions and 140 deletions
global.d.ts
declare module "*.png";
declare module "*.gif";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.svg";
declare module "*.css";
declare module "*.less";
declare module "*.scss";
declare module "*.sass";
declare module "*.styl";
declare module '*.png';
declare module '*.gif';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.svg';
declare module '*.css';
declare module '*.less';
declare module '*.scss';
declare module '*.sass';
declare module '*.styl';
src/app.scss
page,
.taro_router,
.taro_page {
width: 100%;
height: 100%;
}
.flex {
display: flex;
}
src/app.tsx
......@@ -26,15 +26,16 @@ class App extends Component {
*/
config: Config = {
pages: [
'pages/Order/OrderList/OrderList',
'pages/Register/Register',
'pages/index/index',
'pages/Login/Login',
'pages/CheckTelephone/CheckTelephone',
'pages/Register/Register',
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTitleText: '多彩校园',
navigationBarTextStyle: 'black',
},
};
......
src/pages/CheckTelephone/CheckTelephone.scss
......@@ -2,7 +2,7 @@
width: 100%;
height: 100%;
overflow: hidden;
background: url('../../images/login/bg@2x.png') center;
// background: url('../../images/login/bg@2x.png') center;
background-size: cover;
}
.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 {
height: auto;
padding-bottom: 50px;
.loginBox-input-select {
box-sizing: border-box;
position: relative;
background-color: #fff;
.Register {
width: 100%;
height: 88px;
padding: 0 20px;
font-size: 30px;
margin-bottom: 50px;
border-radius: 8px;
color: #d9a842;
.hasName {
color: #ff9000;
}
height: 100%;
.Register-bg {
height: 500px;
background-color: #ee7d1f;
}
.loginBox-input-selectArrow {
.registerBox {
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 {
top: 30px;
left: 50%;
transform: translate(-300px);
width: 600px;
height: 1200px;
background-color: #fff;
margin: 0 auto;
border-radius: 8px;
.registerBox-title {
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;
.registerBox-icon {
width: 40px;
height: 40px;
}
.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);
.registerBox-item {
height: 60px;
line-height: 60px;
border-bottom: 1px solid #eee;
}
.sexBox{
width: 200px;
}
.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 Taro, { Component } from '@tarojs/taro';
import Taro, { Component, Config } from '@tarojs/taro';
import {
View,
Text,
Image,
Button,
Input,
RadioGroup,
......@@ -25,6 +26,12 @@ interface Register {
}
class Register extends Component {
config: Config = {
navigationBarBackgroundColor: '#ee7d1f',
navigationBarTextStyle: 'white',
navigationBarTitleText: '注册',
};
constructor(props) {
super(props);
this.state = {
......@@ -47,24 +54,14 @@ class Register extends Component {
render() {
const { name, sex } = this.state;
return (
<View className='checkTelephone'>
<View className='loginBox registerBox'>
<View
className='loginBox-input-select'
onClick={this.showCampusSelector}>
{/* <template v-if="userInfo.campusId">
<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 className='Register'>
<View className='Register-bg' />
<View className='registerBox'>
<View className='registerBox-title'>
<Image className='registerBox-icon' src='' />
<Text>基本信息</Text>
</View>
<View className='registerBox-item flex'>
<Input
className='loginBox-input'
value={name}
......@@ -72,14 +69,11 @@ class Register extends Component {
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' : ''}`}>
<RadioGroup
className='loginBox-input sexBox'
onChange={this.setSex}>
<Label
className={`choose-item ${sex == 'Male' ? 'checked' : ''}`}>
<Radio value='Male'>男</Radio>
</Label>
<Label
......@@ -87,30 +81,33 @@ class Register extends Component {
<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>
</View>
<View className='registerBox-item'>
<Input
name="sex"
value="Male"
type="radio"
className="radioZT"
v-model="sex"
className='loginBox-input'
placeholder='请输入注册的手机号码'
maxLength={20}
/>
</View> */}
{/* <View :className="{'choose-item': true, checked: checkFemale}">
<Text className="choose-name">女</Text>
<Text :className="{'choose-icon': true, checked: checkFemale}"></Text>
</View>
<View className='registerBox-item'>
<Input
name="sex"
value="Female"
type="radio"
className="radioZT"
v-model="sex"
className='loginBox-input'
password
placeholder='请输入验证码'
maxLength={20}
/>
</View> */}
<Button className='loginBox-button big' onClick={this.getRegister}>
注册
<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>
</View>
</View>
......
src/pages/index/index.tsx
......@@ -48,31 +48,25 @@ class Index extends Component {
* 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
*/
config: Config = {
navigationBarTitleText: '首页',
};
componentWillReceiveProps(nextProps: IProps) {
console.log(this.props, nextProps);
componentWillMount() {
Taro.login({
success(res) {
console.log(res);
},
});
}
componentWillUnmount() {}
componentDidShow() {}
componentDidHide() {}
navToLogin() {
Taro.navigateTo({
url: '/pages/Login/Login',
url: '/pages/Register/Register',
});
}
render() {
return (
<View className='index'>
<View>
<Text>{this.props.counter.num}</Text>
</View>
<View>
<Text>Hello, World</Text>
</View>
<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