pifa/pages/dealer/apply.vue

<template>
  <view v-if="!isLoading" class="container b-f">

    <!-- 头部背景图 -->
    <view class="dealer-bg">
      <image class="image" mode="widthFix" :src="background"></image>
    </view>

    <!-- 等待审核 -->
    <view v-if="isApplying" class="dealer-boot dis-flex flex-dir-column flex-y-center">
      <view class="boot__msg f-30 dis-flex flex-dir-column flex-y-center">
        <text class="msg__icon iconfont icon-shenhezhong"></text>
        <text class="msg__content m-top20 f-29 col-80">{{ words.wait_audit.value }}</text>
      </view>
      <!-- 去商城逛逛 -->
      <view class="boot__submit form-submit dis-flex flex-x-center">
        <button class="button" @click="$navTo('pages/index/index')">{{ words.goto_mall.value }}</button>
      </view>
    </view>

    <!-- 填写申请信息 -->
    <view v-else class="dis-flex flex-dir-column flex-y-center">
      <view class="widget-form b-f m-top20 dis-flex flex-dir-column">
        <view class="form-title f-30">{{ words.title.value }}</view>
        <view class="form-box dis-flex flex-dir-column">
          <form @submit="handleSubmit">
            <view class="form-field dis-flex flex-y-center">
              <view class="field-label">邀请人</view>
              <view class="field-input">
                <text>{{ refereeName }}（请核对）</text>
              </view>
            </view>
            <view class="form-field dis-flex flex-y-center">
              <view class="field-label">姓名</view>
              <view class="field-input flex-box">
                <input class="input" name="name" placeholder="请输入真实姓名" />
              </view>
            </view>
            <view class="form-field dis-flex flex-y-center">
              <view class="field-label">手机号</view>
              <view class="field-input flex-box">
                <input class="input" name="mobile" placeholder="请输入手机号" />
              </view>
            </view>
            <!-- 申请协议 -->
            <view class="form-license dis-flex flex-x-center flex-y-center">
              <view class="license-radio dis-flex flex-y-center" @click="isRead = !isRead">
                <text class="license-icon f-38 iconfont icon-radio" :class="[isRead ? 'c-violet' : 'col-bb']"></text>
                <text class="f-28 col-80">我已阅读并了解</text>
              </view>
              <text @click="handleShowLicense()" class="f-28 c-violet">【{{ words.license.value }}】</text>
            </view>
            <!-- 立即申请 -->
            <view class="form-submit dis-flex flex-x-center">
              <button formType="submit" :disabled="disabled">{{ words.submit.value }}</button>
            </view>
          </form>
        </view>
      </view>
    </view>

    <!-- 入驻协议弹窗 -->
    <u-modal v-model="showLicense" title="申请协议">
      <scroll-view class="pops-content" :scroll-y="true">
        <text>{{ license }}</text>
      </scroll-view>
    </u-modal>
<addShuiyin />
  </view>
</template>

<script>
  import * as ApplyApi from '@/api/dealer/apply'
  import SettingModel from '@/common/model/dealer/Setting'

  export default {
    data() {
      return {
        // 正在加载
        isLoading: true,
        // 当前是否为分销商
        isDealer: undefined,
        // 当前是否在申请中
        isApplying: undefined,
        // 推荐人昵称
        refereeName: undefined,
        // 文字设置
        words: undefined,
        // 背景图
        background: undefined,
        // 入驻协议
        license: undefined,
        // 入驻协议阅读状态
        isRead: false,
        // 显示入驻协议弹窗
        showLicense: false,
        // 按钮禁用
        disabled: false
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.getSetting()
      this.getApplyStatus()
    },

    methods: {

      // 获取分销设置
      getSetting() {
        const app = this
        SettingModel.data()
          .then(setting => {
            // 赋值属性
            app.words = setting.words.apply.words
            app.background = setting.background.apply
            app.license = setting.license.license
            // 设置当前页面标题
            app.setPageTitle(setting.words.apply.title)
          })
      },

      // 分销商申请状态
      getApplyStatus() {
        const app = this
        app.isLoading = true
        ApplyApi.status()
          .then(result => {
            const data = result.data
            app.isDealer = data.isDealer
            app.isApplying = data.isApplying
            app.refereeName = data.refereeName
          })
          .finally(() => app.isLoading = false)
      },

      // 设置当前页面标题
      setPageTitle(title) {
        uni.setNavigationBarTitle({ title: title.value })
      },

      // 切换支付选项
      handleChecked(value) {
        this.payment = value
      },

      // 显示入驻协议弹窗
      handleShowLicense() {
        this.showLicense = true
      },

      // 表单提交
      handleSubmit({ detail }) {
        const app = this
        // 表单验证
        if (!app.onValidation(detail.value)) {
          return false
        }
        // 确认提交
        app.disabled = true
        ApplyApi.submit({ form: detail.value })
          .then(result => {
            app.$toast(result.message)
            setTimeout(() => uni.navigateBack(), 1200)
          })
          .finally(() => app.disabled = false)
      },

      // 表单验证
      onValidation(data) {
        const app = this
        // 验证可提现佣金
        if (!data.name) {
          app.$error('请填写姓名')
          return false
        }
        // 验证手机号
        if (!/^\+?\d[\d -]{8,12}\d/.test(data.mobile)) {
          app.$error('手机号格式不正确')
          return false
        }
        // 验证是否阅读协议
        if (!app.isRead) {
          app.$error('请先阅读分销商申请协议')
          return false
        }
        return true
      },

    }
  }
</script>

<style>
  page {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
  .input {
    display: block;
  }

  .c-violet {
    color: #786cff;
  }

  .col-80 {
    color: #808080;
  }

  .col-bb {
    color: #bbb;
  }

  .f-38 {
    font-size: 38rpx;
  }

  .dealer-bg {
    .image {
      width: 100%;
    }
  }

  .widget-form {
    position: relative;
    width: 700rpx;
    box-sizing: border-box;
    box-shadow: 0 1rpx 20rpx rgba(0, 0, 0, 0.21);
    border-radius: 12rpx;
    margin-top: -80rpx;

    .form-title {
      padding: 0 40rpx;
      height: 90rpx;
      border-bottom: 1rpx solid #e7e7e7;
      display: flex;
      align-items: center;
    }

    .form-box {
      padding: 40rpx 35rpx;

      .form-field {
        height: 80rpx;
        margin-bottom: 24rpx;
        padding: 10rpx 28rpx;
        background-color: #f9f9f9;
        box-sizing: border-box;
        font-size: 28rpx;

        .field-label {
          width: 130rpx;
          color: #808080;
        }

        .input {
          font-size: 28rpx;
        }
      }
    }
  }

  .form-license {
    .license-icon {
      margin-right: 12rpx;
    }
  }

  .form-submit {
    margin-top: 40rpx;

    button {
      font-size: 30rpx;
      background: #786cff;
      border: 1rpx solid #786cff;
      color: white;
      border-radius: 50rpx;
      padding: 0 120rpx;

      &[disabled] {
        background: #8e84fc;
        border-color: #8e84fc;
        color: white;
      }
    }

  }

  // 申请协议
  .pops-content {
    padding: 30rpx 48rpx;
    font-size: 28rpx;
    line-height: 50rpx;
    text-align: left;
    color: #606266;
    min-height: 320rpx;
    max-height: 640rpx;
    box-sizing: border-box;
  }

  // 等待审核
  .dealer-boot {
    padding: 10rpx 30rpx;
    margin-top: 80rpx;

    .msg__icon {
      font-size: 120rpx;
      color: #8e84fc;
    }

    .boot__submit {
      margin-top: 60rpx;
    }
  }
</style>