新增退款的表单

src/views/refund/gold/addCoinRefund.vue

@@ -3,26 +3,24 @@ 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 _ from 'lodash'
+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 addRe = ref({
   typeR: '0'
 })
+const tableData = ref([])
+const pagination = ref({
+  pageNum: 1,
+  pageSize: 10,
+  total: 0
+})
 
-
-//这是获取用户信息的接口
-const adminData = ref({})
-const getAdminData = async function () {
-  try {
-    const result = await API({ url: '/admin/userinfo', data: {} })
-    adminData.value = result
-    addRefund.value.adminId = adminData.value.id
-    console.log('请求成功', result)
-    console.log('用户信息', user.value)
-  } catch (error) {
-    console.log('请求失败', error)
-  }
-}
 // 精网号去空格
 const trimJwCode = () => {
   if (addRefund.value.jwcode) {
@@ -63,8 +61,8 @@ const cancel = function () {
   addRe.value.typeR = '0'
 }
 
-const show = function(){
-  console.log('===================================',addRefund.value.refundType)
+const show = function () {
+  console.log('===================================', addRefund.value.refundType)
 }
 // 这是添加退款信息的接口
 const add = async function () {
@@ -281,19 +279,25 @@ const getGoods = async function (jwcode) {
     orderCodes.value = []
     return;
   }
-  console.log('=======================',addRefund.value.refundType)
+  console.log('=======================', addRefund.value.refundType)
   if (addRefund.value.refundType === '商品退款') {
-      addRefund.value.type = 1
-    } else {
-      addRefund.value.type = 0
-    }
+    addRefund.value.type = 1
+  } else {
+    addRefund.value.type = 0
+  }
   try {
     const result = await API({
       url: '/refund/selectGoods',
-      data: { jwcode: addRefund.value.jwcode,
+      data: {
+        jwcode: addRefund.value.jwcode,
         type: addRefund.value.type
-       }
+      }
     })
+    tableData.value = result.data
+    if (result.data.length === 0) {
+      ElMessage.error('该用户没有商品订单')
+      return
+    }
 
     if (Array.isArray(result.data)) {
       // 存储完整商品数据
@@ -459,14 +463,13 @@ watch(calculatedRechargeGoods, (newVal) => {
   addRefund.value.sumGold = newVal
   console.log('计算的总金币', newVal)
 })
+const handlePageSizeChange = function (val) {
+  pagination.value.pageSize = val
+}
+const handleCurrentChange = function (val) {
+  pagination.value.pageNum = val
+}
 
-
-// 挂载
-onMounted(async function () {
-  await getAdminData()
-  // await getRefundTypes()
-  // await getGoods()
-})
 </script>
 
 <template>
@@ -481,7 +484,8 @@ onMounted(async function () {
             </el-button>
           </el-form-item>
           <el-form-item prop="refundType" label="退款类型" @change="show">
-            <el-select v-model="addRefund.refundType" placeholder="请选择" style="width: 220px" @change="getGoods(addRefund.jwcode)">
+            <el-select v-model="addRefund.refundType" placeholder="请选择" style="width: 220px"
+              @change="getGoods(addRefund.jwcode)">
               <el-option v-for="item in refundType" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
@@ -545,14 +549,14 @@ onMounted(async function () {
     </div>
 
     <div class="right">
-    <div class="right-up">
+      <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: 20px">
+            <el-row style="margin-top: 10px;height:5vh;">
               <el-col :span="9">
                 <el-form-item label="姓名">
                   <p>{{ user.name }}</p>
@@ -562,13 +566,13 @@ onMounted(async function () {
                 <el-form-item label="当前金币总数" style="width: 500px">
                   <span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{
                     user.nowSumGold
-                    }}</span>
+                  }}</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>
@@ -576,7 +580,7 @@ onMounted(async function () {
             </el-row>
 
             <!-- 第二行：精网号 + 当前金币（独立行） -->
-            <el-row>
+            <el-row style="margin-top: 1px;height:5vh;">
               <el-col :span="9">
                 <el-form-item label="精网号">
                   <p>{{ user.jwcode }}</p>
@@ -593,7 +597,7 @@ onMounted(async function () {
             </el-row>
 
             <!-- 第四行：消费次数 + 所属门店 -->
-            <el-row>
+            <el-row style="margin-top: 1px;height:3vh;">
               <el-col :span="9">
                 <el-form-item label="所属门店">
                   <p>{{ user.market }}</p>
@@ -605,10 +609,41 @@ onMounted(async function () {
       </div>
 
       <div class="right-down">
-
+        <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" >
+              <template #default="{ row }">
+                {{ row.orderCode.slice(3, 5) === 'CZ' ? '充值' : '消费' }}
+              </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="permanentGold" label="永久金币" width="120">
+              <template #default="{ row }">
+                {{ row.permanentGold / 100 }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="freeGold" label="免费金币" width="120">
+              <template #default="{ row }">
+                {{ (row.freeGold) / 100 }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="taskGold" label="任务金币" width="120">
+              <template #default="{ row }">
+                {{ row.taskGold / 100 }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="isRefund" label="订单状态" width="120" />
+          </el-table>
+          <el-pagination class="pagination" v-model:current-page="pagination.pageNum"
+            v-model:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
+            :total="pagination.total" @size-change="handlePageSizeChange"
+            @current-change="handleCurrentChange"></el-pagination>
+        </el-card>
       </div>
     </div>
-    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -616,47 +651,52 @@ p {
   margin: 0px;
 }
 
-.father{
+.father {
   width: 75vw;
   height: 70vh;
   display: flex;
 }
 
 .userAndForm {
-  width:25vw;
+  width: 25vw;
   height: 100%;
   display: flex;
-  background-color: azure;
-  }
+}
 
-  .left {
-    width: 35%;
-    display: flex;
+.left {
+  width: 35%;
+  display: flex;
 
-    .add-form {
-      width: 100%;
-      margin-top: 50px;
-    }
+  .add-form {
+    width: 100%;
+    margin-top: 50px;
   }
+}
 
-  .right-up {
-    width: 35vw;
-    height:30vh;
-    margin-left: 20px;
+.right-up {
+  width: 35vw;
+  height: 20vh;
+  display: flex;
+
+  .customer-info {
+    width: 90%;
     display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 10px;
+    margin-left: 5vw;
+  }
+}
 
-    .customer-info {
-      width: 90%;
-      display: flex;
-      margin-left: 20px;
-      justify-content: center;
-      align-items: center;
-      padding: 0 10px;
-    }
+.card {
+  width: 50vw;
+  height: 50vh;
+  margin-left: 5vw;
+  margin-top: 1vh;
+}
 
-  .right-down{
-    flex:1;
-    background-color: antiquewhite;
-  }
+.pagination {
+  display: flex;
+  margin-top: 0.5vh;
 }
 </style>