Skip to content

M
marketing
Commit 34b64c75 by zhangmeng
Options

营销事件组件

parent 0e590bf2
Showing with 1253 additions and 96 deletions
src/test/dmMarketing/components/app-item.vue → src/test/dmMarketing/components/item-app.vue
<template>
<div class="dm-app__item__wrap" @mouseover="maskShow = true" @mouseout="maskShow = false">
<div class="dm-app__item">
<div class="dm-app__avatar">
<img :src="loadErrorImg" alt="">
<span>达摩公开课</span>
<div class="inline-block">
<div class="dm-app__item__wrap" @mouseover="maskShow = true" @mouseout="maskShow = false">
<div class="dm-app__item">
<div class="dm-app__avatar">
<img :src="item.imageUrl || loadErrorImg" alt="">
<span>{{item.wechatContent.title}}</span>
</div>
<p class="ellipsis-l2">{{item.text}}</p>
<img :src="item.imageUrl || loadErrorImg" alt="" srcset="">
<p class="dm-app__item--bottom"><img src="../img/app-circle.svg" alt="" srcset=""><span> 小程序</span></p>
</div>
<p class="ellipsis-l2">测试测试测试测试测测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试</p>
<img :src="loadErrorImg" alt="" srcset="">
<p class="dm-app__item--bottom"><img src="../img/app-circle.svg" alt="" srcset=""><span> 小程序</span></p>
</div>
<i class="el-icon-edit dm-marketing__opt--icon" @click="edit"></i>
<i class="el-icon-delete dm-marketing__opt--icon" @click="del"></i>
</div>
</template>
<script>
export default {
name:'com-app',
name:'item-app',
data(){
return {
maskShow:false,
......@@ -28,7 +32,16 @@ export default {
return {}
}
}
},
methods:{
del() {
this.$emit('del');
},
edit() {
}
}
}
</script>
src/test/dmMarketing/components/card-item.vue → src/test/dmMarketing/components/item-card.vue
<template>
<div class="dm-card__item__wrap" @mouseover="maskShow = true" @mouseout="maskShow = false">
<div class="dm-card__item">
<img class="dm-card__item__avatar" :src="loadErrorImg" alt="">
<div class="inline-block">
<p class="dm-card__item__title">20元代金券</p>
<p class="dm-card__item__desc">领取后0-7天</p>
</div>
</div>
<p class="dm-card__item--bottom"><span>适用所有门店</span></p>
<div class="inline-block">
<div class="dm-card__item__wrap">
<div class="dm-card__item" :style="{background:item.cardColor}">
<img class="dm-card__item__avatar" :src="loadErrorImg" alt="">
<div class="inline-block">
<p class="dm-card__item__title">{{item.cardName}}</p>
<p class="dm-card__item__desc" v-if="item.cardEffectiveMode !== 0">领取后第{{item.startDay+1}}-{{item.limitDay+item.startDay}}天</p>
<p class="dm-card__item__desc" v-if="item.cardEffectiveMode === 0">{{formateDateTimeByType(item.beginDate,'yyyy-MM-dd')}} 至 {{formateDateTimeByType(item.endDate,'yyyy-MM-dd')}}</p>
</div>
</div>
<p class="dm-card__item--bottom">
<span>适用{{item.storeMode === 0 ? "所有门店" : (item.storeMode === 1 ? "部分分组" : "部分门店")}}</span>
</p>
</div>
<i class="el-icon-delete dm-marketing__opt--icon" @click="del"></i>
</div>
</template>
<script>
import {formateDateTimeByType} from '../utils.js'
export default {
name:'com-card',
name:'item-card',
data(){
return {
maskShow:false,
formateDateTimeByType,
loadErrorImg:require('../img/loaderror.png')
}
},
......@@ -27,6 +35,11 @@ export default {
return {}
}
}
},
methods:{
del() {
this.$emit('del');
}
}
}
</script>
......
src/test/dmMarketing/components/img-text-item.vue → src/test/dmMarketing/components/item-img-text.vue
<template>
<div class="dm-imgText__item__wrap" @mouseover="maskShow = true" @mouseout="maskShow = false">
<div v-show="maskShow" class="dm-imgText__item__mask"></div>
<div class="dm-imgText__item" >
<p class="ellipsis-l2">测试测试测试测试测测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试</p>
<img :src="loadErrorImg" alt="" srcset="">
<p class="ellipsis fz13 gray-color">测试测试测试测试测测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试</p>
<div class="inline-block">
<div class="dm-imgText__item__wrap" @mouseover="maskShow = true" @mouseout="maskShow = false">
<div v-for="(v,i) in item.itemList" :key="i">
<div v-show="maskShow" class="dm-imgText__item__mask" @click="window.open(v.mediaUrl)"></div>
<div class="dm-imgText__item" v-if="i === 0">
<p class="ellipsis-l2">{{v.titleName}}</p>
<img :src="v.qcloudImageUrl || loadErrorImg" alt="" srcset="">
<p class="ellipsis fz13 gray-color">{{v.remark}}</p>
</div>
<div class="dm-imgText__item__other clearfix" v-else>
<img :src="v.qcloudImageUrl || loadErrorImg" alt="" srcset="">
<p class="ellipsis-l2">{{v.titleName}}</p>
</div>
</div>
</div>
<i class="el-icon-delete dm-marketing__opt--icon" @click="del"></i>
</div>
</template>
<script>
export default {
name:'com-img-text',
name:'item-img-text',
data(){
return {
maskShow:false,
......@@ -22,9 +31,16 @@ export default {
item:{
type: Object,
default() {
return {}
return {
itemList:[]
}
}
}
},
methods:{
del() {
this.$emit('del');
}
}
}
</script>
......
src/test/dmMarketing/components/item-img.vue 0 → 100644
<template>
<span class="inline-block">
<span class="dm-img__item__wrap">
<img :src="item.qcloudImageUrl || loadErrorImg" alt="">
</span>
<i class="el-icon-delete dm-marketing__opt--icon" @click="del"></i>
</span>
</template>
<script>
export default {
name: 'item-img',
props: {
item: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
loadErrorImg:require('../img/loaderror.png')
}
},
methods:{
del() {
this.$emit('del');
}
}
}
</script>
src/test/dmMarketing/components/item-sms.vue 0 → 100644
<template>
<span class="inline-block">
<span class="dm-msg__item__wrap">
<div class="dm-msg__item">
<p class="dm-msg__item--title">{{item.title}}</p>
<p class="dm-msg__item--content">{{item.content}}</p>
</div>
</span>
<i class="el-icon-delete dm-marketing__opt--icon" @click="del"></i>
</span>
</template>
<script>
export default {
name: 'item-sms',
props: {
item: {
type: Object,
default() {
return {}
}
}
},
methods:{
del() {
this.$emit('del');
}
}
}
</script>
src/test/dmMarketing/components/item-tel.vue 0 → 100644
<template>
<span class="inline-block">
<span class="dm-tel__item__wrap">
<div class="dm-tel__item">
<p class="dm-tel__item--title">{{item.title}} <span class="fz13 gray-color">任务逾期判定{{item.lateDays}}天之后</span></p>
<p class="dm-tel__item--content">{{item.describe}}</p>
</div>
</span>
<i class="el-icon-edit dm-marketing__opt--icon" @click="edit"></i>
<i class="el-icon-delete dm-marketing__opt--icon" @click="del"></i>
</span>
</template>
<script>
export default {
name: 'item-tel',
props: {
item: {
type: Object,
default() {
return {}
}
}
},
methods:{
del() {
this.$emit('del');
},
edit() {
this.$emit('edit',this.item);
}
}
}
</script>
src/test/dmMarketing/components/item-text.vue 0 → 100644
<template>
<span class="inline-block">
<span class="dm-text__wrap ellipsis-l2 inline-block" v-html="item.textarea"></span>
<i class="el-icon-edit dm-marketing__opt--icon" @click="edit"></i>
<i class="el-icon-delete dm-marketing__opt--icon" @click="del"></i>
</span>
</template>
<script>
export default {
name: 'item-text',
props: {
item: {
type: Object,
default() {
return {}
}
}
},
methods:{
del() {
this.$emit('del');
},
edit() {
this.$emit('edit',this.item);
}
}
}
</script>
src/test/dmMarketing/components/lib-app.vue 0 → 100644
<template>
<el-dialog title="添加小程序链接" :visible.sync="show" width="600px" class="add-replay-content" :before-close="close">
<el-form label-position="right" ref="form" :model="form" label-width="100px">
<el-form-item class="text-content" label="文本内容">
<el-input v-model="form.text" @keyup.native="toInput(form.text,$event)" ></el-input>
<span class="text-num">{{inputNum}}/{{inputLength}}</span>
</el-form-item>
<div class="content-wrap">
<div class="xcx-content-wrap">
<el-form-item label="上传图片">
<div class="upload-content">
<el-upload
class="avatar-uploader"
action="123"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<p>请上传长宽比为5:4的图片</p>
</div>
</el-form-item>
<el-form-item label="链接类型" class="url-link-wrap" style="margin-bottom: 0">
<el-select @change="changePreValue" v-model="preValue" class="w200" placeholder="请选择" style="margin-right: 6px;">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-if="preValue" @change="changeNextValue" class="w200" v-model="nextValue" placeholder="请选择">
<el-option
v-for="item in options2"
:key="item.linkId"
:label="item.name"
:value="item.linkId">
</el-option>
</el-select>
</el-form-item>
</div>
</div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="close">关 闭</el-button>
<el-button type="primary" @click="addItem">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import {getByteVal,getZhLen} from '../utils.js';
let qs = require('qs');
export default {
name:'lib-app',
props:{
show:{
type:Boolean,
default:false
}
},
data(){
return {
form: {
text:'',
linkStyle:'0',
url:''
},
inputNum: 0, // 输入文字个数(两个字母/汉字算一个字)
inputLength: 20, // 限制最大字数
imageUrl: '',
preValue: '',
nextValue: '',
options1: [{
value: 3,
label: '导航tabber页'
}, {
value: 4,
label: '二级功能页'
}],
options2:[],
wechatContent:{},
}
},
methods:{
toInput(value,e) { // 控制字符数量
var that = this;
that.form.text = getByteVal(e.target.value,that.inputLength);
that.inputNum = getZhLen(that.form.text);
},
handleAvatarSuccess(res, file) {
},
beforeAvatarUpload(file) {
// console.log(file)
let fd = new FormData();
fd.append('file', file);
fd.append('requestProject', 'gic-web');
this.axios.post('/api-admin/marketing-wechat-image-save', fd).then((res)=> {//成功后回调
var data = res.data;
// console.log(data);
if(data.errorCode==0){
this.imageUrl = data.result.qcloudImageUrl;
this.imageMediaId = data.result.imageMediaId;
this.$message({
type:'success',
message:'上传成功'
})
} else {
this.$message({
type:'error',
message:data.message
})
}
})
return true
},
// 链接类型
changePreValue(val){
// val==3 导航tabber页 val==4 二级功能页
if(val){
this.nextValue = '';
this.getNextList(val)
}
},
changeNextValue(val){
if(val){
let obj = {};
obj = this.options2.find((style) => {
return style.linkId === val;
})
this.wechatContent.type = obj.linkId;
this.wechatContent.objId = '';
this.wechatContent.title = obj.name;
this.wechatContent.pageType = this.preValue;
}
},
// 获得链接类型的二级
getNextList(type){
this.axios.post('/api-plug/list-link-data', qs.stringify({
requestProject: 'gic-web',
linkScene:parseInt(type)
})).then((res)=> {//成功后回调
var data = res.data;
console.log(data);
if(data.errorCode==0){
this.options2 = data.result;
} else {
this.$message({
type:'error',
message:data.message
})
}
})
},
addItem() {
let sendData = {
comName:'item-app',
imageUrl:this.imageUrl,
imageMediaId:this.imageMediaId,
wechatContent:this.wechatContent,
text:this.form.text,
url:this.form.url
}
if (!sendData.text) {
this.$tips({type:'warning',message:'简介未填写'});
return;
}
if (!sendData.imageMediaId) {
this.$tips({type:'warning',message:'图片未上传'});
return;
}
if (!sendData.wechatContent.title) {
this.$tips({type:'warning',message:'链接选择'});
return;
}
this.$emit('sendItem',sendData);
},
close() {
this.$emit('update:show',false);
},
}
}
</script>
<style lang="scss" scoped>
.add-replay-content{
.text-content{
position: relative;
width: 400px;
.text-num{
position: absolute;
right: 10px;
bottom: 1px;
color: #c0c4cc;
font-size: 12px;
background: #fff;
height: 30px;
line-height: 32px;
padding-left: 10px;
}
}
.link-url-warning{
color: #909399;
font-size: 12px;
line-height: 1;
padding-top: 4px;
margin-top: 3px;
position: absolute;
top: 100%;
left: 0;
}
}
.xcx-content-wrap{
width: 100%;
.upload-content{
> p{
height: 36px;
line-height: 36px;
font-size: 12px;
color: #b8b8b8
}
}
}
.avatar-uploader{
width: 152px;
height: 152px;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
&:hover {
border-color: #1890ff;
}
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
}
.avatar {
width: 150px;
height: 150px;
display: block;
}
.upload-content /deep/ .avatar-uploader .el-upload{
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.upload-content /deep/ .avatar-uploader .el-upload:hover{
border-color: #1890ff;
}
</style>
src/test/dmMarketing/components/lib-card.vue 0 → 100644
<template>
<el-dialog title="选择卡券" :visible.sync="show" width="800px" :before-close="close">
<div class="clearfix pb22">
<div class="fl">
<span>共{{total}}条</span>
<el-input v-model="listParams.searchParam" class="w200" clearable placeholder="请输入卡券名称" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<span class="fz12 gray pl20">{{limitTips}} </span>
</div>
<div class="fr">
<el-button type="primary" @click="add">新建卡券</el-button>
<el-button @click="refresh">刷新列表</el-button>
</div>
</div>
<el-table tooltipEffect="light" :data="tableList" :height="360" style="width: 100%" v-loading="loading" @row-click="rowClick">
<el-table-column :show-overflow-tooltip="false" width="60" align="center" prop="coupCardId">
<template slot-scope="scope">
<div class="sms-record_left label-hidden">
<el-radio v-model="selectedData" :label="scope.row" class="pr10"></el-radio>
</div>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="false" align="left" prop="cardName" label="卡券名称"></el-table-column>
<el-table-column :show-overflow-tooltip="false" :width="100" align="left" prop="cardLimit" label="领取限制"></el-table-column>
<el-table-column :show-overflow-tooltip="false" :width="120" align="left" prop="storeMode" label="适用门店">
<template slot-scope="scope">
{{scope.row.storeMode === 0?'所有门店':(scope.row.storeMode === 1?'部分分组':'部分门店')}}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="false" :width="100" align="left" prop="couponStock" label="库存"></el-table-column>
<el-table-column :show-overflow-tooltip="true" align="left" prop="subName" label="描述"></el-table-column>
</el-table>
<el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
<span slot="footer" class="dialog-footer">
<el-button @click="close">关 闭</el-button>
<el-button type="primary" @click="addItem">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import {getCardList} from '../api.js';
export default {
name:'lib-card',
props:{
show:{
type:Boolean,
default:false
},
cardLimitType:{
type:Number,
default:1
}
},
computed:{
limitTips() {
if (this.cardLimitType === 2) {
return '领取限制领取 1~100的卡券，系统已过滤。';
} else if (this.cardLimitType === 3) {
return '领取限制领取>=100 的卡券，系统已过滤。';
} else {
return '领取限制>1的卡券不支持选择，系统已过滤。';
}
}
},
data(){
return{
listParams:{
searchParam:'',
currentPage:1,
pageSize:10,
requestProject:'gic-web',
cardLimitType:this.cardLimitType,
cardType:''
},
total:0,
tableList:[],
selectedData:{}
}
},
created(){
this.getCardList();
},
methods:{
handleSizeChange(val) {
this.listParams.pageSize = val;
this.getCardList();
},
handleCurrentChange(val) {
this.listParams.currentPage = val;
this.getCardList();
},
async getCardList() {
this.loading = true;
let res = await getCardList(this.listParams);
this.tableList = res.result.result || [];
this.total = res.result.totalCount;
this.loading = false;
},
reset() {
this.listParams.searchParams = '';
this.getCardList();
},
close() {
this.$emit('update:show',false);
},
rowClick(row) {
row.comName = 'item-card';
this.selectedData = row;
},
addItem() {
if (!this.selectedData.comName) {
this.$tips({type:'warning',message:'未选择卡券'});
return;
}
this.$emit('sendItem',this.selectedData);
},
add() {
winodw.open('/marketing/#/card/add');
},
refresh() {
this.listParams.currentPage = 1;
this.getCardList();
}
}
}
</script>
src/test/dmMarketing/components/lib-img-item.vue 0 → 100644
<template>
<label :name="imgData" class="dm-img-item" :class="{'active':active === imgData.imageId}">
<div class="dm-img-item_top">
<img :src="imgData.qcloudImageUrl" alt="" srcset="">
</div>
<div class="dm-img-item_center">
<el-checkbox :label="imgData">{{imgData.imageTitle}}</el-checkbox>
</div>
</label>
</template>
<script>
export default {
props:{
imgData:{
type:Object,
default:() => {
return {
qcloudImageUrl:'',
imageId:'',
imageTitle:''
}
}
}
},
data() {
return {
active:''
}
},
methods:{
}
}
</script>
<style lang="scss" scoped>
@import '../../../assets/style/base/var.scss';
@import '../../../assets/style/mixin/index.scss';
.dm-img-item{
width: 168px;
margin: 20px 10px 0 10px;
float: left;
border: 1px solid #e4e7ed;
border-radius: 2px;
overflow: hidden;
cursor: pointer;
&:hover{
border: 1px solid #1890ff;
}
&_top{
width: 168px;
height: 168px;
position: relative;
img{
width: 100%;
height: 100%;
}
}
&_center{
border-top:1px solid $border-color;
height: 32px;
display: flex;
justify-content: left;
align-items: center;
padding-left: 10px;
/deep/ .el-checkbox__label{
@include ellipsis(130px);
vertical-align: middle;
padding-left: 10px;
}
}
&_bottom{
border-top:1px solid $border-color;
height: 32px;
display: flex;
justify-content: space-around;
align-items: center;
background: $gray-color;
}
}
</style>
src/test/dmMarketing/components/img-text-lib.vue → src/test/dmMarketing/components/lib-img-text.vue
<template>
<section>
<el-dialog title="选择图文" :visible.sync="show" width="800px" :before-close="close">
<div class="pb22 clearfix">
<div class="fl">图文消息(共{{total}}条) <el-input v-model="listParams.searchName" clearable class="w200 ml10" placeholder="请输入标题/作者" @change="loadImgTextList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input></div>
<div class="fl">图文消息(共{{total}}条) <el-input v-model="listParams.searchName" clearable class="w200 ml10" placeholder="请输入标题/作者" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input></div>
<div class="fr">
<el-button type="primary" @click="add">新建图文</el-button>
<el-button @click="check">刷新列表</el-button>
<el-button @click="refresh">刷新列表</el-button>
</div>
</div>
<el-radio-group class="dm-imgtext-list" v-model="selectedData" v-loading="loading">
......@@ -37,14 +37,24 @@
</el-table>
</el-radio-group>
<el-pagination v-show="textImgList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
</section>
<span slot="footer" class="dialog-footer">
<el-button @click="close">关 闭</el-button>
<el-button type="primary" @click="addItem">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import {loadImgTextList} from '../api.js';
import {formateDateTimeByType} from '@/utils/index.js'
import {formateDateTimeByType} from '../utils.js'
export default {
name:'lib-img-text',
props:{
show:{
type:Boolean,
default:false
}
},
created(){
this.loadImgTextList();
},
......@@ -58,58 +68,44 @@ export default {
},
total:0,
loading:false,
syncImgTextShow:false,
selectedImgTextId:'',
selectedData:{}
}
},
watch:{
activeId(val) {
this.textImgList.map(v => {
console.log('111'+val)
if (this.activeId === v.imageTextWechatId) {
this.selectedData = v;
}
})
}
},
methods:{
async loadImgTextList() {
this.loading = true
try {
let res = await loadImgTextList(this.listParams);
loadImgTextList() {
this.loading = true;
let res = loadImgTextList(this.listParams).then(res => {
if (res.errorCode === 0) {
this.textImgList = res.result.result || [];
this.total = res.result.totalCount;
this.textImgList.map(v => {
v.createTimeStr = formateDateTimeByType(v.createTime,'yyyy-MM-dd-HH-mm')
v.updateTimeStr = formateDateTimeByType(v.updateTime,'yyyy-MM-dd-HH-mm')
console.log(this.activeId)
if (this.activeId === v.imageTextWechatId) {
this.selectedData = v;
}
})
}
} catch(err) {
console.log(err)
this.$tips({type:'warning',message:'列表请求出错，请稍后再试'});
}
this.loading = false
},
reset() {
this.listParams.searchName = '';
this.loadImgTextList();
},
check() {
this.syncImgTextShow = true;
})
this.loading = false;
},
rowClick(row) {
console.log(row)
row.comName = 'item-img-text';
this.selectedData = row;
this.$emit('get-data',{imageTextId:row.imageTextId,imageTextWechatId:row.imageTextWechatId})
},
add () {
this.$router.push('/wechat/editor');
addItem() {
if (!this.selectedData.comName) {
this.$tips({type:'warning',message:'未选择图文消息'});
return;
}
this.$emit('sendItem',this.selectedData);
},
close() {
this.$emit('update:show',false);
},
add() {
window.open('/marketing/#/wechat/editor');
},
refresh() {
this.listParams.currentPage = 1;
this.loadImgTextList();
},
handleSizeChange(val) {
this.listParams.pageSize = val;
......@@ -120,37 +116,11 @@ export default {
this.loadImgTextList();
}
}
}
</script>
<style lang="scss" scoped>
.dm-imgtext_head{
display: flex;
justify-content: space-between;
}
.dm-imgtext-list {
width: 100%;
&>.dm-imgtext-item {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #e7e7eb;
}
.dm-imgtext_left{
&>img {
width: 100px;
height: 100px;
display:inline-block;
vertical-align: middle;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
&>div{
display: inline-block;
vertical-align: middle;
line-height: 26px;
padding-left: 10px;
}
}
}
</style>
src/test/dmMarketing/components/lib-img.vue 0 → 100644
<template>
<el-dialog title="选择图片" :visible.sync="show" width="800px" :before-close="close">
<div class="dm-ilib clearfix">
<nav class="fl">
<h4 class="text-left pl10" ><el-button style="font-weight: 500;" size="small" type="text" icon="el-icon-plus" @click.stop="addGroup">新建分组</el-button></h4>
<ul class="dm-ilib-category">
<li v-for="(v,i) in groupsList" :key="i" @click="changeCate(v)" :class="{'active':listParams.wechatImageGroupId===v.wechatImageGroupId}"><span class="ellipsis-80">{{v.groupName}}</span><span class="fz10 gray"> ({{v.imageCount}})</span></li>
</ul>
</nav>
<article class="fr">
<div class="dm-ilib-header">
<h4>{{listParams.wechatImageGroupId?currentGroup.groupName:'所有图片'}}</h4>
<div class="dm-ilib-opt_right">
<span class="fz12 gray pr10">大小不超过2M</span>
<label class="el-button el-button--primary el-button--small" :class="{'is-disabled':upLoadDisabled}">{{upLoadDisabled?'上传中...':'上传图片'}}
<input type="file" style="display:none;" :disabled="upLoadDisabled" accept="image/gif, image/jpeg,image/png" ref="uploader" v-imglibupload='this'>
</label>
</div>
</div>
<el-checkbox-group v-loading="loading" v-model="selectedData" :max="1" class="clearfix img-item__wrap">
<img-item v-for="(v,i) in imgList" :key="i" :imgData="v" @click.native.stop.prevent="rowClick(v)"></img-item>
</el-checkbox-group>
<el-pagination v-show="imgList.length" background class="dm-pagination imglib-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
</article>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="close">关 闭</el-button>
<el-button type="primary" @click="addItem">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import imgItem from './lib-img-item'
import {loadImgList,addGroupService} from '../api.js';
export default {
name:'lib-img',
props:{
show:{
type:Boolean,
default:false
},
},
created(){
this.loadImgList();
},
data() {
return {
upLoadDisabled:false,
imgList:[],
listParams:{
currentPage:1,
pageSize:10,
wechatImageGroupId:''
},
total:0,
selectedData:{},
groupsList:[],
groupsMoveList:[],
loading:true,
currentGroup:{groupName:''},
moveImgVal:'',
fileList: [],
}
},
components: {
imgItem
},
methods:{
handleSizeChange(val) {
this.listParams.pageSize = val;
this.loadImgList();
},
handleCurrentChange(val) {
this.listParams.currentPage = val;
this.loadImgList();
},
changeCate(v){
this.listParams.wechatImageGroupId = v.wechatImageGroupId;
this.loadImgList();
},
async loadImgList() {
this.loading = true;
let res = await loadImgList(this.listParams);
this.total = res.result.page.totalCount;
this.currentGroup = res.result.currentGroup;
this.groupsMoveList = Object.assign([],res.result.groups);
this.groupsList = res.result.groups;
this.groupsList.unshift({wechatImageGroupId: "",groupName: "所有图片",imageCount: res.result.totalPicsCount })
this.imgList = [];
if (res.result.page.result) {
const resList = res.result.page.result;
this.$nextTick(_ => {
resList.map(v => {
this.imgList.push(v)
})
})
} else {
this.imgList = [];
}
this.loading = false;
},
//图片上传相关
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
uploadSuccess(response,file,fileList) {
if (response.errorCode === 0) {
this.$tips({type:'warning',message:'上传成功'});
this.fileList = []
this.loadImgList();
} else {
this.$tips({type:'warning',message:response.message});
}
},
addGroup() {
this.$prompt('', '新增分组', {
confirmButtonText: '确定',
cancelBUttonText: '取消',
inputPattern: /\S/,
inputPlaceholder:'请输入分组名称',
inputErrorMessage: '名称不能为空',
inputValue:'新分组',
}).then(({ value }) => {
this.addGroupService(value);
}).catch(err => {
console.log(err)
// this.$tips({
// type: 'info',
// message: '取消新增'
// });
});
},
async addGroupService(val) {
let res = await addGroupService({groupName:val});
this.$tips({type: 'success',message: '新增成功'});
this.loadImgList();
},
close() {
this.$emit('update:show',false);
},
rowClick(row) {
row.comName = 'item-img';
this.selectedData = row;
},
addItem() {
if (!this.selectedData.comName) {
this.$tips({type:'warning',message:'未选择图片'});
return;
}
this.$emit('sendItem',this.selectedData);
}
}
}
</script>
<style lang="scss" scoped>
.dm-ilib{
border: 1px solid #DCDFE6;
border-radius: 2px;
&>article{
position:relative;
width: calc(80% - 1px);
border-left: 1px solid #DCDFE6;
border-radius:0 2px 2px 0;
height:400px;
.dm-ilib-header{
display: flex;
justify-content: space-between;
padding:0 16px;
align-items: center;
border-bottom: 1px solid #DCDFE6;
}
h4{
height: 50px;
line-height: 50px;
font-size: 16px;
i{
font-size: 20px;
padding-left:10px;
cursor: pointer;
}
}
}
.img-item__wrap {
height: 290px;
margin-left: 6px;
overflow-y:auto;
}
&>nav{
width: 20%;
h4{
height: 50px;
line-height: 50px;
padding-right: 20px;
font-size: 16px;
border-bottom: 1px solid #DCDFE6;
cursor: pointer;
}
.dm-ilib-category{
height: 348px;
overflow-y: scroll;
cursor: pointer;
li{
height: 40px;
line-height: 40px;
padding-left: 10px;
&.active{
background: #f4f5f9;
}
&:hover{
background: #f4f5f9;
}
}
}
}
&-opt{
background: #f4f5f9;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding:0 20px;
}
}
.ellipsis-80{
text-overflow: ellipsis;
overflow: hidden;
max-width: 80px;
white-space: nowrap;
word-wrap: normal;
width: auto;
display: inline-block;
vertical-align: middle;
}
.dm-upload{
display: inline-block;
position: relative;
}
.imglib-pagination{
padding-right:20px;
}
</style>
src/test/dmMarketing/components/lib-sms.vue 0 → 100644
<template>
<el-dialog title="选择短信" :visible.sync="show" width="800px" :before-close="close">
<div class="pb22 clearfix">
<div class="fl">共{{total}}条</div><el-input clearable v-model="listParams.search" class="w200" placeholder="请输入标题/作者" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<div class="fr">
<el-button type="primary" @click="add">新建短信</el-button>
<el-button @click="refresh">刷新列表</el-button>
</div>
</div>
<el-table tooltipEffect="light" :data="smsTempList" style="width: 100%" v-loading="loading" @row-click="rowClick">
<el-table-column :show-overflow-tooltip="false" :width="60" align="center" prop="smsTemplateId">
<template slot-scope="scope">
<div class="sms-record_left label-hidden">
<el-radio v-model="selectedData" :label="scope.row" class="pr10"></el-radio>
</div>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="false" :width="200" :min-width="200" align="left" prop="title" label="模板名称"></el-table-column>
<el-table-column :show-overflow-tooltip="false" :width="200" :min-width="200" align="left" prop="content" label="模板类型">
<template slot-scope="scope">
<p class="gray">{{scope.row.type === 0 ?'普通短信' :(scope.row.type === 1?'营销短信':'验证码')}}</p>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="false" :min-width="200" align="left" prop="content" label="模板内容">
<template slot-scope="scope">
<div class="ellipsis-l3">{{scope.row.content}}</div>
</template>
</el-table-column>
</el-table>
<el-pagination v-show="smsTempList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
<span slot="footer" class="dialog-footer">
<el-button @click="close">关 闭</el-button>
<el-button type="primary" @click="addItem">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import {LoadTempList} from '@/service/api/messageApi.js';
export default {
name:'lib-sms',
props:{
show:{
type:Boolean,
default:false
}
},
data(){
return{
listParams:{
search:'',
currentPage:1,
pageSize:20
},
total:0,
smsTempList:[],
selectedData:{}
}
},
created(){
this.LoadTempList();
},
methods:{
handleSizeChange(val) {
this.listParams.pageSize = val;
this.LoadTempList();
},
handleCurrentChange(val) {
this.listParams.currentPage = val;
this.LoadTempList();
},
LoadTempList() {
this.loading = true;
LoadTempList(this.listParams).then(res => {
this.smsTempList = res.result.result || [];
this.total = res.result.totalCount;
})
this.loading = false;
},
rowClick(row) {
row.comName = 'item-sms';
this.selectedData = row;
},
addItem() {
if (!this.selectedData.comName) {
this.$tips({type:'warning',message:'未选择短信'});
return;
}
this.$emit('sendItem',this.selectedData);
},
close() {
this.$emit('update:show',false);
},
add() {
winodw.open('/marketing/#/message/temp/add');
},
refresh() {
this.listParams.currentPage = 1;
this.LoadTempList();
}
}
}
</script>
src/test/dmMarketing/components/lib-tel.vue 0 → 100644
<template>
<el-dialog title="编辑话务" :visible.sync="show" width="600px" :before-close="close">
<el-form ref="form" :model="form" label-width="100px" :rules="rules" v-loading="loading" >
<el-form-item label="话务任务标题" class="pb10 pt5">
<dm-input class="w400" v-model="form.title" placeholder="限制20个字符" :maxlength="20"></dm-input>
</el-form-item>
<el-form-item label="话务任务内容" class="pb10">
<dm-input class="w400" :rows="4" type="textarea" v-model="form.describe" placeholder="限制200个字符" :maxlength="200"></dm-input>
</el-form-item>
<el-form-item label="任务逾期判定">
<el-input-number controls-position="right" class="w400" v-model="form.lateDays"></el-input-number> 天之后
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="close">关 闭</el-button>
<el-button type="primary" @click="addItem">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import {getCardList} from '../api.js';
export default {
name:'lib-tel',
props:{
item:{
type:Object,
default(){
return {}
}
},
show:{
type:Boolean,
default:false
}
},
data(){
return{
form:{
title:'',
describe:'',
lateDays:'',
},
rules:{},
loading:false
}
},
methods:{
close() {
this.$emit('update:show',false);
},
addItem() {
this.form.comName = 'item-tel';
if (!this.form.title || !this.form.describe || !this.form.lateDays) {
this.$tips({type:'warning',message:'话务未填写完整'});
return;
}
this.$emit('sendItem',this.form);
},
}
}
</script>
src/test/dmMarketing/components/opt.vue 0 → 100644
<template>
<div class="inline-block dm-marketing__opt">
<span v-for="(v,i) in options" :key="i" class="dm-marketing__opt__item" @click="addItem(v)">
<img :src="v.img" alt="" srcset=""><span> {{v.name}}</span>
</span>
</div>
</template>
<script>
export default {
name:'opt',
props:{
options:{
type:Array,
default() {
return []
}
}
},
methods:{
addItem(item) {
this.$emit('addItem',item);
}
}
}
</script>
src/test/dmMarketing/utils.js 0 → 100644
/**
* 补零
* @param {String/Number} num
*/
export const fillZero = (num) => {
num = num * 1;
if (num < 10) {
return '0' + num;
} else {
return num;
}
}
/**
* @param {*时间} date
* @param {*转换的格式} type
*/
export const formateDateTimeByType = (date, type = 'yyyy-MM-dd-HH-mm-ss') => {
if (!date){return ''}
if (typeof date === 'number') {
date = new Date(date);
}
if (typeof date === 'string') {
return date
} else {
var year = type.indexOf('yyyy') >= 0 ? (fillZero(date.getFullYear())) : '';
var month = type.indexOf('MM') >= 0 ? ('-' + fillZero(date.getMonth() + 1)) : '';
var day = type.indexOf('dd') >= 0 ? ('-' + fillZero(date.getDate())+'') : '';
var hours = type.indexOf('HH') >= 0 ? (' ' + fillZero(date.getHours())) : '';
var min = type.indexOf('mm') >= 0 ? (':' + fillZero(date.getMinutes())) : '';
var sec = type.indexOf('ss') >= 0 ? (':' + fillZero(date.getSeconds())) : '';
// console.log(year+month+day+hours+min+sec);
return year + month + day + hours + min + sec;
}
}
/*
* 限制字数用, 一个汉字算一个字,两个英文/字母算一个字
*/
export const getByteVal = (val, max) =>{
var returnValue = '';
var byteValLen = 0;
for (var i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null)
byteValLen += 1;
else
byteValLen += 0.5;
if (byteValLen > max)
break;
returnValue += val[i];
}
return returnValue;
};
/*
* 一个汉字算一个字,一个英文字母或数字算半个字
*/
export const getZhLen = (val) => {
var len = 0;
for (var i = 0; i < val.length; i++) {
var a = val.charAt(i);
if (a.match(/[^\x00-\xff]/ig) != null) {
len += 1;
}
else {
len += 0.5;
}
}
return Math.ceil(len);
};
src/test/dmStore/api.js 0 → 100755
import axios from 'axios';
import qs from 'qs';
axios.defaults.timeout = 10000;
let base = "http://192.168.1.164:8282/gic/";
const timeout = 10000;
let token = ''//sessionStorage.getItem('user');
/*
*
* 统一 get 请求方法
* @url: 请求的 url
* @params: 请求带的参数
* @header: 带 token
*
*/
export const getRequest = (url, params) => {
return axios({
method: 'get',
url: `${base}${url}`,
data: {},
params: params,
headers: {'content-type': 'application/x-www-form-urlencoded'},// "token": token
});
}
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