169 lines
3.7 KiB
Vue
169 lines
3.7 KiB
Vue
<template>
|
|
<view class="book-card" @click="handleClick">
|
|
<image :src="book.images" class="cover" mode="aspectFill" />
|
|
<view class="info">
|
|
<text class="title">{{ book.name }}</text>
|
|
<view class="actions">
|
|
<view
|
|
class="action-btn read"
|
|
:style="isIOS ? 'width: 100px' : ''"
|
|
@click.stop="handleRead"
|
|
>
|
|
<view class="btn-icon read-icon">
|
|
<image src="@/static/icon/icon_look.png" mode="aspectFit" />
|
|
</view>
|
|
<text>{{ $t('book.read') }}</text>
|
|
</view>
|
|
|
|
<view
|
|
class="action-btn listen"
|
|
:style="isIOS ? 'width: 100px' : ''"
|
|
@click.stop="handleListen"
|
|
>
|
|
<view class="btn-icon listen-icon">
|
|
<image src="@/static/icon/icon_listen.png" mode="aspectFit" />
|
|
</view>
|
|
<text>{{ $t('book.listen') }}</text>
|
|
</view>
|
|
|
|
<view
|
|
v-if="!isIOS"
|
|
class="action-btn review"
|
|
@click.stop="handleReview"
|
|
>
|
|
<view class="btn-icon review-icon">
|
|
<image src="@/static/icon/icon_pl.png" mode="aspectFit" />
|
|
</view>
|
|
<text>{{ $t('book.comment') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import type { IBook } from '@/types/book'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const { t } = useI18n()
|
|
|
|
interface Props {
|
|
book: IBook
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const emit = defineEmits<{
|
|
click: []
|
|
read: []
|
|
listen: []
|
|
review: []
|
|
}>()
|
|
|
|
const isIOS = computed(() => {
|
|
// #ifdef APP-PLUS
|
|
return uni.getSystemInfoSync().platform === 'ios'
|
|
// #endif
|
|
// #ifndef APP-PLUS
|
|
return false
|
|
// #endif
|
|
})
|
|
|
|
const handleClick = () => emit('click')
|
|
const handleRead = () => emit('read')
|
|
const handleListen = () => emit('listen')
|
|
const handleReview = () => emit('review')
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.book-card {
|
|
display: flex;
|
|
background: #fff;
|
|
border-radius: 15rpx;
|
|
padding: 30rpx 0 30rpx 30rpx;
|
|
margin-top: 20rpx;
|
|
|
|
.cover {
|
|
width: 210rpx;
|
|
height: 270rpx;
|
|
border-radius: 10rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
width: calc(100% - 210rpx);
|
|
padding-left: 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.title {
|
|
padding-top: 40rpx;
|
|
display: block;
|
|
width: 95%;
|
|
font-size: 38rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
line-height: 40rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.actions {
|
|
margin-top: 50rpx;
|
|
margin-left: -15rpx;
|
|
display: flex;
|
|
|
|
.action-btn {
|
|
width: 135rpx;
|
|
text-align: center;
|
|
|
|
.btn-icon {
|
|
border-radius: 50%;
|
|
width: 85rpx;
|
|
height: 85rpx;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.read-icon {
|
|
background: #6bba6b;
|
|
box-shadow: 0 0 10px rgba(107, 186, 107, 0.5);
|
|
}
|
|
|
|
.listen-icon {
|
|
background: #f7cb5e;
|
|
box-shadow: 0 0 10px rgba(247, 203, 94, 0.5);
|
|
}
|
|
|
|
.review-icon {
|
|
background: #888888;
|
|
box-shadow: 0 0 10px rgba(136, 136, 136, 0.5);
|
|
}
|
|
|
|
text {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
line-height: 44rpx;
|
|
padding-top: 10rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.action-btn:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|