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. 76
      src/views/consume/gold/addCoinConsume.vue
  2. 70
      src/views/recharge/gold/addCoinRecharge.vue
  3. 45
      src/views/refund/gold/addCoinRefund.vue

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

@ -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) {
@ -204,6 +204,7 @@ function calculateCoins(sumGold) {
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
@ -311,6 +312,7 @@ function resetForm() {
nowSumGold: null nowSumGold: null
} }
} }
// 充值对话框显示状态 // 充值对话框显示状态
const ConsumeDialogVisible = ref(false); const ConsumeDialogVisible = ref(false);
@ -524,21 +526,21 @@ 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-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-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()"
<el-input v-model="addConsume.sumGold" style="width: 10vw;" @input="validateInput()"
@change="calculateCoins(addConsume.sumGold)"/> @change="calculateCoins(addConsume.sumGold)"/>
</el-form-item> </el-form-item>
@ -546,24 +548,24 @@ onMounted(async function () {
<!-- 三类金币自动计算（禁用状态，不可编辑） --> <!-- 三类金币自动计算（禁用状态，不可编辑） -->
<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"
<el-input v-model="addConsume.remark" style="width: 13.5vw;" :rows="4" maxlength="100"
show-word-limit type="textarea"/> show-word-limit type="textarea"/>
</el-form-item> </el-form-item>
@ -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>
<!-- 底部按钮（居中） --> <!-- 底部按钮（居中） -->

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

@ -718,70 +718,39 @@ 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-col>
</el-row>
<!-- 第二行：精网号 + 当前金币（独立行） -->
<el-row style="margin-top:-23px">
<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"> <el-form-item label="当前金币总数" style="width: 500px">
<span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{ <span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{
user.nowSumGold user.nowSumGold
/ 100
}}</span> }}</span>
</el-form-item> </el-form-item>
<!-- 金币详情独立显示 --> <!-- 金币详情独立显示 -->
<el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 --> <el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
<span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{ <span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{
user.nowPermanentGold / 100
user.nowPermanentGold
}}; }};
免费金币:{{ user.nowFreeGold / 100 }};
任务金币:{{ user.nowTaskGold / 100 }})</span>
免费金币:{{ user.nowFreeGold }};
任务金币:{{ user.nowTaskGold }})</span>
</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="首次充值日期">
<p v-if="user.firstRecharge">
{{ moment(user.firstRecharge).format('YYYY-MM-DD HH:mm:ss') }}
</p>
<el-form-item label="精网号">
<p>{{ user.jwcode }}</p>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
@ -791,13 +760,24 @@ onMounted(() => {
</el-col> </el-col>
</el-row> </el-row>
<!-- 第四行：消费次数 + 所属门店 -->
<!-- 第三行：首次充值日期 + 充值次数 -->
<el-row > <el-row >
<el-col :span="9"> <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="消费次数"> <el-form-item label="消费次数">
<p style="color: #2fa1ff">{{ user.consumeNum }}</p> <p style="color: #2fa1ff">{{ user.consumeNum }}</p>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<!-- 第四行：消费次数 + 所属门店 -->
<el-row>
<el-col :span="9"> <el-col :span="9">
<el-form-item label="所属门店"> <el-form-item label="所属门店">
<p>{{ user.market }}</p> <p>{{ user.market }}</p>
@ -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