123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349 |
- <template>
- <view>
- <headContent borderBottom>
- <template #left>
- <reverse-back />
- </template>
- <template #content>
- <view class="haed-title">
- {{ title }}
- </view>
- </template>
- </headContent>
- <view class="bangding-box">
- <view class="bangding-item" v-show="type == 1">
- <view class="item-lable">
- 手机
- </view>
- <view class="item-area" @click.stop="selectAreaCode">
- <template v-if="account.area_code">
- <text style="color: #000;">+{{ account.area_code }}</text>
- </template>
- <template v-else>
- <text>国家和地区</text>
- <text class="iconfont"></text>
- </template>
- </view>
- <text class="item-link"></text>
- <input class="item-input" v-model="account.user_string" type="text"
- placeholder-class="placeholder-class" placeholder="手机号">
- </view>
- <view class="bangding-item" v-show="type == 2">
- <view class="item-lable">
- 邮箱
- </view>
- <input class="item-input" v-model="account.user_string" type="text"
- placeholder-class="placeholder-class" placeholder="邮箱号">
- </view>
- <view class="err-hint">
- {{ errText[errIndex || 0] }}
- </view>
- <view class="bangding-item code-item">
- <view class="item-lable">
- 验证码
- </view>
- <input class="item-input" type="text" v-model="account.code" placeholder-class="placeholder-class"
- placeholder="请输入手机验证码">
- <view class="item-code" @click.stop="getCode()">
- {{ codeText }}
- </view>
- </view>
- <view :class="['bangding-btn' , next ? 'active-btn': '' ] " @click.stop="next ? submitBindAccount() : ''">
- 绑定
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- Api_getEmailCode,
- Api_getSmsSend,
- Api_setBindEmail,
- Api_setBindMobile
- } from "@/api/index.js";
- export default {
- name: 'bind-phone',
- data() {
- return {
- title: '',
- Api_: '',
- type: null,
- codeText: '获取验证码',
- errIndex: '',
- next: false,
- account: {
- user_string: '17777777777',
- area_code: '',
- code: '893720'
- },
- errText: [
- '',
- '请选择国家地区',
- '请输入正确的手机号',
- '请输入正确的邮箱号',
- ]
- };
- },
- onLoad(opt) {
- this.type = opt?.type || 1;
- if (this.type == 1) {
- // 手机号
- this.Api_ = Api_getSmsSend
- this.title = '绑定手机'
- }
- if (this.type == 2) {
- // 邮箱
- this.Api_ = Api_getEmailCode;
- this.title = '绑定邮箱'
- }
- },
- mounted() {
- },
- watch: {
- account: {
- handler(newContent) {
- if (newContent.user_string && newContent.code && (this.type == 1 ? newContent.area_code : true)) {
- this.next = true
- } else {
- this.next = false
- }
- },
- immediate: true,
- deep: true
- },
- 'account.area_code': {
- handler(newCode) {
- if (newCode && this.errIndex === 1) {
- this.errIndex = 0
- }
- },
- immediate: true
- },
- 'account.user_string': {
- handler(newCode) {
- if (newCode && [2, 3].includes(this.errIndex)) {
- this.errIndex = 0
- }
- },
- immediate: true
- }
- },
- methods: {
- selectAreaCode() {
- uni.navigateTo({
- url: '/pages/login/area-code'
- })
- },
- setAreaCode(e) {
- if (e) {
- this.account.area_code = e.area_code;
- }
- },
- // 校验
- jiaoyan() {
- if ([1, '1'].includes(this.type)) {
- if (!this.account.area_code) {
- this.errIndex = 1
- return false
- };
- if (!this.account.user_string) {
- this.errIndex = 2
- return false
- };
- } else if ([2, '2'].includes(this.type)) {
- if (!this.account.user_string) {
- this.errIndex = 3
- return false
- };
- } else {
- return false
- }
- return true
- },
- getCode() {
- if (this.codeText !== '获取验证码') {
- return false
- }
- const errStatus = this.jiaoyan()
- if (!errStatus) {
- return false
- }
- let obj = {
- user_string: this.account.user_string
- };
- if (this.type == 1) {
- obj.area_code = this.account.area_code
- };
- if (this.Api_) {
- this.Api_(obj).then(res => {
- uni.showToast({
- title: '验证码发送成功',
- icon: 'none'
- })
- }).catch(err => {
- })
- let num = 60
- this.timeInterval = setInterval(() => {
- num--;
- if (num <= 0) {
- clearInterval(this.timeInterval);
- this.codeText = '获取验证码';
- return false
- };
- this.codeText = `${num}秒后重新发送`;
- }, 1000)
- }
- },
- submitBindAccount() {
- //
- let Api_ = '',
- obj = {},
- title = ''
- if (this.type == 1) {
- // 手机号
- title = '手机号'
- Api_ = Api_setBindMobile;
- obj = {
- mobile: this.account.user_string,
- code: this.account.code
- }
- }
- if (this.type == 2) {
- // 邮箱
- title = '邮箱'
- Api_ = Api_setBindEmail;
- obj = {
- email: this.account.user_string,
- code: this.account.code
- }
- }
- if (Api_) {
- uni.showLoading({
- title: '',
- mask: true
- })
- Api_(obj).then(res => {
- setTimeout(() => {
- uni.showToast({
- title: `绑定${title}成功`,
- icon: "none"
- })
- setTimeout(() => {
- uni.navigateBack()
- }, 1000)
- }, 300)
- }).catch(err => {
- }).failly(() => {
- setTimeout(() => {
- uni.hideLoading()
- }, 200)
- })
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .bangding-box {
- width: 100%;
- padding: 0 $pages-padding;
- .bangding-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 100rpx;
- border-bottom: 1rpx solid $border-color2;
- font-size: 28rpx;
- padding-top: 20rpx;
- .item-lable {
- flex-shrink: 0;
- width: 120rpx;
- }
- .item-area {
- flex-shrink: 0;
- width: 196rpx;
- color: $SizeColor1;
- font-weight: bold;
- display: flex;
- align-items: center;
- .iconfont {
- margin-left: 3px;
- color: #5b5b5b;
- font-size: 20rpx;
- }
- // border-right: 1rpx solid $border-color6;
- }
- .item-link {
- display: inline-block;
- margin-right: 30rpx;
- width: 3rpx;
- height: 24rpx;
- background-color: $border-color4;
- }
- .item-input {
- flex: 1;
- font-size: 28rpx;
- }
- .placeholder-class {
- font-size: 28rpx;
- color: $SizeColor1;
- font-weight: bold;
- }
- .item-code {
- color: $Theme-Color;
- }
- }
- .code-item {
- padding-top: 0;
- height: 80rpx;
- }
- .err-hint {
- width: 100%;
- height: 70rpx;
- font-size: 28rpx;
- padding-top: 20rpx;
- color: red;
- }
- }
- .bangding-btn {
- width: 100%;
- margin-top: 80rpx;
- height: 90rpx;
- border-radius: 10rpx;
- font-size: 30rpx;
- text-align: center;
- line-height: 90rpx;
- color: #fff;
- background-color: $btnBgColor;
- }
- .active-btn {
- background-color: $Theme-Color;
- }
- </style>
|