1226

package-lock.json

@@ -1729,14 +1729,12 @@
     "ansi-regex": {
       "version": "4.1.0",
       "resolved": "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-4.1.0.tgz",
-      "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc=",
-      "dev": true
+      "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc="
     },
     "ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz",
       "integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -2090,8 +2088,7 @@
     "base64-js": {
       "version": "1.3.1",
       "resolved": "https://registry.npm.taobao.org/base64-js/download/base64-js-1.3.1.tgz",
-      "integrity": "sha1-WOzoy3XdB+ce0IxzarxfrE2/jfE=",
-      "dev": true
+      "integrity": "sha1-WOzoy3XdB+ce0IxzarxfrE2/jfE="
     },
     "batch": {
       "version": "0.6.1",
@@ -2351,11 +2348,29 @@
         "isarray": "^1.0.0"
       }
     },
+    "buffer-alloc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
+      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
+      "requires": {
+        "buffer-alloc-unsafe": "^1.1.0",
+        "buffer-fill": "^1.0.0"
+      }
+    },
+    "buffer-alloc-unsafe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
+      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
+    },
+    "buffer-fill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
+      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw="
+    },
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/buffer-from/download/buffer-from-1.1.1.tgz",
-      "integrity": "sha1-MnE7wCj3XAL9txDXx7zsHyxgcO8=",
-      "dev": true
+      "integrity": "sha1-MnE7wCj3XAL9txDXx7zsHyxgcO8="
     },
     "buffer-indexof": {
       "version": "1.1.1",
@@ -2555,8 +2570,7 @@
     "camelcase": {
       "version": "5.3.1",
       "resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-5.3.1.tgz",
-      "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA=",
-      "dev": true
+      "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA="
     },
     "caniuse-api": {
       "version": "3.0.0",
@@ -2791,7 +2805,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npm.taobao.org/cliui/download/cliui-5.0.0.tgz",
       "integrity": "sha1-3u/P2y6AB4SqNPRvoI4GhRx7u8U=",
-      "dev": true,
       "requires": {
         "string-width": "^3.1.0",
         "strip-ansi": "^5.2.0",
@@ -2801,14 +2814,12 @@
         "emoji-regex": {
           "version": "7.0.3",
           "resolved": "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-7.0.3.tgz",
-          "integrity": "sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY=",
-          "dev": true
+          "integrity": "sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY="
         },
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npm.taobao.org/string-width/download/string-width-3.1.0.tgz",
           "integrity": "sha1-InZ74htirxCBV0MG9prFG2IgOWE=",
-          "dev": true,
           "requires": {
             "emoji-regex": "^7.0.1",
             "is-fullwidth-code-point": "^2.0.0",
@@ -2819,7 +2830,6 @@
           "version": "5.2.0",
           "resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-5.2.0.tgz?cache=0&sync_timestamp=1573280518303&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstrip-ansi%2Fdownload%2Fstrip-ansi-5.2.0.tgz",
           "integrity": "sha1-jJpTb+tq/JYr36WxBKUJHBrZwK4=",
-          "dev": true,
           "requires": {
             "ansi-regex": "^4.1.0"
           }
@@ -2828,7 +2838,6 @@
           "version": "5.1.0",
           "resolved": "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-5.1.0.tgz",
           "integrity": "sha1-H9H2cjXVttD+54EFYAG/tpTAOwk=",
-          "dev": true,
           "requires": {
             "ansi-styles": "^3.2.0",
             "string-width": "^3.0.0",
@@ -2884,7 +2893,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz",
       "integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -2892,8 +2900,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "1.5.3",
@@ -3489,8 +3496,7 @@
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/decamelize/download/decamelize-1.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdecamelize%2Fdownload%2Fdecamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "dev": true
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
     },
     "decode-uri-component": {
       "version": "0.2.0",
@@ -3781,6 +3787,11 @@
         "randombytes": "^2.0.0"
       }
     },
+    "dijkstrajs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.1.tgz",
+      "integrity": "sha1-082BIh4+pAdCz83lVtTpnpjdxxs="
+    },
     "dir-glob": {
       "version": "2.2.2",
       "resolved": "https://registry.npm.taobao.org/dir-glob/download/dir-glob-2.2.2.tgz",
@@ -4516,7 +4527,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/find-up/download/find-up-3.0.0.tgz",
       "integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
-      "dev": true,
       "requires": {
         "locate-path": "^3.0.0"
       }
@@ -5200,8 +5210,7 @@
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npm.taobao.org/get-caller-file/download/get-caller-file-2.0.5.tgz",
-      "integrity": "sha1-T5RBKoLbMvNuOwuXQfipf+sDH34=",
-      "dev": true
+      "integrity": "sha1-T5RBKoLbMvNuOwuXQfipf+sDH34="
     },
     "get-stream": {
       "version": "4.1.0",
@@ -5718,8 +5727,7 @@
     "ieee754": {
       "version": "1.1.13",
       "resolved": "https://registry.npm.taobao.org/ieee754/download/ieee754-1.1.13.tgz",
-      "integrity": "sha1-7BaFWOlaoYH9h9N/VcMrvLZwi4Q=",
-      "dev": true
+      "integrity": "sha1-7BaFWOlaoYH9h9N/VcMrvLZwi4Q="
     },
     "iferr": {
       "version": "0.1.5",
@@ -6012,8 +6020,7 @@
     "is-fullwidth-code-point": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-      "dev": true
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
     },
     "is-glob": {
       "version": "4.0.1",
@@ -6442,7 +6449,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-3.0.0.tgz",
       "integrity": "sha1-2+w7OrdZdYBxtY/ln8QYca8hQA4=",
-      "dev": true,
       "requires": {
         "p-locate": "^3.0.0",
         "path-exists": "^3.0.0"
@@ -7366,7 +7372,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npm.taobao.org/p-limit/download/p-limit-2.2.1.tgz",
       "integrity": "sha1-qgeniMwxUck5tRMfY1cPDdIAlTc=",
-      "dev": true,
       "requires": {
         "p-try": "^2.0.0"
       }
@@ -7375,7 +7380,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/p-locate/download/p-locate-3.0.0.tgz",
       "integrity": "sha1-Mi1poFwCZLJZl9n0DNiokasAZKQ=",
-      "dev": true,
       "requires": {
         "p-limit": "^2.0.0"
       }
@@ -7401,8 +7405,7 @@
     "p-try": {
       "version": "2.2.0",
       "resolved": "https://registry.npm.taobao.org/p-try/download/p-try-2.2.0.tgz",
-      "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=",
-      "dev": true
+      "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY="
     },
     "pako": {
       "version": "1.0.10",
@@ -7496,8 +7499,7 @@
     "path-exists": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/path-exists/download/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-      "dev": true
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
     },
     "path-is-absolute": {
       "version": "1.0.1",
@@ -7595,6 +7597,11 @@
         "find-up": "^3.0.0"
       }
     },
+    "pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
+      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w=="
+    },
     "portfinder": {
       "version": "1.0.25",
       "resolved": "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.25.tgz",
@@ -8259,6 +8266,85 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
+    "qrcode": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.4.4.tgz",
+      "integrity": "sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==",
+      "requires": {
+        "buffer": "^5.4.3",
+        "buffer-alloc": "^1.2.0",
+        "buffer-from": "^1.1.1",
+        "dijkstrajs": "^1.0.1",
+        "isarray": "^2.0.1",
+        "pngjs": "^3.3.0",
+        "yargs": "^13.2.4"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "5.4.3",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.4.3.tgz",
+          "integrity": "sha512-zvj65TkFeIt3i6aj5bIvJDzjjQQGs4o/sNoezg1F1kYap9Nu2jcUdpwzRSJTHMMzG0H7bZkn4rNQpImhuxWX2A==",
+          "requires": {
+            "base64-js": "^1.0.2",
+            "ieee754": "^1.1.4"
+          }
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+        },
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "yargs": {
+          "version": "13.3.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.0.tgz",
+          "integrity": "sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==",
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz",
+          "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "qs": {
       "version": "6.9.1",
       "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.9.1.tgz",
@@ -8607,14 +8693,12 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/require-directory/download/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-      "dev": true
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
     },
     "require-main-filename": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/require-main-filename/download/require-main-filename-2.0.0.tgz",
-      "integrity": "sha1-0LMp7MfMD2Fkn2IhW+aa9UqomJs=",
-      "dev": true
+      "integrity": "sha1-0LMp7MfMD2Fkn2IhW+aa9UqomJs="
     },
     "requires-port": {
       "version": "1.0.0",
@@ -8901,8 +8985,7 @@
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/set-blocking/download/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-      "dev": true
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
     },
     "set-value": {
       "version": "2.0.1",
@@ -10207,6 +10290,11 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-qrcode": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npm.taobao.org/vue-qrcode/download/vue-qrcode-0.2.2.tgz",
+      "integrity": "sha1-P/JSi3GajO3XiV5TtF6My598WDI="
+    },
     "vue-router": {
       "version": "3.1.3",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.3.tgz",
@@ -10618,8 +10706,7 @@
     "which-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/which-module/download/which-module-2.0.0.tgz",
-      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
-      "dev": true
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
     },
     "worker-farm": {
       "version": "1.7.0",
@@ -10709,8 +10796,7 @@
     "y18n": {
       "version": "4.0.0",
       "resolved": "https://registry.npm.taobao.org/y18n/download/y18n-4.0.0.tgz",
-      "integrity": "sha1-le+U+F7MgdAHwmThkKEg8KPIVms=",
-      "dev": true
+      "integrity": "sha1-le+U+F7MgdAHwmThkKEg8KPIVms="
     },
     "yallist": {
       "version": "3.1.1",

package.json

@@ -1,26 +1,28 @@
 {
-  "name": "paintingmarket",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
-  },
-  "dependencies": {
-    "axios": "^0.19.0",
-    "core-js": "^3.4.3",
-    "date-fns": "^2.8.1",
-    "qs": "^6.9.1",
-    "vant": "^2.2.16",
-    "vue": "^2.6.10",
-    "vue-router": "^3.1.3",
-    "vuex": "^3.1.2"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.0",
-    "@vue/cli-service": "^4.1.0",
-    "less": "^3.0.4",
-    "less-loader": "^5.0.0",
-    "vue-template-compiler": "^2.6.10"
-  }
+    "name": "paintingmarket",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build"
+    },
+    "dependencies": {
+        "axios": "^0.19.0",
+        "core-js": "^3.4.3",
+        "date-fns": "^2.8.1",
+        "qrcode": "^1.4.4",
+        "qs": "^6.9.1",
+        "vant": "^2.2.16",
+        "vue": "^2.6.10",
+        "vue-qrcode": "^0.2.2",
+        "vue-router": "^3.1.3",
+        "vuex": "^3.1.2"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "^4.1.0",
+        "@vue/cli-service": "^4.1.0",
+        "less": "^3.0.4",
+        "less-loader": "^5.0.0",
+        "vue-template-compiler": "^2.6.10"
+    }
 }

src/components/DistributionOrder.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="orderInfo">
+    <div class="top">
+      <div class="label">一级分销</div>
+      <div class="value">预计佣金：+5.68</div>
+    </div>
+    <div class="center">
+      <van-image
+        class="suk-img"
+        width="50"
+        height="50"
+        fit="cover"
+        src="https://img.yzcdn.cn/vant/cat.jpeg"
+      />
+
+      <div class="right">
+          <div class="text1">知名国画大家刘大为《高原行旅》</div>
+          <div class="text2">
+              <div class="price">¥5683.50</div>
+              <div class="num">x1</div>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "orderInfo",
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(["userInfo"])
+  }
+};
+</script>
+<style lang='less' scoped>
+.orderInfo {
+  background: rgba(255, 255, 255, 1);
+  border-radius: 2px;
+  padding: 0 15px;
+}
+
+.top {
+  position: relative;
+  height: 44px;
+  text-align: right;
+  border-bottom: 1px solid #f2f4f5;
+  .label {
+    width: 70px;
+    height: 24px;
+    background: rgba(255, 143, 0, 1);
+    border-radius: 0px 100px 100px 0px;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 1);
+    line-height: 24px;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: 10px;
+  }
+
+  .value {
+    font-size: 13px;
+    font-weight: bold;
+    color: rgba(255, 143, 0, 1);
+    line-height: 44px;
+  }
+}
+</style>

src/components/OrderInfo.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="order-info">
+    <div class="order-top">
+      <div class="order-no">订单编号:2019052035464</div>
+      <div class="order-staus">待支付</div>
+    </div>
+
+    <div class="order-content">
+      <van-image
+        class="suk-img"
+        width="80"
+        height="80"
+        fit="cover"
+        src="https://img.yzcdn.cn/vant/cat.jpeg"
+      />
+
+      <div class="order-text">
+        <div class="van-ellipsis text1">知名国画大家刘大为《高原行旅》</div>
+
+        <div class="text2">产品所有人为：杨雯钰</div>
+
+        <div class="text3">
+          <div class="price">¥4336.24</div>
+          <div class="num">X1</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="order-price">
+      <div class="price">
+        <span>实际支付:</span>
+        <span>¥4336.24</span>
+      </div>
+
+      <div class="order-tips">付款倒计时过期自动取消订单 59分16秒</div>
+    </div>
+
+    <div class="order-button">
+      <van-button type="primary" round size="small">我已付款</van-button>
+      <van-button color="#FF8F00" round plain size="small">立即支付</van-button>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "orderInfo",
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(["userInfo"])
+  }
+};
+</script>
+<style lang='less' scoped>
+.order-info {
+  padding: 0 15px;
+  background: rgba(255, 255, 255, 1);
+  border-radius: 2px;
+}
+.order-top {
+  display: flex;
+  justify-content: space-between;
+  height: 43px;
+  align-items: center;
+}
+
+.text1 {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 1);
+  line-height: 20px;
+}
+
+.text2 {
+  font-size: 12px;
+  color: rgba(255, 143, 0, 1);
+  line-height: 22px;
+  height: 22px;
+  background: rgba(255, 143, 0, 0.12);
+  border-radius: 2px 100px 100px 100px;
+  padding: 0 8px;
+  margin-top: 5px;
+  display: inline-block;
+}
+
+.text3 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 13px;
+
+  .price {
+    font-size: 14px;
+    font-weight: bold;
+    color: rgba(0, 0, 0, 1);
+    line-height: 20px;
+  }
+
+  .num {
+    font-size: 14px;
+    color: rgba(170, 172, 173, 1);
+    line-height: 20px;
+  }
+}
+.order-content {
+  display: flex;
+
+  .order-text {
+    margin-left: 10px;
+    flex-grow: 1;
+    overflow: hidden;
+  }
+}
+
+.order-price {
+  text-align: right;
+
+  .price {
+    font-size: 12px;
+    color: rgba(102, 102, 102, 1);
+    line-height: 17px;
+    margin-top: 18px;
+    span {
+      &:last-child {
+        font-size: 16px;
+        font-weight: bold;
+        color: rgba(255, 59, 48, 1);
+        line-height: 22px;
+      }
+    }
+  }
+  .order-tips {
+    font-size: 12px;
+    color: rgba(255, 143, 0, 1);
+    line-height: 17px;
+    margin-top: 8px;
+  }
+}
+
+.order-button {
+  padding: 15px 0;
+  display: flex;
+  justify-content: flex-end;
+  border-top: 1px solid #f2f4f5;
+  margin-top: 15px;
+
+  .van-button {
+    margin-left: 10px;
+    height: 28px;
+  }
+}
+</style>

src/main.less

@@ -205,7 +205,8 @@
 
 }
 
-.change-content,.bind-phone {
+.change-content,
+.bind-phone {
 
   .van-field__label {
     font-weight: bold;
@@ -223,7 +224,13 @@
     }
   }
 }
+
 .bind-phone {
   .van-field__label {
     width: 85px;
-  }}
+  }
+}
+
+.van-tabs__line {
+  background-color: #FF7900;
+}

src/router/index.js

@@ -23,7 +23,10 @@ const routes = [{
                 path: "/distribution",
                 name: "distribution",
                 component: () =>
-                    import ("../views/Distribution.vue")
+                    import ("../views/distribution/Index.vue"),
+                meta: {
+                    title: "分销中心"
+                }
             },
             {
                 path: "/user",
@@ -96,7 +99,43 @@ const routes = [{
         component: () =>
             import ("../views/BindAlipay.vue"),
         meta: {
-            title: "绑定手机号"
+            title: "绑定支付宝"
+        }
+    },
+    {
+        path: "/orderList",
+        name: "orderList",
+        component: () =>
+            import ("../views/order/OrderList.vue"),
+        meta: {
+            title: "我的订单"
+        }
+    },
+    {
+        path: "/submit",
+        name: "submit",
+        component: () =>
+            import ("../views/order/Submit.vue"),
+        meta: {
+            title: "我的订单"
+        }
+    },
+    {
+        path: "/commission",
+        name: "commission",
+        component: () =>
+            import ("../views/distribution/Commission.vue"),
+        meta: {
+            title: "分销佣金"
+        }
+    },
+    {
+        path: "/distributionOrder",
+        name: "distributionOrder",
+        component: () =>
+            import ("../views/distribution/Order.vue"),
+        meta: {
+            title: "分销订单"
         }
     }
 ];

src/views/Distribution.vue

@@ -1,19 +0,0 @@
-<template>
-   <div class=''>
-   </div>
-</template>
-<script>
-import { mapState } from 'vuex'
-export default {
-   name:'',
-   data() {
-       return {
-       }
-   },
-   computed: {
-       ...mapState(['userInfo']),  
-   }
-}
-</script>
-<style lang='less' scoped>
-</style>

src/views/Home.vue

@@ -1,129 +1,163 @@
 <template>
-    <div class='home'>
-        <van-swipe :autoplay="5000">
-            <van-swipe-item v-for="(image, index) in images" :key="index">
-                <van-image width="100%" height="200" :src="image" fit="cover" />
-            </van-swipe-item>
-        </van-swipe>
+  <div class="home">
+    <van-swipe :autoplay="5000">
+      <van-swipe-item v-for="(image, index) in images" :key="index">
+        <van-image width="100%" height="200" :src="image" fit="cover" />
+      </van-swipe-item>
+    </van-swipe>
 
-        <van-row gutter="24" class="menus">
-            <van-col span="6" class="menu-item" @click="goNext('list')">
-                <img src="../assets/home_jingang_01.png" class="img" alt="">
-                <div class="text">知琴阁</div>
-            </van-col>
-            <van-col span="6" class="menu-item">
-                <img src="../assets/home_jingang_02.png" class="img" alt="">
-                <div class="text">待开放</div>
-            </van-col>
-            <van-col span="6" class="menu-item">
-                <img src="../assets/home_jingang_03.png" class="img" alt="">
-                <div class="text">待开放</div>
-            </van-col>
-            <van-col span="6" class="menu-item" >
-                <img src="../assets/home_jingang_04.png" class="img" alt="">
-                <div class="text">悦画阁</div>
-            </van-col>
-        </van-row>
+    <van-row gutter="24" class="menus">
+      <van-col span="6" class="menu-item" @click="goNext('list')">
+        <img src="../assets/home_jingang_01.png" class="img" alt />
+        <div class="text">知琴阁</div>
+      </van-col>
+      <van-col span="6" class="menu-item">
+        <img src="../assets/home_jingang_02.png" class="img" alt />
+        <div class="text">待开放</div>
+      </van-col>
+      <van-col span="6" class="menu-item">
+        <img src="../assets/home_jingang_03.png" class="img" alt />
+        <div class="text">待开放</div>
+      </van-col>
+      <van-col span="6" class="menu-item">
+        <img src="../assets/home_jingang_04.png" class="img" alt />
+        <div class="text">悦画阁</div>
+      </van-col>
+    </van-row>
 
-        <van-notice-bar class="notice" color="#666666" background="#F2F4F5">
-            <img class="notice-img" slot="left-icon"
-                src="../assets/home_icon_redian.png" alt="">
-            <span>通知文字内容通通知文字内容</span>
-        </van-notice-bar>
+    <van-notice-bar class="notice" color="#666666" background="#F2F4F5">
+      <img class="notice-img" slot="left-icon" src="../assets/home_icon_redian.png" alt />
+      <span>通知文字内容通通知文字内容</span>
+    </van-notice-bar>
 
-        <div class="special-list">
-            <van-row class="special-row">
-                <van-col span="24">
-                    <van-image width="100%" height="85" :src="image1"
-                        fit="contain" />
-                </van-col>
-            </van-row>
-            <van-row gutter="9" class="special-row">
-                <van-col span="12">
-                    <van-image width="100%" height="90" :src="image2"
-                        fit="contain" />
-                </van-col>
-                <van-col span="12">
-                    <van-image width="100%" height="90" :src="image2"
-                        fit="contain" />
-                </van-col>
-            </van-row>
-        </div>
+    <div class="special-list">
+      <van-row class="special-row">
+        <van-col span="24">
+          <van-image width="100%" height="85" :src="image1" fit="contain" />
+        </van-col>
+      </van-row>
+      <van-row gutter="9" class="special-row">
+        <van-col span="12">
+          <van-image width="100%" height="90" :src="image2" fit="contain" />
+        </van-col>
+        <van-col span="12">
+          <van-image width="100%" height="90" :src="image2" fit="contain" />
+        </van-col>
+      </van-row>
+    </div>
 
-        <div class="suk-list">
-            <van-image class="suk-item" width="100%" height="160" :src="image3"
-                fit="cover" />
-        </div>
+    <div class="suk-list">
+      <van-image class="suk-item" width="100%" height="160" :src="image3" fit="cover" />
     </div>
+
+    <van-row gutter="15" class="rule-row">
+      <van-col span="12">
+        <div class="rule-item">
+          <img src="../assets/home_icon_pingtaixieyi.png" alt />
+          <span>平台协议</span>
+        </div>
+      </van-col>
+      <van-col span="12">
+        <div class="rule-item">
+          <img src="../assets/home_icon_liucheng.png" alt />
+          <span>注册及购销流程</span>
+        </div>
+      </van-col>
+    </van-row>
+  </div>
 </template>
 <script>
 import { mapState } from "vuex";
 export default {
-    name: "",
-    data() {
-        return {
-            images: [
-                "https://img.yzcdn.cn/vant/apple-1.jpg",
-                "https://img.yzcdn.cn/vant/apple-2.jpg"
-            ],
-            image1: require("../assets/home_cipian_img_01.png"),
-            image2: require("../assets/home_cipian_img_02.png"),
-            image3: require("../assets/home_dibu_img_01.png")
-        };
-    },
-    computed: {
-        ...mapState(["userInfo"])
-    },
-    methods: {}
+  name: "",
+  data() {
+    return {
+      images: [
+        "https://img.yzcdn.cn/vant/apple-1.jpg",
+        "https://img.yzcdn.cn/vant/apple-2.jpg"
+      ],
+      image1: require("../assets/home_cipian_img_01.png"),
+      image2: require("../assets/home_cipian_img_02.png"),
+      image3: require("../assets/home_dibu_img_01.png")
+    };
+  },
+  computed: {
+    ...mapState(["userInfo"])
+  },
+  methods: {}
 };
 </script>
 <style lang='less' scoped>
 .swipe-img {
-    width: 100%;
-    height: 200px;
+  width: 100%;
+  height: 200px;
 }
 
 .menus {
-    padding: 20px 32px 18px;
-    .menu-item {
-        .img {
-            width: 60px;
-            height: 60px;
-        }
+  padding: 20px 32px 18px;
+  .menu-item {
+    .img {
+      width: 60px;
+      height: 60px;
+    }
 
-        .text {
-            font-size: 13px;
-            font-weight: bold;
-            color: rgba(51, 51, 51, 1);
-            line-height: 19px;
-            margin-top: 3px;
-            text-align: center;
-        }
+    .text {
+      font-size: 13px;
+      font-weight: bold;
+      color: rgba(51, 51, 51, 1);
+      line-height: 19px;
+      margin-top: 3px;
+      text-align: center;
     }
+  }
 }
 
 .notice-img {
-    width: 43px;
-    height: 16px;
-    margin-right: 18px;
+  width: 43px;
+  height: 16px;
+  margin-right: 18px;
 }
 .notice {
-    margin: 0 15px;
-    border-radius: 4px;
+  margin: 0 15px;
+  border-radius: 4px;
 }
 
 .special-list {
-    padding: 10px 15px 0;
-    .special-row {
-        padding-bottom: 15px;
-    }
+  padding: 10px 15px 0;
+  .special-row {
+    padding-bottom: 15px;
+  }
 }
 
 .suk-list {
-    padding: 0 15px 15px;
+  padding: 0 15px;
+
+  .suk-item {
+    margin-bottom: 15px;
+  }
+}
 
-    .suk-item {
-        margin-bottom: 15px;
+.rule-row {
+  padding: 0 15px 15px;
+  .rule-item {
+    height: 72px;
+    background: rgba(242, 244, 245, 1);
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      width: 22px;
+      height: 22px;
+    }
+    span {
+      font-size: 13px;
+      color: rgba(51, 51, 51, 1);
+      line-height: 18px;
+      margin-top: 6px;
     }
+  }
 }
 </style>

src/views/User.vue

@@ -20,6 +20,7 @@
         title="我的订单"
         is-link
         value="查看全部订单"
+        @click="goNext('orderList')"
       />
       <van-grid :column-num="3" :border="false">
         <van-grid-item text="付款确认">

src/views/distribution/Commission.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="commission">
+    <div class="commission-value">
+      <div class="value">
+        <span>306.19</span>
+        <span>元</span>
+      </div>
+      <div class="sub">累计佣金</div>
+    </div>
+
+    <van-cell-group>
+      <van-cell title="可提现佣金" value="36.45元" title-class="cell-title" value-class="cell-value" />
+    </van-cell-group>
+    <van-cell-group>
+      <van-cell title="已申请佣金" value="0.00元" title-class="cell-title" value-class="cell-value" />
+      <van-cell title="待打款佣金" value="0.00元" title-class="cell-title" value-class="cell-value" />
+      <van-cell title="无效佣金" value="0.00元" title-class="cell-title" value-class="cell-value" />
+      <van-cell title="成功提现佣金" value="0.00元" title-class="cell-title" value-class="cell-value" />
+    </van-cell-group>
+    <van-cell-group>
+      <van-cell title="待收货佣金" value="36.45元" title-class="cell-title" value-class="cell-value" />
+      <van-cell title="未结算佣金" value="36.45元" title-class="cell-title" value-class="cell-value" />
+    </van-cell-group>
+
+    <div class="tips">
+      <div class="tips-title">用户须知</div>
+
+      <div class="tips-content">
+        买家确认收货后，立即获得分销佣金
+        <br />注意：可用佣金满
+        <span>1元</span>后才能申请提现
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "commission",
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(["userInfo"])
+  }
+};
+</script>
+<style lang='less' scoped>
+.commission {
+  background: rgba(242, 244, 245, 1);
+  padding: 15px;
+  box-sizing: border-box;
+}
+
+.commission-value {
+  height: 110px;
+  background: rgba(255, 143, 0, 1);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 12px;
+  line-height: 17px;
+
+  .value {
+    span {
+      &:first-child {
+        font-size: 24px;
+        font-weight: bold;
+      }
+
+      &:last-child {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .sub {
+    margin-top: 7px;
+  }
+}
+.cell-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #000000;
+}
+.cell-value {
+  font-size: 16px;
+  color: #000;
+}
+
+.van-cell {
+  line-height: 40px;
+}
+.van-cell-group {
+  border-radius: 2px;
+  overflow: hidden;
+  margin-top: 10px;
+}
+
+.tips {
+  margin-top: 15px;
+
+  .tips-title {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 1);
+    line-height: 20px;
+  }
+
+  .tips-content {
+    margin-top: 6px;
+    font-size: 13px;
+    color: rgba(102, 102, 102, 1);
+    span {
+      color: #ff8f00;
+    }
+  }
+}
+</style>

src/views/distribution/Index.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="distibution">
+    <div class="info">
+      <div class="left">
+        <div class="text1">我的邀请码: 3507</div>
+        <div class="text2">推荐人：似水流年</div>
+      </div>
+
+      <div class="right">
+        <qrcode
+          style="width:34px"
+          value="123456"
+          :margin="0"
+          :color="{dark:'#fff',light:'#FF8F00'}"
+        />
+        <div class="qrcode-text">推广二维码</div>
+      </div>
+    </div>
+
+    <div class="content">
+      <div class="item">
+        <div class="left">
+          <div class="text1">
+            <span>243.96</span>
+            <span>元</span>
+          </div>
+          <div class="text2">成功提现佣金</div>
+        </div>
+
+        <van-button class="button1" round>查看明细</van-button>
+      </div>
+
+      <div class="item">
+        <div class="left">
+          <div class="text1">
+            <span>36.45</span>
+            <span>元</span>
+          </div>
+          <div class="text2">成功提现佣金</div>
+        </div>
+
+        <van-button type="primary" round>立即提现</van-button>
+      </div>
+    </div>
+
+    <div class="menu-list">
+      <div class="menu-item" @click="goNext('commission')">
+        <img src="../../assets/fenxiao_icon_yongjin.png" alt />
+        <div class="right">
+          <div class="text1">分销佣金</div>
+          <div class="text2">306.19 元</div>
+        </div>
+      </div>
+
+      <div class="menu-item" @click="goNext('distributionOrder')">
+        <img src="../../assets/fenxiao_icon_dingdan.png" alt />
+        <div class="right">
+          <div class="text1">分销订单</div>
+          <div class="text2">84 笔</div>
+        </div>
+      </div>
+    </div>
+
+    <van-cell-group :border="false" class="menu-list2">
+      <van-cell title="我的下线" title-class="menu-title" value="7人" is-link>
+        <img src="../../assets/fenxiao_list_icon_yeji.png" class="menu-img" slot="icon" alt />
+      </van-cell>
+      <van-cell title="业绩统计" title-class="menu-title" is-link>
+        <img src="../../assets/fenxiao_list_icon_xiaxian.png" class="menu-img" slot="icon" alt />
+      </van-cell>
+      <van-cell title="佣金排名" title-class="menu-title" is-link>
+        <img src="../../assets/fenxiao_list_icon_paiming.png" class="menu-img" slot="icon" alt />
+      </van-cell>
+    </van-cell-group>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import Qrcode from "vue-qrcode";
+export default {
+  name: "distibution",
+  data() {
+    return {
+      qrcode: "122452111"
+    };
+  },
+  computed: {
+    ...mapState(["userInfo"])
+  },
+  components: {
+    Qrcode
+  }
+};
+</script>
+<style lang='less' scoped>
+.distibution {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 143, 0, 1) 0%,
+    rgba(255, 143, 0, 0) 190px
+  );
+  min-height: 100%;
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+  padding: 22px 15px 20px;
+  align-items: center;
+
+  .right {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .qrcode-text {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 1);
+    line-height: 17px;
+    margin-top: 4px;
+  }
+
+  .left {
+    .text1 {
+      font-size: 21px;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 1);
+      line-height: 29px;
+    }
+    .text2 {
+      font-size: 12px;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 1);
+      line-height: 17px;
+      margin-top: 5px;
+    }
+  }
+}
+
+.content {
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  margin: 0 15px;
+  padding: 0 30px;
+
+  .item {
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .left {
+      .text1 {
+        span {
+          font-size: 12px;
+          font-weight: bold;
+          color: rgba(51, 51, 51, 1);
+          line-height: 17px;
+          &:first-child {
+            font-size: 24px;
+          }
+        }
+      }
+
+      .text2 {
+        font-size: 12px;
+        color: rgba(128, 128, 128, 1);
+        line-height: 17px;
+        margin-top: 5px;
+      }
+    }
+
+    .van-button {
+      width: 88px;
+      height: 36px;
+      line-height: 36px;
+      font-size: 13px;
+    }
+
+    .button1 {
+      background: rgba(255, 143, 0, 0.12);
+      color: #ff8f00;
+      border-color: rgba(255, 143, 0, 0.12);
+    }
+
+    &:not(:last-child) {
+      border-bottom: 1px solid #f2f4f5;
+    }
+  }
+}
+
+.menu-list {
+  display: flex;
+  padding: 25px 15px 15px;
+  justify-content: space-between;
+  .menu-item {
+    display: flex;
+    align-items: center;
+    width: 165px;
+    height: 80px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+    justify-content: center;
+    img {
+      width: 44px;
+      height: 44px;
+    }
+
+    .right {
+      margin-left: 10px;
+      .text1 {
+        font-size: 16px;
+        font-weight: bold;
+        color: rgba(51, 51, 51, 1);
+        line-height: 22px;
+      }
+      .text2 {
+        font-size: 14px;
+        color: rgba(142, 142, 147, 1);
+        line-height: 20px;
+        margin-top: 2px;
+      }
+    }
+  }
+}
+
+.menu-list2 {
+  .menu-img {
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+  }
+
+  .menu-title {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 1);
+  }
+
+  .menu-not-val {
+    font-size: 13px;
+    color: rgba(255, 143, 0, 1);
+  }
+
+  .van-cell {
+    line-height: 40px;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/views/distribution/Order.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="list">
+    <div class="top">
+      <van-tabs
+        v-model="chooseTab"
+        title-active-color="#FF7900"
+        :line-height="2"
+        title-inactive-color="#000000"
+        @click="tabClick"
+      >
+        <van-tab :title="item" v-for="(item,index) in tabList" :key="index"></van-tab>
+      </van-tabs>
+    </div>
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+      <div class="content">
+        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+          <div class="order-list">
+            <distribution-order v-for="(item,index) in list" :key="index"></distribution-order>
+          </div>
+        </van-list>
+      </div>
+    </van-pull-refresh>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import distributionOrder from "../../components/DistributionOrder";
+export default {
+  name: "list",
+  data() {
+    return {
+      chooseTab: 0,
+      priceDirection: 0,
+      list: [],
+      loading: false,
+      finished: false,
+      isLoading: false,
+      tabList: ["全部", "待付款", "已付款", "已完成"]
+    };
+  },
+  computed: {
+    ...mapState(["userInfo"])
+  },
+  methods: {
+    onRefresh() {
+      this.list = [];
+      this.loading = false;
+      setTimeout(() => {
+        this.$toast("刷新成功");
+        this.isLoading = false;
+        this.onLoad();
+      }, 500);
+    },
+    onSearch() {
+      console.log("aaaaa");
+    },
+    tabClick(name, title) {
+      if (name == 2) {
+        this.priceDirection = this.priceDirection ? 0 : 1;
+      }
+    },
+    onLoad() {
+      // 异步更新数据
+      setTimeout(() => {
+        for (let i = 0; i < 20; i++) {
+          this.list.push(this.list.length + 1);
+        }
+        // 加载状态结束
+        this.loading = false;
+
+        // 数据全部加载完成
+        if (this.list.length >= 40) {
+          this.finished = true;
+        }
+      }, 500);
+    }
+  },
+  components: {
+    distributionOrder
+  }
+};
+</script>
+<style lang='less' scoped>
+.list {
+  background-color: #f2f4f5;
+}
+.top {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+}
+.content {
+  min-height: 100vh;
+  position: relative;
+}
+.tab-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 24px;
+    height: 24px;
+  }
+
+  .img-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-left: 4px;
+
+    img {
+      width: 8px;
+      height: 5px;
+
+      &:last-child {
+        margin-top: 2px;
+      }
+    }
+  }
+}
+.order-list {
+  padding: 15px 14px;
+
+  .order-info {
+    margin-bottom: 15px;
+  }
+}
+</style>

src/views/order/OrderList.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="list">
+    <div class="top">
+      <van-tabs
+        v-model="chooseTab"
+        title-active-color="#FF7900"
+        :line-height="2"
+        title-inactive-color="#000000"
+        @click="tabClick"
+      >
+        <van-tab :title="item" v-for="(item,index) in tabList" :key="index"></van-tab>
+      </van-tabs>
+    </div>
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+      <div class="content">
+        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+          <div class="order-list">
+            <order-info v-for="(item,index) in list" :key="index"></order-info>
+          </div>
+        </van-list>
+      </div>
+    </van-pull-refresh>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import orderInfo from "../../components/OrderInfo";
+export default {
+  name: "list",
+  data() {
+    return {
+      chooseTab: 0,
+      priceDirection: 0,
+      list: [],
+      loading: false,
+      finished: false,
+      isLoading: false,
+      tabList: ["全部", "待付款", "待收款", "待上架", "已售出", "已发货"]
+    };
+  },
+  computed: {
+    ...mapState(["userInfo"])
+  },
+  methods: {
+    onRefresh() {
+      this.list = [];
+      this.loading = false;
+      setTimeout(() => {
+        this.$toast("刷新成功");
+        this.isLoading = false;
+        this.onLoad();
+      }, 500);
+    },
+    onSearch() {
+      console.log("aaaaa");
+    },
+    tabClick(name, title) {
+      if (name == 2) {
+        this.priceDirection = this.priceDirection ? 0 : 1;
+      }
+    },
+    onLoad() {
+      // 异步更新数据
+      setTimeout(() => {
+        for (let i = 0; i < 20; i++) {
+          this.list.push(this.list.length + 1);
+        }
+        // 加载状态结束
+        this.loading = false;
+
+        // 数据全部加载完成
+        if (this.list.length >= 40) {
+          this.finished = true;
+        }
+      }, 500);
+    }
+  },
+  components: {
+    orderInfo
+  }
+};
+</script>
+<style lang='less' scoped>
+.list {
+  background-color: #f2f4f5;
+}
+.top {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+}
+.content {
+  min-height: 100vh;
+  position: relative;
+}
+.tab-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 24px;
+    height: 24px;
+  }
+
+  .img-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-left: 4px;
+
+    img {
+      width: 8px;
+      height: 5px;
+
+      &:last-child {
+        margin-top: 2px;
+      }
+    }
+  }
+}
+.order-list {
+  padding: 15px 14px;
+
+  .order-info {
+    margin-bottom: 15px;
+  }
+}
+</style>

src/views/order/Submit.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="submit">
+    <div class="addresss">
+      <div>
+        <div class="address-info">
+          <div class="name">收货人</div>
+          <div class="val">粉条 15651768686</div>
+        </div>
+        <div class="address-info">
+          <div class="name">收货地址</div>
+          <div class="val">江苏 南京 玄武区 中山路18号德基广场二楼216</div>
+        </div>
+      </div>
+      <van-icon name="arrow" color="#f2f4f5" />
+    </div>
+
+    <div class="order-info">
+      <van-image
+        class="suk-img"
+        width="80"
+        height="80"
+        fit="cover"
+        src="https://img.yzcdn.cn/vant/cat.jpeg"
+      />
+      <div class="order-content">
+        <div class="text1">知名国画大家刘大为《高原行旅》</div>
+        <div class="text2">产品所有人为：杨文玉</div>
+        <div class="text3">
+          <div class="price">¥4336.24</div>
+          <div class="num">X1</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="money-content">
+      <div class="money-info">
+        
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "",
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(["userInfo"])
+  }
+};
+</script>
+<style lang='less' scoped>
+.submit {
+  padding: 15px;
+  background: rgba(242, 244, 245, 1);
+}
+.addresss {
+  background: rgba(255, 255, 255, 1);
+  border-radius: 6px;
+  padding: 15px;
+  display: flex;
+
+  .address-info {
+    display: flex;
+    align-items: flex-start;
+
+    .name {
+      font-size: 13px;
+      color: rgba(170, 172, 173, 1);
+      line-height: 20px;
+      width: 72px;
+      min-width: 72px;
+    }
+
+    .val {
+      font-size: 14px;
+      font-weight: bold;
+      color: rgba(0, 0, 0, 1);
+      line-height: 20px;
+    }
+
+    &:not(:first-child) {
+      margin-top: 8px;
+    }
+  }
+  align-items: center;
+}
+
+.order-info {
+  padding: 15px;
+  background: rgba(255, 255, 255, 1);
+  border-radius: 2px;
+  margin-top: 10px;
+  display: flex;
+  .order-content{
+    flex-grow: 1;
+    margin-left: 10px;
+  }
+  .text1 {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 1);
+    line-height: 20px;
+  }
+
+  .text2 {
+    height: 22px;
+    background: rgba(255, 143, 0, 0.12);
+    border-radius: 2px 100px 100px 100px;
+    font-size: 12px;
+    color: rgba(255, 143, 0, 1);
+    line-height: 22px;
+    padding: 0 8px;
+    display: inline-block;
+    margin-top: 6px;
+  }
+  .text3 {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 13px;
+
+    .price {
+      font-size: 14px;
+      font-weight: bold;
+      color: rgba(0, 0, 0, 1);
+      line-height: 20px;
+    }
+  }
+}
+</style>

src/views/rule/rule.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class='rule'></div>
+</template>
+<script>
+import { mapState } from 'vuex';
+export default {
+  name: 'rule',
+  data() {
+    return {};
+  },
+  computed: {
+        ...mapState(['userInfo'])
+      },
+};
+</script>
+<style lang='less' scoped>
+</style>