wip: test
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
.taro_page {
|
||||
background-color: #fff !important;
|
||||
// background-color: #fff !important;
|
||||
background-image: url('../static/bj.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -11,13 +13,14 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #a6a6a6;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 10px;
|
||||
|
||||
&:active {
|
||||
@@ -35,10 +38,10 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
border: 1px solid #a6a6a6;
|
||||
padding: 20px 50px;
|
||||
background-color: #f4f4f4;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
background-color: #ff0606;
|
||||
color: #fff;
|
||||
border-radius: 26px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
@@ -53,84 +56,111 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 200px;
|
||||
height: 80px;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 40px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
font-size: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
.image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-image: url('../../../static/dz.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.game_btn {
|
||||
padding: 10px;
|
||||
background: linear-gradient(0deg, #ff9600, #feec89);
|
||||
border-radius: 34px;
|
||||
color: #ff0606;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.turntable {
|
||||
// width: 500px;
|
||||
// height: 500px;
|
||||
// border: 1px solid #a6a6a6;
|
||||
// border-radius: 50%;
|
||||
margin: 30px auto;
|
||||
// position: relative;
|
||||
|
||||
// &::before,
|
||||
// &::after {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// border-radius: 50%;
|
||||
// background-color: #a6a6a6;
|
||||
// }
|
||||
|
||||
// &::before {
|
||||
// width: 2px;
|
||||
// height: 100%;
|
||||
// left: 50%;
|
||||
// top: 0;
|
||||
// transform: translateX(-50%);
|
||||
// }
|
||||
|
||||
// &::after {
|
||||
// width: 100%;
|
||||
// height: 2px;
|
||||
// left: 0;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
// }
|
||||
background-image: url('../static/zpbj.png');
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.num-box {
|
||||
display: flex;
|
||||
// flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
// padding: 50px;
|
||||
position: relative;
|
||||
padding: 80px;
|
||||
margin: auto;
|
||||
|
||||
.item {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
height: 240px;
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
line-height: 240px;
|
||||
font-size: 80px;
|
||||
// background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
font-weight: bold;
|
||||
border: 5px solid #833e16;
|
||||
}
|
||||
.item:nth-child(1) {
|
||||
width: 48%;
|
||||
// height: 240px;
|
||||
border-radius: 100px 30px 30px 30px;
|
||||
}
|
||||
.item:nth-child(2) {
|
||||
width: 48%;
|
||||
// height: 240px;
|
||||
border-radius: 30px 100px 30px 30px;
|
||||
}
|
||||
.item:nth-child(3) {
|
||||
flex: 1;
|
||||
// height: 240px;
|
||||
border-radius: 30px 30px 100px 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.bet-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
background: #fbdd36;
|
||||
border: 5px solid #b72100;
|
||||
border-radius: 57px;
|
||||
color: #ff0606;
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.kj-box {
|
||||
background-color: #ff0606;
|
||||
border-radius: 26px;
|
||||
padding: 20px 30px;
|
||||
margin-top: 20px;
|
||||
color: #fff;
|
||||
.title {
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
|
||||
.num {
|
||||
color: red;
|
||||
color: #fbdd36;
|
||||
}
|
||||
}
|
||||
|
||||
.title-sub {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-top: 10px;
|
||||
font-size: 40px;
|
||||
display: flex;
|
||||
|
||||
@@ -143,16 +173,12 @@
|
||||
|
||||
.item:nth-child(1) {
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
color: #fbdd36;
|
||||
}
|
||||
.item:nth-child(2) {
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
color: #fbdd36;
|
||||
}
|
||||
// .item:nth-child(3) {
|
||||
// font-weight: bold;
|
||||
// color: red;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -160,12 +186,14 @@
|
||||
margin: 30px auto;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: #ff0000;
|
||||
background-color: #fbdd36;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
border-radius: 15px;
|
||||
color: #fff;
|
||||
border-radius: 38px;
|
||||
border: #ff0606 5px solid;
|
||||
color: #ff0606;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bet-opt {
|
||||
@@ -176,19 +204,12 @@
|
||||
.item {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border: 1px solid #ff0000;
|
||||
border-radius: 10px;
|
||||
// border: 1px solid #ff0000;
|
||||
border-radius: 26px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
color: #843e16;
|
||||
}
|
||||
}
|
||||
|
||||
.rule-box {
|
||||
color: #ff0000;
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,24 +17,11 @@
|
||||
<view class="level">积分: {{ userInfo.integral || 0 }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">豆子：{{ userInfo.pulse || 0 }}</view>
|
||||
</view>
|
||||
<view class="turntable">
|
||||
<view class="num-box">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in nums"
|
||||
:key="index"
|
||||
:style="{
|
||||
color: item.active ? '#ff0000' : '#000',
|
||||
backgroundImage: `url(${item.optActive ? require('../../../static/dz.png') : 'none'})`,
|
||||
}"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<text>{{ item.value }}</text>
|
||||
<!-- <image class="icon" v-show="item.optActive" src="../../../static/dz.png" /> -->
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="image"></view>
|
||||
<text>{{ userInfo.pulse || 0 }}</text>
|
||||
</view>
|
||||
<view class="game_btn" @click="handleRule">游戏规则</view>
|
||||
</view>
|
||||
<view class="kj-box">
|
||||
<view class="title">
|
||||
@@ -48,6 +35,26 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="turntable">
|
||||
<view class="num-box">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in nums"
|
||||
:key="index"
|
||||
:style="{
|
||||
color: item.active ? '#ff0000' : '#833E16',
|
||||
backgroundColor: item.optActive ? '#FBEDBC' : '#ffeeee',
|
||||
}"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<text>{{ item.value }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bet-btn" @click="handleBet">
|
||||
<view>点击</view>
|
||||
<view>投注</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="countdown">
|
||||
<text v-if="isKj">正在开奖中，已停止投注!!!</text>
|
||||
<text v-else>
|
||||
@@ -55,11 +62,18 @@
|
||||
</text>
|
||||
</view>
|
||||
<view class="bet-opt">
|
||||
<view class="item" v-for="(item, index) in betOpts" :key="index" @click="handleBet(item)">
|
||||
{{ item }}豆子
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in betOpts"
|
||||
:key="index"
|
||||
:style="{
|
||||
backgroundColor: item.isActive ? '#FBDD36' : '#fbedbc',
|
||||
}"
|
||||
@click="handleBetOpt(item)"
|
||||
>
|
||||
{{ item.value }}豆子
|
||||
</view>
|
||||
</view>
|
||||
<view class="rule-box" @click="handleRule">| 游戏规则 |</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -84,7 +98,32 @@ const nums = ref<NumsType[]>([])
|
||||
|
||||
const kjNums = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
|
||||
|
||||
const betOpts = ref([100, 500, 1000, 2000, 3000, 5000])
|
||||
const betOpts = ref([
|
||||
{
|
||||
isActive: false,
|
||||
value: 100,
|
||||
},
|
||||
{
|
||||
isActive: false,
|
||||
value: 500,
|
||||
},
|
||||
{
|
||||
isActive: false,
|
||||
value: 1000,
|
||||
},
|
||||
{
|
||||
isActive: false,
|
||||
value: 2000,
|
||||
},
|
||||
{
|
||||
isActive: false,
|
||||
value: 3000,
|
||||
},
|
||||
{
|
||||
isActive: false,
|
||||
value: 5000,
|
||||
},
|
||||
])
|
||||
|
||||
Taro.useDidShow(() => {
|
||||
get_info()
|
||||
@@ -154,16 +193,29 @@ const handleClick = (itemOpt) => {
|
||||
itemOpt.optActive = true
|
||||
}
|
||||
|
||||
const handleBet = (item: number) => {
|
||||
const handleBetOpt = (item) => {
|
||||
betOpts.value.forEach((item) => {
|
||||
item.isActive = false
|
||||
})
|
||||
item.isActive = true
|
||||
}
|
||||
|
||||
const handleBet = () => {
|
||||
const newNums = nums.value.filter((item) => item.optActive === true)
|
||||
if (newNums.length === 0)
|
||||
return Taro.showToast({
|
||||
title: '请选择投注项',
|
||||
icon: 'none',
|
||||
})
|
||||
const item = betOpts.value.filter((item) => item.isActive === true)
|
||||
if (item.length === 0)
|
||||
return Taro.showToast({
|
||||
title: '请选择投注豆子',
|
||||
icon: 'none',
|
||||
})
|
||||
Taro.showModal({
|
||||
title: '确认投注吗？',
|
||||
content: `投注豆子：${item}`,
|
||||
content: `投注豆子：${item[0].value}`,
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
const game_info = Taro.getStorageSync('gameItem')
|
||||
@@ -171,7 +223,7 @@ const handleBet = (item: number) => {
|
||||
const res = await turntable_bet({
|
||||
uid: uid,
|
||||
aid: nums.value.filter((item) => item.optActive === true)[0].ID,
|
||||
number: item,
|
||||
number: item[0].value,
|
||||
game_id: game_info.ID,
|
||||
})
|
||||
Taro.showToast({
|
||||
@@ -201,6 +253,6 @@ const toPage = (type: number) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
@import './index.scss';
|
||||
</style>
|
||||
|
||||
BIN
src/pages/aoshi/static/bj.png
Normal file
BIN
src/pages/aoshi/static/bj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 624 KiB |
BIN
src/pages/aoshi/static/zpbj.png
Normal file
BIN
src/pages/aoshi/static/zpbj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Reference in New Issue
Block a user