RunForge-Frontend/src/components/userCard/userCard.vue

<template>
  <div class="user-card" :class="{ 'user-card--goods': props.type === 'goods' }">
    <div class="user-card__main">
      <div class="user-card__stat">
        <span class="user-card__label">剩余乐跑次数</span>
        <a-statistic
          :value="userCount?.lepao_count ?? 0"
          :value-style="{ fontSize: '2rem', fontWeight: 700, color: 'var(--stat-color)' }"
          animation
          show-group-separator
        />
      </div>
      <div class="user-card__actions">
        <a-button
          v-if="props.type === 'lepao'"
          type="primary"
          size="large"
          class="action-btn action-btn--primary"
          @click="$router.push('/store/goodsList')"
        >
          <icon-fire /> 去购买
        </a-button>
        <a-button
          v-else
          type="primary"
          size="large"
          class="action-btn action-btn--primary"
          @click="$router.push('/lepao/accountList')"
        >
          <icon-thunderbolt /> 去乐跑
        </a-button>
        <a-button
          v-if="hasPermission('action.goods.sendCount')"
          size="large"
          class="action-btn"
          @click="SendCount"
        >
          <icon-gift /> 赠送
        </a-button>
        <a-button size="large" class="action-btn" @click="goSendCountRecords">
          <icon-list /> 记录
        </a-button>
      </div>
    </div>
  </div>

  <a-modal
    v-model:visible="visible"
    title="赠送乐跑次数"
    @cancel="handleCancel"
    @before-ok="handleBeforeOk"
    :ok-loading="ok_loading"
    unmount-on-close
  >
    <a-form :model="sendform" layout="vertical">
      <a-form-item field="username" label="接收人用户名">
        <a-input
          v-model="sendform.username"
          placeholder="如：用户adfg45g"
          :max-length="20"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="count" label="赠送次数">
        <a-input-number v-model="sendform.count" :min="1" :max="9999" mode="button" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive, onUnmounted, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getCount, sendCount } from '@/api/goods'
import { Notification, Message } from '@arco-design/web-vue'
import { hasPermission } from '@/utils/permission'

const props = defineProps({
  type: { type: String, default: 'lepao' }
})

const userCount = ref({ lepao_count: 0 })
const router = useRouter()
const visible = ref(false)
const ok_loading = ref(false)
const sendform = reactive({ username: '', count: 1 })

const handleBeforeOk = async (done) => {
  if (!hasPermission('action.goods.sendCount')) {
    Notification.warning({ title: '无权限', content: '当前账号暂无赠送权限' })
    return false
  }
  try {
    ok_loading.value = true
    if (!sendform.username) {
      Message.error('请填写接收人用户名')
      return false
    }
    if (!sendform.count || sendform.count < 1 || sendform.count > 9999) {
      Notification.error({ title: '赠送失败', content: '赠送次数需在 1～9999 之间' })
      return false
    }
    const res = await sendCount({ username: sendform.username, count: sendform.count })
    if (!res || res.code !== 0) {
      Notification.error({ title: '赠送失败', content: res?.msg ?? '请稍后再试' })
      return false
    }
    Message.success(res.msg || '赠送成功')
    done()
    GetCount()
  } catch (error) {
    Notification.error({ title: '赠送失败', content: error.message || '请稍后再试' })
    return false
  } finally {
    ok_loading.value = false
  }
}

const handleCancel = () => {
  visible.value = false
}

const SendCount = () => {
  sendform.username = ''
  sendform.count = 1
  visible.value = true
}

const goSendCountRecords = () => router.push('/store/sendCountRecords')

const GetCount = async () => {
  try {
    const res = await getCount()
    if (!res || res.code !== 0) return
    userCount.value = res.data
  } catch {
    /* 静默失败，避免轮询刷屏 */
  }
}

let timer = null
const startPolling = () => {
  if (!timer) timer = setInterval(GetCount, 8000)
}
const stopPolling = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}

onMounted(async () => {
  await GetCount()
  startPolling()
})
onUnmounted(stopPolling)
</script>

<style scoped lang="less">
@import '@/styles/store-theme.less';

.user-card {
  --stat-color: rgb(var(--primary-6));
  background: @store-card-bg;
  border: 1px solid @store-card-border;
  border-radius: @store-radius;
  box-shadow: @store-shadow;
  padding: 20px 24px;

  &--goods {
    background: linear-gradient(135deg, #f4faf6 0%, #e8f5ec 100%);
    --stat-color: @store-primary;
  }

  &__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  &__label {
    display: block;
    font-size: 0.85rem;
    color: @store-text-muted;
    margin-bottom: 4px;
  }

  &__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}

.action-btn {
  border-radius: 999px;

  &--primary {
    background: @store-primary !important;
    border-color: @store-primary !important;
  }
}
</style>