kola
/
tangwang-pc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
糖尿病网pc端官网
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
14 Commits
1 Branch
0 Tags
15 MiB
Tree: 5922967b83
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '5922967b83'
${ noResults }
tangwang-pc/.nuxt/dist/server/pages/article/_id.js

953 lines
55 KiB
Raw Normal View History Unescape

下线相关内容
3 days ago
exports.ids = [6,1];
exports.modules = {
/***/ 160:
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(166);
if(content.__esModule) content = content.default;
if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals;
// add CSS to SSR context
var add = __webpack_require__(4).default
module.exports.__inject__ = function (context) {
add("11f2e1da", content, true, context)
};
/***/ }),
/***/ 165:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_3_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_3_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_3_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Barrage_vue_vue_type_style_index_0_id_c3f32de4_prod_lang_css_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(160);
/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_3_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_3_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_3_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Barrage_vue_vue_type_style_index_0_id_c3f32de4_prod_lang_css_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_3_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_3_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_3_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Barrage_vue_vue_type_style_index_0_id_c3f32de4_prod_lang_css_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_vue_style_loader_index_js_ref_3_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_3_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_3_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Barrage_vue_vue_type_style_index_0_id_c3f32de4_prod_lang_css_scoped_true__WEBPACK_IMPORTED_MODULE_0__) if(["default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_vue_style_loader_index_js_ref_3_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_3_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_3_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Barrage_vue_vue_type_style_index_0_id_c3f32de4_prod_lang_css_scoped_true__WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/***/ }),
/***/ 166:
/***/ (function(module, exports, __webpack_require__) {
// Imports
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(3);
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
// Module
___CSS_LOADER_EXPORT___.push([module.i, ".z_barrage-container[data-v-c3f32de4]{pointer-events:none}.z_container[data-v-c3f32de4]{overflow:hidden;width:100%}.z_barrage[data-v-c3f32de4]{left:0;position:absolute;top:0}", ""]);
// Exports
___CSS_LOADER_EXPORT___.locals = {};
module.exports = ___CSS_LOADER_EXPORT___;
/***/ }),
/***/ 177:
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(209);
if(content.__esModule) content = content.default;
if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals;
// add CSS to SSR context
var add = __webpack_require__(4).default
module.exports.__inject__ = function (context) {
add("099a4246", content, true, context)
};
/***/ }),
/***/ 181:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Barrage.vue?vue&type=template&id=c3f32de4&scoped=true
var render = function render() {
var _vm = this,
_c = _vm._self._c;
return _c('div', {
staticClass: "z_barrage-container"
}, [_vm._ssrNode("<canvas" + _vm._ssrAttr("width", _vm.containerWidth) + _vm._ssrAttr("height", _vm.containerHeight) + " style=\"display: none\" data-v-c3f32de4></canvas> <div class=\"z_container\"" + _vm._ssrStyle(null, {
height: _vm.containerHeight / 2 + 'px'
}, null) + " data-v-c3f32de4><canvas id=\"canvas\"" + _vm._ssrAttr("width", _vm.containerWidth) + _vm._ssrAttr("height", _vm.containerHeight) + " class=\"z_barrage\"" + _vm._ssrStyle(null, {
width: _vm.containerWidth / 2 + 'px',
height: _vm.containerHeight / 2 + 'px'
}, null) + " data-v-c3f32de4></canvas></div>")]);
};
var staticRenderFns = [];
// CONCATENATED MODULE: ./src/components/Barrage.vue?vue&type=template&id=c3f32de4&scoped=true
// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Barrage.vue?vue&type=script&lang=js
// import faceMap from '../../assets/emoji'
let aniId, aniId1;
/* harmony default export */ var Barragevue_type_script_lang_js = ({
name: 'Barrage',
props: {
barrageList: {
type: Array,
default: () => []
},
speed: {
type: Number,
default: 4
},
loop: {
type: Boolean,
default: true
},
channels: {
type: Number,
default: 2
},
barrageHeight: {
type: Number,
default: 60
},
screenPercent: {
type: Number,
default: 0.3
},
borderColor: {
type: String,
default: ''
},
background: {
type: String,
default: ''
},
deviceType: {
type: String,
default: 'pc'
},
linearGradient: {
type: Object,
default: () => {
return {
startColor: '',
endColor: ''
};
}
}
},
data() {
return {
newBarrageArray: [],
// 新增弹幕之后的总弹幕
barrageArray: [],
barrageQueue: [],
containerWidth: 0,
containerHeight: 0,
channelsArray: [],
barrageChannels: 1
};
},
watch: {
barrageList(val) {
if (val.length !== 0) {
this.barrageQueue = JSON.parse(JSON.stringify(val));
this.newBarrageArray = JSON.parse(JSON.stringify(val));
this.initData();
window.cancelAnimationFrame(aniId);
aniId = window.requestAnimationFrame(this.render);
}
}
},
mounted() {
this.containerWidth = this.deviceType === 'pc' ? 723 * 2 : document.body.clientWidth * 2;
this.containerHeight = 365 * 2; // 设定总高度
this.barrageChannels = this.channels; // 总高度对应的轨道数
this.ctx = this.$refs.canvas.getContext('2d');
this.ctx1 = this.$refs.canvasContainer.getContext('2d');
this.barrageClickEvent();
},
methods: {
/**
* 数据初始化
*/
initData() {
for (let i = 0; i < this.barrageQueue.length; i++) {
// 此处处理只显示50个字符
let tagImg = null;
let img = null;
if (this.barrageQueue[i].icon) {
img = new Image();
img.src = this.barrageQueue[i].icon;
}
if (this.barrageQueue[i].tagImage) {
tagImg = new Image();
tagImg.src = this.barrageQueue[i].tagImage;
}
const content = this.dealStr(this.barrageQueue[i].content);
this.barrageArray.push({
id: this.barrageQueue[i].id,
content,
x: this.containerWidth + this.barrageHeight,
icon: img,
tagImage: tagImg,
width: this.ctx1.measureText(content).width * 3.6 + (this.barrageQueue[i].icon ? 60 : 0),
color: this.barrageQueue[i].color || '#FFFFFF',
bgColor: this.barrageQueue[i].bgColor || 'rgba(0,0,0,0.4)'
});
}
this.initChannel();
},
/**
* 初始化轨道数据
*/
initChannel() {
for (let i = 0; i < this.barrageChannels; i++) {
const item = this.barrageArray.shift();
if (item) {
this.channelsArray[i] = [item];
} else {
this.channelsArray[i] = [];
}
}
},
/**
* 渲染
*/
render() {
this.ctx.clearRect(0, 0, this.containerWidth, this.containerHeight);
this.ctx.font = '36px Microsoft YaHei';
this.draw();
window.cancelAnimationFrame(aniId1);
aniId1 = window.requestAnimationFrame(this.render);
},
draw() {
for (let i = 0; i < this.channelsArray.length; i++) {
for (let j = 0; j < this.channelsArray[i].length; j++) {
try {
const barrage = this.channelsArray[i][j];
barrage.x -= this.speed;
if (barrage.x <= this.containerWidth) {
// 弹幕显示
this.borderColor && this.drawRoundRectBorder(this.ctx, barrage.x - this.barrageHeight / 2, i * (this.barrageHeight + 60) + 20, barrage.width + this.barrageHeight, this.barrageHeight, this.barrageHeight / 2);
this.drawRoundRect(this.ctx, barrage.bgColor, barrage.x - this.barrageHeight / 2, i * (this.barrageHeight + 60) + 21, barrage.width + this.barrageHeight, this.barrageHeight - 2, this.barrageHeight / 2);
this.ctx.fillStyle = `${barrage.color}`;
this.ctx.fillText(barrage.content, barrage.x + (barrage.icon ? this.barrageHeight / 2 + 10 : -5), i * (this.barrageHeight + 60) + this.barrageHeight - 25);
if (barrage.icon) {
this.circleImg(this.ctx, barrage.icon, barrage.x - 40, i * (this.barrageHeight + 60) + 40, 40);
}
if (barrage.tagImage) {
this.originImg(this.ctx, barrage.tagImage, barrage.x - this.barrageHeight - 10, i * (this.barrageHeight + 60) + 20, this.barrageHeight, this.barrageHeight);
}
}
if (barrage.x < -(barrage.width + this.barrageHeight)) {
// 弹幕删除
const arr = this.channelsArray.reduce((a, b) => a.concat(b));
if (this.loop) {
if (this.checkBarrageStatus(arr)) {
this.barrageQueue = [];
this.barrageQueue = JSON.parse(JSON.stringify(this.newBarrageArray));
this.initData();
}
}
}
// 弹幕插入时机判断
if (barrage.x <= Math.floor(this.containerWidth - barrage.width - 40) && barrage.x >= Math.floor(this.containerWidth - barrage.width - 40 - this.speed) && j === this.channelsArray[i].length - 1 && this.barrageArray.length !== 0) {
const item = this.barrageArray.shift();
this.channelsArray[i].push(item);
}
} catch (e) {
console.log(e);
}
}
}
},
/**
* 重置数据
*/
add(obj) {
const content = this.dealStr(obj.content);
let img = null;
let tagImg = null;
if (obj.icon) {
img = new Image();
img.src = obj.icon;
}
if (obj.tagImage) {
tagImg = new Image();
tagImg.src = obj.tagImage;
}
const item = {
id: obj.id,
content,
x: this.containerWidth + this.barrageHeight,
icon: obj.icon ? img : '',
tagImage: obj.tagImage ? tagImg : '',
width: this.ctx1.measureText(content).width * 3 + (obj.icon ? this.barrageHeight : 0),
color: obj.color || '#FFFFFF',
bgColor: obj.bgColor || 'rgba(0,0,0,0.4)'
};
const originItem = {
id: obj.id,
content: obj.content,
icon: obj.icon,
tagImage: obj.tagImage,
color: obj.color || '#FFFFFF',
bgColor: obj.bgColor || 'rgba(0,0,0,0.4)'
};
if (this.barrageArray.length === 0) {
// 剩余弹幕数为0
this.newBarrageArray.unshift(originItem);
} else {
this.barrageArray.unshift(item);
const insertIndex = this.barrageList.length - this.barrageArray.length;
this.newBarrageArray.splice(insertIndex, 0, originItem);
}
},
/**
* 弹幕点击事件
*/
barrageClickEvent() {
document.getElementById('canvas').addEventListener('click', e => {
const p = this.getEventPosition(e);
const channelIndex = Math.floor(p.y / (this.barrageHeight + 36));
const tempArray = JSON.parse(JSON.stringify(this.channelsArray[channelIndex]));
for (let i = 0; i < tempArray.length; i++) {
const channelItemArray = tempArray[i];
if (p.x > channelItemArray.x && p.x < channelItemArray.x + channelItemArray.width) {
if (channelItemArray.id) {
this.$emit('doLike', channelItemArray.id);
}
}
}
}, false);
},
/**
* 获取点击位置
*/
getEventPosition(ev) {
let x, y;
if (ev.layerX || ev.layerX === 0) {
x = ev.layerX;
y = ev.layerY;
} else if (ev.offsetX || ev.offsetX === 0) {
x = ev.offsetX;
y = ev.offsetY;
}
return {
x: 2 * x,
y: 2 * y
};
},
/**
* 判断所有的弹幕是否滚动完成
* @params arr
*/
checkBarrageStatus(arr) {
for (let i = 0; i < arr.length; i++) {
if (arr[i].x > -arr[i].width) return false;
}
return true;
},
/**
* 处理字符
*/
dealStr(str) {
return str.length > 50 ? `${str.substring(0, 50)}...` : str;
},
/**
* 获取随机颜色
*/
getColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
},
/**
* 裁剪图片
* @param ctx
* @param img
* @param x
* @param y
* @param r
*/
circleImg(ctx, img, x, y, r) {
ctx.save();
const d = 2 * r;
const cx = x + r;
const cy = y + r;
ctx.beginPath();
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore();
ctx.closePath();
},
/**
* 绘制原始图片
* @param ctx
* @param img
* @param x
* @param y
* @param width
* @param height
*/
originImg(ctx, img, x, y, width, height) {
try {
ctx.beginPath();
ctx.drawImage(img, x, y, width, height);
ctx.closePath();
} catch (e) {
console.log(e);
}
},
/**
* 绘画圆角矩形
* @param context
* @param bgColor
* @param x
* @param y
* @param width
* @param height
* @param radius
*/
drawRoundRect(context, bgColor, x, y, width, height, radius) {
if (this.linearGradient.startColor && this.linearGradient.endColor) {
const linearGrad = context.createLinearGradient(x, y, x, y + height);
linearGrad.addColorStop(0, this.linearGradient.startColor);
linearGrad.addColorStop(1, this.linearGradient.endColor);
context.fillStyle = linearGrad || bgColor;
} else {
context.fillStyle = this.background || bgColor;
}
context.beginPath();
context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
context.lineTo(width - radius + x, y);
context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
context.lineTo(width + x, height + y - radius);
context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI / 2);
context.lineTo(radius + x, height + y);
context.arc(radius + x, height - radius + y, radius, Math.PI / 2, Math.PI);
context.fill();
context.closePath();
},
/**
* 绘画圆角矩形
* @param context
* @param x
* @param y
* @param width
* @param height
* @param radius 半径
*/
drawRoundRectBorder(context, x, y, width, height, radius) {
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = this.borderColor;
context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
context.lineTo(width - radius + x, y);
context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
context.lineTo(width + x, height + y - radius);
context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI / 2);
context.lineTo(radius + x, height + y);
context.arc(radius + x, height - radius + y, radius, Math.PI / 2, Math.PI);
context.stroke();
context.closePath();
}
}
});
// CONCATENATED MODULE: ./src/components/Barrage.vue?vue&type=script&lang=js
/* harmony default export */ var components_Barragevue_type_script_lang_js = (Barragevue_type_script_lang_js);
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(1);
// CONCATENATED MODULE: ./src/components/Barrage.vue
function injectStyles (context) {
var style0 = __webpack_require__(165)
if (style0.__inject__) style0.__inject__(context)
}
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
components_Barragevue_type_script_lang_js,
render,
staticRenderFns,
false,
injectStyles,
"c3f32de4",
"61721d3f"
)
/* harmony default export */ var Barrage = __webpack_exports__["default"] = (component.exports);
/***/ }),
/***/ 203:
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "img/chatbot_audio_feature.458e9b3.png";
/***/ }),
/***/ 204:
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "img/play_chatbot_audio.87713b4.png";
/***/ }),
/***/ 205:
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "img/pause_chatbot_audio.48f50e9.png";
/***/ }),
/***/ 206:
/***/ (function(module, exports) {
module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAA4JJREFUWEfVmO+LFVUYx7/f2Uv+AaE2cyl8EfUiMWkNg3BnxDSlCLWZa0GhICqYJb1YDCXoRSJoEAoG3YgKFevOZNGLDEt3Zn2h4C8INyp6Vd4Z3YVAeqXunSfORZd19/44M3vvcp1XlzvP83k+58w5Z84Zoscv9rgfHmzB5DVnQa0Gpw9ii6AA8JJQRop+9HOeno/dgVUA+0k+LZT/mOLUQynPPXwivNaM17AHr7vOy0LZI8BzjRIF+AvEyUJfYe/846dvtJK98fqK+eO18T0QrCHweKNYAudSwWfFIPpi6v37BIccp/DE3PRjgjt0ekiAXykyaAXDpxrFqx4T8gCBRTo8Amf+xdiap/zfbt+LnxCsesufJNLfdUDTWikomUHkT/4/cW1PiEoe3u1aai04cTZRuZME7SoBKw+wDpokORO5u1Ijph8tnBCMXbsMYkteOZVXH5cixwxwNCXebTbetGsI37eC8ENWPXslgYZjSBvWrUCRFxmX7HcgONitGjPhkhxk7NmfAtg6E1AXc48owYsA+rtYJDe6vozFni25CbOQyMQbOC/g0lmolbmEAFdYLdmHKHg7c/asJPBz9YjVBFETpecuoexg/KqzBIZc6Dk7JZTy2fqrLnbtIyDe6ClJwVEriN6sC1ZLzgsUybXH61ajhFxZrIS/TGwWYs/+DsDabhXMyP3e8qN1E5sF9ePvDc7CQiqnAczLCOt0+Oi4wRWPfRNevU+wPhZ7Y0Zvs/yofK/V07b8iet8KZSNne4WHR6FX5lBuGly7HRBb9lcgfETgGd0oB2MuUykq03/7FhLQXXzH9dx+ihKck4HBVqhbtWEqx8NwnBqUNNzceLa24U4PBuCFLxlBtEnjWq1PLjH3sA+gO91VVKw2wqifc1qtP2ykJTswyLY3g1J9a4tVoZbPqW2gvU3jWfvJzDYSUm1nTcr4UftmFqCCpJ4ziaBTDv5tyvQ8D6x06pEh3RytQUVbNRzFo9DruiAm44pyktmZfhHXUYmQQUdW7/MvNNHH+DzukXuxv0pMF4p+kN/ZMnLLKjg8gGMZMQpA7JZpxiBHx7BvPX0/ZpOfNuFWhcSu/ZeELtbxZPYb1aiXbpM7YVaFxh7y/uBVB0bpp6ty4BRtvyhS7qszAt1FvA1z1lsMN0oKW5SjK+tb8NcX8o63oNZGpEnNtckyVMob07PC/4PRJ4btbS2eHQAAAAASUVORK5CYII="
/***/ }),
/***/ 207:
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "img/public.3e79446.png";
/***/ }),
/***/ 208:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_id_vue_vue_type_style_index_0_id_4a21580c_prod_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(177);
/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_id_vue_vue_type_style_index_0_id_4a21580c_prod_lang_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_id_vue_vue_type_style_index_0_id_4a21580c_prod_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_id_vue_vue_type_style_index_0_id_4a21580c_prod_lang_scss__WEBPACK_IMPORTED_MODULE_0__) if(["default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_id_vue_vue_type_style_index_0_id_4a21580c_prod_lang_scss__WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/***/ }),
/***/ 209:
/***/ (function(module, exports, __webpack_require__) {
// Imports
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(3);
var ___CSS_LOADER_GET_URL_IMPORT___ = __webpack_require__(6);
var ___CSS_LOADER_URL_IMPORT_0___ = __webpack_require__(8);
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
// Module
___CSS_LOADER_EXPORT___.push([module.i, "*{border:none;margin:0;padding:0}html{height:100%}body{background:#fff;font-family:MicrosoftYaHei;font-size:0;min-height:100%;min-width:320px;position:relative}body .outer-container{min-width:1258px}body .outer-container.isMobile{min-width:auto}body .outer-container.isMobile .content-container{padding:60px 0 62px;width:100%}body .outer-container.isMobile .content-container .left-content{display:block!important;margin-right:0!important;width:100%!important}body .outer-container.isMobile .content-container .footer-outer{min-width:auto!important;position:absolute!important}body .outer-container.isMobile .content-container .load-more{width:100%!important}body .outer-container.isMobile .content-container .common-flex{display:block!important}body .outer-container.isMobile .content-container .common-other-content{margin:0!important}body .outer-container.isMobile .content-container .common-other-content h6{font-size:20px!important;line-height:28px!important;margin-bottom:10px!important}body .outer-container.isMobile .content-container .common-other-content .font-content b,body .outer-container.isMobile .content-container .common-other-content .font-content h5,body .outer-container.isMobile .content-container .common-other-content .font-content h6,body .outer-container.isMobile .content-container .common-other-content .font-content p{font-size:16px!important;line-height:24px!important;margin-bottom:8px!important;word-break:break-all}body .outer-container.isMobile .content-container .common-other-content .font-content h5{font-size:18px!important}body .outer-container.isMobile.hasLoginBottom{padding-bottom:calc(env(safe-area-inset-bottom) + 55px)}body .outer-container.isMobile.hasLoginBottom .bottom-outer,body .outer-container.isMobile.hasLoginBottom .footer-outer{bottom:calc(constant(safe-area-inset-bottom) + 55px);bottom:calc(env(safe-area-inset-bottom) + 55px)}body .outer-container.isMobile.hasLoginBottom .fixed-box{bottom:calc(constant(safe-area-inset-bottom) + 65px)!important;bottom:calc(env(safe-area-inset-bottom) + 65px)!important}body .content-container{margin:0 auto;width:1080px}body img{-o-object-fit:cover;object-fit:cover;vertical-align:top}body a{-webkit-text-decoration:none;text-decoration:none}.article-detail-page .comment-model-popup .content>div>div>div>div body p,body .article-detail-page .comment-model-popup .content>div>div>div>div p,body .text-ellipsis{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body .left-content{display:inline-block;margin-right:32px;width:723px}body .right-content{display:inline-block;float:right;width:325px}body .common-flex{display:grid;grid-template-columns:repeat(4,25%)}body .load-more{background:#f5f5f8;border-radius:4px;color:#939aa7;font-family:PingFangSC-Regular,PingFang SC;font-size:18px;font-weight:400;height:50px;line-height:50px;margin:0 auto;text-align:center;width:357px}body .footer-outer{background:#f5f5f8;bottom:0;left:0;min-width:1258px;position:fixed;width:100%;z-index:9}body .common-title{color:#001965;font-family:PingFangSC-Medium,PingFang SC;font-size:24px;font-weight:500;line-height:33px;padding:20px 0 10px;text-align:left}body .common-title a{color:#5d6269;float:right;font-family:PingFangSC-Regular,PingFang SC;font-size:16px;font-weight:400}body .common-title a i{color:#001965}body p.go-follow{background:#e6553f;border-radius:4px;color:#fff;cursor:pointer;font-family:PingFangSC-Medium,PingFang SC;font-size:18px;font-weight:500;height:50px;line-height:50px;margin-bottom:23px;text-align:center}body .common-other-content{box-sizing:border-box;margin:44px 0;padding:30px}body .common-other-content h6{color:#001965;font-family:PingFangSC-Medium,PingFang SC;font-size:24px;font-weight:500;line-height:33px;margin-bottom:20px}body .common-other-content .font-content b,body .common-other-content .font-content h5,body .common-other-content .font-content h6,body .common-other-content .font-content p{color:#5d6269;font-size:18px;line-height:30px;margin-bottom:12px}body .common-other-content .font-content h5{font-si
// Exports
___CSS_LOADER_EXPORT___.locals = {};
module.exports = ___CSS_LOADER_EXPORT___;
/***/ }),
/***/ 231:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/article/_id.vue?vue&type=template&id=4a21580c
var render = function render() {
var _vm = this,
_c = _vm._self._c;
return _c('div', {
staticClass: "article-detail-page",
staticStyle: {
"padding": "30px 0"
}
}, [_vm._ssrNode("<div class=\"left-content\">", "</div>", [_vm._ssrNode("<div class=\"top\">" + (!_vm.articleData.thumb ? "<img" + _vm._ssrAttr("src", __webpack_require__(66)) + " alt style=\"display: none\">" : "<img" + _vm._ssrAttr("src", _vm.articleData.thumb) + _vm._ssrAttr("alt", _vm.articleData.title) + " style=\"display: none\">") + " <h4>" + _vm._ssrEscape(_vm._s(_vm.articleData.title)) + "</h4></div> <p>" + _vm._ssrEscape("\n " + _vm._s(_vm.articleData.hit) + " ") + "<i class=\"el-icon-view\"></i>" + _vm._ssrEscape("  " + _vm._s(_vm.articleData.published_at) + "\n ") + "</p> " + (_vm.showNovoTeacher ? "<div class=\"chatbot-audio\"><img" + _vm._ssrAttr("src", __webpack_require__(203)) + " alt> <div><h6>保护双眼，听小诺朗读</h6> <div><img" + _vm._ssrAttr("src", __webpack_require__(204)) + " alt" + _vm._ssrStyle(null, {
display: _vm.audioPause ? '' : 'none'
}, null) + "> <img" + _vm._ssrAttr("src", __webpack_require__(205)) + " alt" + _vm._ssrStyle(null, {
display: !_vm.audioPause ? '' : 'none'
}, null) + "> <div><span" + _vm._ssrStyle(null, {
color: _vm.playTime != '00:00' ? '#3099EA' : ''
}, null) + ">" + _vm._ssrEscape(_vm._s(_vm.playTime)) + "</span> <p><span" + _vm._ssrStyle(null, {
width: _vm.playWidth + '%'
}, null) + "></span></p> <span>" + _vm._ssrEscape(_vm._s(_vm.allTime)) + "</span></div></div> <audio" + _vm._ssrAttr("src", _vm.articleData.audio_url) + "></audio></div></div>" : "<!---->") + " " + (_vm.articleData.video_url ? "<div class=\"video-box\"><video x5-video-player-type=\"h5\" x5-video-player-fullscreen=\"true\" x-webkit-airplay=\"true\" x5-playsinline=\"true\" webkit-playsinline=\"true\" playsinline=\"true\" width=\"100%\" controls=\"controls\"" + _vm._ssrAttr("poster", _vm.articleData.thumb) + _vm._ssrAttr("src", _vm.articleData.video_url) + " style=\"object-fit: fill\"></video></div>" : "<!---->") + " <div class=\"article-content\">" + _vm._s(_vm.articleData.content) + "</div> "), _vm._ssrNode("<div class=\"bottom-box\">", "</div>", [_vm._ssrNode((!_vm.isLogin && _vm.deviceType === 'pc' ? "<p class=\"go-follow\">\n 点击关注微信公众号，查看更多专业资讯\n </p>" : "<!---->") + " "), _vm._ssrNode("<div class=\"comment-box\">", "</div>", [_vm._ssrNode("<h6><span>最新看法</span> <span>发表你的看法</span></h6> "), _vm._ssrNode("<div class=\"comment-content\">", "</div>", [_c('Barrage', {
ref: "barrage",
staticClass: "barrage",
attrs: {
"barrage-list": _vm.barrageList,
"speed": _vm.deviceType === 'pc' ? 4 : 3,
"loop": true,
"channels": 3,
"border-color": '#ededed',
"background": '#fff',
"barrage-height": 120,
"device-type": _vm.deviceType
}
})], 1), _vm._ssrNode(" " + (!_vm.barrageIsShow ? "<p>还没有人发表看法</p>" : "<!---->"))], 2)], 2)], 2), _vm._ssrNode(" <div class=\"right-content\"" + _vm._ssrStyle(null, {
position: _vm.isFixed ? 'fixed' : 'static',
right: _vm.right + 'px'
}, null) + "><h6 class=\"common-title\">\n 猜你喜欢<img" + _vm._ssrAttr("src", __webpack_require__(206)) + " alt></h6> <div class=\"list\" style=\"min-height: 100vh\">" + _vm._ssrList(_vm.recommendArticles, function (item) {
return "<div class=\"list-item\">" + (!item.thumb ? "<img" + _vm._ssrAttr("src", __webpack_require__(66)) + " alt>" : "<img" + _vm._ssrAttr("src", item.thumb) + _vm._ssrAttr("alt", item.title) + ">") + " <p>" + _vm._ssrEscape(_vm._s(item.title)) + "</p> <div class=\"bottom\"><span>" + _vm._ssrEscape(_vm._s(item.hit)) + "<i class=\"el-icon-view\" style=\"margin-right: 8px\"></i>" + _vm._ssrEscape(_vm._s(item.collect)) + "<i class=\"el-icon-star-on\"></i></span></div></div>";
}) + "</div> <div class=\"stack-bottom\"><div class=\"s-container\"><img" + _vm._ssrAttr("src", __webpack_require__(207)) + " alt class=\"s-left\"> <div class=\"s-right\"><img" + _vm._ssrAttr("src", _vm.isPro ? _vm.qrcodeUrl : _vm.qrcodeUrlTest) + " alt class=\"code\"> <div class=\"name\">\n 微信扫一扫\n <br>\n 获取最新糖尿病展示\n </div></div></div></div></div> " + (_vm.commentModelPopupShow ? "<div class=\"comment-model-popup\"><div class=\"mask\"></div> <div class=\"content\"><div" + _vm._ssrStyle(null, {
maxHeight: _vm.commentMaxHeight + 'px'
}, null) + "><div><div>" + _vm._ssrList(_vm.commentModelList, function (item, index) {
return "<div><p" + _vm._ssrClass(null, item.chosen ? 'chosen' : '') + ">" + _vm._ssrEscape("\n " + _vm._s(item.content) + "\n ") + "</p></div>";
}) + "</div> " + (_vm.commentLoading ? "<p class=\"load-more\">\n 加载更多<i class=\"el-icon-loading\"></i></p>" : "<!---->") + "</div></div> <p>立即发布</p></div></div>" : "<!---->") + " "), _c('BottomRightFixed', {
attrs: {
"show-share": true,
"show-collect": true,
"is-login": _vm.isLogin,
"is-collect": _vm.articleData.is_collected,
"show-comment": true
},
on: {
"commentClick": function ($event) {
return _vm.getCommentCorpus(1, 2);
},
"collectClick": _vm.collectArticle
}
})], 2);
};
var staticRenderFns = [];
// CONCATENATED MODULE: ./src/pages/article/_id.vue?vue&type=template&id=4a21580c
// EXTERNAL MODULE: external "vuex"
var external_vuex_ = __webpack_require__(5);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/article/_id.vue?vue&type=script&lang=js
const {
mapActions,
mapGetters
} = Object(external_vuex_["createNamespacedHelpers"])('user');
/* harmony default export */ var _idvue_type_script_lang_js = ({
name: 'ArticleDetailPage',
layout: 'detail',
validate({
params
}) {
return /^\d+$/.test(params.id);
},
async asyncData({
$axios,
params,
req,
redirect
}) {
// if (!process.server) return;
const data = await $axios.$get('/article/detail/' + params.id, $axios.genSSROptions(req));
// data.detail.articleData.audio_url = 'https://app.diabetes.com.cn/uploadfile/article/audio/8160-16395833618215.mp3';
// console.log('dafa:', data);
if (data.success === false) {
redirect('/error?code=' + 404);
}
return {
...data.detail
};
},
data() {
return {
audioPause: true,
playTime: '00:00',
allTime: '00:00',
canPlayAudio: false,
playWidth: 0,
barrageIsShow: false,
barrageList: [],
commentModelPopupShow: false,
commentModelList: [],
inComment: false,
commentPage: 1,
commentLoading: false,
commentHasMore: true,
chosenCommentId: 0,
inCollect: false,
isFixed: false,
right: 89,
commentMaxHeight: 300,
isPro: false,
qrcodeUrl: __webpack_require__(67),
qrcodeUrlTest: __webpack_require__(68)
};
},
head() {
return {
title: this.articleData.title,
meta: [{
hid: 'description',
name: 'description',
content: 'Home page description'
}]
};
},
computed: {
...mapGetters({
isLogin: 'isLogin'
}),
deviceType() {
return this.$store.state.device.deviceType;
},
env() {
return this.$store.state.device.env;
}
},
mounted() {
this.isPro = "production" === 'production';
const that = this;
this.getComment();
this.$nextTick(() => {
if (that.deviceType === 'pc') {
window.addEventListener('scroll', function () {
that.isFixed = true;
const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
if (document.documentElement.offsetWidth < 1258) {
that.right = 89 - (1258 - document.documentElement.offsetWidth) + scrollLeft;
} else {
that.right = (document.documentElement.offsetWidth - 1080) / 2;
}
});
} else {
that.commentMaxHeight = (document.documentElement.clientHeight || document.body.clientHeight) * 0.6;
if (this.deviceType === 'ios') {
if (that.env === 'wechat') {
document.addEventListener('WeixinJSBridgeReady', function () {
that.$refs.chatbotAudio.play();
that.$refs.chatbotAudio.pause();
that.$refs.chatbotAudio.currentTime = 0;
}, false);
} else {
window.onload = function () {
that.$refs.chatbotAudio.play();
that.$refs.chatbotAudio.pause();
that.$refs.chatbotAudio.currentTime = 0;
if (!isNaN(that.$refs.chatbotAudio.duration)) {
const duration = that.$refs.chatbotAudio.duration;
let minutes = parseInt(duration / 60, 10);
let seconds = parseInt(duration % 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
that.allTime = minutes + ':' + seconds;
that.canPlayAudio = true;
} else {
that.canPlayAudio = true;
}
};
}
}
}
});
},
methods: {
...mapActions({
showLoginDialog: 'showLoginDialog'
}),
getDuration() {
const duration = this.$refs.chatbotAudio.duration;
let minutes = parseInt(duration / 60, 10);
let seconds = parseInt(duration % 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
this.allTime = minutes + ':' + seconds;
this.canPlayAudio = true;
},
playPauseAudio() {
if (this.canPlayAudio) {
if (this.audioPause) {
this.baiduStat('文章详情页', 'click', '小诺老师语音控件');
this.$refs.chatbotAudio.play();
} else {
this.$refs.chatbotAudio.pause();
}
this.audioPause = !this.audioPause;
}
},
updateTime(e) {
const currentTime = e.target.currentTime;
const duration = e.target.duration;
let minutes = parseInt(currentTime / 60, 10);
let seconds = parseInt(currentTime % 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
this.playWidth = currentTime / duration * 100;
this.playTime = minutes + ':' + seconds;
},
audioEnd() {
this.audioPause = true;
this.playTime = '00:00';
this.playWidth = 0;
},
async getComment() {
const data = await this.$axios.$get('/article/comment-list?aid=' + this.$route.params.id);
for (const item of data.detail.commentList) {
item.time = Math.random() * 15 + 9;
}
this.barrageIsShow = data.detail.commentList.length > 0;
const _list = [];
for (const comment of data.detail.commentList) {
_list.push({
content: comment.comment_content,
color: '#939AA7',
icon: comment.headimgurl
});
}
this.barrageList = _list;
},
async getCommentCorpus(page, type) {
if (!this.isLogin) {
this.showLoginDialog(true);
} else {
const that = this;
if (page === 1) {
this.baiduStat('文章详情页', 'click', type === 1 ? '文章内发表你的想法-点击' : '文章内评论');
this.chosenCommentId = 0;
this.commentModelList = [];
this.commentPage = 1;
this.commentHasMore = true;
this.commentModelPopupShow = true;
setTimeout(function () {
that.$refs.commentCorpus.addEventListener('scroll', function () {
// 变量scrollTop是滚动条滚动时，距离顶部的距离
const scrollTop = that.$refs.commentCorpus.scrollTop;
// 变量windowHeight是可视区的高度
const contentHeight = that.$refs.commentCorpus.clientHeight;
// 变量scrollHeight是滚动条的总高度
const allHeight = that.$refs.commentCorpusContent.clientHeight;
// 滚动条到底部的条件
if (scrollTop + contentHeight > allHeight - 20) {
// 写后台加载数据的函数 一定要用that
that.getCommentCorpus();
}
});
});
}
if (this.commentHasMore && !this.commentLoading) {
this.commentLoading = true;
const data = await this.$axios.$get('/article/comment-corpus?page=' + this.commentPage);
for (const item of data.detail.list) {
item.chosen = false;
}
this.commentPage = this.commentPage + 1;
this.commentModelList = this.commentModelList.concat(data.detail.list);
this.commentHasMore = data.detail.hasMore;
this.commentLoading = false;
}
}
},
chooseCorpus(id, index) {
for (const item of this.commentModelList) {
item.chosen = false;
}
this.chosenCommentId = id;
this.commentModelList[index].chosen = true;
},
async commentArticle() {
if (this.chosenCommentId === 0) {
this.$message({
message: '请选择看法模版',
type: 'warning'
});
} else {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
const data = await this.$axios.$post('/article/user-comment', {
aid: this.$route.params.id,
comment_template_id: this.chosenCommentId
});
if (data && data.success) {
this.baiduStat('文章详情页', 'click', '文章内发表你的想法-发表成功');
}
console.log(data);
loading.close();
this.commentModelPopupShow = false;
this.getComment();
}
},
async collectArticle() {
if (!this.isLogin) {
this.showLoginDialog(true);
} else if (this.inCollect) {
this.$message({
message: '您的操作太快了',
type: 'warning'
});
} else {
this.baiduStat('文章详情页', 'click', '文章内收藏');
this.inCollect = true;
const data = await this.$axios.$post('/article/user-collect', {
aid: this.$route.params.id
});
console.log(data);
this.articleData.is_collected = data.detail.curState;
this.inCollect = false;
}
},
goHref(url) {
let openNew = false;
if (this.deviceType === 'pc') {
openNew = true;
}
url = this.$router.resolve({
path: url
});
if (openNew) {
window.open(url.href, '_blank');
} else {
window.location.href = url.href;
}
}
}
});
// CONCATENATED MODULE: ./src/pages/article/_id.vue?vue&type=script&lang=js
/* harmony default export */ var article_idvue_type_script_lang_js = (_idvue_type_script_lang_js);
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(1);
// CONCATENATED MODULE: ./src/pages/article/_id.vue
function injectStyles (context) {
var style0 = __webpack_require__(208)
if (style0.__inject__) style0.__inject__(context)
}
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
article_idvue_type_script_lang_js,
render,
staticRenderFns,
false,
injectStyles,
null,
"733e848e"
)
/* harmony default export */ var _id = __webpack_exports__["default"] = (component.exports);
/* nuxt-component-imports */
installComponents(component, {Barrage: __webpack_require__(181).default,BottomRightFixed: __webpack_require__(69).default})
/***/ })
};;
//# sourceMappingURL=_id.js.map