161 lines
4.1 KiB
Vue
161 lines
4.1 KiB
Vue
<template>
|
||
<Mask :width="540" :height="363" :is-show="isGrant" @close="isGrant=false" :title="'发放积分'" :show-footer="true">
|
||
<template #default>
|
||
<div class="content_grant">
|
||
<div class="head">
|
||
<img style="width: 60px;height: 60px"
|
||
:src="'/static/images/member/' + (props.info.sex === 1 ? 'man' : 'women') + '.png'"
|
||
alt="">
|
||
<div class="right">
|
||
<div class="name">
|
||
{{ props.info.name }}
|
||
</div>
|
||
<div class="text">
|
||
<div class="phone">
|
||
{{ props.info.phone }}
|
||
</div>
|
||
<div class="grant-name">
|
||
积分：
|
||
<img style="width: 16px;height: 16px" src="/static/images/member/1.png" alt="">
|
||
<span class="num">{{ props.info.integralBalance }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%">
|
||
<el-form
|
||
label-position="top" :rules="rules" ref="ruleFormRef" :model="data"
|
||
>
|
||
<el-row :gutter="24">
|
||
<el-col :span="12">
|
||
<el-form-item label="发放积分" prop="integral">
|
||
<el-input v-model="data.integral" placeholder="请输入发放积分"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="发放备注" prop="remark">
|
||
<el-input v-model="data.remark" placeholder="请输入发放备注"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template #footer>
|
||
<div class="footer">
|
||
<div class="small-btn" @click="close">取消</div>
|
||
<div class="small-btn" @click="grant()">发放</div>
|
||
</div>
|
||
</template>
|
||
</Mask>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import {ref, defineEmits, defineProps, onMounted} from 'vue'
|
||
import {post} from "@/utils/request.ts";
|
||
import {ElFormItem, ElMessage} from "element-plus";
|
||
import Mask from "@/components/common/Mask.vue";
|
||
import {API} from "@/assets/config/API.ts";
|
||
|
||
const isGrant = defineModel()
|
||
const emit = defineEmits(['close'])
|
||
const props = defineProps({
|
||
info: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
})
|
||
|
||
const rules = {
|
||
integral: [
|
||
{required: true, message: '请输入兑换积分', trigger: 'blur'},
|
||
{min: 0, message: '积分不能小于0', trigger: 'blur'}
|
||
],
|
||
remark: [
|
||
{required: true, message: '请输入兑换备注', trigger: 'blur'},
|
||
]
|
||
}
|
||
const close = () => {
|
||
data.value = {}
|
||
emit('close')
|
||
}
|
||
const data = ref<any>({})
|
||
const ruleFormRef = ref()
|
||
const grant = async () => {
|
||
ruleFormRef.value?.validate((valid: any) => {
|
||
if (!valid) return
|
||
data.value.vipId = props.info.id
|
||
post(API.Patient.Integral.Add, data.value).then((res: any) => {
|
||
ElMessage.success('已发放')
|
||
close()
|
||
})
|
||
})
|
||
|
||
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.content_grant {
|
||
height: 100%;
|
||
padding: 24px;
|
||
|
||
.head {
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
|
||
.right {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
margin-left: 16px;
|
||
.name {
|
||
font-weight: bold;
|
||
font-size: 24px;
|
||
color: #333333;
|
||
line-height: 33px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.text {
|
||
margin-top: 4px;
|
||
display: flex;
|
||
|
||
.phone {
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.grant-name {
|
||
display: flex;
|
||
|
||
.num {
|
||
font-weight: bold;
|
||
font-size: 24px;
|
||
color: #4D6DE4;
|
||
font-style: normal;
|
||
line-height: 16px;
|
||
margin-left: 6px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
padding: 24px;
|
||
}
|
||
</style> |