补充代码
8
front-end/mall4uni/.editorconfig
Normal file
@@ -0,0 +1,8 @@
|
||||
root = true
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
16
front-end/mall4uni/.env.development
Normal file
@@ -0,0 +1,16 @@
|
||||
# 如需添加更多环境变量,请以 VITE_APP_ 开头声明
|
||||
# 在代码中使用 import.meta.env.VITE_APP_XXX 获取指定变量
|
||||
|
||||
# 环境配置标识
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
# 微信公众号appid
|
||||
# 注意此处为微信 公众号appid,不是小程序appid
|
||||
# 小程序appid在 manifest.json 文件的 mp-weixin.appid 字段中配置
|
||||
VITE_APP_MP_APPID = 'wx42bbe857570c5b40'
|
||||
|
||||
# 统一接口域名
|
||||
VITE_APP_BASE_API = 'http://127.0.0.1:8086'
|
||||
|
||||
# 图片域名
|
||||
VITE_APP_RESOURCES_URL = 'https://img.mall4j.com/'
|
||||
16
front-end/mall4uni/.env.production
Normal file
@@ -0,0 +1,16 @@
|
||||
# 如需添加更多环境变量,请以 VITE_APP_ 开头声明
|
||||
# 在代码中使用 import.meta.env.VITE_APP_XXX 获取指定变量
|
||||
|
||||
# 环境配置标识
|
||||
VITE_APP_ENV = 'production'
|
||||
|
||||
# 微信公众号appid
|
||||
# 注意此处为微信 公众号appid,不是小程序appid
|
||||
# 小程序appid在 manifest.json 文件的 mp-weixin.appid 字段中配置
|
||||
VITE_APP_MP_APPID = 'wx42bbe857570c5b40'
|
||||
|
||||
# 统一接口域名
|
||||
VITE_APP_BASE_API = 'http://127.0.0.1:8086'
|
||||
|
||||
# 图片域名
|
||||
VITE_APP_RESOURCES_URL = 'https://img.mall4j.com/'
|
||||
16
front-end/mall4uni/.env.testing
Normal file
@@ -0,0 +1,16 @@
|
||||
# 如需添加更多环境变量,请以 VITE_APP_ 开头声明
|
||||
# 在代码中使用 import.meta.env.VITE_APP_XXX 获取指定变量
|
||||
|
||||
# 环境配置标识
|
||||
VITE_APP_ENV = 'testing'
|
||||
|
||||
# 微信公众号appid
|
||||
# 注意此处为微信 公众号appid,不是小程序appid
|
||||
# 小程序appid在 manifest.json 文件的 mp-weixin.appid 字段中配置
|
||||
VITE_APP_MP_APPID = 'wx42bbe857570c5b40'
|
||||
|
||||
# 统一接口域名
|
||||
VITE_APP_BASE_API = 'http://127.0.0.1:8086'
|
||||
|
||||
# 图片域名
|
||||
VITE_APP_RESOURCES_URL = 'https://img.mall4j.com/'
|
||||
17
front-end/mall4uni/.eslintignore
Normal file
@@ -0,0 +1,17 @@
|
||||
# eslint 忽略列表
|
||||
|
||||
# disk编译目录
|
||||
dist
|
||||
|
||||
build/*.js
|
||||
src/assets
|
||||
src/components/tki-barcode
|
||||
src/package-user/components/uv-parse
|
||||
src/uni_modules
|
||||
src/utils/jwx
|
||||
src/js_sdk
|
||||
public
|
||||
|
||||
uni_modules
|
||||
auto-imports.d.ts
|
||||
|
||||
87
front-end/mall4uni/.eslintrc.cjs
Normal file
@@ -0,0 +1,87 @@
|
||||
|
||||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
node: true
|
||||
},
|
||||
globals: {
|
||||
uni: 'readonly',
|
||||
getApp: 'readonly',
|
||||
wx: 'readonly',
|
||||
getCurrentPages: 'readonly',
|
||||
plus: 'readonly'
|
||||
},
|
||||
extends: [
|
||||
'standard',
|
||||
'./.eslintrc-auto-import.json',
|
||||
'plugin:vue/vue3-recommended',
|
||||
'plugin:vue-scoped-css/vue3-recommended'
|
||||
],
|
||||
overrides: [
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module'
|
||||
},
|
||||
plugins: [
|
||||
'vue'
|
||||
],
|
||||
rules: {
|
||||
// Possible Errors
|
||||
// 要求使用 let 或 const 而不是 var
|
||||
'no-var': 'error',
|
||||
// 强制 "for" 循环中更新子句的计数器朝着正确的方向移动
|
||||
'for-direction': 'error',
|
||||
// 强制 getter 函数中出现 return 语句
|
||||
'getter-return': 'error',
|
||||
// 禁止在嵌套的块中出现变量声明或 function 声明
|
||||
'no-inner-declarations': 'error',
|
||||
// 禁止由于 await 或 yield的使用而可能导致出现竞态条件的赋值
|
||||
'require-atomic-updates': 'error',
|
||||
// console 警告
|
||||
'no-console': 'warn',
|
||||
// 禁止出现未使用过的变量
|
||||
'no-unused-vars': [
|
||||
'warn',
|
||||
{
|
||||
args: 'all',
|
||||
caughtErrors: 'none',
|
||||
ignoreRestSiblings: true,
|
||||
vars: 'all'
|
||||
}
|
||||
],
|
||||
// 关闭名称校验
|
||||
'vue/multi-word-component-names': 'off',
|
||||
// 非生产环境启用 debugger
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
|
||||
// Best Practices
|
||||
eqeqeq: 'off',
|
||||
|
||||
// Stylistic Issues
|
||||
// 强制可嵌套的块的最大深度
|
||||
'max-depth': ['error', 5],
|
||||
// 强制函数最大代码行数
|
||||
'max-lines-per-function': [
|
||||
'error',
|
||||
{
|
||||
max: 150,
|
||||
skipBlankLines: true
|
||||
}
|
||||
],
|
||||
// 强制回调函数最大嵌套深度
|
||||
'max-nested-callbacks': ['error', { max: 10 }],
|
||||
// 强制函数定义中最多允许的参数数量
|
||||
'max-params': ['error', { max: 5 }],
|
||||
// 强制每一行中所允许的最大语句数量
|
||||
'max-statements-per-line': ['error', { max: 1 }],
|
||||
// 三目运算符换行
|
||||
'multiline-ternary': ['error', 'never'],
|
||||
// 传值给组件时的使用 kebab-case
|
||||
'vue/v-on-event-hyphenation': ['warn', 'always', {
|
||||
autofix: true,
|
||||
ignore: []
|
||||
}]
|
||||
}
|
||||
}
|
||||
28
front-end/mall4uni/.gitignore
vendored
Normal file
@@ -0,0 +1,28 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
/src/auto-imports.d.ts
|
||||
|
||||
.idea
|
||||
.hbuilderx
|
||||
.vscode
|
||||
package-lock.json
|
||||
pnpm-lock.yaml
|
||||
.eslintrc-auto-import.json
|
||||
4
front-end/mall4uni/.npmrc
Normal file
@@ -0,0 +1,4 @@
|
||||
engine-strict = true
|
||||
shamefully-hoist = true
|
||||
strict-peer-dependencies = false
|
||||
registry = https://registry.npmmirror.com
|
||||
3
front-end/mall4uni/Dockerfile
Normal file
@@ -0,0 +1,3 @@
|
||||
FROM nginx:1.20
|
||||
COPY ./dist/build/h5 /usr/share/nginx/html/h5
|
||||
COPY ./nginx.conf /etc/nginx/conf.d
|
||||
661
front-end/mall4uni/LICENSE
Normal file
@@ -0,0 +1,661 @@
|
||||
GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
Version 3, 19 November 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU Affero General Public License is a free, copyleft license for
|
||||
software and other kinds of works, specifically designed to ensure
|
||||
cooperation with the community in the case of network server software.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
our General Public Licenses are 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.
|
||||
|
||||
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.
|
||||
|
||||
Developers that use our General Public Licenses protect your rights
|
||||
with two steps: (1) assert copyright on the software, and (2) offer
|
||||
you this License which gives you legal permission to copy, distribute
|
||||
and/or modify the software.
|
||||
|
||||
A secondary benefit of defending all users' freedom is that
|
||||
improvements made in alternate versions of the program, if they
|
||||
receive widespread use, become available for other developers to
|
||||
incorporate. Many developers of free software are heartened and
|
||||
encouraged by the resulting cooperation. However, in the case of
|
||||
software used on network servers, this result may fail to come about.
|
||||
The GNU General Public License permits making a modified version and
|
||||
letting the public access it on a server without ever releasing its
|
||||
source code to the public.
|
||||
|
||||
The GNU Affero General Public License is designed specifically to
|
||||
ensure that, in such cases, the modified source code becomes available
|
||||
to the community. It requires the operator of a network server to
|
||||
provide the source code of the modified version running there to the
|
||||
users of that server. Therefore, public use of a modified version, on
|
||||
a publicly accessible server, gives the public access to the source
|
||||
code of the modified version.
|
||||
|
||||
An older license, called the Affero General Public License and
|
||||
published by Affero, was designed to accomplish similar goals. This is
|
||||
a different license, not a version of the Affero GPL, but Affero has
|
||||
released a new version of the Affero GPL which permits relicensing under
|
||||
this license.
|
||||
|
||||
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 Affero 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. Remote Network Interaction; Use with the GNU General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, if you modify the
|
||||
Program, your modified version must prominently offer all users
|
||||
interacting with it remotely through a computer network (if your version
|
||||
supports such interaction) an opportunity to receive the Corresponding
|
||||
Source of your version by providing access to the Corresponding Source
|
||||
from a network server at no charge, through some standard or customary
|
||||
means of facilitating copying of software. This Corresponding Source
|
||||
shall include the Corresponding Source for any work covered by version 3
|
||||
of the GNU General Public License that is incorporated pursuant to the
|
||||
following paragraph.
|
||||
|
||||
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 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 work with which it is combined will remain governed by version
|
||||
3 of the GNU General Public License.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU Affero 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 Affero 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 Affero 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 Affero 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 Affero 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 Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If your software can interact with users remotely through a computer
|
||||
network, you should also make sure that it provides a way for users to
|
||||
get its source. For example, if your program is a web application, its
|
||||
interface could display a "Source" link that leads users to an archive
|
||||
of the code. There are many ways you could offer source, and different
|
||||
solutions will be better for different programs; see section 13 for the
|
||||
specific requirements.
|
||||
|
||||
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 AGPL, see
|
||||
<http://www.gnu.org/licenses/>.
|
||||
99
front-end/mall4uni/README.md
Normal file
@@ -0,0 +1,99 @@
|
||||

|
||||
|
||||
|
||||
一个基于springboot的开源商城 uniapp端
|
||||
|
||||
Mall4j商城系统uniapp版本,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。
|
||||
|
||||
|
||||
该项目仅供学习参考、可供个人学习使用、如需商用联系作者进行授权,否则必将追究法律责任
|
||||
|
||||
|
||||
|
||||
## 开发环境启动
|
||||
|
||||
### 1.安装nodejs
|
||||
|
||||
[NodeJS](https://nodejs.org/) 项目要求最低 18.12.0,推荐 20.9.0
|
||||
|
||||
如果不了解怎么安装nodejs的,可以参考 [菜鸟教程的nodejs相关](https://www.runoob.com/nodejs/nodejs-install-setup.html)
|
||||
|
||||
### 2.启动
|
||||
|
||||
- 项目要求使用 [pnpm](https://www.pnpm.cn/) 包管理工具
|
||||
- 使用编辑器打开项目,在根目录执行以下命令安装依赖
|
||||
|
||||
```
|
||||
pnpm install
|
||||
```
|
||||
|
||||
- 运行
|
||||
|
||||
```
|
||||
pnpm run dev:h5
|
||||
```
|
||||
|
||||
- 部署
|
||||
|
||||
```
|
||||
pnpm run build:h5
|
||||
```
|
||||
|
||||
- 如果不想使用 pnpm,请删除 `package.json` 文件中 `preinstall` 脚本后再进行安装
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts" : {
|
||||
"preinstall": "npx only-allow pnpm" // 使用其他包管理工具(npm、yarn、cnpm等)请删除此命令
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 项目链接
|
||||
|
||||
java后台:https://gitee.com/gz-yami/mall4j
|
||||
|
||||
vue后台:https://gitee.com/gz-yami/mall4v
|
||||
|
||||
原生微信小程序:https://gitee.com/gz-yami/mall4m
|
||||
|
||||
uniapp端:https://gitee.com/gz-yami/mall4uni
|
||||
|
||||
|
||||
## uni-app相关截图
|
||||
|
||||

|
||||
|
||||

|
||||
|
||||

|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
## 小程序相关截图
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
## 提交反馈
|
||||
- Mall4j商城官网 https://www.mall4j.com
|
||||
|
||||
|
||||
- Mall4j商城官方技术QQ 1群:722835385(3000人群已满)
|
||||
- Mall4j商城官方技术QQ 2群:729888395
|
||||
- 如需购买商城商业版源码,请联系商务微信
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
## mall4cloud微服务商城版本已上线
|
||||
https://gitee.com/gz-yami/mall4cloud
|
||||
|
||||
## 更多信息请查看Mall4j商城官网 <https://www.mall4j.com>
|
||||
21
front-end/mall4uni/index.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="renderer" content="webkit">
|
||||
<title>mall4uni-pro</title>
|
||||
<script>
|
||||
let coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
10
front-end/mall4uni/jsconfig.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"types": [
|
||||
"@dcloudio/types",
|
||||
"miniprogram-api-typings",
|
||||
"mini-types"
|
||||
]
|
||||
},
|
||||
"allowJs": true // 允许编译js文件
|
||||
}
|
||||
29
front-end/mall4uni/nginx.conf
Normal file
@@ -0,0 +1,29 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name mini-h5.mall4j.com;
|
||||
|
||||
gzip on;
|
||||
gzip_static on;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /;
|
||||
root /usr/share/nginx/html/h5;
|
||||
index index.html;
|
||||
|
||||
#### kill cache
|
||||
add_header Last-Modified $date_gmt;
|
||||
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
|
||||
if_modified_since off;
|
||||
expires off;
|
||||
etag off;
|
||||
}
|
||||
|
||||
error_page 404 /404.html;
|
||||
location = /404-light.html {
|
||||
}
|
||||
|
||||
error_page 500 502 503 504 /50x.html;
|
||||
location = /50x.html {
|
||||
}
|
||||
}
|
||||
|
||||
75
front-end/mall4uni/package.json
Normal file
@@ -0,0 +1,75 @@
|
||||
{
|
||||
"name": "mall4uni-pro",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"preinstall": "npx only-allow pnpm",
|
||||
"dev:h5": "uni",
|
||||
"dev:h5-test": "uni --mode testing",
|
||||
"dev:mp-weixin": "uni -p mp-weixin",
|
||||
"build:app-android": "uni build -p app-android",
|
||||
"build:app-ios": "uni build -p app-ios",
|
||||
"build:h5": "uni build",
|
||||
"build:h5-test": "uni build --outDir=./dist/test/h5 --mode testing",
|
||||
"build:mp-weixin": "uni build -p mp-weixin",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"lint:fix": "eslint --fix --ext .js --ext .jsx --ext .vue src",
|
||||
"prepare": "husky install",
|
||||
"lint:staged": "lint-staged"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16",
|
||||
"pnpm": ">=6"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/eslint-parser": "^7.21.3",
|
||||
"@dcloudio/uni-app": "3.0.0-3080720230703001",
|
||||
"@dcloudio/uni-app-plus": "3.0.0-3080720230703001",
|
||||
"@dcloudio/uni-components": "3.0.0-3080720230703001",
|
||||
"@dcloudio/uni-h5": "3.0.0-3080720230703001",
|
||||
"@dcloudio/uni-mp-alipay": "3.0.0-3080720230703001",
|
||||
"@dcloudio/uni-mp-baidu": "3.0.0-3080720230703001",
|
||||
"@dcloudio/uni-mp-jd": "3.0.0-3080720230703001",
|
||||
"@dcloudio/uni-mp-kuaishou": "3.0.0-3080720230703001",
|
||||
"@dcloudio/uni-mp-lark": "3.0.0-3080720230703001",
|
||||
"@dcloudio/uni-mp-qq": "3.0.0-3080720230703001",
|
||||
"@dcloudio/uni-mp-toutiao": "3.0.0-3080720230703001",
|
||||
"@dcloudio/uni-mp-weixin": "3.0.0-3080720230703001",
|
||||
"@dcloudio/uni-quickapp-webview": "3.0.0-3080720230703001",
|
||||
"@uni-ui/code-ui": "^1.5.3",
|
||||
"big.js": "^6.2.1",
|
||||
"crypto-js": "^4.1.1",
|
||||
"js-base64": "^3.7.5",
|
||||
"uni-crazy-router": "^1.1.3",
|
||||
"uni-vite-plugin-h5-prod-effect": "^1.0.1",
|
||||
"video.js": "^8.3.0",
|
||||
"videojs-flash": "^2.2.1",
|
||||
"vue": "^3.2.47"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@dcloudio/types": "^3.3.3",
|
||||
"@dcloudio/uni-automator": "3.0.0-3080720230703001",
|
||||
"@dcloudio/uni-cli-shared": "3.0.0-3080720230703001",
|
||||
"@dcloudio/uni-stacktracey": "3.0.0-3080720230703001",
|
||||
"@dcloudio/vite-plugin-uni": "3.0.0-3080720230703001",
|
||||
"eslint": "^8.38.0",
|
||||
"eslint-config-standard": "^17.0.0",
|
||||
"eslint-plugin-import": "^2.27.5",
|
||||
"eslint-plugin-n": "^15.7.0",
|
||||
"eslint-plugin-promise": "^6.1.1",
|
||||
"eslint-plugin-vue": "^9.10.0",
|
||||
"eslint-plugin-vue-scoped-css": "^2.4.0",
|
||||
"husky": "8.0.3",
|
||||
"lint-staged": "13.2.2",
|
||||
"sass": "^1.61.0",
|
||||
"unplugin-auto-import": "^0.15.2",
|
||||
"unplugin-vue-components": "^0.24.1",
|
||||
"vite": "^4.1.5",
|
||||
"vue-eslint-parser": "^9.1.1"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,vue}": [
|
||||
"eslint --fix"
|
||||
]
|
||||
}
|
||||
}
|
||||
15
front-end/mall4uni/src/App.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<script setup>
|
||||
http.getCartCount()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./app.css";
|
||||
/* 隐藏头部 */
|
||||
uni-page-head {
|
||||
display: none;
|
||||
}
|
||||
/* 轮播图指示点 */
|
||||
uni-swiper .uni-swiper-dots-horizontal {
|
||||
bottom: 20px !important;
|
||||
}
|
||||
</style>
|
||||
109
front-end/mall4uni/src/app.css
Normal file
@@ -0,0 +1,109 @@
|
||||
/**app.wxss**/
|
||||
.container {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
font-family: helvetica,'Heiti SC',PingFangSC-Light;
|
||||
}
|
||||
.price{
|
||||
font-family: Arial;
|
||||
display: inline-block;
|
||||
color: #eb2444;
|
||||
padding-bottom:10rpx;
|
||||
padding-left:10rpx;
|
||||
}
|
||||
|
||||
/* 价格数字显示不同大小 */
|
||||
.symbol {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.big-num {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.small-num {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
/*
|
||||
*改变checkbox样式
|
||||
*自定义样式
|
||||
*/
|
||||
/* reg */
|
||||
uni-checkbox-group {
|
||||
width: 100% !important;
|
||||
}
|
||||
uni-checkbox-group uni-label{
|
||||
width: 33% !important;
|
||||
display: inline-flex;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
/*checkbox 选项框大小 */
|
||||
uni-checkbox .uni-checkbox-input{
|
||||
width: 38rpx !important;
|
||||
height: 38rpx !important;
|
||||
border-radius: 50%!important;
|
||||
}
|
||||
/*checkbox选中后样式 */
|
||||
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{
|
||||
background: #e43130;
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
/*checkbox选中后图标样式 */
|
||||
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before{
|
||||
display: inline-block;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
line-height: 20rpx;
|
||||
text-align: center;
|
||||
font-size: 18rpx;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
transform: translate(-60%, -50%) scale(1);
|
||||
-webkit-transform: translate(-60%, -50%) scale(1);
|
||||
}
|
||||
|
||||
/*
|
||||
*改变radio样式
|
||||
*自定义样式
|
||||
*/
|
||||
/* 未选中的 背景样式 */
|
||||
uni-radio .uni-radio-input{
|
||||
height: 36rpx;
|
||||
width: 36rpx;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* 选中后的 背景样式 */
|
||||
uni-radio .uni-radio-input.uni-radio-input-checked{
|
||||
border: none !important;
|
||||
background: #e43130 !important;
|
||||
}
|
||||
/* 选中后的 对勾样式 */
|
||||
uni-radio .uni-radio-input.uni-radio-input-checked::before{
|
||||
border-radius: 50%;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
text-align: center;
|
||||
font-size: 20rpx;
|
||||
color:#fff;
|
||||
background: #e43130;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
-webkit-transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
/* 底部按钮兼容 iPhone X以上 */
|
||||
@media screen and (width: 375px) and (height: 812px){
|
||||
.container {
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
}
|
||||
@media screen and (width: 414px) and (height: 736px){
|
||||
.container {
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
}
|
||||
79
front-end/mall4uni/src/components/img-show/img-show.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<image
|
||||
v-if="!isError && imgPath"
|
||||
:src="imgPath"
|
||||
:style="imgStyle"
|
||||
:class="classList"
|
||||
:mode="imgMode"
|
||||
@error="imgError"
|
||||
@load="imgLoad"
|
||||
@tap="handleTap"
|
||||
/>
|
||||
<image
|
||||
v-else
|
||||
:src="defaultImgPath"
|
||||
:style="imgStyle"
|
||||
:class="classList"
|
||||
@tap="handleTap"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
imgMode: {
|
||||
type: String,
|
||||
default: 'scaleToFill'
|
||||
},
|
||||
classList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
imgStyle: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 默认失败图片类型, false为默认图片, true为默认头像图片
|
||||
defaultImgType: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const imgPath = computed(() => {
|
||||
return util.checkFileUrl(props.src)
|
||||
})
|
||||
const defaultImgPath = computed(() => {
|
||||
if (props.defaultImgType) return '/static/images/icon/head04.png'
|
||||
return '/static/images/icon/def.png'
|
||||
})
|
||||
|
||||
const emit = defineEmits(['imgError', 'imgLoad', 'handleTap'])
|
||||
const isError = ref(false)
|
||||
const imgError = () => {
|
||||
isError.value = true
|
||||
emit('imgError')
|
||||
}
|
||||
|
||||
const imgLoad = (e) => {
|
||||
emit('imgLoad', e)
|
||||
}
|
||||
|
||||
const handleTap = () => {
|
||||
emit('handleTap')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
67
front-end/mall4uni/src/components/production/production.scss
Normal file
@@ -0,0 +1,67 @@
|
||||
.prod-items {
|
||||
width: 43%;
|
||||
background: #fff;
|
||||
margin-bottom: 40rpx;
|
||||
box-sizing: border-box;
|
||||
.hot-imagecont {
|
||||
border-radius: 8rpx;
|
||||
text-align: center;
|
||||
font-size: 0;
|
||||
}
|
||||
.hot-text {
|
||||
margin-top: 20rpx;
|
||||
.prod-info {
|
||||
font-size: 20rpx;
|
||||
color: #777;
|
||||
padding: 0 20rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.prod-text-info {
|
||||
position: relative;
|
||||
height: 50rpx;
|
||||
line-height: 70rpx;
|
||||
font-family: Arial;
|
||||
.price {
|
||||
color: #eb2444;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
prod {
|
||||
&:nth-child(2n-1) {
|
||||
.prod-items {
|
||||
padding: 20rpx 10rpx 10rpx 20rpx;
|
||||
}
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
.prod-items {
|
||||
padding: 20rpx 20rpx 10rpx 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hot-imagecont {
|
||||
.hotsaleimg {
|
||||
width: 100%;
|
||||
height: 345rpx;
|
||||
}
|
||||
}
|
||||
.hot-text {
|
||||
.hotprod-text {
|
||||
height: 76rpx;
|
||||
font-size: 28rpx;
|
||||
display: -webkit-box;
|
||||
word-break: break-all;
|
||||
padding: 0 20rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.deadline-price {
|
||||
font-size: 22rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
73
front-end/mall4uni/src/components/production/production.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view
|
||||
class="prod-items"
|
||||
:data-prodid="item.prodId"
|
||||
@tap="toProdPage"
|
||||
>
|
||||
<view class="hot-imagecont">
|
||||
<image
|
||||
:src="item.pic"
|
||||
class="hotsaleimg"
|
||||
/>
|
||||
</view>
|
||||
<view class="hot-text">
|
||||
<view class="hotprod-text">
|
||||
{{ item.prodName }}
|
||||
</view>
|
||||
<view
|
||||
v-if="sts===6"
|
||||
class="prod-info"
|
||||
>
|
||||
{{ item.prodCommNumber }}评价 {{ item.positiveRating }}%好评
|
||||
</view>
|
||||
<view class="prod-text-info">
|
||||
<view class="price">
|
||||
<text
|
||||
v-if="sts===2"
|
||||
class="deadline-price"
|
||||
>
|
||||
限时价
|
||||
</text>
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(item.price)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(item.price)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
const wxs = number()
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return null
|
||||
}
|
||||
},
|
||||
sts: {
|
||||
type: Number,
|
||||
default: () => {
|
||||
return 2
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const toProdPage = (e) => {
|
||||
const prodid = e.currentTarget.dataset.prodid
|
||||
uni.navigateTo({
|
||||
url: '/pages/prod/prod?prodid=' + prodid
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './production.scss';
|
||||
</style>
|
||||
10
front-end/mall4uni/src/main.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import {
|
||||
createSSRApp
|
||||
} from 'vue'
|
||||
import App from './App.vue'
|
||||
export function createApp () {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
105
front-end/mall4uni/src/manifest.json
Normal file
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"name" : "",
|
||||
"appid" : "__UNI__2CF44C6",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"compatible" : {
|
||||
"ignoreVersion" : true //true表示忽略版本检查提示框,HBuilderX1.9.0及以上版本支持
|
||||
},
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {
|
||||
"Camera" : {},
|
||||
"LivePusher" : {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
],
|
||||
"abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ]
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wx6fa71e69231a4fa4",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true,
|
||||
"permission" : {
|
||||
"scope.userLocation" : {
|
||||
"desc" : "你的位置信息将用于地址信息新增、修改以及获取附近门店"
|
||||
}
|
||||
},
|
||||
"plugins" : {
|
||||
"live-player-plugin" : {
|
||||
"version" : "1.3.5",
|
||||
"provider" : "wx2b03c6e691cd7370"
|
||||
}
|
||||
},
|
||||
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
|
||||
},
|
||||
"h5" : {
|
||||
"title" : "",
|
||||
"domain" : "https://mini-h5.mall4j.com",
|
||||
"router" : {
|
||||
"mode" : "history"
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"optimization" : {
|
||||
"treeShaking" : {
|
||||
"enable" : false
|
||||
}
|
||||
},
|
||||
"template" : "index.html",
|
||||
"devServer" : {
|
||||
"disableHostCheck" : true,
|
||||
"port" : 80
|
||||
},
|
||||
"sdkConfigs" : {
|
||||
"maps" : {
|
||||
"qqmap" : {
|
||||
// 用于h5端ip定位
|
||||
"key" : ""
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "3"
|
||||
}
|
||||
197
front-end/mall4uni/src/pages.json
Normal file
@@ -0,0 +1,197 @@
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"backgroundTextStyle": "dark",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTextStyle": "black",
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarTitleText": "mall4j"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/user",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/basket/basket",
|
||||
"style": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "购物车",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/category/category",
|
||||
"style": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "分类商品",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/sub-category/sub-category"
|
||||
},
|
||||
{
|
||||
"path": "pages/search-page/search-page",
|
||||
"style": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "搜索",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/delivery-address/delivery-address",
|
||||
"style": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "收货地址",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/editAddress/editAddress",
|
||||
"style": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "编辑收货地址",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/orderList/orderList",
|
||||
"style": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarTitleText": "订单列表",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarBackgroundColor": "#fafafa"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order-detail/order-detail",
|
||||
"style": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "订单详情",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/submit-order/submit-order",
|
||||
"style": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "提交订单",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/express-delivery/express-delivery",
|
||||
"style": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "物流查询",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/pay-result/pay-result",
|
||||
"style": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "支付结果",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/search-prod-show/search-prod-show",
|
||||
"style": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "搜索结果",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/prod/prod",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/prod-classify/prod-classify",
|
||||
"style": {
|
||||
"onReachBottomDistance": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/recent-news/recent-news",
|
||||
"style": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarTitleText": "最新公告",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarBackgroundColor": "#fafafa"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/news-detail/news-detail",
|
||||
"style": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarTitleText": "最新公告",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarBackgroundColor": "#fafafa"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/accountLogin/accountLogin"
|
||||
},
|
||||
{
|
||||
"path": "pages/register/register"
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
"selectedColor": "#3a86b9",
|
||||
"color": "#b8b8b8",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "首页",
|
||||
"iconPath": "/static/images/tabbar/homepage.png",
|
||||
"selectedIconPath": "/static/images/tabbar/homepage-sel.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/category/category",
|
||||
"text": "分类",
|
||||
"iconPath": "/static/images/tabbar/category.png",
|
||||
"selectedIconPath": "/static/images/tabbar/category-sel.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/basket/basket",
|
||||
"text": "购物车",
|
||||
"iconPath": "/static/images/tabbar/basket.png",
|
||||
"selectedIconPath": "/static/images/tabbar/basket-sel.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/user/user",
|
||||
"text": "我的",
|
||||
"iconPath": "/static/images/tabbar/user.png",
|
||||
"selectedIconPath": "/static/images/tabbar/user-sel.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
"sitemapLocation": "sitemap.json",
|
||||
"globalStyle": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "WeChat",
|
||||
"navigationBarTextStyle": "black"
|
||||
},
|
||||
"subPackages": []
|
||||
}
|
||||
124
front-end/mall4uni/src/pages/accountLogin/accountLogin.scss
Normal file
@@ -0,0 +1,124 @@
|
||||
.con {
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
margin-top: 50px;
|
||||
}
|
||||
image {
|
||||
display: block;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin-bottom: 8%;
|
||||
}
|
||||
.login-form {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20%;
|
||||
}
|
||||
.authorized-btn {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background-color: #0ab906;
|
||||
border: 1rpx solid #0ab906;
|
||||
color: #fff;
|
||||
border-radius: 6rpx;
|
||||
font-size: 26rpx;
|
||||
padding: 8rpx;
|
||||
margin-top: 80rpx;
|
||||
border: 1rpx solid #0ab906;
|
||||
border-radius: 6rpx;
|
||||
font-size: 26rpx;
|
||||
padding: 8rpx;
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
.to-idx-btn {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background-color: #eeeeee;
|
||||
color: #333;
|
||||
border-radius: 6rpx;
|
||||
font-size: 26rpx;
|
||||
padding: 8rpx;
|
||||
margin-top: 30rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 26rpx;
|
||||
padding: 8rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.form-title {
|
||||
width: 100%;
|
||||
margin-bottom: 50rpx;
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
color: #00a0e9;
|
||||
margin-bottom: 50rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.item {
|
||||
display: block;
|
||||
margin-bottom: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.account {
|
||||
display: flex;
|
||||
background: #f8f8f8;
|
||||
padding: 15rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
align-items: center;
|
||||
input {
|
||||
padding-left: 20rpx;
|
||||
width: 75%;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
button {
|
||||
&::after {
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
.operate {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.to-register {
|
||||
font-size: 28rpx;
|
||||
color: #00AAFF;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.error {
|
||||
.error-text {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #e43130;
|
||||
text-align: left;
|
||||
margin-top: 10rpx;
|
||||
font-size: 28rpx;
|
||||
margin-top: 10rpx;
|
||||
.warning-icon {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
line-height: 26rpx;
|
||||
background: #e43130;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin-right: 12rpx;
|
||||
font-size: 22rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
line-height: 26rpx;
|
||||
margin-right: 12rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
174
front-end/mall4uni/src/pages/accountLogin/accountLogin.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<view class="con">
|
||||
<image src="@/static/logo.png" />
|
||||
<!-- 登录 -->
|
||||
<view class="login-form">
|
||||
<view :class="['item',errorTips==1? 'error':'']">
|
||||
<view class="account">
|
||||
<text class="input-item">
|
||||
账号
|
||||
</text>
|
||||
<input
|
||||
type="text"
|
||||
data-type="account"
|
||||
placeholder-class="inp-palcehoder"
|
||||
placeholder="请输入用户名"
|
||||
@input="getInputVal"
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
v-if="errorTips==1"
|
||||
class="error-text"
|
||||
>
|
||||
<text class="warning-icon">
|
||||
!
|
||||
</text>
|
||||
请输入账号!
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['item',errorTips==2? 'error':'']">
|
||||
<view class="account">
|
||||
<text class="input-item">
|
||||
密码
|
||||
</text>
|
||||
<input
|
||||
type="password"
|
||||
data-type="password"
|
||||
placeholder-class="inp-palcehoder"
|
||||
placeholder="请输入密码"
|
||||
@input="getInputVal"
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
v-if="errorTips==2"
|
||||
class="error-text"
|
||||
>
|
||||
<text class="warning-icon">
|
||||
!
|
||||
</text>
|
||||
请输入密码!
|
||||
</view>
|
||||
</view>
|
||||
<view class="operate">
|
||||
<view
|
||||
class="to-register"
|
||||
@tap="toRegitser"
|
||||
>
|
||||
还没有账号?
|
||||
<text>去注册></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<button
|
||||
class="authorized-btn"
|
||||
@tap="login"
|
||||
>
|
||||
登录
|
||||
</button>
|
||||
<button
|
||||
class="to-idx-btn"
|
||||
@tap="toIndex"
|
||||
>
|
||||
回到首页
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { encrypt } from '@/utils/crypto.js'
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow(() => {
|
||||
// 头部导航标题
|
||||
uni.setNavigationBarTitle({
|
||||
title: '用户登录'
|
||||
})
|
||||
})
|
||||
|
||||
const principal = ref('') // 账号
|
||||
const errorTips = ref(0) // 错误提示
|
||||
watch(
|
||||
() => principal.value,
|
||||
() => {
|
||||
errorTips.value = 0
|
||||
}
|
||||
)
|
||||
|
||||
const credentials = ref('') // 密码
|
||||
/**
|
||||
* 输入框的值
|
||||
*/
|
||||
const getInputVal = (e) => {
|
||||
const type = e.currentTarget.dataset.type
|
||||
if (type == 'account') {
|
||||
principal.value = e.detail.value
|
||||
} else if (type == 'password') {
|
||||
credentials.value = e.detail.value
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 登录
|
||||
*/
|
||||
const login = () => {
|
||||
if (principal.value.length == 0) {
|
||||
errorTips.value = 1
|
||||
} else if (credentials.value.length == 0) {
|
||||
errorTips.value = 2
|
||||
} else {
|
||||
errorTips.value = 0
|
||||
// #ifdef H5 || APP-PLUS
|
||||
http.request({
|
||||
url: '/login',
|
||||
method: 'post',
|
||||
data: {
|
||||
userName: principal.value,
|
||||
passWord: encrypt(credentials.value)
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
http.loginSuccess(data, () => {
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
icon: 'none',
|
||||
complete: () => {
|
||||
setTimeout(() => {
|
||||
wx.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 去注册
|
||||
*/
|
||||
const toRegitser = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/register/register'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 回到首页
|
||||
*/
|
||||
const toIndex = () => {
|
||||
wx.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./accountLogin.scss";
|
||||
</style>
|
||||
365
front-end/mall4uni/src/pages/basket/basket.scss
Normal file
@@ -0,0 +1,365 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
background: #f4f4f4;
|
||||
min-height: calc(100vh - 118rpx);
|
||||
}
|
||||
.prod-list {
|
||||
padding-bottom: 118rpx;
|
||||
width: 100%;
|
||||
.prod-block {
|
||||
background: #fff;
|
||||
margin-top: 15rpx;
|
||||
.discount-tips {
|
||||
padding: 20rpx 0 20rpx 20rpx;
|
||||
border-bottom: 2rpx solid #f4f4f4;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
.text-block {
|
||||
padding: 3rpx 5rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #eb2444;
|
||||
border: 2rpx solid #eb2444;
|
||||
}
|
||||
.text-list {
|
||||
font-size: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
.prodinfo {
|
||||
position: relative;
|
||||
color: #999;
|
||||
width: 100%;
|
||||
&::after {
|
||||
content: '';
|
||||
background-color: #f4f4f4;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
transform-origin: 50% 100% 0;
|
||||
bottom: -20rpx;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 642rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.pic {
|
||||
text-align: center;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
line-height: 180rpx;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.prodinfo {
|
||||
&::after {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.staus {
|
||||
text-align: center;
|
||||
background: rgb(196, 192, 192);
|
||||
font-size: 20rpx;
|
||||
width: 50rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.opt {
|
||||
font-size: 28rpx;
|
||||
margin-left: 20rpx;
|
||||
width: 100%;
|
||||
}
|
||||
.pic {
|
||||
image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lose-efficacy {
|
||||
.discount-tips {
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 2rpx solid #ddd;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
margin-left: 20rpx;
|
||||
.text-list {
|
||||
font-size: 30rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.prodinfo {
|
||||
display: flex;
|
||||
margin-left: 20rpx;
|
||||
.opt {
|
||||
.prod-name {
|
||||
color: #333;
|
||||
max-height: 72rpx;
|
||||
line-height: 36rpx;
|
||||
display: -webkit-box;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.prod-info-text {
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
-webkit-line-clamp: 1;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
background: #f9f9f9;
|
||||
padding: 0 10rpx 0 10rpx;
|
||||
border-radius: 4rpx;
|
||||
margin: 10rpx 0 0rpx 0;
|
||||
overflow: hidden;
|
||||
font-size: 24rpx;
|
||||
position: relative;
|
||||
font-family: arial;
|
||||
}
|
||||
.prod-info-text.empty-n {
|
||||
padding: 0;
|
||||
}
|
||||
.price-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.price {
|
||||
color: #eb2444;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.prod-info-text {
|
||||
&:before {
|
||||
border-top: 5px solid #aaa;
|
||||
}
|
||||
&:after {
|
||||
border-top: 5px solid #f9f9f9;
|
||||
top: 9px;
|
||||
}
|
||||
}
|
||||
.lose-efficacy {
|
||||
.prodinfo {
|
||||
.opt {
|
||||
.price-count {
|
||||
.price {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-top: 20rpx;
|
||||
background: #fff;
|
||||
.item {
|
||||
background: #f8f8f9;
|
||||
}
|
||||
.discount-tips {
|
||||
.empty-prod {
|
||||
color: #777;
|
||||
font-size: 26rpx;
|
||||
border: 2rpx solid #999;
|
||||
padding: 0 10rpx;
|
||||
border-radius: 8rpx;
|
||||
float: right;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.m-numSelector {
|
||||
.minus {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
height: 56rpx;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
position: relative;
|
||||
width: 56rpx;
|
||||
border-right: 0;
|
||||
border-top-left-radius: 4rpx;
|
||||
border-bottom-left-radius: 4rpx;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
content: ' ';
|
||||
width: 22rpx;
|
||||
height: 3rpx;
|
||||
background-color: #7f7f7f;
|
||||
}
|
||||
}
|
||||
input {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
height: 56rpx;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
width: 56rpx;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
.plus {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
height: 56rpx;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
position: relative;
|
||||
width: 56rpx;
|
||||
border-left: 0;
|
||||
border-top-right-radius: 4rpx;
|
||||
border-bottom-right-radius: 4rpx;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
content: ' ';
|
||||
width: 22rpx;
|
||||
height: 3rpx;
|
||||
background-color: #7f7f7f;
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
content: ' ';
|
||||
width: 22rpx;
|
||||
height: 3rpx;
|
||||
background-color: #7f7f7f;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
float: right;
|
||||
&:not(.disabled) {
|
||||
.minus {
|
||||
&:not(.disabled) {
|
||||
&:active {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.plus {
|
||||
&:not(.disabled) {
|
||||
&:active {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(checkbox) {
|
||||
.uni-checkbox-input,
|
||||
.wx-checkbox-input {
|
||||
border-radius: 50%;
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
}
|
||||
.wx-checkbox-input.wx-checkbox-input-checked {
|
||||
background: #eb2444;
|
||||
border-color: #eb2444;
|
||||
&::before {
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
-webkit-transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty {
|
||||
font-size: 26rpx;
|
||||
color: #aaa;
|
||||
padding-top: 200rpx;
|
||||
.txt {
|
||||
text-align: center;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.img {
|
||||
margin-top: 80rpx;
|
||||
text-align: center;
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.price-count {
|
||||
.disable-price {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.cart-footer {
|
||||
position: fixed;
|
||||
bottom: calc(90rpx + env(safe-area-inset-bottom));
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row nowrap;
|
||||
height: 98rpx;
|
||||
border-top: 2rpx solid #f4f4f4;
|
||||
z-index: 999;
|
||||
.btn {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 0;
|
||||
background-color: #fafafa;
|
||||
background: rgba(255,255,255,0.95);
|
||||
font-size: 28rpx;
|
||||
.total-msg {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
.btn.total {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: flex-start;
|
||||
width: 300rpx;
|
||||
.price {
|
||||
color: #eb2444;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
.btn.del {
|
||||
color: #eb2444;
|
||||
width: 70rpx;
|
||||
font-size: 22rpx;
|
||||
text-align: left;
|
||||
display: block;
|
||||
line-height: 102rpx;
|
||||
}
|
||||
.btn.all {
|
||||
width: 150rpx;
|
||||
font-size: 26rpx;
|
||||
label {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.btn.settle {
|
||||
width: 200rpx;
|
||||
background: #eb2444;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
401
front-end/mall4uni/src/pages/basket/basket.vue
Normal file
@@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="prod-list">
|
||||
<block
|
||||
v-for="(item, scIndex) in shopCartItemDiscounts"
|
||||
:key="scIndex"
|
||||
>
|
||||
<view class="prod-block">
|
||||
<view
|
||||
v-if="item.chooseDiscountItemDto"
|
||||
class="discount-tips"
|
||||
>
|
||||
<text class="text-block">
|
||||
{{ wxs.parseDiscount(item.chooseDiscountItemDto.discountRule) }}
|
||||
</text>
|
||||
<text class="text-list">
|
||||
{{
|
||||
wxs.parseDiscountMsg(item.chooseDiscountItemDto.discountRule, item.chooseDiscountItemDto.needAmount, item.chooseDiscountItemDto.discount)
|
||||
}}
|
||||
</text>
|
||||
</view>
|
||||
<block
|
||||
v-for="(prod, index) in item.shopCartItems"
|
||||
:key="index"
|
||||
>
|
||||
<view class="item">
|
||||
<view class="btn">
|
||||
<label>
|
||||
<checkbox
|
||||
:data-scindex="scIndex"
|
||||
:data-index="index"
|
||||
:value="prod.prodId"
|
||||
:checked="prod.checked"
|
||||
color="#105c3e"
|
||||
@tap="onSelectedItem"
|
||||
/>
|
||||
</label>
|
||||
</view>
|
||||
<view class="prodinfo">
|
||||
<view class="pic">
|
||||
<image :src="prod.pic" />
|
||||
</view>
|
||||
<view class="opt">
|
||||
<view class="prod-name">
|
||||
{{ prod.prodName }}
|
||||
</view>
|
||||
<text :class="'prod-info-text ' + (prod.skuName?'':'empty-n')">
|
||||
{{ prod.skuName }}
|
||||
</text>
|
||||
<view class="price-count">
|
||||
<view class="price">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(prod.price)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(prod.price)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="m-numSelector">
|
||||
<view
|
||||
class="minus"
|
||||
:data-scindex="scIndex"
|
||||
:data-index="index"
|
||||
@tap="onCountMinus"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
:value="prod.prodCount"
|
||||
disabled
|
||||
>
|
||||
<view
|
||||
class="plus"
|
||||
:data-scindex="scIndex"
|
||||
:data-index="index"
|
||||
@tap="onCountPlus"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-if="!shopCartItemDiscounts.length"
|
||||
class="empty"
|
||||
>
|
||||
<view class="img">
|
||||
<image src="@/static/images/tabbar/basket.png" />
|
||||
</view>
|
||||
<view class="txt">
|
||||
您还没有添加任何商品哦~
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view
|
||||
v-if="shopCartItemDiscounts.length>0"
|
||||
class="cart-footer"
|
||||
>
|
||||
<view class="btn all">
|
||||
<checkbox
|
||||
:checked="allChecked"
|
||||
color="#f7d731;"
|
||||
@tap="onSelAll"
|
||||
/>
|
||||
全选
|
||||
</view>
|
||||
<view
|
||||
class="btn del"
|
||||
@tap="onDelBasket"
|
||||
>
|
||||
<text>删除</text>
|
||||
</view>
|
||||
<view class="btn total">
|
||||
<view class="finally">
|
||||
<text>合计:</text>
|
||||
<view class="price">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(finalMoney)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(finalMoney)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="subtractMoney>0"
|
||||
class="total-msg"
|
||||
>
|
||||
总额:¥{{ wxs.toPrice(totalMoney) }} 立减:¥{{ wxs.toPrice(subtractMoney) }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="btn settle"
|
||||
@tap="toFirmOrder"
|
||||
>
|
||||
<text>结算</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end 底部按钮 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const wxs = number()
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow(() => {
|
||||
loadBasketData()
|
||||
http.getCartCount() // 重新计算购物车总数量
|
||||
})
|
||||
|
||||
const allChecked = ref(false)
|
||||
const shopCartItemDiscounts = ref([])
|
||||
const loadBasketData = () => {
|
||||
uni.showLoading() // 加载购物车
|
||||
http.request({
|
||||
url: '/p/shopCart/info',
|
||||
method: 'POST',
|
||||
data: {}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
if (data.length > 0) {
|
||||
// 默认不选中
|
||||
const shopCartItemDiscountsParam = data[0].shopCartItemDiscounts
|
||||
shopCartItemDiscountsParam.forEach(shopCartItemDiscount => {
|
||||
shopCartItemDiscount.shopCartItems.forEach(shopCartItem => {
|
||||
shopCartItem.checked = false
|
||||
})
|
||||
})
|
||||
shopCartItemDiscounts.value = shopCartItemDiscountsParam
|
||||
allChecked.value = false
|
||||
} else {
|
||||
shopCartItemDiscounts.value = []
|
||||
}
|
||||
calTotalPrice() // 计算总价
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 去结算
|
||||
*/
|
||||
const toFirmOrder = () => {
|
||||
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
||||
const basketIds = []
|
||||
shopCartItemDiscountsParam.forEach(shopCartItemDiscount => {
|
||||
shopCartItemDiscount.shopCartItems.forEach(shopCartItem => {
|
||||
if (shopCartItem.checked) {
|
||||
basketIds.push(shopCartItem.basketId)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
if (!basketIds.length) {
|
||||
uni.showToast({
|
||||
title: '请选择商品',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
uni.setStorageSync('basketIds', JSON.stringify(basketIds))
|
||||
uni.navigateTo({
|
||||
url: '/pages/submit-order/submit-order?orderEntry=0'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 全选
|
||||
*/
|
||||
const onSelAll = () => {
|
||||
const allCheckedParam = !allChecked.value // 改变状态
|
||||
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
||||
for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
|
||||
const cItems = shopCartItemDiscountsParam[i].shopCartItems
|
||||
for (let j = 0; j < cItems.length; j++) {
|
||||
cItems[j].checked = allCheckedParam
|
||||
}
|
||||
}
|
||||
allChecked.value = allCheckedParam
|
||||
shopCartItemDiscounts.value = shopCartItemDiscountsParam
|
||||
calTotalPrice() // 计算总价
|
||||
}
|
||||
|
||||
/**
|
||||
* 每一项的选择事件
|
||||
* +
|
||||
*/
|
||||
const onSelectedItem = (e) => {
|
||||
const index = e.currentTarget.dataset.index // 获取data- 传进来的index
|
||||
const scindex = e.currentTarget.dataset.scindex
|
||||
const shopCartItemDiscountsParam = shopCartItemDiscounts.value // 获取购物车列表
|
||||
const checked = shopCartItemDiscountsParam[scindex].shopCartItems[index].checked // 获取当前商品的选中状态
|
||||
shopCartItemDiscountsParam[scindex].shopCartItems[index].checked = !checked // 改变状态
|
||||
shopCartItemDiscounts.value = shopCartItemDiscountsParam
|
||||
checkAllSelected() // 检查全选状态
|
||||
calTotalPrice() // 计算总价
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查全选状态
|
||||
*/
|
||||
const checkAllSelected = () => {
|
||||
let allCheckedParam = true
|
||||
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
||||
let flag = false
|
||||
for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
|
||||
const cItems = shopCartItemDiscountsParam[i].shopCartItems
|
||||
for (let j = 0; j < cItems.length; j++) {
|
||||
if (!cItems[j].checked) {
|
||||
allCheckedParam = !allCheckedParam
|
||||
flag = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (flag) break
|
||||
}
|
||||
allChecked.value = allCheckedParam
|
||||
}
|
||||
|
||||
const totalMoney = ref(0)
|
||||
const subtractMoney = ref(0)
|
||||
const finalMoney = ref(0)
|
||||
/**
|
||||
* 计算购物车总额
|
||||
*/
|
||||
const calTotalPrice = () => {
|
||||
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
||||
const shopCartIds = []
|
||||
for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
|
||||
const cItems = shopCartItemDiscountsParam[i].shopCartItems
|
||||
for (let j = 0; j < cItems.length; j++) {
|
||||
if (cItems[j].checked) {
|
||||
shopCartIds.push(cItems[j].basketId)
|
||||
}
|
||||
}
|
||||
}
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/p/shopCart/totalPay',
|
||||
method: 'POST',
|
||||
data: shopCartIds
|
||||
})
|
||||
.then(({ data }) => {
|
||||
finalMoney.value = data.finalMoney
|
||||
totalMoney.value = data.totalMoney
|
||||
subtractMoney.value = data.subtractMoney
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 减少数量
|
||||
*/
|
||||
const onCountMinus = (e) => {
|
||||
const index = e.currentTarget.dataset.index
|
||||
const scindex = e.currentTarget.dataset.scindex
|
||||
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
||||
const prodCount = shopCartItemDiscountsParam[scindex].shopCartItems[index].prodCount
|
||||
if (prodCount > 1) {
|
||||
updateCount(shopCartItemDiscountsParam, scindex, index, -1)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 增加数量
|
||||
*/
|
||||
const onCountPlus = (e) => {
|
||||
const index = e.currentTarget.dataset.index
|
||||
const scindex = e.currentTarget.dataset.scindex
|
||||
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
||||
updateCount(shopCartItemDiscountsParam, scindex, index, 1)
|
||||
}
|
||||
|
||||
/**
|
||||
* 改变购物车数量接口
|
||||
*/
|
||||
const updateCount = (shopCartItemDiscountsParam, scindex, index, prodCount) => {
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
http.request({
|
||||
url: '/p/shopCart/changeItem',
|
||||
method: 'POST',
|
||||
data: {
|
||||
count: prodCount,
|
||||
prodId: shopCartItemDiscountsParam[scindex].shopCartItems[index].prodId,
|
||||
skuId: shopCartItemDiscountsParam[scindex].shopCartItems[index].skuId,
|
||||
shopId: 1
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
shopCartItemDiscountsParam[scindex].shopCartItems[index].prodCount += prodCount
|
||||
shopCartItemDiscounts.value = shopCartItemDiscountsParam
|
||||
calTotalPrice() // 计算总价
|
||||
uni.hideLoading()
|
||||
http.getCartCount() // 重新计算购物车总数量
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除购物车商品
|
||||
*/
|
||||
const onDelBasket = () => {
|
||||
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
||||
const basketIds = []
|
||||
for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
|
||||
const cItems = shopCartItemDiscountsParam[i].shopCartItems
|
||||
for (let j = 0; j < cItems.length; j++) {
|
||||
if (cItems[j].checked) {
|
||||
basketIds.push(cItems[j].basketId)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!basketIds.length) {
|
||||
uni.showToast({
|
||||
title: '请选择商品',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '',
|
||||
content: '确认要删除选中的商品吗?',
|
||||
confirmColor: '#eb2444',
|
||||
success (res) {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
http.request({
|
||||
url: '/p/shopCart/deleteItem',
|
||||
method: 'DELETE',
|
||||
data: basketIds
|
||||
})
|
||||
.then(() => {
|
||||
uni.hideLoading()
|
||||
loadBasketData()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./basket.scss";
|
||||
</style>
|
||||
225
front-end/mall4uni/src/pages/category/category.scss
Normal file
@@ -0,0 +1,225 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
.main {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
.search-bar {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #777;
|
||||
background: #fff;
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
|
||||
z-index: 3;
|
||||
padding: 20rpx 0;
|
||||
.arrow {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-bottom: 2rpx solid #777;
|
||||
border-left: 2rpx solid #777;
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: 41rpx;
|
||||
}
|
||||
.search-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60rpx;
|
||||
background: #f7f7f7;
|
||||
z-index: 999;
|
||||
width: 92%;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
.search-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.search-hint {
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 32rpx;
|
||||
}
|
||||
}
|
||||
.sear-input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.leftmenu {
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #f5f6f7;
|
||||
overflow: scroll;
|
||||
z-index: 2;
|
||||
.ca-empty {
|
||||
padding-top: 400rpx;
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.menu-item {
|
||||
line-height: 90rpx;
|
||||
height: 90rpx;
|
||||
text-align: center;
|
||||
border-bottom: 2rpx silid #e3e3e3;
|
||||
position: relative;
|
||||
color: #777;
|
||||
font-size: 28rpx;
|
||||
text.tips-num {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 15rpx;
|
||||
border-radius: 15rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background: red;
|
||||
color: #fff;
|
||||
font-size: 25rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
.menu-item.active {
|
||||
color: #eb2444;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 8rpx;
|
||||
height: 32rpx;
|
||||
top: 29rpx;
|
||||
background: #eb2444;
|
||||
}
|
||||
}
|
||||
.rightcontent {
|
||||
width: 550rpx;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
.adver-map {
|
||||
width: auto;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: 30rpx 20rpx 0;
|
||||
.item-a {
|
||||
display: block;
|
||||
font-size: 0;
|
||||
width: 100%;
|
||||
image {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cont-item {
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
padding-bottom: 94rpx;
|
||||
.show-item {
|
||||
.more-prod-pic {
|
||||
text-align: center;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
line-height: 150rpx;
|
||||
font-size: 0;
|
||||
.more-pic {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 8rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 20rpx 0;
|
||||
&::after {
|
||||
content: '';
|
||||
background-color: #f4f4f4;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
transform-origin: 50% 100% 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 510rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.prod-text-right {
|
||||
margin-left: 20rpx;
|
||||
width: 75%;
|
||||
.cate-prod-info {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin: 10rpx 0 20rpx 0;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.prod-text.more {
|
||||
margin: 0;
|
||||
font-size: 28rpx;
|
||||
display: -webkit-box;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
color: #000;
|
||||
}
|
||||
.prod-price.more {
|
||||
font-size: 28rpx;
|
||||
color: #eb2444;
|
||||
font-family: arial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.th-cate-con {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.sub-category {
|
||||
width: 33.33%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
}
|
||||
.sub-category-item {
|
||||
>.more-pic {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
text {
|
||||
font-size: 25rpx;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
.cont-item.empty {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #aaa;
|
||||
text-align: center;
|
||||
}
|
||||
172
front-end/mall4uni/src/pages/category/category.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 头部搜索区 -->
|
||||
<view class="search-bar">
|
||||
<view
|
||||
class="search-box"
|
||||
@tap="toSearchPage"
|
||||
>
|
||||
<image
|
||||
src="@/static/images/icon/search.png"
|
||||
class="search-img"
|
||||
/>
|
||||
<text class="sear-input">
|
||||
搜索您想要的商品
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 滚动内容区 -->
|
||||
<view class="main">
|
||||
<!-- 左侧菜单start -->
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
class="leftmenu"
|
||||
>
|
||||
<block
|
||||
v-for="(item, index) in categoryList"
|
||||
:key="index"
|
||||
>
|
||||
<view
|
||||
:class="'menu-item ' + (selIndex==index?'active':'') + ' '"
|
||||
:data-index="index"
|
||||
:data-id="item.categoryId"
|
||||
@tap="onMenuTab"
|
||||
>
|
||||
{{ item.categoryName }}
|
||||
</view>
|
||||
</block>
|
||||
<view
|
||||
v-if="!categoryList || !categoryList.length"
|
||||
class="ca-empty"
|
||||
>
|
||||
{{ categoryList && categoryList.length ? '该分类下暂无商品' : '暂无商品' }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 左侧菜单end -->
|
||||
|
||||
<!-- 右侧内容start -->
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
class="rightcontent"
|
||||
>
|
||||
<view class="adver-map">
|
||||
<view class="item-a">
|
||||
<image
|
||||
:src="categoryImg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 子分类 -->
|
||||
<view
|
||||
v-if="subCategoryList.length"
|
||||
class="th-cate-con"
|
||||
>
|
||||
<block
|
||||
v-for="(thCateItem, index) in subCategoryList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="sub-category">
|
||||
<view
|
||||
class="sub-category-item"
|
||||
:data-categoryid="thCateItem.categoryId"
|
||||
:data-parentid="thCateItem.parentId"
|
||||
@tap="toCatePage"
|
||||
>
|
||||
<image
|
||||
:src="thCateItem.pic"
|
||||
class="more-pic"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<text>{{ thCateItem.categoryName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view
|
||||
v-else
|
||||
class="cont-item empty"
|
||||
>
|
||||
该分类下暂无子分类~
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 右侧内容end -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const categoryList = ref([])
|
||||
const subCategoryList = ref([])
|
||||
const categoryImg = ref('')
|
||||
const parentId = ref('')
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(() => {
|
||||
// 加载分类列表
|
||||
http.request({
|
||||
url: '/category/categoryInfo',
|
||||
method: 'GET',
|
||||
data: {
|
||||
parentId: ''
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
categoryImg.value = data[0].pic
|
||||
categoryList.value = data
|
||||
getProdList(data[0].categoryId)
|
||||
parentId.value = categoryList.value[0].categoryId
|
||||
})
|
||||
})
|
||||
|
||||
const selIndex = ref(0)
|
||||
/**
|
||||
* 分类点击事件
|
||||
*/
|
||||
const onMenuTab = (e) => {
|
||||
const index = e.currentTarget.dataset.index
|
||||
getProdList(categoryList.value[index].categoryId)
|
||||
parentId.value = categoryList.value[index].categoryId
|
||||
categoryImg.value = categoryList.value[index].pic
|
||||
selIndex.value = index
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转搜索页
|
||||
*/
|
||||
const toSearchPage = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/search-page/search-page'
|
||||
})
|
||||
}
|
||||
|
||||
const getProdList = (categoryId) => {
|
||||
// 加载分类列表
|
||||
http.request({
|
||||
url: '/category/categoryInfo',
|
||||
method: 'GET',
|
||||
data: {
|
||||
parentId: categoryId
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
subCategoryList.value = data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转子分类商品页面
|
||||
*/
|
||||
const toCatePage = (e) => {
|
||||
const { categoryid } = e.currentTarget.dataset
|
||||
uni.navigateTo({
|
||||
url: `/pages/sub-category/sub-category?parentId=${parentId.value}&categoryId=${categoryid}`
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./category.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
.container {
|
||||
background-color: #f4f4f4;
|
||||
border-top: 2rpx solid #e9eaec;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.main {
|
||||
margin-top: 20rpx;
|
||||
padding-bottom: 150rpx;
|
||||
}
|
||||
.address {
|
||||
margin-bottom: 15rpx;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-bottom: 2rpx solid #e9eaec;
|
||||
.personal {
|
||||
position: relative;
|
||||
padding: 20rpx 30rpx;
|
||||
border-bottom: 3rpx dashed #e9eaec;
|
||||
.info-tit {
|
||||
.name {
|
||||
margin-right: 30rpx;
|
||||
font-size: 32rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
.tel {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
image {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 46rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-left: 50rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-btn {
|
||||
padding: 15rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.box {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal {
|
||||
.addr {
|
||||
font-size: 26rpx;
|
||||
margin: 10rpx 0;
|
||||
margin-top: 20rpx;
|
||||
.addr-get {
|
||||
display: inline-block;
|
||||
color: #999;
|
||||
width: 100%;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 -1rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
color: #eb2444;
|
||||
}
|
||||
}
|
||||
.empty {
|
||||
.img {
|
||||
text-align: center;
|
||||
margin-top: 130rpx;
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.txt {
|
||||
margin-top: 30rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="main">
|
||||
<view
|
||||
v-if="addressList.length===0"
|
||||
class="empty"
|
||||
>
|
||||
<view class="img">
|
||||
<image src="http://jiales.gz-yami.com/addr.png" />
|
||||
</view>
|
||||
<view class="txt">
|
||||
您还没有收货地址
|
||||
</view>
|
||||
</view>
|
||||
<radio-group class="radio-group">
|
||||
<block
|
||||
v-for="(item, index) in addressList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="address">
|
||||
<view
|
||||
class="personal"
|
||||
@tap="selAddrToOrder(item)"
|
||||
>
|
||||
<view class="info-tit">
|
||||
<text class="name">
|
||||
{{ item.receiver }}
|
||||
</text>
|
||||
<text class="tel">
|
||||
{{ item.mobile }}
|
||||
</text>
|
||||
<image
|
||||
src="@/static/images/icon/revise.png"
|
||||
:data-addrid="item.addrId"
|
||||
@tap.stop="toEditAddress"
|
||||
/>
|
||||
</view>
|
||||
<view class="addr">
|
||||
<text class="addr-get">
|
||||
{{ item.province }}{{ item.city }}{{ item.area }}{{ item.addr }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="select-btn"
|
||||
:data-addrid="item.addrId"
|
||||
@tap="onDefaultAddr"
|
||||
>
|
||||
<view class="box">
|
||||
<radio
|
||||
:value="item.prodId"
|
||||
:checked="item.commonAddr==1"
|
||||
color="#eb2444"
|
||||
:data-addrid="item.addrId"
|
||||
@tap="onDefaultAddr"
|
||||
/>
|
||||
设为默认地址
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view
|
||||
class="footer"
|
||||
@tap="onAddAddr"
|
||||
>
|
||||
<text>新增收货地址</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const order = ref(-1)
|
||||
onLoad((option) => {
|
||||
if (option.order) {
|
||||
order.value = option.order
|
||||
}
|
||||
})
|
||||
|
||||
const addressList = ref([])
|
||||
/**
|
||||
* 加载地址列表
|
||||
*/
|
||||
onShow(() => {
|
||||
onGetList()
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取收获列表接口
|
||||
*/
|
||||
const onGetList = () => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/p/address/list',
|
||||
method: 'GET'
|
||||
})
|
||||
.then(({ data }) => {
|
||||
addressList.value = data
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增收货地址
|
||||
*/
|
||||
const onAddAddr = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/editAddress/editAddress'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置为默认地址
|
||||
*/
|
||||
const onDefaultAddr = (e) => {
|
||||
const addrId = e.currentTarget.dataset.addrid
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/p/address/defaultAddr/' + addrId,
|
||||
method: 'PUT',
|
||||
data: {
|
||||
addrId
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改地址
|
||||
*/
|
||||
const toEditAddress = (e) => {
|
||||
const addrId = e.currentTarget.dataset.addrid
|
||||
uni.navigateTo({
|
||||
url: '/pages/editAddress/editAddress?addrId=' + addrId
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择地址 跳转回提交订单页
|
||||
*/
|
||||
const selAddrToOrder = (item) => {
|
||||
if (order.value == 0) {
|
||||
const pages = getCurrentPages() // 当前页面
|
||||
const prevPage = pages[pages.length - 2] // 上一页面
|
||||
prevPage.item = item // 直接给上一页面赋值
|
||||
prevPage.selAddress = 'yes'
|
||||
// 返回
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './delivery-address.scss';
|
||||
</style>
|
||||
158
front-end/mall4uni/src/pages/editAddress/editAddress.scss
Normal file
@@ -0,0 +1,158 @@
|
||||
.container {
|
||||
background: #fff;
|
||||
}
|
||||
.input-box {
|
||||
margin-bottom: 50rpx;
|
||||
background: #fff;
|
||||
padding: 0 20rpx;
|
||||
.section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
padding: 30rpx 0;
|
||||
line-height: 48rpx;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 2rpx solid #e5e5e5;
|
||||
text {
|
||||
width: 20%;
|
||||
color: #333;
|
||||
}
|
||||
input {
|
||||
width: 70%;
|
||||
padding: 0 20rpx;
|
||||
color: #333;
|
||||
}
|
||||
picker {
|
||||
width: 70%;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.pca {
|
||||
width: 70%;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.arrow {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
padding: 5px 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
text {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.clear.btn {
|
||||
width: 60%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
border: 1rpx solid #eb2444;
|
||||
border-radius: 50rpx;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
margin-top: 40rpx;
|
||||
color: #eb2444;
|
||||
background-color: #f8f0f1b6;
|
||||
}
|
||||
.keep {
|
||||
color: #fff;
|
||||
background-color: #eb2444;
|
||||
}
|
||||
}
|
||||
.keep.btn {
|
||||
width: 60%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
border: 1rpx solid #eb2444;
|
||||
border-radius: 50rpx;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.infoText {
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
picker-view {
|
||||
background-color: white;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 380rpx;
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
text {
|
||||
color: #999;
|
||||
display: inline-flex;
|
||||
position: fixed;
|
||||
margin-top: 20rpx;
|
||||
height: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 50rpx;
|
||||
font-size: 34rpx;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
}
|
||||
picker-view-column {
|
||||
view {
|
||||
vertical-align: middle;
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.animation-element-wrapper {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
z-index: 999;
|
||||
}
|
||||
.animation-element {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 470rpx;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.animation-button {
|
||||
top: 20rpx;
|
||||
width: 290rpx;
|
||||
height: 100rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.left-bt {
|
||||
left: 30rpx;
|
||||
}
|
||||
.right-bt {
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
position: absolute;
|
||||
width: 80rpx !important;
|
||||
}
|
||||
.line {
|
||||
display: block;
|
||||
position: fixed;
|
||||
height: 2rpx;
|
||||
width: 100%;
|
||||
margin-top: 89rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
435
front-end/mall4uni/src/pages/editAddress/editAddress.vue
Normal file
@@ -0,0 +1,435 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!--input列表 -->
|
||||
<view class="input-box">
|
||||
<view class="section">
|
||||
<text>收 货 人</text>
|
||||
<input
|
||||
placeholder="姓名"
|
||||
type="text"
|
||||
maxlength="15"
|
||||
:value="receiver"
|
||||
@input="onReceiverInput"
|
||||
>
|
||||
</view>
|
||||
<view class="section">
|
||||
<text>手机号码</text>
|
||||
<input
|
||||
placeholder="11位手机号码"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
:value="mobile"
|
||||
@input="onMobileInput"
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
class="section"
|
||||
@tap="translate"
|
||||
>
|
||||
<text>所在地区</text>
|
||||
<view class="pca">
|
||||
{{ province }} {{ city }} {{ area }}
|
||||
</view>
|
||||
<view
|
||||
class="animation-element-wrapper"
|
||||
:animation="animation"
|
||||
:style="'visibility:' + (show ? 'visible':'hidden')"
|
||||
@tap.stop="hiddenFloatView"
|
||||
>
|
||||
<view
|
||||
class="animation-element"
|
||||
@tap.stop="nono"
|
||||
>
|
||||
<text
|
||||
class="right-bt"
|
||||
@tap.stop="hiddenFloatView"
|
||||
>
|
||||
确定
|
||||
</text>
|
||||
<view class="line" />
|
||||
<picker-view
|
||||
indicator-style="height: 50rpx;"
|
||||
:value="valArr"
|
||||
@change="bindChange"
|
||||
@tap.stop="nono"
|
||||
>
|
||||
<!--省-->
|
||||
<picker-view-column>
|
||||
<view
|
||||
v-for="(item, indexs) in provArray"
|
||||
:key="indexs"
|
||||
>
|
||||
{{ item.areaName }}
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<!--地级市-->
|
||||
<picker-view-column>
|
||||
<view
|
||||
v-for="(item, indexss) in cityArray"
|
||||
:key="indexss"
|
||||
>
|
||||
{{ item.areaName }}
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<!--区县-->
|
||||
<picker-view-column>
|
||||
<view
|
||||
v-for="(item, indexsss) in areaArray"
|
||||
:key="indexsss"
|
||||
>
|
||||
{{ item.areaName }}
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="arrow">
|
||||
<image src="@/static/images/icon/more.png" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="section">
|
||||
<text>详细地址</text>
|
||||
<input
|
||||
placeholder="如楼号/单元/门牌号"
|
||||
type="text"
|
||||
:value="addr"
|
||||
@input="onAddrInput"
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end input列表 -->
|
||||
<!-- 功能按钮 -->
|
||||
<view class="btn-box">
|
||||
<view
|
||||
class="keep btn"
|
||||
@tap="onSaveAddr"
|
||||
>
|
||||
<text>保存收货地址</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-if="addrId!=0"
|
||||
class="clear btn"
|
||||
@tap="onDeleteAddr"
|
||||
>
|
||||
<text>删除收货地址</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end 功能按钮 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const addrId = ref(0)
|
||||
const city = ref('')
|
||||
const area = ref('')
|
||||
const provinceId = ref(0)
|
||||
const cityId = ref(0)
|
||||
const areaId = ref(0)
|
||||
const receiver = ref('')
|
||||
const mobile = ref('')
|
||||
const addr = ref('')
|
||||
const province = ref('')
|
||||
onLoad((options) => {
|
||||
if (options.addrId) {
|
||||
uni.showLoading()
|
||||
|
||||
http.request({
|
||||
url: '/p/address/addrInfo/' + options.addrId,
|
||||
method: 'GET'
|
||||
})
|
||||
.then(({ data }) => {
|
||||
province.value = data.province
|
||||
city.value = data.city
|
||||
area.value = data.area
|
||||
provinceId.value = data.provinceId
|
||||
cityId.value = data.cityId
|
||||
areaId.value = data.areaId
|
||||
receiver.value = data.receiver
|
||||
mobile.value = data.mobile
|
||||
addr.value = data.addr
|
||||
addrId.value = options.addrId
|
||||
initCityData(data.provinceId, data.cityId, data.areaId)
|
||||
uni.hideLoading()
|
||||
})
|
||||
} else {
|
||||
initCityData(provinceId.value, cityId.value, areaId.value)
|
||||
}
|
||||
})
|
||||
|
||||
const provArray = ref([])
|
||||
const valArr = ref([0, 0, 0])
|
||||
const initCityData = (provinceId, cityId, areaId) => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/p/area/listByPid',
|
||||
method: 'GET',
|
||||
data: {
|
||||
pid: 0
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
provArray.value = data
|
||||
if (provinceId) {
|
||||
for (const index in data) {
|
||||
if (data[index].areaId === provinceId) {
|
||||
valArr.value = [parseInt(index), valArr.value[1], valArr.value[2]]
|
||||
}
|
||||
}
|
||||
}
|
||||
getCityArray(provinceId || data[0].areaId, cityId, areaId)
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
let indexArr = [18, 0, 0]
|
||||
const areaArray = ref([])
|
||||
const cityArray = ref([])
|
||||
/**
|
||||
* 滑动事件
|
||||
*/
|
||||
const bindChange = (e) => {
|
||||
// 判断滑动的是第几个column
|
||||
const val = e.detail.value
|
||||
// 若省份column做了滑动则定位到地级市和区县第一位
|
||||
if (indexArr[0] != val[0]) {
|
||||
val[1] = 0
|
||||
val[2] = 0 // 更新数据
|
||||
// 获取地级市数据
|
||||
getCityArray(provArray.value[val[0]].areaId)
|
||||
} else {
|
||||
// 若省份column未做滑动,地级市做了滑动则定位区县第一位
|
||||
if (indexArr[1] != val[1]) {
|
||||
val[2] = 0 // 更新数据
|
||||
getAreaArray(cityArray.value[val[1]].areaId) // 获取区县数据
|
||||
}
|
||||
}
|
||||
indexArr = val
|
||||
valArr.value = [val[0], val[1], val[2]]
|
||||
province.value = provArray.value[valArr.value[0]].areaName
|
||||
city.value = cityArray.value[valArr.value[1]].areaName
|
||||
area.value = areaArray.value[valArr.value[2]].areaName
|
||||
provinceId.value = provArray.value[valArr.value[0]].areaId
|
||||
cityId.value = cityArray.value[valArr.value[1]].areaId
|
||||
areaId.value = areaArray.value[valArr.value[2]].areaId
|
||||
}
|
||||
|
||||
let t = 0
|
||||
let moveY = 200
|
||||
const show = ref('')
|
||||
/**
|
||||
* 移动按钮点击事件
|
||||
*/
|
||||
const translate = () => {
|
||||
if (t == 0) {
|
||||
moveY = 0
|
||||
show.value = true
|
||||
t = 1
|
||||
} else {
|
||||
moveY = 200
|
||||
show.value = false
|
||||
t = 0
|
||||
}
|
||||
animationEvents(moveY, show.value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏弹窗浮层
|
||||
*/
|
||||
const hiddenFloatView = () => {
|
||||
moveY = 200
|
||||
show.value = false
|
||||
t = 0
|
||||
animationEvents(moveY, show.value)
|
||||
}
|
||||
|
||||
const animation = ref('')
|
||||
/**
|
||||
* 动画事件
|
||||
*/
|
||||
const animationEvents = (moveY, showParam) => {
|
||||
animation.value = uni.createAnimation({
|
||||
transformOrigin: '50% 50%',
|
||||
duration: 400,
|
||||
timingFunction: 'ease',
|
||||
delay: 0
|
||||
})
|
||||
animation.value.translateY(moveY + 'vh').step()
|
||||
animation.value = animation.value.export()
|
||||
show.value = showParam
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据省份ID获取 城市数据
|
||||
*/
|
||||
const getCityArray = (provinceId, cityId, areaId) => {
|
||||
http.request({
|
||||
url: '/p/area/listByPid',
|
||||
method: 'GET',
|
||||
data: {
|
||||
pid: provinceId
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
cityArray.value = data
|
||||
if (cityId) {
|
||||
for (const index in data) {
|
||||
if (data[index].areaId == cityId) {
|
||||
valArr.value = [valArr.value[0], parseInt(index), valArr.value[2]]
|
||||
}
|
||||
}
|
||||
}
|
||||
getAreaArray(cityId || data[0].areaId, areaId)
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据城市ID获取 区数据
|
||||
*/
|
||||
const getAreaArray = (cityId, areaId) => {
|
||||
http.request({
|
||||
url: '/p/area/listByPid',
|
||||
method: 'GET',
|
||||
data: {
|
||||
pid: cityId
|
||||
}
|
||||
}).then(({ data }) => {
|
||||
areaArray.value = data
|
||||
if (areaId) {
|
||||
for (const _index in data) {
|
||||
if (data[_index].areaId == areaId) {
|
||||
valArr.value = [valArr.value[0], valArr.value[1], parseInt(_index)]
|
||||
}
|
||||
}
|
||||
indexArr = valArr.value
|
||||
} else {
|
||||
province.value = provArray.value[valArr.value[0]].areaName
|
||||
city.value = cityArray.value[valArr.value[1]].areaName
|
||||
area.value = areaArray.value[valArr.value[2]].areaName
|
||||
provinceId.value = provArray.value[valArr.value[0]].areaId
|
||||
cityId.value = cityArray.value[valArr.value[1]].areaId
|
||||
areaId.value = areaArray.value[valArr.value[2]].areaId
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存地址
|
||||
*/
|
||||
const onSaveAddr = () => {
|
||||
const receiverParam = receiver.value
|
||||
const mobileParam = mobile.value
|
||||
const addrParam = addr.value
|
||||
|
||||
if (!receiverParam.trim()) {
|
||||
receiver.value = ''
|
||||
uni.showToast({
|
||||
title: '请输入收货人姓名',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!mobileParam) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号码',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (mobileParam.length != 11) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号码',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!addrParam.trim()) {
|
||||
receiver.value = ''
|
||||
uni.showToast({
|
||||
title: '请输入详细地址',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading()
|
||||
let url = '/p/address/addAddr'
|
||||
let method = 'POST'
|
||||
|
||||
if (addrId.value != 0) {
|
||||
url = '/p/address/updateAddr'
|
||||
method = 'PUT'
|
||||
} // 添加或修改地址
|
||||
|
||||
http.request({
|
||||
url,
|
||||
method,
|
||||
data: {
|
||||
receiver: receiver.value,
|
||||
mobile: mobile.value,
|
||||
addr: addr.value,
|
||||
province: province.value,
|
||||
provinceId: provinceId.value,
|
||||
city: city.value,
|
||||
cityId: cityId.value,
|
||||
areaId: areaId.value,
|
||||
area: area.value,
|
||||
userType: 0,
|
||||
addrId: addrId.value
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
uni.hideLoading()
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
})
|
||||
}
|
||||
const onReceiverInput = (e) => {
|
||||
receiver.value = e.detail.value
|
||||
}
|
||||
const onMobileInput = (e) => {
|
||||
mobile.value = e.detail.value
|
||||
}
|
||||
const onAddrInput = (e) => {
|
||||
addr.value = e.detail.value
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除配送地址
|
||||
*/
|
||||
const onDeleteAddr = () => {
|
||||
uni.showModal({
|
||||
title: '',
|
||||
content: '确定要删除此收货地址吗?',
|
||||
confirmColor: '#eb2444',
|
||||
|
||||
success (res) {
|
||||
if (res.confirm) {
|
||||
const addrIdParam = addrId.value
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/p/address/deleteAddr/' + addrIdParam,
|
||||
method: 'DELETE'
|
||||
})
|
||||
.then(() => {
|
||||
uni.hideLoading()
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './editAddress.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,175 @@
|
||||
page {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
.container {
|
||||
height: 100%;
|
||||
}
|
||||
.padding20 {
|
||||
padding-top: 88rpx;
|
||||
}
|
||||
.f-fl {
|
||||
float: left;
|
||||
}
|
||||
.f-fr {
|
||||
float: right;
|
||||
}
|
||||
.navWrap {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
background-color: #fafafa;
|
||||
border-bottom: 2rpx solid #f4f4f4;
|
||||
height: 92rpx;
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
.nav-slider {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 4rpx;
|
||||
background-color: #b4282d;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
float: left;
|
||||
height: 88rpx;
|
||||
padding: 0 16rpx;
|
||||
font-size: 28rpx;
|
||||
text {
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
padding: 27rpx 16rpx 23rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
.nav-item.active {
|
||||
text {
|
||||
color: #b4282d;
|
||||
}
|
||||
}
|
||||
.u-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.deliveryInfo {
|
||||
height: 198rpx;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
padding-left: 30rpx;
|
||||
background-size: cover;
|
||||
display: table;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.companyname {
|
||||
line-height: 1;
|
||||
margin-left: 136rpx;
|
||||
font-size: 28rpx;
|
||||
.key {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.expno {
|
||||
line-height: 1;
|
||||
margin-left: 136rpx;
|
||||
font-size: 28rpx;
|
||||
margin-top: 16rpx;
|
||||
.key {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-express {
|
||||
width: 104rpx;
|
||||
height: 104rpx;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 48rpx;
|
||||
left: 30rpx;
|
||||
}
|
||||
.infoWarp {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.deliveryDetail {
|
||||
margin-top: 20rpx;
|
||||
padding-top: 40rpx;
|
||||
background-color: #fff;
|
||||
min-height: 670rpx;
|
||||
}
|
||||
.detailItem {
|
||||
border-left: 1px dashed #f4f4f4;
|
||||
margin-left: 42rpx;
|
||||
position: relative;
|
||||
margin-bottom: 2rpx;
|
||||
}
|
||||
.dot {
|
||||
image {
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
left: -18rpx;
|
||||
}
|
||||
}
|
||||
.lastest {
|
||||
.dot {
|
||||
image {
|
||||
top: -2rpx;
|
||||
}
|
||||
}
|
||||
.detail {
|
||||
.desc {
|
||||
color: #105c3e;
|
||||
margin-top: 0;
|
||||
}
|
||||
.time {
|
||||
color: #105c3e;
|
||||
}
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
.detail {
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
line-height: 30rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
line-height: 30rpx;
|
||||
color: #999;
|
||||
margin-top: 15rpx;
|
||||
margin-bottom: 39rpx;
|
||||
}
|
||||
border-top: 1px solid #f4f4f4;
|
||||
margin-left: 28rpx;
|
||||
overflow: hidden;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
.deliveryTip {
|
||||
height: 80rpx;
|
||||
background-color: #fff8d8;
|
||||
padding-left: 30rpx;
|
||||
color: #f48f18;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.empty-space {
|
||||
margin-top: 20rpx;
|
||||
background: #fff;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<!-- 物流信息 -->
|
||||
<view class="container">
|
||||
<view class="wrapper">
|
||||
<view
|
||||
class="deliveryInfo"
|
||||
style="background:url(http://jiales.gz-yami.com/delivery-bg.png) center center no-repeat #fff;"
|
||||
>
|
||||
<view
|
||||
class="icon-express"
|
||||
style="background:url(http://jiales.gz-yami.com/delivery-car.png) no-repeat;background-size:100% 100%;"
|
||||
/>
|
||||
<view class="infoWarp">
|
||||
<view class="companyname">
|
||||
<text class="key">
|
||||
物流公司:
|
||||
</text>
|
||||
<text class="value">
|
||||
{{ companyName }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="expno">
|
||||
<text class="key">
|
||||
运单编号:
|
||||
</text>
|
||||
<text class="value">
|
||||
{{ dvyFlowId }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="dvyData.length"
|
||||
class="deliveryDetail"
|
||||
>
|
||||
<block
|
||||
v-for="(item, index) in dvyData"
|
||||
:key="index"
|
||||
>
|
||||
<view :class="'detailItem ' + (index==0?'lastest':'')">
|
||||
<view class="dot">
|
||||
<image src="@/static/images/icon/delive-dot.png" />
|
||||
<image src="@/static/images/icon/dot.png" />
|
||||
</view>
|
||||
<view class="detail">
|
||||
<view class="desc">
|
||||
{{ item.context }}
|
||||
</view>
|
||||
<view class="time">
|
||||
{{ item.time }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view
|
||||
v-else
|
||||
class="empty-space"
|
||||
>
|
||||
暂无配送信息
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const companyName = ref('')
|
||||
const dvyFlowId = ref('')
|
||||
const dvyData = ref([])
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad((options) => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/delivery/check',
|
||||
method: 'GET',
|
||||
data: {
|
||||
orderNumber: options.orderNum
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
companyName.value = data.companyName
|
||||
dvyFlowId.value = data.dvyFlowId
|
||||
dvyData.value = data.data
|
||||
uni.hideLoading()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './express-delivery.scss';
|
||||
</style>
|
||||
410
front-end/mall4uni/src/pages/index/index.scss
Normal file
@@ -0,0 +1,410 @@
|
||||
.container {
|
||||
background: #f7f7f7;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 轮播图及搜索框 */
|
||||
swiper {
|
||||
width: 100%;
|
||||
height: 350rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
swiper.pic-swiper {
|
||||
margin-top: 75rpx;
|
||||
padding: 10rpx 0;
|
||||
background: #fff;
|
||||
height: 422rpx;
|
||||
.img-box {
|
||||
font-size: 0;
|
||||
}
|
||||
.banner {
|
||||
position: absolute;
|
||||
width: 690rpx;
|
||||
margin: 0 10rpx;
|
||||
height: 402rpx;
|
||||
border-radius: 8rpx;
|
||||
display: inline-block;
|
||||
box-shadow: 0 4px 10px 0 rgba(83, 83, 83, 0.288);
|
||||
}
|
||||
}
|
||||
swiper-item {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.wx-swiper-dots {
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
.banner-item {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.container {
|
||||
.bg-sear {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
line-height: 56rpx;
|
||||
background: #fff;
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.bg-sear {
|
||||
.section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60rpx;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
border-radius: 50rpx;
|
||||
width: 92%;
|
||||
margin: auto;
|
||||
left: 4%;
|
||||
background: #f7f7f7;
|
||||
.placeholder {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.search-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 分类栏目 */
|
||||
.content {
|
||||
background: #fff;
|
||||
}
|
||||
.cat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
padding-top: 20rpx;
|
||||
padding-bottom: 30rpx;
|
||||
.item {
|
||||
text-align: center;
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
align-items: center;
|
||||
image {
|
||||
width: 75rpx;
|
||||
height: 75rpx;
|
||||
}
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 消息播放 */
|
||||
.message-play {
|
||||
position: relative;
|
||||
height: 90rpx;
|
||||
background: #fff;
|
||||
margin: auto;
|
||||
padding: 0 60rpx 0 100rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
|
||||
border: 2rpx solid #fafafa;
|
||||
.hornpng {
|
||||
width: 77rpx;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 27rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.swiper-cont {
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
.items {
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
.arrow {
|
||||
width: 15rpx;
|
||||
height: 15rpx;
|
||||
border-top: 3rpx solid #686868;
|
||||
border-right: 3rpx solid #686868;
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 34rpx;
|
||||
}
|
||||
|
||||
/* 每日上新 */
|
||||
.title {
|
||||
position: relative;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 40rpx 0 10rpx 30rpx;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
.more-prod-cont {
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
.more {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 48rpx;
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
padding: 0 20rpx;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.arrow {
|
||||
top: 58rpx;
|
||||
right: 30rpx;
|
||||
border-top: 2rpx solid #666;
|
||||
border-right: 2rpx solid #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.up-to-date {
|
||||
.title {
|
||||
color: #fff;
|
||||
background: none;
|
||||
.more-prod-cont {
|
||||
.more {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 48rpx;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
background: #65addf;
|
||||
border-radius: 30rpx;
|
||||
padding: 0 30rpx;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAABxCAYAAACkwXoWAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAZBJREFUeJzt1DEBwCAAwLAxYfhEGXJABkcTBb065trnAwj6XwcAvGKAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGRdKykDj9OUNYkAAAAASUVORK5CYII=");
|
||||
background-position: top;
|
||||
background-size: 100% 332rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #fff;
|
||||
.item-cont {
|
||||
margin: auto;
|
||||
height: auto;
|
||||
width: calc(100% - 40rpx);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&::before {
|
||||
clear: both;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.prod-item {
|
||||
border-radius: 10rpx;
|
||||
width: 220rpx;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
margin: 0 8rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2);
|
||||
.imagecont {
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
.prodimg {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
vertical-align: middle;
|
||||
border-top-left-radius: 10rpx;
|
||||
border-top-right-radius: 10rpx;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
.prod-text {
|
||||
font-size: 28rpx;
|
||||
overflow: hidden;
|
||||
margin: 10rpx 0;
|
||||
height: 75rpx;
|
||||
display: -webkit-box;
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
color: #000;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.prod-price {
|
||||
font-size: 25rpx;
|
||||
color: #eb2444;
|
||||
font-family: Arial;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hotsale-item-cont {
|
||||
padding-bottom: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.more.prod-price {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 商城热卖 */
|
||||
.hot-sale {
|
||||
.prod-items {
|
||||
width: 345rpx;
|
||||
display: inline-block;
|
||||
background: #fff;
|
||||
padding-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2);
|
||||
&:nth-child(2n-1) {
|
||||
margin: 20rpx 10rpx 10rpx 20rpx;
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
margin: 20rpx 20rpx 10rpx 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.prod-items {
|
||||
.hot-imagecont {
|
||||
.hotsaleimg {
|
||||
width: 341rpx;
|
||||
height: 341rpx;
|
||||
}
|
||||
font-size: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.hot-text {
|
||||
.hotprod-text {
|
||||
font-size: 28rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
margin-top: 20rpx;
|
||||
padding: 0 10rpx;
|
||||
.prod-info {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.prod-text-info {
|
||||
position: relative;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-family: Arial;
|
||||
.hotprod-price {
|
||||
display: inline;
|
||||
font-size: 26rpx;
|
||||
color: #eb2444;
|
||||
}
|
||||
.basket-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 7rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.more-prod {
|
||||
.prod-text-right {
|
||||
.prod-info {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.singal-price {
|
||||
display: inline;
|
||||
font-size: 20rpx;
|
||||
text-decoration: line-through;
|
||||
color: #777;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
/* 更多宝贝 */
|
||||
.more-prod {
|
||||
background: #fff;
|
||||
.prod-show {
|
||||
.show-item {
|
||||
.more-prod-pic {
|
||||
width: 250rpx;
|
||||
height: 250rpx;
|
||||
.more-pic {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
justify-content: flex-start;
|
||||
border-top: 2rpx solid #f4f4f4;
|
||||
.prod-text-right {
|
||||
margin-left: 30rpx;
|
||||
width: 72%;
|
||||
padding-bottom: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.go-to-buy {
|
||||
font-size: 26rpx;
|
||||
background: #fff2f5;
|
||||
color: #eb2444;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
padding: 12rpx 20rpx;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
.prod-text.more {
|
||||
margin: 0;
|
||||
font-size: 28rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
display: -webkit-box;
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.more.prod-price {
|
||||
font-size: 28rpx;
|
||||
font-family: arial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.b-cart {
|
||||
margin-top: 30rpx;
|
||||
.basket-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
right: 46rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
}
|
||||
507
front-end/mall4uni/src/pages/index/index.vue
Normal file
@@ -0,0 +1,507 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="bg-sear">
|
||||
<view class="scrolltop">
|
||||
<view
|
||||
class="section"
|
||||
@tap="toSearchPage"
|
||||
>
|
||||
<image
|
||||
src="@/static/images/icon/search.png"
|
||||
class="search-img"
|
||||
/>
|
||||
<text class="placeholder">
|
||||
搜索
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<!-- swiper -->
|
||||
<swiper
|
||||
:autoplay="autoplay"
|
||||
:indicator-color="indicatorColor"
|
||||
:interval="interval"
|
||||
:duration="duration"
|
||||
:indicator-active-color="indicatorActiveColor + ' '"
|
||||
:circular="true"
|
||||
class="pic-swiper"
|
||||
indicator-dots
|
||||
previous-margin="20rpx"
|
||||
next-margin="20rpx"
|
||||
>
|
||||
<block
|
||||
v-for="(item, index) in indexImgs"
|
||||
:key="index"
|
||||
>
|
||||
<swiper-item class="banner-item">
|
||||
<view class="img-box">
|
||||
<image
|
||||
:src="item.imgUrl"
|
||||
:data-prodid="item.relation"
|
||||
class="banner"
|
||||
@tap="toProdPage"
|
||||
/>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<!-- end swiper -->
|
||||
|
||||
<view class="cat-item">
|
||||
<view
|
||||
class="item"
|
||||
data-sts="1"
|
||||
@tap="toClassifyPage"
|
||||
>
|
||||
<image src="@/static/images/icon/newProd.png" />
|
||||
<text>新品推荐</text>
|
||||
</view>
|
||||
<view
|
||||
class="item"
|
||||
data-sts="1"
|
||||
@tap="toClassifyPage"
|
||||
>
|
||||
<image src="@/static/images/icon/timePrice.png" />
|
||||
<text>限时特惠</text>
|
||||
</view>
|
||||
<view
|
||||
class="item"
|
||||
data-sts="3"
|
||||
@tap="toClassifyPage"
|
||||
>
|
||||
<image src="@/static/images/icon/neweveryday.png" />
|
||||
<text>每日疯抢</text>
|
||||
</view>
|
||||
<view
|
||||
class="item"
|
||||
@tap="toCouponCenter"
|
||||
>
|
||||
<image src="@/static/images/icon/newprods.png" />
|
||||
<text>领优惠券</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 消息播放 -->
|
||||
<view
|
||||
v-if="news && news.length"
|
||||
class="message-play"
|
||||
@tap="onNewsPage"
|
||||
>
|
||||
<image
|
||||
src="@/static/images/icon/horn.png"
|
||||
class="hornpng"
|
||||
/>
|
||||
<swiper
|
||||
:vertical="true"
|
||||
:autoplay="true"
|
||||
:circular="true"
|
||||
duration="1000"
|
||||
class="swiper-cont"
|
||||
>
|
||||
<block
|
||||
v-for="(item, index) in news"
|
||||
:key="index"
|
||||
>
|
||||
<swiper-item class="items">
|
||||
{{ item.title }}
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<text class="arrow" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-if="updata"
|
||||
class="updata"
|
||||
>
|
||||
<block
|
||||
v-for="(item, index) in taglist"
|
||||
:key="index"
|
||||
>
|
||||
<!-- 每日上新 -->
|
||||
<view
|
||||
v-if="item.style==='2' && item.prods && item.prods.length"
|
||||
class="up-to-date"
|
||||
>
|
||||
<view class="title">
|
||||
<text>{{ item.title }}</text>
|
||||
<view
|
||||
class="more-prod-cont"
|
||||
data-sts="0"
|
||||
:data-id="item.id"
|
||||
:data-title="item.title"
|
||||
@tap="toClassifyPage"
|
||||
>
|
||||
<text class="more">
|
||||
查看更多
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cont">
|
||||
<block
|
||||
v-for="(prod, index2) in item.prods"
|
||||
:key="index2"
|
||||
>
|
||||
<view
|
||||
class="prod-item"
|
||||
:data-prodid="prod.prodId"
|
||||
@tap="toProdPage"
|
||||
>
|
||||
<view>
|
||||
<view class="imagecont">
|
||||
<img-show
|
||||
:src="prod.pic"
|
||||
:class-list="['prodimg']"
|
||||
/>
|
||||
</view>
|
||||
<view class="prod-text">
|
||||
{{ prod.prodName }}
|
||||
</view>
|
||||
<view class="price">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(prod.price)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(prod.price)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商城热卖 -->
|
||||
<view
|
||||
v-if="item.style==='1' && item.prods && item.prods.length"
|
||||
class="hot-sale"
|
||||
>
|
||||
<view class="title">
|
||||
<text>{{ item.title }}</text>
|
||||
<view
|
||||
class="more-prod-cont"
|
||||
data-sts="0"
|
||||
:data-id="item.id"
|
||||
:data-title="item.title"
|
||||
@tap="toClassifyPage"
|
||||
>
|
||||
<text class="more">
|
||||
更多
|
||||
</text>
|
||||
<text class="arrow" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="hotsale-item-cont">
|
||||
<block
|
||||
v-for="(prod, index2) in item.prods"
|
||||
:key="index2"
|
||||
>
|
||||
<view
|
||||
class="prod-items"
|
||||
:data-prodid="prod.prodId"
|
||||
@tap="toProdPage"
|
||||
>
|
||||
<view class="hot-imagecont">
|
||||
<img-show
|
||||
:src="prod.pic"
|
||||
:class-list="['hotsaleimg']"
|
||||
/>
|
||||
</view>
|
||||
<view class="hot-text">
|
||||
<view class="hotprod-text">
|
||||
{{ prod.prodName }}
|
||||
</view>
|
||||
<view class="prod-info">
|
||||
{{ prod.brief }}
|
||||
</view>
|
||||
<view class="prod-text-info">
|
||||
<view class="price">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(prod.price)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(prod.price)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
<image
|
||||
src="@/static/images/tabbar/basket-sel.png"
|
||||
class="basket-img"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 更多宝贝 -->
|
||||
<view
|
||||
v-if="item.style==='0' && item.prods && item.prods.length"
|
||||
class="more-prod"
|
||||
>
|
||||
<view class="title">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<view class="prod-show">
|
||||
<block
|
||||
v-for="(prod, index2) in item.prods"
|
||||
:key="index2"
|
||||
>
|
||||
<view
|
||||
class="show-item"
|
||||
:data-prodid="prod.prodId"
|
||||
@tap="toProdPage"
|
||||
>
|
||||
<view class="more-prod-pic">
|
||||
<img-show
|
||||
:src="prod.pic"
|
||||
:class-list="['more-pic']"
|
||||
/>
|
||||
</view>
|
||||
<view class="prod-text-right">
|
||||
<view class="prod-text more">
|
||||
{{ prod.prodName }}
|
||||
</view>
|
||||
<view class="prod-info">
|
||||
{{ prod.brief }}
|
||||
</view>
|
||||
<view class="b-cart">
|
||||
<view class="price">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(prod.price)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(prod.price)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
<image
|
||||
src="@/static/images/tabbar/basket-sel.png"
|
||||
class="basket-img"
|
||||
@tap.stop="addToCart(prod)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const wxs = number()
|
||||
const indicatorColor = ref('#d1e5fb')
|
||||
const indicatorActiveColor = ref('#1b7dec')
|
||||
const autoplay = ref(true)
|
||||
const interval = ref(2000)
|
||||
const duration = ref(1000)
|
||||
const indexImgs = ref([])
|
||||
const seq = ref(0)
|
||||
const news = ref([])
|
||||
const taglist = ref([])
|
||||
const updata = ref(true)
|
||||
|
||||
onLoad(() => {
|
||||
getAllData()
|
||||
})
|
||||
onShow(() => {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.getSetting({
|
||||
success (res) {
|
||||
if (!res.authSetting['scope.userInfo']) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
http.getCartCount() // 重新计算购物车总数量
|
||||
})
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
// 模拟加载
|
||||
setTimeout(() => {
|
||||
getAllData()
|
||||
uni.stopPullDownRefresh() // 停止下拉刷新
|
||||
}, 100)
|
||||
})
|
||||
|
||||
const getAllData = () => {
|
||||
http.getCartCount()// 重新计算购物车总数量
|
||||
getIndexImgs()
|
||||
getNoticeList()
|
||||
getTag()
|
||||
}
|
||||
|
||||
const toProdPage = (e) => {
|
||||
const prodid = e.currentTarget.dataset.prodid
|
||||
|
||||
if (prodid) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/prod/prod?prodid=' + prodid
|
||||
})
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 加入购物车
|
||||
* @param item
|
||||
*/
|
||||
const addToCart = (item) => {
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
http.request({
|
||||
url: '/prod/prodInfo',
|
||||
method: 'GET',
|
||||
data: {
|
||||
prodId: item.prodId
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
http.request({
|
||||
url: '/p/shopCart/changeItem',
|
||||
method: 'POST',
|
||||
data: {
|
||||
basketId: 0,
|
||||
count: 1,
|
||||
prodId: data.prodId,
|
||||
shopId: data.shopId,
|
||||
skuId: data.skuList[0].skuId
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
uni.hideLoading()
|
||||
http.getCartCount() // 重新计算购物车总数量
|
||||
uni.showToast({
|
||||
title: '加入购物车成功',
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const toCouponCenter = () => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '该功能未开源'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转搜索页
|
||||
*/
|
||||
const toSearchPage = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/search-page/search-page'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转商品活动页面
|
||||
* @param e
|
||||
*/
|
||||
const toClassifyPage = (e) => {
|
||||
let url = '/pages/prod-classify/prod-classify?sts=' + e.currentTarget.dataset.sts
|
||||
const id = e.currentTarget.dataset.id
|
||||
const title = e.currentTarget.dataset.title
|
||||
|
||||
if (id) {
|
||||
url += '&tagid=' + id + '&title=' + title
|
||||
}
|
||||
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 跳转公告列表页面
|
||||
*/
|
||||
const onNewsPage = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/recent-news/recent-news'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载轮播图
|
||||
*/
|
||||
const getIndexImgs = () => {
|
||||
http.request({
|
||||
url: '/indexImgs',
|
||||
method: 'GET',
|
||||
data: {}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
indexImgs.value = data
|
||||
seq.value = data
|
||||
})
|
||||
}
|
||||
|
||||
const getNoticeList = () => {
|
||||
// 加载公告
|
||||
http.request({
|
||||
url: '/shop/notice/topNoticeList',
|
||||
method: 'GET',
|
||||
data: {}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
news.value = data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载商品标题分组列表
|
||||
*/
|
||||
const getTag = () => {
|
||||
http.request({
|
||||
url: '/prod/tag/prodTagList',
|
||||
method: 'GET',
|
||||
data: {}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
taglist.value = data
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
updata.value = false
|
||||
updata.value = true
|
||||
getTagProd(data[i].id, i)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getTagProd = (id, index) => {
|
||||
http.request({
|
||||
url: '/prod/prodListByTagId',
|
||||
method: 'GET',
|
||||
data: {
|
||||
tagId: id,
|
||||
size: 6
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
updata.value = false
|
||||
updata.value = true
|
||||
const taglistParam = taglist.value
|
||||
taglistParam[index].prods = data.records
|
||||
taglist.value = taglistParam
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './index.scss';
|
||||
</style>
|
||||
23
front-end/mall4uni/src/pages/news-detail/news-detail.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
.news-detail {
|
||||
padding: 20rpx;
|
||||
.news-detail-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 50rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
.news-detail-text {
|
||||
font-size: 28rpx;
|
||||
line-height: 46rpx;
|
||||
text-align: justify;
|
||||
text-justify: inter-ideograph;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
:deep(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
41
front-end/mall4uni/src/pages/news-detail/news-detail.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="news-detail">
|
||||
<view class="news-detail-title">
|
||||
{{ news.title }}
|
||||
</view>
|
||||
<rich-text
|
||||
class="content"
|
||||
:nodes="news.content"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const news = ref({
|
||||
title: '',
|
||||
content: '',
|
||||
id: null
|
||||
})
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad((options) => {
|
||||
// 加载公告详情
|
||||
http.request({
|
||||
url: '/shop/notice/info/' + options.id,
|
||||
method: 'GET'
|
||||
})
|
||||
.then(({ data }) => {
|
||||
data.content = data.content.replace(/width=/gi, 'sss=')
|
||||
data.content = data.content.replace(/height=/gi, 'sss=')
|
||||
data.content = data.content.replace(/ \/>/gi, ' style="max-width:100% !important;display:block;" />')
|
||||
news.value = data
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './news-detail.scss';
|
||||
</style>
|
||||
247
front-end/mall4uni/src/pages/order-detail/order-detail.scss
Normal file
@@ -0,0 +1,247 @@
|
||||
.container {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.order-detail {
|
||||
margin-bottom: 120rpx;
|
||||
padding-bottom: 160rpx;
|
||||
.delivery-addr {
|
||||
padding: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
.user-info {
|
||||
line-height: 48rpx;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
.item {
|
||||
font-size: 28rpx;
|
||||
margin-right: 30rpx;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.addr {
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #999;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
.prod-item {
|
||||
background-color: #fff;
|
||||
margin-top: 15rpx;
|
||||
font-size: 28rpx;
|
||||
.item-cont {
|
||||
.prod-pic {
|
||||
image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
font-size: 0;
|
||||
display: block;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
.prod-info {
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 80px;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
flex: 1;
|
||||
.prodname {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
max-height: 86rpx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.prod-info-cont {
|
||||
position: relative;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
.info-item {
|
||||
color: #999;
|
||||
height: 28rpx;
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
width: 70%;
|
||||
}
|
||||
.number {
|
||||
float: left;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.price-nums {
|
||||
margin-top: 30rpx;
|
||||
.prodprice {
|
||||
color: #333;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
font-size: 24rpx;
|
||||
float: left;
|
||||
}
|
||||
.btn-box {
|
||||
float: right;
|
||||
text-align: right;
|
||||
.btn {
|
||||
padding: 6rpx 30rpx;
|
||||
line-height: 36rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 24rpx;
|
||||
display: inline-block;
|
||||
border: 2rpx solid #e4e4e4;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-msg {
|
||||
background: #fff;
|
||||
margin-top: 15rpx;
|
||||
font-size: 28rpx;
|
||||
.msg-item {
|
||||
padding: 20rpx;
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
&:first-child {
|
||||
border: 0;
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 10rpx 0;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
.item-tit {
|
||||
min-width: 140rpx;
|
||||
color: #999;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.item-txt {
|
||||
flex: 1;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.item-txt.remarks {
|
||||
max-width: 600rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.copy-btn {
|
||||
display: block;
|
||||
margin-left: 20rpx;
|
||||
border: 2rpx solid #e4e4e4;
|
||||
padding: 6rpx 24rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
.item-txt.price {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.item.payment {
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
color: #eb2444;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-detail-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
max-width: 750rpx;
|
||||
background: #fff;
|
||||
margin: auto;
|
||||
display: -webkit-flex;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 22rpx 0;
|
||||
font-size: 26rpx;
|
||||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
|
||||
.dele-order {
|
||||
margin-left: 20rpx;
|
||||
line-height: 60rpx;
|
||||
display: block;
|
||||
margin-right: 20rpx;
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.footer-box {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
line-height: 60rpx;
|
||||
.buy-again {
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
background: #eb2444;
|
||||
border-radius: 50rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.apply-service {
|
||||
font-size: 26rpx;
|
||||
border-radius: 50rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
border: 1px solid #e4e4e4;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clearfix {
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.order-state {
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: right;
|
||||
margin-right: 20rpx;
|
||||
.order-sts {
|
||||
color: #eb2444;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.order-sts.gray {
|
||||
color: #999;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
.order-sts.normal {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
299
front-end/mall4uni/src/pages/order-detail/order-detail.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="order-detail">
|
||||
<view
|
||||
v-if="userAddrDto"
|
||||
class="delivery-addr"
|
||||
>
|
||||
<view class="user-info">
|
||||
<text class="item">
|
||||
{{ userAddrDto.receiver }}
|
||||
</text>
|
||||
<text class="item">
|
||||
{{ userAddrDto.mobile }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="addr">
|
||||
{{ userAddrDto.province }}{{ userAddrDto.city }}{{ userAddrDto.area }}{{
|
||||
userAddrDto.area
|
||||
}}{{ userAddrDto.addr }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view
|
||||
v-if="orderItemDtos"
|
||||
class="prod-item"
|
||||
>
|
||||
<block
|
||||
v-for="(item, index) in orderItemDtos"
|
||||
:key="index"
|
||||
>
|
||||
<view
|
||||
class="item-cont"
|
||||
:data-prodid="item.prodId"
|
||||
@tap="toProdPage"
|
||||
>
|
||||
<view class="prod-pic">
|
||||
<image :src="item.pic" />
|
||||
</view>
|
||||
<view class="prod-info">
|
||||
<view class="prodname">
|
||||
{{ item.prodName }}
|
||||
</view>
|
||||
<view class="prod-info-cont">
|
||||
<text class="number">
|
||||
数量:{{ item.prodCount }}
|
||||
</text>
|
||||
<text class="info-item">
|
||||
{{ item.skuName }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="price-nums clearfix">
|
||||
<text class="prodprice">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(item.price)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(item.price)[1] }}
|
||||
</text>
|
||||
</text>
|
||||
<view class="btn-box" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="order-msg">
|
||||
<view class="msg-item">
|
||||
<view class="item">
|
||||
<text class="item-tit">
|
||||
订单编号:
|
||||
</text>
|
||||
<text class="item-txt">
|
||||
{{ orderNumber }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text class="item-tit">
|
||||
下单时间:
|
||||
</text>
|
||||
<text class="item-txt">
|
||||
{{ createTime }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="msg-item">
|
||||
<view class="item">
|
||||
<text class="item-tit">
|
||||
支付方式:
|
||||
</text>
|
||||
<text class="item-txt">
|
||||
微信支付
|
||||
</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text class="item-tit">
|
||||
配送方式:
|
||||
</text>
|
||||
<text class="item-txt">
|
||||
普通配送
|
||||
</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text
|
||||
v-if="!!remarks"
|
||||
class="item-tit"
|
||||
>
|
||||
订单备注:
|
||||
</text>
|
||||
<text class="item-txt remarks">
|
||||
{{ remarks }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-msg">
|
||||
<view class="msg-item">
|
||||
<view class="item">
|
||||
<view class="item-tit">
|
||||
订单总额:
|
||||
</view>
|
||||
<view class="item-txt price">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(total)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(total)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item-tit">
|
||||
运费:
|
||||
</view>
|
||||
<view class="item-txt price">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(transfee)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(transfee)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item-tit">
|
||||
优惠券:
|
||||
</view>
|
||||
<view class="item-txt price">
|
||||
<text class="symbol">
|
||||
-¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(reduceAmount)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(reduceAmount)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item payment">
|
||||
<view class="item-txt price">
|
||||
实付款:
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(actualTotal)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(actualTotal)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部栏 -->
|
||||
<view
|
||||
v-if="status==5||status==6"
|
||||
class="order-detail-footer"
|
||||
>
|
||||
<text
|
||||
v-if="status==5||status==6"
|
||||
class="dele-order"
|
||||
@tap="delOrderList"
|
||||
>
|
||||
删除订单
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const wxs = number()
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad((options) => {
|
||||
loadOrderDetail(options.orderNum)
|
||||
})
|
||||
|
||||
/**
|
||||
* 跳转商品详情页
|
||||
* @param e
|
||||
*/
|
||||
const toProdPage = (e) => {
|
||||
const prodid = e.currentTarget.dataset.prodid
|
||||
uni.navigateTo({
|
||||
url: '/pages/prod/prod?prodid=' + prodid
|
||||
})
|
||||
}
|
||||
|
||||
const remarks = ref('')
|
||||
const orderItemDtos = ref([])
|
||||
const reduceAmount = ref('')
|
||||
const transfee = ref('')
|
||||
const status = ref(0)
|
||||
const actualTotal = ref(0)
|
||||
const userAddrDto = ref(null)
|
||||
const orderNumber = ref('')
|
||||
const createTime = ref('')
|
||||
const total = ref(0) // 商品总额
|
||||
/**
|
||||
* 加载订单数据
|
||||
*/
|
||||
const loadOrderDetail = (orderNum) => {
|
||||
uni.showLoading() // 加载订单详情
|
||||
http.request({
|
||||
url: '/p/myOrder/orderDetail',
|
||||
method: 'GET',
|
||||
data: {
|
||||
orderNumber: orderNum
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
orderNumber.value = orderNum
|
||||
actualTotal.value = data.actualTotal
|
||||
userAddrDto.value = data.userAddrDto
|
||||
remarks.value = data.remarks
|
||||
orderItemDtos.value = data.orderItemDtos
|
||||
createTime.value = data.createTime
|
||||
status.value = data.status
|
||||
transfee.value = data.transfee
|
||||
reduceAmount.value = data.reduceAmount
|
||||
total.value = data.total
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除已完成||已取消的订单
|
||||
*/
|
||||
const delOrderList = () => {
|
||||
uni.showModal({
|
||||
title: '',
|
||||
content: '确定要删除此订单吗?',
|
||||
confirmColor: '#eb2444',
|
||||
success (res) {
|
||||
if (res.confirm) {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/p/myOrder/' + orderNumber.value,
|
||||
method: 'DELETE'
|
||||
})
|
||||
.then(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res || '删除成功',
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/orderList/orderList'
|
||||
})
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './order-detail.scss';
|
||||
</style>
|
||||
211
front-end/mall4uni/src/pages/orderList/orderList.scss
Normal file
@@ -0,0 +1,211 @@
|
||||
.container {
|
||||
background-color: #f4f4f4;
|
||||
color: #333;
|
||||
}
|
||||
.order-tit {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
background-color: #fff;
|
||||
border-bottom: 2rpx solid #f4f4f4;
|
||||
text {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: 999;
|
||||
width: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
text.on {
|
||||
border-bottom: 4rpx solid #eb2444;
|
||||
color: #eb2444;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
.prod-item {
|
||||
background-color: #fff;
|
||||
margin-top: 15rpx;
|
||||
font-size: 28rpx;
|
||||
.item-cont {
|
||||
.prod-pic {
|
||||
image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
font-size: 0;
|
||||
display: inline-block;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.categories {
|
||||
white-space: nowrap;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
border-radius: 10rpx;
|
||||
display: -webkit-flex;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
background: #fafafa;
|
||||
.prod-info {
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 160rpx;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
flex: 1;
|
||||
.prodname {
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
max-height: 86rpx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.prod-info-cont {
|
||||
color: #999;
|
||||
line-height: 40rpx;
|
||||
margin-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-num {
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
.clear-btn {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
font-size: 0;
|
||||
vertical-align: top;
|
||||
margin-left: 42rpx;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: 0rpx;
|
||||
width: 1px;
|
||||
height: 32rpx;
|
||||
background: #ddd;
|
||||
}
|
||||
.clear-list-btn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.total-num {
|
||||
text-align: right;
|
||||
padding: 20rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
.prodprice {
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
}
|
||||
.prodcount {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
.price-nums {
|
||||
.prodprice {
|
||||
color: #333;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.prodcount {
|
||||
position: absolute;
|
||||
bottom: 5rpx;
|
||||
right: 0;
|
||||
color: #999;
|
||||
font-family: verdana;
|
||||
}
|
||||
}
|
||||
.prod-foot {
|
||||
border-top: 2rpx solid #e6e6e6;
|
||||
.total {
|
||||
font-size: 25rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 2rpx solid #e9eaec;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
.order-sts.red {
|
||||
color: #eb2444;
|
||||
}
|
||||
.order-sts.gray {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.other-button-hover {
|
||||
background-color: blue;
|
||||
}
|
||||
.button-hover {
|
||||
background-color: red;
|
||||
background-color: blue;
|
||||
}
|
||||
.button {
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin-left: 10px;
|
||||
font-size: 26rpx;
|
||||
background: #fff;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 80rpx;
|
||||
border: 2rpx solid #e1e1e1;
|
||||
&:last-child {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.button.warn {
|
||||
color: #eb2444;
|
||||
border-color: #eb2444;
|
||||
}
|
||||
.empty {
|
||||
font-size: 24rpx;
|
||||
margin-top: 100rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
}
|
||||
424
front-end/mall4uni/src/pages/orderList/orderList.vue
Normal file
@@ -0,0 +1,424 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 头部菜单 -->
|
||||
<view class="order-tit">
|
||||
<text
|
||||
data-sts="0"
|
||||
:class="sts==0?'on':''"
|
||||
@tap="onStsTap"
|
||||
>
|
||||
全部
|
||||
</text>
|
||||
<text
|
||||
data-sts="1"
|
||||
:class="sts==1?'on':''"
|
||||
@tap="onStsTap"
|
||||
>
|
||||
待支付
|
||||
</text>
|
||||
<text
|
||||
data-sts="2"
|
||||
:class="sts==2?'on':''"
|
||||
@tap="onStsTap"
|
||||
>
|
||||
待发货
|
||||
</text>
|
||||
<text
|
||||
data-sts="3"
|
||||
:class="sts==3?'on':''"
|
||||
@tap="onStsTap"
|
||||
>
|
||||
待收货
|
||||
</text>
|
||||
<text
|
||||
data-sts="5"
|
||||
:class="sts==5?'on':''"
|
||||
@tap="onStsTap"
|
||||
>
|
||||
已完成
|
||||
</text>
|
||||
</view>
|
||||
<!-- end 头部菜单 -->
|
||||
<view class="main">
|
||||
<view
|
||||
v-if="list.length==0"
|
||||
class="empty"
|
||||
>
|
||||
还没有任何相关订单
|
||||
</view>
|
||||
<!-- 订单列表 -->
|
||||
<block
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
>
|
||||
<view class="prod-item">
|
||||
<view class="order-num">
|
||||
<text>订单编号:{{ item.orderNumber }}</text>
|
||||
<view class="order-state">
|
||||
<text
|
||||
:class="'order-sts ' + (item.status==1?'red':'') + ' ' + ((item.status==5||item.status==6)?'gray':'')"
|
||||
>
|
||||
{{
|
||||
item.status == 1 ? '待支付' : (item.status == 2 ? '待发货' : (item.status == 3 ? '待收货' : (item.status == 5 ? '已完成' : '已取消')))
|
||||
}}
|
||||
</text>
|
||||
|
||||
<view
|
||||
v-if="item.status==5 || item.status==6"
|
||||
class="clear-btn"
|
||||
>
|
||||
<image
|
||||
src="@/static/images/icon/clear-his.png"
|
||||
class="clear-list-btn"
|
||||
:data-ordernum="item.orderNumber"
|
||||
@tap="delOrderList"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<!-- 一个订单单个商品的显示 -->
|
||||
<block v-if="item.orderItemDtos.length==1">
|
||||
<block
|
||||
v-for="(prod, index2) in item.orderItemDtos"
|
||||
:key="index2"
|
||||
>
|
||||
<view>
|
||||
<view
|
||||
class="item-cont"
|
||||
:data-ordernum="item.orderNumber"
|
||||
@tap="toOrderDetailPage"
|
||||
>
|
||||
<view class="prod-pic">
|
||||
<image :src="prod.pic" />
|
||||
</view>
|
||||
<view class="prod-info">
|
||||
<view class="prodname">
|
||||
{{ prod.prodName }}
|
||||
</view>
|
||||
<view class="prod-info-cont">
|
||||
{{ prod.skuName }}
|
||||
</view>
|
||||
<view class="price-nums">
|
||||
<text class="prodprice">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(prod.price)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(prod.price)[1] }}
|
||||
</text>
|
||||
</text>
|
||||
<text class="prodcount">
|
||||
x{{ prod.prodCount }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
<!-- 一个订单多个商品时的显示 -->
|
||||
<block v-else>
|
||||
<view
|
||||
class="item-cont"
|
||||
:data-ordernum="item.orderNumber"
|
||||
@tap="toOrderDetailPage"
|
||||
>
|
||||
<scroll-view
|
||||
scroll-x="true"
|
||||
scroll-left="0"
|
||||
scroll-with-animation="false"
|
||||
class="categories"
|
||||
>
|
||||
<block
|
||||
v-for="(prod, index2) in item.orderItemDtos"
|
||||
:key="index2"
|
||||
>
|
||||
<view class="prod-pic">
|
||||
<image :src="prod.pic" />
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="total-num">
|
||||
<text class="prodcount">
|
||||
共1件商品
|
||||
</text>
|
||||
<view class="prodprice">
|
||||
合计:
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(item.actualTotal)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(item.actualTotal)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end 商品列表 -->
|
||||
<view class="prod-foot">
|
||||
<view class="btn">
|
||||
<text
|
||||
v-if="item.status==1"
|
||||
class="button"
|
||||
:data-ordernum="item.orderNumber"
|
||||
hover-class="none"
|
||||
@tap="onCancelOrder"
|
||||
>
|
||||
取消订单
|
||||
</text>
|
||||
<text
|
||||
v-if="item.status==1"
|
||||
class="button warn"
|
||||
:data-ordernum="item.orderNumber"
|
||||
hover-class="none"
|
||||
@tap="normalPay"
|
||||
>
|
||||
付款
|
||||
</text>
|
||||
<text
|
||||
v-if="item.status==3 || item.status==5"
|
||||
class="button"
|
||||
:data-ordernum="item.orderNumber"
|
||||
hover-class="none"
|
||||
@tap="toDeliveryPage"
|
||||
>
|
||||
查看物流
|
||||
</text>
|
||||
<text
|
||||
v-if="item.status==3"
|
||||
class="button warn"
|
||||
:data-ordernum="item.orderNumber"
|
||||
hover-class="none"
|
||||
@tap="onConfirmReceive"
|
||||
>
|
||||
确认收货
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end 订单列表 -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const wxs = number()
|
||||
|
||||
const sts = ref(0)
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad((options) => {
|
||||
if (options.sts) {
|
||||
sts.value = options.sts
|
||||
loadOrderData(options.sts, 1)
|
||||
} else {
|
||||
loadOrderData(0, 1)
|
||||
}
|
||||
})
|
||||
|
||||
const current = ref(1)
|
||||
const pages = ref(0)
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom(() => {
|
||||
if (current.value < pages.value) {
|
||||
loadOrderData(sts.value, current.value + 1)
|
||||
}
|
||||
})
|
||||
|
||||
const list = ref([])
|
||||
/**
|
||||
* 加载订单数据
|
||||
*/
|
||||
const loadOrderData = (sts, currentParam) => {
|
||||
uni.showLoading() // 加载订单列表
|
||||
http.request({
|
||||
url: '/p/myOrder/myOrder',
|
||||
method: 'GET',
|
||||
data: {
|
||||
current: currentParam,
|
||||
size: 10,
|
||||
status: sts
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
let listParam = []
|
||||
if (data.current === 1) {
|
||||
listParam = data.records
|
||||
} else {
|
||||
listParam = list.value
|
||||
Array.prototype.push.apply(listParam, data.records)
|
||||
}
|
||||
list.value = listParam
|
||||
pages.value = data.pages
|
||||
current.value = data.current
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 状态点击事件
|
||||
*/
|
||||
const onStsTap = (e) => {
|
||||
sts.value = e.currentTarget.dataset.sts
|
||||
loadOrderData(sts.value, 1)
|
||||
}
|
||||
|
||||
/**
|
||||
* 查看物流
|
||||
*/
|
||||
const toDeliveryPage = (e) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/express-delivery/express-delivery?orderNum=' + e.currentTarget.dataset.ordernum
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消订单
|
||||
*/
|
||||
const onCancelOrder = (e) => {
|
||||
const ordernum = e.currentTarget.dataset.ordernum
|
||||
uni.showModal({
|
||||
title: '',
|
||||
content: '要取消此订单?',
|
||||
confirmColor: '#3e62ad',
|
||||
cancelColor: '#3e62ad',
|
||||
cancelText: '否',
|
||||
confirmText: '是',
|
||||
|
||||
success (res) {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
http.request({
|
||||
url: '/p/myOrder/cancel/' + ordernum,
|
||||
method: 'PUT',
|
||||
data: {}
|
||||
})
|
||||
.then(() => {
|
||||
loadOrderData(sts.value, 1)
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 模拟支付,直接提交成功
|
||||
* @param e
|
||||
*/
|
||||
const normalPay = (e) => {
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
http.request({
|
||||
url: '/p/order/normalPay',
|
||||
method: 'POST',
|
||||
data: {
|
||||
orderNumbers: e.currentTarget.dataset.ordernum
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
uni.hideLoading()
|
||||
if (data) {
|
||||
uni.showToast({
|
||||
title: '模拟支付成功',
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/pay-result/pay-result?sts=1&orderNumbers=' + e.currentTarget.dataset.ordernum
|
||||
})
|
||||
}, 1200)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '支付失败!',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 查看订单详情
|
||||
*/
|
||||
const toOrderDetailPage = (e) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/order-detail/order-detail?orderNum=' + e.currentTarget.dataset.ordernum
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认收货
|
||||
*/
|
||||
const onConfirmReceive = (e) => {
|
||||
uni.showModal({
|
||||
title: '',
|
||||
content: '我已收到货?',
|
||||
confirmColor: '#eb2444',
|
||||
|
||||
success (res) {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
http.request({
|
||||
url: '/p/myOrder/receipt/' + e.currentTarget.dataset.ordernum,
|
||||
method: 'PUT'
|
||||
})
|
||||
.then(() => {
|
||||
loadOrderData(sts.value, 1)
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除已完成||已取消的订单
|
||||
* @param e
|
||||
*/
|
||||
const delOrderList = (e) => {
|
||||
uni.showModal({
|
||||
title: '',
|
||||
content: '确定要删除此订单吗?',
|
||||
confirmColor: '#eb2444',
|
||||
|
||||
success (res) {
|
||||
if (res.confirm) {
|
||||
const ordernum = e.currentTarget.dataset.ordernum
|
||||
uni.showLoading()
|
||||
|
||||
http.request({
|
||||
url: '/p/myOrder/' + ordernum,
|
||||
method: 'DELETE'
|
||||
})
|
||||
.then(() => {
|
||||
loadOrderData(sts.value, 1)
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './orderList.scss';
|
||||
</style>
|
||||
50
front-end/mall4uni/src/pages/pay-result/pay-result.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
.pay-sts {
|
||||
font-size: 40rpx;
|
||||
margin-top: 100rpx;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
.pay-sts.fail {
|
||||
color: #f43530;
|
||||
}
|
||||
.pay-sts.succ {
|
||||
color: #19be6b;
|
||||
}
|
||||
.btns {
|
||||
margin-top: 50rpx;
|
||||
text-align: center;
|
||||
.button {
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
padding: 20rpx 35rpx;
|
||||
width: 300rpx;
|
||||
margin: 0 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.button.checkorder {
|
||||
background: #19be6b;
|
||||
color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
border: 2rpx solid #19be6b;
|
||||
}
|
||||
.button.payagain {
|
||||
background: #fff;
|
||||
border: 2rpx solid #f90;
|
||||
color: #f90;
|
||||
}
|
||||
.button.shopcontinue {
|
||||
background: #fff;
|
||||
border: 2rpx solid #19be6b;
|
||||
color: #19be6b;
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
.warn {
|
||||
color: #f43530;
|
||||
}
|
||||
}
|
||||
110
front-end/mall4uni/src/pages/pay-result/pay-result.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="sts == 0">
|
||||
<view class="pay-sts fail">
|
||||
支付失败
|
||||
</view>
|
||||
<view class="tips">
|
||||
请在
|
||||
<text class="warn">
|
||||
30分钟
|
||||
</text>内完成付款
|
||||
</view>
|
||||
<view class="tips">
|
||||
否则订单会被系统取消
|
||||
</view>
|
||||
<view class="btns">
|
||||
<text
|
||||
class="button checkorder"
|
||||
@tap="toOrderList"
|
||||
>
|
||||
查看订单
|
||||
</text>
|
||||
<text
|
||||
class="button payagain"
|
||||
@tap="payAgain"
|
||||
>
|
||||
重新支付
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="sts == 1">
|
||||
<view class="pay-sts succ">
|
||||
支付成功
|
||||
</view>
|
||||
<view class="tips">
|
||||
感谢您的购买
|
||||
</view>
|
||||
<view class="btns">
|
||||
<text
|
||||
class="button checkorder"
|
||||
@tap="toOrderList"
|
||||
>
|
||||
查看订单
|
||||
</text>
|
||||
<text
|
||||
class="button shopcontinue"
|
||||
@tap="toIndex"
|
||||
>
|
||||
继续购物
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const sts = ref(0)
|
||||
const orderNumbers = ref('')
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad((options) => {
|
||||
sts.value = options.sts
|
||||
orderNumbers.value = options.orderNumbers
|
||||
})
|
||||
|
||||
const toOrderList = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/orderList/orderList?sts=0'
|
||||
})
|
||||
}
|
||||
const toIndex = () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
const payAgain = () => {
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
http.request({
|
||||
url: '/p/order/pay',
|
||||
method: 'POST',
|
||||
data: {
|
||||
payType: 1,
|
||||
orderNumbers: orderNumbers.value
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
uni.hideLoading()
|
||||
uni.requestPayment({
|
||||
timeStamp: data.timeStamp,
|
||||
nonceStr: data.nonceStr,
|
||||
package: data.packageValue,
|
||||
signType: data.signType,
|
||||
paySign: data.paySign,
|
||||
success: () => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/pay-result/pay-result?sts=1&orderNum=' + orderNumbers.value
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './pay-result.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
.container {
|
||||
background: #fff;
|
||||
margin: 7px;
|
||||
}
|
||||
.line-fix {
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background: #e1e1e1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
.tit-background {
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.prod-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/* 空 */
|
||||
.empty {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-top: 20vh;
|
||||
text-align: center;
|
||||
}
|
||||
232
front-end/mall4uni/src/pages/prod-classify/prod-classify.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view>
|
||||
<block
|
||||
v-for="(item, index) in prodList"
|
||||
:key="index"
|
||||
>
|
||||
<production :item="item" />
|
||||
</block>
|
||||
<view
|
||||
v-if="!prodList.length"
|
||||
class="empty"
|
||||
>
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const sts = ref(0)
|
||||
const title = ref('')
|
||||
const current = ref(1)
|
||||
const size = ref(10)
|
||||
const pages = ref(0)
|
||||
const tagid = ref(0)
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad((options) => {
|
||||
current.value = 1
|
||||
pages.value = 0
|
||||
sts.value = options.sts
|
||||
title.value = options.title ? options.title : ''
|
||||
|
||||
if (options.tagid) {
|
||||
tagid.value = options.tagid
|
||||
}
|
||||
|
||||
if (sts.value == 0) {
|
||||
if (options.tagid == 1) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '每日上新'
|
||||
})
|
||||
} else if (options.tagid == 2) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '商城热卖'
|
||||
})
|
||||
} else if (options.tagid == 3) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '更多宝贝'
|
||||
})
|
||||
}
|
||||
} else if (sts.value == 1) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '新品推荐'
|
||||
})
|
||||
} else if (sts.value == 2) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '限时特惠'
|
||||
})
|
||||
} else if (sts.value == 3) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '每日疯抢'
|
||||
})
|
||||
} else if (sts.value == 4) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '优惠券活动商品'
|
||||
})
|
||||
} else if (sts.value == 5) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '我的收藏商品'
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: title.value
|
||||
})
|
||||
}
|
||||
|
||||
loadProdData(options)
|
||||
})
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom(() => {
|
||||
if (current.value < pages.value) {
|
||||
current.value = current.value + 1
|
||||
loadProdData()
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 加载商品数据
|
||||
*/
|
||||
const loadProdData = (options) => {
|
||||
const stsParam = sts.value
|
||||
|
||||
if (stsParam == 0) {
|
||||
// 分组标签商品列表
|
||||
getTagProd()
|
||||
} else if (stsParam == 1) {
|
||||
// 新品推荐
|
||||
const url = '/prod/lastedProdPage'
|
||||
getActProd(url)
|
||||
} else if (stsParam == 2) {
|
||||
// 限时特惠
|
||||
const url = '/prod/discountProdList'
|
||||
getActProd(url)
|
||||
} else if (stsParam == 3) {
|
||||
// 每日疯抢
|
||||
const url = '/prod/moreBuyProdList'
|
||||
getActProd(url)
|
||||
} else if (stsParam == 4) {
|
||||
// 优惠券商品列表
|
||||
getProdByCouponId(options.tagid)
|
||||
} else if (stsParam == 5) {
|
||||
// 收藏商品列表
|
||||
getCollectionProd()
|
||||
}
|
||||
}
|
||||
|
||||
const prodList = ref([])
|
||||
const getActProd = (url) => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url,
|
||||
method: 'GET',
|
||||
data: {
|
||||
current: current.value,
|
||||
size: size.value
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
let list
|
||||
if (data.current === 1) {
|
||||
list = data.records
|
||||
} else {
|
||||
list = prodList.value
|
||||
list = list.concat(data.records)
|
||||
}
|
||||
prodList.value = list
|
||||
pages.value = data.pages
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取我的收藏商品
|
||||
*/
|
||||
const getCollectionProd = () => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/p/user/collection/prods',
|
||||
method: 'GET',
|
||||
data: {
|
||||
current: current.value,
|
||||
size: size.value
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
let list
|
||||
if (data.current == 1) {
|
||||
list = data.records
|
||||
} else {
|
||||
list = prodList.value
|
||||
list = list.concat(data.records)
|
||||
}
|
||||
prodList.value = list
|
||||
pages.value = data.pages
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取标签列表
|
||||
*/
|
||||
const getTagProd = () => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/prod/prodListByTagId',
|
||||
method: 'GET',
|
||||
data: {
|
||||
tagId: tagid.value,
|
||||
current: current.value,
|
||||
size: size.value
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
let list
|
||||
if (data.current === 1) {
|
||||
list = data.records
|
||||
} else {
|
||||
list = prodList.value.concat(data.records)
|
||||
}
|
||||
prodList.value = list
|
||||
pages.value = data.pages
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取优惠券商品列表
|
||||
*/
|
||||
const getProdByCouponId = (id) => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/coupon/prodListByCouponId',
|
||||
method: 'GET',
|
||||
data: {
|
||||
couponId: id,
|
||||
current: current.value,
|
||||
size: size.value
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
let list
|
||||
if (data.current === 1) {
|
||||
list = data.records
|
||||
} else {
|
||||
list = prodList.value.concat(data.records)
|
||||
}
|
||||
prodList.value = list
|
||||
pages.value = data.pages
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './prod-classify.scss';
|
||||
</style>
|
||||
628
front-end/mall4uni/src/pages/prod/prod.scss
Normal file
@@ -0,0 +1,628 @@
|
||||
.container {
|
||||
background: #f4f4f4;
|
||||
height: 100%;
|
||||
padding-bottom: 150rpx;
|
||||
}
|
||||
swiper {
|
||||
height: 750rpx;
|
||||
width: 100%;
|
||||
border-bottom: 2rpx solid #f8f8f8;
|
||||
image {
|
||||
height: 750rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.prod-info {
|
||||
padding: 30rpx 30rpx 0 30rpx;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
}
|
||||
.tit-wrap {
|
||||
position: relative;
|
||||
line-height: 40rpx;
|
||||
padding-right: 104rpx;
|
||||
.col {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 80rpx;
|
||||
color: #666;
|
||||
font-size: 20rpx;
|
||||
padding-left: 20rpx;
|
||||
text-align: center;
|
||||
image {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: auto;
|
||||
background: #f1f1f1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 5px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.prod-tit {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
.sales-p {
|
||||
background: #fff;
|
||||
line-height: 40rpx;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
margin-top: 6rpx;
|
||||
margin-right: 104rpx;
|
||||
}
|
||||
.prod-price {
|
||||
font-size: 30rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
.price {
|
||||
color: #eb2444;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.price-num {
|
||||
font-size: 46rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
.ori-price {
|
||||
font-size: 25rpx;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.sales {
|
||||
color: #999;
|
||||
}
|
||||
.more {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
width: 60rpx;
|
||||
top: 10rpx;
|
||||
text-align: right;
|
||||
font-size: 40rpx;
|
||||
color: #999;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.sku {
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.sku-tit {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 60rpx;
|
||||
left: 20rpx;
|
||||
font-size: 22rpx;
|
||||
top: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
.sku-con {
|
||||
margin: 0 80rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cmt-wrap {
|
||||
background: #fff;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.cmt-tit {
|
||||
font-size: 32rpx;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 20rpx;
|
||||
}
|
||||
.cmt-t {
|
||||
width: 300rpx;
|
||||
}
|
||||
.cmt-good {
|
||||
color: #eb2444;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.cmt-count {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
.cmt-more {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-top: 2rpx solid #999;
|
||||
border-right: 2rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 10rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
.cmt-cont {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.cmt-tag {
|
||||
position: relative;
|
||||
padding: 14px 3px 0 0;
|
||||
margin: 0;
|
||||
text {
|
||||
margin: 0 10px 10px 0;
|
||||
background: #fdf0f0;
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
height: 25px;
|
||||
border-radius: 3px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
font-family: -apple-system, Helvetica, sans-serif;
|
||||
color: #666;
|
||||
}
|
||||
text.selected {
|
||||
color: #fff;
|
||||
background: #e93b3d;
|
||||
}
|
||||
}
|
||||
.cmt-item {
|
||||
position: relative;
|
||||
padding: 10px 0;
|
||||
&::after {
|
||||
content: "";
|
||||
height: 0;
|
||||
display: block;
|
||||
border-bottom: 1px solid #ddd;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: -10px;
|
||||
border-bottom-color: #e5e5e5;
|
||||
}
|
||||
}
|
||||
.cmt-items {
|
||||
.empty {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
}
|
||||
.cmt-user {
|
||||
line-height: 25px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
.user-img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.nickname {
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
max-width: 8.2em;
|
||||
height: 25px;
|
||||
line-height: 27px;
|
||||
}
|
||||
.date {
|
||||
float: right;
|
||||
color: #999;
|
||||
margin-left: -60px;
|
||||
}
|
||||
}
|
||||
.cmt-user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 400rpx;
|
||||
}
|
||||
.cmt-cnt {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
position: relative;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
margin: 5px 0;
|
||||
word-break: break-all;
|
||||
max-height: 126px;
|
||||
}
|
||||
.cmt-attr {
|
||||
height: 85px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
image {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 2px;
|
||||
background: #f3f3f3;
|
||||
}
|
||||
}
|
||||
.cmt-more-v {
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
font-size: 12px;
|
||||
text {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
padding: 0px 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 40px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.cmt-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 998;
|
||||
background-color: #fff;
|
||||
padding-bottom: 98rpx;
|
||||
.cmt-cont {
|
||||
height: calc(100% - 80rpx);
|
||||
overflow: auto;
|
||||
}
|
||||
.cmt-cnt {
|
||||
-webkit-line-clamp: 20;
|
||||
max-height: 500px;
|
||||
}
|
||||
.load-more {
|
||||
font-size: 14px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
text {
|
||||
border: 1px solid #ddd;
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cmt-reply {
|
||||
font-size: 14px;
|
||||
border-top: 1px dashed #ddd;
|
||||
padding: 5px 0;
|
||||
.reply-tit {
|
||||
color: #eb2444;
|
||||
}
|
||||
}
|
||||
.prod-detail {
|
||||
background: #fff;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
line-height: 48rpx;
|
||||
image {
|
||||
width: 750rpx !important;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
rich-text {
|
||||
image {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
:deep(.img) {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
.cart-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
height: 98rpx;
|
||||
z-index: 999;
|
||||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
|
||||
.btn {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 0;
|
||||
background-color: #fff;
|
||||
font-size: 28rpx;
|
||||
flex-flow: column;
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 62rpx;
|
||||
display: inline-block;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 14rpx;
|
||||
background-color: #eb2444;
|
||||
text-align: center;
|
||||
line-height: 28rpx;
|
||||
font-size: 18rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.badge-1 {
|
||||
width: 36rpx;
|
||||
}
|
||||
}
|
||||
.btn.icon {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: 125rpx;
|
||||
font-size: 20rpx;
|
||||
color: #666;
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
.btn.cart {
|
||||
background: #584e61;
|
||||
color: #fff;
|
||||
}
|
||||
.btn.buy {
|
||||
background: #eb2444;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.close {
|
||||
color: #aaa;
|
||||
border-radius: 12px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
font-size: 18px;
|
||||
padding: 1px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
&::before {
|
||||
content: "\2716";
|
||||
}
|
||||
}
|
||||
.popup-cnt {
|
||||
max-height: 429px;
|
||||
overflow: auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.pup-sku {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.pup-sku-main {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 375px;
|
||||
max-height: 475px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.pup-sku-header {
|
||||
position: relative;
|
||||
line-height: 46px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
height: 70px;
|
||||
padding: 0 0 10px 110px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.pup-sku-img {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: -20px;
|
||||
border-radius: 2px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border: 0 none;
|
||||
vertical-align: top;
|
||||
}
|
||||
.pup-sku-price {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: #e4393c;
|
||||
font-size: 10px;
|
||||
}
|
||||
.pup-sku-price-int {
|
||||
font-size: 16px;
|
||||
}
|
||||
.pup-sku-prop {
|
||||
word-break: break-all;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
line-height: 1.4em;
|
||||
padding-right: 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text {
|
||||
color: #999;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.pup-sku-body {
|
||||
box-sizing: border-box;
|
||||
max-height: 379px;
|
||||
padding-bottom: 100px;
|
||||
overflow: auto;
|
||||
}
|
||||
.pup-sku-area {
|
||||
.sku-kind {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin: 0 10px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.sku-choose {
|
||||
overflow: hidden;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
.sku-choose-item {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
min-width: 20px;
|
||||
max-width: 270px;
|
||||
overflow: hidden;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
background-color: #f7f7f7;
|
||||
font-size: 14px;
|
||||
}
|
||||
.sku-choose-item.active {
|
||||
background-color: #eb2444;
|
||||
color: #fff;
|
||||
}
|
||||
.sku-choose-item.gray {
|
||||
background-color: #f9f9f9;
|
||||
color: #ddd;
|
||||
}
|
||||
.pup-sku-count {
|
||||
padding: 0 10px 13px;
|
||||
font-size: 12px;
|
||||
.count-name {
|
||||
color: #999;
|
||||
height: 31px;
|
||||
line-height: 31px;
|
||||
width: 100rpx;
|
||||
}
|
||||
.num-wrap {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
width: 110px;
|
||||
float: right;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
}
|
||||
.text-wrap {
|
||||
position: relative;
|
||||
width: 45px;
|
||||
z-index: 0;
|
||||
margin: 0 1px;
|
||||
input {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.num-wrap {
|
||||
.minus {
|
||||
position: relative;
|
||||
max-width: 30px;
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: #f7f7f7;
|
||||
text-align: center;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
.plus {
|
||||
position: relative;
|
||||
max-width: 30px;
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: #f7f7f7;
|
||||
text-align: center;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
.row {
|
||||
border-radius: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
margin-top: -1px;
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
.col {
|
||||
border-radius: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -1px;
|
||||
margin-top: -7px;
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background-color: #999;
|
||||
}
|
||||
}
|
||||
.pup-sku-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row nowrap;
|
||||
height: 98rpx;
|
||||
z-index: 999;
|
||||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
|
||||
.btn {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 0;
|
||||
background-color: #fff;
|
||||
font-size: 28rpx;
|
||||
flex-flow: column;
|
||||
}
|
||||
.btn.cart {
|
||||
background: #584e61;
|
||||
color: #fff;
|
||||
}
|
||||
.btn.buy {
|
||||
background: #eb2444;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
875
front-end/mall4uni/src/pages/prod/prod.vue
Normal file
@@ -0,0 +1,875 @@
|
||||
<template>
|
||||
<!-- 商品详情 -->
|
||||
<view class="container">
|
||||
<!-- 轮播图 -->
|
||||
<swiper
|
||||
:indicator-dots="indicatorDots"
|
||||
:autoplay="autoplay"
|
||||
:indicator-color="indicatorColor"
|
||||
:interval="interval"
|
||||
:duration="duration"
|
||||
:indicator-active-color="indicatorActiveColor"
|
||||
>
|
||||
<block
|
||||
v-for="(item, index) in imgs"
|
||||
:key="index"
|
||||
>
|
||||
<swiper-item>
|
||||
<image :src="item" />
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<!-- end 轮播图 -->
|
||||
<!-- 商品信息 -->
|
||||
<view class="prod-info">
|
||||
<view class="tit-wrap">
|
||||
<view class="prod-tit">
|
||||
{{ prodName }}
|
||||
</view>
|
||||
<view
|
||||
class="col"
|
||||
@tap="addOrCannelCollection"
|
||||
>
|
||||
<image
|
||||
v-if="!isCollection"
|
||||
src="@/static/images/icon/prod-col.png"
|
||||
/>
|
||||
<image
|
||||
v-if="isCollection"
|
||||
src="@/static/images/icon/prod-col-red.png"
|
||||
/>
|
||||
收藏
|
||||
</view>
|
||||
</view>
|
||||
<view class="sales-p">
|
||||
{{ brief }}
|
||||
</view>
|
||||
<view class="prod-price">
|
||||
<text
|
||||
v-if="defaultSku && defaultSku.price"
|
||||
class="price"
|
||||
>
|
||||
¥
|
||||
<text class="price-num">
|
||||
{{ wxs.parsePrice(defaultSku.price)[0] }}
|
||||
</text>
|
||||
.{{ wxs.parsePrice(defaultSku.price)[1] }}
|
||||
</text>
|
||||
<text
|
||||
v-if="defaultSku && defaultSku.oriPrice"
|
||||
class="ori-price"
|
||||
>
|
||||
¥{{ wxs.parsePrice(defaultSku.oriPrice)[0] }}.{{ wxs.parsePrice(defaultSku.oriPrice)[1] }}
|
||||
</text>
|
||||
<text class="sales" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 已选规格 -->
|
||||
<view
|
||||
class="sku"
|
||||
@tap="showSku"
|
||||
>
|
||||
<view class="sku-tit">
|
||||
已选
|
||||
</view>
|
||||
<view class="sku-con">
|
||||
{{ selectedProp.length > 0 ? selectedProp + ',' : '' }}{{ prodNum }}件
|
||||
</view>
|
||||
<view class="more">
|
||||
...
|
||||
</view>
|
||||
</view>
|
||||
<!-- 评价 -->
|
||||
<view class="cmt-wrap">
|
||||
<view
|
||||
class="cmt-tit"
|
||||
@tap="showComment"
|
||||
>
|
||||
<view class="cmt-t">
|
||||
评价
|
||||
<text class="cmt-good">
|
||||
好评{{ prodCommData.positiveRating }}%
|
||||
</text>
|
||||
</view>
|
||||
<view class="cmt-count">
|
||||
共{{ prodCommData.number }}条
|
||||
<text class="cmt-more" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="cmt-cont">
|
||||
<view
|
||||
class="cmt-tag"
|
||||
@tap="showComment"
|
||||
>
|
||||
<text>全部({{ prodCommData.number }})</text>
|
||||
<text>好评({{ prodCommData.praiseNumber }})</text>
|
||||
<text>中评({{ prodCommData.secondaryNumber }})</text>
|
||||
<text>差评({{ prodCommData.negativeNumber }})</text>
|
||||
<text>有图({{ prodCommData.picNumber }})</text>
|
||||
</view>
|
||||
<view class="cmt-items">
|
||||
<view
|
||||
v-for="(item, index) in littleCommPage"
|
||||
:key="index"
|
||||
class="cmt-item"
|
||||
>
|
||||
<view class="cmt-user">
|
||||
<text class="date">
|
||||
{{ item.recTime }}
|
||||
</text>
|
||||
<view class="cmt-user-info">
|
||||
<image
|
||||
class="user-img"
|
||||
:src="item.pic"
|
||||
/>
|
||||
<view class="nickname">
|
||||
{{ item.nickName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cmt-cnt">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
<scroll-view
|
||||
v-if="item.pics.length"
|
||||
class="cmt-attr"
|
||||
scroll-x="true"
|
||||
>
|
||||
<image
|
||||
v-for="(commPic, index2) in item.pics"
|
||||
:key="index2"
|
||||
:src="commPic"
|
||||
/>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="prodCommPage.records.length > 2"
|
||||
class="cmt-more-v"
|
||||
>
|
||||
<text @tap="showComment">
|
||||
查看全部评价
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品详情 -->
|
||||
<view class="prod-detail">
|
||||
<view>
|
||||
<rich-text :nodes="content" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- end 商品详情 -->
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="cart-footer">
|
||||
<view
|
||||
class="btn icon"
|
||||
@tap="toHomePage"
|
||||
>
|
||||
<image src="@/static/images/tabbar/homepage.png" />
|
||||
首页
|
||||
</view>
|
||||
<view
|
||||
class="btn icon"
|
||||
@tap="toCartPage"
|
||||
>
|
||||
<image src="@/static/images/tabbar/basket.png" />
|
||||
购物车
|
||||
<view
|
||||
v-if="totalCartNum>0"
|
||||
class="badge badge-1"
|
||||
>
|
||||
{{ totalCartNum }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="btn cart"
|
||||
@tap="showSku"
|
||||
>
|
||||
<text>加入购物车</text>
|
||||
</view>
|
||||
<view
|
||||
class="btn buy"
|
||||
@tap="showSku"
|
||||
>
|
||||
<text>立即购买</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end 底部按钮 -->
|
||||
|
||||
<!-- 规格弹窗 -->
|
||||
<view
|
||||
v-if="skuShow"
|
||||
class="pup-sku"
|
||||
>
|
||||
<view class="pup-sku-main">
|
||||
<view class="pup-sku-header">
|
||||
<image
|
||||
class="pup-sku-img"
|
||||
:src="defaultSku.pic?defaultSku.pic:pic"
|
||||
/>
|
||||
<view class="pup-sku-price">
|
||||
¥
|
||||
<text
|
||||
v-if="defaultSku && defaultSku.price"
|
||||
class="pup-sku-price-int"
|
||||
>
|
||||
{{ wxs.parsePrice(defaultSku.price)[0] }}
|
||||
</text>
|
||||
.{{ wxs.parsePrice(defaultSku.price)[1] }}
|
||||
</view>
|
||||
<view class="pup-sku-prop">
|
||||
<text>已选</text>
|
||||
{{ selectedProp.length > 0 ? selectedProp + ',' : '' }}{{ prodNum }}件
|
||||
</view>
|
||||
<view
|
||||
class="close"
|
||||
@tap="closePopup"
|
||||
/>
|
||||
</view>
|
||||
<view class="pup-sku-body">
|
||||
<view class="pup-sku-area">
|
||||
<view
|
||||
v-if="skuList.length"
|
||||
class="sku-box"
|
||||
>
|
||||
<block
|
||||
v-for="(skuGroupItem, skuGroupItemIndex) in skuGroupList"
|
||||
:key="skuGroupItemIndex"
|
||||
>
|
||||
<view
|
||||
v-for="(skuLine, key) in skuGroupItem"
|
||||
:key="key"
|
||||
class="items sku-text"
|
||||
>
|
||||
<text class="sku-kind">
|
||||
{{ key }}
|
||||
</text>
|
||||
<view class="con">
|
||||
<text
|
||||
v-for="skuLineItem in skuLine"
|
||||
:key="skuLineItem"
|
||||
class="sku-choose-item"
|
||||
:class="[selectedPropList.indexOf(key + ':' + skuLineItem) !== -1?'active':'',
|
||||
isSkuLineItemNotOptional(allProperties,selectedPropObj,key,skuLineItem,propKeys)? 'dashed' : '']"
|
||||
@click="toChooseItem(skuGroupItemIndex, skuLineItem, key)"
|
||||
>
|
||||
{{ skuLineItem }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pup-sku-count">
|
||||
<view class="num-wrap">
|
||||
<view
|
||||
class="minus"
|
||||
@tap="onCountMinus"
|
||||
>
|
||||
<text class="row" />
|
||||
</view>
|
||||
<view class="text-wrap">
|
||||
<input
|
||||
type="number"
|
||||
:value="prodNum"
|
||||
disabled
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
class="plus"
|
||||
@tap="onCountPlus"
|
||||
>
|
||||
<text class="row" />
|
||||
<text class="col" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="count-name">
|
||||
数量
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pup-sku-footer">
|
||||
<view
|
||||
class="btn cart"
|
||||
@tap="addToCart"
|
||||
>
|
||||
加入购物车
|
||||
</view>
|
||||
<view
|
||||
class="btn buy"
|
||||
@tap="buyNow"
|
||||
>
|
||||
立即购买
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 评价弹窗 -->
|
||||
<view
|
||||
v-if="commentShow"
|
||||
class="cmt-popup"
|
||||
>
|
||||
<view class="cmt-tit">
|
||||
<view class="cmt-t">
|
||||
商品评价
|
||||
<text class="cmt-good">
|
||||
好评度{{ prodCommData.positiveRating }}%
|
||||
</text>
|
||||
</view>
|
||||
<text
|
||||
class="close"
|
||||
@tap="closePopup"
|
||||
/>
|
||||
</view>
|
||||
<view class="cmt-cont">
|
||||
<view class="cmt-tag">
|
||||
<text
|
||||
data-evaluate="-1"
|
||||
:class="evaluate==-1?'selected':''"
|
||||
@tap="getProdCommPage"
|
||||
>
|
||||
全部({{ prodCommData.number }})
|
||||
</text>
|
||||
<text
|
||||
data-evaluate="0"
|
||||
:class="evaluate==0?'selected':''"
|
||||
@tap="getProdCommPage"
|
||||
>
|
||||
好评({{ prodCommData.praiseNumber }})
|
||||
</text>
|
||||
<text
|
||||
data-evaluate="1"
|
||||
:class="evaluate==1?'selected':''"
|
||||
@tap="getProdCommPage"
|
||||
>
|
||||
中评({{ prodCommData.secondaryNumber }})
|
||||
</text>
|
||||
<text
|
||||
data-evaluate="2"
|
||||
:class="evaluate==2?'selected':''"
|
||||
@tap="getProdCommPage"
|
||||
>
|
||||
差评({{ prodCommData.negativeNumber }})
|
||||
</text>
|
||||
<text
|
||||
data-evaluate="3"
|
||||
:class="evaluate==3?'selected':''"
|
||||
@tap="getProdCommPage"
|
||||
>
|
||||
有图({{ prodCommData.picNumber }})
|
||||
</text>
|
||||
</view>
|
||||
<view class="cmt-items">
|
||||
<block v-if="prodCommPage.records.length">
|
||||
<view
|
||||
v-for="(item, index) in prodCommPage.records"
|
||||
:key="index"
|
||||
class="cmt-item"
|
||||
>
|
||||
<view class="cmt-user">
|
||||
<text class="date">
|
||||
{{ item.recTime }}
|
||||
</text>
|
||||
<view class="cmt-user-info">
|
||||
<image
|
||||
class="user-img"
|
||||
:src="item.pic"
|
||||
/>
|
||||
<view class="nickname">
|
||||
{{ item.nickName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cmt-cnt">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
<scroll-view
|
||||
v-if="item.pics.length"
|
||||
class="cmt-attr"
|
||||
scroll-x="true"
|
||||
>
|
||||
<image
|
||||
v-for="(commPic, index2) in item.pics"
|
||||
:key="index2"
|
||||
:src="commPic"
|
||||
/>
|
||||
</scroll-view>
|
||||
<view
|
||||
v-if="item.replyContent"
|
||||
class="cmt-reply"
|
||||
>
|
||||
<text class="reply-tit">
|
||||
店铺回复:
|
||||
</text>
|
||||
{{ item.replyContent }}
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view
|
||||
v-if="!prodCommPage.records.length"
|
||||
class="empty"
|
||||
>
|
||||
暂无评价
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="prodCommPage.pages > prodCommPage.current"
|
||||
class="load-more"
|
||||
>
|
||||
<text @tap="getMoreCommPage">
|
||||
点击加载更多
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const wxs = number()
|
||||
|
||||
const indicatorDots = ref(true)
|
||||
const indicatorColor = ref('#f2f2f2')
|
||||
const indicatorActiveColor = ref('#eb2444')
|
||||
const autoplay = ref(true)
|
||||
const interval = ref(3000)
|
||||
const duration = ref(1000)
|
||||
const selectedProp = ref([])
|
||||
let prodId = 0
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad((options) => {
|
||||
prodId = options.prodid// 加载商品信息
|
||||
getProdInfo() // 加载商品数据
|
||||
getProdCommData() // 加载评论项
|
||||
getLittleProdComm() // 查看用户是否关注
|
||||
getCollection()
|
||||
})
|
||||
|
||||
const app = getApp()
|
||||
const totalCartNum = ref(0)
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow(() => {
|
||||
totalCartNum.value = app.globalData.totalCartCount
|
||||
})
|
||||
|
||||
/**
|
||||
* 分享设置
|
||||
*/
|
||||
onShareAppMessage(() => {
|
||||
return {
|
||||
title: prodName.value,
|
||||
path: '/pages/prod/prod?prodid=' + prodId
|
||||
}
|
||||
})
|
||||
|
||||
const isCollection = ref(false)
|
||||
/**
|
||||
* 获取是否关注信息
|
||||
*/
|
||||
const getCollection = () => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/p/user/collection/isCollection',
|
||||
method: 'GET',
|
||||
data: {
|
||||
prodId
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
isCollection.value = data
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加或者取消收藏商品
|
||||
*/
|
||||
const addOrCannelCollection = () => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/p/user/collection/addOrCancel',
|
||||
method: 'POST',
|
||||
data: prodId
|
||||
})
|
||||
.then(() => {
|
||||
isCollection.value = !isCollection.value
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
const skuList = ref([])
|
||||
const brief = ref('')
|
||||
const prodNum = ref(1)
|
||||
const pic = ref('')
|
||||
const imgs = ref('')
|
||||
const prodName = ref('')
|
||||
const price = ref(0)
|
||||
const content = ref('')
|
||||
/**
|
||||
* 获取商品信息
|
||||
*/
|
||||
const getProdInfo = () => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/prod/prodInfo',
|
||||
method: 'GET',
|
||||
data: {
|
||||
prodId // userType: 0
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
uni.hideLoading()
|
||||
if (!data) {
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
return
|
||||
}
|
||||
imgs.value = data.imgs?.split(',')
|
||||
content.value = util.formatHtml(data.content)
|
||||
price.value = data.price
|
||||
prodName.value = data.prodName
|
||||
prodId = data.prodId
|
||||
brief.value = data.brief
|
||||
skuList.value = data.skuList
|
||||
pic.value = data.pic
|
||||
// 组装sku
|
||||
groupSkuProp(data.skuList, data.price)
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
const prodCommData = ref({})
|
||||
const getProdCommData = () => {
|
||||
http.request({
|
||||
url: '/prodComm/prodCommData',
|
||||
method: 'GET',
|
||||
data: {
|
||||
prodId
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
prodCommData.value = data
|
||||
})
|
||||
}
|
||||
|
||||
const prodCommPage = ref({
|
||||
current: 0,
|
||||
pages: 0,
|
||||
records: []
|
||||
})
|
||||
/**
|
||||
* 获取部分评论
|
||||
*/
|
||||
const getLittleProdComm = () => {
|
||||
if (prodCommPage.value.records.length) {
|
||||
return
|
||||
}
|
||||
getProdCommPage()
|
||||
}
|
||||
|
||||
const getMoreCommPage = () => {
|
||||
getProdCommPage()
|
||||
}
|
||||
|
||||
const littleCommPage = ref([])
|
||||
const evaluate = ref(-1)
|
||||
/**
|
||||
* 获取分页获取评论
|
||||
*/
|
||||
const getProdCommPage = (e) => {
|
||||
if (e) {
|
||||
if (e.currentTarget.dataset.evaluate === evaluate.value) {
|
||||
return
|
||||
}
|
||||
prodCommPage.value = {
|
||||
current: 0,
|
||||
pages: 0,
|
||||
records: []
|
||||
}
|
||||
evaluate.value = e.currentTarget.dataset.evaluate
|
||||
}
|
||||
|
||||
http.request({
|
||||
url: '/prodComm/prodCommPageByProd',
|
||||
method: 'GET',
|
||||
data: {
|
||||
prodId,
|
||||
size: 10,
|
||||
current: prodCommPage.value.current + 1,
|
||||
evaluate: evaluate.value
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
data.records.forEach(item => {
|
||||
if (item.pics) {
|
||||
item.pics = item.pics.split(',')
|
||||
}
|
||||
})
|
||||
let records = prodCommPage.value.records
|
||||
records = records.concat(data.records)
|
||||
// 如果商品详情中没有评论的数据,截取两条到商品详情页商品详情
|
||||
prodCommPage.value = {
|
||||
current: data.current,
|
||||
pages: data.pages,
|
||||
records
|
||||
}
|
||||
if (!littleCommPage.value.length) {
|
||||
littleCommPage.value = records.slice(0, 2)
|
||||
}
|
||||
})
|
||||
}
|
||||
let selectedPropObjList = null
|
||||
const skuGroup = ref({})
|
||||
const defaultSku = ref(null)
|
||||
const selectedPropObj = ref({})
|
||||
const propKeys = ref([])
|
||||
const allProperties = ref([])
|
||||
const findSku = ref(true)
|
||||
const skuGroupList = ref([])
|
||||
/**
|
||||
* 组装SKU
|
||||
*/
|
||||
const groupSkuProp = (skuList, defaultPrice) => {
|
||||
if (skuList.length === 1 && !skuList[0].properties) {
|
||||
defaultSku.value = skuList[0]
|
||||
findSku.value = true
|
||||
return
|
||||
}
|
||||
const _skuGroupList = []
|
||||
const skuGroupParam = {}
|
||||
const _allProperties = []
|
||||
const _propKeys = []
|
||||
const _selectedPropObj = {}
|
||||
const selectedPropObjListParam = []
|
||||
|
||||
let defaultSkuParam = null
|
||||
for (let i = 0; i < skuList.length; i++) {
|
||||
let isDefault = false
|
||||
if (!defaultSkuParam && skuList[i].price == defaultPrice) {
|
||||
defaultSkuParam = skuList[i]
|
||||
isDefault = true
|
||||
}
|
||||
const properties = skuList[i].properties // 版本:公开版;颜色:金色;内存:64GB
|
||||
_allProperties.push(properties)
|
||||
const propList = properties.split(';') // ["版本:公开版","颜色:金色","内存:64GB"]
|
||||
for (let j = 0; j < propList.length; j++) {
|
||||
const propval = propList[j].split(':') // ["版本","公开版"]
|
||||
let props = skuGroupParam[propval[0]] // 先取出 版本对应的值数组
|
||||
// 如果当前是默认选中的sku,把对应的属性值 组装到selectedProp
|
||||
if (isDefault) {
|
||||
_propKeys.push(propval[0])
|
||||
_selectedPropObj[propval[0]] = propval[1]
|
||||
const selectedPropObjItem = {}
|
||||
selectedPropObjItem[propval[0]] = propval[1]
|
||||
selectedPropObjListParam.push(selectedPropObjItem)
|
||||
}
|
||||
if (!props) {
|
||||
props = [] // 假设还没有版本,新建个新的空数组
|
||||
props.push(propval[1]) // 把 "公开版" 放进空数组
|
||||
} else {
|
||||
if (props.indexOf(propval[1]) === -1) { // 如果数组里面没有"公开版"
|
||||
props.push(propval[1]) // 把 "公开版" 放进数组
|
||||
}
|
||||
}
|
||||
skuGroupParam[propval[0]] = props // 最后把数据 放回版本对应的值
|
||||
const propListItem = {}
|
||||
propListItem[propval[0]] = props
|
||||
_skuGroupList.push(propListItem)
|
||||
}
|
||||
}
|
||||
defaultSku.value = defaultSkuParam
|
||||
propKeys.value = _propKeys
|
||||
selectedPropObj.value = _selectedPropObj
|
||||
skuGroup.value = skuGroupParam
|
||||
selectedPropObjList = selectedPropObjListParam
|
||||
skuGroupList.value = unique(_skuGroupList)
|
||||
allProperties.value = _allProperties
|
||||
parseSelectedObjToVals(skuList)
|
||||
}
|
||||
|
||||
const selectedPropList = ref(null)
|
||||
/**
|
||||
* 将已选的 {key:val,key2:val2}转换成 [val,val2]
|
||||
*/
|
||||
const parseSelectedObjToVals = (skuList) => {
|
||||
const selectedPropObjListParam = selectedPropObjList
|
||||
let selectedPropertiesParam = ''
|
||||
const selectedPropListParam = []
|
||||
const selectedPropShowListParam = []
|
||||
for (let i = 0; i < selectedPropObjListParam.length; i++) {
|
||||
const selectedPropObjItem = selectedPropObjListParam[i]
|
||||
for (const key in selectedPropObjItem) {
|
||||
if (Object.hasOwnProperty.call(selectedPropObjItem, key)) {
|
||||
selectedPropListParam.push(key + ':' + selectedPropObjItem[key])
|
||||
selectedPropShowListParam.push(selectedPropObjItem[key])
|
||||
selectedPropertiesParam += key + ':' + selectedPropObjItem[key] + ';'
|
||||
}
|
||||
}
|
||||
}
|
||||
selectedPropertiesParam = selectedPropertiesParam.substring(0, selectedPropertiesParam.length - 1)
|
||||
selectedPropList.value = selectedPropListParam
|
||||
selectedPropObjList = selectedPropObjListParam
|
||||
let findSkuParam = false
|
||||
for (let i = 0; i < skuList.length; i++) {
|
||||
if (skuList[i].properties == selectedPropertiesParam) {
|
||||
findSkuParam = true
|
||||
defaultSku.value = skuList[i]
|
||||
break
|
||||
}
|
||||
}
|
||||
findSku.value = findSkuParam
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断当前的规格值 是否可以选
|
||||
*/
|
||||
const isSkuLineItemNotOptional = (allProperties, selectedPropObjParam, key, item, propKeys) => {
|
||||
const selectedPropObj = Object.assign({}, selectedPropObjParam)
|
||||
let properties = ''
|
||||
selectedPropObj[key] = item
|
||||
for (let j = 0; j < propKeys.length; j++) {
|
||||
properties += propKeys[j] + ':' + selectedPropObj[propKeys[j]] + ';'
|
||||
}
|
||||
properties = properties.substring(0, properties.length - 1)
|
||||
for (let i = 0; i < allProperties.length; i++) {
|
||||
if (properties == allProperties[i]) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < allProperties.length; i++) {
|
||||
if (allProperties[i].indexOf(item) >= 0) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* 规格点击事件
|
||||
*/
|
||||
const toChooseItem = (skuGroupItemIndex, skuLineItem, key) => {
|
||||
selectedPropObjList[skuGroupItemIndex][key] = skuLineItem
|
||||
selectedPropObj.value[key] = skuLineItem
|
||||
parseSelectedObjToVals(skuList.value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 去重
|
||||
*/
|
||||
const unique = (arr) => {
|
||||
const map = {}
|
||||
arr.forEach(item => {
|
||||
const obj = {}
|
||||
Object.keys(item).sort().map(key => (obj[key] = item[key]))
|
||||
map[JSON.stringify(obj)] = item
|
||||
})
|
||||
return Object.keys(map).map(key => JSON.parse(key))
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到首页
|
||||
*/
|
||||
const toHomePage = () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到购物车
|
||||
*/
|
||||
const toCartPage = () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/basket/basket'
|
||||
})
|
||||
}
|
||||
|
||||
const shopId = 1
|
||||
/**
|
||||
* 加入购物车
|
||||
*/
|
||||
const addToCart = () => {
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
http.request({
|
||||
url: '/p/shopCart/changeItem',
|
||||
method: 'POST',
|
||||
data: {
|
||||
basketId: 0,
|
||||
count: prodNum.value,
|
||||
prodId,
|
||||
shopId,
|
||||
skuId: defaultSku.value.skuId
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
totalCartNum.value = totalCartNum.value + prodNum.value
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '加入购物车成功',
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 立即购买
|
||||
*/
|
||||
const buyNow = () => {
|
||||
uni.setStorageSync('orderItem', JSON.stringify({
|
||||
prodId,
|
||||
skuId: defaultSku.value.skuId,
|
||||
prodCount: prodNum.value,
|
||||
shopId
|
||||
}))
|
||||
uni.navigateTo({
|
||||
url: '/pages/submit-order/submit-order?orderEntry=1'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 减数量
|
||||
*/
|
||||
const onCountMinus = () => {
|
||||
if (prodNum.value > 1) {
|
||||
prodNum.value = prodNum.value - 1
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 加数量
|
||||
*/
|
||||
const onCountPlus = () => {
|
||||
if (prodNum.value < 1000) {
|
||||
prodNum.value = prodNum.value + 1
|
||||
}
|
||||
}
|
||||
|
||||
const skuShow = ref(false)
|
||||
const showSku = () => {
|
||||
skuShow.value = true
|
||||
}
|
||||
|
||||
const commentShow = ref(false)
|
||||
const showComment = () => {
|
||||
commentShow.value = true
|
||||
}
|
||||
|
||||
const closePopup = () => {
|
||||
skuShow.value = false
|
||||
commentShow.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './prod.scss';
|
||||
</style>
|
||||
34
front-end/mall4uni/src/pages/recent-news/recent-news.scss
Normal file
@@ -0,0 +1,34 @@
|
||||
.recent-news {
|
||||
background: #fff;
|
||||
.news-item {
|
||||
padding: 20rpx 20rpx 0 20rpx;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: " ";
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background-color: #e1e1e1;
|
||||
left: 20rpx;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
.news-item-title {
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
}
|
||||
.news-item-date {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
.empty {
|
||||
display: block;
|
||||
padding-top: 200rpx;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
60
front-end/mall4uni/src/pages/recent-news/recent-news.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="recent-news">
|
||||
<block
|
||||
v-for="(item, index) in news"
|
||||
:key="index"
|
||||
>
|
||||
<view
|
||||
class="news-item"
|
||||
:data-id="item.id"
|
||||
@tap="toNewsDetail"
|
||||
>
|
||||
<view class="news-item-title">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<view class="news-item-date">
|
||||
{{ item.publishTime }}
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view
|
||||
v-if="!news || !news.length"
|
||||
class="empty"
|
||||
>
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const news = ref([])
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow(() => {
|
||||
// 加载公告
|
||||
http.request({
|
||||
url: '/shop/notice/noticeList',
|
||||
method: 'GET'
|
||||
})
|
||||
.then(({ data }) => {
|
||||
news.value = data.records
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* 跳转公告详情页
|
||||
* @param e
|
||||
*/
|
||||
const toNewsDetail = (e) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/news-detail/news-detail?id=' + e.currentTarget.dataset.id
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './recent-news.scss';
|
||||
</style>
|
||||
124
front-end/mall4uni/src/pages/register/register.scss
Normal file
@@ -0,0 +1,124 @@
|
||||
.con {
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
margin-top: 50px;
|
||||
}
|
||||
image {
|
||||
display: block;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin-bottom: 8%;
|
||||
}
|
||||
.login-form {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20%;
|
||||
}
|
||||
.authorized-btn {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background-color: #0ab906;
|
||||
border: 1rpx solid #0ab906;
|
||||
color: #fff;
|
||||
border-radius: 6rpx;
|
||||
font-size: 26rpx;
|
||||
padding: 8rpx;
|
||||
margin-top: 80rpx;
|
||||
border: 1rpx solid #0ab906;
|
||||
border-radius: 6rpx;
|
||||
font-size: 26rpx;
|
||||
padding: 8rpx;
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
.to-idx-btn {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background-color: #eeeeee;
|
||||
color: #333;
|
||||
border-radius: 6rpx;
|
||||
font-size: 26rpx;
|
||||
padding: 8rpx;
|
||||
margin-top: 30rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 26rpx;
|
||||
padding: 8rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.form-title {
|
||||
width: 100%;
|
||||
margin-bottom: 50rpx;
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
color: #00a0e9;
|
||||
margin-bottom: 50rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.item {
|
||||
display: block;
|
||||
margin-bottom: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.account {
|
||||
display: flex;
|
||||
background: #f8f8f8;
|
||||
padding: 15rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
align-items: center;
|
||||
input {
|
||||
padding-left: 20rpx;
|
||||
width: 75%;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
button {
|
||||
&::after {
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
.operate {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.to-register {
|
||||
font-size: 28rpx;
|
||||
color: #00AAFF;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.error {
|
||||
.error-text {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #e43130;
|
||||
text-align: left;
|
||||
margin-top: 10rpx;
|
||||
font-size: 28rpx;
|
||||
margin-top: 10rpx;
|
||||
.warning-icon {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
line-height: 26rpx;
|
||||
background: #e43130;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin-right: 12rpx;
|
||||
font-size: 22rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
line-height: 26rpx;
|
||||
margin-right: 12rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
166
front-end/mall4uni/src/pages/register/register.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<view class="register">
|
||||
<view class="con">
|
||||
<image src="@/static/logo.png" />
|
||||
<!-- 登录 -->
|
||||
<view class="login-form">
|
||||
<view :class="['item',errorTips==1? 'error':'']">
|
||||
<view class="account">
|
||||
<text class="input-item">
|
||||
账号
|
||||
</text>
|
||||
<input
|
||||
type="text"
|
||||
data-type="account"
|
||||
placeholder-class="inp-palcehoder"
|
||||
placeholder="请输入账号名称"
|
||||
@input="getInputVal"
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
v-if="errorTips==1"
|
||||
class="error-text"
|
||||
>
|
||||
<text class="warning-icon">
|
||||
!
|
||||
</text>
|
||||
请输入账号!
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['item',errorTips==2? 'error':'']">
|
||||
<view class="account">
|
||||
<text class="input-item">
|
||||
密码
|
||||
</text>
|
||||
<input
|
||||
type="password"
|
||||
data-type="password"
|
||||
placeholder-class="inp-palcehoder"
|
||||
placeholder="请输入密码"
|
||||
@input="getInputVal"
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
v-if="errorTips==2"
|
||||
class="error-text"
|
||||
>
|
||||
<text class="warning-icon">
|
||||
!
|
||||
</text>
|
||||
请输入密码!
|
||||
</view>
|
||||
</view>
|
||||
<view class="operate">
|
||||
<view
|
||||
class="to-register"
|
||||
@tap="toLogin"
|
||||
>
|
||||
已有账号?
|
||||
<text>去登录></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<button
|
||||
class="authorized-btn"
|
||||
@tap="toRegister"
|
||||
>
|
||||
注册
|
||||
</button>
|
||||
<button
|
||||
class="to-idx-btn"
|
||||
@tap="toIndex"
|
||||
>
|
||||
回到首页
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { encrypt } from '@/utils/crypto.js'
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow(() => {
|
||||
// 头部导航标题
|
||||
uni.setNavigationBarTitle({
|
||||
title: '用户注册'
|
||||
})
|
||||
})
|
||||
|
||||
const principal = ref('') // 账号
|
||||
const credentials = ref('') // 密码
|
||||
/**
|
||||
* 输入框的值
|
||||
*/
|
||||
const getInputVal = (e) => {
|
||||
const type = e.currentTarget.dataset.type
|
||||
if (type == 'account') {
|
||||
principal.value = e.detail.value
|
||||
} else if (type == 'password') {
|
||||
credentials.value = e.detail.value
|
||||
}
|
||||
}
|
||||
|
||||
const errorTips = ref(0) // 输入错误提示: 1账号输入 2密码输入
|
||||
/**
|
||||
* 注册
|
||||
*/
|
||||
const toRegister = () => {
|
||||
if (principal.value.length == 0) {
|
||||
errorTips.value = 1
|
||||
} else if (credentials.value.length == 0) {
|
||||
errorTips.value = 2
|
||||
} else {
|
||||
errorTips.value = 0
|
||||
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/user/register',
|
||||
method: 'post',
|
||||
data: {
|
||||
userName: principal.value,
|
||||
passWord: encrypt(credentials.value)
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '注册成功,请登录',
|
||||
icon: 'none',
|
||||
duration: 1500
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/accountLogin/accountLogin'
|
||||
})
|
||||
}, 1800)
|
||||
})
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 去登陆
|
||||
*/
|
||||
const toLogin = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/accountLogin/accountLogin'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 回到首页
|
||||
*/
|
||||
const toIndex = () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./register.scss";
|
||||
</style>
|
||||
119
front-end/mall4uni/src/pages/search-page/search-page.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
.search-bar {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #777;
|
||||
background: #fff;
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
|
||||
z-index: 3;
|
||||
.search-box {
|
||||
position: relative;
|
||||
height: 60rpx;
|
||||
background: #f7f7f7;
|
||||
z-index: 999;
|
||||
width: 80%;
|
||||
margin-left: 70rpx;
|
||||
border-radius: 50rpx;
|
||||
margin: 20rpx 0 20rpx 20rpx;
|
||||
.search-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 14rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.search-hint {
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 31rpx;
|
||||
color: #eb2444;
|
||||
}
|
||||
}
|
||||
.sear-input {
|
||||
height: 60rpx;
|
||||
border-radius: 50rpx;
|
||||
border: 0;
|
||||
margin: 0 30rpx 0 64rpx;
|
||||
line-height: 48rpx;
|
||||
vertical-align: top;
|
||||
background: #f7f7f7;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.search-display {
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
margin-top: 100rpx;
|
||||
.title-text {
|
||||
padding: 30rpx 0;
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.hot-search {
|
||||
.hot-search-tags {
|
||||
overflow: hidden;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
padding-bottom: 30rpx;
|
||||
.tags {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
border-radius: 50rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background-color: #f2f2f2;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.history-search {
|
||||
.title-text.history-line {
|
||||
position: relative;
|
||||
border-top: 2rpx solid #e1e1e1;
|
||||
}
|
||||
.his-search-tags {
|
||||
overflow: hidden;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
.tags {
|
||||
max-width: 300rpx;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
border-radius: 50rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background-color: #f2f2f2;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clear-history {
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
top: 30rpx;
|
||||
}
|
||||
}
|
||||
.search-tit-empty {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
183
front-end/mall4uni/src/pages/search-page/search-page.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-bar">
|
||||
<view class="search-box">
|
||||
<input
|
||||
placeholder="输入关键字搜索"
|
||||
class="sear-input"
|
||||
confirm-type="search"
|
||||
:value="prodName"
|
||||
@confirm="toSearchProdPage"
|
||||
@input="getSearchContent"
|
||||
>
|
||||
<image
|
||||
src="@/static/images/icon/search.png"
|
||||
class="search-img"
|
||||
/>
|
||||
</view>
|
||||
<text
|
||||
class="search-hint"
|
||||
@tap="goBackIndex"
|
||||
>
|
||||
取消
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="search-display">
|
||||
<!-- 热门搜索 -->
|
||||
<view class="hot-search">
|
||||
<view class="title-text">
|
||||
热门搜索
|
||||
</view>
|
||||
<view
|
||||
v-if="hotSearchList && hotSearchList.length"
|
||||
class="hot-search-tags"
|
||||
>
|
||||
<block
|
||||
v-for="(item, index) in hotSearchList"
|
||||
:key="index"
|
||||
>
|
||||
<text
|
||||
class="tags"
|
||||
:data-name="item.content"
|
||||
@tap="onHistSearch"
|
||||
>
|
||||
{{ item.title }}
|
||||
</text>
|
||||
</block>
|
||||
</view>
|
||||
<view
|
||||
v-else
|
||||
class="search-tit-empty"
|
||||
>
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索历史 -->
|
||||
<view
|
||||
v-if="recentSearch && recentSearch.length"
|
||||
class="history-search"
|
||||
>
|
||||
<view class="title-text history-line">
|
||||
搜索历史
|
||||
<view class="clear-history">
|
||||
<image
|
||||
src="@/static/images/icon/clear-his.png"
|
||||
@tap="clearSearch"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<block
|
||||
v-for="(item, index) in recentSearch"
|
||||
:key="index"
|
||||
>
|
||||
<view class="his-search-tags">
|
||||
<text
|
||||
class="tags"
|
||||
:data-name="item"
|
||||
@tap="onHistSearch"
|
||||
>
|
||||
{{ item }}
|
||||
</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const hotSearchList = ref([])
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow(() => {
|
||||
http.request({
|
||||
url: '/search/hotSearchByShopId',
|
||||
method: 'GET',
|
||||
data: {
|
||||
number: 10,
|
||||
shopId: 1,
|
||||
sort: 1
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
hotSearchList.value = data
|
||||
})
|
||||
// 获取历史搜索
|
||||
getRecentSearch()
|
||||
})
|
||||
|
||||
const prodName = ref('')
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide(() => {
|
||||
prodName.value = ''
|
||||
})
|
||||
|
||||
const recentSearch = ref([])
|
||||
/**
|
||||
* 获取历史搜索
|
||||
*/
|
||||
const getRecentSearch = () => {
|
||||
recentSearch.value = uni.getStorageSync('recentSearch')
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索提交
|
||||
*/
|
||||
const toSearchProdPage = () => {
|
||||
if (prodName.value.trim()) {
|
||||
// 记录最近搜索
|
||||
let recentSearchStorage = uni.getStorageSync('recentSearch') || []
|
||||
recentSearchStorage = recentSearchStorage.filter(item => item !== prodName.value)
|
||||
recentSearchStorage.unshift(prodName.value)
|
||||
if (recentSearchStorage.length > 10) {
|
||||
recentSearchStorage.pop()
|
||||
}
|
||||
uni.setStorageSync('recentSearch', recentSearchStorage) // 跳转到商品列表页
|
||||
uni.navigateTo({
|
||||
url: '/pages/search-prod-show/search-prod-show?prodName=' + prodName.value
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空搜索历史
|
||||
*/
|
||||
const clearSearch = () => {
|
||||
uni.removeStorageSync('recentSearch')
|
||||
getRecentSearch()
|
||||
}
|
||||
|
||||
/**
|
||||
* 返回首页
|
||||
*/
|
||||
const goBackIndex = () => {
|
||||
uni.navigateBack({
|
||||
url: '/pages/search-page/search-page'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 输入商品名获取数据 || 绑定输入值
|
||||
*/
|
||||
const getSearchContent = (e) => {
|
||||
prodName.value = e.detail.value
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击搜素历史
|
||||
*/
|
||||
const onHistSearch = (e) => {
|
||||
prodName.value = e.currentTarget.dataset.name
|
||||
toSearchProdPage()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './search-page.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,186 @@
|
||||
.container {
|
||||
background: #f4f4f4;
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.empty.empty-top {
|
||||
margin-top: 300rpx;
|
||||
}
|
||||
}
|
||||
.fixed-box {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
background: #fff;
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding: 10rpx 0;
|
||||
z-index: 999;
|
||||
background: #fff;
|
||||
&::after {
|
||||
content: '';
|
||||
background-color: #e1e1e1;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
transform-origin: 50% 100% 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.tab-item {
|
||||
display: inline-block;
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.tab-item.on {
|
||||
color: #eb2444;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
color: #777;
|
||||
background: #fff;
|
||||
z-index: 3;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 30rpx 0;
|
||||
.search-box {
|
||||
position: relative;
|
||||
height: 60rpx;
|
||||
background: #f7f7f7;
|
||||
z-index: 999;
|
||||
width: 80%;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 30rpx;
|
||||
flex: 1;
|
||||
.search-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 14rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.search-hint {
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 31rpx;
|
||||
color: #eb2444;
|
||||
}
|
||||
.search-list-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
font-size: 0;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sear-input {
|
||||
height: 60rpx;
|
||||
border-radius: 50rpx;
|
||||
border: 0;
|
||||
margin: 0 30rpx 0 64rpx;
|
||||
line-height: 48rpx;
|
||||
vertical-align: top;
|
||||
background: #f7f7f7;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.prod-show {
|
||||
background: #fff;
|
||||
.prod-items {
|
||||
float: left;
|
||||
background: #fff;
|
||||
padding-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.prod-items {
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
.hotsale-item-cont {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.prod-list {
|
||||
padding-top: 150rpx;
|
||||
min-height: calc(100vh - 150rpx);
|
||||
.cont-item {
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
.show-item {
|
||||
.more-prod-pic {
|
||||
text-align: center;
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
font-size: 0;
|
||||
.more-pic {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
|
||||
.prod-text-right {
|
||||
margin-left: 20rpx;
|
||||
width: 75%;
|
||||
.cate-prod-info {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin: 10rpx 0 20rpx 0;
|
||||
}
|
||||
.go-to-buy {
|
||||
font-size: 26rpx;
|
||||
background: #eb2444;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
padding: 8rpx 3rpx;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
.prod-text.more {
|
||||
margin: 0;
|
||||
height: 78rpx;
|
||||
font-size: 28rpx;
|
||||
display: -webkit-box;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
color: #000;
|
||||
}
|
||||
.prod-price.more {
|
||||
font-size: 28rpx;
|
||||
color: #eb2444;
|
||||
font-family: arial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 搜索框 -->
|
||||
<view class="fixed-box">
|
||||
<view class="search-bar">
|
||||
<view class="search-box">
|
||||
<input
|
||||
placeholder="输入关键字搜索"
|
||||
class="sear-input"
|
||||
:value="prodName"
|
||||
confirm-type="search"
|
||||
@input="getSearchContent"
|
||||
@confirm="toSearchConfirm"
|
||||
>
|
||||
<image
|
||||
src="@/static/images/icon/search.png"
|
||||
class="search-img"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
class="search-list-img"
|
||||
@tap="changeShowType"
|
||||
>
|
||||
<image
|
||||
v-if="showType==1"
|
||||
src="@/static/images/icon/search-col.png"
|
||||
/>
|
||||
<image
|
||||
v-if="showType==2"
|
||||
src="@/static/images/icon/search-col2.png"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabs">
|
||||
<text
|
||||
:class="'tab-item complete ' + (sts==0?'on':'')"
|
||||
data-sts="0"
|
||||
@tap="onStsTap"
|
||||
>
|
||||
综合
|
||||
</text>
|
||||
<text
|
||||
:class="'tab-item ' + (sts==1?'on':'')"
|
||||
data-sts="1"
|
||||
@tap="onStsTap"
|
||||
>
|
||||
销量
|
||||
</text>
|
||||
<text
|
||||
:class="'tab-item ' + (sts==2?'on':'')"
|
||||
data-sts="2"
|
||||
@tap="onStsTap"
|
||||
>
|
||||
价格
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<view class="prod-list">
|
||||
<!-- 横向列表 -->
|
||||
<view
|
||||
v-if="showType==1"
|
||||
class="prod-show"
|
||||
>
|
||||
<view class="hotsale-item-cont">
|
||||
<block
|
||||
v-for="(item, index) in searchProdList"
|
||||
:key="index"
|
||||
>
|
||||
<production
|
||||
:item="item"
|
||||
sts="6"
|
||||
/>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 纵向列表 -->
|
||||
<view
|
||||
v-if="showType==2"
|
||||
class="cont-item"
|
||||
>
|
||||
<block
|
||||
v-for="(item, index) in searchProdList"
|
||||
:key="index"
|
||||
>
|
||||
<view
|
||||
class="show-item"
|
||||
:data-prodid="item.prodId"
|
||||
@tap="toProdPage"
|
||||
>
|
||||
<view class="more-prod-pic">
|
||||
<image
|
||||
:src="item.pic"
|
||||
class="more-pic"
|
||||
/>
|
||||
</view>
|
||||
<view class="prod-text-right">
|
||||
<view class="prod-text more">
|
||||
{{ item.prodName }}
|
||||
</view>
|
||||
<view class="cate-prod-info">
|
||||
{{ item.praiseNumber }}评价 {{ item.positiveRating }}%好评
|
||||
</view>
|
||||
<view class="prod-price more">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(item.price)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(item.price)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 空占位 -->
|
||||
<view
|
||||
v-if="!searchProdList.length"
|
||||
:class="['empty',showType==1? 'empty-top':'']"
|
||||
>
|
||||
暂无结果
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const wxs = number()
|
||||
const prodName = ref('')
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad((options) => {
|
||||
prodName.value = options.prodName
|
||||
})
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow(() => {
|
||||
toLoadData()
|
||||
})
|
||||
|
||||
const showType = ref(2)
|
||||
const changeShowType = () => {
|
||||
if (showType.value == 1) {
|
||||
showType.value = 2
|
||||
} else {
|
||||
showType.value = 1
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 输入商品获取数据
|
||||
* @param e
|
||||
*/
|
||||
const getSearchContent = (e) => {
|
||||
prodName.value = e.detail.value
|
||||
}
|
||||
|
||||
const sts = ref(0)
|
||||
const searchProdList = ref([])
|
||||
/**
|
||||
* 请求热门搜索商品接口
|
||||
*/
|
||||
const toLoadData = () => {
|
||||
http.request({
|
||||
url: '/search/searchProdPage',
|
||||
method: 'GET',
|
||||
data: {
|
||||
current: 1,
|
||||
prodName: prodName.value,
|
||||
size: 10,
|
||||
sort: sts.value
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
searchProdList.value = data.records
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 当前搜索页二次搜索商品
|
||||
*/
|
||||
const toSearchConfirm = (e) => {
|
||||
if (e.detail.value) {
|
||||
let recentSearch = uni.getStorageSync('recentSearch') || []
|
||||
recentSearch = recentSearch.filter(item => item !== prodName.value)
|
||||
recentSearch.unshift(prodName.value)
|
||||
if (recentSearch.length > 10) {
|
||||
recentSearch.pop()
|
||||
}
|
||||
uni.setStorageSync('recentSearch', recentSearch)
|
||||
}
|
||||
uni.redirectTo({
|
||||
url: '/pages/search-prod-show/search-prod-show?prodName=' + e.detail.value
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 状态点击事件
|
||||
*/
|
||||
const onStsTap = (e) => {
|
||||
sts.value = e.currentTarget.dataset.sts
|
||||
toLoadData()
|
||||
}
|
||||
|
||||
const toProdPage = (e) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/prod/prod?prodid=' + e.currentTarget.dataset.prodid
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './search-prod-show.scss';
|
||||
</style>
|
||||
109
front-end/mall4uni/src/pages/sub-category/sub-category.scss
Normal file
@@ -0,0 +1,109 @@
|
||||
.container {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.category-tit {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
z-index: 999;
|
||||
background-color: #fff;
|
||||
border-bottom: 2rpx solid #f4f4f4;
|
||||
font-size: 30rpx;
|
||||
.category-item {
|
||||
display: inline-block;
|
||||
padding: 20rpx 10rpx;
|
||||
margin: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.prod-item {
|
||||
height: calc(100vh - 100rpx);
|
||||
}
|
||||
.on {
|
||||
border-bottom: 4rpx solid #e43130;
|
||||
color: #e43130;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
}
|
||||
.empty {
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
.prod-items {
|
||||
width: 345rpx;
|
||||
display: inline-block;
|
||||
background: #fff;
|
||||
padding-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2);
|
||||
&:nth-child(2n-1) {
|
||||
margin: 20rpx 10rpx 10rpx 20rpx;
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
margin: 20rpx 20rpx 10rpx 10rpx;
|
||||
}
|
||||
.hot-imagecont {
|
||||
.hotsaleimg {
|
||||
width: 341rpx;
|
||||
height: 341rpx;
|
||||
}
|
||||
font-size: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.hot-text {
|
||||
.hotprod-text {
|
||||
font-size: 28rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
margin-top: 20rpx;
|
||||
padding: 0 10rpx;
|
||||
.prod-info {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.prod-text-info {
|
||||
position: relative;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-family: Arial;
|
||||
.hotprod-price {
|
||||
display: inline;
|
||||
font-size: 26rpx;
|
||||
color: #eb2444;
|
||||
}
|
||||
.basket-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 7rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.more-prod {
|
||||
.prod-text-right {
|
||||
.prod-info {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty-wrap {
|
||||
color: #aaa;
|
||||
text-align: center;
|
||||
padding-top: 400rpx;
|
||||
}
|
||||
177
front-end/mall4uni/src/pages/sub-category/sub-category.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<view class="Mall4j container">
|
||||
<!-- 顶部子分类tab -->
|
||||
<scroll-view
|
||||
scroll-x="true"
|
||||
class="category-tit"
|
||||
:scroll-into-view="intoView"
|
||||
:scroll-with-animation="true"
|
||||
>
|
||||
<block
|
||||
v-for="(item, index) in subCategoryList"
|
||||
:key="index"
|
||||
>
|
||||
<view
|
||||
:id="'sw' + item.categoryId"
|
||||
:class="'category-item ' + (item.categoryId==categoryId? 'on':'')"
|
||||
:data-id="item.categoryId"
|
||||
@tap="onSubCategoryTap"
|
||||
>
|
||||
{{ item.categoryName }}
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<!-- 商品列表 -->
|
||||
<view class="prod-item">
|
||||
<block v-if="prodList.length">
|
||||
<block
|
||||
v-for="(prod, key) in prodList"
|
||||
:key="key"
|
||||
>
|
||||
<view
|
||||
class="prod-items"
|
||||
:data-prodid="prod.prodId"
|
||||
@tap="toProdPage"
|
||||
>
|
||||
<view class="hot-imagecont">
|
||||
<image
|
||||
:src="prod.pic"
|
||||
class="hotsaleimg"
|
||||
/>
|
||||
</view>
|
||||
<view class="hot-text">
|
||||
<view class="hotprod-text">
|
||||
{{ prod.prodName }}
|
||||
</view>
|
||||
<view class="prod-info">
|
||||
{{ prod.brief }}
|
||||
</view>
|
||||
<view class="prod-text-info">
|
||||
<view class="price">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(prod.price)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(prod.price)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
<view
|
||||
v-else
|
||||
class="empty-wrap"
|
||||
>
|
||||
暂无商品数据~
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const wxs = number()
|
||||
|
||||
const parentId = ref('')
|
||||
const categoryId = ref(0)
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad((options) => {
|
||||
parentId.value = options.parentId
|
||||
categoryId.value = options.categoryId
|
||||
getSubCategory()
|
||||
getProdList()
|
||||
})
|
||||
|
||||
const current = ref(1)
|
||||
const pages = ref(0)
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom(() => {
|
||||
if (current.value < pages.value) {
|
||||
current.value = current.value + 1
|
||||
getProdList()
|
||||
}
|
||||
})
|
||||
|
||||
const intoView = ref('')
|
||||
const subCategoryList = ref([])
|
||||
/**
|
||||
* 获取顶栏子分类数据
|
||||
*/
|
||||
const getSubCategory = () => {
|
||||
http.request({
|
||||
url: '/category/categoryInfo',
|
||||
method: 'GET',
|
||||
data: {
|
||||
parentId: parentId.value
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
subCategoryList.value = data
|
||||
nextTick(() => {
|
||||
intoView.value = 'sw' + categoryId.value
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const prodList = ref([])
|
||||
const isLoaded = ref(false) // 列表是否加载完毕
|
||||
/**
|
||||
* 根据分类id获取商品列表数据
|
||||
*/
|
||||
const getProdList = () => {
|
||||
isLoaded.value = false
|
||||
|
||||
http.request({
|
||||
url: '/prod/pageProd',
|
||||
method: 'GET',
|
||||
data: {
|
||||
categoryId: categoryId.value,
|
||||
current: current.value,
|
||||
size: 10,
|
||||
sort: 0,
|
||||
isAllProdType: true
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
isLoaded.value = true
|
||||
prodList.value = data.current == 1 ? data.records : prodList.value.concat(data.records)
|
||||
current.value = data.current
|
||||
pages.value = data.pages
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换顶部分类
|
||||
*/
|
||||
const onSubCategoryTap = (e) => {
|
||||
categoryId.value = e.currentTarget.dataset.id
|
||||
current.value = 1
|
||||
pages.value = 0
|
||||
intoView.value = 'sw' + e.currentTarget.dataset.id
|
||||
getProdList()
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转商品下详情
|
||||
*/
|
||||
const toProdPage = (e) => {
|
||||
const prodid = e.currentTarget.dataset.prodid
|
||||
if (prodid) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/prod/prod?prodid=' + prodid
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./sub-category.scss";
|
||||
</style>
|
||||
429
front-end/mall4uni/src/pages/submit-order/submit-order.scss
Normal file
@@ -0,0 +1,429 @@
|
||||
.container {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.submit-order {
|
||||
margin-bottom: 100rpx;
|
||||
padding-bottom: 160rpx;
|
||||
.delivery-addr {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
.addr-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: 24rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.user-info {
|
||||
padding-top: 20rpx;
|
||||
line-height: 48rpx;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
.item {
|
||||
font-size: 30rpx;
|
||||
margin-right: 30rpx;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.addr {
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #999;
|
||||
width: 90%;
|
||||
padding-bottom: 20rpx;
|
||||
margin-top: 15rpx;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.arrow {
|
||||
width: 15rpx;
|
||||
height: 15rpx;
|
||||
border-top: 2rpx solid #777;
|
||||
border-right: 2rpx solid #777;
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 60rpx;
|
||||
}
|
||||
.arrow.empty {
|
||||
top: 39rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.delivery-addr {
|
||||
.addr-bg {
|
||||
.add-addr {
|
||||
.plus-sign {
|
||||
color: #eb2444;
|
||||
border: 2rpx solid #eb2444;
|
||||
padding: 0rpx 6rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.addr-bg.whole {
|
||||
padding: 0 39rpx 0 77rpx;
|
||||
}
|
||||
}
|
||||
.addr-bg {
|
||||
.add-addr {
|
||||
.plus-sign-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
font-size: 0;
|
||||
margin-right: 10rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.prod-item {
|
||||
background-color: #fff;
|
||||
margin-top: 15rpx;
|
||||
font-size: 28rpx;
|
||||
.item-cont {
|
||||
.prod-pic {
|
||||
image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
font-size: 0;
|
||||
display: block;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 2rpx solid #f1f1f1;
|
||||
.prod-info {
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 160rpx;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
flex: 1;
|
||||
.prodname {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
max-height: 86rpx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.prod-info-cont {
|
||||
color: #999;
|
||||
line-height: 40rpx;
|
||||
margin-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-num {
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
.clear-btn {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
font-size: 0;
|
||||
vertical-align: top;
|
||||
margin-top: 6rpx;
|
||||
margin-left: 42rpx;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: 1px;
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background: #ddd;
|
||||
}
|
||||
.clear-list-btn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.total-num {
|
||||
text-align: right;
|
||||
padding: 20rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
.prodprice {
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
}
|
||||
.prodcount {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
.price-nums {
|
||||
.prodprice {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.prodcount {
|
||||
position: absolute;
|
||||
bottom: 5rpx;
|
||||
right: 0;
|
||||
color: #999;
|
||||
font-family: verdana;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.order-msg {
|
||||
background: #fff;
|
||||
margin-top: 15rpx;
|
||||
padding: 0 30rpx;
|
||||
font-size: 28rpx;
|
||||
.msg-item {
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
&:first-child {
|
||||
border: 0;
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 16rpx 0;
|
||||
align-items: center;
|
||||
.item-tit {
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.item-txt {
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
flex: 1;
|
||||
font-family: arial;
|
||||
max-height: 48rpx;
|
||||
overflow: hidden;
|
||||
line-height: 48rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.item-txt.price {
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
}
|
||||
.coupon-btn {
|
||||
display: block;
|
||||
margin: 0 30rpx;
|
||||
line-height: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
.arrow {
|
||||
width: 15rpx;
|
||||
height: 15rpx;
|
||||
border-top: 2rpx solid #999;
|
||||
border-right: 2rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
}
|
||||
}
|
||||
.item.payment {
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
color: #eb2444;
|
||||
}
|
||||
.item.coupon {
|
||||
border-bottom: 2rpx solid #e1e1e1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.submit-order-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
max-width: 750rpx;
|
||||
background: #fff;
|
||||
margin: auto;
|
||||
display: -webkit-flex;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
|
||||
.sub-order {
|
||||
flex: 1;
|
||||
margin: 0 30rpx;
|
||||
line-height: 100rpx;
|
||||
display: block;
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
.item-txt {
|
||||
.price {
|
||||
display: inline;
|
||||
color: #eb2444;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-box {
|
||||
padding: 0 10rpx;
|
||||
width: 200rpx;
|
||||
background: #eb2444;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.clearfix {
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.popup-hide {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.popup-box {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
.popup-tit {
|
||||
position: relative;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
padding-left: 10px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.close {
|
||||
color: #aaa;
|
||||
border-radius: 12px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
font-size: 18px;
|
||||
padding: 1px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
&::before {
|
||||
content: "\2716";
|
||||
}
|
||||
}
|
||||
.coupon-tabs {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
justify-content: space-around;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
.coupon-tab {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.coupon-tab.on {
|
||||
border-bottom: 2px solid #eb2444;
|
||||
font-weight: 600;
|
||||
}
|
||||
.popup-cnt {
|
||||
height: calc(100% - 88px);
|
||||
overflow: auto;
|
||||
padding: 0 10px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.coupon-ok {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
box-shadow: 0px -1px 1px #ddd;
|
||||
text {
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 450rpx;
|
||||
padding: 7px;
|
||||
color: #fff;
|
||||
box-shadow: -1px 3px 3px #aaa;
|
||||
}
|
||||
}
|
||||
.botm-empty {
|
||||
height: 60px;
|
||||
}
|
||||
checkbox {
|
||||
.wx-checkbox-input {
|
||||
border-radius: 50%;
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
}
|
||||
.wx-checkbox-input.wx-checkbox-input-checked {
|
||||
background: #eb2444;
|
||||
border-color: #eb2444;
|
||||
&::before {
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
-webkit-transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
527
front-end/mall4uni/src/pages/submit-order/submit-order.vue
Normal file
@@ -0,0 +1,527 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="container">
|
||||
<view class="submit-order">
|
||||
<!-- 收货地址 -->
|
||||
<view
|
||||
class="delivery-addr "
|
||||
@tap="toAddrListPage"
|
||||
>
|
||||
<view
|
||||
v-if="!userAddr"
|
||||
class="addr-bg "
|
||||
>
|
||||
<view class="add-addr">
|
||||
<view class="plus-sign-img">
|
||||
<image src="@/static/images/icon/plus-sign.png" />
|
||||
</view>
|
||||
<text>新增收货地址</text>
|
||||
</view>
|
||||
<view class="arrow empty" />
|
||||
</view>
|
||||
<view
|
||||
v-if="userAddr"
|
||||
class="addr-bg whole"
|
||||
>
|
||||
<view class="addr-icon">
|
||||
<image src="@/static/images/icon/addr.png" />
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<text class="item">
|
||||
{{ userAddr.receiver }}
|
||||
</text>
|
||||
<text class="item">
|
||||
{{ userAddr.mobile }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="addr">
|
||||
{{ userAddr.province }}{{ userAddr.city }}{{ userAddr.area }}{{ userAddr.addr }}
|
||||
</view>
|
||||
<view class="arrow" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品详情 -->
|
||||
<view class="prod-item">
|
||||
<block
|
||||
v-for="(item, index) in orderItems"
|
||||
:key="index"
|
||||
>
|
||||
<view
|
||||
class="item-cont"
|
||||
:data-ordernum="item.primaryOrderNo"
|
||||
@tap="toOrderDetailPage"
|
||||
>
|
||||
<view class="prod-pic">
|
||||
<image :src="item.pic" />
|
||||
</view>
|
||||
<view class="prod-info">
|
||||
<view class="prodname">
|
||||
{{ item.prodName }}
|
||||
</view>
|
||||
<view class="prod-info-cont">
|
||||
{{ item.skuName }}
|
||||
</view>
|
||||
<view class="price-nums">
|
||||
<text class="prodprice">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(item.price)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(item.price)[1] }}
|
||||
</text>
|
||||
</text>
|
||||
<text class="prodcount">
|
||||
x{{ item.prodCount }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="total-num">
|
||||
<text class="prodcount">
|
||||
共{{ totalCount }}件商品
|
||||
</text>
|
||||
<view class="prodprice">
|
||||
合计:
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(total)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(total)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单详情 -->
|
||||
<view class="order-msg">
|
||||
<view class="msg-item">
|
||||
<view
|
||||
class="item coupon"
|
||||
@tap="showCouponPopup"
|
||||
>
|
||||
<text class="item-tit">
|
||||
优惠券:
|
||||
</text>
|
||||
<text
|
||||
v-if="!coupons.canUseCoupons"
|
||||
class="item-txt"
|
||||
>
|
||||
暂无可用
|
||||
</text>
|
||||
<text class="coupon-btn">
|
||||
{{ coupons.totalLength ? coupons.totalLength : 0 }}张
|
||||
</text>
|
||||
<text class="arrow" />
|
||||
</view>
|
||||
<view class="item">
|
||||
<text>买家留言:</text>
|
||||
<input
|
||||
v-model="remarks"
|
||||
placeholder="给卖家留言"
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-msg">
|
||||
<view class="msg-item">
|
||||
<view class="item">
|
||||
<view class="item-tit">
|
||||
订单总额:
|
||||
</view>
|
||||
<view class="item-txt price">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(total)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(total)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item-tit">
|
||||
运费:
|
||||
</view>
|
||||
<view class="item-txt price">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(transfee)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(transfee)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item-tit">
|
||||
优惠金额:
|
||||
</view>
|
||||
<view class="item-txt price">
|
||||
<text class="symbol">
|
||||
-¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(shopReduce)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(shopReduce)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item payment">
|
||||
<view class="item-txt price">
|
||||
小计:
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(actualTotal)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(actualTotal)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部栏 -->
|
||||
<view class="submit-order-footer">
|
||||
<view class="sub-order">
|
||||
<view class="item-txt">
|
||||
合计:
|
||||
<view class="price">
|
||||
<text class="symbol">
|
||||
¥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(actualTotal)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(actualTotal)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="footer-box"
|
||||
@tap="toPay"
|
||||
>
|
||||
提交订单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择优惠券弹窗 -->
|
||||
<view
|
||||
v-if="popupShow"
|
||||
class="popup-hide"
|
||||
>
|
||||
<view class="popup-box">
|
||||
<view class="popup-tit">
|
||||
<text>优惠券</text>
|
||||
<text
|
||||
class="close"
|
||||
@tap="closePopup"
|
||||
/>
|
||||
</view>
|
||||
<view class="coupon-tabs">
|
||||
<view
|
||||
:class="'coupon-tab ' + (couponSts==1?'on':'')"
|
||||
data-sts="1"
|
||||
@tap="changeCouponSts"
|
||||
>
|
||||
可用优惠券({{ coupons.canUseCoupons.length ? coupons.canUseCoupons.length : 0 }})
|
||||
</view>
|
||||
<view
|
||||
:class="'coupon-tab ' + (couponSts==2?'on':'')"
|
||||
data-sts="2"
|
||||
@tap="changeCouponSts"
|
||||
>
|
||||
不可用优惠券({{ coupons.unCanUseCoupons.length ? coupons.unCanUseCoupons.length : 0 }})
|
||||
</view>
|
||||
</view>
|
||||
<view class="popup-cnt">
|
||||
<block v-if="couponSts == 1">
|
||||
<view
|
||||
v-for="(item, index) in coupons.canUseCoupons"
|
||||
:key="index"
|
||||
>
|
||||
<coupon
|
||||
:item="item"
|
||||
order="true"
|
||||
can-use="true"
|
||||
@check-coupon="checkCoupon"
|
||||
/>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="couponSts == 2">
|
||||
<view
|
||||
v-for="(item, index) in coupons.unCanUseCoupons"
|
||||
:key="index"
|
||||
>
|
||||
<coupon
|
||||
:item="item"
|
||||
order="true"
|
||||
can-use="false"
|
||||
/>
|
||||
</view>
|
||||
</block>
|
||||
<view class="botm-empty" />
|
||||
</view>
|
||||
<view
|
||||
v-if="couponSts==1"
|
||||
class="coupon-ok"
|
||||
>
|
||||
<text @tap="choosedCoupon">
|
||||
确定
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const wxs = number()
|
||||
let orderEntry = '0' // 订单入口 0购物车 1立即购买
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad((options) => {
|
||||
orderEntry = options.orderEntry
|
||||
})
|
||||
|
||||
const userAddr = ref(null)
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow(() => {
|
||||
const pages = getCurrentPages()
|
||||
const currPage = pages[pages.length - 1]
|
||||
if (currPage.selAddress === 'yes') {
|
||||
// 将携带的参数赋值
|
||||
userAddr.value = currPage.item
|
||||
}
|
||||
// 获取订单数据
|
||||
loadOrderData()
|
||||
})
|
||||
|
||||
let couponIds = []
|
||||
const coupons = ref({})
|
||||
const total = ref(0)
|
||||
const actualTotal = ref(0)
|
||||
const orderItems = ref([])
|
||||
const totalCount = ref(0)
|
||||
const transfee = ref(0)
|
||||
const shopReduce = ref('')
|
||||
/**
|
||||
* 加载订单数据
|
||||
*/
|
||||
const loadOrderData = () => {
|
||||
let addrId = 0
|
||||
if (userAddr.value != null) {
|
||||
addrId = userAddr.value.addrId
|
||||
}
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
http.request({
|
||||
url: '/p/order/confirm',
|
||||
method: 'POST',
|
||||
data: {
|
||||
addrId,
|
||||
orderItem: orderEntry === '1' ? JSON.parse(uni.getStorageSync('orderItem')) : undefined,
|
||||
basketIds: orderEntry === '0' ? JSON.parse(uni.getStorageSync('basketIds')) : undefined,
|
||||
couponIds,
|
||||
userChangeCoupon: 1
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
uni.hideLoading()
|
||||
let orderItemsData = []
|
||||
data.shopCartOrders[0].shopCartItemDiscounts?.forEach(itemDiscount => {
|
||||
orderItemsData = orderItems.value?.concat(itemDiscount.shopCartItems)
|
||||
})
|
||||
if (data.shopCartOrders[0].coupons) {
|
||||
const canUseCoupons = []
|
||||
const unCanUseCoupons = []
|
||||
data.shopCartOrders[0].coupons?.forEach(coupon => {
|
||||
if (coupon.canUse) {
|
||||
canUseCoupons.push(coupon)
|
||||
} else {
|
||||
unCanUseCoupons.push(coupon)
|
||||
}
|
||||
})
|
||||
coupons.value = {
|
||||
totalLength: data.shopCartOrders[0].coupons.length,
|
||||
canUseCoupons,
|
||||
unCanUseCoupons
|
||||
}
|
||||
}
|
||||
orderItems.value = orderItemsData
|
||||
actualTotal.value = data.actualTotal
|
||||
total.value = data.total
|
||||
totalCount.value = data.totalCount
|
||||
userAddr.value = data.userAddr
|
||||
transfee.value = data.shopCartOrders[0].transfee
|
||||
shopReduce.value = data.shopCartOrders[0].shopReduce
|
||||
})
|
||||
.catch(err => {
|
||||
uni.hideLoading()
|
||||
chooseCouponErrHandle(err)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 优惠券选择出错处理方法
|
||||
*/
|
||||
const chooseCouponErrHandle = (res) => {
|
||||
// 优惠券不能共用处理方法
|
||||
if (res.statusCode == 601) {
|
||||
uni.showToast({
|
||||
title: res.data,
|
||||
icon: 'none',
|
||||
duration: 3000,
|
||||
success: () => {
|
||||
couponIds = []
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
loadOrderData()
|
||||
}, 2500)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交订单
|
||||
*/
|
||||
const toPay = () => {
|
||||
if (!userAddr.value) {
|
||||
uni.showToast({
|
||||
title: '请选择地址',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
submitOrder()
|
||||
}
|
||||
|
||||
const remarks = ref('')
|
||||
const submitOrder = () => {
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
http.request({
|
||||
url: '/p/order/submit',
|
||||
method: 'POST',
|
||||
data: {
|
||||
orderShopParam: [{
|
||||
remarks: remarks.value,
|
||||
shopId: 1
|
||||
}]
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
uni.hideLoading()
|
||||
normalPay(data.orderNumbers)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 模拟支付,直接提交成功
|
||||
* @param orderNumbers
|
||||
*/
|
||||
const normalPay = (orderNumbers) => {
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
http.request({
|
||||
url: '/p/order/normalPay',
|
||||
method: 'POST',
|
||||
data: {
|
||||
orderNumbers
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
uni.hideLoading()
|
||||
if (data) {
|
||||
uni.showToast({
|
||||
title: '模拟支付成功',
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/pay-result/pay-result?sts=1&orderNumbers=' + orderNumbers
|
||||
})
|
||||
}, 1200)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '支付失败!',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const couponSts = ref(1)
|
||||
const changeCouponSts = (e) => {
|
||||
couponSts.value = e.currentTarget.dataset.sts
|
||||
}
|
||||
|
||||
const popupShow = ref(false)
|
||||
const showCouponPopup = () => {
|
||||
popupShow.value = true
|
||||
}
|
||||
const closePopup = () => {
|
||||
popupShow.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* 去地址页面
|
||||
*/
|
||||
const toAddrListPage = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/delivery-address/delivery-address?order=0'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定选择好的优惠券
|
||||
*/
|
||||
const choosedCoupon = () => {
|
||||
loadOrderData()
|
||||
popupShow.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* 优惠券子组件发过来
|
||||
*/
|
||||
const checkCoupon = (e) => {
|
||||
const index = couponIds.indexOf(e.detail.couponId)
|
||||
if (index === -1) {
|
||||
couponIds.push(e.detail.couponId)
|
||||
} else {
|
||||
couponIds.splice(index, 1)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './submit-order.scss';
|
||||
</style>
|
||||
222
front-end/mall4uni/src/pages/user/user.scss
Normal file
@@ -0,0 +1,222 @@
|
||||
.container {
|
||||
background-color: #f7f7f7;
|
||||
padding-bottom: 60rpx;
|
||||
}
|
||||
.userinfo {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
padding: 30rpx 0;
|
||||
.userinfo-con {
|
||||
width: 240rpx;
|
||||
margin: auto;
|
||||
.userinfo-avatar {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
|
||||
margin: auto;
|
||||
image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
}
|
||||
.userinfo-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 20rpx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
.userinfo-none {
|
||||
display: flex;
|
||||
padding: 30rpx;
|
||||
background: #fff;
|
||||
align-items: center;
|
||||
.default-pic {
|
||||
padding-right: 30rpx;
|
||||
image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.none-login {
|
||||
button {
|
||||
background: #fff;
|
||||
&::after {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.unlogin {
|
||||
font-size: 30rpx;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
}
|
||||
.click-login {
|
||||
font-size: 26rpx;
|
||||
color: #777;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.binding-phone {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding: 0 30rpx;
|
||||
border-top: 2rpx solid #f7f7f7;
|
||||
border-bottom: 2rpx solid #f7f7f7;
|
||||
.show-tip {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.gotobinding {
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
color: #e24b4b;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.list-cont {
|
||||
width: 100%;
|
||||
background: #f7f7f7;
|
||||
margin-top: 20rpx;
|
||||
.total-order {
|
||||
background: #fff;
|
||||
.order-tit {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 30rpx;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
padding: 0 30rpx;
|
||||
.checkmore {
|
||||
font-size: 22rpx;
|
||||
color: #80848f;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.procedure {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 25rpx;
|
||||
height: 160rpx;
|
||||
.items {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
image {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.num-badge {
|
||||
position: absolute;
|
||||
top: -15rpx;
|
||||
right: -12rpx;
|
||||
color: #eb2444;
|
||||
border: 3rpx solid #eb2444;
|
||||
border-radius: 50rpx;
|
||||
background: #fff;
|
||||
min-width: 30rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
padding: 2rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.my-menu {
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
.memu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100rpx;
|
||||
border-bottom: 2rpx solid #f7f7f7;
|
||||
padding: 0 30rpx;
|
||||
&:nth-child(1) {
|
||||
border-top: 2rpx solid #f7f7f7;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.i-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arrowhead {
|
||||
width: 15rpx;
|
||||
height: 15rpx;
|
||||
border-top: 2rpx solid #999;
|
||||
border-right: 2rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.prod-col {
|
||||
margin-top: 20rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 30rpx 0 10rpx 0;
|
||||
font-size: 12px;
|
||||
.col-item {
|
||||
text-align: center;
|
||||
.num {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #3a86b9;
|
||||
}
|
||||
.tit {
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.log-out {
|
||||
padding: 20rpx;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.log-out-n {
|
||||
font-size: 30rpx;
|
||||
margin: auto;
|
||||
width: 200rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #e43130;
|
||||
color: #ffffff;
|
||||
}
|
||||
button.memu-btn.memu-item {
|
||||
background-color: #fff;
|
||||
&:after {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
375
front-end/mall4uni/src/pages/user/user.vue
Normal file
@@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 用户信息 -->
|
||||
<view
|
||||
v-if="isAuthInfo"
|
||||
class="userinfo"
|
||||
>
|
||||
<view class="userinfo-con">
|
||||
<view class="userinfo-avatar">
|
||||
<image
|
||||
:src="
|
||||
loginResult.pic
|
||||
?
|
||||
(loginResult.pic.indexOf('http') === -1 ? picDomain + loginResult.pic : loginResult.pic)
|
||||
:
|
||||
'/static/images/icon/head04.png'
|
||||
"
|
||||
/>
|
||||
</view>
|
||||
<view class="userinfo-name">
|
||||
<view>{{ loginResult.nickName ? loginResult.nickName : "用户昵称" }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-if="!isAuthInfo"
|
||||
class="userinfo-none"
|
||||
>
|
||||
<view
|
||||
class="default-pic"
|
||||
@tap="toLogin"
|
||||
>
|
||||
<image src="@/static/images/icon/head04.png" />
|
||||
</view>
|
||||
<view
|
||||
class="none-login"
|
||||
@tap="toLogin"
|
||||
>
|
||||
<button class="unlogin">
|
||||
未登录
|
||||
</button>
|
||||
<button class="click-login">
|
||||
点击登录账号
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end 用户信息 -->
|
||||
|
||||
<view class="list-cont">
|
||||
<!-- 订单状态 -->
|
||||
<view class="total-order">
|
||||
<view class="order-tit">
|
||||
<text style="font-weight:bold">
|
||||
我的订单
|
||||
</text>
|
||||
<view
|
||||
class="checkmore"
|
||||
data-sts="0"
|
||||
@tap="toOrderListPage"
|
||||
>
|
||||
<text>查看全部</text>
|
||||
<text class="arrowhead" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="procedure">
|
||||
<view
|
||||
class="items"
|
||||
data-sts="1"
|
||||
@tap="toOrderListPage"
|
||||
>
|
||||
<image src="@/static/images/icon/toPay.png" />
|
||||
<text>待支付</text>
|
||||
<text
|
||||
v-if="orderAmount.unPay>0"
|
||||
class="num-badge"
|
||||
>
|
||||
{{ orderAmount.unPay }}
|
||||
</text>
|
||||
</view>
|
||||
<view
|
||||
class="items"
|
||||
data-sts="2"
|
||||
@tap="toOrderListPage"
|
||||
>
|
||||
<image src="@/static/images/icon/toDelivery.png" />
|
||||
<text>待发货</text>
|
||||
<text
|
||||
v-if="orderAmount.payed>0"
|
||||
class="num-badge"
|
||||
>
|
||||
{{ orderAmount.payed }}
|
||||
</text>
|
||||
</view>
|
||||
<view
|
||||
class="items"
|
||||
data-sts="3"
|
||||
@tap="toOrderListPage"
|
||||
>
|
||||
<image src="@/static/images/icon/toTake.png" />
|
||||
<text>待收货</text>
|
||||
<text
|
||||
v-if="orderAmount.consignment>0"
|
||||
class="num-badge"
|
||||
>
|
||||
{{ orderAmount.consignment }}
|
||||
</text>
|
||||
</view>
|
||||
<view
|
||||
class="items"
|
||||
data-sts="5"
|
||||
@tap="toOrderListPage"
|
||||
>
|
||||
<image src="@/static/images/icon/toComment.png" />
|
||||
<text>已完成</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--end 订单状态 -->
|
||||
|
||||
<view class="prod-col">
|
||||
<view
|
||||
class="col-item"
|
||||
@tap="myCollectionHandle"
|
||||
>
|
||||
<view
|
||||
v-if="loginResult"
|
||||
class="num"
|
||||
>
|
||||
{{ collectionCount }}
|
||||
</view>
|
||||
<view
|
||||
v-else
|
||||
class="num"
|
||||
>
|
||||
--
|
||||
</view>
|
||||
<view class="tit">
|
||||
我的收藏
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="col-item"
|
||||
@tap="handleTips"
|
||||
>
|
||||
<view
|
||||
v-if="loginResult"
|
||||
class="num"
|
||||
>
|
||||
5
|
||||
</view>
|
||||
<view
|
||||
v-else
|
||||
class="num"
|
||||
>
|
||||
--
|
||||
</view>
|
||||
<view class="tit">
|
||||
我的消息
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="col-item"
|
||||
@tap="handleTips"
|
||||
>
|
||||
<view
|
||||
v-if="loginResult"
|
||||
class="num"
|
||||
>
|
||||
3
|
||||
</view>
|
||||
<view
|
||||
v-else
|
||||
class="num"
|
||||
>
|
||||
--
|
||||
</view>
|
||||
<view class="tit">
|
||||
我的足迹
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="my-menu">
|
||||
<view
|
||||
class="memu-item"
|
||||
@tap="toDistCenter"
|
||||
>
|
||||
<view class="i-name">
|
||||
<image src="@/static/images/icon/promotion.png" />
|
||||
<text>分销中心</text>
|
||||
</view>
|
||||
<view class="arrowhead" />
|
||||
</view>
|
||||
<view
|
||||
class="memu-item"
|
||||
@tap="toCouponCenter"
|
||||
>
|
||||
<view class="i-name">
|
||||
<image src="@/static/images/icon/getCoupon.png" />
|
||||
<text>领券中心</text>
|
||||
</view>
|
||||
<view class="arrowhead" />
|
||||
</view>
|
||||
<view
|
||||
class="memu-item"
|
||||
@tap="toMyCouponPage"
|
||||
>
|
||||
<view class="i-name">
|
||||
<image src="@/static/images/icon/myCoupon.png" />
|
||||
<text>我的优惠券</text>
|
||||
</view>
|
||||
<view class="arrowhead" />
|
||||
</view>
|
||||
<view
|
||||
class="memu-item"
|
||||
@tap="toAddressList"
|
||||
>
|
||||
<view class="i-name">
|
||||
<image src="@/static/images/icon/myAddr.png" />
|
||||
<text>收货地址</text>
|
||||
</view>
|
||||
<view class="arrowhead" />
|
||||
</view>
|
||||
</view>
|
||||
<!--end 列表项 -->
|
||||
|
||||
<view
|
||||
v-if="isAuthInfo"
|
||||
class="log-out"
|
||||
@tap="logout"
|
||||
>
|
||||
<view class="log-out-n">
|
||||
<text>退出登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const picDomain = import.meta.env.VITE_APP_RESOURCES_URL
|
||||
|
||||
const isAuthInfo = ref(false)
|
||||
const loginResult = ref('')
|
||||
const orderAmount = ref('')
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow(() => {
|
||||
loginResult.value = uni.getStorageSync('loginResult')
|
||||
isAuthInfo.value = !!loginResult.value
|
||||
// 加载订单数字
|
||||
if (isAuthInfo.value) {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/p/myOrder/orderCount',
|
||||
method: 'GET',
|
||||
data: {}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
uni.hideLoading()
|
||||
orderAmount.value = data
|
||||
})
|
||||
showCollectionCount()
|
||||
}
|
||||
})
|
||||
|
||||
const toDistCenter = () => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '该功能未开源'
|
||||
})
|
||||
}
|
||||
const toCouponCenter = () => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '该功能未开源'
|
||||
})
|
||||
}
|
||||
const toMyCouponPage = () => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '该功能未开源'
|
||||
})
|
||||
}
|
||||
const handleTips = () => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '该功能未开源'
|
||||
})
|
||||
}
|
||||
const toAddressList = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/delivery-address/delivery-address'
|
||||
})
|
||||
}
|
||||
|
||||
const toOrderListPage = (e) => {
|
||||
const sts = e.currentTarget.dataset.sts
|
||||
uni.navigateTo({
|
||||
url: '/pages/orderList/orderList?sts=' + sts
|
||||
})
|
||||
}
|
||||
|
||||
const collectionCount = ref(0)
|
||||
/**
|
||||
* 查询所有的收藏量
|
||||
*/
|
||||
const showCollectionCount = () => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/p/user/collection/count',
|
||||
method: 'GET',
|
||||
data: {}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
uni.hideLoading()
|
||||
collectionCount.value = data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 我的收藏跳转
|
||||
*/
|
||||
const myCollectionHandle = () => {
|
||||
let url = '/pages/prod-classify/prod-classify?sts=5'
|
||||
const id = 0
|
||||
const title = '我的收藏商品'
|
||||
if (id) {
|
||||
url += '&tagid=' + id + '&title=' + title
|
||||
}
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 去登陆
|
||||
*/
|
||||
const toLogin = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/accountLogin/accountLogin'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 退出登录
|
||||
*/
|
||||
const logout = () => {
|
||||
http.request({
|
||||
url: '/logOut',
|
||||
method: 'post'
|
||||
})
|
||||
.then(() => {
|
||||
util.removeTabBadge()
|
||||
uni.removeStorageSync('loginResult')
|
||||
uni.removeStorageSync('token')
|
||||
uni.showToast({
|
||||
title: '退出成功',
|
||||
icon: 'none'
|
||||
})
|
||||
orderAmount.value = ''
|
||||
setTimeout(() => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './user.scss';
|
||||
</style>
|
||||
BIN
front-end/mall4uni/src/static/images/icon/addr.png
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
front-end/mall4uni/src/static/images/icon/bg1.png
Normal file
|
After Width: | Height: | Size: 800 B |
BIN
front-end/mall4uni/src/static/images/icon/car-new.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
front-end/mall4uni/src/static/images/icon/car.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
front-end/mall4uni/src/static/images/icon/clear-his.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
front-end/mall4uni/src/static/images/icon/coupon-ot.png
Normal file
|
After Width: | Height: | Size: 7.5 KiB |
BIN
front-end/mall4uni/src/static/images/icon/coupon-used.png
Normal file
|
After Width: | Height: | Size: 7.4 KiB |
BIN
front-end/mall4uni/src/static/images/icon/def.png
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
BIN
front-end/mall4uni/src/static/images/icon/delive-dot.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
front-end/mall4uni/src/static/images/icon/delivery-car.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
front-end/mall4uni/src/static/images/icon/dot.png
Normal file
|
After Width: | Height: | Size: 775 B |
BIN
front-end/mall4uni/src/static/images/icon/empty-cash.png
Normal file
|
After Width: | Height: | Size: 7.5 KiB |
BIN
front-end/mall4uni/src/static/images/icon/everydaySale.png
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
front-end/mall4uni/src/static/images/icon/getCoupon.png
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
BIN
front-end/mall4uni/src/static/images/icon/head04.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
front-end/mall4uni/src/static/images/icon/horn.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
front-end/mall4uni/src/static/images/icon/menu-01.png
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
front-end/mall4uni/src/static/images/icon/menu-02.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
front-end/mall4uni/src/static/images/icon/menu-03.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
front-end/mall4uni/src/static/images/icon/menu-04.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
front-end/mall4uni/src/static/images/icon/more.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
front-end/mall4uni/src/static/images/icon/myAddr.png
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
BIN
front-end/mall4uni/src/static/images/icon/myCoupon.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
front-end/mall4uni/src/static/images/icon/newProd.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
front-end/mall4uni/src/static/images/icon/neweveryday.png
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
BIN
front-end/mall4uni/src/static/images/icon/newprods.png
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
BIN
front-end/mall4uni/src/static/images/icon/plus-sign.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
front-end/mall4uni/src/static/images/icon/prod-col-red.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
front-end/mall4uni/src/static/images/icon/prod-col.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
front-end/mall4uni/src/static/images/icon/promotion.png
Normal file
|
After Width: | Height: | Size: 2.1 KiB |
BIN
front-end/mall4uni/src/static/images/icon/revise.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
front-end/mall4uni/src/static/images/icon/search-01.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
front-end/mall4uni/src/static/images/icon/search-col.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
front-end/mall4uni/src/static/images/icon/search-col2.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
front-end/mall4uni/src/static/images/icon/search.png
Normal file
|
After Width: | Height: | Size: 767 B |
BIN
front-end/mall4uni/src/static/images/icon/star-empty.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
front-end/mall4uni/src/static/images/icon/star-red.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |