JS代码:
const db = wx.cloud.database()
Page({
data: {
xingming: '',
xingbie: '',
aihao: [],
flog: true,
imageList: [],
},
formSubmit: function (e) {
console.log("ad", e.detail.value);
var that = this
var flog = that.data.flog
if (e.detail.value.xingming.length == 0) {
wx.showToast({
title: '姓名不能为空!',
icon: 'none',
duration: 1500
})
setTimeout(function () {
wx.hideToast()
}, 2000)
} else if (e.detail.value.xingbie.length == 0) {
wx.showToast({
title: '性别不能为空!',
icon: 'none',
duration: 1500
})
setTimeout(function () {
wx.hideToast()
}, 2000)
} else if (e.detail.value.aihao.length == 0) {
wx.showToast({
title: '爱好不能为空!',
icon: 'none',
duration: 1500
})
setTimeout(function () {
wx.hideToast()
}, 2000)
} else if (flog) {
wx.showModal({
title: '提示',
content: '你确定要提交吗',
success: function (res) {
console.log("obj", res)
if (res.confirm) {
that.issueNotice(e);
console.log('用户点击确定')
} else {
console.log('用户点击取消')
}
}
})
} else {
wx.showToast({
title: '你已经提交过啦',
icon: 'none',
duration: 2000
})
}
},
issueNotice(e) {
var that = this;
var imgeList = that.data.imageList.concat(e.tempFilePaths);
let {
xingming,
xingbie,
aihao,
} = e.detail.value
db.collection("form").add({
data: {
"xingming": xingming,
"xingbie": xingbie,
"aihao": aihao,
"imageList": imgeList
},
success: function (res) {
console.log(res)
wx.showToast({
title: '提交成功',
icon: 'none',
duration: 1500
})
that.setData({
flog: false,
})
}
})
},
chooseImage: function (event) {
var that = this;
wx.chooseImage({
count: 2, // 一次最多可以选择2张图片一起上传
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
console.log(res)
var imgeList = that.data.imageList.concat(res.tempFilePaths);
that.setData({
imageList: imgeList
});
}
})
},
previewImage: function (e) {
var that = this;
var dataid = e.currentTarget.dataset.id;
var imageList = that.data.imageList;
wx.previewImage({
current: imageList[dataid],
urls: this.data.imageList
});
},
})
WXML 代码
<form bindsubmit="formSubmit">
<view class="section">
<view class="section__title">姓名</view>
<input type="number" name="xingming" placeholder="请输入姓名" />
</view>
<view class="section section_gap">
<view class="section__title">性别</view>
<radio-group name="xingbie">
<label>
<radio value="男" />男</label>
<label>
<radio value="女" />女</label>
</radio-group>
</view>
<view class="section section_gap">
<view class="section__title">爱好</view>
<checkbox-group name="aihao">
<label>
<checkbox value="写代码" />写代码</label>
<label>
<checkbox value="玩游戏" />玩游戏</label>
<label>
<checkbox value="改代码" />改代码</label>
<label>
<checkbox value="玩代码" />玩代码</label>
</checkbox-group>
</view>
<view class="weui">
<view class="weui-uploader">
<view class="weui-uploader__files">
<block wx:for="{{imageList}}" wx:for-item="image" wx:for-index='idx'>
<view class="weui-uploader__file">
<image class="weui-uploader__img" src="{{image}}" data-id="{{idx}}" data-src="{{image}}" bindtap="previewImage"></image>
</view>
</block>
</view>
<view class="weui-uploader__input-box">
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
</view>
</view>
<view class="btn-area">
<button formType="submit">提交</button>
<button formType="reset">重置</button>
</view>
</form>
WXSS代码
.weui{
width: 100%;
height: auto;
display: flex;
flex-direction: column;
}
.weui-uploader{
padding: 0px 0px 9px;
}
.weui-uploader__file {
float: left;
margin-right: 5.5rpx;
margin-top: 19rpx;
}
.weui-uploader__img {
display: block;
width: 158rpx;
height: 158rpx;
}
.weui-uploader__file_status {
position: relative;
}
.weui-uploader__input-box {
float: left;
position: relative;
margin-right:5rpx;
margin-top: 19rpx;
width: 154rpx;
height: 154rpx;
border: 1px solid #d9d9d9;
}
.weui-uploader__input-box:before, .weui-uploader__input-box:after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #d9d9d9;
}
.weui-uploader__input-box:before {
width: 2px;
height: 39.5px;
}
.weui-uploader__input-box:after {
width: 39.5px;
height: 2px;
}
.weui-uploader__input-box:active {
border-color: #999;
}
.weui-uploader__input-box:active:before, .weui-uploader__input-box:active:after {
background-color: #999;
}
.weui-uploader__input {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.btn_Suspension {
position: fixed;
height: 100rpx;
width: 100rpx;
background-color: rgba(79, 82, 81, 0.24);
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
}
结果: