336 lines
14 KiB
HTML
336 lines
14 KiB
HTML
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
|
||
|
||
<div class="form-group">
|
||
<label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
|
||
<div class="col-xs-12 col-sm-8">
|
||
<input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" value="{$row.name|htmlentities}">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-xs-12 col-sm-2">{:__('Fees')}:</label>
|
||
<div class="col-xs-12 col-sm-8">
|
||
<input id="c-fees" data-rule="required" class="form-control" step="0.01" name="row[fees]" type="number" value="{$row.fees|htmlentities}">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-xs-12 col-sm-2">入会类型:</label>
|
||
<div class="col-xs-12 col-sm-8">
|
||
<select id="input-join-config" name="row[join_config_id]" class="selectpicker form-control" data-live-search="true" placeholder="请选择入会类型">
|
||
{foreach $join_config as $item}
|
||
<option value="{$item.id}" {eq name="row.join_config_id" value="$item.id"}selected{/eq}>{$item.name}</option>
|
||
{/foreach}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<!--会员权益项目-->
|
||
<div class="form-group">
|
||
<label class="control-label col-xs-12 col-sm-2">会员权益项目:</label>
|
||
<div class="col-xs-12 col-sm-8">
|
||
<select id="input-benefits" name="row[benefits_project][]" class="selectpicker form-control" multiple title="请选择权益项目" placeholder="请选择权益项目">
|
||
{foreach $benefits_project as $project}
|
||
<option value="{$project.id}" {if in_array($project.id, $row.benefits_project)}selected{/if}>{$project.name}</option>
|
||
{/foreach}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!--会员轮播背景图-->
|
||
<div class="form-group">
|
||
<label class="control-label col-xs-12 col-sm-2">会员卡片:</label>
|
||
<div class="col-xs-12 col-sm-8">
|
||
<div class="input-group">
|
||
<input id="c-image" data-rule="required" class="form-control" size="50" name="row[image]" value="{$row.image|htmlentities}" type="text" placeholder="请选择或上传图片">
|
||
<div class="input-group-addon no-border no-padding">
|
||
<span><button type="button" id="faupload-image" class="btn btn-danger faupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> Upload</button></span>
|
||
<span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> Choose</button></span>
|
||
</div>
|
||
<span class="msg-box n-right" for="c-image"></span>
|
||
</div>
|
||
<ul class="row list-inline faupload-preview" id="p-image"></ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
|
||
<div class="col-xs-12 col-sm-8">
|
||
<textarea id="c-content" data-rule="required" class="form-control editor" rows="5" name="row[content]" cols="50">{$row.content|htmlentities}</textarea>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
|
||
<div class="col-xs-12 col-sm-8">
|
||
<input id="c-weigh" class="form-control" name="row[weigh]" type="number" value="{$row.weigh|htmlentities}">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
|
||
<div class="col-xs-12 col-sm-8">
|
||
<div class="radio">
|
||
{foreach name="statusList" item="vo"}
|
||
<label for="row[status]-{$key|htmlentities}"><input id="row[status]-{$key|htmlentities}" name="row[status]" type="radio" value="{$key|htmlentities}" {in name="key" value="$row.status"}checked{/in} /> {$vo|htmlentities}</label>
|
||
{/foreach}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group layer-footer">
|
||
<label class="control-label col-xs-12 col-sm-2"></label>
|
||
<div class="col-xs-12 col-sm-8">
|
||
<button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<script>
|
||
(function() {
|
||
// 获取DOM元素
|
||
var joinConfigSelect = document.getElementById('input-join-config');
|
||
var benefitsSelect = document.getElementById('input-benefits');
|
||
|
||
if (!joinConfigSelect || !benefitsSelect) return;
|
||
|
||
var pendingXhr = null;
|
||
var benefitsCache = {};
|
||
|
||
// 保存原始的权益选中值（页面渲染时PHP已经设置的选中状态）
|
||
var originalSelectedBenefits = [];
|
||
for (var i = 0; i < benefitsSelect.options.length; i++) {
|
||
if (benefitsSelect.options[i].selected && benefitsSelect.options[i].value !== '') {
|
||
originalSelectedBenefits.push(benefitsSelect.options[i].value);
|
||
}
|
||
}
|
||
|
||
// 刷新 bootstrap-select
|
||
function refreshSelectpicker(selectEl) {
|
||
if (typeof $ !== 'undefined' && $ && $(selectEl).selectpicker) {
|
||
$(selectEl).selectpicker('refresh');
|
||
}
|
||
}
|
||
|
||
// 设置禁用状态
|
||
function setDisabled(selectEl, disabled) {
|
||
selectEl.disabled = disabled;
|
||
refreshSelectpicker(selectEl);
|
||
}
|
||
|
||
// 清空已选中的权益值
|
||
function clearBenefitsSelected() {
|
||
for (var i = 0; i < benefitsSelect.options.length; i++) {
|
||
benefitsSelect.options[i].selected = false;
|
||
}
|
||
benefitsSelect.value = '';
|
||
refreshSelectpicker(benefitsSelect);
|
||
}
|
||
|
||
// 设置权益选中的值（用于初始化时还原选中项）
|
||
function setBenefitsSelected(selectedValues) {
|
||
for (var i = 0; i < benefitsSelect.options.length; i++) {
|
||
var option = benefitsSelect.options[i];
|
||
if (selectedValues.indexOf(option.value) !== -1) {
|
||
option.selected = true;
|
||
} else {
|
||
option.selected = false;
|
||
}
|
||
}
|
||
refreshSelectpicker(benefitsSelect);
|
||
}
|
||
|
||
// 渲染权益选项
|
||
function renderBenefits(benefitsList, selectedValues) {
|
||
// 清空原有选项
|
||
benefitsSelect.innerHTML = '';
|
||
|
||
if (!benefitsList || benefitsList.length === 0) {
|
||
var emptyOption = document.createElement('option');
|
||
emptyOption.value = '';
|
||
emptyOption.disabled = true;
|
||
emptyOption.textContent = '暂无权益';
|
||
benefitsSelect.appendChild(emptyOption);
|
||
} else {
|
||
for (var i = 0; i < benefitsList.length; i++) {
|
||
var option = document.createElement('option');
|
||
option.value = benefitsList[i].id;
|
||
option.textContent = benefitsList[i].title;
|
||
// 如果传入了选中值，且当前id在选中值中，则设置为选中
|
||
if (selectedValues && selectedValues.length && selectedValues.indexOf(String(benefitsList[i].id)) !== -1) {
|
||
option.selected = true;
|
||
}
|
||
benefitsSelect.appendChild(option);
|
||
}
|
||
}
|
||
|
||
refreshSelectpicker(benefitsSelect);
|
||
}
|
||
|
||
// 请求接口获取权益
|
||
function fetchBenefits(joinConfigId) {
|
||
return new Promise(function(resolve, reject) {
|
||
if (!joinConfigId) {
|
||
resolve([]);
|
||
return;
|
||
}
|
||
|
||
if (benefitsCache[joinConfigId]) {
|
||
resolve(benefitsCache[joinConfigId]);
|
||
return;
|
||
}
|
||
|
||
var apiUrl = '/fxWbNZyTRt.php/wdsxh/member/level/benefits?join_config_id=' + encodeURIComponent(joinConfigId);
|
||
|
||
if (pendingXhr) {
|
||
pendingXhr.abort();
|
||
}
|
||
|
||
setDisabled(benefitsSelect, true);
|
||
|
||
var xhr = new XMLHttpRequest();
|
||
pendingXhr = xhr;
|
||
xhr.open('GET', apiUrl, true);
|
||
xhr.timeout = 10000;
|
||
|
||
xhr.onreadystatechange = function() {
|
||
if (xhr.readyState === 4) {
|
||
pendingXhr = null;
|
||
setDisabled(benefitsSelect, false);
|
||
|
||
if (xhr.status === 200) {
|
||
try {
|
||
var res = JSON.parse(xhr.responseText);
|
||
var benefitsList = [];
|
||
|
||
if (Array.isArray(res)) {
|
||
benefitsList = res;
|
||
} else if (res && Array.isArray(res.data)) {
|
||
benefitsList = res.data;
|
||
} else if (res && Array.isArray(res.list)) {
|
||
benefitsList = res.list;
|
||
} else if (res && res.code === 1 && Array.isArray(res.data)) {
|
||
benefitsList = res.data;
|
||
} else if (res && res.code === 0 && Array.isArray(res.data)) {
|
||
benefitsList = res.data;
|
||
}
|
||
|
||
var normalized = [];
|
||
for (var i = 0; i < benefitsList.length; i++) {
|
||
var item = benefitsList[i];
|
||
var id = item.id || item.value || 0;
|
||
var title = item.title || item.name || item.label || '未命名';
|
||
if (id != 0) {
|
||
normalized.push({ id: id, title: title });
|
||
}
|
||
}
|
||
|
||
benefitsCache[joinConfigId] = normalized;
|
||
resolve(normalized);
|
||
} catch(e) {
|
||
console.error('解析响应失败:', e);
|
||
reject(e);
|
||
}
|
||
} else {
|
||
reject(new Error('请求失败: ' + xhr.status));
|
||
}
|
||
}
|
||
};
|
||
|
||
xhr.onerror = function() {
|
||
pendingXhr = null;
|
||
setDisabled(benefitsSelect, false);
|
||
reject(new Error('网络错误'));
|
||
};
|
||
|
||
xhr.ontimeout = function() {
|
||
pendingXhr = null;
|
||
setDisabled(benefitsSelect, false);
|
||
reject(new Error('请求超时'));
|
||
};
|
||
|
||
xhr.send();
|
||
});
|
||
}
|
||
|
||
// 入会类型变更处理（切换时清空已选中的权益，重新加载）
|
||
function onJoinConfigChange() {
|
||
var joinId = joinConfigSelect.value;
|
||
|
||
if (!joinId) {
|
||
benefitsSelect.innerHTML = '';
|
||
var emptyOption = document.createElement('option');
|
||
emptyOption.value = '';
|
||
emptyOption.disabled = true;
|
||
emptyOption.textContent = '请先选择入会类型';
|
||
benefitsSelect.appendChild(emptyOption);
|
||
refreshSelectpicker(benefitsSelect);
|
||
setDisabled(benefitsSelect, true);
|
||
return;
|
||
}
|
||
|
||
// 切换时清空已选中的权益值
|
||
clearBenefitsSelected();
|
||
|
||
setDisabled(benefitsSelect, false);
|
||
|
||
fetchBenefits(joinId).then(function(benefitsList) {
|
||
if (!benefitsList.length) {
|
||
benefitsSelect.innerHTML = '';
|
||
var emptyOption = document.createElement('option');
|
||
emptyOption.value = '';
|
||
emptyOption.disabled = true;
|
||
emptyOption.textContent = '暂无权益';
|
||
benefitsSelect.appendChild(emptyOption);
|
||
refreshSelectpicker(benefitsSelect);
|
||
return;
|
||
}
|
||
|
||
// 切换后不保留任何选中值（因为权益列表已变）
|
||
renderBenefits(benefitsList, []);
|
||
}).catch(function() {
|
||
benefitsSelect.innerHTML = '';
|
||
var errorOption = document.createElement('option');
|
||
errorOption.value = '';
|
||
errorOption.disabled = true;
|
||
errorOption.textContent = '加载失败，请重试';
|
||
benefitsSelect.appendChild(errorOption);
|
||
refreshSelectpicker(benefitsSelect);
|
||
});
|
||
}
|
||
|
||
// 监听入会类型变化
|
||
joinConfigSelect.addEventListener('change', onJoinConfigChange);
|
||
|
||
// 页面初始化：根据当前选中的入会类型，重新加载对应的权益列表，并还原选中的权益值
|
||
setTimeout(function() {
|
||
refreshSelectpicker(joinConfigSelect);
|
||
refreshSelectpicker(benefitsSelect);
|
||
|
||
var defaultJoinId = joinConfigSelect.value;
|
||
if (defaultJoinId) {
|
||
// 根据当前入会类型加载权益列表，并尝试还原原始选中的权益值（匹配的才保留）
|
||
fetchBenefits(defaultJoinId).then(function(benefitsList) {
|
||
if (benefitsList.length) {
|
||
// 检查原始选中值中哪些在新列表中
|
||
var newBenefitIds = benefitsList.map(function(b) { return String(b.id); });
|
||
var matchedSelected = [];
|
||
for (var i = 0; i < originalSelectedBenefits.length; i++) {
|
||
if (newBenefitIds.indexOf(originalSelectedBenefits[i]) !== -1) {
|
||
matchedSelected.push(originalSelectedBenefits[i]);
|
||
}
|
||
}
|
||
renderBenefits(benefitsList, matchedSelected);
|
||
} else {
|
||
benefitsSelect.innerHTML = '';
|
||
var emptyOption = document.createElement('option');
|
||
emptyOption.value = '';
|
||
emptyOption.disabled = true;
|
||
emptyOption.textContent = '暂无权益';
|
||
benefitsSelect.appendChild(emptyOption);
|
||
refreshSelectpicker(benefitsSelect);
|
||
}
|
||
}).catch(function() {
|
||
console.error('初始化加载权益失败');
|
||
});
|
||
} else {
|
||
setDisabled(benefitsSelect, true);
|
||
}
|
||
}, 100);
|
||
})();
|
||
</script>
|