128 lines
2.5 KiB
Vue
128 lines
2.5 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 v-if="redirectUrl && redirectRemark" class="success-btn primary" @click="onRedirect">{{ redirectRemark }}</view>
|
||
<view v-else class="success-btn primary" @click="onViewCard">查看卡券</view>
|
||
<view class="success-btn secondary" @click="onContinueVerify">继续核销</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 核销成功弹窗
|
||
* 展示核销成功的卡券名称，提供「查看卡券」「继续核销」两个操作
|
||
* 若传入 redirectUrl、redirectRemark，则额外显示重定向按钮（按钮文字为 redirectRemark）
|
||
*/
|
||
export default {
|
||
name: 'VerifySuccessPopup',
|
||
props: {
|
||
value: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
couponName: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
redirectUrl: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
redirectRemark: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
computed: {
|
||
visible: {
|
||
get() {
|
||
return this.value
|
||
},
|
||
set(val) {
|
||
this.$emit('input', val)
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
onViewCard() {
|
||
this.$emit('viewCard')
|
||
},
|
||
onContinueVerify() {
|
||
this.$emit('continueVerify')
|
||
},
|
||
onRedirect() {
|
||
this.$emit('redirect')
|
||
}
|
||
}
|
||
}
|
||
</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>
|