mall-web-ssr/pages/mobile/user/bindEnterprise.vue

<template>
  <div class="mobile-fix-content mobile-center" v-if="!showInfo">
    <div class="block-wrap seek-operation">
      <div class="block-wrap_moreinfo">抱歉，您的账户未绑定企业，暂无卖家权限</div>
      <div class="block-wrap_morelist" @click="setShowApplyRecord(true)">查看申请记录</div>
    </div>
    <div class="block-wrap seek-operation">
      <p><i></i>所属企业已开店</p>
      <div class="search-wrap">
        <span>企业全称：</span>
        <input type="text" class="form-control" v-model="keyword" placeholder="请输入企业全称" @keyup.13="onSearchEnterprise">
        <i class="inline-block" @click="onSearchEnterprise">检测</i>
      </div>
      <div class="result">
        <template v-if="showSearchResultStatus === 1">
          <p><span class="title inline-block">管理员：</span><span class="content inline-block">{{enInfo.name}}</span></p>
          <p><span class="title inline-block">营业执照号：</span><span class="content inline-block">{{enInfo.businessCode}}</span></p>
        </template>
        <template v-if="showSearchResultStatus === 2">
          <p class="no-open">{{enName}}<span>(未开店)</span></p>
        </template>
      </div>
    </div>
    <div class="operation" v-show="showSearchResultStatus !== 0">
      <template v-if="showSearchResultStatus === 1">
        <a @click="bindEnterprise">提交申请</a>
        <p>管理员审核通过后成功绑定</p>
      </template>
      <template v-if="showSearchResultStatus === 2">
        <a>开设新店铺</a>
      </template>
    </div>
    <div class="block-wrap seek-operation" v-if="!showInfo">
      <p><i></i>所属企业未开店</p>
      <div class="clearfix block-storeinfo">
        <div class="pull-left">
          <img src="/images/material/house.png"/>
        </div>
        <div class="pull-right">
          <div class="pull-left-info">请点击下方按钮开设新的店铺</div>
          <nuxt-link class="pull-left-btn" tag="div" to="/mobile/store">开设新店铺</nuxt-link>
        </div>
      </div>
    </div>

    <remind-box :title="remindText" :timeoutCount="remindTimerCount"></remind-box>
    <div class="mobile-modal" v-show="showApplyRecord">
      <div class="mobile-modal-box">
        <div class="mobile-modal-header">申请记录<i class="icon-guanbi iconfont" @click="setShowApplyRecord(false)"></i></div>
        <div class="mobile-modal-headerjilu" ref="mobileModalBox">
          <div>
            <div class="record-wrap">
            <div class="record-title">
              <span>企业名称</span>
              <span>管理员</span>
              <span>申请时间</span>
              <span>状态</span>
            </div>
            <ul>
              <li v-for="item in applyList">
                <span>{{item.enName}}</span>
                <span>{{item.adminName}}</span>
                <span>{{item.date | date}}</span>
                <span :class="{'green-text': item.status === 311, 'red-text': item.status === 317}">{{item.status | status}}</span>
              </li>
            </ul>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { RemindBox } from '~components/mobile/common'
  export default {
    layout: 'mobile',
    props: {
      showInfo: {
        default: true
      }
    },
    middleware: 'authenticated',
    data () {
      return {
        applyList: [],
        showApplyRecord: false,
        keyword: '',
        enInfo: {},
        remindText: '',
        remindTimerCount: 0,
        enName: '',
        showSearchResultStatus: 0
      }
    },
    components: {
      RemindBox
    },
    mounted() {
      let keyword = this.$route.query.name || ''
      let businessCode = this.$route.query.businessCode || ''
      let showStatus = parseInt(this.$route.query.showStatus) || ''
      this.keyword = keyword
      this.enInfo.name = keyword
      this.enInfo.businessCode = businessCode
      this.showSearchResultStatus = showStatus
      this.$nextTick(() => {
        // document.addEventListener('click', this.checkCurrencySelect)
        this._initscroll()
      })
    },
    methods: {
      setShowApplyRecord: function (flag) {
        if (flag) {
          this.$http.get('/basic/enterprise/findApplyInfo', {params: {phone: this.user.data.userTel}})
            .then(responses => {
              this.applyList = responses.data
              this.showApplyRecord = flag
              this._initscroll()
            }, err => {
              console.log(err)
              this.$message.error('系统错误')
            })
        } else {
          this.showApplyRecord = flag
        }
      },
      onSearchEnterprise: function () {
        if (this.keyword) {
          this.$http.get('/basic/enterprise/findByName/' + encodeURIComponent(this.keyword)).then(response => {
            if (response.data) {
              this.enInfo = response.data
              this.showSearchResultStatus = 1
            } else {
              this.enName = this.keyword
              this.showSearchResultStatus = 2
            }
          })
        }
      },
      bindEnterprise: function () {
        this.$http.get('/basic/enterprise/applyUserSpace', {params: {phone: this.user.data.userTel, enName: this.enInfo.name, businessCode: this.enInfo.businessCode}})
          .then(response => {
            if (response.data.data === 'success') {
              this.keyword = ''
              this.showSearchResultStatus = 0
              this.setRemindText('绑定申请提交成功！审批结果将以短信通知，请保持手机通畅。')
              setTimeout(() => {
                this.$router.push('/mobile/user')
              }, 3000)
            } else {
              this.setRemindText(response.data.data)
            }
          }, err => {
            console.log(err)
            this.setRemindText('系统错误')
          })
      },
      setRemindText: function (str) {
        this.remindText = str
        this.remindTimerCount++
      }
    },
    filters: {
      status: function (status) {
        switch (status) {
          case 311:
            return '待审核'
          case 316:
            return '已通过'
          case 317:
            return '未通过'
          default:
            break
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '~assets/scss/mobileCenter';
  $input-height: .58rem;
  $base-color: #3f84f6;
  .mobile-center {
    .seek-operation {
      height: auto;
      padding-bottom: .59rem;
    }
    .search-wrap {
      padding-top: .48rem;
      padding-left: .12rem;
      span {
        font-size: .28rem;
        color: $base-color;
      }
      input {
        width: 4.2rem;
        height: $input-height;
        font-size: .23rem;
        border: 1px solid $base-color;
        border-radius: 0;
        border-bottom-left-radius: .14rem;
        border-top-left-radius: .14rem;
      }
      i {
        width: .85rem;
        height: $input-height;
        line-height: $input-height;
        text-align: center;
        color: #fff;
        font-size: .26rem;
        margin-left: -.01rem;
        background: $base-color;
        font-style: normal;
        vertical-align: baseline;
        margin-top: .01rem;
        border-bottom-right-radius: .14rem;
        border-top-right-radius: .14rem;
      }
    }
    .result {
      color: $base-color;
      font-size: .28rem;
      margin-top: .52rem;
      p {
        padding-left: 1rem;
        .title {
          width: 1.68rem;
          text-align: right;
          vertical-align: top;
        }
        .content {
          color: rgba(102, 102, 102, .89);
          margin-left: .4rem;
          width: 3.5rem;
          word-break: break-all;
        }
      }
      .no-open {
        text-align: center;
        color: rgba(102, 102, 102, .89);
        span {
          color: rgba(255, 0, 0, .89);
        }
      }
    }
    .operation {
      text-align: center;
      font-size: .32rem;
      a {
        display: block;
        width: 6.59rem;
        height: .77rem;
        line-height: .77rem;
        text-align: center;
        color: #fff;
        background: $base-color;
        margin: .58rem auto .27rem;
        border-radius: .08rem;
      }
      span {
        color: rgba(51, 51, 51, .89);
      }
    }
    .block-storeinfo {
      margin: 0.48rem 0.2rem 0;
      padding-bottom: 0.2rem;
      img {
        width: 2.18rem;
        height: 1.73rem;
      }
      .pull-left-info {
        font-size: 0.28rem;
        color: #3f84f6;
      }
      .pull-left-btn {
        color: #fff;
        font-size: 0.32rem;
        width: 3.1rem;
        height: 0.58rem;
        text-align: center;
        line-height: 0.58rem;
        border-radius: 5px;
        background: #3f84f6;
        margin-top: 0.3rem;
      }
    }
    .block-wrap_moreinfo {
      font-size: 0.34rem;
      color: #333;
      text-align: center;
      padding-top: 0.4rem;
      margin-bottom: 0.2rem;
    }
    .block-wrap_morelist {
      color: #3f84f6;
      font-size: 0.32rem;
      border: 0.01rem solid #3f84f6;
      text-align: center;
      width: 3.1rem;
      height: 0.58rem;
      line-height: 0.58rem;
      border-radius: 5px;
      margin: 0 auto;
    }
    .mobile-modal-box {
      top: 1.66rem;
      left: 3%;
      right: 3%;
      width: 7rem;
      bottom: 1.66rem;
      margin: 0 auto;
    }
    .mobile-modal-headerjilu {
      background: #f3f3f3;
      padding: .18rem 0;
      width: 100%;
      overflow: hidden;
      height: 90%;
      .record-wrap {
        padding: 0 .18rem;
        .record-title {
          height: 28px;
          line-height: 28px;
          background: #8eb0f5;
          border: 1px solid #e8e8e8;
          color: #fff;
        }
        ul {
          max-height: 150px;
          overflow-y: auto;
          overflow-x: hidden;
          li {
            border-bottom: 1px solid #e8e8e8;
            height: 30px;
            &:nth-child(even) {
              background: #edf2fd;
            }
            &:nth-child(odd) {
              background: #f7f9fe;
            }
            span {
              line-height: 26px;
              position: relative;
              top: 2px;
              &.green-text {
                color: #379b1d;
              }
              &.red-text {
                color: #f51c24;
              }
            }
          }
        }
        span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
          text-align: center;
          &:nth-child(1) {
            width: 2.6rem;
          }
          &:nth-child(2) {
            width: 1.1rem;
          }
          &:nth-child(3) {
            width: 1.84rem;
          }
          &:nth-child(4) {
            width: 1.04rem;
          }
        }
      }
    }
  }
</style>