@@ -7,7 +7,8 @@ Page({ | |||||
* 页面的初始数据 | * 页面的初始数据 | ||||
*/ | */ | ||||
data: { | data: { | ||||
isUploaded: false, | |||||
tempFilePath: "" | |||||
}, | }, | ||||
/** | /** | ||||
@@ -22,6 +23,7 @@ Page({ | |||||
* 生命周期函数--监听页面显示 | * 生命周期函数--监听页面显示 | ||||
*/ | */ | ||||
onShow() { | onShow() { | ||||
wx.hideHomeButton() | |||||
app.tokenCallBack = res => { | app.tokenCallBack = res => { | ||||
this.setData({ | this.setData({ | ||||
isLogin: res | isLogin: res | ||||
@@ -30,6 +32,20 @@ Page({ | |||||
}, | }, | ||||
chooseImage(e) { | |||||
const that = this | |||||
wx.chooseMedia({ | |||||
mediaType: ['image'], | |||||
sourceType: ['camera'], | |||||
camera: 'back', | |||||
success: res => { | |||||
that.setData({ | |||||
tempFilePath: res.tempFiles[0].tempFilePath, | |||||
isUploaded: true | |||||
}) | |||||
} | |||||
}) | |||||
}, | |||||
/** | /** | ||||
* 页面相关事件处理函数--监听用户下拉动作 | * 页面相关事件处理函数--监听用户下拉动作 | ||||
@@ -1,3 +1,6 @@ | |||||
{ | { | ||||
"navigationBarTitleText": "上传照片", | |||||
"navigationBarBackgroundColor": "#393b3d", | |||||
"navigationBarTextStyle": "white", | |||||
"usingComponents": {} | "usingComponents": {} | ||||
} | } |
@@ -1 +1,100 @@ | |||||
/* pages/upload/upload.wxss */ | |||||
/* pages/upload/upload.wxss */ | |||||
page { | |||||
background-color: #292929; | |||||
.content { | |||||
padding: 50rpx 0; | |||||
.title { | |||||
font-size: 45rpx; | |||||
text-align: center; | |||||
color: #ffffff; | |||||
font-weight: 600; | |||||
} | |||||
.uploadArea { | |||||
position: relative; | |||||
width: 60%; | |||||
height: 700rpx; | |||||
background-color: #393b3d; | |||||
margin: 50rpx auto; | |||||
border-radius: 40rpx; | |||||
.scanBorder { | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
width: 92%; | |||||
height: 85%; | |||||
} | |||||
.addBtn { | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
width: 25%; | |||||
} | |||||
.chooseImage { | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
width: 78%; | |||||
} | |||||
} | |||||
.uploadImgBtn { | |||||
width: 70%; | |||||
height: 100rpx; | |||||
line-height: 100rpx; | |||||
font-weight: 600; | |||||
background-color: #ff4f00; | |||||
color: #ffffff; | |||||
font-size: 32rpx; | |||||
text-align: center; | |||||
border-radius: 50rpx; | |||||
margin: auto; | |||||
} | |||||
.notice { | |||||
margin-top: 50rpx; | |||||
.text { | |||||
font-size: 23rpx; | |||||
color: #ffffff; | |||||
text-align: center; | |||||
margin-bottom: 40rpx; | |||||
} | |||||
.example { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: flex-end; | |||||
padding: 0 40rpx; | |||||
.item { | |||||
position: relative; | |||||
width: 28%; | |||||
&.right { | |||||
width: 32%; | |||||
} | |||||
.mainImg { | |||||
width: 100%; | |||||
} | |||||
.icon { | |||||
position: absolute; | |||||
top: -15rpx; | |||||
right: -15rpx; | |||||
width: 20%; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} |
@@ -1,2 +1,32 @@ | |||||
<!--pages/upload/upload.wxml--> | <!--pages/upload/upload.wxml--> | ||||
<text>pages/upload/upload.wxml</text> | |||||
<view class="content"> | |||||
<view class="title">请添加一整正脸照片</view> | |||||
<view class="uploadArea" bindtap="chooseImage"> | |||||
<image class="scanBorder" src="../../asset/icon/scanBorder.png" mode="" /> | |||||
<image wx:if="{{ !isUploaded }}" class="addBtn" src="../../asset/icon/add.png" mode="widthFix" /> | |||||
<image wx:if="{{ isUploaded }}" class="chooseImage" src="{{ tempFilePath }}" mode="widthFix" /> | |||||
</view> | |||||
<view> | |||||
<button class="uploadImgBtn" bindtap="chooseImage">上传照片</button> | |||||
</view> | |||||
<view class="notice"> | |||||
<view class="text">请参考范例上传五官清晰的照片</view> | |||||
<view class="example"> | |||||
<view class="item"> | |||||
<image class="mainImg" src="../../asset/image/img1.png" mode="widthFix" /> | |||||
<image class="icon" src="../../asset/icon/error.png" mode="widthFix" /> | |||||
</view> | |||||
<view class="item right"> | |||||
<image class="mainImg" src="../../asset/image/img2.png" mode="widthFix" /> | |||||
<image class="icon" src="../../asset/icon/correct.png" mode="widthFix" /> | |||||
</view> | |||||
<view class="item"> | |||||
<image class="mainImg" src="../../asset/image/img3.png" mode="widthFix" /> | |||||
<image class="icon" src="../../asset/icon/error.png" mode="widthFix" /> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> |