• 微信 小程序布局 水平选照片


     
     
    <view class="hong-container">
    <!-- 1头部选照片 -->
    <view class='hong-top'>
    <view class='top-box flex'>
    <view class='top-only'>
    <view class='only-pic'>
    <view class='pic-a' bindtap='addImg' data-pic='0'>
    <image class='image-full' src='../../../imgs/user/addpic.png'></image>
    </view>
    <view class='pic-b' bindtap='addImg' data-pic='0'>
    <image class='image-full' src='{{imgbox[0]}}'></image>
    </view>
    </view>
    <view class='only-text'>
    <text>本人职业照</text>
    </view>
    </view>
    <view class='top-only'>
    <view class='only-pic'>
    <view class='pic-a' bindtap='addImg' data-pic='0'>
    <image class='image-full' src='../../../imgs/user/addpic.png'></image>
    </view>
    <view class='pic-b' bindtap='addImg' data-pic='0'>
    <image class='image-full' src='{{imgbox[1]}}'></image>
    </view>
    </view>
    <view class='only-text'>
    <text>身份证正面照</text>
    </view>
    </view>
    <view class='top-only'>
    <view class='only-pic'>
    <view class='pic-a' bindtap='addImg' data-pic='0'>
    <image class='image-full' src='../../../imgs/user/addpic.png'></image>
    </view>
    <view class='pic-b' bindtap='addImg' data-pic='0'>
    <image class='image-full' src='{{imgbox[2]}}'></image>
    </view>
    </view>
    <view class='only-text'>
    <text>身份证反面照</text>
    </view>
    </view>
    <view class='top-only'>
    <view class='only-pic'>
    <view class='pic-a' bindtap='addImg' data-pic='0'>
    <image class='image-full' src='../../../imgs/user/addpic.png'></image>
    </view>
    <view class='pic-b' bindtap='addImg' data-pic='0'>
    <image class='image-full' src='{{imgbox[3]}}'></image>
    </view>
    </view>
    <view class='only-text'>
    <text>企业执照</text><text style='font-size:22rpx'>(选填)</text>
    </view>
    </view>
    </view>
    </view>
    <!-- 2表单填写 -->
    <view class='hong-contant'>
    <form>
    <view>
     
    </view>
    </form>
    </view>
    </view>
    //---------------------------------------------------------------------------------------------------------------------------
     
    /* 1头部选照片 */
    .hong-top{
    100%;
    ">#f7f7f7;
    padding-bottom: 20rpx;
     
    }
    .hong-top .top-box{
    height: 250rpx;
    padding: 0 14rpx;
    ">#fff;
    box-sizing: border-box;
    }
    .hong-top .top-only{
    25%;
    padding: 20rpx 10rpx 0;
    height: 100%;
    box-sizing: border-box;
    }
    .hong-top .only-pic{
    100%;
    height: 160rpx;
    ">#f7f7f7;
    box-sizing: border-box;
    position: relative;
    }

    .hong-top .pic-a{
    100%;
    height: 100%;
    padding: 33rpx;
    border: 1px dashed #CCC;
    box-sizing: border-box;
    }
    .hong-top .pic-b{
    100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    }
    .hong-top .pic-a,.pic-b{
    position: absolute;
    left: 0;
    top: 0;
    }
    .hong-top .only-text{
    font-size: 24rpx;
    padding-top: 20rpx;
    text-align: center;
    }
     
    //-------------------------------------------------------------------------------------
    data: {
    // 图片盒子
    imgbox:[]
    },
    // 店铺图片信息临时保存
    addImg: function (e) {
    var imgbox = this.data.imgbox;
    var picid = e.currentTarget.dataset.pic;
    var that = this;
    var n = 4;
    if (4 > imgbox.length > 0) {
    n = 4 - imgbox.length;
    } else if (imgbox.length == 4) {
    n = 1;
    }
    wx.chooseImage({
    count: n, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
    success: function (res) {
    // console.log(res.tempFilePaths)
    // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths

    if (imgbox.length == 0) {
    imgbox = tempFilePaths
    } else if (4 > imgbox.length) {
    imgbox = imgbox.concat(tempFilePaths);

    } else {
    imgbox[picid] = tempFilePaths[0];
    }
    that.setData({
    imgbox: imgbox
    });

    }
    })
    },
     
    //----------------------------------------------------------
    //图片上传请求
    for (var i = 0; i < imgbox.length; i++) {
    wx.uploadFile({
    url: app.globalData.hpUrl + 'addFindversionpic?uid=' + user.id + '&&cid=' + result,
    filePath: imgbox[i],
    name: 'files',
    header: {
    'content-type': 'multipart/form-data'
    },
    formData: {
    openid: that.data.openid
    },
    success: function (res) {

    let truePic = res.data;
    console.log(truePic)
    if (truePic) {
    wx.showToast({
    title: '提交成功',
    icon: 'success',
    duration: 1500
    })
    setTimeout(function () {
    wx.navigateTo({
    url: "/pages/index/edition/edition"
    })
    }, 1500);
    } else {
    wx.showModal({
    title: '提示',
    content: '提交失败,请检测从新提交',
    showCancel: false,
    success: function (res) {
    }
    })
    }
    }
    })
    }
  • 相关阅读:
    NoSQL学习1
    inno setup 软件打包
    cmapx 保存绘制好的图层
    qt之菜单栏的创建
    qt 软件打包
    可恶的 0xc0000005异常
    成长
    msChart组件安装与编程
    qt 工具下的dump工具导出文档出现异常解决方案
    qt 环境下mapx组件的鼠标跟踪
  • 原文地址:https://www.cnblogs.com/dianzan/p/8005949.html
Copyright © 2020-2023  润新知