@@ -3,9 +3,9 @@ | |||||
# VUE_APP_API_ROOT_USER=https://smapitest.malls.iformall.com/C | # VUE_APP_API_ROOT_USER=https://smapitest.malls.iformall.com/C | ||||
# 开发 | # 开发 | ||||
NODE_ENV=development | |||||
VUE_APP_ENV=development | |||||
VUE_APP_API_ROOT=https://mtest.metavatar.cc/C | |||||
# NODE_ENV=development | |||||
# VUE_APP_ENV=development | |||||
# VUE_APP_API_ROOT=https://mtest.metavatar.cc/C | |||||
# VUE_APP_API_ROOT=https://smapitest.malls.iformall.com/C 已废弃 | # VUE_APP_API_ROOT=https://smapitest.malls.iformall.com/C 已废弃 | ||||
@@ -15,3 +15,9 @@ VUE_APP_API_ROOT=https://mtest.metavatar.cc/C | |||||
# VUE_APP_ENV=production | # VUE_APP_ENV=production | ||||
# VUE_APP_API_ROOT=http://m.metavatar.cc/C | # VUE_APP_API_ROOT=http://m.metavatar.cc/C | ||||
# .env 无论开发环境还是生成环境都会加载 | |||||
# .env.development 开发环境加载这个文件 | |||||
# .env.production 生成环境加载这个文件 | |||||
@@ -1,4 +1,5 @@ | |||||
# NODE_ENV=development | |||||
# VUE_APP_ENV=development | |||||
# VUE_APP_API_ROOT=https://smapitest.malls.iformall.com/C | |||||
NODE_ENV=development | |||||
VUE_APP_ENV=development | |||||
VUE_APP_API_ROOT=https://mtest.metavatar.cc/C | |||||
@@ -1,4 +1,4 @@ | |||||
# NODE_ENV=production | |||||
# VUE_APP_ENV=production | |||||
# VUE_APP_API_ROOT=http://m.metavatar.cc/C | |||||
NODE_ENV=production | |||||
VUE_APP_ENV=production | |||||
VUE_APP_API_ROOT=http://m.metavatar.cc/C |
@@ -3,8 +3,8 @@ | |||||
"version": "0.1.0", | "version": "0.1.0", | ||||
"private": true, | "private": true, | ||||
"scripts": { | "scripts": { | ||||
"dev": "vue-cli-service serve", | |||||
"build": "vue-cli-service build" | |||||
"dev": "vue-cli-service serve --mode development", | |||||
"build": "vue-cli-service build --mode production" | |||||
}, | }, | ||||
"dependencies": { | "dependencies": { | ||||
"axios": "0.18.1", | "axios": "0.18.1", | ||||
@@ -36,4 +36,4 @@ | |||||
"uglifyjs-webpack-plugin": "^2.2.0", | "uglifyjs-webpack-plugin": "^2.2.0", | ||||
"vue-template-compiler": "^2.6.11" | "vue-template-compiler": "^2.6.11" | ||||
} | } | ||||
} | |||||
} |
@@ -0,0 +1,348 @@ | |||||
<template> | |||||
<div class="uploder"> | |||||
<div class="change-photo-setter" style="height: 240px; width: 160px"> | |||||
<van-uploader ref="uploader" class="sett-item" :before-read="beforeRead" style="height: 240px; width: 160px"> | |||||
<div style="height: 240px; width: 160px"> | |||||
<!-- <img :src="ImgUrl" alt="" /> --> | |||||
</div> | |||||
</van-uploader> | |||||
</div> | |||||
<div class="uploadava"> | |||||
<!-- van-popup有bug,某些1情况需要绑定app为根 --> | |||||
<van-popup :get-container="this.isAndroid ? '' : '#app'" class="vanPopup" duration="0" v-model="showCropper" position="top" :style="{ height: '100%' }"> | |||||
<div class="cropper-container" :style="{ height: '94vh' }"> | |||||
<van-loading v-show="loadingShow" size="50" color="#fff" vertical text-color="#fff">上传中...</van-loading> | |||||
<!-- 切图组件 --> | |||||
<vueCropper | |||||
style="background-image: none" | |||||
ref="cropper" | |||||
:img="option.img" | |||||
:outputSize="option.outputSize" | |||||
:outputType="option.outputType" | |||||
:info="option.info" | |||||
:full="option.full" | |||||
:autoCropWidth="option.autoCropWidth" | |||||
:autoCropHeight="option.autoCropHeight" | |||||
:canMove="option.canMove" | |||||
:canMoveBox="option.canMoveBox" | |||||
:original="option.original" | |||||
:autoCrop="option.autoCrop" | |||||
:fixed="option.fixed" | |||||
:fixedNumber="option.fixedNumber" | |||||
:centerBox="option.centerBox" | |||||
:infoTrue="option.infoTrue" | |||||
:fixedBox="option.fixedBox" | |||||
:high="option.high" | |||||
:mode="option.mode" /> | |||||
<!-- <div style="display: flex; justify-content: space-between; padding: 10px; height: 8vh"> | |||||
<div @click="onClickLeft">取消</div> | |||||
<div @click="onClickRight">确定</div> | |||||
</div> --> | |||||
<van-nav-bar left-text="取消" right-text="确定" @click-left="onClickLeft" @click-right="onClickRight" /> | |||||
</div> | |||||
</van-popup> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { awsImgUpload } from '@/api/editModel'; | |||||
import { Toast } from 'vant'; | |||||
import { VueCropper } from 'vue-cropper'; | |||||
import { scrollToID, getDeviceType } from '../utils'; | |||||
import { saveImgApi } from '../api/editModel'; | |||||
import { watch } from 'vue'; | |||||
export default { | |||||
name: 'uploadAva', | |||||
components: { | |||||
VueCropper | |||||
}, | |||||
props: { | |||||
showAta: { | |||||
default: false, | |||||
type: Boolean | |||||
}, | |||||
avaUrl: { | |||||
default: '', | |||||
type: String | |||||
}, | |||||
type: { | |||||
default: '', | |||||
type: Number | |||||
}, | |||||
videoType: { | |||||
default: null, | |||||
type: Number | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
isAndroid: false, //判断是不是ios | |||||
aaa: null, | |||||
ImgUrl: '', | |||||
show: true, // 上传类型的弹窗 | |||||
imageFileName: '', | |||||
showCropper: false, // 裁剪的弹窗 | |||||
option: { | |||||
img: '', | |||||
outputSize: 0.8, | |||||
info: false, // 裁剪框的大小信息 | |||||
// outputType: 'jpeg', // 裁剪生成图片的格式 | |||||
outputType: 'png', // 裁剪生成图片的格式 | |||||
canScale: true, // 图片是否允许滚轮缩放 | |||||
autoCrop: true, // 是否默认生成截图框 | |||||
autoCropWidth: window.innerWidth - 100 + 'px', // 默认生成截图框宽度 | |||||
autoCropHeight: window.innerWidth - 100 + 'px', // 默认生成截图框高度 | |||||
high: true, // 是否按照设备的dpr 输出等比例图片 | |||||
fixedBox: false, // 固定截图框大小 不允许改变 | |||||
fixed: false, // 是否开启截图框宽高固定比例 | |||||
// fixedNumber: [1, 1], // 截图框的宽高比例 | |||||
full: true, // 是否输出原图比例的截图 | |||||
canMoveBox: true, // 截图框能否拖动 | |||||
original: false, // 上传图片按照原始比例渲染 | |||||
centerBox: true, // 截图框是否被限制在图片里面 | |||||
infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 | |||||
mode: '100% auto' // 图片默认渲染方式 | |||||
}, | |||||
loadingShow: false // 是否展示loading | |||||
}; | |||||
}, | |||||
created() { | |||||
const deviceType = getDeviceType(); | |||||
this.isAndroid = false; | |||||
if (!deviceType) { | |||||
// 设备类型为pc | |||||
this.isAndroid = false; | |||||
} else { | |||||
if (deviceType[0] == 'Android') { | |||||
// 设备类型为安卓 | |||||
this.isAndroid = true; | |||||
} else { | |||||
// 其他设备 | |||||
this.isAndroid = false; | |||||
} | |||||
} | |||||
if (this.type == 4 && this.videoType == 1) { | |||||
this.option.autoCropWidth = 1080 + 'px'; // 默认生成截图框宽度 | |||||
this.option.autoCropHeight = 1920 + 'px'; // 默认生成截图框高度 | |||||
this.option.fixed = true; | |||||
this.option.fixedNumber = [1080, 1920]; | |||||
} | |||||
if (this.type == 4 && this.videoType == 2) { | |||||
this.option.autoCropWidth = 1920 + 'px'; // 默认生成截图框宽度 | |||||
this.option.autoCropHeight = 1080 + 'px'; // 默认生成截图框高度 | |||||
this.option.fixed = true; | |||||
this.option.fixedNumber = [1920, 1080]; | |||||
} | |||||
}, | |||||
methods: { | |||||
beforeRead(file) { | |||||
// console.log(file) | |||||
if (file.type !== 'image/jpeg' && file.type !== 'image/png') { | |||||
this.$toast('请上传 jpg/png 格式图片'); | |||||
return false; | |||||
} | |||||
let data = window.URL.createObjectURL(new Blob([file])); | |||||
this.option.img = data; //给裁剪图片的路径 | |||||
this.showCropper = true; | |||||
return false; | |||||
}, | |||||
// 点击裁剪的选择 | |||||
onClickRight() { | |||||
let that = this; | |||||
this.loadingShow = true; | |||||
console.log(this.$refs.cropper); | |||||
this.$refs.cropper.getCropBlob(async data => { | |||||
console.log(data, '图片数据'); | |||||
let formData = new FormData(); | |||||
formData.append('file', data); | |||||
let file = formData.get('file'); | |||||
// 转为 base64 | |||||
// let reader = new FileReader(); | |||||
// const base64Data = await new Promise((resolve, reject) => { | |||||
// reader.onload = () => { | |||||
// resolve(reader.result); | |||||
// }; | |||||
// reader.readAsDataURL(file); | |||||
// }); | |||||
// let imgBinary = await that.base64ToBinary(base64Data.substring(23)); | |||||
// // base64结果 | |||||
// that.ImgUrl = base64Data; | |||||
that.loading = false; | |||||
// console.log(that.ImgUrl, 'dasdasd') | |||||
// 发请求 | |||||
const AccessToken = localStorage.getItem('AccessToken'); | |||||
that | |||||
.$axios({ | |||||
method: 'post', | |||||
// url: `https://smapitest.malls.iformall.com/C/api/upload/awsImgUpload`, | |||||
// url: `http://m.metavatar.cc/C/api/upload/awsImgUpload`, | |||||
url: process.env.VUE_APP_API_ROOT + `/api/upload/awsImgUpload`, | |||||
headers: { | |||||
'content-type': 'multipart/form-data', | |||||
token: AccessToken, | |||||
'Access-Control-Allow-Credentials': true | |||||
}, | |||||
data: formData | |||||
}) | |||||
.then(async res => { | |||||
// console.log(res.data.data.url) | |||||
const res1 = await saveImgApi({ | |||||
type: that.type, | |||||
videoType: that.videoType, | |||||
material: res.data.data.url | |||||
}); | |||||
// 重新获取列表 | |||||
await that.$parent.$parent.getMyBGIListApi(); | |||||
await that.$parent.$parent.getMyScListApi(); | |||||
if (this.type == 4) { | |||||
that.$parent.$parent.changeShowBGIList(1); | |||||
} | |||||
if (this.type == 5) { | |||||
that.$parent.$parent.changeShowBGIList(3); | |||||
} | |||||
that.loadingShow = false; | |||||
that.showCropper = false; | |||||
Toast.success('上传成功'); | |||||
}); | |||||
}); | |||||
}, | |||||
// 点击取消 | |||||
onClickLeft() { | |||||
this.loadingShow = false; | |||||
this.showCropper = false; | |||||
this.$parent.showPhotoUploader = false; | |||||
}, | |||||
// 上传图片 | |||||
async pushImg(data) { | |||||
try { | |||||
const res = await awsImgUpload(data); | |||||
this.loadingShow = false; | |||||
this.showCropper = false; | |||||
Toast.success('上传成功'); | |||||
} catch (error) { | |||||
console.log(error, 'error'); | |||||
Toast.fail(error.message); | |||||
} | |||||
}, | |||||
//图片转base64,异步 | |||||
toBase64(file) { | |||||
let that = this; | |||||
return new Promise((resolve, reject) => { | |||||
const reader = new FileReader(); | |||||
reader.onload = () => { | |||||
// base64结果 | |||||
that.ImgUrl = this.result; | |||||
that.loading = false; | |||||
}; | |||||
reader.onerror = reject; | |||||
reader.readAsDataURL(file); | |||||
}); | |||||
}, | |||||
// base64 转二进制 | |||||
base64ToBinary(base64) { | |||||
const binaryStr = window.atob(base64); | |||||
const len = binaryStr.length; | |||||
const bytes = new Uint8Array(len); | |||||
for (let i = 0; i < len; ++i) { | |||||
bytes[i] = binaryStr.charCodeAt(i); | |||||
} | |||||
return bytes; | |||||
} | |||||
}, | |||||
mounted() {} | |||||
}; | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
// /deep/.cropper-container { | |||||
// z-index: 2005 !important; | |||||
// } | |||||
// .uploder{ | |||||
// overflow: hidden; | |||||
// } | |||||
/deep/.cropper-view-box { | |||||
outline: 2px dashed #fff !important; | |||||
} | |||||
/deep/.crop-point { | |||||
background-color: auto !important; | |||||
} | |||||
/deep/.van-loading { | |||||
position: absolute; | |||||
// color: red; | |||||
z-index: 9999; | |||||
left: 50%; | |||||
top: 50%; | |||||
margin-left: -55px; | |||||
margin-top: -30px; | |||||
background: rgba(0, 0, 0, 0.3); | |||||
padding: 10px 30px; | |||||
border-radius: 25px; | |||||
} | |||||
.uploadava { | |||||
// width: 100%; | |||||
// width: 100vw; | |||||
height: 94vh; | |||||
.update-avatar { | |||||
height: 100%; | |||||
text-align: center; | |||||
.update-avatar-line { | |||||
width: 100%; | |||||
height: 1px; | |||||
background-color: #979797; | |||||
} | |||||
.avatar-select-type { | |||||
background-color: #fff; | |||||
width: 346px; | |||||
border-radius: 12px; | |||||
padding-bottom: 4px; | |||||
.upload-avator { | |||||
padding: 14px; | |||||
} | |||||
} | |||||
p { | |||||
margin: 15px 0 30px; | |||||
background-color: #fff; | |||||
width: 346px; | |||||
border-radius: 12px; | |||||
padding: 15px 0 18px; | |||||
} | |||||
} | |||||
.cropper-container { | |||||
position: relative; | |||||
width: 100%; | |||||
height: 94vh; | |||||
// height: 100%; | |||||
/deep/ .van-nav-bar { | |||||
position: absolute; | |||||
z-index: 999; | |||||
width: 100%; | |||||
bottom: 0px; | |||||
left: 0px; | |||||
height: 6vh; | |||||
background-color: rgba(0, 0, 0, 0.87); | |||||
:global(.van-nav-bar__text) { | |||||
color: #000; | |||||
// font-size: $font-size-normal-x; | |||||
} | |||||
:global(.van-nav-bar__text:nth-child(2)) { | |||||
color: #000; | |||||
font-weight: 500; | |||||
} | |||||
// :global(.van-icon) { | |||||
// color: red; | |||||
// } | |||||
} | |||||
} | |||||
.vue-cropper { | |||||
background: #000; | |||||
width: 100%; | |||||
height: 88vh; | |||||
padding-top: 46px; | |||||
box-sizing: border-box; | |||||
} | |||||
} | |||||
</style> |
@@ -10,11 +10,12 @@ | |||||
<div class="uploadava"> | <div class="uploadava"> | ||||
<!-- van-popup有bug,某些1情况需要绑定app为根 --> | <!-- van-popup有bug,某些1情况需要绑定app为根 --> | ||||
<van-popup :get-container="this.isAndroid ? '' : '#app'" class="vanPopup" duration="0" v-model="showCropper" position="top" :style="{ height: '100%' }"> | <van-popup :get-container="this.isAndroid ? '' : '#app'" class="vanPopup" duration="0" v-model="showCropper" position="top" :style="{ height: '100%' }"> | ||||
<div class="cropper-container" :style="{ height: '94vh' }"> | |||||
<div class="cropper-container" :style="{ height: '92vh', position: 'relative' }"> | |||||
<van-loading v-show="loadingShow" size="50" color="#fff" vertical text-color="#fff">上传中...</van-loading> | <van-loading v-show="loadingShow" size="50" color="#fff" vertical text-color="#fff">上传中...</van-loading> | ||||
<!-- 切图组件 --> | <!-- 切图组件 --> | ||||
<!-- :outputSize="option.outputSize" --> | |||||
<vueCropper | <vueCropper | ||||
style="background-image: none" | |||||
:style="{ backgroundImage: 'none', height: '92vh' }" | |||||
ref="cropper" | ref="cropper" | ||||
:img="option.img" | :img="option.img" | ||||
:outputSize="option.outputSize" | :outputSize="option.outputSize" | ||||
@@ -38,7 +39,7 @@ | |||||
<div @click="onClickLeft">取消</div> | <div @click="onClickLeft">取消</div> | ||||
<div @click="onClickRight">确定</div> | <div @click="onClickRight">确定</div> | ||||
</div> --> | </div> --> | ||||
<van-nav-bar left-text="取消" right-text="确定" @click-left="onClickLeft" @click-right="onClickRight" /> | |||||
<van-nav-bar :style="{ height: '8vh', width: '100%', position: 'absolute' }" left-text="取消" right-text="确定" @click-left="onClickLeft" @click-right="onClickRight" /> | |||||
</div> | </div> | ||||
</van-popup> | </van-popup> | ||||
</div> | </div> | ||||
@@ -85,7 +86,7 @@ export default { | |||||
showCropper: false, // 裁剪的弹窗 | showCropper: false, // 裁剪的弹窗 | ||||
option: { | option: { | ||||
img: '', | img: '', | ||||
outputSize: 0.8, | |||||
outputSize: 0.01, //图片质量 | |||||
info: false, // 裁剪框的大小信息 | info: false, // 裁剪框的大小信息 | ||||
// outputType: 'jpeg', // 裁剪生成图片的格式 | // outputType: 'jpeg', // 裁剪生成图片的格式 | ||||
outputType: 'png', // 裁剪生成图片的格式 | outputType: 'png', // 裁剪生成图片的格式 | ||||
@@ -149,13 +150,18 @@ export default { | |||||
}, | }, | ||||
// 点击裁剪的选择 | // 点击裁剪的选择 | ||||
onClickRight() { | onClickRight() { | ||||
const timestamp = Date.now(); | |||||
let that = this; | let that = this; | ||||
this.loadingShow = true; | this.loadingShow = true; | ||||
console.log(this.$refs.cropper); | |||||
// console.log(this.$refs.cropper); | |||||
this.$refs.cropper.getCropData(data => { | |||||
// do something | |||||
// console.log(data, 'base64'); | |||||
}); | |||||
this.$refs.cropper.getCropBlob(async data => { | this.$refs.cropper.getCropBlob(async data => { | ||||
console.log(data, '图片数据'); | |||||
console.log(data, '上传图片数据'); | |||||
let formData = new FormData(); | let formData = new FormData(); | ||||
formData.append('file', data); | |||||
formData.append('file', data, timestamp + '.png'); | |||||
let file = formData.get('file'); | let file = formData.get('file'); | ||||
// 转为 base64 | // 转为 base64 | ||||
// let reader = new FileReader(); | // let reader = new FileReader(); | ||||
@@ -262,6 +268,14 @@ export default { | |||||
// .uploder{ | // .uploder{ | ||||
// overflow: hidden; | // overflow: hidden; | ||||
// } | // } | ||||
/deep/.van-nav-bar__content { | |||||
height: 8vh; | |||||
background-color: #ccc; | |||||
} | |||||
/deep/.van-hairline--bottom::after { | |||||
// height: 8vh; | |||||
} | |||||
/deep/.cropper-view-box { | /deep/.cropper-view-box { | ||||
outline: 2px dashed #fff !important; | outline: 2px dashed #fff !important; | ||||
} | } | ||||
@@ -1,6 +1,7 @@ | |||||
<template> | <template> | ||||
<div v-if="proportion" :class="inPage ? 'page active' : 'page'" id="pageBody" @touchstart="globalClick"> | |||||
<div class="content" :style="bgStyle" ref="fatherBox"> | |||||
<div ref="fatherBox1" v-if="proportion" :class="inPage ? 'page active' : 'page'" id="pageBody" @touchstart="globalClick"> | |||||
<div class="content" id="content" :style="bgStyle" ref="fatherBox"> | |||||
<!-- <img style="width: 100px; height: 100px" :src="newImg" alt="" /> --> | |||||
<!-- 控制框 --> | <!-- 控制框 --> | ||||
<!-- <div class="control"> | <!-- <div class="control"> | ||||
<div @click="controlImg(1)">放大</div> | <div @click="controlImg(1)">放大</div> | ||||
@@ -96,6 +97,7 @@ export default { | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
newImg: false, | |||||
inPage: false, | inPage: false, | ||||
dragging: false, | dragging: false, | ||||
proportionSon: null, | proportionSon: null, | ||||
@@ -133,6 +135,7 @@ export default { | |||||
methods: { | methods: { | ||||
...mapActions(['setCharacters']), | ...mapActions(['setCharacters']), | ||||
// 组件 | // 组件 | ||||
globalClick(e) { | globalClick(e) { | ||||
console.log(e.target.id); | console.log(e.target.id); | ||||
@@ -224,6 +227,7 @@ export default { | |||||
// 数字人的处理 | // 数字人的处理 | ||||
// 鼠标按下事件 | // 鼠标按下事件 | ||||
virtualTouchStart() { | virtualTouchStart() { | ||||
this.generateImage(); | |||||
this.domIndex = -2; | this.domIndex = -2; | ||||
this.isFcous = true; | this.isFcous = true; | ||||
this.dragging = true; | this.dragging = true; | ||||
@@ -28,3 +28,4 @@ new Vue({ | |||||
render: function (h) { return h(App) } | render: function (h) { return h(App) } | ||||
}).$mount('#app') | }).$mount('#app') | ||||
@@ -53,6 +53,10 @@ p { | |||||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||||
} | } | ||||
.van-toast { | |||||
// font-size: 12px !important; | |||||
width: 70% !important; | |||||
} | |||||
// 字体导入 | // 字体导入 | ||||
@font-face { | @font-face { | ||||
font-family: "ALi Regular"; | font-family: "ALi Regular"; | ||||
@@ -76,3 +80,12 @@ p { | |||||
font-family: "ALi Regular","Heiti", "Simsun", "Helvetica Neue", Helvetica, Arial, sans-serif; | font-family: "ALi Regular","Heiti", "Simsun", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||||
} | } | ||||
// @media screen and (max-width: 280px) { | |||||
// /* 根据实际情况修改字体大小和元素宽度 */ | |||||
// html { | |||||
// -webkit-text-size-adjust: none !important; | |||||
// font-size: 8px; | |||||
// } | |||||
// } | |||||
@@ -416,6 +416,7 @@ export default { | |||||
try { | try { | ||||
const res = await doRegisterByPhone(data); | const res = await doRegisterByPhone(data); | ||||
console.log(res); | console.log(res); | ||||
Toast.success('注册成功!'); | |||||
this.loginType = 1; | this.loginType = 1; | ||||
} catch (error) { | } catch (error) { | ||||
console.log(error, 'error'); | console.log(error, 'error'); | ||||
@@ -442,7 +442,8 @@ export default { | |||||
clickBottomTab(index) { | clickBottomTab(index) { | ||||
if (index == 1) { | if (index == 1) { | ||||
if (this.textareaContent == 0) { | if (this.textareaContent == 0) { | ||||
Toast.fail('输入文案后才可以选择声音哦~~'); | |||||
// Toast.fail('输入文案后才可以选择声音哦~~'); | |||||
Toast('输入文案后才可以选择声音哦~~'); | |||||
return; | return; | ||||
} | } | ||||
this.showSoundList2 = false; | this.showSoundList2 = false; | ||||
@@ -577,12 +578,14 @@ export default { | |||||
forbidClick: true | forbidClick: true | ||||
}); | }); | ||||
if (!this.textareaContent) { | if (!this.textareaContent) { | ||||
Toast.fail('请输入文案内容!'); | |||||
// Toast.fail('请输入文案内容!'); | |||||
Toast('请输入文案内容!'); | |||||
return; | return; | ||||
} | } | ||||
// 当没有选择声音参数时 | // 当没有选择声音参数时 | ||||
if (!this.soundChoose.id) { | if (!this.soundChoose.id) { | ||||
Toast.fail('请选择声音!'); | |||||
// Toast.fail('请选择声音!'); | |||||
Toast('请选择声音!'); | |||||
return; | return; | ||||
} | } | ||||
// 当没有选择声音参数时 | // 当没有选择声音参数时 | ||||
@@ -26,7 +26,7 @@ | |||||
<!-- 具体内容 --> | <!-- 具体内容 --> | ||||
<div v-show="!showLoading"> | <div v-show="!showLoading"> | ||||
<!-- 列表样式--大图 --> | <!-- 列表样式--大图 --> | ||||
<div v-if="videoList.length == 0">暂无数据</div> | |||||
<div v-if="videoList.length == 0" style="height: 550px">暂无数据</div> | |||||
<!-- 新 修改v-if--> | <!-- 新 修改v-if--> | ||||
<div v-if="waterfallBug"> | <div v-if="waterfallBug"> | ||||
<waterfall v-if="videoList.length != 0" v-show="listActive == 1" class="waterFall" :col="2" :data="videoList"> | <waterfall v-if="videoList.length != 0" v-show="listActive == 1" class="waterFall" :col="2" :data="videoList"> | ||||
@@ -104,7 +104,8 @@ | |||||
<!-- 创建新作品 --> | <!-- 创建新作品 --> | ||||
<!-- <div class="goAdd" @click="checkInviteCode">+ 创作新作品</div> --> | <!-- <div class="goAdd" @click="checkInviteCode">+ 创作新作品</div> --> | ||||
<div class="goNewAdd" @click="checkInviteCode"> | <div class="goNewAdd" @click="checkInviteCode"> | ||||
<i class="el-icon-plus"></i> | |||||
<img src="../../assets/icon/icon-plus.png" alt="" /> | |||||
<!-- <i class="el-icon-plus"></i> --> | |||||
</div> | </div> | ||||
<div class="messageCover" :class="isShowMessageCover ? 'active' : ''" @click="exitCover"> | <div class="messageCover" :class="isShowMessageCover ? 'active' : ''" @click="exitCover"> | ||||
@@ -210,7 +211,7 @@ export default { | |||||
if (seconds) { | if (seconds) { | ||||
return formatSeconds(seconds); | return formatSeconds(seconds); | ||||
} else { | } else { | ||||
return '无'; | |||||
return '暂未获取'; | |||||
} | } | ||||
}, | }, | ||||
@@ -219,7 +220,7 @@ export default { | |||||
if (bytes) { | if (bytes) { | ||||
return bytesToSize(bytes); | return bytesToSize(bytes); | ||||
} else { | } else { | ||||
return '无'; | |||||
return '暂未获取'; | |||||
} | } | ||||
}, | }, | ||||
@@ -361,6 +362,10 @@ export default { | |||||
mounted() { | mounted() { | ||||
this.inPage = true; | this.inPage = true; | ||||
scrollToID('top'); | scrollToID('top'); | ||||
console.log(process.env.NODE_ENV); | |||||
console.log(process.env.VUE_APP_ENV); | |||||
console.log(process.env.VUE_APP_API_ROOT); | |||||
}, | }, | ||||
async created() { | async created() { | ||||
@@ -383,6 +388,7 @@ export default { | |||||
} | } | ||||
.page { | .page { | ||||
// transform: translateX(30%); | // transform: translateX(30%); | ||||
min-height: 100vh; | |||||
opacity: 0; | opacity: 0; | ||||
transition: all 0.5s; // global-transition | transition: all 0.5s; // global-transition | ||||
padding-bottom: 25px; | padding-bottom: 25px; | ||||
@@ -590,12 +596,19 @@ export default { | |||||
width: 60px; | width: 60px; | ||||
height: 60px; | height: 60px; | ||||
border-radius: 50%; | border-radius: 50%; | ||||
font-size: 40px; | |||||
line-height: 60px; | |||||
text-align: center; | |||||
// font-size: 40px; | |||||
// line-height: 60px; | |||||
// text-align: center; | |||||
color: #ffffff; | color: #ffffff; | ||||
background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%); | background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%); | ||||
box-shadow: 0px 2px 6px 0px rgba(114, 100, 245, 0.25); | box-shadow: 0px 2px 6px 0px rgba(114, 100, 245, 0.25); | ||||
display: flex; | |||||
justify-content: space-around; | |||||
align-items: center; | |||||
img { | |||||
width: 60%; | |||||
height: 60%; | |||||
} | |||||
} | } | ||||
.messageCover { | .messageCover { | ||||
position: fixed; | position: fixed; | ||||
@@ -1,6 +1,7 @@ | |||||
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | // const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | ||||
const path = require('path'); | const path = require('path'); | ||||
let externals = {} | let externals = {} | ||||
let cdn = { css: [], js: [] } | let cdn = { css: [], js: [] } | ||||
const isProduction = process.env.VUE_APP_ENV == 'production' // 判断是否是生产环境 | const isProduction = process.env.VUE_APP_ENV == 'production' // 判断是否是生产环境 | ||||
@@ -27,15 +28,15 @@ if (isProduction) { | |||||
} | } | ||||
} | } | ||||
module.exports = { | module.exports = { | ||||
configureWebpack: { | |||||
configureWebpack: { | |||||
resolve: { | resolve: { | ||||
alias: { | alias: { | ||||
'@': path.resolve(__dirname, 'src') | '@': path.resolve(__dirname, 'src') | ||||
} | } | ||||
}, | }, | ||||
externals | |||||
externals, | |||||
}, | }, | ||||
css: { | css: { | ||||
loaderOptions: { | loaderOptions: { | ||||
@@ -316,13 +316,13 @@ | |||||
resolved "https://registry.npmmirror.com/@tufjs/canonical-json/-/canonical-json-1.0.0.tgz#eade9fd1f537993bc1f0949f3aea276ecc4fab31" | resolved "https://registry.npmmirror.com/@tufjs/canonical-json/-/canonical-json-1.0.0.tgz#eade9fd1f537993bc1f0949f3aea276ecc4fab31" | ||||
integrity sha512-QTnf++uxunWvG2z3UFNzAoQPHxnSXOwtaI3iJ+AohhV+5vONuArPjJE7aPXPVXfXJsqrVbZBu9b81AJoSd09IQ== | integrity sha512-QTnf++uxunWvG2z3UFNzAoQPHxnSXOwtaI3iJ+AohhV+5vONuArPjJE7aPXPVXfXJsqrVbZBu9b81AJoSd09IQ== | ||||
"@tufjs/models@1.0.2": | |||||
version "1.0.2" | |||||
resolved "https://registry.npmmirror.com/@tufjs/models/-/models-1.0.2.tgz#6c1e99210ada62c057b1742b5528d85acbfe0a47" | |||||
integrity sha512-uxarDtxTIK3f8hJS4yFhW/lvTa3tsiQU5iDCRut+NCnOXvNtEul0Ct58NIIcIx9Rkt7OFEK31Ndpqsd663nsew== | |||||
"@tufjs/models@1.0.3": | |||||
version "1.0.3" | |||||
resolved "https://registry.npmmirror.com/@tufjs/models/-/models-1.0.3.tgz#e6cb8a86834da7459a7c836cd892dee56b4bab44" | |||||
integrity sha512-mkFEqqRisi13DmR5pX4x+Zk97EiU8djTtpNW1GeuX410y/raAsq/T3ZCjwoRIZ8/cIBfW0olK/sywlAiWevDVw== | |||||
dependencies: | dependencies: | ||||
"@tufjs/canonical-json" "1.0.0" | "@tufjs/canonical-json" "1.0.0" | ||||
minimatch "^8.0.3" | |||||
minimatch "^7.4.6" | |||||
"@types/body-parser@*": | "@types/body-parser@*": | ||||
version "1.19.2" | version "1.19.2" | ||||
@@ -3239,7 +3239,7 @@ file-loader@^4.2.0: | |||||
file-saver@^2.0.5: | file-saver@^2.0.5: | ||||
version "2.0.5" | version "2.0.5" | ||||
resolved "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38" | |||||
resolved "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz" | |||||
integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA== | integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA== | ||||
file-uri-to-path@1.0.0: | file-uri-to-path@1.0.0: | ||||
@@ -5179,9 +5179,9 @@ lru-cache@^7.4.4, lru-cache@^7.5.1, lru-cache@^7.7.1: | |||||
integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA== | integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA== | ||||
lru-cache@^9.0.0: | lru-cache@^9.0.0: | ||||
version "9.0.3" | |||||
resolved "https://registry.npmmirror.com/lru-cache/-/lru-cache-9.0.3.tgz#8a04f282df5320227bb7215c55df2660d3e4e25b" | |||||
integrity sha512-cyjNRew29d4kbgnz1sjDqxg7qg8NW4s+HQzCGjeon7DV5T2yDije16W9HaUFV1dhVEMh+SjrOcK0TomBmf3Egg== | |||||
version "9.1.1" | |||||
resolved "https://registry.npmmirror.com/lru-cache/-/lru-cache-9.1.1.tgz#c58a93de58630b688de39ad04ef02ef26f1902f1" | |||||
integrity sha512-65/Jky17UwSb0BuB9V+MyDpsOtXKmYwzhyl+cOa9XUiI4uV2Ouy/2voFP3+al0BjZbJgMBD8FojMpAf+Z+qn4A== | |||||
make-dir@^2.0.0: | make-dir@^2.0.0: | ||||
version "2.1.0" | version "2.1.0" | ||||
@@ -5468,14 +5468,14 @@ minimatch@^6.1.6, minimatch@^6.2.0: | |||||
dependencies: | dependencies: | ||||
brace-expansion "^2.0.1" | brace-expansion "^2.0.1" | ||||
minimatch@^7.4.2: | |||||
minimatch@^7.4.2, minimatch@^7.4.6: | |||||
version "7.4.6" | version "7.4.6" | ||||
resolved "https://registry.npmmirror.com/minimatch/-/minimatch-7.4.6.tgz#845d6f254d8f4a5e4fd6baf44d5f10c8448365fb" | resolved "https://registry.npmmirror.com/minimatch/-/minimatch-7.4.6.tgz#845d6f254d8f4a5e4fd6baf44d5f10c8448365fb" | ||||
integrity sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw== | integrity sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw== | ||||
dependencies: | dependencies: | ||||
brace-expansion "^2.0.1" | brace-expansion "^2.0.1" | ||||
minimatch@^8.0.2, minimatch@^8.0.3: | |||||
minimatch@^8.0.2: | |||||
version "8.0.4" | version "8.0.4" | ||||
resolved "https://registry.npmmirror.com/minimatch/-/minimatch-8.0.4.tgz#847c1b25c014d4e9a7f68aaf63dedd668a626229" | resolved "https://registry.npmmirror.com/minimatch/-/minimatch-8.0.4.tgz#847c1b25c014d4e9a7f68aaf63dedd668a626229" | ||||
integrity sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA== | integrity sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA== | ||||
@@ -5694,10 +5694,10 @@ nan@^2.12.1, nan@^2.13.2: | |||||
resolved "https://registry.npmmirror.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb" | resolved "https://registry.npmmirror.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb" | ||||
integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ== | integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ== | ||||
nanoid@^3.3.4: | |||||
version "3.3.4" | |||||
resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz" | |||||
integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== | |||||
nanoid@^3.3.6: | |||||
version "3.3.6" | |||||
resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.6.tgz" | |||||
integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== | |||||
nanomatch@^1.2.9: | nanomatch@^1.2.9: | ||||
version "1.2.13" | version "1.2.13" | ||||
@@ -6970,11 +6970,11 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.27, postcss@^7.0.3 | |||||
source-map "^0.6.1" | source-map "^0.6.1" | ||||
postcss@^8.4.14: | postcss@^8.4.14: | ||||
version "8.4.21" | |||||
resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.21.tgz" | |||||
integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg== | |||||
version "8.4.23" | |||||
resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.23.tgz" | |||||
integrity sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA== | |||||
dependencies: | dependencies: | ||||
nanoid "^3.3.4" | |||||
nanoid "^3.3.6" | |||||
picocolors "^1.0.0" | picocolors "^1.0.0" | ||||
source-map-js "^1.0.2" | source-map-js "^1.0.2" | ||||
@@ -7775,13 +7775,13 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.7: | |||||
integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ== | integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ== | ||||
sigstore@^1.0.0: | sigstore@^1.0.0: | ||||
version "1.2.0" | |||||
resolved "https://registry.npmmirror.com/sigstore/-/sigstore-1.2.0.tgz#ae5b31dac75c2d31e7873897e2862f0d0b205bce" | |||||
integrity sha512-Fr9+W1nkBSIZCkJQR7jDn/zI0UXNsVpp+7mDQkCnZOIxG9p6yNXBx9xntHsfUyYHE55XDkkVV3+rYbrkzAeesA== | |||||
version "1.3.2" | |||||
resolved "https://registry.npmmirror.com/sigstore/-/sigstore-1.3.2.tgz#2f70ec3e1192911484d9d148ecd9c98345cd172d" | |||||
integrity sha512-0KT1DjpVB11FK15ep7BIsZQV6j1jBm4SnXIInbBCRvql6II39IKONOMO+j036sGsArU/+2xqa1NDJwJkic0neA== | |||||
dependencies: | dependencies: | ||||
"@sigstore/protobuf-specs" "^0.1.0" | "@sigstore/protobuf-specs" "^0.1.0" | ||||
make-fetch-happen "^11.0.1" | make-fetch-happen "^11.0.1" | ||||
tuf-js "^1.0.0" | |||||
tuf-js "^1.1.3" | |||||
simple-swizzle@^0.2.2: | simple-swizzle@^0.2.2: | ||||
version "0.2.2" | version "0.2.2" | ||||
@@ -8520,12 +8520,12 @@ tty-browserify@0.0.0: | |||||
resolved "https://registry.npmmirror.com/tty-browserify/-/tty-browserify-0.0.0.tgz" | resolved "https://registry.npmmirror.com/tty-browserify/-/tty-browserify-0.0.0.tgz" | ||||
integrity sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw== | integrity sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw== | ||||
tuf-js@^1.0.0: | |||||
version "1.1.3" | |||||
resolved "https://registry.npmmirror.com/tuf-js/-/tuf-js-1.1.3.tgz#db3aada70fbf91fd9def9ad255645eaf81309f69" | |||||
integrity sha512-jGYi5nG/kqgfTFQSdoN6PW9eIn+XRZqdXku+fSwNk6UpWIsWaV7pzAqPgFr85edOPhoyJDyBqCS+DCnHroMvrw== | |||||
tuf-js@^1.1.3: | |||||
version "1.1.4" | |||||
resolved "https://registry.npmmirror.com/tuf-js/-/tuf-js-1.1.4.tgz#e85a936b16859c7fae23e5f040bc0f7b559b3192" | |||||
integrity sha512-Lw2JRM3HTYhEtQJM2Th3aNCPbnXirtWMl065BawwmM2pX6XStH/ZO9e8T2hh0zk/HUa+1i6j+Lv6eDitKTau6A== | |||||
dependencies: | dependencies: | ||||
"@tufjs/models" "1.0.2" | |||||
"@tufjs/models" "1.0.3" | |||||
make-fetch-happen "^11.0.1" | make-fetch-happen "^11.0.1" | ||||
tunnel-agent@^0.6.0: | tunnel-agent@^0.6.0: | ||||