Skip to content

W
wx-school-app
Commit 7fb9bf61 by 姜雷
Options

完善页面

parent 4fa39372
Showing with 828 additions and 104 deletions
package.json
......@@ -31,31 +31,33 @@
"@tarojs/taro-swan": "1.2.13",
"@tarojs/taro-tt": "1.2.13",
"@tarojs/taro-weapp": "1.2.13",
"jsbarcode": "^3.11.0",
"nerv-devtools": "^1.3.9",
"nervjs": "^1.3.9",
"npm": "^6.8.0",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
"redux-thunk": "^2.3.0",
"wxbarcode": "^1.0.2"
},
"devDependencies": {
"@types/react": "^16.4.8",
"@types/webpack-env": "^1.13.6",
"@tarojs/plugin-babel": "1.2.13",
"@tarojs/plugin-csso": "1.2.13",
"@tarojs/plugin-sass": "1.2.13",
"@tarojs/plugin-uglifyjs": "1.2.13",
"@tarojs/webpack-runner": "1.2.13",
"@types/react": "^16.4.8",
"@types/webpack-env": "^1.13.6",
"babel-eslint": "^8.2.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-jsx-stylesheet": "^0.6.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-eslint": "^8.2.3",
"eslint": "^4.19.1",
"eslint-config-taro": "1.2.13",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-taro": "1.2.13",
"eslint-plugin-typescript": "^0.12.0",
"typescript": "^3.0.1"
......
src/api/index.ts
import Taro, { request } from '@tarojs/taro';
import store from '../store/index';
export type ResponseDataEntity = {
export type ResponseDataEntity<T> = {
code: number;
msg: string;
data: any;
data: T;
[propName: string]: any;
};
type ResponseEntity = {
data: ResponseDataEntity;
data: ResponseDataEntity<any>;
[propName: string]: any;
};
const createFetch = (basePath: string) => {
return (entity: request.Param): Promise<ResponseDataEntity> => {
return (entity: request.Param): Promise<ResponseEntity> => {
const token = store.getState().userinfo.token;
return Taro.request({
...entity,
......
src/api/order.ts 0 → 100644
import createFetch, { ResponseDataEntity } from './index';
import { CUSTOMER_SERVER_URL } from '../constants/index';
const fetch = createFetch(CUSTOMER_SERVER_URL);
export class AllParams {
/** 会员id */
customerId: number;
/** 最后一页最后一条订单ID */
lastOrderId?: number;
/** 每页条数 */
pageSize?: number;
}
export const fetchAllOrder = (params: AllParams) =>
fetch({
url: '/consumeOrder/pageAllList',
data: params,
});
export const fetchOrder = (params: AllParams) =>
fetch({
url: '/consumeOrder/pageList',
data: {
...params,
orderState: 1,
},
});
type DetailParams = {
id: number;
};
export const fetchOrderDetail = (data: DetailParams) =>
fetch({
url: '/consumeOrder/getDetail',
data: data,
});
src/api/wx.ts
......@@ -9,11 +9,11 @@ type LoginReponseData = {
registed: boolean;
token: string;
};
export interface LoginReponse extends ResponseDataEntity {
export interface LoginReponse extends ResponseDataEntity<LoginReponseData> {
data: LoginReponseData;
}
export const login = (data: LoginPramas): Promise<LoginReponse> =>
export const login = (data: LoginPramas) =>
fetch({
url: '/user/login2',
data: data,
......
src/app.scss
......@@ -27,6 +27,7 @@ button[disabled]:not([type]) {
}
.topBr {
box-sizing: border-box;
width: 100%;
border-top: 1px solid #eee;
}
......@@ -69,3 +70,22 @@ button[disabled]:not([type]) {
height: 44px;
}
}
.sexBox {
display: flex;
.sexBox-item {
display: flex;
align-items: center;
margin-left: 40px;
}
.sexBox-icon {
width: 40px;
height: 40px;
margin-right: 20px;
}
}
.bg {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
src/app.tsx
......@@ -24,16 +24,18 @@ class App extends Component {
*/
config: Config = {
pages: [
'pages/Home/Home',
'pages/Order/OrderPay/OrderPay',
'pages/Order/OrderList/OrderList',
'pages/index/index',
'pages/BarCode/BarCode',
'pages/Home/Home',
'pages/Announcement/Announcement',
'pages/UserSetting/UserSetting',
'pages/ResetPwd/ResetPwd',
'pages/Register/Register',
'pages/Login/Login',
// 'pages/CheckTelephone/CheckTelephone',
// 'pages/Feedback/Feedback',
// 'pages/Order/OrderDetail/OrderDetail',
// 'pages/Order/OrderPay/OrderPay',
// 'pages/Order/OrderList/OrderList',
'pages/Feedback/Feedback',
'pages/Order/OrderDetail/OrderDetail',
'pages/SelectCampus/SelectCampus',
],
window: {
......@@ -44,16 +46,6 @@ class App extends Component {
},
};
componentDidMount() {}
componentDidShow() {}
componentDidHide() {}
componentCatchError() {}
componentDidCatchError() {}
// 在 App 类中的 render() 函数没有实际作用
// 请勿修改此函数
render() {
......
src/constants/index.js
export const APP_ID = 'wxf5912b79bba23663';
export const BASE_SERVER_URL = 'https://ex-dev-selfbase.168cad.top';
export const CUSTOMER_SERVER_URL = 'http://ex-dev-dcxy-customer-app.168cad.top';
src/pages/Announcement/Announcement.scss 0 → 100644
.Announcement {
width: 100%;
height: 100%;
background-color: #eee;
.Announcement-item {
box-sizing: border-box;
background-color: #fff;
border-radius: 24px;
height: 314px;
padding: 20px 18px;
margin: 20px 32px 20px;
.Announcement-item-img {
display: block;
width: 100%;
height: 214px;
border-radius: 24px;
background-color: #eee;
}
.Announcement-item-Content {
display: flex;
align-items: center;
margin-top: 18px;
.Announcement-item-icon {
width: 40px;
height: 40px;
margin-right: 16px;
}
.Announcement-item-title {
flex: 1;
font-size: 32px;
}
.Announcement-item-date {
margin-top: 10px;
font-size: 22px;
color: #666;
}
}
}
.Announcement-item:first-child {
margin-top: 24px;
}
}
src/pages/Announcement/Announcement.tsx 0 → 100644
import { Component } from '@tarojs/taro';
import { ComponentClass } from 'react';
import { View, ScrollView, Image, Text } from '@tarojs/components';
import AnnIcon from '../../images/icon/ann_tongzhi_icon@2x.png';
type PageOwnProps = {};
type PageState = {};
interface Announcement {
props: PageOwnProps;
state: PageState;
}
class Announcement extends Component {
render() {
return (
<ScrollView className='Announcement' scroll-y>
<View className='Announcement-item'>
<Image className='Announcement-item-img' src='' />
<View className='Announcement-item-Content'>
<Image className='Announcement-item-icon' src={AnnIcon} />
<Text className='Announcement-item-title'>关于饮水豆使用说明</Text>
<Text className='Announcement-item-date'>1543-54-87</Text>
</View>
</View>
<View className='Announcement-item'>
<Image className='Announcement-item-img' src='' />
<View className='Announcement-item-Content'>
<Image className='Announcement-item-icon' src={AnnIcon} />
<Text className='Announcement-item-title'>关于饮水豆使用说明</Text>
<Text className='Announcement-item-date'>1543-54-87</Text>
</View>
</View>
<View className='Announcement-item'>
<Image className='Announcement-item-img' src='' />
<View className='Announcement-item-Content'>
<Image className='Announcement-item-icon' src={AnnIcon} />
<Text className='Announcement-item-title'>关于饮水豆使用说明</Text>
<Text className='Announcement-item-date'>1543-54-87</Text>
</View>
</View>
<View className='Announcement-item'>
<Image className='Announcement-item-img' src='' />
<View className='Announcement-item-Content'>
<Image className='Announcement-item-icon' src={AnnIcon} />
<Text className='Announcement-item-title'>关于饮水豆使用说明</Text>
<Text className='Announcement-item-date'>1543-54-87</Text>
</View>
</View>
<View className='Announcement-item'>
<Image className='Announcement-item-img' src='' />
<View className='Announcement-item-Content'>
<Image className='Announcement-item-icon' src={AnnIcon} />
<Text className='Announcement-item-title'>关于饮水豆使用说明</Text>
<Text className='Announcement-item-date'>1543-54-87</Text>
</View>
</View>
</ScrollView>
);
}
}
export default Announcement as ComponentClass;
src/pages/BarCode/BarCode.scss 0 → 100644
.BarCode {
.BarCodeBox {
position: relative;
width: 100%;
height: 260px;
overflow: hidden;
transition: all 0.28s;
display: flex;
}
.BarCodeBoxBig {
height: 436px;
}
.BarCodeImg {
flex: 1;
margin: 26px 52px 46px;
background-color: #fff;
overflow: hidden;
transition: all 0.28s;
}
.BarCodeImgBig {
margin: 26px 26px 46px;
}
.BarCodeBox-refresh {
position: absolute;
right: 4px;
width: 32px;
height: 52px;
}
.BarCodeCav {
width: 100%;
height: 100%;
}
.toggleBtn {
position: absolute;
right: 0;
bottom: 4px;
background-color: #6180f4;
box-sizing: border-box;
width: 82px;
height: 40px;
line-height: 40px;
padding-left: 20px;
border-radius: 20px 0 0 20px;
font-size: 24px;
color: #fff;
}
}
src/pages/BarCode/BarCode.tsx 0 → 100644
import Taro, { Component } from '@tarojs/taro';
import { ComponentClass } from 'react';
import { View, Canvas, Image } from '@tarojs/components';
import BarCodeBoxBg from '../../images/barcode/tiaoxingma-1.png';
import BarCodeBoxBigBg from '../../images/barcode/tiaoxingma-2.png';
import RefreshIcon from '../../images/barcode/icon_shuaxin@2x.png';
import wxbarcode from 'wxbarcode';
import './BarCode.scss';
type PageOwnProps = {};
type PageState = {
showBig: boolean;
};
interface BarCode {
props: PageOwnProps;
state: PageState;
}
class BarCode extends Component {
constructor(props: PageOwnProps) {
super(props);
this.state = {
showBig: false,
};
}
componentWillMount() {
wxbarcode.barcode('BarCode', '12345678901234567', 646, 188);
}
drawBarCode(showBig: boolean) {
if (showBig) {
wxbarcode.barcode('BarCode', '12345678901234567', 646, 188);
} else {
wxbarcode.barcode('BarCode', '12345678901234567', 700, 364);
}
}
toggleBigBarCode() {
const { showBig } = this.state;
this.drawBarCode(showBig);
this.setState({
showBig: !showBig,
});
}
render() {
const { showBig } = this.state;
return (
<View className='BarCode'>
<View className={`BarCodeBox ${showBig ? 'BarCodeBoxBig' : ''}`}>
{showBig ? (
<Image className='bg' src={BarCodeBoxBigBg} />
) : (
<Image className='bg' src={BarCodeBoxBg} />
)}
{!showBig && (
<Image className='BarCodeBox-refresh' src={RefreshIcon} />
)}
<View className={`BarCodeImg ${showBig ? 'BarCodeImgBig' : ''}`}>
<Canvas className='BarCodeCav' canvasId='BarCode' />
</View>
<View className='toggleBtn' onClick={this.toggleBigBarCode}>
{showBig ? '缩小' : '放大'}
</View>
</View>
</View>
);
}
}
export default BarCode as ComponentClass<PageOwnProps, PageState>;
src/pages/Home/Home.scss
......@@ -4,12 +4,13 @@
position: relative;
width: 100%;
height: 390px;
}
.Home-UserBox-bg {
.Home-UserBox-Setting {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
right: 28px;
top: 22px;
width: 38px;
height: 38px;
}
}
.Home-UserBox-info {
padding: 80px 88px 20px 76px;
......@@ -43,6 +44,21 @@
padding: 32px 40px 0;
display: flex;
justify-content: space-around;
font-size: 24px;
color: #666;
.Home-UserBox-BeanItem {
display: flex;
align-items: center;
}
.Home-UserBox-BeanIcon {
width: 24px;
height: 24px;
margin-right: 12px;
}
.Home-UserBox-BeanCount {
font-size: 28px;
color: #333;
}
}
.Home-UserBox-Order {
position: absolute;
......@@ -74,4 +90,67 @@
width: 40px;
height: 20px;
}
.Home-HairDryer {
position: relative;
height: 192px;
margin-top: 68px;
display: flex;
align-items: center;
justify-content: flex-end;
.Home-HairDryer-shadow {
position: absolute;
bottom: 0px;
width: 100%;
height: 160px;
border-radius: 24px;
box-shadow: 0 6px 20px #3161ff;
}
.Home-HairDryer-text {
color: #fff;
font-size: 32px;
margin-right: 50px;
margin-top: 20px;
}
.Home-HairDryer-arrow {
margin-left: 10px;
width: 15px;
height: 23px;
}
}
.Home-Announcement {
position: relative;
height: 222px;
margin-top: 40px;
.Home-Announcement-title {
display: flex;
justify-content: space-between;
height: 66px;
line-height: 66px;
color: #fff;
padding: 0 50px 0 40px;
font-size: 28px;
.Home-Announcement-more {
font-size: 24px;
.more-icon {
width: 10px;
height: 17px;
margin-left: 8px;
}
}
}
.Home-Announcement-Content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 40px;
height: 136px;
font-size: 32px;
color: #fff;
font-weight: bold;
.ContentDate {
font-size: 24px;
font-weight: normal;
}
}
}
}
src/pages/Home/Home.tsx
......@@ -3,26 +3,67 @@ import Taro, { Component } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import UserBoxBg from '../../images/home/img_bg@2x.png';
import UserImg from '../../images/home/pc_minel_icon@2x.png';
import ArrowIcon from '../../images/home/icon_dingdan@2x.png';
import HairDryerBg from '../../images/home/img_chuifeng_bg@2x.png';
import HairDryerArr from '../../images/home/icon_chuifeng_right@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 HBeanIcon from '../../images/home/icon_chuifengdou@2x.png';
import TBeanIcon from '../../images/home/icon_tongyongdou@2x.png';
import UserHeaderM from '../../images/home/img_boy_touxiang@2x.png';
import UserHeaderF from '../../images/home/img_girl_touxiang@2x.png';
import './Home.scss';
class Home extends Component {
goSetting() {
Taro.navigateTo({
url: '/pages/UserSetting/UserSetting',
});
}
goAnn() {
Taro.navigateTo({
url: '/pages/Announcement/Announcement',
});
}
goOrder() {
Taro.navigateTo({
url: '/pages/Order/OrderList/OrderList',
});
}
render() {
return (
<View className='Home'>
<View className='Home-UserBox'>
<Image className='Home-UserBox-bg' src={UserBoxBg} />
<Image
className='Home-UserBox-Setting'
src={SettingIcon}
onClick={this.goSetting}
/>
<Image className='bg' src={UserBoxBg} />
<View className='Home-UserBox-info'>
<View className='Home-UserBox-other'>
<View className='Home-UserBox-name'>中小</View>
<View className='Home-UserBox-tel'>16878964216</View>
<View className='Home-UserBox-addr'>成都师范学校-温江小区</View>
</View>
<Image className='Home-UserBox-headimg' src={UserImg} />
<Image className='Home-UserBox-headimg' src={UserHeaderM} />
</View>
<View className='Home-UserBox-line' />
<View className='Home-UserBox-Bean'>
<View className='Home-UserBox-BeanItem'>吹风豆：2.35</View>
<View className='Home-UserBox-BeanItem'>通用豆：12.35</View>
<View className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={HBeanIcon} />
<Text>吹风豆：</Text>
<Text className='Home-UserBox-BeanCount'>2.35</Text>
</View>
<View className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={TBeanIcon} />
<Text>通用豆：</Text>
<Text className='Home-UserBox-BeanCount'>2.35</Text>
</View>
</View>
<View className='Home-UserBox-Order'>
<Text className='Home-UserBox-Order-text'>我的订单</Text>
......@@ -31,8 +72,28 @@ class Home extends Component {
</View>
</View>
</View>
<View>吹风</View>
<View>公告</View>
<View className='Home-HairDryer'>
<Image className='bg' src={HairDryerBg} />
<View className='Home-HairDryer-shadow' />
<View className='Home-HairDryer-text'>
吹风
<Image className='Home-HairDryer-arrow' src={HairDryerArr} />
</View>
</View>
<View className='Home-Announcement'>
<Image className='bg' src={AnnouncementBg} />
<View className='Home-Announcement-title'>
<Text>最新公告</Text>
<View className='Home-Announcement-more' onClick={this.goAnn}>
更多
<Image className='more-icon' src={MoreIcon} />
</View>
</View>
<View className='Home-Announcement-Content'>
<Text>元宵节感恩回馈</Text>
<Text className='ContentDate'>2019-02-22</Text>
</View>
</View>
</View>
);
}
......
src/pages/Login/Login.tsx
......@@ -26,7 +26,9 @@ class Login extends Component {
};
}
loginHandle() {}
loginHandle() {
console.log('in loginHandle');
}
render() {
return (
......
src/pages/Order/OrderList/OrderList.tsx
......@@ -9,9 +9,10 @@ import './OrderList.scss';
import { toggleOrderState } from './actions';
import { StoreState } from './store';
import { fetchAllOrder } from '../../../api/order';
type PageStateProps = {
OrderList: StoreState;
orderList: StoreState;
};
type PageDispatchProps = {
toggleOrderState: (state: String) => void;
......@@ -27,7 +28,7 @@ interface OrderList {
@connect(
({ OrderList }) => ({
OrderList,
orderList: OrderList,
}),
dispatch => ({
toggleOrderState(state: String) {
......@@ -41,12 +42,17 @@ class OrderList extends Component {
};
constructor(props: PageProps) {
super(props);
this.state = {};
}
goPayPage(data) {
this.$preload(data);
Taro.navigateTo({
url: '/pages/Order/OrderPay/OrderPay',
});
}
render() {
const {
OrderList: { orderState },
orderList: { orderState },
toggleOrderState,
} = this.props;
......@@ -69,27 +75,42 @@ class OrderList extends Component {
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 />
<OrderItem
data={{ id: 1, orderState: '1' }}
onPayHandle={this.goPayPage}
/>
<OrderItem
data={{ id: 1, orderState: '1' }}
onPayHandle={this.goPayPage}
/>{' '}
<OrderItem
data={{ id: 1, orderState: 'all' }}
onPayHandle={this.goPayPage}
/>
<OrderItem
data={{ id: 1, orderState: '1' }}
onPayHandle={this.goPayPage}
/>
<OrderItem
data={{ id: 1, orderState: '1' }}
onPayHandle={this.goPayPage}
/>
<OrderItem
data={{ id: 1, orderState: 'all' }}
onPayHandle={this.goPayPage}
/>
<OrderItem
data={{ id: 1, orderState: '1' }}
onPayHandle={this.goPayPage}
/>{' '}
<OrderItem
data={{ id: 1, orderState: 'all' }}
onPayHandle={this.goPayPage}
/>
<OrderItem
data={{ id: 1, orderState: '1' }}
onPayHandle={this.goPayPage}
/>
</ScrollView>
</View>
);
......
src/pages/Order/OrderPay/OrderPay.scss
.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-line {
margin-top: 28px;
margin-bottom: 20px;
border-top: 1px dashed #f2f2f2;
}
.OrderPay-payway {
display: flex;
align-items: center;
......@@ -37,8 +31,40 @@
border: 6px solid #c8c8c8;
border-radius: 50%;
}
.checked {
border-color: #ffd506;
background-color: #ffd506;
}
}
.OrderPay-payinfo {
display: flex;
height: 60px;
line-height: 60px;
justify-content: space-between;
font-size: 28px;
color: #333;
}
.OrderPay-DeductionInfo {
position: relative;
margin-top: 12px;
padding-left: 22px;
height: 60px;
line-height: 60px;
background-color: #ffe4e4;
font-size: 22px;
color: #ff1010;
}
.OrderPay-DeductionInfo::before {
content: '';
position: absolute;
top: -12px;
left: 120px;
border-bottom: 12px solid #ffe4e4;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
}
.OrderPay-next {
margin-top: 40px;
border-radius: 24px;
}
}
src/pages/Order/OrderPay/OrderPay.tsx
......@@ -5,30 +5,89 @@ 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 { fetchOrderDetail } from '../../../api/order';
import './OrderPay.scss';
type pageProps = {};
type PageProps = {};
type PageState = {
prePay: boolean;
};
interface OrderPay {
props: PageProps;
state: PageState;
}
class OrderPay extends Component {
config: Config = {
navigationBarTitleText: '订单支付',
};
constructor(props) {
super(props);
this.state = {
prePay: true,
};
}
componentWillMount() {
console.log('preload: ', this.$router.preload);
// const { id } = this.$router.preload;
}
changePayState() {
this.setState({
prePay: false,
});
}
callNativePay() {}
render() {
const { prePay } = this.state;
return (
<View className='OrderPay'>
<View className='OrderPay topBr'>
<OrderTitle />
<OrderInfo />
<View className='OrderPay-line' />
{prePay ? (
<View className='OrderPay-payway'>
<Image className='OrderPay-icon' src={payWayLogo} />
<Text className='OrderPay-text'>微信支付</Text>
<View className='OrderPay-check' />
<View className='OrderPay-check checked' />
</View>
) : (
<View>
<View className='OrderPay-payinfo'>
<Text>订单金额</Text>
<Text>0.12</Text>
</View>
<View className='OrderPay-payinfo'>
<Text>吹风豆抵扣金额（余额:8.00）</Text>
<Text>0.12</Text>
</View>
<View className='OrderPay-DeductionInfo'>
豆抵扣总消费额的20%，不满0.01元，累计算1分
</View>
<View className='OrderPay-payinfo'>
<Text>微信支付金额</Text>
<Text>0.09</Text>
</View>
</View>
<Button className='button OrderPay-next'>下一步</Button>
)}
{prePay ? (
<Button
className='button OrderPay-next'
onClick={this.changePayState}>
下一步
</Button>
) : (
<Button className='button OrderPay-next' onClick={this.callNativePay}>
确认支付
</Button>
)}
</View>
);
}
}
export default OrderPay as ComponentClass<pageProps>;
export default OrderPay as ComponentClass<PageProps, PageState>;
src/pages/Order/components/OrderItem/OrderItem.scss
......@@ -14,7 +14,7 @@
}
.OrderItem-price {
position: absolute;
top: 29px;
top: 18px;
right: 26px;
font-size: 36px;
}
......@@ -26,7 +26,7 @@
top: 66px;
right: 26px;
font-size: 24px;
color: #ff8706;
color: #6180f4;
}
.OrderItem-payDone {
position: absolute;
......
src/pages/Order/components/OrderItem/OrderItem.tsx
......@@ -4,17 +4,38 @@ import { View, Text, Image } from '@tarojs/components';
import payDoneImg from '../../../../images/order/dingdan_yiwancheng_img@2x.png';
import './OrderItem.scss';
type PageOwnProps = {};
type PageState = {};
interface OrderItemProps {
type OrderItemProps = {
id: number;
orderState: string;
};
type PageOwnProps = {
data: OrderItemProps;
onPayHandle: (data: OrderItemProps) => void;
};
type PageState = {};
interface OrderItem {
props: PageOwnProps;
state: PageState;
}
class OrderItem extends Component<OrderItemProps> {
class OrderItem extends Component {
static defaultProps = {
data: {
id: 0,
orderState: '1',
},
};
clickHandle() {
const { onPayHandle, data } = this.props;
onPayHandle(data);
}
render() {
const { orderState } = this.props;
const {
data: { orderState },
} = this.props;
return (
<View className='OrderItem'>
<View className='OrderItem-text'>
......@@ -25,7 +46,9 @@ class OrderItem extends Component<OrderItemProps> {
<Text>消费时间：</Text>
<Text>2018-12-01 17:30:23</Text>
{orderState === '1' ? (
<View className='OrderItem-toPay'>去支付 ></View>
<View className='OrderItem-toPay' onClick={this.clickHandle}>
去支付 >
</View>
) : (
<Image className='OrderItem-payDone' src={payDoneImg} />
)}
......
src/pages/Order/components/OrderTitle/OrderTitle.tsx
......@@ -3,6 +3,7 @@ import Taro, { Component } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import comLogo from '../../../../images/order/pay_logo_icon@2x.png';
import './OrderTitle.scss';
type PageProps = {};
......
src/pages/Register/Register.scss
......@@ -15,20 +15,6 @@
margin-right: 10px;
}
}
.sexBox {
display: flex;
.sexBox-item {
display: flex;
align-items: center;
margin-left: 40px;
}
.sexBox-icon {
width: 40px;
height: 40px;
margin-right: 20px;
}
}
}
.registerBox-agreeBox {
height: 60px;
......
src/pages/ResetPwd/ResetPwd.tsx
......@@ -4,6 +4,8 @@ import { View, Input, Image, Button } from '@tarojs/components';
import Vcode from '../../components/Vcode/Vcode';
import pwdHideIcon from '../../images/login/setting_invisible_icon@2x.png';
import pwdShowIcon from '../../images/login/setting_see_icon@2x.png';
import ToastBox from '../../components/ToastBox/ToastBox';
import './ResetPwd.scss';
type PageOwnProps = {};
......@@ -88,6 +90,7 @@ class ResetPwd extends Component {
return true;
}
resetPwd() {
// this.refs.ToastBox.showToast('修改成功');
if (this.validatePwdForm()) {
console.log('回到登陆');
......@@ -100,6 +103,7 @@ class ResetPwd extends Component {
const { cellphone, vcode, showPwd, pwd, checkPwd } = this.state;
return (
<View className='ResetPwd'>
<ToastBox ref='ToastBox' />
<View className='ResetPwd-form'>
<View className='ResetPwd-title'>请输入您的登陆手机号</View>
<View className='registerBox-item'>
......
src/pages/UserSetting/UserSetting.scss 0 → 100644
.UserSetting {
.UserSetting-Header {
position: relative;
height: 74px;
background-color: #6180f4;
.UserSetting-HeaderIconBox {
position: absolute;
top: 0;
right: 50px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid rgba(255, 255, 255, 0.3);
}
.UserSetting-HeaderIcon {
width: 100%;
height: 100%;
}
}
.UserSetting-name {
height: 80px;
line-height: 80px;
text-align: center;
font-size: 48px;
font-weight: bold;
}
.UserSetting-Content {
padding: 0 40px;
}
.UserSetting-ContentItem {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
line-height: 80px;
font-size: 32px;
color: #333;
}
.UserSetting-ContentItem.Disabled {
color: #999;
}
.UserSetting-ContentItem-input {
text-align: right;
}
.UserSetting-title {
height: 60px;
display: flex;
align-items: center;
font-size: 24px;
.UserSetting-titleIcon {
width: 36px;
height: 28px;
margin-right: 20px;
}
.UserSetting-titleLine {
margin-left: 40px;
flex: 1;
border-top: 1px solid #f1f1f1;
}
}
.UserSetting-save {
margin: 80px 16px 0;
}
}
src/pages/UserSetting/UserSetting.tsx 0 → 100644
import { Component, Config } from '@tarojs/taro';
import { ComponentClass } from 'react';
import { View, Image, Text, Input, Picker, Button } from '@tarojs/components';
import HeaderIcon from '../../images/home/img_girl_touxiang@2x.png';
import InfoIcon from '../../images/user/pc_minel_icon@2x.png';
import SchoolIcon from '../../images/user/pc_school_icon@2x.png';
import radioIcon from '../../images/login/pc_nor_icon@2x.png';
import radioCheckIcon from '../../images/login/pc_sel_icon@2x.png';
import './UserSetting.scss';
type PageOwnProps = {};
type PageState = {
birthday: string;
sex: string;
};
interface UserSetting {
props: PageOwnProps;
state: PageState;
}
class UserSetting extends Component {
config: Config = {
navigationBarBackgroundColor: '#6180f4',
navigationBarTitleText: '',
};
constructor(props) {
super(props);
this.state = {
birthday: '1945-10-01',
sex: 'Male',
};
}
setSex(sex: string) {}
updateBirthday() {}
render() {
const { sex, birthday } = this.state;
return (
<View className='UserSetting'>
<View className='UserSetting-Header'>
<View className='UserSetting-HeaderIconBox'>
<Image className='UserSetting-HeaderIcon' src={HeaderIcon} />
</View>
</View>
<View className='UserSetting-name'>小众</View>
<View className='UserSetting-Content'>
<View className='UserSetting-title'>
<Image className='UserSetting-titleIcon' src={InfoIcon} />
<Text>我的信息</Text>
<View className='UserSetting-titleLine' />
</View>
<View className='UserSetting-ContentItem'>
<Text>姓名：</Text>
<Input className='UserSetting-ContentItem-input' value={'ds'} />
</View>
<View className='UserSetting-ContentItem'>
<Text>性别：</Text>
<View className='loginBox-input sexBox'>
<View
className='sexBox-item'
onClick={() => this.setSex('Female')}>
{sex === 'Female' ? (
<Image className='sexBox-icon' src={radioCheckIcon} />
) : (
<Image className='sexBox-icon' src={radioIcon} />
)}
<Text>女</Text>
</View>
<View className='sexBox-item' onClick={() => this.setSex('Male')}>
{sex === 'Male' ? (
<Image className='sexBox-icon' src={radioCheckIcon} />
) : (
<Image className='sexBox-icon' src={radioIcon} />
)}
<Text>男</Text>
</View>
</View>
</View>
<View className='UserSetting-ContentItem'>
<Text>出生日期：</Text>
<Picker value={birthday} mode='date' onChange={this.updateBirthday}>
<View>{birthday}</View>
</Picker>
</View>
<View className='UserSetting-ContentItem Disabled'>
<Text>多彩账号：</Text>
<Text>15961654</Text>
</View>
<View className='UserSetting-ContentItem Disabled'>
<Text>设备账号：</Text>
<Text>1855</Text>
</View>
<View className='UserSetting-title'>
<Image className='UserSetting-titleIcon' src={SchoolIcon} />
<Text>学校信息</Text>
<View className='UserSetting-titleLine' />
</View>
<View className='UserSetting-ContentItem Disabled'>
<Text>学校：</Text>
<Text>1855</Text>
</View>
<View className='UserSetting-ContentItem'>
<Text>学号：</Text>
<Input className='UserSetting-ContentItem-input' value={'ds'} />
</View>
<View className='UserSetting-ContentItem'>
<Text>入学日期：</Text>
<Text>2019-05-30</Text>
</View>
</View>
<Button className='UserSetting-save'>保存</Button>
</View>
);
}
}
export default UserSetting as ComponentClass<PageOwnProps, PageState>;
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