tihuo/addons/pickup/uniapp/pages/index/index.vue

<template>
	<view class="content">
		<image class="logo" :src="$PIC(giftimg)"></image>
		<view class="text-area">
			<view style="height: 336rpx;"></view>
			<view class="info-box">
				<view class="title">礼品兑换中心</view>
				<view class="input-title">输入卡号</view>
				<view><input type="text" placeholder-style="color:#ccc" value="" placeholder="请输入礼品卡号" v-model="giftInfo.card_id"/></view>
				<view class="input-title">输入密码</view>
				<view><input type="text" value="" placeholder-style="color:#ccc" placeholder="请输入涂层密码" v-model="giftInfo.card_pwd"/></view>
				<view class="yzm" v-if="captcha=='1'">
					<view>
						<view class="input-title">验证码</view>
						<view><input style="margin-bottom: 0;" placeholder-style="color:#ccc" type="text" value="" placeholder="点击更换验证码" v-model="giftInfo.code"/></view>
					</view>
					<view class="yzn-img" @click="GetValidCode"><image :src="$ANNEX_URL + '/index.php?s=/captcha&j=' + j"></image></view>
				</view>
				<view class="btn" @click="submit">提交 </view>
				<view class="concord">
					<checkbox-group class="checkbox"  @tap="changeAgreeConcord">
						<checkbox :checked="agreeConcord" value="1"/>
					</checkbox-group>
					<view @tap="changeAgreeConcord"  class="text">我已同意该平台获取我的地址信息</view>
				</view>
				<!-- <view class="btn contact" open-type="contact" @contact="contact">联系客服 </view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '卡密验证',
				giftimg: '',
				j:'',
				captcha: '0',
				erweima: '',
				agreeConcord:false,
				giftInfo: {
					card_id: '',
					card_pwd: '',
					code: ''
				}
			}
		},
		onLoad(e) {
			var id = e.id
			var _this = this;
			
			_this.$GET_FUN('/addons/pickup/pickupapi/getGiftPackage', {'id': id}, res => {
				if (res.data.code == 1) {
					if(res.data.data.gift.image){
						this.giftimg = res.data.data.gift.image
					}
				}
			});
			
			_this.$GET_FUN('/addons/pickup/pickupapi/config',{}, res => {
				if (res.data.code == 1) {
					if(_this.giftimg==''){
						_this.giftimg=res.data.data.bg
					}
					uni.setStorageSync("captcha",res.data.data.captcha)
					if(res.data.data.captcha=='1') {
						this.captcha = res.data.data.captcha
						this.GetValidCode()
					}
				}else {
					
				}
			}, res => {
				
			});
		},
		methods: {
			changeAgreeConcord(){
				this.agreeConcord=!this.agreeConcord;
			},
			contact(a,b){console.log('contact',a,b)},
			submit() {
				var _this = this;
				var card_id = this.giftInfo.card_id
				var card_pwd = this.giftInfo.card_pwd
				var code = this.giftInfo.code
				if(!this.agreeConcord){
					uni.showToast({
						title: '请阅读并同意相关协议',
						icon: 'none'
					});
					return;
				}
				// 兑换礼包
				if(this.giftInfo.card_id) {
					if(this.giftInfo.card_pwd) {
						_this.$GET_FUN('/addons/pickup/pickupapi/receiveGiftPackage', this.giftInfo, res => {

							if (res.data.code == 1) {
								uni.setStorageSync("card_id",card_id)
								uni.setStorageSync("card_pwd",card_pwd)
								let gp_id = res.data.data.giftCardcode.gp_id
								if(res.data.data.giftCardcode.card_status=="2") {
									uni.navigateTo({
										url: "/pages/gift/gift?gp_id=" + gp_id
									})
								}else if(res.data.data.giftCardcode.card_status=="3") {
									uni.navigateTo({
										url: "/pages/success/success"
									})
								}else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
								}
								
							}else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
					}else {
						uni.showToast({
							title: '请输入密码',
							icon: 'none'
						});
					}
				}else{
					uni.showToast({
						title: '请输入卡号',
						icon: 'none'
					});
				}
			},
			GetValidCode() {
				var j = Math.random()
				this.j = j
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.logo {
		height: 366rpx;
		width: 750rpx;
	}

	.text-area {
		width: 100%;
		position: absolute;
		top: 0;
	}
	.info-box {
		background: #FFFFFF;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		line-height: 1;
		padding: 80rpx 30rpx 240rpx;
		box-sizing: border-box;
	}
	.title {
		font-size: 56rpx;
		color: #1A1A1A;
		font-weight: 800;
		margin-bottom: 140rpx;
	}
	.input-title {
		font-size: 30rpx;
		color: #050505;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	input {
		font-size: 36rpx;
		margin-bottom: 74rpx;
	}
	.yzm {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 82rpx;
	}
	.yzn-img {
		width: 190rpx;
		height: 86rpx;
		flex: 1;
	}
	.yzn-img image {
		width: 100%;
		height: 100%;
	}
	.btn {
		width: 500rpx;
		height: 94rpx;
		margin: 0 auto;
		text-align: center;
		line-height: 94rpx;
		border-radius: 6rpx;
		background: linear-gradient(to top, #C82D2D, #E06363);
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	.concord{ margin: 30rpx  80rpx 0; height: 60rpx; line-height: 60rpx; }
	.concord .checkbox{ float: left;}
	.concord .checkbox checkbox{ transform: scale(0.6,0.6);}
	.concord .text{ font-size: 28rpx; color: #565656; margin-top: 2rpx;}
	
	.contact{ margin-top: 60rpx; height: 80rpx; line-height: 80rpx; background:#42b983; color: #ffffff;}
</style>