|
|
|
@ -3,15 +3,15 @@
|
|
|
|
<h1>商店 - 您当前拥有 {{ points }} 积分</h1>
|
|
|
|
<h1>商店 - 您当前拥有 {{ points }} 积分</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<el-table :data="items" style="width: 100%;" height="calc(100vh - 110px)" border>
|
|
|
|
<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="ID" prop="id" width="100" align="center" />
|
|
|
|
<el-table-column label="名称" prop="name" width="200" align="center" />
|
|
|
|
<el-table-column label="名称" prop="name" width="200" align="center" />
|
|
|
|
<el-table-column label="描述" prop="description" />
|
|
|
|
<el-table-column label="描述" prop="description" />
|
|
|
|
<el-table-column label="价格(积分)" prop="points" width="150" align="right"/>
|
|
|
|
<el-table-column label="价格(积分)" prop="points" width="150" align="right" />
|
|
|
|
<el-table-column label="您已拥有" prop="myQuantity" width="150" align="right"/>
|
|
|
|
<el-table-column label="您已拥有" prop="myQuantity" width="150" align="right" />
|
|
|
|
<el-table-column label="操作" width="180" align="center">
|
|
|
|
<el-table-column label="操作" width="180" align="center">
|
|
|
|
<template #default="{ row }">
|
|
|
|
<template #default="{ row }">
|
|
|
|
<el-button v-if="row.points <= points" type="primary" @click="buyItem(row)" :disabled="row.myQuantity >= 1">
|
|
|
|
<el-button v-if="row.points <= points" type="primary" @click="buyItem(row)">
|
|
|
|
{{ row.myQuantity >= 1 ? '已拥有' : '购买' }}
|
|
|
|
购买
|
|
|
|
</el-button>
|
|
|
|
</el-button>
|
|
|
|
<el-button v-else type="warning" disabled>
|
|
|
|
<el-button v-else type="warning" disabled>
|
|
|
|
积分不足
|
|
|
|
积分不足
|
|
|
|
@ -25,7 +25,7 @@
|
|
|
|
<script setup>
|
|
|
|
<script setup>
|
|
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
import { whatCanIBuy, buy } from '@/api/shop/shop'
|
|
|
|
import { whatCanIBuy, buy } from '@/api/shop/shop'
|
|
|
|
import { ElButton, ElTable, ElTableColumn, ElMessage } from 'element-plus'
|
|
|
|
import { ElButton, ElTable, ElTableColumn, ElMessage, ElInput, ElMessageBox } from 'element-plus'
|
|
|
|
|
|
|
|
|
|
|
|
const points = ref(0) // 当前用户的积分
|
|
|
|
const points = ref(0) // 当前用户的积分
|
|
|
|
const items = ref([]) // 商店物品列表
|
|
|
|
const items = ref([]) // 商店物品列表
|
|
|
|
@ -33,34 +33,36 @@ const items = ref([]) // 商店物品列表
|
|
|
|
// 获取当前用户的积分和商店商品信息
|
|
|
|
// 获取当前用户的积分和商店商品信息
|
|
|
|
const fetchData = async () => {
|
|
|
|
const fetchData = async () => {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
// 假设获取积分的接口
|
|
|
|
|
|
|
|
const pointsRes = await whatCanIBuy()
|
|
|
|
const pointsRes = await whatCanIBuy()
|
|
|
|
points.value = pointsRes.points
|
|
|
|
points.value = pointsRes.points
|
|
|
|
items.value = pointsRes.items
|
|
|
|
items.value = pointsRes.items
|
|
|
|
} catch (err) {
|
|
|
|
} catch (err) {
|
|
|
|
console.log('====================================');
|
|
|
|
|
|
|
|
console.log(err);
|
|
|
|
|
|
|
|
console.log('====================================');
|
|
|
|
|
|
|
|
ElMessage.error('加载数据失败,请重试')
|
|
|
|
ElMessage.error('加载数据失败,请重试')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 购买物品
|
|
|
|
// 购买操作
|
|
|
|
const buyItem = async (item) => {
|
|
|
|
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 {
|
|
|
|
try {
|
|
|
|
const res = await buy({ EquipmentId: item.id, Quantity: 1 })
|
|
|
|
const res = await await buy({ EquipmentId: good.id, Quantity: 1 })
|
|
|
|
if (res.success) {
|
|
|
|
if (res) {
|
|
|
|
item.myQuantity += 1
|
|
|
|
good.myQuantity += 1
|
|
|
|
points.value -= item.points
|
|
|
|
points.value -= good.points
|
|
|
|
ElMessage.success(res.message)
|
|
|
|
ElMessage.success("购买成功")
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
ElMessage.error(res.message)
|
|
|
|
ElMessage.error(res.message)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} catch (err) {
|
|
|
|
} catch (err) {
|
|
|
|
console.log('====================================');
|
|
|
|
ElMessage.error('购买失败,请稍后再试')
|
|
|
|
console.log(err);
|
|
|
|
}
|
|
|
|
console.log('====================================');
|
|
|
|
|
|
|
|
ElMessage.error('购买过程中出错,请稍后再试')
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|