web-store-retail-h5/pages/shareRegist/index.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view>
    <view v-if="!pkCountry" class="content1">
      <!-- <view class="index_header">
      <view>注册</view>
    </view> -->
      <!-- <view class="tit" v-if="!pkCountry">{{ '嗨粉扫天下' }}</view> -->
      <!-- 海粉 -->
      <view class="formed1">
        <u-form :model="form" labelWidth="80px" ref="uForm" :rules="rules">
          <u-form-item label="" prop="memberCode">
            <u-input v-model="form.memberCode" type="number" disabled>
              <u--text
                :text="howHeader"
                slot="prefix"
                margin="0 3px 0 0"
                type="tips"
              ></u--text>
            </u-input>
          </u-form-item>
          <u-form-item label="" prop="memberName">
            <u-input
              v-model="form.memberName"
              :placeholder="'请输入会员姓名'"
            />
          </u-form-item>
          <u-form-item label="" prop="phone">
            <u-input
              v-model="form.phone"
              @blur="setMemberCode"
              :placeholder="'请输入联系方式'"
              type="number"
              maxlength="20"
            />
          </u-form-item>

          <u-form-item label="" prop="loginPassword">
            <u-input
              :password="isPwd"
              :placeholder="'请输入登录密码'"
              v-model="form.loginPassword"
            >
              <template slot="suffix">
                <u-icon name="eye" @tap="isPwd = !isPwd" v-if="!isPwd"></u-icon>
                <u-icon name="eye-off" @tap="isPwd = !isPwd" v-else></u-icon>
              </template>
            </u-input>
          </u-form-item>
          <u-form-item label="" prop="payPassword">
            <u-input
              :password="isPwd2"
              :placeholder="'请输入支付密码'"
              v-model="form.payPassword"
            >
              <template slot="suffix">
                <u-icon
                  name="eye"
                  @tap="isPwd2 = !isPwd2"
                  v-if="!isPwd2"
                ></u-icon>
                <u-icon name="eye-off" @tap="isPwd2 = !isPwd2" v-else></u-icon>
              </template>
            </u-input>
          </u-form-item>
          <u-form-item label="" prop="code">
            <u-input v-model="form.code" :placeholder="'请输入验证码'">
              <template slot="suffix">
                <view class="getCode" @tap="getVilCode">{{ getCode }}</view>
              </template>
            </u-input>
          </u-form-item>
        </u-form>
        <u-button
          type="success"
          class="uBtn"
          shape="circle"
          color="linear-gradient(to right, #005BAC, #005BAC )"
          :loading="isLoading"
          :loadingText="'注册中'"
          @click="toLogin"
          >{{ '立即注册' }}</u-button
        >
      </view>
    </view>
    <view v-else class="content">
      <!-- <view class="tit" >{{ '海粉扫天下' }}</view>
    <view class="formed"
         >
      <u-form :model="form"
              ref="uForm1"
              :rules="rules1"
              labelWidth="80px">
        <u-form-item label=""
                     prop="memberName">
          <u-input v-model="form.memberName"
                   :placeholder="'请输入真实姓名'" />
        </u-form-item>
        <u-form-item label=""
                     prop="phone">
          <u-input v-model="form.phone"
          :placeholder="'请输入联系方式'" />
        </u-form-item>
        <u-form-item label=""
                     prop="code">
          <u-input v-model="form.code"
                   :placeholder="'请输入验证码'">
            <template slot="suffix">
              <view class="getCode"
                    @tap="getVilCode">{{ getCode }}</view>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item label=""
                     @click="selCountry">
          <view class="picker">
            <u-input v-model="form.pkCountryName"
                     disabled
                     disabledColor="#ffffff"
                     :placeholder="'请选择自然国'"
                     border="none"></u-input>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </u-form-item>
        <u-form-item label="">
          <view class="picker">
            <u-input v-model="form.jsName"
                     disabled
                     disabledColor="#ffffff"
                     :placeholder="'请选择结算国'"
                     border="none"></u-input>
          </view>
        </u-form-item>
        <u-form-item label=""
                     prop="loginPassword">
          <u-input :password="isPwd1"
                   :placeholder="'请输入登录密码'"
                   v-model="form.loginPassword">
            <template slot="suffix">
              <u-icon name="eye"
                      @tap="isPwd1=!isPwd1"
                      v-if="!isPwd1"></u-icon>
              <u-icon name="eye-off"
                      @tap="isPwd1=!isPwd1"
                      v-else></u-icon>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item label=""
                     prop="payPassword">
          <u-input :password="isPwd2"
          :placeholder="'请输入支付密码'"
                   v-model="form.payPassword">
            <template slot="suffix">
              <u-icon name="eye"
                      @tap="isPwd2=!isPwd2"
                      v-if="!isPwd2"></u-icon>
              <u-icon name="eye-off"
                      @tap="isPwd2=!isPwd2"
                      v-else></u-icon>
            </template>
          </u-input>
        </u-form-item>
      </u-form>
      <u-button type="success"
                class="uBtn"
                shape="circle"
                color="linear-gradient(to right, #005BAC, #005BAC )"
                :loading="isLoading"
                :loadingText="'注册中'"
                @click="hiLogin">{{ '立即注册' }}</u-button>
      <u-picker :show="isCountry"
                keyName="label"
                immediateChange
                @confirm="confirmPopup"
                @cancel="isCountry = false"
                :columns="countryList"></u-picker>

    </view> -->
    </view>
    <view class="mask" v-if="isTrue"> </view>
  </view>
</template>

<script>
import * as api from '@/config/goods'
export default {
  components: {},
  data() {
    return {
      isTrue: false,
      howHeader: 'HF',
      pkParent: '',
      form: {
        memberName: '',
      },
      isLoading: false,
      getCode: '获取验证码',
      isSend: false,
      beginTime: 60,
      timer: '',
      pkCountry: '',
      isCountry: false,
      countryList: [],
      isPwd: true,
      isPwd1: true,
      isPwd2: true,
      rules: {
        memberCode: [
          {
            required: true,
            asyncValidator: this.memberCodeRule,
            trigger: ['blur'],
          },
        ],
        memberName: [
          {
            required: true,
            message: '请输入会员姓名',
            trigger: ['blur'],
          },
        ],
        phone: [
          {
            required: true,
            message: '请输入联系方式',
            trigger: ['blur'],
          },
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['blur'],
          },
        ],
        loginPassword: [
          {
            required: true,
            message: '请输入登录密码',
            trigger: ['blur'],
          },
        ],
        payPassword: [
          {
            required: true,
            message: '请输入支付密码',
            trigger: ['blur'],
          },
        ],
      },
      rules1: {
        memberName: [
          {
            required: true,
            message: '请输入真实姓名',
            trigger: ['change', 'blur'],
          },
        ],
        phone: [
          {
            required: true,
            message: '请输入联系方式',
            trigger: ['change', 'blur'],
          },
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['change', 'blur'],
          },
        ],
        loginPassword: [
          {
            required: true,
            message: '请输入登录密码',
            trigger: ['change', 'blur'],
          },
        ],
        payPassword: [
          {
            required: true,
            message: '请输入支付密码',
            trigger: ['change', 'blur'],
          },
        ],
      },
    }
  },
  onReady() {},
  onLoad(options) {
    this.pkParent = options.code
    this.pkCountry = options.country || ''
    this.getGenerate()
    if (this.pkCountry) {
      this.getCountry()
      this.form.pkCountry = this.pkCountry
      uni.setStorageSync('pkCountry', this.pkCountry)
      uni.redirectTo({
        url: '/pages/shareArea/hiList?pkParent=' + this.pkParent,
      })
      // this.$refs.uForm1.setRules(this.rules1)
    } else {
      // 获取前缀
      // 校验0元购
      this.getHeader()
      // this.$refs.uForm.setRules(this.rules)
    }
  },
  onShow() {},
  methods: {
    setMemberCode() {
      // this.form.memberCode = this.form.phone
      this.$set(this.form, 'memberCode', this.form.phone)
    },
    selCountry() {
      uni.showModal({
        title: '提示',
        content: '确认更换自然国',
        success: res => {
          if (res.confirm) {
            this.isCountry = true
          }
        },
      })
    },
    memberCodeRule(rule, value, callback) {
      if (!value) {
        callback(new Error('请输入会员编号'))
      } else {
        if (value.length < 10 || value.length > 20) {
          callback(new Error('请输入10-20位数字'))
        } else {
          api.validateMember(value).then(res => {
            if (res.code == 200) {
              callback()
            } else {
              callback(new Error(res.msg))
            }
          })
        }
      }
    },
    getHeader() {
      api.checkShare().then(res => {
        if (res.code != 200) {
          this.isTrue = true
        } else {
          this.isTrue = false
        }
      })
      // api.prefix(this.pkParent).then((res) => {
      //   this.howHeader = res.msg
      // })
    },
    getGenerate() {
      api.generate().then(res => {
        uni.setStorageSync('mToken', res.msg)
      })
    },
    toLogin() {
      this.$refs.uForm.validate().then(res => {
        this.isLoading = true
        api
          .regShareMember(
            Object.assign({}, this.form, { parent: this.pkParent })
          )
          .then(res => {
            this.isLoading = false
            if (res.code == 200) {
              uni.redirectTo({
                url:
                  '/pages/shareRegist/success?allData=' +
                  JSON.stringify(res.data),
              })
            }
          })
      })
    },
    hiLogin() {
      this.$refs.uForm1.validate().then(res => {
        this.isLoading = true
        api
          .hiRegister(Object.assign({}, this.form, { pkParent: this.pkParent }))
          .then(res => {
            this.isLoading = false
            if (res.code == 200) {
              uni.redirectTo({
                url:
                  '/pages/shareRegist/success?allData=' +
                  JSON.stringify(res.data),
              })
            }
          })
      })
    },
    confirmPopup(e) {
      this.form.pkCountry = e.value[0].id
      this.form.pkCountryName = e.value[0].label
      this.isCountry = false
    },
    getCountry() {
      api.getCountry().then(res => {
        this.countryList = [
          res.data.map(item => {
            return {
              label: item.shortName,
              id: item.pkId,
            }
          }),
        ]
        this.countryList[0].forEach(item => {
          if (this.pkCountry == item.id) {
            this.form.jsName = item.label
            this.form.pkCountryName = item.label
          }
        })
      })
    },
    // 获取验证码
    getVilCode() {
      this.startTime()
      api
        .verification({
          phone: this.form.phone,
        })
        .then(res => {})
        .catch(err => {
          this.beginTime = 0
        })
    },
    // 倒计时
    startTime() {
      if (this.isSend) return
      this.isSend = true
      this.getCode = this.beginTime + ' s'
      let that = this
      this.timer = setInterval(() => {
        this.beginTime--
        this.getCode = this.beginTime + ' s'
        if (this.beginTime < 0) {
          clearInterval(this.timer)
          this.getCode = '获取验证码'
          this.beginTime = 60
          this.isSend = false
        }
      }, 1000)
    },
  },
}
</script>

<style lang="scss" scoped>
.content1 {
  background-color: #fff;
  // background-image: url('@/static/images/haiRgeiest1.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  height: 100vh;
}
.content {
  background-image: url('@/static/images/huan.jpg');
  // background-image: url('@/static/images/regiestBg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
}
.tit {
  font-size: 48px;
  font-family: PangMenZhengDao-Regular, PangMenZhengDao;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  padding-top: 80px;
  margin-bottom: 20px;
}
.index_header {
  background: #f9f9f9;
  height: 330rpx;

  font-size: 18px;
  font-family:
    PingFang SC-Semibold,
    PingFang SC;
  font-weight: 600;
  color: #333333;
  text-align: center;
  padding: 10px 0;
}
.formed {
  padding: 0 120rpx;
}
.formed1 {
  padding: 0 120rpx;
  padding-top: 550rpx;
}
.getCode {
  font-size: 10px;
  font-family:
    PingFang SC-Regular,
    PingFang SC;
  font-weight: 400;
  color: #005bac;
}
.uBtn {
  margin-top: 120rpx;
}
.picker {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-width: 0.5px !important;
  border-color: #dadbde !important;
  border-style: solid;
  border-radius: 4px;
  padding: 6px 9px;
  background: #fff;
}
::v-deep .u-input {
  background: #fff;
}
.mask {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100vh;
  top: 0;
}
</style>