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

<template>
  <div class="mobile-fix-content mobile-center">
    <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>
    <remind-box :title="remindText" :timeoutCount="remindTimerCount"></remind-box>
  </div>
</template>
<script>
  import { RemindBox } from '~components/mobile/common'
  export default {
    layout: 'mobile',
    middleware: 'authenticated',
    data () {
      return {
        keyword: '',
        enInfo: {},
        remindText: '',
        remindTimerCount: 0,
        enName: '',
        showSearchResultStatus: 0
      }
    },
    components: {
      RemindBox
    },
    methods: {
      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('绑定申请提交成功！审批结果将以短信通知，请保持手机通畅。')
            } else {
              this.setRemindText(response.data.data)
            }
          }, err => {
            console.log(err)
            this.setRemindText('系统错误')
          })
      },
      setRemindText: function (str) {
        this.remindText = str
        this.remindTimerCount++
      }
    }
  }
</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);
      }
    }
  }
</style>