feat：0820需求
This commit is contained in:
@@ -0,0 +1,488 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 顶部状态栏安全高度 -->
|
||||
<TopSafe bgColor="#ffffff"></TopSafe>
|
||||
|
||||
<!-- 1. 自定义导航栏：左侧返回箭头，中间“适用商品”标题 -->
|
||||
<view class="custom-navbar">
|
||||
<view class="nav-back flex-c" @click="onBack">
|
||||
<u-icon name="arrow-left" size="36rpx" color="#333333"></u-icon>
|
||||
</view>
|
||||
<view class="nav-title">适用商品</view>
|
||||
<view class="nav-right"></view>
|
||||
</view>
|
||||
|
||||
<!-- 2. 搜索框区域 -->
|
||||
<view class="search-bar-box">
|
||||
<view class="search-inner">
|
||||
<u-icon name="search" size="36rpx" color="#999999" class="search-icon"></u-icon>
|
||||
<input class="search-input" v-model="searchInput" placeholder="请输入商品关键字"
|
||||
placeholder-style="color: #999999; font-size: 28rpx;" confirm-type="search"
|
||||
@confirm="onSearchBtnClick" />
|
||||
<view class="search-btn flex-c" @click="onSearchBtnClick">
|
||||
<text class="search-btn-text">搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 2. 排序/筛选栏（右对齐：综合 / 价格） -->
|
||||
<view class="filter-bar">
|
||||
<view class="filter-item" :class="{ active: sort === 1 }" @click="switchSort(1)">
|
||||
<text class="filter-text">综合</text>
|
||||
<view class="sort-icon-box">
|
||||
<u-icon name="arrow-up-fill" size="12rpx" color="#cccccc" class="icon-up"></u-icon>
|
||||
<u-icon name="arrow-down-fill" size="12rpx" :color="sort === 1 ? '#7934f6' : '#cccccc'"
|
||||
class="icon-down"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-item" :class="{ active: sort === 2 || sort === 3 }" @click="switchSort('price')">
|
||||
<text class="filter-text">价格</text>
|
||||
<view class="sort-icon-box">
|
||||
<u-icon name="arrow-up-fill" size="12rpx" :color="sort === 2 ? '#7934f6' : '#cccccc'"
|
||||
class="icon-up"></u-icon>
|
||||
<u-icon name="arrow-down-fill" size="12rpx" :color="sort === 3 ? '#7934f6' : '#cccccc'"
|
||||
class="icon-down"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 3. 商品双列网格列表区域 -->
|
||||
<scroll-view scroll-y class="product-scroll-view" @scrolltolower="loadMore" refresher-enabled
|
||||
:refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
|
||||
<view class="product-grid" v-if="dataList && dataList.length > 0">
|
||||
<view class="product-card" v-for="(item, index) in dataList" :key="item.goodsId || item.id || index"
|
||||
@click="onJumpDetail(item)">
|
||||
<!-- 商品大图 -->
|
||||
<view class="img-wrapper">
|
||||
<image class="product-img"
|
||||
:src="item.mainGraph || item.url || item.image || '/static/common/default-goods.png'"
|
||||
mode="aspectFill"></image>
|
||||
</view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="card-info">
|
||||
<view class="product-title">
|
||||
{{ item.goodsName || item.title || item.name }}
|
||||
</view>
|
||||
<view class="price-sales-row">
|
||||
<view class="price-box">
|
||||
<text class="currency">¥</text>
|
||||
<text class="price-val">{{ formatPrice(item.price) }}</text>
|
||||
</view>
|
||||
<text class="sales-val"
|
||||
v-if="item.sales !== undefined && item.sales !== null && item.sales !== ''">
|
||||
全网销量{{ formatSales(item.sales) }}件
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 / 无数据提示 -->
|
||||
<view class="empty-box" v-else-if="!loading">
|
||||
<u-icon name="empty-data" size="140rpx" color="#cccccc"></u-icon>
|
||||
<text class="empty-text">暂无相关商品</text>
|
||||
</view>
|
||||
|
||||
<view class="loading-more-box" v-if="loading && dataList.length > 0">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopSafe from '@/components/common/top-safe.nvue';
|
||||
import { getApplicableGoods } from '@/api/coupon.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TopSafe
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
templateId: '',
|
||||
searchInput: '',
|
||||
dataList: [],
|
||||
loading: false,
|
||||
isRefreshing: false,
|
||||
sort: 1, // 排序：1-销量降序、2-价格升序、3-价格降序
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
hasMore: true
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options && (options.templateId || options.id)) {
|
||||
this.templateId = options.templateId || options.id;
|
||||
}
|
||||
this.fetchData();
|
||||
},
|
||||
methods: {
|
||||
onBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
onSearchBtnClick() {
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
this.fetchData();
|
||||
},
|
||||
async fetchData(isLoadMore = false) {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
|
||||
let params = {
|
||||
templateId: this.templateId,
|
||||
keyword: this.searchInput ? this.searchInput.trim() : '',
|
||||
sort: this.sort,
|
||||
page: this.page,
|
||||
pageSize: this.pageSize
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await getApplicableGoods(params);
|
||||
let list = [];
|
||||
let totalPage = 0;
|
||||
if (res && res.bizcode === 100 && res.data) {
|
||||
list = res.data.entitys || [];
|
||||
totalPage = res.data.totalPage || 0;
|
||||
} else if (res && res.data && Array.isArray(res.data)) {
|
||||
list = res.data;
|
||||
}
|
||||
|
||||
if (isLoadMore) {
|
||||
this.dataList = [...this.dataList, ...list];
|
||||
} else {
|
||||
this.dataList = list;
|
||||
}
|
||||
|
||||
if (list.length < this.pageSize || (totalPage > 0 && this.page >= totalPage)) {
|
||||
this.hasMore = false;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('getApplicableGoods error:', err);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
this.isRefreshing = false;
|
||||
}
|
||||
},
|
||||
switchSort(type) {
|
||||
if (type === 1) {
|
||||
this.sort = 1;
|
||||
} else if (type === 'price') {
|
||||
if (this.sort === 2) {
|
||||
this.sort = 3;
|
||||
} else {
|
||||
this.sort = 2;
|
||||
}
|
||||
}
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
this.fetchData();
|
||||
},
|
||||
onRefresh() {
|
||||
this.isRefreshing = true;
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
this.fetchData();
|
||||
},
|
||||
loadMore() {
|
||||
if (!this.hasMore || this.loading) return;
|
||||
this.page++;
|
||||
this.fetchData(true);
|
||||
},
|
||||
onJumpDetail(item) {
|
||||
const goodsId = item.goodsId || item.id;
|
||||
if (goodsId) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/other_package/productInfo/productInfo?id=' + goodsId
|
||||
});
|
||||
}
|
||||
},
|
||||
formatPrice(val) {
|
||||
if (val === undefined || val === null || val === '') return '0.00';
|
||||
let num = parseFloat(val);
|
||||
if (isNaN(num)) return val;
|
||||
return num.toFixed(2);
|
||||
},
|
||||
formatSales(n) {
|
||||
if (n === undefined || n === null || n === '') return '0';
|
||||
let num = Number(n);
|
||||
if (isNaN(num)) return n;
|
||||
if (num >= 10000) {
|
||||
return (num / 10000).toFixed(1).replace(/\.0$/, '') + '万+';
|
||||
}
|
||||
return String(num);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #f5f5f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.custom-navbar {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
|
||||
.nav-back {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索框区域 */
|
||||
.search-bar-box {
|
||||
width: 100%;
|
||||
padding: 16rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
flex-shrink: 0;
|
||||
|
||||
.search-inner {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 8rpx 0 28rpx;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #efefef;
|
||||
|
||||
.search-icon {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 64rpx;
|
||||
padding: 0 32rpx;
|
||||
background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
|
||||
border-radius: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.search-btn-text {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 排序筛选栏 */
|
||||
.filter-bar {
|
||||
width: 100%;
|
||||
padding: 20rpx 40rpx 16rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 48rpx;
|
||||
background-color: #f5f5f7;
|
||||
flex-shrink: 0;
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.filter-text {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.filter-text {
|
||||
color: #7934f6;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.sort-icon-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
|
||||
.icon-up {
|
||||
margin-bottom: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 商品列表 Grid */
|
||||
.product-scroll-view {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
width: 100%;
|
||||
padding: 0 24rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.product-card {
|
||||
width: 342rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.img-wrapper {
|
||||
width: 100%;
|
||||
height: 342rpx;
|
||||
position: relative;
|
||||
background-color: #f8f8f8;
|
||||
|
||||
.product-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-info {
|
||||
padding: 16rpx 20rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
|
||||
.product-title {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
line-height: 38rpx;
|
||||
height: 76rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.price-sales-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #7934f6;
|
||||
|
||||
.currency {
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.price-val {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.sales-val {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
width: 100%;
|
||||
padding: 120rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-more-box {
|
||||
width: 100%;
|
||||
padding: 20rpx 0 40rpx;
|
||||
text-align: center;
|
||||
|
||||
.loading-text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,350 +1,662 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<TopSafe></TopSafe>
|
||||
<Header title="优惠券" />
|
||||
|
||||
<!-- 顶部分类 Tab 栏 -->
|
||||
<view class="tab-container">
|
||||
<view
|
||||
v-for="(item, index) in tabs"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === index }"
|
||||
@click="switchTab(index)"
|
||||
>
|
||||
<text class="tab-text">{{ item }}</text>
|
||||
<view class="active-line" v-if="currentTab === index"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon-page">
|
||||
<TopSafe></TopSafe>
|
||||
<Header title="优惠券" />
|
||||
|
||||
<!-- 优惠券列表区域 -->
|
||||
<view class="coupon-list">
|
||||
<view
|
||||
v-for="(coupon, index) in filteredCoupons"
|
||||
:key="index"
|
||||
class="coupon-card"
|
||||
:class="{ 'disabled': coupon.status === 'expired' }"
|
||||
>
|
||||
<!-- 左侧：金额与门槛 -->
|
||||
<view class="card-left">
|
||||
<view class="price-box">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount">{{ coupon.amount }}</text>
|
||||
</view>
|
||||
<text class="condition">{{ coupon.condition }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 带有上下半圆凹槽的虚线分割线 -->
|
||||
<view class="divider-wrapper">
|
||||
<view class="notch top-notch"></view>
|
||||
<view class="divider-line"></view>
|
||||
<view class="notch bottom-notch"></view>
|
||||
</view>
|
||||
<!-- 顶部分类 Tab 栏 -->
|
||||
<view class="tab-container">
|
||||
<view
|
||||
v-for="(item, index) in tabs"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === index }"
|
||||
@click="switchTab(index)"
|
||||
>
|
||||
<text class="tab-text">{{ item.name }}</text>
|
||||
<view class="active-line" v-if="currentTab === index"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧：详细内容 -->
|
||||
<view class="card-right">
|
||||
<view class="info-content">
|
||||
<view class="title">{{ coupon.title }}</view>
|
||||
<view class="description">{{ coupon.description }}</view>
|
||||
|
||||
<!-- 状态/倒计时文本 -->
|
||||
<view v-if="coupon.status === 'active'" class="countdown">
|
||||
仅剩 {{ coupon.timeLeft }}
|
||||
</view>
|
||||
<view v-else class="expired-text">
|
||||
已失效
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 按钮：仅在有效状态下显示 -->
|
||||
<view v-if="coupon.status === 'active'" class="use-btn" @click="useCoupon(coupon)">
|
||||
使用
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 优惠券列表及分页加载区域 -->
|
||||
<mescroll-uni
|
||||
ref="mescrollRef"
|
||||
top="176rpx"
|
||||
@down="downCallback"
|
||||
@up="upCallback"
|
||||
:up="upOption"
|
||||
:down="downOption"
|
||||
@init="mescrollInit"
|
||||
>
|
||||
<!-- 列表视图 -->
|
||||
<view class="coupon-list-container" v-if="couponList && couponList.length > 0">
|
||||
<view
|
||||
v-for="(coupon, index) in couponList"
|
||||
:key="coupon.couponUserId || coupon.userCouponId || coupon.templateId || index"
|
||||
class="coupon-card"
|
||||
:class="{ 'card-disabled': getCardDisabled(coupon) }"
|
||||
>
|
||||
<!-- 左侧：金额与门槛 -->
|
||||
<view class="card-left">
|
||||
<view class="price-box">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount">{{ getDiscountAmount(coupon) }}</text>
|
||||
</view>
|
||||
<text class="condition">{{ getThresholdText(coupon) }}</text>
|
||||
</view>
|
||||
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
<qiaobao-assistant page-key="pages/other_package/coupon/coupon" title="优惠券" />
|
||||
</view>
|
||||
<!-- 带有上下半圆凹槽的虚线分割线 -->
|
||||
<view class="divider-wrapper">
|
||||
<view class="notch top-notch"></view>
|
||||
<view class="divider-line"></view>
|
||||
<view class="notch bottom-notch"></view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧：详细内容与操作按钮 -->
|
||||
<view class="card-right">
|
||||
<view class="info-content">
|
||||
<view class="coupon-title">{{ coupon.title || '优惠券' }}</view>
|
||||
<view class="tag-row">
|
||||
<text class="coupon-tag" :class="{ 'tag-disabled': getCardDisabled(coupon) }">
|
||||
{{ getTagText(coupon) }}
|
||||
</text>
|
||||
<text class="coupon-scope">{{ getScopeText(coupon) }}</text>
|
||||
</view>
|
||||
<view class="coupon-validity">{{ getValidityText(coupon) }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="btn-box">
|
||||
<view
|
||||
v-if="!getCardDisabled(coupon)"
|
||||
class="action-btn btn-use"
|
||||
@click="onUseCoupon(coupon)"
|
||||
>
|
||||
去使用
|
||||
</view>
|
||||
<view
|
||||
v-else
|
||||
class="action-btn btn-disabled"
|
||||
>
|
||||
{{ getBtnText(coupon) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无优惠券缺省视图 (图二高保真) -->
|
||||
<view class="empty-container" v-else-if="isEmpty">
|
||||
<view class="empty-graphic">
|
||||
<view class="purple-bag-wrapper">
|
||||
<view class="glow-bg"></view>
|
||||
<view class="bag-card">
|
||||
<view class="bag-handle"></view>
|
||||
<view class="bag-logo">TB</view>
|
||||
</view>
|
||||
<view class="heart-bubble">
|
||||
<text class="heart-icon">♥</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="empty-tip">暂无优惠券</text>
|
||||
<view class="btn-go-get" v-if="currentTab === 0" @click="onGoGetCoupon">
|
||||
去领取优惠券
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-uni>
|
||||
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
<qiaobao-assistant page-key="pages/other_package/coupon/coupon" title="优惠券" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from '@/components/common/header.vue';
|
||||
import TopSafe from '@/components/common/top-safe.nvue'
|
||||
import MyBtn from '@/components/common/my-btn.vue'
|
||||
import TopSafe from '@/components/common/top-safe.nvue';
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
|
||||
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
|
||||
import { getMyCouponPage } from '@/api/coupon.js';
|
||||
|
||||
export default {
|
||||
components: { Header, TopSafe, MyBtn },
|
||||
data() {
|
||||
return {
|
||||
currentTab: 0,
|
||||
tabs: ['全部', '可使用', '已失效'],
|
||||
coupons: [
|
||||
{
|
||||
amount: 12,
|
||||
condition: '无门槛',
|
||||
title: '限时秒杀优惠券',
|
||||
description: '云南白药牙膏儿膏儿膏儿...',
|
||||
timeLeft: '14:20:55',
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
amount: 8,
|
||||
condition: '无门槛',
|
||||
title: '限时秒杀优惠券',
|
||||
description: '云南白药牙膏儿膏儿膏儿...',
|
||||
timeLeft: '14:20:55',
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
amount: 12,
|
||||
condition: '无门槛',
|
||||
title: '限时秒杀优惠券',
|
||||
description: '牛肉干儿牛肉干儿牛肉干',
|
||||
timeLeft: '',
|
||||
status: 'expired'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredCoupons() {
|
||||
return this.coupons;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
this.currentTab = index;
|
||||
},
|
||||
useCoupon(coupon) {
|
||||
uni.showToast({
|
||||
title: `去使用 ${coupon.amount} 元券`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
mixins: [MescrollMixin],
|
||||
components: { Header, TopSafe, MescrollUni },
|
||||
data() {
|
||||
return {
|
||||
currentTab: 0,
|
||||
tabs: [
|
||||
{ name: '待使用', status: 1 },
|
||||
{ name: '已使用', status: 2 },
|
||||
{ name: '已过期', status: 3 },
|
||||
{ name: '已失效', status: 4 }
|
||||
],
|
||||
couponList: [],
|
||||
isEmpty: false,
|
||||
upOption: {
|
||||
auto: true,
|
||||
page: {
|
||||
num: 0,
|
||||
size: 10
|
||||
},
|
||||
noMoreSize: 5,
|
||||
empty: {
|
||||
use: false // 使用自定义高保真 Empty 视图
|
||||
},
|
||||
textColor: '#333',
|
||||
bgColor: 'rgba(0,0,0,0)'
|
||||
},
|
||||
downOption: {
|
||||
auto: false,
|
||||
textColor: '#333',
|
||||
bgColor: 'rgba(0,0,0,0)'
|
||||
},
|
||||
mescroll: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
mescrollInit(mescroll) {
|
||||
this.mescroll = mescroll;
|
||||
},
|
||||
downCallback() {
|
||||
this.mescroll && this.mescroll.resetUpScroll();
|
||||
},
|
||||
// 切换 Tab 标签
|
||||
switchTab(index) {
|
||||
if (this.currentTab !== index) {
|
||||
this.currentTab = index;
|
||||
this.couponList = [];
|
||||
this.isEmpty = false;
|
||||
this.mescroll && this.mescroll.resetUpScroll();
|
||||
}
|
||||
},
|
||||
// 分页获取我的优惠券列表
|
||||
async upCallback(page) {
|
||||
try {
|
||||
const currentStatus = this.tabs[this.currentTab].status;
|
||||
const params = {
|
||||
status: currentStatus,
|
||||
page: page.num,
|
||||
pageSize: page.size
|
||||
};
|
||||
const resp = await getMyCouponPage(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data || {};
|
||||
const list = data.entitys || [];
|
||||
const curPageLen = list.length;
|
||||
const totalCount = data.totalCount || 0;
|
||||
|
||||
if (page.num === 1) {
|
||||
this.couponList = [];
|
||||
}
|
||||
this.couponList = this.couponList.concat(list);
|
||||
this.isEmpty = this.couponList.length === 0;
|
||||
this.mescroll.endBySize(curPageLen, totalCount);
|
||||
} else {
|
||||
if (page.num === 1 && this.couponList.length === 0) {
|
||||
this.couponList = [];
|
||||
this.isEmpty = true;
|
||||
this.mescroll.endBySize(0, 0);
|
||||
} else {
|
||||
this.mescroll && this.mescroll.endErr();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取我的优惠券列表异常:', e);
|
||||
if (page.num === 1 && this.couponList.length === 0) {
|
||||
this.couponList = [];
|
||||
this.isEmpty = true;
|
||||
this.mescroll.endBySize(0, 0);
|
||||
} else {
|
||||
this.mescroll && this.mescroll.endErr();
|
||||
}
|
||||
}
|
||||
},
|
||||
// 点击“去使用”
|
||||
onUseCoupon(coupon) {
|
||||
const templateId = coupon.templateId || coupon.id || '';
|
||||
uni.navigateTo({
|
||||
url: `/pages/other_package/applicable_goods/applicable_goods?templateId=${templateId}`
|
||||
});
|
||||
},
|
||||
// 点击“去领取优惠券” -> 跳转至领券中心
|
||||
onGoGetCoupon() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/other_package/get-coupon/get-coupon'
|
||||
});
|
||||
},
|
||||
// 数据映射格式化函数
|
||||
getDiscountAmount(coupon) {
|
||||
return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
|
||||
},
|
||||
getThresholdText(coupon) {
|
||||
if (coupon.thresholdType) return coupon.thresholdType;
|
||||
const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
|
||||
if (threshold === 0) {
|
||||
return '无门槛';
|
||||
}
|
||||
return `满${threshold}元可用`;
|
||||
},
|
||||
getTagText(coupon) {
|
||||
if (coupon.tag) return coupon.tag;
|
||||
if (coupon.scopeType === 1) return '通用券';
|
||||
if (coupon.scopeType === 2) return '商品券';
|
||||
if (coupon.scopeType === 3 || coupon.scopeType === 4) return '品类券';
|
||||
if (coupon.scopeText && coupon.scopeText.includes('通用')) return '通用券';
|
||||
return '通用券';
|
||||
},
|
||||
getScopeText(coupon) {
|
||||
if (coupon.scope) return coupon.scope;
|
||||
if (coupon.scopeText) return coupon.scopeText;
|
||||
if (coupon.scopeType === 1) return '所有商品可用';
|
||||
if (coupon.scopeType === 2) return '指定商品可用';
|
||||
if (coupon.scopeType === 3) return '指定类目可用';
|
||||
if (coupon.scopeType === 4) return '指定专区商品可用';
|
||||
return '所有商品可用';
|
||||
},
|
||||
getValidityText(coupon) {
|
||||
if (coupon.endTime) {
|
||||
return `有效期至 ${this.formatTime(coupon.endTime)}`;
|
||||
}
|
||||
if (coupon.useEndTime) {
|
||||
return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
|
||||
}
|
||||
if (coupon.validityText) return coupon.validityText;
|
||||
if (coupon.validDays && coupon.validDays > 0) {
|
||||
return `领取之日起${coupon.validDays}天内有效`;
|
||||
}
|
||||
if (coupon.receiveEndTime) {
|
||||
return `截止时间 ${this.formatTime(coupon.receiveEndTime)}`;
|
||||
}
|
||||
return '有效期至 2026-8-14 14:20:55';
|
||||
},
|
||||
getBtnText(coupon) {
|
||||
if (coupon.statusText) return coupon.statusText;
|
||||
const status = coupon.status !== undefined ? Number(coupon.status) : this.tabs[this.currentTab].status;
|
||||
if (status === 1) return '去使用';
|
||||
if (status === 2) return '已使用';
|
||||
if (status === 3) return '已过期';
|
||||
if (status === 4) return '已失效';
|
||||
return '已失效';
|
||||
},
|
||||
getCardDisabled(coupon) {
|
||||
const status = coupon.status !== undefined ? Number(coupon.status) : this.tabs[this.currentTab].status;
|
||||
return status !== 1;
|
||||
},
|
||||
formatTime(time) {
|
||||
if (!time) return '';
|
||||
if (typeof time === 'string' && time.includes('-')) return time;
|
||||
const date = new Date(Number(time));
|
||||
if (isNaN(date.getTime())) return String(time);
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const d = String(date.getDate()).padStart(2, '0');
|
||||
const hh = String(date.getHours()).padStart(2, '0');
|
||||
const mm = String(date.getMinutes()).padStart(2, '0');
|
||||
const ss = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
background-color: #F5F5F5;
|
||||
min-height: 100vh;
|
||||
.coupon-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f7f8fa;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 顶部分类 Tab 栏 */
|
||||
.tab-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
height: 88rpx;
|
||||
align-items: center;
|
||||
padding-left: 28rpx; /* 关键：左侧对齐优惠券卡片的边距 */
|
||||
box-sizing: border-box;
|
||||
border-top: 2rpx solid #f6f6f6; /* 隐约的底部分割线 */
|
||||
|
||||
.tab-item {
|
||||
margin-right: 48rpx; /* 增大字与字之间的间距 */
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: #7f7f7f; /* 未激活时是略深一点的灰色 */
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-text {
|
||||
color: #7A35F6; /* 完美还原原图中的亮紫色 */
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
height: 88rpx;
|
||||
align-items: center;
|
||||
padding-left: 32rpx;
|
||||
box-sizing: border-box;
|
||||
border-top: 1rpx solid #f6f6f6;
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
|
||||
/* 底部指示线：缩短宽度并适当下移 */
|
||||
.active-line {
|
||||
position: absolute;
|
||||
bottom: 4rpx; /* 贴近底部边缘 */
|
||||
width: 44rpx; /* 缩短下划线宽度，原图横线比“全部”两个字还要窄一点 */
|
||||
height: 4rpx; /* 适中的粗细 */
|
||||
background-color: #7A35F6;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
.tab-item {
|
||||
margin-right: 48rpx;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-text {
|
||||
color: #7a35f6;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.active-line {
|
||||
position: absolute;
|
||||
bottom: 6rpx;
|
||||
width: 48rpx;
|
||||
height: 6rpx;
|
||||
background-color: #7a35f6;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
padding: 28rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
/* 优惠券列表容器 */
|
||||
.coupon-list-container {
|
||||
padding: 24rpx 24rpx 40rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 优惠券卡片基础样式 (待使用状态) */
|
||||
.coupon-card {
|
||||
background: rgba(102,102,102,0.06);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
height: 196rpx;
|
||||
position: relative;
|
||||
|
||||
/* 左侧面：金额区 */
|
||||
.card-left {
|
||||
width: 190rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #ff1224;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.currency {
|
||||
font-size: 32rpx;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 64rpx;
|
||||
line-height: 64rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 24rpx;
|
||||
color: #ff1224;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 带有上下半圆凹槽的虚线分割线组件 */
|
||||
.divider-wrapper {
|
||||
width: 2rpx;
|
||||
position: relative;
|
||||
margin: 10rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.divider-line {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-left: 2rpx dashed rgba(253,28,36,0.3);
|
||||
}
|
||||
|
||||
/* 模拟卡片边缘剪票口的半圆凹槽 */
|
||||
.notch {
|
||||
position: absolute;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background-color: #f7f8fa; /* 颜色和页面大背景融为一体 */
|
||||
border-radius: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.top-notch {
|
||||
top: -18rpx;
|
||||
}
|
||||
.bottom-notch {
|
||||
bottom: -18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 右侧面：内容与按钮区 */
|
||||
.card-right {
|
||||
flex: 1;
|
||||
padding: 26rpx 24rpx 24rpx 36rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.info-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #2c2c2c;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 28rpx;
|
||||
color: #6a6a6a;
|
||||
margin-top: 8rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-size: 24rpx;
|
||||
color: #ff5260;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 立即使用按钮 */
|
||||
.use-btn {
|
||||
width: 116rpx;
|
||||
height: 56rpx;
|
||||
background-color: #FD1C24;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
border-radius: 8rpx; /* 原图接近微圆角矩形，而非纯半圆 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: 16rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ======= 已失效状态覆盖 ======= */
|
||||
&.disabled {
|
||||
background-color: #f4f4f4; /* 换成失效灰底 */
|
||||
|
||||
.card-left {
|
||||
.price-box { color: #9c9c9c; }
|
||||
.condition { color: #9c9c9c; }
|
||||
}
|
||||
|
||||
.divider-wrapper {
|
||||
.divider-line { border-left-color: #e2e2e2; }
|
||||
}
|
||||
|
||||
.card-right {
|
||||
.info-content {
|
||||
.title { color: #2c2c2c; } /* 失效标题依然清晰 */
|
||||
.description { color: #9c9c9c; }
|
||||
}
|
||||
.expired-text {
|
||||
font-size: 22rpx;
|
||||
color: #bcbcbc;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(253, 28, 36, 0.06);
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* 已使用 / 已过期 / 已失效 灰色变暗样式 (图三图四高保真) */
|
||||
&.card-disabled {
|
||||
background: #f5f5f5 !important;
|
||||
|
||||
.card-left {
|
||||
.price-box {
|
||||
color: #a0a0a0 !important;
|
||||
}
|
||||
.condition {
|
||||
color: #999999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-title {
|
||||
color: #333333 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-left {
|
||||
width: 170rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #ff2442;
|
||||
|
||||
.currency {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 60rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 24rpx;
|
||||
color: #ff2442;
|
||||
margin-top: 10rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* 虚线分割线及上下凹槽 */
|
||||
.divider-wrapper {
|
||||
position: relative;
|
||||
width: 2rpx;
|
||||
align-self: stretch;
|
||||
|
||||
.divider-line {
|
||||
height: 100%;
|
||||
border-left: 2rpx dashed #fca5a5;
|
||||
}
|
||||
|
||||
.notch {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.top-notch {
|
||||
top: -12rpx;
|
||||
}
|
||||
|
||||
.bottom-notch {
|
||||
bottom: -12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-disabled .divider-line {
|
||||
border-left: 2rpx dashed #dddddd !important;
|
||||
}
|
||||
|
||||
/* 卡片右侧内容 */
|
||||
.card-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 20rpx 20rpx 24rpx;
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 12rpx;
|
||||
|
||||
.coupon-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
.coupon-tag {
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
color: #ff2442;
|
||||
background: #ffe4e6;
|
||||
border: 1px solid #ff99a4;
|
||||
border-radius: 6rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
margin-right: 10rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&.tag-disabled {
|
||||
color: #888888 !important;
|
||||
background: #eeeeee !important;
|
||||
border: 1px solid #cccccc !important;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-scope {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-validity {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
flex-shrink: 0;
|
||||
|
||||
.action-btn {
|
||||
width: 130rpx;
|
||||
height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.btn-use {
|
||||
background: #ff1e38;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.btn-disabled {
|
||||
background: #e5e5e5;
|
||||
color: #a0a0a0;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 缺省页面 (图二高保真) */
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 140rpx;
|
||||
|
||||
.empty-graphic {
|
||||
position: relative;
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.purple-bag-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.glow-bg {
|
||||
position: absolute;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, rgba(247, 248, 250, 0) 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.bag-card {
|
||||
position: relative;
|
||||
width: 110rpx;
|
||||
height: 120rpx;
|
||||
background: linear-gradient(135deg, #a855f7 0%, #7a35f6 100%);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 12rpx 28rpx rgba(122, 53, 246, 0.3);
|
||||
z-index: 2;
|
||||
|
||||
.bag-handle {
|
||||
position: absolute;
|
||||
top: -16rpx;
|
||||
width: 44rpx;
|
||||
height: 24rpx;
|
||||
border: 4rpx solid #c084fc;
|
||||
border-bottom: none;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
}
|
||||
|
||||
.bag-logo {
|
||||
font-size: 32rpx;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.heart-bubble {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 24rpx;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
background: linear-gradient(135deg, #c084fc, #a855f7);
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4rpx 12rpx rgba(168, 85, 247, 0.3);
|
||||
z-index: 3;
|
||||
|
||||
.heart-icon {
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.btn-go-get {
|
||||
width: 440rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #a855f7 0%, #7a35f6 100%);
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 40rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(122, 53, 246, 0.3);
|
||||
transition: transform 0.1s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,801 @@
|
||||
<template>
|
||||
<view class="get-coupon-page">
|
||||
<!-- 头部 Banner / 轮播图区域 -->
|
||||
<view class="product_info_header_warp">
|
||||
<up-swiper v-if="swiperList && swiperList.length > 0" :list="swiperList" height="660rpx"
|
||||
class="product_info_header_swiper" @click="onSwiper" @change="(e) => (currentNum = e.current)">
|
||||
|
||||
</up-swiper>
|
||||
|
||||
<!-- Default Fallback Banner UI (High-Fidelity) when swiperList is empty -->
|
||||
<view v-else class="default-banner">
|
||||
<view class="banner-bg-gradient"></view>
|
||||
<view class="banner-content">
|
||||
<view class="banner-badge">%</view>
|
||||
<text class="banner-title">领券中心</text>
|
||||
<view class="banner-subtitle">
|
||||
<text class="sparkle">✦</text>
|
||||
<text class="sub-text">领券享好价，购物更划算</text>
|
||||
<text class="sparkle">✦</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 浮动返回按钮 -->
|
||||
<view class="img_comm left_warp" :style="{ top: (statusBarHeight + 10) + 'px' }">
|
||||
<up-image src="/static/common/left_b_st.png" width="30" height="30" bgColor="#f1f6ff00"
|
||||
@click="jumpLeft"></up-image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 分页优惠券列表区域 -->
|
||||
<mescroll-uni ref="mescrollRef" top="660rpx" @down="downCallback" @up="upCallback" :up="upOption"
|
||||
:down="downOption" @init="mescrollInit">
|
||||
<!-- 列表视图 -->
|
||||
<view class="coupon-list-container" v-if="couponList && couponList.length > 0">
|
||||
<view v-for="(coupon, index) in couponList" :key="coupon.templateId || coupon.id || index"
|
||||
class="coupon-card">
|
||||
<!-- 左侧：金额与门槛 -->
|
||||
<view class="card-left">
|
||||
<view class="price-box">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount">{{ getDiscountAmount(coupon) }}</text>
|
||||
</view>
|
||||
<text class="condition">{{ getThresholdText(coupon) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 带有上下半圆凹槽的虚线分割线 -->
|
||||
<view class="divider-wrapper">
|
||||
<view class="notch top-notch"></view>
|
||||
<view class="divider-line"></view>
|
||||
<view class="notch bottom-notch"></view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧：详细内容与操作按钮 -->
|
||||
<view class="card-right">
|
||||
<view class="info-content">
|
||||
<view class="coupon-title">{{ coupon.title }}</view>
|
||||
<view class="tag-row">
|
||||
<text class="coupon-tag">{{ getTagText(coupon) }}</text>
|
||||
<text class="coupon-scope">{{ getScopeText(coupon) }}</text>
|
||||
</view>
|
||||
<view class="coupon-validity">{{ getValidityText(coupon) }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="btn-box">
|
||||
<view v-if="getCouponStatus(coupon) === 0" class="action-btn btn-claim"
|
||||
@click="onClaimCoupon(coupon, index)">
|
||||
立即领取
|
||||
</view>
|
||||
<view v-else-if="getCouponStatus(coupon) === 1" class="action-btn btn-use"
|
||||
@click="onClaimCoupon(coupon, index)">
|
||||
去使用
|
||||
</view>
|
||||
<view v-else class="action-btn btn-disabled">
|
||||
{{ coupon.receiveStatusText || '已达上限' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无领券数据缺省视图 (高保真) -->
|
||||
<view class="empty-container" v-else-if="isEmpty">
|
||||
<view class="empty-graphic">
|
||||
<view class="purple-bag-wrapper">
|
||||
<view class="glow-bg"></view>
|
||||
<view class="bag-card">
|
||||
<view class="bag-handle"></view>
|
||||
<view class="bag-logo">TB</view>
|
||||
</view>
|
||||
<view class="heart-bubble">
|
||||
<text class="heart-icon">♥</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="empty-title">敬请期待</text>
|
||||
<text class="empty-subtitle">更多优质商品正在路上...</text>
|
||||
</view>
|
||||
</mescroll-uni>
|
||||
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
<qiaobao-assistant page-key="pages/other_package/get-coupon/get-coupon" title="领券中心" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCarouselImage } from '@/api/common.js';
|
||||
import { getReceiveCenterList, receiveCoupon } from '@/api/coupon.js';
|
||||
import { APP_PAGE_TYPE } from '@/utils/enumUtils.js';
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
|
||||
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
|
||||
|
||||
export default {
|
||||
mixins: [MescrollMixin],
|
||||
components: { MescrollUni },
|
||||
data() {
|
||||
return {
|
||||
swiperList: [],
|
||||
currentNum: 0,
|
||||
statusBarHeight: 20,
|
||||
couponList: [],
|
||||
isEmpty: false,
|
||||
upOption: {
|
||||
auto: true,
|
||||
page: {
|
||||
num: 0,
|
||||
size: 10
|
||||
},
|
||||
noMoreSize: 5,
|
||||
empty: {
|
||||
use: false // 使用自定义高保真 Empty 视图
|
||||
},
|
||||
textColor: '#333',
|
||||
bgColor: 'rgba(0,0,0,0)'
|
||||
},
|
||||
downOption: {
|
||||
auto: false,
|
||||
textColor: '#333',
|
||||
bgColor: 'rgba(0,0,0,0)'
|
||||
},
|
||||
mescroll: null
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
if (sysInfo && sysInfo.statusBarHeight) {
|
||||
this.statusBarHeight = sysInfo.statusBarHeight;
|
||||
}
|
||||
this.getCarouselImage();
|
||||
},
|
||||
methods: {
|
||||
mescrollInit(mescroll) {
|
||||
this.mescroll = mescroll;
|
||||
},
|
||||
downCallback() {
|
||||
this.mescroll && this.mescroll.resetUpScroll();
|
||||
},
|
||||
// 分页获取领券中心列表
|
||||
async upCallback(page) {
|
||||
try {
|
||||
const params = {
|
||||
page: page.num,
|
||||
pageSize: page.size
|
||||
};
|
||||
const resp = await getReceiveCenterList(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data || {};
|
||||
const list = data.entitys || [];
|
||||
const curPageLen = list.length;
|
||||
const totalCount = data.totalCount || 0;
|
||||
|
||||
if (page.num === 1) {
|
||||
this.couponList = [];
|
||||
}
|
||||
this.couponList = this.couponList.concat(list);
|
||||
this.isEmpty = this.couponList.length === 0;
|
||||
this.mescroll.endBySize(curPageLen, totalCount);
|
||||
} else {
|
||||
if (page.num === 1 && this.couponList.length === 0) {
|
||||
this.couponList = [];
|
||||
this.isEmpty = true;
|
||||
this.mescroll.endBySize(0, 0);
|
||||
} else {
|
||||
this.mescroll && this.mescroll.endErr();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取领券中心数据失败:', e);
|
||||
if (page.num === 1 && this.couponList.length === 0) {
|
||||
this.couponList = [];
|
||||
this.isEmpty = true;
|
||||
this.mescroll.endBySize(0, 0);
|
||||
} else {
|
||||
this.mescroll && this.mescroll.endErr();
|
||||
}
|
||||
}
|
||||
},
|
||||
// 查询轮播图
|
||||
async getCarouselImage() {
|
||||
try {
|
||||
const params = {
|
||||
pageUi: APP_PAGE_TYPE.COUPON
|
||||
};
|
||||
const resp = await getCarouselImage(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data || [];
|
||||
this.swiperList = data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取轮播图失败:', e);
|
||||
}
|
||||
},
|
||||
// 返回上一页
|
||||
jumpLeft() {
|
||||
const pages = getCurrentPages();
|
||||
if (pages && pages.length > 1) {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 点击轮播图预览
|
||||
onSwiper(index) {
|
||||
if (this.swiperList && this.swiperList.length > 0) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: this.swiperList
|
||||
});
|
||||
}
|
||||
},
|
||||
// 数据字段映射格式化函数
|
||||
getDiscountAmount(coupon) {
|
||||
return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
|
||||
},
|
||||
getThresholdText(coupon) {
|
||||
if (coupon.thresholdType) return coupon.thresholdType;
|
||||
const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
|
||||
if (threshold === 0) {
|
||||
return '无门槛';
|
||||
}
|
||||
if (coupon.type === 1) {
|
||||
return `满${threshold}元可用`;
|
||||
}
|
||||
return `满${threshold}元可用`;
|
||||
},
|
||||
getTagText(coupon) {
|
||||
if (coupon.tag) return coupon.tag;
|
||||
if (coupon.scopeType === 1) return '通用券';
|
||||
if (coupon.scopeType === 2) return '商品券';
|
||||
if (coupon.scopeType === 3 || coupon.scopeType === 4) return '品类券';
|
||||
if (coupon.scopeText && coupon.scopeText.includes('通用')) return '通用券';
|
||||
return '通用券';
|
||||
},
|
||||
getScopeText(coupon) {
|
||||
if (coupon.scope) return coupon.scope;
|
||||
if (coupon.scopeText) return coupon.scopeText;
|
||||
if (coupon.scopeType === 1) return '所有商品可用';
|
||||
if (coupon.scopeType === 2) return '指定商品可用';
|
||||
if (coupon.scopeType === 3) return '指定类目可用';
|
||||
if (coupon.scopeType === 4) return '指定专区商品可用';
|
||||
return '所有商品可用';
|
||||
},
|
||||
getValidityText(coupon) {
|
||||
if (coupon.validityText) return coupon.validityText;
|
||||
if (coupon.validDays && coupon.validDays > 0) {
|
||||
return `领取之日起${coupon.validDays}天内有效`;
|
||||
}
|
||||
if (coupon.useEndTime) {
|
||||
return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
|
||||
}
|
||||
if (coupon.receiveEndTime) {
|
||||
return `截止时间 ${this.formatTime(coupon.receiveEndTime)}`;
|
||||
}
|
||||
return '领取之日起30天内有效';
|
||||
},
|
||||
getCouponStatus(coupon) {
|
||||
if (coupon.receiveStatus !== undefined && coupon.receiveStatus !== null) return Number(coupon.receiveStatus);
|
||||
if (coupon.received !== undefined && coupon.received !== null) return coupon.received ? 1 : 0;
|
||||
if (coupon.canReceive !== undefined && coupon.canReceive !== null) return coupon.canReceive ? 0 : 2;
|
||||
if (coupon.status !== undefined && coupon.status !== null) return Number(coupon.status);
|
||||
return 0;
|
||||
},
|
||||
formatTime(time) {
|
||||
if (!time) return '';
|
||||
if (typeof time === 'string' && time.includes('-')) return time;
|
||||
const date = new Date(Number(time));
|
||||
if (isNaN(date.getTime())) return String(time);
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const d = String(date.getDate()).padStart(2, '0');
|
||||
const hh = String(date.getHours()).padStart(2, '0');
|
||||
const mm = String(date.getMinutes()).padStart(2, '0');
|
||||
const ss = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
|
||||
},
|
||||
// 领取 / 使用优惠券
|
||||
async onClaimCoupon(item, index) {
|
||||
const status = this.getCouponStatus(item);
|
||||
if (status === 0) {
|
||||
const templateId = item.templateId || item.id;
|
||||
if (!templateId) {
|
||||
uni.showToast({
|
||||
title: '优惠券ID无效',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// POST /coupon/receive { templateId }
|
||||
const res = await receiveCoupon({ templateId });
|
||||
if (res && res.bizcode === 100) {
|
||||
if (this.$refs.uToastRef) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'success',
|
||||
message: '领取成功'
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '领取成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
// 1. 本地卡片状态即时更新 (按钮变“去使用”)
|
||||
if (this.couponList && this.couponList[index]) {
|
||||
this.$set(this.couponList[index], 'receiveStatus', 1);
|
||||
this.$set(this.couponList[index], 'received', true);
|
||||
}
|
||||
// 2. 重新加载/刷新 mescroll 列表
|
||||
if (this.mescroll) {
|
||||
this.mescroll.resetUpScroll();
|
||||
} else {
|
||||
this.upCallback({ num: 1, size: 10 });
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res?.msg || '领取失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('领取优惠券失败:', e);
|
||||
uni.showToast({
|
||||
title: '领取失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} else if (status === 1) {
|
||||
// 已领取 -> 去使用，跳转至首页/选购
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 兜底高保真演练数据
|
||||
getFallbackCoupons() {
|
||||
return [
|
||||
{
|
||||
templateId: 1,
|
||||
discountAmount: 12,
|
||||
thresholdAmount: 0,
|
||||
title: '限时秒杀优惠券',
|
||||
scopeType: 1,
|
||||
scopeText: '所有商品可用',
|
||||
validDays: 30,
|
||||
receiveStatus: 0,
|
||||
canReceive: true,
|
||||
received: false
|
||||
},
|
||||
{
|
||||
templateId: 2,
|
||||
discountAmount: 12,
|
||||
thresholdAmount: 0,
|
||||
title: '限时秒杀优惠券',
|
||||
scopeType: 3,
|
||||
scopeText: '指定商品可用',
|
||||
useEndTime: '2026-8-14 14:20:55',
|
||||
receiveStatus: 1,
|
||||
canReceive: false,
|
||||
received: true
|
||||
},
|
||||
{
|
||||
templateId: 3,
|
||||
discountAmount: 12,
|
||||
thresholdAmount: 100,
|
||||
title: '限时秒杀优惠券',
|
||||
scopeType: 2,
|
||||
scopeText: '满100元指定商品可用',
|
||||
validDays: 30,
|
||||
receiveStatus: 0,
|
||||
canReceive: true,
|
||||
received: false
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.get-coupon-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f7f8fa;
|
||||
position: relative;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 头部 Banner 容器 */
|
||||
.product_info_header_warp {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 660rpx;
|
||||
background-color: #7b42f6;
|
||||
|
||||
.product_info_header_swiper {
|
||||
height: 660rpx !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
::v-deep(.u-swiper__wrapper) {
|
||||
height: 660rpx !important;
|
||||
|
||||
.u-swiper__wrapper {
|
||||
height: 660rpx !important;
|
||||
|
||||
.u-swiper__wrapper__item__wrapper__image {
|
||||
height: 660rpx !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 默认 High-Fidelity 紫红色 Banner 备用视图 */
|
||||
.default-banner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 660rpx;
|
||||
background: linear-gradient(135deg, #b83af6 0%, #7b22ec 50%, #681be4 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
.banner-bg-gradient {
|
||||
position: absolute;
|
||||
top: -50rpx;
|
||||
right: -50rpx;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: -60rpx;
|
||||
|
||||
.banner-badge {
|
||||
position: absolute;
|
||||
top: 80rpx;
|
||||
left: 40rpx;
|
||||
font-size: 40rpx;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 76rpx;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
letter-spacing: 4rpx;
|
||||
text-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.25);
|
||||
background: linear-gradient(to bottom, #ffffff, #f0d5ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
padding: 8rpx 28rpx;
|
||||
border-radius: 30rpx;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
.sparkle {
|
||||
font-size: 20rpx;
|
||||
color: #ffd700;
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 26rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 浮动返回图标 */
|
||||
.img_comm {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.left_warp {
|
||||
left: 40rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* 优惠券列表区域 */
|
||||
.coupon-list-container {
|
||||
padding: 24rpx 24rpx 40rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 高保真优惠券卡片 */
|
||||
.coupon-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(253, 28, 36, 0.06);
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.card-left {
|
||||
width: 170rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #ff2442;
|
||||
|
||||
.currency {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 60rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 24rpx;
|
||||
color: #ff2442;
|
||||
margin-top: 10rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* 虚线分割线及上下凹槽 */
|
||||
.divider-wrapper {
|
||||
position: relative;
|
||||
width: 2rpx;
|
||||
align-self: stretch;
|
||||
|
||||
.divider-line {
|
||||
height: 100%;
|
||||
border-left: 2rpx dashed #fca5a5;
|
||||
}
|
||||
|
||||
.notch {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.top-notch {
|
||||
top: -12rpx;
|
||||
}
|
||||
|
||||
.bottom-notch {
|
||||
bottom: -12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片右侧内容 */
|
||||
.card-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 20rpx 20rpx 24rpx;
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 12rpx;
|
||||
|
||||
.coupon-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
.coupon-tag {
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
color: #ff2442;
|
||||
background: #ffe4e6;
|
||||
border: 1px solid #ff99a4;
|
||||
border-radius: 6rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
margin-right: 10rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.coupon-scope {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-validity {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
flex-shrink: 0;
|
||||
|
||||
.action-btn {
|
||||
width: 130rpx;
|
||||
height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.btn-claim {
|
||||
background: #ff2442;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.btn-use {
|
||||
background: #ffe8eb;
|
||||
color: #ff2442;
|
||||
border: 1px solid #ff4d5e;
|
||||
line-height: 52rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.btn-disabled {
|
||||
background: #eeeeee;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 无领券数据缺省页面 (高保真) */
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 140rpx;
|
||||
|
||||
.empty-graphic {
|
||||
position: relative;
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.purple-bag-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.glow-bg {
|
||||
position: absolute;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, rgba(247, 248, 250, 0) 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.bag-card {
|
||||
position: relative;
|
||||
width: 110rpx;
|
||||
height: 120rpx;
|
||||
background: linear-gradient(135deg, #a855f7 0%, #7a35f6 100%);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 12rpx 28rpx rgba(122, 53, 246, 0.3);
|
||||
z-index: 2;
|
||||
|
||||
.bag-handle {
|
||||
position: absolute;
|
||||
top: -16rpx;
|
||||
width: 44rpx;
|
||||
height: 24rpx;
|
||||
border: 4rpx solid #c084fc;
|
||||
border-bottom: none;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
}
|
||||
|
||||
.bag-logo {
|
||||
font-size: 32rpx;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.heart-bubble {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 24rpx;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
background: linear-gradient(135deg, #c084fc, #a855f7);
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4rpx 12rpx rgba(168, 85, 247, 0.3);
|
||||
z-index: 3;
|
||||
|
||||
.heart-icon {
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.empty-subtitle {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -10,8 +10,8 @@
|
||||
<template #indicator>
|
||||
<view class="indicator-num">
|
||||
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
|
||||
<qiaobao-assistant page-key="pages/other_package/productInfo/productInfo" title="商品详情" />
|
||||
</view>
|
||||
<qiaobao-assistant page-key="pages/other_package/productInfo/productInfo" title="商品详情" />
|
||||
</view>
|
||||
</template>
|
||||
</up-swiper>
|
||||
|
||||
@@ -84,6 +84,22 @@
|
||||
</view>
|
||||
<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
|
||||
<!-- 领券栏 (图一高保真) -->
|
||||
<view class="concrete_item concrete_item_but" v-if="goodsCouponList && goodsCouponList.length > 0"
|
||||
@click="couponPopupShow = true">
|
||||
<view class="concrete_item_">
|
||||
<view class="concrete_item_title">领券</view>
|
||||
<view class="concrete_item_value coupon_tags_preview">
|
||||
<text v-for="(cItem, cIdx) in goodsCouponList.slice(0, 3)" :key="cItem.templateId || cIdx"
|
||||
class="preview_coupon_tag">
|
||||
{{ cItem.title || '优惠券' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
|
||||
<!-- <view class="concrete_item">
|
||||
<view class="concrete_item_">
|
||||
<view class="concrete_item_title">收货地址</view>
|
||||
@@ -347,6 +363,75 @@
|
||||
<EvaluateDialog ref="evaluateDialog" v-if="evaluateDialogShow" :show="evaluateDialogShow"
|
||||
@close="evaluateDialogShow = false" :evalId="id" :mainGraph="orderInfo.mainGraph" :name="orderInfo.name">
|
||||
</EvaluateDialog>
|
||||
<!-- 优惠券弹窗 (图二高保真) -->
|
||||
<up-popup v-model:show="couponPopupShow" mode="bottom" :round="16" :closeable="true" :safeAreaInsetBottom="true"
|
||||
@close="couponPopupShow = false">
|
||||
<view class="goods_coupon_popup_container">
|
||||
<view class="popup_header">
|
||||
<text class="popup_title">优惠券</text>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券列表 (可滑动) -->
|
||||
<scroll-view scroll-y class="popup_coupon_scroll">
|
||||
<view class="popup_coupon_list">
|
||||
<view v-for="(coupon, index) in goodsCouponList" :key="coupon.templateId || coupon.id || index"
|
||||
class="coupon-card" :class="{ 'card-disabled': getCardDisabled(coupon) }">
|
||||
<!-- 左侧：金额与门槛 -->
|
||||
<view class="card-left">
|
||||
<view class="price-box">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount">{{ getDiscountAmount(coupon) }}</text>
|
||||
</view>
|
||||
<text class="condition">{{ getThresholdText(coupon) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 带有上下半圆凹槽的虚线分割线 -->
|
||||
<view class="divider-wrapper">
|
||||
<view class="notch top-notch"></view>
|
||||
<view class="divider-line"></view>
|
||||
<view class="notch bottom-notch"></view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧：详细内容与操作按钮 -->
|
||||
<view class="card-right">
|
||||
<view class="info-content">
|
||||
<view class="coupon-title">{{ coupon.title }}</view>
|
||||
<view class="tag-row">
|
||||
<text class="coupon-tag" :class="{ 'tag-disabled': getCardDisabled(coupon) }">
|
||||
{{ getTagText(coupon) }}
|
||||
</text>
|
||||
<text class="coupon-scope">{{ getScopeText(coupon) }}</text>
|
||||
</view>
|
||||
<view class="coupon-validity">{{ getValidityText(coupon) }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 (图二高保真: 立即领取 / 已领取) -->
|
||||
<view class="btn-box">
|
||||
<view v-if="!getCardReceived(coupon) && getCouponCanReceive(coupon)" class="action-btn btn-claim"
|
||||
@click="onReceiveGoodsCoupon(coupon, index)">
|
||||
立即领取
|
||||
</view>
|
||||
<view v-else-if="getCardReceived(coupon)" class="action-btn btn-received">
|
||||
已领取
|
||||
</view>
|
||||
<view v-else class="action-btn btn-disabled">
|
||||
{{ coupon.receiveStatusText || '已达上限' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部确定按钮 -->
|
||||
<view class="popup_bottom_btn_wrap">
|
||||
<view class="popup_btn_ok" @click="couponPopupShow = false">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
|
||||
<view class="hideCanvasView">
|
||||
<canvas id="myCanvas" canvas-id="myCanvas" :style="{
|
||||
height: bgObj.height + 'px',
|
||||
@@ -358,6 +443,7 @@
|
||||
|
||||
<script>
|
||||
import { getGoodsDetail, addGoods, getGoodsSpecs, getGoodsSpecsInfo } from "@/api/product.js";
|
||||
import { getGoodsCouponList, receiveCoupon } from "@/api/coupon.js";
|
||||
import { getValue, PRODUCT_DELIVERY_TIME, ACTIVITY_TYPE } from "@/utils/enumUtils.js";
|
||||
import { copyData } from "@/utils/index.js";
|
||||
import Evaluation from "@/pages/other_package/productInfo/evaluation.vue";
|
||||
@@ -400,6 +486,8 @@ export default {
|
||||
id: 0,
|
||||
shareShow: false,
|
||||
addressShow: false, // 收件地址选择
|
||||
couponPopupShow: false, // 优惠券弹框显示 (图二)
|
||||
goodsCouponList: [], // 商品可用优惠券列表
|
||||
evaluateDialogShow: false, // 评价弹框显示
|
||||
shareOpen: false,
|
||||
tuiList: ["破损", "污渍", "划痕", "标签", "其他"],
|
||||
@@ -1000,6 +1088,7 @@ export default {
|
||||
/<img([^>]*?)>/gi,
|
||||
'<img$1 style="max-width:100%;height:auto;display:block;" loading="lazy">'
|
||||
);
|
||||
this.fetchGoodsCouponList();
|
||||
}
|
||||
},
|
||||
/**
|
||||
@@ -1396,6 +1485,104 @@ export default {
|
||||
onGoMore() {
|
||||
this.evaluateDialogShow = true;
|
||||
},
|
||||
// 获取商品优惠券列表
|
||||
async fetchGoodsCouponList() {
|
||||
if (!this.id) return;
|
||||
try {
|
||||
const res = await getGoodsCouponList({ goodsId: this.id });
|
||||
if (res && res.bizcode === 100) {
|
||||
this.goodsCouponList = res.data || [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("获取商品优惠券失败:", e);
|
||||
}
|
||||
},
|
||||
// 弹窗中点击“立即领取”
|
||||
async onReceiveGoodsCoupon(coupon, index) {
|
||||
const templateId = coupon.templateId || coupon.id;
|
||||
if (!templateId) return;
|
||||
try {
|
||||
const res = await receiveCoupon({ templateId });
|
||||
if (res && res.bizcode === 100) {
|
||||
uni.showToast({
|
||||
title: "领取成功",
|
||||
icon: "success",
|
||||
});
|
||||
this.$set(this.goodsCouponList[index], "received", true);
|
||||
this.$set(this.goodsCouponList[index], "receiveStatus", 1);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res?.msg || "领取失败",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("领取优惠券失败:", e);
|
||||
uni.showToast({
|
||||
title: "领取失败，请重试",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
},
|
||||
getDiscountAmount(coupon) {
|
||||
return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
|
||||
},
|
||||
getThresholdText(coupon) {
|
||||
const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
|
||||
if (threshold === 0) {
|
||||
return "无门槛";
|
||||
}
|
||||
return `满${threshold}元可用`;
|
||||
},
|
||||
getTagText(coupon) {
|
||||
if (coupon.scopeType === 1) return "通用券";
|
||||
if (coupon.scopeType === 2) return "商品券";
|
||||
if (coupon.scopeType === 3 || coupon.scopeType === 4) return "品类券";
|
||||
if (coupon.scopeText && coupon.scopeText.includes("通用")) return "通用券";
|
||||
return "通用券";
|
||||
},
|
||||
getScopeText(coupon) {
|
||||
if (coupon.scopeText) return coupon.scopeText;
|
||||
if (coupon.scopeType === 1) return "所有商品可用";
|
||||
if (coupon.scopeType === 2) return "指定商品可用";
|
||||
if (coupon.scopeType === 3) return "指定类目可用";
|
||||
if (coupon.scopeType === 4) return "指定专区商品可用";
|
||||
return "所有商品可用";
|
||||
},
|
||||
getValidityText(coupon) {
|
||||
if (coupon.validDays && coupon.validDays > 0) {
|
||||
return `领取之日起${coupon.validDays}天内有效`;
|
||||
}
|
||||
if (coupon.useEndTime) {
|
||||
return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
|
||||
}
|
||||
if (coupon.receiveEndTime) {
|
||||
return `截止时间 ${this.formatTime(coupon.receiveEndTime)}`;
|
||||
}
|
||||
return "领取之日起30天内有效";
|
||||
},
|
||||
getCardReceived(coupon) {
|
||||
return coupon.received || coupon.receiveStatus === 1;
|
||||
},
|
||||
getCouponCanReceive(coupon) {
|
||||
return coupon.canReceive !== false && coupon.receiveStatus !== 2;
|
||||
},
|
||||
getCardDisabled(coupon) {
|
||||
return coupon.receiveStatus === 2 || (coupon.canReceive === false && !coupon.received && coupon.receiveStatus !== 1);
|
||||
},
|
||||
formatTime(time) {
|
||||
if (!time) return "";
|
||||
if (typeof time === "string" && time.includes("-")) return time;
|
||||
const date = new Date(Number(time));
|
||||
if (isNaN(date.getTime())) return String(time);
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(date.getDate()).padStart(2, "0");
|
||||
const hh = String(date.getHours()).padStart(2, "0");
|
||||
const mm = String(date.getMinutes()).padStart(2, "0");
|
||||
const ss = String(date.getSeconds()).padStart(2, "0");
|
||||
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1978,9 +2165,288 @@ export default {
|
||||
top: 10000px;
|
||||
left: 10000px;
|
||||
z-index: 1000000000000;
|
||||
// background-color: rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 领券预览标签样式 (图一高保真) */
|
||||
.coupon_tags_preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
overflow: hidden;
|
||||
max-width: 520rpx;
|
||||
|
||||
.preview_coupon_tag {
|
||||
display: inline-block;
|
||||
font-size: 22rpx;
|
||||
color: #ff2442;
|
||||
background: #ffe4e6;
|
||||
border: 1px solid #ff99a4;
|
||||
border-radius: 6rpx;
|
||||
padding: 2rpx 12rpx;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 170rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 领券弹窗组件 (图二高保真) */
|
||||
.goods_coupon_popup_container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
padding: 32rpx 24rpx 40rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.popup_header {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.popup_title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.popup_coupon_scroll {
|
||||
max-height: 700rpx;
|
||||
min-height: 300rpx;
|
||||
|
||||
.popup_coupon_list {
|
||||
padding: 8rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.popup_bottom_btn_wrap {
|
||||
margin-top: 24rpx;
|
||||
padding: 0 16rpx;
|
||||
|
||||
.popup_btn_ok {
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #a855f7 0%, #7a35f6 100%);
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 42rpx;
|
||||
box-shadow: 0 8rpx 20rpx rgba(122, 53, 246, 0.25);
|
||||
transition: transform 0.1s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹窗内的优惠券卡片高保真样式 */
|
||||
.coupon-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(253, 28, 36, 0.06);
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.card-disabled {
|
||||
background: #f5f5f5 !important;
|
||||
|
||||
.card-left {
|
||||
.price-box {
|
||||
color: #a0a0a0 !important;
|
||||
}
|
||||
|
||||
.condition {
|
||||
color: #999999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-title {
|
||||
color: #333333 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-left {
|
||||
width: 170rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #ff2442;
|
||||
|
||||
.currency {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 60rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 24rpx;
|
||||
color: #ff2442;
|
||||
margin-top: 10rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.divider-wrapper {
|
||||
position: relative;
|
||||
width: 2rpx;
|
||||
align-self: stretch;
|
||||
|
||||
.divider-line {
|
||||
height: 100%;
|
||||
border-left: 2rpx dashed #fca5a5;
|
||||
}
|
||||
|
||||
.notch {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.top-notch {
|
||||
top: -12rpx;
|
||||
}
|
||||
|
||||
.bottom-notch {
|
||||
bottom: -12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-disabled .divider-line {
|
||||
border-left: 2rpx dashed #dddddd !important;
|
||||
}
|
||||
|
||||
.card-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 20rpx 20rpx 24rpx;
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 12rpx;
|
||||
|
||||
.coupon-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
.coupon-tag {
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
color: #ff2442;
|
||||
background: #ffe4e6;
|
||||
border: 1px solid #ff99a4;
|
||||
border-radius: 6rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
margin-right: 10rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&.tag-disabled {
|
||||
color: #888888 !important;
|
||||
background: #eeeeee !important;
|
||||
border: 1px solid #cccccc !important;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-scope {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-validity {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
flex-shrink: 0;
|
||||
|
||||
.action-btn {
|
||||
width: 130rpx;
|
||||
height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.btn-claim {
|
||||
background: #ff1e38;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.btn-received {
|
||||
background: #ffe8eb;
|
||||
color: #ff2442;
|
||||
border: 1px solid #ff4d5e;
|
||||
line-height: 52rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.btn-disabled {
|
||||
background: #eeeeee;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user