cyywl_server/yudao-ui-app/pages/users/promoter/index.vue

<template>
  <div class="login-wrapper">
    <div class="logo-wrap">
      <img src="/static/images/mallLogo.png" style="width:105rpx;height:105rpx;"></image>
      <img src="/static/images/mall.png" style="width:233rpx;height:43rpx;"></image>
    </div>
    <view class="title">注册推广员</view>
    <div class="whiteBg">
      <div class="list">
        <form @submit.prevent="submit">
          <div class="item">
            <div class="acea-row row-middle">
              <text class="label">所属公司</text>
              <input type="text" disabled class="texts"  :value="tenantInfo.name || '--'"/>
            </div>
          </div>
          <div class="item">
            <div class="acea-row row-middle">
              <text class="label">手机号</text>
              <input type="text" class="texts" :value="userInfo.mobile || '--'" disabled />
            </div>
          </div>
          <div class="item">
            <div class="acea-row row-middle">
              <text class="label">姓名</text>
              <input type="text" v-model="nickname" maxlength="10" class="texts" placeholder="请输入" />
            </div>
          </div>
        </form>
      </div>
      <button class="logon" @click="onRegister" :disabled="loading" :loading="loading">注册推广员</button>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    registerPromoter
  } from "@/api/user"
  export default {
    name: 'Register',
    data() {
      return {
        loading: false,
        nickname: ''
      }
    },
    computed: {
      ...mapGetters(['tenantInfo', 'userInfo'])
    },
    methods: {
      async onRegister() {
        this.loading = true
        try {
          const res = await registerPromoter({
            nickname: this.nickname,
            mobile: this.userInfo.mobile,
            status: 1,
            sourceType: 2
          })
          this.$util.Tips({
            title: res.code === 0 ? '注册成功' : res.msg
          }, {
            tab: 1,
            url: '/pages/member_application/index'
          })
        } catch (err) {
          //TODO handle the exception
          this.$util.Tips({
            title: err
          })
        } finally {
          this.loading = false
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background: #fff;
  }

  .appLogin {
    margin-top: 60rpx;

    .hds {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: #B4B4B4;

      .line {
        width: 68rpx;
        height: 1rpx;
        background: #CCCCCC;
      }

      p {
        margin: 0 20rpx;
      }
    }

    .btn-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30rpx;

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 68rpx;
        height: 68rpx;
        border-radius: 50%;
      }

      .apple-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 30rpx;
        background: #000;
        border-radius: 34rpx;
        font-size: 40rpx;

        .icon-s-pingguo {
          color: #fff;
          font-size: 40rpx;
        }
      }

      .iconfont {
        font-size: 40rpx;
        color: #fff;
      }

      .wx {
        margin-right: 30rpx;
        background-color: #61C64F;
      }

      .mima {
        background-color: #28B3E9;
      }

      .yanzheng {
        background-color: #F89C23;
      }

    }
  }

  .code img {
    width: 100%;
    height: 100%;
  }

  .acea-row.row-middle {
    input {
      margin-left: 20rpx;
      display: block;
    }
  }

  .login-wrapper {
    padding: 30rpx 52rpx;
    background: url('@/static/images/bg-linear.png') center 0 no-repeat;
    background-size:100% 672rpx;

    .logo-wrap {
      margin: 185rpx 0 85rpx 0;
      display:flex;
      align-items:center;
      img{
       margin-right: 20rpx;
      }
    }

    .title {
      font-size: 40rpx;
      font-weight: 400;
      color: #000;
    }

    .shading {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;

      /* #ifdef APP-VUE */
      margin-top: 50rpx;
      /* #endif */
      /* #ifndef APP-VUE */

      margin-top: 200rpx;
      /* #endif */


      image {
        width: 180rpx;
        height: 180rpx;
      }
    }

    .whiteBg {
      margin-top: 46rpx;

      .list {
        overflow: hidden;

        .item {
          margin-bottom: 38rpx;
          height: 98rpx;
          display: flex;

          &:last-child {
            margin-bottom: 0;
          }

          .code {
            width: 197rpx;
            text-align: center;
            line-height: 96rpx;
            background: #FFF3F6;
            border: 1px solid #F54275;
            border-radius: 15rpx;
            font-size: 28rpx;
            color: #F03A76;
            margin-left: 19rpx;
          }

          .row-middle {
            position: relative;
            padding: 28rpx;
            background: #fff;
            border: 1px solid #BFBFBF;
            border-radius: 15rpx;
            flex: 1;
            &.clear{
              border: 0;
            }

            .label{
              width: 120rpx;
              margin-right: 20rpx;
            }

            .texts {
              flex: 1;
              font-size: 28rpx;
              height: 42rpx;
              line-height: 42rpx;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            input {
              flex: 1;
              font-size: 28rpx;
              height: 80rpx;
              line-height: 80rpx;
              display: flex;
              justify-content: center;
              align-items: center;
            }

          }
        }
      }

      .logon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 87rpx;
        margin-top: 99rpx;
        color: #FFFFFF;
        font-size: 32rpx;
        background: linear-gradient(0deg, #E63163 0%, #FF819F 100%);
        border-radius: 44rpx;
        font-size: 30rpx;
      }

      .tips {
        margin: 125rpx 20rpx 0 20rpx;
        font-size: 24rpx;
        color: #000;
        display: flex;
        justify-content: space-between;
      }

      .protocol-wrap {
        margin: 131rpx 0 80rpx 0;
        display: flex;
        justify-content: center;

        .text {
          font-size: 24rpx;
          color: #000;

          .link {
            color: #F35981;
          }
        }
      }
    }
  }
</style>