web-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, #fb3024, #fb3024 )"
                :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, #fb3024, #fb3024 )"
                :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-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: #C8161D;
}
.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>