From 78b9c254b53c0e431d08581f1fda225c5d060547 Mon Sep 17 00:00:00 2001
From: donghaolin <17667510818@163.com>
Date: Fri, 29 Nov 2024 20:25:27 +0800
Subject: [PATCH] =?UTF-8?q?11.29=E8=91=A3=E6=B5=A9=E9=9C=96=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4=E7=9A=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/gold-system/src/views/managerecharge/rate.vue  | 258 ++++++++++++++++-----
 vue/gold-system/src/views/recharge/addRecharge.vue | 225 +++++++++++++++---
 2 files changed, 399 insertions(+), 84 deletions(-)

diff --git a/vue/gold-system/src/views/managerecharge/rate.vue b/vue/gold-system/src/views/managerecharge/rate.vue
index 1f231e5..5af05a2 100644
--- a/vue/gold-system/src/views/managerecharge/rate.vue
+++ b/vue/gold-system/src/views/managerecharge/rate.vue
@@ -1,75 +1,187 @@
 <script setup>
-  import { ref } from 'vue'
+  import { ref, onMounted} from 'vue'
   import { ElMessageBox } from 'element-plus'
   import axios from 'axios'
 
   const regeAdd = ref(false)
   const regeEdit = ref(false)
 
-  const rateList = ref([])
-  // 查询方法
-async function  handleSearch(){
-const response = await axios({
-  URL: 'http://192.168.8.93:10010/rates/search',
-  method: 'post',
-  data: {  pageNum:1,pageSize:2}
-  })
-  rateList.value = response.data.data.list  
-};
-  handleSearch();
+ //汇率表格数据
+  const tableData = ref([]);
+//搜索对象
+const getObj = ref({
+    pageNum: 1,
+    pageSize: 5,
+})
+//分页总条目
+const get = async function () {
+    try {
+        console.log('搜索参数', getObj.value);
+        // 发送POST请求
+        const result = await axios.post('http://192.168.8.174:10010/rates/search', {
+          ...getObj.value,
+         rate:{  ...value1.value},
+});
+
+        // 将响应结果存储到响应式数据中
+        console.log('请求成功', result);
+        // 存储表格数据
+        tableData.value = result.data.data.list;
+        console.log('tableData', tableData.value);
+        // 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等
+        getObj.value.pageNum = result.data.data.pageNum;
+        getObj.value.pageSize = result.data.data.pageSize;
+        getObj.value.total = result.data.data.total;
+    } catch (error) {
+        console.log('请求失败', error);
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+    }
+}
 
-  const rateAdd = ref({})
   // 添加方法
+  const rateAdd = ref({})
+  const addRate = async function () {
+    try {
+        console.log('搜索参数', getObj.value);
+        // 发送POST请求
+        const result = await axios.post('http://192.168.8.174:10010/rates/add', rateAdd.value);
+
+        // 将响应结果存储到响应式数据中
+        console.log('请求成功', result);
+        get();
+    } catch (error) {
+        console.log('请求失败', error);
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+    }
+}
   const add = () => {
     ElMessageBox.confirm('确认添加？').then(() => {
+      addRate();
+      rateAdd.value = {}
+      value1.value = {
+        startTime: '',
+        endTime: '',
+      };
       regeAdd.value = false
     }).catch(() => {
       regeAdd.value = false
     })
   }
+
   // 编辑方法
+const rateEdit = ref({})
+//查询已有的数据
+const getEditData = async function (row) {
+    try {
+        console.log('搜索参数', getObj.value);
+        // 发送POST请求
+        const result = await axios.post('http://192.168.8.174:10010/rates/search', {rate:{rateId:row.rateId}});
+
+        // 将响应结果存储到响应式数据中
+        console.log('请求成功', result);
+        // 存储表格数据
+        rateEdit.value = result.data.data[0];
+ 
+    } catch (error) {
+        console.log('请求失败', error);
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+    }
+}
+  const editRate = async function () {
+    try {
+        console.log('搜索参数', rateEdit.value);
+        // 发送POST请求
+        const result = await axios.post('http://192.168.8.174:10010/rates/update', rateEdit.value);
+        // 将响应结果存储到响应式数据中
+        console.log('请求成功', result);
+        get();
+    } catch (error) {
+        console.log('请求失败', error);
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+    }
+}
   const edit = () => {
     ElMessageBox.confirm('确认修改？').then(() => {
+      editRate();
       regeEdit.value = false
     }).catch(() => {
       regeEdit.value = false
     })
   }
-  // 删除方法
 
+  // 删除方法
+  const deleteRate = async function (row) {
+    try {
+        // 发送POST请求
+        const result = await axios.post('http://192.168.8.174:10010/rates/delete/ '+ row.rateId);
+        // 将响应结果存储到响应式数据中
+        console.log('请求成功', result);
+        get();
+    } catch (error) {
+        console.log('请求失败', error);
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+    }
+}
 
-  // 假数据
-  const tableData = [
+// 挂载
+onMounted(async function(){
+    get();
+})
+//分页
+function handlePageChange(currentPage,pageSize){
+    get();
+}
+  //货币条目
+  const options = [
   {
-    currency: '币',
-    exchangeRate: '111',
-    createTime:'2016-05-03',
-    updateTime:'2016-05-03',
-    updateName:'帅哥'
-  
+    value: 'USD',
+    label: 'USD',
+  },
+  {
+    value: 'EUR',
+    label: 'EUR',
   },
   {
-    currency: '币',
-    exchangeRate: '111',
-    createTime:'2016-05-03',
-    updateTime:'2016-05-03',
-    updateName:'帅哥'
+    value: 'JPY',
+    label: 'JPY',
   },
   {
-    currency: '币',
-    exchangeRate: '111',
-    createTime:'2016-05-03',
-    updateTime:'2016-05-03',
-    updateName:'帅哥'
+    value: 'GBP',
+    label: 'GBP',
   },
   {
-    currency: '币',
-    exchangeRate: '111',
-    createTime:'2016-05-03',
-    updateTime:'2016-05-03',
-    updateName:'帅哥'
+    value: 'AUD',
+    label: 'AUD',
   },
 ]
+
+//时间选择器
+const value1 = ref({
+  startTime: '',
+  endTime: '',
+}); // 时间数组
+function handleDateChange(value) {
+      if (value && value.length === 2) {
+        value1.value.startTime = value[0]; // 开始日期
+        value1.value.endTime = value[1]; // 结束日期
+      }
+      console.log(value1);
+    }
+
+filters: {
+  function formatDate(value) {
+    if (!value) return '';
+    const date = new Date(value);
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    const seconds = date.getSeconds().toString().padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  }
+}
+
 </script>
 
 <template>
@@ -86,10 +198,12 @@ const response = await axios({
         range-separator="至"
         start-placeholder="开始时间"
         end-placeholder="结束时间"
+        @change="handleDateChange"
         :size="size"
+        value-format="YYYY-MM-DD"
               />
               <!-- 按钮 -->
-              <el-button class="button-item" type="primary" style="float:right" @click="handleSearchByTime">查询</el-button>
+              <el-button class="button-item" type="primary" style="float:right" @click="get">查询</el-button>
               <el-button class="button-item"  style="float:right" @click="handledelete">重置</el-button>
             </div>
             </el-card>
@@ -107,21 +221,31 @@ const response = await axios({
             </div>
             <!-- 表格 -->
             <div>
-              <el-table :data="rateList" style="width: 100%" >
-                <el-table-column prop="currency" label="货币名称" :span="4" />
-                <el-table-column prop="exchangeRate" label="汇率" :span="4"/>
-                <el-table-column prop="createTime" label="添加时间" :span="4"/>
-                <el-table-column prop="updateTime" label="更新时间" :span="4"/>
+              <el-table :data="tableData" v-if="tableData.flag=1" style="width: 100%" >
+                <el-table-column prop="currency" label="货币名称" :span="3" />
+                <el-table-column prop="exchangeRate" label="汇率" :span="3"/>
+                <el-table-column prop="createTime"  label="添加时间" :span="5"/>
+                <el-table-column prop="createTime" label="添加时间" :span="5"/>
+    
+                <el-table-column prop="updateTime" label="更新时间" :span="5"/>
+
                 <el-table-column prop="updateName" label="更新人" :span="4"/>
                 <el-table-column label="操作" :span="4">
-                  <el-button type="text" @click="regeEdit = true">编辑</el-button>
-                  <el-button type="text" @click="deleteRate">删除</el-button>
+                  <template #default="scope">
+                    <el-button type="text" @click="regeEdit=true; getEditData(scope.row)">编辑</el-button>
+                  <el-button type="text" @click="deleteRate(scope.row)">删除</el-button>
+                  </template>
+                  
                 </el-table-column>
               </el-table>
             </div>
             <!-- 分页 -->
              <div class="pagination" >
-              <el-pagination background layout="prev, pager, next" :total="100" />
+              <el-pagination background layout="prev, pager, next" 
+              v-model:current-page="getObj.pageNum"
+              v-model:page-size="getObj.pageSize"
+              :total="getObj.total"
+              @change="handlePageChange" />
              </div>
             </el-card>
           
@@ -146,9 +270,12 @@ const response = await axios({
         status-icon
       >
         <el-form-item label="货币名称:">
-          <el-select v-model="rateAdd.currency" placeholder="请选择" style="width: 240px">
+          <el-select v-model.number="rateAdd.currency" placeholder="请选择" style="width: 240px">
             <el-option
-              
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
             />
           </el-select>
         </el-form-item>
@@ -159,9 +286,27 @@ const response = await axios({
         <el-form-item label="提交人:">
           <el-input v-model="rateAdd.updateName" style="width: 240px;"/>
         </el-form-item>
+        <el-form-item label="开始时间:">
+          <el-date-picker
+        v-model="rateAdd.startTime"
+        type="date"
+        placeholder="请选择时间"
+        :default-value="new Date(2010, 9, 1)"
+        value-format="YYYY-MM-DD"
+      />
+        </el-form-item>
+        <el-form-item label="结束时间:">
+          <el-date-picker
+          v-model="rateAdd.endTime"
+          type="date"
+          placeholder="请选择时间"
+          :default-value="new Date(2010, 9, 1)"
+          value-format="YYYY-MM-DD"
+        />
+        </el-form-item>
         <el-form-item >
           <div class="dialog-footer">
-          <el-button  type="primary" @click="edit">添加</el-button>
+          <el-button  type="primary" @click="add">添加</el-button>
           <el-button @click="regeAdd = false">取消</el-button>
           </div>
       </el-form-item>
@@ -172,14 +317,14 @@ const response = await axios({
      <!-- 这是编辑弹窗 -->
      <el-dialog
      v-model="regeEdit"
-     title="新增汇率"
+     title="修改汇率"
      width="500"
    >
      <template #footer>
        <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
-       :model="ruleForm"
+       :model="rateEdit"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
@@ -187,18 +332,21 @@ const response = await axios({
        status-icon
      >
        <el-form-item label="货币名称:">
-         <el-select v-model="value" placeholder="请选择" style="width: 240px">
+         <el-select v-model="rateEdit.currency" placeholder="请选择" style="width: 240px">
            <el-option
-             
+           v-for="item in options"
+           :key="item.value"
+           :label="item.label"
+           :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="汇率:">
-         <el-input  style="width: 120px;"/><p class="unit">:1</p>
+         <el-input v-model="rateEdit.exchangeRate" style="width: 120px;"/><p class="unit">:1</p>
          <p>(提示：当前规则每 5 元人民币可兑换 1 新币)</p>
        </el-form-item>
        <el-form-item label="提交人:">
-         <el-input  style="width: 240px;"/>
+         <el-input v-model="rateEdit.updateName" style="width: 240px;"/>
        </el-form-item>
        <el-form-item >
          <div class="dialog-footer">
diff --git a/vue/gold-system/src/views/recharge/addRecharge.vue b/vue/gold-system/src/views/recharge/addRecharge.vue
index 0c1d722..fc0497f 100644
--- a/vue/gold-system/src/views/recharge/addRecharge.vue
+++ b/vue/gold-system/src/views/recharge/addRecharge.vue
@@ -1,45 +1,175 @@
 <script setup>
     import { reactive } from 'vue';
-    import { ref } from 'vue'
+    import { ref,computed,watch } from 'vue'
     import { ElMessage } from 'element-plus'
     import { Plus } from '@element-plus/icons-vue'
     import axios from 'axios'
+    import { ElMessageBox } from 'element-plus'
+
+
 
     
 
 
 
 // 这是添加充值信息的表单
-const addRecharge = ref({ homilyId:'001'});
+const addRecharge = ref({
+    rechargeVoucher: '',
+    rechargeWay: '客服充值'
+
+ });
+// 这是添加充值信息的接口
+const add = async function () {
+    try {
+        // 发送POST请求
+        const result = await axios.post('http://192.168.8.93:10010/recharge/recharge/add', addRecharge.value);
+
+        // 将响应结果存储到响应式数据中
+        console.log('请求成功', result);
+        // 存储表格数据
+        console.log('用户信息', user.value);
+    } catch (error) {
+        console.log('请求失败', error);
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+    }
+}
+const addBefore = () => {
+    ElMessageBox.confirm('确认添加？').then(() => {
+      add();
+      console.log('添加成功');
+      imageUrl.value = '';
+      addRecharge.value = {};
+    }).catch(() => {
+      console.log('取消添加');
+    })
+  }
 
 // 查找客户信息的方法
 const user = ref({});
-async function  getUser(){
-const response = await axios({
-  url: 'http://192.168.8.93:10020/recharge/user',
-  method: 'post',
-  data: { homilyId: addRecharge.value.homilyId }
-})
- user.value = response.data;
+const getUser = async function (homilyId) {
+    try {
+        // 发送POST请求
+        const result = await axios.post('http://192.168.8.93:10020/recharge/user', {homilyId: homilyId});
+
+        // 将响应结果存储到响应式数据中
+        console.log('请求成功', result);
+        // 存储表格数据
+        user.value = result.data.data[0];
+        console.log('用户信息', user.value);
+ 
+    } catch (error) {
+        console.log('请求失败', error);
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+    }
+}
+
+// 这是查询活动的接口
+const activity = ref([]); 
+const getActivity = async function () {
+    try {
+        // 发送POST请求
+        const result = await axios.post('http://192.168.8.93:10010/recharge/activity/select', {});
+
+        // 将响应结果存储到响应式数据中
+        console.log('请求成功', result);
+        // 存储表格数据
+        activity.value = result.data.data;
+        console.log('活动信息', activity.value);
+    } catch (error) {
+        console.log('请求失败', error);
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+    }
+}
+getActivity();
+
+// 这是查询货币的接口
+const currency = ref([]); 
+const getCurrency = async function () {
+    try {
+
+        // 发送POST请求
+        const result = await axios.post('http://192.168.8.174:10010/rates/search',{});
+
+        // 将响应结果存储到响应式数据中
+        console.log('货币请求成功', result);
+        // 存储表格数据
+        currency.value = result.data.data;
+        console.log('tableData', currency.value);
+        // 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等
+        
+    } catch (error) {
+        console.log('请求失败', error);
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+    }
 }
+getCurrency();
+
+
+// 这是添加上传图片的接口
+const imageUrl = ref('')
+
+// 上传图片成功的回调函数
+const handleAvatarSuccess = (response, uploadFile) => {
+  imageUrl.value = URL.createObjectURL(uploadFile.raw);
+  console.log('图片上传成功', response, uploadFile);
+  addRecharge.value.rechargeVoucher = 'http://192.168.8.93:10010/upload/' + response.data;
+  console.log('图片名称', addRecharge.value.rechargeVoucher);
+};
+// 上传图片之前的校验函数
+const beforeAvatarUpload = (rawFile) => {
+  if (rawFile.type !== 'image/jpeg') {
+    ElMessage.error('Avatar picture must be JPG format!');
+    return false;
+  } else if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('Avatar picture size can not exceed 2MB!');
+    return false;
+  }
+  return true;
+};
 
-console.log(user.value)
+//充值方式条目
+const options = [
+  {
+    value: '现金充值',
+    label: '现金充值',
+  },
+  {
+    value: '龙鳞卡',
+    label: '龙鳞卡',
+  },
+  {
+    value: '弘粉卡',
+    label: '弘粉卡',
+  },
+  
+]
+
+const calculatedFreeGold = computed(() => {
+  return addRecharge.value.paidGold * addRecharge.value.activityId;
+});
+
+watch(calculatedFreeGold, (newVal) => {
+  addRecharge.value.freeGold = newVal;
+});
 </script>
 
 <template>
   <div>
     新增充值
   </div>
-<div>{{user.value}}</div>
+
   <el-form :model="addRecharge" label-width="auto" style="max-width: 600px">
     <el-form-item label="精网号">
       <el-input v-model="addRecharge.homilyId" style="width: 220px;" />
-      <el-button type="primary" @click="getUser" style="margin-left: 20px;">查询</el-button>
+      <el-button type="primary" @click="getUser(addRecharge.homilyId)" style="margin-left: 20px;">查询</el-button>
     </el-form-item>
     <el-form-item label="活动名称">
       <el-select v-model="addRecharge.activityId" placeholder="请选择" style="width: 300px">
         <el-option
-          
+        v-for="item in activity"
+        :key="item.value"
+        :label="item.activityName"
+        :value="item.rechargeRatio"
         />
       </el-select>
     </el-form-item>
@@ -47,35 +177,41 @@ console.log(user.value)
       <el-input v-model="addRecharge.paidGold" style="width: 100px;"/>
       <p style="margin-right: 20px;">个</p>
       <p>免费金币</p>
-      <el-input v-model="addRecharge.freeGold" style="width: 100px" />
+      <el-input v-model="addRecharge.freeGold" disabled :value="addRecharge.paidGold * addRecharge.activityId" style="width: 100px" />
       <p>个</p>
     </el-form-item>
     <el-form-item label="充值金额">
-      <el-select  placeholder="货币名称" style="width: 70px;margin-right: 5px;">
+      <el-select v-model="addRecharge.rateId" placeholder="货币名称" style="width: 95px;margin-right: 5px;">
         <el-option
-
+        v-for="item in currency"
+        :key="item.value"
+        :label="item.currency"
+        :value="item.rateId"
         />
       </el-select>
-      <el-input v-model="rechargeGold" style="width: 225px;"/>
+      <el-input v-model="addRecharge.rechargeGold" style="width: 200px;"/>
     </el-form-item>
     <el-form-item label="收款方式">
-      <el-select v-model="addRecharge.rechargeWay" placeholder="请选择" style="width: 300px">
+      <el-select v-model="addRecharge.payWay" placeholder="请选择" style="width: 300px">
         <el-option
-
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
         />
       </el-select>
     </el-form-item>
     <el-form-item label="交款时间">
       <el-date-picker
         v-model="addRecharge.rechargeTime"
-        type="datetime"
+        type="date"
         style="width: 300px;"
       />
     </el-form-item>
-    <el-form-item label="交款凭证">
-      <el-upload
+    <el-form-item label="交款凭证" style="margin-bottom: 5px;">
+      <el-upload 
       class="avatar-uploader"
-      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+      action="http://192.168.8.93:10010/upload"
       :show-file-list="false"
       :on-success="handleAvatarSuccess"
       :before-upload="beforeAvatarUpload"
@@ -97,12 +233,12 @@ console.log(user.value)
       
     </el-form-item>
     <el-form-item label="提交人">
-      <el-input style="width: 300px" disabled placeholder="提交人姓名"/>
+      <el-input style="width: 300px" value="张三" disabled placeholder="提交人姓名"/>
     </el-form-item>
   </el-form>
   
     <el-button @click="closeAddActivityVisible" style="margin-left: 280px;">取消</el-button>
-    <el-button type="primary" @click="closeAddActivityVisible">
+    <el-button type="primary" @click="addBefore">
         提交
     </el-button>
 
@@ -112,10 +248,9 @@ console.log(user.value)
      <el-text size="large" style="margin-left: 20px;">客户信息</el-text>
       <el-row style="margin-top: 20px;">
         <el-col :span="12">
-      <el-form-item label="姓名" >
-
+      <el-form-item label="姓名:" >
+          <p>{{user.name}}</p>
       </el-form-item>
-      
         </el-col>
         <el-col :span="12">
           <el-form-item label="历史金币总数" >
@@ -123,6 +258,7 @@ console.log(user.value)
             </el-col>
         <el-col :span="12">
       <el-form-item label="精网号" >
+        <p>{{user.homilyId}}</p>
       </el-form-item>
     </el-col>
     <el-col :span="12">
@@ -169,4 +305,35 @@ console.log(user.value)
   margin-left: 50px;
 
 }
-</style>
\ No newline at end of file
+
+/* 上传图片的格式 */
+.avatar-uploader .avatar {
+  width: 50px;
+  height: 50px;
+  display: block;
+}
+</style>
+
+<style>
+  .avatar-uploader .el-upload {
+    border: 1px dashed var(--el-border-color);
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
+  }
+  
+  .avatar-uploader .el-upload:hover {
+    border-color: var(--el-color-primary);
+  }
+  
+  .el-icon.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 50px;
+    height: 50px;
+    text-align: center;
+
+  }
+  </style>
\ No newline at end of file