mkm/new_shop_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
new_shop_app/pages/newActivity/invitation/invitation.vue

385 lines
12 KiB
Vue
Raw Normal View History

新增老商城部分功能
2024-02-26 13:35:08 +08:00
<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>
Reference in New Issue Copy Permalink