Skip to content

C
confucius
Commit a904ab00 authored by Mac's avatar Mac
Browse files
Options

新增欢迎语样式新增

parent b84a4296
Hide whitespace changes
Inline Side-by-side
Showing with 765 additions and 25 deletions
src/components/enterprise/applet-form.vue 0 → 100644
View file @ a904ab00
<style>
.editOrderDrawerTop {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
background-color: #f0f5fb;
padding: 5px 10px;
align-items: center;
}
.disableStatus {
opacity: 0.3 !important;
cursor: auto;
}
.imgstyle {
width: 100%;
height: 126px;
border-radius: 4px;
}
.avatar-uploader .el-upload {
border-radius: 6px;
cursor: pointer;
width: 100%;
height: 100%;
color: #8c939d;
position: relative;
overflow: hidden;
}
.addDutyMain {
display: inline-block;
width: 118px;
height: 118px;
font-size: 40px;
border: 1px dashed #d9d9d9;
line-height: 118px;
}
.up-box {
width: 90px;
height: 90px;
border: 1px dashed #ccc;
text-align: center;
line-height: 80px;
font-size: 50px;
cursor: pointer;
}
</style>
<template>
<div>
<q-dialog v-model="IsShow" persistent>
<q-card style="width: 800px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">小程序</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none">
<el-form ref="addMsg" :model="addMsg" label-width="120px">
<el-form-item label="添加方式：">
<q-radio v-model="addMsg.Addtype" val="1" label="新建" />
<q-radio v-model="addMsg.Addtype" val="2" label="导入" />
</el-form-item>
<div v-if="addMsg.Addtype ==1 ">
<el-form-item label="图片封面：" required>
<div class="up-box" @click="selectimg(2)">
<span v-if="addMsg.CoverImage==''">+</span>
<q-img v-else :src="addMsg.CoverImage" style="width: 100%;height: 100%;display: flex;">
</q-img>
</div>
</el-form-item>
<el-form-item label="添加标题：" required>
<q-input clearable standout="bg-primary text-white" v-model="addMsg.title" label="标题" style="width: 80%;" />
</el-form-item>
<el-form-item label="AppID：" required>
<q-input clearable standout="bg-primary text-white" v-model="addMsg.AppID" label="请填写小程序AppID,必须是关联到企业的小程序应用" style="width: 80%;" />
</el-form-item>
<el-form-item label="page路径：" required>
<q-input clearable standout="bg-primary text-white" v-model="addMsg.link" label="请填写小程序路径，例如：pages/index" style="width: 80%;" />
</el-form-item>
<el-form-item label="素材同步：">
<div class="q-gutter-sm" style="align-items: flex-start;display: flex;">
<q-radio v-model="addMsg.issynchro" val="2" label="不同步" />
<q-radio v-model="addMsg.issynchro" val="1" label="同步至【内容引擎】" />
<div v-if="addMsg.issynchro==1" style="width: 200px;">
<q-select filled stack-label option-value="ID" option-label="Name"
v-model="addMsg.classifyId" ref="ID" :options="classifyList" label="分类" :dense="false" emit-value map-options />
</div>
</div>
</el-form-item>
</div>
<div v-if="addMsg.Addtype ==2 ">
<el-form-item label="小程序：" required>
<q-btn color="accent" class="q-mr-md" label="选择小程序" @click="selectimg(4)" />
</el-form-item>
</div>
</el-form>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="closeEditOrder" />
<q-btn color="accent" class="q-mr-md" label="保存" @click="saveOrderInfo()" />
</q-card-actions>
</q-card>
</q-dialog>
<!-- 图片 -->
<selectMaterial v-if="isshowselectMaterial" :materialType="materialType" :saveobj='Selectobj'
@close="getclose()" @success='getsuccess'>
</selectMaterial>
</div>
</template>
<script>
import {
UploadSelfFile
} from "../../api/common/common"; //上传图片
import selectMaterial from "./selectMaterial"
export default {
props: {
saveobj: {
type: Object,
default: null,
},
},
components: {
selectMaterial,
},
data() {
return {
IsShow: true,
addMsg: {
Addtype: '1',//添加方式 1为新建
CoverImage: '',
title:'',
Content:'',
issynchro:'1',
classifyId:'',
AppID:'',
link:'',
},
materialType: 2,
Selectobj: {},
isshowselectMaterial: false,
classifyList:[
{Name:'活动',ID:1,},
{Name:'产品',ID:2,},
{Name:'校园',ID:3,},
],
}
},
created() {
if (JSON.stringify(this.saveobj) !== '{}') {
this.addMsg = JSON.parse(JSON.stringify(this.saveobj))
}
},
mounted() {
},
watch: {
},
methods: {
//关闭弹窗
closeEditOrder() {
this.$emit('close')
},
selectimg(type) {//素材选择 图片模式
this.materialType = type;
this.isshowselectMaterial = true;
},
getclose() {//素材关闭
this.isshowselectMaterial = false
},
getsuccess(data) {//选择数据回来
this.Selectobj = data
this.addMsg.CoverImage = data.img
this.isshowselectMaterial = false
},
saveOrderInfo(){
this.$emit('success',this.addMsg)
}
}
}
</script>
\ No newline at end of file
src/components/enterprise/imagetext-form.vue 0 → 100644
View file @ a904ab00
<style>
.editOrderDrawerTop {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
background-color: #f0f5fb;
padding: 5px 10px;
align-items: center;
}
.disableStatus {
opacity: 0.3 !important;
cursor: auto;
}
.imgstyle {
width: 100%;
height: 126px;
border-radius: 4px;
}
.avatar-uploader .el-upload {
border-radius: 6px;
cursor: pointer;
width: 100%;
height: 100%;
color: #8c939d;
position: relative;
overflow: hidden;
}
.addDutyMain {
display: inline-block;
width: 118px;
height: 118px;
font-size: 40px;
border: 1px dashed #d9d9d9;
line-height: 118px;
}
.up-box {
width: 90px;
height: 90px;
border: 1px dashed #ccc;
text-align: center;
line-height: 80px;
font-size: 50px;
cursor: pointer;
}
</style>
<template>
<div>
<q-dialog v-model="IsShow" persistent>
<q-card style="width: 800px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">图文</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none">
<el-form ref="addMsg" :model="addMsg" label-width="120px">
<el-form-item label="添加方式：">
<q-radio v-model="addMsg.Addtype" val="1" label="新建" />
<q-radio v-model="addMsg.Addtype" val="2" label="导入" />
</el-form-item>
<div v-if="addMsg.Addtype ==1 ">
<el-form-item label="图片封面：" required>
<div class="up-box" @click="selectimg(2)">
<span v-if="addMsg.CoverImage==''">+</span>
<q-img v-else :src="addMsg.CoverImage" style="width: 100%;height: 100%;display: flex;">
</q-img>
</div>
</el-form-item>
<el-form-item label="添加标题：" required>
<q-input clearable standout="bg-primary text-white" v-model="addMsg.title" label="标题" style="width: 80%;" />
</el-form-item>
<el-form-item label="添加描述：">
<q-input v-model="addMsg.Content" filled clearable type="textarea" label="文本内容" style="width: 80%;"/>
</el-form-item>
<el-form-item label="素材同步：">
<div class="q-gutter-sm" style="align-items: flex-start;display: flex;">
<q-radio v-model="addMsg.issynchro" val="2" label="不同步" />
<q-radio v-model="addMsg.issynchro" val="1" label="同步至【内容引擎】" />
<div v-if="addMsg.issynchro==1" style="width: 200px;">
<q-select filled stack-label option-value="ID" option-label="Name"
v-model="addMsg.classifyId" ref="ID" :options="classifyList" label="分类" :dense="false" emit-value map-options />
</div>
</div>
</el-form-item>
<el-form-item label="点击链接：" required>
<q-input clearable standout="bg-primary text-white" v-model="addMsg.link" label="请输入跳转链接，且必须以http://或https://开头" style="width: 80%;" />
</el-form-item>
</div>
<div v-if="addMsg.Addtype ==2 ">
<el-form-item label="图片：" required>
<q-btn color="accent" class="q-mr-md" label="选择图文" @click="selectimg(3)" />
</el-form-item>
</div>
</el-form>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="closeEditOrder" />
<q-btn color="accent" class="q-mr-md" label="保存" @click="saveOrderInfo()" />
</q-card-actions>
</q-card>
</q-dialog>
<!-- 图片 -->
<selectMaterial v-if="isshowselectMaterial" :materialType="materialType" :saveobj='Selectobj'
@close="getclose()" @success='getsuccess'>
</selectMaterial>
</div>
</template>
<script>
import {
UploadSelfFile
} from "../../api/common/common"; //上传图片
import selectMaterial from "./selectMaterial"
export default {
props: {
saveobj: {
type: Object,
default: null,
},
},
components: {
selectMaterial,
},
data() {
return {
IsShow: true,
addMsg: {
Addtype: '1',//添加方式 1为新建
CoverImage: '',
title:'',
Content:'',
issynchro:'1',
classifyId:'',
link:'',
},
materialType: 2,
Selectobj: {},
isshowselectMaterial: false,
classifyList:[
{Name:'活动',ID:1,},
{Name:'产品',ID:2,},
{Name:'校园',ID:3,},
],
}
},
created() {
if (JSON.stringify(this.saveobj) !== '{}') {
this.addMsg = JSON.parse(JSON.stringify(this.saveobj))
}
},
mounted() {
},
watch: {
},
methods: {
//关闭弹窗
closeEditOrder() {
this.$emit('close')
},
selectimg(type) {//素材选择 图片模式
this.materialType = type;
this.isshowselectMaterial = true;
},
getclose() {//素材关闭
this.isshowselectMaterial = false
},
getsuccess(data) {//选择数据回来
this.Selectobj = data
this.addMsg.CoverImage = data.img
this.isshowselectMaterial = false
},
saveOrderInfo(){
this.$emit('success',this.addMsg)
}
}
}
</script>
\ No newline at end of file
src/components/enterprise/selectMaterial.vue 0 → 100644
View file @ a904ab00
<style>
.editOrderDrawerTop {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
background-color: #f0f5fb;
padding: 5px 10px;
align-items: center;
}
.disableStatus{
opacity: 0.3 !important;
cursor: auto;
}
.imgstyle{
width:100%;height: 126px;border-radius: 4px;
}
.avatar-uploader .el-upload {
border-radius: 6px;
cursor: pointer;
width: 100%;
height: 100%;
color: #8c939d;
position: relative;
overflow: hidden;
}
.addDutyMain {
display: inline-block;
width: 118px;
height: 118px;
font-size: 40px;
border: 1px dashed #d9d9d9;
line-height: 118px;
}
</style>
<!--订单操作-->
<template>
<div>
<q-dialog v-model="IsShow" persistent>
<q-card style="width: 900px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">选择素材</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none">
<div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md" style="margin-top: 0;">
<div class="col-4">
<q-select filled stack-label @input="resetSearch" option-value="ID" option-label="Name"
v-model="msg.classifyId" ref="ID" :options="classifyList" label="分类" :dense="false" emit-value map-options />
</div>
<div class="col-4">
<q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.EmployeeName"
label="输入搜索内容" maxlength="20" />
</div>
<div class="col-4" v-if="materialType==2" >
<q-btn class="q-mr-md" icon="cloud_upload" label="本地上传" @click="localUpload" />
</div>
</div>
</div>
<div class="q-pa-md">
<div class="q-col-gutter-md row items-start">
<div class="col-2" v-for="(x,y) in data" @click="Selectobj = x">
<q-img
:src="x.img"
class="imgstyle"
:style="{border:x.Id == Selectobj.Id?'2px solid #91d5ff':'2px solid #FFF'}"
>
<div class="absolute-bottom text-subtitle1 text-center" style="padding: 0;">
{{x.name}}
</div>
</q-img>
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="closeEditOrder" />
<q-btn color="accent" class="q-mr-md" label="保存" @click="saveOrderInfo()" />
</q-card-actions>
</q-card>
</q-dialog>
<q-dialog v-model="Islocal" persistent>
<q-card style="width: 800px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">新建图片素材</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;height: 300px;">
<el-form ref="localMsg" :model="localMsg" label-width="120px">
<el-form-item label="上传图片：">
<el-upload class="avatar-uploader addDutyMain" action="" :before-upload="uploadFile"
:show-file-list="false">
<i class="el-icon-plus avatar-uploader-icon" v-if="localMsg.img==''"></i>
<q-img
v-else
:src="localMsg.img"
style="width: 100%;height: 100%;border-radius: 6px;display: flex;"
>
</q-img>
</el-upload>
<div>(图片大小不超过2M，支持JPG、JPEG及PNG格式)</div>
</el-form-item>
<el-form-item label="素材同步：">
<div class="q-gutter-sm" style="align-items: flex-start;display: flex;">
<q-radio v-model="localMsg.issynchro" val="2" label="不同步" />
<q-radio v-model="localMsg.issynchro" val="1" label="同步至【内容引擎】" />
<div v-if="localMsg.issynchro==1" style="width: 200px;">
<q-select filled stack-label option-value="ID" option-label="Name"
v-model="localMsg.classifyId" ref="ID" :options="classifyList" label="分类" :dense="false" emit-value map-options />
</div>
</div>
</el-form-item>
</el-form>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="Islocal = false" />
<q-btn color="accent" class="q-mr-md" label="上传" @click="savelocal()" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script>
import {
UploadSelfFile
} from "../../api/common/common"; //上传图片
export default {
props: {
saveobj: {
type: Object,
default: null,
},
materialType: {
type: Number,
default: 1
}
},
data() {
return {
IsShow: true,
Islocal:false,
saveStart:false,
msg:{
pageIndex: 1,
pageSize: 10,
classifyId:0,//分类id
Name:'',//文字搜索
},
classifyList:[
{Name:'全部',ID:0,},
{Name:'活动',ID:1,},
{Name:'产品',ID:2,},
{Name:'校园',ID:3,},
],
data:[
{name:'dj.png',img:'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107070330161360000000064.jpg',Id:1},
{name:'王者荣耀.png',img:'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107090216027320000000011.jpg',Id:2},
{name:'花火.png',img:'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107090331312620000000094.jpeg',Id:3},
{name:'你的名字.png',img:'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107090302364350000000080.jpg',Id:4},
],
Selectobj:null,
localMsg:{//本地上传对象
img:'',
issynchro:'1',//是否同步 1是
classifyID:0,//同步的时候的分类id
}
}
},
created(){
this.Selectobj = JSON.parse(JSON.stringify(this.saveobj))
this.getList()
},
mounted() {
},
watch: {
},
methods: {
//关闭弹窗
closeEditOrder() {
// this.IsShowEditOrder = false;
this.$emit('close')
},
getList(){//获取数据
console.log('获取数据')
},
resetSearch(){
this.msg.pageIndex = 1;
this.getList()
},
saveOrderInfo(){//保存返回数据
if(JSON.stringify(this.Selectobj) == "{}"){
this.$q.notify({
type: 'negative',
message: `还未选择`,
position: 'top'
})
return
}
this.$emit('success',this.Selectobj)
},
localUpload(){//图片模式的时候本地上传
this.Islocal = true
},
savelocal(){//本地上传操作
//这里做上传操作 刷新列表
},
uploadFile(files) {
UploadSelfFile("course", files, res => {
if (res.Code == 1) {
this.localMsg.img = res.FileUrl;
}
});
},
}
}
</script>
\ No newline at end of file
src/pages/enterprise/addWelcome.vue
View file @ a904ab00
......@@ -27,6 +27,19 @@
background: #fff;
padding: 20px;
}
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
border-top-color: #FFF;
}
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
border-top-color: #FFF;
}
.atooltip {
background: #FFF !important;
box-shadow: 0px 5px 25px 0px rgba(218, 220, 230, 0.85);
}
</style>
<template>
......@@ -39,30 +52,46 @@
<div class="box_r">
<el-form ref="addMsg" :model="addMsg" label-width="120px">
<el-form-item label="企业微信成员：">
<el-radio-group v-model="addMsg.membertype">
<el-radio :label="1">通用</el-radio>
<el-radio :label="2">指定企业成员</el-radio>
</el-radio-group>
<el-button size="small" style="margin-left: 20px;" v-if="addMsg.membertype==2" @click='getMember'>
选择成员</el-button>
<span v-if="addMsg.ryList.length>0" style="margin-left: 15px;">已选择{{addMsg.ryList.length}}名成员</span>
<span v-if="addMsg.ryList.length>0" style="cursor: pointer;color: #1890ff;margin-left: 15px;"
@click='addMsg.ryList =[],showMember=[]'>重置</span>
<div class="q-gutter-sm" style="align-items: center;display: flex;">
<q-radio v-model="addMsg.membertype" val="1" label="通用" />
<q-radio v-model="addMsg.membertype" val="2" label="指定企业成员" />
<q-btn color="accent" label="选择成员" size='sm' class="q-mr-md" style="margin-left: 20px;"
v-if="addMsg.membertype==2" @click='getMember' />
<div v-if="addMsg.ryList.length>0 && addMsg.membertype==2" style="margin-top: 8px;">
<span style="margin-left: 15px">已选择{{addMsg.ryList.length}}名成员</span>
<span style="cursor: pointer;color: #1890ff;margin-left: 15px;"
@click='addMsg.ryList =[],showMember=[]'>重置</span>
</div>
</div>
</el-form-item>
<el-form-item label="文本内容：">
<el-input type="textarea" placeholder="请输入内容" v-model="addMsg.Content" style="width: 60%;" :rows="4"></el-input>
<div>
<el-button size="small" @click='insert'>+插入客户名称</el-button>
<q-input v-model="addMsg.Content" filled clearable type="textarea" label="文本内容" style="width: 60%;"/>
<div style="margin-top: 10px;">
<q-btn color="accent" label="+插入客户名称" size='sm' class="q-mr-md" @click='insert' />
</div>
</el-form-item>
<el-form-item label="添加内容：">
<el-tooltip placement="top">
<div slot="content">
<div style="display: flex;align-items: center;"></div>
</div>
<el-button size="small" >+添加图片/图文/小程序</el-button>
</el-tooltip>
<q-btn color="white" text-color="black" label="+添加图片/图文/小程序" size='md' v-if="JSON.stringify(Selectobj) == '{}'">
<q-popup-proxy ref='popupproxy'>
<q-banner>
<q-btn-group push>
<q-btn label="图片" icon="images" @click="selectimg()"/>
<q-btn label="图文" icon="visibility" @click="selecttextimg()"/>
<q-btn label="小程序" icon="update" @click="selectxcx()"/>
</q-btn-group>
</q-banner>
</q-popup-proxy>
</q-btn>
<div class="row items-center" v-else>
<i class="el-icon-link"></i>
<span style="margin-left: 10px;cursor: pointer;" @click="selectimg">{{Selectobj.name}}</span>
<i style="margin-left: 10px;cursor: pointer" class="el-icon-close" @click="Selectobj={}"></i>
</div>
</el-form-item>
</el-form>
</div>
......@@ -91,11 +120,36 @@
<button class="normalBtn" type="primary" @click="getmember">确实</button>
</div>
</el-dialog>
<!-- 图片 -->
<selectMaterial v-if="isshowselectMaterial"
:materialType="materialType"
:saveobj = 'Selectobj'
@close ="getclose()"
@success='getsuccess'>
</selectMaterial>
<!-- 图文 -->
<imagetextform v-if="isshowimagetext"
:saveobj = 'Selectobj'
@close ="gettwclose()"
@success='gettwsuccess'
>
</imagetextform>
<!-- 小程序 -->
<appletform v-if="isshowapplet"
:saveobj = 'Selectobj'
@close ="getxcxclose()"
@success='getxcxsuccess'
>
</appletform>
</div>
</template>
<script>
selectMaterial
import selectMaterial from "../../components/enterprise/selectMaterial"
import imagetextform from "../../components/enterprise/imagetext-form"
import appletform from "../../components/enterprise/applet-form"
import {
queryEmployee
} from '../../api/users/user'
......@@ -103,6 +157,11 @@
meta: {
title: "欢迎语编辑"
},
components: {
selectMaterial,
imagetextform,//图文
appletform,//小程序
},
name: "welcomeList",
data() {
return {
......@@ -114,13 +173,17 @@
addMsg: {
membertype: 1,
ryList: [],
Content:"",
Content: "",
},
defaultProps: {
children: 'ChildList',
label: 'EmployeeName',
},
materialType:1,
isshowselectMaterial:false,
isshowimagetext:false,
isshowapplet:false,
Selectobj:{},//选中对象
}
},
created() {
......@@ -175,9 +238,55 @@
this.outerVisible = false;
this.addMsg.ryList = JSON.parse(JSON.stringify(this.showMember))
},
insert(){
this.addMsg.Content= this.addMsg.Content+'##客户名称##'
}
insert() {
this.addMsg.Content = this.addMsg.Content + '##客户名称##'
},
selectimg(){//素材选择 图片模式
this.materialType = 2;
this.isshowselectMaterial=true;
if(this.$refs.popupproxy){
this.$refs.popupproxy.hide()
}
},
getclose(){//素材关闭
this.isshowselectMaterial=false
},
getsuccess(data){//选择数据回来
this.Selectobj = data
this.isshowselectMaterial=false
},
selecttextimg(){//图文
this.isshowimagetext=true;
if(this.$refs.popupproxy){
this.$refs.popupproxy.hide()
}
},
gettwclose(){//图文
this.isshowimagetext=false;
},
gettwsuccess(data){//图文返回成功
this.Selectobj = data
this.isshowimagetext=false
},
selectxcx(){//图文
this.isshowapplet=true;
console.log(232323)
if(this.$refs.popupproxy){
this.$refs.popupproxy.hide()
}
},
getxcxclose(){//小程序 关闭
this.isshowapplet=false;
},
getxcxsuccess(){//小程序 关闭
this.Selectobj = data
this.isshowapplet=false
},
}
}
......
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