343 lines
6.8 KiB
Vue
343 lines
6.8 KiB
Vue
<template>
|
||
<view>
|
||
<touch-popup ref="popup" @close="close" background="linear-gradient(180deg, #F7FFC3 0%, #FFFFFF 100%)" :backShow="true">
|
||
<scroll-view scroll-y style="height: 100%;margin-top: 15px;">
|
||
<view class="top">
|
||
<view class="star-left">
|
||
<image class="bindcoin-star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star1.png"
|
||
mode="widthFix"></image>
|
||
<image class="bindcoin-star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star2.png"
|
||
mode="widthFix"></image>
|
||
</view>
|
||
<view class="">
|
||
<view class="bck-circle center">
|
||
<image v-if="coinTypeImg" :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/' + coinTypeImg" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="star-right">
|
||
<image class="bindcoin-star3" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star3.png"
|
||
mode="widthFix"></image>
|
||
<image class="bindcoin-star4" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star4.png"
|
||
mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="center-title">
|
||
<view class="center">
|
||
硬币名称：{{curCoin.name}}
|
||
</view>
|
||
<view class="center">
|
||
硬币编号：{{curCoin.id}}
|
||
</view>
|
||
</view>
|
||
<view class="center-video center">
|
||
<view class="video">
|
||
<video :src="video_url"></video>
|
||
</view>
|
||
</view>
|
||
<view class="center-hint center">
|
||
此硬币已被找到，可查看证据视频
|
||
</view>
|
||
<view class="center-address center">
|
||
<view class="center-address-bck">
|
||
<view class="center">
|
||
产出地址
|
||
</view>
|
||
<view class="center">
|
||
{{curCoin.address}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="logo">
|
||
<image class="img-logo" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/logo.png" mode="heightFix"></image>
|
||
<view class="center bck-hint">
|
||
<view class="">
|
||
上传视频至抖音
|
||
</view>
|
||
<view class="">
|
||
并@官方号可额外获得橡果
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</touch-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
const app = getApp()
|
||
import { ref, defineExpose, computed, getCurrentInstance } from 'vue'
|
||
const popup = ref() // ref组件
|
||
const {proxy} = getCurrentInstance()
|
||
const curCoin = ref({})
|
||
const video_url = ref('')
|
||
|
||
const coinTypeImg = computed(() => {
|
||
if (curCoin.value.type === 2) {
|
||
return 'silver.png'
|
||
} else if (curCoin.value.type === 3) {
|
||
return 'copper.png'
|
||
} else {
|
||
return ''
|
||
}
|
||
})
|
||
// 加载页面数据
|
||
const loadData = () => {
|
||
uni.showLoading()
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/coin/getVideo',
|
||
data: {
|
||
coin_id: curCoin.value.id
|
||
},
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
success: (res) => {
|
||
if (res.data.code === 200) {
|
||
video_url.value = res.data.data
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
complete() {
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
}
|
||
|
||
const close = () => {
|
||
proxy.$emit('close')
|
||
}
|
||
const open = (coin) => {
|
||
if (JSON.stringify(coin) !== JSON.stringify(curCoin.value)) {
|
||
console.log(coin)
|
||
curCoin.value = coin
|
||
loadData()
|
||
}
|
||
popup.value.open()
|
||
}
|
||
defineExpose({
|
||
open
|
||
}) // 暴露方法
|
||
</script>
|
||
|
||
<style scoped>
|
||
.img-logo {
|
||
position: relative;
|
||
left: 0;
|
||
bottom: 0;
|
||
height: 200px;
|
||
}
|
||
|
||
.bck-hint {
|
||
position: absolute;
|
||
left: 85px;
|
||
width: 204px;
|
||
top: 50%;
|
||
font-size: 10px;
|
||
color: #888888;
|
||
background-color: rgba(255, 229, 200, 0.9);
|
||
border-radius: 16px;
|
||
padding: 10px 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.logo {
|
||
position: absolute;
|
||
display: flex;
|
||
bottom: 0;
|
||
|
||
}
|
||
.btn {
|
||
background: linear-gradient(180deg, #C1FF8F 0%, #0DFFB9 100%);
|
||
width: 143px;
|
||
height: 45px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
border-radius: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
.btn2 {
|
||
height: 45px;
|
||
font-size: 14px;
|
||
border-radius: 24px;
|
||
color: #fff;
|
||
width: 100%;
|
||
background-color: #000;
|
||
}
|
||
.center-address-bck view:first-child {
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
.center-address-bck view:last-child {
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
line-height: 22.5px;
|
||
text-align: center;
|
||
}
|
||
|
||
.center-address-bck {
|
||
display: flex;
|
||
width: 100%;
|
||
flex-direction: column;
|
||
background-color: #fff;
|
||
border-radius: 15px;
|
||
padding: 10px;
|
||
|
||
}
|
||
|
||
.center-address {
|
||
padding: 20px 15px;
|
||
|
||
}
|
||
.center-hint {
|
||
font-size: 13px;
|
||
font-weight: 300;
|
||
padding: 5px;
|
||
}
|
||
video {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 15px;
|
||
}
|
||
.video {
|
||
background-color: #fff;
|
||
border-radius: 15px;
|
||
width: 300px;
|
||
height: 180px;
|
||
padding: 12px;
|
||
}
|
||
.center-title view:first-child {
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.center-title view:last-child {
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
text-align: center;
|
||
}
|
||
|
||
.center-title {
|
||
padding: 15px;
|
||
|
||
}
|
||
.bck-circle image {
|
||
width: 55px;
|
||
height: auto;
|
||
}
|
||
.bck-circle {
|
||
width: 95px;
|
||
height: 95px;
|
||
border-radius: 50px;
|
||
background-color: #fff;
|
||
}
|
||
.star-left image {
|
||
position: absolute;
|
||
}
|
||
|
||
.star-right image {
|
||
position: absolute;
|
||
}
|
||
|
||
.star-left,
|
||
.star-right {
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
.bindcoin-star1 {
|
||
width: 36px;
|
||
right: 15px;
|
||
top: -5px;
|
||
}
|
||
|
||
.bindcoin-star2 {
|
||
width: 16px;
|
||
right: 30px;
|
||
top: 50px;
|
||
}
|
||
|
||
.bindcoin-star3 {
|
||
width: 22px;
|
||
left: 15px;
|
||
top: 0;
|
||
}
|
||
|
||
.bindcoin-star4 {
|
||
width: 12px;
|
||
left: 45px;
|
||
bottom: 5px;
|
||
}
|
||
.top {
|
||
display: flex;
|
||
position: relative;
|
||
padding-top: 30px;
|
||
|
||
}
|
||
scroll-view {
|
||
z-index: 999;
|
||
position: relative;
|
||
}
|
||
/* video {
|
||
border-radius: 15px;
|
||
}
|
||
.unlock-logo {
|
||
display: flex;
|
||
position: absolute;
|
||
top: -101px;
|
||
left: 0;
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
.unlock-close image {
|
||
width: 20px;
|
||
}
|
||
|
||
.unlock-close {
|
||
display: flex;
|
||
float: right;
|
||
right: 0;
|
||
}
|
||
.unlock-center {
|
||
display: flex;
|
||
padding: 0 15px 5px 15px;
|
||
}
|
||
|
||
.unlock-title {
|
||
padding: 0 15px 10px 15px;
|
||
display: flex;
|
||
font-weight: 700;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.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-group {
|
||
padding: 25px;
|
||
} */
|
||
</style> |