diff --git a/.eslintrc b/.eslintrc index 991904820..535f74c83 100644 --- a/.eslintrc +++ b/.eslintrc @@ -19,6 +19,7 @@ "browser": true }, "rules": { + "linebreak-style": ["off", "windows"], "jsdoc/check-param-names": 1, "jsdoc/check-tag-names": 1, "jsdoc/check-types": 1, diff --git a/.gitignore b/.gitignore index 48508aa1c..a6e15d275 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ Thumbs.db .DS_Store *.svn .svn +.prettierrc .svn/ *.git .git diff --git a/sites/._m.chinaz.com b/sites/._m.chinaz.com new file mode 100644 index 000000000..a7813b7df Binary files /dev/null and b/sites/._m.chinaz.com differ diff --git a/sites/m.chinaz.com/.editorconfig b/sites/m.chinaz.com/.editorconfig new file mode 100644 index 000000000..cb530eac4 --- /dev/null +++ b/sites/m.chinaz.com/.editorconfig @@ -0,0 +1,14 @@ +UTF-8 +# This file is for unifying the coding style for different editors and IDEs +# editorconfig.org +root = true +[*] +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +[*.{js,styl,html,json,vue}] +indent_size = 2 +indent_style = space +[*.md] +trim_trailing_whitespace = false diff --git a/sites/m.chinaz.com/.eslintignore b/sites/m.chinaz.com/.eslintignore new file mode 100644 index 000000000..db4c6d9b6 --- /dev/null +++ b/sites/m.chinaz.com/.eslintignore @@ -0,0 +1,2 @@ +dist +node_modules \ No newline at end of file diff --git a/sites/m.chinaz.com/.eslintrc b/sites/m.chinaz.com/.eslintrc new file mode 100644 index 000000000..9082b9ca1 --- /dev/null +++ b/sites/m.chinaz.com/.eslintrc @@ -0,0 +1,40 @@ +{ + "parser": "vue-eslint-parser", + "parserOptions": { + "ecmaVersion": 8, + "sourceType": "module", + "allowImportExportEverywhere": false + }, + "extends": [ + "standard", + "plugin:vue/recommended" + ], + "plugins": [ + "jsdoc" + ], + "globals": { + "MIP": true + }, + "env": { + "browser": true + }, + "rules": { + "jsdoc/check-param-names": 1, + "jsdoc/check-tag-names": 1, + "jsdoc/check-types": 1, + "jsdoc/newline-after-description": 1, + "jsdoc/no-undefined-types": 1, + "jsdoc/require-description-complete-sentence": 0, + "jsdoc/require-example": 0, + "jsdoc/require-hyphen-before-param-description": 0, + "jsdoc/require-param": 1, + "jsdoc/require-param-description": 1, + "jsdoc/require-param-name": 1, + "jsdoc/require-param-type": 1, + "jsdoc/require-returns-description": 1, + "jsdoc/require-returns-type": 1, + "jsdoc/valid-types": 1, + "no-var": 2, + "camelcase": 0 + } +} diff --git a/sites/m.chinaz.com/.gitignore b/sites/m.chinaz.com/.gitignore new file mode 100644 index 000000000..1207415d5 --- /dev/null +++ b/sites/m.chinaz.com/.gitignore @@ -0,0 +1,8 @@ +node_modules/ +dist/ +.idea/ +*.log +Thumbs.db +.DS_Store +*.swp +*.gz diff --git a/sites/m.chinaz.com/.prettierrc b/sites/m.chinaz.com/.prettierrc new file mode 100644 index 000000000..fd496a820 --- /dev/null +++ b/sites/m.chinaz.com/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "semi": false +} diff --git a/sites/m.chinaz.com/common/.gitkeep b/sites/m.chinaz.com/common/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/sites/m.chinaz.com/common/mip-common.js b/sites/m.chinaz.com/common/mip-common.js new file mode 100644 index 000000000..53f82a6c0 --- /dev/null +++ b/sites/m.chinaz.com/common/mip-common.js @@ -0,0 +1,57 @@ +/** + * @file 公用 + * @author fl + */ +const { util } = MIP +const { dom } = util +export default class MIPCommon { + /* + *设置cookies + *@param {String} [name] [cookie key] + *@param {String} [value] [cookie 值] + */ + static setCookie (name, value) { + const d = new Date() + d.setTime(d.getTime() + 60 * 2000) + document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + d.toGMTString() + } + + /* + *读取cookies + *@param {String} [name] [cookie key] + */ + static getCookie (name) { + const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)') + const arr = document.cookie.match(reg) + if (arr) { + return parseInt(decodeURIComponent(arr[2]), 10) + } + } + + /* + *时间格式转换 + *@param {Time} [d] [时间戳] + */ + static time (d) { + let result = '' + result += [d.getFullYear(), d.getMonth() + 1, d.getDate()].join('/') + return result.replace(/(-|:)(\d[^\d])/g, '$1' + '0$2') + } + + /* + *提示 + *@param {String} [msg] [提示语] + */ + static cAlert (msg) { + if (document.getElementById('alert_tips')) { + document.getElementById('alert_tips').parentNode.removeChild(document.getElementById('alert_tips')) + } + const cTips = dom.create(`${msg}`) + document.body.appendChild(cTips) + setTimeout(() => { + if (document.getElementById('alert_tips')) { + document.getElementById('alert_tips').parentNode.removeChild(document.getElementById('alert_tips')) + } + }, 5000) + } +} diff --git a/sites/m.chinaz.com/common/mip-common.less b/sites/m.chinaz.com/common/mip-common.less new file mode 100644 index 000000000..ba149d135 --- /dev/null +++ b/sites/m.chinaz.com/common/mip-common.less @@ -0,0 +1,46 @@ + .mip-cz-common{ + #alert_tips { + background: #000; + opacity: .8; + color: #fff; + width: 200px; + line-height: 50px; + left: 50%; + top: 50%; + margin: -25px 0 0 -100px; + text-align: center; + border-radius: 5px; + z-index: 1000000; + padding:0 10px; + &.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn + } + &.animated { + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-duration: 1s; + animation-fill-mode: both + } + } + + @-webkit-keyframes fadeIn { + 0% { + opacity: 0 + } + + to { + opacity: 1 + } + } + + @keyframes fadeIn { + 0% { + opacity: 0 + } + + to { + opacity: 1 + } + } +} \ No newline at end of file diff --git a/sites/m.chinaz.com/components/mip-cz-comment/README.md b/sites/m.chinaz.com/components/mip-cz-comment/README.md new file mode 100644 index 000000000..f84ed748d --- /dev/null +++ b/sites/m.chinaz.com/components/mip-cz-comment/README.md @@ -0,0 +1,41 @@ +# mip-cz-comment + +移动端评价模块样式、逻辑 + +标题|内容 +----|---- +类型|通用 +支持布局|responsive, fixed-height, fill, container, fixed +所需脚本| [https://c.mipcdn.com/extensions/platform/v2/m.chinaz.com/mip-cz-comment/mip-cz-comment.js](https://c.mipcdn.com/extensions/platform/v2/m.chinaz.com/mip-cz-comment/mip-cz-comment.js) + +## 示例 + +### 基本使用 + +```html + +``` + +## 属性 + +### cid + +说明：本页面分类ID + +必选项：是 + +类型：字符串 + +默认值：无 + +### url + +说明：本站点网址 + +必选项：是 + +类型：字符串 + +取值范围：URL + +默认值：无 \ No newline at end of file diff --git a/sites/m.chinaz.com/components/mip-cz-comment/example/index.html b/sites/m.chinaz.com/components/mip-cz-comment/example/index.html new file mode 100644 index 000000000..cc5cb0cf1 --- /dev/null +++ b/sites/m.chinaz.com/components/mip-cz-comment/example/index.html @@ -0,0 +1,20 @@ + + + + + + MIP page + + + + + +
+ +
+ + + + diff --git a/sites/m.chinaz.com/components/mip-cz-comment/index.less b/sites/m.chinaz.com/components/mip-cz-comment/index.less new file mode 100644 index 000000000..d15c9f277 --- /dev/null +++ b/sites/m.chinaz.com/components/mip-cz-comment/index.less @@ -0,0 +1,287 @@ +mip-cz-comment { + fieldset { + border: 0 + } + + input, + textarea { + outline: none; + } + + #comment form { + padding: 20px 0; + } + + #comment .d_title { + border-bottom: 0 !important; + overflow: hidden; + line-height: 35px; + padding: 0 10px 0 10px; + position: relative; + font-size: 16px; + } + + #comment .d_title em { + font-size: 16px; + font-style: normal; + padding: 0 !important + } + + #comment .fb { + display: block; + border-radius: 2px; + border: 1px solid #ccc; + color: #333; + line-height: 28px; + padding: 10px 5px 10px 46px; + position: relative; + background: url('https://m.chinaz.com/2018statics/img/mwrite.png') no-repeat 10px; + margin: 8px 0; + box-shadow: 0px 2px 1px #fff, inset 0px 1px 1px rgba(138, 138, 138, 0.2); + } + + + + #comment-list li { + padding: 1rem 0; + border-top: 1px solid #eee; + line-height: 24px; + } + + #comment-list .user { + color: #3366B3; + position: relative; + margin-bottom: 2px; + height: 24px; + overflow: hidden; + font-weight: 500; + } + + #comment-list .user time{ + font-size: 0.875rem; + width: 70px; + height: 24px; + overflow: hidden; + line-height: 24px; + color: #ddd; + font-weight: normal; + margin-left: 10px; + } + .w-text textarea { + color: #3b3b3b; + background: #fff; + border: 1px solid #c5c5c5; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + width: 100%; + padding: 10px; + height: 80px; + padding: 10px; + font-size: 1rem; + } + + .w-button { + margin: 10px 0 0 0; + display: flex; + justify-content: flex-end; + } + #comment .comment-toggle-enter #view-comment { + display: none + } + + #comment #submit { + display: none + } + + #comment .comment-toggle-enter #submit { + display: block + } + + #view-comment .button-status-complete { + overflow: hidden; + text-align: center; + position: relative; + display: none; + padding: 0; + padding-top: 15px; + } + + #view-comment .button { + padding: 0 20px; + } + +#submit .button{ + line-height: 2; + padding: 0 1rem; + font-size: 1rem; + background: #eee; + border-radius: 4px; + text-align: center; + margin-left: 10px; + border: none; + border: 1px solid #ccc; + } + + #submit #verify { + color: #fff; + border: 1px solid #3366B3; + cursor: pointer; + background: #3366B3; + } + + #submit #verify.disable { + background:#eee; + color: #999; + border: 1px #ccc solid; + } + + + /*new comment*/ + #comment.new #gocomment { + float: right; + font-weight: bold; + font-size: 14px; + padding: 0 0 0 40px; + + background-size: 24px auto; + } + + #alist #comment.new #gocomment { + background-position: 15px -549px; + line-height: 28px; + padding: 0 15px 0 40px; + } + + #comment.new #view-comment .button-status-complete { + padding-bottom: 10px; + } + + #view-comment .tit{ + font-size: 1rem; + margin: 2rem 0 0.5rem; + } + + #comment.new #comment-list>li { + position: relative; + padding: 10px 0px; + } + + #comment.new #comment-list li>img { + width: 45px; + height: 45px; + border-radius: 50%; + position: absolute; + left: 0; + top: 13px; + } + + #comment.new #comment-list li>time { + position: absolute; + right: 0; + top: 10px; + color: #999; + font-size: 14px; + } + + #comment.new #comment-list li .cmt { + padding: 0 85px 0 55px; + } + + #comment.new #comment-list li .cmt p { + word-wrap: break-word; + word-break: normal; + } + + #comment.new #comment-list li .cmt blockquote { + padding: 5px 0 5px 10px; + border-left: 2px solid #ddd; + } + + #comment.new #comment-list li .cmt blockquote h4 { + height: 24px; + overflow: hidden; + color: #fff; + } + + #comment.new #comment-list li .cmt blockquote h4 cite { + color: #65bb0a; + } + + #comment.new #comment-list .ctrl { + position: absolute; + right: 0; + top: 36px; + color: #999; + font-size: 14px; + } + + #comment.new #comment-list .ctrl>a { + display: inline-block; + padding-left: 15px; + + } + + #comment.new #comment-list .ctrl>a span { + display: inline-block; + max-width: 32px; + overflow: hidden; + color: #fc9438; + } + + #comment.new #comment-list .ctrl .txt span { + color: #999; + } + + #comment.new #comment-list .ctrl>s { + margin-left: 10px; + display: inline-block; + vertical-align: top; + } + + #comment.new #comment-list .post { + clear: both; + width: 100%; + } + + #comment.new #comment-list .post .w-text { + margin: 0; + padding: 0; + width: 100%; + overflow: hidden; + } + + #comment.new textarea { + font-size: 1rem; + } + + #comment.new #comment-list .post .w-button { + margin: 0; + } + + #comment.new #comment-list .post .button { + float: right; + background: #65bb0a; + color: #fff; + border: none; + padding: 0 10px; + border-radius: 6px; + } + #comment .more-comment { + cursor: pointer; + text-align: center; + border-top: 1px solid rgba(0,0,0,.05); + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: inline-block; + border: 0; + padding: 5px 30px; + border-radius: 30px; +} + +} \ No newline at end of file diff --git a/sites/m.chinaz.com/components/mip-cz-comment/mip-cz-comment.js b/sites/m.chinaz.com/components/mip-cz-comment/mip-cz-comment.js new file mode 100644 index 000000000..513509db7 --- /dev/null +++ b/sites/m.chinaz.com/components/mip-cz-comment/mip-cz-comment.js @@ -0,0 +1,333 @@ +/** + * @file 评论模块 + * @author fl + */ +import './index.less' +import '../../common/mip-common.less' +import MIPCommon from '../../common/mip-common' +const { CustomElement, util } = MIP +const { dom, css } = util + +export default class MIPMczComment extends CustomElement { + data () { + return { + id: this.element.getAttribute('cid'), + url: this.element.getAttribute('url'), + hasReply: this.element.getAttribute('hasReply') + } + } + + build () { + const wrapper = dom.create(` +
+ +
+
+ + 取消 +
+ + +
+
+
我要跟贴
+
最新评论：
+
    + +
    +
    +
    + `) + this.element.appendChild(wrapper) + if (this.data().hasReply) { + document.getElementById('comment').classList.add('new') + } + // 显示 + this.showComment() + // 读取评论 + this.readComment() + // 更多评论 + document + .getElementById('view-comment') + .getElementsByClassName('button')[0].onclick = () => { + this.readComment() + } + // 写入评论 + document.getElementById('verify').onclick = () => { + this.writeComment() + } + // 评论输入正则 + this.inputComment() + } + + /* + *显示评论 + */ + showComment () { + const hasReply = this.data().hasReply + const cfb = document.getElementsByClassName('fb')[0] + const cform = document.getElementById('submit') + const ctit = document.getElementById('tit') + const clist = document.getElementById('comment-list') + const cbutton = document.getElementsByClassName('button-status-complete')[0] + cfb.onclick = () => { + clickEvent() + } + if (hasReply) { + const gocomment = document.getElementById('gocomment') + gocomment.onclick = () => { + clickEvent() + } + } + + function clickEvent () { + if (!hasReply) { + css(clist, { + display: 'none' + }) + css(ctit, { + display: 'none' + }) + css(cbutton, { + display: 'none' + }) + } else { + const del = document + .getElementById('comment-list') + .getElementsByClassName('post') + for (let j = 0; j < del.length; j++) { + dom.closest(del[j], 'li').removeChild(del[j]) + } + } + css(cfb, { + display: 'none' + }) + css(cform, { + display: 'block' + }) + } + document.getElementById('cancel').onclick = () => { + const ul = document.getElementById('comment-list') + const oli = ul.getElementsByTagName('li') + css(cform, { + display: 'none' + }) + css(cfb, { + display: 'block' + }) + if (oli.length) { + css(cbutton, { + display: 'block' + }) + css(ctit, { + display: 'block' + }) + } + css(clist, { + display: 'block' + }) + } + } + + /* + *评论输入正则 + */ + inputComment () { + const textarea = document.getElementById('cTextarea') + const verify = document.getElementById('verify') + textarea.onkeyup = function () { + const len = this.value.length + if (len < 6) { + verify.classList.add('disable') + } else { + verify.classList.remove('disable') + } + } + } + + /* + *读取评论 + */ + readComment () { + const ul = document.getElementById('comment-list') + const oli = ul.getElementsByTagName('li') + const p = Math.floor(oli.length / 5 + 1) + fetch( + `${this.data().url}/api/Mcomment/getmlist?id=${ + this.data().id + }&start=${p}&t=1`, + { + method: 'GET' + } + ) + .then((responseText) => { + return responseText.json() + }) + .then((responseRes) => { + let html = '' + const data = responseRes + // 查看更多按钮显示 + const btnStatusC = document + .getElementById('view-comment') + .getElementsByClassName('button-status-complete')[0] + if (data.total > 5) { + css(btnStatusC, { + display: 'block' + }) + } + const titStatus = document.getElementById('tit') + if (data.total < 1) { + css(titStatus, { + display: 'none' + }) + } + if (p >= Math.floor(data.total / 5 + 1)) { + btnStatusC.removeChild( + document + .getElementById('view-comment') + .getElementsByClassName('button')[0] + ) + btnStatusC.innerHTML = + '' + } + + for (let i = 0; i < data.data.length; i++) { + html += + '

  • ' + + data.data[i].userName + + '

    ' + + data.data[i].content + + '

    • ' + } + oli.length === 0 + ? (ul.innerHTML = html) + : (ul.innerHTML = ul.innerHTML + html) + if (this.data().hasReply) { + this.replyComment() + } + }) + } + + /* + *写入评论 + */ + writeComment (quoteid) { + let content + const verify = document.getElementById('verify') + const ul = document.getElementById('comment-list') + if (quoteid) { + content = + '[quote]' + + quoteid + + '[/quote]' + + ul + .getElementsByClassName('w-text')[0] + .getElementsByTagName('textarea')[0].value + } else { + content = document + .getElementById('submit') + .getElementsByClassName('w-text')[0] + .getElementsByTagName('textarea')[0].value + } + // 校验 + if ( + (!quoteid && verify.classList.contains('disable')) || + (quoteid && verify.classList.contains('disable')) + ) { + MIPCommon.cAlert('您评论写的太短啦！') + return false + } else if (MIPCommon.getCookie('oldTime' + this.data().id) === 1) { + MIPCommon.cAlert('您评论次数太频繁啦！') + return false + } + fetch( + `${ + this.data().url + }/api/Mcomment/savemdata?content=${content}&id=${ + this.data().id + }&t=1`, + { + method: 'GET' + } + ) + .then((responseText) => { + return responseText.text() + }) + .then((responseRes) => { + MIPCommon.cAlert('您的评论已提交，请等待审核！') + css(document.getElementById('submit'), { + display: 'none' + }) + css(document.getElementsByClassName('fb')[0], { + display: 'block' + }) + css(document.getElementsByClassName('button-status-complete')[0], { + display: 'block' + }) + css(ul, { + display: 'block' + }) + if (this.data().hasReply) { + const del = ul.getElementsByClassName('post') + for (let j = 0; j < del.length; j++) { + dom.closest(del[j], 'li').removeChild(del[j]) + } + } + document + .getElementsByClassName('w-text')[0] + .getElementsByTagName('textarea')[0].value = '' + MIPCommon.setCookie('oldTime' + this.data().id, '1') + }) + } + + /* + *回复评论 + */ + replyComment () { + const _this = this + const rps = document.getElementsByClassName('rps') + for (let i = 0; i < rps.length; i++) { + const isBind = rps[i].getAttribute('is_bind') + if (isBind !== 1) { + rps[i].setAttribute('is_bind', 1) + rps[i].onclick = function () { + const len = dom.closest(this, 'li').getElementsByClassName('post') + .length + const del = document + .getElementById('comment-list') + .getElementsByClassName('post') + for (let j = 0; j < del.length; j++) { + dom.closest(del[j], 'li').removeChild(del[j]) + } + if (len === 0) { + const post = document.createElement('div') + post.classList.add('post') + post.innerHTML = + '
    ' + dom.closest(this, 'li').appendChild(post) + _this.inputComment() + css(document.getElementsByClassName('fb')[0], { + display: 'block' + }) + css(document.getElementById('submit'), { + display: 'none' + }) + document.getElementById('verify').onclick = function () { + _this.writeComment( + dom + .closest(this, 'li') + .getElementsByClassName('ctrl')[0] + .getElementsByClassName('rps')[0] + .getAttribute('rpid') + ) + } + } + } + } + } + } +} diff --git a/sites/m.chinaz.com/example/index.html b/sites/m.chinaz.com/example/index.html new file mode 100644 index 000000000..a0ad2dec7 --- /dev/null +++ b/sites/m.chinaz.com/example/index.html @@ -0,0 +1,26 @@ + + + + + + MIP page + + + + + +
    +

    First MIP page

    +

    Add MIP components here

    + +
    + + + + diff --git a/sites/m.chinaz.com/mip.config.js b/sites/m.chinaz.com/mip.config.js new file mode 100644 index 000000000..d5457bef4 --- /dev/null +++ b/sites/m.chinaz.com/mip.config.js @@ -0,0 +1,31 @@ +/** + * @file mip页面项目配置项 + * @author + */ + +module.exports = { + dev: { + /** + * 启动mip server调试的端口号 + * + * @type {number} + */ + port: 8111, + + /** + * 启用调试页面自动刷新 + * + * @type {boolean} + */ + livereload: true, + + /** + * server 启动自动打开页面，false 为关闭 + * 如: + * autoopen: '/example/index.html' + * + * @type {string|boolean} + */ + autoopen: false + } +} diff --git a/sites/m.chinaz.com/package.json b/sites/m.chinaz.com/package.json new file mode 100644 index 000000000..917b1eed9 --- /dev/null +++ b/sites/m.chinaz.com/package.json @@ -0,0 +1,25 @@ +{ + "name": "m.chinaz.com", + "version": "0.0.1", + "description": "chinaz comment project", + "scripts": { + "dev": "mip2 dev", + "build": "mip2 build", + "lint": "npm run lint:js", + "lint:js": "eslint --ext .vue,.js .", + "fix": "npm run fix:js", + "fix:js": "eslint --ext .vue,.js . --fix" + }, + "author": "yky", + "dependencies": {}, + "devDependencies": { + "eslint": "^4.19.1", + "eslint-config-standard": "^11.0.0", + "eslint-plugin-import": "^2.12.0", + "eslint-plugin-jsdoc": "^3.7.1", + "eslint-plugin-node": "^6.0.1", + "eslint-plugin-promise": "^3.8.0", + "eslint-plugin-standard": "^3.1.0", + "eslint-plugin-vue": "^4.5.0" + } +} diff --git a/sites/m.chinaz.com/static/.gitkeep b/sites/m.chinaz.com/static/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/sites/m.pc6.com/components/mip-mpc6-comment/index.less b/sites/m.pc6.com/components/mip-mpc6-comment/index.less index e565be2bb..edabaebee 100644 --- a/sites/m.pc6.com/components/mip-mpc6-comment/index.less +++ b/sites/m.pc6.com/components/mip-mpc6-comment/index.less @@ -138,6 +138,10 @@ mip-mpc6-comment { padding: 0 20px; } + #view-comment .tit{ + display: none; + } + #submit #verify { color: #fff; border: 1px solid #94c804;