init

.editorconfig

+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}

.gitattributes

+*.js linguist-language=vue
+
+*.css linguist-language=vue
+
+*.html linguist-language=vue
\ No newline at end of file

.gitignore

+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.postcssrc.js

+module.exports = {
+  plugins: {
+    'autoprefixer': {
+        overrideBrowserslist: [
+          "Android 4.1",
+          "iOS 7.1",
+          "Chrome > 31",
+          "ff > 31",
+          "ie >= 8"
+          //'last 10 versions', // 所有主流浏览器最近10版本用
+        ],
+        grid: true
+      },
+    'postcss-pxtorem': {
+      rootValue: 37.5, //vant-UI的官方根字体大小是37.5
+      propList: ['*']
+    }
+  }
+}

LICENSE

+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

README.md

+![](static-files/newbee-mall.png)
+
+![Build Status](https://img.shields.io/badge/build-passing-green.svg)
+![Version 2.0.0](https://img.shields.io/badge/version-2.0.0-yellow.svg)
+[![License](https://img.shields.io/badge/license-GPL3.0-blue.svg)](https://github.com/newbee-ltd/newbee-mall-vue-app/blob/master/LICENSE)
+
+newbee-mall 项目是一套电商系统，包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理系统，基于 Spring Boot 2.X 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。
+
+本仓库中的源码为新蜂商城前后端分离版本的 Vue 项目（Vue 版本为 2.x），主要面向前端开发人员，后端 API 源码在另外一个仓库 [newbee-mall-api](https://github.com/newbee-ltd/newbee-mall-api)。
+
+新蜂商城 Vue 版本线上预览地址：[http://vue-app.newbee.ltd](http://47.99.134.126:5000)，账号可自行注册，建议使用手机模式打开。
+
+前后端分离版本包括四个仓库：
+
+- [新蜂商城后端接口 newbee-mall-api](https://github.com/newbee-ltd/newbee-mall-api)
+- [新蜂商城 Vue2 版本 newbee-mall-vue-app](https://github.com/newbee-ltd/newbee-mall-vue-app)
+- [新蜂商城 Vue3 版本 newbee-mall-vue3-app](https://github.com/newbee-ltd/newbee-mall-vue3-app)
+- [新蜂商城后台管理系统 Vue3 版本 vue3-admin](https://github.com/newbee-ltd/vue3-admin)
+
+>Vue2 版本与 Vue3 版本分成两个仓库，大家需要哪个版本就去对应的仓库即可。
+
+**坚持不易，如果觉得项目还不错的话可以给项目一个 Star 吧，也是对我一直更新代码的一种鼓励啦，谢谢各位的支持。**
+
+![newbee-mall-info](https://newbee-mall.oss-cn-beijing.aliyuncs.com/poster/store/newbee-mall-star.png)
+
+关注公众号：**程序员十三**，回复"勾搭"进群交流。
+
+![wx-gzh](https://newbee-mall.oss-cn-beijing.aliyuncs.com/wx-gzh/%E7%A8%8B%E5%BA%8F%E5%91%98%E5%8D%81%E4%B8%89-%E5%85%AC%E4%BC%97%E5%8F%B7.png)
+
+## 开发及部署文档
+
+- [向“全栈”进发！大型线上商城实战项目，Spring Boot + Vue 前后端分离版本的商城来了！](https://juejin.im/book/6844733826191589390)
+- [项目须知和课程约定](https://juejin.im/book/6844733826191589390)
+- [全栈开发！你必须要知道的“前后端分离”](https://juejin.im/book/6844733826191589390)
+- [前端模块化的发展历史](https://juejin.im/book/6844733826191589390)
+- [传统页面和单页面的权衡与抉择](https://juejin.im/book/6844733826191589390)
+- [准备工作及基础环境搭建（后端）](https://juejin.im/book/6844733826191589390)
+- [Spring Boot 项目初体验--项目搭建及启动](https://juejin.im/book/6844733826191589390)
+- [项目编码简化利器！Spring Boot 整合 Lombok](https://juejin.im/book/6844733826191589390)
+- [Lombok 插件问题处理](https://juejin.im/book/6844733826191589390)
+- [商城后端项目启动和运行注意事项](https://juejin.im/book/6844733826191589390)
+- [VSCode 的相关配置及插件介绍](https://juejin.im/book/6844733826191589390)
+- [基础篇：Vue 指令](https://juejin.im/book/6844733826191589390)
+- [基础篇：Vue全局API及生命周期介绍](https://juejin.im/book/6844733826191589390)
+- [基础篇: CSS 预处理工具Less的介绍及使用](https://juejin.im/book/6844733826191589390)
+- [Vue 脚手架工具 Vue-Cli 配置介绍](https://juejin.im/book/6844733826191589390)
+- [Vue-Router 浅析原理及使用](https://juejin.im/book/6844733826191589390)
+- [全局状态管理插件 Vuex 介绍及使用](https://juejin.im/book/6844733826191589390)
+- [商城前端 H5 开发环境搭建及项目启动](https://juejin.im/book/6844733826191589390)
+- [前后端交互文档利器！Spring Boot 整合 Swagger](https://juejin.im/book/6844733826191589390)
+- [接口参数处理和统一响应结果](https://juejin.im/book/6844733826191589390)
+- [口设计规范及接口调用实践](https://juejin.im/book/6844733826191589390)
+- [商城开发实战-用户登录接口开发](https://juejin.im/book/6844733826191589390)
+- [商城开发实战-用户身份认证详解](https://juejin.im/book/6844733826191589390)
+- [商城开发实战-首页模块接口开发](https://juejin.im/book/6844733826191589390)
+- [商城开发实战-分类模块接口开发](https://juejin.im/book/6844733826191589390)
+- [商城开发实战-商品搜索模块接口开发](https://juejin.im/book/6844733826191589390)
+- [商城开发实战-购物车模块接口开发](https://juejin.im/book/6844733826191589390)
+- [商城开发实战-个人信息及收货地址接口开发](https://juejin.im/book/6844733826191589390)
+- [商城开发实战-下单流程接口开发](https://juejin.im/book/6844733826191589390)
+- [商城开发实战-订单处理流程详解](https://juejin.im/book/6844733826191589390)
+- [商城移动端开发实战-新蜂商城底部导航(抽离公共组件)](https://juejin.im/book/6844733826191589390)
+- [商城移动端开发实战-新蜂商城登录注册页(前端鉴权)](https://juejin.im/book/6844733826191589390)
+- [商城移动端开发实战-商城首页制作(轮播图、首页商品列表)](https://juejin.im/book/6844733826191589390)
+- [商城移动端开发实战-商品分类页面制作(better-scrol的介绍及使用)](https://juejin.im/book/6844733826191589390)
+- [商城移动端开发实战-商品列表页面制作(无限滚动加载)](https://juejin.im/book/6844733826191589390)
+- [商城移动端开发实战-商品详情页面制作(Vuex 购物车数量全局管理)](https://juejin.im/book/6844733826191589390)
+- [商城移动端开发实战-商城购物车页面制作(购物车页)](https://juejin.im/book/6844733826191589390)
+- [商城移动端开发实战-确认订单页面制作](https://juejin.im/book/6844733826191589390)
+- [商城移动端开发实战-地址栏管理页面制作](https://juejin.im/book/6844733826191589390)
+- [商城移动端开发实战-我的订单页面制作](https://juejin.im/book/6844733826191589390)
+- [Vue 3.x 新特性概览](https://juejin.im/book/6844733826191589390)
+- [新蜂商城迁移至 Vue 3.x 流程讲解](https://juejin.im/book/6844733826191589390)
+
+## 联系作者
+
+> 大家有任何问题或者建议都可以在 [issues](https://github.com/newbee-ltd/newbee-mall-vue-app/issues) 中反馈给我，我会慢慢完善这个项目。
+
+- 我的邮箱：2449207463@qq.com
+- QQ技术交流群：932227898 719099151 796794009
+
+## 软件著作权
+
+>本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+
+![](https://newbee-mall.oss-cn-beijing.aliyuncs.com/poster/store/newbee-mall-copyright-02.png)
+
+## 页面展示
+
+以下为新蜂商城 Vue 版本的页面预览：
+
+- 登录页
+
+![](static-files/登录.png)
+
+- 首页
+
+![](static-files/首页.png)
+
+- 商品搜索
+
+![](static-files/商品搜索.png)
+
+- 商品详情页
+
+![](static-files/详情页.png)
+
+- 购物车
+
+![](static-files/购物车.png)
+
+- 生成订单
+
+![](static-files/生成订单.png)
+
+- 地址管理
+
+![](static-files/地址管理.png)
+
+- 订单列表
+
+![](static-files/订单列表.png)
+
+- 订单详情
+
+![](static-files/订单详情.png)
+
+## 感谢
+
+- [Vue](https://github.com/vuejs/vue)
+- [Vant](https://github.com/youzan/vant)
+- [vue2-verify](https://github.com/mizuka-wu/vue2-verify)
+- [better-scroll](https://github.com/ustbhuangyi/better-scroll)
+- [Vuex](https://github.com/vuejs/vuex)
+

babel.config.js

+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    ['import', {
+      libraryName: 'vant',
+      libraryDirectory: 'es',
+      style: true
+    }, 'vant']
+  ]
+}

newbee-v2-server.js

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+
+var server = require('pushstate-server');
+
+server.start({
+  port: 5000,
+  directory: './dist'
+});

package.json

+{
+  "name": "vue-newbee-shop",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "better-scroll": "^1.15.2",
+    "core-js": "^3.4.3",
+    "js-md5": "^0.7.3",
+    "lib-flexible": "^0.3.2",
+    "postcss-px2rem": "^0.3.0",
+    "pushstate-server": "^3.1.0",
+    "vant": "^2.12.30",
+    "vue": "^2.6.10",
+    "vue-router": "^3.0.7",
+    "vue2-verify": "^1.1.5",
+    "vuex": "^3.1.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.1.0",
+    "@vue/cli-plugin-eslint": "^4.1.0",
+    "@vue/cli-plugin-router": "^4.1.0",
+    "@vue/cli-plugin-vuex": "^4.1.0",
+    "@vue/cli-service": "^4.1.0",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "babel-eslint": "^10.0.3",
+    "babel-plugin-import": "^1.13.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "postcss-pxtorem": "^4.0.1",
+    "vue-template-compiler": "^2.6.10"
+  }
+}

public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>新蜂商城</title>
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_1623819_3g3arzgtlmk.css">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but vue-newbee-shop doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div id="app">
+    <transition :name="transitionName">
+      <router-view class="router-view" />
+    </transition>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        transitionName: 'slide-left'
+      }
+    },
+    watch: {
+      $route(to, from) {
+        // 有主级到次级
+        if (to.meta.index > from.meta.index) {
+          this.transitionName = 'slide-left' // 向左滑动
+        } else if (to.meta.index < from.meta.index) {
+          // 由次级到主级
+          this.transitionName = 'slide-right'
+        } else {
+          this.transitionName = ''   //同级无过渡效果
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  // text-align: center;
+  color: #2c3e50;
+}
+
+.router-view{
+    width: 100%;
+    height: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: 0 auto;
+    -webkit-overflow-scrolling: touch;
+    background-color: #f0f1f5;
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active,
+.slide-left-enter-active,
+.slide-left-leave-active{
+    height: 100%;
+    will-change: transform;
+    transition: all 500ms;
+    position: absolute;
+    backface-visibility: hidden;
+}
+.slide-right-enter{
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+}
+.slide-right-leave-active{
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+}
+.slide-left-enter{
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+}
+.slide-left-leave-active{
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+}
+</style>

src/common/style/base.less

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+ 
+// *{
+//   margin: 0;
+//   padding: 0;
+// }
+//移动端点击高亮
+html,body{
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+input{
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+textarea{
+  border: none;
+  outline: none;
+}
+button{
+  border: none;
+  outline: none;
+}
+a{
+  text-decoration: none;
+  color: #333;
+}
+li{
+  list-style-type: none;
+}
+//解决端遮罩层穿透
+body.dialog-open {
+  position: fixed;
+  width: 100%;
+}
+.page{
+  padding: 0 50px;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}

src/common/style/mixin.less

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+ 
+@import './base.less';
+@primary: #1baeae; // 主题色
+@orange: #FF6B01; 
+@bc: #F7F7F7;
+@fc:#fff;
+
+// // 背景图片地址和大小
+.bis(@url) {
+  background-image: url(@url);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+// //圆角
+.borderRadius(@radius) {
+  -webkit-border-radius: @radius;
+  -moz-border-radius: @radius;
+  -ms-border-radius: @radius;
+  -o-border-radius: @radius;
+  border-radius: @radius;
+}
+
+// //1px底部边框
+.border-1px(@color){
+  position: relative;
+  &:after{
+    display: block;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    border-top: 1px solid @color;
+    content: '';
+  }
+}
+// //定位全屏
+.allcover{
+  position:absolute;
+  top:0;
+  right:0;
+}
+
+// //定位上下左右居中
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+// //定位上下居中
+.ct {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+// //定位左右居中
+.cl {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+// //宽高
+.wh(@width, @height){
+  width: @width;
+  height: @height;
+}
+
+// //字体大小，颜色
+.sc(@size, @color){
+  font-size: @size;
+  color: @color;
+}
+
+.boxSizing {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+// //flex 布局和 子元素 对其方式
+.fj(@type: space-between){
+  display: flex;
+  justify-content: @type;
+}

src/components/ListScroll.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div ref="wrapper" class="scroll-wrapper">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import BScroll from 'better-scroll'
+export default {
+  props: {
+    /**
+     * 1 滚动的时候会派发scroll事件，会截流。
+     * 2 滚动的时候实时派发scroll事件，不会截流。
+     * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
+     */
+    probeType: {
+      type: Number,
+      default: 1
+    },
+    // 点击列表是否派发click事件
+    click: {
+      type: Boolean,
+      default: true
+    },
+    // 是否开启横向滚动
+    scrollX: {
+      type: Boolean,
+      default: false
+    },
+    // 是否派发滚动事件
+    listenScroll: {
+      type: Boolean,
+      default: false
+    },
+    // 列表的数据
+    scrollData: {
+      type: Array,
+      default: null
+    },
+    // 是否派发滚动到底部的事件，用于上拉加载
+    pullup: {
+      type: Boolean,
+      default: false
+    },
+    // 是否派发顶部下拉的事件，用于下拉刷新
+    pulldown: {
+      type: Boolean,
+      default: false
+    },
+    // 是否派发列表滚动开始的事件
+    beforeScroll: {
+      type: Boolean,
+      default: false
+    },
+    // 当数据更新后，刷新scroll的延时
+    refreshDelay: {
+      type: Number,
+      default: 20
+    }
+  },
+  mounted() {
+    // 在 DOM 渲染完毕后初始化 better-scroll
+    setTimeout(() => {
+      this.initScroll()
+    }, 20)
+  },
+  methods: {
+    initScroll() {
+      if (!this.$refs.wrapper) {
+        return
+      }
+      // better-scroll 初始化
+      this.scroll = new BScroll(this.$refs.wrapper, {
+        probeType: this.probeType,
+        click: this.click,
+        scrollX: this.scrollX
+      })
+      // 是否派发滚动事件
+      if (this.listenScroll) {
+        const self = this
+        this.scroll.on('scroll', (position) => {
+          self.$emit('scroll', position)
+        })
+      }
+      if (this.pullup) {
+        this.scroll.on('scrollEnd', () => {
+          // 滚动到底部
+          if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
+            // 派发滚动到底部的事件
+            this.$emit('scrollToEnd')
+          }
+        })
+      }
+      if (this.pulldown) {
+        this.scroll.on('touchend', (pos) => {
+          // 下拉动作
+          if (pos.y > 50) {
+            // 下拉刷新
+            this.$emit('pulldown')
+          }
+        })
+      }
+      if (this.beforeScroll) {
+        this.scroll.on('beforeScrollStart', () => {
+          // 列表滚动前触发
+          this.$emit('beforeScroll')
+        })
+      }
+    },
+    disable() {
+      // 代理 better-scroll 的 disable 方法
+      this.scroll && this.scroll.disable()
+    },
+    enable() {
+        // 代理 better-scroll 的 enable 方法
+        this.scroll && this.scroll.enable()
+    },
+    refresh() {
+        // 代理 better-scroll 的 refresh 方法
+        this.scroll && this.scroll.refresh()
+    },
+    scrollTo() {
+        // 代理 better-scroll 的 scrollTo 方法
+        this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
+    },
+    scrollToElement() {
+        // 代理 better-scroll 的 scrollToElement 方法
+        this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
+    }
+  },
+  watch: {
+    // 监听数据的变化，重新计算高度
+    data() {
+      setTimeout(() => {
+          this.refresh()
+      }, this.refreshDelay)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .scroll-wrapper {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+</style>

src/components/NavBar.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div class="nav-bar">
+    <ul class="nav-list">
+      <router-link tag="li" class="nav-list-item active" to="home">
+        <i class="nbicon nblvsefenkaicankaoxianban-1"></i>
+        <span>首页</span>
+      </router-link>
+      <router-link tag="li" class="nav-list-item" to="category">
+        <i class="nbicon nbfenlei"></i>
+        <span>分类</span>
+      </router-link>
+      <router-link tag="li" class="nav-list-item" to="cart">
+        <van-icon  name="shopping-cart-o" :info="!count ? '' : count" />
+        <span>购物车</span>
+      </router-link>
+      <router-link tag="li" class="nav-list-item" to="user">
+        <i class="nbicon nblvsefenkaicankaoxianban-"></i>
+        <span>我的</span>
+      </router-link>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import { getLocal } from '../common/js/utils'
+  export default {
+    mounted() {
+      const token = getLocal('token')
+      const path = this.$route.path
+      if (token && path != '/home') {
+        this.$store.dispatch('updateCart')
+      }
+    },
+    data() {
+      return {}
+    },
+    computed: {
+      count () {
+        return this.$store.state.cartCount
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped >
+    @import '../common/style/mixin';
+    .nav-bar{
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      padding: 5px 0;
+      z-index: 1000;
+      background: #fff;
+      transform: translateZ(0);
+      -webkit-transform: translateZ(0);
+      .nav-list {
+        width: 100%;
+        .fj();
+        flex-direction: row;
+        padding: 0;
+        .nav-list-item {
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          text-align: center;
+          color: #666;
+          &.router-link-active {
+            color: @primary;
+          }
+          i {
+            text-align: center;
+            font-size: 22px;
+          }
+          span{
+            font-size: 12px;
+          }
+          .van-icon-shopping-cart-o {
+            margin: 0 auto;
+            margin-bottom: 2px;
+          }
+        }
+      }
+    }
+</style>

src/components/SimpleHeader.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <header class="simple-header">
+    <i class="nbicon nbfanhui" @click="goBack"></i>
+    <div class="simple-header-name">{{ name }}</div>
+    <i class="nbicon nbmore"></i>
+  </header>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    back: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    goBack() {
+      if (!this.back) {
+        this.$router.go(-1)
+      } else {
+        this.$router.push({ path: this.back })
+      }
+      this.$emit('callback')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import '../common/style/mixin';
+  .simple-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10000;
+    .fj();
+    .wh(100%, 44px);
+    line-height: 44px;
+    padding: 0 10px;
+    .boxSizing();
+    color: #252525;
+    background: #fff;
+    border-bottom: 1px solid #dcdcdc;
+    .simple-header-name {
+      font-size: 14px;
+    }
+  }
+</style>

src/components/Swiper.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <van-swipe class="my-swipe" :autoplay="5000" indicator-color="#1baeae">
+    <van-swipe-item v-for="(item, index) in list" :key="index">
+      <img :src="item.carouselUrl" alt="" @click="goTo(item.redirectUrl)">
+    </van-swipe-item>
+  </van-swipe>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: null
+    }
+  },
+  methods: {
+    goTo(url) {
+      window.open(url)
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+  .my-swipe .van-swipe-item {
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>

src/components/TabBar.vue

+<template>
+  <div>
+    <van-tabbar v-model="active" @change="onChange">
+      <van-tabbar-item
+        v-for="(item,index) in tabBarList"
+        :key="item.key"
+        :icon="active == index?item.imgUrlActive: item.imgUrl"
+        :to="item.path"
+        >{{ item.text }}</van-tabbar-item
+      >
+    </van-tabbar>
+  </div>
+</template>
+
+<script>
+export default {
+  props:{
+      index: {
+      type: Number,
+      default: 0
+    },
+  },
+  
+  data() {
+    return {
+      active: "0",
+      tabBarList: [
+        {
+          key: "1",
+          name:'0',
+          imgUrl: require("@/assets/tabBar/new.png"),
+          imgUrlActive: require("@/assets/tabBar/new-active.png"),
+          path: "/MessageCenter",
+          text: "消息中心"
+        },
+        {
+          key: "2",
+          name:'1',
+          imgUrl: require("@/assets/tabBar/workbench.png"),
+          imgUrlActive: require("@/assets/tabBar/workbench-active.png"),
+          path: "/SaveWorkbench",
+          text: "安全工作台"
+        },
+        {
+          key: "3",
+          name:'2',
+          imgUrl: require("@/assets/tabBar/my.png"),
+          imgUrlActive: require("@/assets/tabBar/my-active.png"),
+          path: "/My",
+          text: "我的地盘"
+        }
+      ]
+    };
+  },
+  mounted() {
+    this.active = this.index
+    this.tabBarList.forEach((item)=>{
+        if(item.name==this.active){
+            this.$router.push(item.path)
+        }
+    })
+  },
+  methods: {
+    onChange(index) {
+      this.active = index;
+    }
+  }
+};
+</script>
+<style scoped>
+/* @import url(); 引入css类 */
+</style>

src/components/header.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+    <div>
+        <header class="header">
+            <van-icon @click="to" name="arrow-left" class="iconColorLeft"/>
+            <span>{{text}}</span>
+            <van-icon name="bars" class="iconColorRight"/>
+        </header>
+    </div>
+</template>
+
+<script>
+export default {
+    props:{
+        text:{
+            default:"未知",
+            type:String
+        }
+    },
+    data() {
+        return {
+        
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        /* 左侧图标跳转方法 */
+        to(){
+            history.go(-1)
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .header{
+        width:100%;
+        height:1.5rem;
+        background:#2980F7;
+        text-align: center;
+        line-height: 1.5rem;
+    }
+    .iconColorLeft{
+        color: white;
+        transform: scale(2);
+        float: left;
+        position: relative;
+        top: 40%;
+        left: 5%;
+    }
+    .header span{
+        color: white;
+        font-size: 16px;
+        margin: auto;
+        font-weight: 600;
+        font-family: 'Microsoft YaHei';
+    }
+    .header .iconColorRight{
+        color: white;
+        float: right;
+        position: relative;
+        top: 40%;
+        right: 5%;
+        transform: scale(2);
+    }
+</style>

src/main.js

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+
+import Vue from 'vue'
+import md5 from 'js-md5';
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import './permission'
+import { prefix } from '@/common/js/utils'
+import { Divider, Popup, Overlay, Loading, Dialog, ContactCard, Form, AddressEdit, AddressList, Field, CellGroup, Cell, SwipeCell, Icon, Stepper, Card, Checkbox, CheckboxGroup, Button, Swipe, SwipeItem, PullRefresh, List, Tab, Tabs, GoodsAction, GoodsActionIcon, GoodsActionButton, SubmitBar, Toast ,Search,Picker,Uploader,Notify ,ContactList,Calendar,Radio,RadioGroup,Tag,Tabbar,TabbarItem,Sticky, Grid, GridItem,Skeleton,Col,Row,  Image as VanImage, Badge,} from 'vant'
+import 'lib-flexible/flexible'
+
+Vue.use(Divider).use(Popup).use(Overlay).use(Loading).use(Dialog).use(Toast).use(ContactCard).use(Form).use(AddressEdit).use(AddressList).use(Field).use(CellGroup).use(Cell).use(SwipeCell).use(Icon).use(Stepper).use(Card).use(Button).use(Swipe).use(SwipeItem).use(PullRefresh).use(List).use(Tab).use(Tabs).use(GoodsAction).use(GoodsActionIcon).use(GoodsActionButton).use(SubmitBar).use(Checkbox).use(CheckboxGroup).use(Search).use(Picker).use(Uploader).use(Notify)
+.use(ContactList).use(Calendar).use(Radio).use(RadioGroup).use(Tag).use(Tabbar).use(TabbarItem).use(Sticky)
+.use(Grid).use(GridItem).use(Skeleton).use(Col).use(Row).use(VanImage)
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
+
+Vue.prototype.$md5 = md5;
+Vue.prototype.prefix = prefix;
+
+Array.prototype.remove = function(val) {
+  var index = this.indexOf(val);
+  if (index > -1) {
+    this.splice(index, 1);
+  }
+}

src/permission.js

+import router from './router'
+//设置白名单，指不需要登录就可以直接进入的页面
+var whiteList = ["/login2"]
+//这里使用cookie.js，登录成功后将后台返回的token保存在cookie中
+// Cookies.set('admin_token','token_value');
+var hasToken = localStorage.getItem('admin_token');
+router.beforeEach(async(to, from, next) => {
+    //to: 即将要进入的目标 [路由对象]
+    //from:当前导航正要离开的路由
+    //next:一定要调用该方法来 resolve 这个钩子
+    console.log(hasToken)
+     if (hasToken) {
+        if (to.path === '/login2') {
+            next({ path: '/MessageCenter' })
+        } else { 
+            next()
+        } 
+      }else {
+        if (whiteList.indexOf(to.path) !== -1) {
+            next()//这里是即将进入的页面是白名单的页面就直接进入
+        } else { 
+            next({ path: '/login2' })//这里是即将进入的页面不是白名单的页面又没有token的情况下重定向到登录页面进行登录操作
+        } 
+      }
+})
\ No newline at end of file

src/router/index.js

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+import Cart from '../views/Cart.vue'
+import Category from '../views/Category.vue'
+import ProductList from '../views/ProductList.vue'
+import ProductDetail from '../views/ProductDetail.vue'
+import User from '../views/User.vue'
+import Order from '../views/Order.vue'
+import OrderDetail from '../views/OrderDetail.vue'
+import Setting from '../views/Setting.vue'
+import Address from '../views/Address.vue'
+import AddressEdit from '../views/AddressEdit.vue'
+import Login from '../views/Login.vue'
+import About from '../views/About.vue'
+import CreateOrder from '../views/CreateOrder.vue'
+// 登录页
+import Login2 from '../views/Login2.vue'
+// 消息中心
+import MessageCenter from '../views/MessageCenter/MessageCenter.vue'
+// 安全工作台
+import SaveWorkbench from '../views/SaveWorkbench.vue'
+// 我的地盘
+import My from '../views/My.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    redirect: '/login2'
+  },
+  {
+    path: '/login',
+    name: 'login',
+    meta: {
+      index: 2
+    },
+    component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue'),
+  },
+  {
+    path: '/home',
+    name: 'home',
+    meta: {
+      index: 1
+    },
+    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
+  },
+  {
+    path: '/cart',
+    name: 'cart',
+    meta: {
+      index: 1
+    },
+    component: () => import(/* webpackChunkName: "cart" */ '../views/Cart.vue'),
+  },
+  {
+    path: '/category',
+    name: 'category',
+    meta: {
+      index: 1
+    },
+    component: () => import(/* webpackChunkName: "category" */ '../views/Category.vue'),
+  },
+  {
+    path: '/product-list',
+    name: 'product-list',
+    meta: {
+      index: 2
+    },
+    component: () => import(/* webpackChunkName: "product-list" */ '../views/ProductList.vue'),
+  },
+  {
+    path: '/product/:id',
+    name: 'product',
+    meta: {
+      index: 3
+    },
+    component: () => import(/* webpackChunkName: "product" */ '../views/ProductDetail.vue'),
+  },
+  {
+    path: '/user',
+    name: 'user',
+    meta: {
+      index: 1
+    },
+    component: () => import(/* webpackChunkName: "user" */ '../views/User.vue'),
+  },
+  {
+    path: '/order',
+    name: 'order',
+    meta: {
+      index: 2
+    },
+    component: () => import(/* webpackChunkName: "order" */ '../views/Order.vue'),
+  },
+  {
+    path: '/order-detail',
+    name: 'order-detail',
+    meta: {
+      index: 3
+    },
+    component: () => import(/* webpackChunkName: "order-detail" */ '../views/OrderDetail.vue'),
+  },
+  {
+    path: '/setting',
+    name: 'setting',
+    meta: {
+      index: 2
+    },
+    component: () => import(/* webpackChunkName: "setting" */ '../views/Setting.vue'),
+  },
+  {
+    path: '/address',
+    name: 'address',
+    meta: {
+      index: 2
+    },
+    component: () => import(/* webpackChunkName: "address" */ '../views/Address.vue'),
+  },
+  {
+    path: '/address-edit',
+    name: 'address-edit',
+    meta: {
+      index: 3
+    },
+    component: () => import(/* webpackChunkName: "address-edit" */ '../views/AddressEdit.vue'),
+  },
+  {
+    path: '/about',
+    name: 'about',
+    meta: {
+      index: 2
+    },
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
+  },
+  {
+    path: '/create-order',
+    name: 'create-order',
+    meta: {
+      index: 2
+    },
+    component: () => import(/* webpackChunkName: "create-order" */ '../views/CreateOrder.vue'),
+  },
+  {
+    path: '/checked',
+    name: 'checked',
+    meta: {
+        title:'检查执行',
+        index: 3
+    },
+    component: () => import(/* webpackChunkName: "create-order" */ '../views/checked'),
+  },
+  {
+    path: '/problem',
+    name: 'problem',
+    meta: {
+        title:'问题上报',
+        index: 3
+    },
+    component: () => import(/* webpackChunkName: "create-order" */ '../views/checked/problem'),
+  },
+  {
+    path: '/list',
+    name: 'list',
+    meta: {
+        title:'检查问题',
+        index: 3
+    },
+    component: () => import(/* webpackChunkName: "create-order" */ '../views/checked/problem/list'),
+  },
+  {
+    path: '/note',
+    name: 'note',
+    meta: {
+        title:'问题记录',
+        index: 3
+    },
+    component: () => import(/* webpackChunkName: "create-order" */ '../views/checked/problem/note'),
+  },
+  {
+    path: '/formwork',
+    name: 'formwork',
+    meta: {
+        title:'问题上报表',
+        index: 3
+    },
+    component: () => import(/* webpackChunkName: "create-order" */ '../views/checked/problem/formwork'),
+  },
+  {
+    path: '/correct',
+    name: 'correct',
+    meta: {
+        title:'检查记录',
+        index: 3
+    },
+    component: () => import(/* webpackChunkName: "create-order" */ '../views/correct'),
+  },
+  {
+    path: '/notice',
+    name: 'notice',
+    meta: {
+        title:'整改通知',
+        index: 3
+    },
+    component: () => import(/* webpackChunkName: "create-order" */ '../views/notice'),
+  },
+  {
+    path: '/noticeList',
+    name: 'noticeList',
+    meta: {
+        title:'整改通知管理列表',
+        index: 3
+    },
+    component: () => import(/* webpackChunkName: "create-order" */ '../views/notice/noticeList'),
+  },
+  // 登录页
+  {
+    path: '/Login2',
+    name: 'Login2',
+    meta: {
+      index: 1
+    },
+    component: () => import(/* webpackChunkName: "SaveWorkbench" */ '../views/Login2.vue'),
+  },
+  // 消息中心
+   {
+    path: '/MessageCenter',
+    name: 'MessageCenter',
+    meta: {
+      index: 1
+    },
+    component: () => import(/* webpackChunkName: "SaveWorkbench" */ '../views/MessageCenter/MessageCenter.vue'),
+  },
+  // 安全工作台页面
+  {
+    path: '/SaveWorkbench',
+    name: 'SaveWorkbench',
+    meta: {
+      index: 1
+    },
+    component: () => import(/* webpackChunkName: "SaveWorkbench" */ '../views/SaveWorkbench.vue'),
+  },
+  // 我的地盘页面
+  {
+    path: '/My',
+    name: 'My',
+    meta: {
+      index: 1
+    },
+    component: () => import(/* webpackChunkName: "SaveWorkbench" */ '../views/My.vue'),
+  },
+
+]
+
+const router = new VueRouter({
+  mode: 'hash',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router

src/service/address.js

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+
+import axios from '../utils/axios'
+
+export function addAddress(params) {
+  return axios.post('/address', params);
+}
+
+export function EditAddress(params) {
+  return axios.put('/address', params);
+}
+
+export function DeleteAddress(id) {
+  return axios.delete(`/address/${id}`);
+}
+
+export function getDefaultAddress() {
+  return axios.get('/address/default');
+}
+
+export function getAddressList() {
+  return axios.get('/address', { pageNumber: 1, pageSize: 1000 })
+}
+
+export function getAddressDetail(id) {
+  return axios.get(`/address/${id}`)
+}
+
+

src/service/cart.js

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+
+import axios from '../utils/axios'
+
+export function addCart(params) {
+  return axios.post('/shop-cart', params);
+}
+
+export function modifyCart(params) {
+  return axios.put('/shop-cart', params);
+}
+
+export function getCart(params) {
+  return axios.get('/shop-cart', { params });
+}
+
+export function deleteCartItem(id) {
+  return axios.delete(`/shop-cart/${id}`);
+}
+
+export function getByCartItemIds(params) {
+  return axios.get('/shop-cart/settle', { params });
+}
+

src/service/good.js

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+
+import axios from '../utils/axios'
+
+export function getDetail(id) {
+  return axios.get(`/goods/detail/${id}`);
+}
+
+export function getCategory() {
+  return axios.get('/categories');
+}
+
+export function search(params) {
+  return axios.get('/search', { params });
+}
+

src/service/home.js

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+
+import axios from '../utils/axios'
+
+export function getHome(params) {
+  return axios.get('/index-infos');
+}
+

src/service/order.js

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+
+import axios from '../utils/axios'
+
+export function createOrder(params) {
+  return axios.post('/saveOrder', params);
+}
+
+export function getOrderList(params) {
+  return axios.get('/order', { params });
+}
+
+export function getOrderDetail(id) {
+  return axios.get(`/order/${id}`);
+}
+
+export function cancelOrder(id) {
+  return axios.put(`/order/${id}/cancel`);
+}
+
+export function confirmOrder(id) {
+  return axios.put(`/order/${id}/finish`)
+}
+
+export function payOrder(params) {
+  return axios.get('/paySuccess', { params })
+}
+
+
+
+

src/service/user.js

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+
+import axios from '../utils/axios'
+
+export function getUserInfo() {
+  return axios.get('/user/info');
+}
+
+export function EditUserInfo(params) {
+  return axios.put('/user/info', params);
+}
+
+export function login(params) {
+  return axios.post('/user/login', params);
+}
+
+export function logout() {
+  return axios.post('/user/logout')
+}
+
+export function register(params) {
+  return axios.post('/user/register', params);
+}
+

src/store/actions.js

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+
+import { getCart } from '../service/cart'
+
+export default {
+  async updateCart(ctx) {
+    const { data } = await getCart()
+    ctx.commit('addCart', {
+      count: data.length || 0
+    })
+  }
+}

src/store/index.js

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+
+import Vue from 'vue'
+import Vuex from 'vuex'
+import state from './state'
+import actions from './actions'
+import mutations from './mutations'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state,
+  mutations,
+  actions,
+  modules: {}
+})

src/store/mutations.js

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+
+export default {
+  addCart (state, payload) {
+    state.cartCount = payload.count
+  }
+}

src/store/state.js

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+
+export default {
+  cartCount: 0
+}

src/utils/axios.js

+/**
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ */
+import axios from 'axios'
+import { Toast } from 'vant'
+import router from '../router'
+
+axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? 'http://backend-api-01.newbee.ltd/api/v1' : 'http://backend-api-01.newbee.ltd/api/v1'
+axios.defaults.withCredentials = true
+axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
+axios.defaults.headers['token'] = localStorage.getItem('token') || ''
+axios.defaults.headers.post['Content-Type'] = 'application/json'
+
+axios.interceptors.response.use(res => {
+  if (typeof res.data !== 'object') {
+    Toast.fail('服务端异常！')
+    return Promise.reject(res)
+  }
+  if (res.data.resultCode != 200) {
+    if (res.data.message) Toast.fail(res.data.message)
+    if (res.data.resultCode == 416) {
+      router.push({ path: '/login' })
+    }
+    return Promise.reject(res.data)
+  }
+
+  return res.data
+})
+
+export default axios

src/views/About.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *-->
+<template>
+  <div class="about">
+    <s-header :name="'关于我们'"></s-header>
+    <div class="about-body">
+      <van-divider :style="{ color: '#1baeae', borderColor: '#1baeae', fontSize: '20px', fontWeight: 500 }">简介</van-divider>
+      <div>newbee-mall 项目是一套电商系统，包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理系统，基于 Spring Boot 2.X 及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。</div>
+      <van-divider :style="{ color: '#1baeae', borderColor: '#1baeae', fontSize: '20px', fontWeight: 500 }">开源地址</van-divider>
+      <div>
+        <div>掘金小册配套学习文档：<a target="_blank" href="https://juejin.im/book/6844733826191589390">《Vue 商城项目开发实战》</a></div>
+        <br/>
+        <div>后端 API 地址：<a target="_blank" href="https://github.com/newbee-ltd/newbee-mall-api">https://github.com/newbee-ltd/newbee-mall-api</a></div>
+        <br/>
+        <div>前端 Vue 开源地址：<a target="_blank" href="https://github.com/newbee-ltd/newbee-mall-vue-app">https://github.com/newbee-ltd/newbee-mall-vue-app</a></div>
+        <br/>
+        <div>线上预览地址：<a target="_blank" href="http://47.99.134.126:5000/">http://vue-app.newbee.ltd</a></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import sHeader from '@/components/SimpleHeader'
+export default {
+  components: {
+    sHeader
+  },
+}
+</script>
+
+<style lang="less" scoped>
+  .about {
+    box-sizing: border-box;
+    padding: 20px;
+    .about-body {
+      margin-top: 44px;
+      font-size: 16px;
+      a {
+        color: #007fff;
+      }
+    }
+  }
+</style>

src/views/Address.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+<template>
+  <div class="address-box">
+    <s-header :name="'地址管理'" :back="'/user'"></s-header>
+    <div class="address-item">
+      <van-address-list
+        v-if="from != 'mine'"
+        v-model="chosenAddressId"
+        :list="list"
+        default-tag-text="默认"
+        @add="onAdd"
+        @edit="onEdit"
+        @select="select"
+      />
+      <van-address-list
+        v-else
+        v-model="chosenAddressId"
+        :list="list"
+        default-tag-text="默认"
+        @add="onAdd"
+        @edit="onEdit"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Toast } from 'vant';
+import sHeader from '@/components/SimpleHeader'
+import { getAddressList } from '../service/address'
+export default {
+  components: {
+    sHeader
+  },
+  data() {
+    return {
+      chosenAddressId: '1',
+      list: [],
+      from: this.$route.query.from,
+    }
+  },
+  async mounted() {
+    const { data } = await getAddressList()
+    this.list = data.map(item => {
+      return {
+        id: item.addressId,
+        name: item.userName,
+        tel: item.userPhone,
+        address: `${item.provinceName} ${item.cityName} ${item.regionName} ${item.detailAddress}`,
+        isDefault: !!item.defaultFlag
+      }
+    })
+  },
+  methods: {
+    onAdd() {
+      this.$router.push({ path: `address-edit?type=add&from=${this.from}` })
+    },
+    onEdit(item, index) {
+      this.$router.push({ path: `address-edit?type=edit&addressId=${item.id}&from=${this.from}` })
+    },
+    select(item, index) {
+      this.$router.push({ path: `create-order?addressId=${item.id}&from=${this.from}` })
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  @import '../common/style/mixin';
+  .address-box {
+    .van-radio__icon {
+      display: none;
+    }
+    .address-item {
+      margin-top: 44px;
+      .van-button {
+        background: @primary;
+        border-color: @primary;
+      }
+    }
+  }
+</style>

src/views/AddressEdit.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div class="address-edit-box">
+    <s-header :name="`${type == 'add' ? '新增地址' : '编辑地址'}`"></s-header>
+    <van-address-edit
+      class="edit"
+      :area-list="areaList"
+      :address-info="addressInfo"
+      :show-delete="type == 'edit'"
+      show-set-default
+      show-search-result
+      :search-result="searchResult"
+      :area-columns-placeholder="['请选择', '请选择', '请选择']"
+      @save="onSave"
+      @delete="onDelete"
+    />
+  </div>
+</template>
+
+<script>
+import { Toast } from 'vant'
+import sHeader from '@/components/SimpleHeader'
+import { addAddress, EditAddress, DeleteAddress, getAddressDetail } from '../service/address'
+import { tdist } from '@/common/js/utils'
+export default {
+  components: {
+    sHeader
+  },
+  data() {
+    return {
+      areaList: {
+        province_list: {},
+        city_list: {},
+        county_list: {}
+      },
+      searchResult: [],
+      type: 'add',
+      addressId: '',
+      addressInfo: {},
+      from: ''
+    }
+  },
+  async mounted() {
+    // 省市区列表构造
+    let _province_list = {}
+    let _city_list = {}
+    let _county_list = {}
+    tdist.getLev1().forEach(p => {
+      _province_list[p.id] = p.text
+      tdist.getLev2(p.id).forEach(c => {
+        _city_list[c.id] = c.text
+        tdist.getLev3(c.id).forEach(q => _county_list[q.id] = q.text)
+      })
+    })
+    this.areaList.province_list = _province_list
+    this.areaList.city_list = _city_list
+    this.areaList.county_list = _county_list
+
+    const { addressId, type, from } = this.$route.query
+    this.addressId = addressId
+    this.type = type
+    this.from = from || ''
+    if (type == 'edit') {
+      const { data: addressDetail } = await getAddressDetail(addressId)
+      let _areaCode = ''
+      const province = tdist.getLev1()
+      Object.entries(this.areaList.county_list).forEach(([id, text]) => {
+        // 先找出当前对应的区
+        if (text == addressDetail.regionName) {
+          // 找到区对应的几个省份
+          const provinceIndex = province.findIndex(item => item.id.substr(0, 2) == id.substr(0, 2))
+          // 找到区对应的几个市区
+          const cityItem = Object.entries(this.areaList.city_list).filter(([cityId, cityName]) => cityId.substr(0, 4) == id.substr(0, 4))[0]
+          // 对比找到的省份和接口返回的省份是否相等，因为有一些区会重名
+          if (province[provinceIndex].text == addressDetail.provinceName && cityItem[1] == addressDetail.cityName) {
+            _areaCode = id
+          }
+        }
+      })
+      this.addressInfo = {
+        id: addressDetail.addressId,
+        name: addressDetail.userName,
+        tel: addressDetail.userPhone,
+        province: addressDetail.provinceName,
+        city: addressDetail.cityName,
+        county: addressDetail.regionName,
+        addressDetail: addressDetail.detailAddress,
+        areaCode: _areaCode,
+        isDefault: !!addressDetail.defaultFlag
+      }
+    }
+  },
+  methods: {
+    async onSave(content) {
+      const params = {
+        userName: content.name,
+        userPhone: content.tel,
+        provinceName: content.province,
+        cityName: content.city,
+        regionName: content.county,
+        detailAddress: content.addressDetail,
+        defaultFlag: content.isDefault ? 1 : 0,
+      }
+      if (this.type == 'edit') {
+        params['addressId'] = this.addressId
+      }
+      const { message } = await this.type == 'add' ? addAddress(params) : EditAddress(params)
+      Toast('保存成功')
+      setTimeout(() => {
+        this.$router.push({ path: `address?from=${this.from}` })
+      }, 1000)
+
+    },
+    async onDelete() {
+      const { data } = await DeleteAddress(this.addressId)
+      Toast('删除成功')
+      setTimeout(() => {
+        this.$router.push({ path: 'address' })
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  @import '../common/style/mixin';
+  .address-edit-box {
+    margin-top: 44px;
+    .van-address-edit {
+      .van-button--danger {
+        background: @primary;
+        border-color: @primary;
+      }
+      .van-switch--on {
+        background: @primary;
+      }
+    }
+  }
+</style>

src/views/Cart.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div class="cart-box">
+    <s-header :name="'购物车'"></s-header>
+    <div class="cart-body">
+      <van-checkbox-group @change="groupChange" v-model="result" ref="checkboxGroup">
+        <van-swipe-cell :right-width="50" v-for="(item, index) in list" :key="index">
+          <div class="good-item">
+            <van-checkbox :name="item.cartItemId" />
+            <div class="good-img"><img :src="prefix(item.goodsCoverImg)" alt=""></div>
+            <div class="good-desc">
+              <div class="good-title">
+                <span>{{ item.goodsName }}</span>
+                <span>x{{ item.goodsCount }}</span>
+              </div>
+              <div class="good-btn">
+                <div class="price">¥{{ item.sellingPrice }}</div>
+                <van-stepper
+                  integer
+                  :min="1"
+                  :value="item.goodsCount"
+                  :name="item.cartItemId"
+                  async-change
+                  @change="onChange"
+                />
+              </div>
+            </div>
+          </div>
+          <van-button
+            slot="right"
+            square
+            icon="delete"
+            type="danger"
+            class="delete-button"
+            @click="deleteGood(item.cartItemId)"
+          />
+        </van-swipe-cell>
+      </van-checkbox-group>
+    </div>
+    <van-submit-bar
+      v-if="list.length > 0"
+      class="submit-all"
+      :price="total * 100"
+      button-text="结算"
+      @submit="onSubmit"
+    >
+      <van-checkbox @click="allCheck" v-model="checkAll">全选</van-checkbox>
+    </van-submit-bar>
+    <div class="empty" v-if="!list.length">
+      <van-icon name="smile-o" />
+      <div class="title">购物车空空空如也</div>
+      <van-button color="#1baeae" type="primary" @click="goTo" block>前往首页</van-button>
+    </div>
+    <nav-bar></nav-bar>
+  </div>
+</template>
+
+<script>
+import { Toast } from 'vant'
+import navBar from '@/components/NavBar'
+import sHeader from '@/components/SimpleHeader'
+import { getCart, deleteCartItem, modifyCart } from '../service/cart'
+export default {
+  data() {
+    return {
+      checked: false,
+      list: [],
+      all: false,
+      result: [],
+      checkAll: true
+    }
+  },
+  components: {
+    navBar,
+    sHeader
+  },
+  mounted() {
+    this.init()
+  },
+  computed: {
+    total: function() {
+      let sum = 0
+      let _list = this.list.filter(item => this.result.includes(item.cartItemId))
+      _list.forEach(item => {
+        sum += item.goodsCount * item.sellingPrice
+      })
+      return sum
+    }
+  },
+  methods: {
+    async init() {
+      Toast.loading({ message: '加载中...', forbidClick: true });
+      const { data } = await getCart({ pageNumber: 1 })
+      this.list = data
+      this.result = data.map(item => item.cartItemId)
+      Toast.clear()
+    },
+    goBack() {
+      this.$router.go(-1)
+    },
+    goTo() {
+      this.$router.push({ path: 'home' })
+    },
+    async onChange(value, detail) {
+      if (this.list.filter(item => item.cartItemId == detail.name)[0].goodsCount == value) return
+      Toast.loading({ message: '修改中...', forbidClick: true });
+      const params = {
+        cartItemId: detail.name,
+        goodsCount: value
+      }
+      const { data } = await modifyCart(params)
+      this.list.forEach(item => {
+        if (item.cartItemId == detail.name) {
+          item.goodsCount = value
+        }
+      })
+      Toast.clear();
+    },
+    async onSubmit() {
+      if (this.result.length == 0) {
+        Toast.fail('请选择商品进行结算')
+        return
+      }
+      const params = JSON.stringify(this.result)
+      // for(let i = 0; i < this.result.length; i++) {
+      //   await deleteCartItem(this.result[i])
+      // }
+      this.$router.push({ path: `create-order?cartItemIds=${params}` })
+    },
+    async deleteGood(id) {
+      const { data } = await deleteCartItem(id)
+      this.$store.dispatch('updateCart')
+      this.init()
+    },
+    groupChange(result) {
+      if (result.length == this.list.length) {
+        this.checkAll = true
+      } else {
+        this.checkAll = false
+      }
+      this.result = result
+    },
+    allCheck(value) {
+      if (!this.checkAll) {
+        this.result = this.list.map(item => item.cartItemId)
+      } else {
+        this.result = []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  @import '../common/style/mixin';
+  .cart-box {
+    .cart-header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 10000;
+      .fj();
+      .wh(100%, 44px);
+      line-height: 44px;
+      padding: 0 10px;
+      .boxSizing();
+      color: #252525;
+      background: #fff;
+      border-bottom: 1px solid #dcdcdc;
+      .cart-name {
+        font-size: 14px;
+      }
+    }
+    .cart-body {
+      margin: 60px 0 100px 0;
+      padding-left: 10px;
+      .good-item {
+        display: flex;
+        .good-img {
+          img {
+            .wh(100px, 100px)
+          }
+        }
+        .good-desc {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          flex: 1;
+          padding: 20px;
+          .good-title {
+            display: flex;
+            justify-content: space-between;
+          }
+          .good-btn {
+            display: flex;
+            justify-content: space-between;
+            .price {
+              font-size: 16px;
+              color: red;
+              line-height: 28px;
+            }
+            .van-icon-delete {
+              font-size: 20px;
+              margin-top: 4px;
+            }
+          }
+        }
+      }
+      .delete-button {
+        width: 50px;
+        height: 100%;
+      }
+    }
+    .empty {
+      width: 50%;
+      margin: 0 auto;
+      text-align: center;
+      margin-top: 200px;
+      .van-icon-smile-o {
+        font-size: 50px;
+      }
+      .title {
+        font-size: 16px;
+        margin-bottom: 20px;
+      }
+    }
+    .submit-all {
+      margin-bottom: 50px;
+      .van-checkbox {
+        margin-left: 10px
+      }
+      .van-submit-bar__text {
+        margin-right: 10px
+      }
+      .van-submit-bar__button {
+        background: @primary;
+      }
+    }
+    .van-checkbox__icon--checked .van-icon {
+      background-color: @primary;
+      border-color: @primary;
+    }
+  }
+</style>

src/views/Category.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div class="categray">
+    <div>
+      <header class="category-header wrap">
+        <i class="nbicon nbfanhui" @click="goHome"></i>
+        <div class="header-search">
+          <i class="nbicon nbSearch"></i>
+          <router-link tag="span" class="search-title" to="./product-list?from=category">全场50元起步</router-link>
+        </div>
+        <i class="iconfont icon-More"></i>
+      </header>
+      <nav-bar></nav-bar>
+      <div class="search-wrap" ref="searchWrap">
+        <list-scroll :scroll-data="categoryData" class="nav-side-wrapper">
+          <ul class="nav-side">
+            <li
+              v-for="item in categoryData"
+              :key="item.categoryId"
+              v-text="item.categoryName"
+              :class="{'active' : currentIndex == item.categoryId}"
+              @click="selectMenu(item.categoryId)"
+            ></li>
+          </ul>
+        </list-scroll>
+        <div class="search-content">
+          <list-scroll :scroll-data="categoryData" >
+            <div class="swiper-container">
+              <div class="swiper-wrapper">
+                <template v-for="(category, index) in categoryData">
+                  <div class="swiper-slide" v-if="currentIndex == category.categoryId" :key="index">
+                    <!-- <img class="category-main-img" :src="category.mainImgUrl" v-if="category.mainImgUrl"/> -->
+                    <div class="category-list" v-for="(products, index) in category.secondLevelCategoryVOS" :key="index">
+                      <p class="catogory-title">{{products.categoryName}}</p>
+                      <div class="product-item" v-for="(product, index) in products.thirdLevelCategoryVOS" :key="index" @click="selectProduct(product)">
+                        <img src="//s.weituibao.com/1583591077131/%E5%88%86%E7%B1%BB.png" class="product-img"/>
+                        <p v-text="product.categoryName" class="product-title"></p>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </list-scroll>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import navBar from '@/components/NavBar'
+import listScroll from '@/components/ListScroll'
+import { getCategory } from "../service/good";
+export default {
+  components: {
+    navBar,
+    listScroll
+  },
+  data() {
+    return {
+      categoryData: [],
+      currentIndex: 15
+    }
+  },
+  async mounted() {
+    this.setWrapHeight()
+    const { data } = await getCategory()
+    this.categoryData = data
+  },
+  methods: {
+    goHome () {
+      this.$router.push({ path: 'home' })
+    },
+    setWrapHeight() {
+      // 设置视口高度
+      let $screenHeight = document.documentElement.clientHeight
+      this.$refs.searchWrap.style.height = $screenHeight - 100 + 'px'
+    },
+    selectMenu(index) {
+      this.currentIndex = index
+    },
+    selectProduct(item){
+      this.$router.push({ path: `product-list?categoryId=${item.categoryId}` })
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+  @import '../common/style/mixin';
+  .categray {
+    .category-header {
+      background: #fff;
+      position: fixed;
+      left: 0;
+      top: 0;
+      .fj();
+      .wh(100%, 50px);
+      line-height: 50px;
+      padding: 0 15px;
+      box-sizing: border-box;
+      font-size: 15px;
+      color: #656771;
+      z-index: 10000;
+      &.active {
+        background: @primary;
+      }
+      .icon-left {
+        font-size: 25px;
+        font-weight: bold;
+      }
+      .header-search {
+        display: flex;
+        width: 80%;
+        height: 20px;
+        line-height: 20px;
+        margin: 10px 0;
+        padding: 5px 0;
+        color: #232326;
+        background: #F7F7F7;
+        border-radius: 20px;
+        .nbSearch {
+          padding: 0 10px 0 20px;
+          font-size: 17px;
+        }
+        .search-title {
+          font-size: 12px;
+          color: #666;
+        }
+      }
+      .icon-More {
+        font-size: 20px;
+      }
+    }
+  }
+  .search-wrap {
+    .fj();
+    width: 100%;
+    margin-top: 50px;
+    background: #F8F8F8;
+    border-top: 1px solid #999;
+    .nav-side-wrapper {
+      width: 28%;
+      height: 100%;
+      overflow: hidden;
+      .nav-side {
+        width: 100%;
+        .boxSizing();
+        background: #F8F8F8;
+        li {
+          width: 100%;
+          height: 56px;
+          text-align: center;
+          line-height: 56px;
+          font-size: 14px;
+          &.active {
+            color: @primary;
+            background: #fff;
+          }
+        }
+      }
+    }
+    .search-content {
+      width: 72%;
+      height: 100%;
+      padding: 0 10px;
+      background: #fff;
+      .boxSizing();
+      .swiper-container {
+        width: 100%;
+        .swiper-slide {
+          width: 100%;
+          .category-main-img {
+            width: 100%;
+          }
+          .category-list {
+            display: flex;
+            flex-wrap: wrap;
+            flex-shrink: 0;
+            width: 100%;
+            .catogory-title {
+              width: 100%;
+              font-size: 17px;
+              font-weight: 500;
+              padding: 20px 0;
+            }
+            .product-item {
+              width: 33.3333%;
+              margin-bottom: 10px;
+              text-align: center;
+              font-size: 15px;
+              .product-img {
+                .wh(30px, 30px);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .fade-out-enter-active, .fade-out-leave-active {
+    // transition: opacity 0.5s;
+  }
+
+  .fade-out-enter, .fade-out-leave-to {
+    // opacity: 0;
+  }
+</style>

src/views/CreateOrder.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div class="create-order">
+    <s-header :name="'生成订单'" @callback="deleteLocal"></s-header>
+    <div class="address-wrap">
+      <div class="name" @click="goTo">
+        <span>{{ address.userName }} </span>
+        <span>{{ address.userPhone }}</span>
+      </div>
+      <div class="address">
+        {{ address.provinceName }} {{ address.cityName }} {{ address.regionName }} {{ address.detailAddress }}
+      </div>
+      <van-icon class="arrow" name="arrow" />
+    </div>
+    <div class="good">
+      <div class="good-item" v-for="(item, index) in cartList" :key="index">
+        <div class="good-img"><img :src="prefix(item.goodsCoverImg)" alt=""></div>
+        <div class="good-desc">
+          <div class="good-title">
+            <span>{{ item.goodsName }}</span>
+            <span>x{{ item.goodsCount }}</span>
+          </div>
+          <div class="good-btn">
+            <div class="price">¥{{ item.sellingPrice }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pay-wrap">
+      <div class="price">
+        <span>商品金额</span>
+        <span>¥{{ total }}</span>
+      </div>
+      <van-button @click="createOrder" class="pay-btn" color="#1baeae" type="primary" block>生成订单</van-button>
+    </div>
+    <van-popup
+      closeable
+      :close-on-click-overlay="false"
+      v-model="showPay"
+      position="bottom"
+      :style="{ height: '30%' }"
+      @close="close"
+    >
+      <div :style="{ width: '90%', margin: '0 auto', padding: '50px 0' }">
+        <van-button :style="{ marginBottom: '10px' }" color="#1989fa" block @click="payOrder(1)">支付宝支付</van-button>
+        <van-button color="#4fc08d" block @click="payOrder(2)">微信支付</van-button>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import sHeader from '@/components/SimpleHeader'
+import { getCart, getByCartItemIds } from '../service/cart'
+import { getDefaultAddress, getAddressDetail } from '../service/address'
+import { createOrder, payOrder } from '../service/order'
+import { setLocal, getLocal } from '@/common/js/utils'
+import { Toast } from 'vant'
+export default {
+  components: {
+    sHeader
+  },
+  data() {
+    return {
+      cartList: [],
+      address: {},
+      showPay: false,
+      orderNo: '',
+      cartItemIds: []
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    async init() {
+      Toast.loading({ message: '加载中...', forbidClick: true });
+      const { addressId, cartItemIds } = this.$route.query
+      const _cartItemIds = cartItemIds ? JSON.parse(cartItemIds) : JSON.parse(getLocal('cartItemIds'))
+      setLocal('cartItemIds', JSON.stringify(_cartItemIds))
+      const { data: list } = await getByCartItemIds({ cartItemIds: _cartItemIds.join(',') })
+      const { data: address } = addressId ? await getAddressDetail(addressId) : await getDefaultAddress()
+      if (!address) {
+        this.$router.push({ path: 'address' })
+        return
+      }
+      this.cartList = list
+      this.address = address
+      Toast.clear()
+    },
+    goTo() {
+      this.$router.push({ path: `address?cartItemIds=${JSON.stringify(this.cartItemIds)}` })
+    },
+    deleteLocal() {
+      setLocal('cartItemIds', '')
+    },
+    async createOrder() {
+      const params = {
+        addressId: this.address.addressId,
+        cartItemIds: this.cartList.map(item => item.cartItemId)
+      }
+      const { data, resultCode } = await createOrder(params)
+      setLocal('cartItemIds', '')
+      this.orderNo = data
+      this.showPay = true
+    },
+    close() {
+      this.$router.push({ path: 'order' })
+    },
+    async payOrder(type) {
+      Toast.loading
+      await payOrder({ orderNo: this.orderNo, payType: type })
+      this.$router.push({ path: 'order' })
+    }
+  },
+  computed: {
+    total: function() {
+      let sum = 0
+      this.cartList.forEach(item => {
+        sum += item.goodsCount * item.sellingPrice
+      })
+      return sum
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import '../common/style/mixin';
+  .create-order {
+    background: #f9f9f9;
+    .address-wrap {
+      margin-bottom: 20px;
+      background: #fff;
+      position: relative;
+      margin-top: 44px;
+      font-size: 14px;
+      padding: 15px;
+      color: #222333;
+      .name, .address {
+        margin: 10px 0;
+      }
+      .arrow {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 20px;
+      }
+      &::before {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 2px;
+        background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
+        background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
+        background-size: 80px;
+        content: '';
+      }
+    }
+    .good {
+      margin-bottom: 120px;
+    }
+    .good-item {
+      padding: 10px;
+      background: #fff;
+      display: flex;
+      .good-img {
+        img {
+          .wh(100px, 100px)
+        }
+      }
+      .good-desc {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        flex: 1;
+        padding: 20px;
+        .good-title {
+          display: flex;
+          justify-content: space-between;
+        }
+        .good-btn {
+          display: flex;
+          justify-content: space-between;
+          .price {
+            font-size: 16px;
+            color: red;
+            line-height: 28px;
+          }
+          .van-icon-delete {
+            font-size: 20px;
+            margin-top: 4px;
+          }
+        }
+      }
+    }
+    .pay-wrap {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      background: #fff;
+      padding: 10px 0;
+      padding-bottom: 50px;
+      border-top: 1px solid #e9e9e9;
+      >div {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 5%;
+        margin: 10px 0;
+        font-size: 14px;
+        span:nth-child(2) {
+          color: red;
+          font-size: 18px;
+        }
+      }
+      .pay-btn {
+        position: fixed;
+        bottom: 7px;
+        right: 0;
+        left: 0;
+        width: 90%;
+        margin: 0 auto;
+      }
+    }
+  }
+</style>

src/views/Home.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div>
+    <!-- <header class="home-header wrap" :class="{'active' : headerScroll}">
+        <router-link tag="i" to="./category"><i class="nbicon nbmenu2"></i></router-link>
+        <div class="header-search">
+            <span class="app-name">新蜂商城</span>
+            <i class="iconfont icon-search"></i>
+            <router-link tag="span" class="search-title" to="./product-list?from=home">山河无恙，人间皆安</router-link>
+        </div>
+        <router-link class="login" tag="span" to="./login" v-if="!isLogin">登录</router-link>
+        <router-link class="login" tag="span" to="./user" v-else>
+          <van-icon name="manager-o" />
+        </router-link>
+    </header> -->
+    <tab-bar :index='0'></tab-bar>
+    <!-- <swiper :list="swiperList"></swiper>
+    <div class="category-list">
+      <div v-for="item in categoryList" v-bind:key="item.categoryId" @click="navclick(item)">
+        <img :src="item.imgUrl">
+        <span>{{item.name}}</span>
+      </div>
+    </div>
+    <div class="good">
+      <header class="good-header">新品上线</header>
+      <div class="good-box">
+        <div class="good-item" v-for="item in newGoodses" :key="item.goodsId" @click="goToDetail(item)">
+          <img :src="prefix(item.goodsCoverImg)" alt="">
+          <div class="good-desc">
+            <div class="title">{{ item.goodsName }}</div>
+            <div class="price">¥ {{ item.sellingPrice }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="good">
+      <header class="good-header">热门商品</header>
+      <div class="good-box">
+        <div class="good-item" v-for="item in hots" :key="item.goodsId" @click="goToDetail(item)">
+          <img :src="prefix(item.goodsCoverImg)" alt="">
+          <div class="good-desc">
+            <div class="title">{{ item.goodsName }}</div>
+            <div class="price">¥ {{ item.sellingPrice }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="good" :style="{ paddingBottom: '100px'}">
+      <header class="good-header">最新推荐</header>
+      <div class="good-box">
+        <div class="good-item" v-for="item in recommends" :key="item.goodsId" @click="goToDetail(item)">
+          <img :src="prefix(item.goodsCoverImg)" alt="">
+          <div class="good-desc">
+            <div class="title">{{ item.goodsName }}</div>
+            <div class="price">¥ {{ item.sellingPrice }}</div>
+          </div>
+        </div>
+      </div> -->
+    <!-- </div> -->
+  </div>
+</template>
+
+<script>
+// import navBar from '@/components/NavBar'
+import swiper from '@/components/Swiper'
+import { getHome } from '../service/home'
+import { getUserInfo } from '../service/user'
+import { getLocal } from '@/common/js/utils'
+import { Toast } from 'vant'
+import tabBar from '@/components/TabBar'
+export default {
+  name: 'home',
+  data() {
+    return {
+      swiperList: [],
+      isLogin: false,
+      headerScroll: false,
+      hots: [],
+      newGoodses: [],
+      recommends: [],
+      categoryList: [
+          {
+            name: '新蜂超市',
+            imgUrl: '//s.weituibao.com/1583585285461/cs.png',
+            categoryId: 100001
+          }, {
+            name: '新蜂服饰',
+            imgUrl: '//s.weituibao.com/1583585285468/fs.png',
+            categoryId: 100003
+          }, {
+            name: '全球购',
+            imgUrl: '//s.weituibao.com/1583585285470/qq.png',
+            categoryId: 100002
+          }, {
+            name: '新蜂生鲜',
+            imgUrl: '//s.weituibao.com/1583585285472/sx.png',
+            categoryId: 100004
+          }, {
+            name: '新蜂到家',
+            imgUrl: '//s.weituibao.com/1583585285467/dj.png',
+            categoryId: 100005
+          }, {
+            name: '充值缴费',
+            imgUrl: '//s.weituibao.com/1583585285465/cz.png',
+            categoryId: 100006
+          }, {
+            name: '9.9元拼',
+            imgUrl: '//s.weituibao.com/1583585285469/pt.png',
+            categoryId: 100007
+          }, {
+            name: '领劵',
+            imgUrl: '//s.weituibao.com/1583585285468/juan.png',
+            categoryId: 100008
+          }, {
+            name: '检查执行',
+            imgUrl: '//s.weituibao.com/1583585285471/sq.png',
+            categoryId: 1000011
+          }, {
+            name: '整改验收',
+            imgUrl: '//s.weituibao.com/1583585285471/sq.png',
+            categoryId: 1000012
+          }, {
+            name: '全部',
+            imgUrl: '//s.weituibao.com/1583585285470/qb.png',
+            categoryId: 100010
+          }, {
+            name: '整改通知',
+            imgUrl: '//s.weituibao.com/1583585285471/sq.png',
+            categoryId: 1000013
+          }
+      ],
+    }
+  },
+  components: {
+    // navBar,
+    tabBar,
+    // swiper
+  },
+  async mounted() {
+    const token = getLocal('token')
+    if (token) {
+      this.isLogin = true
+    }
+    window.addEventListener('scroll', this.pageScroll)
+    Toast.loading({
+      message: '加载中...',
+      forbidClick: true
+    });
+    const { data } = await getHome()
+    this.swiperList = data.carousels
+    this.newGoodses = data.newGoodses
+    this.hots = data.hotGoodses
+    this.recommends = data.recommendGoodses
+    Toast.clear()
+  },
+  methods: {
+    pageScroll() {
+      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+      scrollTop > 100 ? this.headerScroll = true : this.headerScroll = false
+    },
+    goToDetail(item) {
+      this.$router.push({ path: `product/${item.goodsId}` })
+    },
+    navclick(item){
+        if(item.name=="检查执行"){
+            this.$router.push('/checked')
+        }else if(item.name=="整改验收"){
+            this.$router.push('/correct')
+        }else if(item.name=="整改通知"){
+            this.$router.push('/notice')
+        }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped >
+  @import '../common/style/mixin';
+  .home-header {
+      position: fixed;
+      left: 0;
+      top: 0;
+      .wh(100%, 50px);
+      .fj();
+      line-height: 50px;
+      padding: 0 15px;
+      .boxSizing();
+      font-size: 15px;
+      color: #fff;
+      z-index: 10000;
+      .nbmenu2 {
+        color: @primary;
+      }
+      &.active {
+        background: @primary;
+        .nbmenu2 {
+          color: #fff;
+        }
+        .login {
+          color: #fff;
+        }
+      }
+
+      .header-search {
+          display: flex;
+          .wh(74%, 20px);
+          line-height: 20px;
+          margin: 10px 0;
+          padding: 5px 0;
+          color: #232326;
+          background: rgba(255, 255, 255, .7);
+          border-radius: 20px;
+          .app-name {
+              padding: 0 10px;
+              color: @primary;
+              font-size: 20px;
+              font-weight: bold;
+              border-right: 1px solid #666;
+          }
+          .icon-search {
+              padding: 0 10px;
+              font-size: 17px;
+          }
+          .search-title {
+              font-size: 12px;
+              color: #666;
+              line-height: 21px;
+          }
+      }
+      .icon-iconyonghu{
+        color: #fff;
+        font-size: 22px;
+      }
+      .login {
+        color: @primary;
+        line-height: 52px;
+        .van-icon-manager-o {
+          font-size: 20px;
+          vertical-align: -3px;
+        }
+      }
+  }
+  .category-list {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    width: 100%;
+    padding-bottom: 13px;
+    div {
+      display: flex;
+      flex-direction: column;
+      width: 20%;
+      text-align: center;
+      img {
+        .wh(40px, 40px);
+        margin: 13px auto 8px auto;
+      }
+    }
+  }
+  .good {
+    .good-header {
+      background: #f9f9f9;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      color: @primary;
+      font-size: 16px;
+      font-weight: 500;
+    }
+    .good-box {
+      display: flex;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      .good-item {
+        box-sizing: border-box;
+        width: 50%;
+        border-bottom: 1PX solid #e9e9e9;
+        padding: 10px 10px;
+        img {
+          display: block;
+          width: 120px;
+          margin: 0 auto;
+        }
+        .good-desc {
+          text-align: center;
+          font-size: 14px;
+          padding: 10px 0;
+          .title {
+            color: #222333;
+          }
+          .price {
+            color: @primary;
+          }
+        }
+        &:nth-child(2n + 1) {
+          border-right: 1PX solid #e9e9e9;
+        }
+      }
+    }
+  }
+  .floor-list {
+      width: 100%;
+      padding-bottom: 50px;
+      .floor-head {
+        width: 100%;
+        height: 40px;
+        background: #F6F6F6;
+      }
+      .floor-content {
+        display: flex;
+        flex-shrink: 0;
+        flex-wrap: wrap;
+        width: 100%;
+        .boxSizing();
+        .floor-category {
+          width: 50%;
+          padding: 10px;
+          border-right: 1px solid #dcdcdc;
+          border-bottom: 1px solid #dcdcdc;
+          .boxSizing();
+          &:nth-child(2n) {
+            border-right: none;
+          }
+          p {
+            font-size: 17px;
+            color: #333;
+            &:nth-child(2) {
+              padding: 5px 0;
+              font-size: 13px;
+              color: @primary;
+            }
+          }
+          .floor-products {
+            .fj();
+            width: 100%;
+            img {
+              .wh(65px, 65px);
+            }
+          }
+      }
+    }
+  }
+</style>

src/views/Login.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div class="login">
+    <s-header :name="type == 'login' ? '登录' : '注册'" :back="'/home'"></s-header>
+    <img class="logo" src="//s.weituibao.com/1582958061265/mlogo.png" alt="">
+    <div v-if="type == 'login'" class="login-body login">
+      <van-form @submit="onSubmit">
+        <van-field
+          v-model="username"
+          name="username"
+          label="用户名"
+          placeholder="用户名"
+          :rules="[{ required: true, message: '请填写用户名' }]"
+        />
+        <van-field
+          v-model="password"
+          type="password"
+          name="password"
+          label="密码"
+          placeholder="密码"
+          :rules="[{ required: true, message: '请填写密码' }]"
+        />
+        <div class="verify">
+          <Verify ref="loginVerifyRef" @error="error" :showButton="false" @success="success" :width="'100%'" :height="'40px'" :fontSize="'16px'" :type="2"></Verify>
+        </div>
+        <div style="margin: 16px;">
+          <div class="link-register" @click="toggle('register')">立即注册</div>
+          <van-button round block type="info" color="#1baeae" native-type="submit">登录</van-button>
+        </div>
+      </van-form>
+    </div>
+    <div v-else class="login-body register">
+      <van-form @submit="onSubmit">
+        <van-field
+          v-model="username1"
+          name="username1"
+          label="用户名"
+          placeholder="用户名"
+          :rules="[{ required: true, message: '请填写用户名' }]"
+        />
+        <van-field
+          v-model="password1"
+          type="password"
+          name="password1"
+          label="密码"
+          placeholder="密码"
+          :rules="[{ required: true, message: '请填写密码' }]"
+        />
+        <div class="verify">
+          <Verify ref="loginVerifyRef" @error="error" :showButton="false" @success="success" :width="'100%'" :height="'40px'" :fontSize="'16px'" :type="2"></Verify>
+        </div>
+        <div style="margin: 16px;">
+          <div class="link-login" @click="toggle('login')">已有登录账号</div>
+          <van-button round block type="info" color="#1baeae" native-type="submit">注册</van-button>
+        </div>
+      </van-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import sHeader from '@/components/SimpleHeader'
+import { login, register, getUserInfo } from '../service/user'
+import { setLocal, getLocal } from '@/common/js/utils'
+import { Toast } from 'vant'
+import Verify from 'vue2-verify'
+export default {
+  data() {
+    return {
+      username: '',
+      password: '',
+      username1: '',
+      password1: '',
+      type: 'login',
+      verify: false
+    }
+  },
+  components: {
+    sHeader,
+    Verify
+  },
+  methods: {
+    dealTriVer() {
+      // 执行验证码的验证，通过 this.verify 知道验证码是否填写正确
+      this.$refs.loginVerifyRef.$refs.instance.checkCode()
+    },
+    toggle(v) {
+      this.verify = false
+      this.type = v
+    },
+    async onSubmit(values) {
+      this.dealTriVer()
+      if (!this.verify) {
+        Toast.fail('验证码未填或填写错误!')
+        return
+      }
+      if (this.type == 'login') {
+        const { data, resultCode } = await login({
+          "loginName": values.username,
+          "passwordMd5": this.$md5(values.password)
+        })
+        
+        setLocal('token', data)
+        window.location.href = '/'
+      } else {
+        const { data } = await register({
+          "loginName": values.username1,
+          "password": values.password1
+        })
+        Toast.success('注册成功')
+        this.type = 'login'
+      }
+    },
+    success(obj) {
+      this.verify = true
+      // 回调之后，刷新验证码
+      obj.refresh()
+    },
+    error(obj) {
+      this.verify = false
+      // 回调之后，刷新验证码
+      obj.refresh()
+    }
+  },
+}
+</script>
+
+<style lang="less">
+  .login {
+    .logo {
+      width: 120px;
+      height: 120px;
+      display: block;
+      margin: 80px auto 0px;
+    }
+    .login-body {
+      padding: 0 20px;
+    }
+    .login {
+      .link-register {
+        font-size: 14px;
+        margin-bottom: 20px;
+        color: #1989fa;
+        display: inline-block;
+      }
+    }
+    .register {
+      .link-login {
+        font-size: 14px;
+        margin-bottom: 20px;
+        color: #1989fa;
+        display: inline-block;
+      }
+    }
+    .verify-bar-area {
+      margin-top: 24px;
+      .verify-left-bar {
+        border-color: #1baeae;
+      }
+      .verify-move-block {
+        background-color: #1baeae;
+        color: #fff;
+      }
+    }
+    .verify {
+      >div {
+        width: 100%;
+      }
+      display: flex;
+      justify-content: center;
+      .cerify-code-panel {
+        margin-top: 16px;
+      }
+      .verify-code {
+        width: 40%!important;
+        float: left!important;
+      }
+      .verify-code-area {
+        float: left!important;
+        width: 54%!important;
+        margin-left: 14px!important;
+        .varify-input-code {
+          width: 90px;
+          height: 38px!important;
+          border: 1px solid #e9e9e9;
+          padding-left: 10px;
+          font-size: 16px;
+        }
+        .verify-change-area {
+          line-height: 44px;
+        }
+      }
+    }
+  }
+</style>

src/views/Login2.vue

+<template>
+  <div class="login" :style="{ backgroundImage: `url(${bg})` }">
+    <div class="title">
+      <div class="login-logo">
+        <van-image :src="require('@/assets/login/login-logo.png')" />
+      </div>
+      <div class="login-name">首开集团安全隐患排查治理体系</div>
+    </div>
+
+    <div class="con" :style="{ backgroundImage: `url(${conBg})` }">
+      <div class="hello">Hello!</div>
+      <div class="welcome">
+        欢迎登录<span>首开集团安全隐患排查治理体系</span>!
+      </div>
+      <div class="login-form">
+        <van-form @submit="onSubmit">
+          <div class="username-wrap">
+            <div class="username-icon">
+              <van-image :src="require('@/assets/login/login-username.png')" />
+            </div>
+            <van-field
+              v-model="username"
+              name="username"
+              label=""
+              placeholder="账号"
+              :rules="[{ required: true, message: '请填写用户名' }]"
+            />
+          </div>
+          <div class="passworld-wrap">
+            <div class="passworld-icon">
+              <van-image :src="require('@/assets/login/login-passworld.png')" />
+            </div>
+            <van-field
+              v-model="password"
+              name="password"
+              placeholder="密码"
+              :rules="[{ required: true, message: '请填写密码' }]"
+            />
+          </div>
+
+          <div style="margin: 16px;">
+            <van-button round block type="info" native-type="submit"
+              >登录</van-button
+            >
+          </div>
+        </van-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      bg: require("@/assets/login/login-bg.png"),
+      conBg: require("@/assets/login/login-center.png"),
+      username: "",
+      password: ""
+    };
+  },
+  mounted() {},
+  methods: {
+    onSubmit(values) {
+        if(values.username=='admin'&&values.password=='123456'){
+            this.$notify({
+                message:'成功',
+                background:'green',
+                duration: 1000
+            })
+            localStorage.setItem('admin_token','2dsfewr')
+            this.$router.push('/MessageCenter')
+            location.reload();
+        }else{
+            this.$notify({
+                message:'账号或密码不正确',
+                background:'red',
+                duration: 1000
+            })
+        }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+/* @import url(); 引入css类 */
+.login {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-attachment: fixed;
+  .login-logo {
+    width: 120px;
+    margin: 22% auto 0px;
+  }
+  .login-name {
+    width: 100%;
+    text-align: center;
+    margin-top: 20px;
+    color: #fafbfe;
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .con {
+    width: 345px;
+    height: 340px;
+    margin: 62px auto 0;
+    padding: 35px 25px;
+    box-sizing: border-box;
+    background-size: cover;
+    background-repeat: no-repeat;
+    .hello {
+      color: #004fb1;
+      font-size: 20px;
+      font-weight: bold;
+    }
+    .welcome {
+      margin: 15px 0;
+      color: #7795e0;
+      span {
+        color: #71aaf2;
+      }
+    }
+    .login-form {
+      .username-wrap {
+        position: relative;
+        border-bottom: 1px solid #d2dcf5;
+        .username-icon {
+          width: 20px;
+          position: absolute;
+          left: 5px;
+          top: 9px;
+          z-index: 100;
+        }
+        /deep/ .van-field__body {
+          padding-left: 20px;
+          box-sizing: border-box;
+        }
+        /deep/ .van-field__error-message{
+          padding-left: 20px;
+        }
+      }
+       .passworld-wrap {
+        position: relative;
+        border-bottom: 1px solid #d2dcf5;
+        .passworld-icon {
+          width: 20px;
+          position: absolute;
+          left: 5px;
+          top: 9px;
+          z-index: 100;
+        }
+        /deep/ .van-field__body {
+          padding-left: 20px;
+          box-sizing: border-box;
+        }
+        /deep/ .van-field__error-message{
+          padding-left: 20px;
+        }
+      }
+
+    }
+  }
+}
+
+</style>

src/views/MessageCenter/MessageCenter.vue

+<template>
+  <div>
+    <!-- 头部标签 -->
+    <van-sticky>
+      <header class="header-wrap">
+        消息中心
+      </header>
+    </van-sticky>
+
+    <!-- 内容 -->
+    <div class="con">
+      <van-tabs
+        v-model="activeName"
+        color="#247df7"
+        title-inactive-colo="#d0d1d1"
+        title-active-color="#000000"
+        sticky
+        offset-top="50"
+      >
+        <van-tab title="消息信息" name="消息信息" badge="5">
+          <message-news></message-news>
+        </van-tab>
+        <van-tab title="待办事项" name="待办事项" badge="2">待办事项</van-tab>
+        <van-tab title="通知公告" name="通知公告" badge="6">通知公告</van-tab>
+      </van-tabs>
+    </div>
+
+    <!-- tanBar -->
+    <tab-bar :index="0"></tab-bar>
+  </div>
+</template>
+
+<script>
+import MessageNews from "./MessageNews.vue";
+import tabBar from "@/components/TabBar";
+export default {
+  components: {
+    MessageNews,
+    tabBar
+  },
+  data() {
+    return {
+      activeName: "消息信息"
+    };
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+<style lang="less" scoped>
+/* @import url(); 引入css类 */
+.header-wrap {
+  width: 100%;
+  height: 1.333333rem;
+  background-color: #2980f7;
+  font-size: 17px;
+  line-height: 1.333333rem;
+  color: white;
+  font-weight: 600;
+  text-align: center;
+}
+.con {
+  // height: calc(100% - 110px);
+  // height: 100%;
+  padding: 0 0 50px 0;
+  background-color: #f0f1f5;
+  position: relative;
+  /deep/ .van-info {
+    right: -6px;
+    background-color: #fa4c4c;
+  }
+}
+</style>

src/views/MessageCenter/MessageNews.vue

+<template>
+  <div>
+    <div class="message-wrap">
+      <!-- 标签 -->
+      <div class="category-wrap">
+        <!-- <span class="my-tag-style active">全部</span>
+        <span class="my-tag-style">已读</span>
+        <span class="my-tag-style">未读</span> -->
+        <span
+          class="my-tag-style"
+          :class="index == activeIndex ? 'active' : ''"
+          v-for="(item, index) in messageCategory"
+          :key="item.key"
+          @click="selectCategory(index, item.category)"
+          >{{ item.category }}</span
+        >
+      </div>
+
+      <!-- 搜索 -->
+      <div class="search-wrap">
+        <van-search v-model="searchVal" placeholder="搜索" @search="onSearch" />
+      </div>
+
+      <!-- 内容列表 -->
+      <div class="con-list">
+        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="onLoad"
+          > -->
+            <van-cell-group inset>
+              <div class="messgae-title">隐患确认信息</div>
+              <div class="message-content">
+                张大海已确认一般隐患B类，右万宝宝负责整改。
+              </div>
+            </van-cell-group>
+          <!-- </van-list>
+        </van-pull-refresh> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Toast } from "vant";
+export default {
+  data() {
+    return {
+      messageCategory: [
+        {
+          key: "0",
+          category: "全部"
+        },
+        {
+          key: "1",
+          category: "已读"
+        },
+        {
+          key: "2",
+          category: "未读"
+        }
+      ],
+      activeIndex: 0,
+      searchVal: "",
+      // refreshing: false, // 下拉刷新开关
+      // loading: false, // 列表滚动到底部会触发load事件
+      // finished: false // 列表数据全部加载完成
+    };
+  },
+  mounted() {},
+  methods: {
+    // 点击类别
+    selectCategory(index, data) {
+      this.activeIndex = index;
+      console.log(data);
+    },
+
+    // 搜索事件
+    onSearch(val) {
+      if (val !== "") {
+        console.log(val);
+      }
+    },
+
+    //  // 下拉刷新事件
+    // onRefresh() {
+    //   // 清空列表数据
+    //   this.finished = false;
+
+    //   // 重新加载数据
+    //   // 将 loading 设置为 true，表示处于加载状态
+    //   this.loading = true;
+    //   this.onLoad();
+    // },
+
+    // // 列表初始化函数
+    // onLoad() {
+    //   setTimeout(() => {
+    //     if (this.refreshing) {
+    //       this.refreshing = false;
+    //     }
+
+    //     // 加载完成后将loading改成 false
+    //     this.loading = false;
+    //     // 为什么会连续触发 load 事件？  先加上这句 this.finished = true; 以后再删
+    //     // this.finished = true;
+
+    //     // 如果列表数据全部加载完成 则将finished改为true
+    //     // if (this.list.length >= 40) {
+    //     //   this.finished = true;
+    //     // }
+    //   }, 5000);
+    // }
+  }
+};
+</script>
+<style lang="less" scoped>
+/* @import url(); 引入css类 */
+.message-wrap {
+  padding: 10px 10px 0;
+  background-color: #f0f1f5;
+  // 标签
+  .category-wrap {
+    .my-tag-style {
+      width: 75px;
+      height: 21px;
+      font-size: 13px;
+      border: 1px solid #1989fa;
+      border-radius: 4px;
+      color: #1989fa;
+      display: inline-block;
+      text-align: center;
+      line-height: 21px;
+      margin-right: 10px;
+    }
+    .active {
+      color: white;
+      background-color: #1989fa;
+    }
+  }
+  // 搜索
+  .search-wrap {
+    margin: 10px 0;
+    .van-search {
+      border-radius: 5px;
+      padding: 5px 12px;
+    }
+    .van-search__content {
+      background-color: #ffffff;
+    }
+  }
+  //  内容
+  .con-list {
+    .van-cell-group--inset {
+      margin: 0;
+      margin-bottom: 10px;
+      padding: 10px;
+      font-size: 13px;
+      .messgae-title {
+      }
+      .message-content {
+        margin-top: 10px;
+      }
+    }
+  }
+}
+</style>

src/views/My.vue

+<template>
+  <div>
+    <!-- 头部标签 -->
+    <van-sticky>
+      <header class="header-wrap">
+        首开集团安全管理平台
+      </header>
+    </van-sticky>
+
+    <!-- 内容 -->
+    <div class="con">
+      <!-- 个人信息 -->
+      <van-cell-group inset>
+        <van-row gutter="20">
+          <van-col span="6">
+            <div>
+              <van-image
+                width="2rem"
+                height="2rem"
+                fit="fill"
+                :src="userInfo.portrait"
+              />
+            </div>
+          </van-col>
+          <van-col span="18">
+            <div class="user-info-wrap">
+              <div class="user-name">{{ userInfo.name }}</div>
+              <p>{{ userInfo.position }}</p>
+              <div class="tag-wrap">
+                <van-tag color="#cbcdfb">隐患上报人</van-tag>
+                <van-tag color="#b5e2f1">隐患整改人</van-tag>
+                <van-tag color="#bed9fd">检查专员</van-tag>
+              </div>
+            </div>
+          </van-col>
+        </van-row>
+      </van-cell-group>
+
+      <!-- 设置 -->
+      <van-cell-group inset class="my-cell-group">
+        <div class="set-wrap">
+          <van-image
+            width="0.613rem"
+            height="0.613rem"
+            fit="fill"
+            :src="require('@/assets/myTerritory/set.png')"
+          />
+          <span>设置</span>
+        </div>
+      </van-cell-group>
+
+      <!-- 退出系统 -->
+      <footer class="sign-out">
+        <van-button type="info" block @click="logout">退出系统</van-button>
+      </footer>
+    </div>
+
+    <!-- tanBar -->
+    <tab-bar :index="2"></tab-bar>
+  </div>
+</template>
+
+<script>
+import tabBar from "@/components/TabBar";
+export default {
+  components: {
+    tabBar
+  },
+  data() {
+    return {
+      userInfo: {
+        portrait: require("@/assets/myTerritory/touxiang.png"),
+        name: "刘华强",
+        position: "技术安全部"
+        // jurisdiction: [
+        //   '隐患上报人',
+        //   '隐患整改人',
+        //   '检查专员'
+        // ]
+      }
+    };
+  },
+  mounted() {},
+  methods: {
+    logout() {
+        localStorage.removeItem('admin_token');
+        this.$router.push("/Login2");
+        location.reload();
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+/* @import url(); 引入css类 */
+.header-wrap {
+  width: 100%;
+  height: 50px;
+  background-color: #2980f7;
+  font-size: 17px;
+  line-height: 50px;
+  color: white;
+  font-weight: 600;
+  text-align: center;
+}
+.con {
+  height: calc(100% - 110px);
+  padding: 10px 0 50px 0;
+  background-color: #f0f1f5;
+  position: relative;
+  .user-info-wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .user-name {
+      font-size: 17px;
+      font-weight: bold;
+    }
+
+    .tag-wrap {
+      .van-tag {
+        margin-right: 10px;
+        margin-top: 3px;
+        padding: 2px 4px;
+      }
+    }
+  }
+
+  .my-cell-group {
+    padding: 10px 10px !important;
+    .set-wrap {
+      height: 0.8rem;
+      display: flex;
+      align-items: center;
+      span {
+        margin-left: 0.2666rem;
+        font-size: 15px;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.sign-out {
+  width: 96%;
+  position: absolute;
+  bottom: 1.86667rem;
+  left: 0px;
+  right: 0;
+  margin: auto;
+  overflow: hidden;
+  border-radius: 5px;
+  button {
+    font-size: 15px;
+    font-weight: bold;
+  }
+}
+.van-cell-group--inset {
+  margin: 0 10px 10px;
+  padding: 10px 10px 15px;
+}
+</style>

src/views/Order.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div class="order-box">
+    <s-header :name="'我的订单'" :back="'/user'"></s-header>
+    <van-tabs @change="onChangeTab" :color="'#1baeae'" :title-active-color="'#1baeae'" class="order-tab" v-model="status">
+      <van-tab title="全部" name=''></van-tab>
+      <van-tab title="待付款" name="0"></van-tab>
+      <van-tab title="待确认" name="1"></van-tab>
+      <van-tab title="待发货" name="2"></van-tab>
+      <van-tab title="已发货" name="3"></van-tab>
+      <van-tab title="交易完成" name="4"></van-tab>
+    </van-tabs>
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="order-list-refresh">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+        @offset="300"
+      >
+        <div v-for="(item, index) in list" :key="index" class="order-item-box" @click="goTo(item.orderNo)">
+          <div class="order-item-header">
+            <span>订单时间：{{ item.createTime }}</span>
+            <span>{{ item.orderStatusString }}</span>
+          </div>
+          <van-card
+            v-for="one in item.newBeeMallOrderItemVOS"
+            :key="one.orderId"
+            :num="one.goodsCount"
+            :price="one.sellingPrice"
+            desc="全场包邮"
+            :title="one.goodsName"
+            :thumb="prefix(one.goodsCoverImg)"
+          />
+        </div>
+      </van-list>
+    </van-pull-refresh>
+  </div>
+</template>
+
+<script>
+import sHeader from '@/components/SimpleHeader'
+import { getOrderList } from '../service/order'
+import { prefix } from '@/common/js/utils'
+
+export default {
+  data() {
+    return {
+      status: '',
+      loading: false,
+      finished: false,
+      refreshing: false,
+      list: [],
+      page: 1
+    }
+  },
+  components: {
+    sHeader
+  },
+  async mounted() {
+    // this.loadData()
+  },
+  methods: {
+    async loadData() {
+      const { data, data: { list } } = await getOrderList({ pageNumber: this.page, status: this.status })
+      this.list = this.list.concat(list)
+      this.totalPage = data.totalPage
+      this.loading = false;
+      if (this.page >= data.totalPage) this.finished = true
+    },
+    onChangeTab(name, title) {
+      this.status = name
+      this.onRefresh()
+    },
+    goTo(id) {
+      this.$router.push({ path: `order-detail?id=${id}` })
+    },
+    goBack() {
+      this.$router.go(-1)
+    },
+    onLoad() {
+      if (!this.refreshing && this.page < this.totalPage) {
+        this.page = this.page + 1
+      }
+      if (this.refreshing) {
+        this.list = [];
+        this.refreshing = false;
+      }
+      this.loadData()
+    },
+    onRefresh() {
+      this.refreshing = true
+      this.finished = false
+      this.loading = true
+      this.page = 1
+      this.onLoad()
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import '../common/style/mixin';
+  .order-box {
+    .order-header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 10000;
+      .fj();
+      .wh(100%, 44px);
+      line-height: 44px;
+      padding: 0 10px;
+      .boxSizing();
+      color: #252525;
+      background: #fff;
+      border-bottom: 1px solid #dcdcdc;
+      .order-name {
+        font-size: 14px;
+      }
+    }
+    .order-tab {
+      margin-top: 44px;
+      position: fixed;
+      left: 0;
+      z-index: 1000;
+      width: 100%;
+    }
+    .order-list-refresh {
+      margin-top: 68px;
+      .van-card__content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .van-pull-refresh__head {
+        background: #f9f9f9;
+      }
+      .van-list {
+        min-height: calc(100vh - 88px);
+        background: #f9f9f9;
+        margin-top: 20px;
+      }
+      .order-item-box {
+        margin: 20px 10px;
+        background-color: #fff;
+        .order-item-header {
+          padding: 10px 20px 0 20px;
+          display: flex;
+          justify-content: space-between;
+        }
+        .van-card {
+          background-color: #fff;
+          margin-top: 0;
+        }
+      }
+    }
+  }
+</style>

src/views/OrderDetail.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div class="order-detail-box">
+    <s-header :name="'订单详情'" @callback="close"></s-header>
+    <div class="order-status">
+      <div class="status-item">
+        <label>订单状态：</label>
+        <span>{{ detail.orderStatusString }}</span>
+      </div>
+      <div class="status-item">
+        <label>订单编号：</label>
+        <span>{{ detail.orderNo }}</span>
+      </div>
+      <div class="status-item">
+        <label>下单时间：</label>
+        <span>{{ detail.createTime }}</span>
+      </div>
+      <!-- <van-button v-if="[1,2,3].includes(detail.orderStatus)" style="margin-bottom: 10px" color="#1baeae" block @click="confirmOrder(detail.orderNo)">确认订单</van-button> -->
+      <van-button v-if="detail.orderStatus == 0" style="margin-bottom: 10px" color="#1baeae" block @click="showPayFn">去支付</van-button>
+      <van-button v-if="!(detail.orderStatus < 0 || detail.orderStatus == 4)" block @click="cancelOrder(detail.orderNo)">取消订单</van-button>
+    </div>
+    <div class="order-price">
+      <div class="price-item">
+        <label>商品金额：</label>
+        <span>¥ {{ detail.totalPrice }}</span>
+      </div>
+      <div class="price-item">
+        <label>配送方式：</label>
+        <span>普通快递</span>
+      </div>
+    </div>
+    <van-card
+      v-for="item in detail.newBeeMallOrderItemVOS"
+      :key="item.goodsId"
+      style="background: #fff"
+      :num="item.goodsCount"
+      :price="item.sellingPrice"
+      desc="全场包邮"
+      :title="item.goodsName"
+      :thumb="prefix(item.goodsCoverImg)"
+    />
+    <van-popup
+      v-model="showPay"
+      position="bottom"
+      :style="{ height: '24%' }"
+    >
+      <div :style="{ width: '90%', margin: '0 auto', padding: '20px 0' }">
+        <van-button :style="{ marginBottom: '10px' }" color="#1989fa" block @click="payOrder(detail.orderNo, 1)">支付宝支付</van-button>
+        <van-button color="#4fc08d" block @click="payOrder(detail.orderNo, 2)">微信支付</van-button>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import sHeader from '@/components/SimpleHeader'
+import { getOrderDetail, cancelOrder, confirmOrder, payOrder } from '../service/order'
+import { Dialog, Toast } from 'vant'
+export default {
+  components: {
+    sHeader
+  },
+  data() {
+    return {
+      detail: {},
+      showPay: false
+    }
+  },
+  mounted() {
+    this.init()
+
+  },
+  methods: {
+    async init() {
+      Toast.loading({
+        message: '加载中...',
+        forbidClick: true
+      });
+      const { id } = this.$route.query
+      const { data } = await getOrderDetail(id)
+      this.detail = data
+      Toast.clear()
+    },
+    cancelOrder(id) {
+      Dialog.confirm({
+        title: '确认取消订单？',
+      }).then(() => {
+        cancelOrder(id).then(res => {
+          if (res.resultCode == 200) {
+            Toast('删除成功')
+            this.init()
+          }
+        })
+      }).catch(() => {
+        // on cancel
+      });
+    },
+    confirmOrder(id) {
+      Dialog.confirm({
+        title: '是否确认订单？',
+      }).then(() => {
+        confirmOrder(id).then(res => {
+          if (res.resultCode == 200) {
+            Toast('确认成功')
+            this.init()
+          }
+        })
+      }).catch(() => {
+        // on cancel
+      });
+    },
+    showPayFn() {
+      this.showPay = true
+    },
+    async payOrder(id, type) {
+      Toast.loading
+      await payOrder({ orderNo: id, payType: type })
+      this.showPay = false
+      this.init()
+    },
+    close() {
+      Dialog.close()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .order-detail-box {
+    background: #f7f7f7;
+    .order-status {
+      background: #fff;
+      margin-top: 44px;
+      padding: 20px;
+      font-size: 15px;
+      .status-item {
+        margin-bottom: 10px;
+        label {
+          color: #999;
+        }
+        span {
+
+        }
+      }
+    }
+    .order-price {
+      background: #fff;
+      margin: 20px 0;
+      padding: 20px;
+      font-size: 15px;
+      .price-item {
+        margin-bottom: 10px;
+        label {
+          color: #999;
+        }
+        span {
+
+        }
+      }
+    }
+    .van-card {
+      margin-top: 0;
+    }
+    .van-card__content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+</style>

src/views/ProductDetail.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div class="product-detail">
+    <s-header :name="'商品详情'"></s-header>
+    <div class="detail-content">
+      <div class="detail-swipe-wrap">
+        <van-swipe class="my-swipe" indicator-color="#1baeae">
+          <van-swipe-item v-for="(item, index) in detail.goodsCarouselList" :key="index">
+            <img :src="prefix(item)" alt="">
+          </van-swipe-item>
+        </van-swipe>
+      </div>
+      <div class="product-info">
+        <div class="product-title">
+          {{ detail.goodsName }}
+        </div>
+        <div class="product-desc">免邮费 顺丰快递</div>
+        <div class="product-price">
+          <span>¥{{ detail.sellingPrice }}</span>
+          <!-- <span>库存203</span> -->
+        </div>
+      </div>
+      <div class="product-intro">
+        <ul>
+          <li>概述</li>
+          <li>参数</li>
+          <li>安装服务</li>
+          <li>常见问题</li>
+        </ul>
+        <div class="product-content" v-html="detail.goodsDetailContent"></div>
+      </div>
+    </div>
+    <van-goods-action>
+      <van-goods-action-icon icon="chat-o" text="客服" />
+      <van-goods-action-icon icon="cart-o" :info="!count ? '' : count" @click="goTo()" text="购物车"/>
+      <van-goods-action-button type="warning" @click="addCart" text="加入购物车" />
+      <van-goods-action-button type="danger" @click="goToCart" text="立即购买" />
+    </van-goods-action>
+  </div>
+</template>
+
+<script>
+import { getDetail } from '../service/good'
+import { addCart } from '../service/cart'
+import sHeader from '@/components/SimpleHeader'
+import { Toast } from 'vant'
+export default {
+  data() {
+    return {
+      detail: {
+        goodsCarouselList: []
+      }
+    }
+  },
+  components: {
+    sHeader
+  },
+  async mounted() {
+    const { id } = this.$route.params
+    const { data } = await getDetail(id)
+    this.detail = data
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1)
+    },
+    goTo() {
+      this.$router.push({ path: '/cart' })
+    },
+    async addCart() {
+      const { data, resultCode } = await addCart({ goodsCount: 1, goodsId: this.detail.goodsId })
+      if (resultCode == 200 ) Toast.success('添加成功')
+      this.$store.dispatch('updateCart')
+    },
+    async goToCart() {
+      const { data, resultCode } = await addCart({ goodsCount: 1, goodsId: this.detail.goodsId })
+      this.$store.dispatch('updateCart')
+      this.$router.push({ path: '/cart' })
+    }
+  },
+  computed: {
+    count () {
+      return this.$store.state.cartCount
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  @import '../common/style/mixin';
+  .product-detail {
+    .detail-header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 10000;
+      .fj();
+      .wh(100%, 44px);
+      line-height: 44px;
+      padding: 0 10px;
+      .boxSizing();
+      color: #252525;
+      background: #fff;
+      border-bottom: 1px solid #dcdcdc;
+      .product-name {
+        font-size: 14px;
+      }
+    }
+    .detail-content {
+      margin-top: 44px;
+      .detail-swipe-wrap {
+        .my-swipe .van-swipe-item {
+          img {
+            width: 100%;
+            // height: 300px;
+          }
+        }
+      }
+      .product-info {
+        padding: 0 10px;
+        .product-title {
+          font-size: 18px;
+          text-align: left;
+          color: #333;
+        }
+        .product-desc {
+          font-size: 14px;
+          text-align: left;
+          color: #999;
+          padding: 5px 0;
+        }
+        .product-price {
+          .fj();
+          span:nth-child(1) {
+            color: #F63515;
+            font-size: 22px;
+          }
+          span:nth-child(2) {
+            color: #999;
+            font-size: 16px;
+          }
+        }
+      }
+      .product-intro {
+        width: 100%;
+        ul {
+          .fj();
+          width: 100%;
+          margin: 10px 0;
+          li {
+            flex: 1;
+            padding: 5px 0;
+            text-align: center;
+            font-size: 15px;
+            border-right: 1px solid #999;
+            box-sizing: border-box;
+            &:last-child {
+              border-right: none;
+            }
+          }
+        }
+        .product-content {
+          padding: 0 20px;
+          img {
+            width: 100%;
+          }
+        }
+      }
+    }
+    .van-goods-action-button--warning {
+      background: linear-gradient(to right,#6bd8d8, @primary)
+    }
+    .van-goods-action-button--danger {
+      background: linear-gradient(to right, #0dc3c3, #098888)
+    }
+  }
+</style>

src/views/ProductList.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div class="product-list-wrap">
+    <div class="product-list-content">
+      <header class="category-header wrap">
+        <i class="nbicon nbfanhui" @click="goBack"></i>
+        <div class="header-search">
+          <i class="nbicon nbSearch"></i>
+          <input
+            type="text"
+            class="search-title"
+            @mouseenter="textEnter"
+            @mouseleave="textLeave"
+            v-model="keyword"/>
+        </div>
+        <span class="search-btn" @click="getSearch">搜索</span>
+      </header>
+      <van-tabs type="card" color="#1baeae" @click="changeTab" >
+        <van-tab title="推荐" name=""></van-tab>
+        <van-tab title="新品" name="new"></van-tab>
+        <van-tab title="价格" name="price"></van-tab>
+      </van-tabs>
+    </div>
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="product-list-refresh">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+        @offset="300"
+      >
+        <!-- <p v-for="item in list" :key="item">{{ item }}</p> -->
+        <div class="product-item" v-for="(item, index) in productList" :key="index" @click="productDetail(item)">
+          <img :src="prefix(item.goodsCoverImg)" />
+          <div class="product-info">
+            <p class="name">{{item.goodsName}}</p>
+            <p class="subtitle">{{item.goodsIntro}}</p>
+            <span class="price">￥ {{item.sellingPrice}}</span>
+          </div>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+  </div>
+</template>
+
+<script>
+import { getQueryString } from '@/common/js/utils'
+import { search } from '../service/good'
+import { Toast } from 'vant'
+export default {
+  data() {
+    return {
+      keyword: this.$route.query.keyword || '',
+      searchBtn: false,
+      seclectActive: false,
+      refreshing: false,
+      list: [],
+      loading: false,
+      finished: false,
+      productList: [],
+      totalPage: 0,
+      page: 1,
+      orderBy: ''
+    }
+  },
+  mounted() {
+    // window.addEventListener('scroll', this.pageScroll)
+    // setTimeout(() => {
+    //     this.isLoading = false
+    // }, 500)
+    // this.init()
+  },
+  methods: {
+    async init() {
+      const { categoryId, from } = this.$route.query
+      if (!categoryId && !this.keyword) {
+        // Toast.fail('请输入关键词')
+        this.finished = true
+        this.loading = false;
+        return
+      }
+      const { data, data: { list } } = await search({ pageNumber: this.page, goodsCategoryId: categoryId, keyword: this.keyword, orderBy: this.orderBy })
+      this.productList = this.productList.concat(list)
+      this.totalPage = data.totalPage
+      this.loading = false;
+      if (this.page >= data.totalPage) this.finished = true
+    },
+    goBack() {
+      this.$router.go(-1)
+    },
+    productDetail(item) {
+      this.$router.push({ path: `product/${item.goodsId}` })
+    },
+    textEnter() {
+
+    },
+    textLeave() {
+
+    },
+    getSearch() {
+      this.onRefresh()
+    },
+    pageScroll() {
+      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+      scrollTop > 50 ? this.seclectActive = true : this.seclectActive = false
+    },
+    onLoad() {
+      if (!this.refreshing && this.page < this.totalPage) {
+        this.page = this.page + 1
+      }
+      if (this.refreshing) {
+        this.productList = [];
+        this.refreshing = false;
+      }
+      this.init()
+    },
+    onRefresh() {
+      this.refreshing = true
+      this.finished = false
+      this.loading = true
+      this.page = 1
+      this.onLoad()
+    },
+    changeTab(name, title) {
+      this.orderBy = name
+      this.onRefresh()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import '../common/style/mixin';
+  .product-list-content {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+    background: #fff;
+    .category-header {
+      .fj();
+      width: 100%;
+      height: 50px;
+      line-height: 50px;
+      padding: 0 15px;
+      .boxSizing();
+      font-size: 15px;
+      color: #656771;
+      z-index: 10000;
+      &.active {
+        background: @primary;
+      }
+      .icon-left {
+        font-size: 25px;
+        font-weight: bold;
+      }
+      .header-search {
+        display: flex;
+        width: 76%;
+        height: 20px;
+        line-height: 20px;
+        margin: 10px 0;
+        padding: 5px 0;
+        color: #232326;
+        background: #F7F7F7;
+        .borderRadius(20px);
+        .nbSearch {
+          padding: 0 5px 0 20px;
+          font-size: 17px;
+        }
+        .search-title {
+          font-size: 12px;
+          color: #666;
+          background: #F7F7F7;
+        }
+    }
+    .icon-More {
+      font-size: 20px;
+    }
+    .search-btn {
+      height: 28px;
+      margin: 8px 0;
+      line-height: 28px;
+      padding: 0 5px;
+      color: #fff;
+      background: @primary;
+      .borderRadius(5px);
+      margin-top: 10px;
+    }
+  }
+}
+  .product-list-refresh {
+    margin-top: 78px;
+    .product-item {
+      .fj();
+      width: 100%;
+      height: 120px;
+      padding: 10px 0;
+      border-bottom: 1px solid #dcdcdc;
+      img {
+        width: 140px;
+        height: 120px;
+        padding: 0 10px;
+        .boxSizing();
+      }
+      .product-info {
+          width: 56%;
+          height: 120px;
+          padding: 5px;
+          text-align: left;
+          .boxSizing();
+          p {
+            margin: 0
+          }
+          .name {
+            width: 100%;
+            max-height: 40px;
+            line-height: 20px;
+            font-size: 15px;
+            color: #333;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space: nowrap;
+          }
+          .subtitle {
+            width: 100%;
+            max-height: 20px;
+            padding: 10px 0;
+            line-height: 25px;
+            font-size: 13px;
+            color: #999;
+            overflow: hidden;
+          }
+          .price {
+            color: @primary;
+            font-size: 16px;
+          }
+      }
+  }
+}
+</style>

src/views/SaveWorkbench.vue

+<template>
+  <div>
+    <!-- 头部标签 -->
+    <van-sticky>
+      <header class="header-wrap">
+        首开集团安全隐患排查治理体系
+      </header>
+    </van-sticky>
+
+    <!-- 内容 -->
+    <div class="con">
+      <!-- 消息中心 -->
+      <van-cell-group inset>
+        <van-cell value="消息中心" />
+        <van-grid :column-num="5">
+          <van-grid-item
+            v-for="item in newsCenterList"
+            :key="item.key"
+            :icon="item.imgUrl"
+            :text="item.text"
+            @click="myClick(item.text)"
+          />
+        </van-grid>
+      </van-cell-group>
+
+      <!-- 风控分级管控 -->
+      <van-cell-group inset>
+        <van-cell value="风控分级管控" />
+        <van-grid :column-num="5">
+          <van-grid-item
+            v-for="item in riskList"
+            :key="item.key"
+            :icon="item.imgUrl"
+            :text="item.text"
+          />
+        </van-grid>
+      </van-cell-group>
+
+      <!-- 隐患排查治理 -->
+      <van-cell-group inset>
+        <van-cell value="隐患排查治理" />
+        <van-grid :column-num="5">
+          <van-grid-item
+            v-for="item in dangerList"
+            :key="item.key"
+            :icon="item.imgUrl"
+            :text="item.text"
+          />
+        </van-grid>
+      </van-cell-group>
+
+      <!-- 安全监督检查 -->
+      <van-cell-group inset>
+        <van-cell value="安全监督检查" />
+        <van-grid :column-num="5">
+          <van-grid-item @click="jump(item.path)"
+            v-for="item in safetyCheckList"
+            :key="item.key"
+            :icon="item.imgUrl"
+            :text="item.text"
+          />
+        </van-grid>
+      </van-cell-group>
+    </div>
+
+    <!-- tanBar -->
+    <tab-bar :index="1"></tab-bar>
+  </div>
+</template>
+
+<script>
+import tabBar from "@/components/TabBar";
+export default {
+  components: {
+    tabBar
+  },
+  data() {
+    return {
+      newsCenterList: [
+        // 消息中心的图标
+        {
+          key: "1",
+          imgUrl: require("@/assets/workbench/notice.png"),
+          text: "通知公告"
+        },
+        {
+          key: "2",
+          imgUrl: require("@/assets/workbench/wait-do.png"),
+          text: "待办事项"
+        },
+        {
+          key: "3",
+          imgUrl: require("@/assets/workbench/news.png"),
+          text: "消息提醒"
+        },
+        {
+          key: "4",
+          imgUrl: require("@/assets/workbench/set-up.png"),
+          text: "我的设置"
+        }
+      ],
+      riskList: [
+        // 风控分级管控
+        {
+          key: "1",
+          imgUrl: require("@/assets/workbench/risk-report.png"),
+          text: "风险填报"
+        },
+        {
+          key: "2",
+          imgUrl: require("@/assets/workbench/risk-confirm.png"),
+          text: "风险确认"
+        },
+        {
+          key: "3",
+          imgUrl: require("@/assets/workbench/risk-account.png"),
+          text: "风险台账"
+        }
+      ],
+      dangerList: [
+        // 隐患排查治理
+        {
+          key: "1",
+          imgUrl: require("@/assets/workbench/danger-report.png"),
+          text: "隐患上报"
+        },
+        {
+          key: "2",
+          imgUrl: require("@/assets/workbench/danger-confirm.png"),
+          text: "隐患确认"
+        },
+        {
+          key: "3",
+          imgUrl: require("@/assets/workbench/danger-rectification.png"),
+          text: "隐患整改"
+        },
+        {
+          key: "4",
+          imgUrl: require("@/assets/workbench/danger-acceptance.png"),
+          text: "隐患验收"
+        },
+        {
+          key: "5",
+          imgUrl: require("@/assets/workbench/danger-account.png"),
+          text: "隐患台账"
+        }
+      ],
+      safetyCheckList: [
+        // 安全监督检查
+        {
+          key: "1",
+          path:'',
+          imgUrl: require("@/assets/workbench/inspect-plane.png"),
+          text: "检查计划"
+        },
+        {
+          key: "2",
+          path:'',
+          imgUrl: require("@/assets/workbench/plane-approval.png"),
+          text: "计划审批"
+        },
+        {
+          key: "3",
+          path:'/checked',
+          imgUrl: require("@/assets/workbench/check-implement.png"),
+          text: "检查执行"
+        },
+        {
+          key: "4",
+          path:'/notice',
+          imgUrl: require("@/assets/workbench/rectification-notice.png"),
+          text: "整改通知"
+        },
+        {
+          key: "5",
+          path:'',
+          imgUrl: require("@/assets/workbench/issue-rectification.png"),
+          text: "问题整改"
+        },
+        {
+          key: "6",
+          path:'/correct',
+          imgUrl: require("@/assets/workbench/retification-acceptance.png"),
+          text: "整改验收"
+        },
+        {
+          key: "7",
+          path:'',
+          imgUrl: require("@/assets/workbench/ehcek-record.png"),
+          text: "检查记录"
+        }
+      ]
+    };
+  },
+  mounted() {},
+  methods: {
+    myClick(data) {
+      console.log(data);
+    },
+    jump(path){
+        if(path){
+            this.$router.push(path)
+        }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+/* @import url(); 引入css类 */
+.header-wrap {
+  width: 100%;
+  height: 50px;
+  background-color: #2980f7;
+  font-size: 17px;
+  line-height: 50px;
+  color: white;
+  font-weight: 600;
+  text-align: center;
+}
+.con {
+  // height: calc(100% - 110px);
+  // height: 100%;
+  padding: 10px 0 50px 0;
+  background-color: #f0f1f5;
+  /deep/ .van-grid-item__content--center{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+}
+.van-cell-group--inset {
+  margin: 0 10px 10px;
+}
+/deep/ .van-cell::after {
+  border: none;
+}
+/deep/ [class*="van-hairline"]::after {
+  border: none;
+}
+</style>

src/views/Setting.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div class="seting-box">
+    <s-header :name="'账号管理'"></s-header>
+    <div class="input-item">
+      <van-field v-model="nickName" label="昵称" />
+      <van-field v-model="introduceSign" label="个性签名" />
+      <van-field v-model="password" type='password' label="修改密码" />
+    </div>
+    <van-button class="save-btn" color="#1baeae" type="primary" @click="save" block>保存</van-button>
+    <van-button class="save-btn" color="#1baeae" type="primary" @click="logout" block>退出登录</van-button>
+  </div>
+</template>
+
+<script>
+import sHeader from '@/components/SimpleHeader'
+import { getUserInfo, EditUserInfo, logout } from '../service/user'
+import { setLocal } from '@/common/js/utils'
+import { Toast } from 'vant'
+export default {
+  components: {
+    sHeader
+  },
+  data() {
+    return {
+      nickName: '',
+      introduceSign: '',
+      password: ''
+    }
+  },
+  async mounted() {
+    const { data } = await getUserInfo()
+    this.nickName = data.nickName
+    this.introduceSign = data.introduceSign
+  },
+  methods: {
+    async save() {
+      const params = {
+        introduceSign: this.introduceSign,
+        nickName: this.nickName,
+        passwordMd5: this.$md5(this.password)
+      }
+      const { data } = await EditUserInfo(params)
+      Toast.success('保存成功')
+    },
+    async logout() {
+      const { resultCode } = await logout()
+      if (resultCode == 200) {
+        setLocal('token', '')
+        window.location.href = '/'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .seting-box {
+    .input-item {
+      margin-top: 44px;
+    }
+    .save-btn {
+      width: 80%;
+      margin: 20px auto ;
+    }
+  }
+</style>

src/views/User.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+  <div class="user-box">
+    <s-header :name="'我的'"></s-header>
+    <div class="user-info">
+      <div class="info">
+        <img src="//s.weituibao.com/1583583975067/user-graduate%20(1).png"/>
+        <div class="user-desc">
+          <span>昵称：{{ user.nickName }}</span>
+          <span>登录名：{{ user.loginName }}</span>
+          <span class="name">个性签名：{{ user.introduceSign }}</span>
+        </div>
+      </div>
+    </div>
+    <ul class="user-list">
+      <li @click="goTo('order')">
+        <span>我的订单</span>
+        <van-icon name="arrow" />
+      </li>
+      <li @click="goTo('setting')">
+        <span>账号管理</span>
+        <van-icon name="arrow" />
+      </li>
+      <li @click="goTo('address?from=mine')">
+        <span>地址管理</span>
+        <van-icon name="arrow" />
+      </li>
+      <li @click="goTo('about')">
+        <span>关于我们</span>
+        <van-icon name="arrow" />
+      </li>
+    </ul>
+    <nav-bar></nav-bar>
+  </div>
+</template>
+
+<script>
+import navBar from '@/components/NavBar'
+import sHeader from '@/components/SimpleHeader'
+import { getUserInfo } from '../service/user'
+export default {
+  components: {
+    navBar,
+    sHeader
+  },
+  data() {
+    return {
+      user: {}
+    }
+  },
+  async mounted() {
+    const { data } = await getUserInfo()
+    this.user = data
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1)
+    },
+    goTo(r) {
+      this.$router.push({ path: r })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import '../common/style/mixin';
+  .user-box {
+    .user-header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 10000;
+      .fj();
+      .wh(100%, 44px);
+      line-height: 44px;
+      padding: 0 10px;
+      .boxSizing();
+      color: #252525;
+      background: #fff;
+      border-bottom: 1px solid #dcdcdc;
+      .user-name {
+        font-size: 14px;
+      }
+    }
+    .user-info {
+      width: 94%;
+      margin: 10px;
+      height: 115px;
+      background: linear-gradient(90deg, @primary, #51c7c7);
+      box-shadow: 0 2px 5px #269090;
+      border-radius: 6px;
+      margin-top: 50px;
+      .info {
+        position: relative;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        padding: 25px 20px;
+        .boxSizing();
+        img {
+          .wh(60px, 60px);
+          border-radius: 50%;
+          margin-top: 4px;
+        }
+        .user-desc {
+          display: flex;
+          flex-direction: column;
+          margin-left: 10px;
+          line-height: 20px;
+          font-size: 14px;
+          color: #fff;
+          span {
+            color: #fff;
+            font-size: 14px;
+            padding: 2px 0;
+          }
+        }
+        .account-setting {
+          position: absolute;
+          top: 10px;
+          right: 20px;
+          font-size: 13px;
+          color: #fff;
+          .van-icon-setting-o {
+            font-size: 16px;
+            vertical-align: -3px;
+            margin-right: 4px;
+          }
+        }
+      }
+    }
+    .user-list {
+      padding: 0 20px;
+      margin-top: 20px;
+      li {
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 1px solid #e9e9e9;
+        display: flex;
+        justify-content: space-between;
+        font-size: 14px;
+        .van-icon-arrow {
+          margin-top: 13px;
+        }
+      }
+    }
+  }
+</style>

src/views/checked/index.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+    <div>
+       <LHeader v-bind:text="text"></LHeader>
+       <van-search
+            v-model="value"
+            show-action
+            placeholder="请输入关键字"
+            @search="onSearch"
+            >
+            <template #action>
+                <div @click="onSearch">搜索</div>
+            </template>
+        </van-search>
+        <div class="card" @click="cardLocation">
+            <div>检查名称：昌平区回迁房改造项目安全检查</div>
+            <div>检查名称：专项检查</div>
+            <div>检查名称：2021-12-15</div>
+            <div>检查名称：昌平区回迁房改造工程</div>
+        </div>
+        <div class="card">
+            <div>检查名称：昌平区回迁房改造项目安全检查</div>
+            <div>检查名称：专项检查</div>
+            <div>检查名称：2021-12-31</div>
+            <div>检查名称：昌平区回迁房改造工程</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import LHeader from '@/components/header.vue'
+export default {
+    name: 'checked',
+    components: {
+        "LHeader":LHeader
+    },
+    data() {
+        return {
+            value:'',
+            text:'检查执行'
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        onSearch(){
+            this.$toast('提示内容')
+        },
+        cardLocation(){
+            this.$router.push('/problem')
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .card{
+        width:90%;
+        box-shadow: 0px 0px 10px 2px #F3F3F3;
+        padding: 0.25rem;
+        margin:0.4rem auto;
+        background: white;
+    }
+    .card div{
+        font-size: 0.4rem;
+    }
+</style>

src/views/checked/problem/formwork/index.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+    <div>
+        <LHeader v-bind:text="text"></LHeader>
+        <van-tabs v-model="active">
+            <van-tab title="有限空间类">
+                <table border="1" cellspacing="0">
+                    <thead>
+                        <tr>
+                            <th>序号</th>
+                            <th>检查项目</th>
+                            <th>检查内容</th>
+                            <th>法律依据/出处</th>
+                            <th>结果</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(user,index) in user" :key="index">
+                            <td align="center" v-text="index+1" style="width:10%" ></td>
+                            <td align="center" v-text="user.subject" style="width:15%"></td>
+                            <td align="center" v-text="user.content" style="width:20%"></td>
+                            <td align="center" v-text="user.law" style="width:30%"></td>
+                            <td align="center">
+                                <van-radio-group v-model="user.radio">
+                                    <van-radio name="1">合格</van-radio>
+                                    <van-radio name="2">不合格</van-radio>
+                                </van-radio-group>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </van-tab>
+            <van-tab title="文明施工类">
+               
+            </van-tab>
+            <van-tab title="消防安全类">
+               
+            </van-tab>
+        </van-tabs>
+    </div>
+</template>
+<script>
+import LHeader from '@/components/header.vue'
+export default {
+    name: 'formwork',
+    components: {
+        "LHeader":LHeader
+    },
+    data() {
+        return {
+            active:0,
+            text:'问题上报表',
+            user:[
+                {
+                    subject:"制度，规程",
+                    content:"应建立地下有限空间作业安全生产责任制、安全生产规章制度和操作规程。",
+                    law:"DB11/852.1-2013  5.2.2作业单位应建立地下有限空间作业安全生产责任制、安全生产规章制度和操作规程。",
+                    radio:'1',
+                },
+                {
+                    subject:"制度，规程",
+                    content:"应建立地下有限空间作业安全生产责任制、安全生产规章制度和操作规程。",
+                    law:"DB11/852.1-2013  5.2.2作业单位应建立地下有限空间作业安全生产责任制、安全生产规章制度和操作规程。",
+                    radio:'1',
+                },
+                {
+                    subject:"人员方案",
+                    content:"应建立地下有限空间作业安全生产责任制、安全生产规章制度和操作规程。",
+                    law:"DB11/852.1-2013  5.2.2作业单位应建立地下有限空间作业安全生产责任制、安全生产规章制度和操作规程。",
+                    radio:'1',
+                }
+            ],
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+    }
+}
+</script>
+<style lang="less" scoped>
+    .card{
+        width:90%;
+        box-shadow: 0px 0px 10px 2px #F3F3F3;
+        padding: 0.25rem;
+        margin:0.4rem auto;
+        background: white;
+    }
+    .card div{
+        font-size: 0.4rem;
+    }
+    table{
+        width: 100%;
+    }
+    .van-radio{
+        margin-left: 0.4rem;
+        margin-top: 0.2rem;
+    }
+</style>

src/views/checked/problem/index.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+    <div>
+        <LHeader v-bind:text="text"></LHeader>
+        <div class="card">
+            <div>检查名称：昌平区回迁房改造项目安全检查</div>
+            <div>检查名称：专项检查</div>
+            <div>检查名称：2021-12-15</div>
+            <div>检查名称：昌平区回迁房改造工程</div>
+        </div>
+        <div class="button-more">
+            <van-button type="primary" round size="large" @click="problem">检查问题上报（4）</van-button>
+            <van-button type="primary" round size="large" @click="formwork">检查清单模板（4）</van-button>
+            <van-button type="primary" round size="large" @click="note">检查问题记录（8）</van-button>
+            <van-button type="primary" round size="large" @click="end">结束上报</van-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import LHeader from '@/components/header.vue'
+export default {
+    name: 'problem',
+    components: {
+        "LHeader":LHeader
+    },
+    data() {
+        return {
+            text:'问题上报'
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        end(){
+            this.$dialog.confirm({
+                title: '提示',
+                message: '确定结束检查上报？',
+            })
+        },
+        problem(){
+            this.$router.push('/list')
+        },
+        note(){
+            this.$router.push('/note')
+        },
+        formwork(){
+            this.$router.push('/formwork')
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .card{
+        width:90%;
+        box-shadow: 0px 0px 10px 2px #F3F3F3;
+        padding: 0.25rem;
+        margin:0.4rem auto;
+        background: white;
+    }
+    .card div{
+        font-size: 0.4rem;
+    }
+    .button-more{
+        text-align: center;
+    }
+    .van-button{
+        width: 80%;
+        margin-top: 0.4rem;
+    }
+</style>

src/views/checked/problem/list/index.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+    <div>
+        <LHeader v-bind:text="text"></LHeader>
+        <van-form @submit="onSubmit" @failed="onFailed">
+            <van-field
+                v-model="problemName"
+                name="问题名称"
+                label="问题名称"
+                placeholder="问题名称"
+                :rules="[{ required: true, message: '请填写问题名称' }]"
+            />
+            <van-field
+                v-model="problemPosition"
+                name="问题位置"
+                label="问题位置"
+                placeholder="问题位置"
+                :rules="[{ required: true, message: '请填写问题位置' }]"
+            />
+            <van-field
+                readonly
+                clickable
+                name="picker"
+                :value="value"
+                label="责任单位"
+                placeholder="请选择部门"
+                @click="showPicker = true"
+                :rules="[{ required: true, message: '请填写问题位置' }]"
+            />
+            <van-popup v-model="showPicker" position="bottom">
+                <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                />
+            </van-popup>
+            <van-field
+                v-model="problemDescribe"
+                name="问题描述"
+                label="问题描述"
+                placeholder="问题描述"
+                :rules="[{ required: true, message: '请填写问题描述' }]"
+            />
+            <van-field name="uploader" label="图像上传" :rules="[{ required: true, message: '请上传图像' }]">
+                <template #input>
+                    <van-uploader v-model="uploaderImg" />
+                </template>
+            </van-field>
+            <van-field name="uploader" label="视频上传" :rules="[{ required: true, message: '请上传视频' }]">
+                <template #input>
+                    <van-uploader v-model="uploaderVideo" />
+                </template>
+            </van-field>
+            <div style="margin: 0.5rem">
+                <van-button round block type="info" native-type="submit">提交</van-button>
+            </div>
+        </van-form>
+    </div>
+</template>
+
+<script>
+import LHeader from '@/components/header.vue'
+export default {
+    name: 'list',
+    components: {
+        "LHeader":LHeader
+    },
+    data() {
+        return {
+            /* form表单 */
+            problemName:'',//问题名称
+            problemPosition:'',//问题位置
+            value:'',//责任单位
+            problemDescribe:'',//问题描述
+            uploaderImg:[],//图像上传
+            uploaderVideo:[],//视频上传
+            showPicker:false,
+            columns: ['研发二组', '研发一组', '能源石油化', '平台应用事业前端组', '项目经理部'],
+            text:'检查问题',
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        //失败的回调
+        onFailed(errorInfo){
+            this.$notify({
+                message:'失败',
+                background:'red',
+                duration: 1000
+            })
+
+        },
+        onSubmit(value){
+            this.$notify({
+                message:'成功',
+                background:'green',
+                duration: 1000
+            })
+            history.go(-1)
+        },
+        onConfirm(value){
+            this.value = value;
+            this.showPicker = false;
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .card{
+        width:90%;
+        box-shadow: 0px 0px 10px 2px #F3F3F3;
+        padding: 0.25rem;
+        margin:0.4rem auto;
+        background: white;
+    }
+    .card div{
+        font-size: 0.4rem;
+    }
+</style>

src/views/checked/problem/note/index.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+    <div>
+        <LHeader v-bind:text="text"></LHeader>
+        <van-checkbox-group v-model="result" @change="checkedEvent" ref="checkboxGroup">
+            <div class="card">
+                <van-checkbox name="a">问题一</van-checkbox>
+                <div>问题描述：未编制专项试工方案或未进行设计计算</div>
+                <div>具体位置：项目内页管理</div>
+                <div>发现时间：2021-12-15</div>
+            </div>
+            <div class="card">
+                <van-checkbox name="b">问题二</van-checkbox>
+                <div>问题描述：未编制专项试工方案或未进行设计计算</div>
+                <div>具体位置：项目内页管理</div>
+                <div>发现时间：2021-12-15</div>
+            </div>
+            <div class="card">
+                <van-checkbox name="c">问题三</van-checkbox>
+                <div>问题描述：未编制专项试工方案或未进行设计计算</div>
+                <div>具体位置：项目内页管理</div>
+                <div>发现时间：2021-12-15</div>
+            </div>
+        </van-checkbox-group>
+        <div class="page-footer">
+            <van-checkbox v-model="checkedAll" @change="checkedAllEvent" @click="checkedAllClick">全选</van-checkbox>
+            <van-button round type="defult" @click="cancel">取消</van-button>
+            <van-button round type="info" @click="commit">提交</van-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import LHeader from '@/components/header.vue'
+import { ContactList } from 'vant';
+export default {
+    name: 'note',
+    components: {
+        "LHeader":LHeader
+    },
+    data() {
+        return {
+            text:'问题记录',
+            checkedAll:false,
+            result: [],
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        //全选点击事件---只让全选框的触发全不选事件
+        checkedAllClick(){
+            this.$refs.checkboxGroup.toggleAll(false);
+        },
+        checkedEvent(list){
+            if(list.length==3){
+                this.checkedAll=true
+            }else if(list.length<3){
+                this.checkedAll=false
+            }
+        },
+        checkedAllEvent(){
+            if(this.checkedAll){
+                this.$refs.checkboxGroup.toggleAll(true);
+            }
+        },
+        cancel(){
+            this.$toast('取消')
+        },
+        commit(){
+            this.$dialog.confirm({
+                title: '提示',
+                message: '确定提交检查问题？',
+            }).then(()=>{
+                this.$router.push('/correct')
+            })
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .card{
+        width:90%;
+        box-shadow: 0px 0px 10px 2px #F3F3F3;
+        padding: 0.25rem;
+        margin:0.4rem auto;
+        background: white;
+    }
+    .card div{
+        font-size: 0.4rem;
+    }
+    .van-checkbox{
+        margin-bottom: 0.1rem;
+        width: 30%;
+    }
+    .page-footer{
+        text-align: right;
+        padding: 0.25rem;
+        width: 90%;
+        height: 3rem;
+    }
+    .page-footer>.van-checkbox{
+        position: relative;
+        top: 30%;
+    }
+    .van-button{
+        width: 30%;
+    }
+</style>

src/views/correct/index.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+    <div>
+       <LHeader v-bind:text="text"></LHeader>
+       <van-search
+            v-model="value"
+            show-action
+            placeholder="请输入关键字"
+            @search="onSearch"
+            >
+            <template #action>
+                <div @click="onSearch">搜索</div>
+            </template>
+        </van-search>
+        <div class="card" @click="cardLocation">
+            <div>检查名称：昌平区回迁房改造项目安全检查</div>
+            <div>检查名称：专项检查</div>
+            <div>检查名称：2021-12-15</div>
+            <div>检查名称：昌平区回迁房改造工程</div>
+        </div>
+        <div class="card">
+            <div>检查名称：昌平区回迁房改造项目安全检查</div>
+            <div>检查名称：专项检查</div>
+            <div>检查名称：2021-12-31</div>
+            <div>检查名称：昌平区回迁房改造工程</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import LHeader from '@/components/header.vue'
+export default {
+    name: 'checked',
+    components: {
+        "LHeader":LHeader
+    },
+    data() {
+        return {
+            value:'',
+            text:'检查记录'
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        onSearch(){
+            this.$toast('提示内容')
+        },
+        cardLocation(){
+            
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .card{
+        width:90%;
+        box-shadow: 0px 0px 10px 2px #F3F3F3;
+        padding: 0.25rem;
+        margin:0.4rem auto;
+        background: white;
+    }
+    .card div{
+        font-size: 0.4rem;
+    }
+</style>

src/views/notice/index.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+    <div>
+       <LHeader v-bind:text="text"></LHeader>
+        <div class="card" @click="cardLocation">
+            <div>检查名称：昌平区回迁房改造项目安全检查</div>
+            <div>检查名称：专项检查</div>
+            <div>检查名称：2021-12-15</div>
+            <div>检查名称：昌平区回迁房改造工程</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import LHeader from '@/components/header.vue'
+export default {
+    name: 'notice',
+    components: {
+        "LHeader":LHeader
+    },
+    data() {
+        return {
+            value:'',
+            text:'整改通知管理'
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        cardLocation(){
+            console.log(123)
+            this.$router.push('/noticeList')
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .card{
+        width:90%;
+        box-shadow: 0px 0px 10px 2px #F3F3F3;
+        padding: 0.25rem;
+        margin:0.4rem auto;
+        background: white;
+    }
+    .card div{
+        font-size: 0.4rem;
+    }
+</style>

src/views/notice/noticeList/index.vue

+
+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+    <div>
+       <LHeader v-bind:text="text"></LHeader>
+        <van-tabs v-model="active">
+            <van-tab title="上报状态">
+                <table border="1" cellspacing="0">
+                    <thead>
+                        <tr>
+                            <th>序号</th>
+                            <th>姓名</th>
+                            <th>性别</th>
+                            <th>年龄</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(user,index) in user" :key="index">
+                            <td align="center" v-text="index+1"></td>
+                            <td align="center" v-text="user.name"></td>
+                            <td align="center" v-text="user.gender"></td>
+                            <td align="center" v-text="user.age"></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </van-tab>
+            <van-tab title="问题记录">
+                <van-checkbox-group v-model="result" @change="checkedEvent" ref="checkboxGroup">
+                    <div class="card">
+                        <van-checkbox name="a">问题一</van-checkbox>
+                        <div>问题描述：未编制专项试工方案或未进行设计计算</div>
+                        <div>具体位置：项目内页管理</div>
+                        <div>发现时间：2021-12-15</div>
+                    </div>
+                    <div class="card">
+                        <van-checkbox name="b">问题二</van-checkbox>
+                        <div>问题描述：未编制专项试工方案或未进行设计计算</div>
+                        <div>具体位置：项目内页管理</div>
+                        <div>发现时间：2021-12-15</div>
+                    </div>
+                    <div class="card">
+                        <van-checkbox name="c">问题三</van-checkbox>
+                        <div>问题描述：未编制专项试工方案或未进行设计计算</div>
+                        <div>具体位置：项目内页管理</div>
+                        <div>发现时间：2021-12-15</div>
+                    </div>
+                </van-checkbox-group>
+                <div class="page-footer">
+                    <van-checkbox v-model="checkedAll" @change="checkedAllEvent" @click="checkedAllClick">全选</van-checkbox>
+                </div>
+                <van-field
+                    readonly
+                    clickable
+                    name="calendar"
+                    :value="value"
+                    label="整改完成日期"
+                    placeholder="请选择日期"
+                    @click="showCalendar = true"
+                    />
+                <van-calendar v-model="showCalendar" @confirm="onConfirm" />
+                <div class="sign"><span>检查组负责人签字确认：</span><van-tag color="#ffe1e1">电子签字</van-tag></div>
+                <div class="page-footer-button">
+                    <van-button round type="info" size="large" @click="commit">生成整改通知单</van-button>
+                    <van-button round type="defult" size="large" @click="cancel">取消</van-button>
+                </div>
+            </van-tab>
+        </van-tabs>
+    </div>
+</template>
+
+<script>
+import LHeader from '@/components/header.vue'
+export default {
+    name: 'notice',
+    components: {
+        "LHeader":LHeader
+    },
+    data() {
+        return {
+            active: 0,
+            checkedAll:false,
+            result: [],
+            valuetext:'',
+            user:[
+                {name:"杨过",gender:"男",age:"30"},
+                {name:"小龙女",gender:"女",age:"35"},
+                {name:"郭靖",gender:"男",age:"36"},
+                {name:"黄蓉",gender:"女",age:"36"},
+                {name:"郭襄",gender:"女",age:"18"},
+            ],
+            text:'整改通知管理列表',
+            value: '',
+            showCalendar: false,
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        //全选点击事件---只让全选框的触发全不选事件
+        checkedAllClick(){
+            this.$refs.checkboxGroup.toggleAll(false);
+        },
+        checkedEvent(list){
+            if(list.length==3){
+                this.checkedAll=true
+            }else if(list.length<3){
+                this.checkedAll=false
+            }
+        },
+        checkedAllEvent(){
+            if(this.checkedAll){
+                this.$refs.checkboxGroup.toggleAll(true);
+            }
+        },
+        onConfirm(date) {
+            this.value = `${date.getMonth() + 1}/${date.getDate()}`;
+            this.showCalendar = false;
+        },
+        cancel(){
+            this.$toast('取消')
+        },
+        commit(){
+            this.$dialog.confirm({
+                title: '提示',
+                message: '确定提交检查问题？',
+            }).then(()=>{
+                // this.$router.push('/correct')
+            })
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .card{
+        width:90%;
+        box-shadow: 0px 0px 10px 2px #F3F3F3;
+        padding: 0.25rem;
+        margin:0.4rem auto;
+        background: white;
+    }
+    .card div{
+        font-size: 0.4rem;
+    }
+    table{
+        width: 100%;
+    }
+    .page-footer{
+        text-align: right;
+        padding: 0.25rem;
+        width: 90%;
+    }
+    .van-button{
+        width: 90%;
+        margin-top: 0.6rem;
+    }
+    .page-footer-button{
+        text-align: center;
+    }
+    .sign{
+        margin-top: 0.5rem;
+        margin-left:0.4rem ;
+        font-size: 0.37333rem;
+    }
+    .van-tag{
+        color: #323233
+    }
+</style>