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

fix:上传图片样式

zhangyong/feature-20250815160302-金币优化
lihui 2 months ago
parent
b26dba446a
commit
0e5d24326f
2 changed files with 60 additions and 83 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. 85
      src/views/recharge/gold/addCoinRecharge.vue
  2. 38
      src/views/refund/gold/addCoinRefund.vue

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

@ -1,7 +1,7 @@
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElIcon, ElMessage, ElMessageBox } from 'element-plus'
import { Plus, WarnTriangleFilled } from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from 'vue'
import {ElIcon, ElMessage, ElMessageBox} from 'element-plus'
import {Plus, WarnTriangleFilled} from '@element-plus/icons-vue'
import axios from 'axios'
import API from '@/util/http.js'
import moment from 'moment'
@ -82,7 +82,7 @@ const ReadCookiesTime = ref(null)
const add = async function () {
try {
const formattedRecharge = { ...recharge.value }
const formattedRecharge = {...recharge.value}
// 将永久金币数、免费金币数和充值金额数乘以 100
if (formattedRecharge.permanentGold) {
@ -108,7 +108,7 @@ const add = async function () {
//value 为充值时间
WriteCookiesTime.value = recharge.value.payTime
// 设置cookies,用户jwcode为key，value也是jwcode，过期时间为1天
Cookies.set(WriteCookies.value, WriteCookiesTime.value, { expires: 1, path: '/' });
Cookies.set(WriteCookies.value, WriteCookiesTime.value, {expires: 1, path: '/'});
// 发送POST请求
addDisabled.value = true
const result = await API({
@ -278,9 +278,9 @@ const rules = reactive({
callback();
}, trigger: 'blur'
}],
activity: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
activity: [{required: true, message: '请输入活动名称', trigger: 'blur'}],
permanentGold: [
{ required: true, message: '请输入永久金币数', trigger: 'change' },
{required: true, message: '请输入永久金币数', trigger: 'change'},
{
validator: (rule, value, callback) => {
if (!value) {
@ -321,7 +321,7 @@ const rules = reactive({
}
],
freeGold: [
{ required: true, message: '请输入免费金币数', trigger: 'change' },
{required: true, message: '请输入免费金币数', trigger: 'change'},
{
validator: (rule, value, callback) => {
if (!value) {
@ -368,7 +368,7 @@ const rules = reactive({
}],
money: [
{ required: true, message: '请输入充值金额', trigger: 'blur' },
{required: true, message: '请输入充值金额', trigger: 'blur'},
{
validator: (rule, value, callback) => {
// 检查是否包含特殊符号
@ -405,8 +405,8 @@ const rules = reactive({
trigger: 'blur'
}
],
payModel: [{ required: true, message: '请选择付款方式', trigger: 'blur' }],
payTime: [{ required: true, message: '请选择交款时间', trigger: 'blur' }]
payModel: [{required: true, message: '请选择付款方式', trigger: 'blur'}],
payTime: [{required: true, message: '请选择交款时间', trigger: 'blur'}]
});
// 查找客户信息的方法
@ -664,46 +664,46 @@ onMounted(() => {
<el-form :model="recharge" ref="Ref" :rules="rules" label-width="auto" label-position="right"
style="max-width: 600px" class="add-form">
<el-form-item prop="jwcode" label="精网号">
<el-input v-model="recharge.jwcode" style="width: 220px" />
<el-input v-model="recharge.jwcode" style="width: 220px"/>
<el-button type="primary" @click="getUser(recharge.jwcode)" style="margin-left: 20px">查询</el-button>
</el-form-item>
<el-form-item prop="activity" label="活动名称">
<el-input v-model="recharge.activity" placeholder="请输入活动名称" style="width: 300px" />
<el-input v-model="recharge.activity" placeholder="请输入活动名称" style="width: 300px"/>
</el-form-item>
<el-form-item prop="permanentGold" label="永久金币">
<el-input v-model="recharge.permanentGold" placeholder="0" style="width: 100px" />
<el-input v-model="recharge.permanentGold" placeholder="0" style="width: 100px"/>
<p>&nbsp;个</p>
</el-form-item>
<el-form-item prop="freeGold" label="免费金币">
<el-input v-model="recharge.freeGold" placeholder="0" style="width: 100px" />
<el-input v-model="recharge.freeGold" placeholder="0" style="width: 100px"/>
<p>&nbsp;个</p>
</el-form-item>
<el-form-item label="充值金额" required>
<el-form-item prop="rateName" style="display: inline-block; margin-left:0;">
<el-select v-model="recharge.rateName" placeholder="货币名称" style="width: 100px">
<el-option v-for="item in rateName" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in rateName" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item prop="money" style="display: inline-block; margin-left:10px;">
<el-input v-model="recharge.money" style="width: 190px" />
<el-input v-model="recharge.money" style="width: 190px"/>
</el-form-item>
</el-form-item>
<el-form-item prop="payModel" label="收款方式">
<el-select v-model="recharge.payModel" placeholder="请选择" style="width: 300px">
<el-option v-for="item in payModel" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in payModel" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item prop="payTime" label="交款时间">
<!-- 修改 type 属性为 datetime 以支持时分秒选择 -->
<el-date-picker v-model="recharge.payTime" type="datetime" style="width: 300px" />
<el-date-picker v-model="recharge.payTime" type="datetime" style="width: 300px"/>
</el-form-item>
<el-form-item prop="voucher" label="交款凭证" style="margin-bottom: 5px">
<el-upload :http-request="customUpload" class="avatar-uploader" :show-file-list="false"
:before-upload="beforeAvatarUpload" style="width: 100px; height: 115px">
<img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 100px; height: 115px" />
<img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 100px; height: 115px"/>
<el-icon v-else class="avatar-uploader-icon" style="width: 100px; height: 100px">
<Plus />
<Plus/>
</el-icon>
</el-upload>
<p style="margin-left: 10px; color: rgb(177, 176, 176)">
@ -712,7 +712,7 @@ onMounted(() => {
</el-form-item>
<el-form-item prop="remark" label="备注">
<el-input v-model="recharge.remark" style="width: 300px" :rows="4" maxlength="100" show-word-limit
type="textarea" />
type="textarea"/>
</el-form-item>
<el-button @click="deleteRecharge" style="margin-left: 220px;margin-top:20px" type="success">重置</el-button>
@ -795,43 +795,43 @@ onMounted(() => {
</div>
<el-dialog v-model="FirstRechargeDialogVisible" title="操作确认" :before-close="FirstRechargeDialogVisiblehandleClose"
<el-dialog v-model="FirstRechargeDialogVisible" title="操作确认"
:before-close="FirstRechargeDialogVisiblehandleClose"
:close-on-click-modal="false" width="400px">
<!-- 内容整体居中且收窄 -->
<div class="confirm-body">
<!-- 用户信息 -->
<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="recharge.activity" disabled />
<el-input v-model="recharge.activity" disabled/>
</div>
<!-- 金币信息（同一行左右排列） -->
<el-row :gutter="20" class="coins-row">
<el-col :span="12">
<div class="field">
<div class="field-label">永久金币</div>
<el-input v-model="recharge.permanentGold" disabled />
<el-input v-model="recharge.permanentGold" disabled/>
</div>
</el-col>
<el-col :span="12">
<div class="field">
<div class="field-label">免费金币</div>
<el-input v-model="recharge.freeGold" disabled />
<el-input v-model="recharge.freeGold" disabled/>
</div>
</el-col>
</el-row>
<div class="field">
<div class="field-label">备注</div>
<el-input v-model="recharge.remark" disabled />
<el-input v-model="recharge.remark" disabled/>
</div>
</div>
<!-- 底部按钮（居中） -->
@ -851,38 +851,38 @@ onMounted(() => {
<!-- 用户信息 -->
<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="recharge.activity" disabled />
<el-input v-model="recharge.activity" disabled/>
</div>
<!-- 金币信息（同一行左右排列） -->
<el-row :gutter="20" class="coins-row">
<el-col :span="12">
<div class="field">
<div class="field-label">永久金币</div>
<el-input v-model="recharge.permanentGold" disabled />
<el-input v-model="recharge.permanentGold" disabled/>
</div>
</el-col>
<el-col :span="12">
<div class="field">
<div class="field-label">免费金币</div>
<el-input v-model="recharge.freeGold" disabled />
<el-input v-model="recharge.freeGold" disabled/>
</div>
</el-col>
</el-row>
<!-- 风险提示 -->
<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 }} 充值永久金币: {{ recharge.permanentGold }}
免费金币: {{ recharge.freeGold }}(操作人：{{ adminData.adminName }})
@ -966,6 +966,20 @@ p {
gap: 12px;
}
:deep(.avatar-uploader .el-upload:hover) {
border-color: var(--el-color-primary);
}
:deep(.el-icon.avatar-uploader-icon) {
font-size: 28px;
color: #8c939d;
width: 50px;
height: 50px;
text-align: center;
}
</style>
<style>
/* 上传图片的格式 */
.avatar-uploader .avatar {
width: 50px;
@ -994,3 +1008,4 @@ p {
text-align: center;
}
</style>

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

@ -667,41 +667,3 @@ p {
}
</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>
Write Preview
Loading…
Cancel
Save