Browse Source

fix:退款样式

zhangyong/feature-20250815160302-金币优化
lihui 2 months ago
parent
commit
650fb2260c
  1. 319
      src/views/refund/gold/addCoinRefund.vue

319
src/views/refund/gold/addCoinRefund.vue

@ -1,10 +1,10 @@
<script setup>
import { onMounted, reactive } from 'vue'
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import {onMounted, reactive} from 'vue'
import {ref, computed, watch} from 'vue'
import {ElMessage} from 'element-plus'
import {Plus} from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessageBox } from 'element-plus'
import {ElMessageBox} from 'element-plus'
import API from '@/util/http.js'
import moment from 'moment'
// import _ from 'lodash'
@ -18,7 +18,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)
@ -121,13 +121,13 @@ const addBefore = () => {
// }
ElMessageBox.confirm('确认退款?')
.then(() => {
add()
console.log('退款成功')
})
.catch(() => {
console.log('取消退款')
})
.then(() => {
add()
console.log('退款成功')
})
.catch(() => {
console.log('取消退款')
})
} else {
//
ElMessage({
@ -155,16 +155,16 @@ const validateJwCode = (rule, value, callback) => {
callback();
};
const rules = reactive({
jwcode: [{ required: true, validator: validateJwCode, trigger: 'blur' }],
refundType: [{ required: true, message: '请选择退款类型', trigger: 'blur' }],
goodsName: [{ required: true, message: '请选择退款商品', trigger: 'blur' }],
taskGold: [{ required: true, message: '请输入任务金币', trigger: 'blur' }],
freeGold: [{ required: true, message: '请输入免费金币', trigger: 'blur' }],
jwcode: [{required: true, validator: validateJwCode, trigger: 'blur'}],
refundType: [{required: true, message: '请选择退款类型', trigger: 'blur'}],
goodsName: [{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) {
@ -251,7 +251,7 @@ const getUser = async function (jwcode) {
// 退退
const refundType = ref([{ value: '商品退款', label: '商品退款' }]);
const refundType = ref([{value: '商品退款', label: '商品退款'}]);
// 退
// const getRefundTypes = async function () {
@ -442,153 +442,165 @@ onMounted(async function () {
<template>
<div>
<div class="userAndForm">
<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="goodsName" label="商品名">
<el-select v-model="addRefund.goodsName" placeholder="请选择" style="width: 220px"
@change="handleSelectionChange">
<el-option v-for="item in goodsName" :key="item.key" :label="item.label" :value="item"/>
</el-select>
</el-form-item>
<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="goodsName" label="商品名">
<el-select v-model="addRefund.goodsName" placeholder="请选择" style="width: 220px" @change="handleSelectionChange">
<el-option v-for="item in goodsName" :key="item.key" :label="item.label" :value="item" />
</el-select>
</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="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">
: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;
: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" />
<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>
<!-- 客户信息栏 -->
<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="姓名">
<p>{{ user.name }}</p>
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="当前金币总数" style="width: 500px">
</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>
<!-- 客户信息栏 -->
<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
}};
</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>
</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>
p {
margin: 0px;
}
.el-form-item {
margin-left: 50px;
}
</style>
.userAndForm {
width: 90%;
display: flex;
align-items: center;
<style>
}
.beautiful {
flex: 1;
float: right;
margin-left: 150px;
}
.form-style {
margin-top: 50px;
@ -596,30 +608,20 @@ p {
float: left;
}
.form-style2 {
max-width: 60%;
}
p {
font-size: 13px;
transform: scale(1);
}
.beautiful {
width: 700px;
float: right;
margin-right: 300px;
margin-top: 150px;
.el-form-item {
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;
@ -640,4 +642,13 @@ p {
height: 50px;
text-align: center;
}
.form-style2 {
max-width: 60%;
}
</style>
Loading…
Cancel
Save