398 lines
15 KiB
HTML
398 lines
15 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>
|
|||
|
|
<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>
|
|||
|
|
<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;
|
|||
|
|
min-width: 200px;
|
|||
|
|
min-height: 45px;
|
|||
|
|
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>等；软件包含就智能健康管理系统，智能硬件管理系统等，支持智能设备选购/定制、健康系统对接/定制，行业解决方案等，期待与您合作！
|
|||
|
|
</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>其它</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() {
|
|||
|
|
// 获取 #onload 元素
|
|||
|
|
const onloadElement = document.getElementById('onload');
|
|||
|
|
|
|||
|
|
// 计算 #onload 元素的高度
|
|||
|
|
const height = onloadElement.offsetHeight;
|
|||
|
|
|
|||
|
|
// 设置 #onload 元素的行高与高度一致
|
|||
|
|
onloadElement.style.lineHeight = height + 'px';
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
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() {
|
|||
|
|
|
|||
|
|
// 获取所有需要检查的输入字段
|
|||
|
|
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) {
|
|||
|
|
|
|||
|
|
layer.msg('以下项目未填写或未选择：\n' + errorMessage, {icon: 2});
|
|||
|
|
// alert('以下项目未填写或未选择：\n' + errorMessage);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var index = layer.load(1, {
|
|||
|
|
shade: [0.1, '#fff'] //0.1透明度的白色背景
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 如果所有字段都填写了，执行提交操作
|
|||
|
|
$.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){
|
|||
|
|
layer.msg(req.msg, {icon: 1});
|
|||
|
|
setTimeout(() => {
|
|||
|
|
window.location.reload();
|
|||
|
|
}, 2000);
|
|||
|
|
}else{
|
|||
|
|
layer.msg(req.msg, {icon: 2});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function() {
|
|||
|
|
layer.close(layer.index)
|
|||
|
|
// 请求出错处理
|
|||
|
|
layer.msg('网络错误了，请直接联系商务合作电话/微信：13590959084', {icon: 2});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|