111 lines
2.8 KiB
Python
111 lines
2.8 KiB
Python
<template>
|
||
<view class="u-demo">
|
||
<view class="u-demo-wrap">
|
||
<view class="u-demo-title">演示效果</view>
|
||
<view class="u-demo-area">
|
||
<u-toast ref="uToast"></u-toast>
|
||
<view class="u-avatar-wrap">
|
||
<image @tap="preAvatar" class="u-avatar-demo" v-if="avatar" :src="avatar" mode="aspectFill"></image>
|
||
</view>
|
||
<u-button @click="chooseAvatar">选择图片</u-button>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="u-config-wrap">
|
||
<view class="u-config-title u-border-bottom">
|
||
参数配置
|
||
</view>
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">生成图片质量</view>
|
||
<u-subsection vibrateShort :current="1" :list="['0.3', '0.7', '1']" @change="qualityChange"></u-subsection>
|
||
</view>
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">自定义参数</view>
|
||
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
avatar: 'https://cdn.uviewui.com/uview/common/logo.png',
|
||
}
|
||
},
|
||
created() {
|
||
uni.$on('uAvatarCropper', path => {
|
||
this.avatar = path;
|
||
// 可以在此上传到服务端
|
||
// uni.uploadFile({
|
||
// url: 'http://192.168.100.17/index.php/index/index/upload',
|
||
// filePath: path,
|
||
// name: 'file',
|
||
// complete: (res) => {
|
||
// console.log(res);
|
||
// }
|
||
// });
|
||
})
|
||
},
|
||
methods: {
|
||
chooseAvatar() {
|
||
this.$u.route({
|
||
url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
|
||
params: {
|
||
// 输出图片宽度，高等于宽，单位px
|
||
destWidth: 300,
|
||
// 裁剪框宽度，高等于宽，单位px
|
||
rectWidth: 200,
|
||
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
|
||
fileType: 'jpg',
|
||
}
|
||
})
|
||
},
|
||
qualityChange(index) {
|
||
this.quality = index == 0 ? 0.3 : index == 1 ? 0.7 : 1;
|
||
},
|
||
styleChange(index) {
|
||
if (index == 0) {
|
||
this.rectHeight = this.rectWidth = this.destHeight = this.destWidth = 200;
|
||
this.boundStyle = {
|
||
lineWidth: 8,
|
||
borderColor: this.$u.color['error'],
|
||
mask: 'rgba(0, 0, 0, 0.8)'
|
||
}
|
||
} else {
|
||
this.rectHeight = this.rectWidth = this.destHeight = this.destWidth = 400;
|
||
this.boundStyle = {
|
||
lineWidth: 4,
|
||
borderColor: 'rgb(245, 245, 245)',
|
||
mask: 'rgba(0, 0, 0, 0.35)'
|
||
}
|
||
}
|
||
},
|
||
// 预览图片
|
||
preAvatar() {
|
||
wx.previewImage({
|
||
current: '', // 当前显示图片的 http 链接
|
||
urls: [this.avatar] // 需要预览的图片 http 链接列表
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.wrap {
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.u-avatar-wrap {
|
||
overflow: hidden;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.u-avatar-demo {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
border-radius: 100rpx;
|
||
}
|
||
</style>
|