commonVue.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
  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. // 公共弹框
  36. centerDialogVisible: false,
  37. dialogDataArray: [],
  38. ruleForm: {
  39. platName: '智慧安防',
  40. consultName: '',
  41. consultPhone: '',
  42. mail: '',
  43. company: '',
  44. consultContent: "",
  45. },
  46. rules: {
  47. platName: [{
  48. required: true,
  49. message: '请选择类型',
  50. trigger: 'change'
  51. }, ],
  52. consultName: [{
  53. required: true,
  54. message: '请输入姓名',
  55. trigger: 'blur'
  56. }, ],
  57. consultPhone: [{
  58. required: true,
  59. message: '请输入正确的电话号码',
  60. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  61. trigger: 'change'
  62. }],
  63. mail: [{
  64. required: false,
  65. type: "email",
  66. message: "请输入正确的邮箱地址",
  67. trigger: 'blur'
  68. }],
  69. },
  70. //首页
  71. homeList: [],
  72. status: false,
  73. // 新闻
  74. goPage: 1,
  75. totalPageNum: 1,
  76. totalPageSzie: 1,
  77. loading: true,
  78. categoryid: 0,
  79. },
  80. computed: {
  81. },
  82. created: function () {
  83. this.requestParams.categoryid = this.getQuery('id') ? this.getQuery('id') : ''
  84. this.requestParams.title = this.getQuery('title') ? this.getQuery('title') : ''
  85. this.requestParams.articleid = this.getQuery('articleid') ? this.getQuery('articleid') : ''
  86. },
  87. mounted: function () {
  88. this.getColumnData()
  89. },
  90. methods: {
  91. //获取栏目数据
  92. getColumnData() {
  93. var _this = this;
  94. if (!localStorage.getItem('storeColumnList') || window.location.pathname == '/index.html' || window.location.pathname == '/') {
  95. $.ajax({
  96. type: 'get',
  97. dataType: 'json',
  98. url: window.FQDN2 + 'siteCategory/siteCategoryList',
  99. }).done(function (res) {
  100. _this.columnList = res.data;
  101. let expires = Date.now() + 1000 * 60 * 30; //半小时过期时间
  102. localStorage.setItem('storeColumnList', JSON.stringify({
  103. data: _this.columnList,
  104. expires
  105. }));
  106. _this.loading = false
  107. _this.currentPath = window.location.pathname;
  108. _this.handleColumnData()
  109. })
  110. } else {
  111. console.log(JSON.parse(localStorage.getItem('storeColumnList')))
  112. this.loading = false;
  113. this.handleColumnData()
  114. }
  115. },
  116. handleColumnData() {
  117. this.currentPath = window.location.pathname;
  118. this.columnList = JSON.parse(localStorage.getItem('storeColumnList')).data;
  119. this.requestParams.categoryid = this.columnList[0].id
  120. console.log(JSON.parse(localStorage.getItem('storeColumnList')))
  121. console.log(Date.now())
  122. // 读取并检查是否过期
  123. if (JSON.parse(localStorage.getItem('storeColumnList')).expires < Date.now()) {
  124. localStorage.removeItem('storeColumnList');
  125. } else {
  126. console.log(this.columnList);
  127. }
  128. var _this = this;
  129. for (let i = 0; i < _this.columnList.length; i++) {
  130. //栏目处理
  131. //进入首页
  132. if (_this.columnList[i].sname == '/index.html' && (window.location.pathname == '/'||window.location.pathname == '')) {
  133. getSeoCommon()
  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. console.log(bb)
  233. console.log(_this.articalArray[0])
  234. _this.articalArrayRelated = bb.filter(obj => obj.title != _this.articalArray[0].title);
  235. // _this.articalArrayRelated = bb
  236. console.log(_this.articalArrayRelated)
  237. }
  238. // _this.loading = false;
  239. _this.totalPageSzie = res.data.total
  240. _this.totalPageNum = Math.ceil(res.data.total / res.data.size);
  241. }).fail(function (err) {});
  242. },
  243. //类型点击
  244. facilityClick(e, item) {
  245. this.requestParams.categoryid = item.id
  246. this.requestParams.pageNum = 1
  247. this.getArticalData(this.requestParams)
  248. },
  249. // 分页
  250. oneInnerBox: function (param) {
  251. window.location = "./read.html?id=" + param.categoryid + "&title=" + param.title + "&articleid=" + param.id + "&isUrlId=1";
  252. },
  253. enterPage: function (res) {
  254. if (this.goPage >= 1 && this.goPage <= this.totalPageNum) {
  255. this.requestParams.pageNum = this.goPage
  256. this.getArticalData(this.requestParams)
  257. } else {
  258. this.goPage = 1
  259. alert('输入页数有误!')
  260. }
  261. },
  262. currentChange: function (res) {
  263. this.requestParams.pageNum = res
  264. this.getArticalData(this.requestParams)
  265. },
  266. //申请试用
  267. goApply: function () {
  268. this.centerDialogVisible = true
  269. },
  270. //弹框显示隐藏(子组件向父组件传值)
  271. handleChildEvent: function (value) {
  272. this.centerDialogVisible = value; // 处理从子组件接收到的数据
  273. },
  274. // 排序
  275. compare(property) {
  276. return function (a, b) {
  277. var value1 = a[property];
  278. var value2 = b[property];
  279. return value1 - value2;
  280. }
  281. },
  282. // 获取路由参数
  283. getQuery(name) {
  284. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  285. var r = window.location.search.substr(1).match(reg);
  286. if (r != null) return decodeURI(r[2]);
  287. return null;
  288. },
  289. //获得年月日时分秒 //传入日期//例:2020-10-27T14:36:23
  290. timeFormatSeconds(time) {
  291. var d = time ? new Date(time) : new Date();
  292. var year = d.getFullYear();
  293. var month = d.getMonth() + 1;
  294. var day = d.getDate();
  295. var hours = d.getHours();
  296. var min = d.getMinutes();
  297. var seconds = d.getSeconds();
  298. if (month < 10) month = '0' + month;
  299. if (day < 10) day = '0' + day;
  300. if (hours < 0) hours = '0' + hours;
  301. if (min < 10) min = '0' + min;
  302. if (seconds < 10) seconds = '0' + seconds;
  303. return (year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + seconds);
  304. }
  305. }
  306. });