From 0cb45a8f830a842d3b2135d0c9fc7e415b266d4f Mon Sep 17 00:00:00 2001
From: zhangrenyuan <18990852002@163.com>
Date: Sun, 24 Aug 2025 11:11:28 +0800
Subject: [PATCH] fix refund'style

---
 src/views/refund/gold/addCoinRefund.vue | 385 ++++++++++++++++++--------------
 1 file changed, 217 insertions(+), 168 deletions(-)

diff --git a/src/views/refund/gold/addCoinRefund.vue b/src/views/refund/gold/addCoinRefund.vue
index 02ff95f..2bfdb71 100644
--- a/src/views/refund/gold/addCoinRefund.vue
+++ b/src/views/refund/gold/addCoinRefund.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+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'
@@ -14,7 +14,7 @@ const addRe = ref({
 const adminData = ref({})
 const getAdminData = async function () {
   try {
-    const result = await API({ url: '/admin/userinfo', data: {} })
+    const result = await API({url: '/admin/userinfo', data: {}})
     adminData.value = result
     addRefund.value.adminId = adminData.value.id
     console.log('请求成功', result)
@@ -120,13 +120,13 @@ const addBefore = () => {
       // }
 
       ElMessageBox.confirm('确认退款？')
-        .then(() => {
-          add()
-          console.log('退款成功')
-        })
-        .catch(() => {
-          console.log('取消退款')
-        })
+          .then(() => {
+            add()
+            console.log('退款成功')
+          })
+          .catch(() => {
+            console.log('取消退款')
+          })
     } else {
       //提示
       ElMessage({
@@ -154,18 +154,18 @@ const validateJwCode = (rule, value, callback) => {
   callback();
 };
 const rules = reactive({
-  jwcode: [{ required: true, validator: validateJwCode, trigger: 'blur' }],
-  refundType: [{ required: true, message: '请选择退款类型', trigger: 'blur' }],
-  goodsName: [{ required: false, message: '请选择退款商品', trigger: 'blur' }],
+  jwcode: [{required: true, validator: validateJwCode, trigger: 'blur'}],
+  refundType: [{required: true, message: '请选择退款类型', trigger: 'blur'}],
+  goodsName: [{required: false, message: '请选择退款商品', trigger: 'blur'}],
   // 订单号
-  orderCode: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
-  taskGold: [{ required: true, message: '请输入任务金币', trigger: 'blur' }],
-  freeGold: [{ required: true, message: '请输入免费金币', trigger: 'blur' }],
+  orderCode: [{required: true, message: '请输入订单号', trigger: 'blur'}],
+  taskGold: [{required: true, message: '请输入任务金币', trigger: 'blur'}],
+  freeGold: [{required: true, message: '请输入免费金币', trigger: 'blur'}],
   permanentGold: [
-    { required: true, message: '请输入永久金币', trigger: 'blur' }
+    {required: true, message: '请输入永久金币', trigger: 'blur'}
   ],
   sumGold: [
-    { required: true, message: '请选择付款方式', trigger: 'blur' },
+    {required: true, message: '请选择付款方式', trigger: 'blur'},
     {
       validator: (rule, value) => {
         if (value === 0) {
@@ -235,11 +235,11 @@ const getUser = async function (jwcode) {
       // 对传过来的金币数除以 100
       const processedData = {
         ...result.data,
-        historySumGold: (Number(result.data.historySumGold) || 0),
-        nowSumGold: (Number(result.data.nowSumGold) || 0),
-        nowPermanentGold: (Number(result.data.nowPermanentGold) || 0),
-        nowFreeGold: (Number(result.data.nowFreeGold) || 0),
-        nowTaskGold: (Number(result.data.nowTaskGold) || 0)
+        historySumGold: (Number(result.data.historySumGold) || 0) ,
+        nowSumGold: (Number(result.data.nowSumGold) || 0) ,
+        nowPermanentGold: (Number(result.data.nowPermanentGold) || 0) ,
+        nowFreeGold: (Number(result.data.nowFreeGold) || 0) ,
+        nowTaskGold: (Number(result.data.nowTaskGold) || 0) 
       }
       user.value = processedData;
       console.log("用户信息", user.value);
@@ -254,13 +254,13 @@ const getUser = async function (jwcode) {
 
 
 // 退款类型，写死为商品退款
-const refundType = ref([{ value: '商品退款', label: '商品退款' }]);
+const refundType = ref([{value: '商品退款', label: '商品退款'}]);
 
 // 获取退款类型
 // const getRefundTypes = async function () {
 //   try {
 //     // 发送请求获取退款类型
-//     const result = await API({
+//     const result = await API({ 
 //       url: '/refund/refundType', //这里应该写上一个退款类型的接口
 //       data: {} })
 //     console.log('退款类型请求成功', result)
@@ -299,7 +299,7 @@ const getGoods = async function (jwcode) {
   try {
     const result = await API({
       url: '/refund/selectGoods',
-      data: { jwcode: addRefund.value.jwcode }
+      data: {jwcode: addRefund.value.jwcode}
     })
 
     if (Array.isArray(result.data)) {
@@ -307,9 +307,9 @@ const getGoods = async function (jwcode) {
       goodsName.value = result.data.map(item => ({
         orderCode: item.orderCode,
         goodsName: item.goodsName,
-        permanentGold: Math.abs(Number((item.permanentGold) || 0) / 100),
-        freeGold: Math.abs(Number((item.freeGold) || 0) / 100),
-        taskGold: Math.abs(Number((item.taskGold) || 0) / 100),
+        permanentGold: Math.abs(Number((item.permanentGold) || 0)/100)  ,
+        freeGold: Math.abs(Number((item.freeGold) || 0)/100) ,
+        taskGold: Math.abs(Number((item.taskGold) || 0)/100) ,
       }))
 
       // 转换订单号数组 [{label, value}]
@@ -479,162 +479,172 @@ onMounted(async function () {
 <template>
   <div>
     <div class="userAndForm">
-      <div class="left">
-        <el-form :model="addRefund" ref="Ref" :rules="rules" label-width="auto" label-position="right"
-          style="max-width: 750px" class="add-form">
-          <el-form-item prop="jwcode" label="精网号">
-            <el-input v-model="addRefund.jwcode" style="width: 220px" @change="getGoods(addRefund.jwcode)" />
-            <el-button type="primary" @click="getUser(addRefund.jwcode)" style="margin-left: 20px">查询
-            </el-button>
-          </el-form-item>
-          <el-form-item prop="refundType" label="退款类型">
-            <el-select v-model="addRefund.refundType" placeholder="请选择" style="width: 220px">
-              <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">
-              <el-option v-for="(item, index) in orderCodes" :key="index" :label="item.label" :value="item.value" />
-            </el-select>
-          </el-form-item>
-
-          <el-form-item prop="goodsName" label="商品名">
-            <el-input v-model="addRefund.goodsName" style="width: 220px" disabled />
-          </el-form-item>
-
-
-          <el-form-item prop="refundModel" label="退款方式:">
-            <el-radio-group v-model="addRe.typeR" @change="handleRefundModelChange">
-              <el-radio value="0">全部退款</el-radio>
-              <el-radio value="1">部分退款</el-radio>
-            </el-radio-group>
+      <el-form :model="addRefund" ref="Ref" :rules="rules" label-width="auto" label-position="right"
+               style="max-width: 750px" class="form-style">
+        <el-form-item prop="jwcode" label="精网号">
+          <el-input v-model="addRefund.jwcode" style="width: 220px" @change="getGoods(addRefund.jwcode)"/>
+          <el-button type="primary" @click="getUser(addRefund.jwcode)" style="margin-left: 20px">查询
+          </el-button>
+        </el-form-item>
+        <el-form-item prop="refundType" label="退款类型">
+          <el-select v-model="addRefund.refundType" placeholder="请选择" style="width: 220px">
+            <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"
+
+          >
+            <el-option
+                v-for="(item, index) in orderCodes"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item prop="goodsName" label="商品名">
+          <el-input v-model="addRefund.goodsName" style="width: 220px" disabled/>
+        </el-form-item>
+
+
+        <el-form-item prop="refundModel" label="退款方式:">
+          <el-radio-group v-model="addRe.typeR" @change="handleRefundModelChange">
+            <el-radio value="0">全部退款</el-radio>
+            <el-radio value="1">部分退款</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item prop="permanentGold" label="永久金币">
+          <el-input v-model="addRefund.permanentGold" style="width: 220px"
+                    :disabled="addRe.typeR === '0' ? true : false" @input="handlePermanentGoldInput($event)"
+                    type="number">
+          </el-input>&nbsp;&nbsp;个
+        </el-form-item>
+
+
+        <el-form-item prop="freeGold" label="免费金币">
+          <el-input v-model="addRefund.freeGold" style="float: left; width: 220px"
+                    :disabled="addRe.typeR === '0' ? true : false" @input="handleFreeGoldInput($event)" type="number"/>
+          &nbsp;&nbsp;个
+        </el-form-item>
+
+        <div>
+          <el-form-item prop="taskGold" label="任务金币">
+            <el-input v-model="addRefund.taskGold" style="float: left; width: 220px"
+                      :disabled="addRe.typeR === '0' ? true : false" @input="handleTaskGoldInput($event)"
+                      type="number"/>
+            &nbsp;&nbsp;个
           </el-form-item>
-
-          <el-form-item prop="permanentGold" label="永久金币">
-            <el-input v-model="addRefund.permanentGold" style="width: 220px"
-              :disabled="addRe.typeR === '0' ? true : false" @input="handlePermanentGoldInput($event)" type="number">
-            </el-input>&nbsp;&nbsp;个
+        </div>
+        <div>
+          <el-form-item prop="sumGold" label="退款金币总数">
+            <el-input disabled v-model="addRefund.sumGold" style="width: 220px">
+            </el-input>
           </el-form-item>
+        </div>
+        <div>
 
-
-          <el-form-item prop="freeGold" label="免费金币">
-            <el-input v-model="addRefund.freeGold" style="float: left; width: 220px"
-              :disabled="addRe.typeR === '0' ? true : false" @input="handleFreeGoldInput($event)" type="number" />
-            &nbsp;&nbsp;个
+          <el-form-item prop="remark" label="备注">
+            <el-input v-model="addRefund.remark" style="width: 220px" :rows="3" maxlength="100" show-word-limit
+                      type="textarea"/>
           </el-form-item>
-
-          <div>
-            <el-form-item prop="taskGold" label="任务金币">
-              <el-input v-model="addRefund.taskGold" style="float: left; width: 220px"
-                :disabled="addRe.typeR === '0' ? true : false" @input="handleTaskGoldInput($event)" type="number" />
-              &nbsp;&nbsp;个
-            </el-form-item>
-          </div>
-          <div>
-            <el-form-item prop="sumGold" label="退款金币总数">
-              <el-input disabled v-model="addRefund.sumGold" style="width: 220px">
-              </el-input>
-            </el-form-item>
-          </div>
-          <div>
-
-            <el-form-item prop="remark" label="备注">
-              <el-input v-model="addRefund.remark" style="width: 220px" :rows="3" maxlength="100" show-word-limit
-                type="textarea" />
-            </el-form-item>
-          </div>
-
-          <el-button type="success" @click="cancel()" style="margin-left: 200px">重置</el-button>
-          <el-button type="primary" :disabled="addDisabled" @click="addBefore"> 提交</el-button>
-        </el-form>
-      </div>
-
-      <div class="right">
-        <!-- 客户信息栏 -->
-        <el-card v-if="user.jwcode" style="max-width: 800px" class="beautiful">
-          <el-form :model="user" label-width="auto" style="min-width: 800px" label-position="left">
-            <el-text size="large" style="margin-left: 20px">客户信息</el-text>
-
-            <!-- 第一行：姓名 + 历史金币 -->
-            <el-row style="margin-top: 20px">
-              <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">(永久金币:{{
+        </div>
+
+        <el-button type="success" @click="cancel()" style="margin-left: 200px">重置</el-button>
+        <el-button type="primary" :disabled="addDisabled" @click="addBefore"> 提交</el-button>
+      </el-form>
+
+      <!-- 客户信息栏 -->
+      <el-card v-if="user.jwcode" style="max-width: 800px" class="beautiful">
+        <el-form :model="user" label-width="auto" style="max-width: 800px" label-position="left">
+          <el-text size="large" style="margin-left: 20px">客户信息</el-text>
+
+          <!-- 第一行：姓名 + 历史金币 -->
+          <el-row style="margin-top: 20px">
+            <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-row>
-
-            <!-- 第二行：精网号 + 当前金币（独立行） -->
-            <el-row>
-              <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.rechargeNum }}</p>
-                </el-form-item>
-              </el-col>
-            </el-row>
-
-            <!-- 第三行：首次充值日期 + 充值次数 -->
-            <el-row>
-              <el-col :span="9">
-                <el-form-item label="首次充值日期">
-                  <p v-if="user.firstRecharge">
-                    {{ moment(user.firstRecharge).format('YYYY-MM-DD HH:mm:ss') }}
-                  </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-col>
-            </el-row>
-
-            <!-- 第四行：消费次数 + 所属门店 -->
-            <el-row>
-              <el-col :span="9">
-                <el-form-item label="所属门店">
-                  <p>{{ user.market }}</p>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-        </el-card>
-      </div>
-
+                免费金币:{{ user.nowFreeGold }};
+                任务金币:{{ user.nowTaskGold }})</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行：精网号 + 当前金币（独立行） -->
+          <el-row>
+            <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.rechargeNum }}</p>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第三行：首次充值日期 + 充值次数 -->
+          <el-row>
+            <el-col :span="9">
+              <el-form-item label="首次充值日期">
+                <p v-if="user.firstRecharge">
+                  {{ moment(user.firstRecharge).format('YYYY-MM-DD HH:mm:ss') }}
+                </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-col>
+          </el-row>
+
+          <!-- 第四行：消费次数 + 所属门店 -->
+          <el-row>
+            <el-col :span="9">
+              <el-form-item label="所属门店">
+                <p>{{ user.market }}</p>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-card>
     </div>
   </div>
 
 </template>
 
-<style scoped lang="scss">
+<style scoped>
+
 p {
   margin: 0px;
 }
 
 .userAndForm {
   width: 1150px;
-  height: 100%;
   display: flex;
   align-items: center;
 
@@ -656,3 +666,42 @@ p {
   margin-left: 50px;
 }
 </style>
+
+<style>
+
+/* 上传图片的格式 */
+.avatar-uploader .avatar {
+  width: 50px;
+  height: 50px;
+  display: block;
+}
+
+.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;
+}
+
+
+.form-style2 {
+  max-width: 60%;
+}
+
+
+</style>
+