541 lines
14 KiB
Vue
541 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<touch-popup @close="close" ref="popup" background="transparent">
|
||
<view class="tabbar">
|
||
<view class="top-icon">
|
||
<view class="icon-item">
|
||
<image v-if="curIndex === 1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/touch-close-white.png" mode="heightFix"></image>
|
||
</view>
|
||
<view class="icon-item">
|
||
<image v-if="curIndex === 2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/touch-close-white.png" mode="heightFix"></image>
|
||
</view>
|
||
</view>
|
||
<view :class="leftClassBck">
|
||
<view :class="leftClassObject" @click="switchTab(1)">
|
||
<image :src="tabbarIcon1" mode="widthFix"></image>
|
||
<text :class="{ colorWhite: curIndex == 2 }">悬赏</text>
|
||
</view>
|
||
</view>
|
||
<view :class="rightClassBck">
|
||
<view :class="rightClassObject" @click="switchTab(2)">
|
||
<image :src="tabbarIcon2" mode="widthFix"></image>
|
||
<text :class="{ colorWhite: curIndex == 1 }">赏金任务</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<scroll-view class="list" :style="listClassObject" scroll-y>
|
||
<view v-if="curIndex == 1" v-for="(item, index) in task1List" key="taskTask1" class="item-group">
|
||
<view class="item itemA">
|
||
<view style="display: flex;">
|
||
<view class="item-left">
|
||
<image :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/tmp/star.png'" mode="widthFix"></image>
|
||
</view>
|
||
<view class="item-center">
|
||
<view class="">
|
||
{{item.content}}
|
||
</view>
|
||
<view class="">
|
||
任务奖励：{{item.award_number}}
|
||
</view>
|
||
</view>
|
||
<view class="item-right">
|
||
<view v-if="item.user_number < item.number">
|
||
<text>{{item.user_number}}</text>/{{item.number}}
|
||
</view>
|
||
<view v-else>
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/tmp/done.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="item.action === 1 && item.user_number < item.number" style="padding-top: 20px;display: flex;">
|
||
<!-- #ifdef H5 -->
|
||
<button @click="goAction(item.action, item.id)" class="btn-done"><text>去完成</text></button>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button @click="goAction(item.action, item.id)" open-type="share" class="btn-done"><text>去完成</text></button>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view v-if="item.action === 2 && item.user_task_status !== 1" style="padding-top: 20px;display: flex;flex-direction: column;">
|
||
<button v-if="item.user_task_status === 0 && item.user_number < item.number" @click="goAction(item.action, item.id)" class="btn-done">
|
||
<text>去完成</text>
|
||
</button>
|
||
<block v-else>
|
||
<button v-if="item.user_task_status === 0" class="btn-done"><text>正在审核</text></button>
|
||
<button v-else-if="item.user_task_status === 2" @click="goAction(item.action, item.id)" class="btn-done"><text>重新上传</text></button>
|
||
<view style="text-align: center;font-size: 12px;color: #717171;padding-top: 5px;">
|
||
{{item.user_task_status === 0 ? '审核通过将自动获得橡果' : '很抱歉，审核未通过，请重新上传转发证明'}}
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view v-if="item.action === 3 && item.user_number < item.number" style="padding-top: 20px;display: flex;flex-direction: column;">
|
||
<!-- #ifdef H5 -->
|
||
<view v-if="proxy.$wx && app.isWechat()" class="opentag" v-html="wxOpenTags"></view>
|
||
<view v-else style="font-size: 12px;text-align: center;">
|
||
微信搜索“宝藏猎人QuXun”，打开小程序观看视频广告
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button @click="createVideoAd" class="btn-done"><text>观看视频</text></button>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else v-for="(item, index) in task2List" key="taskTask2" class="item-group">
|
||
<view class="item itemB">
|
||
<view style="display: flex;">
|
||
<view style="flex: 1;">
|
||
<view class="item-top">
|
||
{{item.name}}：
|
||
</view>
|
||
<view class="item-bottom">
|
||
<view class="item-center">
|
||
<view class="">
|
||
{{item.content}}
|
||
</view>
|
||
<view class="">
|
||
任务奖励：{{item.award_number}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;">
|
||
<view class="item-right">
|
||
<image v-if="item.user_number >= item.number" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/tmp/done.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="item.user_number < item.number" style="padding-top: 20px;display: flex;">
|
||
<button @click="goTask2(item)" class="btn-done"><text>去完成</text></button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
</touch-popup>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<uni-popup ref="poster">
|
||
<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
|
||
<image :src="curPosterUrl" show-menu-by-longpress style="width: 600rpx;border-radius: 10px;" mode="widthFix"></image>
|
||
<image @click="posterClose" style="width: 24px;padding-top: 15px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/close.png" mode="widthFix"></image>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- #endif -->
|
||
<popup-uptaskimg ref="pUptaskimg" @close="uptaskimgClose"></popup-uptaskimg>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
const app = getApp()
|
||
import { ref, defineExpose, computed, onMounted, getCurrentInstance } from 'vue'
|
||
import touchPopup from '@/components/touch-popup/touch-popup'
|
||
const popup = ref() // ref组件
|
||
const pUptaskimg = ref() // ref组件
|
||
const {proxy} = getCurrentInstance()
|
||
|
||
// #ifdef H5
|
||
const wxOpenTags = ref('')
|
||
// #endif
|
||
|
||
const curIndex = ref(1) // 1悬赏 2赏金任务
|
||
const task1List = ref(false)
|
||
const task2List = ref(false)
|
||
|
||
// #ifdef MP-WEIXIN
|
||
const poster = ref()
|
||
const curPosterUrl = ref('')
|
||
const posterClose = () => {
|
||
poster.value.close()
|
||
}
|
||
let rewardedVideoAd = null
|
||
onMounted(() => {
|
||
if(wx.createRewardedVideoAd){
|
||
rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'xxxx' })
|
||
rewardedVideoAd.onLoad(() => {
|
||
console.log('onLoad event emit')
|
||
})
|
||
rewardedVideoAd.onError((err) => {
|
||
console.log('onError event emit', err)
|
||
})
|
||
rewardedVideoAd.onClose((res) => {
|
||
console.log('onClose event emit', res)
|
||
})
|
||
} else {
|
||
console.log('没有广告组件')
|
||
}
|
||
})
|
||
const createVideoAd = () => {
|
||
uni.showToast({
|
||
title: '正在观看视频',
|
||
icon: 'loading'
|
||
})
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
var opend = false
|
||
const wxopeninit = () => {
|
||
if (!proxy.$wx || !app.isWechat() || opend) return
|
||
wxOpenTags.value = `
|
||
<wx-open-launch-weapp
|
||
id="launch-weapp"
|
||
path="pages/game/game"
|
||
env-version="trial"
|
||
appid="wx60d549932b7d4267"
|
||
style="width: 200px;height: 43px;display: flex;"
|
||
>
|
||
<template>
|
||
<style>
|
||
.wxbtn span {
|
||
background: linear-gradient(180deg, #01F0FD 0%, #17FFA7 100%);
|
||
color: transparent;
|
||
-webkit-background-clip: text;
|
||
}
|
||
.wxbtn {
|
||
background-color: #000;
|
||
font-size: 14px;
|
||
border-radius: 20px;
|
||
font-weight: 700;
|
||
line-height: 21px;
|
||
width: 200px;
|
||
height: 43px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style>
|
||
<div class="wxbtn"><span>前往小程序看视频</span></div>
|
||
</template>
|
||
</wx-open-launch-weapp>`
|
||
opend = true
|
||
}
|
||
// #endif
|
||
const goTask2 = (item) => {
|
||
// #ifdef H5
|
||
location.href = item.platform_data.link_h5 // 直接跳转
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
curPosterUrl.value = item.platform_data.poster_link
|
||
poster.value.open()
|
||
// #endif
|
||
}
|
||
const goAction = (action, id) => {
|
||
if (action === 1) {
|
||
// #ifdef H5
|
||
uni.showToast({
|
||
title: '请点击右上角分享',
|
||
icon: 'none'
|
||
})
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user/task/save',
|
||
data: {
|
||
id: id
|
||
},
|
||
method: 'POST',
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
success(res) {
|
||
console.log(res.data)
|
||
loadData(1)
|
||
}
|
||
})
|
||
// #endif
|
||
} else {
|
||
// 弹出上传图片的窗口
|
||
pUptaskimg.value.open(id)
|
||
}
|
||
}
|
||
/* 方法 */
|
||
const loadData = (type) => {
|
||
uni.showLoading()
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/task/list',
|
||
data: {
|
||
type: type
|
||
},
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
success(res) {
|
||
console.log(res.data)
|
||
if (type === 1) {
|
||
task1List.value = res.data.data
|
||
} else {
|
||
task2List.value = res.data.data
|
||
}
|
||
},
|
||
complete() {
|
||
uni.hideLoading()
|
||
}
|
||
|
||
})
|
||
}
|
||
|
||
/* 一系列的计算属性 */
|
||
const leftClassBck = computed(() => {
|
||
return ['flex1', curIndex.value === 1 ? 'bck-black' : 'bck-top-color2']
|
||
})
|
||
const rightClassBck = computed(() => {
|
||
return ['flex1', curIndex.value === 1 ? 'bck-top-color1' : 'bck-black']
|
||
})
|
||
const leftClassObject = computed(() => {
|
||
const classArr = ['top-menu']
|
||
if (curIndex.value === 1) {
|
||
classArr.push('radius-t-r')
|
||
classArr.push('bck-top-color1')
|
||
} else {
|
||
classArr.push('radius-b-r')
|
||
classArr.push('bck-black')
|
||
}
|
||
return classArr
|
||
})
|
||
const rightClassObject = computed(() => {
|
||
const classArr = ['top-menu']
|
||
if (curIndex.value === 1) {
|
||
classArr.push('radius-b-l')
|
||
classArr.push('bck-black')
|
||
} else {
|
||
classArr.push('radius-t-l')
|
||
classArr.push('bck-top-color2')
|
||
}
|
||
return classArr
|
||
})
|
||
const tabbarIcon1 = computed(() => {
|
||
if (curIndex.value === 1) {
|
||
return 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/task-top-left-black.png'
|
||
} else {
|
||
return 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/task-top-left-white.png'
|
||
}
|
||
})
|
||
const tabbarIcon2 = computed(() => {
|
||
if (curIndex.value === 2) {
|
||
return 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/task-top-right-black.png'
|
||
} else {
|
||
return 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/task-top-right-white.png'
|
||
}
|
||
})
|
||
const listClassObject = computed(() => {
|
||
return {
|
||
background: curIndex.value === 1 ? 'linear-gradient(#acf393, #11ffb7)' : 'linear-gradient(#f9c87c, #e5f499)'
|
||
}
|
||
})
|
||
|
||
/* 方法 */
|
||
const switchTab = (i) => {
|
||
app.playAudio() // 点击音效
|
||
console.log(i, curIndex.value)
|
||
if (i === curIndex.value) return
|
||
curIndex.value = i
|
||
if (!task2List.value) loadData(2)
|
||
}
|
||
const uptaskimgClose = () => {
|
||
loadData(1)
|
||
}
|
||
const open = () => {
|
||
popup.value.open()
|
||
if (!task1List.value) loadData(1)
|
||
// #ifdef H5
|
||
wxopeninit()
|
||
// #endif
|
||
}
|
||
const close = () => {
|
||
proxy.$emit('close')
|
||
}
|
||
|
||
defineExpose({
|
||
open
|
||
}) // 暴露方法
|
||
</script>
|
||
|
||
<style scoped>
|
||
.opentag {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
height: 43px;
|
||
}
|
||
.item-group {
|
||
padding: 0 15px 15px 15px;
|
||
}
|
||
.list .item-group:first-child {
|
||
padding-top: 15px;
|
||
}
|
||
.list .item-group:last-child {
|
||
padding-bottom: calc(constant(safe-area-inset-bottom) + 15px);
|
||
padding-bottom: calc(env(safe-area-inset-bottom) + 15px);
|
||
}
|
||
.btn-done text {
|
||
background: linear-gradient(180deg, #01F0FD 0%, #17FFA7 100%);
|
||
color: transparent;
|
||
-webkit-background-clip: text;
|
||
}
|
||
.btn-done {
|
||
background-color: #000;
|
||
font-size: 14px;
|
||
border-radius: 20px;
|
||
font-weight: 700;
|
||
line-height: 21px;
|
||
width: 200px;
|
||
height: 43px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.list {
|
||
height: calc(100% - 62px);
|
||
}
|
||
.list .item {
|
||
background: #F5F5F5CC;
|
||
border-radius: 15px;
|
||
display: flex;
|
||
padding: 25px 15px;
|
||
flex-direction: column;
|
||
|
||
}
|
||
.list .itemA {
|
||
/* flex-direction: column; */
|
||
}
|
||
.list .itemB {
|
||
padding: 15px;
|
||
}
|
||
.list .item-top {
|
||
font-weight: bold;
|
||
}
|
||
.list .itemB .item-bottom {
|
||
display: flex;
|
||
}
|
||
.list .itemB .item-bottom .item-center {
|
||
padding: 0;
|
||
}
|
||
.list .itemB .item-bottom .item-center > view:first-child {
|
||
padding: 5px 0;
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 21px;
|
||
|
||
}
|
||
|
||
.list .item .item-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.list .item .item-left image {
|
||
width: 30px;
|
||
height: auto;
|
||
}
|
||
.list .item .item-center {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
padding: 0 10px;
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 12px;
|
||
font-weight: 350;
|
||
line-height: 18px;
|
||
text-align: left;
|
||
|
||
}
|
||
.list .item .item-center > view:first-child {
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
line-height: 24px;
|
||
}
|
||
.list .item .item-right {
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
line-height: 21px;
|
||
text-align: center;
|
||
}
|
||
.list .item .item-right image {
|
||
width: 22px;
|
||
height: auto;
|
||
}
|
||
.list .item .item-right text {
|
||
color: #0057ff;
|
||
|
||
}
|
||
|
||
|
||
.top-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
width: 100%;
|
||
padding: 6px 0;
|
||
}
|
||
.icon-item image {
|
||
height: 7px !important;
|
||
}
|
||
.icon-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 1;
|
||
}
|
||
|
||
|
||
.tabbar {
|
||
display: flex;
|
||
}
|
||
.left-bck {
|
||
flex: 1;
|
||
background-color: #000;
|
||
}
|
||
.flex1 {
|
||
flex: 1;
|
||
}
|
||
.top-menu {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
line-height: 27px;
|
||
text-align: center;
|
||
|
||
}
|
||
.radius-t-r {
|
||
border-top-right-radius: 15px;
|
||
}
|
||
.radius-t-l {
|
||
border-top-left-radius: 15px;
|
||
}
|
||
.radius-b-r {
|
||
border-bottom-right-radius: 15px;
|
||
}
|
||
.radius-b-l {
|
||
border-bottom-left-radius: 15px;
|
||
}
|
||
.colorWhite {
|
||
color: #fff;
|
||
}
|
||
.tabbar image{
|
||
width: 23px;
|
||
height: auto;
|
||
}
|
||
.bck-black {
|
||
background-color: #000;
|
||
}
|
||
.bck-top-color1 {
|
||
background: linear-gradient(#c1fe8e, #acf393); /* 绿色 */
|
||
}
|
||
.bck-top-color2 {
|
||
background: linear-gradient(#fac479, #f9c87c); /* 橙色 */
|
||
}
|
||
.bck-content-color1 {
|
||
background: linear-gradient(#acf393, #11ffb7); /* 绿色内容 */
|
||
}
|
||
.bck-content-color2 {
|
||
background: linear-gradient(#f9c87c, #e5f499); /* 橙色内容 */
|
||
}
|
||
</style> |