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