615 lines
16 KiB
Vue
615 lines
16 KiB
Vue
<template>
|
||
<view class="rekeaseMain">
|
||
<view class="main-title">
|
||
营销内容
|
||
</view>
|
||
<view class="banner-mian">
|
||
<view class="banner-list" v-for="(img,index) in imgList" :key="img">
|
||
<view class="banner-list-title">
|
||
第{{index+1}}屏广告
|
||
</view>
|
||
<image :src="img.url" mode="" @click="previewImage(img.url)"></image>
|
||
<view class="del-box">
|
||
<view class="del-tip" @click="delImg(index)">
|
||
<image style="height: 30rpx;width: 30rpx;margin-top:0rpx;" src="../../static/img/del.svg" mode=""></image>
|
||
<text>删除</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="addimg-box" v-if="imgList.length<5">
|
||
<view class="addimg-title" @click="changeImg">
|
||
<image src="../../static/img/add.svg" mode=""></image>
|
||
<view class="">
|
||
加一屏广告
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="">
|
||
<button style="background: linear-gradient(45deg, #17c5c6, #15ccb0);color: #fff;border: 0; margin-top: 20rpx; margin-bottom: 60rpx;" @click="releaseImg">发布营销内容</button>
|
||
</view>
|
||
|
||
<view class="main-title">
|
||
跑马灯内容
|
||
</view>
|
||
<view class="PMDtextarea-box" v-show="!changeImgFlag">
|
||
<textarea v-model="PMDtextarea" name="" id="" maxlength="20" style="background:#f4f4f4; width:100%;height:150rpx; box-sizing: border-box; border-radius: 10rpx; padding: 20rpx;"></textarea>
|
||
<view class="PMDtextarea-num">
|
||
{{PMDtextarea.length}}/20
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fontColor-select">
|
||
<text>选择字体颜色</text>
|
||
<view @click="changeFontColor('font')" style="width: 50rpx;height: 50rpx;border-radius: 10rpx; margin-left: 50rpx;" :style="{background:fontColor}"></view>
|
||
</view>
|
||
|
||
<view class="fontColor-select">
|
||
<text>选择背景颜色</text>
|
||
<view @click="changeFontColor('background')" style="width: 50rpx;height: 50rpx;border-radius: 10rpx; margin-left: 50rpx;" :style="{background:BackgroundColor}"></view>
|
||
</view>
|
||
|
||
<view class="">
|
||
<button style="background: linear-gradient(45deg, #17c5c6, #15ccb0);color: #fff;border: 0; margin-top: 20rpx; margin-bottom: 60rpx;" @click="releaseLamp">发布跑马灯</button>
|
||
</view>
|
||
<view class="">
|
||
<button style="background:#d1f3f5;color: #4ac3c3;border: 1px solid #15ccb0; margin-top: 20rpx; margin-bottom: 60rpx;">查看效果</button>
|
||
</view>
|
||
<view class="upload-image" v-if="changeImgFlag">
|
||
<view class="upload-image-body">
|
||
<canvas canvas-id="picCanvas"
|
||
:style="'position: absolute; width: ' + picSizeW + 'px; height: ' + picSizeH + 'px; left: -' + picSizeW + 'px;'"></canvas>
|
||
<view class="pic-preview" @touchstart="touchstart" @touchmove="touchmove">
|
||
<scroll-view class='pic-area' @scroll='scroll' scroll-x scroll-y>
|
||
<view :style="{ height: `calc(50% - ${areaH * 0.5}vw)` }"></view>
|
||
<image :src="picSrc || picUrl" :style="styleImg"></image>
|
||
<view :style="{ height: `calc(50% - ${areaH * 0.5}vw)` }"></view>
|
||
</scroll-view>
|
||
<view class="outside-mask-block" :style="styleV"></view>
|
||
<view class="outside-mask-block" :style="styleV" style="bottom: 0;"></view>
|
||
<view class="outside-mask-block" :style="styleH" style="left: 0;"></view>
|
||
<view class="outside-mask-block" :style="styleH" style="right: 0;"></view>
|
||
</view>
|
||
<view class="bottom-bar safe-area-inset-bottom">
|
||
<block v-if="picSrc != ''">
|
||
<view class="rechoose" @click="chooseImage">重选</view>
|
||
<button class="button" size="mini" @click="uploadClick">确定</button>
|
||
</block>
|
||
<view v-else class="choose-btn" @click="chooseImage">选择图片</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<picker-color :isShow="showPickerColor" :bottom="0" @callback='getPickerColor'/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { $pmdfb,$getImgWH,$initializeImg,$ossFilesForm,$uploadImg} from "@/http/apiManager.js"
|
||
import pickerColor from "@/components/helang-pickerColor/helang-pickerColor.vue"
|
||
import storageManage from "@/util/storageManage.js"
|
||
const AREA_SIZE = 75; // 裁剪框占屏幕尺寸百分比
|
||
const IMG_SIZEW = 800; // 裁剪图片默认尺寸
|
||
const IMG_SIZEH = 960; // 裁剪图片默认尺寸
|
||
|
||
export default {
|
||
components: {
|
||
"picker-color":pickerColor,
|
||
},
|
||
data() {
|
||
return {
|
||
// bobyHeight: this.getBobyHeight(),
|
||
picSrc: '',
|
||
picUrl: '',
|
||
dataKey: '',
|
||
areaW: AREA_SIZE,
|
||
areaH: AREA_SIZE,
|
||
width: this.areaW,
|
||
height: this.areaH,
|
||
old_width: 0,
|
||
old_height: 0,
|
||
picSizeW: 800,
|
||
picSizeH: 960,
|
||
x: 0,
|
||
y: 0,
|
||
distance: 0,
|
||
scale: 1,
|
||
disable: false,
|
||
imgList: [],
|
||
changeImgFlag:false,
|
||
PMDtextarea:'',
|
||
showPickerColor:false,
|
||
fontColor:'#000',
|
||
BackgroundColor:'#000',
|
||
colorType:'',
|
||
selectImgData:{},
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.picSizeW = Number(options.w) || IMG_SIZEW;
|
||
this.picSizeH = Number(options.h) || IMG_SIZEH;
|
||
this.picUrl = ''; // 初始化图片
|
||
this.initAreaSize();
|
||
this.getImgWH()
|
||
this.getInitializeIMG() //回显图片
|
||
},
|
||
computed: {
|
||
styleImg() {
|
||
return `padding: 0 ${50 - this.areaW * 0.5}%;width: ${this.width}%;height: ${this.height}vw;`;
|
||
},
|
||
styleV() {
|
||
// (屏幕高度 - 图片高度) / 2
|
||
return `height: calc(50% - ${this.areaH * 0.5}vw);left: ${50 - this.areaW * 0.5}%;right: ${50 - this.areaW * 0.5}%;`;
|
||
},
|
||
styleH() {
|
||
// (屏幕宽度 - 图片宽度) / 2
|
||
return `top: 0;bottom: 0;width: ${50 - this.areaW * 0.5}%;`;
|
||
},
|
||
},
|
||
methods: {
|
||
async getImgWH(){
|
||
let res = await $getImgWH('QR939200003565')
|
||
console.log(res);
|
||
if(res.code===0){
|
||
this.picSizeH=res.bizData.picHeight
|
||
this.picSizeW=res.bizData.picWidth
|
||
}
|
||
},
|
||
|
||
async getInitializeIMG(){
|
||
let res = await $initializeImg('QR939200003565')
|
||
console.log(res);
|
||
if(res.code===0){
|
||
if(res.bizData.length>1){
|
||
res.bizData.map(item=>{
|
||
this.imgList.push({url:item.picName})
|
||
})
|
||
}
|
||
}
|
||
},
|
||
|
||
async releaseLamp(){
|
||
let data={
|
||
deviceNo:'QR939200003565',
|
||
inputText:this.PMDtextarea,
|
||
fontColor:this.fontColor,
|
||
bgColor:this.BackgroundColor,
|
||
}
|
||
let res = await $pmdfb(data)
|
||
console.log(res);
|
||
},
|
||
getPickerColor(color){
|
||
if(color){
|
||
if(this.colorType==='font'){
|
||
this.fontColor=color
|
||
}else{
|
||
this.BackgroundColor=color
|
||
}
|
||
}
|
||
this.showPickerColor=false
|
||
},
|
||
changeFontColor(type){
|
||
this.colorType=type
|
||
this.showPickerColor=true
|
||
},
|
||
previewImage(url){
|
||
console.log(url);
|
||
let data={
|
||
urls:[]
|
||
}
|
||
data.urls.push(url)
|
||
uni.previewImage(data)
|
||
},
|
||
changeImg(){
|
||
this.changeImgFlag=true
|
||
},
|
||
delImg(index){
|
||
this.imgList.splice(index,1)
|
||
},
|
||
initAreaSize() {
|
||
if (this.picSizeW > this.picSizeH) {
|
||
this.areaH = AREA_SIZE * this.picSizeH / this.picSizeW;
|
||
} else if (this.picSizeW < this.picSizeH) {
|
||
this.areaW = AREA_SIZE * this.picSizeW / this.picSizeH;
|
||
}
|
||
this.width = this.areaW;
|
||
this.height = this.areaH;
|
||
},
|
||
chooseImage() {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: (res) => {
|
||
this.resetData();
|
||
this.selectImgData={
|
||
url:res.tempFiles[0].path,
|
||
size:res.tempFiles[0].size
|
||
}
|
||
this.initImage(res.tempFiles[0].path);
|
||
}
|
||
});
|
||
},
|
||
|
||
resetData() {
|
||
this.picSrc = '';
|
||
this.distance = 0;
|
||
this.old_width = 0;
|
||
this.old_height = 0;
|
||
this.x = 0;
|
||
this.y = 0;
|
||
this.scale = 1;
|
||
this.disable = false;
|
||
this.initAreaSize();
|
||
},
|
||
|
||
initImage(url,size) {
|
||
uni.getImageInfo({
|
||
src: url,
|
||
success: (res) => {
|
||
// #ifdef APP-PLUS || MP
|
||
if (['png', 'jpeg', 'jpg'].indexOf(res.type) == -1) {
|
||
uni.showModal({
|
||
title: '',
|
||
content: '仅支持上传png和jpg格式图片',
|
||
showCancel: true,
|
||
cancelText: '取消',
|
||
confirmText: '重选',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.chooseImage();
|
||
}
|
||
},
|
||
});
|
||
return;
|
||
}
|
||
// #endif
|
||
let scale = res.width / res.height;
|
||
let areaScale = this.areaW / this.areaH;
|
||
this.picSrc = url;
|
||
this.scale = scale;
|
||
if (scale > 1) { // 横向图片
|
||
if (scale >= areaScale) { // 图片宽不小于目标宽，则高固定，宽自适应
|
||
this.width = (this.height / res.height) * this.width * (res.width / this
|
||
.width);
|
||
} else { // 否则宽固定、高自适应
|
||
this.height = res.height * this.width / res.width;
|
||
}
|
||
} else { // 纵向图片
|
||
if (scale <= areaScale) { // 图片高不小于目标高，宽固定，高自适应
|
||
this.height = (this.width / res.width) * this.height / (this.height / res
|
||
.height);
|
||
} else { // 否则高固定，宽自适应
|
||
this.width = res.width * this.height / res.height;
|
||
}
|
||
}
|
||
// 记录原始宽高，为缩放比列做限制
|
||
this.old_width = this.width;
|
||
this.old_height = this.height;
|
||
},
|
||
});
|
||
|
||
},
|
||
|
||
touchstart(e) {
|
||
if (this.picSrc && e.touches.length == 2) {
|
||
let _x = e.touches[1].pageX - e.touches[0].pageX,
|
||
_y = e.touches[1].pageY - e.touches[0].pageY,
|
||
distance = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));
|
||
this.distance = distance;
|
||
}
|
||
},
|
||
|
||
touchmove(e) {
|
||
if (this.picSrc && e.touches.length == 2) {
|
||
let _x = e.touches[1].pageX - e.touches[0].pageX,
|
||
_y = e.touches[1].pageY - e.touches[0].pageY,
|
||
old_width = this.old_width,
|
||
old_height = this.old_height,
|
||
newdistance = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2)),
|
||
distance = this.distance,
|
||
end_distance = newdistance - distance,
|
||
pic_scale = 1 + end_distance * 0.001,
|
||
width = this.width * pic_scale,
|
||
height = this.height * pic_scale;
|
||
let max = width / old_width;
|
||
if (max > 2) {
|
||
width = old_width * 2;
|
||
height = old_height * 2;
|
||
} else if (max < 1) {
|
||
width = old_width;
|
||
height = old_height;
|
||
}
|
||
this.width = width;
|
||
this.height = height;
|
||
}
|
||
},
|
||
|
||
scroll(e) {
|
||
if (this.picSrc) {
|
||
let x = e.detail.scrollLeft,
|
||
y = e.detail.scrollTop;
|
||
this.x = x;
|
||
this.y = y;
|
||
}
|
||
},
|
||
|
||
uploadClick(e) {
|
||
console.log(e);
|
||
uni.showModal({
|
||
content: '确定要截取当前可视区域图片并上传吗？',
|
||
success: modalRes => {
|
||
if (modalRes.confirm) {
|
||
uni.showLoading({
|
||
title: '上传中...',
|
||
mask: true
|
||
});
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
let whScale = systemInfo.screenWidth * 0.01, // 图片宽高vw与px比
|
||
// 生成图片的实际尺寸与截取区域比
|
||
xScale = this.picSizeW / (systemInfo.screenWidth * this.areaW * 0.01),
|
||
yScale = this.picSizeH / (systemInfo.screenWidth * this.areaH * 0.01);
|
||
const canvas = uni.createCanvasContext('picCanvas');
|
||
// 注意：无法直接绘制网络图片，需要先下载到本地
|
||
canvas.drawImage(this.picSrc, -this.x * xScale, -this.y * yScale, this.width *
|
||
whScale * xScale, this.height *
|
||
whScale * xScale);
|
||
canvas.draw(setTimeout(() => {
|
||
uni.canvasToTempFilePath({
|
||
x: 0,
|
||
y: 0,
|
||
width: this.picSizeW,
|
||
height: this.picSizeH,
|
||
destWidth: this.picSizeW, // 必要，保证生成图片宽度不受设备分辨率影响
|
||
destHeight: this.picSizeH, // 必要，保证生成图片高度不受设备分辨率影响
|
||
canvasId: 'picCanvas',
|
||
success: (fileRes) => {
|
||
console.log(fileRes,'initImageinitImageinitImage')
|
||
uni.hideLoading()
|
||
this.imgList.push({url:fileRes.tempFilePath})
|
||
let str =fileRes.tempFilePath
|
||
str = str.substring(0, str.length - 3)+'jpg'
|
||
this.uploadImage(str);
|
||
this.changeImgFlag=false
|
||
},
|
||
fail: function(err) {
|
||
console.log(err);
|
||
uni.showToast({
|
||
title: '上传失败：图片生成过程中遇到错误',
|
||
icon: 'none'
|
||
});
|
||
this.changeImgFlag=false
|
||
}
|
||
}, this);
|
||
}, 1000));
|
||
}
|
||
}
|
||
});
|
||
},
|
||
uploadImage(tempFilePath) {
|
||
// 在H5平台下，tempFilePath 为 base64
|
||
this.resetData()
|
||
$ossFilesForm({
|
||
bizType: "applyment",
|
||
sourceFileName:'http://tmp/umPJ4jKRMPO370afabf8febe678b66a70f143e34a90d.jpg',
|
||
sourceFileSize: this.selectImgData.size,
|
||
}).then(({bizData})=>{
|
||
let url,
|
||
isOss,
|
||
ossImgUrl = ""
|
||
if (bizData.formActionUrl === "LOCAL_SINGLE_FILE_URL") {
|
||
url = appConfig.env.JEEPAY_BASE_URL + props.upLoadUrl
|
||
isOss = false
|
||
} else {
|
||
url = bizData.formActionUrl
|
||
ossImgUrl = { data: bizData.ossFileUrl }
|
||
isOss = true
|
||
}
|
||
console.log(ossImgUrl.data);
|
||
this.uploadImg(this.selectImgData.url, url, bizData.formParams, isOss, ossImgUrl)
|
||
})
|
||
},
|
||
uploadImg(tempFilePaths, url, formParams, isOss, ossImgUrl){
|
||
console.log(tempFilePaths, url, formParams, isOss, ossImgUrl);
|
||
const token = storageManage.token()
|
||
|
||
var successCount = 0 //多图时，上传成功数量
|
||
var qualification = [] //多图存储
|
||
uni.uploadFile({
|
||
url: url,
|
||
filePath: tempFilePaths,
|
||
name: "file",
|
||
header: {
|
||
itoken: token,
|
||
},
|
||
formData: formParams,
|
||
// 代表完成的函数 注：此处可以传入三个函数 success （成功）/ fail（失败） / complete （完成）
|
||
complete(res) {
|
||
console.log(res);
|
||
$uploadImg({
|
||
deviceNo:'QR939200003565',
|
||
carouselPicInfo:[{
|
||
picName:'https://qilinlife-pub.oss-cn-hangzhou.aliyuncs.com/applyment/ff22fa1c-8d97-4ef6-ae4a-a79d63cc285c.jpg'
|
||
}]
|
||
}).then(({bizData})=>{
|
||
console.log(bizData);
|
||
})
|
||
}})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.rekeaseMain {
|
||
padding: 20rpx;
|
||
|
||
.main-title {
|
||
line-height: 60rpx;
|
||
position: relative;
|
||
padding-left: 20rpx;
|
||
}
|
||
.main-title::after{
|
||
content: '';
|
||
display: block;
|
||
width: 8rpx;
|
||
background: #16c3c3;
|
||
height: 30rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 17rpx;
|
||
}
|
||
|
||
.banner-mian {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
.banner-list {
|
||
width: 48%;
|
||
text-align: center;
|
||
height: 470rpx;
|
||
margin-top: 20rpx;
|
||
.banner-list-title {
|
||
background: #e7f9f9;
|
||
padding: 15rpx;
|
||
font-size: 24rpx;
|
||
color: #1ac3c7;
|
||
border-radius: 10rpx 10rpx 0 0;
|
||
height: 40rpx;
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
border-radius: 10rpx;
|
||
margin-top: -10rpx;
|
||
height: 340rpx;
|
||
}
|
||
.del-box{
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 16rpx;
|
||
.del-tip {
|
||
width: 40%;
|
||
background: #fce3df;
|
||
color: #f00;
|
||
border-radius: 30rpx;
|
||
border: 1px solid #f00;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 4rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.addimg-box {
|
||
width: 48%;
|
||
background: #f4f4f4;
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 400rpx;
|
||
margin-top: 20rpx;
|
||
.addimg-title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.PMDtextarea-box{
|
||
position: relative;
|
||
.PMDtextarea-num{
|
||
position: absolute;
|
||
right: 5rpx;
|
||
bottom: 10rpx;
|
||
}
|
||
}
|
||
|
||
.fontColor-select{
|
||
display: flex;
|
||
margin: 30rpx 0;
|
||
}
|
||
}
|
||
|
||
.upload-image {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
|
||
.upload-image-body {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.pic-preview {
|
||
width: 100%;
|
||
flex: 1;
|
||
position: relative;
|
||
|
||
.pic-area {
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
font-size: 0;
|
||
z-index: 1;
|
||
background-color: $uni-bg-color-grey;
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.outside-mask-block {
|
||
background-color: rgba(51, 51, 51, 0.9);
|
||
z-index: 2;
|
||
position: absolute;
|
||
}
|
||
}
|
||
|
||
.bottom-bar {
|
||
display: flex;
|
||
flex-direction: row;
|
||
position: relative;
|
||
background-color: $uni-bg-color-grey;
|
||
|
||
.rechoose {
|
||
color: $uni-color-primary;
|
||
padding: 0 $uni-spacing-row-lg;
|
||
line-height: 100rpx;
|
||
}
|
||
|
||
.choose-btn {
|
||
color: $uni-color-primary;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.button {
|
||
margin: auto $uni-spacing-row-lg auto auto;
|
||
}
|
||
}
|
||
|
||
.safe-area-inset-bottom {
|
||
padding-bottom: 0;
|
||
padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
|
||
padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>=11.2
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|