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.
9 Commits
1 Branch
0 Tags
8.2 MiB
Tree: 6b10db5f35
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '6b10db5f35'
${ noResults }
tangwang-pc/.nuxt/dist/server/pages/article/_id.js

1202 lines
55 KiB
Raw Normal View History Unescape

dist
1 month ago
exports.ids = [6,1];
exports.modules = {
/***/ 153:
/***/ (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__(159);
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__(5).default
module.exports.__inject__ = function (context) {
add("07fbb799", content, true, context)
};
/***/ }),
/***/ 158:
/***/ (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_src_index_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_lang_css_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(153);
/* 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_src_index_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_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_src_index_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_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_src_index_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_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_src_index_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_lang_css_scoped_true___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/***/ }),
/***/ 159:
/***/ (function(module, exports, __webpack_require__) {
// Imports
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(4);
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
// Module
___CSS_LOADER_EXPORT___.push([module.i, ".z_barrage-container[data-v-c3f32de4]{pointer-events:none}.z_container[data-v-c3f32de4]{width:100%;overflow:hidden}.z_barrage[data-v-c3f32de4]{position:absolute;top:0;left:0}", ""]);
// Exports
module.exports = ___CSS_LOADER_EXPORT___;
/***/ }),
/***/ 169:
/***/ (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__(199);
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__(5).default
module.exports.__inject__ = function (context) {
add("38ee8f50", content, true, context)
};
/***/ }),
/***/ 174:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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__(158)
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);
/***/ }),
/***/ 193:
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "img/chatbot_audio_feature.458e9b3.png";
/***/ }),
/***/ 194:
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "img/play_chatbot_audio.87713b4.png";
/***/ }),
/***/ 195:
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "img/pause_chatbot_audio.48f50e9.png";
/***/ }),
/***/ 196:
/***/ (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="
/***/ }),
/***/ 197:
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "img/public.43b7bb8.png";
/***/ }),
/***/ 198:
/***/ (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_src_index_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_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(169);
/* 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_src_index_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_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_src_index_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_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_src_index_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_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_src_index_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_lang_scss___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/***/ }),
/***/ 199:
/***/ (function(module, exports, __webpack_require__) {
// Imports
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(4);
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___(false);
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
// Module
___CSS_LOADER_EXPORT___.push([module.i, "*{margin:0;border:none;padding:0}html{height:100%}body{position:relative;min-width:320px;min-height:100%;background:#fff;font-family:MicrosoftYaHei;font-size:0}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{position:absolute!important;min-width:auto!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{margin-bottom:10px!important;font-size:20px!important;line-height:28px!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{margin-bottom:8px!important;font-size:16px!important;line-height:24px!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{vertical-align:top;-o-object-fit:cover;object-fit:cover}body a{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;white-space:nowrap;text-overflow:ellipsis}body .left-content{display:inline-block;margin-right:32px;width:723px}body .right-content{float:right;display:inline-block;width:325px}body .common-flex{display:grid;grid-template-columns:repeat(4,25%)}body .load-more{margin:0 auto;width:357px;height:50px;background:#f5f5f8;border-radius:4px;font-size:18px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#939aa7;line-height:50px;text-align:center}body .footer-outer{position:fixed;bottom:0;left:0;width:100%;min-width:1258px;background:#f5f5f8;z-index:9}body .common-title{padding:20px 0 10px;text-align:left;font-size:24px;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#001965;line-height:33px}body .common-title a{float:right;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#5d6269}body .common-title a i{color:#001965}body p.go-follow{margin-bottom:23px;height:50px;background:#e6553f;border-radius:4px;text-align:center;cursor:pointer;font-size:18px;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#fff;line-height:50px}body .common-other-content{margin:44px 0;padding:30px;box-sizing:border-box}body .common-other-content h6{margin-bottom:20px;font-size:24px;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#001965;line-height:33px}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{margin-bottom:12px;font-size:18px;color:#5d6269;line-height:30px}body .common-other-content .font-content h5{font-size:20px}body .el-message{top:
// Exports
module.exports = ___CSS_LOADER_EXPORT___;
/***/ }),
/***/ 223:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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__(63)))+" 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__(193)))+" alt> <div><h6>保护双眼，听小诺朗读</h6> <div><img"+(_vm._ssrAttr("src",__webpack_require__(194)))+" alt"+(_vm._ssrStyle(null,{ display: _vm.audioPause ? '' : 'none' }, null))+"> <img"+(_vm._ssrAttr("src",__webpack_require__(195)))+" 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__(196)))+" 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__(63)))+" 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__(197)))+" 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.commentModelPopupSh
var staticRenderFns = []
// CONCATENATED MODULE: ./src/pages/article/_id.vue?vue&type=template&id=4a21580c&
// EXTERNAL MODULE: external "vuex"
var external_vuex_ = __webpack_require__(3);
// 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__(64),
qrcodeUrlTest: __webpack_require__(65)
};
},
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__(198)
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__(174).default,BottomRightFixed: __webpack_require__(66).default})
/***/ })
};;
//# sourceMappingURL=_id.js.map