|
|
@@ -58,344 +58,338 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { silentLogin } from '@/api/auth'
|
|
|
-
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- amount: '1.58',
|
|
|
- bianhao: '', // 红包编号
|
|
|
- redBagData: null // 红包数据
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
- let bianhao = options.bianhao;
|
|
|
-
|
|
|
- // 兼容扫码进入场景，当前页的 scene 里带了 bianhao
|
|
|
- if (!bianhao && options.scene) {
|
|
|
- const decodeScene = decodeURIComponent(options.scene);
|
|
|
- const paramPairs = decodeScene.split('&');
|
|
|
- paramPairs.forEach((pair) => {
|
|
|
- const [key, value] = pair.split('=');
|
|
|
- if (key === 'bianhao') {
|
|
|
- bianhao = value;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 兼容从 App.vue 缓存中获取 (因为如果是扫小程序码直接进入这个页面，App.vue的onLaunch会先执行并存入缓存，然后执行页面的onLoad)
|
|
|
- if (!bianhao) {
|
|
|
- bianhao = uni.getStorageSync('scene_bianhao');
|
|
|
- }
|
|
|
-
|
|
|
- if (bianhao) {
|
|
|
- this.bianhao = bianhao;
|
|
|
- uni.removeStorageSync('scene_bianhao');
|
|
|
- // 调用扫码接口获取红包信息
|
|
|
- this.scanRedBag();
|
|
|
- }
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- // 如果是从其他页面返回，重新获取红包数据
|
|
|
- if (this.bianhao) {
|
|
|
- this.scanRedBag();
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 请求前确保 token 可用，避免扫码冷启动时出现 401
|
|
|
- async ensureTokenReady() {
|
|
|
- const token = uni.getStorageSync('token')
|
|
|
- if (token) return true
|
|
|
- try {
|
|
|
- await silentLogin()
|
|
|
- return !!uni.getStorageSync('token')
|
|
|
- } catch (e) {
|
|
|
- return false
|
|
|
+ import { silentLogin } from '@/api/auth'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ amount: '1.58',
|
|
|
+ bianhao: '', // 红包编号
|
|
|
+ redBagData: null // 红包数据
|
|
|
}
|
|
|
},
|
|
|
- // 扫码获取红包信息
|
|
|
- async scanRedBag() {
|
|
|
- if (!this.bianhao) {
|
|
|
- // 如果没有编号，提示用户扫码
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '请扫描红包二维码',
|
|
|
- showCancel: false
|
|
|
+ onLoad(options) {
|
|
|
+ let bianhao = options.bianhao;
|
|
|
+
|
|
|
+ // 兼容扫码进入场景，当前页的 scene 里带了 bianhao
|
|
|
+ if (!bianhao && options.scene) {
|
|
|
+ const decodeScene = decodeURIComponent(options.scene);
|
|
|
+ const paramPairs = decodeScene.split('&');
|
|
|
+ paramPairs.forEach((pair) => {
|
|
|
+ const [key, value] = pair.split('=');
|
|
|
+ if (key === 'bianhao') {
|
|
|
+ bianhao = value;
|
|
|
+ }
|
|
|
});
|
|
|
- return;
|
|
|
}
|
|
|
|
|
|
- const loginReady = await this.ensureTokenReady()
|
|
|
- if (!loginReady) {
|
|
|
- uni.showToast({
|
|
|
- title: '登录状态失效，请稍后重试',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return;
|
|
|
+ // 兼容从 App.vue 缓存中获取 (因为如果是扫小程序码直接进入这个页面，App.vue的onLaunch会先执行并存入缓存，然后执行页面的onLoad)
|
|
|
+ if (!bianhao) {
|
|
|
+ bianhao = uni.getStorageSync('scene_bianhao');
|
|
|
}
|
|
|
|
|
|
- try {
|
|
|
- const res = await this.$u.api.scanRedBagAjax(this.bianhao);
|
|
|
- if (res.code === 200 || res.code === 0) {
|
|
|
- this.redBagData = res.data;
|
|
|
- this.amount = res.data.redPrice;
|
|
|
- } else {
|
|
|
+ if (bianhao) {
|
|
|
+ this.bianhao = bianhao;
|
|
|
+ uni.removeStorageSync('scene_bianhao');
|
|
|
+ // 调用扫码接口获取红包信息
|
|
|
+ this.scanRedBag();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ // 如果是从其他页面返回，重新获取红包数据
|
|
|
+ if (this.bianhao) {
|
|
|
+ this.scanRedBag();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 请求前确保 token 可用，避免扫码冷启动时出现 401
|
|
|
+ async ensureTokenReady() {
|
|
|
+ const token = uni.getStorageSync('token')
|
|
|
+ if (token) return true
|
|
|
+ try {
|
|
|
+ await silentLogin()
|
|
|
+ return !!uni.getStorageSync('token')
|
|
|
+ } catch (e) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 扫码获取红包信息
|
|
|
+ async scanRedBag() {
|
|
|
+ if (!this.bianhao) {
|
|
|
+ // 如果没有编号，提示用户扫码
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '请扫描红包二维码',
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const loginReady = await this.ensureTokenReady()
|
|
|
+ if (!loginReady) {
|
|
|
uni.showToast({
|
|
|
- title: res.msg || '获取红包信息失败',
|
|
|
+ title: '登录状态失效，请稍后重试',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
+ return;
|
|
|
}
|
|
|
- } catch (e) {
|
|
|
- console.error('扫码获取红包信息失败:', e);
|
|
|
- uni.showToast({
|
|
|
- title: '网络错误',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- // 领取红包
|
|
|
- async handleReceive() {
|
|
|
- // 如果已领取，提示用户
|
|
|
- if (this.redBagData && this.redBagData.drawStatus === 1) {
|
|
|
- uni.showToast({
|
|
|
- title: '红包已领取',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
|
|
|
- if (!this.bianhao) {
|
|
|
- uni.showToast({
|
|
|
- title: '红包编号缺失',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
+ this.$u.api.scanRedBagAjax(this.bianhao).then(res => {
|
|
|
+ console.log('扫码获取红包信息成功:', res);
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.redBagData = res.data;
|
|
|
+ this.amount = res.data.redPrice;
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg || '获取红包信息失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 领取红包
|
|
|
+ async handleReceive() {
|
|
|
+ // 如果已领取，提示用户
|
|
|
+ if (this.redBagData && this.redBagData.drawStatus === 1) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '红包已领取',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- const loginReady = await this.ensureTokenReady()
|
|
|
- if (!loginReady) {
|
|
|
- uni.showToast({
|
|
|
- title: '登录状态失效，请稍后重试',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
+ if (!this.bianhao) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '红包编号缺失',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- // 显示领取中提示
|
|
|
- uni.showLoading({
|
|
|
- title: '领取中...'
|
|
|
- });
|
|
|
-
|
|
|
- try {
|
|
|
- const res = await this.$u.api.getRedBagAjax(this.bianhao);
|
|
|
- uni.hideLoading();
|
|
|
- if (res.code === 200) {
|
|
|
- // 更新红包数据
|
|
|
- this.redBagData = res.data;
|
|
|
+ const loginReady = await this.ensureTokenReady()
|
|
|
+ if (!loginReady) {
|
|
|
uni.showToast({
|
|
|
- title: '领取成功',
|
|
|
- icon: 'success'
|
|
|
+ title: '登录状态失效，请稍后重试',
|
|
|
+ icon: 'none'
|
|
|
});
|
|
|
- // 跳转到 get 页面，并传递红包数据
|
|
|
- setTimeout(() => {
|
|
|
- uni.redirectTo({
|
|
|
- url: '/packet/pages/get?bianhao=' + this.bianhao
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示领取中提示
|
|
|
+ uni.showLoading({
|
|
|
+ title: '领取中...'
|
|
|
+ });
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await this.$u.api.getRedBagAjax(this.bianhao);
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code === 200) {
|
|
|
+ // 更新红包数据
|
|
|
+ this.redBagData = res.data;
|
|
|
+ uni.showToast({
|
|
|
+ title: '领取成功',
|
|
|
+ icon: 'success'
|
|
|
+ });
|
|
|
+ // 跳转到 get 页面，并传递红包数据
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/packet/pages/get?bianhao=' + this.bianhao
|
|
|
+ });
|
|
|
+ }, 1500);
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg || '领取失败',
|
|
|
+ icon: 'none'
|
|
|
});
|
|
|
- }, 1500);
|
|
|
- } else {
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ uni.hideLoading();
|
|
|
+ console.error('领取红包失败:', e);
|
|
|
uni.showToast({
|
|
|
- title: res.msg || '领取失败',
|
|
|
+ title: '网络错误',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
- } catch (e) {
|
|
|
- uni.hideLoading();
|
|
|
- console.error('领取红包失败:', e);
|
|
|
- uni.showToast({
|
|
|
- title: '网络错误',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
+ },
|
|
|
+ handleShare() {
|
|
|
+ // Share logic
|
|
|
}
|
|
|
- },
|
|
|
- handleShare() {
|
|
|
- // Share logic
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.packet-page {
|
|
|
- height: 100vh;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .bg-image {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .content-wrapper {
|
|
|
+ .packet-page {
|
|
|
+ height: 100vh;
|
|
|
position: relative;
|
|
|
- z-index: 1;
|
|
|
- width: 100%;
|
|
|
- padding: 40rpx 30rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .headline-image {
|
|
|
- width: 80%;
|
|
|
- margin-left: 10%;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- margin-top: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .bg-image {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 0;
|
|
|
}
|
|
|
|
|
|
- .envelope-section {
|
|
|
+ .content-wrapper {
|
|
|
position: relative;
|
|
|
-
|
|
|
- .envelope-image {
|
|
|
- width: 90%;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+ padding: 40rpx 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .headline-image {
|
|
|
+ width: 80%;
|
|
|
+ margin-left: 10%;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
}
|
|
|
|
|
|
- .amount-wrapper {
|
|
|
- position: absolute;
|
|
|
- top: 12%;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .amount-display {
|
|
|
- display: flex;
|
|
|
- align-items: baseline;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .currency {
|
|
|
- font-size: 78rpx;
|
|
|
- color: #FF4444;
|
|
|
- font-weight: bold;
|
|
|
- margin-right: 4rpx;
|
|
|
- }
|
|
|
+ .envelope-section {
|
|
|
+ position: relative;
|
|
|
|
|
|
- .amount-value {
|
|
|
- font-size: 156rpx;
|
|
|
- color: #FF4444;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ .envelope-image {
|
|
|
+ width: 90%;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .receive-btn-wrapper {
|
|
|
- position: absolute;
|
|
|
- bottom: 15%;
|
|
|
- left: 52%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 84%;
|
|
|
+ .amount-wrapper {
|
|
|
+ position: absolute;
|
|
|
+ top: 12%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ text-align: center;
|
|
|
|
|
|
- .btn-image {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
+ .amount-display {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .currency {
|
|
|
+ font-size: 78rpx;
|
|
|
+ color: #FF4444;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount-value {
|
|
|
+ font-size: 156rpx;
|
|
|
+ color: #FF4444;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .btn-text {
|
|
|
+ .receive-btn-wrapper {
|
|
|
position: absolute;
|
|
|
- top: 45%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- font-size: 32rpx;
|
|
|
- color: #D73800;
|
|
|
- font-weight: 500;
|
|
|
- white-space: nowrap;
|
|
|
+ bottom: 15%;
|
|
|
+ left: 52%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 84%;
|
|
|
+
|
|
|
+ .btn-image {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-text {
|
|
|
+ position: absolute;
|
|
|
+ top: 45%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #D73800;
|
|
|
+ font-weight: 500;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .info-card-section {
|
|
|
- position: relative;
|
|
|
- margin-bottom: 20rpx;
|
|
|
+ .info-card-section {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
|
- .info-frame {
|
|
|
- width: 100%;
|
|
|
- display: block;
|
|
|
- }
|
|
|
+ .info-frame {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
|
|
|
- .info-content {
|
|
|
- position: absolute;
|
|
|
- top: 20%;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- padding: 30rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .info-list {
|
|
|
- padding: 0 20rpx;
|
|
|
-
|
|
|
- .info-item {
|
|
|
- font-family: Fotor_HelloFont_GongYiTi;
|
|
|
- font-size: 40rpx;
|
|
|
- color: #000000;
|
|
|
- line-height: 64rpx;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .spacer {
|
|
|
- flex: 1;
|
|
|
- margin: 0 16rpx;
|
|
|
- }
|
|
|
+ .info-content {
|
|
|
+ position: absolute;
|
|
|
+ top: 20%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .info-list {
|
|
|
+ padding: 0 20rpx;
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ font-family: Fotor_HelloFont_GongYiTi;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 64rpx;
|
|
|
+ text-align: center;
|
|
|
|
|
|
- .star {
|
|
|
- color: #FFB300;
|
|
|
- margin-left: 8rpx;
|
|
|
+ .spacer {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .star {
|
|
|
+ color: #FFB300;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .rule-footer {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin-top: 30rpx;
|
|
|
+ .rule-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 30rpx;
|
|
|
|
|
|
- .rule-text {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
- text-decoration: underline;
|
|
|
- }
|
|
|
-
|
|
|
- .share-btn-wrapper {
|
|
|
- position: absolute;
|
|
|
- bottom: 20rpx;
|
|
|
- right: 20rpx;
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
-
|
|
|
- .share-btn-image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ .rule-text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ text-decoration: underline;
|
|
|
}
|
|
|
|
|
|
- .share-text {
|
|
|
+ .share-btn-wrapper {
|
|
|
position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- font-size: 22rpx;
|
|
|
- color: #fff;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
- line-height: 1.3;
|
|
|
+ bottom: 20rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+
|
|
|
+ .share-btn-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-text {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1.3;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
