上传身份证

components/bottom-drawer/index.js

@@ -4,6 +4,7 @@ var dateUtil = require("../../utils/dateUtil.js");
 var dateTimePicker = require("../../utils/dateTimePicker.js");
 Component({
   data: {
+    idCardImageUrl:"",
     idCardNum:"",
     dateTime: "",
     currentTime: dateUtil.formatDateYMD(mydate.toLocaleDateString()),
@@ -228,6 +229,9 @@ Component({
 
         e.detail.value.interviewTimeStr = that.data.currentTime;
       }
+      if(that.data.idCardImageUrl != ""){
+        e.detail.value.idCardImageUrl = that.data.idCardImageUrl
+      }
       e.detail.value.jobId = that.data.info.id
       console.log('form发生了submit事件，携带数据为：', e.detail.value)
       wx.request({
@@ -406,7 +410,8 @@ Component({
           console.log(idcard);
           if (idcard.status == 200) {
             that.setData({
-              idCardNum:idcard.data.num
+              idCardNum:idcard.data.num,
+              idCardImageUrl:idcard.data.idCardImageUrl
             });
           } else {
             wx.showToast({

pages/mine/opinion/index.js

@@ -5,6 +5,8 @@ Page({
    * 页面的初始数据
    */
   data: {
+    files: [],
+    newAddImg: [],
     textVal: "",
     loading: false,
     subLoad: false,
@@ -14,7 +16,125 @@ Page({
     ],
     actived:0
   },
+  chooseMedia () {
+    var that = this;
+    wx.chooseMedia({
+      count: 4,
+      mediaType: ['image'],
+      sizeType: ['original', 'compressed'],
+      sourceType: ['album', 'camera'],
+      success (res) {
+        // tempFilePath可以作为 img 标签的 src 属性显示图片
+        wx.showLoading({
+          title: '上传中...',
+        })
+        console.log(res);
+        var currData = {};
+
+
+        const tempFilePaths = res.tempFiles;
+        tempFilePaths.forEach((item, index) => {
+
+          wx.uploadFile({
+            url: app.globalData.ip + "/imgs/uploadImage",
+            method: "post",
+            // data:currData,
+            // name: "uploadFile",
+            filePath: tempFilePaths[index].tempFilePath,
+            name: "uploadFile",
+            header: app.globalData.headers,
+            success: function (res) {
+              console.log(that.data.files);
+              console.log(JSON.parse(res.data).data);
+
+              that.data.files.push({ url: JSON.parse(res.data).data, id: -999 })
+              that.data.newAddImg.push(JSON.parse(res.data).data)
+              that.setData({
+                files: that.data.files,
+                newAddImg: that.data.newAddImg
+              })
+              // currData.data = JSON.parse(res.data);
+
+
+              that.pushImg();
+              // console.log(that.data.files);
+
+              // that.updateImgs(currData.type,currData.fkId,currData.data.data);
+
+            },
+            fail: function (res) {
+              console.log(res);
+            },
+          });
+          wx.hideLoading();
+        })
+      }
+    })
+  },
+  delImgs (e) {
+    var that = this;
+    var url = e.currentTarget.dataset.url;
+    var id = e.currentTarget.dataset.id;
+    console.log(that.data.files)
+    wx.showModal({
+      title: '提示',
+      content: '确定要删除该图片？',
+      confirmColor: '#00BEBE',
+      success (res) {
+        if (res.confirm) {
+          that.data.files.forEach((item, index) => {
+            if (item.url == url) {
+              that.data.files.splice(index, 1);
+              that.data.newAddImg.splice(index, 1);
+            }
+          })
+          that.pushImg();
+          that.setData({
+            files: that.data.files,
+            newAddImg: that.data.newAddImg
+          })
+
+        } else if (res.cancel) {
+          console.log('用户点击取消')
+        }
+      }
+    })
+
+
+
+
+  },
+  pushImg () {
+    var that = this;
+
+    console.log(that.data.files);
+
+    that.data.urls = [];
+    // that.data.files.forEach(item=>{
+    //   that.data.urls.push(item.url)
+    // })
 
+    let curr = [];
+    that.data.files.forEach(item => {
+      curr.push({ url: item.url, id: item.id })
+    })
+    that.setData({
+      urls: curr
+    })
+  },
+  showImgs (e) {
+    var that = this;
+    console.log(that.data.urls);
+    let curr = [];
+    that.data.urls.forEach(item => {
+      curr.push(item.url)
+    })
+
+    wx.previewImage({
+      current: e.mark.url, // 当前显示图片的 http 链接
+      urls: curr // 需要预览的图片 http 链接列表
+    })
+  },
   /**
    * 生命周期函数--监听页面加载
    */
@@ -62,8 +182,8 @@ Page({
     const that = this;
     if (that.data.subLoad) return
     that.data.subLoad = true
-console.log(that.data.textVal)
-
+console.log(that.data.newAddImg)
+// return
 // that.setData({
 //   success: true,
 //   loading: false,
@@ -80,7 +200,9 @@ console.log(that.data.textVal)
         method: 'post',
         header: app.globalData.headers,
         data: {
-          content: that.data.textVal
+          content: that.data.textVal,
+          actived: Number(that.data.actived + 1),
+          imgs:that.data.newAddImg.toString()
         },
         success: function (res) {
           console.log(res);

pages/mine/opinion/index.wxml

@@ -1,5 +1,5 @@
 <view class="container">
-  <view class='type-box display-flex'>
+  <view class='type-box display-flex'  wx:if="{{!success}}">
     <view wx:for="{{troubleList}}"
           class="type-item {{actived == index ? 'type-active' : ''}}" data-item="{{item}}" data-index="{{index}}"
           bind:tap="handleUpdatType"
@@ -7,13 +7,33 @@
   </view>
   <view class="submit" wx:if="{{!success}}" hover-class="none" hover-stop-propagation="false">
     <textarea class="bgf textarea br8 f14" value="{{textVal}}" bindinput="getVal" maxlength="150" placeholder="我们想听到您的心声..." placeholder-class="f14 cccc" bindfocus bindconfirm></textarea>
-    <view class="" style="margin-top: 16px;">
+    <!-- <view class="" style="margin-top: 16px;">
       <image src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/my_uploadphotos.svg" 
              mode="widthFix" 
              style="width: 72px;height: 72px;" 
              bind:tap="handleUpdateImage"
       />
     </view>
+    <view style="margin-top: 8px;font-size: 12px;color: #999999;">
+      上传照片截图，最多传4张（选填）
+    </view> -->
+    <view class="weui-cell__bd1 mt20">
+      <view class="weui-uploader__bd">
+        <view class="weui-uploader__files" id="uploaderFiles">
+          <block wx:for="{{files}}" wx:key="*this">
+            <view class="weui-uploader__file pr" bindtap="previewImage" id="{{item}}">
+              <image src="http://matripe.oss-cn-beijing.aliyuncs.com/nezha/del.svg" data-id="{{item.id}}" data-url="{{item.url}}" catchtap="delImgs" class="delImg" style="width:20px;height: 20px;"></image>
+              <image catchtap="showImgs" mark:url="{{item.url}}" class="weui-uploader__img" src="{{item.url}}" mode="aspectFill" />
+            </view>
+          </block>
+        </view>
+        <view class="weui-uploader__input-box" wx:if="{{files.length < 4}}">
+          <view class="weui-uploader__input" bindtap="chooseMedia"></view>
+        </view>
+      </view>
+    </view>
+    
+    <view class="clb"></view>
     <view style="margin-top: 8px;font-size: 12px;color: #999999;">
       上传照片截图，最多传4张（选填）
     </view> 

pages/mine/opinion/index.wxss

@@ -31,3 +31,32 @@
   background-color: var(--color-ysd);
   color:#fff;
 }
+.weui-uploader__input-box:before {
+  width: 2px;
+  height: 24px;
+}
+.weui-uploader__input-box:after {
+  width: 24px;
+  height: 2px;
+}
+.weui-uploader__img{
+  border-radius: 4px;
+}
+.weui-uploader__file .delImg{
+  position: absolute;
+  right: -6px;
+  top:-6px;
+  z-index: 99;
+}
+.weui-uploader__bd{
+  overflow: inherit;
+}
+.weui-uploader__file,
+.weui-uploader__input-box {
+	/* width: calc((100vw - 105px - 40px) / 3);
+  height: calc((100vw - 105px - 40px) / 3); */
+	border-radius: 4px;
+	width: 76px;
+  height: 76px;
+  margin-right: 11px;
+}