Skip to content

C
common-templete
Commit 31604c3b by 高淑倩
Options

modified:addstyle

parent c61f257f
Showing with 114 additions and 12 deletions
src/pages/addmarketing/components/StepInfo.vue
...@@ -10,14 +10,44 @@ ...@@ -10,14 +10,44 @@
<el-form-item label="选择推送素材" class="step-choose"> <el-form-item label="选择推送素材" class="step-choose">
<span class="gray"><span class="star-red">*</span> 推送素材需前往<a href="#">微信公众平台</a>-管理-素材管理维护。</span> <span class="gray"><span class="star-red">*</span> 推送素材需前往<a href="#">微信公众平台</a>-管理-素材管理维护。</span>
<div class="add-material" @click="centerDialogVisible = true"> <div class="add-material" @click="centerDialogVisible = true">
<div v-if="!currentImgUrl"> <div v-if="!chooseItem">
<el-button type="text" class="add-title"> <el-button type="text" class="add-title">
<p><i class="el-icon-plus add-plus"></i></p> <p><i class="el-icon-plus add-plus"></i></p>
添加微信素材 添加微信素材
</el-button> </el-button>
</div> </div>
<div v-else> <div v-else>
<img :src="currentImgUrl" alt=""> <span v-if="item.content.news_item.length===1" v-for="(art,index) in item.content.news_item" :key="index">
<div>
<p style="white-space:normal;
word-break:break-all;
word-wrap:break-word;padding:15px 0 0 15px;height:30px">{{art.title}}</p>
<img :src="art.thumb_url" style="width:240px;height:125px;margin:5px 10px;border:1px solid #ccc">
<p v-html="art.content" style="padding-left:10px;
font-size: 8px;
line-height: 1.3em;
color: #a49d96;
word-wrap: break-word;"></p>
<span style="padding-left:10px;">查看全文</span>
</div>
</span>
<span v-if="item.content.news_item.length===2" v-for="(art,index) in item.content.news_item" :key="index" class="two-item">
<div style="border-top:1px solid #eee;height:60px;">
<p style="width:185px;
white-space:normal;
word-break:break-all;
word-wrap:break-word;padding: 5px 0 0 5px;display:inline-block;">{{art.title}}</p>
<img style="width:40px;heigth:40px; margin-top: 8px;" :src="art.thumb_url">
</div>
</span>
<span v-if="item.content.news_item.length>2" v-for="(art,index) in item.content.news_item" :key="index" class="three-item">
<div class="dv clear">
<p>{{art.title}}</p>
<img :src="art.thumb_url">
</div>
</span>
<div class="box-mask"><span>替换素材</span></div>
</div> </div>
</div> </div>
<el-dialog title="微信消息素材" :visible.sync="centerDialogVisible" width="1000px" center class="add-subtitle title"> <el-dialog title="微信消息素材" :visible.sync="centerDialogVisible" width="1000px" center class="add-subtitle title">
...@@ -31,8 +61,36 @@ ...@@ -31,8 +61,36 @@
暂无素材 暂无素材
</el-col> </el-col>
<el-col v-else :span="8" v-for="(item,index) in materList" :key="index"> <el-col v-else :span="8" v-for="(item,index) in materList" :key="index">
<div class="add-content" v-for="(thumb,index) in item.content.news_item" :key="index" @click="handleImg(thumb.thumb_media_id,thumb.thumb_url)"> <div class="add-content" @click="handleChoose(item)">
<img :src="thumb.thumb_url" :alt="thumb.title"> <span v-if="item.content.news_item.length===1" v-for="(art,index) in item.content.news_item" :key="index">
<div>
<p style="white-space:normal;
word-break:break-all;
word-wrap:break-word;padding:15px 0 0 15px;height:30px">{{art.title}}</p>
<img :src="art.thumb_url" style="width:240px;height:125px;margin:5px 10px;border:1px solid #ccc">
<p v-html="art.content" style="padding-left:10px;
font-size: 8px;
line-height: 1.3em;
color: #a49d96;
word-wrap: break-word;"></p>
<span style="padding-left:10px;">查看全文</span>
</div>
</span>
<span v-if="item.content.news_item.length===2" v-for="(art,index) in item.content.news_item" :key="index" class="two-item">
<div style="border-top:1px solid #eee;height:60px;">
<p style="width:185px;
white-space:normal;
word-break:break-all;
word-wrap:break-word;padding: 5px 0 0 5px;display:inline-block;">{{art.title}}</p>
<img style="width:40px;heigth:40px; margin-top: 8px;" :src="art.thumb_url">
</div>
</span>
<span v-if="item.content.news_item.length>2" v-for="(art,index) in item.content.news_item" :key="index" class="three-item">
<div class="dv clear">
<p>{{art.title}}</p>
<img :src="art.thumb_url">
</div>
</span>
<div class="box-mask"><span>选择素材</span></div> <div class="box-mask"><span>选择素材</span></div>
</div> </div>
</el-col> </el-col>
...@@ -98,6 +156,7 @@ ...@@ -98,6 +156,7 @@
</template> </template>
<script> <script>
import api from '@/tool/api' import api from '@/tool/api'
import {mapMutations, mapState} from 'vuex';
export default { export default {
data() { data() {
...@@ -127,6 +186,7 @@ export default { ...@@ -127,6 +186,7 @@ export default {
tagList: [], tagList: [],
tagIdsList: [], tagIdsList: [],
chooseTag: [], chooseTag: [],
chooseItem: ''
} }
}, },
created() { created() {
...@@ -139,8 +199,19 @@ export default { ...@@ -139,8 +199,19 @@ export default {
isBtnCheckd() { isBtnCheckd() {
return this.checked ? 'opacity: 1' : 'opacity: .65' return this.checked ? 'opacity: 1' : 'opacity: .65'
}, },
...mapState(['global']),
item() {
return this.global.chooseItem
}
}, },
methods: { methods: {
...mapMutations(['CHOOSE_ITEM']),
handleChoose(item) {
this.chooseItem = item
this.currentImgId = item.media_id
this.CHOOSE_ITEM(item)
this.centerDialogVisible = false
},
getAll() { getAll() {
this.isCount = true this.isCount = true
this.getTagCountAll() this.getTagCountAll()
...@@ -210,11 +281,6 @@ export default { ...@@ -210,11 +281,6 @@ export default {
this.getTagCount() this.getTagCount()
this.getViewCount() this.getViewCount()
}, },
handleImg(id, url) {
this.currentImgUrl = url
this.currentImgId = id
this.centerDialogVisible = false
},
onSubmit() { onSubmit() {
if (this.currentTagCount < 1) { if (this.currentTagCount < 1) {
return this.$message({ return this.$message({
...@@ -297,7 +363,7 @@ export default { ...@@ -297,7 +363,7 @@ export default {
this.tagNum = tagNum this.tagNum = tagNum
this.followNum = followNum this.followNum = followNum
this.fourthNum = fourthNum this.fourthNum = fourthNum
this.successNum = this.followNum - this.fourthNum this.successNum = (this.followNum - this.fourthNum)-0
} }
} }
}) })
...@@ -306,18 +372,37 @@ export default { ...@@ -306,18 +372,37 @@ export default {
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.two-item:nth-child(1)
div
height 161px !important
margin-bottom 5px
p
width 254px !important
float left
position relative
top 123px
background-color rgba(0,0,0,0.2)
padding 0 5px !important
img
width 259px !important
height 161px !important
float left
margin-top -40px !important
.box-mask .box-mask
position absolute position absolute
width 100% width 100%
height 100% height 100%
background-color rgba(0, 0, 0, 0.4) background-color rgba(0, 0, 0, 0.4)
text-align center text-align center
display flex
font-size 16px font-size 16px
color #fff color #fff
top 0 top 0
left 0 left 0
pointer-event none pointer-event none
opacity 0 opacity 0
justify-content center
align-items center
.box-mask:hover .box-mask:hover
opacity 1 opacity 1
.active .active
...@@ -378,6 +463,17 @@ export default { ...@@ -378,6 +463,17 @@ export default {
cursor pointer cursor pointer
width 100% width 100%
height 100% height 100%
// .two-item:nth-child(1)
// div
// border 1px solid
// height 132px !important
// margin-bottom 5px
// p
// width 247px !important
// float left
// border 1px solid red
// img
// border 1px solid
.add-line .add-line
border-top 1px solid #e5e5e5 border-top 1px solid #e5e5e5
.form-tags .form-tags
......
src/store/global/index.js
...@@ -25,6 +25,8 @@ const MENU_HISTORY_JSON = 'MENU_HISTORY_JSON' ...@@ -25,6 +25,8 @@ const MENU_HISTORY_JSON = 'MENU_HISTORY_JSON'
const MEDIA_LIST = 'MEDIA_LIST' const MEDIA_LIST = 'MEDIA_LIST'
const CHOOSE_ITEM = 'CHOOSE_ITEM'
const state = { const state = {
menus: [], menus: [],
editMenus: false, editMenus: false,
...@@ -36,7 +38,8 @@ const state = { ...@@ -36,7 +38,8 @@ const state = {
name: '', name: '',
value: [] value: []
}, },
mediaList: '' mediaList: '',
chooseItem: ''
} }
const actions = { const actions = {
...@@ -90,11 +93,14 @@ const getters = { ...@@ -90,11 +93,14 @@ const getters = {
return state.currentMenus return state.currentMenus
}, },
getCurrentPath (state) { getCurrentPath (state) {
return state.currentPath return state.curredsntPath
} }
} }
const mutations = { const mutations = {
[CHOOSE_ITEM](state, chooseItem) {
state.chooseItem = chooseItem
},
[MEDIA_LIST](state, mediaList) { [MEDIA_LIST](state, mediaList) {
state.mediaList = mediaList state.mediaList = mediaList
}, },
......
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