365 lines
8.7 KiB
Vue
365 lines
8.7 KiB
Vue
<template>
|
||
<view>
|
||
<uni-popup ref="popup" style="z-index: 9999;" type="center" :is-mask-click="false">
|
||
<view style="width: 750rpx;">
|
||
<view class="unlock-group">
|
||
<view class="unlock-bck">
|
||
<view class="unlock-content">
|
||
<view class="unlock-logo">
|
||
<image style="height: 130px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/松鼠ip.png" mode="heightFix"></image>
|
||
</view>
|
||
<view class="unlock-title">
|
||
<view class="">
|
||
解锁金币
|
||
</view>
|
||
<view class="">
|
||
金币名称：{{coinInfo.name}}
|
||
</view>
|
||
<view class="">
|
||
金币编号：{{coinInfo.id}}
|
||
</view>
|
||
</view>
|
||
<view class="unlock-center">
|
||
<view class="unlock-img">
|
||
<image class="left-star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/left-star1.png"
|
||
mode="widthFix"></image>
|
||
<image class="left-star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/left-star2.png"
|
||
mode="widthFix"></image>
|
||
</view>
|
||
<view class="unlock-img"
|
||
style="display: flex;align-items: center;justify-content: center;flex: none;">
|
||
<image class="center-bck" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/center-bck.png"
|
||
mode="widthFix"></image>
|
||
<image class="rectagle1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle1.png"
|
||
mode="widthFix"></image>
|
||
<image class="rectagle2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle2.png"
|
||
mode="heightFix"></image>
|
||
<image class="rectagle3" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle3.png"
|
||
mode="heightFix"></image>
|
||
<image class="center-star" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/center-star.png"
|
||
mode="widthFix"></image>
|
||
<image class="center-icon" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/unlockgold/centerimg.png"
|
||
mode="widthFix"></image>
|
||
</view>
|
||
<view class="unlock-img">
|
||
<image class="right-star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/right-star1.png"
|
||
mode="widthFix"></image>
|
||
<image class="right-star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/right-star2.png"
|
||
mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="unlock-price">
|
||
<view class="price-item">
|
||
<view class="hint-bck">
|
||
328橡果解锁一次
|
||
</view>
|
||
</view>
|
||
<view class="price-item">
|
||
<view class="hint-bck">
|
||
新用户首次免费
|
||
</view>
|
||
</view>
|
||
<view class="price-item">
|
||
<view class="price-bck">
|
||
<view class="logo-bck">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/logo-balance.png" mode="widthFix">
|
||
</image>
|
||
</view>
|
||
{{userInfo.amount}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="unlock-btn">
|
||
<view class="btn-item" style="justify-content: flex-end;">
|
||
<view @click="cancelUnlock" class="btn1">
|
||
再想想
|
||
</view>
|
||
</view>
|
||
<view class="btn-item">
|
||
<view @click="doUnlock" class="btn2">
|
||
<text>确认解锁</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
const app = getApp()
|
||
import { ref, defineExpose, getCurrentInstance } from 'vue'
|
||
const {proxy} = getCurrentInstance()
|
||
const popup = ref() // ref组件
|
||
|
||
const coinInfo = ref({}) // 硬币详情
|
||
const userInfo = ref({}) // 用户详情
|
||
|
||
// 执行解锁踪迹
|
||
const doUnlock = () => {
|
||
uni.showModal({
|
||
title: '确认解锁此硬币吗？',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
uni.showLoading({
|
||
title: '正在解锁'
|
||
})
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user/coin/gold/save',
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
method: 'POST',
|
||
success: (res) => {
|
||
if (res.data.code === 200) {
|
||
console.log(res.data)
|
||
// 更改本地余额
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user',
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
success: (resuser) => {
|
||
app.globalData.userinfo = resuser.data.data
|
||
app.globalData.isReloadMarkers = true
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '消除金币成功',
|
||
icon: 'none'
|
||
})
|
||
cancelUnlock()
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
const cancelUnlock = () => {
|
||
proxy.$emit('close')
|
||
popup.value.close()
|
||
}
|
||
const open = (coin) => {
|
||
if (JSON.stringify(coinInfo.value) !== JSON.stringify(coin)) {
|
||
userInfo.value = app.globalData.userinfo
|
||
coinInfo.value = coin
|
||
}
|
||
|
||
popup.value.open()
|
||
}
|
||
defineExpose({
|
||
open
|
||
}) // 暴露方法
|
||
</script>
|
||
|
||
<style scoped>
|
||
.unlock-group {
|
||
padding: 25px;
|
||
}
|
||
|
||
.unlock-bck {
|
||
padding: 3px;
|
||
border-radius: 15px;
|
||
background: rgba(232, 232, 232, 0.5);
|
||
border: 2px solid rgba(169, 169, 169, 0.5);
|
||
}
|
||
|
||
.unlock-content {
|
||
border-radius: 15px;
|
||
padding: 25px;
|
||
background: linear-gradient(180deg, #C2FF8F 0%, #08FFB9 100%);
|
||
}
|
||
|
||
.unlock-logo {
|
||
display: flex;
|
||
position: absolute;
|
||
top: -101px;
|
||
left: 0;
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
.unlock-title view:first-child {
|
||
text-decoration: underline;
|
||
font-size: 18px;
|
||
padding-bottom: 5px;
|
||
}
|
||
.unlock-title view:last-child {
|
||
font-size: 10px;
|
||
font-weight: 400;
|
||
}
|
||
.unlock-title {
|
||
padding: 0 15px 10px 15px;
|
||
display: flex;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.left-star1 {
|
||
width: 22px;
|
||
float: right;
|
||
right: 0;
|
||
top: -10px;
|
||
}
|
||
|
||
.left-star2 {
|
||
float: right;
|
||
width: 10px;
|
||
top: 70px;
|
||
}
|
||
|
||
.center-bck {
|
||
width: 100px;
|
||
z-index: 2;
|
||
}
|
||
|
||
.rectagle1 {
|
||
width: 47px;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.rectagle2 {
|
||
height: 50px;
|
||
position: absolute;
|
||
left: 49px;
|
||
top: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.rectagle3 {
|
||
height: 30px;
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.center-star {
|
||
width: 125px;
|
||
position: absolute;
|
||
z-index: 2;
|
||
background: url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/unlockgold/cenger-right-img.png) no-repeat;
|
||
background-size: 28px;
|
||
background-position: right 20px bottom 20px;
|
||
}
|
||
|
||
.center-icon {
|
||
width: 80px;
|
||
height: auto;
|
||
position: absolute;
|
||
z-index: 3;
|
||
}
|
||
|
||
.right-star1 {
|
||
width: 36px;
|
||
position: absolute;
|
||
left: 0px;
|
||
top: -18px;
|
||
}
|
||
|
||
.right-star2 {
|
||
width: 12px;
|
||
left: 30px;
|
||
top: 35px;
|
||
}
|
||
.unlock-img {
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
.unlock-center {
|
||
display: flex;
|
||
padding: 0 15px 5px 15px;
|
||
}
|
||
.hint-bck {
|
||
background: rgba(255, 255, 255, .8);
|
||
border-radius: 15px;
|
||
padding: 4px 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
}
|
||
.price-bck image {
|
||
width: 18px;
|
||
}
|
||
.logo-bck {
|
||
height: 26px;
|
||
width: 26px;
|
||
background: #FFCC18;
|
||
border-radius: 13px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 8px;
|
||
}
|
||
.price-bck {
|
||
height: 26px;
|
||
background: rgba(255, 255, 255, .8);
|
||
border-radius: 13px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-right: 12px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
.price-item {
|
||
flex: 1;
|
||
display: flex;
|
||
padding-top: 5px;
|
||
justify-content: center;
|
||
}
|
||
.unlock-price {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 5px 25px;
|
||
}
|
||
.btn-item view {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 10px 0;
|
||
border-radius: 30px;
|
||
width: 100px;
|
||
}
|
||
.btn1 {
|
||
background: rgba(255, 255, 255, .8);
|
||
}
|
||
.btn2 text {
|
||
background: linear-gradient(90deg, #BFFF90 0%, #26FFB3 100%);
|
||
color: transparent;
|
||
-webkit-background-clip: text;
|
||
}
|
||
.btn2 {
|
||
background: #000000;
|
||
}
|
||
.btn-item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
flex: 1;
|
||
padding: 10px 10px 0 10px;
|
||
}
|
||
.unlock-btn {
|
||
display: flex;
|
||
}
|
||
</style> |