|
|
@@ -0,0 +1,371 @@
|
|
|
+<template>
|
|
|
+ <div class="er-poster">
|
|
|
+ <Card>
|
|
|
+ <div class="er-url">
|
|
|
+ <div class="img-side">
|
|
|
+ <img :src="'data:image/jpg;base64,' + comData.qrLink" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="r-cont">
|
|
|
+ <p>超级订阅产品链接</p>
|
|
|
+ <div class="copy-ipt">
|
|
|
+ <input id="txts"v-model="copyIpt" readonly>
|
|
|
+ <Button slot="append" @click="copy">复制</Button>
|
|
|
+ </div>
|
|
|
+ <Button @click="codeDown">下载二维码</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ <Card style="margin-top: 20px">
|
|
|
+ <Tabs value="name1" :animated="false">
|
|
|
+ <TabPane label="海报" name="name1">
|
|
|
+ <div class="conts">
|
|
|
+ <div class="l-bg">
|
|
|
+ <div class="poster-tit">
|
|
|
+ <div class="t-bg">
|
|
|
+ <h3>海报背景</h3>
|
|
|
+ <div class="btns">
|
|
|
+ <Button size="small" icon="ios-arrow-back" @click="moved(1)" :disabled="lDis"></Button>
|
|
|
+ <Button size="small" icon="ios-arrow-forward" @click="moved(2)" :disabled="rDis" style="margin-left:10px"></Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="up-bg">
|
|
|
+ <div class="l-ben">
|
|
|
+ <Upload
|
|
|
+ action="/filemanage/upload"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :on-exceeded-size="handleExceeded"
|
|
|
+ :on-error="handleError"
|
|
|
+ :show-upload-list="false"
|
|
|
+ :accept="accepted"
|
|
|
+ :format="formated"
|
|
|
+ :on-format-error="formatError"
|
|
|
+ name="transferAccounts"
|
|
|
+ :data="uploadData"
|
|
|
+ :max-size="10240"
|
|
|
+ class="pay-load"
|
|
|
+ >
|
|
|
+ <div class="upload-ben">
|
|
|
+ <Icon type="md-add" size="24"/>
|
|
|
+ <p>本地上传</p>
|
|
|
+ <p style="margin-top:20px;color:#ccc">推荐尺寸</p>
|
|
|
+ <p style="color: #ccc">750*1250px</p>
|
|
|
+ </div>
|
|
|
+ </Upload>
|
|
|
+ </div>
|
|
|
+ <div class="s-div" v-show="String(imgsData)">
|
|
|
+ <ul id="slider">
|
|
|
+ <li v-for="(item, index) in imgsData" :key="index">
|
|
|
+ <img :src="item" @click="masked(index, item)">
|
|
|
+ <div class="masks" :class="{'actions':boolIndex == index}"><Icon type="md-checkmark-circle" /></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="r-bg">
|
|
|
+ <div class="bg-img" :style="{backgroundImage:'url(' + urls + ')'}">
|
|
|
+ <div class="img-code">
|
|
|
+ <img :src="'data:image/jpg;base64,' + comData.posterQrLink" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Button>保存并下载二维码海报</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </TabPane>
|
|
|
+ </Tabs>
|
|
|
+ </Card>
|
|
|
+ <!-- 下载二维码弹窗 -->
|
|
|
+ <Modal title="下载二维码" v-model="erShow" class-name="er-modal" :footer-hide="true" :mask-closable="false">
|
|
|
+ <Table border :columns="columns1" :data="logoSize">
|
|
|
+ <template slot-scope="row" slot="action">
|
|
|
+ <Button type="text" icon="ios-cloud-download-outline" @click="downed(row)"></Button>
|
|
|
+ </template>
|
|
|
+ </Table>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ copyIpt: '',
|
|
|
+ urls: '',
|
|
|
+ logoSize: [
|
|
|
+ {id: '1', size: '150*150', scene: '常规尺寸'},
|
|
|
+ {id: '2', size: '256*256', scene: '适合插入文档使用'},
|
|
|
+ {id: '3', size: '512*512', scene: '适合插入PPT使用'},
|
|
|
+ {id: '4', size: '1024*1024', scene: '适合印刷出版物使用'}
|
|
|
+ ],
|
|
|
+ lDis: false,
|
|
|
+ rDis: false,
|
|
|
+ boolIndex: 0,
|
|
|
+ accepted: '.jpg,.png,.jpeg',
|
|
|
+ formated: ['jpg','png','jpeg'],
|
|
|
+ uploadData: {
|
|
|
+ type: 'transferAccounts'
|
|
|
+ },
|
|
|
+ imgsData: [],
|
|
|
+ columns1: [
|
|
|
+ {
|
|
|
+ title: '尺寸',
|
|
|
+ key: 'size',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '使用场景',
|
|
|
+ key: 'scene',
|
|
|
+ width: '170',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '下载',
|
|
|
+ slot: 'action',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ comData: [],
|
|
|
+ speed: 0,
|
|
|
+ erShow: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.commodity()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ commodity() {
|
|
|
+ this.$request('/sales/partnerList/commodityDetails').data({
|
|
|
+ id: this.$route.query.id
|
|
|
+ }).success((res) => {
|
|
|
+ this.comData = res.data.data
|
|
|
+ this.copyIpt = res.data.data.link
|
|
|
+ this.imgsData = res.data.data.imgUrl.split(',')
|
|
|
+ this.urls = this.imgsData[0]
|
|
|
+ }).post()
|
|
|
+ },
|
|
|
+ masked(index, url) {
|
|
|
+ this.boolIndex = index
|
|
|
+ this.urls = url
|
|
|
+ },
|
|
|
+ handleSuccess(res, file) {// 文件上传成功
|
|
|
+ // this.$Notice.success({title: '上传成功'})
|
|
|
+ this.imgsData.unshift(file.response.url)
|
|
|
+ const arr = []
|
|
|
+ arr.push(file.response.url)
|
|
|
+ this.$request('/sales/partnerList/imgUpload').data({
|
|
|
+ id: this.$route.query.id,
|
|
|
+ imgUrl: String(arr)
|
|
|
+ }).success(() => {
|
|
|
+ this.commodity()
|
|
|
+ }).post()
|
|
|
+ },
|
|
|
+ handleError() {// 文件上传失败
|
|
|
+ this.$Notice.error({title: '上传失败'})
|
|
|
+ },
|
|
|
+ handleExceeded() {// 文件超出指定大小限制
|
|
|
+ this.$Notice.warning({title: '上传文件内存应小于10M'})
|
|
|
+ },
|
|
|
+ formatError() {// 文件格式验证失败
|
|
|
+ this.$Notice.warning({
|
|
|
+ title: '上传文件格式错误',
|
|
|
+ desc: '格式支持',
|
|
|
+ render: h => {
|
|
|
+ return h('span', [
|
|
|
+ '格式仅支持：',
|
|
|
+ h('p', this.accepted)
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ moved(num) {
|
|
|
+ const move = document.getElementById('slider')
|
|
|
+ if (num == 1) {
|
|
|
+ this.speed = this.speed - 110
|
|
|
+ move.style.left = this.speed + 'px'
|
|
|
+ if(-move.offsetLeft + 110 >= 330){
|
|
|
+ this.lDis = true
|
|
|
+ this.rDis = false
|
|
|
+ } else {
|
|
|
+ this.lDis = false
|
|
|
+ this.rDis = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.speed = this.speed + 110
|
|
|
+ if (move.offsetLeft >= 0) {
|
|
|
+ this.rDis = true
|
|
|
+ this.lDis = false
|
|
|
+ } else {
|
|
|
+ this.rDis = false
|
|
|
+ this.lDis = false
|
|
|
+ move.style.left = this.speed + 'px'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ copy () {
|
|
|
+ let text = document.getElementById('txts')
|
|
|
+ text.select()
|
|
|
+ document.execCommand('Copy')
|
|
|
+ this.$Message.success({content: '已复制'})
|
|
|
+ },
|
|
|
+ codeDown() {
|
|
|
+ this.erShow = true
|
|
|
+ },
|
|
|
+ downed(row) {
|
|
|
+ location.href = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.er-poster {
|
|
|
+ /deep/ .ivu-tabs {
|
|
|
+ .ivu-tabs-tab {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .er-url {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: inherit;
|
|
|
+ .img-side {
|
|
|
+ width: 162px;
|
|
|
+ height: 162px;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ img {
|
|
|
+ width: 160px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .r-cont {
|
|
|
+ margin-left: 20px;
|
|
|
+ padding-top: 10px;
|
|
|
+ .copy-ipt {
|
|
|
+ input {
|
|
|
+ width: 300px;
|
|
|
+ height: 32px;
|
|
|
+ border: none;
|
|
|
+ border: 1px solid #dcdee2;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding-left: 10px;
|
|
|
+ margin: 20px 10px 20px 0;
|
|
|
+ &:focus {
|
|
|
+ outline: none !important;
|
|
|
+ border-color: #dcdee2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .conts {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 35px;
|
|
|
+ }
|
|
|
+ .l-bg {
|
|
|
+ width: 630px;
|
|
|
+ .poster-tit {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .t-bg {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: initial;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .up-bg {
|
|
|
+ overflow: hidden;
|
|
|
+ .l-ben {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .upload-ben {
|
|
|
+ position: relative;
|
|
|
+ width: 100px;
|
|
|
+ height: 160px;
|
|
|
+ border: 1px solid #ededed;
|
|
|
+ background: #eee;
|
|
|
+ padding-top: 24px;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ .s-div {
|
|
|
+ overflow: hidden;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ width: 520px;
|
|
|
+ height: 160px;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ display: flex;
|
|
|
+ li {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 10px;
|
|
|
+ img {
|
|
|
+ width: 100px;
|
|
|
+ height: 160px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .masks {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(255,255,255,.3);
|
|
|
+ z-index: 2;
|
|
|
+ /deep/ .ivu-icon {
|
|
|
+ font-size: 24px;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ margin-left: -12px;
|
|
|
+ margin-top: -12px;
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .actions {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .r-bg {
|
|
|
+ width: 360px;
|
|
|
+ margin-left: 5%;
|
|
|
+ .bg-img {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 460px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ .img-code {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background: #fff;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 50px;
|
|
|
+ margin-left: -40px;
|
|
|
+ img {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ivu-btn {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xgwangman
