mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-21 05:26:44 +08:00
开门红：微信头像生成 --提交人：阳华祥
This commit is contained in:
yang.huaxiang
@@ -5,6 +5,8 @@ const userInfo = () => import('@/views/ebiz/my/UserInfo')
|
|||||||
const userIncome = () => import('@/views/ebiz/my/UserIncome')
|
const userIncome = () => import('@/views/ebiz/my/UserIncome')
|
||||||
const PrivacyPolicy = () => import('@/views/ebiz/my/PrivacyPolicy')
|
const PrivacyPolicy = () => import('@/views/ebiz/my/PrivacyPolicy')
|
||||||
const UserWxHead = () => import('@/views/ebiz/my/UserWxHead')
|
const UserWxHead = () => import('@/views/ebiz/my/UserWxHead')
|
||||||
|
const UserWxHead2 = () => import('@/views/ebiz/my/UserWxHead2')
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
path: '/my/userCenter',
|
path: '/my/userCenter',
|
||||||
@@ -61,5 +63,15 @@ export default [
|
|||||||
title: '头像合成',
|
title: '头像合成',
|
||||||
index: 1
|
index: 1
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
//隐私政策
|
||||||
|
path: '/my/userWxHead2',
|
||||||
|
name: 'UserWxHead2',
|
||||||
|
component: UserWxHead2,
|
||||||
|
meta: {
|
||||||
|
title: '头像合成',
|
||||||
|
index: 1
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
194
src/views/ebiz/my/UserWxHead2.vue
Normal file
194
src/views/ebiz/my/UserWxHead2.vue
Normal file
@@ -0,0 +1,194 @@
|
|||||||
|
<template>
|
||||||
|
<div class="back-container">
|
||||||
|
<van-image fit="fill" class="back_class bg-white" :src="showImgInfo.defaultImg" v-if="showImgInfo.showFlag == '0'">
|
||||||
|
<template v-slot:loading>
|
||||||
|
<van-loading type="spinner" size="20" />
|
||||||
|
</template>
|
||||||
|
<template v-slot:error>加载失败</template>
|
||||||
|
</van-image>
|
||||||
|
|
||||||
|
<van-image fit="fill" class="back_class" :src="showImgInfo.defaultBackImg" v-if="showImgInfo.showFlag == '1'">
|
||||||
|
<template v-slot:loading>
|
||||||
|
<van-loading type="spinner" size="40" />
|
||||||
|
</template>
|
||||||
|
<template v-slot:error>加载失败</template>
|
||||||
|
</van-image>
|
||||||
|
|
||||||
|
<van-image fit="fill" class="back_class" :src="showImgInfo.composeImg" v-if="showImgInfo.showFlag == '2'">
|
||||||
|
<template v-slot:loading>
|
||||||
|
<van-loading type="spinner" size="20" />
|
||||||
|
</template>
|
||||||
|
<template v-slot:error>加载失败</template>
|
||||||
|
</van-image>
|
||||||
|
|
||||||
|
<div class="flex justify-content-c bottom-btn">
|
||||||
|
<van-button
|
||||||
|
:disabled="downLoadFlag"
|
||||||
|
class="bottom50 left0"
|
||||||
|
style="width: 40%;border-radius: 6px;"
|
||||||
|
square
|
||||||
|
round
|
||||||
|
type="danger"
|
||||||
|
size="normal"
|
||||||
|
@click="downLoadImages"
|
||||||
|
v-no-more-click="1000"
|
||||||
|
>
|
||||||
|
保存图片
|
||||||
|
</van-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Image as VanImage, Lazyload, Grid, GridItem } from 'vant'
|
||||||
|
import { createWXHeadImg, getWXHeadImgConfig } from '@/api/ebiz/my/my.js'
|
||||||
|
import config from '@/config'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
[VanImage.name]: VanImage,
|
||||||
|
[Grid.name]: Grid,
|
||||||
|
[GridItem.name]: GridItem,
|
||||||
|
[Lazyload.name]: Lazyload
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showImgInfo: {
|
||||||
|
defaultImg: '', // 默认图片
|
||||||
|
defaultBackImg: '', // 默认背景框
|
||||||
|
composeImg: '', //合成图
|
||||||
|
showFlag: '0'
|
||||||
|
},
|
||||||
|
agentComposeLst: [],
|
||||||
|
cutConfig: {
|
||||||
|
width: 200,
|
||||||
|
height: 200,
|
||||||
|
size: 512
|
||||||
|
},
|
||||||
|
composeReqDTO: {
|
||||||
|
backPath: null,
|
||||||
|
headPath: null,
|
||||||
|
type: 'align'
|
||||||
|
},
|
||||||
|
downLoadUrl: '',
|
||||||
|
downLoadFlag: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
filters: {},
|
||||||
|
computed: {},
|
||||||
|
async created() {
|
||||||
|
this.$toast.loading({
|
||||||
|
message: '加载中...',
|
||||||
|
forbidClick: true,
|
||||||
|
loadingType: 'spinner'
|
||||||
|
})
|
||||||
|
setTimeout(() => {
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
EWebBridge.webCallAppInJs('webview_right_button', {
|
||||||
|
btns: [{ img: this.$assetsUrl + 'images/ebiz/more_check.png' }]
|
||||||
|
})
|
||||||
|
window.appCallBack = this.appCallBack //app回调
|
||||||
|
}, 1000)
|
||||||
|
await this.getWxHeadConfig()
|
||||||
|
this.$toast.clear()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
appCallBack(data) {
|
||||||
|
if (data.trigger == 'right_button_click') {
|
||||||
|
console.log('点击三点')
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
EWebBridge.webCallAppInJs('uploadImg', {
|
||||||
|
imgWidth: this.cutConfig.width,
|
||||||
|
imgHeight: this.cutConfig.height,
|
||||||
|
maxSize: this.cutConfig.size
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
console.log(res)
|
||||||
|
// 截取后图片
|
||||||
|
// this.src = config.imgDomain + '/returnImageStream?a=b.jpg&imgPath=' + encodeURIComponent(JSON.parse(res).path)
|
||||||
|
// this.path = JSON.parse(res).path
|
||||||
|
// this.base64 = 'data:image/jpg;base64' + JSON.parse(res).base64
|
||||||
|
this.composeReqDTO.headPath = JSON.parse(res).path
|
||||||
|
// 生成合成图
|
||||||
|
this.composeWxHeadConfig()
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
return
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
downLoadImages() {
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
EWebBridge.webCallAppInJs('download', {
|
||||||
|
name: new Date().valueOf() + '_wx_head.jpg',
|
||||||
|
url: this.downLoadUrl
|
||||||
|
}).then(() => {
|
||||||
|
console.log('下载完成')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
composeWxHeadConfig() {
|
||||||
|
this.downLoadFlag = true
|
||||||
|
//生成头像
|
||||||
|
createWXHeadImg(this.composeReqDTO).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
if (res.result == 0) {
|
||||||
|
// 合成图片
|
||||||
|
//this.showImgInfo.composeImg = config.imgDomain + '/returnImageStream?a=b.jpg&imgPath=' + encodeURIComponent(res.composePath)
|
||||||
|
this.showImgInfo.showFlag = '2'
|
||||||
|
this.showImgInfo.composeImg = res.httpPath
|
||||||
|
// 下载图片地址
|
||||||
|
this.downLoadUrl = config.imgDomain + '/returnDirectStream?imgPath=' + encodeURIComponent(res.composePath)
|
||||||
|
this.downLoadFlag = false
|
||||||
|
} else {
|
||||||
|
this.$toast(res.resultMessage)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
async getWxHeadConfig() {
|
||||||
|
this.downLoadFlag = true
|
||||||
|
let that = this
|
||||||
|
//获取微信头像生成配置
|
||||||
|
await getWXHeadImgConfig({}).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
if (res.result == 0) {
|
||||||
|
that.cutConfig = res.content.cutImgInfo
|
||||||
|
// 初始化背景图显示
|
||||||
|
if (res.content.composePathInfo && res.content.composePathInfo.length > 0) {
|
||||||
|
// that.showImgInfo.defaultBackImg = config.imgDomain + '/returnImageStream?a=b.jpg&imgPath=' + encodeURIComponent(res.content.composePathInfo[0])
|
||||||
|
// that.composeReqDTO.backPath = res.content.composePathInfo[0]
|
||||||
|
// that.downLoadUrl = config.imgDomain + '/returnDirectStream?imgPath=' + encodeURIComponent(res.content.composePathInfo[0])
|
||||||
|
|
||||||
|
that.showImgInfo.defaultBackImg = res.content.composePathInfo[0].httpPath
|
||||||
|
that.composeReqDTO.backPath = res.content.composePathInfo[0].aesPath
|
||||||
|
that.downLoadUrl = config.imgDomain + '/returnDirectStream?imgPath=' + encodeURIComponent(res.content.composePathInfo[0].aesPath)
|
||||||
|
this.downLoadFlag = false
|
||||||
|
} else {
|
||||||
|
// that.showImgInfo.defaultBackImg = config.imgDomain + '/returnImageStream?a=b.jpg&imgPath=' + encodeURIComponent(res.content.backImgInfo[0])
|
||||||
|
// that.composeReqDTO.backPath = res.content.backImgInfo[0]
|
||||||
|
that.showImgInfo.defaultBackImg = res.content.backImgInfo[0].httpPath
|
||||||
|
that.composeReqDTO.backPath = res.content.backImgInfo[0].aesPath
|
||||||
|
}
|
||||||
|
that.showImgInfo.showFlag = '1'
|
||||||
|
} else {
|
||||||
|
that.$toast(res.resultMessage)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/assets/sass/variables.scss';
|
||||||
|
|
||||||
|
.back-container {
|
||||||
|
height: 100vh;
|
||||||
|
background: #1a2634;
|
||||||
|
|
||||||
|
.back_class {
|
||||||
|
margin-top: 20vh;
|
||||||
|
width: 100vw;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user