悬浮窗

src/assets/SvgIcons/consume.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1768291260270" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1605" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M463.99957 784.352211c0 26.509985 21.490445 48.00043 48.00043 48.00043s48.00043-21.490445 48.00043-48.00043c0-26.509985-21.490445-48.00043-48.00043-48.00043S463.99957 757.842226 463.99957 784.352211z" fill="#1296db" p-id="1606"></path><path d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z" fill="#1296db" p-id="1607"></path><path d="M512 673.695256c-17.664722 0-32.00086-14.336138-32.00086-31.99914l0-54.112297c0-52.352533 39.999785-92.352318 75.32751-127.647359 25.887273-25.919957 52.67249-52.67249 52.67249-74.016718 0-53.343368-43.07206-96.735385-95.99914-96.735385-53.823303 0-95.99914 41.535923-95.99914 94.559333 0 17.664722-14.336138 31.99914-32.00086 31.99914s-32.00086-14.336138-32.00086-31.99914c0-87.423948 71.775299-158.559333 160.00086-158.559333s160.00086 72.095256 160.00086 160.735385c0 47.904099-36.32028 84.191695-71.424378 119.295794-27.839699 27.776052-56.575622 56.511974-56.575622 82.3356l0 54.112297C544.00086 659.328155 529.664722 673.695256 512 673.695256z" fill="#1296db" p-id="1608"></path></svg>

src/views/consume/gold/coinConsumeDetail.vue

@@ -103,17 +103,6 @@ const market = ref("")
 const sortField = ref('')
 const sortOrder = ref('')
 
-//
-const consumeStatus = [
-  {
-    value: '1',
-    label: '正常'
-  },
-  {
-    value: '2',
-    label: '已退款'
-  },
-]
 // 消费平台选项
 const consumePlatform = [
   {
@@ -627,11 +616,12 @@ const getMarket = async function () {
       <div class="select">
       <div class="selectRow">
         <el-text size="large" class="text">订单状态：</el-text>
-        <el-select class="selectContent" v-model="consumeUser.status" placeholder="请选择订单状态" clearable>
-          <el-option v-for="item in consumeStatus" :key="item.id" :label="item.label" :value="item.value" />
+        <el-select class="selectContent" v-model="consumeUser.isRefund" placeholder="请选择订单状态" clearable>
+          <el-option label="正常" value="0" />
+          <el-option label="已退款" value="1" />
         </el-select>
       </div>
-        <div class="selectRow" style="width: 36vw;">
+        <div class="selectRow" style="width: 32.5vw;">
           <el-text class="text" size="large">{{ $t('common.consumeTime') }}：</el-text>
           <el-date-picker class="selectContent" v-model="getTime" type="datetimerange" :range-separator="$t('common.to')"
             :start-placeholder="$t('common.startTime')" :end-placeholder="$t('common.endTime')" style="margin-right:1vw;width:25vw"
@@ -681,7 +671,6 @@ const getMarket = async function () {
         <el-table-column prop="jwcode" :label="$t('common_list.jwcode')" width="110px" fixed="left" />
         <el-table-column prop="market" :label="$t('common_list.market')" width="110px" />
         <el-table-column prop="orderCode" :label="$t('common_list.orderNo')" width="260px" show-overflow-tooltip />
-_list
         <el-table-column prop="goodsName" :label="$t('common_list.goodsName')" width="160px" show-overflow-tooltip />
         <el-table-column prop="payPlatform" :label="$t('common_list.consumePlatform')" width="130px">
           <template #default="scope">
@@ -715,11 +704,47 @@ _list
         </el-table-column>
 
         <el-table-column prop="remark" :label="$t('common_list.remark')" width="200px" show-overflow-tooltip />
-        <el-table-column prop="isRefund" :label="$t('common_list.orderStatus')" width="200px" show-overflow-tooltip>
+        <el-table-column prop="isRefund" :label="$t('common_list.orderStatus')" width="120px" show-overflow-tooltip fixed="right" align="center">
           <template #default="scope">
-            <span v-if="scope.row.isRefund == 0">{{ $t('consume.normal') }}</span>
-            <span v-else-if="scope.row.isRefund == 1">{{ $t('consume.refunded') }}</span>
-            <span v-else>{{ $t('consume.unknown') }}</span>
+            <div v-if="scope.row.isRefund == 0">{{ $t('consume.normal') }}</div>
+            <div v-else-if="scope.row.isRefund == 1" style="display: flex; justify-content: center; align-items: center;">{{ $t('consume.refunded') }} 
+                <el-popover
+               v-model:visible="scope.row.popoverVisible" 
+               trigger="click"                            
+               placement="top"                            
+               popper-class="refund-popover"
+                teleported="false"
+       >
+        <div class="popover-content">
+          <div class="popover-title">{{ scope.row.refundModel == 0 ? '全部退款' : '部分退款' }}</div>
+          <div class="popover-item">
+            <span class="label">总金币数：</span>
+            <span class="value">{{ scope.row.refundSumGold  }}</span>
+          </div>
+          <div class="popover-item">
+            <span class="label">永久金币：</span>
+            <span class="value">{{ scope.row.refundPermanentGold }}</span>
+          </div>
+          <div class="popover-item">
+            <span class="label">免费金币：</span>
+            <span class="value">{{ scope.row.refundFreeGold }}</span>
+          </div>
+          <div class="popover-item">
+            <span class="label">任务金币：</span>
+            <span class="value">{{ scope.row.refundTaskGold }}</span>
+          </div>
+        </div>
+        <template #reference>
+          <img 
+            @click.stop      
+            src="@/assets/SvgIcons/consume.svg" 
+            style="width: 15px; height: 15px; margin-left: 5px; cursor: pointer; display: inline-block;"
+            alt="退款详情"
+          >
+        </template>
+      </el-popover>
+            </div>
+            <div v-else>{{ $t('consume.unknown') }}</div>
           </template>
         </el-table-column>
         <el-table-column prop="adminName" :label="$t('common_list.submitter')" width="110px" />
@@ -768,7 +793,46 @@ _list
   </el-dialog>
 </template>
 
+<style lang="scss">
+.refund-popover {
+  background-color: #EEF5FE !important;
+  border: none !important;
+  padding: 12px !important;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  min-width: unset !important;
+  .el-popper__arrow::before {
+    background-color: #EEF5FE !important;
+    border-color: #EEF5FE !important;
+  }
+}
+</style>
+
 <style scoped lang="scss">
+.popover-content {
+  .popover-title {
+    color: #409EFF;
+    font-weight: bold;
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
+  .popover-item {
+    display: flex;
+    font-size: 13px;
+    color: #606266;
+    margin-bottom: 4px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .label {
+      color: #606266;
+    }
+    .value {
+      color: #606266;
+      margin-left: 4px;
+    }
+  }
+}
+
 .status {
   display: flex;
 }