|
|
@ -905,9 +905,11 @@ const changeLevelList = ref([ |
|
|
|
const activeLevel = ref( |
|
|
|
changeLevelList.value[0] || { position: 10, calculatedPosition: 10 } |
|
|
|
); |
|
|
|
const gold = ref(0); |
|
|
|
const gold = ref(100); |
|
|
|
|
|
|
|
const rechargeDialogVisible = ref(false); |
|
|
|
const confirmDialogVisible = ref(false); |
|
|
|
const changeSuccessDialogVisible = ref(false); |
|
|
|
|
|
|
|
const chooseLevel = (item) => { |
|
|
|
activeLevel.value = item; |
|
|
@ -917,6 +919,8 @@ const changeToken = () => { |
|
|
|
if (gold.value < activeLevel.value.position) { |
|
|
|
rechargeDialogVisible.value = true; |
|
|
|
return; |
|
|
|
} else { |
|
|
|
confirmDialogVisible.value = true; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
@ -942,6 +946,16 @@ const goRecharge = () => { |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const goChange = () => { |
|
|
|
confirmDialogVisible.value = false; |
|
|
|
dialogVisible.value = false; |
|
|
|
changeSuccessDialogVisible.value = true; |
|
|
|
setTimeout(() => { |
|
|
|
changeSuccessDialogVisible.value = false; |
|
|
|
}, 3000); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
// 8.18金币兑换Token end |
|
|
|
|
|
|
|
onMounted(async () => { |
|
|
@ -1344,6 +1358,37 @@ onUnmounted(() => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<el-dialog |
|
|
|
v-model="confirmDialogVisible" |
|
|
|
:width="isMobile ? '60%' : '40%'" |
|
|
|
:show-close="false" |
|
|
|
> |
|
|
|
<div class="confirmDialogTitle">兑换</div> |
|
|
|
<div class="confirmDialogContent"> |
|
|
|
尊敬的用户您好!您确认要花费{{ activeLevel.position }}金币兑换{{ |
|
|
|
activeLevel.calculatedPosition |
|
|
|
}}Token吗? |
|
|
|
</div> |
|
|
|
<div class="confirmDialogBtnGroup"> |
|
|
|
<div class="confirmDialogConfirm" @click="goChange()">确认</div> |
|
|
|
<div class="confirmDialogCancel" @click="confirmDialogVisible = false"> |
|
|
|
取消 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<el-dialog |
|
|
|
v-model="changeSuccessDialogVisible" |
|
|
|
:width="isMobile ? '60%' : '40%'" |
|
|
|
:show-close="false" |
|
|
|
class="changeSuccessDialog" |
|
|
|
> |
|
|
|
<div class="changeSuccessDialogTitle">兑换成功</div> |
|
|
|
<div class="changeSuccessDialogContent"> |
|
|
|
尊敬的用户,恭喜您成功兑换:{{ activeLevel.calculatedPosition }}Token |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
@ -2097,4 +2142,75 @@ body { |
|
|
|
.rechargeDialogCancel:hover { |
|
|
|
background-color: #ecf2ff; |
|
|
|
} |
|
|
|
|
|
|
|
.confirmDialogTitle { |
|
|
|
font-size: 1.7rem; |
|
|
|
/* font-weight: bold; */ |
|
|
|
color: #4e86fe; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
letter-spacing: 10px; |
|
|
|
} |
|
|
|
.confirmDialogContent { |
|
|
|
padding: 20px; |
|
|
|
font-size: 1.2rem; |
|
|
|
} |
|
|
|
|
|
|
|
.confirmDialogBtnGroup { |
|
|
|
display: flex; |
|
|
|
font-size: 1.2rem; |
|
|
|
padding: 0px 20px; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
.confirmDialogConfirm { |
|
|
|
color: white; |
|
|
|
background-color: #4e86fe; |
|
|
|
padding: 10px 20px; |
|
|
|
border-radius: 13px; |
|
|
|
cursor: pointer; |
|
|
|
width: 20%; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.confirmDialogConfirm:hover { |
|
|
|
background-color: #3a73e6; |
|
|
|
} |
|
|
|
|
|
|
|
.confirmDialogCancel { |
|
|
|
border: 1px solid rgb(202, 202, 202); |
|
|
|
padding: 10px 20px; |
|
|
|
border-radius: 13px; |
|
|
|
cursor: pointer; |
|
|
|
width: 20%; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.confirmDialogCancel:hover { |
|
|
|
background-color: #ecf2ff; |
|
|
|
} |
|
|
|
|
|
|
|
.changeSuccessDialogTitle { |
|
|
|
font-size: 1.7rem; |
|
|
|
font-weight: bold; |
|
|
|
color: #de93a3; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
letter-spacing: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.changeSuccessDialogContent { |
|
|
|
padding: 20px; |
|
|
|
font-size: 1.2rem; |
|
|
|
font-weight: bold; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
<style> |
|
|
|
.changeSuccessDialog { |
|
|
|
background: linear-gradient(180deg, #a2dffe, #b59be1); |
|
|
|
} |
|
|
|
</style> |