|
@@ -0,0 +1,1126 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="page">
|
|
|
|
+ <view class="poster" v-if="!show_poster">
|
|
|
|
+ <view class="canvas-content" style="text-align:center;position:relative;" :style='{background:(posterObj1.backgroundType=="rgb"? posterObj1.background:"url("+posterObj1.background+") no-repeat;background-size:100% 100%;"),borderRadius:posterObj1.borderRadius,padding:(check_idx==2?"80rpx 68rpx":"40rpx 36rpx 80rpx")}'>
|
|
|
|
+ <image v-if='check_idx==1' style='position:absolute;width:103rpx;height:103rpx;bottom: 0;left: 0;' src="https://s.yun-live.com/images/20210201/d88d56843d43b917e2a28550b2a62723.png"></image>
|
|
|
|
+ <image v-if='check_idx==1' style='position:absolute;width:56.4rpx;height:56.4rpx;right:0rpx;top:50%;' src="https://s.yun-live.com/images/20210201/247736ffd279276b891ec14db8ed0fd0.png"></image>
|
|
|
|
+ <image :style='{width:posterObj1.width,height:posterObj1.height,borderRadius:posterObj1.imageBorderRadius}' :src="posterObj1.image"></image>
|
|
|
|
+ <view :style='{fontSize:posterObj1.titleCssFontSize,fontWeight:posterObj1.titleCssFontWeight,color:posterObj1.titleCssColor,lineWeight:posterObj1.titleCssLineHeight
|
|
|
|
+ }' class="title">{{posterObj1.title}}</view>
|
|
|
|
+ <view class='flex justify-space-between' style='align-items: flex-start;margin-top:18rpx;'>
|
|
|
|
+ <view style='text-align:left;margin-top:30rpx;'>
|
|
|
|
+ <view :style='{fontSize:posterObj1.title1CssFontSize,fontWeight:posterObj1.title1CssFontWeight,color:posterObj1.title1CssColor,lineWeight:posterObj1.title1CssLineHeight
|
|
|
|
+ }' class="title1">{{posterObj1.title1}}</view>
|
|
|
|
+ <view :style='{fontSize:posterObj1.title2CssFontSize,color:posterObj1.title2CssColor,lineWeight:posterObj1.title2CssLineHeight
|
|
|
|
+ }' class="title2">{{posterObj1.title2}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view>
|
|
|
|
+ <image :style='{width:posterObj1.qrcodeWidth,height:posterObj1.qrcodeHeight,}' :src="posterObj1.qrcode"></image>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="footer-btn">
|
|
|
|
+ <view class="">
|
|
|
|
+ 返回
|
|
|
|
+ </view>
|
|
|
|
+ <view class="save" @click="toSave">
|
|
|
|
+ 保存
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="poster-btn">
|
|
|
|
+ <view class='diy_image'>
|
|
|
|
+ 上传图片
|
|
|
|
+ <view>
|
|
|
|
+ <u-radio-group @change='imagechange($event)' v-model="imageValue">
|
|
|
|
+ <u-radio shape="square" name='自定义图片' label="自定义图片"></u-radio>
|
|
|
|
+ <u-radio shape="square" name='选择名片' label="选择名片"></u-radio>
|
|
|
|
+ </u-radio-group>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view style='color:red;font-size:24rpx;padding: 20rpx 20rpx 0;'>注:如勾选“选择名片”,其他用户扫描海报二维码后会自动与您交换名片。</view>
|
|
|
|
+ <view class='diy_title'>
|
|
|
|
+ 编辑内容
|
|
|
|
+ <view>
|
|
|
|
+ <u--input v-model="value" @focus='titleclick' placeholder="请输入内容" border="bottom" clearable></u--input></view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class='check_bg'>
|
|
|
|
+ <view style='font-size:28rpx'>定义背景</view>
|
|
|
|
+ <view :class="{'is-check':check_idx==index}" v-for="(item,index) in footer_arr" :key="index" @click="toChoose(index)">
|
|
|
|
+ <image :src="item" mode=""></image>
|
|
|
|
+ <view v-if="check_idx==index"></view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 生成的图片 -->
|
|
|
|
+ <uni-popup type="center" ref="posterImg" :maskClick="false">
|
|
|
|
+ <view class="poster-img">
|
|
|
|
+ <text @click="closePopup"></text>
|
|
|
|
+ <view style='overflow: scroll;width: 670rpx;height: 928rpx;'>
|
|
|
|
+ <image :src="path" mode="widthFix" @click="previewImg"></image>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- #ifdef H5 -->
|
|
|
|
+ <view class="">
|
|
|
|
+ 长按图片保存到手机
|
|
|
|
+ </view>
|
|
|
|
+ <!-- #endif -->
|
|
|
|
+ <!-- #ifndef H5 -->
|
|
|
|
+ <view class="">
|
|
|
|
+ 点击图片保存到手机
|
|
|
|
+ </view>
|
|
|
|
+ <!-- #endif -->
|
|
|
|
+ </view>
|
|
|
|
+ </uni-popup>
|
|
|
|
+ <u-popup :show="titleStatus" :round="10" mode="center" @close="close" @open="open">
|
|
|
|
+ <view style='width:600rpx;padding:20rpx;'>
|
|
|
|
+ <u--textarea v-model="value" maxlength='300' count placeholder="请输入内容" ></u--textarea>
|
|
|
|
+ <view style='margin:20rpx 0rpx 0;'>
|
|
|
|
+ <u-button @click='confirm' type="success" text="确定"></u-button>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </u-popup>
|
|
|
|
+ <u-picker :immediateChange="true" keyName="cardBusiness" confirmText='确定' title="选择名片" @cancel="show1=false"
|
|
|
|
+ closeOnClickOverlay @confirm="cardConfirm" :show="show1" :columns="cardList"></u-picker>
|
|
|
|
+ <poster :data="canvasData" background-color="#FFF" :width='948' :height='534' @on-success="posterSuccess"
|
|
|
|
+ ref="poster" @on-error="posterError"></poster>
|
|
|
|
+ <lPainter :board="posterObj" ref="painter"></lPainter>
|
|
|
|
+ <canvas id="canvasId"
|
|
|
|
+ :type="type"
|
|
|
|
+ style="width:0;height:0;"></canvas>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ var that;
|
|
|
|
+ import uploadImage from '@/components/ossutil/uploadFile.js';
|
|
|
|
+ import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
|
|
|
|
+ import lPainter from '@/components/lime-painter/index.vue';
|
|
|
|
+ import { Layout } from '@/components/lime-painter/layout';
|
|
|
|
+ import Poster from '../../components/zhangyuhao-poster/Poster.vue';
|
|
|
|
+ import { toPx, isNumber, getImageInfo, base64ToPath, compareVersion } from '@/components/lime-painter/utils'
|
|
|
|
+ import { adaptor, expand } from '@/components/lime-painter/canvas';
|
|
|
|
+ export default {
|
|
|
|
+ components: {
|
|
|
|
+ lPainter,
|
|
|
|
+ uniPopup,
|
|
|
|
+ Poster,
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ imageValue:'',
|
|
|
|
+ canvasData:{},
|
|
|
|
+ value:'云现场 | 2020年 麓客城市 WO-LUNTEER创想礼·麓客共创之夜',
|
|
|
|
+ show_poster:false,//显示海报
|
|
|
|
+ path: '', //生成的图片地址
|
|
|
|
+ image:'',
|
|
|
|
+ show1:false,
|
|
|
|
+ cardList: [],
|
|
|
|
+ list:[],
|
|
|
|
+ theight:0,
|
|
|
|
+ poster:'',
|
|
|
|
+ type:'2d',
|
|
|
|
+ height:0,
|
|
|
|
+ use2dCanvas:false,
|
|
|
|
+ layout1: new Layout(),
|
|
|
|
+ titleStatus:false,
|
|
|
|
+ posterObj1:{
|
|
|
|
+ background:'#fff',
|
|
|
|
+ backgroundType:'rgb',
|
|
|
|
+ borderRadius: '16rpx',
|
|
|
|
+ image:'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
|
|
|
|
+ width: '606rpx',
|
|
|
|
+ height: '341rpx',
|
|
|
|
+ imageBorderRadius:'16rpx',
|
|
|
|
+ title:'云现场 | 2020年 麓客城市 WO-LUNTEER创想礼·麓客共创之夜',
|
|
|
|
+ titleCssFontSize: '32rpx',
|
|
|
|
+ titleCssColor: '#1A2033',
|
|
|
|
+ titleCssFontWeight: 'bold',
|
|
|
|
+ titleCssLineHeight: '45rpx',
|
|
|
|
+ title1:'厦门吴彦祖',
|
|
|
|
+ title1CssFontSize: '28rpx',
|
|
|
|
+ title1CssColor: '#1A2033',
|
|
|
|
+ title1CssFontWeight: 'bold',
|
|
|
|
+ title1CssLineHeight: '28rpx',
|
|
|
|
+ title2:'扫描识别二维码',
|
|
|
|
+ title2CssFontSize: '24rpx',
|
|
|
|
+ title2CssColor: '#4070FF',
|
|
|
|
+ title2CssLineHeight: '24rpx',
|
|
|
|
+ qrcode:'../../static/imgs/qrcode.jpg',
|
|
|
|
+ qrcodeWidth: '240rpx',
|
|
|
|
+ qrcodeHeight: '240rpx',
|
|
|
|
+ },
|
|
|
|
+ posterObj: {
|
|
|
|
+ width: '670rpx',
|
|
|
|
+ height: '890rpx',
|
|
|
|
+ background: '#fff',
|
|
|
|
+ borderRadius: '16rpx',
|
|
|
|
+ views: [
|
|
|
|
+ // {
|
|
|
|
+ // type: 'image',
|
|
|
|
+ // src: 'https://s.yun-live.com/images/20210201/9a4e7df322dc5c9f30ea9b126d3269a6.png',
|
|
|
|
+ // css: {
|
|
|
|
+ // width: '128rpx',
|
|
|
|
+ // height: '50rpx',
|
|
|
|
+ // left: '542rpx',
|
|
|
|
+ // top: '0rpx',
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // {
|
|
|
|
+ // type: 'image',
|
|
|
|
+ // src: 'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
|
|
|
|
+ // css: {
|
|
|
|
+ // left: '32rpx',
|
|
|
|
+ // top: '480rpx',
|
|
|
|
+ // borderRadius: '50%',
|
|
|
|
+ // width: '80rpx',
|
|
|
|
+ // height: '80rpx'
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ {
|
|
|
|
+ type: 'text',
|
|
|
|
+ text: '云现场 | 2020年 麓客城市 WO-LUNTEER创想礼·麓客共创之夜',
|
|
|
|
+ use:'title',
|
|
|
|
+ css: {
|
|
|
|
+ fontSize: '32rpx',
|
|
|
|
+ color: '#1A2033',
|
|
|
|
+ fontWeight: 'bold',
|
|
|
|
+ lineHeight: '45rpx',
|
|
|
|
+ left: '32rpx',
|
|
|
|
+ top: '400rpx',
|
|
|
|
+ width: '606rpx'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'text',
|
|
|
|
+ text: '厦门吴彦祖',
|
|
|
|
+ use:'title1',
|
|
|
|
+ css: {
|
|
|
|
+ fontSize: '28rpx',
|
|
|
|
+ fontWeight: 'bold',
|
|
|
|
+ color: '#1A2033',
|
|
|
|
+ lineHeight: '28rpx',
|
|
|
|
+ left: '32rpx',
|
|
|
|
+ top: '515rpx'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'text',
|
|
|
|
+ text: '扫描识别二维码',
|
|
|
|
+ use:'title2',
|
|
|
|
+ css: {
|
|
|
|
+ fontSize: '24rpx',
|
|
|
|
+ color: '#4070FF',
|
|
|
|
+ lineHeight: '24rpx',
|
|
|
|
+ left: '32rpx',
|
|
|
|
+ top: '559rpx'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'image',
|
|
|
|
+ src: 'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
|
|
|
|
+ use:'dt',
|
|
|
|
+ css: {
|
|
|
|
+ left: '32rpx',
|
|
|
|
+ top: '34rpx',
|
|
|
|
+ width: '606rpx',
|
|
|
|
+ height: '341rpx',
|
|
|
|
+ borderRadius: '16rpx'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ type: 'qrcode',
|
|
|
|
+ text: 'https://www.yun-live.com/',
|
|
|
|
+ css: {
|
|
|
|
+ left: '445rpx',
|
|
|
|
+ top: '500rpx',
|
|
|
|
+ width: '200rpx',
|
|
|
|
+ height: '200rpx',
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // {
|
|
|
|
+ // type: 'text',
|
|
|
|
+ // text: '———— 由云现场提供技术支持 ————',
|
|
|
|
+ // css: {
|
|
|
|
+ // left: '0',
|
|
|
|
+ // top: '863rpx',
|
|
|
|
+ // width: '100%',
|
|
|
|
+ // textAlign: 'center',
|
|
|
|
+ // fontSize: '24rpx',
|
|
|
|
+ // color: '#989FB3',
|
|
|
|
+ // lineHeight: '33rpx'
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ ]
|
|
|
|
+ }, //画板数据
|
|
|
|
+ footer_arr: [
|
|
|
|
+ 'https://s.yun-live.com/images/20210201/d502979c734077930cee837739ee9285.png',
|
|
|
|
+ 'https://s.yun-live.com/images/20210201/0289000561415e1f9f6e542a3553906d.png',
|
|
|
|
+ 'https://s.yun-live.com/images/20210201/5d2e237728e1dd8727835ca95084721e.png',
|
|
|
|
+ 'https://s.yun-live.com/images/20210201/15075d31c26cc446333d569b0d2346e8.png',
|
|
|
|
+ 'https://s.yun-live.com/images/20210201/6e716c556d1a80e90ecb0260e0990add.png'
|
|
|
|
+ ], //底部选项
|
|
|
|
+ check_idx: 0, //底部选中的下标
|
|
|
|
+ dtindex:0,
|
|
|
|
+ titleindex:0,
|
|
|
|
+ title1index:0,
|
|
|
|
+ title2index:0,
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onLoad() {
|
|
|
|
+ that = this
|
|
|
|
+ },
|
|
|
|
+ onShow(){
|
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
|
+ const {SDKVersion, version, platform} = uni.getSystemInfoSync()
|
|
|
|
+ // ios wx7.0.20 createImage bug
|
|
|
|
+ this.use2dCanvas = (this.type === '2d' && compareVersion(SDKVersion, '2.9.2') >= 0) && !(/ios/.test(platform) && /7.0.20/.test(version));
|
|
|
|
+ // #endif
|
|
|
|
+ this.posterObj1.title1=uni.getStorageSync("userInfo").nickname+'推荐给你'
|
|
|
|
+ this.$request.baseRequest('admin.unimall.cardManagementInfo', 'list', {
|
|
|
|
+ commonId: uni.getStorageSync("userInfo").id
|
|
|
|
+ }, failres => {
|
|
|
|
+ uni.hideLoading()
|
|
|
|
+ uni.showToast({
|
|
|
|
+ icon: "none",
|
|
|
|
+ title: failres.errmsg,
|
|
|
|
+ duration: 3000
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ }).then(res => {
|
|
|
|
+ this.list = res.data.items
|
|
|
|
+ this.cardList = [res.data.items]
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ // check_idx(newVal,oldVal){
|
|
|
|
+ // console.log(111,newVal);
|
|
|
|
+ // console.log(222,oldVal);
|
|
|
|
+ // }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ confirm(e){
|
|
|
|
+ this.titleStatus=false
|
|
|
|
+ this.posterObj1.title=this.value
|
|
|
|
+ },
|
|
|
|
+ titleclick(){
|
|
|
|
+ this.titleStatus=true
|
|
|
|
+ },
|
|
|
|
+ posterError(err) {
|
|
|
|
+ console.log(err)
|
|
|
|
+ uni.hideLoading()
|
|
|
|
+ },
|
|
|
|
+ posterSuccess(url) {
|
|
|
|
+ console.log("hahahah", url)
|
|
|
|
+ // 生成成功,会把临时路径在这里返回
|
|
|
|
+ this.poster = url;
|
|
|
|
+ this.posterObj1.image = url
|
|
|
|
+ this.posterObj1.qrcode=this.currectData.qrCodeMyself
|
|
|
|
+ console.log(url)
|
|
|
|
+ this.show1 = false
|
|
|
|
+ // this.show=false
|
|
|
|
+ uni.hideLoading()
|
|
|
|
+ },
|
|
|
|
+ cardConfirm(e) {
|
|
|
|
+ console.log(e)
|
|
|
|
+ this.currectData = e.value[0]
|
|
|
|
+ uni.showLoading({
|
|
|
|
+ title: '加载中',
|
|
|
|
+ mask: true
|
|
|
|
+ })
|
|
|
|
+ var data = [{
|
|
|
|
+ type: 'image',
|
|
|
|
+ path: this.currectData.currentBackground,
|
|
|
|
+ use: 'bg',
|
|
|
|
+ x: -24,
|
|
|
|
+ y: -27,
|
|
|
|
+ width: 1000,
|
|
|
|
+ height: 600
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'image',
|
|
|
|
+ path: this.currectData.headSculpture ? this.currectData.headSculpture :
|
|
|
|
+ '../../static/imgs/card/defaulthead.png',
|
|
|
|
+ shape: 'circle',
|
|
|
|
+ use: 'head',
|
|
|
|
+ imageType: this.currectData.headSculpture ? 'wl' : 'bd',
|
|
|
|
+ x: 60,
|
|
|
|
+ y: 60,
|
|
|
|
+ width: 150,
|
|
|
|
+ height: 150
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'text',
|
|
|
|
+ text: this.currectData.name,
|
|
|
|
+ use: 'name',
|
|
|
|
+ x: 300,
|
|
|
|
+ y: 80,
|
|
|
|
+ size: 40,
|
|
|
|
+ color: '#000'
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'text',
|
|
|
|
+ text: this.currectData.post,
|
|
|
|
+ use: 'post',
|
|
|
|
+ x: 440,
|
|
|
|
+ y: 85,
|
|
|
|
+ size: 32,
|
|
|
|
+ color: '#666666'
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'text',
|
|
|
|
+ text: this.currectData.companyName,
|
|
|
|
+ use: 'companyName',
|
|
|
|
+ x: 300,
|
|
|
|
+ y: 155,
|
|
|
|
+ size: 32,
|
|
|
|
+ color: '#000'
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'image',
|
|
|
|
+ path: '../../static/imgs/card/address1.png',
|
|
|
|
+ use: 'address-icon',
|
|
|
|
+ x: 300,
|
|
|
|
+ y: 220,
|
|
|
|
+ width: 30,
|
|
|
|
+ height: 40
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'textarea',
|
|
|
|
+ text: this.currectData.province + this.currectData.city + this.currectData.area + this
|
|
|
|
+ .currectData.detailedAddress,
|
|
|
|
+ lineSpace: 1,
|
|
|
|
+ width: 640,
|
|
|
|
+ use: 'address',
|
|
|
|
+ x: 345,
|
|
|
|
+ y: 228,
|
|
|
|
+ size: 28,
|
|
|
|
+ color: '#000'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'image',
|
|
|
|
+ path: '../../static/imgs/card/phone1.png',
|
|
|
|
+ use: 'phone-icon',
|
|
|
|
+ x: 300,
|
|
|
|
+ y: 280,
|
|
|
|
+ width: 32,
|
|
|
|
+ height: 32
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'text',
|
|
|
|
+ text: this.currectData.phone,
|
|
|
|
+ use: 'phone',
|
|
|
|
+ x: 345,
|
|
|
|
+ y: 284,
|
|
|
|
+ size: 28,
|
|
|
|
+ color: '#000'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'image',
|
|
|
|
+ path: '../../static/imgs/card/remark1.png',
|
|
|
|
+ use: 'remark-icon',
|
|
|
|
+ x: 300,
|
|
|
|
+ y: 340,
|
|
|
|
+ width: 26,
|
|
|
|
+ height: 32
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'textarea',
|
|
|
|
+ text: this.currectData.remark ? this.currectData.remark : '单击添加备注',
|
|
|
|
+ use: 'remark',
|
|
|
|
+ lineSpace: 2,
|
|
|
|
+ width: 200,
|
|
|
|
+ x: 345,
|
|
|
|
+ y: 345,
|
|
|
|
+ size: 26,
|
|
|
|
+ color: '#000'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'image',
|
|
|
|
+ path: '../../static/imgs/card/bg3.png',
|
|
|
|
+ use: 'bg1',
|
|
|
|
+ x: 0,
|
|
|
|
+ y: 418,
|
|
|
|
+ width: 687,
|
|
|
|
+ height: 120
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'image',
|
|
|
|
+ path: '../../static/imgs/card/bg4.png',
|
|
|
|
+ use: 'bg2',
|
|
|
|
+ x: 647,
|
|
|
|
+ y: 418,
|
|
|
|
+ width: 305,
|
|
|
|
+ height: 120
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'image',
|
|
|
|
+ path: '../../static/imgs/card/home.png',
|
|
|
|
+ use: 'home',
|
|
|
|
+ x: 65,
|
|
|
|
+ y: 455,
|
|
|
|
+ width: 55,
|
|
|
|
+ height: 55
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'text',
|
|
|
|
+ text: this.currectData.classifyName ? this.currectData.classifyName : '默',
|
|
|
|
+ use: 'classify',
|
|
|
|
+ x: 245,
|
|
|
|
+ y: 460,
|
|
|
|
+ size: 54,
|
|
|
|
+ color: '#fff'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'image',
|
|
|
|
+ path: '../../static/imgs/card/share.png',
|
|
|
|
+ use: 'share',
|
|
|
|
+ x: 435,
|
|
|
|
+ y: 453,
|
|
|
|
+ width: 66,
|
|
|
|
+ height: 52
|
|
|
|
+ },
|
|
|
|
+ ]
|
|
|
|
+ console.log(this.currectData.cuttentTemplate, 111111)
|
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
|
+ switch (this.currectData.cuttentTemplate) {
|
|
|
|
+ case '2':
|
|
|
|
+ if (data[i].use === 'name' ||
|
|
|
|
+ data[i].use === 'companyName' ||
|
|
|
|
+ data[i].use === 'address-icon' ||
|
|
|
|
+ data[i].use === 'phone-icon' ||
|
|
|
|
+ data[i].use === 'remark-icon') {
|
|
|
|
+ data[i].x = 60
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'post') {
|
|
|
|
+ data[i].x = 200
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'address' ||
|
|
|
|
+ data[i].use === 'phone' ||
|
|
|
|
+ data[i].use === 'remark') {
|
|
|
|
+ data[i].x = 120
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use == 'head') {
|
|
|
|
+ data[i].x = 740
|
|
|
|
+ }
|
|
|
|
+ break;
|
|
|
|
+ case '3':
|
|
|
|
+ if (data[i].use === 'name') {
|
|
|
|
+ data[i].x = 60
|
|
|
|
+ data[i].y = 300
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'companyName') {
|
|
|
|
+ data[i].x = 60
|
|
|
|
+ data[i].y = 360
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'post') {
|
|
|
|
+ data[i].x = 200
|
|
|
|
+ data[i].y = 306
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'address-icon' ||
|
|
|
|
+ data[i].use === 'phone-icon' ||
|
|
|
|
+ data[i].use === 'remark-icon') {
|
|
|
|
+ data[i].x = 340
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'address-icon') {
|
|
|
|
+ data[i].y = 300
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'address') {
|
|
|
|
+ data[i].y = 310;
|
|
|
|
+ data[i].width = 300
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'phone-icon') {
|
|
|
|
+ data[i].y = 360
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'phone') {
|
|
|
|
+ data[i].y = 366
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'remark-icon') {
|
|
|
|
+ data[i].y = 420
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'remark') {
|
|
|
|
+ data[i].y = 424
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'address' ||
|
|
|
|
+ data[i].use === 'phone' ||
|
|
|
|
+ data[i].use === 'remark') {
|
|
|
|
+ data[i].x = 380
|
|
|
|
+ }
|
|
|
|
+ break;
|
|
|
|
+ case '4':
|
|
|
|
+ if (data[i].use === 'name' ||
|
|
|
|
+ data[i].use === 'companyName') {
|
|
|
|
+ data[i].x = 60
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'companyName') {
|
|
|
|
+ data[i].y = 180
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'post') {
|
|
|
|
+ data[i].x = 200
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use == 'head') {
|
|
|
|
+ data[i].x = 45
|
|
|
|
+ data[i].y = 240
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'address-icon' ||
|
|
|
|
+ data[i].use === 'phone-icon' ||
|
|
|
|
+ data[i].use === 'remark-icon') {
|
|
|
|
+ data[i].x = 340
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'address') {
|
|
|
|
+ data[i].width = 300
|
|
|
|
+ }
|
|
|
|
+ if (data[i].use === 'address' ||
|
|
|
|
+ data[i].use === 'phone' ||
|
|
|
|
+ data[i].use === 'remark') {
|
|
|
|
+ data[i].x = 380
|
|
|
|
+ }
|
|
|
|
+ break;
|
|
|
|
+ default:
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.canvasData = {
|
|
|
|
+ clicknum: this.clicknum++,
|
|
|
|
+ list: data
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ open() {
|
|
|
|
+ // console.log('open');
|
|
|
|
+ },
|
|
|
|
+ close() {
|
|
|
|
+ this.show = false
|
|
|
|
+ // console.log('close');
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ imagechange(e){
|
|
|
|
+ console.log(e,1111)
|
|
|
|
+ if(e=='自定义图片'){
|
|
|
|
+ uni.showActionSheet({
|
|
|
|
+ itemList: ["拍照", "从手机相册选择"],
|
|
|
|
+ success(res) {
|
|
|
|
+ let sourceType = "camera";
|
|
|
|
+ if (res.tapIndex == 0) {
|
|
|
|
+ sourceType = "camera";
|
|
|
|
+ } else if (res.tapIndex == 1) {
|
|
|
|
+ sourceType = "album";
|
|
|
|
+ }
|
|
|
|
+ uni.chooseImage({
|
|
|
|
+ count: 1, //最多可以选择的图片张数,默认9
|
|
|
|
+ sizeType: ["original", "compressed"], //original 原图,compressed 压缩图,默认二者都有
|
|
|
|
+ sourceType: [sourceType], //album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项
|
|
|
|
+ success: function(res) {
|
|
|
|
+ let tempFilePaths = res.tempFilePaths;
|
|
|
|
+ that.posterObj1.image = tempFilePaths[0]
|
|
|
|
+ this.posterObj1.qrcode = '../../static/imgs/qrcode.jpg'
|
|
|
|
+ console.log(tempFilePaths)
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ }else{
|
|
|
|
+ if(this.list.length>0){
|
|
|
|
+ this.show1=true
|
|
|
|
+ }else{
|
|
|
|
+ uni.showToast({
|
|
|
|
+ icon: "none",
|
|
|
|
+ title: '您还未创建名片',
|
|
|
|
+ duration: 3000
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ previewImg(){
|
|
|
|
+ // #ifdef H5
|
|
|
|
+ return;
|
|
|
|
+ // #endif
|
|
|
|
+ uni.previewImage({
|
|
|
|
+ current:this.path,
|
|
|
|
+ urls: [this.path]
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ closePopup(){
|
|
|
|
+ this.$refs.posterImg.close();
|
|
|
|
+ this.show_poster=false;
|
|
|
|
+ },
|
|
|
|
+ async toSave() {
|
|
|
|
+ var that = this
|
|
|
|
+ //写个同步方法 把所谓 高度宽度 位置 都算好
|
|
|
|
+ let query = wx.createSelectorQuery();
|
|
|
|
+ await query.select('.canvas-content').boundingClientRect(rect=>{
|
|
|
|
+ this.height = rect.height;
|
|
|
|
+ }).exec()
|
|
|
|
+ await query.select('.title').boundingClientRect(rect=>{
|
|
|
|
+ this.theight = rect.height;
|
|
|
|
+ }).exec()
|
|
|
|
+
|
|
|
|
+ setTimeout(()=>{
|
|
|
|
+ var posterObj = this.$request.makeCanvasData(this.check_idx,this.height,this.posterObj1,this.theight)
|
|
|
|
+ uni.showLoading({
|
|
|
|
+ title:'海报生成中',
|
|
|
|
+ })
|
|
|
|
+ this.posterObj = posterObj
|
|
|
|
+ setTimeout(()=>{
|
|
|
|
+ const painter = this.$refs.painter;
|
|
|
|
+ console.log(painter)
|
|
|
|
+ painter.canvasToTempFilePath().then(res => {
|
|
|
|
+ console.log(res.tempFilePath,'path')
|
|
|
|
+ this.path = res.tempFilePath;
|
|
|
|
+ this.$refs.posterImg.open();
|
|
|
|
+ this.show_poster=true;
|
|
|
|
+ uni.hideLoading()
|
|
|
|
+ });
|
|
|
|
+ },4000)
|
|
|
|
+ },1000)
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ console.log(this.posterObj)
|
|
|
|
+
|
|
|
|
+ console.log(this.check_idx)
|
|
|
|
+ if (this.check_idx == 4) return;
|
|
|
|
+ // switch (this.check_idx) {
|
|
|
|
+ // case 0:
|
|
|
|
+
|
|
|
|
+ // this.posterObj.background = '#fff';
|
|
|
|
+ // this.posterObj.views=[
|
|
|
|
+
|
|
|
|
+ // {
|
|
|
|
+ // type: 'text',
|
|
|
|
+ // text: this.posterObj1.title,
|
|
|
|
+ // use:'title',
|
|
|
|
+ // css: {
|
|
|
|
+ // fontSize: '32rpx',
|
|
|
|
+ // color: '#1A2033',
|
|
|
|
+ // fontWeight: 'bold',
|
|
|
|
+ // lineHeight: '45rpx',
|
|
|
|
+ // left: '32rpx',
|
|
|
|
+ // top: '400rpx',
|
|
|
|
+ // width: '606rpx'
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // {
|
|
|
|
+ // type: 'text',
|
|
|
|
+ // text: this.posterObj1.title1,
|
|
|
|
+ // use:'title1',
|
|
|
|
+ // css: {
|
|
|
|
+ // fontSize: '28rpx',
|
|
|
|
+ // fontWeight: 'bold',
|
|
|
|
+ // color: '#1A2033',
|
|
|
|
+ // lineHeight: '28rpx',
|
|
|
|
+ // left: '32rpx',
|
|
|
|
+ // top: '515rpx'
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // {
|
|
|
|
+ // type: 'text',
|
|
|
|
+ // text: '长按或扫描识别二维码',
|
|
|
|
+ // use:'title2',
|
|
|
|
+ // css: {
|
|
|
|
+ // fontSize: '24rpx',
|
|
|
|
+ // color: '#4070FF',
|
|
|
|
+ // lineHeight: '24rpx',
|
|
|
|
+ // left: '32rpx',
|
|
|
|
+ // top: '559rpx'
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // {
|
|
|
|
+ // type: 'image',
|
|
|
|
+ // src: 'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
|
|
|
|
+ // use:'dt',
|
|
|
|
+ // css: {
|
|
|
|
+ // left: '32rpx',
|
|
|
|
+ // top: '34rpx',
|
|
|
|
+ // width: '606rpx',
|
|
|
|
+ // height: '341rpx',
|
|
|
|
+ // borderRadius: '16rpx'
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+
|
|
|
|
+ // {
|
|
|
|
+ // type: 'qrcode',
|
|
|
|
+ // text: 'https://www.yun-live.com/',
|
|
|
|
+ // css: {
|
|
|
|
+ // left: '445rpx',
|
|
|
|
+ // top: '500rpx',
|
|
|
|
+ // width: '200rpx',
|
|
|
|
+ // height: '200rpx',
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // // {
|
|
|
|
+ // // type: 'text',
|
|
|
|
+ // // text: '———— 由云现场提供技术支持 ————',
|
|
|
|
+ // // css: {
|
|
|
|
+ // // left: '0',
|
|
|
|
+ // // top: '863rpx',
|
|
|
|
+ // // width: '100%',
|
|
|
|
+ // // textAlign: 'center',
|
|
|
|
+ // // fontSize: '24rpx',
|
|
|
|
+ // // color: '#989FB3',
|
|
|
|
+ // // lineHeight: '33rpx'
|
|
|
|
+ // // }
|
|
|
|
+ // // }
|
|
|
|
+ // ]
|
|
|
|
+ // break;
|
|
|
|
+ // case 1:
|
|
|
|
+ // this.posterObj.height=(this.height*2)+'rpx'
|
|
|
|
+ // this.posterObj.views=[{
|
|
|
|
+ // type: 'image',
|
|
|
|
+ // use:'bg',
|
|
|
|
+ // src: 'https://s.yun-live.com/images/20210201/39ae4d9d8ad0b1acac7c224e845c641f.png',
|
|
|
|
+ // css: {
|
|
|
|
+ // left: '0',
|
|
|
|
+ // top: '0',
|
|
|
|
+ // width: '100%',
|
|
|
|
+ // height: '100%'
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // {
|
|
|
|
+ // type: 'image',
|
|
|
|
+ // src: 'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
|
|
|
|
+ // css: {
|
|
|
|
+ // left: '32rpx',
|
|
|
|
+ // top: '34rpx',
|
|
|
|
+ // width: '606rpx',
|
|
|
|
+ // height: '341rpx',
|
|
|
|
+ // borderRadius: '16rpx'
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // {
|
|
|
|
+ // type: 'text',
|
|
|
|
+ // text: this.posterObj1.title,
|
|
|
|
+ // use:'title',
|
|
|
|
+ // css: {
|
|
|
|
+ // fontSize: '32rpx',
|
|
|
|
+ // color: '#fff',
|
|
|
|
+ // fontWeight: 'bold',
|
|
|
|
+ // lineHeight: '45rpx',
|
|
|
|
+ // left: '32rpx',
|
|
|
|
+ // top: '400rpx',
|
|
|
|
+ // width: '606rpx'
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // {
|
|
|
|
+ // type: 'text',
|
|
|
|
+ // text: this.posterObj1.title1,
|
|
|
|
+ // use:'title1',
|
|
|
|
+ // css: {
|
|
|
|
+ // fontSize: '28rpx',
|
|
|
|
+ // fontWeight: 'bold',
|
|
|
|
+ // color: '#D8AB87',
|
|
|
|
+ // lineHeight: '28rpx',
|
|
|
|
+ // left: '32rpx',
|
|
|
|
+ // top: '515rpx'
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // {
|
|
|
|
+ // type: 'text',
|
|
|
|
+ // text: '长按或扫描识别二维码',
|
|
|
|
+ // use:'title2',
|
|
|
|
+ // css: {
|
|
|
|
+ // fontSize: '24rpx',
|
|
|
|
+ // color: '#FFFFFF',
|
|
|
|
+ // lineHeight: '24rpx',
|
|
|
|
+ // left: '32rpx',
|
|
|
|
+ // top: '559rpx'
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+
|
|
|
|
+ // {
|
|
|
|
+ // type: 'image',
|
|
|
|
+ // src: 'https://s.yun-live.com/images/20210201/d88d56843d43b917e2a28550b2a62723.png',
|
|
|
|
+ // css: {
|
|
|
|
+ // left: '551rpx',
|
|
|
|
+ // top: '111rpx',
|
|
|
|
+ // width: '103rpx',
|
|
|
|
+ // height: '103rpx',
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // {
|
|
|
|
+ // type: 'image',
|
|
|
|
+ // src: 'https://s.yun-live.com/images/20210201/247736ffd279276b891ec14db8ed0fd0.png',
|
|
|
|
+ // css: {
|
|
|
|
+ // left: '43rpx',
|
|
|
|
+ // top: '432rpx',
|
|
|
|
+ // width: '56.4rpx',
|
|
|
|
+ // height: '56.4rpx',
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+
|
|
|
|
+ // {
|
|
|
|
+ // type: 'image',
|
|
|
|
+ // src: 'https://s.yun-live.com/images/20210201/63a9b504fb745b43b9fe5c0adef8fddb.png',
|
|
|
|
+ // css: {
|
|
|
|
+ // left: '50%',
|
|
|
|
+ // top: '750rpx',
|
|
|
|
+ // transform: 'translate(-50%,0)',
|
|
|
|
+ // width: '192rpx',
|
|
|
|
+ // height: '78rpx',
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // {
|
|
|
|
+ // type: 'view',
|
|
|
|
+ // use:'qrcode-view',
|
|
|
|
+ // css: {
|
|
|
|
+ // left: '445rpx',
|
|
|
|
+ // top: '500rpx',
|
|
|
|
+ // width: '200rpx',
|
|
|
|
+ // height: '200rpx',
|
|
|
|
+ // background: '#fff',
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // {
|
|
|
|
+ // type: 'image',
|
|
|
|
+ // src:this.posterObj1.qrcode,
|
|
|
|
+ // use:'qrcode',
|
|
|
|
+ // css: {
|
|
|
|
+ // left: '455rpx',
|
|
|
|
+ // top: '510rpx',
|
|
|
|
+ // // transform: 'translate(-50%,0)',
|
|
|
|
+ // width: '180rpx',
|
|
|
|
+ // height: '180rpx',
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+
|
|
|
|
+ // ]
|
|
|
|
+
|
|
|
|
+ // break;
|
|
|
|
+ // case 2:
|
|
|
|
+ // this.posterObj1.backgroundType='image'
|
|
|
|
+ // this.posterObj1.background='https://s.yun-live.com/images/20210201/78f227bd701da20676c9da9166ce3144.png';
|
|
|
|
+ // this.posterObj1.width='540rpx',
|
|
|
|
+ // this.posterObj1.height='303rpx',
|
|
|
|
+ // this.posterObj1.titleCssColor='#1D1D25'
|
|
|
|
+ // this.posterObj1.title1CssColor='#1D1D25'
|
|
|
|
+ // this.posterObj1.title2CssColor='#6CB37A'
|
|
|
|
+ // break;
|
|
|
|
+ // case 3:
|
|
|
|
+ // this.posterObj1.backgroundType='image'
|
|
|
|
+ // this.posterObj1.background='https://s.yun-live.com/images/20210201/524ab6a41fe8c7eb57b35df9a547d388.png';
|
|
|
|
+ // this.posterObj1.width='606rpx',
|
|
|
|
+ // this.posterObj1.height='341rpx',
|
|
|
|
+ // this.posterObj1.titleCssColor='#1D1D25'
|
|
|
|
+ // this.posterObj1.title1CssColor='#1D1D25'
|
|
|
|
+ // this.posterObj1.title2CssColor='#6CB37A'
|
|
|
|
+ // break;
|
|
|
|
+ // default:
|
|
|
|
+ // break;
|
|
|
|
+ // }
|
|
|
|
+ // var node = await this.layout1.calcNode(this.posterObj)
|
|
|
|
+ // console.log(node,'node')
|
|
|
|
+ // if(node&&node.children.length===this.posterObj.views.length){
|
|
|
|
+ // for(var i=0;i<node.children.length;i++){
|
|
|
|
+ // if(node.children[i].use==='title'){
|
|
|
|
+ // dth=node.children[i].layoutBox.height-48
|
|
|
|
+ // }
|
|
|
|
+ // if(node.children[i].use==='title'||node.children[i].use==='title1'||node.children[i].use==='title2'){
|
|
|
|
+ // h+=node.children[i].layoutBox.height
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // console.log(h,h+780,'h打印')
|
|
|
|
+ // for(var i=0;i<this.posterObj.views.length;i++){
|
|
|
|
+ // if(this.posterObj.views[i].use==='title1'||this.posterObj.views[i].use==='title2'
|
|
|
|
+ // ||this.posterObj.views[i].use==='qrcode-view'||this.posterObj.views[i].use==='qrcode'){
|
|
|
|
+ // var top=this.posterObj.views[i].css.top.split('r')[0]
|
|
|
|
+ // this.posterObj.views[i].css.top=(Number(top)+Number(dth*2))+'rpx'
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // this.posterObj.width='670rpx'
|
|
|
|
+
|
|
|
|
+ // console.log(this.posterObj,'posterObj')
|
|
|
|
+ // uni.showLoading({
|
|
|
|
+ // title:'海报生成中',
|
|
|
|
+ // })
|
|
|
|
+ // const painter = this.$refs.painter;
|
|
|
|
+ // setTimeout(()=>{
|
|
|
|
+ // console.log(this.height*2,'height')
|
|
|
|
+ // painter.canvasToTempFilePath().then(res => {
|
|
|
|
+ // console.log(res.tempFilePath,'path')
|
|
|
|
+ // this.path = res.tempFilePath;
|
|
|
|
+ // this.$refs.posterImg.open();
|
|
|
|
+ // this.show_poster=true;
|
|
|
|
+ // uni.hideLoading()
|
|
|
|
+ // });
|
|
|
|
+ // },1000)
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ toChoose(index) {
|
|
|
|
+ if (index == 4) return;
|
|
|
|
+ this.check_idx = index;
|
|
|
|
+ switch (index) {
|
|
|
|
+ case 0:
|
|
|
|
+ this.posterObj1.background='#fff';
|
|
|
|
+ this.posterObj1.backgroundType='rgb'
|
|
|
|
+ this.posterObj1.width='606rpx',
|
|
|
|
+ this.posterObj1.height='341rpx',
|
|
|
|
+ this.posterObj1.titleCssColor='#1A2033'
|
|
|
|
+ this.posterObj1.title1CssColor='#1A2033'
|
|
|
|
+ this.posterObj1.title2CssColor='#4070FF'
|
|
|
|
+ break;
|
|
|
|
+ case 1:
|
|
|
|
+ this.posterObj1.backgroundType='image'
|
|
|
|
+ this.posterObj1.background='https://s.yun-live.com/images/20210201/39ae4d9d8ad0b1acac7c224e845c641f.png';
|
|
|
|
+ this.posterObj1.width='606rpx',
|
|
|
|
+ this.posterObj1.height='341rpx',
|
|
|
|
+ this.posterObj1.titleCssColor='#fff'
|
|
|
|
+ this.posterObj1.title1CssColor='#D8AB87'
|
|
|
|
+ this.posterObj1.title2CssColor='#fff'
|
|
|
|
+ break;
|
|
|
|
+ case 2:
|
|
|
|
+ this.posterObj1.backgroundType='image'
|
|
|
|
+ this.posterObj1.background='https://s.yun-live.com/images/20210201/78f227bd701da20676c9da9166ce3144.png';
|
|
|
|
+ this.posterObj1.width='540rpx',
|
|
|
|
+ this.posterObj1.height='303rpx',
|
|
|
|
+ this.posterObj1.titleCssColor='#1D1D25'
|
|
|
|
+ this.posterObj1.title1CssColor='#1D1D25'
|
|
|
|
+ this.posterObj1.title2CssColor='#6CB37A'
|
|
|
|
+ break;
|
|
|
|
+ case 3:
|
|
|
|
+ this.posterObj1.backgroundType='image'
|
|
|
|
+ this.posterObj1.background='https://s.yun-live.com/images/20210201/524ab6a41fe8c7eb57b35df9a547d388.png';
|
|
|
|
+ this.posterObj1.width='606rpx',
|
|
|
|
+ this.posterObj1.height='341rpx',
|
|
|
|
+ this.posterObj1.titleCssColor='#1D1D25'
|
|
|
|
+ this.posterObj1.title1CssColor='#1D1D25'
|
|
|
|
+ this.posterObj1.title2CssColor='#6CB37A'
|
|
|
|
+ break;
|
|
|
|
+ default:
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ page{
|
|
|
|
+ background-color: #F2F4F8;
|
|
|
|
+ }
|
|
|
|
+ .page{
|
|
|
|
+ /deep/ .uni-transition{
|
|
|
|
+ background-color:rgba(0, 0, 0, 0.6)
|
|
|
|
+ }
|
|
|
|
+ .poster-img{
|
|
|
|
+ width: 670rpx;
|
|
|
|
+ height: 928rpx;
|
|
|
|
+ position: relative;
|
|
|
|
+ text{
|
|
|
|
+ background: url('https://s.yun-live.com/images/20210201/5c4ef9d86bc5eec90f2f915683d9db08.png') no-repeat;
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 50rpx;
|
|
|
|
+ height: 50rpx;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: -60rpx;
|
|
|
|
+ right: 0;
|
|
|
|
+ }
|
|
|
|
+ image{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+ view{
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ font-family: PingFang-SC-Bold, PingFang-SC;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ line-height: 32rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-top: 28rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .poster{
|
|
|
|
+ padding: 24rpx 40rpx 410rpx;
|
|
|
|
+
|
|
|
|
+ .footer-btn{
|
|
|
|
+ margin-top: 24rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ view{
|
|
|
|
+ width: 319rpx;
|
|
|
|
+ height: 66rpx;
|
|
|
|
+ border-radius: 40rpx;
|
|
|
|
+ border: 1px solid #4070FF;
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #4070FF;
|
|
|
|
+ line-height: 66rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ .save{
|
|
|
|
+ background: #4070FF;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .poster-btn{
|
|
|
|
+ position: fixed;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 364rpx;
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ border-radius: 32rpx 32rpx 0px 0px;
|
|
|
|
+ >.check_bg{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ padding-top:25rpx;
|
|
|
|
+ >view{
|
|
|
|
+ width: 80rpx;
|
|
|
|
+ height: 80rpx;
|
|
|
|
+ position: relative;
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+ border: 4rpx solid #fff;
|
|
|
|
+ &.is-check{
|
|
|
|
+ border: 4rpx solid #4070FF;
|
|
|
|
+ }
|
|
|
|
+ image{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+ view{
|
|
|
|
+ width: 30rpx;
|
|
|
|
+ height: 30rpx;
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: -15rpx;
|
|
|
|
+ bottom: -15rpx;
|
|
|
|
+ background: url('https://s.yun-live.com/images/20210201/311c01265c1aa508418f6bae10d67602.png') no-repeat;
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ /deep/.u-radio{
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ }
|
|
|
|
+ .diy_title,.diy_image{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding: 20rpx 20rpx 0;
|
|
|
|
+ font-size:28rpx;
|
|
|
|
+ }
|
|
|
|
+ .diy_title{
|
|
|
|
+ padding: 10rpx 20rpx 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .poster{
|
|
|
|
+ position:relative;
|
|
|
|
+ }
|
|
|
|
+ .poster .title{
|
|
|
|
+ text-align:left;
|
|
|
|
+ margin-top:20rpx;
|
|
|
|
+ word-break: break-word;
|
|
|
|
+ }
|
|
|
|
+ .poster .title1{
|
|
|
|
+ margin-bottom:10rpx;
|
|
|
|
+ }
|
|
|
|
+</style>
|