userCenterMySubscribe.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
  1. <template>
  2. <div style="width: 100%;background: #fff;min-height: 700px;color: #666;" class="userCenterMyActivity">
  3. <div
  4. style="height: 60px;line-height: 60px;padding-top: 30px;margin-left: 30px;margin-right: 30px; border-bottom: 1px solid rgba(228, 228, 228, 1);">
  5. {{ $t('common.MySubscription') }}
  6. </div>
  7. <!-- <div style="height: 60px;line-height: 60px;margin-left: 30px;margin-right: 30px; ">
  8. 全部(15)项目类型名称(10)项目类型名称(5)
  9. </div>
  10. <div style="margin-left: 30px;margin-right: 30px;margin-top: 10px; " class="myActivity">
  11. <div>
  12. <ul>
  13. <li class="myActivityLi" v-for="(item,index) in tableData ">
  14. <div style="display: inline-block;height: 100%;"><img src="@/assets/img/userCenter/messageImg.gif" alt="" style="width:150px;height: 100%;"></div>
  15. <div style="display: inline-block;vertical-align:top;width: 288px;">
  16. <div class="title">
  17. <span>{{item.date}}</span>
  18. <span style="color: #ff0000;float: right;font-size: 12px;font-weight: 400;">取消订阅</span>
  19. </div>
  20. <div class="myActivityLi_data " style="line-height: 20px;white-space:normal ">
  21. 栏目描述:{{item.address5}}
  22. </div>
  23. <div class="myActivityLi_data" style="margin-top: 11px;">
  24. <el-tag type="success">国内</el-tag>
  25. <el-tag type="info">电力能源</el-tag>
  26. </div>
  27. <div class="myActivityLi_data">
  28. <span>一天前</span>
  29. <span style="color: #0050d8;margin-left: 30px;">更新:***************</span>
  30. <span style="float: right;margin-right: 5px;">共100篇</span>
  31. </div>
  32. </div>
  33. </li>
  34. </ul>
  35. </div>
  36. </div> -->
  37. <!-- <div style="margin-left: 250px;">
  38. <el-pagination
  39. style="margin-top: 40px;height: 80px;"
  40. background
  41. layout="prev, pager, next"
  42. :total="1000" @size-change="handleSizeChange"
  43. @current-change="handleCurrentChange">
  44. </el-pagination>
  45. </div> -->
  46. <div style="margin: 20px 0 0px 30px;">
  47. <span v-for="(item,index) in taberPhone" style="margin-right: 100px;padding: 10px;"
  48. :class="item.value==taberIndex?'taberPhone1 cursor':'taberPhone2 cursor'"
  49. @click="getTaberPhone(item,index)">{{ $t(item.label) }}</span>
  50. </div>
  51. <div
  52. style="height: 60px;line-height: 60px;font-weight: 700; padding-top: 30px;margin-left: 30px;margin-right: 30px; border-bottom: 1px solid rgba(228, 228, 228, 1);">
  53. {{ $t('common.ManageColumns') }}
  54. </div>
  55. <div style="margin: 20px 0 0px 30px;" v-if="taberIndex==1">
  56. <el-checkbox-group v-model="checkList1">
  57. <el-checkbox v-for="item in projectDataDicts" :key="item.value" :label="item.value">{{ item.label }}
  58. </el-checkbox>
  59. </el-checkbox-group>
  60. </div>
  61. <div style="margin: 20px 0 0px 30px;" v-if="taberIndex==2">
  62. <el-checkbox-group v-model="checkList2">
  63. <el-checkbox v-for="item2 in journalDataDicts" :label="item2.value">{{ item2.label }}</el-checkbox>
  64. </el-checkbox-group>
  65. </div>
  66. <div style="margin: 20px 0 0px 30px;" v-if="taberIndex==3">
  67. <el-checkbox-group v-model="checkList3">
  68. <el-checkbox v-for="item3 in informationDataDicts" :label="item3.value">{{ item3.label }}</el-checkbox>
  69. </el-checkbox-group>
  70. </div>
  71. <div style="margin: 20px 0 0px 30px;" v-if="taberIndex==4">
  72. <el-checkbox-group v-model="checkList4">
  73. <el-checkbox v-for="item3 in consultingDataDicts" :label="item3.value">{{ item3.label }}</el-checkbox>
  74. </el-checkbox-group>
  75. </div>
  76. <div
  77. style="height: 60px;line-height: 60px;font-weight: 700; padding-top: 30px;margin-left: 30px;margin-right: 30px; border-bottom: 1px solid rgba(228, 228, 228, 1);">
  78. {{ $t('common.SetFrequency') }}
  79. </div>
  80. <div style="margin: 20px 0 0px 30px;">
  81. <el-radio v-model="radio" label="1">{{ $t('common.Weekly') }}</el-radio>
  82. <el-radio v-model="radio" label="2">{{ $t('common.Monthly') }}</el-radio>
  83. </div>
  84. <div style="margin: 20px 0 0px 30px;">{{ $t('common.SendWay') }}:{{ $t('common.emailInfo') }}</div>
  85. <div style="float: right;margin-right: 100px;margin-top: 50px;">
  86. <el-button @click="sveSubscript()" type="primary" style="width: 100px;">{{ $t('common.OK') }}</el-button>
  87. </div>
  88. </div>
  89. </template>
  90. <script>
  91. import {getDicts} from '@/api/dict';
  92. import Base from "@/views/base/Base"
  93. import {updataSubscript, getData} from "@/api/managerCenter/mySubscription";
  94. export default {
  95. name: 'userCenterMySubscribe',
  96. extends: Base,
  97. data() {
  98. return {
  99. formInline: {
  100. user: '',
  101. region: ''
  102. },
  103. checkList1: [],
  104. checkList2: [],
  105. checkList3: [],
  106. checkList4: [],
  107. radio: '1',
  108. taberIndex: '1',
  109. taberSendRate: [{
  110. label: "周",
  111. value: '1'
  112. }, {
  113. label: "月",
  114. value: '2'
  115. }],
  116. taberPhone: [{
  117. label: "common.Project",
  118. value: '1'
  119. }, {
  120. label: "common.Periodical",
  121. value: '2'
  122. }, {
  123. label: "common.Information",
  124. value: '3'
  125. },
  126. {
  127. label: "common.Consulting",
  128. value: '4'
  129. }
  130. ],
  131. projectDataDicts: [],
  132. journalDataDicts: [],
  133. informationDataDicts: [],
  134. consultingDataDicts: [],
  135. tableData: [{
  136. date: '日本大型海上风电项目',
  137. address: '中国 北京市',
  138. startTime: '2020-05-25',
  139. endTime: '2020-05-31',
  140. address5: '各界专家从人类命运共同体的高度出发,围绕全理...',
  141. }, {
  142. date: '2020全球能源互联网大会',
  143. address: '中国 北京市',
  144. startTime: '2020-05-25',
  145. endTime: '2020-05-31',
  146. address5: '各界专家从人类命运共同体的高度出发,围绕全理...',
  147. }, {
  148. date: '2020全球能源互联网大会',
  149. address: '中国 北京市',
  150. startTime: '2020-05-25',
  151. endTime: '2020-05-31',
  152. address5: '各界专家从人类命运共同体的高度出发,围绕全理...',
  153. }, {
  154. date: '2020全球能源互联网大会',
  155. address: '中国 北京市',
  156. startTime: '2020-05-25',
  157. endTime: '2020-05-31',
  158. address5: '各界专家从人类命运共同体的高度出发,围绕全理...',
  159. }, {
  160. date: '2020全球能源互联网大会',
  161. address: '中国 北京市',
  162. startTime: '2020-05-25',
  163. endTime: '2020-05-31',
  164. address5: '各界专家从人类命运共同体的高度出发,围绕全理...',
  165. }, {
  166. date: '2020全球能源互联网大会',
  167. address: '中国 北京市',
  168. startTime: '2020-05-25',
  169. endTime: '2020-05-31',
  170. address5: '各界专家从人类命运共同体的高度出发,围绕全理...',
  171. }]
  172. }
  173. },
  174. watch: {
  175. "$i18n.locale"() {
  176. this.initData();
  177. }
  178. },
  179. mounted() {
  180. this.initData();
  181. },
  182. computed: {
  183. taberSendRateMap: function () {
  184. return this.taberSendRate.array2Obj("value", "label");
  185. },
  186. },
  187. methods: {
  188. async initData() {
  189. await getDicts(this.$i18n.locale.toUpperCase() == "EN" ?
  190. "TECHNICAL_SCOPE_DICT_EN,JOURNAL_DICT_EN,CMS_INFORMATION_TYPE_DICT_EN,THINK_TANK_TYPE_DICT_EN,ZHIKU_ZIXUN_DICT_EN,PROJECT_CATEGORIES_DICT_EN" :
  191. "TECHNICAL_SCOPE_DICT,JOURNAL_DICT,CMS_INFORMATION_TYPE_DICT,THINK_TANK_TYPE_DICT,ZHIKU_ZIXUN_DICT,PROJECT_CATEGORIES_DICT")
  192. .then(result => {
  193. if (result.data) {
  194. this.projectDataDicts = result.data[5];
  195. this.journalDataDicts = result.data[1];
  196. this.informationDataDicts = result.data[2];
  197. this.consultingDataDicts = result.data[4];
  198. }
  199. });
  200. await getData().then(result => {
  201. console.log('ressssss', result)
  202. if (result.data) {
  203. var data = result.data;
  204. var projectList = [];
  205. var journalList = [];
  206. var newsList = [];
  207. var consultingList = [];
  208. for (var i = 0; i < result.data.length; i++) {
  209. var section = result.data[i].subscriptionSectionDict;
  210. console.log('section:', section)
  211. var type = result.data[i].subscriptionTypeDict;
  212. if (section == 'project') {
  213. projectList.push(type);
  214. } else if (section == 'journal') {
  215. journalList.push(type);
  216. } else if (section == 'news') {
  217. newsList.push(type);
  218. } else if (section= 'consulting') {
  219. consultingList.push(type)
  220. }
  221. this.radio = result.data[i].subscriptionSendRateDict;
  222. }
  223. this.checkList1 = projectList;
  224. this.checkList2 = journalList;
  225. this.checkList3 = newsList;
  226. this.checkList4 = consultingList;
  227. }
  228. });
  229. },
  230. sveSubscript() {
  231. console.log(this.checkList1);
  232. console.log(this.radio);
  233. var data = {};
  234. var project = {};
  235. var journal = {};
  236. var information = {};
  237. var consulting = {};
  238. var isProject = false;
  239. var isJournal = false;
  240. var isInformation = false;
  241. var isConsulting = false;
  242. if (this.checkList1 != "" || this.checkList1 != null) {
  243. project.subscriptionTypeDict = this.checkList1.toString();
  244. project.subscriptionSectionDict = 'project';
  245. project.subscriptionSection = "项目";
  246. project.subscriptionSendRateDict = this.radio;
  247. project.subscriptionSendRate = this.taberSendRateMap[this.radio];
  248. isProject = true;
  249. }
  250. if (this.checkList2 != "" || this.checkList2 != null) {
  251. journal.subscriptionTypeDict = this.checkList2.toString();
  252. journal.subscriptionSectionDict = 'journal';
  253. journal.subscriptionSection = "期刊";
  254. journal.subscriptionSendRateDict = this.radio;
  255. journal.subscriptionSendRate = this.taberSendRateMap[this.radio];
  256. isJournal = true;
  257. }
  258. if (this.checkList3 != "" || this.checkList3 != null) {
  259. information.subscriptionTypeDict = this.checkList3.toString();
  260. information.subscriptionSectionDict = 'news';
  261. information.subscriptionSection = "资讯";
  262. information.subscriptionSendRateDict = this.radio;
  263. information.subscriptionSendRate = this.taberSendRateMap[this.radio];
  264. isInformation = true;
  265. }
  266. console.log('this.checkList4', this.checkList4)
  267. if (this.checkList4 != "" || this.checkList4 != null) {
  268. consulting.subscriptionTypeDict = this.checkList4.toString();
  269. consulting.subscriptionSectionDict = 'consulting';
  270. consulting.subscriptionSection = "智库咨询";
  271. consulting.subscriptionSendRateDict = this.radio;
  272. consulting.subscriptionSendRate = this.taberSendRateMap[this.radio];
  273. isConsulting = true;
  274. }
  275. console.log('this.checkList4.toString()', this.checkList4.toString())
  276. console.log('consulting', consulting)
  277. console.log('isConsulting', isConsulting)
  278. console.log('JSON.stringify(consulting)', JSON.stringify(consulting))
  279. updataSubscript(JSON.stringify(project), JSON.stringify(journal)
  280. , JSON.stringify(information), JSON.stringify(consulting)
  281. , isProject, isJournal, isInformation, isConsulting).then((result) => {
  282. if (result.status == 200 && result.data.length != 0) {
  283. this.$message({
  284. message: "修改成功",
  285. type: 'success'
  286. });
  287. }
  288. }).catch((error) => {
  289. this.$message({
  290. message: error.msg,
  291. type: 'error'
  292. });
  293. })
  294. },
  295. getTaberPhone(item, index) {
  296. this.taberIndex = item.value
  297. console.log(this.taberIndex)
  298. },
  299. // 发布
  300. release(index, rows) {
  301. console.log(index, rows)
  302. },
  303. // 编辑
  304. change(index, rows) {
  305. console.log(index, rows)
  306. },
  307. // 删除
  308. deleteRow(index, rows) {
  309. console.log(index, rows)
  310. },
  311. // 撤回
  312. withdraw(index, rows) {
  313. console.log(index, rows)
  314. },
  315. handleSizeChange(val) {
  316. console.log(`每页 ${val} 条`);
  317. },
  318. handleCurrentChange(val) {
  319. console.log(`当前页: ${val}`);
  320. }
  321. }
  322. }
  323. </script>
  324. <style scoped>
  325. .el-input {
  326. width: 200px;
  327. }
  328. .el-form-item__content, .el-select {
  329. width: 200px !important;
  330. }
  331. .el-table thead {
  332. background: #eee;
  333. }
  334. .userCenterMyActivity >>> .el-pagination .el-pager li,
  335. .userCenterMyActivity >>> .el-pagination .btn-next,
  336. .userCenterMyActivity >>> .el-pagination .btn-prev {
  337. width: 35px;
  338. height: 35px;
  339. line-height: 35px;
  340. }
  341. .userCenterMyActivity >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  342. background: #0050d8;
  343. }
  344. .margin_left {
  345. margin-left: 5px;
  346. }
  347. .myActivityLi {
  348. width: 456px;
  349. float: left;
  350. height: 153px;
  351. margin-bottom: 20px;
  352. border: 1px solid rgba(228, 228, 228, 1);
  353. box-shadow: rgba(228, 228, 228, 1);
  354. }
  355. .myActivityLi .title {
  356. color: #666;
  357. font-weight: 700;
  358. margin-left: 10px;
  359. margin-top: 8px;
  360. }
  361. .myActivityLi_data {
  362. color: #666;
  363. width: 100%;
  364. line-height: 25px;
  365. font-size: 12px;
  366. margin-top: 5px;
  367. margin-left: 10px;
  368. }
  369. .myActivity ul {
  370. text-align: top;
  371. height: 100%;
  372. display: flex;
  373. display: -webkit-flex; /* Safari */
  374. justify-content: space-between;
  375. flex-wrap: wrap;
  376. }
  377. .el-tag {
  378. height: 22px;
  379. line-height: 22px;
  380. margin-right: 5px;
  381. }
  382. .taberPhone1 {
  383. border-bottom: 2px solid #0c5afa;
  384. color: #0c5afa;
  385. }
  386. .taberPhone2 {
  387. border-bottom: 0;
  388. }
  389. </style>