修改购物车页面

config/webpack.config.js

@@ -455,6 +455,10 @@ module.exports = function(webpackEnv) {
                 'sass-loader'
               ),
             },
+            {
+              test: /\.scss$/,
+              loaders: ['style-loader', 'css-loader', 'sass-loader'],
+            },
             // "file" loader makes sure those assets get served by WebpackDevServer.
             // When you `import` an asset, you get its (virtual) filename.
             // In production, they would get copied to the `build` folder.
@@ -466,7 +470,7 @@ module.exports = function(webpackEnv) {
               // its runtime that would otherwise be processed through "file" loader.
               // Also exclude `html` and `json` extensions so they get processed
               // by webpacks internal loaders.
-              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/,/\.scss$/],
               options: {
                 name: 'static/media/[name].[hash:8].[ext]',
               },

package.json

@@ -40,6 +40,7 @@
     "jest-resolve": "23.6.0",
     "jest-watch-typeahead": "^0.2.1",
     "mini-css-extract-plugin": "0.5.0",
+    "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.2.1",
     "postcss-flexbugs-fixes": "4.1.0",

src/App.js

@@ -1,4 +1,5 @@
 import React, {Component} from 'react'
+import {Icon} from 'antd'
 import {TabBar} from 'antd-mobile'
 import Home from './pages/home'
 import Cart from './pages/cart'
@@ -41,9 +42,9 @@ class App extends Component {
                         <Home/>
                     </TabBar.Item>
                     <TabBar.Item
-                        icon={<CartUnselectedIcon/>}
-                        selectedIcon={<CartSelectedIcon/>}
-                        title="购物车"
+                        icon={<Icon type="shopping" style={{fontSize:22}}/>}
+                        selectedIcon={<Icon type="shopping" theme="twoTone" style={{fontSize:22}}/>}
+                        title="购物袋"
                         key="cart"
                         selected={selectedTab === 'cart'}
                         onPress={() => {

src/pages/cart/index.js

@@ -1,7 +1,10 @@
 import React, {Component} from 'react'
+import { NavBar } from 'antd-mobile';
+import {Tab3} from "./Cart";
+
 class Cart extends Component {
     constructor(props) {
-        super(props)
+        super(props);
         this.state = {
 
         }
@@ -9,7 +12,16 @@ class Cart extends Component {
 
     render() {
         return (
-            <div>cart</div>
+            <div>
+                <NavBar
+                    mode="light"
+                    rightContent={[
+                        <span key={"1"}>编辑</span>
+                    ]}
+                >购物袋
+                </NavBar>
+                <Tab3/>
+            </div>
         )
     }
 }