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