vue3-schub
/
reg.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SC中文社区注册申请表单</title>
    <link
      href="https://cdn.jsdelivr.net/npm/daisyui@4.6.1/dist/full.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
      <div
        class="toast toast-top toast-center"
        v-if="alerts.length"
        style="z-index: 1000"
      >
        <div
          class="alert"
          :class="el.alerttype "
          v-for="(el, index) in alerts"
          :key="index"
        >
          <span>{{ el.msg }}</span>
        </div>
      </div>

      <dialog id="my_modal_1" class="modal">
        <div class="modal-box">
          <h3 class="font-bold text-lg">注册申请表单说明</h3>
          <div v-if="illustrate != ''" v-html="illustrate"></div>
          <div class="modal-action">
            <form method="dialog">
              <!-- if there is a button in form, it will close the modal -->
              <button class="btn">关闭</button>
            </form>
          </div>
        </div>
      </dialog>

      <dialog id="my_modal_2" class="modal">
        <div class="modal-box">
          <h3 class="font-bold text-lg">排队进度查询</h3>
          <div class="overflow-x-auto">
            <table class="table">
              <!-- head -->
              <thead>
                <tr>
                  <th></th>
                  <th>时间</th>
                  <th>状态</th>
                  <th>说明</th>
                  <th>前方等待</th>
                </tr>
              </thead>
              <tbody>
                <!-- row 1 -->
                <tr
                  v-if="statelist.length"
                  v-for="(item, index) in statelist"
                  :key="index"
                >
                  <th>{{index+1}}</th>
                  <td>{{item.time}}</td>
                  <td>{{statetype[item.state]}}</td>
                  <td>{{item.msg}}</td>
                  <td>
                    {{item.location == 0 ? '即将审核' : ''}} {{item.location > 0
                    ? `${item.location}位` : ''}}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="modal-action">
            <form method="dialog">
              <!-- if there is a button in form, it will close the modal -->
              <button class="btn">关闭</button>
            </form>
          </div>
        </div>
      </dialog>

      <div style="z-index: 1">
        <div class="hero min-h-screen bg-base-200" v-if="windowWidth">
          <div class="hero-content flex-col lg:flex-row-reverse">
            <div
              class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100"
              style="min-width: 600px"
            >
              <form class="card-body">
                <div class="form-control">
                  <label class="label">
                    <h3 class="text-3xl font-bold">SC中文社区注册申请表单</h3>
                  </label>
                </div>

                <div class="form-control">
                  <label class="label">
                    <span class="label-text">QQ号</span>
                  </label>
                  <input
                    type="name"
                    placeholder="请输入邮箱对应的QQ号"
                    class="input input-bordered"
                    required
                    v-model="reg.qq"
                  />
                </div>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text">邮箱</span>
                  </label>
                  <input
                    type="email"
                    placeholder="请输入QQ邮箱"
                    class="input input-bordered"
                    required
                    v-model="reg.email"
                  />
                </div>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text">密码</span>
                  </label>
                  <input
                    type="password"
                    placeholder="请输入密码"
                    minlength="8"
                    maxlength="16"
                    class="input input-bordered"
                    required
                    v-model="reg.pass"
                  />
                </div>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text">确认密码</span>
                  </label>
                  <input
                    type="password"
                    placeholder="请输入密码"
                    minlength="8"
                    maxlength="16"
                    class="input input-bordered"
                    required
                    v-model="reg.confirmpass"
                  />
                </div>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text">昵称</span>
                  </label>
                  <input
                    type="name"
                    placeholder="请输入昵称"
                    maxlength="12"
                    class="input input-bordered"
                    required
                    v-model="reg.name"
                  />
                </div>

                <div class="form-control">
                  <label class="label">
                    <span class="label-text">你对sc圈子目前的的看法</span>
                  </label>
                  <textarea
                    class="textarea textarea-bordered"
                    placeholder=""
                    v-model="reg.record"
                  ></textarea>
                </div>
              </form>
              <button
                class="btn btn-primary"
                style="margin: 0 2rem 2rem 2rem"
                @click="sing"
              >
                提交
              </button>
              <!-- Open the modal using ID.showModal() method -->
              <button
                class="btn"
                style="margin: 0 2rem 2rem 2rem"
                onclick="my_modal_1.showModal()"
                @click="getillustrate"
              >
                表单说明
              </button>

              <!-- Open the modal using ID.showModal() method -->
              <button
                class="btn"
                style="margin: 0 2rem 2rem 2rem"
                onclick="my_modal_2.showModal()"
                @click="getstate"
              >
                查询进度
              </button>
            </div>
          </div>
        </div>
        <form class="card-body" v-else>
          <div class="form-control">
            <label class="label">
              <h3 class="text-2xl font-bold">SC中文社区注册表单</h3>
            </label>
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">QQ号</span>
            </label>
            <input
              type="text"
              placeholder="请输入邮箱对应的QQ号"
              class="input input-bordered"
              required
              v-model="reg.qq"
            />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">邮箱</span>
            </label>
            <input
              type="email"
              placeholder="请输入QQ邮箱"
              class="input input-bordered"
              required
              v-model="reg.email"
            />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">密码</span>
            </label>
            <input
              type="password"
              placeholder="请输入密码"
              minlength="8"
              maxlength="16"
              class="input input-bordered"
              required
              v-model="reg.pass"
            />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">确认密码</span>
            </label>
            <input
              type="password"
              placeholder="请输入密码"
              minlength="8"
              maxlength="16"
              class="input input-bordered"
              required
              v-model="reg.confirmpass"
            />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">昵称</span>
            </label>
            <input
              type="name"
              placeholder="请输入昵称"
              maxlength="12"
              class="input input-bordered"
              required
              v-model="reg.name"
            />
          </div>

          <div class="form-control">
            <label class="label">
              <span class="label-text">你对sc圈子目前的的看法</span>
            </label>
            <textarea
              class="textarea textarea-bordered"
              placeholder=""
              v-model="reg.record"
            ></textarea>
          </div>
        </form>
        <button
          class="btn btn-primary"
          style="margin: 0 2rem 2rem 2rem"
          @click="sing"
          v-if="!windowWidth"
        >
          提交
        </button>
        <!-- Open the modal using ID.showModal() method -->
        <button
          class="btn"
          onclick="my_modal_1.showModal()"
          v-if="!windowWidth"
          @click="getillustrate"
        >
          表单说明
        </button>

        <!-- Open the modal using ID.showModal() method -->
        <button
          class="btn"
          v-if="!windowWidth"
          style="margin: 0 2rem 2rem 2rem"
          onclick="my_modal_2.showModal()"
          @click="getstate"
        >
          查询进度
        </button>
      </div>
    </div>

    <script>
      const { createApp } = Vue

      createApp({
        data() {
          return {
            list: [],
            num: 0,
            state: 0,
            windowWidth: true,
            reg: {
              qq: '',
              pass: '',
              email: '',
              confirmpass: '',
              name: '',
              record: '',
            },
            alerts: [],
            illustrate: '',
            statelist: [],
            statetype: ['排队中', '已完成', '错误'],
          }
        },
        methods: {
          handleResize() {
            this.windowWidth = window.innerWidth > 786 ? true : false
          },
          getstate() {
            let myHeaders = new Headers()
            myHeaders.append('Content-Type', 'application/json')
            let requestOptions = {
              method: 'POST',
              redirect: 'follow',
              headers: myHeaders,
              body: JSON.stringify({
                ip: '240e:468:ba92:a00c:73d0:20bc:77fd:bd8d, 113.219.202.153',
              }),
            }

            fetch('https://suancaixianyu.cn/xyscapi/getstate', requestOptions)
              .then((response) => response.json())
              .then((body) => {
                if (body.code == 200) {
                  this.statelist = body.data
                } else {
                  this.statelist = []
                  this.alerts.push({
                    msg: body.msg,
                    alerttype: 'alert-error',
                  })
                }
                this.alert()
              })
              .catch((error) => {
                this.alerts.push({
                  msg: '请求失败，服务器连接异常',
                  alerttype: 'alert-error',
                })
                console.log('error', error)
                this.alert()
              })
          },
          getillustrate() {
            let requestOptions = {
              method: 'POST',
              redirect: 'follow',
            }

            fetch(
              'https://suancaixianyu.cn/xyscapi/getillustrate',
              requestOptions,
            )
              .then((response) => response.json())
              .then((body) => {
                if (body.code == 200) {
                  this.illustrate = body.data
                } else {
                  this.illustrate = '获取失败x_x'
                }
              })
              .catch((error) => {
                this.illustrate = '获取失败x_x'
                console.log('error', error)
              })
          },
          sing() {
            let myHeaders = new Headers()
            myHeaders.append('Content-Type', 'application/json')
            let requestOptions = {
              method: 'POST',
              headers: myHeaders,
              body: JSON.stringify(this.reg),
              redirect: 'follow',
            }
            fetch('https://suancaixianyu.cn/xyscapi/reg', requestOptions)
              .then((response) => response.json())
              .then((body) => {
                if (body.code == 200) {
                  this.alerts.push({
                    msg: body.msg,
                    alerttype: 'alert-success',
                  })
                } else {
                  this.alerts.push({
                    msg: body.msg,
                    alerttype: 'alert-error',
                  })
                }
                this.alert()
              })
              .catch((error) => {
                this.alerts.push({
                  msg: error,
                  alerttype: 'alert-error',
                })
                this.alert()
                console.log('error', error)
              })
          },
          alert() {
            setTimeout(() => {
              this.alerts.shift()
            }, 3000)
          },
        },
        mounted() {
          window.addEventListener('resize', this.handleResize) // 监听窗口大小变化
          this.handleResize()
        },
        beforeDestroy() {
          window.removeEventListener('resize', this.handleResize) // 移除监听器
        },
      }).mount('#app')
    </script>

    <style>
      .alert {
        animation: fadeIn 3s;
      }
      @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        10% {
          opacity: 1;
        }
        90% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
    </style>
  </body>
</html>