充值消费0110

src/views/refund/gold/addCoinRefund.vue

@@ -3,13 +3,13 @@ import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import API from '@/util/http.js'
 import moment from 'moment'
-import {useAdminStore} from "@/store/index.js";
-import {storeToRefs} from "pinia";
-import {findMenuById, permissionMapping} from "@/utils/menuTreePermission.js"
+import { useAdminStore } from "@/store/index.js";
+import { storeToRefs } from "pinia";
+import { findMenuById, permissionMapping } from "@/utils/menuTreePermission.js"
 import { ta } from 'element-plus/es/locales.mjs';
 
 const adminStore = useAdminStore();
-const {adminData, menuTree} = storeToRefs(adminStore);
+const { adminData, menuTree } = storeToRefs(adminStore);
 
 const addRe = ref({
   typeR: '0'
@@ -60,9 +60,37 @@ const cancel = function () {
   }
   addRe.value.typeR = '0'
 }
-
-const show = function () {
-  console.log('===================================', addRefund.value.refundType)
+const getRefund = async function () {
+  let type = null
+  if(addRefund.value.refundType === '商品退款'){
+    type = 1
+  }else{
+    type = 0
+  }
+  const params = {
+    pageNum: pagination.value.pageNum,
+    pageSize: pagination.value.pageSize,
+    goldDetail: {
+      jwcode: addRefund.value.jwcode,
+      flag: 0,
+      type: type
+    }
+  }
+  try {
+    const res = await API({
+        url: '/goldDetail/getGoldDetail',
+        data: {
+          ...params
+        }
+      })
+      tableData.value = res.data.list
+      pagination.value.total = res.data.total
+  } catch (error) {
+    console.log('goldDetail有错误', error)
+    ElMessage.error('请求失败')
+    tableData.value = []
+    pagination.value.total = 0
+  }
 }
 // 这是添加退款信息的接口
 const add = async function () {
@@ -206,7 +234,6 @@ const user = ref({
 })
 const getUser = async function (jwcode) {
   trimJwCode();
-  // cancelExceptJwcode();
   // 验证精网号
   if (!jwcode) {
     ElMessage.warning('精网号不能为空');
@@ -247,12 +274,13 @@ const getUser = async function (jwcode) {
       }
       user.value = processedData;
       console.log("用户信息", user.value);
-      //ElMessage.success(result.msg);
+
+      tableData.value = []
+      addRefund.value.refundType = ''
     }
   } catch (error) {
     console.log("请求失败", error);
     ElMessage.error("精网号错误");
-
   }
 }
 
@@ -293,11 +321,6 @@ const getGoods = async function (jwcode) {
         type: addRefund.value.type
       }
     })
-    tableData.value = result.data
-    if (result.data.length === 0) {
-      ElMessage.error('该用户没有商品订单')
-      return
-    }
 
     if (Array.isArray(result.data)) {
       // 存储完整商品数据
@@ -465,9 +488,11 @@ watch(calculatedRechargeGoods, (newVal) => {
 })
 const handlePageSizeChange = function (val) {
   pagination.value.pageSize = val
+  getRefund()
 }
 const handleCurrentChange = function (val) {
   pagination.value.pageNum = val
+  getRefund()
 }
 
 </script>
@@ -483,15 +508,15 @@ const handleCurrentChange = function (val) {
             <el-button type="primary" @click="getUser(addRefund.jwcode)" style="margin-left: 20px">查询
             </el-button>
           </el-form-item>
-          <el-form-item prop="refundType" label="退款类型" @change="show">
+          <el-form-item prop="refundType" label="退款类型">
             <el-select v-model="addRefund.refundType" placeholder="请选择" style="width: 220px"
-              @change="getGoods(addRefund.jwcode)">
+              @change="getRefund(addRefund.jwcode)">
               <el-option v-for="item in refundType" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
           <el-form-item prop="orderCode" label="订单号">
             <el-select v-model="addRefund.orderCode" placeholder="请选择订单号" style="width: 220px;" clearable filterable
-              :filter-method="handleFilter" @change="handleOrderChange">
+             @change="handleOrderChange">
               <el-option v-for="(item, index) in orderCodes" :key="index" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
@@ -552,73 +577,69 @@ const handleCurrentChange = function (val) {
       <div class="right-up">
         <!-- 客户信息栏 -->
         <el-card v-if="user.jwcode" class="customer-info">
-          <el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left">
-            <el-text size="large" style="padding:30%; ">客户信息</el-text>
-
-            <!-- 第一行：姓名 + 历史金币 -->
-            <el-row style="margin-top: 10px;height:5vh;">
-              <el-col :span="9">
-                <el-form-item label="姓名">
-                  <p>{{ user.name }}</p>
-                </el-form-item>
-              </el-col>
-              <el-col :span="14">
-                <el-form-item label="当前金币总数" style="width: 500px">
-                  <span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{
-                    user.nowSumGold
-                  }}</span>
-                </el-form-item>
-                <!-- 金币详情独立显示 -->
-                <el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
-                  <span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{
-                    user.nowPermanentGold
-                  }};
-                    免费金币:{{ user.nowFreeGold }};
-                    任务金币:{{ user.nowTaskGold }})</span>
-                </el-form-item>
-              </el-col>
+          <el-form :model="user" label-width="auto" label-position="left">
+            <span style="margin-left: 30%;font-size: larger;">客户信息</span>
+
+            <el-row style="margin-top: 1vh;">
+              <div class="line">
+                <span style="width:5vw;">姓名</span>
+                <span style="width:10vw;">{{ user.name }}</span>
+                <span style="width:10vw;">当前金币总数</span>
+                <span style="color: #2fa1ff;width: 5vw;" v-if="user.nowSumGold !== undefined">{{
+                  user.nowSumGold
+                }}</span>
+              </div>
             </el-row>
-
-            <!-- 第二行：精网号 + 当前金币（独立行） -->
-            <el-row style="margin-top: 1px;height:5vh;">
-              <el-col :span="9">
-                <el-form-item label="精网号">
-                  <p>{{ user.jwcode }}</p>
-                </el-form-item>
-              </el-col>
-              <el-col :span="14">
-                <el-form-item label="消费次数">
-                  <p style="color: #2fa1ff">{{ user.consumeNum }} </p>
-                </el-form-item>
-                <el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
-                  <p style="font-size: small; color: #b1b1b1">(仅统计2025-01-01后的数据)</p>
-                </el-form-item>
-              </el-col>
+            <el-row style="height: 2vh;width: 100%;">
+              <span style="height:3vh;color: #b1b1b1;font-size: small;margin-left:50%;"
+                v-if="user.nowPermanentGold !== undefined">(永久金币:{{
+                  user.nowPermanentGold
+                }};
+                免费金币:{{ user.nowFreeGold }};
+                任务金币:{{ user.nowTaskGold }})</span>
+            </el-row>
+            <el-row>
+              <!-- 第二行：精网号 + 消费次数 -->
+              <div class="line">
+                <span style="width:5vw;">精网号</span>
+                <span style="width: 10vw;">{{ user.jwcode }}</span>
+
+                <span style="width:10vw;">消费次数</span>
+                <span style="width: 10vw;color: #2fa1ff;">{{ user.consumeNum }}</span>
+              </div>
+            </el-row>
+            <el-row>
+              <span style="height:3vh;color: #b1b1b1;font-size: small;margin-left:60%;">(仅统计2025-01-01后的数据)</span>
             </el-row>
 
-            <!-- 第四行：消费次数 + 所属门店 -->
-            <el-row style="margin-top: 1px;height:3vh;">
-              <el-col :span="9">
-                <el-form-item label="所属门店">
-                  <p>{{ user.market }}</p>
-                </el-form-item>
-              </el-col>
+            <!-- 第四行：所属门店 -->
+            <el-row>
+              <div class="line">
+                <span style="width:5vw;">所属门店</span>
+                <span style="width: 10vw;">{{ user.market }}</span>
+              </div>
             </el-row>
           </el-form>
         </el-card>
       </div>
 
-      <div class="right-down">
+      <div>
         <el-card class="card" v-if="tableData.length > 0">
           <el-table :data="tableData" style="height:43vh;width:50vw">
-            <el-table-column type="index" label="序号" width="60" />
-            <el-table-column prop="type" label="类型" width="120" >
+            <el-table-column type="index" label="序号" width="80">
+              <template #default="scope">
+                  <span>{{
+                      scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize
+                    }}</span>
+            </template>
+            </el-table-column>
+            <el-table-column prop="type" label="类型" width="100">
               <template #default="{ row }">
-                {{ row.orderCode.slice(3, 5) === 'CZ' ? '充值' : '消费' }}
+                {{ row.type === 0 ? '充值' : '消费' }}
               </template>
             </el-table-column>
-            <el-table-column prop="goodsName" label="商品名称" width="120" />
-            <el-table-column prop="orderCode" label="订单号" width="240px" show-overflow-tooltip />
+            <el-table-column prop="goodsName" label="商品名称" width="120" show-overflow-tooltip />
+            <el-table-column prop="orderCode" label="订单号" width="200px" show-overflow-tooltip />
             <el-table-column prop="permanentGold" label="永久金币" width="120">
               <template #default="{ row }">
                 {{ row.permanentGold / 100 }}
@@ -634,7 +655,7 @@ const handleCurrentChange = function (val) {
                 {{ row.taskGold / 100 }}
               </template>
             </el-table-column>
-            <el-table-column prop="isRefund" label="订单状态" width="120" >
+            <el-table-column prop="isRefund" label="订单状态" width="120">
               <template #default="{ row }">
                 {{ row.isRefund === '1' ? '已退款' : '未处理' }}
               </template>
@@ -668,12 +689,13 @@ p {
 }
 
 .left {
-  width: 35%;
+  width: 35vw;
   display: flex;
+  background-color: aliceblue;
 
   .add-form {
     width: 100%;
-    margin-top: 50px;
+    margin-top: 30px;
   }
 }
 
@@ -681,14 +703,19 @@ p {
   width: 35vw;
   height: 20vh;
   display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 5vw;
 
   .customer-info {
-    width: 90%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 10px;
-    margin-left: 5vw;
+    width: 35vw;
+    height: 19vh;
+    padding-left: 5%;
+
+    .line {
+      display: flex;
+      height: 2vh;
+    }
   }
 }