152 lines
4.2 KiB
Vue
152 lines
4.2 KiB
Vue
<template>
|
||
<!-- 贡献值说明弹窗 -->
|
||
<up-popup :show="show" mode="bottom" :round="16" :closeOnClickOverlay="true"
|
||
@close="$emit('update:show', false)">
|
||
<view class="contribution_popup_container">
|
||
<!-- 头部 -->
|
||
<view class="contribution_popup_header">
|
||
<text class="contribution_header_title">贡献值说明</text>
|
||
<view class="contribution_header_close" @click="$emit('update:show', false)">
|
||
<u-icon name="close" size="18" color="#71737c"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容主体 -->
|
||
<scroll-view scroll-y class="contribution_popup_body">
|
||
<view class="contribution_section">
|
||
<view class="contribution_section_title">我能获得多少贡献值？</view>
|
||
<view class="contribution_text">1.商品详情页中展示为预估获得贡献值。</view>
|
||
<view class="contribution_text">2.实际赠送的贡献值将根据订单实付金额及商品贡献系数综合计算，其中商品贡献系数由商品毛利等因素确定。</view>
|
||
<view class="contribution_text">3.使用优惠券、发生退款或售后时，贡献值可能相应调整，最终以订单完成后的实际到账为准。</view>
|
||
</view>
|
||
|
||
<view class="contribution_section">
|
||
<view class="contribution_section_title">生效条件</view>
|
||
<view class="contribution_text">1.收到商品后，在订单中点击【确认收货】时，立马到账。可在【我的-钱包】贡献值进行查看</view>
|
||
<view class="contribution_text">2.消费者权益次日到账，可在【我的-钱包】数字积分-消费者权益中进行查看</view>
|
||
</view>
|
||
|
||
<view class="contribution_section">
|
||
<view class="contribution_section_title">售后调整</view>
|
||
<view class="contribution_text">1.如发生退货/退款，所有的贡献值、消费者权益将会进行扣除。</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部按钮 -->
|
||
<view class="contribution_popup_footer">
|
||
<view class="contribution_btn_confirm" @click="$emit('update:show', false)">
|
||
我知道了
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</up-popup>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "product-contribution-dialog",
|
||
props: {
|
||
show: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.contribution_popup_container {
|
||
background: #ffffff;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
max-height: 80vh;
|
||
box-sizing: border-box;
|
||
|
||
.contribution_popup_header {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
padding: 32rpx 32rpx 16rpx;
|
||
|
||
.contribution_header_title {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #71737c;
|
||
}
|
||
|
||
.contribution_header_close {
|
||
position: absolute;
|
||
right: 32rpx;
|
||
top: 28rpx;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.contribution_popup_body {
|
||
max-height: 60vh;
|
||
padding: 10rpx 36rpx 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
.contribution_section {
|
||
margin-bottom: 28rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.contribution_section_title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #111111;
|
||
margin-bottom: 20rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.contribution_text {
|
||
font-size: 28rpx;
|
||
line-height: 1.75;
|
||
color: #666666;
|
||
margin-bottom: 16rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.contribution_popup_footer {
|
||
padding: 20rpx 36rpx;
|
||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||
background: #ffffff;
|
||
box-sizing: border-box;
|
||
|
||
.contribution_btn_confirm {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: #7934f6;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: opacity 0.15s ease;
|
||
|
||
&:active {
|
||
opacity: 0.85;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|