115 lines
2.1 KiB
Vue
115 lines
2.1 KiB
Vue
<template>
|
|
<u-popup v-model="visible" mode="center" :border-radius="20" :closeable="true">
|
|
<view class="success-popup">
|
|
<view class="success-icon-wrap">
|
|
<u-icon name="checkmark-circle-fill" color="#10B981" size="80"></u-icon>
|
|
</view>
|
|
<text class="success-title">核销成功</text>
|
|
<text class="success-coupon-name">{{ couponName }}</text>
|
|
<view class="success-btns">
|
|
<view class="success-btn primary" @click="onViewCard">查看卡券</view>
|
|
<view class="success-btn secondary" @click="onContinueVerify">继续核销</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* 核销成功弹窗
|
|
* 展示核销成功的卡券名称，提供「查看卡券」「继续核销」两个操作
|
|
*/
|
|
export default {
|
|
name: 'VerifySuccessPopup',
|
|
props: {
|
|
value: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
couponName: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
computed: {
|
|
visible: {
|
|
get() {
|
|
return this.value
|
|
},
|
|
set(val) {
|
|
this.$emit('input', val)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
onViewCard() {
|
|
this.$emit('viewCard')
|
|
},
|
|
onContinueVerify() {
|
|
this.$emit('continueVerify')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.success-popup {
|
|
width: 560rpx;
|
|
padding: 48rpx 40rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.success-icon-wrap {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.success-title {
|
|
display: block;
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: #1a1a1a;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.success-coupon-name {
|
|
display: block;
|
|
font-size: 30rpx;
|
|
color: #646566;
|
|
margin-bottom: 40rpx;
|
|
padding: 0 20rpx;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.success-btns {
|
|
display: flex;
|
|
gap: 24rpx;
|
|
justify-content: center;
|
|
}
|
|
|
|
.success-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
border-radius: 12rpx;
|
|
text-align: center;
|
|
|
|
&.primary {
|
|
background: linear-gradient(135deg, #4297F3 0%, #60A5FA 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
&.secondary {
|
|
background: #f0f2f5;
|
|
color: #646566;
|
|
}
|
|
|
|
&:active {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
</style>
|