Skip to content

H
haoban-3
Commit 84143117 by crushh
Options

update: 预览抽出

parent ca67a4b4
Showing with 230 additions and 46 deletions
src/components/salutatory.vue 0 → 100644
<template>
<div class="iphone">
<div class="infoList">
<div class="infoListBox">
<div class="infoAvatar">
<img src="@/assets/head_default.jpg" />
</div>
<div class="textInfo">
<div class="content" v-html="welcomeContent"></div>
</div>
</div>
<div class="infoListBox" v-for="(item, index) in mediaList" :key="index">
<div>
<div class="infoAvatar">
<img src="@/assets/head_default.jpg" />
</div>
<div v-if="item.mediaType == 1 || item.mediaType == 7" class="imgInfo">
<img :src="item.mediaUrl" />
</div>
<div v-if="item.mediaType == 2" class="videoInfo" @click="blank(item.mediaUrl)">
<video :src="item.mediaUrl" />
</div>
<div v-if="item.mediaType == 3" class="docInfo">
<div class="docTitle">
<b>{{ item.mediaTitle }}</b>
<p>{{ item.mediaSize }} KB</p>
</div>
<svg-icon iconname="iconwenjianleixing-wenjian" size="40"> </svg-icon>
</div>
<div v-if="item.mediaType == 4" class="urlInfo">
<div class="urlTitle">{{ item.mediaTitle }}</div>
<div class="urlContent">
<b>{{ item.mediaTitle }}</b>
<svg-icon iconname="iconwenjianleixing-lianjie" size="40"> </svg-icon>
</div>
</div>
<div v-if="item.mediaType == 5 || item.mediaType == 6" class="appletsInfo">
<div class="appletsTitle">{{ item.miniProgramName }}</div>
<div class="appletsTitle" style="font-size:12px">{{ item.mediaTitle }}</div>
<img :src="item.mediaUrl" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
props: {
welcomeContent: {
type: String,
default: ''
},
mediaList: {
type: Array,
default: () => []
}
},
watch: {
mediaList(val) {
console.log(val);
}
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.iphone {
border-radius: 4px;
position: relative;
margin-left: 117px;
display: inline-block;
font-size: 0;
line-height: 0;
background-image: url('../assets/iphone2.png');
background-repeat: no-repeat;
width: 240px;
min-height: 495px;
background-size: 240px auto;
color: #303133;
.infoList {
padding: 0 10px;
margin-top: 80px;
border-radius: 6px;
max-height: 360px;
overflow: auto;
.infoListBox {
.infoAvatar {
display: inline-block;
vertical-align: top;
margin-right: 10px;
img {
vertical-align: top;
width: 26px;
height: 26px;
}
}
.imgInfo,
.videoInfo {
display: inline-block;
overflow: hidden;
border-radius: 4px;
position: relative;
cursor: default;
img {
min-height: 27px;
max-width: 140px;
}
}
.videoInfo {
video {
min-height: 27px;
max-width: 140px;
max-height: 250px;
cursor: pointer;
}
}
.textInfo,
.docInfo,
.urlInfo,
.appletsInfo {
min-height: 28px;
background-color: #fff;
border: 1px solid #e4e6e9;
max-width: 166px;
display: inline-block;
text-align: left;
padding: 5px 6px;
border-radius: 4px;
min-width: 24px;
box-sizing: border-box;
position: relative;
&::before {
top: 10px;
display: block;
content: ' ';
width: 0;
line-height: 0;
font-size: 0;
border-style: solid;
border-color: transparent;
position: absolute;
left: -6px;
border-width: 4px 6px;
border-left: 0;
border-right-color: #fff;
}
.content {
font-size: 12px;
word-break: break-all;
letter-spacing: 0;
line-height: 18px;
height: auto;
}
}
.docInfo {
display: inline-flex;
align-items: center;
}
.docTitle {
padding-right: 10px;
max-width: 100px;
float: left;
overflow-wrap: break-word;
b {
font-size: 12px;
text-align: left;
line-height: 16px;
}
p {
margin-top: 5px;
font-size: 12px;
color: #787878;
text-align: left;
line-height: 14px;
}
}
.urlTitle,
.appletsTitle {
font-size: 14px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3px;
}
.urlInfo {
.urlContent {
overflow-wrap: break-word;
b {
color: #606266;
padding-right: 10px;
font-size: 12px;
text-align: left;
line-height: 17px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 100px;
float: left;
}
}
}
.appletsInfo {
.appletsTitle {
color: #606266;
}
img {
width: 144px;
height: 144px;
}
}
}
.infoListBox + .infoListBox {
margin-top: 15px;
}
}
}
</style>
src/views/enterprise/salutatorySet.vue
......@@ -77,50 +77,7 @@
<el-button type="primary" style="margin-left:117px;margin-bottom:20px" :loading="submitbtnLoading" @click="submit">保存</el-button>
<el-button style="margin-bottom:20px" @click="$router.go(-1)">返回</el-button>
</el-form>
<div class="iphone">
<div class="infoList">
<div class="infoListBox" v-if="form.welcomeContent || form.title">
<div class="infoAvatar">
<img src="@/assets/head_default.jpg" />
</div>
<div class="textInfo">
<div class="content" v-html="form.welcomeContent"></div>
</div>
</div>
<div class="infoListBox" v-for="(item, index) in form.welcomeMediaList" :key="index">
<div>
<div class="infoAvatar">
<img src="@/assets/head_default.jpg" />
</div>
<div v-if="item.mediaType == 1 || item.mediaType == 7" class="imgInfo">
<img :src="item.mediaUrl" />
</div>
<div v-if="item.mediaType == 2" class="videoInfo" @click="blank(item.mediaUrl)">
<video :src="item.mediaUrl" />
</div>
<div v-if="item.mediaType == 3" class="docInfo">
<div class="docTitle">
<b>{{ item.mediaTitle }}</b>
<p>{{ item.mediaSize }} KB</p>
</div>
<svg-icon iconname="iconwenjianleixing-wenjian" size="40"> </svg-icon>
</div>
<div v-if="item.mediaType == 4" class="urlInfo">
<div class="urlTitle">{{ item.mediaTitle }}</div>
<div class="urlContent">
<b>{{ item.mediaTitle }}</b>
<svg-icon iconname="iconwenjianleixing-lianjie" size="40"> </svg-icon>
</div>
</div>
<div v-if="item.mediaType == 5 || item.mediaType == 6" class="appletsInfo">
<div class="appletsTitle">{{ item.miniProgramName }}</div>
<div class="appletsTitle" style="font-size:12px">{{ item.mediaTitle }}</div>
<img :src="item.mediaUrl" />
</div>
</div>
</div>
</div>
</div>
<preview :welcomeContent="form.welcomeContent" :mediaList="form.welcomeMediaList" />
</div>
<el-dialog title="添加公众号" width="585px" class="replay-link-dialog" :visible.sync="addReplayDialog" @closed="onClosed">
<el-form label-position="right" ref="form" :model="{}" label-width="100px" @submit.native.prevent>
......@@ -216,6 +173,8 @@ import limitTextarea from '@/components/limit-textarea.vue';
import { emojiArr } from '@/utils/emoji';
import multUpload from '@/components/mult-upload-img.vue';
import singleUpload from '@/components/single-upload.vue';
import iphone2 from '@/assets/iphone2.png';
import preview from '@/components/salutatory.vue';
export default {
props: {},
data() {
......@@ -298,7 +257,8 @@ export default {
appletDialogVisible: false,
defaultWelcomeFlag: false,
isNew: true,
echoDefaultWelcomeFlag: 0
echoDefaultWelcomeFlag: 0,
iphone2
};
},
watch: {
......@@ -332,7 +292,8 @@ export default {
components: {
limitTextarea,
singleUpload,
multUpload
multUpload,
preview
},
methods: {
getExistDefaultWelcome(isNew) {
......
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