Skip to content

P
project-online-fi
提交 9984af7a authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

Merge branch 'master' of https://gitlab-pro.ezijing.com/ezijing-web/project-online-fi

上级 35a30cbd 2a4818af
隐藏空白字符变更
内嵌 并排
正在显示 包含 1848 行增加 和 392 行删除
data/src/goods/1.js
浏览文件 @ 9984af7a
...@@ -17,8 +17,8 @@ export default [ ...@@ -17,8 +17,8 @@ export default [
], ],
child_ids: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7', '1-8'], child_ids: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7', '1-8'],
course_card: '知名导师专家', course_card: '知名导师专家',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -71,8 +71,8 @@ export default [ ...@@ -71,8 +71,8 @@ export default [
} }
], ],
course_card: '知名导师专家1', course_card: '知名导师专家1',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -111,8 +111,8 @@ export default [ ...@@ -111,8 +111,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -151,8 +151,8 @@ export default [ ...@@ -151,8 +151,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -191,8 +191,8 @@ export default [ ...@@ -191,8 +191,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -231,8 +231,8 @@ export default [ ...@@ -231,8 +231,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -271,8 +271,8 @@ export default [ ...@@ -271,8 +271,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -311,8 +311,8 @@ export default [ ...@@ -311,8 +311,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -351,8 +351,8 @@ export default [ ...@@ -351,8 +351,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
......
data/src/goods/2.js
浏览文件 @ 9984af7a
...@@ -16,8 +16,8 @@ export default [ ...@@ -16,8 +16,8 @@ export default [
} }
], ],
child_ids: ['2-1', '2-2', '2-3', '2-4', '2-5', '2-6', '2-7', '2-8'], child_ids: ['2-1', '2-2', '2-3', '2-4', '2-5', '2-6', '2-7', '2-8'],
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -57,8 +57,8 @@ export default [ ...@@ -57,8 +57,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -97,8 +97,8 @@ export default [ ...@@ -97,8 +97,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -137,8 +137,8 @@ export default [ ...@@ -137,8 +137,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -177,8 +177,8 @@ export default [ ...@@ -177,8 +177,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -217,8 +217,8 @@ export default [ ...@@ -217,8 +217,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -257,8 +257,8 @@ export default [ ...@@ -257,8 +257,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -297,8 +297,8 @@ export default [ ...@@ -297,8 +297,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -337,8 +337,8 @@ export default [ ...@@ -337,8 +337,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
......
data/src/goods/3.js
浏览文件 @ 9984af7a
...@@ -17,8 +17,8 @@ export default [ ...@@ -17,8 +17,8 @@ export default [
], ],
child_ids: ['3-1', '3-2'], child_ids: ['3-1', '3-2'],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -57,8 +57,8 @@ export default [ ...@@ -57,8 +57,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
...@@ -97,8 +97,8 @@ export default [ ...@@ -97,8 +97,8 @@ export default [
} }
], ],
course_card: '知名导师专家2', course_card: '知名导师专家2',
course_chapter: '56 节课程', course_chapter: '56',
course_total_hour: '80 小时', course_total_hour: '80',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '6998547457529348096',
class_id: '6998519782265847808' class_id: '6998519782265847808'
......
package-lock.json
浏览文件 @ 9984af7a
...@@ -13,6 +13,8 @@ ...@@ -13,6 +13,8 @@
"element-plus": "^2.2.21", "element-plus": "^2.2.21",
"pinia": "^2.0.24", "pinia": "^2.0.24",
"qrcode.vue": "^3.3.3", "qrcode.vue": "^3.3.3",
"query-string": "^7.1.1",
"querystring": "^0.2.1",
"swiper": "^8.4.4", "swiper": "^8.4.4",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-router": "^4.1.6" "vue-router": "^4.1.6"
...@@ -1281,6 +1283,14 @@ ...@@ -1281,6 +1283,14 @@
} }
} }
}, },
"node_modules/decode-uri-component": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
"integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
"engines": {
"node": ">=0.10"
}
},
"node_modules/deep-is": { "node_modules/deep-is": {
"version": "0.1.4", "version": "0.1.4",
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
...@@ -2237,6 +2247,14 @@ ...@@ -2237,6 +2247,14 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/filter-obj": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
"integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/find-up": { "node_modules/find-up": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
...@@ -3562,6 +3580,32 @@ ...@@ -3562,6 +3580,32 @@
"node": ">=0.6" "node": ">=0.6"
} }
}, },
"node_modules/query-string": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.1.tgz",
"integrity": "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==",
"dependencies": {
"decode-uri-component": "^0.2.0",
"filter-obj": "^1.1.0",
"split-on-first": "^1.0.0",
"strict-uri-encode": "^2.0.0"
},
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/querystring": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
"integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==",
"deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
"engines": {
"node": ">=0.4.x"
}
},
"node_modules/queue-microtask": { "node_modules/queue-microtask": {
"version": "1.2.3", "version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
...@@ -3902,6 +3946,14 @@ ...@@ -3902,6 +3946,14 @@
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
}, },
"node_modules/split-on-first": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
"integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
"engines": {
"node": ">=6"
}
},
"node_modules/ssr-window": { "node_modules/ssr-window": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz", "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz",
...@@ -3938,6 +3990,14 @@ ...@@ -3938,6 +3990,14 @@
"node": ">=4.0.0" "node": ">=4.0.0"
} }
}, },
"node_modules/strict-uri-encode": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
"integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
"engines": {
"node": ">=4"
}
},
"node_modules/string_decoder": { "node_modules/string_decoder": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.1.1.tgz", "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.1.1.tgz",
...@@ -5554,6 +5614,11 @@ ...@@ -5554,6 +5614,11 @@
"ms": "2.1.2" "ms": "2.1.2"
} }
}, },
"decode-uri-component": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
"integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og=="
},
"deep-is": { "deep-is": {
"version": "0.1.4", "version": "0.1.4",
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
...@@ -6186,6 +6251,11 @@ ...@@ -6186,6 +6251,11 @@
"to-regex-range": "^5.0.1" "to-regex-range": "^5.0.1"
} }
}, },
"filter-obj": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
"integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="
},
"find-up": { "find-up": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
...@@ -7209,6 +7279,22 @@ ...@@ -7209,6 +7279,22 @@
"side-channel": "^1.0.4" "side-channel": "^1.0.4"
} }
}, },
"query-string": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.1.tgz",
"integrity": "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==",
"requires": {
"decode-uri-component": "^0.2.0",
"filter-obj": "^1.1.0",
"split-on-first": "^1.0.0",
"strict-uri-encode": "^2.0.0"
}
},
"querystring": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
"integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg=="
},
"queue-microtask": { "queue-microtask": {
"version": "1.2.3", "version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
...@@ -7448,6 +7534,11 @@ ...@@ -7448,6 +7534,11 @@
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
}, },
"split-on-first": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
"integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
},
"ssr-window": { "ssr-window": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz", "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz",
...@@ -7478,6 +7569,11 @@ ...@@ -7478,6 +7569,11 @@
"integrity": "sha512-gHFfL3px0Kctd6Po0M8TzEvt3De/xu6cnRrjlfYNhwbhLPLwigI2t1nc6jrzNuaYg5C4YF78PPFuQPzRiqn9ew==", "integrity": "sha512-gHFfL3px0Kctd6Po0M8TzEvt3De/xu6cnRrjlfYNhwbhLPLwigI2t1nc6jrzNuaYg5C4YF78PPFuQPzRiqn9ew==",
"dev": true "dev": true
}, },
"strict-uri-encode": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
"integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
},
"string_decoder": { "string_decoder": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.1.1.tgz", "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.1.1.tgz",
......
package.json
浏览文件 @ 9984af7a
...@@ -20,6 +20,8 @@ ...@@ -20,6 +20,8 @@
"element-plus": "^2.2.21", "element-plus": "^2.2.21",
"pinia": "^2.0.24", "pinia": "^2.0.24",
"qrcode.vue": "^3.3.3", "qrcode.vue": "^3.3.3",
"query-string": "^7.1.1",
"querystring": "^0.2.1",
"swiper": "^8.4.4", "swiper": "^8.4.4",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-router": "^4.1.6" "vue-router": "^4.1.6"
......
src/api/base.ts
浏览文件 @ 9984af7a
...@@ -58,3 +58,13 @@ export function postNes(data: any) { ...@@ -58,3 +58,13 @@ export function postNes(data: any) {
headers: { 'Content-Type': 'multipart/form-data' } headers: { 'Content-Type': 'multipart/form-data' }
}) })
} }
/**
* 获取用户OpenId
* */
export function getOpenId(data?: any) {
return httpRequest.post('https://shop-show-pc.ezijing.com/api/usercenter/v1/wechat/get-openid', data, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}
src/components/layout/Index.vue
浏览文件 @ 9984af7a
...@@ -2,6 +2,9 @@ ...@@ -2,6 +2,9 @@
import AppHeader from './Header.vue' import AppHeader from './Header.vue'
import AppFooter from './Footer.vue' import AppFooter from './Footer.vue'
import RightAside from './RightAside.vue' import RightAside from './RightAside.vue'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const route = useRoute()
interface Props { interface Props {
fixed?: boolean fixed?: boolean
} }
...@@ -14,7 +17,10 @@ const props = defineProps<Props>() ...@@ -14,7 +17,10 @@ const props = defineProps<Props>()
<section class="app-layout-container"> <section class="app-layout-container">
<router-view :key="$route.fullPath"></router-view> <router-view :key="$route.fullPath"></router-view>
</section> </section>
<template v-if="!mobile && route.path !=='/shop/pay' ">
<AppFooter></AppFooter> <AppFooter></AppFooter>
</template>
<RightAside /> <RightAside />
</div> </div>
</template> </template>
src/components/layout/RightAside.vue
浏览文件 @ 9984af7a
...@@ -188,6 +188,7 @@ export default { ...@@ -188,6 +188,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.right_bar { .right_bar {
display: none;
position: fixed; position: fixed;
top: 50%; top: 50%;
right: 10px; right: 10px;
......
src/modules/pay/components/Confirm.vue
浏览文件 @ 9984af7a
<script setup lang="ts"> <script setup lang="ts">
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { Check } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
import { useDevice } from '@/composables/useDevice'
import queryString from 'query-string'
import { getOpenId, wxJSPay } from '@/utils/wxpay'
import { createOrder, getOrderList } from '../api'
const router = useRouter()
const { mobile, wechat, alipay } = useDevice()
const user = useUserStore() const user = useUserStore()
defineProps({ const props = defineProps({
shopItem: { shopItem: {
type: Object type: Object
} }
}) })
const orderInfo: any = ref([])
const orderInfoDetail: any = ref([])
const payMode = ref(1) const payMode = ref(1)
const isAgree = ref(false) const isAgree = ref(false)
const currentCheck = ref('12')
const query = $computed(() => {
return queryString.parse(location.search, { parseBooleans: true })
})
function getDateTime(dayNum: any) { function getDateTime(dayNum: any) {
const dateDay = new Date() const dateDay = new Date()
dateDay.setDate(dateDay.getDate() + dayNum) //获取dayNum天后的日期 dateDay.setDate(dateDay.getDate() + dayNum) //获取dayNum天后的日期
console.log(dateDay) console.log(dateDay)
const y = dateDay.getFullYear() const y = dateDay.getFullYear()
const m = dateDay.getMonth() + 1 < 10 ? '0' + (dateDay.getMonth() + 1) : dateDay.getMonth() + 1 //获取当前月份的日期，不足10补0 const m =
dateDay.getMonth() + 1 < 10
? '0' + (dateDay.getMonth() + 1)
: dateDay.getMonth() + 1 //获取当前月份的日期，不足10补0
const d = dateDay.getDate() < 10 ? '0' + dateDay.getDate() : dateDay.getDate() //获取当前几号，不足10补0 const d = dateDay.getDate() < 10 ? '0' + dateDay.getDate() : dateDay.getDate() //获取当前几号，不足10补0
return y + '-' + m + '-' + d return y + '-' + m + '-' + d
} }
...@@ -23,26 +39,102 @@ const end_time = getDateTime(90) ...@@ -23,26 +39,102 @@ const end_time = getDateTime(90)
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'success', params: object): void (e: 'success', params: object): void
}>() }>()
// 创建订单
const handleCreateOrder = () => {
if (wechat) {
const openId = localStorage.getItem('openId')
if (!openId) {
getOpenId(query.code, pay)
return Promise.reject('openId不存在')
}
pay()
} else if (alipay) {
pay()
}
}
// 去支付
function pay() {
const params: any = {
shop_id: '6998523899570814976',
spu_id: '6998525810348916736',
sku_id: '6998525810365693952',
redirect_url: '',
buy_count: '1',
notify_url: `https://ep-lms-api.ezijing.com/v2/student/push?tenant=paa&sso_id=${user.user?.id}&class_id=${props.shopItem?.class_id}&course_flag=1&course_id=${props.shopItem?.course_id}`
}
if (payMode.value === 4 && wechat) {
params.payment_method = '4'
// 微信扫码支付
} else if (payMode.value === 12 && alipay) {
params.payment_method = '12'
}
createOrder(params).then((order) => {
orderInfo.value = order
if (wechat) {
wxJSPay(order, getOrder())
} else if (alipay) {
location.href = orderInfo.value[0]?.payment_url
}
})
}
// 获取订单
function getOrder() {
return getOrderList({
order_detail_id: orderInfo.value[0].order_detail_id
}).then((resp) => {
orderInfoDetail.value = resp.data[0]
const params = {
status: 'success',
orderId: orderInfoDetail.value.order_id,
payPrice: orderInfoDetail.value.payment_money,
payStatus: orderInfoDetail.value.order_status
}
emit('success', params)
})
}
const handlePay = () => { const handlePay = () => {
if (isAgree.value === false) { if (isAgree.value === false) {
ElMessage.warning('请先勾选紫荆金保服务协议') ElMessage.warning('请先勾选紫荆金保服务协议')
} else { } else {
if (user.isLogin) { if (user.isLogin) {
const params = { console.log(mobile)
payMode: payMode.value, if (!mobile.value) {
status: 'order' console.log('111')
const params = {
payMode: payMode.value,
status: 'order'
}
emit('success', params)
} else {
console.log('222')
handleCreateOrder()
} }
emit('success', params)
} else { } else {
window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}` window.location.href = `${
import.meta.env.VITE_LOGIN_URL
}?rd=${encodeURIComponent(location.href)}`
} }
} }
} }
const checkdChange = (val: string) => {
currentCheck.value = val
}
const handlePrev = () => {
router.push({
path: `/shop/detail/${props.shopItem?.id}`,
query: {
payStatus: orderInfoDetail.value.order_status
}
})
}
</script> </script>
<template> <template>
<div> <div>
<div class="main_con"> <div class="main_con" v-if="!mobile">
<div class="con_tit">课程信息确认</div> <div class="con_tit">课程信息确认</div>
<div class="con_pay"> <div class="con_pay">
<div class="pay_course"> <div class="pay_course">
...@@ -52,24 +144,32 @@ const handlePay = () => { ...@@ -52,24 +144,32 @@ const handlePay = () => {
/> />
<div class="course_info"> <div class="course_info">
<div class="info_tit">{{ shopItem?.title }}</div> <div class="info_tit">{{ shopItem?.title }}</div>
<div class="info_range">有效期：{{ start_time }} 至 {{ end_time }}</div> <div class="info_range">
有效期：{{ start_time }} 至 {{ end_time }}
</div>
<div class="info_price"> <div class="info_price">
<div class="price_icon">¥</div> <div class="price_icon">¥</div>
<div class="price_num">{{ shopItem?.price }}</div> <div class="price_num">{{ shopItem?.price }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="con_message" v-if="user.isLogin">课程提醒将发送到您的手机：{{ user?.mobile }}</div> <div class="con_message" v-if="user.isLogin">
课程提醒将发送到您的手机：{{ user?.mobile }}
</div>
<div class="con_mode"> <div class="con_mode">
<div class="mode_tit">支付方式</div> <div class="mode_tit">支付方式</div>
<div class="mode_radio"> <div class="mode_radio">
<el-radio-group v-model="payMode"> <el-radio-group v-model="payMode">
<el-radio :label="1" size="large" border> <el-radio :label="1" size="large" border>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_ali.png" /> <img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_ali.png"
/>
<span class="radio_tit">支付宝支付</span> <span class="radio_tit">支付宝支付</span>
</el-radio> </el-radio>
<el-radio :label="2" size="large" border> <el-radio :label="2" size="large" border>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_wechat.png" /> <img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_wechat.png"
/>
<span class="radio_tit">微信支付</span> <span class="radio_tit">微信支付</span>
</el-radio> </el-radio>
</el-radio-group> </el-radio-group>
...@@ -78,10 +178,18 @@ const handlePay = () => { ...@@ -78,10 +178,18 @@ const handlePay = () => {
<div class="con_footer"> <div class="con_footer">
<div class="footer_left"> <div class="footer_left">
<el-checkbox v-model="isAgree" <el-checkbox v-model="isAgree"
><span style="color: #666666; font-size: 16px; font-weight: 400">同意</span ><span style="color: #666666; font-size: 16px; font-weight: 400"
><a style="color: #e3a232; font-size: 16px; font-weight: 400">紫荆金保服务协议</a></el-checkbox >同意</span
><a style="color: #e3a232; font-size: 16px; font-weight: 400"
>紫荆金保服务协议</a
></el-checkbox
>
<div
class="left_desc"
:class="isAgree === false ? 'left_desc_active' : ''"
> >
<div class="left_desc" :class="isAgree === false ? 'left_desc_active' : ''">请先勾选紫荆金保服务协议</div> 请先勾选紫荆金保服务协议
</div>
</div> </div>
<div class="footer_right"> <div class="footer_right">
<div class="right_top"> <div class="right_top">
...@@ -96,153 +204,389 @@ const handlePay = () => { ...@@ -96,153 +204,389 @@ const handlePay = () => {
</div> </div>
</div> </div>
</div> </div>
<div class="main_con" v-else>
<div class="con_nav" @click="handlePrev">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/prev_mini.png"
/>
<div class="nav_title">确认订单</div>
</div>
<div class="course_con">
<img
src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
alt=""
/>
<div class="course_dec">
<div class="info_title">{{ shopItem?.title }}</div>
<div class="info_date">
有效期：{{ start_time }} 至 {{ end_time }}
</div>
</div>
</div>
<div class="pay_con">
<div class="pay_phone">
课程提醒将发送到您的手机：<i style="font-weight: bold">13900012345</i>
</div>
<div class="pay_line"></div>
<div class="pay_mode">
<div class="mode_item">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_ali.png"
/>
<div class="radio_tit">支付宝支付</div>
<div
:class="payMode === '12' ? 'radio_check_active' : 'radio_check'"
@click="checkdChange('12')"
>
<template v-if="currentCheck === '12'">
<el-icon><Check /></el-icon>
</template>
</div>
</div>
<div class="mode_item">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_wechat.png"
/>
<div class="radio_tit">微信支付</div>
<div
:class="payMode === '4' ? 'radio_check_active' : 'radio_check'"
@click="checkdChange('4')"
>
<template v-if="currentCheck === '4'">
<el-icon><Check /></el-icon>
</template>
</div>
</div>
</div>
</div>
<div class="argreement_con">
<el-checkbox v-model="isAgree"
><span style="color: #666666; font-size: 16px; font-weight: 400"
>同意</span
><a style="color: #e3a232; font-size: 16px; font-weight: 400"
>紫荆金保服务协议</a
></el-checkbox
>
<div
class="left_desc"
:class="isAgree === false ? 'left_desc_active' : ''"
>
请先勾选紫荆金保服务协议
</div>
</div>
<div class="to_pay_main" @click="handlePay">
<div class="pay_price">
<span class="to_pay">立即支付</span>
<span class="to_price"><i style="font-size: 12px">¥</i>1999.00</span>
</div>
</div>
</div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.main_con { .is-h5 {
width: 1200px; .main_con {
margin: auto; padding: 0 0.28rem;
.con_nav {
.con_tit {
font-size: 28px;
font-weight: 500;
line-height: 34px;
color: #333333;
padding-top: 39px;
}
.con_pay {
height: 721px;
background: #ffffff;
margin-top: 26px;
padding: 52px 60px 107px 40px;
box-sizing: border-box;
.pay_course {
display: flex; display: flex;
padding-bottom: 41px; align-items: center;
border-bottom: 1px solid #e6e6e6; justify-content: center;
position: relative;
img { img {
width: 257px; position: absolute;
height: 166px; left: 0;
}
.nav_title {
font-size: 0.32rem;
font-weight: 500;
line-height: 0.34rem;
color: #333333;
} }
.course_info { }
margin-left: 35px; .course_con {
.info_tit { margin: 0.3rem 0;
font-size: 24px; height: 1.97rem;
background: #ffffff;
opacity: 1;
border-radius: 0.12rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.28rem 0.2rem;
box-sizing: border-box;
gap: 0.2rem;
img {
width: 2.2rem;
height: 1.4rem;
}
.course_dec {
display: flex;
flex-direction: column;
gap: 0.2rem;
.info_title {
height: 0.64rem;
font-size: 0.28rem;
font-weight: 500; font-weight: 500;
line-height: 34px; line-height: 0.36rem;
color: #333333; color: #333333;
} }
.info_range { .info_date {
font-size: 14px; height: 0.22rem;
font-size: 0.22rem;
font-weight: 400; font-weight: 400;
line-height: 34px; line-height: 0.3rem;
color: #666666; color: #999999;
margin-top: 26px;
} }
.info_price { }
}
.pay_con {
width: 6.9rem;
box-sizing: border-box;
margin-bottom: 0.53rem;
background: #fff;
border-radius: 0.12rem;
padding: 0.54rem 0.4rem;
.pay_phone {
text-align: center;
font-size: 0.24rem;
color: #333333;
}
.pay_line {
height: 0px;
border: 1px solid #f8f8f8;
opacity: 1;
margin: 0.57rem 0 0.54rem 0;
}
.pay_mode {
display: flex;
flex-direction: column;
gap: 0.4rem;
.mode_item {
display: flex; display: flex;
align-items: flex-end; align-items: center;
margin-top: 42px; position: relative;
.price_icon { img {
font-size: 20px; width: 0.3rem;
font-weight: 500; height: 0.3rem;
color: #aa1941;
} }
.price_num { .radio_tit {
font-size: 30px; margin-left: 0.2rem;
font-weight: normal; }
line-height: 34px; .radio_check_active {
color: #aa1941; position: absolute;
right: 0;
width: 0.25rem;
height: 0.25rem;
border-radius: 50%;
display: flex;
align-items: center;
font-size: 12px;
color: #fff;
background-color: #f1b44e;
box-sizing: border-box;
}
.radio_check {
position: absolute;
right: 0;
width: 0.25rem;
height: 0.25rem;
border: 1px solid #707070;
border-radius: 50%;
display: flex;
align-items: center;
font-size: 12px;
color: #fff;
box-sizing: border-box;
} }
} }
} }
} }
.argreement_con {
text-align: center;
.left_desc {
color: #8888;
margin-left: 0.3rem;
}
}
.to_pay_main {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 1.2rem;
background: #fff;
opacity: 1;
border-radius: 0.2rem 0.2rem 0px 0px;
padding: 0.24rem 0.3rem 0.16rem 0.3rem;
box-sizing: border-box;
.pay_price {
width: 100%;
height: 0.8rem;
background: linear-gradient(102deg, #f2ca8c 0%, #e69b1c 100%);
border-radius: 0.4rem;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
gap: 0.18rem;
.to_pay {
font-size: 0.28rem;
}
.to_price {
font-size: 0.4rem;
}
}
}
} }
.con_message { }
margin-top: 30px; .is-pc {
font-size: 18px; .main_con {
font-weight: 500; width: 1200px;
line-height: 34px; margin: auto;
color: #333333;
} .con_tit {
.con_mode { font-size: 28px;
margin-top: 43px; font-weight: 500;
display: flex;
align-items: center;
.mode_tit {
font-size: 16px;
font-weight: 400;
line-height: 34px; line-height: 34px;
color: #333333; color: #333333;
padding-top: 39px;
}
.con_pay {
height: 721px;
background: #ffffff;
margin-top: 26px;
padding: 52px 60px 107px 40px;
box-sizing: border-box;
.pay_course {
display: flex;
padding-bottom: 41px;
border-bottom: 1px solid #e6e6e6;
img {
width: 257px;
height: 166px;
}
.course_info {
margin-left: 35px;
.info_tit {
font-size: 24px;
font-weight: 500;
line-height: 34px;
color: #333333;
}
.info_range {
font-size: 14px;
font-weight: 400;
line-height: 34px;
color: #666666;
margin-top: 26px;
}
.info_price {
display: flex;
align-items: flex-end;
margin-top: 42px;
.price_icon {
font-size: 20px;
font-weight: 500;
color: #aa1941;
}
.price_num {
font-size: 30px;
font-weight: normal;
line-height: 34px;
color: #aa1941;
}
}
}
}
} }
.mode_radio { .con_message {
margin-left: 44px; margin-top: 30px;
font-size: 18px;
font-weight: 500;
line-height: 34px;
color: #333333;
} }
} .con_mode {
.con_footer { margin-top: 43px;
margin-top: 74px; display: flex;
display: flex; align-items: center;
justify-content: space-between; .mode_tit {
.footer_left { font-size: 16px;
padding-top: 12px;
.left_desc {
font-size: 14px;
font-weight: 400; font-weight: 400;
color: #999999; line-height: 34px;
margin: 14px 0 0 21px; color: #333333;
} }
.left_desc_active { .mode_radio {
color: #aa1941; margin-left: 44px;
} }
} }
.con_footer {
.footer_right { margin-top: 74px;
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
align-items: flex-end; .footer_left {
.right_top { padding-top: 12px;
display: flex; .left_desc {
.top_tit { font-size: 14px;
font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 34px; color: #999999;
color: #333333; margin: 14px 0 0 21px;
}
.left_desc_active {
color: #aa1941;
} }
.top_price { }
.footer_right {
display: flex;
flex-direction: column;
align-items: flex-end;
.right_top {
display: flex; display: flex;
margin-left: 53px; .top_tit {
.price_icon { font-size: 16px;
font-size: 22px; font-weight: 400;
font-weight: 500;
line-height: 34px; line-height: 34px;
color: #aa1941; color: #333333;
} }
.price_num { .top_price {
font-size: 36px; display: flex;
font-weight: normal; margin-left: 53px;
line-height: 34px; .price_icon {
color: #aa1941; font-size: 22px;
font-weight: 500;
line-height: 34px;
color: #aa1941;
}
.price_num {
font-size: 36px;
font-weight: normal;
line-height: 34px;
color: #aa1941;
}
} }
} }
} .right_btn {
.right_btn { width: 153px;
width: 153px; height: 48px;
height: 48px; background: #edb24c;
background: #edb24c; border-radius: 24px;
border-radius: 24px; font-size: 18px;
font-size: 18px; font-weight: 400;
font-weight: 400; line-height: 48px;
line-height: 48px; color: #ffffff;
color: #ffffff; text-align: center;
text-align: center; margin-top: 20px;
margin-top: 20px; cursor: pointer;
cursor: pointer; }
} }
} }
} }
} }
:deep(.el-radio) { :deep(.el-radio) {
width: 220px; width: 220px;
height: 83px; height: 83px;
......
src/modules/pay/components/Order.vue
浏览文件 @ 9984af7a
...@@ -8,10 +8,7 @@ const timer = ref() ...@@ -8,10 +8,7 @@ const timer = ref()
const qrCodeUrl = ref('') const qrCodeUrl = ref('')
const payStatus = ref('') const payStatus = ref('')
const orderId = ref('') const orderId = ref('')
// const UA = navigator.userAgent
// const isMobile = /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA))
// const isWechat = /micromessenger/i.test(UA)
// const isAliPay = /alipayclient/i.test(UA)
const props = defineProps({ const props = defineProps({
payMethod: { payMethod: {
type: Number type: Number
...@@ -50,7 +47,7 @@ onMounted(() => { ...@@ -50,7 +47,7 @@ onMounted(() => {
}) })
const handleGetOrderList = (id: any) => { const handleGetOrderList = (id: any) => {
getOrderList({ order_detail_id: id }).then(res => { getOrderList({ order_detail_id: id }).then((res) => {
payStatus.value = res.data[0].order_status payStatus.value = res.data[0].order_status
orderId.value = res.data[0].order_id orderId.value = res.data[0].order_id
if (payStatus.value === '4') { if (payStatus.value === '4') {
...@@ -68,7 +65,6 @@ const handleGetOrderList = (id: any) => { ...@@ -68,7 +65,6 @@ const handleGetOrderList = (id: any) => {
</script> </script>
<template> <template>
{{ payMethod }}
<div class="main"> <div class="main">
<div class="main_order"> <div class="main_order">
<div class="order_id"> <div class="order_id">
...@@ -79,7 +75,7 @@ const handleGetOrderList = (id: any) => { ...@@ -79,7 +75,7 @@ const handleGetOrderList = (id: any) => {
<div class="price_tit">支付金额：</div> <div class="price_tit">支付金额：</div>
<div class="price_con"> <div class="price_con">
<div class="con_icon">¥</div> <div class="con_icon">¥</div>
<div class="con_num">1999.00</div> <div class="con_num">{{ shopItem?.price }}</div>
</div> </div>
</div> </div>
<div class="line"></div> <div class="line"></div>
...@@ -94,8 +90,13 @@ const handleGetOrderList = (id: any) => { ...@@ -94,8 +90,13 @@ const handleGetOrderList = (id: any) => {
" "
class="con_style" class="con_style"
/> />
<span class="radio_tit">{{ payMethod === 1 ? '支付宝支付' : '微信支付' }}</span> <span class="radio_tit">{{
<img src="https://webapp-pub.ezijing.com/project_online/fi/icon_pay_checked.png" class="checked_img" /> payMethod === 1 ? '支付宝支付' : '微信支付'
}}</span>
<img
src="https://webapp-pub.ezijing.com/project_online/fi/icon_pay_checked.png"
class="checked_img"
/>
</div> </div>
</div> </div>
<div class="order_qaCode"> <div class="order_qaCode">
...@@ -103,8 +104,15 @@ const handleGetOrderList = (id: any) => { ...@@ -103,8 +104,15 @@ const handleGetOrderList = (id: any) => {
<div class="left_code"> <div class="left_code">
<qrcode-vue :value="qrCodeUrl" :size="197" level="H"></qrcode-vue> <qrcode-vue :value="qrCodeUrl" :size="197" level="H"></qrcode-vue>
</div> </div>
<div class="left_desc" :class="payMethod === 1 ? 'left_desc_ali' : 'left_desc_wechat'"> <div
{{ payMethod === 1 ? '请打开手机支付宝，扫一扫完成支付' : '请打开手机微信，扫一扫完成支付' }} class="left_desc"
:class="payMethod === 1 ? 'left_desc_ali' : 'left_desc_wechat'"
>
{{
payMethod === 1
? '请打开手机支付宝，扫一扫完成支付'
: '请打开手机微信，扫一扫完成支付'
}}
</div> </div>
</div> </div>
<img <img
......
src/modules/pay/components/PaySucess.vue
浏览文件 @ 9984af7a
<script setup lang="ts"> <script setup lang="ts">
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const router = useRouter() const router = useRouter()
const props = defineProps({ const props = defineProps({
payInfo: { payInfo: {
...@@ -8,6 +10,20 @@ const props = defineProps({ ...@@ -8,6 +10,20 @@ const props = defineProps({
type: Object type: Object
} }
}) })
function getDateTime(dayNum: any) {
const dateDay = new Date()
dateDay.setDate(dateDay.getDate() + dayNum) //获取dayNum天后的日期
console.log(dateDay)
const y = dateDay.getFullYear()
const m =
dateDay.getMonth() + 1 < 10
? '0' + (dateDay.getMonth() + 1)
: dateDay.getMonth() + 1 //获取当前月份的日期，不足10补0
const d = dateDay.getDate() < 10 ? '0' + dateDay.getDate() : dateDay.getDate() //获取当前几号，不足10补0
return y + '-' + m + '-' + d
}
const start_time = getDateTime(0)
const end_time = getDateTime(90)
const handleStudy = () => { const handleStudy = () => {
window.open('https://paa-learning.ezijing.com') window.open('https://paa-learning.ezijing.com')
} }
...@@ -22,10 +38,13 @@ const handlePrev = () => { ...@@ -22,10 +38,13 @@ const handlePrev = () => {
</script> </script>
<template> <template>
<div class="main_pay"> <div class="main_pay" v-if="!mobile">
<div class="pay_con"> <div class="pay_con">
<div class="con_top"> <div class="con_top">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_sucess.png" alt="" /> <img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_sucess.png"
alt=""
/>
<div class="top_tit">支付成功！</div> <div class="top_tit">支付成功！</div>
</div> </div>
<div class="con_info"> <div class="con_info">
...@@ -37,7 +56,9 @@ const handlePrev = () => { ...@@ -37,7 +56,9 @@ const handlePrev = () => {
<div class="price_tit">支付金额：</div> <div class="price_tit">支付金额：</div>
<div class="price_id">¥{{ payInfo?.payPrice }}</div> <div class="price_id">¥{{ payInfo?.payPrice }}</div>
</div> </div>
<div class="info_tips">若有疑问请与客服联系，我们将尽快为您提供服务</div> <div class="info_tips">
若有疑问请与客服联系，我们将尽快为您提供服务
</div>
<div class="info_btn"> <div class="info_btn">
<div class="btn_prev" @click="handlePrev">返回</div> <div class="btn_prev" @click="handlePrev">返回</div>
<div class="btn_study" @click="handleStudy">开始学习</div> <div class="btn_study" @click="handleStudy">开始学习</div>
...@@ -45,90 +66,237 @@ const handlePrev = () => { ...@@ -45,90 +66,237 @@ const handlePrev = () => {
</div> </div>
</div> </div>
</div> </div>
<div class="main_pay_mobile" v-else>
<div class="con_nav">
<img
class="img1"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/prev_mini.png"
alt=""
srcset=""
@click="handlePrev"
/>
<div class="nav_title">
<img
class="img2"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_sucess.png"
alt=""
/>
支付成功
</div>
</div>
<div class="course_con">
<img
src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
@click="handlePrev"
/>
<div class="course_dec">
<div class="info_title">{{ shopItem?.title }}</div>
<div class="info_date">有效期：{{ start_time }} 至 {{ end_time }}</div>
</div>
</div>
<div class="order_main">
<div class="order_num">
商品订单：<span>{{ payInfo?.orderId }}</span>
</div>
<div class="order_price">
支付金额：<span>{{ payInfo?.payPrice }}</span>
</div>
<div class="order_after_sales">
若有疑问请与客服联系，我们将尽快为您提供服务
</div>
</div>
<div class="start_study">
<div class="study_con" @click="handleStudy">开始学习</div>
</div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.main_pay { .is-h5 {
width: 100%; .main_pay_mobile {
padding: 50px 0 60px 0; padding: 0 0.28rem;
.con_nav {
.pay_con {
width: 1200px;
margin: auto;
background: #ffffff;
border-radius: 6px;
.con_top {
width: 1200px;
height: 106px;
background: #f4fff5;
border-radius: 6px 6px 0px 0px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 40px 0 40px 67px; justify-content: center;
box-sizing: border-box; position: relative;
.top_tit { .img1 {
margin-left: 14px; position: absolute;
left: 0;
}
.nav_title {
height: 0.32rem;
font-size: 0.32rem;
font-weight: 500;
line-height: 0.34rem;
color: #333333;
.img2 {
width: 0.36rem;
height: 0.36rem;
}
} }
} }
.con_info { .course_con {
padding: 0 0 82px 67px; margin: 0.3rem 0;
.info_order { height: 1.97rem;
background: #ffffff;
opacity: 1;
border-radius: 0.12rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.28rem 0.2rem;
box-sizing: border-box;
gap: 0.2rem;
img {
width: 2.2rem;
height: 1.4rem;
}
.course_dec {
display: flex; display: flex;
font-weight: 400; flex-direction: column;
margin-top: 43px; gap: 0.2rem;
.info_title {
.order_tit { height: 0.64rem;
font-size: 0.28rem;
font-weight: 500;
line-height: 0.36rem;
color: #333333; color: #333333;
} }
.order_id { .info_date {
height: 0.22rem;
font-size: 0.22rem;
font-weight: 400;
line-height: 0.3rem;
color: #999999; color: #999999;
} }
} }
.info_price { }
display: flex; .order_main {
font-weight: 400; width: 100%;
margin-top: 29px; background: #fff;
border-radius: 0.12rem;
.price_tit { margin-bottom: 1.91rem;
color: #333333; padding: 0.4rem;
} box-sizing: border-box;
.price_id { display: flex;
color: #999999; flex-direction: column;
gap: 0.36rem;
font-weight: 400;
.order_num,
.order_price {
font-size: 0.24rem;
color: #333;
span {
color: #999;
} }
} }
.info_tips { .order_after_sales {
font-size: 14px; font-size: 0.22rem;
font-weight: 400; color: #999;
color: #999999; }
margin-top: 30px; }
.start_study {
display: flex;
align-items: center;
justify-content: center;
.study_con {
width: 6.1rem;
height: 0.8rem;
background: linear-gradient(102deg, #f2ca8c 0%, #e69b1c 100%);
opacity: 1;
border-radius: 0.4rem;
text-align: center;
line-height: 0.8rem;
color: #fff;
font-size: 0.28rem;
} }
.info_btn { }
margin-top: 46px; }
}
.is-pc {
.main_pay {
width: 100%;
padding: 50px 0 60px 0;
.pay_con {
width: 1200px;
margin: auto;
background: #ffffff;
border-radius: 6px;
.con_top {
width: 1200px;
height: 106px;
background: #f4fff5;
border-radius: 6px 6px 0px 0px;
display: flex; display: flex;
.btn_prev { align-items: center;
width: 71px; padding: 40px 0 40px 67px;
height: 32px; box-sizing: border-box;
border: 1px solid #999999; .top_tit {
border-radius: 16px; margin-left: 14px;
line-height: 32px; }
font-size: 16px; }
.con_info {
padding: 0 0 82px 67px;
.info_order {
display: flex;
font-weight: 400; font-weight: 400;
color: #666666; margin-top: 43px;
text-align: center;
cursor: pointer; .order_tit {
color: #333333;
}
.order_id {
color: #999999;
}
}
.info_price {
display: flex;
font-weight: 400;
margin-top: 29px;
.price_tit {
color: #333333;
}
.price_id {
color: #999999;
}
} }
.btn_study { .info_tips {
width: 96px; font-size: 14px;
height: 32px;
background: #edb24c;
border-radius: 24px;
font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 32px; color: #999999;
color: #ffffff; margin-top: 30px;
text-align: center; }
margin-left: 21px; .info_btn {
cursor: pointer; margin-top: 46px;
display: flex;
.btn_prev {
width: 71px;
height: 32px;
border: 1px solid #999999;
border-radius: 16px;
line-height: 32px;
font-size: 16px;
font-weight: 400;
color: #666666;
text-align: center;
cursor: pointer;
}
.btn_study {
width: 96px;
height: 32px;
background: #edb24c;
border-radius: 24px;
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #ffffff;
text-align: center;
margin-left: 21px;
cursor: pointer;
}
} }
} }
} }
......
src/modules/pay/views/Index.vue
浏览文件 @ 9984af7a
...@@ -3,11 +3,12 @@ import Confirm from '../components/Confirm.vue' ...@@ -3,11 +3,12 @@ import Confirm from '../components/Confirm.vue'
import Order from '../components/Order.vue' import Order from '../components/Order.vue'
import PaySucess from '../components/PaySucess.vue' import PaySucess from '../components/PaySucess.vue'
import { useShopStore } from '@/stores/shop' import { useShopStore } from '@/stores/shop'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const { shopItem } = useShopStore() const { shopItem } = useShopStore()
const status = ref('confirm') // confirm | order | success const status = ref('confirm') // confirm | order | success
const payMethod = ref(0) const payMethod = ref(0)
const payInfo = ref({}) const payInfo = ref({})
// const orderId = ref('')
const handleSuccess = (data: any) => { const handleSuccess = (data: any) => {
payMethod.value = data.payMode payMethod.value = data.payMode
status.value = data.status status.value = data.status
...@@ -16,13 +17,43 @@ const handleOrder = (data: any) => { ...@@ -16,13 +17,43 @@ const handleOrder = (data: any) => {
payInfo.value = data payInfo.value = data
status.value = data.status status.value = data.status
} }
const handleSuccessH5 = (data: any) => {
payInfo.value = data
status.value = data.status
}
</script> </script>
<template> <template>
<div class="pay_main"> <div class="pay_main" v-if="!mobile">
<Confirm :shopItem="shopItem" @success="handleSuccess" v-if="status === 'confirm'" /> <Confirm
<Order :shopItem="shopItem" :payMethod="payMethod" @update="handleOrder" v-if="status === 'order'" /> :shopItem="shopItem"
<PaySucess :shopItem="shopItem" :payInfo="payInfo" v-if="status === 'success'" /> @success="handleSuccess"
v-if="status === 'confirm'"
/>
<Order
:shopItem="shopItem"
:payMethod="payMethod"
@update="handleOrder"
v-if="status === 'order'"
/>
<PaySucess
:shopItem="shopItem"
:payInfo="payInfo"
v-if="status === 'success'"
/>
</div>
<div v-else>
<Confirm
:shopItem="shopItem"
@success="handleSuccessH5"
v-if="status === 'confirm'"
/>
<PaySucess
:shopItem="shopItem"
:payInfo="payInfo"
v-if="status === 'success'"
/>
</div> </div>
</template> </template>
......
src/modules/shop/components/CourseCatalogH5.vue 0 → 100644
浏览文件 @ 9984af7a
<script lang="ts" setup>
const router = useRouter()
defineProps({
shopItem: {
type: Object
}
})
const defaultProps = {
children: 'children',
label: 'label'
}
const handleDetail = (item: any) => {
router.push(`/shop/detail/${item.id}`)
}
</script>
<template>
<div class="course_info course_info1">
<div class="info_tit">课程目录</div>
<div class="info_line"></div>
<div class="info_con1" v-if="shopItem?.type === '课程包'">
<div
class="course_list"
v-for="(item, index) in shopItem?.course_list"
:key="index"
@click="handleDetail(item)"
>
<img
src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
alt=""
/>
<div class="list_info">
<div class="tit">{{ item.title }}</div>
<div class="hour">{{ item.course_hour }}</div>
</div>
</div>
</div>
<div class="info_con1" v-else>
<el-tree
:data="shopItem?.content_list"
:props="defaultProps"
accordion
highlight-current
node-key="id"
:default-expanded-keys="[shopItem?.content_list[0].id]"
>
<template #default="{ node }">
<span class="custom-tree-node">
<span class="label">{{ node.label }}</span>
<span class="icon">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_jt.png" alt="" />
</span>
</span>
</template>
</el-tree>
</div>
</div>
</template>
<style lang="scss" scoped>
.course_info {
margin-top: 0.3rem;
.info_tit {
font-size: 0.28rem;
font-weight: 500;
color: #333333;
}
.info_line {
display: none;
}
.info_con1 {
padding: 0.17rem 0.2rem;
border-top: 0.06rem solid #fff5e1 !important;
border: 1px solid #fff5e1;
border-radius: 15px;
margin-top: 0.2rem;
.custom-tree-node{
.label{
width: 5rem;
display: inline-block;
}
.icon{
img{
height:0.09rem;
}
}
}
.course_list:last-child {
border: none;
}
.course_list {
display: flex;
border-bottom: 1px solid #e8e8e8;
padding: 0.2rem 0;
box-sizing: border-box;
cursor: pointer;
img {
width: 2.2rem;
height: 1.4rem;
border-radius: 0.12rem;
}
.list_info {
height: 1.4rem;
margin-left: 0.21rem;
padding: 0.13rem 0 0.15rem 0;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
.tit {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #666666;
}
.hour {
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #999999;
}
}
}
}
}
:deep(.el-tree-node__content){
height: 0.6rem;
margin-bottom: 0.2rem;
border-radius: 10px;
background: #f5f8fb;
}
:deep(.el-icon svg) {
display: none;
}
:deep(.el-tree-node__label) {
font-size: 0.24rem;
font-weight: 400;
line-height: 0.32rem;
color: #333333;
}
:deep(.el-tree-node__children) {
.el-tree-node__content {
background: #ffffff !important;
border-bottom: 0.01rem solid #f4f4f4;
}
.el-tree-node__label {
font-size: 0.22rem;
font-weight: 400;
line-height: 0.32rem;
color: #666666;
display: inline !important;
}
.icon {
display: none;
}
}
</style>
\ No newline at end of file
src/modules/shop/components/CourseIntroduceCard.vue → src/modules/shop/components/CourseCatalogPC.vue
浏览文件 @ 9984af7a
<script lang="ts" setup> <script lang="ts" setup>
const router = useRouter() const router = useRouter()
...@@ -6,7 +7,6 @@ defineProps({ ...@@ -6,7 +7,6 @@ defineProps({
type: Object type: Object
} }
}) })
const defaultProps = { const defaultProps = {
children: 'children', children: 'children',
label: 'label' label: 'label'
...@@ -16,23 +16,8 @@ const handleDetail = (item: any) => { ...@@ -16,23 +16,8 @@ const handleDetail = (item: any) => {
router.push(`/shop/detail/${item.id}`) router.push(`/shop/detail/${item.id}`)
} }
</script> </script>
<template> <template>
<div> <div class="course_info course_info1">
<div class="con_course">
<div class="course_info">
<div class="info_tit">课程介绍</div>
<div class="info_line"></div>
<div class="info_con">
{{ shopItem?.desc }}
</div>
</div>
<div class="course_info course_info1">
<div class="info_tit">适用人群</div>
<div class="info_line"></div>
<div class="info_con">{{ shopItem?.for_people }}</div>
</div>
<div class="course_info course_info1">
<div class="info_tit">课程目录</div> <div class="info_tit">课程目录</div>
<div class="info_line"></div> <div class="info_line"></div>
<div class="info_con1" v-if="shopItem?.type === '课程包'"> <div class="info_con1" v-if="shopItem?.type === '课程包'">
...@@ -63,7 +48,7 @@ const handleDetail = (item: any) => { ...@@ -63,7 +48,7 @@ const handleDetail = (item: any) => {
> >
<template #default="{ node }"> <template #default="{ node }">
<span class="custom-tree-node"> <span class="custom-tree-node">
<span style="width: 403px; display: inline-block">{{ node.label }}</span> <span class="label">{{ node.label }}</span>
<span style="margin-left: 205px" class="icon"> <span style="margin-left: 205px" class="icon">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_jt.png" alt="" /> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_jt.png" alt="" />
</span> </span>
...@@ -71,17 +56,12 @@ const handleDetail = (item: any) => { ...@@ -71,17 +56,12 @@ const handleDetail = (item: any) => {
</template> </template>
</el-tree> </el-tree>
</div> </div>
</div>
</div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.con_course {
padding: 28px 45px 53px 45px;
background: #ffffff;
box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.1);
border-radius: 15px;
.course_info1 { .course_info1 {
margin-top: 40px; margin-top: 40px;
} }
...@@ -117,6 +97,12 @@ const handleDetail = (item: any) => { ...@@ -117,6 +97,12 @@ const handleDetail = (item: any) => {
font-weight: 400; font-weight: 400;
line-height: 32px; line-height: 32px;
color: #333333; color: #333333;
.custom-tree-node{
.label{
width: 403px; display: inline-block;
}
}
.course_list:last-child { .course_list:last-child {
border: none; border: none;
} }
...@@ -152,37 +138,46 @@ const handleDetail = (item: any) => { ...@@ -152,37 +138,46 @@ const handleDetail = (item: any) => {
} }
} }
} }
}
:deep(.el-tree-node__content) { :deep(.el-tree-node__content){
height: 50px; height: 50px;
margin-bottom: 16px; margin-bottom: 16px;
border-radius: 10px; border-radius: 10px;
background: #f5f8fb; background: #f5f8fb;
}
:deep(.el-icon svg) {
display: none;
}
:deep(.el-tree-node__label) {
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #333333;
}
:deep(.el-tree-node__children) {
.el-tree-node__content {
background: #ffffff !important;
border-bottom: 1px solid #f4f4f4;
} }
.el-tree-node__label { :deep(.el-icon svg) {
font-size: 14px; display: none;
}
:deep(.el-tree-node__label) {
font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 32px; line-height: 32px;
color: #666666; color: #333333;
display: inline !important;
} }
.icon { :deep(.el-tree-node__children) {
display: none; .el-tree-node__content {
background: #ffffff !important;
border-bottom: 1px solid #f4f4f4;
}
.el-tree-node__label {
font-size: 14px;
font-weight: 400;
line-height: 32px;
color: #666666;
display: inline !important;
}
.icon {
display: none;
}
}
.is-h5{
.info_con1{
.custom-tree-node{
}
} }
} }
</style> </style>
\ No newline at end of file
src/modules/shop/components/CourseFooter.vue 0 → 100644
浏览文件 @ 9984af7a
<script lang="ts" setup>
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const router = useRouter()
const props = defineProps({
payStatus:{
type:String
},
shopItem:{
type:Object
}
})
const buyDialogVisible = ref(false)
const handleBuyCourse = () => {
if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
window.open('https://paa-learning.ezijing.com')
} else {
if (props.shopItem?.type === '课程包') {
buyDialogVisible.value = true
} else {
router.push(`/shop/pay/${props.shopItem?.id}`)
}
}
}
</script>
<template>
<div class="detail_footer">
<div class="left_status" v-if="payStatus === '4' ||shopItem?.isBuy === true">已购买</div>
<template v-else>
<div class="footer_left">
<div class="left_tit">全部课程价格</div>
<div class="left_desc">根据课程价格累积计算</div>
</div>
<div class="footer_price" v-if="!mobile">
<div class="price_icon">¥</div>
<div class="price_price">{{shopItem?.price }}</div>
</div>
</template>
<div v-if="!mobile">
<div class="footer_btn" @click="handleBuyCourse">
{{ payStatus === '4' ||shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
</div>
</div>
<div v-else>
<div class="footer_btn" @click="handleBuyCourse" v-if="payStatus === '4' ||shopItem?.isBuy === true">
<div class="btn_buy">
立即学习
</div>
</div>
<div class="footer_btn" @click="handleBuyCourse" v-else >
<div class="footer_price">
<div class="price_icon">¥</div>
<div class="price_price">{{shopItem?.price }}</div>
</div>
<div class="btn_buy">
立即购买
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.is-pc{
.detail_footer {
width: 1200px;
height: 100px;
background: #ffffff;
box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.1);
border-radius: 15px;
margin: 30px auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 46px 0 60px;
box-sizing: border-box;
.left_status {
font-size: 24px;
font-weight: normal;
line-height: 34px;
color: #666666;
}
.footer_left {
.left_tit {
font-size: 16px;
font-weight: 400;
line-height: 34px;
color: #333333;
}
.left_desc {
font-size: 14px;
font-weight: 400;
line-height: 34px;
color: #999999;
}
}
.footer_price {
display: flex;
margin-left: 605px;
.price_icon {
font-size: 24px;
font-weight: 500;
line-height: 34px;
color: #aa1941;
}
.price_price {
font-size: 40px;
font-weight: normal;
line-height: 34px;
color: #aa1941;
}
}
.footer_btn {
width: 144px;
height: 48px;
line-height: 48px;
background: linear-gradient(180deg, #ffe9c6 0%, #e69b1c 100%);
border-radius: 24px;
font-size: 18px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-left: 43px;
cursor: pointer;
}
}
}
.is-h5{
.detail_footer{
border-radius: 0.2rem 0.2rem 0 0;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.3rem;
.left_status{
font-size: 0.24rem;
font-weight: normal;
color: #666666;
}
.footer_left{
.left_tit{
font-size: 0.24rem;
color: #333333;
}
.left_desc{
font-size: 0.22rem;
color: #999999;
}
.footer_price{
display: none;
}
}
.footer_btn{
width: 4.08rem;
height:0.8rem;
background: linear-gradient(102deg, #F2CA8C 0%, #E69B1C 100%);
border-radius: 0.4rem;
text-align: center;
line-height: 0.8rem;
color: #FFFFFF;
display: flex;
justify-content: space-around;
.footer_price{
display: flex;
padding-left: 0.48rem;
margin-right: 0.18rem;
.price_icon{
font-size: 0.24rem;
color:#ffffff;
margin-top:0.05rem;
}
.price_price{
font-size: 0.4rem;
}
}
.btn_buy{
font-size: 0.28rem;
color:#ffffff;
cursor: pointer;
}
}
}
}
</style>
\ No newline at end of file
src/modules/shop/components/CourseFor.vue 0 → 100644
浏览文件 @ 9984af7a
<script lang="ts" setup>
defineProps({
shopItem: {
type: Object
}
})
</script>
<template>
<div class="course_info">
<div class="course_info course_info1">
<div class="info_tit">适用人群</div>
<div class="info_line"></div>
<div class="info_con">{{ shopItem?.for_people }}</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.is-pc{
.course_info {
margin-top: 40px;
.info_tit {
font-size: 18px;
font-weight: 500;
color: #333333;
}
.info_line {
width: 31px;
height: 2px;
background: #c1ab85;
margin: 9px 0 0 21px;
}
.info_con {
padding: 32px 22px 30px 28px;
background-color: #f5f8fb;
margin-top: 20px;
border-radius: 16px;
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #666666;
}
}
}
.is-h5{
.course_info{
.info_tit{
font-size: 0.28rem;
font-weight: 500;
color: #333333;
}
.info_line{
display: none;
}
.info_con{
padding:0.2rem;
background: #F4F8FB;
font-size: 0.24rem;
font-weight: 400;
line-height: 0.4rem;
color: #666666;
margin-top:0.2rem;
border-radius: 0.16rem;
}
}
}
</style>
\ No newline at end of file
src/modules/shop/components/CourseIntrouduce.vue 0 → 100644
浏览文件 @ 9984af7a
<script lang="ts" setup>
defineProps({
shopItem: {
type: Object
}
})
</script>
<template>
<div class="course_info">
<div class="info_tit">课程介绍</div>
<div class="info_line"></div>
<div class="info_con">
{{ shopItem?.desc }}
</div>
</div>
</template>
<style lang="scss" scoped>
.course_info {
.info_tit {
font-size: 18px;
font-weight: 500;
color: #333333;
}
.info_line {
width: 31px;
height: 2px;
background: #c1ab85;
margin: 9px 0 0 21px;
}
.info_con {
padding: 32px 22px 30px 28px;
background-color: #f5f8fb;
margin-top: 20px;
border-radius: 16px;
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #666666;
}
}
.is-h5{
.course_info{
.info_tit{
font-size: 0.28rem;
font-weight: 500;
color: #333333;
}
.info_line{
display: none;
}
.info_con{
padding:0.2rem;
background: #F4F8FB;
font-size: 0.24rem;
font-weight: 400;
line-height: 0.4rem;
color: #666666;
margin-top:0.2rem;
border-radius: 0.16rem;
}
}
}
</style>
\ No newline at end of file
src/modules/shop/components/CourseListItem.vue
浏览文件 @ 9984af7a
...@@ -12,13 +12,11 @@ defineProps({ ...@@ -12,13 +12,11 @@ defineProps({
}) })
// 查看详情 // 查看详情
const handleDatail = (item: any) => { const handleDatail = (item: any) => {
console.log(item)
router.push({ router.push({
path: `/shop/detail/${item}` path: `/shop/detail/${item}`
}) })
} }
const handleBuy = (courseItem: any) => { const handleBuy = (courseItem: any) => {
{
if (courseItem?.isBuy === true) { if (courseItem?.isBuy === true) {
window.open('https://paa-learning.ezijing.com') window.open('https://paa-learning.ezijing.com')
} else { } else {
...@@ -29,13 +27,12 @@ const handleBuy = (courseItem: any) => { ...@@ -29,13 +27,12 @@ const handleBuy = (courseItem: any) => {
} }
} }
} }
}
</script> </script>
<template> <template>
<div class="main_tab" @click="handleDatail(courseItem?.id)"> <div class="main_tab">
<div class="tab_con"> <div class="tab_con">
<div class="con_left"> <div class="con_left" @click="handleDatail(courseItem?.id)">
<div class="left_img"> <div class="left_img">
<img <img
:src=" :src="
...@@ -48,7 +45,7 @@ const handleBuy = (courseItem: any) => { ...@@ -48,7 +45,7 @@ const handleBuy = (courseItem: any) => {
<div class="left_type">{{ courseItem?.type }}</div> <div class="left_type">{{ courseItem?.type }}</div>
</div> </div>
<div class="con_right"> <div class="con_right">
<div class="right_top"> <div class="right_top" @click="handleDatail(courseItem?.id)">
<div class="top_use"> <div class="top_use">
<div class="use_icon">适用人群</div> <div class="use_icon">适用人群</div>
<div class="use_tips">{{ courseItem?.for_people }}</div> <div class="use_tips">{{ courseItem?.for_people }}</div>
...@@ -89,17 +86,14 @@ const handleBuy = (courseItem: any) => { ...@@ -89,17 +86,14 @@ const handleBuy = (courseItem: any) => {
margin-top: 20px; margin-top: 20px;
box-sizing: border-box; box-sizing: border-box;
.con_left { .con_left {
// width: 446px;
// height: 250px;
// object-fit: cover;
position: relative; position: relative;
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer;
.left_img { .left_img {
width: 446px; width: 446px;
height: 250px; height: 250px;
object-fit: cover; object-fit: cover;
border-radius: 5px; border-radius: 5px;
} }
.left_type { .left_type {
...@@ -121,6 +115,7 @@ const handleBuy = (courseItem: any) => { ...@@ -121,6 +115,7 @@ const handleBuy = (courseItem: any) => {
margin-left: 32px; margin-left: 32px;
width: 632px; width: 632px;
.right_top { .right_top {
cursor: pointer;
.top_use { .top_use {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -215,6 +210,7 @@ const handleBuy = (courseItem: any) => { ...@@ -215,6 +210,7 @@ const handleBuy = (courseItem: any) => {
.is-h5 { .is-h5 {
padding: 0 0.25rem; padding: 0 0.25rem;
.main_tab { .main_tab {
cursor: pointer;
.tab_con { .tab_con {
background: #ffffff; background: #ffffff;
opacity: 1; opacity: 1;
...@@ -247,10 +243,14 @@ const handleBuy = (courseItem: any) => { ...@@ -247,10 +243,14 @@ const handleBuy = (courseItem: any) => {
} }
.con_right { .con_right {
margin-left: 0.2rem; margin-left: 0.2rem;
width: 4rem; width: 4.2rem;
.right_top { .right_top {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
justify-content: space-between;
padding: 0.14rem 0 0.11rem 0;
box-sizing: border-box;
.top_tit { .top_tit {
font-size: 0.28rem; font-size: 0.28rem;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
...@@ -267,7 +267,6 @@ const handleBuy = (courseItem: any) => { ...@@ -267,7 +267,6 @@ const handleBuy = (courseItem: any) => {
font-weight: 400; font-weight: 400;
color: #e29a21; color: #e29a21;
background: #fff3e0; background: #fff3e0;
white-space: nowrap;
border-radius: 3px; border-radius: 3px;
text-align: center; text-align: center;
} }
...@@ -281,6 +280,7 @@ const handleBuy = (courseItem: any) => { ...@@ -281,6 +280,7 @@ const handleBuy = (courseItem: any) => {
.right_bottom { .right_bottom {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-top:0.24rem;
.bottom_btn { .bottom_btn {
.btn_buy { .btn_buy {
width: 1.3rem; width: 1.3rem;
...@@ -292,6 +292,7 @@ const handleBuy = (courseItem: any) => { ...@@ -292,6 +292,7 @@ const handleBuy = (courseItem: any) => {
line-height: 0.46rem; line-height: 0.46rem;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
cursor: pointer;
} }
} }
} }
......
src/modules/shop/components/DetailBanner.vue
浏览文件 @ 9984af7a
...@@ -42,8 +42,8 @@ const handleBuyCourse = () => { ...@@ -42,8 +42,8 @@ const handleBuyCourse = () => {
<div class="info_tit">{{ shopItem?.title }}</div> <div class="info_tit">{{ shopItem?.title }}</div>
<div class="info_indentify">{{ shopItem?.course_card }}</div> <div class="info_indentify">{{ shopItem?.course_card }}</div>
<div class="info_tips"> <div class="info_tips">
<div class="tips_card">{{ shopItem?.course_chapter }}</div> <div class="tips_card">{{ shopItem?.course_chapter }}节课程</div>
<div class="tips_card">{{ shopItem?.course_total_hour }}</div> <div class="tips_card">{{ shopItem?.course_total_hour }}小时</div>
</div> </div>
</div> </div>
<div class="con_share"> <div class="con_share">
...@@ -57,8 +57,8 @@ const handleBuyCourse = () => { ...@@ -57,8 +57,8 @@ const handleBuyCourse = () => {
</div> </div>
<div class="detail_buy"> <div class="detail_buy">
<div class="buy_left"> <div class="buy_left">
<!-- <div class="left_status" v-if="payStatus === '4' || shopItem?.isBuy === true">已购买</div> --> <div class="left_status" v-if="payStatus === '4' || shopItem?.isBuy === true">已购买</div>
<div class="left_price"> <div class="left_price" v-else>
<div class="price_icon">¥</div> <div class="price_icon">¥</div>
<div class="price_num">{{ shopItem?.price }}</div> <div class="price_num">{{ shopItem?.price }}</div>
</div> </div>
...@@ -74,19 +74,19 @@ const handleBuyCourse = () => { ...@@ -74,19 +74,19 @@ const handleBuyCourse = () => {
<div class="detail_info" v-if="mobile"> <div class="detail_info" v-if="mobile">
<div class="info_top"> <div class="info_top">
<div class="top_icon">适用人群</div> <div class="top_icon">适用人群</div>
<div class="top_for">包括但并不仅限于金融保险企业绩优营销员</div> <div class="top_for">{{shopItem?.for_people}}</div>
</div> </div>
<div class="info_tit">资产分析规划师（一级）/PAAP（Ⅰ）</div> <div class="info_tit">{{shopItem?.title}}</div>
<div class="info_tips">知名导师专家</div> <div class="info_tips">{{ shopItem?.course_card }}</div>
<div class="info_time"> <div class="info_time">
<div class="time_left"> <div class="time_left">
<div class="left_tit">课程节数</div> <div class="left_tit">课程节数</div>
<div class="left_con"><span class="con_num">56</span> <span class="con_txt">节</span></div> <div class="left_con"><span class="con_num">{{ shopItem?.course_chapter }}</span> <span class="con_txt">节</span></div>
</div> </div>
<div class="time_line"></div> <div class="time_line"></div>
<div class="time_left"> <div class="time_left">
<div class="left_tit">总课时</div> <div class="left_tit">总课时</div>
<div class="left_con"><span class="con_num">80</span> <span class="con_txt">小时</span></div> <div class="left_con"><span class="con_num">{{ shopItem?.course_total_hour }}</span> <span class="con_txt">小时</span></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -289,9 +289,11 @@ const handleBuyCourse = () => { ...@@ -289,9 +289,11 @@ const handleBuyCourse = () => {
} }
.detail_info { .detail_info {
background: #ffffff; background: #ffffff;
margin: 0 0.2rem; margin: -0.2rem 0.3rem 0.3rem 0.3rem;
padding: 0.2rem;
position: relative; position: relative;
z-index: 100; z-index: 100;
border-radius: 0.12rem;
.info_top { .info_top {
display: flex; display: flex;
.top_icon { .top_icon {
...@@ -326,6 +328,7 @@ const handleBuyCourse = () => { ...@@ -326,6 +328,7 @@ const handleBuyCourse = () => {
padding: 0.15rem 1.2rem; padding: 0.15rem 1.2rem;
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 0.08rem;
.time_left { .time_left {
display: flex; display: flex;
...@@ -352,8 +355,7 @@ const handleBuyCourse = () => { ...@@ -352,8 +355,7 @@ const handleBuyCourse = () => {
.time_line { .time_line {
width: 0px; width: 0px;
height: 0.48rem; height: 0.48rem;
border: 1px solid #dddddd; border: 0.01rem solid #dddddd;
opacity: 1;
margin: 0 1.1rem; margin: 0 1.1rem;
} }
} }
......
src/modules/shop/components/IncludeCourseCard.vue
浏览文件 @ 9984af7a
...@@ -38,6 +38,8 @@ defineProps({ ...@@ -38,6 +38,8 @@ defineProps({
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc{
.include_course { .include_course {
background: #ffffff; background: #ffffff;
box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.1);
...@@ -52,12 +54,12 @@ defineProps({ ...@@ -52,12 +54,12 @@ defineProps({
} }
.course_card { .course_card {
background: #f7f8fa; background: #f7f8fa;
border-radius: 6px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 15px; border-radius: 15px;
padding: 36px 200px 36px 36px; padding: 36px 200px 36px 36px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 0.12rem;
.card_course { .card_course {
display: flex; display: flex;
background: #ffffff; background: #ffffff;
...@@ -102,4 +104,57 @@ defineProps({ ...@@ -102,4 +104,57 @@ defineProps({
} }
} }
} }
}
.is-h5{
.include_course{
margin: 0 0.3rem;
box-sizing: border-box;
border: 1px solid #FFF5E1;
border-bottom: none;
border-radius:0.12rem ;
background: #FFF5E1;
.course_tit{
height:0.6rem;
padding-left: 0.2rem;
line-height: 0.6rem;;
}
.course_card{
border-radius: 0.08rem 0.08rem 0 0;
padding:0.44rem 0;
background: #ffffff;
border-radius:0.12rem ;
}
.card_course{
display: flex;
margin:0 0.29rem ;
padding:0.25rem 0.21rem ;
background: #F4F8FB;
img{
width:1.6rem;
height: 0.9rem;
}
.course_info{
margin-left: 0.14rem;
.info_tit{
font-size: 0.24rem;
color: #333333;
}
.info_price{
display: flex;
margin-top: 0.28rem;
.price_icon{
font-size: 0.12rem;
color: #E5A12F;
}
.price_price{
font-size: 0.2rem;
color: #E5A12F;
}
}
}
}
}
}
</style> </style>
src/modules/shop/components/RecommendCourse.vue
浏览文件 @ 9984af7a
...@@ -4,7 +4,9 @@ import { Grid, Navigation } from 'swiper' ...@@ -4,7 +4,9 @@ import { Grid, Navigation } from 'swiper'
import 'swiper/css' import 'swiper/css'
import 'swiper/css/grid' import 'swiper/css/grid'
import 'swiper/css/navigation' import 'swiper/css/navigation'
import router from '@/router' import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const router = useRouter()
defineProps({ defineProps({
shopRelatedList: { shopRelatedList: {
type: Array type: Array
...@@ -18,7 +20,7 @@ function prev(swiper) { ...@@ -18,7 +20,7 @@ function prev(swiper) {
function next(swiper) { function next(swiper) {
swiper?.slideNext() swiper?.slideNext()
} }
const handleDetail = item => { const handleDetail = (item) => {
router.push(`/shop/detail/${item.id}`) router.push(`/shop/detail/${item.id}`)
} }
</script> </script>
...@@ -29,7 +31,7 @@ const handleDetail = item => { ...@@ -29,7 +31,7 @@ const handleDetail = item => {
<div class="con_tit">相关课程推荐</div> <div class="con_tit">相关课程推荐</div>
<div class="con_line"></div> <div class="con_line"></div>
<div class="con_course"> <div class="con_course">
<div> <div v-if="!mobile">
<Swiper <Swiper
class="my-swiper" class="my-swiper"
:grid="{ rows: 3, fill: 'column' }" :grid="{ rows: 3, fill: 'column' }"
...@@ -65,12 +67,35 @@ const handleDetail = item => { ...@@ -65,12 +67,35 @@ const handleDetail = item => {
<div class="swiper-button-next" @click="next(swiper1)"></div> <div class="swiper-button-next" @click="next(swiper1)"></div>
</template> </template>
</div> </div>
<div v-else>
<div class="course-item" v-for="(item, index) in shopRelatedList"
:key="index"
@click="handleDetail(item)"
>
<img
:src="
item.avatar ||
'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
"
class="img"
/>
<div class="item_right">
<div class="right_name">{{ item.title }}</div>
<div class="right_price">
<div class="price_icon">¥</div>
<div class="price_num">{{ item.price }}</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc{
.teacher_list { .teacher_list {
margin-top: 20px; margin-top: 20px;
.list_con { .list_con {
...@@ -116,7 +141,6 @@ const handleDetail = item => { ...@@ -116,7 +141,6 @@ const handleDetail = item => {
.right_name { .right_name {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 20px;
color: #666666; color: #666666;
width: 183px; width: 183px;
white-space: wrap; white-space: wrap;
...@@ -142,6 +166,78 @@ const handleDetail = item => { ...@@ -142,6 +166,78 @@ const handleDetail = item => {
} }
} }
} }
}
.is-h5{
.teacher_list{
padding:0.32rem 0.2rem;
margin: 0.3rem;
background: #FFFFFF;
border-radius: 0.12rem;
.list_con{
.con_tit{
font-size: 0.28rem;
color: #333333;
font-weight: 500;
}
.con_line{
display: none;
}
}
.con_course{
margin-top: 0.2rem;
background: #F4F8FB;
padding: 0.2rem 0.24rem;
border-radius: 0.16rem;
.course-item:last-child{
border: none;
}
.course-item {
box-sizing: border-box;
display: flex;
align-items: center;
cursor: pointer;
border-bottom: 0.01rem solid #E5E5E5;
padding:0.2rem 0;
.img {
width: 2.2rem;
height: 1.4rem;
border-radius: 6px;
}
.item_right {
margin-left: 0.21rem;
flex-direction: column;
justify-content: space-between;
.right_name {
font-size: 0.28rem;
font-weight: 500;
color: #333333;
width: 3.69rem;
white-space: wrap;
}
.right_price {
display: flex;
margin-top: 0.22rem;
.price_icon {
font-size: 0.2rem;
font-weight: 500;
line-height: 0.34rem;
color: #E5A12F;
}
.price_num {
font-size: 0.24rem;
font-weight: normal;
line-height: 0.34rem;
color: #E5A12F;
}
}
}
}
}
}
}
.my-swiper { .my-swiper {
--swiper-navigation-size: 14px; --swiper-navigation-size: 14px;
--swiper-navigation-color: #333333; --swiper-navigation-color: #333333;
......
src/modules/shop/components/TeacherCard.vue
浏览文件 @ 9984af7a
<script setup> <script setup>
import { Swiper, SwiperSlide } from 'swiper/vue' import { Swiper, SwiperSlide } from 'swiper/vue'
import { Grid, Navigation } from 'swiper' import { Grid, Navigation } from 'swiper'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
import 'swiper/css' import 'swiper/css'
import 'swiper/css/grid' import 'swiper/css/grid'
import 'swiper/css/navigation' import 'swiper/css/navigation'
...@@ -10,39 +12,40 @@ defineProps({ ...@@ -10,39 +12,40 @@ defineProps({
} }
}) })
const swiper1 = ref(null) const swiper1 = ref(null)
function prev(swiper) {
console.log(swiper, '111')
swiper?.slidePrev()
}
function next(swiper) {
swiper?.slideNext()
}
const list = [ const list = [
{ {
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png', avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
name: '张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟', name: '张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟',
children: ['清华大学国家金融研究院副院长、副研究员'] title_list: ['清华大学国家金融研究院副院长、副研究员']
}, },
{ {
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_02.png', avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_02.png',
name: '高皓', name: '高皓',
children: ['清华大学五道口金融学院全球家族企业研究中心主任'] title_list: ['清华大学五道口金融学院全球家族企业研究中心主任']
}, },
{ {
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_03.png', avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_03.png',
name: '肇越', name: '肇越',
children: ['清华大学五道口金融学院硕士生导师首席经济学家'] title_list: ['清华大学五道口金融学院硕士生导师首席经济学家']
}, },
{ {
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_04.png', avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_04.png',
name: '陈秉正', name: '陈秉正',
children: ['清华大学经济管理学院金融系教授', '中国保险与风险管理研究中心主任'] title_list: ['清华大学经济管理学院金融系教授', '中国保险与风险管理研究中心主任']
} }
] ]
function prev(swiper) {
console.log(swiper, '111')
swiper?.slidePrev()
}
function next(swiper) {
swiper?.slideNext()
}
</script> </script>
<template> <template>
<div class="teacher_list"> <div class="teacher_list" v-if="!mobile">
<div class="list_con"> <div class="list_con">
<div class="con_tit">讲师介绍</div> <div class="con_tit">讲师介绍</div>
<div class="con_line"></div> <div class="con_line"></div>
...@@ -81,9 +84,33 @@ function next(swiper) { ...@@ -81,9 +84,33 @@ function next(swiper) {
</div> </div>
</div> </div>
</div> </div>
<div class="teacher_list" v-else >
<div class="con_tit">讲师介绍</div>
<div class="con_teacher">
<div v-for="(item, index) in lecturerList" :key="index" class="teacher-item">
<div class="item_top">
<img
:src="item.avatar || 'https://webapp-pub.ezijing.com/project_online/fi/teacher_04.png'"
class="top_img"
/>
<div class="top_name">{{ item.name }}</div>
</div>
<ol v-if="item.title_list?.length">
<li v-for="it in item.title_list" :key="it">
<p>
{{ it }}
</p>
</li>
</ol>
</div>
</div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc{
.teacher_list { .teacher_list {
.list_con { .list_con {
width: 396px; width: 396px;
...@@ -165,20 +192,74 @@ function next(swiper) { ...@@ -165,20 +192,74 @@ function next(swiper) {
height: 33%; height: 33%;
} }
} }
:deep(.swiper-button-prev) { .swiper-button-prev {
left: 5px; left: 5px;
top: -6%; top: -6%;
color: #333333; color: #333333;
} }
:deep(.swiper-button-next) { .swiper-button-next {
right: 5px; right: 5px;
top: -6%; top: -6%;
color: #333333; color: #333333;
} }
:deep(.swiper-button-next:after) { .swiper-button-next:after {
font-size: 12px; font-size: 12px;
} }
:deep(.swiper-button-prev:after) { .swiper-button-prev:after {
font-size: 12px; font-size: 12px;
} }
}
.is-h5{
.teacher_list {
margin-top:0.3rem;
.con_tit {
font-size: 0.28rem;
font-weight: 500;
line-height: 34px;
color: #333333;
}
.con_teacher{
overflow-x: auto;
display: flex;
.teacher-item{
width: 5.49rem;
background: #F4F8FB;
padding:0.27rem 0.2rem;
border-radius: 0.16rem;
margin-right:0.2rem;
.item_top{
display: flex;
align-items: center;
.top_img{
width:0.86rem;
}
.top_name{
font-size: 0.28rem;
color: #333333;
margin-left: 0.15rem;
}
}
ol {
margin-top: 0.2rem;
li {
list-style-type: disc;
color: #c1ab85 !important;
margin-left: 0.3rem;
p {
font-size: 0.14rem;
font-weight: 400;
color: #666666;
width: 4.89rem;
white-space: wrap;
}
}
}
}
}
}
}
</style> </style>
src/modules/shop/views/Index.vue
浏览文件 @ 9984af7a
...@@ -105,18 +105,24 @@ const handleTabClick = (tab: any) => { ...@@ -105,18 +105,24 @@ const handleTabClick = (tab: any) => {
width: 100%; width: 100%;
} }
} }
:deep(.el-tabs__item) { :deep(.el-tabs__item) {
font-size: 0.28rem;
font-size: 0.28rem;
font-weight: 500; font-weight: 500;
line-height: 34px; line-height: 34px;
color: #eda020; color: #eda020;
padding: 0 0.2rem; padding: 0 0.1rem !important;
box-sizing: border-box; box-sizing: border-box;
} }
:deep(.el-tabs__nav-scroll) { :deep(.el-tabs__nav-scroll) {
padding: 0 0.5rem; padding: 0 0.5rem;
} }
} }
:deep(.el-tabs__nav-scroll) {
overflow-x: auto;
}
:deep(.el-tabs__item.is-active) { :deep(.el-tabs__item.is-active) {
color: #eda020; color: #eda020;
} }
...@@ -127,14 +133,14 @@ const handleTabClick = (tab: any) => { ...@@ -127,14 +133,14 @@ const handleTabClick = (tab: any) => {
:deep(.el-tabs__nav-wrap::after) { :deep(.el-tabs__nav-wrap::after) {
display: none; display: none;
} }
// :deep(.el-tabs__nav-next) { :deep(.el-tabs__nav-next) {
// .el-icon { .el-icon {
// display: none; display: none;
// } }
// } }
// :deep(.el-tabs__nav-prev) { :deep(.el-tabs__nav-prev) {
// .el-icon { .el-icon {
// display: none; display: none;
// } }
// } }
</style> </style>
src/modules/shop/views/View.vue
浏览文件 @ 9984af7a
<script lang="ts" setup> <script lang="ts" setup>
import DetailBanner from '../components/DetailBanner.vue' import DetailBanner from '../components/DetailBanner.vue'
import IncludeCourseCard from '../components/IncludeCourseCard.vue' import IncludeCourseCard from '../components/IncludeCourseCard.vue'
import CourseIntroduceCard from '../components/CourseIntroduceCard.vue' import CourseIntrouduce from '../components/CourseIntrouduce.vue'
import CourseFor from '../components/CourseFor.vue'
import CourseCatalogPC from '../components/CourseCatalogPC.vue'
import CourseCatalogH5 from '../components/CourseCatalogH5.vue'
import TeacherCard from '../components/TeacherCard.vue' import TeacherCard from '../components/TeacherCard.vue'
import RecommendCourse from '../components/RecommendCourse.vue' import RecommendCourse from '../components/RecommendCourse.vue'
import CourseFooter from '../components/CourseFooter.vue'
import { useShopStore } from '@/stores/shop' import { useShopStore } from '@/stores/shop'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const shopStore = useShopStore() const shopStore = useShopStore()
const router = useRouter()
const route = useRoute() const route = useRoute()
const payStatus: any = ref(route.query.payStatus)
const courseItem: any = ref([]) // 课程所属课程包 const courseItem: any = ref([]) // 课程所属课程包
courseItem.value = shopStore.shopList.filter( courseItem.value = shopStore.shopList.filter(
(item: any) => item.type === '课程包' && item.child_ids.includes(shopStore.shopItem?.id) (item: any) => item.type === '课程包' && item.child_ids.includes(shopStore.shopItem?.id)
...@@ -21,31 +27,21 @@ const recommendCourse = computed(() => { ...@@ -21,31 +27,21 @@ const recommendCourse = computed(() => {
return shopStore.shopRelatedListOther return shopStore.shopRelatedListOther
} }
}) })
const buyDialogVisible = ref(false)
const payStatus: any = ref(route.query.payStatus)
const handleBuyCourse = () => {
if (payStatus === '4' || shopStore.shopItem?.isBuy === true) {
window.open('https://paa-learning.ezijing.com')
} else {
if (shopStore.shopItem?.type === '课程包') {
buyDialogVisible.value = true
} else {
router.push(`/shop/pay/${shopStore.shopItem?.id}`)
}
}
}
</script> </script>
<template> <template>
<div class="course_detail"> <div class="course_detail" v-if="!mobile">
<DetailBanner :shopItem="shopStore.shopItem" :payStatus="payStatus" /> <DetailBanner :shopItem="shopStore.shopItem" :payStatus="payStatus" />
<div class="detail_con"> <div class="detail_con">
<div class="con_left"> <div class="con_left">
<div> <div>
<IncludeCourseCard v-if="shopStore.shopItem?.type !== '课程包'" :courseItem="courseItem" /> <IncludeCourseCard v-if="shopStore.shopItem?.type !== '课程包'" :courseItem="courseItem" />
<div class="left_course">
<CourseIntrouduce :shopItem="shopStore.shopItem"/>
<CourseFor v-if="!mobile" :shopItem="shopStore.shopItem"/>
<CourseCatalogPC :shopItem="shopStore.shopItem"/>
</div> </div>
<div>
<CourseIntroduceCard :shopItem="shopStore.shopItem" />
</div> </div>
</div> </div>
<div class="con_right"> <div class="con_right">
...@@ -53,22 +49,18 @@ const handleBuyCourse = () => { ...@@ -53,22 +49,18 @@ const handleBuyCourse = () => {
<RecommendCourse :shopRelatedList="recommendCourse" /> <RecommendCourse :shopRelatedList="recommendCourse" />
</div> </div>
</div> </div>
<div class="detail_footer"> <CourseFooter :payStatus="payStatus" :shopItem="shopStore.shopItem"/>
<div class="left_status" v-if="payStatus === '4' || shopStore.shopItem?.isBuy === true">已购买</div> </div>
<template v-else> <div class="course_detail" v-else>
<div class="footer_left"> <DetailBanner :shopItem="shopStore.shopItem" :payStatus="payStatus"/>
<div class="left_tit">全部课程价格</div> <IncludeCourseCard v-if="shopStore.shopItem?.type !== '课程包'" :courseItem="courseItem" />
<div class="left_desc">根据课程价格累积计算</div> <div class="detail_con">
</div> <CourseIntrouduce :shopItem="shopStore.shopItem"/>
<div class="footer_price"> <TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list" />
<div class="price_icon">¥</div> <CourseCatalogH5 :shopItem="shopStore.shopItem" />
<div class="price_price">{{ shopStore.shopItem?.price }}</div> </div>
</div> <RecommendCourse :shopRelatedList="recommendCourse" />
</template> <CourseFooter :payStatus="payStatus" :shopItem="shopStore.shopItem"/>
<div class="footer_btn" @click="handleBuyCourse">
{{ payStatus === '4' || shopStore.shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
</div>
</div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -84,6 +76,12 @@ const handleBuyCourse = () => { ...@@ -84,6 +76,12 @@ const handleBuyCourse = () => {
justify-content: space-between; justify-content: space-between;
.con_left { .con_left {
width: 784px; width: 784px;
.left_course{
padding: 28px 45px 53px 45px;
background: #ffffff;
box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.1);
border-radius: 15px;
}
} }
.con_right { .con_right {
width: 396px; width: 396px;
...@@ -154,4 +152,13 @@ const handleBuyCourse = () => { ...@@ -154,4 +152,13 @@ const handleBuyCourse = () => {
} }
} }
} }
.is-h5{
.detail_con{
background: #ffffff;
margin:0.4rem 0.3rem;
padding:0.32rem 0.2rem;
border-radius: 0.12rem;
}
}
</style> </style>
src/utils/wxpay.ts 0 → 100644
浏览文件 @ 9984af7a
import * as api from '@/api/base'
/**
* 获取微信openId
* */
export function getCode() {
const href = location.href.includes('?') ? `${location.href}&is_pay=true` : `${location.href}?is_pay=true`
const redirectURI = `https://pages.ezijing.com/given/auth.html?redirect_uri=${encodeURIComponent(href)}`
location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx451c01d40d090d7a&redirect_uri=${redirectURI}&response_type=code&scope=snsapi_base`
}
/**
* 获取微信openId
* */
export function getOpenId(code:any, callback:any) {
if (!code) {
return getCode()
}
api.getOpenId({ code, identity: 'ezijing' }).then((resp:any) => {
const openId = resp.data.openid
openId && localStorage.setItem('openId', openId)
callback && callback(openId)
})
}
/**
* 微信JSAPI支付
* */
export function wxJSPay(order:any, callback:any) {
if (!order.payment_more_info) {
alert('订单创建错误')
return
}
const payInfo = JSON.parse(order.payment_more_info)
WeixinJSBridge.invoke('getBrandWCPayRequest', payInfo, (resp:any) => {
callback && callback(resp)
})
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论