正在显示
37 个修改的文件
包含
3739 行增加
和
257 行删除
| @@ -2,28 +2,97 @@ | @@ -2,28 +2,97 @@ | ||
| 2 | <html> | 2 | <html> |
| 3 | 3 | ||
| 4 | <head> | 4 | <head> |
| 5 | - <meta charset="utf-8"> | ||
| 6 | - <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> | ||
| 7 | - <title>tangyuan</title> | 5 | + <meta charset="utf-8" /> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" /> | ||
| 7 | + <title></title> | ||
| 8 | + <style></style> | ||
| 8 | </head> | 9 | </head> |
| 9 | 10 | ||
| 10 | -<body> | 11 | +<body class="calbox"> |
| 11 | <div id="app"></div> | 12 | <div id="app"></div> |
| 12 | <!-- built files will be auto injected --> | 13 | <!-- built files will be auto injected --> |
| 13 | </body> | 14 | </body> |
| 14 | <script> | 15 | <script> |
| 15 | // 尺寸计算 | 16 | // 尺寸计算 |
| 16 | function setFontSize() { | 17 | function setFontSize() { |
| 17 | - document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; | ||
| 18 | - }; | 18 | + document.documentElement.style.fontSize = |
| 19 | + document.documentElement.clientWidth / 7.5 + "px"; | ||
| 20 | + } | ||
| 19 | 21 | ||
| 22 | + window.addEventListener( | ||
| 23 | + "resize", | ||
| 24 | + function() { | ||
| 25 | + setFontSize(); | ||
| 26 | + }, | ||
| 27 | + false | ||
| 28 | + ); | ||
| 29 | + setFontSize(); | ||
| 30 | + // var isScroll_top = true; | ||
| 31 | + // var ua = navigator.userAgent.toLowerCase(); | ||
| 32 | + // //系统判断 | ||
| 33 | + // if (ua.match(/iPhone/i) == "iphone") { | ||
| 34 | + // //滚动条是否在底部 | ||
| 35 | + // var isScrill_bottom = false; | ||
| 20 | 36 | ||
| 21 | - window.addEventListener('resize', function() { | ||
| 22 | - setFontSize(); | ||
| 23 | - }, false); | ||
| 24 | - | 37 | + // function restoreEvent(event) { |
| 38 | + // switch (event.type) { | ||
| 39 | + // case "touchstart": | ||
| 40 | + // $startY = event.touches[0].clientY; | ||
| 41 | + // break; | ||
| 42 | + // case "touchmove": | ||
| 43 | + // $moveY = event.touches[0].clientY; | ||
| 44 | + // //滑动距离 | ||
| 45 | + // touchesY = $startY - $moveY; | ||
| 46 | + // //滚动条顶部 | ||
| 47 | + // if (isScroll_top) { | ||
| 48 | + // if (touchesY < 0) { | ||
| 49 | + // event.preventDefault(); | ||
| 50 | + // } else { | ||
| 51 | + // var scrollWrap = document.getElementById("app"); | ||
| 52 | + // if (scrollWrap.scrollHeight == scrollWrap.clientHeight) { | ||
| 53 | + // event.preventDefault(); | ||
| 54 | + // } else { | ||
| 55 | + // event.stopPropagation(); | ||
| 56 | + // } | ||
| 57 | + // } | ||
| 58 | + // //滚动条底部 | ||
| 59 | + // } else if (isScrill_bottom) { | ||
| 60 | + // if (touchesY > 0) { | ||
| 61 | + // event.preventDefault(); | ||
| 62 | + // } else { | ||
| 63 | + // event.stopPropagation(); | ||
| 64 | + // } | ||
| 65 | + // } | ||
| 66 | + // break; | ||
| 67 | + // case "touchend": | ||
| 68 | + // break; | ||
| 69 | + // } | ||
| 70 | + // } | ||
| 71 | + // document | ||
| 72 | + // .getElementById("app") | ||
| 73 | + // .addEventListener("touchstart", restoreEvent); | ||
| 74 | + // document | ||
| 75 | + // .getElementById("app") | ||
| 76 | + // .addEventListener("touchmove", restoreEvent); | ||
| 77 | + // document.getElementById("app").addEventListener("touchend", restoreEvent); | ||
| 78 | + // document.getElementById("app").addEventListener("scroll", function() { | ||
| 79 | + // var tabView = document.getElementById("app"); | ||
| 80 | + // var contentHeight = tabView.scrollHeight, //内容高度 | ||
| 81 | + // scrollTop = tabView.scrollTop; //滚动高度 | ||
| 82 | + // viewHeight = tabView.clientHeight; | ||
| 25 | 83 | ||
| 26 | - setFontSize(); | 84 | + // if (scrollTop == 0) { |
| 85 | + // isScroll_top = true; | ||
| 86 | + // } else { | ||
| 87 | + // isScroll_top = false; | ||
| 88 | + // } | ||
| 89 | + // if (scrollTop / (contentHeight - viewHeight) == 1) { | ||
| 90 | + // isScrill_bottom = true; | ||
| 91 | + // } else { | ||
| 92 | + // isScrill_bottom = false; | ||
| 93 | + // } | ||
| 94 | + // }); | ||
| 95 | + // } | ||
| 27 | </script> | 96 | </script> |
| 28 | 97 | ||
| 29 | </html> | 98 | </html> |
| @@ -6498,6 +6498,11 @@ | @@ -6498,6 +6498,11 @@ | ||
| 6498 | "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=", | 6498 | "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=", |
| 6499 | "dev": true | 6499 | "dev": true |
| 6500 | }, | 6500 | }, |
| 6501 | + "ios-scroll-supply": { | ||
| 6502 | + "version": "1.0.6", | ||
| 6503 | + "resolved": "https://registry.npm.taobao.org/ios-scroll-supply/download/ios-scroll-supply-1.0.6.tgz", | ||
| 6504 | + "integrity": "sha1-Odt5BkaKh3q2GqA2INY5vYkX9Bk=" | ||
| 6505 | + }, | ||
| 6501 | "ip": { | 6506 | "ip": { |
| 6502 | "version": "1.0.1", | 6507 | "version": "1.0.1", |
| 6503 | "resolved": "https://registry.npm.taobao.org/ip/download/ip-1.0.1.tgz", | 6508 | "resolved": "https://registry.npm.taobao.org/ip/download/ip-1.0.1.tgz", |
| @@ -7558,6 +7563,11 @@ | @@ -7558,6 +7563,11 @@ | ||
| 7558 | "verror": "1.10.0" | 7563 | "verror": "1.10.0" |
| 7559 | } | 7564 | } |
| 7560 | }, | 7565 | }, |
| 7566 | + "jweixin-1.6.0": { | ||
| 7567 | + "version": "1.0.0", | ||
| 7568 | + "resolved": "https://registry.npm.taobao.org/jweixin-1.6.0/download/jweixin-1.6.0-1.0.0.tgz", | ||
| 7569 | + "integrity": "sha1-1l7FPnOKlbXFTNX0Kj808OguKdU=" | ||
| 7570 | + }, | ||
| 7561 | "killable": { | 7571 | "killable": { |
| 7562 | "version": "1.0.1", | 7572 | "version": "1.0.1", |
| 7563 | "resolved": "https://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz", | 7573 | "resolved": "https://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz", |
| @@ -8328,6 +8338,22 @@ | @@ -8328,6 +8338,22 @@ | ||
| 8328 | "run-queue": "^1.0.3" | 8338 | "run-queue": "^1.0.3" |
| 8329 | } | 8339 | } |
| 8330 | }, | 8340 | }, |
| 8341 | + "mpvue-calendar": { | ||
| 8342 | + "version": "2.3.7", | ||
| 8343 | + "resolved": "https://registry.npm.taobao.org/mpvue-calendar/download/mpvue-calendar-2.3.7.tgz", | ||
| 8344 | + "integrity": "sha1-c/fyJalOiAMmtsxLm+Bo3phNCeE=", | ||
| 8345 | + "requires": { | ||
| 8346 | + "core-js": "^3.4.4", | ||
| 8347 | + "vue": "^2.6.10" | ||
| 8348 | + }, | ||
| 8349 | + "dependencies": { | ||
| 8350 | + "core-js": { | ||
| 8351 | + "version": "3.6.5", | ||
| 8352 | + "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-3.6.5.tgz", | ||
| 8353 | + "integrity": "sha1-c5XcJzrzf7LlDpvT2f6EEoUjHRo=" | ||
| 8354 | + } | ||
| 8355 | + } | ||
| 8356 | + }, | ||
| 8331 | "ms": { | 8357 | "ms": { |
| 8332 | "version": "2.0.0", | 8358 | "version": "2.0.0", |
| 8333 | "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz", | 8359 | "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz", |
| @@ -14249,6 +14275,11 @@ | @@ -14249,6 +14275,11 @@ | ||
| 14249 | "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.11.tgz", | 14275 | "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.11.tgz", |
| 14250 | "integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU=" | 14276 | "integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU=" |
| 14251 | }, | 14277 | }, |
| 14278 | + "vue-calendar-component": { | ||
| 14279 | + "version": "2.8.2", | ||
| 14280 | + "resolved": "https://registry.npm.taobao.org/vue-calendar-component/download/vue-calendar-component-2.8.2.tgz", | ||
| 14281 | + "integrity": "sha1-j2DAWnLIqsvdIkAW9OGpZmSr2Ko=" | ||
| 14282 | + }, | ||
| 14252 | "vue-clipboard2": { | 14283 | "vue-clipboard2": { |
| 14253 | "version": "0.3.1", | 14284 | "version": "0.3.1", |
| 14254 | "resolved": "https://registry.npm.taobao.org/vue-clipboard2/download/vue-clipboard2-0.3.1.tgz", | 14285 | "resolved": "https://registry.npm.taobao.org/vue-clipboard2/download/vue-clipboard2-0.3.1.tgz", |
| @@ -15694,7 +15725,8 @@ | @@ -15694,7 +15725,8 @@ | ||
| 15694 | "weixin-js-sdk": { | 15725 | "weixin-js-sdk": { |
| 15695 | "version": "1.6.0", | 15726 | "version": "1.6.0", |
| 15696 | "resolved": "https://registry.npm.taobao.org/weixin-js-sdk/download/weixin-js-sdk-1.6.0.tgz", | 15727 | "resolved": "https://registry.npm.taobao.org/weixin-js-sdk/download/weixin-js-sdk-1.6.0.tgz", |
| 15697 | - "integrity": "sha1-/1BITYEYzhII8RJIz0ocCDFXdRQ=" | 15728 | + "integrity": "sha1-/1BITYEYzhII8RJIz0ocCDFXdRQ=", |
| 15729 | + "dev": true | ||
| 15698 | }, | 15730 | }, |
| 15699 | "whatwg-encoding": { | 15731 | "whatwg-encoding": { |
| 15700 | "version": "1.0.5", | 15732 | "version": "1.0.5", |
| 1 | { | 1 | { |
| 2 | - "name": "tangyuan", | ||
| 3 | - "version": "1.0.0", | ||
| 4 | - "description": "A Vue.js project", | ||
| 5 | - "author": "lihongjuan <18848113498@163.com>", | ||
| 6 | - "private": true, | ||
| 7 | - "scripts": { | ||
| 8 | - "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", | ||
| 9 | - "start": "npm run dev", | ||
| 10 | - "unit": "jest --config test/unit/jest.conf.js --coverage", | ||
| 11 | - "e2e": "node test/e2e/runner.js", | ||
| 12 | - "test": "npm run unit && npm run e2e", | ||
| 13 | - "build": "node build/build.js" | ||
| 14 | - }, | ||
| 15 | - "dependencies": { | ||
| 16 | - "axios": "^0.19.2", | ||
| 17 | - "clipboard": "^2.0.6", | ||
| 18 | - "vant": "^2.9.2", | ||
| 19 | - "vue": "^2.5.2", | ||
| 20 | - "vue-clipboard2": "^0.3.1", | ||
| 21 | - "vue-router": "^3.0.1", | ||
| 22 | - "weixin-js-sdk": "^1.6.0" | ||
| 23 | - }, | ||
| 24 | - "devDependencies": { | ||
| 25 | - "autoprefixer": "^7.1.2", | ||
| 26 | - "babel-core": "^6.22.1", | ||
| 27 | - "babel-helper-vue-jsx-merge-props": "^2.0.3", | ||
| 28 | - "babel-jest": "^21.0.2", | ||
| 29 | - "babel-loader": "^7.1.1", | ||
| 30 | - "babel-plugin-dynamic-import-node": "^1.2.0", | ||
| 31 | - "babel-plugin-syntax-jsx": "^6.18.0", | ||
| 32 | - "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", | ||
| 33 | - "babel-plugin-transform-runtime": "^6.22.0", | ||
| 34 | - "babel-plugin-transform-vue-jsx": "^3.5.0", | ||
| 35 | - "babel-preset-env": "^1.3.2", | ||
| 36 | - "babel-preset-stage-2": "^6.22.0", | ||
| 37 | - "babel-register": "^6.22.0", | ||
| 38 | - "chalk": "^2.0.1", | ||
| 39 | - "chromedriver": "^2.27.2", | ||
| 40 | - "copy-webpack-plugin": "^4.0.1", | ||
| 41 | - "cross-spawn": "^5.0.1", | ||
| 42 | - "css-loader": "^0.28.0", | ||
| 43 | - "extract-text-webpack-plugin": "^3.0.0", | ||
| 44 | - "file-loader": "^1.1.4", | ||
| 45 | - "friendly-errors-webpack-plugin": "^1.6.1", | ||
| 46 | - "html-webpack-plugin": "^2.30.1", | ||
| 47 | - "jest": "^22.0.4", | ||
| 48 | - "jest-serializer-vue": "^0.3.0", | ||
| 49 | - "nightwatch": "^0.9.12", | ||
| 50 | - "node-notifier": "^5.1.2", | ||
| 51 | - "optimize-css-assets-webpack-plugin": "^3.2.0", | ||
| 52 | - "ora": "^1.2.0", | ||
| 53 | - "portfinder": "^1.0.13", | ||
| 54 | - "postcss-import": "^11.0.0", | ||
| 55 | - "postcss-loader": "^2.0.8", | ||
| 56 | - "postcss-url": "^7.2.1", | ||
| 57 | - "rimraf": "^2.6.0", | ||
| 58 | - "selenium-server": "^3.0.1", | ||
| 59 | - "semver": "^5.3.0", | ||
| 60 | - "shelljs": "^0.7.6", | ||
| 61 | - "uglifyjs-webpack-plugin": "^1.1.1", | ||
| 62 | - "url-loader": "^0.5.8", | ||
| 63 | - "vue-jest": "^1.0.2", | ||
| 64 | - "vue-loader": "^13.3.0", | ||
| 65 | - "vue-style-loader": "^3.0.1", | ||
| 66 | - "vue-template-compiler": "^2.5.2", | ||
| 67 | - "webpack": "^3.6.0", | ||
| 68 | - "webpack-bundle-analyzer": "^2.9.0", | ||
| 69 | - "webpack-dev-server": "^2.9.1", | ||
| 70 | - "webpack-merge": "^4.1.0" | ||
| 71 | - }, | ||
| 72 | - "engines": { | ||
| 73 | - "node": ">= 6.0.0", | ||
| 74 | - "npm": ">= 3.0.0" | ||
| 75 | - }, | ||
| 76 | - "browserslist": [ | ||
| 77 | - "> 1%", | ||
| 78 | - "last 2 versions", | ||
| 79 | - "not ie <= 8" | ||
| 80 | - ] | 2 | + "name": "tangyuan", |
| 3 | + "version": "1.0.0", | ||
| 4 | + "description": "A Vue.js project", | ||
| 5 | + "author": "lihongjuan <18848113498@163.com>", | ||
| 6 | + "private": true, | ||
| 7 | + "scripts": { | ||
| 8 | + "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", | ||
| 9 | + "start": "npm run dev", | ||
| 10 | + "unit": "jest --config test/unit/jest.conf.js --coverage", | ||
| 11 | + "e2e": "node test/e2e/runner.js", | ||
| 12 | + "test": "npm run unit && npm run e2e", | ||
| 13 | + "build": "node build/build.js" | ||
| 14 | + }, | ||
| 15 | + "dependencies": { | ||
| 16 | + "axios": "^0.19.2", | ||
| 17 | + "clipboard": "^2.0.6", | ||
| 18 | + "ios-scroll-supply": "^1.0.6", | ||
| 19 | + "jweixin-1.6.0": "^1.0.0", | ||
| 20 | + "mpvue-calendar": "^2.3.7", | ||
| 21 | + "vant": "^2.9.2", | ||
| 22 | + "vue": "^2.5.2", | ||
| 23 | + "vue-calendar-component": "^2.8.2", | ||
| 24 | + "vue-clipboard2": "^0.3.1", | ||
| 25 | + "vue-router": "^3.0.1" | ||
| 26 | + }, | ||
| 27 | + "devDependencies": { | ||
| 28 | + "autoprefixer": "^7.1.2", | ||
| 29 | + "babel-core": "^6.22.1", | ||
| 30 | + "babel-helper-vue-jsx-merge-props": "^2.0.3", | ||
| 31 | + "babel-jest": "^21.0.2", | ||
| 32 | + "babel-loader": "^7.1.1", | ||
| 33 | + "babel-plugin-dynamic-import-node": "^1.2.0", | ||
| 34 | + "babel-plugin-syntax-jsx": "^6.18.0", | ||
| 35 | + "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", | ||
| 36 | + "babel-plugin-transform-runtime": "^6.22.0", | ||
| 37 | + "babel-plugin-transform-vue-jsx": "^3.5.0", | ||
| 38 | + "babel-preset-env": "^1.3.2", | ||
| 39 | + "babel-preset-stage-2": "^6.22.0", | ||
| 40 | + "babel-register": "^6.22.0", | ||
| 41 | + "chalk": "^2.0.1", | ||
| 42 | + "chromedriver": "^2.27.2", | ||
| 43 | + "copy-webpack-plugin": "^4.0.1", | ||
| 44 | + "cross-spawn": "^5.0.1", | ||
| 45 | + "css-loader": "^0.28.0", | ||
| 46 | + "extract-text-webpack-plugin": "^3.0.0", | ||
| 47 | + "file-loader": "^1.1.4", | ||
| 48 | + "friendly-errors-webpack-plugin": "^1.6.1", | ||
| 49 | + "html-webpack-plugin": "^2.30.1", | ||
| 50 | + "jest": "^22.0.4", | ||
| 51 | + "jest-serializer-vue": "^0.3.0", | ||
| 52 | + "nightwatch": "^0.9.12", | ||
| 53 | + "node-notifier": "^5.1.2", | ||
| 54 | + "optimize-css-assets-webpack-plugin": "^3.2.0", | ||
| 55 | + "ora": "^1.2.0", | ||
| 56 | + "portfinder": "^1.0.13", | ||
| 57 | + "postcss-import": "^11.0.0", | ||
| 58 | + "postcss-loader": "^2.0.8", | ||
| 59 | + "postcss-url": "^7.2.1", | ||
| 60 | + "rimraf": "^2.6.0", | ||
| 61 | + "selenium-server": "^3.0.1", | ||
| 62 | + "semver": "^5.3.0", | ||
| 63 | + "shelljs": "^0.7.6", | ||
| 64 | + "uglifyjs-webpack-plugin": "^1.1.1", | ||
| 65 | + "url-loader": "^0.5.8", | ||
| 66 | + "vue-jest": "^1.0.2", | ||
| 67 | + "vue-loader": "^13.3.0", | ||
| 68 | + "vue-style-loader": "^3.0.1", | ||
| 69 | + "vue-template-compiler": "^2.5.2", | ||
| 70 | + "webpack": "^3.6.0", | ||
| 71 | + "webpack-bundle-analyzer": "^2.9.0", | ||
| 72 | + "webpack-dev-server": "^2.9.1", | ||
| 73 | + "webpack-merge": "^4.1.0", | ||
| 74 | + "weixin-js-sdk": "^1.6.0" | ||
| 75 | + }, | ||
| 76 | + "engines": { | ||
| 77 | + "node": ">= 6.0.0", | ||
| 78 | + "npm": ">= 3.0.0" | ||
| 79 | + }, | ||
| 80 | + "browserslist": [ | ||
| 81 | + "> 1%", | ||
| 82 | + "last 2 versions", | ||
| 83 | + "not ie <= 8" | ||
| 84 | + ] | ||
| 81 | } | 85 | } |
redirect.html
0 → 100644
| 1 | +<script> | ||
| 2 | + let url = location.href.split("?"); | ||
| 3 | + let params = url[1].split("&"); | ||
| 4 | + let data = {}; | ||
| 5 | + params.forEach((n, i) => { | ||
| 6 | + let p = n.split("="); | ||
| 7 | + data[p[0]] = p[1]; | ||
| 8 | + }); | ||
| 9 | + if (!!data.shareRedirect) { | ||
| 10 | + alert(decodeURIComponent(data.shareRedirect)); | ||
| 11 | + window.location.href = decodeURIComponent(data.shareRedirect); | ||
| 12 | + } | ||
| 13 | +</script> |
| @@ -6,9 +6,8 @@ | @@ -6,9 +6,8 @@ | ||
| 6 | 6 | ||
| 7 | <script> | 7 | <script> |
| 8 | export default { | 8 | export default { |
| 9 | - name: 'App' | ||
| 10 | -} | ||
| 11 | - | 9 | + name: "App" |
| 10 | +}; | ||
| 12 | </script> | 11 | </script> |
| 13 | 12 | ||
| 14 | <style> | 13 | <style> |
| @@ -18,14 +17,15 @@ export default { | @@ -18,14 +17,15 @@ export default { | ||
| 18 | .van-list__loading { | 17 | .van-list__loading { |
| 19 | width: 100% !important; | 18 | width: 100% !important; |
| 20 | } | 19 | } |
| 20 | + | ||
| 21 | body, | 21 | body, |
| 22 | html { | 22 | html { |
| 23 | overflow-x: hidden; | 23 | overflow-x: hidden; |
| 24 | + overflow: touch; | ||
| 24 | } | 25 | } |
| 25 | #app { | 26 | #app { |
| 26 | - width: 100%; | ||
| 27 | - height: 100%; | ||
| 28 | } | 27 | } |
| 28 | + | ||
| 29 | .nodata { | 29 | .nodata { |
| 30 | color: #999; | 30 | color: #999; |
| 31 | font-size: 0.28rem; | 31 | font-size: 0.28rem; |
| @@ -42,6 +42,7 @@ html { | @@ -42,6 +42,7 @@ html { | ||
| 42 | padding: 0; | 42 | padding: 0; |
| 43 | margin: 0; | 43 | margin: 0; |
| 44 | background: #f9f9f9; | 44 | background: #f9f9f9; |
| 45 | + overflow-y: scroll; | ||
| 45 | } | 46 | } |
| 46 | img { | 47 | img { |
| 47 | width: 100%; | 48 | width: 100%; |
| @@ -80,6 +81,10 @@ textarea { | @@ -80,6 +81,10 @@ textarea { | ||
| 80 | padding: 0.2rem 0.32rem; | 81 | padding: 0.2rem 0.32rem; |
| 81 | box-sizing: border-box; | 82 | box-sizing: border-box; |
| 82 | background: #fff; | 83 | background: #fff; |
| 84 | + position: fixed; | ||
| 85 | + top: 0; | ||
| 86 | + left: 0; | ||
| 87 | + z-index: 99; | ||
| 83 | } | 88 | } |
| 84 | .searchimg { | 89 | .searchimg { |
| 85 | width: 0.3rem; | 90 | width: 0.3rem; |
| @@ -279,6 +284,22 @@ input { | @@ -279,6 +284,22 @@ input { | ||
| 279 | top: 0; | 284 | top: 0; |
| 280 | left: 0; | 285 | left: 0; |
| 281 | } | 286 | } |
| 287 | +.sharetopk { | ||
| 288 | + width: 100%; | ||
| 289 | + padding: 0.18rem 0.32rem; | ||
| 290 | + box-sizing: border-box; | ||
| 291 | + background: #fff; | ||
| 292 | + position: fixed; | ||
| 293 | + top: 0; | ||
| 294 | + left: 0; | ||
| 295 | + z-index: 99; | ||
| 296 | +} | ||
| 297 | +.sharetopkk { | ||
| 298 | + width: 100%; | ||
| 299 | + padding: 0.18rem 0.32rem; | ||
| 300 | + box-sizing: border-box; | ||
| 301 | + background: #fff; | ||
| 302 | +} | ||
| 282 | .leftrow { | 303 | .leftrow { |
| 283 | width: 0.44rem; | 304 | width: 0.44rem; |
| 284 | height: 0.44rem; | 305 | height: 0.44rem; |
| @@ -294,4 +315,152 @@ input { | @@ -294,4 +315,152 @@ input { | ||
| 294 | height: 0.34rem; | 315 | height: 0.34rem; |
| 295 | font-size: 0; | 316 | font-size: 0; |
| 296 | } | 317 | } |
| 318 | +.fanbanck { | ||
| 319 | + width: 100%; | ||
| 320 | + background: #759875; | ||
| 321 | + padding: 0.18rem 0.32rem; | ||
| 322 | + box-sizing: border-box; | ||
| 323 | + color: #fff; | ||
| 324 | + margin-bottom: 0.38rem; | ||
| 325 | + position: fixed; | ||
| 326 | + top: 0; | ||
| 327 | + left: 0; | ||
| 328 | + z-index: 99; | ||
| 329 | +} | ||
| 330 | +.topk { | ||
| 331 | + color: #fff; | ||
| 332 | + font-size: 0.34rem; | ||
| 333 | +} | ||
| 334 | +.leftrowkimg { | ||
| 335 | + width: 0.35rem; | ||
| 336 | + height: 0.3rem; | ||
| 337 | +} | ||
| 338 | +.calendarbox .van-overlay { | ||
| 339 | + display: none; | ||
| 340 | + position: unset; | ||
| 341 | +} | ||
| 342 | +.van-overflow-hidden { | ||
| 343 | + overflow: auto !important; | ||
| 344 | + overflow-y: scroll; | ||
| 345 | +} | ||
| 346 | +.van-calendar__day { | ||
| 347 | + height: 41px !important; | ||
| 348 | +} | ||
| 349 | +.van-calendar__popup.van-popup--bottom, | ||
| 350 | +.van-calendar__popup.van-popup--top { | ||
| 351 | + height: 62%; | ||
| 352 | +} | ||
| 353 | + | ||
| 354 | +.calendarbox .van-icon { | ||
| 355 | + display: none !important; | ||
| 356 | +} | ||
| 357 | +/* .changeitemright .van-image { | ||
| 358 | + width: 1rem; | ||
| 359 | + height: 1rem; | ||
| 360 | + font-size: 0; | ||
| 361 | +} | ||
| 362 | +.calendarbox .changeitem { | ||
| 363 | + margin-right: 8px; | ||
| 364 | +} */ | ||
| 365 | +/* .van-popup--bottom { | ||
| 366 | + top: 0; | ||
| 367 | + left: 0; | ||
| 368 | +} */ | ||
| 369 | +.calendarbox { | ||
| 370 | + width: 100%; | ||
| 371 | + height: 7rem; | ||
| 372 | + /* position: fixed; | ||
| 373 | + top: 0; | ||
| 374 | + left: 0; */ | ||
| 375 | +} | ||
| 376 | +.van-overflow-hidden { | ||
| 377 | + position: unset; | ||
| 378 | +} | ||
| 379 | + | ||
| 380 | +.wh_content_all { | ||
| 381 | + background: #fff !important; | ||
| 382 | +} | ||
| 383 | +.wh_top_changge li { | ||
| 384 | + color: #333 !important; | ||
| 385 | +} | ||
| 386 | +.wh_jiantou1[data-v-2ebcbc83] { | ||
| 387 | + width: 10px !important; | ||
| 388 | + height: 10px !important; | ||
| 389 | + border-top: 1px solid #333 !important; | ||
| 390 | + border-left: 1px solid #333 !important; | ||
| 391 | + transform: rotate(-45deg); | ||
| 392 | +} | ||
| 393 | +.wh_jiantou2[data-v-2ebcbc83] { | ||
| 394 | + width: 10px !important; | ||
| 395 | + height: 10px !important; | ||
| 396 | + border-top: 1px solid #333 !important; | ||
| 397 | + border-right: 1px solid #333 !important; | ||
| 398 | + transform: rotate(45deg); | ||
| 399 | +} | ||
| 400 | +.wh_top_tag { | ||
| 401 | + color: #333 !important; | ||
| 402 | +} | ||
| 403 | +.wh_content_item { | ||
| 404 | + color: #333 !important; | ||
| 405 | +} | ||
| 406 | +.wh_content_item .wh_isToday { | ||
| 407 | + background: #87bd87 !important; | ||
| 408 | + color: #fff !important; | ||
| 409 | +} | ||
| 410 | +.wh_content_item > .wh_isMark { | ||
| 411 | + background: #4a834a !important; | ||
| 412 | + color: #fff !important; | ||
| 413 | +} | ||
| 414 | +.wh_content_item .wh_chose_day { | ||
| 415 | + background: #fff !important; | ||
| 416 | +} | ||
| 417 | +.wh_content_item .wh_isToday { | ||
| 418 | + /* color: #333 !important; */ | ||
| 419 | +} | ||
| 420 | +.mpvue-calendar td.selected span { | ||
| 421 | + background-color: #4a834a !important; | ||
| 422 | + color: #fff; | ||
| 423 | + border-radius: 50%; | ||
| 424 | +} | ||
| 425 | +.mpvue-calendar { | ||
| 426 | + min-width: 100% !important; | ||
| 427 | +} | ||
| 428 | +.mc-head .mc-head { | ||
| 429 | + width: 100% !important; | ||
| 430 | +} | ||
| 431 | +.mc-body { | ||
| 432 | + width: 100% !important; | ||
| 433 | +} | ||
| 434 | +.yuandian { | ||
| 435 | + position: relative; | ||
| 436 | +} | ||
| 437 | +.yuandian::after { | ||
| 438 | + display: block; | ||
| 439 | + content: ""; | ||
| 440 | + width: 0.1rem; | ||
| 441 | + height: 0.1rem; | ||
| 442 | + border-radius: 50%; | ||
| 443 | + background: #ea6151; | ||
| 444 | + position: absolute; | ||
| 445 | + top: 0; | ||
| 446 | + left: 60%; | ||
| 447 | + z-index: 999; | ||
| 448 | + /* transform: translateX(-50%); */ | ||
| 449 | +} | ||
| 450 | +.zuixin { | ||
| 451 | + background: #759875; | ||
| 452 | +} | ||
| 453 | +.newacty { | ||
| 454 | + color: #fff; | ||
| 455 | +} | ||
| 456 | + | ||
| 457 | +.mpvue-calendar td.yuandian span { | ||
| 458 | + /* background: #ea2c43; */ | ||
| 459 | + /* color: #fff; */ | ||
| 460 | +} | ||
| 461 | +.mpvue-calendar td.yuandian .mc-text { | ||
| 462 | + color: #fff; | ||
| 463 | +} | ||
| 464 | +/* .mpvue-calendar .yuandian span { | ||
| 465 | +} */ | ||
| 297 | </style> | 466 | </style> |
src/assets/close.png
0 → 100644
665 字节
src/assets/closecha.png
0 → 100644
456 字节
src/assets/code.png
0 → 100644
8.4 KB
src/assets/delim.png
0 → 100644
974 字节
src/assets/finish.png
0 → 100644
128.4 KB
src/assets/guoqi.png
0 → 100644
6.8 KB
src/assets/jianotu.png
0 → 100644
286 字节
src/assets/jianpan.png
0 → 100644
1.2 KB
src/assets/leftrowk.png
0 → 100644
1.4 KB
src/assets/minezhibo.png
0 → 100644
13.0 KB
src/assets/qufatie.png
0 → 100644
1.4 KB
src/assets/redbag.png
0 → 100644
8.1 KB
src/assets/share.png
0 → 100644
11.9 KB
src/assets/shiyong.png
0 → 100644
6.8 KB
src/assets/upvideo.png
0 → 100644
5.0 KB
src/assets/xianshiyouhui.png
0 → 100644
128.5 KB
src/assets/xiaoxi.png
0 → 100644
1.1 KB
src/assets/yixiangimg.png
0 → 100644
950 字节
src/assets/youhua.png
0 → 100644
1.9 KB
src/assets/zuozhanbao.png
0 → 100644
1.9 KB
| 1 | <template> | 1 | <template> |
| 2 | <div class="container"> | 2 | <div class="container"> |
| 3 | <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> | 3 | <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> |
| 4 | - <van-swipe-item> | ||
| 5 | - <div> | ||
| 6 | - <img src="../../../assets/Group Copy@2x.png" alt /> | ||
| 7 | - </div> | ||
| 8 | - </van-swipe-item> | ||
| 9 | - <van-swipe-item> | ||
| 10 | - <div> | ||
| 11 | - <img src="../../../assets/Group Copy@2x.png" alt /> | ||
| 12 | - </div> | ||
| 13 | - </van-swipe-item> | ||
| 14 | - <van-swipe-item> | ||
| 15 | - <div> | ||
| 16 | - <img src="../../../assets/Group Copy@2x.png" alt /> | ||
| 17 | - </div> | ||
| 18 | - </van-swipe-item> | ||
| 19 | - <van-swipe-item> | ||
| 20 | - <div> | ||
| 21 | - <img src="../../../assets/Group Copy@2x.png" alt /> | 4 | + <van-swipe-item v-for="(item, index) in banner" :key="index" @click="bannerdetail(item)"> |
| 5 | + <div class="itemimg"> | ||
| 6 | + <img :src="item.image" alt /> | ||
| 22 | </div> | 7 | </div> |
| 23 | </van-swipe-item> | 8 | </van-swipe-item> |
| 24 | </van-swipe> | 9 | </van-swipe> |
| 25 | 10 | ||
| 26 | <div class="monthimg" @click="showcalendar"> | 11 | <div class="monthimg" @click="showcalendar"> |
| 27 | - <img src="../../../assets/sanyue.png" alt /> | ||
| 28 | - <div class="seeactivity"> | 12 | + <img :src="calendar" alt /> |
| 13 | + <!-- <div class="seeactivity"> | ||
| 29 | <img src="../../../assets/seehuodong.png" alt /> | 14 | <img src="../../../assets/seehuodong.png" alt /> |
| 15 | + </div>--> | ||
| 16 | + </div> | ||
| 17 | + <div> | ||
| 18 | + <div | ||
| 19 | + class="spring" | ||
| 20 | + v-for="(item,index) in activilist" | ||
| 21 | + :key="index" | ||
| 22 | + @click="godetail(item.id)" | ||
| 23 | + > | ||
| 24 | + <img :src="item.image" alt /> | ||
| 30 | </div> | 25 | </div> |
| 31 | </div> | 26 | </div> |
| 32 | 27 | ||
| 33 | - <div class="spring"> | ||
| 34 | - <img src="../../../assets/come.png" alt /> | ||
| 35 | - </div> | ||
| 36 | - <div class="spring"> | ||
| 37 | - <img src="../../../assets/spring.png" alt /> | ||
| 38 | - </div> | 28 | + <!-- <div class="spring" v-if="banner.length > 1" @click="godetail(banner[1].id)"> |
| 29 | + <img :src="banner[1].image" alt /> | ||
| 30 | + </div>--> | ||
| 39 | 31 | ||
| 40 | <van-calendar v-model="show" @confirm="onConfirm" /> | 32 | <van-calendar v-model="show" @confirm="onConfirm" /> |
| 41 | <tabBar v-bind:active="2" /> | 33 | <tabBar v-bind:active="2" /> |
| @@ -43,10 +35,10 @@ | @@ -43,10 +35,10 @@ | ||
| 43 | </template> | 35 | </template> |
| 44 | 36 | ||
| 45 | <script> | 37 | <script> |
| 46 | -import Vue from 'vue'; | ||
| 47 | -import { Swipe, SwipeItem } from 'vant'; | 38 | +import Vue from "vue"; |
| 39 | +import { Swipe, SwipeItem } from "vant"; | ||
| 48 | 40 | ||
| 49 | -import { Calendar } from 'vant'; | 41 | +import { Calendar } from "vant"; |
| 50 | Vue.use(Calendar); | 42 | Vue.use(Calendar); |
| 51 | Vue.use(Swipe); | 43 | Vue.use(Swipe); |
| 52 | Vue.use(SwipeItem); | 44 | Vue.use(SwipeItem); |
| @@ -58,13 +50,60 @@ export default { | @@ -58,13 +50,60 @@ export default { | ||
| 58 | data() { | 50 | data() { |
| 59 | return { | 51 | return { |
| 60 | selnav: 2, | 52 | selnav: 2, |
| 61 | - date: '', | 53 | + date: "", |
| 62 | show: false, | 54 | show: false, |
| 55 | + calendar: "", | ||
| 56 | + banner: [], | ||
| 57 | + activilist: [] | ||
| 63 | }; | 58 | }; |
| 64 | }, | 59 | }, |
| 60 | + created() { | ||
| 61 | + document.title = "唐元集活动中心"; | ||
| 62 | + this.getactivity(); | ||
| 63 | + }, | ||
| 65 | methods: { | 64 | methods: { |
| 65 | + godetail(id) { | ||
| 66 | + this.$router.push({ | ||
| 67 | + path: "/activitydetail", | ||
| 68 | + query: { | ||
| 69 | + id: id | ||
| 70 | + } | ||
| 71 | + }); | ||
| 72 | + }, | ||
| 73 | + bannerdetail(item) { | ||
| 74 | + this.$router.push({ | ||
| 75 | + path: "/activitydetail", | ||
| 76 | + query: { | ||
| 77 | + id: item.id | ||
| 78 | + } | ||
| 79 | + }); | ||
| 80 | + }, | ||
| 81 | + // 获取活动 | ||
| 82 | + getactivity() { | ||
| 83 | + let that = this; | ||
| 84 | + var url = "/api/activity/activity_list"; | ||
| 85 | + let param = { | ||
| 86 | + date: "" | ||
| 87 | + }; | ||
| 88 | + | ||
| 89 | + that.$axios | ||
| 90 | + .post(url, param) | ||
| 91 | + .then(function (res) { | ||
| 92 | + console.log(res); | ||
| 93 | + that.calendar = res.data.calendar; | ||
| 94 | + that.banner = res.data.activity; | ||
| 95 | + that.activilist = res.data.activity_time | ||
| 96 | + console.log(that.banner); | ||
| 97 | + }) | ||
| 98 | + .catch(function (err) { | ||
| 99 | + console.log(err); | ||
| 100 | + }); | ||
| 101 | + }, | ||
| 66 | showcalendar() { | 102 | showcalendar() { |
| 67 | - this.show = true | 103 | + this.$router.push({ |
| 104 | + path: "/activitycalendar" | ||
| 105 | + }); | ||
| 106 | + // this.show = true | ||
| 68 | }, | 107 | }, |
| 69 | selcourse(e) { | 108 | selcourse(e) { |
| 70 | console.log(37344); | 109 | console.log(37344); |
| @@ -78,14 +117,21 @@ export default { | @@ -78,14 +117,21 @@ export default { | ||
| 78 | onConfirm(date) { | 117 | onConfirm(date) { |
| 79 | this.show = false; | 118 | this.show = false; |
| 80 | this.date = this.formatDate(date); | 119 | this.date = this.formatDate(date); |
| 81 | - }, | 120 | + } |
| 82 | } | 121 | } |
| 83 | }; | 122 | }; |
| 84 | </script> | 123 | </script> |
| 85 | 124 | ||
| 86 | <style scoped> | 125 | <style scoped> |
| 87 | @import "../../../style/activity.css"; | 126 | @import "../../../style/activity.css"; |
| 88 | -.container{ | 127 | +.container { |
| 89 | padding-bottom: 1.2rem; | 128 | padding-bottom: 1.2rem; |
| 90 | } | 129 | } |
| 130 | +.itemimg { | ||
| 131 | + height: 3.2rem; | ||
| 132 | +} | ||
| 133 | +.itemimg img { | ||
| 134 | + width: 100%; | ||
| 135 | + height: 100%; | ||
| 136 | +} | ||
| 91 | </style> | 137 | </style> |
| 1 | +<template> | ||
| 2 | + <div class="container"> | ||
| 3 | + <div class="flextwo sharetopkk" @click="back" style="position: fixed;top:0;left:0;"> | ||
| 4 | + <div class="leftrow leftrowkimg"> | ||
| 5 | + <img src="../../../assets/leftrow.png" alt /> | ||
| 6 | + </div> | ||
| 7 | + <div class="sharemiddle">活动日历</div> | ||
| 8 | + <div class="sharebtn"> | ||
| 9 | + <!-- <img src="../../../assets/sharebtn.png" alt /> --> | ||
| 10 | + </div> | ||
| 11 | + </div> | ||
| 12 | + <div class="datePicker" ref="element"> | ||
| 13 | + <!-- :begin="begin" | ||
| 14 | + :end="end"--> | ||
| 15 | + <!-- :monthRange="monthRange" --> | ||
| 16 | + <!-- :value="value" --> | ||
| 17 | + <Calendar | ||
| 18 | + id="cal" | ||
| 19 | + :months="months" | ||
| 20 | + :now="false" | ||
| 21 | + :responsive="false" | ||
| 22 | + lunar | ||
| 23 | + clean | ||
| 24 | + @select="selected" | ||
| 25 | + @prev="prev" | ||
| 26 | + @next="next" | ||
| 27 | + :multi="false" | ||
| 28 | + ref="calendar" | ||
| 29 | + /> | ||
| 30 | + </div> | ||
| 31 | + | ||
| 32 | + <div class="actlist van-overflow-hidden" :style="{'margin-top':gaodu}"> | ||
| 33 | + <div class="activitytext" v-html="activity_des"></div> | ||
| 34 | + <div class="actsecbox"> | ||
| 35 | + <div class="spring" v-for="(item, index) in banner" :key="index" @click="actdetail(item)"> | ||
| 36 | + <img :src="item.image" alt /> | ||
| 37 | + </div> | ||
| 38 | + </div> | ||
| 39 | + </div> | ||
| 40 | + </div> | ||
| 41 | +</template> | ||
| 42 | + | ||
| 43 | +<script> | ||
| 44 | +import Calendar from "mpvue-calendar"; | ||
| 45 | +import "mpvue-calendar/src/browser-style.css"; | ||
| 46 | +// import util from "../../util/util"; | ||
| 47 | +export default { | ||
| 48 | + components: { | ||
| 49 | + Calendar | ||
| 50 | + }, | ||
| 51 | + data() { | ||
| 52 | + return { | ||
| 53 | + months: [ | ||
| 54 | + "1月 ", | ||
| 55 | + "2月", | ||
| 56 | + "3月", | ||
| 57 | + "4月", | ||
| 58 | + "5月", | ||
| 59 | + "6月", | ||
| 60 | + "7月", | ||
| 61 | + "8月", | ||
| 62 | + "9月", | ||
| 63 | + "10月", | ||
| 64 | + "11月", | ||
| 65 | + "12月" | ||
| 66 | + ], | ||
| 67 | + // value: [2020, 8, 20], | ||
| 68 | + chuandate: "", | ||
| 69 | + chaundatedate: "", | ||
| 70 | + banner: [], | ||
| 71 | + showyear: '', | ||
| 72 | + showmonth: '', | ||
| 73 | + currentmonth: '', | ||
| 74 | + selectday: '', | ||
| 75 | + today: false, | ||
| 76 | + activity_des: '', | ||
| 77 | + gaodu: "" | ||
| 78 | + // disabledArray: ['2018-6-27','2018-6-25'], | ||
| 79 | + // value: util.formatDate(Date.parse(new Date())), | ||
| 80 | + // begin: util.formatDate(Date.parse(new Date())), | ||
| 81 | + // end: util.formatDate(Date.parse(new Date()) + 90 * 24 * 60 * 60 * 1000) //假设未来20天可以选择日期 | ||
| 82 | + // monthRange: ["2019-6", "2019-8"] | ||
| 83 | + // events: {'2018-6-7':'今日备注', '2018-6-8':'一条很长的明日备注'},自定义备注 | ||
| 84 | + // almanacs: {'9-3': '抗战胜利日', '11-17': '学生日'},//自定义节日 | ||
| 85 | + // tileContent: [ | ||
| 86 | + // {date: '2018-9-22', className: 'holiday ', content: '休'}, | ||
| 87 | + // {date: '2018-9-23', className: 'holiday ', content: '休'} | ||
| 88 | + // ],//为每个具体日期自定义class和插入文本内容，具体用法见下 | ||
| 89 | + }; | ||
| 90 | + }, | ||
| 91 | + | ||
| 92 | + created() { | ||
| 93 | + | ||
| 94 | + document.title = "唐元集公众号"; | ||
| 95 | + // this.id = this.$route.query.id; | ||
| 96 | + // console.log(this.id); | ||
| 97 | + | ||
| 98 | + let that = this; | ||
| 99 | + let date = new Date(); | ||
| 100 | + let year = date.getFullYear(); | ||
| 101 | + let month = date.getMonth() + 1; | ||
| 102 | + if (month < 10) { | ||
| 103 | + month = "0" + month; | ||
| 104 | + } | ||
| 105 | + let day = date.getDate(); | ||
| 106 | + if (day < 10) { | ||
| 107 | + day = "0" + day; | ||
| 108 | + } | ||
| 109 | + let datek = year + "-" + month; | ||
| 110 | + let datekk = year + "-" + month + "-" + day; | ||
| 111 | + this.chuandate = datek; | ||
| 112 | + this.chaundatedate = datekk; | ||
| 113 | + this.showyear = year; | ||
| 114 | + this.showmonth = month; | ||
| 115 | + this.currentmonth = year + '-' + month | ||
| 116 | + console.log(that.chuandate); | ||
| 117 | + this.getact(); | ||
| 118 | + // 获取某一个月的活动 | ||
| 119 | + this.getmonthactive() | ||
| 120 | + this.$nextTick(function () { | ||
| 121 | + var len = that.$refs.element.offsetHeight + 40 + 'px'; | ||
| 122 | + | ||
| 123 | + that.gaodu = len; | ||
| 124 | + console.log(that.gaodu) | ||
| 125 | + }) | ||
| 126 | + | ||
| 127 | + | ||
| 128 | + | ||
| 129 | + | ||
| 130 | + }, | ||
| 131 | + mounted() { }, | ||
| 132 | + methods: { | ||
| 133 | + back() { | ||
| 134 | + this.$router.go(-1) | ||
| 135 | + }, | ||
| 136 | + prev(year, month, weekIndex) { | ||
| 137 | + let that = this; | ||
| 138 | + console.log(year, month, weekIndex); | ||
| 139 | + if (month < 10) { | ||
| 140 | + month = '0' + month | ||
| 141 | + } | ||
| 142 | + this.selectday = '' | ||
| 143 | + this.showyear = year; | ||
| 144 | + this.showmonth = month | ||
| 145 | + this.chuandate = year + '-' + month; | ||
| 146 | + | ||
| 147 | + this.getact() | ||
| 148 | + this.getmonthactive() | ||
| 149 | + this.$nextTick(function () { | ||
| 150 | + var len = that.$refs.element.offsetHeight + 40 + 'px'; | ||
| 151 | + that.gaodu = len; | ||
| 152 | + console.log(that.gaodu) | ||
| 153 | + }) | ||
| 154 | + }, | ||
| 155 | + next(year, month, weekIndex) { | ||
| 156 | + let that = this; | ||
| 157 | + console.log(year, month, weekIndex); | ||
| 158 | + if (month < 10) { | ||
| 159 | + month = '0' + month | ||
| 160 | + } | ||
| 161 | + this.selectday = '' | ||
| 162 | + this.showyear = year; | ||
| 163 | + this.showmonth = month | ||
| 164 | + this.chuandate = year + '-' + month; | ||
| 165 | + this.getact() | ||
| 166 | + this.getmonthactive(); | ||
| 167 | + this.$nextTick(function () { | ||
| 168 | + var len = that.$refs.element.offsetHeight + 40 + 'px'; | ||
| 169 | + that.gaodu = len; | ||
| 170 | + console.log(that.gaodu) | ||
| 171 | + }) | ||
| 172 | + | ||
| 173 | + }, | ||
| 174 | + // 获取某一个月的活动 | ||
| 175 | + getmonthactive() { | ||
| 176 | + let that = this; | ||
| 177 | + var url = "/api/activity/activity_list"; | ||
| 178 | + let param = { | ||
| 179 | + date: that.chuandate | ||
| 180 | + }; | ||
| 181 | + | ||
| 182 | + that.$axios | ||
| 183 | + .post(url, param) | ||
| 184 | + .then(function (res) { | ||
| 185 | + that.banner = res.data.activity; | ||
| 186 | + that.activity_des = res.data.activity_des | ||
| 187 | + }) | ||
| 188 | + .catch(function (err) { | ||
| 189 | + console.log(err); | ||
| 190 | + }); | ||
| 191 | + }, | ||
| 192 | + // 渲染哪一天有活动 | ||
| 193 | + getact() { | ||
| 194 | + let that = this; | ||
| 195 | + | ||
| 196 | + var url = "/api/activity/activity_list"; | ||
| 197 | + let param = { | ||
| 198 | + date: that.chuandate | ||
| 199 | + }; | ||
| 200 | + | ||
| 201 | + that.$axios | ||
| 202 | + .post(url, param) | ||
| 203 | + .then(function (res) { | ||
| 204 | + console.log(res); | ||
| 205 | + | ||
| 206 | + let datearr = res.data.date; | ||
| 207 | + if (datearr.indexOf(that.selectday) == -1) { | ||
| 208 | + that.today = true | ||
| 209 | + } | ||
| 210 | + console.log(that.today) | ||
| 211 | + if (that.selectday != '') { | ||
| 212 | + datearr.push(that.selectday) | ||
| 213 | + } | ||
| 214 | + | ||
| 215 | + console.log(datearr) | ||
| 216 | + // 显示有活动的天数 | ||
| 217 | + that.$nextTick(() => { | ||
| 218 | + let monthArray = document.getElementsByClassName("lunarStyle"); | ||
| 219 | + | ||
| 220 | + if (datearr.length != 0) { | ||
| 221 | + for (var i = 0; i < monthArray.length; i++) { | ||
| 222 | + // 先清除选中的天数 | ||
| 223 | + monthArray[i].classList.remove('selected'); | ||
| 224 | + monthArray[i].classList.remove('yuandian'); | ||
| 225 | + for (var j = 0; j < datearr.length; j++) { | ||
| 226 | + let day = ""; | ||
| 227 | + let showdate = '' | ||
| 228 | + let date = monthArray[i].innerText.split(""); | ||
| 229 | + if (date.length == 5) { | ||
| 230 | + day = date[0] + date[1]; | ||
| 231 | + } else if (date.length == 4) { | ||
| 232 | + day = + date[0]; | ||
| 233 | + } | ||
| 234 | + // showdate = that.showyear + '/' + that.showmonth + '/' + day; | ||
| 235 | + if (monthArray[i].classList.contains('disabled') == false) { | ||
| 236 | + if (day == datearr[j]) { | ||
| 237 | + monthArray[i].setAttribute("class", "yuandian lunarStyle"); | ||
| 238 | + if (that.today == true) { | ||
| 239 | + console.log(that.selectday) | ||
| 240 | + | ||
| 241 | + if (datearr[j] == that.selectday) { | ||
| 242 | + console.log(8888) | ||
| 243 | + monthArray[i].setAttribute("class", "selected lunarStyle"); | ||
| 244 | + } | ||
| 245 | + } | ||
| 246 | + | ||
| 247 | + } | ||
| 248 | + } | ||
| 249 | + | ||
| 250 | + } | ||
| 251 | + } | ||
| 252 | + } else { | ||
| 253 | + for (var i = 0; i < monthArray.length; i++) { | ||
| 254 | + // 先清除选中的天数 | ||
| 255 | + | ||
| 256 | + monthArray[i].classList.remove('yuandian'); | ||
| 257 | + monthArray[i].classList.remove('selected'); | ||
| 258 | + } | ||
| 259 | + } | ||
| 260 | + | ||
| 261 | + }); | ||
| 262 | + // that.selectday = '' | ||
| 263 | + | ||
| 264 | + // that.banner = res.data.activity; | ||
| 265 | + }) | ||
| 266 | + .catch(function (err) { | ||
| 267 | + console.log(err); | ||
| 268 | + }); | ||
| 269 | + }, | ||
| 270 | + // 获取某一天的活动 | ||
| 271 | + getdayactive() { | ||
| 272 | + let that = this; | ||
| 273 | + var url = "/api/activity/activity_list"; | ||
| 274 | + let param = { | ||
| 275 | + date_detail: that.chaundatedate | ||
| 276 | + }; | ||
| 277 | + | ||
| 278 | + that.$axios | ||
| 279 | + .post(url, param) | ||
| 280 | + .then(function (res) { | ||
| 281 | + that.banner = res.data.activity; | ||
| 282 | + }) | ||
| 283 | + .catch(function (err) { | ||
| 284 | + console.log(err); | ||
| 285 | + }); | ||
| 286 | + }, | ||
| 287 | + // 琥珀去 | ||
| 288 | + // selectYear(year) { | ||
| 289 | + // console.log(year) | ||
| 290 | + // }, | ||
| 291 | + // selectMonth(month, year) { | ||
| 292 | + // console.log(year, month) | ||
| 293 | + // }, | ||
| 294 | + // setToday() { | ||
| 295 | + // this.$refs.calendar.setToday() | ||
| 296 | + // }, | ||
| 297 | + // dateInfo() { | ||
| 298 | + // const info = this.$refs.calendar.dateInfo(2018, 8, 23) | ||
| 299 | + // console.log(info); | ||
| 300 | + // }, | ||
| 301 | + // renderer() { | ||
| 302 | + // this.$refs.calendar.renderer(2018, 8); //渲染2018年8月份 | ||
| 303 | + // }, | ||
| 304 | + selected(val, val2) { | ||
| 305 | + console.log(this); | ||
| 306 | + let monthArray = this.$refs.calendar.monthRangeDays; | ||
| 307 | + console.log(monthArray); | ||
| 308 | + console.log(val); | ||
| 309 | + this.selectday = val[2] | ||
| 310 | + if (val[1] < 10) { | ||
| 311 | + val[1] = '0' + val[1] | ||
| 312 | + } | ||
| 313 | + if (val[2] < 10) { | ||
| 314 | + val[2] = '0' + val[2] | ||
| 315 | + } | ||
| 316 | + this.chaundatedate = val[0] + '-' + val[1] + '-' + val[2]; | ||
| 317 | + this.getdayactive() | ||
| 318 | + this.getact() | ||
| 319 | + console.log(this.chaundatedate) | ||
| 320 | + console.log(val2); | ||
| 321 | + }, | ||
| 322 | + // 去活动详情页 | ||
| 323 | + actdetail(item) { | ||
| 324 | + this.$router.push({ | ||
| 325 | + path: "/activitydetail", | ||
| 326 | + query: { | ||
| 327 | + id: item.id | ||
| 328 | + } | ||
| 329 | + }); | ||
| 330 | + } | ||
| 331 | + } | ||
| 332 | +}; | ||
| 333 | +</script> | ||
| 334 | + | ||
| 335 | +<style scoped> | ||
| 336 | +.activitytext { | ||
| 337 | +} | ||
| 338 | +.datePicker { | ||
| 339 | + width: 100%; | ||
| 340 | + position: fixed; | ||
| 341 | + top: 0.8rem; | ||
| 342 | + left: 0; | ||
| 343 | +} | ||
| 344 | +.active { | ||
| 345 | + height: auto !important; | ||
| 346 | +} | ||
| 347 | +#app { | ||
| 348 | + height: auto !important; | ||
| 349 | +} | ||
| 350 | +.container { | ||
| 351 | + height: 100%; | ||
| 352 | +} | ||
| 353 | +/* @import "../../../style/activity.css"; */ | ||
| 354 | +.actlist { | ||
| 355 | + margin-top: 9.6rem; | ||
| 356 | +} | ||
| 357 | +.activitytext { | ||
| 358 | + color: #454e56; | ||
| 359 | + font-size: 0.28rem; | ||
| 360 | + padding: 0 0.32rem 0; | ||
| 361 | + box-sizing: border-box; | ||
| 362 | +} | ||
| 363 | +.spring { | ||
| 364 | + width: 6.86rem; | ||
| 365 | + height: 2.88rem; | ||
| 366 | + margin: 0 auto 0.32rem; | ||
| 367 | +} | ||
| 368 | +.calendarbox { | ||
| 369 | + position: relative; | ||
| 370 | +} | ||
| 371 | +.calendarfixed { | ||
| 372 | + width: 100%; | ||
| 373 | + height: 5.5rem; | ||
| 374 | + position: absolute; | ||
| 375 | + top: 1rem; | ||
| 376 | + left: 0; | ||
| 377 | + background: transparent; | ||
| 378 | +} | ||
| 379 | +.acttop { | ||
| 380 | + position: fixed; | ||
| 381 | + top: 0; | ||
| 382 | + left: 0; | ||
| 383 | + background: #fff; | ||
| 384 | +} | ||
| 385 | +</style> |
| 1 | +<template> | ||
| 2 | + <div class="container"> | ||
| 3 | + <div class="flextwo sharetopk" @click="back"> | ||
| 4 | + <div class="leftrow leftrowkimg"> | ||
| 5 | + <img src="../../../assets/leftrow.png" alt /> | ||
| 6 | + </div> | ||
| 7 | + <div class="sharemiddle">活动详情</div> | ||
| 8 | + <div class="sharebtn" @click.stop="collectis"> | ||
| 9 | + <img src="../../../assets/star.png" alt v-if="collect" /> | ||
| 10 | + <img src="../../../assets/nostar.png" alt v-else /> | ||
| 11 | + </div> | ||
| 12 | + </div> | ||
| 13 | + <div class="detailbox"> | ||
| 14 | + <div class="detailtitle">{{ title }}</div> | ||
| 15 | + <div class="actdetail" v-html="content"></div> | ||
| 16 | + </div> | ||
| 17 | + </div> | ||
| 18 | +</template> | ||
| 19 | + | ||
| 20 | +<script> | ||
| 21 | +import { Toast } from "vant"; | ||
| 22 | +export default { | ||
| 23 | + data() { | ||
| 24 | + return { | ||
| 25 | + id: "", | ||
| 26 | + content: "", | ||
| 27 | + title: "", | ||
| 28 | + collect: false | ||
| 29 | + }; | ||
| 30 | + }, | ||
| 31 | + | ||
| 32 | + created() { | ||
| 33 | + document.title = "唐元集公众号"; | ||
| 34 | + this.id = this.$route.query.id; | ||
| 35 | + console.log(this.id); | ||
| 36 | + this.getdetail(); | ||
| 37 | + }, | ||
| 38 | + methods: { | ||
| 39 | + back() { | ||
| 40 | + this.$router.go(-1); | ||
| 41 | + }, | ||
| 42 | + collectis() { | ||
| 43 | + let that = this; | ||
| 44 | + var url = "/api/user/favorite"; | ||
| 45 | + let param = { | ||
| 46 | + type: 2, | ||
| 47 | + favorite_id: that.id | ||
| 48 | + }; | ||
| 49 | + | ||
| 50 | + that.$axios | ||
| 51 | + .post(url, param) | ||
| 52 | + .then(function (res) { | ||
| 53 | + console.log(res); | ||
| 54 | + if (that.collect == false) { | ||
| 55 | + that.collect = true; | ||
| 56 | + Toast("收藏成功"); | ||
| 57 | + } else { | ||
| 58 | + that.collect = false; | ||
| 59 | + Toast("取消收藏成功"); | ||
| 60 | + } | ||
| 61 | + }) | ||
| 62 | + .catch(function (err) { | ||
| 63 | + console.log(err); | ||
| 64 | + }); | ||
| 65 | + }, | ||
| 66 | + getdetail() { | ||
| 67 | + let that = this; | ||
| 68 | + var url = "/api/activity/detail"; | ||
| 69 | + let param = { | ||
| 70 | + activity_id: that.id | ||
| 71 | + }; | ||
| 72 | + | ||
| 73 | + that.$axios | ||
| 74 | + .post(url, param) | ||
| 75 | + .then(function (res) { | ||
| 76 | + console.log(res); | ||
| 77 | + that.content = res.data.activity.content; | ||
| 78 | + that.title = res.data.activity.title; | ||
| 79 | + if (res.data.activity.is_favorite == 1) { | ||
| 80 | + that.collect = true; | ||
| 81 | + } else { | ||
| 82 | + that.collect = false; | ||
| 83 | + } | ||
| 84 | + }) | ||
| 85 | + .catch(function (err) { | ||
| 86 | + console.log(err); | ||
| 87 | + }); | ||
| 88 | + } | ||
| 89 | + } | ||
| 90 | +}; | ||
| 91 | +</script> | ||
| 92 | + | ||
| 93 | +<style scoped> | ||
| 94 | +.detailtitle { | ||
| 95 | + color: #344039; | ||
| 96 | + font-size: 0.4rem; | ||
| 97 | +} | ||
| 98 | +.actdetail { | ||
| 99 | + font-size: 0.32rem; | ||
| 100 | + margin-top: 0.32rem; | ||
| 101 | +} | ||
| 102 | + | ||
| 103 | +.detailbox { | ||
| 104 | + padding: 0.32rem; | ||
| 105 | + box-sizing: border-box; | ||
| 106 | + margin-top: 0.8rem; | ||
| 107 | +} | ||
| 108 | +</style> |
| 1 | +<template> | ||
| 2 | + <div class="container"> | ||
| 3 | + <div class="calendarbox"> | ||
| 4 | + <van-calendar | ||
| 5 | + v-model="show" | ||
| 6 | + @select="selectdate" | ||
| 7 | + @confirm="onConfirm" | ||
| 8 | + position="top" | ||
| 9 | + color="#87BD87" | ||
| 10 | + :default-date="datemo" | ||
| 11 | + type="multiple" | ||
| 12 | + :show-confirm="false" | ||
| 13 | + title="活动日历" | ||
| 14 | + /> | ||
| 15 | + </div> | ||
| 16 | + | ||
| 17 | + <div class="actlist van-overflow-hidden"> | ||
| 18 | + <div class="actsecbox"> | ||
| 19 | + <div class="spring" v-for="(item, index) in banner" :key="index" @click="actdetail(item)"> | ||
| 20 | + <img :src="item.image" alt /> | ||
| 21 | + </div> | ||
| 22 | + </div> | ||
| 23 | + </div> | ||
| 24 | + | ||
| 25 | + <tabBar v-bind:active="2" /> | ||
| 26 | + </div> | ||
| 27 | +</template> | ||
| 28 | + | ||
| 29 | +<script> | ||
| 30 | +import Vue from "vue"; | ||
| 31 | +import { Swipe, SwipeItem } from "vant"; | ||
| 32 | + | ||
| 33 | +import { Calendar } from "vant"; | ||
| 34 | +Vue.use(Calendar); | ||
| 35 | +Vue.use(Swipe); | ||
| 36 | +Vue.use(SwipeItem); | ||
| 37 | +import tabBar from "@/components/views/tabBar.vue"; | ||
| 38 | +export default { | ||
| 39 | + components: { | ||
| 40 | + tabBar | ||
| 41 | + }, | ||
| 42 | + data() { | ||
| 43 | + return { | ||
| 44 | + selnav: 2, | ||
| 45 | + date: "", | ||
| 46 | + show: true, | ||
| 47 | + chuandate: "", | ||
| 48 | + banner: [], | ||
| 49 | + datemo: "", | ||
| 50 | + type: "multiple" | ||
| 51 | + }; | ||
| 52 | + }, | ||
| 53 | + created() { | ||
| 54 | + document.title = "唐元集公众号"; | ||
| 55 | + let that = this; | ||
| 56 | + let date = new Date(); | ||
| 57 | + let year = date.getFullYear(); | ||
| 58 | + let month = date.getMonth() + 1; | ||
| 59 | + if (month < 10) { | ||
| 60 | + month = "0" + month; | ||
| 61 | + } | ||
| 62 | + let day = date.getDate(); | ||
| 63 | + if (day < 10) { | ||
| 64 | + day = "0" + day; | ||
| 65 | + } | ||
| 66 | + let datek = year + "-" + month; | ||
| 67 | + this.chuandate = datek; | ||
| 68 | + console.log(datek); | ||
| 69 | + that.getact(); | ||
| 70 | + }, | ||
| 71 | + methods: { | ||
| 72 | + showcalendar() { | ||
| 73 | + this.show = true; | ||
| 74 | + }, | ||
| 75 | + actdetail(item) { | ||
| 76 | + this.$router.push({ | ||
| 77 | + path: "/activitydetail", | ||
| 78 | + query: { | ||
| 79 | + id: item.id | ||
| 80 | + } | ||
| 81 | + }); | ||
| 82 | + }, | ||
| 83 | + | ||
| 84 | + selcourse(e) { | ||
| 85 | + console.log(e); | ||
| 86 | + this.selnav = e.currentTarget.dataset.id; | ||
| 87 | + }, | ||
| 88 | + //日历 | ||
| 89 | + formatDate(date) { | ||
| 90 | + return `${date.getMonth() + 1}/${date.getDate()}`; | ||
| 91 | + }, | ||
| 92 | + getact() { | ||
| 93 | + let that = this; | ||
| 94 | + var url = "/api/activity/activity_list"; | ||
| 95 | + let param = { | ||
| 96 | + date: that.chuandate | ||
| 97 | + }; | ||
| 98 | + | ||
| 99 | + that.$axios | ||
| 100 | + .post(url, param) | ||
| 101 | + .then(function (res) { | ||
| 102 | + console.log(res); | ||
| 103 | + that.banner = res.data.activity; | ||
| 104 | + let date = res.data.date; | ||
| 105 | + console.log(date); | ||
| 106 | + let arr = []; | ||
| 107 | + date.forEach(function (value, index, array) { | ||
| 108 | + if (value[1] < 10) { | ||
| 109 | + value[1] = "0" + Number(value[1] - 1).toString(); | ||
| 110 | + } else { | ||
| 111 | + value[1] = Number(value[1] - 1).toString(); | ||
| 112 | + } | ||
| 113 | + arr.push(new Date(value[0], value[1], value[2])); | ||
| 114 | + that.datemo = arr; | ||
| 115 | + }); | ||
| 116 | + }) | ||
| 117 | + .catch(function (err) { | ||
| 118 | + console.log(err); | ||
| 119 | + }); | ||
| 120 | + }, | ||
| 121 | + getactsec() { | ||
| 122 | + let that = this; | ||
| 123 | + var url = "/api/activity/activity_list"; | ||
| 124 | + let param = { | ||
| 125 | + date: that.chuandate | ||
| 126 | + }; | ||
| 127 | + | ||
| 128 | + that.$axios | ||
| 129 | + .post(url, param) | ||
| 130 | + .then(function (res) { | ||
| 131 | + console.log(res); | ||
| 132 | + that.banner = res.data.activity; | ||
| 133 | + }) | ||
| 134 | + .catch(function (err) { | ||
| 135 | + console.log(err); | ||
| 136 | + }); | ||
| 137 | + }, | ||
| 138 | + selectdate(date) { | ||
| 139 | + let that = this; | ||
| 140 | + let len = date.length; | ||
| 141 | + len = len - 1; | ||
| 142 | + | ||
| 143 | + console.log(date); | ||
| 144 | + let year = date[len].getFullYear(); | ||
| 145 | + let month = date[len].getMonth() + 1; | ||
| 146 | + if (month < 10) { | ||
| 147 | + month = "0" + month; | ||
| 148 | + } | ||
| 149 | + let day = date[len].getDate(); | ||
| 150 | + if (day < 10) { | ||
| 151 | + day = "0" + day; | ||
| 152 | + } | ||
| 153 | + let datek = year + "-" + month; | ||
| 154 | + this.chuandate = datek; | ||
| 155 | + console.log(datek); | ||
| 156 | + that.getactsec(); | ||
| 157 | + }, | ||
| 158 | + onConfirm(date) { | ||
| 159 | + let that = this; | ||
| 160 | + console.log(date); | ||
| 161 | + let len = date.length; | ||
| 162 | + len = len - 1; | ||
| 163 | + let year = date[len].getFullYear(); | ||
| 164 | + let month = date[len].getMonth() + 1; | ||
| 165 | + if (month < 10) { | ||
| 166 | + month = "0" + month; | ||
| 167 | + } | ||
| 168 | + let day = date[len].getDate(); | ||
| 169 | + if (day < 10) { | ||
| 170 | + day = "0" + day; | ||
| 171 | + } | ||
| 172 | + let datek = year + "-" + month; | ||
| 173 | + this.chuandate = datek; | ||
| 174 | + console.log(datek); | ||
| 175 | + that.getactsec(); | ||
| 176 | + } | ||
| 177 | + } | ||
| 178 | +}; | ||
| 179 | +</script> | ||
| 180 | + | ||
| 181 | +<style scoped> | ||
| 182 | +@import "../../../style/activity.css"; | ||
| 183 | +body { | ||
| 184 | + overflow: scroll; | ||
| 185 | +} | ||
| 186 | +.van-overlay { | ||
| 187 | + position: unset !important; | ||
| 188 | +} | ||
| 189 | +.container { | ||
| 190 | + padding-bottom: 1.2rem; | ||
| 191 | + height: 100%; | ||
| 192 | + overflow-y: scroll; | ||
| 193 | + display: flex; | ||
| 194 | + flex-direction: column; | ||
| 195 | + width: 100%; | ||
| 196 | +} | ||
| 197 | +/* .actlist { | ||
| 198 | + position: fixed; | ||
| 199 | + top: 10.2rem; | ||
| 200 | + left: 0; | ||
| 201 | + | ||
| 202 | + z-index: 999; | ||
| 203 | +} | ||
| 204 | +.actsecbox { | ||
| 205 | + position: relative; | ||
| 206 | + height: 10rem; | ||
| 207 | + overflow-y: scroll; | ||
| 208 | +} */ | ||
| 209 | +.actlist { | ||
| 210 | + flex: 1; | ||
| 211 | + /* height: 10rem; */ | ||
| 212 | + margin-top: 0.8rem; | ||
| 213 | + overflow-y: scroll; | ||
| 214 | +} | ||
| 215 | +.calendarbox .van-overlay { | ||
| 216 | + display: none; | ||
| 217 | +} | ||
| 218 | +.van-overflow-hidden { | ||
| 219 | + overflow: auto !important; | ||
| 220 | +} | ||
| 221 | +.calendarbox .van-overlay .van-calendar__day { | ||
| 222 | + height: 41px !important; | ||
| 223 | +} | ||
| 224 | +.van-calendar__popup.van-popup--bottom, | ||
| 225 | +.van-calendar__popup.van-popup--top { | ||
| 226 | + height: 62%; | ||
| 227 | +} | ||
| 228 | + | ||
| 229 | +.van-icon { | ||
| 230 | + display: none !important; | ||
| 231 | +} | ||
| 232 | +</style> |
| 1 | <template> | 1 | <template> |
| 2 | - <div class="containerbox"> | ||
| 3 | - <van-calendar v-model="show" @confirm="onConfirm" /> | 2 | + <div class="container" id="app"> |
| 3 | + <div class="acttop"> | ||
| 4 | + <div class="flextwo sharetopkk" @click="back"> | ||
| 5 | + <div class="leftrow leftrowkimg"> | ||
| 6 | + <img src="../../../assets/leftrow.png" alt /> | ||
| 7 | + </div> | ||
| 8 | + <div class="sharemiddle">活动日历</div> | ||
| 9 | + <div class="sharebtn"> | ||
| 10 | + <!-- <img src="../../../assets/sharebtn.png" alt /> --> | ||
| 11 | + </div> | ||
| 12 | + </div> | ||
| 13 | + <div class="calendarbox"> | ||
| 14 | + <Calendar ref="Calendar" :markDate="arr2" v-on:changeMonth="changeDate"></Calendar> | ||
| 15 | + <div class="calendarfixed"></div> | ||
| 16 | + </div> | ||
| 17 | + </div> | ||
| 18 | + | ||
| 19 | + <div class="actlist van-overflow-hidden"> | ||
| 20 | + <div class="actsecbox"> | ||
| 21 | + <div class="spring" v-for="(item, index) in banner" :key="index" @click="actdetail(item)"> | ||
| 22 | + <img :src="item.image" alt /> | ||
| 23 | + </div> | ||
| 24 | + </div> | ||
| 25 | + </div> | ||
| 4 | </div> | 26 | </div> |
| 5 | </template> | 27 | </template> |
| 6 | 28 | ||
| 7 | <script> | 29 | <script> |
| 8 | -import Vue from 'vue'; | ||
| 9 | -import { Calendar } from 'vant'; | 30 | +import Calendar from "vue-calendar-component"; |
| 10 | 31 | ||
| 11 | -Vue.use(Calendar); | ||
| 12 | export default { | 32 | export default { |
| 33 | + components: { | ||
| 34 | + Calendar | ||
| 35 | + }, | ||
| 13 | data() { | 36 | data() { |
| 14 | return { | 37 | return { |
| 15 | - date: '', | ||
| 16 | - show: false, | 38 | + arr2: ["2020/8/15", "2019/4/3", "2019/4/4"], |
| 39 | + | ||
| 40 | + banner: [], | ||
| 41 | + chuandate: "" | ||
| 42 | + }; | ||
| 43 | + }, | ||
| 44 | + created() { | ||
| 45 | + document.title = "唐元集公众号"; | ||
| 46 | + this.id = this.$route.query.id; | ||
| 47 | + console.log(this.id); | ||
| 48 | + document.title = "唐元集公众号"; | ||
| 49 | + let that = this; | ||
| 50 | + let date = new Date(); | ||
| 51 | + let year = date.getFullYear(); | ||
| 52 | + let month = date.getMonth() + 1; | ||
| 53 | + if (month < 10) { | ||
| 54 | + month = "0" + month; | ||
| 55 | + } | ||
| 56 | + let day = date.getDate(); | ||
| 57 | + if (day < 10) { | ||
| 58 | + day = "0" + day; | ||
| 17 | } | 59 | } |
| 60 | + let datek = year + "-" + month; | ||
| 61 | + this.chuandate = datek; | ||
| 62 | + this.getact(); | ||
| 18 | }, | 63 | }, |
| 19 | methods: { | 64 | methods: { |
| 20 | - formatDate(date) { | ||
| 21 | - return `${date.getMonth() + 1}/${date.getDate()}`; | 65 | + changeDate(data) { |
| 66 | + console.log(data); //左右点击切换月份 | ||
| 67 | + var date1 = data; | ||
| 68 | + date1 = date1.split("/"); | ||
| 69 | + if (date1[1] < 10) { | ||
| 70 | + date1[1] = "0" + date1[1]; | ||
| 71 | + } | ||
| 72 | + date1 = date1[0] + "-" + date1[1]; | ||
| 73 | + console.log(date1); | ||
| 74 | + this.chuandate = date1; | ||
| 75 | + this.getact(); | ||
| 22 | }, | 76 | }, |
| 23 | - onConfirm(date) { | ||
| 24 | - this.show = false; | ||
| 25 | - this.date = this.formatDate(date); | 77 | + back() { |
| 78 | + this.$router.go(-1); | ||
| 26 | }, | 79 | }, |
| 80 | + getact() { | ||
| 81 | + let that = this; | ||
| 82 | + var url = "/api/activity/activity_list"; | ||
| 83 | + let param = { | ||
| 84 | + date: that.chuandate | ||
| 85 | + }; | ||
| 86 | + | ||
| 87 | + that.$axios | ||
| 88 | + .post(url, param) | ||
| 89 | + .then(function (res) { | ||
| 90 | + console.log(res); | ||
| 91 | + that.banner = res.data.activity; | ||
| 92 | + that.arr2 = res.data.date_arr; | ||
| 93 | + let date = res.data.date; | ||
| 94 | + console.log(date); | ||
| 95 | + let arr = []; | ||
| 96 | + date.forEach(function (value, index, array) { | ||
| 97 | + if (value[1] < 10) { | ||
| 98 | + value[1] = "0" + Number(value[1] - 1).toString(); | ||
| 99 | + } else { | ||
| 100 | + value[1] = Number(value[1] - 1).toString(); | ||
| 101 | + } | ||
| 102 | + arr.push(new Date(value[0], value[1], value[2])); | ||
| 103 | + that.datemo = arr; | ||
| 104 | + }); | ||
| 105 | + }) | ||
| 106 | + .catch(function (err) { | ||
| 107 | + console.log(err); | ||
| 108 | + }); | ||
| 109 | + }, | ||
| 110 | + actdetail(item) { | ||
| 111 | + this.$router.push({ | ||
| 112 | + path: "/activitydetail", | ||
| 113 | + query: { | ||
| 114 | + id: item.id | ||
| 115 | + } | ||
| 116 | + }); | ||
| 117 | + } | ||
| 27 | } | 118 | } |
| 28 | -} | 119 | +}; |
| 29 | </script> | 120 | </script> |
| 30 | 121 | ||
| 31 | -<style> | ||
| 32 | -</style> | ||
| 122 | +<style scoped> | ||
| 123 | +.active { | ||
| 124 | + height: auto !important; | ||
| 125 | +} | ||
| 126 | +#app { | ||
| 127 | + height: auto !important; | ||
| 128 | +} | ||
| 129 | +.container { | ||
| 130 | + height: 100%; | ||
| 131 | +} | ||
| 132 | +/* @import "../../../style/activity.css"; */ | ||
| 133 | +.actlist { | ||
| 134 | + margin-top: 8.2rem; | ||
| 135 | +} | ||
| 136 | +.spring { | ||
| 137 | + width: 6.86rem; | ||
| 138 | + height: 2.88rem; | ||
| 139 | + margin: 0 auto 0.32rem; | ||
| 140 | +} | ||
| 141 | +.calendarbox { | ||
| 142 | + position: relative; | ||
| 143 | +} | ||
| 144 | +.calendarfixed { | ||
| 145 | + width: 100%; | ||
| 146 | + height: 5.5rem; | ||
| 147 | + position: absolute; | ||
| 148 | + top: 1rem; | ||
| 149 | + left: 0; | ||
| 150 | + background: transparent; | ||
| 151 | +} | ||
| 152 | +.acttop { | ||
| 153 | + position: fixed; | ||
| 154 | + top: 0; | ||
| 155 | + left: 0; | ||
| 156 | + background: #fff; | ||
| 157 | +} | ||
| 158 | +</style> |
| @@ -11,58 +11,65 @@ | @@ -11,58 +11,65 @@ | ||
| 11 | type="text" | 11 | type="text" |
| 12 | placeholder="搜索你感兴趣的课程文章" | 12 | placeholder="搜索你感兴趣的课程文章" |
| 13 | class="searchtext" | 13 | class="searchtext" |
| 14 | + @click="entersearch" | ||
| 14 | /> | 15 | /> |
| 15 | </div> | 16 | </div> |
| 16 | </div> | 17 | </div> |
| 17 | <!-- 课程列表 --> | 18 | <!-- 课程列表 --> |
| 18 | - <div class="courseitem flex"> | ||
| 19 | - <div class="courseimg"> | ||
| 20 | - <img src="../../../assets/courseimg.png" alt /> | ||
| 21 | - </div> | ||
| 22 | - <div class="courseright"> | ||
| 23 | - <div class="coursetitle">关于减肥，除了科学运动</div> | ||
| 24 | - <div class="zhibo flexone"> | ||
| 25 | - <img src="../../../assets/zhibo.png" alt class="zhiimg" /> | ||
| 26 | - <div class="zhiname">正在直播</div> | 19 | + <div class="courseitemk"> |
| 20 | + <div class="courseitem flex" v-if="now != null" @click="zhibodetail(now)"> | ||
| 21 | + <div class="courseimg"> | ||
| 22 | + <img :src="now.image" alt /> | ||
| 27 | </div> | 23 | </div> |
| 28 | - <div class="know flexone"> | ||
| 29 | - <span class="morepeople">很多人不能正确理解减肥</span> | ||
| 30 | - <div class="knowmore"> | ||
| 31 | - 了解详情 | ||
| 32 | - <img src="../../../assets/yourow.png" alt class="yourow" /> | 24 | + <div class="courseright"> |
| 25 | + <div class="coursetitlek">{{ now.title }}</div> | ||
| 26 | + <div class="zhibok flexone"> | ||
| 27 | + <img src="../../../assets/zhibo.png" alt class="zhiimg" /> | ||
| 28 | + <div class="zhiname">正在直播</div> | ||
| 29 | + </div> | ||
| 30 | + <div class="know flexone"> | ||
| 31 | + <span class="morepeople">{{ now.description }}</span> | ||
| 32 | + <div class="knowmore"> | ||
| 33 | + 了解详情 | ||
| 34 | + <img src="../../../assets/yourow.png" alt class="yourow" /> | ||
| 35 | + </div> | ||
| 33 | </div> | 36 | </div> |
| 34 | </div> | 37 | </div> |
| 35 | </div> | 38 | </div> |
| 36 | - </div> | ||
| 37 | - <div class="courseitem flex"> | ||
| 38 | - <div class="courseimg"> | ||
| 39 | - <img src="../../../assets/courseimg.png" alt /> | ||
| 40 | - </div> | ||
| 41 | - <div class="courseright"> | ||
| 42 | - <div class="coursetitle">关于减肥，除了科学运动</div> | ||
| 43 | - <div class="zhibo flexone"> | ||
| 44 | - <img src="../../../assets/ready.png" alt class="zhiimg" /> | ||
| 45 | - <div class="zhiname">正在直播</div> | 39 | + <div |
| 40 | + class="courseitem flex" | ||
| 41 | + v-if="next != null" | ||
| 42 | + @click="zhibodetail(next)" | ||
| 43 | + > | ||
| 44 | + <div class="courseimg"> | ||
| 45 | + <img :src="next.image" alt /> | ||
| 46 | </div> | 46 | </div> |
| 47 | - <div class="know flexone"> | ||
| 48 | - <span class="morepeople">很多人不能正确理解减肥</span> | ||
| 49 | - <div class="knowmore"> | ||
| 50 | - 了解详情 | ||
| 51 | - <img src="../../../assets/yourow.png" alt class="yourow" /> | 47 | + <div class="courseright"> |
| 48 | + <div class="coursetitlek">{{ next.title }}</div> | ||
| 49 | + <div class="zhibok flexone"> | ||
| 50 | + <img src="../../../assets/ready.png" alt class="zhiimg" /> | ||
| 51 | + <div class="zhiname">{{ next.start_time }}准时开课</div> | ||
| 52 | + </div> | ||
| 53 | + <div class="know flexone"> | ||
| 54 | + <span class="morepeople">{{ next.description }}</span> | ||
| 55 | + <div class="knowmore"> | ||
| 56 | + 了解详情 | ||
| 57 | + <img src="../../../assets/yourow.png" alt class="yourow" /> | ||
| 58 | + </div> | ||
| 52 | </div> | 59 | </div> |
| 53 | </div> | 60 | </div> |
| 54 | </div> | 61 | </div> |
| 55 | </div> | 62 | </div> |
| 56 | 63 | ||
| 57 | <!-- 课程头部 --> | 64 | <!-- 课程头部 --> |
| 58 | - <div class="coursenav flexone"> | 65 | + <div class="coursenavkkk flexone"> |
| 59 | <div | 66 | <div |
| 60 | class="coursenavleft" | 67 | class="coursenavleft" |
| 61 | :class="selnav == 0 ? 'selactive' : ''" | 68 | :class="selnav == 0 ? 'selactive' : ''" |
| 62 | :data-id="0" | 69 | :data-id="0" |
| 63 | @click="selectnav" | 70 | @click="selectnav" |
| 64 | > | 71 | > |
| 65 | - 音频课程 | 72 | + 唐元集课程 |
| 66 | </div> | 73 | </div> |
| 67 | <div | 74 | <div |
| 68 | class="coursenavleft" | 75 | class="coursenavleft" |
| @@ -73,25 +80,45 @@ | @@ -73,25 +80,45 @@ | ||
| 73 | 营养小知识 | 80 | 营养小知识 |
| 74 | </div> | 81 | </div> |
| 75 | </div> | 82 | </div> |
| 83 | + <div class="coursetop" v-if="selnav == 0"> | ||
| 84 | + <div class="coursenavleftkk flexone"> | ||
| 85 | + <div | ||
| 86 | + class="coursenavleftk" | ||
| 87 | + :class="navindex == index ? 'selactive' : ''" | ||
| 88 | + @click="selectnavsec(item.id, index)" | ||
| 89 | + v-for="(item, index) in cursekindlist" | ||
| 90 | + :key="index" | ||
| 91 | + > | ||
| 92 | + {{ item.name }} | ||
| 93 | + </div> | ||
| 94 | + </div> | ||
| 95 | + </div> | ||
| 96 | + <!-- <img src="../../../assets/youhua.png" class="youhua" alt /> --> | ||
| 97 | + | ||
| 76 | <!-- 课程 --> | 98 | <!-- 课程 --> |
| 77 | <div v-if="selnav == 0"> | 99 | <div v-if="selnav == 0"> |
| 78 | <div class="nodata" v-if="videolist.length == 0">暂无数据</div> | 100 | <div class="nodata" v-if="videolist.length == 0">暂无数据</div> |
| 79 | <van-list | 101 | <van-list |
| 80 | - class="courseboxk" | 102 | + class="courseboxkkk" |
| 81 | v-model="loading" | 103 | v-model="loading" |
| 82 | :finished="finished" | 104 | :finished="finished" |
| 83 | finished-text="没有更多了" | 105 | finished-text="没有更多了" |
| 84 | @load="onLoad" | 106 | @load="onLoad" |
| 85 | v-else | 107 | v-else |
| 86 | > | 108 | > |
| 87 | - <div class="courseboxitem" v-for="item in videolist" :key="item"> | 109 | + <div |
| 110 | + class="courseboxitem" | ||
| 111 | + v-for="(item, index) in videolist" | ||
| 112 | + :key="index" | ||
| 113 | + @click="coursedetail(item)" | ||
| 114 | + > | ||
| 88 | <div class="coursenameimg"> | 115 | <div class="coursenameimg"> |
| 89 | <img :src="item.image" alt /> | 116 | <img :src="item.image" alt /> |
| 90 | </div> | 117 | </div> |
| 91 | <div class="coursetext"> | 118 | <div class="coursetext"> |
| 92 | - <div class="coursetitle">{{ item.title }}</div> | 119 | + <div class="coursetitlek">{{ item.title }}</div> |
| 93 | <div class="coursename">{{ item.description }}</div> | 120 | <div class="coursename">{{ item.description }}</div> |
| 94 | - <div class="courseteacher">{{ item.user.nickname }}</div> | 121 | + <div class="courseteacher">讲师：{{ item.user.nickname }}</div> |
| 95 | </div> | 122 | </div> |
| 96 | </div> | 123 | </div> |
| 97 | </van-list> | 124 | </van-list> |
| @@ -118,13 +145,12 @@ | @@ -118,13 +145,12 @@ | ||
| 118 | <img :src="item.image" alt /> | 145 | <img :src="item.image" alt /> |
| 119 | </div> | 146 | </div> |
| 120 | <div class="coursetext"> | 147 | <div class="coursetext"> |
| 121 | - <div class="coursename knowlagename" v-html="item.content"></div> | 148 | + <div class="coursename knowlagename">{{ item.title }}</div> |
| 122 | </div> | 149 | </div> |
| 123 | </div> | 150 | </div> |
| 124 | </van-list> | 151 | </van-list> |
| 125 | </div> | 152 | </div> |
| 126 | <!-- 底部导航 --> | 153 | <!-- 底部导航 --> |
| 127 | - | ||
| 128 | <tabBar v-bind:active="0" /> | 154 | <tabBar v-bind:active="0" /> |
| 129 | </div> | 155 | </div> |
| 130 | </template> | 156 | </template> |
| @@ -132,7 +158,7 @@ | @@ -132,7 +158,7 @@ | ||
| 132 | <script> | 158 | <script> |
| 133 | import Vue from "vue"; | 159 | import Vue from "vue"; |
| 134 | import tabBar from "@/components/views/tabBar.vue"; | 160 | import tabBar from "@/components/views/tabBar.vue"; |
| 135 | -import { List } from "vant"; | 161 | +import { List, Toast } from "vant"; |
| 136 | Vue.use(List); | 162 | Vue.use(List); |
| 137 | export default { | 163 | export default { |
| 138 | components: { | 164 | components: { |
| @@ -150,13 +176,151 @@ export default { | @@ -150,13 +176,151 @@ export default { | ||
| 150 | yinglist: [], | 176 | yinglist: [], |
| 151 | videopage: 1, | 177 | videopage: 1, |
| 152 | this_page: "", | 178 | this_page: "", |
| 153 | - total_page: "" | 179 | + total_page: "", |
| 180 | + now: "", | ||
| 181 | + next: "", | ||
| 182 | + cursekindlist: [], | ||
| 183 | + navindex: 0, | ||
| 184 | + sort_id: '' | ||
| 154 | }; | 185 | }; |
| 155 | }, | 186 | }, |
| 156 | created() { | 187 | created() { |
| 157 | - this.getvideolist(); | 188 | + let that = this; |
| 189 | + document.title = "唐元集课堂"; | ||
| 190 | + let selnav = localStorage.getItem("selnav"); | ||
| 191 | + console.log(selnav) | ||
| 192 | + if (selnav) { | ||
| 193 | + this.selnav = selnav; | ||
| 194 | + if (this.selnav == 0) { | ||
| 195 | + that.total_page = ""; | ||
| 196 | + that.this_page = ""; | ||
| 197 | + that.videopage = 1; | ||
| 198 | + that.videolist = []; | ||
| 199 | + this.getvideolist(); | ||
| 200 | + localStorage.setItem("selnav", "") | ||
| 201 | + } else if (this.selnav == 1) { | ||
| 202 | + that.total_page = ""; | ||
| 203 | + that.this_page = ""; | ||
| 204 | + this.yinglist = []; | ||
| 205 | + that.videopage = 1; | ||
| 206 | + this.getyingyang(); | ||
| 207 | + } | ||
| 208 | + } else { | ||
| 209 | + this.getcourselist() | ||
| 210 | + } | ||
| 211 | + | ||
| 212 | + this.getindex(); | ||
| 213 | + this.getintence(); | ||
| 214 | + | ||
| 158 | }, | 215 | }, |
| 159 | methods: { | 216 | methods: { |
| 217 | + // 进入搜索页 | ||
| 218 | + entersearch() { | ||
| 219 | + this.$router.push({ | ||
| 220 | + path: "/searchcourse", | ||
| 221 | + query: { | ||
| 222 | + selnav: this.selnav | ||
| 223 | + } | ||
| 224 | + }); | ||
| 225 | + }, | ||
| 226 | + selectnavsec(id, index) { | ||
| 227 | + let that = this; | ||
| 228 | + | ||
| 229 | + this.navindex = index; | ||
| 230 | + this.sort_id = id; | ||
| 231 | + that.videopage = 1; | ||
| 232 | + that.videolist = []; | ||
| 233 | + that.getvideolist(); | ||
| 234 | + }, | ||
| 235 | + // 获取课程分类 | ||
| 236 | + getcourselist() { | ||
| 237 | + let that = this; | ||
| 238 | + let url = '/api/index/sort' | ||
| 239 | + let param = { | ||
| 240 | + | ||
| 241 | + }; | ||
| 242 | + | ||
| 243 | + that.$axios | ||
| 244 | + .post(url, param) | ||
| 245 | + .then(function (res) { | ||
| 246 | + console.log(res); | ||
| 247 | + that.cursekindlist = res.data; | ||
| 248 | + that.sort_id = res.data[0].id | ||
| 249 | + that.getvideolist(); | ||
| 250 | + }) | ||
| 251 | + .catch(function (err) { | ||
| 252 | + console.log(err); | ||
| 253 | + | ||
| 254 | + }); | ||
| 255 | + }, | ||
| 256 | + | ||
| 257 | + getintence() { | ||
| 258 | + let that = this | ||
| 259 | + console.log(99999) | ||
| 260 | + var result = "" | ||
| 261 | + | ||
| 262 | + var url = "/api/user/intended"; | ||
| 263 | + let param = {}; | ||
| 264 | + that.$axios | ||
| 265 | + .post(url, param) | ||
| 266 | + .then(function (res) { | ||
| 267 | + console.log(res); | ||
| 268 | + result = res.data | ||
| 269 | + localStorage.setItem("intended", JSON.stringify(res.data.intended)) | ||
| 270 | + }) | ||
| 271 | + .catch(function (err) { | ||
| 272 | + console.log(err); | ||
| 273 | + }); | ||
| 274 | + | ||
| 275 | + }, | ||
| 276 | + // 获取首页接口 | ||
| 277 | + getindex() { | ||
| 278 | + let that = this; | ||
| 279 | + var url = "/api/index/index"; | ||
| 280 | + let param = {}; | ||
| 281 | + | ||
| 282 | + that.$axios | ||
| 283 | + .get(url, param) | ||
| 284 | + .then(function (res) { | ||
| 285 | + console.log(res); | ||
| 286 | + that.now = res.data.now; | ||
| 287 | + that.next = res.data.next; | ||
| 288 | + }) | ||
| 289 | + .catch(function (err) { | ||
| 290 | + console.log(err); | ||
| 291 | + }); | ||
| 292 | + }, | ||
| 293 | + // 进入直播详情 | ||
| 294 | + zhibodetail(item) { | ||
| 295 | + console.log(item.allow_join) | ||
| 296 | + this.$router.push({ | ||
| 297 | + path: '/userzhibo', | ||
| 298 | + query: { | ||
| 299 | + id: item.id | ||
| 300 | + } | ||
| 301 | + }) | ||
| 302 | + if (item.allow_join != undefined) { | ||
| 303 | + if (item.allow_join == 1) { | ||
| 304 | + this.$router.push({ | ||
| 305 | + path: '/userzhibo', | ||
| 306 | + query: { | ||
| 307 | + id: item.id | ||
| 308 | + } | ||
| 309 | + }) | ||
| 310 | + } else { | ||
| 311 | + Toast("还没开课,请耐心等待") | ||
| 312 | + } | ||
| 313 | + | ||
| 314 | + } else { | ||
| 315 | + this.$router.push({ | ||
| 316 | + path: '/userzhibo', | ||
| 317 | + query: { | ||
| 318 | + id: item.id | ||
| 319 | + } | ||
| 320 | + }) | ||
| 321 | + } | ||
| 322 | + | ||
| 323 | + }, | ||
| 160 | // 视频上拉加载 | 324 | // 视频上拉加载 |
| 161 | onLoad() { | 325 | onLoad() { |
| 162 | let that = this; | 326 | let that = this; |
| @@ -174,6 +338,8 @@ export default { | @@ -174,6 +338,8 @@ export default { | ||
| 174 | // 加载状态结束 | 338 | // 加载状态结束 |
| 175 | this.loading = false; | 339 | this.loading = false; |
| 176 | // 数据全部加载完成 | 340 | // 数据全部加载完成 |
| 341 | + console.log(that.this_page) | ||
| 342 | + console.log(that.total_page) | ||
| 177 | if (that.this_page == that.total_page) { | 343 | if (that.this_page == that.total_page) { |
| 178 | this.finished = true; | 344 | this.finished = true; |
| 179 | } | 345 | } |
| @@ -208,6 +374,7 @@ export default { | @@ -208,6 +374,7 @@ export default { | ||
| 208 | let that = this; | 374 | let that = this; |
| 209 | var url = "/api/index/lesson_list"; | 375 | var url = "/api/index/lesson_list"; |
| 210 | let param = { | 376 | let param = { |
| 377 | + sort_id: that.sort_id, | ||
| 211 | page: that.videopage | 378 | page: that.videopage |
| 212 | }; | 379 | }; |
| 213 | 380 | ||
| @@ -258,16 +425,28 @@ export default { | @@ -258,16 +425,28 @@ export default { | ||
| 258 | query: { id: id } | 425 | query: { id: id } |
| 259 | }); | 426 | }); |
| 260 | }, | 427 | }, |
| 428 | + // 录播详情 | ||
| 429 | + coursedetail(item) { | ||
| 430 | + this.$router.push({ | ||
| 431 | + path: "/lubodetail", | ||
| 432 | + query: { | ||
| 433 | + id: item.id | ||
| 434 | + } | ||
| 435 | + }); | ||
| 436 | + }, | ||
| 437 | + | ||
| 261 | selectnav(e) { | 438 | selectnav(e) { |
| 262 | let that = this; | 439 | let that = this; |
| 263 | this.selnav = e.currentTarget.dataset.id; | 440 | this.selnav = e.currentTarget.dataset.id; |
| 441 | + localStorage.setItem("selnav", this.selnav) | ||
| 264 | console.log(this.selnav); | 442 | console.log(this.selnav); |
| 265 | if (this.selnav == 0) { | 443 | if (this.selnav == 0) { |
| 266 | that.total_page = ""; | 444 | that.total_page = ""; |
| 267 | that.this_page = ""; | 445 | that.this_page = ""; |
| 268 | that.videopage = 1; | 446 | that.videopage = 1; |
| 269 | that.videolist = []; | 447 | that.videolist = []; |
| 270 | - this.getvideolist(); | 448 | + |
| 449 | + this.getcourselist() | ||
| 271 | } else if (this.selnav == 1) { | 450 | } else if (this.selnav == 1) { |
| 272 | that.total_page = ""; | 451 | that.total_page = ""; |
| 273 | that.this_page = ""; | 452 | that.this_page = ""; |
| @@ -282,4 +461,43 @@ export default { | @@ -282,4 +461,43 @@ export default { | ||
| 282 | 461 | ||
| 283 | <style scoped> | 462 | <style scoped> |
| 284 | @import "../../../style/course.css"; | 463 | @import "../../../style/course.css"; |
| 464 | +.coursetop { | ||
| 465 | + width: 100%; | ||
| 466 | + background: #fff; | ||
| 467 | +} | ||
| 468 | +.coursetitlek { | ||
| 469 | + color: #02170b; | ||
| 470 | + font-size: 0.32rem; | ||
| 471 | + margin-bottom: 0.12rem; | ||
| 472 | +} | ||
| 473 | +.coursenavleftk { | ||
| 474 | + color: #b5bfba; | ||
| 475 | + font-size: 0.28rem; | ||
| 476 | + text-align: center; | ||
| 477 | + flex: 0 0 auto; | ||
| 478 | + margin-right: 0.52rem; | ||
| 479 | +} | ||
| 480 | +.coursenavleftkk { | ||
| 481 | + width: 6.86rem; | ||
| 482 | + padding: 0.24rem 0; | ||
| 483 | + box-sizing: border-box; | ||
| 484 | + margin: 0 auto; | ||
| 485 | + overflow-x: scroll; | ||
| 486 | +} | ||
| 487 | +.selactive { | ||
| 488 | + position: relative; | ||
| 489 | + color: #599158; | ||
| 490 | +} | ||
| 491 | + | ||
| 492 | +.selactive::after { | ||
| 493 | + display: block; | ||
| 494 | + content: ""; | ||
| 495 | + width: 0.4rem; | ||
| 496 | + height: 0.02rem; | ||
| 497 | + background: #599158; | ||
| 498 | + position: absolute; | ||
| 499 | + bottom: -0.2rem; | ||
| 500 | + left: 50%; | ||
| 501 | + transform: translateX(-50%); | ||
| 502 | +} | ||
| 285 | </style> | 503 | </style> |
src/components/views/course/lubodetail.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <!-- :style="{'height':height+'px'}" --> | ||
| 3 | + <!-- style="height:600px" --> | ||
| 4 | + <!-- --> | ||
| 5 | + <div class="container" refs="message" id="targetbox"> | ||
| 6 | + <div class="sharetop flextwo" @click="back"> | ||
| 7 | + <div class="leftrow"> | ||
| 8 | + <img src="../../../assets/leftrow.png" alt /> | ||
| 9 | + </div> | ||
| 10 | + <div class="sharemiddle">{{ coursetitle }}</div> | ||
| 11 | + <div class="sharebtn" @click.stop="collect"> | ||
| 12 | + {{ is_favorite }} | ||
| 13 | + <img src="../../../assets/starkong.png" v-if="is_favorite == 0" alt /> | ||
| 14 | + <img src="../../../assets/star.png" v-else alt /> | ||
| 15 | + </div> | ||
| 16 | + </div> | ||
| 17 | + | ||
| 18 | + <div class="nodata" v-if="recordlist.length == 0">暂无聊天记录</div> | ||
| 19 | + <van-pull-refresh | ||
| 20 | + v-model="isLoading" | ||
| 21 | + @refresh="onRefresh" | ||
| 22 | + class="messagelist" | ||
| 23 | + style="height: 100%" | ||
| 24 | + id="messagebox" | ||
| 25 | + v-else | ||
| 26 | + > | ||
| 27 | + <!-- <div v-clipboard:copy="serverId" v-clipboard:success="onCopy">复制</div> --> | ||
| 28 | + <!-- <p>刷新次数: {{ count }}</p> --> | ||
| 29 | + | ||
| 30 | + <!-- <div class="wifi-symbol"> | ||
| 31 | + <div class="wifi-circle first"></div> | ||
| 32 | + <div class="wifi-circle second"></div> | ||
| 33 | + <div class="wifi-circle third"></div> | ||
| 34 | + </div>--> | ||
| 35 | + <!-- <div class="voice"> | ||
| 36 | + <div class="bg voicePlay"></div> | ||
| 37 | + </div>--> | ||
| 38 | + | ||
| 39 | + <div> | ||
| 40 | + <div v-for="(item, index) in recordlist" :key="index"> | ||
| 41 | + <div class="messageitem flex" v-if="item.user_id != user_id"> | ||
| 42 | + <div class="messageitemleft"> | ||
| 43 | + <img :src="item.avatar" alt /> | ||
| 44 | + </div> | ||
| 45 | + <div class="messageitemright" v-if="item.type == 1"> | ||
| 46 | + <div class="messagecontent">{{ item.data }}</div> | ||
| 47 | + </div> | ||
| 48 | + | ||
| 49 | + <div | ||
| 50 | + class="messageitemright imgright" | ||
| 51 | + v-if="item.type == 2" | ||
| 52 | + @click="previewimg(item.data)" | ||
| 53 | + > | ||
| 54 | + <div class="messagecontent"> | ||
| 55 | + <div class="contentimg"> | ||
| 56 | + <img :src="item.data" alt /> | ||
| 57 | + </div> | ||
| 58 | + </div> | ||
| 59 | + </div> | ||
| 60 | + | ||
| 61 | + <div class="messageitemright" v-if="item.type == 3"> | ||
| 62 | + <div | ||
| 63 | + class="messagecontent" | ||
| 64 | + :style="{ width: 1.7 + 'rem' }" | ||
| 65 | + v-if="item.times > 0 && item.times < 5" | ||
| 66 | + @click="audioplay(item, index)" | ||
| 67 | + > | ||
| 68 | + <div class="voice"> | ||
| 69 | + <div | ||
| 70 | + class="bg" | ||
| 71 | + :class="item.sel == true ? 'voicePlay' : ''" | ||
| 72 | + ></div> | ||
| 73 | + <div class="miaoshuk">{{ item.times }}'</div> | ||
| 74 | + </div> | ||
| 75 | + </div> | ||
| 76 | + <div | ||
| 77 | + class="messagecontent" | ||
| 78 | + :style="{ width: 2 + 'rem' }" | ||
| 79 | + v-if="item.times >= 5 && item.times < 15" | ||
| 80 | + @click="audioplay(item, index)" | ||
| 81 | + > | ||
| 82 | + <div class="voice"> | ||
| 83 | + <div | ||
| 84 | + class="bg" | ||
| 85 | + :class="item.sel == true ? 'voicePlay' : ''" | ||
| 86 | + ></div> | ||
| 87 | + <div class="miaoshuk">{{ item.times }}'</div> | ||
| 88 | + </div> | ||
| 89 | + </div> | ||
| 90 | + <div | ||
| 91 | + class="messagecontent" | ||
| 92 | + :style="{ width: 4.5 + 'rem' }" | ||
| 93 | + v-if="item.times >= 15" | ||
| 94 | + @click="audioplay(item, index)" | ||
| 95 | + > | ||
| 96 | + <div class="voice"> | ||
| 97 | + <div | ||
| 98 | + class="bg" | ||
| 99 | + :class="item.sel == true ? 'voicePlay' : ''" | ||
| 100 | + ></div> | ||
| 101 | + <div class="miaoshuk">{{ item.times }}'</div> | ||
| 102 | + </div> | ||
| 103 | + </div> | ||
| 104 | + </div> | ||
| 105 | + </div> | ||
| 106 | + | ||
| 107 | + <div | ||
| 108 | + class="messageitem messageitemk flex" | ||
| 109 | + v-if="item.user_id == user_id" | ||
| 110 | + :id="item.idkk" | ||
| 111 | + > | ||
| 112 | + <div class="messageitemrightk" v-if="item.type == 1"> | ||
| 113 | + <div class="messagecontentk">{{ item.data }}</div> | ||
| 114 | + </div> | ||
| 115 | + | ||
| 116 | + <div | ||
| 117 | + class="messageitemrightk" | ||
| 118 | + v-if="item.type == 2" | ||
| 119 | + @click="previewimg(item.data)" | ||
| 120 | + > | ||
| 121 | + <div class="messagecontentk"> | ||
| 122 | + <div class="contentimg"> | ||
| 123 | + <img :src="item.data" alt /> | ||
| 124 | + </div> | ||
| 125 | + </div> | ||
| 126 | + </div> | ||
| 127 | + <!-- v-clipboard:copy="that.serverId" | ||
| 128 | + v-clipboard:success="onCopy"--> | ||
| 129 | + <div class="messageitemrightk" v-if="item.type == 3"> | ||
| 130 | + <div | ||
| 131 | + class="messagecontentk yuyink" | ||
| 132 | + :style="{ width: 1 + 'rem' }" | ||
| 133 | + v-if="item.times > 0 && item.times < 5" | ||
| 134 | + @click="audioplay(item, index)" | ||
| 135 | + > | ||
| 136 | + <div class="voice voiceright"> | ||
| 137 | + <div | ||
| 138 | + class="bg" | ||
| 139 | + :class="item.sel == true ? 'voicePlay' : ''" | ||
| 140 | + ></div> | ||
| 141 | + <div class="miaoshu">{{ item.times }}'</div> | ||
| 142 | + </div> | ||
| 143 | + </div> | ||
| 144 | + <div | ||
| 145 | + class="messagecontentk yuyink" | ||
| 146 | + :style="{ width: 2 + 'rem' }" | ||
| 147 | + v-if="item.times >= 5 && item.times < 15" | ||
| 148 | + @click="audioplay(item, index)" | ||
| 149 | + > | ||
| 150 | + <div class="voice voiceright"> | ||
| 151 | + <div | ||
| 152 | + class="bg" | ||
| 153 | + :class="item.sel == true ? 'voicePlay' : ''" | ||
| 154 | + ></div> | ||
| 155 | + <div class="miaoshu">{{ item.times }}'</div> | ||
| 156 | + </div> | ||
| 157 | + </div> | ||
| 158 | + <div | ||
| 159 | + class="messagecontentk yuyink" | ||
| 160 | + :style="{ width: 4.5 + 'rem' }" | ||
| 161 | + v-if="item.times >= 15" | ||
| 162 | + @click="audioplay(item, index)" | ||
| 163 | + > | ||
| 164 | + <div class="voice voiceright"> | ||
| 165 | + <div | ||
| 166 | + class="bg" | ||
| 167 | + :class="item.sel == true ? 'voicePlay' : ''" | ||
| 168 | + ></div> | ||
| 169 | + <div class="miaoshu">{{ item.times }}'</div> | ||
| 170 | + </div> | ||
| 171 | + </div> | ||
| 172 | + </div> | ||
| 173 | + | ||
| 174 | + <div class="messageitemleftk"> | ||
| 175 | + <img :src="item.avatar" alt /> | ||
| 176 | + </div> | ||
| 177 | + </div> | ||
| 178 | + </div> | ||
| 179 | + </div> | ||
| 180 | + </van-pull-refresh> | ||
| 181 | + | ||
| 182 | + <!-- 底部导航 --> | ||
| 183 | + | ||
| 184 | + <!-- <div class="messagebot messagebotkk flexone" v-if="is_self == 0 && isbot == true"> | ||
| 185 | + <div class="messagebotleft"> | ||
| 186 | + <img src="../../../assets/yuyin.png" alt /> | ||
| 187 | + </div> | ||
| 188 | + <div class="writermessage"> | ||
| 189 | + <input type="text" placeholder="写留言" @input="entertext" :value="text" /> | ||
| 190 | + </div> | ||
| 191 | + <div class="sendk" @click="send">发送</div> | ||
| 192 | + </div> | ||
| 193 | + <div v-if="is_self == 1"> | ||
| 194 | + <div class="messagebot messagebotkk flexone" v-if="sendword"> | ||
| 195 | + <div class="messagebotleft" @click="changeword"> | ||
| 196 | + <img src="../../../assets/yuyin.png" alt /> | ||
| 197 | + </div> | ||
| 198 | + <div class="writermessage"> | ||
| 199 | + <input type="text" placeholder="写留言" @input="entertext" :value="text" /> | ||
| 200 | + </div> | ||
| 201 | + <div class="sendk" @click="send">发送</div> | ||
| 202 | + </div> | ||
| 203 | + <div class="messagebot messagebotk flextwo" v-else> | ||
| 204 | + <img src="../../../assets/yuyin.png" alt class="zhibobtn" @click="changeword" /> | ||
| 205 | + <img src="../../../assets/pic.png" alt class="zhibobtn" @click="choseimg" /> | ||
| 206 | + <img src="../../../assets/luyin.png" alt class="yuyinbtn" @click="yuyin" /> | ||
| 207 | + <img src="../../../assets/shangchuan.png" alt class="zhibobtn" /> | ||
| 208 | + <img src="../../../assets/kaiguan.png" alt class="zhibobtn" @click="stopbtn" /> | ||
| 209 | + </div> | ||
| 210 | + </div> | ||
| 211 | + <div class="manypeople"> | ||
| 212 | + <img src="../../../assets/manypeople.png" alt class="manypeopleimg" /> | ||
| 213 | + {{ group_count }} | ||
| 214 | + </div>--> | ||
| 215 | + | ||
| 216 | + <!-- 直播结束了 --> | ||
| 217 | + <!-- <div class="register" v-if="iszhibo"> | ||
| 218 | + <div class="zhiboover"> | ||
| 219 | + <div class="zhibovoertop">本次直播内容同步保存到录播</div> | ||
| 220 | + <div class="zhiboque" @click="overvideo">同步到录音并结束</div> | ||
| 221 | + </div> | ||
| 222 | + </div> | ||
| 223 | + <div class="register" v-if="showtips"> | ||
| 224 | + <div class="zhiboover"> | ||
| 225 | + <div class="zhibovoertop">来早了，还没到开课时间</div> | ||
| 226 | + <div class="zhiboque" @click="suretips">确定</div> | ||
| 227 | + </div> | ||
| 228 | + </div>--> | ||
| 229 | + | ||
| 230 | + <!-- 上传成功 --> | ||
| 231 | + <div class="register" v-if="issuccess"> | ||
| 232 | + <div class="zhiboover"> | ||
| 233 | + <div class="zhibovoertop"> | ||
| 234 | + <img src="../../../assets/upsuccess.png" alt class="successimg" /> | ||
| 235 | + <div class="successname">上传成功</div> | ||
| 236 | + </div> | ||
| 237 | + <div class="zhiboque" @click="sureup">确认</div> | ||
| 238 | + </div> | ||
| 239 | + </div> | ||
| 240 | + <!-- 开始录制 --> | ||
| 241 | + <div class="register" style="z-index: 999" v-if="beginlushow" @click="hide"> | ||
| 242 | + <div class="luwrap" @click.stop="beginluyin"> | ||
| 243 | + <div class="beginlu">开始录制</div> | ||
| 244 | + <div> | ||
| 245 | + <img src="../../../assets/beginlu.png" alt class="beginluimg" /> | ||
| 246 | + </div> | ||
| 247 | + </div> | ||
| 248 | + </div> | ||
| 249 | + | ||
| 250 | + <!-- 正在录制 --> | ||
| 251 | + <div class="register" style="z-index: 999" v-if="zhengzailu" @click="hide"> | ||
| 252 | + <div class="luwrap" @click.stop="finishluyin"> | ||
| 253 | + <div class="beginlu">正在录音：{{ time }}'</div> | ||
| 254 | + <div> | ||
| 255 | + <img src="../../../assets/zhengzailu.png" alt class="beginluimg" /> | ||
| 256 | + </div> | ||
| 257 | + </div> | ||
| 258 | + </div> | ||
| 259 | + | ||
| 260 | + <!-- 录制完成 --> | ||
| 261 | + <div class="register" style="z-index: 999" v-if="luprocess" @click="hide"> | ||
| 262 | + <div class="luwrap"> | ||
| 263 | + <div class="beginlu">录音时长：{{ time }}'</div> | ||
| 264 | + <div class="flextwo chonglu"> | ||
| 265 | + <div class="relu" @click="resetlu">重录</div> | ||
| 266 | + <div class="send" @click.stop="sendyuyin">发送</div> | ||
| 267 | + <div class="relu" @click.stop="shiting">试听</div> | ||
| 268 | + </div> | ||
| 269 | + </div> | ||
| 270 | + </div> | ||
| 271 | + | ||
| 272 | + <!-- 温馨提示 --> | ||
| 273 | + <div class="register" style="z-index: 999" v-if="chonglushow"> | ||
| 274 | + <div class="wentipswrap"> | ||
| 275 | + <div class="tipsname">温馨提示</div> | ||
| 276 | + <div class="waittips">您确认舍弃该录音重新录制吗</div> | ||
| 277 | + <div class="waitbot flexone"> | ||
| 278 | + <div class="waitbotleft">取消</div> | ||
| 279 | + <div class="waitbotlright">重录</div> | ||
| 280 | + </div> | ||
| 281 | + </div> | ||
| 282 | + </div> | ||
| 283 | + <!-- 本次录音是否上传 --> | ||
| 284 | + | ||
| 285 | + <div class="register" style="z-index: 999" v-if="shanghcuanshow"> | ||
| 286 | + <div class="wentipswrap"> | ||
| 287 | + <div class="waittips benci">本次录音是否上传</div> | ||
| 288 | + <div class="waitbot flexone"> | ||
| 289 | + <div class="waitbotleft" @click="hideshangchuan">直接结束</div> | ||
| 290 | + <div class="waitbotlright" @click="shangyuyin">上传录音</div> | ||
| 291 | + </div> | ||
| 292 | + </div> | ||
| 293 | + </div> | ||
| 294 | + | ||
| 295 | + <!-- 是否结束录播 --> | ||
| 296 | + <div class="register" style="z-index: 999" v-if="overzhibo"> | ||
| 297 | + <div class="wentipswrap"> | ||
| 298 | + <div class="waittips benci">是否结束直播</div> | ||
| 299 | + <div class="waitbot flexone"> | ||
| 300 | + <div class="waitbotleft" @click="canclesure">取消</div> | ||
| 301 | + <div class="waitbotlright" @click="surezhibo">结束</div> | ||
| 302 | + </div> | ||
| 303 | + </div> | ||
| 304 | + </div> | ||
| 305 | + </div> | ||
| 306 | +</template> | ||
| 307 | + | ||
| 308 | +<script> | ||
| 309 | +import wx from "jweixin-1.6.0"; | ||
| 310 | +import Vue from "vue"; | ||
| 311 | +import { PullRefresh, Toast } from "vant"; | ||
| 312 | +Vue.use(PullRefresh); | ||
| 313 | +Vue.use(Toast); | ||
| 314 | +var timer = null; | ||
| 315 | +export default { | ||
| 316 | + data() { | ||
| 317 | + return { | ||
| 318 | + iszhibo: false, | ||
| 319 | + issuccess: false, | ||
| 320 | + beginlushow: false, | ||
| 321 | + luprocess: false, | ||
| 322 | + chonglushow: false, | ||
| 323 | + shanghcuanshow: false, | ||
| 324 | + zhengzailu: false, | ||
| 325 | + overzhibo: false, | ||
| 326 | + id: "", | ||
| 327 | + is_self: "", | ||
| 328 | + user_id: "", | ||
| 329 | + showtips: false, | ||
| 330 | + sendword: false, | ||
| 331 | + text: "", | ||
| 332 | + isbot: false, | ||
| 333 | + time: 1, | ||
| 334 | + localId: "", | ||
| 335 | + serverId: "", | ||
| 336 | + number: 0, | ||
| 337 | + group_count: "", | ||
| 338 | + // 直播列表 | ||
| 339 | + page: 1, | ||
| 340 | + this_page: '', | ||
| 341 | + total_page: '', | ||
| 342 | + isLoading: false, | ||
| 343 | + recordlist: [], | ||
| 344 | + baseurl: "", | ||
| 345 | + height: '', | ||
| 346 | + hei: '600px', | ||
| 347 | + target: '', | ||
| 348 | + yuyintype: '', | ||
| 349 | + stopurl: '', | ||
| 350 | + stopindex: 0, | ||
| 351 | + coursetitle: "", | ||
| 352 | + playlocalid: '', | ||
| 353 | + is_favorite: 0 | ||
| 354 | + }; | ||
| 355 | + }, | ||
| 356 | + created() { | ||
| 357 | + | ||
| 358 | + // 获取个人中心 | ||
| 359 | + this.getuserinfo() | ||
| 360 | + // alert(location.host) | ||
| 361 | + this.baseurl = 'http://' + location.host | ||
| 362 | + let div = this.$refs["message-list"]; | ||
| 363 | + | ||
| 364 | + // alert(1111) | ||
| 365 | + // alert(this.baseurl+ | ||
| 366 | + // "/redirect.html?shareRedirect=" + | ||
| 367 | + // encodeURIComponent(window.location.href)) | ||
| 368 | + document.title = "唐元集公众号"; | ||
| 369 | + this.id = this.$route.query.id; | ||
| 370 | + // 获取appid | ||
| 371 | + this.getappid(); | ||
| 372 | + this.getlubodetail(); | ||
| 373 | + this.initWebSocket(); | ||
| 374 | + // 获取直播列表 | ||
| 375 | + this.getzhibolist() | ||
| 376 | + | ||
| 377 | + }, | ||
| 378 | + mounted() { | ||
| 379 | + | ||
| 380 | + let that = this | ||
| 381 | + | ||
| 382 | + | ||
| 383 | + console.log(that.target, '99997878666') | ||
| 384 | + }, | ||
| 385 | + | ||
| 386 | + | ||
| 387 | + watch: { | ||
| 388 | + | ||
| 389 | + }, | ||
| 390 | + beforeRouteEnter(to, from, next) { | ||
| 391 | + var u = navigator.userAgent; | ||
| 392 | + var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 | ||
| 393 | + // XXX: 修复iOS版微信HTML5 History兼容性问题 | ||
| 394 | + if (isiOS && to.path !== location.pathname) { | ||
| 395 | + // 此处不可使用location.replace | ||
| 396 | + location.assign(to.fullPath); | ||
| 397 | + } else { | ||
| 398 | + next(); | ||
| 399 | + } | ||
| 400 | + }, | ||
| 401 | + methods: { | ||
| 402 | + | ||
| 403 | + //获取个人中心 | ||
| 404 | + getuserinfo() { | ||
| 405 | + let that = this; | ||
| 406 | + | ||
| 407 | + var url = "/api/user/index"; | ||
| 408 | + let param = { | ||
| 409 | + | ||
| 410 | + }; | ||
| 411 | + | ||
| 412 | + that.$axios | ||
| 413 | + .post(url, param) | ||
| 414 | + .then(function (res) { | ||
| 415 | + console.log(res); | ||
| 416 | + that.user_id = res.data.id | ||
| 417 | + | ||
| 418 | + | ||
| 419 | + }) | ||
| 420 | + .catch(function (err) { | ||
| 421 | + | ||
| 422 | + | ||
| 423 | + }); | ||
| 424 | + }, | ||
| 425 | + | ||
| 426 | + // 列表自动滚到到底部 | ||
| 427 | + toBottom() { | ||
| 428 | + // let listContainer = document.getElementById('messagebox') | ||
| 429 | + let div = this.$refs["message-list"]; | ||
| 430 | + console.log(div.scrollHeight, 8887766543) | ||
| 431 | + console.log(div.style.height, 9999) | ||
| 432 | + | ||
| 433 | + this.height = div.clientHeight | ||
| 434 | + | ||
| 435 | + div.scrollTop = div.scrollHeight | ||
| 436 | + // let height = div.offsetHeight | ||
| 437 | + // console.log(height, 9999888888) | ||
| 438 | + // const listContainer = this.$refs["message-list"]; | ||
| 439 | + // console.log(listContainer, '9999887766543434334345454') | ||
| 440 | + // listContainer.scrollTop = height; | ||
| 441 | + // this.$forceUpdate() | ||
| 442 | + }, | ||
| 443 | + // 视频上拉加载 | ||
| 444 | + onLoad() { | ||
| 445 | + let that = this; | ||
| 446 | + // 异步更新数据 | ||
| 447 | + // setTimeout 仅做示例，真实场景中一般为 ajax 请求 | ||
| 448 | + setTimeout(() => { | ||
| 449 | + console.log(3434); | ||
| 450 | + | ||
| 451 | + let newpage = that.page; | ||
| 452 | + newpage++; | ||
| 453 | + that.page = newpage; | ||
| 454 | + console.log(that.page); | ||
| 455 | + that.getzhibolist(); | ||
| 456 | + | ||
| 457 | + // 加载状态结束 | ||
| 458 | + this.loading = false; | ||
| 459 | + // 数据全部加载完成 | ||
| 460 | + if (that.this_page == that.total_page) { | ||
| 461 | + this.finished = true; | ||
| 462 | + } | ||
| 463 | + }, 1000); | ||
| 464 | + }, | ||
| 465 | + onRefresh() { | ||
| 466 | + let that = this; | ||
| 467 | + setTimeout(() => { | ||
| 468 | + this.isLoading = false; | ||
| 469 | + // Toast('刷新成功'); | ||
| 470 | + if (that.this_page != that.total_page) { | ||
| 471 | + let newpage = that.page; | ||
| 472 | + newpage++; | ||
| 473 | + that.page = newpage; | ||
| 474 | + console.log(that.page); | ||
| 475 | + that.getzhibolist(); | ||
| 476 | + } | ||
| 477 | + | ||
| 478 | + }, 1000); | ||
| 479 | + }, | ||
| 480 | + | ||
| 481 | + // 获取appid | ||
| 482 | + getappid() { | ||
| 483 | + let that = this; | ||
| 484 | + console.log(34734894890); | ||
| 485 | + let urlk = window.location.href; | ||
| 486 | + var url = "/api/user/wechat_jssdk"; | ||
| 487 | + let param = { | ||
| 488 | + url: urlk | ||
| 489 | + }; | ||
| 490 | + | ||
| 491 | + that.$axios | ||
| 492 | + .post(url, param) | ||
| 493 | + .then(function (res) { | ||
| 494 | + console.log(res); | ||
| 495 | + wx.config({ | ||
| 496 | + debug: false, | ||
| 497 | + appId: res.data.jssdk.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识 | ||
| 498 | + timestamp: res.data.jssdk.timestamp, // 必填，生成签名的时间戳 | ||
| 499 | + nonceStr: res.data.jssdk.nonceStr, // 必填，生成签名的随机串 | ||
| 500 | + signature: res.data.jssdk.signature, // 必填，签名，见附录1 | ||
| 501 | + //需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间 | ||
| 502 | + jsApiList: [ | ||
| 503 | + "startRecord", | ||
| 504 | + "stopRecord", | ||
| 505 | + "playVoice", | ||
| 506 | + "uploadVoice", | ||
| 507 | + "playVoice", | ||
| 508 | + "downloadVoice", | ||
| 509 | + "stopVoice", | ||
| 510 | + "chooseImage", | ||
| 511 | + "uploadImage", | ||
| 512 | + "updateAppMessageShareData", | ||
| 513 | + "updateTimelineShareData", | ||
| 514 | + "previewImage" | ||
| 515 | + ] | ||
| 516 | + }); | ||
| 517 | + | ||
| 518 | + that.sharetofriend() | ||
| 519 | + }) | ||
| 520 | + .catch(function (err) { | ||
| 521 | + console.log(err); | ||
| 522 | + }); | ||
| 523 | + }, | ||
| 524 | + | ||
| 525 | + // 分享给朋友 | ||
| 526 | + sharetofriend() { | ||
| 527 | + | ||
| 528 | + var that = this; | ||
| 529 | + // 处理验证失败的信息 | ||
| 530 | + wx.error(function (res) { | ||
| 531 | + logUtil.printLog("验证失败返回的信息:", res); | ||
| 532 | + }); | ||
| 533 | + // 处理验证成功的信息 | ||
| 534 | + wx.ready(function () { | ||
| 535 | + | ||
| 536 | + | ||
| 537 | + // alert(window.location.href.split('#')[0]); | ||
| 538 | + // var share_title = that.sharemsg.title; | ||
| 539 | + // if (share_title.indexOf("${title}") >= 0) { | ||
| 540 | + // share_title = share_title.replace( | ||
| 541 | + // "${title}", | ||
| 542 | + // that.details.details.title | ||
| 543 | + // ); | ||
| 544 | + // } | ||
| 545 | + // var share_desc = that.sharemsg.content; | ||
| 546 | + // if (share_desc.indexOf("${title}") >= 0) { | ||
| 547 | + // share_desc = share_desc.replace( | ||
| 548 | + // "${title}", | ||
| 549 | + // that.details.details.title | ||
| 550 | + // ); | ||
| 551 | + // } | ||
| 552 | + // if (share_desc.indexOf("${text}") >= 0) { | ||
| 553 | + // share_desc = share_desc.replace("${text}", that.details.details.text); | ||
| 554 | + // } | ||
| 555 | + // 分享到朋友圈 | ||
| 556 | + wx.updateTimelineShareData({ | ||
| 557 | + title: '分享', // 分享标题 | ||
| 558 | + link: that.baseurl + | ||
| 559 | + "/redirect.html?shareRedirect=" + | ||
| 560 | + encodeURIComponent(window.location.href), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 | ||
| 561 | + imgUrl: 'http://tangyuanji.t.brotop.cn/uploads/20200804/fcabfaf5aa3c856ced04703b0a78a467.png', | ||
| 562 | + | ||
| 563 | + // imgUrl: that.details.details.img | ||
| 564 | + // ? that.details.details.img | ||
| 565 | + // : that.sharemsg.img, | ||
| 566 | + | ||
| 567 | + // 分享图标 | ||
| 568 | + // desc: that.sharemsg.content, | ||
| 569 | + success: function (res) { | ||
| 570 | + // 用户确认分享后执行的回调函数 | ||
| 571 | + console.log("suss"); | ||
| 572 | + logUtil.printLog("分享到朋友圈成功返回的信息为:", res); | ||
| 573 | + that.showMsg("分享成功!"); | ||
| 574 | + }, | ||
| 575 | + cancel: function (res) { | ||
| 576 | + // 用户取消分享后执行的回调函数 | ||
| 577 | + console.log("err"); | ||
| 578 | + logUtil.printLog("取消分享到朋友圈返回的信息为:", res); | ||
| 579 | + } | ||
| 580 | + }), | ||
| 581 | + // 分享给朋友 | ||
| 582 | + wx.updateAppMessageShareData({ | ||
| 583 | + title: '分享', // 分享标题 | ||
| 584 | + desc: '分享', // 分享描述 | ||
| 585 | + link: | ||
| 586 | + that.baseurl + | ||
| 587 | + "/redirect.html?shareRedirect=" + | ||
| 588 | + encodeURIComponent(window.location.href), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 | ||
| 589 | + imgUrl: 'http://tangyuanji.t.brotop.cn/uploads/20200804/fcabfaf5aa3c856ced04703b0a78a467.png', | ||
| 590 | + | ||
| 591 | + // imgUrl: that.details.details.img | ||
| 592 | + // ? that.details.details.img | ||
| 593 | + // : that.sharemsg.img, | ||
| 594 | + // 分享图标 | ||
| 595 | + type: "", // 分享类型,music、video或link，不填默认为link | ||
| 596 | + dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空 | ||
| 597 | + success: function (res) { | ||
| 598 | + // 用户确认分享后执行的回调函数 | ||
| 599 | + logUtil.printLog("分享给朋友成功返回的信息为:", res); | ||
| 600 | + }, | ||
| 601 | + cancel: function (res) { | ||
| 602 | + // 用户取消分享后执行的回调函数 | ||
| 603 | + logUtil.printLog("取消分享给朋友返回的信息为:", res); | ||
| 604 | + } | ||
| 605 | + }); | ||
| 606 | + }); | ||
| 607 | + }, | ||
| 608 | + | ||
| 609 | + // 上传图片 | ||
| 610 | + choseimg() { | ||
| 611 | + let that = this | ||
| 612 | + wx.chooseImage({ | ||
| 613 | + count: 1, // 默认9 | ||
| 614 | + sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 | ||
| 615 | + sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 | ||
| 616 | + success: function (res) { | ||
| 617 | + var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片 | ||
| 618 | + | ||
| 619 | + wx.uploadImage({ | ||
| 620 | + localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得 | ||
| 621 | + isShowProgressTips: 1, // 默认为1，显示进度提示 | ||
| 622 | + success: function (res) { | ||
| 623 | + var serverId = res.serverId; // 返回图片的服务器端ID | ||
| 624 | + that.serverId = res.serverId; | ||
| 625 | + that.upload() | ||
| 626 | + } | ||
| 627 | + }); | ||
| 628 | + } | ||
| 629 | + }); | ||
| 630 | + }, | ||
| 631 | + | ||
| 632 | + upload() { | ||
| 633 | + let that = this; | ||
| 634 | + console.log(34734894890) | ||
| 635 | + | ||
| 636 | + var url = "/api/user/upload_media"; | ||
| 637 | + let param = { | ||
| 638 | + type: 1, | ||
| 639 | + media_id: that.serverId | ||
| 640 | + }; | ||
| 641 | + | ||
| 642 | + that.$axios | ||
| 643 | + .post(url, param) | ||
| 644 | + .then(function (res) { | ||
| 645 | + console.log(res); | ||
| 646 | + that.videourl = res.data.media; | ||
| 647 | + let objdata = { | ||
| 648 | + lesson_id: that.id, | ||
| 649 | + type: 2, | ||
| 650 | + user_id: that.user_id, | ||
| 651 | + times: 0, | ||
| 652 | + data: that.videourl | ||
| 653 | + }; | ||
| 654 | + objdata = JSON.stringify(objdata); | ||
| 655 | + // alert(objdata); | ||
| 656 | + that.websocketsend(objdata); | ||
| 657 | + // alert(that.videourl) | ||
| 658 | + | ||
| 659 | + }) | ||
| 660 | + .catch(function (err) { | ||
| 661 | + | ||
| 662 | + console.log(err); | ||
| 663 | + }); | ||
| 664 | + }, | ||
| 665 | + // 预览图片 | ||
| 666 | + previewimg(url) { | ||
| 667 | + | ||
| 668 | + let arr = []; | ||
| 669 | + arr.push(url) | ||
| 670 | + wx.previewImage({ | ||
| 671 | + current: url, // 当前显示图片的http链接 | ||
| 672 | + urls: arr// 需要预览的图片http链接列表 | ||
| 673 | + }); | ||
| 674 | + }, | ||
| 675 | + // 隐藏遮罩层 | ||
| 676 | + hide() { | ||
| 677 | + this.beginlushow = false; | ||
| 678 | + this.zhengzailu = false; | ||
| 679 | + this.luprocess = false; | ||
| 680 | + wx.pauseVoice({ | ||
| 681 | + localId: that.localId // 需要暂停的音频的本地ID，由stopRecord接口获得 | ||
| 682 | + }); | ||
| 683 | + }, | ||
| 684 | + // 返回上一页 | ||
| 685 | + back() { | ||
| 686 | + this.$router.go(-1); | ||
| 687 | + }, | ||
| 688 | + overvideo() { | ||
| 689 | + this.iszhibo = false; | ||
| 690 | + }, | ||
| 691 | + sureup() { | ||
| 692 | + this.issuccess = false; | ||
| 693 | + }, | ||
| 694 | + // 隐藏来早了还没开课 | ||
| 695 | + suretips() { | ||
| 696 | + // this.$router.go(-1) | ||
| 697 | + this.showtips = false; | ||
| 698 | + }, | ||
| 699 | + // 切换语音发送还是文字发送 | ||
| 700 | + changeword() { | ||
| 701 | + this.sendword = !this.sendword; | ||
| 702 | + console.log(this.sendword); | ||
| 703 | + }, | ||
| 704 | + | ||
| 705 | + // 输入文字 | ||
| 706 | + entertext(e) { | ||
| 707 | + this.text = e.target.value; | ||
| 708 | + }, | ||
| 709 | + // 开始录制 | ||
| 710 | + yuyin() { | ||
| 711 | + this.beginlushow = true; | ||
| 712 | + this.yuyintype = 1 | ||
| 713 | + }, | ||
| 714 | + | ||
| 715 | + // 开始录音 | ||
| 716 | + beginluyin() { | ||
| 717 | + console.log(83434898989); | ||
| 718 | + let that = this; | ||
| 719 | + that.beginlushow = false; | ||
| 720 | + that.zhengzailu = true; | ||
| 721 | + let time = 0; | ||
| 722 | + timer = setInterval(() => { | ||
| 723 | + time++; | ||
| 724 | + that.time = time; | ||
| 725 | + console.log(that.time); | ||
| 726 | + }, 1000); | ||
| 727 | + wx.startRecord({ | ||
| 728 | + success: function (res) { | ||
| 729 | + // alert(JSON.stringify(res)) | ||
| 730 | + consoel.log(res, 99977775655); | ||
| 731 | + // alert('成功调起录音') | ||
| 732 | + // that.timer = setInterval(() => { | ||
| 733 | + // time++; | ||
| 734 | + // that.time = time | ||
| 735 | + // }, 1000) | ||
| 736 | + // that.vicoeEnd() | ||
| 737 | + }, | ||
| 738 | + cancel: function () { | ||
| 739 | + // alert("用户拒绝授权录音"); | ||
| 740 | + } | ||
| 741 | + }); | ||
| 742 | + }, | ||
| 743 | + | ||
| 744 | + // 完成录音 | ||
| 745 | + finishluyin() { | ||
| 746 | + let that = this; | ||
| 747 | + this.zhengzailu = false; | ||
| 748 | + this.luprocess = true; | ||
| 749 | + | ||
| 750 | + clearInterval(timer); | ||
| 751 | + | ||
| 752 | + wx.stopRecord({ | ||
| 753 | + success: function (res) { | ||
| 754 | + var localId = res.localId; | ||
| 755 | + that.localId = res.localId; | ||
| 756 | + that.upyuyin(); | ||
| 757 | + } | ||
| 758 | + }); | ||
| 759 | + }, | ||
| 760 | + // 试听录音 | ||
| 761 | + shiting() { | ||
| 762 | + wx.playVoice({ | ||
| 763 | + localId: this.localId // 需要播放的音频的本地ID，由stopRecord接口获得 | ||
| 764 | + }); | ||
| 765 | + }, | ||
| 766 | + // 结束本次上传 | ||
| 767 | + hideshangchuan() { | ||
| 768 | + this.shanghcuanshow = false | ||
| 769 | + }, | ||
| 770 | + // 发送语音 | ||
| 771 | + sendyuyin() { | ||
| 772 | + this.shanghcuanshow = true | ||
| 773 | + }, | ||
| 774 | + shangyuyin() { | ||
| 775 | + let that = this; | ||
| 776 | + | ||
| 777 | + | ||
| 778 | + this.shanghcuanshow = false | ||
| 779 | + that.luprocess = false; | ||
| 780 | + this.issuccess = true | ||
| 781 | + let objdata = { | ||
| 782 | + lesson_id: this.id, | ||
| 783 | + type: 3, | ||
| 784 | + user_id: this.user_id, | ||
| 785 | + times: that.time, | ||
| 786 | + data: that.serverId | ||
| 787 | + }; | ||
| 788 | + objdata = JSON.stringify(objdata); | ||
| 789 | + // alert(objdata); | ||
| 790 | + that.websocketsend(objdata); | ||
| 791 | + }, | ||
| 792 | + // 上传语音到后台 | ||
| 793 | + upyuyin() { | ||
| 794 | + let that = this; | ||
| 795 | + wx.uploadVoice({ | ||
| 796 | + localId: that.localId, // 需要上传的音频的本地ID，由stopRecord接口获得 | ||
| 797 | + isShowProgressTips: 1, // 默认为1，显示进度提示 | ||
| 798 | + success: function (res) { | ||
| 799 | + var serverId = res.serverId; // 返回音频的服务器端ID | ||
| 800 | + that.serverId = res.serverId; | ||
| 801 | + // alert(that.serverId); | ||
| 802 | + // that.upload() | ||
| 803 | + } | ||
| 804 | + }); | ||
| 805 | + }, | ||
| 806 | + | ||
| 807 | + // 重录 | ||
| 808 | + resetlu() { | ||
| 809 | + this.time = 0; | ||
| 810 | + this.luprocess = false; | ||
| 811 | + this.beginlushow = true; | ||
| 812 | + clearInterval(this.timer); | ||
| 813 | + }, | ||
| 814 | + // 停止直播 | ||
| 815 | + stopbtn() { | ||
| 816 | + this.overzhibo = true | ||
| 817 | + | ||
| 818 | + }, | ||
| 819 | + canclesure() { | ||
| 820 | + this.overzhibo = false | ||
| 821 | + }, | ||
| 822 | + surezhibo() { | ||
| 823 | + let that = this; | ||
| 824 | + that.overzhibo = false | ||
| 825 | + let objdata = { | ||
| 826 | + lesson_id: this.id, | ||
| 827 | + type: 3, | ||
| 828 | + user_id: this.user_id, | ||
| 829 | + times: that.time, | ||
| 830 | + data: '', is_end: 1 | ||
| 831 | + }; | ||
| 832 | + objdata = JSON.stringify(objdata); | ||
| 833 | + // alert(objdata); | ||
| 834 | + this.websocketsend(objdata); | ||
| 835 | + | ||
| 836 | + }, | ||
| 837 | + | ||
| 838 | + // 获取录播详情 | ||
| 839 | + getlubodetail() { | ||
| 840 | + let that = this; | ||
| 841 | + console.log(34734894890); | ||
| 842 | + var url = "/api/user/lesson_detail"; | ||
| 843 | + let param = { | ||
| 844 | + lesson_id: that.id | ||
| 845 | + }; | ||
| 846 | + | ||
| 847 | + that.$axios | ||
| 848 | + .post(url, param) | ||
| 849 | + .then(function (res) { | ||
| 850 | + console.log(res); | ||
| 851 | + that.is_self = res.data.lesson.is_self; | ||
| 852 | + that.coursetitle = res.data.lesson.title; | ||
| 853 | + that.is_favorite = res.data.lesson.is_favorite; | ||
| 854 | + // that.user_id = res.data.lesson.user_id; | ||
| 855 | + let duration = res.data.lesson.duration; | ||
| 856 | + if (that.is_self == 0) { | ||
| 857 | + if (duration != 0) { | ||
| 858 | + that.showtips = true; | ||
| 859 | + that.isbot = false; | ||
| 860 | + } | ||
| 861 | + } | ||
| 862 | + | ||
| 863 | + timer = setInterval(() => { | ||
| 864 | + duration = duration - 1; | ||
| 865 | + | ||
| 866 | + if (duration <= 0) { | ||
| 867 | + that.showtips = false; | ||
| 868 | + that.isbot = true; | ||
| 869 | + clearInterval(timer); | ||
| 870 | + } | ||
| 871 | + }, 1000); | ||
| 872 | + }) | ||
| 873 | + .catch(function (err) { | ||
| 874 | + console.log(err); | ||
| 875 | + }); | ||
| 876 | + }, | ||
| 877 | + | ||
| 878 | + collect() { | ||
| 879 | + let that = this; | ||
| 880 | + var url = "/api/user/favorite"; | ||
| 881 | + let param = { | ||
| 882 | + type: 4, | ||
| 883 | + favorite_id: that.id | ||
| 884 | + }; | ||
| 885 | + | ||
| 886 | + that.$axios | ||
| 887 | + .post(url, param) | ||
| 888 | + .then(function (res) { | ||
| 889 | + console.log(res); | ||
| 890 | + if (that.is_favorite == false) { | ||
| 891 | + that.is_favorite = true; | ||
| 892 | + Toast("收藏成功"); | ||
| 893 | + } else { | ||
| 894 | + that.is_favorite = false; | ||
| 895 | + Toast("取消收藏成功"); | ||
| 896 | + } | ||
| 897 | + }) | ||
| 898 | + .catch(function (err) { | ||
| 899 | + console.log(err); | ||
| 900 | + }); | ||
| 901 | + }, | ||
| 902 | + | ||
| 903 | + // 链接websocket | ||
| 904 | + initWebSocket() { | ||
| 905 | + //初始化weosocket | ||
| 906 | + // const wsuri = "ws://tangyuanji.t.brotop.cn:11001"; | ||
| 907 | + this.websock = new WebSocket("ws://tangyuanji.t.brotop.cn:11001"); | ||
| 908 | + this.websock.onmessage = this.websocketonmessage; | ||
| 909 | + this.websock.onopen = this.websocketonopen; | ||
| 910 | + this.websock.onerror = this.websocketonerror; | ||
| 911 | + this.websock.onclose = this.websocketclose; | ||
| 912 | + }, | ||
| 913 | + websocketonopen() { | ||
| 914 | + //连接建立之后执行send方法发送数据 | ||
| 915 | + console.log("连接成功"); | ||
| 916 | + }, | ||
| 917 | + websocketonerror() { | ||
| 918 | + //连接建立失败重连 | ||
| 919 | + this.initWebSocket(); | ||
| 920 | + }, | ||
| 921 | + websocketonmessage(e) { | ||
| 922 | + | ||
| 923 | + //数据接收 | ||
| 924 | + let that = this; | ||
| 925 | + | ||
| 926 | + if (this.number == 0) { | ||
| 927 | + let obj = { lesson_id: this.id, user_id: this.user_id, is_group: 1, first: 1 }; | ||
| 928 | + obj = JSON.stringify(obj); | ||
| 929 | + console.log(obj); | ||
| 930 | + this.websocketsend(obj); | ||
| 931 | + | ||
| 932 | + // let data=e. | ||
| 933 | + } | ||
| 934 | + this.number = this.number + 1; | ||
| 935 | + this.number = this.number; | ||
| 936 | + let datak = e.data | ||
| 937 | + console.log(e, 88890999); | ||
| 938 | + console.log(e.data) | ||
| 939 | + // alert(e.data) | ||
| 940 | + // alert(e.data.first) | ||
| 941 | + let data = JSON.parse(e.data); | ||
| 942 | + // alert(data) | ||
| 943 | + console.log(data) | ||
| 944 | + that.group_count = data.group_count; | ||
| 945 | + // 接收数据重新渲染列表 | ||
| 946 | + if (data.lesson_id != undefined) { | ||
| 947 | + const redata = JSON.parse(e.data); | ||
| 948 | + | ||
| 949 | + that.group_count = redata.group_count; | ||
| 950 | + if (redata.code == 0) { | ||
| 951 | + Toast(redata.msg) | ||
| 952 | + } else if (redata.code == 1) { | ||
| 953 | + that.recordlist.push(redata); | ||
| 954 | + that.recordlist = that.recordlist; | ||
| 955 | + that.$forceUpdate(); | ||
| 956 | + console.log(that.recordlist) | ||
| 957 | + | ||
| 958 | + } | ||
| 959 | + | ||
| 960 | + | ||
| 961 | + | ||
| 962 | + | ||
| 963 | + } | ||
| 964 | + }, | ||
| 965 | + websocketsend(Data) { | ||
| 966 | + //数据发送 | ||
| 967 | + console.log(99999); | ||
| 968 | + this.websock.send(Data); | ||
| 969 | + }, | ||
| 970 | + websocketclose(e) { | ||
| 971 | + //关闭 | ||
| 972 | + console.log("断开连接", e); | ||
| 973 | + }, | ||
| 974 | + // 获取直播列表 | ||
| 975 | + getzhibolist() { | ||
| 976 | + let that = this; | ||
| 977 | + console.log(34734894890) | ||
| 978 | + var url = "/api/user/lesson_chat_record"; | ||
| 979 | + let param = { | ||
| 980 | + lesson_id: that.id, | ||
| 981 | + page: that.page | ||
| 982 | + }; | ||
| 983 | + | ||
| 984 | + that.$axios | ||
| 985 | + .post(url, param) | ||
| 986 | + .then(function (res) { | ||
| 987 | + console.log(res, '直播列表'); | ||
| 988 | + if (that.page == 1) { | ||
| 989 | + // 页面滚动到某一个位置 | ||
| 990 | + let len = res.data.record.length; | ||
| 991 | + len = len - 1 | ||
| 992 | + res.data.record.forEach(function (value, index, array) { | ||
| 993 | + if (index == len) { | ||
| 994 | + value.idkk = 'targetboxk' | ||
| 995 | + that.$nextTick(() => { | ||
| 996 | + setTimeout(() => { | ||
| 997 | + let targetbox = document.getElementById('targetboxk'); | ||
| 998 | + that.target = targetbox.offsetTop; | ||
| 999 | + document.body.scrollTop = that.target; | ||
| 1000 | + document.getElementById('targetbox').scrollTop = that.target | ||
| 1001 | + | ||
| 1002 | + }) | ||
| 1003 | + }) | ||
| 1004 | + } | ||
| 1005 | + | ||
| 1006 | + }) | ||
| 1007 | + } | ||
| 1008 | + | ||
| 1009 | + // 拼接数组倒叙 | ||
| 1010 | + var arr = [...res.data.record, ...that.recordlist]; | ||
| 1011 | + that.recordlist = arr | ||
| 1012 | + that.recordlist.forEach(function (value, index, array) { | ||
| 1013 | + value.sel = false | ||
| 1014 | + }) | ||
| 1015 | + that.recordlist = that.recordlist | ||
| 1016 | + that.this_page = res.data.this_page | ||
| 1017 | + that.total_page = res.data.total_page; | ||
| 1018 | + | ||
| 1019 | + }) | ||
| 1020 | + .catch(function (err) { | ||
| 1021 | + console.log(err); | ||
| 1022 | + }); | ||
| 1023 | + | ||
| 1024 | + }, | ||
| 1025 | + audioplay(item, index) { | ||
| 1026 | + let that = this; | ||
| 1027 | + console.log(item) | ||
| 1028 | + // 播放某一个语音 | ||
| 1029 | + | ||
| 1030 | + // that.recordlist[index].sel = !that.recordlist[index].sel; | ||
| 1031 | + | ||
| 1032 | + that.recordlist.forEach(function (value, indexk, array) { | ||
| 1033 | + if (index == indexk) { | ||
| 1034 | + | ||
| 1035 | + that.recordlist[indexk].sel = !that.recordlist[indexk].sel; | ||
| 1036 | + } else { | ||
| 1037 | + that.recordlist[indexk].sel = false | ||
| 1038 | + } | ||
| 1039 | + }) | ||
| 1040 | + | ||
| 1041 | + that.recordlist = that.recordlist; | ||
| 1042 | + | ||
| 1043 | + that.$forceUpdate(); | ||
| 1044 | + console.log(that.recordlist) | ||
| 1045 | + | ||
| 1046 | + if (this.recordlist[index].sel == true) { | ||
| 1047 | + // 开始播放 | ||
| 1048 | + let localId = '' | ||
| 1049 | + wx.downloadVoice({ | ||
| 1050 | + serverId: item.data, // 需要下载的音频的服务器端ID，由uploadVoice接口获得 | ||
| 1051 | + isShowProgressTips: 1, // 默认为1，显示进度提示 | ||
| 1052 | + success: function (res) { | ||
| 1053 | + | ||
| 1054 | + localId = res.localId; // 返回音频的本地ID | ||
| 1055 | + that.playlocalid = localId; | ||
| 1056 | + that.recordlist[index].localId = localId; | ||
| 1057 | + that.recordlist = that.recordlist; | ||
| 1058 | + that.$forceUpdate() | ||
| 1059 | + | ||
| 1060 | + wx.playVoice({ | ||
| 1061 | + localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得 | ||
| 1062 | + }) | ||
| 1063 | + } | ||
| 1064 | + | ||
| 1065 | + }); | ||
| 1066 | + | ||
| 1067 | + } else if (this.recordlist[index].sel == false) { | ||
| 1068 | + // 停止播放 | ||
| 1069 | + wx.stopVoice({ | ||
| 1070 | + localId: that.playlocalid // 需要暂停的音频的本地ID，由stopRecord接口获得 | ||
| 1071 | + }); | ||
| 1072 | + } | ||
| 1073 | + // 监听播放停止播放下一个 | ||
| 1074 | + wx.onVoicePlayEnd({ | ||
| 1075 | + success: function (res) { | ||
| 1076 | + var localId = res.localId; // 返回音频的本地ID | ||
| 1077 | + | ||
| 1078 | + that.recordlist.forEach(function (value, index, array) { | ||
| 1079 | + if (localId == value.localId) { | ||
| 1080 | + value.sel = false | ||
| 1081 | + } | ||
| 1082 | + | ||
| 1083 | + }) | ||
| 1084 | + that.recordlist = that.recordlist | ||
| 1085 | + | ||
| 1086 | + that.$forceUpdate(); | ||
| 1087 | + | ||
| 1088 | + index = index + 1; | ||
| 1089 | + | ||
| 1090 | + if (that.recordlist[index].data != undefined) { | ||
| 1091 | + if (that.recordlist[index].type == 3) { | ||
| 1092 | + that.recordlist[index].sel = true | ||
| 1093 | + wx.downloadVoice({ | ||
| 1094 | + serverId: that.recordlist[index].data, // 需要下载的音频的服务器端ID，由uploadVoice接口获得 | ||
| 1095 | + isShowProgressTips: 1, // 默认为1，显示进度提示 | ||
| 1096 | + success: function (res) { | ||
| 1097 | + let localId = res.localId; // 返回音频的本地ID | ||
| 1098 | + that.recordlist[index].localId = localId; | ||
| 1099 | + that.recordlist[index].sel = true; | ||
| 1100 | + that.recordlist = that.recordlist; | ||
| 1101 | + that.$forceUpdate() | ||
| 1102 | + wx.playVoice({ | ||
| 1103 | + localId: localId // 需要暂停的音频的本地ID，由stopRecord接口获得 | ||
| 1104 | + }); | ||
| 1105 | + | ||
| 1106 | + | ||
| 1107 | + } | ||
| 1108 | + }); | ||
| 1109 | + } | ||
| 1110 | + } | ||
| 1111 | + that.recordlist = that.recordlist; | ||
| 1112 | + that.$forceUpdate() | ||
| 1113 | + | ||
| 1114 | + } | ||
| 1115 | + }); | ||
| 1116 | + | ||
| 1117 | + }, | ||
| 1118 | + // 发送文字 | ||
| 1119 | + send() { | ||
| 1120 | + // var ws = new WebSocket("ws://tangyuanji.t.brotop.cn:11001"); | ||
| 1121 | + let objdata = { | ||
| 1122 | + lesson_id: this.id, | ||
| 1123 | + type: 1, | ||
| 1124 | + user_id: this.user_id, | ||
| 1125 | + times: 0, | ||
| 1126 | + data: this.text | ||
| 1127 | + }; | ||
| 1128 | + console.log(objdata) | ||
| 1129 | + objdata = JSON.stringify(objdata); | ||
| 1130 | + // alert(objdata) | ||
| 1131 | + this.websocketsend(objdata); | ||
| 1132 | + this.text = '' | ||
| 1133 | + // ws.send(objdata); | ||
| 1134 | + } | ||
| 1135 | + } | ||
| 1136 | +}; | ||
| 1137 | +</script> | ||
| 1138 | + | ||
| 1139 | +<style scoped> | ||
| 1140 | +/* 34348989 */ | ||
| 1141 | + | ||
| 1142 | +/* 45548548 */ | ||
| 1143 | +.container { | ||
| 1144 | + overflow: auto; | ||
| 1145 | +} | ||
| 1146 | +.sendk { | ||
| 1147 | + width: 1.14rem; | ||
| 1148 | + height: 0.6rem; | ||
| 1149 | + background: #599158; | ||
| 1150 | + border-radius: 0.04rem; | ||
| 1151 | + color: #fff; | ||
| 1152 | + font-size: 0.32rem; | ||
| 1153 | + text-align: center; | ||
| 1154 | + line-height: 0.6rem; | ||
| 1155 | + margin-left: 0.16rem; | ||
| 1156 | +} | ||
| 1157 | +.waitbot { | ||
| 1158 | + border-top: 1px solid #f5f5f5; | ||
| 1159 | + margin-top: 0.48rem; | ||
| 1160 | +} | ||
| 1161 | +.waitbotlright { | ||
| 1162 | + width: 3.1rem; | ||
| 1163 | + height: 0.96rem; | ||
| 1164 | + | ||
| 1165 | + text-align: center; | ||
| 1166 | + color: #579057; | ||
| 1167 | + font-size: 0.32rem; | ||
| 1168 | + line-height: 0.96rem; | ||
| 1169 | +} | ||
| 1170 | +.waitbotleft { | ||
| 1171 | + width: 3.1rem; | ||
| 1172 | + height: 0.96rem; | ||
| 1173 | + border-right: 1px solid #f5f5f5; | ||
| 1174 | + text-align: center; | ||
| 1175 | + color: #323233; | ||
| 1176 | + font-size: 0.32rem; | ||
| 1177 | + line-height: 0.96rem; | ||
| 1178 | +} | ||
| 1179 | +/* 温馨提示 */ | ||
| 1180 | +.waittips { | ||
| 1181 | + color: #7d7e80; | ||
| 1182 | + font-size: 0.28rem; | ||
| 1183 | + text-align: center; | ||
| 1184 | + margin-top: 0.16rem; | ||
| 1185 | +} | ||
| 1186 | +.tipsname { | ||
| 1187 | + color: #323233; | ||
| 1188 | + font-size: 0.32rem; | ||
| 1189 | + font-weight: bold; | ||
| 1190 | + text-align: center; | ||
| 1191 | + margin-top: 0.48rem; | ||
| 1192 | + text-align: center; | ||
| 1193 | +} | ||
| 1194 | +.benci { | ||
| 1195 | + margin-top: 0.68rem; | ||
| 1196 | +} | ||
| 1197 | +.wentipswrap { | ||
| 1198 | + width: 6.22rem; | ||
| 1199 | + | ||
| 1200 | + background: #ffffff; | ||
| 1201 | + border-radius: 0.08rem 0.08rem 0 0; | ||
| 1202 | + position: absolute; | ||
| 1203 | + top: 50%; | ||
| 1204 | + left: 50%; | ||
| 1205 | + transform: translate(-50%, -50%); | ||
| 1206 | +} | ||
| 1207 | +.chonglu { | ||
| 1208 | + padding: 0 0.84rem; | ||
| 1209 | + box-sizing: border-box; | ||
| 1210 | + margin-top: 0.2rem; | ||
| 1211 | +} | ||
| 1212 | +.relu { | ||
| 1213 | + width: 1.04rem; | ||
| 1214 | + height: 1.04rem; | ||
| 1215 | + border: 1px solid #72a970; | ||
| 1216 | + /* box-shadow: 0 0.04rem 0.36rem 0 rgba(125, 178, 121, 0.56); */ | ||
| 1217 | + color: #5c945c; | ||
| 1218 | + font-size: 0.32rem; | ||
| 1219 | + text-align: center; | ||
| 1220 | + line-height: 1.04rem; | ||
| 1221 | + border-radius: 50%; | ||
| 1222 | +} | ||
| 1223 | +.send { | ||
| 1224 | + width: 1.6rem; | ||
| 1225 | + height: 1.6rem; | ||
| 1226 | + background: linear-gradient(135deg, #87bd87 1%, #4a834a); | ||
| 1227 | + box-shadow: 0 0.04rem 0.36rem 0 rgba(125, 178, 121, 0.56); | ||
| 1228 | + border-radius: 50%; | ||
| 1229 | + color: #ffffff; | ||
| 1230 | + font-size: 0.4rem; | ||
| 1231 | + text-align: center; | ||
| 1232 | + line-height: 1.6rem; | ||
| 1233 | +} | ||
| 1234 | +.beginlu { | ||
| 1235 | + color: #323233; | ||
| 1236 | + font-size: 0.28rem; | ||
| 1237 | + text-align: center; | ||
| 1238 | +} | ||
| 1239 | +.beginluimg { | ||
| 1240 | + width: 1.6rem; | ||
| 1241 | + height: 1.6rem; | ||
| 1242 | + font-size: 0; | ||
| 1243 | + margin-top: 0.16rem; | ||
| 1244 | +} | ||
| 1245 | +.luwrap { | ||
| 1246 | + padding: 0.4rem 0; | ||
| 1247 | + box-sizing: border-box; | ||
| 1248 | + text-align: center; | ||
| 1249 | + width: 100%; | ||
| 1250 | + position: fixed; | ||
| 1251 | + bottom: 0; | ||
| 1252 | + left: 0; | ||
| 1253 | + background: #fff; | ||
| 1254 | + z-index: 99999; | ||
| 1255 | +} | ||
| 1256 | +.successname { | ||
| 1257 | + color: #7d7e80; | ||
| 1258 | + font-size: 0.28rem; | ||
| 1259 | + margin-top: 0.16rem; | ||
| 1260 | + text-align: center; | ||
| 1261 | +} | ||
| 1262 | +.successimg { | ||
| 1263 | + width: 1.6rem; | ||
| 1264 | + height: 1.6rem; | ||
| 1265 | + font-size: 0; | ||
| 1266 | +} | ||
| 1267 | +.zhiboover { | ||
| 1268 | + width: 6.22rem; | ||
| 1269 | + | ||
| 1270 | + background: #ffffff; | ||
| 1271 | + border-radius: 0.08rem 0.08rem 0 0; | ||
| 1272 | + position: absolute; | ||
| 1273 | + top: 50%; | ||
| 1274 | + left: 50%; | ||
| 1275 | + transform: translate(-50%, -50%); | ||
| 1276 | +} | ||
| 1277 | +.zhibovoertop { | ||
| 1278 | + padding: 0.48rem 0; | ||
| 1279 | + box-sizing: border-box; | ||
| 1280 | + border-bottom: 1px solid #f5f5f5; | ||
| 1281 | + color: #323233; | ||
| 1282 | + font-size: 0.28rem; | ||
| 1283 | + text-align: center; | ||
| 1284 | +} | ||
| 1285 | +.zhiboque { | ||
| 1286 | + color: #599158; | ||
| 1287 | + font-size: 0.32rem; | ||
| 1288 | + text-align: center; | ||
| 1289 | + padding: 0.24rem 0; | ||
| 1290 | + box-sizing: border-box; | ||
| 1291 | +} | ||
| 1292 | +.messagebot { | ||
| 1293 | + background: #fff; | ||
| 1294 | + padding: 0 0.72rem; | ||
| 1295 | + box-sizing: border-box; | ||
| 1296 | +} | ||
| 1297 | +.messagebotk { | ||
| 1298 | + padding: 0.16rem 0.72rem; | ||
| 1299 | + box-sizing: border-box; | ||
| 1300 | +} | ||
| 1301 | +.messagebotkk { | ||
| 1302 | + padding: 0 0.32rem; | ||
| 1303 | + box-sizing: border-box; | ||
| 1304 | +} | ||
| 1305 | +.zhibobtn { | ||
| 1306 | + width: 0.56rem; | ||
| 1307 | + height: 0.56rem; | ||
| 1308 | + font-size: 0; | ||
| 1309 | +} | ||
| 1310 | +.yuyinbtn { | ||
| 1311 | + width: 0.84rem; | ||
| 1312 | + height: 0.84rem; | ||
| 1313 | + font-size: 0; | ||
| 1314 | +} | ||
| 1315 | +.manypeople { | ||
| 1316 | + padding: 0.14rem 0.4rem; | ||
| 1317 | + color: #868686; | ||
| 1318 | + font-size: 0.28rem; | ||
| 1319 | + box-sizing: border-box; | ||
| 1320 | + opacity: 0.74; | ||
| 1321 | + background: #f7f7f7; | ||
| 1322 | + border-radius: 0.4rem; | ||
| 1323 | + box-shadow: 0 0.16rem 0.3rem 0 rgba(142, 190, 142, 0.33); | ||
| 1324 | + position: fixed; | ||
| 1325 | + bottom: 1.2rem; | ||
| 1326 | + right: 0.32rem; | ||
| 1327 | + z-index: 9; | ||
| 1328 | +} | ||
| 1329 | +.manypeopleimg { | ||
| 1330 | + width: 0.32rem; | ||
| 1331 | + height: 0.28rem; | ||
| 1332 | + font-size: 0; | ||
| 1333 | +} | ||
| 1334 | +.messagelist { | ||
| 1335 | + /* height: 15rem; */ | ||
| 1336 | + /* padding-bottom: 1.5rem; */ | ||
| 1337 | +} | ||
| 1338 | +.contentimg { | ||
| 1339 | + width: 4.15rem; | ||
| 1340 | + height: 2.95rem; | ||
| 1341 | + font-size: 0; | ||
| 1342 | +} | ||
| 1343 | +.contentimg { | ||
| 1344 | + widows: 100%; | ||
| 1345 | + height: 100%; | ||
| 1346 | +} | ||
| 1347 | +.yuyink { | ||
| 1348 | + display: flex; | ||
| 1349 | + justify-content: flex-end; | ||
| 1350 | +} | ||
| 1351 | +.sharetop { | ||
| 1352 | + z-index: 999; | ||
| 1353 | +} | ||
| 1354 | +.messagecontent { | ||
| 1355 | + /* background: #999; */ | ||
| 1356 | +} | ||
| 1357 | + | ||
| 1358 | +/* 语音聊天 */ | ||
| 1359 | +.voice { | ||
| 1360 | + /* padding-top: 12px; | ||
| 1361 | + padding-left: 10px; */ | ||
| 1362 | + /* margin: 100px auto; */ | ||
| 1363 | + /* height: 35px; | ||
| 1364 | + width: 150px; */ | ||
| 1365 | + /* background: #87bd87; */ | ||
| 1366 | + background: #fff; | ||
| 1367 | + border-radius: 0 7px 7px; | ||
| 1368 | + color: #333; | ||
| 1369 | + position: relative; | ||
| 1370 | +} | ||
| 1371 | +.voiceright { | ||
| 1372 | + transform: rotate(-180deg); | ||
| 1373 | +} | ||
| 1374 | +.miaoshu { | ||
| 1375 | + position: absolute; | ||
| 1376 | + left: 0.6rem; | ||
| 1377 | + bottom: 0.15rem; | ||
| 1378 | + font-size: 0.22rem; | ||
| 1379 | + | ||
| 1380 | + transform: rotate(180deg); | ||
| 1381 | +} | ||
| 1382 | +.miaoshuk { | ||
| 1383 | + position: absolute; | ||
| 1384 | + left: 0.55rem; | ||
| 1385 | + bottom: 0.12rem; | ||
| 1386 | + font-size: 0.12rem; | ||
| 1387 | +} | ||
| 1388 | +.bg { | ||
| 1389 | + /* background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzlFRDZDRDNENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzlFRDZDRDJENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTAxQkEzQ0RENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTAxQkEzQ0VENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4K4iKVAAACUUlEQVR42uSazytEURTHvTHjR4kaU8xsSDZSdmbjx4oSK8XGQrJlpSwYTSmxEWWhUIpsZK3kD7DRNBuSBZFCNjZ+JPKcV6ecXu/d3sy7595bc+vbfXPue5/749z77o83lm3bZYYFC8RZqAbQAigP2tXNj5aZF7gdkAZNk9+7WvnOCCgxRUCb9n/o1sk3pUH6QDHF/GNsoM+QeYfiy6qkFeLZDBb0GlTB4AAR/xXT9nXxZVa0WCekQd9Y0HOJjg3CHySviiZmfjO3AyIhnu0gBc0wjAIR/wLtW8z87aAOWAI9gqaYRoAff4ZUoi7EKCiUP462j4CdSCrfK4N1Ahpi6I0i/hPa50M4oFB+Dbm/SzXfL5MD4rUogxP8+Itozynm59E+q5ovyuQdHxphWh568XvR5kxq1SEn40L4e0XMA1L4EcEe7RTjLqYdqRf/gezQUwr5LxjXq+aLHPCFcTmTA7z4tutIQhXfLiJPKXyRA/oxzgW8v9DgxU+S62eF/ATGr6r5fg26Corj9RHD4Z0fvwfjS9CbQn4bxrfK+R6TyzxZNk260solTL4i/g3al10TsMXIryA72T7VfK8MnJO8X9CKy14lafXjxx8jFUsSeyUzfxhtPwHPoqTy/TJJMJzJiPgNpJdsuNJizPwztB/q4JtwHN2KW3sn3HuMOouR30l6bbsOvgkOyGIBnaPbRldalJl/h2knuvgmOKAWNAFKMUz4Iv4O6Z1xXXxTPxtazHy6khnVyS/Fb8IDpHGyuvmWgX9L4Q4toDnQFWhNN/9PgAEAR4w1ULjdCbEAAAAASUVORK5CYII=) | ||
| 1390 | + right 0 no-repeat; */ | ||
| 1391 | + background: url(http://tangyuanji.t.brotop.cn/assets/images/media_icon.png) | ||
| 1392 | + no-repeat center; | ||
| 1393 | + width: 24px; | ||
| 1394 | + height: 24px; | ||
| 1395 | + background-size: 100%; | ||
| 1396 | +} | ||
| 1397 | + | ||
| 1398 | +.voicePlay { | ||
| 1399 | + animation-name: voicePlay; | ||
| 1400 | + animation-duration: 1.2s; | ||
| 1401 | + animation-direction: normal; | ||
| 1402 | + animation-iteration-count: infinite; | ||
| 1403 | + animation-timing-function: steps(3); | ||
| 1404 | + /* animation: fadeInOut 1s infinite 0.4s; */ | ||
| 1405 | +} | ||
| 1406 | + | ||
| 1407 | +@keyframes voicePlay { | ||
| 1408 | + 0% { | ||
| 1409 | + opacity: 0; | ||
| 1410 | + } | ||
| 1411 | + 20% { | ||
| 1412 | + opacity: 0.2; | ||
| 1413 | + } | ||
| 1414 | + 40% { | ||
| 1415 | + opacity: 0.6; | ||
| 1416 | + } | ||
| 1417 | + 80% { | ||
| 1418 | + opacity: 0.8; | ||
| 1419 | + } | ||
| 1420 | + | ||
| 1421 | + 100% { | ||
| 1422 | + opacity: 1; | ||
| 1423 | + } | ||
| 1424 | +} | ||
| 1425 | + | ||
| 1426 | +/* @keyframes voicePlay { | ||
| 1427 | + 0% { | ||
| 1428 | + background-position: 0; | ||
| 1429 | + } | ||
| 1430 | + 100% { | ||
| 1431 | + background-position: -200%; | ||
| 1432 | + } | ||
| 1433 | +} */ | ||
| 1434 | + | ||
| 1435 | +.box { | ||
| 1436 | + width: 1.2rem; | ||
| 1437 | + height: 1.2rem; | ||
| 1438 | + box-sizing: border-box; | ||
| 1439 | + position: relative; | ||
| 1440 | + margin: 0.5rem auto; | ||
| 1441 | +} | ||
| 1442 | + | ||
| 1443 | +.wifi-symbol { | ||
| 1444 | + width: 0.5rem; | ||
| 1445 | + height: 0.5rem; | ||
| 1446 | + box-sizing: border-box; | ||
| 1447 | + overflow: hidden; | ||
| 1448 | + transform: rotate(135deg); | ||
| 1449 | +} | ||
| 1450 | + | ||
| 1451 | +.wifi-circle { | ||
| 1452 | + border: 0.03rem solid #999999; | ||
| 1453 | + border-radius: 50%; | ||
| 1454 | + position: absolute; | ||
| 1455 | +} | ||
| 1456 | + | ||
| 1457 | +.first { | ||
| 1458 | + width: 0.05rem; | ||
| 1459 | + height: 0.05rem; | ||
| 1460 | + background: #cccccc; | ||
| 1461 | + top: 0.45rem; | ||
| 1462 | + left: 0.45rem; | ||
| 1463 | +} | ||
| 1464 | + | ||
| 1465 | +.second { | ||
| 1466 | + width: 0.25rem; | ||
| 1467 | + height: 0.25rem; | ||
| 1468 | + top: 0.35rem; | ||
| 1469 | + left: 0.35rem; | ||
| 1470 | + animation: fadeInOut 1s infinite 0.2s; | ||
| 1471 | +} | ||
| 1472 | + | ||
| 1473 | +.third { | ||
| 1474 | + width: 0.4rem; | ||
| 1475 | + height: 0.4rem; | ||
| 1476 | + top: 0.25rem; | ||
| 1477 | + left: 0.25rem; | ||
| 1478 | + animation: fadeInOut 1s infinite 0.4s; | ||
| 1479 | +} | ||
| 1480 | + | ||
| 1481 | +@keyframes fadeInOut { | ||
| 1482 | + 0% { | ||
| 1483 | + opacity: 0; | ||
| 1484 | + /*初始状态 透明度为0*/ | ||
| 1485 | + } | ||
| 1486 | + | ||
| 1487 | + 100% { | ||
| 1488 | + opacity: 1; | ||
| 1489 | + /*结尾状态 透明度为1*/ | ||
| 1490 | + } | ||
| 1491 | +} | ||
| 1492 | +/* | ||
| 1493 | +.box { | ||
| 1494 | + width: 1.2rem; | ||
| 1495 | + height: 1.2rem; | ||
| 1496 | + box-sizing: border-box; | ||
| 1497 | + position: relative; | ||
| 1498 | + margin: 0.05rem auto; | ||
| 1499 | +} | ||
| 1500 | + | ||
| 1501 | +.wifi-symbol { | ||
| 1502 | + width: 0.05rem; | ||
| 1503 | + height: 0.05rem; | ||
| 1504 | + box-sizing: border-box; | ||
| 1505 | + overflow: hidden; | ||
| 1506 | + transform: rotate(135deg); | ||
| 1507 | +} | ||
| 1508 | +.wifi-symbolk { | ||
| 1509 | + transform: rotate(315deg); | ||
| 1510 | +} | ||
| 1511 | + | ||
| 1512 | +.wifi-circle { | ||
| 1513 | + border: 0.05rem solid #999999; | ||
| 1514 | + border-radius: 50%; | ||
| 1515 | + position: absolute; | ||
| 1516 | +} | ||
| 1517 | + | ||
| 1518 | +.first { | ||
| 1519 | + width: 0.05rem; | ||
| 1520 | + height: 0.05rem; | ||
| 1521 | + background: #cccccc; | ||
| 1522 | + top: 0.45rem; | ||
| 1523 | + left: 0.45rem; | ||
| 1524 | +} | ||
| 1525 | + | ||
| 1526 | +.second { | ||
| 1527 | + width: 0.25rem; | ||
| 1528 | + height: 0.25rem; | ||
| 1529 | + top: 0.35rem; | ||
| 1530 | + left: 0.35rem; | ||
| 1531 | +} | ||
| 1532 | + | ||
| 1533 | +.third { | ||
| 1534 | + width: 0.4rem; | ||
| 1535 | + height: 0.4rem; | ||
| 1536 | + top: 0.25rem; | ||
| 1537 | + left: 0.25rem; | ||
| 1538 | +} | ||
| 1539 | +.secondan { | ||
| 1540 | + animation: fadeInOut 1s infinbite 0.2s; | ||
| 1541 | +} | ||
| 1542 | +.thirdan { | ||
| 1543 | + animation: fadeInOut 1s infinite 0.4s; | ||
| 1544 | +} | ||
| 1545 | + | ||
| 1546 | +@keyframes fadeInOut { | ||
| 1547 | + 0% { | ||
| 1548 | + opacity: 0; | ||
| 1549 | + } | ||
| 1550 | + | ||
| 1551 | + 100% { | ||
| 1552 | + opacity: 1; | ||
| 1553 | + } | ||
| 1554 | +} */ | ||
| 1555 | +/* .box { | ||
| 1556 | + width: 120px; | ||
| 1557 | + height: 120px; | ||
| 1558 | + box-sizing: border-box; | ||
| 1559 | + position: relative; | ||
| 1560 | + margin: 50px auto; | ||
| 1561 | +} | ||
| 1562 | +.wifi-symbol { | ||
| 1563 | + width: 50px; | ||
| 1564 | + height: 50px; | ||
| 1565 | + box-sizing: border-box; | ||
| 1566 | + overflow: hidden; | ||
| 1567 | + transform: rotate(135deg); | ||
| 1568 | +} | ||
| 1569 | +.wifi-symbolk { | ||
| 1570 | + transform: rotate(315deg); | ||
| 1571 | +} | ||
| 1572 | +.wifi-circle { | ||
| 1573 | + border: 5px solid #999999; | ||
| 1574 | + border-radius: 50%; | ||
| 1575 | + position: absolute; | ||
| 1576 | +} | ||
| 1577 | +.first { | ||
| 1578 | + width: 0.05rem; | ||
| 1579 | + height: 0.05rem; | ||
| 1580 | + background: #cccccc; | ||
| 1581 | + top: 45px; | ||
| 1582 | + left: 45px; | ||
| 1583 | +} | ||
| 1584 | +.second { | ||
| 1585 | + width: 0.25rem; | ||
| 1586 | + height: 0.25rem; | ||
| 1587 | + top: 35px; | ||
| 1588 | + left: 35px; | ||
| 1589 | + animation: fadeInOut 1s infinite 0.2s; | ||
| 1590 | +} | ||
| 1591 | +.third { | ||
| 1592 | + width: 0.4rem; | ||
| 1593 | + height: 0.4rem; | ||
| 1594 | + top: 25px; | ||
| 1595 | + left: 25px; | ||
| 1596 | + animation: fadeInOut 1s infinite 0.4s; | ||
| 1597 | +} | ||
| 1598 | + | ||
| 1599 | +@keyframes fadeInOut { | ||
| 1600 | + 0% { | ||
| 1601 | + opacity: 0; | ||
| 1602 | + } | ||
| 1603 | + 100% { | ||
| 1604 | + opacity: 1; | ||
| 1605 | + } | ||
| 1606 | +} */ | ||
| 1607 | +</style> |
src/components/views/course/searchcourse.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="container"> | ||
| 3 | + <div class="flextwo sharetopk" @click="back"> | ||
| 4 | + <div class="leftrow leftrowkimg"> | ||
| 5 | + <img src="../../../assets/leftrow.png" alt /> | ||
| 6 | + </div> | ||
| 7 | + <div class="sharemiddle">搜索</div> | ||
| 8 | + <div class="sharebtn"> | ||
| 9 | + <!-- <img src="../../../assets/sharebtn.png" alt /> --> | ||
| 10 | + </div> | ||
| 11 | + </div> | ||
| 12 | + <!-- 顶部搜素 --> | ||
| 13 | + <div class="searchhead"> | ||
| 14 | + <div class="searchbox flexone"> | ||
| 15 | + <div class="searchimg"> | ||
| 16 | + <img src="../../../assets/search.png" alt /> | ||
| 17 | + </div> | ||
| 18 | + | ||
| 19 | + <input type="text" placeholder="搜索你感兴趣的课程文章" class="searchtext" @keyup.enter="selsectword" /> | ||
| 20 | + </div> | ||
| 21 | + </div> | ||
| 22 | + <div class="courseboxbox"> | ||
| 23 | + <!-- 课程 --> | ||
| 24 | + <div v-if="selnav == 0"> | ||
| 25 | + <div class="nodata" v-if="videolist.length == 0">暂无数据</div> | ||
| 26 | + <van-list | ||
| 27 | + class="courseboxk" | ||
| 28 | + v-model="loading" | ||
| 29 | + :finished="finished" | ||
| 30 | + finished-text="没有更多了" | ||
| 31 | + @load="onLoad" | ||
| 32 | + v-else | ||
| 33 | + > | ||
| 34 | + <div | ||
| 35 | + class="courseboxitem" | ||
| 36 | + v-for="(item, index) in videolist" | ||
| 37 | + :key="index" | ||
| 38 | + @click="coursedetail(item)" | ||
| 39 | + > | ||
| 40 | + <div class="coursenameimg"> | ||
| 41 | + <img :src="item.image" alt /> | ||
| 42 | + </div> | ||
| 43 | + <div class="coursetext"> | ||
| 44 | + <div class="coursetitle">{{ item.title }}</div> | ||
| 45 | + <div class="coursename">{{ item.description }}</div> | ||
| 46 | + <div class="courseteacher">讲师：{{ item.user.nickname }}</div> | ||
| 47 | + </div> | ||
| 48 | + </div> | ||
| 49 | + </van-list> | ||
| 50 | + </div> | ||
| 51 | + | ||
| 52 | + <!-- 营养小知识 --> | ||
| 53 | + <div v-if="selnav == 1"> | ||
| 54 | + <div class="nodata" v-if="yinglist.length == 0">暂无数据</div> | ||
| 55 | + <van-list | ||
| 56 | + class="courseboxk" | ||
| 57 | + v-model="loadingying" | ||
| 58 | + :finished="finishedying" | ||
| 59 | + finished-text="没有更多了" | ||
| 60 | + @load="onLoadyinyang" | ||
| 61 | + v-else | ||
| 62 | + > | ||
| 63 | + <div | ||
| 64 | + class="courseboxitem" | ||
| 65 | + v-for="item in yinglist" | ||
| 66 | + :key="item.id" | ||
| 67 | + @click="yingyangdetail(item.id)" | ||
| 68 | + > | ||
| 69 | + <div class="coursenameimg"> | ||
| 70 | + <img :src="item.image" alt /> | ||
| 71 | + </div> | ||
| 72 | + <div class="coursetext"> | ||
| 73 | + <div class="coursename knowlagename" v-html="item.title"></div> | ||
| 74 | + </div> | ||
| 75 | + </div> | ||
| 76 | + </van-list> | ||
| 77 | + </div> | ||
| 78 | + </div> | ||
| 79 | + </div> | ||
| 80 | +</template> | ||
| 81 | + | ||
| 82 | +<script> | ||
| 83 | +import Vue from "vue"; | ||
| 84 | +import tabBar from "@/components/views/tabBar.vue"; | ||
| 85 | +import { List } from "vant"; | ||
| 86 | +Vue.use(List); | ||
| 87 | +export default { | ||
| 88 | + data() { | ||
| 89 | + return { | ||
| 90 | + selnav: 0, | ||
| 91 | + loading: false, | ||
| 92 | + finished: false, | ||
| 93 | + videolist: [], | ||
| 94 | + // 营养知识 | ||
| 95 | + loadingying: false, | ||
| 96 | + finishedying: false, | ||
| 97 | + yinglist: [], | ||
| 98 | + videopage: 1, | ||
| 99 | + this_page: "", | ||
| 100 | + total_page: "", | ||
| 101 | + now: "", | ||
| 102 | + next: "", | ||
| 103 | + keyword: "" | ||
| 104 | + }; | ||
| 105 | + }, | ||
| 106 | + created() { | ||
| 107 | + document.title = "唐元集公众号"; | ||
| 108 | + this.selnav = this.$route.query.selnav; | ||
| 109 | + if (this.selnav == 0) { | ||
| 110 | + this.getvideolist(); | ||
| 111 | + } else if (this.selnav == 1) { | ||
| 112 | + this.getyingyang(); | ||
| 113 | + } | ||
| 114 | + }, | ||
| 115 | + methods: { | ||
| 116 | + back() { | ||
| 117 | + this.$router.go(-1); | ||
| 118 | + }, | ||
| 119 | + selsectword(e) { | ||
| 120 | + console.log(e); | ||
| 121 | + this.keyword = e.target.value; | ||
| 122 | + this.videolist = []; | ||
| 123 | + this.videopage = 1; | ||
| 124 | + this.yinglist = []; | ||
| 125 | + if (this.selnav == 0) { | ||
| 126 | + this.getvideolist(); | ||
| 127 | + } else if (this.selnav == 1) { | ||
| 128 | + this.getyingyang(); | ||
| 129 | + } | ||
| 130 | + }, | ||
| 131 | + // 获取首页接口 | ||
| 132 | + getindex() { | ||
| 133 | + let that = this; | ||
| 134 | + var url = "/api/index/index"; | ||
| 135 | + let param = {}; | ||
| 136 | + | ||
| 137 | + that.$axios | ||
| 138 | + .get(url, param) | ||
| 139 | + .then(function (res) { | ||
| 140 | + console.log(res); | ||
| 141 | + that.now = res.data.now; | ||
| 142 | + that.next = res.data.next; | ||
| 143 | + }) | ||
| 144 | + .catch(function (err) { | ||
| 145 | + console.log(err); | ||
| 146 | + }); | ||
| 147 | + }, | ||
| 148 | + // 视频上拉加载 | ||
| 149 | + onLoad() { | ||
| 150 | + let that = this; | ||
| 151 | + // 异步更新数据 | ||
| 152 | + // setTimeout 仅做示例，真实场景中一般为 ajax 请求 | ||
| 153 | + setTimeout(() => { | ||
| 154 | + console.log(3434); | ||
| 155 | + | ||
| 156 | + let newvideopage = that.videopage; | ||
| 157 | + newvideopage++; | ||
| 158 | + that.videopage = newvideopage; | ||
| 159 | + console.log(that.videopage); | ||
| 160 | + that.getvideolist(); | ||
| 161 | + | ||
| 162 | + // 加载状态结束 | ||
| 163 | + this.loading = false; | ||
| 164 | + // 数据全部加载完成 | ||
| 165 | + if (that.this_page == that.total_page) { | ||
| 166 | + this.finished = true; | ||
| 167 | + } | ||
| 168 | + }, 1000); | ||
| 169 | + }, | ||
| 170 | + | ||
| 171 | + // 营养知识上拉加载 | ||
| 172 | + onLoadyinyang() { | ||
| 173 | + let that = this; | ||
| 174 | + // 异步更新数据 | ||
| 175 | + // setTimeout 仅做示例，真实场景中一般为 ajax 请求 | ||
| 176 | + setTimeout(() => { | ||
| 177 | + console.log(3434); | ||
| 178 | + | ||
| 179 | + let newvideopage = that.videopage; | ||
| 180 | + newvideopage++; | ||
| 181 | + that.videopage = newvideopage; | ||
| 182 | + console.log(that.videopage); | ||
| 183 | + that.getyingyang(); | ||
| 184 | + | ||
| 185 | + // 加载状态结束 | ||
| 186 | + this.loadingying = false; | ||
| 187 | + // 数据全部加载完成 | ||
| 188 | + if (that.this_page == that.total_page) { | ||
| 189 | + this.finishedying = true; | ||
| 190 | + } | ||
| 191 | + }, 1000); | ||
| 192 | + }, | ||
| 193 | + | ||
| 194 | + // 获取视频 | ||
| 195 | + getvideolist() { | ||
| 196 | + let that = this; | ||
| 197 | + var url = "/api/index/lesson_list"; | ||
| 198 | + let param = { | ||
| 199 | + keyword: that.keyword, | ||
| 200 | + page: that.videopage | ||
| 201 | + }; | ||
| 202 | + | ||
| 203 | + that.$axios | ||
| 204 | + .post(url, param, Headers) | ||
| 205 | + .then(res => { | ||
| 206 | + console.log(res, "列表"); | ||
| 207 | + that.videolist = that.videolist.concat(res.data.lesson); | ||
| 208 | + that.total_page = res.data.total_page; | ||
| 209 | + that.this_page = res.data.this_page; | ||
| 210 | + }) | ||
| 211 | + .catch(err => { | ||
| 212 | + console.log(err); | ||
| 213 | + | ||
| 214 | + // setTimeout(function () { | ||
| 215 | + // that.$router.go(-1) | ||
| 216 | + // }) | ||
| 217 | + }); | ||
| 218 | + }, | ||
| 219 | + // 获取营养知识 | ||
| 220 | + getyingyang() { | ||
| 221 | + console.log(9999); | ||
| 222 | + let that = this; | ||
| 223 | + var url = "/api/index/knowledge_list"; | ||
| 224 | + let param = { | ||
| 225 | + keyword: that.keyword, | ||
| 226 | + page: that.videopage | ||
| 227 | + }; | ||
| 228 | + that.$axios | ||
| 229 | + .post(url, param) | ||
| 230 | + .then(res => { | ||
| 231 | + console.log(res, "列表"); | ||
| 232 | + that.yinglist = that.yinglist.concat(res.data.knowledge); | ||
| 233 | + that.total_page = res.data.total_page; | ||
| 234 | + that.this_page = res.data.this_page; | ||
| 235 | + }) | ||
| 236 | + .catch(err => { | ||
| 237 | + console.log(err); | ||
| 238 | + | ||
| 239 | + // setTimeout(function () { | ||
| 240 | + // that.$router.go(-1) | ||
| 241 | + // }) | ||
| 242 | + }); | ||
| 243 | + }, | ||
| 244 | + // 进入营养详情页面 | ||
| 245 | + yingyangdetail(id) { | ||
| 246 | + this.$router.push({ | ||
| 247 | + path: "/yingyangdetail", | ||
| 248 | + query: { id: id } | ||
| 249 | + }); | ||
| 250 | + }, | ||
| 251 | + // 录播详情 | ||
| 252 | + coursedetail(item) { | ||
| 253 | + this.$router.push({ | ||
| 254 | + path: "/lubodetail", | ||
| 255 | + query: { | ||
| 256 | + id: item.id | ||
| 257 | + } | ||
| 258 | + }); | ||
| 259 | + } | ||
| 260 | + } | ||
| 261 | +}; | ||
| 262 | +</script> | ||
| 263 | + | ||
| 264 | +<style scoped> | ||
| 265 | +@import "../../../style/course.css"; | ||
| 266 | +.coursetitlek { | ||
| 267 | + color: #02170b; | ||
| 268 | + font-size: 0.32rem; | ||
| 269 | + margin-bottom: 0.12rem; | ||
| 270 | +} | ||
| 271 | +.searchhead { | ||
| 272 | + margin-top: 0.8rem; | ||
| 273 | +} | ||
| 274 | +.courseboxbox { | ||
| 275 | + margin-top: 2rem; | ||
| 276 | +} | ||
| 277 | +</style> |
| 1 | <template> | 1 | <template> |
| 2 | - <div class="containerbox"></div> | 2 | + <div class="containerbox"> |
| 3 | + <div class="sharetop flextwo" @click="back"> | ||
| 4 | + <div class="leftrow"> | ||
| 5 | + <img src="../../../assets/leftrow.png" alt /> | ||
| 6 | + </div> | ||
| 7 | + <div class="sharemiddle">图文类</div> | ||
| 8 | + <div class="flexone" @click.stop="collect"> | ||
| 9 | + <div class="sharebtn" style="margin-right:0.5rem;width:0.4rem;height:0.4rem"> | ||
| 10 | + <img src="../../../assets/nostar.png" alt v-if="yingyangdetail.is_favorite==0" /> | ||
| 11 | + <img src="../../../assets/star.png" alt v-else /> | ||
| 12 | + </div> | ||
| 13 | + <div class="sharebtn"> | ||
| 14 | + <img src="../../../assets/sharebtn.png" alt /> | ||
| 15 | + </div> | ||
| 16 | + </div> | ||
| 17 | + </div> | ||
| 18 | + <div class="yingyangbox"> | ||
| 19 | + <div class="yingyangtitle">{{yingyangdetail.title}}</div> | ||
| 20 | + <div class="yingyangcontent" v-html="yingyangdetail.content"></div> | ||
| 21 | + </div> | ||
| 22 | + </div> | ||
| 3 | </template> | 23 | </template> |
| 4 | 24 | ||
| 5 | <script> | 25 | <script> |
| 26 | +import { Toast } from 'vant'; | ||
| 6 | export default { | 27 | export default { |
| 7 | data() { | 28 | data() { |
| 8 | return { | 29 | return { |
| 9 | - id: '' | 30 | + id: '', |
| 31 | + yingyangdetail: '', | ||
| 10 | } | 32 | } |
| 11 | }, | 33 | }, |
| 34 | + created() { | ||
| 35 | + this.id = this.$route.query.id; | ||
| 36 | + }, | ||
| 12 | methods: { | 37 | methods: { |
| 38 | + back() { | ||
| 39 | + this.$router.go(-1) | ||
| 40 | + }, | ||
| 13 | getdetail() { | 41 | getdetail() { |
| 14 | let that = this; | 42 | let that = this; |
| 15 | var url = "/api/index/knowledge_detail"; | 43 | var url = "/api/index/knowledge_detail"; |
| 16 | let param = { | 44 | let param = { |
| 17 | - id: that.id | 45 | + knowledge_id: that.id |
| 18 | }; | 46 | }; |
| 19 | 47 | ||
| 20 | that.$axios | 48 | that.$axios |
| 21 | .post(url, param) | 49 | .post(url, param) |
| 22 | .then(function (res) { | 50 | .then(function (res) { |
| 23 | console.log(res); | 51 | console.log(res); |
| 52 | + that.yingyangdetail = res.data.knowledge | ||
| 24 | 53 | ||
| 25 | }) | 54 | }) |
| 26 | .catch(function (err) { | 55 | .catch(function (err) { |
| 27 | console.log(err); | 56 | console.log(err); |
| 28 | }); | 57 | }); |
| 29 | - } | 58 | + }, |
| 59 | + collect() { | ||
| 60 | + let that = this; | ||
| 61 | + var url = "/api/user/favorite"; | ||
| 62 | + let param = { | ||
| 63 | + type: 1, | ||
| 64 | + favorite_id: that.id | ||
| 65 | + }; | ||
| 66 | + | ||
| 67 | + that.$axios | ||
| 68 | + .post(url, param) | ||
| 69 | + .then(function (res) { | ||
| 70 | + console.log(res); | ||
| 71 | + if (that.yingyangdetail.is_favorite == 0) { | ||
| 72 | + Toast('收藏成功') | ||
| 73 | + that.yingyangdetail.is_favorite = 1; | ||
| 74 | + that.yingyangdetailt = that.yingyangdetail | ||
| 75 | + } else { | ||
| 76 | + Toast('取消收藏成功') | ||
| 77 | + that.yingyangdetail.is_favorite = 0; | ||
| 78 | + that.yingyangdetail = that.yingyangdetail | ||
| 79 | + } | ||
| 80 | + | ||
| 81 | + }) | ||
| 82 | + .catch(function (err) { | ||
| 83 | + console.log(err); | ||
| 84 | + }); | ||
| 85 | + }, | ||
| 30 | 86 | ||
| 31 | }, | 87 | }, |
| 32 | created() { | 88 | created() { |
| 89 | + document.title = '唐元集公众号' | ||
| 33 | this.id = this.$route.query.id; | 90 | this.id = this.$route.query.id; |
| 34 | this.getdetail() | 91 | this.getdetail() |
| 35 | } | 92 | } |
| @@ -41,5 +98,17 @@ export default { | @@ -41,5 +98,17 @@ export default { | ||
| 41 | .containerbox { | 98 | .containerbox { |
| 42 | padding: 0.32rem; | 99 | padding: 0.32rem; |
| 43 | box-sizing: border-box; | 100 | box-sizing: border-box; |
| 101 | + background: #fff; | ||
| 102 | +} | ||
| 103 | +.yingyangtitle { | ||
| 104 | + color: #02170b; | ||
| 105 | + font-size: 0.4rem; | ||
| 106 | +} | ||
| 107 | +.yingyangcontent { | ||
| 108 | + color: #666e69; | ||
| 109 | + font-size: 0.32rem; | ||
| 110 | +} | ||
| 111 | +.yingyangbox { | ||
| 112 | + margin-top: 0.6rem; | ||
| 44 | } | 113 | } |
| 45 | </style> | 114 | </style> |
| @@ -106,6 +106,9 @@ export default { | @@ -106,6 +106,9 @@ export default { | ||
| 106 | iszhibo: false | 106 | iszhibo: false |
| 107 | } | 107 | } |
| 108 | }, | 108 | }, |
| 109 | + created() { | ||
| 110 | + document.title = '唐元集公众号' | ||
| 111 | + }, | ||
| 109 | methods: { | 112 | methods: { |
| 110 | overvideo() { | 113 | overvideo() { |
| 111 | this.iszhibo = false | 114 | this.iszhibo = false |
| 1 | <template> | 1 | <template> |
| 2 | <div class="containerbox"></div> | 2 | <div class="containerbox"></div> |
| 3 | </template> | 3 | </template> |
| 4 | - | ||
| 5 | <script> | 4 | <script> |
| 6 | import Vue from "vue"; | 5 | import Vue from "vue"; |
| 7 | import { getUrlKey } from "../../utils/utils.js"; | 6 | import { getUrlKey } from "../../utils/utils.js"; |
| 1 | <template> | 1 | <template> |
| 2 | <div class="containerbox"> | 2 | <div class="containerbox"> |
| 3 | + <div class="flextwo sharetopk" @click="back"> | ||
| 4 | + <div class="leftrow leftrowkimg"> | ||
| 5 | + <img src="../../../assets/leftrow.png" alt /> | ||
| 6 | + </div> | ||
| 7 | + <div class="sharemiddle">发布</div> | ||
| 8 | + <div class="sharebtn"> | ||
| 9 | + <!-- <img src="../../../assets/sharebtn.png" alt /> --> | ||
| 10 | + </div> | ||
| 11 | + </div> | ||
| 3 | <div class="topcontainer"> | 12 | <div class="topcontainer"> |
| 4 | <div class="publishitem flextwo" @click="selectkind"> | 13 | <div class="publishitem flextwo" @click="selectkind"> |
| 5 | <div class="publeft flexone"> | 14 | <div class="publeft flexone"> |
| 6 | <div class="kindname"> | 15 | <div class="kindname"> |
| 7 | <span class="kindleft">分类</span> | 16 | <span class="kindleft">分类</span> |
| 8 | - {{kindname}} | 17 | + {{ kindname }} |
| 9 | </div> | 18 | </div> |
| 10 | </div> | 19 | </div> |
| 11 | 20 | ||
| @@ -14,13 +23,14 @@ | @@ -14,13 +23,14 @@ | ||
| 14 | <div class="enterkind"> | 23 | <div class="enterkind"> |
| 15 | <textarea name id cols="30" rows="10" placeholder="请输入您的想法" v-model="kindidea"></textarea> | 24 | <textarea name id cols="30" rows="10" placeholder="请输入您的想法" v-model="kindidea"></textarea> |
| 16 | </div> | 25 | </div> |
| 26 | + <!-- <div @click="uppic">上传图片</div> --> | ||
| 17 | 27 | ||
| 18 | <div> | 28 | <div> |
| 19 | <van-uploader | 29 | <van-uploader |
| 20 | v-model="fileList" | 30 | v-model="fileList" |
| 21 | multiple="true" | 31 | multiple="true" |
| 22 | :after-read="afterRead" | 32 | :after-read="afterRead" |
| 23 | - :max-count="8" | 33 | + :max-count="9" |
| 24 | @delete="deleftimg" | 34 | @delete="deleftimg" |
| 25 | /> | 35 | /> |
| 26 | 36 | ||
| @@ -28,8 +38,21 @@ | @@ -28,8 +38,21 @@ | ||
| 28 | <img src="../../../assets/addpub.png" alt /> | 38 | <img src="../../../assets/addpub.png" alt /> |
| 29 | </div>--> | 39 | </div>--> |
| 30 | </div> | 40 | </div> |
| 41 | + | ||
| 42 | + <div class="videoimgll"> | ||
| 43 | + <img src="../../../assets/upvideo.png" alt class="videoimgbtn" v-if="video_image==''" /> | ||
| 44 | + <img :src="video_image" alt v-else /> | ||
| 45 | + <div class="videoimgkk"> | ||
| 46 | + <input type="file" accept="video/*" @change="uploadfileone" /> | ||
| 47 | + </div> | ||
| 48 | + <img src="../../../assets/anniu.png" alt class="listanniu" v-if="video_image!=''" /> | ||
| 49 | + </div> | ||
| 50 | + | ||
| 51 | + <!-- <div class="pubimg"></div> --> | ||
| 31 | </div> | 52 | </div> |
| 32 | 53 | ||
| 54 | + <van-loading type="spinner" color="#1989fa" v-if="cardzheng" /> | ||
| 55 | + | ||
| 33 | <div class="kaishilu" @click="publish">发布</div> | 56 | <div class="kaishilu" @click="publish">发布</div> |
| 34 | <div class="pubpicker" v-if="showkind"> | 57 | <div class="pubpicker" v-if="showkind"> |
| 35 | <van-picker | 58 | <van-picker |
| @@ -51,9 +74,15 @@ | @@ -51,9 +74,15 @@ | ||
| 51 | </template> | 74 | </template> |
| 52 | 75 | ||
| 53 | <script> | 76 | <script> |
| 54 | -import Vue from 'vue'; | ||
| 55 | -import { Picker, Uploader, Toast } from 'vant'; | 77 | +import Vue from "vue"; |
| 78 | +import wx from "weixin-js-sdk"; | ||
| 56 | import "vant/lib/index.css"; | 79 | import "vant/lib/index.css"; |
| 80 | +console.log(wx); | ||
| 81 | +import { Picker, Uploader, Toast, Loading } from "vant"; | ||
| 82 | + | ||
| 83 | + | ||
| 84 | +Vue.use(Loading); | ||
| 85 | + | ||
| 57 | Vue.use(Picker); | 86 | Vue.use(Picker); |
| 58 | Vue.use(Toast); | 87 | Vue.use(Toast); |
| 59 | Vue.use(Uploader); | 88 | Vue.use(Uploader); |
| @@ -62,123 +91,173 @@ export default { | @@ -62,123 +91,173 @@ export default { | ||
| 62 | return { | 91 | return { |
| 63 | columns: [], | 92 | columns: [], |
| 64 | showkind: false, | 93 | showkind: false, |
| 65 | - kindname: '请选择分类', | 94 | + kindname: "请选择分类", |
| 66 | success: false, | 95 | success: false, |
| 67 | - kindidea: '', | 96 | + kindidea: "", |
| 68 | fileList: [], | 97 | fileList: [], |
| 69 | images: [], | 98 | images: [], |
| 70 | chuanimage: [], | 99 | chuanimage: [], |
| 71 | delimg: [], | 100 | delimg: [], |
| 72 | sort: [], | 101 | sort: [], |
| 73 | - sort_id: '' | ||
| 74 | - } | 102 | + sort_id: "", |
| 103 | + chuanvideo: '', | ||
| 104 | + showvideo: '', | ||
| 105 | + video_image: '', | ||
| 106 | + cardzheng: false | ||
| 107 | + }; | ||
| 75 | }, | 108 | }, |
| 76 | created() { | 109 | created() { |
| 77 | - this.getkindlist() | 110 | + document.title = "唐元集公众号"; |
| 111 | + this.getkindlist(); | ||
| 78 | }, | 112 | }, |
| 79 | methods: { | 113 | methods: { |
| 114 | + uppic() { | ||
| 115 | + console.log(3378378); | ||
| 116 | + wx.ready(() => { | ||
| 117 | + wx.chooseImage({ | ||
| 118 | + count: 1, | ||
| 119 | + sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有 | ||
| 120 | + sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有 | ||
| 121 | + success: function (res) { | ||
| 122 | + var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片 | ||
| 123 | + that.pic = localIds[0]; | ||
| 124 | + } | ||
| 125 | + }); | ||
| 126 | + }); | ||
| 127 | + | ||
| 128 | + // 预览图片接; | ||
| 129 | + // wx.uploadImage({ | ||
| 130 | + // localId: "", // 需要上传的图片的本地ID，由chooseImage接口获得 | ||
| 131 | + // isShowProgressTips: 1, // 默认为1，显示进度提示 | ||
| 132 | + // success: function(res) { | ||
| 133 | + // var serverId = res.serverId; // 返回图片的服务器端ID | ||
| 134 | + // } | ||
| 135 | + // }); | ||
| 136 | + }, | ||
| 137 | + back() { | ||
| 138 | + this.$router.go(-1); | ||
| 139 | + }, | ||
| 80 | selectkind() { | 140 | selectkind() { |
| 81 | - this.showkind = true | 141 | + this.showkind = true; |
| 82 | }, | 142 | }, |
| 83 | 143 | ||
| 84 | onCancel() { | 144 | onCancel() { |
| 85 | - console.log(347344) | ||
| 86 | - this.showkind = false | 145 | + console.log(347344); |
| 146 | + this.showkind = false; | ||
| 87 | }, | 147 | }, |
| 88 | onConfirm(value, index) { | 148 | onConfirm(value, index) { |
| 89 | - console.log(78343784) | ||
| 90 | - this.showkind = false | ||
| 91 | - this.kindname = value | ||
| 92 | - this.sort_id = this.sort[index].id | ||
| 93 | - | 149 | + console.log(78343784); |
| 150 | + this.showkind = false; | ||
| 151 | + this.kindname = value; | ||
| 152 | + this.sort_id = this.sort[index].id; | ||
| 94 | }, | 153 | }, |
| 95 | 154 | ||
| 96 | sure() { | 155 | sure() { |
| 97 | - this.success = false | 156 | + this.success = false; |
| 98 | }, | 157 | }, |
| 99 | // 上传图片 | 158 | // 上传图片 |
| 100 | afterRead(file) { | 159 | afterRead(file) { |
| 101 | let that = this; | 160 | let that = this; |
| 102 | - console.log(file) | ||
| 103 | - console.log(file.length) | 161 | + console.log(file); |
| 162 | + console.log(file.length); | ||
| 163 | + that.cardzheng = true | ||
| 104 | if (file.length == undefined) { | 164 | if (file.length == undefined) { |
| 105 | var formdata = new FormData(); | 165 | var formdata = new FormData(); |
| 106 | formdata.append("file", file.file); | 166 | formdata.append("file", file.file); |
| 107 | - that.delimg.push(file.file.name) | 167 | + that.delimg.push(file.file.name); |
| 108 | var url = "/api/common/upload"; | 168 | var url = "/api/common/upload"; |
| 109 | - let param = { | ||
| 110 | - id: 1 | ||
| 111 | - } | ||
| 112 | - | ||
| 113 | - that | ||
| 114 | - .$uploadFile.post(url, formdata) | 169 | + that.$uploadFile |
| 170 | + .post(url, formdata) | ||
| 115 | .then(function (res) { | 171 | .then(function (res) { |
| 116 | console.log(res); | 172 | console.log(res); |
| 117 | - that.cardzheng = false | 173 | + that.cardzheng = false; |
| 118 | let url = "http://tangyuanji.t.brotop.cn" + res.data.url; | 174 | let url = "http://tangyuanji.t.brotop.cn" + res.data.url; |
| 119 | that.images.push(url); | 175 | that.images.push(url); |
| 120 | that.chuanimage.push(res.data.url); | 176 | that.chuanimage.push(res.data.url); |
| 121 | - | ||
| 122 | - | ||
| 123 | }) | 177 | }) |
| 124 | .catch(err => { | 178 | .catch(err => { |
| 125 | console.log(err); | 179 | console.log(err); |
| 126 | }); | 180 | }); |
| 127 | - | ||
| 128 | } else { | 181 | } else { |
| 129 | for (var i = 0; i < file.length; i++) { | 182 | for (var i = 0; i < file.length; i++) { |
| 130 | - console.log(file[i].file) | 183 | + console.log(file[i].file); |
| 131 | 184 | ||
| 132 | var formdata = new FormData(); | 185 | var formdata = new FormData(); |
| 133 | formdata.append("file", file[i].file); | 186 | formdata.append("file", file[i].file); |
| 134 | - that.delimg.push(file[i].file.name) | 187 | + that.delimg.push(file[i].file.name); |
| 135 | 188 | ||
| 136 | var url = "/api/common/upload"; | 189 | var url = "/api/common/upload"; |
| 137 | 190 | ||
| 138 | - that | ||
| 139 | - .$uploadFile.post(url, formdata) | 191 | + that.$uploadFile |
| 192 | + .post(url, formdata) | ||
| 140 | .then(function (res) { | 193 | .then(function (res) { |
| 141 | console.log(res); | 194 | console.log(res); |
| 142 | - that.cardzheng = false | 195 | + |
| 196 | + that.cardzheng = false; | ||
| 143 | let url = "http://tangyuanji.t.brotop.cn" + res.data.url; | 197 | let url = "http://tangyuanji.t.brotop.cn" + res.data.url; |
| 144 | that.images.push(url); | 198 | that.images.push(url); |
| 145 | that.chuanimage.push(res.data.url); | 199 | that.chuanimage.push(res.data.url); |
| 146 | - | ||
| 147 | }) | 200 | }) |
| 148 | .catch(err => { | 201 | .catch(err => { |
| 149 | console.log(err); | 202 | console.log(err); |
| 203 | + that.cardzheng = false; | ||
| 150 | }); | 204 | }); |
| 151 | } | 205 | } |
| 152 | - | ||
| 153 | - | ||
| 154 | } | 206 | } |
| 155 | }, | 207 | }, |
| 156 | 208 | ||
| 209 | + | ||
| 157 | // 删除文件 | 210 | // 删除文件 |
| 158 | deleftimg(e) { | 211 | deleftimg(e) { |
| 159 | let that = this; | 212 | let that = this; |
| 160 | - let item = e.file.name | 213 | + let item = e.file.name; |
| 161 | this.delimg.forEach(function (value, index, array) { | 214 | this.delimg.forEach(function (value, index, array) { |
| 162 | if (value == item) { | 215 | if (value == item) { |
| 163 | that.delimg.splice(index, 1); | 216 | that.delimg.splice(index, 1); |
| 164 | that.images.splice(index, 1); | 217 | that.images.splice(index, 1); |
| 165 | that.chuanimage.splice(index, 1); | 218 | that.chuanimage.splice(index, 1); |
| 219 | + that.fileList.splice(index, 1) | ||
| 166 | } | 220 | } |
| 167 | }); | 221 | }); |
| 168 | - this.delimg = this.delimg | 222 | + this.delimg = this.delimg; |
| 169 | this.images = this.images; | 223 | this.images = this.images; |
| 170 | this.chuanimage = this.chuanimage; | 224 | this.chuanimage = this.chuanimage; |
| 171 | 225 | ||
| 172 | this.$forceUpdate(); | 226 | this.$forceUpdate(); |
| 227 | + }, | ||
| 228 | + // 上传视频 | ||
| 229 | + | ||
| 230 | + uploadfileone(e) { | ||
| 231 | + let that = this; | ||
| 232 | + | ||
| 233 | + that.cardzheng = true | ||
| 234 | + console.log(e); | ||
| 235 | + let file = e.target.files[0]; | ||
| 236 | + console.log(file); | ||
| 237 | + var formdata = new FormData(); | ||
| 173 | 238 | ||
| 239 | + formdata.append("file", file); | ||
| 240 | + // formdata.append("token", localStorage.getItem("token")); | ||
| 241 | + var url = "/api/common/upload"; | ||
| 242 | + that.$uploadFile | ||
| 243 | + .post(url, formdata) | ||
| 244 | + .then(function (res) { | ||
| 245 | + console.log(res); | ||
| 246 | + that.cardzheng = false | ||
| 247 | + that.chuanvideo = res.data.url; | ||
| 248 | + that.showvideo = res.data.priview_url; | ||
| 249 | + that.video_image = res.data.video_image | ||
| 250 | + }) | ||
| 251 | + .catch(err => { | ||
| 252 | + that.cardzheng = false | ||
| 253 | + console.log(err); | ||
| 254 | + }); | ||
| 174 | }, | 255 | }, |
| 175 | // 获取分类列表 | 256 | // 获取分类列表 |
| 176 | getkindlist() { | 257 | getkindlist() { |
| 177 | let that = this; | 258 | let that = this; |
| 178 | var url = "/api/social/sort"; | 259 | var url = "/api/social/sort"; |
| 179 | - let param = { | ||
| 180 | - | ||
| 181 | - }; | 260 | + let param = {}; |
| 182 | 261 | ||
| 183 | that.$axios | 262 | that.$axios |
| 184 | .post(url, param) | 263 | .post(url, param) |
| @@ -186,72 +265,118 @@ export default { | @@ -186,72 +265,118 @@ export default { | ||
| 186 | console.log(res); | 265 | console.log(res); |
| 187 | let data = res.data; | 266 | let data = res.data; |
| 188 | data.forEach(function (value, index) { | 267 | data.forEach(function (value, index) { |
| 189 | - that.columns.push(value.sort_name) | ||
| 190 | - }) | ||
| 191 | - that.columns = that.columns | ||
| 192 | - that.sort = res.data | ||
| 193 | - | ||
| 194 | - | 268 | + that.columns.push(value.sort_name); |
| 269 | + }); | ||
| 270 | + that.columns = that.columns; | ||
| 271 | + that.sort = res.data; | ||
| 195 | }) | 272 | }) |
| 196 | .catch(function (err) { | 273 | .catch(function (err) { |
| 197 | console.log(err); | 274 | console.log(err); |
| 198 | }); | 275 | }); |
| 199 | }, | 276 | }, |
| 200 | getvalue(value) { | 277 | getvalue(value) { |
| 201 | - console.log(value) | 278 | + console.log(value); |
| 202 | }, | 279 | }, |
| 203 | // 发布 | 280 | // 发布 |
| 204 | publish() { | 281 | publish() { |
| 205 | let that = this; | 282 | let that = this; |
| 206 | var url = "/api/social/send"; | 283 | var url = "/api/social/send"; |
| 207 | - if (that.sort_id == '') { | ||
| 208 | - Toast("请选择分类") | ||
| 209 | - return false | 284 | + if (that.sort_id == "") { |
| 285 | + Toast("请选择分类"); | ||
| 286 | + return false; | ||
| 210 | } | 287 | } |
| 211 | - if (that.kindidea == '') { | ||
| 212 | - Toast("请输入您的想法") | ||
| 213 | - return false | 288 | + if (that.kindidea == "") { |
| 289 | + Toast("请输入您的想法"); | ||
| 290 | + return false; | ||
| 214 | } | 291 | } |
| 215 | if (that.chuanimage.length != that.fileList.length) { | 292 | if (that.chuanimage.length != that.fileList.length) { |
| 216 | - Toast("图片上传中") | ||
| 217 | - return false | 293 | + Toast("图片上传中"); |
| 294 | + return false; | ||
| 295 | + } | ||
| 296 | + if (that.chuanvideo == '' && that.cardzheng == true) { | ||
| 297 | + Toast("视频上传中"); | ||
| 298 | + return false; | ||
| 218 | } | 299 | } |
| 219 | let param = { | 300 | let param = { |
| 220 | sort_id: that.sort_id, | 301 | sort_id: that.sort_id, |
| 221 | description: that.kindidea, | 302 | description: that.kindidea, |
| 222 | - images: that.chuanimage.join(",") | 303 | + images: that.chuanimage.join(","), |
| 304 | + video: that.chuanvideo | ||
| 223 | }; | 305 | }; |
| 224 | 306 | ||
| 225 | that.$axios | 307 | that.$axios |
| 226 | .post(url, param) | 308 | .post(url, param) |
| 227 | .then(function (res) { | 309 | .then(function (res) { |
| 228 | console.log(res); | 310 | console.log(res); |
| 229 | - Toast("发布成功") | ||
| 230 | - that.$router.go(-1) | ||
| 231 | - | ||
| 232 | - | 311 | + Toast("发布成功"); |
| 312 | + that.$router.go(-1); | ||
| 233 | }) | 313 | }) |
| 234 | .catch(function (err) { | 314 | .catch(function (err) { |
| 235 | console.log(err); | 315 | console.log(err); |
| 236 | }); | 316 | }); |
| 237 | } | 317 | } |
| 238 | } | 318 | } |
| 239 | - | ||
| 240 | -} | 319 | +}; |
| 241 | </script> | 320 | </script> |
| 242 | 321 | ||
| 243 | <style scoped> | 322 | <style scoped> |
| 244 | @import "../../../style/society.css"; | 323 | @import "../../../style/society.css"; |
| 324 | +.van-loading { | ||
| 325 | + position: absolute; | ||
| 326 | + top: 50%; | ||
| 327 | + left: 50%; | ||
| 328 | + transform: translate(-50%, -50%); | ||
| 329 | + z-index: 99; | ||
| 330 | +} | ||
| 245 | .topcontainer { | 331 | .topcontainer { |
| 246 | padding: 0 0.32rem; | 332 | padding: 0 0.32rem; |
| 247 | box-sizing: border-box; | 333 | box-sizing: border-box; |
| 248 | background: #fff; | 334 | background: #fff; |
| 249 | padding-bottom: 0.32rem; | 335 | padding-bottom: 0.32rem; |
| 250 | box-sizing: border-box; | 336 | box-sizing: border-box; |
| 337 | + margin-top: 0.8rem; | ||
| 251 | } | 338 | } |
| 252 | .kindleft { | 339 | .kindleft { |
| 253 | color: #323233; | 340 | color: #323233; |
| 254 | font-size: 0.28rem; | 341 | font-size: 0.28rem; |
| 255 | margin-right: 0.32rem; | 342 | margin-right: 0.32rem; |
| 256 | } | 343 | } |
| 257 | -</style> | ||
| 344 | +.videoimgkk { | ||
| 345 | + width: 1.58rem; | ||
| 346 | + height: 1.58rem; | ||
| 347 | + position: absolute; | ||
| 348 | + left: 0; | ||
| 349 | + top: 0; | ||
| 350 | +} | ||
| 351 | +.videoimgll { | ||
| 352 | + width: 1.58rem; | ||
| 353 | + height: 1.58rem; | ||
| 354 | + position: relative; | ||
| 355 | + display: flex; | ||
| 356 | + justify-content: center; | ||
| 357 | + align-items: center; | ||
| 358 | + border: 1px dashed #999; | ||
| 359 | +} | ||
| 360 | +.videoimgkk input { | ||
| 361 | + width: 100%; | ||
| 362 | + height: 100%; | ||
| 363 | + outline: none; | ||
| 364 | + border: none; | ||
| 365 | + opacity: 0; | ||
| 366 | + /* background: transparent; | ||
| 367 | + outline: none; | ||
| 368 | + border: none; */ | ||
| 369 | +} | ||
| 370 | +.listanniu { | ||
| 371 | + width: 0.5rem; | ||
| 372 | + height: 0.5rem; | ||
| 373 | + position: absolute; | ||
| 374 | + top: 50%; | ||
| 375 | + left: 50%; | ||
| 376 | + transform: translate(-50%, -50%); | ||
| 377 | +} | ||
| 378 | +.videoimgbtn { | ||
| 379 | + width: 0.8rem; | ||
| 380 | + height: 0.8rem; | ||
| 381 | +} | ||
| 382 | +</style> |
-
请 注册 或 登录 后发表评论