huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactor(gold): 优化金币相关页面布局和样式间距

youhua/chongzhi
lihui 2 months ago
parent
7078af443a
commit
d578581c48
3 changed files with 122 additions and 147 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 154
      src/views/consume/gold/addCoinConsume.vue
  2. 70
      src/views/recharge/gold/addCoinRecharge.vue
  3. 45
      src/views/refund/gold/addCoinRefund.vue

154
src/views/consume/gold/addCoinConsume.vue
View File

@ -1,16 +1,16 @@
<script setup> <script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { ElIcon, ElMessage, ElMessageBox } from "element-plus";
import {onMounted, reactive, ref, watch} from "vue";
import {ElIcon, ElMessage, ElMessageBox} from "element-plus";
import moment from "moment"; import moment from "moment";
import request from "@/util/http.js" import request from "@/util/http.js"
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import { useAdminStore } from "@/store/index.js";
import { storeToRefs } from "pinia";
import { WarnTriangleFilled } from "@element-plus/icons-vue";
import {useAdminStore} from "@/store/index.js";
import {storeToRefs} from "pinia";
import {WarnTriangleFilled} from "@element-plus/icons-vue";
import dayjs from "dayjs"; import dayjs from "dayjs";
const adminStore = useAdminStore(); const adminStore = useAdminStore();
const { adminData, menuTree } = storeToRefs(adminStore);
const {adminData, menuTree} = storeToRefs(adminStore);
// 精网号去空格 // 精网号去空格
const trimJwCode = () => { const trimJwCode = () => {
if (addConsume.value.jwcode) { if (addConsume.value.jwcode) {
@ -64,11 +64,11 @@ const addConsume = ref({
const Ref = ref(null) const Ref = ref(null)
const rules = reactive({ const rules = reactive({
jwcode: [ jwcode: [
{ required: true, message: "请输入精网号", trigger: "blur" },
{required: true, message: "请输入精网号", trigger: "blur"},
], ],
goodsName: [{ required: true, message: "请选择商品", trigger: "blur" }],
goodsName: [{required: true, message: "请选择商品", trigger: "blur"}],
sumGold: [ sumGold: [
{ required: true, message: "消耗金币总数不能为空", trigger: "blur" },
{required: true, message: "消耗金币总数不能为空", trigger: "blur"},
{ {
validator: (rule, value, callback) => { validator: (rule, value, callback) => {
// 允许0开头的小数（如0.1）但不允许单独的0 // 允许0开头的小数（如0.1）但不允许单独的0
@ -86,6 +86,7 @@ const rules = reactive({
}); });
// 查询商品的表单 // 查询商品的表单
const goods = ref([]) const goods = ref([])
// 输入验证函数 // 输入验证函数
function validateInput() { function validateInput() {
const sumGold = parseFloat(addConsume.value.sumGold); const sumGold = parseFloat(addConsume.value.sumGold);
@ -155,7 +156,6 @@ function validateInput() {
} }
// 验证金币总和 // 验证金币总和
const totalAvailableGold = (user.value.nowSumGold) const totalAvailableGold = (user.value.nowSumGold)
if (user.value.jwcode && sumGold > totalAvailableGold) { if (user.value.jwcode && sumGold > totalAvailableGold) {
@ -173,10 +173,10 @@ function calculateCoins(sumGold) {
console.log("消耗金币计算函数:计算金币", sumGold); console.log("消耗金币计算函数:计算金币", sumGold);
const parsedSumGold = parseFloat(sumGold); const parsedSumGold = parseFloat(sumGold);
if (isNaN(parsedSumGold) || parsedSumGold <= 0 || !user.value.jwcode) { if (isNaN(parsedSumGold) || parsedSumGold <= 0 || !user.value.jwcode) {
return { free: 0, permanent: 0, task: 0 };
return {free: 0, permanent: 0, task: 0};
} }
const { nowFreeGold, nowPermanentGold, nowTaskGold } = user.value;
const {nowFreeGold, nowPermanentGold, nowTaskGold} = user.value;
let remaining = parsedSumGold; let remaining = parsedSumGold;
let freeUsed = 0, permanentUsed = 0, taskUsed = 0; let freeUsed = 0, permanentUsed = 0, taskUsed = 0;
@ -202,8 +202,9 @@ function calculateCoins(sumGold) {
addConsume.value.permanentGold = permanentUsed; addConsume.value.permanentGold = permanentUsed;
addConsume.value.taskGold = taskUsed; addConsume.value.taskGold = taskUsed;
return { free: freeUsed, permanent: permanentUsed, task: taskUsed };
return {free: freeUsed, permanent: permanentUsed, task: taskUsed};
} }
// 用来写的 cookie 的 key // 用来写的 cookie 的 key
const WriteCookies = ref(null) const WriteCookies = ref(null)
// 用来写的 cookie 的 value // 用来写的 cookie 的 value
@ -232,7 +233,7 @@ const add = async function () {
// 设置cookies,用户jwcode为key，value也是jwcode，过期时间为1天 // 设置cookies,用户jwcode为key，value也是jwcode，过期时间为1天
Cookies.set(WriteCookies.value, WriteCookiesTime.value, { Cookies.set(WriteCookies.value, WriteCookiesTime.value, {
expires: expires:
1, path: '/'
1, path: '/'
}); });
addDisabled.value = true addDisabled.value = true
@ -311,6 +312,7 @@ function resetForm() {
nowSumGold: null nowSumGold: null
} }
} }
// 充值对话框显示状态 // 充值对话框显示状态
const ConsumeDialogVisible = ref(false); const ConsumeDialogVisible = ref(false);
@ -415,7 +417,7 @@ const getUser = async function (jwcode) {
// 发送POST请求 // 发送POST请求
const result = await request({ const result = await request({
url: "/user/selectUser", url: "/user/selectUser",
data: { jwcode }
data: {jwcode}
}); });
console.log("请求成功", result); console.log("请求成功", result);
@ -442,7 +444,7 @@ const getUser = async function (jwcode) {
if (addConsume.value.sumGold) { if (addConsume.value.sumGold) {
const parsedSumGold = parseFloat(addConsume.value.sumGold); const parsedSumGold = parseFloat(addConsume.value.sumGold);
if (!isNaN(parsedSumGold) && parsedSumGold > 0) { if (!isNaN(parsedSumGold) && parsedSumGold > 0) {
const { free, permanent, task } = calculateCoins(parsedSumGold);
const {free, permanent, task} = calculateCoins(parsedSumGold);
addConsume.value.freeGold = free; addConsume.value.freeGold = free;
addConsume.value.permanentGold = permanent; addConsume.value.permanentGold = permanent;
addConsume.value.taskGold = task; addConsume.value.taskGold = task;
@ -494,20 +496,20 @@ const getGoods = async function () {
// 监听消费总金额变化，自动计算三类金币 // 监听消费总金额变化，自动计算三类金币
watch( watch(
() => addConsume.value.sumGold,
(newValue) => {
const parsedNewValue = parseFloat(newValue);
if (!isNaN(parsedNewValue) && parsedNewValue > 0) {
const { free, permanent, task } = calculateCoins(parsedNewValue);
addConsume.value.freeGold = free;
addConsume.value.permanentGold = permanent;
addConsume.value.taskGold = task;
} else {
addConsume.value.freeGold = null;
addConsume.value.permanentGold = null;
addConsume.value.taskGold = null;
() => addConsume.value.sumGold,
(newValue) => {
const parsedNewValue = parseFloat(newValue);
if (!isNaN(parsedNewValue) && parsedNewValue > 0) {
const {free, permanent, task} = calculateCoins(parsedNewValue);
addConsume.value.freeGold = free;
addConsume.value.permanentGold = permanent;
addConsume.value.taskGold = task;
} else {
addConsume.value.freeGold = null;
addConsume.value.permanentGold = null;
addConsume.value.taskGold = null;
}
} }
}
); );
/* /*
@ -524,47 +526,47 @@ onMounted(async function () {
<template> <template>
<div> <div>
<el-form :model="addConsume" ref="Ref" :rules="rules" style="max-width: 600px;" class="add-form">
<el-form :model="addConsume" ref="Ref" :rules="rules" style="max-width: 600px;" class="add-form" label-width="auto" label-position="right">
<el-form-item prop="jwcode" label="精网号" style="margin-top: 50px"> <el-form-item prop="jwcode" label="精网号" style="margin-top: 50px">
<el-input v-model="addConsume.jwcode" style="width: 10vw;margin-left:45px" />
<el-input v-model="addConsume.jwcode" style="width: 10vw;"/>
<el-button type="primary" @click="getUser(addConsume.jwcode)" style="margin-left: 10px">查询 <el-button type="primary" @click="getUser(addConsume.jwcode)" style="margin-left: 10px">查询
</el-button> </el-button>
</el-form-item> </el-form-item>
<el-form-item prop="goodsName" label="商品名称" style="flex: 1; margin-right: 0px"> <el-form-item prop="goodsName" label="商品名称" style="flex: 1; margin-right: 0px">
<el-select v-model="addConsume.goodsName" placeholder="请选择商品" style="width: 10vw;margin-left:30px">
<el-option v-for="item in goods" :key="item.value" :label="item.label" :value="item.value" />
<el-select v-model="addConsume.goodsName" placeholder="请选择商品" style="width: 10vw;">
<el-option v-for="item in goods" :key="item.value" :label="item.label" :value="item.value"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="sumGold" label="消耗金币总数"> <el-form-item prop="sumGold" label="消耗金币总数">
<el-input v-model="addConsume.sumGold" style="width: 10vw;margin-left:2px" @input="validateInput()"
@change="calculateCoins(addConsume.sumGold)" />
<el-input v-model="addConsume.sumGold" style="width: 10vw;" @input="validateInput()"
@change="calculateCoins(addConsume.sumGold)"/>
</el-form-item> </el-form-item>
<!-- 三类金币自动计算（禁用状态，不可编辑） --> <!-- 三类金币自动计算（禁用状态，不可编辑） -->
<el-form-item prop="permanentGold" label="永久金币"> <el-form-item prop="permanentGold" label="永久金币">
<el-input v-model="addConsume.permanentGold" disabled style="width: 10vw;margin-left:40px">
<el-input v-model="addConsume.permanentGold" disabled style="width: 10vw;">
<template #default="scope">{{ scope.row.permanentGold }}</template> <template #default="scope">{{ scope.row.permanentGold }}</template>
</el-input> </el-input>
<p style="margin-right: 0px">&nbsp;&nbsp;个</p> <p style="margin-right: 0px">&nbsp;&nbsp;个</p>
</el-form-item> </el-form-item>
<el-form-item prop="freeCoin" label="免费金币"> <el-form-item prop="freeCoin" label="免费金币">
<el-input disabled v-model="addConsume.freeGold" style="width: 10vw;margin-left:40px" />
<el-input disabled v-model="addConsume.freeGold" style="width: 10vw;"/>
<p style="margin-right: 0px">&nbsp;&nbsp;个</p> <p style="margin-right: 0px">&nbsp;&nbsp;个</p>
</el-form-item> </el-form-item>
<el-form-item prop="taskGold" label="任务金币"> <el-form-item prop="taskGold" label="任务金币">
<el-input disabled v-model="addConsume.taskGold" style="width: 10vw;margin-left:40px" />
<el-input disabled v-model="addConsume.taskGold" style="width: 10vw;"/>
<p style="margin-right: 20px">&nbsp;&nbsp;个</p> <p style="margin-right: 20px">&nbsp;&nbsp;个</p>
</el-form-item> </el-form-item>
<el-form-item prop="remark" label="备注"> <el-form-item prop="remark" label="备注">
<el-input v-model="addConsume.remark" style="width: 13.5vw;margin-left:70px" :rows="4" maxlength="100"
show-word-limit type="textarea" />
<el-input v-model="addConsume.remark" style="width: 13.5vw;" :rows="4" maxlength="100"
show-word-limit type="textarea"/>
</el-form-item> </el-form-item>
<el-button type="success" @click="resetForm()" style="margin-left: 200px;margin-top:10px">重置</el-button> <el-button type="success" @click="resetForm()" style="margin-left: 200px;margin-top:10px">重置</el-button>
@ -585,21 +587,19 @@ onMounted(async function () {
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
<!-- <el-form-item label="历史金币总数">-->
<!-- &lt;!&ndash; 检查 user.historySumGold 是否为有效的数字 &ndash;&gt;-->
<!-- <p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.historySumGold))">-->
<!-- {{ Number(user.historySumGold) }}-->
<!-- </p>-->
<!-- &lt;!&ndash; 如果不是有效的数字，显示默认值 &ndash;&gt;-->
<!-- <p v-else></p>-->
<!-- </el-form-item>-->
<!-- <el-form-item style="margin-top: -23px">-->
<!-- <span style="display: inline; white-space: nowrap; color: #b1b1b1"-->
<!-- v-if="user.historyPermanentGold !== undefined">(永久金币:{{ user.historyPermanentGold }};免费金币:{{-->
<!-- (user.historyFreeGold)-->
<!-- }};任务金币:{{ user.historyTaskGold }})</span>-->
<!-- </el-form-item>-->
<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-col>
</el-row> </el-row>
@ -611,22 +611,14 @@ onMounted(async function () {
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14"> <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 label="充值次数">
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- 第三行：首次充值日期 + 充值次数 --> <!-- 第三行：首次充值日期 + 充值次数 -->
<el-row style="margin-top:-23px">
<el-row >
<el-col :span="9"> <el-col :span="9">
<el-form-item label="首次充值日期"> <el-form-item label="首次充值日期">
<p v-if="user.firstRecharge"> <p v-if="user.firstRecharge">
@ -635,8 +627,8 @@ onMounted(async function () {
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
<el-form-item label="充值次数">
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
<el-form-item label="消费次数">
<p style="color: #2fa1ff">{{ user.consumeNum }}</p>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -644,11 +636,6 @@ onMounted(async function () {
<!-- 第四行：消费次数 + 所属门店 --> <!-- 第四行：消费次数 + 所属门店 -->
<el-row> <el-row>
<el-col :span="9"> <el-col :span="9">
<el-form-item label="消费次数">
<p style="color: #2fa1ff">{{ user.consumeNum }}</p>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="所属门店"> <el-form-item label="所属门店">
<p>{{ user.market }}</p> <p>{{ user.market }}</p>
</el-form-item> </el-form-item>
@ -704,6 +691,11 @@ onMounted(async function () {
</el-col> </el-col>
</el-row> </el-row>
<div class="field">
<div class="field-label">备注</div>
<el-input v-model="addConsume.remark" disabled/>
</div>
</div> </div>
<!-- 底部按钮（居中） --> <!-- 底部按钮（居中） -->
@ -723,36 +715,36 @@ onMounted(async function () {
<!-- 用户信息 --> <!-- 用户信息 -->
<div> <div>
<div class="field-label">用户信息</div> <div class="field-label">用户信息</div>
<el-input :model-value="user.jwcode + (user.name ? '【' + user.name + '】' : '')" disabled />
<el-input :model-value="user.jwcode + (user.name ? '【' + user.name + '】' : '')" disabled/>
</div> </div>
<!-- 活动名称 --> <!-- 活动名称 -->
<div class="field"> <div class="field">
<div class="field-label">商品名称</div> <div class="field-label">商品名称</div>
<el-input v-model="addConsume.goodsName" disabled />
<el-input v-model="addConsume.goodsName" disabled/>
</div> </div>
<!--金币总数 --> <!--金币总数 -->
<div class="field"> <div class="field">
<div class="field-label">金币总数</div> <div class="field-label">金币总数</div>
<el-input v-model="addConsume.sumGold" disabled />
<el-input v-model="addConsume.sumGold" disabled/>
</div> </div>
<!-- 金币详细信息（同一行左右排列） --> <!-- 金币详细信息（同一行左右排列） -->
<el-row :gutter="20" class="coins-row"> <el-row :gutter="20" class="coins-row">
<el-col :span="8"> <el-col :span="8">
<div class="field"> <div class="field">
<div class="field-label">永久金币</div> <div class="field-label">永久金币</div>
<el-input v-model="addConsume.permanentGold" disabled />
<el-input v-model="addConsume.permanentGold" disabled/>
</div> </div>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div class="field"> <div class="field">
<div class="field-label">免费金币</div> <div class="field-label">免费金币</div>
<el-input v-model="addConsume.freeGold" disabled />
<el-input v-model="addConsume.freeGold" disabled/>
</div> </div>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div class="field"> <div class="field">
<div class="field-label">任务金币</div> <div class="field-label">任务金币</div>
<el-input v-model="addConsume.taskGold" disabled />
<el-input v-model="addConsume.taskGold" disabled/>
</div> </div>
</el-col> </el-col>
@ -760,13 +752,13 @@ onMounted(async function () {
<!-- 风险提示 --> <!-- 风险提示 -->
<div style="display: flex; align-items: center; margin-top: 20px;"> <div style="display: flex; align-items: center; margin-top: 20px;">
<el-icon :size="24" color="#FFD700"> <el-icon :size="24" color="#FFD700">
<WarnTriangleFilled />
<WarnTriangleFilled/>
</el-icon> </el-icon>
<p>重复购买风险提示</p> <p>重复购买风险提示</p>
</div> </div>
<!-- 记录 + 虚线分隔 --> <!-- 记录 + 虚线分隔 -->
<div> <div>
<el-divider border-style="dashed" />
<el-divider border-style="dashed"/>
<p>检测到该用户近期有相似消费记录：</p> <p>检测到该用户近期有相似消费记录：</p>
· {{ ReadCookiesTime }} 购买 【{{ addConsume.goodsName }}】(操作人: {{ adminData.adminName }}) · {{ ReadCookiesTime }} 购买 【{{ addConsume.goodsName }}】(操作人: {{ adminData.adminName }})
</div> </div>

70
src/views/recharge/gold/addCoinRecharge.vue
View File

@ -718,65 +718,50 @@ onMounted(() => {
</el-form> </el-form>
<!-- 客户信息栏 --> <!-- 客户信息栏 -->
<el-card v-if="user.jwcode" class="beautiful">
<el-card v-if="user.jwcode" style="width: 800px" class="beautiful">
<el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left"> <el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left">
<el-text size="large" style="margin-left: 20px">客户信息</el-text> <el-text size="large" style="margin-left: 20px">客户信息</el-text>
<!-- 第一行：姓名 + 历史金币 --> <!-- 第一行：姓名 + 历史金币 -->
<el-row style="margin-top: 20px"> <el-row style="margin-top: 20px">
<el-col :span="9"> <el-col :span="9">
<el-form-item label="姓名:">
<el-form-item label="姓名">
<p>{{ user.name }}</p> <p>{{ user.name }}</p>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
<!-- <el-form-item label="历史金币总数">-->
<!-- &lt;!&ndash; 检查 user.historySumGold 是否为有效的数字 &ndash;&gt;-->
<!-- <p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.historySumGold))">-->
<!-- {{ Number(user.historySumGold) / 100 }}-->
<!-- </p>-->
<!-- &lt;!&ndash; 如果不是有效的数字，显示默认值 &ndash;&gt;-->
<!-- <p v-else></p>-->
<!-- </el-form-item>-->
<!-- <el-form-item style="margin-top: -23px">-->
<!-- <span style="display: inline; white-space: nowrap; color: #b1b1b1"-->
<!-- v-if="user.historyPermanentGold !== undefined">(永久金币:{{-->
<!-- user.historyPermanentGold / 100-->
<!-- }};免费金币:{{-->
<!-- (user.historyFreeGold) / 100-->
<!-- }};任务金币:{{ user.historyTaskGold / 100 }})</span>-->
<!-- </el-form-item>-->
<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-col>
</el-row> </el-row>
<!-- 第二行：精网号 + 当前金币（独立行） --> <!-- 第二行：精网号 + 当前金币（独立行） -->
<el-row style="margin-top:-23px">
<el-row>
<el-col :span="9"> <el-col :span="9">
<el-form-item label="精网号"> <el-form-item label="精网号">
<p>{{ user.jwcode }}</p> <p>{{ user.jwcode }}</p>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14"> <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
/ 100
}}</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 / 100
}};
免费金币:{{ user.nowFreeGold / 100 }};
任务金币:{{ user.nowTaskGold / 100 }})</span>
<el-form-item label="充值次数">
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- 第三行：首次充值日期 + 充值次数 --> <!-- 第三行：首次充值日期 + 充值次数 -->
<el-row style="margin-top:-23px">
<el-row >
<el-col :span="9"> <el-col :span="9">
<el-form-item label="首次充值日期"> <el-form-item label="首次充值日期">
<p v-if="user.firstRecharge"> <p v-if="user.firstRecharge">
@ -785,8 +770,8 @@ onMounted(() => {
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
<el-form-item label="充值次数">
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
<el-form-item label="消费次数">
<p style="color: #2fa1ff">{{ user.consumeNum }}</p>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -794,11 +779,6 @@ onMounted(() => {
<!-- 第四行：消费次数 + 所属门店 --> <!-- 第四行：消费次数 + 所属门店 -->
<el-row> <el-row>
<el-col :span="9"> <el-col :span="9">
<el-form-item label="消费次数">
<p style="color: #2fa1ff">{{ user.consumeNum }}</p>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="所属门店"> <el-form-item label="所属门店">
<p>{{ user.market }}</p> <p>{{ user.market }}</p>
</el-form-item> </el-form-item>
@ -836,6 +816,14 @@ onMounted(() => {
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<div class="field">
<div class="field-label">备注</div>
<el-input v-model="recharge.remark" disabled/>
</div>
</div> </div>
<!-- 底部按钮（居中） --> <!-- 底部按钮（居中） -->

45
src/views/refund/gold/addCoinRefund.vue
View File

@ -506,23 +506,31 @@ onMounted(async function () {
</el-form> </el-form>
<!-- 客户信息栏 --> <!-- 客户信息栏 -->
<el-card v-if="user.jwcode" class="beautiful">
<el-card v-if="user.jwcode" style="width: 800px" class="beautiful">
<el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left"> <el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left">
<el-text size="large" style="margin-left: 20px">客户信息</el-text> <el-text size="large" style="margin-left: 20px">客户信息</el-text>
<!-- 第一行：姓名 + 历史金币 --> <!-- 第一行：姓名 + 历史金币 -->
<el-row style="margin-top: 20px"> <el-row style="margin-top: 20px">
<el-col :span="9"> <el-col :span="9">
<el-form-item label="姓名:">
<el-form-item label="姓名">
<p>{{ user.name }}</p> <p>{{ user.name }}</p>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
<!-- <el-form-item label="历史金币总数">-->
<!-- <p v-if="!isNaN(Number(user.historySumGold))">-->
<!-- {{ Number(user.historySumGold) }}-->
<!-- </p>-->
<!-- </el-form-item>-->
<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-col>
</el-row> </el-row>
@ -534,22 +542,14 @@ onMounted(async function () {
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14"> <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 label="充值次数">
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- 第三行：首次充值日期 + 充值次数 --> <!-- 第三行：首次充值日期 + 充值次数 -->
<el-row style="margin-top:-23px">
<el-row >
<el-col :span="9"> <el-col :span="9">
<el-form-item label="首次充值日期"> <el-form-item label="首次充值日期">
<p v-if="user.firstRecharge"> <p v-if="user.firstRecharge">
@ -558,8 +558,8 @@ onMounted(async function () {
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
<el-form-item label="充值次数">
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
<el-form-item label="消费次数">
<p style="color: #2fa1ff">{{ user.consumeNum }}</p>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -567,11 +567,6 @@ onMounted(async function () {
<!-- 第四行：消费次数 + 所属门店 --> <!-- 第四行：消费次数 + 所属门店 -->
<el-row> <el-row>
<el-col :span="9"> <el-col :span="9">
<el-form-item label="消费次数">
<p style="color: #2fa1ff">{{ user.consumeNum }}</p>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="所属门店"> <el-form-item label="所属门店">
<p>{{ user.market }}</p> <p>{{ user.market }}</p>
</el-form-item> </el-form-item>

Write Preview
Loading…
Cancel
Save