|
|
@@ -0,0 +1,429 @@
|
|
|
+<template>
|
|
|
+ <view class="get-page">
|
|
|
+ <!-- Background -->
|
|
|
+ <image src="/packet/static/get/bg.png" class="bg-image" mode="widthFix"></image>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <view class="content-wrapper">
|
|
|
+ <!-- Header -->
|
|
|
+ <view class="header-section">
|
|
|
+ <image src="/packet/static/get/text.png" class="header-logo" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- White Card -->
|
|
|
+ <view class="white-card">
|
|
|
+ <!-- Top Amount Row -->
|
|
|
+ <view class="top-amount-row">
|
|
|
+ <text class="received-text">¥{{ redBagData.redPrice || 0 }} 红包已到账</text>
|
|
|
+ <view class="use-btn-wrapper">
|
|
|
+ <text class="use-btn-text">点击使用</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- Promo Box -->
|
|
|
+ <view class="promo-box">
|
|
|
+ <image src="/packet/static/get/inner-box.png" class="inner-box-bg" mode="widthFix"></image>
|
|
|
+ <view class="promo-content">
|
|
|
+ <view class="promo-header">
|
|
|
+ <text class="promo-amount"><text style="font-size: 30rpx;">¥</text>{{
|
|
|
+ redBagData.shareSumPrice }}</text>
|
|
|
+ </view>
|
|
|
+ <text class="promo-desc">好友助力解锁更高金额</text>
|
|
|
+ <text class="promo-detail">每邀请 1 位好友最高:你得<text class="highlight-red">¥{{
|
|
|
+ redBagData.shareGetPrice }}红包</text>,好友得<text class="highlight-red">¥{{
|
|
|
+ redBagData.shareDGetPrice }}</text>红包</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- Invite Button -->
|
|
|
+ <view class="invite-btn-wrapper">
|
|
|
+ <text class="invite-btn-text">立即邀请</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- Red Packet Cards -->
|
|
|
+ <view class="red-packets-section">
|
|
|
+ <view class="packet-card" v-for="(item, index) in 3" :key="index">
|
|
|
+ <text class="packet-text">邀请好友</text>
|
|
|
+ <text class="packet-text">双方得红包</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- Progress Bar -->
|
|
|
+ <view class="progress-section">
|
|
|
+ <view class="progress-bar-bg">
|
|
|
+ <view class="progress-bar-fill" :style="{ width: progressWidth + '%' }"></view>
|
|
|
+ <image src="/packet/static/get/circle.png" class="progress-dot" :style="{ left: progressWidth + '%' }" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <text class="progress-text">已邀请{{ redBagData.shareNum || 0 }}人,已领{{ redBagData.shareGetNum || 0
|
|
|
+ }}元,最高还可得¥{{ maxGetPrice }} 元</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- Continue Scan Button -->
|
|
|
+ <view class="scan-btn-wrapper">
|
|
|
+ <text class="scan-btn-text">继续扫码</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- Bottom Text -->
|
|
|
+ <text class="bottom-text">好友助力成功后,奖励实时到账</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ bianhao: '', // 红包编号
|
|
|
+ redBagData: null, // 红包数据
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 计算进度条宽度
|
|
|
+ progressWidth() {
|
|
|
+ return this.redBagData ? (this.redBagData.shareGetNum / (this.redBagData.shareSumPrice) * 100) : 0;
|
|
|
+ },
|
|
|
+ //最高还可得 redBagData.shareSumPrice - redBagData.shareGetNum 元
|
|
|
+ maxGetPrice() {
|
|
|
+ return this.redBagData ? this.redBagData.shareSumPrice - this.redBagData.shareGetNum : 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ // 从领取页面跳转过来时,获取编号参数
|
|
|
+ if (options.bianhao) {
|
|
|
+ this.bianhao = options.bianhao;
|
|
|
+ // 调用获取红包接口
|
|
|
+ this.getRedBagDetail();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取红包详情
|
|
|
+ async getRedBagDetail() {
|
|
|
+ if (!this.bianhao) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '红包编号缺失',
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await this.$u.api.getRedBagAjax(this.bianhao);
|
|
|
+ if (res.code === 200 || res.code === 0) {
|
|
|
+ this.redBagData = res.data;
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg || '获取红包信息失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('获取红包详情失败:', e);
|
|
|
+ uni.showToast({
|
|
|
+ title: '网络错误',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleUse() {
|
|
|
+ // 使用红包逻辑
|
|
|
+ uni.showToast({
|
|
|
+ title: '即将跳转到使用页面',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleInvite() {
|
|
|
+ // 邀请好友逻辑
|
|
|
+ if (this.redBagData && this.redBagData.shareRedLink) {
|
|
|
+ // 分享红包链接
|
|
|
+ uni.showModal({
|
|
|
+ title: '分享红包',
|
|
|
+ content: '请复制链接分享给好友:' + this.redBagData.shareRedLink,
|
|
|
+ confirmText: '复制链接',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: this.redBagData.shareRedLink
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '暂无分享链接',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleScan() {
|
|
|
+ // 继续扫码逻辑
|
|
|
+ uni.scanCode({
|
|
|
+ success: (scanRes) => {
|
|
|
+ // 扫描到新红包,跳转到 index 页面
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/packet/pages/index?bianhao=' + scanRes.result
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.get-page {
|
|
|
+ height: 100vh;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .bg-image {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-wrapper {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+ padding: 40rpx 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .header-section {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+
|
|
|
+ .header-logo {
|
|
|
+ width: 80%;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-title {
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1a1a1a;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .white-card {
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 40rpx 30rpx;
|
|
|
+ background: url('/packet/static/get/frame.png') no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-top: 110rpx;
|
|
|
+
|
|
|
+ .top-amount-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 10rpx 60rpx 30rpx 60rpx;
|
|
|
+
|
|
|
+ .received-text {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .use-btn-wrapper {
|
|
|
+ position: relative;
|
|
|
+ width: 160rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ background: url('/packet/static/get/use-button.png') no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ border-radius: 25rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 20rpx;
|
|
|
+
|
|
|
+ .use-btn-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .use-btn-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .promo-box {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ padding: 0 10rpx;
|
|
|
+
|
|
|
+ .inner-box-bg {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .promo-content {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .promo-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .promo-amount {
|
|
|
+ font-size: 64rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .promo-desc {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .promo-detail {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.5;
|
|
|
+
|
|
|
+ .highlight-red {
|
|
|
+ color: #ff4444;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .invite-btn-wrapper {
|
|
|
+ position: relative;
|
|
|
+ width: 300rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ margin: 0 auto 40rpx;
|
|
|
+ background: url('/packet/static/get/button1.png') no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .invite-btn-text {
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-size: 42rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .red-packets-section {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 20rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ .packet-card {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ background: url('/packet/static/get/red-packet.png') no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 184rpx;
|
|
|
+ max-width: 194rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 24rpx;
|
|
|
+
|
|
|
+ .packet-text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #003C14;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-section {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ .progress-bar-bg {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 15rpx;
|
|
|
+ background: #BDFAAD;
|
|
|
+ border-radius: 6rpx;
|
|
|
+
|
|
|
+ .progress-bar-fill {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(90deg, #4CAF50, #8BC34A);
|
|
|
+ border-radius: 6rpx;
|
|
|
+ transition: width 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-dot {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateX(-50%) translateY(-50%);
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-text {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-btn-wrapper {
|
|
|
+ position: relative;
|
|
|
+ width: 300rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ margin: 0 auto 30rpx;
|
|
|
+ background: url('/packet/static/get/button1.png') no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .scan-btn-text {
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-size: 42rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-text {
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-size: 38rpx;
|
|
|
+ color: #003C14;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-left: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|