future
100 lines
3.9 KiB
Vue
100 lines
3.9 KiB
Vue
<template>
|
|
<view class="scroll-container theme-light">
|
|
<view class="bt-page">
|
|
<MemberInfoSubNav title="签到记录" @back="goBack" />
|
|
<view class="mi-mod-tabs">
|
|
<view
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
class="bt-tab"
|
|
:class="{ 'bt-tab--active': activeFilter === tab.key }"
|
|
hover-class="mi-tap-tab--hover"
|
|
:hover-stay-time="150"
|
|
@tap="activeFilter = tab.key"
|
|
>
|
|
<text class="bt-tab__text">{{ tab.label }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="bt-page__body">
|
|
<view class="bt-card">
|
|
<text class="bt-card__title">共 {{ filteredList.length }} 条记录</text>
|
|
<view
|
|
v-for="item in filteredList"
|
|
:key="item.id"
|
|
class="mi-mod-checkin-row"
|
|
hover-class="mi-tap-row--hover"
|
|
:hover-stay-time="150"
|
|
@tap="showDetail(item)"
|
|
>
|
|
<view class="mi-mod-checkin-row__icon" :class="'mi-mod-checkin-row__icon--' + item.tagTheme">
|
|
<image class="mi-mod-checkin-row__icon-img" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/usercheck.png" mode="aspectFit" />
|
|
</view>
|
|
<view class="mi-mod-checkin-row__info">
|
|
<text class="mi-mod-checkin-row__title">{{ item.title }}</text>
|
|
<text class="mi-mod-checkin-row__time">{{ item.time }} · {{ item.location }}</text>
|
|
</view>
|
|
<view class="mi-mod-checkin-row__tag" :class="'mi-mod-checkin-row__tag--' + item.tagTheme">
|
|
<text class="mi-mod-checkin-row__tag-text">{{ item.tag }}</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="!filteredList.length" class="bt-empty">
|
|
<text class="bt-empty__text">暂无签到记录</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
|
|
import { getCheckInHistory } from '@/common/memberInfo/moduleStore.js'
|
|
import { loadMemberStore } from '@/common/memberInfo/store.js'
|
|
import { backToMemberCenter } from '@/common/constants/routes.js'
|
|
|
|
const tabs = ref([
|
|
{ key: 'all', label: '全部' },
|
|
{ key: 'signin', label: '签到' },
|
|
{ key: 'trial', label: '体验' },
|
|
{ key: 'event', label: '活动' }
|
|
])
|
|
const activeFilter = ref('all')
|
|
const list = ref([])
|
|
|
|
const filteredList = computed(() => {
|
|
if (activeFilter.value === 'all') return list.value
|
|
return list.value.filter((i) => i.tagTheme === activeFilter.value)
|
|
})
|
|
|
|
function refresh() {
|
|
const store = loadMemberStore()
|
|
list.value = getCheckInHistory(store, 'all')
|
|
}
|
|
|
|
function goBack() {
|
|
backToMemberCenter()
|
|
}
|
|
|
|
function showDetail(item) {
|
|
uni.showModal({
|
|
title: item.title,
|
|
content: `${item.time}\n地点：${item.location}\n类型：${item.tag}`,
|
|
showCancel: false
|
|
})
|
|
}
|
|
|
|
refresh()
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '@/common/style/base.css';
|
|
@import '@/common/style/memberInfo/pages/page-reset.css';
|
|
@import '@/common/style/memberInfo/pages/sub-page-base.css';
|
|
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
|
@import '@/common/style/memberInfo/member-info-sub-nav.css';
|
|
@import '@/common/style/memberInfo/member-info-tap.css';
|
|
@import '@/common/style/memberInfo/pages/body-test-common.css';
|
|
@import '@/common/style/memberInfo/pages/module-pages-common.css';
|
|
</style>
|