Skip to content

S
store-manage-ui
Commit 3d1d248f authored by 王苓芝's avatar 王苓芝
Browse files
Options

广告列表

parent 12b770d9
Show whitespace changes
Inline Side-by-side
Showing with 1254 additions and 0 deletions
src/view/operation/AdList.vue 0 → 100644
View file @ 3d1d248f
<template>
<div style="padding:20px 30px">
<Form style="margin-top:20px" inline :model="search">
<Form-item>
<label>广告位置：</label>
<Select v-model="search.type" style="width:180px;margin-right:40px" @on-change="changeTypeSearch">
<Option v-for="item in positionList" :key="item.type" :value="item.type">{{ item.name }}</Option>
</Select>
</Form-item>
<Form-item>
<label>广告状态：</label>
<Select v-model="search.enable" style="width:180px;margin-right:40px" placeholder="全部">
<Option value="">全部</Option>
<Option v-for="item in stateList" :key="item.value" :value="item.value">{{ item.label }}</Option>
</Select>
</Form-item>
<Form-item>
<label>用户状态：</label>
<Select v-model="search.name" style="width:180px;margin-right:40px" placeholder="全部">
<Option value="">全部</Option>
<Option v-for="item in userStatusList" :key="item.type" :value="item.type">{{ item.name }}</Option>
</Select>
<Button type="primary" class="marginR" @click="getBannersFn">查询</Button>
<Button type="primary" @click="addAdsFn()">新增</Button>
</Form-item>
</Form>
<Modal v-model="adDialog" :title="flagText" width="550">
<Form ref="form" :model="form" :rules="ruleValidate" :label-width="150">
<Form-item prop="type" label="广告位置:">
<div class="ad-item-content">
<Select v-model="form.type" class="adlist-input-width" transfer :disabled="flagText !== '添加广告'" @on-change="changeType">
<Option v-for="item in positionList" :key="item.type" :value="item.type">{{ item.name }}</Option>
</Select>
</div>
</Form-item>
<Form-item label="广告图:" prop="imageUrl">
<upload :uploadurl="form.imageUrl" :max="form.type === 17 ? 3 : 1" />
<p v-if="form.type === 17">
请依次上传 600*800 、640*960 、1080*192 三种尺寸图片
</p>
<p>请按照设计裁剪的尺寸上传图片,支持格式jpg、png</p>
</Form-item>
<Form-item label="有效时间:" prop="time">
<Date-picker v-model="form.time" type="datetimerange" placement="bottom" placeholder="年/月/日" style="width: 300px" transfer @on-change="form.time = $event" />
</Form-item>
<Form-item label="URL链接:" prop="navUrl" :required="form.type === 35">
<Input v-model="form.navUrl" class="adlist-input-width" />
<Button v-show="form.type !== 35" type="primary" style="margin-top:10px" @click="changeUrl(form.navUrl)">转码</Button>
<div>支持http://、https://、App 内的跳转</div>
</Form-item>
<Form-item label="用户状态:" prop="userStates" :required="form.type === 35">
<Select v-model="form.userStates" multiple class="adlist-input-width" transfer :disabled="flagText !== '添加广告'">
<Option v-for="item in userStatusList" :key="item.type" :value="item.type">{{ item.name }}</Option>
</Select>
</Form-item>
<Form-item label="支持App版本:">
<Input v-model="form.minVersion" style="width:100px;margin-right:10px" />至
<Input v-model="form.maxVersion" style="width:100px;margin:0 10px" />
</Form-item>
<Form-item label="支持App系统:" prop="limitSystem">
<CheckboxGroup v-model="form.limitSystem">
<Checkbox label="ios">iOS</Checkbox>
<Checkbox label="android">Android</Checkbox>
</CheckboxGroup>
</Form-item>
<div v-show="form.type === 33">
<Form-item prop="displayStrategy" label="弹出策略:">
<Radio-group v-model="form.displayStrategy">
<Radio :label="0">打开或关闭后不再弹出</Radio>
<Radio :label="1">打开后不再弹出</Radio>
<Radio :label="2">每次弹出</Radio>
</Radio-group>
</Form-item>
<Form-item label="弹窗位置:" prop="tabLocation">
<Select v-model="form.tabLocation" style="width:180px;margin-right:40px">
<Option v-for="item in tabLocationList" :key="item.type" :value="item.type">{{ item.name }}</Option>
</Select>
</Form-item>
</div>
<Form-item v-if="isShow([35])" label="A/B测试:" prop="abLimit">
<Select v-model="form.abLimit" multiple class="adlist-input-width">
<Option v-for="item in abLimitList" :key="item" :value="item">
{{ item }}
</Option>
</Select>
</Form-item>
<Form-item prop="enable" label="状态:">
<Radio-group v-model="form.enable">
<Radio :label="0">停用</Radio>
<Radio :label="1">启用</Radio>
</Radio-group>
</Form-item>
<Form-item prop="sort" label="排序:">
<InputNumber v-model="form.sort" class="adlist-input-width" />
</Form-item>
<Form-item v-show="form.type === 17" prop="jumpSeconds" label="开屏页跳过倒计时 （单位：秒）:">
<InputNumber v-model="form.jumpSeconds" class="adlist-input-width" />
</Form-item>
</Form>
<div slot="footer">
<Button type="primary" @click="save()">保存</Button>
<Button type="primary" @click="close">取消</Button>
</div>
</Modal>
<div style="margin-top:20px;">
<Table border :columns="columns" :data="getBannersData" />
</div>
</div>
</template>
<script>
import operationService from '../../services/apis/operation.service';
import upload from '../../components/qn-upload.vue';
import config from '../../config';
import { deepCopy } from '../../services/util.js';
import imgpoptip from '../../components/poptip.vue';
const qiniuHost = config.qiniuHost;
export default {
components: {
upload,
},
data() {
const validator = type => {
return (rule, value, callback) => {
const { message, type: dataType, min = 1 } = rule;
if (dataType === 'array' && this.form.type === type && value.length < min) {
return callback(new Error(message));
}
if (type && this.form.type === type && !value && value !== 0) {
return callback(new Error(message));
}
callback();
};
};
const imgCheck = (rule, value, callback) => {
const { message } = rule;
if (this.form.type === 17 && value.length < 3) {
return callback(new Error(message));
} else if (!value.length) {
return callback(new Error(message));
}
callback();
};
return {
adDialog: false,
max: 1,
search: {
type: 17,
},
inforPlace: [],
stateList: [
{
value: '1',
label: '启用',
},
{
value: '0',
label: '停用',
},
],
tabLocationList: [
{
type: 1,
name: '首页',
},
{
type: 2,
name: '保险',
},
{
type: 3,
name: '我的tab',
},
],
userStatusList: [],
enableText: '启用',
columns: [
{
title: '图标',
key: 'imageUrl',
align: 'center',
width: 400,
render: (h, params) => {
const arr = [];
if (params.row.imgList) {
for (const i in params.row.imgList) {
const item = params.row.imgList[i];
const src = item.indexOf(qiniuHost) === -1 ? qiniuHost + item : item;
let placement = 'right-end';
if (params.index === 0) {
placement = 'bottom-start';
}
arr.push(
h(imgpoptip, {
props: {
src,
placement,
},
style: {
padding: '5px',
cursor: 'pointer',
height: '50px',
},
})
);
}
}
return h('div', arr);
},
},
{
title: '排序',
key: 'sort',
width: 100,
align: 'center',
},
{
title: '广告位置',
key: 'type',
align: 'center',
width: 180,
render: (h, params) => {
const obj = this.positionList.find(item => item.type === params.row.type) || {};
return h('div', obj.name || '底部轮播图');
},
},
{
title: '状态',
key: 'enableText',
align: 'center',
width: 180,
},
{
title: '操作',
key: 'action',
align: 'center',
width: 450,
render: (h, params) => {
const arr = [
h(
'Button',
{
props: {
type: 'primary',
},
style: {
margin: '5px',
},
on: {
click: () => {
this.useOrStop(params.row);
},
},
},
params.row.enable ? '停用' : '启用'
),
h(
'Button',
{
props: {
type: 'primary',
disabled: params.index === 0,
},
style: {
margin: '5px',
},
on: {
click: () => {
this.moveBanners(params, 'up');
},
},
},
'上移'
),
h(
'Button',
{
props: {
type: 'primary',
disabled: params.index === this.getBannersData.length - 1,
},
style: {
margin: '5px',
},
on: {
click: () => {
this.moveBanners(params, 'down');
},
},
},
'下移'
),
h(
'Button',
{
props: {
type: 'primary',
},
style: {
margin: '5px',
},
on: {
click: () => {
this.editAdsInfor(params.row.id, params.row.type);
},
},
},
'编辑'
),
];
return h('div', arr);
},
},
],
getBannersData: [],
form: {
type: 17,
imageUrl: [],
navUrl: '',
minVersion: '',
maxVersion: '',
enable: 1,
limitSystem: ['ios', 'android'],
sort: null,
abLimit: [],
userStates: [0],
jumpSeconds: null,
displayStrategy: null,
tabLocation: 1,
time: [],
},
time: [],
ruleValidate: {
type: [
{
required: true,
message: '请选择广告位置',
trigger: 'blur',
type: 'number',
},
],
imageUrl: [
{
required: true,
message: '请选择图片',
trigger: 'change',
type: 'array',
validator: imgCheck,
},
],
enable: [
{
required: true,
message: '请选择状态',
trigger: 'change',
type: 'number',
},
],
sort: [
{
required: true,
message: '请输入排序',
trigger: 'blur',
type: 'number',
},
],
navUrl: [
{
message: '请输入链接',
trigger: 'blur',
validator: validator(35),
},
],
jumpSeconds: [
{
required: true,
message: '请输入跳过时间',
trigger: 'blur',
validator: validator(17),
},
],
tabLocation: [
{
required: true,
message: '请选择弹窗位置',
trigger: 'change',
validator: validator(33),
},
],
displayStrategy: [
{
required: true,
message: '请选择弹出策略',
trigger: 'change',
validator: validator(33),
},
],
time: [
{
required: false,
message: '请选择时间',
trigger: 'blur',
type: 'array',
},
],
userStates: [
{
message: '请选择用户状态',
trigger: 'blur',
type: 'array',
min: 1,
validator: validator(35),
},
],
},
abLimitList: [],
positionList: [],
flagText: '',
apiargument: {},
};
},
mounted() {
this.getListData();
this.getBannersFn();
},
methods: {
// 查询
getBannersFn() {
const { enable, type, name } = this.search;
const params = {
userState: name,
type,
enable,
};
this.getBannersData = [];
let api = operationService.getList;
if (this.search.type === 35) {
if (!name && name !== 0) {
this.$Notice.error({
title: '请选择用户状态',
});
return;
}
api = operationService.bannerQuery;
}
this.apiargument = deepCopy(this.search);
api(params).then(res => {
if (!Array.isArray(res)) {
return;
}
const data = res || [];
this.getBannersData = data.map(ad => {
ad.enableText = ad.enable ? '启用' : '停用';
ad.imgList = (ad.imageUrl && ad.imageUrl.split(',')) || (ad.imgUrl && ad.imgUrl.split(',')) || []; // 解析多图片
return ad;
});
});
},
getListData() {
operationService.getAdUserStatusList().then(res => {
this.userStatusList = res || [];
});
operationService.getPositionList().then(res => {
this.positionList =
[
...res,
{
type: 35,
name: '底部轮播图',
},
] || [];
});
this.abLimitList = Array.from(new Array(10), (item, index) => index + '');
},
// 启用\停用
useOrStop({ id, enable }) {
let api = operationService.enableAdv;
if (this.apiargument.type === 35) {
api = operationService.enableBanner;
}
api(id, enable ? 0 : 1, this.apiargument.name).then(() => {
this.$Notice.success({
title: '操作成功！',
});
this.getBannersFn();
});
},
// 上移\下移
moveBanners({ index, row }, action) {
const { id: sourceId } = row;
const targetId = action === 'up' ? this.getBannersData[index - 1].id : this.getBannersData[index + 1].id;
let api = operationService.move;
if (this.apiargument.type === 35) {
api = operationService.moveBanner;
}
api(sourceId, targetId, this.apiargument.name).then(() => {
this.$Notice.success({
title: '操作成功！',
});
this.getBannersFn();
});
},
// 编辑
editAdsInfor(id) {
this.adDialog = true;
this.flagText = '编辑广告';
let api = operationService.getAdvInfo;
if (this.apiargument.type === 35) {
api = operationService.bannerInfo;
}
api(id, this.apiargument.name).then(ad => {
this.form = {
type: ad.type,
imageUrl: (ad.imageUrl && ad.imageUrl.split(',')) || (ad.imgUrl && ad.imgUrl.split(',')) || [],
navUrl: ad.navUrl,
minVersion: ad.minVersion,
maxVersion: ad.maxVersion,
enable: ad.enable ? 1 : 0,
limitSystem: ad.limitSystem ? ad.limitSystem.split(',') : [],
sort: ad.sort,
abLimit: ad.abLimit ? ad.abLimit.split(',') : [],
userStates: ((ad.userState || ad.userState === 0) && [ad.userState]) || [],
jumpSeconds: ad.jumpSeconds,
displayStrategy: ad.displayStrategy,
tabLocation: ad.tabLocation,
time: (ad.startTime && [ad.startTime, ad.endTime]) || [],
id: ad.id,
};
if (this.apiargument.type === 35) {
this.form.time = (ad.startAt && [moment(ad.startAt).format('YYYY-MM-DD HH:mm:ss'), moment(ad.endAt).format('YYYY-MM-DD HH:mm:ss')]) || [];
this.form.userStates = [this.apiargument.name] || [];
this.form.type = 35;
}
this.form.editValue = this.form.type;
});
},
addAdsFn() {
this.adDialog = true;
this.flagText = '添加广告';
this.$refs.form.resetFields();
this.form.minVersion = '';
this.form.maxVersion = '';
this.form.userStates = [0];
this.form.id = '';
},
// 版本校验
checkVersion(value) {
const regu = /^[0-9]{1,}\.[0-9]{1,}\.[0-9]{1,}$/;
const reg = new RegExp(regu);
if (!reg.test(value)) {
this.$Notice.error({
desc: '版本号不正确，请重新填写！',
});
}
return reg.test(value);
},
// 时间转化
timeToArr(date) {
this.time = date;
},
save() {
console.log('sdf');
this.$refs.form.validate(val => {
if (val) {
try {
if (this.form.minVersion) {
if (!this.checkVersion(this.form.minVersion)) return;
}
if (this.form.maxVersion) {
if (!this.checkVersion(this.form.maxVersion)) return;
}
const params = {
minVersion: this.form.minVersion,
maxVersion: this.form.maxVersion,
limitSystem: this.form.limitSystem.join(','),
userStates: this.form.userStates.join(','),
jumpSeconds: this.form.jumpSeconds,
enable: this.form.enable,
imageUrl: this.form.imageUrl.join(','),
abLimit: this.form.abLimit.join(','),
sort: this.form.sort,
type: this.form.type,
tabLocation: this.form.tabLocation,
navUrl: this.form.navUrl,
displayStrategy: this.form.displayStrategy,
id: this.form.id,
};
const { id } = this.form;
if (this.form.type === 35) {
params.displayCode = params.userStates;
params.startAt = (this.form.time[0] && new Date(this.form.time[0]).getTime()) || '';
params.endAt = (new Date(this.form.time[1]) && new Date(this.form.time[1]).getTime()) || '';
params.imgUrl = params.imageUrl;
delete params.time;
delete params.type;
delete params.userStates;
delete params.imageUrl;
if (id && id !== 0) {
operationService.updateBanner(params).then(() => {
this.$Message.success('成功！');
this.adDialog = false;
this.getBannersFn();
});
} else {
operationService.addBanner(params).then(() => {
this.$Message.success('成功！');
this.adDialog = false;
this.getBannersFn();
});
}
} else {
// 解析时间
const obj = this.positionList.find(item => item.type === this.form.type) || {};
params.name = obj.name;
const times = this.form.time;
params.startTime = (times[0] && moment(times[0]).format('YYYY-MM-DD HH:mm:ss')) || '';
params.endTime = (times[1] && moment(times[1]).format('YYYY-MM-DD HH:mm:ss')) || '';
operationService.newAdv(params).then(() => {
this.$Message.success('成功！');
this.adDialog = false;
this.getBannersFn();
});
}
} catch (e) {
// statements
console.log(e);
}
} else {
this.$Notice.error({
title: '表单验证失败！',
});
}
});
},
addUsername(url) {
if (!url) return url;
// 如果url是http://1.com?, 那么转换后是http://1.com?&userPhone
if (url.indexOf('?') === -1) {
url += '?';
}
if (url.indexOf('userPhone') === -1) {
url += (url.substr(-1) === '?' ? '' : '&') + 'userPhone={phone}';
}
if (url.indexOf('token') === -1) {
url += '&token={token}';
}
return url;
},
// 转码操作
changeUrl(url) {
this.form.navUrl = encodeURI(this.addUsername(url));
},
close() {
this.isOpen = false;
this.adDialog = false;
},
changeType(e) {
if (e === this.form.editValue) {
return;
}
this.$refs.form.resetFields();
this.form = {
imageUrl: [],
navUrl: '',
minVersion: '',
maxVersion: '',
enable: 1,
limitSystem: ['ios', 'android'],
sort: null,
abLimit: [],
userStates: [0],
jumpSeconds: null,
displayStrategy: null,
tabLocation: 1,
time: [],
};
this.form.type = e;
},
changeTypeSearch(e) {
this.form.type = e;
},
isShow(ids, type = true) {
// type:false 是不包含；true是包含;默认是不包含
if (type) {
return ids.includes(this.form.type);
} else {
return !ids.includes(this.form.type);
}
},
},
};
</script>
<style scoped>
.m-b-5 {
margin-bottom: 5px;
}
.adlist-input-width {
width: 300px;
margin-right: 10px;
}
.spit {
display: inline-block;
margin-right: 4px;
line-height: 1;
font-family: SimSun;
color: #ed3f14;
}
.ad-item-label {
width: 120px;
margin-left: -72px;
text-align: right;
}
.ad-item-content {
display: inline-block;
margin-left: 8px;
}
.marginR {
margin-right: 10px;
}
</style>
src/view/operation/LoanHomePage.vue 0 → 100644
View file @ 3d1d248f
<template>
<div style="margin:20px">
用户订单/状态&nbsp;&nbsp;&nbsp;
<Select v-model="type" class="loan-select" @on-change="getLoanList">
<Option v-for="item in typeList" :key="item.type" :value="item.type">{{ item.name }}</Option>
</Select>
<div class="loan-table">
<Table border :columns="column" :data="data" />
</div>
<div>
<Modal v-model="borrowModal" title="借款额度配置">
<Form ref="borrowForm" :model="borrowForm" :rules="borrowValidate" :label-width="120">
<FormItem label="中心标题描述:" prop="title">
<Input v-model="borrowForm.title" placeholder="限20个字节" class="loan-input-w" />
</FormItem>
<FormItem label="中心金额:" prop="borrowAmount">
<Input v-model="borrowForm.borrowAmount" placeholder="限6个数字" class="loan-input-w-middle" />
<span style="margin-left:10px">元</span>
</FormItem>
</Form>
<div slot="footer">
<Button type="primary" @click="save('borrow')">保存</Button>
<Button type="primary" @click="cancel">取消</Button>
</div>
</Modal>
<Modal v-model="cardTitleModal" title="描述文案">
<Form ref="cardTitleForm" :model="cardTitleForm" :rules="cardTitleValidate" :label-width="120">
<FormItem label="描述1:" prop="desc1">
<Input v-model="cardTitleForm.desc1" class="loan-input-w" />
</FormItem>
<FormItem label="描述2:" prop="desc2">
<Input v-model="cardTitleForm.desc2" class="loan-input-w" />
</FormItem>
<FormItem label="描述3:" prop="desc3">
<Input v-model="cardTitleForm.desc3" class="loan-input-w" />
</FormItem>
</Form>
<div slot="footer">
<Button type="primary" @click="save('cardTitle')">保存</Button>
<Button type="primary" @click="cancel">取消</Button>
</div>
</Modal>
<Modal v-model="cardModal" title="卡片内容">
<Form ref="cardForm" :model="cardForm" :rules="cardValidate" :label-width="120">
<FormItem label="标题:" prop="cardTitle">
<Input v-model="cardForm.cardTitle" placeholder="限16个字节" class="loan-input-w" />
</FormItem>
<FormItem label="标题描述:" prop="cardCopyWriter">
<Input v-model="cardForm.cardCopyWriter" placeholder="限56个字节" class="loan-input-w" />
</FormItem>
</Form>
<div slot="footer">
<Button type="primary" @click="save('card')">保存</Button>
<Button type="primary" @click="cancel">取消</Button>
</div>
</Modal>
<Modal v-model="buoyModal" title="卡片浮标">
<Form ref="buoyForm" :model="buoyForm" :rules="buoyValidate" :label-width="120">
<FormItem label="状态:" prop="isShow">
<RadioGroup v-model="buoyForm.isShow">
<Radio label="show">显示图标</Radio>
<Radio label="hidden">隐藏图标</Radio>
</RadioGroup>
</FormItem>
<FormItem label="浮标图片" prop="imgUrl">
<upload :uploadurl="buoyForm.imgUrl" :max="1" />
</FormItem>
<FormItem label="链接:" prop="navUrl">
<Input v-model="buoyForm.navUrl" class="loan-input-w" />
</FormItem>
</Form>
<div slot="footer">
<Button type="primary" @click="save('buoy')">保存</Button>
<Button type="primary" @click="cancel">取消</Button>
</div>
</Modal>
<Modal v-model="detailModal" title="查看详情" width="500">
<Form ref="detailForm" :model="detailForm" :rules="detailValidate" :label-width="100">
<FormItem label="链接:" prop="navUrl">
<Input v-model="detailForm.navUrl" class="loan-input-w" />
</FormItem>
</Form>
<div slot="footer">
<Button type="primary" @click="save('detail')">保存</Button>
<Button type="primary" @click="cancel">取消</Button>
</div>
</Modal>
<Modal v-model="buttonModal" title="按钮配置" width="500">
<Form ref="buttonForm" :model="buttonForm" :rules="buttonValidate" :label-width="120">
<FormItem label="按钮文案:" prop="buttonTitle">
<Input v-model="buttonForm.buttonTitle" placeholder="限12个字节" class="loan-input-w" />
</FormItem>
<FormItem label="按钮链接:" prop="navUrl">
<Input v-model="buttonForm.navUrl" class="loan-input-w" />
</FormItem>
</Form>
<div slot="footer">
<Button type="primary" @click="save('button')">保存</Button>
<Button type="primary" @click="cancel">取消</Button>
</div>
</Modal>
</div>
</div>
</template>
<script>
import operationService from '../../services/apis/operation.service';
import upload from '../../components/qn-upload.vue';
// 校验数字长度
const validatorCount = function(rule, value, callback) {
if (!rule.pattern.test(value)) {
return callback(new Error('请填写数字，不能超过6位'));
} else {
callback();
}
};
// 校验图片是否为空
const validatorPic = function(rule, value, callback) {
if (value.length === 0) {
return callback(new Error('图片不能为空'));
} else {
callback();
}
};
// 校验字节数
const validatorCountByte = function(rule, value, callback) {
let n = 0;
for (let i = 0; i < value.length; i++) {
// charCodeAt()可以返回指定位置的unicode编码,这个返回值是0-65535之间的整数
if (value.charCodeAt(i) < 128) {
n++;
} else {
n += 2;
}
}
if (n > rule.max) {
return callback(new Error(`长度不能超过${rule.max}个字节`));
} else {
callback();
}
};
export default {
components: {
upload,
},
data() {
return {
type: 0,
typeList: [],
column: [
{
title: '序号',
key: 'sort',
render: (h, params) => {
return h('div', params.index + 1);
},
},
{ title: '模块', key: 'configName' },
{
title: '操作',
key: 'action',
render: (h, params) => {
return h('div', [
h(
'Button',
{
props: {
type: 'primary',
},
on: {
click: () => {
this.edit(params.row);
},
},
},
'编辑'
),
]);
},
},
],
data: [],
formUser: {
isShow: 'show',
content: '',
navUrl: '',
},
validateUser: {
isShow: [{ required: true }],
content: [
{
required: true,
message: '标题不能为空',
trigger: 'blur',
},
{
type: 'string',
max: 12,
validator: validatorCountByte,
trigger: 'blur',
},
],
navUrl: [{ required: true, message: '链接不能为空', trigger: 'blur' }],
},
modal1: false,
borrowModal: false,
cardTitleModal: false,
cardModal: false,
buoyModal: false,
detailModal: false,
buttonModal: false,
formHelp: {
isShow: 'show',
navUrl: '',
},
validateHelp: {
isShow: [{ required: true }],
navUrl: [{ required: true, message: '链接不能为空', trigger: 'blur' }],
},
borrowForm: {
title: '',
borrowAmount: '',
},
borrowValidate: {
title: [
{
required: true,
message: '中心标题描述不能为空',
trigger: 'blur',
},
{
type: 'string',
max: 20,
validator: validatorCountByte,
trigger: 'blur',
},
],
borrowAmount: [
{
required: true,
message: '中心金额不能为空',
trigger: 'blur',
},
{
type: 'regexp',
pattern: /^\d{1,6}$/,
validator: validatorCount,
trigger: 'blur',
},
],
},
cardTitleForm: {
desc1: '',
desc2: '',
desc3: '',
},
cardTitleValidate: {
desc1: [
{
required: true,
message: '描述1不能为空',
trigger: 'blur',
},
{
type: 'string',
validator: validatorCountByte,
trigger: 'blur',
},
],
desc2: [
{
required: true,
message: '描述2不能为空',
trigger: 'blur',
},
{
type: 'string',
validator: validatorCountByte,
trigger: 'blur',
},
],
desc3: [
{
required: true,
message: '描述3不能为空',
trigger: 'blur',
},
{
type: 'string',
validator: validatorCountByte,
trigger: 'blur',
},
],
},
buttonForm: {
buttonTitle: '',
navUrl: '',
},
buttonValidate: {
buttonTitle: [
{
required: true,
message: '文案不能为空',
trigger: 'blur',
},
{
type: 'string',
max: 12,
validator: validatorCountByte,
trigger: 'blur',
},
],
navUrl: [{ required: true, message: '链接不能为空', trigger: 'blur' }],
},
cardForm: {
cardTitle: '',
cardCopyWriter: '',
},
cardValidate: {
cardTitle: [
{
required: true,
message: '标题不能为空',
trigger: 'blur',
},
{
type: 'string',
max: 16,
validator: validatorCountByte,
trigger: 'blur',
},
],
cardCopyWriter: [
{
required: true,
message: '标题描述不能为空',
trigger: 'blur',
},
{
type: 'string',
max: 56,
validator: validatorCountByte,
trigger: 'blur',
},
],
},
buoyForm: {
isShow: 'show',
imgUrl: [],
navUrl: '',
},
buoyValidate: {
isShow: [{ required: true }],
imgUrl: [{ required: true, validator: validatorPic, trigger: 'blur' }],
navUrl: [{ required: true, message: '链接不能为空', trigger: 'blur' }],
},
detailForm: {
navUrl: '',
},
detailValidate: {
navUrl: [{ required: true, message: '链接不能为空', trigger: 'blur' }],
},
tokey: {
卡片浮标: 'buoy',
借款额度配置: 'borrow',
描述文案: 'cardTitle',
按钮: 'button',
卡片内容: 'card',
查看详情: 'detail',
},
};
},
mounted() {
// 初始化 借款状态
operationService.getUserStatusList().then(res => {
this.typeList = res;
});
this.getLoanList();
},
methods: {
// 根据状态获取列表
getLoanList() {
operationService.queryConfig(this.type).then(res => {
this.data = this.sortList(res);
});
},
// 列表排序
sortList(arr = []) {
const result = [];
const tempArr = ['借款额度配置', '描述文案', '卡片内容', '卡片浮标', '查看详情', '按钮'];
for (const temp of tempArr) {
for (const item of arr) {
if (item.configName === temp) {
result.push({ ...item, key: this.tokey[temp] });
break;
}
}
}
return result;
},
// 编辑八种状态
edit({ key, loanState }) {
this.$refs[`${key}Form`].resetFields();
operationService[`${key}Info`](loanState).then(res => {
const keyArr = Object.keys(this[`${key}Form`]);
res = Array.isArray(res) ? res[0] : res;
for (const key in res) {
if (!keyArr.includes(key)) {
delete res[key];
}
}
if (key === 'buoy') {
this[`${key}Form`] = {
isShow: res.isShow ? 'show' : 'hidden',
imgUrl: res.imgUrl ? res.imgUrl.split(',') : [],
navUrl: res.navUrl,
};
} else {
this[`${key}Form`] = res || {};
}
});
this[`${key}Modal`] = true;
},
// 汉字校验
checkText(val, flag) {
const text = flag === 1 ? '左上标题右框' : '右上标题右框';
const reg = /^[\u4e00-\u9fa5a-zA-Z]{1,5}$/;
if (!val) {
this.$Message.error(`${text}不能为空！`);
return false;
}
if (!reg.test(val)) {
this.$Message.error(`${text}需输入汉字，长度不能超过5个！`);
return false;
}
return true;
},
// 保存 用户等级入口
save(key) {
if (name === 'cardTitle') {
if (!this.checkText(this.cardTitleForm.leftText, 1)) {
return;
}
if (!this.checkText(this.cardTitleForm.rightText, 2)) {
return;
}
}
const form = `${key}Form`;
this.$refs[form].validate(valid => {
if (valid) {
let param = {};
if (key === 'cardTitle') {
param.copyWritingList = [];
param.copyWritingList[0] = this.copyFn(this[form]);
} else {
param = this.copyFn(this[form]);
}
if (param.isShow) {
param.isShow = this[form].isShow === 'show';
}
param.state = this.type + '';
if (param.imgUrl) {
delete param.imgUrl;
param.imgUrl = this[form].imgUrl[0];
}
operationService[`${key}Save`](param).then(() => {
this.$Message.success('保存成功！');
this[`${key}Modal`] = false;
this.getLoanList();
});
}
});
},
// 取消
cancel() {
this.common1 = false;
this.common2 = false;
this.modal1 = false;
this.borrowModal = false;
this.cardTitleModal = false;
this.cardModal = false;
this.buoyModal = false;
this.detailModal = false;
this.buttonModal = false;
},
copyFn(param) {
if (typeof param === 'object') {
return JSON.parse(JSON.stringify(param));
}
},
},
};
</script>
<style lang="less" scoped>
.loan-select {
width: 200px;
}
.loan-table {
width: 500px;
margin-top: 20px;
}
.loan-input-w {
width: 300px;
}
.loan-input-w-middle {
width: 200px;
}
.loan-input-w-small {
width: 100px;
}
.spit {
color: #aaa;
}
</style>
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