Browse Source

消耗弹窗

zhangyong/feature-20260113094820-现金重构
ZhangYong 2 months ago
parent
commit
0c7eeb76e3
  1. 30
      src/views/consume/gold/coinConsumeDetail.vue

30
src/views/consume/gold/coinConsumeDetail.vue

@ -615,10 +615,10 @@ const getMarket = async function () {
<el-col> <el-col>
<div class="select"> <div class="select">
<div class="selectRow"> <div class="selectRow">
<el-text size="large" class="text">订单状态</el-text>
<el-select class="selectContent" v-model="consumeUser.isRefund" placeholder="请选择订单状态" clearable>
<el-option label="正常" value="0" />
<el-option label="已退款" value="1" />
<el-text size="large" class="text">{{ $t('common.orderStatus') }}</el-text>
<el-select class="selectContent" v-model="consumeUser.isRefund" :placeholder="$t('common.orderStatusPlaceholder')" clearable>
<el-option :label="$t('refund.normal')" value="0" />
<el-option :label="$t('refund.refunded')" value="1" />
</el-select> </el-select>
</div> </div>
<div class="selectRow" style="width: 32.5vw;"> <div class="selectRow" style="width: 32.5vw;">
@ -710,27 +710,28 @@ const getMarket = async function () {
<div v-else-if="scope.row.isRefund == 1" style="display: flex; justify-content: center; align-items: center;">{{ $t('consume.refunded') }} <div v-else-if="scope.row.isRefund == 1" style="display: flex; justify-content: center; align-items: center;">{{ $t('consume.refunded') }}
<el-popover <el-popover
v-model:visible="scope.row.popoverVisible" v-model:visible="scope.row.popoverVisible"
trigger="click"
placement="top"
trigger="hover"
placement="left"
popper-class="refund-popover" popper-class="refund-popover"
teleported="false"
width="auto"
> >
<div class="popover-content"> <div class="popover-content">
<div class="popover-title">{{ scope.row.refundModel == 0 ? '全部退款' : '部分退款' }}</div>
<div class="popover-title">{{ scope.row.refundModel == 0 ? $t('common_list.refundModelAll') : $t('common_list.refundModelPart') }}</div>
<div class="popover-item"> <div class="popover-item">
<span class="label">总金币数</span>
<span class="label">{{ $t('common.totalGoldCoin') }}</span>
<span class="value">{{ scope.row.refundSumGold }}</span> <span class="value">{{ scope.row.refundSumGold }}</span>
</div> </div>
<div class="popover-item"> <div class="popover-item">
<span class="label">永久金币</span>
<span class="label">{{ $t('common.permanentGold') }}</span>
<span class="value">{{ scope.row.refundPermanentGold }}</span> <span class="value">{{ scope.row.refundPermanentGold }}</span>
</div> </div>
<div class="popover-item"> <div class="popover-item">
<span class="label">免费金币</span>
<span class="label">{{ $t('common.freeGold') }}</span>
<span class="value">{{ scope.row.refundFreeGold }}</span> <span class="value">{{ scope.row.refundFreeGold }}</span>
</div> </div>
<div class="popover-item"> <div class="popover-item">
<span class="label">任务金币</span>
<span class="label">{{ $t('common.taskGold') }}</span>
<span class="value">{{ scope.row.refundTaskGold }}</span> <span class="value">{{ scope.row.refundTaskGold }}</span>
</div> </div>
</div> </div>
@ -739,7 +740,6 @@ const getMarket = async function () {
@click.stop @click.stop
src="@/assets/SvgIcons/consume.svg" src="@/assets/SvgIcons/consume.svg"
style="width: 15px; height: 15px; margin-left: 5px; cursor: pointer; display: inline-block;" style="width: 15px; height: 15px; margin-left: 5px; cursor: pointer; display: inline-block;"
alt="退款详情"
> >
</template> </template>
</el-popover> </el-popover>
@ -799,7 +799,8 @@ const getMarket = async function () {
border: none !important; border: none !important;
padding: 12px !important; padding: 12px !important;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
min-width: unset !important;
width: 100px;
min-width: none;
.el-popper__arrow::before { .el-popper__arrow::before {
background-color: #EEF5FE !important; background-color: #EEF5FE !important;
border-color: #EEF5FE !important; border-color: #EEF5FE !important;
@ -820,6 +821,7 @@ const getMarket = async function () {
font-size: 13px; font-size: 13px;
color: #606266; color: #606266;
margin-bottom: 4px; margin-bottom: 4px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }

Loading…
Cancel
Save