copyright-official-website/src/components/TransactionCenter.vue

<template>
  <div class="transaction-center">
    <div class="box-top">
      <div class="ys"></div>
      <div class="bj"></div>
    </div>
    <div class="box-bottom">
      <div class="center">
        <div class="box1">
          <div class="title">
            <span class="mod1 active" @click="selectModule('mod1')">软著交易中心</span>
            <span class="mod2" @click="selectModule('mod2')">今日特价软著</span>
          </div>
          <div class="content1" v-if="currentModule === 'mod1'">
            <div class="row1">
              <em>著作权分类：</em>
              <div class="sort-buttons">
                <button
                  v-for="(sort, index) in visibleSorts" 
                  :key="index" 
                  class="sort-button" 
                  :class="{ 'selected': selectedSort === sort }" 
                  @click="selectSort(sort)"
                >
                  {{ sort }}
                </button>
                <button v-if="hasMoreSorts" class="more-button" @click="showMore1 = true">
                  更多+
                </button>
                <div v-if="showMore1" class="popup1">
                  <button 
                  v-for="(sort, index) in hiddenSorts" 
                  :key="index" 
                  class="sort-button" 
                  :class="{ 'selected': selectedSort === sort }" @click="selectSort(sort)"
                  >
                    {{ sort }}
                  </button>
                  <button class="close-button" @click="showMore1 = false">关闭</button>
                </div>

              </div>


            </div>
            <div class="row2">
              <em>开发语言：</em>
              <div class="language-buttons">
                <button
                  v-for="(language, index) in visibleLanguages"
                  :key="index"
                  class="language-button"
                  :class="{ 'selected': selectedLanguage === language }"
                  @click="selectLanguage(language)"
                >
                  {{ language }}
                </button>
                <button v-if="hasMoreLanguages" class="more-button" @click="showMore = true">
                  更多+
                </button>
                <div v-if="showMore" class="popup">
                  <button
                    v-for="(language, index) in hiddenLanguages"
                    :key="index"
                    class="language-button"
                    :class="{ 'selected': selectedLanguage === language }"
                    @click="selectLanguage(language)"
                  >
                    {{ language }}
                  </button>
                  <button class="close-button" @click="showMore = false">关闭</button>
                </div>
              </div>
            </div>
            <div class="row3">
              <span>
                <em>软著名称：</em>
                <input type="text" placeholder="请输入软著名称"   v-model="searchName">
              </span>
              <span>
                <em>下证时间：</em>
                <!-- <input type="date" v-model="startDate" placeholder="请选则开始日期"> -->
                <el-date-picker
                  style="height: 40px; width: 150px;"
                  v-model="startDate"
                  id="startDate"
                  type="date"
                  placeholder="选择开始日期" 
                  :picker-options="startPickerOptions"
                  @change="handleStartDateChange">
                </el-date-picker>
                &emsp;
                <!-- <input type="date" v-model="endDate"> -->
                <el-date-picker
                  style="height: 40px; width: 150px;"
                  v-model="endDate"
                  type="date"
                  placeholder="选择截止日期" 
                  :picker-options="endPickerOptions"
                  @change="handleEndDateChange">
                </el-date-picker>
              </span>
              <button class="search" @click="search()">立即搜索</button>
              <button class="reset" @click="resetAll()">重置全部搜索条件</button>
            </div>
          </div>
          <div class="content2" v-if="currentModule === 'mod2'">
            <div class="bj">
              <div class="left">
                <div class="headline">
                  <h3>AI著作权名称</h3>
                  <em>医药类</em>
                </div>
                <div class="text">
                  <p>著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述</p>
                </div>
              </div>
              <div class="right">
                <p><em>￥</em><i>298.00</i>/件</p>
                <a href="https://www.aimzhu.com/operator/">立即抢购</a>
              </div>
            </div>
          </div>
        </div>
        <div class="box2">
          <p class="content11" v-if="currentModule === 'mod1'">共有<em>2023445</em>个搜索结果</p>
          <p class="content22" v-if="currentModule === 'mod2'">今日共有<em>10</em>个特价软著</p>
        </div>
        <div class="box3">
          <div class="content111" v-if="currentModule === 'mod1'">
            <el-table 
              class="table"
              :data="tableData" 
              style="width: 100%"
              :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
              >
              <el-table-column prop="序号" label="序号" width="100" />
              <el-table-column prop="软著名称" label="软著名称" width="300" />
              <el-table-column prop="价格" label="价格" />
              <el-table-column prop="所属行业" label="所属行业" />
              <el-table-column prop="下证日期" label="下证日期" />
              <el-table-column prop="发布日期" label="发布日期" />
              <el-table-column prop="距离下架" label="距离下架" />
            </el-table>

            <a class="goBuy" href="https://www.aimzhu.com/operator/">去购买</a>
            <el-pagination
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            ></el-pagination>
          </div>
          <!-- 今日特价软著 -->
          <div class="content222" v-if="currentModule === 'mod2'">
            <el-table 
              :data="tableData" 
              style="width: 100%"
              :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
              >
              <el-table-column prop="序号" label="序号" width="100" />
              <el-table-column prop="软著名称" label="软著名称" width="300" />
              <el-table-column prop="价格" label="价格" />
              <el-table-column prop="所属行业" label="所属行业" />
              <el-table-column prop="下证日期" label="下证日期" />
              <el-table-column prop="发布日期" label="发布日期" />
              <el-table-column prop="距离下架" label="距离下架" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { Button } from 'vue-amazing-ui'
// import 'vue-amazing-ui/css'
// import { ElButton, ElInput } from 'element-plus'
import { ElTable, ElTableColumn, ElPagination } from 'element-plus';
import { ElDatePicker } from 'element-plus';
import { format } from 'date-fns';

import { ref } from 'vue'
import axios from 'axios'
import { layer } from "vue3-layer"

export default {
  components: {
    ElTable,
    ElTableColumn,
    ElPagination,
    ElDatePicker
  },
  data() {
    return {
      currentModule: 'mod1', // 初始模块为 mod1

      sorts: ['全部', '医药类', '教育类', '工业类', '政务类', '财税类', '金融类', '通信类', '能源类', '交通类', '信息类', '语音类'],
      maxVisible1: 9,
      showMore1: false,
      selectedSort: '全部',

      languages: [
      'Java', 'C语言', 'C++', 'JavaScript', 'Python', '安卓', '鸿蒙HarmonyOS4.0', 'HTML', 'CSS', 
      ],
      maxVisible: 8, // 最大可见按钮数量
      showMore: false, // 控制弹出层的显示
      selectedLanguage: 'Java', // 选中的省份

      searchName: '', // 软著名称
      startDate: '', // 下证开始时间
      endDate: '', // 下证结束时间
      // startDateString: '',
      // endDateString: '',
      startDateString: new Date().toISOString().split('T')[0], 
      // endDateString: new Date().toISOString().split('T')[0], 
      endDateString: new Date(new Date().setMonth(new Date().getMonth() + 1)).toISOString().split('T')[0], // 设置一个月之后的日期作为默认值
      // endDateString: format(new Date(new Date().getTime() + 10 * 24 * 60 * 60 * 1000), 'yyyy-MM-dd'), // 设置10天之后的日期作为默认值
      
      startPickerOptions: {
        disabledDate: (time) => {
          if (this.endDateString) {
            return time.getTime() > this.endDateString.getTime();
          }
          return false;
        },
      },
      endPickerOptions: {
        disabledDate: (time) => {
          if (this.startDateString) {
            return time.getTime() < this.startDateString.getTime();
          }
          return false;
        },
      },

      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 0, // 总数据条数

      pickerOptions: {
      style: {
        border: '1px solid red'
      }
    }
      
    };
  },
  computed: {
    visibleSorts() {
      return this.sorts.slice(0, this.maxVisible1);
    },
    hiddenSorts() {
      return this.sorts.slice(this.maxVisible1);
    },
    hasMoreSorts() {
      return this.sorts.length > this.maxVisible1;
    },

    visibleLanguages() {
      return this.languages.slice(0, this.maxVisible);
    },
    hiddenLanguages() {
      return this.languages.slice(this.maxVisible);
    },
    hasMoreLanguages() {
      return this.languages.length > this.maxVisible;
    },
  },
  methods: {
    selectModule(module) {
      this.currentModule = module;
      
      const mod1 = document.querySelector('.mod1')
      const mod2 = document.querySelector('.mod2')
      // 根据当前模块切换内容
      const content1 = '.content1';
      const content2 = '.content2';
      const content11 = '.content11';
      const content22 = '.content22';
      const content111 = '.content111';
      const content222 = '.content222';
      if (this.currentModule === 'mod1') {
        // 软著交易中心激活
        $(mod1).addClass('active').siblings().removeClass('active')
        $(content1).show();
        $(content11).show();
        $(content111).show();
        $(content2).hide();
        $(content22).hide();
        $(content222).hide();
      } else if (this.currentModule === 'mod2') {
        // 今日特价软著激活
        $(mod2).addClass('active').siblings().removeClass('active')
        $(content1).hide();
        $(content11).hide();
        $(content111).hide();
        $(content2).show();
        $(content22).show();
        $(content222).show();
      }

    },

    selectSort(sort) {
      this.selectedSort = sort;
      this.showMore1 = false; // 选择省份后关闭弹出层
      // 这里可以执行其他逻辑，例如通知父组件
    },

    selectLanguage(language) {
      this.selectedLanguage = language;
      this.showMore = false; // 选择省份后关闭弹出层
      // 这里可以执行其他逻辑，例如通知父组件
    },
    handleStartDateChange(value) {
      // if (!value) {
      //   value = new Date(); // 设置当前日期作为默认值
      //   // this.startDateString = format(value, 'yyyy-MM-dd');
      // }
      if (value) {
        this.startDateString = format(value, 'yyyy-MM-dd');

        // // 如果开始日期大于截止日期，重置截止日期为开始日期之前的一天
        // if (this.startDateString && value.getTime() > this.endDateString.getTime()) {
        //   this.endDateString = new Date(value.getTime() - 24 * 60 * 60 * 1000); // 减一天
        //   this.endDateString = format(this.endDateString, 'yyyy-MM-dd');
        // }
      }
    },
    handleEndDateChange(value) {
      // if (!value) {
      //   value = new Date(); // 设置当前日期作为默认值
      //   // this.endDateString = format(value, 'yyyy-MM-dd');
      // }
      if (value) {
        this.endDateString = format(value, 'yyyy-MM-dd');
      }
    },
    formatDate(date) {
      if (date) {
        return format(date, 'yyyy-MM-dd');
      }
      return '';
    },

    search() {
      if (this.startDateString && this.endDateString) {
        const startTime = new Date(this.startDateString).getTime();
        const endTime = new Date(this.endDateString).getTime();

        console.log('开始日期:', this.startDateString);
        console.log('结束日期:', this.endDateString);

        if (startTime >= endTime) {
          this.$message.error('开始日期必须早于截止日期，请重新选择日期！');
          layer.tips('开始日期必须早于截止日期，请重新选择日期！', '#startDate',{
            shadeClose: false,
            tips: [3, 'red'],
            time: 2000,
            area: ['auto', '40px'],
            show: true
          })
          // layer.msg('开始日期必须早于截止日期，请重新选择日期！',{
          //   icon: 2,
          //   time: 2000,
          // })
          return;
        }

        const params = {
          softwareName: this.searchName,
          // startDate: this.startDate,
          startDate: this.startDateString,
          endDate: this.endDateString,
          sort: this.selectedSort,
          Language: this.selectedLanguage
        };
        // 使用 axios 发送请求
        axios.post('/api/search', params)
          .then(response => {
            // 处理响应数据
            console.log(response.data);
          })
          .catch(error => {
            // 处理错误
            console.error('Error:', error);
          })
          .finally(() => {
            // 无论成功或失败，都会执行
            console.log('Search request completed.');
          });
          // 在这里打印请求的 data，以便在控制台查看
        console.log('Search request data:', params);

      }
      

    },

    resetAll() {
      this.selectedSort = '全部';
      this.selectedLanguage = 'Java';
      this.searchName = '';
      this.startDate = '';
      this.endDate = '';
      this.startDateString = new Date().toISOString().split('T')[0]; // 重置开始日期为当前日期
      this.endDateString = new Date(new Date().setMonth(new Date().getMonth() + 1)).toISOString().split('T')[0]; // 重置结束日期为一个月之后的日期
    },

    
    
  },
  

}
</script>

<style scoped>
.transaction-center {
  position: relative;
  overflow-x: hidden;
}
.transaction-center .box-top {
  /* padding-top: 80px; */
  width: 100%;
  height: 4.75rem;
  
}
.transaction-center .box-top .ys {
  width: 100%;
  height: 1rem;
}
.transaction-center .box-top .bj {
  width: 100%;
  height: 3.75rem;
  background: url(/assets/img/transactioncenter-bj.png) no-repeat;
  background-size: cover;
}
.transaction-center .box-bottom {
  position: relative;
  width: 100vw;
  /* height: 500px; */
}
.transaction-center .box-bottom .center {
  margin: -2.25rem auto .625rem auto;
  width: 15rem;
  /* height: 800px; */
  /* border: 1px solid red; */
  /* background-color: pink; */
}
.center .box1 {
  width: 100%;
  height: 3.45rem;
  background-color: #fff;
  box-shadow: 0 0 .1875rem rgba(0,0,0,.1);
}
.center .box1 .title {
  display: flex;
  width: 100%;
  height: .625rem;
  background-color: #f5f5f5;
  border-bottom: .0063rem solid #ebeef5;
}
.center .box1 .title span {
  display: block;
  width: 2.5rem;
  height: .625rem;
  line-height: .625rem;
  text-align: center;
  font-size: .2rem;
  background-color: #fafafa;
  border-right: .0125rem solid #ebeef5;
  border-bottom: .0125rem solid #ebeef5;
}
.center .box1 .title span:hover {
  cursor: pointer;
  background-color: #e86f12;
  color: #FFF;
}
.center .box1 .title span.active {
  color: #FFF;
  background-color: #e86f12;
  
}
.center .box1 .content1 {
  width: 15rem;
  height: 2.825rem;
  padding: .125rem;
}
/* .center .box1 .content1 .row2 .cssys {
  border: 1px solid #dcdfe6;
  margin-right: 15px;
}
.radio-button {
  appearance: none;
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f0f0f0;
  cursor: pointer;
} */
.center .box1 .content1 .row1,
.center .box1 .content1 .row2,
.center .box1 .content1 .row3 {
  position: relative;
  display: flex;
  height: .5rem;
  margin: .25rem .125rem;
}
.center .box1 .content1 .row3 span {
  display: flex;
  margin-right: .1875rem;
}
.center .box1 .content1 .row3 span input {
  border: .0125rem solid #CCC;
  border-radius: .05rem;
  color: #606266;
}
input::-webkit-input-placeholder {
    color: #a8abb2;
}
.center .box1 .content1 .row3 span input:focus,
.center .box1 .content1 .row3 span input:hover {
  border: .0125rem solid #409eff;
}
/* .el-input {
  --el-input-focus-border: 1px solid #e86f12;
} */
/* .el-date-editor.is-active,
.el-date-editor.is-active:hover,
.el-date-editor.is-active:focus {
  border-color: #e86f12; 
  outline: 0;
}
:deep(.el-date-editor.is-active) {
  border-color: #e86f12; 
  outline: 0;
} */

.center .box1 .content1 .row3 span input[type=text] {
  font-size: .1875rem;
  padding-left: .125rem;
}
.center .box1 .content1 .row3 span input[type=date] {
  width: 1.875rem;
  font-size: .1875rem;
}
.center .box1 .content1 .row3 span input[type=date]:hover,
.center .box1 .content1 .row3 span input[type=date]:focus {
  border: .0125rem solid #CCC;
}

/* .center .box1 .content1 .row3 span .startDate {
  height: 40px;
} */
/* .el-input{
  --el-input-focus-border-color:'red'
} */
/* .custom-date-picker .el-input__inner {
  width: 200px; 
  height: 40px; 
  border: 2px solid red;
} */
.center .box1 .content1 .row3 button{
  height: .5rem;
  padding: .075rem .375rem;
  /* margin-left: 30px; */
  border: none;
  cursor: pointer;
}
.center .box1 .content1 .row3 .search {
  position: absolute;
  right: 2.5rem;
  background-color: #552c0e;
  color: #FFF;
  
}
.center .box1 .content1 .row3 .reset{
  position: absolute;
  right: 0;
  width: 2.25rem;
}
.center .box1 .content1 .row1 em,
.center .box1 .content1 .row2 em,
.center .box1 .content1 .row3 em {
  padding: .075rem .0625rem;
  width: 1.375rem;
  /* background-color: pink; */
}
.sort-buttons,
.language-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .125rem; /* 按钮之间的间隔 */
}
.sort-button,
.language-button {
  padding: .075rem .375rem;
  /* border: 1px solid #ccc; */
  border: none;
  border-radius: .05rem;
  background-color: #ffeedc;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.sort-button.selected,
.language-button.selected {
  background-color: #fa7c38; 
  /* background: linear-gradient(to right,#ffbd52,#e86f12); */
  color: white; /* 白色文字 */
}
.sort-button:hover,
.language-button:hover {
  background-color: #fa7c38;
  color: #FFF;
}

.more-button {
  padding: .1rem .15rem;
  border: .0125rem solid #ccc;
  border-radius: .05rem;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.popup1 {
  position: absolute;
  top: .5625rem;
  width: 13.125rem;
  /* max-width: 1050px; */
  background-color: white;
  border: .0125rem solid #ccc;
  padding: .125rem;
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
  gap: .125rem;
  box-shadow: 0 .025rem .05rem rgba(0, 0, 0, 0.2);
  z-index: 10;
}
.popup {
  position: absolute;
  top: .5625rem;
  width: 13.125rem;
  background-color: white;
  border: .0125rem solid #ccc;
  padding: .125rem;
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
  gap: .125rem;
  box-shadow: 0 .025rem .05rem rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.close-button {
  padding: .1rem .15rem;
  border: .0125rem solid #ccc;
  border-radius: .05rem;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.close-button:hover {
  background-color: #e7e7e7;
}



.center .box1 .content2 {
  width: 15rem;
  height: 2.825rem;
  padding: .125rem;
}
.center .box1 .content2 .bj {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background: url(/assets/img/box-bj.png) no-repeat;
  background-size: contain;
}
.center .box1 .content2 .bj .left {
  display: felx;
  flex-direction: column;
  width: 4.5rem;
  height: 2rem;
  margin: .25rem .5rem;
  /* border: 1px solid red; */
}
.center .box1 .content2 .bj .left .headline {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 1rem;
  /* background-color: pink; */
}
.center .box1 .content2 .bj .left .headline h3 {
  height: .625rem;
  line-height: .625rem;
  margin: .1875rem 0;
  color: #e79855;
  font-size: .35rem;
  font-weight: 700;
  margin-right: .25rem;
  /* background-color: skyblue; */
}
.center .box1 .content2 .bj .left .headline em {
  height: .45rem;
  line-height: .45rem;
  padding: 0 .25rem;
  margin: .275rem 0;
  font-size: .1875rem;
  color: #FFF;
  background-color: #fa9641;
  border-top-left-radius: .225rem;
  border-bottom-left-radius: .225rem;
  border-top-right-radius: .2rem;
}
.center .box1 .content2 .bj .left .text p {
  font-size: .1875rem;
  line-height: .3125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.center .box1 .content2 .bj .right {
  width: 3.25rem;
  height: 1.875rem;
  margin: .3125rem .75rem;
  /* border: 1px solid red; */
}
.center .box1 .content2 .bj .right p {
  font-size: .25rem;
  text-align: center;
  margin-top: .375rem;
}
.center .box1 .content2 .bj .right p em {
  color: #e89954;
}
.center .box1 .content2 .bj .right p i {
  font-size: .35rem;
  color: #e89954;
}
.center .box1 .content2 .bj .right a{
  display: block;
  width: 1.875rem;
  height: .5rem;
  line-height: .5rem;
  text-align: center;
  margin: .125rem .6875rem;
  border: none;
  font-size: .175rem;
  color: #FFF;
  background-color: #552c0e;
}
.center .box1 .content2 .bj .right a:hover {
  cursor: pointer;
  opacity: 0.7;
}
.center .box2 {
  margin: .1875rem;
  /* background-color: pink; */
}
.center .box2 p {
  font-size: .2rem;
}
.center .box2 p em {
  color: #3fa1d3;
}
.center .box3 .content111 {
  position: relative;
  margin-bottom: .375rem;
}
.center .box3 .content111 .table {
  margin-bottom: .625rem;
}
.center .box3 .content111 .goBuy {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .1rem .15rem;
  border: none;
  background-color: #fa7c38;
  color: #FFF;
  cursor: pointer;
}
.center .box3 .content111 .pagination {
  display: flex;
  justify-content: end;
  margin-right: .375rem;
}

</style>