抖音短视频系统开发小程序上传图片带预览带删除功能

<view class="container"><view class="title">用户反馈</view><form class="form"  bindsubmit="formSubmit"bindreset="formReset"report-submit="true"report-type="subscribe"subscribe-id="food"template-id="BD0001"><view class="question"><view class="pass pass1"><view class="ques_title">您遇到了什么问题</view><radio-group name="radio-group" class="ques_ul"><label class="items"><radio value="radio1" checked/>答案文不对题或明显错误</label><label class="items"><radio value="radio2"/>答案不算错但是不全面</label><label class="items"><radio value="radio3"/>答案文不对题或明显错误</label><label class="items"><radio value="radio4"/>答案不算错但是不全面</label><label class="items"><radio value="radio5"/>答案文不对题或明显错误</label></radio-group></view><view class="pass pass2"><view class="ques_title">您遇到的问题具体是什么?</view><view class="pass2_textarea"><textarea style="height: 6em;font-size: 14px;"maxlength="-1"auto-focus="{{focus}}"cursor="-1" show-confirm-bar="true"placeholder="您遇到的问题具体是什么?"placeholder-class="plh"selection-start="-1"selection-end="-1"adjust-position="true"bindinput="bindInput"bindfocus="bindFocus"bindblur="bindBlur"bindlinechange="bindLineChange"bindconfirm="bindConfirm"class="textarea_input textarea_text"/><view class="textarea-remind"><text class="textarea-text-cur" id="text-count">{{ textareanumber }}</text>/300</view></view><view class="addpic"><view class="addbutton"  bindtap="selectImage">+</view><view s-if="{{imageList.length > 0 ? true : false}}" class="image-container"><view class="imageList" s-for="{{ imageList }}"><view class="delpic"  data-index="{{ index }}" bindtap="delpic"><image src="/images/delete@2x.png"></image></view><image class="image-items" src="{{ item }}" data-src="{{ item }}"></image></view></view><view s-else class="addtip" ><view class="addtip_text">上传图片，最多四张</view><view class="addtip_text">图片小于2M</view></view></view></view><view class="pass  pass3"><view class="ques_title">您的联系方式是什么？</view><input type="text" class="ipt" cursor='10' bindblur="bindKeyblur"  bindconfirm="bindKeyconfirm" placeholder="请留下邮箱或电话，使我们快速反馈"/></view><button class="tel_input" formType="submit" type="primary">提交</button></view></form>
</view>

Page({data: {//输入的文本数量textareanumber: 0,                      //上传图片组件sourceIndex: 2,sourceArray: ['拍照', '相册', '拍照或相册'],sizeIndex: 2,sizeArray: ['压缩', '原图', '压缩或原图'],countIndex: 0,countArray: [],imageList: []},onLoad: function () {// 监听页面加载的生命周期函数},bindInput(e) {this.setData({ textareanumber: e.detail.cursor})},//上传图片组件selectImage() {const sourceIndex = this.getData('sourceIndex');if( this.data.imageList.length < 3 ){const count = this.getData('countIndex') + 1;if (sourceIndex === 2) {swan.showActionSheet({itemList: ['拍照', '相册'],success: res => {const sourceType = res.tapIndex === 0 ? 'camera' : 'album';this.chooseImage(sourceType, count);}});} else {const sourceType = sourceIndex === 0 ? 'camera' : 'album';this.chooseImage(sourceType, count);}}else{swan.showToast({title: '最多三张哦~',})}},chooseImage(sourceType, count) {const sizeIndex = this.getData('sizeIndex');let sizeType = ['compressed', 'original'];if (sizeIndex === 0) {sizeType = ['compressed'];} else if (sizeIndex === 1) {sizeType = ['original'];}swan.chooseImage({count,sizeType,sourceType: [sourceType],success: res => {var image = res.tempFilePaths[0];var arr = this.data.imageList;arr.push(image);this.setData('imageList', arr);},fail: err => {console.log('chooseImage fail', err);}});},delpic: function(e){var idx = e.currentTarget.dataset.index;var imageList = this.data.imageList;imageList.splice(idx, 1);this.setData('imageList', imageList);}
});

html,body{font-family: "微软雅黑" !important;background: #f5f5f5;
}
ul{list-style-type: none
}
.container{background: #fff;margin-bottom: 2rem;padding-bottom: .5rem;
}
.title{width: 100%;color: #000;font-weight: bold;box-sizing: border-box;display: block;font-size: 1rem;line-height: 2.5rem;text-align: center;border-bottom: 1px solid #f5f5f5;
}
.question{box-sizing: border-box;padding: 0 12px 12px 12px;
}
.ques_title{font-size: 1rem;font-weight: bold;margin-bottom: .7rem;
}
.items{font-size: .85rem;line-height: 2.4rem;color: #555;border-bottom: 1px solid #eee;display: block;
}
.checkedbox{width: 12px;height: 12px;border: 1px solid #999;border-radius: 50%;display: inline-block;vertical-align: middle;margin-right: .8rem;
}
.pass{margin-top: 1.2rem;margin-bottom: .6rem;
}
.pass2_textarea{border: 1px solid #eee;border-radius: 5px;
}
.textarea_text{resize: none;width: 100%;word-break: normal;word-wrap: normal;-webkit-appearance: none;appearance: none;display: inline-block;vertical-align: middle;line-height: normal;font-size: .9rem;color: #000;background-color: #fff;border-radius: 5px;overflow: scroll;outline: 0;box-sizing: border-box;padding: .5rem;border: none;
}
.textarea-remind{color: #999;font-size: .8rem;width: 100%;text-align: right;box-sizing: border-box;padding: .5rem;
}
.textarea-text-cur{color: #999;
}
.addpic{margin-top: .6rem;display: flex
}
.addbutton{width: 5.5rem;height: 5.5rem;border-radius: .05rem;border: 1px solid #eee;display: flex;display: -webkit-flex;align-items:center;justify-content:center;
}
.imageList{width: 5.5rem;height: 5.5rem;border-radius: .3rem;overflow: hidden;margin-left: .4rem;display: inline-block;margin-bottom: .3rem;position: relative;
}
.delpic{position:absolute;top:0;right:0;background:#fff;width:1.5rem;height:1.5rem;opacity:.8;
}
.delpic image{width: 100%;height: 100%
}
.image-items{width: 100%;height: 100%;
}
.addtip{display: inline-block;margin-left: .5rem;}
.addtip_text{color: #999;font-size: .8rem;position: relative;top: 1.6rem;
}
.tel_input{width: 100%;font-size: 1rem;background-color: #fff !important;border: 1px solid #333 !important;border-radius: .3rem;margin-top: 2rem;color: #333 !important;font-weight: bold;
}
.submitbutton{display: inline-block;padding: 0 .08rem;width: 100%;font: 14px/24px Arial,Helvetica,sans-serif;line-height: 2rem;text-decoration: none;text-align: center;color: #000;background-color: #fff;border: 1px solid #707379;border-radius: 5px;vertical-align: middle;overflow: hidden;outline: 0;white-space: nowrap;text-overflow: ellipsis;-webkit-tap-highlight-color: rgba(0,0,0,0);border-radius: 5px;
}
#demo{width: 100% !important;height: auto !important;
}
.upload_box{margin: 0 auto !important;
}
.add_imgBox{width: 1.2rem !important;height:1.5rem !important;
}
.imgBox{width: 1.2rem !important;height:1.5rem !important;
}
.upload_main{border-top: none;border-bottom: none;
}
.uploadImg img{margin: 0 auto;
}
.checked{background: #888;
}
.ipt{border: 1px solid #eee;font-size: .9rem;padding: .3rem;border-radius: .3rem;
}

抖音短视频系统开发小程序上传图片带预览带删除功能相关推荐

shell date 日期格式化_抖音短视频系统开发，日期加减
let dateTime=new Date(); this.dateFomat是对日期格式化为 yyyy - mm - dd的格式 // 减一天 dateTime = dateTime.setDate ...
抖音矩阵号系统开发+小程序挂载打通短视频链路价值体系
抖音短视频矩阵系统系统,抖音seo源码搭建,抖音小程序官方在9月30号的直播时,放出了自主挂载权限,通用挂载权限两种形式的挂载,针对各行业类开放目前来看自主挂载基本上都是可以审核可进行实现的,通用挂载 ...
抖音短视频系统开发图片局部放大镜，可在大图上下左右移动并放大对应的区域
如何实现放大镜的原理呢?一种方式我们可以采用将原图中的局部区域提取裁剪,然后在图片顶层的自定义控件上放大对应的倍数展示即可:另外一个种方式是将整图都放大相应的倍数,然后截取需要显示的区域,间接实现放大 ...
抖音短视频系统开发自定义弹框
我们如果想要实现这样的自定义弹框,需要怎么做呢,接下来就是教程首先,我们需要创建一个类继承Dialog 下面就是代码 import android.annotation.SuppressLint; ...
IOS抖音短视频APP开发关于扫描二维码，并根据文本生成二维码
IOS抖音短视频APP开发关于扫描二维码,(根据光线强弱显示隐藏闪光灯)并根据文本生成二维码. WeakSelf; //IOS抖音短视频APP开发构建扫描样式视图 _scanView = [[WSLS ...
仿抖音短视频系统源码，android 时间戳转换
仿抖音短视频系统源码,android 时间戳转换相关的代码 package util;import java.text.SimpleDateFormat; import java.util.Calen ...
仿抖音短视频系统源码，获取系统图片
仿抖音短视频系统源码,实现获取系统图片的相关代码如下: 首先开权限 <uses-permission android:name="android.permission.WRITE_EX ...
抖音短视频APP开发如何生成二维码？
授权转载自云豹网络科技的CSDN博客原文链接:https://blog.csdn.net/yb1314111/article/details/101283985 IOS抖音短视频APP开发关于扫描二 ...
仿抖音短视频系统源码，给控件添加阴影效果
仿抖音短视频系统源码中,实现给控件添加阴影效果的相关代码 1.使用elevation和translationZ实现阴影效果这种方式需要在API 21才可以使用,具体代码实现片段如下: <Tex ...

抖音短视频系统开发小程序上传图片带预览带删除功能

抖音短视频系统开发小程序上传图片带预览带删除功能相关推荐

最新文章

热门文章

抖音短视频系统开发小程序 上传图片带预览带删除功能

抖音短视频系统开发小程序 上传图片带预览带删除功能相关推荐

最新文章

热门文章

抖音短视频系统开发小程序上传图片带预览带删除功能

抖音短视频系统开发小程序上传图片带预览带删除功能相关推荐