pages/sub_mine/bindSxy.vue

<template>
	<view class="bindSxy">
		<view class="bindSxy-list">
			<u-field v-model="code" label="短信验证" placeholder="请输入验证码" placeholder-style="color:#999999" clear-size="40">
				<u-button size="mini" slot="right" type="primary" @click="getCode" shape="circle" class="btn" :disabled="disabled">{{codeText}}</u-button>
			</u-field>
		</view>
		<view class="bindSxy-lay">
			<u-checkbox v-model="checked" shape="circle" label-size="24">我已同意<text class="bindSxy-lay-text" @click="toPath('/pages/sub_mine/agreementSign')">《市民卡免密代扣签约协议》</text></u-checkbox>
		</view>
		<u-button :custom-style="bindSxyBtn"  @click="bindSxy">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: "",
				disabled: false,
				codeText: "获取验证码",
				checked: false,
				bindSxyBtn:{
					width: '600rpx',
					backgroundColor: '#2FA8E1',
					color: '#FFFFFF',
					fontFamily: "PingFang-SC-Medium",
					fontSize: '30rpx',
					marginTop: '100rpx',
					padding: '50rpx 0'
				}
			}
		},
		methods: {
			
			//获取验证码
			getCode() {
				let that = this
				that.$u.post('/v1/bindcardcode').then(res => {
					uni.showToast({
						title: '发送成功',
						icon: "none",
						duration: 800
					})
					let i = 60
					that.disabled = true
					that.timer = setInterval(() => {
						if (i != 0) {
							i--
							that.codeText = i + "s"
						} else {
							clearInterval(that.timer)
							that.codeText = "重新获取"
							that.disabled = false
						}
					}, 1000)
				})
			},
			bindSxy() {
				let that = this
				let {
					code,
					checked
				} = that
				if (code == "") {
					uni.showToast({
						title: "请输入验证码",
						duration: 800,
						icon: "none"
					})
					return false
				}
				if (checked == false) {
					uni.showToast({
						title: "请先阅读并同意《市民卡免密代扣签约协议》",
						duration: 800,
						icon: "none"
					})
					return false
				}
				that.$u.post("/v1/signbxy", {
					"agree": code
				}).then((res) => {
					uni.setStorageSync("signed", "yes")
					uni.showToast({
						title: "签约成功",
						icon: "none",
						duration: 800,
						complete(res) {
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/sub_tabbar/index"
								})
							}, 1500)
						}
					})
				})
			},
			
		},
		onLoad(){
			let that = this
			let i = 60
			that.disabled = true
			that.timer = setInterval(() => {
				if (i != 0) {
					i--
					that.codeText = i + "s"
				} else {
					clearInterval(that.timer)
					that.codeText = "重新获取"
					that.disabled = false
				}
			}, 1000)
		}
	}
</script>

<style scoped lang="scss">
	.btn {
		color: #2FA8E1;
		background-color: #FFFFFF;
		border-color: #2FA8E1;
		border-width: 1rpx;
		border-style: solid;
		font-family: "PingFang-SC-Regular";
	}
	.bindSxy {
		width: 100vw;
		overflow: hidden;
		padding-bottom: 30rpx;

		// background-color: ;
		&-list {
			margin-top: 30rpx;
			background-color: #FFFFFF;
		}
		&-lay {
			font-family: "PingFang-SC-Regular";
			color: #666666;
			margin: 10rpx 30rpx;
		
			&-text {
				color: #2FA8E1;
			}
		}

		&-btn {
			width: 600rpx;
			background-color: #2FA8E1;
			color: #FFFFFF;
			font-family: "PingFang-SC-Medium";
			font-size: 30rpx;
			margin-top: 30rpx;
			padding: 50rpx 0;
		}
	}
</style>