Compare commits
449 Commits
| Author | SHA1 | Date |
|---|---|---|
|
|
48811b88dc | |
|
|
1ab9d97fce | |
|
|
7b76e969af | |
|
|
eca7bb81d3 | |
|
|
ef56dd4a2a | |
|
|
685905991d | |
|
|
fc1e6ac22b | |
|
|
5eabbdc365 | |
|
|
a475776039 | |
|
|
7741e4b153 | |
|
|
e64a9d2e65 | |
|
|
030f7525f8 | |
|
|
dda213fc9b | |
|
|
8226d4274f | |
|
|
6313fc5c91 | |
|
|
ee0d5d9c1e | |
|
|
ccc7b7ff3c | |
|
|
5d5a4ba39c | |
|
|
4a26132b8f | |
|
|
7ce2f12a95 | |
|
|
a2f3c598fc | |
|
|
8e31d553e3 | |
|
|
367810086a | |
|
|
1b936a3988 | |
|
|
08fa88129e | |
|
|
d768df328a | |
|
|
9696c309b7 | |
|
|
da36d5a0fe | |
|
|
654b85eba0 | |
|
|
324949dbc2 | |
|
|
80d500ed00 | |
|
|
963b3801f5 | |
|
|
6c6f8c84aa | |
|
|
032c32b337 | |
|
|
e9bf76d506 | |
|
|
a871ea7a5f | |
|
|
79e9540da5 | |
|
|
1f169a1ed1 | |
|
|
658ef561f8 | |
|
|
6b7487de46 | |
|
|
071074b96c | |
|
|
533f7df7ad | |
|
|
dd71ba7d9e | |
|
|
f6e74b12cb | |
|
|
c17228b0d7 | |
|
|
5071816ea0 | |
|
|
62d1f4f273 | |
|
|
098057b2de | |
|
|
12ff9bb4d1 | |
|
|
af596bcc70 | |
|
|
e0f7ec3629 | |
|
|
9f1cd4c3a7 | |
|
|
8456d0a8b3 | |
|
|
13f674ab4b | |
|
|
c149a54e83 | |
|
|
7e6a3bbad3 | |
|
|
1948aae067 | |
|
|
4d308078fa | |
|
|
db60915de6 | |
|
|
8ef7c89735 | |
|
|
500b377b4f | |
|
|
ad7de47a47 | |
|
|
c95f621144 | |
|
|
9582d5944e | |
|
|
82aada5ecd | |
|
|
04bb5e65d3 | |
|
|
90e22374ee | |
|
|
3e7fd5277c | |
|
|
8c821bf8ad | |
|
|
5da0382a25 | |
|
|
f646458b15 | |
|
|
68ed6e1810 | |
|
|
c7d101cd05 | |
|
|
49dbce22d1 | |
|
|
349a4bb0a9 | |
|
|
600a29b50b | |
|
|
791e99057c | |
|
|
20e7593e14 | |
|
|
e2fb99ae60 | |
|
|
01adbff523 | |
|
|
dfe4a33e2d | |
|
|
997404dfb4 | |
|
|
08e7b32fc3 | |
|
|
93ce26f6be | |
|
|
158b0aa435 | |
|
|
70a69bdfe6 | |
|
|
4b3c699270 | |
|
|
da9588c263 | |
|
|
00f57159b4 | |
|
|
ff9211e557 | |
|
|
e9ebe236e6 | |
|
|
9e96df4651 | |
|
|
c10a1c9adc | |
|
|
39e04ae78d | |
|
|
5dfa496998 | |
|
|
b62f2ccd21 | |
|
|
b532985e84 | |
|
|
796f3e9eba | |
|
|
352a61c8f5 | |
|
|
4fc6943391 | |
|
|
70f9c004ea | |
|
|
50973a9a30 | |
|
|
42f10e1b8f | |
|
|
0c2adc80f6 | |
|
|
336e0efb8d | |
|
|
36b4880b26 | |
|
|
8914d65fbb | |
|
|
f9e30d1fbc | |
|
|
e02db4339e | |
|
|
0c88f6c2af | |
|
|
d91d8eb2db | |
|
|
8a0a39b3db | |
|
|
3c403c424a | |
|
|
730025128a | |
|
|
5275b64e60 | |
|
|
ca85a34e49 | |
|
|
d46cfd3943 | |
|
|
a382a1a876 | |
|
|
7fc548e161 | |
|
|
ea28ca6875 | |
|
|
11e83df02f | |
|
|
039f05ce23 | |
|
|
c1f2117e48 | |
|
|
5cc6d99891 | |
|
|
a2ba10f796 | |
|
|
9ce6e63ee9 | |
|
|
94f8883bd8 | |
|
|
53899380c3 | |
|
|
bc0e731fc3 | |
|
|
515b8bb00f | |
|
|
9f7015090d | |
|
|
139ec62e9a | |
|
|
4b9ef94741 | |
|
|
46ba5e6aef | |
|
|
75d0b004dc | |
|
|
52cfca1ca1 | |
|
|
34be99fccb | |
|
|
164589f634 | |
|
|
39869cd92d | |
|
|
a863300ae3 | |
|
|
8ac9f2714f | |
|
|
dcd63dd54e | |
|
|
25fc972833 | |
|
|
cde0de43ff | |
|
|
bfde5df0cd | |
|
|
b92bf484df | |
|
|
1b02d0cefa | |
|
|
b24af1f71f | |
|
|
951a52d37b | |
|
|
9616e660a6 | |
|
|
da81f6df7d | |
|
|
c48951df8c | |
|
|
1407350bf7 | |
|
|
4c4134389e | |
|
|
f98b1a2bea | |
|
|
1ff8890d58 | |
|
|
7be216ea4b | |
|
|
530410fcf0 | |
|
|
29a5024468 | |
|
|
cb8431fbd4 | |
|
|
6900eb1909 | |
|
|
7793a69b9d | |
|
|
7017561242 | |
|
|
0cdaaac0ed | |
|
|
18aa26dcae | |
|
|
87c6e967f2 | |
|
|
01c2dfa30d | |
|
|
1978484071 | |
|
|
68680d0d0e | |
|
|
92e89bae34 | |
|
|
94e0dd4f5d | |
|
|
9a225c6ba5 | |
|
|
6c80e36508 | |
|
|
cf88789eef | |
|
|
98b3f1fc67 | |
|
|
a09e171bf7 | |
|
|
5ee9c18f4c | |
|
|
b8132062ea | |
|
|
35c143039c | |
|
|
f94df74591 | |
|
|
e9b9ac1f7a | |
|
|
d916fe5c80 | |
|
|
315b5b852d | |
|
|
0213a4b88a | |
|
|
4bdc82786e | |
|
|
f36b183407 | |
|
|
113aead37b | |
|
|
90b6ae7d40 | |
|
|
959fe83d72 | |
|
|
f784d411b6 | |
|
|
c8f9043869 | |
|
|
789ec69933 | |
|
|
4dd6e82309 | |
|
|
3051aed6b2 | |
|
|
8e50c5da49 | |
|
|
fd10210972 | |
|
|
c399bb2373 | |
|
|
9451092335 | |
|
|
fd33176222 | |
|
|
290ee5db04 | |
|
|
07b630601a | |
|
|
b59c41c5f8 | |
|
|
a4ec421412 | |
|
|
0961aa610b | |
|
|
545d4259c4 | |
|
|
1ffa754dbe | |
|
|
96d86f237d | |
|
|
8e64ecebd1 | |
|
|
98f912f113 | |
|
|
732aa7686c | |
|
|
b2e40e7011 | |
|
|
d7a18f9c01 | |
|
|
c5307513cc | |
|
|
a5d073e798 | |
|
|
9639c2f270 | |
|
|
cf6b26e565 | |
|
|
9171275d3d | |
|
|
2a2ce2eff6 | |
|
|
b6635a5d5c | |
|
|
da4cd2238e | |
|
|
fb3120d818 | |
|
|
5f496038c5 | |
|
|
146f9ddc88 | |
|
|
6abad0df4d | |
|
|
47ac7d1fbc | |
|
|
25e4686e30 | |
|
|
b476305e30 | |
|
|
518c898882 | |
|
|
09dc98db16 | |
|
|
ea98ba45ca | |
|
|
2e572639b0 | |
|
|
4a0ea9b43c | |
|
|
6d762c5367 | |
|
|
2349faa1bc | |
|
|
4cdb595a2a | |
|
|
5552236952 | |
|
|
d2f516e1ae | |
|
|
cb39246850 | |
|
|
18484f7ee8 | |
|
|
2ca7f48131 | |
|
|
f491e87d6a | |
|
|
6f8e82e6cf | |
|
|
6c95891476 | |
|
|
76e7ed8f25 | |
|
|
f6b2eb6925 | |
|
|
c23e7ac3d0 | |
|
|
ca1926a732 | |
|
|
a1995c88e8 | |
|
|
27260f4a75 | |
|
|
0c5ef4a085 | |
|
|
3dad154ca0 | |
|
|
e727974806 | |
|
|
ab709267be | |
|
|
51cd8908ec | |
|
|
56182dfbe9 | |
|
|
6b6fa0c257 | |
|
|
ff6769001d | |
|
|
9df0194aeb | |
|
|
b741a1d148 | |
|
|
f03fcf1373 | |
|
|
5a66e71809 | |
|
|
e93322959e | |
|
|
4a8a92f323 | |
|
|
ba56d9843f | |
|
|
eb3d0ff6b0 | |
|
|
aa571f25f9 | |
|
|
49e8b9f5c3 | |
|
|
6af76a20f3 | |
|
|
55131bf0c3 | |
|
|
f3c7387650 | |
|
|
b2d030f96b | |
|
|
97711bad3e | |
|
|
29584a108b | |
|
|
1432ec5996 | |
|
|
9521d4b557 | |
|
|
27af994667 | |
|
|
dbc192faa7 | |
|
|
5f8ed35521 | |
|
|
b42c151585 | |
|
|
3e2749672e | |
|
|
07098527ff | |
|
|
cb29c2c0aa | |
|
|
4be2b441f5 | |
|
|
2cd4095035 | |
|
|
80b2bb6f5e | |
|
|
9b6d1a9a97 | |
|
|
735dc8c373 | |
|
|
fdca229a77 | |
|
|
fd8f9a6857 | |
|
|
9f5f4816d3 | |
|
|
089e0197cd | |
|
|
81cd02bbee | |
|
|
1cfd974fed | |
|
|
82a82a4bed | |
|
|
75e7e58b8d | |
|
|
b6dd2ae1eb | |
|
|
85441704cb | |
|
|
089191e95d | |
|
|
9f33e44db0 | |
|
|
ed3d370de2 | |
|
|
36289d526c | |
|
|
7268659193 | |
|
|
b1d6e1d687 | |
|
|
89e86b84fe | |
|
|
77574e099a | |
|
|
5e6adced12 | |
|
|
4fef5c5f0e | |
|
|
1bff364d38 | |
|
|
abf1235916 | |
|
|
2c4ad9f78a | |
|
|
75c5203c90 | |
|
|
a514de68b3 | |
|
|
522591c486 | |
|
|
263eb74695 | |
|
|
53920d2efa | |
|
|
a0f85bf157 | |
|
|
adc521022f | |
|
|
356193aab5 | |
|
|
07d167c624 | |
|
|
01ee048a22 | |
|
|
512d87c6f2 | |
|
|
af0643ce93 | |
|
|
9d333085cb | |
|
|
d37b848307 | |
|
|
28faf73c62 | |
|
|
f10c9ec16c | |
|
|
ef3a82ee14 | |
|
|
47f4295316 | |
|
|
8a6ec1cb02 | |
|
|
edf158ec2c | |
|
|
f4adfde90b | |
|
|
283449fc3d | |
|
|
e66e1c6eac | |
|
|
ea8ea9e744 | |
|
|
c8a95ef3ec | |
|
|
bf75dc2768 | |
|
|
0575bd56b0 | |
|
|
8154108fe9 | |
|
|
7f1504214c | |
|
|
c6b55dc90b | |
|
|
ed7258b577 | |
|
|
6c0ba7d585 | |
|
|
154a706af4 | |
|
|
fc396021c6 | |
|
|
532503b65b | |
|
|
b22cdae4fe | |
|
|
42bcab7f28 | |
|
|
4db992d3fa | |
|
|
e9a91b84fc | |
|
|
e13eedc2c2 | |
|
|
be5db900a0 | |
|
|
34274cbaa8 | |
|
|
438897b9d3 | |
|
|
58af434a90 | |
|
|
83daf7f7c2 | |
|
|
35c75338ee | |
|
|
19d3cb33e2 | |
|
|
5feab41b3d | |
|
|
51ba185e81 | |
|
|
92b9820f20 | |
|
|
cc9f31f8c3 | |
|
|
374ccf43fd | |
|
|
fd83bcf02a | |
|
|
b093f99ab5 | |
|
|
e53cb63ce4 | |
|
|
a9a522880d | |
|
|
e7ba7a82e3 | |
|
|
7a3f98e5fc | |
|
|
a9739208f8 | |
|
|
bb1da04177 | |
|
|
15ce250c1b | |
|
|
f7ec1badf7 | |
|
|
2b5a06174f | |
|
|
1fc3537bf4 | |
|
|
e126981628 | |
|
|
2eb1a1bf41 | |
|
|
3099c8c491 | |
|
|
1aa944e18c | |
|
|
e635b91bb5 | |
|
|
c7ea2f97ac | |
|
|
965b97dae7 | |
|
|
c78a849c96 | |
|
|
a2dec947a2 | |
|
|
aaad12c50e | |
|
|
44052b22c3 | |
|
|
196a1b2235 | |
|
|
1bc75b2ff5 | |
|
|
b98f848be1 | |
|
|
ce81110bb3 | |
|
|
c9434b9ec9 | |
|
|
d1681ec2d5 | |
|
|
eae8f3c174 | |
|
|
7f5970d741 | |
|
|
ececc6f67c | |
|
|
77306a54e7 | |
|
|
bd07762a10 | |
|
|
1b385d728a | |
|
|
8b73d488ca | |
|
|
59c6613102 | |
|
|
9add242540 | |
|
|
d97cc41f42 | |
|
|
dfe19ca710 | |
|
|
d716bc4619 | |
|
|
0b9e8a39aa | |
|
|
20f937a4ed | |
|
|
a2b0942d88 | |
|
|
f67e6a7f54 | |
|
|
3d7f63868f | |
|
|
8977504147 | |
|
|
0b9d7a8808 | |
|
|
1879a0b464 | |
|
|
f4cc8def91 | |
|
|
2e423e9748 | |
|
|
9fc054a301 | |
|
|
2ea027a6e0 | |
|
|
508bd9cbd7 | |
|
|
d221f277a1 | |
|
|
e289c10270 | |
|
|
4c6a8077aa | |
|
|
c8feb58a46 | |
|
|
a95a04085b | |
|
|
7baec78c02 | |
|
|
9399a3e223 | |
|
|
39440c1e67 | |
|
|
b630d26d4b | |
|
|
72628f7e1c | |
|
|
d9efd4e2e6 | |
|
|
166030e3b8 | |
|
|
a4a8548b5a | |
|
|
9c03966e12 | |
|
|
793252e4aa | |
|
|
760dad0436 | |
|
|
3355f5e853 | |
|
|
6550441bc9 | |
|
|
561529b01e | |
|
|
4d92eaf5f9 | |
|
|
950acf5275 | |
|
|
f00a8052ea | |
|
|
c3b1ff4b92 | |
|
|
6b8a4fec29 | |
|
|
2dfe61503f | |
|
|
521553e2f5 | |
|
|
f46bfc6ee1 | |
|
|
03512800b2 | |
|
|
ccd033b15a | |
|
|
dabefbe21c | |
|
|
8963ebc6af | |
|
|
004294ae7c | |
|
|
8815972188 |
30
.env
30
.env
|
|
@ -1,21 +1,35 @@
|
|||
# 版本号
|
||||
SHOPRO_VERSION = v1.8.3
|
||||
SHOPRO_VERSION=v2.4.1
|
||||
|
||||
# 后端接口 - 正式环境(通过 process.env.NODE_ENV 非 development)
|
||||
SHOPRO_BASE_URL = http://api-dashboard.yudao.iocoder.cn
|
||||
SHOPRO_BASE_URL=http://api-dashboard.yudao.iocoder.cn
|
||||
|
||||
# 后端接口 - 测试环境(通过 process.env.NODE_ENV = development)
|
||||
SHOPRO_DEV_BASE_URL = http://127.0.0.1:48080
|
||||
SHOPRO_DEV_BASE_URL=http://127.0.0.1:48080
|
||||
### SHOPRO_DEV_BASE_URL=http://10.171.1.188:48080
|
||||
### SHOPRO_DEV_BASE_URL = http://yunai.natapp1.cc
|
||||
|
||||
# 文件上传类型:server - 后端上传, client - 前端直连上传,仅支持 S3 服务
|
||||
SHOPRO_UPLOAD_TYPE=server
|
||||
|
||||
# 后端接口前缀(一般不建议调整)
|
||||
SHOPRO_API_PATH = /app-api
|
||||
SHOPRO_API_PATH=/app-api
|
||||
|
||||
# 后端 websocket 接口前缀
|
||||
SHOPRO_WEBSOCKET_PATH=/infra/ws
|
||||
|
||||
# 开发环境运行端口
|
||||
SHOPRO_DEV_PORT = 3000
|
||||
SHOPRO_DEV_PORT=3000
|
||||
|
||||
# 客户端静态资源地址 空=默认使用服务端指定的CDN资源地址前缀 | local=本地 | http(s)://xxx.xxx=自定义静态资源地址前缀
|
||||
SHOPRO_STATIC_URL = https://file.sheepjs.com
|
||||
SHOPRO_STATIC_URL=http://test.yudao.iocoder.cn
|
||||
### SHOPRO_STATIC_URL = https://file.sheepjs.com
|
||||
|
||||
# 是否开启直播 1 开启直播 | 0 关闭直播 (小程序官方后台未审核开通直播权限时请勿开启)
|
||||
SHOPRO_MPLIVE_ON = 0
|
||||
# 前端 H5 访问域名
|
||||
SHOPRO_H5_URL=http://127.0.0.1:3000
|
||||
|
||||
# 是否开启直播 1 开启直播 | 0 关闭直播
|
||||
SHOPRO_MPLIVE_ON=0
|
||||
|
||||
# 租户ID 默认 1
|
||||
SHOPRO_TENANT_ID=1
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ deploy.sh
|
|||
.hbuilderx/
|
||||
.vscode/
|
||||
**/.DS_Store
|
||||
.env
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
*.keystore
|
||||
|
|
|
|||
17
App.vue
17
App.vue
|
|
@ -4,17 +4,15 @@
|
|||
|
||||
onLaunch(() => {
|
||||
// 隐藏原生导航栏 使用自定义底部导航
|
||||
uni.hideTabBar();
|
||||
uni.hideTabBar({
|
||||
fail: () => {},
|
||||
});
|
||||
|
||||
// 加载Shopro底层依赖
|
||||
ShoproInit();
|
||||
});
|
||||
|
||||
onError((err) => {
|
||||
console.log('AppOnError:', err);
|
||||
});
|
||||
|
||||
onShow((options) => {
|
||||
onShow(() => {
|
||||
// #ifdef APP-PLUS
|
||||
// 获取urlSchemes参数
|
||||
const args = plus.runtime.arguments;
|
||||
|
|
@ -23,14 +21,9 @@
|
|||
|
||||
// 获取剪贴板
|
||||
uni.getClipboardData({
|
||||
success: (res) => { },
|
||||
success: (res) => {},
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 确认收货回调结果
|
||||
console.log(options,'options');
|
||||
// #endif
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -30,11 +30,11 @@
|
|||
|
||||
支持 Spring Boot、Spring Cloud 两种架构:
|
||||
|
||||
① Spring Boot 单体架构:<https://github.com/YunaiV/ruoyi-vue-pro>
|
||||
① Spring Boot 单体架构:<https://doc.iocoder.cn>
|
||||
|
||||

|
||||
|
||||
② Spring Cloud 微服务架构:<https://github.com/YunaiV/yudao-cloud>
|
||||
② Spring Cloud 微服务架构:<https://cloud.iocoder.cn>
|
||||
|
||||

|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
"name": "芋道商城",
|
||||
"appid": "__UNI__460BC4C",
|
||||
"description": "基于 uni-app + Vue3 技术驱动的在线商城系统,内含诸多功能与丰富的活动,期待您的使用和反馈。",
|
||||
"versionName": "2.1.0",
|
||||
"versionCode": 183,
|
||||
"versionName": "2025.09",
|
||||
"versionCode": "183",
|
||||
"transformPx": false,
|
||||
"app-plus": {
|
||||
"usingComponents": true,
|
||||
|
|
@ -57,7 +57,6 @@
|
|||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
||||
"<uses-permission android:name=\"android.permission.SEND_SMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
|
||||
|
|
@ -91,9 +90,7 @@
|
|||
"idfa": true
|
||||
},
|
||||
"sdkConfigs": {
|
||||
"speech": {
|
||||
"ifly": {}
|
||||
},
|
||||
"speech": {},
|
||||
"ad": {},
|
||||
"oauth": {
|
||||
"apple": {},
|
||||
|
|
@ -185,7 +182,7 @@
|
|||
"versionCode": 100
|
||||
},
|
||||
"mp-weixin": {
|
||||
"appid": "wx63c280fe3248a3e7",
|
||||
"appid": "wx66186af0759f47c9",
|
||||
"setting": {
|
||||
"urlCheck": false,
|
||||
"minified": true,
|
||||
|
|
@ -217,8 +214,8 @@
|
|||
"h5": {
|
||||
"template": "index.html",
|
||||
"router": {
|
||||
"mode": "hash",
|
||||
"base": "./"
|
||||
"mode": "history",
|
||||
"base": "/"
|
||||
},
|
||||
"sdkConfigs": {
|
||||
"maps": {}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"id": "shopro",
|
||||
"name": "shopro",
|
||||
"displayName": "芋道商城",
|
||||
"version": "2.1.0",
|
||||
"version": "2025.09",
|
||||
"description": "芋道商城,一套代码,同时发行到iOS、Android、H5、微信小程序多个平台,请使用手机扫码快速体验强大功能",
|
||||
"scripts": {
|
||||
"prettier": "prettier --write \"{pages,sheep}/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
|
||||
|
|
@ -88,13 +88,12 @@
|
|||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@hyoga/uni-socket.io": "^1.0.1",
|
||||
"dayjs": "^1.11.7",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash-es": "^4.17.21",
|
||||
"luch-request": "^3.0.8",
|
||||
"pinia": "^2.0.33",
|
||||
"pinia-plugin-persist-uni": "^1.2.0",
|
||||
"qs-canvas": "^1.0.11",
|
||||
"weixin-js-sdk": "^1.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
42
pages.json
42
pages.json
|
|
@ -120,6 +120,17 @@
|
|||
"group": "商品"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "point",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分商品"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "积分商品",
|
||||
"group": "商品"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "list",
|
||||
"style": {
|
||||
|
|
@ -307,6 +318,18 @@
|
|||
"title": "编辑地址"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goods_details_store/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "自提门店"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "地址管理",
|
||||
"group": "用户中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "wallet/money",
|
||||
"style": {
|
||||
|
|
@ -526,7 +549,10 @@
|
|||
"pages": [{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "客服"
|
||||
"navigationBarTitleText": "客服",
|
||||
"app-plus": {
|
||||
"softinputMode": "adjustResize"
|
||||
}
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
|
|
@ -629,6 +655,17 @@
|
|||
"title": "秒杀活动",
|
||||
"group": "营销活动"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "point/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分商城"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "积分商城",
|
||||
"group": "营销活动"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -644,6 +681,9 @@
|
|||
"list": [{
|
||||
"pagePath": "pages/index/index"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/index/category"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/index/cart"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
<!-- 拼团订单的详情 -->
|
||||
<template>
|
||||
<s-layout title="拼团详情" class="detail-wrap" :navbar="state.data && !state.loading ? 'inner': 'normal'" :onShareAppMessage="shareInfo">
|
||||
<s-layout
|
||||
title="拼团详情"
|
||||
class="detail-wrap"
|
||||
:navbar="state.data && !state.loading ? 'inner' : 'normal'"
|
||||
:onShareAppMessage="shareInfo"
|
||||
>
|
||||
<view v-if="state.loading"></view>
|
||||
<view v-if="state.data && !state.loading">
|
||||
<!-- 团长信息 + 活动信息 -->
|
||||
|
|
@ -22,7 +27,7 @@
|
|||
priceColor="#E1212B"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/goods/groupon', {
|
||||
id: state.data.headRecord.activityId
|
||||
id: state.data.headRecord.activityId,
|
||||
})
|
||||
"
|
||||
:style="[{ top: Number(statusBarHeight + 108) + 'rpx' }]"
|
||||
|
|
@ -71,7 +76,9 @@
|
|||
</view>
|
||||
<view class="countdown-title ss-flex" v-else>
|
||||
还差
|
||||
<view class="num">{{ state.data.headRecord.userSize - state.data.headRecord.userCount }}人</view>
|
||||
<view class="num"
|
||||
>{{ state.data.headRecord.userSize - state.data.headRecord.userCount }}人</view
|
||||
>
|
||||
拼团成功
|
||||
<view class="ss-flex countdown-time">
|
||||
<view class="countdown-h ss-flex ss-row-center">{{ endTime.h }}</view>
|
||||
|
|
@ -91,7 +98,7 @@
|
|||
<view class="ss-m-t-60 ss-flex ss-flex-wrap ss-row-center">
|
||||
<!-- 团长 -->
|
||||
<view class="header-avatar ss-m-r-24 ss-m-b-20">
|
||||
<image :src="sheep.$url.cdn(state.data.headRecord.avatar)" class="avatar-img"></image>
|
||||
<image :src="sheep.$url.cdn(state.data.headRecord.avatar) || sheep.$url.static('/static/img/shop/default_avatar.png')" class="avatar-img"></image>
|
||||
<view class="header-tag ss-flex ss-col-center ss-row-center">团长</view>
|
||||
</view>
|
||||
<!-- 团员 -->
|
||||
|
|
@ -100,7 +107,7 @@
|
|||
v-for="item in state.data.memberRecords"
|
||||
:key="item.id"
|
||||
>
|
||||
<image :src="sheep.$url.cdn(item.avatar)" class="avatar-img"></image>
|
||||
<image :src="sheep.$url.cdn(item.avatar) || sheep.$url.static('/static/img/shop/default_avatar.png')" class="avatar-img"></image>
|
||||
<view
|
||||
class="header-tag ss-flex ss-col-center ss-row-center"
|
||||
v-if="item.is_leader == '1'"
|
||||
|
|
@ -109,7 +116,11 @@
|
|||
</view>
|
||||
</view>
|
||||
<!-- 还有几个坑位 -->
|
||||
<view class="default-avatar ss-m-r-24 ss-m-b-20" v-for="item in state.remainNumber" :key="item">
|
||||
<view
|
||||
class="default-avatar ss-m-r-24 ss-m-b-20"
|
||||
v-for="item in state.remainNumber"
|
||||
:key="item"
|
||||
>
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/avatar/unknown.png')"
|
||||
class="avatar-img"
|
||||
|
|
@ -154,11 +165,7 @@
|
|||
</view>
|
||||
<view v-else class="ss-flex ss-row-center">
|
||||
<view v-if="state.data.orderId">
|
||||
<button
|
||||
class="ss-reset-button join-btn"
|
||||
:disabled="endTime.ms <= 0"
|
||||
@tap="onShare"
|
||||
>
|
||||
<button class="ss-reset-button join-btn" :disabled="endTime.ms <= 0" @tap="onShare">
|
||||
邀请好友来拼团
|
||||
</button>
|
||||
</view>
|
||||
|
|
@ -174,11 +181,11 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<!-- TODO 芋艿:这里暂时没接入 -->
|
||||
<view v-if="state.data.goods">
|
||||
<view v-if="!isEmpty(state.goodsInfo)">
|
||||
<!-- 规格与数量弹框 -->
|
||||
<s-select-groupon-sku
|
||||
:show="state.showSelectSku"
|
||||
:goodsInfo="state.data.goods"
|
||||
:goodsInfo="state.goodsInfo"
|
||||
:grouponAction="state.grouponAction"
|
||||
:grouponNum="state.grouponNum"
|
||||
@buy="onBuy"
|
||||
|
|
@ -196,25 +203,29 @@
|
|||
import { computed, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { useDurationTime } from '@/sheep/hooks/useGoods';
|
||||
import { fen2yuan, useDurationTime } from '@/sheep/hooks/useGoods';
|
||||
import { showShareModal } from '@/sheep/hooks/useModal';
|
||||
import { isEmpty } from 'lodash';
|
||||
import CombinationApi from "@/sheep/api/promotion/combination";
|
||||
import { isEmpty } from 'lodash-es';
|
||||
import CombinationApi from '@/sheep/api/promotion/combination';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
import { SharePageEnum } from '@/sheep/helper/const';
|
||||
|
||||
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const state = reactive({
|
||||
data: {}, // 拼团详情
|
||||
loading: true,
|
||||
grouponAction: 'create',
|
||||
showSelectSku: false,
|
||||
grouponNum: 0,
|
||||
number: 0,
|
||||
activity: {},
|
||||
goodsId: 0, // 商品ID
|
||||
goodsInfo: {}, // 商品信息
|
||||
showSelectSku: false, // 显示规格弹框
|
||||
selectedSkuPrice: {}, // 选中的规格价格
|
||||
activity: {}, // 团购活动
|
||||
grouponId: 0, // 团购ID
|
||||
grouponNum: 0, // 团购人数
|
||||
grouponAction: 'create', // 团购操作
|
||||
combinationHeadId: null, // 拼团团长编号
|
||||
loading: true,
|
||||
});
|
||||
|
||||
// todo 芋艿:分享要再接下
|
||||
const shareInfo = computed(() => {
|
||||
if (isEmpty(state.data)) return {};
|
||||
return sheep.$platform.share.getShareInfo(
|
||||
|
|
@ -223,16 +234,16 @@
|
|||
image: sheep.$url.cdn(state.data.headRecord.picUrl),
|
||||
desc: state.data.goods?.subtitle,
|
||||
params: {
|
||||
page: '5',
|
||||
query: state.data.id,
|
||||
page: SharePageEnum.GROUPON_DETAIL.value,
|
||||
query: state.data.headRecord.id,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'groupon', // 邀请拼团海报
|
||||
title: state.data.headRecord.spuName, // 商品标题
|
||||
image: sheep.$url.cdn(state.data.headRecord.picUrl), // 商品主图
|
||||
price: state.data.goods?.price, // 商品价格
|
||||
original_price: state.data.goods?.original_price, // 商品原价
|
||||
price: fen2yuan(state.data.headRecord.combinationPrice), // 商品价格
|
||||
grouponNum: state.data.headRecord.userSize, // 拼团人数
|
||||
},
|
||||
);
|
||||
});
|
||||
|
|
@ -244,33 +255,33 @@
|
|||
});
|
||||
}
|
||||
|
||||
// 去开团 TODO 芋艿:这里没接入
|
||||
// 去开团
|
||||
function onCreateGroupon() {
|
||||
state.grouponAction = 'create';
|
||||
state.grouponId = 0;
|
||||
state.showSelectSku = true;
|
||||
}
|
||||
|
||||
// 规格变更 TODO 芋艿:这里没接入
|
||||
// 规格变更
|
||||
function onSkuChange(e) {
|
||||
state.selectedSkuPrice = e;
|
||||
}
|
||||
|
||||
// 立即参团 TODO 芋艿:这里没接入
|
||||
// 立即参团
|
||||
function onJoinGroupon() {
|
||||
state.grouponAction = 'join';
|
||||
state.grouponId = state.data.activityId;
|
||||
state.combinationHeadId = state.data.id;
|
||||
state.grouponNum = state.data.num;
|
||||
state.grouponId = state.data.headRecord.activityId;
|
||||
state.combinationHeadId = state.data.headRecord.id;
|
||||
state.grouponNum = state.data.headRecord.userSize;
|
||||
state.showSelectSku = true;
|
||||
}
|
||||
|
||||
// 立即购买 TODO 芋艿:这里没接入
|
||||
// 立即购买
|
||||
function onBuy(sku) {
|
||||
sheep.$router.go('/pages/order/confirm', {
|
||||
data: JSON.stringify({
|
||||
order_type: 'goods',
|
||||
combinationActivityId: state.data.activity.id,
|
||||
combinationActivityId: state.activity.id,
|
||||
combinationHeadId: state.combinationHeadId,
|
||||
items: [
|
||||
{
|
||||
|
|
@ -295,8 +306,29 @@
|
|||
state.remainNumber = remainNumber > 0 ? remainNumber : 0;
|
||||
|
||||
// 获取活动信息
|
||||
const { data: activity } = await CombinationApi.getCombinationActivity(data.headRecord.activityId);
|
||||
const { data: activity } = await CombinationApi.getCombinationActivity(
|
||||
data.headRecord.activityId,
|
||||
);
|
||||
state.activity = activity;
|
||||
state.grouponNum = activity.userSize;
|
||||
// 加载商品信息
|
||||
const { data: spu } = await SpuApi.getSpuDetail(activity.spuId);
|
||||
state.goodsId = spu.id;
|
||||
// 默认显示最低价
|
||||
activity.products.forEach((product) => {
|
||||
spu.price = Math.min(spu.price, product.combinationPrice); // 设置 SPU 的最低价格
|
||||
});
|
||||
state.goodsInfo = spu;
|
||||
// 价格、库存使用活动的
|
||||
spu.skus.forEach((sku) => {
|
||||
const product = activity.products.find((product) => product.skuId === sku.id);
|
||||
if (product) {
|
||||
sku.price = product.combinationPrice;
|
||||
} else {
|
||||
// 找不到可能是没配置,则不能发起秒杀
|
||||
sku.stock = 0;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
state.data = null;
|
||||
}
|
||||
|
|
@ -316,8 +348,7 @@
|
|||
.recharge-box {
|
||||
position: relative;
|
||||
margin-bottom: 120rpx;
|
||||
background: v-bind(headerBg) center/750rpx 100%
|
||||
no-repeat,
|
||||
background: v-bind(headerBg) center/750rpx 100% no-repeat,
|
||||
linear-gradient(115deg, #f44739 0%, #ff6600 100%);
|
||||
border-radius: 0 0 5% 5%;
|
||||
height: 100rpx;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- 拼团活动列表 -->
|
||||
<template>
|
||||
<s-layout navbar="inner" :bgStyle="{ color: '#FE832A' }">
|
||||
<s-layout :bgStyle="{ color: '#FE832A' }" navbar="inner">
|
||||
<view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]" />
|
||||
<view class="list-content">
|
||||
<!-- 参团会员统计 -->
|
||||
|
|
|
|||
|
|
@ -67,9 +67,9 @@
|
|||
import { reactive } from 'vue';
|
||||
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
import {formatOrderColor} from "@/sheep/hooks/useGoods";
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
import _ from 'lodash-es';
|
||||
import { formatOrderColor } from '@/sheep/hooks/useGoods';
|
||||
import { resetPagination } from '@/sheep/helper/utils';
|
||||
import CombinationApi from '@/sheep/api/promotion/combination';
|
||||
|
||||
// 数据
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list)
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
}
|
||||
|
|
@ -149,6 +149,7 @@
|
|||
|
||||
//下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
resetPagination(state.pagination);
|
||||
getGrouponList();
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<view class="type-text ss-flex ss-row-center">满减:</view>
|
||||
<view class="ss-flex-1">
|
||||
<view class="tip-content" v-for="item in state.activityInfo.rules" :key="item">
|
||||
{{ formatRewardActivityRule(state.activityInfo, item) }}
|
||||
{{ item.description }}
|
||||
</view>
|
||||
</view>
|
||||
<image class="activity-left-image" src="/static/activity-left.png" />
|
||||
|
|
@ -63,10 +63,11 @@
|
|||
import { reactive } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
import _ from 'lodash-es';
|
||||
import RewardActivityApi from '@/sheep/api/promotion/rewardActivity';
|
||||
import { formatRewardActivityRule } from '@/sheep/hooks/useGoods';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
import { appendSettlementProduct } from '@/sheep/hooks/useGoods';
|
||||
import OrderApi from '@/sheep/api/trade/order';
|
||||
|
||||
const state = reactive({
|
||||
activityId: 0, // 获得编号
|
||||
|
|
@ -118,11 +119,18 @@
|
|||
const { code, data } = await SpuApi.getSpuPage({
|
||||
pageNo: state.pagination.pageNo,
|
||||
pageSize: state.pagination.pageSize,
|
||||
...params
|
||||
...params,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
// 拼接结算信息(营销)
|
||||
await OrderApi.getSettlementProduct(data.list.map((item) => item.id).join(',')).then((res) => {
|
||||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
appendSettlementProduct(data.list, res.data);
|
||||
});
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
<!-- 积分商城:商品列表 -->
|
||||
<template>
|
||||
<s-layout title="积分商城" navbar="normal" :leftWidth="0" :rightWidth="0">
|
||||
<scroll-view
|
||||
class="scroll-box"
|
||||
:style="{ height: pageHeight + 'rpx' }"
|
||||
scroll-y="true"
|
||||
:scroll-with-animation="false"
|
||||
:enable-back-to-top="true"
|
||||
>
|
||||
<s-point-card ref="sPointCardRef" class="ss-p-x-20 ss-m-t-20" />
|
||||
<s-empty
|
||||
v-if="activityTotal === 0"
|
||||
icon="/static/goods-empty.png"
|
||||
text="暂无积分商品"
|
||||
></s-empty>
|
||||
<uni-load-more
|
||||
v-if="activityTotal > 0"
|
||||
:status="loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadMore"
|
||||
/>
|
||||
</scroll-view>
|
||||
</s-layout>
|
||||
</template>
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive, ref } from 'vue';
|
||||
import PointApi from '@/sheep/api/promotion/point';
|
||||
import SLayout from '@/sheep/components/s-layout/s-layout.vue';
|
||||
|
||||
// 计算页面高度
|
||||
const { safeAreaInsets, safeArea } = sheep.$platform.device;
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const pageHeight =
|
||||
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
|
||||
|
||||
const sPointCardRef = ref();
|
||||
// 查询活动列表
|
||||
const activityPageParams = reactive({
|
||||
pageNo: 1, // 页码
|
||||
pageSize: 5, // 每页数量
|
||||
});
|
||||
|
||||
const activityTotal = ref(0); // 活动总数
|
||||
const activityCount = ref(0); // 已加载活动数量
|
||||
const loadStatus = ref(''); // 页面加载状态
|
||||
async function getActivityList() {
|
||||
loadStatus.value = 'loading';
|
||||
const { data } = await PointApi.getPointActivityPage(activityPageParams);
|
||||
await sPointCardRef.value.concatActivity(data.list);
|
||||
activityCount.value = sPointCardRef.value.getActivityCount();
|
||||
activityTotal.value = data.total;
|
||||
|
||||
loadStatus.value = activityCount.value < activityTotal.value ? 'more' : 'noMore';
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
function loadMore() {
|
||||
if (loadStatus.value !== 'noMore') {
|
||||
activityPageParams.pageNo += 1;
|
||||
getActivityList();
|
||||
}
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadMore();
|
||||
});
|
||||
onLoad(() => {
|
||||
getActivityList();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- 秒杀活动列表 -->
|
||||
<template>
|
||||
<s-layout navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }">
|
||||
<s-layout :bgStyle="{ color: 'rgb(245,28,19)' }" navbar="inner">
|
||||
<!--顶部背景图-->
|
||||
<view
|
||||
class="page-bg"
|
||||
|
|
@ -8,8 +8,15 @@
|
|||
></view>
|
||||
<!-- 时间段轮播图 -->
|
||||
<view class="header" v-if="activeTimeConfig?.sliderPicUrls?.length > 0">
|
||||
<swiper indicator-dots="true" autoplay="true" :circular="true" interval="3000" duration="1500"
|
||||
indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
|
||||
<swiper
|
||||
indicator-dots="true"
|
||||
autoplay="true"
|
||||
:circular="true"
|
||||
interval="3000"
|
||||
duration="1500"
|
||||
indicator-color="rgba(255,255,255,0.6)"
|
||||
indicator-active-color="#fff"
|
||||
>
|
||||
<block v-for="(picUrl, index) in activeTimeConfig.sliderPicUrls" :key="index">
|
||||
<swiper-item class="borRadius14">
|
||||
<image :src="picUrl" class="slide-image borRadius14" lazy-load />
|
||||
|
|
@ -21,18 +28,28 @@
|
|||
<view class="flex align-center justify-between ss-p-25">
|
||||
<!-- 左侧图标 -->
|
||||
<view class="time-icon">
|
||||
<!-- TODO 芋艿:图片统一维护 -->
|
||||
<image class="ss-w-100 ss-h-100" src="http://mall.yudao.iocoder.cn/static/images/priceTag.png" />
|
||||
<image
|
||||
class="ss-w-100 ss-h-100"
|
||||
:src="sheep.$url.static('/static/img/shop/priceTag.png')"
|
||||
/>
|
||||
</view>
|
||||
<scroll-view class="time-list" :scroll-into-view="activeTimeElId" scroll-x scroll-with-animation>
|
||||
<view v-for="(config, index) in timeConfigList" :key="index"
|
||||
:class="['item', { active: activeTimeIndex === index}]"
|
||||
<scroll-view
|
||||
class="time-list"
|
||||
:scroll-into-view="activeTimeElId"
|
||||
scroll-x
|
||||
scroll-with-animation
|
||||
>
|
||||
<view
|
||||
v-for="(config, index) in timeConfigList"
|
||||
:key="index"
|
||||
:class="['item', { active: activeTimeIndex === index }]"
|
||||
:id="`timeItem${index}`"
|
||||
@tap="handleChangeTimeConfig(index)">
|
||||
@tap="handleChangeTimeConfig(index, config.id)"
|
||||
>
|
||||
<!-- 活动起始时间 -->
|
||||
<view class="time">{{ config.startTime }}</view>
|
||||
<!-- 活动状态 -->
|
||||
<view class="status">{{ config.status }}</view>
|
||||
<view class="status">{{ config?.status }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
|
@ -42,7 +59,10 @@
|
|||
<!-- 活动倒计时 -->
|
||||
<view class="content-header ss-flex-col ss-col-center ss-row-center">
|
||||
<view class="content-header-box ss-flex ss-row-center">
|
||||
<view class="countdown-box ss-flex" v-if="activeTimeConfig?.status === TimeStatusEnum.STARTED">
|
||||
<view
|
||||
class="countdown-box ss-flex"
|
||||
v-if="activeTimeConfig?.status === TimeStatusEnum.STARTED"
|
||||
>
|
||||
<view class="countdown-title ss-m-r-12">距结束</view>
|
||||
<view class="ss-flex countdown-time">
|
||||
<view class="ss-flex countdown-h">{{ countDown.h }}</view>
|
||||
|
|
@ -70,19 +90,44 @@
|
|||
:data="{ ...activity, price: activity.seckillPrice }"
|
||||
:goodsFields="goodsFields"
|
||||
:seckillTag="true"
|
||||
@click="sheep.$router.go('/pages/goods/seckill', { id: activity.id })"
|
||||
>
|
||||
<!-- 抢购进度 -->
|
||||
<template #activity>
|
||||
<view class="limit">限量 <text class="ss-m-l-5">{{ activity.stock}} {{activity.unitName}}</text></view>
|
||||
<view class="limit">
|
||||
限量
|
||||
<text class="ss-m-l-5">{{ activity.stock }} {{ activity.unitName }}</text>
|
||||
</view>
|
||||
<su-progress :percentage="activity.percent" strokeWidth="10" textInside isAnimate />
|
||||
</template>
|
||||
<!-- 抢购按钮 -->
|
||||
<template #cart>
|
||||
<button :class="['ss-reset-button cart-btn', { disabled: activeTimeConfig.status === TimeStatusEnum.END }]">
|
||||
<span v-if="activeTimeConfig?.status === TimeStatusEnum.WAIT_START">未开始</span>
|
||||
<span v-else-if="activeTimeConfig?.status === TimeStatusEnum.STARTED">马上抢</span>
|
||||
<span v-else>已结束</span>
|
||||
<button
|
||||
:class="[
|
||||
'ss-reset-button cart-btn',
|
||||
{ disabled: activeTimeConfig?.status === TimeStatusEnum.END },
|
||||
]"
|
||||
v-if="activeTimeConfig?.status === TimeStatusEnum.WAIT_START"
|
||||
>
|
||||
<span>未开始</span>
|
||||
</button>
|
||||
<button
|
||||
:class="[
|
||||
'ss-reset-button cart-btn',
|
||||
{ disabled: activeTimeConfig?.status === TimeStatusEnum.END },
|
||||
]"
|
||||
@click="sheep.$router.go('/pages/goods/seckill', { id: activity.id })"
|
||||
v-else-if="activeTimeConfig?.status === TimeStatusEnum.STARTED"
|
||||
>
|
||||
<span>马上抢</span>
|
||||
</button>
|
||||
<button
|
||||
:class="[
|
||||
'ss-reset-button cart-btn',
|
||||
{ disabled: activeTimeConfig?.status === TimeStatusEnum.END },
|
||||
]"
|
||||
v-else
|
||||
>
|
||||
<span>已结束</span>
|
||||
</button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
|
|
@ -100,40 +145,51 @@
|
|||
</s-layout>
|
||||
</template>
|
||||
<script setup>
|
||||
import {reactive, computed, ref, nextTick} from 'vue';
|
||||
import { computed, nextTick, reactive, ref } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { useDurationTime } from '@/sheep/hooks/useGoods';
|
||||
import SeckillApi from "@/sheep/api/promotion/seckill";
|
||||
import dayjs from "dayjs";
|
||||
import {TimeStatusEnum} from "@/sheep/util/const";
|
||||
import SeckillApi from '@/sheep/api/promotion/seckill';
|
||||
import dayjs from 'dayjs';
|
||||
import { TimeStatusEnum } from '@/sheep/helper/const';
|
||||
|
||||
// 计算页面高度
|
||||
const { safeAreaInsets, safeArea } = sheep.$platform.device;
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const pageHeight = (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
|
||||
const pageHeight =
|
||||
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
|
||||
const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-header.png');
|
||||
|
||||
// 商品控件显示的字段(不显示库存、销量。改为显示自定义的进度条)
|
||||
const goodsFields = {
|
||||
name: { show: true },
|
||||
introduction: { show: true },
|
||||
price: { show: true },
|
||||
marketPrice: { show: true },
|
||||
name: {
|
||||
show: true,
|
||||
},
|
||||
introduction: {
|
||||
show: true,
|
||||
},
|
||||
price: {
|
||||
show: true,
|
||||
},
|
||||
marketPrice: {
|
||||
show: true,
|
||||
},
|
||||
};
|
||||
|
||||
//#region 时间段
|
||||
// 时间段列表
|
||||
const timeConfigList = ref([])
|
||||
const timeConfigList = ref([]);
|
||||
// 查询时间段
|
||||
const getSeckillConfigList = async () => {
|
||||
const { data } = await SeckillApi.getSeckillConfigList()
|
||||
const { data } = await SeckillApi.getSeckillConfigList();
|
||||
const now = dayjs();
|
||||
const today = now.format('YYYY-MM-DD')
|
||||
const today = now.format('YYYY-MM-DD');
|
||||
const select = ref([]);
|
||||
// 判断时间段的状态
|
||||
data.forEach((config, index) => {
|
||||
const startTime = dayjs(`${today} ${config.startTime}`)
|
||||
const endTime = dayjs(`${today} ${config.endTime}`)
|
||||
const startTime = dayjs(`${today} ${config.startTime}`);
|
||||
const endTime = dayjs(`${today} ${config.endTime}`);
|
||||
select.value[index] = config.id;
|
||||
if (now.isBefore(startTime)) {
|
||||
config.status = TimeStatusEnum.WAIT_START;
|
||||
} else if (now.isAfter(endTime)) {
|
||||
|
|
@ -142,35 +198,36 @@
|
|||
config.status = TimeStatusEnum.STARTED;
|
||||
activeTimeIndex.value = index;
|
||||
}
|
||||
})
|
||||
timeConfigList.value = data
|
||||
});
|
||||
timeConfigList.value = data;
|
||||
// 默认选中进行中的活动
|
||||
handleChangeTimeConfig(activeTimeIndex.value);
|
||||
handleChangeTimeConfig(activeTimeIndex.value, select.value[activeTimeIndex.value]);
|
||||
// 滚动到进行中的时间段
|
||||
scrollToTimeConfig(activeTimeIndex.value)
|
||||
}
|
||||
scrollToTimeConfig(activeTimeIndex.value);
|
||||
};
|
||||
|
||||
// 滚动到指定时间段
|
||||
const activeTimeElId = ref('') // 当前选中的时间段的元素ID
|
||||
const activeTimeElId = ref(''); // 当前选中的时间段的元素ID
|
||||
const scrollToTimeConfig = (index) => {
|
||||
nextTick(() => activeTimeElId.value = `timeItem${index}`)
|
||||
}
|
||||
nextTick(() => (activeTimeElId.value = `timeItem${index}`));
|
||||
};
|
||||
|
||||
// 切换时间段
|
||||
const activeTimeIndex = ref(0) // 当前选中的时间段的索引
|
||||
const activeTimeConfig = computed(() => timeConfigList.value[activeTimeIndex.value]) // 当前选中的时间段
|
||||
const handleChangeTimeConfig = (index) => {
|
||||
activeTimeIndex.value = index
|
||||
const activeTimeIndex = ref(0); // 当前选中的时间段的索引
|
||||
const activeTimeConfig = computed(() => timeConfigList.value[activeTimeIndex.value]); // 当前选中的时间段
|
||||
const handleChangeTimeConfig = (index, id) => {
|
||||
activeTimeIndex.value = index;
|
||||
|
||||
// 查询活动列表
|
||||
activityPageParams.pageNo = 1
|
||||
activityList.value = []
|
||||
activityPageParams.pageNo = 1;
|
||||
activityPageParams.configId = id;
|
||||
activityList.value = [];
|
||||
getActivityList();
|
||||
}
|
||||
};
|
||||
|
||||
// 倒计时
|
||||
const countDown = computed(() => {
|
||||
const endTime = activeTimeConfig.value?.endTime
|
||||
const endTime = activeTimeConfig.value?.endTime;
|
||||
if (endTime) {
|
||||
return useDurationTime(`${dayjs().format('YYYY-MM-DD')} ${endTime}`);
|
||||
}
|
||||
|
|
@ -182,20 +239,22 @@
|
|||
|
||||
// 查询活动列表
|
||||
const activityPageParams = reactive({
|
||||
id: 0, // 时间段 ID
|
||||
configId: 0, // 时间段 ID
|
||||
pageNo: 1, // 页码
|
||||
pageSize: 5, // 每页数量
|
||||
})
|
||||
const activityTotal = ref(0) // 活动总数
|
||||
const activityList = ref([]) // 活动列表
|
||||
const loadStatus = ref('') // 页面加载状态
|
||||
});
|
||||
const activityTotal = ref(0); // 活动总数
|
||||
const activityList = ref([]); // 活动列表
|
||||
const loadStatus = ref(''); // 页面加载状态
|
||||
async function getActivityList() {
|
||||
loadStatus.value = 'loading';
|
||||
const { data } = await SeckillApi.getSeckillActivityPage(activityPageParams)
|
||||
data.list.forEach(activity => {
|
||||
const { data } = await SeckillApi.getSeckillActivityPage(activityPageParams);
|
||||
data.list.forEach((activity) => {
|
||||
// 计算抢购进度
|
||||
activity.percent = parseInt(100 * (activity.totalStock - activity.stock) / activity.totalStock);
|
||||
})
|
||||
activity.percent = parseInt(
|
||||
(100 * (activity.totalStock - activity.stock)) / activity.totalStock,
|
||||
);
|
||||
});
|
||||
activityList.value = activityList.value.concat(...data.list);
|
||||
activityTotal.value = data.total;
|
||||
|
||||
|
|
@ -205,7 +264,7 @@
|
|||
// 加载更多
|
||||
function loadMore() {
|
||||
if (loadStatus.value !== 'noMore') {
|
||||
activityPageParams.pageNo += 1
|
||||
activityPageParams.pageNo += 1;
|
||||
getActivityList();
|
||||
}
|
||||
}
|
||||
|
|
@ -216,7 +275,7 @@
|
|||
|
||||
// 页面初始化
|
||||
onLoad(async () => {
|
||||
await getSeckillConfigList()
|
||||
await getSeckillConfigList();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -235,7 +294,8 @@
|
|||
margin: -276rpx auto 0 auto;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
swiper{
|
||||
|
||||
swiper {
|
||||
height: 330rpx !important;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
|
|
@ -246,7 +306,8 @@
|
|||
height: 100%;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
img{
|
||||
|
||||
img {
|
||||
border-radius: 14rpx;
|
||||
}
|
||||
}
|
||||
|
|
@ -257,10 +318,12 @@
|
|||
width: 75rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
// 时间段列表
|
||||
.time-list {
|
||||
width: 596rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
// 时间段
|
||||
.item {
|
||||
display: inline-block;
|
||||
|
|
@ -270,17 +333,20 @@
|
|||
box-sizing: border-box;
|
||||
margin-right: 30rpx;
|
||||
width: 130rpx;
|
||||
|
||||
// 开始时间
|
||||
.time {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
// 选中的时间段
|
||||
&.active {
|
||||
.time {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
// 状态
|
||||
.status {
|
||||
height: 30rpx;
|
||||
|
|
@ -301,6 +367,7 @@
|
|||
margin: 0 20rpx 0 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
|
||||
.content-header {
|
||||
width: 100%;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
|
|
@ -312,6 +379,7 @@
|
|||
height: 64rpx;
|
||||
background: rgba($color: #fff, $alpha: 0.66);
|
||||
border-radius: 32px;
|
||||
|
||||
// 场次倒计时内容
|
||||
.countdown-title {
|
||||
font-size: 28rpx;
|
||||
|
|
@ -319,10 +387,12 @@
|
|||
color: #333333;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
// 场次倒计时
|
||||
.countdown-time {
|
||||
font-size: 28rpx;
|
||||
color: rgba(#ed3c30, 0.23);
|
||||
|
||||
// 场次倒计时:小时部分
|
||||
.countdown-h {
|
||||
font-size: 24rpx;
|
||||
|
|
@ -334,6 +404,7 @@
|
|||
background: rgba(#ed3c30, 0.23);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
// 场次倒计时:分钟、秒
|
||||
.countdown-num {
|
||||
font-size: 24rpx;
|
||||
|
|
@ -348,12 +419,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 活动列表
|
||||
.scroll-box {
|
||||
height: 900rpx;
|
||||
|
||||
// 活动
|
||||
.goods-box {
|
||||
position: relative;
|
||||
|
||||
// 抢购按钮
|
||||
.cart-btn {
|
||||
position: absolute;
|
||||
|
|
@ -373,6 +447,7 @@
|
|||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// 秒杀限量商品数
|
||||
.limit {
|
||||
font-size: 22rpx;
|
||||
|
|
|
|||
|
|
@ -62,13 +62,14 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 签到说明 TODO @科举:这里改成【已累计签到】 -->
|
||||
<!-- 签到说明 -->
|
||||
<view class="bg-white ss-m-t-16 ss-p-t-30 ss-p-b-60 ss-p-x-40">
|
||||
<view class="activity-title ss-m-b-30">签到说明</view>
|
||||
<view class="activity-des">1、已累计签到{{state.signInfo.totalDay}}天</view>
|
||||
<view class="activity-des">1.已累计签到{{ state.signInfo.totalDay }}天</view>
|
||||
<view class="activity-des">
|
||||
2、据说连续签到第 {{ state.maxDay }} 天可获得超额积分,一定要坚持签到哦~~~
|
||||
2.据说连续签到第 {{ state.maxDay }} 天可获得超额积分,要坚持签到哦~~
|
||||
</view>
|
||||
<view class="activity-des"> 3.积分可以在购物时抵现金结算的哦 ~~</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -159,7 +160,6 @@
|
|||
getSignInfo();
|
||||
getSignConfigList();
|
||||
});
|
||||
// TODO 芋艿:1)css 需要优化,例如说引入的图片;2)删除多余的样式
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -347,8 +347,7 @@
|
|||
.title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
// color: var(--ui-BG-Main);
|
||||
color: #ff6000;
|
||||
color: var(--ui-BG-Main-TC);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
|
|
@ -410,12 +409,10 @@
|
|||
background-color: #f4b409;
|
||||
border-radius: 16rpx;
|
||||
font-size: 20rpx;
|
||||
color: #a57d3f;
|
||||
color: var(--ui-BG-Main-TC);
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.venusSelect {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYWFmYjU3Mi03MGJhLTRiNDctOTI2Yi0zOThlZDkzZDkxMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzkwRkI4NEFEMDFCMTFFODhDNDdBMDVGOTBBN0U2NTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzkwRkI4NDlEMDFCMTFFODhDNDdBMDVGOTBBN0U2NTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmRjNTM0MmUtNmFkOC1iMDRhLThjZTEtMjk2YWYzM2FkMmUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBhYWZiNTcyLTcwYmEtNGI0Ny05MjZiLTM5OGVkOTNkOTEwOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkX00M0AAAfVSURBVHjaxFpdcBNVFD67STbppn9poU0LtSBYykBlgKrjqKOtihbq8ICKILyJwxM+6fjCk2/6pC+O4hs+6fgAbWFw1OID+ICMAwwKlRmKLW3Tpvlrskk3m13Pvdm0NNn//HA73+ymd3Pv+e4595xzT5bJ3DgJNWyMelUqNaD36a8N+9kaEeMR3yAERES952sxsbtya2lIbgQxqH72IT5EbEW8pZKuHkGlugyLyT3aBtW+qpJkKb/qgEeMIAYNnhlUn+Edz2NuokqtNVdTTbqVyhO0Q67qJMt2MnXbTq/cp+9+ZkyOYYFxN4EiLaF5SbokccyKkWRS1z4we4ZDfIE4hmhxvJLNu8HTtg85ekGRRcjOXwIp9pfT4aKIs4iP+f4zYrl78HPEqbLMJNAPXHBI/SQjSTd+PoD3LpCi15wMGVBlSiM+NfSihJ8Jjlt4Rheu5n7wtL+B93IJPO37aH8Z45+ohBdtKUtz7a+jJLK+/dN+BTX5p5MpWh6HF6XNE9iLwr9mSG6VZP65bPR6NVI1BwQZF3BtA+Bq2oG3Pt3HFCVnfUHaX6XQHCeXgVz8Nojz4+SDzTgo2yfIBV9G89utzi5DtRvDcnQ+JSciyd+rH+hdjb22tFOp5mreCUrocg0CPet5LATJvHbldWSiGllIzZpdeR2ZqFPtZTNJSIQeQGv3DucEbcrLmkRSXvP/cs4RZm6Ow/T1McffpyiSJTZ+jDfOZFDlOuARo5p9aKJ2IYkpCN+9AmLsIcSm/3Y0BkWpPCPRX9/nDVI1BTTAI0YRA9r99gWbv3MF90MGvG4WQrfHnRMslWcQMRL55SivbaJk064FjxhFDGj0gad5u22zkrMZiExcBQ7JcW4GlhfuQ3L+gSMTzc9fItcgYiTy8xHeTIOGmnMHtoEn2G971cP3MAUTk+B2MeBBkh4kGbp92ZEGyfxEDj1NLl56j9fbg4U9N6C179zNPZhK7cV7yRZkSYTI3atIjgUXywCLINf03L8gRGZtj0dA5CDyaMg5SPZk+OLhFZLMwtg7hTLDKGJAM09s6QGuY6+upxLTKcgkFmE5FUdFIYQEiHgv4VURl4BjgZon0SA9EeKKi1kZliU8Nnn84OabwIPw+huB8zdR+OqbwdcYMAwB4ux1yEYmtLp+I5WBdft/EApx8Cs9cu6mblyxXXTl9FpOFGDyjzGQMwlwIQlUEDAMagqvhBTVHl4ZplDezpsq+UdOTkMuIcByfBYElCWHmsgpLHQ/NwTe+gaTBH0XWkgGpPgDrfLHl4gTTOj8IVLdTqkF2aIslwF+2zCeGDjzIJ5OwtSVc6Cko9QMCUmWyZMiZJn8cI8E7Lwm11wJOTypBPuHoCG4yVrgz2VBmFBj69pGTvv1hVSN0XSxHE8LRUbaW9G01wdPvHgQQtcugJwMU5LFpIrWDjXMUGIsMNRR5DwcBPcMQV1L0NKchYHIkU2WkiVrTvgT6XEjyN/TY08R5KyAaWc6n3tagMvjhuCzQ+jlOmylVPRZjw/an9kPdYF1lucjIPLJmERoyP9j+8GflIIXPYW4XOKVJAmWZ27Y8nAMaq5t9yB4WjeumJ4hOaIErx/W978JXH2TbY9K5ZNKMhzC5dSjyTapQ5IyFxozvLJGz9Hp/Am+Y7utH8kan+yDhYVp8lVgdDWX33f+ji3gruNpnLPTxNl/8vKtbeTAeKDj0DmhuGShT3Jxkp4guGCv5cnT0QX0hgq4dOnBSshIxxehUbZJbu4OSJEpbXJvnxf0zoP6JMP/keVGTfZYEiCDQlttmXjE1hlTnJ3A+Ketuc53RwSz86AuSXFxitYzueBWUyGWE9E1pqiozoRhXdQJMLAaEyUMMdJyGp2Ux4Lm7iG5h5rkNhweFUpLFtonZANNTmOA3WzmFiGLGY3XlSel0DpOCzRs6gWXj4fkgwnIhKZIcKDhgsTLTCICfMs683gb1tbchiNjgt0TfYFkym7JQkyl8nkoixkMesiGzT1Q19q20t+0dTvwnU/A0iQSDYeoNinBQLOTE/2BjUcvCE5rMoJ2XcSYYBr3FOPmoHHLU+APdtJMpvg7bp8XAr19mKJ1weK9u5CJxUDpMt+HxfJ2HbsoVLzwa1aT4fw8dD3/Au43lv7YYjQF19gAHXv6UYMJa7UepQZFJzMT9fp9lJidorCvgbfkSRXbBB2UDRX5MdREnZYNwZECRcxQXLUnl8s5KPw6MNFsdBFzzdaaE8xGwrUx0eXZORrw3c1NNdEk0ZwUi2OQn7fvZBz9fEZKDjNzFLqn7dYApnVtNtKvecx5oxVfHCsmSt4ts/0rrxiO5NO6jvUWyC0guZgT+SPllu4Jzjr9AT0bjqKWQ1qH0RWQfvKcwzm+s6BB01X6RC1pHIf82w02NRmnsng7WjX28iJqLu5Ec4XXSE5XYg+S91A+UlHS/H2riXfq1n3N8mM2HKOOgutsodkNqZKIMxGQokvFw40jhnFMoZZ70CzyrpLd2S0kb00Oa5KMJDC8LAHL4QEmK4HGKYaSq+/bJFTyZ/GyX+VK3pzUStA1SRJrkTNZrWHG1e8IGuMZt5eqrUH9U8iwUbVci1w1BKnW65RWSVaVnBomAKoI3E9IQEEipX3jap9Q1hxmBElBocp/AmIYcQaRQSQQ36r/E8odvepOxoa5khfRT1pf+8q0/wUYAFU/P0XyeZQPAAAAAElFTkSuQmCC');
|
||||
text-align: center;
|
||||
padding: 2rpx;
|
||||
}
|
||||
|
||||
.venus {
|
||||
|
|
@ -424,7 +421,11 @@
|
|||
background-size: 100% 100%;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
margin: 10rpx 0;
|
||||
margin: 10rpx auto;
|
||||
}
|
||||
|
||||
.venusSelect {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYWFmYjU3Mi03MGJhLTRiNDctOTI2Yi0zOThlZDkzZDkxMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzkwRkI4NEFEMDFCMTFFODhDNDdBMDVGOTBBN0U2NTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzkwRkI4NDlEMDFCMTFFODhDNDdBMDVGOTBBN0U2NTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmRjNTM0MmUtNmFkOC1iMDRhLThjZTEtMjk2YWYzM2FkMmUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBhYWZiNTcyLTcwYmEtNGI0Ny05MjZiLTM5OGVkOTNkOTEwOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkX00M0AAAfVSURBVHjaxFpdcBNVFD67STbppn9poU0LtSBYykBlgKrjqKOtihbq8ICKILyJwxM+6fjCk2/6pC+O4hs+6fgAbWFw1OID+ICMAwwKlRmKLW3Tpvlrskk3m13Pvdm0NNn//HA73+ymd3Pv+e4595xzT5bJ3DgJNWyMelUqNaD36a8N+9kaEeMR3yAERES952sxsbtya2lIbgQxqH72IT5EbEW8pZKuHkGlugyLyT3aBtW+qpJkKb/qgEeMIAYNnhlUn+Edz2NuokqtNVdTTbqVyhO0Q67qJMt2MnXbTq/cp+9+ZkyOYYFxN4EiLaF5SbokccyKkWRS1z4we4ZDfIE4hmhxvJLNu8HTtg85ekGRRcjOXwIp9pfT4aKIs4iP+f4zYrl78HPEqbLMJNAPXHBI/SQjSTd+PoD3LpCi15wMGVBlSiM+NfSihJ8Jjlt4Rheu5n7wtL+B93IJPO37aH8Z45+ohBdtKUtz7a+jJLK+/dN+BTX5p5MpWh6HF6XNE9iLwr9mSG6VZP65bPR6NVI1BwQZF3BtA+Bq2oG3Pt3HFCVnfUHaX6XQHCeXgVz8Nojz4+SDzTgo2yfIBV9G89utzi5DtRvDcnQ+JSciyd+rH+hdjb22tFOp5mreCUrocg0CPet5LATJvHbldWSiGllIzZpdeR2ZqFPtZTNJSIQeQGv3DucEbcrLmkRSXvP/cs4RZm6Ow/T1McffpyiSJTZ+jDfOZFDlOuARo5p9aKJ2IYkpCN+9AmLsIcSm/3Y0BkWpPCPRX9/nDVI1BTTAI0YRA9r99gWbv3MF90MGvG4WQrfHnRMslWcQMRL55SivbaJk064FjxhFDGj0gad5u22zkrMZiExcBQ7JcW4GlhfuQ3L+gSMTzc9fItcgYiTy8xHeTIOGmnMHtoEn2G971cP3MAUTk+B2MeBBkh4kGbp92ZEGyfxEDj1NLl56j9fbg4U9N6C179zNPZhK7cV7yRZkSYTI3atIjgUXywCLINf03L8gRGZtj0dA5CDyaMg5SPZk+OLhFZLMwtg7hTLDKGJAM09s6QGuY6+upxLTKcgkFmE5FUdFIYQEiHgv4VURl4BjgZon0SA9EeKKi1kZliU8Nnn84OabwIPw+huB8zdR+OqbwdcYMAwB4ux1yEYmtLp+I5WBdft/EApx8Cs9cu6mblyxXXTl9FpOFGDyjzGQMwlwIQlUEDAMagqvhBTVHl4ZplDezpsq+UdOTkMuIcByfBYElCWHmsgpLHQ/NwTe+gaTBH0XWkgGpPgDrfLHl4gTTOj8IVLdTqkF2aIslwF+2zCeGDjzIJ5OwtSVc6Cko9QMCUmWyZMiZJn8cI8E7Lwm11wJOTypBPuHoCG4yVrgz2VBmFBj69pGTvv1hVSN0XSxHE8LRUbaW9G01wdPvHgQQtcugJwMU5LFpIrWDjXMUGIsMNRR5DwcBPcMQV1L0NKchYHIkU2WkiVrTvgT6XEjyN/TY08R5KyAaWc6n3tagMvjhuCzQ+jlOmylVPRZjw/an9kPdYF1lucjIPLJmERoyP9j+8GflIIXPYW4XOKVJAmWZ27Y8nAMaq5t9yB4WjeumJ4hOaIErx/W978JXH2TbY9K5ZNKMhzC5dSjyTapQ5IyFxozvLJGz9Hp/Am+Y7utH8kan+yDhYVp8lVgdDWX33f+ji3gruNpnLPTxNl/8vKtbeTAeKDj0DmhuGShT3Jxkp4guGCv5cnT0QX0hgq4dOnBSshIxxehUbZJbu4OSJEpbXJvnxf0zoP6JMP/keVGTfZYEiCDQlttmXjE1hlTnJ3A+Ketuc53RwSz86AuSXFxitYzueBWUyGWE9E1pqiozoRhXdQJMLAaEyUMMdJyGp2Ux4Lm7iG5h5rkNhweFUpLFtonZANNTmOA3WzmFiGLGY3XlSel0DpOCzRs6gWXj4fkgwnIhKZIcKDhgsTLTCICfMs683gb1tbchiNjgt0TfYFkym7JQkyl8nkoixkMesiGzT1Q19q20t+0dTvwnU/A0iQSDYeoNinBQLOTE/2BjUcvCE5rMoJ2XcSYYBr3FOPmoHHLU+APdtJMpvg7bp8XAr19mKJ1weK9u5CJxUDpMt+HxfJ2HbsoVLzwa1aT4fw8dD3/Au43lv7YYjQF19gAHXv6UYMJa7UepQZFJzMT9fp9lJidorCvgbfkSRXbBB2UDRX5MdREnZYNwZECRcxQXLUnl8s5KPw6MNFsdBFzzdaaE8xGwrUx0eXZORrw3c1NNdEk0ZwUi2OQn7fvZBz9fEZKDjNzFLqn7dYApnVtNtKvecx5oxVfHCsmSt4ts/0rrxiO5NO6jvUWyC0guZgT+SPllu4Jzjr9AT0bjqKWQ1qH0RWQfvKcwzm+s6BB01X6RC1pHIf82w02NRmnsng7WjX28iJqLu5Ec4XXSE5XYg+S91A+UlHS/H2riXfq1n3N8mM2HKOOgutsodkNqZKIMxGQokvFw40jhnFMoZZ70CzyrpLd2S0kb00Oa5KMJDC8LAHL4QEmK4HGKYaSq+/bJFTyZ/GyX+VK3pzUStA1SRJrkTNZrWHG1e8IGuMZt5eqrUH9U8iwUbVci1w1BKnW65RWSVaVnBomAKoI3E9IQEEipX3jap9Q1hxmBElBocp/AmIYcQaRQSQQ36r/E8odvepOxoa5khfRT1pf+8q0/wUYAFU/P0XyeZQPAAAAAElFTkSuQmCC');
|
||||
}
|
||||
|
||||
.num {
|
||||
|
|
@ -435,7 +436,7 @@
|
|||
.item {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #eee;
|
||||
flex-direction: column;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
|
|
@ -446,6 +447,6 @@
|
|||
}
|
||||
|
||||
.on {
|
||||
background-color: #999 !important;
|
||||
color: #f4b409;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,15 @@
|
|||
<template>
|
||||
<view class="goods ss-flex">
|
||||
<image class="image" :src="sheep.$url.cdn(goodsData.image)" mode="aspectFill"> </image>
|
||||
<view class="ss-flex-1">
|
||||
<view class="title ss-line-2">
|
||||
{{ goodsData.title }}
|
||||
</view>
|
||||
<view v-if="goodsData.subtitle" class="subtitle ss-line-1">
|
||||
{{ goodsData.subtitle }}
|
||||
</view>
|
||||
<view class="price ss-m-t-8">
|
||||
¥{{ isArray(goodsData.price) ? goodsData.price[0] : goodsData.price }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-goods-item
|
||||
:title="goodsData.spuName"
|
||||
:img="goodsData.picUrl"
|
||||
:price="goodsData.price"
|
||||
:skuText="goodsData.introduction"
|
||||
priceColor="#FF3000"
|
||||
:titleWidth="400"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { isArray } from 'lodash';
|
||||
|
||||
const props = defineProps({
|
||||
goodsData: {
|
||||
|
|
@ -27,37 +19,3 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods {
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.image {
|
||||
width: 116rpx;
|
||||
height: 116rpx;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 64rpx;
|
||||
line-height: 32rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ff3000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<view class="send-wrap ss-flex">
|
||||
<view class="left ss-flex ss-flex-1">
|
||||
<optimize-input
|
||||
class="ss-flex-1 ss-p-l-22"
|
||||
:inputBorder="false"
|
||||
:clearable="false"
|
||||
v-model="message"
|
||||
placeholder="请输入你要咨询的问题"
|
||||
></optimize-input>
|
||||
</view>
|
||||
<text class="sicon-basic bq" @tap.stop="onTools('emoji')"></text>
|
||||
<text
|
||||
v-if="!message"
|
||||
class="sicon-edit"
|
||||
:class="{ 'is-active': toolsMode === 'tools' }"
|
||||
@tap.stop="onTools('tools')"
|
||||
/>
|
||||
<button
|
||||
v-if="message"
|
||||
class="ss-reset-button send-btn"
|
||||
@tap="sendMessage"
|
||||
:disabled="isDisabled || sending"
|
||||
:class="{ disabled: isDisabled || sending }"
|
||||
>
|
||||
<text v-if="sending">发送中</text>
|
||||
<text v-else>发送</text>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, onUnmounted } from 'vue';
|
||||
import OptimizeInput from '@/pages/chat/components/optimize-input.vue';
|
||||
/**
|
||||
* 消息发送组件
|
||||
*/
|
||||
const props = defineProps({
|
||||
// 消息
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 工具模式
|
||||
toolsMode: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue', 'onTools', 'sendMessage']);
|
||||
const message = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(newValue) {
|
||||
emits(`update:modelValue`, newValue);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 打开工具菜单
|
||||
function onTools(mode) {
|
||||
emits('onTools', mode);
|
||||
}
|
||||
|
||||
// 发送消息
|
||||
function sendMessage() {
|
||||
emits('sendMessage');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.send-wrap {
|
||||
padding: 18rpx 20rpx;
|
||||
background: #fff;
|
||||
|
||||
.left {
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
background: var(--ui-BG-1);
|
||||
}
|
||||
|
||||
.bq {
|
||||
font-size: 50rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.sicon-edit {
|
||||
font-size: 50rpx;
|
||||
margin-left: 10rpx;
|
||||
transform: rotate(0deg);
|
||||
transition: all linear 0.2s;
|
||||
|
||||
&.is-active {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width: 100rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 30rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
margin-left: 11rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
<template>
|
||||
<!-- 聊天列表使用scroll-view原生组件,整体倒置 -->
|
||||
<scroll-view
|
||||
:scroll-top="scroll.top"
|
||||
class="chat-scroll-view"
|
||||
scroll-y
|
||||
:refresher-enabled="false"
|
||||
@scroll="onScroll"
|
||||
@scrolltolower="loadMoreHistory"
|
||||
style="transform: scaleY(-1)"
|
||||
>
|
||||
<!-- 消息列表容器 -->
|
||||
<view class="message-container">
|
||||
<!-- 加载更多提示 -->
|
||||
<view v-if="isLoading" class="loading-more" style="transform: scaleY(-1)">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<!-- 消息列表 -->
|
||||
<view class="message-list">
|
||||
<view
|
||||
v-for="(item, index) in messageList"
|
||||
:key="item.id"
|
||||
class="message-item"
|
||||
style="transform: scaleY(-1)"
|
||||
>
|
||||
<!-- 消息渲染 -->
|
||||
<MessageListItem
|
||||
:message="item"
|
||||
:message-index="index"
|
||||
:message-list="messageList"
|
||||
></MessageListItem>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部聊天输入框 -->
|
||||
<su-fixed bottom>
|
||||
<view v-if="showTip" class="back-top ss-flex ss-row-center ss-m-b-10" @tap="scrollToTop">
|
||||
<text class="back-top-item ss-flex ss-row-center">
|
||||
{{ showNewMessageTip ? '有新消息' : '回到底部' }}
|
||||
</text>
|
||||
</view>
|
||||
<slot name="bottom"></slot>
|
||||
</su-fixed>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MessageListItem from '@/pages/chat/components/messageListItem.vue';
|
||||
import { onMounted, reactive, ref, computed } from 'vue';
|
||||
import KeFuApi from '@/sheep/api/promotion/kefu';
|
||||
import { isEmpty } from '@/sheep/helper/utils';
|
||||
import { formatDate } from '@/sheep/helper/utils';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const { safeAreaInsets } = sheep.$platform.device;
|
||||
const safeAreaInsetsBottom = safeAreaInsets.bottom + 'px'; // 底部安全区域
|
||||
const messageList = ref([]); // 消息列表
|
||||
const showTip = ref(false); // 显示提示
|
||||
const showNewMessageTip = ref(false); // 显示有新消息提示
|
||||
const refreshMessage = ref(false); // 更新消息列表
|
||||
const isLoading = ref(false); // 是否正在加载更多
|
||||
const hasMore = ref(true); // 是否还有更多数据
|
||||
const keyboardHeight = ref(0); // 键盘高度
|
||||
const scroll = ref({
|
||||
top: 0,
|
||||
oldTop: 0,
|
||||
}); // 滚动位置记录
|
||||
const queryParams = reactive({
|
||||
no: 1,
|
||||
limit: 20,
|
||||
createTime: undefined,
|
||||
}); // 查询参数
|
||||
|
||||
// 计算聊天窗口高度
|
||||
const chatScrollHeight = computed(() => {
|
||||
const baseHeight = 'calc(100vh - 150px - ' + safeAreaInsetsBottom + ')';
|
||||
if (keyboardHeight.value > 0) {
|
||||
// 键盘弹起状态,减去键盘高度
|
||||
return `calc(${baseHeight} - ${keyboardHeight.value}px)`;
|
||||
}
|
||||
return baseHeight;
|
||||
});
|
||||
|
||||
// 获得消息分页列表
|
||||
const getMessageList = async () => {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const { data } = await KeFuApi.getKefuMessageList(queryParams);
|
||||
if (isEmpty(data)) {
|
||||
hasMore.value = false;
|
||||
return;
|
||||
}
|
||||
if (queryParams.no > 1 && refreshMessage.value) {
|
||||
const newMessageList = [];
|
||||
for (const message of data) {
|
||||
if (messageList.value.some((val) => val.id === message.id)) {
|
||||
continue;
|
||||
}
|
||||
newMessageList.push(message);
|
||||
}
|
||||
// 新消息追加到开头
|
||||
messageList.value = [...newMessageList, ...messageList.value];
|
||||
refreshMessage.value = false; // 更新好后重置状态
|
||||
return;
|
||||
}
|
||||
|
||||
if (queryParams.no > 1) {
|
||||
// 加载更多历史消息,追加到现有列表末尾(因为是倒置的,所以旧消息在底部/列表末尾)
|
||||
if (data.length < queryParams.limit) {
|
||||
hasMore.value = false; // 如果返回的数据少于请求的数量,说明没有更多数据了
|
||||
}
|
||||
|
||||
// 过滤掉已存在的消息
|
||||
const historyMessages = data.filter(
|
||||
(msg) => !messageList.value.some((existing) => existing.id === msg.id),
|
||||
);
|
||||
|
||||
if (historyMessages.length > 0) {
|
||||
messageList.value = [...messageList.value, ...historyMessages];
|
||||
}
|
||||
} else {
|
||||
// 首次加载
|
||||
messageList.value = data;
|
||||
|
||||
if (data.length < queryParams.limit) {
|
||||
hasMore.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (data.slice(-1).length > 0) {
|
||||
// 设置最后一次历史查询的最后一条消息的 createTime
|
||||
queryParams.createTime = formatDate(data.slice(-1)[0].createTime);
|
||||
}
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 加载更多历史数据 */
|
||||
const loadMoreHistory = async () => {
|
||||
if (isLoading.value || !hasMore.value) return;
|
||||
|
||||
// 增加页码
|
||||
queryParams.no += 1;
|
||||
await getMessageList();
|
||||
};
|
||||
|
||||
/** 刷新消息列表 */
|
||||
const refreshMessageList = async (message = undefined) => {
|
||||
if (typeof message !== 'undefined') {
|
||||
// 追加数据到列表开头(因为是倒置的,所以新消息在顶部/列表开头)
|
||||
messageList.value.unshift(message);
|
||||
showNewMessageTip.value = true;
|
||||
} else {
|
||||
queryParams.createTime = undefined;
|
||||
refreshMessage.value = true;
|
||||
await getMessageList();
|
||||
}
|
||||
|
||||
// 若已是第一页则不做处理
|
||||
if (queryParams.no > 1) {
|
||||
showTip.value = true;
|
||||
} else {
|
||||
scrollToTop();
|
||||
}
|
||||
};
|
||||
|
||||
/** 滚动到顶部(倒置后相当于滚动到最新消息) */
|
||||
const scrollToTop = () => {
|
||||
scroll.value.top = scroll.value.oldTop;
|
||||
setTimeout(() => {
|
||||
scroll.value.top = 0;
|
||||
}, 200); // 等待 view 层同步
|
||||
showTip.value = false;
|
||||
};
|
||||
|
||||
/** 设置键盘高度 */
|
||||
const setKeyboardHeight = (height) => {
|
||||
keyboardHeight.value = height;
|
||||
// 键盘弹起时,滚动到最新消息
|
||||
if (height > 0) {
|
||||
scrollToTop();
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ getMessageList, refreshMessageList });
|
||||
|
||||
/** 监听消息列表滚动 */
|
||||
const onScroll = (e) => {
|
||||
const { scrollTop } = e.detail;
|
||||
scroll.value.oldTop = scrollTop;
|
||||
// 当滚动位置超过一定值时,显示"新消息"提示
|
||||
if (scrollTop > 100) {
|
||||
showTip.value = true;
|
||||
} else {
|
||||
showTip.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听键盘弹起和收起事件
|
||||
const setupKeyboardListeners = () => {
|
||||
// #ifdef H5
|
||||
// H5环境
|
||||
window.addEventListener('resize', () => {
|
||||
// 窗口大小变化可能是由键盘引起的
|
||||
if (
|
||||
document.activeElement &&
|
||||
(document.activeElement.tagName === 'INPUT' ||
|
||||
document.activeElement.tagName === 'TEXTAREA')
|
||||
) {
|
||||
// 估算键盘高度,实际上是窗口高度变化
|
||||
const currentHeight = window.innerHeight;
|
||||
const viewportHeight = window.visualViewport
|
||||
? window.visualViewport.height
|
||||
: window.innerHeight;
|
||||
const keyboardHeight = currentHeight - viewportHeight;
|
||||
setKeyboardHeight(keyboardHeight > 0 ? keyboardHeight : 0);
|
||||
} else {
|
||||
setKeyboardHeight(0);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// TODO puhui999: 小程序键盘弹起还有点问题,看看怎么适配
|
||||
// 微信小程序环境
|
||||
uni.onKeyboardHeightChange((res) => {
|
||||
setKeyboardHeight(res.height);
|
||||
});
|
||||
// #endif
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
queryParams.no = 1; // 确保首次加载是第一页
|
||||
scroll.value = {
|
||||
top: 0,
|
||||
oldTop: 0,
|
||||
};
|
||||
getMessageList();
|
||||
setupKeyboardListeners();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chat-scroll-view {
|
||||
height: v-bind(chatScrollHeight);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: #f8f8f8;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.message-container {
|
||||
width: 100%;
|
||||
/* 确保容器至少有一屏高度 */
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.loading-more {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.back-top {
|
||||
.back-top-item {
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
background-color: #fff;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
<template>
|
||||
<view class="chat-box">
|
||||
<!-- 消息渲染 -->
|
||||
<view class="message-item ss-flex-col scroll-item">
|
||||
<view class="ss-flex ss-row-center ss-col-center">
|
||||
<!-- 系统消息 -->
|
||||
<view
|
||||
v-if="message.contentType === KeFuMessageContentTypeEnum.SYSTEM"
|
||||
class="system-message"
|
||||
>
|
||||
{{ message.content }}
|
||||
</view>
|
||||
<!-- 日期 - 移到消息内容上方显示 -->
|
||||
<view
|
||||
v-if="
|
||||
message.contentType !== KeFuMessageContentTypeEnum.SYSTEM &&
|
||||
showTime(message, messageIndex)
|
||||
"
|
||||
class="date-message"
|
||||
>
|
||||
{{ formatDate(message.createTime) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 消息体渲染管理员消息和用户消息并左右展示 -->
|
||||
<view
|
||||
v-if="message.contentType !== KeFuMessageContentTypeEnum.SYSTEM"
|
||||
class="ss-flex ss-col-top"
|
||||
:class="[
|
||||
message.senderType === UserTypeEnum.ADMIN
|
||||
? `ss-row-left`
|
||||
: message.senderType === UserTypeEnum.MEMBER
|
||||
? `ss-row-right`
|
||||
: '',
|
||||
]"
|
||||
>
|
||||
<!-- 客服头像 -->
|
||||
<image
|
||||
v-show="message.senderType === UserTypeEnum.ADMIN"
|
||||
class="chat-avatar ss-m-r-24"
|
||||
:src="sheep.$url.cdn(message.senderAvatar) || sheep.$url.static('')"
|
||||
mode="aspectFill"
|
||||
lazy-load
|
||||
/>
|
||||
<!-- 内容 -->
|
||||
<template v-if="message.contentType === KeFuMessageContentTypeEnum.TEXT">
|
||||
<view class="message-box" :class="{ admin: message.senderType === UserTypeEnum.ADMIN }">
|
||||
<mp-html :content="processedContent" :domain="sheep.$url.cdn('')" lazy-load />
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="message.contentType === KeFuMessageContentTypeEnum.IMAGE">
|
||||
<view
|
||||
class="message-box"
|
||||
:class="{ admin: message.senderType === UserTypeEnum.ADMIN }"
|
||||
:style="{ width: '200rpx' }"
|
||||
>
|
||||
<su-image
|
||||
class="message-img"
|
||||
isPreview
|
||||
:previewList="[sheep.$url.cdn(getMessageContent(message).picUrl || message.content)]"
|
||||
:current="0"
|
||||
:src="sheep.$url.cdn(getMessageContent(message).picUrl || message.content)"
|
||||
:height="200"
|
||||
:width="200"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="message.contentType === KeFuMessageContentTypeEnum.PRODUCT">
|
||||
<div class="ss-m-b-10">
|
||||
<GoodsItem
|
||||
:goodsData="getMessageContent(message)"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/goods/index', { id: getMessageContent(message).spuId })
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="message.contentType === KeFuMessageContentTypeEnum.ORDER">
|
||||
<OrderItem
|
||||
:orderData="getMessageContent(message)"
|
||||
@tap="sheep.$router.go('/pages/order/detail', { id: getMessageContent(message).id })"
|
||||
/>
|
||||
</template>
|
||||
<!-- user头像 -->
|
||||
<image
|
||||
v-if="message.senderType === UserTypeEnum.MEMBER"
|
||||
class="chat-avatar ss-m-l-24"
|
||||
:src="
|
||||
sheep.$url.cdn(userInfo.avatar) ||
|
||||
sheep.$url.static('/static/img/shop/chat/default.png')
|
||||
"
|
||||
mode="aspectFill"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, unref } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { KeFuMessageContentTypeEnum, UserTypeEnum } from '@/pages/chat/util/constants';
|
||||
import { emojiList } from '@/pages/chat/util/emoji';
|
||||
import sheep from '@/sheep';
|
||||
import { formatDate, jsonParse } from '@/sheep/helper/utils';
|
||||
import GoodsItem from '@/pages/chat/components/goods.vue';
|
||||
import OrderItem from '@/pages/chat/components/order.vue';
|
||||
|
||||
const props = defineProps({
|
||||
// 消息
|
||||
message: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
// 消息索引
|
||||
messageIndex: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// 消息列表
|
||||
messageList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const getMessageContent = computed(() => (item) => jsonParse(item.content)); // 解析消息内容
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
|
||||
//======================= 工具 =======================
|
||||
|
||||
const showTime = computed(() => (item, index) => {
|
||||
if (unref(props.messageList)[index + 1]) {
|
||||
let dateString = dayjs(unref(props.messageList)[index + 1].createTime).fromNow();
|
||||
return dateString !== dayjs(unref(item).createTime).fromNow();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// 缓存表情映射
|
||||
const emojiMap = computed(() => {
|
||||
const map = new Map();
|
||||
emojiList.forEach((emoji) => {
|
||||
map.set(emoji.name, emoji.file);
|
||||
});
|
||||
return map;
|
||||
});
|
||||
|
||||
// 处理表情 - 进行缓存优化
|
||||
function replaceEmoji(data) {
|
||||
let newData = data;
|
||||
if (typeof newData !== 'object') {
|
||||
let reg = /\[(.+?)]/g; // [] 中括号
|
||||
let zhEmojiName = newData.match(reg);
|
||||
if (zhEmojiName) {
|
||||
zhEmojiName.forEach((item) => {
|
||||
const emojiFile = emojiMap.value.get(item) || '';
|
||||
if (emojiFile) {
|
||||
newData = newData.replace(
|
||||
item,
|
||||
`<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;vertical-align: middle;" src="${sheep.$url.cdn(
|
||||
'/static/img/chat/emoji/' + emojiFile,
|
||||
)}"/>`,
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return newData;
|
||||
}
|
||||
|
||||
// 预处理内容,避免重复计算
|
||||
const processedContent = computed(() => {
|
||||
if (props.message.contentType === KeFuMessageContentTypeEnum.TEXT) {
|
||||
return replaceEmoji(getMessageContent.value(props.message).text || props.message.content);
|
||||
}
|
||||
return props.message.content;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.message-item {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.date-message,
|
||||
.system-message {
|
||||
width: fit-content;
|
||||
border-radius: 12rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
background-color: var(--ui-BG-3);
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.chat-avatar {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.send-status {
|
||||
color: #333;
|
||||
height: 80rpx;
|
||||
margin-right: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.loading {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
-webkit-animation: rotating 2s linear infinite;
|
||||
animation: rotating 2s linear infinite;
|
||||
|
||||
@-webkit-keyframes rotating {
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warning {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
color: #ff3000;
|
||||
}
|
||||
}
|
||||
|
||||
.message-box {
|
||||
max-width: 50%;
|
||||
font-size: 16px;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
padding: 20rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
margin-top: 3px;
|
||||
margin-bottom: 9px;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
&.admin {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 9px;
|
||||
border-radius: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.imgred {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.imgred,
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.goods,
|
||||
.order {
|
||||
max-width: 500rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.message-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.error-img {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,540 @@
|
|||
<template>
|
||||
<view
|
||||
class="uni-easyinput"
|
||||
:class="{ 'uni-easyinput-error': msg }"
|
||||
:style="{ color: inputBorder && msg ? '#e43d33' : styles.color }"
|
||||
>
|
||||
<view
|
||||
class="uni-easyinput__content"
|
||||
:class="{
|
||||
'is-input-border': inputBorder,
|
||||
'is-input-error-border': inputBorder && msg,
|
||||
'is-textarea': type === 'textarea',
|
||||
'is-disabled': disabled
|
||||
}"
|
||||
:style="{
|
||||
'border-color': inputBorder && msg ? '#dd524d' : styles.borderColor,
|
||||
'background-color': disabled ? styles.disableColor : ''
|
||||
}"
|
||||
>
|
||||
<uni-icons
|
||||
v-if="prefixIcon"
|
||||
class="content-clear-icon"
|
||||
:type="prefixIcon"
|
||||
color="#c0c4cc"
|
||||
@click="onClickIcon('prefix')"
|
||||
></uni-icons>
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
class="uni-easyinput__content-textarea"
|
||||
:class="{ 'input-padding': inputBorder }"
|
||||
:name="name"
|
||||
:value="val"
|
||||
:placeholder="placeholder"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
:disabled="disabled"
|
||||
placeholder-class="uni-easyinput__placeholder-class"
|
||||
:maxlength="inputMaxlength"
|
||||
:focus="focused"
|
||||
:autoHeight="autoHeight"
|
||||
:adjust-position="false"
|
||||
@input="onInput"
|
||||
@blur="onBlur"
|
||||
@focus="onFocus"
|
||||
@confirm="onConfirm"
|
||||
></textarea>
|
||||
<input
|
||||
v-else
|
||||
:type="type === 'password' ? 'text' : type"
|
||||
class="uni-easyinput__content-input"
|
||||
:style="{
|
||||
'padding-right': type === 'password' || clearable || prefixIcon ? '' : '10px',
|
||||
'padding-left': paddingLeft + 'px'
|
||||
|
||||
}"
|
||||
:name="name"
|
||||
:value="val"
|
||||
:password="!showPassword && type === 'password'"
|
||||
:placeholder="placeholder"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
placeholder-class="uni-easyinput__placeholder-class"
|
||||
:disabled="disabled"
|
||||
:maxlength="inputMaxlength"
|
||||
:focus="focused"
|
||||
:confirmType="confirmType"
|
||||
:adjust-position="false"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@input="onInput"
|
||||
@change="onInput"
|
||||
@confirm="onConfirm"
|
||||
:cursor-spacing="30"
|
||||
always-embed
|
||||
/>
|
||||
<template v-if="type === 'password' && passwordIcon">
|
||||
<uni-icons
|
||||
v-if="val"
|
||||
class="content-clear-icon"
|
||||
:class="{ 'is-textarea-icon': type === 'textarea' }"
|
||||
:type="showPassword ? 'eye-slash-filled' : 'eye-filled'"
|
||||
:size="18"
|
||||
color="#c0c4cc"
|
||||
@click="onEyes"
|
||||
></uni-icons>
|
||||
</template>
|
||||
<template v-else-if="suffixIcon">
|
||||
<uni-icons
|
||||
v-if="suffixIcon"
|
||||
class="content-clear-icon"
|
||||
:type="suffixIcon"
|
||||
color="#c0c4cc"
|
||||
@click="onClickIcon('suffix')"
|
||||
></uni-icons>
|
||||
</template>
|
||||
<template v-else>
|
||||
<uni-icons
|
||||
class="content-clear-icon"
|
||||
:class="{ 'is-textarea-icon': type === 'textarea' }"
|
||||
type="clear"
|
||||
:size="clearSize"
|
||||
v-if="clearable && val && !disabled"
|
||||
color="#c0c4cc"
|
||||
@click="onClear"
|
||||
></uni-icons>
|
||||
</template>
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import {
|
||||
// debounce,
|
||||
// throttle
|
||||
// } from './common.js'
|
||||
/**
|
||||
* Easyinput 输入框
|
||||
* @description 此组件可以实现表单的输入与校验,包括 "text" 和 "textarea" 类型。
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=3455
|
||||
* @property {String} value 输入内容
|
||||
* @property {String } type 输入框的类型(默认text) password/text/textarea/..
|
||||
* @value text 文本输入键盘
|
||||
* @value textarea 多行文本输入键盘
|
||||
* @value password 密码输入键盘
|
||||
* @value number 数字输入键盘,注意iOS上app-vue弹出的数字键盘并非9宫格方式
|
||||
* @value idcard 身份证输入键盘,信、支付宝、百度、QQ小程序
|
||||
* @value digit 带小数点的数字键盘 ,App的nvue页面、微信、支付宝、百度、头条、QQ小程序支持
|
||||
* @property {Boolean} clearable 是否显示右侧清空内容的图标控件,点击可清空输入框内容(默认true)
|
||||
* @property {Boolean} autoHeight 是否自动增高输入区域,type为textarea时有效(默认false)
|
||||
* @property {String } placeholder 输入框的提示文字
|
||||
* @property {String } placeholderStyle placeholder的样式(内联样式,字符串),如"color: #ddd"
|
||||
* @property {Boolean} focus 是否自动获得焦点(默认false)
|
||||
* @property {Boolean} disabled 是否禁用(默认false)
|
||||
* @property {Number } maxlength 最大输入长度,设置为 -1 的时候不限制最大长度(默认140)
|
||||
* @property {String } confirmType 设置键盘右下角按钮的文字,仅在type="text"时生效(默认done)
|
||||
* @property {Number } clearSize 清除图标的大小,单位px(默认15)
|
||||
* @property {String} prefixIcon 输入框头部图标
|
||||
* @property {String} suffixIcon 输入框尾部图标
|
||||
* @property {Boolean} trim 是否自动去除两端的空格
|
||||
* @value both 去除两端空格
|
||||
* @value left 去除左侧空格
|
||||
* @value right 去除右侧空格
|
||||
* @value start 去除左侧空格
|
||||
* @value end 去除右侧空格
|
||||
* @value all 去除全部空格
|
||||
* @value none 不去除空格
|
||||
* @property {Boolean} inputBorder 是否显示input输入框的边框(默认true)
|
||||
* @property {Boolean} passwordIcon type=password时是否显示小眼睛图标
|
||||
* @property {Object} styles 自定义颜色
|
||||
* @event {Function} input 输入框内容发生变化时触发
|
||||
* @event {Function} focus 输入框获得焦点时触发
|
||||
* @event {Function} blur 输入框失去焦点时触发
|
||||
* @event {Function} confirm 点击完成按钮时触发
|
||||
* @event {Function} iconClick 点击图标时触发
|
||||
* @example <uni-easyinput v-model="mobile"></uni-easyinput>
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'optimize-input',
|
||||
emits: ['click', 'iconClick', 'update:modelValue', 'input', 'focus', 'blur', 'confirm'],
|
||||
model: {
|
||||
prop: 'modelValue',
|
||||
event: 'update:modelValue'
|
||||
},
|
||||
props: {
|
||||
name: String,
|
||||
value: [Number, String],
|
||||
modelValue: [Number, String],
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoHeight: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
placeholder: String,
|
||||
placeholderStyle: String,
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
maxlength: {
|
||||
type: [Number, String],
|
||||
default: 140
|
||||
},
|
||||
confirmType: {
|
||||
type: String,
|
||||
default: 'done'
|
||||
},
|
||||
clearSize: {
|
||||
type: [Number, String],
|
||||
default: 15
|
||||
},
|
||||
inputBorder: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
prefixIcon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
suffixIcon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
trim: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
passwordIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
styles: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
color: '#333',
|
||||
disableColor: '#F7F6F6',
|
||||
borderColor: '#e5e5e5'
|
||||
};
|
||||
}
|
||||
},
|
||||
errorMessage: {
|
||||
type: [String, Boolean],
|
||||
default: ''
|
||||
},
|
||||
paddingLeft:{
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
focused: false,
|
||||
errMsg: '',
|
||||
val: '',
|
||||
showMsg: '',
|
||||
border: false,
|
||||
isFirstBorder: false,
|
||||
showClearIcon: false,
|
||||
showPassword: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
msg() {
|
||||
return this.errorMessage || this.errMsg;
|
||||
},
|
||||
// 因为uniapp的input组件的maxlength组件必须要数值,这里转为数值,用户可以传入字符串数值
|
||||
inputMaxlength() {
|
||||
return Number(this.maxlength);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
if (this.errMsg) this.errMsg = '';
|
||||
this.val = newVal;
|
||||
// fix by mehaotian is_reset 在 uni-forms 中定义
|
||||
if (this.form && this.formItem && !this.is_reset) {
|
||||
this.is_reset = false;
|
||||
this.formItem.setValue(newVal);
|
||||
}
|
||||
},
|
||||
modelValue(newVal) {
|
||||
if (this.errMsg) this.errMsg = '';
|
||||
this.val = newVal;
|
||||
if (this.form && this.formItem && !this.is_reset) {
|
||||
this.is_reset = false;
|
||||
this.formItem.setValue(newVal);
|
||||
}
|
||||
},
|
||||
focus(newVal) {
|
||||
this.$nextTick(() => {
|
||||
this.focused = this.focus;
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!this.value && this.value !== 0) {
|
||||
this.val = this.modelValue;
|
||||
}
|
||||
if (!this.modelValue && this.modelValue !== 0) {
|
||||
this.val = this.value;
|
||||
}
|
||||
this.form = this.getForm('uniForms');
|
||||
this.formItem = this.getForm('uniFormsItem');
|
||||
if (this.form && this.formItem) {
|
||||
if (this.formItem.name) {
|
||||
if (!this.is_reset) {
|
||||
this.is_reset = false;
|
||||
this.formItem.setValue(this.val);
|
||||
}
|
||||
this.rename = this.formItem.name;
|
||||
this.form.inputChildrens.push(this);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.focused = this.focus;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 初始化变量值
|
||||
*/
|
||||
init() {},
|
||||
onClickIcon(type) {
|
||||
this.$emit('iconClick', type);
|
||||
},
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getForm(name = 'uniForms') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false;
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
|
||||
onEyes() {
|
||||
this.showPassword = !this.showPassword;
|
||||
},
|
||||
onInput(event) {
|
||||
let value = event.detail.value;
|
||||
// 判断是否去除空格
|
||||
if (this.trim) {
|
||||
if (typeof this.trim === 'boolean' && this.trim) {
|
||||
value = this.trimStr(value);
|
||||
}
|
||||
if (typeof this.trim === 'string') {
|
||||
value = this.trimStr(value, this.trim);
|
||||
}
|
||||
}
|
||||
if (this.errMsg) this.errMsg = '';
|
||||
this.val = value;
|
||||
// TODO 兼容 vue2
|
||||
this.$emit('input', value);
|
||||
// TODO 兼容 vue3
|
||||
this.$emit('update:modelValue', value);
|
||||
},
|
||||
onFocus(event) {
|
||||
this.$emit('focus', event);
|
||||
},
|
||||
onBlur(event) {
|
||||
let value = event.detail.value;
|
||||
this.$emit('blur', event);
|
||||
},
|
||||
onConfirm(e) {
|
||||
this.$emit('confirm', e.detail.value);
|
||||
},
|
||||
onClear(event) {
|
||||
this.val = '';
|
||||
// TODO 兼容 vue2
|
||||
this.$emit('input', '');
|
||||
// TODO 兼容 vue2
|
||||
// TODO 兼容 vue3
|
||||
this.$emit('update:modelValue', '');
|
||||
},
|
||||
fieldClick() {
|
||||
this.$emit('click');
|
||||
},
|
||||
trimStr(str, pos = 'both') {
|
||||
if (pos === 'both') {
|
||||
return str.trim();
|
||||
} else if (pos === 'left') {
|
||||
return str.trimLeft();
|
||||
} else if (pos === 'right') {
|
||||
return str.trimRight();
|
||||
} else if (pos === 'start') {
|
||||
return str.trimStart();
|
||||
} else if (pos === 'end') {
|
||||
return str.trimEnd();
|
||||
} else if (pos === 'all') {
|
||||
return str.replace(/\s+/g, '');
|
||||
} else if (pos === 'none') {
|
||||
return str;
|
||||
}
|
||||
return str;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-error: #e43d33;
|
||||
$uni-border-1: #dcdfe6 !default;
|
||||
.uni-easyinput {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.uni-easyinput__content {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
min-height: 72rpx;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-easyinput__content-input {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: auto;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
line-height: 56rpx;
|
||||
font-size: 28rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
.uni-easyinput__placeholder-class {
|
||||
color: #bbbbbb;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
.is-textarea {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-textarea-icon {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.uni-easyinput__content-textarea {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 10px;
|
||||
height: 80px;
|
||||
/* #ifndef APP-NVUE */
|
||||
min-height: 80px;
|
||||
width: auto;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.input-padding {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.content-clear-icon {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.label-icon {
|
||||
margin-right: 5px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
// 显示边框
|
||||
.is-input-border {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border: 1px solid $uni-border-1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.uni-error-message {
|
||||
position: absolute;
|
||||
bottom: -17px;
|
||||
left: 0;
|
||||
line-height: 12px;
|
||||
color: $uni-error;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.uni-error-msg--boeder {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.is-input-error-border {
|
||||
border-color: $uni-error;
|
||||
.uni-easyinput__placeholder-class {
|
||||
// color: mix(#fff, $uni-error, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.uni-easyinput--border {
|
||||
margin-bottom: 0;
|
||||
padding: 10px 15px;
|
||||
// padding-bottom: 0;
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
|
||||
.uni-easyinput-error {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.is-first-border {
|
||||
/* #ifndef APP-NVUE */
|
||||
border: none;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
border-width: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
border-color: red;
|
||||
background-color: #f7f6f6;
|
||||
color: #d5d5d5;
|
||||
.uni-easyinput__placeholder-class {
|
||||
color: #d5d5d5;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,49 +1,36 @@
|
|||
<template>
|
||||
<view class="order">
|
||||
<view class="top ss-flex ss-row-between">
|
||||
<span>{{ orderData.order_sn }}</span>
|
||||
<span>{{ orderData.create_time.split(' ')[1] }}</span>
|
||||
<view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
|
||||
:key="orderData.id">
|
||||
<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
|
||||
<view class="order-no">订单号:{{ orderData.no }}</view>
|
||||
<view class="order-state ss-font-26" :class="formatOrderColor(orderData)">
|
||||
{{ formatOrderStatus(orderData) }}
|
||||
</view>
|
||||
<template v-if="from != 'msg'">
|
||||
<view class="bottom ss-flex" v-for="item in orderData.items" :key="item">
|
||||
<image class="image" :src="sheep.$url.cdn(item.goods_image)" mode="aspectFill"> </image>
|
||||
<view class="ss-flex-1">
|
||||
<view class="title ss-line-2">
|
||||
{{ item.goods_title }}
|
||||
</view>
|
||||
<view v-if="item.goods_num" class="num ss-m-b-10"> 数量:{{ item.goods_num }} </view>
|
||||
<view class="ss-flex ss-row-between ss-m-t-8">
|
||||
<span class="price">¥{{ item.goods_price }}</span>
|
||||
<span class="status">{{ orderData.status_text }}</span>
|
||||
<view class="border-bottom" v-for="item in orderData.items" :key="item.id">
|
||||
<s-goods-item
|
||||
:img="item.picUrl"
|
||||
:title="item.spuName"
|
||||
:skuText="item.properties.map((property) => property.valueName).join(' ')"
|
||||
:price="item.price"
|
||||
:num="item.count"
|
||||
/>
|
||||
</view>
|
||||
<view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="discounts-title pay-color">共 {{ orderData.productCount }} 件商品,总金额:</view>
|
||||
<view class="discounts-money pay-color">
|
||||
¥{{ fen2yuan(orderData.payPrice) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="bottom ss-flex" v-for="item in [orderData.items[0]]" :key="item">
|
||||
<image class="image" :src="sheep.$url.cdn(item.goods_image)" mode="aspectFill"> </image>
|
||||
<view class="ss-flex-1">
|
||||
<view class="title title-1 ss-line-1">
|
||||
{{ item.goods_title }}
|
||||
</view>
|
||||
<view class="order-total ss-flex ss-row-between ss-m-t-8">
|
||||
<span>共{{ orderData.items.length }}件商品</span>
|
||||
<span>合计 ¥{{ orderData.pay_fee }}</span>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-right ss-m-t-8">
|
||||
<span class="status">{{ orderData.status_text }}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { fen2yuan, formatOrderColor, formatOrderStatus } from '@/sheep/hooks/useGoods';
|
||||
|
||||
const props = defineProps({
|
||||
from: String,
|
||||
orderData: {
|
||||
type: Object,
|
||||
default: {},
|
||||
|
|
@ -52,71 +39,76 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order {
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
.order-list-card-box {
|
||||
.order-card-header {
|
||||
height: 80rpx;
|
||||
|
||||
.top {
|
||||
line-height: 40rpx;
|
||||
.order-no {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.order-state {}
|
||||
}
|
||||
.pay-box {
|
||||
.discounts-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.discounts-money {
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
color: #999;
|
||||
border-bottom: 1px solid rgba(223, 223, 223, 0.5);
|
||||
margin-bottom: 20rpx;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
.pay-color {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.image {
|
||||
flex-shrink: 0;
|
||||
width: 116rpx;
|
||||
height: 116rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.order-card-footer {
|
||||
height: 100rpx;
|
||||
|
||||
.more-item-box {
|
||||
padding: 20rpx;
|
||||
|
||||
.more-item {
|
||||
height: 60rpx;
|
||||
|
||||
.title {
|
||||
height: 64rpx;
|
||||
line-height: 32rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
|
||||
&.title-1 {
|
||||
height: 32rpx;
|
||||
width: 300rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
.more-btn {
|
||||
color: $dark-9;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.price {
|
||||
.content {
|
||||
width: 154rpx;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.warning-color {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.danger-color {
|
||||
color: #ff3000;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: var(--ui-BG-Main);
|
||||
.success-color {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.order-total {
|
||||
line-height: 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.info-color {
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@
|
|||
<view
|
||||
class="item"
|
||||
v-for="item in state.pagination.data"
|
||||
:key="item"
|
||||
:key="item.id"
|
||||
@tap="emits('select', { type: mode, data: item })"
|
||||
>
|
||||
<template v-if="mode == 'goods'">
|
||||
<GoodsItem :goodsData="item.goods" />
|
||||
<GoodsItem :goodsData="item" />
|
||||
</template>
|
||||
<template v-if="mode == 'order'">
|
||||
<OrderItem :orderData="item" />
|
||||
|
|
@ -32,8 +32,7 @@
|
|||
|
||||
<script setup>
|
||||
import { reactive, watch } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
import _ from 'lodash-es';
|
||||
import GoodsItem from './goods.vue';
|
||||
import OrderItem from './order.vue';
|
||||
import OrderApi from '@/sheep/api/trade/order';
|
||||
|
|
@ -83,7 +82,7 @@
|
|||
page,
|
||||
list_rows,
|
||||
});
|
||||
let orderList = _.concat(state.pagination.data, res.data.data);
|
||||
let orderList = _.concat(state.pagination.data, res.data.list);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: orderList,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<su-popup
|
||||
:show="showTools"
|
||||
@close="handleClose"
|
||||
>
|
||||
<view class="ss-modal-box ss-flex-col">
|
||||
<slot></slot>
|
||||
<view class="content ss-flex ss-flex-1">
|
||||
<template v-if="toolsMode === 'emoji'">
|
||||
<swiper
|
||||
class="emoji-swiper"
|
||||
:indicator-dots="true"
|
||||
circular
|
||||
indicator-active-color="#7063D2"
|
||||
indicator-color="rgba(235, 231, 255, 1)"
|
||||
:autoplay="false"
|
||||
:interval="3000"
|
||||
:duration="1000"
|
||||
>
|
||||
<swiper-item v-for="emoji in emojiPage" :key="emoji">
|
||||
<view class="ss-flex ss-flex-wrap">
|
||||
<image
|
||||
v-for="item in emoji" :key="item"
|
||||
class="emoji-img"
|
||||
:src="sheep.$url.cdn(`/static/img/chat/emoji/${item.file}`)"
|
||||
@tap="onEmoji(item)"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="image">
|
||||
<s-uploader
|
||||
file-mediatype="image"
|
||||
:imageStyles="{ width: 50, height: 50, border: false }"
|
||||
@select="imageSelect({ type: 'image', data: $event })"
|
||||
>
|
||||
<image
|
||||
class="icon"
|
||||
:src="sheep.$url.static('/static/img/shop/chat/image.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</s-uploader>
|
||||
<view>图片</view>
|
||||
</view>
|
||||
<view class="goods" @tap="onShowSelect('goods')">
|
||||
<image
|
||||
class="icon"
|
||||
:src="sheep.$url.static('/static/img/shop/chat/goods.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view>商品</view>
|
||||
</view>
|
||||
<view class="order" @tap="onShowSelect('order')">
|
||||
<image
|
||||
class="icon"
|
||||
:src="sheep.$url.static('/static/img/shop/chat/order.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view>订单</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 聊天工具
|
||||
*/
|
||||
import { emojiPage } from '@/pages/chat/util/emoji';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const props = defineProps({
|
||||
// 工具模式
|
||||
toolsMode: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 控制工具菜单弹出
|
||||
showTools: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['onEmoji', 'imageSelect', 'onShowSelect', 'close']);
|
||||
|
||||
// 关闭弹出工具菜单
|
||||
function handleClose() {
|
||||
emits('close');
|
||||
}
|
||||
|
||||
// 选择表情
|
||||
function onEmoji(emoji) {
|
||||
emits('onEmoji', emoji);
|
||||
}
|
||||
|
||||
// 选择图片
|
||||
function imageSelect(val) {
|
||||
emits('imageSelect', val);
|
||||
}
|
||||
|
||||
// 选择商品或订单
|
||||
function onShowSelect(mode) {
|
||||
emits('onShowSelect', mode);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
width: 100%;
|
||||
align-content: space-around;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
padding: 20rpx 0 0;
|
||||
|
||||
.emoji-swiper {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.emoji-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
margin: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image,
|
||||
.goods,
|
||||
.order {
|
||||
width: 33.3%;
|
||||
height: 280rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-bottom: 21rpx;
|
||||
}
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.uni-file-picker__container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.file-picker__box {
|
||||
display: none;
|
||||
|
||||
&:last-of-type {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,278 +1,43 @@
|
|||
<template>
|
||||
<s-layout class="chat-wrap" title="客服" navbar="inner">
|
||||
<div class="status">
|
||||
{{ socketState.isConnect ? customerServiceInfo.title : '网络已断开,请检查网络后刷新重试' }}
|
||||
</div>
|
||||
<div class="page-bg" :style="{ height: sys_navBar + 'px' }"></div>
|
||||
<view class="chat-box" :style="{ height: pageHeight + 'px' }">
|
||||
<scroll-view
|
||||
:style="{ height: pageHeight + 'px' }"
|
||||
scroll-y="true"
|
||||
:scroll-with-animation="false"
|
||||
:enable-back-to-top="true"
|
||||
:scroll-into-view="chat.scrollInto"
|
||||
<s-layout
|
||||
class="chat-wrap"
|
||||
:title="!isReconnecting ? '连接客服成功' : '会话重连中'"
|
||||
navbar="inner"
|
||||
>
|
||||
<button
|
||||
class="loadmore-btn ss-reset-button"
|
||||
v-if="
|
||||
chatList.length &&
|
||||
chatHistoryPagination.lastPage > 1 &&
|
||||
loadingMap[chatHistoryPagination.loadStatus].title
|
||||
"
|
||||
@click="onLoadMore"
|
||||
>
|
||||
{{ loadingMap[chatHistoryPagination.loadStatus].title }}
|
||||
<i
|
||||
class="loadmore-icon sa-m-l-6"
|
||||
:class="loadingMap[chatHistoryPagination.loadStatus].icon"
|
||||
></i>
|
||||
</button>
|
||||
<view class="message-item ss-flex-col" v-for="(item, index) in chatList" :key="index">
|
||||
<view class="ss-flex ss-row-center ss-col-center">
|
||||
<!-- 日期 -->
|
||||
<view v-if="item.from !== 'system' && showTime(item, index)" class="date-message">
|
||||
{{ formatTime(item.date) }}
|
||||
</view>
|
||||
<!-- 系统消息 -->
|
||||
<view v-if="item.from === 'system'" class="system-message">
|
||||
{{ item.content.text }}
|
||||
</view>
|
||||
</view>
|
||||
<!-- 常见问题 -->
|
||||
<view v-if="item.mode === 'template' && item.content.list.length" class="template-wrap">
|
||||
<view class="title">猜你想问</view>
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in item.content.list"
|
||||
:key="index"
|
||||
@click="onTemplateList(item)"
|
||||
>
|
||||
* {{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-if="
|
||||
(item.from === 'customer_service' && item.mode !== 'template') ||
|
||||
item.from === 'customer'
|
||||
"
|
||||
class="ss-flex ss-col-top"
|
||||
:class="[
|
||||
item.from === 'customer_service'
|
||||
? `ss-row-left`
|
||||
: item.from === 'customer'
|
||||
? `ss-row-right`
|
||||
: '',
|
||||
]"
|
||||
>
|
||||
<!-- 客服头像 -->
|
||||
<image
|
||||
v-show="item.from === 'customer_service'"
|
||||
class="chat-avatar ss-m-r-24"
|
||||
:src="
|
||||
sheep.$url.cdn(item?.sender?.avatar) ||
|
||||
sheep.$url.static('/static/img/shop/chat/default.png')
|
||||
"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
|
||||
<!-- 发送状态 -->
|
||||
<span
|
||||
v-if="
|
||||
item.from === 'customer' &&
|
||||
index == chatData.chatList.length - 1 &&
|
||||
chatData.isSendSucces !== 0
|
||||
"
|
||||
class="send-status"
|
||||
>
|
||||
<image
|
||||
v-if="chatData.isSendSucces == -1"
|
||||
class="loading"
|
||||
:src="sheep.$url.static('/static/img/shop/chat/loading.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<!-- <image
|
||||
v-if="chatData.isSendSucces == 1"
|
||||
class="warning"
|
||||
:src="sheep.$url.static('/static/img/shop/chat/warning.png')"
|
||||
mode="aspectFill"
|
||||
@click="onAgainSendMessage(item)"
|
||||
></image> -->
|
||||
</span>
|
||||
|
||||
<!-- 内容 -->
|
||||
<template v-if="item.mode === 'text'">
|
||||
<view class="message-box" :class="[item.from]">
|
||||
<div
|
||||
class="message-text ss-flex ss-flex-wrap"
|
||||
@click="onRichtext"
|
||||
v-html="replaceEmoji(item.content.text)"
|
||||
></div>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="item.mode === 'image'">
|
||||
<view class="message-box" :class="[item.from]" :style="{ width: '200rpx' }">
|
||||
<su-image
|
||||
class="message-img"
|
||||
isPreview
|
||||
:previewList="[sheep.$url.cdn(item.content.url)]"
|
||||
:current="0"
|
||||
:src="sheep.$url.cdn(item.content.url)"
|
||||
:height="200"
|
||||
:width="200"
|
||||
mode="aspectFill"
|
||||
></su-image>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="item.mode === 'goods'">
|
||||
<GoodsItem
|
||||
:goodsData="item.content.item"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/goods/index', {
|
||||
id: item.content.item.id,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="item.mode === 'order'">
|
||||
<OrderItem
|
||||
from="msg"
|
||||
:orderData="item.content.item"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/order/detail', {
|
||||
id: item.content.item.id,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<!-- user头像 -->
|
||||
<image
|
||||
v-show="item.from === 'customer'"
|
||||
class="chat-avatar ss-m-l-24"
|
||||
:src="sheep.$url.cdn(customerUserInfo.avatar)"
|
||||
mode="aspectFill"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view id="scrollBottom"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<su-fixed bottom>
|
||||
<view class="send-wrap ss-flex">
|
||||
<view class="left ss-flex ss-flex-1">
|
||||
<uni-easyinput
|
||||
class="ss-flex-1 ss-p-l-22"
|
||||
:inputBorder="false"
|
||||
:clearable="false"
|
||||
<!-- 覆盖头部导航栏背景颜色 -->
|
||||
<view class="page-bg" :style="{ height: sys_navBar + 'px' }"></view>
|
||||
<!-- 聊天区域 -->
|
||||
<MessageList ref="messageListRef">
|
||||
<template #bottom>
|
||||
<message-input
|
||||
v-model="chat.msg"
|
||||
placeholder="请输入你要咨询的问题"
|
||||
></uni-easyinput>
|
||||
</view>
|
||||
<text class="sicon-basic bq" @tap.stop="onTools('emoji')"></text>
|
||||
<text
|
||||
v-if="!chat.msg"
|
||||
class="sicon-edit"
|
||||
:class="{ 'is-active': chat.toolsMode == 'tools' }"
|
||||
@tap.stop="onTools('tools')"
|
||||
></text>
|
||||
<button v-if="chat.msg" class="ss-reset-button send-btn" @tap="onSendMessage">
|
||||
发送
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
<su-popup
|
||||
:show="chat.showTools"
|
||||
@close="
|
||||
chat.showTools = false;
|
||||
chat.toolsMode = '';
|
||||
"
|
||||
@on-tools="onTools"
|
||||
@send-message="onSendMessage"
|
||||
:auto-focus="false"
|
||||
:show-char-count="true"
|
||||
:max-length="500"
|
||||
></message-input>
|
||||
</template>
|
||||
</MessageList>
|
||||
<!-- 聊天工具 -->
|
||||
<tools-popup
|
||||
:show-tools="chat.showTools"
|
||||
:tools-mode="chat.toolsMode"
|
||||
@close="handleToolsClose"
|
||||
@on-emoji="onEmoji"
|
||||
@image-select="onSelect"
|
||||
@on-show-select="onShowSelect"
|
||||
>
|
||||
<view class="ss-modal-box ss-flex-col">
|
||||
<view class="send-wrap ss-flex">
|
||||
<view class="left ss-flex ss-flex-1">
|
||||
<uni-easyinput
|
||||
class="ss-flex-1 ss-p-l-22"
|
||||
:inputBorder="false"
|
||||
:clearable="false"
|
||||
<message-input
|
||||
v-model="chat.msg"
|
||||
placeholder="请输入你要咨询的问题"
|
||||
></uni-easyinput>
|
||||
</view>
|
||||
<text class="sicon-basic bq" @tap.stop="onTools('emoji')"></text>
|
||||
<text></text>
|
||||
<text
|
||||
v-if="!chat.msg"
|
||||
class="sicon-edit"
|
||||
:class="{ 'is-active': chat.toolsMode == 'tools' }"
|
||||
@tap.stop="onTools('tools')"
|
||||
></text>
|
||||
<button v-if="chat.msg" class="ss-reset-button send-btn" @tap="onSendMessage">
|
||||
发送
|
||||
</button>
|
||||
</view>
|
||||
<view class="content ss-flex ss-flex-1">
|
||||
<template v-if="chat.toolsMode == 'emoji'">
|
||||
<swiper
|
||||
class="emoji-swiper"
|
||||
:indicator-dots="true"
|
||||
circular
|
||||
indicator-active-color="#7063D2"
|
||||
indicator-color="rgba(235, 231, 255, 1)"
|
||||
:autoplay="false"
|
||||
:interval="3000"
|
||||
:duration="1000"
|
||||
>
|
||||
<swiper-item v-for="emoji in emojiPage" :key="emoji">
|
||||
<view class="ss-flex ss-flex-wrap">
|
||||
<template v-for="item in emoji" :key="item">
|
||||
<image
|
||||
class="emoji-img"
|
||||
:src="sheep.$url.cdn(`/static/img/chat/emoji/${item.file}`)"
|
||||
@tap="onEmoji(item)"
|
||||
>
|
||||
</image>
|
||||
</template>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="image">
|
||||
<s-uploader
|
||||
file-mediatype="image"
|
||||
:imageStyles="{ width: 50, height: 50, border: false }"
|
||||
@select="onSelect({ type: 'image', data: $event })"
|
||||
>
|
||||
<image
|
||||
class="icon"
|
||||
:src="sheep.$url.static('/static/img/shop/chat/image.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</s-uploader>
|
||||
<view>图片</view>
|
||||
</view>
|
||||
<view class="goods" @tap="onShowSelect('goods')">
|
||||
<image
|
||||
class="icon"
|
||||
:src="sheep.$url.static('/static/img/shop/chat/goods.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view>商品</view>
|
||||
</view>
|
||||
<view class="order" @tap="onShowSelect('order')">
|
||||
<image
|
||||
class="icon"
|
||||
:src="sheep.$url.static('/static/img/shop/chat/order.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view>订单</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
|
||||
@on-tools="onTools"
|
||||
@send-message="onSendMessage"
|
||||
:auto-focus="false"
|
||||
:show-char-count="true"
|
||||
:max-length="500"
|
||||
></message-input>
|
||||
</tools-popup>
|
||||
<!-- 商品订单选择 -->
|
||||
<SelectPopup
|
||||
:mode="chat.selectMode"
|
||||
:show="chat.showSelect"
|
||||
|
|
@ -283,109 +48,82 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import MessageList from '@/pages/chat/components/messageList.vue';
|
||||
import { reactive, ref, toRefs } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { computed, reactive, toRefs } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { emojiList, emojiPage } from './emoji.js';
|
||||
import SelectPopup from './components/select-popup.vue';
|
||||
import GoodsItem from './components/goods.vue';
|
||||
import OrderItem from './components/order.vue';
|
||||
import { useChatWebSocket } from './socket';
|
||||
|
||||
const {
|
||||
socketInit,
|
||||
state: chatData,
|
||||
socketSendMsg,
|
||||
formatChatInput,
|
||||
socketHistoryList,
|
||||
onDrop,
|
||||
onPaste,
|
||||
getFocus,
|
||||
// upload,
|
||||
getUserToken,
|
||||
// socketTest,
|
||||
showTime,
|
||||
formatTime,
|
||||
} = useChatWebSocket();
|
||||
const chatList = toRefs(chatData).chatList;
|
||||
const customerServiceInfo = toRefs(chatData).customerServerInfo;
|
||||
const chatHistoryPagination = toRefs(chatData).chatHistoryPagination;
|
||||
const customerUserInfo = toRefs(chatData).customerUserInfo;
|
||||
const socketState = toRefs(chatData).socketState;
|
||||
import ToolsPopup from '@/pages/chat/components/toolsPopup.vue';
|
||||
import MessageInput from '@/pages/chat/components/messageInput.vue';
|
||||
import SelectPopup from '@/pages/chat/components/select-popup.vue';
|
||||
import {
|
||||
KeFuMessageContentTypeEnum,
|
||||
WebSocketMessageTypeConstants,
|
||||
} from '@/pages/chat/util/constants';
|
||||
import FileApi from '@/sheep/api/infra/file';
|
||||
import KeFuApi from '@/sheep/api/promotion/kefu';
|
||||
import { useWebSocket } from './util/useWebSocket';
|
||||
import { jsonParse } from '@/sheep/helper/utils';
|
||||
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const chatConfig = computed(() => sheep.$store('app').chat);
|
||||
|
||||
const { screenHeight, safeAreaInsets, safeArea, screenWidth } = sheep.$platform.device;
|
||||
const pageHeight = safeArea.height - 44 - 35 - 50;
|
||||
|
||||
const chatStatus = {
|
||||
online: {
|
||||
text: '在线',
|
||||
colorVariate: '#46c55f',
|
||||
},
|
||||
offline: {
|
||||
text: '离线',
|
||||
colorVariate: '#b5b5b5',
|
||||
},
|
||||
busy: {
|
||||
text: '忙碌',
|
||||
colorVariate: '#ff0e1b',
|
||||
},
|
||||
};
|
||||
|
||||
// 加载更多
|
||||
const loadingMap = {
|
||||
loadmore: {
|
||||
title: '查看更多',
|
||||
icon: 'el-icon-d-arrow-left',
|
||||
},
|
||||
nomore: {
|
||||
title: '没有更多了',
|
||||
icon: '',
|
||||
},
|
||||
loading: {
|
||||
title: '加载中... ',
|
||||
icon: 'el-icon-loading',
|
||||
},
|
||||
};
|
||||
const onLoadMore = () => {
|
||||
chatHistoryPagination.value.page < chatHistoryPagination.value.lastPage && socketHistoryList();
|
||||
};
|
||||
|
||||
const chat = reactive({
|
||||
msg: '',
|
||||
scrollInto: '',
|
||||
|
||||
showTools: false,
|
||||
toolsMode: '',
|
||||
|
||||
showSelect: false,
|
||||
selectMode: '',
|
||||
chatStyle: {
|
||||
mode: 'inner',
|
||||
color: '#F8270F',
|
||||
type: 'color',
|
||||
alwaysShow: 1,
|
||||
src: '',
|
||||
list: {},
|
||||
},
|
||||
});
|
||||
|
||||
// 发送消息
|
||||
async function onSendMessage() {
|
||||
if (!chat.msg) return;
|
||||
try {
|
||||
const data = {
|
||||
contentType: KeFuMessageContentTypeEnum.TEXT,
|
||||
content: JSON.stringify({ text: chat.msg }),
|
||||
};
|
||||
await KeFuApi.sendKefuMessage(data);
|
||||
chat.msg = '';
|
||||
} finally {
|
||||
chat.showTools = false;
|
||||
}
|
||||
}
|
||||
|
||||
const messageListRef = ref();
|
||||
|
||||
//======================= 聊天工具相关 start =======================
|
||||
|
||||
function handleToolsClose() {
|
||||
chat.showTools = false;
|
||||
chat.toolsMode = '';
|
||||
}
|
||||
|
||||
function onEmoji(item) {
|
||||
chat.msg += item.name;
|
||||
}
|
||||
|
||||
// 点击工具栏开关
|
||||
function onTools(mode) {
|
||||
if (!socketState.value.isConnect) {
|
||||
sheep.$helper.toast(socketState.value.tip || '您已掉线!请返回重试');
|
||||
if (isReconnecting.value) {
|
||||
sheep.$helper.toast('您已掉线!请返回重试');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!chat.toolsMode || chat.toolsMode === mode) {
|
||||
chat.showTools = !chat.showTools;
|
||||
// 第二次点击关闭
|
||||
if (chat.showTools && chat.toolsMode === mode) {
|
||||
handleToolsClose();
|
||||
return;
|
||||
}
|
||||
chat.toolsMode = mode;
|
||||
if (!chat.showTools) {
|
||||
// 切换工具栏
|
||||
if (chat.showTools && chat.toolsMode !== mode) {
|
||||
chat.showTools = false;
|
||||
chat.toolsMode = '';
|
||||
}
|
||||
// 延迟打开等一下过度效果
|
||||
setTimeout(() => {
|
||||
chat.toolsMode = mode;
|
||||
chat.showTools = true;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function onShowSelect(mode) {
|
||||
|
|
@ -395,206 +133,78 @@
|
|||
}
|
||||
|
||||
async function onSelect({ type, data }) {
|
||||
let msg = '';
|
||||
let msg;
|
||||
switch (type) {
|
||||
case 'image':
|
||||
const { path, fullurl } = await sheep.$api.app.upload(data.tempFiles[0].path, 'default');
|
||||
const res = await FileApi.uploadFile(data.tempFiles[0].path);
|
||||
msg = {
|
||||
from: 'customer',
|
||||
mode: 'image',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
url: fullurl,
|
||||
path: path,
|
||||
},
|
||||
contentType: KeFuMessageContentTypeEnum.IMAGE,
|
||||
content: JSON.stringify({ picUrl: res.data }),
|
||||
};
|
||||
break;
|
||||
case 'goods':
|
||||
msg = {
|
||||
from: 'customer',
|
||||
mode: 'goods',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
item: {
|
||||
id: data.goods.id,
|
||||
title: data.goods.title,
|
||||
image: data.goods.image,
|
||||
price: data.goods.price,
|
||||
stock: data.goods.stock,
|
||||
},
|
||||
},
|
||||
contentType: KeFuMessageContentTypeEnum.PRODUCT,
|
||||
content: JSON.stringify(data),
|
||||
};
|
||||
break;
|
||||
case 'order':
|
||||
msg = {
|
||||
from: 'customer',
|
||||
mode: 'order',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
item: {
|
||||
id: data.id,
|
||||
order_sn: data.order_sn,
|
||||
create_time: data.create_time,
|
||||
pay_fee: data.pay_fee,
|
||||
items: data.items.filter((item) => ({
|
||||
goods_id: item.goods_id,
|
||||
goods_title: item.goods_title,
|
||||
goods_image: item.goods_image,
|
||||
goods_price: item.goods_price,
|
||||
})),
|
||||
status_text: data.status_text,
|
||||
},
|
||||
},
|
||||
contentType: KeFuMessageContentTypeEnum.ORDER,
|
||||
content: JSON.stringify(data),
|
||||
};
|
||||
break;
|
||||
}
|
||||
if (msg) {
|
||||
socketSendMsg(msg, () => {
|
||||
scrollBottom();
|
||||
});
|
||||
// 发送消息
|
||||
// scrollBottom();
|
||||
await KeFuApi.sendKefuMessage(msg);
|
||||
await messageListRef.value.refreshMessageList();
|
||||
chat.showTools = false;
|
||||
chat.showSelect = false;
|
||||
chat.selectMode = '';
|
||||
}
|
||||
}
|
||||
|
||||
function onAgainSendMessage(item) {
|
||||
if (!socketState.value.isConnect) {
|
||||
sheep.$helper.toast(socketState.value.tip || '您已掉线!请返回重试');
|
||||
//======================= 聊天工具相关 end =======================
|
||||
const { options } = useWebSocket({
|
||||
// 连接成功
|
||||
onConnected: async () => {},
|
||||
// 收到消息
|
||||
onMessage: async (data) => {
|
||||
const type = data.type;
|
||||
if (!type) {
|
||||
console.error('未知的消息类型:' + data);
|
||||
return;
|
||||
}
|
||||
if (!item) return;
|
||||
const data = {
|
||||
from: 'customer',
|
||||
mode: 'text',
|
||||
date: new Date().getTime(),
|
||||
content: item.content,
|
||||
};
|
||||
socketSendMsg(data, () => {
|
||||
scrollBottom();
|
||||
});
|
||||
}
|
||||
|
||||
function onSendMessage() {
|
||||
if (!socketState.value.isConnect) {
|
||||
sheep.$helper.toast(socketState.value.tip || '您已掉线!请返回重试');
|
||||
// 2.2 消息类型:KEFU_MESSAGE_TYPE
|
||||
if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
|
||||
// 刷新消息列表
|
||||
await messageListRef.value.refreshMessageList(jsonParse(data.content));
|
||||
return;
|
||||
}
|
||||
if (!chat.msg) return;
|
||||
const data = {
|
||||
from: 'customer',
|
||||
mode: 'text',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
text: chat.msg,
|
||||
// 2.3 消息类型:KEFU_MESSAGE_ADMIN_READ
|
||||
if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
|
||||
console.log('管理员已读消息');
|
||||
// 更新消息已读状态
|
||||
sheep.$helper.toast('客服已读您的消息');
|
||||
}
|
||||
},
|
||||
};
|
||||
socketSendMsg(data, () => {
|
||||
scrollBottom();
|
||||
});
|
||||
chat.showTools = false;
|
||||
// scrollBottom();
|
||||
setTimeout(() => {
|
||||
chat.msg = '';
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// 点击猜你想问
|
||||
function onTemplateList(e) {
|
||||
if (!socketState.value.isConnect) {
|
||||
sheep.$helper.toast(socketState.value.tip || '您已掉线!请返回重试');
|
||||
return;
|
||||
}
|
||||
const data = {
|
||||
from: 'customer',
|
||||
mode: 'text',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
text: e.title,
|
||||
},
|
||||
customData: {
|
||||
question_id: e.id,
|
||||
},
|
||||
};
|
||||
socketSendMsg(data, () => {
|
||||
scrollBottom();
|
||||
});
|
||||
// scrollBottom();
|
||||
}
|
||||
|
||||
function onEmoji(item) {
|
||||
chat.msg += item.name;
|
||||
}
|
||||
|
||||
function selEmojiFile(name) {
|
||||
for (let index in emojiList) {
|
||||
if (emojiList[index].name === name) {
|
||||
return emojiList[index].file;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function replaceEmoji(data) {
|
||||
let newData = data;
|
||||
if (typeof newData !== 'object') {
|
||||
let reg = /\[(.+?)\]/g; // [] 中括号
|
||||
let zhEmojiName = newData.match(reg);
|
||||
if (zhEmojiName) {
|
||||
zhEmojiName.forEach((item) => {
|
||||
let emojiFile = selEmojiFile(item);
|
||||
newData = newData.replace(
|
||||
item,
|
||||
`<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${sheep.$url.cdn(
|
||||
'/static/img/chat/emoji/' + emojiFile,
|
||||
)}"/>`,
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
return newData;
|
||||
}
|
||||
|
||||
function scrollBottom() {
|
||||
let timeout = null;
|
||||
chat.scrollInto = '';
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
chat.scrollInto = 'scrollBottom';
|
||||
}, 100);
|
||||
}
|
||||
|
||||
onLoad(async () => {
|
||||
const { error } = await getUserToken();
|
||||
if (error === 0) {
|
||||
socketInit(chatConfig.value, () => {
|
||||
scrollBottom();
|
||||
});
|
||||
} else {
|
||||
socketState.value.isConnect = false;
|
||||
}
|
||||
});
|
||||
const isReconnecting = toRefs(options).isReconnecting; // 重连状态
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style scoped lang="scss">
|
||||
.chat-wrap {
|
||||
.page-bg {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
background-color: var(--ui-BG-Main);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.chat-wrap {
|
||||
// :deep() {
|
||||
// .ui-navbar-box {
|
||||
// background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
// }
|
||||
// }
|
||||
|
||||
.status {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -608,263 +218,5 @@
|
|||
font-weight: 400;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
padding: 0 20rpx 0;
|
||||
|
||||
.loadmore-btn {
|
||||
width: 98%;
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
|
||||
.loadmore-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.message-item {
|
||||
margin-bottom: 33rpx;
|
||||
}
|
||||
|
||||
.date-message,
|
||||
.system-message {
|
||||
width: fit-content;
|
||||
border-radius: 12rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
background-color: var(--ui-BG-3);
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.chat-avatar {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.send-status {
|
||||
color: #333;
|
||||
height: 80rpx;
|
||||
margin-right: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.loading {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
-webkit-animation: rotating 2s linear infinite;
|
||||
animation: rotating 2s linear infinite;
|
||||
|
||||
@-webkit-keyframes rotating {
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warning {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
color: #ff3000;
|
||||
}
|
||||
}
|
||||
|
||||
.message-box {
|
||||
max-width: 50%;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
// max-width: 500rpx;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
|
||||
&.customer_service {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.imgred {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.imgred,
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.goods,
|
||||
.order {
|
||||
max-width: 500rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.message-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.template-wrap {
|
||||
// width: 100%;
|
||||
padding: 20rpx 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 29rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
font-size: 24rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-img {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
#scrollBottom {
|
||||
height: 120rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.send-wrap {
|
||||
padding: 18rpx 20rpx;
|
||||
background: #fff;
|
||||
|
||||
.left {
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
background: var(--ui-BG-1);
|
||||
}
|
||||
|
||||
.bq {
|
||||
font-size: 50rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.sicon-edit {
|
||||
font-size: 50rpx;
|
||||
margin-left: 10rpx;
|
||||
transform: rotate(0deg);
|
||||
transition: all linear 0.2s;
|
||||
|
||||
&.is-active {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width: 100rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 30rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
margin-left: 11rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
align-content: space-around;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
padding: 20rpx 0 0;
|
||||
|
||||
.emoji-swiper {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.emoji-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
margin: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image,
|
||||
.goods,
|
||||
.order {
|
||||
width: 33.3%;
|
||||
height: 280rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-bottom: 21rpx;
|
||||
}
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.uni-file-picker__container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.file-picker__box {
|
||||
display: none;
|
||||
|
||||
&:last-of-type {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.chat-img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
.full-img {
|
||||
object-fit: cover;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,821 +0,0 @@
|
|||
import { reactive, ref, unref } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
// import chat from '@/sheep/api/chat';
|
||||
import dayjs from 'dayjs';
|
||||
import io from '@hyoga/uni-socket.io';
|
||||
|
||||
export function useChatWebSocket(socketConfig) {
|
||||
let SocketIo = null;
|
||||
|
||||
// chat状态数据
|
||||
const state = reactive({
|
||||
chatDotNum: 0, //总状态红点
|
||||
chatList: [], //会话信息
|
||||
customerUserInfo: {}, //用户信息
|
||||
customerServerInfo: {
|
||||
//客服信息
|
||||
title: '连接中...',
|
||||
state: 'connecting',
|
||||
avatar: null,
|
||||
nickname: '',
|
||||
},
|
||||
socketState: {
|
||||
isConnect: true, //是否连接成功
|
||||
isConnecting: false, //重连中,不允许新的socket开启。
|
||||
tip: '',
|
||||
},
|
||||
chatHistoryPagination: {
|
||||
page: 0, //当前页
|
||||
list_rows: 10, //每页条数
|
||||
last_id: 0, //最后条ID
|
||||
lastPage: 0, //总共多少页
|
||||
loadStatus: 'loadmore', //loadmore-加载前的状态,loading-加载中的状态,nomore-没有更多的状态
|
||||
},
|
||||
templateChatList: [], //猜你想问
|
||||
|
||||
chatConfig: {}, // 配置信息
|
||||
|
||||
isSendSucces: -1, // 是否发送成功 -1=发送中|0=发送成功|1发送失败
|
||||
});
|
||||
|
||||
/**
|
||||
* 连接初始化
|
||||
* @param {Object} config - 配置信息
|
||||
* @param {Function} callBack -回调函数,有新消息接入,保持底部
|
||||
*/
|
||||
const socketInit = (config, callBack) => {
|
||||
state.chatConfig = config;
|
||||
if (SocketIo && SocketIo.connected) return; // 如果socket已经连接,返回false
|
||||
if (state.socketState.isConnecting) return; // 重连中,返回false
|
||||
|
||||
// 启动初始化
|
||||
SocketIo = io(config.chat_domain, {
|
||||
reconnection: true, // 默认 true 是否断线重连
|
||||
reconnectionAttempts: 5, // 默认无限次 断线尝试次数
|
||||
reconnectionDelay: 1000, // 默认 1000,进行下一次重连的间隔。
|
||||
reconnectionDelayMax: 5000, // 默认 5000, 重新连接等待的最长时间 默认 5000
|
||||
randomizationFactor: 0.5, // 默认 0.5 [0-1],随机重连延迟时间
|
||||
timeout: 20000, // 默认 20s
|
||||
transports: ['websocket', 'polling'], // websocket | polling,
|
||||
...config,
|
||||
});
|
||||
|
||||
// 监听连接
|
||||
SocketIo.on('connect', async (res) => {
|
||||
socketReset(callBack);
|
||||
// socket连接
|
||||
// 用户登录
|
||||
// 顾客登录
|
||||
console.log('socket:connect');
|
||||
});
|
||||
// 监听消息
|
||||
SocketIo.on('message', (res) => {
|
||||
if (res.error === 0) {
|
||||
const { message, sender } = res.data;
|
||||
state.chatList.push(formatMessage(res.data.message));
|
||||
|
||||
// 告诉父级页面
|
||||
// window.parent.postMessage({
|
||||
// chatDotNum: ++state.chatDotNum
|
||||
// })
|
||||
callBack && callBack();
|
||||
}
|
||||
});
|
||||
// 监听客服接入成功
|
||||
SocketIo.on('customer_service_access', (res) => {
|
||||
if (res.error === 0) {
|
||||
editCustomerServerInfo({
|
||||
title: res.data.customer_service.name,
|
||||
state: 'online',
|
||||
avatar: res.data.customer_service.avatar,
|
||||
});
|
||||
state.chatList.push(formatMessage(res.data.message));
|
||||
// callBack && callBack()
|
||||
}
|
||||
});
|
||||
// 监听排队等待
|
||||
SocketIo.on('waiting_queue', (res) => {
|
||||
if (res.error === 0) {
|
||||
editCustomerServerInfo({
|
||||
title: res.data.title,
|
||||
state: 'waiting',
|
||||
avatar: '',
|
||||
});
|
||||
// callBack && callBack()
|
||||
}
|
||||
});
|
||||
// 监听没有客服在线
|
||||
SocketIo.on('no_customer_service', (res) => {
|
||||
if (res.error === 0) {
|
||||
editCustomerServerInfo({
|
||||
title: '暂无客服在线...',
|
||||
state: 'waiting',
|
||||
avatar: '',
|
||||
});
|
||||
}
|
||||
state.chatList.push(formatMessage(res.data.message));
|
||||
// callBack && callBack()
|
||||
});
|
||||
// 监听客服上线
|
||||
SocketIo.on('customer_service_online', (res) => {
|
||||
if (res.error === 0) {
|
||||
editCustomerServerInfo({
|
||||
title: res.data.customer_service.name,
|
||||
state: 'online',
|
||||
avatar: res.data.customer_service.avatar,
|
||||
});
|
||||
}
|
||||
});
|
||||
// 监听客服下线
|
||||
SocketIo.on('customer_service_offline', (res) => {
|
||||
if (res.error === 0) {
|
||||
editCustomerServerInfo({
|
||||
title: res.data.customer_service.name,
|
||||
state: 'offline',
|
||||
avatar: res.data.customer_service.avatar,
|
||||
});
|
||||
}
|
||||
});
|
||||
// 监听客服忙碌
|
||||
SocketIo.on('customer_service_busy', (res) => {
|
||||
if (res.error === 0) {
|
||||
editCustomerServerInfo({
|
||||
title: res.data.customer_service.name,
|
||||
state: 'busy',
|
||||
avatar: res.data.customer_service.avatar,
|
||||
});
|
||||
}
|
||||
});
|
||||
// 监听客服断开链接
|
||||
SocketIo.on('customer_service_break', (res) => {
|
||||
if (res.error === 0) {
|
||||
editCustomerServerInfo({
|
||||
title: '客服服务结束',
|
||||
state: 'offline',
|
||||
avatar: '',
|
||||
});
|
||||
state.socketState.isConnect = false;
|
||||
state.socketState.tip = '当前服务已结束';
|
||||
}
|
||||
state.chatList.push(formatMessage(res.data.message));
|
||||
// callBack && callBack()
|
||||
});
|
||||
// 监听自定义错误 custom_error
|
||||
SocketIo.on('custom_error', (error) => {
|
||||
editCustomerServerInfo({
|
||||
title: error.msg,
|
||||
state: 'offline',
|
||||
avatar: '',
|
||||
});
|
||||
console.log('custom_error:', error);
|
||||
});
|
||||
// 监听错误 error
|
||||
SocketIo.on('error', (error) => {
|
||||
console.log('error:', error);
|
||||
});
|
||||
// 重连失败 connect_error
|
||||
SocketIo.on('connect_error', (error) => {
|
||||
console.log('connect_error');
|
||||
});
|
||||
// 连接上,但无反应 connect_timeout
|
||||
SocketIo.on('connect_timeout', (error) => {
|
||||
console.log(error, 'connect_timeout');
|
||||
});
|
||||
// 服务进程销毁 disconnect
|
||||
SocketIo.on('disconnect', (error) => {
|
||||
console.log(error, 'disconnect');
|
||||
});
|
||||
// 服务重启重连上reconnect
|
||||
SocketIo.on('reconnect', (error) => {
|
||||
console.log(error, 'reconnect');
|
||||
});
|
||||
// 开始重连reconnect_attempt
|
||||
SocketIo.on('reconnect_attempt', (error) => {
|
||||
state.socketState.isConnect = false;
|
||||
state.socketState.isConnecting = true;
|
||||
editCustomerServerInfo({
|
||||
title: `重连中,第${error}次尝试...`,
|
||||
state: 'waiting',
|
||||
avatar: '',
|
||||
});
|
||||
console.log(error, 'reconnect_attempt');
|
||||
});
|
||||
// 重新连接中reconnecting
|
||||
SocketIo.on('reconnecting', (error) => {
|
||||
console.log(error, 'reconnecting');
|
||||
});
|
||||
// 重新连接错误reconnect_error
|
||||
SocketIo.on('reconnect_error', (error) => {
|
||||
console.log('reconnect_error');
|
||||
});
|
||||
// 重新连接失败reconnect_failed
|
||||
SocketIo.on('reconnect_failed', (error) => {
|
||||
state.socketState.isConnecting = false;
|
||||
editCustomerServerInfo({
|
||||
title: `重连失败,请刷新重试~`,
|
||||
state: 'waiting',
|
||||
avatar: '',
|
||||
});
|
||||
console.log(error, 'reconnect_failed');
|
||||
|
||||
// setTimeout(() => {
|
||||
state.isSendSucces = 1;
|
||||
// }, 500)
|
||||
});
|
||||
};
|
||||
|
||||
// 重置socket
|
||||
const socketReset = (callBack) => {
|
||||
state.chatList = [];
|
||||
state.chatHistoryList = [];
|
||||
state.chatHistoryPagination = {
|
||||
page: 0,
|
||||
per_page: 10,
|
||||
last_id: 0,
|
||||
totalPage: 0,
|
||||
};
|
||||
socketConnection(callBack); // 连接
|
||||
};
|
||||
|
||||
// 退出连接
|
||||
const socketClose = () => {
|
||||
SocketIo.emit('customer_logout', {}, (res) => {
|
||||
console.log('socket:退出', res);
|
||||
});
|
||||
};
|
||||
|
||||
// 测试事件
|
||||
const socketTest = () => {
|
||||
SocketIo.emit('test', {}, (res) => {
|
||||
console.log('test:test', res);
|
||||
});
|
||||
};
|
||||
|
||||
// 发送消息
|
||||
const socketSendMsg = (data, sendMsgCallBack) => {
|
||||
state.isSendSucces = -1;
|
||||
state.chatList.push(data);
|
||||
sendMsgCallBack && sendMsgCallBack();
|
||||
SocketIo.emit(
|
||||
'message',
|
||||
{
|
||||
message: formatInput(data),
|
||||
...data.customData,
|
||||
},
|
||||
(res) => {
|
||||
// setTimeout(() => {
|
||||
state.isSendSucces = res.error;
|
||||
// }, 500)
|
||||
|
||||
// console.log(res, 'socket:send');
|
||||
// sendMsgCallBack && sendMsgCallBack()
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
// 连接socket,存入sessionId
|
||||
const socketConnection = (callBack) => {
|
||||
SocketIo.emit(
|
||||
'connection',
|
||||
{
|
||||
auth: 'user',
|
||||
token: uni.getStorageSync('socketUserToken') || '',
|
||||
session_id: uni.getStorageSync('socketSessionId') || '',
|
||||
},
|
||||
(res) => {
|
||||
if (res.error === 0) {
|
||||
socketCustomerLogin(callBack);
|
||||
uni.setStorageSync('socketSessionId', res.data.session_id);
|
||||
// uni.getStorageSync('socketUserToken') && socketLogin(uni.getStorageSync(
|
||||
// 'socketUserToken')) // 如果有用户token,绑定
|
||||
state.customerUserInfo = res.data.chat_user;
|
||||
state.socketState.isConnect = true;
|
||||
} else {
|
||||
editCustomerServerInfo({
|
||||
title: `服务器异常!`,
|
||||
state: 'waiting',
|
||||
avatar: '',
|
||||
});
|
||||
state.socketState.isConnect = false;
|
||||
}
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
// 用户id,获取token
|
||||
const getUserToken = async (id) => {
|
||||
const res = await chat.unifiedToken();
|
||||
if (res.error === 0) {
|
||||
uni.setStorageSync('socketUserToken', res.data.token);
|
||||
// SocketIo && SocketIo.connected && socketLogin(res.data.token)
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
// 用户登录
|
||||
const socketLogin = (token) => {
|
||||
SocketIo.emit(
|
||||
'login',
|
||||
{
|
||||
token: token,
|
||||
},
|
||||
(res) => {
|
||||
console.log(res, 'socket:login');
|
||||
state.customerUserInfo = res.data.chat_user;
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
// 顾客登录
|
||||
const socketCustomerLogin = (callBack) => {
|
||||
SocketIo.emit(
|
||||
'customer_login',
|
||||
{
|
||||
room_id: state.chatConfig.room_id,
|
||||
},
|
||||
(res) => {
|
||||
state.templateChatList = res.data.questions.length ? res.data.questions : [];
|
||||
state.chatList.push({
|
||||
from: 'customer_service', // 用户customer右 | 顾客customer_service左 | 系统system中间
|
||||
mode: 'template', // goods,order,image,text,system
|
||||
date: new Date().getTime(), //时间
|
||||
content: {
|
||||
//内容
|
||||
list: state.templateChatList,
|
||||
},
|
||||
});
|
||||
res.error === 0 && socketHistoryList(callBack);
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
// 获取历史消息
|
||||
const socketHistoryList = (historyCallBack) => {
|
||||
state.chatHistoryPagination.loadStatus = 'loading';
|
||||
state.chatHistoryPagination.page += 1;
|
||||
SocketIo.emit('messages', state.chatHistoryPagination, (res) => {
|
||||
if (res.error === 0) {
|
||||
state.chatHistoryPagination.total = res.data.messages.total;
|
||||
state.chatHistoryPagination.lastPage = res.data.messages.last_page;
|
||||
state.chatHistoryPagination.page = res.data.messages.current_page;
|
||||
res.data.messages.data.forEach((item) => {
|
||||
item.message_type && state.chatList.unshift(formatMessage(item));
|
||||
});
|
||||
state.chatHistoryPagination.loadStatus =
|
||||
state.chatHistoryPagination.page < state.chatHistoryPagination.lastPage
|
||||
? 'loadmore'
|
||||
: 'nomore';
|
||||
if (state.chatHistoryPagination.last_id == 0) {
|
||||
state.chatHistoryPagination.last_id = res.data.messages.data.length
|
||||
? res.data.messages.data[0].id
|
||||
: 0;
|
||||
}
|
||||
state.chatHistoryPagination.page === 1 && historyCallBack && historyCallBack();
|
||||
}
|
||||
|
||||
// 历史记录之后,猜你想问
|
||||
// state.chatList.push({
|
||||
// from: 'customer_service', // 用户customer右 | 顾客customer_service左 | 系统system中间
|
||||
// mode: 'template', // goods,order,image,text,system
|
||||
// date: new Date().getTime(), //时间
|
||||
// content: { //内容
|
||||
// list: state.templateChatList
|
||||
// }
|
||||
// })
|
||||
});
|
||||
};
|
||||
|
||||
// 修改客服信息
|
||||
const editCustomerServerInfo = (data) => {
|
||||
state.customerServerInfo = {
|
||||
...state.customerServerInfo,
|
||||
...data,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* ================
|
||||
* 工具函数 ↓
|
||||
* ===============
|
||||
*/
|
||||
|
||||
/**
|
||||
* 是否显示时间
|
||||
* @param {*} item - 数据
|
||||
* @param {*} index - 索引
|
||||
*/
|
||||
const showTime = (item, index) => {
|
||||
if (unref(state.chatList)[index + 1]) {
|
||||
let dateString = dayjs(unref(state.chatList)[index + 1].date).fromNow();
|
||||
if (dateString === dayjs(unref(item).date).fromNow()) {
|
||||
return false;
|
||||
} else {
|
||||
dateString = dayjs(unref(item).date).fromNow();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化时间
|
||||
* @param {*} time - 时间戳
|
||||
*/
|
||||
const formatTime = (time) => {
|
||||
let diffTime = new Date().getTime() - time;
|
||||
if (diffTime > 28 * 24 * 60 * 1000) {
|
||||
return dayjs(time).format('MM/DD HH:mm');
|
||||
}
|
||||
if (diffTime > 360 * 28 * 24 * 60 * 1000) {
|
||||
return dayjs(time).format('YYYY/MM/DD HH:mm');
|
||||
}
|
||||
return dayjs(time).fromNow();
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取焦点
|
||||
* @param {*} virtualNode - 节点信息 ref
|
||||
*/
|
||||
const getFocus = (virtualNode) => {
|
||||
if (window.getSelection) {
|
||||
let chatInput = unref(virtualNode);
|
||||
chatInput.focus();
|
||||
let range = window.getSelection();
|
||||
range.selectAllChildren(chatInput);
|
||||
range.collapseToEnd();
|
||||
} else if (document.selection) {
|
||||
let range = document.selection.createRange();
|
||||
range.moveToElementText(chatInput);
|
||||
range.collapse(false);
|
||||
range.select();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 文件上传
|
||||
* @param {Blob} file -文件数据流
|
||||
* @return {path,fullPath}
|
||||
*/
|
||||
|
||||
const upload = (name, file) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let data = new FormData();
|
||||
data.append('file', file, name);
|
||||
data.append('group', 'chat');
|
||||
ajax({
|
||||
url: '/upload',
|
||||
method: 'post',
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
data,
|
||||
success: function (res) {
|
||||
resolve(res);
|
||||
},
|
||||
error: function (err) {
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 粘贴到输入框
|
||||
* @param {*} e - 粘贴内容
|
||||
* @param {*} uploadHttp - 上传图片地址
|
||||
*/
|
||||
const onPaste = async (e) => {
|
||||
let paste = e.clipboardData || window.clipboardData;
|
||||
let filesArr = Array.from(paste.files);
|
||||
filesArr.forEach(async (child) => {
|
||||
if (child && child.type.includes('image')) {
|
||||
e.preventDefault(); //阻止默认
|
||||
let file = child;
|
||||
const img = await readImg(file);
|
||||
const blob = await compressImg(img, file.type);
|
||||
const { data } = await upload(file.name, blob);
|
||||
let image = `<img class="full-url" src='${data.fullurl}'>`;
|
||||
document.execCommand('insertHTML', false, image);
|
||||
} else {
|
||||
document.execCommand('insertHTML', false, paste.getData('text'));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 拖拽到输入框
|
||||
* @param {*} e - 粘贴内容
|
||||
* @param {*} uploadHttp - 上传图片地址
|
||||
*/
|
||||
const onDrop = async (e) => {
|
||||
e.preventDefault(); //阻止默认
|
||||
let filesArr = Array.from(e.dataTransfer.files);
|
||||
filesArr.forEach(async (child) => {
|
||||
if (child && child.type.includes('image')) {
|
||||
let file = child;
|
||||
const img = await readImg(file);
|
||||
const blob = await compressImg(img, file.type);
|
||||
const { data } = await upload(file.name, blob);
|
||||
let image = `<img class="full-url" src='${data.fullurl}' >`;
|
||||
document.execCommand('insertHTML', false, image);
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '禁止拖拽非图片资源',
|
||||
type: 'warning',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 解析富文本输入框内容
|
||||
* @param {*} virtualNode -节点信息
|
||||
* @param {Function} formatInputCallBack - cb 回调
|
||||
*/
|
||||
const formatChatInput = (virtualNode, formatInputCallBack) => {
|
||||
let res = '';
|
||||
let elemArr = Array.from(virtualNode.childNodes);
|
||||
elemArr.forEach((child, index) => {
|
||||
if (child.nodeName === '#text') {
|
||||
//如果为文本节点
|
||||
res += child.nodeValue;
|
||||
if (
|
||||
//文本节点的后面是图片,并且不是emoji,分开发送。输入框中的图片和文本表情分开。
|
||||
elemArr[index + 1] &&
|
||||
elemArr[index + 1].nodeName === 'IMG' &&
|
||||
elemArr[index + 1] &&
|
||||
elemArr[index + 1].name !== 'emoji'
|
||||
) {
|
||||
const data = {
|
||||
from: 'customer',
|
||||
mode: 'text',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
text: filterXSS(res),
|
||||
},
|
||||
};
|
||||
formatInputCallBack && formatInputCallBack(data);
|
||||
res = '';
|
||||
}
|
||||
} else if (child.nodeName === 'BR') {
|
||||
res += '<br/>';
|
||||
} else if (child.nodeName === 'IMG') {
|
||||
// 有emjio 和 一般图片
|
||||
// 图片解析后直接发送,不跟文字表情一组
|
||||
if (child.name !== 'emoji') {
|
||||
let srcReg = /src=[\'\']?([^\'\']*)[\'\']?/i;
|
||||
let src = child.outerHTML.match(srcReg);
|
||||
const data = {
|
||||
from: 'customer',
|
||||
mode: 'image',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
url: src[1],
|
||||
path: src[1].replace(/http:\/\/[^\/]*/, ''),
|
||||
},
|
||||
};
|
||||
formatInputCallBack && formatInputCallBack(data);
|
||||
} else {
|
||||
// 非表情图片跟文字一起发送
|
||||
res += child.outerHTML;
|
||||
}
|
||||
} else if (child.nodeName === 'DIV') {
|
||||
res += `<div style='width:200px; white-space: nowrap;'>${child.outerHTML}</div>`;
|
||||
}
|
||||
});
|
||||
if (res) {
|
||||
const data = {
|
||||
from: 'customer',
|
||||
mode: 'text',
|
||||
date: new Date().getTime(),
|
||||
content: {
|
||||
text: filterXSS(res),
|
||||
},
|
||||
};
|
||||
formatInputCallBack && formatInputCallBack(data);
|
||||
}
|
||||
unref(virtualNode).innerHTML = '';
|
||||
};
|
||||
|
||||
/**
|
||||
* 状态回调
|
||||
* @param {*} res -接口返回数据
|
||||
*/
|
||||
const callBackNotice = (res) => {
|
||||
ElNotification({
|
||||
title: 'socket',
|
||||
message: res.msg,
|
||||
showClose: true,
|
||||
type: res.error === 0 ? 'success' : 'warning',
|
||||
duration: 1200,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化发送信息
|
||||
* @param {Object} message
|
||||
* @returns obj - 消息对象
|
||||
*/
|
||||
const formatInput = (message) => {
|
||||
let obj = {};
|
||||
switch (message.mode) {
|
||||
case 'text':
|
||||
obj = {
|
||||
message_type: 'text',
|
||||
message: message.content.text,
|
||||
};
|
||||
break;
|
||||
case 'image':
|
||||
obj = {
|
||||
message_type: 'image',
|
||||
message: message.content.path,
|
||||
};
|
||||
break;
|
||||
case 'goods':
|
||||
obj = {
|
||||
message_type: 'goods',
|
||||
message: message.content.item,
|
||||
};
|
||||
break;
|
||||
case 'order':
|
||||
obj = {
|
||||
message_type: 'order',
|
||||
message: message.content.item,
|
||||
};
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return obj;
|
||||
};
|
||||
/**
|
||||
* 格式化接收信息
|
||||
* @param {*} message
|
||||
* @returns obj - 消息对象
|
||||
*/
|
||||
const formatMessage = (message) => {
|
||||
let obj = {};
|
||||
switch (message.message_type) {
|
||||
case 'system':
|
||||
obj = {
|
||||
from: 'system', // 用户customer左 | 顾客customer_service右 | 系统system中间
|
||||
mode: 'system', // goods,order,image,text,system
|
||||
date: message.create_time * 1000, //时间
|
||||
content: {
|
||||
//内容
|
||||
text: message.message,
|
||||
},
|
||||
};
|
||||
break;
|
||||
case 'text':
|
||||
obj = {
|
||||
from: message.sender_identify,
|
||||
mode: message.message_type,
|
||||
date: message.create_time * 1000, //时间
|
||||
sender: message.sender,
|
||||
content: {
|
||||
text: message.message,
|
||||
messageId: message.id,
|
||||
},
|
||||
};
|
||||
break;
|
||||
case 'image':
|
||||
obj = {
|
||||
from: message.sender_identify,
|
||||
mode: message.message_type,
|
||||
date: message.create_time * 1000, //时间
|
||||
sender: message.sender,
|
||||
content: {
|
||||
url: sheep.$url.cdn(message.message),
|
||||
messageId: message.id,
|
||||
},
|
||||
};
|
||||
break;
|
||||
case 'goods':
|
||||
obj = {
|
||||
from: message.sender_identify,
|
||||
mode: message.message_type,
|
||||
date: message.create_time * 1000, //时间
|
||||
sender: message.sender,
|
||||
content: {
|
||||
item: message.message,
|
||||
messageId: message.id,
|
||||
},
|
||||
};
|
||||
break;
|
||||
case 'order':
|
||||
obj = {
|
||||
from: message.sender_identify,
|
||||
mode: message.message_type,
|
||||
date: message.create_time * 1000, //时间
|
||||
sender: message.sender,
|
||||
content: {
|
||||
item: message.message,
|
||||
messageId: message.id,
|
||||
},
|
||||
};
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return obj;
|
||||
};
|
||||
|
||||
/**
|
||||
* file 转换为 img
|
||||
* @param {*} file - file 文件
|
||||
* @returns img - img标签
|
||||
*/
|
||||
const readImg = (file) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
img.src = e.target.result;
|
||||
};
|
||||
reader.onerror = function (e) {
|
||||
reject(e);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
img.onload = function () {
|
||||
resolve(img);
|
||||
};
|
||||
img.onerror = function (e) {
|
||||
reject(e);
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 压缩图片
|
||||
*@param img -被压缩的img对象
|
||||
* @param type -压缩后转换的文件类型
|
||||
* @param mx -触发压缩的图片最大宽度限制
|
||||
* @param mh -触发压缩的图片最大高度限制
|
||||
* @returns blob - 文件流
|
||||
*/
|
||||
const compressImg = (img, type = 'image/jpeg', mx = 1000, mh = 1000, quality = 1) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const canvas = document.createElement('canvas');
|
||||
const context = canvas.getContext('2d');
|
||||
const { width: originWidth, height: originHeight } = img;
|
||||
// 最大尺寸限制
|
||||
const maxWidth = mx;
|
||||
const maxHeight = mh;
|
||||
// 目标尺寸
|
||||
let targetWidth = originWidth;
|
||||
let targetHeight = originHeight;
|
||||
if (originWidth > maxWidth || originHeight > maxHeight) {
|
||||
if (originWidth / originHeight > 1) {
|
||||
// 宽图片
|
||||
targetWidth = maxWidth;
|
||||
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
|
||||
} else {
|
||||
// 高图片
|
||||
targetHeight = maxHeight;
|
||||
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
|
||||
}
|
||||
}
|
||||
canvas.width = targetWidth;
|
||||
canvas.height = targetHeight;
|
||||
context.clearRect(0, 0, targetWidth, targetHeight);
|
||||
// 图片绘制
|
||||
context.drawImage(img, 0, 0, targetWidth, targetHeight);
|
||||
canvas.toBlob(
|
||||
function (blob) {
|
||||
resolve(blob);
|
||||
},
|
||||
type,
|
||||
quality,
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
compressImg,
|
||||
readImg,
|
||||
formatMessage,
|
||||
formatInput,
|
||||
callBackNotice,
|
||||
|
||||
socketInit,
|
||||
socketSendMsg,
|
||||
socketClose,
|
||||
socketHistoryList,
|
||||
|
||||
getFocus,
|
||||
formatChatInput,
|
||||
onDrop,
|
||||
onPaste,
|
||||
upload,
|
||||
|
||||
getUserToken,
|
||||
|
||||
state,
|
||||
|
||||
socketTest,
|
||||
|
||||
showTime,
|
||||
formatTime,
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
export const KeFuMessageContentTypeEnum = {
|
||||
TEXT: 1, // 文本消息
|
||||
IMAGE: 2, // 图片消息
|
||||
VOICE: 3, // 语音消息
|
||||
VIDEO: 4, // 视频消息
|
||||
SYSTEM: 5, // 系统消息
|
||||
// ========== 商城特殊消息 ==========
|
||||
PRODUCT: 10,// 商品消息
|
||||
ORDER: 11,// 订单消息"
|
||||
};
|
||||
export const UserTypeEnum = {
|
||||
MEMBER: 1, // 会员 面向 c 端,普通用户
|
||||
ADMIN: 2, // 管理员 面向 b 端,管理后台
|
||||
};
|
||||
// Promotion 的 WebSocket 消息类型枚举类
|
||||
export const WebSocketMessageTypeConstants = {
|
||||
KEFU_MESSAGE_TYPE: 'kefu_message_type', // 客服消息类型
|
||||
KEFU_MESSAGE_ADMIN_READ: 'kefu_message_read_status_change' // 客服消息管理员已读
|
||||
}
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
import { onBeforeUnmount, reactive, ref } from 'vue';
|
||||
import { baseUrl, websocketPath } from '@/sheep/config';
|
||||
import { copyValueToTarget } from '@/sheep/helper/utils';
|
||||
import { getRefreshToken } from '@/sheep/request';
|
||||
|
||||
/**
|
||||
* WebSocket 创建 hook
|
||||
* @param opt 连接配置
|
||||
* @return {{options: *}}
|
||||
*/
|
||||
export function useWebSocket(opt) {
|
||||
const options = reactive({
|
||||
url: (baseUrl + websocketPath).replace('http', 'ws') + '?token=' + getRefreshToken(), // ws 地址
|
||||
isReconnecting: false, // 正在重新连接
|
||||
reconnectInterval: 3000, // 重连间隔,单位毫秒
|
||||
heartBeatInterval: 5000, // 心跳间隔,单位毫秒
|
||||
pingTimeoutDuration: 1000, // 超过这个时间,后端没有返回pong,则判定后端断线了。
|
||||
heartBeatTimer: null, // 心跳计时器
|
||||
destroy: false, // 是否销毁
|
||||
pingTimeout: null, // 心跳检测定时器
|
||||
reconnectTimeout: null, // 重连定时器ID的属性
|
||||
onConnected: () => {}, // 连接成功时触发
|
||||
onClosed: () => {}, // 连接关闭时触发
|
||||
onMessage: (data) => {}, // 收到消息
|
||||
});
|
||||
const SocketTask = ref(null); // SocketTask 由 uni.connectSocket() 接口创建
|
||||
|
||||
const initEventListeners = () => {
|
||||
// 监听 WebSocket 连接打开事件
|
||||
SocketTask.value.onOpen(() => {
|
||||
console.log('WebSocket 连接成功');
|
||||
// 连接成功时触发
|
||||
options.onConnected();
|
||||
// 开启心跳检查
|
||||
startHeartBeat();
|
||||
});
|
||||
// 监听 WebSocket 接受到服务器的消息事件
|
||||
SocketTask.value.onMessage((res) => {
|
||||
try {
|
||||
if (res.data === 'pong') {
|
||||
// 收到心跳重置心跳超时检查
|
||||
resetPingTimeout();
|
||||
} else {
|
||||
options.onMessage(JSON.parse(res.data));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
// 监听 WebSocket 连接关闭事件
|
||||
SocketTask.value.onClose((event) => {
|
||||
// 情况一:实例销毁
|
||||
if (options.destroy) {
|
||||
options.onClosed();
|
||||
} else {
|
||||
// 情况二:连接失败重连
|
||||
// 停止心跳检查
|
||||
stopHeartBeat();
|
||||
// 重连
|
||||
reconnect();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 发送消息
|
||||
const sendMessage = (message) => {
|
||||
if (SocketTask.value && !options.destroy) {
|
||||
SocketTask.value.send({ data: message });
|
||||
}
|
||||
};
|
||||
// 开始心跳检查
|
||||
const startHeartBeat = () => {
|
||||
options.heartBeatTimer = setInterval(() => {
|
||||
sendMessage('ping');
|
||||
options.pingTimeout = setTimeout(() => {
|
||||
// 如果在超时时间内没有收到 pong,则认为连接断开
|
||||
reconnect();
|
||||
}, options.pingTimeoutDuration);
|
||||
}, options.heartBeatInterval);
|
||||
};
|
||||
// 停止心跳检查
|
||||
const stopHeartBeat = () => {
|
||||
clearInterval(options.heartBeatTimer);
|
||||
resetPingTimeout();
|
||||
};
|
||||
|
||||
// WebSocket 重连
|
||||
const reconnect = () => {
|
||||
if (options.destroy || !SocketTask.value) {
|
||||
// 如果WebSocket已被销毁或尚未完全关闭,不进行重连
|
||||
return;
|
||||
}
|
||||
|
||||
// 重连中
|
||||
options.isReconnecting = true;
|
||||
|
||||
// 清除现有的重连标志,以避免多次重连
|
||||
if (options.reconnectTimeout) {
|
||||
clearTimeout(options.reconnectTimeout);
|
||||
}
|
||||
|
||||
// 设置重连延迟
|
||||
options.reconnectTimeout = setTimeout(() => {
|
||||
// 检查组件是否仍在运行和WebSocket是否关闭
|
||||
if (!options.destroy) {
|
||||
// 重置重连标志
|
||||
options.isReconnecting = false;
|
||||
// 初始化新的WebSocket连接
|
||||
initSocket();
|
||||
}
|
||||
}, options.reconnectInterval);
|
||||
};
|
||||
|
||||
const resetPingTimeout = () => {
|
||||
if (options.pingTimeout) {
|
||||
clearTimeout(options.pingTimeout);
|
||||
options.pingTimeout = null; // 清除超时ID
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
options.destroy = true;
|
||||
stopHeartBeat();
|
||||
if (options.reconnectTimeout) {
|
||||
clearTimeout(options.reconnectTimeout);
|
||||
}
|
||||
if (SocketTask.value) {
|
||||
SocketTask.value.close();
|
||||
SocketTask.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const initSocket = () => {
|
||||
options.destroy = false;
|
||||
copyValueToTarget(options, opt);
|
||||
SocketTask.value = uni.connectSocket({
|
||||
url: options.url,
|
||||
complete: () => {},
|
||||
success: () => {},
|
||||
});
|
||||
initEventListeners();
|
||||
};
|
||||
|
||||
initSocket();
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
close();
|
||||
});
|
||||
return { options };
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -16,7 +16,7 @@
|
|||
/>
|
||||
</button>
|
||||
</view>
|
||||
<view class="ss-flex" @tap="sheep.$router.go('/pages/user/wallet/commission')">
|
||||
<view class="ss-flex" @tap="sheep.$router.go('/pages/commission/wallet')">
|
||||
<view class="header-title ss-m-r-4">查看明细</view>
|
||||
<text class="cicon-play-arrow" />
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,8 @@
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
methods: { // 开启的提现方式
|
||||
methods: {
|
||||
// 开启的提现方式
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
|
|
@ -57,25 +58,35 @@
|
|||
|
||||
const typeList = [
|
||||
{
|
||||
// icon: '/static/img/shop/pay/wechat.png', // TODO 芋艿:后续给个 icon
|
||||
icon: '/static/img/shop/pay/wallet.png',
|
||||
title: '钱包余额',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/wechat.png',
|
||||
title: '微信零钱',
|
||||
icon: '/static/img/shop/pay/bank.png',
|
||||
title: '银行卡转账',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/alipay.png',
|
||||
title: '支付宝账户',
|
||||
icon: '/static/img/shop/pay/wechat.png',
|
||||
title: '微信收款码', // 微信手动转账
|
||||
value: '3',
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/bank.png',
|
||||
title: '银行卡转账',
|
||||
icon: '/static/img/shop/pay/alipay.png',
|
||||
title: '支付宝收款码', // 支付宝手动转账
|
||||
value: '4',
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/wechat_api.png',
|
||||
title: '微信零钱', // 微信 API 转账
|
||||
value: '5',
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/alipay_api.png',
|
||||
title: '支付宝余额', // 支付宝 API 转账
|
||||
value: '6',
|
||||
},
|
||||
];
|
||||
|
||||
function onChange(e) {
|
||||
|
|
@ -89,7 +100,7 @@
|
|||
}
|
||||
// 赋值
|
||||
emits('update:modelValue', {
|
||||
type: state.currentValue
|
||||
type: state.currentValue,
|
||||
});
|
||||
// 关闭弹窗
|
||||
emits('close');
|
||||
|
|
|
|||
|
|
@ -31,9 +31,10 @@
|
|||
<style lang="scss" scoped>
|
||||
// 用户资料卡片
|
||||
.user-card {
|
||||
width: 690rpx;
|
||||
width: 700rpx;
|
||||
height: 192rpx;
|
||||
margin: -88rpx 20rpx 0 20rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: -88rpx;
|
||||
padding-top: 88rpx;
|
||||
background: v-bind(headerBg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
|
|
|||
|
|
@ -8,14 +8,26 @@
|
|||
<text class="cicon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" @scrolltolower="loadmore" class="scroll-box log-scroll"
|
||||
scroll-with-animation="true">
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
@scrolltolower="loadmore"
|
||||
class="scroll-box log-scroll"
|
||||
scroll-with-animation="true"
|
||||
>
|
||||
<view v-if="state.pagination.list">
|
||||
<view class="log-item-box ss-flex ss-row-between" v-for="item in state.pagination.list" :key="item.id">
|
||||
<view
|
||||
class="log-item-box ss-flex ss-row-between"
|
||||
v-for="item in state.pagination.list"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="log-item-wrap">
|
||||
<view class="log-item ss-flex ss-ellipsis-1 ss-col-center">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<image class="log-img" :src="sheep.$url.static('/static/img/shop/avatar/notice.png')" mode="aspectFill" />
|
||||
<image
|
||||
class="log-img"
|
||||
:src="sheep.$url.static('/static/img/shop/avatar/notice.png')"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="log-text ss-ellipsis-1">
|
||||
{{ item.title }} {{ fen2yuan(item.price) }} 元
|
||||
|
|
@ -27,8 +39,12 @@
|
|||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" color="#333333"
|
||||
@tap="loadmore" />
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
color="#333333"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -36,7 +52,7 @@
|
|||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import _ from 'lodash-es';
|
||||
import dayjs from 'dayjs';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
import { fen2yuan } from '../../../sheep/hooks/useGoods';
|
||||
|
|
@ -47,7 +63,7 @@
|
|||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 1,
|
||||
pageSize: 8,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -55,7 +71,7 @@
|
|||
state.loadStatus = 'loading';
|
||||
const { code, data } = await BrokerageApi.getBrokerageRecordPage({
|
||||
pageNo: state.pagination.pageNo,
|
||||
pageSize: state.pagination.pageSize
|
||||
pageSize: state.pagination.pageSize,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -9,9 +9,17 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="menu-list ss-flex ss-flex-wrap">
|
||||
<view v-for="(item, index) in state.menuList" :key="index" class="item-box ss-flex-col ss-col-center"
|
||||
@tap="sheep.$router.go(item.path)">
|
||||
<image class="menu-icon ss-m-b-10" :src="sheep.$url.static(item.img)" mode="aspectFill"></image>
|
||||
<view
|
||||
v-for="(item, index) in state.menuList"
|
||||
:key="index"
|
||||
class="item-box ss-flex-col ss-col-center"
|
||||
@tap="sheep.$router.go(item.path)"
|
||||
>
|
||||
<image
|
||||
class="menu-icon ss-m-b-10"
|
||||
:src="sheep.$url.static(item.img)"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view>{{ item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -23,7 +31,8 @@
|
|||
import { reactive } from 'vue';
|
||||
|
||||
const state = reactive({
|
||||
menuList: [{
|
||||
menuList: [
|
||||
{
|
||||
img: '/static/img/shop/commission/commission_icon1.png',
|
||||
title: '我的团队',
|
||||
path: '/pages/commission/team',
|
||||
|
|
@ -49,23 +58,21 @@
|
|||
// path: '/pages/commission/apply',
|
||||
// isAgentFrom: true,
|
||||
// },
|
||||
// todo @芋艿:邀请海报需要登录后的个人数据
|
||||
{
|
||||
img: '/static/img/shop/commission/commission_icon7.png',
|
||||
title: '邀请海报',
|
||||
path: 'action:showShareModal',
|
||||
},
|
||||
// TODO @芋艿:缺少 icon
|
||||
{
|
||||
// img: '/static/img/shop/commission/commission_icon7.png',
|
||||
img: '/static/img/shop/commission/commission_icon8.png',
|
||||
title: '推广排行',
|
||||
path: '/pages/commission/promoter',
|
||||
},
|
||||
{
|
||||
// img: '/static/img/shop/commission/commission_icon7.png',
|
||||
img: '/static/img/shop/commission/commission_icon9.png',
|
||||
title: '佣金排行',
|
||||
path: '/pages/commission/commission-ranking',
|
||||
}
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,18 @@
|
|||
>
|
||||
<template #rightBottom>
|
||||
<view class="ss-flex ss-row-between">
|
||||
<view class="commission-num" v-if="item.brokerageMinPrice === undefined">预计佣金:计算中</view>
|
||||
<view class="commission-num" v-else-if="item.brokerageMinPrice === item.brokerageMaxPrice">
|
||||
<view class="commission-num" v-if="item.brokerageMinPrice === undefined">
|
||||
预计佣金:计算中
|
||||
</view>
|
||||
<view
|
||||
class="commission-num"
|
||||
v-else-if="item.brokerageMinPrice === item.brokerageMaxPrice"
|
||||
>
|
||||
预计佣金:{{ fen2yuan(item.brokerageMinPrice) }}
|
||||
</view>
|
||||
<view class="commission-num" v-else>
|
||||
预计佣金:{{ fen2yuan(item.brokerageMinPrice) }} ~ {{ fen2yuan(item.brokerageMaxPrice) }}
|
||||
预计佣金:{{ fen2yuan(item.brokerageMinPrice) }} ~
|
||||
{{ fen2yuan(item.brokerageMaxPrice) }}
|
||||
</view>
|
||||
<button
|
||||
class="ss-reset-button share-btn ui-BG-Main-Gradient"
|
||||
|
|
@ -53,30 +59,29 @@
|
|||
import $share from '@/sheep/platform/share';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import _ from 'lodash-es';
|
||||
import { showShareModal } from '@/sheep/hooks/useModal';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
import { fen2yuan } from '../../sheep/hooks/useGoods';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
|
||||
const state = reactive({
|
||||
pagination: {
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 1,
|
||||
pageSize: 8,
|
||||
},
|
||||
loadStatus: '',
|
||||
shareInfo: {},
|
||||
});
|
||||
|
||||
// TODO 芋艿:分享的接入
|
||||
function onShareGoods(goodsInfo) {
|
||||
state.shareInfo = $share.getShareInfo(
|
||||
{
|
||||
title: goodsInfo.title,
|
||||
image: sheep.$url.cdn(goodsInfo.image),
|
||||
desc: goodsInfo.subtitle,
|
||||
title: goodsInfo.name,
|
||||
image: sheep.$url.cdn(goodsInfo.picUrl),
|
||||
desc: goodsInfo.introduction,
|
||||
params: {
|
||||
page: '2',
|
||||
query: goodsInfo.id,
|
||||
|
|
@ -84,10 +89,10 @@
|
|||
},
|
||||
{
|
||||
type: 'goods', // 商品海报
|
||||
title: goodsInfo.title, // 商品标题
|
||||
image: sheep.$url.cdn(goodsInfo.image), // 商品主图
|
||||
price: goodsInfo.price[0], // 商品价格
|
||||
original_price: goodsInfo.original_price, // 商品原价
|
||||
title: goodsInfo.name, // 商品名称
|
||||
image: sheep.$url.cdn(goodsInfo.picUrl), // 商品主图
|
||||
price: fen2yuan(goodsInfo.price), // 商品价格
|
||||
original_price: fen2yuan(goodsInfo.marketPrice), // 商品原价
|
||||
},
|
||||
);
|
||||
showShareModal();
|
||||
|
|
@ -99,19 +104,29 @@
|
|||
pageSize: state.pagination.pageSize,
|
||||
pageNo: state.pagination.pageNo,
|
||||
});
|
||||
|
||||
if (code !== 0) {
|
||||
state.loadStatus = 'error'; // 处理错误状态
|
||||
return;
|
||||
}
|
||||
|
||||
// 使用 Promise.all 来等待所有佣金请求完成
|
||||
await Promise.all(
|
||||
data.list.map(async (item) => {
|
||||
try {
|
||||
const res = await BrokerageApi.getProductBrokeragePrice(item.id);
|
||||
item.brokerageMinPrice = res.data.brokerageMinPrice;
|
||||
item.brokerageMaxPrice = res.data.brokerageMaxPrice;
|
||||
} catch (error) {
|
||||
console.error(`获取商品【${item.name}】的佣金时出错:`, error);
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
||||
// 在所有请求完成后合并列表和更新状态
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
// 补充分佣金额
|
||||
data.list.forEach((item) => {
|
||||
BrokerageApi.getProductBrokeragePrice(item.id).then((res) => {
|
||||
item.brokerageMinPrice = res.data.brokerageMinPrice;
|
||||
item.brokerageMaxPrice = res.data.brokerageMaxPrice;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
<!-- 分销中心 -->
|
||||
<template>
|
||||
<s-layout navbar="inner" class="index-wrap" title="分销中心" :bgStyle="bgStyle" onShareAppMessage>
|
||||
<s-layout
|
||||
navbar="inner"
|
||||
class="index-wrap"
|
||||
title="分销中心"
|
||||
:bgStyle="bgStyle"
|
||||
:onShareAppMessage="shareInfo"
|
||||
>
|
||||
<!-- 分销商信息 -->
|
||||
<commission-info />
|
||||
<!-- 账户信息 -->
|
||||
|
|
@ -16,14 +22,28 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import commissionInfo from './components/commission-info.vue';
|
||||
import accountInfo from './components/account-info.vue';
|
||||
import commissionLog from './components/commission-log.vue';
|
||||
import commissionMenu from './components/commission-menu.vue';
|
||||
import commissionAuth from './components/commission-auth.vue';
|
||||
import sheep from '@/sheep';
|
||||
import { SharePageEnum } from '@/sheep/helper/const';
|
||||
|
||||
const state = reactive({});
|
||||
/** 分销邀请 */
|
||||
const shareInfo = computed(() => {
|
||||
return sheep.$platform.share.getShareInfo(
|
||||
{
|
||||
params: {
|
||||
page: SharePageEnum.HOME.value, // 用户通邀请进入到首页
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'user',
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
const bgStyle = {
|
||||
color: '#F7D598',
|
||||
|
|
|
|||
|
|
@ -41,10 +41,7 @@
|
|||
<view class="no-box ss-flex ss-col-center ss-row-between">
|
||||
<text class="order-code">订单编号:{{ item.bizId }}</text>
|
||||
<text class="order-state">
|
||||
{{
|
||||
item.status === 0 ? '待结算'
|
||||
: item.status === 1 ? '已结算' : '已取消'
|
||||
}}
|
||||
{{ item.status === 0 ? '待结算' : item.status === 1 ? '已结算' : '已取消' }}
|
||||
( 佣金 {{ fen2yuan(item.price) }} 元 )
|
||||
</text>
|
||||
</view>
|
||||
|
|
@ -75,11 +72,10 @@
|
|||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import { onPageScroll } from '@dcloudio/uni-app';
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
import _ from 'lodash-es';
|
||||
import { resetPagination } from '@/sheep/helper/utils';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
import { fen2yuan } from '../../sheep/hooks/useGoods';
|
||||
|
||||
|
|
@ -100,22 +96,22 @@
|
|||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 1,
|
||||
pageSize: 8,
|
||||
},
|
||||
});
|
||||
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
value: -1,
|
||||
},
|
||||
{
|
||||
name: '待结算',
|
||||
value: '0', // 待结算
|
||||
value: 0, // 待结算
|
||||
},
|
||||
{
|
||||
name: '已结算',
|
||||
value: '1', // 已结算
|
||||
value: 1, // 已结算
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -129,12 +125,17 @@
|
|||
// 获取订单列表
|
||||
async function getOrderList() {
|
||||
state.loadStatus = 'loading';
|
||||
let { code, data } = await BrokerageApi.getBrokerageRecordPage({
|
||||
const tab = tabMaps[state.currentTab];
|
||||
const queryParams = {
|
||||
pageSize: state.pagination.pageSize,
|
||||
pageNo: state.pagination.pageSize,
|
||||
pageNo: state.pagination.pageNo,
|
||||
bizType: 1, // 获得推广佣金
|
||||
status: state.currentTab > 0 ? state.currentTab : undefined,
|
||||
});
|
||||
status: tab.value,
|
||||
};
|
||||
if (tab.value < 0) {
|
||||
delete queryParams.status;
|
||||
}
|
||||
const { code, data } = await BrokerageApi.getBrokerageRecordPage(queryParams);
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,31 @@
|
|||
<!-- 页面 TODO 芋艿:该页面的实现代码需要优化,包括 js 和 css,以及相关的样式设计 -->
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner">
|
||||
<view class="promoter-list">
|
||||
<view
|
||||
class="header-box"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 108) + 'rpx',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<!-- 推广数据总览 -->
|
||||
<view class="team-data-box ss-flex ss-col-center ss-row-between" style="width: 100%">
|
||||
<view class="data-card" style="width: 100%">
|
||||
<view class="total-item" style="width: 100%">
|
||||
<view class="item-title" style="text-align: center">推广人数</view>
|
||||
<view class="total-num" style="text-align: center">
|
||||
{{
|
||||
state.summary.firstBrokerageUserCount + state.summary.secondBrokerageUserCount || 0
|
||||
}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="promoter-list">
|
||||
<!--<view
|
||||
class="promoterHeader bg-color"
|
||||
style="backgroundcolor: #e93323 !important; height: 218rpx; color: #fff"
|
||||
>
|
||||
|
|
@ -21,9 +44,9 @@
|
|||
</view>
|
||||
<view class="iconfont icon-tuandui" />
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding: 0 30rpx">
|
||||
<view class="nav acea-row row-around l1">
|
||||
</view>-->
|
||||
<view style="padding: 0 20rpx">
|
||||
<view class="nav acea-row row-around l1" style="margin-top: 20rpx">
|
||||
<view :class="state.level == 1 ? 'item on' : 'item'" @click="setType(1)">
|
||||
一级({{ state.summary.firstBrokerageUserCount || 0 }})
|
||||
</view>
|
||||
|
|
@ -45,7 +68,7 @@
|
|||
/>
|
||||
</view>
|
||||
<image
|
||||
src="/static/images/search.png"
|
||||
:src="sheep.$url.static('/static/img/shop/search.png')"
|
||||
mode=""
|
||||
style="width: 60rpx; height: 64rpx"
|
||||
@click="submitForm"
|
||||
|
|
@ -59,8 +82,7 @@
|
|||
v-if="sort === 'userCountDESC'"
|
||||
>
|
||||
团队排序
|
||||
<!-- TODO 芋艿:看看怎么从项目里拿出去 -->
|
||||
<image src="/static/images/sort1.png" />
|
||||
<image :src="sheep.$url.static('/static/img/shop/sort1.png')" />
|
||||
</view>
|
||||
<view
|
||||
class="sortItem"
|
||||
|
|
@ -68,15 +90,15 @@
|
|||
v-else-if="sort === 'userCountASC'"
|
||||
>
|
||||
团队排序
|
||||
<image src="/static/images/sort3.png" />
|
||||
<image :src="sheep.$url.static('/static/img/shop/sort3.png')" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('userCount', 'desc')" v-else>
|
||||
团队排序
|
||||
<image src="/static/images/sort2.png" />
|
||||
<image :src="sheep.$url.static('/static/img/shop/sort2.png')" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('price', 'asc')" v-if="sort === 'priceDESC'">
|
||||
金额排序
|
||||
<image src="/static/images/sort1.png" />
|
||||
<image :src="sheep.$url.static('/static/img/shop/sort1.png')" />
|
||||
</view>
|
||||
<view
|
||||
class="sortItem"
|
||||
|
|
@ -84,11 +106,11 @@
|
|||
v-else-if="sort === 'priceASC'"
|
||||
>
|
||||
金额排序
|
||||
<image src="/static/images/sort3.png" />
|
||||
<image :src="sheep.$url.static('/static/img/shop/sort3.png')" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('price', 'desc')" v-else>
|
||||
金额排序
|
||||
<image src="/static/images/sort2.png" />
|
||||
<image :src="sheep.$url.static('/static/img/shop/sort2.png')" />
|
||||
</view>
|
||||
<view
|
||||
class="sortItem"
|
||||
|
|
@ -96,7 +118,7 @@
|
|||
v-if="sort === 'orderCountDESC'"
|
||||
>
|
||||
订单排序
|
||||
<image src="/static/images/sort1.png" />
|
||||
<image :src="sheep.$url.static('/static/img/shop/sort1.png')" />
|
||||
</view>
|
||||
<view
|
||||
class="sortItem"
|
||||
|
|
@ -104,11 +126,11 @@
|
|||
v-else-if="sort === 'orderCountASC'"
|
||||
>
|
||||
订单排序
|
||||
<image src="/static/images/sort3.png" />
|
||||
<image :src="sheep.$url.static('/static/img/shop/sort3.png')" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('orderCount', 'desc')" v-else>
|
||||
订单排序
|
||||
<image src="/static/images/sort2.png" />
|
||||
<image :src="sheep.$url.static('/static/img/shop/sort2.png')" />
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(item, index) in state.pagination.list" :key="index">
|
||||
|
|
@ -145,14 +167,14 @@
|
|||
>单</view
|
||||
>
|
||||
<view>
|
||||
<text class="num">{{ item.brokeragePrice || 0 }}</text
|
||||
<text class="num">{{ fen2yuan(item.brokeragePrice) || 0 }}</text
|
||||
>元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="state.pagination.list.length === 0">
|
||||
<view style="text-align: center">暂无推广人数</view>
|
||||
<view style="text-align: center; margin-top: 30rpx">暂无推广人数</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -235,9 +257,10 @@
|
|||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import _ from 'lodash-es';
|
||||
import { onPageScroll } from '@dcloudio/uni-app';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
import { fen2yuan } from '../../sheep/hooks/useGoods';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
// const agentInfo = computed(() => sheep.$store('user').agentInfo);
|
||||
|
|
@ -456,7 +479,7 @@
|
|||
.promoter-list .nav .item.on {
|
||||
border-bottom: 5rpx solid;
|
||||
// $theme-color
|
||||
color: red;
|
||||
color: var(--ui-BG-Main);
|
||||
// $theme-color
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,14 +6,22 @@
|
|||
<view class="card-box ui-BG-Main ui-Shadow-Main">
|
||||
<view class="card-head ss-flex ss-col-center">
|
||||
<view class="card-title ss-m-r-10">当前佣金(元)</view>
|
||||
<view @tap="state.showMoney = !state.showMoney" class="ss-eye-icon"
|
||||
:class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'" />
|
||||
<view
|
||||
@tap="state.showMoney = !state.showMoney"
|
||||
class="ss-eye-icon"
|
||||
:class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
|
||||
/>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-between ss-col-center ss-m-t-30">
|
||||
<view class="money-num">{{ state.showMoney ? fen2yuan(state.summary.withdrawPrice || 0) : '*****' }}</view>
|
||||
<view class="money-num">{{
|
||||
state.showMoney ? fen2yuan(state.summary.withdrawPrice || 0) : '*****'
|
||||
}}</view>
|
||||
<view class="ss-flex">
|
||||
<view class="ss-m-r-20">
|
||||
<button class="ss-reset-button withdraw-btn" @tap="sheep.$router.go('/pages/commission/withdraw')">
|
||||
<button
|
||||
class="ss-reset-button withdraw-btn"
|
||||
@tap="sheep.$router.go('/pages/commission/withdraw')"
|
||||
>
|
||||
提现
|
||||
</button>
|
||||
</view>
|
||||
|
|
@ -43,7 +51,12 @@
|
|||
<su-sticky>
|
||||
<!-- 统计 -->
|
||||
<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
|
||||
<uni-datetime-picker v-model="state.date" type="daterange" @change="onChangeTime" :end="state.today">
|
||||
<uni-datetime-picker
|
||||
v-model="state.date"
|
||||
type="daterange"
|
||||
@change="onChangeTime"
|
||||
:end="state.today"
|
||||
>
|
||||
<button class="ss-reset-button date-btn">
|
||||
<text>{{ dateFilterText }}</text>
|
||||
<text class="cicon-drop-down ss-seldate-icon" />
|
||||
|
|
@ -51,26 +64,49 @@
|
|||
</uni-datetime-picker>
|
||||
|
||||
<view class="total-box">
|
||||
<!-- TODO 芋艿:这里暂时不考虑做 -->
|
||||
<!-- TODO 芋艿:【钱包-可优化】这里暂时不考虑做 -->
|
||||
<!-- <view class="ss-m-b-10">总收入¥{{ state.pagination.income.toFixed(2) }}</view> -->
|
||||
<!-- <view>总支出¥{{ (-state.pagination.expense).toFixed(2) }}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<su-tabs :list="tabMaps" @change="onChangeTab" :scrollable="false" :current="state.currentTab" />
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
@change="onChangeTab"
|
||||
:scrollable="false"
|
||||
:current="state.currentTab"
|
||||
/>
|
||||
</su-sticky>
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无数据"></s-empty>
|
||||
<s-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
icon="/static/data-empty.png"
|
||||
text="暂无数据"
|
||||
></s-empty>
|
||||
|
||||
<!-- 转余额弹框 -->
|
||||
<su-popup :show="state.showModal" type="bottom" round="20" @close="state.showModal = false" showClose>
|
||||
<su-popup
|
||||
:show="state.showModal"
|
||||
type="bottom"
|
||||
round="20"
|
||||
@close="state.showModal = false"
|
||||
showClose
|
||||
>
|
||||
<view class="ss-p-x-20 ss-p-y-30">
|
||||
<view class="model-title ss-m-b-30 ss-m-l-20">转余额</view>
|
||||
<view class="model-subtitle ss-m-b-100 ss-m-l-20">将您的佣金转到余额中继续消费</view>
|
||||
<view class="input-box ss-flex ss-col-center border-bottom ss-m-b-70 ss-m-x-20">
|
||||
<view class="unit">¥</view>
|
||||
<uni-easyinput :inputBorder="false" class="ss-flex-1 ss-p-l-10" v-model="state.price" type="number"
|
||||
placeholder="请输入金额" />
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
class="ss-flex-1 ss-p-l-10"
|
||||
v-model="state.price"
|
||||
type="number"
|
||||
placeholder="请输入金额"
|
||||
/>
|
||||
</view>
|
||||
<button class="ss-reset-button model-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onConfirm">
|
||||
<button
|
||||
class="ss-reset-button model-btn ui-BG-Main-Gradient ui-Shadow-Main"
|
||||
@tap="onConfirm"
|
||||
>
|
||||
确定
|
||||
</button>
|
||||
</view>
|
||||
|
|
@ -78,7 +114,13 @@
|
|||
|
||||
<!-- 钱包记录 -->
|
||||
<view v-if="state.pagination.total > 0">
|
||||
<view class="wallet-list ss-flex border-bottom" v-for="item in state.pagination.list" :key="item.id">
|
||||
<!-- 分佣列表 -->
|
||||
<view v-if="state.currentTab === 0">
|
||||
<view
|
||||
class="wallet-list ss-flex border-bottom"
|
||||
v-for="item in state.pagination.list"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="list-content">
|
||||
<view class="title-box ss-flex ss-row-between ss-m-b-20">
|
||||
<text class="title ss-line-1">{{ item.title }}</text>
|
||||
|
|
@ -87,15 +129,59 @@
|
|||
<text v-else class="minus">{{ fen2yuan(item.price) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="time">{{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
|
||||
<view class="ss-flex ss-row-between ss-col-center">
|
||||
<text class="time">
|
||||
{{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</text>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="status" :class="'status-' + item.status">{{ item.statusName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 提现列表 -->
|
||||
<view v-else>
|
||||
<view
|
||||
class="wallet-list ss-flex border-bottom"
|
||||
v-for="item in state.pagination.list"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="list-content">
|
||||
<view class="title-box ss-flex ss-row-between ss-m-b-20">
|
||||
<text class="title ss-line-1">{{ item.typeName }}</text>
|
||||
<view class="money">
|
||||
<text class="minus">{{ fen2yuan(item.price) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-between ss-col-center">
|
||||
<text class="time">
|
||||
{{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</text>
|
||||
<button
|
||||
v-if="item.status === 10 && item.type === 5 && item.payTransferId > 0"
|
||||
class="ss-reset-button confirm-btn ss-m-l-20"
|
||||
@tap="onRequestMerchantTransfer(item)"
|
||||
>
|
||||
确认收款
|
||||
</button>
|
||||
<text v-else class="status" :class="'status-' + item.status">{{
|
||||
item.statusName
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <u-gap></u-gap> -->
|
||||
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}" />
|
||||
}"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
|
|
@ -104,10 +190,11 @@
|
|||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import dayjs from 'dayjs';
|
||||
import _ from 'lodash';
|
||||
import _ from 'lodash-es';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
import { resetPagination } from '@/sheep/helper/utils';
|
||||
import PayTransferApi from '@/sheep/api/pay/transfer';
|
||||
|
||||
const headerBg = sheep.$url.css('/static/img/shop/user/wallet_card_bg.png');
|
||||
|
||||
|
|
@ -122,7 +209,7 @@
|
|||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 1,
|
||||
pageSize: 8,
|
||||
},
|
||||
loadStatus: '',
|
||||
|
||||
|
|
@ -130,14 +217,15 @@
|
|||
showModal: false,
|
||||
});
|
||||
|
||||
const tabMaps = [{
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '分佣',
|
||||
value: '1', // BrokerageRecordBizTypeEnum.ORDER
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
name: '提现',
|
||||
value: '2', // BrokerageRecordBizTypeEnum.WITHDRAW
|
||||
}
|
||||
value: '2',
|
||||
},
|
||||
];
|
||||
|
||||
const dateFilterText = computed(() => {
|
||||
|
|
@ -150,13 +238,19 @@
|
|||
|
||||
async function getLogList() {
|
||||
state.loadStatus = 'loading';
|
||||
let { code, data } = await BrokerageApi.getBrokerageRecordPage({
|
||||
let { code, data } = await (state.currentTab === 0
|
||||
? BrokerageApi.getBrokerageRecordPage({
|
||||
pageSize: state.pagination.pageSize,
|
||||
pageNo: state.pagination.pageNo,
|
||||
bizType: tabMaps[state.currentTab].value,
|
||||
'createTime[0]': state.date[0] + ' 00:00:00',
|
||||
'createTime[1]': state.date[1] + ' 23:59:59',
|
||||
});
|
||||
})
|
||||
: BrokerageApi.getBrokerageWithdrawPage({
|
||||
pageSize: state.pagination.pageSize,
|
||||
pageNo: state.pagination.pageNo,
|
||||
'createTime[0]': state.date[0] + ' 00:00:00',
|
||||
'createTime[1]': state.date[1] + ' 23:59:59',
|
||||
}));
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -187,7 +281,7 @@
|
|||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认把您的佣金转入到余额钱包中?',
|
||||
success: async function(res) {
|
||||
success: async function (res) {
|
||||
if (!res.confirm) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -199,10 +293,10 @@
|
|||
state.showModal = false;
|
||||
await getAgentInfo();
|
||||
onChangeTab({
|
||||
index: 1
|
||||
index: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -214,10 +308,65 @@
|
|||
state.summary = data;
|
||||
}
|
||||
|
||||
// 微信场景下:用户确认收款
|
||||
// 可见 https://pay.weixin.qq.com/doc/v3/merchant/4012716430 文档
|
||||
async function onRequestMerchantTransfer(item) {
|
||||
const requestMerchantTransfer = sheep.$platform.useProvider()
|
||||
? sheep.$platform.useProvider().requestMerchantTransfer
|
||||
: undefined;
|
||||
if (!requestMerchantTransfer) {
|
||||
sheep.$helper.toast('仅微信平台支持该功能');
|
||||
return;
|
||||
}
|
||||
// 获取提现详情
|
||||
const { code, data } = await BrokerageApi.getBrokerageWithdraw(item.id);
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
if (data.status === 11) {
|
||||
sheep.$helper.toast('该提现单已确认收款');
|
||||
item.status = 11;
|
||||
return;
|
||||
}
|
||||
if (!data.transferChannelMchId || !data.transferChannelPackageInfo) {
|
||||
sheep.$helper.toast('提现信息异常,请稍后再试');
|
||||
return;
|
||||
}
|
||||
// 调用微信确认收款
|
||||
const payTransferId = data.payTransferId;
|
||||
await requestMerchantTransfer(
|
||||
data.transferChannelMchId,
|
||||
data.transferChannelPackageInfo,
|
||||
async (res) => {
|
||||
if (res.result !== 'success') {
|
||||
sheep.$helper.toast(res.errMsg);
|
||||
return;
|
||||
}
|
||||
// 同步转账单状态
|
||||
try {
|
||||
const syncTransferResult = await PayTransferApi.syncTransfer(payTransferId);
|
||||
console.log('syncTransferResult 结果', syncTransferResult);
|
||||
} catch (e) {
|
||||
console.error('syncTransferResult 异常', e);
|
||||
}
|
||||
// 查询提现单最新状态
|
||||
const { data } = await BrokerageApi.getBrokerageWithdraw(item.id);
|
||||
if (data && data.status !== 11) {
|
||||
sheep.$helper.toast('确认收款成功,但数据存在延迟,请以实际【微信支付】到账为准');
|
||||
return;
|
||||
}
|
||||
sheep.$helper.toast('确认收款成功');
|
||||
// 更新到列表中
|
||||
item.status = 11;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
state.today = dayjs().format('YYYY-MM-DD');
|
||||
state.date = [state.today, state.today];
|
||||
if (options.type === 2) { // 切换到“提现” tab 下
|
||||
if (options.type === '2') {
|
||||
// 切换到"提现" tab 下
|
||||
state.currentTab = 1;
|
||||
}
|
||||
getLogList();
|
||||
|
|
@ -428,6 +577,17 @@
|
|||
color: $dark-3;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
font-size: 22rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
background: rgba(var(--ui-BG-Main-rgb), 0.1);
|
||||
padding: 4rpx 16rpx;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
border-radius: 20rpx;
|
||||
border: 1px solid var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
.model-title {
|
||||
|
|
@ -467,4 +627,17 @@
|
|||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 22rpx;
|
||||
&.status-0 {
|
||||
color: #ff9900;
|
||||
}
|
||||
&.status-1 {
|
||||
color: #19be6b;
|
||||
}
|
||||
&.status-2 {
|
||||
color: #fa3534;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,7 +15,10 @@
|
|||
<view class="num-title">可提现金额(元)</view>
|
||||
<view class="wallet-num">{{ fen2yuan(state.brokerageInfo.brokeragePrice) }}</view>
|
||||
</view>
|
||||
<button class="ss-reset-button log-btn" @tap="sheep.$router.go('/pages/commission/wallet', { type: 2 })">
|
||||
<button
|
||||
class="ss-reset-button log-btn"
|
||||
@tap="sheep.$router.go('/pages/commission/wallet', { type: 2 })"
|
||||
>
|
||||
提现记录
|
||||
</button>
|
||||
</view>
|
||||
|
|
@ -26,9 +29,10 @@
|
|||
<view class="bank-list ss-flex ss-col-center" @tap="onAccountSelect(true)">
|
||||
<view v-if="!state.accountInfo.type" class="empty-text">请选择提现方式</view>
|
||||
<view v-if="state.accountInfo.type === '1'" class="empty-text">钱包余额</view>
|
||||
<view v-if="state.accountInfo.type === '2'" class="empty-text">微信零钱</view>
|
||||
<view v-if="state.accountInfo.type === '3'" class="empty-text">支付宝账户</view>
|
||||
<view v-if="state.accountInfo.type === '4'" class="empty-text">银行卡转账</view>
|
||||
<view v-if="state.accountInfo.type === '2'" class="empty-text">银行卡转账</view>
|
||||
<view v-if="state.accountInfo.type === '3'" class="empty-text">微信账户</view>
|
||||
<view v-if="state.accountInfo.type === '4'" class="empty-text">支付宝账户</view>
|
||||
<view v-if="state.accountInfo.type === '5'" class="empty-text">微信零钱</view>
|
||||
<text class="cicon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -45,71 +49,85 @@
|
|||
/>
|
||||
</view>
|
||||
<!-- 提现账号 -->
|
||||
<view class="card-title" v-show="['2', '3', '4'].includes(state.accountInfo.type)">
|
||||
<view class="card-title" v-show="['2', '6'].includes(state.accountInfo.type)">
|
||||
提现账号
|
||||
</view>
|
||||
<view
|
||||
class="input-box ss-flex ss-col-center border-bottom"
|
||||
v-show="['2', '3', '4'].includes(state.accountInfo.type)"
|
||||
v-show="['2', '6'].includes(state.accountInfo.type)"
|
||||
>
|
||||
<view class="unit" />
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
class="ss-flex-1 ss-p-l-10"
|
||||
v-model="state.accountInfo.accountNo"
|
||||
v-model="state.accountInfo.userAccount"
|
||||
placeholder="请输入提现账号"
|
||||
/>
|
||||
</view>
|
||||
<!-- 收款码 -->
|
||||
<view class="card-title" v-show="['2', '3'].includes(state.accountInfo.type)">收款码</view>
|
||||
<view class="card-title" v-show="['3', '4'].includes(state.accountInfo.type)">收款码</view>
|
||||
<view
|
||||
class="input-box ss-flex ss-col-center"
|
||||
v-show="['2', '3'].includes(state.accountInfo.type)"
|
||||
v-show="['3', '4'].includes(state.accountInfo.type)"
|
||||
>
|
||||
<view class="unit" />
|
||||
<view class="upload-img">
|
||||
<s-uploader
|
||||
v-model:url="state.accountInfo.accountQrCodeUrl"
|
||||
v-model:url="state.accountInfo.qrCodeUrl"
|
||||
fileMediatype="image"
|
||||
limit="1"
|
||||
mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||
@success="(payload) => (state.accountInfo.qrCodeUrl = payload.tempFilePaths[0])"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 持卡人姓名 -->
|
||||
<view class="card-title" v-show="state.accountInfo.type === '4'">持卡人</view>
|
||||
<view class="card-title" v-show="['2', '5', '6'].includes(state.accountInfo.type)">
|
||||
收款真名
|
||||
</view>
|
||||
<view
|
||||
class="input-box ss-flex ss-col-center border-bottom"
|
||||
v-show="state.accountInfo.type === '4'"
|
||||
v-show="['2', '5', '6'].includes(state.accountInfo.type)"
|
||||
>
|
||||
<view class="unit" />
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
class="ss-flex-1 ss-p-l-10"
|
||||
v-model="state.accountInfo.name"
|
||||
placeholder="请输入持卡人姓名"
|
||||
v-model="state.accountInfo.userName"
|
||||
placeholder="请输入收款真名"
|
||||
/>
|
||||
</view>
|
||||
<!-- 提现银行 -->
|
||||
<view class="card-title" v-show="state.accountInfo.type === '4'">提现银行</view>
|
||||
<view class="card-title" v-show="state.accountInfo.type === '2'">提现银行</view>
|
||||
<view
|
||||
class="input-box ss-flex ss-col-center border-bottom"
|
||||
v-show="state.accountInfo.type === '4'"
|
||||
v-show="state.accountInfo.type === '2'"
|
||||
>
|
||||
<view class="unit" />
|
||||
<!--银行改为下拉选择-->
|
||||
<picker
|
||||
@change="bankChange"
|
||||
:value="state.bankListSelectedIndex"
|
||||
:range="state.bankList"
|
||||
range-key="label"
|
||||
style="width: 100%"
|
||||
>
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
class="ss-flex-1 ss-p-l-10"
|
||||
v-model="state.accountInfo.bankName"
|
||||
placeholder="请输入提现银行"
|
||||
:value="state.accountInfo.bankName"
|
||||
placeholder="请选择银行"
|
||||
suffixIcon="right"
|
||||
disabled
|
||||
:styles="{ disableColor: '#fff', borderColor: '#fff', color: '#333!important' }"
|
||||
/>
|
||||
</picker>
|
||||
</view>
|
||||
<!-- 开户地址 -->
|
||||
<view class="card-title" v-show="state.accountInfo.type === '4'">开户地址</view>
|
||||
<view class="card-title" v-show="state.accountInfo.type === '2'">开户地址</view>
|
||||
<view
|
||||
class="input-box ss-flex ss-col-center border-bottom"
|
||||
v-show="state.accountInfo.type === '4'"
|
||||
v-show="state.accountInfo.type === '2'"
|
||||
>
|
||||
<view class="unit" />
|
||||
<uni-easyinput
|
||||
|
|
@ -146,25 +164,26 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, onBeforeMount } from 'vue';
|
||||
import { onBeforeMount, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import accountTypeSelect from './components/account-type-select.vue';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import TradeConfigApi from '@/sheep/api/trade/config';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
import DictApi from '@/sheep/api/system/dict';
|
||||
import SLayout from '@/sheep/components/s-layout/s-layout.vue';
|
||||
import { getWeixinPayChannelCode, goBindWeixin } from '@/sheep/platform/pay';
|
||||
|
||||
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
|
||||
const userStore = sheep.$store('user');
|
||||
const userInfo = computed(() => userStore.userInfo);
|
||||
const state = reactive({
|
||||
accountInfo: {
|
||||
// 提现表单
|
||||
type: undefined,
|
||||
accountNo: undefined,
|
||||
accountQrCodeUrl: undefined,
|
||||
name: undefined,
|
||||
userAccount: undefined,
|
||||
userName: undefined,
|
||||
qrCodeUrl: undefined,
|
||||
bankName: undefined,
|
||||
bankAddress: undefined,
|
||||
},
|
||||
|
|
@ -176,6 +195,8 @@
|
|||
frozenDays: 0, // 冻结天数
|
||||
minPrice: 0, // 最低提现金额
|
||||
withdrawTypes: [], // 提现方式
|
||||
bankList: [], // 银行字典数据
|
||||
bankListSelectedIndex: '', // 选中银行 bankList 的 index
|
||||
});
|
||||
|
||||
// 打开提现方式的弹窗
|
||||
|
|
@ -186,7 +207,6 @@
|
|||
// 提交提现
|
||||
const onConfirm = async () => {
|
||||
// 参数校验
|
||||
debugger;
|
||||
if (
|
||||
!state.accountInfo.price ||
|
||||
state.accountInfo.price > state.brokerageInfo.price ||
|
||||
|
|
@ -199,11 +219,31 @@
|
|||
sheep.$helper.toast('请选择提现方式');
|
||||
return;
|
||||
}
|
||||
let openid;
|
||||
if (state.accountInfo.type === '5') {
|
||||
openid = await sheep.$platform.useProvider('wechat').getOpenid();
|
||||
// 如果获取不到 openid,微信无法发起支付,此时需要引导
|
||||
if (!openid) {
|
||||
goBindWeixin();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 提交请求
|
||||
let { code } = await BrokerageApi.createBrokerageWithdraw({
|
||||
const data = {
|
||||
...state.accountInfo,
|
||||
price: state.accountInfo.price * 100,
|
||||
});
|
||||
};
|
||||
if (state.accountInfo.type === '5') {
|
||||
data.userAccount = openid;
|
||||
data.transferChannelCode = getWeixinPayChannelCode();
|
||||
} else if (state.accountInfo.type === '6' || state.accountInfo.type === '2') {
|
||||
delete data.transferChannelCode;
|
||||
} else {
|
||||
delete data.userAccount;
|
||||
delete data.transferChannelCode;
|
||||
}
|
||||
let { code } = await BrokerageApi.createBrokerageWithdraw(data);
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -215,12 +255,12 @@
|
|||
confirmText: '查看记录',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
sheep.$router.go('/pages/commission/wallet', { type: 2 })
|
||||
sheep.$router.go('/pages/commission/wallet', { type: 2 });
|
||||
return;
|
||||
}
|
||||
getBrokerageUser();
|
||||
state.accountInfo = {};
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -245,10 +285,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 获取提现银行配置字典
|
||||
async function getDictDataListByType() {
|
||||
let { code, data } = await DictApi.getDictDataListByType('brokerage_bank_name');
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
if (data && data.length > 0) {
|
||||
state.bankList = data;
|
||||
}
|
||||
}
|
||||
|
||||
// 银行选择
|
||||
function bankChange(e) {
|
||||
const value = e.detail.value;
|
||||
state.bankListSelectedIndex = value;
|
||||
state.accountInfo.bankName = state.bankList[value].label;
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getWithdrawRules();
|
||||
getBrokerageUser()
|
||||
})
|
||||
getBrokerageUser();
|
||||
getDictDataListByType(); //获取银行字典数据
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<view class="content-container">
|
||||
<span v-for="(part, index) in formattedContent" :key="index"
|
||||
@click="handleClick(part)"
|
||||
:class="{'highlight-number': part.isNumber, 'phone-number': part.isPhone}">
|
||||
{{ part.text }}
|
||||
</span>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HighlightNumber',
|
||||
props: {
|
||||
content: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formattedContent() {
|
||||
const phoneRegex = /(1[3-9]\d{9})/g;
|
||||
const numberRegex = /(\d+)/g;
|
||||
let text = this.content;
|
||||
let result = [];
|
||||
let match;
|
||||
|
||||
// Step 1: 提取手机号
|
||||
while ((match = phoneRegex.exec(text)) !== null) {
|
||||
if (match.index > 0) {
|
||||
const before = text.slice(0, match.index);
|
||||
result.push(...this.splitAndPush(before, false, false));
|
||||
}
|
||||
result.push({ text: match[0], isNumber: true, isPhone: true });
|
||||
text = text.slice(match.index + match[0].length);
|
||||
}
|
||||
|
||||
// Step 2: 提取普通数字
|
||||
while ((match = numberRegex.exec(text)) !== null) {
|
||||
if (match.index > 0) {
|
||||
const before = text.slice(0, match.index);
|
||||
result.push(...this.splitAndPush(before, false, false));
|
||||
}
|
||||
result.push({ text: match[0], isNumber: true });
|
||||
text = text.slice(match.index + match[0].length);
|
||||
}
|
||||
|
||||
// Step 3: 添加剩余文本
|
||||
if (text.length > 0) {
|
||||
result.push(...this.splitAndPush(text, false, false));
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
splitAndPush(str, isNumber = false, isPhone = false) {
|
||||
return str.split('').map(char => ({ text: char, isNumber, isPhone }));
|
||||
},
|
||||
handleClick(part) {
|
||||
if (part.isPhone) {
|
||||
this.$emit('phone-click', { phoneNumber: part.text });
|
||||
} else if (part.isNumber) {
|
||||
this.$emit('number-click', { number: part.text });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.highlight-number {
|
||||
color: #ff5722;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.phone-number {
|
||||
color: #007AFF;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,13 +16,16 @@
|
|||
<view class="title ss-m-t-50 ss-m-b-20 ss-m-x-20">{{ state.coupon.name }}</view>
|
||||
<view class="subtitle ss-m-b-50">
|
||||
满 {{ fen2yuan(state.coupon.usePrice) }} 元,
|
||||
{{ state.coupon.discountType === 1
|
||||
{{
|
||||
state.coupon.discountType === 1
|
||||
? '减 ' + fen2yuan(state.coupon.discountPrice) + ' 元'
|
||||
: '打 ' + state.coupon.discountPercent / 10.0 + ' 折' }}
|
||||
: '打 ' + state.coupon.discountPercent / 10.0 + ' 折'
|
||||
}}
|
||||
</view>
|
||||
<button
|
||||
class="ss-reset-button ss-m-b-30"
|
||||
:class="state.coupon.canTake || state.coupon.status === 1
|
||||
:class="
|
||||
state.coupon.canTake || state.coupon.status === 1
|
||||
? 'use-btn' // 优惠劵模版(可领取)、优惠劵(可使用)
|
||||
: 'disable-btn'
|
||||
"
|
||||
|
|
@ -31,7 +34,13 @@
|
|||
>
|
||||
<text v-if="state.id > 0">{{ state.coupon.canTake ? '立即领取' : '已领取' }}</text>
|
||||
<text v-else>
|
||||
{{ state.coupon.status === 1 ? '立即使用' : state.coupon.status === 2 ? '已使用' : '已过期' }}
|
||||
{{
|
||||
state.coupon.status === 1
|
||||
? '可使用'
|
||||
: state.coupon.status === 2
|
||||
? '已使用'
|
||||
: '已过期'
|
||||
}}
|
||||
</text>
|
||||
</button>
|
||||
<view class="time ss-m-y-30" v-if="state.coupon.validityType === 2">
|
||||
|
|
@ -48,7 +57,6 @@
|
|||
<view>优惠券类型</view>
|
||||
<view>{{ state.coupon.discountType === 1 ? '满减券' : '折扣券' }}</view>
|
||||
</view>
|
||||
<!-- TODO 芋艿:可优化,增加优惠劵的描述 -->
|
||||
<uni-collapse>
|
||||
<uni-collapse-item title="优惠券说明" v-if="state.coupon.description">
|
||||
<view class="content ss-p-b-20">
|
||||
|
|
@ -140,12 +148,12 @@
|
|||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import _ from 'lodash-es';
|
||||
import CouponApi from '@/sheep/api/promotion/coupon';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
import CategoryApi from '@/sheep/api/product/category';
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
import { resetPagination } from '@/sheep/helper/utils';
|
||||
|
||||
const state = reactive({
|
||||
id: 0, // 优惠劵模版编号 templateId
|
||||
|
|
@ -156,7 +164,7 @@
|
|||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 1,
|
||||
pageSize: 8,
|
||||
},
|
||||
categoryId: 0, // 选中的商品分类编号
|
||||
tabMaps: [], // 指定分类时,每个分类构成一个 tab
|
||||
|
|
@ -176,7 +184,7 @@
|
|||
const { code, data } = await SpuApi.getSpuPage({
|
||||
categoryId: state.categoryId,
|
||||
pageNo: state.pagination.pageNo,
|
||||
pageSize: state.pagination.pageSize
|
||||
pageSize: state.pagination.pageSize,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
|
|
@ -197,7 +205,9 @@
|
|||
|
||||
// 获得分类列表
|
||||
async function getCategoryList() {
|
||||
const { data, code } = await CategoryApi.getCategoryListByIds(state.coupon.productScopeValues.join(','));
|
||||
const { data, code } = await CategoryApi.getCategoryListByIds(
|
||||
state.coupon.productScopeValues.join(','),
|
||||
);
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -225,7 +235,9 @@
|
|||
|
||||
// 加载优惠劵信息
|
||||
async function getCouponContent() {
|
||||
const { code, data } = state.id > 0 ? await CouponApi.getCouponTemplate(state.id)
|
||||
const { code, data } =
|
||||
state.id > 0
|
||||
? await CouponApi.getCouponTemplate(state.id)
|
||||
: await CouponApi.getCoupon(state.couponId);
|
||||
if (code !== 0) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- 优惠券中心 -->
|
||||
<template>
|
||||
<s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }">
|
||||
<s-layout :bgStyle="{ color: '#f2f2f2' }" title="优惠券">
|
||||
<su-sticky bgColor="#fff">
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
<template #default>
|
||||
<button
|
||||
class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
|
||||
:class=" item.status !== 1 ? 'disabled-btn': ''"
|
||||
:class="item.status !== 1 ? 'disabled-btn' : ''"
|
||||
:disabled="item.status !== 1"
|
||||
@click.stop="sheep.$router.go('/pages/coupon/detail', { couponId: item.id })"
|
||||
>
|
||||
|
|
@ -56,9 +56,14 @@
|
|||
</view>
|
||||
</template>
|
||||
|
||||
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}" @tap="loadMore" />
|
||||
}"
|
||||
@tap="loadMore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
|
|
@ -66,8 +71,8 @@
|
|||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
import _ from 'lodash-es';
|
||||
import { resetPagination } from '@/sheep/helper/utils';
|
||||
import CouponApi from '@/sheep/api/promotion/coupon';
|
||||
|
||||
// 数据
|
||||
|
|
@ -78,7 +83,7 @@
|
|||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 5
|
||||
pageSize: 5,
|
||||
},
|
||||
loadStatus: '',
|
||||
});
|
||||
|
|
@ -102,11 +107,10 @@
|
|||
},
|
||||
];
|
||||
|
||||
// TODO yunai:
|
||||
function onTabsChange(e) {
|
||||
state.currentTab = e.index;
|
||||
state.type = e.value;
|
||||
resetPagination(state.pagination)
|
||||
resetPagination(state.pagination);
|
||||
if (state.currentTab === 0) {
|
||||
getData();
|
||||
} else {
|
||||
|
|
@ -135,7 +139,7 @@
|
|||
const { data, code } = await CouponApi.getCouponPage({
|
||||
pageNo: state.pagination.pageNo,
|
||||
pageSize: state.pagination.pageSize,
|
||||
status: state.type
|
||||
status: state.type,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -27,21 +27,37 @@
|
|||
</view>
|
||||
<!-- 评价 -->
|
||||
<view class="area-box">
|
||||
<uni-easyinput :inputBorder="false" type="textarea" maxlength="120" autoHeight
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
type="textarea"
|
||||
maxlength="120"
|
||||
autoHeight
|
||||
v-model="state.commentList[index].content"
|
||||
placeholder="宝贝满足你的期待吗?说说你的使用心得,分享给想买的他们吧~" />
|
||||
<!-- TODO 芋艿:文件上传 -->
|
||||
placeholder="宝贝满足你的期待吗?说说你的使用心得,分享给想买的他们吧~"
|
||||
/>
|
||||
<view class="img-box">
|
||||
<s-uploader v-model:url="state.commentList[index].images" fileMediatype="image"
|
||||
limit="9" mode="grid" :imageStyles="{ width: '168rpx', height: '168rpx' }" />
|
||||
<s-uploader
|
||||
v-model:url="state.commentList[index].images"
|
||||
fileMediatype="image"
|
||||
limit="9"
|
||||
mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||
@success="(payload) => uploadSuccess(payload, index)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="checkbox-container">
|
||||
<checkbox-group @change="(event) => toggleAnonymous(index, event)">
|
||||
<label>
|
||||
<checkbox value="anonymousChecked" />
|
||||
匿名评论
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- TODO 芋艿:是否匿名 -->
|
||||
|
||||
<su-fixed bottom placeholder>
|
||||
<view class="foot_box ss-flex ss-row-center ss-col-center">
|
||||
<button class="ss-reset-button post-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onSubmit">
|
||||
|
|
@ -61,9 +77,24 @@
|
|||
const state = reactive({
|
||||
orderInfo: {},
|
||||
commentList: [],
|
||||
id: null
|
||||
id: null,
|
||||
});
|
||||
|
||||
/**
|
||||
* 切换是否匿名
|
||||
*
|
||||
* @param commentIndex 当前评论下标
|
||||
* @param event 复选框事件
|
||||
*/
|
||||
function toggleAnonymous(commentIndex, event) {
|
||||
state.commentList[commentIndex].anonymous = event.detail.value[0] === 'anonymousChecked';
|
||||
}
|
||||
|
||||
/**
|
||||
* 发布评论
|
||||
*
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async function onSubmit() {
|
||||
// 顺序提交评论
|
||||
for (const comment of state.commentList) {
|
||||
|
|
@ -73,17 +104,27 @@
|
|||
sheep.$router.back();
|
||||
}
|
||||
|
||||
/**
|
||||
* 图片添加到表单
|
||||
*
|
||||
* @param payload 上传成功后的回调数据
|
||||
* @param commentIndex 当前评论的下标
|
||||
*/
|
||||
function uploadSuccess(payload, commentIndex) {
|
||||
state.commentList[commentIndex].picUrls = payload.tempFilePaths;
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (!options.id) {
|
||||
sheep.$helper.toast(`缺少订单信息,请检查`);
|
||||
return
|
||||
return;
|
||||
}
|
||||
state.id = options.id;
|
||||
|
||||
const { code, data } = await OrderApi.getOrder(state.id);
|
||||
const { code, data } = await OrderApi.getOrderDetail(state.id);
|
||||
if (code !== 0) {
|
||||
sheep.$helper.toast('无待评价订单');
|
||||
return
|
||||
return;
|
||||
}
|
||||
// 处理评论
|
||||
data.items.forEach((item) => {
|
||||
|
|
@ -93,7 +134,7 @@
|
|||
descriptionScores: 5,
|
||||
benefitScores: 5,
|
||||
content: '',
|
||||
picUrls: []
|
||||
picUrls: [],
|
||||
});
|
||||
});
|
||||
state.orderInfo = data;
|
||||
|
|
@ -135,6 +176,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.post-btn {
|
||||
width: 690rpx;
|
||||
line-height: 80rpx;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- 商品评论的分页 -->
|
||||
<template>
|
||||
<s-layout title="全部评价">
|
||||
<s-layout title="全部评论">
|
||||
<su-tabs
|
||||
:list="state.type"
|
||||
:scrollable="false"
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
<s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
|
||||
<!-- 下拉 -->
|
||||
<uni-load-more
|
||||
icon-type="auto"
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
import CommentApi from '@/sheep/api/product/comment';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import _ from 'lodash-es';
|
||||
import commentItem from '../components/detail/comment-item.vue';
|
||||
|
||||
const state = reactive({
|
||||
|
|
@ -47,7 +48,7 @@
|
|||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 1,
|
||||
pageSize: 8,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<su-fixed bottom placeholder :val="44">
|
||||
<view>
|
||||
<view v-for="activity in props.activityList" :key="activity.id">
|
||||
<!-- TODO 芋艿:拼团 -->
|
||||
<view
|
||||
class="activity-box ss-p-x-38 ss-flex ss-row-between ss-col-center"
|
||||
:class="activity.type === 1 ? 'seckill-box' : 'groupon-box'"
|
||||
|
|
@ -14,7 +13,6 @@
|
|||
:src="sheep.$url.static('/static/img/shop/goods/seckill-icon.png')"
|
||||
class="activity-icon"
|
||||
/>
|
||||
<!-- TODO 芋艿:拼团 -->
|
||||
<image
|
||||
v-else-if="activity.type === 3"
|
||||
:src="sheep.$url.static('/static/img/shop/goods/groupon-icon.png')"
|
||||
|
|
@ -33,7 +31,6 @@
|
|||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
|
||||
// TODO 芋艿:这里要迁移下;
|
||||
const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png');
|
||||
const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
|
||||
|
||||
|
|
@ -42,14 +39,16 @@
|
|||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function onActivity(activity) {
|
||||
const type = activity.type;
|
||||
const typePath = type === 1 ? 'seckill' :
|
||||
type === 2 ? 'TODO 拼团' : 'groupon';
|
||||
const typePath = type === 1 ? 'seckill' : type === 3 ? 'groupon' : undefined;
|
||||
if (!typePath) {
|
||||
return;
|
||||
}
|
||||
sheep.$router.go(`/pages/goods/${typePath}`, {
|
||||
id: activity.id,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<!-- 商品详情:描述卡片 -->
|
||||
<template>
|
||||
<view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20">
|
||||
<view class="card-header ss-flex ss-col-center ss-m-b-30 ss-m-l-20">
|
||||
|
|
@ -6,15 +5,12 @@
|
|||
<view class="title ss-m-l-20 ss-m-r-20">详情</view>
|
||||
</view>
|
||||
<view class="card-content">
|
||||
<mp-html :content="content" />
|
||||
<mp-html :content="content"></mp-html>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
const { safeAreaInsets } = sheep.$platform.device;
|
||||
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: String,
|
||||
|
|
@ -49,4 +45,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep() {
|
||||
image {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
import { onPageScroll } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import throttle from '@/sheep/helper/throttle.js';
|
||||
import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
|
||||
import { showMenuTools } from '@/sheep/hooks/useModal';
|
||||
|
||||
const sys_statusBar = sheep.$platform.device.statusBarHeight;
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
|
|
@ -98,7 +98,8 @@
|
|||
|
||||
function getCommentCardNode() {
|
||||
return new Promise((res, rej) => {
|
||||
uni.createSelectorQuery()
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.select('.detail-comment-selector')
|
||||
.boundingClientRect((data) => {
|
||||
if (data) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<template>
|
||||
<view v-if="state.list.length > 0" class="groupon-list detail-card ss-p-x-20">
|
||||
<view class="join-activity ss-flex ss-row-between ss-m-t-30">
|
||||
<!-- todo: 接口缺少总数 -->
|
||||
<view class="">已有{{ state.list.length }}人参与活动</view>
|
||||
<text class="cicon-forward"></text>
|
||||
</view>
|
||||
|
|
@ -37,7 +36,7 @@
|
|||
import { onMounted, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { useDurationTime } from '@/sheep/hooks/useGoods';
|
||||
import CombinationApi from "@/sheep/api/promotion/combination";
|
||||
import CombinationApi from '@/sheep/api/promotion/combination';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
|
@ -74,7 +73,7 @@
|
|||
onMounted(async () => {
|
||||
// 查询参团记录
|
||||
// status = 0 表示未成团
|
||||
const { data } = await CombinationApi.getHeadCombinationRecordList(props.modelValue.id, 0 , 10);
|
||||
const { data } = await CombinationApi.getHeadCombinationRecordList(props.modelValue.id, 0, 10);
|
||||
state.list = data;
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@
|
|||
<detailSkeleton v-if="state.skeletonLoading" />
|
||||
<!-- 下架/售罄提醒 -->
|
||||
<s-empty
|
||||
v-else-if="state.goodsInfo === null || state.activity.status !== 0 || state.activity.endTime < new Date().getTime()"
|
||||
v-else-if="
|
||||
state.goodsInfo === null ||
|
||||
state.activity.status !== 0 ||
|
||||
state.activity.endTime < new Date().getTime()
|
||||
"
|
||||
text="活动不存在或已结束"
|
||||
icon="/static/soldout-empty.png"
|
||||
showAction
|
||||
|
|
@ -47,13 +51,10 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-between">
|
||||
<view
|
||||
class="origin-price ss-flex ss-col-center"
|
||||
v-if="state.goodsInfo.price"
|
||||
>
|
||||
<view class="origin-price ss-flex ss-col-center" v-if="state.goodsInfo.price">
|
||||
单买价:
|
||||
<view class="origin-price-text">
|
||||
{{ fen2yuan(state.goodsInfo.price) }}
|
||||
{{ fen2yuan(state.goodsInfo.marketPrice) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -79,7 +80,7 @@
|
|||
<!-- 功能卡片 -->
|
||||
<view class="detail-cell-card detail-card ss-flex-col">
|
||||
<!-- 规格 -->
|
||||
<detail-cell-sku :sku="state.selectedSkuPrice" @tap="state.showSelectSku = true" />
|
||||
<detail-cell-sku :sku="state.selectedSku" @tap="state.showSelectSku = true" />
|
||||
</view>
|
||||
|
||||
<!-- 参团列表 -->
|
||||
|
|
@ -103,7 +104,6 @@
|
|||
<detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
|
||||
|
||||
<!-- 商品tabbar -->
|
||||
<!-- TODO: 已售罄、预热 判断 设计-->
|
||||
<detail-tabbar v-model="state.goodsInfo">
|
||||
<view class="buy-box ss-flex ss-col-center ss-p-r-20">
|
||||
<button
|
||||
|
|
@ -123,7 +123,14 @@
|
|||
"
|
||||
:disabled="state.goodsInfo.stock === 0 || state.activity.status !== 0"
|
||||
>
|
||||
<view class="btn-price">{{ fen2yuan(state.activity.price || state.goodsInfo.price) }}</view>
|
||||
<view class="btn-price">{{
|
||||
fen2yuan(
|
||||
state.selectedSku.price * state.selectedSku.count ||
|
||||
state.activity.price * state.selectedSku.count ||
|
||||
state.goodsInfo.price * state.selectedSku.count ||
|
||||
state.goodsInfo.price,
|
||||
)
|
||||
}}</view>
|
||||
<view v-if="state.activity.startTime > new Date().getTime()">未开始</view>
|
||||
<view v-else-if="state.activity.endTime <= new Date().getTime()">已结束</view>
|
||||
<view v-else>
|
||||
|
|
@ -141,7 +148,7 @@
|
|||
import { reactive, computed } from 'vue';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { isEmpty } from 'lodash-es';
|
||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
||||
import detailTabbar from './components/detail/detail-tabbar.vue';
|
||||
|
|
@ -149,15 +156,14 @@
|
|||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||
import detailContentCard from './components/detail/detail-content-card.vue';
|
||||
import grouponCardList from './components/groupon/groupon-card-list.vue';
|
||||
import {useDurationTime, formatGoodsSwiper, fen2yuan} from '@/sheep/hooks/useGoods';
|
||||
import CombinationApi from "@/sheep/api/promotion/combination";
|
||||
import SpuApi from "@/sheep/api/product/spu";
|
||||
import { useDurationTime, formatGoodsSwiper, fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import CombinationApi from '@/sheep/api/promotion/combination';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
import { SharePageEnum } from '@/sheep/helper/const';
|
||||
|
||||
const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-bg.png');
|
||||
const btnBg = sheep.$url.css('/static/img/shop/goods/groupon-btn.png');
|
||||
const disabledBtnBg = sheep.$url.css(
|
||||
'/static/img/shop/goods/activity-btn-disabled.png',
|
||||
);
|
||||
const disabledBtnBg = sheep.$url.css('/static/img/shop/goods/activity-btn-disabled.png');
|
||||
const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
|
||||
|
||||
onPageScroll(() => {});
|
||||
|
|
@ -167,7 +173,7 @@
|
|||
goodsInfo: {}, // 商品信息
|
||||
goodsSwiper: [], // 商品轮播图
|
||||
showSelectSku: false, // 显示规格弹框
|
||||
selectedSkuPrice: {}, // 选中的规格价格
|
||||
selectedSku: {}, // 选中的规格属性
|
||||
activity: {}, // 团购活动
|
||||
grouponId: 0, // 团购ID
|
||||
grouponNum: 0, // 团购人数
|
||||
|
|
@ -182,7 +188,7 @@
|
|||
|
||||
// 规格变更
|
||||
function onSkuChange(e) {
|
||||
state.selectedSkuPrice = e;
|
||||
state.selectedSku = e;
|
||||
}
|
||||
|
||||
function onSkuClose() {
|
||||
|
|
@ -198,6 +204,7 @@
|
|||
|
||||
/**
|
||||
* 去参团
|
||||
*
|
||||
* @param record 团长的团购记录
|
||||
*/
|
||||
function onJoinGroupon(record) {
|
||||
|
|
@ -226,7 +233,6 @@
|
|||
}
|
||||
|
||||
// 分享信息
|
||||
// TODO @芋艿:分享的接入
|
||||
const shareInfo = computed(() => {
|
||||
if (isEmpty(state.activity)) return {};
|
||||
return sheep.$platform.share.getShareInfo(
|
||||
|
|
@ -234,7 +240,7 @@
|
|||
title: state.activity.name,
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl),
|
||||
params: {
|
||||
page: '3',
|
||||
page: SharePageEnum.GROUPON.value,
|
||||
query: state.activity.id,
|
||||
},
|
||||
},
|
||||
|
|
@ -252,18 +258,43 @@
|
|||
// 非法参数
|
||||
if (!options.id) {
|
||||
state.goodsInfo = null;
|
||||
state.skeletonLoading = false;
|
||||
return;
|
||||
}
|
||||
state.grouponId = options.id;
|
||||
// 加载活动信息
|
||||
const { code, data: activity } = await CombinationApi.getCombinationActivity(state.grouponId);
|
||||
if (code !== 0) {
|
||||
state.goodsInfo = null;
|
||||
state.skeletonLoading = false;
|
||||
return;
|
||||
}
|
||||
state.activity = activity;
|
||||
// 加载商品信息
|
||||
const { data: spu } = await SpuApi.getSpuDetail(activity.spuId);
|
||||
if (code !== 0) {
|
||||
state.goodsInfo = null;
|
||||
state.skeletonLoading = false;
|
||||
return;
|
||||
}
|
||||
state.goodsId = spu.id;
|
||||
activity.products.forEach(product => {
|
||||
spu.price = Math.min(spu.price, product.combinationPrice); // 设置 SPU 的最低价格
|
||||
|
||||
// 默认显示最低价
|
||||
spu.price = activity.products.reduce((min, product) => {
|
||||
return Math.min(min, product.combinationPrice || Infinity);
|
||||
}, Infinity);
|
||||
|
||||
// 价格、库存使用活动的
|
||||
spu.skus.forEach((sku) => {
|
||||
const product = activity.products.find((product) => product.skuId === sku.id);
|
||||
if (product) {
|
||||
sku.price = product.combinationPrice;
|
||||
} else {
|
||||
// 找不到可能是没配置,则不能发起秒杀
|
||||
sku.stock = 0;
|
||||
}
|
||||
});
|
||||
|
||||
// 关闭骨架屏
|
||||
state.skeletonLoading = false;
|
||||
if (code === 0) {
|
||||
|
|
@ -475,8 +506,7 @@
|
|||
}
|
||||
|
||||
.groupon-box {
|
||||
background: v-bind(grouponBg)
|
||||
no-repeat;
|
||||
background: v-bind(grouponBg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,22 +7,88 @@
|
|||
<!-- 骨架屏 -->
|
||||
<detailSkeleton v-if="state.skeletonLoading" />
|
||||
<!-- 下架/售罄提醒 -->
|
||||
<s-empty v-else-if="state.goodsInfo === null" text="商品不存在或已下架" icon="/static/soldout-empty.png" showAction
|
||||
actionText="再逛逛" actionUrl="/pages/goods/list" />
|
||||
<s-empty
|
||||
v-else-if="state.goodsInfo === null"
|
||||
text="商品不存在或已下架"
|
||||
icon="/static/soldout-empty.png"
|
||||
showAction
|
||||
actionText="再逛逛"
|
||||
actionUrl="/pages/goods/list"
|
||||
/>
|
||||
<block v-else>
|
||||
<view class="detail-swiper-selector">
|
||||
<!-- 商品轮播图 -->
|
||||
<su-swiper class="ss-m-b-14" isPreview :list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)"
|
||||
otStyle="tag" imageMode="widthFix" dotCur="bg-mask-40" :seizeHeight="750" />
|
||||
|
||||
<su-swiper
|
||||
class="ss-m-b-14"
|
||||
isPreview
|
||||
:list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)"
|
||||
otStyle="tag"
|
||||
imageMode="widthFix"
|
||||
dotCur="bg-mask-40"
|
||||
:seizeHeight="750"
|
||||
/>
|
||||
<!-- 限时折扣/会员价的优惠信息 -->
|
||||
<view
|
||||
class="discount"
|
||||
v-if="
|
||||
state.settlementSku && state.settlementSku.id && state.settlementSku.promotionPrice
|
||||
"
|
||||
>
|
||||
<image class="disImg" :src="sheep.$url.static('/static/img/shop/goods/dis.png')" />
|
||||
<view class="discountCont">
|
||||
<view class="disContT">
|
||||
<view class="disContT1">
|
||||
<view class="disContT1P">
|
||||
¥{{ fen2yuan(state.settlementSku.promotionPrice) }}
|
||||
</view>
|
||||
<view class="disContT1End">
|
||||
直降¥
|
||||
{{ fen2yuan(state.settlementSku.price - state.settlementSku.promotionPrice) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="disContT2" v-if="state.settlementSku.promotionType === 4">
|
||||
限时折扣
|
||||
</view>
|
||||
<view class="disContT2" v-else-if="state.settlementSku.promotionType === 6">
|
||||
会员折扣
|
||||
</view>
|
||||
</view>
|
||||
<view class="disContB">
|
||||
<view class="disContB1">
|
||||
价格:¥{{ fen2yuan(state.settlementSku.price) }} 丨 剩余:
|
||||
{{ state.settlementSku.stock }}
|
||||
</view>
|
||||
<view class="disContB2" v-if="state.settlementSku.promotionEndTime > 0">
|
||||
距结束仅剩
|
||||
<s-count-down
|
||||
:tipText="' '"
|
||||
:bgColor="bgColor"
|
||||
:dayText="':'"
|
||||
:hourText="':'"
|
||||
:minuteText="':'"
|
||||
:secondText="' '"
|
||||
:datatime="state.settlementSku.promotionEndTime / 1000"
|
||||
:isDay="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 价格+标题 -->
|
||||
<view class="title-card detail-card ss-p-y-40 ss-p-x-20">
|
||||
<view class="ss-flex ss-row-between ss-col-center ss-m-b-26">
|
||||
<view class="title-card detail-card ss-p-y-30 ss-p-x-20">
|
||||
<!-- 没有限时折扣/会员价的优惠信息时,展示的价格信息 -->
|
||||
<view
|
||||
class="ss-flex ss-row-between ss-col-center ss-m-b-26"
|
||||
v-if="!state.settlementSku.promotionPrice"
|
||||
>
|
||||
<view class="price-box ss-flex ss-col-bottom">
|
||||
<view class="price-text ss-m-r-16">
|
||||
{{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }}
|
||||
</view>
|
||||
<view class="origin-price-text" v-if="state.goodsInfo.marketPrice > 0">
|
||||
<view
|
||||
class="origin-price-text"
|
||||
v-if="state.goodsInfo.marketPrice > state.goodsInfo.price"
|
||||
>
|
||||
{{ fen2yuan(state.selectedSku.marketPrice || state.goodsInfo.marketPrice) }}
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -31,19 +97,41 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="discounts-box ss-flex ss-row-between ss-m-b-28">
|
||||
<!-- 满减送/限时折扣活动的提示 -->
|
||||
<!-- 查看优惠劵的描述 -->
|
||||
<view
|
||||
class="tag ss-m-r-10"
|
||||
v-for="coupon in state.couponInfo.slice(0, 1)"
|
||||
:key="coupon.id"
|
||||
@tap="onOpenActivity"
|
||||
>
|
||||
[劵]满{{ fen2yuanSimple(coupon.usePrice) }}元{{
|
||||
coupon.discountType === 1
|
||||
? '减' + fen2yuanSimple(coupon.discountPrice) + '元'
|
||||
: '打' + formatDiscountPercent(coupon.discountPercent) + '折'
|
||||
}}
|
||||
</view>
|
||||
<!-- 查看满减送的描述 -->
|
||||
<div class="tag-content">
|
||||
<view class="tag-box ss-flex">
|
||||
<view class="tag ss-m-r-10" v-for="promos in state.activityInfo"
|
||||
:key="promos.id" @tap="onActivity">
|
||||
{{ promos.name }}
|
||||
<!-- 最多打印 3 条,所以需要扣除优惠劵已打印的 -->
|
||||
<view
|
||||
v-for="item in getRewardActivityRuleItemDescriptions(
|
||||
state.rewardActivity,
|
||||
).slice(0, 3 - state.couponInfo.slice(0, 1).length)"
|
||||
:key="item"
|
||||
class="tag ss-m-r-10"
|
||||
@tap="onOpenActivity"
|
||||
>
|
||||
<text>{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
|
||||
<!-- 优惠劵 -->
|
||||
<view class="get-coupon-box ss-flex ss-col-center ss-m-l-20" @tap="state.showModel = true"
|
||||
v-if="state.couponInfo.length">
|
||||
<!-- 领取优惠劵的按钮 -->
|
||||
<view
|
||||
class="get-coupon-box ss-flex ss-col-center ss-m-l-20"
|
||||
@tap="onOpenActivity"
|
||||
v-if="state.couponInfo.length"
|
||||
>
|
||||
<view class="discounts-title ss-m-r-8">领券</view>
|
||||
<text class="cicon-forward"></text>
|
||||
</view>
|
||||
|
|
@ -54,30 +142,51 @@
|
|||
|
||||
<!-- 功能卡片 -->
|
||||
<view class="detail-cell-card detail-card ss-flex-col">
|
||||
<detail-cell-sku v-model="state.selectedSku.goods_sku_text" :sku="state.selectedSku"
|
||||
@tap="state.showSelectSku = true" />
|
||||
<detail-cell-sku
|
||||
v-model="state.selectedSku.goods_sku_text"
|
||||
:sku="state.selectedSku"
|
||||
@tap="state.showSelectSku = true"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 规格与数量弹框 -->
|
||||
<s-select-sku :goodsInfo="state.goodsInfo" :show="state.showSelectSku" @addCart="onAddCart"
|
||||
@buy="onBuy" @change="onSkuChange" @close="state.showSelectSku = false" />
|
||||
<s-select-sku
|
||||
:goodsInfo="state.goodsInfo"
|
||||
:show="state.showSelectSku"
|
||||
@addCart="onAddCart"
|
||||
@buy="onBuy"
|
||||
@change="onSkuChange"
|
||||
@close="state.showSelectSku = false"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 评价 -->
|
||||
<detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" />
|
||||
<!-- 详情 -->
|
||||
<detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
|
||||
<detail-content-card
|
||||
class="detail-content-selector"
|
||||
:content="state.goodsInfo.description"
|
||||
/>
|
||||
|
||||
<!-- 活动跳转:拼团/秒杀/砍价活动 -->
|
||||
<detail-activity-tip v-if="state.activityList.length > 0" :activity-list="state.activityList" />
|
||||
<detail-activity-tip
|
||||
v-if="state.activityList.length > 0"
|
||||
:activity-list="state.activityList"
|
||||
/>
|
||||
|
||||
<!-- 详情 tabbar -->
|
||||
<detail-tabbar v-model="state.goodsInfo">
|
||||
<view class="buy-box ss-flex ss-col-center ss-p-r-20" v-if="state.goodsInfo.stock > 0">
|
||||
<button class="ss-reset-button add-btn ui-Shadow-Main" @tap="state.showSelectSku = true">
|
||||
<button
|
||||
class="ss-reset-button add-btn ui-Shadow-Main"
|
||||
@tap="state.showSelectSku = true"
|
||||
>
|
||||
加入购物车
|
||||
</button>
|
||||
<button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="state.showSelectSku = true">
|
||||
<button
|
||||
class="ss-reset-button buy-btn ui-Shadow-Main"
|
||||
@tap="state.showSelectSku = true"
|
||||
>
|
||||
立即购买
|
||||
</button>
|
||||
</view>
|
||||
|
|
@ -86,32 +195,34 @@
|
|||
</view>
|
||||
</detail-tabbar>
|
||||
|
||||
<!-- 优惠劵弹窗 -->
|
||||
<s-coupon-get v-model="state.couponInfo" :show="state.showModel" @close="state.showModel = false"
|
||||
@get="onGet" />
|
||||
|
||||
<!-- 满减送/限时折扣活动弹窗 -->
|
||||
<s-activity-pop v-model="state.activityInfo" :show="state.showActivityModel"
|
||||
@close="state.showActivityModel = false" />
|
||||
<s-activity-pop
|
||||
v-model="state"
|
||||
:show="state.showActivityModel"
|
||||
@close="state.showActivityModel = false"
|
||||
@get="onTakeCoupon"
|
||||
/>
|
||||
</block>
|
||||
</s-layout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad,
|
||||
onPageScroll
|
||||
} from '@dcloudio/uni-app';
|
||||
import { reactive, computed } from 'vue';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import CouponApi from '@/sheep/api/promotion/coupon';
|
||||
import ActivityApi from '@/sheep/api/promotion/activity';
|
||||
import FavoriteApi from '@/sheep/api/product/favorite';
|
||||
import { formatSales, formatGoodsSwiper, fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import RewardActivityApi from '@/sheep/api/promotion/rewardActivity';
|
||||
import {
|
||||
formatSales,
|
||||
formatGoodsSwiper,
|
||||
fen2yuan,
|
||||
fen2yuanSimple,
|
||||
formatDiscountPercent,
|
||||
getRewardActivityRuleItemDescriptions,
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
||||
import detailTabbar from './components/detail/detail-tabbar.vue';
|
||||
|
|
@ -119,27 +230,39 @@
|
|||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||
import detailContentCard from './components/detail/detail-content-card.vue';
|
||||
import detailActivityTip from './components/detail/detail-activity-tip.vue';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { isEmpty } from 'lodash-es';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
|
||||
onPageScroll(() => {});
|
||||
import OrderApi from '@/sheep/api/trade/order';
|
||||
import { SharePageEnum } from '@/sheep/helper/const';
|
||||
|
||||
const bgColor = {
|
||||
bgColor: '#E93323',
|
||||
Color: '#fff',
|
||||
width: '44rpx',
|
||||
timeTxtwidth: '16rpx',
|
||||
isDay: true,
|
||||
};
|
||||
const isLogin = computed(() => sheep.$store('user').isLogin);
|
||||
const state = reactive({
|
||||
goodsId: 0,
|
||||
skeletonLoading: true, // SPU 加载中
|
||||
goodsInfo: {}, // SPU 信息
|
||||
showSelectSku: false, // 是否展示 SKU 选择弹窗
|
||||
selectedSku: {}, // 选中的 SKU
|
||||
settlementSku: {}, // 结算的 SKU:由于 selectedSku 不进行默认选中,所以初始使用结算价格最低的 SKU 作为基础展示
|
||||
showModel: false, // 是否展示 Coupon 优惠劵的弹窗
|
||||
couponInfo: [], // 可领取的 Coupon 优惠劵的列表
|
||||
showActivityModel: false, // 【满减送/限时折扣】是否展示 Activity 营销活动的弹窗
|
||||
activityInfo: [], // 【满减送/限时折扣】可参与的 Activity 营销活动的列表
|
||||
rewardActivity: {}, // 【满减送】活动
|
||||
activityList: [], // 【秒杀/拼团/砍价】可参与的 Activity 营销活动的列表
|
||||
});
|
||||
|
||||
// 规格变更
|
||||
function onSkuChange(e) {
|
||||
state.selectedSku = e;
|
||||
state.settlementSku = e;
|
||||
}
|
||||
|
||||
// 添加购物车
|
||||
|
|
@ -153,30 +276,30 @@
|
|||
|
||||
// 立即购买
|
||||
function onBuy(e) {
|
||||
if (!state.selectedSku.id) {
|
||||
if (!e.id) {
|
||||
sheep.$helper.toast('请选择商品规格');
|
||||
return;
|
||||
}
|
||||
sheep.$router.go('/pages/order/confirm', {
|
||||
data: JSON.stringify({
|
||||
items: [{
|
||||
items: [
|
||||
{
|
||||
skuId: e.id,
|
||||
count: e.goods_num
|
||||
}],
|
||||
// TODO 芋艿:后续清理掉这 2 参数
|
||||
deliveryType: 1,
|
||||
pointStatus: false,
|
||||
count: e.goods_num,
|
||||
categoryId: state.goodsInfo.categoryId,
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
// 营销活动
|
||||
function onActivity() {
|
||||
// 打开营销弹窗
|
||||
function onOpenActivity() {
|
||||
state.showActivityModel = true;
|
||||
}
|
||||
|
||||
// 立即领取
|
||||
async function onGet(id) {
|
||||
// 立即领取优惠劵
|
||||
async function onTakeCoupon(id) {
|
||||
const { code } = await CouponApi.takeCoupon(id);
|
||||
if (code !== 0) {
|
||||
return;
|
||||
|
|
@ -189,25 +312,26 @@
|
|||
}, 1000);
|
||||
}
|
||||
|
||||
// TODO 芋艿:待测试
|
||||
const shareInfo = computed(() => {
|
||||
if (isEmpty(state.goodsInfo)) return {};
|
||||
return sheep.$platform.share.getShareInfo({
|
||||
return sheep.$platform.share.getShareInfo(
|
||||
{
|
||||
title: state.goodsInfo.name,
|
||||
image: sheep.$url.cdn(state.goodsInfo.image),
|
||||
desc: state.goodsInfo.subtitle,
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl),
|
||||
desc: state.goodsInfo.introduction,
|
||||
params: {
|
||||
page: '2',
|
||||
page: SharePageEnum.GOODS.value,
|
||||
query: state.goodsInfo.id,
|
||||
},
|
||||
}, {
|
||||
},
|
||||
{
|
||||
type: 'goods', // 商品海报
|
||||
title: state.goodsInfo.name, // 商品标题
|
||||
// image: sheep.$url.cdn(state.goodsInfo.image), // 商品主图
|
||||
title: state.goodsInfo.name, // 商品名称
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
|
||||
price: fen2yuan(state.goodsInfo.price), // 商品价格
|
||||
original_price: fen2yuan(state.goodsInfo.maretPrice), // 商品原价
|
||||
}, );
|
||||
original_price: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
async function getCoupon() {
|
||||
|
|
@ -217,31 +341,77 @@
|
|||
}
|
||||
}
|
||||
|
||||
async function getSettlementByIds(ids) {
|
||||
let { data, code } = await OrderApi.getSettlementProduct(ids);
|
||||
if (code !== 0 || data.length !== 1) {
|
||||
return;
|
||||
}
|
||||
data = data[0];
|
||||
|
||||
// 补充 SKU 的价格信息
|
||||
state.goodsInfo.skus.forEach((sku) => {
|
||||
data.skus.forEach((item) => {
|
||||
if (sku.id === item.id) {
|
||||
sku.promotionType = item.promotionType;
|
||||
sku.promotionPrice = item.promotionPrice;
|
||||
sku.promotionId = item.promotionId;
|
||||
sku.promotionEndTime = item.promotionEndTime;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 选择有 promotionPrice 且最小的
|
||||
state.settlementSku = state.goodsInfo.skus
|
||||
.filter((sku) => sku.stock > 0 && sku.promotionPrice > 0)
|
||||
.reduce((prev, curr) => (prev.promotionPrice < curr.promotionPrice ? prev : curr), []);
|
||||
|
||||
// 设置满减送活动
|
||||
if (data.rewardActivity) {
|
||||
state.rewardActivity = data.rewardActivity;
|
||||
//获取活动时间
|
||||
getActivityTime(state.rewardActivity.id);
|
||||
}
|
||||
}
|
||||
|
||||
//获取活动时间
|
||||
async function getActivityTime(id) {
|
||||
const { code, data } = await RewardActivityApi.getRewardActivity(id);
|
||||
if (code === 0) {
|
||||
// console.log('获取到的活动 数据', data)
|
||||
state.rewardActivity.startTime = data.startTime;
|
||||
state.rewardActivity.endTime = data.endTime;
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
// 非法参数
|
||||
if (!options.id) {
|
||||
state.goodsInfo = null;
|
||||
state.skeletonLoading = false;
|
||||
return;
|
||||
}
|
||||
state.goodsId = options.id;
|
||||
// 1. 加载商品信息
|
||||
SpuApi.getSpuDetail(state.goodsId).then((res) => {
|
||||
// 未找到商品
|
||||
if (res.code !== 0 || !res.data) {
|
||||
state.goodsInfo = null;
|
||||
state.skeletonLoading = false;
|
||||
return;
|
||||
}
|
||||
// 加载到商品
|
||||
state.skeletonLoading = false;
|
||||
state.goodsInfo = res.data;
|
||||
|
||||
// 获取结算信息
|
||||
getSettlementByIds(state.goodsId);
|
||||
// 加载是否收藏
|
||||
if (isLogin.value) {
|
||||
FavoriteApi.isFavoriteExists(state.goodsId, 'goods').then((res) => {
|
||||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.goodsInfo.favorite = res.data;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 2. 加载优惠劵信息
|
||||
|
|
@ -252,15 +422,7 @@
|
|||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
res.data.forEach(activity => {
|
||||
if ([1, 2, 3].includes(activity.type)) { // 情况一:拼团/秒杀/砍价
|
||||
state.activityList.push(activity);
|
||||
} else if (activity.type === 5) { // 情况二:满减送
|
||||
state.activityInfo.push(activity);
|
||||
} else { // 情况三:限时折扣 TODO 芋艿
|
||||
console.log('待实现!优先级不高');
|
||||
}
|
||||
})
|
||||
state.activityList = res.data;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -410,4 +572,101 @@
|
|||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
// 限时折扣
|
||||
.discount {
|
||||
width: 750rpx;
|
||||
height: 100rpx;
|
||||
// background-color: red;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.disImg {
|
||||
width: 750rpx;
|
||||
height: 100rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.discountCont {
|
||||
width: 680rpx;
|
||||
height: 90rpx;
|
||||
margin: 10rpx auto 0 auto;
|
||||
// background-color: gold;
|
||||
}
|
||||
|
||||
.disContT {
|
||||
width: 680rpx;
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.disContT1 {
|
||||
width: 400rpx;
|
||||
height: 50rpx;
|
||||
// background-color: green;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.disContT2 {
|
||||
width: 200rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
// background-color: gold;
|
||||
font-size: 30rpx;
|
||||
text-align: end;
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
font-style: oblique 20deg;
|
||||
letter-spacing: 0.1rem;
|
||||
}
|
||||
|
||||
.disContT1P {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.disContT1End {
|
||||
// width: 180rpx;
|
||||
padding: 0 10rpx;
|
||||
height: 30rpx;
|
||||
line-height: 28rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
color: #ff3000;
|
||||
font-size: 23rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.disContB {
|
||||
width: 680rpx;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 20rpx;
|
||||
color: white;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.disContB1 {
|
||||
width: 300rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.disContB2 {
|
||||
width: 300rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +1,22 @@
|
|||
<template>
|
||||
<s-layout navbar="normal" :leftWidth="0" :rightWidth="0" tools="search" :defaultSearch="state.keyword"
|
||||
@search="onSearch">
|
||||
<s-layout
|
||||
navbar="normal"
|
||||
:leftWidth="0"
|
||||
:rightWidth="0"
|
||||
tools="search"
|
||||
:defaultSearch="state.keyword"
|
||||
@search="onSearch"
|
||||
>
|
||||
<!-- 筛选 -->
|
||||
<su-sticky bgColor="#fff">
|
||||
<view class="ss-flex">
|
||||
<view class="ss-flex-1">
|
||||
<su-tabs :list="state.tabList" :scrollable="false" @change="onTabsChange"
|
||||
:current="state.currentTab" />
|
||||
<su-tabs
|
||||
:list="state.tabList"
|
||||
:scrollable="false"
|
||||
@change="onTabsChange"
|
||||
:current="state.currentTab"
|
||||
/>
|
||||
</view>
|
||||
<view class="list-icon" @tap="state.iconStatus = !state.iconStatus">
|
||||
<text v-if="state.iconStatus" class="sicon-goods-list" />
|
||||
|
|
@ -16,12 +26,23 @@
|
|||
</su-sticky>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<su-popup :show="state.showFilter" type="top" round="10" :space="sys_navBar + 38" backgroundColor="#F6F6F6"
|
||||
:zIndex="10" @close="state.showFilter = false">
|
||||
<su-popup
|
||||
:show="state.showFilter"
|
||||
type="top"
|
||||
round="10"
|
||||
:space="sys_navBar + 38"
|
||||
backgroundColor="#F6F6F6"
|
||||
:zIndex="10"
|
||||
@close="state.showFilter = false"
|
||||
>
|
||||
<view class="filter-list-box">
|
||||
<view class="filter-item" v-for="(item, index) in state.tabList[state.currentTab].list"
|
||||
:key="item.value" :class="[{ 'filter-item-active': index === state.curFilter }]"
|
||||
@tap="onFilterItem(index)">
|
||||
<view
|
||||
class="filter-item"
|
||||
v-for="(item, index) in state.tabList[state.currentTab].list"
|
||||
:key="item.value"
|
||||
:class="[{ 'filter-item-active': index === state.curFilter }]"
|
||||
@tap="onFilterItem(index)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -29,7 +50,11 @@
|
|||
|
||||
<!-- 情况一:单列布局 -->
|
||||
<view v-if="state.iconStatus && state.pagination.total > 0" class="goods-list ss-m-t-20">
|
||||
<view class="ss-p-l-20 ss-p-r-20 ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
|
||||
<view
|
||||
class="ss-p-l-20 ss-p-r-20 ss-m-b-20"
|
||||
v-for="item in state.pagination.list"
|
||||
:key="item.id"
|
||||
>
|
||||
<s-goods-column
|
||||
class=""
|
||||
size="lg"
|
||||
|
|
@ -41,8 +66,10 @@
|
|||
</view>
|
||||
</view>
|
||||
<!-- 情况二:双列布局 -->
|
||||
<view v-if="!state.iconStatus && state.pagination.total > 0"
|
||||
class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top">
|
||||
<view
|
||||
v-if="!state.iconStatus && state.pagination.total > 0"
|
||||
class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top"
|
||||
>
|
||||
<view class="goods-list-box">
|
||||
<view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
|
||||
<s-goods-column
|
||||
|
|
@ -78,20 +105,27 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}" @tap="loadMore" />
|
||||
}"
|
||||
@tap="loadMore"
|
||||
/>
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品" />
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
import _ from 'lodash-es';
|
||||
import { resetPagination } from '@/sheep/helper/utils';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
import OrderApi from '@/sheep/api/trade/order';
|
||||
import { appendSettlementProduct } from '@/sheep/hooks/useGoods';
|
||||
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const emits = defineEmits(['close', 'change']);
|
||||
|
|
@ -111,10 +145,12 @@
|
|||
iconStatus: false, // true - 单列布局;false - 双列布局
|
||||
keyword: '',
|
||||
categoryId: 0,
|
||||
tabList: [{
|
||||
tabList: [
|
||||
{
|
||||
name: '综合推荐',
|
||||
list: [{
|
||||
label: '综合推荐'
|
||||
list: [
|
||||
{
|
||||
label: '综合推荐',
|
||||
},
|
||||
{
|
||||
label: '价格升序',
|
||||
|
|
@ -131,12 +167,12 @@
|
|||
{
|
||||
name: '销量',
|
||||
sort: 'salesCount',
|
||||
order: false
|
||||
order: false,
|
||||
},
|
||||
{
|
||||
name: '新品优先',
|
||||
value: 'createTime',
|
||||
order: false
|
||||
order: false,
|
||||
},
|
||||
],
|
||||
loadStatus: '',
|
||||
|
|
@ -151,15 +187,15 @@
|
|||
|
||||
// 处理双列布局 leftGoodsList + rightGoodsList
|
||||
function mountMasonry(height = 0, where = 'left') {
|
||||
if (!state.pagination.list[count]) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (where === 'left') {
|
||||
leftHeight += height;
|
||||
} else {
|
||||
rightHeight += height;
|
||||
}
|
||||
if (!state.pagination.list[count]) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (leftHeight <= rightHeight) {
|
||||
state.leftGoodsList.push(state.pagination.list[count]);
|
||||
} else {
|
||||
|
|
@ -211,8 +247,10 @@
|
|||
const onFilterItem = (val) => {
|
||||
// 如果点击的是当前的筛选项,则直接收起筛选项,不要加载数据
|
||||
// 这里选择 tabList[0] 的原因,是目前只有它有 list
|
||||
if (state.currentSort === state.tabList[0].list[val].sort
|
||||
&& state.currentOrder === state.tabList[0].list[val].order) {
|
||||
if (
|
||||
state.currentSort === state.tabList[0].list[val].sort &&
|
||||
state.currentOrder === state.tabList[0].list[val].order
|
||||
) {
|
||||
state.showFilter = false;
|
||||
return;
|
||||
}
|
||||
|
|
@ -226,7 +264,7 @@
|
|||
// 清空 + 加载数据
|
||||
emptyList();
|
||||
getList();
|
||||
}
|
||||
};
|
||||
|
||||
async function getList() {
|
||||
state.loadStatus = 'loading';
|
||||
|
|
@ -241,7 +279,14 @@
|
|||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list)
|
||||
// 拼接结算信息(营销)
|
||||
await OrderApi.getSettlementProduct(data.list.map((item) => item.id).join(',')).then((res) => {
|
||||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
appendSettlementProduct(data.list, res.data);
|
||||
});
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
mountMasonry();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,483 @@
|
|||
<!-- 秒杀商品详情 -->
|
||||
<template>
|
||||
<s-layout :onShareAppMessage="shareInfo" navbar="goods">
|
||||
<!-- 标题栏 -->
|
||||
<detailNavbar />
|
||||
<!-- 骨架屏 -->
|
||||
<detailSkeleton v-if="state.skeletonLoading" />
|
||||
<!-- 下架/售罄提醒 -->
|
||||
<s-empty
|
||||
v-else-if="
|
||||
state.goodsInfo === null ||
|
||||
state.goodsInfo.activity_type !== PromotionActivityTypeEnum.POINT.type
|
||||
"
|
||||
text="活动不存在或已结束"
|
||||
icon="/static/soldout-empty.png"
|
||||
showAction
|
||||
actionText="再逛逛"
|
||||
actionUrl="/pages/goods/list"
|
||||
/>
|
||||
<block v-else>
|
||||
<view class="detail-swiper-selector">
|
||||
<!-- 商品图轮播 -->
|
||||
<su-swiper
|
||||
class="ss-m-b-14"
|
||||
isPreview
|
||||
:list="state.goodsSwiper"
|
||||
dotStyle="tag"
|
||||
imageMode="widthFix"
|
||||
dotCur="bg-mask-40"
|
||||
:seizeHeight="750"
|
||||
/>
|
||||
|
||||
<!-- 价格+标题 -->
|
||||
<view class="title-card detail-card ss-p-y-40 ss-p-x-20">
|
||||
<view class="ss-flex ss-row-between ss-col-center ss-m-b-18">
|
||||
<view class="price-box ss-flex ss-col-bottom">
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||
class="point-img"
|
||||
></image>
|
||||
<text class="point-text ss-m-r-16">
|
||||
{{ getShowPrice.point }}
|
||||
{{
|
||||
!getShowPrice.price || getShowPrice.price === 0 ? '' : `+¥${getShowPrice.price}`
|
||||
}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="sales-text">
|
||||
{{ formatExchange(state.goodsInfo.sales_show_type, state.goodsInfo.sales) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="origin-price-text ss-m-b-60" v-if="state.goodsInfo.marketPrice">
|
||||
原价:¥{{ fen2yuan(state.selectedSku.marketPrice || state.goodsInfo.marketPrice) }}
|
||||
</view>
|
||||
<view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.name || '' }}</view>
|
||||
<view class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能卡片 -->
|
||||
<view class="detail-cell-card detail-card ss-flex-col">
|
||||
<detail-cell-sku :sku="state.selectedSku" @tap="state.showSelectSku = true" />
|
||||
</view>
|
||||
<!-- 规格与数量弹框 -->
|
||||
<s-select-seckill-sku
|
||||
v-model="state.goodsInfo"
|
||||
:show="state.showSelectSku"
|
||||
:single-limit-count="activity.singleLimitCount"
|
||||
@buy="onBuy"
|
||||
@change="onSkuChange"
|
||||
@close="state.showSelectSku = false"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 评价 -->
|
||||
<detail-comment-card class="detail-comment-selector" :goodsId="state.goodsInfo.id" />
|
||||
<!-- 详情 -->
|
||||
<detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
|
||||
|
||||
<!-- 详情tabbar -->
|
||||
<detail-tabbar v-model="state.goodsInfo">
|
||||
<view class="buy-box ss-flex ss-col-center ss-p-r-20">
|
||||
<button
|
||||
class="ss-reset-button origin-price-btn ss-flex-col"
|
||||
v-if="state.goodsInfo.marketPrice"
|
||||
@tap="sheep.$router.go('/pages/goods/index', { id: state.goodsInfo.id })"
|
||||
>
|
||||
<view>
|
||||
<view class="btn-price">{{ fen2yuan(state.goodsInfo.marketPrice) }}</view>
|
||||
<view>原价购买</view>
|
||||
</view>
|
||||
</button>
|
||||
<button
|
||||
class="ss-reset-button btn-box ss-flex-col"
|
||||
@tap="state.showSelectSku = true"
|
||||
:class="state.goodsInfo.stock != 0 ? 'check-btn-box' : 'disabled-btn-box'"
|
||||
:disabled="state.goodsInfo.stock === 0"
|
||||
>
|
||||
<view class="price-box ss-flex">
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||
style="width: 36rpx; height: 36rpx; margin: 0 4rpx"
|
||||
></image>
|
||||
<text class="point-text ss-m-r-16">
|
||||
{{ getShowPrice.point }}
|
||||
{{
|
||||
!getShowPrice.price || getShowPrice.price === 0 ? '' : `+¥${getShowPrice.price}`
|
||||
}}
|
||||
</text>
|
||||
</view>
|
||||
<view v-if="state.goodsInfo.stock === 0">已售罄</view>
|
||||
<view v-else>立即兑换</view>
|
||||
</button>
|
||||
</view>
|
||||
</detail-tabbar>
|
||||
</block>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, ref, unref } from 'vue';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { isEmpty } from 'lodash-es';
|
||||
import { fen2yuan, formatExchange, formatGoodsSwiper } from '@/sheep/hooks/useGoods';
|
||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
||||
import detailTabbar from './components/detail/detail-tabbar.vue';
|
||||
import detailSkeleton from './components/detail/detail-skeleton.vue';
|
||||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||
import detailContentCard from './components/detail/detail-content-card.vue';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
import { PromotionActivityTypeEnum, SharePageEnum } from '@/sheep/helper/const';
|
||||
import PointApi from '@/sheep/api/promotion/point';
|
||||
|
||||
const headerBg = sheep.$url.css('/static/img/shop/goods/score-bg.png');
|
||||
const btnBg = sheep.$url.css('/static/img/shop/goods/seckill-btn.png');
|
||||
const disabledBtnBg = sheep.$url.css('/static/img/shop/goods/activity-btn-disabled.png');
|
||||
const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png');
|
||||
const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
|
||||
|
||||
onPageScroll(() => {});
|
||||
const state = reactive({
|
||||
skeletonLoading: true,
|
||||
goodsInfo: {},
|
||||
showSelectSku: false,
|
||||
goodsSwiper: [],
|
||||
selectedSku: {},
|
||||
showModel: false,
|
||||
total: 0,
|
||||
price: '',
|
||||
});
|
||||
|
||||
// 规格变更
|
||||
function onSkuChange(e) {
|
||||
state.selectedSku = e;
|
||||
}
|
||||
|
||||
// 立即购买
|
||||
function onBuy(sku) {
|
||||
sheep.$router.go('/pages/order/confirm', {
|
||||
data: JSON.stringify({
|
||||
order_type: 'goods',
|
||||
buy_type: 'point',
|
||||
pointActivityId: activity.value.id,
|
||||
items: [
|
||||
{
|
||||
skuId: sku.id,
|
||||
count: sku.count,
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
// 分享信息
|
||||
const shareInfo = computed(() => {
|
||||
if (isEmpty(unref(activity))) return {};
|
||||
return sheep.$platform.share.getShareInfo(
|
||||
{
|
||||
title: activity.value.name,
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl),
|
||||
params: {
|
||||
page: SharePageEnum.POINT.value,
|
||||
query: activity.value.id,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'goods', // 商品海报
|
||||
title: activity.value.name, // 商品标题
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
|
||||
price: (getShowPrice.value.price || 0) + ` + ${getShowPrice.value.point} 积分`, // 积分价格
|
||||
marketPrice: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
const activity = ref();
|
||||
|
||||
const getShowPrice = computed(() => {
|
||||
if (!isEmpty(state.selectedSku)) {
|
||||
const sku = state.selectedSku;
|
||||
return {
|
||||
point: sku.point,
|
||||
price: !sku.pointPrice ? '' : fen2yuan(sku.pointPrice),
|
||||
};
|
||||
}
|
||||
return {
|
||||
point: activity.value.point,
|
||||
price: !activity.value.price ? '' : fen2yuan(activity.value.price),
|
||||
};
|
||||
});
|
||||
|
||||
// 查询活动
|
||||
const getActivity = async (id) => {
|
||||
const { data } = await PointApi.getPointActivity(id);
|
||||
if (!data) {
|
||||
state.goodsInfo = null;
|
||||
state.skeletonLoading = false;
|
||||
return;
|
||||
}
|
||||
activity.value = data;
|
||||
// 查询商品
|
||||
await getSpu(data.spuId);
|
||||
};
|
||||
|
||||
// 查询商品
|
||||
const getSpu = async (id) => {
|
||||
const { data } = await SpuApi.getSpuDetail(id);
|
||||
if (!data) {
|
||||
state.goodsInfo = null;
|
||||
state.skeletonLoading = false;
|
||||
return;
|
||||
}
|
||||
data.activity_type = PromotionActivityTypeEnum.POINT.type;
|
||||
state.goodsInfo = data;
|
||||
state.goodsInfo.stock = Math.min(data.stock, activity.value.stock);
|
||||
// 处理轮播图
|
||||
state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.sliderPicUrls);
|
||||
|
||||
// 价格、库存使用活动的
|
||||
data.skus.forEach((sku) => {
|
||||
const product = activity.value.products.find((product) => product.skuId === sku.id);
|
||||
if (product) {
|
||||
sku.point = product.point;
|
||||
sku.pointPrice = product.price;
|
||||
sku.stock = Math.min(sku.stock, product.stock);
|
||||
// 设置限购数量
|
||||
sku.limitCount = product.count;
|
||||
} else {
|
||||
// 找不到可能是没配置
|
||||
sku.stock = 0;
|
||||
}
|
||||
});
|
||||
|
||||
state.skeletonLoading = false;
|
||||
};
|
||||
|
||||
onLoad((options) => {
|
||||
// 非法参数
|
||||
if (!options.id) {
|
||||
state.goodsInfo = null;
|
||||
state.skeletonLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 查询活动
|
||||
getActivity(options.id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.disabled-btn-box[disabled] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background-color: $white;
|
||||
margin: 14rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 价格标题卡片
|
||||
.title-card {
|
||||
width: 710rpx;
|
||||
box-sizing: border-box;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 10rpx;
|
||||
background-image: v-bind(headerBg);
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.price-box {
|
||||
.point-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
.point-text {
|
||||
font-size: 42rpx;
|
||||
font-weight: 500;
|
||||
color: #ff3000;
|
||||
line-height: 36rpx;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.price-text {
|
||||
font-size: 42rpx;
|
||||
font-weight: 500;
|
||||
color: #ff3000;
|
||||
line-height: 36rpx;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
|
||||
.origin-price-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: $gray-c;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.sales-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $gray-c;
|
||||
}
|
||||
|
||||
.discounts-box {
|
||||
.discounts-tag {
|
||||
padding: 4rpx 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 4rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
// background: rgba(#2aae67, 0.05);
|
||||
background: var(--ui-BG-Main-tag);
|
||||
}
|
||||
|
||||
.discounts-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: var(--ui-BG-Main);
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.cicon-forward {
|
||||
color: var(--ui-BG-Main);
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.subtitle-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $dark-9;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 购买
|
||||
.buy-box {
|
||||
.check-btn-box {
|
||||
width: 248rpx;
|
||||
height: 80rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
margin-left: -36rpx;
|
||||
background-image: v-bind(btnBg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff;
|
||||
line-height: normal;
|
||||
border-radius: 0px 40rpx 40rpx 0px;
|
||||
}
|
||||
|
||||
.disabled-btn-box {
|
||||
width: 248rpx;
|
||||
height: 80rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
margin-left: -36rpx;
|
||||
background-image: v-bind(disabledBtnBg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #999999;
|
||||
line-height: normal;
|
||||
border-radius: 0px 40rpx 40rpx 0px;
|
||||
}
|
||||
|
||||
.btn-price {
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::before {
|
||||
content: '¥';
|
||||
}
|
||||
}
|
||||
|
||||
.origin-price-btn {
|
||||
width: 236rpx;
|
||||
height: 80rpx;
|
||||
background: rgba(#ff5651, 0.1);
|
||||
color: #ff6000;
|
||||
border-radius: 40rpx 0px 0px 40rpx;
|
||||
line-height: normal;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.no-original {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//秒杀卡片
|
||||
.seckill-box {
|
||||
background: v-bind(seckillBg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.groupon-box {
|
||||
background: v-bind(grouponBg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
//活动卡片
|
||||
.activity-box {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.activity-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 42rpx;
|
||||
|
||||
.activity-icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-go {
|
||||
width: 70rpx;
|
||||
height: 32rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6000;
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.model-box {
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,7 +7,9 @@
|
|||
<detailSkeleton v-if="state.skeletonLoading" />
|
||||
<!-- 下架/售罄提醒 -->
|
||||
<s-empty
|
||||
v-else-if="state.goodsInfo === null || state.goodsInfo.activity_type !== 'seckill'"
|
||||
v-else-if="
|
||||
state.goodsInfo === null || state.goodsInfo.activity_type !== 'seckill' || endTime.ms <= 0
|
||||
"
|
||||
text="活动不存在或已结束"
|
||||
icon="/static/soldout-empty.png"
|
||||
showAction
|
||||
|
|
@ -63,16 +65,13 @@
|
|||
<detail-progress :percent="state.percent" />
|
||||
</view>
|
||||
|
||||
<view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo?.name }}</view>
|
||||
<view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.name || '' }}</view>
|
||||
<view class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能卡片 -->
|
||||
<view class="detail-cell-card detail-card ss-flex-col">
|
||||
<detail-cell-sku
|
||||
:sku="state.selectedSku"
|
||||
@tap="state.showSelectSku = true"
|
||||
/>
|
||||
<detail-cell-sku :sku="state.selectedSku" @tap="state.showSelectSku = true" />
|
||||
</view>
|
||||
<!-- 规格与数量弹框 -->
|
||||
<s-select-seckill-sku
|
||||
|
|
@ -107,7 +106,9 @@
|
|||
<button v-else class="ss-reset-button origin-price-btn ss-flex-col">
|
||||
<view
|
||||
class="no-original"
|
||||
:class="state.goodsInfo.stock === 0 || timeStatusEnum !== TimeStatusEnum.STARTED ? '' : ''"
|
||||
:class="
|
||||
state.goodsInfo.stock === 0 || timeStatusEnum !== TimeStatusEnum.STARTED ? '' : ''
|
||||
"
|
||||
>
|
||||
秒杀价
|
||||
</view>
|
||||
|
|
@ -136,11 +137,11 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import {reactive, computed, ref} from 'vue';
|
||||
import { computed, reactive, ref, unref } from 'vue';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import {isEmpty, min} from 'lodash';
|
||||
import {useDurationTime, formatGoodsSwiper, fen2yuan} from '@/sheep/hooks/useGoods';
|
||||
import { isEmpty, min } from 'lodash-es';
|
||||
import { fen2yuan, formatGoodsSwiper, useDurationTime } from '@/sheep/hooks/useGoods';
|
||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
||||
import detailTabbar from './components/detail/detail-tabbar.vue';
|
||||
|
|
@ -148,15 +149,13 @@
|
|||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||
import detailContentCard from './components/detail/detail-content-card.vue';
|
||||
import detailProgress from './components/detail/detail-progress.vue';
|
||||
import SeckillApi from "@/sheep/api/promotion/seckill";
|
||||
import SpuApi from "@/sheep/api/product/spu";
|
||||
import {getTimeStatusEnum, TimeStatusEnum} from "@/sheep/util/const";
|
||||
import SeckillApi from '@/sheep/api/promotion/seckill';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
import { getTimeStatusEnum, SharePageEnum, TimeStatusEnum } from '@/sheep/helper/const';
|
||||
|
||||
const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-bg.png');
|
||||
const btnBg = sheep.$url.css('/static/img/shop/goods/seckill-btn.png');
|
||||
const disabledBtnBg = sheep.$url.css(
|
||||
'/static/img/shop/goods/activity-btn-disabled.png',
|
||||
);
|
||||
const disabledBtnBg = sheep.$url.css('/static/img/shop/goods/activity-btn-disabled.png');
|
||||
const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png');
|
||||
const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
|
||||
|
||||
|
|
@ -199,15 +198,15 @@
|
|||
});
|
||||
}
|
||||
|
||||
// 分享信息 TODO 芋艿:待接入
|
||||
// 分享信息
|
||||
const shareInfo = computed(() => {
|
||||
if (isEmpty(activity)) return {};
|
||||
if (isEmpty(unref(activity))) return {};
|
||||
return sheep.$platform.share.getShareInfo(
|
||||
{
|
||||
title: activity.value.name,
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl),
|
||||
params: {
|
||||
page: '4',
|
||||
page: SharePageEnum.SECKILL.value,
|
||||
query: activity.value.id,
|
||||
},
|
||||
},
|
||||
|
|
@ -215,42 +214,57 @@
|
|||
type: 'goods', // 商品海报
|
||||
title: activity.value.name, // 商品标题
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
|
||||
price: state.goodsInfo.price, // 商品价格
|
||||
marketPrice: state.goodsInfo.marketPrice, // 商品原价
|
||||
price: fen2yuan(state.goodsInfo.price), // 商品价格
|
||||
marketPrice: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
const activity = ref()
|
||||
const timeStatusEnum = ref('')
|
||||
const activity = ref();
|
||||
const timeStatusEnum = ref('');
|
||||
|
||||
// 查询活动
|
||||
const getActivity = async (id) => {
|
||||
const { data } = await SeckillApi.getSeckillActivity(id)
|
||||
activity.value = data
|
||||
timeStatusEnum.value = getTimeStatusEnum(activity.startTime, activity.endTime)
|
||||
const { data } = await SeckillApi.getSeckillActivity(id);
|
||||
if (!data) {
|
||||
state.goodsInfo = null;
|
||||
state.skeletonLoading = false;
|
||||
return;
|
||||
}
|
||||
activity.value = data;
|
||||
timeStatusEnum.value = getTimeStatusEnum(activity.value.startTime, activity.value.endTime);
|
||||
state.percent = 100 - (data.stock / data.totalStock) * 100;
|
||||
// 查询商品
|
||||
await getSpu(data.spuId);
|
||||
};
|
||||
|
||||
// 查询商品
|
||||
await getSpu(data.spuId)
|
||||
}
|
||||
|
||||
const getSpu = async (id) => {
|
||||
const { data } = await SpuApi.getSpuDetail(id)
|
||||
// 模拟
|
||||
data.activity_type = 'seckill'
|
||||
state.goodsInfo = data
|
||||
const { data } = await SpuApi.getSpuDetail(id);
|
||||
if (!data) {
|
||||
state.goodsInfo = null;
|
||||
state.skeletonLoading = false;
|
||||
return;
|
||||
}
|
||||
data.activity_type = 'seckill';
|
||||
state.goodsInfo = data;
|
||||
// 处理轮播图
|
||||
state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.sliderPicUrls);
|
||||
|
||||
// 默认显示最低价
|
||||
state.goodsInfo.price = min([state.goodsInfo.price, ...activity.value.products.map(spu => spu.seckillPrice)])
|
||||
state.goodsInfo.price = min([
|
||||
state.goodsInfo.price,
|
||||
...activity.value.products.map((spu) => spu.seckillPrice),
|
||||
]);
|
||||
|
||||
// 价格、库存使用活动的
|
||||
data.skus.forEach(sku => {
|
||||
const product = activity.value.products.find(product => product.skuId === sku.id);
|
||||
data.skus.forEach((sku) => {
|
||||
const product = activity.value.products.find((product) => product.skuId === sku.id);
|
||||
if (product) {
|
||||
sku.price = product.seckillPrice;
|
||||
sku.stock = Math.min(sku.stock, product.stock);
|
||||
} else { // 找不到可能是没配置,则不能发起秒杀
|
||||
} else {
|
||||
// 找不到可能是没配置,则不能发起秒杀
|
||||
sku.stock = 0;
|
||||
}
|
||||
// 设置限购数量
|
||||
|
|
@ -264,17 +278,18 @@
|
|||
});
|
||||
|
||||
state.skeletonLoading = false;
|
||||
}
|
||||
};
|
||||
|
||||
onLoad((options) => {
|
||||
// 非法参数
|
||||
if (!options.id) {
|
||||
state.goodsInfo = null;
|
||||
state.skeletonLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 查询活动
|
||||
getActivity(options.id)
|
||||
getActivity(options.id);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -282,6 +297,7 @@
|
|||
.disabled-btn-box[disabled] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background-color: $white;
|
||||
margin: 14rpx 20rpx;
|
||||
|
|
@ -372,6 +388,7 @@
|
|||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
|
||||
.countdown-h {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
|
|
@ -382,6 +399,7 @@
|
|||
background: rgba(#000000, 0.1);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.countdown-num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
|
|
@ -465,6 +483,7 @@
|
|||
line-height: normal;
|
||||
border-radius: 0px 40rpx 40rpx 0px;
|
||||
}
|
||||
|
||||
.btn-price {
|
||||
font-family: OPPOSANS;
|
||||
|
||||
|
|
@ -482,6 +501,7 @@
|
|||
line-height: normal;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.no-original {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
<template>
|
||||
<s-layout title="购物车" tabbar="/pages/index/cart" :bgStyle="{ color: '#fff' }">
|
||||
<s-empty v-if="state.list.length === 0" text="购物车空空如也,快去逛逛吧~" icon="/static/cart-empty.png" />
|
||||
<s-layout :bgStyle="{ color: '#fff' }" tabbar="/pages/index/cart" title="购物车">
|
||||
<s-empty
|
||||
v-if="state.list.length === 0"
|
||||
icon="/static/cart-empty.png"
|
||||
text="购物车空空如也,快去逛逛吧~"
|
||||
/>
|
||||
|
||||
<!-- 头部 -->
|
||||
<view class="cart-box ss-flex ss-flex-col ss-row-between" v-if="state.list.length">
|
||||
<view v-if="state.list.length" class="cart-box ss-flex ss-flex-col ss-row-between">
|
||||
<view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
|
||||
<view class="header-left ss-flex ss-col-center ss-font-26">
|
||||
共
|
||||
|
|
@ -11,41 +15,71 @@
|
|||
件商品
|
||||
</view>
|
||||
<view class="header-right">
|
||||
<button v-if="state.editMode" class="ss-reset-button" @tap="state.editMode = false">
|
||||
<button v-if="state.editMode" class="ss-reset-button" @tap="onChangeEditMode(false)">
|
||||
取消
|
||||
</button>
|
||||
<button v-else class="ss-reset-button ui-TC-Main" @tap="state.editMode = true">
|
||||
<button v-else class="ss-reset-button ui-TC-Main" @tap="onChangeEditMode(true)">
|
||||
编辑
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 内容 -->
|
||||
<view class="cart-content ss-flex-1 ss-p-x-30 ss-m-b-40">
|
||||
<view class="goods-box ss-r-10 ss-m-b-14" v-for="item in state.list" :key="item.id">
|
||||
<view v-for="item in state.list" :key="item.id" class="goods-box ss-r-10 ss-m-b-14">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<label class="check-box ss-flex ss-col-center ss-p-l-10" @tap="onSelectSingle(item.id)">
|
||||
<radio :checked="state.selectedIds.includes(item.id)" color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.8)" @tap.stop="onSelectSingle(item.id)" />
|
||||
<radio
|
||||
:checked="state.selectedIds.includes(item.id)"
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.8)"
|
||||
@tap.stop="onSelectSingle(item.id)"
|
||||
/>
|
||||
</label>
|
||||
<s-goods-item :title="item.spu.name" :img="item.spu.picUrl || item.goods.image"
|
||||
<view v-if="item.spu?.status !== 1 && !state.editMode" class="down-box">
|
||||
该商品已下架
|
||||
</view>
|
||||
<view v-else-if="item.spu?.stock <= 0 && !state.editMode" class="down-box">
|
||||
该商品无库存
|
||||
</view>
|
||||
<s-goods-item
|
||||
:img="item.spu.picUrl || item.goods.image"
|
||||
:price="item.sku.price"
|
||||
:skuText="item.sku.properties.length>1? item.sku.properties.reduce((items2,items)=>items2.valueName+' '+items.valueName):item.sku.properties[0].valueName"
|
||||
priceColor="#FF3000" :titleWidth="400">
|
||||
:skuText="
|
||||
item.sku.properties.length > 1
|
||||
? item.sku.properties.reduce(
|
||||
(items2, items) => items2.valueName + ' ' + items.valueName,
|
||||
)
|
||||
: item.sku.properties[0].valueName
|
||||
"
|
||||
:title="item.spu.name"
|
||||
:titleWidth="400"
|
||||
priceColor="#FF3000"
|
||||
>
|
||||
<template v-if="!state.editMode" v-slot:tool>
|
||||
<su-number-box :min="0" :max="item.sku.stock" :step="1" v-model="item.count" @change="onNumberChange($event, item)" />
|
||||
<su-number-box
|
||||
v-model="item.count"
|
||||
:max="item.sku.stock"
|
||||
:min="0"
|
||||
:step="1"
|
||||
@change="onNumberChange($event, item)"
|
||||
/>
|
||||
</template>
|
||||
</s-goods-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部 -->
|
||||
<su-fixed bottom :val="48" placeholder v-if="state.list.length > 0" :isInset="false">
|
||||
<su-fixed v-if="state.list.length > 0" :isInset="false" :val="48" bottom placeholder>
|
||||
<view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
|
||||
<view class="footer-left ss-flex ss-col-center">
|
||||
<label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
|
||||
<radio :checked="state.isAllSelected" color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.8)" @tap.stop="onSelectAll" />
|
||||
<view class="ss-m-l-8"> 全选 </view>
|
||||
<radio
|
||||
:checked="state.isAllSelected"
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.8)"
|
||||
@tap.stop="onSelectAll"
|
||||
/>
|
||||
<view class="ss-m-l-8"> 全选</view>
|
||||
</label>
|
||||
<text>合计:</text>
|
||||
<view class="text-price price-text">
|
||||
|
|
@ -53,12 +87,18 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="footer-right">
|
||||
<button v-if="state.editMode" class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
|
||||
@tap="onDelete">
|
||||
<button
|
||||
v-if="state.editMode"
|
||||
class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
|
||||
@tap="onDelete"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
<button v-else class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
|
||||
@tap="onConfirm">
|
||||
<button
|
||||
v-else
|
||||
class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
|
||||
@tap="onConfirm"
|
||||
>
|
||||
去结算
|
||||
{{ state.selectedIds?.length ? `(${state.selectedIds.length})` : '' }}
|
||||
</button>
|
||||
|
|
@ -71,14 +111,22 @@
|
|||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
import { computed, reactive } from 'vue';
|
||||
import { fen2yuan } from '../../sheep/hooks/useGoods';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import { isEmpty } from '@/sheep/helper/utils';
|
||||
|
||||
// 隐藏原生tabBar
|
||||
uni.hideTabBar({
|
||||
fail: () => {},
|
||||
});
|
||||
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const cart = sheep.$store('cart');
|
||||
|
||||
const state = reactive({
|
||||
editMode: false,
|
||||
editMode: computed(() => cart.editMode),
|
||||
list: computed(() => cart.list),
|
||||
selectedList: [],
|
||||
selectedIds: computed(() => cart.selectedIds),
|
||||
|
|
@ -91,15 +139,19 @@
|
|||
cart.selectSingle(id);
|
||||
}
|
||||
|
||||
// 编辑、取消
|
||||
function onChangeEditMode(flag) {
|
||||
cart.onChangeEditMode(flag);
|
||||
}
|
||||
|
||||
// 全选
|
||||
function onSelectAll() {
|
||||
cart.selectAll(!state.isAllSelected);
|
||||
}
|
||||
|
||||
// 结算
|
||||
function onConfirm() {
|
||||
let items = []
|
||||
let goods_list = [];
|
||||
async function onConfirm() {
|
||||
const items = [];
|
||||
state.selectedList = state.list.filter((item) => state.selectedIds.includes(item.id));
|
||||
state.selectedList.map((item) => {
|
||||
// 此处前端做出修改
|
||||
|
|
@ -107,33 +159,75 @@
|
|||
skuId: item.sku.id,
|
||||
count: item.count,
|
||||
cartId: item.id,
|
||||
})
|
||||
goods_list.push({
|
||||
// goods_id: item.goods_id,
|
||||
goods_id: item.spu.id,
|
||||
// goods_num: item.goods_num,
|
||||
goods_num: item.count,
|
||||
// 商品价格id真没有
|
||||
// goods_sku_price_id: item.goods_sku_price_id,
|
||||
categoryId: item.spu.categoryId,
|
||||
});
|
||||
});
|
||||
// return;
|
||||
if (goods_list.length === 0) {
|
||||
sheep.$helper.toast('请选择商品');
|
||||
if (isEmpty(items)) {
|
||||
sheep.$helper.toast('请先选择商品');
|
||||
return;
|
||||
}
|
||||
await validateDeliveryType(state.selectedList.map((item) => item.spu).map((spu) => spu.id));
|
||||
sheep.$router.go('/pages/order/confirm', {
|
||||
data: JSON.stringify({
|
||||
// order_type: 'goods',
|
||||
// goods_list,
|
||||
items,
|
||||
// from: 'cart',
|
||||
deliveryType: 1,
|
||||
pointStatus: false,
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 校验配送方式冲突
|
||||
*
|
||||
* @param {string[]} spuIds - 商品ID数组
|
||||
* @returns {Promise<void>}
|
||||
* @throws {Error} 当配送方式冲突或获取商品信息失败时抛出错误
|
||||
*/
|
||||
async function validateDeliveryType(spuIds) {
|
||||
// 获取商品信息
|
||||
const { data: spuList } = await SpuApi.getSpuListByIds(spuIds.join(','));
|
||||
if (isEmpty(spuList)) {
|
||||
sheep.$helper.toast('未找到商品信息');
|
||||
throw new Error('未找到商品信息');
|
||||
}
|
||||
// 获取所有商品的配送方式列表
|
||||
const deliveryTypesList = spuList.map((item) => item.deliveryTypes);
|
||||
// 检查配送方式冲突
|
||||
const hasConflict = checkDeliveryConflicts(deliveryTypesList);
|
||||
if (hasConflict) {
|
||||
sheep.$helper.toast('选中商品支持的配送方式冲突,不允许提交');
|
||||
throw new Error('选中商品支持的配送方式冲突,不允许提交');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查配送方式列表中是否存在冲突
|
||||
* @description
|
||||
* 示例场景:
|
||||
* A 商品支持:[快递, 自提]
|
||||
* B 商品支持:[快递]
|
||||
* C 商品支持:[自提]
|
||||
*
|
||||
* 对比结果:
|
||||
* A 和 B:不冲突 (有交集:快递)
|
||||
* A 和 C:不冲突 (有交集:自提)
|
||||
* B 和 C:冲突 (无交集)
|
||||
* @param {Array<Array<number>>} deliveryTypesList - 配送方式列表的数组
|
||||
* @returns {boolean} 是否存在冲突
|
||||
*/
|
||||
function checkDeliveryConflicts(deliveryTypesList) {
|
||||
for (let i = 0; i < deliveryTypesList.length - 1; i++) {
|
||||
const currentTypes = deliveryTypesList[i];
|
||||
for (let j = i + 1; j < deliveryTypesList.length; j++) {
|
||||
const nextTypes = deliveryTypesList[j];
|
||||
// 检查是否没有交集(即冲突)
|
||||
const hasNoIntersection = !currentTypes.some((type) => nextTypes.includes(type));
|
||||
if (hasNoIntersection) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function onNumberChange(e, cartItem) {
|
||||
if (e === 0) {
|
||||
cart.delete(cartItem.id);
|
||||
|
|
@ -147,9 +241,18 @@
|
|||
goods_sku_price_id: cartItem.goods_sku_price_id,
|
||||
});
|
||||
}
|
||||
|
||||
async function onDelete() {
|
||||
cart.delete(state.selectedIds);
|
||||
}
|
||||
|
||||
function getCartList() {
|
||||
cart.getList();
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
getCartList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -190,6 +293,22 @@
|
|||
|
||||
.goods-box {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
// 下架商品
|
||||
.down-box {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(#fff, 0.8);
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<!-- 商品分类列表 -->
|
||||
<template>
|
||||
<s-layout title="分类" tabbar="/pages/index/category" :bgStyle="{ color: '#fff' }">
|
||||
<s-layout :bgStyle="{ color: '#fff' }" tabbar="/pages/index/category" title="分类">
|
||||
<view class="s-category">
|
||||
<view class="three-level-wrap ss-flex ss-col-top" :style="[{ height: pageHeight + 'px' }]">
|
||||
<view class="three-level-wrap ss-flex ss-col-top">
|
||||
<!-- 商品分类(左) -->
|
||||
<scroll-view class="side-menu-wrap" scroll-y :style="[{ height: pageHeight + 'px' }]">
|
||||
<view class="side-menu-wrap" :style="[{ top: Number(statusBarHeight + 88) + 'rpx' }]">
|
||||
<scroll-view scroll-y :style="[{ height: pageHeight + 'px' }]">
|
||||
<view
|
||||
class="menu-item ss-flex"
|
||||
v-for="(item, index) in state.categoryList"
|
||||
|
|
@ -17,13 +18,10 @@
|
|||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 商品分类(右) -->
|
||||
<scroll-view
|
||||
class="goods-list-box"
|
||||
scroll-y
|
||||
:style="[{ height: pageHeight + 'px' }]"
|
||||
v-if="state.categoryList?.length"
|
||||
>
|
||||
<view class="goods-list-box" v-if="state.categoryList?.length">
|
||||
<scroll-view scroll-y :style="[{ height: pageHeight + 'px' }]">
|
||||
<image
|
||||
v-if="state.categoryList[state.activeMenu].picUrl"
|
||||
class="banner-img"
|
||||
|
|
@ -51,6 +49,7 @@
|
|||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
|
|
@ -61,10 +60,10 @@
|
|||
import sheep from '@/sheep';
|
||||
import CategoryApi from '@/sheep/api/product/category';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import { handleTree } from '@/sheep/util';
|
||||
import _ from 'lodash-es';
|
||||
import { handleTree } from '@/sheep/helper/utils';
|
||||
|
||||
const state = reactive({
|
||||
style: 'second_one', // first_one(一级 - 样式一), first_two(二级 - 样式二), second_one(二级)
|
||||
|
|
@ -83,6 +82,7 @@
|
|||
|
||||
const { safeArea } = sheep.$platform.device;
|
||||
const pageHeight = computed(() => safeArea.height - 44 - 50);
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
|
||||
// 加载商品分类
|
||||
async function getList() {
|
||||
|
|
@ -131,17 +131,18 @@
|
|||
getGoodsList();
|
||||
}
|
||||
|
||||
onLoad(async () => {
|
||||
onLoad(async (params) => {
|
||||
await getList();
|
||||
// 如果是 first 风格,需要加载商品分页
|
||||
if (state.style === 'first_one' || state.style === 'first_two') {
|
||||
onMenu(0);
|
||||
}
|
||||
|
||||
// 首页点击分类的处理:查找满足条件的分类
|
||||
const foundCategory = state.categoryList.find((category) => category.id === Number(params.id));
|
||||
// 如果找到则调用 onMenu 自动勾选相应分类,否则调用 onMenu(0) 勾选第一个分类
|
||||
onMenu(foundCategory ? state.categoryList.indexOf(foundCategory) : 0);
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
function handleScrollToLower() {
|
||||
loadMore();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -152,6 +153,8 @@
|
|||
height: 100%;
|
||||
padding-left: 12rpx;
|
||||
background-color: #f6f6f6;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
|
||||
.menu-item {
|
||||
width: 100%;
|
||||
|
|
@ -222,8 +225,9 @@
|
|||
|
||||
.goods-list-box {
|
||||
background-color: #fff;
|
||||
width: calc(100vw - 100px);
|
||||
width: calc(100vw - 200rpx);
|
||||
padding: 10px;
|
||||
margin-left: 200rpx;
|
||||
}
|
||||
|
||||
.banner-img {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<image class="goods-img" :src="item.picUrl" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="goods-content">
|
||||
<view class="goods-title ss-line-1 ss-m-b-28">{{ item.title }}</view>
|
||||
<view class="goods-title ss-line-1 ss-m-b-28">{{ item.name }}</view>
|
||||
<view class="goods-price">¥{{ fen2yuan(item.price) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,19 @@
|
|||
<!-- 首页,支持店铺装修 -->
|
||||
<template>
|
||||
<view v-if="template">
|
||||
<s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.page"
|
||||
:navbarStyle="template.navigationBar" onShareAppMessage>
|
||||
<s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
|
||||
<s-layout
|
||||
title="首页"
|
||||
navbar="custom"
|
||||
tabbar="/pages/index/index"
|
||||
:bgStyle="template.page"
|
||||
:navbarStyle="template.navigationBar"
|
||||
onShareAppMessage
|
||||
>
|
||||
<s-block
|
||||
v-for="(item, index) in template.components"
|
||||
:key="index"
|
||||
:styles="item.property.style"
|
||||
>
|
||||
<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
|
||||
</s-block>
|
||||
</s-layout>
|
||||
|
|
@ -11,18 +21,14 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad,
|
||||
onPageScroll,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app';
|
||||
import { computed } from 'vue';
|
||||
import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import $share from '@/sheep/platform/share';
|
||||
// 隐藏原生tabBar
|
||||
uni.hideTabBar();
|
||||
uni.hideTabBar({
|
||||
fail: () => {},
|
||||
});
|
||||
|
||||
const template = computed(() => sheep.$store('app').template?.home);
|
||||
// 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
|
||||
|
|
@ -47,12 +53,12 @@
|
|||
// })
|
||||
// }())
|
||||
|
||||
|
||||
onLoad((options) => {
|
||||
// #ifdef MP
|
||||
// 小程序识别二维码
|
||||
if (options.scene) {
|
||||
const sceneParams = decodeURIComponent(options.scene).split('=');
|
||||
console.log('sceneParams=>', sceneParams);
|
||||
options[sceneParams[0]] = sceneParams[1];
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -76,7 +82,7 @@
|
|||
// 下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
sheep.$store('app').init();
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 800);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,13 +14,14 @@
|
|||
new URLSearchParams(location.search).forEach((value, key) => {
|
||||
options[key] = value;
|
||||
});
|
||||
// 执行登录 or 绑定,注意需要 await 绑定
|
||||
const event = options.event;
|
||||
const code = options.code;
|
||||
const state = options.state;
|
||||
if (event === 'login') { // 场景一:登录
|
||||
const res = await sheep.$platform.useProvider().login(code, state);
|
||||
await sheep.$platform.useProvider().login(code, state);
|
||||
} else if (event === 'bind') { // 场景二:绑定
|
||||
sheep.$platform.useProvider().bind(code, state);
|
||||
await sheep.$platform.useProvider().bind(code, state);
|
||||
}
|
||||
|
||||
// 检测 H5 登录回调
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- 搜索界面 -->
|
||||
<template>
|
||||
<s-layout class="set-wrap" title="搜索" :bgStyle="{ color: '#FFF' }">
|
||||
<s-layout :bgStyle="{ color: '#FFF' }" class="set-wrap" title="搜索">
|
||||
<view class="ss-p-x-24">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<uni-search-bar
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@
|
|||
:navbarStyle="template.navigationBar"
|
||||
onShareAppMessage
|
||||
>
|
||||
<s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
|
||||
<s-block
|
||||
v-for="(item, index) in template.components"
|
||||
:key="index"
|
||||
:styles="item.property.style"
|
||||
>
|
||||
<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
|
||||
</s-block>
|
||||
</s-layout>
|
||||
|
|
@ -20,10 +24,11 @@
|
|||
import sheep from '@/sheep';
|
||||
|
||||
// 隐藏原生tabBar
|
||||
uni.hideTabBar();
|
||||
uni.hideTabBar({
|
||||
fail: () => {},
|
||||
});
|
||||
|
||||
const template = computed(() => sheep.$store('app').template.user);
|
||||
const isLogin = computed(() => sheep.$store('user').isLogin);
|
||||
|
||||
onShow(() => {
|
||||
sheep.$store('user').updateUserData();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,282 @@
|
|||
<!-- 下单界面,收货地址 or 自提门店的选择组件 -->
|
||||
<template>
|
||||
<view class="allAddress" :style="state.isPickUp ? '' : 'padding-top:10rpx;'">
|
||||
<view class="nav flex flex-wrap">
|
||||
<view
|
||||
class="item font-color"
|
||||
:class="state.deliveryType === 1 ? 'on' : 'on2'"
|
||||
@tap="switchDeliveryType(1)"
|
||||
v-if="state.isPickUp"
|
||||
/>
|
||||
<view
|
||||
class="item font-color"
|
||||
:class="state.deliveryType === 2 ? 'on' : 'on2'"
|
||||
@tap="switchDeliveryType(2)"
|
||||
v-if="state.isPickUp"
|
||||
/>
|
||||
</view>
|
||||
<!-- 情况一:收货地址的选择 -->
|
||||
<view
|
||||
class="address flex flex-wrap flex-center ss-row-between"
|
||||
@tap="onSelectAddress"
|
||||
v-if="state.deliveryType === 1"
|
||||
:style="state.isPickUp ? '' : 'border-top-left-radius: 14rpx;border-top-right-radius: 14rpx;'"
|
||||
>
|
||||
<view class="addressCon" v-if="state.addressInfo.name">
|
||||
<view class="name"
|
||||
>{{ state.addressInfo.name }}
|
||||
<text class="phone">{{ state.addressInfo.mobile }}</text>
|
||||
</view>
|
||||
<view class="flex flex-wrap">
|
||||
<text class="default font-color" v-if="state.addressInfo.defaultStatus">[默认]</text>
|
||||
<text class="line2">
|
||||
{{ state.addressInfo.areaName }} {{ state.addressInfo.detailAddress }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="addressCon" v-else>
|
||||
<view class="setaddress">设置收货地址</view>
|
||||
</view>
|
||||
<view class="iconfont">
|
||||
<view class="ss-rest-button">
|
||||
<text class="_icon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 情况二:门店的选择 -->
|
||||
<view
|
||||
class="address flex flex-wrap flex-center ss-row-between"
|
||||
v-if="state.deliveryType === 2"
|
||||
@tap="onSelectAddress"
|
||||
>
|
||||
<view class="addressCon" v-if="state.pickUpInfo.name">
|
||||
<view class="name"
|
||||
>{{ state.pickUpInfo.name }}
|
||||
<text class="phone">{{ state.pickUpInfo.phone }}</text>
|
||||
</view>
|
||||
<view class="line1">
|
||||
{{ state.pickUpInfo.areaName }}{{ ', ' + state.pickUpInfo.detailAddress }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="addressCon" v-else>
|
||||
<view class="setaddress">选择自提门店</view>
|
||||
</view>
|
||||
<view class="iconfont">
|
||||
<view class="ss-rest-button">
|
||||
<text class="_icon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line">
|
||||
<image :src="sheep.$url.static('/static/img/shop/line.png')" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { isEmpty } from 'lodash-es';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue']);
|
||||
|
||||
// computed 解决父子组件双向数据同步
|
||||
const state = computed({
|
||||
get() {
|
||||
return new Proxy(props.modelValue, {
|
||||
set(obj, name, val) {
|
||||
emits('update:modelValue', {
|
||||
...obj,
|
||||
[name]: val,
|
||||
});
|
||||
return true;
|
||||
},
|
||||
});
|
||||
},
|
||||
set(val) {
|
||||
emits('update:modelValue', val);
|
||||
},
|
||||
});
|
||||
|
||||
// 选择地址
|
||||
function onSelectAddress() {
|
||||
let emitName = 'SELECT_ADDRESS';
|
||||
let addressPage = '/pages/user/address/list?type=select';
|
||||
if (state.value.deliveryType === 2) {
|
||||
emitName = 'SELECT_PICK_UP_INFO';
|
||||
addressPage = '/pages/user/goods_details_store/index';
|
||||
}
|
||||
uni.$once(emitName, (e) => {
|
||||
changeConsignee(e.addressInfo);
|
||||
});
|
||||
sheep.$router.go(addressPage);
|
||||
}
|
||||
|
||||
// 更改收货人地址&计算订单信息
|
||||
async function changeConsignee(addressInfo = {}) {
|
||||
if (!isEmpty(addressInfo)) {
|
||||
if (state.value.deliveryType === 1) {
|
||||
state.value.addressInfo = addressInfo;
|
||||
}
|
||||
if (state.value.deliveryType === 2) {
|
||||
state.value.pickUpInfo = addressInfo;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 收货方式切换
|
||||
const switchDeliveryType = (type) => {
|
||||
state.value.deliveryType = type;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.allAddress .font-color {
|
||||
color: #e93323 !important;
|
||||
}
|
||||
.line2 {
|
||||
width: 504rpx;
|
||||
}
|
||||
.textR {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 3rpx;
|
||||
}
|
||||
|
||||
.line image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.address {
|
||||
padding: 28rpx;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.address .addressCon {
|
||||
width: 596rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.address .addressCon .name {
|
||||
font-size: 30rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.address .addressCon .name .phone {
|
||||
margin-left: 50rpx;
|
||||
}
|
||||
|
||||
.address .addressCon .default {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.address .addressCon .setaddress {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.address .iconfont {
|
||||
font-size: 35rpx;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.allAddress {
|
||||
width: 100%;
|
||||
background: linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
|
||||
// background-image: linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
|
||||
// background-image: -webkit-linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
|
||||
// background-image: -moz-linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
|
||||
//padding: 100rpx 30rpx 0 30rpx;
|
||||
padding-top: 100rpx;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.allAddress .nav {
|
||||
width: 690rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.allAddress .nav .item {
|
||||
width: 334rpx;
|
||||
}
|
||||
|
||||
.allAddress .nav .item.on {
|
||||
position: relative;
|
||||
width: 230rpx;
|
||||
}
|
||||
|
||||
.allAddress .nav .item.on::before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
content: '快递配送';
|
||||
font-size: 28rpx;
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 336rpx;
|
||||
border-width: 0 20rpx 80rpx 0;
|
||||
border-style: none solid solid;
|
||||
border-color: transparent transparent #fff;
|
||||
z-index: 2;
|
||||
border-radius: 14rpx 36rpx 0 0;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.allAddress .nav .item:nth-of-type(2).on::before {
|
||||
content: '到店自提';
|
||||
border-width: 0 0 80rpx 20rpx;
|
||||
border-radius: 36rpx 14rpx 0 0;
|
||||
}
|
||||
|
||||
.allAddress .nav .item.on2 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.allAddress .nav .item.on2::before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
content: '到店自提';
|
||||
font-size: 28rpx;
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 401rpx;
|
||||
border-width: 0 0 60rpx 60rpx;
|
||||
border-style: none solid solid;
|
||||
border-color: transparent transparent #f7c1bd;
|
||||
border-radius: 36rpx 14rpx 0 0;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.allAddress .nav .item:nth-of-type(1).on2::before {
|
||||
content: '快递配送';
|
||||
border-width: 0 60rpx 60rpx 0;
|
||||
border-radius: 14rpx 36rpx 0 0;
|
||||
}
|
||||
|
||||
.allAddress .address {
|
||||
width: 690rpx;
|
||||
max-height: 180rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.allAddress .line {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -64,10 +64,9 @@
|
|||
v-model="formData.applyDescription"
|
||||
placeholder="客官~请描述您遇到的问题,建议上传照片"
|
||||
/>
|
||||
<!-- TODO 芋艿:上传的测试 -->
|
||||
<view class="upload-img">
|
||||
<s-uploader
|
||||
v-model:url="formData.images"
|
||||
v-model:url="formData.applyPicUrls"
|
||||
fileMediatype="image"
|
||||
limit="9"
|
||||
mode="grid"
|
||||
|
|
@ -98,11 +97,7 @@
|
|||
</view>
|
||||
<view class="modal-content content_box">
|
||||
<radio-group @change="onChange">
|
||||
<label
|
||||
class="radio ss-flex ss-col-center"
|
||||
v-for="item in state.reasonList"
|
||||
:key="item"
|
||||
>
|
||||
<label class="radio ss-flex ss-col-center" v-for="item in state.reasonList" :key="item">
|
||||
<view class="ss-flex-1 ss-p-20">{{ item }}</view>
|
||||
<radio
|
||||
:value="item"
|
||||
|
|
@ -152,21 +147,18 @@
|
|||
],
|
||||
reasonList: [], // 可选的申请原因数组
|
||||
showModal: false, // 是否显示申请原因弹窗
|
||||
currentValue: '' // 当前选择的售后原因
|
||||
currentValue: '', // 当前选择的售后原因
|
||||
});
|
||||
const formData = reactive({
|
||||
let formData = reactive({
|
||||
way: '',
|
||||
applyReason: '',
|
||||
applyDescription: '',
|
||||
images: [],
|
||||
applyPicUrls: [],
|
||||
});
|
||||
const rules = reactive({});
|
||||
|
||||
// 提交表单
|
||||
async function submit() {
|
||||
// #ifdef MP
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage('order_aftersale_change');
|
||||
// #endif
|
||||
let data = {
|
||||
orderItemId: state.itemId,
|
||||
refundPrice: state.item.payPrice,
|
||||
|
|
@ -177,7 +169,7 @@
|
|||
uni.showToast({
|
||||
title: '申请成功',
|
||||
});
|
||||
sheep.$router.go('/pages/order/aftersale/list');
|
||||
sheep.$router.redirect('/pages/order/aftersale/list');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -214,7 +206,7 @@
|
|||
state.itemId = parseInt(options.itemId);
|
||||
|
||||
// 读取订单信息
|
||||
const { code, data } = await OrderApi.getOrder(state.orderId);
|
||||
const { code, data } = await OrderApi.getOrderDetail(state.orderId);
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,24 +3,38 @@
|
|||
<s-layout title="售后详情" :navbar="!isEmpty(state.info) && state.loading ? 'inner' : 'normal'">
|
||||
<view class="content_box" v-if="!isEmpty(state.info) && state.loading">
|
||||
<!-- 步骤条 -->
|
||||
<view class="steps-box ss-flex" :style="[
|
||||
<view
|
||||
class="steps-box ss-flex"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 88) + 'rpx',
|
||||
},
|
||||
]">
|
||||
]"
|
||||
>
|
||||
<view class="ss-flex">
|
||||
<view class="steps-item" v-for="(item, index) in state.list" :key="index">
|
||||
<view class="ss-flex">
|
||||
<text class="sicon-circleclose"
|
||||
v-if="state.list.length - 1 === index && [61, 62, 63].includes(state.info.status)" />
|
||||
<text class="sicon-circlecheck" v-else
|
||||
:class="state.active >= index ? 'activity-color' : 'info-color'" />
|
||||
<text
|
||||
class="sicon-circleclose"
|
||||
v-if="state.list.length - 1 === index && [61, 62, 63].includes(state.info.status)"
|
||||
/>
|
||||
<text
|
||||
class="sicon-circlecheck"
|
||||
v-else
|
||||
:class="state.active >= index ? 'activity-color' : 'info-color'"
|
||||
/>
|
||||
|
||||
<view v-if="state.list.length - 1 !== index" class="line"
|
||||
:class="state.active >= index ? 'activity-bg' : 'info-bg'" />
|
||||
<view
|
||||
v-if="state.list.length - 1 !== index"
|
||||
class="line"
|
||||
:class="state.active >= index ? 'activity-bg' : 'info-bg'"
|
||||
/>
|
||||
</view>
|
||||
<view class="steps-item-title" :class="state.active >= index ? 'activity-color' : 'info-color'">
|
||||
<view
|
||||
class="steps-item-title"
|
||||
:class="state.active >= index ? 'activity-color' : 'info-color'"
|
||||
>
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -28,8 +42,10 @@
|
|||
</view>
|
||||
|
||||
<!-- 服务状态 -->
|
||||
<view class="status-box ss-flex ss-col-center ss-row-between ss-m-x-20"
|
||||
@tap="sheep.$router.go('/pages/order/aftersale/log', { id: state.id })">
|
||||
<view
|
||||
class="status-box ss-flex ss-col-center ss-row-between ss-m-x-20"
|
||||
@tap="sheep.$router.go('/pages/order/aftersale/log', { id: state.id })"
|
||||
>
|
||||
<view class="">
|
||||
<view class="status-text">
|
||||
{{ formatAfterSaleStatusDescription(state.info) }}
|
||||
|
|
@ -49,11 +65,11 @@
|
|||
<!-- 服务商品 -->
|
||||
<view class="order-shop">
|
||||
<s-goods-item
|
||||
:img=" state.info.picUrl"
|
||||
:title=" state.info.spuName"
|
||||
:img="state.info.picUrl"
|
||||
:title="state.info.spuName"
|
||||
:titleWidth="480"
|
||||
:skuText="state.info.properties.map((property) => property.valueName).join(' ')"
|
||||
:num=" state.info.count"
|
||||
:num="state.info.count"
|
||||
/>
|
||||
</view>
|
||||
|
||||
|
|
@ -86,18 +102,31 @@
|
|||
</view>
|
||||
|
||||
<!-- 操作区 -->
|
||||
<s-empty v-if="isEmpty(state.info) && state.loading" icon="/static/order-empty.png" text="暂无该订单售后详情" />
|
||||
<s-empty
|
||||
v-if="isEmpty(state.info) && state.loading"
|
||||
icon="/static/order-empty.png"
|
||||
text="暂无该订单售后详情"
|
||||
/>
|
||||
<su-fixed bottom placeholder bg="bg-white" v-if="!isEmpty(state.info)">
|
||||
<view class="foot_box">
|
||||
<button class="ss-reset-button btn" v-if="state.info.buttons?.includes('cancel')"
|
||||
@tap="onApply(state.info.id)">
|
||||
<button
|
||||
class="ss-reset-button btn"
|
||||
v-if="state.info.buttons?.includes('cancel')"
|
||||
@tap="onApply(state.info.id)"
|
||||
>
|
||||
取消申请
|
||||
</button>
|
||||
<button class="ss-reset-button btn" v-if="state.info.buttons?.includes('delivery')"
|
||||
@tap="sheep.$router.go('/pages/order/aftersale/return-delivery', { id: state.info.id })">
|
||||
<button
|
||||
class="ss-reset-button btn"
|
||||
v-if="state.info.buttons?.includes('delivery')"
|
||||
@tap="sheep.$router.go('/pages/order/aftersale/return-delivery', { id: state.info.id })"
|
||||
>
|
||||
填写退货
|
||||
</button>
|
||||
<button class="ss-reset-button contcat-btn btn" @tap="sheep.$router.go('/pages/chat/index')">
|
||||
<button
|
||||
class="ss-reset-button contcat-btn btn"
|
||||
@tap="sheep.$router.go('/pages/chat/index')"
|
||||
>
|
||||
联系客服
|
||||
</button>
|
||||
</view>
|
||||
|
|
@ -109,8 +138,12 @@
|
|||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { fen2yuan, formatAfterSaleStatusDescription, handleAfterSaleButtons } from '@/sheep/hooks/useGoods';
|
||||
import { isEmpty } from 'lodash-es';
|
||||
import {
|
||||
fen2yuan,
|
||||
formatAfterSaleStatusDescription,
|
||||
handleAfterSaleButtons,
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import AfterSaleApi from '@/sheep/api/trade/afterSale';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
|
|
@ -120,20 +153,24 @@
|
|||
info: {}, // 收货信息
|
||||
loading: false,
|
||||
active: 0, // 在 list 的激活位置
|
||||
list: [{
|
||||
list: [
|
||||
{
|
||||
title: '提交申请',
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: '处理中',
|
||||
}, {
|
||||
title: '完成'
|
||||
}], // 时间轴
|
||||
},
|
||||
{
|
||||
title: '完成',
|
||||
},
|
||||
], // 时间轴
|
||||
});
|
||||
|
||||
function onApply(id) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要取消此申请吗?',
|
||||
success: async function(res) {
|
||||
success: async function (res) {
|
||||
if (!res.confirm) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -175,7 +212,7 @@
|
|||
onLoad((options) => {
|
||||
if (!options.id) {
|
||||
sheep.$helper.toast(`缺少订单信息,请检查`);
|
||||
return
|
||||
return;
|
||||
}
|
||||
state.id = options.id;
|
||||
getDetail(options.id);
|
||||
|
|
|
|||
|
|
@ -3,13 +3,22 @@
|
|||
<s-layout title="售后列表">
|
||||
<!-- tab -->
|
||||
<su-sticky bgColor="#fff">
|
||||
<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" />
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
:scrollable="false"
|
||||
@change="onTabsChange"
|
||||
:current="state.currentTab"
|
||||
/>
|
||||
</su-sticky>
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无数据" />
|
||||
<!-- 列表 -->
|
||||
<view v-if="state.pagination.total > 0">
|
||||
<view class="list-box ss-m-y-20" v-for="order in state.pagination.list" :key="order.id"
|
||||
@tap="sheep.$router.go('/pages/order/aftersale/detail', { id: order.id })">
|
||||
<view
|
||||
class="list-box ss-m-y-20"
|
||||
v-for="order in state.pagination.list"
|
||||
:key="order.id"
|
||||
@tap="sheep.$router.go('/pages/order/aftersale/detail', { id: order.id })"
|
||||
>
|
||||
<view class="order-head ss-flex ss-col-center ss-row-between">
|
||||
<text class="no">服务单号:{{ order.no }}</text>
|
||||
<text class="state">{{ formatAfterSaleStatus(order) }}</text>
|
||||
|
|
@ -28,17 +37,26 @@
|
|||
<text class="_icon-forward"></text>
|
||||
</view>
|
||||
<view class="tool-btn-box ss-flex ss-col-center ss-row-right ss-p-r-20">
|
||||
<!-- TODO 功能缺失:填写退货信息 -->
|
||||
<view>
|
||||
<button class="ss-reset-button tool-btn" @tap.stop="onApply(order.id)"
|
||||
v-if="order?.buttons.includes('cancel')">取消申请</button>
|
||||
<button
|
||||
class="ss-reset-button tool-btn"
|
||||
@tap.stop="onApply(order.id)"
|
||||
v-if="order?.buttons.includes('cancel')"
|
||||
>
|
||||
取消申请
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}" @tap="loadMore" />
|
||||
}"
|
||||
@tap="loadMore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
|
|
@ -46,10 +64,14 @@
|
|||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import { formatAfterSaleStatus, formatAfterSaleStatusDescription, handleAfterSaleButtons } from '@/sheep/hooks/useGoods';
|
||||
import _ from 'lodash-es';
|
||||
import {
|
||||
formatAfterSaleStatus,
|
||||
formatAfterSaleStatusDescription,
|
||||
handleAfterSaleButtons,
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import AfterSaleApi from '@/sheep/api/trade/afterSale';
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
import { resetPagination } from '@/sheep/helper/utils';
|
||||
|
||||
const state = reactive({
|
||||
currentTab: 0,
|
||||
|
|
@ -58,32 +80,32 @@
|
|||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
pageSize: 10,
|
||||
},
|
||||
loadStatus: '',
|
||||
});
|
||||
|
||||
// TODO 芋艿:优化点,增加筛选
|
||||
const tabMaps = [{
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
value: [],
|
||||
},
|
||||
{
|
||||
name: '申请中',
|
||||
value: [10],
|
||||
},
|
||||
{
|
||||
name: '处理中',
|
||||
value: [20, 30, 40],
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
value: [50],
|
||||
},
|
||||
{
|
||||
name: '已拒绝',
|
||||
value: [61, 62, 63],
|
||||
},
|
||||
// {
|
||||
// name: '申请中',
|
||||
// value: 'nooper',
|
||||
// },
|
||||
// {
|
||||
// name: '处理中',
|
||||
// value: 'ing',
|
||||
// },
|
||||
// {
|
||||
// name: '已完成',
|
||||
// value: 'completed',
|
||||
// },
|
||||
// {
|
||||
// name: '已拒绝',
|
||||
// value: 'refuse',
|
||||
// },
|
||||
];
|
||||
|
||||
// 切换选项卡
|
||||
|
|
@ -97,14 +119,14 @@
|
|||
async function getOrderList() {
|
||||
state.loadStatus = 'loading';
|
||||
let { data, code } = await AfterSaleApi.getAfterSalePage({
|
||||
// type: tabMaps[state.currentTab].value,
|
||||
pageNo: state.pagination.pageNo,
|
||||
pageSize: state.pagination.pageSize,
|
||||
statuses: tabMaps[state.currentTab].value.join(','),
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
data.list.forEach(order => handleAfterSaleButtons(order));
|
||||
data.list.forEach((order) => handleAfterSaleButtons(order));
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
|
|
@ -114,7 +136,7 @@
|
|||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要取消此申请吗?',
|
||||
success: async function(res) {
|
||||
success: async function (res) {
|
||||
if (!res.confirm) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -137,7 +159,7 @@
|
|||
// 加载更多
|
||||
function loadMore() {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return
|
||||
return;
|
||||
}
|
||||
state.pagination.pageNo++;
|
||||
getOrderList();
|
||||
|
|
|
|||
|
|
@ -74,4 +74,10 @@
|
|||
color: #999999;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
:deep() {
|
||||
image {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,15 +6,16 @@
|
|||
<view class='list borRadius14'>
|
||||
<view class='item acea-row row-between-wrapper' style="display: flex;align-items: center;">
|
||||
<view>物流公司</view>
|
||||
<view v-if="state.expresses.length>0" style="flex:1">
|
||||
<picker mode='selector' class='num' @change="bindPickerChange" :value="state.expressIndex"
|
||||
:range="state.expresses" range-key="name">
|
||||
<view class="picker acea-row row-between-wrapper">
|
||||
<view class="picker acea-row row-between-wrapper" style="display: flex;justify-content: space-between;">
|
||||
<view class='reason'>{{ state.expresses[state.expressIndex].name }}</view>
|
||||
<!-- TODO 芋艿:这里样式有问题,少了 > 按钮 -->
|
||||
<text class='iconfont icon-jiantou' />
|
||||
<text class='iconfont _icon-forward' />
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class='item textarea acea-row row-between' style="display: flex;align-items: center;">
|
||||
<view>物流单号</view>
|
||||
<input placeholder='请填写物流单号' class='num' name="logisticsNo"
|
||||
|
|
|
|||
|
|
@ -1,13 +1,7 @@
|
|||
<template>
|
||||
<s-layout title="确认订单">
|
||||
<!-- TODO:这个判断先删除 v-if="state.orderInfo.need_address === 1" -->
|
||||
<view class="bg-white address-box ss-m-b-14 ss-r-b-10" @tap="onSelectAddress">
|
||||
<s-address-item :item="state.addressInfo" :hasBorderBottom="false">
|
||||
<view class="ss-rest-button">
|
||||
<text class="_icon-forward" />
|
||||
</view>
|
||||
</s-address-item>
|
||||
</view>
|
||||
<!-- 头部地址选择【配送地址】【自提地址】 -->
|
||||
<AddressSelection v-model="addressState" />
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="order-card-box ss-m-b-14">
|
||||
|
|
@ -46,26 +40,89 @@
|
|||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- TODO 芋艿:接入积分 -->
|
||||
<view
|
||||
v-if="state.orderPayload.pointActivityId"
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="state.orderPayload.order_type === 'score'"
|
||||
>
|
||||
<view class="item-title">扣除积分</view>
|
||||
<view class="item-title">兑换积分</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||
class="score-img"
|
||||
/>
|
||||
<text class="item-value ss-m-r-24">{{ state.orderInfo.score_amount }}</text>
|
||||
<text class="item-value ss-m-r-24">
|
||||
{{ state.orderInfo.usePoint }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between">
|
||||
<view
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="state.orderInfo.type === 0 || state.orderPayload.pointActivityId"
|
||||
>
|
||||
<view class="item-title">积分抵扣</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
{{ state.pointStatus || state.orderPayload.pointActivityId ? '剩余积分' : '当前积分' }}
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||
class="score-img"
|
||||
/>
|
||||
<text class="item-value ss-m-r-24">
|
||||
{{
|
||||
state.pointStatus || state.orderPayload.pointActivityId
|
||||
? state.orderInfo.totalPoint - state.orderInfo.usePoint
|
||||
: state.orderInfo.totalPoint || 0
|
||||
}}
|
||||
</text>
|
||||
<checkbox-group @change="changeIntegral" v-if="!state.orderPayload.pointActivityId">
|
||||
<checkbox
|
||||
:checked="state.pointStatus"
|
||||
:disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0"
|
||||
/>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 快递配置时,信息的展示 -->
|
||||
<view
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="addressState.deliveryType === 1"
|
||||
>
|
||||
<view class="item-title">运费</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="item-value ss-m-r-24">
|
||||
<text class="item-value ss-m-r-24" v-if="state.orderInfo.price.deliveryPrice > 0">
|
||||
+¥{{ fen2yuan(state.orderInfo.price.deliveryPrice) }}
|
||||
</text>
|
||||
<view class="item-value ss-m-r-24" v-else>免运费</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 门店自提时,需要填写姓名和手机号 -->
|
||||
<view
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="addressState.deliveryType === 2"
|
||||
>
|
||||
<view class="item-title">联系人</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<uni-easyinput
|
||||
maxlength="20"
|
||||
placeholder="请填写您的联系姓名"
|
||||
v-model="addressState.receiverName"
|
||||
:inputBorder="false"
|
||||
:clearable="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="addressState.deliveryType === 2"
|
||||
>
|
||||
<view class="item-title">联系电话</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<uni-easyinput
|
||||
maxlength="20"
|
||||
placeholder="请填写您的联系电话"
|
||||
v-model="addressState.receiverMobile"
|
||||
:inputBorder="false"
|
||||
:clearable="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 优惠劵:只有 type = 0 普通订单(非拼团、秒杀、砍价),才可以使用优惠劵 -->
|
||||
|
|
@ -80,11 +137,17 @@
|
|||
</text>
|
||||
<text
|
||||
class="item-value"
|
||||
:class="state.couponInfo.length > 0 ? 'text-red' : 'text-disabled'"
|
||||
:class="
|
||||
state.couponInfo.filter((coupon) => coupon.match).length > 0
|
||||
? 'text-red'
|
||||
: 'text-disabled'
|
||||
"
|
||||
v-else
|
||||
>
|
||||
{{
|
||||
state.couponInfo.length > 0 ? state.couponInfo.length + ' 张可用' : '暂无可用优惠券'
|
||||
state.couponInfo.filter((coupon) => coupon.match).length > 0
|
||||
? state.couponInfo.filter((coupon) => coupon.match).length + ' 张可用'
|
||||
: '暂无可用优惠券'
|
||||
}}
|
||||
</text>
|
||||
<text class="_icon-forward item-icon" />
|
||||
|
|
@ -95,8 +158,7 @@
|
|||
v-if="state.orderInfo.price.discountPrice > 0"
|
||||
>
|
||||
<view class="item-title">活动优惠</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<!-- @tap="state.showDiscount = true" TODO 芋艿:后续要把优惠信息打进去 -->
|
||||
<view class="ss-flex ss-col-center" @tap="state.showDiscount = true">
|
||||
<text class="item-value text-red">
|
||||
-¥{{ fen2yuan(state.orderInfo.price.discountPrice) }}
|
||||
</text>
|
||||
|
|
@ -120,7 +182,7 @@
|
|||
共{{ state.orderInfo.items.reduce((acc, item) => acc + item.count, 0) }}件
|
||||
</view>
|
||||
<view>合计:</view>
|
||||
<view class="total-num text-red"> ¥{{ fen2yuan(state.orderInfo.price.payPrice) }} </view>
|
||||
<view class="total-num text-red"> ¥{{ fen2yuan(state.orderInfo.price.payPrice) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -132,7 +194,7 @@
|
|||
@close="state.showCoupon = false"
|
||||
/>
|
||||
|
||||
<!-- 满额折扣弹框 TODO 芋艿:后续要把优惠信息打进去 -->
|
||||
<!-- 满额折扣弹框 -->
|
||||
<s-discount-list
|
||||
v-model="state.orderInfo"
|
||||
:show="state.showDiscount"
|
||||
|
|
@ -159,13 +221,14 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import AddressSelection from '@/pages/order/addressSelection.vue';
|
||||
import sheep from '@/sheep';
|
||||
import { isEmpty } from 'lodash';
|
||||
import OrderApi from '@/sheep/api/trade/order';
|
||||
import CouponApi from '@/sheep/api/promotion/coupon';
|
||||
import TradeConfigApi from '@/sheep/api/trade/config';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import { DeliveryTypeEnum } from '@/sheep/helper/const';
|
||||
|
||||
const state = reactive({
|
||||
orderPayload: {},
|
||||
|
|
@ -173,41 +236,62 @@
|
|||
items: [], // 商品项列表
|
||||
price: {}, // 价格信息
|
||||
},
|
||||
addressInfo: {}, // 选择的收货地址
|
||||
showCoupon: false, // 是否展示优惠劵
|
||||
couponInfo: [], // 优惠劵列表
|
||||
showDiscount: false, // 是否展示营销活动
|
||||
// ========== 积分 ==========
|
||||
pointStatus: false, //是否使用积分
|
||||
});
|
||||
|
||||
// 选择地址
|
||||
function onSelectAddress() {
|
||||
uni.$once('SELECT_ADDRESS', (e) => {
|
||||
changeConsignee(e.addressInfo);
|
||||
const addressState = ref({
|
||||
addressInfo: {}, // 选择的收货地址
|
||||
deliveryType: undefined, // 收货方式:1-快递配送,2-门店自提
|
||||
isPickUp: true, // 门店自提是否开启
|
||||
pickUpInfo: {}, // 选择的自提门店信息
|
||||
receiverName: '', // 收件人名称
|
||||
receiverMobile: '', // 收件人手机
|
||||
});
|
||||
sheep.$router.go('/pages/user/address/list');
|
||||
}
|
||||
|
||||
// 更改收货人地址&计算订单信息
|
||||
async function changeConsignee(addressInfo = {}) {
|
||||
if (!isEmpty(addressInfo)) {
|
||||
state.addressInfo = addressInfo;
|
||||
}
|
||||
// ========== 积分 ==========
|
||||
/**
|
||||
* 使用积分抵扣
|
||||
*/
|
||||
const changeIntegral = async () => {
|
||||
state.pointStatus = !state.pointStatus;
|
||||
await getOrderInfo();
|
||||
}
|
||||
};
|
||||
|
||||
// 选择优惠券
|
||||
async function onSelectCoupon(couponId) {
|
||||
state.orderPayload.couponId = couponId || 0;
|
||||
state.orderPayload.couponId = couponId;
|
||||
await getOrderInfo();
|
||||
state.showCoupon = false;
|
||||
}
|
||||
|
||||
// 提交订单
|
||||
function onConfirm() {
|
||||
if (!state.addressInfo.id) {
|
||||
if (addressState.value.deliveryType === 1 && !addressState.value.addressInfo.id) {
|
||||
sheep.$helper.toast('请选择收货地址');
|
||||
return;
|
||||
}
|
||||
if (addressState.value.deliveryType === 2) {
|
||||
if (!addressState.value.pickUpInfo.id) {
|
||||
sheep.$helper.toast('请选择自提门店地址');
|
||||
return;
|
||||
}
|
||||
if (addressState.value.receiverName === '' || addressState.value.receiverMobile === '') {
|
||||
sheep.$helper.toast('请填写联系人或联系人电话');
|
||||
return;
|
||||
}
|
||||
if (!/^[\u4e00-\u9fa5\w]{2,16}$/.test(addressState.value.receiverName)) {
|
||||
sheep.$helper.toast('请填写您的真实姓名');
|
||||
return;
|
||||
}
|
||||
if (!/^1(3|4|5|7|8|9|6)\d{9}$/.test(addressState.value.receiverMobile)) {
|
||||
sheep.$helper.toast('请填写正确的手机号');
|
||||
return;
|
||||
}
|
||||
}
|
||||
submitOrder();
|
||||
}
|
||||
|
||||
|
|
@ -216,12 +300,17 @@
|
|||
const { code, data } = await OrderApi.createOrder({
|
||||
items: state.orderPayload.items,
|
||||
couponId: state.orderPayload.couponId,
|
||||
addressId: state.addressInfo.id,
|
||||
deliveryType: 1, // TODO 芋艿:需要支持【门店自提】
|
||||
pointStatus: false, // TODO 芋艿:需要支持【积分选择】
|
||||
remark: state.orderPayload.remark,
|
||||
deliveryType: addressState.value.deliveryType,
|
||||
addressId: addressState.value.addressInfo.id, // 收件地址编号
|
||||
pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号
|
||||
receiverName: addressState.value.receiverName, // 选择门店自提时,该字段为联系人名
|
||||
receiverMobile: addressState.value.receiverMobile, // 选择门店自提时,该字段为联系人手机
|
||||
pointStatus: state.pointStatus,
|
||||
combinationActivityId: state.orderPayload.combinationActivityId,
|
||||
combinationHeadId: state.orderPayload.combinationHeadId,
|
||||
seckillActivityId: state.orderPayload.seckillActivityId
|
||||
seckillActivityId: state.orderPayload.seckillActivityId,
|
||||
pointActivityId: state.orderPayload.pointActivityId,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
|
|
@ -230,10 +319,17 @@
|
|||
if (state.orderPayload.items[0].cartId > 0) {
|
||||
sheep.$store('cart').getList();
|
||||
}
|
||||
|
||||
// 跳转到支付页面
|
||||
if (data.payOrderId && data.payOrderId > 0) {
|
||||
sheep.$router.redirect('/pages/pay/index', {
|
||||
id: data.payOrderId,
|
||||
});
|
||||
} else {
|
||||
sheep.$router.redirect('/pages/order/detail', {
|
||||
id: data.id,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 检查库存 & 计算订单价格
|
||||
|
|
@ -242,44 +338,72 @@
|
|||
const { data, code } = await OrderApi.settlementOrder({
|
||||
items: state.orderPayload.items,
|
||||
couponId: state.orderPayload.couponId,
|
||||
addressId: state.addressInfo.id,
|
||||
deliveryType: 1, // TODO 芋艿:需要支持【门店自提】
|
||||
pointStatus: false, // TODO 芋艿:需要支持【积分选择】
|
||||
deliveryType: addressState.value.deliveryType,
|
||||
addressId: addressState.value.addressInfo.id, // 收件地址编号
|
||||
pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号
|
||||
receiverName: addressState.value.receiverName, // 选择门店自提时,该字段为联系人名
|
||||
receiverMobile: addressState.value.receiverMobile, // 选择门店自提时,该字段为联系人手机
|
||||
pointStatus: state.pointStatus,
|
||||
combinationActivityId: state.orderPayload.combinationActivityId,
|
||||
combinationHeadId: state.orderPayload.combinationHeadId,
|
||||
seckillActivityId: state.orderPayload.seckillActivityId
|
||||
seckillActivityId: state.orderPayload.seckillActivityId,
|
||||
pointActivityId: state.orderPayload.pointActivityId,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
return code;
|
||||
}
|
||||
state.orderInfo = data;
|
||||
state.couponInfo = data.coupons || [];
|
||||
// 设置收货地址
|
||||
if (state.orderInfo.address) {
|
||||
state.addressInfo = state.orderInfo.address;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取可用优惠券
|
||||
async function getCoupons() {
|
||||
const { code, data } = await CouponApi.getMatchCouponList(
|
||||
state.orderInfo.price.payPrice,
|
||||
state.orderInfo.items.map((item) => item.spuId),
|
||||
state.orderPayload.items.map((item) => item.skuId),
|
||||
state.orderPayload.items.map((item) => item.categoryId),
|
||||
);
|
||||
if (code === 0) {
|
||||
state.couponInfo = data;
|
||||
addressState.value.addressInfo = state.orderInfo.address;
|
||||
}
|
||||
return code;
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
// 解析参数
|
||||
if (!options.data) {
|
||||
sheep.$helper.toast('参数不正确,请检查!');
|
||||
return;
|
||||
}
|
||||
state.orderPayload = JSON.parse(options.data);
|
||||
|
||||
// 获取交易配置
|
||||
const { data, code } = await TradeConfigApi.getTradeConfig();
|
||||
if (code === 0) {
|
||||
addressState.value.isPickUp = data.deliveryPickUpEnabled;
|
||||
}
|
||||
|
||||
// 价格计算
|
||||
// 情况一:先自动选择“快递物流”
|
||||
addressState.value.deliveryType = DeliveryTypeEnum.EXPRESS.type;
|
||||
let orderCode = await getOrderInfo();
|
||||
if (orderCode === 0) {
|
||||
return;
|
||||
}
|
||||
// 情况二:失败,再自动选择“门店自提”
|
||||
if (addressState.value.isPickUp) {
|
||||
addressState.value.deliveryType = DeliveryTypeEnum.PICK_UP.type;
|
||||
let orderCode = await getOrderInfo();
|
||||
if (orderCode === 0) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 情况三:都失败,则不选择
|
||||
addressState.value.deliveryType = undefined;
|
||||
await getOrderInfo();
|
||||
await getCoupons();
|
||||
});
|
||||
|
||||
// 使用 watch 监听地址和配送方式的变化
|
||||
watch(addressState, async (newAddress, oldAddress) => {
|
||||
// 如果收货地址或配送方式有变化,则重新计算价格
|
||||
if (
|
||||
newAddress.addressInfo.id !== oldAddress.addressInfo.id ||
|
||||
newAddress.deliveryType !== oldAddress.deliveryType
|
||||
) {
|
||||
await getOrderInfo();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<!-- 订单详情 -->
|
||||
<template>
|
||||
<s-layout title="订单详情" class="index-wrap" navbar="inner">
|
||||
<!-- 订单状态 TODO -->
|
||||
<view
|
||||
class="state-box ss-flex-col ss-col-center ss-row-right"
|
||||
:style="[
|
||||
|
|
@ -12,42 +11,41 @@
|
|||
]"
|
||||
>
|
||||
<view class="ss-flex ss-m-t-32 ss-m-b-20">
|
||||
<!-- 待支付 -->
|
||||
<image
|
||||
v-if="
|
||||
state.orderInfo.status_code == 'unpaid' ||
|
||||
state.orderInfo.status === 10 || // 待发货
|
||||
state.orderInfo.status_code == 'nocomment'
|
||||
"
|
||||
v-if="state.orderInfo.status === 0"
|
||||
class="state-img"
|
||||
:src="sheep.$url.static('/static/img/shop/order/no_pay.png')"
|
||||
/>
|
||||
<!-- 待发货 -->
|
||||
<image
|
||||
v-if="state.orderInfo.status === 10"
|
||||
class="state-img"
|
||||
:src="sheep.$url.static('/static/img/shop/order/order_loading.png')"
|
||||
>
|
||||
</image>
|
||||
/>
|
||||
<!-- 已完成 -->
|
||||
<image
|
||||
v-if="
|
||||
state.orderInfo.status_code == 'completed' ||
|
||||
state.orderInfo.status_code == 'refund_agree'
|
||||
"
|
||||
v-else-if="state.orderInfo.status === 30"
|
||||
class="state-img"
|
||||
:src="sheep.$url.static('/static/img/shop/order/order_success.png')"
|
||||
>
|
||||
</image>
|
||||
/>
|
||||
<!-- 已关闭 -->
|
||||
<image
|
||||
v-if="state.orderInfo.status_code == 'cancel' || state.orderInfo.status_code == 'closed'"
|
||||
v-else-if="state.orderInfo.status === 40"
|
||||
class="state-img"
|
||||
:src="sheep.$url.static('/static/img/shop/order/order_close.png')"
|
||||
>
|
||||
</image>
|
||||
/>
|
||||
<!-- 已发货 -->
|
||||
<image
|
||||
v-if="state.orderInfo.status_code == 'noget'"
|
||||
v-else-if="state.orderInfo.status === 20"
|
||||
class="state-img"
|
||||
:src="sheep.$url.static('/static/img/shop/order/order_express.png')"
|
||||
>
|
||||
</image>
|
||||
/>
|
||||
<view class="ss-font-30">{{ formatOrderStatus(state.orderInfo) }}</view>
|
||||
</view>
|
||||
<view class="ss-font-26 ss-m-x-20 ss-m-b-70">{{
|
||||
formatOrderStatusDescription(state.orderInfo)
|
||||
}}</view>
|
||||
<view class="ss-font-26 ss-m-x-20 ss-m-b-70">
|
||||
{{ formatOrderStatusDescription(state.orderInfo) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 收货地址 -->
|
||||
|
|
@ -126,6 +124,13 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 自提核销 -->
|
||||
<PickUpVerify
|
||||
:order-info="state.orderInfo"
|
||||
:systemStore="systemStore"
|
||||
ref="pickUpVerifyRef"
|
||||
></PickUpVerify>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="notice-box">
|
||||
<view class="notice-box__content">
|
||||
|
|
@ -167,11 +172,14 @@
|
|||
<text class="title">运费</text>
|
||||
<text class="detail">¥{{ fen2yuan(state.orderInfo.deliveryPrice) }}</text>
|
||||
</view>
|
||||
<!-- TODO 芋艿:优惠劵抵扣、积分抵扣 -->
|
||||
<view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.couponPrice > 0">
|
||||
<text class="title">优惠劵金额</text>
|
||||
<text class="detail">-¥{{ fen2yuan(state.orderInfo.couponPrice) }}</text>
|
||||
</view>
|
||||
<view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.pointPrice > 0">
|
||||
<text class="title">积分抵扣</text>
|
||||
<text class="detail">-¥{{ fen2yuan(state.orderInfo.pointPrice) }}</text>
|
||||
</view>
|
||||
<view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.discountPrice > 0">
|
||||
<text class="title">活动优惠</text>
|
||||
<text class="detail">¥{{ fen2yuan(state.orderInfo.discountPrice) }}</text>
|
||||
|
|
@ -250,9 +258,9 @@
|
|||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { isEmpty } from 'lodash-es';
|
||||
import {
|
||||
fen2yuan,
|
||||
formatOrderStatus,
|
||||
|
|
@ -260,6 +268,8 @@
|
|||
handleOrderButtons,
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import OrderApi from '@/sheep/api/trade/order';
|
||||
import DeliveryApi from '@/sheep/api/trade/delivery';
|
||||
import PickUpVerify from '@/pages/order/pickUpVerify.vue';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
|
||||
|
|
@ -270,9 +280,12 @@
|
|||
comeinType: '', // 进入订单详情的来源类型
|
||||
});
|
||||
|
||||
// ========== 门店自提(核销) ==========
|
||||
const systemStore = ref({}); // 门店信息
|
||||
|
||||
// 复制
|
||||
const onCopy = () => {
|
||||
sheep.$helper.copyText(state.orderInfo.sn);
|
||||
sheep.$helper.copyText(state.orderInfo.no);
|
||||
};
|
||||
|
||||
// 去支付
|
||||
|
|
@ -313,10 +326,10 @@
|
|||
});
|
||||
}
|
||||
|
||||
// 确认收货 TODO 芋艿:待测试
|
||||
// 确认收货
|
||||
async function onConfirm(orderId, ignore = false) {
|
||||
// 需开启确认收货组件
|
||||
// todo: 芋艿:待接入微信
|
||||
// todo: 芋艿:【微信物流】待接入微信 https://gitee.com/sheepjs/shopro-uniapp/commit/a6bbba49b84dd418b84c5fefc8b7463df8f4901f
|
||||
// 1.怎么检测是否开启了发货组件功能?如果没有开启的话就不能在这里return出去
|
||||
// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
|
||||
let isOpenBusinessView = true;
|
||||
|
|
@ -330,11 +343,20 @@
|
|||
return;
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认收货吗?',
|
||||
success: async function (res) {
|
||||
if (!res.confirm) {
|
||||
return;
|
||||
}
|
||||
// 正常的确认收货流程
|
||||
const { code } = await OrderApi.receiveOrder(orderId);
|
||||
if (code === 0) {
|
||||
await getOrderDetail(orderId);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
|
|
@ -366,45 +388,61 @@
|
|||
},
|
||||
});
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// 评价
|
||||
function onComment(id) {
|
||||
sheep.$router.go('/pages/goods/comment/add', {
|
||||
id
|
||||
id,
|
||||
});
|
||||
}
|
||||
|
||||
const pickUpVerifyRef = ref();
|
||||
|
||||
async function getOrderDetail(id) {
|
||||
// 对详情数据进行适配
|
||||
let res;
|
||||
if (state.comeinType === 'wechat') {
|
||||
// TODO 芋艿:微信场景下
|
||||
res = await OrderApi.getOrder(id, {
|
||||
// TODO 芋艿:【微信物流】微信场景下
|
||||
res = await OrderApi.getOrderDetail(id, {
|
||||
merchant_trade_no: state.merchantTradeNo,
|
||||
});
|
||||
} else {
|
||||
res = await OrderApi.getOrder(id);
|
||||
res = await OrderApi.getOrderDetail(id);
|
||||
}
|
||||
if (res.code === 0) {
|
||||
state.orderInfo = res.data;
|
||||
handleOrderButtons(state.orderInfo);
|
||||
// 配送方式:门店自提
|
||||
if (res.data.pickUpStoreId) {
|
||||
const { data } = await DeliveryApi.getDeliveryPickUpStore(res.data.pickUpStoreId);
|
||||
systemStore.value = data || {};
|
||||
}
|
||||
if (state.orderInfo.deliveryType === 2 && state.orderInfo.payStatus) {
|
||||
pickUpVerifyRef.value && pickUpVerifyRef.value.markCode(res.data.pickUpVerifyCode);
|
||||
}
|
||||
} else {
|
||||
sheep.$router.back();
|
||||
}
|
||||
}
|
||||
|
||||
onShow(async () => {
|
||||
//onShow中获取订单列表,保证跳转后页面为最新状态
|
||||
await getOrderDetail(state.orderInfo.id);
|
||||
});
|
||||
|
||||
onLoad(async (options) => {
|
||||
let id = 0;
|
||||
if (options.id) {
|
||||
id = options.id;
|
||||
}
|
||||
// TODO 芋艿:下面两个变量,后续接入
|
||||
// TODO 芋艿:【微信物流】下面两个变量,后续接入
|
||||
state.comeinType = options.comein_type;
|
||||
if (state.comeinType === 'wechat') {
|
||||
state.merchantTradeNo = options.merchant_trade_no;
|
||||
}
|
||||
await getOrderDetail(id);
|
||||
state.orderInfo.id = id;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
<view class="log-card-msg">
|
||||
<!-- TODO 芋艿:优化点:展示状态 -->
|
||||
<!-- <view class="ss-flex ss-m-b-8">-->
|
||||
<!-- <view>物流状态:</view>-->
|
||||
<!-- <view class="warning-color">{{ state.info.status_text }}</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- TODO 芋艿:【物流】优化点:展示状态 -->
|
||||
<!-- <view class="ss-flex ss-m-b-8">-->
|
||||
<!-- <view>物流状态:</view>-->
|
||||
<!-- <view class="warning-color">{{ state.info.status_text }}</view>-->
|
||||
<!-- </view>-->
|
||||
<view class="ss-m-b-8">快递单号:{{ state.info.logisticsNo }}</view>
|
||||
<view>快递公司:{{ state.info.logisticsName }}</view>
|
||||
</view>
|
||||
|
|
@ -34,11 +34,15 @@
|
|||
<view v-if="state.tracks.length - 1 !== index" class="line" />
|
||||
</view>
|
||||
<view class="log-content-msg">
|
||||
<!-- TODO 芋艿:优化点:展示状态 -->
|
||||
<!-- <view class="log-msg-title ss-m-b-20">-->
|
||||
<!-- {{ item.status_text }}-->
|
||||
<!-- </view>-->
|
||||
<view class="log-msg-desc ss-m-b-16">{{ item.content }}</view>
|
||||
<!-- TODO 芋艿:【物流】优化点:展示状态 -->
|
||||
<!-- <view class="log-msg-title ss-m-b-20">-->
|
||||
<!-- {{ item.status_text }}-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="log-msg-desc ss-m-b-16">{{ item.content }}</view>-->
|
||||
<view class="log-msg-desc ss-m-b-16">
|
||||
<highlight-number :content="item.content" @phone-click="handlePhoneClick" />
|
||||
<!-- <rich-text :nodes="item.content"></rich-text>-->
|
||||
</view>
|
||||
<view class="log-msg-date ss-m-b-40">
|
||||
{{ sheep.$helper.timeFormat(item.time, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</view>
|
||||
|
|
@ -54,6 +58,7 @@
|
|||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import OrderApi from '@/sheep/api/trade/order';
|
||||
import HighlightNumber from '@/pages/components/HighlightNumberText.vue';
|
||||
|
||||
const state = reactive({
|
||||
info: [],
|
||||
|
|
@ -74,11 +79,11 @@
|
|||
|
||||
async function getExpressDetail(id) {
|
||||
const { data } = await OrderApi.getOrderExpressTrackList(id);
|
||||
state.tracks = data.reverse();
|
||||
state.tracks = data;
|
||||
}
|
||||
|
||||
async function getOrderDetail(id) {
|
||||
const { data } = await OrderApi.getOrder(id)
|
||||
const { data } = await OrderApi.getOrderDetail(id);
|
||||
state.info = data;
|
||||
}
|
||||
|
||||
|
|
@ -86,53 +91,117 @@
|
|||
getExpressDetail(options.id);
|
||||
getOrderDetail(options.id);
|
||||
});
|
||||
|
||||
function handlePhoneClick(data) {
|
||||
handleClick(data);
|
||||
}
|
||||
|
||||
function handleClick(data) {
|
||||
const phoneNumber = data.phoneNumber;
|
||||
|
||||
if (!phoneNumber) return;
|
||||
|
||||
// 获取当前平台
|
||||
const platform = uni.getSystemInfoSync().platform.toLowerCase();
|
||||
|
||||
if (platform === 'devtools') {
|
||||
uni.showToast({ title: '真机才可拨打电话', icon: 'none' });
|
||||
handleCopy(phoneNumber);
|
||||
return;
|
||||
}
|
||||
|
||||
if (platform === 'wechat') {
|
||||
uni.showToast({ title: '请手动拨打', icon: 'none' });
|
||||
handleCopy(phoneNumber);
|
||||
return;
|
||||
}
|
||||
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phoneNumber,
|
||||
success: () => {
|
||||
console.log('拨打电话成功');
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('拨打电话失败', err);
|
||||
uni.showToast({ title: '拨号失败,请手动拨打', icon: 'none' });
|
||||
handleCopy(phoneNumber);
|
||||
},
|
||||
});
|
||||
}
|
||||
function handleCopy(text) {
|
||||
uni.setClipboardData({
|
||||
data: text,
|
||||
success: () => {
|
||||
uni.showToast({ title: '已复制到剪贴板', icon: 'success' });
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: '复制失败', icon: 'none' });
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.highlight {
|
||||
color: red; /* 高亮颜色 */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.log-card {
|
||||
border-top: 2rpx solid rgba(#dfdfdf, 0.5);
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.log-card-img {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.log-card-msg {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
width: 490rpx;
|
||||
color: #333333;
|
||||
|
||||
.warning-color {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.log-content {
|
||||
padding: 34rpx 20rpx 0rpx 20rpx;
|
||||
background: #fff;
|
||||
|
||||
.log-content-box {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.log-icon {
|
||||
height: inherit;
|
||||
|
||||
.cicon-title {
|
||||
color: #ccc;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.activity-color {
|
||||
color: #f0c785;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.info-color {
|
||||
color: #ccc;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
|
|
@ -146,16 +215,18 @@
|
|||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.log-msg-desc {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.log-msg-date {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,21 @@
|
|||
<template>
|
||||
<s-layout title="我的订单">
|
||||
<su-sticky bgColor="#fff">
|
||||
<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" />
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
:scrollable="false"
|
||||
@change="onTabsChange"
|
||||
:current="state.currentTab"
|
||||
/>
|
||||
</su-sticky>
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
|
||||
<view v-if="state.pagination.total > 0">
|
||||
<view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20" v-for="order in state.pagination.list"
|
||||
:key="order.id" @tap="onOrderDetail(order.id)">
|
||||
<view
|
||||
class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
|
||||
v-for="order in state.pagination.list"
|
||||
:key="order.id"
|
||||
@tap="onOrderDetail(order.id)"
|
||||
>
|
||||
<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
|
||||
<view class="order-no">订单号:{{ order.no }}</view>
|
||||
<view class="order-state ss-font-26" :class="formatOrderColor(order)">
|
||||
|
|
@ -25,45 +34,71 @@
|
|||
</view>
|
||||
<view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="discounts-title pay-color">共 {{ order.productCount }} 件商品,总金额:</view>
|
||||
<view class="discounts-money pay-color">
|
||||
¥{{ fen2yuan(order.payPrice) }}
|
||||
<view class="discounts-title pay-color"
|
||||
>共 {{ order.productCount }} 件商品,总金额:</view
|
||||
>
|
||||
<view class="discounts-money pay-color"> ¥{{ fen2yuan(order.payPrice) }} </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-card-footer ss-flex ss-col-center ss-p-x-20"
|
||||
:class="order.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'">
|
||||
<view
|
||||
class="order-card-footer ss-flex ss-col-center ss-p-x-20"
|
||||
:class="order.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'"
|
||||
>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<button v-if="order.buttons.includes('combination')" class="tool-btn ss-reset-button"
|
||||
@tap.stop="onOrderGroupon(order)">
|
||||
<button
|
||||
v-if="order.buttons.includes('combination')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onOrderGroupon(order)"
|
||||
>
|
||||
拼团详情
|
||||
</button>
|
||||
<button v-if="order.buttons.length === 0" class="tool-btn ss-reset-button"
|
||||
@tap.stop="onOrderDetail(order.id)">
|
||||
<button
|
||||
v-if="order.buttons.length === 0"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onOrderDetail(order.id)"
|
||||
>
|
||||
查看详情
|
||||
</button>
|
||||
<button v-if="order.buttons.includes('confirm')" class="tool-btn ss-reset-button"
|
||||
@tap.stop="onConfirm(order)">
|
||||
<button
|
||||
v-if="order.buttons.includes('confirm')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onConfirm(order)"
|
||||
>
|
||||
确认收货
|
||||
</button>
|
||||
<button v-if="order.buttons.includes('express')" class="tool-btn ss-reset-button"
|
||||
@tap.stop="onExpress(order.id)">
|
||||
<button
|
||||
v-if="order.buttons.includes('express')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onExpress(order.id)"
|
||||
>
|
||||
查看物流
|
||||
</button>
|
||||
<button v-if="order.buttons.includes('cancel')" class="tool-btn ss-reset-button"
|
||||
@tap.stop="onCancel(order.id)">
|
||||
<button
|
||||
v-if="order.buttons.includes('cancel')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onCancel(order.id)"
|
||||
>
|
||||
取消订单
|
||||
</button>
|
||||
<button v-if="order.buttons.includes('comment')" class="tool-btn ss-reset-button"
|
||||
@tap.stop="onComment(order.id)">
|
||||
<button
|
||||
v-if="order.buttons.includes('comment')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onComment(order.id)"
|
||||
>
|
||||
评价
|
||||
</button>
|
||||
<button v-if="order.buttons.includes('delete')" class="delete-btn ss-reset-button"
|
||||
@tap.stop="onDelete(order.id)">
|
||||
<button
|
||||
v-if="order.buttons.includes('delete')"
|
||||
class="delete-btn ss-reset-button"
|
||||
@tap.stop="onDelete(order.id)"
|
||||
>
|
||||
删除订单
|
||||
</button>
|
||||
<button v-if="order.buttons.includes('pay')" class="tool-btn ss-reset-button ui-BG-Main-Gradient"
|
||||
@tap.stop="onPay(order.payOrderId)">
|
||||
<button
|
||||
v-if="order.buttons.includes('pay')"
|
||||
class="tool-btn ss-reset-button ui-BG-Main-Gradient"
|
||||
@tap.stop="onPay(order.payOrderId)"
|
||||
>
|
||||
继续支付
|
||||
</button>
|
||||
</view>
|
||||
|
|
@ -72,9 +107,14 @@
|
|||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}" @tap="loadMore" />
|
||||
}"
|
||||
@tap="loadMore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
|
|
@ -83,15 +123,15 @@
|
|||
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import {
|
||||
fen2yuan,
|
||||
formatOrderColor, formatOrderStatus, handleOrderButtons,
|
||||
formatOrderColor,
|
||||
formatOrderStatus,
|
||||
handleOrderButtons,
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
isEmpty
|
||||
} from 'lodash';
|
||||
import _ from 'lodash-es';
|
||||
import { isEmpty } from 'lodash-es';
|
||||
import OrderApi from '@/sheep/api/trade/order';
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
import { resetPagination } from '@/sheep/helper/utils';
|
||||
|
||||
// 数据
|
||||
const state = reactive({
|
||||
|
|
@ -102,11 +142,12 @@
|
|||
pageNo: 1,
|
||||
pageSize: 5,
|
||||
},
|
||||
loadStatus: ''
|
||||
loadStatus: '',
|
||||
});
|
||||
|
||||
const tabMaps = [{
|
||||
name: '全部'
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '全部',
|
||||
},
|
||||
{
|
||||
name: '待付款',
|
||||
|
|
@ -165,10 +206,10 @@
|
|||
});
|
||||
}
|
||||
|
||||
// 确认收货 TODO 芋艿:待测试
|
||||
// 确认收货
|
||||
async function onConfirm(order, ignore = false) {
|
||||
// 需开启确认收货组件
|
||||
// todo: 芋艿:需要后续接入微信收货组件
|
||||
// todo: 芋艿:【微信物流】需要后续接入微信收货组件 https://gitee.com/sheepjs/shopro-uniapp/commit/a6bbba49b84dd418b84c5fefc8b7463df8f4901f
|
||||
// 1.怎么检测是否开启了发货组件功能?如果没有开启的话就不能在这里return出去
|
||||
// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
|
||||
let isOpenBusinessView = true;
|
||||
|
|
@ -182,16 +223,25 @@
|
|||
return;
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认收货吗?',
|
||||
success: async function (res) {
|
||||
if (!res.confirm) {
|
||||
return;
|
||||
}
|
||||
// 正常的确认收货流程
|
||||
const { code } = await OrderApi.receiveOrder(order.id);
|
||||
if (code === 0) {
|
||||
resetPagination(state.pagination);
|
||||
await getOrderList();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序确认收货组件 TODO 芋艿:后续再接入
|
||||
// 小程序确认收货组件 TODO 芋艿:【微信物流】后续再接入
|
||||
function mpConfirm(order) {
|
||||
if (!wx.openBusinessView) {
|
||||
sheep.$helper.toast(`请升级微信版本`);
|
||||
|
|
@ -234,7 +284,7 @@
|
|||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要取消订单吗?',
|
||||
success: async function(res) {
|
||||
success: async function (res) {
|
||||
if (!res.confirm) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -255,7 +305,7 @@
|
|||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除订单吗?',
|
||||
success: async function(res) {
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const { code } = await OrderApi.deleteOrder(orderId);
|
||||
if (code === 0) {
|
||||
|
|
@ -275,13 +325,13 @@
|
|||
pageNo: state.pagination.pageNo,
|
||||
pageSize: state.pagination.pageSize,
|
||||
status: tabMaps[state.currentTab].value,
|
||||
commentStatus: tabMaps[state.currentTab].value === 30 ? false : null
|
||||
commentStatus: tabMaps[state.currentTab].value === 30 ? false : null,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
data.list.forEach(order => handleOrderButtons(order));
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list)
|
||||
data.list.forEach((order) => handleOrderButtons(order));
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
}
|
||||
|
|
@ -296,7 +346,7 @@
|
|||
// 加载更多
|
||||
function loadMore() {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return
|
||||
return;
|
||||
}
|
||||
state.pagination.pageNo++;
|
||||
getOrderList();
|
||||
|
|
@ -311,7 +361,7 @@
|
|||
onPullDownRefresh(() => {
|
||||
resetPagination(state.pagination);
|
||||
getOrderList();
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 800);
|
||||
});
|
||||
|
|
@ -380,7 +430,8 @@
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.order-state {}
|
||||
.order-state {
|
||||
}
|
||||
}
|
||||
|
||||
.pay-box {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,260 @@
|
|||
<template>
|
||||
<view class="order-details">
|
||||
<!-- 自提商品核销 -->
|
||||
<view v-if="orderInfo.deliveryType === 2 && orderInfo.payStatus" class="writeOff borRadius14">
|
||||
<view class="title">核销信息</view>
|
||||
<view class="grayBg flex-center">
|
||||
<view class="pictrue">
|
||||
<image
|
||||
v-if="!!painterImageUrl"
|
||||
:src="painterImageUrl"
|
||||
:style="{ width: `${state.qrcodeSize}px`, height: `${state.qrcodeSize}px` }"
|
||||
:show-menu-by-longpress="true"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="gear">
|
||||
<image :src="sheep.$url.static('/static/img/shop/writeOff.png')"></image>
|
||||
</view>
|
||||
<view class="num">{{ orderInfo.pickUpVerifyCode }}</view>
|
||||
<view class="rules">
|
||||
<view class="item">
|
||||
<view class="rulesTitle flex flex-wrap align-center"> 核销时间 </view>
|
||||
<view class="info">
|
||||
每日:
|
||||
<text class="time">{{ systemStore.openingTime }} - {{ systemStore.closingTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="rulesTitle flex flex-wrap align-center">
|
||||
<text class="iconfont icon-shuoming1"></text>
|
||||
使用说明
|
||||
</view>
|
||||
<view class="info">可将二维码出示给店员扫描或提供数字核销码</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="orderInfo.deliveryType === 2"
|
||||
class="map flex flex-wrap align-center ss-row-between borRadius14"
|
||||
>
|
||||
<view>自提地址信息</view>
|
||||
<view class="place cart-color flex flex-wrap flex-center" @tap="showMaoLocation">
|
||||
查看位置
|
||||
</view>
|
||||
</view>
|
||||
<!-- 海报画板:默认隐藏只用来生成海报。生成方式为主动调用 -->
|
||||
<l-painter
|
||||
v-if="showPainter"
|
||||
isCanvasToTempFilePath
|
||||
pathType="url"
|
||||
@success="setPainterImageUrl"
|
||||
hidden
|
||||
ref="painterRef"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
orderInfo: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
systemStore: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
const state = reactive({
|
||||
qrcodeSize: 145,
|
||||
});
|
||||
|
||||
/**
|
||||
* 打开地图
|
||||
*/
|
||||
const showMaoLocation = () => {
|
||||
if (!props.systemStore.latitude || !props.systemStore.longitude) {
|
||||
sheep.$helper.toast('缺少经纬度信息无法查看地图!');
|
||||
return;
|
||||
}
|
||||
uni.openLocation({
|
||||
latitude: props.systemStore.latitude,
|
||||
longitude: props.systemStore.longitude,
|
||||
scale: 8,
|
||||
name: props.systemStore.name,
|
||||
address: props.systemStore.areaName + props.systemStore.detailAddress,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 拨打电话
|
||||
*/
|
||||
const makePhone = () => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: props.systemStore.phone,
|
||||
});
|
||||
};
|
||||
|
||||
const painterRef = ref(); // 海报画板
|
||||
const painterImageUrl = ref(); // 海报 url
|
||||
const showPainter = ref(true);
|
||||
// 渲染海报
|
||||
const renderPoster = async (poster) => {
|
||||
await painterRef.value.render(poster);
|
||||
};
|
||||
// 获得生成的图片
|
||||
const setPainterImageUrl = (path) => {
|
||||
painterImageUrl.value = path;
|
||||
showPainter.value = false;
|
||||
};
|
||||
/**
|
||||
* 生成核销二维码
|
||||
*/
|
||||
const markCode = (text) => {
|
||||
renderPoster({
|
||||
css: {
|
||||
width: `${state.qrcodeSize}px`,
|
||||
height: `${state.qrcodeSize}px`,
|
||||
},
|
||||
views: [
|
||||
{
|
||||
type: 'qrcode',
|
||||
text: text,
|
||||
css: {
|
||||
width: `${state.qrcodeSize}px`,
|
||||
height: `${state.qrcodeSize}px`,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
defineExpose({
|
||||
markCode,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.borRadius14 {
|
||||
border-radius: 14rpx !important;
|
||||
}
|
||||
.cart-color {
|
||||
color: #e93323 !important;
|
||||
border: 1px solid #e93323 !important;
|
||||
}
|
||||
.order-details {
|
||||
border-radius: 10rpx;
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
}
|
||||
.order-details .writeOff {
|
||||
background-color: #fff;
|
||||
margin-top: 15rpx;
|
||||
padding-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .title {
|
||||
font-size: 30rpx;
|
||||
color: #282828;
|
||||
height: 87rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0 24rpx;
|
||||
line-height: 87rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .grayBg {
|
||||
background-color: #f2f5f7;
|
||||
width: 590rpx;
|
||||
height: 384rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
margin: 50rpx auto 0 auto;
|
||||
padding-top: 55rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .grayBg .pictrue {
|
||||
width: 290rpx;
|
||||
height: 290rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .grayBg .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.order-details .writeOff .gear {
|
||||
width: 590rpx;
|
||||
height: 30rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.order-details .writeOff .gear image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.order-details .writeOff .num {
|
||||
background-color: #f0c34c;
|
||||
width: 590rpx;
|
||||
height: 84rpx;
|
||||
color: #282828;
|
||||
font-size: 48rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
text-align: center;
|
||||
padding-top: 4rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .rules {
|
||||
margin: 46rpx 30rpx 0 30rpx;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .rules .item {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .rules .item .rulesTitle {
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.order-details .writeOff .rules .item .rulesTitle .iconfont {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
margin-right: 8rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .rules .item .info {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-top: 7rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .rules .item .info .time {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.order-details .map {
|
||||
height: 86rpx;
|
||||
font-size: 30rpx;
|
||||
color: #282828;
|
||||
line-height: 86rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
margin-top: 15rpx;
|
||||
background-color: #fff;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.order-details .map .place {
|
||||
font-size: 26rpx;
|
||||
width: 176rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
line-height: 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
import { fen2yuan, useDurationTime } from '@/sheep/hooks/useGoods';
|
||||
import PayOrderApi from '@/sheep/api/pay/order';
|
||||
import PayChannelApi from '@/sheep/api/pay/channel';
|
||||
import { getPayMethods } from '@/sheep/platform/pay';
|
||||
import { getPayMethods, goPayResult } from '@/sheep/platform/pay';
|
||||
|
||||
const userWallet = computed(() => sheep.$store('user').userWallet);
|
||||
|
||||
|
|
@ -135,12 +135,22 @@
|
|||
|
||||
// 状态转换:payOrder.status => payStatus
|
||||
function checkPayStatus() {
|
||||
if (state.orderInfo.status === 10
|
||||
|| state.orderInfo.status === 20 ) { // 支付成功
|
||||
if (state.orderInfo.status === 10 || state.orderInfo.status === 20) {
|
||||
// 支付成功
|
||||
state.payStatus = 2;
|
||||
// 跳转回支付成功页
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '订单已支付',
|
||||
showCancel: false,
|
||||
success: function () {
|
||||
goPayResult(state.orderInfo.id, state.orderType);
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (state.orderInfo.status === 30) { // 支付关闭
|
||||
if (state.orderInfo.status === 30) {
|
||||
// 支付关闭
|
||||
state.payStatus = -1;
|
||||
return;
|
||||
}
|
||||
|
|
@ -155,31 +165,39 @@
|
|||
// 设置支付订单信息
|
||||
async function setOrder(id) {
|
||||
// 获得支付订单信息
|
||||
const { data, code } = await PayOrderApi.getOrder(id);
|
||||
const { data, code } = await PayOrderApi.getOrder(id, true);
|
||||
if (code !== 0 || !data) {
|
||||
state.payStatus = -2;
|
||||
return;
|
||||
}
|
||||
state.orderInfo = data;
|
||||
// 获得支付方式
|
||||
await setPayMethods();
|
||||
// 设置支付状态
|
||||
checkPayStatus();
|
||||
// 获得支付方式
|
||||
await setPayMethods();
|
||||
}
|
||||
|
||||
// 获得支付方式
|
||||
async function setPayMethods() {
|
||||
const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId)
|
||||
const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId);
|
||||
if (code !== 0) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
state.payMethods = getPayMethods(data)
|
||||
state.payMethods = getPayMethods(data);
|
||||
state.payMethods.find((item) => {
|
||||
if (item.value && !item.disabled) {
|
||||
state.payment = item.value;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (sheep.$platform.name === 'WechatOfficialAccount'
|
||||
&& sheep.$platform.os === 'ios'
|
||||
&& !sheep.$platform.landingPage.includes('pages/pay/index')) {
|
||||
if (
|
||||
sheep.$platform.name === 'WechatOfficialAccount' &&
|
||||
sheep.$platform.os === 'ios' &&
|
||||
!sheep.$platform.landingPage.includes('pages/pay/index')
|
||||
) {
|
||||
location.reload();
|
||||
return;
|
||||
}
|
||||
|
|
@ -208,7 +226,6 @@
|
|||
position: relative;
|
||||
padding: 60rpx 20rpx 40rpx;
|
||||
|
||||
|
||||
.money-text {
|
||||
color: $red;
|
||||
font-size: 46rpx;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<view class="title">充值金额</view>
|
||||
<view class="num" :class="item.refundStatus === 10 ? 'danger-color' : 'success-color'">
|
||||
{{ fen2yuan(item.payPrice) }} 元
|
||||
<text v-if="item.bonusPrice > 0">(赠送 {{ fen2yuan(item.bonusPrice)}} 元)</text>
|
||||
<text v-if="item.bonusPrice > 0">(赠送 {{ fen2yuan(item.bonusPrice) }} 元)</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-box item ss-flex ss-col-center ss-row-between">
|
||||
|
|
@ -30,7 +30,9 @@
|
|||
</view>
|
||||
<view class="time-box item ss-flex ss-col-center ss-row-between">
|
||||
<text class="item-title">充值时间</text>
|
||||
<view class="time"> {{ sheep.$helper.timeFormat(item.payTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
|
||||
<view class="time">
|
||||
{{ sheep.$helper.timeFormat(item.payTime, 'yyyy-mm-dd hh:MM:ss') }}</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -53,7 +55,7 @@
|
|||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import _ from 'lodash';
|
||||
import _ from 'lodash-es';
|
||||
import PayWalletApi from '@/sheep/api/pay/wallet';
|
||||
import sheep from '@/sheep';
|
||||
import { fen2yuan } from '../../sheep/hooks/useGoods';
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
<!-- 充值界面 -->
|
||||
<template>
|
||||
<s-layout title="充值" class="withdraw-wrap" navbar="inner">
|
||||
<view class="wallet-num-box ss-flex ss-col-center ss-row-between" :style="[
|
||||
<view
|
||||
class="wallet-num-box ss-flex ss-col-center ss-row-between"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 108) + 'rpx',
|
||||
},
|
||||
]">
|
||||
]"
|
||||
>
|
||||
<view class="">
|
||||
<view class="num-title">当前余额(元)</view>
|
||||
<view class="wallet-num">{{ fen2yuan(userWallet.balance) }}</view>
|
||||
|
|
@ -20,20 +23,31 @@
|
|||
<view class="input-label ss-m-b-50">充值金额</view>
|
||||
<view class="input-box ss-flex border-bottom ss-p-b-20">
|
||||
<view class="unit">¥</view>
|
||||
<uni-easyinput v-model="state.recharge_money" type="digit" placeholder="请输入充值金额"
|
||||
:inputBorder="false" />
|
||||
<uni-easyinput
|
||||
v-model="state.recharge_money"
|
||||
type="digit"
|
||||
placeholder="请输入充值金额"
|
||||
:inputBorder="false"
|
||||
/>
|
||||
</view>
|
||||
<view class="face-value-box ss-flex ss-flex-wrap ss-m-y-40">
|
||||
<button class="ss-reset-button face-value-btn" v-for="item in state.packageList" :key="item.money"
|
||||
<button
|
||||
class="ss-reset-button face-value-btn"
|
||||
v-for="item in state.packageList"
|
||||
:key="item.money"
|
||||
:class="[{ 'btn-active': state.recharge_money === fen2yuan(item.payPrice) }]"
|
||||
@tap="onCard(item.payPrice)">
|
||||
@tap="onCard(item.payPrice)"
|
||||
>
|
||||
<text class="face-value-title">{{ fen2yuan(item.payPrice) }}</text>
|
||||
<view v-if="item.bonusPrice" class="face-value-tag">
|
||||
送 {{ fen2yuan(item.bonusPrice) }} 元
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
<button class="ss-reset-button save-btn ui-BG-Main-Gradient ss-m-t-60 ui-Shadow-Main" @tap="onConfirm">
|
||||
<button
|
||||
class="ss-reset-button save-btn ui-BG-Main-Gradient ss-m-t-60 ui-Shadow-Main"
|
||||
@tap="onConfirm"
|
||||
>
|
||||
确认充值
|
||||
</button>
|
||||
</view>
|
||||
|
|
@ -47,6 +61,7 @@
|
|||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import PayWalletApi from '@/sheep/api/pay/wallet';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/helper/const';
|
||||
|
||||
const userWallet = computed(() => sheep.$store('user').userWallet);
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
|
|
@ -74,18 +89,21 @@
|
|||
// 发起支付
|
||||
async function onConfirm() {
|
||||
const { code, data } = await PayWalletApi.createWalletRecharge({
|
||||
packageId: state.packageList.find((item) => fen2yuan(item.payPrice) === state.recharge_money)?.id,
|
||||
payPrice: state.recharge_money * 100
|
||||
packageId: state.packageList.find((item) => fen2yuan(item.payPrice) === state.recharge_money)
|
||||
?.id,
|
||||
payPrice: state.recharge_money * 100,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
// #ifdef MP
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage('money_change');
|
||||
sheep.$platform
|
||||
.useProvider('wechat')
|
||||
.subscribeMessage(WxaSubscribeTemplate.PAY_WALLET_RECHARGER_SUCCESS);
|
||||
// #endif
|
||||
sheep.$router.go('/pages/pay/index', {
|
||||
id: data.payOrderId,
|
||||
orderType: 'recharge'
|
||||
orderType: 'recharge',
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- 支付结果页面 -->
|
||||
<template>
|
||||
<s-layout title="支付结果" :bgStyle="{ color: '#FFF' }">
|
||||
<s-layout :bgStyle="{ color: '#FFF' }" title="支付结果">
|
||||
<view class="pay-result-box ss-flex-col ss-row-center ss-col-center">
|
||||
<!-- 信息展示 -->
|
||||
<view class="pay-waiting ss-m-b-30" v-if="payResult === 'waiting'" />
|
||||
|
|
@ -39,7 +39,6 @@
|
|||
<button class="check-btn ss-reset-button" v-if="payResult === 'success'" @tap="onOrder">
|
||||
查看订单
|
||||
</button>
|
||||
<!-- TODO 芋艿:拼团接入 -->
|
||||
<button
|
||||
class="check-btn ss-reset-button"
|
||||
v-if="payResult === 'success' && state.tradeOrder.type === 3"
|
||||
|
|
@ -49,9 +48,11 @@
|
|||
</button>
|
||||
</view>
|
||||
|
||||
<!-- TODO 芋艿:订阅 -->
|
||||
<!-- #ifdef MP -->
|
||||
<view class="subscribe-box ss-flex ss-m-t-44">
|
||||
<view
|
||||
class="subscribe-box ss-flex ss-m-t-44"
|
||||
v-if="showSubscribeBtn && state.orderType === 'goods'"
|
||||
>
|
||||
<image class="subscribe-img" :src="sheep.$url.static('/static/img/shop/order/cargo.png')" />
|
||||
<view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view>
|
||||
<view class="subscribe-start" @tap="subscribeMessage">立即订阅</view>
|
||||
|
|
@ -62,13 +63,14 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad, onHide, onShow } from '@dcloudio/uni-app';
|
||||
import { reactive, computed } from 'vue';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { onHide, onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import { isEmpty } from 'lodash-es';
|
||||
import sheep from '@/sheep';
|
||||
import PayOrderApi from '@/sheep/api/pay/order';
|
||||
import { fen2yuan } from '../../sheep/hooks/useGoods';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import OrderApi from '@/sheep/api/trade/order';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/helper/const';
|
||||
|
||||
const state = reactive({
|
||||
id: 0, // 支付单号
|
||||
|
|
@ -95,6 +97,24 @@
|
|||
}
|
||||
});
|
||||
|
||||
function showRepayModal() {
|
||||
if (state.result !== 'failed') return;
|
||||
uni.showModal({
|
||||
title: '确认支付',
|
||||
content: '未检测到您的支付结果,请确认您是否已经支付完成?',
|
||||
cancelText: '取消',
|
||||
confirmText: '我已支付',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
state.counter = 0;
|
||||
setTimeout(() => {
|
||||
getOrderInfo(state.id);
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 获得订单信息
|
||||
async function getOrderInfo(id) {
|
||||
state.counter++;
|
||||
|
|
@ -111,11 +131,23 @@
|
|||
// 非待支付,可能是已支付,可能是已退款
|
||||
state.result = 'paid';
|
||||
// #ifdef MP
|
||||
subscribeMessage();
|
||||
uni.showModal({
|
||||
title: '支付结果',
|
||||
showCancel: false, // 不要取消按钮
|
||||
content: '支付成功',
|
||||
success: () => {
|
||||
// 订阅只能由用户主动触发,只能包一层 showModal 诱导用户点击
|
||||
autoSubscribeMessage();
|
||||
},
|
||||
});
|
||||
|
||||
// #endif
|
||||
// 特殊:获得商品订单信息
|
||||
if (state.orderType === 'goods') {
|
||||
const { data, code } = await OrderApi.getOrder(state.orderInfo.merchantOrderId);
|
||||
const { data, code } = await OrderApi.getOrderDetail(
|
||||
state.orderInfo.merchantOrderId,
|
||||
true,
|
||||
);
|
||||
if (code === 0) {
|
||||
state.tradeOrder = data;
|
||||
}
|
||||
|
|
@ -123,20 +155,20 @@
|
|||
return;
|
||||
}
|
||||
}
|
||||
// 2.1 情况三一:未支付,且轮询次数小于三次,则继续轮询
|
||||
if (state.counter < 3 && state.result === 'unpaid') {
|
||||
// 2.1 情况三一:未支付,且轮询次数小于五次,则继续轮询
|
||||
if (state.counter < 5 && state.result === 'unpaid') {
|
||||
setTimeout(() => {
|
||||
getOrderInfo(id);
|
||||
}, 1500);
|
||||
}, 2000);
|
||||
}
|
||||
// 2.2 情况二:超过三次检测才判断为支付失败
|
||||
if (state.counter >= 3) {
|
||||
// 2.2 情况二:超过五次检测才判断为支付失败
|
||||
if (state.counter >= 5) {
|
||||
state.result = 'failed';
|
||||
showRepayModal();
|
||||
}
|
||||
}
|
||||
|
||||
function onOrder() {
|
||||
// TODO 芋艿:待测试
|
||||
if (state.orderType === 'recharge') {
|
||||
sheep.$router.redirect('/pages/pay/recharge-log');
|
||||
} else {
|
||||
|
|
@ -144,15 +176,35 @@
|
|||
}
|
||||
}
|
||||
|
||||
// TODO 芋艿:待测试
|
||||
// #ifdef MP
|
||||
const showSubscribeBtn = ref(false); // 默认隐藏
|
||||
const SUBSCRIBE_BTN_STATUS_STORAGE_KEY = 'subscribe_btn_status';
|
||||
function subscribeMessage() {
|
||||
let event = ['order_dispatched'];
|
||||
if (state.tradeOrder.type === 3) {
|
||||
event.push('groupon_finish');
|
||||
event.push('groupon_fail');
|
||||
if (state.orderType !== 'goods') {
|
||||
return;
|
||||
}
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage(event);
|
||||
const event = [WxaSubscribeTemplate.TRADE_ORDER_DELIVERY];
|
||||
if (state.tradeOrder.type === 3) {
|
||||
event.push(WxaSubscribeTemplate.PROMOTION_COMBINATION_SUCCESS);
|
||||
}
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage(event, () => {
|
||||
// 订阅后记录一下订阅状态
|
||||
uni.removeStorageSync(SUBSCRIBE_BTN_STATUS_STORAGE_KEY);
|
||||
uni.setStorageSync(SUBSCRIBE_BTN_STATUS_STORAGE_KEY, '已订阅');
|
||||
// 隐藏订阅按钮
|
||||
showSubscribeBtn.value = false;
|
||||
});
|
||||
}
|
||||
async function autoSubscribeMessage() {
|
||||
// 1. 校验是否手动订阅过
|
||||
const subscribeBtnStatus = uni.getStorageSync(SUBSCRIBE_BTN_STATUS_STORAGE_KEY);
|
||||
if (!subscribeBtnStatus) {
|
||||
showSubscribeBtn.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 订阅消息
|
||||
subscribeMessage();
|
||||
}
|
||||
// #endif
|
||||
|
||||
|
|
@ -170,7 +222,7 @@
|
|||
if (options.payState === 'fail') {
|
||||
state.result = 'failed';
|
||||
} else {
|
||||
// 轮询三次检测订单支付结果
|
||||
// 轮询五次检测订单支付结果
|
||||
await getOrderInfo(state.id);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<s-empty
|
||||
v-else-if="errCode === 'TemplateError'"
|
||||
icon="/static/internet-empty.png"
|
||||
text="未找到模板"
|
||||
text="未找到模板,请前往后台启用对应模板"
|
||||
showAction
|
||||
actionText="重新加载"
|
||||
@clickAction="onReconnect"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- FAQ 常见问题 -->
|
||||
<template>
|
||||
<s-layout class="set-wrap" title="常见问题" :bgStyle="{ color: '#FFF' }">
|
||||
<s-layout :bgStyle="{ color: '#FFF' }" class="set-wrap" title="常见问题">
|
||||
<uni-collapse>
|
||||
<uni-collapse-item v-for="(item, index) in state.list" :key="item">
|
||||
<template v-slot:title>
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
}
|
||||
}
|
||||
onLoad(() => {
|
||||
// TODO 芋艿:目前简单做,使用营销文章,作为 faq
|
||||
// TODO 芋艿:【文章】目前简单做,使用营销文章,作为 faq
|
||||
if (true) {
|
||||
sheep.$router.go('/pages/public/richtext', {
|
||||
title: '常见问题',
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<!-- 文章展示 -->
|
||||
<template>
|
||||
<s-layout class="set-wrap" :title="state.title" :bgStyle="{ color: '#FFF' }">
|
||||
<view class="ss-p-30">
|
||||
<mp-html class="richtext" :content="state.content" />
|
||||
</view>
|
||||
<s-layout :bgStyle="{ color: '#FFF' }" :title="state.title" class="set-wrap">
|
||||
<view class="ss-p-30 richtext"><mp-html :content="state.content"></mp-html></view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
|
|
@ -41,7 +39,6 @@
|
|||
}
|
||||
getRichTextContent(options.id, options.title);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -49,6 +46,9 @@
|
|||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.richtext {
|
||||
:deep() {
|
||||
image {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<s-layout class="set-wrap" title="系统设置" :bgStyle="{ color: '#fff' }">
|
||||
<s-layout :bgStyle="{ color: '#fff' }" class="set-wrap" title="系统设置">
|
||||
<view class="header-box ss-flex-col ss-row-center ss-col-center">
|
||||
<image
|
||||
class="logo-img ss-m-b-46"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,70 @@
|
|||
<!-- 收货地址的新增/编辑 -->
|
||||
<template>
|
||||
<s-layout :title="state.model.id ? '编辑地址' : '新增地址'">
|
||||
<uni-forms ref="addressFormRef" v-model="state.model" :rules="rules" validateTrigger="bind"
|
||||
labelWidth="160" labelAlign="left" border :labelStyle="{ fontWeight: 'bold' }">
|
||||
<uni-forms
|
||||
ref="addressFormRef"
|
||||
v-model="state.model"
|
||||
:rules="rules"
|
||||
validateTrigger="bind"
|
||||
labelWidth="160"
|
||||
labelAlign="left"
|
||||
border
|
||||
:labelStyle="{ fontWeight: 'bold' }"
|
||||
>
|
||||
<view class="bg-white form-box ss-p-x-30">
|
||||
<uni-forms-item name="name" label="收货人" class="form-item">
|
||||
<uni-easyinput v-model="state.model.name" placeholder="请填写收货人姓名" :inputBorder="false"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal" />
|
||||
<uni-easyinput
|
||||
v-model="state.model.name"
|
||||
placeholder="请填写收货人姓名"
|
||||
:inputBorder="false"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item name="mobile" label="手机号" class="form-item">
|
||||
<uni-easyinput v-model="state.model.mobile" type="number" placeholder="请输入手机号" :inputBorder="false"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
|
||||
<uni-easyinput
|
||||
v-model="state.model.mobile"
|
||||
type="number"
|
||||
placeholder="请输入手机号"
|
||||
:inputBorder="false"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="areaName" label="省市区" @tap="state.showRegion = true" class="form-item">
|
||||
<uni-easyinput v-model="state.model.areaName" disabled :inputBorder="false"
|
||||
<uni-forms-item
|
||||
name="areaName"
|
||||
label="省市区"
|
||||
@tap="state.showRegion = true"
|
||||
class="form-item"
|
||||
>
|
||||
<uni-easyinput
|
||||
v-model="state.model.areaName"
|
||||
disabled
|
||||
:inputBorder="false"
|
||||
:styles="{ disableColor: '#fff', color: '#333' }"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
placeholder="请选择省市区">
|
||||
placeholder="请选择省市区"
|
||||
>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="detailAddress" label="详细地址" :formItemStyle="{ alignItems: 'flex-start' }"
|
||||
:labelStyle="{ lineHeight: '5em' }" class="textarea-item">
|
||||
<uni-easyinput :inputBorder="false" type="textarea" v-model="state.model.detailAddress"
|
||||
<uni-forms-item
|
||||
name="detailAddress"
|
||||
label="详细地址"
|
||||
:formItemStyle="{ alignItems: 'flex-start' }"
|
||||
:labelStyle="{ lineHeight: '5em' }"
|
||||
class="textarea-item"
|
||||
>
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
type="textarea"
|
||||
v-model="state.model.detailAddress"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
placeholder="请输入详细地址" clearable />
|
||||
placeholder="请输入详细地址"
|
||||
clearable
|
||||
/>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box">
|
||||
|
|
@ -48,7 +84,11 @@
|
|||
</su-fixed>
|
||||
|
||||
<!-- 省市区弹窗 -->
|
||||
<su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" />
|
||||
<su-region-picker
|
||||
:show="state.showRegion"
|
||||
@cancel="state.showRegion = false"
|
||||
@confirm="onRegionConfirm"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
|
|
@ -56,7 +96,7 @@
|
|||
import { ref, reactive, unref } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import _ from 'lodash';
|
||||
import _ from 'lodash-es';
|
||||
import { mobile } from '@/sheep/validate/form';
|
||||
import AreaApi from '@/sheep/api/system/area';
|
||||
import AddressApi from '@/sheep/api/member/address';
|
||||
|
|
@ -85,22 +125,26 @@
|
|||
},
|
||||
mobile,
|
||||
detailAddress: {
|
||||
rules: [{
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入详细地址',
|
||||
}]
|
||||
},
|
||||
],
|
||||
},
|
||||
areaName: {
|
||||
rules: [{
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择您的位置'
|
||||
}]
|
||||
errorMessage: '请选择您的位置',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
// 确认选择地区
|
||||
const onRegionConfirm = (e) => {
|
||||
state.model.areaName = `${e.province_name} ${e.city_name} ${e.district_name}`
|
||||
state.model.areaName = `${e.province_name} ${e.city_name} ${e.district_name}`;
|
||||
state.model.areaId = e.district_id;
|
||||
state.showRegion = false;
|
||||
};
|
||||
|
|
@ -130,9 +174,11 @@
|
|||
|
||||
// 提交请求
|
||||
const formData = {
|
||||
...state.model
|
||||
}
|
||||
const {code } = state.model.id > 0 ? await AddressApi.updateAddress(formData)
|
||||
...state.model,
|
||||
};
|
||||
const { code } =
|
||||
state.model.id > 0
|
||||
? await AddressApi.updateAddress(formData)
|
||||
: await AddressApi.createAddress(formData);
|
||||
if (code === 0) {
|
||||
sheep.$router.back();
|
||||
|
|
@ -144,7 +190,7 @@
|
|||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认删除此收货地址吗?',
|
||||
success: async function(res) {
|
||||
success: async function (res) {
|
||||
if (!res.confirm) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -161,7 +207,7 @@
|
|||
getAreaData();
|
||||
// 情况一:基于 id 获得收件地址
|
||||
if (options.id) {
|
||||
let { code, data} = await AddressApi.getAddress(options.id);
|
||||
let { code, data } = await AddressApi.getAddress(options.id);
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -171,7 +217,7 @@
|
|||
if (options.data) {
|
||||
let data = JSON.parse(options.data);
|
||||
const areaData = uni.getStorageSync('areaData');
|
||||
const findAreaByName = (areas, name) => areas.find(item => item.name === name);
|
||||
const findAreaByName = (areas, name) => areas.find((item) => item.name === name);
|
||||
|
||||
let provinceObj = findAreaByName(areaData, data.province_name);
|
||||
let cityObj = provinceObj ? findAreaByName(provinceObj.children, data.city_name) : undefined;
|
||||
|
|
@ -181,7 +227,9 @@
|
|||
state.model = {
|
||||
...state.model,
|
||||
areaId,
|
||||
areaName: [data.province_name, data.city_name, data.district_name].filter(Boolean).join(" "),
|
||||
areaName: [data.province_name, data.city_name, data.district_name]
|
||||
.filter(Boolean)
|
||||
.join(' '),
|
||||
defaultStatus: false,
|
||||
detailAddress: data.address,
|
||||
mobile: data.mobile,
|
||||
|
|
|
|||
|
|
@ -1,45 +1,62 @@
|
|||
<!-- 收件地址列表 -->
|
||||
<template>
|
||||
<s-layout title="收货地址" :bgStyle="{ color: '#FFF' }">
|
||||
<s-layout :bgStyle="{ color: '#FFF' }" title="收货地址">
|
||||
<view v-if="state.list.length">
|
||||
<s-address-item hasBorderBottom v-for="item in state.list" :key="item.id" :item="item"
|
||||
@tap="onSelect(item)" />
|
||||
<s-address-item
|
||||
hasBorderBottom
|
||||
v-for="item in state.list"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
@tap="onSelect(item)"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<su-fixed bottom placeholder>
|
||||
<view class="footer-box ss-flex ss-row-between ss-p-20">
|
||||
<!-- 微信小程序和微信H5 -->
|
||||
<button v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)"
|
||||
<button
|
||||
v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)"
|
||||
@tap="importWechatAddress"
|
||||
class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center">
|
||||
class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center"
|
||||
>
|
||||
<text class="cicon-weixin ss-p-r-10" style="color: #09bb07; font-size: 40rpx"></text>
|
||||
导入微信地址
|
||||
</button>
|
||||
<button class="add-btn ss-reset-button ui-Shadow-Main"
|
||||
@tap="sheep.$router.go('/pages/user/address/edit')">
|
||||
<button
|
||||
class="add-btn ss-reset-button ui-Shadow-Main"
|
||||
@tap="sheep.$router.go('/pages/user/address/edit')"
|
||||
>
|
||||
新增收货地址
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
<s-empty v-if="state.list.length === 0 && !state.loading" text="暂无收货地址" icon="/static/data-empty.png" />
|
||||
<s-empty
|
||||
v-if="state.list.length === 0 && !state.loading"
|
||||
text="暂无收货地址"
|
||||
icon="/static/data-empty.png"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onBeforeMount } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import { onBeforeMount, reactive } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { isEmpty } from 'lodash-es';
|
||||
import AreaApi from '@/sheep/api/system/area';
|
||||
import AddressApi from '@/sheep/api/member/address';
|
||||
|
||||
const state = reactive({
|
||||
list: [], // 地址列表
|
||||
loading: true,
|
||||
openType: '', // 页面打开类型
|
||||
});
|
||||
|
||||
// 选择收货地址
|
||||
const onSelect = (addressInfo) => {
|
||||
if (state.openType !== 'select'){ // 不作为选择组件时阻断操作
|
||||
return
|
||||
}
|
||||
uni.$emit('SELECT_ADDRESS', {
|
||||
addressInfo,
|
||||
});
|
||||
|
|
@ -47,7 +64,6 @@
|
|||
};
|
||||
|
||||
// 导入微信地址
|
||||
// TODO 芋艿:未测试
|
||||
function importWechatAddress() {
|
||||
let wechatAddress = {};
|
||||
// #ifdef MP
|
||||
|
|
@ -97,6 +113,12 @@
|
|||
// #endif
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
if (option.type) {
|
||||
state.openType = option.type;
|
||||
}
|
||||
});
|
||||
|
||||
onShow(async () => {
|
||||
state.list = (await AddressApi.getAddressList()).data;
|
||||
state.loading = false;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
<!-- 头部 -->
|
||||
<view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
|
||||
<view class="header-left ss-flex ss-col-center ss-font-26">
|
||||
共 <text class="goods-number ui-TC-Main ss-flex">{{ state.pagination.total }}</text> 件商品
|
||||
共
|
||||
<text class="goods-number ui-TC-Main ss-flex">{{ state.pagination.total }}</text> 件商品
|
||||
</view>
|
||||
<view class="header-right">
|
||||
<button
|
||||
|
|
@ -77,7 +78,8 @@
|
|||
<view class="footer-right">
|
||||
<button
|
||||
class="ss-reset-button ui-BG-Main-Gradient pay-btn ss-font-28 ui-Shadow-Main"
|
||||
@tap="onCancel">
|
||||
@tap="onCancel"
|
||||
>
|
||||
取消收藏
|
||||
</button>
|
||||
</view>
|
||||
|
|
@ -100,9 +102,9 @@
|
|||
import sheep from '@/sheep';
|
||||
import { reactive } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import _ from 'lodash';
|
||||
import _ from 'lodash-es';
|
||||
import FavoriteApi from '@/sheep/api/product/favorite';
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
import { resetPagination } from '@/sheep/helper/utils';
|
||||
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
|
||||
|
|
@ -129,7 +131,7 @@
|
|||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list)
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
}
|
||||
|
|
@ -174,7 +176,7 @@
|
|||
// 加载更多
|
||||
function loadMore() {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return
|
||||
return;
|
||||
}
|
||||
state.pagination.pageNo++;
|
||||
getData();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- 商品浏览记录 -->
|
||||
<template>
|
||||
<s-layout title="我的足迹" :bgStyle="{ color: '#f2f2f2' }">
|
||||
<s-layout :bgStyle="{ color: '#f2f2f2' }" title="我的足迹">
|
||||
<view class="cart-box ss-flex ss-flex-col ss-row-between">
|
||||
<!-- 头部 -->
|
||||
<view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
|
||||
|
|
@ -81,11 +81,13 @@
|
|||
</view>
|
||||
<view class="footer-right ss-flex">
|
||||
<button
|
||||
:class="['ss-reset-button pay-btn ss-font-28 ',
|
||||
:class="[
|
||||
'ss-reset-button pay-btn ss-font-28 ',
|
||||
{
|
||||
'ui-BG-Main-Gradient': state.selectedSpuIdList.length > 0,
|
||||
'ui-Shadow-Main': state.selectedSpuIdList.length > 0
|
||||
}]"
|
||||
'ui-Shadow-Main': state.selectedSpuIdList.length > 0,
|
||||
},
|
||||
]"
|
||||
@tap="onDelete"
|
||||
>
|
||||
删除足迹
|
||||
|
|
@ -120,9 +122,9 @@
|
|||
import sheep from '@/sheep';
|
||||
import { reactive } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import _ from 'lodash';
|
||||
import SpuHistoryApi from "@/sheep/api/product/history";
|
||||
import {cloneDeep} from "@/sheep/helper/utils";
|
||||
import _ from 'lodash-es';
|
||||
import SpuHistoryApi from '@/sheep/api/product/history';
|
||||
import { cloneDeep } from '@/sheep/helper/utils';
|
||||
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const pagination = {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,282 @@
|
|||
<template>
|
||||
<s-layout :bgStyle="{ color: '#FFF' }" title="选择自提门店">
|
||||
<view class="storeBox" ref="container">
|
||||
<view
|
||||
class="storeBox-box"
|
||||
v-for="(item, index) in state.storeList"
|
||||
:key="index"
|
||||
@tap="checked(item)"
|
||||
>
|
||||
<view class="store-img">
|
||||
<image :src="item.logo" class="img" />
|
||||
</view>
|
||||
<view class="store-cent-left">
|
||||
<view class="store-name">{{ item.name }}</view>
|
||||
<view class="store-address line1">
|
||||
{{ item.areaName }}{{ ', ' + item.detailAddress }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="row-right ss-flex-col ss-col-center">
|
||||
<view>
|
||||
<!-- #ifdef H5 -->
|
||||
<a class="store-phone" :href="'tel:' + item.phone">
|
||||
<view class="iconfont">
|
||||
<view class="ss-rest-button">
|
||||
<text class="_icon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
</a>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<view class="store-phone" @click="call(item.phone)">
|
||||
<view class="iconfont">
|
||||
<view class="ss-rest-button">
|
||||
<text class="_icon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="store-distance ss-flex ss-row-center" @tap.stop="showMaoLocation(item)">
|
||||
<text class="addressTxt" v-if="item.distance">
|
||||
距离{{ item.distance.toFixed(2) }}千米
|
||||
</text>
|
||||
<text class="addressTxt" v-else>查看地图</text>
|
||||
<view class="iconfont">
|
||||
<view class="ss-rest-button">
|
||||
<text class="_icon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DeliveryApi from '@/sheep/api/trade/delivery';
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const LONGITUDE = 'user_longitude';
|
||||
const LATITUDE = 'user_latitude';
|
||||
const state = reactive({
|
||||
loaded: false,
|
||||
loading: false,
|
||||
storeList: [],
|
||||
system_store: {},
|
||||
locationShow: false,
|
||||
user_latitude: 0,
|
||||
user_longitude: 0,
|
||||
});
|
||||
|
||||
const call = (phone) => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone,
|
||||
});
|
||||
};
|
||||
const selfLocation = () => {
|
||||
// #ifdef H5
|
||||
const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
|
||||
if (jsWxSdk.isWechat()) {
|
||||
jsWxSdk.getLocation((res) => {
|
||||
state.user_latitude = res.latitude;
|
||||
state.user_longitude = res.longitude;
|
||||
uni.setStorageSync(LATITUDE, res.latitude);
|
||||
uni.setStorageSync(LONGITUDE, res.longitude);
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
// #endif
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
try {
|
||||
state.user_latitude = res.latitude;
|
||||
state.user_longitude = res.longitude;
|
||||
uni.setStorageSync(LATITUDE, res.latitude);
|
||||
uni.setStorageSync(LONGITUDE, res.longitude);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
getList();
|
||||
},
|
||||
complete: () => {
|
||||
getList();
|
||||
},
|
||||
});
|
||||
// #ifdef H5
|
||||
}
|
||||
// #endif
|
||||
};
|
||||
const showMaoLocation = (e) => {
|
||||
// #ifdef H5
|
||||
const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
|
||||
if (jsWxSdk.isWechat()) {
|
||||
jsWxSdk.openLocation({
|
||||
latitude: Number(e.latitude),
|
||||
longitude: Number(e.longitude),
|
||||
name: e.name,
|
||||
address: `${e.areaName}-${e.detailAddress}`,
|
||||
});
|
||||
} else {
|
||||
// #endif
|
||||
uni.openLocation({
|
||||
latitude: Number(e.latitude),
|
||||
longitude: Number(e.longitude),
|
||||
name: e.name,
|
||||
address: `${e.areaName}-${e.detailAddress}`,
|
||||
success: function () {
|
||||
console.log('success');
|
||||
},
|
||||
});
|
||||
// #ifdef H5
|
||||
}
|
||||
// #endif
|
||||
};
|
||||
|
||||
/**
|
||||
* 选中门店
|
||||
*/
|
||||
const checked = (addressInfo) => {
|
||||
uni.$emit('SELECT_PICK_UP_INFO', {
|
||||
addressInfo,
|
||||
});
|
||||
sheep.$router.back();
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取门店列表数据
|
||||
*/
|
||||
const getList = async () => {
|
||||
if (state.loading || state.loaded) {
|
||||
return;
|
||||
}
|
||||
state.loading = true;
|
||||
const { data, code } = await DeliveryApi.getDeliveryPickUpStoreList({
|
||||
latitude: state.user_latitude,
|
||||
longitude: state.user_longitude,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.loading = false;
|
||||
state.storeList = data;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (state.user_latitude && state.user_longitude) {
|
||||
getList();
|
||||
} else {
|
||||
selfLocation();
|
||||
getList();
|
||||
}
|
||||
});
|
||||
onLoad(() => {
|
||||
try {
|
||||
state.user_latitude = uni.getStorageSync(LATITUDE);
|
||||
state.user_longitude = uni.getStorageSync(LONGITUDE);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.line1 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.geoPage {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.storeBox {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.storeBox-box {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 23rpx 0;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.store-cent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.store-cent-left {
|
||||
//width: 45%;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.store-img {
|
||||
flex: 1;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 22rpx;
|
||||
}
|
||||
|
||||
.store-img .img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.store-name {
|
||||
color: #282828;
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 22rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.store-address {
|
||||
color: #666666;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.store-phone {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 48rpx;
|
||||
background-color: #e83323;
|
||||
margin-bottom: 22rpx;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.store-distance {
|
||||
font-size: 22rpx;
|
||||
color: #e83323;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.row-right {
|
||||
flex: 2;
|
||||
//display: flex;
|
||||
//flex-direction: column;
|
||||
//align-items: flex-end;
|
||||
//width: 33.5%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
class="content-img"
|
||||
isPreview
|
||||
:current="0"
|
||||
:src="state.model?.avatar"
|
||||
:src="state.model?.avatar || sheep.$url.static('/static/img/shop/default_avatar.png')"
|
||||
:height="160"
|
||||
:width="160"
|
||||
:radius="80"
|
||||
|
|
@ -26,7 +26,8 @@
|
|||
<button
|
||||
class="ss-reset-button avatar-action-btn"
|
||||
open-type="chooseAvatar"
|
||||
@chooseavatar="onChooseAvatar">
|
||||
@chooseavatar="onChooseAvatar"
|
||||
>
|
||||
修改
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
|
|
@ -154,10 +155,7 @@
|
|||
</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="info ss-flex ss-col-center" v-if="state.thirdInfo">
|
||||
<image
|
||||
class="avatar ss-m-r-20"
|
||||
:src="sheep.$url.cdn(state.thirdInfo.avatar)"
|
||||
/>
|
||||
<image class="avatar ss-m-r-20" :src="sheep.$url.cdn(state.thirdInfo.avatar)" />
|
||||
<text class="name">{{ state.thirdInfo.nickname }}</text>
|
||||
</view>
|
||||
<view class="bind-box ss-m-l-20">
|
||||
|
|
@ -185,10 +183,13 @@
|
|||
<script setup>
|
||||
import { computed, reactive, onBeforeMount } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { clone } from 'lodash';
|
||||
import { clone } from 'lodash-es';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
import FileApi from '@/sheep/api/infra/file';
|
||||
import UserApi from '@/sheep/api/member/user';
|
||||
import {
|
||||
chooseAndUploadFile,
|
||||
uploadFilesFromPath,
|
||||
} from '@/sheep/components/s-uploader/choose-and-upload-file';
|
||||
|
||||
const state = reactive({
|
||||
model: {}, // 个人信息
|
||||
|
|
@ -198,14 +199,15 @@
|
|||
|
||||
const placeholderStyle = 'color:#BBBBBB;font-size:28rpx;line-height:normal';
|
||||
|
||||
const sexRadioMap = [{
|
||||
const sexRadioMap = [
|
||||
{
|
||||
name: '男',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
name: '女',
|
||||
value: '2',
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
|
|
@ -221,28 +223,22 @@
|
|||
};
|
||||
|
||||
// 选择微信的头像,进行上传
|
||||
function onChooseAvatar(e) {
|
||||
async function onChooseAvatar(e) {
|
||||
debugger;
|
||||
const tempUrl = e.detail.avatarUrl || '';
|
||||
uploadAvatar(tempUrl);
|
||||
if (!tempUrl) return;
|
||||
const files = await uploadFilesFromPath(tempUrl);
|
||||
if (files.length > 0) {
|
||||
state.model.avatar = files[0].url;
|
||||
}
|
||||
}
|
||||
|
||||
// 手动选择头像,进行上传
|
||||
function onChangeAvatar() {
|
||||
uni.chooseImage({
|
||||
success: async (chooseImageRes) => {
|
||||
const tempUrl = chooseImageRes.tempFilePaths[0];
|
||||
await uploadAvatar(tempUrl);
|
||||
},
|
||||
});
|
||||
async function onChangeAvatar() {
|
||||
const files = await chooseAndUploadFile({ type: 'image' });
|
||||
if (files.length > 0) {
|
||||
state.model.avatar = files[0].url;
|
||||
}
|
||||
|
||||
// 上传头像文件
|
||||
async function uploadAvatar(tempUrl) {
|
||||
if (!tempUrl) {
|
||||
return;
|
||||
}
|
||||
let { data } = await FileApi.uploadFile(tempUrl);
|
||||
state.model.avatar = data;
|
||||
}
|
||||
|
||||
// 修改密码
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@
|
|||
/>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-between ss-col-center ss-m-t-64">
|
||||
<view class="money-num">{{ state.showMoney ? fen2yuan(userWallet.balance) : '*****' }}</view>
|
||||
<view class="money-num">{{
|
||||
state.showMoney ? fen2yuan(userWallet.balance) : '*****'
|
||||
}}</view>
|
||||
<button class="ss-reset-button topup-btn" @tap="sheep.$router.go('/pages/pay/recharge')">
|
||||
充值
|
||||
</button>
|
||||
|
|
@ -24,7 +26,12 @@
|
|||
<su-sticky>
|
||||
<!-- 统计 -->
|
||||
<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
|
||||
<uni-datetime-picker v-model="state.data" type="daterange" @change="onChangeTime" :end="state.today">
|
||||
<uni-datetime-picker
|
||||
v-model="state.data"
|
||||
type="daterange"
|
||||
@change="onChangeTime"
|
||||
:end="state.today"
|
||||
>
|
||||
<button class="ss-reset-button date-btn">
|
||||
<text>{{ dateFilterText }}</text>
|
||||
<text class="cicon-drop-down ss-seldate-icon"></text>
|
||||
|
|
@ -82,10 +89,10 @@
|
|||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import dayjs from 'dayjs';
|
||||
import _ from 'lodash';
|
||||
import _ from 'lodash-es';
|
||||
import PayWalletApi from '@/sheep/api/pay/wallet';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
import { resetPagination } from '@/sheep/helper/utils';
|
||||
|
||||
const headerBg = sheep.$url.css('/static/img/shop/user/wallet_card_bg.png');
|
||||
|
||||
|
|
@ -98,7 +105,7 @@
|
|||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 8
|
||||
pageSize: 8,
|
||||
},
|
||||
summary: {
|
||||
totalIncome: 0,
|
||||
|
|
@ -155,7 +162,7 @@
|
|||
// 获得钱包统计
|
||||
async function getSummary() {
|
||||
const { data, code } = await PayWalletApi.getWalletTransactionSummary({
|
||||
'createTime': [state.date[0] + ' 00:00:00', state.date[1] + ' 23:59:59'],
|
||||
createTime: [state.date[0] + ' 00:00:00', state.date[1] + ' 23:59:59'],
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
|
|
@ -226,8 +233,7 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: v-bind(headerBg)
|
||||
no-repeat;
|
||||
background: v-bind(headerBg) no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,18 +24,23 @@
|
|||
<su-sticky :customNavHeight="sys_navBar">
|
||||
<!-- 统计 -->
|
||||
<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
|
||||
<uni-datetime-picker v-model="state.date" type="daterange" @change="onChangeTime" :end="state.today">
|
||||
<uni-datetime-picker
|
||||
v-model="state.date"
|
||||
type="daterange"
|
||||
@change="onChangeTime"
|
||||
:end="state.today"
|
||||
>
|
||||
<button class="ss-reset-button date-btn">
|
||||
<text>{{ dateFilterText }}</text>
|
||||
<text class="cicon-drop-down ss-seldate-icon"></text>
|
||||
</button>
|
||||
</uni-datetime-picker>
|
||||
|
||||
<!-- TODO 芋艿:优化 -->
|
||||
<!-- <view class="total-box">-->
|
||||
<!-- <view class="ss-m-b-10">总收入¥{{ state.pagination.income }}</view>-->
|
||||
<!-- <view>总支出¥{{ -state.pagination.expense }}</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- TODO 芋艿:【钱包-可优化】展示一下 -->
|
||||
<!-- <view class="total-box">-->
|
||||
<!-- <view class="ss-m-b-10">总收入¥{{ state.pagination.income }}</view>-->
|
||||
<!-- <view>总支出¥{{ -state.pagination.expense }}</view>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
|
|
@ -83,10 +88,10 @@
|
|||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import _ from 'lodash-es';
|
||||
import dayjs from 'dayjs';
|
||||
import PointApi from '@/sheep/api/member/point';
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
import { resetPagination } from '@/sheep/helper/utils';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
// 目的:解决微信小程序的「代码质量」在「JS 文件」提示:主包内,不应该存在主包未使用的 JS 文件
|
||||
const files = import.meta.glob('./*/*.js', { eager: true });
|
||||
let api = {};
|
||||
Object.keys(files).forEach((key) => {
|
||||
api = {
|
||||
...api,
|
||||
[key.replace(/(.*\/)*([^.]+).*/gi, '$2')]: files[key].default,
|
||||
};
|
||||
});
|
||||
|
||||
export default api;
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
import { baseUrl, apiPath } from '@/sheep/config';
|
||||
import { baseUrl, apiPath, tenantId } from '@/sheep/config';
|
||||
import request, { getAccessToken } from '@/sheep/request';
|
||||
|
||||
const FileApi = {
|
||||
// 上传文件
|
||||
uploadFile: (file) => {
|
||||
// TODO 芋艿:访问令牌的接入;
|
||||
const token = uni.getStorageSync('token');
|
||||
uploadFile: (file, directory = '') => {
|
||||
uni.showLoading({
|
||||
title: '上传中',
|
||||
});
|
||||
|
|
@ -14,10 +13,12 @@ const FileApi = {
|
|||
filePath: file,
|
||||
name: 'file',
|
||||
header: {
|
||||
// Accept: 'text/json',
|
||||
Accept : '*/*',
|
||||
'tenant-id' :'1',
|
||||
// Authorization: 'Bearer test247',
|
||||
Accept: '*/*',
|
||||
'tenant-id': tenantId,
|
||||
Authorization: 'Bearer ' + getAccessToken(),
|
||||
},
|
||||
formData: {
|
||||
directory,
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let result = JSON.parse(uploadFileRes.data);
|
||||
|
|
@ -40,6 +41,27 @@ const FileApi = {
|
|||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 获取文件预签名地址
|
||||
getFilePresignedUrl: (name, directory) => {
|
||||
return request({
|
||||
url: '/infra/file/presigned-url',
|
||||
method: 'GET',
|
||||
params: {
|
||||
name,
|
||||
directory,
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 创建文件
|
||||
createFile: (data) => {
|
||||
return request({
|
||||
url: '/infra/file/create', // 请求的 URL
|
||||
method: 'POST', // 请求方法
|
||||
data: data, // 要发送的数据
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default FileApi;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import request from '@/sheep/request';
|
||||
|
||||
/**
|
||||
* 通过网站域名获取租户信息
|
||||
* @param {string} website - 网站域名
|
||||
* @returns {Promise<Object>} 租户信息
|
||||
*/
|
||||
export function getTenantByWebsite(website) {
|
||||
return request({
|
||||
url: '/system/tenant/get-by-website',
|
||||
method: 'GET',
|
||||
params: { website },
|
||||
custom: {
|
||||
isToken: false, // 避免登录情况下,跨租户访问被拦截
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -56,10 +56,10 @@ const AuthUtil = {
|
|||
url: '/member/auth/refresh-token',
|
||||
method: 'POST',
|
||||
params: {
|
||||
refreshToken
|
||||
refreshToken,
|
||||
},
|
||||
custom: {
|
||||
loading: false, // 不用加载中
|
||||
showLoading: false, // 不用加载中
|
||||
showError: false, // 不展示错误提示
|
||||
},
|
||||
});
|
||||
|
|
@ -103,7 +103,7 @@ const AuthUtil = {
|
|||
data: {
|
||||
phoneCode,
|
||||
loginCode,
|
||||
state
|
||||
state,
|
||||
},
|
||||
custom: {
|
||||
showSuccess: true,
|
||||
|
|
@ -118,13 +118,13 @@ const AuthUtil = {
|
|||
url: '/member/auth/create-weixin-jsapi-signature',
|
||||
method: 'POST',
|
||||
params: {
|
||||
url
|
||||
url,
|
||||
},
|
||||
custom: {
|
||||
showError: false,
|
||||
showLoading: false,
|
||||
},
|
||||
})
|
||||
});
|
||||
},
|
||||
//
|
||||
};
|
||||
|
|
|
|||
|
|
@ -49,6 +49,28 @@ const SocialApi = {
|
|||
},
|
||||
});
|
||||
},
|
||||
// 获取订阅消息模板列表
|
||||
getSubscribeTemplateList: () =>
|
||||
request({
|
||||
url: '/member/social-user/get-subscribe-template-list',
|
||||
method: 'GET',
|
||||
custom: {
|
||||
showError: false,
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
// 获取微信小程序码
|
||||
getWxaQrcode: async (path, query) => {
|
||||
return await request({
|
||||
url: '/member/social-user/wxa-qrcode',
|
||||
method: 'POST',
|
||||
data: {
|
||||
scene: query,
|
||||
path,
|
||||
checkPath: false, // TODO 开发环境暂不检查 path 是否存在
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default SocialApi;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import request from '@/sheep/request';
|
||||
|
||||
// TODO 芋艿:小程序直播还不支持
|
||||
// TODO 芋艿:【直播】小程序直播还不支持
|
||||
export default {
|
||||
//小程序直播
|
||||
mplive: {
|
||||
|
|
@ -10,12 +10,12 @@ export default {
|
|||
method: 'GET',
|
||||
params: {
|
||||
ids: ids.join(','),
|
||||
}
|
||||
},
|
||||
}),
|
||||
getMpLink: () =>
|
||||
request({
|
||||
url: 'app/mplive/getMpLink',
|
||||
method: 'GET'
|
||||
method: 'GET',
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
import request from '@/sheep/request';
|
||||
|
||||
// TODO 芋艿:暂不支持 socket 聊天
|
||||
export default {
|
||||
// 获取聊天token
|
||||
unifiedToken: () =>
|
||||
request({
|
||||
url: 'unifiedToken',
|
||||
custom: {
|
||||
showError: false,
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
const files = import.meta.glob('./*.js', { eager: true });
|
||||
let api = {};
|
||||
Object.keys(files).forEach((key) => {
|
||||
api = {
|
||||
...api,
|
||||
[key.replace(/(.*\/)*([^.]+).*/gi, '$2')]: files[key].default,
|
||||
};
|
||||
});
|
||||
|
||||
export default api;
|
||||
|
|
@ -1,32 +1,6 @@
|
|||
import request from '@/sheep/request';
|
||||
import { baseUrl, apiPath } from '@/sheep/config';
|
||||
|
||||
export default {
|
||||
// 微信相关
|
||||
wechat: {
|
||||
// 小程序订阅消息
|
||||
subscribeTemplate: (params) =>
|
||||
request({
|
||||
url: 'third/wechat/subscribeTemplate',
|
||||
method: 'GET',
|
||||
params: {
|
||||
platform: 'miniProgram',
|
||||
},
|
||||
custom: {
|
||||
showError: false,
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
|
||||
// 获取微信小程序码
|
||||
getWxacode: (path) =>
|
||||
`${baseUrl}${apiPath}third/wechat/wxacode?platform=miniProgram&payload=${encodeURIComponent(
|
||||
JSON.stringify({
|
||||
path,
|
||||
}),
|
||||
)}`,
|
||||
},
|
||||
|
||||
// 苹果相关
|
||||
apple: {
|
||||
// 第三方登录
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import request from '@/sheep/request';
|
|||
|
||||
const PayOrderApi = {
|
||||
// 获得支付订单
|
||||
getOrder: (id) => {
|
||||
getOrder: (id, sync) => {
|
||||
return request({
|
||||
url: '/pay/order/get',
|
||||
method: 'GET',
|
||||
params: { id }
|
||||
params: { id, sync },
|
||||
});
|
||||
},
|
||||
// 提交支付订单
|
||||
|
|
@ -14,9 +14,9 @@ const PayOrderApi = {
|
|||
return request({
|
||||
url: '/pay/order/submit',
|
||||
method: 'POST',
|
||||
data
|
||||
data,
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default PayOrderApi;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import request from '@/sheep/request';
|
||||
|
||||
const PayTransferApi = {
|
||||
// 同步转账单
|
||||
syncTransfer: (id) => {
|
||||
return request({
|
||||
url: '/pay/transfer/sync',
|
||||
method: 'GET',
|
||||
params: { id },
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default PayTransferApi;
|
||||
|
|
@ -13,6 +13,18 @@ const SpuApi = {
|
|||
},
|
||||
});
|
||||
},
|
||||
// 获得商品结算信息
|
||||
getSettlementProduct: (spuIds) => {
|
||||
return request({
|
||||
url: '/trade/order/settlement-product',
|
||||
method: 'GET',
|
||||
params: { spuIds },
|
||||
custom: {
|
||||
showLoading: false,
|
||||
showError: false,
|
||||
},
|
||||
});
|
||||
},
|
||||
// 获得商品 SPU 分页
|
||||
getSpuPage: (params) => {
|
||||
return request({
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue