标签：flex 上传 微信 height ssm item input border display
微信小程序端的效果
1：微信端代码
（2）wxxml
<view class="container-body container-gray" style="display:{{showfootertab==0?'block':'none'}}">
<form bindsubmit="evaSubmit">
<view class="group">
<view class="group-header">问题描述</view>
<view class="group-body">
<textarea name="evaContent" maxlength="500" value="{{evaContent}}" class="weui-textarea" placeholder="填写内容(12-500字)" bindblur="charChange" />
</view>
<view class="group-header">上传图片</view>
<view class="group-body">
<view class="img-upload">
<view class="img-add" bindtap="chooseImage"></view>
<view class="img-item" name="img" bindlongtap="editImage" wx:for="{{uploadimgs}}" wx:key="{{index}}">
<icon type="clear" size="20" color="red" style="display:{{editable?'block':'none'}}" bindtap="deleteImg" data-index="{{index}}"/>
<image src="{{item}}" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
<button formType="submit" disabled="{{subdisabled}}" class="btn-block btn-orange" type="primary" size="mini">提交</button>
</form>
<view class="question-text">
<text>如问题无法简单描述清楚</text>
<text>可以直接拨打电话</text>
<text>我们将第一时间为您答疑解惑</text>
<view bindtap="callContact" data-phonenumber="400-1234-567">***********</view>
</view>
</view>
（2）wxjs（这里是重点，大家需要认真看）
var app = getApp()
Page({
data: {
showtabtype: '', //选中类型
showfootertab: 0, //底部标签页索引
tabnav: {}, //顶部选项卡数据
questionsall: [], //所有问题
questions: [], //问题列表
showquestionindex: null, //查看问题索引,
uploadimgs: [], //上传图片列表
editable: false //是否可编辑
},
onl oad: function () {
},
chooseImage: function () {
let _this = this;
wx.showActionSheet({
itemList: ['从相册中选择', '拍照'],
itemColor: "#f7982a",
success: function (res) {
if (!res.cancel) {
if (res.tapIndex == 0) {
_this.chooseWxImage('album')
} else if (res.tapIndex == 1) {
_this.chooseWxImage('camera')
}
}
}
})
},
chooseWxImage: function (type) {
let _this = this;
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type],
success: function (res) {
const tempFilePaths = res.tempFilePaths
app.globalData.filepath = res.tempFilePaths
_this.setData({
uploadimgs: _this.data.uploadimgs.concat(res.tempFilePaths)
})
//图片上传
wx.uploadFile({
url: 'http://localhost:8080/lg/test/upload',//将照片上传到后端 返回照片的名称和格式 这一步没有将数据真正入数据库
filePath: tempFilePaths[0],
name: 'file',
success: function (res) {
var s = res.data
console.log(s)
console.log(s.length)
var s1 = s.length - 21
var rs = s.slice(8, s1)
console.log(rs)
wx.setStorageSync("picturepath", rs)
},
fail: function (err) {
console.log(err.data)
}
})
}
})
},
//事件 //获取投诉的内容
textBlur: function (e) {
if (e.detail && e.detail.value.length > 0) {
if (e.detail.value.length < 12 || e.detail.value.length > 500) {
//app.func.showToast('内容为12-500个字符','loading',1200);
} else {
this.setData({
evaContent: e.detail.value
});
}
} else {
this.setData({
evaContent: ''
});
evaData.evaContent = '';
app.func.showToast('请输入投诉内容', 'loading', 1200);
}
},
//提交事件
evaSubmit: function (eee) {
var utel = wx.getStorageSync("utel")
//判断是否登录
if (!utel) {
wx.showModal({
title: '提示',
content: '登录后在操作',
})
} else {
var tel = wx.getStorageSync("utel")
var content = eee.detail.value.evaContent//投诉的内容
const picture = wx.getStorageSync("picturepath")//照片的名称和格式
//真正的将数据入数据库
wx.request({
url: 'http://localhost:8080/lg/Complain/edit_handle',
data: {
ttel:tel,
tcontent: content,
tpiac: picture
},
success: function (res) {
var mess = res.data.msg
console.log(mess)
if (mess === "操作成功") {
wx.showModal({
title: '反馈成功',
content: 'success',
})
} else {
wx.showModal({
title: '反馈失败'
})
}
}
})
}
//提交(自定义的get方法)
}
})
（3）wxcss（直接复制就可以使用）
.question-text{
padding: 20rpx;
text-align: center;
}
.question-text text{
display: block;
color: #888;
font-size: 28rpx;
}
.question-text view{
font-size: 48rpx;
color: #f7982a;
}
.footer-tab{
display: flex;
width: 100%;
border-top: 1rpx solid #ddd;
}
.footer-tab .footer-tab-item{
flex: 1;
text-align: center;
}
.footer-tab-widthicon image{
width: 44rpx;
height: 44rpx;
display: block;
margin: 10rpx auto 0;
}
.footer-tab-item text{
font-size: 24rpx;
color: #888;
}
.footer-tab-item.active text{
color: #f7982a;
}
.tab{
display: flex;
flex-direction: column;
height: 100%;
}
.tab-nav{
height: 80rpx;
background: #fff;
border-bottom: 1rpx solid #ddd;
display: flex;
line-height: 79rpx;
position: relative;
}
.tab-nav text{
display: block;
flex: 1;
text-align: center;
width: 25%;
}
.tab-nav text.active{
color: #f7982a;
}
.tab-line{
position: absolute;
left: 0;
bottom: -1rpx;
height: 4rpx;
background: #f7982a;
transition: all 0.3s;
}
.tab-content{
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
.question-list{
padding: 20rpx;
}
.question-item{
background: #fff;
margin-bottom: 20rpx;
border-bottom: 1rpx solid #ddd;
}
.question-item-q{
padding: 20rpx;
background: #cecece;
padding-left: 80rpx;
padding-right: 70rpx;
position: relative;
line-height: 1.2;
color: #fff;
}
.question-item-q:before,
.question-item-a:before{
content: 'Q';
display: block;
width: 50rpx;
height: 50rpx;
border-radius: 50%;
background: #f97c29;
font-size: 34rpx;
text-align: center;
line-height: 50rpx;
position: absolute;
left: 20rpx;
top: 14rpx;
}
.question-item-a{
padding: 0 20rpx;
padding-left: 80rpx;
position: relative;
line-height: 1.4;
color: #666;
}
.question-item-a.active{
background: #f7982a;
}
.question-item-a:before{
content: 'A';
background: #f7982a;
color: #fff;
top: 0;
}
.question-item .question-item-a{
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
margin: 20rpx 0;
}
.question-item.active .question-item-q{
background: #f97c29;
}
.question-item.active .question-item-a{
-webkit-line-clamp: inherit;
}
/**app.wxss**/
/**app.wxss**/
page{
height: 100%;
color: #333;
display: flex;
flex-direction: column;
font: normal 30rpx/1.68 -apple-system-font, 'Helvetica Neue', Helvetica, 'Microsoft YaHei', sans-serif;
}
.container {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.container-body{
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
.container-footer{
width: 100%;
display: flex;
height: 88rpx;
border-top: 1rpx solid #ddd;
background: #fff;
}
.container-footer text{
flex: 1;
display: block;
text-align: center;
height: 88rpx;
line-height: 88rpx;
font-size: 34rpx;
border-left: 1rpx solid #ddd;
}
.container-footer text:first-child{
border-left: none;
}
.container-footer .btn-block{
border-radius: 0;
}
.container-footer .btn-block:after{
border: none;
}
.container-gray{
background: #f9f9f9;
}
input{
height: 60rpx;
line-height: 60rpx;
font-family: inherit;
}
.input-list{
padding: 0 20rpx;
margin: 20rpx 0;
background: #fff;
border-top: 1rpx solid #ddd;
border-bottom: 1rpx solid #ddd;
}
.input-list .input-item{
padding: 20rpx;
line-height: 2;
display: flex;
font-size: 30rpx;
border-top: 1rpx solid #e8e8e8;
}
.input-list .input-item:first-child{
border-top: 0;
}
.input-item-label{
display: block;
width: 5em;
color: #666;
}
.input-item-content{
color: #333;
flex:1;
}
.input-item.input-item-full{
display: block;
}
.input-item.input-item-full .input-item-label{
width: 100%;
}
.input-item.input-item-full .input-item-content{
width: 100%;
}
.input-item.input-item-full textarea{
padding: 0;
height: 150rpx;
border: 1rpx solid #e8e8e8;
padding: 10rpx;
}
.input-item.input-item-full .img-upload{
padding: 0;
}
.input-item.input-item-adaption .input-item-label{
width: auto;
margin-right: 20rpx;
}
button{
font-size: 32rpx;
line-height: 72rpx;
}
textarea{
width: 100%;
padding: 20rpx;
box-sizing: border-box;
}
radio-group radio{
position:absolute;
left: -999em;
}
radio-group label{
margin-right: 16rpx;
}
radio-group label:before{
content: '';
display: inline-block;
width: 40rpx;
height: 40rpx;
vertical-align: -8rpx;
margin-right: 4rpx;
}
.btn-submit{
padding: 20rpx;
}
.btn-block{
width: 100%;
line-height: 88rpx;
}
.btn-orange{
background: #f7982a;
color: #fff;
}
.btn-gray{
background: #e8e8e8;
color: #333;
}
.search-flex{
display: flex;
padding: 20rpx;
border-bottom: 1rpx solid #ddd;
position: relative;
z-index: 13;
background: #f9f9f9;
/* transform: translateY(-100%); */
margin-top: 0;
transition: all 0.3s;
}
.search-flex.tophide{
margin-top: -117rpx;
}
.search-flex button{
background: #f7982a;
color: #fff;
line-height: 72rpx;
height: 72rpx;
font-size: 30rpx;
border-radius: 6rpx;
}
.search-bar{
flex: 1;
display: flex;
border: 1rpx solid #e8e8e8;
border-radius: 6rpx;
}
.search-bar input{
flex: 1;
height: 72rpx;
line-height: 72rpx;
padding: 0 10rpx;
background: #fff;
}
.search-extra-btn{
margin-left: 20rpx;
white-space: nowrap;
}
.filter-tab{
display: flex;
width: 100%;
line-height: 80rpx;
border-bottom: 1rpx solid #ddd;
position: relative;
z-index: 2;
background: #fff;
}
.filter-tab text{
flex: 1;
text-align: center;
}
.filter-tab text:after{
content: '';
display: inline-block;
vertical-align: 4rpx;
width: 0;
height: 0;
border-left: 12rpx solid transparent;
border-right: 12rpx solid transparent;
border-top: 12rpx solid #bbb;
margin-left: 8rpx;
}
.filter-tab text.active{
color: #f7982a;
}
.filter-tab:not(.sort-tab) text.active:after{
border-top: 0;
border-bottom: 12rpx solid #f7982a;
}
.filter-tab.sort-tab text.active:after{
border-top: 12rpx solid #f7982a;
}
.filter-panel{
display: flex;
background: #f5f5f5;
position: absolute;
width: 100%;
z-index: 13;
overflow: hidden;
}
.filter-panel-left,.filter-panel-right{
flex: 1;
line-height: 80rpx;
text-align: center;
max-height: 480rpx;
overflow-y: auto;
}
.filter-panel-left .active{
background: #fff;
}
.filter-panel-right .active{
color: #f7982a;
}
.filter-panel-right{
background: #fff;
}
.filter-panel-right:empty{
display: none;
}
.filter-shadow{
position: absolute;
width: 100%;
top: 0;
bottom: 0;
z-index: 1;
background: rgba(0,0,0,.5);
}
.gototop{
width: 70rpx;
height: 70rpx;
position: fixed;
bottom: 20rpx;
right: 20rpx;
transition: all 0.3s;
opacity: 0;
transform: translateY(200rpx);
}
.gototop.active{
opacity: 1;
transform: translateY(0);
}
.group{
display: block;
width: 100%;
}
.group-header{
line-height: 70rpx;
display: flex;
padding: 0 20rpx;
background: #f9f9f9;
}
.group-body{
background: #fff;
border-top: 1rpx solid #ddd;
border-bottom: 1rpx solid #ddd;
}
.group-body .input-list{
margin: 0;
border: none;
}
.img-upload{
padding: 20rpx;
font-size: 0;
overflow: hidden;
}
.img-upload .img-add{
width: 100rpx;
height: 100rpx;
float: left;
margin: 10rpx;
border: 1rpx solid transparent;
}
.img-upload .img-add{
border: 1rpx dashed #ddd;
}
.img-upload .img-item image{
width: 100rpx;
height: 100rpx;
}
.img-upload .img-item{
position: relative;
}
.img-upload .img-item icon{
position: absolute;
right: -12rpx;
top: -12rpx;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
/* pages/problem/problem.wxss */
2：ssm后台处理
（1）照片上传处理（照片上传，就是在你选择照片的时候，就需要处理，放入项目的文件夹下）
@Controller
public class uploadeController {
@RequestMapping("test/upload")
@ResponseBody
public JSONObject upload(@RequestParam MultipartFile[] file,String id, HttpServletRequest request){
String[] path = uploadfile.uploadfile(file, request);
HashMap<String, Object> map = new HashMap<String, Object>();
if(path.equals("error")){
map.put("status", "error");
}else{
map.put("url",path[1]);
map.put("status","success");
}
JSONObject json=JSONObject.fromObject(map);
return json;
}
}
这里调用了一个方法String[] path = uploadfile.uploadfile(file, request);
代码如下
public static String[] uploadfile(MultipartFile[] files,HttpServletRequest request){
String dir = request.getSession().getServletContext().getRealPath("/picturefile");
//String dir = "C:\\nodejs\\app\\mini2048\\static";
//String dir = "D:\\static";
String[] b = null;
for (MultipartFile file : files){
// System.out.println("文件类型:"+file.getContentType());
String filename = file.getOriginalFilename();
String suffix = filename.substring(filename.lastIndexOf("."));
//String suffix = filename.substring(filename.length() - 3);
// System.out.println("文件名:"+filename);
// System.out.println("文件后缀:"+suffix);
// System.out.println("文件大小:"+file.getSize()/1024+"KB");
String path = filename;
//创建要保存文件的路径
String time = new Date().getTime()+"."+suffix;
String[] a = {path,time};
File dirFile = new File(dir,time);
if (!dirFile.exists()){
dirFile.mkdirs();
}
try {
//将文件写入创建的路径
file.transferTo(dirFile);
return a;
} catch (IOException e) {
e.printStackTrace();
}
}
return b;
}
}
（2）接收数据 将数据放入数据库中
（放的是照片的名称和格式、投诉的内容）
@RequestMapping(value="Complain/edit_handle")
@ResponseBody
public JSONObject Complainedit(Complain complain) {
int ret = 0;
if(complain.getTid() == null || complain.getTid() == 0) {
complain.setTstatus(1);
ret=complainService.insertSelective(complain);
}else {
ret=complainService.updateByPrimaryKeySelective(complain);
}
Map<String, String> map = new HashMap<String, String>();
if(ret>0){
map.put("status","succ");
map.put("msg","操作成功");
}else{
map.put("status","error");
map.put("msg","操作失败");
}
JSONObject json = JSONObject.fromObject(map);
return json;
}
3：ssm后端回显
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<jsp:include page="../header.jsp"/>
<jsp:include page="../menu.jsp"/>
<div class="tpl-content-wrapper">
<div class="tpl-portlet-components">
<div class="portlet-title">
<div class="caption font-green bold">
<span class="am-icon-code"></span> 投诉管理
</div>
<div class="tpl-portlet-input tpl-fz-ml">
<div class="portlet-input input-small input-inline">
<div class="input-icon right">
<input type="hidden" class="form-control form-control-solid" placeholder="搜索..."> </div>
</div>
</div>
</div>
<div class="tpl-block">
<div class="am-g">
<div class="am-u-sm-12 am-u-md-6">
</div>
<div class="am-u-sm-12 am-u-md-3">
</div>
<div class="am-u-sm-12 am-u-md-3">
<div class="am-input-group am-input-group-sm">
</div>
</div>
<div class="am-g">
<div class="am-u-sm-12">
<table class="am-table am-table-striped am-table-hover table-main">
<thead>
<tr>
<th class="table-title">图片</th>
<th class="table-title">内容</th>
<th class="table-title">投诉者电话</th>
<th class="table-title">当前状态</th>
<th class="table-type">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${complainlist}" var="item">
<tr>
<td><img src="picturefile/${item.tpiac}" width="50px;" height="50px;"></td>
<td>${item.tcontent}</td>
<td>${item.ttel}</td>
<td>
<c:if test="${item.tstatus==1}">
未处理
</c:if>
<c:if test="${item.tstatus==2}">
处理完成
</c:if>
</td>
<td>
<c:if test="${item.tstatus==1}">
<button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="updatebyid(${item.tid},2);">
<span class="am-icon-pencil-square-o"></span> 处理
</button>
</c:if>
<button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="deletebyid(${item.tid});">
<span class="am-icon-pencil-square-o"></span> 删除
</button>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
<div class="tpl-alert"></div>
</div>
</div>
</div>
<script type="text/javascript">
function deletebyid(id){
layer.confirm("是否删除",{
icon:1,
skin:'layui-layer-lan',
btn:['确定','取消']
},function(){
var url = "Complain/deleteComplain";
var data = {};
data["tid"] = id;
fajax(url,data,deletecallback);
},function(){
})
}
function deletecallback(data){
if(data.status == "succ"){
layer.confirm("已成功删除",{
icon:1,
skin:'layui-layer-lan',
btn:['确定']
},function(){
window.location.href = "culturalHeritage/list";
})
}else{
alert("未删除");
}
}
function updatebyid(id,stat){
layer.confirm("是否已处理",{
icon:1,
skin:'layui-layer-lan',
btn:['确定','取消']
},function(){
var url = "Complain/edit_handle";
var data = {};
data["tid"] = id;
data["tstatus"]=stat;
fajax(url,data,deletecallback);
},function(){
})
}
function deletecallback(data){
if(data.status == "succ"){
layer.confirm("已成功处理",{
icon:1,
skin:'layui-layer-lan',
btn:['确定']
},function(){
window.location.href = "Complain/findAll";
})
}else{
alert("未删除");
}
}
/* function select_handle(){
var index=layer.load(1, {shade: [0.5,'#000']});
window.location.href='city/list?chName='+$('#anTitle').val();
} */
</script>
<jsp:include page="../footer.jsp"/>
小白XBIT
发布了33 篇原创文章 · 获赞 14 · 访问量 1万+
私信
关注
标签：flex,上传,微信,height,ssm,item,input,border,display 来源： https://blog.csdn.net/baidu_38978508/article/details/104097778
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。