You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 lines
4.1 KiB
170 lines
4.1 KiB
<template>
|
|
<view class="new-user-page">
|
|
<!-- 背景图片 -->
|
|
<image class="bg-image"
|
|
src="https://image.hhlm1688.com/2025/08/08168577fd3c2c428785038ee249736e54Rectangle 9031@3x.png"
|
|
mode="aspectFill" />
|
|
|
|
<!-- 顶部标题图片 -->
|
|
<image class="title-image" src="https://image.hhlm1688.com/2025/08/07767f2fc0a686433bb9e3f90bc6e60990Group%201000001612@3x.png"
|
|
mode="widthFix" />
|
|
|
|
<!-- 优惠券内容图片 -->
|
|
<image class="coupon-content-image"
|
|
:src="NewUserCoupon.couponPoster || image" mode="widthFix" />
|
|
|
|
<!-- 立即领取/立即使用按钮 -->
|
|
<view class="receive-btn" @click="handleButtonClick">
|
|
{{ isReceived ? '立即使用' : '立即领取' }}
|
|
</view>
|
|
|
|
<!-- 下单方式选择弹窗 -->
|
|
<order-type-select-popup ref="orderTypeSelectPopup" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getToken } from '@/utils/auth'
|
|
import OrderTypeSelectPopup from '@/pages_order/components/OrderTypeSelectPopup.vue'
|
|
import { mapState } from 'vuex'
|
|
import { receiveCoupon } from "@/api/system/user"
|
|
|
|
export default {
|
|
name: 'NewUserCouponPage',
|
|
components: {
|
|
OrderTypeSelectPopup
|
|
},
|
|
data() {
|
|
return {
|
|
isReceived: false, // 优惠券是否已领取
|
|
image : '',
|
|
}
|
|
},
|
|
computed : {
|
|
...mapState(['NewUserCoupon']),
|
|
},
|
|
methods: {
|
|
// 处理按钮点击
|
|
handleButtonClick() {
|
|
if (this.isReceived) {
|
|
// 已领取，点击立即使用，打开选择下单方式弹窗
|
|
this.openOrderTypePopup()
|
|
} else {
|
|
// 未领取，点击立即领取
|
|
this.receiveCoupon()
|
|
}
|
|
},
|
|
|
|
// 领取优惠券
|
|
receiveCoupon() {
|
|
let data = {
|
|
stockId: this.NewUserCoupon.id,
|
|
}
|
|
receiveCoupon(data).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '领取成功！',
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
// 更新状态为已领取
|
|
this.isReceived = true
|
|
}
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: '领取优惠券失败',
|
|
icon: 'none'
|
|
})
|
|
})
|
|
},
|
|
|
|
// 打开下单方式选择弹窗
|
|
openOrderTypePopup() {
|
|
this.$refs.orderTypeSelectPopup.open()
|
|
},
|
|
|
|
// 暂不领取
|
|
skipReceive() {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.new-user-page {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bg-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.title-image {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 280rpx;
|
|
margin-bottom: 40rpx;
|
|
margin-top: -200rpx;
|
|
}
|
|
|
|
.coupon-content-image {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 600rpx;
|
|
margin-bottom: 80rpx;
|
|
}
|
|
|
|
.receive-btn {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 600rpx;
|
|
height: 80rpx;
|
|
background: linear-gradient(135deg, #FFB13F 0%, #FF8C00 100%);
|
|
color: #FFFFFF;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 8rpx 20rpx rgba(255, 177, 63, 0.4);
|
|
margin-bottom: 40rpx;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
transition: transform 0.1s;
|
|
}
|
|
}
|
|
|
|
.skip-btn {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 200rpx;
|
|
height: 60rpx;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
color: #666;
|
|
font-size: 28rpx;
|
|
border-radius: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&:active {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
transition: background 0.1s;
|
|
}
|
|
}
|
|
</style>
|