mall-web-ssr/components/mobile/register-saler/register/StepSecond.vue

<template>
  <!--阅读服务协议-->
  <div class="section">
    <div class="mobile-agreement">
      <div class="mobile-join_xieyi">
        <div class="article-flag">
          <span @click="chooseTag=1" :class="chooseTag==1?'active':''">优软商城服务条款</span>
          <span @click="chooseTag=2" :class="chooseTag==2?'active':''">优软商城买卖条例</span>
        </div>
        <!--<textarea readonly></textarea>-->
        <div class="text-area">
          <div class="ql-container ql-snow" v-html="article"></div>
        </div>
        <div class="row" style="margin:10px 0 10px 0;padding:0 0.2rem;">
          <div class="checkbox-inline">
            <input type="checkbox" id="agree" name="agree" value="1" :checked="checkData.checked" @click="onCheck()" style="-webkit-appearance:checkbox">
            我已阅读并同意<a href="http://www.usoftmall.com/help#/issue/50" target="_blank">
            《优软商城服务条款》</a>、<a href="http://www.usoftmall.com/help#/issue/16" target="_blank">
            《优软商城买卖条例》</a>
          </div>
        </div>
        <div class="row next-btn step-two-btn" style="padding-top: 0px;">
          <button @click="sectionChange(1)" class="btn">上一步</button>
          <button @click="sectionChange(3)" class="btn" :style="!checkData.checked ? 'opacity: 1;':''">同意</button>
        </div>
      </div>
    </div>
    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
  </div>
</template>
<script>
  import { RemindBox } from '~components/mobile/common'
  export default {
    props: ['checkData', 'loginData', 'cacheData'],
    data () {
      return {
        timeoutCount: 0,
        collectResult: '',
        chooseTag: 1,
        article: ''
      }
    },
    watch: {
      chooseTag: function (val) {
        this.getArticle(val === 1 ? 50 : 16)
      }
    },
    mounted () {
      this.getArticle(50)
    },
    methods: {
      sectionChange: function (type) {
        if (!this.checkData.checked && type === 3) {
          this.timeoutCount++
          this.collectResult = '请阅读相关条例'
          // this.$message.error('请阅读相关条例')
        } else {
          this.$emit('sectionEvent', type)
        }
      },
      getArticle: function (num) {
        this.$http.get('/api/help-service/issues/' + num).then(response => {
          this.article = response.data.article
        })
      },
      onCheck: function () {
        this.checkData.checked = !this.checkData.checked
        if (this.loginData.isSelf) {
          this.cacheData.enIsRead = this.checkData.checked
          this.$http.post('/basic/user/userCacheEnterprise', this.cacheData)
        } else {
          if (this.checkData.checked) {
            this.$http.post('/basic/enterprise/openVendorSetRead/' + this.loginData.enterprise.uu)
              .then(() => {
                this.$http.get('/user/authentication/reflash')
                  .then(() => {
                    this.$http.get(`/user/authentication/` + this.loginData.enterprise.uu).then(() => {
                      this.$store.dispatch('loadUserInfo')
                    })
                  })
              })
          } else {
            this.$http.post('/basic/enterprise/openVendorSetNotRead/' + this.loginData.enterprise.uu)
              .then(() => {
                this.$http.get('/user/authentication/reflash')
                  .then(() => {
                    this.$http.get(`/user/authentication/` + this.loginData.enterprise.uu).then(() => {
                      this.$store.dispatch('loadUserInfo')
                    })
                  })
              })
          }
        }
      }
    },
    components: {
      RemindBox
    }
  }
</script>

<style>
  @import '~assets/scss/help.css';
  .step-two-btn button:first-child{
    background: #fff;
    color: #999;
    border-right: 1px solid #d3d3d3;
  }
  .mobile-join_xieyi .ql-editor span,.mobile-join_xieyi .ql-editor a {
    font-size: 12px;
    line-height: 25px;
  }
  .mobile-join_xieyi .ql-editor br {
    display: none;
  }
  .mobile-join_xieyi .ql-container.ql-snow .ql-editor {
    padding: 0 5px !important;
  }
 /* .join_xieyi .ql-editor p {
    width: 494px;
    margin: 0 auto;
  }*/
  .ql-container.ql-snow {
    border: none;
  }
</style>