1 changed files with 93 additions and 74 deletions
@ -1,74 +1,93 @@ |
|||||
<template> |
|
||||
<!-- 新书推荐 --> |
|
||||
<div class="screen-item read-star"> |
|
||||
<div class="common-title">阅读之星</div> |
|
||||
<div ref="starList" class="medium-module module-content"> |
|
||||
<div v-for="(item,index) in readstarList" :key="index" :class="['readstart-item', {'star1-bg':index === 0}, {'star2-bg':index === 1}, {'star3-bg':index === 2}]"> |
|
||||
<svg v-if="index === 0" class="icon icon-star-1" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-1" /> |
|
||||
</svg> |
|
||||
<svg v-else-if="index === 1" class="icon icon-star-2" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-21" /> |
|
||||
</svg> |
|
||||
<svg v-else-if="index === 2" class="icon icon-star-3" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-3" /> |
|
||||
</svg> |
|
||||
<span v-else class="star-num">{{ index+1 }}</span> |
|
||||
<p class="star-info title-item"> 读者{{ item.readerName }}上周借阅图书{{ item.borrowNum }}册</p> |
|
||||
<p class="star-date">{{ mondayDate }}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchBorrowStar } from '@/api/library' |
|
||||
import { parseTime } from '@/utils/index.js' |
|
||||
export default { |
|
||||
name: 'ReadStar', |
|
||||
data() { |
|
||||
return { |
|
||||
readstarList: [], |
|
||||
mondayDate: null |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.getBorrowStar() |
|
||||
}, |
|
||||
methods: { |
|
||||
// 获取list |
|
||||
getBorrowStar() { |
|
||||
FetchBorrowStar().then(res => { |
|
||||
if (res.errCode === 0) { |
|
||||
console.log(res) |
|
||||
this.readstarList = res.data |
|
||||
this.getMondayTime() |
|
||||
} else { |
|
||||
this.$message.error('接口错误') |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 获取本周一 |
|
||||
getMondayTime() { |
|
||||
const today = new Date() |
|
||||
const year = today.getFullYear() |
|
||||
const month = today.getMonth() + 1 |
|
||||
const day = today.getDate() |
|
||||
const newDate = new Date(year + '-' + month + '-' + day + ' 00:00:00') |
|
||||
|
|
||||
const nowTime = newDate.getTime() |
|
||||
const weekDay = newDate.getDay() |
|
||||
const oneDayTime = 24 * 60 * 60 * 1000 |
|
||||
|
|
||||
const mondayTime = (1 - weekDay) * oneDayTime + nowTime |
|
||||
this.mondayDate = parseTime(mondayTime, '{y}-{m}-{d}') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
</style> |
|
||||
|
<template> |
||||
|
<!-- 新书推荐 --> |
||||
|
<div class="screen-item read-star"> |
||||
|
<div class="common-title">阅读之星</div> |
||||
|
<div ref="starList" class="medium-module module-content"> |
||||
|
<div v-for="(item,index) in readstarList" :key="index" :class="['readstart-item', {'star1-bg':index === 0}, {'star2-bg':index === 1}, {'star3-bg':index === 2}]"> |
||||
|
<svg v-if="index === 0" class="icon icon-star-1" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-1" /> |
||||
|
</svg> |
||||
|
<svg v-else-if="index === 1" class="icon icon-star-2" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-21" /> |
||||
|
</svg> |
||||
|
<svg v-else-if="index === 2" class="icon icon-star-3" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-3" /> |
||||
|
</svg> |
||||
|
<span v-else class="star-num">{{ index+1 }}</span> |
||||
|
<p class="star-info title-item"> 读者{{ item.readerName }}上周借阅图书{{ item.borrowNum }}册</p> |
||||
|
<p class="star-date">{{ mondayDate }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchBorrowStar } from '@/api/library' |
||||
|
// import { parseTime } from '@/utils/index.js' |
||||
|
export default { |
||||
|
name: 'ReadStar', |
||||
|
data() { |
||||
|
return { |
||||
|
readstarList: [], |
||||
|
mondayDate: null |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getBorrowStar() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取list |
||||
|
getBorrowStar() { |
||||
|
FetchBorrowStar().then(res => { |
||||
|
if (res.errCode === 0) { |
||||
|
console.log(res) |
||||
|
this.readstarList = res.data |
||||
|
this.getMondayDate() |
||||
|
} else { |
||||
|
this.$message.error('接口错误') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取本周一 |
||||
|
// getMondayTime() { |
||||
|
// const today = new Date() |
||||
|
// const year = today.getFullYear() |
||||
|
// const month = today.getMonth() // 月份从0开始 |
||||
|
// const day = today.getDate() |
||||
|
// const newDate = new Date(year, month, day) |
||||
|
|
||||
|
// const nowTime = newDate.getTime() |
||||
|
// const weekDay = newDate.getDay() // getDay() 返回的是0(周日)到6(周六) |
||||
|
// const oneDayTime = 24 * 60 * 60 * 1000 |
||||
|
|
||||
|
// // 计算从今天到本周一的天数差 |
||||
|
// const daysToMonday = weekDay === 0 ? -6 : 1 - weekDay |
||||
|
// // 计算本周一的时间戳 |
||||
|
// const mondayTime = nowTime - daysToMonday * oneDayTime |
||||
|
// // 格式化日期 |
||||
|
// this.mondayDate = this.parseTime(mondayTime, '{y}-{m}-{d}') |
||||
|
// console.log('this.mondayDate', this.mondayDate) |
||||
|
// }, |
||||
|
getMondayDate() { |
||||
|
const today = new Date() |
||||
|
const day = today.getDay() |
||||
|
|
||||
|
// 计算当前日期与本周周一之间的天数差 |
||||
|
// 如果今天是周日,则差值为6;如果是周六,则差值为5,依此类推 |
||||
|
const diff = day === 0 ? -6 : 1 - day |
||||
|
|
||||
|
// 减去计算出的天数差,得到本周周一的日期 |
||||
|
today.setDate(today.getDate() + diff) |
||||
|
|
||||
|
// 返回本周周一的日期,格式化为年-月-日 |
||||
|
this.mondayDate = today.toISOString().split('T')[0] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue