<template>
	<view>
		<u-overlay :show="show" @tap="cancle">
			<view class="flex_items flex_center" style="width: 100%;height: 100vh;">
				<view v-if="istype=='login'" class="login flex_column flex_items" @tap.stop="gonone">
					<u--form labelPosition="left" :model="form" labelWidth="60" style="margin-top: 80rpx;">
						<u-form-item prop="form.phone" border="none" style="border-radius: 8rpx;">
							<view class="flex_start flex_items"
								style="width: 428rpx;height:80rpx;background: #fff;border-radius: 43rpx;">
								<u--input class="ml30" v-model="form.phone" border="none" placeholder="请输入手机号"
									placeholderStyle="color:#FDAE73;font-size:26rpx" color="#FD5B23"
									fontSize="13"></u--input>
							</view>
						</u-form-item>
						<u-form-item prop="form.code" border="none" style="border-radius: 8rpx;">
							<view class="flex_start flex_items"
								style="width: 428rpx;height: 80rpx;background: #fff;border-radius: 43rpx;">
								<u--input class="ml30" v-model="form.code" border="none" placeholder="请输入验证码"
									placeholderStyle="color:#FDAE73;font-size:26rpx" color="#FD5B23"
									fontSize="13"></u--input>
								<view @click="getcode" class="f22 mr30 p10 f-center"
									style="background: #FA483D;color: #fff;border-radius:48rpx;width: 130rpx;">
									{{codemsg}}
								</view>
							</view>
						</u-form-item>
					</u--form>
					<view class="f26 mt10 f-center" style="color: #FF7255;">接收验证码 最高可领500元立减金</view>
					<image @click="gologin" :src="okbtn" style="width: 389rpx;height: 69rpx;margin-top: 100rpx;"
						mode=""></image>
					<text class="service-info">服务由成都蓝色兄弟网络科技有限公司提供，相关服务和责任由第三方承担，请咨询第三方公司客服400-118-1216</text>
				</view>
				<view v-if="istype=='guize'" class="gz plr50 f26 pos" @tap.stop="gonone"
					style="width: 707rpx;height: 1100rpx;color: #8E4D41;line-height:45rpx;">
					<view style="width: 100%;height:946rpx;" class="gznei f26">
						<view class="bold f-center mt20 f32">2024年金市代客产品签约及柜台债二级交易活动细则
						</view>
						<view class="mt40 bold">活动时间:</view>
						<view class="mt20 ss" style="">
							达标统计时间：2024年4月1日至2024年12月31日
						</view>
						<view class="ss">
							达标领券时间：2024年5月1日至2025年1月31日（按月开展，每月15日将上新2141份微信立减金，本月未被领取的立减金将累计至下个月供达标客户领取。符合活动条件的客户，领取机会最晚保留至2025年1月31日23:59:59）
						</view>
						<view class="mt20 bold">活动对象:</view>
						<view class="mt20 ss">积存金客户/零售柜台债客户/零售结构性存款客户（不接受无实体卡的二类账户等办理）</view>
						<view class="mt20 bold">活动内容:</view>
						<view class="mt20 ss">
							活动期间，客户成功签约积存金、柜台债有机会获得1次领取机会，成功签约结构性存款有机会获得2次领取机会，成功买入1笔2000元面值（含）以上二级流通柜台债,有机会获得1次领取机会。整个活动期间单个项目单个客户不可重复奖励。每位客户领取随机立减金金额从15元至500元不等。活动名额有限，先领先得。
						</view>
						<view class="ss">其中，柜台债买入特指二级买入。满足活动条件的次月进行奖品发放。激励对象剔除活动期内产品先解约后签约的情况。
						</view>
						<view class="mt20 bold">活动细则:</view>
						<view class="mt20">
							<view class="ss">
								1、适用客户:须为本行认可的上海农商银行实体借记卡持卡人（不接受无实体卡的二类账户等办理），且为积存金、柜台债、结构性存款签约客户。积存金和柜台债的签约及买入可通过柜面、手机银行和网上银行等渠道办理，结构性存款的签约可通过柜面渠道办理。
							</view>
							<view class="mt20 ss">
								2、微信立减金每月上新合计2141份（品种包括：15元微信立减金、20元微信立减金、50元微信立减金、100元微信立减金和500元微信立减金），每月份额有限，先领先得，每次领取只能获得一档价值的微信立减金。每月立减金按照领取时序，先到先得，领完即止。本月未被领取的立减金将累计至下个月供达标客户领取。上海农商银行有权根据实际情况，调配奖券面值、数量与领用规则等。
							</view>
							<view class="mt20 ss">
								3、15元立减金,单笔消费实付金额满15.01元可用;20元立减金,单笔消费实付金额满20.01元可用;50元立减金,单笔消费实付金额满50.01元可用;100元立减金,单笔消费实付金额满100.01元可用;500元立减金,单笔消费实付金额满500.01元可用。
							</view>
							<view class="mt20 ss">
								4、满足活动要求的客户，根据达标产品类型、其积存金业务签约手机号/柜台债业务资金卡开户预留手机号/结构性存款业务签约卡开户预留手机号将在次月收到短信提示(短信提示通常于月初前5个工作日之后发出)，客户须于短信提示中规定的截止日前、通过指定路径领取。客户领取时须填写根据达标产品类型对应的“积存金业务签约手机号”或“柜台债业务资金卡开户预留手机号”或“结构性存款业务签约卡开户预留手机号”进行信息验证，验证通过后领取，微信立减金将自动存入当前微信卡包。
							</view>
							<view class="ss mt20">
								5、若出现客户因手机号问题导致未收到短信、或因客户本人未妥善保存造成短信泄露、或逾期未能在短信提示的截止日前领取导致领取失败等情况，责任由客户自行承担，本行不予补发。
							</view>
							<view class="ss mt20">
								6、微信立减金有效期为领取后的20个自然日内，仅限微信支付时使用上海农商银行借记卡支付，请在有效期内使用，逾期作废。
							</view>
							<view class="ss mt20">
								7、微信立减金一经领取不能退换，不能兑换现金或其他商品。
							</view>
							<view class="ss mt20"> 8、客户使用微信立减金完成的订单，如发生退货或撤销交易，视为客户微信立减金已使用，红包金额不予退还，红包不予补发。
							</view>
							<view class="ss mt20">
								9、客户领取微信立减金红包前，请确保同一手机号注册的微信账号已在同一设备登录。
							</view>
							<view class="ss mt20">
								10、微信立减金在少数特定商户(详见卡券详情)、零钱通、理财通等无法使用;社交支付(如转账、红包、个人收款码支付等)及合单支付(微信支付订单号位41开头的交易)无法使用。
							</view>
							<view class="ss mt20">
								11、本活动中商品及相关服务由本行供应商负责提供，持卡人因商品或服务质量引发的任何索赔、质询及投诉由本行供应商协助处理和解决。供应商客服热线:400-118-1216(服务时间:工作日8:00-24:00;周六日及法定节假日9:00-23:00);本行24小时客户服务热线:021-962999或4006962999。
							</view>
							<view class="ss mt20">
								12、如发现客户有利用活动规则或系统漏洞、作弊、冒用他人信息参与活动进行虚假交易或违法交易等手段恶意套取优惠奖励的，上海农商银行具有取消该客户参加本活动的权利，并有权取消或收回其因参加本活动所获得的奖品及使用资格。
							</view>
							<view class="ss mt20">
								13、在法律许可范围内，上海农商银行保留本次活动合理解释权。上海农商银行有权修订本活动条款及细则，并经相关途径公告后(包括但不限于上海农商银行手机银行、上海农商银行微信公众号、上海农商银行工会卡微信公众号等)生效。
							</view>
							<view class="ss mt20">
								14、本活动与苹果公司无关。
							</view>
						</view>
					</view>

					<view style="width: 100%;height: 40rpx;"></view>
					<view @click="cancle" class="flex_items flex_center abs" style="width:100%;bottom: -70rpx;left: 0;">
						<image class="" :src="close" style="width: 45rpx;height: 45rpx;" mode=""></image>
					</view>
				</view>
				<view v-if="istype=='iszj'" class="iszj flex_column flex_items" @tap.stop="gonone">
					<view class="flex_column flex_items" style="width: 100%;">
						<image :src="hdl" style="width: 208rpx;height: 246rpx;margin-top: 66rpx;" mode=""></image>
						<view class="bold f28 mt10" style="color:#FA483D;">
							{{title}}
						</view>
						<view class="mt10 f26" style="color:#FA483D;">请到【我的奖品】中查看并兑换</view>
					</view>
					<view class="flex_between flex_items" style="margin-top:100rpx;width: calc(100% - 80rpx);">
						<view @click="cancle" class="f-center f30 bold"
							style="width: 194rpx;height:65rpx;border-radius: 48rpx;line-height: 65rpx;border:1px solid #FFF2A3;color: #FFF2A3;letter-spacing:5rpx;">
							继续领取
						</view>
						<image :src="godui" style="width: 194rpx;height:69rpx;" @click="qudui" mode=""></image>
					</view>
				</view>
				<view v-if="istype=='out'" class="flex_column flex_items bgwhite plr20 ptb40" @tap.stop="gonone"
					style="border-radius: 48rpx;width: 500rpx;">
					<view class="f34 bold">退出登录</view>
					<view class="mt20 f30" style="color:#666666">
						您是否确认退出登录
					</view>
					<view class="f30 mt10" style="color:#666">
						退出后我们会继续保留您的账号数据
					</view>
					<view class="mt60 flex_between flex_items" style="width: calc(100% - 50rpx);">
						<view @click="goout" class="f-center f32"
							style="width: 200rpx;height: 68rpx;border: 1px solid #666;border-radius: 48rpx;line-height:68rpx;">
							退出</view>
						<image @click="cancle" :src="qx" style="width: 200rpx;height:72rpx;" mode=""></image>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {Debounce} from "@/util/common.js"
	export default {
		data() {
			return {
				show: true,
				codemsg: "获取验证码",
				codesecond:60,
				qx: require('@/static/can.png'),
				form: {
					phone: "",
					code: "",
					activity_id: 1
				},
				close: require('@/static/close.png'),
				okbtn: require('@/static/okbtn.png'),
				hdl: require('@/static/hdl.png'),
				godui: require('@/static/godui.png'),
				iscut: 0
			}
		},
		props: ["istype", "isshow", "title", "link"],
		mounted() {
			this.show = this.isshow
		},
		methods: {
			gook() {
				console.log(1212)
			},
			cancle(types) {
				let tt = {
					types: "",
					show: false
				}
				if (this.istype == 'login') {
					return false
				}
				if (types) {
					tt.types = types
				}
				this.show = false
				this.$emit('backshow', tt)
			},
			getcode:Debounce( function(){
				if (this.form.phone == '') {
					uni.showToast({
						title: "手机号不能为空",
						icon: "none"
					})
					return false
				}
				if (this.iscut == 1) {
					return false
				}
				this.getphonecode()
			},1000),
			getphonecode() {
				let that = this
				uni.showLoading({
					title: "发送中..."
				})
				that.api.getcodes({
					phone: that.form.phone
				}).then((res) => {
					console.log(res)
					if (res.data.code == '200') {
						this.iscut = 1
						uni.showToast({
							title: "发送成功",
							icon: "success",
							duration: 800,
						})
						setTimeout(function() {
							if (that.codemsg == "获取验证码") {
								// that.getphonecode()
								that.codesecond = 60
								that.codemsg = that.codesecond+'s';
								that.int = setInterval(() => {
									that.codesecond -= 1;
									that.codemsg = that.codesecond+'s';
									if (that.codesecond == 0) {
										clearInterval(that.int);
										that.codemsg = "重新发送";
									}
								}, 1000);
							}
						}, 800);
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						this.reset()
						this.show = false
					}
				})
			},
			qudui() {
				window.open(this.link, "_blank")
			},
			gologin() {
				let that = this
				uni.showLoading({
					title: '登录中...'
				})
				that.api.loglin(that.form).then((res) => {
					if (res.data.code == '200') {
						getApp().globalData.token = res.data.data.front_token
						// uni.setStorageSync('token',res.data.data.front_token)
						uni.showToast({
							title: '登录成功',
							icon: 'success',
							duration: 800
						})
						setTimeout(function() {
							that.$emit("backshow", {
								types: "loginok",
								show: false
							})
						}, 800);
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			goout() {
				uni.showLoading({
					title: '退出中...'
				})
				let that = this
				setTimeout(function() {
					uni.showToast({
						title: '退出成功',
						icon: 'success',
						duration: 800
					})
					setTimeout(function() {
						uni.removeStorageSync('token')
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}, 800);
				}, 800);
			},
			gonone() {},
		}
	}
</script>

<style>
	.login {
		background-image: url('~@/static/login.png') !important;
		background-size: 100% 100%;
		height: 647rpx;
		width: 541rpx;
		padding-top: 30rpx;
	}
	
	.service-info{
		font-size: 20rpx;
		text-align: center;
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 20rpx;
		color: #FFE5BE;
	}

	.gz {
		background-image: url('~@/static/hdgz.png') !important;
		background-size: 100% 100%;
	}

	.gznei {
		overflow-y: auto;
		overflow-x: hidden;
		margin-top: 80rpx;
	}

	.iszj {
		background-image: url('~@/static/gxhd.png') !important;
		background-size: 100% 100%;
		height: 630rpx;
		width: 501rpx;
	}

	.ss {
		text-indent: 2em;
	}
</style>