198 lines
6.5 KiB
Vue
198 lines
6.5 KiB
Vue
<template>
|
||
<view :class="status !== 1 ? 'gray-scale' : ''" class="card flex mt-[20rpx]">
|
||
<view class="left text-center">
|
||
<view class="pt-[36rpx] text-[#ff2c3c]">
|
||
<text class="text-2xl text-semibold">￥</text
|
||
><text class="text-[40rpx] text-semibold">{{ item.money }}</text>
|
||
</view>
|
||
<view class="pt-[8rpx] pb-[32rpx] text-muted text-[24rpx] truncate">{{
|
||
item.coupon_describe
|
||
}}</view>
|
||
</view>
|
||
|
||
<view class="right flex-1 px-[20rpx] pt-[20rpx] bg-white">
|
||
<u-image
|
||
v-show="item.btn === 2 || showDoneBtn"
|
||
class="img"
|
||
src="@/static/images/received.png"
|
||
width="70"
|
||
height="54"
|
||
/>
|
||
<view class="title text-lg text-[#333] font-medium pb-[16rpx] truncate">{{
|
||
item.name
|
||
}}</view>
|
||
<view class="flex justify-between">
|
||
<view
|
||
class="date text-xs text-[#666] py-[11rpx]"
|
||
:class="{ 'w-[307rpx] break-all': showBtn }"
|
||
>
|
||
<view v-if="item.is_countdown && timeStamp >= 0" class="text-[#ff2c3c] flex">
|
||
即将过期，仅剩余
|
||
|
||
<u-count-down
|
||
:timestamp="timeStamp"
|
||
format="HH:mm:ss"
|
||
:font-size="24"
|
||
:separator-size="26"
|
||
@end="timeStamp = 0"
|
||
/>
|
||
</view>
|
||
<text v-else>{{ item.use_time_desc }}</text>
|
||
</view>
|
||
|
||
<view v-if="showBtn" class="btns flex-1">
|
||
<!-- 1-立即领取;2-继续领取;3-已领完; -->
|
||
<button
|
||
class="btn-one text-[#ff2c3c] bg-white"
|
||
v-if="item.btn !== 3 && showDoneBtn"
|
||
@click="goPage"
|
||
>
|
||
去使用
|
||
</button>
|
||
<button
|
||
class="btn-two bg-[#ff2c3c] text-white"
|
||
v-if="item.btn === 1 && !showDoneBtn"
|
||
@click="toReceive(item.id)"
|
||
>
|
||
立即领取
|
||
</button>
|
||
<button
|
||
class="btn-two bg-[#ff2c3c] text-white"
|
||
v-if="item.btn === 2 && !showDoneBtn"
|
||
@click="toReceive(item.id)"
|
||
>
|
||
继续领取
|
||
</button>
|
||
<button class="btn-three bg-[#ccc] text-white" v-if="item.btn === 3" disabled>
|
||
已领完
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="footer flex justify-between py-[8rpx] mt-[16rpx]">
|
||
<!-- 1=全部商品；2=指定商品；3=指定商品不可用 -->
|
||
<view class="text-xs text-[#666]" v-if="item?.use_goods_type === 1"
|
||
>全部商品可用</view
|
||
>
|
||
<view class="text-xs text-[#666]" v-if="item?.use_goods_type === 2"
|
||
>指定商品可用</view
|
||
>
|
||
<view class="text-xs text-[#666]" v-if="item?.use_goods_type === 3"
|
||
>指定商品不可用</view
|
||
>
|
||
<u-icon
|
||
v-show="item?.use_goods_type !== 1 && !isShow"
|
||
name="arrow-up"
|
||
@click="isShow = !isShow"
|
||
/>
|
||
<u-icon
|
||
v-show="item?.use_goods_type !== 1 && isShow"
|
||
name="arrow-down"
|
||
@click="isShow = !isShow"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bg-white py-[15rpx] px-[20rpx]" v-show="isShow">
|
||
<view class="text-[#999] text-xs pt-2">{{
|
||
item.use_goods_type === 3 ? '不可用商品：' : '可用商品：'
|
||
}}</view>
|
||
<view v-for="iten in item.goods" :key="iten.id" class="text-[#999] text-xs pt-2">{{
|
||
iten.name
|
||
}}</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, watchEffect } from 'vue'
|
||
// import { apiReceiveCoupon } from '@/api/coupon'
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
item: any
|
||
status?: number | undefined | string // 状态:1-未使用;2-已使用;3-已过期
|
||
showBtn?: boolean // 是否显示按钮
|
||
}>(),
|
||
{
|
||
item: {},
|
||
status: 1,
|
||
showBtn: true
|
||
}
|
||
)
|
||
|
||
const timeStamp = ref<number | string | undefined>()
|
||
const StartTime = Date.now() / 1000
|
||
const EndTime = +props.item.invalid_time
|
||
watchEffect(() => {
|
||
timeStamp.value = Math.floor(EndTime - StartTime) * 1000
|
||
})
|
||
|
||
const isShow = ref(false)
|
||
|
||
// 去领优惠券
|
||
const showDoneBtn = ref(false)
|
||
const toReceive = async (id) => {
|
||
// try {
|
||
// await apiReceiveCoupon({ id })
|
||
// uni.$u.toast('领取成功')
|
||
// showDoneBtn.value = true
|
||
// } catch (error) {
|
||
// uni.$u.toast(error)
|
||
// }
|
||
}
|
||
|
||
// 页面跳转
|
||
const goPage = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/index/index'
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.card {
|
||
-webkit-mask-image: radial-gradient(circle at 178rpx 10rpx, transparent 10rpx, red 11rpx),
|
||
radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
|
||
-webkit-mask-size: 100%, 4rpx 8rpx;
|
||
-webkit-mask-repeat: repeat, repeat-y;
|
||
-webkit-mask-position: 0 -10rpx, 175rpx;
|
||
-webkit-mask-composite: source-out;
|
||
mask-composite: subtract;
|
||
.left {
|
||
box-sizing: border-box;
|
||
width: 180rpx;
|
||
background: linear-gradient(to right, #ff2c3c 11rpx, white 15rpx);
|
||
|
||
border-top-left-radius: 14rpx;
|
||
border-bottom-left-radius: 14rpx;
|
||
}
|
||
.right {
|
||
position: relative;
|
||
.img {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
.btn-one,
|
||
.btn-two,
|
||
.btn-three {
|
||
height: 52rpx;
|
||
line-height: 52rpx;
|
||
border-radius: 9999rpx;
|
||
border: 1rpx solid #ff2c3c;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
}
|
||
.btn-three {
|
||
border: 1rpx solid #ccc;
|
||
}
|
||
.footer {
|
||
border-top: 1px solid #eaeaea;
|
||
}
|
||
}
|
||
}
|
||
.gray-scale {
|
||
filter: grayscale(1);
|
||
}
|
||
</style>
|