You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
jiansheng/pages/face/face.vue

249 lines
4.7 KiB

<template>
<view>
<image src="@/static/bg.png" mode="" style="width: 100%;height: 928rpx;"></image>
<view class="top" @click="previous">
<view class="xuzou">
<uni-icons type="left" size="18"></uni-icons>
<text class="title">人脸录入</text>
</view>
</view>
<view class="xinxirl">
<view class="xinxirl1">请录入人脸</view>
<view class="xinxirl2">本店需刷人脸进店请点击拍摄提前录入人脸哦!</view>
<view class="xinxirl3">
<image class="xinxirl3img" src="@/static/相机.png" mode=""></image>
</view>
</view>
<view class="fot">
<view class="tg">跳过</view>
<view class="ps" @click="pais">拍摄</view>
</view>
<uni-popup ref="popup" background-color="#fff" :mask-click='false'>
<view class="imgCropper">
<!-- <button @click="chooseImage">选择图片</button> -->
<view style="text-align:center;">
<image mode="widthFix" :src="path" @click="chooseImage"/>
</view>
<ksp-cropper :width="10" :height="10" :maxWidth="500" :maxHeight="500" :url="url" @cancel="oncancel" @ok="onok"></ksp-cropper>
</view>
<view class="qudbtn" @click="qudbtn">确定</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
url: "",
path: "",
yrenlianlist:[],
jqrllist:[]
}
},
methods: {
pais(){
this.$refs.popup.open('center')
this.chooseImage()
},
qudbtn(){
// this.$refs.popup.close('center')
// var tjlist=[...this.yrenlianlist,...this.jqrllist]
uni.uploadFile({
url: 'https://bodybuilding.njrenzhou.cn/api/uploadFile',
filePath:this.path,
name: 'file',
formData: {
'user': 'test'
},
success: (res) => {
console.log('tjlist',JSON.parse(res.data));
var data=JSON.parse(res.data)
this.$api.memberFace({face_id:data.data.file_id}).then(res=>{
this.$refs.popup.close('center')
})
}
});
},
chooseImage() {
var that=this
that.yrenlianlist=[]
uni.chooseImage({
count: 1,
success: function(res) {
console.log(111,res);
console.log(888,this);
that.url = res.tempFilePaths[0];
that.yrenlianlist.push(that.url)
}
});
},
onok(ev) {
this.jqrllist=[]
this.url = "";
this.path = ev.path;
this.jqrllist.push(this.path)
console.log('this.path',this.path);
},
oncancel() {
// url设置为空,隐藏控件
this.url = "";
},
previous() {
uni.navigateBack()
},
}
}
</script>
<style scoped>
.qudbtn{
height: 100rpx;
background: #F8A617;
box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(19,14,4,0.14);
border-radius: 50rpx;
line-height: 100rpx;
text-align: center;
font-family: PingFang SC;
font-weight: 500;
font-size: 36rpx;
color: #FFFFFF;
margin-bottom: 50rpx;
}
.imgCropper{
width: 750rpx;
height: 1200rpx;
position: relative;
}
.fot {
display: flex;
justify-content: space-around;
position: fixed;
left: 24rpx;
bottom: 103rpx;
}
.tg {
width: 330rpx;
height: 100rpx;
background: rgba(248, 166, 23, 0);
border-radius: 50rpx;
border: 1px solid #CCCCCC;
text-align: center;
line-height: 100rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 36rpx;
color: #333333;
}
.ps {
width: 330rpx;
height: 100rpx;
background: #F8A617;
box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(19, 14, 4, 0.14);
border-radius: 50rpx;
text-align: center;
line-height: 100rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 36rpx;
color: #FFFFFF;
margin-left: 42rpx;
}
.xinxirl3img {
width: 170rpx;
height: 144rpx;
margin-top: 120rpx;
}
.xinxirl {
text-align: center;
margin-top: -600rpx;
}
.xinxirl2 {
font-family: PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #999999;
margin-top: 49rpx;
}
.xinxirl1 {
font-family: PingFang SC;
font-weight: bold;
font-size: 48rpx;
color: #222222;
}
.top {
display: flex;
position: absolute;
top: 96rpx;
left: 20rpx;
}
.title {
padding-left: 14rpx;
}
.mddz1img2 {
width: 44rpx;
height: 44rpx;
float: right;
}
.mddz2 {
margin-top: 32rpx;
}
.dz {
margin-left: 17rpx;
}
.mddz1img1 {
width: 22rpx;
height: 27rpx;
}
.mddz1 {
display: flex;
}
.mddz1img {
width: 60rpx;
height: 60rpx;
}
.mddz1wz {
font-family: PingFang SC;
font-weight: bold;
font-size: 30rpx;
color: #222222;
margin-left: 21rpx;
margin-top: 12rpx;
}
.mddz {
width: 680rpx;
height: 152rpx;
background: #FFFFFF;
box-shadow: 0rpx 3rpx 9rpx 0rpx rgba(19, 14, 4, 0.08);
border-radius: 20rpx;
margin-top: 24rpx;
padding: 20rpx 17rpx;
}
.mendian {
position: absolute;
top: 152rpx;
left: 24rpx;
}
</style>