dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterMySubscribe.vue

<template>
  <div style="width: 100%;background: #fff;min-height: 700px;color: #666;" class="userCenterMyActivity">
    <div
        style="height: 60px;line-height: 60px;padding-top: 30px;margin-left: 30px;margin-right: 30px; border-bottom: 1px solid rgba(228, 228, 228, 1);">
      {{ $t('common.MySubscription') }}
    </div>
    <!-- <div style="height: 60px;line-height: 60px;margin-left: 30px;margin-right: 30px; ">
        全部（15）项目类型名称（10）项目类型名称（5）
    </div>
    <div style="margin-left: 30px;margin-right: 30px;margin-top: 10px; " class="myActivity">
        <div>
            <ul>
                <li class="myActivityLi" v-for="(item,index) in tableData ">
                    <div style="display: inline-block;height: 100%;"><img src="@/assets/img/userCenter/messageImg.gif" alt="" style="width:150px;height: 100%;"></div>
                    <div style="display: inline-block;vertical-align:top;width: 288px;">
                        <div class="title">
                            <span>{{item.date}}</span>
                            <span style="color: #ff0000;float: right;font-size: 12px;font-weight: 400;">取消订阅</span>
                        </div>
                        <div class="myActivityLi_data " style="line-height: 20px;white-space:normal ">
                            栏目描述：{{item.address5}}
                        </div>

                        <div class="myActivityLi_data" style="margin-top: 11px;">
                            <el-tag type="success">国内</el-tag>
                            <el-tag type="info">电力能源</el-tag>
                        </div>
                        <div class="myActivityLi_data">
                            <span>一天前</span>
                            <span style="color: #0050d8;margin-left: 30px;">更新：***************</span>
                            <span style="float: right;margin-right: 5px;">共100篇</span>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </div> -->
    <!-- <div style="margin-left: 250px;">
        <el-pagination
            style="margin-top: 40px;height: 80px;"
            background
            layout="prev, pager, next"
            :total="1000"  @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
            </el-pagination>
    </div> -->
    <div style="margin: 20px 0 0px 30px;">
      <span v-for="(item,index) in taberPhone" style="margin-right: 100px;padding: 10px;"
            :class="item.value==taberIndex?'taberPhone1 cursor':'taberPhone2 cursor'"
            @click="getTaberPhone(item,index)">{{ $t(item.label) }}</span>
    </div>
    <div
        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);">
      {{ $t('common.ManageColumns') }}
    </div>
    <div style="margin: 20px 0 0px 30px;" v-if="taberIndex==1">
      <el-checkbox-group v-model="checkList1">
        <el-checkbox v-for="item in projectDataDicts" :key="item.value" :label="item.value">{{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div style="margin: 20px 0 0px 30px;" v-if="taberIndex==2">
      <el-checkbox-group v-model="checkList2">
        <el-checkbox v-for="item2 in journalDataDicts" :label="item2.value">{{ item2.label }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div style="margin: 20px 0 0px 30px;" v-if="taberIndex==3">
      <el-checkbox-group v-model="checkList3">
        <el-checkbox v-for="item3 in informationDataDicts" :label="item3.value">{{ item3.label }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div style="margin: 20px 0 0px 30px;" v-if="taberIndex==4">
      <el-checkbox-group v-model="checkList4">
        <el-checkbox v-for="item3 in consultingDataDicts" :label="item3.value">{{ item3.label }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div
        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);">
      {{ $t('common.SetFrequency') }}
    </div>
    <div style="margin: 20px 0 0px 30px;">
      <el-radio v-model="radio" label="1">{{ $t('common.Weekly') }}</el-radio>
      <el-radio v-model="radio" label="2">{{ $t('common.Monthly') }}</el-radio>
    </div>
    <div style="margin: 20px 0 0px 30px;">{{ $t('common.SendWay') }}：{{ $t('common.emailInfo') }}</div>
    <div style="float: right;margin-right: 100px;margin-top: 50px;">
      <el-button @click="sveSubscript()" type="primary" style="width: 100px;">{{ $t('common.OK') }}</el-button>
    </div>
  </div>
</template>
<script>
import {getDicts} from '@/api/dict';
import Base from "@/views/base/Base"
import {updataSubscript, getData} from "@/api/managerCenter/mySubscription";

export default {
  name: 'userCenterMySubscribe',
  extends: Base,
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      checkList1: [],
      checkList2: [],
      checkList3: [],
      checkList4: [],
      radio: '1',
      taberIndex: '1',
      taberSendRate: [{
        label: "周",
        value: '1'
      }, {
        label: "月",
        value: '2'
      }],
      taberPhone: [{
        label: "common.Project",
        value: '1'
      }, {
        label: "common.Periodical",
        value: '2'
      }, {
        label: "common.Information",
        value: '3'
      },
        {
          label: "common.Consulting",
          value: '4'
        }
      ],
      projectDataDicts: [],
      journalDataDicts: [],
      informationDataDicts: [],
      consultingDataDicts: [],
      tableData: [{
        date: '日本大型海上风电项目',
        address: '中国  北京市',
        startTime: '2020-05-25',
        endTime: '2020-05-31',
        address5: '各界专家从人类命运共同体的高度出发,围绕全理...',
      }, {
        date: '2020全球能源互联网大会',
        address: '中国  北京市',
        startTime: '2020-05-25',
        endTime: '2020-05-31',
        address5: '各界专家从人类命运共同体的高度出发,围绕全理...',
      }, {
        date: '2020全球能源互联网大会',
        address: '中国  北京市',
        startTime: '2020-05-25',
        endTime: '2020-05-31',
        address5: '各界专家从人类命运共同体的高度出发,围绕全理...',
      }, {
        date: '2020全球能源互联网大会',
        address: '中国  北京市',
        startTime: '2020-05-25',
        endTime: '2020-05-31',
        address5: '各界专家从人类命运共同体的高度出发,围绕全理...',
      }, {
        date: '2020全球能源互联网大会',
        address: '中国  北京市',
        startTime: '2020-05-25',
        endTime: '2020-05-31',
        address5: '各界专家从人类命运共同体的高度出发,围绕全理...',
      }, {
        date: '2020全球能源互联网大会',
        address: '中国  北京市',
        startTime: '2020-05-25',
        endTime: '2020-05-31',
        address5: '各界专家从人类命运共同体的高度出发,围绕全理...',
      }]
    }
  },
  watch: {
    "$i18n.locale"() {
      this.initData();
    }
  },
  mounted() {
    this.initData();
  },
  computed: {
    taberSendRateMap: function () {
      return this.taberSendRate.array2Obj("value", "label");
    },
  },
  methods: {
    async initData() {
      await getDicts(this.$i18n.locale.toUpperCase() == "EN" ?
          "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" :
          "TECHNICAL_SCOPE_DICT,JOURNAL_DICT,CMS_INFORMATION_TYPE_DICT,THINK_TANK_TYPE_DICT,ZHIKU_ZIXUN_DICT,PROJECT_CATEGORIES_DICT")
          .then(result => {
        if (result.data) {
          this.projectDataDicts = result.data[5];
          this.journalDataDicts = result.data[1];
          this.informationDataDicts = result.data[2];
          this.consultingDataDicts = result.data[4];
        }
      });
      await getData().then(result => {
        console.log('ressssss', result)
        if (result.data) {
          var data = result.data;
          var projectList = [];
          var journalList = [];
          var newsList = [];
          var consultingList = [];
          for (var i = 0; i < result.data.length; i++) {
            var section = result.data[i].subscriptionSectionDict;
            console.log('section:', section)
            var type = result.data[i].subscriptionTypeDict;
            if (section == 'project') {
              projectList.push(type);
            } else if (section == 'journal') {
              journalList.push(type);
            } else if (section == 'news') {
              newsList.push(type);
            } else if (section= 'consulting') {
              consultingList.push(type)
            }
            this.radio = result.data[i].subscriptionSendRateDict;
          }
          this.checkList1 = projectList;
          this.checkList2 = journalList;
          this.checkList3 = newsList;
          this.checkList4 = consultingList;
        }
      });
    },
    sveSubscript() {
      console.log(this.checkList1);
      console.log(this.radio);
      var data = {};
      var project = {};
      var journal = {};
      var information = {};
      var consulting = {};
      var isProject = false;
      var isJournal = false;
      var isInformation = false;
      var isConsulting = false;
      if (this.checkList1 != "" || this.checkList1 != null) {
        project.subscriptionTypeDict = this.checkList1.toString();
        project.subscriptionSectionDict = 'project';
        project.subscriptionSection = "项目";
        project.subscriptionSendRateDict = this.radio;
        project.subscriptionSendRate = this.taberSendRateMap[this.radio];
        isProject = true;
      }
      if (this.checkList2 != "" || this.checkList2 != null) {
        journal.subscriptionTypeDict = this.checkList2.toString();
        journal.subscriptionSectionDict = 'journal';
        journal.subscriptionSection = "期刊";
        journal.subscriptionSendRateDict = this.radio;
        journal.subscriptionSendRate = this.taberSendRateMap[this.radio];
        isJournal = true;
      }
      if (this.checkList3 != "" || this.checkList3 != null) {
        information.subscriptionTypeDict = this.checkList3.toString();
        information.subscriptionSectionDict = 'news';
        information.subscriptionSection = "资讯";
        information.subscriptionSendRateDict = this.radio;
        information.subscriptionSendRate = this.taberSendRateMap[this.radio];
        isInformation = true;
      }
      console.log('this.checkList4', this.checkList4)
      if (this.checkList4 != "" || this.checkList4 != null) {
        consulting.subscriptionTypeDict = this.checkList4.toString();
        consulting.subscriptionSectionDict = 'consulting';
        consulting.subscriptionSection = "智库咨询";
        consulting.subscriptionSendRateDict = this.radio;
        consulting.subscriptionSendRate = this.taberSendRateMap[this.radio];
        isConsulting = true;
      }

      console.log('this.checkList4.toString()', this.checkList4.toString())
      console.log('consulting', consulting)
      console.log('isConsulting', isConsulting)
      console.log('JSON.stringify(consulting)', JSON.stringify(consulting))
      updataSubscript(JSON.stringify(project), JSON.stringify(journal)
          , JSON.stringify(information), JSON.stringify(consulting)
          , isProject, isJournal, isInformation, isConsulting).then((result) => {
        if (result.status == 200 && result.data.length != 0) {
          this.$message({
            message: "修改成功",
            type: 'success'
          });
        }
      }).catch((error) => {
        this.$message({
          message: error.msg,
          type: 'error'
        });
      })
    },
    getTaberPhone(item, index) {
      this.taberIndex = item.value
      console.log(this.taberIndex)
    },
    // 发布
    release(index, rows) {
      console.log(index, rows)
    },
    // 编辑
    change(index, rows) {
      console.log(index, rows)
    },
    // 删除
    deleteRow(index, rows) {
      console.log(index, rows)
    },
    // 撤回
    withdraw(index, rows) {
      console.log(index, rows)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>
<style scoped>

.el-input {
  width: 200px;
}

.el-form-item__content, .el-select {
  width: 200px !important;
}

.el-table thead {
  background: #eee;
}

.userCenterMyActivity >>> .el-pagination .el-pager li,
.userCenterMyActivity >>> .el-pagination .btn-next,
.userCenterMyActivity >>> .el-pagination .btn-prev {
  width: 35px;
  height: 35px;
  line-height: 35px;
}

.userCenterMyActivity >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #0050d8;
}

.margin_left {
  margin-left: 5px;
}

.myActivityLi {
  width: 456px;
  float: left;
  height: 153px;
  margin-bottom: 20px;
  border: 1px solid rgba(228, 228, 228, 1);
  box-shadow: rgba(228, 228, 228, 1);
}

.myActivityLi .title {
  color: #666;
  font-weight: 700;
  margin-left: 10px;
  margin-top: 8px;
}

.myActivityLi_data {
  color: #666;
  width: 100%;
  line-height: 25px;
  font-size: 12px;
  margin-top: 5px;
  margin-left: 10px;
}

.myActivity ul {
  text-align: top;
  height: 100%;
  display: flex;
  display: -webkit-flex; /* Safari */
  justify-content: space-between;
  flex-wrap: wrap;
}

.el-tag {
  height: 22px;
  line-height: 22px;
  margin-right: 5px;
}

.taberPhone1 {
  border-bottom: 2px solid #0c5afa;
  color: #0c5afa;
}

.taberPhone2 {
  border-bottom: 0;
}
</style>