377 lines
14 KiB
HTML
377 lines
14 KiB
HTML
<!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>
|
||
<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;
|
||
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> 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> 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> 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> 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> 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() {
|
||
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() {
|
||
var index = layer.load(1, {
|
||
shade: [0.1, '#fff'] //0.1透明度的白色背景
|
||
});
|
||
// 获取所有需要检查的输入字段
|
||
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) {
|
||
alert('以下项目未填写或未选择：\n' + errorMessage);
|
||
return;
|
||
}
|
||
|
||
// 如果所有字段都填写了，执行提交操作
|
||
$.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)
|
||
// 请求成功时处理
|
||
layer.msg(req.msg, {icon: 2});
|
||
if(req.code == 0){
|
||
setTimeout(() => {
|
||
window.location.reload();
|
||
}, 1000);
|
||
}
|
||
},
|
||
error: function() {
|
||
layer.close(layer.index)
|
||
// 请求出错处理
|
||
alert('提交失败，请重试。');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script> |