453 lines
9.6 KiB
Vue
453 lines
9.6 KiB
Vue
<template>
|
||
<view>
|
||
<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.7)" :is-mask-click="false">
|
||
<view class="coin-result">
|
||
<view class="center hint">
|
||
<text>恭喜找到宝藏！</text>
|
||
</view>
|
||
<view class="center hint2">
|
||
硬币名称：{{props.coinName}}
|
||
</view>
|
||
<view class="center hint3">
|
||
硬币编号：{{props.coinId}}
|
||
</view>
|
||
<view class="coin-content">
|
||
<view class="star-left">
|
||
<image class="star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star1.png" mode="widthFix"></image>
|
||
<image class="star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star2.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="coin">
|
||
<image v-if="coinTypeImg" :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/' + coinTypeImg" mode="widthFix"></image>
|
||
</view>
|
||
<view class="star-right">
|
||
<image class="star3" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star3.png" mode="widthFix"></image>
|
||
<image class="star3-box" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star3-box.png" mode="widthFix"></image>
|
||
<image class="star4" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star4.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="center">
|
||
<view class="btn center" @click="openUploadPopup">
|
||
上传视频
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<touch-popup ref="bindCoin" @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">
|
||
硬币名称：{{props.coinName}}
|
||
</view>
|
||
<view class="center">
|
||
硬币编号：{{props.coinId}}
|
||
</view>
|
||
</view>
|
||
<view class="center-video center">
|
||
<view class="video">
|
||
<video :src="video"></video>
|
||
</view>
|
||
</view>
|
||
<view v-if="!checkedVideo" class="center-hint center">
|
||
请参照以上视频示例拍摄视频并上传
|
||
</view>
|
||
<view v-else class="center-address center">
|
||
<view class="center-address-bck">
|
||
<view class="center">
|
||
产出地址
|
||
</view>
|
||
<view class="center">
|
||
{{props.coinAddress}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="center" style="padding: 5px 20px;">
|
||
<view v-if="!checkedVideo" class="btn center" @click="uploadCheck">
|
||
上传视频
|
||
</view>
|
||
<view v-else class="btn2 center" @click="uploadOss">
|
||
确认
|
||
</view>
|
||
</view>
|
||
<view class="logo" v-if="!checkedVideo">
|
||
<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,
|
||
computed,
|
||
defineExpose,
|
||
getCurrentInstance,
|
||
defineProps
|
||
} from 'vue'
|
||
const props = defineProps({
|
||
coinId: Number,
|
||
coinType: Number,
|
||
coinName: String,
|
||
coinAddress: String,
|
||
})
|
||
const {proxy} = getCurrentInstance()
|
||
const popup = ref() // ref组件
|
||
const bindCoin = ref()
|
||
|
||
const video = ref('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/video/findcoin-exam.mp4')
|
||
let tmpVideoPath = '' // 选定的视频文件路径
|
||
let videoFile = '' // 选定的视频文件
|
||
let coin_id = ''
|
||
const checkedVideo = ref(false)
|
||
|
||
const coinTypeImg = computed(() => {
|
||
if (props.coinType === 2) {
|
||
return 'silver.png'
|
||
} else if (props.coinType === 3) {
|
||
return 'copper.png'
|
||
} else {
|
||
return ''
|
||
}
|
||
})
|
||
|
||
// 上传至oss
|
||
const uploadOss = () => {
|
||
uni.showLoading({
|
||
title: '正在上传视频'
|
||
})
|
||
uni.uploadFile({
|
||
url: app.globalData.requestUrl + '/api/file/upload',
|
||
filePath: tmpVideoPath,
|
||
file: videoFile,
|
||
name: 'file',
|
||
success(res) {
|
||
let data = JSON.parse(res.data)
|
||
if (data.code === 200) {
|
||
// let url = data.data[0]
|
||
// 保存硬币
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user/coin/save',
|
||
data: {
|
||
coin_id: props.coinId,
|
||
content: data.data[0]
|
||
},
|
||
method: 'POST',
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
success: (res) => {
|
||
if (res.data.code === 200) {
|
||
popup.value.close()
|
||
bindCoin.value.close()
|
||
uni.showToast({
|
||
title: '已成功获取硬币!可前往硬币列表查看',
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
complete: () => {
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
fail(err) {
|
||
console.log('err', err)
|
||
}
|
||
})
|
||
|
||
}
|
||
// 选择视频
|
||
const uploadCheck = () => {
|
||
console.log('上传')
|
||
uni.chooseVideo({
|
||
sourceType: ['camera', 'album'],
|
||
success: function(res) {
|
||
video.value = res.tempFilePath
|
||
checkedVideo.value = true
|
||
tmpVideoPath = res.tempFilePath
|
||
videoFile = res.tempFile
|
||
}
|
||
})
|
||
}
|
||
// 打开上传视频的弹窗
|
||
const openUploadPopup = () => {
|
||
console.log('打开上传视频的弹窗')
|
||
bindCoin.value.open()
|
||
}
|
||
const open = () => {
|
||
popup.value.open()
|
||
}
|
||
const close = () => {
|
||
proxy.$emit('close')
|
||
}
|
||
defineExpose({
|
||
open
|
||
}) // 暴露方法
|
||
</script>
|
||
|
||
<style scoped>
|
||
.img-logo {
|
||
position: relative;
|
||
left: 0;
|
||
bottom: 0;
|
||
height: 200px;
|
||
}
|
||
|
||
.bck-hint {
|
||
position: absolute;
|
||
left: 85px;
|
||
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: relative;
|
||
display: flex;
|
||
|
||
}
|
||
|
||
.center-address-bck view:first-child {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.center-address-bck view:last-child {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.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-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.center-title view:last-child {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.center-title {
|
||
padding: 15px;
|
||
|
||
}
|
||
|
||
.bck-circle image {
|
||
width: 55px;
|
||
}
|
||
.bck-circle {
|
||
width: 85px;
|
||
height: 85px;
|
||
border-radius: 50px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.top {
|
||
display: flex;
|
||
position: relative;
|
||
padding-top: 30px;
|
||
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.star1 {
|
||
right: -15px;
|
||
top: 10px;
|
||
width: 21px;
|
||
}
|
||
|
||
.star2 {
|
||
right: 0;
|
||
top: 50%;
|
||
width: 10px;
|
||
}
|
||
|
||
.star3,.star3-box {
|
||
left: -20px;
|
||
top: 0px;
|
||
width: 35px;
|
||
}
|
||
|
||
.star4 {
|
||
left: 0;
|
||
top: 30%;
|
||
width: 12px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.star-left image {
|
||
position: absolute;
|
||
}
|
||
|
||
.star-right image {
|
||
position: absolute;
|
||
}
|
||
|
||
.star-left,
|
||
.star-right {
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
|
||
image {
|
||
height: auto;
|
||
}
|
||
.coin {
|
||
padding: 10px;
|
||
}
|
||
.coin image {
|
||
width: 146px;
|
||
}
|
||
|
||
.coin-content {
|
||
display: flex;
|
||
}
|
||
|
||
.hint3 {
|
||
font-size: 11px;
|
||
color: #fff;
|
||
}
|
||
|
||
.hint2 {
|
||
font-size: 13px;
|
||
color: #fff;
|
||
padding: 2px;
|
||
}
|
||
|
||
text {
|
||
background: linear-gradient(180deg, #BCFD90 0%, #16FFB7 100%);
|
||
color: transparent;
|
||
-webkit-background-clip: text;
|
||
}
|
||
|
||
.hint {
|
||
padding: 5px;
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 20px;
|
||
font-weight: 400;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.coin-result {
|
||
height: auto;
|
||
width: 750rpx;
|
||
}
|
||
|
||
scroll-view {
|
||
z-index: 999;
|
||
position: relative;
|
||
}
|
||
</style> |