Skip to content

W
welfare
Commit 0eba552d by chenxin
Options

fix: ui

parent 4989a1fe
Showing with 150 additions and 92 deletions
public/index.html
......@@ -48,6 +48,7 @@
<script src="//web-1251519181.file.myqcloud.com/components/preview-img.1.0.3.js"></script><!-- 图片预览 -->
<script src="//web-1251519181.file.myqcloud.com/components/delete.1.1.4.js"></script><!-- 删除轻弹窗 -->
<script src="//web-1251519181.file.myqcloud.com/components/input-number.1.0.10.js"></script><!-- 输入框 -->
<script src="//web-1251519181.file.myqcloud.com/components/welfare-selector.0.0.1.js"></script><!-- 福利选择器 -->
<script src="//web-1251519181.file.myqcloud.com/components/acc-group-select.1.0.5.js"></script><!-- 账号分组组件 -->
<script src="//web-1251519181.file.myqcloud.com/components/editor.1.1.13.js"></script><!-- 富文本编辑器 -->
</body>
......
src/assets/styles/component.scss
......@@ -118,11 +118,6 @@ body .damo-goods-selector{
.el-input-number__decrease {
bottom: 2px !important;
}
.hide-right {
.el-input-number__decrease, .el-input-number__increase {
display: none;
}
}
// 仿表格
......
src/router/gic-card.js
......@@ -9,9 +9,6 @@ export default [
{
path: 'list',
component: () => import(/* webpackChunkName: "gic-card" */'@/views/card/gic-card/card-list.vue'),
// meta: {
// keepAlive: true,
// }
},
// 领取记录
{
......
src/views/card/card-package/form.vue
......@@ -37,13 +37,14 @@
<el-tooltip content="若添加的卡券为固定有效期，仅允许添加和有效期限时间重合的卡券" placement="bottom" slot="label" open-delay="200">
<span class="tooltip-icon">添加卡券</span>
</el-tooltip>
<div v-loading="cardLoading">
<!-- <div v-loading="cardLoading">
<div class="mb10">
卡券id：<el-input v-model="couponForm.couponId" style="width:200px" class="mr10" />
库存值：<el-input v-model="couponForm.stock" style="width:100px" />
<el-button type="text" @click="addCard" class="ml5">保存</el-button>
</div>
</div>
</div> -->
<el-button class="dashed" @click="showSelector = true">添加卡券</el-button>
<div class="imitation-table" v-if="couponList.length" style="width:100%;" v-loading="cardLoading">
<el-row class="thead">
<el-col :span="5">卡券信息</el-col>
......@@ -58,7 +59,7 @@
<el-row>
<el-col :span="5">
<el-tag class="mr5">{{ cardType[item.cardType].label }}</el-tag>
<router-link target="_blank" :to="{path:'/gic-card/info',query:{ id: item.couponId }}">{{ item.cardName }}</router-link>
<router-link target="_blank" :to="{path:'/gic-card/info',query:{ id: item.couponId }}" :title="item.couponId">{{ item.cardName }}</router-link>
</el-col>
<el-col :span="5"><span v-html="effectiveDateFormate(item)"></span></el-col>
<el-col :span="4">{{ item.activityRemainedStock }}</el-col>
......@@ -81,7 +82,7 @@
</el-form-item>
</el-form>
<div class="hidden">
<dm-card-select :before-submit="beforeSubmit" ref="cardSelect" read-only :member-card-id="currentAreaId" @selectData="(val) => { selectData(val, idx) }" :min-stock="ruleForm.packageStock" fix-member-card :unuse-list="couponList" />
<dm-welfare-selector v-if="showSelector" model="coupon" type="coupon" :params="params" :disable-ids="couponList.map(v => v.couponId)" />
</div>
</div>
</template>
......@@ -160,6 +161,7 @@ export default {
return now.getTime() < Date.now() - 24 * 60 * 60 * 1000;
}
},
showSelector: false, // 是否展示福利选择器
isAdd: this.$route.meta.type === 'add',
isEdit: this.$route.meta.type === 'edit',
isInfo: this.$route.meta.type === 'info',
......@@ -321,6 +323,15 @@ export default {
},
},
computed: {
params() {
const params = {
memberCardId: this.currentAreaId,
startCreateTime: formatDateTimeByType(this.dateTime[0], 'yyyy-MM-dd'),
endCreateTime: formatDateTimeByType(this.dateTime[1], 'yyyy-MM-dd'),
minRemainedStock: this.ruleForm.packageStock
};
return params;
},
/**
* 1.过期卡券包无法修改
* 2.有效期未开始,全都可以改,除了开始时间不能早于当前时间
......
src/views/card/card-package/list.vue
......@@ -16,13 +16,13 @@
<sort-btn class="mr10" :sort-type="sortType1" />
<el-date-picker class="mr10" v-model="dateTime" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh" />
<label class="ml5 mr8">成本</label>
<el-input-number class="prefix-amount hide-right w100" @change="refresh" v-model="listParams.costPriceBegin" controls-position="right" :precision="2" :min="listParams.costPriceBegin" :max="10000" placeholder="请输入" />
<el-input-number class="prefix-amount w100" @change="refresh" v-model="listParams.costPriceBegin" controls-position="right" :precision="2" :min="listParams.costPriceBegin" :max="10000" placeholder="请输入" />
<label class="ml5 mr5">-</label>
<el-input-number class="prefix-amount hide-right w100" @change="refresh" v-model="listParams.costPriceEnd" controls-position="right" :precision="2" :min="1" :max="100000" placeholder="请输入" />
<el-input-number class="prefix-amount w100" @change="refresh" v-model="listParams.costPriceEnd" controls-position="right" :precision="2" :min="1" :max="100000" placeholder="请输入" />
<label class="ml15 mr8">可占用库存</label>
<el-input-number class="hide-right w100" @change="refresh" v-model="listParams.remainedStockBegin" controls-position="right" :precision="0" :min="1" :max="10000" placeholder="请输入" />
<el-input-number class="w100" @change="refresh" v-model="listParams.remainedStockBegin" controls-position="right" :precision="0" :min="1" :max="10000" placeholder="请输入" />
<label class="ml5 mr5">-</label>
<el-input-number class="hide-right w100 mrAuto" @change="refresh" v-model="listParams.remainedStockEnd" controls-position="right" :precision="0" :min="listParams.remainedStockBegin" :max="100000" placeholder="请输入" />
<el-input-number class="w100 mrAuto" @change="refresh" v-model="listParams.remainedStockEnd" controls-position="right" :precision="0" :min="listParams.remainedStockBegin" :max="100000" placeholder="请输入" />
<dm-perm-button type="danger" class="specter" v-show="active === 'list'" :disabled="!multipleSelection.length" @click="mutiDel">批量删除</dm-perm-button>
</div>
<el-table tooltip-effect="dark" :data="tableList" style="width:100%">
......
src/views/card/gic-card/card-form.js
......@@ -384,6 +384,7 @@ export default {
},
mounted() {
if (this.currentAreaId) {
this.ruleForm1.cardType = Number(this.$route.query.type) || 0;
this.getRelationId(); // 生成主键
this.getMallShopList();
// this.handleGetSubAppByInfo();
......
src/views/card/gic-card/card-list.vue
<template>
<div class="p20" v-loading="loading">
<el-row :gutter="20" class="mb20">
<el-col :span="24 / cardTypeList.length" v-for="(item, idx) in cardTypeList" :key="idx">
<div class="ct-block">
<p>{{ item.name }}</p>
<div v-html="item.text"></div>
<el-button type="primary" @click="$router.push(`/gic-card/add?type=${item.type}`)">立即新建</el-button>
</div>
</el-col>
</el-row>
<div class="clearfix flex-center pb20">
<span class="gray01 fz16 mr20">卡券筛选</span>
<el-select class="dm-select mr10 w160" clearable v-model="listParams.cardType" placeholder="所有卡券类型" @change="refresh">
<el-option v-for="(v, i) in cardType" :key="i" :label="v.label" :value="v.value"></el-option>
</el-select>
<el-input placeholder="请输入关键字搜索" class="w400 mr10" v-model="listParams.search" clearable @change="refresh">
<el-select v-model="listParams.searchType" slot="prepend" style="width:120px;" placeholder="请选择" @change="refresh">
<el-option label="卡券名称" :value="1"></el-option>
......@@ -13,40 +18,58 @@
<el-option label="demo券号" :value="4"></el-option>
</el-select>
</el-input>
<el-select v-model="listParams.couponStatus" class="w160 mrAuto" placeholder="全部状态" clearable @change="refresh">
<el-select class="dm-select mr10 w160" clearable v-model="listParams.cardType" placeholder="所有卡券类型" @change="refresh">
<el-option v-for="(v, i) in cardType" :key="i" :label="v.label" :value="v.value"></el-option>
</el-select>
<el-button type="text" @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}<i :class="`${isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'} el-icon--right ml5`"></i></el-button>
<!-- ui和原型都没要这个字段 -->
<!-- <el-select v-model="listParams.couponStatus" class="w160" placeholder="全部状态" clearable @change="refresh">
<el-option label="使用中" :value="1"></el-option>
<el-option label="已过期" :value="2"></el-option>
<el-option label="已禁用" :value="3"></el-option>
</el-select> -->
<el-select class="more-select mr10 mlAuto" @change="mutiOption" placeholder="批量操作">
<el-option :disabled="!multipleSelection.length" :value="0">批量设置</el-option>
<el-option :disabled="!multipleSelection.length" :value="1">批量删除</el-option>
</el-select>
</div>
<div v-show="isOpen" class="filter-block">
<div class="mb20">
<label class="mr8">福利成本：</label>
<el-input-number :controls="false" class="prefix-amount w140" @change="refresh" v-model="listParams.costPriceBegin" controls-position="right" :precision="2" :max="listParams.costPriceBegin" :min="0" placeholder="请输入" />
<span>至</span>
<el-input-number :controls="false" class="prefix-amount w140" @change="refresh" v-model="listParams.costPriceEnd" controls-position="right" :precision="2" :min="1" :max="100000" placeholder="请输入" />
<label class="mr8 ml40 w100 inline-block">更新时间：</label>
<el-select v-model="listParams.sortOrder" @change="refresh" placeholder="默认筛选">
<el-option label="由近及远" value="desc"></el-option>
<el-option label="由远及近" value="asc"></el-option>
</el-select>
<dm-perm-button type="primary" @click="$router.push('/gic-card/add')" :disabled="$itemPerm($itemCode.gicCardFormAdd)">新建卡券</dm-perm-button>
</div>
<div style="height:20px;width:calc(100% + 40px);position:relative;left:-20px;" class="bg-color mb20"></div>
<div class="clearfix flex-center mb20">
<label class="pr4 cursor" @click="changeSort">更新时间</label>
<sort-btn class="mr10" :sort-type="sortType1" />
<el-date-picker class="mr10" v-model="dateTime" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh" />
<label class="ml5 mr8">成本</label>
<el-input-number class="prefix-amount hide-right w100" @change="refresh" v-model="listParams.costPriceBegin" controls-position="right" :precision="2" :max="listParams.costPriceBegin" :min="0" placeholder="请输入" />
<label class="ml5 mr5">-</label>
<el-input-number class="prefix-amount hide-right w100" @change="refresh" v-model="listParams.costPriceEnd" controls-position="right" :precision="2" :min="1" :max="100000" placeholder="请输入" />
<label class="ml15 mr8">可占用库存</label>
<el-input-number class="hide-right w100" @change="refresh" v-model="listParams.remainedStockBegin" controls-position="right" :precision="0" :min="1" :max="10000" placeholder="请输入" />
<label class="ml5 mr5">-</label>
<el-input-number class="hide-right w100 mrAuto" @change="refresh" v-model="listParams.remainedStockEnd" controls-position="right" :precision="0" :min="listParams.remainedStockBegin" :max="100000" placeholder="请输入" />
<dm-perm-button type="danger" class="specter" :disabled="!multipleSelection.length" @click="mutiDel">批量删除</dm-perm-button>
<div>
<label class="mr8">可占库存：</label>
<el-input-number class="w140" @change="refresh" v-model="listParams.remainedStockBegin" controls-position="right" :precision="0" :min="1" :max="10000" placeholder="请输入" />
<span>至</span>
<el-input-number class="w140 mrAuto" @change="refresh" v-model="listParams.remainedStockEnd" controls-position="right" :precision="0" :min="listParams.remainedStockBegin" :max="100000" placeholder="请输入" />
<label class="mr8 ml40 w100 inline-block">更新时间范围：</label>
<el-date-picker v-model="dateTime" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh" />
</div>
<el-table tooltip-effect="dark" :data="tableList" style="width:100%" :max-height="mainHeight(52 + 52)" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="卡券信息" min-width="200" fixed="left">
</div>
<el-table tooltip-effect="dark" :data="tableList" style="width:100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" fixed="left"> </el-table-column>
<el-table-column label="卡券信息" min-width="280">
<template slot-scope="scope">
<div class="card">
<p>
<el-tooltip effect="dark" :content="scope.row.couponId" open-delay="200" placement="bottom">
<span>{{ scope.row.cardName }}</span>
</el-tooltip>
<img :src="scope.row.imgUrl" draggable="false" />
<p class="name">{{ scope.row.cardName }}</p>
<p class="fz12 gray03">
<el-popover placement="top-start" width="300" trigger="hover" open-delay="200">
<div class="gray01 fz14">
<p style="margin-bottom:5px;">福利id：{{ scope.row.couponId }}</p>
<p>更新时间：{{ formatDateTimeByType(scope.row.updateTime, 'yyyy-MM-dd hh:mm:ss') }}</p>
</div>
<div slot="reference" class="gray-lighter fz12" style="line-height:17px;"><i class="el-icon-question" style="margin-right:4px;"></i>{{ scope.row.subTitle }}</div>
</el-popover>
</p>
<p>{{ scope.row.subTitle }}</p>
<p class="fz12 gray03">更新时间：2020-12-12 12:12:12</p>
</div>
</template>
</el-table-column>
......@@ -119,7 +142,6 @@
</template>
<script>
import sortBtn from '@/components/sort/btn.vue';
import importCode from './module/import-code';
import { page, formate, getMainHeight } from '@/mixins/table.js';
import { cardType, cardStatus, mappingCardStatus } from '@/config/mapping/gic-card';
......@@ -136,8 +158,7 @@ export default {
components: {
adjustStock,
syncStock,
importCode,
sortBtn
importCode
},
mixins: [ page, formate, mixBeforeRouteLeave, getMainHeight ],
data() {
......@@ -175,7 +196,13 @@ export default {
visible: false,
couponId: '',
},
isOpen: false,
currentCard: {},
cardTypeList: [
{ name: '抵金券', text: '例：满100元减20元<br/>便于合理控制活动成本', type: 0 },
{ name: '折扣券', text: '例：满100元打9折<br/>提高店铺销量和客单价', type: 1 },
{ name: '兑换券', text: '用于兑换指定商品<br/>吸引顾客消费', type: 2 },
]
};
},
created() {
......@@ -186,22 +213,8 @@ export default {
this.getTableList();
}
},
activated() {
this.$emit('updateBread', [ { breadName: '福利中心' }, { breadName: 'GIC卡券' }, { breadName: '卡券库' } ]);
this.getTableList();
},
// beforeRouteLeave(to, from, next) {
// const excludeRoute = ['/gic-card/add', '/gic-card/edit', '/gic-card/copy'];
// if (!excludeRoute.includes(to.path)) {
// const idx = this.$vnode.parent.componentInstance.keys.indexOf(this.$route.fullPath);
// console.log(idx);
// const key = this.$vnode.parent.componentInstance.keys[idx];
// const cache = this.$vnode.parent.componentInstance.cache;
// delete cache[key];
// }
// next();
// },
methods: {
formatDateTimeByType,
changeSort() {
this.sortType1 = this.sortType1 === '' ? 'desc' : this.sortType1 === 'desc' ? 'asc' : '';
this.listParams.sortOrder = this.sortType1;
......@@ -317,51 +330,43 @@ export default {
this.$refs.adjust.close();
});
},
// 单个禁用卡券
stopData(val) {
showConfirm('<div>禁用后卡券不可找回，确认禁用该卡券？</div>', () => {
this.disableCard([ val ]);
});
// 批量操作
mutiOption(val) {
const ids = this.multipleSelection.map(v => v.couponId).join(',');
if(val == 0) { // 批量禁用
this.stopData(ids, true);
}
if(val == 1) { // 批量删除
this.delData(ids, true);
}
},
// 批量禁用
mutiStop() {
showConfirm('<div>确认批量禁用选中数据？</div>', () => {
this.disableCard(this.multipleSelection.map(v => v.couponId));
});
},
// 禁用卡券
disableCard(couponIds) {
stopData(ids, isMuti = false) {
const warnTxt = isMuti ? '禁用卡券将在福利组件不展示，并且该卡券参加的活动将全部失效，确认禁用？' : '禁用卡券将在福利组件不展示，并且该卡券参加的活动将全部失效，确认禁用选中数据？' ;
showConfirm(`<div>${warnTxt}</div>`, () => {
this.loading = true;
disableCard({ couponIds: couponIds.join(',') }).then(res => {
disableCard({ couponIds: ids }).then(res => {
this.$tips({ type: 'success', message: '禁用成功!' });
this.loading = false;
this.getTableList();
}).finally(() => {
this.loading = false;
});
},
// 删除卡券
delData(val) {
showConfirm('<div>删除后卡券不可找回，确认删除该卡券？</div>', () => {
this.deleteCard([ val ]);
});
},
// 批量删除
mutiDel() {
showConfirm('<div>已添加被删除卡券的活动将会失效，确认删除？</div>', () => {
this.deleteCard(this.multipleSelection.map(v => v.couponId));
});
},
// 删除卡券
deleteCard(couponIds) {
delData(ids, isMuti = false) {
const warnTxt = isMuti ? '删除后卡券不可找回，已添加被删除卡券的活动将会失效，确认删除？' : '删除后卡券不可找回，确认删除该卡券？' ;
showConfirm(`<div>${warnTxt}</div>`, () => {
this.loading = true;
deleteCard({ couponIds: couponIds.join(',') }).then(res => {
deleteCard({ couponIds: ids }).then(res => {
this.$tips({ type: 'success', message: '删除成功!' });
this.loading = false;
this.getTableList();
}).finally(() => {
this.loading = false;
});
});
},
// 上传券码dialog
uploadCode({ couponId }) {
......@@ -385,4 +390,52 @@ export default {
opacity: 1;
}
}
.card {
padding-left: 70px;
min-height: 70px;
position: relative;
img {
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 60px;
border-radius: 4px;
}
.name {
color: $gray01;
padding-top: 8px;
margin-bottom: 7px;
line-height: 22px;
}
}
.ct-block {
background: rgba(47, 84, 235, 0.07);
text-align: center;
padding: 20px 0 16px;
p {
font-size: 16px;
color: $gray01;
line-height: 22px;
}
div{
margin: 10px 0 15px;
color: $gray02;
line-height: 17px;
}
}
.ml40 {
margin-left: 40px;
}
.filter-block {
color: $gray01;
background: $gray-disable;
padding: 20px;
margin-bottom: 20px;
span {
margin-left: 10px;
margin-right: 10px;
line-height: 20px;
}
}
</style>
\ No newline at end of file
src/views/card/setting/custom.vue
<template>
<div class="p20" v-loading="loading">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" style="min-height:400px;">
<el-form-item label="转赠扣库存：" prop="transferReduceFlag">
<el-form-item label="转赠扣库存" prop="transferReduceFlag">
<el-switch :active-value="1" :inactive-value="0" v-model="ruleForm.transferReduceFlag"></el-switch>
<div class="gray03 fz12">开启表示赠送领取成功后，该卡券库存将会从福利中心的可占用库存扣除数量，若福利中心卡券可占用库存为 0，该卡券不可被赠送。</div>
</el-form-item>
......@@ -34,7 +34,7 @@ export default {
};
},
created() {
this.$emit('updateBread', [ { breadName: '通用设置' } ]);
this.$emit('updateBread', [ { breadName: '福利中心' }, { breadName: '通用设置' } ]);
},
mounted() {
this.getDetail();
......@@ -59,7 +59,6 @@ export default {
// 获取配置详情
getDetail() {
checkCustomSetting().then(res => {
console.log(res);
this.ruleForm = { ...this.ruleForm, ...res.result };
});
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment