Browse Source

upload

master
HolyKnightIX 1 year ago
parent
commit
cbe74ccb65
11 changed files with 151 additions and 3 deletions
  1. BIN
      miniprogram/asset/icon/add.png
  2. BIN
      miniprogram/asset/icon/correct.png
  3. BIN
      miniprogram/asset/icon/error.png
  4. BIN
      miniprogram/asset/icon/scanBorder.png
  5. BIN
      miniprogram/asset/image/img1.png
  6. BIN
      miniprogram/asset/image/img2.png
  7. BIN
      miniprogram/asset/image/img3.png
  8. +17
    -1
      miniprogram/pages/upload/upload.js
  9. +3
    -0
      miniprogram/pages/upload/upload.json
  10. +100
    -1
      miniprogram/pages/upload/upload.less
  11. +31
    -1
      miniprogram/pages/upload/upload.wxml

BIN
miniprogram/asset/icon/add.png View File

Before After
Width: 79  |  Height: 79  |  Size: 2.3 KiB

BIN
miniprogram/asset/icon/correct.png View File

Before After
Width: 36  |  Height: 36  |  Size: 949 B

BIN
miniprogram/asset/icon/error.png View File

Before After
Width: 36  |  Height: 36  |  Size: 919 B

BIN
miniprogram/asset/icon/scanBorder.png View File

Before After
Width: 361  |  Height: 481  |  Size: 5.1 KiB

BIN
miniprogram/asset/image/img1.png View File

Before After
Width: 180  |  Height: 180  |  Size: 54 KiB

BIN
miniprogram/asset/image/img2.png View File

Before After
Width: 200  |  Height: 200  |  Size: 75 KiB

BIN
miniprogram/asset/image/img3.png View File

Before After
Width: 180  |  Height: 180  |  Size: 60 KiB

+ 17
- 1
miniprogram/pages/upload/upload.js View File

@@ -7,7 +7,8 @@ Page({
* 页面的初始数据
*/
data: {

isUploaded: false,
tempFilePath: ""
},

/**
@@ -22,6 +23,7 @@ Page({
* 生命周期函数--监听页面显示
*/
onShow() {
wx.hideHomeButton()
app.tokenCallBack = res => {
this.setData({
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
})
}
})
},

/**
* 页面相关事件处理函数--监听用户下拉动作


+ 3
- 0
miniprogram/pages/upload/upload.json View File

@@ -1,3 +1,6 @@
{
"navigationBarTitleText": "上传照片",
"navigationBarBackgroundColor": "#393b3d",
"navigationBarTextStyle": "white",
"usingComponents": {}
}

+ 100
- 1
miniprogram/pages/upload/upload.less View File

@@ -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%;
}
}
}
}
}
}

+ 31
- 1
miniprogram/pages/upload/upload.wxml View File

@@ -1,2 +1,32 @@
<!--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>

Loading…
Cancel
Save