99 lines
3.9 KiB
Vue
99 lines
3.9 KiB
Vue
<template>
|
|
<view class="checkin-section">
|
|
<view class="checkin-section__inner">
|
|
<view class="checkin-section__header">
|
|
<view class="checkin-section__header-inner">
|
|
<text class="checkin-section__title">签到记录</text>
|
|
<view
|
|
class="checkin-section__link"
|
|
hover-class="mi-tap--hover"
|
|
:hover-stay-time="150"
|
|
@tap="$emit('view-all')"
|
|
>
|
|
<text class="checkin-section__view-all">查看全部</text>
|
|
<image
|
|
class="checkin-section__link-arrow"
|
|
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright2.png"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="checkin-section__list">
|
|
<!-- 无数据 -->
|
|
<view v-if="!items || items.length === 0" class="checkin-section__empty">
|
|
<text class="checkin-section__empty-text">暂无签到记录</text>
|
|
</view>
|
|
<view v-else class="checkin-section__list-inner">
|
|
<view
|
|
v-for="(item, index) in items"
|
|
:key="item.id"
|
|
class="checkin-section__row"
|
|
>
|
|
<view v-if="index > 0" class="checkin-section__divider"></view>
|
|
<view
|
|
class="checkin-section__item"
|
|
hover-class="mi-tap-row--hover"
|
|
:hover-stay-time="150"
|
|
@tap="$emit('item-tap', item)"
|
|
>
|
|
<view class="checkin-section__item-inner">
|
|
<view
|
|
class="checkin-section__dot"
|
|
:class="'checkin-section__dot--' + item.tagTheme"
|
|
></view>
|
|
<view class="checkin-section__content">
|
|
<view class="checkin-section__content-inner">
|
|
<text class="checkin-section__desc">{{ item.title }}</text>
|
|
<text class="checkin-section__text">{{ item.time }}</text>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="checkin-section__tag-badge"
|
|
:class="'checkin-section__tag-badge--' + item.tagTheme"
|
|
>
|
|
<text
|
|
class="checkin-section__tag-text"
|
|
:class="'checkin-section__tag-text--' + item.tagTheme"
|
|
>
|
|
{{ item.tag }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
items: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
})
|
|
|
|
defineEmits(['view-all', 'item-tap'])
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
|
@import '@/common/style/memberInfo/member-info-check-in-list.css';
|
|
@import '@/common/style/memberInfo/member-info-tap.css';
|
|
|
|
.checkin-section__empty {
|
|
padding: 48rpx 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.checkin-section__empty-text {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
</style>
|