<template> <view class="content"> <view class="task-list" v-for="(item,index) in list" :key="index"> <view class="task-l"> <u-image width="80rpx" height="80rpx" :src="`/static/${item.taskCode}.png`"></u-image> <view class="task-l-info"> <view class="task-l-title">{{item.taskCodeDictValue}}</view> <view class="task-l-desc">赚<text>{{item.giveTimes}}</text>次抽奖 <u-image width="22rpx" height="22rpx" src="/static/zpIcon.png"></u-image></view> </view> </view> <view class="task-r"> <u-button size="medium" v-if="item.state==1||item.taskCode=='NEW_CUSTOMER'" :custom-style="{padding:'6px 10px',width:'100%',background:'#989898',color:'#ffffff'}">已完成</u-button> <u-button size="medium" v-else-if="item.state==0 && item.taskCode=='SHARE_FRIEND'" open-type="share" :custom-style="{padding:'6px 10px',width:'100%',background:'#02c9b2',color:'#ffffff'}">立即分享</u-button> <u-button size="medium" v-else @click="showYdao" :custom-style="{padding:'6px 10px',width:'100%',background:'#02c9b2',color:'#ffffff'}">立即前往</u-button> </view> </view> <u-popup v-model="showYd" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="500rpx" height="550rpx"> <view class="lottery-content"> <view class="lottery-title"> <image src="/static/tdsm.jpg"></image> </view> <view @click="toViewZn" class="lottery-confrim-btn"> 查看使用指南 </view> </view> </u-popup> </view> </template> <script> import { findCustomerTask, doTask } from '@/api/luckyDraw.js' export default { data() { return { showYd: false, list: [], // 任务列表 luckDraw: null } }, onLoad(option) { if(option.id) { this.getTaskList(option.id) } this.luckDraw = this.$store.state.vuex_LuckDraw }, methods: { // 获取任务列表 getTaskList (id) { findCustomerTask({id:id}).then(res =>{ if(res.status == 200) { console.log(res) this.list = res.data } else { this.list = [] } }) }, showYdao(){ this.showYd = true }, toViewZn(){ uni.redirectTo({ url: '/pages/userCenter/zhinan' }) }, // 做任务 toDoTask(taskCode){ doTask({luckyDrawNo:this.luckDraw.luckyDrawNo,taskCode:taskCode}).then(res => { if(res.status == 200){ uni.showToast({ icon: 'none', title: '分享成功' }) } }) } }, onShareAppMessage() { this.toDoTask('SHARE_FRIEND') return { title: '[乐色管家]年末活动来袭,幸福大转盘, 精彩好礼等你来抽!', path: '/pagesA/luckDraw/luckDraw', imageUrl:'/static/zpthumbr.jpg' } }, onShareTimeline() { this.toDoTask('SHARE_FRIEND') return { title: '[乐色管家]年末活动来袭,幸福大转盘, 精彩好礼等你来抽!', imageUrl:'/static/zpthumbr.jpg' } } } </script> <style lang="less"> .content{ width: 100%; padding: 0; // 弹框提示 .lottery-content{ display: flex; justify-content: center; height: 100%; position: relative; background: url(../../static/lottery_winbg1.png) no-repeat center top; background-size: 100% auto; .lottery-confrim-btn{ width: 100%; display: flex; justify-content: center; position: absolute; bottom: 0; left: 0; color: #21d5c0; font-size: 32rpx; border-top: 1px solid #eee; padding: 30rpx 0; } .lottery-title{ padding: 100rpx 50rpx; display: flex; text-align: center; image{ width: 450rpx; height: 320rpx; } } } } .task-list{ display: flex; align-items: center; padding: 20rpx 40rpx; border-bottom: 1px solid #eee; background-color: #FFFFFF; .task-l{ width: 80%; display: flex; align-items: center; .task-l-info{ flex-grow: 1; padding: 0 15rpx; .task-l-title{ font-weight: bold; } .task-l-desc{ display: flex; align-items: center; font-size: 24rpx; color: #666; margin-top: 5rpx; } } } .task-r{ width: 20%; } } </style>