头像上传裁剪

This commit is contained in:
haomingming 2023-05-11 11:13:50 +08:00
parent 7ef82dab29
commit c3ef53d336
18 changed files with 1429 additions and 60 deletions

View File

@ -13,18 +13,11 @@ Page({
imglist: []
},
onLoad(options){
console.log("onLoad", options)
this.setData({
order_inquiry_id: options.order_inquiry_id
})
//获取患者问诊病例
api.getDoctorInquiryCase({order_inquiry_id: this.data.order_inquiry_id}).then(response => {
console.log(response);
this.setData({
case_detail: response.data
})
}).then(res => {
this.formatImgList();
}).catch(errors => {console.error(errors);})
},
formatImgList(){
let diagnose_images = this.data.case_detail.diagnose_images;
@ -40,7 +33,15 @@ Page({
})
},
onShow(){
//获取患者问诊病例
api.getDoctorInquiryCase({order_inquiry_id: this.data.order_inquiry_id}).then(response => {
console.log(response);
this.setData({
case_detail: response.data
})
}).then(res => {
this.formatImgList();
}).catch(errors => {console.error(errors);})
},
})

View File

@ -8,7 +8,7 @@
<view class="sex">{{case_detail.sex==1?'男':case_detail.sex==2?'女':'未知'}}{{case_detail.age}}岁 </view>
</view>
<view class="info">
<view class="height info_item"><text class="info_title">身高:</text><text class="info_val">{{case_detail.height==null?'未知':case_detail.height}}cm</text></view>
<view class="height info_item"><text class="info_title">身高:</text><text class="info_val">{{case_detail.height==null?'未知':case_detail.height}}CM</text></view>
<view class="weight info_item"><text class="info_title">体重:</text><text class="info_val">{{case_detail.weight==null?'未知':case_detail.weight}}KG</text></view>
<view class="minzu info_item"><text class="info_title">民族:</text><text class="info_val">{{case_detail.nation_name==''?'未知':case_detail.nation_name}}</text></view>
<view class="zhiye info_item"><text class="info_title">职业:</text><text class="info_val">{{case_detail.job_name==''?'未知':case_detail.job_name}}</text></view>
@ -58,8 +58,9 @@
</view>
</view>
<view class="main_title" wx:if="{{case_detail.is_allergy_history != null && case_detail.is_family_history != null && case_detail.is_pregnant != null && case_detail.drink_wine_status != null && case_detail.smoke_status != null && case_detail.is_operation != null && case_detail.chemical_compound_status != null && case_detail.chemical_compound_status != null}}">其他信息</view>
<view class="data_box orther" wx:if="{{case_detail.is_allergy_history != null && case_detail.is_family_history != null && case_detail.is_pregnant != null && case_detail.drink_wine_status != null && case_detail.smoke_status != null && case_detail.is_operation != null && case_detail.chemical_compound_status != null && case_detail.chemical_compound_status != null}}">
<view class="main_title" wx:if="{{!(case_detail.is_allergy_history == null && case_detail.is_family_history == null && case_detail.is_pregnant == null && case_detail.drink_wine_status == null && case_detail.smoke_status == null && case_detail.is_operation == null && case_detail.chemical_compound_status == null && case_detail.chemical_compound_status == null)}}">其他信息</view>
<view class="data_box orther" wx:if="{{!(case_detail.is_allergy_history == null && case_detail.is_family_history == null && case_detail.is_pregnant == null && case_detail.drink_wine_status == null && case_detail.smoke_status == null && case_detail.is_operation == null && case_detail.chemical_compound_status == null && case_detail.chemical_compound_status == null)}}">
<view class="disease_box">
<view class="disease_box_item" wx:if="{{case_detail.is_allergy_history != null}}">
<view class="title">过敏史:</view>
@ -89,7 +90,7 @@
<view class="title">接触化学物:</view>
<view class="conent">{{case_detail.chemical_compound_status==1?'从不':case_detail.chemical_compound_status==2?'偶尔':case_detail.chemical_compound_status==3?'经常':case_detail.chemical_compound_status==4?'每天':'其他'}}</view>
</view>
<view class="disease_info" wx:if="{{case_detail.chemical_compound_describe != null}}">
<view class="disease_info" wx:if="{{case_detail.chemical_compound_describe != '' && case_detail.chemical_compound_describe != null}}">
详细描述:{{case_detail.chemical_compound_describe}}
</view>
</view>

View File

@ -66,6 +66,9 @@ Page({
console.log("onChange: ", detail);
if(detail){
this.setData({ note: this.data.open_note });
wx.vibrateShort({
"type": "heavy"
})
}else{
this.setData({ note: this.data.close_note });
}

View File

@ -61,6 +61,9 @@ Page({
let check = this.checkPrice(inquiry_price);
if(!check) return;
this.setData({ note: this.data.open_note });
wx.vibrateShort({
"type": "heavy"
})
}else{
this.setData({ note: this.data.close_note });
}

View File

@ -47,6 +47,9 @@ Page({
},
onStepperChange(event) {
console.log(event.detail);
wx.vibrateShort({
"type": "heavy"
})
this.setData({
"info.work_num_day": event.detail
});

View File

@ -12,7 +12,6 @@ Page({
license_cert: [],
qualification_cert: [],
work_cert: [],
license_cert_visible: false
},
onLoad(){
api.getDoctorCret().then(response => {
@ -24,20 +23,13 @@ Page({
})
}).catch(errors => {console.error(errors);})
},
show_license_cert(){
console.log("show_license_cert")
this.setData({
license_cert_visible: true
previewImage(e){
let name = e.currentTarget.dataset.name;
let name_date = this.data[name]
wx.previewImage({
current: name_date[0], // 当前显示图片的http链接
urls: name_date // 需要预览的图片http链接列表
})
},
close_license_cert(e) {
const {
detail: { trigger },
} = e;
console.log("trigger: ", trigger);
console.log("close_license_cert")
this.setData({
license_cert_visible: false,
});
},
}
})

View File

@ -2,7 +2,6 @@
"component": true,
"usingComponents": {
"te-nav-bar": "/commpents/te_navbar",
"t-image": "tdesign-miniprogram/image/image",
"t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer"
"t-image": "tdesign-miniprogram/image/image"
}
}

View File

@ -12,7 +12,8 @@
style="margin: 0 50rpx 0 20rpx;"
width="220rpx" height="220rpx"
aria-label="img" wx:for="{{license_cert}}"
bindtap="show_license_cert" />
data-name="license_cert"
bindtap="previewImage" />
</view>
</view>
<view class="imgbox_item">
@ -25,7 +26,9 @@
mode="heightFix"
style="margin: 0 50rpx 0 20rpx;"
width="220rpx" height="220rpx"
aria-label="img" wx:for="{{qualification_cert}}" />
aria-label="img" wx:for="{{qualification_cert}}"
data-name="qualification_cert"
bindtap="previewImage"/>
</view>
</view>
<view class="imgbox_item">
@ -37,18 +40,10 @@
mode="heightFix"
style="margin: 0 50rpx 20rpx 20rpx;"
width="220rpx" height="220rpx"
aria-label="img" wx:for="{{work_cert}}" />
aria-label="img" wx:for="{{work_cert}}"
data-name="work_cert"
bindtap="previewImage"/>
</view>
</view>
</view>
<!-- <t-image-viewer
deleteBtn="{{false}}"
close-btn="{{true}}"
show-index="{{true}}"
visible="{{license_cert_visible}}"
images="{{license_cert}}"
bind:close="close_license_cert"
></t-image-viewer> -->
</view>

View File

@ -88,7 +88,11 @@ Page({
onChange({ detail }) {
console.log("onChange: ", detail);
if(detail){
wx.vibrateShort({
"type": "heavy"
})
}
//修改开关
let params = {};
params.inquiry_type = this.data.inquiry_type;//接诊类型1:专家问诊 2:快速问诊 3:公益问诊 4:问诊购药)
@ -98,7 +102,6 @@ Page({
console.log(response);
}).then(()=>{
if(detail){
let tmplIds = ['G1RIs0RYqsTQ2CuPQWalIMyb6_deuEEbJfajfhGvNzc']
let sub_promise = requestSubscribeMessage(tmplIds)
sub_promise.then(res => {

View File

@ -150,6 +150,9 @@ Page({
},
onStepperChange(event) {
console.log(event.detail);
wx.vibrateShort({
"type": "heavy"
})
this.setData({
"info.work_num_day": event.detail
});
@ -160,6 +163,9 @@ Page({
},
onColumnChange(e) {
wx.vibrateShort({
"type": "heavy"
})
console.log('picker pick:', e);
},

View File

@ -525,23 +525,26 @@ Component({
},
// 获取消息ID
handleLongPress(e) {
for (let index = 0; index < this.data.messageList.length; index++) {
// for (let index = 0; index < this.data.messageList.length; index++) {
if (this.data.messageList[index].status === 'success') {
// if (this.data.messageList[index].status === 'success') {
const { index } = e.currentTarget.dataset;
let message = this.data.messageList[index];
// let message = this.data.messageList[index];
// console.log(message)
if(message.type === 'TIMCustomElem'){
return
}
// if(message.type === 'TIMCustomElem'){
// return
// }
this.setData({
messageID: e.currentTarget.id,
selectedMessage: this.data.messageList[index],
Show: true,
});
}
}
wx.vibrateShort({
"type": "heavy"
})
// }
// }
},
// 更新 messagelist
updateMessageByID(deleteMessageID) {

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,3 @@
{
"component": true
}

View File

@ -0,0 +1,32 @@
<view class='image-cropper' catchtouchmove='_preventTouchMove' wx:if="{{show_cropper}}">
<view class='main' id="main" bindtouchend="_cutTouchEnd" bindtouchstart="_cutTouchStart" bindtouchmove="_cutTouchMove">
<view class='content'>
<view class='content_top bg_gray {{_flag_bright?"":"bg_black"}}' style="height:{{cut_top}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
<view class='content_middle' style="height:{{height}}px;">
<view class='content_middle_left bg_gray {{_flag_bright?"":"bg_black"}}' style="width:{{cut_left}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
<view class='content_middle_middle' style="width:{{width}}px;height:{{height}}px;transition-duration: .3s;transition-property:{{_cut_animation?'':'background'}};">
<view class="border border-top-left"></view>
<view class="border border-top-right"></view>
<view class="border border-right-top"></view>
<view class="border border-right-bottom"></view>
<view class="border border-bottom-right"></view>
<view class="border border-bottom-left"></view>
<view class="border border-left-bottom"></view>
<view class="border border-left-top"></view>
</view>
<view class='content_middle_right bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
</view>
<view class='content_bottom bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
</view>
<image bindload="imageLoad" bindtouchstart="_start" bindtouchmove="_move" bindtouchend="_end" style="width:{{img_width ? img_width + 'px' : 'auto'}};height:{{img_height ? img_height + 'px' : 'auto'}};transform:translate3d({{_img_left-img_width/2}}px,{{_img_top-img_height/2}}px,0) scale({{scale}}) rotate({{angle}}deg);transition-duration:{{_cut_animation?.4:0}}s;" class='img' src='{{imgSrc}}'></image>
</view>
<canvas canvas-id='image-cropper' disable-scroll="true" style="width:{{_canvas_width * export_scale}}px;height:{{_canvas_height * export_scale}}px;left:{{canvas_left}}px;top:{{canvas_top}}px" class='image-cropper-canvas'></canvas>
<view class="btn_box">
<view class="btn">
<button bindtap="cnacle" class="btn_cancle">取消</button>
</view>
<view class="btn">
<button bindtap="_click" class="btn_confirm">确定</button>
</view>
</view>
</view>

View File

@ -0,0 +1,144 @@
.image-cropper{
background:rgba(14, 13, 13,.8);
position: fixed;
top:0;
left:0;
width:100vw;
height:100vh;
z-index: 2;
}
.image-cropper .main{
position: absolute;
width:100vw;
height:100vh;
overflow: hidden;
}
.image-cropper .content{
z-index: 9;
position: absolute;
width:100vw;
height:100vh;
display: flex;
flex-direction:column;
pointer-events:none;
}
.image-cropper .bg_black{
background: rgba(0, 0, 0, 0.8)!important;
}
.image-cropper .bg_gray{
background: rgba(0, 0, 0, 0.45);
transition-duration: .35s;
}
.image-cropper .content>.content_top{
pointer-events:none;
}
.image-cropper .content>.content_middle{
display: flex;
height: 200px;
width:100%;
}
.image-cropper .content_middle_middle{
width:200px;
box-sizing:border-box;
position: relative;
transition-duration: .3s;
}
.image-cropper .content_middle_right{
flex: auto;
}
.image-cropper .content>.content_bottom{
flex: auto;
}
.image-cropper .img{
z-index: 2;
top:0;
left:0;
position: absolute;
border:none;
width:100%;
backface-visibility: hidden;
transform-origin:center;
}
.image-cropper .image-cropper-canvas{
position: fixed;
background: white;
width:150px;
height:150px;
z-index: 10;
top:-200%;
pointer-events:none;
}
.image-cropper .border{
background: white;
pointer-events:auto;
position:absolute;
}
.image-cropper .border-top-left{
left:-2.5px;
top:-2.5px;
height:2.5px;
width:33rpx;
}
.image-cropper .border-top-right{
right:-2.5px;
top:-2.5px;
height:2.5px;
width:33rpx;
}
.image-cropper .border-right-top{
top:-1px;
width:2.5px;
height:30rpx;
right:-2.5px;
}
.image-cropper .border-right-bottom{
width:2.5px;
height:30rpx;
right:-2.5px;
bottom:-1px;
}
.image-cropper .border-bottom-left{
height:2.5px;
width:33rpx;
bottom:-2.5px;
left:-2.5px;
}
.image-cropper .border-bottom-right{
height:2.5px;
width:33rpx;
bottom:-2.5px;
right:-2.5px;
}
.image-cropper .border-left-top{
top:-1px;
width:2.5px;
height:30rpx;
left:-2.5px;
}
.image-cropper .border-left-bottom{
width:2.5px;
height:30rpx;
left:-2.5px;
bottom:-1px;
}
.btn_box{
z-index: 9;
position: absolute;
display: flex;
bottom: 0rpx;
justify-content: center;
width: 100vw;
}
.btn{
font-weight: 600;
text-align: center;
margin: 60rpx 20rpx;
flex: 1;
}
.btn_cancle{
/* width: 100rpx; */
}
.btn_confirm{
background-color: #3CC7C0;
color: #fff;
}

View File

@ -85,8 +85,11 @@ Component({
zhuanchang_note: '请选择专长',
jianjie_show: false,
shanchang_show: false,
show_cropper: false,
img_cropper_src: '',
img_cropper_width: 250, //宽度
img_cropper_height: 250, //高度
},
options: {
addGlobalClass: true,
styleIsolation: 'apply-shared'
@ -901,6 +904,16 @@ Component({
})
},
doUploadPhoto(event) {
const { file } = event.detail;
this.setData({
photoEvent: event,
img_cropper_src: file.url,
show_cropper: true
})
this.loadimage()
},
OSSUpload(fileurl){
let event = this.data.photoEvent
console.log("index douploadFIle: ", event);
const scene = event.currentTarget.dataset.scene;
const field_name = event.currentTarget.dataset.field_name;
@ -919,7 +932,7 @@ Component({
const ossAccessKeyId = response.data.accessid;
const policy = response.data.policy;
const key = response.data.dir+filename;
const filePath = file.url; // 待上传文件的文件路径。
const filePath = fileurl; // 待上传文件的文件路径。
wx.uploadFile({
url: host, // 开发者服务器的URL。
filePath: filePath,
@ -982,6 +995,29 @@ Component({
},
moveZhuanChang(){
}
},
cropperload(e) {
console.log("cropper初始化完成");
},
loadimage(e) {
this.cropper = this.selectComponent("#image-cropper");
//重置图片角度、缩放、位置
this.cropper.imgReset();
this.triggerEvent('showPageMeta');
},
clickcut(e) {
console.log(e);
// //点击裁剪框阅览图片
// wx.previewImage({
// current: e.detail.url, // 当前显示图片的http链接
// urls: [e.detail.url] // 需要预览的图片http链接列表
// })
this.OSSUpload(e.detail.url)
this.setData({
show_cropper: false
})
this.triggerEvent('hidePageMeta');
},
}
})

View File

@ -21,6 +21,7 @@
"van-icon": "@vant/weapp/icon/index",
"van-search": "@vant/weapp/search/index",
"van-empty": "@vant/weapp/empty/index",
"van-image": "@vant/weapp/image/index"
"van-image": "@vant/weapp/image/index",
"image-cropper": "/commpents/image-cropper/image-cropper"
}
}

View File

@ -366,3 +366,5 @@
<van-toast id="van-toast" />
<image-cropper show_cropper="{{show_cropper}}" id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{img_cropper_width}}" height="{{img_cropper_height}}" imgSrc="{{img_cropper_src}}" disable_height="{{true}}" disable_width="{{true}}" disable_ratio="{{true}}" min_scale="0.1" max_scale="5" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>