160 lines
3.7 KiB
Vue
160 lines
3.7 KiB
Vue
<template>
|
|
<view>
|
|
<uni-popup ref="popup" style="z-index: 9999;" type="center">
|
|
<view style="width: 750rpx;">
|
|
<view class="unlock-group">
|
|
<view class="unlock-bck">
|
|
<view class="unlock-content">
|
|
<view class="unlock-close">
|
|
<image @click="close" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/close.png" mode="widthFix">
|
|
</image>
|
|
</view>
|
|
<view style="font-weight: bold;text-align: center;">抖音转发内容并截图</view>
|
|
<view style="font-size: 14px;color: #515151;text-align: center;padding-top: 10px;">
|
|
后台审核完毕可获得橡果
|
|
</view>
|
|
<view v-if="imgUrl" class="img-show">
|
|
<image :src="imgUrl" mode="aspectFill"></image>
|
|
</view>
|
|
<view style="padding-top: 15px;">
|
|
<block v-if="isDone">
|
|
<view style="text-align: center;font-size: 13px;color: #717171;padding: 5px 0 0 0;">
|
|
已上传，审核完毕将自动获得橡果
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<button v-if="!imgUrl" @click="checkImage" class="btn-done">上传截图</button>
|
|
<block v-else>
|
|
<button @click="save" class="btn-done">确认上传</button>
|
|
<view @click="checkImage" style="text-align: center;font-size: 13px;color: #717171;padding: 5px 0 0 0;">
|
|
重新选择
|
|
</view>
|
|
</block>
|
|
</block>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const app = getApp()
|
|
import { ref, defineExpose, getCurrentInstance } from 'vue'
|
|
import touchPopup from '@/components/touch-popup/touch-popup'
|
|
const popup = ref() // ref组件
|
|
const { proxy } = getCurrentInstance()
|
|
|
|
const taskid = ref(-1)
|
|
|
|
const imgUrl = ref('')
|
|
const isDone = ref(false)
|
|
|
|
const save = () => {
|
|
uni.request({
|
|
url: app.globalData.requestUrl + '/api/user/task/save',
|
|
data: {
|
|
id: taskid.value,
|
|
content: imgUrl.value
|
|
},
|
|
method: 'POST',
|
|
header: {
|
|
'Authorization': 'Bearer ' + app.globalData.token
|
|
},
|
|
success(res) {
|
|
console.log(res.data)
|
|
if (res.data.code === 200) {
|
|
isDone.value = true
|
|
}
|
|
}
|
|
})
|
|
}
|
|
const checkImage = () => {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success(res) {
|
|
console.log(res)
|
|
uni.uploadFile({
|
|
url: app.globalData.requestUrl + '/api/file/upload',
|
|
filePath: res.tempFilePaths[0],
|
|
file: res.tempFiles[0],
|
|
name: 'file',
|
|
success(res2) {
|
|
let data = JSON.parse(res2.data)
|
|
if (data.code === 200) {
|
|
imgUrl.value = data.data[0]
|
|
}
|
|
},
|
|
fail(err) {
|
|
console.log('err', err)
|
|
}
|
|
})
|
|
},
|
|
fail(err) {
|
|
console.log(err)
|
|
}
|
|
})
|
|
}
|
|
// 关闭解锁踪迹弹窗
|
|
const close = () => {
|
|
proxy.$emit('close', {})
|
|
popup.value.close()
|
|
}
|
|
const open = (id) => {
|
|
taskid.value = id
|
|
popup.value.open()
|
|
}
|
|
|
|
defineExpose({
|
|
open
|
|
}) // 暴露方法
|
|
</script>
|
|
|
|
<style scoped>
|
|
.unlock-close image {
|
|
width: 20px;
|
|
}
|
|
|
|
.unlock-close {
|
|
display: flex;
|
|
float: right;
|
|
right: 0;
|
|
}
|
|
.img-show image {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 5px;
|
|
}
|
|
.img-show {
|
|
padding: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
border-radius: 5px;
|
|
}
|
|
.btn-done {
|
|
background-color: #000;
|
|
font-size: 14px;
|
|
border-radius: 20px;
|
|
color: #01F0FD;
|
|
font-weight: bold;
|
|
width: 200px;
|
|
}
|
|
.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%);
|
|
}
|
|
</style> |