member-create.html 26.3 KB

Edit Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员建档</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            min-height: 100vh;
            background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 480px;
            margin: 0 auto;
        }

        .header {
            background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
            border-radius: 18px;
            padding: 24px;
            text-align: center;
            margin-bottom: 24px;
            box-shadow: 0 4px 24px 0 rgba(76, 175, 80, 0.10);
            position: relative;
        }

        .header-title {
            color: #fff;
            font-size: 1.3em;
            font-weight: bold;
            letter-spacing: 2px;
            margin: 0 0 8px 0;
        }

        .header-desc {
            color: #e0f2f1;
            font-size: 0.95em;
            margin: 0;
        }

        .form-card {
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 4px 24px 0 rgba(76, 175, 80, 0.10);
            border: 1.5px solid #c8e6c9;
            overflow: hidden;
        }

        .form-content {
            padding: 24px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group:last-child {
            margin-bottom: 0;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #388e3c;
            letter-spacing: 1px;
            font-size: 0.95em;
        }

        .input-wrapper {
            position: relative;
        }

        input, select {
            width: 100%;
            padding: 12px 12px;
            border: 1.5px solid #c8e6c9;
            border-radius: 10px;
            font-size: 1em;
            transition: all 0.2s ease;
            background: #f9fff9;
            color: #2e7d32;
        }

        input:focus, select:focus {
            outline: none;
            border-color: #43a047;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
            background: #fff;
        }

        input::placeholder {
            color: #81c784;
        }

        /* 只读输入框样式 */
        input[readonly]:not(.select-input) {
            background: #f5f5f5 !important;
            color: #666 !important;
            cursor: not-allowed;
            border-color: #ddd !important;
        }

        input[readonly]:not(.select-input):focus {
            box-shadow: none !important;
            border-color: #ddd !important;
            background: #f5f5f5 !important;
        }

        /* 选择输入框样式（推荐人） */
        .select-input {
            background: #f9fff9 !important;
            color: #2e7d32 !important;
            cursor: pointer;
            border-color: #c8e6c9 !important;
        }

        .select-input:focus {
            outline: none;
            border-color: #43a047 !important;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1) !important;
            background: #fff !important;
        }

        .btn-group {
            display: flex;
            gap: 12px;
            margin-top: 24px;
        }

        button {
            flex: 1;
            padding: 12px 16px;
            font-size: 0.95em;
            font-weight: 500;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        button:active {
            transform: translateY(0);
        }

        .btn-primary {
            background: linear-gradient(135deg, #43a047 0%, #388e3c 100%);
            color: #fff;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
            color: #616161;
            border: 1px solid #bdbdbd;
        }

        .btn-secondary:hover {
            background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%);
            color: #424242;
        }

        .btn-primary:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* 消息提示样式 */
        .message {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: 500;
            z-index: 10000;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }

        .message.show {
            transform: translateX(0);
        }

        .message.success {
            background: #4caf50;
            color: #fff;
        }

        .message.error {
            background: #f44336;
            color: #fff;
        }

        /* 返回按钮 */
        .back-btn {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: #fff;
            padding: 8px 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9em;
            transition: all 0.3s ease;
        }

        .back-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        /* 选择弹窗样式 */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: #fff;
            border-radius: 12px;
            width: 90%;
            max-width: 400px;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            padding: 20px 20px 0 20px;
            border-bottom: 1px solid #e0e0e0;
        }

        .modal-title {
            margin: 0 0 16px 0;
            font-size: 1.1em;
            font-weight: bold;
            color: #388e3c;
            text-align: center;
        }

        .modal-body {
            padding: 20px;
            max-height: 50vh;
            overflow-y: auto;
        }

        .search-input {
            width: 100%;
            padding: 10px 12px;
            border: 1.5px solid #c8e6c9;
            border-radius: 8px;
            font-size: 0.95em;
            background: #f9fff9;
            color: #2e7d32;
            margin-bottom: 16px;
        }

        .search-input:focus {
            outline: none;
            border-color: #43a047;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
            background: #fff;
        }

        .option-list {
            max-height: 300px;
            overflow-y: auto;
        }

        .option-item {
            padding: 12px 16px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            background: #fff;
            color: #2e7d32;
        }

        .option-item:hover {
            background: #f0f8f0;
            border-color: #c8e6c9;
        }

        .option-item.selected {
            background: #e8f5e9;
            border-color: #43a047;
            color: #2e7d32;
        }

        .modal-footer {
            padding: 16px 20px 20px 20px;
            display: flex;
            gap: 12px;
            border-top: 1px solid #e0e0e0;
        }

        .modal-btn {
            flex: 1;
            padding: 10px 16px;
            border: none;
            border-radius: 8px;
            font-size: 0.95em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .modal-btn-secondary {
            background: #f5f5f5;
            color: #616161;
            border: 1px solid #bdbdbd;
        }

        .modal-btn-secondary:hover {
            background: #e0e0e0;
        }

        .modal-btn-primary {
            background: linear-gradient(135deg, #43a047 0%, #388e3c 100%);
            color: #fff;
        }

        .modal-btn-primary:hover {
            background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
        }

        .modal-btn-primary:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        /* 响应式设计 */
        @media (max-width: 600px) {
            body {
                padding: 10px;
            }

            .container {
                max-width: 100%;
            }

            .form-content {
                padding: 20px 16px;
            }

            .btn-group {
                flex-direction: column;
            }

            .modal-content {
                width: 95%;
                margin: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <button class="back-btn" onclick="goBack()">← 返回</button>
            <h1 class="header-title">会员建档</h1>
            <p class="header-desc">创建新的会员档案</p>
        </div>

        <div class="form-card">
            <div class="form-content">
                <form id="memberCreateForm">
                <div class="form-group">
                    <label for="memberName">会员名称 *</label>
                    <input type="text" id="memberName" placeholder="请输入会员名称" required>
                </div>

                <div class="form-group">
                    <label for="memberPhone">手机号 *</label>
                    <input type="tel" id="memberPhone" placeholder="请输入手机号" required>
                </div>

                <div class="form-group" style="display: none;">
                    <label for="memberType">客户类型</label>
                    <select id="memberType">
                        <option value="老客" selected>老客</option>
                        <option value="新客">新客</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="memberSource">客户来源</label>
                    <select id="memberSource" onchange="handleMemberSourceChange()">
                        <option value="嘉宾">嘉宾</option>
                        <option value="自然到店">自然到店</option>
                    </select>
                </div>

                <div class="form-group" id="referrerGroup" style="display: none;">
                    <label for="referrer">推荐人 *</label>
                    <input type="text" id="referrer" class="select-input" placeholder="请选择推荐人" readonly>
                </div>
            </form>

                <div class="btn-group">
                    <button type="button" class="btn-secondary" onclick="resetForm()">重置</button>
                    <button type="button" class="btn-primary" id="createMemberBtn" onclick="createMember()">确定建档</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 选择弹窗 -->
    <div class="modal-overlay" id="selectModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalTitle">选择</h3>
            </div>
            <div class="modal-body">
                <input type="text" class="search-input" id="searchInput" placeholder="请输入搜索内容">
                <div class="option-list" id="optionList">
                    <!-- 选项列表将通过JavaScript动态生成 -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="modal-btn modal-btn-secondary" onclick="closeModal()">取消</button>
                <button type="button" class="modal-btn modal-btn-primary" onclick="confirmSelection()">确定</button>
            </div>
        </div>
    </div>

    <!-- 消息提示 -->
    <div id="messageContainer"></div>

    <script src="config.js"></script>
    <script src="auth-utils.js"></script>
    <script>
        // 全局变量
        let userInfo = null;
        let currentSelectField = null;
        let currentOptions = [];
        let selectedOption = null;

        // 页面加载完成后初始化
        document.addEventListener("DOMContentLoaded", function() {
            initializePage();
            bindEvents();
        });

        // 初始化页面
        async function initializePage() {
            try {
                // 获取用户信息
                userInfo = await getUserInfo();
                if (!userInfo) {
                    showMessage("请先登录", "error");
                    setTimeout(() => {
                        window.location.href = "login.html";
                    }, 1500);
                    return;
                }

                // 初始化表单
                resetForm();

                // 加载推荐人选项
                loadReferrerOptions();

            } catch (error) {
                console.error("初始化失败:", error);
                showMessage("页面初始化失败", "error");
            }
        }

        // 绑定事件
        function bindEvents() {
            // 推荐人输入框点击事件
            const referrerInput = document.getElementById('referrer');
            if (referrerInput) {
                referrerInput.onclick = function() {
                    currentSelectField = referrerInput;
                    showModal("选择推荐人", currentOptions);
                };
            }

            // 表单输入事件
            const form = document.getElementById('memberCreateForm');
            if (form) {
                form.addEventListener('input', validateForm);
            }

            // 搜索输入框事件
            const searchInput = document.getElementById('searchInput');
            if (searchInput) {
                searchInput.addEventListener('input', handleSearch);
            }
        }

        // 重置表单
        function resetForm() {
            document.getElementById('memberCreateForm').reset();
            // 设置默认值
            document.getElementById('memberType').value = '老客';
            document.getElementById('memberSource').value = '嘉宾';
            // 显示推荐人字段（因为默认选择嘉宾）
            document.getElementById('referrerGroup').style.display = 'block';
            // 加载推荐人选项
            loadReferrerOptions();
            validateForm();
        }

        // 处理客户来源变化
        function handleMemberSourceChange() {
            const memberSource = document.getElementById('memberSource').value;
            const referrerGroup = document.getElementById('referrerGroup');

            if (memberSource === '嘉宾') {
                referrerGroup.style.display = 'block';
                // 加载推荐人选项
                loadReferrerOptions();
            } else {
                referrerGroup.style.display = 'none';
                document.getElementById('referrer').value = '';
                document.getElementById('referrer').dataset.selectedValue = '';
            }
            validateForm();
        }

        // 加载推荐人选项
        async function loadReferrerOptions() {
            try {
                currentOptions = await getMemberOptions();
            } catch (error) {
                console.error("加载推荐人选项失败:", error);
            }
        }

        // 获取会员选项
        async function getMemberOptions() {
            try {
                const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqKhxx?page=1&pageSize=1000`;
                const response = await fetch(apiUrl, {
                    method: "GET",
                    headers: {
                        "Authorization": `${getAuthToken()}`,
                        "Content-Type": "application/json"
                    }
                });

                if (response.ok) {
                    const result = await response.json();
                    if (result.code == 200 && result.data) {
                        return result.data.list.map(item => ({
                            value: item.id,
                            label: `${item.khmc}`,
                            sjh: item.sjh, // 会员手机号
                            khlx: item.khlx || '未知' // 客户来源/类型，默认为会员
                        }));
                    }
                }
                return [];
            } catch (error) {
                console.error("获取会员选项失败:", error);
                return [];
            }
        }

        // 显示选择弹窗
        function showModal(title, options) {
            currentOptions = options;
            document.getElementById("modalTitle").textContent = title;
            document.getElementById("searchInput").value = "";

            // 如果是加载状态，隐藏搜索框
            const searchInput = document.getElementById("searchInput");
            if (title === "加载中..." || title === "加载失败") {
                searchInput.style.display = "none";
            } else {
                searchInput.style.display = "block";
            }

            // 统一使用单选模式
            renderOptions(options);

            document.getElementById("selectModal").style.display = "flex";
        }

        // 关闭弹窗
        function closeModal() {
            document.getElementById("selectModal").style.display = "none";
            currentSelectField = null;
            currentOptions = [];
            selectedOption = null;
        }

        // 渲染选项列表
        function renderOptions(options) {
            const optionList = document.getElementById("optionList");
            optionList.innerHTML = "";

            if (!options || options.length === 0) {
                const emptyMessage = document.createElement("div");
                emptyMessage.className = "option-item";
                emptyMessage.textContent = "暂无数据";
                optionList.appendChild(emptyMessage);
                return;
            }

            options.forEach(option => {
                const optionItem = document.createElement("div");
                optionItem.className = "option-item";
                optionItem.textContent = option.label;
                optionItem.dataset.value = option.value;

                // 存储额外的属性到dataset中
                Object.keys(option).forEach(key => {
                    if (key !== "value" && key !== "label") {
                        optionItem.dataset[key] = option[key];
                    }
                });
                optionItem.addEventListener("click", function() {
                    // 移除之前的选中状态
                    document.querySelectorAll(".option-item").forEach(item => {
                        item.classList.remove("selected");
                    });
                    // 添加选中状态
                    this.classList.add("selected");
                    selectedOption = option;
                });
                optionList.appendChild(optionItem);
            });
        }

        // 处理搜索
        function handleSearch() {
            const searchTerm = document.getElementById("searchInput").value;
            if (!searchTerm) {
                // 如果搜索词为空，显示所有选项
                renderOptions(currentOptions);
                return;
            }

            const filteredOptions = currentOptions.filter(option =>
                option.label && option.label.toLowerCase().includes(searchTerm.toLowerCase())
            );
            renderOptions(filteredOptions);
        }

        // 确认选择
        function confirmSelection() {
            if (selectedOption && currentSelectField) {
                currentSelectField.value = selectedOption.label;
                currentSelectField.dataset.selectedValue = selectedOption.value;
                validateForm();
            }
            closeModal();
        }

        // 验证表单
        function validateForm() {
            const memberName = document.getElementById('memberName').value.trim();
            const memberPhone = document.getElementById('memberPhone').value.trim();
            const memberSource = document.getElementById('memberSource').value;
            const referrer = document.getElementById('referrer').dataset.selectedValue || '';

            const createBtn = document.getElementById('createMemberBtn');

            // 基本验证
            if (!memberName || !memberPhone) {
                createBtn.disabled = true;
                return;
            }

            // 手机号格式验证
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!phoneRegex.test(memberPhone)) {
                createBtn.disabled = true;
                return;
            }

            // 如果是嘉宾，必须选择推荐人
            if (memberSource === '嘉宾' && !referrer) {
                createBtn.disabled = true;
                return;
            }

            createBtn.disabled = false;
        }

        // 创建会员
        async function createMember() {
            const memberName = document.getElementById('memberName').value.trim();
            const memberPhone = document.getElementById('memberPhone').value.trim();
            const memberType = document.getElementById('memberType').value;
            const memberSource = document.getElementById('memberSource').value;
            const referrer = document.getElementById('referrer').dataset.selectedValue || '';

            // 验证必填字段
            if (!memberName) {
                showMessage("请输入会员名称", "error");
                return;
            }

            if (!memberPhone) {
                showMessage("请输入手机号", "error");
                return;
            }

            // 验证手机号格式
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!phoneRegex.test(memberPhone)) {
                showMessage("请输入正确的手机号格式", "error");
                return;
            }

            // 如果是嘉宾，必须选择推荐人
            if (memberSource === '嘉宾' && !referrer) {
                showMessage("选择嘉宾时必须选择推荐人", "error");
                return;
            }

            // 构建提交数据
            const memberData = {
                khmc: memberName,
                sjh: memberPhone,
                khlx: memberType,
                jdqd: memberSource,
                tjr: referrer,
                gsmd: userInfo.mdid
            };

            try {
                // 禁用按钮防止重复提交
                const createBtn = document.getElementById('createMemberBtn');
                createBtn.disabled = true;
                createBtn.textContent = '建档中...';

                // 提交到API
                const response = await fetch(`${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqKhxx`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `${getAuthToken()}`
                    },
                    body: JSON.stringify(memberData)
                });

                const result = await response.json();
                console.log(result);

                if (result.code === 200) {
                    showMessage("会员建档成功！", "success");

                    // 延迟重置表单
                    setTimeout(() => {
                        resetForm();
                    }, 1500);
                } else {
                    showMessage(`建档失败：${result.message || "未知错误"}`, "error");
                }
            } catch (error) {
                console.error("建档失败:", error);
                showMessage("网络错误，请检查连接后重试", "error");
            } finally {
                // 恢复按钮状态
                const createBtn = document.getElementById('createMemberBtn');
                createBtn.disabled = false;
                createBtn.textContent = '确定建档';
            }
        }

        // 显示消息
        function showMessage(message, type = 'info') {
            const messageContainer = document.getElementById('messageContainer');
            const messageElement = document.createElement('div');
            messageElement.className = `message ${type}`;
            messageElement.textContent = message;

            messageContainer.appendChild(messageElement);

            // 显示消息
            setTimeout(() => {
                messageElement.classList.add('show');
            }, 100);

            // 自动隐藏
            setTimeout(() => {
                messageElement.classList.remove('show');
                setTimeout(() => {
                    if (messageContainer.contains(messageElement)) {
                        messageContainer.removeChild(messageElement);
                    }
                }, 300);
            }, 3000);
        }

        // 返回上一页
        function goBack() {
            if (window.history.length > 1) {
                window.history.back();
            } else {
                window.location.href = 'index.html';
            }
        }
    </script>
</body>
</html>