295 lines
6.9 KiB
Vue
295 lines
6.9 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="coupons">
|
|
<view class="red_envelope"></view>
|
|
<view class="title">满减券每日限量</view>
|
|
<view class="list">
|
|
<view class="list_box" v-for="(item,index) in discount_for_a_amount" :key="index">
|
|
<view class="l_left"><text>￥</text>{{item.discount}}</view>
|
|
<view class="l_cont">
|
|
<view class="lt_top">满{{item.for_a_amount}}可用</view>
|
|
<view class="lt_footer">消费后次日领</view>
|
|
</view>
|
|
<view class="l_right" v-if="!item.got" @click="receive_coupon(item.id)">立即领券</view>
|
|
<view class="l_right l_right_y" v-else>已领取</view>
|
|
|
|
</view>
|
|
<!-- <view class="list_box1">
|
|
<view class="l_left"><text>￥</text>5</view>
|
|
<view class="l_cont">
|
|
<view class="lt_top">满20可用</view>
|
|
<view class="lt_footer">神券商家可有 消费后次日领</view>
|
|
</view>
|
|
<view class="l_right"></view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<view class="coupons coupons1">
|
|
<view class="title">代金券天天领</view>
|
|
<view class="red_envelope"></view>
|
|
<view class="list">
|
|
<view class="list_box2" v-for="(item,index) in deduction" :key='index' >
|
|
<view class="l2_top"><text>￥</text>{{item.price}}</view>
|
|
<view class="l2_title">无门槛</view>
|
|
<view class="l_right" v-if="!item.got" @click="receive_coupon(item.id)">立即领券</view>
|
|
<view class="l_right l_right_y" v-else>已领取</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="coupons">
|
|
<view class="title">全场促销折扣券</view>
|
|
<view class="list">
|
|
<view class="list_box" v-for="(item,index) in discount" :key="index">
|
|
<view class="l_left">{{(item.precent/10).toFixed(0)}}<text>折</text></view>
|
|
<view class="l_cont">
|
|
<view class="lt_top">指定商品折上折</view>
|
|
<view class="lt_footer">神券商家可有 消费后次日领</view>
|
|
</view>
|
|
<view class="l_right" v-if="!item.got" @click="receive_coupon(item.id)">立即领券</view>
|
|
<view class="l_right l_right_y" v-else>已领取</view>
|
|
</view>
|
|
<!-- <view class="list_box1">
|
|
<view class="l_left"><text>￥</text>5</view>
|
|
<view class="l_cont">
|
|
<view class="lt_top">满20可用</view>
|
|
<view class="lt_footer">神券商家可有 消费后次日领</view>
|
|
</view>
|
|
<view class="l_right"></view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { coupon } from '@/api/coupon.js'
|
|
let discount_for_a_amount = ref([]) // 满减券
|
|
let deduction = ref([]) // 抵扣券
|
|
let discount = ref([]) // 折扣券
|
|
const data_get_coupon = async () => {
|
|
let user = uni.getStorageSync('user')
|
|
let { coupon: data } : any = await coupon.get_coupon({ user_id: user.id })
|
|
discount_for_a_amount.value = data.filter((item : any) => {
|
|
return item.type === 'discount_for_a_amount'
|
|
})
|
|
deduction.value = data.filter((item : any) => {
|
|
return item.type === 'deduction'
|
|
})
|
|
discount.value = data.filter((item : any) => {
|
|
return item.type === 'discount'
|
|
})
|
|
}
|
|
const receive_coupon = async (id : any) => {
|
|
console.log(id, 'id')
|
|
let user = uni.getStorageSync('user')
|
|
let coupon_id = id
|
|
console.log({ user_id: user.id, coupon_id })
|
|
let data = await coupon.post_coupon({ user_id: user.id, coupon_id })
|
|
console.log(data)
|
|
data_get_coupon()
|
|
}
|
|
onMounted(() => {
|
|
data_get_coupon()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
height: 100vh;
|
|
width: 100%;
|
|
background: url('@/static/my/bg.jpg') no-repeat transparent;
|
|
background-size: 100% 100%;
|
|
padding: 20rpx;
|
|
|
|
.coupons {
|
|
margin-top: 50rpx;
|
|
position: relative;
|
|
border-radius: 15rpx;
|
|
background-color: #fff;
|
|
padding: 10rpx;
|
|
width: 100%;
|
|
|
|
.red_envelope {
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
background: url('@/static/my/red_envelope.png') no-repeat transparent;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: -50rpx;
|
|
left: -25rpx;
|
|
z-index: 1;
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
color: #305def;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.list {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 10rpx;
|
|
|
|
.list_box {
|
|
padding-left: 10rpx;
|
|
padding-right: 10rpx;
|
|
margin-top: 20rpx;
|
|
align-items: center;
|
|
height: 132rpx;
|
|
background: url('@/static/my/gr.png') no-repeat transparent;
|
|
background-size: 100% 100%;
|
|
color: #305def;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.l_left {
|
|
font-weight: bold;
|
|
font-size: 50rpx;
|
|
|
|
text {
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
|
|
.l_cont {
|
|
.lt_top {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.lt_footer {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.l_right {
|
|
width: 180rpx;
|
|
padding: 10rpx 20rpx;
|
|
background-color: #305def;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 30rpx;
|
|
}
|
|
}
|
|
|
|
.list_box1 {
|
|
margin-top: 20rpx;
|
|
align-items: center;
|
|
height: 132rpx;
|
|
padding: 10rpx;
|
|
background: url('@/static/my/grc.png') no-repeat transparent;
|
|
background-size: 100% 100%;
|
|
color: #7e91b4;
|
|
display: flex;
|
|
|
|
.l_left {
|
|
margin-left: 30rpx;
|
|
font-weight: bold;
|
|
font-size: 50rpx;
|
|
|
|
text {
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
|
|
.l_cont {
|
|
margin-left: 40rpx;
|
|
|
|
.lt_top {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.lt_footer {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.l_right {
|
|
margin-left: 90rpx;
|
|
width: 110rpx;
|
|
height: 100rpx;
|
|
background: url('@/static/my/over.png') no-repeat transparent;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.coupons1 {
|
|
.red_envelope {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
background: url('@/static/my/logo.png') no-repeat transparent;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: -50rpx;
|
|
left: -10rpx;
|
|
z-index: 1;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.list_box2 {
|
|
margin-bottom: 20rpx;
|
|
margin-right: 25rpx;
|
|
width: 200rpx;
|
|
height: 180rpx;
|
|
background: url('@/static/my/bg1.png') no-repeat transparent;
|
|
background-size: 100% 100%;
|
|
color: #305def;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.l2_top {
|
|
margin-top: 10rpx;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
|
|
text {
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
|
|
.l2_title {
|
|
font-size: 24rpx;
|
|
}
|
|
.l_right {
|
|
margin-top: 30rpx;
|
|
width: 140rpx;
|
|
padding: 10rpx 20rpx;
|
|
background-color: #305def;
|
|
color: #fff;
|
|
font-size: 16rpx;
|
|
text-align: center;
|
|
border-radius: 30rpx;
|
|
}
|
|
|
|
|
|
.l2_footer {
|
|
font-size: 24rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
&:nth-child(3n) {
|
|
margin-right: 0rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
.l_right_y{
|
|
background-color: #92ACFF !important;
|
|
}
|
|
}
|
|
</style> |