mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-11-06 17:09:01 +08:00
Compare commits
621 Commits
v4.2
...
feature/pi
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
75b20f494d | ||
|
|
cc71d20aa6 | ||
|
|
06af86af3f | ||
|
|
8188a8af7b | ||
|
|
0637f1da1f | ||
|
|
4adcf0a13a | ||
|
|
d72f02f7cf | ||
|
|
7b2b045fd4 | ||
|
|
e1a48d6d11 | ||
|
|
1411f15679 | ||
|
|
af7bd78614 | ||
|
|
0170c92f9a | ||
|
|
5e59f2cd3c | ||
|
|
6b59ae3d6e | ||
|
|
b589c551bf | ||
|
|
b8a60a9369 | ||
|
|
1032b6e34d | ||
|
|
0a47f84c32 | ||
|
|
2d4a316129 | ||
|
|
b1d3f56f10 | ||
|
|
87477bc32b | ||
|
|
6c13dc1b65 | ||
|
|
215754a6de | ||
|
|
c15e954549 | ||
|
|
755f574e8e | ||
|
|
986625c516 | ||
|
|
a41936dc00 | ||
|
|
eba79a78e8 | ||
|
|
a700a3d211 | ||
|
|
b603f8c451 | ||
|
|
b773ada7a8 | ||
|
|
40d42f001d | ||
|
|
a108bb4d13 | ||
|
|
79433dd766 | ||
|
|
fb10038547 | ||
|
|
c6d58f28b7 | ||
|
|
a32f6d2313 | ||
|
|
9cf9957e5b | ||
|
|
cc9d5535cf | ||
|
|
74d186ff36 | ||
|
|
a3193c3b68 | ||
|
|
e858741bb8 | ||
|
|
0bffe81c6b | ||
|
|
2107e3f03a | ||
|
|
27034902fe | ||
|
|
42e9b7c15f | ||
|
|
30ce901137 | ||
|
|
7cc605bed1 | ||
|
|
2ad8a7f5a6 | ||
|
|
e30ff03b10 | ||
|
|
ba4e9126e8 | ||
|
|
43bf0773bc | ||
|
|
f6d4fac35e | ||
|
|
ef3401a9e4 | ||
|
|
8f540224bb | ||
|
|
c12c76f6f5 | ||
|
|
4fdd266dec | ||
|
|
9d18d09cab | ||
|
|
4a194ee0a1 | ||
|
|
69b8395686 | ||
|
|
907ad2d02c | ||
|
|
651d1106da | ||
|
|
4b1a09cbc3 | ||
|
|
ee6f66cac3 | ||
|
|
f51fcad9c2 | ||
|
|
359d1ad24c | ||
|
|
7d3daf2f02 | ||
|
|
eb40916cf7 | ||
|
|
370c63afcd | ||
|
|
94e846af6c | ||
|
|
a6ba2b3dbe | ||
|
|
6754a54f1b | ||
|
|
7626f944ad | ||
|
|
27134526a0 | ||
|
|
4bb4bbdc6b | ||
|
|
239855e53b | ||
|
|
8ed2997fcf | ||
|
|
3ec61f41bc | ||
|
|
38defd1201 | ||
|
|
7566076fa4 | ||
|
|
41e8cff749 | ||
|
|
f727e01ef0 | ||
|
|
02b5f246a6 | ||
|
|
349ffa4f34 | ||
|
|
4d0b0fb5e4 | ||
|
|
fc3cad18e6 | ||
|
|
23e3825366 | ||
|
|
686aed848d | ||
|
|
4e2fcbc1fe | ||
|
|
e14481ce6b | ||
|
|
6198a6d244 | ||
|
|
90ee7d5b1d | ||
|
|
b1743cefb0 | ||
|
|
2965800d87 | ||
|
|
3a44b7243d | ||
|
|
5f293d929d | ||
|
|
6654c1de51 | ||
|
|
dc2bef455a | ||
|
|
c290c7a329 | ||
|
|
d5663cfb4d | ||
|
|
b7cfe13ffd | ||
|
|
134a8b19e4 | ||
|
|
137232290b | ||
|
|
87743cb77d | ||
|
|
7939998a30 | ||
|
|
1fcc016ccd | ||
|
|
3219f6d576 | ||
|
|
83da8f3003 | ||
|
|
c858c82950 | ||
|
|
f9c7610976 | ||
|
|
919af44fda | ||
|
|
db7cfcea85 | ||
|
|
e95aed8e38 | ||
|
|
24454e2546 | ||
|
|
0ee03d9fcf | ||
|
|
c93862066b | ||
|
|
46dbeb77c8 | ||
|
|
8bcc9de352 | ||
|
|
bac8e3a327 | ||
|
|
29a20afe93 | ||
|
|
0ef3eb9bf7 | ||
|
|
ef6f572311 | ||
|
|
c1fce859ce | ||
|
|
2cd7b7b63f | ||
|
|
75991db6f6 | ||
|
|
f894b5b1fc | ||
|
|
7ae6967b1e | ||
|
|
de94f212c3 | ||
|
|
d166d5943c | ||
|
|
c0e5d75cc6 | ||
|
|
9195bcdeb5 | ||
|
|
7778a62d6a | ||
|
|
31c341148f | ||
|
|
0b601e4f3e | ||
|
|
1d93d9103d | ||
|
|
5bc5152e49 | ||
|
|
e9d1a81612 | ||
|
|
7d3d06e8af | ||
|
|
55bb6ab51a | ||
|
|
70c2e68bff | ||
|
|
17287df293 | ||
|
|
a8d321c66d | ||
|
|
fad004aed5 | ||
|
|
fe9060073f | ||
|
|
393c60200f | ||
|
|
e61222928e | ||
|
|
b51caa9135 | ||
|
|
992bb76072 | ||
|
|
863315eaed | ||
|
|
52bf47e358 | ||
|
|
8f49dce8f0 | ||
|
|
4490a4119e | ||
|
|
2d0b78af52 | ||
|
|
7148b32c43 | ||
|
|
20b2ca04f0 | ||
|
|
25677ced97 | ||
|
|
4517c9562a | ||
|
|
2634017fb3 | ||
|
|
b69c7d5a05 | ||
|
|
098bee9bb4 | ||
|
|
2d369ad729 | ||
|
|
3bf0be98cb | ||
|
|
1046a1052e | ||
|
|
1cc6cc4ac7 | ||
|
|
dae3e74a60 | ||
|
|
fddceb5f36 | ||
|
|
2aed3b9305 | ||
|
|
101aa279d8 | ||
|
|
abbadfbab1 | ||
|
|
8ad76a5278 | ||
|
|
726a85e76c | ||
|
|
2d69967f51 | ||
|
|
4aeaa115dc | ||
|
|
2d251faff1 | ||
|
|
231936c91d | ||
|
|
37b8e17cba | ||
|
|
7d928e3df9 | ||
|
|
bb4435fab4 | ||
|
|
1e0580ba15 | ||
|
|
f5716c901d | ||
|
|
2c4c0ea4f0 | ||
|
|
63fee6f272 | ||
|
|
9ab1cec1bb | ||
|
|
7c2a50eec0 | ||
|
|
82810eb179 | ||
|
|
53917d32c0 | ||
|
|
f324fbe71d | ||
|
|
c6afd889ef | ||
|
|
116ba65bda | ||
|
|
02812a9128 | ||
|
|
fcc99b61e8 | ||
|
|
c9a3c72c10 | ||
|
|
abc9c59e29 | ||
|
|
9ed897aa85 | ||
|
|
5a84f2192f | ||
|
|
9ac9cd480b | ||
|
|
b635f91e9f | ||
|
|
99079f0b3d | ||
|
|
317c2171e4 | ||
|
|
cba7ae98fa | ||
|
|
e6dcb5cd3a | ||
|
|
94f1da349a | ||
|
|
06b5a9d7f1 | ||
|
|
48bebc0503 | ||
|
|
af1897f4ea | ||
|
|
8238211f33 | ||
|
|
907f51b13a | ||
|
|
3b036a7cb7 | ||
|
|
9a0cb35637 | ||
|
|
1c938e0007 | ||
|
|
f31ff79a39 | ||
|
|
d5ea5a4fa9 | ||
|
|
c7237e561c | ||
|
|
6717721725 | ||
|
|
5e5d5b904b | ||
|
|
a353022d36 | ||
|
|
ca4e458db1 | ||
|
|
7b8e954555 | ||
|
|
b4f46ded2b | ||
|
|
274a03fe73 | ||
|
|
0a07ebfe8b | ||
|
|
39c82361b6 | ||
|
|
89f4e051ca | ||
|
|
c04ae5eb39 | ||
|
|
ec692e1134 | ||
|
|
02a1f7ee83 | ||
|
|
97aa989e0b | ||
|
|
ac67c16378 | ||
|
|
2bdb8682e1 | ||
|
|
c070ed01f7 | ||
|
|
af4cfe7fba | ||
|
|
6a8e666fb8 | ||
|
|
c097a423f9 | ||
|
|
f0dcf473e8 | ||
|
|
bdff6a3c93 | ||
|
|
74829c966d | ||
|
|
77db8df123 | ||
|
|
a403a7d432 | ||
|
|
951d2d7f30 | ||
|
|
e8ddc53188 | ||
|
|
0708226890 | ||
|
|
b0447eec3a | ||
|
|
e37a8ec41d | ||
|
|
467b7a0cba | ||
|
|
9a583e75f3 | ||
|
|
f9ae51606f | ||
|
|
e768a4c1db | ||
|
|
a77390bf5c | ||
|
|
1e41801612 | ||
|
|
d870ee409a | ||
|
|
b2a448447c | ||
|
|
38a00e6177 | ||
|
|
767ad94565 | ||
|
|
7499682883 | ||
|
|
9192f32bbb | ||
|
|
d256fd3559 | ||
|
|
5844e74d32 | ||
|
|
989a567ecb | ||
|
|
d5d47ffae5 | ||
|
|
8001622be2 | ||
|
|
fc5a6a6f7f | ||
|
|
dc15439861 | ||
|
|
c9c0d2d171 | ||
|
|
44cf46fed3 | ||
|
|
63ebf1a7c5 | ||
|
|
bc10d774a7 | ||
|
|
90f656beab | ||
|
|
66c729b539 | ||
|
|
db4dfd3edc | ||
|
|
e7879aac65 | ||
|
|
723570b392 | ||
|
|
5dc562396c | ||
|
|
b266aad634 | ||
|
|
a25c75bf7a | ||
|
|
43fc159e27 | ||
|
|
2e37cb8158 | ||
|
|
529175c0ab | ||
|
|
071599074c | ||
|
|
d420c128eb | ||
|
|
b33fd7e2b3 | ||
|
|
815118d496 | ||
|
|
83031507b9 | ||
|
|
7565086291 | ||
|
|
7c71375b6c | ||
|
|
c919b1463c | ||
|
|
b72d831df9 | ||
|
|
2c494ac0d1 | ||
|
|
83b2295818 | ||
|
|
11a831299a | ||
|
|
bbe315fb45 | ||
|
|
9c03205c9f | ||
|
|
12a4e15c13 | ||
|
|
0843e457b0 | ||
|
|
b1bde2f105 | ||
|
|
d2ff0b1ea1 | ||
|
|
7ff13babaa | ||
|
|
0da7dc6796 | ||
|
|
f84f9ab696 | ||
|
|
8b5f7def93 | ||
|
|
8c33b899bf | ||
|
|
8767ad6d3f | ||
|
|
f797538935 | ||
|
|
cfb4310d6f | ||
|
|
d59cd74bf0 | ||
|
|
c378ce7d71 | ||
|
|
9cc6f519a9 | ||
|
|
18251dde89 | ||
|
|
04bf707836 | ||
|
|
5e38247ce8 | ||
|
|
979a1e6b14 | ||
|
|
9127d61a59 | ||
|
|
fed76499a0 | ||
|
|
6843feebfa | ||
|
|
e650ee66ff | ||
|
|
fa6f571f61 | ||
|
|
09b7ece510 | ||
|
|
b30caf051c | ||
|
|
861bf1eb07 | ||
|
|
a0f1417f42 | ||
|
|
2b5f57dfab | ||
|
|
22a5f15201 | ||
|
|
6baf1534c1 | ||
|
|
df3ce9eda7 | ||
|
|
7f71614781 | ||
|
|
8c5b703c47 | ||
|
|
394cda3efd | ||
|
|
7b9b5c2819 | ||
|
|
4625c087d5 | ||
|
|
f7c3c56b53 | ||
|
|
0aa9831a62 | ||
|
|
ea32948b84 | ||
|
|
0feaf55381 | ||
|
|
eaa04e395b | ||
|
|
0f8d53b09a | ||
|
|
031aa0f173 | ||
|
|
5f5b571899 | ||
|
|
b6f041f68c | ||
|
|
558a3228be | ||
|
|
2e4bedae31 | ||
|
|
e2905e8fdd | ||
|
|
ddee1fca8e | ||
|
|
d2b13e146e | ||
|
|
9b3704a141 | ||
|
|
9b5e2ec7f0 | ||
|
|
adf4e106d8 | ||
|
|
d01edbdfe2 | ||
|
|
f08d166c86 | ||
|
|
b8c61fdabd | ||
|
|
6b3b61acb5 | ||
|
|
1a6951b717 | ||
|
|
165df678b3 | ||
|
|
2abbee0a49 | ||
|
|
a6883fe607 | ||
|
|
6ee0abd150 | ||
|
|
68e927c6f4 | ||
|
|
1776f43425 | ||
|
|
fc8123c194 | ||
|
|
34448b8a23 | ||
|
|
7179ca41de | ||
|
|
3c7d940ba8 | ||
|
|
1225a41de4 | ||
|
|
d101cd1b6a | ||
|
|
4851487ecd | ||
|
|
eb0faad7ec | ||
|
|
524666f6e4 | ||
|
|
e9da67dcce | ||
|
|
aa8fc523df | ||
|
|
63570a923b | ||
|
|
638e82dd28 | ||
|
|
68dc960232 | ||
|
|
bbbe25e339 | ||
|
|
d8cca8b372 | ||
|
|
1e9df74034 | ||
|
|
8c8522c68e | ||
|
|
5afc5477a9 | ||
|
|
a6e48813cd | ||
|
|
a1a286dfb6 | ||
|
|
132c64f438 | ||
|
|
8e0bde3428 | ||
|
|
d9ac9eb2eb | ||
|
|
6ccdeba85e | ||
|
|
bbf0f39d69 | ||
|
|
109af44c6b | ||
|
|
bc9c012bb2 | ||
|
|
ba02c6ca7d | ||
|
|
b840a0adf1 | ||
|
|
5cb2f6ad91 | ||
|
|
36a7a80814 | ||
|
|
17299d00e1 | ||
|
|
a56ea2d456 | ||
|
|
3a705cce8e | ||
|
|
5550285531 | ||
|
|
0ba7644862 | ||
|
|
0e169bd116 | ||
|
|
4b9515b21a | ||
|
|
3f0e34b715 | ||
|
|
a393910c0a | ||
|
|
213f4b8408 | ||
|
|
8cb01d0ba8 | ||
|
|
d8c46b49d9 | ||
|
|
73e4ba9994 | ||
|
|
3aa5b21d49 | ||
|
|
f90807ebc6 | ||
|
|
a555009ac9 | ||
|
|
af21d1abba | ||
|
|
dcf77ba862 | ||
|
|
f281011a47 | ||
|
|
6bb8ca73d3 | ||
|
|
a070edc1c2 | ||
|
|
09485747a6 | ||
|
|
cbd73ae638 | ||
|
|
1aeec348eb | ||
|
|
ea8e783909 | ||
|
|
e06338dd2e | ||
|
|
d6fffc43e4 | ||
|
|
7633f84385 | ||
|
|
93fc20c825 | ||
|
|
ca32c11296 | ||
|
|
d2b8d2238a | ||
|
|
04ea9c39e1 | ||
|
|
905e965917 | ||
|
|
1ada23584d | ||
|
|
1456fd9076 | ||
|
|
941dd6015d | ||
|
|
b1f320f361 | ||
|
|
63e3718178 | ||
|
|
9bfa30f849 | ||
|
|
bb24b27963 | ||
|
|
403d93831f | ||
|
|
9a149eb673 | ||
|
|
470995c13d | ||
|
|
ddcd03f096 | ||
|
|
b8fe2aacf1 | ||
|
|
3c9f0d3c5c | ||
|
|
ded0ab5381 | ||
|
|
42d20f0fd9 | ||
|
|
0e8ace560b | ||
|
|
6e04a5d3da | ||
|
|
a3d8a8037f | ||
|
|
1dc42e1333 | ||
|
|
68cdcd8587 | ||
|
|
ebf0d585fc | ||
|
|
75365c428d | ||
|
|
3e30f5e18f | ||
|
|
e8d3b3decb | ||
|
|
5dcb364469 | ||
|
|
df9530e48f | ||
|
|
240a27a61a | ||
|
|
a6a8a5d583 | ||
|
|
a9046aded4 | ||
|
|
6f60cc6afb | ||
|
|
6e5470e20c | ||
|
|
dc04b4220f | ||
|
|
b1cfdef41c | ||
|
|
06e609613e | ||
|
|
8e66c24ff9 | ||
|
|
b4e2761b1f | ||
|
|
884d3e8c34 | ||
|
|
53739d24df | ||
|
|
f59a76d9a0 | ||
|
|
6cd36b19b2 | ||
|
|
b22ad88f37 | ||
|
|
f87ec18669 | ||
|
|
64686e165f | ||
|
|
055bad9ca9 | ||
|
|
c6e04bc4b9 | ||
|
|
b6782df565 | ||
|
|
2b4cb2cc88 | ||
|
|
14d12d90e3 | ||
|
|
4ed3832a5f | ||
|
|
b0714ab27e | ||
|
|
201ee840d5 | ||
|
|
79f737404e | ||
|
|
0b649e3f5b | ||
|
|
c756223363 | ||
|
|
ea60742d82 | ||
|
|
2ce90ba008 | ||
|
|
63211457e4 | ||
|
|
67f014d74a | ||
|
|
08fffade74 | ||
|
|
c8adb52660 | ||
|
|
4f74502951 | ||
|
|
4a5a4c19a5 | ||
|
|
e73d76eb57 | ||
|
|
b9a89d7c40 | ||
|
|
1a1bf814a0 | ||
|
|
f52e929d04 | ||
|
|
38d8d2e1ca | ||
|
|
ab4015d0e0 | ||
|
|
15027e51ee | ||
|
|
557d7ef1d9 | ||
|
|
4dea906e23 | ||
|
|
68e25cb0b3 | ||
|
|
4d033e59f1 | ||
|
|
a80c579d8a | ||
|
|
5cc48ed462 | ||
|
|
2abc8ff9d8 | ||
|
|
198bd6c322 | ||
|
|
7fb96f1eac | ||
|
|
2020f55826 | ||
|
|
c58f8d7831 | ||
|
|
32a6bbacd0 | ||
|
|
b08c77b6c0 | ||
|
|
a8836744f6 | ||
|
|
3a2202a2e8 | ||
|
|
896749d812 | ||
|
|
09ec1e8c06 | ||
|
|
07627c41e3 | ||
|
|
e4e278c2fa | ||
|
|
1b1b239ba0 | ||
|
|
c1d4d39265 | ||
|
|
dfd3885486 | ||
|
|
892f49c83a | ||
|
|
85d0671443 | ||
|
|
f22e7b9fcb | ||
|
|
d282ef1b24 | ||
|
|
9c2529ae3d | ||
|
|
108b7f5b0b | ||
|
|
b4c8be3e63 | ||
|
|
4064c56b21 | ||
|
|
1416762afe | ||
|
|
17f23fe920 | ||
|
|
c412c92b3e | ||
|
|
deed875c1b | ||
|
|
f600b628ce | ||
|
|
0c887a25e3 | ||
|
|
89dbd32351 | ||
|
|
98c5863973 | ||
|
|
3d1089b756 | ||
|
|
6c8102aecd | ||
|
|
56fdb2c2f0 | ||
|
|
7c85460fbb | ||
|
|
47b58c290a | ||
|
|
cdf57806d6 | ||
|
|
9671d60555 | ||
|
|
f8b388c968 | ||
|
|
91cc98e853 | ||
|
|
58484f1b61 | ||
|
|
d65ad6c5fd | ||
|
|
68bc1d6974 | ||
|
|
b1c518c3a8 | ||
|
|
48c7030c0e | ||
|
|
13c9d521f9 | ||
|
|
375653eb78 | ||
|
|
8c72cdcb0a | ||
|
|
cfb88d798b | ||
|
|
ebf32a18b0 | ||
|
|
5f6c1adf91 | ||
|
|
44648e9971 | ||
|
|
fd37087c43 | ||
|
|
4c47a1249f | ||
|
|
ea3563e4e9 | ||
|
|
c98c5b64e1 | ||
|
|
3b9b2e8ba2 | ||
|
|
cebde87682 | ||
|
|
0b2bf1faf1 | ||
|
|
73560e8366 | ||
|
|
afabfdd1d5 | ||
|
|
dadce33d74 | ||
|
|
fe0d888da0 | ||
|
|
58f33b05dd | ||
|
|
ba3034e5cb | ||
|
|
4c7663d671 | ||
|
|
a78dca1a0c | ||
|
|
c529688932 | ||
|
|
0cfb5d42c0 | ||
|
|
13f3971f2a | ||
|
|
075399d329 | ||
|
|
90d9fa9671 | ||
|
|
6ca01d2c71 | ||
|
|
275d76c0dd | ||
|
|
c53af2fcc3 | ||
|
|
c45a378665 | ||
|
|
cb982c2883 | ||
|
|
52e6c57f70 | ||
|
|
9a91e58f2c | ||
|
|
25fb26b7d0 | ||
|
|
8f5f44022b | ||
|
|
a2994454aa | ||
|
|
915aee9143 | ||
|
|
224eb05703 | ||
|
|
775bf3055d | ||
|
|
d76bab4b71 | ||
|
|
3d1e175194 | ||
|
|
885ccb5006 | ||
|
|
eb11f9dbae | ||
|
|
415dd15dd1 | ||
|
|
3f19fc8c15 | ||
|
|
464379178d | ||
|
|
1fbb43c848 | ||
|
|
b93395d0dc | ||
|
|
1141923407 | ||
|
|
209060fd76 | ||
|
|
e02fa75274 | ||
|
|
4ca71d0987 | ||
|
|
123127d977 | ||
|
|
d19b02a97d | ||
|
|
aad083970e | ||
|
|
436dd56e54 | ||
|
|
a9db24d1ad | ||
|
|
a6fec5cf70 | ||
|
|
0ea121e59e | ||
|
|
65a9110ada | ||
|
|
fc9b7bac16 | ||
|
|
3171fddd7b | ||
|
|
2df8be328f | ||
|
|
8f942bf01e | ||
|
|
346eb13d50 | ||
|
|
b8e0ddcb5a | ||
|
|
10d8f25ddf | ||
|
|
96d42cdab8 | ||
|
|
3294f12268 | ||
|
|
29630a8495 | ||
|
|
9f48cc7110 | ||
|
|
efb2a7963e | ||
|
|
8ecc85a21c | ||
|
|
765ad65b8f | ||
|
|
8500fb4087 | ||
|
|
ef51049ed4 | ||
|
|
ef5941de00 | ||
|
|
4599b02a41 |
10
.gitignore
vendored
10
.gitignore
vendored
@@ -1,10 +1,4 @@
|
||||
# OSX
|
||||
#
|
||||
node_modules/
|
||||
unpackage/
|
||||
.DS_Store
|
||||
|
||||
#Intellij idea
|
||||
.idea/
|
||||
/idea/
|
||||
.vscode/
|
||||
/unpackage/
|
||||
.hbuilderx/launch.json
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
|
||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
|
||||
"version": "0.0",
|
||||
"configurations": [{
|
||||
"type": "uniCloud",
|
||||
"default": {
|
||||
"launchtype": "remote"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
15
.vscode/launch.json
vendored
15
.vscode/launch.json
vendored
@@ -1,15 +0,0 @@
|
||||
{
|
||||
// 使用 IntelliSense 了解相关属性。
|
||||
// 悬停以查看现有属性的描述。
|
||||
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "pwa-chrome",
|
||||
"request": "launch",
|
||||
"name": "Launch Chrome against localhost",
|
||||
"url": "http://localhost:8080",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
}
|
||||
]
|
||||
}
|
||||
540
App.vue
540
App.vue
@@ -1,190 +1,350 @@
|
||||
|
||||
|
||||
<script>
|
||||
/**
|
||||
* vuex管理登录状态,具体可以参考官方登录模板示例
|
||||
*/
|
||||
import { mapMutations } from "vuex";
|
||||
import APPUpdate from "@/plugins/APPUpdate";
|
||||
import { getClipboardData } from "@/js_sdk/h5-copy/h5-copy.js";
|
||||
import config from "@/config/config";
|
||||
// 悬浮球
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
config,
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听返回
|
||||
*/
|
||||
onBackPress(e) {
|
||||
if (e.from == "backbutton") {
|
||||
let routes = getCurrentPages();
|
||||
let curRoute = routes[routes.length - 1].options;
|
||||
routes.forEach((item) => {
|
||||
if (
|
||||
item.route == "pages/tabbar/cart/cartList" ||
|
||||
item.route.indexOf("pages/product/goods") != -1
|
||||
) {
|
||||
uni.redirectTo({
|
||||
url: item.route,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (curRoute.addId) {
|
||||
uni.reLaunch({
|
||||
url: "/pages/tabbar/cart/cartList",
|
||||
});
|
||||
} else {
|
||||
uni.navigateBack();
|
||||
}
|
||||
return true; //阻止默认返回行为
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["login"]),
|
||||
},
|
||||
onLaunch: function () {
|
||||
// #ifdef APP-PLUS
|
||||
this.checkArguments(); // 检测启动参数
|
||||
APPUpdate();
|
||||
|
||||
// 重点是以下: 一定要监听后台恢复 !一定要
|
||||
plus.globalEvent.addEventListener("newintent", (e) => {
|
||||
this.checkArguments(); // 检测启动参数
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// #ifndef H5
|
||||
this.getClipboard();
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// TODO 开屏广告 后续优化添加
|
||||
launch() {
|
||||
try {
|
||||
// 获取本地存储中launchFlag标识 开屏广告
|
||||
const value = uni.getStorageSync("launchFlag");
|
||||
if (!value) {
|
||||
// this.$u.route("/pages/index/agreement");
|
||||
} else {
|
||||
//app启动时打开启动广告页
|
||||
var w = plus.webview.open(
|
||||
"/hybrid/html/advertise/advertise.html",
|
||||
"本地地址",
|
||||
{
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
zindex: 999,
|
||||
},
|
||||
"fade-in",
|
||||
500
|
||||
);
|
||||
//设置定时器,4s后关闭启动广告页
|
||||
setTimeout(function () {
|
||||
plus.webview.close(w);
|
||||
APPUpdate();
|
||||
}, 3000);
|
||||
}
|
||||
} catch (e) {
|
||||
// error
|
||||
uni.setStorage({
|
||||
key: "launchFlag",
|
||||
data: true,
|
||||
success: function () {
|
||||
console.log("error时存储launchFlag");
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取粘贴板数据
|
||||
*/
|
||||
async getClipboard() {
|
||||
let res = await getClipboardData();
|
||||
/**
|
||||
* 解析粘贴板数据
|
||||
*/
|
||||
if (res.indexOf(config.shareLink) != -1) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "检测到一个分享链接是否跳转?",
|
||||
confirmText: "跳转",
|
||||
success: function (callback) {
|
||||
if (callback.confirm) {
|
||||
const path = res.split(config.shareLink)[1];
|
||||
if (path.indexOf("tabbar") != -1) {
|
||||
uni.switchTab({
|
||||
url: path,
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: path,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* h5中打开app获取跳转app的链接并跳转
|
||||
*/
|
||||
checkArguments() {
|
||||
// #ifdef APP-PLUS
|
||||
setTimeout(() => {
|
||||
const args = plus.runtime.arguments;
|
||||
if (args) {
|
||||
const argsStr = decodeURIComponent(args);
|
||||
const path = argsStr.split("//")[1];
|
||||
if (path.indexOf("tabbar") != -1) {
|
||||
uni.switchTab({
|
||||
url: `/${path}`,
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/${path}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "uview-ui/index.scss";
|
||||
@import "./static/font/iconfont/iconfont.css";
|
||||
// -------适配底部安全区 苹果x系列刘海屏
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
.mp-iphonex-bottom {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-sizing: content-box;
|
||||
height: auto !important;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
// #endif
|
||||
|
||||
body {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
/************************ */
|
||||
.w200 {
|
||||
width: 200rpx !important;
|
||||
}
|
||||
.flex1 {
|
||||
flex: 1; //必须父级设置flex
|
||||
}
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
import config from '@/config/config'
|
||||
import { getClipboardData } from '@/js_sdk/h5-copy/h5-copy.js'
|
||||
import APPUpdate from '@/plugins/APPUpdate'
|
||||
import storage from '@/utils/storage'
|
||||
import { getThemeSetting, getCategoryPageSetting } from '@/api/common.js'
|
||||
import {
|
||||
applyTabBarStyle,
|
||||
cacheTheme,
|
||||
loadCachedTheme,
|
||||
normalizeTheme,
|
||||
} from '@/utils/theme'
|
||||
import {
|
||||
cacheCategoryPageSetting,
|
||||
loadCachedCategoryPageSetting,
|
||||
normalizeCategoryPageSetting,
|
||||
} from '@/utils/categoryPageSetting'
|
||||
import { onLaunch, onShow } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import { handleAppLaunchScene } from '@/utils/distributionBind.js'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.onAppRoute((res) => {
|
||||
applyTabBarStyle(store.state.theme && store.state.theme.mainColor, res && res.path)
|
||||
})
|
||||
// #endif
|
||||
|
||||
onLaunch((val) => {
|
||||
initTheme()
|
||||
initCategoryPageSetting()
|
||||
handleAppLaunchScene(val)
|
||||
if (val?.query?.inviter) {
|
||||
storage.setInviter(val.query.inviter)
|
||||
}
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
plus.globalEvent.addEventListener('newintent', () => {
|
||||
checkArguments()
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
applyUpdateWeChat()
|
||||
// #endif
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
applyTabBarStyle(store.state.theme && store.state.theme.mainColor)
|
||||
|
||||
// #ifndef H5
|
||||
if (config.enableGetClipboard) {
|
||||
getClipboard()
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
if (storage.getShow()) {
|
||||
if (uni.getSystemInfoSync().platform == 'ios') {
|
||||
uni.navigateTo({ url: '/pages/tabbar/screen/fullScreen' })
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
})
|
||||
|
||||
function initTheme() {
|
||||
const cached = loadCachedTheme()
|
||||
if (cached) {
|
||||
store.commit('SET_THEME', cached)
|
||||
applyTabBarStyle(cached.mainColor)
|
||||
}
|
||||
getThemeSetting()
|
||||
.then((res) => {
|
||||
if (res.data?.success && res.data.result?.settingValue) {
|
||||
try {
|
||||
const raw = JSON.parse(res.data.result.settingValue)
|
||||
const theme = normalizeTheme(raw)
|
||||
store.commit('SET_THEME', theme)
|
||||
cacheTheme(theme)
|
||||
applyTabBarStyle(theme.mainColor)
|
||||
} catch (e) {
|
||||
// 主题配置解析失败时使用缓存
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
function initCategoryPageSetting() {
|
||||
const cached = loadCachedCategoryPageSetting()
|
||||
if (cached) {
|
||||
store.commit('SET_CATEGORY_PAGE_SETTING', cached)
|
||||
}
|
||||
getCategoryPageSetting()
|
||||
.then((res) => {
|
||||
if (res.data?.success) {
|
||||
const setting = normalizeCategoryPageSetting(res.data.result)
|
||||
store.commit('SET_CATEGORY_PAGE_SETTING', setting)
|
||||
cacheCategoryPageSetting(setting)
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
function applyUpdateWeChat() {
|
||||
const updateManager = uni.getUpdateManager()
|
||||
|
||||
updateManager.onCheckForUpdate(() => {})
|
||||
|
||||
updateManager.onUpdateReady(() => {
|
||||
uni.showModal({
|
||||
title: '更新提示',
|
||||
content: '发现新版本,是否重启应用?',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
updateManager.applyUpdate()
|
||||
}
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
updateManager.onUpdateFailed(() => {})
|
||||
}
|
||||
|
||||
function launch() {
|
||||
try {
|
||||
const value = uni.getStorageSync('launchFlag')
|
||||
if (!value) {
|
||||
// uni.navigateTo({ url: '/pages/index/agreement' })
|
||||
} else {
|
||||
const w = plus.webview.open(
|
||||
'/hybrid/html/advertise/advertise.html',
|
||||
'本地地址',
|
||||
{
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
zindex: 999,
|
||||
},
|
||||
'fade-in',
|
||||
500,
|
||||
)
|
||||
setTimeout(() => {
|
||||
plus.webview.close(w)
|
||||
APPUpdate()
|
||||
}, 3000)
|
||||
}
|
||||
} catch (e) {
|
||||
uni.setStorage({
|
||||
key: 'launchFlag',
|
||||
data: true,
|
||||
success() {
|
||||
console.log('error时存储launchFlag')
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function getClipboard() {
|
||||
const res = await getClipboardData()
|
||||
if (res.indexOf(config.shareLink) != -1 && res != store.state.shareLink) {
|
||||
store.state.shareLink = res
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '检测到一个分享链接是否跳转?',
|
||||
confirmText: '跳转',
|
||||
success(callback) {
|
||||
if (callback.confirm) {
|
||||
const path = res.split(config.shareLink)[1]
|
||||
if (path.indexOf('tabbar') != -1) {
|
||||
uni.switchTab({ url: path })
|
||||
} else {
|
||||
uni.navigateTo({ url: path })
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function checkArguments() {
|
||||
// #ifdef APP-PLUS
|
||||
setTimeout(() => {
|
||||
const args = plus.runtime.arguments
|
||||
if (args) {
|
||||
const argsStr = decodeURIComponent(args)
|
||||
const path = argsStr.split('//')[1]
|
||||
if (path.indexOf('tabbar') != -1) {
|
||||
uni.switchTab({ url: `/${path}` })
|
||||
} else {
|
||||
uni.navigateTo({ url: `/${path}` })
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "uview-plus/index.scss";
|
||||
@import "@/styles/uview-form-fix.scss";
|
||||
|
||||
// -------适配底部安全区 苹果x系列刘海屏
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
.mp-iphonex-bottom {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-sizing: content-box;
|
||||
height: auto !important;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
body {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
/************************ */
|
||||
.w200 {
|
||||
width: 200rpx !important;
|
||||
}
|
||||
|
||||
.flex1 {
|
||||
flex: 1; //必须父级设置flex
|
||||
}
|
||||
|
||||
.light-color {
|
||||
color: $light-color;
|
||||
}
|
||||
.main-color {
|
||||
color: $main-color !important;
|
||||
}
|
||||
.bg-light-color {
|
||||
background-color: $light-color !important;
|
||||
}
|
||||
.bg-main-color {
|
||||
background-color: $main-color !important;
|
||||
}
|
||||
|
||||
// 渐变主题颜色
|
||||
.bg-linear-gradient {
|
||||
background-image: linear-gradient(25deg, var(--theme-primary, #fa123b), var(--theme-light, #ff6b35), var(--theme-aider, #ff9f28), #ffcc03);
|
||||
}
|
||||
.uni-tabbar .uni-tabbar__icon {
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: $light-color;
|
||||
color: #ffffff;
|
||||
border-width: 0px;
|
||||
border: none;
|
||||
border-radius: 44px;
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.button-hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.margin {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
color: #333333;
|
||||
height: 28px;
|
||||
border-radius: 28px;
|
||||
box-shadow: none;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.c-content {
|
||||
background-color: #ffffff;
|
||||
// margin-top: 30rpx;
|
||||
border-top: 1px solid $border-color-light;
|
||||
border-bottom: 1px solid $border-color-light;
|
||||
}
|
||||
.mt-30 {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.border-top {
|
||||
border-top: 1px solid $border-color-light;
|
||||
}
|
||||
.describe {
|
||||
color: $font-color-light;
|
||||
font-size: $font-sm;
|
||||
padding: 30rpx;
|
||||
}
|
||||
.flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-a-c{
|
||||
align-items: center;
|
||||
}
|
||||
.flex-j-sb{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wes {
|
||||
/* 多出部分用省略号表示 , 用于一行 */
|
||||
overflow: hidden;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.wes-2 {
|
||||
/* 适用于webkit内核和移动端 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wes-3 {
|
||||
/* 适用于webkit内核和移动端 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
866
LICENSE
866
LICENSE
@@ -1,661 +1,205 @@
|
||||
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/>.
|
||||
Apache License, Version 2.0
|
||||
|
||||
Copyright (c) 2020-2026 Beijing Hongye Huicheng Technology Co., Ltd. (北京宏业汇成科技有限公司)
|
||||
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
qSyvBPhDsPdxvOhC
|
||||
140
README.en.md
Normal file
140
README.en.md
Normal file
@@ -0,0 +1,140 @@
|
||||
<div align="center">
|
||||
<img src="./icon.png" width="80" alt="Lilishop Logo" />
|
||||
<h1>Lilishop(PickMall) - Mobile Client (uni-app)</h1>
|
||||
|
||||
<p>
|
||||
<a href="https://github.com/lilishop/lilishop"><img src="https://img.shields.io/github/stars/lilishop/lilishop.svg?style=social&logo=github" alt="GitHub Stars" /></a>
|
||||
<a href="https://gitee.com/beijing_hongye_huicheng/lilishop"><img src="https://gitee.com/beijing_hongye_huicheng/lilishop/badge/star.svg?theme=dark" alt="Gitee Stars" /></a>
|
||||
<a href="./LICENSE"><img src="https://img.shields.io/badge/license-Apache--2.0-blue.svg" alt="License" /></a>
|
||||
<a href="https://vuejs.org/"><img src="https://img.shields.io/badge/Vue-3-brightgreen.svg" alt="Vue 3" /></a>
|
||||
<a href="https://uniapp.dcloud.net.cn/"><img src="https://img.shields.io/badge/uni--app-Vue3-blue.svg" alt="uni-app" /></a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="https://pickmall.cn">🏠 Official Website</a> ·
|
||||
<a href="https://bdwx2tfwwt.feishu.cn/wiki/space/7675179368632617952?ccm_open_type=lark_wiki_spaceLink&open_tab_from=wiki_home">📖 Product Documentation</a> ·
|
||||
<a href="#2-online-demo">📱 Online Demo</a> ·
|
||||
<a href="https://github.com/lilishop/lilishop">💻 GitHub</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="./README.md">简体中文</a> | <b>English</b>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
> ⭐ **If you like this project, please click `Star` in the top-right corner to support us! Your Star is our greatest motivation for continuous open-source iteration!**
|
||||
|
||||
**LILISHOP** is an open-source e-commerce system built with Spring Boot, Vue 3, and uni-app. It supports B2B2C multi-vendor marketplaces, WeChat Mini Programs, H5, Android/iOS Apps, live-streaming e-commerce, affiliate distribution, and flash sales.
|
||||
|
||||
### ✨ Why Choose Lilishop
|
||||
- 🟢 **True Apache-2.0 License**: Free for commercial use and private secondary development without licensing concerns.
|
||||
- 🚀 **Modern Vue 3 Stack**: Built on `uni-app + Vue 3 + uview-plus 3.x`, leaving legacy Vue 2 templates behind.
|
||||
- 🧩 **Production-Ready Completeness**: Not a static UI template—fully integrated with B2B2C multi-vendor workflows, visual storefront decoration, IM customer service, flash sales, group buying, affiliate distribution, and live streaming.
|
||||
|
||||
---
|
||||
|
||||
## 1. Overview
|
||||
|
||||
This repository (`lilishop-uniapp`) is the **Mobile Buyer Client** of Lilishop, supporting **H5, WeChat Mini Program, Android, and iOS Apps** from a single codebase powered by **Vue 3** and **uni-app**.
|
||||
|
||||
- **Official Website**: <https://pickmall.cn>
|
||||
- **Documentation**: [Product Documentation](https://bdwx2tfwwt.feishu.cn/wiki/space/7675179368632617952?ccm_open_type=lark_wiki_spaceLink&open_tab_from=wiki_home)
|
||||
- **Gitee Repository**: <https://gitee.com/beijing_hongye_huicheng>
|
||||
- **GitHub Main Repository**: <https://github.com/lilishop/lilishop>
|
||||
|
||||
---
|
||||
|
||||
## 2. Online Demo
|
||||
|
||||
> **Note**: The verification code for the demo environment is `111111`.
|
||||
|
||||
| WeChat Mini Program | Mobile H5 ([Visit Directly](https://m-b2b2c.pickmall.cn)) |
|
||||
| :---: | :---: |
|
||||
| <img src="https://static.pickmall.cn/images/h5-qrcode.png" width="180" alt="WeChat Mini Program QR Code" /> | <img src="https://lilishop-wechat.oss-cn-beijing.aliyuncs.com/h5-qrcode.png" width="180" alt="Mobile H5 QR Code" /> |
|
||||
| Scan with WeChat | Scan or visit <https://m-b2b2c.pickmall.cn> |
|
||||
|
||||
- **PC Mall**: <https://pc-b2b2c.pickmall.cn>
|
||||
- **Admin Panel**: <https://admin-b2b2c.pickmall.cn> (`admin` / `123456`)
|
||||
- **Store Panel**: <https://store-b2b2c.pickmall.cn> (`13011111111` / `111111`)
|
||||
|
||||
### Mobile UI Preview
|
||||
|
||||
| Home | Product List | Product Detail | Checkout | User Center |
|
||||
| :---: | :---: | :---: | :---: | :---: |
|
||||
| <img src="https://lilishop-wechat.oss-cn-beijing.aliyuncs.com/image.png" width="160" alt="Home" /> | <img src="https://lilishop-wechat.oss-cn-beijing.aliyuncs.com/image3.png" width="160" alt="Product List" /> | <img src="https://lilishop-wechat.oss-cn-beijing.aliyuncs.com/image4.png" width="160" alt="Product Detail" /> | <img src="https://lilishop-wechat.oss-cn-beijing.aliyuncs.com/image5.png" width="160" alt="Checkout" /> | <img src="https://lilishop-wechat.oss-cn-beijing.aliyuncs.com/image2.png" width="160" alt="User Center" /> |
|
||||
|
||||
---
|
||||
|
||||
## 3. Core Features & Tech Stack
|
||||
|
||||
### Core Features
|
||||
- **Cross-Platform**: One codebase runs on H5, WeChat Mini Program, Android, and iOS.
|
||||
- **Multi-Vendor B2B2C**: Supports merchant onboarding and store-level operations.
|
||||
- **Visual Storefront Decoration**: Dynamic home page & floor layouts (`pages/floor`) and customizable theme colors.
|
||||
- **Live Streaming & IM**: Integrated with Tencent Cloud IM / MQTT and HLS video streaming.
|
||||
- **Full E-Commerce Workflow**: Product browsing, cart, promotions (flash sale, group buy, coupons, points, bargain, affiliate), order fulfillment, after-sales, and member center.
|
||||
|
||||
### Mobile Tech Stack
|
||||
| Category | Technology | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Core Framework | `uni-app` + `Vue 3` | Cross-platform framework with Vue 3 support |
|
||||
| State Management | `Vuex 4` | Global auth, cart, and user state management |
|
||||
| UI Library | `uview-plus 3.x` | Vue 3 compatible uni-app multi-platform UI library |
|
||||
| Messaging & IM | `mqtt 5.x` / `@tencentcloud/chat` | Real-time customer service and notification push |
|
||||
| Video Streaming | `hls.js` | Live streaming playback support |
|
||||
| CSS Preprocessor | `Sass (SCSS)` | Global theme variables (`uni.scss`) and styling |
|
||||
|
||||
---
|
||||
|
||||
## 4. Directory Structure
|
||||
|
||||
```text
|
||||
lilishop-uniapp
|
||||
├── api/ # API module definitions (member, goods, order, promotion, IM, etc.)
|
||||
├── components/ # Shared business and base components
|
||||
├── config/ # Global configuration
|
||||
│ ├── api.js # API base URLs (buyer / im / mqtt)
|
||||
│ └── config.js # Mall name, Mini Program AppID, AMap Key, theme colors, etc.
|
||||
├── hybrid/ # Local HTML assets for App WebView
|
||||
├── js_sdk/ # Third-party and uni-app SDKs
|
||||
├── lib/ # Base utility libraries
|
||||
├── pages/ # Pages and sub-packages
|
||||
│ ├── tabbar/ # Main tabbar pages (Home, Category, Cart, Mine)
|
||||
│ ├── passport/ # Auth sub-package (Login, Register, Reset Password)
|
||||
│ ├── product/ # Product detail, list, reviews, store homepage
|
||||
│ ├── cart/ # Shopping cart and checkout
|
||||
│ ├── order/ # Order list, detail, after-sales, logistics, invoice
|
||||
│ ├── promotion/ # Flash sale, group buy, bargain, points mall, distribution, live
|
||||
│ ├── mine/ # User center, wallet, points, favorites, addresses
|
||||
│ ├── floor/ # Visual decoration floor components and topic pages
|
||||
│ └── navigation/ # Navigation and search pages
|
||||
├── patches/ # patch-package patches for dependencies
|
||||
├── scripts/ # Build and postinstall runtime patch scripts
|
||||
├── static/ # Static images and fonts
|
||||
├── store/ # Vuex store modules
|
||||
├── styles/ # Global stylesheets
|
||||
├── uni_modules/ # uni_modules plugins (including uview-plus)
|
||||
├── utils/ # Request interceptors, encryption, validators, storage helpers
|
||||
├── App.vue # Root application component
|
||||
├── main.js # Application entry point
|
||||
├── manifest.json # uni-app multi-platform configuration
|
||||
├── pages.json # Page routes, sub-packages, and navigation bar settings
|
||||
└── uni.scss # Global SCSS variables and theme color definitions
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Related Repositories
|
||||
|
||||
| Repository | Description | Links |
|
||||
| :--- | :--- | :--- |
|
||||
| **`lilishop`** | Backend Services (Spring Boot 4 / Java 21) | [Gitee](https://gitee.com/beijing_hongye_huicheng/lilishop) · [GitHub](https://github.com/lilishop/lilishop) |
|
||||
| **`lilishop-ui`** | PC Mall / Seller / Admin / IM Web Frontend | [Gitee](https://gitee.com/beijing_hongye_huicheng/lilishop-ui) |
|
||||
| **`lilishop-uniapp`** | Mobile Buyer Client (H5 / Mini Program / App) | [Gitee](https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp) |
|
||||
| **`docker`** | Docker Compose, Images & SQL Init Scripts | [Gitee](https://gitee.com/beijing_hongye_huicheng/docker) · [MySQL Scripts](https://gitee.com/beijing_hongye_huicheng/docker/tree/master/init/mysql) |
|
||||
|
||||
---
|
||||
|
||||
## 6. License
|
||||
|
||||
Lilishop is licensed under the [Apache-2.0](./LICENSE) License. Copyright © 2020-2026 **Beijing Hongye Huicheng Technology Co., Ltd.**
|
||||
445
README.md
445
README.md
@@ -1,277 +1,206 @@
|
||||
## Lilishop B2B2C商城系统
|
||||
|
||||
##### 官方公众号 & 开源不易,如有帮助请点Star
|
||||

|
||||
|
||||
[](https://gitee.com/beijing_hongye_huicheng/lilishop/stargazers)
|
||||
|
||||
|
||||
### 介绍
|
||||
**官网**:https://pickmall.cn
|
||||
|
||||
Lilishop 是一款Java开发,基于SpringBoot研发的B2B2C多用户商城,前端使用 Vue、uniapp开发 **系统全端全部代码开源**
|
||||
|
||||
产品前后端分离、支持分布式部署。
|
||||
|
||||
商城展示端包含 PC、H5、微信小程序、APP。
|
||||
|
||||
商城包含 会员模块、**第三方登录模块**、**第三方支付模块**、**楼层装修模块**、订单模块、分销模块、文章模块、系统设置模块、流量分析模块
|
||||
|
||||
系统包含各种中间件、搜索引擎、多级缓存、分布式事务、分布式任务调度等,支持Docker,支持k8s。是一款高性能,支持高并发等商城系统。
|
||||
|
||||
开箱即用,简单配置即可部署一套属于您的系统。
|
||||
|
||||
### 文档
|
||||
|
||||
**产品文档**(需求、架构、使用、部署、开发):https://docs.pickmall.cn
|
||||
|
||||
|
||||
### 项目链接(gitee)
|
||||
|
||||
**Java后台**:https://gitee.com/beijing_hongye_huicheng/lilishop.git
|
||||
|
||||
**Vue后台前端**: https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
|
||||
|
||||
**Uni-app**:https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
|
||||
|
||||
**docker一键部署**:https://gitee.com/beijing_hongye_huicheng/docker.git
|
||||
|
||||
### 项目链接(github)
|
||||
|
||||
**Java后台**:https://github.com/hongyehuicheng/lilishop.git
|
||||
|
||||
**Vue后台前端**: https://github.com/hongyehuicheng/lilishop-ui.git
|
||||
|
||||
**Uni-app**:https://github.com/hongyehuicheng/lilishop-uniapp.git
|
||||
|
||||
**docker一键部署**:https://github.com/hongyehuicheng/docker.git
|
||||
|
||||
### 演示地址
|
||||
|
||||
**运营后台**:https://admin-b2b2c.pickmall.cn 账号:admin/123456
|
||||
|
||||
**店铺后台**:https://store-b2b2c.pickmall.cn 账号:13011111111/111111
|
||||
|
||||
**用户前台**:https://pc-b2b2c.pickmall.cn
|
||||
|
||||
**移动端**:https://m-b2b2c.pickmall.cn
|
||||
|
||||

|
||||
|
||||
### 3行命令搭建本地环境
|
||||
|
||||
温馨提示:由于服务较多,如果笔记本环境启动内存没有32g可能无法启动成功(macbookpro 2020 16g内存启动无法成功),台式机在16g内存、AMD 3700x 的ubuntu系统成功运行。
|
||||
|
||||
##### 下载docker脚本
|
||||
`git clone https://gitee.com/beijing_hongye_huicheng/docker.git `
|
||||
##### 部署基础环境
|
||||
`docker-compose up -d`
|
||||
|
||||
##### 部署应用
|
||||
`docker-compose -f docker-compose-application.yml up -d`
|
||||
|
||||
|
||||
|
||||
PS:单独部署的话,数据库文件访问这里:https://gitee.com/beijing_hongye_huicheng/docker/tree/master/init/mysql
|
||||
|
||||
##### 各个地址
|
||||
|
||||
| API | 地址 |
|
||||
| -------------- | --------------- |
|
||||
| 买家API | http://127.0.0.1:8888 |
|
||||
| 商家API | http://127.0.0.1:8889 |
|
||||
| 管理端API | http://127.0.0.1:8887 |
|
||||
| 通用API | http://127.0.0.1:8890 |
|
||||
|
||||
| 前端演示 | 地址 |
|
||||
| -------------- | --------------- |
|
||||
| PC | http://127.0.0.1:10000 |
|
||||
| WAP | http://127.0.0.1:10001 |
|
||||
| 商家 | http://127.0.0.1:10002 |
|
||||
| 管理端 | http://127.0.0.1:10003 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 功能列表
|
||||
|
||||
|
||||
|
||||
#### 平台功能
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
#### 商家端功能
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 功能展示
|
||||
|
||||
|
||||
|
||||
#### 移动端
|
||||
|
||||
<img src="https://pickmall.cn/assets/imgs/other/app.gif" alt="管理端功能展示" style="zoom:50%;" />
|
||||
|
||||
<img src="https://pickmall.cn/assets/imgs/other/app.gif" alt="移动端功能展示" style="zoom:50%;" />
|
||||
|
||||
|
||||
|
||||
#### 管理端
|
||||
|
||||

|
||||
|
||||
|
||||
### 技术选型
|
||||
|
||||
#### 架构图
|
||||
|
||||

|
||||
|
||||
##### Java后台
|
||||
|
||||
| 说明 | 框架 | 说明 | |
|
||||
| -------------- | --------------- | -------------- | ------------- |
|
||||
| 基础框架 | Spring Boot | MVC框架 | Spring MVC |
|
||||
| 持久框架 | Mybatis-Plus | 程序构建 | Maven |
|
||||
| 关系型数据库 | MySQL | 消息中间件AMQP | RocketMQ |
|
||||
| 缓存 | Redis +MongoDB | 搜索引擎 | Elasticsearch |
|
||||
| 安全框架 | Spring Security | 数据库连接池 | Druid |
|
||||
| 数据库分库分表 | sharding | 定时任务 | xxl-job |
|
||||
| 负载均衡 | Nginx | 静态资源 | 阿里云OSS |
|
||||
| 短信 | 阿里云短信 | 认证 | JWT |
|
||||
| 日志处理 | Log4j | 接口规范 | RESTful |
|
||||
|
||||
##### 前端-运营后台、店铺后台
|
||||
|
||||
| 说明 | 框架 | 说明 | 框架 |
|
||||
| ---------- | ---------- | ---------- | ------- |
|
||||
| 构建工具 | webpack | JS版本 | ES6 |
|
||||
| 基础JS框架 | Vue.js | 视频播放器 | Dplayer |
|
||||
| 路由管理 | Vue Router | 状态管理 | Vuex |
|
||||
| 基础UI库 | iView | UI界面基于 | iView |
|
||||
| 网络请求 | axios | | |
|
||||
|
||||
##### 前端-移动端
|
||||
|
||||
| 说明 | 架构 | 说明 | 架构 |
|
||||
| --------- | ------- | -------- | ------- |
|
||||
| 基础UI库 | uViewui | 基础框架 | uni-app |
|
||||
| CSS预处理 | scss | 地图引擎 | amap |
|
||||
|
||||
### 升级计划
|
||||
|
||||
#### 计划每个月发布一个版本,具体时间可能有出入
|
||||
|
||||
时间:2021年6月15日
|
||||
|
||||
```
|
||||
新增功能:
|
||||
1.微信小程序直播
|
||||
2.优惠券活动
|
||||
3.新人赠券
|
||||
4.准确发券
|
||||
5.用户等级
|
||||
6.数据导出
|
||||
7.订单批量
|
||||
8.APP版本升级检测
|
||||
9.积分商城
|
||||
|
||||
功能优化:
|
||||
1.优惠券有效期增加类型:设置领取后*内有效。
|
||||
2.秒杀活动设置为每天开启,需设置秒杀活动开启时间。
|
||||
3.店铺配送模板,配送地区如果选择省份则下方的市级地址不展示。
|
||||
4.店铺配送模板支持,店铺包邮。
|
||||
5.普通商品设置去除卖家承担运费。
|
||||
|
||||
<div align="center">
|
||||
<img src="./icon.png" width="80" alt="Lilishop Logo" />
|
||||
<h1>Lilishop(PickMall) 开源商城系统 - 移动端 (uni-app)</h1>
|
||||
|
||||
<p>
|
||||
<a href="https://github.com/lilishop/lilishop"><img src="https://img.shields.io/github/stars/lilishop/lilishop.svg?style=social&logo=github" alt="GitHub Stars" /></a>
|
||||
<a href="https://gitee.com/beijing_hongye_huicheng/lilishop"><img src="https://gitee.com/beijing_hongye_huicheng/lilishop/badge/star.svg?theme=dark" alt="Gitee Stars" /></a>
|
||||
<a href="./LICENSE"><img src="https://img.shields.io/badge/license-Apache--2.0-blue.svg" alt="License" /></a>
|
||||
<a href="https://vuejs.org/"><img src="https://img.shields.io/badge/Vue-3-brightgreen.svg" alt="Vue 3" /></a>
|
||||
<a href="https://uniapp.dcloud.net.cn/"><img src="https://img.shields.io/badge/uni--app-Vue3-blue.svg" alt="uni-app" /></a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="https://pickmall.cn">🏠 官方网站</a> ·
|
||||
<a href="https://bdwx2tfwwt.feishu.cn/wiki/space/7675179368632617952?ccm_open_type=lark_wiki_spaceLink&open_tab_from=wiki_home">📖 产品文档</a> ·
|
||||
<a href="#2-在线演示">📱 在线演示</a> ·
|
||||
<a href="#7-社区与支持">💬 微信交流群</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>简体中文</b> | <a href="./README.en.md">English</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
> ⭐ **如果觉得项目不错,请点击右上角 `Star` 收藏支持!您的 Star 是我们持续开源迭代的最大动力!**
|
||||
|
||||
**LILISHOP** 是基于 Spring Boot / Vue 3 / uni-app 开发的开源商城系统,支持 B2B2C 多商户商城、微信小程序商城、H5 商城、APP 商城、直播电商、分销返佣、秒杀活动。
|
||||
|
||||
### ✨ 为什么选择 Lilishop
|
||||
- 🟢 **真 Apache-2.0 协议**:支持免费商用与私有化闭源二开,无版权后顾之忧。
|
||||
- 🚀 **Vue 3 全新栈**:基于 `uni-app + Vue 3 + uview-plus 3.x`,告别老旧 Vue 2 模板。
|
||||
- 🧩 **生产级完整度**:非静态切图模板,完整覆盖 B2B2C 多商户、可视化装修、IM 客服、秒杀拼团、分销直播全闭环。
|
||||
|
||||
---
|
||||
|
||||
## 1. 项目简介
|
||||
|
||||
**Lilishop** 是一款功能完善的 B2B2C 多商户商城系统,采用前后端分离架构,全端代码开源。
|
||||
后端基于 **Spring Boot 4**(Java 21)构建,具备高内聚、低耦合的特性,支持分布式部署;前端覆盖 PC、H5、小程序和 APP,基于 **Vue 3** 和 **uni-app** 开发。
|
||||
|
||||
本仓库(`lilishop-uniapp`)为 **买家端移动端源码**,一套代码同时支持 **H5、微信小程序、Android / iOS APP**。
|
||||
|
||||
- **官方网站**: <https://pickmall.cn>
|
||||
- **官方文档**: [产品文档](https://bdwx2tfwwt.feishu.cn/wiki/space/7675179368632617952?ccm_open_type=lark_wiki_spaceLink&open_tab_from=wiki_home)
|
||||
- **Gitee 仓库**: <https://gitee.com/beijing_hongye_huicheng>
|
||||
- **GitHub 主仓库**: <https://github.com/lilishop/lilishop>
|
||||
|
||||
---
|
||||
|
||||
## 2. 在线演示
|
||||
|
||||
> **注意**: 演示站手机验证码统一为 `111111`。演示环境部署于 `master` 分支。
|
||||
|
||||
| 微信小程序 | 移动端 H5([点击直接访问](https://m-b2b2c.pickmall.cn)) |
|
||||
| :---: | :---: |
|
||||
| <img src="https://static.pickmall.cn/images/h5-qrcode.png" width="180" alt="微信小程序体验码" /> | <img src="https://lilishop-wechat.oss-cn-beijing.aliyuncs.com/h5-qrcode.png" width="180" alt="移动端 H5 体验二维码" /> |
|
||||
| 微信扫码体验小程序 | 手机扫码或访问 <https://m-b2b2c.pickmall.cn> |
|
||||
|
||||
- **商城 PC 端**: <https://pc-b2b2c.pickmall.cn>
|
||||
- **平台管理端**: <https://admin-b2b2c.pickmall.cn>
|
||||
- 账号: `admin` / 密码: `123456`
|
||||
- **店铺管理端**: <https://store-b2b2c.pickmall.cn>
|
||||
- 账号: `13011111111` / 密码: `111111`
|
||||
|
||||
### 移动端界面预览
|
||||
|
||||
| 商城首页 | 商品列表 | 商品详情 | 填写订单 | 个人中心 |
|
||||
| :---: | :---: | :---: | :---: | :---: |
|
||||
| <img src="https://lilishop-wechat.oss-cn-beijing.aliyuncs.com/image.png" width="160" alt="商城首页" /> | <img src="https://lilishop-wechat.oss-cn-beijing.aliyuncs.com/image3.png" width="160" alt="商品列表" /> | <img src="https://lilishop-wechat.oss-cn-beijing.aliyuncs.com/image4.png" width="160" alt="商品详情" /> | <img src="https://lilishop-wechat.oss-cn-beijing.aliyuncs.com/image5.png" width="160" alt="填写订单" /> | <img src="https://lilishop-wechat.oss-cn-beijing.aliyuncs.com/image2.png" width="160" alt="个人中心" /> |
|
||||
|
||||
---
|
||||
|
||||
## 3. 核心特性与技术栈
|
||||
|
||||
### 核心特性
|
||||
- **全端覆盖**: 一套 `uni-app` 代码库支持 H5、微信小程序、Android / iOS APP,大幅降低多端开发与维护成本。
|
||||
- **商家入驻**: 支持多商家入驻,构建平台化 B2B2C 电商生态。
|
||||
- **可视化装修**: 支持首页及专题楼层(`pages/floor`)动态可视化配置与主题色切换。
|
||||
- **即时通讯与直播**: 集成腾讯云 IM / MQTT 消息推送及 HLS 视频流,支持在线客服与直播带货。
|
||||
- **完整电商闭环**: 涵盖商品浏览、购物车、多种促销(秒杀/拼团/优惠券/积分/砍价/分销)、订单履约、售后维权、会员中心等全流程。
|
||||
|
||||
### 移动端技术栈
|
||||
| 类别 | 技术选型 | 说明 |
|
||||
| :--- | :--- | :--- |
|
||||
| 核心框架 | `uni-app` + `Vue 3` | 跨端开发框架(支持 Vue 3 语法与渲染) |
|
||||
| 状态管理 | `Vuex 4` | 全局登录态、购物车与用户状态管理 |
|
||||
| UI 组件库 | `uview-plus 3.x` | 适配 Vue 3 的 uni-app 多端 UI 组件库 |
|
||||
| 即时通讯 | `mqtt 5.x` / `@tencentcloud/chat` | 客服消息与实时通知推送 |
|
||||
| 音视频流 | `hls.js` | 直播流播放支持 |
|
||||
| 样式预处理 | `Sass (SCSS)` | 全局主题变量(`uni.scss`)与组件样式定制 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 目录结构
|
||||
|
||||
```text
|
||||
lilishop-uniapp
|
||||
├── api/ # 各业务模块接口定义(会员、商品、订单、促销、IM 等)
|
||||
├── components/ # 公共业务与基础组件
|
||||
├── config/ # 全局配置目录
|
||||
│ ├── api.js # 接口域名配置(buyer / im / mqtt)
|
||||
│ └── config.js # 商城名称、小程序 AppID、高德 Key、主题色等全局参数
|
||||
├── hybrid/ # App 端本地 HTML 资源(如异常页、WebView 辅助页)
|
||||
├── js_sdk/ # 第三方及 uni-app 插件 SDK
|
||||
├── lib/ # 基础工具库封装
|
||||
├── pages/ # 页面与分包目录
|
||||
│ ├── tabbar/ # 底部导航主包页面(首页、分类、购物车、我的等)
|
||||
│ ├── passport/ # 登录、注册、找回密码分包
|
||||
│ ├── product/ # 商品详情、列表、评价、店铺主页分包
|
||||
│ ├── cart/ # 购物车与结算页分包
|
||||
│ ├── order/ # 订单列表、详情、售后、物流、发票分包
|
||||
│ ├── promotion/ # 秒杀、拼团、砍价、积分商城、分销、直播等营销分包
|
||||
│ ├── mine/ # 个人中心、钱包、积分、收藏、地址管理分包
|
||||
│ ├── floor/ # 可视化装修楼层组件与专题页
|
||||
│ └── navigation/ # 导航与搜索相关页面
|
||||
├── patches/ # patch-package 第三方依赖补丁
|
||||
├── scripts/ # 构建与依赖修补脚本(如 postinstall 补丁)
|
||||
├── static/ # 静态图片与字体资源
|
||||
├── store/ # Vuex 状态管理
|
||||
├── styles/ # 公共样式文件
|
||||
├── uni_modules/ # uni_modules 模块(含 uview-plus 等)
|
||||
├── utils/ # 请求拦截器、加密、校验、存储等工具函数
|
||||
├── App.vue # 应用入口组件
|
||||
├── main.js # 应用初始化入口
|
||||
├── manifest.json # uni-app 多端应用配置(AppID、权限、SDK 配置等)
|
||||
├── pages.json # 页面路由、分包加载与导航栏配置
|
||||
└── uni.scss # 全局 SCSS 变量与主题色定义
|
||||
```
|
||||
|
||||
时间:2021年7月15日
|
||||
---
|
||||
|
||||
```
|
||||
新增功能:
|
||||
1.会员权益
|
||||
2.支持用户升级会员
|
||||
3.供求单
|
||||
4.IM:腾讯云智服
|
||||
5.服务商品
|
||||
6.店铺支持订单核销
|
||||
7.店铺自提点
|
||||
功能优化:
|
||||
1.用户分享商城、关注店铺、邀请新用户可获取积分、经验值。
|
||||
```
|
||||
## 5. 配套源码仓库
|
||||
|
||||
时间:2021年8月16日
|
||||
本仓库专注于买家端 **H5 / 小程序 / APP**(`lilishop-uniapp`)。完整系统由以下四个核心仓库组成:
|
||||
|
||||
```
|
||||
新增功能:
|
||||
1.微淘功能
|
||||
2.店铺移动端
|
||||
3.店铺发货单
|
||||
```
|
||||
| 仓库名称 | 职责说明 | 仓库地址 |
|
||||
| :--- | :--- | :--- |
|
||||
| **`lilishop`** | 后端服务源码(Spring Boot 4 / Java 21) | [Gitee](https://gitee.com/beijing_hongye_huicheng/lilishop) · [GitHub](https://github.com/lilishop/lilishop) |
|
||||
| **`lilishop-ui`** | PC 商城 / 商家端 / 运营管理端 / IM Web 前端 | [Gitee](https://gitee.com/beijing_hongye_huicheng/lilishop-ui) |
|
||||
| **`lilishop-uniapp`** | 买家端 H5 / 微信小程序 / Android & iOS APP | [Gitee](https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp) |
|
||||
| **`docker`** | 容器化部署编排、镜像与数据库脚本 | [Gitee](https://gitee.com/beijing_hongye_huicheng/docker) · [MySQL 脚本](https://gitee.com/beijing_hongye_huicheng/docker/tree/master/init/mysql) |
|
||||
|
||||
时间:2021年9月15日
|
||||
---
|
||||
|
||||
```
|
||||
新增功能:
|
||||
增加供应商功能
|
||||
```
|
||||
## 6. 开源与授权
|
||||
|
||||
### 版本升级
|
||||
本项目遵循 [Apache-2.0](./LICENSE) 开源协议,版权归 **北京宏业汇成科技有限公司** 所有。允许个人及企业免费用于学习、研究、修改和商业用途(需保留原始版权和许可声明)。
|
||||
|
||||
```
|
||||
后续会持续版本升级,修复bug,完善功能,覆盖更多业务场景 o2o/b2b/s2b2b2c/跨境电商
|
||||
---
|
||||
|
||||
后续会考虑推出微服务/中台等 企业级版本
|
||||
```
|
||||
## 7. 社区与支持
|
||||
|
||||
### 技术亮点
|
||||
我们欢迎任何形式的交流与贡献。在提问前,请先查阅 [产品文档](https://bdwx2tfwwt.feishu.cn/wiki/space/7675179368632617952?ccm_open_type=lark_wiki_spaceLink&open_tab_from=wiki_home),并参考 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/master/README-zh_CN.md) 以便高效沟通。
|
||||
|
||||
- **[在线客服](https://work.weixin.qq.com/kfid/kfc4d8dc24a73c15f44)**
|
||||
- **微信交流群**:
|
||||
<img src="https://lilishop-wechat.oss-cn-beijing.aliyuncs.com/wechat.jpg" width="200" alt="微信群" />
|
||||
|
||||
1.后端框架基于Springboot,构建基于maven,持久层使用MyBatisPlus。使用elasticsearch、redis、mongodb、rocketmq 等各种中间健。都是主流架构,轻松应对各种环境。
|
||||
|
||||
2.支持集群、分布式,支持docker 轻松部署,解决各种复杂场景!
|
||||
|
||||
3.代码模块清晰,主要分为三端api(买家、卖家、管理),各端API互相隔离,自己鉴权,自己操作业务。
|
||||
|
||||
4.使用阿里开源的RocketMQ,基于mq解决各种并发场景,解决事务一致性,解决搞并发延迟场景问题。
|
||||
|
||||
5.项目使用多级缓存,应用不同场景,redis缓存业务数据、mongodb缓存关系型多对多关系问题、nginx缓存高频访问低频修改的页面。
|
||||
|
||||
6.支持各种联合登陆,支持各种客户端的支付问题,灵活配置灵活开启。
|
||||
|
||||
7.内置完善的楼层装修机制,各种拖拉拽,维护跳转页面或外网,即便是一个什么都不懂的运营也可以轻松掌握。
|
||||
|
||||
8.内置阿里短信接口,可以在线申请短信模版。内置阿里oss系统,可以对文件执行各种操作。oss商家端资源相互隔离。
|
||||
|
||||
10.强大的统计报表,统计效果,可以实现各个场景,包含在线人数,历史在线人数,活跃人数等信息。
|
||||
|
||||
11.标准Api接口、提供swagger文档,快速二开。
|
||||
|
||||
12.分布式调度任务中心,解决分布式定时任务多次执行问题。
|
||||
|
||||
13.代码注释完善,快速上手。
|
||||
|
||||
14.非移动端采用IView框架,各种自定义插件、选择器实现。移动端采用uniapp,一次编写,全端使用
|
||||
|
||||
15.已经对接好各种第三方插件,支持各种复杂等联合登陆,联合支付等场景。
|
||||
---
|
||||
|
||||
## 8. 升级计划
|
||||
|
||||
### 开源须知
|
||||
1.仅允许用于个人学习研究使用.
|
||||
> 更新日期:2026-11-05,依据各端提交记录及当前代码实现同步。
|
||||
|
||||
2.禁止将本开源的代码和资源进行任何形式任何名义的出售.
|
||||
### ✅ 已完成特性
|
||||
|
||||
3.限制商用,如果需要商业使用请联系我们。QQ3409056806.
|
||||
按可核实的实现或完善时间倒序记录;日期表示代码完成或功能更新时间,不代表生产上线时间。
|
||||
|
||||
### 交流群
|
||||
|
||||
**QQ群**:961316482
|
||||
| 时间 | 功能模块 | 完成内容 |
|
||||
| :--- | :--- | :--- |
|
||||
| 2026-11-05 | ✅ 付费会员 | 单一付费会员、开通与续费、有效期、关联权益、商家与商品折扣、平台补贴及付费记录。 |
|
||||
| 2026-11-04 | ✅ 客户等级体系 / 客户权益 | 等级配置、权益介绍、经验值任务与明细、权益发放及重试,提供默认等级与权益数据。 |
|
||||
| 2026-11-04 | ✅ 小程序订单管理 | 增加小程序订单查询入口及微信订单自动上报开关。 |
|
||||
| 2026-11-04 | ✅ 立减优惠券 | 新增立减券,完善优惠券校验、领取与订单优惠计算。 |
|
||||
| 2026-11-04 | ✅ 商品定时上下架 | 完善定时上下架计划管理、独立列表及执行校验。 |
|
||||
| 2026-11-04 | ✅ 微信小程序原生能力 | 接入微信地址导入、头像选择和昵称填写。 |
|
||||
| 2026-11-02 | ✅ 消息模板 | 支持多渠道模板矩阵维护,统一站内信、短信、微信公众号及小程序订阅消息的场景配置和异步发送。 |
|
||||
| 2026-10-30 | ✅ PC 页面装修 | 重构楼层组件,支持自适应高度、可视化热区绘制及配置交互优化。 |
|
||||
| 2026-10-29 | ✅ 定时任务管理 | 重构为数据库配置驱动,支持运营后台维护任务。 |
|
||||
| 2026-10-29 | ✅ 敏感词管理 | 支持按业务场景配置过滤开关,并优化词库加载。 |
|
||||
| 2026-10-29 | ✅ PC 店铺搜索 | 新增店铺列表,支持商品与店铺双模式搜索。 |
|
||||
| 2026-10-22 | ✅ 分类设置 | 支持四种分类页模板选择、商品列表展示字段开关及模板图片预览。 |
|
||||
| 2026-10-20 | ✅ 移动端页面装修 | 完善可视化编辑器,新增首页组合组件及优惠券、店铺、文章等楼层。 |
|
||||
| 2026-10-09 | ✅ 主题色管理 | 完善主题设置,支持自定义模式。 |
|
||||
| 2026-10-02 | ✅ 预约服务商品 | 完善预约商品、预约交易及订单详情功能。 |
|
||||
| 2026-08-05 | ✅ 二级分销 | 由一级分销扩展为二级分销,增加节点配置及分销员中心。 |
|
||||
| 2026-08-03 | ✅ 卡密商品 | 完善电子卡券履约、订单状态及卡池管理。 |
|
||||
| 2026-07-23 | ✅ 素材库管理 | 增加文件分类、目录管理及目录归属校验。 |
|
||||
| 2026-07-20 | ✅ 经营统计报表 | 新增店铺业绩、商品同比环比、销售订单明细及商品销售汇总报表。 |
|
||||
| 2026-07-13 | ✅ 腾讯云直播 | 接入并完善直播、聊天与直播商品相关功能。 |
|
||||
| 2026-06-30 | ✅ 移动端技术升级 | 升级 Vue 3 与 uView Plus,适配组件和页面。 |
|
||||
| 2026-06-29 | ✅ 电子面单发货 | 完善快递鸟电子面单,支持自动携带运单号发货。 |
|
||||
| 2026-06-05 | ✅ 后端与管理端框架升级 | 5 月 25 日至 6 月 5 日完成 Spring Boot 4、管理端 Vue 3 与 Element Plus 升级。 |
|
||||
| 2026-05-22 | ✅ 购物卡 | 新增礼品卡接口,以及选择、绑定、激活和列表管理。 |
|
||||
| 2026-05-20 | ✅ 微信提现 | 完善转账状态查询、确认回调和重试处理,后续补充提现规则说明配置。 |
|
||||
| 2026-04-16 | ✅ 置顶评论 | 支持评论置顶及商品评价管理。 |
|
||||
| 2026-04-13 | ✅ 专用发票(发票上传) | 完善发票信息字段、发票详情及管理展示。 |
|
||||
| 2026-04-01 | ✅ 商品虚拟销量 | 支持按商品规格设置虚拟销量,提供单个及批量设置入口。 |
|
||||
| 2026-03-30 | ✅ 商品分组 | 新增商品分组管理及商品关联功能。 |
|
||||
| 2026-03-24 | ✅ 会员分组 | 新增会员分组管理。 |
|
||||
|
||||
### 🔜 近期规划中
|
||||
- 🔜 微信小店对接
|
||||
- 🔜 抖店对接
|
||||
- 🔜 微信小程序原生重构与体验对齐(持续完善;已接入预约交易、分类多模板与首页楼层装修)
|
||||
- 🔜 OpenAPI 开放平台与开发者中心
|
||||
|
||||
17
androidPrivacy.json
Normal file
17
androidPrivacy.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"version" : "1",
|
||||
"prompt" : "template",
|
||||
"title" : "服务协议和隐私政策",
|
||||
"message" : " 请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款,包括但不限于:为了更好的向你提供服务,我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/> 你可阅读<a href=\"https://pc-b2b2c.pickmall.cn/article/detail?id=1371992704333905920\">《服务协议》</a>和<a href=\"https://pc-b2b2c.pickmall.cn/article/detail?id=1371779927900160000\">《隐私政策》</a>了解详细信息。如果你同意,请点击下面按钮开始接受我们的服务。",
|
||||
"buttonAccept" : "同意并接受",
|
||||
"buttonRefuse" : "暂不同意",
|
||||
"second" : {
|
||||
"title" : "确认提示",
|
||||
"message" : " 进入应用前,你需先同意<a href=\"https://pc-b2b2c.pickmall.cn/article/detail?id=1371992704333905920\">《服务协议》</a>和<a href=\"https://pc-b2b2c.pickmall.cn/article/detail?id=1371779927900160000\">《隐私政策》</a>,否则将退出应用。",
|
||||
"buttonAccept" : "同意并继续",
|
||||
"buttonRefuse" : "退出应用"
|
||||
},
|
||||
"styles" : {
|
||||
"borderRadius" : "5px"
|
||||
}
|
||||
}
|
||||
@@ -12,19 +12,20 @@ import api from "@/config/api.js";
|
||||
*/
|
||||
export function getAddressList(pageNumber, pageSize) {
|
||||
return http.request({
|
||||
url: "/memberAddress",
|
||||
url: "/member/address",
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params: { pageNumber, pageSize },
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取物流公司
|
||||
*/
|
||||
export function getLogistics() {
|
||||
return http.request({
|
||||
url: "/logistics",
|
||||
url: "/other/logistics",
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params: { pageNumber: 1, pageSize: 200, disabled: "OPEN" },
|
||||
@@ -36,7 +37,7 @@ export function getLogistics() {
|
||||
*/
|
||||
export function getAddressCode(cityCode, townName) {
|
||||
return http.request({
|
||||
url: api.common + "/region/region",
|
||||
url: `${api.buyer}/common/region/region`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params: { cityCode, townName },
|
||||
@@ -50,7 +51,7 @@ export function getAddressCode(cityCode, townName) {
|
||||
*/
|
||||
export function addAddress(data) {
|
||||
return http.request({
|
||||
url: "/memberAddress",
|
||||
url: "/member/address",
|
||||
method: Method.POST,
|
||||
needToken: true,
|
||||
header: { "content-type": "application/x-www-form-urlencoded" },
|
||||
@@ -66,7 +67,7 @@ export function addAddress(data) {
|
||||
*/
|
||||
export function editAddress(params) {
|
||||
return http.request({
|
||||
url: `/memberAddress`,
|
||||
url: `/member/address`,
|
||||
method: Method.PUT,
|
||||
needToken: true,
|
||||
header: { "content-type": "application/x-www-form-urlencoded" },
|
||||
@@ -80,7 +81,7 @@ export function editAddress(params) {
|
||||
*/
|
||||
export function deleteAddress(id) {
|
||||
return http.request({
|
||||
url: `/memberAddress/delById/${id}`,
|
||||
url: `/member/address/delById/${id}`,
|
||||
method: Method.DELETE,
|
||||
needToken: true,
|
||||
});
|
||||
@@ -94,7 +95,7 @@ export function deleteAddress(id) {
|
||||
*/
|
||||
export function getAddressDetail(id) {
|
||||
return http.request({
|
||||
url: `/memberAddress/get/${id}`,
|
||||
url: `/member/address/get/${id}`,
|
||||
method: Method.GET,
|
||||
loading: false,
|
||||
needToken: true,
|
||||
@@ -106,7 +107,7 @@ export function getAddressDetail(id) {
|
||||
*/
|
||||
export function getAddressDefault() {
|
||||
return http.request({
|
||||
url: `/memberAddress/get/default`,
|
||||
url: `/member/address/get/default`,
|
||||
method: Method.GET,
|
||||
loading: false,
|
||||
needToken: true,
|
||||
|
||||
@@ -34,16 +34,29 @@ export function applyCancelOrder(params) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 获取商家售后收件地址
|
||||
*/
|
||||
export function getstoreAfterSaleAddress(sn) {
|
||||
export function getStoreAfterSaleAddress(sn) {
|
||||
return http.request({
|
||||
url: `/afterSale/getStoreAfterSaleAddress/${sn}`,
|
||||
url: `/order/afterSale/getStoreAfterSaleAddress/${sn}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 取消售后
|
||||
*/
|
||||
export function cancelAfterSale(afterSaleSn) {
|
||||
return http.request({
|
||||
url: `/order/afterSale/cancel/${afterSaleSn}`,
|
||||
method: Method.POST,
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取售后服务记录相关数据
|
||||
@@ -51,7 +64,7 @@ export function getstoreAfterSaleAddress(sn) {
|
||||
*/
|
||||
export function getAfterSaleList(params) {
|
||||
return http.request({
|
||||
url: `/afterSale/page`,
|
||||
url: `/order/afterSale/page`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params,
|
||||
@@ -64,7 +77,7 @@ export function getAfterSaleList(params) {
|
||||
*/
|
||||
export function getServiceDetail(sn) {
|
||||
return http.request({
|
||||
url: `/afterSale/get/${sn}`,
|
||||
url: `/order/afterSale/get/${sn}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
@@ -76,7 +89,7 @@ export function getServiceDetail(sn) {
|
||||
*/
|
||||
export function addComplain(params) {
|
||||
return http.request({
|
||||
url: `/complain`,
|
||||
url: `/order/complain`,
|
||||
method: Method.POST,
|
||||
needToken: true,
|
||||
header: {
|
||||
@@ -91,7 +104,7 @@ export function addComplain(params) {
|
||||
*/
|
||||
export function clearComplain(id, params) {
|
||||
return http.request({
|
||||
url: `/complain/status/${id}`,
|
||||
url: `/order/complain/status/${id}`,
|
||||
method: Method.PUT,
|
||||
needToken: true,
|
||||
params,
|
||||
@@ -103,7 +116,7 @@ export function clearComplain(id, params) {
|
||||
*/
|
||||
export function getAfterSaleLog(sn) {
|
||||
return http.request({
|
||||
url: `/afterSale/get/getAfterSaleLog/${sn}`,
|
||||
url: `/order/afterSale/get/getAfterSaleLog/${sn}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
@@ -114,7 +127,7 @@ export function getAfterSaleLog(sn) {
|
||||
*/
|
||||
export function getComplain(params) {
|
||||
return http.request({
|
||||
url: `/complain`,
|
||||
url: `/order/complain`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params,
|
||||
@@ -126,7 +139,7 @@ export function getComplain(params) {
|
||||
*/
|
||||
export function getAfterSaleReason(serviceType) {
|
||||
return http.request({
|
||||
url: `/afterSale/get/afterSaleReason/${serviceType}`,
|
||||
url: `/order/afterSale/get/afterSaleReason/${serviceType}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
@@ -137,7 +150,7 @@ export function getAfterSaleReason(serviceType) {
|
||||
*/
|
||||
export function getClearReason() {
|
||||
return http.request({
|
||||
url: `/afterSale/get/afterSaleReason/CANCEL`,
|
||||
url: `/order/afterSale/get/afterSaleReason/CANCEL`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
@@ -148,7 +161,7 @@ export function getClearReason() {
|
||||
*/
|
||||
export function getComplainReason() {
|
||||
return http.request({
|
||||
url: `/afterSale/get/afterSaleReason/COMPLAIN`,
|
||||
url: `/order/afterSale/get/afterSaleReason/COMPLAIN`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
@@ -158,7 +171,7 @@ export function getComplainReason() {
|
||||
*/
|
||||
export function getComplainDetail(id) {
|
||||
return http.request({
|
||||
url: `/complain/${id}`,
|
||||
url: `/order/complain/${id}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
@@ -169,7 +182,7 @@ export function getComplainDetail(id) {
|
||||
*/
|
||||
export function getAfterSaleInfo(sn) {
|
||||
return http.request({
|
||||
url: `/afterSale/applyAfterSaleInfo/${sn}`,
|
||||
url: `/order/afterSale/applyAfterSaleInfo/${sn}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
@@ -181,7 +194,7 @@ export function getAfterSaleInfo(sn) {
|
||||
*/
|
||||
export function applyReturn(orderItemSn, params) {
|
||||
return http.request({
|
||||
url: `/afterSale/save/${orderItemSn}`,
|
||||
url: `/order/afterSale/save/${orderItemSn}`,
|
||||
method: Method.POST,
|
||||
header: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
@@ -197,7 +210,7 @@ export function applyReturn(orderItemSn, params) {
|
||||
*/
|
||||
export function fillShipInfo(afterSaleSn, params) {
|
||||
return http.request({
|
||||
url: `/afterSale/delivery/${afterSaleSn}`,
|
||||
url: `/order/afterSale/delivery/${afterSaleSn}`,
|
||||
method: Method.POST,
|
||||
header: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
@@ -205,3 +218,13 @@ export function fillShipInfo(afterSaleSn, params) {
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
|
||||
// 添加交易投诉对话
|
||||
export function communication(params) {
|
||||
return http.request({
|
||||
url: `/order/complain/communication`,
|
||||
method: Method.POST,
|
||||
needToken: true,
|
||||
params
|
||||
});
|
||||
}
|
||||
43
api/appointment.js
Normal file
43
api/appointment.js
Normal file
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* 预约服务买家端 API
|
||||
*/
|
||||
import { http, Method } from '@/utils/request.js'
|
||||
|
||||
/** 查询可预约时段 */
|
||||
export function listSlots(skuId, slotDate) {
|
||||
return http.request({
|
||||
url: '/appointment/slots',
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params: { skuId, slotDate },
|
||||
})
|
||||
}
|
||||
|
||||
/** 绑定预约结算上下文(addToCart 后、createTrade 前) */
|
||||
export function bindCheckout(data) {
|
||||
return http.request({
|
||||
url: '/appointment/checkout/bind',
|
||||
method: Method.POST,
|
||||
needToken: true,
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
/** 预约商品扩展配置 */
|
||||
export function getGoodsExt(goodsId) {
|
||||
return http.request({
|
||||
url: `/appointment/goods/${goodsId}/ext`,
|
||||
method: Method.GET,
|
||||
needToken: false,
|
||||
})
|
||||
}
|
||||
|
||||
/** 买家预约订单详情(时段、核销码) */
|
||||
export function getAppointmentOrderDetail(orderSn) {
|
||||
return http.request({
|
||||
url: `/appointment/order/${orderSn}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -23,8 +23,33 @@ export function getArticleCategory(category_type) {
|
||||
*/
|
||||
export function getArticleDetail(type) {
|
||||
return http.request({
|
||||
url: `/article/type/${type}`,
|
||||
url: `/other/article/get/${type}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文章详情
|
||||
* @param type
|
||||
*/
|
||||
export function getArticleDetailByType(type) {
|
||||
return http.request({
|
||||
url: `/other/article/type/${type}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页获取文章列表(楼层装修用)
|
||||
* @param params { pageNumber, pageSize, categoryId? }
|
||||
*/
|
||||
export function getArticleList(params) {
|
||||
return http.request({
|
||||
url: `/other/article`,
|
||||
method: Method.GET,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,26 +1,54 @@
|
||||
/**
|
||||
* 公共API
|
||||
*/
|
||||
import {http, Method} from '@/utils/request.js';
|
||||
import api from '@/config/api.js';
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取地区数据
|
||||
* @param id
|
||||
*/
|
||||
export function getRegionsById(id = 0) {
|
||||
return http.request({
|
||||
url: `${api.common}/region/item/${id}`,
|
||||
method: Method.GET,
|
||||
message: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件上传地址
|
||||
* @type {string}
|
||||
*/
|
||||
export const upload =api.common+'/upload/file';
|
||||
|
||||
/**
|
||||
* 公共 API(由 buyer-api 提供)
|
||||
*/
|
||||
import { http, Method } from "@/utils/request.js";
|
||||
import api from "@/config/api.js";
|
||||
|
||||
/**
|
||||
* 获取地区数据
|
||||
* @param id
|
||||
*/
|
||||
export function getRegionsById(id = 0) {
|
||||
return http.request({
|
||||
url: `${api.buyer}/common/region/item/${id}`,
|
||||
method: Method.GET,
|
||||
message: false,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取 IM 接口前缀
|
||||
export function getIMDetail() {
|
||||
return http.request({
|
||||
url: `${api.buyer}/common/IM`,
|
||||
method: Method.GET,
|
||||
message: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件上传地址
|
||||
* @type {string}
|
||||
*/
|
||||
export const upload = `${api.buyer}/common/upload/file`;
|
||||
|
||||
/**
|
||||
* 获取主题色配置
|
||||
*/
|
||||
export function getThemeSetting() {
|
||||
return http.request({
|
||||
url: `${api.buyer}/common/site/theme`,
|
||||
method: Method.GET,
|
||||
message: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取分类页配置
|
||||
*/
|
||||
export function getCategoryPageSetting() {
|
||||
return http.request({
|
||||
url: `${api.buyer}/common/site/category-page`,
|
||||
method: Method.GET,
|
||||
message: false,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ const request = http.request;
|
||||
*/
|
||||
export function webConnect(code) {
|
||||
return http.request({
|
||||
url: `connect/login/web/${code}`,
|
||||
url: `passport/connect/connect/login/web/${code}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
header: {
|
||||
@@ -25,8 +25,8 @@ export function webConnect(code) {
|
||||
}
|
||||
export function openIdLogin(params, clientType) {
|
||||
return http.request({
|
||||
url: `connect/app/login`,
|
||||
method: Method.GET,
|
||||
url: `passport/connect/connect/app/login`,
|
||||
method: Method.POST,
|
||||
needToken: true,
|
||||
data: params,
|
||||
header: {
|
||||
@@ -40,7 +40,7 @@ export function openIdLogin(params, clientType) {
|
||||
*/
|
||||
export function loginCallback(state) {
|
||||
return http.request({
|
||||
url: `connect/result?state=${state}`,
|
||||
url: `passport/connect/connect/result?state=${state}`,
|
||||
method: Method.GET,
|
||||
needToken: false
|
||||
});
|
||||
@@ -54,7 +54,7 @@ export function loginCallback(state) {
|
||||
*/
|
||||
export function mpAutoLogin(params) {
|
||||
return http.request({
|
||||
url: 'mini-program/auto-login',
|
||||
url: 'passport/connect/miniProgram/auto-login',
|
||||
method: Method.GET,
|
||||
params
|
||||
});
|
||||
|
||||
233
api/distribution.js
Normal file
233
api/distribution.js
Normal file
@@ -0,0 +1,233 @@
|
||||
/**
|
||||
* 分销员相关 API
|
||||
*/
|
||||
|
||||
import { http, Method } from '@/utils/request.js'
|
||||
|
||||
/**
|
||||
* 绑定分销员
|
||||
* @param distributionId 分销员ID
|
||||
*/
|
||||
export function getGoodsDistribution(distributionId) {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/bindingDistribution/${distributionId}`,
|
||||
method: Method.GET,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前会员的分销员信息(含待提现、冻结金额等)
|
||||
*/
|
||||
export function distribution() {
|
||||
return http.request({
|
||||
url: `/distribution/distribution`,
|
||||
method: Method.GET,
|
||||
})
|
||||
}
|
||||
|
||||
/** 推广海报上下文(邀请好友锁客) */
|
||||
export function getPromotionPoster() {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/promotion-poster`,
|
||||
method: Method.GET,
|
||||
})
|
||||
}
|
||||
|
||||
/** 邀请卡上下文(招募下级分销员) */
|
||||
export function getInviteCard() {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/invite-card`,
|
||||
method: Method.GET,
|
||||
})
|
||||
}
|
||||
|
||||
/** 我邀请的下级分销员列表 */
|
||||
export function getDistributionInvitees(params) {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/invite/invitees`,
|
||||
method: Method.GET,
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
/** 分销员业绩统计 */
|
||||
export function getDistributionPerformance(params) {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/performance`,
|
||||
method: Method.GET,
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
/** 我的客户列表 */
|
||||
export function getDistributionCustomers(params) {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/customers`,
|
||||
method: Method.GET,
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
/** 客户详情 */
|
||||
export function getDistributionCustomerDetail(id) {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/customers/${id}`,
|
||||
method: Method.GET,
|
||||
})
|
||||
}
|
||||
|
||||
/** 设置/取消客户星标 */
|
||||
export function updateDistributionCustomerStarred(id, starred) {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/customers/${id}/starred`,
|
||||
method: Method.PUT,
|
||||
params: { starred },
|
||||
})
|
||||
}
|
||||
|
||||
/** 分销等级列表(包装 VO:upgradeConditionVisible + grades) */
|
||||
export function getDistributionGrades() {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/grades`,
|
||||
method: Method.GET,
|
||||
})
|
||||
}
|
||||
|
||||
/** 分销员提现 */
|
||||
export function cash(params) {
|
||||
return http.request({
|
||||
url: `/distribution/cash`,
|
||||
method: Method.POST,
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
/** 分销员提现历史 */
|
||||
export function cashLog(params) {
|
||||
return http.request({
|
||||
url: `/distribution/cash`,
|
||||
method: Method.GET,
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
/** 推广/邀请订单分页列表 */
|
||||
export function getDistributionOrders(params) {
|
||||
return http.request({
|
||||
url: `/distribution/order/orders`,
|
||||
method: Method.GET,
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
/** 推广/邀请订单详情 */
|
||||
export function getDistributionOrderDetail(params) {
|
||||
return http.request({
|
||||
url: `/distribution/order/orders/detail`,
|
||||
method: Method.GET,
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取分销商品设置 */
|
||||
export function getDistributionGoodsSetting() {
|
||||
return http.request({
|
||||
url: `/distribution/goods/setting`,
|
||||
method: Method.GET,
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取分销员商品列表 */
|
||||
export function distributionGoods(params) {
|
||||
return http.request({
|
||||
url: `/distribution/goods`,
|
||||
method: Method.GET,
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取分销员中心推荐商品 */
|
||||
export function getDistributionFeaturedGoods() {
|
||||
return http.request({
|
||||
url: `/distribution/goods/featured`,
|
||||
method: Method.GET,
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取分销商品分享上下文(推广图文) */
|
||||
export function getDistributionGoodsShareContext(params) {
|
||||
return http.request({
|
||||
url: `/distribution/goods/share-context`,
|
||||
method: Method.GET,
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取分销商品海报上下文(生成葵花码,服务端记录分享) */
|
||||
export function getDistributionGoodsPosterContext(params) {
|
||||
return http.request({
|
||||
url: `/distribution/goods/poster-context`,
|
||||
method: Method.GET,
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
/** 分享商品访问(记录访问并绑定客户关系) */
|
||||
export function recordDistributionGoodsVisit(params) {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/share-visit`,
|
||||
method: Method.GET,
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
/** 招募页信息 */
|
||||
export function getRecruitPage() {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/recruit/page`,
|
||||
method: Method.GET,
|
||||
})
|
||||
}
|
||||
|
||||
/** 招募页邀请人信息(无需登录) */
|
||||
export function getRecruitInviter(distributionId) {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/recruit/inviter`,
|
||||
method: Method.GET,
|
||||
params: { distributionId },
|
||||
})
|
||||
}
|
||||
|
||||
/** 提交招募申请 */
|
||||
export function submitRecruitApplication(data) {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/recruit/apply`,
|
||||
method: Method.POST,
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
/** 招募条件进度 */
|
||||
export function getRecruitProgress() {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/recruit/progress`,
|
||||
method: Method.GET,
|
||||
})
|
||||
}
|
||||
|
||||
/** 上报招募邀请 token(登录后供自动申请使用) */
|
||||
export function savePendingRecruitToken(recruitToken) {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/recruit/pending-token`,
|
||||
method: Method.PUT,
|
||||
params: { recruitToken },
|
||||
})
|
||||
}
|
||||
|
||||
/** 上级分销员信息 */
|
||||
export function getDistributionParent() {
|
||||
return http.request({
|
||||
url: `/distribution/distribution/parent`,
|
||||
method: Method.GET,
|
||||
})
|
||||
}
|
||||
41
api/entry.js
Normal file
41
api/entry.js
Normal file
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* 入驻类相关api
|
||||
*/
|
||||
|
||||
import { http, Method } from "@/utils/request.js";
|
||||
|
||||
// 获取当前用户的代理入驻详情
|
||||
export function getCompanyDetail(params) {
|
||||
return http.request({
|
||||
url: "/store/store/apply",
|
||||
method: Method.GET,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 申请店铺第一步-填写企业信息
|
||||
export function applyFirst(params) {
|
||||
return http.request({
|
||||
url: "/store/store/apply/first",
|
||||
method: Method.PUT,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 申请店铺第二步-填写银行
|
||||
export function applySecond(params) {
|
||||
return http.request({
|
||||
url: "/store/store/apply/second",
|
||||
method: Method.PUT,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 申请店铺第三步-填写银行
|
||||
export function applyThird(params) {
|
||||
return http.request({
|
||||
url: "/store/store/apply/third",
|
||||
method: Method.PUT,
|
||||
params,
|
||||
});
|
||||
}
|
||||
114
api/goods.js
114
api/goods.js
@@ -9,17 +9,17 @@ import { http, Method } from "@/utils/request.js";
|
||||
*/
|
||||
export function getGoodsMessage(goodsId) {
|
||||
return http.request({
|
||||
url: `/goods/get/${goodsId}`,
|
||||
url: `/goods/goods/get/${goodsId}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 从ES中获取相关商品品牌名称,分类名称及属性
|
||||
* 获取商品搜索筛选条件
|
||||
*/
|
||||
export function getGoodsRelated(params) {
|
||||
return http.request({
|
||||
url: `/goods/es/related`,
|
||||
url: `/goods/goods/search/related`,
|
||||
method: Method.GET,
|
||||
params,
|
||||
});
|
||||
@@ -32,23 +32,11 @@ export function getGoodsRelated(params) {
|
||||
*/
|
||||
export function getGoods(skuId, goodsId) {
|
||||
return http.request({
|
||||
url: `/goods/sku/${goodsId}/${skuId}`,
|
||||
url: `/goods/goods/sku/${goodsId}/${skuId}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取商品分销
|
||||
* @param distributionId 商品分销ID
|
||||
*/
|
||||
export function getGoodsDistribution(distributionId) {
|
||||
return http.request({
|
||||
url: `/distribution/bindingDistribution/${distributionId}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取商品列表
|
||||
* @param params
|
||||
@@ -56,7 +44,7 @@ export function getGoodsRelated(params) {
|
||||
*/
|
||||
export function getGoodsList(params) {
|
||||
return http.request({
|
||||
url: "/goods/es",
|
||||
url: "/goods/goods/search",
|
||||
method: Method.GET,
|
||||
params,
|
||||
});
|
||||
@@ -112,104 +100,18 @@ export function getPlateformTagGoods(tag_id) {
|
||||
*/
|
||||
export function getCategoryList(id) {
|
||||
return http.request({
|
||||
url: `/category/get/${id}`,
|
||||
url: `/goods/category/get/${id}`,
|
||||
method: Method.GET,
|
||||
loading: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取商品分类
|
||||
* @param parent_id
|
||||
*/
|
||||
export function getCategory(parent_id = 0) {
|
||||
return http.request({
|
||||
url: `goods/categories/${parent_id}/children`,
|
||||
method: Method.GET,
|
||||
loading: false,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取当前会员的分销商信息 可根据分销商信息查询待提现金额以及冻结金额等信息
|
||||
*/
|
||||
export function distribution() {
|
||||
return http.request({
|
||||
url: `/distribution`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 申请分销商
|
||||
*/
|
||||
export function applyDistribution(params) {
|
||||
return http.request({
|
||||
url: `/distribution`,
|
||||
method: Method.POST,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 分销商提现
|
||||
*/
|
||||
export function cash(params) {
|
||||
return http.request({
|
||||
url: `/distribution/cash`,
|
||||
method: Method.POST,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 分销商提现历史
|
||||
*/
|
||||
export function cashLog() {
|
||||
return http.request({
|
||||
url: `/distribution/cash`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取分销商分页订单列表
|
||||
*/
|
||||
export function distributionOrderList() {
|
||||
return http.request({
|
||||
url: `/distribution/distributionOrder`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取分销商商品列表
|
||||
*/
|
||||
export function distributionGoods(params) {
|
||||
return http.request({
|
||||
url: `/distributionGoods`,
|
||||
method: Method.GET,
|
||||
params,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 选择分销商品 分销商品id
|
||||
*/
|
||||
export function checkedDistributionGoods(id) {
|
||||
return http.request({
|
||||
url: `/distributionGoods/checked/${id}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 小程序码
|
||||
*/
|
||||
export function getMpCode(params){
|
||||
return http.request({
|
||||
url:`/mini-program/mp/unlimited`,
|
||||
url:`/passport/connect/miniProgram/mp/unlimited`,
|
||||
method:Method.GET,
|
||||
params
|
||||
})
|
||||
@@ -220,7 +122,7 @@ export function checkedDistributionGoods(id) {
|
||||
*/
|
||||
export function getMpScene(id){
|
||||
return http.request({
|
||||
url:`/mini-program/mp/unlimited/scene?id=${id}`,
|
||||
url:`/passport/connect/miniProgram/mp/unlimited/scene?id=${id}`,
|
||||
method:Method.GET,
|
||||
|
||||
})
|
||||
|
||||
41
api/home.js
41
api/home.js
@@ -1,6 +1,21 @@
|
||||
import { http, Method } from "@/utils/request.js";
|
||||
|
||||
|
||||
export function toSpecial(data) {
|
||||
return http.request({
|
||||
url: `/other/pageData/getSpecial`,
|
||||
method: Method.GET,
|
||||
data
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 专题内容
|
||||
*/
|
||||
export function getSpecial(id) {
|
||||
return http.request({
|
||||
url: `/other/pageData/get/${id}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取广告图
|
||||
@@ -30,12 +45,12 @@ export function getCategory(parent_id = 0) {
|
||||
* 获取热门关键词
|
||||
* @param num
|
||||
*/
|
||||
export function getHotKeywords(start = 0, end = 10) {
|
||||
export function getHotKeywords(count) {
|
||||
return http.request({
|
||||
url: "/goods/hot-words",
|
||||
url: "/goods/goods/hot-words",
|
||||
method: Method.GET,
|
||||
loading: false,
|
||||
params: { start, end },
|
||||
params: { count },
|
||||
});
|
||||
}
|
||||
|
||||
@@ -44,10 +59,22 @@ export function getHotKeywords(start = 0, end = 10) {
|
||||
* @param client_type
|
||||
* @param page_type
|
||||
*/
|
||||
export function getFloorData() {
|
||||
export function getFloorData(params) {
|
||||
return http.request({
|
||||
url: `/pageData/getIndex?clientType=H5`,
|
||||
url: `/other/pageData/getIndex?clientType=H5`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取店铺楼层数据
|
||||
*/
|
||||
export function getFloorStoreData(params) {
|
||||
return http.request({
|
||||
url: `/other/pageData?pageClientType=H5`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
@@ -56,7 +83,7 @@ export function getFloorData() {
|
||||
*/
|
||||
export function getCategoryIndexData(parentId = 0) {
|
||||
return http.request({
|
||||
url: `/category/get/${parentId}`,
|
||||
url: `/goods/category/get/${parentId}`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
82
api/im.js
Normal file
82
api/im.js
Normal file
@@ -0,0 +1,82 @@
|
||||
import { http,Method } from "@/utils/request.js";
|
||||
|
||||
import api from "@/config/api.js";
|
||||
|
||||
/**
|
||||
* 获取聊天详情接口
|
||||
* @param {*} talkId
|
||||
* @returns
|
||||
*/
|
||||
export function getTalk(talkId) {
|
||||
return http.request({
|
||||
url: `${api.im}/talk/${talkId}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取与用户的聊天详情
|
||||
* @param {*} talkId
|
||||
* @returns
|
||||
*/
|
||||
export function getTalkByUser(userId) {
|
||||
return http.request({
|
||||
url: `${api.im}/talk/by/user/${userId}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取聊天列表
|
||||
* @param {*} talkId
|
||||
* @returns
|
||||
*/
|
||||
export function getTalkList(params) {
|
||||
return http.request({
|
||||
url: `${api.im}/talk/list`,
|
||||
method: Method.GET,
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取聊天信息接口
|
||||
* @param {*} params
|
||||
* @returns
|
||||
*/
|
||||
export function getTalkMessage(params) {
|
||||
return http.request({
|
||||
url: `${api.im}/message`,
|
||||
method: Method.GET,
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取聊天信息接口
|
||||
* @param {*} params
|
||||
* @returns
|
||||
*/
|
||||
export function cleanUnreadMessage(params) {
|
||||
return http.request({
|
||||
url: `${api.im}/message/clean/unred`,
|
||||
method: Method.PUT,
|
||||
params
|
||||
});
|
||||
}
|
||||
// 从商品页点击 客服 跳转 获取商品详情
|
||||
export function jumpObtain(skuId, goodsId) {
|
||||
return http.request({
|
||||
url: `/goods/goods/sku/${goodsId}/${skuId}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
// 清除未读
|
||||
// /im/message/clean/unred
|
||||
export function clearmeaager() {
|
||||
return http.request({
|
||||
url: `${api.im}/message/clean/unred`,
|
||||
method: Method.PUT,
|
||||
});
|
||||
}
|
||||
|
||||
65
api/live.js
Normal file
65
api/live.js
Normal file
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* 直播流相关 API
|
||||
*/
|
||||
import { http, Method } from "@/utils/request.js";
|
||||
|
||||
/**
|
||||
* 通过 id 获取直播间详情
|
||||
* @param {string} id 直播流 ID
|
||||
*/
|
||||
export function getLiveRoomById(id) {
|
||||
return http.request({
|
||||
url: `live/room/${id}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 观看的同时注册直播用户
|
||||
* @param {string} liveRoomId 直播流 ID
|
||||
*/
|
||||
export function registerLiveViewUser(liveRoomId) {
|
||||
return http.request({
|
||||
url: `live/user/view`,
|
||||
method: Method.POST,
|
||||
params: { liveRoomId },
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送直播消息
|
||||
* @param {object} data LiveMessage
|
||||
*/
|
||||
export function sendLiveMessage(data) {
|
||||
return http.request({
|
||||
url: `live/message`,
|
||||
method: Method.POST,
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取直播轮询聚合数据
|
||||
* @param {string} id 直播流 ID
|
||||
*/
|
||||
export function getLivePollingData(id) {
|
||||
return http.request({
|
||||
url: `live/room/polling/${id}`,
|
||||
method: Method.GET,
|
||||
loading: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 领取直播间优惠券
|
||||
* @param {string} liveRoomId 直播流 ID
|
||||
* @param {string} couponId 优惠券 ID
|
||||
*/
|
||||
export function receiveLiveCoupon(liveRoomId, couponId) {
|
||||
return http.request({
|
||||
url: `promotion/coupon/receive/live/${liveRoomId}/${couponId}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
|
||||
150
api/login.js
150
api/login.js
@@ -1,22 +1,55 @@
|
||||
import {
|
||||
http
|
||||
} from "@/utils/request.js";
|
||||
|
||||
|
||||
import api from '@/config/api.js'
|
||||
|
||||
import { http } from "@/utils/request.js";
|
||||
|
||||
import api from "@/config/api.js";
|
||||
|
||||
/**
|
||||
* 通过短信重置密码
|
||||
* @param mobile
|
||||
*/
|
||||
export function resetByMobile(params) {
|
||||
return http.request({
|
||||
url: `/members/resetByMobile`,
|
||||
method: "POST",
|
||||
params
|
||||
});
|
||||
return http.request({
|
||||
url: `/passport/member/resetByMobile`,
|
||||
method: "POST",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定手机号码
|
||||
* @param mobile
|
||||
*/
|
||||
export function bindMobile(params) {
|
||||
return http.request({
|
||||
url: `/passport/member/bindMobile`,
|
||||
method: "POST",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
//获取自动发券
|
||||
export function getAutoCoup(){
|
||||
return http.request({
|
||||
url:`/promotion/coupon/activity`,
|
||||
method:"GET",
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 账号密码登陆
|
||||
* @params password
|
||||
* @params username
|
||||
*/
|
||||
export function userLogin(params, clientType){
|
||||
return http.request({
|
||||
method: "POST",
|
||||
url:`/passport/member/userLogin`,
|
||||
data: params,
|
||||
header: {
|
||||
"content-type": "application/x-www-form-urlencoded",
|
||||
clientType: clientType,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -24,11 +57,11 @@ export function resetByMobile(params) {
|
||||
* 发送验证码
|
||||
* @param mobile
|
||||
*/
|
||||
export function sendMobile(mobile) {
|
||||
return http.request({
|
||||
url: `${api.common}/sms/LOGIN/${mobile}`,
|
||||
method: "GET",
|
||||
});
|
||||
export function sendMobile(mobile,type='LOGIN') {
|
||||
return http.request({
|
||||
url: `${api.buyer}/common/sms/${type}/${mobile}`,
|
||||
method: "GET",
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -37,40 +70,85 @@ export function sendMobile(mobile) {
|
||||
* @param smsCode
|
||||
*/
|
||||
export function smsLogin(params, clientType) {
|
||||
return http.request({
|
||||
url: `/members/smsLogin`,
|
||||
method: "POST",
|
||||
data: params,
|
||||
header: {
|
||||
"content-type": "application/x-www-form-urlencoded",
|
||||
"clientType": clientType
|
||||
}
|
||||
});
|
||||
return http.request({
|
||||
url: `/passport/member/smsLogin`,
|
||||
method: "POST",
|
||||
data: params,
|
||||
header: {
|
||||
"content-type": "application/x-www-form-urlencoded",
|
||||
clientType: clientType,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 修改密码
|
||||
* @param newPassword
|
||||
* @param password
|
||||
*/
|
||||
|
||||
export function modifyPass(params) {
|
||||
return http.request({
|
||||
url: `/members/modifyPass`,
|
||||
method: "PUT",
|
||||
params,
|
||||
});
|
||||
export function modifyPass(params) {
|
||||
return http.request({
|
||||
url: `/passport/member/modifyPass`,
|
||||
method: "PUT",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改密码
|
||||
* @param newPassword
|
||||
* @param password
|
||||
*/
|
||||
export function resetPassword(params) {
|
||||
return http.request({
|
||||
url: `/passport/member/resetPassword`,
|
||||
method: "POST",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新token
|
||||
*/
|
||||
export function refreshTokenFn(refresh_token) {
|
||||
return http.request({
|
||||
url: `/passport/member/refresh/${refresh_token}`,
|
||||
method: "GET",
|
||||
});
|
||||
}
|
||||
|
||||
// 获取密码状态
|
||||
export function logout () {
|
||||
return http.request({
|
||||
url: '/passport/member/logout',
|
||||
method: "POST",
|
||||
needToken: true,
|
||||
})
|
||||
}
|
||||
|
||||
export function scannerCodeLogin(params){
|
||||
return http.request({
|
||||
url: `/members/refresh/${refresh_token}`,
|
||||
method: "GET",
|
||||
url: '/passport/member/app_scanner',
|
||||
method: "POST",
|
||||
params,
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
export function scannerCodeLoginConfirm(params){
|
||||
return http.request({
|
||||
url: '/passport/member/app_confirm',
|
||||
method: "POST",
|
||||
params,
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
|
||||
// 注销用户
|
||||
export function logoffConfirm() {
|
||||
return http.request({
|
||||
url: '/passport/member/cancellation',
|
||||
method: "PUT",
|
||||
needToken: true,
|
||||
})
|
||||
}
|
||||
|
||||
124
api/members.js
124
api/members.js
@@ -6,7 +6,7 @@ import { http, Method } from "@/utils/request.js";
|
||||
*/
|
||||
export function feedBack(params) {
|
||||
return http.request({
|
||||
url: "/feedback",
|
||||
url: "/other/feedback",
|
||||
method: Method.POST,
|
||||
needToken: true,
|
||||
params,
|
||||
@@ -16,13 +16,30 @@ export function feedBack(params) {
|
||||
// 提现
|
||||
export function withdrawalApply(params) {
|
||||
return http.request({
|
||||
url: "/members/wallet/withdrawal",
|
||||
url: "/wallet/wallet/withdrawal",
|
||||
method: Method.POST,
|
||||
needToken: true,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
export function getWithdrawApplyPage(params) {
|
||||
return http.request({
|
||||
url: "/member/withdrawApply",
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
export function getWithdrawApplyWechatTransferInfo(id) {
|
||||
return http.request({
|
||||
url: `/member/withdrawApply/wechat/transfer/${id}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 支付结果查询
|
||||
* @param orderType 交易类型,可用值:TRADE,ORDER,RECHARGE
|
||||
@@ -30,7 +47,7 @@ export function withdrawalApply(params) {
|
||||
*/
|
||||
export function payCallback(params) {
|
||||
return http.request({
|
||||
url: `/cashier/result`,
|
||||
url: `/payment/cashier/result`,
|
||||
method: Method.GET,
|
||||
params,
|
||||
});
|
||||
@@ -117,7 +134,7 @@ export function getPointsData(params) {
|
||||
*/
|
||||
export function getComments(params) {
|
||||
return http.request({
|
||||
url: "/memberEvaluation",
|
||||
url: "/member/evaluation",
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params,
|
||||
@@ -131,7 +148,7 @@ export function getComments(params) {
|
||||
*/
|
||||
export function getFootprintNum(params) {
|
||||
return http.request({
|
||||
url: "/footprint/getFootprintNum",
|
||||
url: "/member/footprint/getFootprintNum",
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params,
|
||||
@@ -144,7 +161,7 @@ export function getFootprintNum(params) {
|
||||
*/
|
||||
export function commentsMemberOrder(params) {
|
||||
return http.request({
|
||||
url: "/memberEvaluation",
|
||||
url: "/member/evaluation",
|
||||
method: Method.POST,
|
||||
needToken: true,
|
||||
header: { "content-type": "application/x-www-form-urlencoded" },
|
||||
@@ -202,11 +219,27 @@ export function getGoodsCollection(params, type) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取商品收藏
|
||||
* @param params
|
||||
* @returns {AxiosPromise}
|
||||
*/
|
||||
export function getStoreCollection(params, type) {
|
||||
return http.request({
|
||||
url: `/member/storeCollection/${type}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
loading: false,
|
||||
message: false,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 收藏商品
|
||||
* @returns {AxiosPromise}
|
||||
*/
|
||||
export function collectionGoods(id, type) {
|
||||
export function collectionGoods(type, id) {
|
||||
return http.request({
|
||||
url: `/member/collection/add/${type}/${id}`,
|
||||
method: Method.POST,
|
||||
@@ -230,11 +263,23 @@ export function deleteGoodsCollection(ids) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除店铺收藏
|
||||
* @param store_id
|
||||
*/
|
||||
export function deleteStoreCollection(store_id) {
|
||||
return http.request({
|
||||
url: `/member/storeCollection/delete/STORE/${store_id}`,
|
||||
method: Method.DELETE,
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取商品是否被收藏
|
||||
* @param good_id
|
||||
*/
|
||||
export function getGoodsIsCollect(good_id, type) {
|
||||
export function getGoodsIsCollect(type, good_id) {
|
||||
return http.request({
|
||||
url: `/member/collection/isCollection/${type}/${good_id}`,
|
||||
method: Method.GET,
|
||||
@@ -243,6 +288,19 @@ export function getGoodsIsCollect(good_id, type) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取商品是否被收藏
|
||||
* @param good_id
|
||||
*/
|
||||
export function getStoreIsCollect(type, store_id) {
|
||||
return http.request({
|
||||
url: `/member/storeCollection/isCollection/${type}/${store_id}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
loading: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 收藏店铺
|
||||
* @param store_id 店铺ID
|
||||
@@ -250,21 +308,8 @@ export function getGoodsIsCollect(good_id, type) {
|
||||
*/
|
||||
export function collectionStore(store_id) {
|
||||
return http.request({
|
||||
url: "members/collection/store",
|
||||
header: { "content-type": "application/x-www-form-urlencoded" },
|
||||
url: `/member/storeCollection/add/STORE/${store_id}`,
|
||||
method: Method.POST,
|
||||
data: { store_id },
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除店铺收藏
|
||||
* @param store_id
|
||||
*/
|
||||
export function deleteStoreCollection(store_id) {
|
||||
return http.request({
|
||||
url: `members/collection/store/${store_id}`,
|
||||
method: Method.DELETE,
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
@@ -275,7 +320,7 @@ export function deleteStoreCollection(store_id) {
|
||||
*/
|
||||
export function getUserInfo() {
|
||||
return http.request({
|
||||
url: "/members",
|
||||
url: "/passport/member",
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
@@ -287,7 +332,7 @@ export function getUserInfo() {
|
||||
*/
|
||||
export function getUserWallet() {
|
||||
return http.request({
|
||||
url: "/members/wallet",
|
||||
url: "/wallet/wallet",
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
@@ -300,7 +345,7 @@ export function getUserWallet() {
|
||||
*/
|
||||
export function saveUserInfo(params) {
|
||||
return http.request({
|
||||
url: "/members/editOwn",
|
||||
url: "/passport/member/editOwn",
|
||||
method: Method.PUT,
|
||||
header: { "content-type": "application/x-www-form-urlencoded" },
|
||||
needToken: true,
|
||||
@@ -328,7 +373,7 @@ export function addReceipt(params) {
|
||||
*/
|
||||
export function getGoodsComments(goodsId, params) {
|
||||
return http.request({
|
||||
url: `/memberEvaluation/${goodsId}/goodsEvaluation`,
|
||||
url: `/member/evaluation/${goodsId}/goodsEvaluation`,
|
||||
method: Method.GET,
|
||||
loading: false,
|
||||
params,
|
||||
@@ -341,7 +386,7 @@ export function getGoodsComments(goodsId, params) {
|
||||
*/
|
||||
export function getGoodsCommentsCount(goodsId) {
|
||||
return http.request({
|
||||
url: `/memberEvaluation/${goodsId}/evaluationNumber`,
|
||||
url: `/member/evaluation/${goodsId}/evaluationNumber`,
|
||||
method: Method.GET,
|
||||
loading: false,
|
||||
});
|
||||
@@ -365,7 +410,7 @@ export function getNoReadMessageNum() {
|
||||
*/
|
||||
export function myTrackList(params) {
|
||||
return http.request({
|
||||
url: `/footprint`,
|
||||
url: `/member/footprint`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params,
|
||||
@@ -378,7 +423,7 @@ export function myTrackList(params) {
|
||||
*/
|
||||
export function deleteHistoryListId(ids) {
|
||||
return http.request({
|
||||
url: `/footprint/delByIds/${ids}`,
|
||||
url: `/member/footprint/delByIds/${ids}`,
|
||||
method: Method.DELETE,
|
||||
needToken: true,
|
||||
});
|
||||
@@ -419,3 +464,24 @@ export function getMemberPointSum() {
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取会员积分VO
|
||||
* @param
|
||||
*/
|
||||
export function withdrawalSettingVO() {
|
||||
return http.request({
|
||||
url: `/wallet/wallet/withdrawalSettingVO`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export function getCurrentMemberBenefits() { return http.request({url:'/member/benefit/current',method:Method.GET,needToken:true}) }
|
||||
export function getMemberGradeBenefits() { return http.request({url:'/member/memberGrade/list',method:Method.GET,needToken:true}) }
|
||||
|
||||
/** 仅返回后台已开启的经验值规则及当前会员累计获得情况。 */
|
||||
export function getExperienceTasks() { return http.request({ url: '/member/memberGrade/rules', method: Method.GET, needToken: true }) }
|
||||
/** 当前会员等级、经验值及分页流水;会员身份由服务端登录态确定。 */
|
||||
export function getExperienceRecords(params) { return http.request({ url: '/member/memberGrade/current', method: Method.GET, params, needToken: true }) }
|
||||
|
||||
@@ -14,7 +14,7 @@ import api from '@/config/api.js';
|
||||
*/
|
||||
export function getWeChatMpMessage() {
|
||||
return http.request({
|
||||
url: 'mini-program/subscribeMessage',
|
||||
url: 'passport/connect/miniProgram/subscribeMessage',
|
||||
method: Method.GET
|
||||
});
|
||||
}
|
||||
@@ -42,12 +42,30 @@ export function getMessages(params) {
|
||||
*/
|
||||
export function messageMarkAsRead(ids) {
|
||||
return http.request({
|
||||
url: `members/member-nocice-logs/${ids}/read`,
|
||||
url: `/message/member/${ids}`,
|
||||
method: Method.PUT,
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
|
||||
//读取站内消息
|
||||
export function editMessages(message_id,params){
|
||||
return http.request({
|
||||
url:`/message/member/${message_id}`,
|
||||
method:Method.PUT,
|
||||
needToken:true,
|
||||
params
|
||||
})
|
||||
}
|
||||
//获取站内消息
|
||||
export function messages(params) {
|
||||
return http.request({
|
||||
url: "/message/member",
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取物流消息列表
|
||||
@@ -73,7 +91,7 @@ export function getLogisticsMessages(params) {
|
||||
*/
|
||||
export function getAppVersion(appType) {
|
||||
return http.request({
|
||||
url: `/appVersion/${appType}`,
|
||||
url: `/other/appVersion/${appType}`,
|
||||
method: Method.GET,
|
||||
type:"manager"
|
||||
});
|
||||
@@ -86,9 +104,21 @@ export function getLogisticsMessages(params) {
|
||||
*/
|
||||
export function getAppVersionList(type,data) {
|
||||
return http.request({
|
||||
url: `/appVersion/appVersion/${type}`,
|
||||
url: `/other/appVersion/appVersion/${type}`,
|
||||
method: Method.GET,
|
||||
type:"manager",
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取微信公众号通知配置及绑定状态
|
||||
*/
|
||||
export function getWechatOfficialAccountSetting() {
|
||||
return http.request({
|
||||
url: '/message/wechatOfficialAccount',
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
@@ -51,7 +51,7 @@ export function selectedShipMethod(params) {
|
||||
*/
|
||||
export function getOrderList(params) {
|
||||
return http.request({
|
||||
url: "/orders",
|
||||
url: "/order/order",
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params,
|
||||
@@ -64,7 +64,7 @@ export function getOrderList(params) {
|
||||
*/
|
||||
export function getOrderDetail(orderSn) {
|
||||
return http.request({
|
||||
url: `/orders/${orderSn}`,
|
||||
url: `/order/order/${orderSn}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
@@ -77,7 +77,7 @@ export function getOrderDetail(orderSn) {
|
||||
*/
|
||||
export function cancelOrder(orderSn, reason) {
|
||||
return http.request({
|
||||
url: `/orders/${orderSn}/cancel`,
|
||||
url: `/order/order/${orderSn}/cancel`,
|
||||
method: Method.POST,
|
||||
needToken: true,
|
||||
header: { "content-type": "application/x-www-form-urlencoded" },
|
||||
@@ -91,7 +91,7 @@ export function cancelOrder(orderSn, reason) {
|
||||
*/
|
||||
export function confirmReceipt(orderSn) {
|
||||
return http.request({
|
||||
url: `/orders/${orderSn}/receiving`,
|
||||
url: `/order/order/${orderSn}/receiving`,
|
||||
method: Method.POST,
|
||||
needToken: true,
|
||||
});
|
||||
|
||||
7
api/paid-member.js
Normal file
7
api/paid-member.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import { http, Method } from '@/utils/request.js'
|
||||
export const getPaidMember = () => http.request({ url: '/member/paid/current', method: Method.GET, needToken: true })
|
||||
export const createPaidMemberOrder = data => http.request({ url: '/member/paid/orders', method: Method.POST, data, needToken: true, header: { 'Content-Type': 'application/json' } })
|
||||
export const getPaidMemberOrders = params => http.request({ url: '/member/paid/orders', method: Method.GET, params, needToken: true })
|
||||
export const getPaidMemberOrder = sn => http.request({ url: `/member/paid/orders/${encodeURIComponent(sn)}`, method: Method.GET, needToken: true })
|
||||
export const cancelPaidMemberOrder = sn => http.request({ url: `/member/paid/orders/${encodeURIComponent(sn)}/cancel`, method: Method.POST, needToken: true })
|
||||
export const getPaidMemberQuotes = skuIds => http.request({ url: '/member/paid/quotes', method: Method.GET, params: { skuIds: skuIds.join(',') }, needToken: true })
|
||||
13
api/pickupCard.js
Normal file
13
api/pickupCard.js
Normal file
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* 提货卡选品、试算及一次兑换接口。
|
||||
* @author Bulbasaur
|
||||
* @since 2026-11-05
|
||||
*/
|
||||
import { http, Method } from '@/utils/request.js'
|
||||
|
||||
/** 获取当前会员的卡规则及候选商品。 */
|
||||
export const getPickupCard = id => http.request({ url: `/promotion/pickupCard/${encodeURIComponent(id)}`, method: Method.GET, needToken: true })
|
||||
/** 服务端试算,校验商品与地址且不消耗权益。 */
|
||||
export const previewPickupCard = data => http.request({ url: '/promotion/pickupCard/preview', method: Method.POST, needToken: true, header: { 'content-type': 'application/json' }, data })
|
||||
/** 原子核销创单,网络重试返回原交易。 */
|
||||
export const redeemPickupCard = data => http.request({ url: '/promotion/pickupCard/redeem', method: Method.POST, needToken: true, header: { 'content-type': 'application/json' }, data })
|
||||
@@ -13,7 +13,24 @@ export function getLiveList(params) {
|
||||
return http.request({
|
||||
url: `broadcast/studio`,
|
||||
method: Method.GET,
|
||||
params
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取直播间详情
|
||||
* @deprecated 请使用 api/live.js 中的 getLiveRoomById
|
||||
* @param {number} roomId 直播间房间号
|
||||
*/
|
||||
export function getLiveDetail(roomId) {
|
||||
return http.request({
|
||||
url: `broadcast/studio`,
|
||||
method: Method.GET,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 1,
|
||||
roomId,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@@ -51,13 +68,25 @@ export function getPointsCategory() {
|
||||
* 获取积分商城商品
|
||||
* @param params
|
||||
*/
|
||||
export function getPointsGoods(params) {
|
||||
export function getPointsGoods(params) {
|
||||
return http.request({
|
||||
url: "/promotion/pointsGoods",
|
||||
method: Method.GET,
|
||||
params,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 获取积分商城商品详情
|
||||
* @param params
|
||||
*/
|
||||
export function getPointsGoodsDetail(id) {
|
||||
return http.request({
|
||||
url: "/promotion/pointsGoods/"+id,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取限时抢购时间线 当天限时抢购信息
|
||||
@@ -91,3 +120,122 @@ export function getAllCoupons(params) {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页获取砍价商品
|
||||
* @param params
|
||||
*/
|
||||
export function getBargainList(params) {
|
||||
return http.request({
|
||||
url: "/promotion/kanjiaGoods",
|
||||
method: Method.GET,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页获取砍价商品
|
||||
* @param params
|
||||
*/
|
||||
export function getBargainDetail(id) {
|
||||
return http.request({
|
||||
url: `/promotion/kanjiaGoods/${id}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取砍价活动
|
||||
* @param params
|
||||
*/
|
||||
export function getBargainActivity(params) {
|
||||
return http.request({
|
||||
url: `/promotion/kanjiaGoods/getKanjiaActivity`,
|
||||
method: Method.POST,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 发起砍价活动
|
||||
* @param params
|
||||
*/
|
||||
export function openBargain(params) {
|
||||
return http.request({
|
||||
url: `/promotion/kanjiaGoods`,
|
||||
method: Method.POST,
|
||||
header: { "content-type": "application/x-www-form-urlencoded" },
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页获取砍价活动-帮砍记录
|
||||
*/
|
||||
export function getBargainLog(params) {
|
||||
return http.request({
|
||||
url: `/promotion/kanjiaGoods/getKanjiaActivity/logs`,
|
||||
method: Method.GET,
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 分页获取砍价活动-帮砍记录
|
||||
*/
|
||||
export function helpBargain(kanJiaActivityId) {
|
||||
return http.request({
|
||||
url: `promotion/kanjiaGoods/help/${kanJiaActivityId}`,
|
||||
method: Method.POST,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页获取已参与的砍价活动
|
||||
*/
|
||||
export function getMineBargainLog(params) {
|
||||
return http.request({
|
||||
url: `/promotion/kanjiaGoods/kanjiaActivity/mine/`,
|
||||
method: Method.GET,
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页查询当前客户礼品卡
|
||||
*/
|
||||
export function getGiftCardCashMemberCardPage(params) {
|
||||
return http.request({
|
||||
url: '/promotion/giftCardCash/memberCard',
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定礼品卡(卡号 + 兑换码/卡密)
|
||||
*/
|
||||
export function bindGiftCardCashMemberCard(data) {
|
||||
return http.request({
|
||||
url: '/promotion/giftCardCash/memberCard/bind',
|
||||
method: Method.POST,
|
||||
needToken: true,
|
||||
header: { 'content-type': 'application/json' },
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 激活礼品卡
|
||||
*/
|
||||
export function activateGiftCardCashMemberCard(memberCardId) {
|
||||
return http.request({
|
||||
url: `/promotion/giftCardCash/memberCard/${memberCardId}/activate`,
|
||||
method: Method.POST,
|
||||
needToken: true,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
52
api/store.js
52
api/store.js
@@ -4,13 +4,16 @@
|
||||
|
||||
import {http, Method} from '@/utils/request.js';
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取店铺列表
|
||||
* @param params
|
||||
*/
|
||||
export function getstoreList(params) {
|
||||
export function getStoreList(params) {
|
||||
return http.request({
|
||||
url: '/store',
|
||||
url: '/store/store',
|
||||
method: Method.GET,
|
||||
params,
|
||||
});
|
||||
@@ -20,10 +23,49 @@ export function getstoreList(params) {
|
||||
* 获取店铺基本信息
|
||||
* @param storeId
|
||||
*/
|
||||
export function getstoreBaseInfo(storeId) {
|
||||
export function getStoreBaseInfo(storeId) {
|
||||
return http.request({
|
||||
url: `/store/get/detail/${storeId}`,
|
||||
url: `/store/store/get/detail/${storeId}`,
|
||||
method: Method.GET,
|
||||
loading: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取店铺分类
|
||||
* @param id
|
||||
*/
|
||||
export function getStoreCategory(id) {
|
||||
return http.request({
|
||||
url: `/store/store/label/get/${id}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 营业执照
|
||||
* @param id
|
||||
*/
|
||||
export function getLicencePhoto(id) {
|
||||
return http.request({
|
||||
url: `/store/store/get/licencePhoto/${id}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取自提点信息
|
||||
* @param id
|
||||
*/
|
||||
export function getStoreAddress(storeId,params) {
|
||||
return http.request({
|
||||
url: `/store/address/page/${storeId}`,
|
||||
method: Method.GET,
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
67
api/trade.js
67
api/trade.js
@@ -155,8 +155,34 @@ export function setAddressId(addressId,way) {
|
||||
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 设置收货地址ID
|
||||
* @param addressId
|
||||
*/
|
||||
export function setStoreAddressId(storeAddressId,way) {
|
||||
return http.request({
|
||||
url: `/trade/carts/storeAddress?storeAddressId=${storeAddressId}&way=${way}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 选择礼品卡
|
||||
* @param way 购物车购买:CART/立即购买:BUY_NOW/拼团:PINTUAN / 积分:POINTS / 砍价:KANJIA
|
||||
* @param credentialId 礼品卡凭证 id;used=false 且不传则清空全部
|
||||
*/
|
||||
export function selectGiftCard(params) {
|
||||
return http.request({
|
||||
url: `/trade/carts/select/giftCard`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建交易
|
||||
*/
|
||||
@@ -177,7 +203,7 @@ export function createTrade(params) {
|
||||
*/
|
||||
export function getCashierData(params) {
|
||||
return http.request({
|
||||
url: "cashier/tradeDetail",
|
||||
url: "payment/cashier/tradeDetail",
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params,
|
||||
@@ -194,7 +220,7 @@ export function getCashierData(params) {
|
||||
*/
|
||||
export function initiatePay(paymentMethod, paymentClient, params) {
|
||||
return http.request({
|
||||
url: `cashier/pay/${paymentMethod}/${paymentClient}`,
|
||||
url: `payment/cashier/pay/${paymentMethod}/${paymentClient}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params,
|
||||
@@ -209,7 +235,7 @@ export function initiatePay(paymentMethod, paymentClient, params) {
|
||||
*/
|
||||
export function getExpress(orderSn) {
|
||||
return http.request({
|
||||
url: `/orders/getTraces/${orderSn}`,
|
||||
url: `/order/order/getTraces/${orderSn}`,
|
||||
method: Method.POST,
|
||||
needToken: true,
|
||||
|
||||
@@ -281,3 +307,38 @@ export function reBuy(sn) {
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取全部配送方式
|
||||
*/
|
||||
export function shippingMethodList(params) {
|
||||
return http.request({
|
||||
url: `/trade/carts/shippingMethodList`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
params: params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交配送方式
|
||||
* @param params
|
||||
*/
|
||||
export function setShipMethod(params) {
|
||||
return http.request({
|
||||
url: "/trade/carts/shippingMethod",
|
||||
method: Method.PUT,
|
||||
needToken: true,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 查看包裹列表
|
||||
export function getPackage(orderSn) {
|
||||
return http.request({
|
||||
url: `/order/order/getPackage/${orderSn}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
133
components/category/category-scroller.vue
Normal file
133
components/category/category-scroller.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<scroll-view scroll-x scroll-with-animation class="cate-scroller" :scroll-into-view="intoView">
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
:id="'cs-' + item.id"
|
||||
class="cs-item"
|
||||
:class="{ active: item.id === currentId, 'cs-item--text': mode === 'text' }"
|
||||
@click="$emit('change', item)"
|
||||
>
|
||||
<template v-if="mode === 'icon'">
|
||||
<view class="cs-icon-box">
|
||||
<view class="cs-icon">
|
||||
<u-image width="80rpx" height="80rpx" shape="circle" :src="item.image" mode="aspectFill">
|
||||
<template #loading><u-loading-icon></u-loading-icon></template>
|
||||
</u-image>
|
||||
</view>
|
||||
</view>
|
||||
<text class="cs-name">{{ item.name }}</text>
|
||||
</template>
|
||||
<template v-else>
|
||||
<text class="cs-text-name">{{ item.name }}</text>
|
||||
<view class="cs-text-line" v-if="item.id === currentId"></view>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
list?: any[]
|
||||
currentId?: string | number | null
|
||||
mode?: 'icon' | 'text'
|
||||
}>(), {
|
||||
list: () => [],
|
||||
currentId: null,
|
||||
mode: 'icon'
|
||||
})
|
||||
|
||||
defineEmits(['change'])
|
||||
|
||||
const intoView = computed(() =>
|
||||
props.currentId != null ? 'cs-' + props.currentId : ''
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cate-scroller {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-bottom: 1rpx solid #f2f3f5;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cs-item {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 130rpx;
|
||||
padding: 16rpx 6rpx 14rpx;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.cs-icon-box {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 3rpx solid transparent;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.cs-item.active .cs-icon-box {
|
||||
border-color: $light-color;
|
||||
box-shadow: 0 4rpx 12rpx rgba(255, 102, 0, 0.15);
|
||||
}
|
||||
.cs-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: #f6f7f9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.cs-name {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #555;
|
||||
max-width: 120rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.cs-item.active .cs-name {
|
||||
color: $light-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cs-item--text {
|
||||
width: auto;
|
||||
padding: 18rpx 28rpx;
|
||||
position: relative;
|
||||
}
|
||||
.cs-text-name {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.cs-item--text.active .cs-text-name {
|
||||
color: $light-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cs-text-line {
|
||||
position: absolute;
|
||||
bottom: 6rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 32rpx;
|
||||
height: 4rpx;
|
||||
border-radius: 2rpx;
|
||||
background: $light-color;
|
||||
}
|
||||
</style>
|
||||
75
components/category/category-side-list.vue
Normal file
75
components/category/category-side-list.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<scroll-view scroll-y scroll-with-animation class="side-list">
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="side-item"
|
||||
:class="{ active: item.id === currentId }"
|
||||
@click="$emit('change', item)"
|
||||
>
|
||||
<view class="active-indicator" v-if="item.id === currentId"></view>
|
||||
<text class="side-item-text">{{ item.name }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
withDefaults(defineProps<{
|
||||
list?: any[]
|
||||
currentId?: string | number | null
|
||||
}>(), {
|
||||
list: () => [],
|
||||
currentId: null
|
||||
})
|
||||
|
||||
defineEmits(['change'])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-list {
|
||||
width: 176rpx;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
background-color: #f6f7f9;
|
||||
border-right: 1rpx solid #ebebeb;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.side-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 96rpx;
|
||||
padding: 16rpx 14rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
color: $light-color;
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
.side-item-text {
|
||||
line-height: 1.35;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.active-indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 0 4rpx 4rpx 0;
|
||||
background: $light-color;
|
||||
}
|
||||
</style>
|
||||
94
components/category/sort-bar.vue
Normal file
94
components/category/sort-bar.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<view class="sort-bar">
|
||||
<view
|
||||
class="sort-item"
|
||||
:class="{ active: sort === 'releaseTime' }"
|
||||
@click="onClick('releaseTime')"
|
||||
>
|
||||
<text class="sort-label">综合</text>
|
||||
</view>
|
||||
<view
|
||||
class="sort-item"
|
||||
:class="{ active: sort === 'buyCount' }"
|
||||
@click="onClick('buyCount')"
|
||||
>
|
||||
<text class="sort-label">销量</text>
|
||||
</view>
|
||||
<view
|
||||
class="sort-item"
|
||||
:class="{ active: sort === 'price' }"
|
||||
@click="onClick('price')"
|
||||
>
|
||||
<text class="sort-label">价格</text>
|
||||
<view class="arrows">
|
||||
<u-icon
|
||||
name="arrow-up-fill"
|
||||
size="7"
|
||||
:color="sort === 'price' && order === 'asc' ? '#ff6700' : '#bbbbbb'"
|
||||
></u-icon>
|
||||
<u-icon
|
||||
name="arrow-down-fill"
|
||||
size="7"
|
||||
:color="sort === 'price' && order === 'desc' ? '#ff6700' : '#bbbbbb'"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{
|
||||
sort?: string
|
||||
order?: string
|
||||
}>(), {
|
||||
sort: 'releaseTime',
|
||||
order: 'desc'
|
||||
})
|
||||
|
||||
const emit = defineEmits(['change'])
|
||||
|
||||
function onClick(type: string) {
|
||||
let nextOrder = 'desc'
|
||||
if (type === 'price') {
|
||||
nextOrder = props.sort === 'price' && props.order === 'desc' ? 'asc' : 'desc'
|
||||
}
|
||||
emit('change', { sort: type, order: nextOrder })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sort-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 68rpx;
|
||||
background: #ffffff;
|
||||
padding: 0 20rpx;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sort-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 44rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&.active {
|
||||
color: $light-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.sort-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.arrows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 8rpx;
|
||||
gap: 2rpx;
|
||||
}
|
||||
</style>
|
||||
61
components/category/sub-tag-bar.vue
Normal file
61
components/category/sub-tag-bar.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<scroll-view scroll-x scroll-with-animation class="tag-bar" :scroll-into-view="intoView">
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
:id="'tb-' + item.id"
|
||||
class="tag-item"
|
||||
:class="{ active: item.id === currentId }"
|
||||
@click="$emit('change', item)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
list?: any[]
|
||||
currentId?: string | number | null
|
||||
}>(), {
|
||||
list: () => [],
|
||||
currentId: null
|
||||
})
|
||||
|
||||
defineEmits(['change'])
|
||||
|
||||
const intoView = computed(() =>
|
||||
props.currentId != null ? 'tb-' + props.currentId : ''
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tag-bar {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
padding: 12rpx 16rpx 10rpx;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tag-item {
|
||||
display: inline-block;
|
||||
padding: 6rpx 22rpx;
|
||||
margin-right: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
background: #f5f6f8;
|
||||
border-radius: 24rpx;
|
||||
line-height: 1.35;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.active {
|
||||
color: #ffffff;
|
||||
background: $light-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
297
components/category/tpl-category-goods.vue
Normal file
297
components/category/tpl-category-goods.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<view class="tpl-goods">
|
||||
<!-- 模板2/3:顶部一级分类图标横滑 -->
|
||||
<category-scroller
|
||||
v-if="template !== 4"
|
||||
:list="categoryList"
|
||||
:current-id="currentL1 && currentL1.id"
|
||||
mode="icon"
|
||||
@change="onL1Change"
|
||||
/>
|
||||
<view class="tpl-main">
|
||||
<!-- 左侧:模板2/3 为二级分类,模板4 为一级分类 -->
|
||||
<category-side-list
|
||||
:list="sideList"
|
||||
:current-id="sideCurrentId"
|
||||
@change="onSideChange"
|
||||
/>
|
||||
<view class="tpl-right">
|
||||
<!-- 模板2:三级分类标签横滑 (置于右栏顶部) -->
|
||||
<sub-tag-bar
|
||||
v-if="template === 2 && l3List.length"
|
||||
:list="l3List"
|
||||
:current-id="currentL3 && currentL3.id"
|
||||
@change="onL3Change"
|
||||
/>
|
||||
<!-- 模板4:右上二级分类文字横滑(起点为当前一级名称,作为"全部"入口) -->
|
||||
<category-scroller
|
||||
v-if="template === 4"
|
||||
:list="l2Items"
|
||||
:current-id="topCurrentId"
|
||||
mode="text"
|
||||
@change="onL2Change"
|
||||
/>
|
||||
<sort-bar :sort="sort" :order="order" @change="onSortChange" />
|
||||
<scroll-view scroll-y class="goods-scroll" @scrolltolower="loadMore">
|
||||
<m-goods-list
|
||||
v-if="goodsList.length"
|
||||
:res="goodsList"
|
||||
type="oneColumns"
|
||||
:show-fields="setting.showFields"
|
||||
:tab-bar-gap="false"
|
||||
:store-name="false"
|
||||
@add-cart="onAddCart"
|
||||
/>
|
||||
<view v-else-if="!loading" class="empty-state">
|
||||
<u-empty
|
||||
:text="failed ? '加载失败,请重试' : '暂无相关商品'"
|
||||
mode="data"
|
||||
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
||||
margin-top="100"
|
||||
>
|
||||
<view v-if="failed" class="retry" @click="loadGoods(true)">重试</view>
|
||||
</u-empty>
|
||||
</view>
|
||||
<uni-load-more
|
||||
v-if="showLoadMore"
|
||||
:status="loading ? 'loading' : hasMore ? 'more' : 'noMore'"
|
||||
:color="'#bfbfbf'"
|
||||
:content-text="loadMoreText"
|
||||
></uni-load-more>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { getGoodsList } from '@/api/goods.js'
|
||||
import CategoryScroller from './category-scroller.vue'
|
||||
import CategorySideList from './category-side-list.vue'
|
||||
import SubTagBar from './sub-tag-bar.vue'
|
||||
import SortBar from './sort-bar.vue'
|
||||
import MGoodsList from '@/components/m-goods-list/list.vue'
|
||||
|
||||
defineOptions({
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
},
|
||||
})
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
categoryList?: any[]
|
||||
setting?: any
|
||||
template?: number
|
||||
}>(), {
|
||||
categoryList: () => [],
|
||||
setting: () => ({ template: 1, showFields: {} }),
|
||||
template: 2
|
||||
})
|
||||
|
||||
const currentL1 = ref<any>(null)
|
||||
const currentL2 = ref<any>(null)
|
||||
const currentL3 = ref<any>(null)
|
||||
const sort = ref('releaseTime')
|
||||
const order = ref('desc')
|
||||
|
||||
const goodsList = ref<any[]>([])
|
||||
const pageNumber = ref(1)
|
||||
const hasMore = ref(true)
|
||||
const loading = ref(false)
|
||||
const failed = ref(false)
|
||||
|
||||
const loadMoreText = {
|
||||
contentdown: '上拉加载更多',
|
||||
contentrefresh: '正在加载...',
|
||||
contentnomore: '—— 到底啦 ——',
|
||||
}
|
||||
|
||||
// 仅在正在加载、或者有下一页、或者商品总数达到 6 件以上触底时才展示底线,避免少量商品(如1~2件)时在空白区域突兀展示
|
||||
const showLoadMore = computed(() => {
|
||||
if (!goodsList.value.length) return false
|
||||
if (loading.value) return true
|
||||
if (hasMore.value) return true
|
||||
return goodsList.value.length >= 6
|
||||
})
|
||||
|
||||
// 模板2/3:左侧为当前一级的二级分类;模板4:左侧为一级分类
|
||||
const sideList = computed(() =>
|
||||
props.template === 4
|
||||
? props.categoryList
|
||||
: (currentL1.value && currentL1.value.children) || []
|
||||
)
|
||||
const sideCurrentId = computed(() =>
|
||||
props.template === 4
|
||||
? currentL1.value && currentL1.value.id
|
||||
: currentL2.value && currentL2.value.id
|
||||
)
|
||||
// 模板2 的三级标签
|
||||
const l3List = computed(() =>
|
||||
(currentL2.value && currentL2.value.children) || []
|
||||
)
|
||||
// 模板4 顶部:当前一级名称(作为"全部") + 其二级分类
|
||||
const l2Items = computed(() => {
|
||||
if (!currentL1.value) return []
|
||||
return [currentL1.value, ...((currentL1.value.children) || [])]
|
||||
})
|
||||
const topCurrentId = computed(() =>
|
||||
(currentL2.value && currentL2.value.id) || (currentL1.value && currentL1.value.id)
|
||||
)
|
||||
|
||||
const queryCategoryId = computed(() =>
|
||||
(currentL3.value && currentL3.value.id) ||
|
||||
(currentL2.value && currentL2.value.id) ||
|
||||
(currentL1.value && currentL1.value.id)
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.categoryList,
|
||||
(list) => {
|
||||
if (list && list.length && !currentL1.value) {
|
||||
currentL1.value = list[0]
|
||||
currentL2.value = props.template === 4 ? null : (list[0].children && list[0].children[0]) || null
|
||||
currentL3.value = (currentL2.value && currentL2.value.children && currentL2.value.children[0]) || null
|
||||
loadGoods(true)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
function onL1Change(item: any) {
|
||||
if (currentL1.value && item.id === currentL1.value.id) return
|
||||
currentL1.value = item
|
||||
currentL2.value = props.template === 4 ? null : (item.children && item.children[0]) || null
|
||||
currentL3.value = (currentL2.value && currentL2.value.children && currentL2.value.children[0]) || null
|
||||
resetSort()
|
||||
loadGoods(true)
|
||||
}
|
||||
|
||||
function onSideChange(item: any) {
|
||||
if (props.template === 4) {
|
||||
onL1Change(item)
|
||||
return
|
||||
}
|
||||
if (currentL2.value && item.id === currentL2.value.id) return
|
||||
currentL2.value = item
|
||||
currentL3.value = (item.children && item.children[0]) || null
|
||||
loadGoods(true)
|
||||
}
|
||||
|
||||
function onL3Change(item: any) {
|
||||
if (currentL3.value && item.id === currentL3.value.id) return
|
||||
currentL3.value = item
|
||||
loadGoods(true)
|
||||
}
|
||||
|
||||
function onL2Change(item: any) {
|
||||
// 选中一级名称项 = 全部(L2 置空)
|
||||
if (currentL1.value && item.id === currentL1.value.id) {
|
||||
currentL2.value = null
|
||||
} else {
|
||||
currentL2.value = item
|
||||
}
|
||||
loadGoods(true)
|
||||
}
|
||||
|
||||
function onSortChange(payload: { sort: string; order: string }) {
|
||||
sort.value = payload.sort
|
||||
order.value = payload.order
|
||||
loadGoods(true)
|
||||
}
|
||||
|
||||
function resetSort() {
|
||||
sort.value = 'releaseTime'
|
||||
order.value = 'desc'
|
||||
}
|
||||
|
||||
async function loadGoods(reset = false) {
|
||||
if (loading.value || !queryCategoryId.value) return
|
||||
if (reset) {
|
||||
pageNumber.value = 1
|
||||
goodsList.value = []
|
||||
hasMore.value = true
|
||||
}
|
||||
loading.value = true
|
||||
failed.value = false
|
||||
try {
|
||||
const res = await getGoodsList({
|
||||
categoryId: queryCategoryId.value,
|
||||
sort: sort.value,
|
||||
order: order.value,
|
||||
pageNumber: pageNumber.value,
|
||||
pageSize: 10,
|
||||
})
|
||||
const records = (res.data && res.data.result && res.data.result.records) || []
|
||||
goodsList.value.push(...records)
|
||||
hasMore.value = records.length >= 10
|
||||
} catch (e) {
|
||||
failed.value = true
|
||||
uni.showToast({ title: '加载失败,请重试', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
if (!hasMore.value || loading.value) return
|
||||
pageNumber.value += 1
|
||||
loadGoods(false)
|
||||
}
|
||||
|
||||
function onAddCart(item: any) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/product/goods?id=' + item.id + '&goodsId=' + item.goodsId,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tpl-goods {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tpl-main {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
height: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tpl-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
}
|
||||
.goods-scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
height: 0;
|
||||
}
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60rpx 0 100rpx;
|
||||
}
|
||||
.retry {
|
||||
margin-top: 24rpx;
|
||||
padding: 12rpx 50rpx;
|
||||
border: 1rpx solid $light-color;
|
||||
color: $light-color;
|
||||
border-radius: 36rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -10,40 +10,30 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
// 购物车 cart 消息 msg 订单 order 查询 search
|
||||
type: {
|
||||
type: String,
|
||||
default: 'search'
|
||||
},
|
||||
isBtn:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title:{
|
||||
type: String,
|
||||
default: '没有相关内容'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
src:''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.src ='/static/default/default_'+ this.type + '.png';
|
||||
},
|
||||
methods: {
|
||||
toHome() {
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
type?: string
|
||||
isBtn?: boolean
|
||||
title?: string
|
||||
}>(), {
|
||||
type: 'search',
|
||||
isBtn: false,
|
||||
title: '没有相关内容'
|
||||
})
|
||||
|
||||
const src = ref('')
|
||||
|
||||
onMounted(() => {
|
||||
src.value = `/static/default/default_${props.type}.png`
|
||||
})
|
||||
|
||||
const toHome = () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
459
components/distribution-goods-share/index.vue
Normal file
459
components/distribution-goods-share/index.vue
Normal file
@@ -0,0 +1,459 @@
|
||||
<template>
|
||||
<view class="share-panel" :style="themeStyle">
|
||||
<view class="tabs">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 'text' }"
|
||||
@click="activeTab = 'text'"
|
||||
>
|
||||
<text>推广图文</text>
|
||||
<view v-if="activeTab === 'text'" class="tab-line"></view>
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 'poster' }"
|
||||
@click="activeTab = 'poster'"
|
||||
>
|
||||
<text>生成海报</text>
|
||||
<view v-if="activeTab === 'poster'" class="tab-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="loading-wrap">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="activeTab === 'text'" class="content">
|
||||
<view class="text-card">
|
||||
<text v-if="shareContext.defaultShareText" class="share-text" :user-select="true">
|
||||
{{ shareContext.defaultShareText }}
|
||||
</text>
|
||||
<view class="share-divider"></view>
|
||||
<text class="share-text" :user-select="true">{{ shareBodyText }}</text>
|
||||
<view class="share-divider"></view>
|
||||
</view>
|
||||
|
||||
<view class="media-section">
|
||||
<scroll-view scroll-x class="image-scroll" v-if="images.length">
|
||||
<view class="image-list">
|
||||
<image
|
||||
v-for="(img, index) in images"
|
||||
:key="index"
|
||||
class="goods-image"
|
||||
:src="img"
|
||||
mode="aspectFill"
|
||||
@click="previewImage(index)"
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="save-btn-wrap">
|
||||
<view class="save-btn" @click="saveShareContent">保存图文</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="content">
|
||||
<poster-panel
|
||||
:images="images"
|
||||
:goods-name="shareContext.goodsName"
|
||||
:goods-desc="posterGoodsDesc"
|
||||
:price="shareContext.price"
|
||||
:sku-id="skuId"
|
||||
:goods-id="goodsId"
|
||||
:distribution-id="distributionId"
|
||||
:active="activeTab === 'poster'"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useStore } from '@/store'
|
||||
import config from '@/config/config'
|
||||
import { getThemeStyle } from '@/utils/theme'
|
||||
import { getDistributionGoodsShareContext } from '@/api/distribution'
|
||||
import { unitPrice, parseGoodsImageUrl } from '@/utils/filters.js'
|
||||
import PosterPanel from './poster-panel.vue'
|
||||
// #ifdef H5
|
||||
import { h5Copy } from '@/js_sdk/h5-copy/h5-copy.js'
|
||||
// #endif
|
||||
|
||||
const props = defineProps<{
|
||||
skuId?: string
|
||||
goodsId?: string
|
||||
distributionId?: string
|
||||
}>()
|
||||
|
||||
const store = useStore()
|
||||
const themeStyle = computed(() => getThemeStyle(store.state.theme))
|
||||
|
||||
const activeTab = ref<'text' | 'poster'>('text')
|
||||
const loading = ref(true)
|
||||
const shareContext = ref<Record<string, any>>({})
|
||||
|
||||
const posterGoodsDesc = computed(() => {
|
||||
const ctx = shareContext.value
|
||||
return ctx.goodsSellingPoint || ctx.defaultShareText || ''
|
||||
})
|
||||
|
||||
const images = computed(() => {
|
||||
const raw: string[] = []
|
||||
const list = shareContext.value.images
|
||||
if (Array.isArray(list) && list.length) {
|
||||
raw.push(...list)
|
||||
} else if (shareContext.value.thumbnail) {
|
||||
raw.push(shareContext.value.thumbnail)
|
||||
}
|
||||
const parsed = raw
|
||||
.map((item) => parseGoodsImageUrl(item))
|
||||
.filter((url) => !!url)
|
||||
return [...new Set(parsed)]
|
||||
})
|
||||
|
||||
const shareLink = computed(() => {
|
||||
const link = shareContext.value.miniProgramLink || shareContext.value.sharePath || ''
|
||||
if (!link) return ''
|
||||
if (link.startsWith('http')) return link
|
||||
const base = (config.shareLink || '').replace(/\/$/, '')
|
||||
return base + link
|
||||
})
|
||||
|
||||
const SHARE_DIVIDER = '- '.repeat(36).trim()
|
||||
|
||||
const shareBodyText = computed(() => {
|
||||
const ctx = shareContext.value
|
||||
const lines: string[] = []
|
||||
if (ctx.goodsName) {
|
||||
lines.push(`🔴 ${ctx.goodsName}`)
|
||||
}
|
||||
if (ctx.price !== null && ctx.price !== undefined) {
|
||||
lines.push(`【到手价】💰 ${unitPrice(ctx.price, '¥')}元`)
|
||||
}
|
||||
if (shareLink.value) {
|
||||
lines.push(`点击立即参与:${shareLink.value}`)
|
||||
}
|
||||
return lines.join('\n')
|
||||
})
|
||||
|
||||
const shareText = computed(() => {
|
||||
const ctx = shareContext.value
|
||||
const lines: string[] = []
|
||||
if (ctx.defaultShareText) {
|
||||
lines.push(ctx.defaultShareText)
|
||||
lines.push('')
|
||||
}
|
||||
lines.push(SHARE_DIVIDER)
|
||||
if (shareBodyText.value) {
|
||||
lines.push(shareBodyText.value)
|
||||
}
|
||||
lines.push(SHARE_DIVIDER)
|
||||
return lines.join('\n')
|
||||
})
|
||||
|
||||
watch(
|
||||
() => [props.skuId, props.goodsId, props.distributionId],
|
||||
() => {
|
||||
loadShareContext()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
function loadShareContext() {
|
||||
const { skuId, goodsId, distributionId } = props
|
||||
if (!skuId || !goodsId || !distributionId) {
|
||||
loading.value = false
|
||||
shareContext.value = {}
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
getDistributionGoodsShareContext({ skuId, goodsId, distributionId })
|
||||
.then((res) => {
|
||||
if (res.data?.success) {
|
||||
shareContext.value = res.data.result || {}
|
||||
} else {
|
||||
uni.showToast({ title: res.data?.message || '加载失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
uni.showToast({ title: '加载分享内容失败', icon: 'none' })
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function previewImage(index: number) {
|
||||
if (!images.value.length) return
|
||||
uni.previewImage({
|
||||
current: images.value[index],
|
||||
urls: images.value,
|
||||
})
|
||||
}
|
||||
|
||||
function isClipboardBlocked(errMsg = '') {
|
||||
return (
|
||||
errMsg.includes('privacy agreement') ||
|
||||
errMsg.includes('no permission') ||
|
||||
errMsg.includes('auth deny')
|
||||
)
|
||||
}
|
||||
|
||||
function saveShareContent() {
|
||||
const text = shareText.value
|
||||
if (!text.trim()) {
|
||||
uni.showToast({ title: '暂无可保存内容', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
// #ifdef H5
|
||||
if (h5Copy(text) === false) {
|
||||
uni.showToast({ title: '复制失败,请重试', icon: 'none' })
|
||||
return
|
||||
}
|
||||
continueAfterCopy()
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
const runCopy = () => {
|
||||
uni.setClipboardData({
|
||||
data: text,
|
||||
showToast: false,
|
||||
success: () => continueAfterCopy(),
|
||||
fail: (err: any) => {
|
||||
console.error('setClipboardData fail', err)
|
||||
const errMsg = err?.errMsg || ''
|
||||
if (isClipboardBlocked(errMsg)) {
|
||||
continueAfterCopy()
|
||||
return
|
||||
}
|
||||
uni.showToast({ title: '复制失败,请重试', icon: 'none' })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const wxApi = (globalThis as any).wx
|
||||
if (wxApi?.requirePrivacyAuthorize) {
|
||||
wxApi.requirePrivacyAuthorize({
|
||||
success: () => runCopy(),
|
||||
fail: () => continueAfterCopy(),
|
||||
})
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
runCopy()
|
||||
// #endif
|
||||
}
|
||||
|
||||
function continueAfterCopy() {
|
||||
const imageUrls = images.value
|
||||
if (!imageUrls.length) {
|
||||
uni.showToast({ title: '内容已复制', icon: 'none' })
|
||||
return
|
||||
}
|
||||
uni.showLoading({ title: '保存中', mask: true })
|
||||
saveImages(imageUrls)
|
||||
.then(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '内容已复制', icon: 'none' })
|
||||
})
|
||||
.catch((error) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '图片保存失败', icon: 'none' })
|
||||
console.error('save images failed', error)
|
||||
})
|
||||
}
|
||||
|
||||
function saveToAlbum(filePath: string): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath,
|
||||
success: () => resolve(),
|
||||
fail: (err: any) => {
|
||||
const errMsg = err?.errMsg || ''
|
||||
const needAuth =
|
||||
errMsg.includes('auth deny') ||
|
||||
errMsg.includes('authorize') ||
|
||||
errMsg.includes('permission')
|
||||
// #ifdef MP-WEIXIN
|
||||
if (!needAuth) {
|
||||
reject(new Error('save failed'))
|
||||
return
|
||||
}
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '需要您授权保存图片到相册',
|
||||
confirmText: '去设置',
|
||||
success: (modalRes) => {
|
||||
if (!modalRes.confirm) {
|
||||
reject(new Error('auth denied'))
|
||||
return
|
||||
}
|
||||
uni.openSetting({
|
||||
success: (settingRes) => {
|
||||
if (settingRes.authSetting['scope.writePhotosAlbum']) {
|
||||
saveToAlbum(filePath).then(resolve).catch(reject)
|
||||
} else {
|
||||
reject(new Error('auth denied'))
|
||||
}
|
||||
},
|
||||
fail: () => reject(new Error('auth denied')),
|
||||
})
|
||||
},
|
||||
fail: () => reject(new Error('auth denied')),
|
||||
})
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
reject(new Error('save failed'))
|
||||
// #endif
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function saveImages(urls: string[]) {
|
||||
return urls.reduce<Promise<void>>((chain, url) => {
|
||||
return chain.then(() => downloadAndSaveImage(url))
|
||||
}, Promise.resolve())
|
||||
}
|
||||
|
||||
function downloadAndSaveImage(url: string) {
|
||||
if (!url || !/^https?:\/\//.test(url)) {
|
||||
return Promise.reject(new Error('invalid url'))
|
||||
}
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
uni.downloadFile({
|
||||
url,
|
||||
success: (res) => {
|
||||
if (res.statusCode !== 200 || !res.tempFilePath) {
|
||||
reject(new Error('download failed'))
|
||||
return
|
||||
}
|
||||
saveToAlbum(res.tempFilePath).then(resolve).catch(reject)
|
||||
},
|
||||
fail: () => reject(new Error('download failed')),
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.share-panel {
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 32rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding-bottom: 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
|
||||
&.active {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-line {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 56rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
background: #ff8f3f;
|
||||
}
|
||||
|
||||
.loading-wrap {
|
||||
padding: 120rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 24rpx 24rpx 48rpx;
|
||||
}
|
||||
|
||||
.text-card {
|
||||
background: #f7f7f7;
|
||||
border-radius: 16rpx;
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
.share-divider {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
margin: 20rpx 0;
|
||||
border-top: 2rpx dashed #c8c8c8;
|
||||
}
|
||||
|
||||
.share-text {
|
||||
font-size: 28rpx;
|
||||
line-height: 1.7;
|
||||
color: #333;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
|
||||
.media-section {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.image-scroll {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.save-btn-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
min-width: 140rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 30rpx;
|
||||
background: linear-gradient(90deg, #ff9f3f, #ff6b35);
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
box-shadow: 0 6rpx 16rpx rgba(255, 107, 53, 0.2);
|
||||
}
|
||||
</style>
|
||||
556
components/distribution-goods-share/poster-panel.vue
Normal file
556
components/distribution-goods-share/poster-panel.vue
Normal file
@@ -0,0 +1,556 @@
|
||||
<template>
|
||||
<view class="poster-panel">
|
||||
<view v-if="posterList.length" class="poster-hint">点击海报预览后可保存到相册</view>
|
||||
|
||||
<view v-if="loading" class="loading-wrap">
|
||||
<text class="loading-text">海报生成中...</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="loadError" class="loading-wrap">
|
||||
<text class="loading-text">{{ loadError }}</text>
|
||||
<view class="retry-btn" @click="generatePosters">重新生成</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="!images.length" class="loading-wrap">
|
||||
<text class="loading-text">暂无商品图片</text>
|
||||
</view>
|
||||
|
||||
<template v-else-if="posterList.length">
|
||||
<view class="poster-content">
|
||||
<swiper
|
||||
class="poster-swiper"
|
||||
:current="current"
|
||||
circular
|
||||
@change="onSwiperChange"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in posterList" :key="index">
|
||||
<view class="poster-card-wrap" @click="previewPoster(index)">
|
||||
<image class="poster-image" :src="item" mode="widthFix" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view v-if="posterList.length > 1" class="poster-dots">
|
||||
<view
|
||||
v-for="(_, index) in posterList"
|
||||
:key="index"
|
||||
:class="['dot', current === index && 'active']"
|
||||
/>
|
||||
</view>
|
||||
<view class="save-btn-wrap">
|
||||
<view class="save-btn" @click="saveCurrentPoster">保存海报</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="canvas-hide">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<canvas id="distributionPosterCanvas" type="2d" style="width: 600px; height: 840px" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<canvas
|
||||
canvas-id="distributionPosterCanvas"
|
||||
id="distributionPosterCanvas"
|
||||
style="width: 600px; height: 840px"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, getCurrentInstance, nextTick } from 'vue'
|
||||
import DrawPoster from '@/js_sdk/u-draw-poster'
|
||||
import { getDistributionGoodsPosterContext } from '@/api/distribution'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
|
||||
const CANVAS_SELECTOR = 'distributionPosterCanvas'
|
||||
const POSTER_WIDTH = 600
|
||||
const IMAGE_HEIGHT = POSTER_WIDTH
|
||||
const BOTTOM_HEIGHT = 240
|
||||
const POSTER_HEIGHT = IMAGE_HEIGHT + BOTTOM_HEIGHT
|
||||
const QR_SIZE = 120
|
||||
const QR_MARGIN_RIGHT = 28
|
||||
const QR_MARGIN_BOTTOM = 28
|
||||
const GENERATE_TIMEOUT = 45000
|
||||
|
||||
const props = defineProps<{
|
||||
images?: string[]
|
||||
goodsName?: string
|
||||
goodsDesc?: string
|
||||
price?: number | null
|
||||
skuId?: string
|
||||
goodsId?: string
|
||||
distributionId?: string
|
||||
active?: boolean
|
||||
}>()
|
||||
|
||||
const instance = getCurrentInstance()
|
||||
const posterList = ref<string[]>([])
|
||||
const current = ref(0)
|
||||
const loading = ref(false)
|
||||
const loadError = ref('')
|
||||
const hasGenerated = ref(false)
|
||||
let dp: any = null
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const st2 = (size: number) => size * 2
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
const st2 = (size: number) => size
|
||||
// #endif
|
||||
|
||||
watch(
|
||||
() => [props.images?.length, props.skuId, props.goodsId, props.distributionId],
|
||||
() => {
|
||||
resetPosters()
|
||||
if (props.active && props.images?.length) {
|
||||
generatePosters()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.active,
|
||||
(active) => {
|
||||
if (active && !hasGenerated.value && props.images?.length && !loading.value) {
|
||||
generatePosters()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
function resetPosters() {
|
||||
hasGenerated.value = false
|
||||
posterList.value = []
|
||||
loadError.value = ''
|
||||
clearDrawPosterCache()
|
||||
}
|
||||
|
||||
function clearDrawPosterCache() {
|
||||
const pages = getCurrentPages()
|
||||
const page = pages[pages.length - 1] as any
|
||||
if (!page) return
|
||||
delete page[`#${CANVAS_SELECTOR}__dp`]
|
||||
delete page[`${CANVAS_SELECTOR}__dp`]
|
||||
}
|
||||
|
||||
function onSwiperChange(e: any) {
|
||||
current.value = e.detail?.current ?? 0
|
||||
}
|
||||
|
||||
function previewPoster(index: number) {
|
||||
if (!posterList.value.length) return
|
||||
uni.previewImage({
|
||||
current: posterList.value[index],
|
||||
urls: posterList.value,
|
||||
})
|
||||
}
|
||||
|
||||
function sleep(ms: number) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms))
|
||||
}
|
||||
|
||||
function withTimeout<T>(promise: Promise<T>, ms: number, message: string) {
|
||||
return Promise.race([
|
||||
promise,
|
||||
new Promise<T>((_, reject) => {
|
||||
setTimeout(() => reject(new Error(message)), ms)
|
||||
}),
|
||||
])
|
||||
}
|
||||
|
||||
function getComponentThis() {
|
||||
return instance?.proxy || instance
|
||||
}
|
||||
|
||||
async function waitCanvasReady() {
|
||||
await nextTick()
|
||||
await sleep(150)
|
||||
}
|
||||
|
||||
async function resolveImagePath(url: string) {
|
||||
if (!url) {
|
||||
throw new Error('商品图片地址无效')
|
||||
}
|
||||
if (
|
||||
url.startsWith('data:') ||
|
||||
url.startsWith('wxfile://') ||
|
||||
url.startsWith('http://tmp/') ||
|
||||
url.startsWith('https://tmp/')
|
||||
) {
|
||||
return url
|
||||
}
|
||||
const res = await uni.downloadFile({ url })
|
||||
if (res.statusCode === 200 && res.tempFilePath) {
|
||||
return res.tempFilePath
|
||||
}
|
||||
throw new Error('商品图片下载失败,请检查图片域名配置')
|
||||
}
|
||||
|
||||
function getImageInfo(src: string): Promise<{ width: number; height: number }> {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getImageInfo({
|
||||
src,
|
||||
success: (res) => resolve({ width: res.width, height: res.height }),
|
||||
fail: reject,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function calcContainBox(
|
||||
imgW: number,
|
||||
imgH: number,
|
||||
boxX: number,
|
||||
boxY: number,
|
||||
boxW: number,
|
||||
boxH: number
|
||||
) {
|
||||
const scale = Math.min(boxW / imgW, boxH / imgH)
|
||||
const width = imgW * scale
|
||||
const height = imgH * scale
|
||||
return {
|
||||
x: boxX + (boxW - width) / 2,
|
||||
y: boxY + (boxH - height) / 2,
|
||||
width,
|
||||
height,
|
||||
}
|
||||
}
|
||||
|
||||
async function generatePosters() {
|
||||
const { skuId, goodsId, distributionId, images } = props
|
||||
if (!skuId || !goodsId || !distributionId || !images?.length) {
|
||||
return
|
||||
}
|
||||
if (loading.value) {
|
||||
return
|
||||
}
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
{
|
||||
loadError.value = '请在微信小程序中生成海报'
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
|
||||
loading.value = true
|
||||
loadError.value = ''
|
||||
posterList.value = []
|
||||
clearDrawPosterCache()
|
||||
|
||||
try {
|
||||
await withTimeout(runGeneratePosters(images, skuId, goodsId, distributionId), GENERATE_TIMEOUT, '海报生成超时,请重试')
|
||||
hasGenerated.value = true
|
||||
} catch (error: any) {
|
||||
console.error('generate posters failed', error)
|
||||
loadError.value = error?.message || '海报生成失败,请稍后重试'
|
||||
clearDrawPosterCache()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function runGeneratePosters(
|
||||
images: string[],
|
||||
skuId: string,
|
||||
goodsId: string,
|
||||
distributionId: string
|
||||
) {
|
||||
const posterRes = await getDistributionGoodsPosterContext({ skuId, goodsId, distributionId })
|
||||
if (!posterRes.data?.success || !posterRes.data?.result?.qrCode) {
|
||||
throw new Error(posterRes.data?.message || '葵花码生成失败')
|
||||
}
|
||||
const qrCode = `data:image/png;base64,${posterRes.data.result.qrCode}`
|
||||
|
||||
await waitCanvasReady()
|
||||
|
||||
dp = await DrawPoster.build({
|
||||
selector: CANVAS_SELECTOR,
|
||||
componentThis: getComponentThis(),
|
||||
loading: false,
|
||||
debugging: false,
|
||||
})
|
||||
|
||||
if (!dp?.canvas || !dp?.ctx) {
|
||||
throw new Error('画布初始化失败,请重试')
|
||||
}
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
dp.canvas.width = st2(POSTER_WIDTH)
|
||||
dp.canvas.height = st2(POSTER_HEIGHT)
|
||||
// #endif
|
||||
|
||||
const results: string[] = []
|
||||
for (const image of images) {
|
||||
const localImage = await resolveImagePath(image)
|
||||
results.push(await drawPoster(dp, localImage, qrCode))
|
||||
}
|
||||
posterList.value = results
|
||||
}
|
||||
|
||||
async function drawPoster(dpInst: any, productImg: string, qrCode: string) {
|
||||
const goodsName = props.goodsName || '商品推荐'
|
||||
const goodsDesc = resolveGoodsDesc()
|
||||
const priceText =
|
||||
props.price !== null && props.price !== undefined ? unitPrice(props.price, '¥') : ''
|
||||
|
||||
await dpInst.draw((ctx: any) => {
|
||||
ctx.clearRect(st2(0), st2(0), st2(POSTER_WIDTH), st2(POSTER_HEIGHT))
|
||||
ctx.fillStyle = '#ffffff'
|
||||
ctx.fillRoundRect(st2(0), st2(0), st2(POSTER_WIDTH), st2(POSTER_HEIGHT), st2(20))
|
||||
ctx.clip()
|
||||
})
|
||||
|
||||
await dpInst.draw(async (ctx: any) => {
|
||||
ctx.fillStyle = '#f7f7f7'
|
||||
ctx.fillRect(st2(0), st2(0), st2(POSTER_WIDTH), st2(IMAGE_HEIGHT))
|
||||
const { width: imgW, height: imgH } = await getImageInfo(productImg)
|
||||
const fit = calcContainBox(imgW, imgH, 0, 0, POSTER_WIDTH, IMAGE_HEIGHT)
|
||||
await ctx.drawImage(
|
||||
productImg,
|
||||
st2(fit.x),
|
||||
st2(fit.y),
|
||||
st2(fit.width),
|
||||
st2(fit.height)
|
||||
)
|
||||
})
|
||||
|
||||
await dpInst.draw(async (ctx: any) => {
|
||||
ctx.fillStyle = '#ffffff'
|
||||
ctx.fillRect(st2(0), st2(IMAGE_HEIGHT), st2(POSTER_WIDTH), st2(POSTER_HEIGHT - IMAGE_HEIGHT))
|
||||
|
||||
const qrX = POSTER_WIDTH - QR_SIZE - QR_MARGIN_RIGHT
|
||||
const qrY = POSTER_HEIGHT - QR_SIZE - QR_MARGIN_BOTTOM
|
||||
ctx.save()
|
||||
ctx.beginPath()
|
||||
ctx.arc(
|
||||
st2(qrX + QR_SIZE / 2),
|
||||
st2(qrY + QR_SIZE / 2),
|
||||
st2(QR_SIZE / 2),
|
||||
0,
|
||||
Math.PI * 2
|
||||
)
|
||||
ctx.clip()
|
||||
await ctx.drawImage(qrCode, st2(qrX), st2(qrY), st2(QR_SIZE), st2(QR_SIZE))
|
||||
ctx.restore()
|
||||
})
|
||||
|
||||
await dpInst.draw((ctx: any) => {
|
||||
const textLeft = 24
|
||||
const textMaxWidth = POSTER_WIDTH - QR_SIZE - QR_MARGIN_RIGHT - textLeft - 20
|
||||
const bottomTop = IMAGE_HEIGHT
|
||||
const bottomBottom = POSTER_HEIGHT - 16
|
||||
const qrY = POSTER_HEIGHT - QR_SIZE - QR_MARGIN_BOTTOM
|
||||
|
||||
const nameLineHeight = 36
|
||||
const descLineHeight = 28
|
||||
const priceLineHeight = 36
|
||||
const textGap = 16
|
||||
const nameLineCount = Math.min(2, Math.max(1, Math.ceil(goodsName.length / 16)))
|
||||
const descLineCount = goodsDesc ? Math.min(2, Math.max(1, Math.ceil(goodsDesc.length / 14))) : 0
|
||||
|
||||
let textBlockHeight = nameLineCount * nameLineHeight
|
||||
if (goodsDesc) {
|
||||
textBlockHeight += textGap + descLineCount * descLineHeight
|
||||
}
|
||||
if (priceText) {
|
||||
textBlockHeight += textGap + priceLineHeight
|
||||
}
|
||||
|
||||
const maxTextHeight = bottomBottom - bottomTop - 12
|
||||
if (textBlockHeight > maxTextHeight) {
|
||||
textBlockHeight = maxTextHeight
|
||||
}
|
||||
|
||||
let textY = qrY + (QR_SIZE - textBlockHeight) / 2
|
||||
textY = Math.max(bottomTop + 12, textY)
|
||||
if (textY + textBlockHeight > bottomBottom) {
|
||||
textY = bottomBottom - textBlockHeight
|
||||
}
|
||||
|
||||
ctx.textAlign = 'left'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.fillStyle = '#333333'
|
||||
ctx.font = `${st2(28)}px PingFang SC`
|
||||
ctx.fillWarpText({
|
||||
text: goodsName,
|
||||
maxWidth: st2(textMaxWidth),
|
||||
x: st2(textLeft),
|
||||
y: st2(textY),
|
||||
layer: 2,
|
||||
lineHeight: st2(nameLineHeight),
|
||||
})
|
||||
textY += nameLineCount * nameLineHeight
|
||||
if (goodsDesc) {
|
||||
textY += textGap
|
||||
ctx.fillStyle = '#999999'
|
||||
ctx.font = `${st2(22)}px PingFang SC`
|
||||
ctx.fillWarpText({
|
||||
text: goodsDesc,
|
||||
maxWidth: st2(textMaxWidth),
|
||||
x: st2(textLeft),
|
||||
y: st2(textY),
|
||||
layer: 2,
|
||||
lineHeight: st2(descLineHeight),
|
||||
})
|
||||
textY += descLineCount * descLineHeight
|
||||
}
|
||||
|
||||
if (priceText) {
|
||||
textY += textGap
|
||||
const priceY = Math.min(textY, bottomBottom - priceLineHeight)
|
||||
ctx.fillStyle = '#ff3c2a'
|
||||
ctx.font = `bold ${st2(36)}px PingFang SC`
|
||||
ctx.fillText(priceText, st2(textLeft), st2(priceY))
|
||||
}
|
||||
})
|
||||
|
||||
const path = await dpInst.createImagePath()
|
||||
if (!path || path === '---stop createImagePath---') {
|
||||
throw new Error('海报图片导出失败')
|
||||
}
|
||||
return path
|
||||
}
|
||||
|
||||
function resolveGoodsDesc() {
|
||||
const desc = (props.goodsDesc || '').trim()
|
||||
const name = (props.goodsName || '').trim()
|
||||
if (!desc || desc === name) return ''
|
||||
return desc.length > 28 ? `${desc.slice(0, 28)}...` : desc
|
||||
}
|
||||
|
||||
function saveCurrentPoster() {
|
||||
const filePath = posterList.value[current.value]
|
||||
if (!filePath) return
|
||||
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath,
|
||||
success: () => {
|
||||
uni.showToast({ title: '已保存到相册', icon: 'none' })
|
||||
},
|
||||
fail: (err: any) => {
|
||||
const errMsg = err?.errMsg || ''
|
||||
if (errMsg.includes('auth deny') || errMsg.includes('authorize')) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '需要您授权保存图片到相册',
|
||||
confirmText: '去设置',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
uni.openSetting({})
|
||||
}
|
||||
},
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showToast({ title: '保存失败', icon: 'none' })
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.poster-panel {
|
||||
padding: 8rpx 0 48rpx;
|
||||
}
|
||||
|
||||
.poster-hint {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #b3b3b3;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.poster-content {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.loading-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 80rpx 48rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.retry-btn,
|
||||
.save-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 64rpx;
|
||||
padding: 0 40rpx;
|
||||
border-radius: 32rpx;
|
||||
background: linear-gradient(90deg, #ff9f3f, #ff6b35);
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.poster-swiper {
|
||||
height: 1000rpx;
|
||||
}
|
||||
|
||||
.poster-card-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.poster-image {
|
||||
width: 100%;
|
||||
max-width: 620rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.poster-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background: #e0e0e0;
|
||||
|
||||
&.active {
|
||||
width: 24rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #ff8f3f;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.canvas-hide {
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: 0;
|
||||
width: 600px;
|
||||
height: 840px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
@@ -13,71 +13,62 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/config";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
config, // 设置工具类
|
||||
weChat: false, // 是否微信浏览器,该项为true时不显示 当前整个页面
|
||||
logo: require("@/icon.png"), //显示的圆形logo
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef H5
|
||||
// 判断是否是微信浏览器
|
||||
var ua = navigator.userAgent.toLowerCase();
|
||||
var isWeixin = ua.indexOf("micromessenger") != -1;
|
||||
if (isWeixin) {
|
||||
this.weChat = true;
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import config from "@/config/config"
|
||||
import logoImg from "@/icon.png"
|
||||
|
||||
const weChat = ref(false)
|
||||
const logo = logoImg
|
||||
|
||||
onMounted(() => {
|
||||
// #ifdef H5
|
||||
// 判断是否是微信浏览器
|
||||
var ua = navigator.userAgent.toLowerCase();
|
||||
var isWeixin = ua.indexOf("micromessenger") != -1;
|
||||
weChat.value = isWeixin ? true : false
|
||||
// #endif
|
||||
})
|
||||
|
||||
/**
|
||||
* 跳转到下载app页面
|
||||
*/
|
||||
const downloadApp = () => {
|
||||
setTimeout(function () {
|
||||
window.location.href = config.downloadLink;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开app 仅在h5生效 使用ifream唤醒app
|
||||
*/
|
||||
const openApp = () => {
|
||||
let src: string = ''
|
||||
if (location.href) {
|
||||
src = location.href.split("/pages")[1];
|
||||
}
|
||||
let t = `${config.schemeLink}pages${src}`
|
||||
|
||||
try {
|
||||
var e = navigator.userAgent.toLowerCase(),
|
||||
n = e.match(/cpu iphone os (.*?) like mac os/);
|
||||
if (
|
||||
((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)
|
||||
) {
|
||||
window.location.href = t
|
||||
|
||||
downloadApp()
|
||||
} else {
|
||||
this.weChat = false;
|
||||
var r = document.createElement("iframe");
|
||||
(r.src = t), (r.style.display = "none"), document.body.appendChild(r)
|
||||
|
||||
downloadApp()
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 跳转到下载app页面
|
||||
*/
|
||||
downloadApp() {
|
||||
setTimeout(function () {
|
||||
window.location.href = config.downloadLink;
|
||||
}, 2000);
|
||||
},
|
||||
|
||||
/**
|
||||
* 打开app 仅在h5生效 使用ifream唤醒app
|
||||
*/
|
||||
openApp() {
|
||||
let src;
|
||||
if (location.href) {
|
||||
src = location.href.split("/pages")[1];
|
||||
}
|
||||
let t = `${config.schemeLink}pages${src}`;
|
||||
|
||||
try {
|
||||
var e = navigator.userAgent.toLowerCase(),
|
||||
n = e.match(/cpu iphone os (.*?) like mac os/);
|
||||
if (
|
||||
((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)
|
||||
) {
|
||||
window.location.href = t;
|
||||
|
||||
this.downloadApp();
|
||||
} else {
|
||||
var r = document.createElement("iframe");
|
||||
(r.src = t), (r.style.display = "none"), document.body.appendChild(r);
|
||||
|
||||
this.downloadApp();
|
||||
}
|
||||
} catch (e) {
|
||||
window.location.href = t;
|
||||
this.downloadApp();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
} catch (e) {
|
||||
window.location.href = t
|
||||
downloadApp()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
3
components/m-buy/README.md
Normal file
3
components/m-buy/README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
## 购买组件
|
||||
1.本组件是砍价,积分购买,参团等复用组
|
||||
2.后续会将此组件和商品购买组件合并,文档后续再出
|
||||
572
components/m-buy/goods.vue
Normal file
572
components/m-buy/goods.vue
Normal file
@@ -0,0 +1,572 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<u-popup class="popup" :show="buyMask" :height="setup.height" closeable :mode="setup.mode" :border-radius="setup.radius" @close="closeMask()">
|
||||
<!-- 商品 -->
|
||||
<view class="goods-box bottom">
|
||||
<view class="goods-header">
|
||||
<view class="goods-img">
|
||||
<u-image width="200rpx" border-radius="20" class="uimage" height="200rpx" :src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"></u-image>
|
||||
</view>
|
||||
<view class="goods-skus">
|
||||
<!-- 有活动商品价格 -->
|
||||
<view class="goods-price" v-if="goodsDetail.promotionPrice && ((isGroup && buyType === 'PINTUAN') || !isGroup)">
|
||||
<span v-if="goodsDetail.promotionPrice && !pointDetail">
|
||||
¥
|
||||
<span class="goods-price-promotionShow goods-price-bigshow">{{ goodsFormatPrice(goodsDetail.promotionPrice)[0] }}</span>
|
||||
.{{ goodsFormatPrice(goodsDetail.promotionPrice)[1] }}
|
||||
</span>
|
||||
<span v-if="pointDetail.points">
|
||||
<span class="goods-price-promotionShow goods-price-bigshow">{{ pointDetail.points }}</span>
|
||||
积分
|
||||
</span>
|
||||
<div class="promotion-box">
|
||||
¥
|
||||
<span class="goods-price-bigshow">{{ goodsFormatPrice(goodsDetail.price)[0] }}</span>
|
||||
.{{ goodsFormatPrice(goodsDetail.price)[1] }}
|
||||
</div>
|
||||
</view>
|
||||
<!-- 正常商品的价格 -->
|
||||
<view v-else>
|
||||
<div class="goods-price">
|
||||
<span>
|
||||
¥
|
||||
<span class="goods-price-bigshow">{{ goodsFormatPrice(goodsDetail.price)[0] }}</span>
|
||||
.{{ goodsFormatPrice(goodsDetail.price)[1] }}
|
||||
</span>
|
||||
</div>
|
||||
</view>
|
||||
<view class="goods-check-skus">
|
||||
已选
|
||||
<span class="goods-check-skus-name">
|
||||
{{ selectName }}
|
||||
<span>,{{ num }}个</span>
|
||||
</span>
|
||||
</view>
|
||||
<view class="goods-check-skus" v-if="isAppointmentGoods(goodsDetail?.goodsType)">
|
||||
可预约
|
||||
<span class="goods-check-skus-name">按时段选择</span>
|
||||
</view>
|
||||
<view class="goods-check-skus" v-else>
|
||||
库存
|
||||
<span class="goods-check-skus-name">
|
||||
<span>{{ availableStock }}</span>
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品信息 -->
|
||||
<scroll-view class="goods-skus-box" :scroll-y="true">
|
||||
<!-- 规格 -->
|
||||
<view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
|
||||
<view class="skus-view-list">
|
||||
<view class="view-class-title">{{ spec.name }}</view>
|
||||
|
||||
<!-- 正常逻辑 循环出sku -->
|
||||
<view
|
||||
v-if="!parentOrder"
|
||||
:class="{ active: spec_val.value == currentSelected[specIndex] }"
|
||||
class="skus-view-item"
|
||||
v-for="(spec_val, spec_index) in spec.values"
|
||||
:key="spec_index"
|
||||
@click="handleClickSpec(spec, specIndex, spec_val)"
|
||||
>
|
||||
{{ spec_val.value }}
|
||||
</view>
|
||||
|
||||
<!-- 拼团购买,仅筛选出当前拼团类型商品 -->
|
||||
<template v-for="(spec_val, spec_index) in spec.values" :key="spec_index">
|
||||
<view
|
||||
v-if="parentOrder && spec_val.skuId == goodsDetail.id"
|
||||
:class="{ active: spec_val.value == currentSelected[specIndex] }"
|
||||
class="skus-view-item"
|
||||
@click="handleClickSpec(spec, specIndex, spec_val)"
|
||||
>
|
||||
{{ spec_val.value }}
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<div class="soldout" v-if="availableStock === 0">
|
||||
<u-alert type="warning" title="商品已售罄" :description="'当前商品库存为0'"></u-alert>
|
||||
</div>
|
||||
<!-- 数量 -->
|
||||
<view v-if="availableStock !== 0" class="goods-skus-number flex flex-a-c flex-j-sb">
|
||||
<view class="view-class-title">数量</view>
|
||||
<uni-number-box class="uNumber" :min="1" :max="maxBuyNum" :disabled="availableStock === 0" v-model="num"></uni-number-box>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 按钮 -->
|
||||
<view class="btns" v-if="availableStock !== 0">
|
||||
<view class="box-btn card" v-if="showAddToCart" @click="addToCartOrBuy('cart')">加入购物车</view>
|
||||
<view class="box-btn buy" @click="addToCartOrBuy('buy')">
|
||||
{{ isAppointmentGoods(goodsDetail?.goodsType) ? '立即预约' : '立即购买' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import * as API_trade from '@/api/trade.js'
|
||||
import setup from './popup.js'
|
||||
import uniNumberBox from '@/components/uni-number-box.vue'
|
||||
import { goodsFormatPrice } from '@/utils/filters.js'
|
||||
import {
|
||||
isECoupon,
|
||||
isVirtualGoods,
|
||||
isAppointmentGoods,
|
||||
getECouponStock,
|
||||
getECouponMaxBuyNum,
|
||||
getAppointmentStock,
|
||||
getAppointmentMaxBuyNum,
|
||||
} from '@/utils/goodsType.js'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
buyMask?: boolean
|
||||
isGroup?: boolean
|
||||
goodsDetail?: any
|
||||
selectedSku?: any | null
|
||||
goodsSpec?: any | null
|
||||
addr?: any | null
|
||||
pointDetail?: any | null
|
||||
}>(), {
|
||||
buyMask: false,
|
||||
isGroup: false,
|
||||
goodsDetail: () => ({}),
|
||||
selectedSku: '',
|
||||
goodsSpec: '',
|
||||
addr: '',
|
||||
pointDetail: ''
|
||||
})
|
||||
|
||||
const emit = defineEmits(['closeBuy', 'changed', 'handleClickSku', 'queryCart'])
|
||||
|
||||
const num = ref(1)
|
||||
|
||||
const selectName = ref('')
|
||||
const selectSkuList = ref<any>('')
|
||||
const selectedSpecImg = ref('')
|
||||
const buyType = ref('')
|
||||
const parentOrder = ref<any>('')
|
||||
const formatList = ref<any[]>([])
|
||||
const currentSelected = ref<string[]>([])
|
||||
const skuList = ref('')
|
||||
|
||||
// E_COUPON 读 SKU quantity;预约商品 quantity 固定 0,库存走时段
|
||||
const availableStock = computed(() => {
|
||||
if (isECoupon(props.goodsDetail?.goodsType)) {
|
||||
return getECouponStock(props.goodsDetail)
|
||||
}
|
||||
if (isAppointmentGoods(props.goodsDetail?.goodsType)) {
|
||||
return getAppointmentStock(props.goodsDetail)
|
||||
}
|
||||
return Number(props.goodsDetail?.quantity) || 0
|
||||
})
|
||||
|
||||
const maxBuyNum = computed(() => {
|
||||
if (isECoupon(props.goodsDetail?.goodsType)) {
|
||||
return getECouponMaxBuyNum(props.goodsDetail)
|
||||
}
|
||||
if (isAppointmentGoods(props.goodsDetail?.goodsType)) {
|
||||
return getAppointmentMaxBuyNum(props.goodsDetail)
|
||||
}
|
||||
return 999
|
||||
})
|
||||
|
||||
// 电子卡券/预约商品禁止加购
|
||||
const showAddToCart = computed(() => {
|
||||
return (
|
||||
buyType.value != 'PINTUAN' &&
|
||||
!isVirtualGoods(props.goodsDetail?.goodsType) &&
|
||||
!isECoupon(props.goodsDetail?.goodsType) &&
|
||||
!isAppointmentGoods(props.goodsDetail?.goodsType)
|
||||
)
|
||||
})
|
||||
|
||||
watch(num, (val) => {
|
||||
val == 0 ? num.value = 1 : ''
|
||||
if (val && val > maxBuyNum.value) {
|
||||
num.value = maxBuyNum.value
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => props.isGroup, (val) => {
|
||||
if (val) {
|
||||
buyType.value = 'PINTUAN'
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
watch(selectSkuList, (_val) => {
|
||||
emit('changed', selectSkuList.value)
|
||||
}, { deep: true })
|
||||
|
||||
watch(
|
||||
() => availableStock.value,
|
||||
(val) => {
|
||||
if (val == 0) {
|
||||
uni.showToast({
|
||||
title: '商品已售罄',
|
||||
duration: 2000,
|
||||
icon: 'none',
|
||||
})
|
||||
num.value = 1
|
||||
} else if (num.value > maxBuyNum.value) {
|
||||
num.value = maxBuyNum.value
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
|
||||
const closeMask = () => {
|
||||
emit('closeBuy', false)
|
||||
}
|
||||
|
||||
/**点击规格 */
|
||||
const handleClickSpec = (val: any, index: number, specValue: any) => {
|
||||
currentSelected.value[index] = specValue.value
|
||||
let selectedSkuId = props.goodsSpec.find((i: any) => {
|
||||
let matched = true
|
||||
let specValues = i.specValues.filter((j: any) => j.specName !== 'images')
|
||||
for (let n = 0; n < specValues.length; n++) {
|
||||
if (specValues[n].specValue !== currentSelected.value[n]) {
|
||||
matched = false
|
||||
return
|
||||
}
|
||||
}
|
||||
if (matched) {
|
||||
return i
|
||||
}
|
||||
})
|
||||
if (selectedSkuId?.skuId) {
|
||||
currentSelected.value[index] = specValue.value
|
||||
selectSkuList.value = {
|
||||
spec: {
|
||||
specName: val.name,
|
||||
specValue: specValue.value
|
||||
},
|
||||
data: props.goodsDetail
|
||||
}
|
||||
selectName.value = specValue.value
|
||||
|
||||
emit('handleClickSku', {
|
||||
skuId: selectedSkuId.skuId,
|
||||
goodsId: props.goodsDetail.goodsId
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '暂无该商品!',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 活动页/父组件直接调用购买(POINTS / KANJIA 等显式 cartType)
|
||||
*/
|
||||
const buy = (data: any) => {
|
||||
uni.hideLoading()
|
||||
API_trade.addToCart(data).then((res) => {
|
||||
if (res.data.success) {
|
||||
const way = data.cartType || 'BUY_NOW'
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/fillorder?way=${way}&addr=${''}&parentOrder=${encodeURIComponent(JSON.stringify(parentOrder.value || ''))}`,
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message || '购买失败',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/** 解析 cartType:拼团 PINTUAN;核销 VIRTUAL;其余含 E_COUPON 为 BUY_NOW */
|
||||
function resolveCartType() {
|
||||
if (buyType.value === 'PINTUAN') {
|
||||
return 'PINTUAN'
|
||||
}
|
||||
if (isVirtualGoods(props.goodsDetail?.goodsType)) {
|
||||
return 'VIRTUAL'
|
||||
}
|
||||
return 'BUY_NOW'
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加到购物车或购买
|
||||
*/
|
||||
const addToCartOrBuy = (val: string) => {
|
||||
if (!selectSkuList.value) {
|
||||
uni.showToast({
|
||||
title: '请选择规格商品',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
const data: Record<string, any> = {
|
||||
skuId: props.goodsDetail.id,
|
||||
num: num.value,
|
||||
}
|
||||
|
||||
if (val == 'cart') {
|
||||
API_trade.addToCart(data).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({
|
||||
title: '商品已添加到购物车',
|
||||
icon: 'none',
|
||||
})
|
||||
emit('queryCart')
|
||||
closeMask()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message || '加购失败',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (isAppointmentGoods(props.goodsDetail?.goodsType)) {
|
||||
const goodsId = props.goodsDetail.goodsId || ''
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/appointment/appointmentCheckout?skuId=${props.goodsDetail.id}&goodsId=${goodsId}&num=${num.value}`,
|
||||
})
|
||||
closeMask()
|
||||
return
|
||||
}
|
||||
data.cartType = resolveCartType()
|
||||
API_trade.addToCart(data).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/fillorder?way=${data.cartType}&addr=${props.addr?.id || ''}&parentOrder=${encodeURIComponent(JSON.stringify(parentOrder.value || ''))}`,
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message || '购买失败',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const formatSku = (list: any[]) => {
|
||||
// 格式化数据
|
||||
let arr: any[] = [{}]
|
||||
|
||||
if (!Array.isArray(list)) {
|
||||
return false
|
||||
}
|
||||
list.forEach((_item, _index) => {
|
||||
let item = list[_index]
|
||||
item.specValues.forEach((spec: any, specIndex: number) => {
|
||||
let name = spec.specName
|
||||
let values = {
|
||||
value: spec.specValue,
|
||||
quantity: item.quantity,
|
||||
skuId: item.skuId
|
||||
}
|
||||
if (name === 'images') {
|
||||
return
|
||||
}
|
||||
|
||||
arr.forEach((arrItem, arrIndex) => {
|
||||
if (
|
||||
arrItem.name == name &&
|
||||
arrItem.values &&
|
||||
!arrItem.values.find((i: any) => {
|
||||
return i.value === values.value
|
||||
})
|
||||
) {
|
||||
arrItem.values.push(values)
|
||||
}
|
||||
|
||||
let keys = arr.map(key => {
|
||||
return key.name
|
||||
})
|
||||
if (!keys.includes(name)) {
|
||||
arr.push({
|
||||
name: name,
|
||||
values: [values]
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
arr.shift()
|
||||
formatList.value = arr
|
||||
|
||||
list.forEach(item => {
|
||||
// 默认选中
|
||||
if (item.skuId === props.goodsDetail.id) {
|
||||
item.specValues
|
||||
.filter(i => i.specName !== 'images')
|
||||
.forEach((value, _index) => {
|
||||
currentSelected.value[_index] = value.specValue
|
||||
|
||||
selectName.value = value.specValue
|
||||
|
||||
selectSkuList.value = {
|
||||
spec: value,
|
||||
data: props.goodsDetail
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
skuList.value = list
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
formatSku(props.goodsSpec)
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
buy,
|
||||
buyType,
|
||||
parentOrder,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './popup.scss';
|
||||
|
||||
.price-row {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buy {
|
||||
background-image: linear-gradient(135deg, $main-color, $light-color);
|
||||
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-image: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
|
||||
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
|
||||
}
|
||||
|
||||
::v-deep .u-icon-plus,
|
||||
::v-deep .u-icon-minus,
|
||||
::v-deep .u-icon-disabled {
|
||||
height: 30rpx !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.goods-skus-number {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
|
||||
> .view-class-title {
|
||||
flex: 8;
|
||||
}
|
||||
|
||||
> .view-class-input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .uni-scroll-view {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: $price-light-color !important;
|
||||
border: 2rpx solid $price-color;
|
||||
font-weight: bold;
|
||||
color: $price-color !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-skus-box {
|
||||
overflow-y: auto;
|
||||
height: 610rpx;
|
||||
// #ifdef MP-WEIXIN
|
||||
height: 570rpx;
|
||||
// #endif
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.soldout{
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.goods-skus-view {
|
||||
overflow: hidden;
|
||||
|
||||
.skus-view-list {
|
||||
> .skus-view-item {
|
||||
flex: 1;
|
||||
padding: 0 36rpx;
|
||||
|
||||
overflow: hidden;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-left: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 22rpx;
|
||||
color: #262626;
|
||||
background: #f2f2f2;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.goods-header {
|
||||
height: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
padding: 50rpx 36rpx 0 36rpx;
|
||||
}
|
||||
|
||||
.goods-skus {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
color: $price-color;
|
||||
line-height: 80rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.promotion-box {
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.goods-price-bigshow {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.promotion {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.goods-price-promotionShow {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.goods-check-skus {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
|
||||
> .goods-check-skus-name {
|
||||
margin-left: 4rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -14,7 +14,7 @@
|
||||
line-height: 80rpx;
|
||||
height: 80rpx;
|
||||
|
||||
background: $jd-color;
|
||||
background: $price-color;
|
||||
color: #fff;
|
||||
border-radius: 200px;
|
||||
text-align: center;
|
||||
@@ -1 +0,0 @@
|
||||
### 说明 https://ext.dcloud.net.cn/plugin?id=3237
|
||||
@@ -1,211 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div class="index">
|
||||
<u-modal v-model="show" :show-title="false" :show-confirm-button="false" mask-close-able>
|
||||
<view class="slot-content">
|
||||
<image @click="downLoad()" class="img" :src="imgUrl" />
|
||||
<div class="canvas-hide">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<canvas id="canvas" type="2d" style="width: 600px; height: 960px" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<canvas canvas-id="canvas" id="canvas" style="width: 600px; height: 960px" />
|
||||
<!-- #endif -->
|
||||
</div>
|
||||
</view>
|
||||
</u-modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入绘制插件
|
||||
import DrawPoster from "@/js_sdk/u-draw-poster";
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
imgUrl: "", //绘制出来的图片路径
|
||||
show: false, //是否展示模态框
|
||||
dp: {}, //绘制的dp对象,用于存储绘制等一些方法。
|
||||
logo: require("@/pages/passport/static/logo-title.png"), //本地logo地址
|
||||
}),
|
||||
|
||||
props: {
|
||||
/**
|
||||
* 父级传参的数据
|
||||
*/
|
||||
res: {
|
||||
type: null,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
onUnload() {},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 解决微信小程序中图片模糊问题
|
||||
*/
|
||||
// #ifdef MP-WEIXIN
|
||||
st2: (size) => size * 2,
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
st2: (size) => size,
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* 保存图片
|
||||
*/
|
||||
downLoad() {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: this.imgUrl,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: "保存成功!",
|
||||
icon: "none",
|
||||
});
|
||||
},
|
||||
fail: function () {
|
||||
uni.showToast({
|
||||
title: "保存失败,请稍后重试!",
|
||||
icon: "none",
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 创建canvas
|
||||
*/
|
||||
async init() {
|
||||
this.show = true;
|
||||
this.dp = await DrawPoster.build({
|
||||
selector: "canvas",
|
||||
componentThis: this,
|
||||
loading: true,
|
||||
debugging: true,
|
||||
});
|
||||
let dp = this.dp;
|
||||
// #ifdef MP-WEIXIN
|
||||
// 用于微信小程序中画布错乱问题
|
||||
dp.canvas.width = this.st2(600);
|
||||
dp.canvas.height = this.st2(960);
|
||||
// #endif
|
||||
this.draw(dp);
|
||||
},
|
||||
|
||||
async draw(dp) {
|
||||
const { width, height, background, title } = this.res.container;
|
||||
const { code, img, price } = this.res.bottom;
|
||||
|
||||
// /** 绘制背景 */
|
||||
await dp.draw((ctx) => {
|
||||
ctx.fillStyle = background;
|
||||
ctx.fillRoundRect(
|
||||
this.st2(0),
|
||||
this.st2(0),
|
||||
this.st2(width),
|
||||
this.st2(height),
|
||||
this.st2(12)
|
||||
);
|
||||
ctx.clip();
|
||||
});
|
||||
/** 绘制图片 */
|
||||
dp.draw(async (ctx) => {
|
||||
await Promise.all([
|
||||
// 绘制Logo
|
||||
ctx.drawImage(
|
||||
this.logo,
|
||||
this.st2(175),
|
||||
this.st2(0),
|
||||
this.st2(256),
|
||||
this.st2(144)
|
||||
),
|
||||
// 中间图片
|
||||
ctx.drawImage(
|
||||
img,
|
||||
this.st2(100),
|
||||
this.st2(150),
|
||||
this.st2(400),
|
||||
this.st2(400)
|
||||
),
|
||||
// 二维码
|
||||
ctx.drawImage(
|
||||
code,
|
||||
this.st2(39),
|
||||
this.st2(750),
|
||||
this.st2(150),
|
||||
this.st2(150)
|
||||
),
|
||||
]);
|
||||
});
|
||||
|
||||
/** 绘制中间文字*/
|
||||
await dp.draw((ctx) => {
|
||||
ctx.fillStyle = "#333";
|
||||
ctx.font = `bold ${this.st2(24)}px PingFang SC`;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillWarpText({
|
||||
text: title,
|
||||
maxWidth: this.st2(500),
|
||||
x: this.st2(300),
|
||||
y: this.st2(600),
|
||||
layer: 1,
|
||||
});
|
||||
|
||||
ctx.fillStyle = "#ff3c2a";
|
||||
ctx.font = `${this.st2(38)}px PingFang SC`;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(price, this.st2(300), this.st2(680));
|
||||
});
|
||||
|
||||
// /** 绘制底部文字 */
|
||||
await dp.draw((ctx) => {
|
||||
ctx.fillStyle = "#666";
|
||||
ctx.font = `${this.st2(24)}px PingFang SC`;
|
||||
ctx.fillText("长按图片,识别二维码", this.st2(200), this.st2(866));
|
||||
ctx.fillStyle = "#666";
|
||||
ctx.font = `${this.st2(24)}px PingFang SC`;
|
||||
ctx.fillText("查看商品详情", this.st2(200), this.st2(900));
|
||||
});
|
||||
|
||||
this.imgUrl = await dp.createImagePath();
|
||||
|
||||
// console.log(posterImgUrl)
|
||||
},
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page,
|
||||
.index {
|
||||
height: 100%;
|
||||
}
|
||||
.canvas-hide {
|
||||
/* 1 */
|
||||
position: fixed;
|
||||
right: 100vw;
|
||||
bottom: 100vh;
|
||||
/* 2 */
|
||||
z-index: -9999;
|
||||
/* 3 */
|
||||
opacity: 0;
|
||||
}
|
||||
.index {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
background: rgba($color: grey, $alpha: 0.2);
|
||||
}
|
||||
|
||||
image {
|
||||
display: block;
|
||||
}
|
||||
.img {
|
||||
width: 600rpx;
|
||||
height: 960rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -79,180 +79,182 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { ref, getCurrentInstance } from 'vue'
|
||||
import { getRegionsById } from "@/api/common.js"
|
||||
|
||||
const instance = getCurrentInstance()
|
||||
|
||||
let windowWidth = 0
|
||||
import { getRegionsById } from "@/api/common.js";
|
||||
export default {
|
||||
name: "UniCityNvue",
|
||||
props: {
|
||||
headTitle: {
|
||||
//标题
|
||||
type: String,
|
||||
default: "区域选择",
|
||||
},
|
||||
pickerSize: {
|
||||
// 使用多少个tab
|
||||
type: [String, String],
|
||||
default: "1",
|
||||
},
|
||||
provinceData: {
|
||||
// 默认的省市区id,如果不使用id的情况下则为[];
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
headTitle?: string
|
||||
pickerSize?: string | string[]
|
||||
provinceData?: any[]
|
||||
}>(), {
|
||||
headTitle: "区域选择",
|
||||
pickerSize: "1",
|
||||
provinceData: () => [],
|
||||
})
|
||||
|
||||
const emit = defineEmits(['funcValue'])
|
||||
|
||||
const clearRightIcon = ref(true)
|
||||
const scrollLeft = ref(500)
|
||||
const scrollTop = ref(0)
|
||||
const enableScroll = ref(true)
|
||||
const tabCurrentIndex = ref(0)
|
||||
const tabbars = ref<any[]>(props.provinceData)
|
||||
const pickersize = ref(props.pickerSize)
|
||||
const showPicker = ref(false)
|
||||
|
||||
/**
|
||||
* 显示选择器
|
||||
*/
|
||||
const show = () => {
|
||||
showPicker.value = true
|
||||
if (tabbars.value[0].children.length == 0) {
|
||||
getRegionsById(0).then((res: any) => {
|
||||
tabbars.value[0].children = res.data.result
|
||||
})
|
||||
}
|
||||
|
||||
windowWidth = uni.getSystemInfoSync().windowWidth
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭选择器
|
||||
*/
|
||||
const hide = () => {
|
||||
showPicker.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* tab切换
|
||||
*/
|
||||
const changeTab = (e: number) => {
|
||||
let index = e
|
||||
setScroll(index)
|
||||
//延迟300ms,等待swiper动画结束再修改tabbar
|
||||
tabCurrentIndex.value = index
|
||||
setTimeout(() => {
|
||||
getScroll("show" + index)
|
||||
}, 10)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获得元素的大小
|
||||
*/
|
||||
const getElSize = (id: string): Promise<any> => {
|
||||
return new Promise((res) => {
|
||||
let el = uni
|
||||
.createSelectorQuery()
|
||||
.in(instance!.proxy)
|
||||
.select("#" + id)
|
||||
el.fields(
|
||||
{
|
||||
size: true,
|
||||
scrollOffset: true,
|
||||
rect: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
clearRightIcon: true, //是否显示右侧关闭icon
|
||||
scrollLeft: 500, //顶部选项卡左滑距离
|
||||
scrollTop: 0, //默认滚动顶部为0
|
||||
enableScroll: true, //是否启用滚动
|
||||
tabCurrentIndex: 0, //当前选项卡索引
|
||||
tabbars: this.provinceData, //默认的省市区id
|
||||
pickersize: this.pickerSize, //多少个tab 推荐为4级
|
||||
showPicker: false, //显示选取器
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 显示选择器
|
||||
*/
|
||||
show() {
|
||||
this.showPicker = true;
|
||||
if (this.tabbars[0].children.length == 0) {
|
||||
getRegionsById(0).then((res) => {
|
||||
this.tabbars[0].children = res.data.result;
|
||||
});
|
||||
(data: any) => {
|
||||
res(data)
|
||||
}
|
||||
).exec()
|
||||
})
|
||||
}
|
||||
|
||||
windowWidth = uni.getSystemInfoSync().windowWidth;
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭选择器
|
||||
*/
|
||||
hide() {
|
||||
this.showPicker = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* tab切换
|
||||
*/
|
||||
changeTab(e) {
|
||||
let index = e;
|
||||
this.setScroll(index);
|
||||
//延迟300ms,等待swiper动画结束再修改tabbar
|
||||
this.tabCurrentIndex = index;
|
||||
setTimeout(() => {
|
||||
this.getScroll("show" + index);
|
||||
}, 10);
|
||||
},
|
||||
|
||||
/**
|
||||
* 获得元素的大小
|
||||
*/
|
||||
getElSize(id) {
|
||||
return new Promise((res, rej) => {
|
||||
let el = uni
|
||||
.createSelectorQuery()
|
||||
.in(this)
|
||||
.select("#" + id);
|
||||
el.fields(
|
||||
{
|
||||
size: true,
|
||||
scrollOffset: true,
|
||||
rect: true,
|
||||
},
|
||||
(data) => {
|
||||
res(data);
|
||||
}
|
||||
).exec();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击城市后回调
|
||||
*/
|
||||
async changCity(index, item) {
|
||||
if (this.tabbars[index].id != item.id) {
|
||||
this.tabbars[index].localName = item.name;
|
||||
this.tabbars[index].id = item.id;
|
||||
if (index < this.tabbars.length - 1) {
|
||||
this.tabbars.splice(index + 1, this.tabbars.length - index - 1);
|
||||
}
|
||||
if (this.tabbars.length < this.pickersize) {
|
||||
let data = await getRegionsById(item.id);
|
||||
// 当前选项级为最后一级时回调,将选中的数据返回
|
||||
if (data.data.result.length == 0) {
|
||||
this.$emit("funcValue", this.tabbars);
|
||||
this.hide();
|
||||
} else {
|
||||
// 将新的数据填充进下一级
|
||||
var current = {
|
||||
localName: "请选择",
|
||||
id: "",
|
||||
children: data.data.result,
|
||||
};
|
||||
this.tabbars.push(current);
|
||||
this.tabCurrentIndex++;
|
||||
|
||||
// 当前距离重新为最上面
|
||||
this.scrollTop = 0;
|
||||
}
|
||||
/**
|
||||
* 点击城市后回调
|
||||
*/
|
||||
const changCity = async (index: number, item: any) => {
|
||||
if (tabbars.value[index].id != item.id) {
|
||||
tabbars.value[index].localName = item.name
|
||||
tabbars.value[index].id = item.id
|
||||
tabbars.value[index].center = item.center
|
||||
if (index < tabbars.value.length - 1) {
|
||||
tabbars.value.splice(index + 1, tabbars.value.length - index - 1)
|
||||
}
|
||||
if (tabbars.value.length < pickersize.value as number) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
try {
|
||||
let data = await getRegionsById(item.id)
|
||||
uni.hideLoading()
|
||||
// 当前选项级为最后一级时回调,将选中的数据返回
|
||||
if (data.data.result.length == 0) {
|
||||
emit("funcValue", tabbars.value)
|
||||
hide()
|
||||
} else {
|
||||
this.$emit("funcValue", this.tabbars);
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
},
|
||||
// 将新的数据填充进下一级
|
||||
var current = {
|
||||
localName: "请选择",
|
||||
id: "",
|
||||
children: data.data.result,
|
||||
}
|
||||
tabbars.value.push(current)
|
||||
tabCurrentIndex.value++
|
||||
|
||||
/**
|
||||
* 获取当前tab中滚动的距离
|
||||
*/
|
||||
async setScroll(index) {
|
||||
let width = 0;
|
||||
let nowWidth = 0;
|
||||
for (let i = 0; i <= index; i++) {
|
||||
let result = await this.getElSize("tab" + i);
|
||||
width += result.width;
|
||||
if (i === index) {
|
||||
nowWidth = result.width;
|
||||
// 当前距离重新为最上面
|
||||
scrollTop.value = 0
|
||||
}
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
}
|
||||
if (width + nowWidth > windowWidth) {
|
||||
this.scrollLeft = width + nowWidth;
|
||||
} else {
|
||||
this.scrollLeft = 0;
|
||||
}
|
||||
},
|
||||
} else {
|
||||
emit("funcValue", tabbars.value)
|
||||
hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算当前的滚动距离
|
||||
*/
|
||||
getScroll(id) {
|
||||
/**
|
||||
* 获取当前tab中滚动的距离
|
||||
*/
|
||||
const setScroll = async (index: number) => {
|
||||
let width = 0
|
||||
let nowWidth = 0
|
||||
for (let i = 0; i <= index; i++) {
|
||||
let result = await getElSize("tab" + i)
|
||||
width += result.width
|
||||
if (i === index) {
|
||||
nowWidth = result.width
|
||||
}
|
||||
}
|
||||
if (width + nowWidth > windowWidth) {
|
||||
scrollLeft.value = width + nowWidth
|
||||
} else {
|
||||
scrollLeft.value = 0
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算当前的滚动距离
|
||||
*/
|
||||
const getScroll = (id: string) => {
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.in(instance!.proxy)
|
||||
.select(".panel-scroll-box")
|
||||
.boundingClientRect((data: any) => {
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.in(this)
|
||||
.select(".panel-scroll-box")
|
||||
.boundingClientRect((data) => {
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.in(this)
|
||||
.select("#" + id)
|
||||
.boundingClientRect((res) => {
|
||||
if (res != undefined && res != null && res != "") {
|
||||
this.scrollTop = res.top - data.top;
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
.in(instance!.proxy)
|
||||
.select("#" + id)
|
||||
.boundingClientRect((res: any) => {
|
||||
if (res != undefined && res != null && res != "") {
|
||||
scrollTop.value = res.top - data.top
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
},
|
||||
};
|
||||
.exec()
|
||||
})
|
||||
.exec()
|
||||
}
|
||||
|
||||
// 暴露方法给父组件调用
|
||||
defineExpose({ show, hide })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -379,12 +381,10 @@ export default {
|
||||
flex-direction: column;
|
||||
/* #endif */
|
||||
margin-right: 5px;
|
||||
margin-left: 40rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.color {
|
||||
color: $light-color;
|
||||
}
|
||||
icon {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
18
components/m-goods-list/README.md
Normal file
18
components/m-goods-list/README.md
Normal file
@@ -0,0 +1,18 @@
|
||||
## 商品列表展示
|
||||
|
||||
### OBJECT 参数说明
|
||||
|
||||
| 属性 | 说明 | 类型 | 必填 |
|
||||
| ----------- | ---------------------------------------------------------- | ------- | ---- |
|
||||
| `res` | 显示数据 | Array | 是 |
|
||||
| `type` | 商品展示类型 oneColumns twoColumns ,默认展示一行两列商品 | String | 否 |
|
||||
| `storeName` | 是否展示店铺名称,默认展示 | Boolean | 否 |
|
||||
| `keywords` | 高亮展示搜索内容 | String | 否 |
|
||||
| `showFields` | 商品卡片字段开关(Object,null=现状渲染全量字段)。键:`subTitle` 副标题、`spec` 规格摘要(取 attrList 前 2 项)、`tags` 促销标签、`selfTag` 自营、`price` 价格、`linePrice` 划线价(仅 marketPrice>price 时显示)、`sales` 已售/评论、`cart` 购物车按钮。新增字段(副标题/规格/划线价/购物车)仅在 showFields 提供时才会渲染;目前仅 oneColumns 布局支持开关 | Object | 否 |
|
||||
|
||||
### EVENTS 事件说明
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ---- | -------- |
|
||||
| `addCart` | 点击购物车按钮(showFields.cart 开启时渲染) | 当前商品对象 |
|
||||
|
||||
259
components/m-goods-list/base-list.vue
Normal file
259
components/m-goods-list/base-list.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 一行两列商品展示 -->
|
||||
<view class="goods-list" v-if="type == 'twoColumns'">
|
||||
<view v-for="(item, index) in res" :key="index" class="goods-item">
|
||||
<view class="image-wrapper" @click="navigateToDetailPage(item)">
|
||||
<u-image
|
||||
:src="item.thumbnail"
|
||||
width="100%"
|
||||
height="330rpx"
|
||||
mode="aspectFit"
|
||||
>
|
||||
<template #loading><u-loading-icon></u-loading-icon></template>
|
||||
</u-image>
|
||||
</view>
|
||||
<view class="goods-detail">
|
||||
<div
|
||||
class="title clamp"
|
||||
v-html="lightSearchStr(keyword, item.goodsName)"
|
||||
@click="navigateToDetailPage(item)"
|
||||
></div>
|
||||
<view class="price-box" @click="navigateToDetailPage(item)">
|
||||
<div class="price" v-if="item.price != undefined">
|
||||
¥<span
|
||||
>{{
|
||||
goodsFormatPrice(item.price)[0]
|
||||
}} </span
|
||||
>.{{ goodsFormatPrice(item.price)[1] }}
|
||||
</div>
|
||||
</view>
|
||||
<div class="count-config" @click="navigateToDetailPage(item)">
|
||||
<span>已售 {{ item.buyCount || "0" }}</span>
|
||||
<span>{{ item.commentNum || "0" }}条评论</span>
|
||||
</div>
|
||||
<div
|
||||
class="store-seller-name"
|
||||
v-if="storeName"
|
||||
@click="navigateToStoreDetailPage(item)"
|
||||
>
|
||||
<div class="text-hidden">
|
||||
<u-tag
|
||||
style="margin-right: 10rpx"
|
||||
size="mini"
|
||||
mode="dark"
|
||||
v-if="item.selfOperated"
|
||||
text="自营"
|
||||
type="error"
|
||||
/>
|
||||
<span>{{ item.storeName || "暂无" }}</span>
|
||||
</div>
|
||||
<span>
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</span>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 一行一列商品展示 -->
|
||||
<div v-if="type == 'oneColumns'">
|
||||
div v-for="(item, index) in res" :key="index" class="goods-row">
|
||||
<div class="flex goods-col">
|
||||
<div class="goods-img" @click="navigateToDetailPage(item)">
|
||||
<u-image
|
||||
width="230rpx"
|
||||
border-radius="16"
|
||||
height="230rpx"
|
||||
mode="aspectFit"
|
||||
:src="item.goodsImage || item.thumbnail"
|
||||
>
|
||||
<template #loading><u-loading-icon></u-loading-icon></template>
|
||||
</u-image>
|
||||
</div>
|
||||
<div class="goods-detail">
|
||||
<div class="title clamp3" @click="navigateToDetailPage(item)">
|
||||
{{ item.goodsName }}
|
||||
</div>
|
||||
<view class="price-box" @click="navigateToDetailPage(item)">
|
||||
<div class="price" v-if="item.price != undefined">
|
||||
¥<span
|
||||
>{{ goodsFormatPrice(item.price)[0] }} </span
|
||||
>.{{ goodsFormatPrice(item.price)[1] }}
|
||||
</div>
|
||||
</view>
|
||||
<div class="promotion" @click="navigateToDetailPage(item)">
|
||||
<div
|
||||
v-for="(promotionItem, promotionIndex) in getPromotion(item)"
|
||||
:key="promotionIndex"
|
||||
>
|
||||
<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
|
||||
<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1"
|
||||
>满减</span
|
||||
>
|
||||
<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="overflow: hidden"
|
||||
@click="navigateToDetailPage(item)"
|
||||
class="count-config"
|
||||
>
|
||||
<span style="float: left; font-size: 22rpx"
|
||||
>已售 {{ item.buyCount || "0" }}</span
|
||||
>
|
||||
<span style="float: right; font-size: 22rpx"
|
||||
>{{ item.commentNum || "0" }}条评论</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGoodsListCommon } from './common'
|
||||
import { goodsFormatPrice } from '@/utils/filters.js'
|
||||
|
||||
const { lightSearchStr, getPromotion, navigateToDetailPage, navigateToStoreDetailPage } = useGoodsListCommon()
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
type?: string
|
||||
res?: any[]
|
||||
storeName?: boolean
|
||||
keyword?: string | null
|
||||
}>(), {
|
||||
type: 'oneColumns',
|
||||
res: () => [],
|
||||
storeName: true,
|
||||
keyword: ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 10rpx 20rpx 284rpx;
|
||||
width: 100%;
|
||||
|
||||
> .goods-item {
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
border-radius: 16rpx;
|
||||
flex-direction: column;
|
||||
width: calc(50% - 30rpx);
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
width: 100%;
|
||||
height: 330rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.count-config,
|
||||
.store-seller-name {
|
||||
font-size: $font-sm;
|
||||
}
|
||||
|
||||
.text-hidden {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-row {
|
||||
background: #fff;
|
||||
padding: 16rpx;
|
||||
|
||||
> .goods-col {
|
||||
display: flex;
|
||||
|
||||
> .goods-img {
|
||||
overflow: hidden;
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
> .goods-detail {
|
||||
flex: 7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-detail {
|
||||
margin: 0 20rpx;
|
||||
|
||||
> .title {
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
line-height: 1.5;
|
||||
height: 86rpx;
|
||||
padding: 10rpx 0 0;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.promotion {
|
||||
margin-top: 4rpx;
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
span {
|
||||
font-size: 24rpx;
|
||||
color: $light-color;
|
||||
margin-right: 10rpx;
|
||||
padding: 0 4rpx;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.store-seller-name {
|
||||
color: #666;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.count-config {
|
||||
padding: 5rpx 0;
|
||||
color: #666;
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
> .price-box {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: $font-color-light;
|
||||
|
||||
> .price {
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
color: $main-color;
|
||||
font-weight: bold;
|
||||
|
||||
::v-deep span:nth-of-type(1) {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
components/m-goods-list/common.ts
Normal file
90
components/m-goods-list/common.ts
Normal file
@@ -0,0 +1,90 @@
|
||||
import { useStore } from '@/store'
|
||||
|
||||
/**
|
||||
* 商品列表公共逻辑(原 common.vue mixin)
|
||||
* 提供高亮搜索、unicode 转换、促销标签、导航跳转等通用方法
|
||||
*/
|
||||
export function useGoodsListCommon() {
|
||||
const store = useStore()
|
||||
|
||||
const lightColor = store.getters.lightColor
|
||||
|
||||
/**
|
||||
* 高亮显示搜索内容
|
||||
*/
|
||||
const lightSearchStr = (keyword: string, str: string) => {
|
||||
if (!keyword) {
|
||||
return str
|
||||
} else {
|
||||
let unicodes = ''
|
||||
for (let i of Array.from(keyword)) {
|
||||
unicodes += unicode(i) + "|"
|
||||
}
|
||||
const rule = '(' + unicodes + ')'
|
||||
const reg = new RegExp(rule, 'gi')
|
||||
return str ? str.replace(reg, (matchValue) =>
|
||||
`<span style="color:${lightColor}">${matchValue}</span>`
|
||||
) : ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换为 unicode
|
||||
*/
|
||||
const unicode = (str: string) => {
|
||||
var value = ''
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
value += '\\u' + leftZero4(parseInt(str.charCodeAt(i).toString(16)))
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
const leftZero4 = (str: string) => {
|
||||
if (str != null && str != '' && str != 'undefined') {
|
||||
if (str.length == 2) {
|
||||
return '00' + str
|
||||
}
|
||||
}
|
||||
return str
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据去重 只显示一次 减免 劵等
|
||||
*/
|
||||
const getPromotion = (item: any) => {
|
||||
if (item.promotionMap) {
|
||||
let array: string[] = []
|
||||
Object.keys(item.promotionMap).forEach((child) => {
|
||||
if (!array.includes(child.split("-")[0])) {
|
||||
array.push(child.split("-")[0])
|
||||
}
|
||||
})
|
||||
return array
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到商品详情
|
||||
*/
|
||||
const navigateToDetailPage = (item: any) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到店铺详情
|
||||
*/
|
||||
const navigateToStoreDetailPage = (item: any) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/shopPage?id=${item.storeId}`,
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
lightSearchStr,
|
||||
getPromotion,
|
||||
navigateToDetailPage,
|
||||
navigateToStoreDetailPage,
|
||||
}
|
||||
}
|
||||
544
components/m-goods-list/list.vue
Normal file
544
components/m-goods-list/list.vue
Normal file
@@ -0,0 +1,544 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 一行两列商品展示 -->
|
||||
<view class="goods-list" :class="{ 'goods-list--embedded': !tabBarGap }" v-if="type == 'twoColumns'">
|
||||
<view v-for="(item, index) in res" :key="index" class="goods-item">
|
||||
<view class="image-wrapper" @click="navigateToDetailPage(item)">
|
||||
<u-image :src="item.thumbnail" width="100%" height='330rpx' mode="aspectFit">
|
||||
<template #loading><u-loading-icon></u-loading-icon></template>
|
||||
</u-image>
|
||||
</view>
|
||||
<view class="goods-detail">
|
||||
<div class="title clamp" v-html="lightSearchStr(keyword,item.goodsName)"
|
||||
@click="navigateToDetailPage(item)">
|
||||
|
||||
</div>
|
||||
<view class="price-box" @click="navigateToDetailPage(item)">
|
||||
<div class="price" v-if="item.price!=undefined">
|
||||
¥<span class="price-int">{{ goodsFormatPrice(item.price )[0] }} </span>.{{
|
||||
goodsFormatPrice(item.price )[1]
|
||||
}}
|
||||
</div>
|
||||
</view>
|
||||
<PaidMemberPrice :quote="paidQuotes[item.id]" />
|
||||
<div class="promotion" @click="navigateToDetailPage(item)">
|
||||
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
|
||||
<span class="promotion-tag" v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
|
||||
<span class="promotion-tag" v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
|
||||
<span class="promotion-tag" v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="count-config" @click="navigateToDetailPage(item)">
|
||||
<span>已售 {{ item.buyCount || "0" }}</span>
|
||||
<span>{{ item.commentNum || "0" }}条评论</span>
|
||||
</div>
|
||||
<div class="store-seller-name" v-if="storeName" @click="navigateToStoreDetailPage(item)">
|
||||
<view class="store-name-row">
|
||||
<text class="self-tag" v-if="item.selfOperated">自营</text>
|
||||
<text class="store-name-text">{{ item.storeName || "暂无" }}</text>
|
||||
<text class="to-store">进店</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" size="12" color="#c5c5c5"></u-icon>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 一行一列商品展示 -->
|
||||
<div v-if="type == 'oneColumns'" class="goods-one-row" :class="{ 'goods-one-row--embedded': !tabBarGap }">
|
||||
<div v-for="(item, index) in res" :key="index" class="goods-row">
|
||||
<div class="flex goods-col">
|
||||
<div class="goods-img" @click="navigateToDetailPage(item)">
|
||||
<u-image :width="!tabBarGap ? '170rpx' : '230rpx'" mode="aspectFit" :border-radius="!tabBarGap ? '12' : '16'" :height="!tabBarGap ? '170rpx' : '230rpx'" :src="item.thumbnail">
|
||||
<template #loading><u-loading-icon></u-loading-icon></template>
|
||||
</u-image>
|
||||
</div>
|
||||
<div class="goods-detail">
|
||||
<div class="title clamp2" @click="navigateToDetailPage(item)">
|
||||
<text class="self-tag" v-if="(!storeName || flag('selfTag')) && item.selfOperated">自营</text>
|
||||
{{ item.goodsName }}
|
||||
</div>
|
||||
<div class="selling-point" v-if="extra('subTitle') && item.sellingPoint">{{ item.sellingPoint }}</div>
|
||||
<div class="spec-summary" v-if="extra('spec') && specSummary(item)">{{ specSummary(item) }}</div>
|
||||
<div class="promotion" v-if="flag('tags')" @click="navigateToDetailPage(item)">
|
||||
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
|
||||
<span class="promotion-tag" v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
|
||||
<span class="promotion-tag" v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
|
||||
<span class="promotion-tag" v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="overflow: hidden" v-if="flag('sales')" @click="navigateToDetailPage(item)" class="count-config">
|
||||
<span style="float: left; font-size: 22rpx">已售 {{ item.buyCount || '0' }}</span>
|
||||
<span style="float: right; font-size: 22rpx" v-if="item.commentNum">{{ item.commentNum }}条评论</span>
|
||||
</div>
|
||||
<view class="price-box" @click="navigateToDetailPage(item)">
|
||||
<div class="price" v-if="flag('price') && item.price!=undefined">
|
||||
¥<span class="price-int">{{ goodsFormatPrice(item.price )[0] }} </span>.{{
|
||||
goodsFormatPrice(item.price )[1]
|
||||
}}
|
||||
</div>
|
||||
<div class="market-price" v-if="extra('linePrice') && hasMarketPrice(item)">¥{{ item.marketPrice }}</div>
|
||||
<div class="cart-btn" v-if="extra('cart')" @click.stop="emit('addCart', item)">
|
||||
<u-icon name="shopping-cart" size="16" :color="mainColor"></u-icon>
|
||||
</div>
|
||||
</view>
|
||||
<PaidMemberPrice v-if="flag('price')" :quote="paidQuotes[item.id]" />
|
||||
<div class="store-seller-name" v-if="storeName" @click="navigateToStoreDetailPage(item)">
|
||||
<view class="store-name-row">
|
||||
<text class="self-tag" v-if="item.selfOperated && flag('selfTag')">自营</text>
|
||||
<text class="store-name-text">{{ item.storeName }}</text>
|
||||
<text class="to-store">进店</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" size="12" color="#c5c5c5"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, watch, ref } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import PaidMemberPrice from '@/components/paid-member-price/index.vue'
|
||||
import { getPaidMemberQuotes } from '@/api/paid-member'
|
||||
import { isLogin } from '@/utils/filters'
|
||||
import { useStore } from '@/store'
|
||||
import { useGoodsListCommon } from './common'
|
||||
import { goodsFormatPrice } from '@/utils/filters.js'
|
||||
|
||||
const store = useStore()
|
||||
const mainColor = computed(() => (store && store.getters && store.getters.mainColor) || '#ff3c2a')
|
||||
|
||||
const { lightSearchStr, getPromotion, navigateToDetailPage, navigateToStoreDetailPage } = useGoodsListCommon()
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
res?: any[]
|
||||
type?: string
|
||||
storeName?: boolean
|
||||
tabBarGap?: boolean
|
||||
keyword?: string | null
|
||||
showFields?: Record<string, boolean> | null
|
||||
}>(), {
|
||||
res: () => [],
|
||||
type: 'twoColumns',
|
||||
storeName: true,
|
||||
tabBarGap: true,
|
||||
keyword: '',
|
||||
showFields: null
|
||||
})
|
||||
|
||||
const emit = defineEmits(['addCart'])
|
||||
const paidQuotes = ref<Record<string, any>>({})
|
||||
let paidRequest = 0
|
||||
async function loadPaidQuotes() {
|
||||
const request = ++paidRequest, memberId = String(isLogin()?.id || '')
|
||||
paidQuotes.value = {}
|
||||
if (!memberId) return
|
||||
const ids = [...new Set((props.res || []).map(item => String(item.id || '')).filter(Boolean))]
|
||||
try {
|
||||
const results = await Promise.all(Array.from({length:Math.ceil(ids.length/100)},(_,i)=>getPaidMemberQuotes(ids.slice(i*100,i*100+100))))
|
||||
if (request !== paidRequest || String(isLogin()?.id || '') !== memberId) return
|
||||
paidQuotes.value = Object.assign({}, ...results.filter(res=>res.data?.success).map(res=>res.data.result || {}))
|
||||
} catch {}
|
||||
}
|
||||
watch(() => [(props.res || []).map(item=>item.id).join(','), store.state.userInfo?.id, store.state.hasLogin], loadPaidQuotes, {immediate:true})
|
||||
onShow(loadPaidQuotes)
|
||||
|
||||
// 存量字段(促销/销量/自营/价格):showFields 为 null 时维持现状渲染
|
||||
const flag = (key: string) => props.showFields == null || props.showFields[key] !== false
|
||||
// 新增字段(副标题/规格/划线价/购物车按钮):仅 showFields 提供时可渲染
|
||||
const extra = (key: string) => props.showFields != null && props.showFields[key] !== false
|
||||
const hasMarketPrice = (item: any) =>
|
||||
item.marketPrice != null && item.price != null && item.marketPrice > item.price
|
||||
const specSummary = (item: any) =>
|
||||
Array.isArray(item.attrList)
|
||||
? item.attrList.slice(0, 2).map((a: any) => `${a.name}: ${a.value}`).join(' · ')
|
||||
: ''
|
||||
|
||||
watch(() => props.keyword, (val) => {
|
||||
if (val) {
|
||||
lightSearchStr(val as string, '')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.goods-one-row{
|
||||
padding-bottom: 250rpx;
|
||||
}
|
||||
/* 商品列表 */
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin: 10rpx 20rpx 284rpx;
|
||||
width: calc(100% - 40rpx);
|
||||
box-sizing: border-box;
|
||||
|
||||
&.goods-list--embedded {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
>.goods-item {
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
border-radius: 16rpx;
|
||||
flex-direction: column;
|
||||
width: calc(50% - 10rpx);
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
|
||||
.image-wrapper {
|
||||
width: 100%;
|
||||
height: 330rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.count-config,
|
||||
.store-seller-name {
|
||||
font-size: $font-sm;
|
||||
}
|
||||
|
||||
.store-seller-name {
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 4rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.store-name-row {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.store-name-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.to-store {
|
||||
flex-shrink: 0;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.self-tag {
|
||||
flex-shrink: 0;
|
||||
margin-right: 8rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.count-config {
|
||||
padding: 5rpx 0;
|
||||
color: #666;
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-one-row--embedded {
|
||||
.goods-row {
|
||||
padding: 20rpx 16rpx;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
background: #ffffff;
|
||||
|
||||
>.goods-col {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
>.goods-img {
|
||||
flex: 0 0 170rpx;
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
>.goods-detail {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin: 0 0 0 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
>.title {
|
||||
font-size: 26rpx;
|
||||
color: #222;
|
||||
line-height: 1.4;
|
||||
max-height: 74rpx;
|
||||
padding: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.self-tag {
|
||||
display: inline-block;
|
||||
margin-right: 8rpx;
|
||||
padding: 1rpx 8rpx;
|
||||
border-radius: 6rpx;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.4;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.selling-point {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
line-height: 1.3;
|
||||
margin-top: 4rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.spec-summary {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
line-height: 1.3;
|
||||
margin-top: 2rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.count-config {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-top: auto;
|
||||
padding-top: 8rpx;
|
||||
|
||||
.price {
|
||||
font-size: 22rpx;
|
||||
color: $main-color;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
|
||||
.price-int {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.market-price {
|
||||
font-size: 22rpx;
|
||||
color: #bbb;
|
||||
text-decoration: line-through;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.cart-btn {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
border: 2rpx solid $main-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2rpx 8rpx rgba(255, 60, 42, 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-row {
|
||||
background: #fff;
|
||||
padding: 16rpx;
|
||||
|
||||
>.goods-col {
|
||||
display: flex;
|
||||
|
||||
>.goods-img {
|
||||
overflow: hidden;
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
>.goods-detail {
|
||||
flex: 7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-detail {
|
||||
margin: 0 20rpx;
|
||||
|
||||
>.title {
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
line-height: 1.5;
|
||||
height: 86rpx;
|
||||
padding: 10rpx 0 0;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selling-point {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
margin-top: 4rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.spec-summary {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
margin-top: 4rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.market-price {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.cart-btn {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
border: 2rpx solid $main-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2rpx 8rpx rgba(255, 60, 42, 0.12);
|
||||
}
|
||||
|
||||
.promotion {
|
||||
margin-top: 4rpx;
|
||||
display: flex;
|
||||
|
||||
.promotion-tag {
|
||||
font-size: 24rpx;
|
||||
color: $light-color;
|
||||
margin-right: 10rpx;
|
||||
padding: 0 4rpx;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.store-seller-name {
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 4rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.store-name-row {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.store-name-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.to-store {
|
||||
flex-shrink: 0;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.self-tag {
|
||||
flex-shrink: 0;
|
||||
margin-right: 8rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.count-config {
|
||||
padding: 5rpx 0;
|
||||
color: #666;
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
>.price-box {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: $font-color-light;
|
||||
|
||||
>.price {
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
color: $main-color;
|
||||
font-weight: bold;
|
||||
|
||||
.price-int {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
145
components/m-goods-list/promotion.vue
Normal file
145
components/m-goods-list/promotion.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-for="(item, index) in res" :key="index" class="goods-row" @click="onItemClick(item)">
|
||||
<div class="flex goods-col">
|
||||
<div class="goods-img">
|
||||
<u-image width="230rpx" mode="aspectFit" border-radius='16' height="230rpx" :src="item.goodsImage || item.thumbnail">
|
||||
<template #loading><u-loading-icon></u-loading-icon></template>
|
||||
</u-image>
|
||||
</div>
|
||||
<div class="goods-detail">
|
||||
<div class="title clamp3">{{ item.goodsName }}</div>
|
||||
<div class='flex flex-a-c flex-j-sb'>
|
||||
<view class="price-box">
|
||||
<!-- 秒杀 / 拼团 -->
|
||||
<div class="price" v-if="!type && item.price!=undefined">
|
||||
¥<span class="price-int">{{ goodsFormatPrice(item.price )[0] }} </span>.{{
|
||||
goodsFormatPrice(item.price )[1]
|
||||
}}
|
||||
</div>
|
||||
<!-- 砍价 -->
|
||||
<div class="price" v-if="type && item.purchasePrice!=undefined">
|
||||
最低:
|
||||
¥<span class="price-int">{{ goodsFormatPrice(item.purchasePrice )[0] }} </span>.{{
|
||||
goodsFormatPrice(item.purchasePrice )[1]
|
||||
}}
|
||||
</div>
|
||||
<!-- 兜底策略如果金额是0 -->
|
||||
<div class="price" v-if="!item.price && !type">
|
||||
¥<span class="price-int">0 </span>.00
|
||||
</div>
|
||||
</view>
|
||||
<div>
|
||||
<image class="buy" src="/static/buy.png"></image>
|
||||
</div>
|
||||
</div>
|
||||
<div class='count-config' v-if="!type">
|
||||
<text class="count-config-text">即将恢复{{ item.originalPrice}}元</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { goodsFormatPrice } from '@/utils/filters.js'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
res?: any[]
|
||||
type?: string | null
|
||||
}>(), {
|
||||
res: () => [],
|
||||
type: ''
|
||||
})
|
||||
|
||||
// 促销列表跳转:拼团/秒杀 PromotionGoods 用 skuId;砍价走活动详情
|
||||
function onItemClick(item: any) {
|
||||
if (props.type == 'kanJia') {
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/bargain/detail?id=${item.id}`,
|
||||
})
|
||||
return
|
||||
}
|
||||
const skuId = item.skuId || item.id
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${skuId}&goodsId=${item.goodsId}`,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.buy {
|
||||
width: 152rpx;
|
||||
height: 108rpx;
|
||||
}
|
||||
.flex-j-sb {
|
||||
width: 100%;
|
||||
}
|
||||
.goods-row {
|
||||
background: #fff;
|
||||
padding: 16rpx;
|
||||
>.goods-col {
|
||||
display: flex;
|
||||
>.goods-img {
|
||||
overflow: hidden;
|
||||
flex: 4;
|
||||
}
|
||||
>.goods-detail {
|
||||
flex: 7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-detail {
|
||||
margin: 0 20rpx;
|
||||
>.title {
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
line-height: 1.5;
|
||||
height: 86rpx;
|
||||
padding: 10rpx 0 0;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.count-config {
|
||||
padding: 5rpx 0;
|
||||
color: #666;
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
letter-spacing:2rpx;
|
||||
padding-left: 10rpx;
|
||||
|
||||
.count-config-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.price-box {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: $font-color-light;
|
||||
|
||||
>.price {
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
color: $main-color;
|
||||
font-weight: bold;
|
||||
|
||||
.price-int {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
10
components/m-goods-recommend/README.md
Normal file
10
components/m-goods-recommend/README.md
Normal file
@@ -0,0 +1,10 @@
|
||||
## 商品推荐
|
||||
|
||||
|
||||
### OBJECT 参数说明
|
||||
属性|说明|类型|必填
|
||||
---|---|---|---
|
||||
`title`|标题,用于顶部显示的内容|String|否
|
||||
`pageSize`|显示多少条数据,建议是2的倍数,默认为12条|*|否
|
||||
`categoryId`|分类id|Function|否
|
||||
`storeId`|卖家id,搜索店铺商品的时候使用|String|否
|
||||
123
components/m-goods-recommend/index.vue
Normal file
123
components/m-goods-recommend/index.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="goods-recommend">{{title ? `--${title}-- `:''}}</view>
|
||||
<goodsTemplate :res='goodsList' />
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import goodsTemplate from '@/components/m-goods-list/list.vue'
|
||||
import { getGoodsList } from "@/api/goods.js"
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
title?: string
|
||||
pageSize?: number | null
|
||||
categoryId?: string | null
|
||||
storeId?: string | null
|
||||
}>(), {
|
||||
title: '',
|
||||
pageSize: 12,
|
||||
categoryId: '',
|
||||
storeId: ''
|
||||
})
|
||||
|
||||
const goodsList = ref<any[]>([])
|
||||
const params = ref({
|
||||
pageNumber: 1,
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
initGoods()
|
||||
})
|
||||
|
||||
/**
|
||||
* 初始化商品
|
||||
*/
|
||||
const initGoods = async () => {
|
||||
let submit = JSON.parse(
|
||||
JSON.stringify(
|
||||
Object.assign(params.value, {
|
||||
pageSize: props.pageSize,
|
||||
categoryId: props.categoryId,
|
||||
storeId: props.storeId,
|
||||
})
|
||||
)
|
||||
)
|
||||
|
||||
Object.keys(submit).map((key) => {
|
||||
if (!submit[key] || (submit[key] as any).length == 0) {
|
||||
delete submit[key]
|
||||
}
|
||||
})
|
||||
let res = await getGoodsList(submit)
|
||||
goodsList.value.push(...(res.data.result.records as any[]))
|
||||
}
|
||||
|
||||
const handleClick = (item: any) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/**商品代码 */
|
||||
$w_94: 94%;
|
||||
.goods-recommend {
|
||||
background: #f7f7f7;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
.goods-item {
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 0.4em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.goods-img {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: $w_94;
|
||||
height: 350rpx;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.goods-desc {
|
||||
border-bottom-left-radius: 20rpx;
|
||||
border-bottom-right-radius: 20rpx;
|
||||
width: $w_94;
|
||||
background: #fff;
|
||||
padding: 8rpx 0 8rpx 8rpx;
|
||||
margin: 0 auto;
|
||||
> .goods-title {
|
||||
font-size: 12px;
|
||||
height: 70rpx;
|
||||
display: -webkit-box;
|
||||
font-weight: 500;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> .goods-bottom {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
|
||||
> .goods-price {
|
||||
line-height: 2;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,242 +1,240 @@
|
||||
<template>
|
||||
<view class="serach">
|
||||
<view class="left-box" @tap="onClickLeft">
|
||||
<uni-icons style="line-height:70rpx" type="back" size="24" />
|
||||
<u-icon name="arrow-left" size="28rpx" color="#606266"></u-icon>
|
||||
</view>
|
||||
<view class="content" :style="{ 'border-radius': radius + 'px' }">
|
||||
<!-- HM修改 增加进入输入状态的点击范围 -->
|
||||
<view class="content-box" :class="{ center: mode === 2 }">
|
||||
<u-icon name="search" size="32" style="padding:0 15rpx;"></u-icon>
|
||||
<u-icon name="search" size="30rpx" color="#909399" style="padding:0 14rpx;"></u-icon>
|
||||
<!-- HM修改 增加placeholder input confirm-type confirm-->
|
||||
<input style="width:100%; " :placeholder="placeholder" placeholder-class="placeholder-color" @input="inputChange" confirm-type="search" @confirm="triggerConfirm" class="input"
|
||||
<input style="width:100%; " :placeholder="placeholder" placeholder-class="placeholder-color"
|
||||
@input="inputChange" confirm-type="search" @confirm="triggerConfirm" class="input"
|
||||
:class="{ center: !active && mode === 2 }" :focus="isFocus" v-model="inputVal" @focus="focus" @blur="blur" />
|
||||
<u-icon name="close" v-if="isDelShow" style="padding:0 30rpx;" @click="clear"></u-icon>
|
||||
<view
|
||||
class="clear-icon"
|
||||
v-if="showClear && isDelShow"
|
||||
@tap.stop.prevent="clear"
|
||||
>
|
||||
<u-icon name="close" size="28rpx" color="#909399"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="(active && show && button === 'inside') || (isDelShow && button === 'inside')" class="serachBtn" @click="search">搜索</view>
|
||||
|
||||
</view>
|
||||
<view v-if="button === 'outside'" class="button" :class="{ active: show || active }">
|
||||
<view class="button active" >
|
||||
<view v-if="isShowSeachGoods !=true" class="button-item">
|
||||
<div @click="out()">取消</div>
|
||||
</view>
|
||||
|
||||
<view v-else class="button-item">
|
||||
<u-icon name="grid-fill" size="50" @click="handelListClass()" v-if="!switchLayout"></u-icon>
|
||||
<u-icon v-else @click="handelListClass()" name="list-dot" size="50"></u-icon>
|
||||
<u-icon name="grid-fill" size="32rpx" color="var(--theme-light, #ff6b35)" @click="handelListClass()" v-if="!switchLayout"></u-icon>
|
||||
<u-icon v-else @click="handelListClass()" name="list-dot" size="32rpx" color="var(--theme-light, #ff6b35)"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniStatusBar from "../uni-status-bar/uni-status-bar.vue";
|
||||
import uniIcons from "../uni-icons/uni-icons.vue";
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uniStatusBar,
|
||||
uniIcons,
|
||||
},
|
||||
props: {
|
||||
mode: {
|
||||
value: Number,
|
||||
default: 1,
|
||||
},
|
||||
//HM修改 定义默认搜索关键词(水印文字)
|
||||
placeholder: {
|
||||
value: String,
|
||||
default: "请输入搜索内容",
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
button: {
|
||||
value: String,
|
||||
default: "outside",
|
||||
},
|
||||
//
|
||||
show: {
|
||||
value: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 默认半径为60
|
||||
radius: {
|
||||
value: String,
|
||||
default: 60,
|
||||
},
|
||||
// 是否获取焦点
|
||||
isFocusVal: {
|
||||
value: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowSeachGoods: false, //是否显示查询的商品
|
||||
active: false, //是否选中
|
||||
inputVal: "", //Input中内容
|
||||
isDelShow: false, //是否显示右侧删除icon
|
||||
isFocus: false, //是否获取焦点
|
||||
switchLayout: true, //切换当前商品的布局,默认为两列
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.isFocus = this.isFocusVal;
|
||||
},
|
||||
methods: {
|
||||
//
|
||||
out() {
|
||||
uni.reLaunch({
|
||||
url: "/pages/tabbar/home/index",
|
||||
});
|
||||
},
|
||||
// 切换排列顺序
|
||||
handelListClass() {
|
||||
this.switchLayout = !this.switchLayout;
|
||||
this.$emit("SwitchType");
|
||||
},
|
||||
//HM修改 触发组件confirm事件
|
||||
triggerConfirm() {
|
||||
this.$emit("confirm", false);
|
||||
uni.hideKeyboard();
|
||||
},
|
||||
//HM修改 触发组件input事件
|
||||
inputChange(event) {
|
||||
var keyword = event.detail.value;
|
||||
this.$emit("input", keyword);
|
||||
if (this.inputVal) {
|
||||
this.isDelShow = true;
|
||||
}
|
||||
},
|
||||
focus() {
|
||||
this.active = true;
|
||||
//HM修改 增加获取焦点判断
|
||||
if (this.inputVal) {
|
||||
this.isDelShow = true;
|
||||
}
|
||||
},
|
||||
blur() {
|
||||
this.isFocus = false;
|
||||
if (!this.inputVal) {
|
||||
this.active = false;
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
//HM修改 收起键盘
|
||||
uni.hideKeyboard();
|
||||
this.isFocus = false;
|
||||
this.inputVal = "";
|
||||
this.active = false;
|
||||
//HM修改 清空内容时候触发组件input
|
||||
this.$emit("input", "");
|
||||
//this.$emit('search', '');//HM修改 清空内容时候不进行搜索
|
||||
},
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
mode?: number
|
||||
placeholder?: string
|
||||
modelValue?: string
|
||||
value?: string
|
||||
radius?: string
|
||||
isFocusVal?: boolean
|
||||
showClear?: boolean
|
||||
}>(), {
|
||||
mode: 1,
|
||||
placeholder: "请输入搜索内容",
|
||||
modelValue: "",
|
||||
value: "",
|
||||
radius: "60",
|
||||
isFocusVal: true,
|
||||
showClear: true,
|
||||
})
|
||||
|
||||
/**
|
||||
* 回退到上一级
|
||||
*/
|
||||
onClickLeft() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
const emit = defineEmits(['confirm', 'input', 'update:modelValue', 'search', 'SwitchType'])
|
||||
|
||||
/**
|
||||
* 内容为空时,输入默认关键字
|
||||
*/
|
||||
search() {
|
||||
if (!this.inputVal) {
|
||||
if (!this.show && this.searchName == "取消") {
|
||||
uni.hideKeyboard();
|
||||
this.isFocus = false;
|
||||
this.active = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.$emit("search", this.inputVal ? this.inputVal : this.placeholder);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/**
|
||||
* 监听当前是否有值 是否显示清除图标
|
||||
*/
|
||||
inputVal(newVal) {
|
||||
newVal ? (this.isDelShow = true) : (this.isDelShow = false);
|
||||
},
|
||||
},
|
||||
};
|
||||
const isShowSeachGoods = ref(false)
|
||||
const active = ref(false)
|
||||
const inputVal = ref("")
|
||||
const isDelShow = ref(false)
|
||||
const isFocus = ref(false)
|
||||
const switchLayout = ref(true)
|
||||
|
||||
onMounted(() => {
|
||||
isFocus.value = props.isFocusVal
|
||||
inputVal.value = props.modelValue || props.value || ''
|
||||
})
|
||||
|
||||
//
|
||||
const out = () => {
|
||||
uni.reLaunch({
|
||||
url: "/pages/tabbar/home/index",
|
||||
})
|
||||
}
|
||||
// 切换排列顺序
|
||||
const handelListClass = () => {
|
||||
switchLayout.value = !switchLayout.value
|
||||
emit("SwitchType")
|
||||
}
|
||||
//HM修改 触发组件confirm事件
|
||||
const triggerConfirm = () => {
|
||||
emit("confirm", false)
|
||||
uni.hideKeyboard()
|
||||
}
|
||||
//HM修改 触发组件input事件
|
||||
const inputChange = (event: any) => {
|
||||
var keyword = event.detail.value
|
||||
emit("input", keyword)
|
||||
emit("update:modelValue", keyword)
|
||||
if (inputVal.value) {
|
||||
isDelShow.value = true
|
||||
}
|
||||
}
|
||||
const focus = () => {
|
||||
active.value = true
|
||||
//HM修改 增加获取焦点判断
|
||||
if (inputVal.value) {
|
||||
isDelShow.value = true
|
||||
}
|
||||
}
|
||||
const blur = () => {
|
||||
isFocus.value = false
|
||||
if (!inputVal.value) {
|
||||
active.value = false
|
||||
}
|
||||
}
|
||||
const clear = () => {
|
||||
//HM修改 收起键盘
|
||||
uni.hideKeyboard()
|
||||
isFocus.value = false
|
||||
inputVal.value = ""
|
||||
active.value = false
|
||||
isDelShow.value = false
|
||||
//HM修改 清空内容时候触发组件input
|
||||
emit("input", "")
|
||||
emit("update:modelValue", "")
|
||||
//this.$emit('search', '');//HM修改 清空内容时候不进行搜索
|
||||
}
|
||||
|
||||
const setInputValue = (value: string) => {
|
||||
inputVal.value = value || ''
|
||||
emit("input", inputVal.value)
|
||||
emit("update:modelValue", inputVal.value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 回退到上一级
|
||||
*/
|
||||
const onClickLeft = () => {
|
||||
const paths = getCurrentPages()
|
||||
console.log(paths)
|
||||
if(paths.length > 1){
|
||||
uni.navigateBack()
|
||||
}else{
|
||||
uni.switchTab({
|
||||
url:"/pages/tabbar/home/index"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 内容为空时,输入默认关键字
|
||||
*/
|
||||
const search = () => {
|
||||
if (!inputVal.value) {
|
||||
if (false) { // searchName == "取消" - 兼容旧逻辑
|
||||
uni.hideKeyboard()
|
||||
isFocus.value = false
|
||||
active.value = false
|
||||
return
|
||||
}
|
||||
}
|
||||
emit("search", inputVal.value ? inputVal.value : props.placeholder)
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听当前是否有值 是否显示清除图标
|
||||
*/
|
||||
watch(inputVal, (newVal) => {
|
||||
newVal ? (isDelShow.value = true) : (isDelShow.value = false)
|
||||
})
|
||||
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
if (newVal !== inputVal.value) {
|
||||
inputVal.value = newVal || ''
|
||||
}
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
isShowSeachGoods,
|
||||
inputVal,
|
||||
clear,
|
||||
setInputValue,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.serach {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
//border-bottom: 1px #f5f5f5 solid; //HM修改 去掉边框
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
font-size: $uni-font-size-base;
|
||||
font-size: 24rpx;
|
||||
|
||||
.left-box {
|
||||
width: 15%;
|
||||
/* #ifndef APP-NVUE */
|
||||
text-align: center;
|
||||
// display: flex;
|
||||
// /* #endif */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 70rpx;
|
||||
color: #999;
|
||||
background: #eee;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s linear;
|
||||
border-radius: 1000rpx;
|
||||
|
||||
.content-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 0 15rpx;
|
||||
|
||||
&.icon-serach:before {
|
||||
content: "\e61c";
|
||||
}
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
line-height: 60rpx;
|
||||
height: 60rpx;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
&.center {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
&.sub {
|
||||
// position: absolute;
|
||||
width: auto;
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.serachBtn {
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
padding: 0 30rpx;
|
||||
//HM修改 按钮背景色
|
||||
background: linear-gradient(to right, grey, grey);
|
||||
//background: $uni-color-success;
|
||||
line-height: 60rpx;
|
||||
color: #eee;
|
||||
//border-left: 1px #ccc solid; //HM修改 去掉边框
|
||||
transition: all 0.3s;
|
||||
.clear-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 72rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -244,16 +242,16 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s linear;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
padding-left: 15rpx;
|
||||
width: 100rpx;
|
||||
padding-left: 12rpx;
|
||||
width: auto;
|
||||
min-width: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- 遮罩层 -->
|
||||
<u-popup @close="close" v-model="show" mode="bottom" border-radius="30" height="260rpx">
|
||||
<u-popup @close="close" v-model:show="show" mode="bottom" border-radius="30" height="260rpx">
|
||||
|
||||
<view class="share-title">
|
||||
<span>分享至</span>
|
||||
@@ -8,138 +8,145 @@
|
||||
<view class="share-list">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="share-item">
|
||||
<button class="share-btn" open-type="share">
|
||||
<button class="share-btn" @click="weChatShare" open-type="share">
|
||||
<u-icon color="#04BE02" size="80" name="weixin-fill"></u-icon>微信好友
|
||||
</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="share-item" @click="handleShare(item)" v-for="(item, index) in list" :key="index">
|
||||
<u-icon :color="item.color" size="80" :name="item.icon"></u-icon>
|
||||
<view>{{ item.title }}</view>
|
||||
<u-icon class="share-icon" :color="item.color" size="80" :name="item.icon"></u-icon>
|
||||
<view class="share-label">{{ item.title }}</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="share-item" @click="copyLink()">
|
||||
<u-icon color="#b4aee8" size="80" name="share-fill"></u-icon>
|
||||
<view>{{ '复制链接' }}</view>
|
||||
<u-icon class="share-icon" color="#b4aee8" size="80" name="share-fill"></u-icon>
|
||||
<view class="share-label">{{ '复制链接' }}</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
<script>
|
||||
import { h5Copy } from "@/js_sdk/h5-copy/h5-copy.js";
|
||||
import configs from "@/config/config";
|
||||
import mpShare from "uview-ui/libs/mixin/mpShare.js";
|
||||
|
||||
export default {
|
||||
mixins: [mpShare],
|
||||
data() {
|
||||
return {
|
||||
configs,
|
||||
show: true,
|
||||
list: [
|
||||
{
|
||||
color: "#04BE02",
|
||||
title: "微信好友",
|
||||
icon: "weixin-fill",
|
||||
type: 0,
|
||||
},
|
||||
{
|
||||
color: "#04BE02",
|
||||
title: "朋友圈",
|
||||
icon: "weixin-circle-fill",
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import configs from "@/config/config"
|
||||
import mpShare from "@/utils/mpShare.js"
|
||||
import { setClipboard } from "@/utils/filters.js"
|
||||
|
||||
// mixin 处理:mpShare 提供小程序分享能力
|
||||
mpShare
|
||||
|
||||
const props = defineProps<{
|
||||
thumbnail?: string
|
||||
goodsName?: string
|
||||
type?: string
|
||||
goodsId?: string | number
|
||||
link?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const show = ref(true)
|
||||
const config = configs
|
||||
const list = ref([
|
||||
{
|
||||
color: "#04BE02",
|
||||
title: "微信好友",
|
||||
icon: "weixin-fill",
|
||||
type: 0,
|
||||
},
|
||||
// 图片缩略图、 商品名称 、 type(goods,shop,pintuan) 拼团商品分享以及店铺分享
|
||||
|
||||
props: ["thumbnail", "goodsName", "type", "goodsId", "link"],
|
||||
// #ifdef MP-WEIXIN
|
||||
onShareAppMessage(res) {
|
||||
return {
|
||||
imageUrl: this.thumbnail || require("@/static/logo.png"),
|
||||
};
|
||||
{
|
||||
color: "#04BE02",
|
||||
title: "朋友圈",
|
||||
icon: "weixin-circle-fill",
|
||||
type: 1,
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit("close");
|
||||
},
|
||||
// h5复制链接
|
||||
// #ifdef H5
|
||||
copyLink() {
|
||||
let content =
|
||||
this.configs.shareLink +
|
||||
getCurrentPages()[getCurrentPages().length - 1].__page__.fullPath;
|
||||
])
|
||||
|
||||
if (content === null || content === undefined) {
|
||||
content = "";
|
||||
} else content = content + "";
|
||||
const result = h5Copy(content);
|
||||
if (result === false) {
|
||||
const close = () => {
|
||||
emit("close")
|
||||
}
|
||||
|
||||
const weChatShare = () => {
|
||||
// @ts-ignore
|
||||
const proxy = getCurrentInstance()?.proxy
|
||||
if (proxy) {
|
||||
// @ts-ignore
|
||||
proxy.$u.mpShare = {
|
||||
title: shareTitle(),
|
||||
path: '',
|
||||
imageUrl: props.thumbnail || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// h5复制链接
|
||||
// #ifdef H5
|
||||
const copyLink = () => {
|
||||
let content: string
|
||||
if (props.link) {
|
||||
content = config.shareLink + props.link
|
||||
} else {
|
||||
content =
|
||||
config.shareLink +
|
||||
getCurrentPages()[getCurrentPages().length - 1].__page__.fullPath
|
||||
}
|
||||
setClipboard(content)
|
||||
}
|
||||
// #endif
|
||||
|
||||
const shareTitle = (): string => {
|
||||
let shareTitle: string = ''
|
||||
if (props.type == "goods") {
|
||||
shareTitle = `[好友推荐]${props.goodsName}快来跟我一起看看吧`
|
||||
} else if (props.type == "shops") {
|
||||
shareTitle = `[好友发现]${props.goodsName}快来跟我一起看看吧`
|
||||
} else if (props.type == "pintuan") {
|
||||
shareTitle = `[好友邀请]${props.goodsName}快来跟我一起抢购吧!`
|
||||
} else if (props.type == "kanjia") {
|
||||
shareTitle = `[好友邀请]请快来帮我砍一刀${props.goodsName}`
|
||||
}
|
||||
return shareTitle
|
||||
}
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
const handleShare = (val: any) => {
|
||||
console.log("12312312")
|
||||
if (val.type <= 1) {
|
||||
let scene: string // "WXSenceTimeline 朋友圈 WXSceneSession 微信好友"
|
||||
val.type == 1
|
||||
? (scene = "WXSenceTimeline")
|
||||
: (scene = "WXSceneSession")
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: scene,
|
||||
href: config.shareLink + props.link,
|
||||
imageUrl: props.thumbnail,
|
||||
type: 0,
|
||||
summary: props.goodsName,
|
||||
title: shareTitle(),
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: "不支持",
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "复制成功",
|
||||
title: "分享成功!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
handleShare(val) {
|
||||
if (val.type <= 1) {
|
||||
let shareTitle;
|
||||
|
||||
if (this.type == "goods") {
|
||||
shareTitle = `我发现了一个${this.goodsName}商品快来跟我一起看看吧`;
|
||||
} else if (this.type == "shops") {
|
||||
shareTitle = `我发现了一个${this.goodsName}店铺快来跟我一起看看吧`;
|
||||
} else if (this.type == "pintuan") {
|
||||
shareTitle = `我拼了一个${this.goodsName}快来跟我一起抢购吧!`;
|
||||
}
|
||||
|
||||
let scene; // "WXSenceTimeline 朋友圈 WXSceneSession 微信好友"
|
||||
val.type == 1
|
||||
? (scene = "WXSenceTimeline")
|
||||
: (scene = "WXSceneSession");
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: scene,
|
||||
href: configs.shareLink + this.link,
|
||||
imageUrl: this.thumbnail,
|
||||
type: 0,
|
||||
summary: this.goodsName,
|
||||
title: shareTitle,
|
||||
success: function (res) {
|
||||
uni.showToast({
|
||||
title: "分享成功!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
this.$emit("close");
|
||||
},
|
||||
fail: function (err) {
|
||||
uni.showToast({
|
||||
title: "分享失败!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
this.$emit("close");
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
})
|
||||
emit("close")
|
||||
},
|
||||
fail: function () {
|
||||
uni.showToast({
|
||||
title: "分享失败!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
})
|
||||
emit("close")
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./mp-share.scss";
|
||||
@@ -156,7 +163,7 @@ export default {
|
||||
top: 30rpx;
|
||||
}
|
||||
}
|
||||
button:after {
|
||||
.share-btn:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -169,9 +176,10 @@ button:after {
|
||||
width: 25%;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
> * {
|
||||
> .share-icon,
|
||||
> .share-label {
|
||||
margin: 8rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
28
components/m-take-down-sale-goods/index.vue
Normal file
28
components/m-take-down-sale-goods/index.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-popup v-model:show="show" mode="bottom" height="800rpx" border-radius="14">
|
||||
<view class="wrapper">
|
||||
<view class="down-goods-tips">该商品已下架</view>
|
||||
<scroll-view scroll-y="true" style="height: 670rpx">
|
||||
<goodsRecommend title="其他商品" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import goodsRecommend from "@/components/m-goods-recommend/index.vue"
|
||||
|
||||
const show = ref(true)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.down-goods-tips {
|
||||
font-size: 36rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,241 +0,0 @@
|
||||
<template>
|
||||
<div class="dropdown-item">
|
||||
<!-- selected -->
|
||||
<view class="dropdown-item__selected" @click="changePopup">
|
||||
<slot name="title" v-if="$slots.title"></slot>
|
||||
<block v-else>
|
||||
<view class="selected__name">
|
||||
{{title ? title : selectItem.text}}
|
||||
</view>
|
||||
<!-- <view class="selected__icon"
|
||||
:class="showClass === 'show'? 'up' : 'down'"
|
||||
>
|
||||
<span class="iconfont"></span>
|
||||
</view> -->
|
||||
</block>
|
||||
</view>
|
||||
<view class="dropdown-item__content" :style="{top: contentTop + 'px'}" v-if="showList">
|
||||
<!-- dropdown -->
|
||||
<view :class="['list', showClass]">
|
||||
<slot v-if="$slots.default"></slot>
|
||||
<block v-else>
|
||||
<view class="list__option" v-for="(item, index) in list" :key="index" @click="choose(item)">
|
||||
<view>{{item.text}}</view>
|
||||
<icon v-if="item.value === value" type="success_no_circle" size="26" />
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- dropdown-mask -->
|
||||
|
||||
<!-- @touchmove 禁止滑动 -->
|
||||
<view @touchmove.stop.prevent="moveHandle" :class="['dropdown-mask', showClass]" v-if="showList" @click="closePopup"></view>
|
||||
</view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
value: [Number, String, Object],
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
title: [Number, String],
|
||||
contentTopReduse: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showList: "",
|
||||
showClass: '',
|
||||
selectItem: {},
|
||||
contentTop: 0
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
mounted() {
|
||||
this.showList = this.active;
|
||||
this.selectItem = this.list[this.value];
|
||||
// document.addEventListener('click', e => {
|
||||
// //this.$el 可以获取当前组件的容器节点
|
||||
// if (!this.$el.contains(e.target)) {
|
||||
// console.log('change');
|
||||
// this.close()
|
||||
// }
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
// 禁止滑动
|
||||
moveHandle() {},
|
||||
choose(item) {
|
||||
this.selectItem = item
|
||||
this.$emit('input', item.value)
|
||||
this.closePopup()
|
||||
},
|
||||
changePopup() {
|
||||
if (this.showList) {
|
||||
this.closePopup()
|
||||
} else {
|
||||
this.openPopup()
|
||||
}
|
||||
},
|
||||
openPopup() {
|
||||
// this.$parent -> dropdown-menu
|
||||
this.$parent.$emit('close')
|
||||
this.showList = true
|
||||
this.$nextTick(() => {
|
||||
this.getElementData('.dropdown-item__selected', (data) => {
|
||||
this.contentTop = data[0].bottom - this.contentTopReduse;
|
||||
this.showClass = 'show'
|
||||
})
|
||||
})
|
||||
},
|
||||
closePopup() {
|
||||
this.showClass = ''
|
||||
setTimeout(() => {
|
||||
this.showList = false
|
||||
}, 300)
|
||||
},
|
||||
close() {
|
||||
this.showClass = ''
|
||||
this.showList = false
|
||||
},
|
||||
getElementData(el, callback) {
|
||||
uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
|
||||
callback(data[0]);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
/* project id 1564327 */
|
||||
src: url('https://at.alicdn.com/t/font_1564327_fcszez4n5i.eot');
|
||||
src: url('https://at.alicdn.com/t/font_1564327_fcszez4n5i.eot?#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_1564327_fcszez4n5i.woff2') format('woff2'),
|
||||
url('https://at.alicdn.com/t/font_1564327_fcszez4n5i.woff') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_1564327_fcszez4n5i.ttf') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_1564327_fcszez4n5i.svg#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 28rpx;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0.2px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
width: 100px;
|
||||
background: #1abc9c;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
position: relative;
|
||||
|
||||
&__selected {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
// padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
|
||||
.selected__name {
|
||||
font-size: 32rpx;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.selected__icon {
|
||||
margin-left: 8rpx;
|
||||
|
||||
&.down {
|
||||
transition: transform .3s;
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
|
||||
&.up {
|
||||
transition: transform .3s;
|
||||
transform: rotateZ(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
|
||||
.list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
background: #fff;
|
||||
transform: translateY(-100%);
|
||||
transition: all .3s;
|
||||
|
||||
&.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&__option {
|
||||
font-size: 32rpx;
|
||||
padding: 26rpx 28rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1rpx solid #DDDDDD;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transition: all .3s;
|
||||
z-index: 2;
|
||||
|
||||
&.show {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child):after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 2rpx;
|
||||
top: 36rpx;
|
||||
bottom: 36rpx;
|
||||
right: 0;
|
||||
background: $uni-border-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div class="dropdown-menu">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$on('close', this.closeDropdown)
|
||||
},
|
||||
methods: {
|
||||
closeDropdown() {
|
||||
this.$children.forEach(item =>{
|
||||
item.close();
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.dropdown-menu {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
dropdown-item {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
6
components/paid-member-price/index.vue
Normal file
6
components/paid-member-price/index.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template><view v-if="quote" class="paid-price" @click.stop="open"><image v-if="quote.label" :src="quote.label" mode="aspectFit" /><text>会员价 ¥{{ Number(quote.price).toFixed(2) }}</text><text v-if="!quote.eligible" class="open">开通享 ›</text></view></template>
|
||||
<script setup>
|
||||
defineProps({quote:{type:Object,default:null}})
|
||||
function open(){uni.navigateTo({url:'/pages/mine/paidMember'})}
|
||||
</script>
|
||||
<style scoped>.paid-price{display:flex;align-items:center;flex-wrap:wrap;gap:6rpx;margin-top:8rpx;color:#a77c3e;font-size:22rpx;line-height:1.6}.paid-price image{width:28rpx;height:28rpx}.open{font-size:20rpx;opacity:.8}</style>
|
||||
@@ -1,343 +0,0 @@
|
||||
<template>
|
||||
<view class="shadow" :class="!show?'':'shadow-show'" :style="{backgroundColor:show?maskBg:'rgba(0,0,0,0)'}" @tap="tapMask">
|
||||
<view class="popups" :class="[theme]" :style="{top: popupsTop ,left: popupsLeft,flexDirection:direction}">
|
||||
<text :class="dynPlace" :style="{width:'0px',height:'0px'}" v-if="triangle"></text>
|
||||
<view v-for="(item,index) in popData" :key="index" @tap.stop="tapItem(item)" class="itemChild view" :class="[direction=='row'?'solid-right':'solid-bottom',item.disabled?'disabledColor':'']">
|
||||
<u-icon size="35" :name="item.icon" v-if="item.icon"></u-icon><span class="title">{{item.title}}</span>
|
||||
</view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
maskBg: {
|
||||
type: String,
|
||||
default: "rgba(0,0,0,0)",
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
default: "default", //default top-start top-end bottom-start bottom-end
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: "column", //column row
|
||||
},
|
||||
x: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
y: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
popData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
default: "light", //light dark
|
||||
},
|
||||
dynamic: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
gap: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
triangle: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
popupsTop: "0rpx",
|
||||
popupsLeft: "0rpx",
|
||||
show: false,
|
||||
dynPlace: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.popupsPosition();
|
||||
},
|
||||
methods: {
|
||||
tapMask() {
|
||||
this.$emit("input", !this.value);
|
||||
},
|
||||
tapItem(item) {
|
||||
if (item.disabled) return;
|
||||
this.$emit("tapPopup", item);
|
||||
this.$emit("input", !this.value);
|
||||
},
|
||||
getStatusBar() {
|
||||
let promise = new Promise((resolve, reject) => {
|
||||
uni.getSystemInfo({
|
||||
success: function (e) {
|
||||
let customBar;
|
||||
// #ifdef H5
|
||||
|
||||
customBar = e.statusBarHeight + e.windowTop;
|
||||
|
||||
// #endif
|
||||
resolve(customBar);
|
||||
},
|
||||
});
|
||||
});
|
||||
return promise;
|
||||
},
|
||||
async popupsPosition() {
|
||||
let statusBar = await this.getStatusBar();
|
||||
let promise = new Promise((resolve, reject) => {
|
||||
let popupsDom = uni.createSelectorQuery().in(this).select(".popups");
|
||||
popupsDom
|
||||
.fields(
|
||||
{
|
||||
size: true,
|
||||
},
|
||||
(data) => {
|
||||
let width = data.width;
|
||||
let height = data.height;
|
||||
|
||||
|
||||
|
||||
let y = this.dynamic
|
||||
? this.dynamicGetY(this.y, this.gap)
|
||||
: this.transformRpx(this.y);
|
||||
|
||||
let x = this.dynamic
|
||||
? this.dynamicGetX(this.x, this.gap)
|
||||
: this.transformRpx(this.x);
|
||||
|
||||
// #ifdef H5
|
||||
y = this.dynamic
|
||||
? this.y + statusBar
|
||||
: this.transformRpx(this.y + statusBar);
|
||||
// #endif
|
||||
|
||||
this.dynPlace =
|
||||
this.placement == "default"
|
||||
? this.getPlacement(x, y)
|
||||
: this.placement;
|
||||
|
||||
switch (this.dynPlace) {
|
||||
case "top-start":
|
||||
this.popupsTop = `${y + 9}rpx`;
|
||||
this.popupsLeft = `${x - 15}rpx`;
|
||||
break;
|
||||
case "top-end":
|
||||
this.popupsTop = `${y + 9}rpx`;
|
||||
this.popupsLeft = `${x + 15 - width}rpx`;
|
||||
break;
|
||||
case "bottom-start":
|
||||
this.popupsTop = `${y - 18 - height}rpx`;
|
||||
this.popupsLeft = `${x - 15}rpx`;
|
||||
break;
|
||||
case "bottom-end":
|
||||
this.popupsTop = `${y - 9 - height}rpx`;
|
||||
this.popupsLeft = `${x + 15 - width}rpx`;
|
||||
break;
|
||||
}
|
||||
resolve();
|
||||
}
|
||||
)
|
||||
.exec();
|
||||
});
|
||||
return promise;
|
||||
},
|
||||
getPlacement(x, y) {
|
||||
let width = uni.getSystemInfoSync().windowWidth;
|
||||
let height = uni.getSystemInfoSync().windowHeight;
|
||||
if (x > width / 2 && y > height / 2) {
|
||||
return "bottom-end";
|
||||
} else if (x < width / 2 && y < height / 2) {
|
||||
return "top-start";
|
||||
} else if (x > width / 2 && y < height / 2) {
|
||||
return "top-end";
|
||||
} else if (x < width / 2 && y > height / 2) {
|
||||
return "bottom-start";
|
||||
} else if (x > width / 2) {
|
||||
return "top-end";
|
||||
} else {
|
||||
return "top-start";
|
||||
}
|
||||
},
|
||||
dynamicGetY(y, gap) {
|
||||
let height = uni.getSystemInfoSync().windowHeight;
|
||||
y = y < gap ? gap : y;
|
||||
y = height - y < gap ? height - gap : y;
|
||||
|
||||
return y;
|
||||
},
|
||||
dynamicGetX(x, gap) {
|
||||
let width = uni.getSystemInfoSync().windowWidth;
|
||||
x = x < gap ? gap : x;
|
||||
x = width - x < gap ? width - gap : x;
|
||||
return x;
|
||||
},
|
||||
transformRpx(params) {
|
||||
return (params * uni.getSystemInfoSync().screenWidth) / 375;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler: async function (newVal, oldVal) {
|
||||
if (newVal) await this.popupsPosition();
|
||||
this.show = newVal;
|
||||
},
|
||||
},
|
||||
placement: {
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
this.dynPlace = newVal;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.shadow {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
transition: background 0.3s ease-in-out;
|
||||
visibility: hidden;
|
||||
|
||||
&.shadow-show {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.popups {
|
||||
position: absolute;
|
||||
padding: 20rpx;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
.view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15rpx 10rpx;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
.image {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
.dark {
|
||||
background-color: #4c4c4c;
|
||||
color: #fff;
|
||||
.top-start:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -18rpx;
|
||||
left: 10rpx;
|
||||
border-width: 0 20rpx 20rpx;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #4c4c4c;
|
||||
}
|
||||
.top-end:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -18rpx;
|
||||
right: 10rpx;
|
||||
border-width: 0 20rpx 20rpx;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #4c4c4c;
|
||||
}
|
||||
.bottom-start:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -18rpx;
|
||||
left: 10rpx;
|
||||
border-width: 20rpx 20rpx 0;
|
||||
border-style: solid;
|
||||
border-color: #4c4c4c transparent transparent;
|
||||
}
|
||||
.bottom-end:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -18rpx;
|
||||
right: 10rpx;
|
||||
border-width: 20rpx 20rpx 0;
|
||||
border-style: solid;
|
||||
border-color: #4c4c4c transparent transparent;
|
||||
}
|
||||
.disabledColor {
|
||||
color: #c5c8ce;
|
||||
}
|
||||
}
|
||||
.light {
|
||||
color: #515a6e;
|
||||
box-shadow: 0upx 0upx 30upx rgba(0, 0, 0, 0.2);
|
||||
background: #fff;
|
||||
.top-start:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -18rpx;
|
||||
left: 10rpx;
|
||||
border-width: 0 20rpx 20rpx;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #fff;
|
||||
}
|
||||
.top-end:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -18rpx;
|
||||
right: 10rpx;
|
||||
border-width: 0 20rpx 20rpx;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #fff;
|
||||
}
|
||||
.bottom-start:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -18rpx;
|
||||
left: 10rpx;
|
||||
border-width: 20rpx 20rpx 0;
|
||||
border-style: solid;
|
||||
border-color: #fff transparent transparent;
|
||||
}
|
||||
.bottom-end:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -18rpx;
|
||||
right: 10rpx;
|
||||
border-width: 20rpx 20rpx 0;
|
||||
border-style: solid;
|
||||
border-color: #fff transparent transparent;
|
||||
}
|
||||
.disabledColor {
|
||||
color: #c5c8ce;
|
||||
}
|
||||
}
|
||||
.solid-bottom {
|
||||
border-bottom: 1px solid #f3f5f7;
|
||||
}
|
||||
.solid-right {
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
.popups .itemChild:last-child {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
78
components/u-time-line/u-time-line-item.vue
Normal file
78
components/u-time-line/u-time-line-item.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<view class="u-time-line-item">
|
||||
<view class="u-time-line-item__node" :style="nodeStyle">
|
||||
<slot name="node">
|
||||
<view class="u-time-line-item__dot" :style="{ backgroundColor: bgColor }"></view>
|
||||
</slot>
|
||||
</view>
|
||||
<view class="u-time-line-item__content">
|
||||
<slot name="content" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
nodeTop?: string | number
|
||||
bgColor?: string
|
||||
}>()
|
||||
|
||||
const nodeStyle = computed(() => {
|
||||
if (props.nodeTop === '' || props.nodeTop === null || props.nodeTop === undefined) {
|
||||
return {}
|
||||
}
|
||||
const top = typeof props.nodeTop === 'number' ? `${props.nodeTop}rpx` : props.nodeTop
|
||||
return { top }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-time-line-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
padding-bottom: 32rpx;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&__node {
|
||||
position: relative;
|
||||
width: 32rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
padding-left: 12rpx;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 15rpx;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
&:last-child::before {
|
||||
bottom: auto;
|
||||
height: 16rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
16
components/u-time-line/u-time-line.vue
Normal file
16
components/u-time-line/u-time-line.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<view class="u-time-line">
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// UTimeLine 组件
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-time-line {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
@@ -1,151 +0,0 @@
|
||||
<template>
|
||||
<text v-if="text" :class="inverted ? 'uni-badge--' + type + ' uni-badge--' + size + ' uni-badge--' + type + '-inverted' : 'uni-badge--' + type + ' uni-badge--' + size"
|
||||
:style="badgeStyle" class="uni-badge" @click="onClick()">{{ text }}</text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Badge 数字角标
|
||||
* @description 数字角标一般和其它控件(列表、9宫格等)配合使用,用于进行数量提示,默认为实心灰色背景
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=21
|
||||
* @property {String} text 角标内容
|
||||
* @property {String} type = [default|primary|success|warning|error] 颜色类型
|
||||
* @value default 灰色
|
||||
* @value primary 蓝色
|
||||
* @value success 绿色
|
||||
* @value warning 黄色
|
||||
* @value error 红色
|
||||
* @property {String} size = [normal|small] Badge 大小
|
||||
* @value normal 一般尺寸
|
||||
* @value small 小尺寸
|
||||
* @property {String} inverted = [true|false] 是否无需背景颜色
|
||||
* @event {Function} click 点击 Badge 触发事件
|
||||
* @example <uni-badge text="1"></uni-badge>
|
||||
*/
|
||||
export default {
|
||||
name: 'UniBadge',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
inverted: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
text: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
badgeStyle: ''
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
text() {
|
||||
this.setStyle()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setStyle()
|
||||
},
|
||||
methods: {
|
||||
setStyle() {
|
||||
this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
|
||||
},
|
||||
onClick() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$bage-size: 12px;
|
||||
$bage-small: scale(0.8);
|
||||
$bage-height: 20px;
|
||||
|
||||
.uni-badge {
|
||||
/* #ifndef APP-PLUS */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
height: $bage-height;
|
||||
line-height: $bage-height;
|
||||
color: $uni-text-color;
|
||||
border-radius: 100px;
|
||||
background-color: $uni-bg-color-hover;
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
||||
font-size: $bage-size;
|
||||
padding: 0px 6px;
|
||||
}
|
||||
|
||||
.uni-badge--inverted {
|
||||
padding: 0 5px 0 0;
|
||||
color: $uni-bg-color-hover;
|
||||
}
|
||||
|
||||
.uni-badge--default {
|
||||
color: $uni-text-color;
|
||||
background-color: $uni-bg-color-hover;
|
||||
}
|
||||
|
||||
.uni-badge--default-inverted {
|
||||
color: $uni-text-color-grey;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.uni-badge--primary {
|
||||
color: $uni-text-color-inverse;
|
||||
background-color: $uni-color-primary;
|
||||
}
|
||||
|
||||
.uni-badge--primary-inverted {
|
||||
color: $uni-color-primary;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.uni-badge--success {
|
||||
color: $uni-text-color-inverse;
|
||||
background-color: $uni-color-success;
|
||||
}
|
||||
|
||||
.uni-badge--success-inverted {
|
||||
color: $uni-color-success;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.uni-badge--warning {
|
||||
color: $uni-text-color-inverse;
|
||||
background-color: $uni-color-warning;
|
||||
}
|
||||
|
||||
.uni-badge--warning-inverted {
|
||||
color: $uni-color-warning;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.uni-badge--error {
|
||||
color: $uni-text-color-inverse;
|
||||
background-color: $uni-color-error;
|
||||
}
|
||||
|
||||
.uni-badge--error-inverted {
|
||||
color: $uni-color-error;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.uni-badge--small {
|
||||
transform: $bage-small;
|
||||
transform-origin: center center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,170 +0,0 @@
|
||||
<template>
|
||||
<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
|
||||
<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
|
||||
<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Drawer 抽屉
|
||||
* @description 抽屉侧滑菜单
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=26
|
||||
* @property {Boolean} mask = [true | false] 是否显示遮罩
|
||||
* @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
|
||||
* @property {Boolean} mode = [left | right] Drawer 滑出位置
|
||||
* @value left 从左侧滑出
|
||||
* @value right 从右侧侧滑出
|
||||
* @property {Number} width 抽屉的宽度 ,仅 vue 页面生效
|
||||
* @event {Function} close 组件关闭时触发事件
|
||||
*/
|
||||
export default {
|
||||
name: 'UniDrawer',
|
||||
props: {
|
||||
/**
|
||||
* 显示模式(左、右),只在初始化生效
|
||||
*/
|
||||
mode: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 蒙层显示状态
|
||||
*/
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 遮罩是否可点击关闭
|
||||
*/
|
||||
maskClick:{
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 抽屉宽度
|
||||
*/
|
||||
width: {
|
||||
type: Number,
|
||||
default: 220
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visibleSync: false,
|
||||
showDrawer: false,
|
||||
rightMode: false,
|
||||
watchTimer: null,
|
||||
drawerWidth: 220
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// #ifndef APP-NVUE
|
||||
this.drawerWidth = this.width
|
||||
// #endif
|
||||
this.rightMode = this.mode === 'right'
|
||||
},
|
||||
methods: {
|
||||
clear(){},
|
||||
close(type) {
|
||||
// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
|
||||
if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
|
||||
this._change('showDrawer', 'visibleSync', false)
|
||||
},
|
||||
open() {
|
||||
// fixed by mehaotian 处理重复点击打开的事件
|
||||
if(this.visibleSync) return
|
||||
this._change('visibleSync', 'showDrawer', true)
|
||||
},
|
||||
_change(param1, param2, status) {
|
||||
this[param1] = status
|
||||
if (this.watchTimer) {
|
||||
clearTimeout(this.watchTimer)
|
||||
}
|
||||
this.watchTimer = setTimeout(() => {
|
||||
this[param2] = status
|
||||
this.$emit('change',status)
|
||||
}, status ? 50 : 300)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 抽屉宽度
|
||||
$drawer-width: 220px;
|
||||
|
||||
.uni-drawer {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.uni-drawer__content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: $drawer-width;
|
||||
bottom: 0;
|
||||
background-color: $uni-bg-color;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.uni-drawer--left {
|
||||
left: 0;
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: translateX(-$drawer-width);
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: translateX(-100%);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-drawer--right {
|
||||
right: 0;
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: translateX($drawer-width);
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: translateX(100%);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-drawer__content--visible {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
|
||||
.uni-drawer__mask {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: $uni-bg-color-mask;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.uni-drawer__mask--visible {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -1,132 +0,0 @@
|
||||
export default {
|
||||
"pulldown": "\ue588",
|
||||
"refreshempty": "\ue461",
|
||||
"back": "\ue471",
|
||||
"forward": "\ue470",
|
||||
"more": "\ue507",
|
||||
"more-filled": "\ue537",
|
||||
"scan": "\ue612",
|
||||
"qq": "\ue264",
|
||||
"weibo": "\ue260",
|
||||
"weixin": "\ue261",
|
||||
"pengyouquan": "\ue262",
|
||||
"loop": "\ue565",
|
||||
"refresh": "\ue407",
|
||||
"refresh-filled": "\ue437",
|
||||
"arrowthindown": "\ue585",
|
||||
"arrowthinleft": "\ue586",
|
||||
"arrowthinright": "\ue587",
|
||||
"arrowthinup": "\ue584",
|
||||
"undo-filled": "\ue7d6",
|
||||
"undo": "\ue406",
|
||||
"redo": "\ue405",
|
||||
"redo-filled": "\ue7d9",
|
||||
"bars": "\ue563",
|
||||
"chatboxes": "\ue203",
|
||||
"camera": "\ue301",
|
||||
"chatboxes-filled": "\ue233",
|
||||
"camera-filled": "\ue7ef",
|
||||
"cart-filled": "\ue7f4",
|
||||
"cart": "\ue7f5",
|
||||
"checkbox-filled": "\ue442",
|
||||
"checkbox": "\ue7fa",
|
||||
"arrowleft": "\ue582",
|
||||
"arrowdown": "\ue581",
|
||||
"arrowright": "\ue583",
|
||||
"smallcircle-filled": "\ue801",
|
||||
"arrowup": "\ue580",
|
||||
"circle": "\ue411",
|
||||
"eye-filled": "\ue568",
|
||||
"eye-slash-filled": "\ue822",
|
||||
"eye-slash": "\ue823",
|
||||
"eye": "\ue824",
|
||||
"flag-filled": "\ue825",
|
||||
"flag": "\ue508",
|
||||
"gear-filled": "\ue532",
|
||||
"reload": "\ue462",
|
||||
"gear": "\ue502",
|
||||
"hand-thumbsdown-filled": "\ue83b",
|
||||
"hand-thumbsdown": "\ue83c",
|
||||
"hand-thumbsup-filled": "\ue83d",
|
||||
"heart-filled": "\ue83e",
|
||||
"hand-thumbsup": "\ue83f",
|
||||
"heart": "\ue840",
|
||||
"home": "\ue500",
|
||||
"info": "\ue504",
|
||||
"home-filled": "\ue530",
|
||||
"info-filled": "\ue534",
|
||||
"circle-filled": "\ue441",
|
||||
"chat-filled": "\ue847",
|
||||
"chat": "\ue263",
|
||||
"mail-open-filled": "\ue84d",
|
||||
"email-filled": "\ue231",
|
||||
"mail-open": "\ue84e",
|
||||
"email": "\ue201",
|
||||
"checkmarkempty": "\ue472",
|
||||
"list": "\ue562",
|
||||
"locked-filled": "\ue856",
|
||||
"locked": "\ue506",
|
||||
"map-filled": "\ue85c",
|
||||
"map-pin": "\ue85e",
|
||||
"map-pin-ellipse": "\ue864",
|
||||
"map": "\ue364",
|
||||
"minus-filled": "\ue440",
|
||||
"mic-filled": "\ue332",
|
||||
"minus": "\ue410",
|
||||
"micoff": "\ue360",
|
||||
"mic": "\ue302",
|
||||
"clear": "\ue434",
|
||||
"smallcircle": "\ue868",
|
||||
"close": "\ue404",
|
||||
"closeempty": "\ue460",
|
||||
"paperclip": "\ue567",
|
||||
"paperplane": "\ue503",
|
||||
"paperplane-filled": "\ue86e",
|
||||
"person-filled": "\ue131",
|
||||
"contact-filled": "\ue130",
|
||||
"person": "\ue101",
|
||||
"contact": "\ue100",
|
||||
"images-filled": "\ue87a",
|
||||
"phone": "\ue200",
|
||||
"images": "\ue87b",
|
||||
"image": "\ue363",
|
||||
"image-filled": "\ue877",
|
||||
"location-filled": "\ue333",
|
||||
"location": "\ue303",
|
||||
"plus-filled": "\ue439",
|
||||
"plus": "\ue409",
|
||||
"plusempty": "\ue468",
|
||||
"help-filled": "\ue535",
|
||||
"help": "\ue505",
|
||||
"navigate-filled": "\ue884",
|
||||
"navigate": "\ue501",
|
||||
"mic-slash-filled": "\ue892",
|
||||
"search": "\ue466",
|
||||
"settings": "\ue560",
|
||||
"sound": "\ue590",
|
||||
"sound-filled": "\ue8a1",
|
||||
"spinner-cycle": "\ue465",
|
||||
"download-filled": "\ue8a4",
|
||||
"personadd-filled": "\ue132",
|
||||
"videocam-filled": "\ue8af",
|
||||
"personadd": "\ue102",
|
||||
"upload": "\ue402",
|
||||
"upload-filled": "\ue8b1",
|
||||
"starhalf": "\ue463",
|
||||
"star-filled": "\ue438",
|
||||
"star": "\ue408",
|
||||
"trash": "\ue401",
|
||||
"phone-filled": "\ue230",
|
||||
"compose": "\ue400",
|
||||
"videocam": "\ue300",
|
||||
"trash-filled": "\ue8dc",
|
||||
"download": "\ue403",
|
||||
"chatbubble-filled": "\ue232",
|
||||
"chatbubble": "\ue202",
|
||||
"cloud-download": "\ue8e4",
|
||||
"cloud-upload-filled": "\ue8e5",
|
||||
"cloud-upload": "\ue8e6",
|
||||
"cloud-download-filled": "\ue8e9",
|
||||
"headphones":"\ue8bf",
|
||||
"store":"\ue609"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,269 +0,0 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<cell>
|
||||
<!-- #endif -->
|
||||
<view :class="disabled ? 'uni-list-item--disabled' : ''" :hover-class="disabled || showSwitch ? '' : 'uni-list-item--hover'" class="uni-list-item" @click="onClick">
|
||||
<view class="uni-list-item__container" :class="{ 'uni-list-item--first': isFirstChild }">
|
||||
<view v-if="thumb" class="uni-list-item__icon"><image :src="thumb" class="uni-list-item__icon-img" /></view>
|
||||
<view v-else-if="showExtraIcon" class="uni-list-item__icon">
|
||||
<uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" class="uni-icon-wrapper" />
|
||||
</view>
|
||||
<view class="uni-list-item__content">
|
||||
<slot name="left"></slot>
|
||||
<text class="uni-list-item__content-title">{{ title }}</text>
|
||||
<text v-if="note" class="uni-list-item__content-note">{{ note }}</text>
|
||||
</view>
|
||||
<view class="uni-list-item__extra">
|
||||
<text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text>
|
||||
<uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" />
|
||||
<switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked" @change="onSwitchChange" />
|
||||
<slot name="right"></slot>
|
||||
<uni-icons v-if="showArrow" :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
</cell>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniIcons from '../uni-icons/uni-icons.vue';
|
||||
import uniBadge from '../uni-badge/uni-badge.vue';
|
||||
|
||||
/**
|
||||
* ListItem 列表子组件
|
||||
* @description 列表子组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
|
||||
* @property {String} title 标题
|
||||
* @property {String} note 描述
|
||||
* @property {String} thumb 左侧缩略图,若thumb有值,则不会显示扩展图标
|
||||
* @property {String} badgeText 数字角标内容
|
||||
* @property {String} badgeType 数字角标类型,参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
|
||||
* @property {String} rightText 右侧文字内容
|
||||
* @property {Boolean} disabled = [true|false]是否禁用
|
||||
* @property {Boolean} showArrow = [true|false] 是否显示箭头图标
|
||||
* @property {Boolean} showBadge = [true|false] 是否显示数字角标
|
||||
* @property {Boolean} showSwitch = [true|false] 是否显示Switch
|
||||
* @property {Boolean} switchChecked = [true|false] Switch是否被选中
|
||||
* @property {Boolean} showExtraIcon = [true|false] 左侧是否显示扩展图标
|
||||
* @property {Boolean} scrollY = [true|false] 允许纵向滚动,需要显式的设置其宽高
|
||||
* @property {Object} extraIcon 扩展图标参数,格式为 {color: '#4cd964',size: '22',type: 'spinner'}
|
||||
* @event {Function} click 点击 uniListItem 触发事件
|
||||
* @event {Function} switchChange 点击切换 Switch 时触发
|
||||
*/
|
||||
export default {
|
||||
name: 'UniListItem',
|
||||
components: {
|
||||
uniIcons,
|
||||
uniBadge
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}, // 列表标题
|
||||
note: {
|
||||
type: String,
|
||||
default: ''
|
||||
}, // 列表描述
|
||||
disabled: {
|
||||
// 是否禁用
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
showArrow: {
|
||||
// 是否显示箭头
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
showBadge: {
|
||||
// 是否显示数字角标
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
showSwitch: {
|
||||
// 是否显示Switch
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
switchChecked: {
|
||||
// Switch是否被选中
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
badgeText: {
|
||||
// badge内容
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
badgeType: {
|
||||
// badge类型
|
||||
type: String,
|
||||
default: 'success'
|
||||
},
|
||||
rightText: {
|
||||
// 右侧文字内容
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
thumb: {
|
||||
// 缩略图
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showExtraIcon: {
|
||||
// 是否显示扩展图标
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
extraIcon: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
type: 'contact',
|
||||
color: '#000000',
|
||||
size: 20
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
inject: ['list'],
|
||||
data() {
|
||||
return {
|
||||
isFirstChild: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (!this.list.firstChildAppend) {
|
||||
this.list.firstChildAppend = true;
|
||||
this.isFirstChild = true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click');
|
||||
},
|
||||
onSwitchChange(e) {
|
||||
this.$emit('switchChange', e.detail);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
|
||||
|
||||
.uni-list-item {
|
||||
font-size: $uni-font-size-lg;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.uni-list-item--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.uni-list-item--hover {
|
||||
background-color: $uni-bg-color-hover;
|
||||
}
|
||||
|
||||
.uni-list-item__container {
|
||||
line-height: 48rpx;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
padding: $list-item-pd;
|
||||
padding-left: 0;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* #ifdef APP-PLUS */
|
||||
border-top-color: $uni-border-color;
|
||||
border-top-style: solid;
|
||||
border-top-width: 0.5px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-list-item--first {
|
||||
border-top-width: 0px;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-list-item__container:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
content: '';
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
background-color: $uni-border-color;
|
||||
}
|
||||
|
||||
.uni-list-item--first:after {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.uni-list-item__content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
color: #3b4144;
|
||||
}
|
||||
|
||||
.uni-list-item__content-title {
|
||||
font-size: $uni-font-size-base;
|
||||
color: #3b4144;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-list-item__content-note {
|
||||
margin-top: 6rpx;
|
||||
color: $uni-text-color-grey;
|
||||
font-size: $uni-font-size-sm;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-list-item__extra {
|
||||
// width: 25%;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-list-item__icon {
|
||||
display: flex;
|
||||
margin-right: 18rpx;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.uni-list-item__icon-img {
|
||||
// height: $uni-img-size-base;
|
||||
// width: $uni-img-size-base;
|
||||
height: 38rpx;
|
||||
width: 38rpx;
|
||||
}
|
||||
|
||||
.uni-list-item__extra-text {
|
||||
color: $uni-text-color-grey;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
</style>
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="uni-list">
|
||||
<slot />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<list class="uni-list" :enableBackToTop="enableBackToTop" loadmoreoffset="15" :scroll-y="scrollY" @loadmore="loadMore">
|
||||
<slot />
|
||||
</list>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* List 列表
|
||||
* @description 列表组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
|
||||
*/
|
||||
export default {
|
||||
name: 'UniList',
|
||||
'mp-weixin': {
|
||||
options: {
|
||||
multipleSlots: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
enableBackToTop: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
scrollY: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
list: this
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.firstChildAppend = false
|
||||
},
|
||||
methods: {
|
||||
loadMore(e) {
|
||||
this.$emit("scrolltolower");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uni-list {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
background-color: $uni-bg-color;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
// border-bottom-color: $uni-border-color;
|
||||
// border-bottom-style: solid;
|
||||
// border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-list:before {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.uni-list:after {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
@@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">
|
||||
<slot />
|
||||
</refresh>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view ref="uni-refresh" class="uni-refresh" v-show="isShow">
|
||||
<slot />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UniRefresh',
|
||||
props: {
|
||||
display: {
|
||||
type: [String],
|
||||
default: "hide"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pulling: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isShow() {
|
||||
if (this.display === "show" || this.pulling === true) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
onchange(value) {
|
||||
this.pulling = value;
|
||||
},
|
||||
onrefresh(e) {
|
||||
this.$emit("refresh", e);
|
||||
},
|
||||
onpullingdown(e) {
|
||||
// #ifdef APP-NVUE
|
||||
this.$emit("pullingdown", e);
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
var detail = {
|
||||
viewHeight: 90,
|
||||
pullingDistance: e.height
|
||||
}
|
||||
this.$emit("pullingdown", detail);
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-refresh {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -1,87 +0,0 @@
|
||||
var pullDown = {
|
||||
threshold: 95,
|
||||
maxHeight: 200,
|
||||
callRefresh: 'onrefresh',
|
||||
callPullingDown: 'onpullingdown',
|
||||
refreshSelector: '.uni-refresh'
|
||||
};
|
||||
|
||||
function ready(newValue, oldValue, ownerInstance, instance) {
|
||||
var state = instance.getState()
|
||||
state.canPullDown = newValue;
|
||||
// console.log(newValue);
|
||||
}
|
||||
|
||||
function touchStart(e, instance) {
|
||||
var state = instance.getState();
|
||||
state.refreshInstance = instance.selectComponent(pullDown.refreshSelector);
|
||||
state.canPullDown = (state.refreshInstance != null && state.refreshInstance != undefined);
|
||||
if (!state.canPullDown) {
|
||||
return
|
||||
}
|
||||
|
||||
// console.log("touchStart");
|
||||
|
||||
state.height = 0;
|
||||
state.touchStartY = e.touches[0].pageY || e.changedTouches[0].pageY;
|
||||
state.refreshInstance.setStyle({
|
||||
'height': 0
|
||||
});
|
||||
state.refreshInstance.callMethod("onchange", true);
|
||||
}
|
||||
|
||||
function touchMove(e, ownerInstance) {
|
||||
var instance = e.instance;
|
||||
var state = instance.getState();
|
||||
if (!state.canPullDown) {
|
||||
return
|
||||
}
|
||||
|
||||
var oldHeight = state.height;
|
||||
var endY = e.touches[0].pageY || e.changedTouches[0].pageY;
|
||||
var height = endY - state.touchStartY;
|
||||
if (height > pullDown.maxHeight) {
|
||||
return;
|
||||
}
|
||||
|
||||
var refreshInstance = state.refreshInstance;
|
||||
refreshInstance.setStyle({
|
||||
'height': height + 'px'
|
||||
});
|
||||
|
||||
height = height < pullDown.maxHeight ? height : pullDown.maxHeight;
|
||||
state.height = height;
|
||||
refreshInstance.callMethod(pullDown.callPullingDown, {
|
||||
height: height
|
||||
});
|
||||
}
|
||||
|
||||
function touchEnd(e, ownerInstance) {
|
||||
var state = e.instance.getState();
|
||||
if (!state.canPullDown) {
|
||||
return
|
||||
}
|
||||
|
||||
state.refreshInstance.callMethod("onchange", false);
|
||||
|
||||
var refreshInstance = state.refreshInstance;
|
||||
if (state.height > pullDown.threshold) {
|
||||
refreshInstance.callMethod(pullDown.callRefresh);
|
||||
return;
|
||||
}
|
||||
|
||||
refreshInstance.setStyle({
|
||||
'height': 0
|
||||
});
|
||||
}
|
||||
|
||||
function propObserver(newValue, oldValue, instance) {
|
||||
pullDown = newValue;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
touchmove: touchMove,
|
||||
touchstart: touchStart,
|
||||
touchend: touchEnd,
|
||||
propObserver: propObserver
|
||||
}
|
||||
@@ -2,22 +2,22 @@
|
||||
<view class="uni-load-more">
|
||||
<view class="uni-load-more__img" v-show="status === 'loading' && showIcon">
|
||||
<view class="load1">
|
||||
<view :style="{ background: color }"></view>
|
||||
<view :style="{ background: color }"></view>
|
||||
<view :style="{ background: color }"></view>
|
||||
<view :style="{ background: color }"></view>
|
||||
<view class="load-item" :style="{ background: color }"></view>
|
||||
<view class="load-item" :style="{ background: color }"></view>
|
||||
<view class="load-item" :style="{ background: color }"></view>
|
||||
<view class="load-item" :style="{ background: color }"></view>
|
||||
</view>
|
||||
<view class="load2">
|
||||
<view :style="{ background: color }"></view>
|
||||
<view :style="{ background: color }"></view>
|
||||
<view :style="{ background: color }"></view>
|
||||
<view :style="{ background: color }"></view>
|
||||
<view class="load-item" :style="{ background: color }"></view>
|
||||
<view class="load-item" :style="{ background: color }"></view>
|
||||
<view class="load-item" :style="{ background: color }"></view>
|
||||
<view class="load-item" :style="{ background: color }"></view>
|
||||
</view>
|
||||
<view class="load3">
|
||||
<view :style="{ background: color }"></view>
|
||||
<view :style="{ background: color }"></view>
|
||||
<view :style="{ background: color }"></view>
|
||||
<view :style="{ background: color }"></view>
|
||||
<view class="load-item" :style="{ background: color }"></view>
|
||||
<view class="load-item" :style="{ background: color }"></view>
|
||||
<view class="load-item" :style="{ background: color }"></view>
|
||||
<view class="load-item" :style="{ background: color }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="uni-load-more__text" :style="{ color: color }" v-if="showText">
|
||||
@@ -26,42 +26,28 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'uni-load-more',
|
||||
props: {
|
||||
status: {
|
||||
//上拉的状态:more-loading前;loading-loading中;noMore-没有更多了
|
||||
type: String,
|
||||
default: 'more'
|
||||
},
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showText: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#777777'
|
||||
},
|
||||
contentText: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
contentdown: '上拉显示更多',
|
||||
contentrefresh: '正在加载...',
|
||||
contentnomore: '没有更多数据了'
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
<script setup lang="ts">
|
||||
withDefaults(defineProps<{
|
||||
status?: string
|
||||
showIcon?: boolean
|
||||
showText?: boolean
|
||||
color?: string
|
||||
contentText?: {
|
||||
contentdown: string
|
||||
contentrefresh: string
|
||||
contentnomore: string
|
||||
}
|
||||
};
|
||||
}>(), {
|
||||
status: 'more',
|
||||
showIcon: true,
|
||||
showText: true,
|
||||
color: '#777777',
|
||||
contentText: () => ({
|
||||
contentdown: '上拉显示更多',
|
||||
contentrefresh: '正在加载...',
|
||||
contentnomore: '没有更多数据了',
|
||||
}),
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -86,11 +72,13 @@ export default {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view {
|
||||
.load1,
|
||||
.load2,
|
||||
.load3 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view {
|
||||
.load-item {
|
||||
width: 6px;
|
||||
height: 2px;
|
||||
border-top-left-radius: 1px;
|
||||
@@ -102,25 +90,25 @@ export default {
|
||||
animation: load 1.56s ease infinite;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view:nth-child(1) {
|
||||
.load-item:nth-child(1) {
|
||||
transform: rotate(90deg);
|
||||
top: 2px;
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view:nth-child(2) {
|
||||
.load-item:nth-child(2) {
|
||||
transform: rotate(180deg);
|
||||
top: 11px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view:nth-child(3) {
|
||||
.load-item:nth-child(3) {
|
||||
transform: rotate(270deg);
|
||||
bottom: 2px;
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view:nth-child(4) {
|
||||
.load-item:nth-child(4) {
|
||||
top: 11px;
|
||||
left: 0;
|
||||
}
|
||||
@@ -140,51 +128,51 @@ export default {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
|
||||
.load1 view:nth-child(1) {
|
||||
.load1 .load-item:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.load2 view:nth-child(1) {
|
||||
.load2 .load-item:nth-child(1) {
|
||||
animation-delay: 0.13s;
|
||||
}
|
||||
|
||||
.load3 view:nth-child(1) {
|
||||
.load3 .load-item:nth-child(1) {
|
||||
animation-delay: 0.26s;
|
||||
}
|
||||
|
||||
.load1 view:nth-child(2) {
|
||||
.load1 .load-item:nth-child(2) {
|
||||
animation-delay: 0.39s;
|
||||
}
|
||||
|
||||
.load2 view:nth-child(2) {
|
||||
.load2 .load-item:nth-child(2) {
|
||||
animation-delay: 0.52s;
|
||||
}
|
||||
|
||||
.load3 view:nth-child(2) {
|
||||
.load3 .load-item:nth-child(2) {
|
||||
animation-delay: 0.65s;
|
||||
}
|
||||
|
||||
.load1 view:nth-child(3) {
|
||||
.load1 .load-item:nth-child(3) {
|
||||
animation-delay: 0.78s;
|
||||
}
|
||||
|
||||
.load2 view:nth-child(3) {
|
||||
.load2 .load-item:nth-child(3) {
|
||||
animation-delay: 0.91s;
|
||||
}
|
||||
|
||||
.load3 view:nth-child(3) {
|
||||
.load3 .load-item:nth-child(3) {
|
||||
animation-delay: 1.04s;
|
||||
}
|
||||
|
||||
.load1 view:nth-child(4) {
|
||||
.load1 .load-item:nth-child(4) {
|
||||
animation-delay: 1.17s;
|
||||
}
|
||||
|
||||
.load2 view:nth-child(4) {
|
||||
.load2 .load-item:nth-child(4) {
|
||||
animation-delay: 1.3s;
|
||||
}
|
||||
|
||||
.load3 view:nth-child(4) {
|
||||
.load3 .load-item:nth-child(4) {
|
||||
animation-delay: 1.43s;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,395 +0,0 @@
|
||||
<template>
|
||||
<view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick">
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<view v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close" @click="close">
|
||||
<uni-icons type="closeempty" :color="color" size="12" />
|
||||
</view>
|
||||
<view v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon">
|
||||
<uni-icons type="sound" :color="color" size="14" />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<uni-icons v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close" type="closeempty" :color="color"
|
||||
size="12" @click="close" />
|
||||
<uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound" :color="color"
|
||||
size="14" />
|
||||
<!-- #endif -->
|
||||
<view ref="textBox" class="uni-noticebar__content-wrapper" :class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
|
||||
<view :id="elIdBox" class="uni-noticebar__content" :class="{'uni-noticebar__content--scrollable':scrollable, 'uni-noticebar__content--single':!scrollable && (single || moreText)}">
|
||||
<text :id="elId" ref="animationEle" class="uni-noticebar__content-text" :class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || moreText)}"
|
||||
:style="{color:color, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more" @click="clickMore">
|
||||
<text v-if="moreText" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
|
||||
<uni-icons type="arrowright" :color="moreColor" size="14" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniIcons from '../uni-icons/uni-icons.vue'
|
||||
// #ifdef APP-NVUE
|
||||
const dom = weex.requireModule('dom');
|
||||
const animation = weex.requireModule('animation');
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* NoticeBar 自定义导航栏
|
||||
* @description 通告栏组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=30
|
||||
* @property {Number} speed 文字滚动的速度,默认100px/秒
|
||||
* @property {String} text 显示文字
|
||||
* @property {String} backgroundColor 背景颜色
|
||||
* @property {String} color 文字颜色
|
||||
* @property {String} moreColor 查看更多文字的颜色
|
||||
* @property {String} moreText 设置“查看更多”的文本
|
||||
* @property {Boolean} single = [true|false] 是否单行
|
||||
* @property {Boolean} scrollable = [true|false] 是否滚动,为true时,NoticeBar为单行
|
||||
* @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
|
||||
* @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
|
||||
* @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标,为true时,NoticeBar为单行
|
||||
* @event {Function} click 点击 NoticeBar 触发事件
|
||||
* @event {Function} close 关闭 NoticeBar 触发事件
|
||||
* @event {Function} getmore 点击”查看更多“时触发事件
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'UniNoticeBar',
|
||||
components: {
|
||||
uniIcons
|
||||
},
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
moreText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#fffbe8'
|
||||
},
|
||||
speed: {
|
||||
// 默认1s滚动100px
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#de8c17'
|
||||
},
|
||||
moreColor: {
|
||||
type: String,
|
||||
default: '#999999'
|
||||
},
|
||||
single: {
|
||||
// 是否单行
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
scrollable: {
|
||||
// 是否滚动,添加后控制单行效果取消
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
showIcon: {
|
||||
// 是否显示左侧icon
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
showGetMore: {
|
||||
// 是否显示右侧查看更多
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
showClose: {
|
||||
// 是否显示左侧关闭按钮
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
return {
|
||||
textWidth: 0,
|
||||
boxWidth: 0,
|
||||
wrapWidth: '',
|
||||
webviewHide: false,
|
||||
// #ifdef APP-NVUE
|
||||
stopAnimation: false,
|
||||
// #endif
|
||||
elId: elId,
|
||||
elIdBox: elIdBox,
|
||||
show: true,
|
||||
animationDuration: 'none',
|
||||
animationPlayState: 'paused',
|
||||
animationDelay: '0s'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef APP-PLUS
|
||||
var pages = getCurrentPages();
|
||||
var page = pages[pages.length - 1];
|
||||
var currentWebview = page.$getAppWebview();
|
||||
currentWebview.addEventListener('hide',()=>{
|
||||
this.webviewHide = true
|
||||
})
|
||||
currentWebview.addEventListener('show',()=>{
|
||||
this.webviewHide = false
|
||||
})
|
||||
// #endif
|
||||
this.$nextTick(() => {
|
||||
this.initSize()
|
||||
})
|
||||
},
|
||||
// #ifdef APP-NVUE
|
||||
beforeDestroy() {
|
||||
this.stopAnimation = true
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
initSize() {
|
||||
if (this.scrollable) {
|
||||
// #ifndef APP-NVUE
|
||||
let query = [],
|
||||
boxWidth = 0,
|
||||
textWidth = 0;
|
||||
let textQuery = new Promise((resolve, reject) => {
|
||||
uni.createSelectorQuery()
|
||||
// #ifndef MP-ALIPAY
|
||||
.in(this)
|
||||
// #endif
|
||||
.select(`#${this.elId}`)
|
||||
.boundingClientRect()
|
||||
.exec(ret => {
|
||||
this.textWidth = ret[0].width
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
let boxQuery = new Promise((resolve, reject) => {
|
||||
uni.createSelectorQuery()
|
||||
// #ifndef MP-ALIPAY
|
||||
.in(this)
|
||||
// #endif
|
||||
.select(`#${this.elIdBox}`)
|
||||
.boundingClientRect()
|
||||
.exec(ret => {
|
||||
this.boxWidth = ret[0].width
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
query.push(textQuery)
|
||||
query.push(boxQuery)
|
||||
Promise.all(query).then(() => {
|
||||
this.animationDuration = `${this.textWidth / this.speed}s`
|
||||
this.animationDelay = `-${this.boxWidth / this.speed}s`
|
||||
setTimeout(() => {
|
||||
this.animationPlayState = 'running'
|
||||
}, 1000)
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
dom.getComponentRect(this.$refs['animationEle'], (res) => {
|
||||
let winWidth = uni.getSystemInfoSync().windowWidth
|
||||
this.textWidth = res.size.width
|
||||
animation.transition(this.$refs['animationEle'], {
|
||||
styles: {
|
||||
transform: `translateY(-${winWidth}px)`
|
||||
},
|
||||
duration: 0,
|
||||
timingFunction: 'linear',
|
||||
delay: 0
|
||||
}, () => {
|
||||
if (!this.stopAnimation) {
|
||||
animation.transition(this.$refs['animationEle'], {
|
||||
styles: {
|
||||
transform: `translateY(-${this.textWidth}px)`
|
||||
},
|
||||
timingFunction: 'linear',
|
||||
duration: (this.textWidth - winWidth) / this.speed * 1000,
|
||||
delay: 1000
|
||||
}, () => {
|
||||
if (!this.stopAnimation) {
|
||||
this.loopAnimation()
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
// #ifdef APP-NVUE
|
||||
if (!this.scrollable && (this.single || this.moreText)) {
|
||||
dom.getComponentRect(this.$refs['textBox'], (res) => {
|
||||
this.wrapWidth = res.size.width
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
loopAnimation() {
|
||||
// #ifdef APP-NVUE
|
||||
animation.transition(this.$refs['animationEle'], {
|
||||
styles: {
|
||||
transform: `translateY(0px)`
|
||||
},
|
||||
duration: 0
|
||||
}, () => {
|
||||
if (!this.stopAnimation) {
|
||||
animation.transition(this.$refs['animationEle'], {
|
||||
styles: {
|
||||
transform: `translateY(-${this.textWidth}px)`
|
||||
},
|
||||
duration: this.textWidth / this.speed * 1000,
|
||||
timingFunction: 'linear',
|
||||
delay: 0
|
||||
}, () => {
|
||||
if (!this.stopAnimation) {
|
||||
this.loopAnimation()
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
clickMore() {
|
||||
this.$emit('getmore')
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
this.$emit('close')
|
||||
},
|
||||
onClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.uni-noticebar {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.uni-noticebar-close {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.uni-noticebar-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.uni-noticebar__content-wrapper {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-noticebar__content-wrapper--single {
|
||||
/* #ifndef APP-NVUE */
|
||||
line-height: 18px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-noticebar__content-wrapper--single,
|
||||
.uni-noticebar__content-wrapper--scrollable {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-noticebar__content-wrapper--scrollable {
|
||||
position: relative;
|
||||
height: 18px;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.uni-noticebar__content--scrollable {
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 0;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
flex: 1;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-noticebar__content--single {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex: none;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-noticebar__content-text {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
/* #ifndef APP-NVUE */
|
||||
word-break: break-all;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-noticebar__content-text--single {
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 1;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.uni-noticebar__content-text--scrollable {
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 1;
|
||||
padding-left: 750rpx;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
padding-left: 100%;
|
||||
animation: notice 10s 0s linear infinite both;
|
||||
animation-play-state: paused;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-noticebar__more {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.uni-noticebar__more-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@keyframes notice {
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
192
components/uni-number-box.vue
Normal file
192
components/uni-number-box.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<view class="uni-numbox">
|
||||
<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}">
|
||||
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text>
|
||||
</view>
|
||||
<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number"
|
||||
v-model="inputValue" :style="{background, color}" />
|
||||
<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}">
|
||||
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
value?: number | string
|
||||
modelValue?: number | string
|
||||
min?: number
|
||||
max?: number
|
||||
step?: number
|
||||
background?: string
|
||||
color?: string
|
||||
disabled?: boolean
|
||||
}>(), {
|
||||
value: 1,
|
||||
modelValue: 1,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
background: '#f5f5f5',
|
||||
color: '#333',
|
||||
disabled: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
change: [value: number]
|
||||
input: [value: number]
|
||||
'update:modelValue': [value: number]
|
||||
blur: [event: Event]
|
||||
focus: [event: Event]
|
||||
}>()
|
||||
|
||||
const inputValue = ref(0)
|
||||
|
||||
watch(() => props.value, (val) => {
|
||||
inputValue.value = +val
|
||||
})
|
||||
|
||||
watch(() => props.modelValue, (val) => {
|
||||
inputValue.value = +val
|
||||
})
|
||||
|
||||
if (props.value === 1) {
|
||||
inputValue.value = +props.modelValue
|
||||
}
|
||||
if (props.modelValue === 1) {
|
||||
inputValue.value = +props.value
|
||||
}
|
||||
|
||||
function _getDecimalScale() {
|
||||
let scale = 1
|
||||
if (~~props.step !== props.step) {
|
||||
scale = Math.pow(10, String(props.step).split('.')[1].length)
|
||||
}
|
||||
return scale
|
||||
}
|
||||
|
||||
function _emitValue() {
|
||||
const val = +inputValue.value
|
||||
emit('change', val)
|
||||
emit('input', val)
|
||||
emit('update:modelValue', val)
|
||||
}
|
||||
|
||||
function _calcValue(type: 'minus' | 'plus') {
|
||||
if (props.disabled) {
|
||||
return
|
||||
}
|
||||
const scale = _getDecimalScale()
|
||||
let value = inputValue.value * scale
|
||||
const step = props.step * scale
|
||||
if (type === 'minus') {
|
||||
value -= step
|
||||
if (value < props.min * scale) {
|
||||
return
|
||||
}
|
||||
if (value > props.max * scale) {
|
||||
value = props.max * scale
|
||||
}
|
||||
}
|
||||
|
||||
if (type === 'plus') {
|
||||
value += step
|
||||
if (value > props.max * scale) {
|
||||
return
|
||||
}
|
||||
if (value < props.min * scale) {
|
||||
value = props.min * scale
|
||||
}
|
||||
}
|
||||
|
||||
inputValue.value = Number((value / scale).toFixed(String(scale).length - 1))
|
||||
_emitValue()
|
||||
}
|
||||
|
||||
function _onBlur(event: any) {
|
||||
emit('blur', event)
|
||||
let value = event.detail.value
|
||||
if (!value) {
|
||||
return
|
||||
}
|
||||
value = +value
|
||||
if (value > props.max) {
|
||||
value = props.max
|
||||
} else if (value < props.min) {
|
||||
value = props.min
|
||||
}
|
||||
const scale = _getDecimalScale()
|
||||
inputValue.value = Number(value.toFixed(String(scale).length - 1))
|
||||
_emitValue()
|
||||
}
|
||||
|
||||
function _onFocus(event: Event) {
|
||||
emit('focus', event)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$box-height: 48rpx;
|
||||
$bg: #f5f5f5;
|
||||
$br: 4rpx;
|
||||
$color: #333;
|
||||
|
||||
.uni-numbox {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-numbox-btns {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
background-color: $bg;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-numbox__value {
|
||||
margin: 0 4rpx;
|
||||
background-color: $bg;
|
||||
width: 70rpx;
|
||||
height: $box-height;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.uni-numbox__minus {
|
||||
border-top-left-radius: $br;
|
||||
border-bottom-left-radius: $br;
|
||||
}
|
||||
|
||||
.uni-numbox__plus {
|
||||
border-top-right-radius: $br;
|
||||
border-bottom-right-radius: $br;
|
||||
}
|
||||
|
||||
.uni-numbox--text {
|
||||
line-height: 40rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.uni-numbox .uni-numbox--disabled {
|
||||
color: #c0c0c0 !important;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
@@ -1,29 +0,0 @@
|
||||
export default {
|
||||
created() {
|
||||
if (this.type === 'message') {
|
||||
// 获取自组件对象
|
||||
this.maskShow = false
|
||||
this.children = null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.type === 'message') {
|
||||
// 不显示遮罩
|
||||
this.maskShow = false
|
||||
// 获取子组件对象
|
||||
this.childrenMsg = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
customOpen() {
|
||||
if (this.childrenMsg) {
|
||||
this.childrenMsg.open()
|
||||
}
|
||||
},
|
||||
customClose() {
|
||||
if (this.childrenMsg) {
|
||||
this.childrenMsg.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import message from './message.js';
|
||||
// 定义 type 类型:弹出类型:top/bottom/center
|
||||
const config = {
|
||||
// 顶部弹出
|
||||
top:'top',
|
||||
// 底部弹出
|
||||
bottom:'bottom',
|
||||
// 居中弹出
|
||||
center:'center',
|
||||
// 消息提示
|
||||
message:'top',
|
||||
// 对话框
|
||||
dialog:'center',
|
||||
// 分享
|
||||
share:'bottom',
|
||||
}
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
config:config
|
||||
}
|
||||
},
|
||||
mixins: [message],
|
||||
}
|
||||
@@ -1,243 +0,0 @@
|
||||
<template>
|
||||
<view class="uni-popup-dialog">
|
||||
<view class="uni-dialog-title">
|
||||
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text>
|
||||
</view>
|
||||
<view class="uni-dialog-content">
|
||||
<text class="uni-dialog-content-text" v-if="mode === 'base'">{{content}}</text>
|
||||
<input v-else class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus" >
|
||||
</view>
|
||||
<view class="uni-dialog-button-group">
|
||||
<view class="uni-dialog-button" @click="close">
|
||||
<text class="uni-dialog-button-text">取消</text>
|
||||
</view>
|
||||
<view class="uni-dialog-button uni-border-left" @click="onOk">
|
||||
<text class="uni-dialog-button-text uni-button-color">确定</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* PopUp 弹出层-对话框样式
|
||||
* @description 弹出层-对话框样式
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} value input 模式下的默认值
|
||||
* @property {String} placeholder input 模式下输入提示
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} mode = [base|input] 模式、
|
||||
* @value base 基础对话框
|
||||
* @value input 可输入对话框
|
||||
* @property {String} content 对话框内容
|
||||
* @property {Boolean} beforeClose 是否拦截取消事件
|
||||
* @event {Function} confirm 点击确认按钮触发
|
||||
* @event {Function} close 点击取消按钮触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "uniPopupDialog",
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: [String, Number],
|
||||
default: '请输入内容'
|
||||
},
|
||||
/**
|
||||
* 对话框主题 success/warning/info/error 默认 success
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
default: 'error'
|
||||
},
|
||||
/**
|
||||
* 对话框模式 base/input
|
||||
*/
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'base'
|
||||
},
|
||||
/**
|
||||
* 对话框标题
|
||||
*/
|
||||
title: {
|
||||
type: String,
|
||||
default: '提示'
|
||||
},
|
||||
/**
|
||||
* 对话框内容
|
||||
*/
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 拦截取消事件 ,如果拦截取消事件,必须监听close事件,执行 done()
|
||||
*/
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogType: 'error',
|
||||
focus: false,
|
||||
val: ""
|
||||
}
|
||||
},
|
||||
inject: ['popup'],
|
||||
watch: {
|
||||
type(val) {
|
||||
this.dialogType = val
|
||||
},
|
||||
mode(val) {
|
||||
if (val === 'input') {
|
||||
this.dialogType = 'info'
|
||||
}
|
||||
},
|
||||
value(val) {
|
||||
this.val = val
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 对话框遮罩不可点击
|
||||
this.popup.mkclick = false
|
||||
if (this.mode === 'input') {
|
||||
this.dialogType = 'info'
|
||||
this.val = this.value
|
||||
} else {
|
||||
this.dialogType = this.type
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.focus = true
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 点击确认按钮
|
||||
*/
|
||||
onOk() {
|
||||
this.$emit('confirm', () => {
|
||||
this.popup.close()
|
||||
if (this.mode === 'input') this.val = this.value
|
||||
}, this.mode === 'input' ? this.val : '')
|
||||
},
|
||||
/**
|
||||
* 点击取消按钮
|
||||
*/
|
||||
close() {
|
||||
if (this.beforeClose) {
|
||||
this.$emit('close', () => {
|
||||
this.popup.close()
|
||||
})
|
||||
return
|
||||
}
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-popup-dialog {
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-dialog-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.uni-dialog-title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-dialog-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px 15px 15px 15px;
|
||||
}
|
||||
|
||||
.uni-dialog-content-text {
|
||||
font-size: 14px;
|
||||
color: #6e6e6e;
|
||||
}
|
||||
|
||||
.uni-dialog-button-group {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
border-top-color: #f5f5f5;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.uni-border-left {
|
||||
border-left-color: #f0f0f0;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.uni-button-color {
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
|
||||
.uni-dialog-input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
color: $uni-color-success;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
color: $uni-color-warning;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
color: $uni-color-error;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
@@ -1,116 +0,0 @@
|
||||
<template>
|
||||
<view class="uni-popup-message" :class="'uni-popup__'+[type]">
|
||||
<text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* PopUp 弹出层-消息提示
|
||||
* @description 弹出层-消息提示
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} message 消息提示文字
|
||||
* @property {String} duration 显示时间,设置为 0 则不会自动关闭
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'UniPopupMessage',
|
||||
props: {
|
||||
/**
|
||||
* 主题 success/warning/info/error 默认 success
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
default: 'success'
|
||||
},
|
||||
/**
|
||||
* 消息文字
|
||||
*/
|
||||
message: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 显示时间,设置为 0 则不会自动关闭
|
||||
*/
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
}
|
||||
},
|
||||
inject: ['popup'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {
|
||||
this.popup.childrenMsg = this
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
if (this.duration === 0) return
|
||||
clearTimeout(this.popuptimer)
|
||||
this.popuptimer = setTimeout(() => {
|
||||
this.popup.close()
|
||||
}, this.duration)
|
||||
},
|
||||
close() {
|
||||
clearTimeout(this.popuptimer)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uni-popup-message {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
background-color: #e1f3d8;
|
||||
padding: 10px 15px;
|
||||
border-color: #eee;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
.uni-popup-message-text {
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
background-color: #e1f3d8;
|
||||
}
|
||||
|
||||
.uni-popup__success-text {
|
||||
color: #67C23A;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
background-color: #faecd8;
|
||||
}
|
||||
|
||||
.uni-popup__warn-text {
|
||||
color: #E6A23C;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
background-color: #fde2e2;
|
||||
}
|
||||
|
||||
.uni-popup__error-text {
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
background-color: #F2F6FC;
|
||||
}
|
||||
|
||||
.uni-popup__info-text {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
@@ -1,165 +0,0 @@
|
||||
<template>
|
||||
<view class="uni-popup-share">
|
||||
<view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view>
|
||||
<view class="uni-share-content">
|
||||
<view class="uni-share-content-box">
|
||||
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
|
||||
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
|
||||
<text class="uni-share-text">{{item.text}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-share-button-box">
|
||||
<button class="uni-share-button" @click="close">取消</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UniPopupShare',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '分享到'
|
||||
}
|
||||
},
|
||||
inject: ['popup'],
|
||||
data() {
|
||||
return {
|
||||
bottomData: [{
|
||||
text: '微信',
|
||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
|
||||
name: 'wx'
|
||||
},
|
||||
{
|
||||
text: '支付宝',
|
||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
|
||||
name: 'wx'
|
||||
},
|
||||
{
|
||||
text: 'QQ',
|
||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
|
||||
name: 'qq'
|
||||
},
|
||||
{
|
||||
text: '新浪',
|
||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
|
||||
name: 'sina'
|
||||
},
|
||||
{
|
||||
text: '百度',
|
||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
|
||||
name: 'copy'
|
||||
},
|
||||
{
|
||||
text: '其他',
|
||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
|
||||
name: 'more'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
/**
|
||||
* 选择内容
|
||||
*/
|
||||
select(item, index) {
|
||||
this.$emit('select', {
|
||||
item,
|
||||
index
|
||||
}, () => {
|
||||
this.popup.close()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 关闭窗口
|
||||
*/
|
||||
close() {
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uni-popup-share {
|
||||
background-color: #fff;
|
||||
}
|
||||
.uni-share-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
}
|
||||
.uni-share-title-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.uni-share-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.uni-share-content-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.uni-share-content-item {
|
||||
width: 90px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-share-content-item:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.uni-share-image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.uni-share-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #3B4144;
|
||||
}
|
||||
|
||||
.uni-share-button-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.uni-share-button {
|
||||
flex: 1;
|
||||
border-radius: 50px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uni-share-button::after {
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,294 +0,0 @@
|
||||
<template>
|
||||
<view v-if="showPopup" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear">
|
||||
<uni-transition v-if="maskShow" :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans"
|
||||
@click="onTap" />
|
||||
<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
|
||||
<view class="uni-popup__wrapper-box" @click.stop="clear">
|
||||
<slot />
|
||||
</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniTransition from '../uni-transition/uni-transition.vue'
|
||||
import popup from './popup.js'
|
||||
/**
|
||||
* PopUp 弹出层
|
||||
* @description 弹出层组件,为了解决遮罩弹层的问题
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [top|center|bottom] 弹出方式
|
||||
* @value top 顶部弹出
|
||||
* @value center 中间弹出
|
||||
* @value bottom 底部弹出
|
||||
* @value message 消息提示
|
||||
* @value dialog 对话框
|
||||
* @value share 底部分享示例
|
||||
* @property {Boolean} animation = [ture|false] 是否开启动画
|
||||
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
|
||||
* @event {Function} change 打开关闭弹窗触发,e={show: false}
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'UniPopup',
|
||||
components: {
|
||||
uniTransition
|
||||
},
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层
|
||||
// message: 消息提示 ; dialog : 对话框
|
||||
type: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// maskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
popup: this
|
||||
}
|
||||
},
|
||||
mixins: [popup],
|
||||
watch: {
|
||||
/**
|
||||
* 监听type类型
|
||||
*/
|
||||
type: {
|
||||
handler: function(newVal) {
|
||||
this[this.config[newVal]]()
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
/**
|
||||
* 监听遮罩是否可点击
|
||||
* @param {Object} val
|
||||
*/
|
||||
maskClick(val) {
|
||||
this.mkclick = val
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 300,
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
maskClass: {
|
||||
'position': 'fixed',
|
||||
'bottom': 0,
|
||||
'top': 0,
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'backgroundColor': 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
transClass: {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
},
|
||||
maskShow: true,
|
||||
mkclick: true,
|
||||
popupstyle: 'top'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.mkclick = this.maskClick
|
||||
if (this.animation) {
|
||||
this.duration = 300
|
||||
} else {
|
||||
this.duration = 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clear(e) {
|
||||
// TODO nvue 取消冒泡
|
||||
e.stopPropagation()
|
||||
},
|
||||
open() {
|
||||
this.showPopup = true
|
||||
this.$nextTick(() => {
|
||||
new Promise(resolve => {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
this.showTrans = true
|
||||
// fixed by mehaotian 兼容 app 端
|
||||
this.$nextTick(() => {
|
||||
resolve();
|
||||
})
|
||||
}, 50);
|
||||
}).then(res => {
|
||||
// 自定义打开事件
|
||||
clearTimeout(this.msgtimer)
|
||||
this.msgtimer = setTimeout(() => {
|
||||
this.customOpen && this.customOpen()
|
||||
}, 100)
|
||||
this.$emit('change', {
|
||||
show: true,
|
||||
type: this.type
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change', {
|
||||
show: false,
|
||||
type: this.type
|
||||
})
|
||||
clearTimeout(this.timer)
|
||||
// 自定义关闭事件
|
||||
this.customOpen && this.customClose()
|
||||
this.timer = setTimeout(() => {
|
||||
this.showPopup = false
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
onTap() {
|
||||
if (!this.mkclick) return
|
||||
this.close()
|
||||
},
|
||||
/**
|
||||
* 顶部弹出样式处理
|
||||
*/
|
||||
top() {
|
||||
this.popupstyle = 'top'
|
||||
this.ani = ['slide-top']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 底部弹出样式处理
|
||||
*/
|
||||
bottom() {
|
||||
this.popupstyle = 'bottom'
|
||||
this.ani = ['slide-bottom']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'bottom': 0
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 中间弹出样式处理
|
||||
*/
|
||||
center() {
|
||||
this.popupstyle = 'center'
|
||||
this.ani = ['zoom-out', 'fade']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
/* #ifndef APP-NVUE */
|
||||
'display': 'flex',
|
||||
'flexDirection': 'column',
|
||||
/* #endif */
|
||||
'bottom': 0,
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'top': 0,
|
||||
'justifyContent': 'center',
|
||||
'alignItems': 'center'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-popup__mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: $uni-bg-color-mask;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mask-ani {
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.uni-top-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-bottom-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-center-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-popup__wrapper {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.top {
|
||||
/* #ifdef H5 */
|
||||
top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.uni-popup__wrapper-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
/* iphonex 等安全区设置,底部安全区适配 */
|
||||
/* #ifndef APP-NVUE */
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.content-ani {
|
||||
// transition: transform 0.3s;
|
||||
transition-property: transform, opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
|
||||
.uni-top-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.uni-bottom-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.uni-center-content {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -1,135 +0,0 @@
|
||||
<template>
|
||||
<view class="uni-section" nvue>
|
||||
<view v-if="type" class="uni-section__head">
|
||||
<view :class="type" class="uni-section__head-tag" />
|
||||
</view>
|
||||
<view class="uni-section__content">
|
||||
<text :class="{'distraction':!subTitle}" class="uni-section__content-title">{{ title }}</text>
|
||||
<text v-if="subTitle" class="uni-section__content-sub">{{ subTitle }}</text>
|
||||
</view>
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* Section 标题栏
|
||||
* @description 标题栏
|
||||
* @property {String} type = [line|circle] 标题装饰类型
|
||||
* @value line 竖线
|
||||
* @value circle 圆形
|
||||
* @property {String} title 主标题
|
||||
* @property {String} subTitle 副标题
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'UniTitle',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
subTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
watch: {
|
||||
title(newVal) {
|
||||
if (uni.report && newVal !== '') {
|
||||
uni.report('title', newVal)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uni-section {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
margin-top: 10px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
height: 50px;
|
||||
background-color: $uni-bg-color-grey;
|
||||
/* #ifdef APP-NVUE */
|
||||
border-bottom-color: $uni-border-color;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.5px;
|
||||
/* #endif */
|
||||
font-weight: normal;
|
||||
}
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-section:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
content: '';
|
||||
-webkit-transform: scaleY(.5);
|
||||
transform: scaleY(.5);
|
||||
background-color: $uni-border-color;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.uni-section__head {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 15px;
|
||||
background-color: $uni-text-color-disable;
|
||||
border-radius: 5px;
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-top-right-radius: 50px;
|
||||
border-top-left-radius: 50px;
|
||||
border-bottom-left-radius: 50px;
|
||||
border-bottom-right-radius: 50px;
|
||||
background-color: $uni-text-color-disable;
|
||||
}
|
||||
|
||||
.uni-section__content {
|
||||
flex: 1;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.uni-section__content-title {
|
||||
font-size: $uni-font-size-base;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.distraction {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-section__content-sub {
|
||||
font-size: $uni-font-size-sm;
|
||||
color: $uni-text-color-grey;
|
||||
}
|
||||
</style>
|
||||
@@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<view :style="{ height: statusBarHeight }" class="uni-status-bar">
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
|
||||
export default {
|
||||
name: 'UniStatusBar',
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: statusBarHeight
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-status-bar {
|
||||
width: 750rpx;
|
||||
height: 20px;
|
||||
// height: var(--status-bar-height);
|
||||
}
|
||||
</style>
|
||||
@@ -1,253 +0,0 @@
|
||||
<template>
|
||||
<view class="uni-steps">
|
||||
<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
|
||||
<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
|
||||
<view v-for="(item,index) in options" :key="index" :class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
|
||||
<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
|
||||
<text v-if="direction=='column'" :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
|
||||
<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']" v-for="(item,index) in options"
|
||||
:key="index">
|
||||
<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
|
||||
:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"></view>
|
||||
<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']" v-if="index === active">
|
||||
<uni-icons :color="activeColor" type="checkbox-filled" size="14"></uni-icons>
|
||||
</view>
|
||||
<view :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']" v-else :style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
|
||||
<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
|
||||
:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"></view>
|
||||
<!-- <view v-if="index==0 && direction!='column'" class="address">北京市</view>
|
||||
<view v-if="options.length-1 == index && direction!='column'" class="address">太原市</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniIcons from '../uni-icons/uni-icons.vue'
|
||||
export default {
|
||||
name: 'UniSteps',
|
||||
components: {
|
||||
uniIcons
|
||||
},
|
||||
props: {
|
||||
direction: {
|
||||
// 排列方向 row column
|
||||
type: String,
|
||||
default: 'row'
|
||||
},
|
||||
activeColor: {
|
||||
// 激活状态颜色
|
||||
type: String,
|
||||
default: '#1aad19'
|
||||
},
|
||||
deactiveColor: {
|
||||
// 未激活状态颜色
|
||||
type: String,
|
||||
default: '#999999'
|
||||
},
|
||||
active: {
|
||||
// 当前步骤
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
} // 数据
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-steps {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-steps__row {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-steps__column {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.uni-steps__row-text-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-steps__column-text-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-steps__row-text {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-steps__column-text {
|
||||
padding: 6px 0px;
|
||||
// border-bottom-style: solid;
|
||||
// border-bottom-width: 1px;
|
||||
// border-bottom-color: $uni-border-color;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-steps__row-title {
|
||||
font-size: 24rpx;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uni-steps__column-title {
|
||||
font-size: 24rpx;
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.uni-steps__row-desc {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uni-steps__column-desc {
|
||||
font-size: $uni-font-size-sm;
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.uni-steps__row-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-steps__column-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
/* #endif */
|
||||
width: 30px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-steps__row-line-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
.address{
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
left: 60rpx;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-steps__column-line-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uni-steps__row-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background-color: $uni-text-color-grey;
|
||||
}
|
||||
|
||||
.uni-steps__column-line {
|
||||
width: 1px;
|
||||
background-color: $uni-text-color-grey;
|
||||
}
|
||||
|
||||
.uni-steps__row-line--after {
|
||||
transform: translateX(1px);
|
||||
}
|
||||
|
||||
.uni-steps__column-line--after {
|
||||
flex: 1;
|
||||
transform: translate(0px, 1px);
|
||||
}
|
||||
|
||||
.uni-steps__row-line--before {
|
||||
transform: translateX(-1px);
|
||||
}
|
||||
|
||||
.uni-steps__column-line--before {
|
||||
height: 6px;
|
||||
transform: translate(0px, -1px);
|
||||
}
|
||||
|
||||
.uni-steps__row-circle {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 100px;
|
||||
background-color: $uni-text-color-grey;
|
||||
margin: 0px 3px;
|
||||
}
|
||||
|
||||
.uni-steps__column-circle {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 100px;
|
||||
background-color: $uni-text-color-grey;
|
||||
margin: 4px 0px 5px 0px;
|
||||
}
|
||||
|
||||
.uni-steps__row-check {
|
||||
margin: 0px 6px;
|
||||
}
|
||||
|
||||
.uni-steps__column-check {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
margin: 2px 0px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,184 +0,0 @@
|
||||
<template>
|
||||
<view class="uni-swiper__warp">
|
||||
<slot />
|
||||
<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
|
||||
<view v-for="(item,index) in info" :style="{
|
||||
'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/3 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
|
||||
:key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
|
||||
</view>
|
||||
<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
|
||||
<view v-for="(item,index) in info" :style="{
|
||||
'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
|
||||
:key="index" class="uni-swiper__dots-item" />
|
||||
</view>
|
||||
<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
|
||||
<view v-for="(item,index) in info" :class="[index === current&&'uni-swiper__dots-long']" :style="{
|
||||
'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
|
||||
:key="index" class="uni-swiper__dots-item " />
|
||||
</view>
|
||||
<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
|
||||
<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
|
||||
</view>
|
||||
<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
|
||||
<view v-for="(item,index) in info" :style="{
|
||||
'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
|
||||
:key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UniSwiperDot',
|
||||
props: {
|
||||
info: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
current: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
dotsStyles: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 类型 :default(默认) indexes long nav
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
// 只在 nav 模式下生效,变量名称
|
||||
field: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dots: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
bottom: 10,
|
||||
color: '#fff',
|
||||
backgroundColor: 'rgba(0, 0, 0, .3)',
|
||||
border: '1px rgba(0, 0, 0, .3) solid',
|
||||
selectedBackgroundColor: '#333',
|
||||
selectedBorder: '1px rgba(0, 0, 0, .9) solid'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dotsStyles(newVal) {
|
||||
this.dots = Object.assign(this.dots, this.dotsStyles)
|
||||
},
|
||||
mode(newVal) {
|
||||
if (newVal === 'indexes') {
|
||||
this.dots.width = 20
|
||||
this.dots.height = 20
|
||||
} else {
|
||||
this.dots.width = 8
|
||||
this.dots.height = 8
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
if (this.mode === 'indexes') {
|
||||
this.dots.width = 20
|
||||
this.dots.height = 20
|
||||
}
|
||||
this.dots = Object.assign(this.dots, this.dotsStyles)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-swiper__warp {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-box {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-item {
|
||||
width: 8px;
|
||||
border-radius: 100px;
|
||||
margin-left: 6px;
|
||||
background-color: $uni-bg-color-mask;
|
||||
// transition: width 0.2s linear; 不要取消注释,不然会不能变色
|
||||
}
|
||||
|
||||
.uni-swiper__dots-item:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-default {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-long {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-bar {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-nav {
|
||||
bottom: 0px;
|
||||
height: 40px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.uni-swiper__dots-nav-item {
|
||||
/* overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; */
|
||||
font-size: $uni-font-size-base;
|
||||
color: #fff;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-indexes {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
// flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-indexes-text {
|
||||
color: #fff;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
</style>
|
||||
@@ -1,230 +0,0 @@
|
||||
<template>
|
||||
<view :class="[
|
||||
'uni-tag--' + type,
|
||||
disabled === true || disabled === 'true' ? 'uni-tag--disabled' : '',
|
||||
inverted === true || inverted === 'true' ? type + '-uni-tag--inverted' : '',
|
||||
circle === true || circle === 'true' ? 'uni-tag--circle' : '',
|
||||
mark === true || mark === 'true' ? 'uni-tag--mark' : '',
|
||||
'uni-tag--' + size
|
||||
]"
|
||||
@click="onClick()" class="uni-tag" v-if="text">
|
||||
<text :class="[type === 'default' ? 'uni-tag--default':'uni-tag-text',inverted === true || inverted === 'true' ? 'uni-tag-text--'+type : '',size === 'small' ? 'uni-tag-text--small':'' ]">{{ text }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Tag 标签
|
||||
* @description 用于展示1个或多个文字标签,可点击切换选中、不选中的状态
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=35
|
||||
* @property {String} text 标签内容
|
||||
* @property {String} size = [normal|small] 大小尺寸
|
||||
* @value normal 正常
|
||||
* @value small 小尺寸
|
||||
* @property {String} type = [default|primary|success|warning|error|royal] 颜色类型
|
||||
* @value default 灰色
|
||||
* @value primary 蓝色
|
||||
* @value success 绿色
|
||||
* @value warning 黄色
|
||||
* @value error 红色
|
||||
* @value royal 紫色
|
||||
* @property {Boolean} disabled = [true|false] 是否为禁用状态
|
||||
* @property {Boolean} inverted = [true|false] 是否无需背景颜色(空心标签)
|
||||
* @property {Boolean} circle = [true|false] 是否为圆角
|
||||
* @event {Function} click 点击 Tag 触发事件
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "UniTag",
|
||||
props: {
|
||||
type: {
|
||||
// 标签类型default、primary、success、warning、error、royal
|
||||
type: String,
|
||||
default: "default"
|
||||
},
|
||||
size: {
|
||||
// 标签大小 normal, small
|
||||
type: String,
|
||||
default: "normal"
|
||||
},
|
||||
// 标签内容
|
||||
text: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
disabled: {
|
||||
// 是否为禁用状态
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
inverted: {
|
||||
// 是否为空心
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
circle: {
|
||||
// 是否为圆角样式
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
mark: {
|
||||
// 是否为标记样式
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
if (this.disabled === true || this.disabled === "true") {
|
||||
return;
|
||||
}
|
||||
this.$emit("click");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$tag-pd: 0px 16px;
|
||||
$tag-small-pd: 0px 8px;
|
||||
|
||||
.uni-tag {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
padding: $tag-pd;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
justify-content: center;
|
||||
color: $uni-text-color;
|
||||
border-radius: $uni-border-radius-base;
|
||||
background-color: $uni-bg-color-grey;
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: $uni-bg-color-grey;
|
||||
}
|
||||
|
||||
.uni-tag--circle {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.uni-tag--mark {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
}
|
||||
|
||||
.uni-tag--disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.uni-tag--small {
|
||||
height: 20px;
|
||||
padding: $tag-small-pd;
|
||||
line-height: 20px;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
|
||||
.uni-tag--default {
|
||||
color: $uni-text-color;
|
||||
font-size: $uni-font-size-base;
|
||||
}
|
||||
|
||||
.uni-tag-text--small {
|
||||
font-size: $uni-font-size-sm !important;
|
||||
}
|
||||
|
||||
.uni-tag-text {
|
||||
color: $uni-text-color-inverse;
|
||||
font-size: $uni-font-size-base;
|
||||
}
|
||||
|
||||
.uni-tag-text--primary {
|
||||
color: $uni-color-primary !important;
|
||||
}
|
||||
|
||||
.uni-tag-text--success {
|
||||
color: $uni-color-success !important;
|
||||
}
|
||||
|
||||
.uni-tag-text--warning {
|
||||
color: $uni-color-warning !important;
|
||||
}
|
||||
|
||||
.uni-tag-text--error {
|
||||
color: $uni-color-error !important;
|
||||
}
|
||||
|
||||
.uni-tag--primary {
|
||||
color: $uni-text-color-inverse;
|
||||
background-color: $uni-color-primary;
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: $uni-color-primary;
|
||||
}
|
||||
|
||||
.primary-uni-tag--inverted {
|
||||
color: $uni-color-primary;
|
||||
background-color: $uni-bg-color;
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: $uni-color-primary;
|
||||
}
|
||||
|
||||
.uni-tag--success {
|
||||
color: $uni-text-color-inverse;
|
||||
background-color: $uni-color-success;
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: $uni-color-success;
|
||||
}
|
||||
|
||||
.success-uni-tag--inverted {
|
||||
color: $uni-color-success;
|
||||
background-color: $uni-bg-color;
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: $uni-color-success;
|
||||
}
|
||||
|
||||
.uni-tag--warning {
|
||||
color: $uni-text-color-inverse;
|
||||
background-color: $uni-color-warning;
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: $uni-color-warning;
|
||||
}
|
||||
|
||||
.warning-uni-tag--inverted {
|
||||
color: $uni-color-warning;
|
||||
background-color: $uni-bg-color;
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: $uni-color-warning;
|
||||
}
|
||||
|
||||
.uni-tag--error {
|
||||
color: $uni-text-color-inverse;
|
||||
background-color: $uni-color-error;
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: $uni-color-error;
|
||||
}
|
||||
|
||||
.error-uni-tag--inverted {
|
||||
color: $uni-color-error;
|
||||
background-color: $uni-bg-color;
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: $uni-color-error;
|
||||
}
|
||||
|
||||
.uni-tag--inverted {
|
||||
color: $uni-text-color;
|
||||
background-color: $uni-bg-color;
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: $uni-bg-color-grey;
|
||||
}
|
||||
</style>
|
||||
@@ -1,279 +0,0 @@
|
||||
<template>
|
||||
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
|
||||
@click="change">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
// #endif
|
||||
/**
|
||||
* Transition 过渡动画
|
||||
* @description 简单过渡动画组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
|
||||
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
|
||||
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
|
||||
* @value fade 渐隐渐出过渡
|
||||
* @value slide-top 由上至下过渡
|
||||
* @value slide-right 由右至左过渡
|
||||
* @value slide-bottom 由下至上过渡
|
||||
* @value slide-left 由左至右过渡
|
||||
* @value zoom-in 由小到大过渡
|
||||
* @value zoom-out 由大到小过渡
|
||||
* @property {Number} duration 过渡动画持续时间
|
||||
* @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
|
||||
*/
|
||||
export default {
|
||||
name: 'uniTransition',
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modeClass: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
styles: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
transform: '',
|
||||
ani: { in: '',
|
||||
active: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open()
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stylesObject() {
|
||||
let styles = {
|
||||
...this.styles,
|
||||
'transition-duration': this.duration / 1000 + 's'
|
||||
}
|
||||
let transfrom = ''
|
||||
for (let i in styles) {
|
||||
let line = this.toLine(i)
|
||||
transfrom += line + ':' + styles[i] + ';'
|
||||
}
|
||||
return transfrom
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.timer = null
|
||||
// this.nextTick = (time = 50) => new Promise(resolve => {
|
||||
// clearTimeout(this.timer)
|
||||
// this.timer = setTimeout(resolve, time)
|
||||
// return this.timer
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.$emit('click', {
|
||||
detail: this.isShow
|
||||
})
|
||||
},
|
||||
open() {
|
||||
clearTimeout(this.timer)
|
||||
this.isShow = true
|
||||
this.transform = ''
|
||||
this.ani.in = ''
|
||||
for (let i in this.getTranfrom(false)) {
|
||||
if (i === 'opacity') {
|
||||
this.ani.in = 'fade-in'
|
||||
} else {
|
||||
this.transform += `${this.getTranfrom(false)[i]} `
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this._animation(true)
|
||||
}, 50)
|
||||
})
|
||||
|
||||
},
|
||||
close(type) {
|
||||
clearTimeout(this.timer)
|
||||
this._animation(false)
|
||||
},
|
||||
_animation(type) {
|
||||
let styles = this.getTranfrom(type)
|
||||
// #ifdef APP-NVUE
|
||||
if(!this.$refs['ani']) return
|
||||
animation.transition(this.$refs['ani'].ref, {
|
||||
styles,
|
||||
duration: this.duration, //ms
|
||||
timingFunction: 'ease',
|
||||
needLayout: false,
|
||||
delay: 0 //ms
|
||||
}, () => {
|
||||
if (!type) {
|
||||
this.isShow = false
|
||||
}
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.transform = ''
|
||||
for (let i in styles) {
|
||||
if (i === 'opacity') {
|
||||
this.ani.in = `fade-${type?'out':'in'}`
|
||||
} else {
|
||||
this.transform += `${styles[i]} `
|
||||
}
|
||||
}
|
||||
this.timer = setTimeout(() => {
|
||||
if (!type) {
|
||||
this.isShow = false
|
||||
}
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
|
||||
}, this.duration)
|
||||
// #endif
|
||||
|
||||
},
|
||||
getTranfrom(type) {
|
||||
let styles = {
|
||||
transform: ''
|
||||
}
|
||||
this.modeClass.forEach((mode) => {
|
||||
switch (mode) {
|
||||
case 'fade':
|
||||
styles.opacity = type ? 1 : 0
|
||||
break;
|
||||
case 'slide-top':
|
||||
styles.transform += `translateY(${type?'0':'-100%'}) `
|
||||
break;
|
||||
case 'slide-right':
|
||||
styles.transform += `translateX(${type?'0':'100%'}) `
|
||||
break;
|
||||
case 'slide-bottom':
|
||||
styles.transform += `translateY(${type?'0':'100%'}) `
|
||||
break;
|
||||
case 'slide-left':
|
||||
styles.transform += `translateX(${type?'0':'-100%'}) `
|
||||
break;
|
||||
case 'zoom-in':
|
||||
styles.transform += `scale(${type?1:0.8}) `
|
||||
break;
|
||||
case 'zoom-out':
|
||||
styles.transform += `scale(${type?1:1.2}) `
|
||||
break;
|
||||
}
|
||||
})
|
||||
return styles
|
||||
},
|
||||
_modeClassArr(type) {
|
||||
let mode = this.modeClass
|
||||
if (typeof(mode) !== "string") {
|
||||
let modestr = ''
|
||||
mode.forEach((item) => {
|
||||
modestr += (item + '-' + type + ',')
|
||||
})
|
||||
return modestr.substr(0, modestr.length - 1)
|
||||
} else {
|
||||
return mode + '-' + type
|
||||
}
|
||||
},
|
||||
// getEl(el) {
|
||||
// console.log(el || el.ref || null);
|
||||
// return el || el.ref || null
|
||||
// },
|
||||
toLine(name) {
|
||||
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-transition {
|
||||
transition-timing-function: ease;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.slide-top-in {
|
||||
/* transition-property: transform, opacity; */
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.slide-top-active {
|
||||
transform: translateY(0);
|
||||
/* opacity: 1; */
|
||||
}
|
||||
|
||||
.slide-right-in {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-right-active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.slide-bottom-in {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.slide-bottom-active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.slide-left-in {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.slide-left-active {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.zoom-in-in {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.zoom-out-active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.zoom-out-in {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
</style>
|
||||
99
components/uniMap.vue
Normal file
99
components/uniMap.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template></template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { getAddressCode } from '@/api/address'
|
||||
import config from '@/config/config'
|
||||
|
||||
const emit = defineEmits<{
|
||||
callback: [payload: Record<string, any>]
|
||||
close: []
|
||||
}>()
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
function initMap() {
|
||||
uni.chooseLocation({
|
||||
success(res) {
|
||||
posToCity(res.latitude, res.longitude).then((val) => {
|
||||
getAddressCode(
|
||||
val.regeocode.addressComponent.citycode,
|
||||
val.regeocode.addressComponent.township,
|
||||
).then((code) => {
|
||||
emit('callback', { ...val, ...res, ...code })
|
||||
emit('close')
|
||||
})
|
||||
})
|
||||
},
|
||||
fail(e) {
|
||||
console.log(e)
|
||||
emit('close')
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function init() {
|
||||
// #ifdef MP-WEIXIN
|
||||
wechatMap()
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
initMap()
|
||||
// #endif
|
||||
}
|
||||
|
||||
function wechatMap() {
|
||||
uni.authorize({
|
||||
scope: 'scope.userLocation',
|
||||
success() {
|
||||
initMap()
|
||||
},
|
||||
fail() {
|
||||
uni.showModal({
|
||||
content: '检测到您没打开获取地址功能权限,是否去设置打开?',
|
||||
confirmText: '确认',
|
||||
cancelText: '取消',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.openSetting({
|
||||
success: () => {
|
||||
initMap()
|
||||
},
|
||||
})
|
||||
} else {
|
||||
emit('close')
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function posToCity(latitude: number, longitude: number) {
|
||||
return new Promise<any>((resolve, reject) => {
|
||||
uni.request({
|
||||
url: 'https://restapi.amap.com/v3/geocode/regeo',
|
||||
method: 'GET',
|
||||
data: {
|
||||
key: config.aMapKey,
|
||||
location: `${longitude},${latitude}`,
|
||||
},
|
||||
success: ({ data }: any) => {
|
||||
const { status, info } = data
|
||||
if (status === '1') {
|
||||
resolve(data)
|
||||
} else {
|
||||
reject(info)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,227 +1,356 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="!hid" class="flex-row-center" :style="{ top: scHight }" style="width: 750rpx; position: fixed; z-index: 100; left: 0">
|
||||
<view class="flex-column-center" style="background-color: #fcfcfc; padding: 30rpx; border-radius: 10rpx">
|
||||
<movable-area class="flex" style="width: 100%" animation="false" :style="{ height: originalHeight }">
|
||||
<movable-view scale-value="1" animation="false" damping="5000" :x="moveX" :style="{
|
||||
height: sliderHeight,
|
||||
width: sliderWidth,
|
||||
<view
|
||||
v-if="!state.hid"
|
||||
class="flex-row-center"
|
||||
:style="{ top: state.scHight }"
|
||||
style="width: 750rpx; position: fixed; z-index: 100; left: 0; background-color: #ffffff; padding: 40rpx 0"
|
||||
>
|
||||
<view class="flex-column-center">
|
||||
<movable-area
|
||||
class="flex"
|
||||
style="width: 100%"
|
||||
animation="false"
|
||||
:style="{ height: state.originalHeight }"
|
||||
>
|
||||
<movable-view
|
||||
scale-value="1"
|
||||
animation="false"
|
||||
damping="5000"
|
||||
:x="state.moveX"
|
||||
:style="{
|
||||
height: state.sliderHeight,
|
||||
width: state.sliderWidth,
|
||||
'z-index': 101,
|
||||
}" direction="horizontal">
|
||||
<image :src="imgbk" class="image" mode="aspectFit" :style="{
|
||||
height: sliderHeight,
|
||||
width: sliderWidth,
|
||||
'margin-top': imgbKH,
|
||||
}"></image>
|
||||
}"
|
||||
direction="horizontal"
|
||||
>
|
||||
<image
|
||||
:src="state.imgbk"
|
||||
class="image"
|
||||
mode="aspectFit"
|
||||
:style="{
|
||||
height: state.sliderHeight,
|
||||
width: state.sliderWidth,
|
||||
'margin-top': state.imgbKH,
|
||||
}"
|
||||
></image>
|
||||
</movable-view>
|
||||
<image :src="img" mode="aspectFit" :style="{ height: originalHeight, width: originalWidth }" style="border-radius: 10rpx"></image>
|
||||
<image
|
||||
:src="state.img"
|
||||
mode="aspectFit"
|
||||
:style="{ height: state.originalHeight, width: state.originalWidth }"
|
||||
style="border-radius: 24rpx"
|
||||
></image>
|
||||
</movable-area>
|
||||
|
||||
<movable-area class="flex-row-start" style="
|
||||
width: 100%;
|
||||
background-color: #efefef;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-top: 30rpx;
|
||||
">
|
||||
<movable-view scale-value="1" animation="false" damping="50" :x="movePv" class="flex-row-center" style="
|
||||
border-radius: 50%;
|
||||
height: 100rpx;
|
||||
width: 100rpx;
|
||||
background-color: #ffffff;
|
||||
border: 2rpx solid #e3e3e3;
|
||||
margin-top: -13rpx;
|
||||
" direction="horizontal" @change="moveChange" @touchend="end">
|
||||
<view :class="endLoad ? 'cuIcon-right' : 'cuIcon-loading turn-load'" class="loadIcon" style="">
|
||||
</view>
|
||||
</movable-view>
|
||||
|
||||
<text style="padding-left: 140rpx" :style="{ color: col }">{{
|
||||
hasImg
|
||||
<movable-area class="v-track" animation="false">
|
||||
<view class="v-fill" :style="{ width: fillWidth }"></view>
|
||||
<text class="v-track-text" :style="{ color: state.col }">{{
|
||||
state.hasImg
|
||||
}}</text>
|
||||
<movable-view
|
||||
scale-value="1"
|
||||
animation="false"
|
||||
damping="50"
|
||||
:x="state.movePv"
|
||||
class="v-handle"
|
||||
:style="handleStyle"
|
||||
direction="horizontal"
|
||||
@change="moveChange"
|
||||
@touchend="end"
|
||||
>
|
||||
<u-icon
|
||||
color="#ffffff"
|
||||
size="38"
|
||||
v-if="state.endLoad"
|
||||
name="arrow-right"
|
||||
></u-icon>
|
||||
<u-icon color="#ffffff" size="38" v-else name="reload"></u-icon>
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
<view class="flex-row-around padding-top" style="width: 100%">
|
||||
<view @click="hide" class="cuIcon-close" style="font-size: 50rpx; color: #e25915">
|
||||
</view>
|
||||
|
||||
<text class="cu-tag bg-cyan round" @click="getCode">刷新拼图</text>
|
||||
<text class="my-neirong-sm cuIcon-safe" style="color: #c1c1c1">Lili-FRAMEWORK</text>
|
||||
<view class="v-foot">
|
||||
<view class="v-icon-btn" @click="getCode">
|
||||
<u-icon color="#888888" size="32" name="reload"></u-icon>
|
||||
</view>
|
||||
<view class="v-icon-btn" @click="hide">
|
||||
<u-icon color="#888888" size="30" name="close"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="v-mark">
|
||||
<text class="cuIcon-safe v-mark-icon"></text>
|
||||
<text>Lili-FRAMEWORK 安全验证</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from "@/config/api.js";
|
||||
import storage from "@/utils/storage.js";
|
||||
<script setup lang="ts">
|
||||
import { reactive, computed } from 'vue'
|
||||
import { useStore } from '@/store'
|
||||
import api from '@/config/api.js'
|
||||
import storage from '@/utils/storage.js'
|
||||
import uuid from '@/utils/uuid.modified.js'
|
||||
|
||||
const phone = uni.getSystemInfoSync();
|
||||
const l = phone.screenWidth / 750;
|
||||
export default {
|
||||
name: "verification",
|
||||
created() {
|
||||
// 可自行调整
|
||||
this.scHight = phone.screenHeight / 2 - 200 + "px";
|
||||
this.getCode();
|
||||
// 监听是否要重新验证
|
||||
uni.$on("vert", (data) => {
|
||||
this.vsr = data;
|
||||
this.vsrtx = "点击进行验证";
|
||||
this.getCode();
|
||||
});
|
||||
},
|
||||
props: {
|
||||
height: {
|
||||
type: String,
|
||||
default: "80rpx",
|
||||
const emit = defineEmits(['send'])
|
||||
const props = withDefaults(defineProps<{
|
||||
height?: string
|
||||
width?: string
|
||||
left?: string
|
||||
top?: string
|
||||
business?: string
|
||||
apiType?: string
|
||||
}>(), {
|
||||
height: '80rpx',
|
||||
width: '350rpx',
|
||||
left: '180rpx',
|
||||
top: '30rpx',
|
||||
business: 'LOGIN',
|
||||
apiType: 'buyer'
|
||||
})
|
||||
|
||||
const sliderBaseUrl = computed(() => {
|
||||
return props.apiType === 'store' ? api.store : api.buyer
|
||||
})
|
||||
|
||||
const store = useStore()
|
||||
const phone = uni.getSystemInfoSync()
|
||||
const l = phone.screenWidth / 750
|
||||
|
||||
const mainColor = computed(() => store.getters.mainColor)
|
||||
const fillWidth = computed(() => `${state.moveX + 42 * l}px`)
|
||||
const handleStyle = computed(() => {
|
||||
const glow = /^#[0-9a-fA-F]{6}$/.test(mainColor.value)
|
||||
? mainColor.value + '59'
|
||||
: 'rgba(0, 0, 0, 0.18)'
|
||||
return { background: mainColor.value, boxShadow: `0 6rpx 20rpx ${glow}` }
|
||||
})
|
||||
const state = reactive({
|
||||
flage: false,
|
||||
key: '', // key
|
||||
vsrtx: '点击进行验证', // 按钮提示语
|
||||
vsr: false,
|
||||
hid: true,
|
||||
col: '#838383',
|
||||
movePv: 0,
|
||||
hasImg: '拖动滑块已完成拼图',
|
||||
spcode: '',
|
||||
tl: 0,
|
||||
moveCode: 0,
|
||||
// X轴移动距离
|
||||
moveX: 0,
|
||||
// 模版高度
|
||||
originalHeight: '',
|
||||
// 模版宽度
|
||||
originalWidth: '',
|
||||
// 拼图高度
|
||||
sliderHeight: '',
|
||||
// 平涂宽度
|
||||
sliderWidth: '',
|
||||
scHight: 0,
|
||||
// 原图
|
||||
img: '',
|
||||
// 拼图
|
||||
imgbk: '',
|
||||
endLoad: true,
|
||||
imgbKH: ''
|
||||
})
|
||||
|
||||
// 可自行调整
|
||||
state.scHight = phone.screenHeight / 2 - 200 + 'px'
|
||||
getCode()
|
||||
|
||||
function show() {
|
||||
state.hid = false
|
||||
}
|
||||
|
||||
function hide() {
|
||||
if (!state.vsr) {
|
||||
// vsr判断是否验证成功,成功隐藏验证框
|
||||
state.hid = !state.hid
|
||||
}
|
||||
}
|
||||
|
||||
function error() {
|
||||
state.vsr = false
|
||||
state.hid = false
|
||||
state.moveX = 0
|
||||
state.moveCode = 0
|
||||
}
|
||||
|
||||
// 获取验证图片
|
||||
function getCode() {
|
||||
state.col = '#b3afae'
|
||||
state.hasImg = '图片加载中...'
|
||||
if (!storage.getUuid()) {
|
||||
storage.setUuid(uuid.v1())
|
||||
}
|
||||
uni.request({
|
||||
url: sliderBaseUrl.value + '/common/slider/' + props.business,
|
||||
header: {
|
||||
uuid: storage.getUuid()
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "350rpx",
|
||||
success: (res: any) => {
|
||||
state.col = '#838383'
|
||||
state.hasImg = '拖动滑块以完成拼图'
|
||||
const data = res.data.result
|
||||
|
||||
// base64的图片
|
||||
state.img = data.backImage
|
||||
state.imgbk = data.slidingImage
|
||||
// 根据参数动态适应验证图片的高宽
|
||||
state.imgbKH = data.randomY * 1.8 + 'rpx'
|
||||
state.originalHeight = data.originalHeight * 1.8 + 'rpx'
|
||||
state.originalWidth = data.originalWidth * 1.8 + 'rpx'
|
||||
state.sliderHeight = data.sliderHeight * 1.8 + 'rpx'
|
||||
state.sliderWidth = data.sliderWidth * 1.8 + 'rpx'
|
||||
// 适应比率,用来适应滑动距离
|
||||
state.tl = 1 / (1.8 * l)
|
||||
// 无用信息
|
||||
state.spcode = data.capcode
|
||||
// 验证令牌
|
||||
state.key = data.key
|
||||
store.state.verificationKey = data.key
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function end() {
|
||||
state.endLoad = false
|
||||
// 验证拼图位置是否正确
|
||||
uni.request({
|
||||
method: 'POST',
|
||||
url:
|
||||
sliderBaseUrl.value +
|
||||
'/common/slider/' +
|
||||
props.business +
|
||||
'?xPos=' +
|
||||
parseInt(String(state.moveCode * state.tl)),
|
||||
header: {
|
||||
uuid: storage.getUuid()
|
||||
},
|
||||
left: {
|
||||
type: String,
|
||||
default: "180rpx",
|
||||
},
|
||||
top: {
|
||||
type: String,
|
||||
default: "30rpx",
|
||||
},
|
||||
business: {
|
||||
type: String,
|
||||
default: "LOGIN",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flage: false,
|
||||
key: "", //key
|
||||
vsrtx: "点击进行验证", //按钮提示语
|
||||
vsr: false, //
|
||||
hid: true,
|
||||
col: "#838383",
|
||||
movePv: 0,
|
||||
hasImg: "拖动滑块已完成拼图",
|
||||
spcode: "",
|
||||
tl: 0,
|
||||
moveCode: 0,
|
||||
//X轴移动距离
|
||||
moveX: 0,
|
||||
//模版高度
|
||||
originalHeight: "",
|
||||
//模版宽度
|
||||
originalWidth: "",
|
||||
//拼图高度
|
||||
sliderHeight: "",
|
||||
//平涂宽度
|
||||
sliderWidth: "",
|
||||
scHight: 0,
|
||||
//原图
|
||||
img: "",
|
||||
//拼图
|
||||
imgbk: "",
|
||||
endLoad: true,
|
||||
imgbKH: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.hid = false;
|
||||
},
|
||||
hide() {
|
||||
if (!this.vsr) {
|
||||
// vsr判断是否验证成功,成功隐藏验证框
|
||||
this.hid = !this.hid;
|
||||
success: (res: any) => {
|
||||
state.endLoad = true
|
||||
if (res.data.result == false) {
|
||||
res.data.result = false
|
||||
} else {
|
||||
res.data.result = true
|
||||
}
|
||||
|
||||
if (res.data && res.data.result) {
|
||||
// 验证成功后把key发送出去,后端会把验证信息存在缓存里
|
||||
emit('send', state.key)
|
||||
hide()
|
||||
state.vsr = true
|
||||
state.vsrtx = '已通过验证'
|
||||
} else {
|
||||
getCode() // 让滑块回到起始位置
|
||||
if (state.movePv == 1) {
|
||||
state.movePv = 0
|
||||
} else {
|
||||
state.movePv = 1
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取验证图片
|
||||
getCode() {
|
||||
this.col = "#b3afae";
|
||||
this.hasImg = "图片加载中...";
|
||||
uni.request({
|
||||
url: api.common + "/slider/" + this.business,
|
||||
header: {
|
||||
uuid: storage.getUuid(),
|
||||
},
|
||||
success: (res) => {
|
||||
this.col = "#838383";
|
||||
this.hasImg = "拖动滑块以完成拼图";
|
||||
var data = res.data.result;
|
||||
fail: () => {
|
||||
uni.showToast({ title: '连接服务器失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// base64的图片
|
||||
this.img = data.backImage;
|
||||
this.imgbk = data.slidingImage;
|
||||
// 根据参数动态适应验证图片的高宽
|
||||
this.imgbKH = data.randomY * 1.8 + "rpx";
|
||||
this.originalHeight = data.originalHeight * 1.8 + "rpx";
|
||||
this.originalWidth = data.originalWidth * 1.8 + "rpx";
|
||||
this.sliderHeight = data.sliderHeight * 1.8 + "rpx";
|
||||
this.sliderWidth = data.sliderWidth * 1.8 + "rpx";
|
||||
// 适应比率,用来适应滑动距离
|
||||
this.tl = 1 / (1.8 * l);
|
||||
// 无用信息
|
||||
this.spcode = data.capcode;
|
||||
// 验证令牌
|
||||
this.key = data.key;
|
||||
this.$store.state.verificationKey = data.key;
|
||||
},
|
||||
});
|
||||
},
|
||||
end(e) {
|
||||
this.endLoad = false;
|
||||
// 验证拼图位置是否正确
|
||||
uni.request({
|
||||
method: "POST",
|
||||
url:
|
||||
api.common +
|
||||
"/slider/" +
|
||||
this.business +
|
||||
"?xPos=" +
|
||||
parseInt(this.moveCode * this.tl),
|
||||
header: {
|
||||
uuid: storage.getUuid(),
|
||||
},
|
||||
success: (res) => {
|
||||
this.endLoad = true;
|
||||
res.data.result == false
|
||||
? (res.data.result = false)
|
||||
: (res.data.result = true);
|
||||
// 绑定拼图位置
|
||||
function moveChange(e: any) {
|
||||
state.moveX = e.detail.x
|
||||
state.moveCode = e.detail.x
|
||||
}
|
||||
|
||||
if (res.data && res.data.result) {
|
||||
//验证成功后把key发送出去,后端会把验证信息存在缓存里
|
||||
this.$emit("send", this.key);
|
||||
this.hide();
|
||||
this.vsr = true;
|
||||
this.vsrtx = "已通过验证";
|
||||
} else {
|
||||
this.getCode(); // 让滑块回到起始位置
|
||||
if (this.movePv == 1) {
|
||||
this.movePv = 0;
|
||||
} else {
|
||||
this.movePv = 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
fail: (res) => {
|
||||
this.$msg("连接服务器失败");
|
||||
},
|
||||
});
|
||||
},
|
||||
// 绑定拼图位置
|
||||
moveChange(e) {
|
||||
this.moveX = e.detail.x;
|
||||
this.moveCode = e.detail.x;
|
||||
},
|
||||
},
|
||||
};
|
||||
defineExpose({
|
||||
show,
|
||||
hide,
|
||||
error,
|
||||
getCode,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./animation.css";
|
||||
@import "./icon.css";
|
||||
// @import './main.css';
|
||||
|
||||
.v-track {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
margin-top: 36rpx;
|
||||
background-color: #f7f7f8;
|
||||
border-radius: 42rpx;
|
||||
}
|
||||
|
||||
.v-fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #ffe9e5;
|
||||
border-radius: 42rpx;
|
||||
}
|
||||
|
||||
.v-track-text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
line-height: 84rpx;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.v-handle {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.v-foot {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.v-icon-btn {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #f4f4f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.v-mark {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 32rpx;
|
||||
font-size: 22rpx;
|
||||
color: #d2d2d2;
|
||||
}
|
||||
|
||||
.v-mark-icon {
|
||||
margin-right: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #d9d9d9;
|
||||
}
|
||||
.dh-wt {
|
||||
animation: at 1.1s ease;
|
||||
animation-iteration-count: infinite;
|
||||
@@ -249,10 +378,6 @@ export default {
|
||||
.border-index {
|
||||
border: 1rpx solid $main-color;
|
||||
}
|
||||
.loadIcon {
|
||||
color: $main-color;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
@@ -311,30 +436,6 @@ export default {
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.border-bom {
|
||||
border-bottom: 0.5rpx solid #dddddd;
|
||||
}
|
||||
|
||||
.border-red {
|
||||
border-bottom: 1rpx solid #d33e18;
|
||||
}
|
||||
|
||||
.border-bom-big {
|
||||
border-bottom: 8rpx solid #dddddd;
|
||||
}
|
||||
|
||||
.border-bom-white {
|
||||
border-bottom: 2rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.border-bom-green {
|
||||
border-bottom: 4rpx solid #f8f9bd;
|
||||
}
|
||||
|
||||
.border-bom-index {
|
||||
border-bottom: 4rpx solid #27d9b3;
|
||||
}
|
||||
|
||||
.padding-left {
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
@@ -472,16 +573,10 @@ export default {
|
||||
bottom: 70rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.moneycolor {
|
||||
color: #ea5002;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.margin-top {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
@@ -498,14 +593,10 @@ export default {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.margin-right {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.main-color {
|
||||
color: #07d188;
|
||||
}
|
||||
|
||||
317
components/verify-code/verify-code.vue
Normal file
317
components/verify-code/verify-code.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<view class="xt__verify-code">
|
||||
<!-- 输入框 -->
|
||||
<input
|
||||
ref="codeInput"
|
||||
id="xt__input"
|
||||
:value="code"
|
||||
class="xt__input"
|
||||
:focus="focused"
|
||||
:password="isPassword"
|
||||
:type="inputType"
|
||||
:maxlength="size"
|
||||
@input="handleInput"
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
/>
|
||||
|
||||
<!-- 光标 -->
|
||||
<view
|
||||
id="xt__cursor"
|
||||
v-if="cursorVisible && type !== 'middle'"
|
||||
class="xt__cursor"
|
||||
:style="{ left: codeCursorLeft[code.length] + 'px', height: cursorHeight + 'px', backgroundColor: cursorColor }"
|
||||
></view>
|
||||
|
||||
<!-- 输入框 - 组 -->
|
||||
<view id="xt__input-ground" class="xt__input-ground" @click="focusInput">
|
||||
<template v-for="(item, index) in size" :key="index">
|
||||
<view
|
||||
:style="{ borderColor: code.length === index && cursorVisible ? boxActiveColor : boxNormalColor }"
|
||||
:class="['xt__box', `xt__box-${type + ''}`, `xt__box::after`]"
|
||||
>
|
||||
<view :style="{ borderColor: boxActiveColor }" class="xt__middle-line" v-if="type === 'middle' && !code[index]"></view>
|
||||
<text class="xt__code-text">{{ codeFormat(code[index], isPassword) }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* @description 输入验证码组件
|
||||
* @property {string} type = [box|middle|bottom] - 显示类型 默认:box -eg:bottom
|
||||
* @property {string} inputType = [text|number] - 输入框类型 默认:number -eg:number
|
||||
* @property {number} size = [4|6] - 支持的验证码数量 默认:6 -eg:6
|
||||
* @property {boolean} isFocus - 是否立即聚焦 默认:true
|
||||
* @property {boolean} isPassword - 是否以密码形式显示 默认false -eg:false
|
||||
* @property {string} cursorColor - 光标颜色 默认:#cccccc
|
||||
* @property {string} boxNormalColor - 光标未聚焦到的框的颜色 默认:#cccccc
|
||||
* @property {string} boxActiveColor - 光标聚焦到的框的颜色 默认:#000000
|
||||
* @event {Function(data)} confirm - 输入完成
|
||||
*/
|
||||
import { ref, watch, onMounted, nextTick, getCurrentInstance } from 'vue'
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'input', 'confirm'])
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue?: string
|
||||
value?: string
|
||||
type?: string
|
||||
inputType?: string
|
||||
size?: number
|
||||
isFocus?: boolean
|
||||
isPassword?: boolean
|
||||
cursorColor?: string
|
||||
boxNormalColor?: string
|
||||
boxActiveColor?: string
|
||||
}>(), {
|
||||
modelValue: '',
|
||||
value: '',
|
||||
type: 'box',
|
||||
inputType: 'number',
|
||||
size: 6,
|
||||
isFocus: true,
|
||||
isPassword: false,
|
||||
cursorColor: '#cccccc',
|
||||
boxNormalColor: '#cccccc',
|
||||
boxActiveColor: '#000000'
|
||||
})
|
||||
|
||||
const instance = getCurrentInstance()
|
||||
const codeInput = ref<any>(null)
|
||||
const focused = ref(false)
|
||||
const cursorVisible = ref(false)
|
||||
const cursorHeight = ref(35)
|
||||
const code = ref('') // 输入的验证码
|
||||
const codeCursorLeft = ref<number[]>([]) // 向左移动的距离数组
|
||||
|
||||
// 初始化
|
||||
watch([() => props.modelValue, () => props.value], ([modelVal, val]) => {
|
||||
code.value = modelVal || val || ''
|
||||
}, { immediate: true })
|
||||
|
||||
onMounted(() => {
|
||||
focused.value = props.isFocus
|
||||
cursorVisible.value = props.isFocus
|
||||
init()
|
||||
if (props.isFocus) {
|
||||
nextTick(() => {
|
||||
focusInput()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
function focusInput() {
|
||||
focused.value = false
|
||||
nextTick(() => {
|
||||
focused.value = true
|
||||
// #ifdef H5
|
||||
const inputEl = codeInput.value
|
||||
if (inputEl && typeof inputEl.focus === 'function') {
|
||||
inputEl.focus()
|
||||
}
|
||||
// #endif
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 初始化
|
||||
*/
|
||||
function init() {
|
||||
getCodeCursorLeft()
|
||||
setCursorHeight()
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取元素节点
|
||||
* @param {string} elm - 节点的id、class 相当于 document.querySelect的参数 -eg: #id
|
||||
* @param {string} type = [single|array] - 单个元素获取多个元素 默认是单个元素
|
||||
* @param {Function} callback - 回调函数
|
||||
*/
|
||||
function getElement(elm: string, type: string = 'single', callback: Function) {
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.in(instance?.proxy)
|
||||
[type === 'array' ? 'selectAll' : 'select'](elm)
|
||||
.boundingClientRect()
|
||||
.exec((data: any) => {
|
||||
callback(data[0])
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 计算光标的高度
|
||||
*/
|
||||
function setCursorHeight() {
|
||||
getElement('.xt__box', 'single', (boxElm: any) => {
|
||||
cursorHeight.value = boxElm.height * 0.6
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取光标在每一个box的left位置
|
||||
*/
|
||||
function getCodeCursorLeft() {
|
||||
// 获取父级框的位置信息
|
||||
getElement('#xt__input-ground', 'single', (parentElm: any) => {
|
||||
const parentLeft = parentElm.left
|
||||
// 获取各个box信息
|
||||
getElement('.xt__box', 'array', (elms: any) => {
|
||||
codeCursorLeft.value = []
|
||||
elms.forEach((elm: any) => {
|
||||
codeCursorLeft.value.push(elm.left - parentLeft + elm.width / 2)
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 输入框输入变化的回调
|
||||
function handleInput(e: any) {
|
||||
const inputValue = e?.detail?.value ?? e?.target?.value ?? ''
|
||||
const value = String(inputValue).replace(/\D/g, '').slice(0, props.size)
|
||||
code.value = value
|
||||
cursorVisible.value = value.length !== props.size
|
||||
emit('update:modelValue', value)
|
||||
emit('input', value)
|
||||
inputSuccess(value)
|
||||
}
|
||||
|
||||
// 输入完成回调
|
||||
function inputSuccess(value: string) {
|
||||
if (value.length === props.size) {
|
||||
emit('confirm', value)
|
||||
}
|
||||
}
|
||||
|
||||
// 输入聚焦
|
||||
function inputFocus() {
|
||||
cursorVisible.value = code.value.length !== props.size
|
||||
}
|
||||
|
||||
// 输入失去焦点
|
||||
function inputBlur() {
|
||||
cursorVisible.value = false
|
||||
}
|
||||
|
||||
function codeFormat(val: string | undefined, isPassword: boolean): string {
|
||||
let value = ''
|
||||
if (val) {
|
||||
value = isPassword ? '*' : val
|
||||
}
|
||||
return value
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.xt__verify-code {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.xt__input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.xt__cursor {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
animation-name: cursor;
|
||||
animation-duration: 0.8s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.xt__input-ground {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.xt__box {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 76rpx;
|
||||
height: 112rpx;
|
||||
pointer-events: none;
|
||||
&-bottom {
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
&-box {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&-middle {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.xt__middle-line {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
.xt__code-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
color: #333;
|
||||
font-size: 52rpx;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* #ifdef APP-PLUS */
|
||||
/*
|
||||
* App 的原生 input 如果覆盖在验证码格上,部分 Android 设备会出现
|
||||
* 原生光标/输入绘制层与自绘数字冲突。沿用 u-code-input 的隐藏输入方式,
|
||||
* 将输入内容和原生光标移出可视区域,验证码格只负责展示响应式状态。
|
||||
*/
|
||||
.xt__verify-code {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.xt__input {
|
||||
left: -750rpx;
|
||||
width: 1500rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.xt__input-ground {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.xt__cursor {
|
||||
z-index: 3;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
@keyframes cursor {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,33 +1,41 @@
|
||||
/**
|
||||
* base : 基础业务API
|
||||
* buyer : 买家API
|
||||
*/
|
||||
// 开发环境
|
||||
const dev = {
|
||||
common: "https://common-api.pickmall.cn",
|
||||
buyer: "https://buyer-api.pickmall.cn",
|
||||
};
|
||||
// 生产环境
|
||||
const prod = {
|
||||
common: "https://common-api.pickmall.cn",
|
||||
buyer: "https://buyer-api.pickmall.cn",
|
||||
};
|
||||
|
||||
//默认生产环境
|
||||
let api = dev;
|
||||
//如果是开发环境
|
||||
if (process.env.NODE_ENV == "development") {
|
||||
api = dev;
|
||||
} else {
|
||||
api = prod;
|
||||
}
|
||||
//微信小程序,app的打包方式建议为生产环境,所以这块直接条件编译赋值
|
||||
// #ifdef MP-WEIXIN || APP-PLUS
|
||||
api = prod;
|
||||
// #endif
|
||||
|
||||
api.buyer += "/buyer";
|
||||
api.common += "/common";
|
||||
export default {
|
||||
...api,
|
||||
};
|
||||
/**
|
||||
* buyer : 买家 API(baseURL 为 buyer + /buyer)
|
||||
* store : 商家 API(baseURL 为 store + /store)
|
||||
*/
|
||||
// 开发环境
|
||||
const dev = {
|
||||
buyer: "https://buyer-api.pickmall.cn",
|
||||
store: "https://admin-api.pickmall.cn",
|
||||
im: "https://im-api.pickmall.cn",
|
||||
mqtt: "wss://lilishop-mqtt-pull.dllll.xyz/mqtt",
|
||||
};
|
||||
// 生产环境
|
||||
const prod = {
|
||||
buyer: "https://buyer-api.pickmall.cn",
|
||||
store: "https://admin-api.pickmall.cn",
|
||||
im: "https://im-api.pickmall.cn",
|
||||
mqtt: "wss://lilishop-mqtt-pull.dllll.xyz/mqtt",
|
||||
};
|
||||
|
||||
let api = dev;
|
||||
if (process.env.NODE_ENV == "development") {
|
||||
api = dev;
|
||||
} else {
|
||||
api = prod;
|
||||
}
|
||||
// 微信小程序、App 打包使用生产环境配置
|
||||
// #ifdef MP-WEIXIN || APP-PLUS
|
||||
api = prod;
|
||||
// #endif
|
||||
|
||||
const buyerHost = api.buyer;
|
||||
const storeHost = api.store;
|
||||
api.buyer = buyerHost + "/buyer";
|
||||
api.store = storeHost + "/store";
|
||||
api.im = api.im + "/im";
|
||||
|
||||
export default {
|
||||
...api,
|
||||
buyerHost,
|
||||
storeHost,
|
||||
};
|
||||
|
||||
@@ -1,13 +1,27 @@
|
||||
const name = "lilishop";
|
||||
const name = "lilishop"; //全局商城name
|
||||
const schemeName = "lilishop"; //唤醒app需要的schemeName
|
||||
export default {
|
||||
name: name,
|
||||
schemeLink: `${name}://`, //唤起app地址
|
||||
schemeLink: `${schemeName}://`, //唤起app地址
|
||||
downloadLink: "https://pickmall.cn/download-page/index.html", //下载地址,下载app的地址
|
||||
shareLink: "https://m-b2b2c.pickmall.cn", //分享地址,也就是在h5中默认的复制地址
|
||||
appid: "wx6f10f29075dc1b0b", //小程序唯一凭证,即 AppID,可在「微信公众平台 - 设置 - 开发设置」页中获得。(需要已经成为开发者,且帐号没有异常状态)
|
||||
appSecret: "6dfbe0c72380dce5d49d65b3c91059b1", //可在 manifest.json 查看
|
||||
aMapKey: "d649892b3937a5ad20b76dacb2bcb5bd", //在高德中申请web端key
|
||||
scanAuthNavigation:['https://m-b2b2c.pickmall.cn/'], //扫码认证跳转域名配置 会根据此处配置的路由进行跳转
|
||||
iosAppId:"id1564638363", //AppStore的应用地址id 具体在分享->拷贝链接中查看
|
||||
logo:"https://lilishop-oss.oss-cn-beijing.aliyuncs.com/4c864e133c2944efad1f7282ac8a3b9e.png" //logo地址
|
||||
};
|
||||
aMapKey: "1f78544934b66c9fbc0104117f663973", //在高德中申请Web服务key
|
||||
scanAuthNavigation: ["https://m-b2b2c.pickmall.cn/"], //扫码认证跳转域名配置 会根据此处配置的路由进行跳转
|
||||
iosAppId: "id1564638363", //AppStore的应用地址id 具体在分享->拷贝链接中查看
|
||||
logo: "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/4c864e133c2944efad1f7282ac8a3b9e.png", //logo地址
|
||||
customerServiceMobile: "13161366885", //客服电话
|
||||
customerServiceEmail: "lili@lili.com", //客服邮箱
|
||||
imWebSrc: "https://im.pickmall.cn", //IM地址
|
||||
baseWsUrl: "wss://im-api.pickmall.cn/lili/webSocket", // IM WS 地址
|
||||
enableGetClipboard: false, //是否启用粘贴板获取 scanAuthNavigation 中的链接,如果匹配则会跳转到对应页面
|
||||
enableMiniBarStartUpApp: false, //是否在h5中右侧浮空按钮点击启动app
|
||||
/**
|
||||
* 如需更换主题请修改此处以及uni.scss中的全局颜色
|
||||
*/
|
||||
mainColor: "#ff3c2a", // 主题色
|
||||
lightColor: "#ff6b35", // 高亮主题色
|
||||
aiderLightColor: "#ff9f28", // 辅助高亮颜色
|
||||
defaultUserPhoto: "/static/missing-face.png", // 默认用户头像
|
||||
enableFetchMobileLogin: false // 是否启用获取手机号登录 如果微信小程序提示封禁手机号获取权限 可将此选项设置成false作为备用登录方案
|
||||
};
|
||||
|
||||
23
index.html
Normal file
23
index.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
|
||||
/>
|
||||
<title></title>
|
||||
<!-- H5 构建会把 process.env 替换成空对象,但运行时仍会读取 process,浏览器中不存在该变量 -->
|
||||
<script>
|
||||
if (typeof process === "undefined") {
|
||||
window.process = { env: {} };
|
||||
}
|
||||
</script>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,8 +1,106 @@
|
||||
/**
|
||||
* 微信小程序支付
|
||||
* 此处针对于微信小程序开发的支付插件
|
||||
* 第一次支付成功后会跳出订阅的消息 如果用户拒绝或同意都会跳转到支付成功页面
|
||||
*
|
||||
* @param {sn,price,orderPromotionType}
|
||||
*/
|
||||
|
||||
import { getWeChatMpMessage } from "@/api/message.js";
|
||||
import { initiatePay } from "@/api/trade";
|
||||
|
||||
const SCENE_NAME_MAP = {
|
||||
ORDER_DELIVER: ["订单发货提醒", "订单发货通知"],
|
||||
ORDER_COMPLETE: ["订单已完成提醒", "订单完成通知"],
|
||||
PINTUAN_SUCCESS: ["拼团成功通知"],
|
||||
AFTER_SALE_AUDIT: ["售后申请审核通知", "售后审核通知"],
|
||||
POINT_CHANGE: ["积分变更提醒", "积分变更通知"],
|
||||
WALLET_CHANGE: ["账户余额变动通知", "余额账户变更通知"],
|
||||
WALLET_WITHDRAWAL_AUDIT_ERROR: ["提现结果通知", "提现申请审核通知"],
|
||||
};
|
||||
|
||||
let cachedMpMessageList = null;
|
||||
|
||||
export function prefetchMpMessageTemplates() {
|
||||
return getWeChatMpMessage()
|
||||
.then((res) => {
|
||||
if (res && res.data && Array.isArray(res.data.result)) {
|
||||
cachedMpMessageList = res.data.result;
|
||||
}
|
||||
return cachedMpMessageList || [];
|
||||
})
|
||||
.catch(() => cachedMpMessageList || []);
|
||||
}
|
||||
|
||||
function extractTmplIdsByScenes(list, targetScenes) {
|
||||
const tmplIds = [];
|
||||
(targetScenes || []).forEach((scene) => {
|
||||
const aliasNames = SCENE_NAME_MAP[scene] || [];
|
||||
const matched = (list || []).find(
|
||||
(item) =>
|
||||
item &&
|
||||
item.enable !== false &&
|
||||
item.code &&
|
||||
(item.sceneCode === scene || aliasNames.includes(item.name))
|
||||
);
|
||||
if (matched && matched.code && !tmplIds.includes(matched.code)) {
|
||||
tmplIds.push(matched.code);
|
||||
}
|
||||
});
|
||||
return tmplIds.slice(0, 3);
|
||||
}
|
||||
|
||||
export function subscribeMpMessageByScenes(sceneCodes, onComplete) {
|
||||
const done = typeof onComplete === "function" ? onComplete : () => {};
|
||||
const targetScenes = Array.isArray(sceneCodes) ? sceneCodes : [];
|
||||
if (!targetScenes.length) {
|
||||
done();
|
||||
return;
|
||||
}
|
||||
if (Array.isArray(cachedMpMessageList) && cachedMpMessageList.length) {
|
||||
const finalTmplIds = extractTmplIdsByScenes(cachedMpMessageList, targetScenes);
|
||||
if (!finalTmplIds.length) {
|
||||
done();
|
||||
return;
|
||||
}
|
||||
console.log("[微信订阅消息] 请求订阅 tmplIds:", finalTmplIds);
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: finalTmplIds,
|
||||
complete: (res) => {
|
||||
console.log("[微信订阅消息] 授权返回结果:", res);
|
||||
done();
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
prefetchMpMessageTemplates()
|
||||
.then((list) => {
|
||||
const finalTmplIds = extractTmplIdsByScenes(list, targetScenes);
|
||||
if (!finalTmplIds.length) {
|
||||
done();
|
||||
return;
|
||||
}
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: finalTmplIds,
|
||||
complete: () => done(),
|
||||
});
|
||||
})
|
||||
.catch(() => done());
|
||||
}
|
||||
|
||||
export function subscribePayMessageThen(onComplete, options = {}) {
|
||||
const isPintuan =
|
||||
options &&
|
||||
String(options.orderPromotionType || "").toUpperCase() === "PINTUAN";
|
||||
const scenes = isPintuan
|
||||
? ["ORDER_DELIVER", "ORDER_COMPLETE", "PINTUAN_SUCCESS"]
|
||||
: ["ORDER_DELIVER", "ORDER_COMPLETE"];
|
||||
subscribeMpMessageByScenes(scenes, onComplete);
|
||||
}
|
||||
|
||||
class LiLiWXPay {
|
||||
constructor(...payList) {
|
||||
this.data = payList[0];
|
||||
// 调用支付
|
||||
this.pay = () => {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
@@ -15,7 +113,6 @@ class LiLiWXPay {
|
||||
};
|
||||
const paymentMethod = "WECHAT";
|
||||
const paymentClient = "MP";
|
||||
// 调用支付
|
||||
initiatePay(paymentMethod, paymentClient, submitData).then((res) => {
|
||||
let response = res.data.result;
|
||||
uni.hideLoading();
|
||||
@@ -27,22 +124,25 @@ class LiLiWXPay {
|
||||
package: response.package,
|
||||
signType: response.signType,
|
||||
paySign: response.paySign,
|
||||
success: (e) => {
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
// 之后成功后跳转到支付成功页面
|
||||
uni.redirectTo({
|
||||
url:
|
||||
"/pages/cart/payment/success?paymentMethod=WECHAT" +
|
||||
"&payPrice=" +
|
||||
this.data.price,
|
||||
});
|
||||
subscribePayMessageThen(
|
||||
() => {
|
||||
uni.redirectTo({
|
||||
url:
|
||||
"/pages/cart/payment/success?paymentMethod=WECHAT" +
|
||||
"&payPrice=" +
|
||||
payList[0].price,
|
||||
});
|
||||
},
|
||||
{ orderPromotionType: this.data.orderPromotionType }
|
||||
);
|
||||
},
|
||||
fail: (e) => {
|
||||
this.exception = e;
|
||||
// 支付异常或支付失败之后跳转到订单页面
|
||||
uni.showModal({
|
||||
content: "支付失败,如果您已支付,请勿反复支付",
|
||||
showCancel: false,
|
||||
|
||||
76
js_sdk/t-jwt/jwt.js
Normal file
76
js_sdk/t-jwt/jwt.js
Normal file
@@ -0,0 +1,76 @@
|
||||
"use strict";
|
||||
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
|
||||
var b64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/;
|
||||
export function weBtoa(string) {
|
||||
string = String(string);
|
||||
var bitmap, a, b, c, result = "", i = 0, rest = string.length % 3;
|
||||
for (; i < string.length;) {
|
||||
if ((a = string.charCodeAt(i++)) > 255 ||
|
||||
(b = string.charCodeAt(i++)) > 255 ||
|
||||
(c = string.charCodeAt(i++)) > 255)
|
||||
throw new TypeError("Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.");
|
||||
bitmap = (a << 16) | (b << 8) | c;
|
||||
result += b64.charAt(bitmap >> 18 & 63) + b64.charAt(bitmap >> 12 & 63) +
|
||||
b64.charAt(bitmap >> 6 & 63) + b64.charAt(bitmap & 63);
|
||||
}
|
||||
return rest ? result.slice(0, rest - 3) + "===".substring(rest) : result;
|
||||
}
|
||||
export function weAtob(string) {
|
||||
string = String(string).replace(/[\t\n\f\r ]+/g, "");
|
||||
if (!b64re.test(string))
|
||||
throw new TypeError("Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.");
|
||||
string += "==".slice(2 - (string.length & 3));
|
||||
var bitmap, result = "", r1, r2, i = 0;
|
||||
for (; i < string.length;) {
|
||||
bitmap = b64.indexOf(string.charAt(i++)) << 18 | b64.indexOf(string.charAt(i++)) << 12 |
|
||||
(r1 = b64.indexOf(string.charAt(i++))) << 6 | (r2 = b64.indexOf(string.charAt(i++)));
|
||||
result += r1 === 64 ? String.fromCharCode(bitmap >> 16 & 255) :
|
||||
r2 === 64 ? String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255) :
|
||||
String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255, bitmap & 255);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
function b64DecodeUnicode(str) {
|
||||
return decodeURIComponent(weAtob(str).replace(/(.)/g, function (p) {
|
||||
var code = p.charCodeAt(0).toString(16).toUpperCase();
|
||||
if (code.length < 2) {
|
||||
code = "0" + code;
|
||||
}
|
||||
return "%" + code;
|
||||
}));
|
||||
}
|
||||
function base64_url_decode(str) {
|
||||
var output = str.replace(/-/g, "+").replace(/_/g, "/");
|
||||
switch (output.length % 4) {
|
||||
case 0:
|
||||
break;
|
||||
case 2:
|
||||
output += "==";
|
||||
break;
|
||||
case 3:
|
||||
output += "=";
|
||||
break;
|
||||
default:
|
||||
throw "Illegal base64url string!";
|
||||
}
|
||||
try {
|
||||
return b64DecodeUnicode(output);
|
||||
}
|
||||
catch (err) {
|
||||
return weAtob(output);
|
||||
}
|
||||
}
|
||||
function weappJwtDecode(token, options) {
|
||||
if (typeof token !== "string") {
|
||||
throw ("Invalid token specified");
|
||||
}
|
||||
options = options || {};
|
||||
var pos = options.header === true ? 0 : 1;
|
||||
try {
|
||||
return JSON.parse(base64_url_decode(token.split(".")[pos]));
|
||||
}
|
||||
catch (e) {
|
||||
throw ("Invalid token specified: " + e.message);
|
||||
}
|
||||
}
|
||||
export default weappJwtDecode;
|
||||
@@ -1,5 +1,20 @@
|
||||
var _a;
|
||||
export const PLATFORM = typeof process !== 'undefined' ? (_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.VUE_APP_PLATFORM : undefined;
|
||||
function detectPlatform() {
|
||||
if (typeof process !== 'undefined' && (_a = process === null || process === void 0 ? void 0 : process.env) !== null && _a !== void 0 && _a.VUE_APP_PLATFORM) {
|
||||
return process.env.VUE_APP_PLATFORM;
|
||||
}
|
||||
if (typeof wx !== 'undefined' && typeof wx.getSystemInfoSync === 'function') {
|
||||
return 'mp-weixin';
|
||||
}
|
||||
if (typeof uni !== 'undefined' && typeof uni.getSystemInfoSync === 'function') {
|
||||
const info = uni.getSystemInfoSync();
|
||||
if (info && info.uniPlatform === 'mp-weixin') {
|
||||
return 'mp-weixin';
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
export const PLATFORM = detectPlatform();
|
||||
/** 全局对象 */
|
||||
const _uni = (function () {
|
||||
if (typeof uni != "undefined")
|
||||
|
||||
@@ -37,7 +37,9 @@ export const handleBuildOpts = (options) => {
|
||||
}
|
||||
const oldSelector = defaultOpts.selector;
|
||||
if (PLATFORM === 'mp-weixin' && defaultOpts.type2d) {
|
||||
defaultOpts.selector = '#' + defaultOpts.selector;
|
||||
defaultOpts.selector = oldSelector.startsWith('#')
|
||||
? oldSelector
|
||||
: '#' + oldSelector;
|
||||
}
|
||||
if (!PLATFORM) {
|
||||
console.error('注意! draw-poster未开启uni条件编译! 当环境是微信小程序将不会动态切换为type2d模式');
|
||||
|
||||
@@ -265,7 +265,7 @@ function checkSystemEnableLocation() {
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
export default {
|
||||
judgeIosPermission: judgeIosPermission,
|
||||
requestAndroidPermission: requestAndroidPermission,
|
||||
checkSystemEnableLocation: checkSystemEnableLocation,
|
||||
|
||||
@@ -1,274 +0,0 @@
|
||||
/**
|
||||
* 本模块封装了Android、iOS的应用权限判断、打开应用权限设置界面、以及位置系统服务是否开启
|
||||
*/
|
||||
|
||||
var isIos;
|
||||
// #ifdef APP-PLUS
|
||||
isIos = plus.os.name == "iOS";
|
||||
// #endif
|
||||
|
||||
// 判断推送权限是否开启
|
||||
function judgeIosPermissionPush() {
|
||||
var result = false;
|
||||
var UIApplication = plus.ios.import("UIApplication");
|
||||
var app = UIApplication.sharedApplication();
|
||||
var enabledTypes = 0;
|
||||
if (app.currentUserNotificationSettings) {
|
||||
var settings = app.currentUserNotificationSettings();
|
||||
enabledTypes = settings.plusGetAttribute("types");
|
||||
console.log("enabledTypes1:" + enabledTypes);
|
||||
if (enabledTypes == 0) {
|
||||
console.log("推送权限没有开启");
|
||||
} else {
|
||||
result = true;
|
||||
console.log("已经开启推送功能!");
|
||||
}
|
||||
plus.ios.deleteObject(settings);
|
||||
} else {
|
||||
enabledTypes = app.enabledRemoteNotificationTypes();
|
||||
if (enabledTypes == 0) {
|
||||
console.log("推送权限没有开启!");
|
||||
} else {
|
||||
result = true;
|
||||
console.log("已经开启推送功能!");
|
||||
}
|
||||
console.log("enabledTypes2:" + enabledTypes);
|
||||
}
|
||||
plus.ios.deleteObject(app);
|
||||
plus.ios.deleteObject(UIApplication);
|
||||
return result;
|
||||
}
|
||||
|
||||
// 判断定位权限是否开启
|
||||
function judgeIosPermissionLocation() {
|
||||
var result = false;
|
||||
var cllocationManger = plus.ios.import("CLLocationManager");
|
||||
var status = cllocationManger.authorizationStatus();
|
||||
result = status != 2;
|
||||
console.log("定位权限开启:" + result);
|
||||
// 以下代码判断了手机设备的定位是否关闭,推荐另行使用方法 checkSystemEnableLocation
|
||||
var enable = cllocationManger.locationServicesEnabled();
|
||||
var status = cllocationManger.authorizationStatus();
|
||||
console.log("enable:" + enable);
|
||||
console.log("status:" + status);
|
||||
if (enable && status != 2) {
|
||||
result = true;
|
||||
console.log("手机定位服务已开启且已授予定位权限");
|
||||
} else {
|
||||
console.log("手机系统的定位没有打开或未给予定位权限");
|
||||
}
|
||||
plus.ios.deleteObject(cllocationManger);
|
||||
return result;
|
||||
}
|
||||
|
||||
// 判断麦克风权限是否开启
|
||||
function judgeIosPermissionRecord() {
|
||||
var result = false;
|
||||
var avaudiosession = plus.ios.import("AVAudioSession");
|
||||
var avaudio = avaudiosession.sharedInstance();
|
||||
var permissionStatus = avaudio.recordPermission();
|
||||
console.log("permissionStatus:" + permissionStatus);
|
||||
if (permissionStatus == 1684369017 || permissionStatus == 1970168948) {
|
||||
console.log("麦克风权限没有开启");
|
||||
} else {
|
||||
result = true;
|
||||
console.log("麦克风权限已经开启");
|
||||
}
|
||||
plus.ios.deleteObject(avaudiosession);
|
||||
return result;
|
||||
}
|
||||
|
||||
// 判断相机权限是否开启
|
||||
function judgeIosPermissionCamera() {
|
||||
var result = false;
|
||||
var AVCaptureDevice = plus.ios.import("AVCaptureDevice");
|
||||
var authStatus = AVCaptureDevice.authorizationStatusForMediaType("vide");
|
||||
console.log("authStatus:" + authStatus);
|
||||
if (authStatus == 3) {
|
||||
result = true;
|
||||
console.log("相机权限已经开启");
|
||||
} else {
|
||||
console.log("相机权限没有开启");
|
||||
}
|
||||
plus.ios.deleteObject(AVCaptureDevice);
|
||||
return result;
|
||||
}
|
||||
|
||||
// 判断相册权限是否开启
|
||||
function judgeIosPermissionPhotoLibrary() {
|
||||
var result = false;
|
||||
var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");
|
||||
var authStatus = PHPhotoLibrary.authorizationStatus();
|
||||
console.log("authStatus:" + authStatus);
|
||||
if (authStatus == 3) {
|
||||
result = true;
|
||||
console.log("相册权限已经开启");
|
||||
} else {
|
||||
console.log("相册权限没有开启");
|
||||
}
|
||||
plus.ios.deleteObject(PHPhotoLibrary);
|
||||
return result;
|
||||
}
|
||||
|
||||
// 判断通讯录权限是否开启
|
||||
function judgeIosPermissionContact() {
|
||||
var result = false;
|
||||
var CNContactStore = plus.ios.import("CNContactStore");
|
||||
var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
|
||||
if (cnAuthStatus == 3) {
|
||||
result = true;
|
||||
console.log("通讯录权限已经开启");
|
||||
} else {
|
||||
console.log("通讯录权限没有开启");
|
||||
}
|
||||
plus.ios.deleteObject(CNContactStore);
|
||||
return result;
|
||||
}
|
||||
|
||||
// 判断日历权限是否开启
|
||||
function judgeIosPermissionCalendar() {
|
||||
var result = false;
|
||||
var EKEventStore = plus.ios.import("EKEventStore");
|
||||
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
|
||||
if (ekAuthStatus == 3) {
|
||||
result = true;
|
||||
console.log("日历权限已经开启");
|
||||
} else {
|
||||
console.log("日历权限没有开启");
|
||||
}
|
||||
plus.ios.deleteObject(EKEventStore);
|
||||
return result;
|
||||
}
|
||||
|
||||
// 判断备忘录权限是否开启
|
||||
function judgeIosPermissionMemo() {
|
||||
var result = false;
|
||||
var EKEventStore = plus.ios.import("EKEventStore");
|
||||
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
|
||||
if (ekAuthStatus == 3) {
|
||||
result = true;
|
||||
console.log("备忘录权限已经开启");
|
||||
} else {
|
||||
console.log("备忘录权限没有开启");
|
||||
}
|
||||
plus.ios.deleteObject(EKEventStore);
|
||||
return result;
|
||||
}
|
||||
|
||||
// Android权限查询
|
||||
function requestAndroidPermission(permissionID) {
|
||||
return new Promise((resolve, reject) => {
|
||||
plus.android.requestPermissions(
|
||||
[permissionID], // 理论上支持多个权限同时查询,但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
|
||||
function (resultObj) {
|
||||
var result = 0;
|
||||
for (var i = 0; i < resultObj.granted.length; i++) {
|
||||
var grantedPermission = resultObj.granted[i];
|
||||
console.log("已获取的权限:" + grantedPermission);
|
||||
result = 1;
|
||||
}
|
||||
for (var i = 0; i < resultObj.deniedPresent.length; i++) {
|
||||
var deniedPresentPermission = resultObj.deniedPresent[i];
|
||||
console.log("拒绝本次申请的权限:" + deniedPresentPermission);
|
||||
result = 0;
|
||||
}
|
||||
for (var i = 0; i < resultObj.deniedAlways.length; i++) {
|
||||
var deniedAlwaysPermission = resultObj.deniedAlways[i];
|
||||
console.log("永久拒绝申请的权限:" + deniedAlwaysPermission);
|
||||
result = -1;
|
||||
}
|
||||
resolve(result);
|
||||
// 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限
|
||||
// if (result != 1) {
|
||||
// gotoAppPermissionSetting()
|
||||
// }
|
||||
},
|
||||
function (error) {
|
||||
console.log("申请权限错误:" + error.code + " = " + error.message);
|
||||
resolve({
|
||||
code: error.code,
|
||||
message: error.message,
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// 使用一个方法,根据参数判断权限
|
||||
function judgeIosPermission(permissionID) {
|
||||
if (permissionID == "location") {
|
||||
return judgeIosPermissionLocation();
|
||||
} else if (permissionID == "camera") {
|
||||
return judgeIosPermissionCamera();
|
||||
} else if (permissionID == "photoLibrary") {
|
||||
return judgeIosPermissionPhotoLibrary();
|
||||
} else if (permissionID == "record") {
|
||||
return judgeIosPermissionRecord();
|
||||
} else if (permissionID == "push") {
|
||||
return judgeIosPermissionPush();
|
||||
} else if (permissionID == "contact") {
|
||||
return judgeIosPermissionContact();
|
||||
} else if (permissionID == "calendar") {
|
||||
return judgeIosPermissionCalendar();
|
||||
} else if (permissionID == "memo") {
|
||||
return judgeIosPermissionMemo();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// 跳转到**应用**的权限页面
|
||||
function gotoAppPermissionSetting() {
|
||||
if (isIos) {
|
||||
var UIApplication = plus.ios.import("UIApplication");
|
||||
var application2 = UIApplication.sharedApplication();
|
||||
var NSURL2 = plus.ios.import("NSURL");
|
||||
// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");
|
||||
var setting2 = NSURL2.URLWithString("app-settings:");
|
||||
application2.openURL(setting2);
|
||||
|
||||
plus.ios.deleteObject(setting2);
|
||||
plus.ios.deleteObject(NSURL2);
|
||||
plus.ios.deleteObject(application2);
|
||||
} else {
|
||||
// console.log(plus.device.vendor);
|
||||
var Intent = plus.android.importClass("android.content.Intent");
|
||||
var Settings = plus.android.importClass("android.provider.Settings");
|
||||
var Uri = plus.android.importClass("android.net.Uri");
|
||||
var mainActivity = plus.android.runtimeMainActivity();
|
||||
var intent = new Intent();
|
||||
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
|
||||
var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
|
||||
intent.setData(uri);
|
||||
mainActivity.startActivity(intent);
|
||||
}
|
||||
}
|
||||
|
||||
// 检查系统的设备服务是否开启
|
||||
// var checkSystemEnableLocation = async function () {
|
||||
function checkSystemEnableLocation() {
|
||||
if (isIos) {
|
||||
var result = false;
|
||||
var cllocationManger = plus.ios.import("CLLocationManager");
|
||||
var result = cllocationManger.locationServicesEnabled();
|
||||
console.log("系统定位开启:" + result);
|
||||
plus.ios.deleteObject(cllocationManger);
|
||||
return result;
|
||||
} else {
|
||||
var context = plus.android.importClass("android.content.Context");
|
||||
var locationManager = plus.android.importClass(
|
||||
"android.location.LocationManager"
|
||||
);
|
||||
var main = plus.android.runtimeMainActivity();
|
||||
var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
|
||||
var result = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);
|
||||
console.log("系统定位开启:" + result);
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
judgeIosPermission: judgeIosPermission,
|
||||
requestAndroidPermission: requestAndroidPermission,
|
||||
checkSystemEnableLocation: checkSystemEnableLocation,
|
||||
gotoAppPermissionSetting: gotoAppPermissionSetting,
|
||||
};
|
||||
135
main.js
135
main.js
@@ -1,48 +1,87 @@
|
||||
import Vue from "vue";
|
||||
import App from "./App";
|
||||
import * as filters from "./utils/filters.js"; // global filter
|
||||
import uView from "uview-ui";
|
||||
import store from "./store";
|
||||
|
||||
// #ifdef H5
|
||||
// 在h5页面手动挂载 h5唤醒app插件
|
||||
import airBtn from "@/components/m-airbtn/index.vue";
|
||||
let btn = Vue.component("airBtn", airBtn); //全局注册
|
||||
document.body.appendChild(new btn().$mount().$el);
|
||||
// #endif
|
||||
|
||||
|
||||
|
||||
Object.keys(filters).forEach((key) => {
|
||||
Vue.filter(key, filters[key]);
|
||||
});
|
||||
|
||||
const msg = (title, duration = 1500, mask = false, icon = "none") => {
|
||||
//统一提示方便全局修改
|
||||
if (Boolean(title) === false) {
|
||||
return;
|
||||
}
|
||||
uni.showToast({
|
||||
title,
|
||||
duration,
|
||||
mask,
|
||||
icon,
|
||||
});
|
||||
};
|
||||
// 引入vuex
|
||||
Vue.prototype.$store = store;
|
||||
Vue.use(uView);
|
||||
Vue.config.productionTip = false;
|
||||
// 主题色
|
||||
Vue.prototype.$mainColor = "#ff3c2a";
|
||||
// 高亮主题色
|
||||
Vue.prototype.$lightColor = "#ff6b35";
|
||||
// 可直接 this.$api调用
|
||||
Vue.prototype.$api = { msg };
|
||||
|
||||
App.mpType = "app";
|
||||
|
||||
const app = new Vue({
|
||||
...App,
|
||||
});
|
||||
app.$mount();
|
||||
import { createSSRApp, computed } from 'vue'
|
||||
import App from './App'
|
||||
import uviewPlus, { setConfig } from 'uview-plus'
|
||||
import store from './store'
|
||||
import config from '@/config/config'
|
||||
// #ifdef H5
|
||||
import airBtn from '@/components/m-airbtn/index.vue'
|
||||
// #endif
|
||||
import mpShare from '@/utils/mpShare.js'
|
||||
import * as filterUtils from './utils/filters.js'
|
||||
import { getThemeStyle } from '@/utils/theme'
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
|
||||
// uview-plus 内部会触发 Vue3 开发态告警(枚举组件实例 keys),不影响运行
|
||||
app.config.warnHandler = (msg, _instance, trace) => {
|
||||
if (
|
||||
typeof msg === 'string' &&
|
||||
msg.includes('enumerating keys on a component instance')
|
||||
) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
console.warn(`[Vue warn]: ${msg}${trace || ''}`)
|
||||
} catch (e) {
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信开发者工具部分版本在输出 Vue warn 时会触发
|
||||
// TypeError: Cannot read property '__global' of null
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
app.use(store)
|
||||
app.use(uviewPlus)
|
||||
|
||||
// uview-plus 的图标字体默认每个 u-icon 实例都会触发 uni.loadFontFace,
|
||||
// 导致进入页面时同一字体被反复请求。开启 loadFontOnce 后全局只加载一次。
|
||||
setConfig({
|
||||
config: {
|
||||
loadFontOnce: true,
|
||||
iconUrl: 'https://lilishop-uniapp.oss-cn-beijing.aliyuncs.com/font_2225171_8kdcwk4po24.ttf',
|
||||
},
|
||||
props: {
|
||||
form: {
|
||||
labelWidth: '180rpx',
|
||||
labelPosition: 'left',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
app.config.globalProperties.$store = store
|
||||
app.config.globalProperties.$mainColor = computed(() => store.getters.mainColor)
|
||||
app.config.globalProperties.$lightColor = computed(() => store.getters.lightColor)
|
||||
app.config.globalProperties.$aiderLightColor = computed(
|
||||
() => store.getters.aiderLightColor
|
||||
)
|
||||
|
||||
const filterMethods = {}
|
||||
Object.keys(filterUtils).forEach((key) => {
|
||||
if (typeof filterUtils[key] === 'function') {
|
||||
filterMethods[key] = filterUtils[key]
|
||||
}
|
||||
})
|
||||
|
||||
app.mixin({
|
||||
methods: filterMethods,
|
||||
computed: {
|
||||
themeStyle() {
|
||||
return getThemeStyle(this.$store.state.theme)
|
||||
},
|
||||
},
|
||||
})
|
||||
app.mixin(mpShare)
|
||||
|
||||
// #ifdef H5
|
||||
if (config.enableMiniBarStartUpApp) {
|
||||
const mountPoint = document.createElement('div')
|
||||
document.body.appendChild(mountPoint)
|
||||
createSSRApp(airBtn).mount(mountPoint)
|
||||
}
|
||||
// #endif
|
||||
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
{
|
||||
"name" : "lili商城",
|
||||
"appid" : "__UNI__C100675",
|
||||
"vueVersion" : "3",
|
||||
"name" : "lilishop",
|
||||
"appid" : "__UNI__ED807EA",
|
||||
"description" : "",
|
||||
"versionName" : "4.0.21",
|
||||
"versionCode" : 4000021,
|
||||
"versionName" : "5.0.4",
|
||||
"versionCode" : 503,
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
"compatible" : {
|
||||
@@ -63,8 +64,19 @@
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
],
|
||||
"abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ],
|
||||
"schemes" : "lilishop"
|
||||
"schemes" : "lilishop",
|
||||
//安卓自添加 权限 应用市场 过度索取权限
|
||||
"permissionExternalStorage" : {
|
||||
"request" : "none",
|
||||
"prompt" : "应用保存运行状态等信息,需要获取读写手机存储(系统提示为访问设备上的照片、媒体内容和文件)权限,请允许。"
|
||||
},
|
||||
"permissionPhoneState" : {
|
||||
"request" : "none",
|
||||
"prompt" : "为保证您正常、安全地使用,需要获取设备识别码(部分手机提示为获取手机号码)使用权限,请允许"
|
||||
},
|
||||
"autoSdkPermissions" : false
|
||||
},
|
||||
//安卓自添加 权限 应用市场 过度索取权限
|
||||
"ios" : {
|
||||
"idfa" : false,
|
||||
"privacyDescription" : {
|
||||
@@ -72,9 +84,11 @@
|
||||
"NSPhotoLibraryAddUsageDescription" : "保存商品图片到本地",
|
||||
"NSFaceIDUsageDescription" : "使用面部识别进行登录",
|
||||
"NSCameraUsageDescription" : "需要用与扫描二维码和商品评论图片拍摄",
|
||||
"NSLocationAlwaysAndWhenInUseUsageDescription" : "位置信息将用于高德地图的效果展示"
|
||||
"NSLocationAlwaysAndWhenInUseUsageDescription" : "位置信息将用于高德地图的效果展示",
|
||||
"NSMicrophoneUsageDescription" : "用户上传视频时需使用音频信息"
|
||||
},
|
||||
"urltypes" : "lilishop"
|
||||
"urltypes" : "lilishop",
|
||||
"dSYMs" : false
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"sdkConfigs" : {
|
||||
@@ -178,31 +192,27 @@
|
||||
"mp-weixin" : {
|
||||
/* 小程序特有相关 */
|
||||
"usingComponents" : true,
|
||||
"appid" : "",
|
||||
"lazyCodeLoading" : "requiredComponents",
|
||||
"appid" : "wx6f10f29075dc1b0b",
|
||||
"optimization" : {
|
||||
"subPackages" : true
|
||||
},
|
||||
"setting" : {
|
||||
"urlCheck" : false,
|
||||
"minified" : true,
|
||||
"postcss" : false,
|
||||
"es6" : true
|
||||
"postcss" : true,
|
||||
"es6" : true,
|
||||
"enhance" : true
|
||||
},
|
||||
"permission" : {
|
||||
"scope.userLocation" : {
|
||||
"desc" : "位置信息将用于高德地图的效果展示"
|
||||
}
|
||||
},
|
||||
"plugins" : {
|
||||
"myPlugin" : {
|
||||
"version" : "1.1.0",
|
||||
"provider" : "wx738958e0f4c894f9"
|
||||
},
|
||||
"live-player-plugin" : {
|
||||
"version" : "1.3.0",
|
||||
"provider" : "wx2b03c6e691cd7370"
|
||||
}
|
||||
}
|
||||
"plugins" : {},
|
||||
"libVersion" : "3.5.8",
|
||||
"__usePrivacyCheck__" : false,
|
||||
"requiredPrivateInfos" : [ "chooseLocation", "getLocation", "chooseAddress" ]
|
||||
},
|
||||
"h5" : {
|
||||
"devServer" : {
|
||||
|
||||
3055
package-lock.json
generated
3055
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user