yicangzongtai_app_240321/pages/login/code.vue

<template>
	<view class="container-mine">
		<navbar ref="navbar" :config="config"></navbar>
		<view class="top">
			<view class="title">输入验证码</view>
			<view>我们已向 {{mobile}} 发送验证码短信</view>
			<view>请查看短信并输入验证码</view>
		</view>
		<view class="body">
			<u-message-input focus @finish="finish"></u-message-input>
			<u-verification-code :seconds="seconds" start-text="重新获取" @end="end" @start="start" ref="uCode"
				@change="codeChange"></u-verification-code>
			<view class="reset" @tap="getCode">{{tips}}</view>
		</view>
	</view>
</template>

<script>
	import {smsCode} from "@/api/government.js"
	let app = getApp()
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '',
					color: '#fff',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, '#F9F9F9'],
				},
				statusBarHeight: app.globalData.statusBarHeight,
				mobile: '',
				tips: '',
				seconds: 60,
				cid: null
			}
		},
		onLoad(options) {
			if (options && options.mobile) {
				this.mobile = options.mobile
			}
			// #ifdef APP-PLUS
			plus.push.getClientInfoAsync((info) => {
				let cid = info["clientid"];
				console.log('cid',cid)
				uni.setStorageSync('cid', cid)
				this.cid = cid
			});
			// #endif
		},
		mounted() {
			this.getCode()
		},
		methods: {
			codeChange(text) {
				console.log(text)
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					smsCode({mobile:this.mobile}).then(res=>{
							this.$u.toast('验证码已发送');
					}).finally(e=>{
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$refs.uCode.start();
					})
					
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('请输入验证码');
			},
			finish(e) {
				console.log('输入结束，当前值为：' + e);
				this.$yghttp.post('/user/login/captcha', {
					captcha: e,
					mobile: this.mobile,
					cid: this.cid
				}).then(res => {
					if (res && res.code == 200) {
						this.$u.toast('登录成功');
						uni.setStorageSync('apiToken', res.data.token);
            this.getUsrShopInfo()
						uni.switchTab({
							url: '/pages/home'
						})
					} else {
						this.$u.toast('验证码错误');
					}
				})
			},
      // 获取商城用户店铺信息 商城接口
      getUsrShopInfo() {
        this.$http.get('/yxt/shop/loadSubShopByUserId').then(res => {
          if (res && res.code == 200) {
            uni.setStorageSync("shop", res.shop);
          }
        })
      }
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	/deep/ .hx-navbar__icon {
		color: #303133 !important;
	}
	/deep/ .u-char-item{
		width: 120rpx !important;
		height: 120rpx !important;
		background: #ffffff;
		border-radius: 20rpx;
		border:none !important;
	} 
	/deep/.u-box-active{
		border: 2rpx solid #56cbda !important;
	}
	.lgoin-nav {
		width: 100%;
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 0;
	}

	.top {
		text-align: center;
		padding: 80rpx 0 150rpx;
		font-size: 30rpx;

		.title {
			font-size: 60rpx;
			margin-bottom: 20rpx;
			font-weight: 700;
		}
	}

	.body {
		padding: 0 30rpx;
		margin-bottom: 200rpx;

		.uni-input {
			height: 100rpx;
			margin-bottom: 20rpx;
			border-bottom: 1rpx solid #ccc;

			.uni-input-placeholder {
				color: #BEBEBE;
			}
		}

		.login-btn {
			background-color: #4095E5;
			color: #fff;
		}

		/deep/ .u-char-box {
			margin-bottom: 20rpx;

			.u-char-flex {
				// justify-content: space-between;
			}
		}

		.reset {
			// max-width: 300rpx;
			padding: 10rpx 80rpx 10rpx;
			margin-left: auto;
			text-align: right;
			color: #56CBD9;
			// border: 1rpx solid #3775F6;
			border-radius: 8rpx;
			cursor: pointer;
		}
	}
</style>