add billApp

src/case/billApp/src/App.css

@@ -0,0 +1,10 @@
+.App{
+    height: 100%;
+}
+.title{
+    padding-top: 8px;
+    padding-bottom: 20px;
+    font-weight: bold;
+    font-size: 18px;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
+}

src/case/billApp/src/App.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
+
+import TabBarBottom from './components/App/TabBarBottom'
+
+import './App.css';
+
+class App extends Component{
+  render(){
+      return(
+        <Router>
+          <Route exact path="/" component={TabBarBottom}/>
+        </Router>
+      )
+  }
+}
+export default App;

src/case/billApp/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/case/billApp/src/api/graphql/bills.js

@@ -0,0 +1,25 @@
+export const  getBill=`query billbyprops($account_id: ID, $tag_id: ID, $money: Float, $class: String, $remark: String, $createdAt: String, $updateAt: String) {
+    billbyprops: bill_by_props(account_id: $account_id tag_id: $tag_id money: $money class: $class remark: $remark createdAt: $createdAt updateAt: $updateAt) {
+        id
+        account_id {
+            id
+
+            accountName
+            createdAt
+            updateAt
+        }
+        tag_id {
+            id
+
+            name
+            icon
+            createdAt
+            updateAt
+        }
+        money
+        class
+        remark
+        createdAt
+        updateAt
+    }
+}`

src/case/billApp/src/api/graphql_request.js

@@ -0,0 +1,13 @@
+import { request } from 'graphql-request'
+import URL from './url_config'
+
+
+export const graphqls=(query,variables)=>{
+   
+    //console.log(URL.HTTP_DATA_URL)
+    const http_request=URL.HTTP_DATA_URL
+      
+    return request(http_request, query,variables).then(data =>data)
+}
+
+

src/case/billApp/src/api/url_config.js

@@ -0,0 +1,9 @@
+var config={
+    APPID:"wxc4831335ae194243",
+    HTTP_DATA_URL:'http://localhost:3001/graphql',
+    HTTP_PAY_URL:'https://xcx.ioobot.com/payinfo'
+}
+export default config
+
+
+

src/case/billApp/src/components/App/TabBarBottom.jsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { TabBar } from 'antd-mobile';
+
+
+import HomePage from '../HomePage/HomePage'
+
+
+
+
+class TabBarBottom extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedTab: 'bill',
+      hidden: false,
+      fullScreen: true,
+    };
+  }
+  
+
+  renderContent(page) { 
+    if(page==='bill'){
+      //console.log(page)
+      return (
+        <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
+         <HomePage/>
+        </div>
+      );
+    }
+    if(page==='assets'){
+      //console.log(page)
+      return (
+        <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
+        2222222
+        </div>
+      );
+    }
+    if(page==='my'){
+      //console.log(page)
+      return (
+        <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
+       333333
+        </div>
+      );
+    }
+    
+  }
+  render() {
+    //这里渲染一次
+    return (
+      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }} className="TabBarBottom">
+        <TabBar
+          unselectedTintColor="#949494"
+          tintColor="#33A3F4"
+          barTintColor="white"
+          hidden={this.state.hidden}
+        >
+          <TabBar.Item
+            title="账单"
+            key="bill"
+            icon={<div style={{
+              width: '22px',
+              height: '22px',
+              background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/bill.svg) center center /  21px 21px no-repeat' }}
+            />
+            }
+            selectedIcon={<div style={{
+              width: '22px',
+              height: '22px',
+              background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/bill_s.svg) center center /  21px 21px no-repeat' }}
+            />
+            }
+            selected={this.state.selectedTab === 'bill'}
+         
+            onPress={() => {
+              this.setState({
+                selectedTab: 'bill',
+              });
+            }}
+            data-seed="logId"
+          >
+            {this.renderContent('bill')}
+          </TabBar.Item>
+          <TabBar.Item
+            icon={
+              <div style={{
+                width: '22px',
+                height: '22px',
+                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/assets.svg) center center /  21px 21px no-repeat' }}
+              />
+            }
+            selectedIcon={
+              <div style={{
+                width: '22px',
+                height: '22px',
+                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/assets_s.svg) center center /  21px 21px no-repeat' }}
+              />
+            }
+            title="总资产"
+            key="assets"
+          
+            selected={this.state.selectedTab === 'assets'}
+            onPress={() => {
+              this.setState({
+                selectedTab: 'assets',
+              });
+            }}
+            data-seed="logId1"
+          >
+            {this.renderContent('assets')}
+          </TabBar.Item>
+          <TabBar.Item
+            icon={
+              <div style={{
+                width: '22px',
+                height: '22px',
+                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user.svg) center center /  21px 21px no-repeat' }}
+              />
+            }
+            selectedIcon={
+              <div style={{
+                width: '22px',
+                height: '22px',
+                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user_s.svg) center center /  21px 21px no-repeat' }}
+              />
+            }
+            title="我的"
+            key="my"
+  
+            selected={this.state.selectedTab === 'my'}
+            onPress={() => {
+              this.setState({
+                selectedTab: 'my',
+              });
+            }}
+          >
+            {this.renderContent('my')}
+          </TabBar.Item>
+        </TabBar>
+      </div>
+    );
+  }
+}
+
+
+export default TabBarBottom

src/case/billApp/src/components/HomePage/Button.jsx

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import { Button, WhiteSpace, WingBlank } from 'antd-mobile';
+import { genPercentAdd } from 'antd/lib/upload/utils';
+
+export default function Buttons(){
+    let buttonStyle={
+        background:"green"
+    }
+    return (
+        <WingBlank>
+            <Button type="primary" style={buttonStyle}>+记一笔</Button><WhiteSpace />
+        </WingBlank>
+    )
+}

src/case/billApp/src/components/HomePage/HomePage.css

@@ -0,0 +1,31 @@
+
+.dateWrap{
+    padding: 10px 15px;
+    text-align: left;
+}
+
+.month{
+    font-size: 20px;
+    color:green;
+}
+.buttonWrap{
+    padding-top: 40px;
+}
+
+
+.listWrap{
+    margin-top: 10px;
+}
+.itemWrap{
+    display: flex;
+}
+
+
+.itemWrap > div:nth-child(1){
+    padding:12px 0;
+}
+
+.itemWrap > div:nth-child(2){
+    padding-left: 175px;
+}
+

src/case/billApp/src/components/HomePage/HomePage.jsx

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+
+import Lists from './List'
+import Buttons from './Button'
+import IconList from './IconList'
+
+import {graphqls} from '../../api/graphql_request'
+import {getBill} from '../../api/graphql/bills'
+
+
+
+import './HomePage.css'
+
+class HomePage  extends Component{
+    constructor(props){
+        super(props)
+        const month =new Date().getMonth()+1
+        const year=new Date().getFullYear()
+        this.state={
+            month,
+            year,
+            bills:[]
+        }
+    }
+
+    getBills(){
+        graphqls(getBill,{}).then((e)=>{
+            console.log(e.billbyprops)
+            this.setState({
+                bills:e.billbyprops
+            })
+        })
+    }
+    componentDidMount(){
+        console.log('组件已加载')
+        this.getBills()
+    }
+    render(){
+        return(
+            <div>
+                <div className="title">{'微记账本'}</div>
+                <div className="dateWrap"><span className="month"> {this.state.month} </span> / {this.state.year}</div>
+               <Lists />
+               <div className="buttonWrap">
+                <Buttons />
+               </div>
+               <IconList />
+            </div>
+        )
+    }
+}
+
+export default HomePage

src/case/billApp/src/components/HomePage/IconList.jsx

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import { List } from 'antd-mobile';
+
+const Item = List.Item;
+
+
+
+export default class IconList extends Component{
+    constructor(props){
+        super(props)
+    }
+
+    render(){
+        return (
+            <div className="listWrap">
+                <List>
+                    <Item
+                    thumb="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/today.svg"
+                    arrow="horizontal"
+                    onClick={() => {}}
+                    >
+                        <div className="itemWrap">
+                            <div>今日</div>
+                            <div>
+                                <div>收入:0.00</div>
+                                <div>支出:0.00</div>
+                            </div>
+                        </div>
+                    </Item>
+                </List>
+                <List>
+                    <Item
+                    thumb="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/week.svg"
+                    onClick={() => {}}
+                    arrow="horizontal"
+                    >
+                    <div className="itemWrap">
+                            <div>本周</div>
+                            <div>
+                                <div>收入:0.00</div>
+                                <div>支出:0.00</div>
+                            </div>
+                        </div>
+                    </Item>
+                </List>
+                <List>
+                    <Item
+                    thumb="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/month.svg"
+                    onClick={() => {}}
+                    arrow="horizontal"
+                    >
+                    <div className="itemWrap">
+                            <div>本月</div>
+                            <div>
+                                <div>收入:0.00</div>
+                                <div>支出:0.00</div>
+                            </div>
+                        </div>
+                    </Item>
+                </List>
+                <List>
+                    <Item
+                    thumb="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/all.svg"
+                    onClick={() => {}}
+                    arrow="horizontal"
+                    >
+                    <div className="itemWrap">
+                            <div>所有</div>
+                            <div>
+                                <div>收入:0.00</div>
+                                <div>支出:0.00</div>
+                            </div>
+                        </div>
+                    </Item>
+                </List>
+            </div>
+            
+        )
+    }
+}
+

src/case/billApp/src/components/HomePage/List.jsx

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import { List } from 'antd-mobile';
+
+const Item = List.Item;
+
+export default class Lists extends React.Component {
+  state = {
+    disabled: false,
+  }
+
+  render() {
+    return (
+      <List className="my-list">
+        <Item extra={'￥0.00'} >本月收入</Item>
+        <Item extra={'￥0.00'} >本月支出</Item>
+      </List>
+      )
+    }
+}

src/case/billApp/src/images/assets.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543452683449" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3344" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M510.976 951.808c-114.688 0-225.792-45.056-309.76-129.024-82.944-82.944-128.512-193.536-128.512-310.784s45.568-227.84 128.512-310.784S394.752 72.192 512 72.192c0 0 0 0 0 0 117.248 0 227.84 45.568 310.784 128.512S951.296 394.24 951.296 512c0 117.248-45.568 227.84-128.512 310.784-11.264 11.264-30.208 11.264-41.472 0-11.264-11.264-11.264-30.208 0-41.472 148.48-148.48 148.48-390.144 0-538.624-72.192-72.192-167.424-111.616-269.312-111.616-101.888 0-197.632 39.424-269.312 111.616-148.48 148.48-148.48 390.144 0 538.624 102.4 102.4 251.904 137.728 389.632 92.16 15.36-5.12 31.744 3.072 36.864 18.432 5.12 15.36-3.072 31.744-18.432 36.864C604.672 944.128 557.568 951.808 510.976 951.808z" p-id="3345" fill="#707070"></path><path d="M481.28 748.032 481.28 748.032c-7.68 0-15.36-3.072-20.48-8.704L284.16 563.2c-11.264-11.264-11.264-30.208 0-41.472L522.24 284.16c11.264-11.264 30.208-11.264 41.472 0l176.128 176.128c11.264 11.264 11.264 30.208 0 41.472L501.76 739.328C496.64 744.96 488.96 748.032 481.28 748.032zM346.624 542.72 481.28 677.376 677.376 481.28 542.72 346.624 346.624 542.72z" p-id="3346" fill="#707070"></path><path d="M798.208 835.072c-7.68 0-14.848-3.072-20.48-8.704L575.488 624.64c-11.264-11.264-11.264-30.208 0-41.472 11.264-11.264 30.208-11.264 41.472 0l202.24 202.24c11.264 11.264 11.264 30.208 0 41.472C813.056 832.512 805.376 835.072 798.208 835.072z" p-id="3347" fill="#707070"></path></svg>

src/case/billApp/src/images/assets_s.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543452683449" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3344" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M510.976 951.808c-114.688 0-225.792-45.056-309.76-129.024-82.944-82.944-128.512-193.536-128.512-310.784s45.568-227.84 128.512-310.784S394.752 72.192 512 72.192c0 0 0 0 0 0 117.248 0 227.84 45.568 310.784 128.512S951.296 394.24 951.296 512c0 117.248-45.568 227.84-128.512 310.784-11.264 11.264-30.208 11.264-41.472 0-11.264-11.264-11.264-30.208 0-41.472 148.48-148.48 148.48-390.144 0-538.624-72.192-72.192-167.424-111.616-269.312-111.616-101.888 0-197.632 39.424-269.312 111.616-148.48 148.48-148.48 390.144 0 538.624 102.4 102.4 251.904 137.728 389.632 92.16 15.36-5.12 31.744 3.072 36.864 18.432 5.12 15.36-3.072 31.744-18.432 36.864C604.672 944.128 557.568 951.808 510.976 951.808z" p-id="3345" fill="#1296db"></path><path d="M481.28 748.032 481.28 748.032c-7.68 0-15.36-3.072-20.48-8.704L284.16 563.2c-11.264-11.264-11.264-30.208 0-41.472L522.24 284.16c11.264-11.264 30.208-11.264 41.472 0l176.128 176.128c11.264 11.264 11.264 30.208 0 41.472L501.76 739.328C496.64 744.96 488.96 748.032 481.28 748.032zM346.624 542.72 481.28 677.376 677.376 481.28 542.72 346.624 346.624 542.72z" p-id="3346" fill="#1296db"></path><path d="M798.208 835.072c-7.68 0-14.848-3.072-20.48-8.704L575.488 624.64c-11.264-11.264-11.264-30.208 0-41.472 11.264-11.264 30.208-11.264 41.472 0l202.24 202.24c11.264 11.264 11.264 30.208 0 41.472C813.056 832.512 805.376 835.072 798.208 835.072z" p-id="3347" fill="#1296db"></path></svg>

src/case/billApp/src/images/bill.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543452622636" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2411" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M977.454545 535.272727V116.363636c0-65.163636-46.545455-116.363636-116.363636-116.363636H179.2C116.363636 0 46.545455 46.545455 46.545455 114.036364V907.636364c0 69.818182 69.818182 116.363636 132.654545 116.363636H861.090909c69.818182 0 116.363636-51.2 116.363636-116.363636V535.272727z m-46.545454 186.181818v186.181819c0 39.563636-25.6 69.818182-69.818182 69.818181H179.2C139.636364 977.454545 93.090909 947.2 93.090909 907.636364V114.036364C93.090909 74.472727 139.636364 46.545455 179.2 46.545455H861.090909c44.218182 0 69.818182 30.254545 69.818182 69.818181v605.090909z" fill="#707070" p-id="2412"></path><path d="M691.2 216.436364c-9.309091-9.309091-23.272727-9.309091-32.581818 0L512 363.054545l-146.618182-146.618181c-9.309091-9.309091-23.272727-9.309091-32.581818 0-9.309091 9.309091-9.309091 23.272727 0 32.581818l146.618182 146.618182H349.090909c-11.636364 0-23.272727 11.636364-23.272727 23.272727s11.636364 23.272727 23.272727 23.272727h139.636364v116.363637h-139.636364c-11.636364 0-23.272727 11.636364-23.272727 23.272727s11.636364 23.272727 23.272727 23.272727h139.636364v186.181818c0 11.636364 11.636364 23.272727 23.272727 23.272728s23.272727-11.636364 23.272727-23.272728v-186.181818h139.636364c11.636364 0 23.272727-11.636364 23.272727-23.272727s-11.636364-23.272727-23.272727-23.272727h-139.636364v-116.363637h139.636364c11.636364 0 23.272727-11.636364 23.272727-23.272727s-11.636364-23.272727-23.272727-23.272727h-130.327273l146.618182-146.618182c9.309091-9.309091 9.309091-23.272727 0-32.581818z" fill="#707070" p-id="2413"></path></svg>

src/case/billApp/src/images/bill_s.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543452622636" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2411" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M977.454545 535.272727V116.363636c0-65.163636-46.545455-116.363636-116.363636-116.363636H179.2C116.363636 0 46.545455 46.545455 46.545455 114.036364V907.636364c0 69.818182 69.818182 116.363636 132.654545 116.363636H861.090909c69.818182 0 116.363636-51.2 116.363636-116.363636V535.272727z m-46.545454 186.181818v186.181819c0 39.563636-25.6 69.818182-69.818182 69.818181H179.2C139.636364 977.454545 93.090909 947.2 93.090909 907.636364V114.036364C93.090909 74.472727 139.636364 46.545455 179.2 46.545455H861.090909c44.218182 0 69.818182 30.254545 69.818182 69.818181v605.090909z" fill="#1296db" p-id="2412"></path><path d="M691.2 216.436364c-9.309091-9.309091-23.272727-9.309091-32.581818 0L512 363.054545l-146.618182-146.618181c-9.309091-9.309091-23.272727-9.309091-32.581818 0-9.309091 9.309091-9.309091 23.272727 0 32.581818l146.618182 146.618182H349.090909c-11.636364 0-23.272727 11.636364-23.272727 23.272727s11.636364 23.272727 23.272727 23.272727h139.636364v116.363637h-139.636364c-11.636364 0-23.272727 11.636364-23.272727 23.272727s11.636364 23.272727 23.272727 23.272727h139.636364v186.181818c0 11.636364 11.636364 23.272727 23.272727 23.272728s23.272727-11.636364 23.272727-23.272728v-186.181818h139.636364c11.636364 0 23.272727-11.636364 23.272727-23.272727s-11.636364-23.272727-23.272727-23.272727h-139.636364v-116.363637h139.636364c11.636364 0 23.272727-11.636364 23.272727-23.272727s-11.636364-23.272727-23.272727-23.272727h-130.327273l146.618182-146.618182c9.309091-9.309091 9.309091-23.272727 0-32.581818z" fill="#1296db" p-id="2413"></path></svg>

src/case/billApp/src/images/user.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543305670471" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4005" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.47776 959.86688c-247.40864 0-448.6656-201.25184-448.6656-448.6656 0-247.36256 201.25696-448.6656 448.6656-448.6656 247.41376 0 448.61952 201.30304 448.61952 448.6656 0 247.41376-201.20576 448.6656-448.6144 448.6656z m0-851.072c-221.92128 0-402.40128 180.5312-402.40128 402.4064s180.48 402.4064 402.40128 402.4064c221.8752 0 402.36032-180.5312 402.36032-402.4064s-180.48512-402.4064-402.36032-402.4064z m0 484.64384c-99.64544 0-180.73088-81.08032-180.73088-180.73088s81.08544-180.736 180.736-180.736c99.64544 0 180.72576 81.08544 180.72576 180.736 0 99.65056-81.08032 180.73088-180.73088 180.73088z m0-315.19744c-74.15808 0-134.46656 60.30848-134.46656 134.46656s60.3136 134.47168 134.46656 134.47168c74.1632 0 134.47168-60.3136 134.47168-134.47168s-60.3136-134.46656-134.47168-134.46656z m225.29024 487.64928a23.168 23.168 0 0 1-22.03136-16.15872c-28.29824-88.76032-109.9776-148.41856-203.25888-148.41856-87.7056 0-167.7312 54.99392-199.18848 136.832a23.02976 23.02976 0 0 1-29.85472 13.29152 23.0912 23.0912 0 0 1-13.30176-29.8496c38.23616-99.59936 135.6288-166.53312 242.35008-166.53312 113.44384 0 212.89472 72.6528 247.31648 180.6336a23.12704 23.12704 0 0 1-15.0016 29.10208 24.8064 24.8064 0 0 1-7.02976 1.09568z" p-id="4006" fill="#707070"></path></svg>

src/case/billApp/src/images/user_select.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543305670471" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4005" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.47776 959.86688c-247.40864 0-448.6656-201.25184-448.6656-448.6656 0-247.36256 201.25696-448.6656 448.6656-448.6656 247.41376 0 448.61952 201.30304 448.61952 448.6656 0 247.41376-201.20576 448.6656-448.6144 448.6656z m0-851.072c-221.92128 0-402.40128 180.5312-402.40128 402.4064s180.48 402.4064 402.40128 402.4064c221.8752 0 402.36032-180.5312 402.36032-402.4064s-180.48512-402.4064-402.36032-402.4064z m0 484.64384c-99.64544 0-180.73088-81.08032-180.73088-180.73088s81.08544-180.736 180.736-180.736c99.64544 0 180.72576 81.08544 180.72576 180.736 0 99.65056-81.08032 180.73088-180.73088 180.73088z m0-315.19744c-74.15808 0-134.46656 60.30848-134.46656 134.46656s60.3136 134.47168 134.46656 134.47168c74.1632 0 134.47168-60.3136 134.47168-134.47168s-60.3136-134.46656-134.47168-134.46656z m225.29024 487.64928a23.168 23.168 0 0 1-22.03136-16.15872c-28.29824-88.76032-109.9776-148.41856-203.25888-148.41856-87.7056 0-167.7312 54.99392-199.18848 136.832a23.02976 23.02976 0 0 1-29.85472 13.29152 23.0912 23.0912 0 0 1-13.30176-29.8496c38.23616-99.59936 135.6288-166.53312 242.35008-166.53312 113.44384 0 212.89472 72.6528 247.31648 180.6336a23.12704 23.12704 0 0 1-15.0016 29.10208 24.8064 24.8064 0 0 1-7.02976 1.09568z" p-id="4006" fill="#1296db"></path></svg>

src/case/billApp/src/index.css

@@ -0,0 +1,15 @@
+body {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}

src/case/billApp/src/index.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+//import { Button } from 'antd-mobile';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: http://bit.ly/CRA-PWA
+serviceWorker.unregister();
+
+

src/case/billApp/src/serviceWorker.js

@@ -0,0 +1,135 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read http://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit http://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}