hospital-admin/src/components/couponDetail.vue
zoujiandong 4c73a8644c 新增8
2024-07-05 08:59:06 +08:00

907 lines
28 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- Modal -->
<a-modal
v-model:visible="modalVisible"
fullscreen
:title="modalForm.coupon_id ? '编辑优惠劵' : '创建优惠劵'"
title-align="start"
:auto-label-width="true"
:footer="false"
@cancel="handleClose"
>
<div class="titlebox">
<div class="bar"></div>
<div class="name">优惠劵信息</div>
</div>
<a-form
:model="modalForm"
ref="modalFormRef"
:auto-label-width="true"
:rules="rules"
>
<a-row :gutter="24" style="margin-top: 35px">
<a-col :span="12">
<a-form-item field="coupon_name" label="优惠劵名称:">
<a-input
placeholder="请输入优惠劵名称"
v-model="modalForm.coupon_name"
></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="coupon_client" label="使用平台:">
<a-select
:disabled="modalForm.coupon_id?true:false"
placeholder="请选择使用平台"
v-model="modalForm.coupon_client"
>
<a-option :key="1" :value="1" label="小程序">小程序</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item field="application_scope" label="使用范围:">
<a-select
:disabled="modalForm.coupon_id?true:false"
@change="changeScope"
placeholder="请选择使用范围"
v-model="modalForm.application_scope"
>
<!-- 1:全场通用 2:问诊 3:按品牌适用 4:按类别适用 5:单品使用 6:全品类药品 -->
<a-option :key="1" :value="1" label="全场通用">全场通用</a-option>
<a-option :key="2" :value="2" label="问诊">问诊</a-option>
<a-option :key="3" :value="3" label="按品牌适用"
>按品牌适用</a-option
>
<a-option :key="4" :value="4" label="按类别适用"
>按类别适用</a-option
>
<a-option :key="5" :value="5" label="单品使用">单品使用</a-option>
<a-option :key="6" :value="6" label="全品类药品"
>全品类药品</a-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="coupon_type" label="发放类型:">
<a-select
:disabled="modalForm.coupon_id ? true: false"
placeholder="请选择发放类型"
v-model="modalForm.coupon_type"
@change="changeType"
>
<!-- 1 :无门槛 2:满减 3:数量 -->
<a-option :key="1" :value="1" label="无门槛">无门槛</a-option>
<a-option :key="2" :value="2" label="满减">满减</a-option>
<a-option :key="3" :value="3" label="数量">数量</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item field="distribution_object" label="发放对象:">
<a-select
placeholder="请选择发放对象"
v-model="modalForm.distribution_object"
@change="changeObject"
>
<!-- 1:全部用户 2:新注册用户 3:会员 4:近期消费 5:近期购药 6:存量用户 7:健康包服务用户 -->
<a-option :key="1" :value="1" label="全部用户">全部用户</a-option>
<a-option :key="2" :value="2" label="新注册用户"
>新注册用户</a-option
>
<a-option :key="3" :value="3" label="会员">会员</a-option>
<a-option :key="4" :value="4" label="近期消费">近期消费</a-option>
<a-option :key="5" :value="5" label="近期购药">近期购药</a-option>
<a-option :key="6" :value="6" label="存量用户">存量用户</a-option>
<a-option :key="7" :value="7" label="健康包服务用户"
>健康包服务用户</a-option
>
<a-option :key="8" :value="8" label="app用户">app用户</a-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="valid_type" label="有效类型:">
<a-select
:disabled="modalForm.coupon_id ? true: false"
placeholder="请选择有效类型"
v-model="modalForm.valid_type"
@change="changeValidType"
>
<!-- 有效类型1:绝对时效xxx-xxx时间段有效 2:相对时效 n天内有效 -->
<a-option :key="1" :value="1" label="绝对时效">绝对时效</a-option>
<a-option :key="2" :value="2" label="相对时效">相对时效</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="showConnectType">
<a-col a-col :span="24">
<a-form-item field="inquiry_type" label="问诊类型:">
<a-select
:style="{ width: '320px' }"
multiple
placeholder="请选择问诊类型"
v-model="modalForm.inquiry_type"
>
<!-- 1:'专家问诊', 2:'快速问诊', 3:'公益问诊', 4:'问诊购药',5:'糖组检测' -->
<a-option key="1" value="1" label="专家问诊">专家问诊</a-option>
<a-option key="2" value="2" label="快速问诊">快速问诊</a-option>
<a-option key="3" value="3" label="公益问诊">公益问诊</a-option>
<a-option key="4" value="4" label="问诊购药">问诊购药</a-option>
<a-option key="5" value="5" label="糖组检测">糖组检测</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col a-col :span="24">
<a-form-item field="coupon_count" label="发放数量:">
<a-input-number
v-model="modalForm.coupon_count"
:style="{ width: '320px' }"
:step="1"
:precision="0"
placeholder="请输入发放数量"
class="input-demo"
:min="1"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="modalForm.coupon_id">
<a-col a-col :span="24">
<a-form-item field="coupon_count" label="已发放数量:">
<a-input-number
disabled
v-model="modalForm.coupon_take_count"
:style="{ width: '320px' }"
:step="1"
:precision="0"
placeholder="请输入已发放数量"
class="input-demo"
:min="1"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="modalForm.coupon_id">
<a-col a-col :span="24">
<a-form-item field="coupon_count" label="已领取数量:">
<a-input-number
disabled
v-model="modalForm.coupon_used_count"
:style="{ width: '320px' }"
:step="1"
:precision="0"
placeholder="请输入已已领取数量"
class="input-demo"
:min="1"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col a-col :span="24">
<a-form-item field="coupon_price" label="优惠劵金额:">
<a-input-number
v-model="modalForm.coupon_price"
:style="{ width: '320px' }"
placeholder="请输入优惠劵金额"
class="input-demo"
:min="1"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="showTimeRange">
<a-col :span="12">
<a-form-item
field="valid_start_time"
:validate-trigger="['input']"
label="有效时间:"
:rules="[{ required: true, message: '请选择有效时间' }]"
>
<a-range-picker
v-model="rangeValue"
style="width: 360px"
show-time
:defaultValue="defaultValue"
:disabled-date="disabledDate"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
@ok="onOk"
@clear="clearDate"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="showValidDay">
<a-col a-col :span="24">
<a-form-item
:disabled="modalForm.coupon_id?true:false"
field="valid_days"
label="领取之日起有效天数:"
:validate-trigger="['blur']"
:rules="[{ required: true, message: '请输入领取之日起有效天数' }]"
>
<a-input-number
v-model="modalForm.valid_days"
:style="{ width: '320px' }"
placeholder="请输入有效天数"
:step="1"
:precision="0"
class="input-demo"
:min="1"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="showManjian">
<a-col a-col :span="24">
<a-form-item
field="with_amount"
label="满减金额(元):"
:rules="[{ required: true, message: '请输入满减金额' }]"
>
<a-input-number
v-model="modalForm.with_amount"
:style="{ width: '320px' }"
placeholder="请输入满减金额"
class="input-demo"
:min="0"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="showMinNumber">
<a-col a-col :span="24">
<a-form-item
field="min_usable_number"
label="单商品最小可使用数量:"
:rules="[{ required: true, message: '请输入单商品最小可使用数量' }]"
>
<a-input-number
v-model="modalForm.min_usable_number"
:style="{ width: '320px' }"
placeholder="请输入单商品最小可使用数量"
class="input-demo"
:min="1"
:step="1"
:precision="0"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="showDistributionDay">
<a-col a-col :span="24">
<a-form-item field="distribution_with_day" label="发放关联天数:">
<a-input-number
v-model="modalForm.distribution_with_day"
:style="{ width: '320px' }"
placeholder="请输入发放关联天数"
class="input-demo"
:step="1"
:precision="0"
:min="1"
/>
</a-form-item>
</a-col>
</a-row>
<!-- <a-row :gutter="24">
<a-col a-col :span="24">
<a-form-item field="brand_id" label="关联品牌:">
<a-input-number v-model="modalForm.brand_id" :style="{width:'320px'}" placeholder="请选择关联品牌" class="input-demo" :min="1" />
</a-form-item>
</a-col>
</a-row> -->
<a-row :gutter="24" v-if="showProduct">
<a-col a-col :span="12">
<a-form-item
field="product_id"
label="关联商品:"
:rules="[{ required: true, message: '请选择关联商品' }]"
>
<a-select
multiple
v-model="modalForm.product_id"
placeholder="请选择关联商品"
allow-search
:loading="loading"
@search="handleGetProduct"
>
<a-option
v-for="item in productList"
:key="item.product_id"
:value="item.product_id"
:label="item.product_name"
>
{{ item.product_name }}
</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col a-col :span="24">
<a-form-item field="is_display" label="是否展示:">
<a-switch
v-model="modalForm.is_display"
:checked-value="1"
:unchecked-value="0"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col a-col :span="24">
<a-form-item field="is_mutex" label="是否互斥:">
<a-switch
v-model="modalForm.is_mutex"
:checked-value="1"
:unchecked-value="0"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col a-col :span="24">
<a-form-item
field="is_reissuable_after_expire"
label="过期再次发放:"
>
<a-switch
v-model="modalForm.is_reissuable_after_expire"
:checked-value="1"
:unchecked-value="0"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="modalForm.coupon_id">
<a-col a-col :span="12">
<a-form-item
field="inquiry_type"
label="状态:"
:style="{ width: '320px' }"
>
<a-select
placeholder="请选择状态"
:disabled="modalForm.coupon_id?true:false"
v-model="modalForm.coupon_status"
>
<!-- 1:正常 2:强制失效 3:结束 4:删除-->
<a-option :key="1" :value="1" label="正常">正常</a-option>
<a-option :key="2" :value="2" label="强制失效">强制失效</a-option>
<a-option :key="3" :value="3" label="结束">结束</a-option>
<a-option :key="4" :value="4" label="删除">删除</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col a-col :span="24">
<a-form-item field="is_popup" label="是否弹窗:">
<a-switch
v-model="modalForm.is_popup"
:checked-value="1"
:unchecked-value="0"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col a-col :span="12">
<a-form-item field="coupon_desc" label="优惠劵描述:">
<a-textarea
v-model="modalForm.coupon_desc"
placeholder="请输入优惠劵描述"
allow-clear
:style="{ minHeight: '100px' }"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="record_data.length>0 && modalForm.coupon_id">
<a-col a-col :span="18">
<a-form-item field="coupon_desc" label="发放记录:">
<a-table
:columns="record_columns"
:data="record_data"
:pagination="false"
>
<template #grant_type="{ record }">
<div v-if="record.grant_type==1">具体用户 </div>
<div v-else>未拥有用户 </div>
</template>
<template #grant_result="{ record }">
<!-- 1:成功 2:发放中 3:失败 -->
<div v-if="record.grant_result==1">成功 </div>
<div v-else-if="record.grant_result==2">发放中</div>
<div v-else>失败</div>
</template>
</a-table>
</a-form-item>
</a-col>
</a-row>
</a-form>
<a-divider />
<div class="titlebox">
<div class="bar"></div>
<div class="name">操作</div>
</div>
<a-row :gutter="24" style="margin-top: 35px">
<a-col :span="24">
<a-form-item field="" label="" no-style>
<a-space style="margin-right: 8px" v-if="!modalForm.coupon_id">
<a-button
type="primary"
v-has="'admin:sysCouponList:add'"
@click="handleAddCoupon"
>添加</a-button
>
</a-space>
<a-space style="margin-right: 8px" v-else>
<a-button
type="primary"
v-has="'admin:sysCouponList:edit'"
:disabled="modalForm.coupon_status == 2"
@click="handleUpdateCoupon"
>修改</a-button
>
</a-space>
<a-space
style="margin-right: 8px"
v-if="modalForm.coupon_id && modalForm.coupon_status == 1"
>
<a-button
type="primary"
v-has="'admin:sysCouponList:force'"
status="danger"
@click="showCoupon"
>强制失效</a-button
>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-modal>
<isOkCouponModal
:isVisible="isVisible"
:api="updateCouponStatus"
:title="okTitle"
:dealType="'status'"
:id="modalForm.coupon_id"
@closeChangeOk="closeChangeOk"
></isOkCouponModal>
</template>
<script setup>
import { ref, toRefs, watch, getCurrentInstance, defineExpose } from 'vue';
import {
addCoupon,
updateCoupon,
getProduct,
updateCouponStatus,
} from '@/api/coupon/list';
import { Message } from '@arco-design/web-vue';
const { proxy } = getCurrentInstance();
import dayjs from 'dayjs';
const emits = defineEmits(['closeChange', 'changeTimeRange', 'freshDetail','changeValue']);
const props = defineProps({
// 是否显示
modalVisible: {
type: Boolean,
default: false,
},
modalForm: {
type: Object,
default: {},
},
});
const valid_start_time = ref('');
const valid_end_time = ref('');
const { modalVisible, modalForm } = toRefs(props);
const showManjian = ref(false);
const showMinNumber = ref(false);
const showConnectType = ref(false);
const showProduct = ref(false);
const showTimeRange = ref(false);
const showValidDay = ref(false);
const showDistributionDay = ref(false);
const defaultValue = ref([]);
const rangeValue = ref([]);
const productList = ref([]);
const loading = ref(false);
const okTitle = ref('');
const isVisible = ref(false);
const showCoupon = () => {
okTitle.value = '确定强制失效吗?';
isVisible.value = true;
};
const record_data = ref([]);
const record_columns = [
{
title: '用户名称',
dataIndex: 'user_name',
},
{
title: '操作人',
dataIndex: 'useradmin_user_name_name',
},
{
title: '发放类型',
dataIndex: 'grant_type',
slotName: 'grant_type',
},
{
title: '目标发放数量',
dataIndex: 'total_quantity',
},
{
title: '已发放数量',
dataIndex: 'grant_quantity',
},
{
title: '发放结果',
dataIndex: 'grant_result',
slotName: 'grant_result',
},
{
title: '操作时间',
dataIndex: 'created_at',
slotName: 'created_at',
},
];
const clearDate = () => {
valid_start_time.value = '';
valid_end_time.value = '';
emits('changeTimeRange', {
valid_start_time: '',
valid_end_time: '',
});
};
//关闭启用弹框
const closeChangeOk = () => {
isVisible.value = false;
modalVisible.value = false;
handleClose();
emits('freshDetail', {
coupon_id: modalForm.value.coupon_id,
});
};
const handleGetProduct = async (name = '', id = '') => {
loading.value = true;
const { code, data } = await getProduct({
product_name: '',
product_id: '',
limit: 100,
});
if (code == 200) {
productList.value = data;
}
loading.value = false;
};
const changeType = (val,flag=true) => {
showManjian.value = false;
showMinNumber.value = false;
if(flag){
emits('changeValue','with_amount');
emits('changeValue','min_usable_number');
}
if (val == 2) {
showManjian.value = true;
} else if (val == 3) {
showMinNumber.value = true;
}
};
const changeValidType = (val,flag=true) => {
showTimeRange.value = false;
showValidDay.value = false;
if(flag){
clearDate();
emits('changeValue','valid_days');
}
if (val == 1) {
showTimeRange.value = true;
if (modalForm.value.valid_start_time) {
rangeValue.value = [
modalForm.value.valid_start_time,
modalForm.value.valid_end_time,
];
}
} else {
showValidDay.value = true;
}
};
const changeScope = (val,flag=true) => {
showConnectType.value = false;
showProduct.value = false;
showManjian.value = false;
showMinNumber.value = false;
if(flag){
emits('changeValue','inquiry_type');
emits('changeValue','product_id');
emits('changeValue','with_amount');
emits('changeValue','min_usable_number');
}
if (val == 1) {
modalForm.coupon_type == 2 && (showManjian.value = true);
modalForm.coupon_type == 3 && (showMinNumber.value = true);
} else if (val == 2) {
showConnectType.value = true;
} else if (val == 5) {
showProduct.value = true;
handleGetProduct('', modalForm.value.product_id);
}
};
const changeObject = (val,flag=true) => {
showDistributionDay.value = false;
if(flag){
emits('changeValue','distribution_with_day');
}
if (val == 4) {
showDistributionDay.value = true;
}
};
watch(
() => props.modalForm,
() => {
//console.log(props.modalForm);
if (props.modalForm.coupon_id) {
changeType(props.modalForm.coupon_type,false);
changeScope(props.modalForm.application_scope,false);
changeObject(props.modalForm.distribution_object,false);
changeValidType(props.modalForm.valid_type,false);
if (props.modalForm.valid_start_time && props.modalForm.valid_end_time) {
defaultValue.value = [
props.modalForm.valid_start_time,
props.modalForm.valid_end_time,
];
}
if (
props.modalForm.coupon_grant &&
props.modalForm.coupon_grant.length > 0
) {
record_data.value = props.modalForm.coupon_grant;
}
}
},
{ immediate: true, deep: true }
);
const onOk = (dateString, date) => {
[valid_start_time.value, valid_end_time.value] = dateString;
rangeValue.value = [valid_start_time.value, valid_end_time.value];
emits('changeTimeRange', {
valid_start_time: valid_start_time.value,
valid_end_time: valid_end_time.value,
});
proxy.$refs.modalFormRef.validateField('valid_start_time', (valid) => {
if (!valid) {
}
});
};
const changeStatus = () => {
showConnectType.value = false;
//emits('changeValue','inquiry_type');
showProduct.value = false;
//emits('changeValue','product_id');
showManjian.value = false;
//emits('changeValue','with_amount');
showMinNumber.value = false;
//emits('changeValue','min_usable_number');
showDistributionDay.value = false;
//emits('changeValue','distribution_with_day');
showTimeRange.value = false;
//clearDate();
showValidDay.value = false;
//emits('changeValue','valid_days');
};
const handleClose = () => {
emits('closeChange', (modalVisible.value = false));
proxy.$refs.modalFormRef.resetFields();
};
const disabledDate = (time) => {
return time.getTime() < Date.now() - 8.64e7;
};
const handleAddCoupon = () => {
proxy.$refs.modalFormRef.validate(async (valid) => {
if (!valid) {
let {
coupon_name,
coupon_client,
coupon_type,
distribution_object,
application_scope,
inquiry_type,
is_mutex,
is_display,
distribution_with_day,
min_usable_number,
coupon_count,
coupon_price,
with_amount,
valid_type,
valid_days,
valid_start_time,
valid_end_time,
product_id,
reissue_interval_days,
is_reissuable_after_expire,
is_popup,
coupon_desc,
} = props.modalForm;
let product_id_arr = [];
if (product_id && typeof product_id === 'string') {
product_id_arr = product_id.split(',');
} else if (product_id && product_id instanceof Array) {
product_id_arr = product_id;
}
let basicObj = {
coupon_name,
coupon_client,
coupon_type,
distribution_object,
application_scope,
coupon_count,
coupon_price,
reissue_interval_days,
is_reissuable_after_expire,
is_popup,
coupon_desc,
valid_type,
is_mutex,
is_display,
};
if (showManjian.value) {
basicObj.with_amount = with_amount;
}
if (showMinNumber.value) {
basicObj.min_usable_number = min_usable_number;
}
if (showDistributionDay.value) {
basicObj.distribution_with_day = distribution_with_day;
}
if (showConnectType.value) {
basicObj.inquiry_type = inquiry_type;
}
if (showProduct.value) {
basicObj.product_id = product_id_arr;
}
if (showValidDay.value) {
basicObj.valid_days = valid_days;
}
if (showTimeRange.value) {
basicObj.valid_start_time = dayjs(valid_start_time).format(
'YYYY-MM-DD HH:mm:ss'
);
basicObj.valid_end_time = dayjs(valid_end_time).format(
'YYYY-MM-DD HH:mm:ss'
);
}
const { code } = await addCoupon(basicObj);
if (code == 200) {
Message.success('添加成功');
handleClose();
} else {
proxy.$notification.error(response.message);
}
}
});
};
const handleUpdateCoupon = async () => {
proxy.$refs.modalFormRef.validate(async (valid) => {
if (!valid) {
let {
coupon_id,
coupon_name,
coupon_client,
coupon_type,
distribution_object,
application_scope,
inquiry_type,
is_mutex,
is_display,
distribution_with_day,
min_usable_number,
coupon_count,
coupon_price,
with_amount,
valid_type,
valid_days,
valid_start_time,
valid_end_time,
product_id,
reissue_interval_days,
is_reissuable_after_expire,
is_popup,
coupon_desc,
} = props.modalForm;
let product_id_arr = [];
console.log(product_id);
if (product_id && typeof product_id === 'string') {
product_id_arr = product_id.split(',');
} else if (product_id && product_id instanceof Array) {
product_id_arr = product_id;
}
let basicObj = {
coupon_name,
coupon_client,
coupon_type,
distribution_object,
application_scope,
coupon_count,
coupon_price,
reissue_interval_days,
is_reissuable_after_expire,
is_popup,
coupon_desc,
valid_type,
is_mutex,
is_display,
};
if (showManjian.value) {
basicObj.with_amount = with_amount;
}
if (showMinNumber.value) {
basicObj.min_usable_number = min_usable_number;
}
if (showDistributionDay.value) {
basicObj.distribution_with_day = distribution_with_day;
}
if (showConnectType.value) {
basicObj.inquiry_type = inquiry_type;
}
if (showProduct.value) {
basicObj.product_id = product_id_arr;
}
if (showValidDay.value) {
basicObj.valid_days = valid_days;
}
if (showTimeRange.value) {
basicObj.valid_start_time = valid_start_time;
basicObj.valid_end_time = valid_end_time;
}
const { code } = await updateCoupon(coupon_id, basicObj);
if (code == 200) {
Message.success('修改成功');
handleClose();
} else {
proxy.$notification.error(response.message);
}
}
});
};
const rules = {
coupon_name: [{ required: true, message: '请输入优惠劵名称' }],
coupon_client: [{ required: true, message: '请选择使用平台' }],
application_scope: [{ required: true, message: '请选择使用范围' }],
coupon_type: [{ required: true, message: '请选择发放类型' }],
distribution_object: [{ required: true, message: '请选择发放对象' }],
valid_type: [{ required: true, message: '请选择有效类型' }],
coupon_count:[{ required: true, message: '请输入发放数量' }],
coupon_price:[{ required: true, message: '请输入优惠劵金额' }]
};
defineExpose({
changeStatus,
});
</script>
<style scoped>
</style>