如何自己制作优惠券图片app(Uniapp商城小程序/第二十五章：营销利器，优惠券制作)
天猫优惠券
2023-11-14 19:57
191
Uniapp商城小程序/第二十五章：营销利器，优惠券制作
一、功能说明
店铺可以创建通用券和商品券。
商品券可以抵扣一部金额,吸引用户进行购买
二、源码
关注 私信获取
如需远程支撑,源代码部署,应用运行,疑问解答,请关注 私信
三、界面路径
四、数据库模型设计
CREATE TABLE `yx_store_coupon` (`id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '优惠券表ID',
`title` varchar(64) NOT NULL COMMENT '优惠券名称',
`integral` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '兑换消耗积分值',
`coupon_price` decimal(8,2) unsigned NOT NULL DEFAULT '0.00' COMMENT '兑换的优惠券面值',
`use_min_price` decimal(8,2) unsigned NOT NULL DEFAULT '0.00' COMMENT '最低消费多少金额可用优惠券',
`coupon_time` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '优惠券有效期限(单位:天)',
`sort` int(11) unsigned NOT NULL DEFAULT '1' COMMENT '排序',
`status` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '状态(0:关闭,1:开启)',
`product_id` varchar(200) DEFAULT NULL COMMENT '商品ids',
`type` tinyint(255) DEFAULT '0' COMMENT '优惠券类型 0-通用 1-商品券',
`create_time` datetime NOT NULL COMMENT '兑换项目添加时间',
`update_time` datetime DEFAULT NULL,
`is_del如何自己制作优惠券图片app` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '是否删除',
PRIMARY KEY (`id`) USING BTREE,
KEY `state` (`status`) USING BTREE,
KEY `add_time` (`create_time`) USING BTREE,
KEY `coupon_time` (`coupon_time`) USING BTREE,
KEY `is_del` (`is_del`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC COMMENT='优惠券表';
五、前端代码开发
实现优惠券使用两个页面实现,第一个页面是列表展示,使用table表格。另外一个页面是表单页面,输入优惠券类型,优惠券金额等,提交新增或者修改优惠券记录。
5.1、优惠券列表展示
商品券
普通券
{{ scope.row.couponTime }}天
开启
关闭
{{ scope.row.createTime }}
如上述第一行代码,使用el-table做数据表格展示
如上述第8,9行代码,使用v-if判断券的类型,如果是1是商品券,否则是全场券。
import eForm from './form'
import eIForm from '../couponissue/form'
如上述代码,是引用了两个组件,两个组件的路径分别是上述第5,6行代码
通用券
商品券
开启
关闭
如上述是表单页面代码,如上述第一行代码,使用dialog,弹窗模式
如上述第34行代码,用户输入表单信息后,点击按钮确认,执行绑定事件doSubmit
doSubmit() {
this.loading = true
if (this.isAdd) {
this.doAdd()
} else this.doEdit()
},
doAdd() {
add(this.form).then(res => {
this.resetForm()
this.$notify({
title: '添加成功',
type: 'success',
duration: 2500
})
this.loading = false
this.$parent.init()
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
},
doEdit() {
edit(this.form).then(res => {
this.resetForm()
this.$notify({
title: '修改成功',
type: 'success',
duration: 2500
})
this.loading = false
this.$parent.init()
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
},
如上述是表单提交处理事件,将数据提交给后台接口,后台接口更新或者插入表单数据
六、api接口实现
@Log("查询")
@ApiOperation(value = "查询")
@GetMapping(value = "/yxStoreCoupon")
@PreAuthorize("@el.check('admin','YXSTORECOUPON_ALL','YXSTORECOUPON_SELECT')")
public ResponseEntity getYxStoreCoupons(YxStoreCouponQueryCriteria criteria, Pageable pageable){
return new ResponseEntity<>(yxStoreCouponService.queryAll(criteria,pageable),HttpStatus.OK);
}
@Log("新增")
@ApiOperation(value = "新增")
@PostMapping(value = "/yxStoreCoupon")
@PreAuthorize("@el.check('admin','YXSTORECOUPON_ALL','YXSTORECOUPON_CREATE')")
public ResponseEntity create(@Validated @RequestBody YxStoreCoupon resources){
if(CouponEnum.TYPE_1.getValue().equals(resources.getType())
本站涵盖的内容、图片、视频等数据系网络收集，部分未能与原作者取得联系。若涉及版权问题，请联系我们进行删除！谢谢大家！
Uniapp商城小程序/第二十五章：营销利器，优惠券制作
一、功能说明
店铺可以创建通用券和商品券。
商品券可以抵扣一部金额,吸引用户进行购买
二、源码
关注 私信获取
如需远程支撑,源代码部署,应用运行,疑问解答,请关注 私信
三、界面路径
四、数据库模型设计
`id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '优惠券表ID',
`title` varchar(64) NOT NULL COMMENT '优惠券名称',
`integral` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '兑换消耗积分值',
`coupon_price` decimal(8,2) unsigned NOT NULL DEFAULT '0.00' COMMENT '兑换的优惠券面值',
`use_min_price` decimal(8,2) unsigned NOT NULL DEFAULT '0.00' COMMENT '最低消费多少金额可用优惠券',
`coupon_time` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '优惠券有效期限(单位:天)',
`sort` int(11) unsigned NOT NULL DEFAULT '1' COMMENT '排序',
`status` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '状态(0:关闭,1:开启)',
`product_id` varchar(200) DEFAULT NULL COMMENT '商品ids',
`type` tinyint(255) DEFAULT '0' COMMENT '优惠券类型 0-通用 1-商品券',
`create_time` datetime NOT NULL COMMENT '兑换项目添加时间',
`update_time` datetime DEFAULT NULL,
`is_del如何自己制作优惠券图片app` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '是否删除',
PRIMARY KEY (`id`) USING BTREE,
KEY `state` (`status`) USING BTREE,
KEY `add_time` (`create_time`) USING BTREE,
KEY `coupon_time` (`coupon_time`) USING BTREE,
KEY `is_del` (`is_del`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC COMMENT='优惠券表';
五、前端代码开发
实现优惠券使用两个页面实现,第一个页面是列表展示,使用table表格。另外一个页面是表单页面,输入优惠券类型,优惠券金额等,提交新增或者修改优惠券记录。
5.1、优惠券列表展示
{{ scope.row.couponTime }}天
{{ scope.row.createTime }}
如上述第一行代码,使用el-table做数据表格展示
如上述第8,9行代码,使用v-if判断券的类型,如果是1是商品券,否则是全场券。
import eForm from './form'
import eIForm from '../couponissue/form'
如上述代码,是引用了两个组件,两个组件的路径分别是上述第5,6行代码
如上述是表单页面代码,如上述第一行代码,使用dialog,弹窗模式
如上述第34行代码,用户输入表单信息后,点击按钮确认,执行绑定事件doSubmit
doSubmit() {
this.loading = true
if (this.isAdd) {
this.doAdd()
} else this.doEdit()
},
doAdd() {
add(this.form).then(res => {
this.resetForm()
this.$notify({
title: '添加成功',
type: 'success',
duration: 2500
})
this.loading = false
this.$parent.init()
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
},
doEdit() {
edit(this.form).then(res => {
this.resetForm()
this.$notify({
title: '修改成功',
type: 'success',
duration: 2500
})
this.loading = false
this.$parent.init()
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
},
如上述是表单提交处理事件,将数据提交给后台接口,后台接口更新或者插入表单数据
六、api接口实现
@Log("查询")
@ApiOperation(value = "查询")
@GetMapping(value = "/yxStoreCoupon")
@PreAuthorize("@el.check('admin','YXSTORECOUPON_ALL','YXSTORECOUPON_SELECT')")
public ResponseEntity getYxStoreCoupons(YxStoreCouponQueryCriteria criteria, Pageable pageable){
return new ResponseEntity<>(yxStoreCouponService.queryAll(criteria,pageable),HttpStatus.OK);
}
@Log("新增")
@ApiOperation(value = "新增")
@PostMapping(value = "/yxStoreCoupon")
@PreAuthorize("@el.check('admin','YXSTORECOUPON_ALL','YXSTORECOUPON_CREATE')")
public ResponseEntity create(@Validated @RequestBody YxStoreCoupon resources){
if(CouponEnum.TYPE_1.getValue().equals(resources.getType())
本站涵盖的内容、图片、视频等数据系网络收集，部分未能与原作者取得联系。若涉及版权问题，请联系我们进行删除！谢谢大家！