39 changed files with 6852 additions and 281 deletions
@ -0,0 +1,652 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
|
|||
/** |
|||
* todo 优惠券API |
|||
*/ |
|||
|
|||
/** |
|||
* 优惠券 -- 列表 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function GET_couponManagement_LIST(params) { |
|||
return request({ |
|||
url: "/api/admin/coupons", |
|||
method: 'get', |
|||
params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 优惠券 -- 新建 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function POST_coupons(params) { |
|||
return request({ |
|||
url: "/api/admin/coupons", |
|||
method: 'post', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 优惠券 -- 更新 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function PUT_coupons(params) { |
|||
return request({ |
|||
url: "/api/admin/coupons?id=" + params.id, |
|||
method: 'put', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 优惠券 -- 详情 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function DETAIL_coupons(params) { |
|||
return request({ |
|||
url: "/api/admin/coupons/detail?id=" + params, |
|||
method: 'get', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 优惠券 -- 删除 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function DELETE_coupons(params) { |
|||
return request({ |
|||
url: "/api/admin/coupons?id=" + params, |
|||
method: 'delete', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 优惠券 -- 总数 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function COUNT_coupons(params) { |
|||
return request({ |
|||
url: "/api/admin/coupons/count", |
|||
method: 'get', |
|||
params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 优惠券 -- 开始投放 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function ENABLE_coupons(params) { |
|||
return request({ |
|||
url: "/api/admin/coupons/enable?id=" + params, |
|||
method: 'post' |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 优惠券 -- 暂停投放 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function DISABLE_coupons(params) { |
|||
return request({ |
|||
url: "/api/admin/coupons/disable?id=" + params, |
|||
method: 'post' |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 优惠券 -- 调整库存 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function updateStock_coupons(params) { |
|||
return request({ |
|||
url: "/api/admin/coupons/updateStock", |
|||
method: 'post', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* TODO 新手有礼API |
|||
*/ |
|||
|
|||
|
|||
/** |
|||
* 新手有礼 -- 列表 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function GET_couponOffers_LIST(params) { |
|||
return request({ |
|||
url: "/api/admin/couponOffers", |
|||
method: 'get', |
|||
params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 新手有礼 -- 新建 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function POST_couponOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/couponOffers", |
|||
method: 'post', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 新手有礼 -- 更新 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function PUT_couponOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/couponOffers?id=" + params.id, |
|||
method: 'put', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 新手有礼 -- 详情 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function DETAIL_couponOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/couponOffers/detail?id=" + params, |
|||
method: 'get', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 新手有礼 -- 删除 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function DELETE_couponOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/couponOffers?id=" + params, |
|||
method: 'delete' |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 新手有礼 -- 总数 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function COUNT_couponOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/couponOffers/count", |
|||
method: 'get', |
|||
params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 新手有礼 -- 失效 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function disable_couponOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/couponOffers/disable?id=" + params, |
|||
method: 'post' |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* TODO 支付有礼API |
|||
*/ |
|||
|
|||
|
|||
/** |
|||
* 支付有礼 -- 列表 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function GET_payGiftOffers_LIST(params) { |
|||
return request({ |
|||
url: "/api/admin/payGiftOffers", |
|||
method: 'get', |
|||
params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 支付有礼 -- 新建 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function POST_payGiftOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/payGiftOffers", |
|||
method: 'post', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 支付有礼 -- 更新 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function PUT_payGiftOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/payGiftOffers?id="+ params.id, |
|||
method: 'put', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 支付有礼 -- 详情 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function DETAIL_payGiftOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/payGiftOffers/detail?id=" + params, |
|||
method: 'get', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 支付有礼 -- 删除 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function DELETE_payGiftOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/payGiftOffers?id=" + params, |
|||
method: 'delete' |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 支付有礼 -- 总数 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function COUNT_payGiftOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/payGiftOffers/count", |
|||
method: 'get', |
|||
params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
|
|||
/** |
|||
* 支付有礼 -- 失效 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function disable_payGiftOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/payGiftOffers/disable?id=" + params, |
|||
method: 'post' |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
/** |
|||
* TODO 促销活动API |
|||
*/ |
|||
|
|||
|
|||
/** |
|||
* 促销活动 -- 列表 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function GET_discountOffers_LIST(params) { |
|||
return request({ |
|||
url: "/api/admin/discountOffers", |
|||
method: 'get', |
|||
params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 促销活动 -- 新建 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function POST_discountOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/discountOffers", |
|||
method: 'post', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 促销活动 -- 更新 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function PUT_discountOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/discountOffers?id="+ params.id, |
|||
method: 'put', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 促销活动 -- 详情 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function DETAIL_discountOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/discountOffers/detail?id=" + params, |
|||
method: 'get', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 促销活动 -- 删除 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function DELETE_discountOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/discountOffers?id=" + params, |
|||
method: 'delete' |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 促销活动 -- 总数 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function COUNT_discountOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/discountOffers/count", |
|||
method: 'get', |
|||
params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
|
|||
/** |
|||
* 促销活动 -- 失效 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function disable_discountOffers(params) { |
|||
return request({ |
|||
url: "/api/admin/discountOffers/disable?id=" + params, |
|||
method: 'post' |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
/** |
|||
* TODO 幸运免单API |
|||
*/ |
|||
|
|||
|
|||
/** |
|||
* 幸运免单 -- 列表 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function GET_luckfree_LIST(params) { |
|||
return request({ |
|||
url: "/api/admin/luckfree", |
|||
method: 'get', |
|||
params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 幸运免单 -- 新建 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function POST_luckfree(params) { |
|||
return request({ |
|||
url: "/api/admin/luckfree", |
|||
method: 'post', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 幸运免单 -- 更新 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function PUT_luckfree(params) { |
|||
return request({ |
|||
url: "/api/admin/luckfree?id="+ params.id, |
|||
method: 'put', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 幸运免单 -- 详情 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function DETAIL_luckfree(params) { |
|||
return request({ |
|||
url: "/api/admin/luckfree/detail?id=" + params, |
|||
method: 'get', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 幸运免单 -- 删除 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function DELETE_luckfree(params) { |
|||
return request({ |
|||
url: "/api/admin/luckfree?id=" + params, |
|||
method: 'delete' |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 幸运免单 -- 总数 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function COUNT_luckfree(params) { |
|||
return request({ |
|||
url: "/api/admin/luckfree/count", |
|||
method: 'get', |
|||
params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
|
|||
/** |
|||
* 幸运免单 -- 失效 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function disable_luckfree(params) { |
|||
return request({ |
|||
url: "/api/admin/luckfree/disable?id=" + params, |
|||
method: 'post' |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
/** |
|||
* 幸运免单 -- 计算 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function luckfree_calculate(params) { |
|||
return request({ |
|||
url: "/api/admin/luckfree/calculate", |
|||
method: 'post', |
|||
data:params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
/** |
|||
* TODO 抽奖活动API |
|||
*/ |
|||
|
|||
|
|||
/** |
|||
* 抽奖活动 -- 列表 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function GET_lottery_LIST(params) { |
|||
return request({ |
|||
url: "/api/admin/lottery", |
|||
method: 'get', |
|||
params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 抽奖活动 -- 新建 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function POST_lottery(params) { |
|||
return request({ |
|||
url: "/api/admin/lottery", |
|||
method: 'post', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 抽奖活动 -- 更新 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function PUT_lottery(params) { |
|||
return request({ |
|||
url: "/api/admin/lottery?id="+ params.id, |
|||
method: 'put', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 抽奖活动 -- 详情 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function DETAIL_lottery(params) { |
|||
return request({ |
|||
url: "/api/admin/lottery/detail?id=" + params, |
|||
method: 'get', |
|||
data: params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
/** |
|||
* 抽奖活动 -- 删除 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function DELETE_lottery(params) { |
|||
return request({ |
|||
url: "/api/admin/lottery?id=" + params, |
|||
method: 'delete' |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 抽奖活动 -- 总数 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function COUNT_lottery(params) { |
|||
return request({ |
|||
url: "/api/admin/lottery/count", |
|||
method: 'get', |
|||
params |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
|
|||
/** |
|||
* 抽奖活动 -- 失效 |
|||
* @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>} |
|||
* @constructor |
|||
*/ |
|||
export function disable_lottery(params) { |
|||
return request({ |
|||
url: "/api/admin/lottery/disable?id=" + params, |
|||
method: 'post' |
|||
}).then(res => res.data.data) |
|||
} |
|||
|
|||
|
|||
|
File diff suppressed because one or more lines are too long
@ -1,7 +1,8 @@ |
|||
export const BASE_API = "https://rapapi.renqilai.com/app/mock/39"; |
|||
// export const BASE_API = "https://rapapi.renqilai.com/app/mock/39";
|
|||
|
|||
export const client_id = 'test' |
|||
export const client_secret = "test" |
|||
// export const BASE_API = "http://192.168.0.222:8080"
|
|||
export const BASE_API = "https://quxiaapi.renqilai.com" |
|||
|
|||
export const pageSize = 20 |
|||
|
@ -0,0 +1,18 @@ |
|||
import Layout from '@/views/layout/Layout' |
|||
|
|||
const commodityManagement1 = { |
|||
path: '/commodityManagement1', |
|||
component: Layout, |
|||
meta: {title: '商品管理', icon: 'shangpinguanli', noCache: true, affix: false}, |
|||
children: [ |
|||
{ |
|||
path: '/commodityManagement1/commodityManagement1', |
|||
component: () => import('@/views/commodityManagement/commodityClassification1/index'), |
|||
name: '商品分类', |
|||
meta: {title: '商品分类', noCache: false, affix: false}, |
|||
|
|||
} |
|||
] |
|||
}; |
|||
|
|||
export default commodityManagement1 |
@ -0,0 +1,100 @@ |
|||
import Layout from '@/views/layout/Layout' |
|||
|
|||
const marketingCenter = { |
|||
path: '/marketingCenter', |
|||
component: Layout, |
|||
meta: {title: '营销中心', icon: 'yunyingguanli', noCache: true, affix: false}, |
|||
children: [ |
|||
{ |
|||
path: '/marketingCenter/couponManagement', |
|||
component: () => import('@/views/marketingCenter/couponManagement/index'), |
|||
name: '优惠券管理', |
|||
/* affix: true 一直固定不关闭 */ |
|||
meta: {title: '优惠券管理', noCache: false, affix: false} |
|||
}, |
|||
{ |
|||
path: '/marketingCenter/couponManagement/couponDetails', |
|||
component: () => import('@/views/marketingCenter/couponManagement/couponDetails'), |
|||
name: '优惠券新增/编辑', |
|||
hidden: true, |
|||
/* affix: true 一直固定不关闭 */ |
|||
meta: {title: '优惠券新增/编辑', noCache: false, affix: false} |
|||
}, |
|||
{ |
|||
path: '/marketingCenter/noviceCourtesy', |
|||
component: () => import('@/views/marketingCenter/noviceCourtesy/index'), |
|||
name: '新手有礼', |
|||
/* affix: true 一直固定不关闭 */ |
|||
meta: {title: '新手有礼', noCache: false, affix: false} |
|||
}, |
|||
{ |
|||
path: '/marketingCenter/noviceCourtesy/noviceCourtesyDetails', |
|||
component: () => import('@/views/marketingCenter/noviceCourtesy/noviceCourtesyDetails'), |
|||
name: '新手有礼新增/编辑', |
|||
hidden: true, |
|||
/* affix: true 一直固定不关闭 */ |
|||
meta: {title: '新手有礼新增/编辑', noCache: false, affix: false} |
|||
}, |
|||
{ |
|||
path: '/marketingCenter/paymentOfCourtesy', |
|||
component: () => import('@/views/marketingCenter/paymentOfCourtesy/index'), |
|||
name: '支付有礼', |
|||
/* affix: true 一直固定不关闭 */ |
|||
meta: {title: '支付有礼', noCache: false, affix: false} |
|||
}, |
|||
{ |
|||
path: '/marketingCenter/paymentOfCourtesy/paymentOfCourtesyDetails', |
|||
component: () => import('@/views/marketingCenter/paymentOfCourtesy/paymentOfCourtesyDetails'), |
|||
name: '支付有礼新增/编辑', |
|||
hidden: true, |
|||
/* affix: true 一直固定不关闭 */ |
|||
meta: {title: '支付有礼新增/编辑', noCache: false, affix: false} |
|||
}, |
|||
{ |
|||
path: '/marketingCenter/salesPromotion', |
|||
component: () => import('@/views/marketingCenter/salesPromotion/index'), |
|||
name: '促销活动', |
|||
/* affix: true 一直固定不关闭 */ |
|||
meta: {title: '促销活动', noCache: false, affix: false} |
|||
}, |
|||
{ |
|||
path: '/marketingCenter/salesPromotion/salesPromotionDetails', |
|||
component: () => import('@/views/marketingCenter/salesPromotion/salesPromotionDetails'), |
|||
name: '促销活动新增/编辑', |
|||
hidden: true, |
|||
/* affix: true 一直固定不关闭 */ |
|||
meta: {title: '促销活动新增/编辑', noCache: false, affix: false} |
|||
}, |
|||
{ |
|||
path: '/marketingCenter/luckyFree', |
|||
component: () => import('@/views/marketingCenter/luckyFree/index'), |
|||
name: '幸运免单', |
|||
/* affix: true 一直固定不关闭 */ |
|||
meta: {title: '幸运免单', noCache: false, affix: false} |
|||
}, |
|||
{ |
|||
path: '/marketingCenter/luckyFree/luckyFreeDetails', |
|||
component: () => import('@/views/marketingCenter/luckyFree/luckyFreeDetails'), |
|||
name: '幸运免单新增/编辑', |
|||
hidden: true, |
|||
/* affix: true 一直固定不关闭 */ |
|||
meta: {title: '幸运免单新增/编辑', noCache: false, affix: false} |
|||
}, |
|||
{ |
|||
path: '/marketingCenter/luckyDraw', |
|||
component: () => import('@/views/marketingCenter/luckyDraw/index'), |
|||
name: '抽奖活动', |
|||
/* affix: true 一直固定不关闭 */ |
|||
meta: {title: '抽奖活动', noCache: false, affix: false} |
|||
}, |
|||
{ |
|||
path: '/marketingCenter/luckyDraw/luckyDrawDetails', |
|||
component: () => import('@/views/marketingCenter/luckyDraw/luckyDrawDetails'), |
|||
name: '抽奖活动新增/编辑', |
|||
hidden: true, |
|||
/* affix: true 一直固定不关闭 */ |
|||
meta: {title: '抽奖活动新增/编辑', noCache: false, affix: false} |
|||
}, |
|||
] |
|||
}; |
|||
export default marketingCenter |
@ -0,0 +1,164 @@ |
|||
<template> |
|||
<div class="selector"> |
|||
<div class="el-input1"> |
|||
<el-input placeholder="搜索" @keyup.enter.native="onEnter" v-model="params.query" size="small" type="text" |
|||
class=""/> |
|||
</div> |
|||
<div class="selector-check selector-check1" @scroll="scrollEvent"> |
|||
<ul> |
|||
<li v-for="(item,index) in list" :key="index"> |
|||
<el-checkbox @change="change(item.id,item.checked)" v-model="item.checked"> |
|||
<div class="lis"> |
|||
<img :src="item.image" alt=""> |
|||
<div> |
|||
<p>名称: {{item.name}}</p> |
|||
<p>成本价: ¥{{item.costPrice}}</p> |
|||
</div> |
|||
</div> |
|||
</el-checkbox> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {EQUIPMENT} from '@/api/advertisingManagement' |
|||
import {GET_LIST} from '@/api/commodityManagement' |
|||
|
|||
export default { |
|||
name: "elTransfer", |
|||
data() { |
|||
return { |
|||
list: [], |
|||
params: { |
|||
size: 10, |
|||
from: 0, |
|||
query: '' |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
GET_LIST(this.params).then(res => { |
|||
if (res.length){ |
|||
res.map((item) => { |
|||
item.checked = false; |
|||
return item; |
|||
}); |
|||
this.list = [...this.list, ...res]; |
|||
} |
|||
}) |
|||
}, |
|||
change(id, checked) { |
|||
if (checked) { |
|||
let list = this.list.map((item) => { |
|||
if (id == item.id) { |
|||
item.checked = true |
|||
} |
|||
return item; |
|||
}); |
|||
this.list = list; |
|||
} else { |
|||
let list = this.list.map((item) => { |
|||
if (id == item.id) { |
|||
item.checked = false |
|||
} |
|||
return item; |
|||
}); |
|||
this.list = list; |
|||
} |
|||
|
|||
|
|||
}, |
|||
scrollEvent(e) { |
|||
if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight) { |
|||
this.params = { |
|||
...this.params, |
|||
from: this.params.from + this.params.size, |
|||
}; |
|||
this.getList() |
|||
} |
|||
|
|||
}, |
|||
onEnter() { |
|||
this.params = { |
|||
size: 10, |
|||
from: 0, |
|||
query: this.params.query |
|||
}; |
|||
this.list = []; |
|||
this.getList() |
|||
} |
|||
}, |
|||
|
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss"> |
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.selector { |
|||
margin-top: 10px; |
|||
border-radius: 4px; |
|||
height: 500px; |
|||
border: 1px solid #d9d9d9; |
|||
|
|||
.el-input1 { |
|||
margin: 10px; |
|||
} |
|||
|
|||
.selector-check { |
|||
height: calc(100% - 55px); |
|||
border-top: 1px solid #d9d9d9; |
|||
padding: 15px; |
|||
overflow: auto; |
|||
|
|||
ul { |
|||
padding: 0; |
|||
margin: 0; |
|||
|
|||
li { |
|||
list-style: none; |
|||
padding: 5px 0; |
|||
|
|||
.el-checkbox__input { |
|||
vertical-align: super; |
|||
} |
|||
|
|||
.lis{ |
|||
display: flex; |
|||
img,div{ |
|||
flex: 1; |
|||
} |
|||
img{ |
|||
width: 80px; |
|||
height: 80px; |
|||
} |
|||
div{ |
|||
margin-left: 10px; |
|||
line-height: 40px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.selector-check1{ |
|||
.el-checkbox__input{ |
|||
position: relative; |
|||
top: -30px; |
|||
} |
|||
} |
|||
|
|||
</style> |
@ -0,0 +1,429 @@ |
|||
<template> |
|||
<div class="classification"> |
|||
<p>商品分类</p> |
|||
<div class="classification-list"> |
|||
<draggable tag="ul" handle=".handleMove" :sort="isSort" v-model="lists" @update="itemDragEnd"> |
|||
<li :class="{'select':item.isSel}" @click="liItemClick(item.id,item.edit,item.products)" |
|||
v-for="(item,index) in lists"> |
|||
<span class="handleMove"> |
|||
<svg-icon icon-class="move"></svg-icon> |
|||
</span> |
|||
<div class="info" v-show="!item.edit"> |
|||
<p>{{item.name}}</p> |
|||
<p>{{item.products}}件商品</p> |
|||
<el-button type="primary" @click.stop="editItem(index)">编辑 |
|||
</el-button> |
|||
</div> |
|||
<div class="edit" v-show="item.edit"> |
|||
<p>{{titleName}}</p> |
|||
<div class="demo-input-suffix"> |
|||
<span>分类名称:</span> |
|||
<el-input |
|||
placeholder="" |
|||
@focus.stop="itemfoucsValue(item.name)" |
|||
v-model="item.name"> |
|||
</el-input> |
|||
</div> |
|||
<div class="opiItem"> |
|||
<el-button type="danger" @click.stop="removeItem(index)">删除分类</el-button> |
|||
<div> |
|||
<el-button @click.stop="cancelItem(index)">取消</el-button> |
|||
<el-button type="primary" @click.stop="confirmItem(index)">确认</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
<li @click="addList" class="addList"> |
|||
<p> |
|||
<svg-icon icon-class="plus1"></svg-icon> |
|||
</p> |
|||
添加分类 |
|||
</li> |
|||
</draggable> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import draggable from 'vuedraggable' |
|||
import Alert from "@/utils/alert"; |
|||
import { |
|||
GET_LIST_CATEGORIES, |
|||
POST_CATEGORIES, |
|||
UPDATE_CATEGORIES, |
|||
DELETE_CATEGORIES, |
|||
ORDERS_CATEGORIES |
|||
} from '@/api/commodityManagement' |
|||
|
|||
export default { |
|||
name: "classification", |
|||
data() { |
|||
return { |
|||
index: 0, |
|||
isAdd: false, |
|||
isSort: true, |
|||
titleName: '添加分类', |
|||
temporaryValue: '', |
|||
lists: [] |
|||
} |
|||
}, |
|||
props: ['params', 'success'], |
|||
components: { |
|||
draggable |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
}, |
|||
watch: { |
|||
params() { |
|||
this.getList(this.params) |
|||
}, |
|||
success() { |
|||
setTimeout(() => { |
|||
this.getList(this.params) |
|||
}, 100); |
|||
} |
|||
}, |
|||
methods: { |
|||
getList(params) { |
|||
let idx = this.index; |
|||
GET_LIST_CATEGORIES(params).then(res => { |
|||
res.map((item, index) => { |
|||
item.edit = false; |
|||
item.isSel = false; |
|||
if (index === idx) { |
|||
item.isSel = true; |
|||
} |
|||
return item |
|||
}); |
|||
this.lists = res; |
|||
this.$emit('currId', this.lists[idx].id); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 添加分类 |
|||
*/ |
|||
addList() { |
|||
if (!this.isAdd) { |
|||
let item = { |
|||
id: '', |
|||
products: 0, |
|||
edit: true, |
|||
name: '' |
|||
}; |
|||
this.lists.push(item); |
|||
} else { |
|||
Alert.fail("请先添加完分类"); |
|||
} |
|||
|
|||
this.isAdd = true; |
|||
}, |
|||
|
|||
/** |
|||
* 事件点击 |
|||
*/ |
|||
liItemClick(id, edit, products) { |
|||
if (!edit) { |
|||
let lists = this.lists.map((item, index) => { |
|||
item.isSel = false; |
|||
if (id == item.id) { |
|||
item.isSel = true; |
|||
this.index = index; |
|||
} |
|||
return item |
|||
}); |
|||
this.$emit('currId', id); |
|||
this.$emit('products', products); |
|||
this.lists = lists; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 拖动结束 |
|||
*/ |
|||
itemDragEnd() { |
|||
let ids = []; |
|||
for (let i = 0; i < this.lists.length; i++) { |
|||
ids.push(this.lists[i].id) |
|||
} |
|||
let params = { |
|||
ids: ids |
|||
}; |
|||
ORDERS_CATEGORIES(params).then(res => { |
|||
Alert.success("排序成功"); |
|||
}); |
|||
}, |
|||
itemfoucsValue(val) { |
|||
this.temporaryValue = val |
|||
}, |
|||
/** |
|||
* 编辑 |
|||
* @param currIndex |
|||
*/ |
|||
editItem(currIndex) { |
|||
this.isSort = false; |
|||
let lists = this.lists.map((item, index) => { |
|||
if (currIndex == index) { |
|||
item.edit = true |
|||
} |
|||
return item |
|||
}); |
|||
this.titleName = '编辑名称'; |
|||
this.lists = lists; |
|||
}, |
|||
/** |
|||
* 删除 |
|||
* @param currIndex |
|||
*/ |
|||
removeItem(currIndex) { |
|||
let that = this; |
|||
this.$confirm('确定删除此分类嘛?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
let params = { |
|||
id: that.lists[currIndex].id |
|||
}; |
|||
DELETE_CATEGORIES(params).then((res) => { |
|||
let lists = []; |
|||
that.lists.map((item, index) => { |
|||
if (currIndex != index) { |
|||
lists.push(item) |
|||
} |
|||
return item |
|||
}); |
|||
that.lists = lists; |
|||
that.isSort = true; |
|||
that.titleName = '添加分类'; |
|||
that.isAdd = false; |
|||
Alert.success("删除成功"); |
|||
setTimeout(() => { |
|||
that.getList(that.params) |
|||
}, 100); |
|||
|
|||
}); |
|||
|
|||
}) |
|||
|
|||
}, |
|||
/** |
|||
* 取消 |
|||
* @param currIndex |
|||
*/ |
|||
cancelItem(currIndex) { |
|||
let that = this; |
|||
let lists = []; |
|||
this.lists.map((item, index) => { |
|||
if (currIndex == index) { |
|||
item.edit = false; |
|||
item.name = that.temporaryValue || item.name |
|||
} |
|||
|
|||
if (item.id) { |
|||
lists.push(item) |
|||
} |
|||
return item |
|||
}); |
|||
this.lists = lists; |
|||
this.isSort = true; |
|||
this.isAdd = false; |
|||
}, |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param currIndex |
|||
*/ |
|||
confirmItem(currIndex) { |
|||
let that = this; |
|||
if (this.lists[currIndex].name) { |
|||
let params = { |
|||
id: this.lists[currIndex].id, |
|||
name: this.lists[currIndex].name |
|||
}; |
|||
if (!this.lists[currIndex].id) { |
|||
POST_CATEGORIES(params).then(res => { |
|||
let lists = that.lists.map((item, index) => { |
|||
item.edit = false; |
|||
return item |
|||
}); |
|||
that.lists = lists; |
|||
that.isSort = true; |
|||
that.isAdd = false; |
|||
Alert.success("新增成功"); |
|||
}); |
|||
} else { |
|||
UPDATE_CATEGORIES(params).then(res => { |
|||
let lists = that.lists.map((item, index) => { |
|||
item.edit = false; |
|||
return item |
|||
}); |
|||
that.lists = lists; |
|||
that.isSort = true; |
|||
that.isAdd = false; |
|||
Alert.success("更新成功"); |
|||
}); |
|||
} |
|||
setTimeout(() => { |
|||
that.getList(that.params) |
|||
}, 1000) |
|||
|
|||
} else { |
|||
Alert.fail("请添写分类名称"); |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
* { |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
|
|||
.classification { |
|||
margin-top: 20px; |
|||
background: #fff; |
|||
padding: 20px; |
|||
|
|||
.classification-list { |
|||
overflow: hidden; |
|||
|
|||
ul { |
|||
overflow: hidden; |
|||
|
|||
li { |
|||
position: relative; |
|||
border: 1px solid #ebeef5; |
|||
cursor: pointer; |
|||
margin: 10px; |
|||
list-style: none; |
|||
float: left; |
|||
width: 170px; |
|||
height: 190px; |
|||
background: rgba(255, 255, 255, 1); |
|||
opacity: 1; |
|||
border-radius: 5px; |
|||
|
|||
.el-button--medium { |
|||
font-size: 12px; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.handleMove { |
|||
position: absolute; |
|||
top: 5px; |
|||
right: 5px; |
|||
cursor: move; |
|||
} |
|||
|
|||
.info { |
|||
|
|||
p { |
|||
padding: 5px; |
|||
} |
|||
|
|||
button { |
|||
border-radius: 0; |
|||
/*border-bottom-left-radius: 5px;*/ |
|||
/*border-bottom-right-radius: 5px;*/ |
|||
} |
|||
} |
|||
|
|||
.edit { |
|||
height: 100%; |
|||
position: relative; |
|||
|
|||
> p:nth-child(1) { |
|||
width: 100%; |
|||
padding: 10px; |
|||
border-bottom: 1px solid #ebeef5; |
|||
} |
|||
|
|||
.demo-input-suffix { |
|||
padding: 10px; |
|||
|
|||
span { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.el-input { |
|||
width: 59%; |
|||
} |
|||
} |
|||
|
|||
.opiItem { |
|||
width: 100%; |
|||
font-size: 12px; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
display: flex; |
|||
|
|||
button, div { |
|||
flex: 1; |
|||
} |
|||
|
|||
> button { |
|||
margin-right: 5px; |
|||
position: initial; |
|||
border-radius: 0; |
|||
} |
|||
|
|||
div { |
|||
display: flex; |
|||
|
|||
button { |
|||
position: initial; |
|||
flex: 1; |
|||
border-radius: 0; |
|||
} |
|||
|
|||
.el-button + .el-button { |
|||
margin-left: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
li.cursorMove { |
|||
cursor: move; |
|||
} |
|||
|
|||
li.select { |
|||
box-shadow: 0px 5px 10px 8px #d9d9d9; |
|||
} |
|||
|
|||
li:last-child { |
|||
cursor: pointer; |
|||
line-height: normal; |
|||
padding-top: 50px; |
|||
|
|||
p { |
|||
padding-top: 10px; |
|||
svg { |
|||
font-size: 35px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.addList { |
|||
line-height: 165px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,219 @@ |
|||
<template> |
|||
<div> |
|||
<div class="table"> |
|||
<el-row> |
|||
<el-button type="primary" @click="addMerchandise=true,id='',isSel=true"> |
|||
添加商品 |
|||
</el-button> |
|||
</el-row> |
|||
<el-table |
|||
:data="lists" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="name" |
|||
label="图片"> |
|||
<template slot-scope="scope"> |
|||
<img :src="scope.row.image" min-width="70" width="70" height="70"/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="name" |
|||
label="商品名称"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="costPrice" |
|||
label="成本价"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
label="操作" |
|||
> |
|||
<template slot-scope="lists"> |
|||
<span |
|||
type="text" |
|||
size="small" |
|||
class="option-span" |
|||
@click="removeItem(lists.row.id)" |
|||
> |
|||
删除 |
|||
</span> |
|||
|
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="params.size" |
|||
layout="prev, pager, next" |
|||
:total="count" |
|||
@current-change="currentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-dialog |
|||
width="400px" |
|||
:visible.sync="addMerchandise"> |
|||
<add-equipment v-if="isSel" ref="transfer"></add-equipment> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="addMerchandise = false,isSel=false">取消</el-button> |
|||
<el-button type="primary" @click="determine">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {GET_LIST, DELETE_ITEM, PRODUCTS_CATEGORIES, DELETE_CATEGORIES_PRODUCTS} from '@/api/commodityManagement' |
|||
|
|||
import Alert from "@/utils/alert"; |
|||
import {pageSize} from '../../../config'; |
|||
import AddEquipment from "./addEquipment.vue" |
|||
|
|||
const FormContainer = () => import('../form.vue'); |
|||
const CommodityDetails = () => import('../productList/commodityDetails.vue'); |
|||
|
|||
export default { |
|||
name: "productList", |
|||
data() { |
|||
return { |
|||
count: 0, |
|||
isSel: true, |
|||
isLoading: false, |
|||
addMerchandise: false, |
|||
lists: [], |
|||
id: '', |
|||
params: { |
|||
from: 0, |
|||
size: pageSize |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
}, |
|||
props: ['classifyId', 'productsCount'], |
|||
components: { |
|||
FormContainer, |
|||
CommodityDetails, |
|||
AddEquipment |
|||
}, |
|||
watch: { |
|||
classifyId() { |
|||
this.params = { |
|||
from: 0, |
|||
size: pageSize |
|||
} |
|||
this.getList(this.classifyId); |
|||
}, |
|||
productsCount(val) { |
|||
this.count = val |
|||
} |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 获取列表数据 |
|||
*/ |
|||
getList(classifyId) { |
|||
if (classifyId) { |
|||
let params = { |
|||
...this.params, |
|||
categoryId: classifyId |
|||
}; |
|||
GET_LIST(params).then(res => { |
|||
res.map((item) => { |
|||
|
|||
return item |
|||
}); |
|||
this.lists = res |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 删除商品 |
|||
*/ |
|||
removeItem(id) { |
|||
this.$confirm('确定删除此商品嘛?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
let params = { |
|||
productId: id, |
|||
categoryId: this.classifyId |
|||
}; |
|||
DELETE_CATEGORIES_PRODUCTS(params).then((res) => { |
|||
let lists = []; |
|||
this.lists.map((item) => { |
|||
if (item.id != id) { |
|||
lists.push(item) |
|||
} |
|||
return item; |
|||
}); |
|||
this.lists = lists; |
|||
this.$emit('$success') |
|||
}); |
|||
Alert.success("删除成功"); |
|||
}).catch(() => { |
|||
|
|||
}) |
|||
}, |
|||
determine() { |
|||
let that = this; |
|||
let products = []; |
|||
this.$refs.transfer.list.map((item) => { |
|||
if (item.checked) { |
|||
products.push(item.id) |
|||
} |
|||
return item |
|||
}); |
|||
let params = { |
|||
id: this.classifyId, |
|||
products: products |
|||
}; |
|||
PRODUCTS_CATEGORIES(params).then(res => { |
|||
Alert.success("添加成功"); |
|||
that.getList(that.classifyId); |
|||
that.$emit('$success') |
|||
}); |
|||
this.addMerchandise = false; |
|||
this.isSel = false; |
|||
}, |
|||
|
|||
/** |
|||
* 翻页 |
|||
*/ |
|||
currentChange(res) { |
|||
this.params = { |
|||
from: parseInt(res - 1) * this.params.size, |
|||
size: pageSize, |
|||
}; |
|||
this.getList(this.classifyId) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.table { |
|||
margin-top: 20px; |
|||
padding: 30px; |
|||
background: #fff; |
|||
|
|||
.option-span { |
|||
color: #409EFF; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.pagination { |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
@ -0,0 +1,68 @@ |
|||
<template> |
|||
<div> |
|||
<form-container label="分类名称" @submit="submitForm" @resetForm="resetForm"></form-container> |
|||
<classification :params="params" @currId="currId" @products="products" :success="refresh"></classification> |
|||
<classification-list :classifyId="classifyId" :productsCount="productsCount" @$success="refreshList"></classification-list> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
const FormContainer = () => import('../form.vue'); |
|||
const Classification = () => import('./classification.vue'); |
|||
const ClassificationList = () => import('./classificationList.vue'); |
|||
export default { |
|||
name: "commodityClassification1", |
|||
data() { |
|||
return { |
|||
refresh: 0, |
|||
classifyId: '', |
|||
productsCount: '', |
|||
list: [], |
|||
params: { |
|||
query: '' |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
FormContainer, |
|||
Classification, |
|||
ClassificationList |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 查询 |
|||
*/ |
|||
submitForm(res) { |
|||
this.params = { |
|||
query: res.name |
|||
}; |
|||
this.$emit('submit', this.params) |
|||
}, |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
resetForm() { |
|||
this.params = { |
|||
query: '' |
|||
}; |
|||
}, |
|||
|
|||
currId(res) { |
|||
this.classifyId = res; |
|||
}, |
|||
products(res) { |
|||
this.productsCount = res; |
|||
}, |
|||
refreshList() { |
|||
|
|||
this.refresh = this.refresh + 1; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
|
|||
</style> |
@ -0,0 +1,388 @@ |
|||
<template> |
|||
<div class="form"> |
|||
<el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm"> |
|||
<el-form-item label="优惠券名称" prop="name" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input v-model="ruleForm.name"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="优惠形式" prop="type"> |
|||
<el-radio-group v-model="ruleForm.type" :disabled="disabled" @change="typeChange"> |
|||
<el-radio label="AMOUNT_OFF">减免</el-radio> |
|||
<el-radio label="DISCOUNT_RATE">打折</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="优惠额度" prop="amount" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<div v-if="ruleForm.type=='AMOUNT_OFF'"> |
|||
<span style="margin-right: 10px;">减免</span> |
|||
<el-input type="number" style="width: 100px" :disabled="disabled" |
|||
v-model="ruleForm.amount"></el-input> |
|||
<span style="margin-left: 10px;">元</span> |
|||
</div> |
|||
<div v-else> |
|||
<span style="margin-right: 10px;">打</span> |
|||
<el-input type="number" style="width: 100px" :disabled="disabled" |
|||
v-model="ruleForm.amount"></el-input> |
|||
<span style="margin-left: 10px;">折</span> |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="使用门槛" prop="minAmount" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
|
|||
<el-checkbox v-model="noThreshold" :disabled="disabled" @change="noThresholdFun">无门槛</el-checkbox> |
|||
|
|||
<div style="display: inline-block" v-if="!noThreshold"> |
|||
<span style="margin:0 10px 0 30px;">订单满</span> |
|||
<el-input style="width: 100px" :disabled="disabled" v-model="ruleForm.minAmount"></el-input> |
|||
<span style="margin-left: 10px;">元使用</span> |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="有效期"> |
|||
<el-radio-group v-model="ruleForm.dateRule" :disabled="disabled"> |
|||
<el-radio label="FIXED">固定时间</el-radio> |
|||
<el-radio label="AFTER_ACQUIRED">领取后*天有效</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="" v-if="ruleForm.dateRule=='FIXED'" prop="date" |
|||
:rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-date-picker |
|||
v-model="date" |
|||
:disabled="disabled" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label=" " v-else prop="validDays" |
|||
:rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input type="number" style="width: 100px" :disabled="disabled" |
|||
v-model="ruleForm.validDays"></el-input> |
|||
<span style="margin-left: 10px;">天</span> |
|||
<span style="margin-left: 10px;font-size: 12px;color: #999;">有效期最后一天23:59</span> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="发放总量" prop="maxStock" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input style="width: 100px" :disabled="disabled" v-model="ruleForm.maxStock"></el-input> |
|||
<span style="margin-left: 10px;">张</span> |
|||
<span style="margin-left: 10px;font-size: 12px;color: #999;">修改优惠券总量时,只能增加不能减少,请谨慎选择</span> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="领取限制"> |
|||
<el-checkbox v-model="noRestriction" :disabled="disabled" @change="noRestrictionFun">不限制</el-checkbox> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="" prop="limitPerCustomer" v-if="!noRestriction" |
|||
:rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<span style="margin-right:10px;">每位用户可领取</span> |
|||
<el-input style="width: 100px" :disabled="disabled" v-model="ruleForm.limitPerCustomer"></el-input> |
|||
<span style="margin-left: 10px;">张优惠券</span> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="选择场地"> |
|||
<el-select v-model="ruleForm.locationIds" :disabled="disabled" placeholder="选择场地" multiple |
|||
:clearable="true"> |
|||
<el-option v-for="item in locationIds" :key="item.id" :label="item.name" |
|||
:value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item style="text-align: center;"> |
|||
<el-button type="primary" @click="submitForm('ruleForm')" :loading="isLoading">提交</el-button> |
|||
<el-button @click="resetForm('ruleForm')">重置</el-button> |
|||
</el-form-item> |
|||
|
|||
|
|||
</el-form> |
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
import {GET_LIST_CATEGORIES} from '@/api/commodityManagement' |
|||
import {GET_LOCATIONS} from '@/api/common' |
|||
import Alert from "@/utils/alert"; |
|||
|
|||
import {mapActions} from "vuex"; |
|||
import { |
|||
POST_coupons as ADD_ITEM, |
|||
PUT_coupons as UPDATE_ITEM, |
|||
DETAIL_coupons as DETAIL_ITEM, |
|||
} from '@/api/marketingCenter' |
|||
|
|||
import {FormateYYMMDD} from "@/filters/index"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
noThreshold: false, // 无门槛 |
|||
noRestriction: false, // 不限制 |
|||
isLoading: false, |
|||
disabled: false, |
|||
date: [], |
|||
locationIds: [], |
|||
ruleForm: { |
|||
id: '', |
|||
name: '', |
|||
type: 'AMOUNT_OFF', |
|||
amount: '', |
|||
minAmount: '', |
|||
dateRule: 'FIXED', |
|||
validDays: '', |
|||
maxStock: '', |
|||
limitPerCustomer: '', |
|||
startDate: '', |
|||
endDate: '', |
|||
date: '', |
|||
locationIds: '' |
|||
} |
|||
}; |
|||
}, |
|||
props: ['currId'], |
|||
computed: { |
|||
id() { |
|||
return this.$route.query.id |
|||
} |
|||
}, |
|||
mounted() { |
|||
if (this.id) { |
|||
this.getDetailItem(); |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
id: this.id |
|||
} |
|||
} |
|||
|
|||
GET_LOCATIONS().then(res => { |
|||
if (this.id) { |
|||
res.unshift({ |
|||
id: 9587, |
|||
name: '全部场地' |
|||
}); |
|||
} |
|||
this.locationIds = res |
|||
}) |
|||
|
|||
|
|||
}, |
|||
watch: { |
|||
date(val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
date: val, |
|||
startDate: FormateYYMMDD(val[0]), |
|||
endDate: FormateYYMMDD(val[1]) |
|||
}; |
|||
} |
|||
}, |
|||
methods: { |
|||
...mapActions([ |
|||
"delVisitedView" |
|||
]), |
|||
/** |
|||
* 获取商品详情 |
|||
*/ |
|||
getDetailItem() { |
|||
DETAIL_ITEM(this.id).then(res => { |
|||
this.date.push(res.startDate); |
|||
this.date.push(res.endDate); |
|||
if (res.minAmount === 0 || !res.minAmount) { |
|||
this.noThreshold = true; |
|||
res.minAmount = 666 |
|||
} |
|||
if (res.limitPerCustomer === 0) { |
|||
this.noRestriction = true |
|||
} |
|||
if (res.locationIds.length === 0) { |
|||
res.locationIds.unshift(9587); |
|||
} |
|||
this.disabled = true; |
|||
this.ruleForm = res; |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 无门槛 |
|||
*/ |
|||
noThresholdFun(val) { |
|||
this.noThreshold = val; |
|||
if (val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minAmount: ' ' |
|||
} |
|||
} else { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minAmount: '' |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
typeChange(val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
amount: '' |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 不限制 |
|||
*/ |
|||
noRestrictionFun(val) { |
|||
this.noRestriction = val; |
|||
}, |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
resetForm() { |
|||
this.$refs['ruleForm'].resetFields(); |
|||
}, |
|||
|
|||
/** |
|||
* 提交 |
|||
*/ |
|||
submitForm() { |
|||
let that = this; |
|||
let couponDetails = this.$refs['ruleForm']; |
|||
couponDetails.validate((val) => { |
|||
if (val) { |
|||
that.isLoading = true; |
|||
if (!that.ruleForm.id) { |
|||
|
|||
ADD_ITEM({...that.ruleForm}).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('新建成功'); |
|||
that.isLoading = false; |
|||
that.delVisitedView(that.$route).then(res => { |
|||
that.$router.go(-1); |
|||
}); |
|||
}, 1500); |
|||
|
|||
}).catch(err=>{ |
|||
that.isLoading = false; |
|||
}) |
|||
} else { |
|||
if (that.ruleForm.minAmount == 666) { |
|||
that.ruleForm.minAmount = '' |
|||
} |
|||
|
|||
if (that.ruleForm.locationIds[0] == 9587) { |
|||
that.ruleForm.locationIds = [] |
|||
} |
|||
UPDATE_ITEM({...that.ruleForm}).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('更新成功'); |
|||
that.isLoading = false; |
|||
that.delVisitedView(that.$route).then(res => { |
|||
that.$router.go(-1); |
|||
}); |
|||
}, 1500); |
|||
|
|||
}).catch(err=>{ |
|||
that.isLoading = false; |
|||
}) |
|||
} |
|||
|
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.form { |
|||
height: 100%; |
|||
background: #fff; |
|||
padding: 30px 30px 30px 0; |
|||
} |
|||
|
|||
.file { |
|||
position: relative; |
|||
top: 0; |
|||
display: inline-block; |
|||
border: 1px solid #e6e6e6; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
color: #1E88C7; |
|||
text-decoration: none; |
|||
text-indent: 0; |
|||
width: 110px; |
|||
height: 140px; |
|||
text-align: center; |
|||
line-height: 85px; |
|||
font-size: 40px; |
|||
|
|||
input { |
|||
position: absolute; |
|||
font-size: 100px; |
|||
right: 0; |
|||
top: 0; |
|||
opacity: 0; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.image { |
|||
width: 110px; |
|||
height: 140px; |
|||
position: relative; |
|||
|
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
i { |
|||
position: absolute; |
|||
top: -6px; |
|||
right: -6px; |
|||
display: inline-block; |
|||
width: 15px; |
|||
height: 15px; |
|||
line-height: 15px; |
|||
text-align: center; |
|||
background: red; |
|||
border-radius: 50%; |
|||
color: #fff; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.el-textarea { |
|||
width: 400px; |
|||
height: 80px; |
|||
resize: none; |
|||
|
|||
&.el-textarea__inner { |
|||
resize: none; |
|||
} |
|||
} |
|||
|
|||
.el-form-item__content { |
|||
position: relative; |
|||
|
|||
.info { |
|||
position: absolute; |
|||
font-size: 12px; |
|||
top: 48px; |
|||
color: #ccc; |
|||
line-height: normal; |
|||
} |
|||
} |
|||
|
|||
</style> |
@ -0,0 +1,60 @@ |
|||
<template> |
|||
<div class="form-container"> |
|||
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|||
<el-form-item :label="label"> |
|||
<el-input v-model="formInline.name" placeholder="名称搜索"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="优惠券类型"> |
|||
<el-select v-model="formInline.type" value="" placeholder="优惠券类型"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option label="减免卷" value="AMOUNT_OFF"></el-option> |
|||
<el-option label="折扣券" value="DISCOUNT_RATE"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="状态"> |
|||
<el-select v-model="formInline.enabled" value="" placeholder="状态"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option label="投放中" value="true"></el-option> |
|||
<el-option label="暂停中" value="false"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item style="padding-left:30px"> |
|||
<el-button type="default" @click="resetForm1('formInline')">重置</el-button> |
|||
<el-button type="primary" @click="onSubmit">查询</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'form-container', |
|||
props:['label'], |
|||
data() { |
|||
return { |
|||
formInline: { |
|||
name: '' |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
onSubmit() { |
|||
this.$emit('submit', this.formInline) |
|||
}, |
|||
resetForm1() { |
|||
this.formInline = { |
|||
name: '' |
|||
}; |
|||
this.$emit('resetForm'); |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.form-container { |
|||
padding: 20px; |
|||
background: #fff; |
|||
} |
|||
</style> |
@ -0,0 +1,491 @@ |
|||
<template> |
|||
<div> |
|||
<form-container label="名称" @submit="submitForm" @resetForm="resetForm"></form-container> |
|||
<div class="table"> |
|||
<el-row> |
|||
<router-link :to="`/marketingCenter/couponManagement/couponDetails`" class="resetWH"> |
|||
<el-button type="primary"> |
|||
添加优惠券 |
|||
</el-button> |
|||
</router-link> |
|||
</el-row> |
|||
<el-table |
|||
:data="lists" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="name" |
|||
label="名称"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
width="100" |
|||
label="类型"> |
|||
<template slot-scope="lists"> |
|||
{{lists.row.type | filterType}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="date" |
|||
label="有效期"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createdDate" |
|||
label="创建时间"> |
|||
<template slot-scope="lists"> |
|||
{{lists.row.createdDate | filterCreatedDate}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
width="100" |
|||
prop="enabled" |
|||
label="状态"> |
|||
<template slot-scope="lists"> |
|||
{{lists.row.enabled | filterEnabled}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="enabled" |
|||
label="库存"> |
|||
<template slot-scope="lists"> |
|||
<p>总库存 {{lists.row.maxStock}} 张</p> |
|||
<p>领取 {{lists.row.acquired}} 张</p> |
|||
<p>库存 {{lists.row.stock}} 张</p> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="enabled" |
|||
label="数据统计"> |
|||
<template slot-scope="lists"> |
|||
<p>累计消费 {{lists.row.orderTotal}} 元</p> |
|||
<p>累计优惠 {{lists.row.totalDiscount}} 元</p> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
label="操作" |
|||
> |
|||
<template slot-scope="lists"> |
|||
<span |
|||
size="small" |
|||
class="option-span" |
|||
style="margin: 0 5px;" |
|||
@click="editItem(lists.row.id)"> |
|||
编辑 |
|||
</span> |
|||
<span |
|||
size="small" |
|||
class="option-span" |
|||
style="margin: 0 5px;" |
|||
@click="adjustment(lists.row)"> |
|||
调整库存 |
|||
</span> |
|||
<span |
|||
size="small" |
|||
class="option-span" |
|||
style="margin: 0 5px;" |
|||
@click="enabledItem(lists.row)"> |
|||
{{lists.row.enabled | filterEnable}} |
|||
</span> |
|||
<span |
|||
type="text" |
|||
size="small" |
|||
class="option-span" |
|||
@click="removeItem(lists.row.id)" |
|||
> |
|||
删除 |
|||
</span> |
|||
|
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="params.size" |
|||
layout="prev, pager, next" |
|||
:total="count" |
|||
@current-change="currentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-dialog |
|||
width="815px" |
|||
:show-close="false" |
|||
top="30px" |
|||
:visible.sync="addMerchandise"> |
|||
<coupon-details ref="couponDetails"></coupon-details> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="resetFormDialog('ruleForm'), addMerchandise = false">取消</el-button> |
|||
<el-button type="primary" @click="determine" :loading="isLoading">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
|
|||
<el-dialog |
|||
width="400px" |
|||
title="调整库存" |
|||
:show-close="false" |
|||
:visible.sync="isAdjustment"> |
|||
|
|||
<div class="adjustment"> |
|||
<div> |
|||
<p class="fwb">{{adjustStock.name}}</p> |
|||
<p>有效期: {{adjustStock.date}}</p> |
|||
</div> |
|||
<div> |
|||
<p>剩余 <span class="fwb">{{adjustStock.stock}}</span> 张 </p> |
|||
</div> |
|||
<div> |
|||
<span style="margin-right: 10px;">调整库存: </span> |
|||
<el-input-number v-model="adjustStock.value" style="width: 150px" |
|||
label="调整库存"></el-input-number> |
|||
<span style="margin-left: 10px;">当前 <span |
|||
class="fwb">{{adjustStock.stock + adjustStock.value}}</span> 张</span> |
|||
</div> |
|||
<div> |
|||
<span style="margin:10px 0 20px 0;display: inline-block;">修改原因: </span> |
|||
<el-input type="textarea" v-model="adjustStock.note"></el-input> |
|||
</div> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="isAdjustment = false">取消</el-button> |
|||
<el-button type="primary" @click="ajustmentDetermine" :loading="isLoading">确定</el-button> |
|||
</div> |
|||
|
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
GET_couponManagement_LIST as GET_LIST, |
|||
DELETE_coupons as DELETE_ITEM, |
|||
COUNT_coupons as COUNT, |
|||
ENABLE_coupons, |
|||
DISABLE_coupons, |
|||
POST_coupons as ADD_ITEM, |
|||
PUT_coupons as UPDATE_ITEM, |
|||
updateStock_coupons |
|||
} from '@/api/marketingCenter' |
|||
|
|||
|
|||
import Alert from "@/utils/alert"; |
|||
import {pageSize} from '../../../config'; |
|||
import {FormateYYMMDD, dateTimeFormateHHmm} from "@/filters/index"; |
|||
|
|||
const FormContainer = () => import('./form.vue'); |
|||
const CouponDetails = () => import('./couponDetails.vue'); |
|||
|
|||
|
|||
export default { |
|||
name: "index", |
|||
data() { |
|||
return { |
|||
num: 0, |
|||
isLoading: false, |
|||
hackReset: true, |
|||
isAdjustment: false, |
|||
addMerchandise: false, |
|||
lists: [], |
|||
count: 0, |
|||
id: '', |
|||
params: { |
|||
from: 0, |
|||
size: pageSize, |
|||
query: '', |
|||
type: '', |
|||
enabled: '', |
|||
}, |
|||
|
|||
adjustStock: { |
|||
id: '', |
|||
name: '', |
|||
date: '', |
|||
stock: '', |
|||
value: '', |
|||
note: '' |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
components: { |
|||
FormContainer, |
|||
CouponDetails |
|||
}, |
|||
methods: { |
|||
|
|||
/** |
|||
* 获取列表数据 |
|||
*/ |
|||
getList() { |
|||
GET_LIST(this.params).then(res => { |
|||
res.map((item) => { |
|||
if (item.dateRule == 'AFTER_ACQUIRED') { |
|||
item.date = '领取后' + item.validDays + '天有效'; |
|||
} else { |
|||
|
|||
item.date = FormateYYMMDD(item.startDate) + ' 至 ' + FormateYYMMDD(item.endDate); |
|||
} |
|||
return item |
|||
}); |
|||
this.lists = res |
|||
}); |
|||
|
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 获取总数 |
|||
*/ |
|||
getCount() { |
|||
COUNT(this.params).then(res => { |
|||
this.count = res |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
submitForm(res) { |
|||
this.params = { |
|||
...this.params, |
|||
query: res.name, |
|||
type: res.type, |
|||
enabled: res.enabled, |
|||
}; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
resetForm() { |
|||
this.params = { |
|||
from: 0, |
|||
size: pageSize, |
|||
query: '', |
|||
type: '', |
|||
enabled: '', |
|||
}; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
/** |
|||
* 翻页 |
|||
*/ |
|||
currentChange(res) { |
|||
this.params = { |
|||
...this.params, |
|||
from: parseInt(res - 1) * this.params.size, |
|||
size: pageSize, |
|||
}; |
|||
this.getList() |
|||
}, |
|||
|
|||
/** |
|||
* 删除商品 |
|||
*/ |
|||
removeItem(id) { |
|||
this.$confirm('确定删除此商品嘛?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
DELETE_ITEM(id).then((res) => { |
|||
let lists = []; |
|||
this.lists.map((item) => { |
|||
if (item.id != id) { |
|||
lists.push(item) |
|||
} |
|||
return item; |
|||
}); |
|||
this.lists = lists; |
|||
}); |
|||
Alert.success("删除成功"); |
|||
}).catch(() => { |
|||
|
|||
}) |
|||
}, |
|||
|
|||
enabledItem(row) { |
|||
if (row.enadled) { |
|||
DISABLE_coupons(row.id).then(res => { |
|||
Alert.success("操作成功"); |
|||
this.getList(); |
|||
}); |
|||
} else { |
|||
ENABLE_coupons(row.id).then(res => { |
|||
Alert.success("操作成功"); |
|||
this.getList(); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 编辑商品 |
|||
*/ |
|||
editItem(id) { |
|||
this.$router.push('/marketingCenter/couponManagement/couponDetails?id=' + id); |
|||
}, |
|||
|
|||
/** |
|||
* 调整库存 |
|||
*/ |
|||
adjustment(row) { |
|||
this.adjustStock = { |
|||
id: row.id, |
|||
name: row.name, |
|||
date: row.date, |
|||
stock: row.stock, |
|||
value: '', |
|||
note: '' |
|||
}; |
|||
this.isAdjustment = true; |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 确定调整库存 |
|||
*/ |
|||
ajustmentDetermine() { |
|||
let that = this; |
|||
if (!this.adjustStock.note) { |
|||
Alert.fail('修改原因不能为空'); |
|||
return; |
|||
} |
|||
that.isLoading = true; |
|||
updateStock_coupons({...this.adjustStock}).then(res => { |
|||
Alert.success('修改成功'); |
|||
setTimeout(() => { |
|||
that.adjustStock = { |
|||
id: '', |
|||
name: '', |
|||
date: '', |
|||
stock: '', |
|||
value: '', |
|||
note: '' |
|||
}; |
|||
that.isAdjustment = false; |
|||
that.isLoading = false; |
|||
this.getList(); |
|||
}, 1000); |
|||
|
|||
}); |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 确定保存 |
|||
*/ |
|||
determine() { |
|||
let that = this; |
|||
let couponDetails = this.$refs['couponDetails'].$refs['ruleForm']; |
|||
couponDetails.validate((val) => { |
|||
if (val) { |
|||
that.isLoading = true; |
|||
let list = this.$refs['couponDetails'].ruleForm; |
|||
console.log(list); |
|||
return false; |
|||
if (!list.id) { |
|||
ADD_ITEM(list).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('新建成功'); |
|||
that.addMerchandise = false; |
|||
that.hackReset = false; |
|||
that.isLoading = false; |
|||
}, 1500); |
|||
|
|||
}) |
|||
} else { |
|||
UPDATE_ITEM(list).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('更新成功'); |
|||
that.addMerchandise = false; |
|||
that.hackReset = false; |
|||
that.isLoading = false; |
|||
}, 1500); |
|||
|
|||
}) |
|||
} |
|||
setTimeout(() => { |
|||
that.getList(); |
|||
that.isLoading = false; |
|||
}, 1500); |
|||
|
|||
|
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 取消弹层 |
|||
*/ |
|||
resetFormDialog() { |
|||
this.hackReset = false;//销毁组件 |
|||
this.$refs['couponDetails'].$refs['ruleForm'].resetFields(); |
|||
} |
|||
}, |
|||
filters: { |
|||
filterType(val) { |
|||
switch (val) { |
|||
case 'AMOUNT_OFF': |
|||
return '减免卷'; |
|||
case 'DISCOUNT_RATE': |
|||
return '折扣卷'; |
|||
} |
|||
}, |
|||
filterEnabled(val) { |
|||
switch (val) { |
|||
case true: |
|||
return '投放中'; |
|||
case false: |
|||
return '暂停中'; |
|||
} |
|||
}, |
|||
filterEnable(val) { |
|||
switch (val) { |
|||
case true: |
|||
return '暂停投放'; |
|||
case false: |
|||
return '开始投放'; |
|||
} |
|||
}, |
|||
filterCreatedDate(val) { |
|||
return dateTimeFormateHHmm(val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.table { |
|||
margin-top: 20px; |
|||
padding: 30px; |
|||
background: #fff; |
|||
|
|||
.option-span { |
|||
color: #409EFF; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.fwb { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.pagination { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.adjustment { |
|||
|
|||
} |
|||
</style> |
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<div class="form-container"> |
|||
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|||
<el-form-item :label="label"> |
|||
<el-input v-model="formInline.name" placeholder="名称搜索"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="状态"> |
|||
<el-select v-model="formInline.state" value="" placeholder="状态"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option label="未开始" value="PENDING"></el-option> |
|||
<el-option label="进行中" value="ACTIVE"></el-option> |
|||
<el-option label="已失效" value="DISABLED"></el-option> |
|||
<el-option label="已结束" value="ENDED"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item style="padding-left:30px"> |
|||
<el-button type="default" @click="resetForm1('formInline')">重置</el-button> |
|||
<el-button type="primary" @click="onSubmit">查询</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'form-container', |
|||
props:['label'], |
|||
data() { |
|||
return { |
|||
formInline: { |
|||
name: '', |
|||
state: '', |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
onSubmit() { |
|||
this.$emit('submit', this.formInline) |
|||
}, |
|||
resetForm1() { |
|||
this.formInline = { |
|||
name: '', |
|||
state: '' |
|||
}; |
|||
this.$emit('resetForm'); |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.form-container { |
|||
padding: 20px; |
|||
background: #fff; |
|||
} |
|||
</style> |
@ -0,0 +1,273 @@ |
|||
<template> |
|||
<div> |
|||
<form-container label="名称" @submit="submitForm" @resetForm="resetForm"></form-container> |
|||
<div class="table"> |
|||
<el-row> |
|||
<router-link :to="`/marketingCenter/luckyDraw/luckyDrawDetails`" class="resetWH"> |
|||
<el-button type="primary"> |
|||
添加活动 |
|||
</el-button> |
|||
</router-link> |
|||
</el-row> |
|||
<el-table |
|||
:data="lists" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="name" |
|||
label="名称"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="state" |
|||
label="状态"> |
|||
<template slot-scope="lists"> |
|||
{{lists.row.state | filterState}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="date" |
|||
label="有效期"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createdDate" |
|||
label="创建时间"> |
|||
<template slot-scope="lists"> |
|||
{{lists.row.createdDate | filterCreatedDate}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
label="操作" |
|||
> |
|||
<template slot-scope="lists"> |
|||
<span |
|||
size="small" |
|||
class="option-span" |
|||
style="margin: 0 5px;" |
|||
@click="editItem(lists.row)"> |
|||
编辑 |
|||
</span> |
|||
<span |
|||
v-if="lists.row.state != 'DISABLED'" |
|||
size="small" |
|||
style="margin: 0 5px;" |
|||
class="option-span" |
|||
@click="enabledItem(lists.row)"> |
|||
失效 |
|||
</span> |
|||
<span |
|||
type="text" |
|||
size="small" |
|||
style="margin: 0 5px;" |
|||
class="option-span" |
|||
@click="removeItem(lists.row.id)" |
|||
> |
|||
删除 |
|||
</span> |
|||
|
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="params.size" |
|||
layout="prev, pager, next" |
|||
:total="count" |
|||
@current-change="currentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { |
|||
GET_lottery_LIST as GET_LIST, |
|||
DELETE_lottery as DELETE_ITEM, |
|||
COUNT_lottery as COUNT, |
|||
disable_lottery |
|||
} from '@/api/marketingCenter' |
|||
|
|||
import Alert from "@/utils/alert"; |
|||
import {pageSize} from '../../../config'; |
|||
|
|||
const FormContainer = () => import('./form.vue'); |
|||
|
|||
import {FormateYYMMDD ,dateTimeFormateHHmm} from "@/filters/index"; |
|||
|
|||
export default { |
|||
name: "index", |
|||
data() { |
|||
return { |
|||
isLoading: false, |
|||
hackReset: true, |
|||
addMerchandise: false, |
|||
lists: [], |
|||
count: 0, |
|||
id: '', |
|||
params: { |
|||
from: 0, |
|||
size: pageSize, |
|||
query: '', |
|||
state: '' |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
components: { |
|||
FormContainer |
|||
}, |
|||
methods: { |
|||
|
|||
/** |
|||
* 获取列表数据 |
|||
*/ |
|||
getList() { |
|||
GET_LIST(this.params).then(res => { |
|||
res.map((item) => { |
|||
if (item.permanent) { |
|||
item.date = '永久有效'; |
|||
} else { |
|||
|
|||
item.date = dateTimeFormateHHmm(item.startDate) + ' 至 ' + dateTimeFormateHHmm(item.endDate); |
|||
} |
|||
return item |
|||
}); |
|||
this.lists = res |
|||
}); |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 获取总数 |
|||
*/ |
|||
getCount() { |
|||
COUNT(this.params).then(res => { |
|||
this.count = res |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
submitForm(res) { |
|||
this.params = { |
|||
...this.params, |
|||
query: res.name, |
|||
state: res.state |
|||
}; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
resetForm() { |
|||
this.params = { |
|||
from: 0, |
|||
size: pageSize, |
|||
query: '' |
|||
}; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
/** |
|||
* 翻页 |
|||
*/ |
|||
currentChange(res) { |
|||
this.params = { |
|||
...this.params, |
|||
from: parseInt(res - 1) * this.params.size, |
|||
size: pageSize, |
|||
}; |
|||
this.getList() |
|||
}, |
|||
|
|||
enabledItem(row) { |
|||
disable_lottery(row.id).then(res => { |
|||
Alert.success("操作成功"); |
|||
this.getList(); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 删除商品 |
|||
*/ |
|||
removeItem(id) { |
|||
this.$confirm('确定删除此商品嘛?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
DELETE_ITEM(id).then((res) => { |
|||
let lists = []; |
|||
this.lists.map((item) => { |
|||
if (item.id != id) { |
|||
lists.push(item) |
|||
} |
|||
return item; |
|||
}); |
|||
this.lists = lists; |
|||
}); |
|||
Alert.success("删除成功"); |
|||
}).catch(() => { |
|||
|
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 编辑商品 |
|||
*/ |
|||
editItem(row) { |
|||
this.$router.push('/marketingCenter/luckyDraw/luckyDrawDetails?id=' + row.id + '&state=' + row.state); |
|||
} |
|||
}, |
|||
filters: { |
|||
filterState(val) { |
|||
switch (val) { |
|||
case 'PENDING': |
|||
return '未开始'; |
|||
case 'ACTIVE': |
|||
return '进行中'; |
|||
case 'DISABLED': |
|||
return '已失效'; |
|||
case 'ENDED': |
|||
return '已结束'; |
|||
case '': |
|||
return '全部'; |
|||
} |
|||
}, |
|||
filterCreatedDate(val) { |
|||
return dateTimeFormateHHmm(val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.table { |
|||
margin-top: 20px; |
|||
padding: 30px; |
|||
background: #fff; |
|||
|
|||
.option-span { |
|||
color: #409EFF; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.pagination { |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
@ -0,0 +1,483 @@ |
|||
<template> |
|||
<div class="form"> |
|||
<el-form :model="ruleForm" ref="ruleForm" :rules="rule2" label-width="120px" class="demo-ruleForm"> |
|||
<el-form-item label="活动名称" prop="name" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input v-model="ruleForm.name"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="活动时间"> |
|||
<el-switch |
|||
:disabled="disabled" |
|||
v-model="ruleForm.permanent" |
|||
active-text="永久有效"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="" v-if="!ruleForm.permanent" prop="date" |
|||
:rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-date-picker |
|||
:disabled="disabled" |
|||
v-model="date" |
|||
type="datetimerange" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="活动规则" prop="note" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input type="textarea" v-model="ruleForm.note"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="次数限制" prop="isLimit"> |
|||
<div> |
|||
每人每天可抽取 |
|||
<el-input style="width: 100px" type="text" v-model="ruleForm.maxTrys"></el-input> |
|||
次,共 |
|||
<el-input type="text" style="width: 100px" v-model="ruleForm.maxTrysDaily"></el-input> |
|||
</div> |
|||
<div style="margin: 10px 0"> |
|||
每人每天可中奖 |
|||
<el-input style="width: 100px" type="text" v-model="ruleForm.maxRewards"></el-input> |
|||
次,共 |
|||
<el-input type="text" style="width: 100px" v-model="ruleForm.maxRewardsDaily"></el-input> |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="漂浮显示"> |
|||
<el-switch |
|||
v-model="ruleForm.float"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="适用方式"> |
|||
<el-select v-model="ruleForm.entryType" placeholder=""> |
|||
<el-option label="支付" value="PAY"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="选择场地"> |
|||
<el-select v-model="ruleForm.locationIds" placeholder="选择场地" multiple :clearable="true"> |
|||
<el-option v-for="item in locationIds" :key="item.id" :label="item.name" |
|||
:value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
|
|||
<div class="bText"> |
|||
<p>中奖设置</p> |
|||
</div> |
|||
|
|||
<div class="winningSettings"> |
|||
<el-button type="primary" @click="addAwards"> |
|||
添加奖项 |
|||
</el-button> |
|||
<el-table |
|||
class="table" |
|||
border |
|||
type="index" |
|||
:data="ruleForm.prizes" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="name" |
|||
label="奖项名称" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="stock" |
|||
label="数量" |
|||
width="80"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
width="80" |
|||
prop="probability" |
|||
label="概率"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
label="操作" |
|||
> |
|||
<template slot-scope="lists"> |
|||
<span |
|||
size="small" |
|||
class="option-span" |
|||
style="margin: 0 5px;" |
|||
@click="editItem(lists.row)"> |
|||
编辑 |
|||
</span> |
|||
<span |
|||
type="text" |
|||
size="small" |
|||
style="margin: 0 5px;" |
|||
class="option-span" |
|||
@click="removeItem(lists.row,lists.$index)" |
|||
> |
|||
删除 |
|||
</span> |
|||
|
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div class="bText"> |
|||
<p>未中奖设置</p> |
|||
</div> |
|||
|
|||
<el-form-item label="标题" prop="missTitle" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input v-model="ruleForm.missTitle"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="提示语" prop="missDescription" |
|||
:rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input v-model="ruleForm.missDescription"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item style="text-align: center;"> |
|||
<el-button type="primary" @click="submitForm('ruleForm')" :loading="isLoading">提交</el-button> |
|||
<el-button @click="resetForm('ruleForm')">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<el-dialog |
|||
:visible.sync="dialogVisible" |
|||
:show-close="false" |
|||
:before-close="beforeClose" |
|||
width="600px"> |
|||
<winning-settings ref="winningSettings" :row="row"></winning-settings> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="cancel">取 消</el-button> |
|||
<el-button type="primary" @click="winningSettings">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
import {GET_LOCATIONS} from '@/api/common' |
|||
import Alert from "@/utils/alert"; |
|||
|
|||
import {mapActions} from "vuex"; |
|||
import { |
|||
POST_lottery as ADD_ITEM, |
|||
PUT_lottery as UPDATE_ITEM, |
|||
DETAIL_lottery as DETAIL_ITEM |
|||
} from '@/api/marketingCenter' |
|||
|
|||
import {FormateYYMMDD} from "@/filters/index"; |
|||
|
|||
const WinningSettings = () => import('./winningSettings'); |
|||
|
|||
export default { |
|||
data() { |
|||
let validatePass = (rule, value, callback) => { |
|||
if (this.isLimit) { |
|||
callback() |
|||
} |
|||
if (!value) { |
|||
return callback(new Error('不能为空')); |
|||
} |
|||
|
|||
|
|||
}; |
|||
return { |
|||
date: [], |
|||
row: {}, |
|||
locationIds: [], |
|||
disabled: false, |
|||
isLoading: false, |
|||
dialogVisible: false, |
|||
ruleForm: { |
|||
id: '', |
|||
name: '', |
|||
permanent: false, |
|||
startDate: '', |
|||
endDate: '', |
|||
date: '', |
|||
isLimit: '', |
|||
note: '', |
|||
float: false, |
|||
maxTrys: '', |
|||
maxTrysDaily: '', |
|||
maxRewards: '', |
|||
missTitle: '', |
|||
maxRewardsDaily: '', |
|||
missDescription: '', |
|||
entryType: 'PAY', |
|||
locationIds: [], |
|||
prizes: [], |
|||
}, |
|||
rule2: { |
|||
isLimit: [ |
|||
{validator: validatePass, trigger: 'blur'} |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
computed: { |
|||
id() { |
|||
return this.$route.query.id |
|||
}, |
|||
state() { |
|||
return this.$route.query.state |
|||
}, |
|||
isLimit() { |
|||
let value = this.ruleForm; |
|||
let flag = false; |
|||
if (value.maxTrys && value.maxTrysDaily && value.maxRewards && value.maxRewardsDaily) { |
|||
return !flag |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
WinningSettings |
|||
}, |
|||
mounted() { |
|||
if (this.id) { |
|||
this.getDetailItem(); |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
id: this.id |
|||
} |
|||
} |
|||
|
|||
GET_LOCATIONS().then(res => { |
|||
this.locationIds = res |
|||
}) |
|||
}, |
|||
watch: { |
|||
date(val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
date: val, |
|||
startDate: val[0], |
|||
endDate: val[1] |
|||
}; |
|||
} |
|||
}, |
|||
methods: { |
|||
...mapActions([ |
|||
"delVisitedView" |
|||
]), |
|||
/** |
|||
* 获取商品详情 |
|||
*/ |
|||
getDetailItem() { |
|||
DETAIL_ITEM(this.id).then(res => { |
|||
this.date.push(res.startDate); |
|||
this.date.push(res.endDate); |
|||
this.disabled = true; |
|||
this.ruleForm = res; |
|||
}) |
|||
}, |
|||
|
|||
addAwards() { |
|||
let row = { |
|||
edit: 'add', |
|||
type: 'COUPON', |
|||
name: '', |
|||
stock: '', |
|||
itemId: '', |
|||
probability: '', |
|||
}; |
|||
this.row = row; |
|||
this.dialogVisible = true |
|||
}, |
|||
|
|||
winningSettings() { |
|||
let winningSettings = this.$refs['winningSettings'].$refs['form']; |
|||
winningSettings.validate(valid => { |
|||
if (valid) { |
|||
this.dialogVisible = false; |
|||
let prizes = JSON.parse(JSON.stringify(this.ruleForm.prizes)); |
|||
let model = winningSettings.model; |
|||
prizes.map(item => { |
|||
if (item.edit == 'edit') { |
|||
item.name = model.name; |
|||
item.stock = model.stock; |
|||
item.type = model.type; |
|||
item.itemId = model.coupon || model.card; |
|||
item.probability = model.probability; |
|||
item.edit = ''; |
|||
} |
|||
return item; |
|||
}); |
|||
|
|||
if (model.edit == 'add') { |
|||
prizes.push(model) |
|||
} |
|||
|
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
prizes |
|||
}; |
|||
} |
|||
}) |
|||
}, |
|||
cancel() { |
|||
this.dialogVisible = false; |
|||
this.$refs['winningSettings'].$refs['form'].resetFields(); |
|||
}, |
|||
|
|||
beforeClose() { |
|||
this.dialogVisible = false; |
|||
this.$refs['winningSettings'].$refs['form'].resetFields(); |
|||
}, |
|||
|
|||
/** |
|||
* 无门槛 |
|||
*/ |
|||
noThresholdFun(val) { |
|||
this.noThreshold = val; |
|||
if (val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minAmount: ' ' |
|||
} |
|||
} else { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minAmount: '', |
|||
startDate: '', |
|||
endDate: '' |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
|
|||
editItem(row, index) { |
|||
this.dialogVisible = true; |
|||
row.edit = 'edit'; |
|||
this.row = row; |
|||
}, |
|||
|
|||
removeItem(row, index) { |
|||
let prizes = JSON.parse(JSON.stringify(this.ruleForm.prizes)); |
|||
let newArr = []; |
|||
prizes.map((item, idx) => { |
|||
if (index != idx) { |
|||
newArr.push(item) |
|||
} |
|||
return item; |
|||
}); |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
prizes: newArr |
|||
}; |
|||
}, |
|||
|
|||
/** |
|||
* 不限制 |
|||
*/ |
|||
noRestrictionFun(val) { |
|||
this.noRestriction = val; |
|||
}, |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
resetForm() { |
|||
this.$refs['ruleForm'].resetFields(); |
|||
}, |
|||
|
|||
/** |
|||
* 提交 |
|||
*/ |
|||
submitForm() { |
|||
let that = this; |
|||
let luckyDrawDetails = this.$refs['ruleForm']; |
|||
|
|||
|
|||
luckyDrawDetails.validate((val) => { |
|||
if (val) { |
|||
if (!this.ruleForm.prizes.length) { |
|||
Alert.fail('中奖设置不能为空'); |
|||
return false |
|||
} |
|||
that.isLoading = true; |
|||
if (!that.ruleForm.id) { |
|||
console.log(that.ruleForm); |
|||
ADD_ITEM({...that.ruleForm}).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('新建成功'); |
|||
that.isLoading = false; |
|||
that.delVisitedView(that.$route).then(res => { |
|||
that.$router.go(-1); |
|||
}); |
|||
}, 1500); |
|||
|
|||
}).catch(err => { |
|||
Alert.fail(err); |
|||
that.isLoading = false; |
|||
}) |
|||
} else { |
|||
UPDATE_ITEM({...that.ruleForm}).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('更新成功'); |
|||
that.isLoading = false; |
|||
that.delVisitedView(that.$route).then(res => { |
|||
that.$router.go(-1); |
|||
}); |
|||
}, 1500); |
|||
|
|||
}).catch(err => { |
|||
Alert.fail(err); |
|||
that.isLoading = false; |
|||
}) |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.form { |
|||
height: 100%; |
|||
background: #fff; |
|||
padding: 30px 30px 30px 0; |
|||
} |
|||
|
|||
.bText { |
|||
border-top: 1px solid #d9d9d9; |
|||
position: relative; |
|||
margin: 30px 0; |
|||
|
|||
p { |
|||
position: absolute; |
|||
top: -25px; |
|||
left: 40px; |
|||
background: #fff; |
|||
font-weight: bolder; |
|||
padding: 0 10px; |
|||
} |
|||
} |
|||
|
|||
.option-span { |
|||
color: #409EFF; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.winningSettings { |
|||
border-radius: 10px; |
|||
max-width: 500px; |
|||
margin-left: 120px; |
|||
|
|||
.table { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.el-table { |
|||
border-radius: 4px; |
|||
} |
|||
} |
|||
|
|||
|
|||
</style> |
@ -0,0 +1,118 @@ |
|||
<template> |
|||
<el-form ref="form" :model="form" label-width="90px"> |
|||
<el-form-item label="奖项名称" prop="name" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input v-model="form.name"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="奖品" prop="itemId" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-radio-group v-model="form.type" @change="radioChange"> |
|||
<el-radio label="COUPON"> |
|||
<span style="margin-right: 10px;">优惠券</span> |
|||
<el-select :disabled="!isCoupons" style="width: 144px" @change="couponsChange" v-model="form.coupon" |
|||
placeholder="选择优惠券"> |
|||
<el-option v-for="item in coupons" :key="item.id" :label="item.name" |
|||
:value="item.id"></el-option> |
|||
</el-select> |
|||
</el-radio> |
|||
<el-radio label="CARD"> |
|||
<span style="margin-right: 10px;">会员卡</span> |
|||
<el-select :disabled="isCoupons" style="width: 144px" @change="cardChange" v-model="form.card" |
|||
placeholder="选择会员卡"> |
|||
<el-option v-for="item in card" :key="item.id" :label="item.name" |
|||
:value="item.id"></el-option> |
|||
</el-select> |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="奖项数量" prop="stock" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input v-model="form.stock"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="中奖概率%" prop="probability" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input v-model="form.probability"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
</template> |
|||
<script> |
|||
import {GET_VIPVARDS, GET_COUPONS} from '@/api/common' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
coupons: [], |
|||
card: [], |
|||
isCoupons: true, |
|||
form: { |
|||
name: '', |
|||
coupon: '', |
|||
card: '', |
|||
stock: '', |
|||
itemId: '', |
|||
type: 'COUPON', |
|||
probability: '' |
|||
} |
|||
} |
|||
}, |
|||
props: { |
|||
row: Object |
|||
}, |
|||
created() { |
|||
let rows = JSON.parse(JSON.stringify(this.row)); |
|||
this.initFun().then(res => { |
|||
if (rows.type == "COUPON") { |
|||
rows.coupon = rows.itemId; |
|||
this.isCoupons = true; |
|||
} else { |
|||
rows.card = rows.itemId; |
|||
this.isCoupons = false; |
|||
} |
|||
this.form = rows; |
|||
}) |
|||
}, |
|||
methods: { |
|||
async initFun() { |
|||
await GET_COUPONS().then(res => { |
|||
this.coupons = res; |
|||
}); |
|||
await GET_VIPVARDS().then(res => { |
|||
this.card = res; |
|||
}); |
|||
}, |
|||
radioChange(val) { |
|||
if (val == 'COUPON') { |
|||
this.isCoupons = !this.isCoupons |
|||
} else { |
|||
this.isCoupons = !this.isCoupons |
|||
} |
|||
}, |
|||
couponsChange(val) { |
|||
this.form = { |
|||
...this.form, |
|||
coupon: val, |
|||
card: '', |
|||
itemId: val |
|||
}; |
|||
}, |
|||
cardChange(val) { |
|||
this.form = { |
|||
...this.form, |
|||
coupon: '', |
|||
card: val, |
|||
itemId: val |
|||
} |
|||
}, |
|||
}, |
|||
watch: { |
|||
row() { |
|||
let rows = JSON.parse(JSON.stringify(this.row)); |
|||
|
|||
if (rows.type == "COUPON") { |
|||
rows.coupon = rows.itemId; |
|||
this.isCoupons = true; |
|||
} else { |
|||
rows.card = rows.itemId; |
|||
this.isCoupons = false; |
|||
} |
|||
this.form = rows; |
|||
} |
|||
} |
|||
} |
|||
</script> |
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<div class="form-container"> |
|||
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|||
<el-form-item :label="label"> |
|||
<el-input v-model="formInline.name" placeholder="名称搜索"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="状态"> |
|||
<el-select v-model="formInline.state" value="" placeholder="状态"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option label="未开始" value="PENDING"></el-option> |
|||
<el-option label="进行中" value="ACTIVE"></el-option> |
|||
<el-option label="已失效" value="DISABLED"></el-option> |
|||
<el-option label="已结束" value="ENDED"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item style="padding-left:30px"> |
|||
<el-button type="default" @click="resetForm1('formInline')">重置</el-button> |
|||
<el-button type="primary" @click="onSubmit">查询</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'form-container', |
|||
props:['label'], |
|||
data() { |
|||
return { |
|||
formInline: { |
|||
name: '', |
|||
state: '', |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
onSubmit() { |
|||
this.$emit('submit', this.formInline) |
|||
}, |
|||
resetForm1() { |
|||
this.formInline = { |
|||
name: '', |
|||
state: '' |
|||
}; |
|||
this.$emit('resetForm'); |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.form-container { |
|||
padding: 20px; |
|||
background: #fff; |
|||
} |
|||
</style> |
@ -0,0 +1,273 @@ |
|||
<template> |
|||
<div> |
|||
<form-container label="名称" @submit="submitForm" @resetForm="resetForm"></form-container> |
|||
<div class="table"> |
|||
<el-row> |
|||
<router-link :to="`/marketingCenter/luckyFree/luckyFreeDetails`" class="resetWH"> |
|||
<el-button type="primary"> |
|||
添加活动 |
|||
</el-button> |
|||
</router-link> |
|||
</el-row> |
|||
<el-table |
|||
:data="lists" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="name" |
|||
label="名称"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="state" |
|||
label="状态"> |
|||
<template slot-scope="lists"> |
|||
{{lists.row.state | filterState}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="date" |
|||
label="有效期"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createdDate" |
|||
label="创建时间"> |
|||
<template slot-scope="lists"> |
|||
{{lists.row.createdDate | filterCreatedDate}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
label="操作" |
|||
> |
|||
<template slot-scope="lists"> |
|||
<span |
|||
size="small" |
|||
class="option-span" |
|||
style="margin: 0 5px;" |
|||
@click="editItem(lists.row)"> |
|||
编辑 |
|||
</span> |
|||
<span |
|||
v-if="lists.row.state != 'DISABLED'" |
|||
size="small" |
|||
style="margin: 0 5px;" |
|||
class="option-span" |
|||
@click="enabledItem(lists.row)"> |
|||
失效 |
|||
</span> |
|||
<span |
|||
type="text" |
|||
size="small" |
|||
style="margin: 0 5px;" |
|||
class="option-span" |
|||
@click="removeItem(lists.row.id)" |
|||
> |
|||
删除 |
|||
</span> |
|||
|
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="params.size" |
|||
layout="prev, pager, next" |
|||
:total="count" |
|||
@current-change="currentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { |
|||
GET_luckfree_LIST as GET_LIST, |
|||
DELETE_luckfree as DELETE_ITEM, |
|||
COUNT_luckfree as COUNT, |
|||
disable_luckfree |
|||
} from '@/api/marketingCenter' |
|||
|
|||
import Alert from "@/utils/alert"; |
|||
import {pageSize} from '../../../config'; |
|||
|
|||
const FormContainer = () => import('./form.vue'); |
|||
|
|||
import {FormateYYMMDD ,dateTimeFormateHHmm} from "@/filters/index"; |
|||
|
|||
export default { |
|||
name: "index", |
|||
data() { |
|||
return { |
|||
isLoading: false, |
|||
hackReset: true, |
|||
addMerchandise: false, |
|||
lists: [], |
|||
count: 0, |
|||
id: '', |
|||
params: { |
|||
from: 0, |
|||
size: pageSize, |
|||
query: '', |
|||
state: '' |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
components: { |
|||
FormContainer |
|||
}, |
|||
methods: { |
|||
|
|||
/** |
|||
* 获取列表数据 |
|||
*/ |
|||
getList() { |
|||
GET_LIST(this.params).then(res => { |
|||
res.map((item) => { |
|||
if (item.permanent) { |
|||
item.date = '永久有效'; |
|||
} else { |
|||
|
|||
item.date = dateTimeFormateHHmm(item.startDate) + ' 至 ' + dateTimeFormateHHmm(item.endDate); |
|||
} |
|||
return item |
|||
}); |
|||
this.lists = res |
|||
}); |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 获取总数 |
|||
*/ |
|||
getCount() { |
|||
COUNT(this.params).then(res => { |
|||
this.count = res |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
submitForm(res) { |
|||
this.params = { |
|||
...this.params, |
|||
query: res.name, |
|||
state: res.state |
|||
}; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
resetForm() { |
|||
this.params = { |
|||
from: 0, |
|||
size: pageSize, |
|||
query: '' |
|||
}; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
/** |
|||
* 翻页 |
|||
*/ |
|||
currentChange(res) { |
|||
this.params = { |
|||
...this.params, |
|||
from: parseInt(res - 1) * this.params.size, |
|||
size: pageSize, |
|||
}; |
|||
this.getList() |
|||
}, |
|||
|
|||
enabledItem(row) { |
|||
disable_luckfree(row.id).then(res => { |
|||
Alert.success("操作成功"); |
|||
this.getList(); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 删除商品 |
|||
*/ |
|||
removeItem(id) { |
|||
this.$confirm('确定删除此商品嘛?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
DELETE_ITEM(id).then((res) => { |
|||
let lists = []; |
|||
this.lists.map((item) => { |
|||
if (item.id != id) { |
|||
lists.push(item) |
|||
} |
|||
return item; |
|||
}); |
|||
this.lists = lists; |
|||
}); |
|||
Alert.success("删除成功"); |
|||
}).catch(() => { |
|||
|
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 编辑商品 |
|||
*/ |
|||
editItem(row) { |
|||
this.$router.push('/marketingCenter/luckyFree/luckyFreeDetails?id=' + row.id + '&state=' + row.state); |
|||
} |
|||
}, |
|||
filters: { |
|||
filterState(val) { |
|||
switch (val) { |
|||
case 'PENDING': |
|||
return '未开始'; |
|||
case 'ACTIVE': |
|||
return '进行中'; |
|||
case 'DISABLED': |
|||
return '已失效'; |
|||
case 'ENDED': |
|||
return '已结束'; |
|||
case '': |
|||
return '全部'; |
|||
} |
|||
}, |
|||
filterCreatedDate(val) { |
|||
return dateTimeFormateHHmm(val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.table { |
|||
margin-top: 20px; |
|||
padding: 30px; |
|||
background: #fff; |
|||
|
|||
.option-span { |
|||
color: #409EFF; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.pagination { |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
@ -0,0 +1,413 @@ |
|||
<template> |
|||
<div class="form"> |
|||
<el-form :model="ruleForm" ref="ruleForm" label-position="center" label-width="120px" class="demo-ruleForm"> |
|||
<el-form-item label="活动名称" prop="name" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input style="min-width: 120px;width: 400px;" v-model="ruleForm.name"></el-input> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="活动时间"> |
|||
<el-switch |
|||
:disabled="disabled" |
|||
v-model="ruleForm.permanent" |
|||
active-text="永久有效"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="" v-if="!ruleForm.permanent" prop="date" |
|||
:rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-date-picker |
|||
:disabled="disabled" |
|||
v-model="date" |
|||
type="datetimerange" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="活动规则" prop="note" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input type="textarea" v-model="ruleForm.note"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="选择场地"> |
|||
<el-select v-model="ruleForm.locationIds" placeholder="选择场地" multiple :clearable="true"> |
|||
<el-option v-for="item in locationIds" :key="item.id" :label="item.name" |
|||
:value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<div class="bText"> |
|||
<p>中奖设置</p> |
|||
</div> |
|||
|
|||
<el-form-item label="中奖浮动比例"> |
|||
<el-tooltip class="item" placement="top"> |
|||
<div slot="content">注意事项:<br/>A.抽奖档位有三个档次:<br/> “1元”、“x3倍”、“x5倍”,<br/> 具体档位由该笔订单总金额决定; <br/>如:<br/>订单总金额 |
|||
> 5元, 会出现三个大乐购档次;<br/> B.中奖概率 = 抽奖档次 / 订单金额 + (抽奖档次 / 订单金额 * 中奖浮动比例 |
|||
</div> |
|||
<svg-icon icon-class="wen" |
|||
style="position: relative;right:10px;cursor: pointer;color: #188ae2;"></svg-icon> |
|||
</el-tooltip> |
|||
|
|||
<el-switch |
|||
v-model="ruleForm.enableProbabilityAdjustment" |
|||
active-text="不设置"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="" prop="probabilityAdjustment" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]" v-if="!ruleForm.enableProbabilityAdjustment"> |
|||
中奖概率上浮 |
|||
<el-input style="width: 80px" v-model="ruleForm.probabilityAdjustment"></el-input> |
|||
% |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="显示真实概率" v-if="!ruleForm.enableProbabilityAdjustment"> |
|||
<el-switch |
|||
v-model="ruleForm.showRealProbability" |
|||
active-text="显示"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="中奖阈值" prop="maxRate" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]" > |
|||
<el-tooltip class="item" placement="top"> |
|||
<div slot="content">中奖阀值 - 累计收入大于等于订单金额 + (中奖阀值百分比 × 订单金额), 必中奖。<br/> 举例:<br/> 假设订单金额20元, |
|||
抽奖档次为1元/1倍, 不设置中奖浮动比例, 则单次中奖概率为1 / 20 = 5%<br/> 如果中奖阀值设置成10%, 则累计收入大于等于 20 + (10% × 20) = 22时, |
|||
必中奖。 |
|||
</div> |
|||
<svg-icon icon-class="wen" |
|||
style="position: relative;right:10px;cursor: pointer;color: #188ae2;"></svg-icon> |
|||
</el-tooltip> |
|||
<el-input style="width: 80px" v-model="ruleForm.maxRate"></el-input> |
|||
% |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="中奖保底值" prop="minRate" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-tooltip class="item" placement="top"> |
|||
<div slot="content">中奖保底值 - 累计收入若小于订单金额 × 中奖保底值%, 必定不中奖, 保证最低收入。<br/> 举例:<br/> 假设订单金额20元, |
|||
抽奖档次为1元/1倍, 不设置中奖浮动比例, 则单次中奖概率为1 / 20 = 5% <br/>如果中奖保底值设置成10%, 则累计收入小于 20 × 10% = 2时, 必定不中奖。 |
|||
</div> |
|||
<svg-icon icon-class="wen" |
|||
style="position: relative;right:10px;cursor: pointer;color: #188ae2;"></svg-icon> |
|||
</el-tooltip> |
|||
<el-input style="width: 80px" v-model="ruleForm.minRate"></el-input> |
|||
% |
|||
</el-form-item> |
|||
|
|||
<div class="bText"> |
|||
<p>概率计算</p> |
|||
</div> |
|||
|
|||
|
|||
<el-form-item label="订单金额"> |
|||
<el-input style="width: 150px" v-model="ruleForm.orderTotal"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="档次"> |
|||
<el-select v-model="ruleForm.times" placeholder="请选择档次"> |
|||
<el-option label="1" value="1"></el-option> |
|||
<el-option label="3" value="3"></el-option> |
|||
<el-option label="5" value="5"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="success" @click="calculation">计算</el-button> |
|||
</el-form-item> |
|||
|
|||
<div class="bText"> |
|||
<p>计算结果</p> |
|||
</div> |
|||
|
|||
<div class="result"> |
|||
<div> |
|||
|
|||
<p>真实概率 <span>{{calculationResults.realProbability||0}}</span> %</p> |
|||
<p>抽奖最多 <span>{{calculationResults.maxCount||0}}</span> 次必中,收入最高 <span>{{calculationResults.paidMax||0}}</span> |
|||
元</p> |
|||
</div> |
|||
<div> |
|||
<p>显示概率 <span>{{calculationResults.probability||0}}</span> %</p> |
|||
<p>抽奖最少 <span>{{calculationResults.minCount||0}}</span> 次才有机会中奖,收入最底 <span>{{calculationResults.paidMin||0}}</span> |
|||
元</p> |
|||
</div> |
|||
<div> |
|||
<p>中奖金额 <span>{{calculationResults.price||0}}</span> 元</p> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<el-form-item style="text-align: center;"> |
|||
<el-button type="primary" @click="submitForm('ruleForm')" :loading="isLoading">提交</el-button> |
|||
<el-button @click="resetForm('ruleForm')">重置</el-button> |
|||
</el-form-item> |
|||
|
|||
|
|||
</el-form> |
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
import {GET_LOCATIONS} from '@/api/common' |
|||
import Alert from "@/utils/alert"; |
|||
|
|||
import {mapActions} from "vuex"; |
|||
import { |
|||
POST_luckfree as ADD_ITEM, |
|||
PUT_luckfree as UPDATE_ITEM, |
|||
DETAIL_luckfree as DETAIL_ITEM, |
|||
luckfree_calculate |
|||
} from '@/api/marketingCenter' |
|||
|
|||
import {FormateYYMMDD} from "@/filters/index"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
date: [], |
|||
isLoading: false, |
|||
disabled: false, |
|||
locationIds: [], |
|||
calculationResults: {}, |
|||
ruleForm: { |
|||
id: '', |
|||
name: '', |
|||
permanent: false, |
|||
enableProbabilityAdjustment: false, |
|||
showRealProbability: false, |
|||
startDate: '', |
|||
endDate: '', |
|||
date: '', |
|||
probabilityAdjustment: '', |
|||
maxRate: '', |
|||
minRate: '', |
|||
note: '', |
|||
orderTotal: '', |
|||
times: '', |
|||
locationIds: [] |
|||
} |
|||
}; |
|||
}, |
|||
computed: { |
|||
id() { |
|||
return this.$route.query.id |
|||
}, |
|||
state() { |
|||
return this.$route.query.state |
|||
} |
|||
}, |
|||
mounted() { |
|||
if (this.id) { |
|||
this.getDetailItem(); |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
id: this.id |
|||
} |
|||
} |
|||
|
|||
GET_LOCATIONS().then(res => { |
|||
this.locationIds = res |
|||
}) |
|||
}, |
|||
watch: { |
|||
date(val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
date: val, |
|||
startDate: val[0], |
|||
endDate: val[1] |
|||
}; |
|||
} |
|||
}, |
|||
methods: { |
|||
...mapActions([ |
|||
"delVisitedView" |
|||
]), |
|||
/** |
|||
* 获取商品详情 |
|||
*/ |
|||
getDetailItem() { |
|||
DETAIL_ITEM(this.id).then(res => { |
|||
this.date.push(res.startDate); |
|||
this.date.push(res.endDate); |
|||
this.disabled = true; |
|||
this.ruleForm = res; |
|||
}) |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 计算 |
|||
*/ |
|||
calculation() { |
|||
if (!this.ruleForm.orderTotal) { |
|||
Alert.fail('订单金额必填'); |
|||
return false; |
|||
} |
|||
if (!this.ruleForm.times) { |
|||
Alert.fail('档次必填'); |
|||
return false; |
|||
} |
|||
let obj ={ |
|||
times: this.ruleForm.times, |
|||
orderTotal:this.ruleForm.orderTotal, |
|||
probabilityAdjustment: this.ruleForm.probabilityAdjustment, |
|||
showRealProbability: this.ruleForm.showRealProbability, |
|||
minRate: this.ruleForm.minRate, |
|||
maxRate: this.ruleForm.maxRate, |
|||
}; |
|||
luckfree_calculate({...obj}).then(res => { |
|||
console.log(res); |
|||
this.calculationResults = res |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 无门槛 |
|||
*/ |
|||
noThresholdFun(val) { |
|||
this.noThreshold = val; |
|||
if (val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minAmount: ' ' |
|||
} |
|||
} else { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minAmount: '', |
|||
startDate: '', |
|||
endDate: '' |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 不限制 |
|||
*/ |
|||
noRestrictionFun(val) { |
|||
this.noRestriction = val; |
|||
}, |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
resetForm() { |
|||
this.$refs['ruleForm'].resetFields(); |
|||
}, |
|||
|
|||
/** |
|||
* 提交 |
|||
*/ |
|||
submitForm() { |
|||
let that = this; |
|||
let luckyFreeDetails = this.$refs['ruleForm']; |
|||
luckyFreeDetails.validate((val) => { |
|||
if (val) { |
|||
that.isLoading = true; |
|||
if (!that.ruleForm.id) { |
|||
ADD_ITEM({...that.ruleForm}).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('新建成功'); |
|||
that.isLoading = false; |
|||
that.delVisitedView(that.$route).then(res => { |
|||
that.$router.go(-1); |
|||
}); |
|||
}, 1500); |
|||
|
|||
}).catch(err=>{ |
|||
Alert.fail(err); |
|||
that.isLoading = false; |
|||
}) |
|||
} else { |
|||
UPDATE_ITEM({...that.ruleForm}).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('更新成功'); |
|||
that.isLoading = false; |
|||
that.delVisitedView(that.$route).then(res => { |
|||
that.$router.go(-1); |
|||
}); |
|||
}, 1500); |
|||
|
|||
}).catch(err=>{ |
|||
Alert.fail(err); |
|||
that.isLoading = false; |
|||
}) |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.form { |
|||
height: 100%; |
|||
background: #fff; |
|||
padding-top: 30px; |
|||
} |
|||
|
|||
|
|||
.bText { |
|||
border-top: 1px solid #d9d9d9; |
|||
position: relative; |
|||
margin: 30px 0; |
|||
|
|||
p { |
|||
position: absolute; |
|||
top: -25px; |
|||
left: 40px; |
|||
background: #fff; |
|||
font-weight: bolder; |
|||
padding: 0 10px; |
|||
} |
|||
} |
|||
|
|||
.result { |
|||
padding-left: 30px; |
|||
|
|||
div { |
|||
display: flex; |
|||
|
|||
p:nth-child(1) { |
|||
min-width: 150px; |
|||
} |
|||
|
|||
p:nth-child(2) { |
|||
position: relative; |
|||
top: 20px; |
|||
} |
|||
|
|||
span { |
|||
color: #188ae2; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-textarea { |
|||
width: 400px; |
|||
height: 80px; |
|||
resize: none; |
|||
|
|||
&.el-textarea__inner { |
|||
resize: none; |
|||
} |
|||
} |
|||
|
|||
.el-form-item__content { |
|||
position: relative; |
|||
|
|||
.info { |
|||
position: absolute; |
|||
font-size: 12px; |
|||
top: 48px; |
|||
color: #ccc; |
|||
line-height: normal; |
|||
} |
|||
} |
|||
|
|||
</style> |
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<div class="form-container"> |
|||
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|||
<el-form-item :label="label"> |
|||
<el-input v-model="formInline.name" placeholder="名称搜索"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="状态"> |
|||
<el-select v-model="formInline.state" value="" placeholder="状态"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option label="未开始" value="PENDING"></el-option> |
|||
<el-option label="进行中" value="ACTIVE"></el-option> |
|||
<el-option label="已失效" value="DISABLED"></el-option> |
|||
<el-option label="已结束" value="ENDED"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item style="padding-left:30px"> |
|||
<el-button type="default" @click="resetForm1('formInline')">重置</el-button> |
|||
<el-button type="primary" @click="onSubmit">查询</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'form-container', |
|||
props:['label'], |
|||
data() { |
|||
return { |
|||
formInline: { |
|||
name: '', |
|||
state: '', |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
onSubmit() { |
|||
this.$emit('submit', this.formInline) |
|||
}, |
|||
resetForm1() { |
|||
this.formInline = { |
|||
name: '', |
|||
state: '' |
|||
}; |
|||
this.$emit('resetForm'); |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.form-container { |
|||
padding: 20px; |
|||
background: #fff; |
|||
} |
|||
</style> |
@ -0,0 +1,336 @@ |
|||
<template> |
|||
<div> |
|||
<form-container label="名称" @submit="submitForm" @resetForm="resetForm"></form-container> |
|||
<div class="table"> |
|||
<el-row> |
|||
<router-link :to="`/marketingCenter/noviceCourtesy/noviceCourtesyDetails`" class="resetWH"> |
|||
<el-button type="primary"> |
|||
添加活动 |
|||
</el-button> |
|||
</router-link> |
|||
</el-row> |
|||
<el-table |
|||
:data="lists" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="name" |
|||
label="名称"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="state" |
|||
label="状态"> |
|||
<template slot-scope="lists"> |
|||
{{lists.row.state | filterState}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="date" |
|||
label="有效期"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createdDate" |
|||
label="创建时间"> |
|||
<template slot-scope="lists"> |
|||
{{lists.row.createdDate | filterCreatedDate}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
label="操作" |
|||
> |
|||
<template slot-scope="lists"> |
|||
<span |
|||
size="small" |
|||
class="option-span" |
|||
style="margin: 0 5px;" |
|||
@click="editItem(lists.row)"> |
|||
编辑 |
|||
</span> |
|||
<span |
|||
v-if="lists.row.state != 'DISABLED'" |
|||
size="small" |
|||
style="margin: 0 5px;" |
|||
class="option-span" |
|||
@click="enabledItem(lists.row)"> |
|||
失效 |
|||
</span> |
|||
<span |
|||
type="text" |
|||
size="small" |
|||
style="margin: 0 5px;" |
|||
class="option-span" |
|||
@click="removeItem(lists.row.id)" |
|||
> |
|||
删除 |
|||
</span> |
|||
|
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="params.size" |
|||
layout="prev, pager, next" |
|||
:total="count" |
|||
@current-change="currentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-dialog |
|||
width="815px" |
|||
:show-close="false" |
|||
:visible.sync="addMerchandise"> |
|||
2323 |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="resetFormDialog('ruleForm'), addMerchandise = false">取消</el-button> |
|||
<el-button type="primary" @click="determine" :loading="isLoading">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
GET_couponOffers_LIST as GET_LIST, |
|||
DELETE_couponOffers as DELETE_ITEM, |
|||
COUNT_couponOffers as COUNT, |
|||
ENABLE_couponOffers, |
|||
DISABLE_couponOffers, |
|||
POST_couponOffers as ADD_ITEM, |
|||
PUT_couponOffers as UPDATE_ITEM, |
|||
disable_couponOffers |
|||
|
|||
} from '@/api/marketingCenter' |
|||
|
|||
import Alert from "@/utils/alert"; |
|||
import {pageSize} from '../../../config'; |
|||
|
|||
const FormContainer = () => import('./form.vue'); |
|||
|
|||
import {FormateYYMMDD, dateTimeFormateHHmm} from "@/filters/index"; |
|||
|
|||
export default { |
|||
name: "index", |
|||
data() { |
|||
return { |
|||
isLoading: false, |
|||
hackReset: true, |
|||
addMerchandise: false, |
|||
lists: [], |
|||
count: 0, |
|||
id: '', |
|||
params: { |
|||
from: 0, |
|||
size: pageSize, |
|||
query: '', |
|||
state: '' |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
components: { |
|||
FormContainer |
|||
}, |
|||
methods: { |
|||
|
|||
/** |
|||
* 获取列表数据 |
|||
*/ |
|||
getList() { |
|||
GET_LIST(this.params).then(res => { |
|||
res.map((item) => { |
|||
if (item.permanent) { |
|||
item.date = '永久有效'; |
|||
} else { |
|||
|
|||
item.date = dateTimeFormateHHmm(item.startDate) + ' 至 ' + dateTimeFormateHHmm(item.endDate); |
|||
} |
|||
return item |
|||
}); |
|||
this.lists = res |
|||
}); |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 获取总数 |
|||
*/ |
|||
getCount() { |
|||
COUNT(this.params).then(res => { |
|||
this.count = res |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
submitForm(res) { |
|||
this.params = { |
|||
...this.params, |
|||
query: res.name, |
|||
state: res.state |
|||
}; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
resetForm() { |
|||
this.params = { |
|||
from: 0, |
|||
size: pageSize, |
|||
query: '' |
|||
}; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
/** |
|||
* 翻页 |
|||
*/ |
|||
currentChange(res) { |
|||
this.params = { |
|||
...this.params, |
|||
from: parseInt(res - 1) * this.params.size, |
|||
size: pageSize, |
|||
}; |
|||
this.getList() |
|||
}, |
|||
|
|||
enabledItem(row) { |
|||
disable_couponOffers(row.id).then(res => { |
|||
Alert.success("操作成功"); |
|||
this.getList(); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 删除商品 |
|||
*/ |
|||
removeItem(id) { |
|||
this.$confirm('确定删除此商品嘛?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
DELETE_ITEM(id).then((res) => { |
|||
let lists = []; |
|||
this.lists.map((item) => { |
|||
if (item.id != id) { |
|||
lists.push(item) |
|||
} |
|||
return item; |
|||
}); |
|||
this.lists = lists; |
|||
}); |
|||
Alert.success("删除成功"); |
|||
}).catch(() => { |
|||
|
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 编辑商品 |
|||
*/ |
|||
editItem(row) { |
|||
this.$router.push('/marketingCenter/noviceCourtesy/noviceCourtesyDetails?id=' + row.id + '&state=' + row.state); |
|||
}, |
|||
|
|||
/** |
|||
* 确定保存 |
|||
*/ |
|||
determine() { |
|||
let that = this; |
|||
|
|||
let commodityDetails = this.$refs['commodityDetails'].$refs['ruleForm']; |
|||
commodityDetails.validate((val) => { |
|||
if (val) { |
|||
that.isLoading = true; |
|||
let list = this.$refs['commodityDetails'].ruleForm; |
|||
if (!list.id) { |
|||
ADD_ITEM(list).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('新建成功'); |
|||
that.addMerchandise = false; |
|||
that.hackReset = false; |
|||
that.isLoading = false; |
|||
}, 1500); |
|||
|
|||
}) |
|||
} else { |
|||
UPDATE_ITEM(list).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('更新成功'); |
|||
that.addMerchandise = false; |
|||
that.hackReset = false; |
|||
that.isLoading = false; |
|||
}, 1500); |
|||
|
|||
}) |
|||
} |
|||
setTimeout(() => { |
|||
that.getList(); |
|||
that.isLoading = false; |
|||
}, 1500); |
|||
|
|||
|
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 取消弹层 |
|||
*/ |
|||
resetFormDialog() { |
|||
this.hackReset = false;//销毁组件 |
|||
this.$refs['commodityDetails'].$refs['ruleForm'].resetFields(); |
|||
} |
|||
}, |
|||
filters: { |
|||
filterState(val) { |
|||
switch (val) { |
|||
case 'PENDING': |
|||
return '未开始'; |
|||
case 'ACTIVE': |
|||
return '进行中'; |
|||
case 'DISABLED': |
|||
return '已失效'; |
|||
case 'ENDED': |
|||
return '已结束'; |
|||
case '': |
|||
return '全部'; |
|||
} |
|||
}, |
|||
filterCreatedDate(val) { |
|||
return dateTimeFormateHHmm(val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.table { |
|||
margin-top: 20px; |
|||
padding: 30px; |
|||
background: #fff; |
|||
|
|||
.option-span { |
|||
color: #409EFF; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.pagination { |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
@ -0,0 +1,315 @@ |
|||
<template> |
|||
<div class="form"> |
|||
<el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm"> |
|||
<el-form-item label="活动名称" prop="name" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input :disabled="DISABLED" v-model="ruleForm.name"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="活动时间" prop="permanent"> |
|||
<el-switch |
|||
:rules="[{required: true, message: '不能为空', trigger: 'blur'}]" |
|||
:disabled="disabled" |
|||
v-model="ruleForm.permanent" |
|||
active-text="永久有效"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="" v-if="!ruleForm.permanent" prop="date" |
|||
:rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-date-picker |
|||
:disabled="disabled" |
|||
v-model="date" |
|||
type="datetimerange" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="选择优惠券" prop="couponId" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-select v-model="ruleForm.couponId" :disabled="DISABLED" placeholder="选择优惠券" :clearable="true"> |
|||
<el-option v-for="item in coupons" :key="item.id" :label="item.name" |
|||
:value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="选择场地"> |
|||
<el-select v-model="ruleForm.locationIds" :disabled="DISABLED" placeholder="选择场地" multiple |
|||
:clearable="true"> |
|||
<el-option v-for="item in locationIds" :key="item.id" :label="item.name" |
|||
:value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item style="text-align: center;" v-if="!DISABLED"> |
|||
<el-button type="primary" @click="submitForm('ruleForm')" :loading="isLoading">提交</el-button> |
|||
<el-button @click="resetForm('ruleForm')">重置</el-button> |
|||
</el-form-item> |
|||
|
|||
|
|||
</el-form> |
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
import {GET_LOCATIONS, GET_COUPONS} from '@/api/common' |
|||
import Alert from "@/utils/alert"; |
|||
|
|||
import {mapActions} from "vuex"; |
|||
import { |
|||
POST_couponOffers as ADD_ITEM, |
|||
PUT_couponOffers as UPDATE_ITEM, |
|||
DETAIL_couponOffers as DETAIL_ITEM |
|||
} from '@/api/marketingCenter' |
|||
|
|||
import {FormateYYMMDD} from "@/filters/index"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
noThreshold: false, // 无门槛 |
|||
noRestriction: false, // 不限制 |
|||
date: [], |
|||
locationIds: [], |
|||
disabled: false, |
|||
DISABLED: false, |
|||
isLoading: false, |
|||
coupons: [], |
|||
ruleForm: { |
|||
id: '', |
|||
name: '', |
|||
permanent: false, |
|||
startDate: '', |
|||
endDate: '', |
|||
date: '', |
|||
locationIds: '', |
|||
couponId: '' |
|||
}, |
|||
equipmentType: [] |
|||
}; |
|||
}, |
|||
props: ['currId'], |
|||
computed: { |
|||
id() { |
|||
return this.$route.query.id |
|||
}, |
|||
state() { |
|||
return this.$route.query.state |
|||
} |
|||
}, |
|||
mounted() { |
|||
if (this.id) { |
|||
this.getDetailItem(); |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
id: this.id |
|||
} |
|||
} |
|||
|
|||
GET_LOCATIONS().then(res => { |
|||
this.locationIds = res |
|||
}); |
|||
GET_COUPONS().then(res => { |
|||
this.coupons = res |
|||
}) |
|||
}, |
|||
watch: { |
|||
date(val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
date: val, |
|||
startDate: val[0], |
|||
endDate: val[1] |
|||
}; |
|||
} |
|||
}, |
|||
methods: { |
|||
...mapActions([ |
|||
"delVisitedView" |
|||
]), |
|||
/** |
|||
* 获取商品详情 |
|||
*/ |
|||
getDetailItem() { |
|||
|
|||
DETAIL_ITEM(this.id).then(res => { |
|||
if (this.state == 'DISABLED') { |
|||
this.DISABLED = true; |
|||
Alert.fail('已失效的活动不能编辑,只能查看'); |
|||
} |
|||
this.date.push(res.startDate); |
|||
this.date.push(res.endDate); |
|||
this.disabled = true; |
|||
this.ruleForm = res; |
|||
}) |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 无门槛 |
|||
*/ |
|||
noThresholdFun(val) { |
|||
this.noThreshold = val; |
|||
if (val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minAmount: ' ' |
|||
} |
|||
} else { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minAmount: '', |
|||
startDate: '', |
|||
endDate: '' |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 不限制 |
|||
*/ |
|||
noRestrictionFun(val) { |
|||
this.noRestriction = val; |
|||
}, |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
resetForm() { |
|||
this.$refs['ruleForm'].resetFields(); |
|||
}, |
|||
|
|||
/** |
|||
* 提交 |
|||
*/ |
|||
submitForm() { |
|||
let that = this; |
|||
let noviceCourtesyDetails = this.$refs['ruleForm']; |
|||
noviceCourtesyDetails.validate((val) => { |
|||
if (val) { |
|||
that.isLoading = true; |
|||
if (!that.ruleForm.id) { |
|||
console.log(that.ruleForm); |
|||
ADD_ITEM({...that.ruleForm}).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('新建成功'); |
|||
that.isLoading = false; |
|||
that.delVisitedView(that.$route).then(res => { |
|||
that.$router.go(-1); |
|||
}); |
|||
}, 1500); |
|||
|
|||
}).catch(err=>{ |
|||
Alert.fail(err); |
|||
that.isLoading = false; |
|||
}) |
|||
} else { |
|||
UPDATE_ITEM({...that.ruleForm}).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('更新成功'); |
|||
that.isLoading = false; |
|||
that.delVisitedView(that.$route).then(res => { |
|||
that.$router.go(-1); |
|||
}); |
|||
}, 1500); |
|||
|
|||
}).catch(err=>{ |
|||
Alert.fail(err); |
|||
that.isLoading = false; |
|||
}) |
|||
} |
|||
|
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.form { |
|||
height: 100%; |
|||
background: #fff; |
|||
padding: 30px 30px 30px 0; |
|||
} |
|||
|
|||
.file { |
|||
position: relative; |
|||
top: 0; |
|||
display: inline-block; |
|||
border: 1px solid #e6e6e6; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
color: #1E88C7; |
|||
text-decoration: none; |
|||
text-indent: 0; |
|||
width: 110px; |
|||
height: 140px; |
|||
text-align: center; |
|||
line-height: 85px; |
|||
font-size: 40px; |
|||
|
|||
input { |
|||
position: absolute; |
|||
font-size: 100px; |
|||
right: 0; |
|||
top: 0; |
|||
opacity: 0; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.image { |
|||
width: 110px; |
|||
height: 140px; |
|||
position: relative; |
|||
|
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
i { |
|||
position: absolute; |
|||
top: -6px; |
|||
right: -6px; |
|||
display: inline-block; |
|||
width: 15px; |
|||
height: 15px; |
|||
line-height: 15px; |
|||
text-align: center; |
|||
background: red; |
|||
border-radius: 50%; |
|||
color: #fff; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.el-textarea { |
|||
width: 400px; |
|||
height: 80px; |
|||
resize: none; |
|||
|
|||
&.el-textarea__inner { |
|||
resize: none; |
|||
} |
|||
} |
|||
|
|||
.el-form-item__content { |
|||
position: relative; |
|||
|
|||
.info { |
|||
position: absolute; |
|||
font-size: 12px; |
|||
top: 48px; |
|||
color: #ccc; |
|||
line-height: normal; |
|||
} |
|||
} |
|||
|
|||
</style> |
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<div class="form-container"> |
|||
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|||
<el-form-item :label="label"> |
|||
<el-input v-model="formInline.name" placeholder="名称搜索"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="状态"> |
|||
<el-select v-model="formInline.state" value="" placeholder="状态"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option label="未开始" value="PENDING"></el-option> |
|||
<el-option label="进行中" value="ACTIVE"></el-option> |
|||
<el-option label="已失效" value="DISABLED"></el-option> |
|||
<el-option label="已结束" value="ENDED"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item style="padding-left:30px"> |
|||
<el-button type="default" @click="resetForm1('formInline')">重置</el-button> |
|||
<el-button type="primary" @click="onSubmit">查询</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'form-container', |
|||
props:['label'], |
|||
data() { |
|||
return { |
|||
formInline: { |
|||
name: '', |
|||
state: '', |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
onSubmit() { |
|||
this.$emit('submit', this.formInline) |
|||
}, |
|||
resetForm1() { |
|||
this.formInline = { |
|||
name: '', |
|||
state: '' |
|||
}; |
|||
this.$emit('resetForm'); |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.form-container { |
|||
padding: 20px; |
|||
background: #fff; |
|||
} |
|||
</style> |
@ -0,0 +1,272 @@ |
|||
<template> |
|||
<div> |
|||
<form-container label="名称" @submit="submitForm" @resetForm="resetForm"></form-container> |
|||
<div class="table"> |
|||
<el-row> |
|||
<router-link :to="`/marketingCenter/paymentOfCourtesy/paymentOfCourtesyDetails`" class="resetWH"> |
|||
<el-button type="primary"> |
|||
添加活动 |
|||
</el-button> |
|||
</router-link> |
|||
</el-row> |
|||
<el-table |
|||
:data="lists" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="name" |
|||
label="名称"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="state" |
|||
label="状态"> |
|||
<template slot-scope="lists"> |
|||
{{lists.row.state | filterState}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="date" |
|||
label="有效期"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createdDate" |
|||
label="创建时间"> |
|||
<template slot-scope="lists"> |
|||
{{lists.row.createdDate | filterCreatedDate}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
label="操作" |
|||
> |
|||
<template slot-scope="lists"> |
|||
<span |
|||
size="small" |
|||
class="option-span" |
|||
style="margin: 0 5px;" |
|||
@click="editItem(lists.row)"> |
|||
编辑 |
|||
</span> |
|||
<span |
|||
v-if="lists.row.state != 'DISABLED'" |
|||
size="small" |
|||
style="margin: 0 5px;" |
|||
class="option-span" |
|||
@click="enabledItem(lists.row)"> |
|||
失效 |
|||
</span> |
|||
<span |
|||
type="text" |
|||
size="small" |
|||
style="margin: 0 5px;" |
|||
class="option-span" |
|||
@click="removeItem(lists.row.id)" |
|||
> |
|||
删除 |
|||
</span> |
|||
|
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="params.size" |
|||
layout="prev, pager, next" |
|||
:total="count" |
|||
@current-change="currentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { |
|||
GET_payGiftOffers_LIST as GET_LIST, |
|||
DELETE_payGiftOffers as DELETE_ITEM, |
|||
COUNT_payGiftOffers as COUNT, |
|||
disable_payGiftOffers |
|||
} from '@/api/marketingCenter' |
|||
|
|||
import Alert from "@/utils/alert"; |
|||
import {pageSize} from '../../../config'; |
|||
|
|||
const FormContainer = () => import('./form.vue'); |
|||
|
|||
import {FormateYYMMDD ,dateTimeFormateHHmm} from "@/filters/index"; |
|||
|
|||
export default { |
|||
name: "index", |
|||
data() { |
|||
return { |
|||
isLoading: false, |
|||
hackReset: true, |
|||
addMerchandise: false, |
|||
lists: [], |
|||
count: 0, |
|||
id: '', |
|||
params: { |
|||
from: 0, |
|||
size: pageSize, |
|||
query: '', |
|||
state: '' |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
components: { |
|||
FormContainer |
|||
}, |
|||
methods: { |
|||
|
|||
/** |
|||
* 获取列表数据 |
|||
*/ |
|||
getList() { |
|||
GET_LIST(this.params).then(res => { |
|||
res.map((item) => { |
|||
if (item.permanent) { |
|||
item.date = '永久有效'; |
|||
} else { |
|||
|
|||
item.date = dateTimeFormateHHmm(item.startDate) + ' 至 ' + dateTimeFormateHHmm(item.endDate); |
|||
} |
|||
return item |
|||
}); |
|||
this.lists = res |
|||
}); |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 获取总数 |
|||
*/ |
|||
getCount() { |
|||
COUNT(this.params).then(res => { |
|||
this.count = res |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
submitForm(res) { |
|||
this.params = { |
|||
...this.params, |
|||
query: res.name, |
|||
state: res.state |
|||
}; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
resetForm() { |
|||
this.params = { |
|||
from: 0, |
|||
size: pageSize, |
|||
query: '' |
|||
}; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
/** |
|||
* 翻页 |
|||
*/ |
|||
currentChange(res) { |
|||
this.params = { |
|||
...this.params, |
|||
from: parseInt(res - 1) * this.params.size, |
|||
size: pageSize, |
|||
}; |
|||
this.getList() |
|||
}, |
|||
|
|||
enabledItem(row) { |
|||
disable_payGiftOffers(row.id).then(res => { |
|||
Alert.success("操作成功"); |
|||
this.getList(); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 删除商品 |
|||
*/ |
|||
removeItem(id) { |
|||
this.$confirm('确定删除此商品嘛?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
DELETE_ITEM(id).then((res) => { |
|||
let lists = []; |
|||
this.lists.map((item) => { |
|||
if (item.id != id) { |
|||
lists.push(item) |
|||
} |
|||
return item; |
|||
}); |
|||
this.lists = lists; |
|||
}); |
|||
Alert.success("删除成功"); |
|||
}).catch(() => { |
|||
|
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 编辑商品 |
|||
*/ |
|||
editItem(row) { |
|||
this.$router.push('/marketingCenter/paymentOfCourtesy/paymentOfCourtesyDetails?id=' + row.id + '&state=' + row.state); |
|||
} |
|||
}, |
|||
filters: { |
|||
filterState(val) { |
|||
switch (val) { |
|||
case 'PENDING': |
|||
return '未开始'; |
|||
case 'ACTIVE': |
|||
return '进行中'; |
|||
case 'DISABLED': |
|||
return '已失效'; |
|||
case 'ENDED': |
|||
return '已结束'; |
|||
case '': |
|||
return '全部'; |
|||
} |
|||
}, |
|||
filterCreatedDate(val) { |
|||
return dateTimeFormateHHmm(val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.table { |
|||
margin-top: 20px; |
|||
padding: 30px; |
|||
background: #fff; |
|||
|
|||
.option-span { |
|||
color: #409EFF; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.pagination { |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
@ -0,0 +1,430 @@ |
|||
<template> |
|||
<div class="form"> |
|||
<el-form :model="ruleForm" ref="ruleForm" :rules="rules2" label-width="120px" class="demo-ruleForm"> |
|||
<el-form-item label="活动名称" prop="name" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input v-model="ruleForm.name" :disabled="DISABLED"></el-input> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="门槛"> |
|||
<el-switch |
|||
:disabled="DISABLED" |
|||
v-model="ruleForm.applyRule" |
|||
active-text="无门槛"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="" v-if="!ruleForm.applyRule" prop="isFull"> |
|||
<el-radio-group v-model="ruleForm.isMinQuantity" :disabled="DISABLED" @change="applyRuleFun"> |
|||
<el-radio label="minQuantity"> |
|||
满 |
|||
<el-input style="width: 80px" :disabled="DISABLED || !isMinQuantity" |
|||
@change="minQuantityFun" v-model="ruleForm.minQuantity"></el-input> |
|||
件 |
|||
</el-radio> |
|||
<el-radio label="minAmount"> |
|||
满 |
|||
<el-input style="width: 80px" :disabled="DISABLED || isMinQuantity" |
|||
@change="minAmountFun" v-model="ruleForm.minAmount"></el-input> |
|||
元 |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="参与次数"> |
|||
<el-switch |
|||
:disabled="DISABLED" |
|||
v-model="ruleForm.isUnlimited" |
|||
active-text="无限制"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item v-if="!ruleForm.isUnlimited" prop="limitPerCustomer" |
|||
:rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
每人参与 |
|||
<el-input style="width: 80px" :disabled="DISABLED" v-model="ruleForm.limitPerCustomer"></el-input> |
|||
次 |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="活动时间"> |
|||
<el-switch :disabled="disabled" |
|||
v-model="ruleForm.permanent" |
|||
active-text="永久有效"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="" v-if="!ruleForm.permanent" prop="date" |
|||
:rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-date-picker |
|||
:disabled="disabled" |
|||
v-model="date" |
|||
type="datetimerange" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="选择优惠券" prop="couponId" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-select v-model="ruleForm.couponId" :disabled="DISABLED" placeholder="选择优惠券"> |
|||
<el-option v-for="item in coupons" :key="item.id" :label="item.name" |
|||
:value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="选择场地"> |
|||
<el-select v-model="ruleForm.locationIds" :disabled="DISABLED" placeholder="选择场地" multiple |
|||
:clearable="true"> |
|||
<el-option v-for="item in locationIds" :key="item.id" :label="item.name" |
|||
:value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item style="text-align: center;" v-if="!DISABLED"> |
|||
<el-button type="primary" @click="submitForm('ruleForm')" :loading="isLoading">提交</el-button> |
|||
<el-button @click="resetForm('ruleForm')">重置</el-button> |
|||
</el-form-item> |
|||
|
|||
|
|||
</el-form> |
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
import {GET_LOCATIONS, GET_COUPONS} from '@/api/common' |
|||
import Alert from "@/utils/alert"; |
|||
|
|||
import {mapActions} from "vuex"; |
|||
import { |
|||
POST_payGiftOffers as ADD_ITEM, |
|||
PUT_payGiftOffers as UPDATE_ITEM, |
|||
DETAIL_payGiftOffers as DETAIL_ITEM |
|||
} from '@/api/marketingCenter' |
|||
|
|||
import {FormateYYMMDD, dateTimeFormateHHmm} from "@/filters/index"; |
|||
|
|||
export default { |
|||
data() { |
|||
let validatePass = (rule, value, callback) => { |
|||
if (!value) { |
|||
return callback(new Error('不能为空')); |
|||
} |
|||
callback() |
|||
}; |
|||
return { |
|||
isLoading: false, |
|||
noThreshold: false, // 无门槛 |
|||
noRestriction: false, // 不限制 |
|||
disabled: false, |
|||
DISABLED: false, |
|||
isMinQuantity: true, |
|||
date: [], |
|||
locationIds: [], |
|||
coupons: [], |
|||
ruleForm: { |
|||
id: '', |
|||
name: '', |
|||
isFull: '', |
|||
permanent: false, |
|||
startDate: '', |
|||
endDate: '', |
|||
date: '', |
|||
isMinQuantity: 'minQuantity', |
|||
limitPerCustomer: '', |
|||
applyRule: false, |
|||
isUnlimited: false, |
|||
locationIds: [], |
|||
couponId: '' |
|||
}, |
|||
rules2: { |
|||
isFull: [ |
|||
{validator: validatePass, trigger: 'blur'} |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
computed: { |
|||
id() { |
|||
return this.$route.query.id |
|||
}, |
|||
state() { |
|||
return this.$route.query.state |
|||
} |
|||
}, |
|||
mounted() { |
|||
if (this.id) { |
|||
this.getDetailItem(); |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
id: this.id |
|||
} |
|||
} |
|||
|
|||
GET_LOCATIONS().then(res => { |
|||
this.locationIds = res |
|||
}); |
|||
|
|||
GET_COUPONS().then(res => { |
|||
this.coupons = res |
|||
}) |
|||
}, |
|||
watch: { |
|||
date(val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
date: val, |
|||
startDate: val[0], |
|||
endDate: val[1] |
|||
}; |
|||
} |
|||
}, |
|||
methods: { |
|||
...mapActions([ |
|||
"delVisitedView" |
|||
]), |
|||
/** |
|||
* 获取商品详情 |
|||
*/ |
|||
getDetailItem() { |
|||
DETAIL_ITEM(this.id).then(res => { |
|||
this.date.push(res.startDate); |
|||
this.date.push(res.endDate); |
|||
this.disabled = true; |
|||
|
|||
if (this.state == 'DISABLED') { |
|||
this.DISABLED = true |
|||
Alert.fail('已失效的活动不能编辑,只能查看'); |
|||
} |
|||
|
|||
if (res.limitPerCustomer === 0) { |
|||
res.isUnlimited = true |
|||
} |
|||
res.isFull = res.minQuantity || res.minAmount; |
|||
this.ruleForm = res; |
|||
|
|||
|
|||
if (res.minQuantity) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
isMinQuantity: 'minQuantity' |
|||
}; |
|||
this.isMinQuantity = true |
|||
} else { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
isMinQuantity: 'minAmount' |
|||
}; |
|||
this.isMinQuantity = false |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
|
|||
minQuantityFun(val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
isFull: val |
|||
} |
|||
}, |
|||
|
|||
minAmountFun(val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
isFull: val |
|||
} |
|||
}, |
|||
|
|||
|
|||
applyRuleFun(val) { |
|||
if (val = 'minQuantity') { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minAmount: '', |
|||
minQuantity: '' |
|||
}; |
|||
this.isMinQuantity = !this.isMinQuantity |
|||
} else { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minQuantity: '', |
|||
minAmount: '' |
|||
}; |
|||
this.isMinQuantity = !this.isMinQuantity |
|||
} |
|||
}, |
|||
/** |
|||
* 无门槛 |
|||
*/ |
|||
noThresholdFun(val) { |
|||
this.noThreshold = val; |
|||
if (val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minAmount: ' ' |
|||
} |
|||
} else { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minAmount: '', |
|||
startDate: '', |
|||
endDate: '' |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 不限制 |
|||
*/ |
|||
noRestrictionFun(val) { |
|||
this.noRestriction = val; |
|||
}, |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
resetForm() { |
|||
this.$refs['ruleForm'].resetFields(); |
|||
}, |
|||
|
|||
/** |
|||
* 提交 |
|||
*/ |
|||
submitForm() { |
|||
let that = this; |
|||
let paymentOfCourtesyDetails = this.$refs['ruleForm']; |
|||
paymentOfCourtesyDetails.validate((val) => { |
|||
|
|||
if (val) { |
|||
that.isLoading = true; |
|||
if (that.ruleForm.isUnlimited) { |
|||
that.ruleForm = { |
|||
...that.ruleForm, |
|||
limitPerCustomer: 0 |
|||
} |
|||
} |
|||
if (!that.ruleForm.id) { |
|||
ADD_ITEM({...that.ruleForm}).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('新建成功'); |
|||
that.isLoading = false; |
|||
that.delVisitedView(that.$route).then(res => { |
|||
that.$router.go(-1); |
|||
}); |
|||
}, 1500); |
|||
|
|||
}).catch(err => { |
|||
Alert.fail(err); |
|||
that.isLoading = false; |
|||
}) |
|||
} else { |
|||
UPDATE_ITEM({...that.ruleForm}).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('更新成功'); |
|||
that.isLoading = false; |
|||
that.delVisitedView(that.$route).then(res => { |
|||
that.$router.go(-1); |
|||
}); |
|||
}, 1500); |
|||
|
|||
}).catch(err => { |
|||
Alert.fail(err); |
|||
that.isLoading = false; |
|||
}) |
|||
} |
|||
|
|||
|
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.form { |
|||
height: 100%; |
|||
background: #fff; |
|||
padding: 30px 30px 30px 0; |
|||
} |
|||
|
|||
.file { |
|||
position: relative; |
|||
top: 0; |
|||
display: inline-block; |
|||
border: 1px solid #e6e6e6; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
color: #1E88C7; |
|||
text-decoration: none; |
|||
text-indent: 0; |
|||
width: 110px; |
|||
height: 140px; |
|||
text-align: center; |
|||
line-height: 85px; |
|||
font-size: 40px; |
|||
|
|||
input { |
|||
position: absolute; |
|||
font-size: 100px; |
|||
right: 0; |
|||
top: 0; |
|||
opacity: 0; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.image { |
|||
width: 110px; |
|||
height: 140px; |
|||
position: relative; |
|||
|
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
i { |
|||
position: absolute; |
|||
top: -6px; |
|||
right: -6px; |
|||
display: inline-block; |
|||
width: 15px; |
|||
height: 15px; |
|||
line-height: 15px; |
|||
text-align: center; |
|||
background: red; |
|||
border-radius: 50%; |
|||
color: #fff; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.el-textarea { |
|||
width: 400px; |
|||
height: 80px; |
|||
resize: none; |
|||
|
|||
&.el-textarea__inner { |
|||
resize: none; |
|||
} |
|||
} |
|||
|
|||
.el-form-item__content { |
|||
position: relative; |
|||
|
|||
.info { |
|||
position: absolute; |
|||
font-size: 12px; |
|||
top: 48px; |
|||
color: #ccc; |
|||
line-height: normal; |
|||
} |
|||
} |
|||
|
|||
</style> |
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<div class="form-container"> |
|||
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|||
<el-form-item :label="label"> |
|||
<el-input v-model="formInline.name" placeholder="名称搜索"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="状态"> |
|||
<el-select v-model="formInline.state" value="" placeholder="状态"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option label="未开始" value="PENDING"></el-option> |
|||
<el-option label="进行中" value="ACTIVE"></el-option> |
|||
<el-option label="已失效" value="DISABLED"></el-option> |
|||
<el-option label="已结束" value="ENDED"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item style="padding-left:30px"> |
|||
<el-button type="default" @click="resetForm1('formInline')">重置</el-button> |
|||
<el-button type="primary" @click="onSubmit">查询</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'form-container', |
|||
props:['label'], |
|||
data() { |
|||
return { |
|||
formInline: { |
|||
name: '', |
|||
state: '', |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
onSubmit() { |
|||
this.$emit('submit', this.formInline) |
|||
}, |
|||
resetForm1() { |
|||
this.formInline = { |
|||
name: '', |
|||
state: '' |
|||
}; |
|||
this.$emit('resetForm'); |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.form-container { |
|||
padding: 20px; |
|||
background: #fff; |
|||
} |
|||
</style> |
@ -0,0 +1,332 @@ |
|||
<template> |
|||
<div> |
|||
<form-container label="名称" @submit="submitForm" @resetForm="resetForm"></form-container> |
|||
<div class="table"> |
|||
<el-row> |
|||
<router-link :to="`/marketingCenter/salesPromotion/salesPromotionDetails`" class="resetWH"> |
|||
<el-button type="primary"> |
|||
添加活动 |
|||
</el-button> |
|||
</router-link> |
|||
</el-row> |
|||
<el-table |
|||
:data="lists" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="name" |
|||
label="名称"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="state" |
|||
label="状态"> |
|||
<template slot-scope="lists"> |
|||
{{lists.row.state | filterState}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="date" |
|||
label="有效期"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createdDate" |
|||
label="创建时间"> |
|||
<template slot-scope="lists"> |
|||
{{lists.row.createdDate | filterCreatedDate}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
label="操作" |
|||
> |
|||
<template slot-scope="lists"> |
|||
<span |
|||
size="small" |
|||
class="option-span" |
|||
style="margin: 0 5px;" |
|||
@click="editItem(lists.row)"> |
|||
编辑 |
|||
</span> |
|||
<span |
|||
v-if="lists.row.state != 'DISABLED'" |
|||
size="small" |
|||
style="margin: 0 5px;" |
|||
class="option-span" |
|||
@click="enabledItem(lists.row)"> |
|||
失效 |
|||
</span> |
|||
<span |
|||
type="text" |
|||
size="small" |
|||
style="margin: 0 5px;" |
|||
class="option-span" |
|||
@click="removeItem(lists.row.id)" |
|||
> |
|||
删除 |
|||
</span> |
|||
|
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="params.size" |
|||
layout="prev, pager, next" |
|||
:total="count" |
|||
@current-change="currentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-dialog |
|||
width="815px" |
|||
:show-close="false" |
|||
:visible.sync="addMerchandise"> |
|||
2323 |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="resetFormDialog('ruleForm'), addMerchandise = false">取消</el-button> |
|||
<el-button type="primary" @click="determine" :loading="isLoading">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { |
|||
GET_discountOffers_LIST as GET_LIST, |
|||
DELETE_discountOffers as DELETE_ITEM, |
|||
COUNT_discountOffers as COUNT, |
|||
disable_discountOffers |
|||
} from '@/api/marketingCenter' |
|||
|
|||
import Alert from "@/utils/alert"; |
|||
import {pageSize} from '../../../config'; |
|||
|
|||
const FormContainer = () => import('./form.vue'); |
|||
|
|||
import {FormateYYMMDD, dateTimeFormateHHmm} from "@/filters/index"; |
|||
|
|||
export default { |
|||
name: "index", |
|||
data() { |
|||
return { |
|||
isLoading: false, |
|||
hackReset: true, |
|||
addMerchandise: false, |
|||
lists: [], |
|||
count: 0, |
|||
id: '', |
|||
params: { |
|||
from: 0, |
|||
size: pageSize, |
|||
query: '', |
|||
state: '' |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
components: { |
|||
FormContainer |
|||
}, |
|||
methods: { |
|||
|
|||
/** |
|||
* 获取列表数据 |
|||
*/ |
|||
getList() { |
|||
GET_LIST(this.params).then(res => { |
|||
res.map((item) => { |
|||
if (item.permanent) { |
|||
item.date = '永久有效'; |
|||
} else { |
|||
|
|||
item.date = dateTimeFormateHHmm(item.startDate) + ' 至 ' + dateTimeFormateHHmm(item.endDate); |
|||
} |
|||
return item |
|||
}); |
|||
this.lists = res |
|||
}); |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 获取总数 |
|||
*/ |
|||
getCount() { |
|||
COUNT(this.params).then(res => { |
|||
this.count = res |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
submitForm(res) { |
|||
this.params = { |
|||
...this.params, |
|||
query: res.name, |
|||
state: res.state |
|||
}; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
resetForm() { |
|||
this.params = { |
|||
from: 0, |
|||
size: pageSize, |
|||
query: '' |
|||
}; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
/** |
|||
* 翻页 |
|||
*/ |
|||
currentChange(res) { |
|||
this.params = { |
|||
...this.params, |
|||
from: parseInt(res - 1) * this.params.size, |
|||
size: pageSize, |
|||
}; |
|||
this.getList() |
|||
}, |
|||
|
|||
enabledItem(row) { |
|||
disable_discountOffers(row.id).then(res => { |
|||
Alert.success("操作成功"); |
|||
this.getList(); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 删除商品 |
|||
*/ |
|||
removeItem(id) { |
|||
this.$confirm('确定删除此商品嘛?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
DELETE_ITEM(id).then((res) => { |
|||
let lists = []; |
|||
this.lists.map((item) => { |
|||
if (item.id != id) { |
|||
lists.push(item) |
|||
} |
|||
return item; |
|||
}); |
|||
this.lists = lists; |
|||
}); |
|||
Alert.success("删除成功"); |
|||
}).catch(() => { |
|||
|
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 编辑商品 |
|||
*/ |
|||
editItem(row) { |
|||
this.$router.push('/marketingCenter/salesPromotion/salesPromotionDetails?id=' + row.id + '&state=' + row.state); |
|||
}, |
|||
|
|||
/** |
|||
* 确定保存 |
|||
*/ |
|||
determine() { |
|||
let that = this; |
|||
|
|||
let commodityDetails = this.$refs['commodityDetails'].$refs['ruleForm']; |
|||
commodityDetails.validate((val) => { |
|||
if (val) { |
|||
that.isLoading = true; |
|||
let list = this.$refs['commodityDetails'].ruleForm; |
|||
if (!list.id) { |
|||
ADD_ITEM(list).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('新建成功'); |
|||
that.addMerchandise = false; |
|||
that.hackReset = false; |
|||
that.isLoading = false; |
|||
}, 1500); |
|||
|
|||
}) |
|||
} else { |
|||
UPDATE_ITEM(list).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('更新成功'); |
|||
that.addMerchandise = false; |
|||
that.hackReset = false; |
|||
that.isLoading = false; |
|||
}, 1500); |
|||
|
|||
}) |
|||
} |
|||
setTimeout(() => { |
|||
that.getList(); |
|||
that.isLoading = false; |
|||
}, 1500); |
|||
|
|||
|
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 取消弹层 |
|||
*/ |
|||
resetFormDialog() { |
|||
this.hackReset = false;//销毁组件 |
|||
this.$refs['commodityDetails'].$refs['ruleForm'].resetFields(); |
|||
} |
|||
}, |
|||
filters: { |
|||
filterState(val) { |
|||
switch (val) { |
|||
case 'PENDING': |
|||
return '未开始'; |
|||
case 'ACTIVE': |
|||
return '进行中'; |
|||
case 'DISABLED': |
|||
return '已失效'; |
|||
case 'ENDED': |
|||
return '已结束'; |
|||
case '': |
|||
return '全部'; |
|||
} |
|||
}, |
|||
filterCreatedDate(val) { |
|||
return dateTimeFormateHHmm(val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.table { |
|||
margin-top: 20px; |
|||
padding: 30px; |
|||
background: #fff; |
|||
|
|||
.option-span { |
|||
color: #409EFF; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.pagination { |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
@ -0,0 +1,505 @@ |
|||
<template> |
|||
<div class="form"> |
|||
<el-form :model="ruleForm" ref="ruleForm" :rules="rules2" label-width="120px" class="demo-ruleForm"> |
|||
<el-form-item label="活动名称" prop="name" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-input :disabled="DISABLED" v-model="ruleForm.name"></el-input> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="门槛"> |
|||
<el-switch |
|||
:disabled="DISABLED" |
|||
v-model="ruleForm.applyRule" |
|||
active-text="无门槛"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="" v-if="!ruleForm.applyRule" prop="isFull"> |
|||
<el-radio-group v-model="ruleForm.isMinQuantity" @change="applyRuleFun"> |
|||
<el-radio label="minQuantity"> |
|||
满 |
|||
<el-input style="width: 80px" :disabled="DISABLED || !isMinQuantity" |
|||
@change="minQuantityFun" v-model="ruleForm.minQuantity"></el-input> |
|||
件 |
|||
</el-radio> |
|||
<el-radio label="minAmount"> |
|||
满 |
|||
<el-input style="width: 80px" :disabled="DISABLED || isMinQuantity" |
|||
@change="minAmountFun" v-model="ruleForm.minAmount"></el-input> |
|||
元 |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="优惠方式" prop="isDiscount"> |
|||
<el-radio-group v-model="ruleForm.discountType" :disabled="DISABLED" @change="discountTypeFun"> |
|||
<el-radio label="DISCOUNT_RATE"> |
|||
打 |
|||
<el-input style="width: 80px" :disabled="DISABLED || !isDISCOUNT_RATE" |
|||
@change="discountFun" v-model="ruleForm.discount"></el-input> |
|||
折 |
|||
</el-radio> |
|||
<el-radio label="AMOUNT_OFF"> |
|||
减 |
|||
<el-input style="width: 80px" :disabled="DISABLED || isDISCOUNT_RATE" |
|||
@change="reduceMoneyFun" v-model="ruleForm.reduceMoney"></el-input> |
|||
元 |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="参与次数"> |
|||
<el-switch |
|||
:disabled="DISABLED" |
|||
v-model="ruleForm.isUnlimited" |
|||
active-text="无限制"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="" v-if="!ruleForm.isUnlimited" prop="limitPerCustomer" |
|||
:rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
每人参与 |
|||
<el-input style="width: 80px" :disabled="DISABLED" v-model="ruleForm.limitPerCustomer"></el-input> |
|||
次 |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="活动时间"> |
|||
<el-switch |
|||
:disabled="disabled" |
|||
v-model="ruleForm.permanent" |
|||
active-text="永久有效"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="" v-if="!ruleForm.permanent" prop="date" |
|||
:rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
|||
<el-date-picker |
|||
:disabled="disabled" |
|||
v-model="date" |
|||
type="datetimerange" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="选择场地"> |
|||
<el-select v-model="ruleForm.locationIds" :disabled="DISABLED" placeholder="选择场地" multiple |
|||
:clearable="true"> |
|||
<el-option v-for="item in locationIds" :key="item.id" :label="item.name" |
|||
:value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item style="text-align: center;" v-if="!DISABLED"> |
|||
<el-button type="primary" @click="submitForm('ruleForm')" :loading="isLoading">提交</el-button> |
|||
<el-button @click="resetForm('ruleForm')">重置</el-button> |
|||
</el-form-item> |
|||
|
|||
|
|||
</el-form> |
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
import {GET_LOCATIONS} from '@/api/common' |
|||
import Alert from "@/utils/alert"; |
|||
|
|||
import {mapActions} from "vuex"; |
|||
import { |
|||
POST_discountOffers as ADD_ITEM, |
|||
PUT_discountOffers as UPDATE_ITEM, |
|||
DETAIL_discountOffers as DETAIL_ITEM |
|||
} from '@/api/marketingCenter' |
|||
|
|||
import {FormateYYMMDD} from "@/filters/index"; |
|||
|
|||
export default { |
|||
data() { |
|||
let validatePass = (rule, value, callback) => { |
|||
if (!value) { |
|||
return callback(new Error('不能为空')); |
|||
} |
|||
callback() |
|||
}; |
|||
let isDiscount = (rule, value, callback) => { |
|||
if (!value) { |
|||
return callback(new Error('不能为空')); |
|||
} |
|||
callback() |
|||
}; |
|||
return { |
|||
|
|||
isMinQuantity: true, |
|||
isDISCOUNT_RATE: true, |
|||
DISABLED: false, |
|||
disabled: false, |
|||
isLoading: false, |
|||
date: [], |
|||
locationIds: [], |
|||
ruleForm: { |
|||
id: '', |
|||
name: '', |
|||
permanent: false, |
|||
startDate: '', |
|||
endDate: '', |
|||
date: '', |
|||
isFull: '', |
|||
isDiscount: '', |
|||
limitPerCustomer: '', |
|||
isMinQuantity: 'minQuantity', |
|||
applyRule: false, |
|||
discountType: 'DISCOUNT_RATE', |
|||
isUnlimited: false, |
|||
discount: '', |
|||
reduceMoney: '', |
|||
isPiece: '', |
|||
locationIds: [] |
|||
}, |
|||
rules2: { |
|||
isFull: [ |
|||
{validator: validatePass, trigger: 'blur'} |
|||
], |
|||
isDiscount: [ |
|||
{validator: isDiscount, trigger: 'blur'} |
|||
] |
|||
}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
id() { |
|||
return this.$route.query.id |
|||
}, |
|||
state() { |
|||
return this.$route.query.state |
|||
} |
|||
}, |
|||
mounted() { |
|||
if (this.id) { |
|||
this.getDetailItem(); |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
id: this.id |
|||
} |
|||
} |
|||
|
|||
GET_LOCATIONS().then(res => { |
|||
this.locationIds = res |
|||
}) |
|||
}, |
|||
watch: { |
|||
date(val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
date: val, |
|||
startDate: val[0], |
|||
endDate: val[1] |
|||
}; |
|||
} |
|||
}, |
|||
methods: { |
|||
...mapActions([ |
|||
"delVisitedView" |
|||
]), |
|||
/** |
|||
* 获取商品详情 |
|||
*/ |
|||
getDetailItem() { |
|||
|
|||
DETAIL_ITEM(this.id).then(res => { |
|||
this.date.push(res.startDate); |
|||
this.date.push(res.endDate); |
|||
this.disabled = true; |
|||
if (this.state == 'DISABLED') { |
|||
this.DISABLED = true; |
|||
Alert.fail('已失效的活动不能编辑,只能查看'); |
|||
} |
|||
|
|||
if (res.limitPerCustomer === 0) { |
|||
res.isUnlimited = true |
|||
} |
|||
|
|||
res.isFull = res.minQuantity || res.minAmount; |
|||
res.isDiscount = res.discount || res.reduceMoney; |
|||
this.ruleForm = res; |
|||
|
|||
|
|||
if (res.discountType == 'AMOUNT_OFF') { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
reduceMoney: res.discount, |
|||
discount: '', |
|||
isDiscount: res.reduceMoney || res.discount |
|||
} |
|||
} |
|||
|
|||
if (this.ruleForm.reduceMoney) { |
|||
this.isDISCOUNT_RATE = false |
|||
} else { |
|||
this.isDISCOUNT_RATE = true |
|||
} |
|||
|
|||
if (res.minQuantity) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
isMinQuantity: 'minQuantity' |
|||
}; |
|||
this.isMinQuantity = true |
|||
} else { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
isMinQuantity: 'minAmount' |
|||
}; |
|||
this.isMinQuantity = false |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
minQuantityFun(val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
isFull: val |
|||
} |
|||
}, |
|||
|
|||
minAmountFun(val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
isFull: val |
|||
} |
|||
}, |
|||
|
|||
discountFun(val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
isDiscount: val |
|||
} |
|||
}, |
|||
|
|||
reduceMoneyFun(val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
isDiscount: val |
|||
} |
|||
}, |
|||
|
|||
|
|||
applyRuleFun(val) { |
|||
if (val = 'minQuantity') { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minAmount: '', |
|||
minQuantity: '' |
|||
}; |
|||
this.isMinQuantity = !this.isMinQuantity |
|||
} else { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minQuantity: '', |
|||
minAmount: '' |
|||
}; |
|||
this.isMinQuantity = !this.isMinQuantity |
|||
} |
|||
}, |
|||
|
|||
discountTypeFun(val) { |
|||
if (val = 'DISCOUNT_RATE') { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
discount: '', |
|||
reduceMoney: '' |
|||
}; |
|||
this.isDISCOUNT_RATE = !this.isDISCOUNT_RATE |
|||
} else { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
discount: '', |
|||
reduceMoney: '' |
|||
}; |
|||
this.isDISCOUNT_RATE = !this.isDISCOUNT_RATE |
|||
} |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 无门槛 |
|||
*/ |
|||
noThresholdFun(val) { |
|||
this.noThreshold = val; |
|||
if (val) { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minAmount: ' ' |
|||
} |
|||
} else { |
|||
this.ruleForm = { |
|||
...this.ruleForm, |
|||
minAmount: '', |
|||
startDate: '', |
|||
endDate: '' |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 不限制 |
|||
*/ |
|||
noRestrictionFun(val) { |
|||
this.noRestriction = val; |
|||
}, |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
resetForm() { |
|||
this.$refs['ruleForm'].resetFields(); |
|||
}, |
|||
|
|||
/** |
|||
* 提交 |
|||
*/ |
|||
submitForm() { |
|||
let that = this; |
|||
let salesPromotionDetails = this.$refs['ruleForm']; |
|||
salesPromotionDetails.validate((val) => { |
|||
if (val) { |
|||
that.isLoading = true; |
|||
if (that.ruleForm.isUnlimited) { |
|||
that.ruleForm = { |
|||
...that.ruleForm, |
|||
limitPerCustomer: 0 |
|||
} |
|||
} |
|||
|
|||
if (this.ruleForm.discountType == 'AMOUNT_OFF') { |
|||
that.ruleForm = { |
|||
...that.ruleForm, |
|||
discount: this.ruleForm.reduceMoney |
|||
} |
|||
} |
|||
|
|||
if (!that.ruleForm.id) { |
|||
ADD_ITEM({...that.ruleForm}).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('新建成功'); |
|||
that.isLoading = false; |
|||
that.delVisitedView(that.$route).then(res => { |
|||
that.$router.go(-1); |
|||
}); |
|||
}, 1500); |
|||
|
|||
}).catch(err => { |
|||
Alert.fail(err); |
|||
that.isLoading = false; |
|||
}) |
|||
} else { |
|||
UPDATE_ITEM({...that.ruleForm}).then(res => { |
|||
setTimeout(() => { |
|||
Alert.success('更新成功'); |
|||
that.isLoading = false; |
|||
that.delVisitedView(that.$route).then(res => { |
|||
that.$router.go(-1); |
|||
}); |
|||
}, 1500); |
|||
|
|||
}).catch(err => { |
|||
Alert.fail(err); |
|||
that.isLoading = false; |
|||
}) |
|||
} |
|||
|
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.form { |
|||
height: 100%; |
|||
background: #fff; |
|||
padding: 30px 30px 30px 0; |
|||
} |
|||
|
|||
.file { |
|||
position: relative; |
|||
top: 0; |
|||
display: inline-block; |
|||
border: 1px solid #e6e6e6; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
color: #1E88C7; |
|||
text-decoration: none; |
|||
text-indent: 0; |
|||
width: 110px; |
|||
height: 140px; |
|||
text-align: center; |
|||
line-height: 85px; |
|||
font-size: 40px; |
|||
|
|||
input { |
|||
position: absolute; |
|||
font-size: 100px; |
|||
right: 0; |
|||
top: 0; |
|||
opacity: 0; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.image { |
|||
width: 110px; |
|||
height: 140px; |
|||
position: relative; |
|||
|
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
i { |
|||
position: absolute; |
|||
top: -6px; |
|||
right: -6px; |
|||
display: inline-block; |
|||
width: 15px; |
|||
height: 15px; |
|||
line-height: 15px; |
|||
text-align: center; |
|||
background: red; |
|||
border-radius: 50%; |
|||
color: #fff; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.el-textarea { |
|||
width: 400px; |
|||
height: 80px; |
|||
resize: none; |
|||
|
|||
&.el-textarea__inner { |
|||
resize: none; |
|||
} |
|||
} |
|||
|
|||
.el-form-item__content { |
|||
position: relative; |
|||
|
|||
.info { |
|||
position: absolute; |
|||
font-size: 12px; |
|||
top: 48px; |
|||
color: #ccc; |
|||
line-height: normal; |
|||
} |
|||
} |
|||
|
|||
</style> |
Loading…
Reference in new issue