commonVue.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. import footerCom from '/assets/js/component/footerCom.js'
  2. import feedFix from '/assets/js/component/feedFix.js'
  3. import dialogCom from '/assets/js/component/dialogCom.js'
  4. import loadingCom from '/assets/js/component/loadingCom.js'
  5. import headerCom from '/assets/js/component/headerCom.js'
  6. var AboutKeyWrds = '';
  7. var app = new Vue({
  8. el: '#app',
  9. components: {
  10. footerCom,
  11. feedFix,
  12. dialogCom,
  13. loadingCom,
  14. headerCom
  15. },
  16. data: {
  17. //公共
  18. id: null,
  19. columnList: [],
  20. requestParams: { //内容接口请求参数
  21. categoryid: 0,
  22. pageNum: 1,
  23. pageSize: 9,
  24. title: '',
  25. order: 'sortindex',
  26. articleid: 0,
  27. },
  28. currentPath: '',
  29. articalArray: [], //详情数组
  30. articalArrayRelated: [], //相关推荐
  31. columnTypes: [], //栏目类型
  32. colL: 0,
  33. modelType: 1,
  34. columnImage: '', //栏目图片
  35. footerBoolean:false, //底部延时加载(解决页面闪烁)
  36. // 公共弹框
  37. centerDialogVisible: false,
  38. dialogDataArray: [],
  39. ruleForm: {
  40. platName: '智慧安防',
  41. consultName: '',
  42. consultPhone: '',
  43. mail: '',
  44. company: '',
  45. consultContent: "",
  46. },
  47. rules: {
  48. platName: [{
  49. required: true,
  50. message: '请选择类型',
  51. trigger: 'change'
  52. }, ],
  53. consultName: [{
  54. required: true,
  55. message: '请输入姓名',
  56. trigger: 'blur'
  57. }, ],
  58. consultPhone: [{
  59. required: true,
  60. message: '请输入正确的电话号码',
  61. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  62. trigger: 'change'
  63. }],
  64. mail: [{
  65. required: false,
  66. type: "email",
  67. message: "请输入正确的邮箱地址",
  68. trigger: 'blur'
  69. }],
  70. },
  71. //首页
  72. homeList: [],
  73. status: false,
  74. // 新闻
  75. goPage: 1,
  76. totalPageNum: 1,
  77. totalPageSzie: 1,
  78. loading: true,
  79. categoryid: 0,
  80. },
  81. computed: {
  82. },
  83. created: function () {
  84. this.requestParams.categoryid = this.getQuery('id') ? this.getQuery('id') : ''
  85. this.requestParams.title = this.getQuery('title') ? this.getQuery('title') : ''
  86. this.requestParams.articleid = this.getQuery('articleid') ? this.getQuery('articleid') : ''
  87. },
  88. mounted: function () {
  89. this.getColumnData()
  90. },
  91. methods: {
  92. //获取栏目数据
  93. getColumnData() {
  94. var _this = this;
  95. if (!localStorage.getItem('storeColumnList') || window.location.pathname == '/index.html' || window.location.pathname == '/') {
  96. $.ajax({
  97. type: 'get',
  98. dataType: 'json',
  99. url: window.FQDN2 + 'siteCategory/siteCategoryList',
  100. }).done(function (res) {
  101. _this.columnList = res.data;
  102. let expires = Date.now() + 1000 * 60 * 30; //半小时过期时间
  103. localStorage.setItem('storeColumnList', JSON.stringify({
  104. data: _this.columnList,
  105. expires
  106. }));
  107. _this.loading = false
  108. _this.currentPath = window.location.pathname;
  109. _this.handleColumnData()
  110. })
  111. } else {
  112. this.loading = false;
  113. this.handleColumnData()
  114. }
  115. setTimeout(function(){
  116. _this.footerBoolean=true
  117. },1000)
  118. },
  119. handleColumnData() {
  120. this.currentPath = window.location.pathname;
  121. this.columnList = JSON.parse(localStorage.getItem('storeColumnList')).data;
  122. // 读取并检查是否过期
  123. if (JSON.parse(localStorage.getItem('storeColumnList')).expires < Date.now()) {
  124. localStorage.removeItem('storeColumnList');
  125. } else {
  126. }
  127. var _this = this;
  128. for (let i = 0; i < _this.columnList.length; i++) {
  129. //栏目处理
  130. //进入首页
  131. if (_this.columnList[i].sname == '/index.html' && (window.location.pathname == '/'||window.location.pathname == '')) {
  132. getSeoCommon()
  133. this.requestParams.categoryid = this.columnList[0].id
  134. _this.modelType = _this.columnList[0].modelType;
  135. _this.columnImage = _this.columnList[0].imagePath;
  136. setTimeout(() => {
  137. if (_this.modelType == 2) {
  138. document.getElementById("videoPlay").src = _this.columnImage; //url为你需要播放的视频地址
  139. document.getElementById("videoPlay").setAttribute('poster', '/assets/img/banner/111.png');
  140. }
  141. }, 100)
  142. _this.getArticalData(_this.requestParams)
  143. }
  144. //进入其他栏目页
  145. if ((_this.columnList[i].sname == window.location.pathname)) {
  146. getSeoCommon()
  147. _this.columnTypes = _this.columnList[i].children
  148. _this.colL = _this.columnTypes.childten;
  149. if (_this.columnList[i].children.length > 0) {
  150. _this.requestParams.categoryid = (_this.getQuery('isUrlId') == 1) ? _this.getQuery('id') : _this.columnTypes[0].id;
  151. } else {
  152. var objData = _this.columnList.filter(obj => obj.sname == window.location.pathname);
  153. _this.requestParams.categoryid = objData[0].id
  154. }
  155. _this.getArticalData(_this.requestParams)
  156. _this.modelType = _this.columnList[i].modelType;
  157. _this.columnImage = _this.columnList[i].imagePath;
  158. setTimeout(() => {
  159. if (_this.modelType == 2) {
  160. document.getElementById("videoPlay").src = _this.columnImage; //url为你需要播放的视频地址
  161. document.getElementById("videoPlay").setAttribute('poster', '/assets/img/banner/111.png');
  162. }
  163. }, 100)
  164. } else {
  165. // 进入详情页
  166. if (_this.columnList[i].sname == '/product/index.html' && window.location.pathname == '/product/read.html') {
  167. getDetailCommon()
  168. getSeoCommon()
  169. }
  170. if (_this.columnList[i].sname == '/solution/index.html' && window.location.pathname == '/solution/read.html') {
  171. getDetailCommon()
  172. getSeoCommon()
  173. }
  174. if (_this.columnList[i].sname == '/news/index.html' && window.location.pathname == '/news/read.html') {
  175. getDetailCommon()
  176. getSeoCommon()
  177. }
  178. function getDetailCommon() {
  179. //获取内容详情
  180. _this.getArticalData(_this.requestParams)
  181. //获取详情相关数据
  182. setTimeout(() => {
  183. _this.requestParams.title = ''
  184. _this.requestParams.articleid = 0
  185. _this.getArticalData(_this.requestParams, 1)
  186. }, 100)
  187. _this.currentPath = _this.columnList[i].sname //产品详情时栏目高亮
  188. _this.modelType = _this.columnList[i].modelType; //栏目图片获取
  189. _this.columnImage = _this.columnList[i].imagePath; //栏目图片获取
  190. setTimeout(() => {
  191. if (_this.modelType == 2) {
  192. document.getElementById("videoPlay").src = _this.columnImage; //url为你需要播放的视频地址
  193. document.getElementById("videoPlay").setAttribute('poster', '/assets/img/banner/111.png');
  194. }
  195. }, 100)
  196. }
  197. }
  198. function getSeoCommon() {
  199. $('title').text(_this.columnList[i].categoryName);
  200. $('meta[name="description"]').attr('content', _this.columnList[i].metadescription);
  201. $('meta[name="keywords"]').attr('content', _this.columnList[i].metakeywords);
  202. }
  203. // 获取反馈弹框类型数据
  204. if (_this.columnList[i].sname == '/solution/index.html') {
  205. _this.dialogDataArray = (_this.columnList[i].children)
  206. _this.ruleForm.platName = _this.dialogDataArray[0].categoryName;
  207. }
  208. }
  209. },
  210. //获取内容
  211. getArticalData(requestParams, type) {
  212. var _this = this
  213. if (window.location.pathname == '/news/index.html') {
  214. _this.requestParams.order = ''
  215. }
  216. $.ajax({
  217. type: 'GET',
  218. dataType: 'json',
  219. url: window.FQDN2 + 'siteArticle/siteArticleList',
  220. data: requestParams
  221. }).done(function (res) {
  222. var aa
  223. var bb
  224. if (type == 1) {
  225. bb = res.data.records
  226. } else {
  227. aa = res.data.records;
  228. // aa.sort(_this.compare("sortindex"))
  229. _this.articalArray = aa;
  230. }
  231. if (bb) {
  232. _this.articalArrayRelated = bb.filter(obj => obj.title != _this.articalArray[0].title);
  233. _this.articalArrayRelated = bb
  234. }
  235. // _this.loading = false;
  236. _this.totalPageSzie = res.data.total
  237. _this.totalPageNum = Math.ceil(res.data.total / res.data.size);
  238. }).fail(function (err) {});
  239. },
  240. //类型点击
  241. facilityClick(e, item) {
  242. this.requestParams.categoryid = item.id
  243. this.requestParams.pageNum = 1
  244. this.getArticalData(this.requestParams)
  245. },
  246. // 分页
  247. oneInnerBox: function (param) {
  248. window.location = "./read.html?id=" + param.categoryid + "&title=" + param.title + "&articleid=" + param.id + "&isUrlId=1";
  249. },
  250. enterPage: function (res) {
  251. if (this.goPage >= 1 && this.goPage <= this.totalPageNum) {
  252. this.requestParams.pageNum = this.goPage
  253. this.getArticalData(this.requestParams)
  254. } else {
  255. this.goPage = 1
  256. alert('输入页数有误!')
  257. }
  258. },
  259. currentChange: function (res) {
  260. this.requestParams.pageNum = res
  261. this.getArticalData(this.requestParams)
  262. },
  263. //申请试用
  264. goApply: function () {
  265. this.centerDialogVisible = true
  266. },
  267. //弹框显示隐藏(子组件向父组件传值)
  268. handleChildEvent: function (value) {
  269. this.centerDialogVisible = value; // 处理从子组件接收到的数据
  270. },
  271. // 排序
  272. compare(property) {
  273. return function (a, b) {
  274. var value1 = a[property];
  275. var value2 = b[property];
  276. return value1 - value2;
  277. }
  278. },
  279. // 获取路由参数
  280. getQuery(name) {
  281. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  282. var r = window.location.search.substr(1).match(reg);
  283. if (r != null) return decodeURI(r[2]);
  284. return null;
  285. },
  286. //获得年月日时分秒 //传入日期//例:2020-10-27T14:36:23
  287. timeFormatSeconds(time) {
  288. var d = time ? new Date(time) : new Date();
  289. var year = d.getFullYear();
  290. var month = d.getMonth() + 1;
  291. var day = d.getDate();
  292. var hours = d.getHours();
  293. var min = d.getMinutes();
  294. var seconds = d.getSeconds();
  295. if (month < 10) month = '0' + month;
  296. if (day < 10) day = '0' + day;
  297. if (hours < 0) hours = '0' + hours;
  298. if (min < 10) min = '0' + min;
  299. if (seconds < 10) seconds = '0' + seconds;
  300. return (year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + seconds);
  301. }
  302. }
  303. });