文件

1524 行
75 KiB
HTML
可执行文件

此文件含有模棱两可的 Unicode 字符

此文件含有可能会与其他字符混淆的 Unicode 字符。 如果您是想特意这样的,可以安全地忽略该警告。 使用 Escape 按钮显示他们。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.2.8.2.css">
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.2.8.2.js"></script>
<title>商户支付券</title>
<style>
[v-cloak] {
display: none;
}
.seek-div{
margin: 10px 0 10px 10px;
}
.seek-div>div{
margin: 0 10px 10px 0;
}
.slots {
display: flex;
}
.slots > div:nth-child(1) {
margin-right: 10px;
}
/* 领取记录详情 */
.dialog-function {
display: flex;
line-height: 50px;
padding-bottom: 20px;
}
.dialog-function > div:nth-child(1) {
margin-right: 10px;
}
.dialog-function > div:nth-child(3) {
margin: 0 30px;
}
/* 领取详情分页 */
.dialog-paging {
margin: 20px 0 0 300px;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- 搜索 -->
<div class="seek-div" style="margin-bottom: 10px;">
<el-input v-model="stock_name" clearable placeholder="商家券名称/ID" size="small"
style="width:180px;"></el-input>
<el-select v-model="stock_type" placeholder="类型" size="small" clearable>
<el-option value="" label="所有类型"></el-option>
<el-option value="1" label="固定面额满减券"></el-option>
<!-- <el-option value="2" label="折扣券"></el-option>
<el-option value="3" label="换购券"></el-option>-->
</el-select>
<el-select v-model="suspend_status" placeholder="状态" size="small" clearable>
<el-option value="" label="所有状态"></el-option>
<el-option value="1" label="正在发放"></el-option>
<el-option value="2" label="暂停发放"></el-option>
</el-select>
<el-date-picker
size="small"
clearable
v-model="add_time"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<if condition="$auth['search'] eq true">
<el-button type="primary" @click="search" size="small">查询</el-button>
</if>
<el-button type="primary" plain @click="LogoSetting=true" size="small">Logo</el-button>
<if condition="$auth['coupon'] eq true">
<el-button type="primary" plain @click="CreateCoupon" size="small">创建商家券</el-button>
</if>
<if condition="$auth['record'] eq true">
<el-button type="primary" plain @click="getRecord" size="small">领取使用记录</el-button>
</if>
<if condition="$auth['download'] eq true">
<el-button @click="download" size="small">下载券码</el-button>
</if>
</div>
<!-- 列表 -->
<div style="width: calc(100vw - 20px);">
<el-table border :data="couponList" style="width: calc(100% - 20px);margin: 0 auto"
size="mini"
max-height="500"
v-loading="loading"
@selection-change="ChooseCouponChange"
element-loading-text="数据获取中"
element-loading-spinner="el-icon-loading">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="index" label="序号" show-overflow-tooltip width="50"></el-table-column>
<el-table-column prop="user_name" label="支付模式" show-overflow-tooltip></el-table-column>
<el-table-column prop="type_name" label="创建方式" show-overflow-tooltip></el-table-column>
<el-table-column prop="available_name" label="可用场景" show-overflow-tooltip></el-table-column>
<el-table-column prop="stock_name" label="商家券名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="stock_id" label="商家券ID" show-overflow-tooltip></el-table-column>
<el-table-column prop="stock_type_name" label="商家券类型" show-overflow-tooltip></el-table-column>
<el-table-column prop="suspend_name" label="状态" show-overflow-tooltip></el-table-column>
<el-table-column prop="coupon_available_time" label="可核销时间" show-overflow-tooltip></el-table-column>
<el-table-column prop="coupon_num" label="总库存" show-overflow-tooltip></el-table-column>
<el-table-column prop="operation_num" label="剩余库存" show-overflow-tooltip></el-table-column>
<el-table-column prop="operator_name" label="创建人" show-overflow-tooltip></el-table-column>
<el-table-column fixed="right" label="操作" width="260" style="border-right: none;">
<template slot-scope="scope">
<if condition="$auth['coupon_info'] eq true">
<el-button @click="coupon_info(scope.row.id)" type="text" size="small">查看详情</el-button>
</if>
<if condition="$auth['suspendOperation'] eq true">
<el-button @click="suspendOperation(scope.row.id)" type="text" size="small"
v-if="scope.row.suspend_status == 1">停止发放
</el-button>
<el-button @click="restartOperation(scope.row.id)" type="text" size="small"
v-if="scope.row.suspend_status == 2">开始发放
</el-button>
</if>
<if condition="$auth['deleteOperation'] eq true">
<el-button @click="deleteOperation(scope.row.id)" type="text" size="small">删除
</el-button>
</if>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="currentLen">
</el-pagination>
</div>
<!-- 弹出层(商家券设置) -->
<el-dialog title="商家券设置" :visible.sync="showSetting" width="800px" top="7vh"
:before-close="clearCoupon" :close-on-click-modal="false">
<el-form :model="add_form" :rules="ruleForm" ref="add_form" size="mini" label-width="140px">
<div v-show="couponOne">
<!-- <el-form-item label="支付模式:" prop="user_type">
<el-select class="add_form-input" v-model="add_form.user_type" clearable
placeholder="请选择支付模式" size="small" style="margin-right:10px">
<if condition="$ordinary_pay_state eq true">
<el-option label="普通支付模式" :value="1"></el-option>
</if>
<if condition="$service_pay_state eq true">
<el-option label="服务商支付模式" :value="2"></el-option>
</if>
</el-select>
</el-form-item>
<el-form-item label="创建方式:" prop="type">
<el-select class="add_form-input" v-model="add_form.type" clearable
placeholder="请选择创建方式" size="small" style="margin-right:10px">
&lt;!&ndash; <el-option label="线下" :value="2"></el-option>&ndash;&gt;
<el-option label="小程序" :value="1"></el-option>
</el-select>
</el-form-item>-->
<el-form-item label="可用场景:" prop="available_type">
<el-select class="add_form-input" v-model="add_form.available_type" clearable multiple
placeholder="请选择可用场景" size="small" style="margin-right:10px">
<el-option label="线上" :value="1"></el-option>
<el-option label="线下" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="商家券名称:" prop="stock_name">
<el-input v-model="add_form.stock_name" clearable placeholder="请输入商家券名称"
style="width:300px;"></el-input>
<el-popover
placement="bottom"
title="详解"
width="100"
trigger="hover"
content="一个英文字母等于一个字符,一个中文汉字等于三个字符">
<span slot="reference" size="mini"><i class="el-icon-question"></i></span>
</el-popover>
<span>(最多20个字符)</span>
</el-form-item>
<el-form-item label="适用商品范围:" prop="goods_name">
<el-input v-model="add_form.goods_name" clearable placeholder="请输入适用商品范围"
style="width:300px;"></el-input>
<el-popover
placement="bottom"
title="详解"
width="100"
trigger="hover"
content="一个英文字母等于一个字符,一个中文汉字等于三个字符">
<span slot="reference" size="mini"><i class="el-icon-question"></i></span>
</el-popover>
<span>(最多15个字符)</span>
</el-form-item>
<el-form-item label="商家券类型:" prop="stock_type">
<el-radio v-model="add_form.stock_type" label="1">满减券</el-radio>
<!-- <el-radio v-model="add_form.stock_type" label="2">折扣券</el-radio>
<el-radio v-model="add_form.stock_type" label="3">换购券</el-radio>-->
</el-form-item>
<el-form-item label="优惠金额:" prop="coupon_use_rule.fixed_normal_coupon.discount_amount"
v-if="add_form.stock_type==1">
<el-input v-model="add_form.coupon_use_rule.fixed_normal_coupon.discount_amount" clearable
placeholder="请输入优惠金额" style="width:150px;"></el-input>
元
<span>(0.01<= 值 <= 10万)</span>
</el-form-item>
<el-form-item label="使用门槛:" prop="coupon_use_rule.fixed_normal_coupon.transaction_minimum">
满
<el-input v-model="add_form.coupon_use_rule.fixed_normal_coupon.transaction_minimum"
clearable
placeholder="请输入使用门槛" style="width:150px;"></el-input>
元可用
<span>(1 ≤ 值 ≤ 10万)</span>
</el-form-item>
<el-form-item label="总预算:" prop="stock_send_rule.max_amount">
<el-input v-model="add_form.stock_send_rule.max_amount" clearable
placeholder="请输入总预算" style="width:150px;"></el-input>
元
<span>( 0.01 ≤ 值 ≤ 1亿)</span>
</el-form-item>
<!-- <el-form-item label="领取限制:" prop="stock_send_rule.max_coupons_per_user">
<el-input v-model="add_form.stock_send_rule.max_coupons_per_user" clearable
placeholder="领取限制" style="width:150px;"></el-input>
<span>(1<= value <= 100)张/人</span>
</el-form-item>-->
<el-form-item>
<el-button type="primary" size="small" @click="distance(2)">下一步</el-button>
</el-form-item>
</div>
<div v-show="couponTwo">
<el-form-item label="可核销时间:" prop="available_time">
<el-date-picker
v-model="add_form.available_time"
value-format="yyyy-MM-ddTHH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="生效时间(可不选):">
<div>
<div>
<el-radio v-model="add_form.valid_time_type" label="2">固定周期
<el-popover
placement="bottom"
title="详解"
width="100"
trigger="hover"
content="选择星期后,只有选择的周期才会有效,不选择默认周一至周日都有效">
<span slot="reference" size="mini"><i class="el-icon-question"></i></span>
</el-popover>
</el-radio>
<el-time-picker
v-model="add_form.coupon_use_rule.coupon_available_time.available_week.available_day_time.begin_time"
value-format="HH:mm:ss"
:picker-options="{
selectableRange: '00:00:00 - 23:59:59'
}"
placeholder="开始时间">
</el-time-picker>
<el-time-picker
v-model="add_form.coupon_use_rule.coupon_available_time.available_week.available_day_time.end_time"
value-format="HH:mm:ss"
:picker-options="{
selectableRange: '00:00:00 - 23:59:59'
}"
placeholder="结束时间">
</el-time-picker>
</div>
<div>
<template>
<el-checkbox-group
v-model="add_form.coupon_use_rule.coupon_available_time.available_week.week_day">
<el-checkbox label="0">星期日</el-checkbox>
<el-checkbox label="1">星期一</el-checkbox>
<el-checkbox label="2">星期二</el-checkbox>
<el-checkbox label="3">星期三</el-checkbox>
<el-checkbox label="4">星期四</el-checkbox>
<el-checkbox label="5">星期五</el-checkbox>
<el-checkbox label="6">星期六</el-checkbox>
</el-checkbox-group>
</template>
</div>
</div>
<hr>
<div>
<el-radio v-model="add_form.valid_time_type" label="1">无规律有效期</el-radio>
<el-date-picker
v-model="add_form.coupon_use_rule.coupon_available_time.irregulary_avaliable_time.irregular_time"
value-format="yyyy-MM-ddTHH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<hr>
<div>
<el-radio v-model="add_form.valid_time_type" label="3">领取后N天开始生效</el-radio>
<el-input
v-model="add_form.coupon_use_rule.coupon_available_time.wait_days_after_receive"
clearable
placeholder="请输入领取后N天开始生效" style="width:150px;"></el-input>
<el-popover
placement="bottom"
title="详解"
width="100"
trigger="hover"
content="日期区间内,用户领券后需等待x天开始生效。例如领券后当天开始生效则无需填写,领券后第2天开始生效填1,以此类推……用户在有效期开始前领取商家券,则从有效期第1天开始计算天数,用户在有效期内领取商家券,则从领取当天开始计算天数。无论用户何时领取商家券,商家券在活动有效期结束后均不可用。需配合生效后N天内有效一同填写,不可单独填写。">
<span slot="reference" size="mini"><i class="el-icon-question"></i></span>
</el-popover>
</div>
<div>
<el-input
v-model="add_form.coupon_use_rule.coupon_available_time.available_day_after_receive"
clearable
placeholder="请输入生效后N天内有效" style="width:150px;"></el-input>
<el-popover
placement="bottom"
title="详解"
width="100"
trigger="hover"
content="日期区间内,券生效后x天内有效。例如生效当天内有效填1,生效后2天内有效填2,以此类推……注意,用户在有效期开始前领取商家券,则从有效期第1天开始计算天数,用户在有效期内领取商家券,则从领取当天开始计算天数,无论用户何时领取商家券,商家券在活动有效期结束后均不可用。可配合领取后N天开始生效一同填写,也可单独填写。单独填写时,有效期内领券后立即生效,生效后x天内有效">
<span slot="reference" size="mini">请输入生效后N天内有效(可不填)<i class="el-icon-question"></i></span>
</el-popover>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="distance(1)">上一步</el-button>
<el-button type="primary" size="small" @click="distance(3)">下一步</el-button>
</el-form-item>
</div>
<div v-show="couponThree">
<el-form-item label="使用门店">
<el-radio v-model="add_form.store_type" label="1">所有门店</el-radio>
<el-radio v-model="add_form.store_type" label="2">指定门店</el-radio>
<el-select class="add_form-input" v-model="add_form.store_id_gather" clearable multiple
placeholder="请选择门店" size="small" style="margin-right:10px"
v-if="add_form.store_type == 2">
<el-option v-for="item in store_info" :label="item.storetag" :value="item.id"
:key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="关联商品">
<div>
<el-radio v-model="add_form.goods_type" label="1" @change="wholeGoods">所有商品</el-radio>
<el-radio v-model="add_form.goods_type" label="2" v-if="add_form.store_type == 2">指定商品
</el-radio>
<el-button type="primary" @click="choiceGoods" v-if="add_form.goods_type == 2">选择商品</el-button>
<span v-if="add_form.goods_type == 2">(不能超过20个商品)</span>
</div>
<el-table
size="mini"
v-if="add_form.goods_type == 2"
:data="add_form.goodsList"
border
height="400px"
style="width: 100%; margin-top: 20px">
<el-table-column align="center" label="序号" type="index" width="60"></el-table-column>
<el-table-column align="center" prop="goods_name" label="商品名称" min-width="120"></el-table-column>
<el-table-column prop="goods_number" label="货号" width="120"></el-table-column>
<el-table-column prop="goods_code" label="条码" width="120"></el-table-column>
<el-table-column label="操作" width="60">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="deleteGoods(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="distance(2)">上一步</el-button>
<el-button type="primary" size="small" @click="distance(4)">下一步</el-button>
</el-form-item>
</div>
<div v-show="couponFour">
<el-form-item label="商户名称">
<el-input v-model="add_form.display_pattern_info.merchant_name" clearable placeholder="商户名称"
style="width:300px;"></el-input>
<el-popover
placement="bottom"
title="详解"
width="100"
trigger="hover"
content="一个英文字母等于一个字符,一个中文汉字等于三个字符">
<span slot="reference" size="mini"><i class="el-icon-question"></i></span>
</el-popover>
<span>(最多16字符)</span>
</el-form-item>
<el-form-item label="">
<el-button type="primary" size="small" @click="distance(3)">上一步</el-button>
<el-button type="primary" v-if="edit" size="small" @click="createCoupon('add_form')">提交</el-button>
</el-form-item>
</div>
</el-form>
</el-dialog>
<el-dialog title="发放记录" :visible.sync="record_status" width="800px" top="7vh">
<div class="dialog-details-first">
<div>
<div>
<el-input
size="small"
style="margin-right: 10px;width:400px"
class="el-input-remote"
v-model="recordSearchText"
clearable
placeholder="会员名称/商家券名称/手机号/发放的商家券ID">
</el-input>
<el-date-picker
size="small"
clearable
v-model="wechatpay_use_time"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="核销开始日期"
end-placeholder="核销结束日期">
</el-date-picker>
</div>
<div style="margin-top: 20px;">
<el-select class="add_form-input" v-model="verification_store_id" clearable
placeholder="所有门店" size="small" style="margin-right:10px">
<el-option v-for="item in store_info" :label="item.storetag" :value="item.id"
:key="item.id"></el-option>
</el-select>
<el-select v-model="available_type" multiple placeholder="可使用场景" size="small" clearable>
<el-option value="" label="可使用场景"></el-option>
<el-option value="1" label="线上"></el-option>
<el-option value="2" label="线下"></el-option>
</el-select>
<el-select v-model="verification_available_type" placeholder="核销场景" size="small" clearable>
<el-option value="" label="核销场景"></el-option>
<el-option value="1" label="线上"></el-option>
<el-option value="2" label="线下"></el-option>
</el-select>
<el-select v-model="use_type" placeholder="使用状态" size="small" clearable>
<el-option value="" label="所有使用状态"></el-option>
<el-option value="1" label="未使用"></el-option>
<el-option value="2" label="已使用"></el-option>
</el-select>
<el-select v-model="verification_type" placeholder="核销状态" size="small" clearable>
<el-option value="" label="所有核销状态"></el-option>
<el-option value="1" label="未核销"></el-option>
<el-option value="2" label="已核销"></el-option>
</el-select>
<el-button type="primary" plain @click="searchRecord" size="small">搜索</el-button>
</div>
</div>
</div>
<div style="border: 1px solid #e6e6e6;max-width: calc(100vw - 20px);margin-top: 10px;">
<el-table border :data="recordList" style="width: 100%;border: none;"
size="mini"
max-height="500"
v-loading="recordLoading">
<el-table-column prop="index" label="序号" width="50" show-overflow-tooltip></el-table-column>
<el-table-column prop="user_type_name" label="支付模式" width="50" show-overflow-tooltip></el-table-column>
<el-table-column prop="available_type_name" label="可用场景" width="50"
show-overflow-tooltip></el-table-column>
<el-table-column prop="stock_name" label="商家券名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="stock_type_name" label="类型" show-overflow-tooltip></el-table-column>
<el-table-column prop="stock_id" label="发放商家券批次号" show-overflow-tooltip></el-table-column>
<el-table-column prop="openid" label="用户openid" show-overflow-tooltip></el-table-column>
<el-table-column prop="vip_name" label="会员名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="mobile_phone" label="会员手机号" show-overflow-tooltip></el-table-column>
<el-table-column prop="storetag" label="领取门店" show-overflow-tooltip></el-table-column>
<el-table-column prop="add_time" label="领取时间" show-overflow-tooltip></el-table-column>
<el-table-column prop="use_storetag" label="使用门店" show-overflow-tooltip></el-table-column>
<el-table-column prop="verification_available_name" label="使用场景"
show-overflow-tooltip></el-table-column>
<el-table-column prop="operator_name" label="核销人" show-overflow-tooltip></el-table-column>
<el-table-column prop="wechatpay_use_time" label="核销时间" show-overflow-tooltip></el-table-column>
</el-table>
<el-pagination
@size-change="recordHandleSizeChange"
@current-change="recordHandleCurrentChange"
:current-page="recordCurrentPage"
:page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="recordCurrentLen">
</el-pagination>
</div>
</el-dialog>
<el-dialog title="门店商品列表" :visible.sync="storeSetting" width="800px" top="7vh">
<div class="dialog-details-first">
<div style="display: flex;">
<el-input
size="small"
style="margin-right: 10px;width:200px"
class="el-input-remote"
v-model="searchText"
clearable
placeholder="名称/货号/条码">
</el-input>
<el-select size="small" filterable clearable v-if="goodsClass1.length"
@change="changeGoodsClass1($event)"
v-model="goodsClassId1" placeholder="请选择一级分类">
<el-option key="0" value="0" label="请选择一级分类"></el-option>
<el-option
v-for="item in goodsClass1"
:key="item.id"
:label="item.class_name"
:value="item.id">
</el-option>
</el-select>
<el-select size="small" filterable clearable v-if="goodsClass2.length"
@change="changeGoodsClass2($event)"
v-model="goodsClassId2" placeholder="请选择二级分类">
<el-option key="0" value="0" label="请选择二级分类"></el-option>
<el-option
v-for="item in goodsClass2"
:key="item.id"
:label="item.class_name"
:value="item.id">
</el-option>
</el-select>
<el-select size="small" filterable clearable v-if="goodsClass3.length"
@change="changeGoodsClass3($event)"
v-model="goodsClassId3" placeholder="请选择三级分类">
<el-option key="0" value="0" label="请选择三级分类"></el-option>
<el-option
v-for="item in goodsClass3"
:key="item.id"
:label="item.class_name"
:value="item.id">
</el-option>
</el-select>
<el-button type="primary" plain @click="searchGoods" size="small">搜索</el-button>
<el-button type="primary" @click="setGoods" size="small">选择</el-button>
</div>
</div>
<div style="border: 1px solid #e6e6e6;max-width: calc(100vw - 208px);margin-top: 10px;">
<el-table border :data="storeGoodsList" style="width: 100%;border: none;"
size="mini"
max-height="500"
@selection-change="handleSelectionChange"
v-loading="storeLoading">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="goods_name" label="商品名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="goods_number" label="货号" min-width="60" show-overflow-tooltip></el-table-column>
<el-table-column prop="goods_code" min-width="100" label="商品条码" show-overflow-tooltip></el-table-column>
</el-table>
<el-pagination
@size-change="storeHandleSizeChange"
@current-change="storeHandleCurrentChange"
:current-page="storeCurrentPage"
:page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="storeCurrentLen">
</el-pagination>
</div>
</el-dialog>
<el-dialog title="Logo" :visible.sync="LogoSetting" width="300px" height="200" top="3vh">
<el-form>
<el-form-item label="普通模式的Logo:" size="mini" min-width="200">
<el-upload
action="{:U('uploadWx')}"
name="label_img"
list-type="picture-card"
:data="getUserType(1)"
:show-file-list="false"
:on-success="localHandleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<template v-if="local_img">
<img :src="local_img" class="avatar" style="max-width:150px;max-height:150px;">
</template>
<i v-else class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="服务商模式Logo:" size="mini" min-width="200">
<el-upload
action="{:U('uploadWx')}"
name="label_img_service"
list-type="picture-card"
:data="getUserType(2)"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<template v-if="service_img">
<img :src="service_img" class="avatar" style="max-width:150px;max-height:150px;">
</template>
<i v-else class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-form>
</el-dialog>
</div>
</body>
<script type="text/javascript" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: function () {
let that = this;
return {
couponSelection: [], //选中的券
service_img: "{$service_img}",
local_img: "{$local_img}",
LogoSetting: false,
recordSearchText: "",
wechatpay_use_time: "",
verification_store_id: "",
verification_available_type: "",
available_type: "",
use_type: "",
verification_type: "",
record_status: false,
recordCurrentPage: 1,
recordCurrentLimit: 10,
recordCurrentLen: 0,
recordList: [], //记录
recordLoading: false,
loading: false,
currentPage: 1,
currentLimit: 10,
currentLen: 0,
stock_name: '',
add_time: '',
stock_type: '',
suspend_status: '',
couponList: [],
storeSetting: false,
goodsSelection: [],
goodsClassId1: '',
goodsClassId2: '',
goodsClassId3: '',
goodsClass1: [],
goodsClass2: [],
goodsClass3: [],
searchText: '',
storeLoading: false,
storeCurrentPage: 1,
storeCurrentLimit: 10,
storeCurrentLen: 0,
storeGoodsList: [],
add_form: {
goodsList: [], //选择的商品
goods_type: '1', //所有商品 2指定商品
store_type: '1', //1所有门店 2指定门店
store_id_gather: [], //可用的门店
user_type: "", //1普通支付模式 2服务商支付模式
type: "", //创建方式1小程序 2公众号
available_type: [], //可用场景1线上 2线下
stock_name: '', //名称
goods_name: '', //适用商品范围
stock_type: '1', //类型 1满减 2折扣 3换购
available_time: '', //有效时间
valid_time_type: '', //生效时间类型
coupon_use_rule: {
fixed_normal_coupon: {
discount_amount: '',
transaction_minimum: '',
},
coupon_available_time: {
available_day_after_receive: '',
wait_days_after_receive: '',
available_week: {
week_day: [],
available_day_time: {
begin_time: '',
end_time: '',
}
},
irregulary_avaliable_time: {
irregular_time: ''
},
}
},
stock_send_rule: {
max_amount: '',
max_coupons_per_user: '1'
},
display_pattern_info: {
merchant_name: '',
}
},
ruleForm: {
user_type: [{message: '请选择支付模式', required: true, trigger: 'change'}],
store_type: [{message: '请选择领取门店', required: true, trigger: 'change'}],
type: [{message: '请选择创建方式', required: true, trigger: 'change'}],
available_type: [{message: '请选择可用场景', required: true, trigger: 'change'}],
stock_name: [{message: '请输入商家券名称', required: true, trigger: 'change'}, {
validator: function (rule, value, callback) {
if (value.length > 20) {
callback(new Error("不能超过20个字符"));
} else {
callback();
}
}, trigger: 'blur'
}],
goods_name: [{message: '请输入适用范围', required: true, trigger: 'change'}, {
validator: function (rule, value, callback) {
if (value.length > 15) {
callback(new Error("不能超过15个字符"));
} else {
callback();
}
}, trigger: 'blur'
}],
stock_type: [{message: '请选择商家券类型', required: true, trigger: 'change'}],
"coupon_use_rule.fixed_normal_coupon.discount_amount": [{
message: '请输入优惠金额',
required: false,
trigger: 'change'
}, {
validator: function (rule, value, callback) {
var reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d{0,2})$/;
if ((!reg.test(value) || value < 0 || value > 100000) && value != '') {
callback(new Error("请输入正确优惠金额"));
} else {
callback();
}
}, trigger: 'blur'
}],
"coupon_use_rule.fixed_normal_coupon.transaction_minimum": [{
message: '请输入使用门槛',
required: false,
trigger: 'change'
}, {
validator: function (rule, value, callback) {
var reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d{0,2})$/;
if ((!reg.test(value) || value < 0 || value > 100000) && value != '') {
callback(new Error("请输入正确使用门槛"));
} else {
callback();
}
}, trigger: 'blur'
}],
"stock_send_rule.max_amount": [{message: '请输入总预算', required: true, trigger: 'change'}, {
validator: function (rule, value, callback) {
var reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d{0,2})$/;
var obj = parseInt(value * 10000) % parseInt(that.add_form.coupon_use_rule.fixed_normal_coupon.discount_amount * 10000);
if (!reg.test(value) || value < 0 || value > 1000000000) {
callback(new Error("请输入正确总预算"));
} else if (obj > 0) {
callback(new Error("总预算必须是优惠金额的整数倍"));
} else {
callback();
}
}, trigger: 'blur'
}],
"stock_send_rule.max_coupons_per_user": [{
message: '请输入领取限制',
required: true,
trigger: 'change'
}, {
validator: function (rule, value, callback) {
var reg = /^\+?[0-9][0-9]*$/;
if (!reg.test(value) || value < 0 || value > 100) {
callback(new Error("请输入用户最大可领个数"));
} else {
callback();
}
}, trigger: 'blur'
}],
available_time: [{message: '请选择券可核销时间', required: true, trigger: 'change'}, {
validator: function (rule, value, callback) {
if (value == '') {
callback(new Error("请选择券可核销时间"));
} else {
callback();
}
}, trigger: 'blur'
}],
store_id_gather: [{message: '请选择可领取的门店', required: true, trigger: 'change'}, {
validator: function (rule, value, callback) {
if (value == '' || value == []) {
callback(new Error("请选择可领取的门店"));
} else {
callback();
}
}, trigger: 'blur'
}],
},
store_info: [], //门店列表
showSetting: false,
couponOne: false,
couponTwo: false,
couponThree: false,
couponFour: false,
edit: false, //编辑
}
},
methods: {
//下载
download: function () {
var that = this;
var couponList = that.couponSelection;
if(couponList.length <= 0){
that.$message.error("请选择券");
return;
}
that.loading = true;
$.ajax({
url: "{:U('downloadCoupon')}",
type: "post",
data: {
couponList: couponList
},
success: function (res) {
that.loading = false;
if (res.status == 1) {
window.open(`{:U('downloadCouponZip')}?directory_name=${res.data.path}&store_arr=${res.data.store_arr}&coupon_arr=${res.data.coupon_arr}`);
} else {
that.$message.error(res.message);
}
}
})
},
//选择
ChooseCouponChange: function (data) {
var that = this;
that.couponSelection = data;
},
//上传图片参数
getUserType(user_type) {
return {
user_type: user_type
};
},
//上传图片前判断
beforeAvatarUpload: function (file) {
var that = this;
var imgType = ['image/jpg', 'image/jpeg', 'image/png', 'image/bmp'];
if (file.size > 1048576) {
that.$message({
type: "error",
message: "不能超过1M",
duration: 2000
})
return;
}
if (jQuery.inArray(file.type, imgType) == -1) {
that.$message({
type: "error",
message: "格式不正确",
duration: 2000
})
return;
}
return file.size && file.type;
},
//普通模式图片至微信
localHandleAvatarSuccess: function (res, file) {
if (res.status == 1) {
var url = window.location.href;
var urlstr = url.split("/"); //以“/”进行分割
var urls = '';
if (urlstr[2]) {
urls = urlstr[0] + '//' + urlstr[2];
}
this.local_img = urls + res.data.image_path;
this.$message.success(res.message);
} else {
this.$message.error(res.message);
}
},
//服务商模式图片至微信
handleAvatarSuccess(res, file) {
if (res.status == 1) {
var url = window.location.href;
var urlstr = url.split("/"); //以“/”进行分割
var urls = '';
if (urlstr[2]) {
urls = urlstr[0] + '//' + urlstr[2];
}
this.service_img = urls + res.data.image_path;
this.$message.success(res.message);
} else {
this.$message.error(res.message);
}
},
//记录搜索
searchRecord: function () {
this.recordCurrentPage = 1;
this.getRecord();
},
//记录
getRecord: function () {
var that = this;
that.record_status = true;
$.ajax({
url: "{:U('record')}",
type: "post",
data: {
page: that.recordCurrentPage,
limit: that.recordCurrentLimit,
searchText: that.recordSearchText,
wechatpay_use_time: that.wechatpay_use_time,
verification_store_id: that.verification_store_id,
use_type: that.use_type,
verification_type: that.verification_type,
available_type: that.available_type,
verification_available_type: that.verification_available_type,
},
success: function (res) {
that.recordList = [];
that.recordList = res.data.list;
that.$nextTick(function () {
that.recordCurrentLen = parseInt(res.data.count);
})
}
})
},
recordHandleSizeChange: function (val) {
this.recordCurrentLimit = val;//切换每页数量
this.recordCurrentPage = 1;
this.getRecord();
},
recordHandleCurrentChange: function (val) {
this.recordCurrentPage = val;
this.getRecord();//切换页数
},
//详情
coupon_info: function (id) {
var that = this;
that.edit = false;
$.ajax({
url: "{:U('couponInfo')}",
type: "post",
data: {id: id},
success: function (res) {
if (res.status == 1) {
that.add_form = {};
that.add_form = res.data.info;
that.showSetting = true;
that.couponOne = true;
that.couponTwo = false;
that.couponThree = false;
that.couponFour = false;
} else {
that.$message.error(res.message);
}
}
})
},
//删除
deleteOperation: function (coupon_id) {
var that = this;
this.$confirm('此操作将删除此数据显示, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.ajax({
url: "{:U('deleteOperation')}",
type: "post",
data: {coupon_id: coupon_id},
success: function (res) {
if (res.status == 1) {
that.$message({
type: "success",
message: res.message,
duration: 1000,
onClose: function () {
that.getCouponList();
}
})
} else {
that.$message({
type: "error",
message: res.message,
duration: 2000
})
}
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//开始发放
restartOperation: function (id) {
var that = this;
this.$confirm('此操作将重启商家券发放, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.restartPause(id, 1);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
});
});
},
//暂停发放商家券
suspendOperation: function (id) {
var that = this;
this.$confirm('此操作将暂停商家券发放, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.restartPause(id, 2);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
});
});
},
//发放状态操作
restartPause: function (id, operation_type) {
var that = this;
$.ajax({
url: "{:U('suspendOperation')}",
type: "post",
data: {
coupon_id: id,
operation_type: operation_type
},
success: function (res) {
if (res.status == 1) {
that.$message({
type: "success",
message: res.message,
duration: 1000,
onClose: function () {
that.getCouponList();
}
})
} else {
that.$message({
type: "error",
message: res.message,
duration: 2000
})
}
}
})
},
//提交商家券
createCoupon: function (formName) {
var that = this;
that.$refs[formName].validate((valid) => {
if (valid) {
var reg = /^\+?[0-9][0-9]*$/;
var add_form = that.add_form;
var goods_type = add_form.goods_type;
var store_type = add_form.store_type;
var goods_list = add_form.goodsList;
var store_id_gather = add_form.store_id_gather;
var stock_type = add_form.stock_type;
var discount_amount = add_form.coupon_use_rule.fixed_normal_coupon.discount_amount;
var transaction_minimum = add_form.coupon_use_rule.fixed_normal_coupon.transaction_minimum;
var max_amount = add_form.stock_send_rule.max_amount;
var valid_time_type = add_form.valid_time_type;
var irregular_time = add_form.coupon_use_rule.coupon_available_time.irregulary_avaliable_time.irregular_time;
var begin_time = add_form.coupon_use_rule.coupon_available_time.available_week.available_day_time.begin_time;
var end_time = add_form.coupon_use_rule.coupon_available_time.available_week.available_day_time.end_time;
var available_day_after_receive = add_form.coupon_use_rule.coupon_available_time.available_day_after_receive;
var wait_days_after_receive = add_form.coupon_use_rule.coupon_available_time.wait_days_after_receive;
if (stock_type == '') {
that.$message.error("请选类型");
return;
}
switch (stock_type) {
case '1':
//满减券
if (discount_amount == '' || parseFloat(discount_amount) < 0.01) {
that.$message.error("请输入正确商家券面额");
return;
}
if (transaction_minimum == '' || parseFloat(transaction_minimum) <= parseFloat(discount_amount)) {
that.$message.error("商家券门槛必须大于商家券金额");
return;
}
if (((max_amount * 10000) % (discount_amount * 10000)) > 0) {
that.$message.error("总预算必须能除尽优惠金额");
return;
}
break;
}
if (available_day_after_receive != '' && !reg.test(available_day_after_receive)) {
that.$message.error("请输入正确的生效后N天内有效");
return;
}
if (valid_time_type != '') {
switch (valid_time_type) {
case '1':
//无规律时间
if (irregular_time == '') {
that.$message.error("请选择无规律有效时间段");
return;
}
break;
case '2':
//固定时间段
if (begin_time == '' || end_time == '') {
that.$message.error("请选择固定周期有效时间段");
return;
}
break;
case '3':
//领取后N天开始生效
if (wait_days_after_receive == '' || !reg.test(wait_days_after_receive)) {
that.$message.error("请输入领取后N天开始生效");
return;
}
if (available_day_after_receive == '') {
that.$message.error("该类型必须与生效后N天内有效一起使用");
return;
}
if (!reg.test(available_day_after_receive)) {
that.$message.error("请输入生效后N天内有效");
return;
}
break;
}
}
switch (store_type) {
case '1':
if (goods_type != 1) {
that.$message.error("所有门店必须选择所有商品");
return;
}
break;
case '2':
if (store_id_gather.length == 0) {
that.$message.error("请选择门店");
return;
}
if (goods_type == 2) {
if (store_id_gather.length != 1) {
that.$message.error("该类型只能选择一个门店");
return;
}
if (goods_list.length == 0) {
that.$message.error("请选择商品");
return;
}
if (goods_list.length > 20) {
that.$message.error("最多只能选择20种商品");
return;
}
}
break;
}
that.$confirm("确认商家券信息无误,提交后无法修改", "温馨提示", {
confirmButtonText: '继续',
cancelButtonText: '取消',
type: 'info'
}).then(() => {
that.$loading({
lock: true,
text: '保存中,请等待',
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.7)'
});
add_form = JSON.stringify(add_form);
$.ajax({
url: "{:U('createCoupon')}",
data: {add_form: add_form},
type: "POST",
success: function (res) {
that.$loading().close();
if (res.status == 1) {
that.$message({
type: "success",
message: res.message,
duration: 1000,
onClose: function () {
that.showSetting = false;
that.Coupon();
that.getCouponList();
}
})
} else {
that.$message({
message: res.message,
type: 'error',
duration: 3000
});
}
}
});
}).catch(() => {
})
} else {
that.$message({message: '请完善必填项', type: 'error'});
}
});
},
//所有商品
wholeGoods: function () {
this.add_form.goodsList = [];
},
//删除选中的商品
deleteGoods: function (index) {
this.add_form.goodsList.splice(index, 1);
},
//选择商品
setGoods: function () {
var that = this;
var goodsSelection = that.goodsSelection;
if (goodsSelection.length <= 0) {
that.$message.error("请选择商品");
return;
}
var goodsList = JSON.parse(JSON.stringify(that.add_form.goodsList));
for (var i = 0; i < goodsSelection.length; i++) {
goodsList.unshift(goodsSelection[i]);
}
if (goodsList.length > 20) {
that.$message.error("最多选20种商品");
return;
}
that.goodsList = [];
that.add_form.goodsList = goodsList;
that.searchGoods();
},
//选中的商品
handleSelectionChange: function (data) {
var that = this;
that.goodsSelection = data;
},
//门店的商品列表
getStoreGoodsList: function () {
var that = this;
that.storeLoading = true;
var store_id = that.add_form.store_id_gather[0];
if (store_id == '') {
that.$message.error("请选择门店");
return;
}
var goodsList = that.add_form.goodsList;
var notInIds = [];
if (goodsList.length > 0) {
for (var i = 0; i < goodsList.length; i++) {
notInIds.push(goodsList[i].goods_id);
}
}
$.ajax({
url: "{:U('storeGoodsList')}",
type: "post",
data: {
store_id: store_id,
notInIds: notInIds,
page: that.storeCurrentPage,
limit: that.storeCurrentLimit,
searchText: that.searchText,
person1: that.goodsClassId1,
person2: that.goodsClassId2,
person3: that.goodsClassId3
},
success: function (res) {
that.storeLoading = false;
that.storeGoodsList = [];
that.storeGoodsList = res.data.list;
that.$nextTick(function () {
that.storeCurrentLen = res.data.count;
})
}
})
},
storeHandleSizeChange: function (val) {
this.storeCurrentLimit = val;//切换每页数量
this.storeCurrentPage = 1;
this.getStoreGoodsList();
},
storeHandleCurrentChange: function (val) {
this.storeCurrentPage = val;
this.getStoreGoodsList();//切换页数
},
//搜索商品列表
searchGoods: function () {
this.storeCurrentPage = 1;
this.getStoreGoodsList();
},
//选择商品
choiceGoods: function () {
if (this.add_form.store_type != 2) {
this.$message.error("指定商品必须选择一个门店");
return;
}
if (this.add_form.store_id_gather.length != 1) {
this.$message.error("该类型只能指定一个门店");
return;
}
this.storeCurrentPage = 1;
this.storeSetting = true;
this.getStoreGoodsList();
},
//获取顶级分类
getGoodsTopClass: function () {
var that = this;
$.ajax({
url: "{:U('getGoodsClass1')}",
type: "post",
data: {},
success: function (res) {
that.goodsClass1 = [];
that.goodsClass1 = res.data.list;
}
})
},
changeGoodsClass1: function (val) {
if (val == 0) {
this.goodsClass2 = [];
this.goodsClassId2 = '';
this.goodsClass3 = [];
this.goodsClassId3 = '';
} else {
this.getGoodsClass(val, 2);
}
},
changeGoodsClass2: function (val) {
if (val == 0) {
this.goodsClass3 = [];
this.goodsClassId3 = '';
} else {
this.getGoodsClass(val, 3);
}
},
changeGoodsClass3: function (val) {
if (val == 0) {
this.goodsClassId3 = '';
}
},
getGoodsClass: function (id, type) {
var that = this;
$.post("{:U('Retail/Sale/getChildClass')}", {
id: id,
type: type
}, function (res) {
if (res.status == 1) {
switch (type) {
case 2:
that.goodsClass2 = [];
that.goodsClass2 = res.data;
that.goodsClassId2 = '';
that.goodsClass3 = [];
that.goodsClassId3 = '';
break;
case 3:
that.goodsClass3 = [];
that.goodsClass3 = res.data;
that.goodsClassId3 = '';
break;
}
} else {
switch (type) {
case 2:
that.goodsClass2 = [];
that.goodsClassId2 = '';
that.goodsClass3 = [];
that.goodsClassId3 = '';
break;
case 3:
that.goodsClass3 = [];
that.goodsClassId3 = '';
break;
}
}
})
},
//创建优惠券
CreateCoupon: function () {
this.edit = true,
this.showSetting = true;
this.couponOne = true;
this.couponTwo = false;
this.couponThree = false;
this.couponFour = false;
this.searchText = '';
this.person1 = '';
this.person2 = '';
this.person3 = '';
this.Coupon();
},
Coupon: function () {
this.add_form = {
goodsList: [], //商品信息
goods_type: '1', //所有商品 2指定商品
store_type: '1', //1所有门店 2指定门店
store_id_gather: [], //可用的门店
user_type: "",
type: "",
available_type: [],
stock_name: '', //名称
goods_name: '', //适用商品范围
stock_type: '1', //类型
available_time: '', //有效时间
valid_time_type: '', //生效时间类型
coupon_use_rule: {
fixed_normal_coupon: {
discount_amount: '',
transaction_minimum: '',
},
coupon_available_time: {
available_day_after_receive: '',
wait_days_after_receive: '',
available_week: {
week_day: [],
available_day_time: {
begin_time: '',
end_time: '',
}
},
irregulary_avaliable_time: {
irregular_time: ''
},
}
},
stock_send_rule: {
max_amount: '',
max_coupons_per_user: '1'
},
display_pattern_info: {
merchant_name: '',
}
}
},
//关闭弹框执行
clearCoupon: function () {
this.showSetting = false;
},
//门店列表
getStore: function () {
var that = this;
$.ajax({
url: "{:U('store')}",
type: "post",
data: {},
success: function (res) {
that.store_info = [];
that.store_info = res.data.list;
}
})
},
//路程
distance: function (speed) {
switch (speed) {
case 1:
this.couponOne = true;
this.couponTwo = false;
this.couponThree = false;
this.couponFour = false;
break;
case 2:
this.couponOne = false;
this.couponTwo = true;
this.couponThree = false;
this.couponFour = false;
break;
case 3:
this.couponOne = false;
this.couponTwo = false;
this.couponThree = true;
this.couponFour = false;
break;
case 4:
this.couponOne = false;
this.couponTwo = false;
this.couponThree = false;
this.couponFour = true;
break;
}
},
//列表搜索
search: function () {
this.currentPage = 1;
this.getCouponList();
},
//商家券列表
getCouponList: function () {
var that = this;
var page = that.currentPage;
var limit = that.currentLimit;
var add_time = that.add_time;
var stock_type = that.stock_type;
var suspend_status = that.suspend_status;
var stock_name = that.stock_name;
$.ajax({
url: "{:U('CouponList')}",
type: "post",
data: {
page: page,
limit: limit,
add_time: add_time,
stock_type: stock_type,
suspend_status: suspend_status,
stock_name: stock_name
},
success: function (res) {
that.couponList = [];
that.couponList = res.data.list;
that.$nextTick(function () {
that.currentLen = parseInt(res.data.count);
})
}
})
},
handleSizeChange: function (val) {
this.currentLimit = val;//切换每页数量
this.currentPage = 1;
this.getCouponList();
},
handleCurrentChange: function (val) {
this.currentPage = val;
this.getCouponList();//切换页数
},
},
created: function () {
this.getCouponList();
this.getGoodsTopClass();
this.getStore();
}
})
</script>
</html>