小程序日志模板

最新推荐文章于 2024-07-12 10:48:57 发布

离别又见离别

最新推荐文章于 2024-07-12 10:48:57 发布

阅读量565

点赞数

分类专栏：微信小程序文章标签：前端

本文链接：https://blog.csdn.net/weixin_43861630/article/details/105900765

版权

微信小程序专栏收录该内容

3 篇文章 1 订阅

订阅专栏

微信小程序

项目用的顺便做一下笔记
- 效果图
js
wxml
wxss
json

项目用的顺便做一下笔记

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": "拜访日志"
}

离别又见离别

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
小程序日志模板

微信小程序项目用的顺便做一下笔记jswxmlwxssjson项目用的顺便做一下笔记1.上传附件及上传图片dome(附件显示上传大小、文件名及文件类型)2.日期选择jsvar app = getApp();Page({ /** * 页面的初始数据 */ data: { tempFilePaths:'',//上传图片的地址 path: '', ...
复制链接

扫一扫

专栏目录