项目用的顺便做一下笔记
1.上传附件及上传图片dome(附件显示上传大小、文件名及文件类型)
2.日期选择
效果图
js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
tempFilePaths:'',//上传图片的地址
path: '', //文件路径
filename: '', //文件名称
fileType:'',//文件类型
fileSize:'',
imgSrc:'',//文件icon路径
array: ['请选择','当前拜访', '到店参观', '到检', '其他'],
startDate: "请选择",
index: 0,
date: '请选择',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
bindDateChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
selectImage:function(e){
var that = this;
wx.showActionSheet({
itemList: ['从手机相册选择', '拍照'],
success: function (res) {
console.log(res.tapIndex)
if (res.tapIndex ==0){
that.chooseWxImage('album')
} else if (res.tapIndex == 1){
that.chooseWxImage('camera')
}
},
fail: function (res) {
console.log(res.errMsg)
}
})
},
chooseWxImage: function (type) {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type],
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
console.log('本地图片的路径:', tempFilePaths)
//console.log(res);
that.setData({
tempFilePaths: res.tempFilePaths[0],
})
}
})
},
bindPickerChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
previewWxImage: function (e) {
console.log(e, this.data.tempFilePaths)
var current = e.target.dataset.src
wx.previewImage({
current: current,
urls: [current]
})
},
fileUpload:function() {
var that = this;
wx.chooseMessageFile({
count: 1, //能选择文件的数量
type: 'file', //能选择文件的类型,现在允许上传文件.还有视频,图片,或者都可以
success(res) {
var size = res.tempFiles[0].size;
//console.log(that.sizeFileZh(size));
var filename = res.tempFiles[0].name;
var type = res.tempFiles[0].type;
var iconSrc = '';
console.log(res.tempFiles[0], res);
//var newfilename = filename + "";
// || newfilename.indexOf(".pdf") == -1
if (size > 4194304) { //限制文件的大小和具体文件类型
wx.showToast({
title: '文件大小不能超过4MB!',
icon: "none",
duration: 2000,
mask: true
})
} else {
size = that.sizeFileZh(res.tempFiles[0].size);
switch(type){
case "pdf":
iconSrc = '/images/iconPdf.png'
brack;
case "image":
iconSrc = '/images/iconTp.png';
break;
case "xlsx":
iconSrc = '/images/iconExcl.png';
break;
default:
iconSrc = '/images/iconWj.png';
}
console.log(res.tempFiles[0].path, filename);
//imgSrc
that.setData({
path: res.tempFiles[0].path, //将文件的路径保存在页面的变量上,方便 wx.uploadFile调用
filename: filename , //渲染到wxml方便用户知道自己选择了什么文件
fileType: type,
imgSrc: iconSrc,
fileSize: size
})
}
}
})
},
sizeFileZh: function (limit){
var size = "";
if (limit < 0.1 * 1024) { //如果小于0.1KB转化成B
size = limit.toFixed(2) + "B";
} else if (limit < 0.1 * 1024 * 1024) {//如果小于0.1MB转化成KB
size = (limit / 1024).toFixed(2) + "KB";
} else if (limit < 0.1 * 1024 * 1024 * 1024) { //如果小于0.1GB转化成MB
size = (limit / (1024 * 1024)).toFixed(2) + "MB";
} else { //其他转化成GB
size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
}
var sizestr = size + "";
var len = sizestr.indexOf("\.");
var dec = sizestr.substr(len + 1, 2);
if (dec == "00") {//当小数点后为00时 去掉小数部分
return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
}
return sizestr;
}
})
wxml
<!--pages/user/VisitLog.wxml-->
<view class="visitLogBox">
<view class="visitLogRows">
<view class="visitLogRowTop clearBox">
<text class="BtRed">*</text>
<text class="visitLogRowTitle">拜访单位名称</text>
</view>
<input class="VisitLoginput" placeholder="请输入" />
</view>
<view class="visitLogRows">
<view class="visitLogRowTop clearBox">
<text class="BtRed">*</text>
<text class="visitLogRowTitle">被拜访人姓名</text>
</view>
<input class="VisitLoginput" placeholder="请输入" />
</view>
<view class="visitLogRows">
<view class="visitLogRowTop clearBox">
<text class="BtRed">*</text>
<text class="visitLogRowTitle">被拜访人联系方式</text>
</view>
<input class="VisitLoginput" type="number" maxlength="11" placeholder="请输入数字" />
</view>
<view class="visitLogRows">
<view class="visitLogRowTop clearBox">
<text class="BtRed">*</text>
<text class="visitLogRowTitle">预计体检人数</text>
</view>
<input class="VisitLoginput" type="number" placeholder="请输入数字" />
</view>
<view class="visitLogRows">
<view class="visitLogRowTop clearBox">
<text class="BtRed">*</text>
<text class="visitLogRowTitle">预计体检时间</text>
</view>
<picker class='VisitLoginput weixin_time' mode="date" value="{{date}}" bindchange="bindDateChange">
{{date}}
</picker>
</view>
<view class="visitLogRows">
<view class="visitLogRowTop clearBox">
<text class="BtRed">*</text>
<text class="visitLogRowTitle">预计客单价</text>
</view>
<input class="VisitLoginput" type="number" placeholder="请输入数字" />
</view>
<view class="visitLogRows">
<view class="visitLogRowTop clearBox">
<text class="BtRed">*</text>
<text class="visitLogRowTitle">拜访方式</text>
</view>
<picker class='VisitLoginput weixin_time' bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
{{array[index]}}
</picker>
</view>
<view class="visitLogRows">
<view class="visitLogRowTop clearBox">
<text class="BtRed">*</text>
<text class="visitLogRowTitle">主要适宜</text>
</view>
<input class="VisitLoginput" placeholder="请输入" />
</view>
<view class="visitLogRows">
<view class="visitLogRowTop clearBox">
<text class="BtRed">*</text>
<text class="visitLogRowTitle">拜访结果</text>
</view>
<input class="VisitLoginput" placeholder="请输入" />
</view>
<view class="visitLogRows">
<view class="visitLogRowTop clearBox">
<text class="BtRed"></text>
<text class="visitLogRowTitle beizhu">备注</text>
</view>
<input class="VisitLoginput" placeholder="请输入" />
</view>
<view style="height:10px;width:100%;background:#ededed"></view>
<view class="visitLogRows clearBox" >
<view class="clearBox" bindtap="selectImage">
<view class="tup_left">
<text class="title_tp">图片</text>
</view>
<view class="tup_right">
<image class="tup_img" src="/images/xiangce.png"></image>
</view>
</view>
<view class="img_box" >
<image src="{{tempFilePaths }}" wx:if="{{tempFilePaths !== ''}}" bindTap="previewWxImage" data-src="{{tempFilePaths}}" />
</view>
</view>
<view class="visitLogRows clearBox">
<view class="clearBox" bindtap="fileUpload">
<view class="tup_left">
<text class="title_tp">附件</text>
</view>
<view class="tup_right">
<image class="tup_img" src="/images/fujian.png"></image>
</view>
</view>
<view class="clearBox" wx:if="{{imgSrc !== ''}}">
<view class="fileLeft">
<image class="iconImg" src="{{imgSrc}}" wx:if="{{imgSrc !== ''}}"></image>
</view>
<view class="fileContent clearBox">
<text class="fileName">{{filename}}</text>
<text class="fileSize">{{fileSize}}</text>
</view>
<!--<text wx:if="{{filename !== ''}}">{{filename}}</text>-->
</view>
</view>
<view style="height:80px;width:100%"></view>
<view class="VisitLogBottom clearBox">
<view class="leftSee clearBox">
<navigator url="../user/LogList">
<view class="clearBox">
<image class="imgKrz" src="/images/krz.png"></image>
<text class="krzA">看日志</text>
</view>
</navigator>
</view>
<view class="rightSub">
<button class="tjrz">提交日志</button>
</view>
</view>
</view>
wxss
.clearBox::after{
content: "";
display: block;
clear: both;
}
.visitLogBox{
height: 100%;
position: relative;
}
page{
height: 100%;
}
.visitLogRows{
padding: 10px;
border-bottom: 1px solid #eeeeee;
}
.visitLogRowTop{
}
.BtRed{
color: red;
margin-right: 5px;
}
.visitLogRowTitle{
font-size: 16px;
}
.VisitLoginput{
font-size: 16px;
padding-left: 14px;
box-sizing: border-box;
margin-top: 2px;
color: #666666;
}
.weixin_time{
color: #666666;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:#e8e8e8;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #e8e8e8;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #e8e8e8;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #e8e8e8;
}
.beizhu{
margin-left: 8px;
}
.VisitLogBottom{
position: fixed;
bottom: 0px;
width: 100%;
padding: 10px 5px;
box-sizing: border-box;
border-top: 1px solid #eeeeee;
background: #FFFFFF;
z-index: 66;
}
.leftSee{
width: 25%;
text-align: center;
float: left;
}
.imgKrz{
width: 25px;
height: 25px;
}
.krzA{
display: block;
color: #666666;
font-size: 14px;
}
.tjrz{
background: #1296db;
color: #FFFFFF;
border-radius: 10px!important;
}
.rightSub{
width: 74%;
float: right;
padding-right: 10px;
box-sizing: border-box;
padding-top: 6px;
}
.tup_left{
width: 150px;
float: left;
padding-left: 12px;
box-sizing: border-box;
line-height: 59px;
}
.title_tp{
}
.tup_right{
width:25px;
float: right;
height: 25px;
margin-top: 19px;
margin-right: 10px;
}
.tup_img{
width: 100%;
height: 100%;
display: block;
}
.fileLeft{
width: 36px;
height: 36px;
float: left;
margin-top: ;
margin-right: 10px;
margin-left: 10px;
}
.iconImg{
width: 100%;
height: 100%;
}
.fileContent{
width: 60%;
height: 45px;
float: left;
}
.fileName{
display: block;
font-size: 15px;
color: #666666;
}
.fileSize{
display: block;
font-size: 12px;
color: #999999;
}
json
{
"navigationBarTitleText": "拜访日志"
}