【小程序开发】基本信息页面源码（头像、二维码上传，省市县地区选择，公司选择，名字输入等）

wxml：

<!--上传头像  -->
<view class="section">
  <view class='left'>头像</view>
  <view class='middle'>
    <!--图片展示 -->
    <view bindtap='upEwm' data-which='1'>
      <image style='80rpx;height:80rpx;background-color:red;border-radius:50%' src='{{headImg}}'></image>
    </view>
  </view>
  <view class='right'>></view>
</view>


<!--姓名  -->
<view class="section">
  <view class='left'>姓名</view>
  <view class='middle'>
    <!--input-->
    <input type='text' name="name" placeholder='请输入姓名'></input>
  </view>
  <view class='right'>></view>
</view>
<!--公司 -->
<view class="section" bindtap='selectCompany' >
  <view class='left'>公司</view>
  <view class='middle'>
    <!--input-->
    {{companySelected}}
  </view>
  <view class='right'>></view>
</view>
<!--职务  -->
<view class="section">
  <view class='left'>职务</view>
  <view class='middle'>
    <!--input-->
    <input type='text' name="name" placeholder='请输入职位'></input>
  </view>
  <view class='right'>></view>
</view>

<!--上传地区  -->
<view class="section">
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      <view class='left'>所在地区：</view>
      <view class='middle'> {{region[0]}}-{{region[1]}}-{{region[2]}}</view>
      <view class='right'>></view>
    </view>
  </picker>
</view>

<!--上传二维码  -->
<view class="section">
  <view class='left'>个人二维码</view>
  <view class='middle'>
    <!--图片展示 -->
    <view bindtap='upEwm' data-which='2'>
      <image style='80rpx;height:80rpx;background-color:red' src='{{ewmImg}}'></image>
    </view>
  </view>
  <view class='right'>></view>
</view>


<!--裁剪图片浮层-->
<view class='fixed-upimg' wx:if="{{imageFixed}}">
  <view class="wx-content-info">
    <!-- <view class="wx-content-info" wx:if="{{imageSrc}}"> -->
    <view wx:if="{{isShowImg}}" class="wx-corpper" style="{{cropperInitW}}rpx;height:{{cropperInitH}}rpx;background:#000">
      <view bindtap='upLoad' class="wx-corpper-content" style="{{cropperW}}rpx;height:{{cropperH}}rpx;left:{{cropperL}}rpx;top:{{cropperT}}rpx">
        <image src="{{imageSrc}}" style="{{cropperW}}rpx;height:{{cropperH}}rpx"></image>
        <view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing" style="{{cutW}}rpx;height:{{cutH}}rpx;left:{{cutL}}rpx;top:{{cutT}}rpx">
          <view class="wx-cropper-view-box">
            <!-- <view class="wx-cropper-viewer">
            <image src="{{imageSrc}}" style="{{cropperW}}rpx;height:{{cropperH}}rpx;left:{{cropperL - cutL}}rpx;top:{{cropperT - cutT}}rpx"></image>
          </view> -->
            <view class="wx-cropper-dashed-h"></view>
            <view class="wx-cropper-dashed-v"></view>
            <view class="wx-cropper-line-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-line-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-line-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-line-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-point point-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-point point-tr" data-drag="topTight"></view>
            <view class="wx-cropper-point point-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-point point-rb" data-drag="rightBottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-point point-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-point point-bl" data-drag="bottomLeft"></view>
            <view class="wx-cropper-point point-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-point point-lt" data-drag="leftTop"></view>
          </view>
        </view>
      </view>
      <!-- <view class="wx-cropper-drag-box"></view> -->
    </view>
    <canvas canvas-id="myCanvas" style="position:absolute;border: 1px solid red; {{imageW}}rpx;height:{{imageH}}rpx;top:-9999px;left:-9999px;"></canvas>
    <button type="primary" bindtap="getImageInfo" style="position:fixed;bottom:120rpx;90%;left:50%;transform:translate3d(-50%,0,0)"> 确认提交 </button>

  </view>
</view>


<!--选择公司 -->
<!--选择公司弹窗-->
<view class="company_fixed_list" wx:if="{{dialogComapny}}">
  <view class="company_new_fixed">
    <view class="company_new_area">
      <view class="line_x"></view>
      <view class="company_lists" id="commend_list">
        <!-- <li class="selected_css" id="selected_comp"></li> -->
        <text class="comp {{beforeSelect == 1?'selected_css':''}}">{{companySelected}}</text>
        <text data-num="{{index}}" data-company="{{item}}" class="comp {{_num == index?'selected_css':''}}" wx:for="{{companyList}}" bindtap="menuClick" >{{item}}</text>
    
      </view>
      <view class="title_line_x">A-F</view>
      <view class="company_lists" id="company_af">
        <text class="comp">中国人保</text>
        <text class="comp">中国人保</text>
        <text class="comp">中国人保</text>
        <text class="comp">中国人保</text>
      </view>
      <view class="title_line_x">G-L</view>
      <view class="company_lists" id="company_gl">

      </view>
      <view class="title_line_x">M-R</view>
      <view class="company_lists" id="company_mr">

      </view>
      <view class="title_line_x">S-Z</view>
      <view class="company_lists" id="company_sz">
        <text class="comp">中国人保</text>
        <text class="comp">中国人保</text>
        <text class="comp">中国人保</text>
        <text class="comp">中国人保</text>
        <text class="comp">中国人保</text>
        <text class="comp">中国人保</text>
      </view>
      <view class="writer_input" bindtap='moreCompany' >找不到我的公司，点这里>></view>
    </view>
  </view>
</view>
<!---->

<!--手动输入公司弹窗  -->
<view class="write_dialog" wx:if="{{writeComapny}}" >
  <view class="dialog-wrap">
    <view class="dialog-mask"></view>
    <view class="dialog-ct">
      <view class="dialog-hd">手动输入</view>
      <view class="dialog-bd">

        <input type="text" bindinput="bindcomInput" name="text-company" maxlength="10" placeholder="请输入公司名字，10个字内"></input>

      </view>
      <view class="dialog-ft clearfix">
        <button type="submit" class="phone-submit-btn" bindtap='subCompany' >确定</button>
      </view>
      <view class="dialog-close-btn" bindtap='close'>
        <text class="i-close"></text>
      </view>
    </view>
  </view>
</view>
<!---->

　　js：

// Page({
//   data: {
//     // index: 0,  
//     // multiIndex: [0, 0, 0], 
//     region: ['广东省', '广州市', '海珠区'],
//     // customItem: '全部'
//   },
  // bindPickerChange: function (e) {
  //   console.log('picker发送选择改变，携带值为', e.detail.value)
  //   this.setData({
  //     index: e.detail.value
  //   })
  // },
  // bindMultiPickerChange: function (e) {
  //   console.log('picker发送选择改变，携带值为', e.detail.value)
  //   this.setData({
  //     multiIndex: e.detail.value
  //   })
  // },

//   bindRegionChange: function (e) {
//     console.log('picker发送选择改变，携带值为', e.detail.value)
//     this.setData({
//       region: e.detail.value
//     })
//   }
// })


// pages/wx-cropper/index.js
// 手机的宽度
var windowWRPX = 750
// 拖动时候的 pageX
var pageX = 0
// 拖动时候的 pageY
var pageY = 0

var pixelRatio = wx.getSystemInfoSync().pixelRatio

// 调整大小时候的 pageX
var sizeConfPageX = 0
// 调整大小时候的 pageY
var sizeConfPageY = 0

var initDragCutW = 0
var initDragCutL = 0
var initDragCutH = 0
var initDragCutT = 0

// 移动时 手势位移与 实际元素位移的比
var dragScaleP = 2

Page({
  /**
   * 页面的初始数据
   */
  data: {
    imageNum: '', //上传的图片id
    headImg: '', //头像上传
    ewmImg: '', //二维码上传
    imageFixed: false, //裁剪浮层
    // imageSrc: 'http://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/images/testimg2.jpeg',
    imageSrc: '', //要裁剪的图片
    returnImage: '',
    isShowImg: false,
    // 初始化的宽高
    cropperInitW: windowWRPX,
    cropperInitH: windowWRPX,
    // 动态的宽高
    cropperW: windowWRPX,
    cropperH: windowWRPX,
    // 动态的left top值
    cropperL: 0,
    cropperT: 0,

    // 图片缩放值
    scaleP: 0,
    imageW: 0,
    imageH: 0,

    // 裁剪框 宽高
    cutW: 400,
    cutH: 400,
    cutL: 0,
    cutT: 0,
    region: ['广东省', '广州市', '海珠区'],
    writeComapny:false,
    dialogComapny:false,
    companyList:['中国平安','太平洋公司','富的生命人寿保险'],
    _num:'-1',
    companySelected:'', //最终选中的公司
    beforeSelect:1, //之前选中的0为未选中1为选中
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onReady: function (options) {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onLoad: function () {
    var _this = this

    // wx.showLoading({
    //   title: '图片加载中...',
    // })

    wx.getImageInfo({
      src: _this.data.imageSrc,
      success: function success(res) {
        var innerAspectRadio = res.width / res.height;
        console.log(innerAspectRadio)
        // 根据图片的宽高显示不同的效果   保证图片可以正常显示
        if (innerAspectRadio >= 1) {
          _this.setData({
            cropperW: windowWRPX,
            cropperH: windowWRPX / innerAspectRadio,
            // 初始化left right
            cropperL: Math.ceil((windowWRPX - windowWRPX) / 2),
            cropperT: Math.ceil((windowWRPX - windowWRPX / innerAspectRadio) / 2),
            // 裁剪框  宽高 
            // cutW: windowWRPX - 200,
            // cutH: windowWRPX / innerAspectRadio - 200,
            cutL: Math.ceil((windowWRPX - windowWRPX + 340) / 2),
            cutT: Math.ceil((windowWRPX / innerAspectRadio - (windowWRPX / innerAspectRadio - 20)) / 2),
            // 图片缩放值
            scaleP: res.width * pixelRatio / windowWRPX,
            // 图片原始宽度 rpx
            imageW: res.width * pixelRatio,
            imageH: res.height * pixelRatio
          })
        } else {
          _this.setData({
            cropperW: windowWRPX * innerAspectRadio,
            cropperH: windowWRPX,
            // 初始化left right
            cropperL: Math.ceil((windowWRPX - windowWRPX * innerAspectRadio) / 2),
            cropperT: Math.ceil((windowWRPX - windowWRPX) / 2),
            // 裁剪框的宽高
            // cutW: windowWRPX * innerAspectRadio - 66,
            // cutH: 400,
            cutL: Math.ceil((windowWRPX * innerAspectRadio - (windowWRPX * innerAspectRadio - 20)) / 2),
            cutT: Math.ceil((windowWRPX - 340) / 2),
            // 图片缩放值
            scaleP: res.width * pixelRatio / windowWRPX,
            // 图片原始宽度 rpx
            imageW: res.width * pixelRatio,
            imageH: res.height * pixelRatio
          })
        }
        _this.setData({
          isShowImg: true
        })
        wx.hideLoading()
      }
    })
  },

  // 拖动时候触发的touchStart事件
  contentStartMove(e) {
    pageX = e.touches[0].pageX
    pageY = e.touches[0].pageY
  },

  // 拖动时候触发的touchMove事件
  contentMoveing(e) {
    var _this = this
    // _this.data.cutL + (e.touches[0].pageX - pageX)
    // console.log(e.touches[0].pageX)
    // console.log(e.touches[0].pageX - pageX)
    var dragLengthX = (pageX - e.touches[0].pageX) * dragScaleP
    var dragLengthY = (pageY - e.touches[0].pageY) * dragScaleP
    var minX = Math.max(_this.data.cutL - (dragLengthX), 0)
    var minY = Math.max(_this.data.cutT - (dragLengthY), 0)
    var maxX = _this.data.cropperW - _this.data.cutW
    var maxY = _this.data.cropperH - _this.data.cutH
    this.setData({
      cutL: Math.min(maxX, minX),
      cutT: Math.min(maxY, minY),
    })
    console.log(`${maxX} ----- ${minX}`)
    pageX = e.touches[0].pageX
    pageY = e.touches[0].pageY
  },

  // 获取图片
  getImageInfo() {
    var _this = this
    console.log('shengcheng:' + _this.data.imageSrc)
    wx.showLoading({
      title: '图片生成中...',
    })
    // wx.downloadFile({
    //   url:_this.data.imageSrc, //仅为示例，并非真实的资源     
    //   success: function (res) {
    // 将图片写入画布             
    const ctx = wx.createCanvasContext('myCanvas')
    // ctx.drawImage(res.tempFilePath)
    ctx.drawImage(_this.data.imageSrc)

    ctx.draw(true, () => {
      // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题
      var canvasW = (_this.data.cutW / _this.data.cropperW) * (_this.data.imageW / pixelRatio)
      var canvasH = (_this.data.cutH / _this.data.cropperH) * (_this.data.imageH / pixelRatio)
      var canvasL = (_this.data.cutL / _this.data.cropperW) * (_this.data.imageW / pixelRatio)
      var canvasT = (_this.data.cutT / _this.data.cropperH) * (_this.data.imageH / pixelRatio)
      console.log(`canvasW:${canvasW} --- canvasH: ${canvasH} --- canvasL: ${canvasL} --- canvasT: ${canvasT} -------- _this.data.imageW: ${_this.data.imageW}  ------- _this.data.imageH: ${_this.data.imageH} ---- pixelRatio ${pixelRatio}`)
      wx.canvasToTempFilePath({
        x: canvasL,
        y: canvasT,
         canvasW,
        height: canvasH,
        destWidth: canvasW,
        destHeight: canvasH,
        canvasId: 'myCanvas',
        success: function (res) {
          wx.hideLoading()
          // 成功获得地址的地方
          console.log('end:' + res.tempFilePath)
          // 判断时上传头像还是二维码
          _this.setData({
            imageFixed: false,
          })
          if (_this.data.imageNum == '1') {
            _this.setData({
              headImg: res.tempFilePath
            })
          } else if (_this.data.imageNum == '2') {
            _this.setData({
              ewmImg: res.tempFilePath
            })
          }

        }
      })
    })
    //   }


    // })
  },

  // 设置大小的时候触发的touchStart事件
  dragStart(e) {
    var _this = this
    sizeConfPageX = e.touches[0].pageX
    sizeConfPageY = e.touches[0].pageY
    initDragCutW = _this.data.cutW
    initDragCutL = _this.data.cutL
    initDragCutT = _this.data.cutT
    initDragCutH = _this.data.cutH
  },

  // 设置大小的时候触发的touchMove事件
  dragMove(e) {
    var _this = this
    var dragType = e.target.dataset.drag
    switch (dragType) {
      case 'right':
        var dragLength = (sizeConfPageX - e.touches[0].pageX) * dragScaleP
        if (initDragCutW >= dragLength) {
          // 如果 移动小于0 说明是在往下啦  放大裁剪的高度  这样一来 图片的高度  最大 等于 图片的top值加 当前图片的高度  否则就说明超出界限
          if (dragLength < 0 && _this.data.cropperW > initDragCutL + _this.data.cutW) {
            this.setData({
              cutW: initDragCutW - dragLength
            })
          }
          // 如果是移动 大于0  说明在缩小  只需要缩小的距离小于原本裁剪的高度就ok
          if (dragLength > 0) {
            this.setData({
              cutW: initDragCutW - dragLength
            })
          }
          else {
            return
          }
        } else {
          return
        }
        break;
      case 'left':
        var dragLength = (dragLength = sizeConfPageX - e.touches[0].pageX) * dragScaleP
        console.log(dragLength)
        if (initDragCutW >= dragLength && initDragCutL > dragLength) {
          if (dragLength < 0 && Math.abs(dragLength) >= initDragCutW) return
          this.setData({
            cutL: initDragCutL - dragLength,
            cutW: initDragCutW + dragLength
          })
        } else {
          return;
        }
        break;
      case 'top':
        var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
        if (initDragCutH >= dragLength && initDragCutT > dragLength) {
          if (dragLength < 0 && Math.abs(dragLength) >= initDragCutH) return
          this.setData({
            cutT: initDragCutT - dragLength,
            cutH: initDragCutH + dragLength
          })
        } else {
          return;
        }
        break;
      case 'bottom':
        var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
        // console.log(_this.data.cropperH > _this.data.cutT + _this.data.cutH)
        console.log(dragLength)
        console.log(initDragCutH >= dragLength)
        console.log(_this.data.cropperH > initDragCutT + _this.data.cutH)
        // 必须是 dragLength 向上缩小的时候必须小于原本的高度
        if (initDragCutH >= dragLength) {
          // 如果 移动小于0 说明是在往下啦  放大裁剪的高度  这样一来 图片的高度  最大 等于 图片的top值加 当前图片的高度  否则就说明超出界限
          if (dragLength < 0 && _this.data.cropperH > initDragCutT + _this.data.cutH) {
            this.setData({
              cutH: initDragCutH - dragLength
            })
          }
          // 如果是移动 大于0  说明在缩小  只需要缩小的距离小于原本裁剪的高度就ok
          if (dragLength > 0) {
            this.setData({
              cutH: initDragCutH - dragLength
            })
          }
          else {
            return
          }
        } else {
          return
        }
        break;
      case 'rightBottom':
        var dragLengthX = (sizeConfPageX - e.touches[0].pageX) * dragScaleP
        var dragLengthY = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
        if (initDragCutH >= dragLengthY && initDragCutW >= dragLengthX) {
          // bottom 方向的变化
          if ((dragLengthY < 0 && _this.data.cropperH > initDragCutT + _this.data.cutH) || (dragLengthY > 0)) {
            this.setData({
              cutH: initDragCutH - dragLengthY
            })
          }

          // right 方向的变化
          if ((dragLengthX < 0 && _this.data.cropperW > initDragCutL + _this.data.cutW) || (dragLengthX > 0)) {
            this.setData({
              cutW: initDragCutW - dragLengthX
            })
          }
          else {
            return
          }
        } else {
          return
        }
        break;
      default:
        break;
    }
  },
  // 图片上传
  upLoad: function () {

  },
  upEwm: function (e) {
    var _this = this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        // var mode = parseFloat(e.currentTarget.dataset.current);
        console.log('shangchuan:' + tempFilePaths)
        console.log(e.currentTarget.dataset.which);
        _this.setData({
          imageFixed: true,
          imageSrc: tempFilePaths.join(),
          imageNum: e.currentTarget.dataset.which
        })
        // start
        wx.getImageInfo({
          src: _this.data.imageSrc,
          success: function success(res) {
            var innerAspectRadio = res.width / res.height;
            console.log('bili' + innerAspectRadio)
            // 根据图片的宽高显示不同的效果   保证图片可以正常显示


            if (innerAspectRadio == '1') {
              console.log('zhengfangxingtu')
              _this.setData({
                imageFixed: false,
              })
              // 判断时上传头像还是二维码
              if (_this.data.imageNum == '1') {
                _this.setData({
                  headImg: tempFilePaths.join()
                })
              } else if (_this.data.imageNum == '2') {
                _this.setData({
                  ewmImg: tempFilePaths.join()
                })
              }

            } else if (innerAspectRadio > 1) {
              _this.setData({
                cropperW: windowWRPX,
                cropperH: windowWRPX / innerAspectRadio,
                // 初始化left right
                cropperL: Math.ceil((windowWRPX - windowWRPX) / 2),
                cropperT: Math.ceil((windowWRPX - windowWRPX / innerAspectRadio) / 2),
                // 裁剪框  宽高 
                // cutW: windowWRPX - 200,
                // cutH: windowWRPX / innerAspectRadio - 200,
                cutL: Math.ceil((windowWRPX - windowWRPX + 340) / 2),
                cutT: Math.ceil((windowWRPX / innerAspectRadio - (windowWRPX / innerAspectRadio - 20)) / 2),
                // 图片缩放值
                scaleP: res.width * pixelRatio / windowWRPX,
                // 图片原始宽度 rpx
                imageW: res.width * pixelRatio,
                imageH: res.height * pixelRatio
              })
            } else {
              _this.setData({
                cropperW: windowWRPX * innerAspectRadio,
                cropperH: windowWRPX,
                // 初始化left right
                cropperL: Math.ceil((windowWRPX - windowWRPX * innerAspectRadio) / 2),
                cropperT: Math.ceil((windowWRPX - windowWRPX) / 2),
                // 裁剪框的宽高
                // cutW: windowWRPX * innerAspectRadio - 66,
                // cutH: 400,
                cutL: Math.ceil((windowWRPX * innerAspectRadio - (windowWRPX * innerAspectRadio - 20)) / 2),
                cutT: Math.ceil((windowWRPX - 340) / 2),
                // 图片缩放值
                scaleP: res.width * pixelRatio / windowWRPX,
                // 图片原始宽度 rpx
                imageW: res.width * pixelRatio,
                imageH: res.height * pixelRatio
              })
            }
            _this.setData({
              isShowImg: true
            })
            wx.hideLoading()
          }
        })

        // end
      }
    })
  },
  // 地区选择
  bindRegionChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  },
// 公司自定义输入
  bindcomInput: function(e){
    this.setData({
      companySelected: e.detail.value
    })
  },
// 点击选择公司
  selectCompany: function(e){
    this.setData({
      dialogComapny:true
    })
  },
  // 自定义输入公司
  moreCompany: function(e){
    this.setData({
      writeComapny: true
    })
  },
  //自定义公司确定提交
  subCompany: function(e){
    this.setData({
      writeComapny: false,
      dialogComapny: false
    })
  },
  // 关闭弹窗
  close: function(){
    this.setData({
      writeComapny:false
    })
  },
  // 点击公司选中
  menuClick: function(e){
    this.setData({
      _num: e.target.dataset.num,
      companySelected: e.target.dataset.company,
      dialogComapny: false,
      beforeSelect:0
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

　　wxss：

@import "../lib/weui.wxss";
/* 
设计稿750px宽度 
是 1px = 1rpx 
设计稿640px宽度 
需要转换一下 1px = 750/640 rpx=1.171875rpx; */

.picker{
    background-color: #FFFFFF;
}
/*裁剪图片*/

/* pages/wx-cropper/index.wxss */
.fixed-upimg{
    position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 11;
}
.wx-content-info{
  position: fixed;
  top: 130rpx;
  left: 0;
  right: 0;
  bottom: 0;

}

.wx-corpper{
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  box-sizing: border-box;
}

.wx-corpper-content{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.wx-corpper-content image {
    display: block;
     100%;
    min- 0 !important;
    max- none !important;
    height: 100%;
    min-height: 0 !important;
    max-height: none !important;
    image-orientation: 0deg !important;
    margin: 0 auto;
}

/* 移动图片效果 */
.wx-cropper-drag-box{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: move;
    background: rgba(0,0,0,0.6);
    z-index: 1;
}

/* 内部的信息 */
.wx-corpper-crop-box{
    position: absolute;
     500rpx;
    height: 500rpx;
    background: rgba(255,255,255,0.3); 
    z-index: 2;
}

.wx-corpper-crop-box .wx-cropper-view-box {
    position: relative;
    display: block;
     100%;
    height: 100%;
    overflow: visible;
    outline: 1px solid #69f;
    outline-color: rgba(102, 153, 255, .75)
}

/* 横向虚线 */
.wx-cropper-dashed-h{
    position: absolute;
    top: 33.33333333%;
    left: 0;
     100%;
    height: 33.33333333%;
    border-top: 1px dashed rgba(255,255,255,0.5);
    border-bottom: 1px dashed rgba(255,255,255,0.5);
}

/* 纵向虚线 */
.wx-cropper-dashed-v{
    position: absolute;
    left: 33.33333333%;
    top: 0;
     33.33333333%;
    height: 100%;
    border-left: 1px dashed rgba(255,255,255,0.5);
    border-right: 1px dashed rgba(255,255,255,0.5);
}

/* 四个方向的线  为了之后的拖动事件*/
.wx-cropper-line-t{
    position: absolute;
    display: block;
     100%;
    background-color: #69f;
    top: 0;
    left: 0;
    height: 1px;
    opacity: 0.1;
    cursor: n-resize;
}

.wx-cropper-line-t::before{
  content: '';
  position: absolute;
  top: 50%;
  right: 0rpx;
   100%;
  -webkit-transform: translate3d(0,-50%,0);
  transform: translate3d(0,-50%,0);
  bottom: 0;
  height: 41rpx;
  background: transparent;
  z-index: 11;
}

.wx-cropper-line-r{
    position: absolute;
    display: block;
    background-color: #69f;
    top: 0;
    right: 0px;
     1px;
    opacity: 0.1;
    height: 100%;
    cursor: e-resize;
}
.wx-cropper-line-r::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
   41rpx;
  -webkit-transform: translate3d(-50%,0,0);
  transform: translate3d(-50%,0,0);
  bottom: 0;
  height: 100%;
  background: transparent;
  z-index: 11;
}

.wx-cropper-line-b{
    position: absolute;
    display: block;
     100%;
    background-color: #69f;
    bottom: 0;
    left: 0;
    height: 1px;
    opacity: 0.1;
    cursor: s-resize;
}

.wx-cropper-line-b::before{
  content: '';
  position: absolute;
  top: 50%;
  right: 0rpx;
   100%;
  -webkit-transform: translate3d(0,-50%,0);
  transform: translate3d(0,-50%,0);
  bottom: 0;
  height: 41rpx;
  background: transparent;
  z-index: 11;
}

.wx-cropper-line-l{
    position: absolute;
    display: block;
    background-color: #69f;
    top: 0;
    left: 0;
     1px;
    opacity: 0.1;
    height: 100%;
    cursor: w-resize;
}
.wx-cropper-line-l::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
   41rpx;
  -webkit-transform: translate3d(-50%,0,0);
  transform: translate3d(-50%,0,0);
  bottom: 0;
  height: 100%;
  background: transparent;
  z-index: 11;
}

.wx-cropper-point{
     5px;
    height: 5px;
    background-color: #69f;
    opacity: .75;
    position: absolute;
    z-index: 3;
}

.point-t{
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize;
}

.point-tr{
    top: -3px;
    left: 100%;
    margin-left: -3px;
    cursor: n-resize;
}

.point-r{
    top: 50%;
    left:100%;
    margin-left: -3px;
    margin-top: -3px;
    cursor: n-resize;
}

.point-rb{
    left: 100%;
    top: 100%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    cursor: n-resize;
     24rpx;
    height: 24rpx;
    background-color: #69f;
    position: absolute;
    z-index: 1112;
    opacity: 1;
}

.point-b{
    left:50%;
    top: 100%;
    margin-left: -3px;
    margin-top: -3px;
    cursor: n-resize;
}

.point-bl{
    left:0%;
    top: 100%;
    margin-left: -3px;
    margin-top: -3px;
    cursor: n-resize;
}

.point-l{
    left:0%;
    top: 50%;
    margin-left: -3px;
    margin-top: -3px;
    cursor: n-resize;
}

.point-lt{
    left:0%;
    top: 0%;
    margin-left: -3px;
    margin-top: -3px;
    cursor: n-resize;
}

/* 裁剪框预览内容 */
.wx-cropper-viewer{
  position: relative;
   100%;
  height: 100%;
  overflow: hidden;
}

.wx-cropper-viewer image{
  position: absolute;
  z-index: 2;
}
/*页面样式  */
.section{
   94%;
  margin-left: 6%;
  font-size: 30rpx;
  border-bottom: solid 1px #999;
  height: 100rpx;
  line-height: 100rpx;
  overflow: hidden;
}
.left{
  float: left;
   40%;
  text-align: left;
}
.middle{
   52%;
  float: left;
  text-align: right
}
.right{
   8%;
  float: right;
  text-align: center
}
.middle input{
   100%;
  height: 50rpx;
  text-align: right;
  margin-top: 25rpx;
}
.middle image{
  margin-top: 10rpx;
}

/*选择公司的弹窗  */
/*新增公司库弹窗*/
.company_fixed_list{
	position: fixed;
	top: 0;
	left: 0;
	 100%;
	height: 100%;
	background-color: #f1f1f1;
	z-index:7;
}
.company_new_fixed{
	position: absolute;
	top:30rpx;
	left: 0;
	 100%;
	height: 100%;
		overflow:scroll;
-webkit-overflow-scrolling:touch;
}
.company_new_area{
	/*overflow:scroll;  
-webkit-overflow-scrolling:touch;*/
	position: absolute;
   100%;
}
.company_fixed_list .company_lists{
	overflow: hidden;
}
.company_fixed_list .line_x{
	 95%;
	margin: auto;
	height: 1px;
	background-color: #dcdcdc;
	margin-top: 20rpx;
}
.company_fixed_list .title_line_x{
	 95%;
	margin: auto;
	color: #666;
	font-size: 32rpx;
	border-bottom: 1px solid #999;
	margin-top: 26rpx;
}
.company_fixed_list .writer_input{
	color: #666;
	font-size: 30rpx;
	text-decoration: underline;
	text-align: center;
	margin-bottom: 50rpx;
	margin-top: 80rpx;
}
.company_fixed_list .company_lists .selected_css{
	color: #fff;
	background-color: #F04E33!important;
}
.company_fixed_list .company_lists .comp{
	font-size: 28rpx;
	float: left;
	 30%;
	height: 66rpx;
  line-height: 66rpx;
	margin-left: 2.4%;
	background-color: #fff;
	border-radius: 1px;
	text-align: center;
	margin-top: 20rpx;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	cursor:pointer
}

/*新增输入公司弹窗*/
.write_dialog .dialog-ct{
	 80%;
    height: 380rpx;
    margin-top: -190rpx;
    margin-left: -40%;
}
.write_dialog  input[name="text-company"] {
    display: block;
     80%;
    height: 80rpx;
    line-height: 80rpx;
    margin: 40rpx auto 0;
    box-sizing: border-box;
    padding: 20rpx;
    font-size: 26rpx;
    color: #333;
    background: #e6e6e6;
    text-align: left;
 }
 .write_dialog .phone-submit-btn {
 	font-size: 28rpx;
    display: block;
     300rpx;
    height: 66rpx;
    line-height: 66rpx;
    margin: 30rpx auto 0;
    color: #fff;
    text-align: center;
    border-radius: 15rpx;
    background: #f05e5e;
} 
.basic-info-wrap #company-select{
    float: right;
     400rpx;
    height: 100%;
    text-align: right;
    color: #999;
    direction: rtl;
    text-transform: none;
    font-size:28rpx;
}  
/*end*/

.dialog-wrap {
	position: fixed;
	top: 0;
	right: 0;
   100%;
  height: 100%;
	z-index: 991;
}

.dialog-wrap .dialog-mask {
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
}


.dialog-wrap.active {
	display: block
}

.dialog-wrap .dialog-ct {
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff
}

.dialog-wrap .dialog-hd {
	height: 82rpx;
	line-height:82rpx;
	text-align: center;
	font-size: 28rpx;
	background: #f8b349;
	color: #fff
}

.dialog-wrap .dialog-ft {
	padding: 12rpx 0
}

.dialog-wrap .dialog-close-btn {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	 50rpx;
	height: 50rpx;
	margin-top: -25rpx;
	margin-right: -25rpx;
	border-radius: 50%;
	background: #fff url("https://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/images/special/16110301/i-o-close.png") no-repeat center center;
	-webkit-background-size: 25rpx 25rpx;
	background-size:  25rpx 25rpx
}

　　

效果图：