| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226 |
- <div class="row-content am-cf">
- <div class="row">
- <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
- <div class="widget am-cf">
- <form id="my-form" class="am-form tpl-form-line-form" enctype="multipart/form-data" method="post">
- <div class="widget-body">
- <fieldset>
- <div class="widget-head am-cf">
- <div class="widget-title am-fl">添加优惠券</div>
- </div>
- <div class="am-form-group">
- <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">优惠券名称 </label>
- <div class="am-u-sm-9 am-u-end">
- <input type="text" class="tpl-form-input" name="coupon[name]"
- value="" placeholder="请输入优惠券名称" required>
- <small>例如:满100减10</small>
- </div>
- </div>
- <div class="am-form-group">
- <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">优惠券颜色 </label>
- <div class="am-u-sm-9 am-u-end">
- <label class="am-radio-inline">
- <input type="radio" name="coupon[color]" value="10" checked data-am-ucheck>
- 蓝色
- </label>
- <label class="am-radio-inline">
- <input type="radio" name="coupon[color]" value="20" data-am-ucheck>
- 红色
- </label>
- <label class="am-radio-inline">
- <input type="radio" name="coupon[color]" value="30" data-am-ucheck>
- 紫色
- </label>
- <label class="am-radio-inline">
- <input type="radio" name="coupon[color]" value="40" data-am-ucheck>
- 黄色
- </label>
- </div>
- </div>
- <div class="am-form-group" data-x-switch>
- <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">优惠券类型 </label>
- <div class="am-u-sm-9 am-u-end">
- <label class="am-radio-inline">
- <input type="radio" name="coupon[coupon_type]" value="10" checked
- data-am-ucheck
- data-switch-box="switch-coupon_type"
- data-switch-item="coupon_type__10">
- 满减券
- </label>
- <label class="am-radio-inline">
- <input type="radio" name="coupon[coupon_type]" value="20"
- data-am-ucheck
- data-switch-box="switch-coupon_type"
- data-switch-item="coupon_type__20">
- 折扣券
- </label>
- </div>
- </div>
- <div class="am-form-group switch-coupon_type coupon_type__10">
- <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">减免金额 </label>
- <div class="am-u-sm-9 am-u-end">
- <input type="number" min="0.01" class="tpl-form-input" name="coupon[reduce_price]"
- value="" placeholder="请输入减免金额" required>
- </div>
- </div>
- <div class="am-form-group switch-coupon_type coupon_type__20 hide">
- <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">折扣率 </label>
- <div class="am-u-sm-9 am-u-end">
- <input type="number" min="0" max="10" class="tpl-form-input"
- name="coupon[discount]"
- value="" placeholder="请输入折扣率" required>
- <small>折扣率范围0-10,9.5代表9.5折,0代表不折扣</small>
- </div>
- </div>
- <div class="am-form-group">
- <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">最低消费金额 </label>
- <div class="am-u-sm-9 am-u-end">
- <input type="number" min="1" class="tpl-form-input" name="coupon[min_price]"
- value="" placeholder="请输入最低消费金额" required>
- </div>
- </div>
- <div class="am-form-group" data-x-switch>
- <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">到期类型 </label>
- <div class="am-u-sm-9 am-u-end">
- <label class="am-radio-inline">
- <input type="radio" name="coupon[expire_type]" value="10" checked
- data-am-ucheck
- data-switch-box="switch-expire_type"
- data-switch-item="expire_type__10">
- 领取后生效
- </label>
- <label class="am-radio-inline">
- <input type="radio" name="coupon[expire_type]" value="20"
- data-am-ucheck
- data-switch-box="switch-expire_type"
- data-switch-item="expire_type__20">
- 固定时间
- </label>
- </div>
- </div>
- <div class="am-form-group switch-expire_type expire_type__10">
- <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">有效天数 </label>
- <div class="am-u-sm-9 am-u-end">
- <input type="number" min="1" class="tpl-form-input" name="coupon[expire_day]"
- value="3" placeholder="请输入有效天数" required>
- </div>
- </div>
- <div class="am-form-group switch-expire_type expire_type__20 hide">
- <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">时间范围 </label>
- <div class="am-u-sm-9 am-u-end">
- <input type="text" class="j-startTime am-form-field am-margin-bottom-sm"
- name="coupon[start_time]" placeholder="请选择开始日期" required>
- <input type="text" class="j-endTime am-form-field" name="coupon[end_time]"
- placeholder="请选择结束日期" required>
- </div>
- </div>
- <div class="am-form-group">
- <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">发放总数量 </label>
- <div class="am-u-sm-9 am-u-end">
- <input type="number" min="-1" class="tpl-form-input" name="coupon[total_num]"
- value="-1" required>
- <small>限制领取的优惠券数量,-1为不限制</small>
- </div>
- </div>
- <div class="am-form-group">
- <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">排序 </label>
- <div class="am-u-sm-9 am-u-end">
- <input type="number" min="0" class="tpl-form-input" name="coupon[sort]" value="100"
- required>
- </div>
- </div>
- <div class="am-form-group">
- <div class="am-u-sm-9 am-u-sm-push-3 am-margin-top-lg">
- <button type="submit" class="j-submit am-btn am-btn-secondary">提交
- </button>
- </div>
- </div>
- </fieldset>
- </div>
- </form>
- </div>
- </div>
- </div>
- </div>
- <script>
- /**
- * 时间选择
- */
- $(function () {
- var nowTemp = new Date();
- var nowDay = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0).valueOf();
- var nowMoth = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 1, 0, 0, 0, 0).valueOf();
- var nowYear = new Date(nowTemp.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
- var $startTime = $('.j-startTime');
- var $endTime = $('.j-endTime');
- var checkin = $startTime.datepicker({
- onRender: function (date, viewMode) {
- // 默认 days 视图,与当前日期比较
- var viewDate = nowDay;
- switch (viewMode) {
- // moths 视图,与当前月份比较
- case 1:
- viewDate = nowMoth;
- break;
- // years 视图,与当前年份比较
- case 2:
- viewDate = nowYear;
- break;
- }
- return date.valueOf() < viewDate ? 'am-disabled' : '';
- }
- }).on('changeDate.datepicker.amui', function (ev) {
- if (ev.date.valueOf() > checkout.date.valueOf()) {
- var newDate = new Date(ev.date)
- newDate.setDate(newDate.getDate() + 1);
- checkout.setValue(newDate);
- }
- checkin.close();
- $endTime[0].focus();
- }).data('amui.datepicker');
- var checkout = $endTime.datepicker({
- onRender: function (date, viewMode) {
- var inTime = checkin.date;
- var inDay = inTime.valueOf();
- var inMoth = new Date(inTime.getFullYear(), inTime.getMonth(), 1, 0, 0, 0, 0).valueOf();
- var inYear = new Date(inTime.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
- // 默认 days 视图,与当前日期比较
- var viewDate = inDay;
- switch (viewMode) {
- // moths 视图,与当前月份比较
- case 1:
- viewDate = inMoth;
- break;
- // years 视图,与当前年份比较
- case 2:
- viewDate = inYear;
- break;
- }
- return date.valueOf() <= viewDate ? 'am-disabled' : '';
- }
- }).on('changeDate.datepicker.amui', function (ev) {
- checkout.close();
- }).data('amui.datepicker');
- });
- </script>
- <script>
- $(function () {
- // swith切换
- var $mySwitch = $('[data-x-switch]');
- $mySwitch.find('[data-switch-item]').click(function () {
- var $mySwitchBox = $('.' + $(this).data('switch-box'));
- $mySwitchBox.hide().filter('.' + $(this).data('switch-item')).show();
- });
- /**
- * 表单验证提交
- * @type {*}
- */
- $('#my-form').superForm();
- });
- </script>
|