u-avatar-cropper修改后
<template>
<view class="index">
<!-- {{userinfo}} -->
<view class="top">
<view class="bg">
<image src="../../static/electronic_card/bg.png"></image>
</view>
</view>
<view class="main">
<view class="card" ref="card">
<image src="../../static/card/bg.png" mode=""></image>
<view class="content">
<view class="">
<view class="logo">
<image src="../../static/card/logo.png" mode=""></image>
</view>
<view class="txt">
姓 名：{{userinfo.name}}
<br>
班 级：{{userinfo.class}}
<br>
联系方式：{{userinfo.phone}}
<br>
入学年份：{{userinfo.entrance_year}}
<br>
No：{{userinfo.code}}
</view>
</view>
<view class="img">
<view class="" v-if="userinfo.photo" class="photo" @click="chooseAvatar">
<image :src="userinfo.photo" mode="widthFix" style="width: 100%;"></image>
</view>
<view class="applyschool-onlod-phops" @click="chooseAvatar" v-else>
<view class="phops-img">
<image src="../../static/applyschool/add_photo.png"></image>
</view>
<!-- <text>用于生成入校电子卡</text> -->
</view>
</view>
</view>
</view>
</view>
<view class="downbtn" @click="exportCardAsImage">查看与保存卡片</view>
<u-modal v-model="show" @confirm="confirmChange" confirm-color="#781C27" :content="content"></u-modal>
</view>
</template>
<script>
import html2canvas from "html2canvas"
import utlis from '../../common/utils.js'
export default {
mixins: [utlis],
data() {
return {
userinfo: {},
show: false,
content: '未认证',
url: ""
}
},
onLoad() {
this.getUserInfo()
uni.$on('uAvatarCropper', path => {
this.avatar = path;
// 可以在此上传到服务端
uni.uploadFile({
url: this.$configs.$UP_URL,
filePath: path,
name: 'file',
complete: (res) => {
console.log("上传照片成功", JSON.parse(res.data).data.url);
this.url = JSON.parse(res.data).data.url
this.$http.post(this.$configs.api.updatePhoto, {
'photo': this.url
})
.then(res => {
this.getUserInfo()
})
}
});
})
},
onUnload() {
uni.$off('uAvatarCropper')
},
methods: {
exportCardAsImage() {
const cardElement = this.$refs.card.$el;
console.log(this.$refs.card);
html2canvas(cardElement).then((canvas) => {
const imageData = canvas.toDataURL('image/png');
console.log("图片", imageData);
this.pic(imageData)
});
},
pic(src) {
uni.previewImage({
urls: Array.isArray(src) ? src : [src],
current: '',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
});
},
chooseAvatar() {
//裁剪组件
this.$u.route({
url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
params: {
destWidth: 182,
destHeight: 230,
rectWidth: 182,
rectHeight: 230,
fileType: 'jpg',
}
})
},
//获取校友卡信息
async getUserInfo() {
let res = await this.$http.post(this.$configs.api.aluminget, {
'uid': this.uid
})
this.userinfo = res.data.data.info
if (res.data.code !== 200) {
uni.showModal({
title: '提示',
confirmColor: '#781C27',
showCancel: false,
content: res.data.message,
success: function(res) {
if (res.confirm) {
uni.navigateTo({
url: '../index/index'
})
}
}
});
}
if (!res.data.data.info.status) {
res.data.data.info.status = 0
}
let contnerArr = [
'您还未认证成为校友',
'审核通过',
'待审核',
'审核不通过'
];
if (res.data.data.info.status != 1) {
this.show = true;
this.content = contnerArr[res.data.data.info.status]
}
},
confirmChange() {
uni.navigateBack()
}
}
}
</script>
<style scoped lang="scss">
page {
background: #F9F9F9;
}
.index {
width: 100vw;
display: flex;
flex-direction: column;
// justify-content: center;
align-items: center;
}
.top {
width: 100vw;
.bg {
position: relative;
z-index: 1;
image {
height: 554rpx;
width: 100vw;
}
}
}
.applyschool-onlod-phops {
width: auto;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
float: left;
margin-top: -30rpx;
}
.main {
position: relative;
z-index: 2;
margin-top: -100rpx;
width: 716rpx;
height: 402rpx;
background: rgba(175, 0, 5, 0.78);
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
overflow: hidden;
// background: url("../../static/card/bg.png") repeat fixed center;
.card {
position: relative;
z-index: 1;
padding: 30rpx;
&>image {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 716rpx;
height: 402rpx;
}
.content {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
.logo {
image {
width: 296rpx;
height: 72rpx;
}
}
.txt {
line-height: 50rpx;
font-size: 24rpx;
color: #FFFFFF;
font-weight: 400;
}
.img {
display: flex;
// justify-content: center;
align-items: center;
margin-right: 88rpx;
image {
width: 182rpx;
height: 230rpx;
}
}
}
}
}
.downbtn {
margin: 0;
width: 690rpx;
height: 104rpx;
background: #AF0005;
border-radius: 72rpx 72rpx 72rpx 72rpx;
opacity: 1;
color: #FFFFFF;
font-weight: 500;
line-height: 104rpx;
text-align: center;
margin-top: 76rpx;
}
.photo {
width: 182rpx;
height: 230rpx;
background-color: #fff;
display: flex;
align-items: center;
}
</style>
使用
<view class="" class="photo" @click="chooseAvatar">
<image :src="userinfo.photo" mode="widthFix" style="width: 100%;"></image>
</view>
onLoad() {
uni.$on('uAvatarCropper', path => {
this.avatar = path;
// 可以在此上传到服务端
uni.uploadFile({
url: this.$configs.$UP_URL,
filePath: path,
name: 'file',
complete: (res) => {
console.log("上传照片成功", JSON.parse(res.data).data.url);
}
});
})
},
chooseAvatar() {
//裁剪组件
this.$u.route({
url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
params: {
destWidth: 182,
destHeight: 230,
rectWidth: 182,
rectHeight: 230,
fileType: 'jpg',
}
})
},