Skip to content

W
wx-school-app-public
Commit 25a0bf16 by 姜雷
Options

添加设备连接页面

parent 1c50ca0f
Showing with 244 additions and 98 deletions
.prettierrc 0 → 100644
{
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": true,
"arrowParens": "avoid",
"requirePragma": false,
"proseWrap": "preserve"
}
src/api/device.ts
import { baseFetch, ResponseDataEntity } from '.'; import { baseFetch, ResponseDataEntity } from '.';
import { Rate } from '../types/Device/Device';
export enum ScanTrigger {
false = 0,
true = 1,
}
type Params = { type Params = {
customerId: number; customerId: number;
equipmentNum: string; equipmentNum: string;
serviceId: number; serviceId: number;
isScanTrigger: ScanTrigger;
}; };
type DeviceInfoResponse = { type DeviceInfoResponse = {
code: string; code: string;
...@@ -29,7 +36,7 @@ type DeviceInfoResponse = { ...@@ -29,7 +36,7 @@ type DeviceInfoResponse = {
positionId: string; positionId: string;
// 位置id // 位置id
rates: RateInfoResponse[]; rates: Rate[];
// 是否纯蓝牙设备 1：是，0：否 // 是否纯蓝牙设备 1：是，0：否
isOnlyBluetooth: number; isOnlyBluetooth: number;
...@@ -40,13 +47,6 @@ type DeviceInfoResponse = { ...@@ -40,13 +47,6 @@ type DeviceInfoResponse = {
// 区域名称 // 区域名称
areaName: string; areaName: string;
}; };
type RateInfoResponse = {
mark: string;
// 费率描述
name: string;
// 费率名称
};
type SmaproPrepayConfig = { type SmaproPrepayConfig = {
createAt: string; createAt: string;
// 创建时间 // 创建时间
...@@ -84,7 +84,7 @@ type ResponseData = { ...@@ -84,7 +84,7 @@ type ResponseData = {
}; };
export const getDeviceConfig = ( export const getDeviceConfig = (
entity: Params, entity: Params
): Promise<ResponseDataEntity<ResponseData>> => ): Promise<ResponseDataEntity<ResponseData>> =>
baseFetch({ baseFetch({
url: '/smapro/prepay/config/wxmini', url: '/smapro/prepay/config/wxmini',
......
src/app.tsx
...@@ -27,6 +27,7 @@ class App extends Component { ...@@ -27,6 +27,7 @@ class App extends Component {
'pages/scanEnter/scanEnter', 'pages/scanEnter/scanEnter',
'pages/index/index', 'pages/index/index',
'pages/pay/pay', 'pages/pay/pay',
'pages/connect/connect',
], ],
window: { window: {
backgroundTextStyle: 'light', backgroundTextStyle: 'light',
......
src/pages/connect/connect.scss 0 → 100644
.Connect {
.Connect-info {
padding: 40px 32px;
font-size: 28px;
color: #333;
padding-bottom: 30px;
border-bottom: 1px dotted #e1e1e1;
.Connect-info-item {
line-height: 60px;
display: flex;
justify-content: space-between;
.Connect-info-rate {
line-height: 40px;
.Connect-info-rate-item {
display: flex;
}
.Connect-info-rate-name {
margin-right: 5px;
}
.Connect-info-rate-mark {
width: 250px;
text-align: right;
}
}
.Connect-info-position {
text-align: right;
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.Connect-tip {
margin: 38px 32px 30px;
color: #ff4b4b;
font-size: 24px;
line-height: 34px;
}
.Connect-tip2 {
padding: 36px 22px;
margin: 38px 32px 30px;
color: #999;
font-size: 24px;
line-height: 30px;
border: 1px solid #a4a4a4;
border-radius: 30px;
vertical-align: middle;
}
.Connect-money {
display: flex;
flex-wrap: wrap;
width: 714px;
margin: 0 auto;
.Connect-money-item {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 218px;
height: 110px;
font-size: 28px;
border-radius: 24px;
border: 1px solid #ccc;
margin-bottom: 16px;
margin-right: 16px;
&.seleted {
border-color: #6180f4;
color: #6180f4;
}
}
}
.Connect-btn {
margin: 20px 32px 80px;
}
.Connect-Message {
box-sizing: border-box;
width: 100%;
padding: 50px 42px;
font-size: 26px;
height: 440px;
overflow-y: auto;
.Connect-Message-item {
margin-bottom: 28px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.info {
color: #1596e0;
}
.success {
color: #15e0ae;
}
.error {
color: #ec2929;
}
}
}
src/pages/index/index.tsx
import { ComponentClass } from "react"; import { ComponentClass } from 'react';
import Taro, { Component, Config } from "@tarojs/taro"; import Taro, { Component, Config } from '@tarojs/taro';
import { View, Image } from "@tarojs/components"; import { View, Image } from '@tarojs/components';
import scanIcon from "../../images/icon_s@2x.png"; import './index.scss';
import { registerAndLogin } from '../../api/customer';
import "./index.scss"; import { getDeviceConfig, ScanTrigger } from '../../api/device';
import { registerAndLogin } from "../../api/customer"; import { UserState, updateUserInfo } from '../../store/rootReducers/userinfo';
import { getDeviceConfig } from "../../api/device"; import { connect } from '@tarojs/redux';
import { UserState, updateUserInfo } from "../../store/rootReducers/userinfo"; import { Customer } from '../../types/Customer/Customer';
import { connect } from "@tarojs/redux";
import { Customer } from "../../types/Customer/Customer";
import { import {
DeviceState, DeviceState,
updateDeviceData, updateDeviceData,
resetDeviceData resetDeviceData,
} from "../../store/rootReducers/device"; } from '../../store/rootReducers/device';
import PrepayConfig from "../../types/Order/Order"; import PrepayConfig from '../../types/Order/Order';
import { updatePayData } from "../../store/rootReducers/prepayConfig"; import { updatePayData } from '../../store/rootReducers/prepayConfig';
import { getPathParams } from "@/utils/path"; import { getPathParams } from '@/utils/path';
type DeviceEntity = { type DeviceEntity = {
serviceId: number; serviceId: number;
...@@ -50,7 +48,7 @@ interface Index { ...@@ -50,7 +48,7 @@ interface Index {
@connect( @connect(
({ userinfo }) => ({ ({ userinfo }) => ({
userinfo userinfo,
}), }),
dispatch => ({ dispatch => ({
updateUserInfo(data: UserState) { updateUserInfo(data: UserState) {
...@@ -64,18 +62,18 @@ interface Index { ...@@ -64,18 +62,18 @@ interface Index {
}, },
resetDeviceData() { resetDeviceData() {
dispatch(resetDeviceData()); dispatch(resetDeviceData());
} },
}) })
) )
class Index extends Component { class Index extends Component {
config: Config = { config: Config = {
navigationBarTitleText: "多彩自助服务" navigationBarTitleText: '多彩自助服务',
}; };
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
errorText: "" errorText: '',
}; };
} }
...@@ -85,15 +83,15 @@ class Index extends Component { ...@@ -85,15 +83,15 @@ class Index extends Component {
let queryArr = Object.keys(this.$router.params); let queryArr = Object.keys(this.$router.params);
console.log(this.$router.params); console.log(this.$router.params);
let scene: string = queryArr.length > 0 ? queryArr[0] : ""; let scene: string = queryArr.length > 0 ? queryArr[0] : '';
console.log("scene:", scene); console.log('scene:', scene);
if (codeStr) { if (codeStr) {
// Taro.showLoading(); // Taro.showLoading();
let params = getPathParams(codeStr); let params = getPathParams(codeStr);
console.log("code", params); console.log('code', params);
if (params["code"]) { if (params['code']) {
let entity = this.getDeviceEntity(params["code"]); let entity = this.getDeviceEntity(params['code']);
if (entity) { if (entity) {
this.getDeviceConfigHandle(entity); this.getDeviceConfigHandle(entity);
} }
...@@ -108,7 +106,7 @@ class Index extends Component { ...@@ -108,7 +106,7 @@ class Index extends Component {
} }
} else { } else {
Taro.redirectTo({ Taro.redirectTo({
url: "/pages/scanEnter/scanEnter" url: '/pages/scanEnter/scanEnter',
}); });
} }
}); });
...@@ -119,7 +117,7 @@ class Index extends Component { ...@@ -119,7 +117,7 @@ class Index extends Component {
let equipmentNum = paramStr.slice(2); let equipmentNum = paramStr.slice(2);
return { return {
serviceId, serviceId,
equipmentNum equipmentNum,
}; };
} }
...@@ -127,18 +125,18 @@ class Index extends Component { ...@@ -127,18 +125,18 @@ class Index extends Component {
const { updateUserInfo } = this.props; const { updateUserInfo } = this.props;
return Taro.login().then(res => { return Taro.login().then(res => {
console.log("login info:", res); console.log('login info:', res);
const { code } = res; const { code } = res;
return registerAndLogin({ return registerAndLogin({
code code,
// userName: '', // userName: '',
}).then(res => { }).then(res => {
const { token, customerId, isAuth } = res; const { token, customerId, isAuth } = res;
updateUserInfo({ updateUserInfo({
token, token,
customerId, customerId,
isAuth isAuth,
}); });
}); });
}); });
...@@ -147,24 +145,24 @@ class Index extends Component { ...@@ -147,24 +145,24 @@ class Index extends Component {
scanHandle() { scanHandle() {
Taro.scanCode({ Taro.scanCode({
onlyFromCamera: true, onlyFromCamera: true,
scanType: ["qrCode"] scanType: ['qrCode'],
}) })
.then(res => { .then(res => {
console.log(res); console.log(res);
const { path, result } = res; const { path, result } = res;
if (path) { if (path) {
let queryArr = path.split("?"); let queryArr = path.split('?');
let queryStr = queryArr.length >= 2 ? queryArr[1] : ""; let queryStr = queryArr.length >= 2 ? queryArr[1] : '';
console.log(result, queryArr, queryStr); console.log(result, queryArr, queryStr);
const entity = this.getDeviceEntity(queryStr); const entity = this.getDeviceEntity(queryStr);
this.getDeviceConfigHandle(entity); this.getDeviceConfigHandle(entity);
} else { } else {
Taro.showToast({ Taro.showToast({
title: "请扫描正确的小程序", title: '请扫描正确的小程序',
icon: "none" icon: 'none',
}); });
this.setState({ this.setState({
errorText: "请扫描正确的小程序" errorText: '请扫描正确的小程序',
}); });
} }
}) })
...@@ -179,19 +177,20 @@ class Index extends Component { ...@@ -179,19 +177,20 @@ class Index extends Component {
userinfo, userinfo,
updateDeviceData, updateDeviceData,
updatePayData, updatePayData,
resetDeviceData resetDeviceData,
} = this.props; } = this.props;
return getDeviceConfig({ return getDeviceConfig({
customerId: userinfo.customerId, customerId: userinfo.customerId,
equipmentNum: equipmentNum, equipmentNum: equipmentNum,
serviceId: serviceId serviceId: serviceId,
isScanTrigger: ScanTrigger.false,
}) })
.then(res => { .then(res => {
Taro.hideLoading(); Taro.hideLoading();
console.log(res); console.log(res);
const { deviceInfoResponse, prepayConfigs } = res; const { deviceInfoResponse, prepayConfigs } = res;
if (deviceInfoResponse.isUsed) { if (deviceInfoResponse.isUsed) {
console.log("设备使用中"); console.log('设备使用中');
return; return;
} }
if (deviceInfoResponse) { if (deviceInfoResponse) {
...@@ -205,18 +204,16 @@ class Index extends Component { ...@@ -205,18 +204,16 @@ class Index extends Component {
} else { } else {
updatePayData([]); updatePayData([]);
} }
Taro.redirectTo({ this.goNextPage(serviceId);
url: "/pages/pay/pay"
});
}) })
.catch(err => { .catch(err => {
console.error(err); console.error(err);
Taro.showToast({ Taro.showToast({
title: err.msg || "请扫描正确的设备码", title: err.msg || '请扫描正确的设备码',
icon: "none" icon: 'none',
}); });
this.setState({ this.setState({
errorText: err.msg || "请扫描正确的设备码" errorText: err.msg || '请扫描正确的设备码',
}); });
}); });
} }
...@@ -235,14 +232,26 @@ class Index extends Component { ...@@ -235,14 +232,26 @@ class Index extends Component {
scanErrorWeQRcode() { scanErrorWeQRcode() {
Taro.showToast({ Taro.showToast({
title: "请扫描正确的小程序", title: '请扫描正确的小程序',
icon: "none" icon: 'none',
}); });
this.setState({ this.setState({
errorText: "请扫描正确的小程序" errorText: '请扫描正确的小程序',
}); });
} }
goNextPage(serviceId: number) {
if (serviceId === 30 || serviceId === 31) {
Taro.redirectTo({
url: '/pages/connect/connect',
});
} else {
Taro.redirectTo({
url: '/pages/pay/pay',
});
}
}
render() { render() {
const { errorText } = this.state; const { errorText } = this.state;
return ( return (
......
src/pages/scanEnter/scanEnter.tsx
import { ComponentClass } from "react"; import { ComponentClass } from 'react';
import Taro, { Component, Config } from "@tarojs/taro"; import Taro, { Component, Config } from '@tarojs/taro';
import { View, Image } from "@tarojs/components"; import { View, Image } from '@tarojs/components';
import scanIcon from "../../images/icon_s@2x.png"; import scanIcon from '../../images/icon_s@2x.png';
import "./scanEnter.scss"; import './scanEnter.scss';
import { registerAndLogin } from "../../api/customer"; import { registerAndLogin } from '../../api/customer';
import { getDeviceConfig } from "../../api/device"; import { getDeviceConfig, ScanTrigger } from '../../api/device';
import { UserState, updateUserInfo } from "../../store/rootReducers/userinfo"; import { UserState, updateUserInfo } from '../../store/rootReducers/userinfo';
import { connect } from "@tarojs/redux"; import { connect } from '@tarojs/redux';
import { Customer } from "../../types/Customer/Customer"; import { Customer } from '../../types/Customer/Customer';
import { import {
DeviceState, DeviceState,
updateDeviceData, updateDeviceData,
resetDeviceData resetDeviceData,
} from "../../store/rootReducers/device"; } from '../../store/rootReducers/device';
import PrepayConfig from "../../types/Order/Order"; import PrepayConfig from '../../types/Order/Order';
import { updatePayData } from "../../store/rootReducers/prepayConfig"; import { updatePayData } from '../../store/rootReducers/prepayConfig';
import { getPathParams } from "@/utils/path"; import { getPathParams } from '@/utils/path';
type DeviceEntity = { type DeviceEntity = {
serviceId: number; serviceId: number;
...@@ -47,7 +47,7 @@ interface ScanEnter { ...@@ -47,7 +47,7 @@ interface ScanEnter {
@connect( @connect(
({ userinfo }) => ({ ({ userinfo }) => ({
userinfo userinfo,
}), }),
dispatch => ({ dispatch => ({
updateUserInfo(data: UserState) { updateUserInfo(data: UserState) {
...@@ -61,12 +61,12 @@ interface ScanEnter { ...@@ -61,12 +61,12 @@ interface ScanEnter {
}, },
resetDeviceData() { resetDeviceData() {
dispatch(resetDeviceData()); dispatch(resetDeviceData());
} },
}) })
) )
class ScanEnter extends Component { class ScanEnter extends Component {
config: Config = { config: Config = {
navigationBarTitleText: "多彩自助服务" navigationBarTitleText: '多彩自助服务',
}; };
componentWillMount() { componentWillMount() {
...@@ -90,7 +90,7 @@ class ScanEnter extends Component { ...@@ -90,7 +90,7 @@ class ScanEnter extends Component {
let equipmentNum = paramStr.slice(2); let equipmentNum = paramStr.slice(2);
return { return {
serviceId, serviceId,
equipmentNum equipmentNum,
}; };
} }
...@@ -98,17 +98,17 @@ class ScanEnter extends Component { ...@@ -98,17 +98,17 @@ class ScanEnter extends Component {
const { updateUserInfo } = this.props; const { updateUserInfo } = this.props;
return Taro.login().then(res => { return Taro.login().then(res => {
console.log("login info:", res); console.log('login info:', res);
const { code } = res; const { code } = res;
return registerAndLogin({ return registerAndLogin({
code code,
// userName: '', // userName: '',
}).then(res => { }).then(res => {
const { token, customerId, isAuth } = res; const { token, customerId, isAuth } = res;
updateUserInfo({ updateUserInfo({
token, token,
customerId, customerId,
isAuth isAuth,
}); });
}); });
}); });
...@@ -117,26 +117,26 @@ class ScanEnter extends Component { ...@@ -117,26 +117,26 @@ class ScanEnter extends Component {
scanHandle() { scanHandle() {
Taro.scanCode({ Taro.scanCode({
onlyFromCamera: true, onlyFromCamera: true,
scanType: ["qrCode"] scanType: ['qrCode'],
}) })
.then(res => { .then(res => {
console.log(res); console.log(res);
const { path, result } = res; const { path, result } = res;
let param = getPathParams(result); let param = getPathParams(result);
if (path) { if (path) {
let queryArr = path.split("?"); let queryArr = path.split('?');
let queryStr = queryArr.length >= 2 ? queryArr[1] : ""; let queryStr = queryArr.length >= 2 ? queryArr[1] : '';
console.log(result, queryArr, queryStr); console.log(result, queryArr, queryStr);
const entity = this.getDeviceEntity(queryStr); const entity = this.getDeviceEntity(queryStr);
this.getDeviceConfigHandle(entity); this.getDeviceConfigHandle(entity);
} else if (param["code"]) { } else if (param['code']) {
console.log(param["code"]); console.log(param['code']);
const entity = this.getDeviceEntity(param["code"]); const entity = this.getDeviceEntity(param['code']);
this.getDeviceConfigHandle(entity); this.getDeviceConfigHandle(entity);
} else { } else {
Taro.showToast({ Taro.showToast({
title: "请扫描正确的小程序", title: '请扫描正确的小程序',
icon: "none" icon: 'none',
}); });
} }
}) })
...@@ -151,19 +151,20 @@ class ScanEnter extends Component { ...@@ -151,19 +151,20 @@ class ScanEnter extends Component {
userinfo, userinfo,
updateDeviceData, updateDeviceData,
updatePayData, updatePayData,
resetDeviceData resetDeviceData,
} = this.props; } = this.props;
return getDeviceConfig({ return getDeviceConfig({
customerId: userinfo.customerId, customerId: userinfo.customerId,
equipmentNum: equipmentNum, equipmentNum: equipmentNum,
serviceId: serviceId serviceId: serviceId,
isScanTrigger: ScanTrigger.true,
}) })
.then(res => { .then(res => {
Taro.hideLoading(); Taro.hideLoading();
console.log(res); console.log(res);
const { deviceInfoResponse, prepayConfigs } = res; const { deviceInfoResponse, prepayConfigs } = res;
if (deviceInfoResponse.isUsed) { if (deviceInfoResponse.isUsed) {
console.log("设备使用中"); console.log('设备使用中');
return; return;
} }
if (deviceInfoResponse) { if (deviceInfoResponse) {
...@@ -177,15 +178,13 @@ class ScanEnter extends Component { ...@@ -177,15 +178,13 @@ class ScanEnter extends Component {
} else { } else {
updatePayData([]); updatePayData([]);
} }
Taro.navigateTo({ this.goNextPage(serviceId);
url: "/pages/pay/pay"
});
}) })
.catch(err => { .catch(err => {
console.error(err); console.error(err);
Taro.showToast({ Taro.showToast({
title: err.msg || "请扫描正确的设备码", title: err.msg || '请扫描正确的设备码',
icon: "none" icon: 'none',
}); });
}); });
} }
...@@ -202,6 +201,18 @@ class ScanEnter extends Component { ...@@ -202,6 +201,18 @@ class ScanEnter extends Component {
this.scanHandle(); this.scanHandle();
} }
goNextPage(serviceId: number) {
if (serviceId === 30 || serviceId === 31) {
Taro.redirectTo({
url: '/pages/connect/connect',
});
} else {
Taro.redirectTo({
url: '/pages/pay/pay',
});
}
}
render() { render() {
return ( return (
<View className="ScanEnter"> <View className="ScanEnter">
......
src/types/Device/Device.ts
...@@ -2,10 +2,25 @@ export enum DeviceRefundMode { ...@@ -2,10 +2,25 @@ export enum DeviceRefundMode {
needRefund = 1, needRefund = 1,
notRefund = 2, notRefund = 2,
} }
export enum OnlyBluetooth {
false = 0,
true = 1,
}
export type Rate = { export type Rate = {
mark: string; mark: string;
// 费率描述
name: string; name: string;
// 费率名称
duration: number;
// 消费时长，单位分钟
money: number;
// 费率金额
}; };
export type Device = { export type Device = {
refundMode: DeviceRefundMode; refundMode: DeviceRefundMode;
originCode: string; originCode: string;
...@@ -20,7 +35,7 @@ export type Device = { ...@@ -20,7 +35,7 @@ export type Device = {
rates: Rate[]; rates: Rate[];
serviceId: number; serviceId: number;
serviceName: string; serviceName: string;
isOnlyBluetooth: number; isOnlyBluetooth: OnlyBluetooth;
areaId: number; areaId: number;
areaName: string; areaName: string;
}; };
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