SchoolPhysicalExamination/application/testapp/view/download/business_cooperation.html

398 lines
15 KiB
HTML
Raw Normal View History

2024-12-26 19:14:44 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no, email=no">
<meta name="full-screen" content="true">
<meta name="screen-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="360-fullscreen" content="true">
<title>商务合作</title>
<script src="/x_admin/js/jq.js"></script>
2025-04-19 17:24:07 +08:00
<script type="text/javascript" src="/x_admin/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/x_admin/js/xadmin.js"></script>
2024-12-26 19:14:44 +08:00
<style>
*{
padding: 0 0;
margin: 0 0;
}
.big_box{
width: 100vw;
min-height: 100vh;
position: absolute;
top: 0;
left: 0;
background: url(/tsf/business_bg.jpg) no-repeat;
background-size: 100% 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
}
.content{
width: 85vw;
max-width: 880px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
border-radius: 1vw;
background-color: white;
margin: 24px 0;
overflow: hidden;
align-items: center;
}
.content img{
width: 100%;
height: auto;
}
.content_c{
width: 100%;
padding: 2% 12%;
box-sizing: border-box;
}
.title_t{
border: none;
text-align: center;
color: rgba(8, 14, 23, 0.9);
font-weight: 600;
font-size: 28px;
line-height: 40px;
word-break: break-all;
white-space: pre-wrap;
overflow: visible;
margin: 4% 0;
}
.title_c2{
font-size: 12px;
margin-bottom: 10%;
}
.title_c2 span{
color: rgb(17, 106, 240);
}
.write_box{
width: 100%;
font-size: 16px;
margin: 10% 0;
}
.write_box_t{
font-weight: 600;
}
.write_box_r{
color: red;
}
.write_k{
padding: 8px 12px;
position: relative;
border-radius: 6px;
border: 1px solid rgba(8, 14, 23, 0.24);
display: flex;
outline: 0 !important;
word-break: break-all;
margin: 2% 0;
}
.write_k textarea{
width: 100%;
resize: none;
text-overflow: ellipsis;
line-height: 22px;
border: none !important;
border-radius: 0;
background: transparent !important;
box-shadow: none !important;
outline: 0 !important;
cursor: auto;
padding: 0;
min-height: 22px;
margin: 0 1%;
}
.ksapc-select-write {
width: 100%;
}
.ksapc-select-write-tip {
margin-bottom: 10px;
font-size: 14px;
color: #8E9095;
}
.ksapc-select-write-tile {
width: 100%;
}
.ksapc-checkboxgroup {
width: 100%;
}
.ksapc-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.ksapc-col {
flex: 1 1 48%; /* 两列布局 */
}
.ksapc-checkbox {
display: flex;
align-items: center;
}
.ksapc-checkbox input {
margin-right: 8px;
}
.ksapc-checkbox span{
font-size: 14px;
cursor: pointer;
}
#onload{
width: 20vw;
height: 5vw;
2025-04-19 17:24:07 +08:00
min-width: 200px;
min-height: 45px;
2024-12-26 19:14:44 +08:00
background-color: #0A6CFF;
color: white;
border-radius: 10px;
line-height: 5vw;
text-align: center;
font-size: 15px;
font-weight: bold;
margin-bottom: 35px;
cursor: pointer; /* 添加小手图标 */
}
</style>
</head>
<body id="box_k">
<div class="big_box">
<div class="content">
<img src="/tsf/business_title.jpg" alt="">
<div class="content_c">
<div class="title_t">商务合作意向登记表</div>
<div class="title_c2">
智能设备产品包<span>含身高测量仪、体重体脂秤、宠物秤, 母婴秤,厨房秤,商业秤,身高体重/体脂秤,八电极体脂秤,运动训练设备</span>等;软件包含就智能健康管理系统,智能硬件管理系统等,支持智能设备选购/定制、健康系统对接/定制行业解决方案等您也可以直接拨打或微信联系13590959084期待与您合作
</div>
<div class="write_box">
<div class="write_box_t">
<span class="write_box_r">*</span>&nbsp; 1.客户姓名
</div>
<div class="write_k">
<textarea placeholder="请输入" rows="1" oninput="autoResize(this)" class="name-input"></textarea>
</div>
</div>
<div class="write_box">
<div class="write_box_t">
<span class="write_box_r">*</span>&nbsp; 2.联系电话
</div>
<div class="write_k">
<textarea placeholder="请输入手机号" rows="1" oninput="autoResize(this)" class="phone-input"></textarea>
</div>
</div>
<div class="write_box">
<div class="write_box_t">
<span class="write_box_r">*</span>&nbsp; 3.公司名称
</div>
<div class="write_k">
<textarea placeholder="请输入" rows="1" oninput="autoResize(this)" class="company-input"></textarea>
</div>
</div>
<div class="write_box">
<div class="write_box_t">
<span class="write_box_r">*</span>&nbsp; 4.合作意向
</div>
<div class="write_k" style="border: none;">
<div class="ksapc-select-write">
<div class="ksapc-select-write-tip" id="selectedCount">此题已选择 0/6 项</div>
<div class="ksapc-select-write-tile">
<div class="ksapc-checkboxgroup">
<div class="ksapc-row">
<div class="ksapc-col">
<label class="ksapc-checkbox">
<input type="checkbox" class="option-checkbox" value="智能设备">
<span>智能设备</span>
</label>
</div>
<div class="ksapc-col">
<label class="ksapc-checkbox">
<input type="checkbox" class="option-checkbox" value="健康软件">
<span>健康软件</span>
</label>
</div>
<div class="ksapc-col">
<label class="ksapc-checkbox">
<input type="checkbox" class="option-checkbox" value="解决方案">
<span>解决方案</span>
</label>
</div>
<div class="ksapc-col">
<label class="ksapc-checkbox">
<input type="checkbox" class="option-checkbox" value="系统定制">
<span>系统定制</span>
</label>
</div>
<div class="ksapc-col">
<label class="ksapc-checkbox">
<input type="checkbox" class="option-checkbox" value="设备定制">
<span>设备定制</span>
</label>
</div>
<div class="ksapc-col">
<label class="ksapc-checkbox">
<input type="checkbox" class="option-checkbox" value="其它">
<span>其它可联系商务合作13590959084</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="write_box">
<div class="write_box_t">
<span class="write_box_r">*</span>&nbsp; 5.备注
</div>
<div class="write_k">
<textarea placeholder="请输入" rows="1" oninput="autoResize(this)" class="remark-input"></textarea>
</div>
</div>
<div class="write_box" style="color: #8E9095;">
商务合作电话/微信13590959084
</div>
</div>
<div id="onload">提交</div>
</div>
</div>
</body>
</html>
<script>
var selectedValues = [];
function autoResize(textarea) {
textarea.style.height = 'auto'; // 重置高度
textarea.style.height = textarea.scrollHeight + 'px'; // 设置为内容高度
}
document.addEventListener('DOMContentLoaded', function() {
2025-04-19 17:24:07 +08:00
// 获取 #onload 元素
const onloadElement = document.getElementById('onload');
// 计算 #onload 元素的高度
const height = onloadElement.offsetHeight;
// 设置 #onload 元素的行高与高度一致
onloadElement.style.lineHeight = height + 'px';
2024-12-26 19:14:44 +08:00
const checkboxes = document.querySelectorAll('.option-checkbox');
const selectedCountElement = document.getElementById('selectedCount');
let selectedCount = 0;
function updateSelectedCount() {
selectedCount = 0;
selectedValues = [];
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
selectedCount++;
selectedValues.push(checkbox.value);
}
});
selectedCountElement.textContent = `此题已选择 ${selectedCount}/6 项`;
console.log('Selected Values:', selectedValues);
}
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', updateSelectedCount);
});
$('#onload').on('click', function() {
2025-04-19 17:24:07 +08:00
2024-12-26 19:14:44 +08:00
// 获取所有需要检查的输入字段
const nameInput = document.querySelector('.name-input');
const phoneInput = document.querySelector('.phone-input');
const companyInput = document.querySelector('.company-input');
const remarkInput = document.querySelector('.remark-input');
// 检查每个字段是否为空
let hasError = false;
let errorMessage = '';
if (!nameInput || nameInput.value.trim() === '') {
hasError = true;
errorMessage += '1. 客户姓名\n';
}
if (!phoneInput || phoneInput.value.trim() === '') {
hasError = true;
errorMessage += '2. 联系电话\n';
}
if (!companyInput || companyInput.value.trim() === '') {
hasError = true;
errorMessage += '3. 公司名称\n';
}
if (selectedCount === 0) {
hasError = true;
errorMessage += '4. 合作意向\n';
}
if (!remarkInput || remarkInput.value.trim() === '') {
hasError = true;
errorMessage += '5. 备注\n';
}
if (hasError) {
2025-04-19 17:24:07 +08:00
layer.msg('以下项目未填写或未选择:\n' + errorMessage, {icon: 2});
// alert('以下项目未填写或未选择:\n' + errorMessage);
2024-12-26 19:14:44 +08:00
return;
}
2025-04-19 17:24:07 +08:00
var index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
2024-12-26 19:14:44 +08:00
// 如果所有字段都填写了,执行提交操作
$.ajax({
url: "business_cooperation_action", // 请求的url地址
dataType: "json", // 返回格式为json
async: true, // 请求是否异步默认为异步这也是ajax重要特性
data: {
"name": nameInput.value,
"phone": phoneInput.value,
"company": companyInput.value,
"selectedValues": selectedValues,
"remark": remarkInput.value
},
type: "POST", // 请求方式
success: function(req) {
layer.close(layer.index)
// 请求成功时处理
if(req.code == 0){
2025-04-19 17:24:07 +08:00
layer.msg(req.msg, {icon: 1});
2024-12-26 19:14:44 +08:00
setTimeout(() => {
window.location.reload();
2025-04-19 17:24:07 +08:00
}, 2000);
}else{
layer.msg(req.msg, {icon: 2});
2024-12-26 19:14:44 +08:00
}
},
error: function() {
layer.close(layer.index)
// 请求出错处理
2025-04-19 17:24:07 +08:00
layer.msg('网络错误了,请直接联系商务合作电话/微信13590959084', {icon: 2});
2024-12-26 19:14:44 +08:00
}
});
});
});
</script>