You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
3.3 KiB
135 lines
3.3 KiB
<template>
|
|
<!-- 20221018 -->
|
|
<view class="receive-coupon-layer-cn">
|
|
|
|
<!-- 组件内容 -->
|
|
<view class="cn-content">
|
|
|
|
<!-- 浮层组件 -->
|
|
<ty-layer-pop-up v-if="show" @overlayClick="close">
|
|
|
|
<!-- 浮层内容 -->
|
|
<view @click.stop="">
|
|
|
|
<!-- 主内容板块 高度 上下内边距+首尾文案高度+优惠券块上下边距 40*2+80+40+60+60+index*140+(index-1)*20 = -->
|
|
<view class="layer-content margin-lr-75 padding-40 radius-20"
|
|
:style="{'margin-top': 'calc(50vh - 150rpx - ' + 80 * list.length + 'rpx)'}">
|
|
<!-- 头部文案 -->
|
|
<view class="text-center text-ff">
|
|
<view class="line-height-80 text-60">{{text}}</view>
|
|
<view class="line-height-40 text-32">{{subText}}</view>
|
|
</view>
|
|
|
|
<!-- 优惠券列表 -->
|
|
<view class="margin-top-30">
|
|
<view class="margin-top-20" v-for="(item,index) in list" :key="index">
|
|
<!-- 单张优惠券 140rpx-->
|
|
<view class="padding-tb-15 flex align-center bg-ff">
|
|
<!-- 优惠券左侧 -->
|
|
<view class="flex flex-direction align-center" style="width: 125rpx;">
|
|
<view class="flex align-start justify-center">
|
|
<text class="text-24 text-main">¥</text>
|
|
<text class="line-height-70 text-44 text-main">{{item.price}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 优惠券右侧 -->
|
|
<view class="border-left flex-one padding-lr-20">
|
|
<text class="line-height-40 text-28 text-cut-one">{{item.name}}</text>
|
|
<view class="margin-top-10">
|
|
<view class="line-height-30 text-20 text-98 text-cut-one">
|
|
· {{item.brief}}
|
|
</view>
|
|
<view class="line-height-30 text-20 text-98 text-cut-one">
|
|
· 满{{item.limit_price}}元可用
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 尾部文案 -->
|
|
<view class="margin-top-30 height-60 line-30 text-center">
|
|
<text class="text-24 text-ff">{{footerText}}</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 关闭按钮 -->
|
|
<view>
|
|
<view class="margin-top-40 text-center">
|
|
<text class="tyIcon-guanbi1 text-ff text-48" @click="close"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</ty-layer-pop-up>
|
|
</view>
|
|
|
|
<!-- 组件浮层 -->
|
|
<view class="cn-layer">
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import common from '@/components/hzjc/utils/common.js';
|
|
export default {
|
|
props: {
|
|
// 是否显示该浮层
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 获得的优惠券列表
|
|
list: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
// 主标题文案
|
|
text: {
|
|
type: String,
|
|
default: '您好！初次见面'
|
|
},
|
|
// 副标题文案
|
|
subText: {
|
|
type: String,
|
|
default: '送您几张优惠券随便花花吧～'
|
|
},
|
|
// 尾部文案
|
|
footerText: {
|
|
type: String,
|
|
default: '不知不觉这么多优惠券\n放入了您的账户'
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* 关闭浮层
|
|
* @date 2022-10-18
|
|
*/
|
|
close() {
|
|
// 更新显示状态为false
|
|
this.$emit("update:show", false)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.layer-content {
|
|
background: linear-gradient(to left top, var(--auxiliary), var(--auxiliaryGradient));
|
|
}
|
|
|
|
.border-left {
|
|
border-left: 1rpx dashed #e6e6e6;
|
|
}
|
|
</style>
|