mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 10:57:25 +08:00
refactor: 重构多个组件以支持 Vue 3 语法和功能
- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能 - 优化状态管理和事件处理逻辑，简化代码结构 - 更新样式和布局以适应新组件结构 - 添加新功能和修复已知问题，提升用户体验
This commit is contained in:
Yer11214
@@ -1,302 +1,262 @@
|
||||
<template>
|
||||
<view class="coupon-center">
|
||||
<div class="swiper-box">
|
||||
<div class="swiper-item">
|
||||
<div class="scroll-v" enableBackToTop="true" scroll-y>
|
||||
<u-empty mode="coupon" style='margin-top: 20%;' text="没有优惠券了" v-if="whetherEmpty"></u-empty>
|
||||
<view v-else class="coupon-item" v-for="(item, index) in couponList" :key="index">
|
||||
<view class="left">
|
||||
<view class="wave-line">
|
||||
<view class="wave" v-for="(item, index) in 12" :key="index"></view>
|
||||
</view>
|
||||
<view class="message">
|
||||
<view>
|
||||
<!--判断当前优惠券类型 couponType PRICE || DISCOUNT -->
|
||||
<span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</span>
|
||||
<span v-else>{{ item.price }}元</span>
|
||||
</view>
|
||||
<view>满{{unitPrice(item.consumeThreshold) }}元可用</view>
|
||||
</view>
|
||||
<view class="circle circle-top"></view>
|
||||
<view class="circle circle-bottom"></view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view>
|
||||
<!-- 根据scopeType 判断是否是 平台、品类或店铺 -->
|
||||
<view class="coupon-title wes-3" v-if="item.scopeType">
|
||||
<span v-if="item.scopeType == 'ALL' && item.storeId == '0'">全平台</span>
|
||||
<span v-if="item.scopeType == 'PORTION_GOODS_CATEGORY'">仅限品类</span>
|
||||
<view v-else>{{ item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.endTime">有效期至：{{ item.endTime.split(" ")[0] }}</view>
|
||||
</view>
|
||||
<view class="receive" @click="receive(item)">
|
||||
<text>点击</text><br />
|
||||
<text>领取</text>
|
||||
</view>
|
||||
<view class="bg-quan"> 券 </view>
|
||||
</view>
|
||||
<view class="coupon-list">
|
||||
<u-empty mode="coupon" style='margin-top: 20%;' text="没有优惠券了" v-if="whetherEmpty"></u-empty>
|
||||
<view v-else class="coupon-card" v-for="(item, index) in couponList" :key="index">
|
||||
<view class="coupon-card-left">
|
||||
<text class="coupon-price-symbol">¥</text>
|
||||
<text class="coupon-price-value">{{ item.couponType == 'DISCOUNT' ? item.couponDiscount + '折' : unitPrice(item.price) }}</text>
|
||||
</view>
|
||||
<view class="coupon-divider"></view>
|
||||
<view class="coupon-card-right">
|
||||
<view class="coupon-info">
|
||||
<text class="coupon-card-name">{{ item.storeName == 'platform' ? '全平台' : item.storeName + '店铺' }}使用</text>
|
||||
<text class="coupon-card-desc">满{{unitPrice(item.consumeThreshold) }}元可用</text>
|
||||
<text class="coupon-card-time" v-if="item.endTime">有效期至：{{ item.endTime.split(" ")[0] }}</text>
|
||||
</view>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<view class="coupon-claim-btn" @click="receive(item)">
|
||||
领取
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
receiveCoupons
|
||||
} from "@/api/members.js";
|
||||
import {
|
||||
getAllCoupons
|
||||
} from "@/api/promotions.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loadStatus: "more", //下拉状态
|
||||
whetherEmpty: false, //是否为空
|
||||
couponList: [], // 优惠券列表
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
storeId: "", //店铺 id,
|
||||
couponData: ""
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.storeId = option.storeId;
|
||||
this.getCoupon();
|
||||
},
|
||||
onReachBottom() {
|
||||
<script setup lang="ts">
|
||||
import { receiveCoupons } from '@/api/members.js'
|
||||
import { getAllCoupons } from '@/api/promotions.js'
|
||||
import { useStore } from '@/store'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
import {
|
||||
onLoad,
|
||||
onNavigationBarButtonTap,
|
||||
onPullDownRefresh,
|
||||
onReachBottom,
|
||||
} from '@dcloudio/uni-app'
|
||||
import { getCurrentInstance, ref } from 'vue'
|
||||
|
||||
this.loadMore()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
//下拉刷新
|
||||
this.params.pageNumber = 1;
|
||||
this.couponList = [];
|
||||
this.getCoupon();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取当前优惠券
|
||||
*/
|
||||
getCoupon() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
let submitData = {
|
||||
...this.params
|
||||
};
|
||||
// 判断当前是否有店铺
|
||||
this.storeId ? (submitData = {
|
||||
...this.params,
|
||||
storeId: this.storeId
|
||||
}) : "",
|
||||
getAllCoupons(submitData)
|
||||
.then((res) => {
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
uni.stopPullDownRefresh();
|
||||
if (res.data.code == 200) {
|
||||
// 如果请求成功，展示数据并进行展示
|
||||
this.couponData = res.data.result
|
||||
if (this.couponData.total == 0) {
|
||||
// 当本次请求数据为空展示空信息
|
||||
this.whetherEmpty = true;
|
||||
} else {
|
||||
this.couponList.push(...this.couponData.records);
|
||||
this.loadStatus = "noMore";
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 领取优惠券
|
||||
*/
|
||||
receive(val) {
|
||||
this.$u.throttle(()=>{
|
||||
this.fetchCoupon(val)
|
||||
}, 1500)
|
||||
|
||||
},
|
||||
const store = useStore()
|
||||
const { proxy } = getCurrentInstance()!
|
||||
|
||||
fetchCoupon(val){
|
||||
receiveCoupons(val.id).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
uni.showToast({
|
||||
title: "领取成功",
|
||||
icon: "none",
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
const loadStatus = ref('more')
|
||||
const whetherEmpty = ref(false)
|
||||
const couponList = ref<any[]>([])
|
||||
const params = ref({
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const storeId = ref('')
|
||||
const couponData = ref<any>(null)
|
||||
|
||||
/**
|
||||
* 加载更多
|
||||
*/
|
||||
loadMore() {
|
||||
if (this.couponData.total > this.params.pageNumber * this.params.pageSize) {
|
||||
this.params.pageNumber++;
|
||||
this.getCoupon();
|
||||
}
|
||||
},
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/coupon/couponIntro",
|
||||
});
|
||||
},
|
||||
};
|
||||
onLoad((option) => {
|
||||
storeId.value = option.storeId || ''
|
||||
getCoupon()
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
loadMore()
|
||||
})
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
params.value.pageNumber = 1
|
||||
couponList.value = []
|
||||
getCoupon()
|
||||
})
|
||||
|
||||
onNavigationBarButtonTap(() => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/cart/coupon/couponIntro',
|
||||
})
|
||||
})
|
||||
|
||||
function hideLoadingIfNeeded() {
|
||||
if (store.state.isShowToast) uni.hideLoading()
|
||||
}
|
||||
|
||||
function getCoupon() {
|
||||
uni.showLoading({ title: '加载中' })
|
||||
const submitData = storeId.value
|
||||
? { ...params.value, storeId: storeId.value }
|
||||
: { ...params.value }
|
||||
|
||||
getAllCoupons(submitData)
|
||||
.then((res) => {
|
||||
hideLoadingIfNeeded()
|
||||
uni.stopPullDownRefresh()
|
||||
if (res.data.code == 200) {
|
||||
couponData.value = res.data.result
|
||||
if (couponData.value.total == 0) {
|
||||
whetherEmpty.value = true
|
||||
} else {
|
||||
couponList.value.push(...couponData.value.records)
|
||||
loadStatus.value = 'noMore'
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
hideLoadingIfNeeded()
|
||||
})
|
||||
}
|
||||
|
||||
function receive(val: any) {
|
||||
proxy.$u.throttle(() => {
|
||||
fetchCoupon(val)
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
function fetchCoupon(val: any) {
|
||||
receiveCoupons(val.id).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
uni.showToast({ title: '领取成功', icon: 'none' })
|
||||
} else {
|
||||
uni.showToast({ title: res.data.message, icon: 'none' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
if (couponData.value?.total > params.value.pageNumber * params.value.pageSize) {
|
||||
params.value.pageNumber++
|
||||
getCoupon()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coupon-center {
|
||||
height: 100%;
|
||||
.coupon-center {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
.coupon-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 220rpx;
|
||||
margin: 20rpx;
|
||||
.coupon-list {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.left {
|
||||
height: 100%;
|
||||
width: 260rpx;
|
||||
background-color: $light-color;
|
||||
position: relative;
|
||||
.coupon-card {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
border: 1rpx solid #f0f1f5;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
.message {
|
||||
color: $font-color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 40rpx;
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
view:nth-child(1) {
|
||||
font-weight: bold;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: #f7f8fa;
|
||||
border-radius: 50%;
|
||||
left: 204rpx;
|
||||
z-index: 2;
|
||||
box-shadow: inset 0 0 0 1rpx #eceef2;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
font-size: $font-sm;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
top: -16rpx;
|
||||
}
|
||||
|
||||
.wave-line {
|
||||
height: 220rpx;
|
||||
width: 8rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $light-color;
|
||||
overflow: hidden;
|
||||
&::after {
|
||||
bottom: -16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.wave {
|
||||
width: 8rpx;
|
||||
height: 16rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0 16rpx 16rpx 0;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
.coupon-card-left {
|
||||
width: 220rpx;
|
||||
min-height: 180rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: #ff3b30;
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #fff5f5 0%, #ffecec 100%);
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: $bg-color;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 111;
|
||||
}
|
||||
.coupon-price-symbol {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.circle-top {
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
}
|
||||
.coupon-price-value {
|
||||
font-size: 56rpx;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: -1rpx;
|
||||
}
|
||||
|
||||
.circle-bottom {
|
||||
bottom: -20rpx;
|
||||
right: -20rpx;
|
||||
}
|
||||
}
|
||||
.coupon-divider {
|
||||
position: absolute;
|
||||
left: 220rpx;
|
||||
top: 24rpx;
|
||||
bottom: 24rpx;
|
||||
width: 0;
|
||||
border-left: 2rpx dashed #eceef2;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 450rpx;
|
||||
font-size: $font-sm;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.coupon-card-right {
|
||||
flex: 1;
|
||||
padding: 32rpx 32rpx 32rpx 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
>view:nth-child(1) {
|
||||
color: #666666;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
.coupon-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
>view:nth-child(1) {
|
||||
color: #ff6262;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
.coupon-card-name {
|
||||
font-size: 30rpx;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.receive {
|
||||
color: #ffffff;
|
||||
background-color: $main-color;
|
||||
border-radius: 50%;
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
text-align: center;
|
||||
margin-right: 30rpx;
|
||||
vertical-align: middle;
|
||||
padding-top: 8rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.coupon-card-desc {
|
||||
font-size: 24rpx;
|
||||
color: #8a8f99;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bg-quan {
|
||||
width: 244rpx;
|
||||
height: 244rpx;
|
||||
border: 6rpx solid $main-color;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
color: $main-color;
|
||||
text-align: center;
|
||||
padding-top: 30rpx;
|
||||
font-size: 130rpx;
|
||||
position: absolute;
|
||||
right: -54rpx;
|
||||
bottom: -60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-card-time {
|
||||
font-size: 22rpx;
|
||||
color: #b0b3bf;
|
||||
}
|
||||
|
||||
.coupon-title {
|
||||
width: 260rpx;
|
||||
.coupon-claim-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #ff6b35, #ff4b2b);
|
||||
box-shadow: 0 8rpx 16rpx rgba(255, 75, 43, 0.25);
|
||||
|
||||
}
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,52 +2,46 @@
|
||||
<view class="content">
|
||||
<view class="body">
|
||||
<view class="top-view">
|
||||
<view class="title">{{coupon.title}}</view>
|
||||
<view class="price" v-if="coupon.couponType =='PRICE'"><text>￥</text>{{unitPrice(coupon.price)}}</view>
|
||||
<view class="price" v-if="coupon.couponType =='DISCOUNT'">{{coupon.discount}}折</view>
|
||||
<view class="text">满{{coupon.consumeThreshold}}元可用</view>
|
||||
<view class="bg-quan">
|
||||
券
|
||||
</view>
|
||||
<view class="jiao-1" :class="{'used-color':coupon.used_status!=0}">
|
||||
<text class="text-1">{{coupon.used_status == 0?'新到':coupon.used_status_text}}</text>
|
||||
<view class="title">{{ coupon.title }}</view>
|
||||
<view class="price" v-if="coupon.couponType == 'PRICE'"><text>￥</text>{{ unitPrice(coupon.price) }}</view>
|
||||
<view class="price" v-if="coupon.couponType == 'DISCOUNT'">{{ coupon.discount }}折</view>
|
||||
<view class="text">满{{ coupon.consumeThreshold }}元可用</view>
|
||||
<view class="bg-quan">券</view>
|
||||
<view class="jiao-1" :class="{ 'used-color': coupon.used_status != 0 }">
|
||||
<text class="text-1">{{ coupon.used_status == 0 ? '新到' : coupon.used_status_text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-view">
|
||||
<view class="text">• 使用范围：{{
|
||||
coupon.scopeType == 'ALL' && coupon.storeId == '0'
|
||||
? "全平台"
|
||||
: coupon.scopeType == "PORTION_GOODS"
|
||||
? "部分商品"
|
||||
: coupon.scopeType == "PORTION_GOODS_CATEGORY"
|
||||
? "部分分类商品"
|
||||
: coupon.storeName == 'platform' ? '全平台' :coupon.storeName+''
|
||||
}}使用</view>
|
||||
<view class="text">• 有效期至：{{coupon.endTime}}</view>
|
||||
|
||||
coupon.scopeType == 'ALL' && coupon.storeId == '0'
|
||||
? '全平台'
|
||||
: coupon.scopeType == 'PORTION_GOODS'
|
||||
? '部分商品'
|
||||
: coupon.scopeType == 'PORTION_GOODS_CATEGORY'
|
||||
? '部分分类商品'
|
||||
: coupon.storeName == 'platform' ? '全平台' : coupon.storeName + ''
|
||||
}}使用</view>
|
||||
<view class="text">• 有效期至：{{ coupon.endTime }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
coupon: {}, //优惠券数据
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.coupon = JSON.parse(decodeURIComponent(option.item));
|
||||
},
|
||||
};
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
|
||||
const coupon = ref<Record<string, any>>({})
|
||||
|
||||
onLoad((option) => {
|
||||
coupon.value = JSON.parse(decodeURIComponent(option.item))
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page,
|
||||
.content {
|
||||
// background: $main-color;
|
||||
height: 100%;
|
||||
}
|
||||
.body {
|
||||
|
||||
@@ -59,81 +59,59 @@
|
||||
</view>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useCoupon } from "@/api/trade.js";
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import { useCoupon } from '@/api/trade.js'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lightColor: this.$lightColor,
|
||||
current: 0,
|
||||
list: [
|
||||
{
|
||||
name: "可用优惠券",
|
||||
},
|
||||
{
|
||||
name: "不可用优惠券",
|
||||
},
|
||||
],
|
||||
couponsList: [], //优惠券集合
|
||||
params: {
|
||||
//传参
|
||||
memberCouponStatus: "NEW", //优惠券状态
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
scopeId: "", //商品skuid
|
||||
storeId: "", //店铺id
|
||||
totalPrice: "", //价格
|
||||
},
|
||||
routerVal: "", //上级传参
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.routerVal = options;
|
||||
},
|
||||
watch: {
|
||||
current(val) {
|
||||
console.log(this.$store.state.cantUseCoupons);
|
||||
val == 0
|
||||
? (this.couponsList = this.$store.state.canUseCoupons)
|
||||
: (this.couponsList = this.$store.state.cantUseCoupons);
|
||||
},
|
||||
},
|
||||
const store = useStore()
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
console.log(this.routerVal);
|
||||
},
|
||||
const lightColor = computed(() => store.getters.lightColor)
|
||||
const current = ref(0)
|
||||
const list = [
|
||||
{ name: '可用优惠券' },
|
||||
{ name: '不可用优惠券' },
|
||||
]
|
||||
const couponsList = ref<any[]>([])
|
||||
const routerVal = ref<Record<string, any>>({})
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 从vuex中拿取优惠券信息
|
||||
*/
|
||||
init() {
|
||||
this.couponsList = this.$store.state.canUseCoupons;
|
||||
},
|
||||
/**
|
||||
* 领取优惠券
|
||||
*/
|
||||
clickWay(coupon) {
|
||||
useCoupon({
|
||||
memberCouponId: coupon.id,
|
||||
used: !this.routerVal.selectedCoupon.includes(coupon.id),
|
||||
way: this.routerVal.way,
|
||||
}).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
onLoad((options) => {
|
||||
routerVal.value = options || {}
|
||||
})
|
||||
|
||||
watch(current, (val) => {
|
||||
couponsList.value = val == 0
|
||||
? store.state.canUseCoupons
|
||||
: store.state.cantUseCoupons
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
function init() {
|
||||
couponsList.value = store.state.canUseCoupons
|
||||
}
|
||||
|
||||
function clickWay(coupon: any) {
|
||||
useCoupon({
|
||||
memberCouponId: coupon.id,
|
||||
used: !routerVal.value.selectedCoupon.includes(coupon.id),
|
||||
way: routerVal.value.way,
|
||||
}).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
duration: 2000,
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.desc {
|
||||
|
||||
@@ -1,471 +1,393 @@
|
||||
<template>
|
||||
<view class="b-content">
|
||||
<view class="navbar">
|
||||
<!-- 循环出头部tab栏 -->
|
||||
<view
|
||||
v-for="(item, index) in navList"
|
||||
:key="index"
|
||||
class="nav-item"
|
||||
@click="handleTabClick(index)"
|
||||
><text :class="{ current: tabCurrentIndex === index }">{{
|
||||
item.text
|
||||
}}</text></view
|
||||
>
|
||||
</view>
|
||||
<swiper
|
||||
:current="tabCurrentIndex"
|
||||
class="swiper-box"
|
||||
duration="300"
|
||||
@change="changeTab"
|
||||
>
|
||||
<swiper-item
|
||||
class="tab-content"
|
||||
v-for="(navItem, navIndex) in navList"
|
||||
:key="navIndex"
|
||||
>
|
||||
<scroll-view
|
||||
class="list-scroll-content"
|
||||
scroll-y
|
||||
@scrolltolower="loadData"
|
||||
>
|
||||
<!-- 空白页 -->
|
||||
<u-empty
|
||||
mode="coupon"
|
||||
text="暂无优惠券了"
|
||||
v-if="navItem.whetherEmpty"
|
||||
></u-empty>
|
||||
|
||||
<!-- 数据 -->
|
||||
<view
|
||||
class="coupon-item"
|
||||
:class="{ 'coupon-used': navIndex != 0 }"
|
||||
v-for="(coupon, index) in navItem.dataList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="left">
|
||||
<view class="wave-line">
|
||||
<view
|
||||
class="wave"
|
||||
v-for="(item, index) in 12"
|
||||
:key="index"
|
||||
></view>
|
||||
</view>
|
||||
<view class="message">
|
||||
<view class="price" v-if="coupon.couponType == 'DISCOUNT'"
|
||||
>{{ coupon.discount }}折</view
|
||||
>
|
||||
<view class="price" v-else>{{ coupon.price }}元</view>
|
||||
<view class="sub-price"
|
||||
>满{{unitPrice(coupon.consumeThreshold) }}可用</view
|
||||
>
|
||||
</view>
|
||||
<view class="circle circle-top"></view>
|
||||
<view class="circle circle-bottom"></view>
|
||||
</view>
|
||||
<view class="right" v-if="coupon">
|
||||
<view class="content">
|
||||
<view class="title-1">{{ coupon.title }}</view>
|
||||
<view class="title-2"
|
||||
>使用范围：{{
|
||||
coupon.scopeType == "ALL" && coupon.storeId == "0"
|
||||
? "全平台"
|
||||
: coupon.scopeType == "PORTION_GOODS"
|
||||
? "部分商品"
|
||||
: coupon.scopeType == "PORTION_GOODS_CATEGORY"
|
||||
? "部分分类商品"
|
||||
: coupon.storeName == "platform"
|
||||
? "全平台"
|
||||
: coupon.storeName + ""
|
||||
}}使用</view
|
||||
>
|
||||
<view v-if="coupon.endTime">{{ coupon.endTime }}</view>
|
||||
<view @click="couponDetail(coupon)"
|
||||
>详细说明
|
||||
<u-icon
|
||||
style="float: right; margin-top: 10rpx"
|
||||
name="arrow-right"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jiao-1" v-if="navIndex == 0">
|
||||
<text class="text-1">新到</text>
|
||||
<text class="text-2" v-if="coupon.used_status == 1"
|
||||
>将过期</text
|
||||
>
|
||||
</view>
|
||||
<image
|
||||
class="no-icon"
|
||||
v-if="navIndex == 1"
|
||||
src="@/static/img/used.png"
|
||||
></image>
|
||||
<image
|
||||
class="no-icon"
|
||||
v-if="navIndex == 2"
|
||||
src="@/static/img/overdue.png"
|
||||
></image>
|
||||
<view
|
||||
class="receive"
|
||||
v-if="navIndex == 0"
|
||||
@click="useItNow(coupon)"
|
||||
>
|
||||
<text>立即</text><br />
|
||||
<text>使用</text>
|
||||
</view>
|
||||
<view class="bg-quan"> 券 </view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more :status="navItem.loadStatus"></uni-load-more>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMemberCoupons } from "@/api/members.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabCurrentIndex: 0, //tab栏下标默认为0 未使用
|
||||
navList: [
|
||||
//每个tab存储的信息
|
||||
{
|
||||
text: "未使用",
|
||||
loadStatus: "more",
|
||||
dataList: [],
|
||||
params: {
|
||||
memberCouponStatus: "NEW",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 1,
|
||||
},
|
||||
whetherEmpty: false,
|
||||
},
|
||||
{
|
||||
text: "已使用",
|
||||
loadStatus: "more",
|
||||
dataList: [],
|
||||
params: {
|
||||
memberCouponStatus: "USED",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 2,
|
||||
},
|
||||
whetherEmpty: false,
|
||||
},
|
||||
{
|
||||
text: "已过期",
|
||||
loadStatus: "more",
|
||||
dataList: [],
|
||||
params: {
|
||||
memberCouponStatus: "EXPIRE",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 3,
|
||||
},
|
||||
whetherEmpty: false,
|
||||
},
|
||||
],
|
||||
couponList: [], //优惠券列表
|
||||
};
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.navList[this.tabCurrentIndex].params.pageNumber = 1;
|
||||
this.navList[this.tabCurrentIndex].dataList = [];
|
||||
this.getData();
|
||||
},
|
||||
|
||||
watch: {
|
||||
/**
|
||||
* 监听切换顶部tab栏实现刷新数据
|
||||
*/
|
||||
tabCurrentIndex(val) {
|
||||
if (this.navList[val].dataList.length == 0) this.getData();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 顶部tab点击
|
||||
*/
|
||||
handleTabClick(index) {
|
||||
this.tabCurrentIndex = index;
|
||||
},
|
||||
|
||||
/**
|
||||
* 读取优惠券
|
||||
*/
|
||||
getData() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
let index = this.tabCurrentIndex;
|
||||
getMemberCoupons(this.navList[index].params).then((res) => {
|
||||
uni.stopPullDownRefresh();
|
||||
if (res.data.success) {
|
||||
let data = res.data.result.records;
|
||||
if (data.length == 0) {
|
||||
if (res.data.pageNumber == 1) {
|
||||
this.navList[index].whetherEmpty = true;
|
||||
} else {
|
||||
this.navList[index].loadStatus = "noMore";
|
||||
}
|
||||
} else if (data.length < 10) {
|
||||
this.navList[index].loadStatus = "noMore";
|
||||
this.navList[index].dataList.push(...data);
|
||||
} else {
|
||||
this.navList[index].dataList.push(...data);
|
||||
}
|
||||
}
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换tab
|
||||
*/
|
||||
changeTab(e) {
|
||||
this.tabCurrentIndex = e.target.current;
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载数据
|
||||
*/
|
||||
loadData() {
|
||||
let index = this.tabCurrentIndex;
|
||||
if (this.navList[index].loadStatus != "noMore") {
|
||||
this.navList[index].params.pageNumber++;
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 立即使用优惠券
|
||||
*/
|
||||
useItNow(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/navigation/search/searchPage?promotionsId=${item.couponId}&promotionType=COUPON`,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 优惠券详情
|
||||
*/
|
||||
couponDetail(item) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/cart/coupon/couponDetail?item=" +
|
||||
encodeURIComponent(JSON.stringify(item)),
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
$item-color: #fff;
|
||||
|
||||
.b-content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.list-scroll-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.coupon-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 220rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
.left {
|
||||
height: 100%;
|
||||
width: 260rpx;
|
||||
background-color: $light-color;
|
||||
position: relative;
|
||||
|
||||
.message {
|
||||
color: $font-color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 40rpx;
|
||||
|
||||
view:nth-child(1) {
|
||||
font-weight: bold;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
font-size: $font-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.wave-line {
|
||||
height: 220rpx;
|
||||
width: 8rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $light-color;
|
||||
overflow: hidden;
|
||||
|
||||
.wave {
|
||||
width: 8rpx;
|
||||
height: 16rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0 16rpx 16rpx 0;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: $bg-color;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 111;
|
||||
}
|
||||
|
||||
.circle-top {
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
}
|
||||
|
||||
.circle-bottom {
|
||||
bottom: -20rpx;
|
||||
right: -20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 450rpx;
|
||||
font-size: $font-sm;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.content {
|
||||
color: #666666;
|
||||
margin-left: 20rpx;
|
||||
line-height: 2em;
|
||||
> view:nth-child(1) {
|
||||
color: #ff6262;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.title-1,
|
||||
.title-2,
|
||||
.title-3 {
|
||||
font-size: 25rpx;
|
||||
}
|
||||
}
|
||||
.receive {
|
||||
color: #ffffff;
|
||||
background-color: $main-color;
|
||||
border-radius: 50%;
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
text-align: center;
|
||||
margin-right: 48rpx;
|
||||
vertical-align: middle;
|
||||
padding-top: 8rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.jiao-1 {
|
||||
background-color: #ffc71c;
|
||||
width: 400rpx;
|
||||
transform: rotate(45deg);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
color: #ffffff;
|
||||
right: -130rpx;
|
||||
top: 0;
|
||||
.text-1 {
|
||||
margin-left: 68rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.text-2 {
|
||||
margin-left: 68rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.no-icon {
|
||||
border-radius: 50%;
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
margin-right: 48rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.bg-quan {
|
||||
width: 244rpx;
|
||||
height: 244rpx;
|
||||
border: 6rpx solid $main-color;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
color: $main-color;
|
||||
text-align: center;
|
||||
padding-top: 30rpx;
|
||||
font-size: 130rpx;
|
||||
position: absolute;
|
||||
right: -54rpx;
|
||||
bottom: -60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
height: 80rpx;
|
||||
padding: 0 5px;
|
||||
background: #fff;
|
||||
color: $light-color;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 26rpx;
|
||||
color: $light-color;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text {
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.current {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
left: 108rpx;
|
||||
width: 30rpx;
|
||||
border-bottom: 2px solid $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="b-content">
|
||||
<view class="coupon-tabs">
|
||||
<u-tabs
|
||||
:list="navList"
|
||||
keyName="text"
|
||||
:scrollable="false"
|
||||
:inactiveStyle="{ color: '#333' }"
|
||||
v-model:current="tabCurrentIndex"
|
||||
:lineColor="lightColor"
|
||||
:activeStyle="{ color: lightColor }"
|
||||
></u-tabs>
|
||||
</view>
|
||||
<swiper
|
||||
:current="tabCurrentIndex"
|
||||
class="swiper-box"
|
||||
duration="300"
|
||||
@change="changeTab"
|
||||
>
|
||||
<swiper-item
|
||||
class="tab-content"
|
||||
v-for="(navItem, navIndex) in navList"
|
||||
:key="navIndex"
|
||||
>
|
||||
<scroll-view
|
||||
class="list-scroll-content"
|
||||
scroll-y
|
||||
@scrolltolower="loadData"
|
||||
>
|
||||
<u-empty
|
||||
mode="coupon"
|
||||
text="暂无优惠券了"
|
||||
v-if="navItem.whetherEmpty"
|
||||
></u-empty>
|
||||
|
||||
<view
|
||||
class="coupon-card"
|
||||
:class="{ 'coupon-used': navIndex != 0, 'coupon-expired': navIndex == 2 }"
|
||||
v-for="(coupon, index) in navItem.dataList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="coupon-card-left">
|
||||
<text class="coupon-price-symbol" v-if="coupon.couponType != 'DISCOUNT'">¥</text>
|
||||
<text class="coupon-price-value">{{ coupon.couponType == 'DISCOUNT' ? coupon.discount + '折' : unitPrice(coupon.price) }}</text>
|
||||
</view>
|
||||
<view class="coupon-divider"></view>
|
||||
<view class="coupon-card-right">
|
||||
<view class="coupon-info">
|
||||
<text class="coupon-card-name">{{ coupon.title }}</text>
|
||||
<text class="coupon-card-desc">使用范围：{{
|
||||
coupon.scopeType == "ALL" && coupon.storeId == "0"
|
||||
? "全平台"
|
||||
: coupon.scopeType == "PORTION_GOODS"
|
||||
? "部分商品"
|
||||
: coupon.scopeType == "PORTION_GOODS_CATEGORY"
|
||||
? "部分分类商品"
|
||||
: coupon.storeName == "platform"
|
||||
? "全平台"
|
||||
: coupon.storeName + ""
|
||||
}}使用</text>
|
||||
<text class="coupon-card-time" v-if="coupon.endTime">{{ coupon.endTime }}</text>
|
||||
</view>
|
||||
<view class="coupon-status-btn" v-if="navIndex == 0" @click="useItNow(coupon)">
|
||||
立即使用
|
||||
</view>
|
||||
<view class="coupon-status-btn disabled" v-else-if="navIndex == 1">
|
||||
已使用
|
||||
</view>
|
||||
<view class="coupon-status-btn disabled" v-else>
|
||||
已过期
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more :status="navItem.loadStatus"></uni-load-more>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getMemberCoupons } from '@/api/members.js'
|
||||
import { useStore } from '@/store'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const lightColor = computed(() => store.getters.lightColor)
|
||||
const tabCurrentIndex = ref(0)
|
||||
const navList = ref([
|
||||
{
|
||||
text: '未使用',
|
||||
loadStatus: 'more',
|
||||
dataList: [] as any[],
|
||||
params: {
|
||||
memberCouponStatus: 'NEW',
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 1,
|
||||
},
|
||||
whetherEmpty: false,
|
||||
},
|
||||
{
|
||||
text: '已使用',
|
||||
loadStatus: 'more',
|
||||
dataList: [] as any[],
|
||||
params: {
|
||||
memberCouponStatus: 'USED',
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 2,
|
||||
},
|
||||
whetherEmpty: false,
|
||||
},
|
||||
{
|
||||
text: '已过期',
|
||||
loadStatus: 'more',
|
||||
dataList: [] as any[],
|
||||
params: {
|
||||
memberCouponStatus: 'EXPIRE',
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 3,
|
||||
},
|
||||
whetherEmpty: false,
|
||||
},
|
||||
])
|
||||
|
||||
onShow(() => {
|
||||
navList.value[tabCurrentIndex.value].params.pageNumber = 1
|
||||
navList.value[tabCurrentIndex.value].dataList = []
|
||||
getData()
|
||||
})
|
||||
|
||||
watch(tabCurrentIndex, (val) => {
|
||||
if (navList.value[val].dataList.length == 0) getData()
|
||||
})
|
||||
|
||||
function hideLoadingIfNeeded() {
|
||||
if (store.state.isShowToast) uni.hideLoading()
|
||||
}
|
||||
|
||||
function handleTabClick(index: number) {
|
||||
tabCurrentIndex.value = index
|
||||
}
|
||||
|
||||
function getData() {
|
||||
uni.showLoading({ title: '加载中' })
|
||||
const index = tabCurrentIndex.value
|
||||
getMemberCoupons(navList.value[index].params).then((res) => {
|
||||
uni.stopPullDownRefresh()
|
||||
if (res.data.success) {
|
||||
const data = res.data.result.records
|
||||
if (data.length == 0) {
|
||||
if (res.data.pageNumber == 1) {
|
||||
navList.value[index].whetherEmpty = true
|
||||
} else {
|
||||
navList.value[index].loadStatus = 'noMore'
|
||||
}
|
||||
} else if (data.length < 10) {
|
||||
navList.value[index].loadStatus = 'noMore'
|
||||
navList.value[index].dataList.push(...data)
|
||||
} else {
|
||||
navList.value[index].dataList.push(...data)
|
||||
}
|
||||
}
|
||||
hideLoadingIfNeeded()
|
||||
})
|
||||
}
|
||||
|
||||
function changeTab(e: any) {
|
||||
tabCurrentIndex.value = e.detail.current
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
const index = tabCurrentIndex.value
|
||||
if (navList.value[index].loadStatus != 'noMore') {
|
||||
navList.value[index].params.pageNumber++
|
||||
getData()
|
||||
}
|
||||
}
|
||||
|
||||
function useItNow(item: any) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/navigation/search/searchPage?promotionsId=${item.couponId}&promotionType=COUPON`,
|
||||
})
|
||||
}
|
||||
|
||||
function couponDetail(item: any) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/cart/coupon/couponDetail?item=' + encodeURIComponent(JSON.stringify(item)),
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.b-content {
|
||||
background: #f7f8fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.coupon-tabs {
|
||||
background: #fff;
|
||||
height: 88rpx;
|
||||
box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
:deep(.u-tabs),
|
||||
:deep(.u-tabs__wrapper),
|
||||
:deep(.u-tabs__wrapper__scroll-view-wrapper),
|
||||
:deep(.u-tabs__wrapper__scroll-view),
|
||||
:deep(.u-tabs__wrapper__nav) {
|
||||
background: #fff;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
:deep(.u-tabs__wrapper__nav__item) {
|
||||
min-height: 88rpx;
|
||||
}
|
||||
|
||||
:deep(.u-tabs__wrapper__nav__item__text) {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: calc(100vh - 88rpx - var(--status-bar-height));
|
||||
}
|
||||
|
||||
.list-scroll-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
border: 1rpx solid #f0f1f5;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: #f7f8fa;
|
||||
border-radius: 50%;
|
||||
left: 204rpx;
|
||||
z-index: 2;
|
||||
box-shadow: inset 0 0 0 1rpx #eceef2;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -16rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -16rpx;
|
||||
}
|
||||
|
||||
&.coupon-used {
|
||||
.coupon-card-left {
|
||||
background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
|
||||
color: #999;
|
||||
}
|
||||
.coupon-status-btn {
|
||||
background: #ccc;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.coupon-expired {
|
||||
.coupon-card-left {
|
||||
background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
|
||||
color: #999;
|
||||
}
|
||||
.coupon-status-btn {
|
||||
background: #ccc;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-card-left {
|
||||
width: 220rpx;
|
||||
min-height: 180rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: #ff3b30;
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #fff5f5 0%, #ffecec 100%);
|
||||
}
|
||||
|
||||
.coupon-price-symbol {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.coupon-price-value {
|
||||
font-size: 56rpx;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: -1rpx;
|
||||
}
|
||||
|
||||
.coupon-divider {
|
||||
position: absolute;
|
||||
left: 220rpx;
|
||||
top: 24rpx;
|
||||
bottom: 24rpx;
|
||||
width: 0;
|
||||
border-left: 2rpx dashed #eceef2;
|
||||
}
|
||||
|
||||
.coupon-card-right {
|
||||
flex: 1;
|
||||
padding: 32rpx 32rpx 32rpx 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.coupon-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.coupon-card-name {
|
||||
font-size: 30rpx;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.coupon-card-desc {
|
||||
font-size: 24rpx;
|
||||
color: #8a8f99;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.coupon-card-time {
|
||||
font-size: 22rpx;
|
||||
color: #b0b3bf;
|
||||
}
|
||||
|
||||
.coupon-status-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #ff6b35, #ff4b2b);
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: #ccc;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user