parent
e80be64426
commit
86d7ec8d70
@ -0,0 +1,688 @@ |
||||
<template> |
||||
<view class="user" :style="{'padding-bottom': current == 2?'0rpx':'130rpx'}"> |
||||
<view class="user-navbar"> |
||||
<u-navbar :title="title" back-icon-color="#333333" :immersive="true" :background="background"></u-navbar> |
||||
</view> |
||||
<view class="user-pic"> |
||||
<image mode="widthFix" src="@/static/pic.jpg"></image> |
||||
</view> |
||||
<view class="user-hd"> |
||||
<view class="a"> |
||||
<view class="title">李大花</view> |
||||
<view class="vip">VIP1</view> |
||||
<image class="sex" v-if="true" src="@/static/peiwan-nv.png"></image> |
||||
<image class="sex" v-else src="@/static/peiwan-nan.png"></image> |
||||
<view class="city"><image class="location" src="@/static/dingwei2.png"></image>江苏 · 南京</view> |
||||
</view> |
||||
<view class="b"> |
||||
<view class="tag">26岁</view> |
||||
<view class="tag">172cm</view> |
||||
<view class="tag">65kg</view> |
||||
<view class="tag">互联网测试</view> |
||||
</view> |
||||
<view class="c"> |
||||
#交友宣言，世间无敌，舍我其谁。霸气长存，风云变色。 |
||||
</view> |
||||
<view class="d" :class="isPlay?'d-on':''" @click="toToggle()"> |
||||
288″ |
||||
</view> |
||||
</view> |
||||
<view class="user-tab"> |
||||
<view class="tab"> |
||||
<u-tabs :list="list" bg-color="transparent" :is-scroll="false" active-color="#222222" inactive-color="#666666" font-size="30" :active-item-style="activeStyle" bar-height="10" bar-width="60" v-model="current" @change="changeTabs"></u-tabs> |
||||
</view> |
||||
</view> |
||||
<view class="user-bd" v-if="current == 0"> |
||||
<view class="xiangce"> |
||||
<view class="title">相册 |
||||
<view class="more" @click="openPage(7)">10张<image src="@/static/icon-arrow.png"></image></view> |
||||
</view> |
||||
<view class="list"> |
||||
<image v-for="i in 4" :key="i" src="@/static/pic.jpg"></image> |
||||
</view> |
||||
</view> |
||||
<view class="xiangce"> |
||||
<view class="title">认证状态 |
||||
</view> |
||||
<view class="list"> |
||||
<view class="tag">手机号认证</view> |
||||
<view class="tag">实名认证</view> |
||||
<view class="tag">真人认证</view> |
||||
</view> |
||||
</view> |
||||
<view class="xiangce"> |
||||
<view class="title">情感喜好 |
||||
</view> |
||||
<view class="qinggan"> |
||||
<view class="dd">情感状态：<text>单身</text></view> |
||||
<view class="dd">喜欢什么样的异性： |
||||
<view class="b"> |
||||
<view class="tag">颜值高</view> |
||||
<view class="tag">腿长</view> |
||||
<view class="tag">社牛</view> |
||||
<view class="tag">单纯</view> |
||||
<view class="tag">热情</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="xiangce"> |
||||
<view class="title">个人信息 |
||||
</view> |
||||
<view class="qinggan"> |
||||
<view class="li">年收入：<text>6-8w</text></view> |
||||
<view class="li">家乡：<text>江苏·南京</text></view> |
||||
<view class="li">学历：<text>本科</text></view> |
||||
<view class="li">星座：<text>处女座</text></view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="user-bd" v-if="current==1"> |
||||
<view class="yuewan"> |
||||
<view class="title">约玩项目 |
||||
<view class="location"> |
||||
<image src="@/static/dingwei.png"></image>距离1000.00km |
||||
</view> |
||||
</view> |
||||
<view class="list"> |
||||
<view class="item" :class="clickIndex == idx?'item-active':(idx <= 3?'item-on':'')" v-for="idx in 9" :key="idx"> |
||||
<view class="name">K歌</view> |
||||
<view class="price">158.00起</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="user-bd" v-if="current==2"> |
||||
<view class="dongtai"> |
||||
<view class="item" v-for="i in 10" :key="i" @click="openPage(5,1)"> |
||||
<view class="a"> |
||||
<view class="fl"> |
||||
<image src="@/static/nv.png"></image> |
||||
<view class="info"> |
||||
<view class="name">幽默的先生</view> |
||||
<view class="desc">2024-06-06 11:23</view> |
||||
</view> |
||||
</view> |
||||
<view class="fr"> |
||||
<image src="@/static/shenglue.png"></image> |
||||
</view> |
||||
</view> |
||||
<view class="b">今天天气真好啊！碧蓝的天空，绿油油的油菜花，空中飘香，远远的山脉看着忽远忽近。</view> |
||||
<view class="c"> |
||||
<image mode="aspectFill" src="@/static/1.png"></image> |
||||
<image mode="aspectFill" src="@/static/2.png"></image> |
||||
<image mode="aspectFill" src="@/static/3.png"></image> |
||||
</view> |
||||
<view class="d"> |
||||
<view class="fl"> |
||||
<view class="li"> |
||||
<image src="@/static/xiaoxi.png"></image>69 |
||||
</view> |
||||
<view class="li"> |
||||
<image src="@/static/dianzan.png"></image>896 |
||||
</view> |
||||
<view class="li" @click.stop="openPage(2)"> |
||||
<image src="@/static/fenxiang.png"></image>分享 |
||||
</view> |
||||
</view> |
||||
<view class="fr" @click.stop="openPage(3)">搭讪</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="user-fd"> |
||||
<view class="item" @click="openPage(1)">编辑资料</view> |
||||
</view> |
||||
<dashan :isDashan="isDashan" /> |
||||
<share :isShare="isShare" /> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
const systemInfoSync=uni.getSystemInfoSync(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
userInfo: {}, |
||||
clickIndex: 1, |
||||
isShare: false, |
||||
isCollect: false, |
||||
isDashan: false, |
||||
isPlay: false, |
||||
title: "", |
||||
isScroll: false, |
||||
background: { |
||||
// 导航栏背景图 |
||||
background: 'transparent', |
||||
}, |
||||
current: 0, |
||||
statusBarHeight: 0, |
||||
list:[{'name': '资料'},{'name': '陪玩'},{'name': '动态'}], |
||||
activeStyle: {'fontSize': '35rpx'} |
||||
}; |
||||
}, |
||||
onPageScroll(e) { |
||||
if(e.scrollTop<=10){ |
||||
this.background = { |
||||
// 导航栏背景图 |
||||
background: 'transparent', |
||||
} |
||||
this.title ="" |
||||
}else{ |
||||
const t = e.scrollTop>=44?1:(e.scrollTop/44).toFixed(2) |
||||
this.title="李大花个人资料" |
||||
this.background = { |
||||
// 导航栏背景图 |
||||
background: 'rgba(255,255,255,'+t+')', |
||||
} |
||||
} |
||||
}, |
||||
onLoad() { |
||||
this.statusBarHeight = systemInfoSync.statusBarHeight; |
||||
this.getUserInfo(); |
||||
}, |
||||
methods: { |
||||
async getUserInfo() { |
||||
const { code, data , msg } = await this.$api.findUserInfo({userId: uni.getStorageSync("userInfo").id}); |
||||
if(code == 200){ |
||||
this.userInfo = data; |
||||
}else{ |
||||
uni.showToast({ |
||||
title: mgs, |
||||
position: "bottom", |
||||
icon: "none", |
||||
}) |
||||
} |
||||
}, |
||||
openPage(index,id){ |
||||
if(index == 1){ |
||||
this.isCollect = !this.isCollect |
||||
}else if(index == 2){ |
||||
this.isShare = !this.isShare |
||||
}else if(index == 3){ |
||||
this.isDashan = !this.isDashan |
||||
}else if(index == 4){ |
||||
uni.navigateTo({ |
||||
url: "/pages/peiwan/confirm?id="+id |
||||
}) |
||||
}else if(index == 5){ |
||||
uni.navigateTo({ |
||||
url: "/pages/dongtai/detail?id="+id |
||||
}) |
||||
}else if(index == 7){ |
||||
uni.navigateTo({ |
||||
url: "/pages/peiwan/xiangce?id="+id |
||||
}) |
||||
} |
||||
}, |
||||
changeTabs(index){ |
||||
this.current = index |
||||
}, |
||||
toToggle () { |
||||
this.isPlay = !this.isPlay |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.user{ |
||||
overflow: hidden; |
||||
&-pic{ |
||||
width: 100%; |
||||
image{ |
||||
width: 100%; |
||||
} |
||||
} |
||||
&-fd{ |
||||
width: 100%; |
||||
height: 110rpx; |
||||
background: #FFFFFF; |
||||
position: fixed; |
||||
left: 0; |
||||
bottom: 0; |
||||
z-index: 21; |
||||
padding: 20rpx 25rpx; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.item{ |
||||
flex: 1; |
||||
display: flex; |
||||
line-height: 70rpx; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-weight: 500; |
||||
font-size: 28rpx; |
||||
background: #FCFCFC; |
||||
border-radius: 70rpx; |
||||
border: 1px solid #000000; |
||||
color: #000000; |
||||
image{ |
||||
width: 30rpx; |
||||
height: 30rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
&-on{ |
||||
background: linear-gradient(0deg, #000000, #3D3B38); |
||||
box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34); |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
.items{ |
||||
width: 462rpx; |
||||
display: flex; |
||||
line-height: 70rpx; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-weight: 500; |
||||
font-size: 28rpx; |
||||
border-radius: 70rpx; |
||||
border: 1px solid #000000; |
||||
background: linear-gradient(0deg, #000000, #3D3B38); |
||||
box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34); |
||||
color: #FFFFFF; |
||||
image{ |
||||
width: 30rpx; |
||||
height: 30rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
&-bd{ |
||||
padding: 0 25rpx; |
||||
overflow: hidden; |
||||
.xiangce{ |
||||
width: 100%; |
||||
background: #FFFFFF; |
||||
border-radius: 20rpx; |
||||
padding: 30rpx; |
||||
box-sizing: border-box; |
||||
margin-top: 20rpx; |
||||
.title{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
font-weight: 500; |
||||
font-size: 30rpx; |
||||
color: #222222; |
||||
.more{ |
||||
font-size: 24rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
image{ |
||||
width: 30rpx; |
||||
height: 30rpx; |
||||
} |
||||
} |
||||
} |
||||
.list{ |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
image{ |
||||
width: 150rpx; |
||||
height: 150rpx; |
||||
border-radius: 10rpx; |
||||
margin-left: 20rpx; |
||||
margin-top: 20rpx; |
||||
&:first-child{ |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
.tag{ |
||||
padding: 0 30rpx; |
||||
line-height: 50rpx; |
||||
height: 50rpx; |
||||
background: #000000; |
||||
border-radius: 50rpx; |
||||
font-weight: 500; |
||||
font-size: 24rpx; |
||||
color: #FFFFFF; |
||||
margin-left: 20rpx; |
||||
margin-top: 20rpx; |
||||
&:first-child{ |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
} |
||||
.qinggan{ |
||||
background: #F7F7F7; |
||||
border-radius: 20rpx; |
||||
padding: 0 30rpx 30rpx; |
||||
font-weight: 500; |
||||
font-size: 28rpx; |
||||
color: #999999; |
||||
margin-top: 20rpx; |
||||
overflow: hidden; |
||||
text{ |
||||
color: #222222; |
||||
} |
||||
.dd{ |
||||
margin-top: 30rpx; |
||||
} |
||||
.li{ |
||||
width: 50%; |
||||
float: left; |
||||
margin-top: 30rpx; |
||||
} |
||||
.b{ |
||||
display: flex; |
||||
align-items: center; |
||||
.tag{ |
||||
padding: 0 20rpx; |
||||
height: 50rpx; |
||||
font-weight: 500; |
||||
border-radius: 50rpx; |
||||
font-size: 24rpx; |
||||
line-height: 50rpx; |
||||
color: #FFFFFF; |
||||
margin-top: 20rpx; |
||||
margin-left: 20rpx; |
||||
&:first-child{ |
||||
margin-left: 0; |
||||
} |
||||
&:nth-child(1){ |
||||
background: linear-gradient(0deg, #A348DA, #F090F2); |
||||
} |
||||
&:nth-child(2){ |
||||
background: linear-gradient(0deg, #017CF9, #10D9F2); |
||||
} |
||||
&:nth-child(3){ |
||||
background: linear-gradient(0deg, #7C58DB, #9AA4FF); |
||||
} |
||||
&:nth-child(4){ |
||||
background: linear-gradient(0deg, #EC1C71, #FF8CAC); |
||||
} |
||||
&:nth-child(5){ |
||||
background: linear-gradient(0deg, #FA7B0B, #F7D345); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.yuewan{ |
||||
overflow: hidden; |
||||
margin-top: 20rpx; |
||||
.list{ |
||||
width: 110%; |
||||
overflow: hidden; |
||||
margin-top: 20rpx; |
||||
.item{ |
||||
width: 240rpx; |
||||
height: 140rpx; |
||||
background: url(@/static/icon-xianxia.png) center top no-repeat; |
||||
background-size: contain; |
||||
float: left; |
||||
text-align: left; |
||||
padding: 30rpx; |
||||
box-sizing: border-box; |
||||
border: 1px solid #F3F4F5; |
||||
&-on{ |
||||
background: url(@/static/icon-xianshang.png) center top no-repeat; |
||||
background-size: contain; |
||||
} |
||||
&-active{ |
||||
border: 1px solid #000; |
||||
} |
||||
.name{ |
||||
font-weight: 500; |
||||
font-size: 30rpx; |
||||
color: #222222; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
} |
||||
.price{ |
||||
font-weight: 500; |
||||
font-size: 24rpx; |
||||
color: #E70C0C; |
||||
margin-top: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
.title{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
font-weight: 500; |
||||
font-size: 30rpx; |
||||
color: #222222; |
||||
.location{ |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 24rpx; |
||||
color: #666666; |
||||
image{ |
||||
width: 22rpx; |
||||
height: 22rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.dongtai{ |
||||
padding-bottom: 20rpx; |
||||
overflow: hidden; |
||||
.item{ |
||||
width: 100%; |
||||
background: #FFFFFF; |
||||
border-radius: 20rpx; |
||||
padding: 30rpx; |
||||
box-sizing: border-box; |
||||
margin-top: 20rpx; |
||||
.d{ |
||||
font-weight: 400; |
||||
font-size: 24rpx; |
||||
color: #333333; |
||||
line-height: 42rpx; |
||||
margin-top: 20rpx; |
||||
text-align: left; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.fl{ |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
.li{ |
||||
display: flex; |
||||
align-items: center; |
||||
width: 120rpx; |
||||
image{ |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
.fr{ |
||||
width: 90rpx; |
||||
line-height: 44rpx; |
||||
background: #000000; |
||||
border-radius: 44rpx; |
||||
text-align: center; |
||||
font-weight: 500; |
||||
font-size: 24rpx; |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
.c{ |
||||
width: 110%; |
||||
margin-top: 20rpx; |
||||
overflow: hidden; |
||||
image{ |
||||
width: 210rpx; |
||||
height: 210rpx; |
||||
border-radius: 10rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
} |
||||
.b{ |
||||
font-weight: 400; |
||||
font-size: 28rpx; |
||||
color: #222222; |
||||
line-height: 42rpx; |
||||
margin-top: 20rpx; |
||||
text-align: left; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 2; /* 定义文本的行数 */ |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.a{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.fl{ |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
margin-right: 20rpx; |
||||
image{ |
||||
width: 80rpx; |
||||
height: 80rpx; |
||||
background: #E6E9ED; |
||||
border-radius: 50%; |
||||
margin-right: 20rpx; |
||||
} |
||||
.info{ |
||||
flex: 1; |
||||
} |
||||
.name{ |
||||
font-weight: 400; |
||||
font-size: 30rpx; |
||||
color: #222222; |
||||
} |
||||
.desc{ |
||||
font-weight: 400; |
||||
font-size: 22rpx; |
||||
color: #B6BCC2; |
||||
margin-top: 10rpx; |
||||
} |
||||
} |
||||
.fr{ |
||||
width: 32rpx; |
||||
image{ |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&-tab{ |
||||
display: flex; |
||||
margin-top: 10rpx; |
||||
overflow: hidden; |
||||
.tab{ |
||||
width: 400rpx; |
||||
} |
||||
} |
||||
&-hd{ |
||||
width: 100%; |
||||
background: #FFFFFF; |
||||
border-radius: 0px 0px 20rpx 20rpx; |
||||
padding: 25rpx; |
||||
box-sizing: border-box; |
||||
position: relative; |
||||
.d{ |
||||
width: 165rpx; |
||||
height: 95rpx; |
||||
font-weight: 500; |
||||
font-size: 28rpx; |
||||
color: #FFFFFF; |
||||
background: url(@/static/icon-bofang.png) center top no-repeat; |
||||
background-size: contain; |
||||
line-height: 88rpx; |
||||
text-indent: 90rpx; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 5rpx; |
||||
z-index: 2; |
||||
&-on{ |
||||
background: url(@/static/icon-zanting.png) center top no-repeat; |
||||
background-size: contain; |
||||
} |
||||
} |
||||
.b{ |
||||
display: flex; |
||||
align-items: center; |
||||
margin-top: 20rpx; |
||||
.tag{ |
||||
padding: 0 20rpx; |
||||
font-weight: 500; |
||||
font-size: 22rpx; |
||||
color: #666666; |
||||
line-height: 40rpx; |
||||
border-radius: 40rpx; |
||||
background: #F2F2F2; |
||||
display: flex; |
||||
align-items: center; |
||||
margin-right: 20rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
} |
||||
.c{ |
||||
font-weight: 500; |
||||
font-size: 24rpx; |
||||
color: #222222; |
||||
text-align: left; |
||||
margin-top: 30rpx; |
||||
} |
||||
.a{ |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
.name{ |
||||
font-weight: 500; |
||||
font-size: 36rpx; |
||||
color: #222222; |
||||
} |
||||
.vip{ |
||||
width: 60rpx; |
||||
line-height: 32rpx; |
||||
background: url(@/static/vip-bg.png) center top no-repeat; |
||||
background-size: contain; |
||||
text-align: center; |
||||
font-weight: 500; |
||||
font-size: 20rpx; |
||||
color: #FFFFFF; |
||||
overflow: hidden; |
||||
margin-left: 20rpx; |
||||
} |
||||
.sex{ |
||||
margin-left: 20rpx; |
||||
width: 30rpx; |
||||
height: 30rpx; |
||||
image{ |
||||
width: 30rpx; |
||||
height: 30rpx; |
||||
} |
||||
} |
||||
.city{ |
||||
padding: 0 20rpx; |
||||
font-weight: 500; |
||||
font-size: 22rpx; |
||||
color: #666666; |
||||
line-height: 40rpx; |
||||
border-radius: 40rpx; |
||||
background: #F2F2F2; |
||||
display: flex; |
||||
align-items: center; |
||||
margin-left: 20rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
image{ |
||||
width: 22rpx; |
||||
height: 22rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,302 @@ |
||||
<template> |
||||
<view class="content"> |
||||
<view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }"> |
||||
<canvas |
||||
class="cropper" |
||||
:disable-scroll="true" |
||||
@touchstart="touchStart" |
||||
@touchmove="touchMove" |
||||
@touchend="touchEnd" |
||||
:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }" |
||||
canvas-id="cropper" |
||||
id="cropper" |
||||
></canvas> |
||||
<canvas |
||||
class="cropper" |
||||
:disable-scroll="true" |
||||
:style="{ |
||||
position: 'fixed', |
||||
top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`, |
||||
left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`, |
||||
width: `${cropperOpt.width * cropperOpt.pixelRatio}px`, |
||||
height: `${cropperOpt.height * cropperOpt.pixelRatio}` |
||||
}" |
||||
canvas-id="targetId" |
||||
id="targetId" |
||||
></canvas> |
||||
</view> |
||||
<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }"> |
||||
<!-- #ifdef H5 --> |
||||
<view class="upload" @tap="uploadTap">选择图片</view> |
||||
<!-- #endif --> |
||||
<!-- #ifndef H5 --> |
||||
<view class="upload" @tap="uploadTap">重新选择</view> |
||||
<!-- #endif --> |
||||
<view class="getCropperImage" @tap="getCropperImage(false)">确定</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import WeCropper from './weCropper.js'; |
||||
export default { |
||||
props: { |
||||
// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色， |
||||
// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)" |
||||
boundStyle: { |
||||
type: Object, |
||||
default() { |
||||
return { |
||||
lineWidth: 4, |
||||
borderColor: 'rgb(245, 245, 245)', |
||||
mask: 'rgba(0, 0, 0, 0.35)' |
||||
}; |
||||
} |
||||
} |
||||
// // 裁剪框宽度，单位rpx |
||||
// rectWidth: { |
||||
// type: [String, Number], |
||||
// default: 400 |
||||
// }, |
||||
// // 裁剪框高度，单位rpx |
||||
// rectHeight: { |
||||
// type: [String, Number], |
||||
// default: 400 |
||||
// }, |
||||
// // 输出图片宽度，单位rpx |
||||
// destWidth: { |
||||
// type: [String, Number], |
||||
// default: 400 |
||||
// }, |
||||
// // 输出图片高度，单位rpx |
||||
// destHeight: { |
||||
// type: [String, Number], |
||||
// default: 400 |
||||
// }, |
||||
// // 输出的图片类型，如果发现裁剪的图片很大，可能是因为设置为了"png"，改成"jpg"即可 |
||||
// fileType: { |
||||
// type: String, |
||||
// default: 'jpg', |
||||
// }, |
||||
// // 生成的图片质量 |
||||
// // H5上无效，目前不考虑使用此参数 |
||||
// quality: { |
||||
// type: [Number, String], |
||||
// default: 1 |
||||
// } |
||||
}, |
||||
data() { |
||||
return { |
||||
// 底部导航的高度 |
||||
bottomNavHeight: 50, |
||||
originWidth: 200, |
||||
width: 0, |
||||
height: 0, |
||||
cropperOpt: { |
||||
id: 'cropper', |
||||
targetId: 'targetCropper', |
||||
pixelRatio: 1, |
||||
width: 0, |
||||
height: 0, |
||||
scale: 2.5, |
||||
zoom: 8, |
||||
cut: { |
||||
x: (this.width - this.originWidth) / 2, |
||||
y: (this.height - this.originWidth) / 2, |
||||
width: this.originWidth, |
||||
height: this.originWidth |
||||
}, |
||||
boundStyle: { |
||||
lineWidth: uni.upx2px(this.boundStyle.lineWidth), |
||||
mask: this.boundStyle.mask, |
||||
color: this.boundStyle.borderColor |
||||
} |
||||
}, |
||||
// 裁剪框和输出图片的尺寸，高度默认等于宽度 |
||||
// 输出图片宽度，单位px |
||||
destWidth: 200, |
||||
// 裁剪框宽度，单位px |
||||
rectWidth: 200, |
||||
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可 |
||||
fileType: 'jpg', |
||||
src: '', // 选择的图片路径，用于在点击确定时，判断是否选择了图片 |
||||
}; |
||||
}, |
||||
onLoad(option) { |
||||
let rectInfo = uni.getSystemInfoSync(); |
||||
if (rectInfo.safeAreaInsets && rectInfo.safeAreaInsets.bottom) { |
||||
this.bottomNavHeight += rectInfo.safeAreaInsets.bottom; |
||||
} |
||||
this.width = rectInfo.windowWidth; |
||||
this.height = rectInfo.windowHeight - this.bottomNavHeight; |
||||
this.cropperOpt.width = this.width; |
||||
this.cropperOpt.height = this.height; |
||||
this.cropperOpt.pixelRatio = rectInfo.pixelRatio; |
||||
|
||||
if (option.destWidth) this.destWidth = option.destWidth; |
||||
if (option.rectWidth) { |
||||
let rectWidth = Number(option.rectWidth); |
||||
this.cropperOpt.cut = { |
||||
x: (this.width - rectWidth) / 2, |
||||
y: (this.height - rectWidth) / 2, |
||||
width: rectWidth, |
||||
height: rectWidth |
||||
}; |
||||
} |
||||
this.rectWidth = option.rectWidth; |
||||
if (option.fileType) this.fileType = option.fileType; |
||||
// 初始化 |
||||
this.cropper = new WeCropper(this.cropperOpt) |
||||
.on('ready', ctx => { |
||||
// wecropper is ready for work! |
||||
}) |
||||
.on('beforeImageLoad', ctx => { |
||||
// before picture loaded, i can do something |
||||
}) |
||||
.on('imageLoad', ctx => { |
||||
// picture loaded |
||||
}) |
||||
.on('beforeDraw', (ctx, instance) => { |
||||
// before canvas draw,i can do something |
||||
}); |
||||
// 设置导航栏样式，以免用户在page.json中没有设置为黑色背景 |
||||
uni.setNavigationBarColor({ |
||||
frontColor: '#ffffff', |
||||
backgroundColor: '#000000' |
||||
}); |
||||
uni.chooseImage({ |
||||
count: 1, // 默认9 |
||||
sizeType: ['original '], // 可以指定是原图还是压缩图，默认二者都有 |
||||
sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有 |
||||
success: res => { |
||||
this.src = res.tempFilePaths[0]; |
||||
// 获取裁剪图片资源后，给data添加src属性及其值 |
||||
this.cropper.pushOrign(this.src); |
||||
}, |
||||
fail: (err) => { |
||||
console.error('chooseImageErr: ', err); |
||||
} |
||||
}); |
||||
}, |
||||
methods: { |
||||
touchStart(e) { |
||||
this.cropper.touchStart(e); |
||||
}, |
||||
touchMove(e) { |
||||
this.cropper.touchMove(e); |
||||
}, |
||||
touchEnd(e) { |
||||
this.cropper.touchEnd(e); |
||||
}, |
||||
getCropperImage(isPre = false) { |
||||
if(!this.src) return this.$u.toast('请先选择图片再裁剪'); |
||||
|
||||
let cropper_opt = { |
||||
destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值 |
||||
destWidth: Number(this.destWidth), |
||||
fileType: this.fileType |
||||
}; |
||||
this.cropper.getCropperImage(cropper_opt, (path, err) => { |
||||
if (err) { |
||||
uni.showModal({ |
||||
title: '温馨提示', |
||||
content: err.message |
||||
}); |
||||
} else { |
||||
if (isPre) { |
||||
uni.previewImage({ |
||||
current: '', // 当前显示图片的 http 链接 |
||||
urls: [path] // 需要预览的图片 http 链接列表 |
||||
}); |
||||
} else { |
||||
uni.$emit('uAvatarCropper', path); |
||||
this.$u.route({ |
||||
type: 'back' |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
uploadTap() { |
||||
const self = this; |
||||
uni.chooseImage({ |
||||
count: 1, // 默认9 |
||||
sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有 |
||||
sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有 |
||||
success: (res) => { |
||||
self.src = res.tempFilePaths[0]; |
||||
// 获取裁剪图片资源后，给data添加src属性及其值 |
||||
|
||||
self.cropper.pushOrign(this.src); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
@import '../../libs/css/style.components.scss'; |
||||
|
||||
.content { |
||||
background: rgba(255, 255, 255, 1); |
||||
} |
||||
|
||||
.cropper { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
z-index: 11; |
||||
} |
||||
|
||||
.cropper-buttons { |
||||
background-color: #000000; |
||||
color: #eee; |
||||
} |
||||
|
||||
.safe-area-padding { |
||||
padding-bottom: 0; |
||||
padding-bottom: constant(safe-area-inset-bottom); |
||||
padding-bottom: env(safe-area-inset-bottom); |
||||
} |
||||
|
||||
.cropper-wrapper { |
||||
position: relative; |
||||
@include vue-flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
background-color: #000; |
||||
} |
||||
|
||||
.cropper-buttons { |
||||
width: 100vw; |
||||
@include vue-flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
font-size: 28rpx; |
||||
} |
||||
|
||||
.cropper-buttons .upload, |
||||
.cropper-buttons .getCropperImage { |
||||
width: 50%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.cropper-buttons .upload { |
||||
text-align: left; |
||||
padding-left: 50rpx; |
||||
} |
||||
|
||||
.cropper-buttons .getCropperImage { |
||||
text-align: right; |
||||
padding-right: 50rpx; |
||||
} |
||||
</style> |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
||||
{"@platforms":["android","iPhone","iPad"],"id":"__UNI__7C06BEE","name":"chunwan","version":{"name":"1.0.0","code":"100"},"description":"","launch_path":"__uniappview.html","developer":{"name":"","email":"","url":""},"permissions":{"Geolocation":{},"OAuth":{},"Camera":{},"Maps":{"coordType":"gcj02"},"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"target":"id:1","autoclose":true,"waiting":true,"delay":0},"popGesture":"close","launchwebview":{"id":"1","kernel":"WKWebview"},"statusbar":{"immersed":"supportedDevice","style":"dark","background":"#FFFFFF"},"usingComponents":true,"nvueStyleCompiler":"uni-app","compilerVersion":3,"distribute":{"splashscreen":{"useOriginalMsgbox":true},"icons":{"android":{"hdpi":"unpackage/res/icons/72x72.png","xhdpi":"unpackage/res/icons/96x96.png","xxhdpi":"unpackage/res/icons/144x144.png","xxxhdpi":"unpackage/res/icons/192x192.png"},"ios":{"appstore":"unpackage/res/icons/1024x1024.png","ipad":{"app":"unpackage/res/icons/76x76.png","app@2x":"unpackage/res/icons/152x152.png","notification":"unpackage/res/icons/20x20.png","notification@2x":"unpackage/res/icons/40x40.png","proapp@2x":"unpackage/res/icons/167x167.png","settings":"unpackage/res/icons/29x29.png","settings@2x":"unpackage/res/icons/58x58.png","spotlight":"unpackage/res/icons/40x40.png","spotlight@2x":"unpackage/res/icons/80x80.png"},"iphone":{"app@2x":"unpackage/res/icons/120x120.png","app@3x":"unpackage/res/icons/180x180.png","notification@2x":"unpackage/res/icons/40x40.png","notification@3x":"unpackage/res/icons/60x60.png","settings@2x":"unpackage/res/icons/58x58.png","settings@3x":"unpackage/res/icons/87x87.png","spotlight@2x":"unpackage/res/icons/80x80.png","spotlight@3x":"unpackage/res/icons/120x120.png"}}},"google":{"permissions":["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"],"schemes":"com.chunwan","minSdkVersion":21,"targetSdkVersion":30,"abiFilters":["armeabi-v7a","arm64-v8a","x86"]},"apple":{"idfa":false,"dSYMs":false},"plugins":{"geolocation":{"amap":{"name":"amap_17321661234Ay6qpQnkC","__platform__":["ios","android"],"appkey_ios":"49e860f8b39479b15db1110fb3e62286","appkey_android":"d2e40f882c2fde0f3724791cb82cbd9c"}},"oauth":{},"ad":{},"maps":{"amap":{"name":"amap_17321661234Ay6qpQnkC","appkey_ios":"49e860f8b39479b15db1110fb3e62286","appkey_android":"d2e40f882c2fde0f3724791cb82cbd9c"}},"audio":{"mp3":{"description":"Android平台录音支持MP3格式文件"}}}},"uniStatistics":{"enable":false},"allowsInlineMediaPlayback":true,"safearea":{"background":"#ffffff","bottom":{"offset":"auto"}},"uni-app":{"compilerVersion":"4.28","control":"uni-v3","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal"},"tabBar":{"color":"#999999","selectedColor":"#000000","borderStyle":"rgba(0,0,0,0.4)","backgroundColor":"#ffffff","list":[{"pagePath":"pages/index/index","iconPath":"static/sy2.png","selectedIconPath":"static/sy1.png","text":"首页"},{"pagePath":"pages/peiwan/index","iconPath":"static/peiwan2.png","selectedIconPath":"static/peiwan1.png","text":"陪玩"},{"pagePath":"pages/dongtai/index","iconPath":"static/dt2.png","selectedIconPath":"static/dt1.png","text":"动态"},{"pagePath":"pages/xiaoxi/index","iconPath":"static/xiaoxi2.png","selectedIconPath":"static/xiaoxi1.png","text":"消息"},{"pagePath":"pages/user/index","iconPath":"static/wd2.png","selectedIconPath":"static/wd1.png","text":"我的"}],"height":"50px","child":["lauchwebview"],"selected":0},"launch_path":"__uniappview.html"},"locale":"zh-Hans"} |
||||
{"@platforms":["android","iPhone","iPad"],"id":"__UNI__7C06BEE","name":"chunwan","version":{"name":"1.0.0","code":"100"},"description":"","launch_path":"__uniappview.html","developer":{"name":"","email":"","url":""},"permissions":{"Geolocation":{},"OAuth":{},"Camera":{},"Maps":{"coordType":"gcj02"},"Payment":{},"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"target":"id:1","autoclose":true,"waiting":true,"delay":0},"popGesture":"close","launchwebview":{"id":"1","kernel":"WKWebview"},"statusbar":{"immersed":"supportedDevice","style":"dark","background":"#FFFFFF"},"usingComponents":true,"nvueStyleCompiler":"uni-app","compilerVersion":3,"distribute":{"splashscreen":{"useOriginalMsgbox":true},"icons":{"android":{"hdpi":"unpackage/res/icons/72x72.png","xhdpi":"unpackage/res/icons/96x96.png","xxhdpi":"unpackage/res/icons/144x144.png","xxxhdpi":"unpackage/res/icons/192x192.png"},"ios":{"appstore":"unpackage/res/icons/1024x1024.png","ipad":{"app":"unpackage/res/icons/76x76.png","app@2x":"unpackage/res/icons/152x152.png","notification":"unpackage/res/icons/20x20.png","notification@2x":"unpackage/res/icons/40x40.png","proapp@2x":"unpackage/res/icons/167x167.png","settings":"unpackage/res/icons/29x29.png","settings@2x":"unpackage/res/icons/58x58.png","spotlight":"unpackage/res/icons/40x40.png","spotlight@2x":"unpackage/res/icons/80x80.png"},"iphone":{"app@2x":"unpackage/res/icons/120x120.png","app@3x":"unpackage/res/icons/180x180.png","notification@2x":"unpackage/res/icons/40x40.png","notification@3x":"unpackage/res/icons/60x60.png","settings@2x":"unpackage/res/icons/58x58.png","settings@3x":"unpackage/res/icons/87x87.png","spotlight@2x":"unpackage/res/icons/80x80.png","spotlight@3x":"unpackage/res/icons/120x120.png"}}},"google":{"permissions":["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"],"schemes":"com.chunwan","minSdkVersion":21,"targetSdkVersion":30,"abiFilters":["armeabi-v7a","arm64-v8a","x86"]},"apple":{"idfa":false,"dSYMs":false},"plugins":{"geolocation":{"amap":{"name":"amap_17321661234Ay6qpQnkC","__platform__":["ios","android"],"appkey_ios":"49e860f8b39479b15db1110fb3e62286","appkey_android":"d2e40f882c2fde0f3724791cb82cbd9c"}},"oauth":{"weixin":{"appid":"wx3024f118e0e78f2f","UniversalLinks":""}},"ad":{},"maps":{"amap":{"name":"amap_17321661234Ay6qpQnkC","appkey_ios":"49e860f8b39479b15db1110fb3e62286","appkey_android":"d2e40f882c2fde0f3724791cb82cbd9c"}},"share":{},"payment":{"weixin":{"__platform__":["ios","android"],"appid":"wx3024f118e0e78f2f","UniversalLinks":""}},"audio":{"mp3":{"description":"Android平台录音支持MP3格式文件"}}}},"uniStatistics":{"enable":false},"allowsInlineMediaPlayback":true,"safearea":{"background":"#ffffff","bottom":{"offset":"auto"}},"uni-app":{"compilerVersion":"4.28","control":"uni-v3","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal"},"tabBar":{"color":"#999999","selectedColor":"#000000","borderStyle":"rgba(0,0,0,0.4)","backgroundColor":"#ffffff","list":[{"pagePath":"pages/index/index","iconPath":"static/sy2.png","selectedIconPath":"static/sy1.png","text":"首页"},{"pagePath":"pages/peiwan/index","iconPath":"static/peiwan2.png","selectedIconPath":"static/peiwan1.png","text":"陪玩"},{"pagePath":"pages/dongtai/index","iconPath":"static/dt2.png","selectedIconPath":"static/dt1.png","text":"动态"},{"pagePath":"pages/xiaoxi/index","iconPath":"static/xiaoxi2.png","selectedIconPath":"static/xiaoxi1.png","text":"消息"},{"pagePath":"pages/user/index","iconPath":"static/wd2.png","selectedIconPath":"static/wd1.png","text":"我的"}],"height":"50px"},"launch_path":"__uniappview.html"},"locale":"zh-Hans"} |
||||
Loading…
Reference in new issue