385 lines
12 KiB
Vue
385 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<view class="bg">
|
||
<image class="bg_img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/invitation.webp"></image>
|
||
<image @click="back" class="bg_back" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/back.png"></image>
|
||
<view class="bg_body">
|
||
<view class="b_qr">
|
||
<view class="qr_body">
|
||
<view class="qr_code">
|
||
<image :src="qr_img"></image>
|
||
</view>
|
||
<view class="qr_text">扫一扫，红包正在路上</view>
|
||
<view class="qr_tips">温馨提示：邀请新用户才有机会获得红包哦</view>
|
||
</view>
|
||
</view>
|
||
<view class="b_user">
|
||
<view class="users">
|
||
<image v-for="(item, index) in info.user_info" :key="item.uid" class="avatar" :src="item.avatar||'/static/images/f.png'"></image>
|
||
<block v-if="info.user_info.length<4">
|
||
<view v-for="item in 4-info.user_info.length" :key="item+'n'" class="avatar_no">
|
||
<u-icon name="plus" color="#fff" size="40rpx"></u-icon>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class="u_tips">邀请新用户消费达目标金额，有机会领取红包哦~</view>
|
||
<view class="u_btn">
|
||
<image v-if="status==0" class="btn_image" @click="open" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/ibtn1.webp"></image>
|
||
<image v-if="status==1" class="btn_image" @click="open" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/ibtn2.webp"></image>
|
||
<image v-if="status==2" class="btn_image" @click="opened" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/ibtn3.webp"></image>
|
||
</view>
|
||
<uni-popup ref="redPacket">
|
||
<view class="red_packet">
|
||
<block v-if="status==0">
|
||
<view class="packet_img">
|
||
<image class="img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/red_packet1.webp"></image>
|
||
<view class="p_text">
|
||
<view class="big">抱歉！</view>
|
||
<view class="smoll">有好友消费未达目标金额</view>
|
||
<view class="smoll">无法领红包哦~</view>
|
||
</view>
|
||
</view>
|
||
<image @click="close()" class="close_img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/close.png"></image>
|
||
</block>
|
||
<block v-if="status==1">
|
||
<view class="packet_img" @click="openRedPacket()">
|
||
<image class="img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/red_packet2.webp"></image>
|
||
<view class="p_text">
|
||
<view class="big">恭喜！</view>
|
||
<view class="smoll">成功获得实物通用红包</view>
|
||
<view class="smoll">赶快打开吧~</view>
|
||
</view>
|
||
</view>
|
||
<image @click="close()" class="close_img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/close.png"></image>
|
||
</block>
|
||
<block v-if="status==2">
|
||
<view class="packet_img">
|
||
<image class="img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/red_packet3.webp"></image>
|
||
<view class="p_text" style="bottom: 60rpx;">
|
||
<view class="smoll">恭喜你！成功获得</view>
|
||
<view class="smoll red_count"><text class="count">{{red_packet.amount}}</text>元</view>
|
||
<view class="big2">购买指定商品可直接抵扣使用</view>
|
||
<view class="smoll">{{red_packet.end_time}}过期</view>
|
||
<image @click="close()" class="btn_img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/put.webp"></image>
|
||
</view>
|
||
</view>
|
||
<image @click="close()" class="close_img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/close.png"></image>
|
||
</block>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
<view class="b_in_list">
|
||
<image class="body_head_img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/irecoed.webp"></image>
|
||
<view class="b_head">
|
||
<view style="width: 120rpx;"></view>
|
||
<view class="head_title" style="width: 200rpx;">名称</view>
|
||
<view class="head_title" style="width: 130rpx;">ID</view>
|
||
<view class="head_title" style="width: 120rpx;">目标金额</view>
|
||
<view class="head_title" style="width: 120rpx;">状态</view>
|
||
</view>
|
||
<view class="b_content">
|
||
<view class="content_list" v-for="(item, index) in info.user_info" :key="item.uid">
|
||
<image class="avatar" :src="item.avatar||'/static/images/f.png'"></image>
|
||
<view class="content_item" style="width: 180rpx;margin: 0 10rpx;">{{item.nickname}}</view>
|
||
<view class="content_item" style="width: 130rpx;">{{item.uid}}</view>
|
||
<view class="content_item" style="width: 120rpx;">{{item.target_amount}}<text class="mall">元</text></view>
|
||
<view class="content_item" style="width: 120rpx;">
|
||
<text v-if="item.is_finish" style="color: #18CE61;">已完成</text>
|
||
<text v-else style="color: #FA5A29;">未完成</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="mall none">暂无记录</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { storeActivityStatus, storeActivityReceive, storeActivityQrcode } from "@/api/activity.js"
|
||
import { Toast } from "../../../libs/uniApi";
|
||
import { getUserInfo } from '@/api/user.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
info: {
|
||
user_info: []
|
||
},
|
||
red_packet: {
|
||
amount: '0.00',
|
||
end_time: ''
|
||
},
|
||
status: 0, //0不可开， 1可开， 2已开
|
||
qr_img: ''
|
||
}
|
||
},
|
||
onLoad() {},
|
||
onShow() {
|
||
this.storeActivityQrcode();
|
||
this.loadInfo();
|
||
},
|
||
methods: {
|
||
back(){
|
||
uni.navigateBack()
|
||
},
|
||
loadInfo(){
|
||
storeActivityStatus().then(res=>{
|
||
this.info = res.data;
|
||
if(res.data.allow_receive) this.status = 1;
|
||
})
|
||
},
|
||
opened(){
|
||
Toast('已经领取过啦!');
|
||
},
|
||
open(){
|
||
this.$refs.redPacket.open();
|
||
},
|
||
close(){
|
||
this.$refs.redPacket.close();
|
||
},
|
||
storeActivityQrcode(){
|
||
storeActivityQrcode().then(res=>{
|
||
this.qr_img = res.data.url;
|
||
})
|
||
},
|
||
// 打开红包
|
||
async openRedPacket(){
|
||
this.$refs.redPacket.close();
|
||
try{
|
||
let {data} = await storeActivityReceive();
|
||
this.$nextTick(()=>{
|
||
this.red_packet = data;
|
||
this.$u.sleep(800).then(()=>{
|
||
this.status = 2;
|
||
this.$u.sleep(100).then(()=>{
|
||
this.open();
|
||
})
|
||
})
|
||
})
|
||
}catch(e){
|
||
Toast(e)
|
||
}
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
uni.stopPullDownRefresh()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
background-color: #ff864d;
|
||
}
|
||
.bg{
|
||
position: relative;
|
||
height: auto;
|
||
.bg_img{
|
||
width: 750rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.bg_back{
|
||
height: 34rpx;
|
||
width: 20rpx;
|
||
position: absolute;
|
||
top: calc(var(--status-bar-height) + 30rpx);
|
||
left: 30rpx;
|
||
}
|
||
.bg_body{
|
||
position: absolute;
|
||
top: 414rpx;
|
||
left: 0;
|
||
.b_qr{
|
||
width: 710rpx;
|
||
height: 750rpx;
|
||
margin: 0 20rpx;
|
||
// background: linear-gradient(to top, #FFE3AE 0%, #FFF6EB 100%);
|
||
background: #FFF6EB;
|
||
border-radius: 50rpx;
|
||
padding: 20rpx;
|
||
.qr_body{
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 5rpx solid #ffd588;
|
||
border-radius: 50rpx;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
flex-direction: column;
|
||
.qr_code{
|
||
width: 510rpx;
|
||
height: 510rpx;
|
||
// background-color: #f8962e;
|
||
margin: 0 auto;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.qr_text{
|
||
font-size: 36rpx;
|
||
color: #C44100;
|
||
font-weight: 500;
|
||
}
|
||
.qr_tips{
|
||
font-size: 26rpx;
|
||
color: #C44100;
|
||
}
|
||
}
|
||
}
|
||
.b_user{
|
||
margin-top: 30rpx;
|
||
.users{
|
||
display: flex;
|
||
justify-content: center;
|
||
.avatar{
|
||
height: 100rpx;
|
||
width: 100rpx;
|
||
border-radius: 50%;
|
||
margin: 15rpx;
|
||
}
|
||
.avatar_no{
|
||
height: 100rpx;
|
||
width: 100rpx;
|
||
font-weight: 200;
|
||
border-radius: 50%;
|
||
border: 2rpx dashed #fff;
|
||
margin: 15rpx;
|
||
background-color: rgba(#fff, 0.3);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.u_tips{
|
||
color: #FFE5B3;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
}
|
||
.u_btn{
|
||
margin-top: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
.btn_image{
|
||
width: 403rpx;
|
||
height: 113rpx;
|
||
}
|
||
}
|
||
.red_packet{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.packet_img{
|
||
width: 750rpx;
|
||
position: relative;
|
||
.img{
|
||
width: 100%;
|
||
}
|
||
.p_text{
|
||
position: absolute;
|
||
bottom: 120rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #fff;
|
||
.big{
|
||
font-size: 38rpx;
|
||
font-weight: 500;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.smoll{
|
||
font-size: 28rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.big2{
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.btn_img{
|
||
width: 310rpx;
|
||
}
|
||
.red_count{
|
||
margin-top: 80rpx;
|
||
margin-bottom: 40rpx;
|
||
.count{
|
||
font-size: 80rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.close_img{
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
.b_in_list{
|
||
width: 710rpx;
|
||
margin: 0 20rpx;
|
||
height: auto;
|
||
background-color: #fff;
|
||
|
||
border-radius: 50rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-content: center;
|
||
.body_head_img{
|
||
width: 253rpx;
|
||
margin: 0 auto;
|
||
}
|
||
.b_head{
|
||
background-color: #fff2ed;
|
||
border-radius: 20rpx;
|
||
color: #854116;
|
||
display: flex;
|
||
margin-top: 28rpx;
|
||
text-align: center;
|
||
.head_title{
|
||
width: 150rpx;
|
||
padding: 20rpx 0;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.b_content{
|
||
.mall{
|
||
font-size: 26rpx;
|
||
}
|
||
.content_list{
|
||
background-color: #FFF6E9;
|
||
border-radius: 20rpx;
|
||
color: #C44100;
|
||
padding-top: 20rpx;
|
||
margin-top: 20rpx;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 20rpx;
|
||
text-align: center;
|
||
.content_item{
|
||
overflow: hidden;
|
||
}
|
||
.avatar{
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
.none{
|
||
text-align: center;
|
||
padding: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
</style>
|