mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-16 07:36: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 PrivacyPolicy = () => import('@/views/ebiz/my/PrivacyPolicy')
|
||||
const UserWxHead = () => import('@/views/ebiz/my/UserWxHead')
|
||||
const UserWxHead2 = () => import('@/views/ebiz/my/UserWxHead2')
|
||||
|
||||
export default [
|
||||
{
|
||||
path: '/my/userCenter',
|
||||
@@ -61,5 +63,15 @@ export default [
|
||||
title: '头像合成',
|
||||
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