377 lines
8.5 KiB
Vue
377 lines
8.5 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="cjimg">
|
||
<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="uploadImg">发布营销内容</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>
|
||
|
||
<picker-color :isShow="showPickerColor" :bottom="0" @callback='getPickerColor' />
|
||
|
||
<view class="">
|
||
<l-clipper v-if="show" @success="successImg" @cancel="show = false"
|
||
:width="800" :height="960"/>
|
||
<!-- <button @tap="show = true">裁剪</button> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
$pmdfb,
|
||
$getImgWH,
|
||
$initializeImg,
|
||
$NewOssFilesForm,
|
||
$uploadImg
|
||
} from "@/http/apiManager.js"
|
||
import pickerColor from "@/components/helang-pickerColor/helang-pickerColor.vue"
|
||
import storageManage from '@/commons/utils/storageManage.js'
|
||
export default {
|
||
components: {
|
||
"picker-color": pickerColor,
|
||
},
|
||
data() {
|
||
return {
|
||
imgList: [],
|
||
changeImgFlag: false,
|
||
PMDtextarea: '',
|
||
showPickerColor: false,
|
||
fontColor: '#000',
|
||
BackgroundColor: '#000',
|
||
colorType: '',
|
||
selectImgData: {},
|
||
imageUrl: 'https://img12.360buyimg.com/pop/s1180x940_jfs/t1/97205/26/1142/87801/5dbac55aEf795d962/48a4d7a63ff80b8b.jpg',
|
||
show: false,
|
||
url: '',
|
||
formParams: '',
|
||
isOss: '',
|
||
ossImgUrl: [],
|
||
OSSurl: '',
|
||
UploadImgList:[],
|
||
deviceNo:null,
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
console.log(options,'deviceNodeviceNodeviceNodeviceNo');
|
||
if(options.deviceNo){
|
||
this.deviceNo=options.deviceNo
|
||
}
|
||
this.picUrl = ''; // 初始化图片
|
||
this.getImgWH()
|
||
this.getInitializeIMG() //回显图片
|
||
},
|
||
methods: {
|
||
cjimg() {
|
||
this.show = true
|
||
},
|
||
successImg(e) {
|
||
console.log(e);
|
||
this.show = false
|
||
this.imgList.push({
|
||
url: e.url
|
||
})
|
||
this.beforeUploadImg(e.url)
|
||
},
|
||
async getImgWH() {
|
||
let res = await $getImgWH(this.deviceNo)
|
||
console.log(res);
|
||
if (res.code === 0) {
|
||
this.picSizeH = res.bizData.picHeight
|
||
this.picSizeW = res.bizData.picWidth
|
||
}
|
||
},
|
||
|
||
async getInitializeIMG() {
|
||
let res = await $initializeImg(this.deviceNo)
|
||
console.log(res);
|
||
if (res.code === 0) {
|
||
if (res.bizData) {
|
||
res.bizData.map(item => {
|
||
this.imgList.push({
|
||
url: item.picName
|
||
})
|
||
})
|
||
}
|
||
}
|
||
},
|
||
|
||
async releaseLamp() {
|
||
let data = {
|
||
deviceNo: this.deviceNo,
|
||
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)
|
||
this.UploadImgList.splice(index,1)
|
||
},
|
||
beforeUploadImg(urls) {
|
||
let that=this
|
||
uni.getFileInfo({
|
||
filePath: urls,
|
||
success: (imgs) => {
|
||
console.log(imgs,'sourceFileNamesourceFileName');
|
||
$NewOssFilesForm({
|
||
bizType: "applyment",
|
||
// bizType: "material",
|
||
sourceFileName: urls,
|
||
sourceFileSize: imgs.size,
|
||
}).then(({
|
||
bizData
|
||
}) => {
|
||
console.log(bizData);
|
||
const token = storageManage.token()
|
||
let url=bizData.formActionUrl
|
||
let ossFileUrl=bizData.ossFileUrl
|
||
//调用图片上传方法
|
||
uni.uploadFile({
|
||
url: url,
|
||
filePath: urls,
|
||
name: "file",
|
||
header: {
|
||
itoken: token,
|
||
},
|
||
formData: bizData.formParams,
|
||
// 代表完成的函数 注：此处可以传入三个函数 success （成功）/ fail（失败） / complete （完成）
|
||
complete(res) {
|
||
console.log(res);
|
||
if(res.statusCode===200){
|
||
that.UploadImgList.push(ossFileUrl)
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
uploadImg() {
|
||
let carouselPicInfo=[]
|
||
this.imgList.forEach(item=>{
|
||
if(item.url.indexOf('aliyuncs')!==-1){
|
||
carouselPicInfo.push({
|
||
picName:item.url
|
||
})
|
||
}
|
||
})
|
||
this.UploadImgList.forEach(item=>{
|
||
carouselPicInfo.push({
|
||
picName:item
|
||
})
|
||
})
|
||
$uploadImg({
|
||
deviceNo:this.deviceNo,
|
||
carouselPicInfo:carouselPicInfo,
|
||
}).then(res=>{
|
||
uni.showToast({
|
||
title: '发布成功',
|
||
//将值设置为 success 或者直接不用写icon这个参数
|
||
icon: 'success',
|
||
//显示持续时间为 2秒
|
||
duration: 1000
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
}
|
||
</style> |