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="title">欢迎注册</view>
      <!-- <view class="tit" v-if="!pkCountry">{{ '嗨粉扫天下' }}</view> -->
      <!-- 海粉 -->
      <view class="formed1">
        <u-form :model="form" labelWidth="90px" ref="uForm" :rules="rules">
          <u-form-item label="推荐编号" prop="parentCode">
            <u-input v-model="form.parentCode" disabled> </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"
              :placeholder="'请输入联系方式'"
              type="number"
              maxlength="20"
            />
          </u-form-item>

          <u-form-item label="登录密码" prop="loginPwd">
            <u-input
              :password="isPwd"
              :placeholder="'请输入登录密码'"
              v-model="form.loginPwd"
            >
              <template #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="payPwd">
            <u-input
              :password="isPwd2"
              :placeholder="'请输入支付密码'"
              v-model="form.payPwd"
            >
              <template #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="smsCode">
            <u-input v-model="form.smsCode" :placeholder="'请输入验证码'">
              <template #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="loginPwd">
          <u-input :password="isPwd1"
                   :placeholder="'请输入登录密码'"
                   v-model="form.loginPwd">
            <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="payPwd">
          <u-input :password="isPwd2"
          :placeholder="'请输入支付密码'"
                   v-model="form.payPwd">
            <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>
    <u-modal
      :show="showSuccessModal"
      title="注册成功"
      :show-cancel-button="true"
      cancel-text="复制"
      confirm-text="自动登录"
      @confirm="onModalConfirm"
      @cancel="onModalCancel"
      @close="showSuccessModal = false"
    >
      <view class="slot-content" v-if="successData">
        <view class="success-item">
          <text class="item-label">会员编号:</text>
          <text class="item-value">{{ successData.memberCode }}</text>
        </view>
        <view class="success-item">
          <text class="item-label">会员姓名:</text>
          <text class="item-value">{{ successData.memberName }}</text>
        </view>
        <view class="success-item">
          <text class="item-label">联系方式:</text>
          <text class="item-value">{{ successData.phone }}</text>
        </view>
        <view class="success-item">
          <text class="item-label">登录密码:</text>
          <text class="item-value">{{ successData.loginPassword }}</text>
        </view>
        <view class="success-item">
          <text class="item-label">支付密码:</text>
          <text class="item-value">{{ successData.payPassword }}</text>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import * as api from '@/config/goods'
import {
  getMemberCode,
  getPhoneCode,
  getRegister,
  autoLogin,
} from '@/config/share'
import { setToken } from '@/config/auth.js'
import store from '@/store'
export default {
  components: {},
  data() {
    return {
      isTrue: false,
      howHeader: 'HF',
      pkParent: '',
      form: {
        memberName: '',
        smsCode: '',
        loginPwd: '',
        payPwd: '',
        parentCode: '',
        phone: '',
      },
      isLoading: false,
      getCode: '获取验证码',
      isSend: false,
      beginTime: 60,
      timer: '',
      pkCountry: '',
      isCountry: false,
      countryList: [],
      isPwd: true,
      isPwd1: true,
      isPwd2: true,
      showSuccessModal: false,
      successData: null,
      rules: {
        parentCode: [
          {
            required: true,
            message: '请输入推荐编号',
            trigger: ['blur'],
          },
        ],
        memberName: [
          {
            required: true,
            message: '请输入会员姓名',
            trigger: ['blur'],
          },
        ],
        phone: [
          {
            required: true,
            message: '请输入联系方式',
            trigger: ['blur'],
          },
        ],
        smsCode: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['blur'],
          },
        ],
        loginPwd: [
          {
            required: true,
            message: '请输入登录密码',
            trigger: ['blur'],
          },
        ],
        payPwd: [
          {
            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'],
          },
        ],
        loginPwd: [
          {
            required: true,
            message: '请输入登录密码',
            trigger: ['change', 'blur'],
          },
        ],
        payPwd: [
          {
            required: true,
            message: '请输入支付密码',
            trigger: ['change', 'blur'],
          },
        ],
      },
    }
  },
  onReady() {},
  onLoad(options) {
    this.pkParent = options.code
    this.pkCountry = options.country || ''
    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: {
    getUseInfo() {
      getUseInfo().then(res => {
        this.userInfo = res.data
      })
    },
    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() {
      getMemberCode(this.pkParent).then(res => {
        this.$set(this.form, 'parentCode', res.data)
        console.log(this.form)
      })
      // 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(() => {
        this.isLoading = true
        getRegister(Object.assign({}, this.form, { parentCode: this.pkParent }))
          .then(res => {
            this.isLoading = false
            if (res.code == 200) {
              this.successData = res.data
              this.showSuccessModal = true
            } else {
              uni.showToast({
                title: res.msg || '注册失败',
                icon: 'none',
              })
            }
          })
          .catch(() => {
            this.isLoading = false
            uni.showToast({
              title: '注册请求失败',
              icon: 'none',
            })
          })
      })
    },
    onModalConfirm() {
      if (this.successData) {
        this.handleAutoLogin(this.successData)
      }
    },
    onModalCancel() {
      if (this.successData) {
        const modalContent = `会员编号: ${this.successData.memberCode}\n会员姓名: ${this.successData.memberName}\n联系方式: ${this.successData.phone}\n登录密码: ${this.successData.loginPassword}\n支付密码: ${this.successData.payPassword}`
        uni.setClipboardData({
          data: modalContent,
          success: function () {
            uni.showToast({
              title: '复制成功',
              icon: 'success',
            })
          },
        })
      }
    },
    handleAutoLogin(loginData) {
      autoLogin({
        username: loginData.memberCode,
        password: loginData.loginPassword,
        uuid: loginData.uuid,
      })
        .then(loginRes => {
          if (loginRes.code === 200) {
            uni.showToast({
              title: '登录成功',
              icon: 'success',
              duration: 1500,
            })
            setToken(loginRes.data.access_token)
            store.dispatch('GetInfo').then(res => {
              uni.switchTab({ url: '/pages/index/index' })
            })

            // setTimeout(() => {
            //   uni.reLaunch({
            //     url: '/pages/index/index',
            //   })
            // }, 1500)
          } else {
            uni.showToast({
              title: loginRes.msg || '自动登录失败',
              icon: 'none',
            })
          }
        })
        .catch(err => {
          console.log(err)
          uni.showToast({
            title: '自动登录请求失败',
            icon: 'none',
          })
        })
    },
    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()
      getPhoneCode({
        phone: this.form.phone,
        parentCode: this.pkParent,
      })
        .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: linear-gradient(-45deg, #005bac, #0077c2, #0099e0, #00bfff);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 100vh;
  overflow: auto;
}
.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;
}
.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  padding-top: 120rpx;
  padding-bottom: 80rpx;
}
.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 {
  margin: 0 40rpx;
  padding: 40rpx 30rpx;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 16rpx;
}
.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;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.slot-content {
  padding: 30rpx 20rpx;
  font-size: 28rpx;
}
.success-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;
}
.item-label {
  color: #606266;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.item-value {
  color: #303133;
  word-break: break-all;
  text-align: right;
}
</style>