机构复制链接页面新增

layouts/app-ross.vue

@@ -1,7 +1,11 @@
 <template>
   <div :class="themeClass">
-    <div class="layout" v-if="isMounted">
-      <div class="header">
+    <div
+      class="layout"
+      v-if="isMounted"
+      :style="{ paddingTop: showHeader ? '' : 0 }"
+    >
+      <div class="header" v-show="showHeader">
         <div class="navbar flex justify-between items-center">
           <div class="logo flex items-center" @click="backHome">
             <img
@@ -51,7 +55,7 @@
       <div class="content">
         <nuxt />
       </div>
-      <div class="footer flex justify-center items-center">
+      <div class="footer flex justify-center items-center" v-show="showFooter">
         - 由采美网提供技术支持 -
       </div>
       <SimpleLogin :type="formType" @click="onLoginClick"></SimpleLogin>
@@ -86,8 +90,9 @@ export default {
       'accountType',
       'routePrefix',
       'themeName',
-      'routePrefix',
       'isPc',
+      'showHeader',
+      'showFooter',
     ]),
     themeClass() {
       return `theme-${this.themeName}`

layouts/app.vue

@@ -1,7 +1,11 @@
 <template>
   <div :class="themeClass">
-    <div class="layout" v-if="isMounted">
-      <div class="header">
+    <div
+      class="layout"
+      v-if="isMounted"
+      :style="{ paddingTop: showHeader ? '' : 0 }"
+    >
+      <div class="header" v-show="showHeader">
         <div class="navbar flex justify-between items-center">
           <div class="logo flex items-center" @click="backHome">
             <img
@@ -40,7 +44,7 @@
       <div class="content">
         <nuxt />
       </div>
-      <div class="footer flex justify-center items-center">
+      <div class="footer flex justify-center items-center" v-show="showFooter">
         - 由采美网提供技术支持 -
       </div>
       <SimpleLogin :type="formType" @click="onLoginClick"></SimpleLogin>
@@ -62,6 +66,8 @@ export default {
       'accountType',
       'routePrefix',
       'themeName',
+      'showHeader',
+      'showFooter',
     ]),
     themeClass() {
       return `theme-${this.themeName}`

pages/_template/app/form/club-bind.vue

@@ -0,0 +1,493 @@
+<template>
+  <div class="club-bind">
+    <div class="form-container">
+      <div class="logo">
+        <img :src="supplierInfo.logo" :alt="supplierInfo.shopName" />
+      </div>
+      <div class="tip">输入验证码即可完成账号注册及ROSS授权牌匾制作与寄送</div>
+      <div class="form">
+        <el-form
+          :model="formData"
+          :rules="rules"
+          label-position="top"
+          ref="formRef"
+        >
+          <el-form-item label="手机号:" prop="mobile">
+            <el-input
+              v-model="formData.mobile"
+              maxlength="11"
+              @input="handleMobileInput"
+            />
+          </el-form-item>
+          <el-form-item label="验证码:" prop="verifyCode">
+            <el-input v-model="formData.verifyCode" maxlength="6">
+              <template #suffix>
+                <i class="line"></i>
+                <el-button
+                  type="text"
+                  size="mini"
+                  class="code"
+                  v-text="sendCodeBtnText"
+                  @click="onSend"
+                ></el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" class="confirm" @click="onSubmit"
+          >确定</el-button
+        >
+      </div>
+    </div>
+
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      center
+      @closed="onDialogClosed"
+    >
+      <div class="dialog-text text-center" v-text="dialogText"></div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="onCancel" v-if="resultStatus === -2">取消</el-button>
+        <el-button type="primary" @click="onConfirm">{{
+          resultStatus === 0 ? '确定' : '去登录'
+        }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { isMobile } from '~/utils/validator'
+export default {
+  layout: 'app',
+  data() {
+    return {
+      resultStatus: 0,
+      dialogVisible: false,
+      formData: {
+        mobile: '',
+        verifyCode: '',
+        authId: '',
+        authUserId: '',
+      },
+      rules: {
+        mobile: [
+          { required: true, message: '手机号不能为空', trigger: ['blur'] },
+        ],
+        verifyCode: [
+          { required: true, message: '验证码不能为空', trigger: ['blur'] },
+        ],
+      },
+      sendStatus: 0,
+      timer: null,
+      dialogTextMap: {
+        0: '账号注册成功，您可通过该手机号与短信发送的密码登录认证通！',
+        '-2': '抱歉，该手机号已注册，您可以登录后再来进行正品授权申请！',
+      },
+    }
+  },
+  computed: {
+    ...mapGetters(['authUserId', 'routePrefix','supplierInfo']),
+    sendCodeBtnText() {
+      return this.sendStatus === 0
+        ? '发送验证码'
+        : `再次发送${this.sendStatus}s`
+    },
+    dialogText() {
+      return this.dialogTextMap[this.resultStatus]
+    },
+  },
+  created() {
+    this.$store.commit('app/HIDE_LAYOUT')
+    this.initLinkInfo()
+  },
+  beforeDestroy() {
+    this.$store.commit('app/SHOW_LAYOUT')
+  },
+  methods: {
+    // 判断机构是否已经被绑定
+    async checkoutClubIsBind() {
+      this.isRequest = true
+      try {
+        const res = await this.$http.api.fetchClubAuthInfo({
+          authUserId: this.authUserId,
+          authId: this.authId,
+        })
+        const auth = res.data.auth
+        if (auth) {
+          this.bindStatus = auth.bindStatus
+          this.dialogActive = auth.bindStatus === 1
+        }
+        this.isRequest = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 取消操作
+    onCancel() {
+      this.dialogVisible = false
+    },
+
+    // 确认
+    onConfirm() {
+      this.$router.replace(this.routePrefix)
+    },
+
+    onDialogClosed() {
+      if (this.resultStatus === 0) {
+        this.$router.replace(this.routePrefix)
+      }
+    },
+
+    // 初始化链接信息
+    async initLinkInfo() {
+      this.formData.authUserId = this.authUserId
+      const authId = this.$route.query.authId
+      if (authId) {
+        this.formData.authId = parseInt(authId)
+        return
+      }
+      try {
+        await this.$alert('链接已失效！请更换新链接', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+      } finally {
+        this.$router.replace(this.routePrefix)
+      }
+    },
+    // 提交
+    async onSubmit() {
+      try {
+        await this.$refs.formRef.validate()
+        this.onRegisterSubmit()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 用户注册
+    async onRegisterSubmit() {
+      try {
+        await this.$http.api.clubUserRegister(this.formData)
+        this.resultStatus = 0
+        this.dialogVisible = true
+      } catch (error) {
+        if (error.code === -2) {
+          this.resultStatus = -2
+          this.dialogVisible = true
+        } else {
+          this.$toast(error.msg)
+        }
+      }
+    },
+
+    // 发送验证码
+    async onSend() {
+      if (this.sendStatus > 0) return
+      // 验证手机号是否合法
+      if (!isMobile(this.formData.mobile)) {
+        this.$toast('请输入正确的手机号')
+        return
+      }
+      try {
+        // 发送验证码
+        await this.$http.api.clubUserCodeSend({
+          mobile: this.formData.mobile,
+          authUserId: this.authUserId,
+          type: 1,
+        })
+        this.$toast('验证码已发送')
+        // 开启倒计时
+        this.countdown()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 倒计时
+    countdown() {
+      this.sendStatus = 30
+      this.timer = setInterval(() => {
+        if (this.sendStatus === 0) {
+          clearInterval(this.timer)
+          return
+        }
+        this.sendStatus--
+      }, 1000)
+    },
+    // 输入框输入时
+    handleMobileInput() {
+      this.formData.mobile = this.formData.mobile.replace(/[^\w\.\/]/gi, '')
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.el-button {
+  border-radius: 0;
+}
+
+@media screen and (min-width: 768px) {
+  ::v-deep {
+    .el-dialog {
+      width: 400px;
+      padding: 40px 36px 32px;
+
+      .dialog-text {
+        font-size: 16px;
+        color: #282828;
+        line-height: 32px;
+      }
+
+      .el-dialog__header {
+        padding: 0;
+        .el-dialog__title {
+          font-size: 24px;
+          color: #282828;
+        }
+      }
+
+      .el-dialog__body {
+        padding: 64px 0 48px;
+      }
+
+      .el-dialog__footer {
+        padding: 0;
+      }
+
+      .el-dialog__close {
+        font-size: 24px;
+      }
+
+      .el-button {
+        width: 100%;
+        display: block;
+
+        &:first-child {
+          margin-bottom: 10px;
+        }
+
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .club-bind {
+    width: 100vw;
+    height: 100vh;
+    background: url(~assets/theme-images/common/pc-link-register-bg.png)
+      no-repeat center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .form-container {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      box-sizing: border-box;
+      width: 528px;
+      padding: 32px 0 60px;
+      background: #fff;
+      box-shadow: 0px 6px 30px rgba(64, 158, 255, 0.1);
+      border-radius: 4px;
+
+      .logo {
+        width: 248px;
+        height: 100px;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+          display: block;
+          max-height: 100%;
+          flex-shrink: 0;
+        }
+      }
+
+      .tip {
+        width: 412px;
+        font-size: 20px;
+        color: #282828;
+        line-height: 32px;
+        text-align: center;
+        margin-bottom: 36px;
+      }
+
+      .form {
+        width: 320px;
+
+        .confirm {
+          width: 100%;
+          margin-top: 24px;
+          border-radius: 0;
+        }
+
+        .line {
+          width: 1px;
+          height: 20px;
+          background: #d8d8d8;
+          display: inline-block;
+          vertical-align: middle;
+        }
+
+        .code {
+          margin: 0 10px;
+        }
+
+        .el-form-item {
+          margin-bottom: 24px;
+
+          ::v-deep {
+            .el-form-item__label {
+              line-height: initial;
+              padding: 0 0 6px;
+            }
+
+            .el-input__inner {
+              border-radius: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  ::v-deep {
+    .el-dialog {
+      width: 76vw;
+      padding: 7vw 7vw 5.2vw;
+
+      .dialog-text {
+        font-size: 3.2vw;
+        color: #282828;
+        line-height: 5.6vw;
+      }
+
+      .el-dialog__header {
+        padding: 0;
+        .el-dialog__title {
+          font-size: 4.8vw;
+          color: #282828;
+        }
+      }
+
+      .el-dialog__body {
+        padding: 8vw 0 11.6vw;
+      }
+
+      .el-dialog__footer {
+        padding: 0;
+      }
+
+      .el-dialog__close {
+        font-size: 5.6vw;
+      }
+
+      .el-button {
+        width: 100%;
+        display: block;
+
+        &:first-child {
+          margin-bottom: 4vw;
+        }
+
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .club-bind {
+    width: 100vw;
+    height: 100vh;
+    background: url(~assets/theme-images/common/h5-link-register-bg.png)
+      no-repeat center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .form-container {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      box-sizing: border-box;
+      width: 76vw;
+      padding: 4vw 0 4.7vw;
+      background: #fff;
+      box-shadow: 0px 0.6vw 3vw rgba(64, 158, 255, 0.1);
+      border-radius: 4px;
+
+      .logo {
+        width: 34vw;
+        height: 13.8vw;
+        margin-bottom: 4vw;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+          display: block;
+          height: 5.6vw;
+          flex-shrink: 0;
+        }
+      }
+
+      .tip {
+        width: 59.8vw;
+        font-size: 3.6vw;
+        color: #282828;
+        line-height: 5.6vw;
+        text-align: center;
+        margin-bottom: 8vw;
+      }
+
+      .form {
+        width: 62vw;
+
+        .confirm {
+          width: 100%;
+          margin-top: 3.2vw;
+          border-radius: 0;
+        }
+
+        .line {
+          width: 1px;
+          height: 4vw;
+          background: #d8d8d8;
+          display: inline-block;
+          vertical-align: middle;
+        }
+
+        .code {
+          margin: 0 2.8vw;
+        }
+
+        .el-form-item {
+          margin-bottom: 4vw;
+
+          ::v-deep {
+            .el-form-item__label {
+              line-height: initial;
+              padding: 0 0 1.2vw;
+            }
+
+            .el-input__inner {
+              border-radius: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

pages/_template/ross/form/club-bind.vue

@@ -0,0 +1,475 @@
+<template>
+  <div class="club-bind">
+    <div class="form-container">
+      <div class="logo">
+        <img src="~/assets/theme-images/ross/ross-logo.png" alt="" />
+        <!-- <img :src="supplierInfo.logo" :alt="supplierInfo.shopName" /> -->
+      </div>
+      <div class="tip">输入验证码即可完成账号注册及ROSS授权牌匾制作与寄送</div>
+      <div class="form">
+        <el-form
+          :model="formData"
+          :rules="rules"
+          label-position="top"
+          ref="formRef"
+        >
+          <el-form-item label="手机号:" prop="mobile">
+            <el-input
+              v-model="formData.mobile"
+              maxlength="11"
+              @input="handleMobileInput"
+            />
+          </el-form-item>
+          <el-form-item label="验证码:" prop="verifyCode">
+            <el-input v-model="formData.verifyCode" maxlength="6">
+              <template #suffix>
+                <i class="line"></i>
+                <el-button
+                  type="text"
+                  size="mini"
+                  class="code"
+                  v-text="sendCodeBtnText"
+                  @click="onSend"
+                ></el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" class="confirm" @click="onSubmit"
+          >确定</el-button
+        >
+      </div>
+    </div>
+
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      center
+      @closed="onDialogClosed"
+    >
+      <div class="dialog-text text-center" v-text="dialogText"></div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="onCancel" v-if="resultStatus === -2">取消</el-button>
+        <el-button type="primary" @click="onConfirm">{{
+          resultStatus === -2 ? '去登录' : '确定'
+        }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { isMobile } from '~/utils/validator'
+export default {
+  layout: 'app-ross',
+  data() {
+    return {
+      resultStatus: 0,
+      dialogVisible: false,
+      formData: {
+        mobile: '',
+        verifyCode: '',
+        authId: '',
+        authUserId: '',
+      },
+      rules: {
+        mobile: [
+          { required: true, message: '手机号不能为空', trigger: ['blur'] },
+        ],
+        verifyCode: [
+          { required: true, message: '验证码不能为空', trigger: ['blur'] },
+        ],
+      },
+      sendStatus: 0,
+      timer: null,
+      dialogTextMap: {
+        0: '账号注册成功，您可通过该手机号与短信发送的密码登录认证通！',
+        '-2': '抱歉，该手机号已注册，您可以登录后再来进行正品授权申请！',
+      },
+    }
+  },
+  computed: {
+    ...mapGetters(['authUserId', 'routePrefix', 'supplierInfo']),
+    sendCodeBtnText() {
+      return this.sendStatus === 0
+        ? '发送验证码'
+        : `再次发送${this.sendStatus}s`
+    },
+    dialogText() {
+      return this.dialogTextMap[this.resultStatus]
+    },
+  },
+  created() {
+    this.$store.commit('app/HIDE_LAYOUT')
+    this.initLinkInfo()
+  },
+  beforeDestroy() {
+    this.$store.commit('app/SHOW_LAYOUT')
+  },
+  methods: {
+    // 取消操作
+    onCancel() {
+      this.dialogVisible = false
+    },
+
+    // 确认
+    onConfirm() {
+      this.$router.replace(this.routePrefix)
+    },
+
+    onDialogClosed() {
+      if (this.resultStatus === 0) {
+        this.$router.replace(this.routePrefix)
+      }
+    },
+
+    // 初始化链接信息
+    async initLinkInfo() {
+      this.formData.authUserId = this.authUserId
+      const authId = this.$route.query.authId
+      if (authId) {
+        this.formData.authId = parseInt(authId)
+        return
+      }
+      try {
+        await this.$alert('链接已失效！请更换新链接', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+      } finally {
+        this.$router.replace(this.routePrefix)
+      }
+    },
+    // 提交
+    async onSubmit() {
+      try {
+        await this.$refs.formRef.validate()
+        this.onRegisterSubmit()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 用户注册
+    async onRegisterSubmit() {
+      try {
+        await this.$http.api.clubUserRegister(this.formData)
+        this.resultStatus = 0
+        this.dialogVisible = true
+      } catch (error) {
+        if (error.code === -2) {
+          this.resultStatus = -2
+          this.dialogVisible = true
+        } else {
+          this.$toast(error.msg)
+        }
+      }
+    },
+
+    // 发送验证码
+    async onSend() {
+      if (this.sendStatus > 0) return
+      // 验证手机号是否合法
+      if (!isMobile(this.formData.mobile)) {
+        this.$toast('请输入正确的手机号')
+        return
+      }
+      try {
+        // 发送验证码
+        await this.$http.api.clubUserCodeSend({
+          mobile: this.formData.mobile,
+          authUserId: this.authUserId,
+          type: 1,
+        })
+        this.$toast('验证码已发送')
+        // 开启倒计时
+        this.countdown()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 倒计时
+    countdown() {
+      this.sendStatus = 30
+      this.timer = setInterval(() => {
+        if (this.sendStatus === 0) {
+          clearInterval(this.timer)
+          return
+        }
+        this.sendStatus--
+      }, 1000)
+    },
+    // 输入框输入时
+    handleMobileInput() {
+      this.formData.mobile = this.formData.mobile.replace(/[^\w\.\/]/gi, '')
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.el-button {
+  border-radius: 0;
+}
+
+@media screen and (min-width: 768px) {
+  ::v-deep {
+    .el-dialog {
+      width: 400px;
+      padding: 40px 36px 32px;
+
+      .dialog-text {
+        font-size: 16px;
+        color: #282828;
+        line-height: 32px;
+      }
+
+      .el-dialog__header {
+        padding: 0;
+        .el-dialog__title {
+          font-size: 24px;
+          color: #282828;
+        }
+      }
+
+      .el-dialog__body {
+        padding: 64px 0 48px;
+      }
+
+      .el-dialog__footer {
+        padding: 0;
+      }
+
+      .el-dialog__close {
+        font-size: 24px;
+      }
+
+      .el-button {
+        width: 100%;
+        display: block;
+
+        &:first-child {
+          margin-bottom: 10px;
+        }
+
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .club-bind {
+    width: 100vw;
+    height: 100vh;
+    background: url(~assets/theme-images/common/pc-link-register-bg.png)
+      no-repeat center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .form-container {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      box-sizing: border-box;
+      width: 528px;
+      padding: 32px 0 60px;
+      background: #fff;
+      box-shadow: 0px 6px 30px rgba(64, 158, 255, 0.1);
+      border-radius: 4px;
+
+      .logo {
+        width: 248px;
+        height: 100px;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+          display: block;
+          max-height: 100%;
+          flex-shrink: 0;
+        }
+      }
+
+      .tip {
+        width: 412px;
+        font-size: 20px;
+        color: #282828;
+        line-height: 32px;
+        text-align: center;
+        margin-bottom: 36px;
+      }
+
+      .form {
+        width: 320px;
+
+        .confirm {
+          width: 100%;
+          margin-top: 24px;
+          border-radius: 0;
+        }
+
+        .line {
+          width: 1px;
+          height: 20px;
+          background: #d8d8d8;
+          display: inline-block;
+          vertical-align: middle;
+        }
+
+        .code {
+          margin: 0 10px;
+        }
+
+        .el-form-item {
+          margin-bottom: 24px;
+
+          ::v-deep {
+            .el-form-item__label {
+              line-height: initial;
+              padding: 0 0 6px;
+            }
+
+            .el-input__inner {
+              border-radius: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  ::v-deep {
+    .el-dialog {
+      width: 76vw;
+      padding: 7vw 7vw 5.2vw;
+
+      .dialog-text {
+        font-size: 3.2vw;
+        color: #282828;
+        line-height: 5.6vw;
+      }
+
+      .el-dialog__header {
+        padding: 0;
+        .el-dialog__title {
+          font-size: 4.8vw;
+          color: #282828;
+        }
+      }
+
+      .el-dialog__body {
+        padding: 8vw 0 11.6vw;
+      }
+
+      .el-dialog__footer {
+        padding: 0;
+      }
+
+      .el-dialog__close {
+        font-size: 5.6vw;
+      }
+
+      .el-button {
+        width: 100%;
+        display: block;
+
+        &:first-child {
+          margin-bottom: 4vw;
+        }
+
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .club-bind {
+    width: 100vw;
+    height: 100vh;
+    background: url(~assets/theme-images/common/h5-link-register-bg.png)
+      no-repeat center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .form-container {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      box-sizing: border-box;
+      width: 76vw;
+      padding: 4vw 0 4.7vw;
+      background: #fff;
+      box-shadow: 0px 0.6vw 3vw rgba(64, 158, 255, 0.1);
+      border-radius: 4px;
+
+      .logo {
+        width: 34vw;
+        height: 13.8vw;
+        margin-bottom: 4vw;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+          display: block;
+          height: 5.6vw;
+          flex-shrink: 0;
+        }
+      }
+
+      .tip {
+        width: 59.8vw;
+        font-size: 3.6vw;
+        color: #282828;
+        line-height: 5.6vw;
+        text-align: center;
+        margin-bottom: 8vw;
+      }
+
+      .form {
+        width: 62vw;
+
+        .confirm {
+          width: 100%;
+          margin-top: 3.2vw;
+          border-radius: 0;
+        }
+
+        .line {
+          width: 1px;
+          height: 4vw;
+          background: #d8d8d8;
+          display: inline-block;
+          vertical-align: middle;
+        }
+
+        .code {
+          margin: 0 2.8vw;
+        }
+
+        .el-form-item {
+          margin-bottom: 4vw;
+
+          ::v-deep {
+            .el-form-item__label {
+              line-height: initial;
+              padding: 0 0 1.2vw;
+            }
+
+            .el-input__inner {
+              border-radius: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

store/app.js

@@ -6,6 +6,8 @@ const state = () => ({
   routePrefix: '', // 路由前缀
   themeName: 'normal',
   screenWidth: 0,
+  showHeader: true,
+  showFooter: true,
 })
 
 const mutations = {
@@ -34,6 +36,15 @@ const mutations = {
   SET_PAGE_THEME(state, name) {
     state.themeName = name
   },
+  // hide layout
+  HIDE_LAYOUT(state) {
+    state.showHeader = false
+    state.showFooter = false
+  },
+  SHOW_LAYOUT(state) {
+    state.showHeader = true
+    state.showFooter = true
+  },
 }
 
 const actions = {}

store/getters.js

@@ -7,6 +7,8 @@ export default {
   loginVisiable: (state) => state.app.loginVisiable,
   themeName: (state) => state.app.themeName,
   screenWidth: (state) => state.app.screenWidth,
+  showHeader: (state) => state.app.showHeader,
+  showFooter: (state) => state.app.showFooter,
   // 用户相关
   userInfo: (state) => state.user.userInfo,
   authUserId: (state) => state.user.authUserId,