95 lines
3.9 KiB
Vue
95 lines
3.9 KiB
Vue
<template>
|
|
<view class="scroll-container theme-light">
|
|
<view class="bt-page">
|
|
<MemberInfoSubNav title="积分商城" @back="onBack" />
|
|
<view class="bt-page__body">
|
|
<view class="mi-mod-points-hero">
|
|
<text class="mi-mod-points-hero__label">可用积分</text>
|
|
<text class="mi-mod-points-hero__value">{{ balance }}</text>
|
|
</view>
|
|
<view class="bt-card">
|
|
<text class="bt-card__title">兑换商品</text>
|
|
<view class="mi-mod-rewards">
|
|
<view
|
|
v-for="item in rewards"
|
|
:key="item.id"
|
|
class="mi-mod-reward"
|
|
hover-class="mi-tap-card--hover"
|
|
@tap="redeem(item)"
|
|
>
|
|
<image class="mi-mod-reward__icon" :src="item.icon" mode="aspectFit" />
|
|
<text class="mi-mod-reward__name">{{ item.name }}</text>
|
|
<text class="mi-mod-reward__cost">{{ item.cost }} 积分</text>
|
|
<text class="mi-mod-reward__stock">剩余 {{ item.stock }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="redeemRecords.length" class="bt-card">
|
|
<text class="bt-card__title">兑换记录</text>
|
|
<view v-for="r in redeemRecords" :key="r.id" class="mi-mod-points-row">
|
|
<view class="mi-mod-points-row__info">
|
|
<text class="mi-mod-points-row__title">{{ r.name }}</text>
|
|
<text class="mi-mod-points-row__time">{{ r.time }}</text>
|
|
</view>
|
|
<text class="mi-mod-points-row__amount mi-mod-points-row__amount--spend">-{{ r.cost }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
|
|
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
|
|
import { loadMemberStore, persistMemberStore } from '@/common/memberInfo/store.js'
|
|
import { getPointsPageData, redeemPointsReward } from '@/common/memberInfo/moduleStore.js'
|
|
|
|
const balance = ref(0)
|
|
const rewards = ref([])
|
|
const redeemRecords = ref([])
|
|
|
|
function loadData() {
|
|
const data = getPointsPageData(loadMemberStore())
|
|
balance.value = data.balance
|
|
rewards.value = data.rewards
|
|
redeemRecords.value = data.redeemRecords
|
|
}
|
|
|
|
function onBack() { goBackOrTab(PAGE.POINTS) }
|
|
|
|
function redeem(item) {
|
|
uni.showModal({
|
|
title: '确认兑换',
|
|
content: `使用 ${item.cost} 积分兑换「${item.name}」？`,
|
|
success: (res) => {
|
|
if (!res.confirm) return
|
|
const store = loadMemberStore()
|
|
const result = redeemPointsReward(store, item.id)
|
|
uni.showToast({ title: result.message, icon: result.ok ? 'success' : 'none' })
|
|
if (result.ok) {
|
|
persistMemberStore(store)
|
|
const data = getPointsPageData(store)
|
|
balance.value = data.balance
|
|
rewards.value = data.rewards
|
|
redeemRecords.value = data.redeemRecords
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
loadData()
|
|
</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>
|