mirror of
https://gitee.com/ccnetcore/Yi
synced 2026-05-04 06:51:29 +08:00
118 lines
3.0 KiB
Vue
118 lines
3.0 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<h2>谨记人生赌博，不如理性规划</h2>
|
|||
|
|
<h3>50钱钱一次,我的钱钱:{{ userInfo?.money ?? '未登录' }}</h3>
|
|||
|
|
<LuckyWheel class="wheel" ref="myLucky" width="500px" height="500px" :prizes="prizes" :blocks="blocks"
|
|||
|
|
:buttons="buttons" @start="startCallback" @end="endCallback" />
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted } from "vue";
|
|||
|
|
import useAuths from '@/hooks/useAuths.js';
|
|||
|
|
const { isLogin } = useAuths();
|
|||
|
|
import { getBbsUserProfile } from '@/apis/userApi.js'
|
|||
|
|
import { luckyWheel } from '@/apis/integralApi.js'
|
|||
|
|
import useUserStore from "@/stores/user";
|
|||
|
|
const userInfo = ref({});
|
|||
|
|
const currentUserInfo=useUserStore();
|
|||
|
|
onMounted(async () => {
|
|||
|
|
await loadUserInfoData();
|
|||
|
|
})
|
|||
|
|
const loadUserInfoData = async () => {
|
|||
|
|
if (isLogin) {
|
|||
|
|
const { data } = await getBbsUserProfile(currentUserInfo.id);
|
|||
|
|
userInfo.value = data;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const blocks = [{ padding: '13px', background: '#617df2' }];
|
|||
|
|
const prizes = [
|
|||
|
|
{ fonts: [{ text: '啥也没有', top: '10%' }], background: '#e9e8fe' },
|
|||
|
|
{ fonts: [{ text: '10', top: '10%' }], background: '#b8c5f2' },
|
|||
|
|
{ fonts: [{ text: '30', top: '10%' }], background: '#e9e8fe' },
|
|||
|
|
{ fonts: [{ text: '50', top: '10%' }], background: '#b8c5f2' },
|
|||
|
|
{ fonts: [{ text: '80', top: '10%' }], background: '#e9e8fe' },
|
|||
|
|
{ fonts: [{ text: '100', top: '10%' }], background: '#b8c5f2' },
|
|||
|
|
{ fonts: [{ text: '150', top: '10%' }], background: '#e9e8fe' },
|
|||
|
|
{ fonts: [{ text: '200', top: '10%' }], background: '#b8c5f2' },
|
|||
|
|
{ fonts: [{ text: '300', top: '10%' }], background: '#e9e8fe' },
|
|||
|
|
{ fonts: [{ text: '666', top: '10%' }], background: '#FAD400' }
|
|||
|
|
];
|
|||
|
|
const buttons = [{
|
|||
|
|
radius: '35%',
|
|||
|
|
background: '#8a9bf3',
|
|||
|
|
pointer: true,
|
|||
|
|
fonts: [{ text: '启动', top: '-10px' }]
|
|||
|
|
}];
|
|||
|
|
|
|||
|
|
const myLucky = ref(null);
|
|||
|
|
// 点击抽奖按钮会触发star回调
|
|||
|
|
const startCallback = () => {
|
|||
|
|
var index =0;
|
|||
|
|
// 调用抽奖组件的play方法开始游戏
|
|||
|
|
if (!isLogin) {
|
|||
|
|
ElMessage({
|
|||
|
|
message: '请登录后启动！',
|
|||
|
|
type: 'warning',
|
|||
|
|
})
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
ElMessageBox.confirm(
|
|||
|
|
'每次启动需要消耗50钱钱，确定要启动吗?',
|
|||
|
|
'警告',
|
|||
|
|
{
|
|||
|
|
confirmButtonText: '启动',
|
|||
|
|
cancelButtonText: '放弃',
|
|||
|
|
type: 'warning',
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
.then(async () => {
|
|||
|
|
myLucky.value.play()
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
//等待3秒
|
|||
|
|
// 模拟调用接口异步抽奖
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 假设后端返回的中奖索引是0
|
|||
|
|
// 调用stop停止旋转并传递中奖索引
|
|||
|
|
}, 3000)
|
|||
|
|
index= (await luckyWheel()).data;
|
|||
|
|
myLucky.value.stop(index)
|
|||
|
|
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
ElMessage({
|
|||
|
|
type: 'info',
|
|||
|
|
message: '成功克制',
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
// 抽奖结束会触发end回调
|
|||
|
|
const endCallback = async (prize) => {
|
|||
|
|
|
|||
|
|
ElMessage({
|
|||
|
|
type: 'success',
|
|||
|
|
message: `恭喜你抽中了[${prize.fonts[0].text}]`,
|
|||
|
|
})
|
|||
|
|
await loadUserInfoData();
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style scoped>
|
|||
|
|
.wheel {
|
|||
|
|
margin: auto;
|
|||
|
|
margin-top: 10%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2 {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
</style>
|
