jje_uniapp/myPages/systemSwitch/index.vue

<template>
	<view class="page flex-row justify-center" :style="{'width':sysWidth,'height':sysHeight}">
		<view class="content">
			<swiper :style="{'height':sysHeight}" :duration="0" :current="pageIndex">
				<swiper-item @touchmove.stop>
					<view class="flex-row justify-center">
						<image class="stepImg" src="/static/me/step1.png"></image>
					</view>
					<u--form labelPosition="top" :model="userInfo" :rules="rules" ref="uForm" :labelStyle="labelStyle">
						<view class="flex-row justify-center">
							<view class="formView flex-col justify-around">
								<view>
									<u-form-item labelWidth="auto" label="老系统手机号" prop="phone" borderBottom>
										<u--input v-model="userInfo.phone" border="none" placeholder="填写老系统电话"></u--input>
									</u-form-item>
								</view>
								<view>
									<u-form-item labelWidth="auto" label="老系统会员姓名" prop="memberName" borderBottom>
										<u--input v-model="userInfo.memberName" border="none" placeholder="填写姓名"></u--input>
									</u-form-item>
								</view>
								<view>
									<u-form-item labelWidth="auto" label="当前手机号" prop="phonenumber" borderBottom>
										<u--input v-model="userInfo.phonenumber" border="none" placeholder="填写当前手机号"></u--input>
									</u-form-item>
								</view>
								<view>
									<u-form-item labelWidth="auto" label="验证码" prop="smsCode">
										<view class="flex-row">
											<u--input v-model="userInfo.smsCode" border="none" placeholder="请输入验证码"></u--input>
											<view class="flex-col justify-center" @click="getCode">{{tips}}</view>
										</view>
									</u-form-item>
								</view>
							</view>
						</view>
					</u--form>
					<view class="flex-row justify-center">
						<view class="selectButton" @click="selectUserMsg">
							<text>查询</text>
						</view>
					</view>
					<u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true" @end="disabled1 = false"></u-code>
				</swiper-item>
				<swiper-item @touchmove.stop>

					<scroll-view scroll-y="true" class="scroll-Y" :style="{'height':scrollHeight}">
						<view class="flex-row justify-center">
							<image class="stepImg" src="/static/me/step2.png"></image>
						</view>
						<view class="flex-row justify-center">
							<view class="userMsg flex-col justify-around">
								<view class="flex-row"><text class="key">会员姓名</text><text class="value">张三</text></view>
								<view class="flex-row"><text class="key">手机号码</text><text class="value">17365224542</text></view>
								<view class="flex-row"><text class="key">会员卡号</text><text class="value">SSS000001</text></view>
								<view class="flex-row"><text class="key">会员编号</text><text class="value">SSS000001</text></view>
								<view class="flex-row"><text class="key">积分</text><text class="value">366666</text></view>
								<view class="flex-row"><text class="key">账户余额</text><text class="value">￥22222</text></view>
								<view class="flex-row"><text class="key">赠送余额</text><text class="value">￥22222</text></view>
							</view>
						</view>
						<view class="list" :style="{'height':scrollHeight}">
							<view class="flex-row justify-center">
								<view class="flex-row justify-center  recordView">
									<view :class="recordIndex === 0? 'selectRecord':'record'" @click="clickRecord(0)">
										<text>充值记录</text>
									</view>
									<view :class="recordIndex === 1? 'selectRecord':'record'" @click="clickRecord(1)">
										<text>消费记录</text>
									</view>
								</view>
							</view>
							<swiper :style="{'height':swiperHeight}" :current="recordIndex"
								@change="recordSwiperChange">
								<swiper-item v-for="(item,index) in 2" :key="index">
									<mescroll-item ref="MescrollItem" :i="index" :index="recordIndex"
										:height="swiperHeight">
									</mescroll-item>
								</swiper-item>
							</swiper>
						</view>
					</scroll-view>
					<view class="step2Button flex-row">
						<view class="last" @click="lastStep"><text>上一步</text></view>
						<view class="next" @click="migration"><text>下一步</text></view>
					</view>
				</swiper-item>
				<swiper-item @touchmove.stop>
					<view class="flex-row justify-center">
						<image class="stepImg" src="/static/me/step3.png"></image>
					</view>
					<view class="flex-row justify-center">
						<image class="successImg" src="/static/me/success.png"></image>
					</view>
					<view class="flex-row justify-center successText">
						<text>账户迁移成功</text>
					</view>
					<view class="flex-row justify-center ">
						<view class="endButton" @click="migrationEnd">
							<text>确认</text>
						</view>
					</view>
				</swiper-item>
			</swiper>


		</view>
	</view>
</template>

<script>
	import MescrollItem from "./module/mescrollUni-item.vue";
	export default {
		components: {
			MescrollItem
		},
		data() {
			return {
				pageIndex: 0,
				sysWidth: '',
				sysHeight: '',
				scrollHeight: '',
				swiperHeight: '',
				recordIndex: 0,
				userInfo: {},
				labelStyle: {
					fontSize: '28rpx',
					color: '#333333',
					fontWeight: 'bold'
				},

				tips: '',
				rules: {
					phone: {
						type: 'string',
						required: true,
						message: '请输入11位电话号码',
						trigger: ['blur', 'change']
					},
					memberName: {
						type: 'string',
						min: 1,
						required: true,
						message: '请输入名字',
						trigger: ['blur', 'change']
					},
					phonenumber: {
						type: 'string',
						min: 11,
						max: 11,
						required: true,
						message: '请输入11位电话号码',
						trigger: ['blur', 'change']
					},
					smsCode: {
						type: 'string',
						min: 4,
						max: 6,
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onLoad() {
			let sysInfo = uni.getSystemInfoSync()
			this.sysWidth = sysInfo.windowWidth + 'px'
			this.sysHeight = sysInfo.windowHeight + 'px'
			this.scrollHeight = sysInfo.windowHeight - (sysInfo.windowWidth / 750) * 132 + 'px'
			this.swiperHeight = (750 / sysInfo.windowWidth) * sysInfo.windowHeight - 80 - 132 + 'rpx'
		},

		methods: {


			selectUserMsg() {
				//查询个人信息 todo
				this.pageIndex = 1
			},
			lastStep() {
				this.pageIndex = 0
			},
			migration() {
				//数据迁移 todo
				this.pageIndex = 2
			},
			migrationEnd() {
				uni.switchTab({
					url: '/pages/my/index'
				})
			},
			recordSwiperChange(e) {
				this.recordIndex = e.detail.current
			},
			clickRecord(num) {
				this.recordIndex = num
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
		}

	};
</script>

<style scoped lang="scss">
	@import './index.rpx.scss';
</style>