| @@ -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> | |||||