Commit 2e812bd8 by 姜雷

完成部分页面

parent 1661e8b1
......@@ -2,7 +2,7 @@
"miniprogramRoot": "./dist",
"projectname": "wx-school-app",
"description": "",
"appid": "touristappid",
"appid": "wxf2cac8f84183c8fc",
"setting": {
"urlCheck": true,
"es6": false,
......
......@@ -3,7 +3,19 @@ page,
.taro_page {
width: 100%;
height: 100%;
font-size: 28px;
}
.flex {
display: flex;
}
button {
height: 82px;
line-height: 82px;
font-size: 28px;
background-color: #6180f4;
color: #fff;
}
.button-hover {
background-color: #456beb;
color: #fff;
}
......@@ -26,11 +26,14 @@ 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',
'pages/index/index',
'pages/Feedback/Feedback',
'pages/Order/OrderDetail/OrderDetail',
'pages/Order/OrderPay/OrderPay',
'pages/Order/OrderList/OrderList',
],
window: {
backgroundTextStyle: 'light',
......
type globalData = {
APP_ID: string;
};
const globalData = {
APP_ID: '',
};
export function set(key, val) {
globalData[key] = val;
}
export function get(key) {
return globalData[key];
}
.Feedback {
height: 100%;
background-color: #eee;
.Feedback-input {
border-top: 1px solid #eee;
background-color: #fff;
box-sizing: border-box;
padding: 20px;
width: 100%;
height: 468px;
font-size: 28px;
}
.Feedback-btn {
margin: 40px 32px 0;
}
}
import { ComponentClass } from 'react';
import Taro, { Component, Config } from '@tarojs/taro';
import { View, Textarea, Button } from '@tarojs/components';
type PageProps = {};
type PageState = {
text: string;
};
class Feedback extends Component<PageProps, PageState> {
config: Config = {
navigationBarTitleText: '意见反馈',
};
constructor(props) {
super(props);
this.state = {
text: '',
};
}
render() {
return (
<View className='Feedback'>
<Textarea
className='Feedback-input'
value={this.state.text}
placeholder='反馈问题不超过50字'
/>
<Button className='Feedback-btn'>提交</Button>
</View>
);
}
}
export default Feedback as ComponentClass<PageProps, PageState>;
.loadingBox {
margin: 50px auto;
padding: 50px;
.Login {
height: 100%;
background: linear-gradient(180deg, #486dec, #b3b8fc);
overflow: hidden;
padding: 0 32px;
.Login-title {
margin-top: 168px;
color: #fff;
font-size: 48px;
}
.Login-loginWay-tab {
margin-top: 60px;
margin-bottom: 44px;
}
.Login-loginWay-item {
color: #c2cef9;
font-size: 32px;
margin-right: 28px;
}
.Login-loginWay-item.active {
color: #fff;
font-size: 40px;
}
.Login-input {
height: 96px;
line-height: 96px;
background-color: #b2bff8;
color: #fff;
font-size: 28px;
border-radius: 24px;
padding-left: 52px;
margin-bottom: 24px;
}
.Login-regist {
text-align: right;
color: #c2cef9;
margin-bottom: 52px;
}
.Login-btn {
background-color: #fff;
color: #456beb;
border-radius: 24px;
}
}
import { ComponentClass } from 'react';
import Taro, { Component, Config } from '@tarojs/taro';
import { View, Button, Text } from '@tarojs/components';
import { View, Button, Text, Input } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import './Login.scss';
......@@ -27,7 +27,7 @@ interface Login {
}))
class Login extends Component {
config: Config = {
navigationBarTitleText: '登录',
navigationBarTitleText: '多彩校园',
};
constructor(props) {
......@@ -37,30 +37,23 @@ class Login extends Component {
};
}
componentWillMount() {
const { code } = this.$router.params;
if (code) {
this.setState({
loadingText: '微信授权中...',
});
setTimeout(() => {
console.log('跳转注册页');
Taro.navigateTo({
url: '/pages/CheckTelephone/CheckTelephone',
});
}, 3000);
} else {
console.log('跳转微信授权接口');
const { APP_ID } = this.props;
console.log(APP_ID);
let rUrl = encodeURIComponent(window.location.href.split('#')[0]);
// window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APP_ID}&redirect_uri=${rUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
}
}
componentWillMount() {}
render() {
const { loadingText } = this.state;
return <View className='loadingBox'>{loadingText}</View>;
return (
<View className='Login'>
<View className='Login-title'>欢迎来到多彩校园</View>
<View className='Login-loginWay-tab'>
<Text className='Login-loginWay-item active'>账号登录</Text>
<Text className='Login-loginWay-item'>手机号登录</Text>
</View>
<Input className='Login-input' placeholder='请输入账号手机号' />
<Input className='Login-input' password placeholder='请输入密码' />
<View className='Login-regist'>还没有账号?注册</View>
<Button className='Login-btn'>登录</Button>
</View>
);
}
}
......
page {
height: auto;
}
.OrderDetail {
padding: 0 32px;
.OrderDetail-title {
margin-top: 42px;
display: flex;
justify-content: center;
font-size: 28px;
.OrderDetail-icon {
width: 42px;
height: 36px;
margin-right: 16px;
}
}
.OrderDetail-price {
margin-top: 10px;
margin-bottom: 30px;
text-align: center;
font-size: 48px;
}
.OrderDetail-payinfo {
display: flex;
height: 60px;
line-height: 60px;
justify-content: space-between;
font-size: 28px;
color: #333;
}
.OrderDetail-line {
margin: 10px auto;
width: 686px;
border: 1px dotted #eee;
}
}
import { ComponentClass } from 'react';
import Taro, { Component, Config } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import OrderTitle from '../components/OrderTitle/OrderTitle';
import OrderInfo from '../components/OrderInfo/OrderInfo';
import comLogo from '../../../images/order/pay_logo_icon@2x.png';
import './OrderDetail.scss';
type pageProps = {};
class OrderDetail extends Component {
config: Config = {
navigationBarTitleText: '订单详情',
};
render() {
return (
<View className='OrderDetail'>
<OrderTitle />
<OrderInfo />
<View className='OrderDetail-line' />
<View className='OrderDetail-payinfo'>
<Text>支付金额</Text>
<Text>0.08</Text>
</View>
<View className='OrderDetail-payinfo'>
<Text>通用豆抵扣</Text>
<Text>0.03</Text>
</View>
<View className='OrderDetail-payinfo'>
<Text>支付方式</Text>
<Text>微信</Text>
</View>
<View className='OrderDetail-payinfo'>
<Text>支付时间</Text>
<Text>2018-12-05 </Text>
</View>
<View className='OrderDetail-payinfo'>
<Text>交易单号</Text>
<Text>1256456165158485146</Text>
</View>
</View>
);
}
}
export default OrderDetail as ComponentClass<pageProps>;
import { ComponentClass } from 'react';
import Taro, { Component, Config } from '@tarojs/taro';
import { View, Button, Text, ScrollView } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import OrderItem from '../components/OrderItem/OrderItem';
import './OrderList.scss';
import { toggleOrderState } from './actions';
import { StoreState } from './store';
type PageStateProps = {
OrderList: StoreState;
};
type PageDispatchProps = {
toggleOrderState: (state: String) => void;
};
type PageOwnProps = {};
type PageState = {};
type PageProps = PageStateProps & PageDispatchProps & PageOwnProps;
interface OrderList {
props: PageProps;
}
@connect(
({ OrderList }) => ({
OrderList,
}),
dispatch => ({
toggleOrderState(state: String) {
dispatch(toggleOrderState(state));
},
}),
)
class OrderList extends Component {
config: Config = {
navigationBarTitleText: '订单',
};
constructor(props: PageProps) {
super(props);
this.state = {};
}
render() {
const {
OrderList: { orderState },
toggleOrderState,
} = this.props;
return (
<View className='OrderList'>
<View className='Tab'>
<Text className='Tab-item active'>待付款</Text>
<Text className='Tab-item'>全部</Text>
<Text
className={`Tab-item ${orderState === '1' ? 'active' : ''}`}
onClick={() => toggleOrderState('1')}>
待付款
</Text>
<Text
className={`Tab-item ${orderState === 'all' ? 'active' : ''}`}
onClick={() => toggleOrderState('all')}>
全部
</Text>
</View>
<ScrollView
className='OrderList-Content'
......@@ -54,4 +96,4 @@ class OrderList extends Component {
}
}
export default OrderList as ComponentClass<PageOwnProps, PageState>;
export default OrderList as ComponentClass<PageOwnProps>;
import Actions from '../../../types/Store/Actions';
export const TOGGLE_ORDER_STATE = 'TOGGLE_ORDER_STATE';
export const toggleOrderState = (state: String): Actions => ({
type: TOGGLE_ORDER_STATE,
payload: state,
});
import Actions from '../../../types/Store/Actions';
import Order from '../../../types/Order/Order';
import { TOGGLE_ORDER_STATE } from './actions';
export interface StoreState {
orderState: String;
payList: Order[];
allList: Order[];
}
const INITIAL_STATE = {
orderState: '1',
payList: [],
allList: [],
};
export default function OrderList(
state: StoreState = INITIAL_STATE,
actions: Actions,
) {
switch (actions.type) {
case TOGGLE_ORDER_STATE:
return {
...state,
orderState: actions.payload,
};
default:
return state;
}
}
.OrderPay {
padding: 0 32px;
.OrderPay-title {
margin-top: 42px;
display: flex;
justify-content: center;
font-size: 28px;
.OrderPay-icon {
width: 42px;
height: 36px;
margin-right: 16px;
}
}
.OrderPay-price {
margin-top: 10px;
margin-bottom: 30px;
text-align: center;
font-size: 48px;
}
.OrderPay-payway {
display: flex;
align-items: center;
height: 80px;
font-size: 28px;
.OrderPay-icon {
width: 40px;
height: 40px;
margin-right: 20px;
}
.OrderPay-text {
flex: 1;
}
.OrderPay-check {
box-sizing: border-box;
width: 28px;
height: 28px;
border: 6px solid #c8c8c8;
border-radius: 50%;
}
}
.OrderPay-next {
margin-top: 40px;
}
}
import { ComponentClass } from 'react';
import Taro, { Component, Config } from '@tarojs/taro';
import { View, Text, Image, Button } from '@tarojs/components';
import OrderTitle from '../components/OrderTitle/OrderTitle';
import OrderInfo from '../components/OrderInfo/OrderInfo';
import payWayLogo from '../../../images/order/pay_wechat_icon@2x.png';
import './OrderPay.scss';
type pageProps = {};
class OrderPay extends Component {
config: Config = {
navigationBarTitleText: '订单支付',
};
render() {
return (
<View className='OrderPay'>
<OrderTitle />
<OrderInfo />
<View className='OrderPay-line' />
<View className='OrderPay-payway'>
<Image className='OrderPay-icon' src={payWayLogo} />
<Text className='OrderPay-text'>微信支付</Text>
<View className='OrderPay-check' />
</View>
<Button className='button OrderPay-next'>下一步</Button>
</View>
);
}
}
export default OrderPay as ComponentClass<pageProps>;
.OrderDetail-info,
.OrderDetail-payinfo {
display: flex;
height: 60px;
line-height: 60px;
justify-content: space-between;
font-size: 28px;
color: #666;
}
import { ComponentClass } from 'react';
import Taro, { Component } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import './OrderInfo.scss';
class OrderInfo extends Component {
render() {
return (
<View>
<View className='OrderDetail-info'>
<Text>商品说明</Text>
<Text>吹风消费</Text>
</View>
<View className='OrderDetail-info'>
<Text>消费时间</Text>
<Text>2018-12-05 23:59:59</Text>
</View>
<View className='OrderDetail-info'>
<Text>订单号</Text>
<Text>gfj23oi234kjf34ihruih</Text>
</View>
<View className='OrderDetail-info'>
<Text>所属区域</Text>
<Text>成都师范学院</Text>
</View>
<View className='OrderDetail-info'>
<Text>设备编号</Text>
<Text>SN10000089078</Text>
</View>
<View className='OrderDetail-info'>
<Text>设备位置</Text>
<Text>天信元A幢1栋2302门口</Text>
</View>
</View>
);
}
}
export default OrderInfo as ComponentClass;
......@@ -18,4 +18,21 @@
right: 26px;
font-size: 36px;
}
.OrderItem-price.topay {
color: #ff4e4e;
}
.OrderItem-toPay {
position: absolute;
top: 66px;
right: 26px;
font-size: 24px;
color: #ff8706;
}
.OrderItem-payDone {
position: absolute;
width: 102px;
height: 94px;
right: 10px;
bottom: 10px;
}
}
import { ComponentClass } from 'react';
import Taro, { Component, Config } from '@tarojs/taro';
import { View, Button, Text, ScrollView } from '@tarojs/components';
import Taro, { Component } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import payDoneImg from '../../../../images/order/dingdan_yiwancheng_img@2x.png';
import './OrderItem.scss';
type PageOwnProps = {};
......@@ -9,10 +9,12 @@ type PageState = {};
interface OrderItemProps {
id: number;
orderState: string;
}
class OrderItem extends Component<OrderItemProps> {
render() {
const { orderState } = this.props;
return (
<View className='OrderItem'>
<View className='OrderItem-text'>
......@@ -22,9 +24,16 @@ class OrderItem extends Component<OrderItemProps> {
<View className='OrderItem-text'>
<Text>消费时间:</Text>
<Text>2018-12-01 17:30:23</Text>
{orderState === '1' ? (
<View className='OrderItem-toPay'>去支付 ></View>
) : (
<Image className='OrderItem-payDone' src={payDoneImg} />
)}
</View>
<View
className={`OrderItem-price ${orderState === '1' ? 'topay' : ''}`}>
¥ 0.12
</View>
<View className='OrderItem-price'>¥ 0.12</View>
<View>去支付</View>
</View>
);
}
......
.OrderTitle {
.OrderTitle-name {
margin-top: 42px;
display: flex;
justify-content: center;
font-size: 28px;
.OrderTitle-icon {
width: 42px;
height: 36px;
margin-right: 16px;
}
}
.OrderTitle-price {
margin-top: 10px;
margin-bottom: 30px;
text-align: center;
font-size: 48px;
}
}
import { ComponentClass } from 'react';
import Taro, { Component } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import comLogo from '../../../../images/order/pay_logo_icon@2x.png';
type PageProps = {};
class OrderTitle extends Component {
render() {
return (
<View className='OrderTitle'>
<View className='OrderTitle-name'>
<Image className='OrderTitle-icon' src={comLogo} />
<Text>成都多彩任意门科技有限公司</Text>
</View>
<View className='OrderTitle-price'>-0.12</View>
</View>
);
}
}
export default OrderTitle as ComponentClass<PageProps>;
.Register {
box-sizing: border-box;
border-top: 1px solid #eee;
width: 100%;
height: 100%;
.Register-bg {
height: 500px;
background-color: #ee7d1f;
}
.registerBox {
position: absolute;
top: 30px;
left: 50%;
transform: translate(-300px);
width: 600px;
height: 1200px;
background-color: #fff;
margin: 0 auto;
border-radius: 8px;
padding: 12px 52px 0;
.registerBox-title {
display: flex;
font-size: 36px;
margin-top: 40px;
margin-bottom: 14px;
.registerBox-icon {
width: 40px;
height: 40px;
width: 44px;
height: 44px;
margin-right: 10px;
}
}
.registerBox-item {
height: 60px;
line-height: 60px;
display: flex;
justify-content: space-between;
height: 80px;
line-height: 80px;
border-bottom: 1px solid #eee;
.loginBox-input {
height: 100%;
font-size: 28px;
}
}
.sexBox{
.sexBox {
width: 200px;
}
.registerBox-getVcode {
position: relative;
width: 268px;
text-align: center;
font-size: 28px;
color: #456beb;
}
.registerBox-getVcode::before {
content: '';
position: absolute;
left: 0px;
top: 26px;
height: 28px;
border-left: 1px solid #eee;
}
.registerBox-pwdIcon {
width: 44px;
height: 44px;
}
}
.registerBox-agreeBox {
height: 60px;
padding: 0 64px;
font-size: 28px;
display: flex;
align-items: center;
color: #999;
.registerBox-agreeCheck {
box-sizing: border-box;
width: 30px;
height: 30px;
border: 4px solid #999;
border-radius: 50%;
margin-right: 16px;
}
}
.registerBox-button {
margin: 40px 32px 0;
border-radius: 24px;
}
}
// .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;
// }
// }
......@@ -11,7 +11,12 @@ import {
Label,
} from '@tarojs/components';
import '../CheckTelephone/CheckTelephone.scss';
import baseIcon from '../../images/login/icon_jibenxinxi@2x.png';
import pwdIcon from '../../images/login/icon_passworld@2x.png';
import areaIcon from '../../images/login/icon_quyu@2x.png';
import pwdHideIcon from '../../images/login/setting_invisible_icon@2x.png';
import pwdShowIcon from '../../images/login/setting_see_icon@2x.png';
import './Register.scss';
type PageOwnProps = {};
......@@ -27,9 +32,8 @@ interface Register {
class Register extends Component {
config: Config = {
navigationBarBackgroundColor: '#ee7d1f',
navigationBarTextStyle: 'white',
navigationBarTitleText: '注册',
navigationStyle: 'custom',
};
constructor(props) {
......@@ -47,7 +51,9 @@ class Register extends Component {
sex: value,
});
};
updateName = () => {};
updateName = e => {
return e + 'asdad';
};
getRegister = () => {
console.log('跳转首页');
};
......@@ -55,13 +61,12 @@ class Register extends Component {
const { name, sex } = this.state;
return (
<View className='Register'>
<View className='Register-bg' />
<View className='registerBox'>
<View className='registerBox-title'>
<Image className='registerBox-icon' src='' />
<Text>基本信息</Text>
<Image className='registerBox-icon' src={baseIcon} />
<Text className='registerBox-text'>基本信息</Text>
</View>
<View className='registerBox-item flex'>
<View className='registerBox-item'>
<Input
className='loginBox-input'
value={name}
......@@ -69,7 +74,10 @@ class Register extends Component {
placeholder='输入您的姓名'
maxLength={20}
/>
<RadioGroup
<View className='loginBox-input sexBox'>
</View>
{/* <RadioGroup
className='loginBox-input sexBox'
onChange={this.setSex}>
<Label
......@@ -80,7 +88,7 @@ class Register extends Component {
className={`choose-item ${sex == 'Female' ? 'checked' : ''}`}>
<Radio value='Female'>女</Radio>
</Label>
</RadioGroup>
</RadioGroup> */}
</View>
<View className='registerBox-item'>
<Input
......@@ -92,25 +100,55 @@ class Register extends Component {
<View className='registerBox-item'>
<Input
className='loginBox-input'
password
placeholder='请输入验证码'
maxLength={20}
/>
<Text>获取验证码</Text>
<Text className='registerBox-getVcode'>获取验证码</Text>
</View>
<View className='registerBox-title'>
<Image className='registerBox-icon' src='' />
<Text>密码设置</Text>
<Image className='registerBox-icon' src={pwdIcon} />
<Text className='registerBox-text'>密码设置</Text>
</View>
<View className='registerBox-item'>
<Input
className='loginBox-input'
password
placeholder='密码由6-20位组成'
maxLength={20}
/>
<Image className='registerBox-pwdIcon' src={pwdHideIcon} />
</View>
<View className='registerBox-item'>
<Input
className='loginBox-input'
password
placeholder='确认密码'
maxLength={20}
/>
<Image className='registerBox-pwdIcon' src={pwdHideIcon} />
</View>
<View className='registerBox-title'>
<Image className='registerBox-icon' src='' />
<Text>区域信息</Text>
<Image className='registerBox-icon' src={areaIcon} />
<Text className='registerBox-text'>区域信息</Text>
</View>
<Button className='registerBox-button big' onClick={this.getRegister}>
<View className='registerBox-item'>
<Input
className='loginBox-input'
password
placeholder='请填写真实区域信息'
maxLength={20}
/>
</View>
</View>
<View className='registerBox-agreeBox'>
<View className='registerBox-agreeCheck' />
<Text>同意条款</Text>
<Text>《多彩校园服务协议》</Text>
</View>
<Button className='registerBox-button' onClick={this.getRegister}>
确 认
</Button>
</View>
</View>
);
}
}
......
type INITIAL_STATE = {
APP_ID: string;
};
const INITIAL_STATE = {
APP_ID: 'wxf5912b79bba23663',
};
export default function counter(state = INITIAL_STATE) {
return state;
}
import { ADD, MINUS } from '../constants/counter'
const INITIAL_STATE = {
num: 0
}
export default function counter (state = INITIAL_STATE, action) {
switch (action.type) {
case ADD:
return {
...state,
num: state.num + 1
}
case MINUS:
return {
...state,
num: state.num - 1
}
default:
return state
}
}
import { combineReducers } from 'redux';
import constants from './constants';
import counter from './counter';
export default combineReducers({
constants,
counter,
});
interface StoreState {
login: boolean;
token: string;
id: string;
campusId: string;
name: string;
headPic: string;
}
const INITIAL_STATE = {
login: false,
token: '',
id: '',
campusId: '',
name: '',
headPic: '',
};
export default function userinfo(state: StoreState = INITIAL_STATE) {
return state;
}
import { combineReducers } from 'redux';
import constants from './rootReducers/constants';
import userinfo from './rootReducers/userinfo';
import OrderList from '../pages/Order/OrderList/store';
export default combineReducers({
constants,
userinfo,
OrderList,
});
type Order = {
actualMoney: Number;
areaId: Number;
areaName: String;
consumeType: String;
createAt: String;
customerCellphone: String;
customerId: Number;
customerName: String;
deductionBean: Number;
deductionMoney: Number;
equipmentNum: String;
equipmentPosition: String;
id: Number;
operateId: Number;
operateName: String;
operationMode: String;
orderNumber: String;
orderState: String;
outTradeNo: String;
payType: String;
payableMoney: Number;
serviceId: Number;
serviceName: String;
thirdDiscountMoney: Number;
thirdTradeNumber: String;
updateDate: String;
};
export default Order;
type Actions = {
type: String;
payload?: any;
};
export default Actions;
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