Skip to content

W
welfare
Commit 960999fd by chenxin
Options

fix: ui

parent 045cf0b4
Showing with 70 additions and 84 deletions
src/assets/styles/component.scss
......@@ -524,3 +524,23 @@ p.cell-time {
}
}
.common-title {
border-bottom: 1px solid #E4E7ED;
padding-bottom: 9px;
line-height: 1;
padding-left: 11px;
position: relative;
font-size: 14px;
font-weight: 500;
color: #303133;
&::before {
content: '';
width: 3px;
height: 14px;
background: #2F54EB;
left: 0;
top: 0;
display: block;
position: absolute;
}
}
\ No newline at end of file
src/config/mapping/gic-card.js
......@@ -125,6 +125,12 @@ export const startDayOptionsMonth = Object.keys(dicMap.month).map(key => {
// 匹配卡券状态 mapping表中的数据
/**
*
* @param {Object} item cardItemObj
* @returns {Object}
* _status: -1未知、1未生效、2使用中、3已过期、4已禁用
*/
export const mappingCardStatus = (item) => {
const { statusFlag, cardEffectiveMode, expireDate, startDate } = item;
let _status = -1; // eslint-disable-line
......
src/views/card/card-package/form.vue
......@@ -22,8 +22,8 @@
<el-form-item label="库存消耗方式" class="is-required" prop="stockType">
<el-checkbox-group :disabled="canEdit" v-model="stockType">
<!-- （0:占用,1:动态 , 2占用+动态） -->
<el-checkbox :label="0">固定库存</el-checkbox>
<el-checkbox :label="1">实时库存</el-checkbox>
<el-checkbox :label="0"><el-tooltip open-delay="200" content="通过占用的方式获得固定可用库存，不会被其他应用/活动所消耗" placement="top"><span class="tooltip-icon">固定库存</span></el-tooltip></el-checkbox>
<el-checkbox :label="1"><el-tooltip open-delay="200" content="不占用库存，使用福利中心“可占库存”，与其他应用使用同个库存" placement="top"><span class="tooltip-icon">实时库存</span></el-tooltip></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="操作人权限" prop="operAuthType">
......
src/views/card/gic-card/card-form.js
......@@ -80,7 +80,6 @@ const _ruleForm1 = {
expireTimeCount: 1,
// 有效期上
getLimit: 1, // 领取限制
cardLimitRadio: 1,
verificationType: 0, // 核销方式 兑换券3时存在
// 转赠 start
giveFlag: 0,
......@@ -92,7 +91,7 @@ const _ruleForm1 = {
giveBannerImageField: '',
giveBannerJumpFlag: '',
giveBannerJumpUrl: '',
giveRule: '1.卡券新老用户同享。2.用户使用卡券下单，订单取消后，卡券将自动失效',
giveRule: '1.卡券新老用户同享。\n2.用户使用卡券下单，订单取消后，卡券将自动失效',
// 转赠 end
goodsSearchId: '', // 兑换券 兑换商品 - 选择器id
goodsSearchIdWaiting: true, // 兑换券 兑换商品 - 等待状态
......@@ -101,16 +100,14 @@ const _ruleForm1 = {
cardJumpLink: '',
stockUseType: 0, // （0:占用,1:动态 , 2占用+动态）
operAuthType: 1, // 1所有账号2部分账号3仅创建人
operAuth: []
};
const _ruleForm3 = {
operAuth: [],
miniprogramname: '',
useExplain: '', // 使用说明
adaptGoodsExplain: '', // 适用商品说明
adaptStoreExplain: '', // 适用门店说明
};
const defaultUseCondition = {
goods_adapt_number_min_limit: undefined, // eslint-disable-line
goods_adapt_number_max_limit: undefined, // eslint-disable-line
......@@ -179,21 +176,6 @@ export default {
callback();
};
// 验证图文介绍
const validTeletextList = (rule, value, callback) => {
if (this.teletextList.length === 0) {
callback(new Error(rule.message));
} else {
const idx = this.teletextList.findIndex(v => {
return v.copyText === '' && v.copyImgUrl === '';
});
if (idx !== -1) {
callback(new Error(rule.message));
}
}
callback();
};
// 验证首图 转赠链接
const validBannerJumpUrl = (rule, value, callback) => {
if (this.checked && !value) {
......@@ -300,9 +282,6 @@ export default {
ruleForm2: {
erpDemoCode: '', // demo券号
},
ruleForm3: {
..._ruleForm3,
},
rules1: {
cardName: { required: true, message: '请输入卡券名称', trigger: 'blur' },
remarkName: { required: true, message: '请输入备注名称', trigger: 'blur' },
......@@ -326,17 +305,13 @@ export default {
codeFixed: { required: true, validator: validCodeFixed, trigger: 'blur' },
giveBannerJumpUrl: { validator: validBannerJumpUrl, trigger: 'change' },
stockType: { required: true, validator: validStockType, message: '请勾选库存消耗方式', trigger: 'change' },
useExplain: { required: true, message: '使用说明不能为空', trigger: 'blur' },
coverContent: { required: true, message: '封面简介不能为空', trigger: 'blur' },
},
rules2: {
erpDemoCode: [ { validator: validDemoCode, trigger: 'blur' } ],
gicmallShopFilter: [ { required: true, validator: validGicmallShopFilter, trigger: 'change' } ]
},
rules3: {
useExplain: { required: true, message: '使用说明不能为空', trigger: 'blur' },
coverContent: { required: true, message: '封面简介不能为空', trigger: 'blur' },
coverImage: { required: true, message: '请上传封面图片', trigger: 'blur' },
teletextList: { required: true, validator: validTeletextList, message: '请上传图文介绍', trigger: 'blur' },
},
pickerOptions: {
disabledDate(val) {
return Date.now() >= val.getTime() + 24 * 60 * 60 * 1000;
......@@ -698,12 +673,6 @@ export default {
// }
// }
});
// ruleForm3赋值
Object.keys(_ruleForm3).map(key => {
if (key in coupon) {
this.ruleForm3[key] = coupon[key];
}
});
}).catch(() => {
this.loading = false;
});
......@@ -713,13 +682,12 @@ export default {
if (this.loading) {
return;
}
let params = { ...this.ruleForm1, ...this.ruleForm2, ...this.ruleForm3, goodsSearchId: this.goodsSearchId };
let params = { ...this.ruleForm1, ...this.ruleForm2, goodsSearchId: this.goodsSearchId };
try {
params.couponId = this.couponId; // 主键在一进来页面的时候就已经确定
params.memberCardId = this.currentAreaId;
// 处理数据
params.getLimit = params.cardLimitRadio === 0 ? params.getLimit : params.cardLimitRadio;
delete params.cardLimitRadio;
params.getLimit = params.getLimit || 1;
// 处理useConditionLimit
params.useConditionLimit = {};
if (params.operAuthType == 2) {
......@@ -860,19 +828,6 @@ export default {
reRreshRoute();
}
},
// 上传成功 返回的图片对象 里面有图片 大小 类型 等相关信息
uploadOnSuccess(obj) {
this.ruleForm3.coverImage = obj.res.result.url;
this.ruleForm3.coverImageField = obj.res.result.fileId;
obj.file.url = obj.res.result.url;
this.imageList.push({ url: obj.res.result.url });
},
// 删除图片 返回图片列表的索引 你可以根据这个索引去找对应图片的id
deleteImage(i) {
this.imageList.splice(i, 1);
this.ruleForm3.iconUrl = '';
this.ruleForm3.iconFileId = '';
},
zmSuccess(obj) {
this.zmImg = [ { url: obj.res.result.url, fileId: obj.res.result.fileId } ];
this.ruleForm1.giveImage = obj.res.result.url;
......
src/views/card/gic-card/card-list.vue
......@@ -61,14 +61,15 @@
<div class="card">
<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">
<p class="fz12 gray-lighter" style="line-height:17px;">
<el-popover placement="top-start" width="300" trigger="hover" open-delay="200" :offset="-8">
<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>
<i class="el-icon-question cursor fz12 gray-lighter" slot="reference" style="position:relative;top:1px;"></i>
</el-popover>
{{ scope.row.subTitle }}
</p>
</div>
</template>
......@@ -79,19 +80,23 @@
</template>
</el-table-column>
<el-table-column label="领券限制" min-width="120">
<template slot-scope="scope">{{ scope.row.getLimit }} 张 </template>
<template slot-scope="scope">{{ scope.row.getLimit }} 张 / 人 </template>
</el-table-column>
<el-table-column prop="name" label="卡券成本" min-width="120">
<template slot-scope="scope">{{ scope.row.cardType == 1 || scope.row.cardType == 2 ? `￥${scope.row.costPrice}` : '--' }}</template>
<el-table-column prop="name" label="卡券成本(元)" min-width="130">
<template slot-scope="scope">{{ scope.row.cardType == 1 || scope.row.cardType == 2 ? scope.row.costPrice : '--' }}</template>
</el-table-column>
<el-table-column label="卡券库存" min-width="180">
<template slot-scope="scope">
<p>可占库存：{{ scope.row.remainedStock || 0 }}
<el-button v-if="[11, 12].includes(scope.row._status) && scope.row.customCodeFlag === 0" @click="preAdjustStock(scope.row)" class="hover-btn" icon="el-icon-edit-outline ml5" type="text"></el-button>
<el-button v-if="[11, 12].includes(scope.row._status) && scope.row.customCodeFlag == 2" class="hover-btn" @click="uploadCode(scope.row)" icon="iconfont-market4 icon-shangchuan" type="text"></el-button>
</p>
<p>已占用：{{ scope.row.occupyStock || 0 }}</p>
<p>总库存：{{ scope.row.totalStock || 0 }}</p>
<el-popover placement="top-end" width="200" trigger="hover" open-delay="200" :offset="-8">
<div class="gray01 fz14">
<p style="margin-bottom:5px;">已占用：{{ scope.row.occupyStock || 0 }}</p>
<p>总库存：{{ scope.row.totalStock || 0 }}</p>
</div>
<i class="el-icon-question cursor fz12 gray-lighter" slot="reference" style="position:relative;"></i>
</el-popover>
可占库存：{{ scope.row.remainedStock || 0 }}
<el-button v-if="[11, 12].includes(scope.row._status) && scope.row.customCodeFlag === 0" @click="preAdjustStock(scope.row)" class="hover-btn" icon="el-icon-edit-outline ml5" type="text"></el-button>
<el-button v-if="[11, 12].includes(scope.row._status) && scope.row.customCodeFlag == 2" class="hover-btn" @click="uploadCode(scope.row)" icon="iconfont-market4 icon-shangchuan" type="text"></el-button>
</template>
</el-table-column>
<el-table-column label="卡券状态" min-width="120">
......@@ -103,31 +108,29 @@
</template>
<span slot-scope="scope" v-html="renderStatus(scope.row)"></span>
</el-table-column>
<el-table-column label="操作" align="left" width="150px" fixed="right">
<el-table-column label="操作" align="left" width="180px" fixed="right">
<template slot-scope="scope">
<mk-button class="mr16" :option="{ perm: $itemPerm($itemCode.gicCardFormEdit), deleteFlag: scope.row.deleteFlag, deleteRemark: scope.row.remark }" type="text" v-if="[1,2].includes(scope.row._status)" @click="handler(3, scope.row, $itemPerm($itemCode.gicCardFormEdit))">编辑</mk-button>
<mk-button :option="{ perm: $itemPerm($itemCode.gicCardFormCopy), deleteFlag: scope.row.deleteFlag, deleteRemark: scope.row.remark }" type="text" @click="handler(6, scope.row)">复制</mk-button>
<mk-button :option="{ perm: $itemPerm($itemCode.gicCardGroupBtn), deleteFlag: scope.row.deleteFlag, deleteRemark: scope.row.remark }" type="text" @click="handler(8, scope.row)" class="mr20">领取记录</mk-button>
<el-popover popper-class="option-dropdown" trigger="hover">
<ul>
<li :class="{ disabled: $itemPerm($itemCode.gicCardFormCopy) || scope.row.deleteFlag }">
<mk-button type="text" @click="handler(6, scope.row)" :option="{ perm: $itemPerm($itemCode.gicCardFormCopy), deleteFlag: scope.row.deleteFlag, deleteRemark: scope.row.remark }">复制</mk-button>
<li v-if="[1,2].includes(scope.row._status)">
<dm-perm-button @click="handler(9, scope.row)" type="text">库存记录</dm-perm-button>
</li>
<li :class="{ disabled: $itemPerm($itemCode.gicCardFormInfo) }">
<dm-perm-button @click="handler(5, scope.row)" :disabled="$itemPerm($itemCode.gicCardFormInfo)" type="text">详情</dm-perm-button>
<li v-if="[1,2].includes(scope.row._status)" :class="{ disabled: $itemPerm($itemCode.gicCardFormEdit) || scope.row.deleteFlag }">
<mk-button type="text" @click="handler(3, scope.row)" :option="{ perm: $itemPerm($itemCode.gicCardFormEdit), deleteFlag: scope.row.deleteFlag, deleteRemark: scope.row.remark }">编辑</mk-button>
</li>
<li :class="{ disabled: $itemPerm($itemCode.gicCardFormDel) }">
<dm-perm-button @click="handler(4, scope.row)" :disabld="$itemPerm($itemCode.gicCardFormDel)" type="text">删除</dm-perm-button>
<li v-else :class="{ disabled: $itemPerm($itemCode.gicCardFormInfo) }">
<dm-perm-button @click="handler(5, scope.row)" :disabled="$itemPerm($itemCode.gicCardFormInfo)" type="text">详情</dm-perm-button>
</li>
<li v-if="scope.row._status == 2">
<dm-perm-button @click="handler(10, scope.row)" type="text">禁用</dm-perm-button>
</li>
<li v-if="[1,2].includes(scope.row._status)">
<dm-perm-button @click="handler(9, scope.row)" type="text">库存记录</dm-perm-button>
</li>
<li v-if="[2, 3, 4].includes(scope.row._status)" :class="{ disabled: $itemPerm($itemCode.gicCardGroupBtn) || scope.row.deleteFlag }">
<mk-button @click="handler(8, scope.row)" :option="{ perm: $itemPerm($itemCode.gicCardGroupBtn), deleteFlag: scope.row.deleteFlag, deleteRemark: scope.row.remark }" type="text">领取记录</mk-button>
<li :class="{ disabled: $itemPerm($itemCode.gicCardFormDel) }">
<dm-perm-button @click="handler(4, scope.row)" :disabld="$itemPerm($itemCode.gicCardFormDel)" type="text">删除</dm-perm-button>
</li>
</ul>
<el-button type="text" slot="reference">更多<i class="ml5 el-icon-arrow-down"></i></el-button>
<el-button type="text" slot="reference"><i class="el-icon-more"></i></el-button>
</el-popover>
</template>
</el-table-column>
......@@ -262,16 +265,17 @@ export default {
},
renderStatus({ _status }) {
let _cl = '';
// 1未生效、2使用中、3已过期、4已禁用
switch (_status) {
case 2:
_cl = 'state-point-loading-scale'; // 使用中
break;
case 1:
_cl = 'state-point-warning'; // 未生效
break;
case 2:
_cl = 'state-point-success'; // 使用中
break;
case 3:
case 4:
_cl = 'state-point-default'; // 已过期
_cl = 'state-point-error'; // 已禁用已过期
break;
default:
_cl = 'state-point-default';
......
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