Antis.Erp.Plat/sy/from.html

<!DOCTYPE html>
<html lang="zh-CN" class="pos-app-root pos-html--embed-fill">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=5">
    <title>新增会员</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/pos-unified.css">
    <script src="./js/vue.min.js"></script>
    <script src="./axios-1.x/axios-1.x/dist/axios.js"></script>
    <script src="./axios-1.x/axios-1.x/dist/axios.min.js"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
</head>

<body class="pos-page pos-page--embed">
    <div id="app" class="pos-embed-app">
        <form class="pos-embed-form" action="#" method="post" @submit.prevent>
            <header class="pos-embed-head">
                <div class="pos-embed-head__text">
                    <h1 class="pos-embed-title">新建会员</h1>
                    <p class="pos-embed-sub">带 <span class="pos-embed-req" aria-hidden="true">*</span> 为必填；保存后可在收银中自动选中</p>
                </div>
                <button type="button" class="pos-embed-close" @click="close" aria-label="关闭">&times;</button>
            </header>

            <div class="pos-embed-body">
                <section class="pos-embed-section" aria-labelledby="embed-sec-basic">
                    <h2 id="embed-sec-basic" class="pos-embed-section__title">基本信息</h2>
                    <div class="pos-embed-field">
                        <label class="pos-embed-label" for="xm">姓名 <span class="pos-embed-req">*</span></label>
                        <input
                            id="xm"
                            class="pos-input"
                            type="text"
                            v-model="from.xm"
                            placeholder="请输入会员姓名"
                            autocomplete="name"
                        >
                    </div>
                    <div class="pos-embed-field">
                        <label class="pos-embed-label" for="sjh">手机号码 <span class="pos-embed-req">*</span></label>
                        <input
                            id="sjh"
                            class="pos-input"
                            type="tel"
                            inputmode="numeric"
                            maxlength="11"
                            v-model="from.sjh"
                            placeholder="11 位手机号"
                            autocomplete="tel"
                        >
                    </div>
                </section>

                <section class="pos-embed-section pos-embed-section--optional" aria-labelledby="embed-sec-extra">
                    <h2 id="embed-sec-extra" class="pos-embed-section__title">选填信息</h2>
                    <div class="pos-embed-field">
                        <label class="pos-embed-label" for="xb">性别</label>
                        <select id="xb" class="pos-select pos-embed-select" v-model="from.xb">
                            <option value="">请选择</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="pos-embed-field">
                        <label class="pos-embed-label" for="qd">渠道</label>
                        <input id="qd" class="pos-input" type="text" v-model="from.qd" placeholder="如：门店、线上等">
                    </div>
                    <div class="pos-embed-field">
                        <label class="pos-embed-label" for="hm">号码</label>
                        <input id="hm" class="pos-input" type="text" v-model="from.hm" placeholder="备用号码或其他编号">
                    </div>
                </section>
            </div>

            <footer class="pos-embed-foot">
                <div class="pos-embed-foot__actions">
                    <button type="button" class="pos-embed-foot-btn pos-embed-foot-btn--ghost" @click="close">取消</button>
                    <button type="button" class="pos-embed-foot-btn pos-embed-foot-btn--primary" @click="submit">保存会员</button>
                </div>
            </footer>
        </form>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                baseUrl: (() => {
                  const currentOrigin = window.location.origin;
                  if (currentOrigin.includes('localhost') || currentOrigin.includes('127.0.0.1')) {
                    return 'http://localhost:2011';
                  } else {
                    return currentOrigin.replace(/:\d+$/, '');
                  }
                })(),
                from: {
                    "sjh": "",
                    "xm": "",
                    "xb": "",
                    "qd": "",
                    "dgy": "",
                    "wldwmc": "",
                    "hm": "",
                    "skzh": "",
                    "shdz": ""
                }
            },
            mounted() {
                this.resetForm();
            },
            methods: {
                resetForm() {
                    this.from = {
                        sjh: "",
                        xm: "",
                        xb: "",
                        qd: "",
                        dgy: "",
                        wldwmc: "",
                        hm: "",
                        skzh: "",
                        shdz: ""
                    };
                },
                close() {
                    this.resetForm();
                    window.parent.postMessage({ type: 'formSubmittedclose', data: this.from }, '*');
                },
                submit() {
                    var that = this
                    if (!that.from.xm || !that.from.sjh) {
                        window.alert('请填写姓名和手机号码');
                        return;
                    }
                    var phoneRegex = /^1[3-9]\d{9}$/;
                    if (!phoneRegex.test(that.from.sjh)) {
                        window.alert('请输入正确的手机号码格式');
                        return;
                    }
                    axios({
                        url: that.baseUrl + "/api/Extend/wthy",
                        method: 'POST',
                        headers: {
                            Authorization: localStorage.getItem('token')
                        },
                        data:this.from
                    }).then((res) => {
                        if (res.data && res.data.code == 200) {
                            window.alert('添加成功');
                            window.parent.postMessage({ type: 'formSubmitted', data: this.from }, '*');
                            this.resetForm();
                        } else {
                            var errorMsg = (res.data && res.data.msg) ? res.data.msg : '添加失败';
                            window.alert(errorMsg);
                        }
                    }).catch((err) => {
                        console.error(err);
                        window.alert('网络错误，请重试');
                    });
                }
            }
        });
    </script>
</body>
</html>