|
|
@@ -1,9 +1,10 @@
|
|
|
<script lang="ts" setup>
|
|
|
import couponBg from '@img/index/coupon-bg.png'
|
|
|
import indexBg from '@img/index/index-bg.png'
|
|
|
-import { pathToBase64 } from 'image-tools'
|
|
|
+import { useRequest } from 'alova/client'
|
|
|
import { storeToRefs } from 'pinia'
|
|
|
import { ref, watch } from 'vue'
|
|
|
+import { getAccountCount, getCouponSituation } from '@/api/home'
|
|
|
import DiscountCoupon from '@/components/discountCoupon.vue'
|
|
|
import SpendAndSaveCoupon from '@/components/spendAndSaveCoupon.vue'
|
|
|
import { useCouponStore } from '@/store/coupon'
|
|
|
@@ -22,38 +23,41 @@ definePage({
|
|
|
navigationBarTitleText: '首页',
|
|
|
},
|
|
|
})
|
|
|
-const couponBgBase64 = ref(couponBg)
|
|
|
-const indexBgBase64 = ref(indexBg)
|
|
|
-const isLogin = ref(false)
|
|
|
|
|
|
const tokenStore = useTokenStore()
|
|
|
const { hasLogin } = storeToRefs(tokenStore)
|
|
|
|
|
|
// 获取优惠券
|
|
|
const couponStore = useCouponStore()
|
|
|
+const { couponList, discountVoucherList } = storeToRefs(couponStore)
|
|
|
|
|
|
-// 将图片路径转换为base64格式
|
|
|
-async function convertImageToBase64() {
|
|
|
- try {
|
|
|
- // 转换首页背景图
|
|
|
- indexBgBase64.value = await pathToBase64(indexBg)
|
|
|
-
|
|
|
- // 转换优惠券背景图
|
|
|
- couponBgBase64.value = await pathToBase64(couponBg)
|
|
|
+// 获取首页收益
|
|
|
+const { send: getAccountCountRequest, data: accountCountData } = useRequest(getAccountCount, {
|
|
|
+ immediate: false,
|
|
|
+})
|
|
|
|
|
|
- console.log('图片转换base64成功')
|
|
|
- }
|
|
|
- catch (error) {
|
|
|
- console.error('图片转换base64失败:', error)
|
|
|
- }
|
|
|
-}
|
|
|
+// 获取首页领券情况数据
|
|
|
+const { send: getCouponSituationRequest, data: couponSituationData } = useRequest(getCouponSituation, {
|
|
|
+ immediate: false,
|
|
|
+})
|
|
|
|
|
|
onLoad(async () => {
|
|
|
- await convertImageToBase64()
|
|
|
// 获取优惠券
|
|
|
couponStore.getCouponListByType()
|
|
|
})
|
|
|
|
|
|
+onShow(() => {
|
|
|
+ // 登录后查询收益数据
|
|
|
+ if (hasLogin) {
|
|
|
+ getAccountCountRequest()
|
|
|
+ getCouponSituationRequest()
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+watch(() => couponSituationData, (newVal) => {
|
|
|
+ console.log('首页领券情况数据:', newVal)
|
|
|
+})
|
|
|
+
|
|
|
// #ifdef MP-WEIXIN
|
|
|
async function login() {
|
|
|
const currentPage = getCurrentPages()[0]
|
|
|
@@ -82,24 +86,25 @@ getNavigationBarHeight()
|
|
|
<template>
|
|
|
<view class="home-container">
|
|
|
<!-- 顶部区域 -->
|
|
|
- <view class="home-header" :style="{ backgroundImage: `url('${indexBgBase64}')` }">
|
|
|
+ <view class="home-header">
|
|
|
+ <image class="home-header-bg" :src="indexBg" mode="aspectFill" />
|
|
|
+ <view class="absolute left-5 z-3 text-xl c-white" :style="{ top: `${navigationBarHeight - 39}px` }">
|
|
|
+ 券中心
|
|
|
+ </view>
|
|
|
<view class="home-header-avatar-info" :style="{ paddingTop: `${navigationBarHeight + 10}px` }">
|
|
|
- <view class="absolute left-5 z-1 text-xl c-white" :style="{ top: `${navigationBarHeight - 39}px` }">
|
|
|
- 券中心
|
|
|
- </view>
|
|
|
<view class="home-header-balance">
|
|
|
我的收益(元)
|
|
|
</view>
|
|
|
<view class="home-header-balance-num">
|
|
|
<view class="home-header-balance-num-amount">
|
|
|
- 7297491.08
|
|
|
+ {{ accountCountData.balance || 0 }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="home-header-tips">
|
|
|
<view class="home-header-tips-item">
|
|
|
<view class="home-header-tips-item-num">
|
|
|
- 115张
|
|
|
+ {{ couponSituationData?.usedQuantity || 0 }}张
|
|
|
</view>
|
|
|
<view class="home-header-tips-item-des">
|
|
|
已核销
|
|
|
@@ -107,7 +112,7 @@ getNavigationBarHeight()
|
|
|
</view>
|
|
|
<view class="home-header-tips-item">
|
|
|
<view class="home-header-tips-item-num">
|
|
|
- 68张
|
|
|
+ {{ couponSituationData?.quantityToBeUsed || 0 }}张
|
|
|
</view>
|
|
|
<view class="home-header-tips-item-des">
|
|
|
未核销
|
|
|
@@ -115,7 +120,7 @@ getNavigationBarHeight()
|
|
|
</view>
|
|
|
<view class="home-header-tips-item">
|
|
|
<view class="home-header-tips-item-num">
|
|
|
- 68张
|
|
|
+ {{ couponSituationData?.quantityForComplimentary || 0 }}张
|
|
|
</view>
|
|
|
<view class="home-header-tips-item-des">
|
|
|
已发放
|
|
|
@@ -130,7 +135,8 @@ getNavigationBarHeight()
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 满减券 -->
|
|
|
- <view class="home-header-coupon" :style="{ backgroundImage: `url('${couponBgBase64}')` }">
|
|
|
+ <view class="home-header-coupon">
|
|
|
+ <image class="home-header-coupon-bg" :src="couponBg" mode="aspectFill" />
|
|
|
<view class="home-header-coupon-title">
|
|
|
<image class="home-header-coupon-title-icon" src="@img/index/icon1.png" mode="scaleToFill" />
|
|
|
<view class="home-header-coupon-title-text">
|
|
|
@@ -141,9 +147,9 @@ getNavigationBarHeight()
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="home-header-coupon-content">
|
|
|
- <spend-and-save-coupon />
|
|
|
- <spend-and-save-coupon />
|
|
|
- <spend-and-save-coupon />
|
|
|
+ <template v-for="item in discountVoucherList" :key="item.id">
|
|
|
+ <spend-and-save-coupon :coupon="item" />
|
|
|
+ </template>
|
|
|
</view>
|
|
|
<view class="home-header-coupon-btn">
|
|
|
<up-button class="home-header-coupon-btn-text" text="查看更多优惠券"
|
|
|
@@ -168,9 +174,9 @@ getNavigationBarHeight()
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="home-coupon-content">
|
|
|
- <discount-coupon />
|
|
|
- <discount-coupon />
|
|
|
- <discount-coupon />
|
|
|
+ <template v-for="item in couponList" :key="item.id">
|
|
|
+ <discount-coupon :coupon="item" />
|
|
|
+ </template>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -178,19 +184,25 @@ getNavigationBarHeight()
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.home-container {
|
|
|
- font-family: Alibaba PuHuiTi;
|
|
|
- min-height: 100vh;
|
|
|
background-color: #f5f5f5;
|
|
|
line-height: 1;
|
|
|
position: relative;
|
|
|
|
|
|
.home-header {
|
|
|
height: 550rpx;
|
|
|
- // background-image: url('@img/index/index-bg.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: -80px top;
|
|
|
- background-size: 125% 200%;
|
|
|
- box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .home-header-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 125%;
|
|
|
+ height: 200%;
|
|
|
+ object-fit: cover;
|
|
|
+ transform: translate(-80px, 0);
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
|
|
|
.home-header-avatar-info {
|
|
|
display: flex;
|
|
|
@@ -199,6 +211,8 @@ getNavigationBarHeight()
|
|
|
text-align: center;
|
|
|
gap: 30rpx;
|
|
|
padding: 0 24rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
|
|
|
.home-header-balance {
|
|
|
font-weight: 400;
|
|
|
@@ -245,9 +259,10 @@ getNavigationBarHeight()
|
|
|
.home-header-tips {
|
|
|
height: 124rpx;
|
|
|
display: flex;
|
|
|
- // background: linear-gradient(114deg, #f67873, #fb847f, #f67873);
|
|
|
border-radius: 10rpx;
|
|
|
margin: 47rpx 24rpx 0 24rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
|
|
|
.home-header-tips-item {
|
|
|
flex: 1;
|
|
|
@@ -298,6 +313,7 @@ getNavigationBarHeight()
|
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
|
backdrop-filter: blur(25rpx);
|
|
|
-webkit-backdrop-filter: blur(25rpx);
|
|
|
+ z-index: 2;
|
|
|
|
|
|
.home-hidden-img {
|
|
|
width: 209rpx;
|
|
|
@@ -317,17 +333,27 @@ getNavigationBarHeight()
|
|
|
// 优惠券
|
|
|
.home-header-coupon {
|
|
|
position: relative;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: right top;
|
|
|
- background-size: 100% auto;
|
|
|
height: 419rpx;
|
|
|
- margin: -75rpx 20rpx 20rpx 20rpx;
|
|
|
+ margin: -58rpx 20rpx 20rpx 20rpx;
|
|
|
gap: 20rpx;
|
|
|
padding: 28rpx 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ z-index: 3;
|
|
|
+
|
|
|
+ .home-header-coupon-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
|
|
|
.home-header-coupon-title {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
|
|
|
.home-header-coupon-title-icon {
|
|
|
width: 38rpx;
|
|
|
@@ -358,10 +384,14 @@ getNavigationBarHeight()
|
|
|
flex-direction: row;
|
|
|
align-items: flex-end;
|
|
|
gap: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
}
|
|
|
|
|
|
.home-header-coupon-btn {
|
|
|
padding: 21rpx 70rpx 22px 69rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
|
|
|
.home-header-coupon-btn-text {
|
|
|
box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(230, 77, 13, 0.17);
|