You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
12 KiB
210 lines
12 KiB
{include file="/shopro/common/script" /}
|
|
|
|
<style>
|
|
.coupon-form .w-120 {
|
|
width: 120px;
|
|
}
|
|
|
|
.coupon-form .el-form-item-inner {
|
|
--el-form-label-font-size: 12px;
|
|
}
|
|
|
|
.coupon-form .el-form-item-inner .el-form-item__label {
|
|
width: fit-content !important;
|
|
}
|
|
|
|
.coupon-form .key .el-form-item__content {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.coupon-form .el-date-editor {
|
|
flex: none;
|
|
}
|
|
</style>
|
|
|
|
<div id="addEdit" class="coupon-form" v-cloak>
|
|
<el-container class="panel-block">
|
|
<el-main>
|
|
<el-scrollbar height="100%">
|
|
<el-form :model="form.model" :rules="form.rules" ref="formRef" label-width="110px">
|
|
<el-form-item label="券名称" prop="name">
|
|
<el-input class="sa-w-360" v-model="form.model.name" placeholder="例如：国庆优惠券"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="名称备注" prop="description">
|
|
<el-input class="sa-w-360" v-model="form.model.description" placeholder="请输入名称备注"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="券类型" prop="type">
|
|
<el-radio-group v-model="form.model.type" :disabled="state.type == 'edit'">
|
|
<el-radio label="reduce">满减券</el-radio>
|
|
<!-- <el-radio label="discount">折扣券</el-radio> -->
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<div class="el-form-item-inner">
|
|
<el-form-item>
|
|
<el-form-item label="消费满" prop="enough">
|
|
<el-input class="w-120" type="number" v-model="form.model.enough" :min="0"
|
|
:disabled="state.type == 'edit'">
|
|
<template #append>元</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item v-if="form.model.type == 'reduce'" class="is-no-asterisk ml-2" label="立减"
|
|
prop="amount">
|
|
<el-input class="w-120" type="number" v-model="form.model.amount" :min="0"
|
|
:disabled="state.type == 'edit'">
|
|
<template #append>元</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item v-if="form.model.type == 'discount'" class="is-no-asterisk ml-2" label="打"
|
|
prop="amount">
|
|
<el-input class="w-120" type="number" v-model="form.model.amount" :min="0" :max="10"
|
|
:disabled="state.type == 'edit'">
|
|
<template #append>折</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item v-if="form.model.type == 'discount'">
|
|
<el-form-item label="最多优惠" prop="max_amount">
|
|
<el-input class="w-120" type="number" v-model="form.model.max_amount" :min="0"
|
|
:disabled="state.type == 'edit'">
|
|
<template #append>元</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item label="发券总量" prop="stock">
|
|
<el-input class="w-120" type="number" v-model="form.model.stock" :min="0">
|
|
<template #append>张</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="每人限领次数">
|
|
<el-input class="w-120" type="number" v-model="form.model.limit_num" :min="0">
|
|
<template #append>张</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="领券时间" prop="get_time">
|
|
<el-date-picker v-model="form.model.get_time" type="datetimerange"
|
|
value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
|
|
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
|
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" prefix-icon="Calendar"
|
|
:editable="false"></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="券有效期" prop="use_time_type">
|
|
<el-radio-group v-model="form.model.use_time_type">
|
|
<!-- <el-radio label="days">相对天数</el-radio> -->
|
|
<el-radio label="range">固定区间</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<div class="el-form-item-inner">
|
|
<el-form-item>
|
|
<template v-if="form.model.use_time_type == 'days'">
|
|
<el-form-item class="is-no-asterisk" label="领券" prop="start_days">
|
|
<el-input class="w-120" type="number" v-model="form.model.start_days" :min="0">
|
|
<template #append>天</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item class="is-no-asterisk ml-2" label="后生效，有效期" prop="days">
|
|
<el-input class="w-120" type="number" v-model="form.model.days" :min="0">
|
|
<template #append>天</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</template>
|
|
<el-form-item v-if="form.model.use_time_type == 'range'" class="is-no-asterisk" label="固定时间"
|
|
prop="useTime">
|
|
<el-date-picker v-model="form.model.use_time" type="datetimerange"
|
|
value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
|
|
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
|
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
|
|
prefix-icon="Calendar" :editable="false"></el-date-picker>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</div>
|
|
<!-- <el-form-item label="优惠叠加">
|
|
<div>
|
|
<div class="sa-flex">
|
|
<el-switch v-model="form.model.is_double_discount" :active-value="1"
|
|
:inactive-value="0">
|
|
</el-switch>
|
|
<div class="ml-2" :class="form.model.is_double_discount == 1?'sa-color--primary':''">
|
|
{{form.model.is_double_discount == 1?'开启':'关闭'}}
|
|
</div>
|
|
</div>
|
|
<div class="tip"> 开启优惠叠加，优惠券将可以和活动一起使用 </div>
|
|
</div>
|
|
</el-form-item> -->
|
|
<el-form-item label="券状态" prop="status">
|
|
<div>
|
|
<el-radio-group v-model="form.model.status">
|
|
<!-- <el-radio label="normal">公开发放</el-radio> -->
|
|
<el-radio label="hidden">后台发放</el-radio>
|
|
<!-- <el-radio label="disabled">禁止使用</el-radio> -->
|
|
</el-radio-group>
|
|
<div class="tip">
|
|
后台发放状态改为别的状态，将导致满赠活动无法赠送该优惠券
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="可用范围" prop="use_scope">
|
|
<el-radio-group v-model="form.model.use_scope" @change="form.model.items_value = []">
|
|
<el-radio label="all_use">全场通用</el-radio>
|
|
<!-- <el-radio label="goods">指定商品可用</el-radio>
|
|
<el-radio label="disabled_goods">指定商品不可用</el-radio>
|
|
<el-radio label="category">指定分类可用</el-radio> -->
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button v-if="form.model.use_scope == 'goods' || form.model.use_scope == 'disabled_goods'"
|
|
type="primary" link @click="onSelectGoods">选择商品</el-button>
|
|
<el-button v-if="form.model.use_scope == 'category'" type="primary" link
|
|
@click="onSelectCategory">选择分类
|
|
</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<div v-if="form.model.use_scope == 'goods' || form.model.use_scope == 'disabled_goods'"
|
|
class="sa-template-wrap">
|
|
<template v-if="form.model.items_value.length > 0">
|
|
<div class="header sa-flex">
|
|
<div class="key">商品信息</div>
|
|
<div class="oper">操作</div>
|
|
</div>
|
|
<div class="item" v-for="(element, index) in form.model.items_value" :key="element">
|
|
<div class="key">
|
|
<sa-image class="mr-2" :url="element.image" size="40"></sa-image>
|
|
<div class="sa-table-line-1">
|
|
{{ element.title }}
|
|
</div>
|
|
</div>
|
|
<div class="oper">
|
|
<el-button type="danger" link @click="onDeleteGoods(index)">
|
|
移除
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div v-if="form.model.use_scope == 'category'" class="sa-template-wrap">
|
|
<template v-if="form.model.items_value.length > 0">
|
|
<div class="header sa-flex">
|
|
<div class="key">分类信息</div>
|
|
<div class="oper">操作</div>
|
|
</div>
|
|
<div class="item" v-for="(element, index) in form.model.items_value" :key="element">
|
|
<div class="key">
|
|
<div class="goods-title sa-m-b-6">{{ element.name }}</div>
|
|
</div>
|
|
<div class="oper">
|
|
<el-button type="danger" link @click="onDeleteCategory(index)">
|
|
移除
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-scrollbar>
|
|
</el-main>
|
|
<el-footer class="sa-footer--submit sa-flex sa-row-right">
|
|
<el-button type="primary" @click="onConfirm">确定</el-button>
|
|
</el-footer>
|
|
</el-container>
|
|
</div> |