1
This commit is contained in:
187
src/components/RefundButton.vue
Normal file
187
src/components/RefundButton.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<view class="refund-button-wrapper" :class="{ 'compact-mode': compact }" :style="wrapperStyle">
|
||||
<view class="pay-button-container">
|
||||
<pay-button-sdk
|
||||
:mode="mode"
|
||||
:order-status="orderStatus"
|
||||
:order-id="orderId"
|
||||
:refund-total-amount="refundTotalAmount"
|
||||
@getgoodsinfo="handleGetGoodsInfo"
|
||||
@placeorder="handlePlaceOrder"
|
||||
@pay="handlePay"
|
||||
@refund="handleRefund"
|
||||
@error="handleError"
|
||||
|
||||
>
|
||||
<text class="refund-text">退款</text>
|
||||
</pay-button-sdk>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "RefundButton",
|
||||
props: {
|
||||
// 模式：1-仅退款，2-退货退款
|
||||
mode: {
|
||||
type: [String, Number],
|
||||
default: '1'
|
||||
},
|
||||
// 订单状态：1-待发货，2-待收货，3-已完成
|
||||
orderStatus: {
|
||||
type: [String, Number],
|
||||
default: '1'
|
||||
},
|
||||
// 订单ID
|
||||
orderId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
// 退款总金额（单位：分）
|
||||
refundTotalAmount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 是否使用紧凑模式（适合订单列表页）
|
||||
compact: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wrapperStyle() {
|
||||
if (!this.compact) {
|
||||
return {
|
||||
flex: '1',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
height: '48px'
|
||||
}
|
||||
}
|
||||
return {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 抖音官方组件生命周期回调 - 获取商品信息
|
||||
handleGetGoodsInfo(e) {
|
||||
console.log('抖音组件获取商品信息回调:', e.detail)
|
||||
// 退款模式下不需要额外处理，直接返回成功即可
|
||||
e.detail.success({
|
||||
// 可根据实际业务补充商品信息
|
||||
amount: this.refundTotalAmount
|
||||
})
|
||||
},
|
||||
|
||||
// 抖音官方组件生命周期回调 - 下单
|
||||
handlePlaceOrder(e) {
|
||||
console.log('抖音组件下单回调:', e.detail)
|
||||
// 退款模式下不需要额外处理，直接返回成功即可
|
||||
e.detail.success({
|
||||
orderId: this.orderId
|
||||
})
|
||||
},
|
||||
|
||||
// 抖音官方组件生命周期回调 - 支付
|
||||
handlePay(e) {
|
||||
console.log('抖音组件支付回调:', e.detail)
|
||||
// 退款模式下不需要额外处理，直接返回成功即可
|
||||
e.detail.success()
|
||||
},
|
||||
|
||||
// 退款成功回调
|
||||
handleRefund(e) {
|
||||
console.log('抖音退款组件退款成功回调:', e.detail)
|
||||
this.$emit('refund', {
|
||||
detail: {
|
||||
status: 'success',
|
||||
data: e.detail
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 错误回调
|
||||
handleError(e) {
|
||||
console.error('抖音退款组件错误回调:', e.detail)
|
||||
this.$emit('error', {
|
||||
detail: {
|
||||
status: 'error',
|
||||
message: e.detail.errMsg || '退款失败'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.refund-button-wrapper {
|
||||
height: 73rpx !important;
|
||||
border-radius: 100px;
|
||||
border: 2rpx solid #FF19A0;
|
||||
color: #FF19A0;
|
||||
background: transparent;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
flex: 1 !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pay-button-container {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1 !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.refund-button-sdk {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
flex: 1 !important;
|
||||
}
|
||||
|
||||
// 强制设置 pay-button-sdk 内部元素样式
|
||||
::v-deep .pay-button-sdk {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
min-width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
flex: 1 !important;
|
||||
}
|
||||
|
||||
.refund-text {
|
||||
color: #FF19A0;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.refund-button-wrapper.compact-mode {
|
||||
width: 70px;
|
||||
height: 34px;
|
||||
border-radius: 64rpx;
|
||||
border: 1px solid #FF19A0;
|
||||
margin-left: 20rpx;
|
||||
font-size: 24rpx;
|
||||
flex: none;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.compact-mode .refund-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user