@@ -5,6 +5,7 @@ | |||
<meta charset="utf-8"> | |||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> | |||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.13.2/skins/default/aliplayer-min.css"> | |||
<script src="http://g.alicdn.com/de/prismplayer/{version}/aliplayer-h5-min.js"></script> | |||
@@ -16,9 +16,9 @@ export function getModeList(sex) { | |||
* @param {number} sex | |||
* @returns data | |||
*/ | |||
export function getModeList1(sex) { | |||
export function getModeList1(sex,pageNum,pageSize) { | |||
return request({ | |||
url: `/api/personPatch/list?sex=${sex}&pageNum=1&pageSize=10`, | |||
url: `/api/personPatch/list?sex=${sex}&pageNum=${pageNum}&pageSize=${pageSize}`, | |||
method: 'get' | |||
}) | |||
} | |||
@@ -14,12 +14,14 @@ | |||
</div> | |||
<div class="uploadava"> | |||
<van-popup | |||
get-container="#app" | |||
class="vanPopup" | |||
duration="0" | |||
v-model="showCropper" | |||
position="top" | |||
:style="{ height: '100%' }" | |||
> | |||
<div class="cropper-container"> | |||
<div class="cropper-container" :style="{ height: '94vh' }"> | |||
<van-loading | |||
v-show="loadingShow" | |||
size="50" | |||
@@ -67,6 +69,7 @@ import { Toast } from 'vant' | |||
import { VueCropper } from 'vue-cropper' | |||
import { saveImgApi } from '../api/editModel' | |||
import { watch } from 'vue' | |||
export default { | |||
name: 'uploadAva', | |||
components: { | |||
@@ -92,6 +95,7 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
aaa: null, | |||
ImgUrl: '', | |||
show: true, // 上传类型的弹窗 | |||
imageFileName: '', | |||
@@ -107,8 +111,8 @@ export default { | |||
autoCropHeight: window.innerWidth - 100 + 'px', // 默认生成截图框高度 | |||
high: true, // 是否按照设备的dpr 输出等比例图片 | |||
fixedBox: false, // 固定截图框大小 不允许改变 | |||
fixed: true, // 是否开启截图框宽高固定比例 | |||
fixedNumber: [1, 1], // 截图框的宽高比例 | |||
fixed: false, // 是否开启截图框宽高固定比例 | |||
// fixedNumber: [1, 1], // 截图框的宽高比例 | |||
full: true, // 是否输出原图比例的截图 | |||
canMoveBox: true, // 截图框能否拖动 | |||
original: false, // 上传图片按照原始比例渲染 | |||
@@ -119,6 +123,20 @@ export default { | |||
loadingShow: false // 是否展示loading | |||
} | |||
}, | |||
created() { | |||
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) | |||
@@ -235,6 +253,9 @@ export default { | |||
</script> | |||
<style lang="scss" scoped> | |||
// /deep/.cropper-container { | |||
// z-index: 2005 !important; | |||
// } | |||
// .uploder{ | |||
// overflow: hidden; | |||
// } | |||
@@ -244,6 +265,7 @@ export default { | |||
/deep/.crop-point { | |||
background-color: auto !important; | |||
} | |||
/deep/.van-loading { | |||
position: absolute; | |||
// color: red; | |||
@@ -258,6 +280,8 @@ export default { | |||
} | |||
.uploadava { | |||
// width: 100vw; | |||
// height: 100vh; | |||
.update-avatar { | |||
height: 100%; | |||
text-align: center; | |||
@@ -284,11 +308,12 @@ export default { | |||
} | |||
} | |||
.cropper-container { | |||
height: 94vh; | |||
// height: 94vh; | |||
height: 100%; | |||
.van-nav-bar { | |||
background-color: rgba(0, 0, 0, 0.87); | |||
:global(.van-nav-bar__text) { | |||
color: #fff; | |||
color: #000; | |||
// font-size: $font-size-normal-x; | |||
} | |||
:global(.van-nav-bar__text:nth-child(2)) { | |||
@@ -13,8 +13,6 @@ import 'element-ui/lib/theme-chalk/index.css';//引入css | |||
import "@/styles/reset.scss"; // 引入清除默认样式 | |||
import "@/styles/index.scss"; // 引入全局样式 | |||
import waterfall from 'vue-waterfall2' | |||
Vue.use(waterfall)// 瀑布流插件 | |||
@@ -37,6 +37,13 @@ | |||
</waterfall> | |||
</div> | |||
<div class="blank" v-if="modeList.length <= 2"></div> | |||
<!-- 分页 --> | |||
<van-pagination | |||
v-model="currentPage" | |||
:total-items="total" | |||
:items-per-page="10" | |||
@change="pageChange" | |||
/> | |||
</div> | |||
</template> | |||
@@ -66,7 +73,10 @@ export default { | |||
currentId: '', | |||
modeList: [], // 模板列表 | |||
tabList: ['全部', '男性', '女性'], | |||
showModeList: true | |||
showModeList: true, | |||
currentPage: 1, //当前页码 | |||
pageSize: 10, | |||
total: '' | |||
} | |||
}, | |||
computed: { | |||
@@ -79,8 +89,10 @@ export default { | |||
...mapActions(['setCharacters']), | |||
//点击tab栏选择模板列表 | |||
chooseType1(name, title) { | |||
this.currentPage = 1 | |||
this.type = this.tabList.findIndex((item) => item == title) | |||
this.loadModeList(this.type) | |||
this.loadModeList(this.type, this.currentPage, this.pageSize) | |||
}, | |||
globalWatcher(e) { | |||
console.log(e, 'e') | |||
@@ -104,13 +116,14 @@ export default { | |||
}, | |||
// 获取模板列表 | |||
async loadModeList(sex) { | |||
async loadModeList(sex, pageNum, pageSize) { | |||
try { | |||
sex = sex == 0 ? '' : sex | |||
// const res = await getModeList(sex) | |||
this.showModeList = false | |||
const res = await getModeList1(sex) | |||
const res = await getModeList1(sex, pageNum, pageSize) | |||
this.showModeList = true | |||
this.total = res.data.total | |||
console.log(res, '获取模板列表') | |||
this.modeList = res.data.list | |||
} catch (error) { | |||
@@ -160,7 +173,10 @@ export default { | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
// 更改页码 | |||
pageChange() { | |||
this.loadModeList(this.type, this.currentPage, this.pageSize) | |||
}, | |||
/** | |||
* @description:根据模板详情跳转至选择文案 | |||
* @param {type}modelDetail | |||
@@ -183,7 +199,7 @@ export default { | |||
scrollToID('top') | |||
}, | |||
created() { | |||
this.loadModeList(2) | |||
this.loadModeList(this.type, this.currentPage, this.pageSize) | |||
} | |||
} | |||
</script> | |||
@@ -404,6 +404,17 @@ | |||
<!-- 试听的mp3 --> | |||
<audio autoplay :src="audioUrl"></audio> | |||
<!-- 切图 --> | |||
<!-- <CutImg | |||
ref="CutImgBg" | |||
id="CutImgBg" | |||
@getMyBGIListApi="getMyBGIListApi" | |||
class="CutImg" | |||
:type="4" | |||
:videoType="videoType" | |||
></CutImg> --> | |||
</div> | |||
</template> | |||
@@ -506,6 +517,14 @@ export default { | |||
methods: { | |||
...mapActions(['setCharacters']), | |||
// aaa() { | |||
// console.log('aaa') | |||
// this.$nextTick(() => { | |||
// // document.getDetailById | |||
// // this.$refs.CutImgBg.$refs.uploader.clickUpload() | |||
// this.$refs.CutImgBg.$refs.uploader.beforeRead() | |||
// }) | |||
// }, | |||
// 点击底部tab栏 | |||
clickBottomTab(index) { | |||
if (index == 1) { | |||
@@ -398,7 +398,7 @@ export default { | |||
this.total = res.data.total | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
// Toast.fail(error.message) | |||
} | |||
}, | |||
@@ -767,7 +767,8 @@ export default { | |||
// 瀑布流 | |||
.waterFall { | |||
width: 350px; | |||
// width: 350px; | |||
width: 100%; | |||
::v-deep .vue-waterfall-column { | |||
width: 50% !important; | |||
@@ -152,12 +152,32 @@ export default { | |||
if (window.navigator.msSaveOrOpenBlob) { | |||
navigator.msSaveBlob(blob, fileName) | |||
} else { | |||
let link = document.createElement('a') | |||
// link.href = blobFile | |||
link.href = window.URL.createObjectURL(blob) | |||
link.download = fileName | |||
link.click() | |||
window.URL.revokeObjectURL(link.href) //释放内存 | |||
const reader = new FileReader() | |||
reader.readAsDataURL(blob) | |||
reader.onloadend = function () { | |||
const base64Data = reader.result | |||
const link = document.createElement('a') | |||
link.href = base64Data | |||
link.download = fileName | |||
document.body.appendChild(link) | |||
link.click() | |||
document.body.removeChild(link) | |||
} | |||
// const dataUrl = 'data:application/octet-stream;base64,' + blobFile | |||
// const a = document.createElement('a') | |||
// a.style.display = 'none' | |||
// a.href = dataUrl | |||
// a.download = fileName | |||
// document.body.appendChild(a) | |||
// a.click() | |||
// window.URL.revokeObjectURL(dataUrl) | |||
// document.body.removeChild(a) | |||
// let link = document.createElement('a') | |||
// // link.href = blobFile | |||
// link.href = window.URL.createObjectURL(blob) | |||
// link.download = fileName | |||
// link.click() | |||
// window.URL.revokeObjectURL(link.href) //释放内存 | |||
} | |||
}, | |||
// 获取视频信息 | |||