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

金豆用户卡片样式

zhangyong/feature-20250815160302-金币优化
ZhangYong 2 months ago
parent
56c0cba5ef
commit
7c84820aa5
4 changed files with 383 additions and 300 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. 43
      src/views/consume/bean/addBeanConsume.vue
  2. 8
      src/views/consume/bean/beanConsume.vue
  3. 59
      src/views/recharge/bean/addBeanRecharge.vue
  4. 51
      src/views/recharge/gold/addCoinRecharge.vue

43
src/views/consume/bean/addBeanConsume.vue
View File

@ -206,8 +206,10 @@ const throttledHandleConsumeFormt = _.throttle(handleConsumeForm, 5000, {
</script>
<template>
<div>
<div class="userAndform">
<div class="left">
<el-form :model="consumeForm" :rules="rules" ref="formRef" label-width="auto" style="max-width: 600px"
class="consume-form">
class="add-form">
<el-form-item prop="jwcode" label="精网号" label-position="left">
<el-input v-model="consumeForm.jwcode" style="width: 220px" />
<el-button type="primary" @click="getUser(consumeForm.jwcode)" style="margin-left: 20px">查询</el-button>
@ -228,11 +230,12 @@ const throttledHandleConsumeFormt = _.throttle(handleConsumeForm, 5000, {
<el-button @click="deleteConsumeForm" style="margin-left: 280px" type="success">重置</el-button>
<el-button type="primary" :disabled="addDisabled" @click="handleConsumeForm"> 提交 </el-button>
</el-form>
</div>
<div class="right">
<!-- 客户信息栏 -->
<el-card v-if="user.jwcode" class="customer-info">
<el-form :model="user" label-width="auto" label-position="left">
<el-text size="large" style="margin-left: 20px">客户信息</el-text>
<el-text size="large" style="min-width: 600px;">客户信息</el-text>
<!-- 第一行：姓名 + 当前付费金豆 -->
<el-row style="margin-top: 20px">
@ -283,12 +286,40 @@ const throttledHandleConsumeFormt = _.throttle(handleConsumeForm, 5000, {
</el-form>
</el-card>
</div>
</div>
</div>
</template>
<style scoped>
.consume-form {
.userAndform {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.left {
width: 35%;
display: flex;
.add-form {
width: 100%;
margin-top: 50px;
max-width: 50%;
float: left;
}
}
.right {
flex: 1;
margin-left: 50px;
display: flex;
.beautiful {
width: 90%;
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
}
}
}
.customer-info {

8
src/views/consume/bean/beanConsume.vue
View File

@ -34,6 +34,8 @@
文章/视频
</el-button>
</el-button-group>
</div>
<div class="content">
<router-view></router-view>
</div>
</template>
@ -108,3 +110,9 @@ onMounted(() => {
}
});
</script>
<style scoped>
.content{
width: 90%;
height: 90%;
}
</style>

59
src/views/recharge/bean/addBeanRecharge.vue
View File

@ -76,7 +76,7 @@ const rules = reactive({
{ required: true, message: '请输入付费金豆数', trigger: 'change' },
{
validator: (rule, value, callback) => {
if(!value){
if (!value) {
value = 0
}
// 检查是否为非负整数
@ -100,7 +100,7 @@ const rules = reactive({
{ required: true, message: '请输入免费金豆数', trigger: 'change' },
{
validator: (rule, value, callback) => {
if(!value){
if (!value) {
value = 0
}
// 检查是否为非负整数
@ -131,10 +131,10 @@ const deleteAddForm = function () {
const handleAddForm = async () => {
try {
if(!addForm.value.permanentBean ){
if (!addForm.value.permanentBean) {
addForm.value.permanentBean = 0
}
if(!addForm.value.freeBean ){
if (!addForm.value.freeBean) {
addForm.value.freeBean = 0
}
await new Promise((resolve, reject) => {
@ -177,7 +177,7 @@ const handleAddForm = async () => {
ElMessage.success('新增成功')
deleteAddForm()
user.value = {}
}else{
} else {
ElMessage.error(result.msg)
}
} catch (error) {
@ -188,7 +188,10 @@ const handleAddForm = async () => {
</script>
<template>
<div>
<el-form :model="addForm" :rules="rules" ref="formRef" label-width="auto" style="max-width: 600px" class="add-form">
<div class="userAndform">
<div class="left">
<el-form :model="addForm" :rules="rules" ref="formRef" label-width="auto" style="max-width: 600px"
class="add-form">
<el-form-item prop="jwcode" label="精网号" label-position="left">
<el-input v-model="addForm.jwcode" style="width: 220px" />
<el-button type="primary" @click="getUser(addForm.jwcode)" style="margin-left: 20px">查询</el-button>
@ -209,10 +212,11 @@ const handleAddForm = async () => {
<el-button @click="deleteAddForm" style="margin-left: 280px" type="success">重置</el-button>
<el-button type="primary" :disabled="addDisabled" @click="handleAddForm"> 提交 </el-button>
</el-form>
</div>
<div class="right">
<!-- 客户信息栏 -->
<el-card v-if="user.jwcode" class="customer-info">
<el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left">
<el-form :model="user" label-width="auto" style="min-width: 600px" label-position="left">
<el-text size="large" style="margin-left: 20px">客户信息</el-text>
<!-- 第一行：姓名 + 当前付费金豆 -->
@ -263,17 +267,45 @@ const handleAddForm = async () => {
</el-row>
</el-form>
</el-card>
</div>
</div>
</div>
</template>
<style scoped>
.add-form {
.userAndform {
width: 100%;
height: 100%;
display: flex;
align-items: center;
.left {
width: 35%;
display: flex;
align-items: center;
.add-form {
width: 100%;
margin-top: 50px;
max-width: 50%;
float: left;
}
}
}
.right {
flex: 1;
margin-left: 50px;
display: flex;
.beautiful {
width: 90%;
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
}
}
}
.customer-info {
width: 700px;
float: right;
@ -285,7 +317,4 @@ p {
margin: 0px;
}
.el-form-item {
margin-left: 50px;
}
</style>

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

@ -660,6 +660,7 @@ onMounted(() => {
<template>
<div>
<div class="userAndForm">
<div class="left">
<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="精网号">
@ -717,10 +718,12 @@ onMounted(() => {
<el-button @click="deleteRecharge" style="margin-left: 220px;margin-top:20px" type="success">重置</el-button>
<el-button type="primary" style="margin-top:20px" :disabled="addDisabled" @click="addBefore"> 提交</el-button>
</el-form>
</div>
<div class="right">
<!-- 客户信息栏 -->
<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-form :model="user" label-width="auto" style="min-width: 650px" label-position="left">
<el-text size="large" style="margin-left: 20px">客户信息</el-text>
<!-- 第一行：姓名 + 历史金币 -->
@ -764,7 +767,7 @@ onMounted(() => {
<!-- 第三行：首次充值日期 + 充值次数 -->
<el-row>
<el-col :span="9">
<el-form-item label="首次充值日期" >
<el-form-item label="首次充值日期">
<p v-if="user.firstRecharge">
{{ moment(user.firstRecharge).format('YYYY-MM-DD HH:mm:ss') }}
</p>
@ -789,6 +792,8 @@ onMounted(() => {
</el-card>
</div>
</div>
<el-dialog v-model="FirstRechargeDialogVisible" title="操作确认" :before-close="FirstRechargeDialogVisiblehandleClose"
:close-on-click-modal="false" width="400px">
@ -904,8 +909,33 @@ onMounted(() => {
<style scoped>
.userAndForm {
width: 100%;
height: 100%;
display: flex;
align-items: center;
.left {
width: 35%;
display: flex;
.add-form {
width: 100%;
margin-top: 50px;
}
}
.right {
flex: 1;
margin-left: 20px;
display: flex;
.beautiful {
width: 90%;
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
}
}
}
p {
@ -917,22 +947,6 @@ p {
margin-left: auto;
}
.el-form-item {
margin-left: 50px;
}
.add-form {
margin-top: 50px;
max-width: 50%;
float: left;
}
.beautiful {
flex: 1;
float: right;
margin-left: 150px;
}
.field-label {
font-size: 14px;
color: #606266;
@ -950,6 +964,7 @@ p {
justify-content: center;
gap: 12px;
}
/* 上传图片的格式 */
.avatar-uploader .avatar {
width: 50px;

Write Preview
Loading…
Cancel
Save