428 lines
9.3 KiB
Vue
428 lines
9.3 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="beforeUploadImg">发布营销内容</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" :is-lock-width="true" :is-lock-height="true" />
|
||
<!-- <button @tap="show = true">裁剪</button> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
$pmdfb,
|
||
$getImgWH,
|
||
$initializeImg,
|
||
$ossFilesForm,
|
||
$uploadImg
|
||
} from "@/http/apiManager.js"
|
||
import pickerColor from "@/components/helang-pickerColor/helang-pickerColor.vue"
|
||
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: '',
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
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()
|
||
|
||
},
|
||
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)
|
||
},
|
||
|
||
beforeUploadImg() {
|
||
this.imgList.forEach(item => {
|
||
$ossFilesForm({
|
||
bizType: "applyment",
|
||
sourceFileName: item.url,
|
||
sourceFileSize: 1000,
|
||
}).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
|
||
}
|
||
this.uploadImg(item.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: ossImgUrl.data
|
||
}]
|
||
}).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>
|