|
|
<template>
|
|
|
<div class="shop-page">
|
|
|
<h1>商店 - 您当前拥有 {{ points }} 积分</h1>
|
|
|
|
|
|
<el-table :data="items" style="width: 100%;" height="calc(100vh - 110px)" border>
|
|
|
<el-table-column label="ID" prop="id" width="100" align="center" />
|
|
|
<el-table-column label="名称" prop="name" width="200" align="center" />
|
|
|
<el-table-column label="描述" prop="description" />
|
|
|
<el-table-column label="价格(积分)" prop="points" width="150" align="right" />
|
|
|
<el-table-column label="您已拥有" prop="myQuantity" width="150" align="right" />
|
|
|
<el-table-column label="操作" width="180" align="center">
|
|
|
<template #default="{ row }">
|
|
|
<el-button v-if="row.points <= points" type="primary" @click="buyItem(row)">
|
|
|
购买
|
|
|
</el-button>
|
|
|
<el-button v-else type="warning" disabled>
|
|
|
积分不足
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, onMounted } from 'vue'
|
|
|
import { whatCanIBuy, buy } from '@/api/shop/shop'
|
|
|
import { ElButton, ElTable, ElTableColumn, ElMessage, ElInput, ElMessageBox } from 'element-plus'
|
|
|
|
|
|
const points = ref(0) // 当前用户的积分
|
|
|
const items = ref([]) // 商店物品列表
|
|
|
|
|
|
// 获取当前用户的积分和商店商品信息
|
|
|
const fetchData = async () => {
|
|
|
try {
|
|
|
const pointsRes = await whatCanIBuy()
|
|
|
points.value = pointsRes.points
|
|
|
items.value = pointsRes.items
|
|
|
} catch (err) {
|
|
|
ElMessage.error('加载数据失败，请重试')
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 购买操作
|
|
|
const buyItem = async (good) => {
|
|
|
const { value: count } = await ElMessageBox.prompt('请输入购买数量', `物品名称 （${good.name}）`, {
|
|
|
confirmButtonText: '确认',
|
|
|
cancelButtonText: '取消',
|
|
|
inputPattern: /^(?:[1-9]\d{0,3}|10000)$/,
|
|
|
inputErrorMessage: '请输入 1 到 10000 之间的整数'
|
|
|
})
|
|
|
|
|
|
if (count) {
|
|
|
try {
|
|
|
const res = await await buy({ EquipmentId: good.id, Quantity: 1 })
|
|
|
if (res) {
|
|
|
good.myQuantity += 1
|
|
|
points.value -= good.points
|
|
|
ElMessage.success("购买成功")
|
|
|
} else {
|
|
|
ElMessage.error(res.message)
|
|
|
}
|
|
|
} catch (err) {
|
|
|
ElMessage.error('购买失败，请稍后再试')
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 页面加载时获取数据
|
|
|
onMounted(() => {
|
|
|
fetchData()
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.shop-page {
|
|
|
margin: 20px;
|
|
|
}
|
|
|
|
|
|
.el-table {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
.el-button {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
</style>
|