<script src="js/jquery.js"></script>
<script src="js/jweixin-1.6.0.js"></script>
<link href="js/DialogBySHF.css" rel="stylesheet" />
<script src="js/DialogBySHF.js"></script>
<link href="js/sweetalert2.min.css" rel="stylesheet" />
<script src="js/sweetalert2.min.js"></script>
<script>
wx.config({
debug: false,
appId: '<%=WxPayConfig.APPID %>',
timestamp: '<%=wxconfig.timestamp%>',
nonceStr: '<%=wxconfig.nonceStr%>',
signature: '<%=wxconfig.signature%>',
jsApiList: [
'chooseImage',
'uploadImage'
]
});
wx.error(function (res) {
alert("报错：" + res);
});
var shuliang = 2; // 最大图片数量
var yiyoushuliang = 0; // 当前已选择的图片数量
var allLocalIds = []; // 存储所有已选择的图片的 localIds
wx.ready(function () {
document.querySelector('#scanQRCode1').onclick = function () {
var remainingCount = shuliang - yiyoushuliang; // 计算剩余可选择的图片数量
if (remainingCount <= 0) {
$.DialogBySHF.Alert({ Width: 300, Height: 150, Title: "", Content: "您已经达到了最大图片选择数量", ConfirmFun: fanhui });
return;
}
wx.chooseImage({
count: remainingCount,
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success: function (res) {
var newLocalIds = res.localIds;
allLocalIds = allLocalIds.concat(newLocalIds); // 添加新选择的图片到 allLocalIds
yiyoushuliang += newLocalIds.length; // 更新已选择的图片数量
xianshi(allLocalIds); // 显示所有图片
},
fail: function (err) {
console.error('选择图片失败:', err);
}
});
};
function xianshi(localIds) {
var $xianshi = $("#xianshi");
$xianshi.empty(); // 清空之前的图片
localIds.forEach(function (localId, index) {
var $div = $("<div class='Pic'><div class='Delete' data-localid='" + localId + "'><img src='image/shanchu.svg'></div><img src='" + localId + "'></div>");
$div.find(".Delete").on("click", function () {
shanchu(localId); // 传递要删除的 localId
});
$xianshi.append($div);
});
}
function shanchu(localIdToRemove) {
var index = allLocalIds.indexOf(localIdToRemove); // 找到要删除的 localId 的索引
if (index !== -1) {
allLocalIds.splice(index, 1); // 从 allLocalIds 中删除对应的 localId
yiyoushuliang--; // 更新已选择的图片数量
xianshi(allLocalIds); // 重新渲染图片列表
}
}
wx.updateAppMessageShareData({
title: '华寿物业', // 分享标题
desc: '', // 分享描述
link: 'http://.com/index.aspx', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://.com/image/wx.jpg', // 分享图标
success: function () {
// 设置成功
}
});
//wx.updateTimelineShareData({
// title: '', // 分享标题
// link: http://.com/index.aspx', // 分享链接
// imgUrl: 'http://.com/image/wx.png', // 分享图标
// success: function () {
// // 设置成功
// }
//});
});
document.addEventListener('DOMContentLoaded', function () {
var btnSubmit = document.querySelector('.Btn');
var textareaNeirong = document.getElementById('neirong');
// 假设之前已经有代码实现了图片选择和显示，并将localIds更新到了这个数组中
btnSubmit.addEventListener('click', function () {
var neirong = textareaNeirong.value.trim();
if (document.getElementById("xiaoqu").value == "请选择小区") {
$.DialogBySHF.Alert({ Width: 300, Height: 150, Title: "", Content: "请选择小区", ConfirmFun: fanhui });
} else if ($("#danyuanhao").val() == "") {
$.DialogBySHF.Alert({ Width: 300, Height: 150, Title: "", Content: "请输入单元户号", ConfirmFun: fanhui });
} else if (!neirong) {
$.DialogBySHF.Alert({ Width: 300, Height: 150, Title: "", Content: "请填写问题描述", ConfirmFun: fanhui });
} else if (allLocalIds.length === 0) {
$.DialogBySHF.Alert({ Width: 300, Height: 150, Title: "", Content: "请至少选择一张图片", ConfirmFun: fanhui });
} else {
// 加载HTML图
// var _LoadingHtml = '<div id="loadingDiv" style="position:fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999; background:#fff; width:100%; height:100%;"><div style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);"><img src="image/loading.svg" style="vertical-align: middle;width: 100px;"></div><div style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);"><img src="image/logo.png" style="vertical-align: middle;width:40px;"></div></div>';
// 呈现loading效果
//document.write(_LoadingHtml);
var urls = "";
let index = 0;
function uploadNext() {
if (index >= allLocalIds.length) {
func(); // 全部完成后的回调
return;
}
tanchuang(index + 1);
const localId = allLocalIds[index];
wx.uploadImage({
localId: localId,
isShowProgressTips: 1,
success: (res) => {
const serverId = res.serverId;
$.ajax({
type: "POST",
url: "AjaxGongneng.aspx",
data: "Id=" + serverId + "&an=" + localId,
success: function (msg) {
index++;
urls += msg;
uploadNext(); // 递归触发下一张
}
});
}
});
}
uploadNext(); // 启动上传
function tanchuang(id) {
Swal.fire({
position: 'center', //定位 左上角
icon: 'info',
title: '正在提交第' + id + '张',
showConfirmButton: false,
allowOutsideClick: false
})
}
function func() {
if (urls != "") {
$.ajax({
type: "POST",
url: "AjaxTJ.aspx",
data: "type=公区维修&neirong=" + neirong + "&url=" + urls + "&xiaoqu=" + document.getElementById("xiaoqu").value + "&danyuan=" + document.getElementById("danyuanhao").value,
success: function (msg) {
window.location.href = "Record.aspx";
}
});
}
}
}
});
});
function fanhui() {
}
</script>
<div class="ChooseFrame">
<div class="ChooseFrameIcon">
<img src="image/fangwu.svg">
</div>
<div class="ChooseFrameRight">
<select id="xiaoqu" class="ChooseSelect">
<option>请选择小区</option>
<%
if (ListAbout.Count > 0)
{
foreach (var item in ListAbout)
{
%>
<option><%=item.title %></option>
<%
}
}
%>
</select>
</div>
<div class="cb"></div>
</div>
<div class="ChooseFrame">
<div class="ChooseFrameIcon">
<img src="image/danyuan.svg">
</div>
<div class="ChooseFrameRight">
<input placeholder="请输入单元户号，如：10单元902室" class="ChooseInput" type="text" id="danyuanhao" maxlength="20" />
</div>
<div class="cb"></div>
</div>
<div class="Frame">
<h2>问题描述</h2>
<textarea placeholder="请输入您的问题描述，以便我们会更好的为您服务" class="Word" id="neirong"></textarea>
<div id="xianshi">
</div>
<div class="PicUpload" id="scanQRCode1">
<i class="fa fa-plus-circle fa-lg"></i>
</div>
<div class="cb"></div>
</div>
<div class="tc">
<button class="Btn">提交工单</button>
</div>
<div class="Link"><a href="tel:021-64012818">或直接联系我们咨询</a></div>