From 87d2fac9c381de99f75ce6c6c39b7d638b980d7e Mon Sep 17 00:00:00 2001 From: 杨磊 <505174330@qq.com> Date: 星期四, 21 八月 2025 17:52:14 +0800 Subject: [PATCH] 1111 --- src/assets/images/book-cover.png | 0 src/components/sliderImg/sliderImg.css | 167 ++ src/views/aboutUs/index.vue | 378 +++++ src/assets/js/config.js | 21 package-lock.json | 130 + src/components/sliderImg/img/right.jpg | 0 src/plugin/axios/index.ts | 87 src/components/MapContainer.vue | 90 + src/stores/index.js | 9 src/assets/images/header/dialogLeftImg.png | 0 src/components/sliderImg/component/verify.vue | 69 + src/components/sliderImg/sliderImg.js | 262 +++ src/views/bookStore/detail.vue | 593 ++++++++ src/stores/modules/user.js | 56 src/components/sliderImg/img/update@3.5x.png | 0 src/assets/main.css | 3 src/assets/js/toolClass.js | 208 +- src/layout/components/login.vue | 832 ++++++++++++ src/layout/components/headerPage.vue | 42 src/assets/js/middleGround/api/identity.js | 141 + src/router/index.js | 18 /dev/null | 12 src/views/home/index.vue | 327 ++++ src/assets/js/middleGround/tool.js | 117 src/views/bookStore/index.vue | 383 +++++ package.json | 2 src/components/sliderImg/img/refresh.png | 0 src/assets/images/bookStore/feblei.png | 0 src/views/educationalPublishing/index.vue | 43 29 files changed, 3,667 insertions(+), 323 deletions(-) diff --git a/package-lock.json b/package-lock.json index e86f843..2b7bf31 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "xiehe", "version": "0.0.0", "dependencies": { + "@amap/amap-jsapi-loader": "^1.0.1", "axios": "^1.11.0", "element-plus": "^2.10.7", "less": "^4.4.0", @@ -15,6 +16,7 @@ "pinia": "^3.0.3", "spark-md5": "^3.0.2", "vue": "^3.5.18", + "vue-baidu-map-3x": "^1.0.40", "vue-router": "^4.5.1" }, "devDependencies": { @@ -26,6 +28,12 @@ "engines": { "node": "^20.19.0 || >=22.12.0" } + }, + "node_modules/@amap/amap-jsapi-loader": { + "version": "1.0.1", + "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz", + "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==", + "license": "MIT" }, "node_modules/@ampproject/remapping": { "version": "2.3.0", @@ -1620,6 +1628,12 @@ } } }, + "node_modules/@yangjianfei/bmaplib.lushu": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/@yangjianfei/bmaplib.lushu/-/bmaplib.lushu-1.0.0.tgz", + "integrity": "sha512-qZVijbgUgNs6tsP1muS67x0XzE5fJ3kFireouDvXO3bUYVV6XbpjZXksQTsggihLMIEvC1DO9GS9vVF8CnEeqQ==", + "license": "MIT" + }, "node_modules/ansis": { "version": "4.1.0", "resolved": "https://registry.npmmirror.com/ansis/-/ansis-4.1.0.tgz", @@ -1659,6 +1673,39 @@ "funding": { "url": "https://github.com/sponsors/antfu" } + }, + "node_modules/bmaplib.curveline": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/bmaplib.curveline/-/bmaplib.curveline-1.0.0.tgz", + "integrity": "sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q==", + "license": "MIT" + }, + "node_modules/bmaplib.distancetool": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/bmaplib.distancetool/-/bmaplib.distancetool-1.0.2.tgz", + "integrity": "sha512-EvxMnQRH6xM036zx5OLPyTg5tMCTbFBuGTTHOtExLy2/T0X6v5Va0YE7c3IPm/a/Eo5V/ynYpOLOLZbRY8ccyA==", + "license": "MIT" + }, + "node_modules/bmaplib.heatmap": { + "version": "1.0.4", + "resolved": "https://registry.npmmirror.com/bmaplib.heatmap/-/bmaplib.heatmap-1.0.4.tgz", + "integrity": "sha512-rmhqUARBpUSJ9jXzUI2j7dIOqnc38bqubkx/8a349U2qtw/ulLUwyzRD535OrA8G7w5cz4aPKm6/rNvUAarg/Q==", + "license": "MIT" + }, + "node_modules/bmaplib.markerclusterer": { + "version": "1.0.13", + "resolved": "https://registry.npmmirror.com/bmaplib.markerclusterer/-/bmaplib.markerclusterer-1.0.13.tgz", + "integrity": "sha512-VrLyWSiuDEVNi0yUfwOhFQ6z1oEEHS4w36GNu3iASu6p52QIx9uAXMUkuSCHReNR0bj2Cp9SA1dSx5RpojXajQ==", + "license": "MIT", + "dependencies": { + "bmaplib.texticonoverlay": "^1.0.2" + } + }, + "node_modules/bmaplib.texticonoverlay": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/bmaplib.texticonoverlay/-/bmaplib.texticonoverlay-1.0.2.tgz", + "integrity": "sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg==", + "license": "MIT" }, "node_modules/browserslist": { "version": "4.25.2", @@ -3085,6 +3132,12 @@ "node": ">=16" } }, + "node_modules/tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==", + "license": "MIT" + }, "node_modules/tinyglobby": { "version": "0.2.14", "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.14.tgz", @@ -3392,6 +3445,25 @@ } } }, + "node_modules/vue-baidu-map-3x": { + "version": "1.0.40", + "resolved": "https://registry.npmmirror.com/vue-baidu-map-3x/-/vue-baidu-map-3x-1.0.40.tgz", + "integrity": "sha512-Rq3g1KNsNztkuX3SJIuCpy6HE3xHVX8ySgqS2xC3jut/hvVr5kFBS0Nu7uYppk3xYVz69S1JFxU8WUI0Xftpyg==", + "license": "MIT", + "dependencies": { + "@yangjianfei/bmaplib.lushu": "^1.0.0", + "bmaplib.curveline": "^1.0.0", + "bmaplib.distancetool": "^1.0.2", + "bmaplib.heatmap": "^1.0.4", + "bmaplib.markerclusterer": "^1.0.13", + "tiny-emitter": "^2.1.0", + "vue": "^3.2.25", + "vue-router": "^4.0.14" + }, + "peerDependencies": { + "vue": "^3.2.25" + } + }, "node_modules/vue-router": { "version": "4.5.1", "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.1.tgz", @@ -3461,6 +3533,11 @@ } }, "dependencies": { + "@amap/amap-jsapi-loader": { + "version": "1.0.1", + "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz", + "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==" + }, "@ampproject/remapping": { "version": "2.3.0", "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz", @@ -4460,6 +4537,11 @@ } } }, + "@yangjianfei/bmaplib.lushu": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/@yangjianfei/bmaplib.lushu/-/bmaplib.lushu-1.0.0.tgz", + "integrity": "sha512-qZVijbgUgNs6tsP1muS67x0XzE5fJ3kFireouDvXO3bUYVV6XbpjZXksQTsggihLMIEvC1DO9GS9vVF8CnEeqQ==" + }, "ansis": { "version": "4.1.0", "resolved": "https://registry.npmmirror.com/ansis/-/ansis-4.1.0.tgz", @@ -4490,6 +4572,34 @@ "version": "2.5.0", "resolved": "https://registry.npmmirror.com/birpc/-/birpc-2.5.0.tgz", "integrity": "sha512-VSWO/W6nNQdyP520F1mhf+Lc2f8pjGQOtoHHm7Ze8Go1kX7akpVIrtTa0fn+HB0QJEDVacl6aO08YE0PgXfdnQ==" + }, + "bmaplib.curveline": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/bmaplib.curveline/-/bmaplib.curveline-1.0.0.tgz", + "integrity": "sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q==" + }, + "bmaplib.distancetool": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/bmaplib.distancetool/-/bmaplib.distancetool-1.0.2.tgz", + "integrity": "sha512-EvxMnQRH6xM036zx5OLPyTg5tMCTbFBuGTTHOtExLy2/T0X6v5Va0YE7c3IPm/a/Eo5V/ynYpOLOLZbRY8ccyA==" + }, + "bmaplib.heatmap": { + "version": "1.0.4", + "resolved": "https://registry.npmmirror.com/bmaplib.heatmap/-/bmaplib.heatmap-1.0.4.tgz", + "integrity": "sha512-rmhqUARBpUSJ9jXzUI2j7dIOqnc38bqubkx/8a349U2qtw/ulLUwyzRD535OrA8G7w5cz4aPKm6/rNvUAarg/Q==" + }, + "bmaplib.markerclusterer": { + "version": "1.0.13", + "resolved": "https://registry.npmmirror.com/bmaplib.markerclusterer/-/bmaplib.markerclusterer-1.0.13.tgz", + "integrity": "sha512-VrLyWSiuDEVNi0yUfwOhFQ6z1oEEHS4w36GNu3iASu6p52QIx9uAXMUkuSCHReNR0bj2Cp9SA1dSx5RpojXajQ==", + "requires": { + "bmaplib.texticonoverlay": "^1.0.2" + } + }, + "bmaplib.texticonoverlay": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/bmaplib.texticonoverlay/-/bmaplib.texticonoverlay-1.0.2.tgz", + "integrity": "sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg==" }, "browserslist": { "version": "4.25.2", @@ -5396,6 +5506,11 @@ "copy-anything": "^3.0.2" } }, + "tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" + }, "tinyglobby": { "version": "0.2.14", "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.14.tgz", @@ -5562,6 +5677,21 @@ "@vue/shared": "3.5.18" } }, + "vue-baidu-map-3x": { + "version": "1.0.40", + "resolved": "https://registry.npmmirror.com/vue-baidu-map-3x/-/vue-baidu-map-3x-1.0.40.tgz", + "integrity": "sha512-Rq3g1KNsNztkuX3SJIuCpy6HE3xHVX8ySgqS2xC3jut/hvVr5kFBS0Nu7uYppk3xYVz69S1JFxU8WUI0Xftpyg==", + "requires": { + "@yangjianfei/bmaplib.lushu": "^1.0.0", + "bmaplib.curveline": "^1.0.0", + "bmaplib.distancetool": "^1.0.2", + "bmaplib.heatmap": "^1.0.4", + "bmaplib.markerclusterer": "^1.0.13", + "tiny-emitter": "^2.1.0", + "vue": "^3.2.25", + "vue-router": "^4.0.14" + } + }, "vue-router": { "version": "4.5.1", "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.1.tgz", diff --git a/package.json b/package.json index a25d83a..c7dd738 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "format": "prettier --write src/" }, "dependencies": { + "@amap/amap-jsapi-loader": "^1.0.1", "axios": "^1.11.0", "element-plus": "^2.10.7", "less": "^4.4.0", @@ -20,6 +21,7 @@ "pinia": "^3.0.3", "spark-md5": "^3.0.2", "vue": "^3.5.18", + "vue-baidu-map-3x": "^1.0.40", "vue-router": "^4.5.1" }, "devDependencies": { diff --git a/src/assets/images/book-cover.png b/src/assets/images/book-cover.png new file mode 100644 index 0000000..54e4e5b --- /dev/null +++ b/src/assets/images/book-cover.png Binary files differ diff --git a/src/assets/images/bookStore/feblei.png b/src/assets/images/bookStore/feblei.png new file mode 100644 index 0000000..384414c --- /dev/null +++ b/src/assets/images/bookStore/feblei.png Binary files differ diff --git a/src/assets/images/default-book-img.png b/src/assets/images/default-book-img.png deleted file mode 100644 index dba380b..0000000 --- a/src/assets/images/default-book-img.png +++ /dev/null Binary files differ diff --git a/src/assets/images/default_avatar.png b/src/assets/images/default_avatar.png deleted file mode 100644 index 87827d2..0000000 --- a/src/assets/images/default_avatar.png +++ /dev/null Binary files differ diff --git a/src/assets/images/delete.png b/src/assets/images/delete.png deleted file mode 100644 index 9ae0c4e..0000000 --- a/src/assets/images/delete.png +++ /dev/null Binary files differ diff --git a/src/assets/images/header/dialogLeftImg.png b/src/assets/images/header/dialogLeftImg.png new file mode 100644 index 0000000..e546dc6 --- /dev/null +++ b/src/assets/images/header/dialogLeftImg.png Binary files differ diff --git a/src/assets/images/index/bookListBg.png b/src/assets/images/index/bookListBg.png deleted file mode 100644 index 016fb3a..0000000 --- a/src/assets/images/index/bookListBg.png +++ /dev/null Binary files differ diff --git a/src/assets/images/login/boxBg.png b/src/assets/images/login/boxBg.png deleted file mode 100644 index 2a01bc5..0000000 --- a/src/assets/images/login/boxBg.png +++ /dev/null Binary files differ diff --git a/src/assets/images/login/pageBg.png b/src/assets/images/login/pageBg.png deleted file mode 100644 index 1f88680..0000000 --- a/src/assets/images/login/pageBg.png +++ /dev/null Binary files differ diff --git a/src/assets/images/login/weChartIcon.png b/src/assets/images/login/weChartIcon.png deleted file mode 100644 index 3abd498..0000000 --- a/src/assets/images/login/weChartIcon.png +++ /dev/null Binary files differ diff --git a/src/assets/images/packDown.png b/src/assets/images/packDown.png deleted file mode 100644 index 67988fc..0000000 --- a/src/assets/images/packDown.png +++ /dev/null Binary files differ diff --git a/src/assets/images/packUp.png b/src/assets/images/packUp.png deleted file mode 100644 index 8a00ae9..0000000 --- a/src/assets/images/packUp.png +++ /dev/null Binary files differ diff --git a/src/assets/images/pageHeader/logo.png b/src/assets/images/pageHeader/logo.png deleted file mode 100644 index af40fdd..0000000 --- a/src/assets/images/pageHeader/logo.png +++ /dev/null Binary files differ diff --git a/src/assets/images/personalCenter/choose.png b/src/assets/images/personalCenter/choose.png deleted file mode 100644 index 40e86b8..0000000 --- a/src/assets/images/personalCenter/choose.png +++ /dev/null Binary files differ diff --git a/src/assets/images/personalCenter/examine.png b/src/assets/images/personalCenter/examine.png deleted file mode 100644 index 44782cb..0000000 --- a/src/assets/images/personalCenter/examine.png +++ /dev/null Binary files differ diff --git a/src/assets/images/personalCenter/noPass.png b/src/assets/images/personalCenter/noPass.png deleted file mode 100644 index 3a16beb..0000000 --- a/src/assets/images/personalCenter/noPass.png +++ /dev/null Binary files differ diff --git a/src/assets/images/personalCenter/pass.png b/src/assets/images/personalCenter/pass.png deleted file mode 100644 index 7b262c2..0000000 --- a/src/assets/images/personalCenter/pass.png +++ /dev/null Binary files differ diff --git a/src/assets/images/teaching/arrow.png b/src/assets/images/teaching/arrow.png deleted file mode 100644 index c688ebe..0000000 --- a/src/assets/images/teaching/arrow.png +++ /dev/null Binary files differ diff --git a/src/assets/images/teaching/electronicBooks.png b/src/assets/images/teaching/electronicBooks.png deleted file mode 100644 index c11c6d5..0000000 --- a/src/assets/images/teaching/electronicBooks.png +++ /dev/null Binary files differ diff --git a/src/assets/images/teaching/paperCopies.png b/src/assets/images/teaching/paperCopies.png deleted file mode 100644 index def1021..0000000 --- a/src/assets/images/teaching/paperCopies.png +++ /dev/null Binary files differ diff --git a/src/assets/images/teaching/sample.png b/src/assets/images/teaching/sample.png deleted file mode 100644 index 3f5228b..0000000 --- a/src/assets/images/teaching/sample.png +++ /dev/null Binary files differ diff --git a/src/assets/images/teaching/teacher.png b/src/assets/images/teaching/teacher.png deleted file mode 100644 index c79d103..0000000 --- a/src/assets/images/teaching/teacher.png +++ /dev/null Binary files differ diff --git a/src/assets/js/config.js b/src/assets/js/config.js index f100767..82a1979 100644 --- a/src/assets/js/config.js +++ b/src/assets/js/config.js @@ -1,4 +1,5 @@ -export const requestCtx = 'http://182.92.203.7:5001' // 璇锋眰鍦板潃 +// export const requestCtx = 'http://182.92.203.7:5001' // 璇锋眰鍦板潃 +export const requestCtx = 'http://39.96.166.67' // 璇锋眰鍦板潃 // export const appId = 1051; // export const requestCtx = 'http://172.31.31.145' // 璇锋眰鍦板潃 @@ -6,9 +7,9 @@ export const appId = 1 export const requestTimeOut = 300000 // 璇锋眰瓒呮椂鏃堕棿 -export const tokenKey = 'jilin-token' -export const userInfoKey = 'jilin-userInfo' // 鐢ㄦ埛淇℃伅key -export const appRefCode = 'jilinWebsite' +export const tokenKey = 'jsek-token' +export const userInfoKey = 'jsek-isUserInfo' // 鐢ㄦ埛淇℃伅key +export const appRefCode = 'PUMC' export const goodsStore = `defaultGoodsStore${appId}` // 榛樿鍟嗗搧搴�(涔﹀煄) export const publicStore = `defaultPublicStore${appId}` // 榛樿璧勬簮寮�鏀句粨鍌� export const publicRepository = `defaultPublicRepository${appId}` // 榛樿璧勬簮寮�鏀惧簱 @@ -56,17 +57,17 @@ newVideosStore: 'jilin_videosLibrary\\jilin_newVideosStore', newModelsStore: 'jilin_modelsLibrary\\jilin_newModelsStore', // 棣栭〉鎺ㄨ崘璧勬簮 - recommendImgStore:'jilin_imgLibrary\\jilin_recommendedImage', - recommendAudioStore:'jilin_audiosLibrary\\jilin_recommendedAudio', - recommendVideoStore:'jilin_videosLibrary\\jilin_recommendedVideo', - recommendModelStore:'jilin_modelsLibrary\\jilin_recommendedModel', + recommendImgStore: 'jilin_imgLibrary\\jilin_recommendedImage', + recommendAudioStore: 'jilin_audiosLibrary\\jilin_recommendedAudio', + recommendVideoStore: 'jilin_videosLibrary\\jilin_recommendedVideo', + recommendModelStore: 'jilin_modelsLibrary\\jilin_recommendedModel', } const wxLogin = { appid: 'wx2b9d4a6308fd03d6', scope: 'snsapi_login', logInRedirectURL: encodeURIComponent(requestCtx + '/website'), - authenRedirectURL:encodeURIComponent(requestCtx + '/website/#/userInfo') + authenRedirectURL: encodeURIComponent(requestCtx + '/website/#/userInfo'), } const config = { @@ -79,6 +80,6 @@ reg_tel, appId, refCode, - wxLogin + wxLogin, } export default config diff --git a/src/assets/js/middleGround/api/identity.js b/src/assets/js/middleGround/api/identity.js index bdd37e4..a9317ae 100644 --- a/src/assets/js/middleGround/api/identity.js +++ b/src/assets/js/middleGround/api/identity.js @@ -1,181 +1,194 @@ -import request from "@/plugin/axios/index.ts"; +import request from '@/plugin/axios/index.ts' const identityApi = { // 鑾峰彇鍥惧舰楠岃瘉鐮� getImgCode() { return request({ - url: "/identity/NewCaptcha", - method: "post", - }); + url: '/identity/NewCaptcha', + method: 'post', + }) }, // 楠岃瘉鍥惧舰楠岃瘉鐮� verificationImgCode(data) { return request({ - url: "/identity/ValidCaptcha", - method: "post", + url: '/identity/ValidCaptcha', + method: 'post', data, - }); + }) }, // 鑾峰彇鐭俊楠岃瘉鐮� getPhoneCode(data) { return request({ - url: "/identity/NewSms", - method: "post", + url: '/identity/NewSms', + method: 'post', data, - }); + }) }, // 楠岃瘉鐭俊楠岃瘉鐮� verificationPhoneCode(data) { return request({ - url: "/identity/api/ApiValidMobilePhone", - method: "post", + url: '/identity/api/ApiValidMobilePhone', + method: 'post', data, - }); + }) + }, + + getSlideCaptchaImage(options) { + return request('/identity/GetSlideCaptchaImage', { + method: 'POST', + data: options || {}, + }) + }, + // 楠岃瘉婊戝姩楠岃瘉鐮� + validSlideCaptcha(options) { + return request('/identity/ValidSlideCaptcha', { + method: 'POST', + data: options || {}, + }) }, // 閫氳繃鎵嬫満鍙锋敞鍐岀敤鎴� registerAppUserWithPhone(data) { return request({ - url: "/identity/api/RegisterAppUserWithPhone", - method: "post", + url: '/identity/api/RegisterAppUserWithPhone', + method: 'post', data, - }); + }) }, // 璐﹀彿瀵嗙爜鐧诲綍 loginByPassword(data) { return request({ - url: "/identity/api/LoginByPassword", - method: "post", + url: '/identity/api/LoginByPassword', + method: 'post', data, - }); + }) }, // 鐭俊楠岃瘉鐮佺櫥褰� loginByMobilePhone(data) { return request({ - url: "/identity/api/LoginByMobilePhone", - method: "post", + url: '/identity/api/LoginByMobilePhone', + method: 'post', data, - }); + }) }, // 璁剧疆鐢ㄦ埛key setUserKey(data) { return request({ - url: "/identity/api/ApiAppUserSetKey", - method: "post", + url: '/identity/api/ApiAppUserSetKey', + method: 'post', data, - }); + }) }, // 鑾峰彇鐢ㄦ埛key getUserKey(data) { return request({ - url: "/identity/api/ApiGetAppUserKey", - method: "post", + url: '/identity/api/ApiGetAppUserKey', + method: 'post', data, - }); + }) }, // 鍒犻櫎鐢ㄦ埛key delUserKey(data) { return request({ - url: "/identity/api/ApiDelAppUserKey", - method: "post", + url: '/identity/api/ApiDelAppUserKey', + method: 'post', data, - }); + }) }, // 鑾峰彇鍘诲綋鍓嶇敤鎴蜂俊鎭� getCurrentAppUser() { return request({ - url: "/identity/api/GetCurrentAppUser", - method: "post", - }); + url: '/identity/api/GetCurrentAppUser', + method: 'post', + }) }, // 娣诲姞鐢ㄦ埛淇℃伅 setAppUserInfo(data) { return request({ - url: "/identity/api/SetAppUserInfoRequest", - method: "post", + url: '/identity/api/SetAppUserInfoRequest', + method: 'post', data, - }); + }) }, // 鐢ㄦ埛鏇存崲缁戝畾鎵嬫満鍙凤紝濡傛病鏈夌粦瀹氭墜鏈哄垯鑷姩鍒涘缓 userSetPhoneNumber(data) { return request({ - url: "/identity/api/ApiUserSetPhoneNumber", - method: "post", + url: '/identity/api/ApiUserSetPhoneNumber', + method: 'post', data, - }); + }) }, // 妫�娴嬬敤鎴锋槸鍚︾粦瀹氬井淇� checkBuildingWeChat(data) { return request({ - url: "/identity/api/ApiCheckBuildingWeChat", - method: "post", + url: '/identity/api/ApiCheckBuildingWeChat', + method: 'post', data, - }); + }) }, - // 閫氳繃鎵嬫満鍙烽噸缃瘑鐮� changePasswordByMobilePhone(data) { return request({ - url: "/identity/api/ChangePasswordByMobilePhone", - method: "post", + url: '/identity/api/ChangePasswordByMobilePhone', + method: 'post', data, - }); + }) }, // 寰俊寮�鏀惧钩鍙版壂鐮佺櫥褰� loginByWeChatOpenCode(data) { return request({ - url: "/identity/api/LoginByWeChatOpenCode", - method: "post", + url: '/identity/api/LoginByWeChatOpenCode', + method: 'post', data, - }); + }) }, // 鐢ㄦ埛缁戝畾寰俊鍙� bindingWeChat(data) { return request({ - url: "/identity/api/ApiBindingWeChat", - method: "post", + url: '/identity/api/ApiBindingWeChat', + method: 'post', data, - }); + }) }, // 璁剧疆鐧诲綍鐨勭敤鎴峰悕鍜屽瘑鐮侊紝鐢ㄦ埛鍚嶅拰瀵嗙爜鑷冲皯6浣� setLoginNameAndPassword(data) { return request({ - url: "/identity/api/ApiUserSetLoginNameAndPassword", - method: "post", + url: '/identity/api/ApiUserSetLoginNameAndPassword', + method: 'post', data, - }); + }) }, // 鑾峰彇閭楠岃瘉鐮� getEmailCode(data) { return request({ - url: "/identity/api/SendVerifyEMail", - method: "post", + url: '/identity/api/SendVerifyEMail', + method: 'post', data, - }); + }) }, // 鐢ㄦ埛缁戝畾閭 bindingEmail(data) { return request({ - url: "/identity/api/ApiBindEMail", - method: "post", + url: '/identity/api/ApiBindEMail', + method: 'post', data, - }); + }) }, -}; +} -export default identityApi; \ No newline at end of file +export default identityApi diff --git a/src/assets/js/middleGround/tool.js b/src/assets/js/middleGround/tool.js index 44e3985..64a0d3d 100644 --- a/src/assets/js/middleGround/tool.js +++ b/src/assets/js/middleGround/tool.js @@ -1,7 +1,7 @@ import { requestCtx, appId } from '@/assets/js/config.js' // import defaultImg from '@/assets/images/default-book-img.png' // import defaultBookFair from '@/assets/images/default-bookFair.png' -// import bookCover from '@/assets/images/book-cover.png' +import bookCover from '@/assets/images/book-cover.png' // import defaultPub from '@/assets/images/math/default-pub.png' // import defaultAudio from '@/assets/images/math/default-audio.png' import moment from 'moment' @@ -13,7 +13,7 @@ storeInfo, repositoryInfo, coverSize, - handelEBooK + handelEBooK, }) { const dataList = [] for (let i = 0; i < datas.length; i++) { @@ -78,7 +78,7 @@ subProductCount: parseInt(item.datas.SubProductCount), ..._fields, datas: item.datas, - subDatas + subDatas, } // 缁熶竴澶勭悊浠锋牸 @@ -88,7 +88,7 @@ let saleMethod = [] try { saleMethod = obj.cmsDatas[0].datas.find( - (item) => item.datas.RefCode == 'tourism_accompanyingResources' + (item) => item.datas.RefCode == 'tourism_accompanyingResources', ).datas.SaleMethod saleMethod = JSON.parse(saleMethod) } catch (error) { @@ -154,22 +154,22 @@ itemFields, handelEBooK, }) { - item.fileMap = {}; - let itemFieldsData = []; + item.fileMap = {} + let itemFieldsData = [] for (const key in itemFields) { - itemFieldsData.push(key); + itemFieldsData.push(key) } - let fieldsData = []; + let fieldsData = [] for (const key in fields) { - fieldsData.push(key); + fieldsData.push(key) } for (let i = 0; i < fieldsData.length; i++) { - const field = fieldsData[i]; - item.datas[field] = JSON.parse(item.datas[field]); - const datas = item.datas[field]; + const field = fieldsData[i] + item.datas[field] = JSON.parse(item.datas[field]) + const datas = item.datas[field] if (datas.length > 0) { if (datas[0].Value) { - item[field] = datas[0].Value; + item[field] = datas[0].Value if (datas[0].Data.FileLinkList && datas[0].Data.FileLinkList.length) { item.fileMap = { ...item.fileMap, @@ -178,13 +178,13 @@ return { ...item.File, ...item, - }; - }) + } + }), ), - }; + } } } else if (datas[0].Data) { - item[field] = datas[0].Data.Value; + item[field] = datas[0].Data.Value if (datas[0].Data.FileLinkList && datas[0].Data.FileLinkList.length) { item.fileMap = { ...item.fileMap, @@ -193,84 +193,77 @@ return { ...item.File, ...item, - }; - }) + } + }), ), - }; + } } } } } // 澶勭悊cms璧勬簮 - const subDatas = item.subDatas; - const linkItemsMap = {}; + const subDatas = item.subDatas + const linkItemsMap = {} if (subDatas) { for (const sdata of subDatas) { - const tag = sdata.queryTag; + const tag = sdata.queryTag for (const subItem of sdata.datas) { - convertCmsItemBase(subItem, coverSize, handelEBooK); - subItem.fileMap = {}; + convertCmsItemBase(subItem, coverSize, handelEBooK) + subItem.fileMap = {} for (let i = 0; i < itemFieldsData.length; i++) { - const itemField = itemFieldsData[i]; + const itemField = itemFieldsData[i] try { - subItem.datas[itemField] = JSON.parse(subItem.datas[itemField]); + subItem.datas[itemField] = JSON.parse(subItem.datas[itemField]) } catch (error) { - subItem.datas[itemField] = []; + subItem.datas[itemField] = [] } - const itemDatas = subItem.datas[itemField]; + const itemDatas = subItem.datas[itemField] if (itemDatas.length > 0) { if (itemDatas[0].Value) { - subItem[itemField] = itemDatas[0].Value; + subItem[itemField] = itemDatas[0].Value if (itemDatas[0].FileList && itemDatas[0].FileList.length) { subItem.fileMap = { ...subItem.fileMap, ...handleLinkFileInfo(itemDatas[0].FileList), - }; + } } } else if (itemDatas[0].Data) { - subItem[itemField] = itemDatas[0].Data.Value; - if ( - itemDatas[0].Data.FileList && - itemDatas[0].Data.FileList.length - ) { + subItem[itemField] = itemDatas[0].Data.Value + if (itemDatas[0].Data.FileList && itemDatas[0].Data.FileList.length) { subItem.fileMap = { ...subItem.fileMap, ...handleLinkFileInfo(itemDatas[0].Data.FileList), - }; + } } } else if (itemDatas[0].CmsItemData) { - subItem[itemField] = itemDatas[0].CmsItemData.Value; - if ( - itemDatas[0].CmsItemData.FileList && - itemDatas[0].CmsItemData.FileList.length - ) { + subItem[itemField] = itemDatas[0].CmsItemData.Value + if (itemDatas[0].CmsItemData.FileList && itemDatas[0].CmsItemData.FileList.length) { subItem.fileMap = { ...subItem.fileMap, ...handleLinkFileInfo(itemDatas[0].CmsItemData.FileList), - }; + } } } } } if (subItem.productLinkInfo && subItem.productLinkInfo.length) { - let itemProductLinkInfo = subItem.productLinkInfo.find(citem => citem.Name == item.datas.Name) + let itemProductLinkInfo = subItem.productLinkInfo.find( + (citem) => citem.Name == item.datas.Name, + ) subItem.productLinkPath = - itemProductLinkInfo.LinkPath + - "\\" + - itemProductLinkInfo.CmsItemId; + itemProductLinkInfo.LinkPath + '\\' + itemProductLinkInfo.CmsItemId } if (subItem.linkInfo && subItem.linkInfo.length) - subItem.linkPath = - subItem.linkInfo[0].LinkPath + "\\" + subItem.linkInfo[0].CmsItemId; + subItem.linkPath = subItem.linkInfo[0].LinkPath + '\\' + subItem.linkInfo[0].CmsItemId } - linkItemsMap[tag] = sdata.datas; + linkItemsMap[tag] = sdata.datas } } - convertCmsItemBase(item, coverSize, handelEBooK); - item.idPath = path + "\\" + item.id; - item.subItems = linkItemsMap; - return item; + convertCmsItemBase(item, coverSize, handelEBooK) + item.idPath = path + '\\' + item.id + item.subItems = linkItemsMap + return item } const handleLinkFileInfo = (linkList) => { @@ -287,7 +280,7 @@ size: linkItem.Size, // metaData: JSON.parse(linkItem.MetaData ?? "{}"), order: linkItem.Order, - protectType: linkItem.ProtectType + protectType: linkItem.ProtectType, } } return linkFileMap @@ -309,9 +302,9 @@ item.linkStoreId = parseInt(item.datas.LinkStore) item.linkRepoId = item.datas.LinkRepository item.childrenCount = parseInt(item.datas.ChildrenCount ?? '0') - ;(item.childrenFolderCount = parseInt(item.datas.ChildrenFolderCount ?? '0')), + ;((item.childrenFolderCount = parseInt(item.datas.ChildrenFolderCount ?? '0')), (item.childrenChannelCount = parseInt(item.datas.ChildrenChannelCount ?? '0')), - (item.linkId = parseInt(item.datas.LinkId)) + (item.linkId = parseInt(item.datas.LinkId))) item.linkOrg = JSON.parse(item.datas.LinkOrg ?? '[]')[0] item.linkDepartment = JSON.parse(item.datas.LinkDepartment ?? '[]')[0] item.linkInfo = JSON.parse(item.datas.LinkInfo ?? '[]') @@ -328,7 +321,7 @@ if (handelEBooK) { // 鑾峰彇闅忎功璧勬簮鐨勯攢鍞柟寮� let saleMethod = item.cmsDatas[0].datas.find( - (item) => item.refCode == 'tourism_accompanyingResources' + (item) => item.refCode == 'tourism_accompanyingResources', ).saleMethod if (saleMethod && saleMethod.length > 0) { Object.keys(saleMethod[0]).map((key) => { @@ -411,10 +404,10 @@ if (md5) { src = requestCtx + `/file/GetPreViewImage?md5=${md5}` } else { - if(storeInfo == `defaultGoodsStore${appId}`){ - return bookCover; - }else{ - return "" + if (storeInfo == `defaultGoodsStore${appId}`) { + return bookCover + } else { + return '' } } if (width && src) src += `&width=${width}` diff --git a/src/assets/js/toolClass.js b/src/assets/js/toolClass.js index 3f993b3..b56f586 100644 --- a/src/assets/js/toolClass.js +++ b/src/assets/js/toolClass.js @@ -1,12 +1,7 @@ import SparkMD5 from 'spark-md5' -import { - getPublicImage -} from '@/assets/js/middleGround/tool.js' +import { getPublicImage } from '@/assets/js/middleGround/tool.js' import config from './config' -import moment from "moment"; - - - +import moment from 'moment' var tool = { secondToTime(second) { @@ -74,9 +69,8 @@ .replace(/\.[\d]{3}Z/, '') var time = new Date(newDate) return time.getTime() - } + }, } - //澶勭悊琛ㄥ崟鎻愪氦鏁版嵁 export function worksData(res) { @@ -101,8 +95,8 @@ nrr.push({ linkProtectType: e.linkProtectType, linkType: e.linkType, - md5: e.md5 - }) + md5: e.md5, + }), ) } res.forEach((item) => { @@ -111,7 +105,7 @@ order: 0, typeFieldId: item.typeField.id, sequenceNum: item.config ? JSON.parse(item.config).uuid : '', - newDataAndFileLinkListRequest: [] + newDataAndFileLinkListRequest: [], } for (let k in value) { if (item.typeField.refCode === k) { @@ -165,7 +159,7 @@ id: updateOldData.id, typeFieldId: citem.typeField.id, sequenceNum: citem.sequenceNum, - setDataAndFileLinkListRequest: [] + setDataAndFileLinkListRequest: [], } for (let k in value) { if (citem.typeField.refCode === k) { @@ -174,9 +168,11 @@ obj.setDataAndFileLinkListRequest = linkList } else if (typeof value[k] == 'object' && k == 'region') { obj.strValue = value[k]?.join('/') - obj.setDataAndFileLinkListRequest = [{ - area: value[k] - }] + obj.setDataAndFileLinkListRequest = [ + { + area: value[k], + }, + ] } else { obj.strValue = value[k].toString() } @@ -191,7 +187,7 @@ order: 0, typeFieldId: citem.typeField.id, sequenceNum: citem.sequenceNum, - setDataAndFileLinkListRequest: [] + setDataAndFileLinkListRequest: [], } for (let k in value) { if (citem.typeField.refCode === k) { @@ -210,7 +206,7 @@ }) return { updateData: arr, - newData: newArr + newData: newArr, } } @@ -298,10 +294,7 @@ // 鑾峰彇鏂囦欢 export function getPublicFile(md5, isToken) { - const { - tokenKey, - requestCtx - } = config + const { tokenKey, requestCtx } = config let src = null let token = localStorage.getItem(tokenKey) if (md5) { @@ -316,33 +309,28 @@ return src } - - - - - export const handleCmsItemListRequestData = (datas, fields, path, storeId, repositoryId) => { - const dataList = []; + const dataList = [] for (let i = 0; i < datas.length; i++) { - const item = datas[i]; - const _fields = {}; - const _datas = []; + const item = datas[i] + const _fields = {} + const _datas = [] if (fields != null) { for (let fieldKey in fields) { // 鍏煎绛涢�夋潯浠剁殑瀛楁鍊艰幏鍙栵紝鍥犱负鍚庡彴绛涢�夊拰鍙栧�煎彧鑳戒紶涓�涓紝閮戒細杩斿洖鍊� - fieldKey = fieldKey.replace(/[!=<>*]/g, ''); + fieldKey = fieldKey.replace(/[!=<>*]/g, '') if (item.datas[fieldKey]) { - let values = []; + let values = [] if (typeof item.datas[fieldKey] == 'string') { - values = JSON.parse(item.datas[fieldKey]); + values = JSON.parse(item.datas[fieldKey]) } else { - values = item.datas[fieldKey]; + values = item.datas[fieldKey] } - if (values ?.length > 0) { + if (values?.length > 0) { // 鐢ㄥ瓧娈靛悕澶勭悊杩斿洖鐨勫瓧娈靛�� if (values[0].Value) { - _fields[fieldKey] = values[0].Value; - values[0].sequenceNum = values[0].SequenceNum; + _fields[fieldKey] = values[0].Value + values[0].sequenceNum = values[0].SequenceNum } // 鍏煎澶勭悊鏁版嵁杩斿洖鐨刱ey鏄疌msItemData // if (values[0].CmsItemData) { @@ -350,24 +338,24 @@ // values[0].sequenceNum = values[0].CmsItemData.SequenceNum; // } - item.datas[fieldKey] = values[0]; - if (values ?.length > 1) { - const isFile = values.find((citem) => citem.FileList ?.length > 0); - const dataItems = deduplicateArray(values, 'FieldId'); + item.datas[fieldKey] = values[0] + if (values?.length > 1) { + const isFile = values.find((citem) => citem.FileList?.length > 0) + const dataItems = deduplicateArray(values, 'FieldId') if (!isFile) { - _datas.push(dataItems[0]); + _datas.push(dataItems[0]) } else { const customFile = { customFileList: values, name: fieldKey, md5: _fields[fieldKey], FieldId: values[0].FieldId, - SequenceNum: values[0].SequenceNum - }; - _datas.push(customFile); + SequenceNum: values[0].SequenceNum, + } + _datas.push(customFile) } } else { - _datas.push(values[0]); + _datas.push(values[0]) } } } @@ -375,14 +363,14 @@ } if (item.datas.LogQuery) { - item.datas.LogQuery = JSON.parse(item.datas.LogQuery); + item.datas.LogQuery = JSON.parse(item.datas.LogQuery) } - const subDatas = {}; + const subDatas = {} if (item.subDatas) { for (let subData of item.subDatas) { - const tag = subData.queryTag.replace('Query', ''); - subDatas[tag] = subData.datas; + const tag = subData.queryTag.replace('Query', '') + subDatas[tag] = subData.datas } } dataList.push({ @@ -414,47 +402,48 @@ linkInfo: item.datas.LinkInfo ? JSON.parse(item.datas.LinkInfo) : [], linkPath: item.datas.LinkPath ?? null, linkOrg: item.datas.LinkOrg ? JSON.parse(item.datas.LinkOrg) : [], - linkDepartment: item.datas.LinkDepartment? JSON.parse(item.datas.LinkDepartment) : [], + linkDepartment: item.datas.LinkDepartment ? JSON.parse(item.datas.LinkDepartment) : [], ..._fields, datas: item.datas, fieldList: _datas, - subDatas - }); + subDatas, + }) } - return dataList; -}; + return dataList +} // type缁撴瀯澶勭悊 export const handleTypeList = (list) => { for (let i = 0; i < list.length; i++) { - const type = list[i]; + const type = list[i] try { - type.cfg = JSON.parse(type.config); + type.cfg = JSON.parse(type.config) } catch (error) { - type.cfg = null; + type.cfg = null } - const fieldRefcodeMap = {}; - const tableHeaderFieldList = []; - const isSearchFieldList = []; - const isAdvSearchFieldList = []; - const isFilterFieldList = []; + const fieldRefcodeMap = {} + const tableHeaderFieldList = [] + const isSearchFieldList = [] + const isAdvSearchFieldList = [] + const isFilterFieldList = [] + console.log(type, 'type') handleType({ - typeFieldList: type.typeLinkList, + typeFieldList: type.cmsTypeLinks, fieldRefcodeMap, tableHeaderFieldList, isSearchFieldList, isAdvSearchFieldList, - isFilterFieldList - }); - type.fieldRefcodeMap = fieldRefcodeMap; - type.tableHeaderFieldList = tableHeaderFieldList; - type.isSearchFieldList = isSearchFieldList; - type.isAdvSearchFieldList = isAdvSearchFieldList; - type.isFilterFieldList = isFilterFieldList; + isFilterFieldList, + }) + type.fieldRefcodeMap = fieldRefcodeMap + type.tableHeaderFieldList = tableHeaderFieldList + type.isSearchFieldList = isSearchFieldList + type.isAdvSearchFieldList = isAdvSearchFieldList + type.isFilterFieldList = isFilterFieldList } - return list; -}; + return list +} const handleType = ({ typeFieldList, @@ -462,34 +451,34 @@ tableHeaderFieldList, isSearchFieldList, isAdvSearchFieldList, - isFilterFieldList + isFilterFieldList, }) => { for (let i = 0; i < typeFieldList.length; i++) { - const item = typeFieldList[i]; + const item = typeFieldList[i] try { - item.cfg = JSON.parse(item.config); + item.cfg = JSON.parse(item.config) } catch (error) { - item.cfg = null; + item.cfg = null } if (item.typeField) { try { - item.typeField.cfg = JSON.parse(item.typeField.config); + item.typeField.cfg = JSON.parse(item.typeField.config) } catch (error) { - item.typeField.cfg = null; + item.typeField.cfg = null } - fieldRefcodeMap[item.typeField.refCode] = item; + fieldRefcodeMap[item.typeField.refCode] = item } if (item.cfg && item.cfg.isColHeader) { - tableHeaderFieldList.push(item); + tableHeaderFieldList.push(item) } if (item.cfg && item.cfg.isSearch) { - isSearchFieldList.push(item); + isSearchFieldList.push(item) } if (item.cfg && item.cfg.isAdvSearch) { - isAdvSearchFieldList.push(item); + isAdvSearchFieldList.push(item) } if (item.cfg && item.cfg.isFilter) { - isFilterFieldList.push(item); + isFilterFieldList.push(item) } if (item.children && item.children.length) { handleType({ @@ -498,59 +487,54 @@ tableHeaderFieldList, isSearchFieldList, isAdvSearchFieldList, - isFilterFieldList - }); + isFilterFieldList, + }) } } -}; - +} //澶勭悊鏍戝舰缁撴瀯 const handleTreeData = (datas, parent, noTriggerSelect = false) => { - let parentData = {}; + let parentData = {} if (parent) { - parentData = { ...parent, parent: null }; + parentData = { ...parent, parent: null } } else { - parentData = null; + parentData = null } - const list = []; + const list = [] for (let i = 0; i < datas.length; i++) { - const data = datas[i]; + const data = datas[i] const obj = { label: data.name, - key: parentData ? parentData.key + "_" + i : i + "", - namePath: parentData ? parentData.namePath + "\\" + data.name : data.name, + key: parentData ? parentData.key + '_' + i : i + '', + namePath: parentData ? parentData.namePath + '\\' + data.name : data.name, icon: data.icon, data: data, parent: parentData, leaf: false, children: [], - }; - if (data["children"] && data["children"].length) { - obj.leaf = false; + } + if (data['children'] && data['children'].length) { + obj.leaf = false obj.children = handleTreeData( - data["children"], + data['children'], { ...data, key: obj.key, namePath: obj.namePath, }, - i == 0 ? false : true // 濡傛灉鏈夊瓙鏁版嵁澶勭悊锛屽彧鏈夌涓�鏉℃暟鎹渶瑕佸睍寮�鍜屽洖璋� - ); + i == 0 ? false : true, // 濡傛灉鏈夊瓙鏁版嵁澶勭悊锛屽彧鏈夌涓�鏉℃暟鎹渶瑕佸睍寮�鍜屽洖璋� + ) } else { - obj.leaf = - !data["childrenChannelCount"] || data["childrenChannelCount"] == 0; + obj.leaf = !data['childrenChannelCount'] || data['childrenChannelCount'] == 0 } - list.push(obj); + list.push(obj) } - console.log(list, "list"); - return list; -}; - + console.log(list, 'list') + return list +} //鑾峰彇璧勬簮 - - export default { ...tool, @@ -564,4 +548,4 @@ handleTypeList, handleTreeData, // parseHtml, -} \ No newline at end of file +} diff --git a/src/assets/main.css b/src/assets/main.css index 4dffbeb..c3da4fe 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -163,7 +163,8 @@ } */ .el-input-group__append, .el-input-group__prepend { - vertical-align: initial !important; + /* vertical-align: initial !important; */ + /* align-items: stretch !important; */ } .el-checkbox__inner{ border: 1px solid #000 !important; diff --git a/src/components/MapContainer.vue b/src/components/MapContainer.vue new file mode 100644 index 0000000..6f2a549 --- /dev/null +++ b/src/components/MapContainer.vue @@ -0,0 +1,90 @@ +<template> + <div class="map-container"> + <!-- 鍦板浘瀹瑰櫒 --> + <div id="map-container" ref="mapContainer"></div> + </div> +</template> + +<script setup> +import { ref, onMounted } from 'vue' +import AMapLoader from '@amap/amap-jsapi-loader' + +// 閰嶇疆瀹夊叏瀵嗛挜锛堟帹鑽愶級 +window._AMapSecurityConfig = { + securityJsCode: '4c6cee842f5412a45a781aeaa76e12cc', // 楂樺痉鎺у埗鍙拌幏鍙� +} + +const mapContainer = ref(null) +const mapInstance = ref(null) +const marker = ref(null) + +// 绀轰緥鍦扮偣鏁版嵁 +const location = ref({ + name: '澶╁畨闂ㄥ箍鍦�', + address: '鍖椾含甯備笢鍩庡尯闀垮畨琛�', + position: [116.413823, 39.912052], +}) + +// 鍒濆鍖栧湴鍥� +onMounted(() => { + AMapLoader.load({ + key: '4c6cee842f5412a45a781aeaa76e12cc', // 鏇挎崲涓轰綘鐨凨ey + version: '2.0', // SDK鐗堟湰 + plugins: ['AMap.Marker', 'AMap.ToolBar', 'AMap.Scale'], // 鎵�闇�鎻掍欢 + }) + .then((AMap) => { + // 鍒涘缓鍦板浘瀹炰緥 + mapInstance.value = new AMap.Map(mapContainer.value, { + viewMode: '2D', // 榛樿浣跨敤2D妯″紡 + zoom: 15, // 鍒濆缂╂斁绾у埆 + center: location.value.position, // 鍒濆涓績鐐� + }) + + // 娣诲姞鎺т欢 + mapInstance.value.addControl(new AMap.ToolBar()) + mapInstance.value.addControl(new AMap.Scale()) + + // 娣诲姞鏍囪鐐� + marker.value = new AMap.Marker({ + position: location.value.position, + title: location.value.name, + }) + mapInstance.value.add(marker.value) + + // 鐐瑰嚮鏍囪鐐规樉绀轰俊鎭� + marker.value.on('click', () => { + alert(`鎮ㄧ偣鍑讳簡锛�${location.value.name}`) + }) + }) + .catch((error) => { + console.error('鍦板浘鍔犺浇澶辫触:', error) + }) +}) +</script> + +<style scoped> +.map-container { + position: relative; + width: 100%; + height: 500px; +} + +#map-container { + width: 100%; + height: 100%; + border-radius: 8px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); +} + +.location-card { + position: absolute; + bottom: 20px; + left: 20px; + background: white; + padding: 15px; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + z-index: 10; + max-width: 300px; +} +</style> diff --git a/src/components/sliderImg/component/verify.vue b/src/components/sliderImg/component/verify.vue new file mode 100644 index 0000000..02ed5d2 --- /dev/null +++ b/src/components/sliderImg/component/verify.vue @@ -0,0 +1,69 @@ +<template> + <div class="container"> + <div id="captcha" style="position: relative"></div> + </div> +</template> +<script> +export default { + name: "verify", + props: { + msg: String, + MG: Object, + }, + data() { + return { + code: "", + }; + }, + + mounted() { + this.getImg(); + }, + methods: { + getImg() { + var that = this; + this.MG.identity.getSlideCaptchaImage().then((res) => { + try { + if (res) { + /* eslint-disable */ // 鍙傛暟1锛氬綋鍓嶇敾甯冪埗绾у厓绱� 鍙傛暟2锛氭粦鍔ㄦ垚鍔熷嚱鏁帮紝杩斿洖婊戝姩璺濈锛屾帴鍙e弬鏁板墠缂�锛屽綋鍓嶇洅瀛愬唴瀛愬厓绱犲強鏂规硶 鍙傛暟3锛氭粦鍔ㄥけ璐ュ嚱鏁拌繑鍥炴粦鍔ㄨ窛绂伙紝鎺ュ彛鍙傛暟鍓嶇紑 鍙傛暟4锛氶�氳繃鎺ュ彛鑾峰彇鍒扮殑鍥剧墖浠ュ強瀹介珮姣� 鍙傛暟5锛氬綋鍓嶉〉闈㈢殑this + jigsaw.init( + document.getElementById("captcha"), + function (left, prefix, objCustom) { + const data = { + captcha: prefix + left, + }; + that.MG.identity.validSlideCaptcha(data).then((res) => { + if (res && res.result == "楠岃瘉鎴愬姛") { + that.code = res.code; + console.log(res, "this.code"); + document.getElementById("msg").innerHTML = res.result; + objCustom.addClass( + objCustom.sliderContainer, + "sliderContainer_success" + ); + that.$emit("loginImgVerify", res.code); + } else { + document.getElementById("msg").innerHTML = + res.result + ",鐐瑰嚮鍙充笂瑙掑埛鏂板啀璇曚竴娆�"; + objCustom.addClass( + objCustom.sliderContainer, + "sliderContainer_fail" + ); + } + }); + }, + function (left, prefix) { + console.log(left, prefix, "fail"); + }, + res, // 鍥剧墖鍙傛暟 + that + ); + } + } catch (error) { + console.log(error); + } + }); + }, + }, +}; +</script> diff --git a/src/components/sliderImg/img/refresh.png b/src/components/sliderImg/img/refresh.png new file mode 100644 index 0000000..0636826 --- /dev/null +++ b/src/components/sliderImg/img/refresh.png Binary files differ diff --git a/src/components/sliderImg/img/right.jpg b/src/components/sliderImg/img/right.jpg new file mode 100644 index 0000000..c0c2769 --- /dev/null +++ b/src/components/sliderImg/img/right.jpg Binary files differ diff --git a/src/components/sliderImg/img/update@3.5x.png b/src/components/sliderImg/img/update@3.5x.png new file mode 100644 index 0000000..3ca44ec --- /dev/null +++ b/src/components/sliderImg/img/update@3.5x.png Binary files differ diff --git a/src/components/sliderImg/sliderImg.css b/src/components/sliderImg/sliderImg.css new file mode 100644 index 0000000..4cf7364 --- /dev/null +++ b/src/components/sliderImg/sliderImg.css @@ -0,0 +1,167 @@ +.container { + max-width: 400px; + width: auto; + margin: auto; + overflow: hidden; +} +input { + display: block; + width: 290px; + line-height: 40px; + padding: 10px; + box-sizing: border-box; + outline: none; + border: 1px solid #c8cccf; + border-radius: 4px; + color: #6a6f77; +} +#msg { + position: absolute; + bottom: 60px; + left: 0; + width: 100%; + background-color: rgba(0, 0, 0, 0.3); + line-height: 40px; + font-size: 14px; + color: #fff; + text-align: center; + z-index: 999; +} + +.msgError { + color: #ff4c05 !important; +} + +.msgSuccess { + color: #52ccba !important; +} + +/* a:link, +a:visited, +a:hover, +a:active { + margin-left: 100px; + color: #0366d6; +} */ +.block { + position: absolute; + left: 0; + top: 0; +} + +.sliderContainer { + position: relative; + text-align: center; + width: 400px; + height: 40px; + line-height: 40px; + margin-top: 15px; + background: #f7f9fa; + color: #45494c; + border: 1px solid #e4e7eb; +} + +.sliderContainer_active .slider { + height: 38px; + top: -1px; + border: 1px solid #1991fa; +} + +.sliderContainer_active .sliderMask { + height: 38px; + border-width: 1px; +} + +.sliderContainer_success .slider { + height: 38px; + top: -1px; + border: 1px solid #52ccba; + background-color: #52ccba !important; +} + +.sliderContainer_success .sliderMask { + height: 38px; + border: 1px solid #52ccba; + background-color: #d2f4ef; +} + +.sliderContainer_success .sliderIcon { + background-position: 0 -40px !important; +} + +.sliderContainer_fail .slider { + height: 38px; + top: -1px; + border: 1px solid #f57a7a; + background-color: #f57a7a !important; +} + +.sliderContainer_fail .sliderMask { + height: 38px; + border: 1px solid #f57a7a; + background-color: #fce1e1; +} + +.sliderContainer_fail .sliderIcon { + background-position: 0 -83px !important; +} +.sliderContainer_active .sliderText, +.sliderContainer_success .sliderText, +.sliderContainer_fail .sliderText { + display: none; +} + +.sliderMask { + position: absolute; + left: 0; + top: 0; + height: 40px; + border: 0 solid #1991fa; + background: #d1e9fe; +} + +.slider { + position: absolute; + top: 0; + left: 0; + width: 40px; + height: 40px; + background: #fff; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); + cursor: pointer; + transition: background 0.2s linear; +} + +.slider:hover { + background: #1991fa; +} + +.slider:hover .sliderIcon { + background-position: 0 -40px; +} + +.sliderIcon { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: url("./img/right.jpg"); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} + +.refreshIcon { + position: absolute; + right: 5px; + top: 5px; + width: 25px; + height: 25px; + cursor: pointer; + background: url("./img//refresh.png"); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; + z-index: 1; +} diff --git a/src/components/sliderImg/sliderImg.js b/src/components/sliderImg/sliderImg.js new file mode 100644 index 0000000..db9063b --- /dev/null +++ b/src/components/sliderImg/sliderImg.js @@ -0,0 +1,262 @@ +(function (window) { + let l = 50, // 婊戝潡杈归暱 + r = 0, // 婊戝潡鍗婂緞 + w = 300, // canvas瀹藉害 + h = 150, // canvas楂樺害 + PI = Math.PI; + let L = l + r * 2; // 婊戝潡瀹為檯杈归暱 + + function createCanvas(width, height) { + const canvas = createElement("canvas"); + canvas.width = width; + canvas.height = height; + return canvas; + } + + function createImg(onload, info) { + const img = createElement("img"); + img.crossOrigin = "Anonymous"; + img.onload = onload; + img.onerror = () => { + img.src = getRandomImg(info.backgroundImage); + }; + img.src = getRandomImg(info.backgroundImage); + return img; + } + + function createImg2(onload, info) { + const block = createElement("img"); + block.crossOrigin = "Anonymous"; + block.onload = onload; + block.onerror = () => { + block.src = getRandomImg(info.frontImage); + }; + block.src = getRandomImg(info.frontImage); + return block; + } + + function createElement(tagName) { + return document.createElement(tagName); + } + + function addClass(tag, className) { + tag.classList.add(className); + } + + function removeClass(tag, className) { + tag.classList.remove(className); + } + + function getRandomImg(val) { + return val; + } + + function sum(x, y) { + return x + y; + } + + function square(x) { + return x * x; + } + + function clear(obj) { + obj.canvasCtx.clearRect(0, 0, w, h); + obj.blockCtx.clearRect(0, 0, w, h); + obj.block.width = w; + document.getElementById("msg").innerHTML = null; + document.getElementById("captcha").innerHTML = null; + } + + class jigsaw { + constructor(el, success, fail, info, parent) { + this.el = el; + this.success = success; + this.fail = fail; + this.info = info; + this.parent = parent; + } + + init() { + if (this.info) { + const { backgroundHeight, backgroundWidth, frontHeight, frontWidth } = + this.info; + l = frontHeight; + r = 0; + w = backgroundWidth; + h = backgroundHeight; + L = frontWidth; + } + this.initDOM(); + this.initImg(); + this.bindEvents(); + } + + initDOM() { + const canvas = createCanvas(w, h); // 鐢诲竷 + const block = canvas.cloneNode(true); // 婊戝潡 + const msg = createElement("div"); + const sliderContainer = createElement("div"); + const refreshIcon = createElement("div"); + const sliderMask = createElement("div"); + const slider = createElement("div"); + const sliderIcon = createElement("span"); + const text = createElement("span"); + + block.className = "block"; + msg.id = "msg"; + sliderContainer.className = "sliderContainer"; + refreshIcon.className = "refreshIcon"; + sliderMask.className = "sliderMask"; + slider.className = "slider"; + sliderIcon.className = "sliderIcon"; + text.innerHTML = "鍚戝彸婊戝姩婊戝潡濉厖鎷煎浘"; + text.className = "sliderText"; + + const el = this.el; + el.appendChild(canvas); + el.appendChild(refreshIcon); + el.appendChild(block); + el.appendChild(msg); + slider.appendChild(sliderIcon); + sliderMask.appendChild(slider); + sliderContainer.appendChild(sliderMask); + sliderContainer.appendChild(text); + el.appendChild(sliderContainer); + + Object.assign(this, { + canvas, + block, + sliderContainer, + refreshIcon, + slider, + sliderMask, + sliderIcon, + text, + msg, + canvasCtx: canvas.getContext("2d"), + blockCtx: block.getContext("2d"), + addClass, + clear, + }); + } + + initImg() { + const block = createImg2(() => { + this.blockCtx.drawImage(block, 0, 0, w, h); + }, this.info); + const img = createImg(() => { + this.canvasCtx.drawImage(img, 0, 0, w, h); + }, this.info); + this.img = img; + } + + clean() { + this.canvasCtx.clearRect(0, 0, w, h); + this.blockCtx.clearRect(0, 0, w, h); + this.block.width = w; + } + + bindEvents() { + this.el.onselectstart = () => false; + this.refreshIcon.onclick = () => { + this.reset(); + }; + + let originX, + originY, + trail = [], + isMouseDown = false; + var that = this; + + var handleDragStart = function (e) { + originX = e.clientX || e.touches[0].clientX; + originY = e.clientY || e.touches[0].clientY; + // (originX = e.x), (originY = e.y); + isMouseDown = true; + }; + + var handleDragMove = function (e) { + if (!isMouseDown) return false; + var eventX = e.clientX || e.touches[0].clientX; + var eventY = e.clientY || e.touches[0].clientY; + const moveX = eventX - originX; + const moveY = eventY - originY; + if (moveX < 0 || moveX + 38 >= w) return false; + that.slider.style.left = moveX + "px"; + var blockLeft = ((w - 40 - 20) / (w - 40)) * moveX; + that.block.style.left = blockLeft + "px"; + addClass(that.sliderContainer, "sliderContainer_active"); + that.sliderMask.style.width = moveX + "px"; + console.log(that.sliderMask.offsetLeft, 4545); + trail.push(moveY); + }; + + var handleDragEnd = function (e) { + if (!isMouseDown) return false; + isMouseDown = false; + var eventX = e.clientX || e.changedTouches[0].clientX; + if (eventX == originX) return false; + removeClass(that.sliderContainer, "sliderContainer_active"); + that.trail = trail; + const { left } = that.verify(); + const { prefix } = that.info; + if (left && prefix) { + that.success(left, prefix, that); + } else { + addClass(that.sliderContainer, "sliderContainer_fail"); + that.fail && that.fail(left, prefix); + setTimeout(() => { + that.reset(); + }, 1000); + } + }; + this.slider.addEventListener("mousedown", handleDragStart); + this.slider.addEventListener("touchstart", handleDragStart); + document.addEventListener("mousemove", handleDragMove); + document.addEventListener("touchmove", handleDragMove); + document.addEventListener("mouseup", handleDragEnd); + document.addEventListener("touchend", handleDragEnd); + + document.addEventListener("mousedown", function () { + return false; + }); + document.addEventListener("touchstart", function () { + return false; + }); + // this.slider.addEventListener("mousedown"); + // document.addEventListener("mousemove"); + // document.addEventListener("mouseup"); + } + + verify() { + const arr = this.trail; // 鎷栧姩鏃秠杞寸殑绉诲姩璺濈 + const average = arr.reduce(sum) / arr.length; // 骞冲潎鍊� + const deviations = arr.map((x) => x - average); // 鍋忓樊鏁扮粍 + const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length); // 鏍囧噯宸� + const left = parseInt(this.block.style.left); + return { + // spliced: Math.abs(left - this.x) < 10, + // TuringTest: average !== stddev, // 鍙槸绠�鍗曠殑楠岃瘉鎷栧姩杞ㄨ抗锛岀浉绛夋椂涓�鑸负0锛岃〃绀哄彲鑳介潪浜轰负鎿嶄綔 + left, + // x: this.x, + }; + } + + reset() { + this.sliderContainer.className = "sliderContainer"; + this.slider.style.left = 0; + this.block.style.left = 0; + this.sliderMask.style.width = 0; + clear(this); + // this.initImg(); + this.parent.getImg(); + console.log(this.parent); + } + } + + window.jigsaw = { + init: function (element, success, fail, info, callback) { + new jigsaw(element, success, fail, info, callback).init(); + }, + }; +})(window); diff --git a/src/layout/components/headerPage.vue b/src/layout/components/headerPage.vue index d435d21..b4ec4ec 100644 --- a/src/layout/components/headerPage.vue +++ b/src/layout/components/headerPage.vue @@ -27,31 +27,16 @@ <a @click=" () => { - $router.push({ - path: '/register', - }) + console.log(loginRef.value) + loginRef.logIn() } " - >娉ㄥ唽</a - > - | - <a - @click=" - () => { - $router.push({ - path: '/login', - query: { - redirectPath: $route.fullPath, - }, - }) - } - " - >鐧诲綍</a + >娉ㄥ唽/鐧诲綍</a > </div> <div v-else class="userInfoBox"> <el-dropdown @command="handleCommand"> - <span style="cursor: pointer">娆㈣繋鎮紝{{ userInfo.name }}锛�</span> + <span style="cursor: pointer">娆㈣繋鎮紝{{ userStore?.userInfo.name }}锛�</span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item icon="el-icon-user" command="gotoPersonalCenter" >涓汉涓績</el-dropdown-item @@ -65,6 +50,7 @@ </div> </div> </div> + <login ref="loginRef"></login> <div class="contentBox navBox" v-show="!hideNav"> <div :class="{ @@ -82,8 +68,15 @@ </template> <script setup lang="ts"> -import { ref } from 'vue' +import login from './login.vue' +import { onMounted, ref } from 'vue' import { Search } from '@element-plus/icons-vue' +import { useUserStore } from '@/stores' +import { useRouter } from 'vue-router' +const userStore = useUserStore() +const router = useRouter() + +const loginRef = ref() const props = defineProps({ hideSerch: { type: Boolean, @@ -116,9 +109,16 @@ }, ]) +onMounted(() => { + userInfo.value = userStore.userInfo + console.log(userInfo.value, 'userInfo') +}) + const gotoSearch = () => {} const handleCommand = () => {} -const gotoPage = () => {} +const gotoPage = (item) => { + router.push(item.path) +} </script> <style lang="less" scoped> diff --git a/src/layout/components/login.vue b/src/layout/components/login.vue new file mode 100644 index 0000000..b09f083 --- /dev/null +++ b/src/layout/components/login.vue @@ -0,0 +1,832 @@ +<template> + <el-dialog + align-center + append-to-body + v-model="dialogFormVisible" + @close="closeDialog" + @open="openDialog" + class="fansdialog" + > + <div style="display: flex; justify-content: space-around"> + <el-image :src="dialogLeftImg" class="leftImg" /> + + <div class="logIn"> + <div class="signUpTitle" v-if="flag == 'logIn'"> + <ul> + <li + @click="signUpWay = 'authSignUp'" + :style="{ + color: signUpWay == 'authSignUp' ? '#144941' : '#545C63', + }" + > + 鎵嬫満鍙风櫥褰� + </li> + <li>|</li> + <li + @click="wechatLoginOpen" + :style="{ color: signUpWay == 'wechat' ? '#144941' : '#545C63' }" + > + 寰俊鐧诲綍 + </li> + </ul> + </div> + <div v-else style="text-align: center; color: #144941">娉ㄥ唽</div> + <div + class="singUpPhone" + v-if="signUpWay === 'phone' || 'authSignUp'" + :style="{ height: signUpWay == 'findPassword' ? '450px' : '400px' }" + > + <el-form + :model="passFormData" + v-if="signUpWay === 'phone' || 'authSignUp'" + ref="passFormRef" + @keyup.enter="signInSystem(passFormRef)" + > + <el-form-item + v-if="signUpWay !== 'findPassword'" + :rules="[ + { min: 11, max: 11, message: '璇疯緭鍏�11浣嶇數璇濆彿鐮�' }, + { + validator: (_, value, callback) => { + if ( + !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test( + value, + ) + ) { + callback('璇疯緭鍏�11浣嶇數璇濆彿鐮�') + } else { + callback() + } + }, + }, + ]" + prop="telNumber" + > + <el-input v-model="passFormData.telNumber" placeholder="璇疯緭鍏ユ墜鏈哄彿" size="large"> + <template #prepend> + <el-select + v-model="select" + placeholder="Select" + style="width: 110px" + class="selectPhone" + > + <el-option label="涓浗+86" value="86" /> + </el-select> + </template> + </el-input> + </el-form-item> + <el-form-item> + <el-button class="yanzhengBtn" @click="sliderImgDialogVisable = true">楠岃瘉</el-button> + </el-form-item> + <el-form-item + v-if="signUpWay === 'authSignUp'" + class="codeWay" + :rules="[ + { required: true, message: '璇疯緭鍏ラ獙璇佺爜' }, + { min: 4, max: 6, message: '璇疯緭鍏ユ湁鏁堥獙璇佺爜' }, + ]" + prop="telCode" + > + <el-input v-model="passFormData.telCode" placeholder="璇疯緭鍏ラ獙璇佺爜" size="large" /> + <el-button + type="primary" + class="codeBtn" + :disabled="countDown != 0" + @click="getCode(passFormRef)" + >{{ countDown == 0 ? '鑾峰彇楠岃瘉鐮�' : '楠岃瘉鐮�(' + countDown + 's)' }}</el-button + > + </el-form-item> + <el-form-item + v-if="flag === 'signUp'" + :rules="[ + { required: true, message: '璇疯緭鍏ュ瘑鐮�' }, + { min: 8, max: 16, message: '瀵嗙爜鍦�8鍒�16浣嶄箣闂�' }, + { + validator: (rule, value, callback) => { + if (!/\d/.test(value) || /^\d+$/.test(value)) { + callback('瀵嗙爜涓嶈兘涓虹函鏁板瓧鎴栧瓧姣�') + } else { + callback() + } + }, + }, + ]" + prop="password" + class="passwordInput" + > + <el-input + type="password" + show-password + v-model="passFormData.password" + placeholder="璇疯緭鍏ュ瘑鐮�" + size="large" + style="width: 304px" + > + </el-input> + </el-form-item> + <el-form-item + v-if="flag === 'signUp'" + :rules="[ + { required: true, message: '璇疯緭鍏ョ‘璁ゅ瘑鐮�' }, + { validator: validateLogInPassword }, + ]" + prop="confirmPassword" + class="passwordInput" + > + <el-input + type="password" + show-password + v-model="passFormData.confirmPassword" + placeholder="纭瀵嗙爜" + size="large" + style="width: 304px" + /> + </el-form-item> + </el-form> + + <el-button class="loginBtn" @click="loginBtn">鐧诲綍</el-button> + </div> + </div> + </div> + + <el-dialog + v-model="sliderImgDialogVisable" + align-center + destroy-on-close="true" + width="420" + class="sliderImgDialog" + > + <verify :MG="MG" @loginImgVerify="loginImgVerify"></verify> + </el-dialog> + </el-dialog> +</template> + +<script setup> +import { ref, inject, watchEffect, reactive, nextTick } from 'vue' +import dialogLeftImg from '@/assets/images/header/dialogLeftImg.png' +import verify from '@/components/sliderImg/component/verify.vue' +import '@/components/sliderImg/sliderImg.js' +import '@/components/sliderImg/sliderImg.css' +import { ElMessage } from 'element-plus' +import { useUserStore } from '@/stores' +import { useRouter } from 'vue-router' +const router = useRouter() + +const userStore = useUserStore() + +const MG = inject('MG') +const config = inject('config') +const dialogFormVisible = ref(false) +const sliderImgDialogVisable = ref(false) +const flag = ref('logIn') // 鐧诲綍鎴栨敞鍐� + +const signUpWay = ref('authSignUp') // 鐧诲綍鏂瑰紡 +const select = ref('涓浗+86') +const countDown = ref(0) // 鍊掕鏃舵椂闂� +let timer = null // 鍊掕鏃跺疄渚� +const passFormRef = ref() +const passFormData = ref({ + telNumber: '', + password: '', + telCode: '', + password: '', + confirmPassword: '', +}) +const closeDialog = () => { + countDown.value = 0 + clearInterval(timer) + if (passFormRef.value) { + passFormRef.value.resetFields() + } + dialogFormVisible.value = false +} +// 寮圭獥鎵撳紑浜嬩欢 +const openDialog = () => {} + +const loginImgVerify = (code) => { + sliderImgDialogVisable.value = false + MG.identity + .getPhoneCode({ + phoneNumber: passFormData.value.telNumber, + imageCaptcha: code, + appRefCode: config.appRefCode, + }) + .then((res) => { + if (res == '楠岃瘉鐮佸彂閫佹垚鍔�') { + getSecond(60) + ElMessage.success(res) + } else { + ElMessage.error(res) + } + }) +} + +watchEffect(() => { + if (dialogFormVisible.value) { + } +}) + +//鐧诲綍 + +const loginBtn = () => { + let query = { + phoneNumber: passFormData.value.telNumber, + phoneCaptcha: passFormData.value.telCode, + appRefCode: config.appRefCode, + platform: 'string', + } + MG.identity.loginByMobilePhone(query).then((res) => { + console.log('res', res) + userStore.setToken(res.data.accessToken) + + getUserInfo() + }) +} + +const getUserInfo = () => { + MG.identity.getCurrentAppUser().then((res) => { + console.log('res', res) + if (res) { + let userInfo = res.infoList.find((item) => item.type == 'userInfo') + let userTypeObj = res.infoList.find((item) => item.type == 'userType') + const userData = { + userName: userInfo && userInfo.data ? JSON.parse(userInfo.data).name : '', + school: userInfo && userInfo.data ? JSON.parse(userInfo.data).school : '', + city: userInfo && userInfo.data ? JSON.parse(userInfo.data).city : '', + cityCode: userInfo && userInfo.data ? JSON.parse(userInfo.data).cityCode : '', + address: userInfo && userInfo.data ? JSON.parse(userInfo.data).address : '', + userType: userTypeObj && userTypeObj.data ? JSON.parse(userTypeObj.data).userType : '', + } + localStorage.setItem('jsek-isUserInfo', userData?.userType == '' ? '-1' : '1') + let teacherRole = res.roleLinks.find((item) => item.role.refCode == 'teacher') + let teacherInfos = res.infoList.find((item) => item.type == 'teacherInfo') + let wechatInfo = res.infoList.find((item) => item.type == 'WeChat') + let studentInfo = res.infoList.find((item) => item.type == 'Default') + let phoneInfo = res.secretList.find((item) => item.type == 'MobilePhone') + // let nameAndPassword = res.secretList.find((item) => item.type == 'LoginNameAndPassword') + let emailInfo = res.secretList.find((item) => item.type == 'EMail') + if (teacherRole && teacherInfos) { + userStore.setUserInfo({ + ...userData, + ...teacherInfos, + phoneNumber: phoneInfo?.credential, + Email: emailInfo ? emailInfo.credential : JSON.parse(teacherInfos.data).email, + icon: wechatInfo?.icon, + role: 'Teacher', + roleId: teacherRole.role.id, + userId: res.userId, + }) + } else if (wechatInfo) { + userStore.setUserInfo({ + ...userData, + ...wechatInfo, + phoneNumber: phoneInfo?.credential, + Email: emailInfo?.credential, + role: 'Student', + userId: res.userId, + }) + } else if (studentInfo) { + userStore.setUserInfo({ + ...userData, + ...studentInfo, + icon: wechatInfo?.icon, + phoneNumber: phoneInfo?.credential, + Email: emailInfo?.credential, + role: 'Student', + userId: res.userId, + }) + } else if (phoneInfo) { + userStore.setUserInfo({ + ...userData, + ...phoneInfo, + name: phoneInfo?.credential, + icon: phoneInfo?.icon, + phoneNumber: phoneInfo?.credential, + role: 'Student', + userId: res.userId, + }) + } + } + router.go(0) + }) +} + +// 鍊掕鏃� +const getSecond = (time) => { + if (!timer) { + countDown.value = time + timer = setInterval(() => { + countDown.value-- + if (countDown.value == 0) { + clearInterval(timer) + timer = null + } + }, 1000) + } +} + +// 鐧诲綍鍜岄噸缃瘑鐮佹寜閽寜閽� +const signInSystem = async (formEl) => { + if (!formEl) return + formEl.validate((valid) => { + if (valid) { + // if (signUpWay.value === 'phone') { + // // 璐﹀彿瀵嗙爜鐧诲綍 + // passwordSignUp() + // } else if (signUpWay.value == 'authSignUp') { + // // 楠岃瘉鐮佺櫥褰� + // codeSignUp() + // } else { + // // 閲嶇疆瀵嗙爜 + // changePassword() + // } + } + }) +} + +const logIn = () => { + dialogFormVisible.value = true + flag.value = 'logIn' +} + +// 鎵撳紑娉ㄥ唽寮圭獥 +const signUp = () => { + dialogFormVisible.value = true + flag.value = 'signUp' +} +const wechatLoginOpen = () => { + signUpWay.value = 'wechat' +} + +defineExpose({ + logIn, + signUp, +}) +</script> + +<style lang="less" scoped> +// 鐢ㄦ埛淇℃伅濉啓鐣岄潰 +.changeUser { + .prompt-title { + width: 80%; + line-height: 24px; + color: #000; + span { + display: inline-block; + } + } +} +.fansdialog { + width: 806px; + + .leftImg { + box-sizing: border-box; + width: 403px; + } + + .el-dialog__header { + padding: 0; + } + + .el-dialog__body { + width: 806px; + height: 575px; + display: flex; + padding: 0 !important; + } + + .leftImg { + .el-image__inner { + width: 403px; + } + } + + .el-dialog__header { + padding: 0; + } + + .el-dialog__body { + width: 806px; + display: flex; + padding: 0 !important; + } +} + +.agreementDialog { + width: 760px; + height: 600px; + + p span { + line-height: 24px; + } + + .el-dialog__header { + font-size: 18px; + color: #333; + } + + .el-dialog__body { + overflow: auto; + height: 500px; + width: 760px; + } + + .el-dialog__footer { + display: flex; + justify-content: center; + } +} + +.wechatTipsDialog { + .el-dialog__header { + font-size: 18px; + } + + .el-dialog__body { + display: flex; + align-items: center; + + p { + margin-left: 10px; + line-height: 24px; + } + } +} +.sliderImgDialog { + .el-dialog__body { + min-height: 320px; + } +} +</style> + +<style lang="less"> +/** 鐧诲綍娉ㄥ唽寮圭獥 */ +.logIn { + width: 403px; + height: 100%; + padding-top: 48px; + display: flex; + flex-direction: column; + justify-content: space-around; + + .signUpTitle { + width: 100%; + ul { + display: flex; + justify-content: center; + width: 100%; + li { + height: 20px; + display: flex; + align-items: center; + .el-image { + margin-right: 5px; + width: 20px; + } + } + li:nth-child(2n + 1) { + cursor: pointer; + margin: 0 10px; + } + li:first-child { + margin-left: 0; + .el-image { + width: 10px; + } + } + } + } + + /** 寰俊鐧诲綍 */ + .signUpContent { + display: flex; + height: 400px; + flex-wrap: wrap; + flex-direction: column; + justify-content: space-around; + align-content: center; + + .el-image { + width: 176px; + } + + h2 { + font-size: 20px; + color: #000; + font-weight: 700; + text-align: center; + } + + p { + text-align: center; + line-height: 26px; + } + + .wechatCode { + h2 { + margin-bottom: 24px; + } + } + } + + /** 瀵嗙爜鐧诲綍 */ + .singUpPhone { + height: 400px; + display: flex; + flex-direction: column; + align-items: center; + + h2 { + padding-top: 35px; + font-size: 20px; + color: #000; + font-weight: 700; + text-align: center; + } + + .back { + display: flex; + align-items: center; + cursor: pointer; + margin: 10px 0px 0px 20px; + align-self: flex-start; + font-size: 12px; + color: #333; + } + + .el-form { + margin-top: 26px; + } + + .signInBtn { + width: 304px; + height: 41px; + margin-bottom: 33px; + border-radius: 3px; + // opacity: 0.55; + color: #fff; + font-size: 14px; + } + + .codeBtn { + width: 101px; + height: 41px; + background-color: #019e58; + // opacity: 0.55; + } + .yanzhengBtn { + width: 100%; + height: 41px; + background-color: #019e58; + color: #fff; + } + .loginBtn { + width: 76%; + height: 41px; + background: linear-gradient(90deg, #019e58 0%, #144941 100%); + color: #fff; + margin-top: 50px; + } + + .el-image { + display: flex; + flex-direction: column; + justify-content: center; + } + + .authSignUp { + width: 305px; + flex: 1; + display: flex; + justify-content: end; + align-items: end; + padding-bottom: 20px; + + span { + cursor: pointer; + color: #333; + font-size: 12px; + } + } + + .codeWay { + .el-input { + width: 195px; + } + + .el-button { + width: 100px; + padding: 0; + margin: 0 0 0 10px; + } + + .authCodeBox { + width: 100px; + height: 50px; + margin-left: 10px; + cursor: pointer; + position: relative; + span { + position: absolute; + top: 35px; + height: 10px; + margin-bottom: 20px; + font-size: 10px; + color: #1f971f; + } + } + } + } + + .claus { + margin-bottom: 10px; + color: #000; + font-size: 12px; + width: 100%; + text-align: center; + line-height: 26px; + } +} +.policy { + cursor: pointer; + color: #ff6c00; +} +/** 娉ㄥ唽琛ㄥ崟 */ +.signUp { + width: 403px; + justify-content: space-around; + color: #333; + font-size: 12px; + + span:first-child, + span:last-child { + cursor: pointer; + } + + .logInTitle { + width: 96%; + font-size: 16px; + margin: 20px 0 0 20px; + font-weight: bold; + } + + h4 { + font-size: 16px; + color: #ff6c00; + } + + .logInBox { + margin-top: 20px; + padding: 0 40px; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .el-form-item { + .el-button { + width: 100px; + height: 41px; + border-radius: 3px; + color: #fff; + font-size: 14px; + } + } + .agreement { + height: 40px; + display: flex; + align-items: center; + margin: 30px 0 0 0; + line-height: 32px; + height: 32px; + font-size: 12px; + color: #000; + + .el-checkbox { + margin-right: 10px; + } + + .el-link { + font-size: 12px; + } + + p { + height: 100%; + display: flex; + align-items: center; + } + } + + .hint { + font-size: 11px; + color: #545c63; + } + + .codeWay { + .el-input { + width: 195px; + } + + .el-button { + width: 100px; + padding: 0; + margin: 0 0 0 10px; + } + + .authCodeBox { + width: 100px; + height: 50px; + margin-left: 10px; + cursor: pointer; + position: relative; + span { + position: absolute; + top: 35px; + left: 0; + width: 100px; + font-size: 10px; + color: #1f971f; + } + } + } + } + + .logInBtn { + width: 304px; + height: 41px; + margin-top: 10px; + margin-bottom: 20px; + border-radius: 3px; + color: #fff; + font-size: 14px; + } + + /** 閫夋嫨鐢ㄦ埛绫诲瀷 */ + .changeUser { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + .el-form-item { + &:last-child { + margin-bottom: 0; + } + .el-button { + height: 40px; + margin-left: 10px; + } + } + h2 { + font-size: 20px; + margin-top: 70px; + color: #000; + font-weight: bold; + } + + .el-radio-group { + display: flex; + flex-direction: column; + + .el-radio-button { + width: 166px; + } + + /deep/ .el-radio-button__inner { + width: 166px; + height: 41px; + line-height: 24px; + border-radius: 4px; + border: 0; + border: 1px solid #dcdfe6; + } + + .el-radio-button:nth-child(n + 1) { + margin-bottom: 27px; + } + } + } +} + +.selectPhone { + background: #fff; +} + +// .el-select { +// width: 100px; +// height: 30px; +// color: red; +// border: none !important; + +// /deep/ .select-trigger { +// height: 100%; + +// .el-input--suffix { +// height: 100%; +// background-color: #fff; +// } +// } +// } +</style> diff --git a/src/plugin/axios/index.ts b/src/plugin/axios/index.ts index 4c1e09f..db4c3a9 100644 --- a/src/plugin/axios/index.ts +++ b/src/plugin/axios/index.ts @@ -1,69 +1,84 @@ -import axios from "axios"; -import myConfig from "@/assets/js/config.js"; -import toolClass from "@/assets/js/toolClass.js"; -import router from "@/router"; +import axios from 'axios' +import myConfig from '@/assets/js/config.js' +import toolClass from '@/assets/js/toolClass.js' +import router from '@/router' // 鍒涘缓 axios 瀹炰緥 const service = axios.create({ baseURL: myConfig.requestCtx, timeout: myConfig.requestTimeOut, // 璇锋眰瓒呮椂鏃堕棿 -}); +}) // 璇锋眰鎷︽埅鍣� service.interceptors.request.use( (config) => { - let token = localStorage.getItem(myConfig.tokenKey); - if (token) config.headers["Authorization"] = `bearer ${token}`; - return config; + let token = localStorage.getItem(myConfig.tokenKey) + console.log(token, 'token') + + if (token) config.headers['Authorization'] = `bearer ${token}` + return config }, (error) => { // 鍙戦�佸け璐� - Promise.reject(error); - } -); + Promise.reject(error) + }, +) // 鍝嶅簲鎷︽埅鍣� service.interceptors.response.use( (response) => { // dataAxios 鏄� axios 杩斿洖鏁版嵁涓殑 data - const dataAxios = response.data; - if (typeof dataAxios.data === "boolean") { - return dataAxios.data; + const dataAxios = response.data + if (typeof dataAxios.data === 'boolean') { + return dataAxios.data } - if (response.config.responseType == "blob") { - return dataAxios; + if (response.config.responseType == 'blob') { + return dataAxios } - const { success } = dataAxios; + const { success } = dataAxios if (dataAxios.currentDate) { - sessionStorage.currentDate = new Date(dataAxios.currentDate).getTime(); + sessionStorage.currentDate = new Date(dataAxios.currentDate).getTime() } // 鏍规嵁 code 杩涜鍒ゆ柇 - if (response.status == 200 && response.statusText == "OK") { - return dataAxios.data ? dataAxios.data : dataAxios; + if (success) { + return dataAxios.data ? dataAxios.data : dataAxios } else { // 鎻愮ず閿欒 } }, (error) => { - if ( - (error.response && error.response.status == 401) || - error.code == "ERR_NETWORK" - ) { - console.log(router, "router"); + if ((error.response && error.response.status == 401) || error.code == 'ERR_NETWORK') { + console.log(router, 'router') - localStorage.removeItem(myConfig.tokenKey); - localStorage.removeItem("jesk-userInfo"); - router.push({ - name: "login", - }); + localStorage.removeItem(myConfig.tokenKey) + localStorage.removeItem('jesk-userInfo') + localStorage.removeItem('jsek-isUserInfo') + localStorage.removeItem('alreadyElectronicBook') + localStorage.removeItem('alreadyPaperBook') + localStorage.removeItem('electronicBookList') + localStorage.removeItem('paperBookList') + sessionStorage.removeItem('cartNumber') + const url = window.location.hash.slice(1) + console.log(url, 'url') + if (url.includes('showLogin=1')) { + router.push(url) + } else { + // router.push(url) + if (url.includes('?')) { + console.log(url.includes('?')) + router.push(url) + } else { + router.push(url + '?showLogin=1') + } + } } else { if (error.response && error.response.data && error.response.data.error) { - console.error(error.response.data.error.msg); + console.error(error.response.data.error.msg) } else { - console.error("璇锋眰鍙戠敓閿欒"); + console.error('璇锋眰鍙戠敓閿欒') } } - return Promise.reject(error); - } -); + return Promise.reject(error) + }, +) -export default service; +export default service diff --git a/src/router/index.js b/src/router/index.js index 9132c1e..569a7ec 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,5 +1,8 @@ import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router' import HomeView from '../views/home/index.vue' +import aboutUs from '../views/aboutUs/index.vue' +import bookStore from '../views/bookStore/index.vue' +import bookdetail from '../views/bookStore/detail.vue' import PageLayout from '../layout/baseLayout.vue' const router = createRouter({ history: createWebHashHistory(import.meta.env.BASE_URL), @@ -15,6 +18,21 @@ name: 'home', component: HomeView, }, + { + path: '/aboutUs', + name: 'aboutUs', + component: aboutUs, + }, + { + path: '/bookdetail', + name: 'bookdetail', + component: bookdetail, + }, + { + path: '/bookStore', + name: 'bookStore', + component: bookStore, + }, ], }, ], diff --git a/src/stores/counter.js b/src/stores/counter.js deleted file mode 100644 index b6757ba..0000000 --- a/src/stores/counter.js +++ /dev/null @@ -1,12 +0,0 @@ -import { ref, computed } from 'vue' -import { defineStore } from 'pinia' - -export const useCounterStore = defineStore('counter', () => { - const count = ref(0) - const doubleCount = computed(() => count.value * 2) - function increment() { - count.value++ - } - - return { count, doubleCount, increment } -}) diff --git a/src/stores/index.js b/src/stores/index.js new file mode 100644 index 0000000..1b6c194 --- /dev/null +++ b/src/stores/index.js @@ -0,0 +1,9 @@ +import { createPinia } from 'pinia' + +// 鍒涘缓pinia瀹炰緥 +const pinia = createPinia() + +export default pinia + +// export * from './modules/breadcrumb' +export * from './modules/user' diff --git a/src/stores/modules/user.js b/src/stores/modules/user.js new file mode 100644 index 0000000..a3a2e1c --- /dev/null +++ b/src/stores/modules/user.js @@ -0,0 +1,56 @@ +import { defineStore } from 'pinia' +import { ref } from 'vue' + +export const useUserStore = defineStore('user', () => { + const token = localStorage.getItem('jsek-token') ? ref(localStorage.getItem('jsek-token')) : ref() + const userInfo = localStorage.getItem('jesk-userInfo') + ? ref(JSON.parse(localStorage.getItem('jesk-userInfo'))) + : ref() + const setToken = (value) => { + token.value = value + localStorage.setItem('jsek-token', value) + } + const setUserInfo = (value) => { + userInfo.value = value + localStorage.setItem('jesk-userInfo', JSON.stringify(value)) + } + // 閫�鍑虹櫥褰� + const delteUserInfo = () => { + ;((token.vlaue = ''), (userInfo.value = { userName: '', userType: '' })) + localStorage.removeItem('jsek-token') + localStorage.removeItem('jesk-userInfo') + localStorage.removeItem('jsek-isUserInfo') + } + // 璐墿杞︽暟閲� + let cartNum = ref(1) + // 鏇存柊鍙充晶寮瑰嚭妗嗚喘鐗╄溅鐨勬暟閲� + const updateRightPop = () => { + cartNum.value += 1 + } + + // 璐墿杞﹀晢鍝乮d + const shoppingIds = ref([]) + const updateShoppingIds = (ids) => { + shoppingIds.value = ids + } + + // 宸茶喘涔扮殑鍟嗗搧id + const buyIds = ref([]) + const updateBuyIds = (ids) => { + buyIds.value = ids + } + + return { + token, + setToken, + userInfo, + setUserInfo, + delteUserInfo, + cartNum, + updateRightPop, + shoppingIds, + updateShoppingIds, + buyIds, + updateBuyIds, + } +}) diff --git a/src/views/aboutUs/index.vue b/src/views/aboutUs/index.vue new file mode 100644 index 0000000..8324cc0 --- /dev/null +++ b/src/views/aboutUs/index.vue @@ -0,0 +1,378 @@ +<template> + <div class="homePage"> + <el-carousel :height="screenheight + 'px'"> + <el-carousel-item v-for="(item, index) in banner" :key="index"> + <div class="bannerBox imgBox"> + <img id="autoHeight" class="bannerImg" :src="item.icon" @click="bannerLink(item)" /> + </div> + </el-carousel-item> + </el-carousel> + + <div class="contentBox"> + <div class="crumbs"> + <el-breadcrumb separator-class="el-icon-arrow-right"> + <el-breadcrumb-item :to="{ name: 'home' }">棣栭〉</el-breadcrumb-item> + <el-breadcrumb-item>鍏充簬鎴戜滑</el-breadcrumb-item> + </el-breadcrumb> + </div> + <div class="aboutUs"> + <div class="aboutTitle"> + <div class="titleBox1"> + <img class="autoImg" src="@/assets/images/xiehe/about/yinhao.png" alt="" /> + </div> + <div class="titleText">Publisher Introduction</div> + </div> + <div class="textBox" v-html="publisherIntroduction"></div> + <div class="statisticsBox"> + <div class="statisticsItem"> + <div class="statisticsNum"> + {{ publisherData.focusOnMedical }} <span class="circleBox">骞�</span> + </div> + <div class="statisticsTitle">涓撴敞鍖诲鍑虹増</div> + </div> + <div class="statisticsItem"> + <div class="statisticsNum">{{ publisherData.topExpertDatabase }}+ 浣�</div> + <div class="statisticsTitle">椤剁骇涓撳搴�</div> + </div> + <div class="statisticsItem"> + <div class="statisticsNum"> + {{ publisherData.accumulatedTextbooks }}+ <span class="circleBox">鏈�</span> + </div> + <div class="statisticsTitle">绱鍑虹増鏁欐潗鏁欒緟</div> + </div> + <div class="statisticsItem"> + <div class="statisticsNum"> + {{ publisherData.academicJournals }} <span class="circleBox">鏈�</span> + </div> + <div class="statisticsTitle">瀛︽湳鏈熷垔</div> + </div> + <div class="statisticsItem"> + <div class="statisticsNum"> + {{ publisherData.dualCoreJournal }} <span class="circleBox">鏈�</span> + </div> + <div class="statisticsTitle">鍙屾牳蹇冩湡鍒�</div> + </div> + </div> + </div> + </div> + <div class="brandCultureBox"> + <div class="brandCultureTop"> + <div class="CultureBox"> + <div class="brandCultureTitle"> + <div>鐞嗗康涓庡搧鐗屾枃鍖�</div> + <div class="enText">Philosophy & Brand Culture</div> + </div> + <div class="cultureList" v-loading="loading"> + <div class="cultureItem firstItem"> + <div class="cultureTitle" style="border-bottom: 1px solid rgba(255, 255, 255, 0.1)"> + <div class="leftIcon"> + <img class="autoImg" src="@/assets/images/xiehe/about/zongzhi.png" alt="" /> + </div> + <div class="titleTextInfo"> + <div class="itemTitle" style="color: #fff">{{ ideaBrandCulture[0]?.name }}</div> + <div class="itemSubTitle" style="color: #fff"> + {{ ideaBrandCulture[0]?.EnglishName }} + </div> + </div> + </div> + <div + class="itemText" + style="color: #d5d5d5" + v-html="ideaBrandCulture[0]?.content" + ></div> + </div> + <div class="cultureItem"> + <div class="cultureTitle"> + <div class="leftIcon"> + <img class="autoImg" src="@/assets/images/xiehe/about/beijing.png" alt="" /> + </div> + <div class="titleTextInfo"> + <div class="itemTitle">{{ ideaBrandCulture[1]?.name }}</div> + <div class="itemSubTitle"> + {{ ideaBrandCulture[1]?.EnglishName }} + </div> + </div> + </div> + <div class="itemText" v-html="ideaBrandCulture[1]?.content"></div> + </div> + <div class="cultureItem"> + <div class="cultureTitle"> + <div class="leftIcon"> + <img class="autoImg" src="@/assets/images/xiehe/about/zizhi.png" alt="" /> + </div> + <div class="titleTextInfo"> + <div class="itemTitle">{{ ideaBrandCulture[2]?.name }}</div> + <div class="itemSubTitle"> + {{ ideaBrandCulture[2]?.EnglishName }} + </div> + </div> + </div> + <div class="itemText" v-html="ideaBrandCulture[2]?.content"></div> + </div> + <div class="cultureItem"> + <div class="cultureTitle"> + <div class="leftIcon"> + <img class="autoImg" src="@/assets/images/xiehe/about/fazhan.png" alt="" /> + </div> + <div class="titleTextInfo"> + <div class="itemTitle">{{ ideaBrandCulture[3]?.name }}</div> + <div class="itemSubTitle"> + {{ ideaBrandCulture[3]?.EnglishName }} + </div> + </div> + </div> + <div class="itemText" v-html="ideaBrandCulture[3]?.content"></div> + </div> + </div> + </div> + </div> + </div> + <div class="page-container"> + <MapContainer /> + </div> + </div> +</template> + +<script setup> +import moment from 'moment' +import MapContainer from '@/components/MapContainer.vue' +import { ref, onBeforeMount, inject, reactive, onMounted } from 'vue' +let screenheight = ref(document.documentElement.clientHeight / 2) +const MG = inject('MG') +const config = inject('config') +const tool = inject('tool') +const banner = reactive([]) +let publisherIntroduction = ref('') +let publisherData = ref('') +let ideaBrandCulture = ref([]) +let loading = ref(false) + +const getBanner = () => { + MG.resource + .getItem({ + path: 'banner\\homeBanner', + fields: { link: [] }, + paging: { start: 0, size: 9 }, + }) + .then((res) => { + banner.push(...res.datas) + console.log(res.datas) + }) +} +const getPublisherIntroduction = () => { + MG.resource + .getItem({ + path: 'aboutUs\\publisherIntroduction', + fields: { content: [] }, + paging: { start: 0, size: 9 }, + }) + .then((res) => { + console.log(res.datas) + publisherIntroduction.value = res.datas[0].content + }) +} +const getIdeaBrandCulture = () => { + loading.value = true + MG.resource + .getItem({ + path: 'aboutUs\\ideaBrandCulture', + fields: { content: [], EnglishName: [] }, + paging: { start: 0, size: 9 }, + }) + .then((res) => { + console.log(res.datas, 'ideaBrandCulture') + ideaBrandCulture.value = res.datas + loading.value = false + }) +} +const getPublisherData = () => { + MG.resource + .getItem({ + path: 'aboutUs\\publisherData', + fields: { + academicJournals: [], + accumulatedTextbooks: [], + dualCoreJournal: [], + focusOnMedical: [], + topExpertDatabase: [], + }, + paging: { start: 0, size: 1 }, + }) + .then((res) => { + console.log(res.datas, 'publisherData') + publisherData.value = res.datas[0] + }) +} + +onMounted(() => { + getBanner() + getPublisherIntroduction() + getPublisherData() + getIdeaBrandCulture() +}) +</script> + +<style lang="less" scoped> +.homePage { + min-width: 1220px; + min-height: calc(100vh - 61.8%); + background-color: #fff; +} +.contentBox { + background-color: #fff; + + padding-bottom: 100px; + margin-top: 35px; + .aboutUs { + width: 100%; + font-size: 16px; + border-top: 1px solid #ededed; + margin-top: 40px; + .aboutTitle { + display: flex; + width: 100%; + padding-top: 30px; + .titleBox1 { + position: relative; + width: 50px; + height: 50px; + margin-right: 20px; + } + .titleText { + font-size: 48px; + font-weight: 700; + opacity: 0.05; + } + } + .block { + display: inline-block; + width: 4px; + height: 4px; + margin-right: 10px; + vertical-align: middle; + background: #dadada; + } + .selected { + background-color: #e7f9ef; + .block { + background-color: #008e3f; + } + } + .title { + padding: 0; + font-weight: 700; + text-align: center; + background: #008e3f; + color: #fff; + line-height: 36px; + border-bottom: 0; + } + div { + cursor: pointer; + // border-bottom: 1px dashed #ededed; + } + .colorText { + color: #144941; + } + .textBox { + line-height: 20px; + margin-top: 30px; + p { + margin-top: 30px; + } + } + } + .statisticsBox { + display: flex; + justify-content: space-between; + margin-top: 80px; + text-align: center; + .statisticsNum { + font-size: 48px; + } + .statisticsTitle { + margin-top: 10px; + } + .circleBox { + width: 26px; + height: 26px; + display: inline-block; + font-size: 20px; + line-height: 26px; + color: #fff; + background-color: #144941; + border-radius: 50%; + } + } +} +.brandCultureTop { + background-image: url(@/assets/images/xiehe/about/wenhua_bg.png); + width: 100%; + height: 500px; + padding-top: 55px; +} +.brandCultureTitle { + font-size: 36px; + color: #fff; + font-weight: 700; + text-align: center; +} + +.cultureList { + display: flex; + justify-content: space-between; + width: 100%; + margin-top: 60px; +} + +.cultureItem { + width: 320px; + height: 320px; + background-color: #fff; + margin-left: 30px; + padding: 20px; + box-sizing: border-box; +} +.firstItem { + background-color: #144941; + color: #fff; + width: 320px; + height: 320px; + text-align: center; + margin-left: 0px; +} +.CultureBox { + width: 1200px; + margin: 0 auto; +} +.leftIcon { + width: 58px; + height: 58px; + position: relative; +} +.cultureTitle { + display: flex; + border-bottom: 1px solid #dedede; + padding-bottom: 16px; +} +.titleTextInfo { + margin-left: 20px; + text-align: left; +} +.itemTitle { + font-size: 18px; + font-weight: 700; + line-height: 36px; + color: #333; +} +.itemSubTitle { + color: #000; + opacity: 0.5; +} +.itemText { + font-size: 16px; + line-height: 28px; + color: #000; + padding-top: 20px; +} +</style> diff --git a/src/views/bookStore/detail.vue b/src/views/bookStore/detail.vue new file mode 100644 index 0000000..abef0e0 --- /dev/null +++ b/src/views/bookStore/detail.vue @@ -0,0 +1,593 @@ +<template> + <div class="homePage"> + <div class="infoBox"> + <div class="contentBox"> + <div class="crumbs"> + <el-breadcrumb separator-class="el-icon-arrow-right"> + <el-breadcrumb-item :to="{ name: 'bookStore' }">鏁板瓧鏁欐潗</el-breadcrumb-item> + <el-breadcrumb-item>璇︽儏</el-breadcrumb-item> + </el-breadcrumb> + </div> + <div class="infoTag" v-if="bookInfo.projectTitle"> + <el-tooltip + class="item" + effect="dark" + :content="bookInfo.projectTitle" + placement="top-start" + > + <div class="tagText"> + {{ bookInfo.projectTitle }} + </div> + </el-tooltip> + </div> + <div class="bookDetail"> + <div class="bookImg"> + <img class="autoImg" :src="bookInfo.icon" alt="" /> + </div> + <span class="iconfont icon-tubiaozhizuo"></span> + + <div class="detailBox"> + <div class="bookTitle"> + <div class="bookName" :title="bookInfo.name"> + {{ bookInfo.name }} + </div> + <div class="bookTag" :title="bookInfo.seriesName"> + {{ bookInfo.seriesName }} + </div> + <div class="collectBox"> + <img + @click="collectBook" + v-if="bookInfo.isFavourite" + class="buyIcon" + src="@/assets/images/bookStore/shoucang.svg" + style="margin-right: 10px" + /> + <span + @click="collectBook" + v-else + class="iconfont icon-shoucang" + style="margin-right: 10px" + > + </span> + <div class="collectText" @click="collectBook" v-if="bookInfo.isFavourite"> + 宸叉敹钘� + </div> + <div class="collectText" @click="collectBook" v-else>鏀惰棌</div> + </div> + </div> + <div class="authorBox"> + <div class="titleBox1"> + <div>浣滆�咃細</div> + <div>鍑虹増鏃堕棿锛�</div> + </div> + <div class="valueBox"> + <div> + {{ bookInfo.author ? bookInfo.author : '-' }} + </div> + <div> + {{ + bookInfo.publicationDate + ? moment(bookInfo.publicationDate).format('YYYY-MM-DD') + : '-' + }} + </div> + </div> + <div class="titleBox1" style="margin-left: 30px"> + <div>ISBN锛�</div> + <div>鐗堟锛�</div> + </div> + <div class="valueBox"> + <div> + {{ bookInfo.isbn ? bookInfo.isbn : '-' }} + </div> + <div> + {{ bookInfo.pubNumber ? bookInfo.pubNumber : '-' }} + </div> + </div> + </div> + <div class="authorBox" style="box-sizing: border-box"> + <div class="titleBox1"> + <div>涓�绾у垎绫伙細</div> + <div>浜岀骇鍒嗙被锛�</div> + </div> + <div class="valueBox"> + <div>鍏ㄥ浗楂樼瓑鑱屼笟鏁欒偛棰勯槻鍖诲涓撲笟瑙勫垝鏁欐潗</div> + <div>楂樼瓑鑱屼笟鏁欒偛</div> + </div> + </div> + <div class="purchaseBox"> + <div class="priceBox"> + <span v-if="bookInfo.price && bookInfo.price > 0"> + <span>瀹氫环锛�</span><span>锟�</span> <span>{{ bookInfo.price || '-' }}</span + ><span v-if="bookInfo.VirtualPrice">鍘熶环锛氾骏{{ bookInfo.VirtualPrice }}</span> + </span> + + <span class="price" v-else> + <span class="freePrice">鍏嶈垂</span> + </span> + </div> + <div + class="buyInfo" + v-if=" + (currentRoute !== 'teachingServices' && bookInfo.paperBookDD) || + bookInfo.paperBookJD || + bookInfo.paperBookTmall + " + > + 绾歌川涔﹀叾浠栬喘涔版笭閬擄細 + <span @click="toJDLink" v-if="bookInfo.paperBookJD"> + <img class="buyIcon" src="@/assets/images/bookStore/浜笢icon-01.svg" />浜笢</span + > + <span @click="toDDLink" v-if="bookInfo.paperBookDD" + ><img class="buyIcon" src="@/assets/images/bookStore/褰撳綋缃�.svg" />褰撳綋</span + > + <span @click="toTmLink" v-if="bookInfo.paperBookTmall" + ><img + class="buyIcon" + src="@/assets/images/bookStore/tianmaologo2.svg" + />澶╃尗</span + > + </div> + </div> + <div class="btnBox"> + <el-button + v-if=" + currentRoute !== 'teachingServices' && + !bookInfo.alreadyBuy && + bookInfo.isSell && + bookInfo.isSell == '1' + " + type="primary" + :disabled="bookInfo.alreadyBuy" + @click="gotoOrder" + >鐢靛瓙涔﹁喘涔�</el-button + > + <el-button + v-if="bookInfo.pdfFreeFile && !bookInfo.alreadyBuy" + type="primary" + plain + style="min-width: 98px" + @click="previewBook" + >璇曡</el-button + > + <el-button + v-else-if="bookInfo.pdfFile && bookInfo.alreadyBuy" + type="primary" + plain + style="min-width: 98px" + @click="previewBook" + >绔嬪嵆闃呰</el-button + > + <el-button + v-if="currentRoute == 'teachingServices' && !bookInfo.alreadyBuy" + plain + @click="addEbook" + >鐢靛瓙鏍蜂功</el-button + > + <el-button v-if="currentRoute == 'teachingServices'" plain @click="addPaperBook" + >绾歌川鏍蜂功</el-button + > + </div> + </div> + </div> + <el-dialog title="鑱旂郴缂栬緫" :visible.sync="contactVisible" width="30%" :lock-scroll="false"> + <div class="contactBox" v-if="bookInfo.editor"> + <div class="contacItem"> + <i class="iconfont icon-renwu-ren contacIcon"></i> + {{ bookInfo.editor.name }} + </div> + <div class="contacItem"> + <i class="iconfont icon-QQ contacIcon"></i> + {{ bookInfo.editor.qq }} + </div> + <div class="contacItem"> + <i class="iconfont icon-tongxunlu contacIcon"></i> + {{ bookInfo.editor.phone }} + </div> + <div class="contacItem"> + <i class="iconfont icon-dianhua contacIcon"></i> + {{ bookInfo.editor.telephone }} + </div> + </div> + <el-empty v-else description="鏆傛棤鏁版嵁" class="empty" :image-size="100"></el-empty> + </el-dialog> + <el-dialog title="淇℃伅鍙嶉" :visible.sync="dialogVisible" width="50%" :lock-scroll="false"> + <div class="infoDialog"> + <el-input + type="textarea" + :rows="8" + placeholder="璇︾粏鎻忚堪鎮ㄦ墍閬囧埌鐨勯棶棰橈紝鏈夊姪浜庡揩閫熺粰鎮ㄥ弽棣堬紒" + v-model="textarea" + > + </el-input> + <div class="subBtn"> + <el-button type="primary" @click="sendDiscuss">鎻愪氦</el-button> + </div> + <div class="infoList"> + <div class="infoItem" v-for="(item, index) in commentList" :key="index"> + <div class="infoImg"> + <img v-if="item.icon" class="autoImg" :src="item.icon" alt="" /> + <i v-else class="el-icon-user-solid"></i> + </div> + <div class="infoContent"> + <div class="infoTitle"> + <div class="userNameBox">{{ item.content.name }}</div> + <div class="userNameBox"> + {{ moment(item.createDate).format('YYYY-MM-DD') }} + </div> + </div> + <div class="infoText"> + {{ item.content.content }} + </div> + </div> + </div> + </div> + </div> + </el-dialog> + </div> + </div> + + <div class="detailContent contentBox"> + <div class="resourceBox"> + <div class="tabsBox"> + <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs"> + <el-tab-pane + v-for="item in editableTabs" + :key="item.name" + :label="item.title" + :name="item.name" + > + {{ item.content }} + </el-tab-pane> + </el-tabs> + </div> + <div v-if="editableTabsValue == '1'" class="textbookInfo"> + <div class="textbookInfoItem"> + <div class="titleBorderBox">鍥句功绠�浠�</div> + <div class="textbookContent"></div> + </div> + <div class="textbookInfoItem"> + <div class="titleBorderBox">浣滆�呯畝浠�</div> + <div class="authorInfo"></div> + </div> + </div> + <div v-else-if="editableTabsValue == '2'" class="catalogue">bbbb</div> + </div> + <div class="recommendBox"></div> + </div> + </div> +</template> + +<script setup> +import moment from 'moment' +import { ref, onBeforeMount, inject, reactive, onMounted } from 'vue' +const MG = inject('MG') +import { useRouter, useRoute } from 'vue-router' +const route = useRoute() +const router = useRouter() +let bookInfo = ref({}) +let digitalTextId = ref('') +let editableTabsValue = ref('1') + +const editableTabs = reactive([ + { + title: '鏁欐潗淇℃伅', + name: '1', + }, + { + title: '鐩綍', + name: '2', + }, + { + title: '閰嶅璧勬簮', + name: '3', + }, + { + title: '棰樺簱', + name: '4', + }, + { + title: '鏁欏笀璧勬簮', + name: '5', + }, + { + title: '璧勬簮缁熻', + name: '6', + }, +]) + +onMounted(() => { + digitalTextId.value = route.query.bookId + getBookDetail(digitalTextId.value) +}) + +const getBookDetail = (id) => { + const query = { + path: '*', + queryType: '*', + productId: id, + storeInfo: 'defaultGoodsStore1', + coverSize: { + height: 300, + width: 210, + }, + fields: { + author: [], + isbn: [], + editionPrinting: [], + publicationDate: [], + content: [], + authorIntroduction: [], + catalogue: [], + probationPage: [], + teachingLevel: [], + professionalCategory: [], + executiveEditor: [], + }, + } + MG.store.getProductDetail(query).then((res) => { + console.log(res, 'res') + bookInfo.value = res.datas + console.log(res.datas, 'res') + }) +} +</script> + +<style lang="less" scoped> +.homePage { + min-width: 1220px; + min-height: calc(100vh - 61.8%); + background-color: #fff; + padding-bottom: 100px; +} + +.infoBox { + width: 100%; + height: 530px; + padding-top: 10px; + background-color: #fff; + background-image: url('@/assets/images/xiehe/detail/details_bg.png'); +} +.infoTag { + position: relative; + width: 0px; + height: 0px; + border-right: 20px solid #fff; + border-left: 503px solid #e50021; + border-top: 19px solid #e50021; + border-bottom: 19px solid #e50021; +} +.tagText { + position: absolute; + left: -480px; + top: -9.5px; + max-width: 480px; + text-overflow: ellipsis; + color: #fff; + font-size: 18px; + overflow: hidden; + white-space: nowrap; +} +.bookDetail { + display: flex; + overflow: hidden; + margin-top: 30px; +} +.bookImg { + position: relative; + width: 338px; + height: 400px; + box-shadow: 2px 2px 10px #f2f2f2; +} +.detailBox { + flex: 1; + height: 450px; + position: relative; + margin-top: 20px; + overflow: hidden; +} +.collectBox { + position: absolute; + right: 80px; + font-size: 14px; + color: #999999; + cursor: pointer; +} + +.collectBox span:nth-child(1) { + margin-right: 10px; + font-size: 16px; +} +.collectBox span:nth-child(2) { + margin-left: 10px; + margin-right: 10px; + + font-size: 16px; +} +.iconfont { + font-size: 25px !important; + vertical-align: middle; +} +.bookTitle { + width: 100%; + height: 40px; + line-height: 40px; + padding-left: 100px; + display: flex; + padding-right: 240px; + box-sizing: border-box; +} +.collectText { + font-size: 16px; + line-height: 25px; + display: inline-block; +} +.bookName { + flex: 1; + font-size: 26px; + color: #333; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.bookTag { + max-width: 200px; + font-size: 16px; + color: #333; + line-height: 36px; + margin-left: 15px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.authorBox { + width: 80%; + display: flex; + padding: 20px; + padding-left: 100px; + position: relative; +} +.valueBox { + margin-left: 20px; +} +.valueBox div { + height: 30px; +} +.titleBox1 div { + height: 30px; +} +.relationBox { + position: absolute; + right: 50px; + color: #999; + cursor: pointer; + font-size: 14px; +} +.purchaseBox { + margin-left: 100px; + padding-top: 20px; +} +.priceBox { + border-bottom: 1px dashed #ececec; + background-color: #b2d9c8; + height: 50px; + line-height: 50px; + padding-left: 20px; +} +.priceBox span:nth-child(1) { + color: #000; + font-weight: 700; + font-size: 16px; + padding-right: 20px; +} +.priceBox span:nth-child(2) { + color: #e50021; + font-size: 16px; +} +.priceBox span:nth-child(3) { + color: #e50021; + font-size: 22px; + font-weight: 700; + padding-right: 20px; +} +.priceBox span:nth-child(4) { + color: #333; + font-size: 16px; + padding-right: 20px; + text-decoration: line-through; +} +.buyInfo { + padding: 20px 0px; + border-bottom: 1px dashed #ececec; + cursor: pointer; +} +.buyInfo img { + margin-left: 10px; +} +.btnBox { + margin-left: 100px; + margin-top: 30px; +} +.infoItem { + display: flex; + margin-top: 40px; +} +.infoImg { + width: 50px; + height: 50px; + border-radius: 50%; + border: 1px solid #ccc; + background: #efefef; + text-align: center; + line-height: 60px; + position: relative; +} +.infoImg i { + font-size: 28px; +} +.infoList { + margin-top: 20px; + overflow: auto; +} +.infoContent { + flex: 1; + overflow: hidden; + padding: 0 20px 0 10px; +} +.infoDialog { + padding: 20px; +} +.infoTitle { + width: 100%; + display: flex; + justify-content: space-between; +} +.infoText { + margin-top: 24px; + line-height: 20px; +} +.contactBox { + padding: 0px 40px; +} +.contacItem { + margin-top: 20px; +} +.contacIcon { + padding-right: 20px; +} +.subBtn { + margin-top: 20px; + text-align: right; +} +.buyIcon { + width: 24px; + height: 24px; + vertical-align: middle; +} +.crumbs { + margin-top: 10px; + border-bottom: 1px solid rgba(20, 73, 65, 0.26); + padding-bottom: 20px; +} + +.detailContent { + margin-top: 30px; + .resourceBox { + width: 80%; + } + .textbookInfo { + padding: 20px 0; + } +} +.titleBorderBox { + height: 30px; + line-height: 30px; + font-weight: 700; + border-left: 6px solid #019e58; + padding-left: 20px; + font-size: 18px; +} +.textbookInfoItem { + margin-top: 20px; +} +</style> diff --git a/src/views/bookStore/index.vue b/src/views/bookStore/index.vue new file mode 100644 index 0000000..0c89bff --- /dev/null +++ b/src/views/bookStore/index.vue @@ -0,0 +1,383 @@ +<template> + <div class="homePage"> + <div class="bannerBox imgBox"> + <img class="bannerImg" :src="banner[0]?.icon" @click="bannerLink(item)" /> + <div class="bannerText"> + <div>鏁板瓧鏁欐潗</div> + <div class="enText">ABOUT US</div> + </div> + </div> + <div class="contentBox" style="margin-top: 50px"> + <div class="imgBox"> + <img class="autoimg" src="@/assets/images/bookStore/feblei.png" /> + </div> + <div class="classificationBox"> + <div style="width: 100px">鍒嗙被锛�</div> + <div class="classificaListBox"> + <div class="classificaItem" v-for="(item, index) in classfeild" :key="index"> + {{ item.name }} + </div> + </div> + </div> + + <div class="bookList"> + <div class="bookfilterList"> + <div class="listTitle"> + <div>缁撴灉锛氬叡璁�***鏉�</div> + <div style="width: 300px"> + <el-input + v-model="input3" + placeholder="杈撳叆鏁欐潗鍚嶇О銆佷綔鑰呭鍚嶃�佸嚭鍝佹柟鍚嶇О鎼滅储" + class="input-with-select" + > + <template #append> + <el-button :icon="Search" /> + </template> + </el-input> + </div> + </div> + + <div> + <div class="recommendList"> + <div + class="recommendItem" + v-for="item in bookListData" + :key="item.id" + @click="toDetail(item)" + > + <div class="recommendItemImg"> + <img class="autoImg" :src="item.icon" /> + </div> + <div class="infoBox"> + <div class="bookName">{{ item.name }}</div> + <div class="author"> + 浣滆�咃細{{ item.authorcaupress_author ? item.caupress_author : '-' }} + </div> + <div class="priceBox"> + <span class="oldPrice" v-if="item.oldPrice">鍘熶环锛毬{ item.oldPrice }}</span> + <span class="price" v-if="item.price && item.price > 0"> + 瀹氫环锛毬� + <span>{{ item.price }}</span> + </span> + <span class="price" v-else> 瀹氫环锛�<span class="freePrice">鍏嶈垂</span> </span> + </div> + </div> + </div> + </div> + </div> + <div v-if="!bookListData.length > 0"> + <el-empty class="noData" description="鏆傛棤鏁版嵁" /> + </div> + + <div class="pagingBox"> + <el-pagination + layout="total, prev, pager, next" + :total="total" + v-model:current-page="currentPage1" + :page-size="20" + @current-change="handleCurrentChange" + hide-on-single-page="true" + /> + </div> + </div> + <div class="recommendBox"> + <div class="recommendTitle">鎺ㄨ崘鏁欐潗</div> + <div class="newRecommendList"> + <div class="recommendItem" v-for="item in bookListData" :key="item.id"> + <div class="recommendItemImg"> + <img class="autoImg" :src="item.icon" /> + </div> + <div class="infoBox"> + <div class="bookName">{{ item.name }}</div> + <div class="author"> + 浣滆�咃細{{ item.authorcaupress_author ? item.caupress_author : '-' }} + </div> + <div class="priceBox"> + <span class="oldPrice" v-if="item.oldPrice">鍘熶环锛毬{ item.oldPrice }}</span> + <span class="price" v-if="item.price && item.price > 0"> + 瀹氫环锛毬� + <span>{{ item.price }}</span> + </span> + <span class="price" v-else> 瀹氫环锛�<span class="freePrice">鍏嶈垂</span> </span> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</template> + +<script setup> +import { ref, onBeforeMount, inject, reactive, onMounted } from 'vue' +import { useRouter, useRoute } from 'vue-router' + +const MG = inject('MG') +const toolClass = inject('toolClass') +const banner = reactive([]) +const feildList = reactive([]) +const classfeild = reactive([]) +import { Search } from '@element-plus/icons-vue' +const input3 = ref('') +let bookListData = ref([]) +const total = ref(50) +const currentPage1 = ref(1) +const router = useRouter() + +const toDetail = (item) => { + router.push({ + path: '/bookdetail', + query: { + bookId: item.id, + }, + }) +} + +const getBanner = () => { + MG.resource + .getItem({ + path: 'banner\\educationPublishing', + fields: { link: [] }, + paging: { start: 0, size: 9 }, + }) + .then((res) => { + banner.push(...res.datas) + console.log(res.datas) + }) +} + +const handleCurrentChange = (val) => { + currentPage1.value = val + getBookList() +} + +const getBookList = () => { + MG.store + .getProductList({ + path: 'recommendedTextbooks', + paging: { + start: 0, + size: 5, + }, + fields: { + author: [], + }, + }) + .then((res) => { + console.log(res, '鎺ㄨ崘鏁欐潗') + bookListData.value = res.datas + }) +} + +const classifList = () => { + const query = { + refCodes: ['digitalTextbooks'], + } + MG.resource.getCmsTypeByRefCode(query).then((res) => { + console.log(res, 'res') + const types = toolClass.handleTypeList(res) + const typeData = types[0].cmsTypeLinks[0].children + feildList.push(...typeData) + const temp_classfeild = typeData.find((item) => item.typeField.refCode === 'teachingLevel') + ?.typeField.cfg.option + classfeild.push({ name: '鍏ㄩ儴', value: 'all' }, ...temp_classfeild) + console.log(typeData, 'typeData') + console.log(classfeild, 'classfeild') + }) +} +onMounted(() => { + getBanner() + classifList() + getBookList() +}) +</script> + +<style lang="less" scoped> +.homePage { + min-width: 1220px; + min-height: calc(100vh - 61.8%); + background-color: #fff; + padding-bottom: 100px; + + .bannerBox { + height: 380px; + position: relative; + .bannerText { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 36px; + font-weight: 700; + color: #fff; + text-shadow: 0px 0px 10px #000000; + text-align: center; + } + .enText { + font-size: 36px; + opacity: 0.45; + margin-top: 20px; + } + } + + .classificationBox { + display: flex; + justify-content: space-between; + margin-top: 30px; + .classificaListBox { + display: flex; + flex-wrap: wrap; + .classificaItem { + display: flex; + align-items: center; + justify-content: center; + margin-right: 20px; + margin-bottom: 20px; + padding: 10px 16px; + width: 200px; + line-height: 20px; + background: #f5f5f5; + text-align: center; + } + } + } + .bookList { + display: flex; + justify-content: space-between; + padding: 20px; + + .bookfilterList { + width: 80%; + border: 1px solid #e4e7ed; + height: 100%; + border-radius: 10px; + .listTitle { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 30px; + } + } + .recommendBox { + width: 19%; + border: 1px solid #e4e7ed; + border-radius: 10px; + .recommendTitle { + height: 50px; + line-height: 50px; + padding-left: 20px; + border-bottom: 1px solid #e4e7ed; + color: #333333; + font-weight: 700; + } + } + } +} +.recommendList { + display: flex; + padding: 20px; + padding-top: 0; + flex-wrap: wrap; + justify-content: start; + + .recommendItem { + margin-right: 20px; + width: 22%; + height: 300px; + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + border: 1px solid #dedede; + background-color: #fff; + padding-top: 10px; + margin-top: 10px; + &:last-child { + margin-right: 0; + } + } + .recommendItemImg { + width: 150px; + height: 200px; + position: relative; + margin: 0 auto; + } + .infoBox { + text-align: center; + margin-top: 10px; + } + .author { + margin-top: 10px; + } + .priceBox { + margin-top: 10px; + .oldPrice { + font-size: 16px; + color: #444444; + text-decoration: line-through; + margin-right: 20px; + } + .price { + span { + font-weight: bold; + font-size: 14px; + } + } + } +} + +.newRecommendList { + padding-top: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + .recommendItem { + margin-right: 20px; + height: 300px; + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + background-color: #fff; + padding-top: 10px; + margin-top: 10px; + &:last-child { + margin-right: 0; + } + } + .recommendItemImg { + width: 150px; + height: 200px; + position: relative; + margin: 0 auto; + } + .infoBox { + text-align: center; + margin-top: 10px; + } + .author { + margin-top: 10px; + } + .priceBox { + margin-top: 10px; + .oldPrice { + font-size: 16px; + color: #444444; + text-decoration: line-through; + margin-right: 20px; + } + .price { + span { + font-weight: bold; + font-size: 14px; + } + } + } +} +.pagingBox { + display: flex; + justify-content: center; + margin: 20px 0; + padding-bottom: 30px; +} +</style> diff --git a/src/views/educationalPublishing/index.vue b/src/views/educationalPublishing/index.vue new file mode 100644 index 0000000..90b3308 --- /dev/null +++ b/src/views/educationalPublishing/index.vue @@ -0,0 +1,43 @@ +<template> + <div class="homePage"> + <el-carousel :height="screenheight + 'px'"> + <el-carousel-item v-for="(item, index) in banner" :key="index"> + <div class="bannerBox imgBox"> + <img id="autoHeight" class="bannerImg" :src="item.icon" @click="bannerLink(item)" /> + </div> + </el-carousel-item> + </el-carousel> + </div> +</template> + +<script setup> +import { ref, onBeforeMount, inject, reactive, onMounted } from 'vue' +const MG = inject('MG') + +let screenheight = ref(document.documentElement.clientHeight / 2) +const banner = reactive([]) +const getBanner = () => { + MG.resource + .getItem({ + path: 'banner\\homeBanner', + fields: { link: [] }, + paging: { start: 0, size: 9 }, + }) + .then((res) => { + banner.push(...res.datas) + console.log(res.datas) + }) +} +onMounted(() => { + getBanner() +}) +</script> + +<style lang="less" scoped> +.homePage { + min-width: 1220px; + min-height: calc(100vh - 61.8%); + background-color: #fff; + padding-bottom: 100px; +} +</style> diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 4221005..ace2d24 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -1,16 +1,175 @@ <template> <div class="homePage"> - <el-carousel :height="screenheight"> - <el-carousel-item v-for="item in 4" :key="item"> - <h3 class="small justify-center" text="2xl">{{ item }}</h3> + <el-carousel :height="screenheight + 'px'"> + <el-carousel-item v-for="(item, index) in banner" :key="index"> + <div class="bannerBox imgBox"> + <img id="autoHeight" class="bannerImg" :src="item.icon" @click="bannerLink(item)" /> + </div> </el-carousel-item> </el-carousel> + <div class="contentBox" style="margin-top: 50px"> + <div class="informationBox"> + <div class="bookListTitle"> + <div class="title">鏂伴椈璧勮</div> + <div class="more">鏇村></div> + </div> + <div class="informationList"> + <div class="informationItem" v-for="(item, index) in informationList" :key="index"> + <div class="imgBox"><img class="autoImg" :src="item.icon" alt="" /></div> + <div class="informationContent"> + <div class="informationTitle" :alt="item.name">{{ item.name }}</div> + <div class="informationDate">{{ moment(item.publishDate).format('YYYY-MM-DD') }}</div> + <div class="informationText">{{ item.description }}</div> + </div> + </div> + </div> + </div> + </div> + <div class="bookListBox"> + <div class="contentBox"> + <div class="bookListTitle"> + <div class="title">鎺ㄨ崘鏁欐潗</div> + <div class="more">鏇村></div> + </div> + <div class="recommendList"> + <div class="recommendItem" v-for="item in bookListData" :key="item.id"> + <div class="recommendItemImg"> + <img class="autoImg" :src="item.icon" /> + </div> + <div class="infoBox"> + <div class="bookName">{{ item.name }}</div> + <div class="author"> + 浣滆�咃細{{ item.authorcaupress_author ? item.caupress_author : '-' }} + </div> + <div class="priceBox"> + <span class="oldPrice" v-if="item.oldPrice">鍘熶环锛毬{ item.oldPrice }}</span> + <span class="price" v-if="item.price && item.price > 0"> + 瀹氫环锛毬� + <span>{{ item.price }}</span> + </span> + <span class="price" v-else> 瀹氫环锛�<span class="freePrice">鍏嶈垂</span> </span> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="contentBox"> + <div class="funBox"> + <div class="authentication"></div> + <div class="manual"></div> + </div> + + <div class="bookListTitle"> + <div class="title" style="display: flex; line-height: 50px"> + <div>鏂伴椈璧勮</div> + <div class="titleTabs"> + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tab-pane label="楂樼瓑鑱屼笟鏁欐潗" name="first"> </el-tab-pane> + <el-tab-pane label="涓撳崌鏈暀鏉�" name="second"></el-tab-pane> + <el-tab-pane label="鍗忓拰鍖诲闄㈡暀鏉�" name="third"></el-tab-pane> + </el-tabs> + </div> + </div> + + <div class="more">鏇村></div> + </div> + <div class="recommendList"> + <div class="recommendItem" v-for="item in bookListData" :key="item.id"> + <div class="recommendItemImg"> + <img class="autoImg" :src="item.icon" /> + </div> + <div class="infoBox"> + <div class="bookName">{{ item.name }}</div> + <div class="author"> + 浣滆�咃細{{ item.authorcaupress_author ? item.caupress_author : '-' }} + </div> + <div class="priceBox"> + <span class="oldPrice" v-if="item.oldPrice">鍘熶环锛毬{ item.oldPrice }}</span> + <span class="price" v-if="item.price && item.price > 0"> + 瀹氫环锛毬� + <span>{{ item.price }}</span> + </span> + <span class="price" v-else> 瀹氫环锛�<span class="freePrice">鍏嶈垂</span> </span> + </div> + </div> + </div> + </div> + </div> </div> </template> <script setup> -import { ref } from 'vue' -let screenheight = ref(document.documentElement.clientHeight / 4) +import moment from 'moment' +import { ref, onBeforeMount, inject, reactive, onMounted } from 'vue' +let screenheight = ref(document.documentElement.clientHeight / 2) +const MG = inject('MG') +const config = inject('config') +const tool = inject('tool') +const banner = reactive([]) +const informationList = reactive([]) +let bookListData = ref([]) +onBeforeMount(() => { + console.log(document.documentElement.clientWidth / 2.628) + + window.onresize = () => { + let c = 2.628 + if (document.documentElement.clientWidth >= 1220) { + screenheight.value = document.documentElement.clientWidth / c + console.log(document.documentElement.clientWidth / c) + } + } +}) + +onMounted(() => { + getBanner() + getInformationList() + getBookList() +}) + +const getBookList = () => { + MG.store + .getProductList({ + path: 'recommendedTextbooks', + paging: { + start: 0, + size: 5, + }, + fields: { + author: [], + }, + }) + .then((res) => { + console.log(res, '鎺ㄨ崘鏁欐潗') + bookListData.value = res.datas + }) +} + +const getInformationList = () => { + MG.resource + .getItem({ + path: 'information', + fields: { publishDate: [], content: [] }, + paging: { start: 0, size: 9 }, + }) + .then((res) => { + informationList.push(...res.datas) + console.log(res.datas) + }) +} + +const getBanner = () => { + MG.resource + .getItem({ + path: 'banner\\homeBanner', + fields: { link: [] }, + paging: { start: 0, size: 9 }, + }) + .then((res) => { + banner.push(...res.datas) + console.log(res.datas) + }) +} </script> <style lang="less" scoped> @@ -18,6 +177,7 @@ min-width: 1220px; min-height: calc(100vh - 61.8%); background-color: #fff; + padding-bottom: 100px; } .el-carousel__item h3 { color: #475669; @@ -34,4 +194,161 @@ .el-carousel__item:nth-child(2n + 1) { background-color: #d3dce6; } + +.informationList { + display: flex; + flex-wrap: wrap; + .informationItem { + display: flex; + width: 42%; + min-height: 100px; + margin-right: 5%; + margin-bottom: 20px; + border: 1px solid #ebebeb; + border-radius: 10px; + padding: 10px; + cursor: pointer; + .imgBox { + width: 30%; + height: 100%; + position: relative; + } + .informationContent { + width: 70%; + padding-left: 10px; + .informationTitle { + font-size: 14px; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #333333; + font-weight: bold; + margin-bottom: 10px; + } + .informationDate { + margin-top: 10px; + } + .informationText { + color: #666666; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + margin-top: 10px; + display: -webkit-box; /* 灏嗗璞′綔涓哄脊鎬т几缂╃洅瀛愭ā鍨嬫樉绀� */ + -webkit-line-clamp: 3; /* 鏄剧ず鐨勮鏁� */ + -webkit-box-orient: vertical; /* 璁剧疆鎴栨绱几缂╃洅瀵硅薄鐨勫瓙鍏冪礌鐨勬帓鍒楁柟寮� */ + overflow: hidden; /* 婧㈠嚭闅愯棌 */ + } + } + } + .informationItem:hover { + border: 1px solid #019e58; + } +} +.bookListBox { + width: 100%; + padding: 80px 0; + margin-top: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url('@/assets/images/tuijian-bg.png'); + background-repeat: no-repeat; + background-size: 100% 100%; +} + +.recommendList { + display: flex; + padding-top: 20px; + + .recommendItem { + flex: 1; + margin-right: 20px; + height: 300px; + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + border: 1px solid #dedede; + background-color: #fff; + padding-top: 10px; + &:last-child { + margin-right: 0; + } + } +} + +.recommendItemImg { + width: 150px; + height: 200px; + position: relative; + margin: 0 auto; +} + +.infoBox { + text-align: center; + margin-top: 10px; +} +.author { + margin-top: 10px; +} +.priceBox { + margin-top: 10px; + .oldPrice { + font-size: 16px; + color: #444444; + text-decoration: line-through; + margin-right: 20px; + } + .price { + span { + font-weight: bold; + font-size: 14px; + } + } +} + +.funBox { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 60px; + margin-bottom: 60px; + .authentication { + width: 40%; + height: 80px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url('@/assets/images/xiehe/home/jiaoshirenzheng.png'); + } + .manual { + width: 40%; + height: 80px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url('@/assets/images/xiehe/home/jiaoshirenzheng.png'); + } +} + +.titleTabs { + margin-left: 50px; +} +.bookListTitle { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + border-bottom: 1px solid #ebebeb; + + padding-bottom: 20px; + .title { + font-size: 20px; + color: #333333; + font-weight: bold; + } + .more { + font-size: 14px; + color: #999999; + cursor: pointer; + } +} </style> -- Gitblit v1.9.1