webapp / GreenwayWeb

<template>
  <!-- <div style="padding: 10px;background-color:#F2F3F5"> -->
  <div style="background-color:#F2F3F5">
    <div class="history">
      <div style="background-color:#Fff;padding:20px 20px 0 20px">

          <!-- 顶部搜索 -->
          <div class="toolbar">
            <el-form ref="formParams" :inline="true" :model="formParams">
              <el-form-item label="日期">
                <el-date-picker
                  v-model="formParams.dates"
                  type="daterange"

                   style="width:220px"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>

              <el-form-item label-width="0">
                <el-button   @click="search"  style="background-color: #3F9B6A;color: #fff;">查询</el-button>
                <el-button  @click="clear"  class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
      </div>
        <!-- 表格 -->
        <div class="content_table" style="padding: 15px 10px 10px 20px;background-color:#F2F3F5">
             <div style="background-color: #fff;padding: 10px;margin-bottom: 20px;">
          <div class="table">
            <el-table
              :data="tableData"
             :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
            >
              <el-table-column prop="id" label="排名" >
                <template slot-scope="scope">
                  {{scope.$index + 1 }}
                </template>
                </el-table-column>
              <el-table-column prop="shopnum" label="商品编号">
                  <template slot-scope="scope">
                    {{scope.row.cereShopComments[0].productId}}
                    </template>
              </el-table-column>
              <el-table-column prop="shopname" label="商品名称">
              <template slot-scope="scope">
                                  {{scope.row.cereShopComments[0].shopName}}
                                  </template>
                            </el-table-column>


              <el-table-column prop="ctime" label="商品创建时间" >
                <template slot-scope="scope">
                                    {{scope.row.cereShopComments[0].createTime}}
                                    </template>
              </el-table-column>
              <el-table-column prop="pf" label="评分" >
                <template slot-scope="scope">
                                    {{scope.row.averageEvaluationScore}}
                                    </template>
                </el-table-column>
              <el-table-column prop="pnum" label="评价数量">
                <template slot-scope="scope">
                                    {{scope.row.evaluationsNumber}}
                                    </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="fenye">

            <el-pagination class="pagination" :hide-on-single-page="flag" background small :current-page="currentPage"
             layout="total,prev, pager,next" :total="total"
               @current-change="handleCurrentChange" />
          </div>
       </div>
        </div>
      </div>

  </div>
</template>

<script>
  import {orderGetAll,productEvaluationRanking} from '@/api/psRanking'
export default {
  data() {
    return {
      total: 0,
      pageSize: 10,
      currentPage: 1,
      formParams: {
        dates:[],
        page: 1,
        pageSize: 10
      },
      formInline: {
        searchType: '1',
        search: '', // 搜索字段
        state: '',
        // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
        dates: [], // 下单时间数组
        page: 1,
        shopName: '',
        pageSize: 10
      },
       tableData: [],

    }
  },
  mounted() {
    this.getAll()
  },
  methods: {
    // 获取当前时间
    updateCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1 );
      const fristmonth = (now.getMonth() + 1).toString().padStart(2, '0');
       const lastDay = this.getMonthLastDay(year,month)
       console.log(lastDay)
      const last = [`${year}-${fristmonth}-1 00:00:00`,`${lastDay} 23:59:59`]
      return last;
    },
    // 获取某个月的最后一天
    getMonthLastDay(year, month) {
      // 注意月份是从0开始的，所以1月是0，12月是11
      const lastDay = new Date(year, month, 0);

      // 使用Intl.DateTimeFormat API来格式化日期，指定格式选项
      const formatter = new Intl.DateTimeFormat('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      })

      // 使用format方法获取格式化后的日期字符串
      const formattedDate = formatter.format(lastDay);

      // 分割字符串并重新组合成YYYY-MM-DD格式
      const parts = formattedDate.split(/[:\/]/);
      const dateString = `${parts[0]}-${parts[1].padStart(2, '0')}-${parts[2].padStart(2, '0')}`;

      return dateString;
    },
    // 获取时间
        currentTime() {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1; // 月份从0~11，所以加一
            let day = date.getDate();
            let hours = date.getHours();
            let minutes = date.getMinutes();
            let seconds = date.getSeconds();

            // 为月、日、时、分、秒添加前导零（如果需要）
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;

            // 拼接日期和时间字符串
            let strDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            return strDate;
        },
async getAll(){
 let last =  this.updateCurrentTime()
// const res =  await orderGetAll(this.formInline)
const Orderlist = await productEvaluationRanking({startTime:'2020-1-1 59:59:59',endTime:this.currentTime()})
this.tableData = Orderlist.data
this.total = Orderlist.data.length
},
async search(){
  this.formInline.dates = this.formParams.dates
  // const res =  await orderGetAll(this.formInline)
  let startTimeS = this.formInline.dates[0] +` 00:00:00`
  let endTimeS = this.formInline.dates[1] +` 23:59:59`
  const Orderlist = await productEvaluationRanking({startTime:startTimeS,endTime:endTimeS})
  this.tableData = Orderlist.data
  this.total = Orderlist.data.length
},
clear(){
  this.formInline.dates = []
  this.formParams.dates = []
   this.getAll()
},

        handleCurrentChange(val) {
          this.currentPage = val
        },
        handleSizeChange(val) {
          this.pageSize = val
        },
    },
 }
</script>

<style lang='scss' scoped>
.history{
  padding: 0px;
  padding-left: 10px;
  min-height: calc(100vh - 50px - 20px);
}
 ::v-deep .el-form-item__label{
        font-weight: normal;
         font-size: 12px;

       }
       ::v-deep .btn .el-button:focus,
        .el-button:hover {
          border: 1px solid #3F9B6A;
        }
        ::v-deep .el-button {
           border: 1px solid #3F9B6A;
         }
          ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
           background-color: #3F9B6A;
         }
</style>
<style scoped>
.history /deep/ .el-table .cell.el-tooltip img {
  max-height: 100px;
}
  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    position: relative;
  }
  .pagination {
    text-align: right;
    line-height: 20px;
  }

  /deep/ .el-pagination__total {
    margin-top: 4px;
  }

/deep/ .el-pager {
    position: absolute;
    top: 4px;
    right: 40px;
  }

  /deep/ .btn-next {
    position: absolute;
    top: 4px;
    right: 10px;
  }

 /deep/ .btn-prev {
   position: absolute;
   top: 4px;
   right: 69px;
 }
 .toolbar{
   .el-form-item{
     margin-bottom:0px;
   }
 }
</style>
<style>
.el-tooltip__popper {
  max-width: 50%;
}
</style>