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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 128
      src/views/consume/gold/addCoinConsume.vue
  2. 70
      src/views/recharge/gold/addCoinRecharge.vue
  3. 45
      src/views/refund/gold/addCoinRefund.vue

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

@ -1,16 +1,16 @@
<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 request from "@/util/http.js"
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";
const adminStore = useAdminStore();
const { adminData, menuTree } = storeToRefs(adminStore);
const {adminData, menuTree} = storeToRefs(adminStore);
// 精网号去空格
const trimJwCode = () => {
if (addConsume.value.jwcode) {
@ -64,11 +64,11 @@ const addConsume = ref({
const Ref = ref(null)
const rules = reactive({
jwcode: [
{ required: true, message: "请输入精网号", trigger: "blur" },
{required: true, message: "请输入精网号", trigger: "blur"},
],
goodsName: [{ required: true, message: "请选择商品", trigger: "blur" }],
goodsName: [{required: true, message: "请选择商品", trigger: "blur"}],
sumGold: [
{ required: true, message: "消耗金币总数不能为空", trigger: "blur" },
{required: true, message: "消耗金币总数不能为空", trigger: "blur"},
{
validator: (rule, value, callback) => {
// 允许0开头的小数（如0.1）但不允许单独的0
@ -86,6 +86,7 @@ const rules = reactive({
});
// 查询商品的表单
const goods = ref([])
// 输入验证函数
function validateInput() {
const sumGold = parseFloat(addConsume.value.sumGold);
@ -155,7 +156,6 @@ function validateInput() {
}
// 验证金币总和
const totalAvailableGold = (user.value.nowSumGold)
if (user.value.jwcode && sumGold > totalAvailableGold) {
@ -173,10 +173,10 @@ function calculateCoins(sumGold) {
console.log("消耗金币计算函数:计算金币", sumGold);
const parsedSumGold = parseFloat(sumGold);
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 freeUsed = 0, permanentUsed = 0, taskUsed = 0;
@ -202,8 +202,9 @@ function calculateCoins(sumGold) {
addConsume.value.permanentGold = permanentUsed;
addConsume.value.taskGold = taskUsed;
return { free: freeUsed, permanent: permanentUsed, task: taskUsed };
return {free: freeUsed, permanent: permanentUsed, task: taskUsed};
}
// 用来写的 cookie 的 key
const WriteCookies = ref(null)
// 用来写的 cookie 的 value
@ -311,6 +312,7 @@ function resetForm() {
nowSumGold: null
}
}
// 充值对话框显示状态
const ConsumeDialogVisible = ref(false);
@ -415,7 +417,7 @@ const getUser = async function (jwcode) {
// 发送POST请求
const result = await request({
url: "/user/selectUser",
data: { jwcode }
data: {jwcode}
});
console.log("请求成功", result);
@ -442,7 +444,7 @@ const getUser = async function (jwcode) {
if (addConsume.value.sumGold) {
const parsedSumGold = parseFloat(addConsume.value.sumGold);
if (!isNaN(parsedSumGold) && parsedSumGold > 0) {
const { free, permanent, task } = calculateCoins(parsedSumGold);
const {free, permanent, task} = calculateCoins(parsedSumGold);
addConsume.value.freeGold = free;
addConsume.value.permanentGold = permanent;
addConsume.value.taskGold = task;
@ -498,7 +500,7 @@ watch(
(newValue) => {
const parsedNewValue = parseFloat(newValue);
if (!isNaN(parsedNewValue) && parsedNewValue > 0) {
const { free, permanent, task } = calculateCoins(parsedNewValue);
const {free, permanent, task} = calculateCoins(parsedNewValue);
addConsume.value.freeGold = free;
addConsume.value.permanentGold = permanent;
addConsume.value.taskGold = task;
@ -524,47 +526,47 @@ onMounted(async function () {
<template>
<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-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>
</el-form-item>
<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-form-item>
<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 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>
</el-input>
<p style="margin-right: 0px">&nbsp;&nbsp;个</p>
</el-form-item>
<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>
</el-form-item>
<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>
</el-form-item>
<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-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-col>
<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-row>
@ -611,22 +611,14 @@ onMounted(async function () {
</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 label="充值次数">
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
</el-form-item>
</el-col>
</el-row>
<!-- 第三行：首次充值日期 + 充值次数 -->
<el-row style="margin-top:-23px">
<el-row >
<el-col :span="9">
<el-form-item label="首次充值日期">
<p v-if="user.firstRecharge">
@ -635,8 +627,8 @@ onMounted(async function () {
</el-form-item>
</el-col>
<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-col>
</el-row>
@ -644,11 +636,6 @@ onMounted(async function () {
<!-- 第四行：消费次数 + 所属门店 -->
<el-row>
<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="所属门店">
<p>{{ user.market }}</p>
</el-form-item>
@ -704,6 +691,11 @@ onMounted(async function () {
</el-col>
</el-row>
<div class="field">
<div class="field-label">备注</div>
<el-input v-model="addConsume.remark" disabled/>
</div>
</div>
<!-- 底部按钮（居中） -->
@ -723,36 +715,36 @@ onMounted(async function () {
<!-- 用户信息 -->
<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 class="field">
<div class="field-label">商品名称</div>
<el-input v-model="addConsume.goodsName" disabled />
<el-input v-model="addConsume.goodsName" disabled/>
</div>
<!--金币总数 -->
<div class="field">
<div class="field-label">金币总数</div>
<el-input v-model="addConsume.sumGold" disabled />
<el-input v-model="addConsume.sumGold" disabled/>
</div>
<!-- 金币详细信息（同一行左右排列） -->
<el-row :gutter="20" class="coins-row">
<el-col :span="8">
<div class="field">
<div class="field-label">永久金币</div>
<el-input v-model="addConsume.permanentGold" disabled />
<el-input v-model="addConsume.permanentGold" disabled/>
</div>
</el-col>
<el-col :span="8">
<div class="field">
<div class="field-label">免费金币</div>
<el-input v-model="addConsume.freeGold" disabled />
<el-input v-model="addConsume.freeGold" disabled/>
</div>
</el-col>
<el-col :span="8">
<div class="field">
<div class="field-label">任务金币</div>
<el-input v-model="addConsume.taskGold" disabled />
<el-input v-model="addConsume.taskGold" disabled/>
</div>
</el-col>
@ -760,13 +752,13 @@ onMounted(async function () {
<!-- 风险提示 -->
<div style="display: flex; align-items: center; margin-top: 20px;">
<el-icon :size="24" color="#FFD700">
<WarnTriangleFilled />
<WarnTriangleFilled/>
</el-icon>
<p>重复购买风险提示</p>
</div>
<!-- 记录 + 虚线分隔 -->
<div>
<el-divider border-style="dashed" />
<el-divider border-style="dashed"/>
<p>检测到该用户近期有相似消费记录：</p>
· {{ ReadCookiesTime }} 购买 【{{ addConsume.goodsName }}】(操作人: {{ adminData.adminName }})
</div>

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

@ -718,65 +718,50 @@ onMounted(() => {
</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-text size="large" style="margin-left: 20px">客户信息</el-text>
<!-- 第一行：姓名 + 历史金币 -->
<el-row style="margin-top: 20px">
<el-col :span="9">
<el-form-item label="姓名:">
<el-form-item label="姓名">
<p>{{ user.name }}</p>
</el-form-item>
</el-col>
<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-row>
<!-- 第二行：精网号 + 当前金币（独立行） -->
<el-row style="margin-top:-23px">
<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="当前金币总数" 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-col>
</el-row>
<!-- 第三行：首次充值日期 + 充值次数 -->
<el-row style="margin-top:-23px">
<el-row >
<el-col :span="9">
<el-form-item label="首次充值日期">
<p v-if="user.firstRecharge">
@ -785,8 +770,8 @@ onMounted(() => {
</el-form-item>
</el-col>
<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-col>
</el-row>
@ -794,11 +779,6 @@ onMounted(() => {
<!-- 第四行：消费次数 + 所属门店 -->
<el-row>
<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="所属门店">
<p>{{ user.market }}</p>
</el-form-item>
@ -836,6 +816,14 @@ onMounted(() => {
</div>
</el-col>
</el-row>
<div class="field">
<div class="field-label">备注</div>
<el-input v-model="recharge.remark" disabled/>
</div>
</div>
<!-- 底部按钮（居中） -->

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

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

Write Preview
Loading…
Cancel
Save