581 lines
24 KiB
Vue
581 lines
24 KiB
Vue
|
<template>
|
|||
|
|
<!-- 新增 -->
|
|||
|
|
<el-dialog :title="addEditStatus=='add' ? t('新增') : t('修改')" align-center :close-on-click-modal="false" v-model="showDialog" :width="formAll.promotionalStyle==1 ?'1900px':'700px'" append-to-body>
|
|||
|
|
<!-- <el-scrollbar max-height="900px" > -->
|
|||
|
|
<el-form ref="formRef" :model="formAll" :rules="rules" label-width="130px" class="add-form">
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="formAll.promotionalStyle==1?12:24">
|
|||
|
|
|
|||
|
|
<el-form-item :label="t('版式风格')" prop="iconType">
|
|||
|
|
<el-radio-group v-model="formAll.iconType" @change="generateImage" style="margin-bottom: 0px">
|
|||
|
|
<el-radio-button :value="1">{{ t('方形图标') }}</el-radio-button>
|
|||
|
|
<el-radio-button :value="2">{{ t('竖版图标') }}</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item :label="t('平台名称')" prop="platformName">
|
|||
|
|
<el-input v-model="formAll.platformName" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item :label="t('最低准入')" prop="minAmount">
|
|||
|
|
<number-input v-model="formAll.minAmount" ></number-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item :label="t('平台宣传语')" prop="promotionalText">
|
|||
|
|
<el-input v-model="formAll.promotionalText" :placeholder="t('请输入平台宣传语')" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item :label="t('平台跳转方式')" prop="iosJump">
|
|||
|
|
<div style="width: 100%;display: flex;">
|
|||
|
|
<div style="width: 80px;text-align: right;margin-right: 10px;">IOS:</div>
|
|||
|
|
<el-radio-group v-model="formAll.iosJump" style="margin-bottom: 0px">
|
|||
|
|
<el-radio :value="1">{{ t('内嵌') }}</el-radio>
|
|||
|
|
<el-radio :value="2">{{ t('外链') }}</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 100%;display: flex;">
|
|||
|
|
<div style="width: 80px;text-align: right;margin-right: 10px;">Android:</div>
|
|||
|
|
<el-radio-group v-model="formAll.androidJump" style="margin-bottom: 0px">
|
|||
|
|
<el-radio :value="1">{{ t('内嵌') }}</el-radio>
|
|||
|
|
<el-radio :value="2">{{ t('外链') }}</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 100%;display: flex;">
|
|||
|
|
<div style="width: 80px;text-align: right;margin-right: 10px;">H5:</div>
|
|||
|
|
<el-radio-group v-model="formAll.h5Jump" style="margin-bottom: 0px">
|
|||
|
|
<el-radio :value="1">{{ t('内嵌') }}</el-radio>
|
|||
|
|
<el-radio :value="2">{{ t('外链') }}</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item :label="t('宣传图样式')" prop="promotionalStyle">
|
|||
|
|
<el-radio-group v-model="formAll.promotionalStyle">
|
|||
|
|
<el-radio :value="1">{{ t('默认') }}</el-radio>
|
|||
|
|
<el-radio :value="2">{{ t('自定义') }}</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
<div v-if="formAll.promotionalStyle == 1">
|
|||
|
|
<el-form-item :label="t('宣传图图标')" prop="promotionalIcon">
|
|||
|
|
<banner-icon @clickSelect="handleSelection('three',$event)" :disabled="shouwLoding" :imageUrl="formAll.promotionalIcon" :query="materialIcon" url="/game/material/group/select"></banner-icon>
|
|||
|
|
</el-form-item>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="formAll.promotionalStyle == 2">
|
|||
|
|
<el-form-item :label="t('宣传图')" prop="customPromotionalImage">
|
|||
|
|
<div v-if="formAll.iconType == 2" class="upload-box-vioce11">
|
|||
|
|
<image-upload v-model="formAll.customPromotionalImage" :typeUpImg="3" :limit="1" :isShowTip="false"
|
|||
|
|
:isdrag="true"></image-upload>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="formAll.iconType == 1" class="upload-box-vioce22">
|
|||
|
|
<image-upload v-model="formAll.customPromotionalImage" :typeUpImg="3" :limit="1" :isShowTip="false"
|
|||
|
|
:isdrag="true"></image-upload>
|
|||
|
|
</div>
|
|||
|
|
<div >{{ t('只能上传png文件，且不超过1MB，图片尺寸为300px * 400px') }}</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item :label="t('热门图')" prop="customPopularStyle">
|
|||
|
|
<div v-if="formAll.iconType == 2" class="upload-box-vioce11">
|
|||
|
|
<image-upload v-model="formAll.customPopularStyle" :typeUpImg="3" :limit="1" :isShowTip="false"
|
|||
|
|
:isdrag="true"></image-upload>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="formAll.iconType == 1" class="upload-box-vioce22">
|
|||
|
|
<image-upload v-model="formAll.customPopularStyle" :typeUpImg="3" :limit="1" :isShowTip="false"
|
|||
|
|
:isdrag="true"></image-upload>
|
|||
|
|
</div>
|
|||
|
|
<div >{{ t('只能上传png文件，且不超过1MB，图片尺寸为300px * 400px') }}</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12" v-if="formAll.promotionalStyle == 1">
|
|||
|
|
|
|||
|
|
<div v-if="formAll.promotionalStyle == 1">
|
|||
|
|
|
|||
|
|
<el-form-item :label="t('图片背景')" prop="promotionalBackground">
|
|||
|
|
<BannerColour @clickSelect="handleSelection('two',$event)" :disabled="shouwLoding" :backgroundColor="formAll.promotionalBackground" :query="materialTypess" url="/game/material/group/select"></BannerColour>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item v-if="formAll.promotionalStyle == 1" :label="t('品牌LOGO')" prop="platformLogo">
|
|||
|
|
<div class="upload-box-vioce" style="border:1px solid #409eff;border-radius: 5px;width: 213px;height:90px !important;text-align: center;display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<img style="width: 100px;" :src="fileHost+formAll.platformLogo"/>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item v-if="formAll.promotionalStyle == 2" :label="t('品牌LOGO')" prop="customPlatformLogo">
|
|||
|
|
<div class="upload-box-vioce">
|
|||
|
|
<image-upload v-model="formAll.customPlatformLogo" :typeUpImg="3" :limit="1" :isShowTip="false"
|
|||
|
|
:isdrag="true"></image-upload>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item :label="t('宣传图预览')">
|
|||
|
|
<div style=" position: absolute; top: -9999px; left: -9999px; visibility: hidden; ">
|
|||
|
|
<div class="" v-if="formAll.iconType == 1" ref="captureArea" :style="`display: flex;align-items: center;justify-content: space-between;width: 400px;height: 150px;background: url(${formAll.popularStyleGb}) no-repeat;background-size: 100% 100%;`">
|
|||
|
|
<div class="" style="width: 40%;">
|
|||
|
|
<p style="margin: 0;text-align: center;"><img style="width: 100px;height: auto;" :src="formAll.platformLogoGb"/></p>
|
|||
|
|
<p style="margin: 0;text-align: center;font-size: 16px;font-weight: 600;"> </p>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 60%;">
|
|||
|
|
<div style="width: 260px;height: 150px;">
|
|||
|
|
<img style="width: 100%;height: 100%;" :src="formAll.promotionalImageGb"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="formAll.iconType == 2" class="" ref="captureArea" :style="`display: flex;align-items: center;justify-content: space-between;width: 210px;height: 280px;background: url(${formAll.popularStyleGb}) no-repeat;background-size: 100% 100%;`">
|
|||
|
|
<div :style="`width: 210px; height: 280px;display: flex;align-items: center;position: relative;background: url(${formAll.promotionalImageGb});
|
|||
|
|
background-size: cover;
|
|||
|
|
background-position: center;
|
|||
|
|
background-repeat: no-repeat;`">
|
|||
|
|
<div class="" :style="`position: absolute;bottom: 0;left: 0;width: 100%;`">
|
|||
|
|
<div style="margin: 0;text-align: center;position: relative;top: 0px;"><img style="width: 58px;height: auto;" crossorigin="anonymous" :src="formAll.platformLogoGb"/></div>
|
|||
|
|
<div style="margin: 0;text-align: center;font-size: 16px;font-weight: 600;color: #fff;height: 35px;"> </div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<img :src="resolvedImageUrl" style="border-radius: 5px;" alt="Generated Image" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item :label="t('热门图预览')">
|
|||
|
|
<div style="position: absolute; top: -8999px; left: -8999px; visibility: hidden;">
|
|||
|
|
<div class="" v-if="formAll.iconType == 1" ref="captureAreaPop" :style="`display: flex;align-items: center;justify-content: space-between;width: 400px;height: 150px;background: url(${formAll.popularStyleGb}) no-repeat;background-size: 100% 100%;`">
|
|||
|
|
<div class="" style="width: 40%;">
|
|||
|
|
<p style="margin: 0;text-align: center;"><img style="width: 100px;height: auto;" :src="formAll.platformLogoGb"/></p>
|
|||
|
|
<p style="margin: 0;text-align: center;font-size: 16px;font-weight: 600;"> </p>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 60%;">
|
|||
|
|
<div style="width: 260px;height: 150px;">
|
|||
|
|
<img style="width: 100%;height: 100%;" :src="formAll.promotionalImageGb"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="formAll.iconType == 2" class="" ref="captureAreaPop" :style="`display: flex;align-items: center;justify-content: space-between;width: 210px;height: 280px;background: url(${formAll.popularStyleGb}) no-repeat;background-size: 100% 100%;`">
|
|||
|
|
<div :style="`width: 210px; height: 245px;display: flex;align-items: center;margin-top:35px; position: relative;background: url(${formAll.promotionalImageGb});
|
|||
|
|
background-size: cover;
|
|||
|
|
background-position: center;
|
|||
|
|
background-repeat: no-repeat;`">
|
|||
|
|
<div class="" :style="`position: absolute;top: -40px;left: 0;width: 100%;`">
|
|||
|
|
<div style="margin: 0;text-align: center;"><img style="width: 70px;height: auto;" crossorigin="anonymous" :src="formAll.platformLogoGb"/></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="" :style="`position: absolute;height:80px;bottom: 0;left: 0;width: 100%;`">
|
|||
|
|
<div style="margin: 0;text-align: center;font-size: 16px;font-weight: 600;color: #fff;margin-top: 45px;height: 35px;"> </div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<img :src="resolvedPopularStyle" style="border-radius: 5px;" alt="Generated Image" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
</el-form>
|
|||
|
|
<!-- </el-scrollbar> -->
|
|||
|
|
<template #footer>
|
|||
|
|
<div class="dialog-footer">
|
|||
|
|
<el-button type="primary" @click="submitForm" :loading="loadingButton">{{ t('确 定') }}</el-button>
|
|||
|
|
<el-button @click="closeDialog">{{ t('取 消') }}</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
<script setup>
|
|||
|
|
import { formatTime,finalTimestamp } from '@/utils/ruoyi'; // 时间格式化
|
|||
|
|
import ImageUpload from "@/components/ImageUpload";
|
|||
|
|
import NumberInput from "@/components/NumberInput";
|
|||
|
|
import { updatePlatform } from "@/api/game/platform";
|
|||
|
|
import BannerColour from "@/components/BannerColour"; // Banner图颜色
|
|||
|
|
import BannerIcon from "@/components/BannerIcon"; // Banner图标
|
|||
|
|
import { getToken } from '@/utils/auth'
|
|||
|
|
import { nextTick, onMounted, ref } from "vue"; // 获取当前实例
|
|||
|
|
import { getLocalStorage } from "@/utils/auth";
|
|||
|
|
const fileHost = getLocalStorage('fileUrl') || ''; // 文件host
|
|||
|
|
|
|||
|
|
import html2canvas from 'html2canvas';
|
|||
|
|
const uploadUrl = getLocalStorage('uploadUrl');
|
|||
|
|
const uploadImgUrl = ref(uploadUrl + "/file/upload/localSysFile/3"); // 上传的图片服务器地址
|
|||
|
|
const loadingButton = ref(false);
|
|||
|
|
const oldForm = shallowRef({ });
|
|||
|
|
const langList = getLocalStorage('langList')?.filter(v => v.langType == 1 && v.langStatus).map(item => {
|
|||
|
|
return {
|
|||
|
|
label: item.name,
|
|||
|
|
value: item.id
|
|||
|
|
};
|
|||
|
|
}); // 语种选项
|
|||
|
|
const { proxy } = getCurrentInstance() // 获取当前实例
|
|||
|
|
const emits = defineEmits(['submit', 'update:show']) // 自定义事件
|
|||
|
|
const props = defineProps({ // 父组件向子组件传值
|
|||
|
|
data: {
|
|||
|
|
type: Object, // 父组件传值
|
|||
|
|
default: {}
|
|||
|
|
},
|
|||
|
|
show: {
|
|||
|
|
type: Boolean, // 显示
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
addEditStatus:{ // 添加/修改
|
|||
|
|
type: String,
|
|||
|
|
default: 'add'
|
|||
|
|
},
|
|||
|
|
modifyDate: { //修改数据
|
|||
|
|
type: Object,
|
|||
|
|
default: {}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
const materialIcon = ref({ //图标请求参数
|
|||
|
|
materialTypes:'2'
|
|||
|
|
});
|
|||
|
|
const materialTypess = ref({ //颜色请求参数
|
|||
|
|
materialTypes:'1'
|
|||
|
|
});
|
|||
|
|
const showDialog = computed({ //弹窗显示控制
|
|||
|
|
get() {
|
|||
|
|
return props.show
|
|||
|
|
},
|
|||
|
|
set(value) {
|
|||
|
|
emits('update:show', value)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const activeNameLang = ref(0);//语言切换选中
|
|||
|
|
|
|||
|
|
const langOptionAll = ref([]); // 语言tabs切换的数据
|
|||
|
|
const formAll = reactive({
|
|||
|
|
iconType:1, // 平台类型 1:方形图标 2:竖版图标
|
|||
|
|
})
|
|||
|
|
const loadImageAsBase64 = async(url)=> {
|
|||
|
|
const res = await fetch(uploadUrl+url, { mode: 'cors' })
|
|||
|
|
const blob = await res.blob()
|
|||
|
|
return await new Promise((resolve) => {
|
|||
|
|
const reader = new FileReader()
|
|||
|
|
reader.onloadend = () => resolve(reader.result)
|
|||
|
|
reader.readAsDataURL(blob)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 修改时数据更新相关内容
|
|||
|
|
nextTick(async () => {
|
|||
|
|
if (props.addEditStatus != 'edit') return;
|
|||
|
|
Object.assign(formAll, props.modifyDate)
|
|||
|
|
formAll.id = props.modifyDate.id;
|
|||
|
|
formAll.iconType = props.modifyDate.iconType|| 1;
|
|||
|
|
formAll.platformName = props.modifyDate.platformName;
|
|||
|
|
formAll.minAmount = props.modifyDate.minAmount;
|
|||
|
|
if (props.modifyDate.promotionalStyle == 1){
|
|||
|
|
formAll.promotionalImage = props.modifyDate.promotionalImage;
|
|||
|
|
formAll.platformLogoGb = await loadImageAsBase64(props.modifyDate.platformLogo);
|
|||
|
|
formAll.popularStyleGb = await loadImageAsBase64(props.modifyDate.promotionalBackground);
|
|||
|
|
formAll.promotionalImageGb = await loadImageAsBase64(props.modifyDate.promotionalIcon);
|
|||
|
|
formAll.popularStyle = props.modifyDate.popularStyle;
|
|||
|
|
}
|
|||
|
|
formAll.promotionalStyle = props.modifyDate.promotionalStyle;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
let objForm = { ...formAll }
|
|||
|
|
oldForm.value = JSON.stringify(objForm);
|
|||
|
|
}, 500);
|
|||
|
|
});
|
|||
|
|
const captureArea = ref(null);
|
|||
|
|
const captureAreaPop = ref(null);
|
|||
|
|
// 加入图片加载检测
|
|||
|
|
const waitForImagesLoaded = async (container) => {
|
|||
|
|
const imgs = container.querySelectorAll('img');
|
|||
|
|
await Promise.all([...imgs].map(img => {
|
|||
|
|
return new Promise(resolve => {
|
|||
|
|
if (img.complete) return resolve();
|
|||
|
|
img.onload = img.onerror = () => resolve();
|
|||
|
|
});
|
|||
|
|
}));
|
|||
|
|
};
|
|||
|
|
const shouwLoding = ref(false);
|
|||
|
|
const generateImage = async () => {
|
|||
|
|
shouwLoding.value = true;
|
|||
|
|
const el = captureArea.value;
|
|||
|
|
const el2 = captureAreaPop.value;
|
|||
|
|
if (!el || !el2) return;
|
|||
|
|
|
|||
|
|
el.style.visibility = 'visible';
|
|||
|
|
el2.style.visibility = 'visible';
|
|||
|
|
|
|||
|
|
await nextTick();
|
|||
|
|
await waitForImagesLoaded(el);
|
|||
|
|
await waitForImagesLoaded(el2);
|
|||
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|||
|
|
|
|||
|
|
const canvas = await html2canvas(el, {
|
|||
|
|
useCORS: true,
|
|||
|
|
backgroundColor: '#fff'
|
|||
|
|
});
|
|||
|
|
formAll.promotionalImage = canvas.toDataURL('image/png');
|
|||
|
|
|
|||
|
|
await new Promise(resolve => setTimeout(resolve, 100)); // 控制节奏
|
|||
|
|
const canvas2 = await html2canvas(el2, {
|
|||
|
|
useCORS: true,
|
|||
|
|
backgroundColor: '#fff'
|
|||
|
|
});
|
|||
|
|
formAll.popularStyle = canvas2.toDataURL('image/png');
|
|||
|
|
shouwLoding.value = false;
|
|||
|
|
el.style.visibility = 'hidden';
|
|||
|
|
el2.style.visibility = 'hidden';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
//表单验证规则
|
|||
|
|
const rules = reactive({
|
|||
|
|
promotionalStyle: [
|
|||
|
|
{ required: true, message: proxy.t('请选择icon图样式'), trigger: 'change' },
|
|||
|
|
],
|
|||
|
|
minAmount: [
|
|||
|
|
{ required: true, message: proxy.t('请输入最小投注金额'), trigger: 'change' },
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
// 关闭弹窗
|
|||
|
|
const closeDialog = () => {
|
|||
|
|
showDialog.value = false
|
|||
|
|
}
|
|||
|
|
const resolvedImageUrl = computed(() => {
|
|||
|
|
const url = formAll.promotionalImage
|
|||
|
|
if (!url) return ''
|
|||
|
|
|
|||
|
|
if (url.startsWith('data:image/')) {
|
|||
|
|
return url // base64 图片
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (url.startsWith('http://') || url.startsWith('https://')) {
|
|||
|
|
return url // 完整 URL，不加 fileHost
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return fileHost + url // 相对路径，加上 fileHost
|
|||
|
|
})
|
|||
|
|
const resolvedPopularStyle = computed(() => {
|
|||
|
|
const url = formAll.popularStyle
|
|||
|
|
if (!url) return ''
|
|||
|
|
|
|||
|
|
if (url.startsWith('data:image/')) {
|
|||
|
|
return url // base64 图片
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (url.startsWith('http://') || url.startsWith('https://')) {
|
|||
|
|
return url // 完整 URL，不加 fileHost
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return fileHost + url // 相对路径，加上 fileHost
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const getColorFromUrl = (url) => {
|
|||
|
|
// 匹配最后一个斜杠后的颜色字符串，不带扩展名
|
|||
|
|
const match = url.match(/\/([^\/]+)\.png$/)
|
|||
|
|
if (match && match[1]) {
|
|||
|
|
return `#${match[1]}` // 加上 #
|
|||
|
|
}
|
|||
|
|
return null
|
|||
|
|
}
|
|||
|
|
const colorGb = ref('');
|
|||
|
|
const isShow = ref(true); // 是否显示
|
|||
|
|
// 处理选中排版、颜色、图标和图片上传后的数据更新
|
|||
|
|
const handleSelection = async(type, en) => {
|
|||
|
|
switch (type) {
|
|||
|
|
case 'two':
|
|||
|
|
isShow.value = false;
|
|||
|
|
const color = getColorFromUrl(en.url);
|
|||
|
|
colorGb.value = color;
|
|||
|
|
if (formAll.promotionalBackground == en.url){
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
formAll.popularStyleGb = await loadImageAsBase64(en.url);
|
|||
|
|
formAll.promotionalBackground = en.url;
|
|||
|
|
nextTick(() => {
|
|||
|
|
isShow.value = true;
|
|||
|
|
generateImage();
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
case 'three':
|
|||
|
|
isShow.value = false;
|
|||
|
|
if (formAll.promotionalIcon == en.url){
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
formAll.promotionalImageGb = await loadImageAsBase64(en.url);
|
|||
|
|
formAll.promotionalIcon = en.url;
|
|||
|
|
nextTick(() => {
|
|||
|
|
isShow.value = true;
|
|||
|
|
generateImage();
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
function base64ToFile(base64, filename = 'image.png') {
|
|||
|
|
const arr = base64.split(',')
|
|||
|
|
const mime = arr[0].match(/:(.*?);/)[1]
|
|||
|
|
const bstr = atob(arr[1])
|
|||
|
|
let n = bstr.length
|
|||
|
|
const u8arr = new Uint8Array(n);
|
|||
|
|
while (n--) {
|
|||
|
|
u8arr[n] = bstr.charCodeAt(n)
|
|||
|
|
}
|
|||
|
|
return new File([u8arr], filename, { type: mime })
|
|||
|
|
}
|
|||
|
|
const uploadBase64Image = async(base64) =>{
|
|||
|
|
if (!/^data:image\/(png|jpeg|jpg|gif|bmp);base64,/.test(base64)) {
|
|||
|
|
// 不是 Base64，说明已经是 URL，直接返回
|
|||
|
|
return { url: base64 };
|
|||
|
|
}
|
|||
|
|
const file = base64ToFile(base64, 'upload.png')
|
|||
|
|
const formData = new FormData()
|
|||
|
|
formData.append('file', file)
|
|||
|
|
const res = await fetch(uploadImgUrl.value, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
Authorization: 'Bearer ' + getToken(),
|
|||
|
|
},
|
|||
|
|
body: formData
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return await res.json()
|
|||
|
|
}
|
|||
|
|
// 提交
|
|||
|
|
const formRef = ref(null)
|
|||
|
|
|
|||
|
|
// 提交修改和新增数据表单
|
|||
|
|
const submitForm = async() => {
|
|||
|
|
// 验证表单
|
|||
|
|
formRef.value.validate(async(valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
loadingButton.value = true;
|
|||
|
|
let promotionalImages = await uploadBase64Image(formAll.promotionalImage)
|
|||
|
|
let popularStyles = await uploadBase64Image(formAll.popularStyle)
|
|||
|
|
|
|||
|
|
// 初始化表单数据
|
|||
|
|
let formData = {
|
|||
|
|
...formAll,
|
|||
|
|
promotionalImage:promotionalImages.url,
|
|||
|
|
popularStyle:popularStyles.url,
|
|||
|
|
};
|
|||
|
|
delete formData.platformLogoGb;
|
|||
|
|
delete formData.popularStyleGb;
|
|||
|
|
delete formData.promotionalImageGb;
|
|||
|
|
if (JSON.stringify(formAll) != oldForm.value) {
|
|||
|
|
updatePlatform(formData).then(res => {
|
|||
|
|
loadingButton.value = false;
|
|||
|
|
proxy.$modal.msgSuccess(proxy.t('修改成功！'));
|
|||
|
|
emits('submit');
|
|||
|
|
closeDialog();
|
|||
|
|
}).catch(error => {
|
|||
|
|
loadingButton.value = false;
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
loadingButton.value = false;
|
|||
|
|
closeDialog();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
<style scope lang="scss">
|
|||
|
|
.w100 {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-box-vioce{
|
|||
|
|
height: 90px !important;
|
|||
|
|
overflow: hidden;
|
|||
|
|
.upload-tips {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
}
|
|||
|
|
.component-upload-image .el-upload--picture-card {
|
|||
|
|
width: 180px !important;
|
|||
|
|
height: 90px !important;
|
|||
|
|
}
|
|||
|
|
.el-upload-list--picture-card .el-upload-list__item {
|
|||
|
|
width: 180px!important;
|
|||
|
|
height: 90px!important;
|
|||
|
|
}
|
|||
|
|
:deep(.el-upload-list) {
|
|||
|
|
width:180px!important;
|
|||
|
|
height: 90px!important;
|
|||
|
|
.el-upload,
|
|||
|
|
.el-upload-list--picture-card .el-upload-list__item {
|
|||
|
|
width: 180px!important;
|
|||
|
|
height: 90px!important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-upload-list__item {
|
|||
|
|
margin: 0;
|
|||
|
|
border: none;
|
|||
|
|
width: 180px!important;
|
|||
|
|
height: 90px!important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-box-vioce11{
|
|||
|
|
height: 400px !important;
|
|||
|
|
overflow: hidden;
|
|||
|
|
.upload-tips {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
}
|
|||
|
|
.component-upload-image .el-upload--picture-card {
|
|||
|
|
width: 300px !important;
|
|||
|
|
height: 400px !important;
|
|||
|
|
}
|
|||
|
|
.el-upload-list--picture-card .el-upload-list__item {
|
|||
|
|
width: 300px!important;
|
|||
|
|
height: 400px!important;
|
|||
|
|
}
|
|||
|
|
:deep(.el-upload-list) {
|
|||
|
|
width:300px!important;
|
|||
|
|
height: 400px!important;
|
|||
|
|
.el-upload,
|
|||
|
|
.el-upload-list--picture-card .el-upload-list__item {
|
|||
|
|
width: 300px!important;
|
|||
|
|
height: 400px!important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-upload-list__item {
|
|||
|
|
margin: 0;
|
|||
|
|
border: none;
|
|||
|
|
width: 300px!important;
|
|||
|
|
height: 400px!important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-box-vioce22{
|
|||
|
|
height: 200px !important;
|
|||
|
|
overflow: hidden;
|
|||
|
|
.upload-tips {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
}
|
|||
|
|
.component-upload-image .el-upload--picture-card {
|
|||
|
|
width: 400px !important;
|
|||
|
|
height: 200px !important;
|
|||
|
|
}
|
|||
|
|
.el-upload-list--picture-card .el-upload-list__item {
|
|||
|
|
width: 400px!important;
|
|||
|
|
height: 200px!important;
|
|||
|
|
}
|
|||
|
|
:deep(.el-upload-list) {
|
|||
|
|
width:400px!important;
|
|||
|
|
height: 200px!important;
|
|||
|
|
.el-upload,
|
|||
|
|
.el-upload-list--picture-card .el-upload-list__item {
|
|||
|
|
width: 400px!important;
|
|||
|
|
height: 200px!important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-upload-list__item {
|
|||
|
|
margin: 0;
|
|||
|
|
border: none;
|
|||
|
|
width: 400px!important;
|
|||
|
|
height: 200px!important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.disable-click {
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
</style>
|