Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
GaoHao
|
4dd8d13999 |
File diff suppressed because it is too large
Load Diff
|
|
@ -24,10 +24,11 @@
|
|||
"mitt": "^3.0.1",
|
||||
"moment": "^2.29.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.0.0-rc.10",
|
||||
"pinia": "^2.0.3",
|
||||
"qrcode.vue": "^3.3.3",
|
||||
"qs": "^6.10.1",
|
||||
"reconnectingwebsocket": "^1.0.0",
|
||||
"sass": "^1.77.8",
|
||||
"snabbdom": "^3.5.1",
|
||||
"store": "^2.0.12",
|
||||
"v-viewer": "^3.0.11",
|
||||
|
|
|
|||
|
|
@ -1,137 +0,0 @@
|
|||
<template>
|
||||
<uni-popup ref="refPopup" type="center" @change='change' :safe-area="false">
|
||||
<view class="popup-wrapper">
|
||||
<view class="title">用户服务协议与隐私政策</view>
|
||||
<view class="content">
|
||||
如需登录，请先认真阅读并同意{{ $appName }}
|
||||
<text class="info" @tap="toService">《用户服务协议》</text>
|
||||
与<text class="info" @tap="toPrivacy">《隐私政策》</text>。
|
||||
</view>
|
||||
<view class="but-wrapper">
|
||||
<view class="but-item" hover-class="touch-button" @tap="disagreeClose">拒绝</view>
|
||||
<button class="but-item agree" id="agree-btn" open-type="agreePrivacyAuthorization"
|
||||
@agreeprivacyauthorization="handAgree">同意</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
service: { type: String },
|
||||
privacy: { type: String }
|
||||
})
|
||||
const refPopup = ref(null)
|
||||
const emits = defineEmits(['agree'])
|
||||
const open = () => {
|
||||
getPrivacy()
|
||||
refPopup.value.open()
|
||||
}
|
||||
const vdata = reactive({})
|
||||
const close = () => refPopup.value.close()
|
||||
const toPrivacy = () => {
|
||||
// #ifdef APP-PLUS
|
||||
if (props.privacy) return uni.navigateTo(props.privacy)
|
||||
// #endif
|
||||
// 打开小程序隐私政策
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.openPrivacyContract(
|
||||
{
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '打开失败请稍后重试', // 打开失败
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
}
|
||||
)
|
||||
// #endif
|
||||
|
||||
}
|
||||
function disagreeClose () {
|
||||
close()
|
||||
}
|
||||
// 获取微信你用户是否同意过隐私政策
|
||||
const getPrivacy = () => {
|
||||
wx.getPrivacySetting({
|
||||
success: (r) => {
|
||||
Object.assign(vdata, r)
|
||||
if (vdata.needAuthorization) {
|
||||
wx.onNeedPrivacyAuthorization(res => {
|
||||
vdata.resolve = res
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const handAgree = () => {
|
||||
if (vdata.needAuthorization) {
|
||||
vdata.resolve({ buttonId: 'agree-btn', event: 'agree' })
|
||||
}
|
||||
emits('agree')
|
||||
close()
|
||||
}
|
||||
const toService = () => {
|
||||
uni.navigateTo({ url: props.service })
|
||||
}
|
||||
defineExpose({ open, close })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popup-wrapper {
|
||||
width: 600rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #FFF;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 30rpx 0 50rpx;
|
||||
text-align: center;
|
||||
color: rgba(0, 0, 0, 0.50);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
padding-bottom: 70rpx;
|
||||
margin: 0 auto;
|
||||
width: 500rpx;
|
||||
color: #000;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
|
||||
.info {
|
||||
color: $primaryColor;
|
||||
}
|
||||
}
|
||||
|
||||
.but-wrapper {
|
||||
display: flex;
|
||||
|
||||
.but-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 110rpx;
|
||||
color: rgba(0, 0, 0, 0.70);
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.agree {
|
||||
background: $primaryColor;
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,614 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -59,8 +59,12 @@ function refTable(isToFirst = false) {
|
|||
return props.reqTableDataFunc(Object.assign({}, vdata.iPage, props.searchData)).then(({ bizData }) => {
|
||||
Object.assign(vdata.apiResData, bizData); // 列表数据更新
|
||||
if (bizData.records) {
|
||||
if (isToFirst) {
|
||||
vdata.allData = [...bizData.records]; // 利用展开语法代替forEach
|
||||
} else {
|
||||
vdata.allData.push(...bizData.records); // 利用展开语法代替forEach
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,362 +0,0 @@
|
|||
<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,
|
||||
$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: '',
|
||||
}
|
||||
},
|
||||
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
|
||||
})
|
||||
},
|
||||
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.ossImgUrl = []
|
||||
let that = this
|
||||
this.imgList.map(img => {
|
||||
uni.getFileInfo({
|
||||
filePath: img.url,
|
||||
async success(imgs) {
|
||||
let res = await $NewOssFilesForm({
|
||||
bizType: "applyment",
|
||||
sourceFileName: img.url,
|
||||
sourceFileSize: imgs.size,
|
||||
})
|
||||
that.OSSurl = res.bizData.formActionUrl
|
||||
that.formParams = res.bizData.formParams
|
||||
that.ossImgUrl.push(res.bizData.ossFileUrl)
|
||||
that.isOss = true
|
||||
}
|
||||
})
|
||||
})
|
||||
setTimeout(()=>{
|
||||
console.log(that.ossImgUrl);
|
||||
that.uploadImg(that.imgList, that.OSSurl, that.formParams, that.isOss, that.ossImgUrl)
|
||||
},1000)
|
||||
},
|
||||
|
||||
uploadImg(tempFilePaths, url, formParams, isOss, ossImgUrl) {
|
||||
console.log(tempFilePaths, url, formParams, isOss, ossImgUrl);
|
||||
const token = storageManage.token()
|
||||
|
||||
var successCount = 0 //多图时，上传成功数量
|
||||
var qualification = [] //多图存储
|
||||
let carouselPicInfo = []
|
||||
ossImgUrl.forEach((item)=>{
|
||||
carouselPicInfo.push({
|
||||
picName: item
|
||||
})
|
||||
})
|
||||
console.log(carouselPicInfo);
|
||||
uni.uploadFile({
|
||||
url: url,
|
||||
filePath: this.imgList[0],
|
||||
name: "file",
|
||||
header: {
|
||||
itoken: token,
|
||||
},
|
||||
formData: this.formParams,
|
||||
// 代表完成的函数 注：此处可以传入三个函数 success （成功）/ fail（失败） / complete （完成）
|
||||
// complete(res) {
|
||||
// console.log(res,'resresres');
|
||||
// $uploadImg({
|
||||
// deviceNo: 'QR939200003565',
|
||||
// carouselPicInfo: carouselPicInfo,
|
||||
// }).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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -200,8 +200,9 @@ const dayConfirm = (e) => {
|
|||
nextTick(() => {
|
||||
getStatList();
|
||||
refTable.value.refTable(true);
|
||||
// refTable.value.refTable(true);
|
||||
refTable.value.refTable(true);
|
||||
});
|
||||
console.log('选择时间更新统计1');
|
||||
};
|
||||
// 自定义时间选择器
|
||||
const customTime = (e, val) => {
|
||||
|
|
@ -213,6 +214,7 @@ const customTime = (e, val) => {
|
|||
.format('YYYY-MM-DD HH:mm:ss')}`;
|
||||
getStatList();
|
||||
refTable.value.refTable(true);
|
||||
console.log('选择时间更新统计2');
|
||||
// refTable.value.refTable(true);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue